BOTONES ANIMADOS

La infinidad de elementos que podamos diseñar es ilimitada, todo depende de la dedicación y creatividad, en esta oportunidad vamos a construir un botón animado utilizando símbolo gráfico y clip de película, recordemos que un botón tiene su propia linea de tiempo y esta conformado por 4 fotogramas que corresponden a estados: reposo, sobre, presionado y zona activa.

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.

Parece que la limitación de fotogramas podría implicar una limitación en la capacidad de espectacularidad y utilidad de estos símbolos, pero no es así. Ten en cuenta que podemos tener todas las capas que queramos.

Los botones pueden contener a su vez otros símbolos, como clips o gráficos (también de tipo Bitmap). La unión de las posibilidades de todos los símbolos pueden dotar a los botones de efectos asombrosos.

Todo esto es lo referente a la apariencia del botón. Después, tenemos que programar lo que queremos que haga el botón, cómo queremos que afecte a la película. Y esto lo haremos con ActionScript.

ACTIVIDADES

1. Realiza un resumen en tu cuaderno de esta publicación.

2. Observa el vídeo con atención y realiza los ejercicios allí planteados.

https://www.youtube.com/watch?v=2nBGCLueOFk

3. construye con mucha creatividad tu propio botón animado, preséntalo en archivo fla.

INFOGRAFIA:

https://www.aulaclic.es/flash-cs5/t_11_1.htm

ANIMACIÓN BÁSICA UTILIZANDO SÍMBOLOS

Hemos avanzado en la construcción de símbolos en Flash, botones, gráficos y clips de película, en esta oportunidad vamos a construir una animación utilizando símbolos y líneas de tiempo, como también aprenderemos el uso de algunas herramientas y sus propiedades: línea, cubo de pintura, relleno, alineación, etc y algunos conceptos como línea de tiempo, capas, biblioteca, fotogramas, propiedades del documento, y publicación, entre otras.

Recordemos algunos conceptos que nos ayudarán al diseño de una animación básica utilizando símbolos mediante un video tutorial en donde se muestran paso a paso las acciones a seguir a partir del calco de una imagen importada a la biblioteca.

LINEA DE TIEMPO

La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Consta de 2 partes.

1) Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando rectángulos)

2) Los Números de Fotograma que permiten saber qué número tiene asignado cada fotograma, cuánto dura o cuándo aparecerá en la película.

Además, en la parte inferior hay herramientas para trabajar con Papel cebolla e información sobre el Número de Fotograma actual (1 en la imagen), la Velocidad de los Fotogramas (24.0 en la imagen) y el Tiempo de película transcurrido (0.0s en la imagen).

A nivel conceptual, la Línea de Tiempo representa la sucesión de Fotogramas en el tiempo. Es decir, la película Flash no será nada más que los fotogramas que aparecen en la Línea de tiempo uno detrás de otro, en el orden que establece la misma Línea de tiempo.

BIBLIOTECA

En todos los documentos flash contamos con una biblioteca en la cual se almacenan todos los símbolos creados en flash. Puede contener archivos tales como mapa bits, clips de sonido, botones, etc. Para acceder a la ventana de librería nos debemos de dirigirnos a la barra de menú y en la opción de ventana y seleccionamos Biblioteca.

Vemos que aparece una pequeña ventana que contiene los siguientes elementos:

1 - Nos la forma del objeto que seleccionemos en la librería
2 - Imagen almacenada en librería
3 - clip de película almacenada en librería
4 - botón almacenado en librería
5 - sonido almacenado en librería
6 - sirve para agregar un nuevo símbolo a la librería
7 - sirve para crear una carpeta y así organizar ciertos objetos
8 - nos muestra las propiedades del objeto que tengamos seleccionado en la librería
9 - sirve para eliminar objetos en la librería

Como dijimos anteriormente en la biblioteca se almacenan muchos de los símbolos de nuestra película y esta ventana nos ayuda a poder localizar y reutilizar algún objeto que se encuentre en la biblioteca simplemente seleccionando el objeto y arrastrándolo hasta el escenario.

LAS CAPAS

El concepto de Capa es fundamental para manejar Flash de forma eficiente. Dada la importancia de estas, se le dedicará un tema completo. Aún así, veamos a grandes rasgos qué son las capas.

Una Capa se puede definir como una película independiente de un único nivel. Es decir, una capa contiene su propia Línea de Tiempo (con infinitos fotogramas).

Los objetos que estén en una determinada capa comparten fotograma y por tanto, pueden "mezclarse" entre sí. Esto es interesante a menudo, pero otras veces es conveniente separar los objetos de modo que no interfieran entre sí. Para ello, crearemos tantas capas como sea necesario. El uso de múltiples capas además, da lugar a películas bien ordenadas y de fácil manejo (es conveniente colocar los el código ActionScript en una capa independiente llamada "acciones", por ejemplo). Las ventajas y desventajas de usar capas se verá en la unidad referente a Capas.

Capas

ACTIVIDADES

1. Observar el siguiente vídeo tutorial y seguir paso a paso las orientaciones allí presentadas para la construcción de una animación del personaje Homero.

Complementar la animación con algunas líneas que faltan como el pelo y las orejas como la imagen que presento a continuación, si quieren pueden agregar mas elementos.