TUTORIAL DE FLASH

Nombre: Geiner Guerra CervantesGrado y sección: 4B

Banners en Flash, imágenes y carga aleatoria

Muchos hemos visto en los portales, que en el lugar de los banners, estos nos cargan de manera aleatoria, es decir, un banner distinto cada vez que entramos, cuyo orden no esta establecido, y además de esto, cambian cada cierto tiempo.Esto se puede hacer de una manera muy interesante y sin necesidad de lenguajes dinámicos del lado del servidor gracias al lenguaje "ActionScript" de Flash

Primero vamos a crear una carga aleatoria de imágenes JPG, y luego, haremos el mismo proceso con archivos SWF.

Carga aleatoria de imágenes Flash, solo carga dentro de sus películas, imágenes del tipo JPG, así que este deberá

ser el formato en el que las traeremos dinámicamente.Para empezar crearemos una película, la he creado de 300x300 pixeles.Algo que debemos tener claro antes de iniciar es que DEBEMOS, por buenas costumbres de programación y diseño, tener un tamaño fijo para cada uno de los archivos JPG que vamos a cargar, he creado 5 imágenes, de 170x250 pixeles cada una, otra cosa importante es ponerles un nombre secuencial, mis imágenes se llaman:

Ventana principal de flash

Herramientas de flash

Ahora vamos a lo interesante, para lograr cargar nuestras imágenes en el escenario, debemos crear un movie clips a donde lleguen los datos, así que he creado un cuadrado de 170*250 pixeles, lo he convertido a movie clip y aquí esta como se debería ver en el escenario :

si se fijan bien notaran que el punto de registro (Es decir, el centro del movie clip) se encuentra en la esquina superior izquierda; esto es porque ese es el punto (0,0) del movie clip, así que esa será la esquina donde se cargaran las imágenes.

Como hacer para que al crear el movie clip el punto de registro nos quede allá arriba?

Noten la posición del cuadrito negro de "Registration", esta en la esquina superior izquierda

Precarga en Flash Introducción Este tutorial mostrara la forma de hacer por medio de ActionScript una animación de precarga

funcional, mostrando porcentaje de carga, barra de avance de carga y calculo de otros datos útiles como cantidad de bytes cargados y cantidad completa de bytes que componente la película.

Programando la precarga . . . Actualmente existen muchos componentes que hacen automáticamente una animación de

precarga de este estilo, pero que adicionalmente solo exigen como conocimiento previo saber arrastrar y soltar el componente en el escenario; sin embargo, cuando nosotros queremos tener el control de la animación de la precarga, o cuando queremos cambiar la típica "barra de carga" por un reloj, un velocímetro o lo que nos imaginemos, vamos a querer el control de nuestro código.Por otro lado, el uso de un componente de precarga conlleva mas peso a la película que si la optimizáramos nosotros mismos, ya que la idea es que la precarga sea lo primero que cargue y que lo haga rápido, podemos optimizar cuanto queramos nuestro propio código

Creando la animación En este caso vamos a crear una animación de barra de precarga dentro de

un movie clip que dure exactamente 100 trames, así cada fríame será puesto en pantalla de acuerdo al porcentaje de carga, en nuestro caso nos ha quedado así:

He creado entonces una animación dentro de un movie clip cuyo largo serán 100 frames; en mi caso es una barrita que se va llenando hasta llegar a 100, como el ejemplo tradicionalLa pongo dentro de un movie clip para dejar lo mas despejada la línea de tiempo principal, además, así será mas fácil controlar sus cambios; para terminar le pongo a ese movie clip el nombre barra_mc.

programación en Flash MX

stop(); detiene tu película en el frame donde se encuentra. play(); reproduce la película desde el frame donde esta. gotoAndStop(); te permite ir a frame y detenerse en ese frame.

Ejemplo: gotoAndStop(5); Te mandará al frame 5 y se detendrá ahí gotoAndPlay(); te permite ir a frame y continuar con la reproducción desde ese frame;

funciona igual que el anterior. nextFrame(); te permite ir al siguiente frame. prevFrame(); te permite ir al frame anterior. Eventos de los botones Trabajaremos con estos Eventos on (press) {}

Se ejecuta cuando realizas la acción de presionar el botón izquierdo del mouse en algún objeto “botón o MovieClip (MC)”.

on (release) {} Se ejecuta cuando realizas la acción de soltar el botón izquierdo del mouse sobre el objeto “botón o MovieClip” en el cual hiciste clic.

on (releaseOutside) {} Se ejecuta cuando realizas la acción de soltar el botón izquierdo del mouse fuera del objeto “botón o MovieClip” en el cual hiciste clic.

on (rollOver) {} Se ejecuta cuando pasas el cursor sobre un objeto “botón o MovieClip”.

on (rollOut) {}Se ejecuta cuando retiras el cursor del objeto “botón o MovieClip”.

Rutas y niveles de objetos en Flash _root....... es la raíz de la película

Ejemplo: -> principal ->Movieclip ->botones

El _root programes donde programes es principal _parent es el objeto contenedor de otro

Ejemplo: ->Principal ->Movieclip ->otroMovieclip ->botones

El _parent de "Movieclip" es "Principal" El _parent de "otroMovieclip" es "Movieclip"

this............. es el objeto o el frame en si Ejemplo:

->Principal ->Movieclip ->otroMovieclip ->botones

Navegación con películas externas en Flash

Primero debemos tener creadas por separado cuatro películas de 550x400 pixeles de tamaño cada una, dejando libre sin ningún objeto la parte vertical izquierda de estas para poder dejar la botonera que las llamara a cada una, mas bien en lo posible no utilizar el espacio donde estará nuestra botonera si no ¿como navegaran los felices usuarios de su estupenda y bellísima web? JEJE!! ;) (Por cierto, las películas creadas por mi no tienen nada de especial, ni interpolaciones, ni animaciones espectaculares, solo quiero demostrar la navegación completamente con Flash, ustedes tendrán la oportunidad de "crear" según su conocimiento, habilidad y talento, por lo pronto vuelvo a decir que en este caso el objetivo no es realizar una gran animación :P después ustedes podrán agregar otros ejemplos en tutoriales de CLab ok??? ;) )

Estas películas serán nuestras secciones en nuestra web, las cuales le daremos nombres de archivo como sigue:

principal.swf segunda.swf tercera.swf cuarta.swf

Estas películas las tomaremos en cuenta mas adelante, solo asegurarse de tenerlas creadas.Entonces ejecutamos nuestro Flash MX 2004 (los archivos del tutorial no abren en Flash MX, pero si lo deseas crear en esta versión, siguiendo los pasos correctamente no deberías tener problemas), y comenzamos con Crear un nuevo documento de Flash, y ya se presenta el Escenario Principal. Procedemos a crear nuestro menú con sus respectivos botones...nos colocamos en la barra principal de Flash MX 2004 específicamente en Insertar -->Nuevo Símbolo (o Ctrl+F8), y aparecerá una ventanita donde escribiremos "botonera" como nombre del símbolo y seleccionamos la opción Clip de película, después de esto Aceptar. La ventanita es esta:

Después de esto debería quedar algo como esto encima de la línea de tiempo:

Estando en el escenario de este clip de película llamado "botonera", crearemos nuestros botones los cuales llamaran a las secciones de la web, a través de 4 rectángulos con su texto estático correspondiente (los cuales pueden hacerlos a su gusto, yo los hice sumamente básicos). Dichos rectángulos deben alinearse para que posean un aspecto mas ordenado (para sacar herramienta de Alineamiento presionar Ctrl+K), y por ultimo seleccionar con la Herramienta de Selección (puntero negro) de a uno para convertirlos en símbolo como botones, darles click derecho y elegir Convertir en símbolo como sigue:

Lo cual nos dará una ventanita donde nombraremos el símbolo como "bt_principal", y obviamente marcar opción de Comportamiento Botón

En los tres rectángulos restantes haremos el mismo procedimiento nombrando a cada uno como : "bt_segunda", "bt_tercera", y "bt_cuarta" (ya saben a quien direccionan) =DUna vez hecho esto volvemos al Escenario Principal (click en Escena1 arriba de la línea de tiempo... se acuerdan? bien sigamos), estando en escenario crearemos un clip de película vacío que nombraremos "llamando" (Insertar--->Nuevo Simbolo o Ctrl+F8).

Esto provocara que nos habrá la película "llamando" en una ventana para editar, pero volvemos al Escenario Principal, acuérdense del click sobre la línea de tiempo, estando ahí presionaremos Ctrl+L para poder abrir la biblioteca (esquina inferior a la derecha) donde se encuentra esta película vacía.

Damos click sin soltar, y arrastramos hacia el Escenario (para mantener el orden todo esto lo hacemos en una capa que etiquetaremos como "peli_vacia" en el Escenario Principal), se vera un circulito pequeño, el cual debemos mantener seleccionado e irnos a la paleta Propiedades (en caso de no ver, teclear Ctrl+F3), OJO que veremos las propiedades del circulito que es nuestra película vacía "llamando". En dicho panel debemos darle un nombre de instancia que será "inst_llam", ademas de darle la posición, es decir en X e Y, los valores deben ser 0, quedaría algo asi:

Vamos bien hasta acá???? Pues bien...estando en Escenario Principal creamos otra capa en la línea de tiempo que etiquetamos como "capabotonera" y nuevamente vamos la biblioteca (Ctrl+L), para al fin sacar nuestra botonera, y colocarla en la posición 0,0 de dicho Escenario (si!!... igual a la película "llamando" a través del panel Propiedades), le hacemos doble click para poder editar la botonera en la misma posición, y por fin hemos llegado a lo que les gusta a todos: ActionScript!!!!!!!. Al ver ya nuestra botonera, seleccionamos el primer botón, que tiene por nombre "bt_principal", después de esto abrir el panel Acciones (tecla F9), para escribir el script. En este panel, deberemos escribir el siguiente script para el botón "bt_principal":

animación y expresión de personajes en Flash

1.- Lo primero, crear las capas, para lo cual utilizaremos el botón nueva capa. Le ponemos el nombre correspondiente, y repetimos la operación hasta tenerlas todas, copia de la ilustración:

2.- A dibujar, con la herramienta rectángulo seleccionada , dibujamos uno en la capa fondo. con un relleno gris #999999 y sin contorno:

con unas medidas de 45 X 85

3.- Con la figura seleccionada, la convertimos en un símbolo apretando F8 en el teclado , y le ponemos el nombre cuerpo. Guardarlo con el punto de registro en el centro.

4.- Ahora creamos la cabeza. Para ello trazaremos una elipse con la herramienta óvalo. Sus medidas serán de 37 ancho por 45 alto. Con la figura seleccionada pulsamos F8 y lo convertimos en un símbolo que llamaremos cabeza. Su punto de registro también estará en el centro. Todas las partes del muñeco se guardarán con el punto de registro en el centro.

5.- El brazo derecho lo creamos con una elipse de medidas 22 por 63 con el color de relleno #666666. Su nombre de símbolo será brazoDer.

6.- El brazo izquierdo lo haremos duplicando el izquierdo, a continuación del menú modificar seleccionamos separar, para desvincularlo del mc brazoDer. Veréis que en el panel de propiedades ahora pone gráfico. Entonces, lo mismo de siempre, F8, nombre brazoIzq. Hacemos doble click sobre éste y le ponemos el color #CCCCCC.

7.- Después, pulsar sobre Escena 1 para volver a la línea de tiempo principal.

8.- Los dos muslos los crearemos duplicando un brazo, y después de separarlo (como en el punto 6) les pondremos respectivamente los nombres y los colores musloDer, color #CCCCCC; musloIzq, color #666666. En cuanto a las medidas, serán de 27 por 69.

9.- Las medidas serán de 18 por 64 de las pantorrillas (piernas). piernaDer y color #CCCCCC para la derecha y piernaIzq, color #666666 para la izquierda. Utilizaremos también un óvalo.

10.- Para los pies, seguiremos con los colores correspondientes a cada extremidad, y lo realizaremos con un óvalo de 34 por 13. Los llamaremos pieDer y pieIzq para los nombres de clip.

11.- Las medidas para los antebrazos serán de 17 por 67. Dos óvalos pero con un círculo en el extremo inferior de 18 X 18 que simulará la mano.

12.- Las medidas para los pies son 33 por 13, utilizando el óvalo. Desde el menú ver seleccionamos la opción reglas. Con la ayuda de una línea guía que pondremos en el escenario pulsando sobre la regla y arrastrando al escenario hasta la parte interior del pie. Después con la flecha de selección, trazamos un rectángulo para seleccionar la zona inferior y eliminarla (ver ilustración). Sus nombres pieDer, y pieIzq.

13.- Ya tenemos que tener en el escenario más o menos lo siguiente:

14.- Ahora vamos a distribuir las diferentes partes del maniquí en capas. Así podremos aislar una zona concreta del cuerpo para estudiar su movimiento, y podremos mover a nuestro antojo todos los símbolos. Pero antes... guardamos el archivo como tuto_Animacion_Cristalab.fla

Interpolación de movimiento y guías en Flash

1. Hierba Creciendo Una de las animaciones con las que comencé fue ésta, se trata de crear el efecto de la hierba

creciendo, realmente es muy sencillo y según la complejidad que le pongas se puede lograr un buen efecto.

Para comenzar dibujaremos una de las hojas con nuestra herramienta preferida, yo lo he hecho con la herramienta línea y luego le he dado curvas a los lados obteniendo esto:

Luego, este dibujo lo convierto en Movie Clip (F8)

Dentro del MovieClip hago la siguiente animación:En el primer Frame dejo la hierba en su ubicación original, en el último la pongo más arriba y finalmente en el último KeyFrame, en las acciones de este le pongo un stop (Esc+ST).

Listo, ya tenemos nuestra hoja base para hacer "crecer la hierba". Después de tenerla lista creamos otro Movie Clip para poder insertar ésta animación cada vez que lo necesitemos dentro de nuestras películas.

Dentro del Movie Clip lo que hacemos es arrastrar la hoja que ya creamos (hierba01) todas las veces que necesitemos, para crear un efecto interesante podemos cambiarles el color haciendo un clic en el Movie Clip y cambiándole el Tinte en el Panel de Propiedades

También podemos cambiarle el tamaño a cada una de ellas y alinearlas de diferentes formas para que se vea que unas crecen más que otras.

Y este es el resultado final