act 5 flash 8

Sistema de Gestión de la Calidad REGIONAL META

INSTITUCION EDUCATIVA CAPITAN MIGUEL LARATECNOLOGÍAS DE LA INFORMACIÓN Y DISEÑO Y DESARROLLO DE

SOFTWARE

Fecha: Abril 17 de 2012Versión: 5

Página 1 de 26

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.



SOFTWARE


Página 2 de 26

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.

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



SOFTWARE


Página 3 de 26

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 color de borde y colocar como color de relleno #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.



SOFTWARE


Página 4 de 26

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.



SOFTWARE


Página 5 de 26

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.

INTERPOLACIÓN DE MOVIMIENTO



SOFTWARE


Página 6 de 26

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 color alfa.

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.0 pí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.

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.



SOFTWARE


Página 7 de 26

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

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



SOFTWARE


Página 8 de 26

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.

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.



SOFTWARE


Página 9 de 26

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.

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.



SOFTWARE


Página 10 de 26

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.



SOFTWARE


Página 11 de 26

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 cuatro frames, sin embargo, en esta ocasión solamente se utilizan tres de los cuatro frames estos son; Reposo, Sobre y Presionado.

En el primer fotograma Reposo, 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.



SOFTWARE


Página 12 de 26

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.



SOFTWARE


Página 13 de 26

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.



SOFTWARE


Página 14 de 26

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.



SOFTWARE


Página 15 de 26

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 Coordenadas X: 6.6 y Y: 0.2.



SOFTWARE


Página 16 de 26

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



SOFTWARE


Página 17 de 26

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ímbolo imagen 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.



SOFTWARE


Página 18 de 26

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ímbolo imagen hacia el Clip de película, color la imagen en coordenadas X: 0.0 y Y: 0.0.



SOFTWARE


Página 19 de 26

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



SOFTWARE


Página 20 de 26

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.



SOFTWARE


Página 21 de 26

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.



SOFTWARE


Página 22 de 26

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.



SOFTWARE


Página 23 de 26

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.



SOFTWARE


Página 24 de 26

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.



SOFTWARE


Página 25 de 26

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.



SOFTWARE


Página 26 de 26

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

Documents