Act 5 flash 8

REGIONAL META Fecha: Abril 17 de 2012
INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 5
TECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE
Sistema de Gestión SOFTWARE Página 1de 26
de la Calidad

EDICIÓN DE CAPAS

Cuando se trabaja con múltiples Capas es muy frecuente que puedas batallar para encontrar las formas que están
dispuestas en una u otra Capa, por ello se te aconseja que cambies de nombre a cada una de las Capas y así
puedas ubicar cada uno de las formas vectoriales con una mayor facilidad.

En el ejemplo anterior se trabajo con 5 Capas, pero no sabes con exactitud en donde se encuentra cada una
de las formas. La solución a este conflicto es hacer doble clic sobre el nombre de la Capa y después
cambiárselo por uno que describa el contenido de la Capa. Por ejemplo en la Capa 1 del trabajo anterior esta
dibujado la base de la carita feliz, sustituir el nombre de Capa 1 por el de fondo amarrillo. En la Capa 2
esta dibujada la línea de la boca, sustituir el nombre de Capa 2 por el de boca. Cambiar el nombre de la
Capa 3 por el de fondo de ojos, el de la Capa 4 por el de ojo izquierdo y cambiar el nombre de la Capa 5
por de ojo derecho.

APLICACIÓN DE SÍMBOLOS E INCORPORACIÓN DE PANELES

Cuando se trabaja con animaciones un poco más elaboradas forzosamente tienes que incorporar los diferentes
símbolos de Flash (Clip de película , Botón y Gráfico) así como también diferentes paneles de herramientas
con los cuales te ayudaras para la realización de las animaciones, los paneles más utilizados son: Panel de
Propiedades del Documento (ctrl. + J), Panel de Biblioteca (ctrl. + L o F11), Panel de Mezclador de
Colores (shift + F9), Panel de Transformar (ctrl. + T). Estos símbolos y paneles ya fueron descritos con
anterioridad y ahora solamente te enfocaras en su aplicación.

Creación de símbolos de Tipo Clip de película

Cuando se diseña una animación en la que se involucre la participación de varias capas, es más recomendable
hacer las animaciones en diferentes símbolos y después solamente colocar cada uno de los símbolos en la
Escena para la visualización en aun archivo SWF.

La animación que a continuación se te presenta esta realizada en un documento de Propiedades ctrl. + J,
dimensiones del documento 250 * 250 píxeles, color de fondo #FFFFFF y velocidad de fotogramas 12
fps.

de la Calidad

En el siguiente ejemplo trabajaras con animaciones de interpolación de movimiento en clips de película.
En esta animación estarán involucrados parámetros tales como: movimiento girar, número de giros,
color alfa, color tinta.
Para crear un símbolo tienes tres opciones la primera es, seguir la siguiente ruta Insertar >> Nuevo
símbolo, la segunda es mediante el Panel de Biblioteca haciendo clic en el icono correspondiente y la
tercera es presionando en el teclado ctrl. + F8.

de la Calidad

Cuando aparece el panel de Crear un nuevo símbolo, cambiar las propiedades, colocar un nombre que
describa la acción que se estará llevando acabo en el símbolo. Luego seleccionar el Tipo de símbolo con
el cual se va a trabajar. En este caso colocar como nombre cuadrado girando y seleccionar la opción
Clip de película.

Una vez que te encuentres ubicado en el símbolo, dibujar un cuadrado (R) de dimensiones 200.0
*200.0, colocar el cuadrado en coordenadas X: 0.0 y Y: 0.0, no usar colordeborde y colocar como
colorderelleno#00FF00. Así comenzaras a crear una animación de Interpolación de movimiento.

Luego seleccionar el frame número 20 e insertar un fotograma clave F6, una vez que el fotograma clave
haya sido insertado seleccionar un punto entre el fotograma número 1 y el fotograma número 19 y
hacer clic sobre este fotograma con el botón derecho del ratón, en el menú emergente seleccionar la
opción Interpolación de movimiento.

de la Calidad

Seleccionar la forma vectorial del fotograma número 20 y hacer visible el Panel de Transformar ctrl.
+ T, seleccionar la casilla de Restringir, reajustar el porcentaje en alguna de las casillas Anchura o
Altura al 10.0 %. Así el tamaño del cuadrado se vera reducido.

Ahora seleccionar el cuadro reducido del fotograma número 20, en el Panel de Propiedades seleccionar
la opción de Color: Alfa y reducir el Porcentaje de 100% a 0%. Con esta modificación la animación
del cuadrado se disminuirá de tamaño y al mismo tiempo se estará desvaneciendo.

de la Calidad

Hacer una variante más a la animación, seleccionar el cuadrado del fotograma número 1, y en el Panel
de Propiedades seleccionar la casilla de Giro: Horario.

de la Calidad

INTERPOLACIÓN DE MOVIMIENTO

Practicar otro ejemplo de animación que esté contenida en la misma película FLA. En esta animación queda
establecida una interpolación de movimiento de zoom, en la animación también se involucra el cambio de
coloralfa.

Primero debes crear un nuevo símbolo ctrl. + F8, nombrar al símbolo óvalo girando y seleccionar la
opción de Clip de película.

En este símbolo hacer una animación de un Óvalo (O), de dimensiones 40.0 * 70.0píxeles de ancho y
alto, colocarlo en coordenadas X: 0.0 y Y: 0.0, no usar color de borde y colocar como color de relleno
#00FFFF.

de la Calidad

Seleccionar el frame número 20 e insertar un fotograma clave F6, después seleccionar un punto entre el
fotograma número 1 y el fotograma número 19 y hacer clic sobre este fotograma con el botón derecho
del ratón, en el menú emergente seleccionar la opción Interpolación de movimiento.

Seleccionar la forma vectorial del fotograma número 1 y en el Panel de Transformar ctrl. + T,
seleccionar la casilla de Restringir, reajustar el porcentaje en alguna de las casillas Anchura o Altura
al 10.0 %.

de la Calidad

Ahora seleccionar la forma vectorial del fotograma número 1, en el Panel de Propiedades seleccionar la
opción de Color: Alfa y reducir el Porcentaje de 100% a 0%.

Para hacer la variante de movimiento en esta animación, seleccionar el fotograma número 1, y en el
Panel de Propiedades seleccionar la casilla de Giro: AntiHorario y en la casilla de Número de
rotaciones escribir el número 4 veces.

de la Calidad

Para conseguir que el óvalo cambie de su color original #00FFFF a otro cualquiera, simplemente
seleccionar el óvalo del fotograma número 20 y en el Panel de Propiedades seleccionar la opción
Color: Tinta luego seleccionar un color diferente.

Regresar a la Escena, hacer visible el Panel de la Biblioteca ctrl. + L y luego arrastrar desde esta el
símbolo cuadrado girando y colocarlo en coordenadas X: 25.0 y Y: 25.0.

de la Calidad

Ahora arrastrar el símbolo óvalo girando hacia la Escena y colocarlo en coordenadas X: 144.4 y Y:
140.4. Cuando se hace una animación de interpolación de movimiento automáticamente se crean
símbolos del Tipo Gráfico no borrar estos símbolos porque la animación se perderá irremediablemente.
Presionar ctrl. + Enter y observar la animación que se ha creado.

CREACIÓN DE SÍMBOLOS DE TIPO BOTÓN

Los símbolos del Tipo Botón son de mucha importancia en las animaciones Flash, con estos botones se puede
controlar las animaciones a lo largo de la Línea de tiempo, también puedes enlazar los botones a ubicaciones
web, o controlar una pagina web 100 % Flash. En este punto solamente te enfocare en conocer la Línea de
tiempo del símbolo Botón, así también se trabajara en el diseño básico de un botón de tres estados Reposo,
Sobre y Presionado.

El símbolo de Tipo Botón se crea igual que el símbolo Clip de película y símbolo Tipo Gráfico, esto es
siguiendo la ruta Insertar >> Nuevo símbolo o presionando en el teclado ctrl. + F8 o haciendo clic en
el icono que corresponde para crear un nuevo símbolo en el Panel de Biblioteca.

de la Calidad

Luego de haber seguido uno de estos métodos en el Panel de Crear un nuevo símbolo colocar un
Nombre que describa al símbolo, después simplemente seleccionar en la opción Tipo Botón. En este
caso nombrar al símbolo botón redondo y en la opción Tipo seleccionar Botón.

Al Aceptar el paso anterior te colocara en el símbolo de Tipo Botón. La Línea de tiempo de este
símbolo difiere en comparación a la del símbolo Clip de película y Gráfico.
La Línea de tiempo del símbolo Botón cuanta con cuatroframes, sin embargo, en esta ocasión
solamente se utilizan tres de los cuatro frames estos son; Reposo, Sobre y Presionado.
En el primer fotogramaReposo, indica que el botón permanecerá en una sola posición y solamente
tendrá la propiedad de ser botón en el archivo SWF.
El fotograma de Sobre indica que cuando se pasa el cursor sobre el botón este cambiara de posición o
color según haya sido diseñado.
Y el estado de Presionado te indica que cuando presiones el botón este cambiara también de color o de
posición. Estas tres acciones solo son visualizadas cuando el símbolo botón es puesto en la Escena y es
publicado en un archivo SWF.

de la Calidad

A continuación se diseñara un botón con borde redondeado en el símbolo que ya creaste. Presionar la
herramienta rectángulo (R), luego seleccionar la herramienta de establecer Radio de esquina en el
Panel emergente de Configuración de rectángulo escribir 10 como Radio de esquina.

Una vez que se estableció el Radio de esquina, colocar las propiedades al rectángulo de color. Hacer
visible el Panel de Mezclador de colores shift + F9, anular el color de borde, seleccionar como color
de relleno un estilo degradado de Tipo Lineal, los colores a usar son #FFFFFF y #000000.

de la Calidad

Dibujar un rectángulo de dimensiones 100.0 * 20.0 píxeles de ancho y alto y colocarlo en coordenadas
X: 0.0 y Y: 0.0.

Insertar un fotograma clave F6 en el segundo Estado de la línea de tiempo (Sobre), seleccionar la forma
vectorial de este fotograma y con el Panel de Mezclador de clores aun visible cambiar el Estilo de
relleno a Tipo Radial, los colores seguirán siendo #FFFFFF y #000000.

de la Calidad

Insertar el tercer fotograma clave F6 en el fotograma Presionado, seleccionar la forma vectorial de este
fotograma y con ayuda del Panel de Mezclador cambiar nuevamente el Estilo de relleno a Tipo Lineal.

de la Calidad

Insertar una segunda capa en la cual se colocara un Campo de texto estático (T) con la palabra botón
prueba, tipo de fuente Arial, tamaño de fuente 14 y color de fuente #FFFFFF, mover este texto a
CoordenadasX: 6.6 y Y: 0.2.

de la Calidad

Regresar a la Escena y arrastrar desde el Panel de Bibliotecactrl. + L el símbolo botón redondo,
presionar ctrl. + Enter y ver como trabaja el botón de tres estados.

de la Calidad

ANIMACIÓN CON IMANES IMPORTADAS

En este ejemplo se trabajara en la animación de una imagen con color Alfa para simular el
desvanecimiento de imagen.
La animación estará insertada en un documento con las siguientes Propiedades ctrl. J, dimensiones del
documento 300 * 300 píxeles de ancho y alto, color de fondo #FFFFFF y velocidad de fotogramas 15
fps

La animación no se trabajara con Interpolación de movimiento porque este tipo de interpolación
genera automáticamente dos símbolos de Tipo Gráfico y hace un poco pesado el archivo FLA, mejor se
trabajara con una animación de Movimiento en el Panel de Propiedades. Esta animación será descrita a
continuación. Primero crear un símbolo ctrl. + F8 llamarlo imagen seleccionar la opción de Tipo
Gráfico.

Ubicado en el símbolo presionar ctrl. + R en el menú emergente de Importar navegar hasta la carpeta de
la imagen. Cuando la imagen haya sido insertada en el símboloimagen clocarla en coordenadas X: 0.0
y Y: 0.0. Importar una imagen que tenga de dimensiones 300.0 * 300.0 píxeles de ancho y alto.

de la Calidad

Ahora crear un nuevo símbolo ctrl. F8 y nombrarlo animación de imagen, en la opción Tipo
seleccionar la opción de Clip de película.

Una vez que te encuentres en el símbolo de Clip de película hacer visible el Panel de Biblioteca ctrl. +
L y arrastrar desde esta el símboloimagen hacia el Clip de película, color la imagen en coordenadas X:
0.0 y Y: 0.0.

de la Calidad

Seleccionar el frame número 25 e insertar un fotograma clave F6. Seleccionar la imagen de este
fotograma y en el Panel de Propiedades seleccionar la opción Color Alfa y después reducir el
porcentaje de 100% a 0%.

de la Calidad

Seleccionar un fotograma entre el número 1 y el número 24, en el Panel de Propiedades seleccionar la
opción Animar Movimiento, y de esta forma quedara insertada la animación.

Regresar a la Escena y arrastrar desde la Biblioteca ctrl. + L el símbolo animación de imagen, colocar
el símbolo en coordenadas X: 0.0 y Y: 0.0. Presionar ctrl. + Enter y visualizar el trabajo realizado.

de la Calidad

Como veras la animación tiene un pequeño salto, para solucionar este problema regresar al símbolo
animación de imagen y colocar un fotograma clave F6 en el frame número 50, seleccionar la imanen de
este fotograma en el Panel de Propiedades seleccionar Color Ninguno.

Seleccionar un fotograma entre el número 25 y el número 49, en el Panel de Propiedades seleccionar la
opción Animar Movimiento, y de esta forma quedara insertada una animación más.
Volver a presionar ctrl. + Enter y notaras una significativa diferencia en la animación.

de la Calidad

ANIMACIÓN DE FORMAS VECTORIALES EN SÍMBOLOS (NO INTERPOLACIÓN
DE MOVIMIENTO)

No siempre animar formas vectoriales con Interpolación de movimiento es la técnica más apropiada, la
primera de las razones es porque tienes que trabajar con dos símbolos de Tipo Gráfico por cada animación que
se realiza, y a estas animaciones solamente se puede trabajar con el cambio de color en cualquiera de sus
modalidades. Por otro lado cuando quieres hacer una animación en la que se involucre una deformación y al
mismo tiempo un cambio de color de una forma vectorial es imposible hacerla con una animación de
Interpolación de movimiento, para este tipo de animaciones se utiliza una Animación de Forma en el Panel
de Propiedades.

A continuación se te guiara paso a paso hasta llegar a conseguir una animación en la se involucre el cambio
de color, la deformación de la forma vectorial y después hacer que la forma vectorial se traslade de un lugar
a otro.
Crear un documento de Propiedades ctrl. + J, dimensiones 500 * 200 píxeles de ancho y alto, color de
fondo #CCFFFF y velocidad de fotogramas 15 fps.

Luego de que hayas colocado las propiedades del documento, crear un símbolo ctrl. + F8, nombrarlo
animación de forma, en la opción de Tipo seleccionar Clip de película.

de la Calidad

Ubicado en el símbolo dibujar un Óvalo (O) que no tenga borde y usar como color de relleno #000066
las dimensiones 98.0 * 198.0 píxeles de ancho y alto, colocar la forma dibujada en coordenadas X: 0.0
y Y: 0.0.

Insertar un fotograma clave F6 en el frame número 25. seleccionar el óvalo de este nuevo fotograma y
cambiar el color de relleno a #FF0000.

de la Calidad

Seleccionar un fotograma entre el número 1 y el número 24. En el Panel de Propiedades seleccionar la
opción de Animar: Forma.

Regresar a la Escena y arrastrar desde el Panel de Biblioteca ctrl. + L el símbolo animación de forma,
después colocar el símbolo en coordenadas X: 0.0 y Y: 0.0. Presionar ctrl. + Enter y observar como
cambia de color gradualmente el óvalo.

de la Calidad

Regresar al símbolo animación de forma asiendo doble clic sobre el icono que representa al símbolo en
el Panel de la Biblioteca.

Nuevamente ubicado en el símbolo animación de forma, seleccionar la forma vectorial del fotograma
número 25, tomar por uno de los extremos a la forma y deformarla un poco. Las coordenadas cambiaran
al deformar el óvalo, si deseas puedes colocar nuevamente la forma vectorial en coordenadas X: 0.0 y Y:
0.0. Presionar una vez más ctrl. + Enter y ahora se observara que el óvalo cambia de color y al mismo
tiempo este se va deformado en otra cosa.

de la Calidad

Para concluir con este objetivo regresar otra vez al símbolo animación de forma luego seleccionar el la
forma vectorial del fotograma número 25 y cambiarla de coordenadas en el eje X, la nueva
coordenada será X: 500.0. Con esta coordenada te aseguraras que la animación se trasladara hasta a
fuera del Escenario.
Presionar ctrl. + Enter y ver como queda la animación final en la cual están incluidas tres tipos de
animaciones.

Act 5 flash 8

Más contenido relacionado

Similar a Act 5 flash 8

Más de Cristian Buitrago

Act 5 flash 8