Botón

Esta práctica no podrá ser observada por ser un botón y estar guardado como gif

Si se desea ver la práctica visitar mi pagina web http://abril9ale1.iespana.es

Pasos para hacer un botón:

1.- Hacer una imagen y convertirla a símbolo pero ahora cambiar la opción a botón.

2.- Hacer doble click a la figura, la línea del tiempo desaparecerá.

3.- Donde estaba la línea del tiempo aparecerán estas opciones: Up,Over,Down,Hit

4.- En cada una de ellas, en la parte de abajo, hacer un keyframe (F6) y cambiar el color de la figura o incluso borrar la figura y hacer una diferente, procurando que quede en el mismo lugar que la anterior.

5.- Cuando y esté terminado tu botón hacer click en SCENE 1 para regresar a donde estábamos, aparentemente no pasó nada y no podrás activar tu botón hasta exportarlo como imagen flash.

Frase!!

Haz Click!!!

Pasos:

1.- En el frame1 escribir parte de la frase y hacer dos veces click en break apart

2.- En otro frame (separado lo suficiente) escribir otra parte de la frase y hacer dos veces click en break apart

3.- Repetir el último paso las veces que sea necesario.

4.- En los espacios que se forman en la linea del tiempo hacer click y cambiar el Tween a Shape.

Cambio de Figuras a Letras!!

Haz Click !!!

Esta práctica es muy similar a la anterior con la unica diferencia de que ahora cambiará de una figura a letras...

Pasos:

1.- Hacer un circulo en el frame 1

2.- En otro frame (15 segundos de separación del primero) hacer un Blank Keyframe y con ayuda de la herramienta de texto, escribir algo.

3.- Seleccionar el texto y Hacer hacer click en "Break apart" dos veces"

4.- Si se desea, se puede cambiar el color de cada una de las letras.

5.- En la línea del tiempo, en el espacio que se formó entre los Blank keyframes hacer click y en la barra de propiedades cambiar el Tween a Shape.

6.- Al final colocamos un botón que no se puede observar por se imagen gif. 

Cambio de Figuras

Haz Click!!

Pasos:

1.- En el frame 1 hacer un rectángulo. (NO CONVERTIR A SIMBOLO)

2.- En otro frame (separado por mínimo 15 seg) hacer click y seleccionar la opción insert blank keyframe, observarás que tu rectángulo desaparece (no importa) hacer un círculo.

3.- En otro frame (separado por mínimo 15 seg) hacer otro Blank Keyframe y hacer otra figura.

4.- En otro frame hacer otro Blank Keyframe y otra figura.

NOTA: Las figuras deben estar en diferentes lugares y de preferencia en diferentes colores para que se pueda observar el movimiento y cambio de las figuras.

5.- En la línea del tiempo entre los Blank Keyframes hacer click y en la barra de popiedades en la opción de "Tween" cambiar a Shape, tu línea del tiempo cambiará a color verde.

6.- Hacer el paso anterior en los otros espacios de la línea del tiempo.

Bob Vs Patricio

Haz Click!!!

En esta practica utilicé imágenes de tipo Bitmap que fueron modificadas.

Posteriormente hice la animación con ayuda de los pasos de prácticas anteriores.

¿Cómo convertir una imagen tipo Bitmap?

Pasos:

1.- Seleccionar una imagen de internet y arrastrarla al área de trabajo en Flash.

2.- En la barra de Menu buscar la opción "Modify" y hacer click en Break Apart"

3.- En la barra de herramientas hacer click en el "Lasoo Tool" y en options hacer click sobre "Magic Wand"

4.- Hacer click sobre las partes que quieras borrar y observarás que se sombrea una parte, y al borrar esa parte seleccionada se eliminara (Lo que hace esta herramienta es seleccionar los mismos colores de la imagen que tu seleccionaste para que te sea más fácil editar la imagen tipo Bitmap)

5.- Seguir borrando hasta que la imagen quede como tu quieres.

6.- Si la imagen no se borra por completo deberás utilizar la goma para detallar.

7.- Ya que la imagen esté terminada, seleccionarla y convertirla a símbolo.

Conceptos

Layer: Las capas (layers) son como láminas transparentes que sobreponemos una con otra.

Frame: Marco. Área rectangular en una página web que la separa de otra.

Keyframe: La palabra "Keyframe" (cuadro clave) se emplea para designar a un cuadro (fotograma) que ha sido tomado como referencia para analizar los cambios posteriores que se producen en una secuencia de imágenes.

Blank keyframe:

imagen vectorial: Este tipo de imagen (por oposición a imagen Bitmap) se calcula con base en sus dimensiones y puede reducirse o agrandarse sin pérdida de calidad.

símbolo: Los simbolos son objetos que creamos en flash, a fin de optimizar los recursos en nuestras animaciones.

Instancia: se le llama asi cuando se crea un símbolo, Flash lo almacena en una biblioteca. Pues bien, cada vez que utilicemos ese objeto en una película.

escena: Cada escena es una porción separada en la línea de tiempo.

fps: frames per second

guide layer: Las capas guías permiten agregar dirección a cualquier animación (Interpolación de movimiento) que se haya generado. Las capas guías son usadas en diagramación y ayuda de diseño.

animaciones en flash:

Que tipo de animaciones usamos en flash:

*En la animación fotograma a fotograma, debemos dibujar cada uno de los fotogramas de la animación uno por uno, al estilo de las clásicas películas de dibujos animados.

*La animación por interpolación de movimiento es que la debemos elegir cuando los objetos de los dos fotogramas claves sólo se diferencian en su posición, escala o rotación

*La animación por interpolación de forma ese diferencia en que gradúa el cambio de la forma del objeto, realizada a través de la manipulación de sus puntos de control bezier. También permite cambiar el color.
textos y tipos de textos en flash

Semáforo

Esta práctica la hice con ayuda de la herramienta de alpha y los blank keyframes.

La linea del tiempo queda de la siguiente manera:

Haz click!!!

Blank Keyframes!!!!

Los blank keyframes sirven para aparecer ciertas figuras en un tiempo determinado.

Para crear uno se hace control + click en el frame donde se deseé hacer...

Pasos:

1.- En el layer 1 hice un rectangulo que convertí a simbolo y le puse animacion "Create Motion Tween" hasta el frame 60.

2.- En el layer dos creé un blank keyframe en el frame 10 e hice un cuadrado morado determiné que quería que terminará en el frame 20 creando otro blank keyframe.

3.- Creé otro blank keyframe en el frame 40 e hice un cuadrado verde, determiné que quería que terminará en el frame 50 creando otro blank keyframe.

4.- En un tercer layer hice un circulo que gira hacia la derecha y hacia la izquierda durante su movimiento, coloqué el layer 3 en medio para que pasara sobre el rectángulo y debajo de los cuadrados. 

La linea del tiempo se ve así:

Haz click!!!!!

 

carros...pero no chocones, eh?

En esta animación combinamos "guide lines" o cuando la ruta era más fácil solo utilizamos los keyframes.

El paisaje lo hice en un solo layer, menos el puente, que lo hice en otro layer para que se pudiera  apreciar que los carros pasaba encima o por debajo del puente.

Haz click!!!!

Three-ángulo!!!!

En esta animación combinamos el color alpha y el guide line

Solo que para que el triángulo siempre siga con su punta el guide line hay que ponerla exactamente sobre de ella al principio y al final de la animación. 

No olvides poner la opción "Orient to path" para que siga el camino!!

Haz Click!

I'm 2 tire-d now

En esta animación solo combinamos las dos practicas anteriores, insertamos un guide line para trazar la ruta de la llanta y también elegimos hacia donde giraría...

Haz click!!!

I'm tire-d !!!!

Pasos:

1.- Haces la llanta, la conviertes en símbolo, haces click en "Create Motion Tween", insertas un Keyframe donde quieras que se termine la animación.

2.- Haces que la llanta gire de esquina a esquina creando keyframes para señalar los movimientos.

3.- Entre cada keyframe dentro de la linea del tiempo das click en las lineas, en la barra de herramientas aparecera la opción de "Rotate" y la das que gire a la derecha o Izquierda.

El circulo se desaparece!!!!

El circulo se desvanece!!!!!!! 

Pasos:

1.- Hacer un círculo, seleccionar un color para el mismo, convertirlo en símbolo, insertar un "Motion Tween".

2.- Hacer click en "add motion line"  y con ayuda del lápiz trazar la ruta que queramos que siga el circulo.

3.- Hacer click sobre el circulo y en la barra de herramientas cambiar el color a alpha para que el circulo se desvanezca.

4.- La barra de herramienta se verá de la siguiente manera.

Haz click en la animación...!!!!