Juego de diferencias en Flash

En esta ocasión subo un nuevo tutorial en el que explicaré cómo desarrollar un pequeño juego en Flash, utilizando principalmente la estructura de programación if...else.

En qué consiste: será un sencillo juego de diferencias, donde mostraremos dos fotos, al parecer idénticas, pero que en realidad son diferentes; el usuario tendrá que hacer click sobre las diferencias para mostrar un círculo rojo, y si hace click sobre un lugar de la imagen que no tiene diferencias, se le restará una vida. Si logra encontrar todas las diferencias aparecerá en la pantalla una especie de felicitación. Si pierde las tres vidas antes de encontrar todas las diferencias aparecerá en la pantalla una invitación a que lo intente de nuevo.


Lenguaje de programación a utilizar: actionscript 3.0.




Preparación de las capas La estructura de las capas será la siguiente:

Tenemos 8 capas con 4 fotogramas clave en cada una. El fotograma 1 será el de la pantalla de bienvenida, el fotograma 2 el de las dos imágenes con sus diferencias, el fotograma 3 el de la pantalla que indica que el jugador perdió, y el fotograma 4 el de la pantalla con la felicitación. En la capa del fondo, como su nombre lo indica, colocaremos los fondos de las respectivas pantallas. Este paso es opcional. En la capa del texto, incluiremos las instrucciones, la felicitación y la invitación a empezar de nuevo, así como también los botones para desplazarse por la línea de tiempo principal del juego (Comenzar), que se encontrarán en el primer y tercer fotogramas y tendrán como nombres de instancia empezar. En la capa de las imágenes colocaremos las dos imágenes, la original y la modificada con tres diferencias respecto a la primera. En la capa de los botones, y sobre las diferencias de la segunda imagen, colocaremos tres botones con nombres de instancia boton1, boton2 y boton3 respectivamente. Estos botones serán transparentes y tendrán un tamaño de aproximadamente 50 x 50 px, dependiendo de la imagen. En la capa de los óvalos pondremos, sobre los botones y las diferencias, tres clips de película que consistirán en:

• un primer fotograma clave en blanco
• un segundo fotograma clave con un círculo rojo sin relleno

Estos óvalos tendrán como nombres de instancia circulo1, circulo2 y circulo3 respectivamente. Cuando el usuario haga click sobre los botones, se mostrará el segundo fotograma con el círculo rojo, cuyo tamaño será parecido al de los botones. En la capa llamada "todo" colocaremos un botón invisible que ocupe todo el escenario excepto las partes donde hay botones. Si mostramos sólo los contornos de esta capa, el clip de película se verá así:

A este clip de película le pondremos como nombre de instancia todo.

En la capa de las vidas colocaremos un clip de película que consistirá en dos capas y tres fotogramas clave: en la primera capa y primer fotograma colocaremos la palabra "Vidas" y las tres estrellas. En el segundo fotograma borraremos la última de las estrellas. En el tercer fotograma borraremos una de las estrellas, dejando sólo una. En la segunda capa pondremos un stop();. 

La única capa que nos queda es la de las acciones. 

Código

En cada fotograma clave en blanco tenemos un código diferente.

Fotograma 1 - Bienvenida

Fotograma 2 - Imágenes

Fotograma 3 - Perdiste

Fotograma 4 - Ganaste

La estructura if...else

Esta estructura nos sirve para indicar a Flash una condición. Traducido al español, if significa si, y else significa si no. La estructura básica del if es:

if (condición){

     bloque_de_acciones;

}

En lenguaje coloquial, lo anterior significa: si se cumple una condición, ejecutar el bloque de acciones. 

También podemos utilizar un else: 

if (condición) {

     bloque_de_acciones;

}

else {

     bloque_de_acciones_diferente;

}

Esto se traduce como: si se cumple una condición, ejecutar el bloque de acciones; si no, ejecutar un bloque de acciones diferente. 

Una opción alternativa para el else podría ser aplicar una condición adicional: 

if (condición) {

     bloque_de_acciones;

}

else {

     if (condición2) {

         bloque_de_acciones_diferente;

     }

}

(Si se cumple una condición, ejecutar el bloque de acciones; si no, si se da una condición 2, ejecutar un bloque de acciones diferente).

En el caso del juego que estamos desarrollando, un ejemplo de esta estructura es este: 

if(circulo2.currentFrame==2 && circulo3.currentFrame==2){

     gotoAndStop(4);

} 

La traducción de esta estructura al lenguaje coloquial es la siguiente: 

Si el fotograma actual (currentFrame) del símbolo circulo2 es el 2, y (&&) el fotograma actual del símbolo circulo3 es el 2, ir al fotograma 4 de la película principal. 

(Nota: && es un operador lógico. Lista de operadores lógicos: 

&& = and;

|| = or; 

! = not;

sirven para unir dos condiciones, en el caso de and se requiere que ambas condiciones se cumplan, en el caso de or sólo debe cumplirse una de ellas, y en el caso de not se invierte el valor de una variable o expresión).

Si tenés problemas con los códigos básicos de los botones y funciones en actionscript 3, te recomiendo que visites este post. 

El resultado final es este: 

(Descargar archivo .fla  http://www.mediafire.com/?86uck1f8wvz3bsd)

Espero que este tutorial les resulte útil 

Por cualquier consulta pueden escribir un comentario en la sección de comentarios de esta entrada, o bien visitar la sección de Contacto para más opciones. 

Ver todos mis tutoriales.

Saludos!!

Jimena.