Clases de Flash

FLASH MX

Herramientas de dibujo

Lápiz:Opciones

Enderezar: tiende a enderezar el dibujo

Suavizar: Tiende a optimizar las líneas

Tinta: Suaviza en menor grado.

Flecha: Permite remodelar las líneas. Con doble click permite mover la línea

Subselección: 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.

Transformación libre: Sirve para rotar, mover, cambiar el tamaño del objeto. Con ALT rota el objeto.

Degradado: Permite modificar la rotación del degradado.

Para aplicar degradado activar del menú: VENTANA - MEZCLADOR DE COLORESCambiar el Sólido a Lineal o Radial.

Bote de tinta: Modifica el color de las líneas.

Borrador: En opciones permite distintas formas de borrado. La herramienta Grifo borra por segmentosPuede rellenar cerrando o no huecos en figuras abiertas.

Pg. 1

Clases de Flash Tipo de Archivos

En Flash los archivos se guardan con extensión FLA. Estos archivos se pueden abrir y modificar desde Flash.

Para poder insertarlos en HTML es necesario convertirlos a SWFDesde el menú : ARCHIVO -EXPORTAR PELÍCULA

Cuando se hace doble click sobre un archivo SWF se abre el visor de SWF.

Para guardar un archivo con la extensión EXE, es decir, ejecutable, hay que ir al menú: ARCHIVO - CONFIGURACIÓN DE PUBLICACIÓN y seleccionar PROYECTOR WINDOWS (. Exe)

Animaciones

Para que un objeto sea válido para animarlo hay que prepararlo. Existen dos maneras diferentes:

1) Por movimiento (es la más usada)2) Por interpolación de forma.

Es necesario convertir el objeto en símbolo, de esta manera lo va a mantener agrupado y guarda una copia del objeto en la Biblioteca.

Los pasos para convertir en símbolo un objeto son:

1) Seleccionar el objeto2) Ir al menú: INSERTAR - CONVERTIR EN SÍMBOLO - GRAFICO

Línea de tiempo

La animación se expresa en fotogramas, números. Es la secuencia de cuadros.Para que una animación sea fluida lo ideal son 12 fotogramas por segundo12 fps

En videos con norma PAL 25 fpsEn videos con norma NTSC 30 fps

Fotograma clave

Momento importante del tiempo dentro del movimiento.Los fotogramas clave se marcan dentro de la línea de tiempo utilizando el botón 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 botón derecho del mouse, seleccionar CREAR INTERPOLACIÓN DE MOVIMIENTO.

Acción Stop

Las animaciones se crean como bucles, se repiten sin parar. Para detener el Bucle se incorpora una acción.Es conveniente crear una nueva capa para incorporar este elemento distinto que es la acción.

En el último fotograma clave de la animación , ir al PANEL DE ACCIONES - CONTROL DE PELÍCULA - STOP y arrastro el STOP a la pizarra de acción.

Pg. 3

Clases de Flash

Tinta-Transparencia

El efecto Tinta hacen los objetos cambien de color, pudiendo definir el color inicial y color finalEs necesario convertir en símbolo 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 interpolación de movimiento.

El efecto Transparencia hacen a los objetos desaparecer.Es necesario convertir en símbolo 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 interpolación de movimiento.

Botones

La programación de la acción de un botón se realiza desde Flash. Una vez diseñado un botón se lo convierte en símbolo seleccionando la opción Botón.

Vínculos de un botón:

a) Para vincular un botón a un sitio web seleccionar del panel Acciones - Navegador\Red - getURL y arrastrar la acción a la pizarra de acciones.En URL detallar la dirección completa del sitio Web, por ejemplo: http://www.clarin.com

b) Para vincular un botón a una página interna del sitio detallo el nombre de la página, por ejemplo: Desarrollo.htm

Interpolación por Forma  

Cuando lo que queramos no sea cambiar la posición de un objeto en el escenario, sino su forma de manera progresiva (o ambas cosas a la vez), Flash 8 nos ofrece la técnica de la Interpolación 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 interpolación por forma, es muy semejante a crear una interpolación de movimiento. Flash genera fotogramas intermedios en los que va variando ligeramente la forma del fotograma anterior. Así como hacíamos en el tema anterior, sólo necesitamos dos fotogramas clave. Colocaremos en el primer

Pg. 4

Clases de Flash 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 Interpolación por Forma funcione como es debido aquellos objetos que intervengan deberán ser objetos vectoriales (no símbolos Flash).

    Debemos tener también dos aspectos en cuenta:

                1) Separar en distintas capas los objetos fijos y los que estarán 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 interpolación.

    Si realizamos la interpolación por forma correctamente la línea de tiempos tendrá este aspecto:

    Las consideraciones sobre la velocidad y el número de fotogramas que vimos en las interpolaciones de movimiento se pueden aplicar también a la interpolación por forma y a cualquier animación hecha con Flash.

    Si hay algún fallo en los parámetros necesarios para que la interpolación se ejecute bien, como por ejemplo, que uno de los objetos en capa sea un símbolo, se mostrará algo así en la línea de tiempos:

 

Pg. 5

Clases de Flash Para crear una interpolación de forma deberás actuar de forma

similar que para crear una de movimiento. Una vez tengas los fotogramas de inicio y fin de la animación deberás seleccionar todos

los fotogramas que participen en ella y abrir el panel Propiedades.

Allí deberás seleccionar la opción Forma en el desplegable Animar. Y ya habrás terminado

Transformar Textos  

   Debido a la importancia de los textos, es importante comentar las aplicaciones que tienen los cambios de forma sobre ellos. Añadimos así una posibilidad más para realizar logotipos o presentaciones vistosas y transmitir información de manera espectacular.

      Recordemos que para realizar una interpolación 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 función 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 hubiéramos repasado con la herramienta lápiz el contorno de cada letra.   

      ¿Posibilidades de esta técnica en textos? Muchísimas, 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 transición. También es conveniente dar un tiempo para que cada letra sea

Pg. 6

Clases de Flash mostrada y pueda ser visualizada y "entendida" por aquel que vea la película, porque si no lo hacemos corremos el riesgo de que la animación parezca sólo un garabato revolviéndose.

   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 transición también en el color. Observemos a su vez como cuando se forma cada letra, mantenemos su imagen el tiempo suficiente como habíamos indicado que era necesario.

      En este otro ejemplo se observa la transición de colores más claramente y, además, 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 animación creada con una forma en el fotograma inicial y un texto en el final veremos que la interpolación 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 interpolación 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. Deberás ejecutar de nuevo el comando para que estas letras se separen y creen una forma.

Pg. 7

Clases de Flash

 

MASCARA

BOTON

Los símbolos de tipo Botón son los que aportan la mayor parte de la interactividad de las películas 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. También es habitual ver como este tipo de elementos reaccionan cuando se les pasa el ratón por encima o cuando se les está pulsando, por ejemplo.

Al igual que los otros símbolos de Flash 8, los botones tienen su propia línea de tiempos. Esta es independiente pero, sin embargo, está formada únicamente por cuatro fotogramas, uno para cada estado posible del botón.

Reposo. Aspecto por defecto del botón, es decir, cuando el puntero del ratón no está situado sobre él.

Pg. 8

Clases de Flash Sobre. Aspecto del botón cuando situamos el puntero sobre él. 

Presionado. Apariencia que deseamos tenga nuestro botón mientras lo mantengamos pulsado.

Zona activa. Aquí debemos indicar el área real en la que queremos que actúe nuestro botón. Esto es importante sobre todo en botones compuestos sólo por texto como veremos más adelante.

 

Creación de un Botón

 

  En la creación de un botón podemos considerar dos fases. En la primera vamos a convertir nuestro objeto a símbolo de tipo botón y posteriormente veremos cómo completarlo internamente, lo que nos ayudará a entender mejor dicha estructura.

Primeramente crearemos el objeto que representará el aspecto por defecto de nuestro botón con las herramientas que nos ofrece Flash 8. 

Seleccionaremos el objeto y accederemos al menú Insertar → Convertir en Símbolo, le daremos el comportamiento Botón y asignaremos un nombre a nuestro nuevo símbolo.

De esta forma ya tenemos transformado el objeto para que se comporte como un botón. Ahora lo completaremos internamente.

Para determinar cómo debe reaccionar el botón en función de las acciones del ratón, lo editaremos haciendo clic con el botón derecho del ratón sobre nuestro nuevo botón y seleccionando la opción Editar.

Cuando tengamos delante la línea de tiempos del botón (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.

Pg. 9

Clases de Flash

Ahora ya podemos modificar el aspecto inicial del botón para cada posición del cursor y marcar el área de acción del botón (fotograma Hit) en la que simplemente podremos dejar la misma figura que la inicial (en este caso sólo 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 botón.

BOTON QUE DIRIGE A UNA URL

En pizarra de acción definir:

on (release){getURL("http://clarin.com");}

Pg. 10

Clases de Flash

EJERCITACIÓN Nº1

1) Crear una capa llamada Cielo2) Bloquear la capa Cielo3) Crear una capa llamada Avión4) Dibujar un avión5) Convertirlo en Símbolo Gráfico6) En la capa Avión, ubicarse en el fotograma clave en 1y colocar al avión

en el ángulo inferior izquierdo.7) En 12 crear un fotograma clave8) Ubicar el avión en el ángulo superior derecho9) En 6 crear interpolación de movimiento.10)Guardar el archivo en tu carpeta del Server con el nombre EJERCICIO 1

AVION.FLA11)Guardarlo con luego con el mismo nombre y la extensión SWF12)Ejecutarlo desde el visor de flash (haciendo doble click en el archivo

SWF)

EJERCITACIÓN Nº2

Pg. 11

Clases de Flash 1) Crear una capa llamada Fondo2) Dibujar un rectángulo con relleno aplicando efecto degradado3) Bloquear la capa Fondo4) Crear una capa llamada Texto5) Escribí tu nombre6) Utilizá distintos colores para las letras7) Convertirlo en Símbolo Gráfico8) En la capa Texto, ubicarse en el fotograma clave en 1y colocar al

Nombre en el centro.9) En la línea 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 transformación libre y cambiándolo de lugar como en el ejemplo de abajo.

10)Crear interpolación de movimiento entre los fotogramas clave.11)Guardar el archivo en tu carpeta del Server con el nombre EJERCIOCIO

2 TEXTO.FLA12)Guardarlo con luego con el mismo nombre y la extensión SWF13)Ejecutarlo desde el visor de flash (haciendo doble click en el archivo SWF)

EJERCITACIÓN Nº3

Pg. 12

Clases de Flash 1. Dentro de una capa llamada "Globo" dibuja un globo, selecciónalo y

conviértelo en símbolo gráfico.2. Inserta un fotograma clave en la posición 45 de la línea de tiempo.3. Coloca el globo en la posición final de su recorrido y disminuye su tamaño.4. En algún fotograma intermedio, por ejemplo en el 25, realiza la interpolación

de movimiento. 5. Incorpora la Acción STOP en el fotograma clave la posición 25.6. Guardar el archivo en tu carpeta del Server con el nombre EJERCIOCIO 3

GLOBO.FLA7. Guardarlo con luego con el mismo nombre y la extensión SWF. Ejecutarlo

desde el visor de flash (haciendo doble click en el archivo SWF)

EJERCITACIÓN Nº4

1. Abre el archivo “EJERCIOCIO 3 GLOBO.FLA” y crea otra capa con el nombre “cielo”

2. Dibuja el cielo y píntalo con un color apropiado. Verás que el globo quedó tapado por el cielo. Cambia el orden de las capas arrastrándolas con el mouse.

3. Cambia el color del cielo por uno degradado. Rótalo 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 conviértela en símbolo gráfico. 7. Coloca la nube en algún lugar del escenario e inserta un fotograma clave en

la posición 45 de la línea de tiempo.8. Coloca la nube en otra posición y alarga su forma.9. En algún fotograma intermedio, por ejemplo en el 20, realiza la interpolación

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), arrastrándola 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 película para visualizar los efectos.15.Guardar el archivo en tu carpeta del Server con el nombre EJERCIOCIO 3

GLOBO.FLA16.Guardarlo con luego con el mismo nombre y la extensión SWF. Ejecutarlo

desde el visor de flash (haciendo doble click en el archivo SWF)

EJERCITACIÓN Nº5

1. En una capa llamada "barrilete" dibuja un barrilete, selecciónalo y conviértelo en símbolo gráfico.

2. Inserta un fotograma clave en la posición 20 de la línea de tiempo.

Pg. 13

Clases de Flash 3. Coloca el barrilete en la posición 2 del escenario y disminuye su tamaño.4. En algún fotograma intermedio, por ejemplo en el 10, realiza la interpolación

de movimiento.5. Inserta un fotograma clave en la posición 60 de la línea de tiempo y coloca

el barrilete en la posición 3 transformando tamaño y giro. Realiza la interpolación de movimiento

6. En una capa llamada "cielo" Dibuja el cielo y píntalo con un color apropiado. Verás que el barrilete quedó tapado por el cielo. Cambia el orden de las capas arrastrándolas con el mouse.

7. Cambia el color del cielo por uno degradado (Menú- Ventana- Paneles- Transformar- Relleno- Degradado lineal) Rótalo para que el degradado sea horizontal (Menú- Modificar- Transformar- Rotar 90º)

8. Reproduce la película para visualizar los efectos.9. Crea otra capa con el nombre “nube1”Dibuja una nube y conviértela en símbolo gráfico. 10.Coloca la nube en algún lugar del escenario e inserta un fotograma clave en

la posición 60 de la línea de tiempo.11.Coloca la nube en otra posición y alarga su forma.12.En algún fotograma intermedio, por ejemplo en el 30, realiza la interpolación

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), arrastrándola con el mouse hacia el escenario.

14. Ídem punto 10 - 11 -1215.Reproduce la película y graba el archivo con el nombre “EJERCICIO 5

BARRILETE .FLA 16.Guardarlo con luego con el mismo nombre y la extensión SWF. Ejecutarlo

desde el visor de flash (haciendo doble click en el archivo SWF)

EJERCITACIÓN Nº6

1. Realizar una animación donde se visualicen dos veleros que van navegando de izquierda a derecha, donde uno se ve más lejano que el otro, por lo tanto su velocidad aparente será menor.

2. Utilizar un color degradado para pintar el cielo.3. Deberás lograr que el color del mar vaya de una tonalidad mas oscura a

una tonalidad mas clara en el transcurso de la animación4. Crear las capas que creas necesarias para lograr la animación.5. Grabar el archivo con el nombre veleros.fla y veleros.swf

Pg. 14

Clases de Flash

EJERCITACIÓN Nº7

1. Dibujar en una capa llamada "fondo" el cielo y píntalo con un color apropiado.

2. Converir el cielo en símbolo.3. El cielo deberá ir de un celeste claro en el fotograma de la posición 0 a

un azul oscuro en el fotograma de la posición 30. Creando la interpolación de movimiento en la posición 15

4. Bloquea la capa “fondo”.5. Crea otra capa con el nombre “Sol”6. Dibuja un sol y convertirlo en símbolo gráfico. 7. Coloca el sol en algún la parte superior derecha del escenario en el8. fotograma clave en la posición 09. Coloca el sol en el medio del escenario en el fotograma clave de la

posición 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 posición 3013.Bloquea la capa "Árboles"14.Reproduce la película para visualizar los efectos.15.Guardarlo con luego con el nombre paisaje.fla y paisaje.swf.

EJERCITACIÓN Nº8

1. Crear capa 1 peceraDibujar una pecera sin convertir a símbolo ya que será el fondo de la animación.

2. Crear capa 2 pez1Dibujar un pez en el fotograma 1 y animalo para que parezca que nadaY aplicarle efecto tinta.

Pg. 15

Clases de Flash

3. Crear capa 3 pez2Ir 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 delanterasDibujar mas plantas para que los peces naden entre ellas y las del fondo

5. Crear capa 5 aireadorEn el fotograma 1 dibujar un aireador

6. Crear capa 6 burbujas Dibujar tres burbuja de distintos tamaño. Convertilas en símbolo y animalas. Si es necesario crear otra capa de burbujasIncluir una acción de Stop en el último fotograma

Guardar el archivo como peces ( fla y swf)

EJERCITACIÓN Nº9

Crear una animación que transmita la idea de la importancia de la conservación del agua en el planeta.

La animación debe contener objetos y texto, organizarla en tres capas

Capa 1 Tinta Dibujar un objeto, convertirlo en símbolo gráfico y aplicarle el efecto tinta

Capa 2 Transparencia (objeto)

Pg. 16

Clases de Flash Dibujar un objeto, convertirlo en símbolo gráfico y aplicarle el efecto transparencia

Capa 3 RotaciónEscribir un texto, convertirlo en símbolo gráfico y rotarlo.

Guardar el archivo como elagua ( fla y swf)

EJERCITACIÓN Nº10 Realizar la siguiente animación en una sola capa e insertar un sonido

relacionado con el tema. Guardar el archivo con nombre la casa del terror.fla y swf

EJERCITACIÓN Nº11

Crear un nuevo archivo modificando el color de fondo a negro. Crear tres imágenes simbólicas relacionadas con la Física, la Química y

la Biología Crear un texto que diga "Sitios de interés" Crear otro texto con nombres y apellido de los que integran el grupo. Crear un botón para cada asignatura. Convertir los botones en símbolo Modificar el aspecto del botón para los distintos estados del botón:

REPOSO – SOBRE – PRESIONADO – ZONA ACTIVA

Pg. 17

Fotograma 1 Fotograma 11 Fotograma 12 Fotograma 13

Fotograma 14 Fotograma 15 Fotograma 16

Clases de Flash Colocar a cada botón un vínculo 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 refrán 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 máscara con la forma geométrica deseada.

La animación 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 interpolación de forma en la figura geométrica de la máscara.

Colocar la acción STOP la final de la animación.

Pg. 18