Re: ~Todo lo de Macromedia Flash~ 2.0
hola aki les paso otro tutorial de flash XDXDXDXD.........
Comencemos!
Lo primero que necesitamos en nuestro juego son sprites y ¿que son los sprites? Son imágenes de cualquier forma o atributo que pueden ser movidas sobre una imagen más grande. Pero para mayor comprensión, un sprite es todo lo que se mueve en un juego aparte del fondo. Pueden descargar todos los sprites para nuestro juego de este archivo flash:
Descarga el archivo con los Sprites
Ahora que tenemos todos los sprites continuemos. Necesitamos un sprite como protagonista y en este caso utilizaremos el movie clip de nuestro súper héroe Pawel. Copialo de la librería (Ctrl. + L para abrir la Librería) al escenario y como nombre de instancia escribe knight (Caballero en Ingles).
Crea un nuevo layer. Y en el primer frame de la línea de tiempo (timeline) copia y pega el siguiente ActionScript:
//---- variables ----
var steps:Number = 5;
var spriteX:Number = 265;
var spriteY:Number = 265;
//---- functions ----
function checkKeys() {
if (Key.isDown(Key.RIGHT)) {
spriteX += steps;
} else if (Key.isDown(Key.LEFT)) {
spriteX -= steps;
}
}
function updatePawel() {
knight._x = spriteX;
knight._y = spriteY;
}
this.onEnterFrame = function() {
checkKeys();
updatePawel();
};
Si todo va bien es este punto nuestro héroe se puede mover de un lado a otro en la pantalla, pero no mueve los pies ni lanza flechas e inclusive se sale de la pantalla. Así que para que se vea mejor haremos unos cambios.
Si hacemos dobleClick sobre nuestro héroe, podrás ver su línea de tiempo y tres layers correspondientes al cuerpo los brazos y los pies que ya están animados y que tiene sus respectivos nombres de instancia.
Así que modifiquemos el código que ya agregamos para darle movimiento a las piernas y los brazos, copien y peguen este código en sustitución del otro o simplemente modifíquenlo:
//---- variables ----
var steps:Number = 5;
var spriteX:Number = 265;
var spriteY:Number = 265;
//---- functions ----
function checkKeys() {
if (Key.isDown(Key.RIGHT) && spriteX<510) {
spriteX -= steps;
knight.legs.play();
} else if (Key.isDown(Key.LEFT) && spriteX>40) {
spriteX -= steps;
knight.legs.play();
}
if (Key.isDown(Key.UP)) {
knight.arms.play();
}
}
function updatePawel() {
knight._x = spriteX;
knight._y = spriteY;
}
this.onEnterFrame = function() {
checkKeys();
updatePawel();
};
Ahora analicemos el código que pegamos anteriormente:
Primero declaramos las variables, steps son el numero de pasos que nuestro héroe puede caminar, spriteX y SpriteY nos ayudaran a dar la posición de nuestro héroe.
//---- variables ----
var steps:Number = 5;
var spriteX:Number = 265;
var spriteY:Number = 265;
Esta función ve si están presionando teclas para que nuestro héroe haga alguna función:
El código siguiente esencialmente dice que si presionamos la tecla derecha del cursor y nuestro héroe no esta fuera del escenario se moverá a la derecha y ejecutara la animación de las piernas
if (Key.isDown(Key.RIGHT) && spriteX<510) {
spriteX += steps;
knight.legs.play();
}
Este código igual que el de arriba la diferencia es que este trabaja con la tecla izquierda del cursor
else if (Key.isDown(Key.LEFT) && spriteX>40) {
spriteX -= steps;
knight.legs.play();
}
Igual este para los brazos
if (Key.isDown(Key.UP)) {
knight.arms.play();
}
Esta función le dice a flash que nuestro héroe va a tomar los valores de las variables spriteX y spriteY
function updatePawel() {
knight._x = spriteX;
knight._y = spriteY;
}
Y este evento onEnterFrame verifica si han presionado alguna tecla o si nuestro héroe se mueve.
this.onEnterFrame = function() {
checkKeys();
updatePawel();
};
Añadiendo un Fondo
Hasta ahora podemos mover nuestro sprite, pero este “esta en el aire” arreglaremos eso agregando un fondo
Hacerlo es bien fácil, solo agrega otro layer debajo de todos los demás y dibuja un fondo o puedes también copiarlo de cualquier otro programa que gustes.
Si no tienes tiempo para dibujar un fondo puedes simplemente hacer un rectángulo gigantesco.
Dibujando la flecha
La flecha puedes dibujarla en flash también, igual puedes usar cualquier otro programa como photoshop, etc. Si miras bien el flash que le proporcione, verán un movie clip llamado flecha en la Librería (Ctrl. + L para abrir la Librería). Sea que vayan a usar la flecha que les proporciono o su propia flecha asegúrense de que esta este dentro de un movie clip y debemos dejarla en la librería no el escenario (esto es muy importante).
Si no lo han hecho abran la librería y hagan clic derecho en el movie clip de la flecha que van a utilizar y seleccionen Linkage Properties. Ahí marquen Export for ActionScrip por defecto el nombre del identificador será el mismo nombre del movie clip, sustitúyanlo por arrow si ya estaba déjenlo así.
Volvamos al código
Modificaremos el código que hicimos anteriormente, agreguémosle al strip algunas variables: una para la velocidad de la flecha y otra para dispara una bala a la vez. Ahora también necesitamos una función para actualizar la flecha.
De esta forma se ve el script ahora:
//---- variables ----
var steps:Number = 5;
var spriteX:Number = 265;
var spriteY:Number = 265;
var speed:Number = 25;
var arrowActive:Boolean = false;
//---- functions ----
function checkKeys() {
if (Key.isDown(Key.RIGHT) && spriteX<510)>40) {
spriteX -= steps;
knight.legs.play();
}
if (Key.isDown(Key.UP) && arrowActive == false) {
knight.arms.play();
attachMovie("arrow", "arrows", 8);
arrows._x = spriteX;
arrows._y = spriteY+50;
arrowActive = true
}
}
function updatePawel() {
knight._x = spriteX;
knight._y = spriteY;
}
function updateArrow() {
if (arrowActive == true) {
arrows._y -= speed;
}
if (arrows._y<-10) {
arrowActive = false;
removeMovieClip(arrows);
}
}
this.onEnterFrame = function() {
checkKeys();
updatePawel();
updateArrow();
};
Hasta ahora tenemos un fondo, un héroe, y flechas ahora necesitamos enemigos
Agregando el Dragón
Bueno ya que le estamos disparando flechas al vacío seria buena idea agregar algo a que dispararle. Igual como hicimos con la flecha, el fondo, etc. Hay que dibujar nuestro dragón. Y como siempre puedes dibujarlo en cualquier otra aplicación y pegarlo en flash. De todas formas puedes encontrar un dragón en el archivo flash que les proporcione así que no se preocupen si no están familiarizados con dibujar un dragón.
Así se ve mi dragón:
Este dragón no está animado pero pueden animar las alas, la cabeza y la cola si quieren para darle más realismo.
No necesitamos instancias del dragón en el escenario pero lo necesitamos en la Librería como movie clip y como hicimos con la flecha debemos cambiar las propiedades del linkage.
Abre la librería y has clic derecho en el movie clip del dragón, selecciona Linkage Properties y marca Export for ActionScript, en el identificador escribe dragon (sin acento) si estaba así, déjenlo.
Un poco mas de ActionScript
Ahora debemos agregar unas cuantas variables más:
var dragons:Number = 3;
var i:Number = 0;
var score:Number = 0;
dragons, es el numero de dragones que queremos en el escenario.
i, es un poco difícil de explicar por que hace varias cosas pero espero que cuando vean el código los entiendan.
score, es para guardar nuestro puntaje, podemos agregar una caja dinamica de texto en el escenario con el nombre de variable score y veremos que tan buenos somos matando dragones.
Tenemos que agregar dos nuevas funciones , una para inicializar los dragones y otra para actualizarlos.
Añade el siguiente código al final del que ya tenemos:
function initDragons() {
for (i; i<dragons; i++) {
attachMovie("dragon", "dragon"+i, i);
dragon = _root["dragon"+i];
updateDragons(dragon);
dragon.onEnterFrame = function() {
if (this.hitTest(arrows)) {
score += 5;
trace(score);
arrowActive = false;
removeMovieClip(arrows);
updateDragons(this);
}
if (this._x>0) {
this._x -= this.velo;
} else {
updateDragons(this);
}
};
}
}
initDragons();
function updateDragons(which) {
which.gotoAndStop(random(4));
which._x = random(100)+530;
which._y = random(80)+20;
which.velo = random(10)+2;
}
Es hora de explicar esta nueva parte del código
En la función initDragons() iniciamos el loop for (i; i<dragons; i++), usualmente este tipo de repeticiones son iguales, con una variable para inicializarla y la condición de aumentar esta variable cada vez que haya una interacción.
Cuando la variable i se menor que el numero de dragones en el escenario traeremos una instancia de nuestro movie clip dragones con este script:
attachMovie("dragon", "dragon"+i, i)
El nombre de esta instancia seria "dragon"+i, el valor de i se esta incrementando eso quiere decir que el primer dragón se llamaría dragon0, el segundo dragon1 y como establecimos que la cantidad de dragones seria tres, el tercero seria dragon2.
Para hacernos la vida mas fácil vamos a crear una variable para almacenar el nombre de cada dragón, dragon = _root["dragon"+i];.
Para actualizar los dragones que ya creamos, debemos llamar la función updateDragons(dragon).
if (this.hitTest(arrows)): esta línea ve si las flechas los tocaron si así incrementamos el valor de nuestra puntuación por 5: score += 5;
arrowActive = false: marca las flechas como inactivas
removeMovieClip(arrows): ya que la flecha golpeo algo podemos quitarla sin problemas. Esta linea hace esto
updateDragons(this): esta línea llama la función que actualiza los dragones
if (this._x>0) {
this._x -= this.velo;
} else {
updateDragons(this);
}
Esta parte quiere decir que si la posición en el eje de x de nuestro dragón es mayor que cero esta en el escenario y lo mandamos a moverse de no ser así lo mandamos a la función updateDragons.
La función updateDragons es bien directa. Esta ocurre cada ves que un dragón a sido tocado por una flecha o sale del escenario. Simplemente tratamos de simular otro dragón cambiando so posición en el eje de y su velocidad.
Tu código final debe verse así:
//---- variables ----
var steps:Number = 5;
var spriteX:Number = 265;
var spriteY:Number = 265;
var speed:Number = 25;
var arrowActive:Boolean = false;
var dragons:Number = 3;
var i:Number = 0;
var score:Number = 0;
//---- properties ----
knight.swapDepths(10);
//---- functions ----
function checkKeys() {
if (Key.isDown(Key.RIGHT) && spriteX<510) {
spriteX += steps;
knight.legs.play();
} else if (Key.isDown(Key.LEFT) && spriteX>40) {
spriteX -= steps;
knight.legs.play();
}
if (Key.isDown(Key.UP) && arrowActive == false) {
knight.arms.play();
attachMovie("arrow", "arrows", 8);
arrows._x = spriteX;
arrows._y = spriteY+50;
//arrowActive = true
}
}
function updatePawel() {
knight._x = spriteX;
knight._y = spriteY;
}
function updateArrow() {
if (arrowActive == true) {
arrows._y -= speed;
}
if (arrows._y<-10) {
arrowActive = false;
removeMovieClip(arrows);
}
}
function initDragons() {
for (i; i<dragons; i++) {
attachMovie("dragon", "dragon"+i, i);
dragon = _root["dragon"+i];
updateDragons(dragon);
dragon.onEnterFrame = function() {
if (this.hitTest(arrows)) {
score += 5;
trace(score);
arrowActive = false;
removeMovieClip(arrows);
updateDragons(this);
}
if (this._x>0) {
this._x -= this.velo;
} else {
updateDragons(this);
}
};
}
}
initDragons();
function updateDragons(which) {
which._x = random(100)+530;
which._y = random(80)+20;
which.velo = random(10)+2;
}
this.onEnterFrame = function() {
checkKeys();
updatePawel();
updateArrow();
};
Terminaste!
SUERTE!
si tienen alguna duda este es mi msn:
[email protected]