Modulo y Actividades Flash

Laboratorio de Diseño Web – 5° Año E.S.S.
Macromedia Flash – Guía de actividades
Programa creador de animaciones: “Macromedia Flash MX”

Notas previas:
Cuando generamos un documento en Flash lo guardamos con la extensión .Fla (es el formato
nativo, fuente, de Flash); lo utilizamos sólo para trabajar en nuestra máquina (guarda capas,
símbolos, tipografía, escenas, etc.), en estos archivos podemos editar o re-editar una animación.
Cuando publicamos la película generamos un archivo con la extensión .Swf éste es el que solo
nos permite visualizar la animación, pesa poco y está muy comprimido. Una característica del
Swf es que se reproduce del fotograma 1 al último y hace LOOP, es decir repite la animación.
Algunos elementos muy importantes son:

Ventana Herramientas
Línea de tiempo.
Escenario (área de trabajo).
Paneles de propiedades
Configuraremos siempre el tamaño del escenario desde el Panel Propiedades - Tamaño: 770
px por 420 px (ya que es el campo útil de pantalla con un monitor a una resolución de 800 x
600). También podemos determinar los fotogramas por segundo (FPS), la película tradicional
trabaja a 24 fps, la TV a 25 fps, en Flash habitualmente trabajamos a 12 fps, está limitado por la
máquina del usuario, a la que debemos suponer no muy potente.
En la línea de tiempo, cuando iniciamos un archivo nuevo nos encontramos con una sola Capa
(llamada Capa 1) y con una especie de regla que nos indica el número de los fotogramas; hay
también unos casilleros (vacíos por el momento), y en el casillero 1 aparece el círculo pintado
de blanco que lo identifica como un Fotograma Clave Vacío, con cualquier contenido que
pongamos en el escenario se pinta automáticamente de negro lo cual es un Fotograma Clave.
Fotograma Clave Cabezal de Lectura
Regla indicadora de fotogramas
Fotograma Clave Vacío
Eliminar Capa
Insertar Fotograma Común
Capa Insertar Capa Guía
Las capas no pesan; conviene usar muchas para organizar la película y para facilitar diversas
estrategias de diseño, por ejemplo: si tenemos dos elementos de igual color en la misma capa se
sueldan y de distinto color, se calan; si están en capas distintas esto no pasaría ya que no
interactúan. La capa que está “arriba” es la que se ve encima de las otras capas.
Cuando agregamos un Fotograma Clave, automáticamente copia el último Fotograma Clave de

la izquierda.
El Fotograma Común (rectángulo gris) repite el contenido del último Fotograma Clave que
tiene a la izquierda, por eso la película se “detiene” en apariencia. El Fotograma Común no es
editable, sólo muestra contenido, no podemos hacer en ellos ningún cambio en la animación.
Prof. Perez, Adriana Página 1 de 16

Laboratorio de Diseño Web – 5° Año E.S.S. Macromedia Flash – Guía de actividades
El último fotograma tiene un cuadradito que indica que es el último de una sucesión de
fotogramas.
Una de las características de Flash es que el borde y el relleno no están pegados, son
independientes, si seleccionamos con la flecha negra el relleno (con un clic) y lo dragueamos se
separa del borde; además el relleno no es uniforme: si deseleccionamos (clic afuera) y
seleccionamos dragueando una porción del relleno, se puede separar del rectángulo original, no
es uniforme. Si arrastramos un elemento de un color sobre otro de distinto color, el elemento
que ponemos encima, cala el de abajo. Y si ponemos ahora un elemento de igual color encima
del otro, las porciones se sueldan, se unen.
La Barra de Herramientas
La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo.

Veamos cuáles son las más importantes y cómo se usan:
Herramienta Flecha: Es la herramienta más usada de todas. Su uso principal es para

seleccionar objetos. permite seleccionar los bordes de los objetos, los rellenos (con un sólo clic),
los bordes (con doble clic), zonas a nuestra elección.
Herramienta Subselección: Esta Herramienta complementa a la Herramienta Pluma, ya

que permite mover o ajustar los vértices que componen los objetos creados con dicha
herramienta.
Herramienta Línea: Permite crear líneas rectas de un modo rápido.
Herramienta Lazo: A diferencia de la Herramienta Flecha puede seleccionar cualquier

cosa, sin importar la forma, o solo seleccionar una parte. Al seleccionar esta Herramienta, en el
Panel Opciones aparecen estas imágenes: . Esto, es la Herramienta "Varita Mágica",
permite hacer selecciones según los colores de los objetos. El tercer dibujo que aparece es este:
(Modo Polígono) permite hacer selecciones poligonales.
Herramienta Pluma: Crea polígonos de un modo sencillo. Su empleo consiste en hacer
clic en los lugares que queramos definir como vértices de los polígonos, lo que nos asegura una
gran precisión. Para crear curvas, hay que señalar los puntos que la delimitan y posteriormente
trazar las tangentes a ellas.
Herramienta Texto: Crea un texto en el lugar en el que hagamos clic.
Herramienta Óvalo: La herramienta Óvalo permite trazar círculos o elipses.
Herramienta Rectángulo: Permite crear rectángulos con facilidad.
Herramienta Lápiz: Es la primera Herramienta de dibujo propiamente dicho. Permite

dibujar líneas con la forma que decidamos, modificando la forma de estas a nuestro gusto,
contamos con tres opciones: Enderezar, Suavizar y Tinta.

Herramienta Pincel: Su funcionalidad equivale a la del lápiz, pero su trazo es mucho más
grueso. Se suele emplear para aplicar rellenos. Se puede modificar su grosor y forma de trazo.
Cuenta con varias opciones como por ejemplo Pintar detrás, Pintar selección, etc.
Herramienta Transformación Libre: Permite deformar los dibujos. Cuenta con cuatro
opciones: Rotar y sesgar, Escalar, Distorsionar y Envoltura.
Herramienta Transformación de Relleno: Permite cambiar solo el relleno de un

elemento.
Herramienta Bote de Tinta: Se emplea para cambiar rápidamente el color de un trazo. Se
aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado
en el Panel Mezclador de Colores (que coincide con el subpanel Colores que hay en la Barra
de Herramientas.)
Herramienta Cubo de Pintura: Permite aplicar rellenos a los objetos que hayamos
creado. El color que aplicará esta Herramienta se puede modificar, bien desde el Panel
Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de
Herramientas.
Herramienta Cuentagotas: Su misión es "Capturar" colores para que posteriormente
podamos utilizarlos.
Herramienta Borrador: Su función es eliminar todo lo que se desea. Para poder borrar
todo lo que esta en el escenario de una vez se le hace doble clic sobre esta herramienta.
Capas
Cada capa es un nivel en el que podemos dibujar, insertar sonidos, textos... con
Independencia del resto de las capas. Hay que tener en cuenta que todas las capas comparten la
misma Línea de Tiempos y por tanto, sus distintos fotogramas se reproducirán simultáneamente.
Las capas además, tienen otras utilidades, nos permiten ordenar nuestra película de forma
lógica, y nos ayudan en la edición de dibujos (evitando que se "fundan" en uno sólo, o bloqueando
el resto de capas de modo que sólo podamos seleccionar la capa que nos interese).
La vista standard de una capa es la que muestra la imagen. Veamos para qué sirven los
distintos botones y cómo usarlos.
Para cambiar el nombre a una capa, basta con hacer doble clic en el nombre actual.
Propiedades de Capa: Si hacemos doble clic en el icono , podremos acceder a un panel con
las propiedades de la capa en la que hayamos hecho clic. Podremos modificar todas las opciones
que hemos comentado anteriormente y alguna más de menor importancia.
Mostrar / Ocultar Capas : Este botón permite ver u ocultar todas las capas de la
película. Es muy útil cuando tenemos muchas capas y sólo queremos ver una de ellas ya
que permite ocultar todas a la vez, para después mostrar sólo la actual. Para activar la vista
de una capa en concreto (o para ocultarla) basta con hacer clic en la capa correspondiente
en el punto (o en la cruz) que se encuentra bajo el icono "Mostrar / Ocultar capas"

Bloquear Capas : Bloquea la edición de todas las capas, de modo que no podremos
modificarlas hasta desbloquearlas. Bloquear una capa es muy útil cuando tenemos varios
objetos juntos y en capas distintas y queremos asegurarnos de que no modificamos "sin
querer" alguno de ellos. Tras bloquear su capa podremos trabajar con la seguridad de no
modificar dicho objeto, ni siquiera podremos seleccionarlo, de modo que editaremos con
mayor facilidad el objeto que queramos.
Mostrar/Ocultar capas como contornos : Este botón nos muestra/oculta los
contenidos de todas las capas como si sólo estuviesen formados por bordes. De este modo
y ante un conjunto numeroso de objetos, podremos distinguirlos a todos de forma fácil y
podremos ver en qué capa está cada uno de ellos.
Insertar Capas : Como su nombre indica, sirve para insertar capas en la escena actual.
Inserta capas normales.
Añadir Capa Guía : Inserta una capa de tipo guía. Y por consiguiente la capa que
queda debajo de una Capa Guía será la Capa Guiada.
Borrar Capa : Borra la capa seleccionada.
Al ver las propiedades generales de una capa o al hacer clic con el botón derecho del ratón
sobre el icono de una capa cualquiera, podemos ver que existen varios tipos de capas:
Capas normales : Son las capas por defecto de Flash y tienen todas las propiedades
descritas en los puntos anteriores. Son las más usadas y se emplean para todo, colocar
objetos, sonidos, acciones, ayudas...
Capas Guía : Son capas especiales de contenido específico. Se emplean en las
animaciones de movimiento de objetos y su único fin es marcar la trayectoria que debe
seguir dicho objeto. Debido a que su misión es representar la trayectoria de un objeto
animado, su contenido suele ser una línea (recta, curva o con cualquier forma).
Capas Guiadas: Cuando definimos una capa como capa guía, es necesario definir después
una capa guiada. Esto es, una capa que quedará afectada por la guía definida en la Capa
guía.
Capas Máscara : Estas capas se pueden ver como plantillas que tapan a las capas
enmascaradas. Basta con decir que estas capas se colocan "encima" de las capas a las que
enmascaran y sólo dejan que se vea la parte de éstas que tapan los objetos situados en las
capas máscara. Al igual que las capas guía, los objetos existentes en este tipo de capas
tampoco se ven en la película final. Sí se verán los objetos de su correspondiente capa
enmascarada a los que estén "tapando".
Capas Enmascaradas : Estas capas funcionan conjuntamente con las Capas máscaras.
Sus objetos sí que son visibles en la película final, pero sólo cuando algún objeto de la
capa Máscara está sobre ellos
Veamos el funcionamiento de estas dos ultimas capas con un ejemplo. En este ejemplo, los
rectángulos forman parte de la Capa Enmascarada y por tanto se verán en la película final (pero
sólo lo que tape la capa máscara). El óvalo está situado en la capa Máscara y no se verá en la
película, pero sólo se verá lo que él "tape". El ovalo funciona como si fuera una ventana y solo
podremos ver atrás de ella.

Si necesitamos que la mascara en lugar de ser un objeto grande como un circulo o un

recuadro, podemos utilizar una simple línea, pero como lo que actúa de ventana es el relleno de un
objeto debemos convertir la línea en un relleno, para eso vamos al menú Modificar – Formas -
Convertir líneas en rellenos.
Símbolos
Los Símbolos provienen de objetos que hemos transformado en símbolos, son incluidos en
una biblioteca en el momento en que son creados, lo que permite que sean utilizados en varias
ocasiones, ya sea en la misma o en otra película.
Para crear un símbolo seleccionamos el objeto que queramos convertir en símbolo. Abrimos el
menú Insertar – Convertir en Símbolo, o si aún no creamos el objeto podremos ir primero a
Insertar – Nuevo Símbolo y luego crear el objeto.
Luego de colocarle un nombre nos queda seleccionar el tipo de símbolo o comportamiento

en que queremos convertir nuestro objeto. Podemos elegir entre Clip de Película, Botón y Gráfico.
Los símbolos contenidos en las bibliotecas están identificados por su nombre y por un icono
que representa el tipo de símbolo que representan:
Clip Botón Gráfico
Para utilizar un símbolo de una biblioteca basta con pulsar en el nombre de dicho símbolo y
arrastrarlo a cualquier lugar del área de trabajo. A esto es lo que llamamos Instancia.
Cada Símbolo tiene su propia Línea de Tiempo, la cual podremos abrir simplemente
haciendo doble clic dentro del símbolo.
Diferencia entre símbolo e instancia:
Cuando creamos un símbolo, Flash lo almacena en una biblioteca. Pues bien, cada vez que
utilicemos ese objeto en una película, éste se convierte en una instancia.
Aunque parece que sean lo mismo, la importancia de esta distinción es que cuando utilicemos
un símbolo que hayamos creado previamente en una película, al modificarlo se modificará la
instancia, mientras que el objeto seguirá intacto, tal y como era en el momento de su creación, de
manera que podremos volverlo a utilizar en otro momento (aunque solo algunas modificaciones
afectan solamente a la instancias, algunas modificaciones afectaran también al símbolo).
Gráficos:
Los Gráficos son símbolos que nos permiten representar objetos estáticos y animaciones
sencillas.
En caso de que utilicemos un símbolo gráfico para realizar una animación, debemos tener en
cuenta que ésta estará ligada a la línea de tiempo de la película en la que se encuentre. Es decir, la
animación se reproducirá siempre y cuando la película original también se esté reproduciendo. Esto
hace que, pese a tener su propia línea de tiempo, no puedan contener sonidos, controles ni otros
símbolos gráficos. Así pues, normalmente utilizaremos los gráficos para imágenes estáticas.

Clips de Película:
Un Clip de Película o simplemente Clip, es una película en si misma, como cualquiera de las
que podamos haber creado hasta el momento en este curso, pero que está incluida dentro de otra
película y, a su vez puede contener también películas insertadas en él.
Al igual que los otros tipos de símbolos de Flash, los clips de película tienen su propia línea de
tiempo. Sin embargo esta línea temporal no está ligada a la línea de tiempo del documento que lo
contiene, de tal forma que su ejecución es independiente.
Este tipo de símbolos puede contener cualquier otro tipo de símbolo: gráfico, clip o botón, así
como cualquier objeto creado con Flash, ya que un clip es realmente una película.
Los Clips permiten crear películas de gran complejidad y multiplicar los efectos visuales, ya
que se pueden crear múltiples movimientos independientes entre sí y crear conexiones entre los
diferentes Clips de un documento.
Botones:
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. Un botón, en Flash, es igual que cualquier botón
de cualquier entorno informático, sea web o cualquier otro.
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 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.
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.
Los botones pueden contener a su vez otros símbolos, como clips o gráficos. La unión de las
posibilidades de todos los símbolos dota a los botones de gran espectacularidad.
Animaciones de Movimiento
Interpolación de Movimiento:
Permite desplazar un símbolo de un lugar a otro del escenario, siendo necesarios únicamente
dos fotogramas, lo que optimiza mucho el rendimiento de la película.
Es importante destacar que para que una Interpolación de movimiento se ejecute
correctamente aquellos objetos que intervengan deberán haber sido previamente convertidos a
símbolo.

También se debe tener cuidado al realizar una Interpolación con dos símbolos que se
encuentren en la misma capa, ya que el motor de animación los agrupará como uno sólo y el
resultado no será el esperado. Por esto es conveniente asegurarse de dos cosas:
1) Separar en distintas capas los objetos fijos y los que estarán animados.
2) Poner también en distintas capas objetos que vayan a ser animados con direcciones o
formas distintas.
Una interpolación de movimiento, como hemos dicho, es el desplazamiento de un símbolo de

uno a otro punto del escenario. El hecho de que sólo se necesiten dos fotogramas es debido a que
Flash, únicamente con la posición inicial y final, "intuye" una trayectoria en línea recta y la
representa.
Para realizar una Interpolación de Movimiento debemos una vez creados un símbolo en el fotograma
inicial, y una modificación de lugar del símbolo en el fotograma final, situados en el fotograma inicial en el
Panel Propiedades, opción Animar, elegimos Movimiento. O en la línea de tiempo con un clic derecho en
el primer fotograma seleccionar Crear Interpolación de Movimiento.
Interpolación mediante Guía de Movimiento:
Anteriormente hemos visto como las interpolaciones de movimiento desplazaban símbolos

Flash en línea recta. Puesto que esto supone una cierta limitación Flash incluye la Guía de
movimiento.
Una guía de movimiento es una capa especial que marca una trayectoria para los símbolos de
la capa a la que afecta, para que dichos símbolos la sigan, durante el movimiento. Esta capa es
invisible durante la reproducción y permite dibujar cualquier tipo de dibujo vectorial, que nos
permitirá crear un movimiento no forzosamente rectilíneo.
Para crear un movimiento con una capa guía, primero debemos crear una interpolación de
movimiento, y luego insertar una Capa Guía, luego dibujamos una trayectoria en esta capa,
volvemos a la capa ahora llamada Capa Guiada, y en el fotograma 1 hacer coincidir el Punto de
Registro del símbolo (circulo central) con una punta de la trayectoria, realizar los mismo con el
ultimo fotograma pero con la punta contraria de la trayectoria.
Animación por Forma

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 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. Sólo 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. Luego
situados en el primer fotograma en el Panel Propiedades, opción Animar, elegimos Forma.

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.
Transformar Textos
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.
Para transformar un texto debemos una vez seleccionado, ir al menú Modificar - Separar.
Esto se debe hacer 2 veces, ya que la primera vez separa el texto letra por letra, y la segunda vez
convierte el texto en Forma.
Consejos de Forma
Los consejos de forma son marcas que indican a Flash qué puntos de la imagen inicial son los
que deben corresponderse con otros tantos puntos en la figura final. Al indicar esto, estamos
controlando las formas intermedias que se generarán.
Para añadir un consejo de forma a una interpolación nos situaremos en el fotograma inicial y
vamos al menú Modificar - Forma - Añadir Pista de Forma.
Aparecerá un círculo de color con una letra dentro en el centro de la figura. Su color será rojo
mientras no sea colocado en el contorno del objeto (los extremos, si es que no hay contorno), que es
donde tiene efecto. Cuando están colocados sobre una curva (vector) que forma un contorno son
amarillos para el objeto inicial y verdes para el final.
Dicho círculo debemos colocarlo en un punto del contorno de la figura inicial.

Automáticamente aparecerá un punto con la misma letra dentro en la figura final (este punto será el
que se deba corresponder con el punto del objeto de origen) y deberemos colocarlo en el punto que
deseemos del contorno.
El primer consejo de forma está marcado con la letra "a". Si creamos más de uno serán
marcados con las letras "b", "c", "d" ... hasta la z, que es el límite (26 como máximo).
Punto Inicial Punto Final

ActionScript
ActionScript es el lenguaje de programación que ha utilizado Macromedia Flash desde sus
comienzos, y que nos permitirá realizar con Flash todo lo que nos propongamos, ya que nos da el
control absoluto de todo lo que rodea a una película Flash.
El ActionScript es, como su nombre indica, un lenguaje de script, esto quiere decir que no
hará falta crear un programa completo para conseguir resultados, normalmente la aplicación de
fragmentos de código ActionScript a los objetos existentes en nuestras películas nos permiten
alcanzar nuestros objetivos.
El ActionScript es un lenguaje de programación orientado a objetos, tiene similitudes, por

tanto, con lenguajes tales como los usados en el Microsoft Visual Basic, en el Borland Delphi etc...
y aunque, evidentemente, no tiene la potencia de un lenguaje puramente orientado a objetos
derivado del C o del Pascal como los anteriores, cada versión se acerca más a un lenguaje de este
tipo.
El Panel Acciones sirve para programar scripts con ActionScript. Esto es, que todo lo que
ingresemos en dicho Panel se verá reflejado después en nuestra película. Debemos tener claro desde
un principio que el Panel Acciones puede hacer referencia a Fotogramas u objetos, de modo que el
código ActionScript introducido afectará tan sólo a aquello a lo que referencia el Panel.
El Panel Acciones se divide en 2 partes, a la izquierda tenemos una ayuda facilitada por Flash
que nos da acceso de un modo rápido y muy cómodo a todas las acciones, objetos, propiedades
etc... que Flash tiene predefinidos. Estos elementos están divididos en carpetas, que contienen a su
vez más carpetas clasificando de un modo eficaz todo lo que Flash pone a nuestra disposición. Para
insertarlos en nuestro script bastará con un doble clic sobre el elemento elegido. En la parte derecha
tenemos el espacio para colocar nuestro script, aquí aparecerá lo que vayamos insertando. También
incluye herramientas de utilidad, como la búsqueda de palabras, la posibilidad de insertar puntos de
corte, la herramienta Revisar Sintaxis y la ayuda de Flash para ActionScript.
Publicación de documentos de Flash

Para publicar un documento de Flash, debemos seleccionar primero los formatos de archivo
de publicación y luego la configuración de los formatos de archivo por medio del menú Archivo -
Configuración de publicación. Y luego publicamos el documento de Flash mediante el comando
Publicar.
En el cuadro de diálogo Configuración de publicación, el la solapa Formatos veremos las

siguientes opciones para crear archivos:
El archivo SWF de Flash
Imágenes GIF(.gif), JPEG (.jpg), PNG (.png).
El documento HTML de soporte necesario para visualizar contenido SWF (o una
imagen alternativa) en un navegador y controlar la configuración del mismo.
Archivos de proyectores independientes para Windows y Macintosh y vídeos
QuickTime de películas Flash (archivos EXE, HQX o MOV respectivamente)
Por cada uno de los formatos que elijamos agregara una ficha la cual permitirá configurar el
archivo a publicar.

Ejercicio Nº 1
Contenidos: Interpolación Animación de Forma – Conversión de Texto a Forma
1) En el primer fotograma dibujar una imagen vectorial, por ejemplo un rectángulo.

2) Insertar un Fotograma Clave en el casillero 10.
3) Borrar la imagen vectorial y escribir un texto (puede ser solo una palabra).
4) Convertir el texto a forma.
5) Animar por forma y probar la película.
6) En el casillero 20 insertar un nuevo Fotograma Clave y borrar el texto.
7) Escribir un nuevo texto.
8) Convertir el texto a forma.
10) En el casillero 30 insertar un nuevo Fotograma Clave.
11) Cambiarle el color a cada una de las letras del texto, y cambiarlo de lugar.
13) En el casillero 40 insertar un nuevo Fotograma Clave y borrar el texto.
14) Crear una imagen vectorial.
16) Guardar el archivo .fla y exportar el .swf.
Ejercicio Nº 2
Contenidos: Capa Guía – Interpolación Animación por Movimiento
1) Dibujar una pecera utilizando la Herramienta Óvalo (sin relleno) y utilizar la Herramienta
Flecha para modificarlo.
2) Crear con la Herramienta Línea el limite de agua que contendrá la pecera.
3) Con la Herramienta Cubo de pintura pintar el relleno de la pecera (el agua), colocarle en el
Panel Mezclador de Colores Alfa al 50% (para que tenga una leve transparencia).
4) Borrar la línea creada anteriormente para el limite.
5) Insertar una segunda Capa y moverla debajo de la Capa 1.
6) En la Capa 2 dibujar con la Herramienta Óvalo (con relleno degradado) una pelotita.
7) Convertirla en Símbolo Grafico.
8) Insertar una Capa Guía (esta deberá quedar sobre la Capa 2).
9) Dibujar una Trayectoria, de forma tal que la pelotita termine dentro de la pecera, con la
Herramienta Lápiz (previamente elegir en Opciones Suavizar).
10) Insertar un Fotograma común en el casillero 15.
11) Volver a la Capa Guiada (Capa 2) y hacer que coincida el Punto de registro (circulo que se
encuentra en el medio del Símbolo) con el extremo de la trayectoria que se encuentra fuera de
la pecera.
13) Mover el Símbolo al extremo de la trayectoria que se encuentra dentro de la pecera (haciendo
coincidir el Punto de registro).
14) Animar por Movimiento.
15) En el Panel Propiedades en la opción Girar elegimos el sentido Horario o Antihorario y 30
Veces (para que la pelotita pueda rotar).
16) En la Capa 1 insertar un fotograma común en el casillero 15.
17) Probar la película.

Ejercicio Nº 3
Contenidos: Clip de Película – Animación cuadro a cuadro – Capa Guía –
Interpolación Animación por Movimiento
1) Importar la imagen “Pajarito 1”

2) Convertir la imagen en Símbolo Clip de Película.
3) Ingresar a la línea de tiempo del Clip de Película, para esto hacerle doble clic.
4) Dentro de la línea de tiempo del Símbolo, insertar un Fotograma Clave en el casillero 2.
5) Borrar la imagen.
6) Importar la imagen “Pajaro 2”
7) Volver al escenario, y probar la película.
8) Insertar una Capa Guía.
9) En la Capa Guía dibujar una trayectoria con la Herramienta Lápiz (previamente elegir en
opciones Suavizar).
10) Insertar un Fotograma Común en el casillero 40.
11) Volver a la Capa Guiada (Capa 1) y hacer que coincida el Punto de registro (círculo que se
encuentra en el medio del Símbolo) con el extremo derecho de la trayectoria.
13) Mover el Símbolo al extremo izquierdo de la trayectoria (haciendo coincidir el Punto de
registro).
14) Animar por Movimiento
15) En las Propiedades del documento colocarle color de fondo negro.
Ejercicio Nº 4
Contenidos: Interpolación Animación por Forma – Capa Mascara
1) Importar la imagen llamada “Paisaje”.

2) Insertar una nueva Capa.
3) Dibujar un círculo con relleno y sin borde que ocupe todo el escenario.
4) En el casillero 10 insertar un Fotograma Clave y disminuir el tamaño del circulo.
5) Animar por Forma.
6) Cada 10 casilleros animar el círculo para que se vaya desplazando por todo el escenario
(teniendo en cuenta que a través del relleno se podrá ver la imagen que se encuentra debajo).
Para esto usar varias animaciones de Forma.
7) En la Capa 1 insertar un Fotograma Común al final (dependiendo de la cantidad total de
fotogramas de la Capa 2).
8) Haciendo un clic con el botón derecho sobre el nombre de la Capa 2 elegir la opción
Mascara, inmediatamente la Capa 1 que se encuentra debajo pasará a ser la Capa
Enmascarada.
9) En las Propiedades del documento colocarle color de fondo negro.

Ejercicio Nº 5
Contenidos: Interpolación Animación por Forma – Capa Mascara – Conversión de
Líneas en Rellenos
1) Importar la imagen “Camioneta”.

2) Insertar un fotograma Común en el casillero 20.
3) Insertar una nueva capa.
4) Dibujar a la izquierda del escenario un rectángulo del alto de la imagen y de 10 px de ancho,
sin borde y con relleno degradado lineal con gris muy claro en el centro y blanco a los lados.
6) Mover el rectángulo a la derecha del escenario.
8) Insertar una nueva Capa, darle la propiedad de Mascara (esta capa deberá estar situada arriba
de la Capa 2, la cual inmediatamente se transformara en una Capa Enmascarada).
9) En la Capa Mascara, con la Herramienta Pluma, copiar el contorno superior de la camioneta,
(la Herramienta Pluma hace líneas que unen puntos hechos entre cada clic). Darle un grosor
de 3 px.
10) Convertir la Línea en relleno.
Ejercicio Nº 6
Contenidos: Interpolación Animación por Forma – Consejos de Forma
1) Dibujar la primera careta en el primer fotograma. Se recomienda utilizar la Herramienta Óvalo

con la Herramienta Flecha para deformarlo, y para las líneas la Herramienta Lápiz Suavizada.
3) Modificar la careta hasta obtener la segunda careta.
6) Añadir un Consejo de forma en la esquina superior izquierda de la careta como muestra la
imagen.
7) Modificar el Consejo de forma final en el fotograma 15.
9) Seguir añadiendo consejos de forma según se necesite, como por ejemplo se muestra en la
siguiente imagen.

Ejercicio Nº 7
Contenidos: Clip de Película – Capa Guía – Interpolación Animación por Movimiento

– Acciones: Control de película: Stop y Goto (GotoAndPlay) – Eventos:
OnPress – Objetos: Película: MovieClip: Métodos: GotoAndPlay
1) En la Capa 1 dibujar el siguiente paisaje o uno similar. Nombrar a esta Capa “Paisaje”.
2) Insertar una nueva Capa y nombrarla “Transporte”. En ella importar la imágen llamada
“Autobús”, tildar la opción “Importar como única imagen sin capas”.
3) Convertir la imágen en Símbolo Clip de Película, llamarlo “Auto”. Del Panel Propiedades
en el <Nombre de instancia> también escribirle el nombre “Auto”.
4) Con la Herramienta Transformación Libre, mover el Punto de Registro abajo del autobús a la
altura de las ruedas.
5) Entrar a la Línea de Tiempo del Símbolo Auto.
7) Reducir el tamaño completamente de la imágen que se encuentra en el fotograma 1.
9) Volver a la Línea de tiempo de la Escena 1.
10) Insertar una Capa Guía (deberá quedar sobre la Capa Transporte).
11) En la Capa Guía dibujar la Trayectoria que hará el autobús.
12) Insertar un fotograma Común en el casillero 35.
13) Volver a la Capa Transporte.
14) En el fotograma 1 hacer que coincida el Punto de Registro con el principio de la Trayectoria.
15) Insertar un Fotograma Clave en el casillero 35, y hacer que coincida el Punto de Registro con
el final de la Trayectoria.
17) Insertar un Fotograma Común en el casillero 35 de la Capa Paisaje.
Ahora haremos que la película no se siga repitiendo una y otra vez:

19) En la Capa Transporte insertar un fotograma Clave en el casillero 36.
20) Abrir la Ventana – Acciones. Hacer clic en “Asistente de script”. Elegir en Funciones
Globales – Control de la línea de tiempo – Stop.
21) Agregar un Fotograma Común a la Capa Paisaje y otro a la Capa Guía.
22) Probar la película. Podremos ver que el Autobús ya no se desplaza por la trayectoria pero si
que continúa cambiando de tamaño.
23) Entrar a la Línea de Tiempo del Símbolo Auto.
25) Del Panel Acciones elegir en Funciones Globales – Control de la línea de tiempo – Stop.
27) Probar la película. Ahora veremos que también dejó de cambiar de tamaño.
Necesitaremos crear un botón para poder ejecutar la película todas las veces que queramos:
28) Insertar una nueva Capa y nombrarla “Botón”.
29) Crear con la Herramienta Óvalo o Rectángulo una figura no muy grande.
30) Convertirla en Símbolo Botón, y llamarlo “Play”.
31) Entrar a la Línea de Tiempo del Símbolo Play.
32) Insertar un Fotograma Clave para cada uno de los Estados del Botón (Reposo, Sobre,
Presionado y Zona Activa) y modificar en cada uno su color, tamaño, etc.
33) Insertar una nueva Capa y escribir con la Herramienta Texto: “Play”.
34) Insertar un Fotograma Clave para cada uno de los Estados del Botón y modificar el formato.
Para que cada vez que presionemos el botón la película vuelva a empezar, tendremos que
indicar mediante las acciones que vuelva a cargar el primer fotograma de la Escena 1, pero
también que vuelva a cargar el fotograma 1 del Clip de Película Auto:
36) Seleccionar el Botón Play.
37) Del Panel Acciones elegir en Funciones Globales – Control de la línea de tiempo – Goto
(GotoAndPlay).
38) Dentro de Escena en este caso podremos elegir “escena actual” o “Escena 1”. En Tipo:
dejaremos “Numero de Fotograma” para luego en Fotograma colocar el Fotograma “1”. Y
como queremos que reproduzca nuestra Escena dejaremos tildado Ir a y reproducir.
39) Situarse en la línea de código anterior: on (release), en Evento: destildar Liberar, y tildar
Presionar, y cambiará por on (press).
40) Situados dentro de la línea de código on (press) elegir del Panel Acciones: Clases de Action
Script 2.0: Película: MovieClip: Métodos: GotoAndPlay.
41) En Objeto elegiremos el objeto que queremos que ejecute, en este caso será el “Auto” (el cual
es un Clip de Película) y en Parámetros elegimos el Fotograma al cual queremos que vaya en
este caso será el Fotograma “1”.
42) El código del botón quedaría:

Ejercicio Nº 8
Contenidos: Clip de Película – Capa Guía – Animación por Movimiento – Acciones:
Control de película: Stop, Play, Goto (GotoAndPlay) – Eventos:
OnPress
1) En la Capa 1 dibujar el siguiente dibujo o uno similar pero que contenga un camino que luego
se divide en dos caminos. Nombrar a esta Capa “Paisaje”.

3) Insertar una nueva Capa y nombrarla “Abajo”.
4) Importar la imagen “Carreta”.
5) Convertir la imágen en Símbolo Clip de Película, llamarlo “Clipcarreta”, y colocar el Punto
de Registro en el Inferior central.
6) Entrar a la Línea de Tiempo del Símbolo Clipcarreta.
7) Insertar una nueva Capa e importar en ella la imagen llamada “Rueda”. Acomodarla en el
hueco de la carreta.
9) Animar por Movimiento, elegir Girar Antihorario y 10 veces.
10) Insertar un Fotograma Común en el casillero 15 de la Capa 1.
11) Volver a la Línea de Tiempo de la Escena 1.
12) En la Capa Abajo insertar un Fotograma Clave en el casillero 30.
13) Insertar una Capa Guía (deberá quedar sobre la Capa Abajo).
14) Dibujar una Trayectoria que no sea recta y que vaya recorriendo el camino de abajo.
15) Volver a la capa Abajo y Animar por Movimiento.
16) Agregar una nueva capa llamada “Arriba”.
18) Del Panel Biblioteca draguear (arrastrar) una instancia del símbolo Clipcarreta.
20) Insertar una Capa Guía (deberá quedar sobre la Capa Arriba).
21) Dibujar una Trayectoria que no sea recta y que vaya recorriendo el camino de arriba.
22) Volver a la capa Arriba y Animar por Movimiento.
23) Probar la película. Hasta ahora la película alterna las secuencias abajo y arriba, y las repite.
Necesitaremos crear botones para controlar la animación:
24) Insertar una nueva Capa y llamarla “Botones”.

25) Crear con la Herramienta Óvalo o Rectángulo una figura en un lugar del escenario que no
pase ninguno de los dos caminos.
26) Convertirla en Símbolo Botón, y llamarlo “Detener”.
27) Entrar a la Línea de Tiempo del Símbolo Detener.
28) Insertar un Fotograma Clave para cada uno de los Estados del Botón (Reposo, Sobre,
Presionado y Zona Activa) y modificar en cada uno su color, tamaño, etc.

29) Insertar una nueva Capa y escribir con la Herramienta Texto: “Detener”.
30) Insertar un Fotograma Clave para cada uno de los Estados del Botón y modificar el formato
del texto.
32) Seleccionar el Botón Detener.
34) Situarse en la línea de código anterior: on (release), y en Eventos: destildar Liberar, y tildar
36) Desde el Panel Biblioteca seleccionamos el botón Stop y del menú contextual elegimos
duplicar. Escribirle de nombre “Play”.
37) Del Panel Biblioteca draguear la instancia del botón Play al Escenario.
38) Ingresar a la Línea de Tiempo del Botón Play para editar el texto.
40) Seleccionar el Botón Play.
41) Del Panel Acciones elegir en Funciones Globales – Control de la línea de tiempo – Play.
44) Ahora haremos un botón para que la carreta tome sólo por el camino de abajo. Duplicar un
botón, nombrarlo “Abajo”, draguearlo al escenario y editar el texto.
(GotoAndPlay).
48) Ahora haremos un botón para que la carreta tome sólo por el camino de arriba. Duplicar un
botón, nombrarlo “Arriba”, draguearlo al escenario y editar el texto.
(GotoAndPlay), pero como queremos que tome el camino de arriba tendremos que colocar en
que fotograma empieza el camino de arriba, es decir en Fotograma escribimos “31”.
Hasta aquí la película comienza sola y se repite (salvo que apretemos el botón “parar”). Para
controlar esto colocares acciones a los fotogramas:
52) Insertar una nueva Capa llamarla “Acciones”

Ahora no se requiere que pongamos ningún parámetro, ya que la acción Stop se ejecutará
cuando el cabezal pase por el fotograma al cual se la aplicamos. No depende de ningún evento que
realice el usuario.
Para aplicar una acción a un fotograma, éste debe ser clave, y veremos en el casillero, una vez
aplicada la acción, una “a” minúscula.
56) Probemos la Película, podremos ver que la película no comienza hasta que no apretemos el
botón “Play”, “Abajo” o “Arriba”.

Modulo y Actividades Flash

Cargado por

Copyright:

Formatos disponibles

Modulo y Actividades Flash

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Modulo y Actividades Flash

Cargado por

Copyright:

Formatos disponibles

Laboratorio de Diseño Web – 5° Año E.S.S.

Macromedia Flash – Guía de actividades

Programa creador de animaciones: “Macromedia Flash MX”

Algunos elementos muy importantes son:

Regla indicadora de fotogramas

Fotograma Clave Vacío

Cuando agregamos un Fotograma Clave, automáticamente copia el último Fotograma Clave de

Prof. Perez, Adriana Página 1 de 16

La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo.

Herramienta Flecha: Es la herramienta más usada de todas. Su uso principal es para

Herramienta Subselección: Esta Herramienta complementa a la Herramienta Pluma, ya

Herramienta Lazo: A diferencia de la Herramienta Flecha puede seleccionar cualquier

Herramienta Óvalo: La herramienta Óvalo permite trazar círculos o elipses.

Herramienta Rectángulo: Permite crear rectángulos con facilidad.

Herramienta Lápiz: Es la primera Herramienta de dibujo propiamente dicho. Permite

Prof. Perez, Adriana Página 2 de 16

Herramienta Transformación de Relleno: Permite cambiar solo el relleno de un

Prof. Perez, Adriana Página 3 de 16

Prof. Perez, Adriana Página 4 de 16

Si necesitamos que la mascara en lugar de ser un objeto grande como un circulo o un

Luego de colocarle un nombre nos queda seleccionar el tipo de símbolo o comportamiento

Diferencia entre símbolo e instancia:

Prof. Perez, Adriana Página 5 de 16

Prof. Perez, Adriana Página 6 de 16

Una interpolación de movimiento, como hemos dicho, es el desplazamiento de un símbolo de

Interpolación mediante Guía de Movimiento:

Anteriormente hemos visto como las interpolaciones de movimiento desplazaban símbolos

Animación por Forma

Cuando lo que queramos no sea cambiar la posición de un objeto en el escenario, sino su

Prof. Perez, Adriana Página 7 de 16

Debemos tener también dos aspectos en cuenta:

Dicho círculo debemos colocarlo en un punto del contorno de la figura inicial.

Punto Inicial Punto Final

Prof. Perez, Adriana Página 8 de 16

El ActionScript es un lenguaje de programación orientado a objetos, tiene similitudes, por

Publicación de documentos de Flash

En el cuadro de diálogo Configuración de publicación, el la solapa Formatos veremos las

Prof. Perez, Adriana Página 9 de 16

1) En el primer fotograma dibujar una imagen vectorial, por ejemplo un rectángulo.

Prof. Perez, Adriana Página 10 de 16

1) Importar la imagen “Pajarito 1”

1) Importar la imagen llamada “Paisaje”.

Prof. Perez, Adriana Página 11 de 16

1) Importar la imagen “Camioneta”.

1) Dibujar la primera careta en el primer fotograma. Se recomienda utilizar la Herramienta Óvalo

10) Probar la película.

Contenidos: Clip de Película – Capa Guía – Interpolación Animación por Movimiento

Ahora haremos que la película no se siga repitiendo una y otra vez:

42) El código del botón quedaría:

43) Insertar un Fotograma Común en el casillero 36.

2) Insertar un Fotograma Común en el casillero 61.

Necesitaremos crear botones para controlar la animación:

24) Insertar una nueva Capa y llamarla “Botones”.

Prof. Perez, Adriana Página 15 de 16

52) Insertar una nueva Capa llamarla “Acciones”

Prof. Perez, Adriana Página 16 de 16

También podría gustarte