Manual de Ejercicios Adobe Flash CS6
Fatima Samaniego Diseño Gráfico
Índice
Manual de Ejercicios
Ejercicio 1 “Hola”
3
Ejercicio 2 “Nubes con sol”
4
Ejercicio 3 “ Cachoron”
5
Ejercicio 4 “Avión”
6
Ejercicio 5 “Arbolito”
7
Ejercicio 6 “Botones de Colores”
8
Ejercicio 7 “Mini Página con Botones”
9
Ejercicio 8 “Banner con Movimiento Estética”
10
Ejercicio 9 “Galería”
11
Ejercicio 10 “Robotito”
12
2
Ejercicio 1 “Hola”
Manual de Ejercicios
¿En qué consiste? Hacer que una bolita vaya brincando y en donde rebote irán apareciendo letras hasta formar una palabra completa, en este caso Hola. Al final la bolita se hará más grande y después volverá a ser pequeña. Herramientas Utilizadas - Herramienta Rectángulo.
- Herramienta Elipse.
- Herramienta Texto.
Pasos a Seguir 1) Hacer un nuevo Action Script 3 de 600 x 250 px, con la herramienta rectángulo trazar un rectángulo del tamaño del fondo, puede ser de cualquier color y debes convertirlo a símbolo con F8. 2) Escribir una palabra, en esta caso “Hola”. Dar click derecho ---> Separar. Debes hacer esto 2 veces. 3) Debes cortar cada letra (Ctrl + X) y pegarla (Ctrl + V) en una nueva capa. 4) Ya que tengas todas tus letras en una capa nueva; debes mover el puntito negro de la línea del tiempo (fotograma clave) hasta donde vas a querer que aparesca. Cada letra deberá aparecer en diferente tiempo.
5) En una nueva capa debes trazar una bolita con la herramienta elipse. 6) Debes mover la bolita para que pueda saltar justo arriba de cada letra, para esto debes ir colocando nuevos fotogramas claves con F6 e ir moviendo la bolita arriba de la letra, luego subirla, luego bajarla de nuevo arriba de la siguiente letra y así sucesivamente. Para hacerla grande es igual, debes insertar nuevos fotogramas claves, hacerla grande, insertar nuevo fotograma clave hacerla chica y así sucesivamente. 7) Ya que termines de poner los fotogramas claves, debes seleccionarlos todos, dar click derecho y seleccionar “interpolación clásica”. Luego das play para que veas como corre la bolita. 3
Ejercicio 2 “Nubes con Sol”
Manual de Ejercicios
¿En qué consiste? Hacer nubes y que caminen por todo el cielo, después que aparesca un sol enmedio del escenario, gire y ocurra una puesta de sol para que después se haga de noche. Despúes deben salir estrellas girando. Herramientas Utilizadas - Herramienta Elipse
- Herramienta Polígono
- Efectos de Color (Alpha y Tint)
- Movieclip
Pasos a Seguir 1) Hacer un nuevo Action Script 3 de 650 x 250 px, con la herramienta rectángulo trazar un rectángulo del tamaño del fondo color azul cielo, debes alinearlo con la ventana aling y seleccionar aling to stage. Ya que esté alineado, conviértelo a símbolo con F8. 2) Debes crear 3 nuevas capas, en cada una vas a dibujar 1 nube de color blanco con la herramienta elipse y convertirlas a símbolo dando click en F8. Deben de ser de distintos tamaños. 3) Debes degradar el color de la nube, llendo a propiedades ---> efectos de color ----> alpha. Pon el alpha al 30%. 4) En una nueva capa traza una estrella naranja de 20 lados con la herramienta póligo. (has doble click sobre el icono de polígono para cambiar los lados), traza un círculo amarrillo con la herramienta elipse. Selecciona ambas figuras y conviértelas a símbolo con F8 para que se fusionen. 5) Selecciona el sol ya fusionado y alínéalo, despúes ve a propiedades ---> efectos de color ----> alpha. Debes mover el alpha al 0%.Varios fotogramas más adelante debes subir el alpha del sol al 100% 6) Inserta un fotograma clave y gira el sol, insertas nuevo fotograma clave y lo vuelves a girar. Después inserta un nuevo fotograma clave y reduce su tamaño y bajálo hasta que salga del escenario. 7) Cuando hayas bajado el sol debes seleccionar el rectángulo azul del cielo y cambiar su color llendo a menú propiedades ---> efectos de color ----> tinta. Selecciona un color azul obscuro como la noche. 8) Traza estrellas de color amarillo con 5 lados con la herramienta polígono. Con F8 conviértelas a movieclip. Da doble click sobre cada una de ellas para entrar dentro del movieclip; ve agregando fotogramas claves con F6 y ve girando las estrellas, después selecciona todos los fotogramas y da click derecho ---> crear interpolación clásica. 4
Ejercicio 3 “Cachoron”
Manual de Ejercicios
¿En qué consiste? Hacer que el cachoron se mueva de un lado a otro, salgan flores de él y que éstas giren. Herramientas Utilizadas - Movieclip - Skew (Sesgo) Pasos a Seguir
1) Haz 3 capas diferentes, desde Ai vas a copiar y pegar (sin conservar las layers) en cada una de las capas el cachoron, el fondo y las flores, Ya que estén pegado el fondo alínealo con el escenario y conviertelo a símbolo.
2) El cachoron y las flores debes convertirlos a movieclip.
3) Da doble click en el cachoron para poder entrar dentro del movieclip. Ya que estés dentro da click derecho ----> distribuir en capas. El cachorón quedará separado en varias partes, una seran el cachoron amarillo, otra los ganchos de ropa y la última el tendedero. 4) En la capa del cachoron amarillo deberas seleccionar la opción skew (sesgo) en el menú Transformar en el panel de propiedades y sesgar el cachoron con -5, luego inserta nuevo fotograma clave y vúelvelo a sesgar (lo repites las veces que quieras) y seleccionas todos los fotogramas para dar click derecho y crear la interpolación clásica. 5) En la capa de las flores debes dar click derecho ----> distribuir en capas. Ya que estén distribuidas solo conserva una flor amarilla, otra blanca y una café, las demás bórralas. Selecciona las 3 al mismo tiempo y conviertelas a movieclip con F8. 6) Dale vueltas a las flores creando nuevos fotogramas claves en cada nueva vuelta que realices. Cuando les des las vueltas haz que pasen por el agujero del cuello del cachoron para que parescan que salgan de ahi.
5
Ejercicio 4 “Avión”
Manual de Ejercicios
¿En qué consiste? Hacer que un avión, un auto y un barco se muevan siguiendo una línea trazada por nosotros. El avión debe dar vueltas, el carrito caminar por una carretera y el barco nadar en un lago. Herramientas Utilizadas - Herramienta Lápiz
- Línea guía
Pasos a Seguir 1) Dibuja en el escenario unas montañas, una carretera y un lago. Pon un color azul de fondo y dibuja algunas nubes. 2) Desde Ai importa el dibujo del auto, el avión y el barco. Cada uno debes ponerlo en diferente capa. 3) Crea 3 nuevas capas y con la herramienta lápiz dibuja en cada capa una línea, está será la que seguirá el avión, el barco y el auto a la hora de moverse.
3) A las capas que tienen líneas dibujadas, debes darle click derecho---> Guía. Enseguida de la capa aparecerá un icono que parece un martillo.
4) La capa donde está el dibujo del carrito debes arrastrarla debajo de la línea que usarasde guía para moverlo, haz lo mismo con la capa del barco y el avión. 5) El avión va ir siguiendo la línea guía, le va a aparecer un círculo negro cuando lo pases cerca de ella. Inserta un nuevo fotograma clave, mueve el avión, inserta otro fotograma clave y vuélvelo a mover.. así sucesivamente hasta que lleges al final de la línea guía. Has lo mismo con el barco y el auto.
6
Ejercicio 5 “Arbolito”
Manual de Ejercicios
¿En qué consiste? Las diferentes capas de figuras rojas aparecerán de abajo hacia arriba, formando en conjunto un árbol. Herramientas Utilizadas - Herramienta Elipse
- Cursor secundario
- Mascáras
Pasos a Seguir 1) Copiar y pegar desde Ai la figura completa en el escenario. Debes darle click derecho ----> Separar (Break apart) y después de nuevo click derecho ----> Separar en capas (distribuide to layers).
2) Cada figura va a quedar en una capa diferente y por lo tanto van a salir muchas capas. Vas a crear una nueva capa y ponerla arriba de la primera capa que te salió, vas dar click derecho -----> Máscara. 3) Al crear la máscara se te van a poner candados en ambas capas, debes quitárselos. En la capa en blanco dibuja un círculo con la herramienta elipse. 4) Al círculo muévele los nodos con el cursor secundario, a modo que vayas cubriendo toda la figura completa de la capa de abajo.
5) Cada vez que vayas a mover los nodos, debes insertar un nuevo fotograma clave; mueves, insertas, mueves, insertas, así hasta que termines de cubrir toda la figura de abajo.
6) Cuando termines de cubrir la figura, selecciona todos los fotogramas, da click derecho ----> Crear interpolación de forma.
7
Ejercicio 6 “Botones de Colores”
Manual de Ejercicios
¿En qué consiste? Hacer 2 botones, uno cuadrado y otro rectangular, tienen que cambiar de color cuando pases el cursor arriba de ellos y cuando hagas click sobre ellos. También debe pasar una pelota saltando. Herramientas Utilizadas - Herramiena Rectángulo
- Herramienta Elipse
- Botones
Pasos a Seguir 1) Hacer un nuevo Action Scritp 2 de 550 x 400 px. 2) Hacer una nueva capa, con la herramienta rectángulo trazar un rectángulo de cualquier color. 3) Con F8 debes convertirlo a botón.
4) Da doble click arriba del rectángulo para poder meterte dentro del boton y te aparescan estos 4 icónos en la línea de tiempo: 5) En reproducir solo insertarás un nuevo fotograma clave, En over vas a colocar un nuevo fotograma clave y cambiarás de color el rectángulo con los efectos de color ----> tinta. En down volverás a cambiar el color con Tinta y en Hit lo dejarás igual que en down. 6) Repite los pasos 2, 3 ,4 y 5 pero trazando un cuadrado en ves de un rectángulo. 7) En una nueva capa traza un círculo de cualquier color con la herramienta elipse. 8) Seleccionalo y vas a ir a Ventana ----> Accions-----> Behaviors. Debes escribir: stop(); en el cuadro blanco que te aparece al ir aquí. En la línea del tiempo te debe aparecer una “a” en la capa del círculo. 9) Ahora debes agregar un nuevo fotograma clave y subir el círculo, insertar otro fotograma clave y bajarlo, insertar otro y luego moverlo, subirlo y bajarlo en forma de zig zag, cuando termines de instertar fotogramas, seleccionalos y da click derecho y después crear interpolación clasica.
8
Ejercicio 7 “Mini Página con Botones”
Manual de Ejercicios
¿En qué consiste? Hacer una mini página utilizando 3 botones, uno de inicio, otro de quienes somos y el último de contacto.Al irlos presionando aparecerá informacion de nuestra “empresa”. Herramientas Utilizadas - Herramiena Rectángulo
- Herramienta Elipse
- Botones
Pasos a Seguir 1) Crear un Action Script 3 de 600 x 400 px . 2) Arrastrar una guía horizontal hasta 50 px, para partir el escenario en 2 partes. 3) Agrega 3 capas nuevas. * La primera capa será para la parte de arriba del escenario, aquí traza un rectangulo de ese tamaño. * La segunda para la parte de abajo, aquí debes trazar otro rectángulo pero de diferente color. * En la tercera traza 3 círculos iguales con la herramienta elipse y colocalos enmedio de la línea guía.
4) Convierte los 3 círculos, uno por uno, en botones con F8. 5) Da doble click en el primer círculo para entrar dentro del botón. En Up solo inserta un fotograma clave, en Over escribe Inicio, en down cámbia el círculo de color con Tint y en Hit dejalo igual, solo agrega un fotograma clave. 6) Repite el paso anterior solo que en el segundo botón en Over vas a escribir ¿Quiénes somos? y en el tercero en Over escribe Contacto. 7) Extiende los fotogramas claves de las capas de botones y los 2 Rectángulos de fondo hasta el keyframe número 10. 8) Haz 3 capas nuevas Capa 1: En el fotograma número 2 escribe Bievenidos. Capa 2: En el fotograma número 3 escribe ¿Quiénes somos?. Capa 3: En el fotograma número 4 escribe Contacto. 9) Ve a window ---> behaviors ----> movieclip. Agrega un Goto and Stop at frame y cambia los números a 2,3 y 4. 10) En la capa de botones escribe en action Stop ( )
9
Ejercicio 8 “ Banner con Movimiento Estética”
Manual de Ejercicios
¿En qué consiste? Hacer el banner con movimiento de una estética con blur (desenfoque). Herramientas Utilizadas - Filtros (Blur) - Movieclip Pasos a Seguir 1) Hacer un Action Script 2 de 600 x 400 px 2) Ponerle un fondo de cualquier color en una capa independiente. 3) Importar la imagen Png de la mujer morena y convertir a Movieclip.
4) Debes colocar en el primer keyframe a la mujer morena fuera del escenario, para que vaya entrando poco a poco. Agrégale el filtro blur (desenfoque) desde propiedades ---> filtros ---> nuevo filtro ----> Desenfoque (Blur) y ajustas según lo que quieras que esté desenfocada. Para que vaya entrando debes agregar nuevos fotogramas claves por cada movimiento que hagas. Varios fotogramas despúes debes ir disminuyendo el blur, para cuando llege enmedio este 100% enfocada.
5) Escribe “maquillaje” con la herramienta texto. Debes hacer que el texto vaya entrando poco a poco al igual que la mujer, agregando nuevos fotogramas claves por cada movimiento. Cuando llegue enmedio debes subirlo para que salga.
6) Importa a la mujer rubia en png, coviértela a movieclip y repite el paso 4 y 5, solo que en ves de maquillaje escribe cortes y peinados y en vez de que el texto salga por arriba debe salir hacia abajo.
7) Importa el logo de tu estética y haz que aparesca lentamente desde el centro, utilizando también la herramienta blur. Comienza con mucho blur, agrega nuevos fotogramas claves y ve disminuyendo el blur hasta que quede sin blur al 100%
10
Ejercicio 9 “Galería”
Manual de Ejercicios
¿En qué consiste? Hacer una galería compuesta por las miniaturas de las fotos y cuando pases el mouse por encima de ellas se hagan grandes. (Usando botones) Herramientas Utilizadas - Botones Pasos a Seguir 1) Hacer un nuevo action script 2 de 850 x 680 px. En una nueva capa coloca un rectángulo del tamaño del fondo. Debes poner una línea guia horizontal en 10 px y una vertical en 10 px. 2) Haz un rectángulo de 130 x 80 px, y colócalo en la esquina de donde colocaste las guías. Enseguida y abajo del rectángulo traza nuevas guías, después de esas guías coloca unas nuevas con 10 px de separación.
3) Debajo de las guías nuevas, copia y pega el mismo rectángulo y ponle una guía abajo y otra con 10 px de separación. Haz lo mismo hasta que tengas el mismo rectángulo 7 veces.
4) En cada hueco que quedó vas a colocar una foto, importandola al escenario, va a tener un tamaño de 130 x 80 px.
5) Cada foto la vas a convertir en botón con F8, da doble click para entrar dentro del botón. En Up solo inserta un fotograma clave, en over vas a agregar un fotograma clave y vas a importar al escenario la misma foto pero en tamaño de 830 x 620 px. La vas a colocar 20 px a la derecha, guiándote con la línea guía. En Down y en Hit solo debes agregar fotogramas claves.
11
Ejercicio 10 “Robotito”
Manual de Ejercicios
¿En qué consiste? Hacer que el robot mueva los brazos, las piernas, abra y cierre los ojos, tire besos con la boca, que juege con un corazón y tener sonidos roboticos. Herramientas Utilizadas - Herramienta Armadura
- Movieclip
Pasos a Seguir 1) Importa desde Ai el robotito copiandolo y pegándolo. 2) Dale click derecho ----> Separar. 3) Ya que este separadas, da click derecho ------> Distribuir en capas.
4) Ya que está en capas, debes seleccionar la herramienta armadura (huesito), para poder moverle los brazos y las piernas al robot. Debes comenzar dando click desde donde comienza el brazo, luego dar click enmedio del brazo y por último en la mano, donde terminará tu armadura.
5) Para que juege con el corazón solo debes agregar nuevos fotogramas claves e irlo moviendo y girando como quieras, ya cuando termines debes seleccionarlos todos y crear una interpolación de movimiento.
6) Para que mueva los ojos, debes seleccionar ambos y convertirlos a movieclip con F8. Dentro del movieclip inserta un fotograma clave y los ojos remplázalos por 2 rectangulos. Inserta un fotograma clave al final. Para la boca has lo mismo, solo que el rectángulo debera ser separado por un círculo. 7) Para que tenga sonido debes descargar el sonido que mas te guste desde http://soundbible.com/tags-robot.html en tu computadora, después debes importarlo a tu escenario en una nueva capa. El sonido se irá a la biblioteca, arrastralo hasta la nueva capa y ya quedará en tu línea de tiempo. 12
Manual de Ejercicios
Manual de Ejercicios Adobe Flash CS6
13