SISTEMAS APLICATIVOS

Alumna : Córdova Liñan Stany

Ciclo : IV Noche

Especialidad : Computación e Informática

Año : 2007

Docente : Ing. Fabián Guerrero Medina

Flash - Animación

• Por animación entendermos que los objetos que aparecen en la pantalla cambien de posición, tamaño, aspecto, color, que giren, se deformen, etc...

• Tipos de Animación• En Flash existen tres tipos de animación:• fotograma a fotograma • interpolación de movimiento • interpolación de forma

Flash - Animación

Tipos de Animación

• fotograma a fotograma, debemos dibujar cada uno de los fotogramas de la animación uno por uno, al estilo de las clásicas películas de dibujos animados. Permite una gran flexibilidad, pero a costa de un elevado esfuerzo. Además, el archivo debe almacenar los cambios de cada fotograma.

fotograma a fotograma

Tipos de Animación

• animación por interpolación consiste en crear dos objetos diferentes, cada uno de ellos en fotogramas claves no contiguos, y hacer que Flash dibuje automáticamente los pasos intermedios. En este caso, el archivo sólo almacena los estados inicial y final.

Tipos de Animación

• La animación por interpolación de movimiento es que la debemos elegir cuando los objetos de los dos fotogramas claves sólo se diferencian en su posición, escala o rotación

Tipos de Animación

• La animación por interpolación de forma ese diferencia en que gradúa el cambio de la forma del objeto, realizada a través de la manipulación de sus puntos de control bezier. También permite cambiar el color.

Consideraciones

• Cómo Crear Animaciones• Para crear una interpolación de movimiento, el mejor

método es seguir exactamente los siguientes pasos:• Crear el objeto en el fotograma clave inicial • Crear interpolación de movimiento (con el botón

derecho) • Insertar un fotograma clave al final • Mover el objeto en el fotograma clave final (y/o

escalarlo, y/o rotarlo) • Si todo ha salido bien, se verá así: • En cambio, si falta el fotograma clave final, será así: • Y si lo que falta es crear la interpolación, veremos:

Posibles problemas en las animaciones por interpolación:

• No podemos cambiar el color de un texto gradualmente si no está convertido a gráfico. ("Modificar-Separar")

• Si dos objetos van a animarse de formas diferentes, es mejor colocar cada uno en una capa diferente.

• Si queremos hacer una interpolación de forma y movimiento a la vez, debemos elegir la de forma.

Posibles problemas en las animaciones por interpolación

• En la capa guía, crear un trazado (con el pincel, la pluma, el lápiz, el óvalo e el rectángulo)

• Insertar un fotograma clave en la capa guía, al final • Arrastrar el objeto en cada fotograma clave hasta que

ajuste con el comienzo o fin del movimiento trazado. • Si deseamos que la forma gire a la vez que el trazado,

debemos elegir "Orientar según trazado" en la paleta fotograma, en el fotograma inicial.

• Podemos ocultar el trazado de guía ocultando la capa que lo contiene (botón del ojo)

Cómo cambiar el color de un texto gradualmente:

• Veamos cómo hacer el famoso efecto de "fade in" o "fade out" (desvanecimiento)

• de un texto, que cambiará de color poco a poco, del color de fondo a otro, o de otro al color del fondo (o entre dos colores cualesquiera)

• Crear el objeto en el fotograma clave inicial, con el color inicial

• Separar el texto ("Modificar-Separar") • Crear interpolación de forma (en la paleta "Fotograma",

elegir interpolación: "Forma") • Insertar un fotograma clave al final • Cambiar el color del objeto en el fotograma final

¿Cómo hacer un giro de 360º o más?

Creación de una guía de movimiento

• Esta trayectoria ha de ser definida en una capa especial llamada guía de movimiento. La guía de movimiento no es más que una capa que contiene una línea sobre la cual podemos colocar nuestros objetos de manera a que dicho objeto se mueva de una posición a otra respectando la trayectoria definida por esta línea.

Creación de una guía de movimiento

• En nuestro caso, dado que lo que buscamos es una trayectoria cíclica, para no confundir al objeto definiremos dos líneas distintas, correspondientes a cada media vuelta. Si no tomásemos esta precaución, el objeto tendría dos posibles sentidos para llegar a una misma posición. Pasemos pues a definir estas líneas:

Creación de una guía de movimiento

• Creamos la guía de movimiento. Para ello, seleccionamos la capa 1 (o donde hayamos creado nuestras imágenes clave) y hacemos Insertar>guía de movimiento. Constatamos la aparición de una nueva capa llamada Guía

Creación de una guía de movimiento

• Seleccionamos el primer fotograma de esta nueva capa y dibujamos una elipse sin relleno. Podemos servirnos de la herramienta óvalo utilizada para la creación de la esfera, pero esta vez no elegimos ningún color en la paleta de relleno (la ausencia de color viene simbolizada por un cuadro blanco barrado en diagonal por una banda roja).

Creación de una guía de movimiento

• Con la herramienta lazo, seleccionamos la mitad (izquierda o derecha, como prefieras) y la cortamos (Edición>cortar). El resultado es la obtención de una semielipse .

Creación de una guía de movimiento

• Nos colocamos en el fotograma 15 de esta misma capa y lo convertimos en un fotograma clave vacío (Insertar>fotograma clave vacío)

• Pegamos la otra media elipse, que se quedará descolocada con respecto a la otra. Para ajustar las semielipses podemos por supuesto hacerlo a ojo pivotando entre el fotograma 14 y el 15 hasta que las dos se solapen correctamente. Sin embargo, una opción más interesante es la de usar le edición simultanea de varios fotogramas. Esta opción, disponible en la línea de tiempo (ver figura), nos permite la visualización y edición simultanea de varios fotogramas. De este modo, podemos seleccionar una de las semielipses y moverla por medio de los cursores hasta hacerla coincidir con la otra media. Deseleccionaremos este modo una vez finalizada la operación.

Explicación paso a paso sobre la creación de botones en el

programa Flash. • Flash, nos permite crear botones personalizados, de

manera muy rápida; a la vez nos ayuda a darle mas vida a nuestras páginas web; en pocas palabras, nos ayuda a hacer más atractivo nuestro sitio y lógicamente eso es lo que queremos para aumentar el número de visitas a nuestro website.

Por medio de lenguajes de programación (por ejemplo Javascript), también podríamos crear botones, pero sería un poco más complicado; además no podríamos crear exactamente los mismos efectos que podemos hacer con Flash.

Explicación paso a paso sobre la creación de botones en el

programa Flash. •

1- Primero crearemos un nuevo símbolo, haciendo la siguiente combinación de teclas: ALT+F8.

Aparecerá el siguiente cuadro:

Explicación paso a paso sobre la creación de botones en el

programa Flash. • 2- En Nombre (Name), escribe "botón 1", en

Comportamiento (Behavior) selecciona la opción Botón (Button), finalmente haz click en Aceptar (OK).

Automáticamente, seremos enviado desde la Escena 1 al escenario del símbolo "botón 1"; ahí es donde crearemos un botón que será incluido en nuestra biblioteca.

El escenario únicamente para la creación de botones, será parecido a la siguiente imagen:

Explicación paso a paso sobre la creación de botones en el programa

Flash.

Explicación paso a paso sobre la creación de botones en el programa

Flash.

Explicación paso a paso sobre la creación de botones en el programa

Flash.• Mira hacia la línea del tiempo (Timeline),

como puedes notarlo es diferente a la línea del tiempo de la Escena 1.

La línea del tiempo, del escenario para crear botones es parecida a la siguiente imagen:

Gracias

• 2007