PRÁCTICAS

Prácticas 3er Parcial

Carro 1y 2
Las acciones de los botones deben ir de la siguiente manera:

* Para los sonidos:

on (press) {
gotoAndPlay("claxon");
}
on (release) {
gotoAndStop("menu");
stopAllSounds();
}

* Para las acciones:

on (press) {
gotoAndPlay("dirizq");
}
on (release) {
gotoAndStop("menu");
}

Los sonidos fueron sacados de iMovie y exportandos a .mp3


Carro 3

Las acciones que deben tener los botones son las siguientes:

on (release) {
gotoAndPlay("puerta2a");
}

Carro4

Las acciones son las siguientes:

on (press, keyPress "") {
gotoAndPlay("frente");
}

Casa

on (press, keyPress "") {
gotoAndPlay(70);
}

IMB

La fórmula para sacar el IMC es Peso / Altura * Altura
La fórmula para sacar el IMC es Peso / Altura * Altura

Sonidos

Pasos: Hacer botones en diferentes layers (En las bibliotecas de flash hay botones predeterminados, si hacemos nuestro propio botón hay que convertirlo a botón) Dar doble click sobre el botón. Crear un nuevo layer Hacer un blackey frame en stado "down" del botón (aparecerá un circulito) en el nuevo layer. Arrartrar el sonido ( hay sonidos predeterminados en las bibliotecas de flash)


Pasos: Abrir flash y hacer la animación en la que la figura se transforma. Primero debe ser un botón para que cuando lo apretemos empiece la animación y el sonido. Abrir imovie-create new proyect-(ponerle nombre al proyecto)- create - hacer click en media - standard sound effect skywalker sound effect - ( elegir el sonido) - arrartrar - a donde dice "drag audio here" - dar click en share -- share -- quick time -- expert -- export -- wave -- save in dock. En el dock buscar el archivo que se ha creado y abrirlo en itunes- advanced- import - mp3. advanced--convert mp3 File import mp3 open Layer 2 seleccionar todo sound- elegir.

Textos

Existen 3 tipos de textos:
* Texto Estático = es el que no tiene ninguna función es especial. En la barra de propiedades , despues de haber presionado en la barra de herramintas para insertar texo, aparecerán los diferentes tipos de texto, presionar Dinamic Text

* Texto de entrada = aparecerá un espacio en blanco donde al publicarlo como swf podremos insertar información que se requiera. En la barra de propiedades hacer click en Input Text. Debe de estar en la función de single line y hacer click en "show border around text" para que aparezca el cuandro blanco para publicar. Cada uno deberá TENER UNA VARIABLE DIFERENTE.

* Texto dinamico = Cuando publiquemos en swf podran aparecer en el todos los input text´s que hayamos ingresado antes. Debe estar en la función de multiline y presionar la opción selectable
( es un botón que tiene una Ab) . Debe tener otra variable diferente a las del input text. Poner un botón en las acciones del botón en forma de experto hacer click en "on" despues en "release" y después poner la fórmula {H = "Bienvenido " + " " + A + B + C }

Alpha

Pasos:

1.- Poner una imagen que cubra el área de trabajo convertirlo a movie clip, en el layer 1 y el frame 1. En el frame 10 insertar un key frame. Cambiar el Tween a MOTION. En el frame 1cambiar el color a ALPHA el porcentaje al 100% en el frame 10 cambiar el alpha al porcentaje 20%.

2.- En otro layer en el frame 8 insertar un blank keyframe, poner otra imagen que cubra el area, convertirla a movie clip e insertar en keyframe en el frame 20.

Hacer que cambia el alpha de 20% a 100% y otra vez a 20%.

3.- Repetir los 2 pasos las veces necesarias.

Scene 2

Pasos:

1.- Se siguen los pasos 1 y 2 de la primera scene que elaboramos.

2.- Creamos 4 nuevas escenas y hacemos 4 animaciones nuevas en las que ocupamos guide lines, imágenes bitmap, zoom... cosas ya explicadas anteriormente.

Barco

Esta animación ocupa guide lines en las aves, en el barco y en las nubes. En paisaje fue hecho con el lápiz, las olas del mar se mueven de derecha a izquierda. Cada elemento va en un layer distinto. Hay dos layer de olas unas que empiezan moviendose hacia la derecha y continuan moviendose hacia la izquierda y en el otro layer empiezan moviendose hacia la izquierda y luego hacia la derecha. Para hacer que el mar se vea de diferentes tonos, simplemente hicimos diferentes rectángulos con diferentes tonalidades de azul.

Lo único nuevo en esta animación es que el cielo cambia de color. En otro layer en el 1 hacemos un rectángulo de un tono azul oscuro, lo convertimos a movie clip, en el frame 15 insertamos un keyframe, hacer click entre el frame 1 y 25 y en la barra de propiedades cambiamos el Motion de NONE a MOTION. En el frame 15 hacemos click en el rectángulo, en la barra de popiedades cambiamos el COLOR de NONE a TINT, y cambiamos el color, a un tono más claro de azul.

En otro layer en el frame 23 insertamos un blank key frame hacemos un rectángulo negro que cubra toda la pantalla, lo convertimos a movie clip, insertamos un keyframe en el frame 27, entre estos frames hacer click y en la barra de propiedades cambiar el TWEEN de NONE a MOTION. En al frame 23 hacer cick en el rectángulo cambiar el COLOR de NONE a ALPHA y ponerlo en 0% y en el 27 cambiar a ALPHA y el porcentaje a 100%. Para que la pantalla se oscurezca.

Escribimos FIN y hacemos que las letras se muevan y después colocamos un botón para que se repita la animación.

Poner un action--stop en el último frame.

Scene

Pasos:

1.- En el layer 1 escribir una palabra hacer dos veces click en "break apart" en el mismo layer pero en el frame 15 insertar un blanck keyframe poner dos palabras más y hacer dos veces click en break apart. Hacer click en el espacio que se genera entre el layer 1 y el 15 y en la barra de propiedades cambiar el motion de NONE a SHAPE.

2.- Crear otro layer, y del layer 1 copiar las dos palabras y pegarlas en el layer 2 (el nuevo que acabamos de crear) hacer que las dos palabras estén en el mismo lugar en el layer 1 y el dos. Agrupar cada palabra (nos quedarán 2 grupos) seleccionarlos y hacer cloick en distribute to layers se crearán dos leyers nuevos, el 3 y el 4. El layer 2 lo podemos borrar. Recorremos los layers creados

3.- Crear 2 nuevas escenas. (Insert-Scene) convertir las dos palabras a botones y hacer click en el circulo blanco de cada botón ir a

actions -- go to -- scene 3 o 4

4.- La nuevas escenas están completamente en blanco, hay que crear las animaciones, una de ellas ya ha sido explicada anteriormente.

Máscara 3

Pasos:

1.- En el layer 1 escribir la palabra que deseemos que cambie, hacer dos veces click en modify-break apart. Si es una imágen la que va a cambiar a letras, hacer la imagen (NO CONVERTIR a SIMBOLO). Supongamos que esta animación termina en el frame 20, tenemos que poner en ese frame en action-stop.

En otro frame ,pero en el mismo layer, crear un blank keyframe yponer las palabras a las que queramos que cambie, en este caso los diferentes nombres de paises, y también hacer dos veces click en break apart. En el espacio que se crea entre el frame y el black keyframe hacer click y cambiar el Tween de None a Shape (En la barra de propiedades)

2.- Para convertir los nombres de los paises a botónes ... primero debemos copiar todos los nombres y pegarlos en otro layer. Ver que queden en la misma posición que en el otro layer. Agrupar cada una de las palabras (modify-group) ya que estén todas AGRUPADAS hacer click el modify -- dristribute to layers. Se crearán nuevos layers, en este caso 7. Cada uno pertenecerá a una diferente plabra.

Los layers nuevos se crearon en el frame 1, lo que vamos a hacer es seleccionarlos y moverlos todos juntos al frame 20. Es necesario que borremos todos los frames que no necesitemos seleccionamos del frame 21 hasta el final y hacemos click en insert - remove frames.

3.- Cada una de las palabras las convertimos a botones. Para hacer la liga a una pagiina web, daremos click en el centro de cada palabra que ya hemos convertido a botón (en el circulito blaco) y hacer click en actions--get URL y escribir la dirección completa (http://www.fbhsfbfgb.com).

Máscara 2

Pasos:

1.- En el layer 1 hacer un rectángulo. Convertirlo a simbolo = Movie Clip, cambiamos al Tween de None a Motion y hacemos que se mueva de esquina a esquina al último lo movemos al centro y después lo hacemos grande, que cubra toda el área de trabajo. En cada uno de los circulitos que se crearon en el time line (que simbolizan los movimientos que va haciendo el rectángulo) hacer click e irse a Modify--Trasform-- Flip horizontal o vertical. Esto hará que el rectángulo parezaca que gire en la trayectoria que ya habíamos trazado.

2.- En el layer 2 ponemos la imagen que queramos que se vea, en este caso la torre Eiffel.

3.- Hacer control + click sobre el layer 1 y hacer clik sobre mask.

4.- Si queremos insertar botón, en el último frame de el layer 2 ponemos un action--stop.

5.- En otro layer que vamos a colocar hasta arriba (quedando layer 1= botón, Layer 2 = rectángulo, Layer 3 = imagen) hacer un black keyframe arriba del último frame ocupa el layer 2 (Ejemplo: Si nuestra animacion del layer 2 termina en el frame 50, en el nuevo frame que vamos a crear insertar un black key frame en el frame 50) hacer nuestro botón, ya sea imagen o palabra, la(o) convertimos a simbolo-botón hacemos control +click en el circuliyo blanco que se formó sobre nuestro botón hacer click en go to.

Máscara

Pasos:

1.- En el layer 1 hacer un óvalo o cualquier figura y la convertimos a símbolo (Movie Clip). Cambiamos el Tween de None a Motion. Hacemos que el círculo se mueva de izquierda a derecha.

2.- Crear otro layer y para modificar el fondo y que se vean de diferente color, debemos hacer un rectángulo que cubra el área de trabajo y hacerlo del color que queramos que quede el fondo. No podemos cambiar directamente el fondo, ya que el otro layer tambien tendría el mismo color y no se apreciaría la máscara. Escribir el texto que queramos que aparezca, en este caso "Te amo"

3.- Creamos otro layer, hacemos otro rectángulo de otro color que cubra completamente el área de trabajo y escribimos lo que queramos que se vea siempre. En este caso "TQM"

4.- Los layers deben quedar simpre en el siguiete orden: primero el layer donde esta el óvalo, despues el layer del texto que va a aparecer y al último el texto que siempre vemos.

5.- Hacemos control + click sobre el layer 1 (donde aparece el nombre, no en el timeline) y elegimos mask.

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...!!!!

Práctica 4 (pez en movimiento)

Pasos:
1.- Hacer un círculo y un rectángulo junto a este.
2.- Con ayuda de la arrow tool podremos modificar el rectángulo para hacer un triángulo y que parezca la cola del pez. Jalar de las esquinas del rectángulo para poder modificarlo.
3.- Seleccionar un color determinado para el pez en este caso anarangado
4.-Seleccionar (hacer click solo una vez) el circulo y el rectangulo. Posteriormente seleccionar la herraminta de la brocha y en opciones ir a: solo pintar lo seleccionado. Elegir el color negro
5.- Hacer una líneas en forma vertical no importa que se salgan del contorno del pez
6.- Hacer dos circulos pequeños blancos que serán los ojos del pez
7.- Ya que el pez esté terminado seleccionar todo y convertirlo a simbolo
8.- Ponerle también "Create Motion Tween"
9.- Seleccionar el último frame hasta donde se realizará la aniamción
10.- poner trayectoria del pez.
11.- Hacer otro layer y poner rectangulos para deformarlos y hacer que parezcan las algas
12.- Hacer un tercer layer donde pondremos otras algas de otro color para poder diferenciar.
13.- Convertir a simbolo todas las algas y ponerles "Create Motion Tween" si queremos que realizcen un pequeño movimiento de derecha a izquierda paraque parezca que se mueven por la accion del mar
14.- En un cuarto layer hacer circulos pequeños a modo que parezcan burbujas.
15.- Convertirlas a simbolo una vez que ya este determinado el color y el tamaño de las mismas. ponerles un "Create Motion Tween"
16.- Hacer que las burbujas tengan la misma ruta que el pez, poner las animaciones correspondientes.

La imagen quedará como la siguiente...

Práctica 3

1.- Hacer cualquier imagen: circulo, óvalo, rectángulo, cuadrado, etc.

2.- Hacer doble click sobre la figura y convertirla a simbolo


3.- Seleccionar la imagen, ir al menu insert y dar click en la opcion:


La imagen se verá de la siguiente forma

4.- Seleccionar el frame donde quieras que termine la animación dar click derecho y seleccionar Insert Keyframe, debe a parecer una línea continua.


5.- Ir al frame 1 y poner el simbolo en el lugar donde quieres que empiece, ir al último frame y p0ner el simbolo donde quieres que quede finbalmente.

6.- Presionar enter y el simbolo se moverá con la ruta que hayamos marcado anteriormente.

7.- Si queremos que el simbolo haga varios movimientos símplemente hay que elegir el frame donde queramos que cambie de ruta y hacer un nuevo KEYFRAME, o sólo moviendo el simbolo(imágen) se creará automáticamente un Keyframe. El layer se verá de la siguiente manera. Los circulitos indicarán cambios en la ruta del simbolo.


7.- Si queremos que se muevan dos o más símbolos al mismo tiempo tenemos que hacer otro layer presinando lo siguiente. Los frames se verán de la siguinte manera.





Haces click enenter y laimagen se moverá...

Herramientas de Trabajo

Arrow Tool: Con ellka podremos seleccionar objetos y moverlos por el área de trabajo, también nos ayuda a modificar las líneas de las figuras o letras y hacer diferentes formas


Lasso tool: Para cortar las lineas en una misma figura

Pencil Tool: Sirve para hacer lineas, tiene diferente opciones que nos ayudaran a hacer los trazos más recto





Oval & Rectangle Tools: Nos ayudan a hacer círculos, ovalos, rectangulos y cuadrados


Text Tool: Para escribir

Free transform Tool: Nos ayuda a modificar una figura ya hecha.


Erase Tool: Para borrar, hay diferrentes opciones para la goma, borrar todo, borrar solo lineas, borrar relleno, etc.


Stroke Color & Fill Color: Para el color de las líneas o rellenos.