Bueno ya tenemos nuestra licencia de Flash Builder 4 Beta 2, ahora vamos a ver que de nuevo nos trae Adobe. Ahora tenemos todo un nuevo Name Space llamado Spark, vamos a ver en este ejemplo como se ven.
Para ver el código, hagan click derecho sobre la aplicación y luego a View Source.
Well we have our license Flash Builder 4 Beta 2, now let's see that again brings us Adobe. We now have a new Name Space called Spark, we'll see in this example how they look.
To view the code, please click right on the application and then View Source.
En este tutorial trabajaremos con flash cs3, El tutorial explicara cómo hacer una animación simple imagen por imagen para ir conociendo poco a poco esta poderosa herramienta como lo es Flash en todas sus versiones.
Video Parte 1:
Las Herramientas que tenemos en el lateral izquierdo son muy similares a las de Paint, en ella ubicamos el botón que dice Herramienta Texto o simplemente apretamos la letra T de nuestro teclado.
En la barra inferior vemos unas pestañas que al hacerle clic a propiedades vemos que podemos modificar el tipo de letra y el tamaño.
Colocamos la letra en el tamaño 72 para verlo en grande para este tutorial. En nuestra hoja de trabajo aremos clic y escribiremos en numero 1.
En la barra superior está nuestra línea de frames que por defecto está en una línea que se llama capa 1 o layer 1, al lado de él esta nuestra única hoja con un ponto negro, si tiene un punto blanco es que no hemos escrito o dibujado algo en nuestra hoja de trabajo.
Para crear otra hoja que sería la continuación de nuestra animación, le damos clic derecho al frame 2 y le decimos insertar fotograma clave o insertar fotograma.
La diferencia entre las 2 es que al insertar un fotograma sería crear una hoja en blanco nueva y al insertar un fotograma clave estamos copiando la hoja anterior con su mismo dibujo. Para este tutorial insertaremos un fotograma clave.
Cambiamos el texto que dice 1 por un 2, y procedemos a insertar otro fotograma clave y cambiamos el 2 por un 3, así hasta llegar al 12.
Una vez hecho esto, para ver nuestra primera animación en nuestra hoja de trabajo
Control
Reproducir
Un acceso rápido seria, asegurarse que no tenemos nada seleccionado en nuestra hoja de trabajo y le damos a la tecla Intro o Enter.
Para ver nuestra animación en una ventana aparte, lo que llamaremos probar nuestra animación haremos
Control
Probar película
Un acceso rápido seria, CONTROL – INTRO o CONTROL-ENTER.
Apreciaremos algo como lo siguiente:
Veremos que los números pasan muy rápido y no podemos apreciarlos todos, el motivo es debido a que creamos 12 imágenes pero flash como ya lo comentamos pasa 12 imágenes por segundo por defecto.
Vamos a ver como manipular los frames por segundo o imágenes por segundo.
Video Parte 2:
Nos paramos en nuestra hoja de trabajo en cualquiera de los 12 números que hicimos y hacemos clic en la hoja blanca de manera que no tengamos seleccionado ningún objeto, en la barra inferior dentro de la pestaña propiedades, encontraremos todas las propiedades de nuestra hoja de trabajo, Tamaño, Color de fondo, Perfiles, Tipo de ActionScrip y también esta a lo que íbamos que seria la velocidad de frames, fíjense que dice 12 fps (frame por segundo), cambiamos el 12 por 1.
A continuación veremos nuestra animación nuevamente, hacemos clic sobre la hoja en la zona blanca y le damos intro o enter para verlo en la hoja de trabajo o hacemos CONTROL-INTRO o CONTROL-ENTER para verlo en una ventana aparte.
Sencillo tutorial, en el cual explicamos cómo usar las guías y los frames para hacer animaciones, las cuales no estén atadas a un movimiento recto.
1. Guias
Una guía, es un layer u hoja, en la cual podemos dibujar segmentos de rectas continuas para lograr un camino o canaleta, en la cual nuestro dibujo convertido en MovieClip va a seguir.
Ilustrándolo con un ejemplo de la vida real, podemos asociarlo con un tren, nuestro dibujo “TREN” va a representar nuestro MovieClip y nuestra guía o canaleta será la vía del tren. Nuestro dibujo nunca se va a salir de las vías como un tren no se sale de las vías del tren, jajajaja en TEORIA.
¿Cómo crear un MovieClip?
Bueno existen varias maneras, en las cuales voy a describir 2 de ellas:
Seleccionamos nuestro dibujo que queremos convertir y vamos a la pestaña MODIFICAR y seleccionamos CONVERTIR EN SIMBOLO y en las opciones colocamos MOVIE CLIP.
La segunda manera es seleccionando todo lo que queremos convertir y le damos a la tecla F8, y de igual forma seleccionamos que es de tipo MovieClip.
De esta manera podemos lograr la animación que vemos arriba, y se puede ver cómo hacer una guía en el siguiente video:
Video
2. MovieClip
Un MovieClip no es más que una hoja totalmente independiente de la principal, lo único que comparten es la velocidad de las imágenes por segundo o FPS. Esto nos permite dibujar o hacer animaciones una totalmente independiente de la otra.
Si toda nuestra animación la construimos en nuestra hoja principal estamos atados a una sola línea del tiempo, en cambio si usamos movieclips podemos hacer animaciones con líneas del tiempo independientes, como podemos apreciar en el ejemplo de arriba.
Les dejo un video para ver cómo podemos lograr esta animación.
Primero veremos una sección de Movimiento y Cambio de color y luego sobre el mismo principio desformaremos la figura básica para lograr otra de forma animada.
1. Color y Movimiento
La interpolación de forma o shape tween consiste en mover o animar un objeto de acuerdo a dos fotogramas, para ponerlo en palabras mas sencillas podemos decir, tengo un carro Rojo y lo quiero pasar a Verde, tenemos 2 estados, la acción de pasar de rojo a ver es muy ardua, por lo tanto existen herramientas que lo hace por nosotros.
En un fotograma uno dibujamos una figura roja en el fotograma 32 le damos a insertar fotograma y dibujamos la misma figura pero de otro color si la dibujamos en otra posición (x,y) también veremos movimiento.
Luego nos colocamos en un fotograma que este entre el 1 y el 32 y le damos al botón derecho del mouse. Y colocamos la opción Shape Tween, y veremos cómo los fotogramas cambian de color de blanco a verde y tendremos una flecha que sale del fotograma 1 y termina en el fotograma 32. Creando así una interpolación de color y un movimiento.
Video
2. Forma y Color
De igual forma se puede cambiar la forma de los objetos y el color a la vez.
En el fotograma 1 colocaremos un objeto cualquiera , insertaremos un fotograma en la posición 32 en el cual colocaremos un objeto totalmente diferente, y agregaremos otro fotograma en la posición 64 el cual contendrá la misma figura que el fotograma uno.
Video
Con la combinacion de estos movimientos se puede llegar a hacer animaciones bastante interesantes, solo hay que tener imaginacion y un poco de paciencia. Esto fue todo por este tutorial espero que encuentren el material de su interés.
Saludos.
