Clases de Flash

FLASH MX
Herramientas de dibujo

Lpiz:
Opciones Enderezar: tiende a enderezar el dibujo Suavizar: Tiende a optimizar las lneas Tinta: Suaviza en menor grado.

Flecha: Permite remodelar las lneas. Con doble click permite mover la lnea Subseleccin: Muestra los puntos de anclaje y permite modificarlos. Lazo: Selecciona a mano alzada. Pluma: Para realizar trazados precisos en rectas o curvas y ajustar los
ngulos.

Transformacin libre: Sirve para rotar, mover, cambiar el tamao del objeto.
Con ALT rota el objeto.

Degradado: Permite modificar la rotacin del degradado.

Para aplicar degradado activar del men: VENTANA - MEZCLADOR DE COLORES Cambiar el Slido a Lineal o Radial.

Bote de tinta: Modifica el color de las lneas. Borrador: En opciones permite distintas formas de borrado. La herramienta
Grifo borra por segmentos Puede rellenar cerrando o no huecos en figuras abiertas.

Pg. 1

Clases de Flash

Tipo de Archivos
En Flash los archivos se guardan con extensin FLA. Estos archivos se pueden abrir y modificar desde Flash. Para poder insertarlos en HTML es necesario convertirlos a SWF Desde el men : ARCHIVO -EXPORTAR PELCULA Cuando se hace doble click sobre un archivo SWF se abre el visor de SWF. Para guardar un archivo con la extensin EXE, es decir, ejecutable, hay que ir al men: ARCHIVO - CONFIGURACIN DE PUBLICACIN y seleccionar PROYECTOR WINDOWS (. Exe)

Animaciones
Para que un objeto sea vlido para animarlo hay que prepararlo. Existen dos maneras diferentes: 1) Por movimiento (es la ms usada) 2) Por interpolacin de forma. Es necesario convertir el objeto en smbolo, de esta manera lo va a mantener agrupado y guarda una copia del objeto en la Biblioteca. Los pasos para convertir en smbolo un objeto son: 1) Seleccionar el objeto 2) Ir al men: INSERTAR - CONVERTIR EN SMBOLO - GRAFICO

Lnea de tiempo
La animacin se expresa en fotogramas, nmeros. Es la secuencia de cuadros. Para que una animacin sea fluida lo ideal son 12 fotogramas por segundo 12 fps En videos con norma PAL 25 fps En videos con norma NTSC 30 fps

Fotograma clave
Momento importante del tiempo dentro del movimiento. Los fotogramas clave se marcan dentro de la lnea de tiempo utilizando el botn derecho del mouse, seleccionar INSERTAR FOTOGRAMA CLAVE

Pg. 2

Clases de Flash

Para suavizar los movimientos entre un fotograma clave y otro hay que presionar botn derecho del mouse, seleccionar CREAR INTERPOLACIN DE MOVIMIENTO.

Accin Stop
Las animaciones se crean como bucles, se repiten sin parar. Para detener el Bucle se incorpora una accin. Es conveniente crear una nueva capa para incorporar este elemento distinto que es la accin. En el ltimo fotograma clave de la animacin , ir al PANEL DE ACCIONES CONTROL DE PELCULA - STOP y arrastro el STOP a la pizarra de accin.

Tinta-Transparencia
El efecto Tinta hacen los objetos cambien de color, pudiendo definir el color inicial y color final Es necesario convertir en smbolo el objeto sobre el que se aplicar el efecto luego seleccionar el objeto e ir al panel de propiedades seleccionando: Color Tinta - buscar el color final y lo llevo a 0%, en un fotograma clave posterior poner el color final en 100%, finalmente crear interpolacin de movimiento.

Pg. 3

Clases de Flash El efecto Transparencia hacen a los objetos desaparecer. Es necesario convertir en smbolo el objeto sobre el que se aplicar el efecto luego seleccionar el objeto e ir al panel de propiedades seleccionando: Color Alfa - 0%, en un fotograma clave posterior poner Alfa - 100%, finalmente crear interpolacin de movimiento.

Botones
La programacin de la accin de un botn se realiza desde Flash. Una vez diseado un botn se lo convierte en smbolo seleccionando la opcin Botn. Vnculos de un botn: a) Para vincular un botn a un sitio web seleccionar del panel Acciones Navegador\Red - getURL y arrastrar la accin a la pizarra de acciones. En URL detallar la direccin completa del sitio Web, por ejemplo: http://www.clarin.com b) Para vincular un botn a una pgina interna del sitio detallo el nombre de la pgina, por ejemplo: Desarrollo.htm

Interpolacin por Forma

Cuando lo que queramos no sea cambiar la posicin de un objeto en el escenario, sino su forma de manera progresiva (o ambas cosas a la vez), Flash 8 nos ofrece la tcnica de la Interpolacin por Forma, que consiste simplemente en ir transformando el contorno de un objeto creado en su interfaz hasta que sea igual que el contorno de otro objeto distinto. Realizar una interpolacin por forma, es muy semejante a crear una interpolacin de movimiento. Flash genera fotogramas intermedios en los que va variando ligeramente la forma del fotograma anterior. As como hacamos en el tema anterior, slo necesitamos dos fotogramas clave. Colocaremos en el primer fotograma el objeto con su aspecto original, y en el ltimo la apariencia final que queremos que tenga. Esta vez, es importante destacar que para que una Interpolacin por Forma funcione como es debido aquellos objetos que intervengan debern ser objetos vectoriales (no smbolos Flash). Debemos tener tambin dos aspectos en cuenta:
Pg. 4

Clases de Flash

1) Separar en distintas capas los objetos fijos y los que estarn animados. 2) Poner en distintas capas objetos que vayan a ser transformados con formas distintas, ya que Flash transformar todos los objetos vectoriales del primer fotograma en aquello que haya en el ltimo fotograma de la interpolacin. Si realizamos la interpolacin por forma correctamente la lnea de tiempos tendr este aspecto:

Las consideraciones sobre la velocidad y el nmero de fotogramas que vimos en las interpolaciones de movimiento se pueden aplicar tambin a la interpolacin por forma y a cualquier animacin hecha con Flash. Si hay algn fallo en los parmetros necesarios para que la interpolacin se ejecute bien, como por ejemplo, que uno de los objetos en capa sea un smbolo, se mostrar algo as en la lnea de tiempos:

Para crear una interpolacin de forma debers actuar de forma similar que para crear una de movimiento. Una vez tengas los

fotogramas de inicio y fin de la animacin debers seleccionar todos los fotogramas que participen en ella y abrir el panel Propiedades.

Pg. 5

Clases de Flash

All debers seleccionar la opcin Forma en el desplegable Animar. Y ya habrs terminado

Transformar Textos
Debido a la importancia de los textos, es importante comentar las aplicaciones que tienen los cambios de forma sobre ellos. Aadimos as una posibilidad ms para realizar logotipos o presentaciones vistosas y transmitir informacin de manera espectacular. Recordemos que para realizar una interpolacin de forma es necesario que el objeto sea de tipo vectorial. Este no es el caso de los textos, que se basan en fuentes y son creados en funcin de los valores de la tabla ASCII y un tipo de letra asociado. Para solucionar este problema, deberemos transformar el texto previamente en un objeto vectorial, es decir, como si hubiramos repasado con la herramienta lpiz el contorno de cada letra.

Posibilidades de esta tcnica en textos? Muchsimas, aunque puede llevar a confusiones si no se hace adecuadamente. Por ejemplo debemos asegurarnos de dar suficientes fotogramas de margen para que se note la transicin. Tambin es conveniente dar un tiempo para que cada letra sea mostrada y pueda ser visualizada y "entendida" por aquel que vea la pelcula, porque si no lo hacemos corremos el riesgo de que la animacin parezca slo un garabato revolvindose. Una de las posibilidades es "deletrear" una palabra de manera tan vistosa como vemos a la izquierda. Podemos comprobar como simplemente cambiando el color del objeto final, se produce una transicin tambin en el color. Observemos a su vez como cuando se forma cada letra, mantenemos su imagen el tiempo suficiente como habamos indicado que era necesario.

Pg. 6

Clases de Flash

En este otro ejemplo se observa la transicin de colores ms claramente y, adems, observamos transiciones de forma a texto.

Cuando creemos interpolaciones de forma y queramos incluir textos deberemos actuar de un modo especial dado que un objeto de texto no se considera como una forma. Para ello, y una vez tengamos la animacin creada con una forma en el fotograma inicial y un texto en el final veremos que la interpolacin aparece como incorrecta. Deberemos, entonces seleccionar el fotograma donde se encuentre el texto y seleccionarlo. Haremos clic en el men Modificar Separar para convertir el texto en un conjunto de puntos que creen una forma. Y la interpolacin ya estar lista. Consejo: Cuando vayas a aplicar el comando Separar sobre una palabra completa observa que primero lo que hace es separar la palabra en letras inidividuales. Debers ejecutar de nuevo el comando para que estas letras se separen y creen una forma.

Pg. 7

Clases de Flash

MASCARA
BOTON Los smbolos de tipo Botn son los que aportan la mayor parte de la interactividad de las pelculas Flash con aquel que la est visualizando. Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una serie de acciones. Tambin es habitual ver como este tipo de elementos reaccionan cuando se les pasa el ratn por encima o cuando se les est pulsando, por ejemplo. Al igual que los otros smbolos de Flash 8, los botones tienen su propia lnea de tiempos. Esta es independiente pero, sin embargo, est formada nicamente por cuatro fotogramas, uno para cada estado posible del botn.

Reposo. Aspecto por defecto del botn, es decir, cuando el puntero del ratn no est situado sobre l. Sobre. Aspecto del botn cuando situamos el puntero sobre l. Presionado. Apariencia que deseamos tenga nuestro botn mientras lo mantengamos pulsado. Zona activa. Aqu debemos indicar el rea real en la que queremos que acte nuestro botn. Esto es importante sobre todo en botones compuestos slo por texto como veremos ms adelante.

Creacin de un Botn

En la creacin de un botn podemos considerar dos fases. En la primera vamos a convertir nuestro objeto a smbolo de tipo botn y Pg. 8

Clases de Flash posteriormente veremos cmo completarlo internamente, lo que nos ayudar a entender mejor dicha estructura. Primeramente crearemos el objeto que representar el aspecto por defecto de nuestro botn con las herramientas que nos ofrece Flash 8. Seleccionaremos el objeto y accederemos al men Insertar Convertir en Smbolo, le daremos el comportamiento Botn y asignaremos un nombre a nuestro nuevo smbolo.

De esta forma ya tenemos transformado el objeto para que se comporte como un botn. Ahora lo completaremos internamente. Para determinar cmo debe reaccionar el botn en funcin de las acciones del ratn, lo editaremos haciendo clic con el botn derecho del ratn sobre nuestro nuevo botn y seleccionando la opcin Editar. Cuando tengamos delante la lnea de tiempos del botn (observa que tiene el aspecto que hemos mostrado anteriormente), seleccionaremos cada uno de los frames (sobre, reposo, presionado y zona activa) y pulsaremos F6 para crear un fotograma clave en cada uno de ellos.

Ahora ya podemos modificar el aspecto inicial del botn para cada posicin del cursor y marcar el rea de accin del botn (fotograma Hit) en la que simplemente podremos dejar la misma figura que la inicial (en este caso slo es importante la forma del objeto, no los colores u otras cosas) o bien dibujar con las herramientas de dibujos de Flash una nueva figura, en cuya superficie "se sentir aludido" nuestro botn.

BOTON QUE DIRIGE A UNA URL En pizarra de accin definir: on (release){ getURL("http://clarin.com");

Pg. 9

Clases de Flash }

EJERCITACIN N1
1) 2) 3) 4) 5) 6) Crear una capa llamada Cielo Bloquear la capa Cielo Crear una capa llamada Avin Dibujar un avin Convertirlo en Smbolo Grfico En la capa Avin, ubicarse en el fotograma clave en 1y colocar al avin en el ngulo inferior izquierdo. 7) En 12 crear un fotograma clave 8) Ubicar el avin en el ngulo superior derecho 9) En 6 crear interpolacin de movimiento. 10)Guardar el archivo en tu carpeta del Server con el nombre EJERCICIO 1 AVION.FLA 11)Guardarlo con luego con el mismo nombre y la extensin SWF 12)Ejecutarlo desde el visor de flash (haciendo doble click en el archivo SWF)

EJERCITACIN N2

Pg. 10

Clases de Flash 1) Crear una capa llamada Fondo 2) Dibujar un rectngulo con relleno aplicando efecto degradado 3) Bloquear la capa Fondo 4) Crear una capa llamada Texto 5) Escrib tu nombre 6) Utiliz distintos colores para las letras 7) Convertirlo en Smbolo Grfico 8) En la capa Texto, ubicarse en el fotograma clave en 1y colocar al Nombre en el centro. 9) En la lnea de tiempo vas a crear varios fotograma clave ( en 5, 10, 15, 20 y 25) y vas a ir rotando el Nombre con la herramienta transformacin libre y cambindolo de lugar como en el ejemplo de abajo. 10)Crear interpolacin de movimiento entre los fotogramas clave. 11)Guardar el archivo en tu carpeta del Server con el nombre EJERCIOCIO 2 TEXTO.FLA 12)Guardarlo con luego con el mismo nombre y la extensin SWF 13)Ejecutarlo desde el visor de flash (haciendo doble click en el archivo SWF)

EJERCITACIN N3

Pg. 11

Clases de Flash 1. Dentro de una capa llamada "Globo" dibuja un globo, seleccinalo y convirtelo en smbolo grfico. 2. Inserta un fotograma clave en la posicin 45 de la lnea de tiempo. 3. Coloca el globo en la posicin final de su recorrido y disminuye su tamao. 4. En algn fotograma intermedio, por ejemplo en el 25, realiza la interpolacin de movimiento. 5. Incorpora la Accin STOP en el fotograma clave la posicin 25. 6. Guardar el archivo en tu carpeta del Server con el nombre EJERCIOCIO 3 GLOBO.FLA 7. Guardarlo con luego con el mismo nombre y la extensin SWF. Ejecutarlo desde el visor de flash (haciendo doble click en el archivo SWF)

EJERCITACIN N4
1. Abre el archivo EJERCIOCIO 3 GLOBO.FLA y crea otra capa con el nombre cielo 2. Dibuja el cielo y pntalo con un color apropiado. Vers que el globo qued tapado por el cielo. Cambia el orden de las capas arrastrndolas con el mouse. 3. Cambia el color del cielo por uno degradado. Rtalo para que el degradado sea horizontal (Men- Modificar- Transformar- Rotar 90) 4. Bloquea la capa cielo. 5. Crea otra capa con el nombre nube1 6. Dibuja una nube y convirtela en smbolo grfico. 7. Coloca la nube en algn lugar del escenario e inserta un fotograma clave en la posicin 45 de la lnea de tiempo. 8. Coloca la nube en otra posicin y alarga su forma. 9. En algn fotograma intermedio, por ejemplo en el 20, realiza la interpolacin de movimiento. 10. Bloquea la capa "nube 1" 11. Crea otra capa con el nombre nube 2 e inserta en ella la nube que se encuentra en la Biblioteca (Men- Ventana Biblioteca), arrastrndola con el mouse hacia el escenario. 12. Repet los paso de los puntos 7 - 8 - 9 13. Bloquea la capa "nube 2" 14. Reproduce la pelcula para visualizar los efectos. 15. Guardar el archivo en tu carpeta del Server con el nombre EJERCIOCIO 3 GLOBO.FLA 16. Guardarlo con luego con el mismo nombre y la extensin SWF. Ejecutarlo desde el visor de flash (haciendo doble click en el archivo SWF)

EJERCITACIN N5
1. En una capa llamada "barrilete" dibuja un barrilete, seleccinalo y convirtelo en smbolo grfico.

Pg. 12

Clases de Flash 2. Inserta un fotograma clave en la posicin 20 de la lnea de tiempo. 3. Coloca el barrilete en la posicin 2 del escenario y disminuye su tamao. 4. En algn fotograma intermedio, por ejemplo en el 10, realiza la interpolacin de movimiento. 5. Inserta un fotograma clave en la posicin 60 de la lnea de tiempo y coloca el barrilete en la posicin 3 transformando tamao y giro. Realiza la interpolacin de movimiento 6. En una capa llamada "cielo" Dibuja el cielo y pntalo con un color apropiado. Vers que el barrilete qued tapado por el cielo. Cambia el orden de las capas arrastrndolas con el mouse. 7. Cambia el color del cielo por uno degradado (Men- Ventana- PanelesTransformar- Relleno- Degradado lineal) Rtalo para que el degradado sea horizontal (Men- Modificar- Transformar- Rotar 90) 8. Reproduce la pelcula para visualizar los efectos. 9. Crea otra capa con el nombre nube1 Dibuja una nube y convirtela en smbolo grfico. 10. Coloca la nube en algn lugar del escenario e inserta un fotograma clave en la posicin 60 de la lnea de tiempo. 11. Coloca la nube en otra posicin y alarga su forma. 12. En algn fotograma intermedio, por ejemplo en el 30, realiza la interpolacin de movimiento. 13. Crea otra capa con el nombre nube 2 e inserta en ella la nube que se encuentra en la Biblioteca (Men- Ventana Biblioteca), arrastrndola con el mouse hacia el escenario. 14. dem punto 10 - 11 -12 15. Reproduce la pelcula y graba el archivo con el nombre EJERCICIO 5 BARRILETE .FLA 16. Guardarlo con luego con el mismo nombre y la extensin SWF. Ejecutarlo desde el visor de flash (haciendo doble click en el archivo SWF)

EJERCITACIN N6
1. Realizar una animacin donde se visualicen dos veleros que van navegando de izquierda a derecha, donde uno se ve ms lejano que el otro, por lo tanto su velocidad aparente ser menor. 2. Utilizar un color degradado para pintar el cielo. 3. Debers lograr que el color del mar vaya de una tonalidad mas oscura a una tonalidad mas clara en el transcurso de la animacin 4. Crear las capas que creas necesarias para lograr la animacin. 5. Grabar el archivo con el nombre veleros.fla y veleros.swf

Pg. 13

Clases de Flash

EJERCITACIN N7
1. Dibujar en una capa llamada "fondo" el cielo y pntalo con un color apropiado. 2. Converir el cielo en smbolo. 3. El cielo deber ir de un celeste claro en el fotograma de la posicin 0 a un azul oscuro en el fotograma de la posicin 30. Creando la interpolacin de movimiento en la posicin 15 4. Bloquea la capa fondo. 5. Crea otra capa con el nombre Sol 6. Dibuja un sol y convertirlo en smbolo grfico. 7. Coloca el sol en algn la parte superior derecha del escenario en el 8. fotograma clave en la posicin 0 9. Coloca el sol en el medio del escenario en el fotograma clave de la posicin 30. 10. Bloquea la capa "sol" 11. Crea otra capa con el nombre rboles dibuj all dos rboles con la herramienta pincel, luego seleccionalos y presionando CTRL - D duplicalos varias veces hasta cubrir el escenario de una hilera de rboles. 12. Insert un fotograma en la posicin 30 13. Bloquea la capa "rboles" 14. Reproduce la pelcula para visualizar los efectos. 15. Guardarlo con luego con el nombre paisaje.fla y paisaje.swf.

EJERCITACIN N8
1. Crear capa 1 pecera Dibujar una pecera sin convertir a smbolo ya que ser el fondo de la animacin.

2. Crear capa 2 pez1

Pg. 14

Clases de Flash Dibujar un pez en el fotograma 1 y animalo para que parezca que nada Y aplicarle efecto tinta. 3. Crear capa 3 pez2 Ir al men VENTANA-BIBLIOTECA y arrastra el pez al escenario, duplicalo con CTRL-D. Realiza los pasos necesarios para darle movimiento, 4. Crear capa 4 plantas delanteras Dibujar mas plantas para que los peces naden entre ellas y las del fondo

5. Crear capa 5 aireador En el fotograma 1 dibujar un aireador 6. Crear capa 6 burbujas Dibujar tres burbuja de distintos tamao. Convertilas en smbolo y animalas. Si es necesario crear otra capa de burbujas Incluir una accin de Stop en el ltimo fotograma

Guardar el archivo como peces ( fla y swf)

EJERCITACIN N9
Crear una animacin que transmita la idea de la importancia de la conservacin del agua en el planeta. La animacin debe contener objetos y texto, organizarla en tres capas Capa 1 Tinta Dibujar un objeto, convertirlo en smbolo grfico y aplicarle el efecto tinta Pg. 15

Clases de Flash Capa 2 Transparencia (objeto) Dibujar un objeto, convertirlo en smbolo grfico y aplicarle el efecto transparencia Capa 3 Rotacin Escribir un texto, convertirlo en smbolo grfico y rotarlo. Guardar el archivo como elagua ( fla y swf)

EJERCITACIN N10
Realizar la siguiente animacin en una sola capa e insertar un sonido relacionado con el tema. Guardar el archivo con nombre la casa del terror.fla y swf

Fotograma 1

Fotograma 11

Fotograma 12

Fotograma 13

Fotograma 14

Fotograma 15

Fotograma 16

EJERCITACIN N11
Crear un nuevo archivo modificando el color de fondo a negro. Crear tres imgenes simblicas relacionadas con la Fsica, la Qumica y la Biologa Crear un texto que diga "Sitios de inters" Crear otro texto con nombres y apellido de los que integran el grupo. Crear un botn para cada asignatura. Convertir los botones en smbolo

Pg. 16

Clases de Flash Modificar el aspecto del botn para los distintos estados del botn: REPOSO SOBRE PRESIONADO ZONA ACTIVA Colocar a cada botn un vnculo a un sitio web relacionado con la asignatura. Guardar el archivo con nombre botones URL.fla y swf

EJERCITACION N 12
Realizar una animacion en flash Crear un fondo de color desde MODIFICAR/DOCUMENTO/COLOR DE FONDO. Escribir un refrn o una frase significativa en un sector del escenario Insertar una imagen que tenga que ver con la frase en otro sector del escenario. Crear una mscara con la forma geomtrica deseada. La animacin debe ir mostrando lentamente palabra por palabra la frase. Luego mostrar la frase en su totalidad dejandola ver por un momento. Finalmente enfocar solo la imagen, mientras se deber escuchar un sonido que deber durar aproximadamente 10 segundos. En este momento realizar una interpolacin de forma en la figura geomtrica de la mscara. Colocar la accin STOP la final de la animacin.

Pg. 17