2. 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:
5. 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 :
6. 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
7. 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
8. 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 tradicional
La 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.
9. 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.
10. 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
11. 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??? ;) )
12. 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
13. 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:
14. 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:
15. 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) =D
Una 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).
16. 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:
17. 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":
18. 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:
19. 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
20. 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.
21. 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.
22. 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.
23. 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
24. 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)
25. 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
26. 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
