##ELEMENTOS DE LA NAVEGACION##
Instrucciones:Buscar información sobre: cómo trabajar con objetos, los símbolos, los gráficos y sus tipos, animaciones en movimiento y efectos en Macromedia Flash. Organiza la información en una tabla.
OBJETOS:
Un objeto Flash es un archivo
de extensión *.SWF que
ha sido diseñado con el programa Adobe
Flash(http://www.adobe.es) y que se suele embeber dentro de una página
HTML para mostrarse a través del navegador. Esta tecnología ha experimentado
tal auge que actualmente se considera indispensable en la elaboración de
animaciones y juegos multimedia interactivos en educación.
|
Los
objetos en Flash ¿Qué son?
Los objetos de dibujo así considerados tienen 2 partes fundamentales:
El Borde: Consiste en una delgada línea que separa el objeto
del exterior, del escenario. Puede existir o no, según nos convenga. Cuando
creamos un objeto, el borde se crea siempre y su color será el indicado en el Color
de Trazo (dentro del Panel Mezclador de Colores). Si
queremos dibujar creando Bordes deberemos emplear las Herramientas Lápiz, Línea o Pluma y
si queremos que nuestro dibujo no tenga borde, bastará con seleccionar el
borde y suprimirlo (ver siguiente punto).
El Relleno: El relleno no es más que el propio objeto sin
borde. Es, por tanto, la parte interna del objeto. Su existencia también es
arbitraria, ya que podemos crear un objeto cuyo color de relleno sea
transparente, como ya se vio en el tema de Dibujar, y por tanto, parecerá que
dicho objeto no tiene relleno, aunque en realidad sí que exista pero sea de
color transparente. Para dibujar Rellenos (sin borde) podemos usar
herramientas tales como el Pincel o el Cubo de
Pintura.
1.- Seleccionar
Para poder trabajar con objetos, es fundamental saber seleccionar la
parte del objeto que queramos modificar (mover, girar, cambiar de color...).
Podremos observar que las partes de un objeto seleccionadas toman una apariencia
con textura (entramado de puntos blancos) para indicar que están seleccionadas.
Objeto SIN seleccionar
Objeto con el BORDE seleccionado
Objeto con el RELLENO seleccionado
 Veamos cómo seleccionar las diferentes partes de un objeto:
Seleccionar un Relleno o un Borde: Basta hacer clic 1 vez en el Relleno o en el Borde que queramos seleccionar.
Seleccionar el Relleno y el Borde de un objeto: Hacer doble clic en el Relleno.
Seleccionar todos los bordes (o líneas) de un mismo color que estén en contacto: Hacer doble clic sobre una de las líneas que tenga el color que pretendamos seleccionar.
Seleccionar un Símbolo, un texto, o un grupo: Clic en el Símbolo, en el texto o en el grupo. Estos tipos de objetos mostrarán un borde de color azul (por defecto, depende de la capa) al estar seleccionados.
Seleccionar Varios elementos: Mantendremos pulsada la tecla SHIFT (Mayúsculas) mientras seleccionamos los objetos que queramos.
Seleccionar los objetos que se encuentran en una determinada zona: Para ello usaremos la Herramienta Selección (flecha). Haremos clic en una parte del escenario y arrastraremos el cursor hasta delimitar el área que contenga los objetos que queremos seleccionar. Si esta área corta una forma, sólo quedará seleccionada la parte del objeto que esté dentro del área que hemos delimitado. Si quisiéramos incluir dicho objeto, bastaría con usar la tecla SHIFT y seleccionar la parte del objeto que falta por seleccionar.
Este modo de seleccionar objetos permite seleccionar muchos objetos rápidamente, además de permitirnos seleccionar determinadas zonas de los objetos, para cortarlas, pegarlas...
Además de la Herramienta Seleccionar, también podemos usar la Herramienta Lazo, más útil aún si cabe. Nos permite seleccionar cualquier zona de cualquier forma (la forma la determinamos nosotros) del objeto que sea. Al contrario que la Herramienta Flecha, las áreas seleccionadas no tienen porque ser rectangulares.
Seleccionar a partir de la Línea de Tiempo: Si seleccionamos un determinado fotograma en la línea de tiempo, se seleccionan automáticamente todos los objetos que estén en dicho fotograma. Esto es útil para modificar de un modo rápido todos los elementos del fotograma.
Seleccionar Todo: La forma más natural de seleccionar todo, consiste en hacer clic en el menú Edición → Seleccionar Todo.
|
|||||||||||
SIMBOLO |
Qué son los símbolos?
Los Símbolos provienen de objetos que hemos creado utilizando las herramientas que nos proporciona Flash CS5.
Estos objetos al ser transformados en símbolos, son incluidos en una biblioteca en el momento en que son creados, lo que permite que sean utilizados en varias ocasiones (instancias), ya sea en la misma o en otra película. Los símbolos nos resultarán fundamentales a la hora de crear nuestras animaciones.
Cómo crear un símbolo
La acción de crear un nuevo símbolo es una de las más usadas en Flash ya que es uno de los primeros pasos para crear una animación, como veremos más adelante.
El procedimiento es el siguiente:
4.Sólo nos queda seleccionar el tipo de símbolo (desplegable Tipo) al que queremos convertir nuestro objeto. Podemos elegir entre Clip de Película, Botón y Gráfico. Sus características y las diferencias entre ellos las veremos en temas posteriores. Lo más habitual es Clips de película para los objetos que queremos mostrar en el escenario, y Botón si queremos que actúe como tal.
5.Bastará con pulsar Aceptar para tener nuestro símbolo creado.
Las Bibliotecas
En Flash CS5 podemos encontrar dos tipos de bibliotecas, las bibliotecas comunes y de ejemplos y aquellas asociadas a las películas que hemos creado. Todas ellas las tenemos a nuestra disposición para utilizar los símbolos que contienen.
Para acceder a las bibliotecas comunes que nos ofrece Flash simplemente tenemos que ir a al menú Ventana → Bibliotecas Comunes y seleccionar alguna de las que se nos ofrecen. Las hay de todo tipo de símbolos: botones, clips o gráficos.
Para acceder a la biblioteca de símbolos de la película que estamos creando, de nuevo vamos a la Barra de Menús, Ventana → Biblioteca. En esta biblioteca aparecerán todos los símbolos que hemos creado hasta el momento.
Podemos comprobar como el nuevo símbolo que hemos creado en el ejercicio paso a paso de la unidad anterior se ha añadido a nuestra biblioteca accediendo a ella como acabamos de indicar.
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áficoDiferencia entre símbolo e instancia
Como hemos comentado anteriormente, 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 del símbolo.
Por tanto, podemos crear muchas instancias de un símbolo, pero a una instancia solo le corresponderá un símbolo.
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 y lo modifiquemos, solo alteraremos ésa 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. En cambio, si modificamos el símbolo de la biblioteca, alteraremos todas sus instancias.
A la derecha tenemos un ejemplo de una biblioteca. Cada elemento de la biblioteca es un símbolo.
|
|||||||||||
GRAFICO ANIMACION DE MOVIMIENTO EFECTOS |
¿Qué es un gráfico?
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 o para cuando nos convenga que una animación se reproduzca sólo cuando determinado frame de la línea de tiempo de la película esté en marcha, ya que para los casos que hemos comentado anteriormente en los que un gráfico no nos es útil, Flash nos ofrece otro tipo de símbolos como veremos en temas posteriores.
. Tipos de gráficos
Los gráficos pueden ser:
a) Estáticos: estos gráficos se mantienen sin cambios cuando pasa el tiempo. Estos gráficos son los típicos en los fondos y en los objetos que no desempeñan ninguna función especial. Su tamaño y por tanto, el tiempo de carga de este tipo de gráficos, aunque siempre dependerá de la resolución, de sus dimensiones y de la forma en la que estén creados *, será en general reducido.
 Animación
b) Animaciones: este tipo de gráfico varía su forma, posición u otras propiedades a medida que va pasando el tiempo. Puesto que para realizar la animación se deben usar varios gráficos más además del original o bien realizar determinadas acciones que modifiquen el estado inicial, el tamaño de esta clase de gráficos, para las mismas dimensiones y forma de creación, será mucho mayor que uno estático.
Por esto, aunque las animaciones dan a nuestra web un aspecto más bonito y espectacular tienen dos inconvenientes:
(*) Los tipos de gráfico anteriores pueden ser, a su vez de dos tipos, según la forma en la que estén creados: Gráfico Vectorial o Mapa de Bits. Para saber más acerca de estos dos tipos de gráfico, échale un vistazo a nuestro tema básico
 .Creando un gráfico y comprobando sus propiedades
Como explicar teóricamente las propiedades de un gráfico resulta un tanto confuso, vamos a ver de manera práctica lo que queremos explicar. Vamos a crear un gráfico en Flash y a comprobar las propiedades que hemos comentado en el primer apartado del tema. Para ello, abre una nueva película Flash (Archivo→ Nuevo, archivo ActionScript 3).
Ahora tenemos que crear el objeto que queremos convertir en un símbolo Gráfico. Dibujemos, por ejemplo, un óvalo en cualquier lugar del área de trabajo con la herramienta Óvalo
 de la barra de herramientas de dibujo y démosle un color de relleno que será lo que después animemos (Selecciona el fondo del óvalo y dale el color azul mediante la herramienta Relleno de color.  ).
Ya hemos creado nuestro objeto, vamos a convertirlo en un símbolo gráfico ¿lo recuerdas?
Selecciona el objeto, haz clic derecho sobre el o haz clic en el menú modificar y selecciona Convertir en Símbolo, lo convertimos en un símbolo como ya habíamos visto y dándole el nombre GráficoAnimado y seleccionando el Tipo Gráfico:
Ahora vamos a crear la animación del gráfico. Puesto que todavía no hemos visto a fondo las animaciones, la vamos a realizar de una forma que quizá no sería la más apropiada la mayoría de las veces, pero nos servirá muy bien para este ejemplo. Para ello selecciona nuestro gráfico y pulsa el botón derecho del ratón. Se desplegará un menú, en el que seleccionaremos la opción Edición para modificar el gráfico y acceder a su línea de tiempo. Comprueba que estás en la línea de tiempos del gráfico (justo encima del escenario existe una secuencia que nos indica en qué nivel nos encontramos. En la imagen inferior, se puede apreciar que nos encontramos en "Escena1 - Gráfico Animado" y, por tanto estamos dentro del gráfico (y la línea de tiempos que vemos es la del gráfico, y no la de la película principal)
Crearemos a continuación nuevos fotogramas clave seleccionando uno a uno los frames número 2, 3 y 4
Pulsa sobre el frame 2 y cámbiale el color de fondo al óvalo como hicimos antes. Haz lo mismo en los dos siguientes frames.
Tu línea de tiempos debería tener este aspecto:
Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al nivel inicial (Película principal) y podremos ver nuestro gráfico "desde fuera".
Ahora ya tenemos completo nuestro gráfico animado. ¿Qué crees que sucederá si reproducimos la película? Comprobémoslo pulsando Control + Intro, se visualizará la película.
¿Y bien? Nada. Nada en absoluto. El óvalo sigue tal cual. ¿Por qué? La respuesta está en las características de los gráficos que habíamos explicado: la línea de tiempos del gráfico va ligada a la de la película.
En este caso la línea de tiempos de la película tenía un solo frame, mientras que la del gráfico tenía 4, por tanto, no le hemos dado tiempo al gráfico a desarrollar su animación; sólo ha reproducido un frame, el primero.
¿Cómo podemos solucionarlo?
Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana del reproductor de Flash, selecciona el fotograma 5 de la película principal y pulsa F6. Ahora tenemos 5 fotogramas en la película principal.
Pulsa de nuevo Control + Intro.
Es la acción básica de las animaciones en Flash. Permite desplazar un símbolo Flash 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.
Pasemos pues al tema en cuestión. 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 (veremos que también se pueden realizar movimientos no rectilíneos).
Cuando realicemos la interpolación correctamente observaremos un aspecto como este en la línea de tiempo.
Esto indica que la animación cambiará la posición del símbolo del fotograma 1 hasta la posición del mismo símbolo en el fotograma 20, utilizando precisamente 20 fotogramas. El número de fotogramas que se usen en la interpolación de movimiento indicará las subetapas de que constará la animación. Cuantas más subetapas más sensación de "continuidad" (menos saltos bruscos) pero a la vez menos velocidad en el movimiento.
La velocidad en el movimiento de las películas la podemos cambiar también modificando su parámetro en la barra de tiempos, pero esto no cambiará lo que hemos comentado anteriormente.
La velocidad está expresada en Fotogramas Por Segundo (fps) y se puede modificar haciendo doble clic en el lugar que hemos indicado de la barra de tiempos. A mayor valor más velocidad, pero se deben poner siempre suficientes fotogramas para que se desarrolle la animación como queremos.
En la animación del tema 1 podrás ver como realizar una interpolación de movimiento.
Mantén en mente que cuando realices una interpolación de movimiento el fotograma inicial y final deberán ser diferentes, en caso contrario no se creará ningún tipo de animación.
Observa en las siguientes imágenes dónde está situada la pelota en el primer fotograma de la animación y su posición final en el último fotograma:
También podemos realizar la interpolación de otra forma, sin convertir previamente el objeto a símbolo, ya que Flash lo convierte a símbolo automáticamente si no lo hacemos, dándole el nombre "Animar" más un número. Basta con hacer clic con el botón derecho sobre el fotograma que contiene nuestro objeto (en la línea de tiempos) y seleccionar Crear Interpolación de Movimiento. Después, al crear un fotograma clave en otro lugar de la línea de tiempos se creará automáticamente la interpolación, y sólo deberemos modificar este último fotograma para producir la animación.
Esto quizá no sea lo más conveniente en películas grandes, debido a lo que ya comentamos de la gran cantidad de símbolos que pueden aparecer y la confusión que crean muchos símbolos con nombres parecidos.
Flash también nos permite crear animaciones con trayectorias rectilíneas en varias fases, con direcciones distintas. Para ello, una vez creada la interpolación, basta con pinchar en uno de los fotogramas intermedios y crear un nuevo fotograma clave. Si movemos el símbolo en ese fotograma a otro lugar del escenario y reproducimos, la animación irá primero a esa posición y después a la posición final.
Si hacemos esto varias veces sobre varios fotogramas obtendremos varias trayectorias consecutivas más.
Para entender mejor este concepto recomendamos hacer el Ejercicio Encadenar Interpolaciones.
| |||||||||||
En el campo <Etiqueta de fotograma> podemos darle un nombre a la interpolación que nos ayudará a identificarla en la barra de tiempos. Aparecerá a lo largo de todos los fotogramas que la componen.