El entrenamiento de Catia, ejemplo del juego y explicación, actionscript 2, Flash cs3.


Catia es uno de los personajes más pintorescos de nuestra historia. En esta ocasión ella participará en el Festival de Trazos Simples a través de un juego, cuyo manual ha caído en manos indebidas y ha sido publicado en la web (ja ja ja, interprétese como risa malévola).

Conocimientos previos:

•    Actionscript 2 nivel intermedio.
•    Capacidad de ilustración.

Requerimientos:

•    Flash CS3.
•    Una tableta digitalizadora para no acabar con la mano desgarrada.
•    Un buen y corto paquete de dibujos de nalgonas como las de nuestras aventuras. Nada extenso ni engorroso pues la idea no es ahondar en el dibujo, es hacer el juego.


Entonces… empecemos.

Lo primero es entender qué se va a hacer, en este caso simplemente se creará el espacio para que esta desvergonzada caderona lance patadas al aire cuando el usuario de clic en cualquier parte de la pantalla. Cada vez que se realice esta acción ella cambiará de patadas secuencialmente.
Como tenemos un espacio en blanco por abrir un nuevo archivo de flash con Actionscript 2 –que es algo que el usuario ya debe poder hacer –simplemente vamos a agregar la secuencia de imágenes que van a estar ordenadas dentro de un clip de película llamado mcIndex, pero adentro a su vez todo estará contenido en otro llamado mcBee, que es nuestra nalgona dando patadas.


Entonces la pantalla se verá similar a como está la anterior figura. Es necesario aclarar que aquí todo se ha organizado en capas. La primera capa contiene código. La segunda contiene el texto con el blog de estas nalgonas, y la última capa es la que contiene el clip de película que contiene al otro y que a su vez es la secuencia nalgona pateando.


Todas estas características se pueden observar en el anterior gráfico. EL lector debería estar familiarizado con el uso de las herramientas ya que este no es el eje del tutorial. Ahora bien, al ingresar al clip de película mcIndex se puede observar otro conjunto de capas en la línea de tiempo.


En la primera capa que se llama botonera existe un clip de película llamado mcBotonGrande, esta capa está sobre la capa mcBee que a su vez contiene el clip de película mcBee. Eso es porque este botón, junto con el código correcto, va a ser el encargado de accionar el movimiento de nuestra muñequita. Pero es mejor observarlo que narrarlo.


En la pantalla anterior, además de observar la capa del botón y el personaje, también se pueden observar diversos paneles como lo es el de las propiedades; precisamente ahí se detalla todo sobre el botón, en este caso se ha dejado con transparencia al 35% sin embargo en el flash está de cero, esto con el fin de no cubrir al personaje pues este elemento es denso y tiene relleno, esta característica define el área de clic. Otro elemento importante para todos los clips de película es el nombre de instancia.


No vasta con crearlos, hay que asignarles un nombre de instancia porque esta característica es la que influye en el código a aplicar. La recomendación aquí es tener mucho cuidado porque los usuarios tienden a dejar este campo vacío y después las palabrotas que salen porque el programa no compila son aberrantes y desmesuradas.

En fin, la gráfica siguiente muestra la estructura del clip de película de Catia.


Esta línea de tiempo es más compleja que las otras, ya que verdaderamente aquí esta la acción. Este clip de película está dividido en tres secciones las cuales se corresponden con cada golpe. Ahí podemos observar las etiquetas de los fotogramas donde empieza cada acción.


Estas etiquetas también se configuran en el panel de propiedades de cada objeto. Hay que recordar que dependiendo del objeto de enfoque, o, al que se le de clic, se afectará el panel de propiedades. Si se le da clic a un clip de película entonces el panel de propiedades hará referencia a esa película, si es un fotograma entonces se mostrarán las propiedades de tal elemento, entonces, en las propiedades de cada fotograma se puede establecer la etiqueta, esto contrasta con el código de manera que no se haría gotoAndPlay al número del fotograma deseado, más bien sería a la etiqueta correspondiente.

Pero después de todo esto ya es hora de tocar el código. Este se ha construido en un archivo .as que no es otra cosa que un archivo de código de flash. Este se relaciona con el flash mediante una instrucción de include.


La inclusión del código usando este método es para organizar un poco el contenido y no empezar a mezclar código con animaciones. Aunque esta regla no está clara porque en la parte interna del archivo hay algunos stop() perdidos por ahí. No es difícil hallarlos ni saber para qué son. Aunque no se expliquen al detalle, es seguro que el lector sabrá reconocer las bondades de estos elementos simples.

Y bien, aquí está el código.


Nada del otro mundo. ¿Verdad?


Por el momento se dará solo el tema de los juegos para los tutoriales que en rvacomics se construyan, pero más adelante bajo cualquier circunstancia podrían adoptarse puntos como la ilustración, color, animación y algo de 3D. No olviden descargar este ejemplo del blog. También pueden visitar el sitio en http://kingdomofbees.rvacomics.com.co No visiten solo rvacomics.com porque ese era nuestro anterior dominio y ahí no hay nada de todo este material.  Gracias por su entusiasmo y lectura, hasta pronto.


Descarguen los archivos fuentes de este enlace. Los archivos están en el Skydrive de hotmail, deben cerrar su sesión para poder descargarlos. Ahí está todo incluyendo el tutorial en PDF.

https://skydrive.live.com/?cid=faf58a3d0568478a#cid=FAF58A3D0568478A&id=FAF58A3D0568478A!201

8 Comentarios

Imagen de felixdasilva
Esto si me parece algo distinto, siempre se ven los mismo tutoriales pero esto cambian las cosas... tienes mas tutoriales asi?
Imagen de rvacomics
Aun no, pero estoy en eso.
Imagen de rvacomics
Pero claro brother. Vamos pa lla.
Imagen de hermes-2012
Muy interesante el tutorial, yo he estudiado algo de flahs y me ha parecido realmente bueno el movimiento, muy natural, a ver si envias alguna cosa mas.
Imagen de Metalyang
buen tuto ;)
Imagen de rvacomics
Gracias brother.
Imagen de Nelsoniku
awosome esta increible terrribles nalgas :D 
Imagen de RBL
Jajajaj dios que culo más gordo!