domingo, 10 de julio de 2011

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. 


Saludos!!
Jimena.

8 comentarios:

  1. Me encanto!!! Super bien explicado, y con el fla, ejemplificado. No sabes la gran ayuda que me has dado. Te mega agradezco que hayas subido este tutorial.¡¡GRACIAS!!¡¡GRACIAS!!¡¡GRACIAS!!

    ResponderEliminar
  2. Gracias por la aportación. Lo he intentado hacer pero, ¿con que versión de flash son compatibles los códigos? Porque con cs5 no me lo reproduce bien, ni con el mío ni con el que colgaste. Gracias! :)

    ResponderEliminar
    Respuestas
    1. Hola, gracias por tu comentario!
      Lo hice con Flash CS4, pero la versión de Flash no tiene relación con el funcionamiento del código. El código es actionscript 3, chequea eso.

      Saludos,
      Jimena

      Eliminar
    2. Vale gracias, lo revisaré. ^^

      Eliminar
    3. Este comentario ha sido eliminado por el autor.

      Eliminar
    4. Gracias me funcionó perfectamente :)

      Eliminar
  3. hola, sabes yo hice un proyecto, al final me anime poner este juego, pero lo malo esque mi proyecto esta actionScript2.0, hay alguna solucion para que este mismo juego me funcione en actioScript2.0?? intente migrar a 3.0, pero cuando hago eso todos los otros codigos que estaban en los botones ya no me funcionan , ayuda porfavor.

    ResponderEliminar

Si tenés dudas, comentarios u opiniones sobre esta entrada, ¡comentá!