PAEM

PAEM
PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA
COLEGIO MARISTA
CENTRO ESCOLAR DEL NOROESTE
MC. Daniel Solano
COLEGIO MARISTA
CENTRO ESCOLAR DEL NOROESTE
MC. Daniel Solano
MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA
1. Fundamento de la animacin.
Los principios de la animacin tradicional (Fluidez y expresividad en la animacin) Nos referimos con este ttulo a una serie de tcnicas que los animadores utilizan para dar ms fluidez y expresividad las animaciones. Estos principios, que sera ms correcto presentar como tcnicas o procedimientos, fueron desarrollados a finales de los aos veinte, principalmente por los animadores de la industria norteamericana del llamado cartoon (con mltiples traducciones al espaol como historieta, tira cmica o dibujo animado). Las tcnicas o procedimientos se basan en el conocimiento y la intuicin que han tenido los animadores, de ciertos fenmenos descritos por la fsica y ms concretamente, por la dinmica. La codificacin de dichos procedimientos por parte de los dibujantes se ha debido ms a la percepcin sensorial que tenemos de esos fenmenos, como sujetos sometidos de la gravedad de la Tierra, que a la observacin visual de los mismos. Si un espectador, en unos dibujos animados, contempla cmo un vehculo se estira y se encoge segn la aceleracin, lo percibir como algo perfectamente comprensible aunque tal fenmeno no se observe en la realidad a simple vista. La explicacin a lo anterior es que todo el mundo ha experimentado la inercia en su propio cuerpo al viajar en un vehculo. Por tanto, los animadores han puesto en imgenes unas percepciones cinticas que todos hemos tenido alguna vez, haciendo por medio de este artificio que la animacin resulte, paradjicamente, ms creble. Algunas de las tcnicas ms utilizadas en la animacin tradicional, son: Claridad en la accin o en la puesta en escena - Staging. Accin secundaria - Secondaryaction. Tiempo de la accin - Timing. Continuidad de la accin - Overlaping. Terminacin de la accin - Followthough. Lneas de accin, arcos - Arcs. Aceleracin y deceleracin - Slow in and out. Appeal.
Los principios para la animacin fueron creados en los aos 30 por animadores en los Estudios de Disney. Se trata de una serie de reglas bsicas de animacin que se utilizaron como base creativa y de produccin de dibujos animados en aquella poca. Estos 12 principios ayudaron a que el oficio de la animacin pasara de ser algo novedoso a ser una forma de arte. Fueron aplicados inicialmente a los clsicos animados de Disney, como Blanca nieves, en 1937, Pinocho y Fantasa, en el 40, Dumbo, en el 41 y Bambi, en 1942, Estos principios hoy siguen funcionando, ayudan a crear personajes y situaciones ms crebles, proporcionan sensacin de realidad. Para 3D estos principios se han tenido que reinterpretar y expandir, incluso se han tenido que aadir algunos principios adicionales que den soporte a los nuevos estilos y tcnicas utilizados en la animacin, Esto es porque en los aos 30, el estilo dominante era la animacin narrativa cartoon pose a pose. Durante este tiempo, las tcnicas y los estilos de la animacin han cambiado enormemente.
1.1 Principios de la animacin.

A) Encoger y estirar (Squash and Strech).
La exageracin, la deformacin de los cuerpos flexibles. Sirve para lograr un efecto ms cmico o bien ms dramtico. El estiramiento muchas veces se relaciona con la velocidad y la inercia. Se puede decir que se utiliza para representar la inercia mediante la compresin y el estiramiento del objeto, que variar segn las cualidades del material con que est hecho. Se basa en las leyes de Newton, que refrescar a continuacin: 1. Todo cuerpo permanece en su estado de reposo o de movimiento rectilneo uniforme a menos que otros cuerpos acten sobre l. 2. La fuerza que acta sobre un cuerpo es directamente proporcional a su aceleracin. 3. Cuando un cuerpo ejerce una fuerza sobre otro, ste ejerce sobre el primero una fuerza igual y de sentido opuesto. Este principio se usa para enfatizar el cambio en la materia cuando se dan los principios de Newton.
B) Anticipacin (Anticipation).
Se anticipan los movimientos, esto gua la mirada del espectador. Anuncia sorpresa. Se vern tres pasos: Anticipacin (nos prepara para la accin); la accin en s misma y la reaccin (recuperacin, trmino de la accin). En otras palabras podemos decir que toda accin est constituida por tres actos: introduccin, desarrollo y conclusin. La anticipacin es igual a la introduccin y sirve para poner en situacin al espectador ante el desarrollo. Puede referirse a un movimiento o un concepto de la puesta en escena. Por ejemplo, mirar hacia arriba antes de un movimiento de cmara ascendente.
C) Puesta en escena (Staging).

Representacin de una idea. Con este principio traducimos las intenciones y el ambiente de la escena a posiciones y acciones especficas de los personajes. Poniendo en escena las posiciones claves de los personajes definiremos la naturaleza de la accin. Hay varias tcnicas de puesta en escena para contar una historia visualmente, esconder o revelar el punto de inters, o las acciones en cadena, accin reaccin, son dos ejemplos.
D) Accin directa y pose a pose (Straigh ahead action and pose-to-pose).

stas son en realidad dos tcnicas de animacin diferentes. En la accin directa creamos una accin continua, pas a paso, hasta conclur una accin impredecible, y en la accin pose a pose desglosamos los movimientos en series estructuradas de poses clave. La accin directa se distingue por la fluidez del movimiento, proporciona un look fresco, suelto y desenfadado. Influye la creatividad.
En la accin pose a pose se desarrolla un planteamiento inicial, es una animacin ms controlada que viene determinada por el nmero de poses y las poses intermedias. Se pueden mezclar estas dos tcnicas.
E) Accin continuada y superpuesta (Follow through and overlapping action).

Estas dos tcnicas ayudan a enriquecer y dar detalle a la accin, en ellas el movimiento contina hasta finalizar su curso. En la accin continuada, la reaccin del personaje despus de una accin nos dice cmo se siente el personaje adems evita un efecto mecnico en los movimientos, segn se va terminando una accin se encadena con la siguiente. En la accin superpuesta, movimientos mltiples se mezclan, se superponen, e influyen en la posicin del personaje. En la animacin 3D se utiliza mucho la accin continuada, por ejemplo en las simulaciones dinmicas de la ropa o el pelo.
F) Aceleracin y deceleracin (Slow in and out).

Aceleracin y deceleracin, Un objeto cuando inicia un movimiento sufre una aceleracin progresiva, mientras que al finalizar sufrir una desaceleracin igualmente progresiva. Para conseguir este efecto habr ms dibujos por fotogramas en la desaceleracin y a la inversa para una mayor aceleracin.
G) Arcos (Arcs).
Al utilizar los arcos para animar los movimientos del personaje le estaremos dando una apariencia natural, ya que la mayora de las criaturas vivientes se mueven en trayectorias curvas, nunca en lneas perfectamente rectas. Son guas que se trazan de manera curvilnea para guiar el trabajo de los dibujos intercalados entre las poses clave, para que sean lo ms fluidas posibles. Visualmente, son las especies de curvas que aparecen en un movimiento muy rpido.
H) Accin secundaria (Secondary action).

Pequeos movimientos que complementan a la accin dominante. Son resultantes de la accin principal. La accin secundaria no debe estar ms marcada que la accin principal, como ejemplo tenemos la ropa, que se mueve al son del personaje cuando camina.
I) Sentido del tiempo (Timing).

Da sentido al movimiento. El tiempo que tarda un personaje en realizar una accin. Las interrupciones en los movimientos. Aqu se define tambin el peso del modelo y la sensaciones de escalas y tamaos.
J) Exageracin (Exageration).
Acentuar una accin. La hace ms creble.
K) Modelados y esqueletos slidos.

Un modelado y un sistema de esqueleto slido, o un dibujo slido como se deca en los aos 30, ayudarn al personaje a cobrar vida. El peso, la profundidad y el balance simplificarn posibles complicaciones en la produccin debidas a personajes pobremente modelados. Adems, hay que poner atencin a las siluetas al alinear los personajes con la cmara.
L) Personalidad (Acting).
Esto proporciona conexin emocional con el espectador. Se trata de la personalidad del personaje, que sea coherente con sus movimientos.
M) Atractivo (Appeal).
Como todos los contenidos audiovisuales, hay que hacer un trabajo atractivo. Nuestros personajes tienen que serlo, al igual que la forma de presentarlos y animarlos. Para poder comunicar bien hay que hacer contenidos que atraigan a las personas.
2. Introduccin a Flash Professional.

2.1. Flash.
Flash Professional CS5 es una potente herramienta desarrollada por Adobe que ha superado las mejores expectativas de sus creadores. Flash fue creado con el objeto de realizar animaciones y diseos vistosos para la web, y grficos interactivos. Los motivos que han convertido a Flash en el programa elegido por la mayora de los diseadores web profesionales y aficionados son varios. Veamos pues, porque es interesante Flash Pro CS5. Desde la web de Adobe te puedes descargar una versin de evaluacin de Flash Professional CS5 vlida para 30 das. Esta versin estar disponible hasta que salga la siguiente. Los logotipos de Flash son propiedad de Adobe, as como las marcas registradas Flash y Adobe.
2.2. Importancia de Flash CS5.

Las posibilidades de Flash son extraordinarias, con cada nueva versin se han mejorado y simplificado las herramientas, y cada vez es posible lograr mejores efectos con menos trabajo. Aunque su uso ms frecuente es el de crear animaciones (a lo largo de este curso veremos lo sencillo que puede resultar) sus usos son muchos ms. Son tantos, que todos los diseadores web deberan saber utilizar Flash. Durante mucho tiempo, Flash consigui hacer posible lo que ms se echa en falta en Internet: Dinamismo, y con dinamismo no slo nos referimos a las animaciones, sino que Flash permite crear aplicaciones interactivas que permiten al usuario ver la web como algo atractivo, no esttico. Con Flash podremos crear de modo fcil y rpido desde animaciones simples para lograr algunos efectos visuales, hasta aplicaciones complejas, como juegos. Adems sus desarrolladores estn apostando muy fuerte por ActionScript, el lenguaje de programacin Flash. A cada versin se mejora y ofrece un abanico de posibilidades cada vez
mayor, por lo que adems de dinamismo, Flash nos ofrece la posibilidad de ser la plataforma para aplicaciones web de un modo real. Flash es fcil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar horas y horas creando lo que nos dicte nuestra imaginacin, pero esto no es suficiente para ser el preferido por los diseadores profesionales... Entonces qu es?
2.3. Novedades de Flash CS5.

Adobe suele integrar todos sus productos en una suite nica en la que prima, sobre todo, la compatibilidad entre ellos. As la compaa se desmarca del resto ofreciendo un paquete de aplicaciones muy completas como hemos ido viendo ao tras ao, que son capaces de interactuar entre ellas y nos ofrecen la posibilidad de reutilizar proyectos creados con un programa en otro. De hecho, podemos usar herramientas ms potentes de dibujo, como Illustrator, para crear nuestros grficos, y despus animarlos con Flash. Vamos a ver las opciones ms destacadas que encontramos en esta ltima versin:
Motor de texto Text Layout Framework. Flash CS5 ha cambiado profundamente el motor de texto que emplea. En nuevo motor TLF, incluye bastantes mejoras, entre las que podemos destacar las siguientes: Nuevos estilos de carcter y prrafo. Se pueden aplicar efectos y atributos sobre el texto sin convertirlo a un clip de pelcula. El texto pude fluir entre varios contenedores asociados.
El panel Fragmentos de cdigo. Este panel nos permite insertar rpidamente el cdigo ActionScript 3 de las acciones ms comunes. Adems, podemos emplearlo para almacenar nuestro propio cdigo, y as poder reutilizarlo cmodamente.
Empaquetado de aplicaciones para iPhone. Flash CS5 nos permite convertir nuestras aplicaciones i juegos creados con el programa, en aplicaciones compatibles con iPhone.
Mejoras del vdeo. Los puntos de referencia nos permiten navegar por el vdeo o reaccionar a eventos. Ahora, podemos aadirlos directamente desde el inspector de Propiedades o mediante ActionScript, sin necesidad de recodificar el vdeo. Adems, se ha mejorado el componente reproductor de vdeo, que nos permite verlo en tiempo real, y nos ofrece una mayor coleccin de estilos. Mejora de la herramienta huesos. Se han aadido propiedades de "muelle" a la herramienta de cinemtica inversa (IK). Con esto, se consiguen resultados mucho ms giles y realistas.
2.4. Ventajas y desventajas de Flash.

El principal uso de Flash se da en el mundo de la web. Desde la creacin de pequeos botones o banners publicitarios, hasta webs totalmente basadas en esta tecnologa, Internet est repleta de animaciones Flash. Como todo, Flash presenta tanto ventajas como inconvenientes:
El tiempo de carga. Mientras que una pgina HTML puede ocuparnos 10-20 KB como media, una animacin Flash ocupa mucho ms. Evidentemente depende del contenido que tenga, pero suelen superar los100 KB con facilidad, y si adems incorpora sonidos es fcil que la cifra se dispare. Al ocupar ms espacio, el tiempo que tardan estar visible el contenido Flash es mayor y no todos los visitantes estn dispuestos a esperar... simplemente, se irn a otra pgina. Los buscadores. Son capaces de indexar el contenido de nuestra pgina, el texto, pero no el contenido del Flash, ya que no lo pueden leer, lo que afectar negativamente al posicionamiento de la pgina. Y hoy en da es crucial para una web encontrarse bien posicionada. No obstante, los buscadores trabajan para solucionar este problema, pero de momento al mejor forma de solucionarlo es crear un diseo paralelo sin Flash, lo que aumenta el trabajo. Flash requiere de plugins para poder visualizarse, y el hecho de no tenerlos instalados, o de que un navegador tenga los scripts deshabilitados por seguridad, impedirn la visualizacin del Flash. Este plugin lo suelen incorporar la mayora de navegadores, es gratuito y se puede instalar desde (http://get.adobe.com/es/flashplayer/) de forma muy intuitiva, pero siempre habr usuarios que prefieran salir de nuestra pgina si tienen que instalar "algo raro".
Compatibilidad con distintos dispositivos. Cada vez es ms frecuente acceder a la web con telfonos mviles, SmartPhones y Tablets, y algunos de ellos no soportan Flash (como los Android anteriores a la versin 2.2). Flash es una tecnologa propietaria de Adobe, por lo que su futuro depende de lo que esta compaa quiera hacer con l. Otro aspecto a tener en cuenta es la usabilidad de las pginas Flash, a veces se cae en la tentacin de dar demasiada importancia al diseo y olvidarse de que la pgina debe ser fcil de usar, aunque es ms un error de diseo que del propio Flash. Tendencia a su desuso en la web. Con la llegada de HTML5, se solventan muchas de las carencias de las pginas tradicionales que nos obligaban a usar Flash. Por lo que su uso deja de tener tanto sentido. De hecho, Flash CS5 incluye una herramienta para exportar contenidos Flash a HTML5.
Por supuesto su fuerte uso en la web se debe a que tambin aporta ventajas:
La web se vuelve muy vistosa y atractiva, adems de aadirle ms interactividad. El aspecto visual es muy importante para la web, ya que al visitante, sobre todo al principio, "le entra por los ojos". Con un poco de prctica, el desarrollo con Flash se vuelve rpido. Flash permite comportamientos que de otra forma no podramos lograr. Compatibilidad con navegadores. Uno de los principales problemas en el diseo web es que el resultado no tiene por qu verse igual en todos los navegadores. Con Flash, nos aseguramos de que lo que hemos creado es exactamente lo que se ver. Por tanto, se hace necesario cuando lo que se necesita es que el usuario pueda interactuar completamente con el contenido.
Resumiendo, insertar o no contenido Flash en una pgina web puede ser cuestionable, aunque depende de muchas cosas. An as, no hemos de olvidar que Flash tiene muchsimas aplicaciones ms (hecho que ha provocado que otras compaas traten de sacar a la venta "clnicos" del Flash). Por ejemplo, se puede usar Flash para la creacin de DVDs interactivos (como los que incluyen las revistas de informtica, entre otras), la creacin de banners publicitarios o lo que ms est de moda ahora: la creacin de dibujos animados (os sorprendera saber la cantidad de dibujos animados conocidos creados o animados mediante Flash). Adems, Flash tiene uso industrial, pues se emplea para optimizar planos, crear diseos de interiores y trabajar con imgenes vectoriales en general. No dejes de aprender a manejar el programa con ms futuro... (al menos en cuanto a diseo web) Aqu tienes algunas pginas interesantes hechas con FLASH NRG y fwa, o con entradas muy llamativas http://www.derbauer.de/.
10
2.5. Primera animacin Flash.

Una de las caractersticas principales de Flash es su sencillez, esta sencillez en su utilizacin permite crear animaciones de un modo efectivo y rpido. Pongmonos en situacin, supongamos que queremos crear una animacin en la que una pelota realice un movimiento de "bote", es decir, que baje y suba. Puede parecer un trabajo de horas, pero nada ms lejos de la realidad. En este apartado no pretendemos ensear cmo crear una animacin Flash (pues eso se ver ms adelante), el objetivo es que entendamos cmo crea Flash las animaciones y de que modo nos facilita el trabajo. A primera vista, lo lgico parece ser dibujar la pelota en cada instante del movimiento, de modo que cuantos ms instantes dibujemos, ms real parecer el movimiento. Pues bien, con Flash bastar con crear 3 fotogramas: en el primero dibujaremos la pelota en el instante inicial (arriba del todo), en el segundo se dibujar la pelota en el momento de tocar el suelo y en el tercero la pelota volver a estar arriba (en realidad este tercer fotograma no har falta crearlo, pues bastar con copiar el primero). Por tanto, vemos que el trabajo ms largo (dibujar los objetos) ya est hecho.
Ahora, se determina el tiempo que durar cada movimiento (es decir, el tiempo que transcurre entre los instantes en los que la pelota est arriba y abajo) y por ltimo se le indica a Flash que cree una animacin de movimiento entre estos fotogramas. Fcil verdad? En esta versin de Flash an se ha facilitado ms la realizacin de animaciones de movimiento como veremos en el tema correspondiente.
11
3. Entorno de Flash.
3.1. Interfaz de Flash Pro CS5.
Flash CS5 cuenta con un entorno o interfaz de trabajo de lo ms manejable e intuitiva. Adems, tiene la ventaja de que es casi idntica a la de otros programas de Adobe (Photoshop, Dreamweaver, Illustrator...), todo esto hace ms fcil aprender Flash y ms rpido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash CS5 por primera vez:
A lo largo de todo el curso trabajaremos con la versin de evaluacin de Flash CS5 en castellano. Puedes descargar esta versin de forma gratuita desde la web de Adobe. Estar disponible hasta que se lance la siguiente versin. En la imagen se puede ver la interfaz que nos encontraremos la primera vez que abramos el programa Flash. Flash recordar nuestras preferencias y abrir el programa tal y como lo dejamos la ltima vez que lo utilizamos. En esta imagen faltan algunos mens. Todos se irn viendo a lo largo de este curso aunque no aparezcan en esta imagen, que slo pretende mostrar las partes principales de la interfaz de Flash. Veamos cules son.
12
3.2. La barra de Mens.
La Barra de Mens tiene como propsito facilitar el acceso a las distintas utilidades del programa. Es similar a la de cualquier otro programa de diseo web o grfico, aunque tiene algunas particularidades. Veamos los principales Submens a los que se puede acceder: Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la utilidad Importar que inserta en la pelcula actual casi todo tipo de archivos (sonidos, vdeo, imgenes e incluso otras pelculas Flash), o la de Configuracin de Publicacin desde donde se pueden modificar las caractersticas de la publicacin. Tambin permite configurar la impresin de las pginas, imprimirlas... Edicin: Es el clsico men que te permite Cortar, Copiar, Pegar... tanto objetos o dibujos como fotogramas; tambin permite personalizar algunas de las opciones ms comunes del programa. Ver: Adems de los tpicos Zooms, te permite moverte por los fotogramas y por las escenas. Tambin incluye la posibilidad de crear una cuadrcula y unas guas. Esto se puede seleccionar desde los submens Cuadrcula y Guas desde donde tambin se pueden configurar sus opciones. Insertar: Permite insertar objetos en la pelcula, as como nuevos fotogramas, capas, acciones, escenas... Modificar: La opcin Transformar permite modificar los grficos existentes en la pelcula, y la opcin Trazar Mapa de Bits convierte los grficos en mapas vectoriales (este tema se tratar ms adelante). El resto de opciones permite modificar caractersticas de los elementos de la animacin Suavizar, Optimizar o de la propia pelcula (Capa, Escena...). Texto: Sus contenidos afectan a la edicin de texto. Ms adelante se tratar en profundidad. Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas que permiten emular lo que un usuario pueda introducir en el entorno de edicin) que hayamos almacenado en nuestra animacin, obtener otros nuevos de la pgina de Macromedia o ejecutar los que ya tengamos. Control: Desde aqu se modifican las propiedades pelcula. Reproducir, Rebobinar, Probar Pelcula.... de reproduccin de la
Depurar: Aqu encontraremos las opciones de depuracin de la pelcula que te ayudaran a encontrar errores de progrmacin en ActionScrit, entre ellos se encuentran Entrar, Pasar, Salir, Continuar...
13
Ventana: Este men, adems de las opciones clsicas acerca de cmo distribuir las ventanas, incluye accesos directos a todos los paneles y tambin la posibilidad de crear tus propios Espacios de Trabajo, guardarlos, cargarlos, etc. Ayuda: Desde aqu podemos acceder a toda la ayuda que nos ofrece Adobe, desde el manual existente, hasta el diccionario de Action Script, pasando por tutoriales, lecciones guiadas etc...
3.3. La Lnea de tiempo.

La Lnea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Consta de 2 partes.
1) Los Fotogramas (frames) que vienen delimitados por lneas verticales (formando rectngulos) 2) Los Nmeros de Fotograma que permiten saber qu nmero tiene asignado cada fotograma, cunto dura o cundo aparecer en la pelcula. Adems, en la parte inferior hay herramientas para trabajar con Papel cebolla e informacin sobre el Nmero de Fotograma actual (1 en la imagen), la Velocidad de los Fotogramas (24.0 en la imagen) y el Tiempo de pelcula transcurrido (0.0s en la imagen). A nivel conceptual, la Lnea de Tiempo representa la sucesin de Fotogramas en el tiempo. Es decir, la pelcula Flash no ser nada ms que los fotogramas que aparecen en la Lnea de tiempo uno detrs de otro, en el orden que establece la misma Lnea de tiempo.
3.3.1 Fotogramas.
Un fotograma representa el contenido de la pelcula en un instante de tiempo. Por tanto, una animacin no es ms que una sucesin de fotogramas. Todo esto se puede controlar desde la Lnea de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual. Veamos qu tipos de fotogramas hay y cules son sus rasgos.
14
A) Fotograma Clave (KeyFrame) : Son fotogramas con un contenido especifico, se crean, por tanto, para insertar en ellos un nuevo contenido no existente en la pelcula. Se identifican por tener un punto negro en el centro y cuando est vaco se le diferencia por una lnea negra vertical. Por ejemplo, en el ejemplo de la "pelota" que rebotaba en el suelo habra 3 Keyframes. Uno para cada posicin distinta de la pelota. B) Fotograma Normal (Normal Frame) : Estos fotogramas siempre siguen a los fotogramas clave, no representan contenido nuevo y son de color gris. El ltimo fotograma de una secuencia de fotogramas normales viene representado por un cuadrado blanco sobre fondo gris. En el ejemplo, los fotogramas del 2 - 4 son fotogramas normales, su contenido no es nuevo, esto es, es el mismo que el del fotograma 1. Como vemos, su misin es prolongar la duracin de un fotograma clave o keyframe. C) Fotograma Contenedor: No son fotogramas propiamente dichos, sino que representan un lugar dentro de la Lnea de Tiempo en la que se puede insertar uno. Por defecto ocupan toda la pelcula y Flash no los tendr en cuenta al publicar la pelcula. En la imagen anterior, son fotogramas contenedor todos los fotogramas a partir del 11 (incluido). 1 de cada 5 fotogramas contenedor es gris, el resto, blancos. D) Fotograma Vaco: Son fotogramas sin contenido, Su color es blanco. En la imagen, los fotogramas del 6 al 10 (incluidos) son fotogramas vacos. No debemos confundirlos con los fotogramas contenedor, pues estos ltimos vienen delimitados por lneas verticales grises (no negras). Si se inserta algo en estos fotogramas, pasan a ser Keyframes. Es importante resaltar que Flash no ignora estos fotogramas y simplemente mostrar una imagen en blanco. (No dar por terminada la animacin). De modo que si queremos que un objeto aparezca en el fotograma 1 y despus otra vez en el fotograma 10. Los fotogramas del 2 al 9 debern ser fotogramas vacos ya que as el objeto "desaparecer" y volver a aparecer. E) Fotograma Etiquetado (Label Frame): Contiene en la parte superior una "bandera" roja que indica que tienen un nombre asociado. Dicho nombre se establece desde el Panel Propiedades. Si la duracin del frame es la suficiente, se puede leer el nombre (o etiqueta) que identifica al conjunto de fotogramas.
15
F) Fotograma con Acciones asociadas: Contienen en la parte superior una "a" que indica que tienen una accin asociada. Estos fotogramas son especialmente importantes, pues estas acciones, en principio "ocultas" (para verlas hay que acceder al Panel Acciones) pueden cambiar el comportamiento de la pelcula. En la imagen, la accin existente en el fotograma 1 afecta tambin al 2 y al 3 (por ser fotogramas normales). El fotograma 4 no tiene acciones y s las tiene el 5. G) Fotogramas Animados: Pueden ser de 2 tipos: 1) Fotogramas de Animacin de Movimiento: Vienen caracterizados por el color morado y representa el movimiento (con o sin efectos) de un objeto, que pasa de la posicin del Keyframe inicial al final. Para representar esta animacin aparece una flecha entre estos Keyframes. Esta imagen representa el ejemplo de la pelota. Del frame 1 se pasa al 6, (Flash representar el movimiento entre ambas posiciones en la pelcula final) y del 6 al 11. Otro movimiento. 2) Fotogramas de animacin de Forma: Vienen caracterizados por el color verde y representan un cambio en la forma de un objeto, que pasa de la forma que tena en el Keyframe inicial a la del final. Para representar esta animacin aparece una flecha entre estos Keyframes. Este ejemplo, similar al de arriba representa el cambio de forma de la pelota. En el frame 1 tendra la forma original, en el frame 5, forma de cuadrado (por ejemplo) y en el 11, otra forma distinta. En esta ltima imagen aparecen casi todos los tipos de fotogramas, los reconoces?
16
3.4. 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. An as, veamos a grandes rasgos qu son las capas. Una Capa se puede definir como una pelcula independiente de un nico nivel. Es decir, una capa contiene su propia Lnea de Tiempo (con infinitos fotogramas). Los objetos que estn 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 mltiples capas adems, da lugar a pelculas bien ordenadas y de fcil manejo (es conveniente colocar los el cdigo ActionScript en una capa independiente llamada "acciones", por ejemplo). Las ventajas y desventajas de usar capas se ver en la unidad referente a Capas.
3.5. El Escenario.
A continuacin veremos las diferentes partes que conforman el rea de trabajo empezaremos con la ms importante: el Escenario. Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la pelcula que estemos realizando. El escenario tiene unas propiedades muy importantes, ya que coinciden con las Propiedades del documento. Para acceder a ellas, hagamos clic con el botn derecho sobre cualquier parte del escenario en la que no haya ningn objeto y despus sobre Propiedades del documento: Aade metadatos a tus archivos para una mejor inclusin de estos en los motores de busqueda rellenando los campos de Ttulo y Descripcin. Dimensiones: Determinan el tamao de la pelcula. El tamao mnimo es de 1 x 1 px (pxeles) y el mximo de 2880 x 2880 px. Unidades de Regla: Unidad que se emplear para medir las cantidades. Coincidir: Provocan que el tamao de la pelcula coincida con el botn seleccionado (tamao por defecto de la Impresora, Contenidos existentes o los elegidos como Predeterminados)
17
Color de Fondo: El color aqu seleccionado ser el color de fondo de toda la pelcula. Velocidad de Fotogramas: O nmero de fotogramas por segundo que aparecern en la pelcula. Para cambiar este nmero, arrastra con el cursor hacia la derecha o izquierda. Transformar en predeterminado: Este botn permite almacenar las propiedades del documento actual y aplicarlas a todos los documentos nuevos que se creen desde ese instante en adelante. Estas propiedades por supuesto podrn ser alteradas desde este panel cuando se desee.
3.6. Las Vistas o Zooms.

La Herramienta Zoom se emplea para acercar o alejar la vista de un objeto, permitiendo abarcar ms o menos zona del Entorno de Trabajo. Cada vez que hagamos clic en con el Zoom duplicaremos el porcentaje indicado en el desplegable Zooms. Panel Zooms: Son un conjunto de accesos directos a Submens existentes en el Men Ver. Son muy tiles y ayudan a acelerar el trabajo cuando se emplean correctamente.
Se puede acceder a todas las funciones de los Zooms desde el Men Ver. En cualquier caso, Flash incluye un submen de acceso rpido para dichos comandos. Veamos en qu consisten: A) Mostrar Fotograma: Muestra el contenido del Fotograma actual en su totalidad. Es decir, amplia el tamao del fotograma hasta ocupar todo el rea de Trabajo. Si hay objetos fuera del rea de Trabajo, no se vern. B) Mostrar Todo: Muestra en el rea de Trabajo todos los objetos que haya en la pelcula, adaptando el tamao del fotograma al espacio necesario para que quepan. Si todos los objetos estn en la parte izquierda de un fotograma, la parte derecha no se ver.
18
Como podemos ver, ambas selecciones son tiles, pero tienen sus desventajas. Para darnos libertad total, Flash nos permite elegir el tamao del Escenario. C) 25%, 50%...: Muestra el fotograma con el tamao que indiquemos en % teniendo en cuenta que el 100% es el tamao de referencia. Es decir, el 100% es el tamao original de la pelcula (ocupa lo que se ver al publicar la pelcula), todo lo dems depende de cunto sea el 100 %. Es decir, si el 100% son 640 x 480 px. El 50% ser justo la mitad de esta cantidad y el 200% ser el doble de 640 x 480 px.
3.7. Los Paneles.

Los Paneles son conjuntos de comandos agrupados segn su funcin (por ejemplo, todo lo que haga referencia a las acciones, ir en el Panel Acciones). Su misin es simplificar y facilitar el uso de los comandos. Estos paneles o ventanas se encuentran organizados en el lateral derecho del rea de trabajo. Pudindose expandir o minimizar con un clic de ratn. Si no estn visibles en el lateral derecho, puedes visualizarlos desplegando el men Ventana y haciendo clic sobre el nombre del panel que quieras mostrar. Para mejorar la experiencia del usuario, Flash permite cargar y guardar tus propias disposiciones de paneles, para que si en algn momento el entorno se vuelve un poco catico puedas recuperar tu configuracin elegida desde el men Ventana. Para ello debers acceder a la opcin Ventana Espacio de trabajo Nuevo espacio de trabajo y asignar un nombre a nuestro nuevo espacio.
Ahora slo bastar darle un nombre a la disposicin y ser accesible desde el mismo elemento de men Espacio de trabajo en cualquier momento.
19
Todos los paneles se estudiarn en profundidad a lo largo del curso. An as, vamos a nombrarlos y a resumir las funciones de la mayora de ellos. Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy til. Panel Color: Mediante este panel creamos los colores que ms nos gusten. Panel Muestras: Nos permite seleccionar un color de modo rpido y grfico. (Incluidas nuestras creaciones). Panel Informacin: Muestra el tamao y las coordenadas de los objetos seleccionados, permitindonos modificarlas. Muy til para alineaciones exactas. Panel Escena: Modifica los atributos de las escenas que usemos. Escena no es ms que una porcin de la Lnea de Tiempo, con todo lo que sta incluya (capas, fotogramas...). Panel Transformar: Ensancha, encoge, gira... los objetos seleccionados. Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra pelcula. Panel Comportamientos: Permiten asignar a determinados objetos una serie de caractersticas (comportamientos) que despus podrn almacenarse para aplicarse a otros objetos de forma rpida y eficaz. Panel Componentes: Nos permite acceder a los Componentes ya construidos y listos para ser usados que nos proporciona Flash. Los componentes son objetos "inteligentes" con propiedades caractersticas y muchas utilidades (calendarios, scrolls etc...) Panel Cadenas: Mediante este panel Flash aporta soporte multi-idioma a nuestras pelculas. Panel Respuestas: Macromedia pone a nuestra disposicin ayuda y consejos accesibles desde este panel. Panel Propiedades: Sin duda, el panel ms usado y ms importante. Nos muestra las propiedades del objeto seleccionado en ese instante, color de borde, de fondo, tipo de trazo, tamao de los caracteres, tipografa, propiedades de los objetos (si hay interpolaciones etc...), coordenadas, tamao etc... Es fundamental, no debes perderlo de vista nunca. Panel Explorador de Pelculas: Nos permite acceder a todo el contenido de nuestra pelcula de forma fcil y rpida
20
4. Dibujar y colorear.
4.1. El dibujo en Flash CS5.
Cuando se disea una pgina web o una animacin el diseador pasa por muchas fases. Tras la fase de "Qu quiero crear y cmo va a ser" viene (normalmente) la fase de diseo grfico. Llevar lo que ha producido tu imaginacin al papel (en este caso al papel de Flash). No conviene engaarnos, Flash no es un programa de diseo grfico, pero su potencia en este mbito es casi tan grande como la de estos programas. Vamos a ver cmo emplear cada herramienta de dibujo para sacarle el mximo partido.
4.2. La barra de Herramientas - (Herramientas Bsicas).

La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Algunas herramientas llevan asociados modificadores de herramientas, que permiten cambiar algunas propiedades de la herramienta, y que aparecen al final del panel de herramientas. Veamos las herramientas ms importantes: A) Herramienta Seleccin (flecha). Es la herramienta ms usada de todas. Su uso principal es para seleccionar objetos, permite seleccionar los bordes de los objetos (con doble clic), los rellenos (con un slo clic), zonas a nuestra eleccin... Su uso adecuado puede ahorrarnos tiempo en el trabajo. B) Herramienta Texto. Crea un texto en el lugar en el que hagamos clic. Sus propiedades se vern en el tema siguiente. C) Herramienta Lnea. Permite crear lneas rectas de un modo rpido. Las lneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la lnea recta. Una vez creada la podemos modificar situando el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla. D) Herramienta de forma. Permite dibujar formas predefinidas como las que aparecen en la imagen, la ltima herramienta utilizada es la que aparece como icono en la barra de herramientas. Manteniendo pulsado el icono podremos acceder a las diferentes herramientas de forma. Por ejemplo: La herramienta valo permite dibujar crculos o elipses de manera rpida y sencilla.
21
E) Herramienta Lpiz. Es la primera herramienta de dibujo propiamente dicho. Permite dibujar lneas con la forma que decidamos, modificando la forma de estas a nuestro gusto. El color que aplicar esta herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas. F) Herramienta Pincel. Su funcionalidad es parecida a la del lpiz, pero por defecto su trazo es ms grueso e irregular. Se suele emplear para aplicar rellenos. Se puede modificar sus herramientas. G) Herramienta Cubo de pintura. Permite aplicar rellenos a los objetos que hayamos creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos si la zona no est delimitada por un borde. El color que aplicar esta herramienta se puede modificar, bien desde el Panel Color o bien desde el subpanel Relleno que hay en la Barra de Herramientas. H) Herramienta Borrador. Su funcionamiento es anlogo a la Herramienta Pincel. Pero su funcin es la de eliminar todo aquello que "dibuje".
4.3. La barra de Herramientas - (Herramientas avanzadas).

A) Herramienta Lazo. Su funcin es complementaria a la de la herramienta Seleccin, pues puede seleccionar cualquier cosa, sin importar la forma, (la Herramienta Flecha slo puede seleccionar objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la seleccin a mano). Al seleccionar esta herramienta, en el Panel de Herramientas aparecen estos botones: . Esto es la herramienta Varita Mgica, tan popular en otros programas de dibujo. Permite hacer selecciones segn los colores de los objetos. El tercer dibujo que aparece es este: seleccionar Polgono. para
B) Herramienta Pluma. Crea polgonos (y por tanto rectas, rectngulos...) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las ms potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vrtices de los polgonos, lo que nos asegura una gran precisin. Para crear curvas, hay que sealar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de prctica se acaba dominando.
22
C) Herramienta Sub seleccin. Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vrtices que componen los objetos creados con dicha herramienta. D) Herramienta Bote de Tinta. Se emplea para cambiar rpidamente el color de un trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel Colores que hay en la Barra de Herramientas.) E) Herramienta Cuentagotas. Su misin es "capturar" colores para que posteriormente podamos utilizarlos.
4.4 La barra de Herramientas (Opciones).

Algunas Herramientas poseen unas opciones especiales que facilitan y potencian su uso. Para acceder a estas utilidades, a veces no basta con hacer clic en la Herramienta correspondiente sino que adems debemos hacer clic en la lnea o en el objeto que has dibujado. Entonces aparecer (o se iluminar si ya estaba presente) un submen como este: A) Ajustar a Objetos. Se usa para obligar a los objetos a "encajar" unos con otros, es decir, para que en caso de ser posible, sus bordes se superpongan, dando la sensacin de estar "unidos". B) Suavizar. Convierte los trazos rectos en lneas menos rgidas. C) Enderezar. Realiza la labor inversa. Convierte los trazos redondeados en ms rectilneos.
4.5 El panel Color.

El Panel Color, como su nombre indica se usa para fabricar nuestros propios colores y para seleccionar los que ms nos gusten. Para seleccionar un color determinado, bastar con hacer clic en las pestaas que se encuentran junto a los iconos de las herramientas de Lpiz y de Bote de Pintura. (Si queremos modificar el color de un borde, pulsaremos sobre el color que est junto al lpiz modificar un relleno, haremos clic en el color que est junto al bote de pintura y si queremos .
23
Al hacerlo aparecer un panel con multitud de colores para que seleccionemos el que ms nos gusta. Tambin permite introducir el cdigo del color segn el estndar.
En vez de este selector rpido, podemos usar el panel Color, que encontraremos entre los paneles. As mismo se puede determinar el tipo de relleno que aplicaremos a los objetos creados (mediante la herramienta Bote de Pintura). Se pueden crear diferentes tipos de relleno: Slido: Consiste en un relleno formado por un solo color. Degradado Lineal: Es un tipo especial de relleno, de modo que un color se degrada hasta convertirse en otro. Puede ir de arriba abajo o de un lado al otro Degradado Radial: Es igual que el anterior, pero los degradados tiene forma circular. Relleno de mapa de Bits: Permite colocar como relleno alguna imagen existente en la pelcula (O ajena a ella si antes se "importa")
4.6. El panel Muestras.

El Panel Muestras sirve para poder ver de un modo rpido y claro los colores de que disponemos, tanto slidos (un solo color) como degradados (lineales o radiales). Adems, cuando creemos un color mediante el Panel Color, podremos agregarlo a nuestro conjunto de muestras mediante Agregar Muestra (que se encuentra en un men desplegable en la parte superior derecha del panel Color). Una vez est agregado el color, pasar a estar disponible en nuestro conjunto de muestras y podremos acceder a l rpidamente cada vez que trabajemos con nuestra pelcula. Cada pelcula tiene su propio conjunto de muestras y cada vez que la abramos para editarla, podremos usar las muestras que tenamos la ltima vez que trabajamos con dicha pelcula.
24
5. Textos
5.1. El texto en Flash.
Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animacin, y por tanto, tambin todo aquello relativo a los textos. Sin embargo, Flash fue concebido para crear animaciones grficas, de modo que tratar cualquier texto como si de un objeto ms se tratase, listo para ser animado a nuestro gusto. Esto nos permitir posteriormente animar textos y crear espectaculares animaciones con muy poco esfuerzo. Flash distingue entre 3 tipos de texto, texto esttico o normal, texto dinmico y texto de entrada (para que el usuario introduzca sus datos, por ejemplo), tambin se puede crear texto que soporte formato HTML etc... Actualmente Flash utiliza dos motores para trabajar con texto: el motor clsico, heredado de las anteriores versiones, y el llamado Text Layout Framework (TLF), el nuevo motor incluido en Flash CS5. Este ltimo, es el utilizado por defecto en Flash. Por defecto, salvo que indiquemos otra cosa, en nuestros ejemplos emplearemos el motor de texto TLF.
5.2. Insertar texto.

En la barra de Herramientas encontramos la herramienta Texto permitir escribir texto en nuestros proyectos. , que es la que nos
Los caracteres del texto no estn introducidos directamente en el documento, si no que estn confinados en un contenedor de texto. En Flash podemos introducir dos tipos de contenedores:
A) Texto de puntos. El tamao del contenedor depende del texto introducido, creciendo y decreciendo con l. B) Texto de rea. Podemos definir su tamao, independientemente del texto que contenga.
25
Para insertar un Texto de puntos, basta con hacer clic con la herramienta Texto y comenzar a escribir. En cambio, si queremos introducir un Texto de rea, tenemos que hacer clic y arrastrar para definir el tamao del rea. En cualquier caso, siempre podemos convertir un Texto de puntos en rea simplemente cambiando su tamao, estirando de los controles de transformacin que se muestran alrededor.
5.3 Escribir texto.

Tras hacer clic con la Herramienta Texto en cualquier parte del fotograma actual, nos aparecer algo as: El recuadro que vemos es el recuadro que contendr al texto. En la pelcula final no se ver, pero nos servir para localizar ms fcilmente el texto y para moverlo o cambiar su tamao. Finalmente, el crculo que hay arriba a la derecha significa que el recuadro del texto se expandir segn vayamos escribiendo y tambin el texto. Esto es, todo lo que escribamos, estar en la misma lnea. Si escribimos en el recuadro creado por defecto vemos como se alarga el recuadro que lo contiene. Para cambiar de lnea, sera necesario pulsar la tecla Enter (Intro).
Si por otra parte, queremos delimitar lo que va a ocupar nuestro texto (cosa bastante comn, acercaremos el cursor del ratn al borde del recuadro de texto, segn donde lo acerquemos, se transformar en un smbolo o en otro. Si lo acercamos al borde del recuadro, se le aadir debajo de la flecha una flecha pequea de 4 direcciones como la que muestra la figura y que nos indica que podemos mover el texto:
26
Si lo acercamos al crculo que est en el margen superior derecho, el cursor se convierte en un flecha de "ensanchamiento", como la que muestra la figura:
Con el cursor convertido en flecha de "ensanchamiento", podemos estirar los lmites del recuadro de texto, y adems, el crculo que apareca en el margen superior derecho, se convierte en un cuadrado. Este cuadrado significa que los lmites del recuadro de texto han quedado fijados, y que al insertar ms texto, se producir un salto de lnea en lugar de ensanchar el recuadro de texto. Este sera su comportamiento al introducir texto:
Si quisiramos, (una vez definido el recuadro de texto) volver al modo anterior, basta con hacer doble clic sobre el cuadrado que est en el margen superior derecho del recuadro de texto. Tras hacerlo, se convertir en un crculo y su comportamiento ser el descrito al principio de esta pgina.
5.4. Propiedades de los textos.

El Panel Propiedades contiene las principales propiedades de todos los objetos que empleemos durante nuestra pelcula, de modo que si seleccionamos un texto, podremos ver en l todo lo que nos hace falta conocer sobre nuestro texto. Podemos ver que el panel muestra una gran cantidad de opciones, agrupadas en categoras.
27
Observars que las imgenes anteriores muestran distintas opciones para el texto. Esto se debe a que la de la izquierda tiene seleccionada el motor Texto TLF, que nos permite muchas ms opciones. La de la derecha tiene establecido el motor Texto clsico, y aparecen menos opciones, las que venamos encontrando en la anterior versin del programa.
5.4.1 Texto clsico.

A) El motor de texto clsico En Flash CS5, Adobe ha implementado un nuevo motor de renderizado de texto ms completo y funcional. No obstante, existen algunas funciones que slo estn disponibles si se usa el motor de texto clsico, es por ello que Flash nos permite seguir utilizndolo. Flash distingue entre diversos tipos de textos clsicos y les da un tratamiento especial, segn el tipo que sean. Todos los tipos de textos responden a las propiedades comentadas en los puntos anteriores, y es en el Tipo de texto en lo que se diferencian. El tipo de texto se puede modificar desde el PanelPropiedades sin ms que haciendo clic sobre la pestaa Tipo de texto: . B) Texto esttico. El Texto Esttico se caracteriza por no presentar ningn cambio a lo largo de la animacin. Es importante que no confundamos la palabra "esttico" con que el texto no se mueva o malinterpretemos la frase es el texto que no presenta cambios a lo largo de la animacin. Lo que queremos decir es que no cambia el contenido del recuadro de texto, es decir, que el texto puede estar animado (girar, cambiar de color...) y sin embargo ser esttico. As, un recuadro de texto en el que pone "Aprende Flash CS5" durante toda la pelcula, es esttico, aunque dicho texto cambie de posicin, forma o color. Sin embargo, si en ese mismo recuadro de texto pasa a poner "Con este Curso", este recuadro de texto NO es esttico. Se insistir en este punto en los ejercicios de evaluacin. C) Texto dinmicos. El Texto Dinmico en contraposicin al esttico s que puede cambiar su contenido (adems de estar animado). Su uso es bastante ms complejo que el del Texto Esttico, ya que cada recuadro de texto Dinmico puede ser una variable modificable mediante ActionScript, esto quiere decir que los valores y propiedades de este tipo de textos se pueden modificar mediante programacin, lo que nos saca del objetivo de este curso. Un uso comn que suelen tener es el de representar los textos introducidos mediante Textos de Entrada (ver siguiente punto). Tienen multitud de propiedades, accesibles desde el Panel Propiedades, se puede decidir el nmero de lneas que van a tener, se puede introducir texto HTML, se puede aadir fcilmente un borde al texto o dar nombre a la variable que represente al texto Dinmico.
28
Una opcin interesante es el botn , que nos permite indicar qu caracteres incluir en el archivo SWF. Aqu debemos de indicar los caracteres que esperamos que muestre el texto dinmico. Al editar nuestra pelcula, distinguiremos los textos dinmicos por aparecer enmarcados en una lnea discontinua. D) Introduccin de texto. El Texto de Entrada o Introduccin de texto tiene bsicamente las mismas propiedades que el Texto Dinmico, junto con algunas propias de un tipo de texto orientado a la introduccin de datos por parte de usuario, como por ejemplo el nmero mximo de lneas que puede introducir en ese campo de texto o si queremos que lo que el usuario escriba en dicho campo aparezca como asteriscos (para las contraseas). Evidentemente este tipo de texto se reflejar en nuestra pelcula como un recuadro de texto SIN contenido, ya que lo deber introducir el usuario. Como hemos mencionado antes, este tipo de texto se puede combinar con el Texto Dinmico. Flash permite crear animaciones de texto tan interactivas como las que pueden crear con imgenes (ya hemos visto lo sencillo que es convertir un texto en un enlace a otra pgina web). An as, crear animaciones con textos, que sobrepasen a las que Flash incorpora por defecto (colores, transparencias, brillos, rotaciones, movimientos o combinaciones de estos) puede resultar un trabajo de muchsimas horas y mucha paciencia. Los resultados son increbles, pero puede resultar recomendable en estos casos usar algunos programas diseados con este objetivo. Entre otros destacan el Swish, el FlaX o el MiX-Fx, con ellos podrs crear efectos de texto asombrosos en pocos minutos, aunque no podrs gozar del entorno de Flash CS5 ni podrs emplear el resto de herramientas de que dispone.
29
Propiedades de los textos.

Nota: El motor de texto TLF requiere publicar los archivos como ActionScript 3 y FlashPlayer 10 o posterior. Si necesitas publicar archivos para versiones anteriores, debers de emplear el motor clsico. Veamos las principales opciones del panel Propiedades, comunes a ambos motores. Otras ms especficas las veremos ms adelante, cuando vayamos a emplearlas: Podemos elegir cmo se comporta el texto: Si es Seleccionable, y el usuario lo podr seleccionar y copiar en el portapapeles, Slo lectura, lo que impedir que lo pueda seleccionar, o si lo puede cambiar (Editable), por ejemplo, para introducir datos.
Adems, podemos establecer la orientacin del texto, en Horizontal (por defecto) o Vertical. A) Posicin y Tamao: Dado que Flash trata los textos como objetos, stos tambin tienen anchura, altura y coordenadas. Podemos modificarlos a nuestro gusto, pero debemos tener en cuenta que los caracteres no deben estirarse sin motivo, pues las tipografas son una parte muy importante y deben respetarse.
En el panel encontramos las coordenadas horizontal (X) y vertical (Y) del la esquina superior del elemento de texto, coincidiendo las coordenadas 0 0 con la esquina superior izquierda de la escena. Tambin se muestran los valores del ancho (AN) y alto (AL) del texto.
30
B) Carcter. En esta seccin encontramos las opciones tpicas del texto: Familia: Desde aqu, al igual que en los editores de texto ms comunes podemos seleccionar el tipo de letra o "fuente" que mejor se ajuste a nuestro diseo. Estilo: Nos permiten la combinacin de los dos estilos de texto habituales: texto normal (Regular), en cursiva (Italic), negrita (Bold) o negrita cursiva (Bold Italic). Tamao: El tamao de la tipografa empelada. Interlineado: Nos permite controlar la separacin entre las lneas de texto dentro de un mismo prrafo. Color: Como al resto de elementos, podemos dar color al texto. Espaciado: Determina el espaciado adicional entre caracteres. til cuando la tipografa que empleamos muestra las letras muy juntas o para dar efectos concretos al texto. Ajuste automtico: Activar esta casilla provoca que la separacin entre caracteres se realice de modo automtico. Suavizado: Las opciones de suavizado resultan importantes a la hora de mostrar nuestro texto. Encontramos estas opciones:
Utilizar fuentes de dispositivo: Se emplean las fuentes instaladas en el equipo, lo que hace ms liviano el archivo SWF al no tener que incluirlas. Aunque nos exponemos a que la fuente no est instalada, por lo que se emplear otra. Slo deberamos de utilizar esta opcin para las familias de fuentes ms comunes. Suavizado para legibilidad, favorece la legibilidad del texto. En este caso, deberamos de incorporar la fuente, como veremos ms adelante. No debemos de emplearla en textos animados. Suavizado para animacin, es la mejor opcin cuando pretendemos animar texto, ya que se obtienen animaciones ms fluidas ignorando algunos aspectos del texto, como alineaciones. En este caso, deberamos de incorporar la fuente.
31
Giro y otros estilos: Al final de este grupo de opciones encontramos las opciones para rotar el texto seleccionado, y aplicarle estilos de subrayado, tachado, superndice y subndice.
C) Carcter avanzado: Vnculo: Si queremos que al pulsar sobre nuestro texto, el usuario vaya a una direccin web, nada ms fcil que escribirla ah. Flash la asociar al texto que ests escribiendo en ese momento. Destino: Determina si la URL a la que el texto hace referencia se cargar en la misma ventana del navegador, en una nueva ...
Adems, en esta seccin podemos especificar cmo se comporta el texto Por ejemplo, que se muestre en maysculas, los saltos, etc...
C) Un Prrafo no es ms que un conjunto de caracteres con propiedades comunes a todos ellos. Estos prrafos admiten ciertas opciones que nos permiten trabajar con bloques de texto. El Panel Propiedades nos proporciona las siguientes opciones para trabajar con prrafos (entre otras). A la Izquierda: Todas las lneas empezarn tan a la izquierda como sea posible (dentro del recuadro de texto que hayamos definido). Centrar: prrafo. Las lneas se distribuyen a la derecha y a la izquierda del punto medio del
32
A la derecha: Todas las lneas empezarn tan a la derecha como sea posible dentro del recuadro de texto que hayamos definido). Justificado: El texto se ensancha si es necesario con tal de que no quede "dentado" por ninguno de sus lmites. Las diferentes opciones se refieren a la ltima lnea del texto, que suele ser ms corta que el resto.
El resto de opciones nos permiten determinar los mrgenes (izquierdo y derecho), los sangrados de prrafo y el espacio interlineal.
5.5. Propiedades de los contenedores de texto.

En el panel de propiedades, podemos encontrar algunas opciones que afectan a los contenedores de texto, en la categora de opciones Contenedor y flujo. La propiedad Comportamiento se refiere a como se ampla un contenedor de Texto al introducir texto. A) Caracteres mx.: Nos permite limitar el nmero mximo de caracteres que se pueden introducir en la caja de texto. Alineacin: nos permite establecer la alineacin horizontal del texto en el contenedor. Sus valores pueden ser Superior, Centrar, Inferior o Justificar.
33
B) Columnas nos permite dividir fcilmente un texto de rea en el nmero de columnas indicado. En este caso, tambin podremos regular el espacio entre ellas (medianil).
. C) El relleno (padding) permite crear una separacin entre los bordes del contenedor y el texto. Adems, podemos asignar un color de relleno y borde al contenedor.
5.6. Flujo de texto entre contenedores.

Al escribir, podemos crear textos de reas con un texto fijo, y colocarlo en un lugar del documento. Pero pensemos en un trptico, por ejemplo. En este caso lo ideal sera tener un texto de rea centrado en cada pgina, y que cuando el texto no nos cabe en uno, pase al siguiente. Esto lo conseguimos enlazando los distintos textos de rea. Los textos de rea tienen un cuadradito en su comienzo, llamado puerto de entrada, y otro al final, llamado puerto de salida.
Cuando todo el texto cabe en el elemento de texto, el puerto de salida aparece en blanco. Pero cuando el texto desborda al elemento, el puerto de salida muestra el smbolo . Cuando dos elementos de texto aparecen enlazados, el que va primero muestra una flecha hacia afuera en el puerto de salida, que est unido al puerto de entrada del siguiente elemento, que muestra una flecha hacia adentro.
34
Para crear un elemento de texto enlazado, partimos de un objeto de texto ya creado, y hacemos clic con la herramienta Seleccin en uno de sus puertos, en el de entrada si queremos que el nuevo objeto vaya delante, o en el de salida si el nuevo objeto ir a continuacin. El cursor cambiar a cursor de , dndonos dos opciones:
Hacer clic en el en otro rea de texto para enlazarlo. Trazar un nuevo elemento de texto, igual que con la herramienta Texto. Si esto lo hacemos en un puerto ya enlazado, el nuevo elemento de texto se colocar entre los elementos que estaban enlazados.
Para romper un enlace, podemos hacer doble clic sobre un puerto enlazado, lo que mueve todo el texto al puerto de origen.
5.7. Incorporar fuentes.

Al crear un archivo de flash con texto, si en Suavizado no hemos elegido fuentes de dispositivo, tenemos que tener presente que si hemos elegido una fuente que no est disponible en el sistema que se reproduce la pelcula, se sustituir por otra fuente disponible. Esto es un problema, ya que puede alterar bastante nuestro diseo. Para evitar esto, podemos incluir las fuentes que hemos empleado en nuestro proyecto. Esto garantiza que el texto se vea tal y como lo creamos, independientemente de las fuentes del sistema. Para incorporar una fuente en la pelcula usamos el botn Incorporar que aparece en el panel de Propiedades. Se abrir el siguiente cuadro de dilogo:
En el desplegable Familia seleccionamos la fuente que deseamos utilizar. Seleccionamos los estilos que vamos a utilizar (Negrita, Cursiva y Tamao).
35
El nombre que le demos se mostrar en la Biblioteca y estar lista para utilizarse. Cuando creemos un campo de texto, seleccionamos nuestra fuente, que aparecer sealada con un asterisco (*).
De esta forma nos aseguramos que nuestro proyecto se ver tal cual lo creamos.
5.8. Introducir texto.

Aunque el uso ms comn y principal de los contenedores de texto es mostrarlo, tambin podemos emplearlos como un cuadro de entada de texto. Para hacerlo, basta con seleccionar Texto editable en las propiedades del elemento.
En el siguiente ejemplo, tenemos tres cuadros de texto: el de arriba es editable, el del medio solo seleccionable y el de abajo solo se puede leer. Y tambin hemos hecho que el contenido de todos cambie segn lo que se escriba en el primero.
36
Para recoger informacin de los usuarios, normalmente emplearemos componentes de formulario, que son controles especficos para esta funcin. Pero a esto le dedicaremos un tema completo ms adelante. Pero cmo recogemos la informacin introducida en el cuadro de texto? Aunque an no lo hemos explicado, el texto es un objeto. Y como tal, tiene una propiedad que nos permite leer su contenido mediante ActionScript. Cuando comencemos a trabajar con ActionScript veremos que esto, es una tarea muy sencilla.
37
6. Audio en Flash.
6.1. Audio en Flash.
Quin sera capaz de ver una pelcula muda? Y una animacin espectacular sin sonido? Hasta hace poco, los nicos sonidos que oamos en las pginas web eran los famosos "midis", de escaso tamao y de escasa calidad. De hecho, eran slo instrumentos musicales sin voz, de ah su pequeo tamao (y calidad). An as, siempre exista algn creador de pginas web que se aventuraba a poner algn sonido complejo (.wav o .mp3) en su pgina web, por desgracia, su carga es tan lenta, que la mayora de los visitantes se iran de la pgina sin llegar a escucharla. Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia, poner sonido a las pginas web es un poco ms fcil, qu aporta Flash? Flash nos permite insertar cualquier sonido que queramos en nuestras pelculas (.wav, .aiff, .mp3, etc...) de forma fcil y muy efectiva, ya que es capaz de acelerar la descarga del sonido siempre y cuando se descargue junto con nuestra pelcula. Podemos dar a la pelcula efectos simples (el tpico "clic" al pulsar un botn), efectos complejos (msica de fondo) e incluso podemos hacer que la animacin se desarrolle conjuntamente con una msica (si bien esto ltimo necesitara que toda la pelcula estuviera descargada previamente, para evitar "atascos" durante el desarrollo de la animacin). En definitiva, Flash nos lo vuelve a poner fcil. Pero hemos de tener cuidado al incluir sonidos, sobre todo si son melodas. Es preferible que sea el usuario quien las active a travs de un botn, o si es necesario que se reproduzcan automticamente, tener un control fcilmente localizable para silenciarlo.
6.2. Importar sonidos.

A) Utilizar sonidos externos. Podemos insertar en una pelcula de Flash sonidos que tengamos en formato digital: grabados por nosotros mismos, descargados de internet, etc...Pero para que est disponible en nuestra pelcula y podamos usarlo, antes debemos de importarlo. Realmente debemos de importar a flash cualquier archivo externo que queramos usar: sonidos, grficos, e incluso con otras pelculas Flash. Importar por tanto, no es ms que decirle a Flash que aada un determinado archivo a nuestra pelcula, para que podamos usarlo cuando queramos. En realidad, lo aade a nuestra Biblioteca, que es el Panel en el que estn todos los objetos que participan en la pelcula (este panel se ver ms adelante).
38
As pues si queremos manejar un sonido en nuestra pelcula, deberemos importarlo previamente. Una vez est importado, podremos usarlo con total libertad. Para importar un sonido haz clic en el men Archivo Importar Importar a biblioteca.
Se abrir el cuadro de dilogo de Importar a biblioteca. All debers seleccionar en Tipo de archivo Todos los formatos de sonido. Navega por las carpetas hasta encontrar el archivo de audio que quieras incluir en tu pelcula. Seleccinalo haciendo clic sobre l y haz pulsa el botn Aceptar. El sonido estar listo para usarlo donde quieras, podrs encontrarlo en la Biblioteca (men Ventana Biblioteca). B) Utilizar los sonidos incorporados. Flash ya incluye una serie de sonidos incorporados que podemos importar a nuestro proyecto. Se trata principalmente de sonidos como disparos, risas, sonidos animales, etc. Los podemos encontrar a travs del men Ventana Bibliotecas comunes Sonidos. Se abrir un panel como el siguiente: Para incorporar alguno de estos sonidos a nuestra biblioteca de proyecto, no tenemos ms que arrastrarlos desde este panel.
6.3. Propiedades de los sonidos.

En Flash CS5, al igual que en versiones anteriores, todo lo referente a los sonidos lo podemos editar desde el Panel Propiedades. Aqu tenemos todo lo necesario para insertar, modificar y editar el sonido que acabamos de importar. Si no hemos importado ningn sonido, nos daremos cuenta de que no podemos seleccionar nada en dicho panel, basta insertarlo para que esto cambie.
39
Para que aparezca la posibilidad de trabajar con sonidos, deberemos hacer clic en seleccionar el fotograma en el que queremos reproducir el sonido, tras hacer esto, el Panel Propiedades toma el siguiente aspecto:
Veamos las partes que tiene este panel. A) Nombre: En este desplegable nos aparecern los sonidos que tenemos importados en la Biblioteca. Deberemos seleccionar la cancin que pretendamos aadir a nuestra pelcula (en el siguiente punto veremos cmo insertarla). Si no queremos reproducir sonido, seleccionamos Ninguno. B) Efecto: Desde aqu podremos aadir algn efecto a nuestro sonido, como por ejemplo que el sonido pase del canal izquierdo al derecho (esto crea la sensacin de que el sonido te envuelve ya que lo oyes por un sitio y luego por otro, aunque queda muy lejos de los verdaderos sonidos envolventes), que el volumen aumente progresivamente etc... Si deseamos aadir complejos efectos sonoros, deberemos tratar adecuadamente el sonido con algn programa creado especficamente para este propsito antes de importarlo. En el punto Editar Sonidos se tratar en ms profundidad estos efectos. C) Sinc: Esta opcin nos permite determinar en qu momento comenzar a actuar nuestro sonido, estas son las opciones que tenemos: Evento: Sincroniza nuestro sonido con un evento determinado. Es la opcin por defecto y provoca que el sonido se empiece a reproducir al pasar la pelcula por el fotograma en el que est situado. Tambin se puede sincronizar el sonido con botones y los dems tipos de smbolos. El sonido se repetir completamente, y si lo ejecutamos varias veces, se reproducir de nuevo, aunque no hubiese acabado, provocando que el sonido se solape.
40
Inicio: Su funcionamiento es equivalente al de "Evento", se diferencian en que si ya se est reproduciendo, no se reproduce de nuevo. Detener: Detiene el sonido seleccionado. Flujo: Esta opcin sincroniza el sonido con el o los objetos con los que est asociado, por tanto, si la carga de la pelcula es lenta y las imgenes no fluyen adecuadamente, el sonido se detendr para sincronizarse con ellas. Este efecto puede dar la sensacin de que la pelcula se corta de un modo muy brusco (pensar en que se considera normal que una imagen tarde en cargarse, pero si se detiene un sonido mientras se reproduce, produce una reaccin muy negativa en los que pueden estar viendo nuestra pelcula). Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el efecto de que un personaje hable durante una pelcula. En esta situacin, es muy recomendable que el sonido y las imgenes estn sincronizadas.
D) Repetir: Determina el nmero de veces que se reproducir el sonido segn lo indiques de la derecha. Tambin puedes seleccionar Reproducir indefinidamente para que el sonido se reproduzca en un bucle hasta llegar al siguiente fotograma clave. No recomendamos insertar sonidos con la opcin Flujo y a la vez la de Repetir, ya que al estar sincronizados los sonidos con las imgenes, provocaramos que las imgenes (y los fotogramas que las contengan) se dupliquen tambin, aumentando considerablemente el tamao de la pelcula.
6.4. Insertar sonido en lnea de tiempo.

Al aadir un sonido directamente sobre la lnea de tiempo, lo asociamos a un fotograma. Por tanto, el sonido se comenzar a reproducir en ese fotograma, y continuar hasta que sea detenido. Esto es til, por ejemplo, para agregar msica a la pelcula. Lo mejor ser crear una nueva capa para cada sonido. As lo controlaremos fcilmente. Creamos un fotograma clave en el momento en que queremos que comience a reproducirse el sonido, y lo arrastramos de la biblioteca al escenario. Tambin podemos elegirlo directamente desde el panel de Propiedades. Con el fotograma de la nueva capa seleccionado, accedemos a sus propiedades, a la seccin de Sonido. Seleccionamos los efectos deseados, y las veces que lo queremos Repetir. En el men Sinc. Seleccionamos la opcin de sincronizacin deseada. Por ejemplo, si queremos que cada vez que se pase por ah, se lance un sonido breve, porque por ejemplo se mueve un objeto, seleccionaremos evento. En cambio, si queremos iniciar la reproduccin del sonido a partir de ah, marcamos Inicio. Si queremos iniciar el sonido en un fotograma ms adelante, seleccionamos Detenido, y lo iniciamos creando un fotograma clave, seleccionado el mismo sonido.
41
As representa Flash los sonidos insertados en Fotogramas Por defecto, Flash entiende que queremos reproducir el sonido completo, si no por qu importarlo todo cuando genera un archivo ms grande? Por supuesto, podemos hacer que el sonido se detenga en un fotograma determinado. Para ello, creamos un fotograma clave, y con el mismo sonido seleccionado, elegimos Detener en el desplegable Sinc. Otra sera utilizar la opcin Flujo.
Al seleccionar esta opcin, el sonido se reproducir hasta que se acabe o llegue a un fotograma clave, siguiendo la pelcula. Slo es aconsejable esta opcin si realmente la necesitamos.
6.5. Sonidos en botones.

Es muy comn insertar un breve sonido al pulsar un botn, as el usuario percibe que ese botn "hace algo". Como veremos ms adelante, los botones tienen su propia lnea de tiempo, con sus distintos estados. Por eso, no tenemos ms que insertar los sonidos para cada estado. Lo que s debemos de tener en cuenta, es en usar la opcin de Sincronizacin Evento, para que se reproduzca el sonido en su totalidad.
42
6.6. Editar Sonidos.

Flash no fue creado como un editor de sonidos, por lo que su potencia en este campo es limitada. An as, los efectos que permite aplicar de un modo sencillo suelen ser suficientes para cualquier animacin que queramos realizar. Disponemos de estos efectos del panel Propiedades: Canal Izquierdo: El sonido tan slo se escuchar por el altavoz izquierdo. Canal Derecho: El sonido tan slo se escuchar por el altavoz derecho. Desvanecimiento de izquierda a derecha: El sonido se reproduce inicialmente en el altavoz izquierdo para luego pasar al derecho. Desvanecimiento de derecha a izquierda: El sonido se reproduce inicialmente en el altavoz derecho para luego pasar al izquierdo. Aumento Progresivo: El volumen de nuestro sonido aumenta progresivamente. Desvanecimiento: El volumen de nuestro sonido disminuye progresivamente. Personalizado: Esta opcin nos permite "editar" el sonido de un modo rpido y sencillo. Desde este editor podemos decidir qu volumen tendr nuestro sonido y en qu altavoz. Podemos crear los efectos anteriores ajustndolos a nuestro gusto y podemos crear efectos ms complejos a nuestra medida.
Esta es la apariencia del cuadro de dilogo Personalizar Sonido. La parte superior representa el canal izquierdo y la parte inferior el canal derecho. Entre las 2 partes hay una lnea de tiempo que nos indica el tiempo de sonido transcurrido en cada punto. Las lneas grises representan el volumen del sonido y haciendo clic en ellas podemos configurar este volumen. En el ejemplo, el canal izquierdo se reproduce normalmente (pues el volumen est al mximo), pero el canal derecho empieza en silencio, para poco a poco alcanzar el volumen normal (este efecto equivaldra a un Aumento Progresivo en el canal derecho).
43
7. Trabajar con objetos.

7.1. Los objetos en Flash.
En los primeros temas vimos las herramientas para dibujar elementos en nuestra pelcula, obteniendo formas. En este tema profundizaremos en cmo trabajar con estas formas u objetos, para ajustarlos a nuestras necesidades. Independientemente de si estamos trabajando en una animacin, en una pgina web, en un catlogo para un DVD o en cualquier otra cosa, tendremos que trabajar con objetos. A grandes rasgos, podremos considerar un objeto todo aquello que aparezca en nuestra pelcula y sea visible, de modo que podamos trabajar con l, por ejemplo, cualquier imagen que creemos o importemos, un botn, un dibujo creado por nosotros mismos etc... Los objetos de dibujo as considerados tienen 2 partes fundamentales: El Borde: Consiste en una delgada lnea que separa el objeto del exterior, del escenario. Puede existir o no, segn 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 Lpiz, Lnea 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 ms que el propio objeto sin borde. Es, por tanto, la parte interna del objeto. Su existencia tambin 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.
7.2. 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 estn seleccionadas.
44
Objeto SIN seleccionar
Objeto con el BORDE seleccionado
Objeto con el RELLENO seleccionado
Veamos cmo 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 lneas) de un mismo color que estn en contacto: Hacer doble clic sobre una de las lneas que tenga el color que pretendamos seleccionar. Seleccionar un Smbolo, un texto, o un grupo: Clic en el Smbolo, en el texto o en el grupo. Estos tipos de objetos mostrarn un borde de color azul (por defecto, depende de la capa) al estar seleccionados. Seleccionar Varios elementos: Mantendremos pulsada la tecla SHIFT (Maysculas) mientras seleccionamos los objetos que queramos. Seleccionar los objetos que se encuentran en una determinada zona: Para ello usaremos la Herramienta Seleccin (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, slo quedar seleccionada la parte del objeto que est dentro del rea que hemos delimitado. Si quisiramos incluir dicho objeto, bastara con usar la tecla SHIFT y seleccionar la parte del objeto que falta por seleccionar. Este modo de seleccionar objetos permite seleccionar muchos objetos rpidamente, adems de permitirnos seleccionar determinadas zonas de los objetos, para cortarlas, pegarlas... Adems de la Herramienta Seleccionar, tambin podemos usar la Herramienta Lazo, ms til an 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 por qu ser rectangulares. Seleccionar a partir de la Lnea de Tiempo: Si seleccionamos un determinado fotograma en la lnea de tiempo, se seleccionan automticamente todos los objetos que estn en dicho fotograma. Esto es til para modificar de un modo rpido todos los elementos del fotograma. Seleccionar Todo: La forma ms natural de seleccionar todo, consiste en hacer clic en el men Edicin Seleccionar Todo.
45
7.3. Alineacin de objetos.

Ahora que ya sabemos seleccionar los objetos o las partes de estos que consideremos oportunas, veamos cmo colocarlos en el Escenario. Para colocarlos de un modo preciso (por no decir exacto), Flash pone a nuestra disposicin el Panel Alinear. Este Panel lo podemos encontrar en el Men Ventana Alinear. As funciona:
El Panel Alinear permite colocar los objetos tal y cmo le indiquemos. Antes de ver las posibilidades, debemos hacer hincapi en la opcin Alinear en escenario. Esta opcin nos permite decir a Flash que todas las posiciones que indiquemos para nuestros objetos tomen como referencia el escenario. Si esta opcin no est seleccionada, los objetos toman como referencia al conjunto de objetos en el que se encuentran, y se colocan en funcin de ellos. Lo ms habitual es seleccionar En Escenario, para que los objetos se coloquen segn los lmites de la pelcula, en el centro del fotograma etc... Conozcamos un poco mejor el Panel Alinear y sus posibilidades:
A) Alineamiento. Sita los objetos en una determinada posicin del fotograma (si est seleccionado En Escena). Las distintas opciones afectan a todos los elementos seleccionados y se emplean muy a menudo para situar los objetos en determinados sitios predefinidos. Por ejemplo: Si quisiramos situar un objeto en la esquina inferior izquierda, bastara pulsar el primer y el sexto botn consecutivamente.
46
Por ejemplo, si queremos que coincida el centro de dos objetos los alineamos al centro horizontal y verticalmente.
B) Distribuir: Sita los objetos en el escenario en funcin de unos ejes imaginarios que pasan por cada uno de ellos, de modo que la distribucin de los mismos sea uniforme. Por ejemplo, si tenemos 2 cuadrados y pulsamos el primer botn de la izquierda. Cada uno de los 2 cuadrados se situar en un extremo de la pelcula (uno arriba y otro abajo).
47
C) Coincidir Tamao. Hace coincidir los tamaos de los objetos. Si est activo Alinear en escenario estirar los objetos hasta que coincidan con el ancho y el largo de la pelcula. Si no est activo, la referencia ser el resto de objetos. Por ejemplo, si tenemos 2 cuadrados distintos y la opcin Alinear en escenario no est activada, al hacer clic en el primer botn de "Coincidir Tamao", el cuadrado ms estrecho pasar a tener la anchura del cuadrado ms ancho. Si Alinear en escenario hubiera estado activo ambos cuadrados hubieran pasado a tener el ancho del fotograma. D) Espacio: Espacia los objetos de un modo uniforme.
Para ver ejemplos de uso de estos comandos, podis ver la animacin situada arriba al principio del captulo.
7.5. Los grupos.

Un grupo no es ms que un conjunto de objetos. Si bien no cualquier conjunto de objetos forman un grupo, ya que para crear un grupo, debemos indicarle a Flash que as lo queremos. Para ello, basta seleccionar los objetos que queremos que formen parte de un grupo y despus hacer clic en el Men Modificar Agrupar (Ctrl + G). Tras hacer esto observaremos que desaparecen las texturas que indicaban que los objetos estaban seleccionados y observamos que el grupo pasa a ser un "todo", ya que resulta imposible seleccionar a uno de sus miembros sin que se seleccionen a su vez los dems. Adems, aparece el rectngulo azul (por defecto) que rodea al grupo, definindolo como tal.
48
Crear grupos es muy til, ya que nos permite, como ya hemos dicho, tratar al conjunto de objetos como un todo y por tanto, podemos aplicar efectos al conjunto, ahorrndonos la labor de hacerlo de objeto en objeto. Por ejemplo, supongamos que tenemos un dibujo que representa un conjunto de coches. Tras dibujarlos todos, nos damos cuenta de que queremos aumentar el tamao de los coches. Podemos aumentar el tamao de los coches de uno en uno, corriendo el riesgo de aumentar unos ms que otros y perdiendo las proporciones entre ellos, o podemos formar un grupo con los coches y aumentar el tamao del grupo, de modo que aumenten todos de tamao a la vez y en la misma proporcin. De igual modo, podemos mover al grupo de posicin, hacer que gire... Al crear un grupo, simplemente estamos dando unas propiedades comunes a un conjunto de objetos y, en ningn caso perdemos nuestro objeto. En cualquier momento podemos deshacer el grupo, mediante el Men Modificar Desagrupar. Adems, Flash nos permite modificar los elementos de un grupo sin tener que desagruparlo. Para ello, seleccionamos el Grupo de elementos y hacemos clic en el Men Edicin Editar Seleccionado, o directamente hacemos doble clic sobre el grupo con la herramienta Seleccionar. Podremos editar los objetos que componen el grupo por separado teniendo en cuenta que, como es lgico, los cambios realizados afectarn al grupo adems de al elemento en cuestin.
49
8. Las capas.
8.1. Capas.
Todo el mundo ha visto alguna vez cmo trabajan los dibujantes de dibujos animados. Y todos hemos visto cmo colocan una hoja semitransparente (lminas de acetato) con dibujos sobre otras y la superposicin de todas forma el dibujo final. Por qu no dibujan todo en una misma hoja? Por qu trabajan con varios niveles y con varios dibujos si van a acabar todos juntos? Los motivos son muchos, y estos niveles que emplean los dibujantes, equivalen a las Capas que utilizan Flash, y la mayora de programas de dibujo o retoque, como Photoshop. Cada capa es, por tanto, un nivel en el que podemos dibujar, insertar sonidos, textos... con independencia del resto de capas. Hay que tener en cuenta que todas las capas comparten la misma Lnea de Tiempo y por tanto, sus distintos fotogramas se reproducirn simultneamente. Clarifiquemos esto con un ejemplo: Supongamos que tenemos 2 capas. En una de ellas los fotogramas del 1 al 10 contienen el dibujo de una portera de ftbol. En la otra los fotogramas del 1 al 5 contienen el dibujo de un portero (del 5 en adelante estn vacos). Pues bien, esta pelcula nos mostrar inicialmente (durante el tiempo que duren los primeros 5 fotogramas) la portera con el portero, para despus (durante los fotogramas del 5 al 10) mostrar la portera sin portero. De este modo la portera es independiente del portero, y podemos tratar estos objetos con total libertad, ya que no interfieren entre ellos para nada.
50
Otra razn para separar los objetos en capas, es que Flash nos obliga a colocar cada animacin distinta en una capa. De lo contrario, todos los objetos que se encuentren en dicha capa formarn parte de la animacin. Si queremos que un objeto no forme parte de una animacin, deberemos quitarlo de la capa en la que se produce dicha animacin. Siguiendo con el ejemplo del portero, si quisiramos crear un movimiento que haga que el portero se desplace hacia un lado no hay ningn inconveniente, pero si la portera estuviera en la misma capa que el portero, entonces ambos objetos se moveran hacia dicho lado, con lo que resultara imposible que slo se moviera el portero. La solucin es separar los objetos en 2 capas, como ya hemos hecho. Las capas adems, tienen otras utilidades, nos permiten ordenar nuestra pelcula de forma lgica, y nos ayudan en la edicin de dibujos (evitando que se "fundan" en uno slo, o bloqueando el resto de capas de modo que slo podamos seleccionar la capa que nos interese). Otro motivo es para organizar mejor nuestro contenido. Igual que crebamos una capa para los elementos de audio, crearemos capas para otros elementos, como el cdigo ActionScript.
8.2. Trabajar con capas.

La vista estndar de una capa es la que muestra la imagen. Veamos para qu sirven los distintos botones y cmo usarlos.
Nueva capa : Como su nombre indica, sirve para Insertar una nueva capa en la escena actual. Crea capas normales (en el siguiente punto se vern los distintos tipos de capas). Crear carpeta capas. Borrar Capa : Nos sirve para crear carpetas, que nos ayudarn a organizar nuestras
: Borra la capa seleccionada.
Cambiar Nombre: Para cambiar el nombre a una capa, basta con hacer doble clic en el nombre actual. Propiedades de Capa: Si hacemos doble clic sobre el icono junto al nombre de la capa, podremos acceder a un panel con las propiedades de la capa en la que hayamos hecho
51
clic. Podremos modificar todas las opciones que hemos comentado anteriormente y alguna ms de menor importancia.
Aqu puedes cambiar diferentes opciones sobre la capa, como su nombre o su color. Tambin puedes bloquearla u ocultarla. Pero haremos especial hincapi veremos ms adelante en el curso. en la opcin Tipo cuyas opciones, Gua y Mscara,
83. Trabajar con capas ( Opciones avanzadas)

Mostrar / Ocultar Capas : Este botn permite ver u ocultar todas las capas de la pelcula. Es muy til cuando tenemos muchas capas y slo queremos ver una de ellas ya que permite ocultar todas a la vez, para despus mostrar slo la actual. Para activar la vista de una capa en concreto (o para ocultarla) basta con hacer clic en la capa correspondiente en el punto (o en la cruz) que se encuentra bajo el icono "Mostrar / Ocultar capas" Bloquear Capas : Bloquea la edicin de todas las capas, de modo que no podremos modificarlas hasta desbloquearlas. Para bloquear o desbloquear una capa concreta, procederemos como en el punto anterior, clic en el punto o icono "Cerrojo" situados en la capa actual bajo el icono "Bloquear Capas". Bloquear una capa es muy til cuando tenemos varios objetos juntos y en capas distintas y queremos asegurarnos de que no modificamos "sin querer" alguno de ellos. Tras bloquear su capa podremos trabajar con la seguridad de no modificar dicho objeto, ni siquiera podremos seleccionarlo, de modo que editaremos con mayor facilidad el objeto que queramos.
52
Mostrar/Ocultar capas como contornos : Este botn nos muestra/oculta los contenidos de todas las capas como si slo estuviesen formados por bordes. De este modo y ante un conjunto numeroso de objetos, podremos distinguirlos a todos de forma fcil y podremos ver en qu capa est cada uno de ellos.
Tambin se puede activar o desactivar para cada capa de un modo similar a los anteriores botones. Veamos cmo se muestran estas opciones activadas y desactivadas.
En la primera imagen la capa actual no tiene ninguno de los botones activados, podemos observar que en la columna Mostrar Capas aparece un punto. Este punto significa que no est activada esta opcin, lo mismo sucede con el botn Bloquear capas. En la columna Mostrar capas como contornos aparece un cuadrado con relleno, lo que simboliza que los objetos se mostrarn completos y no slo sus contornos. En la segunda imagen aparece una cruz situada bajo la columna Mostrar Capas, lo que indica que dicha capa no es visible en el escenario. Aparece un cerrojo bajo la columna "bloquear capas", lo que simboliza que la capa est bloqueada. Y en la columna "Mostrar capas como contornos" NO aparece relleno. La capa se est mostrando en este modo y no podremos ver los rellenos hasta deseleccionar esta opcin. Adems, el color de los contornos ser diferente para cada capa, de modo que podamos distinguirlas mejor. El color del contorno, coincidir con el indicado en cada capa. En este ejemplo podis ver cmo queda un objeto en funcin de tener activada o no la opcin contorno:
53
8.4. Reorganizar las capas.

Como ya se ha comentado, las distintas capas tienen muchas cosas en comn unas con otras. Lo primero y principal es la Lnea de tiempo, todas las capas de una misma escena comparten la misma lnea de tiempos y por tanto, los objetos de todos los fotogramas 1 de todas las capas se vern al mismo tiempo en la pelcula superpuestos unos sobre otros. y qu objeto est delante de los dems? Pues este criterio viene dado por la colocacin de las Capas en la pelcula. Los objetos que se mostrarn delante de todos los dems sern aquellos que se encuentren en la capa situada ms arriba. Es decir, si nos fijamos en el ejemplo anterior: El portero aparece delante de la portera, porque la capa "Portero" est situada encima de la capa "Portera", como puede apreciarse en la imagen. Si quisiramos cambiar esta distribucin, basta con hacer clic en la capa que queramos mover y arrastrarla hacia arriba o hacia abajo hasta la posicin deseada. Veremos como los objetos se colocan delante o detrs de los de la capa seleccionada segn su capa se encuentre por encima o por debajo de la nuestra.
Para mover un objeto de una capa a otra, deberemos seguir unos sencillos pasos. Para mover un fotograma de una capa a otra, basta con seleccionar el fotograma a mover y arrastrarlo hasta la capa donde queramos pegarlo. Tambin se puede Copiar el fotograma y luego pegarlo en la capa de destino.
54
8.5. Tipos de capas.

Como habris podido comprobar al ver las propiedades generales de una capa o al hacer clic con el botn derecho del ratn sobre el icono de una capa cualquiera, existen varios tipos de capas.
A) Capas normales. Son las capas por defecto de Flash y tienen todas las propiedades descritas en los puntos anteriores. Son las ms usadas y se emplean para todo, colocar objetos, sonidos, acciones, ayudas... B) Capas animacin movimiento. Son las capas que contienen una animacin por interpolacin de movimiento. C) Capas Gua / :
Son capas especiales de contenido especfico. Se emplean en las animaciones de movimiento de objetos y su nico fin es marcar la trayectoria que debe seguir dicho objeto. Debido a que su misin es representar la trayectoria de un objeto animado, su contenido suele ser una lnea (recta, curva o con cualquier forma). En esta imagen podemos ver el contenido de 2 capas. La primera de ellas contiene la bola azul y la segunda contiene la lnea curva. La segunda capa la hemos definido como Capa Gua, para que al realizar la animacin de movimiento (esto lo veremos en un tema posterior) su contenido no se vea en la pelcula, sino que sirva de recorrido para la bola azul. Es importante recordar que el contenido de las Capas Gua no se ver en la pelcula final. Su efecto har que la pelota azul se desplace de un extremo de la lnea al otro siguiendo esa ruta.
55
D) Capas guiadas (Guided Layers). Definir una capa como gua no tiene sentido hasta que definamos tambin una capa guiada. Esto es, una capa que quedar afectada por la gua definida en la Capa gua. Si no definimos una capa guiada, la capa gua no tendr ningn efecto y si bien no se ver en la pelcula (por ser una capa gua) tampoco provocar ningn efecto en las dems capas. En la imagen anterior, la bola azul se deber encontrar en una capa Guiada, de lo contrario no seguir la ruta marcada por la capa gua. Las capas gua y las capas guiadas se relacionan entre s de un modo evidente. A cada capa gua le corresponden una serie de capas guiadas. Al asociar una capa gua con una capa guiada, el icono que representa a la capa gua cambia, indicndonos que est realizando correctamente su labor. En la imagen podemos ver un ejemplo de capa gua y capa guiada correctamente asociadas entre s. (La capa llamada inferior es, evidentemente, la capa con Gua)
El funcionamiento de las Capas Gua y sus utilidades lo veremos a fondo en el tema de las Animaciones E) Capas Mscara. Estas capas se pueden ver como plantillas que tapan a las capas enmascaradas (las veremos enseguida). El funcionamiento de estas capas es algo complejo (tampoco demasiado) y se analizar en temas posteriores. Basta con decir que estas capas se colocan "encima" de las capas a las que enmascaran y slo dejan que se vea la parte de stas que tapan los objetos situados en las capas mscara (son como filtros). Al igual que las capas gua, los objetos existentes en este tipo de capas tampoco se ven en la pelcula final. S se vern los objetos de su correspondiente capa enmascarada a los que estn "tapando". F) Capas Enmascaradas. Estas capas funcionan conjuntamente con las anteriores, ya que son las capas que estn bajo las mscaras y a las que afectan. Al igual que las capas gua y las capas guiadas deben ir asociadas unas a otras para que su efecto sea correcto. Sus objetos s que son visibles en la pelcula final, pero slo cuando algn objeto de la capa Mscara est sobre ellos.
Veamos el funcionamiento de estas capas con un ejemplo. En este ejemplo, los rectngulos azules forman parte de la Capa Enmascarada y por tanto se vern en la pelcula final (pero slo lo que tape la capa mscara). El valo rojo est situado en la capa Mscara y no se ver en la pelcula, pero slo se ver lo que l "tape", que es lo que se ve en la imagen de la derecha. As se emplean las mscaras...
56
9. Smbolos.
9.1. Smbolos
Los Smbolos provienen de objetos que hemos creado utilizando las herramientas que nos proporciona Flash CS5. Estos objetos al ser transformados en smbolos, 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 pelcula. Los smbolos nos resultarn fundamentales a la hora de crear nuestras animaciones.
9.2. Cmo crear un smbolo

La accin de crear un nuevo smbolo es una de las ms usadas en Flash ya que es uno de los primeros pasos para crear una animacin, como veremos ms adelante. El procedimiento es el siguiente: 1) Seleccionamos el o los objetos que queramos convertir en un smbolo. Lo ms habitual es partir de una forma. 2) Abrimos a la ventana Convertir en smbolo, accediendo al men Insertar Nuevo Smbolo, desde el men contextual eligiendo Convertir en smbolo, o directamente con las teclas Ctrl + F8 o F8. 3) Una vez hecho esto nos aparecer una ventana como la mostrada en la imagen. Introducimos el nombre del smbolo que vamos a crear, y que nos permitir identificarlo en la biblioteca, lo que se har imprescindible cuando tengamos muchos smbolos.
4) Slo nos queda seleccionar el tipo de smbolo (desplegable Tipo) al que queremos convertir nuestro objeto. Podemos elegir entre Clip de Pelcula, Botn y Grfico. Sus caractersticas y las diferencias entre ellos las veremos en temas posteriores. Lo ms habitual es Clips de pelcula para los objetos que queremos mostrar en el escenario, y Botn si queremos que acte como tal. 5) Bastar con pulsar Aceptar para tener nuestro smbolo creado.
57
9.3. Las Bibliotecas.

En Flash CS5 podemos encontrar dos tipos de bibliotecas, las bibliotecas comunes y de ejemplos y aquellas asociadas a las pelculas que hemos creado. Todas ellas las tenemos a nuestra disposicin para utilizar los smbolos 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 smbolos: botones, clips o grficos.
Para acceder a la biblioteca de smbolos de la pelcula que estamos creando, de nuevo vamos a la Barra de Mens, Ventana Biblioteca. En esta biblioteca aparecern todos los smbolos que hemos creado hasta el momento. Podemos comprobar cmo el nuevo smbolo que hemos creado en el ejercicio paso a paso de la unidad anterior se ha aadido a nuestra biblioteca accediendo a ella como acabamos de indicar. Los smbolos contenidos en las bibliotecas estn identificados por su nombre y por un icono que representa el tipo de smbolo que representan: Clip Botn Grfico
9.4. Diferencia entre smbolo e instancia.

Como hemos comentado anteriormente, cuando creamos un smbolo, Flash lo almacena en una biblioteca. Pues bien, cada vez que utilicemos ese objeto en una pelcula, ste se convierte en una instancia del smbolo. Por tanto, podemos crear muchas instancias de un smbolo, pero a una instancia solo le corresponder un smbolo. Aunque parece que sean lo mismo, la importancia de esta distincin es que cuando utilicemos un smbolo que hayamos creado previamente en una pelcula y lo modifiquemos, solo alteraremos sa instancia, mientras que el objeto seguir intacto, tal y como era en el momento de su creacin, de manera que podremos volverlo a utilizar en otro momento. En cambio, si modificamos el smbolo de la biblioteca, alteraremos todas sus instancias. A la derecha tenemos un ejemplo de una biblioteca. Cada elemento de la biblioteca es un smbolo.
58
9.5. Modificar una instancia.

Hemos visto en el ejercicio anterior que podemos modificar una instancia de un smbolo sin modificar el smbolo original en cuestin. Sin embargo, al no tratarse de un grfico vectorial (veremos que significa esto ms adelante), no podemos modificar las instancias con las herramientas de dibujo de Flash CS5, pero s mediante el Panel de Propiedades, que permite la manipulacin "externa" de la instancia. As, este panel, que como hemos visto resulta sumamente til, no nos permite modificar la estructura bsica de la instancia, pero s otras propiedades, esto es, podremos hacer que la instancia tenga ms brillo, pero no transformar una estrella en un crculo). Esos cambios debemos de hacerlos directamente sobre el smbolo. Aunque s podremos crear un smbolo a partir de una instancia, lo que desvincular la instancia del smbolo original.
8.6. Panel propiedades de instancia.

Para acceder al panel de propiedades de instancia, debemos seleccionar en primer lugar la instancia que queramos modificar y posteriormente abrir el panel Propiedades. Si seleccionamos un objeto Flash que no se trate de un smbolo, el Panel Propiedades mostrar las propiedades del objeto en cuestin, pero no las caractersticas propias de los smbolos (cambios de color, intercambios etc...) En el momento que seleccionemos un smbolo aparecern una serie de propiedades y opciones que comentamos a continuacin:
Nombre y su icono correspondiente: El nombre de la instancia es muy importante, pues permite identificarla durante la pelcula, y veremos ms adelante que resulta imprescindible para acceder mediante ActionScript. El nombre, se introduce en el recuadro donde pone por defecto <Nombre de instancia>, y debe de ser nico. El icono asociado nos permite saber qu tipo de smbolo es de un vistazo rpido. Tipo de la instancia. Por defecto se nos muestra el tipo al que perteneca el smbolo original pero nosotros podemos cambiarlo para que cambie su comportamiento, aunque pueda seguir manteniendo su estructura inicial (en la imagen es Botn). Smbolo de la Instancia seleccionada (Instancia de:). Esta opcin nos muestra el smbolo raz del que proviene la instancia que estamos modificando. Intercambiar: Esta opcin merece especial atencin, pues es muy til y nos ahorrar mucho trabajo cuando sea necesaria emplearla. Su funcin consiste en cambiar el smbolo
59
de la instancia por cualquier otro que tengamos en nuestra Biblioteca, por lo que la instancia tomar el aspecto del nuevo smbolo. Puede parecer simple, pero durante el desarrollo de un trabajo profesional rpidamente surge la necesidad de probar situaciones y los diseos grficos definitivos no suelen estar disponibles hasta bien avanzado el proyecto. Gracias a esta opcin podemos trabajar tranquilamente con un "boceto" y sustituirlo de un modo efectivo (el nuevo smbolo hereda las propiedades del antiguo smbolo, incluido el nombre de instancia, las acciones que le afectarn, efectos grficos etc...) cuando llegue el momento.
En la imagen se puede observar el panel Intercambiar Smbolo.
Este panel adems, incorpora el botn Duplicar Smbolo cuya funcionalidad es la que nos podemos imaginar. Es muy til cuando queremos hacer pruebas con un smbolo y no queremos perderlo. Lo duplicamos y trabajamos tranquilamente con la copia.
9.7. Efectos sobre instancias.

Para acceder a los efectos aplicables sobre una instancia determinada, debemos acudir nuevamente al Panel Propiedades, desde aqu podremos acceder a todos los efectos que Flash nos proporciona. En el grfico de la derecha se puede observar la pestaa Estilo: del Panel Propiedades. Hay varios tipos de efectos. Si el smbolo se acaba de crear o si no tiene efecto asignado aparecer en la pestaa Ninguno. En el siguiente apartado comentamos los distintos efectos aplicables a una instancia.
60
A continuacin mostraremos los tipos de efectos. Para ello partiremos de la siguiente imagen original:
A) Brillo. Se puede modificar su valor desde -100% al 100%, esto es, completamente oscuro (negro) y completamente brillante (blanco). Puedes mover la barra deslizante o introducir su valor directamente en la casilla.
Efecto Brillo del 50 % B) Tinta. Esta opcin permite cambiar el color de la instancia, pero puesto que, como dijimos, no podemos modificar la instancia internamente, al variar el color en la pestaa Tinta o bien mediante los valores RGB (cantidad de rojo, verde y azul), se cambiar el color de toda la instancia como si la estuviramos tiendo o poniendo una capa imaginaria de un color determinado. El grosor o intensidad de esta "capa" la podemos modificar en porcentaje mediante la primera pestaa que aparece a la derecha.
Efecto Tinta del 50 % con el color verde (0 255 0)
61
C) Alfa. Representa el grado de visibilidad o transparencia que se tendr de la instancia en cuestin. Tambin se puede modificar mediante valor directo o con la barra deslizante y es muy til para animaciones de aparicin y desaparicin de objetos. Si aplicamos un efecto alpha sobre una instancia que est encima de otro objeto, el objeto que antes estaba tapado se podr ver a travs de la instancia.
Efecto Alfa del 65 % sobre el pez naranja D) Avanzado. Aqu podemos aplicar todos los efectos anteriores al mismo tiempo de manera ms precisa, con la ventaja de que podemos ponerle un poco de cada uno, dando lugar a efectos de gran vistosidad.
Sobre el pez superior. Hemos aplicado un efecto Alfa del 65 % y hemos reducido al 45 % la cantidad de verde a la vez que hemos multiplicado la cantidad de azul por 111, obteniendo el tinte rosa translcido que se observa. A medida que modifiquemos los efectos sobre las instancias, podremos ir viendo el resultado sobre el propio escenario. Es importante recalcar, que en los efectos anteriores estamos modificando instancias de un smbolo, pero que el smbolo original sigue intacto.
62
10. Grficos.
10.1. Grficos.
Los Grficos son smbolos que nos permiten representar objetos estticos y animaciones sencillas. En caso de que utilicemos un smbolo grfico para realizar una animacin, debemos tener en cuenta que sta estar ligada a la lnea de tiempo de la pelcula en la que se encuentre. Es decir, la animacin se reproducir siempre y cuando la pelcula original tambin se est reproduciendo. Esto hace que, pese a tener su propia lnea de tiempo, no puedan contener sonidos, controles ni otros smbolos grficos. As pues, normalmente utilizaremos los grficos para imgenes estticas o para cuando nos convenga que una animacin se reproduzca slo cuando determinado frame de la lnea de tiempo de la pelcula est en marcha, ya que para los casos que hemos comentado anteriormente en los que un grfico no nos es til, Flash nos ofrece otro tipo de smbolos como veremos en temas posteriores.
10.2. Tipos de grficos.

Los grficos pueden ser: a) Estticos. Estos grficos se mantienen sin cambios cuando pasa el tiempo. Estos grficos son los tpicos en los fondos y en los objetos que no desempean ninguna funcin especial. Su tamao y por tanto, el tiempo de carga de este tipo de grficos, aunque siempre depender de la resolucin, de sus dimensiones y de la forma en la que estn creados *, ser en general reducido. c) Animaciones. Este tipo de grfico vara su forma, posicin u otras propiedades a medida que va pasando el tiempo. Puesto que para realizar la animacin se deben usar varios grficos ms adems del original o bien realizar determinadas acciones que modifiquen el estado inicial, el tamao de esta clase de grficos, para las mismas dimensiones y forma de creacin, ser mucho mayor que uno esttico. Por esto, aunque las animaciones dan a nuestra web un aspecto ms bonito y espectacular tienen dos inconvenientes: 1) Si se trata de un Mapa de Bits (ahora veremos que significa esto) la web puede llegar a tener un tamao excesivamente grande.
63
2) Aunque no se traten de mapas de bits, por ejemplo, si son animaciones tpicas de Flash, cuyo tamao no es excesivo, el hecho de poner muchas animaciones puede llegar a "marear" un poco al visitante de nuestro sitio y desviar su atencin de lo que realmente importa, su contenido. Los tipos de grfico anteriores pueden ser, a su vez de dos tipos, segn la forma en la que estn creados: Grfico Vectorial o Mapa de Bits.
10.3. Creando un grfico y comprobando sus propiedades.

Como explicar tericamente las propiedades de un grfico resulta un tanto confuso, vamos a ver de manera prctica lo que queremos explicar. Vamos a crear un grfico en Flash y a comprobar las propiedades que hemos comentado en el primer apartado del tema. Para ello, abre una nueva pelcula Flash (Archivo Nuevo, archivo ActionScript 3). Ahora tenemos que crear el objeto que queremos convertir en un smbolo Grfico. Dibujemos, por ejemplo, un valo en cualquier lugar del rea de trabajo con la herramienta valo de la barra de herramientas de dibujo y dmosle un color de relleno que ser lo que despus 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 smbolo grfico lo recuerdas? Selecciona el objeto, haz clic derecho sobre el o haz clic en el men modificar y selecciona Convertir en Smbolo, lo convertimos en un smbolo como ya habamos visto y dndole el nombre GrficoAnimado y seleccionando el Tipo Grfico:
Ahora vamos a crear la animacin del grfico. Puesto que todava no hemos visto a fondo las animaciones, la vamos a realizar de una forma que quiz no sera la ms apropiada la mayora de las veces, pero nos servir muy bien para este ejemplo. Para ello selecciona nuestro grfico y pulsa el botn derecho del ratn. Se desplegar un men, en el que seleccionaremos la opcin Edicin para modificar el grfico y acceder a su lnea de tiempo. Comprueba que ests en la lnea de tiempos del grfico (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 - Grfico Animado" y, por tanto estamos dentro del grfico (y la lnea de tiempos que vemos es la del grfico, y no la de la pelcula principal)
64
Crearemos a continuacin nuevos fotogramas clave seleccionando uno a uno los frames nmero 2, 3 y 4 y pulsando F6 cuando los seleccionemos. Pulsa sobre el frame 2 y cmbiale el color de fondo al valo como hicimos antes. Haz lo mismo en los dos siguientes frames. Tu lnea de tiempos debera tener este aspecto:
Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al nivel inicial (Pelcula principal) y podremos ver nuestro grfico "desde fuera". Ahora ya tenemos completo nuestro grfico animado. Qu crees que suceder si reproducimos la pelcula? Comprobmoslo pulsando Control + Intro, se visualizar la pelcula. Y bien? Nada. Nada en absoluto. El valo sigue tal cual. Por qu? La respuesta est en las caractersticas de los grficos que habamos explicado: la lnea de tiempos del grfico va ligada a la de la pelcula. En este caso la lnea de tiempos de la pelcula tena un solo frame, mientras que la del grfico tena 4, por tanto, no le hemos dado tiempo al grfico a desarrollar su animacin; slo ha reproducido un frame, el primero. Cmo podemos solucionarlo? Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana del reproductor de Flash, selecciona el fotograma 5 de la pelcula principal y pulsa F6. Ahora tenemos 5 fotogramas en la pelcula principal. Pulsa de nuevo Control + Intro. El resultado podra ser ste:
65
10.4. Introducir un Mapa de bits.

Los grficos de tipo Mapa de Bits pueden crearse con muchos programas. Si deseas que en tus pelculas hayan mapas de bits lo ms seguro es que prefieras crearlos y hacerlos ms espectaculares en otro programa ms apropiado que Flash para el manejo de Bitmaps: Photoshop, Fireworks, GIMP, etc... Flash CS5 permite importar mapas de bits de otros programas, cuando han sido guardados en formatos grficos GIF, JPG, TIFF y muchos ms. Tambin nos permite modificarlos en cierto modo. Podemos cambiarle el tamao y convertirlo en un smbolo para aprovechar las opciones que nos ofrece Flash aunque, teniendo en cuenta qu es un bitmap, no podremos modificarlo "internamente" pero podremos usarlo como un smbolo ms. Para importar un archivo de Mapa de men Archivo Importar Importar a escenario. Bits al escenario haz clic en el
Se abrir el cuadro de dilogo de Importar, all debers seleccionar el formato de imagen que quieres importar seleccionndolo en el desplegable Tipo. Luego navega por las carpetas hasta encontrarlo. Seleccinalo haciendo clic sobre l y pulsa el botn Abrir. La imagen se incluir en el escenario y estar lista para trabajar con ella.
10.5. Introducir un archivo vectorial.

Al igual que los mapas de bits, hay otros programas que trabajan con grficos vectoriales como tambin hace Flash CS5. Si queremos traer un archivo vectorial creado en otro programa, por ejemplo Freehand o Illustrator, podemos hacerlo de manera muy sencilla. Simplemente accedemos al men Archivo Importar Importar a escenario. A continuacin, seleccionamos el tipo de archivo correspondiente al grfico vectorial que queramos importar. Por ejemplo AI de Illustrator. Pulsamos Abrir, y ya tenemos nuestro archivo vectorial.
66
Este archivo s lo podremos modificar internamente ya que Flash es capaz de hacer grficos de este tipo. Concretamente, Illustrator pertenece tambin a Adobe, igual que Flash, con lo que la compatibilidad en este caso es total.
10.8. Crear un GIF animado con Flash.

Como vimos en el tema bsico hay tipos de archivo de mapa de bits que soportan animaciones, como los GIF. Pues bien, con Flash tambin podemos crear una animacin y guardarla como un GIF animado. Los fotogramas de la pelcula se convertirn en fotogramas del GIF. Para lograrlo, tenemos que publicar la pelcula como GIF, lo cual configuramos desde la Configuracin de publicacin, en el men Archivo. Entre los formatos disponibles, marcamos Imagen GIF.
Y configuramos algunos parmetros pulsando en su pestaa: Entre las opciones concretas del GIF, hay dos que afectan a la animacin: En Reproduccin, podemos marcar Esttica (por defecto) o Animacin. Debemos de elegir esta ltima para que el gif sea animado. Si es grfico es animado, podemos seleccionar cuntas veces se repite dicha animacin. Entre Reproducir indefinidamente en bucle, o Repetir un nmero determinado de veces. Otra opcin muy interesante es Transparente, en la que decidimos cmo se exporta el escenario. Si como un color opaco o transparente. Abajo vemos el GIF Animado que resulta de exportar nuestro grfico Flash.
67
11. Clips de Pelcula.

11.1. Clip de pelcula.
Un Clip de Pelcula, simplemente Clip o MovieClip es una pelcula en s misma, como cualquiera de las que podamos haber creado hasta el momento en este curso. Normalmente nos referimos a ellas como clips cuando las incluimos en otra pelcula, formando un smbolo. Por tanto, cualquier clip siempre podr estar compuesto por otros clips insertados en l, que a su vez estn formados por otros, etc. Al igual que los otros tipos de smbolos de Flash, los clips de pelcula tienen su propia lnea de tiempo. Sin embargo, y a diferencia de los Grficos (como veremos a continuacin), esta lnea temporal no est ligada a la lnea de tiempo del documento que lo contiene, de tal forma que su ejecucin es independiente, y en un fotograma de la pelcula principal se puede estar reproduciendo repetidamente un clip. Este tipo de smbolos puede contener cualquier otro tipo de smbolo: grfico, clip o botn, as como cualquier objeto creado con Flash, ya que un clip es realmente una pelcula. Otra de las ventajas de los Clips la encontramos cuando realizamos pelculas de gran complejidad y tamao, en la que intervienen un nmero muy elevado de fotogramas, debido a que en la vista general del documento, nosotros slo veremos un fotograma por clip, el cual puede estar compuesto por muchos frames, lo que nos permitir tener una mejor visin de cmo se desarrolla nuestra animacin, y una lnea de tiempo ms clara y "limpia" Los Clips son una de las herramientas que dan mayor potencia a Flash CS5, permitindonos crear pelculas de gran complejidad y multiplicar los efectos visuales, ya que se pueden crear mltiples movimientos independientes entre s y crear conexiones entre los diferentes Clips de un documento. Todas aquellas cosas que no podamos hacer con un smbolo de tipo Grfico, lo podemos hacer con un Clip, adems de poder realizar tambin todo aquello que nos permita dicho smbolo. Por esto, normalmente se utilizan los clips para cualquier tipo de animacin debido a su gran flexibilidad, dejando los grficos slo para imgenes estticas.
11.2. Comprobar las propiedades de un Clip.

Como hicimos con los grficos, vamos a ver como la lnea de tiempo de un clip no est ligada a la lnea de tiempo del documento que lo contiene y, a la vez, veremos la diferencia entre los clips y los smbolos Grficos, que supone una de las razones de la mayor utilizacin de los primeros en lo que se refiere a la creacin de animaciones. Para ello abriremos una nueva pelcula Flash (Archivo Nuevo, archivo ActionScript 3). Despus importaremos una imagen cualquiera o bien
68
crearemos una. La convertimos en Smbolo (botn derecho, Convertir en smbolo...) y seleccionamos en Tipo "Clip de Pelcula" Arrastramos al escenario (si no est ya all) nuestro clip de pelcula. Ahora tenemos nuestro Clip, insertado en nuestro nuevo documento Flash. Es decir, tenemos dos pelculas, cada una con su lnea de tiempo. Ahora veamos que son independientes, siguiendo un proceso similar al que utilizamos con los smbolos de tipo Grfico. Observa la lnea de tiempo de la pelcula principal y comprueba que slo tiene un fotograma.
Editemos el Clip que insertamos en el documento, haciendo doble clic sobre l y examinemos su lnea de tiempos. Aparecer un nico MovieClip. Podemos realizar algo similar a lo realizado con los grficos. Si cresemos una animacin de movimiento, como veremos ms adelante, podra quedarnos as:
Como vemos, la duracin del clip que hemos insertado es mucho mayor que la pelcula nueva que lo contiene. Si el smbolo fuera un grfico ya hemos visto que al reproducir la pelcula no ocurrira nada, porque slo se reproducira el primer fotograma de su lnea de tiempo. En cambio, al tratarse de un clip, comienza a reproducirse al pasar por el primer fotograma, y como la liena de tiempo es independiente, sigue reproducindose aunque la lnea de tiempo principal haya acabado.
11.3. Crear un nuevo Clip.

Como hemos comentado, utilizaremos normalmente Clips para hacer animaciones. Aunque no lo hayamos comentado antes, se puede crear un smbolo Flash de la nada, igual que creamos un nuevo archivo, de forma que se quede en la biblioteca y podamos editarlo cuando nos convenga. Esto puede ser interesante en los clips, ya que a diferencia de los grficos, su finalidad suele ser el movimiento y, en animaciones complejas, en ocasiones se les asignan acciones especiales en las cuales puede que no sea necesario crearlo en ese momento o convenga dejar el clip vaco. Por esto, es interesante aprender cmo crear un smbolo, en este caso un clip, de la nada para despus modificarlo.
69
Para insertar un clip vaco haz clic en Insertar Nuevo smbolo y se abrir el cuadro de dilogo de Crear un nuevo smbolo. All debers darle un Nombre para identificarlo ms tarde en la Biblioteca y seleccionar la opcin Clip de Pelcula en el desplegable Tipo. A partir de este momento tendremos un nuevo clip (vaco) al cual podremos acceder desde nuestra Biblioteca (men Ventana Biblioteca), si hacemos clic derecho sobre l y seleccionamos Edicin, podremos editarlo y trabajar con l. Cuando estudiemos las animaciones haremos ejemplos de animaciones mediante clips de pelcula y veremos el potencial real de este tipo de smbolos.
11.4. Importar y exportar MovieClips de la Biblioteca.

Como para todos los smbolos los Clips se almacenan en la biblioteca del documento cuando son creados. Esto es muy importante en muchos casos ya que habitualmente los clips son muy reutilizables. Para importar clips de otra pelcula debemos abrir primero la biblioteca en la que est contenido. Hemos visto en el tema de Smbolos, tenemos dos tipos de bibliotecas: las que estn asociadas a documentos u otras pelculas y las que nos proporciona Flash CS5. Pues bien, no slo podemos utilizar smbolos del mismo documento en el que estamos sino que podemos importarlos de otros documentos de nuestro disco duro, lo que, en el caso que nos ocupa, puede resultar de gran utilidad. Obviamente la exportacin mediante biblioteca se hace automticamente ya que Flash deja los objetos creados en la biblioteca para que puedan ser reutilizados. Para importar un Clip de un archivo del disco duro debemos ir al men Archivo Importar Abrir biblioteca externa..., seleccionar el Archivo Flash (.fla) del que queremos importar sus smbolos de biblioteca y pulsar Abrir.
Aparecer la biblioteca con la lista de los smbolos correspondientes a los grficos, botones y clips del documento en cuestin. Es importante destacar que cuando insertemos un clip de una biblioteca, se insertarn a su vez todos los smbolos que contenga, incluidos los clips. Existe otra forma mucho ms cmoda: si tenemos dos documentos abiertos, podemos arrastrar los elementos directamente de un escenario a otro.
70
12. Botones.
12.1. Botn.
Los smbolos de tipo Botn son los que aportan la mayor parte de la interactividad de las pelculas Flash con aquel que las est visualizando. Un botn, en Flash, es igual que un botn de cualquier entorno informtico, sea web o cualquier otro. Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una serie de acciones. Tambin es habitual ver cmo este tipo de elementos reaccionan cuando se les pasa el ratn por encima o cuando estn pulsados. La interfaz de Flash est diseada de manera especial para la creacin de botones, lo que nos permite crear todos estos efectos de una manera muy sencilla. Al igual que los otros smbolos de Flash CS5, los botones tienen su propia lnea de tiempo. Esta es independiente pero, sin embargo, est formada nicamente por cuatro fotogramas, uno para cada estado posible del botn:
Reposo. Aspecto por defecto del botn, es decir, cuando el puntero del ratn no est situado sobre l. Sobre. Aspecto del botn cuando situamos el puntero sobre l. Presionado. Apariencia que deseamos tenga nuestro botn mientras lo mantengamos pulsado. Zona activa. Aqu debemos indicar el rea real en la que queremos que acte nuestro botn. Esto es importante sobre todo en botones compuestos slo por texto como veremos ms adelante.
Parece que la limitacin de fotogramas podra implicar una limitacin en la capacidad de espectacularidad y utilidad de estos smbolos, pero no es as. Ten en cuenta que podemos tener todas las capas que queramos.
71
Los botones pueden contener a su vez otros smbolos, como clips o grficos (tambin de tipo Bitmap). La unin de las posibilidades de todos los smbolos pueden dotar a los botones de efectos asombrosos. Todo esto es lo referente a la apariencia del botn. Despus, tenemos que programar lo que queremos que haga el botn, cmo queremos que afecte a la pelcula. Y esto lo haremos con ActionScript. 12.2. Creacin de un botn En la creacin de un botn podemos considerar dos fases. En la primera vamos a convertir nuestro objeto a smbolo de tipo botn y posteriormente veremos cmo completarlo internamente, lo que nos ayudar a entender mejor dicha estructura. Comenzamos creando el objeto que representar el aspecto por defecto de nuestro botn con las herramientas que nos ofrece Flash CS5. Recuerda que puedes usar varias capas. Seleccionaremos el objeto y accederemos al men Insertar Convertir en Smbolo, le daremos el Tipo Botn y asignaremos un nombre a nuestro nuevo smbolo.
De esta forma ya tenemos transformado el objeto para que se comporte como un botn. Ahora lo completaremos internamente. Para determinar cmo debe reaccionar el botn en funcin de las acciones del ratn, lo editaremos haciendo clic con el botn derecho del ratn sobre nuestro nuevo botn y seleccionando la opcin Editar. Cuando tengamos delante la lnea de tiempo del botn (observa que tiene el aspecto que hemos mostrado anteriormente), seleccionaremos cada uno de los frames (sobre, reposo, presionado y zona activa) y pulsaremos F6 para crear un fotograma clave en cada uno de ellos.
72
Ahora ya podemos modificar el aspecto inicial del botn para cada posicin del cursor y marcar el rea de accin del botn (fotograma Hit) en la que simplemente podremos dejar la misma figura que la inicial (en este caso slo es importante la forma del objeto, no los colores u otras cosas) o bien dibujar con las herramientas de dibujos de Flash una nueva figura, en cuya superficie "se sentir aludido" nuestro botn. Como resultado obtenemos el botn que continuacin mostramos.
ste es un botn muy bsico, pero como veremos se pueden complicar mucho. Para empezar nos servir con ste. Observa cmo cambian los estados de reposo (rojo plido), sobre (rojo) y pulsado (azul). Si una vez creado el botn queremos observar sus distintos estados y todava no hemos terminado la pelcula entera y por tanto no deseamos tener que reproducirla toda podemos hacerlo a travs del menControl Habilitar botones simples. As podremos interactuar con el botn hasta que desactivemos esta opcin.
12.3. Formas en los botones.

Los botones son smbolos que pueden tener multitud de formas. Si bien lo ms habitual es ver botones rectangulares, cuadrados y circulares, cuya creacin es inmediata como vimos en el punto anterior, tambin hay otros muchos tipos de botones que, pese a ser menos utilizados, es muy habitual verlos en multitud de pginas web. Entre estos estn los creados mediante formas poligonales, aquellos que estn formados por texto nicamente, dibujos con diferentes motivos, etc. Es interesante su uso para dar ms vistosidad ya que algunos resultan ms expresivos, y en esto Flash nos ayuda mucho, debido a la relativa sencillez de creacin de botones que sus herramientas de dibujo nos ofrece. Hay varias formas de botn tambin muy extendidas, como el botn con relieve sencillo o los botones en forma de pldora. Puesto que existen muchas formas de conseguir estos efectos, a continuacin tienes un ejercicio paso a paso que muestra una forma de conseguir el relieve en un botn rectangular.
12.4. Incluir un clip en un botn.

La inclusin de clips de pelcula en los botones puede dotar a stos de ms vistosidad. Es habitual colocar un clip en el fotograma Sobre para indicar algn tipo de informacin extra o una animacin para ir ms all de un cambio de color. Tambin es comn ver un clip de pelcula actuando como un botn. Esto caso se puede hacer por ejemplo poniendo el clip en el fotograma Reposo. Veamos por ejemplo el botn siguiente:
73
Comprueba todos los estados del ratn. Por lo que nos dice el botn podemos intuir que empieza algo, pero quiz no tengamos claro qu. Ayudara a la navegacin que al ponernos sobre el cursor, el texto cambie para darnos informacin extra. Por ejemplo:
Lo nico que hemos cambiado es que tenemos el texto como un movie clip, en cuando el cursor est encima, lo cambiamos por otro con la informacin. O podemos usar los clips para animar elementos del botn, como en el siguiente ejemplo:
Incluir un Clip en un botn es muy sencillo. Tomando este ejemplo, y partiendo de que tenemos los dos textos como clips en la biblioteca, slo tendremos que: - Hacer doble clic sobre el botn para entrar en su modo de edicin. - Seleccionamos el estado Sobre para modificarlo. Selecciona la instancia del texto. Ahora tenemos dos opciones: Pulsa la tecla SUPRIMIR para eliminarlo. Desde la Biblioteca (men Ventana Biblioteca) arrastramos el clip con el nuevo texto, para crear una instancia. O la opcin ms prctica: En las propiedades de la instancia, pulsamos Intercambiar... y elegimos el nuevo objeto de texto. Por ltimo, centramos el nuevo texto en el botn, si es necesario. Ya est listo, ahora cuando pases el ratn sobre el botn el clip de pelcula empezar a reproducirse. Por supuesto, en vez de cambiar el texto podemos aadir otros clips, que simulen movimientos, reflejos, etc.
74
12.5. Bitmaps y botones.

Adems de clips, los botones tambin pueden contener smbolos de tipo Grfico. Puesto que, como ya hemos visto, todo lo que se puede hacer con un grfico se puede hacer con un clip, vamos a centrarnos en los Bitmaps que Flash nos permite importar, ya que estn muy extendidos como forma de expresin grfica a lo largo y ancho de la Red. Si consideramos las limitaciones que ya conocemos sobre los mapas de bits puede parecer poco interesante hacer uso de ellos en la creacin de botones, pero no es as. Bsicamente podemos hacer dos cosas: 1) Incluir en cada uno de los fotogramas del botn un bitmap distinto, obteniendo un efecto como el que se consigue con lenguajes como javascript o CSS. 2) Aprovechar las propiedades de los Grficos en Flash. Para esto, deberamos importar primero el Bitmap y despus convertirlo a smbolo botn. Posteriormente lo editaramos y, despus de insertar cada fotograma clave, convertiramos su contenido a smbolo Grfico. Una vez hecho esto, variando los efectos de las instancias en Flash (Alfa, Tinta, Brillo) podremos conseguir efectos bastante buenos. He aqu una pequea muestra en la que slo hemos utilizado un Bitmap de tipo GIF, sacado de la Red y lo hemos convertido en un botn grfico aplicndole un efecto Alfa (Transparencia) al estado de reposo, lo que da la sensacin de estar apagado (tambin podramos haber aplicado brillo). En el fotograma Sobre hemos dejado el GIF original para que al pasar sobre el botn de la sensacin de encenderse. Finalmente le hemos aumentado la cantidad de rojo en el fotograma Presionado para que parezca estar incandescente.
12.6. Acciones en los botones.

Puesto que existen multitud de acciones que se pueden aplicar tanto a los botones, como a otros elementos de Flash CS5 vamos a comentar dos de las ms comunes. Nota: Al crear un archivo, habrs visto que podemos elegir distintas versiones de ActionScript (3.0 o 2.0). Esto se refiere al lenguaje de programacin que podemos empelar en Flash y que lo convierte en una herramienta realmente potente. En las versiones 1 y 2, se podan agregar comportamientos directamente en las propiedades de los botones. Pero nosotros venimos empleando las versin 3.0 a lo largo del curso, por ser la ms actual y potente. Esta versin nos
75
obliga a escribir el cdigo ActionScript. Veremos cosas bsicas, y entraremos un poco ms en ActionScript a partir del tema 16. Comenzamos por crear o aadir nuestro botn, y asignarle un nombre de instancia. El nombre que le demos es muy importante, porque nos permitir acceder a l desde el cdigo. Aunque podemos escribir el cdigo en la misma capa, recomendamos crear una capa exclusivamente para el cdigo, por tenerlo todo mejor organizado. Ahora, abrimos en el panel Acciones (men Ventana Acciones). Se mostrar un rea en blanco en la que podemos escribir:
Este panel, en el rea blanca de la derecha, nos permite escribir o editar acciones directamente. De momento no profundizaremos en esto, y ta lo haremos en el tema correspondiente. Tambin encontramos la ventana Fragmentos de cdigo. Desde ella, podemos generar breves instrucciones de cdigo para el smbolo seleccionado, lo que la mayora de veces nos facilitar la tarea, ya que se trata de las opciones ms repetidas.
Sin entrar en detalle de qu es cada palabra, pues esto ya lo veremos, este es el aspecto general del cdigo asociado a un botn: 1 2 3 4 5 6 miBoton.addEventListener(MouseEvent.CLICK, accionesMiBoton); function accionesMiBoton(event:MouseEvent):void { //acciones }
Donde miBoton ser el nombre de la instancia del botn.
76
A esta instancia, le indicamos que queremos que reaccione al clic del ratn (MouseEvent.CLICK), ejecutando las acciones llamadas accionesMiBoton (podemos darle el nombre que queremos). accionesMiBoton contiene las acciones a realizar, y podemos verlo a continuacin. Solo habra que cambiar el texto //acciones por las acciones a realizar. Si tenemos varios botones, a cada uno lo referiremos por su nombre de instancia que es nico. Tambin tenemos que dar un nombre nico a accionesMiBoton para cada uno, a no ser que queramos que realicen la misma accin. Ahora veamos algunas de las acciones ms comunes. 1) Abrir una pgina web. Con esto conseguiremos abrir una pgina cualquiera de internet (o una pelcula Flash), lo que nos servir para irnos desplazando por webs que contengan ms de una pgina, o permitir al usuario descargarse archivos entre otras cosas. La forma ms sencilla de hacerlo es seleccionar el botn que queramos usar (en el siguiente ejemplo, hemos llamado a la instancia btnVisitarAulaclic) y buscar la accin que queremos en el panelFragmentos de cdigo. En la carpeta Acciones hacemos doble clic sobre Hacer clic para ir a pgina Web. Se generar un cdigo como el siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
/* Hacer clic para ir a pgina Web Al hacer clic en la instancia del smbolo especificado, la direccin URL se carga en una nueva ventana del navegador. Instrucciones: 1. Reemplace http://www.adobe.com por la direccin URL que desee. Conserve las comillas (""). */ btnVisitarAulaclic.addEventListener(MouseEvent.CLICK, fl_ClickToGoToWebPage); function fl_ClickToGoToWebPage(event:MouseEvent):void { navigateToURL(new URLRequest("http://www.adobe.com"), "_blank"); }
Lo primero que encontramos en el cdigo generado son comentarios. Este cdigo, normalmente en gris claro, no se ejecuta como tal, y solo sirve para indicar cosas al usuario. En este caso, nos da explicaciones de cmo usar el cdigo generado. Lo nico que hemos de hacer es reemplazar la url de ejemplo (www.adobe.com) por la de la pgina a la que queramos que nos enve el botn.
77
La instruccin en ActionScript que nos permite hacerlo es: navigateToURL(new URLRequest("http://www.mipagina.es"), "_blank");. "http://www.mipagina.es" se refiere a la pgina que queremos abrir, y "_blank" indica que se abrir en una pgina nueva. 2) Controlar una pelcula en curso. Si estamos reproduciendo una pelcula Flash y queremos permitir que el usuario la detenga, la ponga en marcha, avance, retroceda... Para ello podemos emplear las acciones: stop(); para detener. play(); para reproducir. gotoAndPlay(numeroFotograma); para ir a un fotograma determinado.
Por ejemplo, podemos tener el botn btnPausar para parar la pelcula y el botn btnContinuar para reproducir. Nos ser ms cmodo si usamos el panel Fragmentos de cdigo para generar el evento Clic del botn (carpeta Controladores de eventos evento MouseClick). En el cdigo generado, reemplazamos el cdigo personalizado por nuestras funciones: 1 2 3 4 5 6 7 8 9 10 11 btnPausar.addEventListener(MouseEvent.CLICK, fl_PausarReproduccion); function fl_PausarReproduccion(event:MouseEvent):void { stop(); } btnContinuar.addEventListener(MouseEvent.CLICK, fl_ContinuarReproduccion); function fl_ContinuarReproduccion(event:MouseEvent):void { play(); }
Tal cual lo hemos puesto, afectara a la pelcula principal. Si lo que queremos parar o reproducir es un clip determinado, habra que escribirlo delante de la accin, separado por un punto. Por ejemplo miClip.stop();. Reconocemos que aunque ActionScript 3.0 es ms potente que la versin 2.0, puede resultar mas liosa para usuarios sin conocimientos previos. Si quieres ver cmo seran estos mismos ejemplos en ActionScript 2, te invitamos a echar un vistazo a esta pgina de nuestro curso de Flash CS3.
78
12.7. Incluir sonido en un botn.

Si nuestras pginas van a tener sonido, el sonido en los botones es una parte fundamental. Podemos hacer, por ejemplo que se activen sonidos al pulsar un botn. Para ello, simplemente debemos editar nuestro botn y seleccionar el fotograma Presionado, e insertar el sonido. Como vimos en el tema correspondiente. Es este caso, el tipo de sincronizacin ms conveniente suele ser Evento. Por ejemplo podramos importar uno desde nuestro disco duro o bien tomar alguno que ya tengamos en la biblioteca. El resultado podra ser algo as: AUDIO SOLANO
79
13. Animaciones de movimiento.

13.1. La animacin en Flash.
Flash es un programa bsicamente orientado a la animacin, de ah la gran importancia de este tema. No obstante, para ir creando animaciones cada vez ms complicadas se necesita, sobre todo, mucha prctica, aparte de conocer bien las herramientas. En este tema y los sucesivos mostraremos las tcnicas bsicas de animacin en Flash. La unin de estas tcnicas ser la que nos permita crear las ms variadas y vistosas animaciones. En el tema de la animacin, Flash ofrece unas facilidades muy grandes, consiguiendo efectos que normalmente requieren ciertos conocimientos y espacio de almacenamiento para ser creados, como es el caso por ejemplo de los GIF animados o lenguajes de programacin como JavaScript, de una manera muy sencilla, sin necesidad de excesivos conocimientos y ocupando muy poco espacio en disco. Aunque Flash ofrece tcnicas mejores, tambin se pueden crear animaciones a modo de GIF animado. Se les denomina animaciones Fotograma a Fotograma. Estas son las animaciones ms bsicas y conviene conocerlas.
13.1.1 Animaciones fotograma a fotograma.

La animacin en Flash.
Una animacin no es ms que una secuencia de fotogramas reproducidos a una velocidad tan alta que el ojo humano no es capaz de darse cuenta del cambio de una imagen a otra. Aunque el lmite en el que el ojo humano detecta estos cambios en el monitor de un ordenador ronda los 18 fotogramas por segundo, Flash coloca por defecto sus lneas de tiempo a 24 fps. Por esto, aunque Flash CS5 incorpore tcnicas que aparentemente no utilicen secuencias sucesivas de fotogramas, como las interpolaciones de movimiento, esto no es as. En estos casos, simplemente no vemos los fotogramas "fsicamente", esto es, si la animacin ocupa 20 fotogramas en la lnea de tiempos, el hecho de que no todos sean fotogramas clave indica simplemente una mejora en la capacidad de almacenamiento porque Flash no necesita saber cules son los pasos intermedios de la animacin. Si todos fueran claves, el tamao del archivo aumentara considerablemente.
Crear una animacin fotograma a fotograma.

Aunque Flash incorpora tcnicas mucho mejores que estas, tambin permite "simular" la forma de animacin de los GIF animados, ya que en ocasiones la animacin es muy brusca o el cambio no es realizable "automticamente" con Flash o simplemente nuestro objetivo es exportar el grfico creado como este tipo de mapa de bits.
80
Para crear una animacin fotograma a fotograma basta introducir la apariencia inicial del objeto en el primer fotograma, hacer claves todos aquellos fotogramas que vayan a intervenir en ella, e ir modificndolos uno a uno, progresivamente, ya que una diferencia muy grande de un fotograma al siguiente creara un golpe brusco para el que la visualiza. Una vez completada la animacin tendremos algo como lo que mostramos a continuacin en nuestra lnea de tiempos:
Veamos la diferencia de tamaos de las diferentes tcnicas de animacin para una misma pelcula: Tenemos la siguiente animacin. La apariencia se mantendr prcticamente igual en todos estos casos, pero cabe la posibilidad de que al hacerlo fotograma a fotograma, se cometan pequeos errores de posicionamiento en la trayectoria que Flash no cometera:
Y tenemos estas tres formas de crearlo con sus respectivos tamaos: Interpolacin de movimiento. sta es su lnea de tiempo:
Tamao: 961 Bytes (0,93 KB) Fotograma a Fotograma exportado como pelcula Flash (SWF): La lnea de tiempos como vemos tiene todos los fotogramas como fotogramas clave:
Tamao: 1 KBytes
81
Fotograma a Fotograma exportado GIF Animado La lnea de tiempos igual que en el caso anterior:
Tamao: 2 KBytes Aunque las diferencias se observaran mejor en pelculas ms complejas, en este ejemplo ya podemos ver como es menor el tamao utilizando la tcnica de Flash Interpolacin de Movimiento, es sensiblemente mayor en la animacin fotograma a fotograma y es el doble para el caso del GIF animado.
La animacin en Flash.
A continuacin veremos distintos tipos de animaciones que el creador de pelculas Flash deber tomar como gua inicial. Cabe destacar que podremos aplicar varias de estas animaciones colocndolas en distintas capas. Con esto es con lo que conseguiremos los efectos ms espectaculares a la par que tiles. Desde el punto de vista del diseo general de una pgina web es muy importante tener claro un concepto: no se debe crear animaciones en pginas que no lo necesitan ni crear animaciones que distraigan al que visualice nuestros documentos de lo realmente importante, el mensaje. Ya en la versin anterior de Flash se hicieron cambios importantes en el tema de animaciones. Lo que hasta entonces se llamaba interpolacin de movimiento, pasa a llamarse interpolacin clsica y la interpolacin de movimiento actual es totalmente nueva, ms potente y verstil.
13.2. Interpolacin de movimiento.

Es la accin bsica de las animaciones en Flash. Permite desplazar un smbolo Flash de un lugar a otro del escenario, siendo necesarios nicamente dos fotogramas, lo que optimiza mucho el rendimiento de la pelcula. Es importante destacar que para que una Interpolacin de movimiento se ejecute correctamente aquellos objetos que intervengan debern haber sido previamente convertidos a smbolos. Los grficos, clips de pelcula, textos y botones son algunos de los smbolos que se pueden interpolar. Tambin se debe tener cuidado al realizar una interpolacin con dos smbolos que se encuentren en la misma capa, ya que el motor de animacin los agrupar como uno slo y el resultado no ser el esperado. Por esto es conveniente asegurarse de dos cosas:
82
1) Separar en distintas capas los objetos fijos y los que estarn animados. 2) Poner tambin en distintas capas objetos que vayan a ser animados con direcciones o formas distintas. Pasemos pues al tema en cuestin. Una interpolacin de movimiento, como hemos dicho, es el desplazamiento de un smbolo de un punto a otro del escenario. El hecho de que slo se necesiten dos fotogramas es debido a que Flash, nicamente con la posicin inicial y final, calcula una trayectoria en lnea recta y la representa (veremos que tambin se pueden realizar movimientos no rectilneos). Crearla es tan simple como hacer clic derecho sobre el fotograma que contiene los elementos y elegir Crear interpolacin de movimiento. Por defecto, se aadirn unos cuantos fotogramas, rellenos de un color azulado. Ahora vamos al fotograma final, o creamos uno clave de propiedad donde nos plazca. Y desplazamos el smbolo. Veremos que aparece una lnea punteada, por defecto recta, que representa el trazado de la animacin. Cuando realicemos la interpolacin correctamente observaremos un aspecto como este en la lnea de tiempo, en el que los fotogramas aparecen de color azul.
Esto indica que la animacin cambiar la posicin del smbolo del fotograma 1 hasta la posicin del mismo smbolo en el fotograma 24, utilizando precisamente 24 fotogramas. El nmero de fotogramas que se usen en la interpolacin indicar las subetapas de que constar la animacin. Cuantas ms subetapas ms sensacin de "continuidad" (menos saltos bruscos) pero a la vez menos velocidad en el movimiento. Podemos seleccionar cualquier fotograma y ver dnde se sita el clip en cada punto. De hecho, si en alguno de estos fotogramas lo cambiamos, se crear un fotograma clave de propiedad, mostrndose como un diamante en la lnea de tiempo. La velocidad en el movimiento de las pelculas la podemos cambiar tambin modificando su parmetro en la lnea de tiempo, pero esto no cambiar lo que hemos comentado anteriormente respecto al nmero de fotogramas.
83
La velocidad est expresada en Fotogramas Por Segundo (fps) y se puede modificar haciendo doble clic en el lugar que hemos indicado de la lnea de tiempo. A mayor valor ms velocidad, pero se deben poner siempre suficientes fotogramas para que se desarrolle la animacin como queremos. El trazado recto generado por defecto podemos modificarlo directamente haciendo clic y arrastrndolo, una vez seleccionada previamente la herramienta Seleccin.
En cualquier fotograma de la interpolacin podemos cambiar la posicin del smbolo (o cualquier otra propiedad), creando ah un fotograma clave de propiedad, que se representa por un pequeo rombo en la lnea de tiempo. La interpolacin de movimiento permite modificar muchos parmetros del movimiento mediante el Editor de movimiento, que veremos a continuacin.
13.3. El editor de movimiento.

Existe un panel que nos permite personalizar mucho ms la animacin, llamado Editor de movimiento. Para acceder a l basta tener seleccionada una interpolacin de movimiento y hacer clic en la pestaaEditor de movimiento que aparece junto a la lnea de tiempo. Como cualquier panel, tambin es accesible desde el men Ventanas. Este panel nos permite controlar multitud de propiedades y efectos que afectan a una animacin con total precisin, fotograma a fotograma. Este es el aspecto del panel: Podemos ver, a la izquierda una columna con las propiedades que podemos modificar, divididas en Movimiento bsico, Transformacin, Efectos de Color, Filtros y Suavizados. Junto a estas propiedades, aparece una columna con los valores que toma esa propiedad en el momento seleccionado de la lnea de tiempo. En la siguiente columna podemos establecer si el valor se aplica con aceleracin o no.
84
En la columna Fotogramas, podemos recorrer o eliminar los distintos fotogramas clave. Tambin los controles - y + que nos permiten aadir efectos. Y a la derecha del todo encontramos la grfica. Podemos ver que cada propiedad tiene una grfica especfica, que indica los fotogramas en horizontal y los valores de la propiedad en vertical. Si hacemos clic sobre una propiedad, veremos que su grfica se expande para editarla con facilidad. En la grfica encontramos los fotogramas clave marcados como un cuadrado negro, o verde cuando est seleccionado. Estirando de ellos, o de la lnea de la grfica podemos alterar los valores. En la grfica, vemos que los puntos suelen formar un vrtice. Una opcin muy interesante es poder transformarlos en puntos suavizados (desde el men contextual del fotograma), creando una curva Bzier, lo que formar transiciones ms suaves entre los picos de valor. Esto no es aplicable a las propiedades X,Y, Z. A lo largo de los siguientes temas veremos cmo utilizarlo de forma concreta, ahora vamos a ver en un videotutorial, cmo podemos utilizar el editor de movimiento para realizar la animacin del bote de la pelota del tema 2, utilizando una interpolacin de movimiento, en lugar de una interpolacin clsica como se hizo en ese tema.
13.4. Interpolacin clsica.

En versiones ms viejas de Flash slo haba una interpolacin de movimiento disponible, y se llamaba precisamente as, interpolacin de movimiento, en la versin Flash CS4 esa interpolacin de movimiento pas a llamarse interpolacin clsica. Una interpolacin clsica, igual que una interpolacin de movimiento, es el desplazamiento de un smbolo de uno a otro punto del escenario, muchos de los conceptos vistos en las interpolaciones de movimiento son los mismos para las interpolaciones clsicas. Por ejemplo, las animaciones tambin han de ser sobre smbolos y deben estar en una capa. Los Fotogramas Por Segundo (fps) tienen el mismo significado. Para crear una interpolacin clsica hay que hacer clic derecho sobre el fotograma que contiene los elementos y elegir Crear interpolacin clsica. Cuando realicemos la interpolacin correctamente observaremos un aspecto como este en la lnea de tiempo, con los fotogramas sobre fondo de color morado.
85
Vemos que la animacin va desde el fotograma 1 hasta el fotograma 30. Aparece una flecha que no aparece en la interpolacin de movimiento y el icono que hay a la derecha del nombre de la capa es distinto. Por supuesto, al realizar una interpolacin clsica el fotograma inicial y final debern ser diferentes, en caso contrario no se crear ningn tipo de animacin. Observa en las siguientes imgenes dnde est situada la pelota en el primer fotograma de la animacin y su posicin final en el ltimo fotograma:
Si el objeto con el que queremos hacer la interpolacin clsica no est convertido a smbolo nos encontraremos con algo as...
... y la animacin no funcionar. Tambin podemos realizar la interpolacin de otra forma, sin convertir previamente el objeto a smbolo, ya que Flash lo convierte a smbolo automticamente si no lo hacemos, dndole el nombre "Animar" ms un nmero. Esto quiz no sea lo ms conveniente en pelculas grandes, debido a lo que ya comentamos de la gran cantidad de smbolos que pueden aparecer y la confusin que crean muchos smbolos con nombres parecidos.
86
Para crear una interpolacin de este tipo, basta con tener un fotograma clave. Hacemos clic con el botn derecho sobre el fotograma en la lnea de tiempo, y seleccionamos Crear Interpolacin Clsica. Ahora, creamos un nuevo fotograma clave donde queremos que finalice la interpolacin, y modificamos los smbolos en los fotogramas clave. Veremos que si seleccionamos uno intermedio, se muestran los smbolos en su transicin al fotograma final. Podemos decidir cmo mostrar el smbolo en ese fotograma, por ejemplo movindolo. Al hacerlo automticamente se crea un fotograma clave. Esto hace que el movimiento ya no sea recto, y pueda ser en zig-zag. Si hacemos esto varias veces sobre varios fotogramas obtendremos varias trayectorias consecutivas ms. Pero recuerda, que para la mayora de casos, nos resultar ms verstil la interpolacin de movimiento.
13.5. Diferencias entre interpolacin de movimiento e interpolacin clsica.

En general las interpolaciones de movimiento son ms fciles de utilizar y ms potentes, no obstante las interpolaciones clsicas tienen caractersticas que pueden hacerlas ms interesantes para determinados usuarios. Estas son algunas de las diferencias entre los dos tipos de interpolaciones: Las interpolaciones de movimiento incluyen el trazado del movimiento, mientras que en una animacin clsica no existe el trazado, a menos que lo creemos expresamente. Slo se permiten realizar interpolaciones con smbolos, si aplicamos una interpolacin de movimiento a un objeto que no es un smbolo, Flash lo convertir en un clip de pelcula, mientras que si se trata de una interpolacin clsica lo convertir en un smbolo grfico. En las interpolaciones clsicas cuando cambia una propiedad se crea un fotograma clave y cambia la instancia del objeto, mientras que en las interpolaciones de movimiento slo hay una instancia de objeto y al cambiar una propiedad se crea un fotograma clave de propiedad. La interpolaciones de movimiento pueden trabajar con texto sin tener que convertirlo en smbolo, como ocurre en las clsicas. En un grupo de interpolacin de movimiento no est permitido usar scripts de fotograma, mientras que s es posible en las clsicas.
87
Los grupos de interpolaciones de movimiento se pueden cambiar de tamao en la lnea de tiempo. Se tratan como un objeto nico. Las interpolaciones clsicas estn formadas por grupos de fotogramas que se pueden seleccionar de forma independiente. Las interpolaciones de movimiento slo pueden aplicar un efecto de color por interpolacin, mientras que las clsicas pueden aplicar ms de uno. Los objetos 3D slo pueden animarse en interpolaciones de movimiento, no en clsicas. Slo las interpolaciones de movimiento se pueden guardar como configuraciones predefinidas de movimiento.
13.6. Cambio de forma en una interpolacin.

Acabamos de ver las interpolaciones de movimiento y las interpolaciones clsicas como un mecanismo para desplazar un smbolo Flash de un lado a otro del escenario. Sin embargo, podemos aprovechar una interpolacin para realizar animaciones en las que nuestro objeto aumente o disminuya de manera progresiva su tamao. Esto es muy sencillo con Flash, basta con modificar la instancia del smbolo en el ltimo fotograma de la interpolacin de movimiento o de la interpolacin clsica, pero esta vez cambindole el tamao. Podemos utilizar la herramienta Transformacin libre para cambiar el tamao. Por supuesto, podemos aplicar ambos efectos a la vez, de manera que el cambio de tamao se producir mientras el objeto se desplaza. Tambin podemos hacer el cambio de tamao en varias fases o secuencias encadenadas como en las interpolaciones de movimiento comunes. Otra forma es emplear el Editor de movimiento. Veremos los cambios de tamao en la seccin de Transformacin, separados en Escala X (ancho) y Escala Y (alto).
El ejemplo siguiente incorpora estas tres caractersticas de la interpolacin:
88
Y la lnea de tiempo que nos queda es algo tan sencillo como esto:
13.7. Animacin de textos.

Es indudable que para comunicar algn mensaje, en la mayora de las ocasiones, no basta con imgenes o iconos, y es aqu donde el texto cobra gran importancia. No obstante, se debe tener cuidado con la animacin de los textos, ya que resulta bastante complicado leer un texto que se desplaza o cambia de tamao. Por este motivo, un texto animado debera estar slo en las presentaciones o bien formar parte de una animacin corta y, lo que es ms importante no debera estar reproducindose infinitamente. En las presentaciones, se utilizan multitud de efectos que veremos ms adelante. Sin embargo, con lo visto hasta ahora se pueden obtener efectos interesantes. Una de las opciones ms utilizadas es separar las letras de los textos y animarlas independientemente.
13.8. Animacin de lneas.

Una buena animacin no tiene que porqu estar compuesta slo por textos o imgenes espectaculares. En ocasiones conviene darle a la pelcula un aire ms sencillo o aadir determinados efectos que la hagan vistosa sin necesidad de cargar mucho la pelcula visualmente, y en cuanto a tamao de archivo se refiere. Esto lo podemos conseguir simplemente animando lneas y haciendo que se muevan por el escenario. Esta tcnica nos permite dar dinamismo a la animacin o crear formas distintas a lo largo de su recorrido. Son especialmente tiles y vistosas en fondos oscuros y se suelen usar para formar rectngulos que se aprovechan para insertar imgenes. Aqu podemos ver un ejemplo de este tipo de presentaciones:
89
Para crear esta animacin debers crear tantas capas como animaciones de lneas vayas a crear, en el ejemplo hemos creado 4 capas. Una para el movimiento de lneas de abajo a arriba, otra para el movimiento de arriba a abajo, otra para izquierda a derecha y finalmente una ltima para el movimiento de derecha a izquierda. Tambin crearemos una capa que situaremos en la posicin superior donde colocaremos las imgenes que formarn el mensaje de bienvenida. El funcionamiento de la animacin es claro, deberemos crear interpolaciones de movimiento para cada una de las capas de lneas que en su posicin final emplazaremos en su lado contrario de la pantalla, por ejemplo, las lneas situadas en un principio en la parte inferior al final de la animacin se encontrarn en la parte superior. Realizaremos esto con las 4 capas de lneas. En la capa Imgenes crearemos animaciones que harn aparecer las imgenes que forman el mensaje de bienvenida de forma secuencial, es decir, del fotograma 5 al 10 se mostrar una imagen, del 11 al 16 otra y la ltima la mostraremos del fotograma 17 al 22. De esta forma, habiendo creado los fotogramas claves en cada uno de los fotogramas de inicio (5, 11 y 17), arrastraremos desde la Biblioteca (men Ventana Biblioteca) las imgenes para colocarlas en su lugar en el fotograma. Estas imgenes se mostrarn nicamente durante el tiempo que dure el fotograma para desaparecer ms tarde dando paso a la otra imagen. Consejo: Si quieres aadir un fondo debers hacerlo en una nueva capa y colocar sta debajo de todas las existentes.
13.9. Gua de movimiento clsica.

Anteriormente hemos visto como las interpolaciones de movimiento incluyen por defecto el trazado con la trayectoria del objeto, y que este trazado puede modificarse fcilmente, sin embargo las interpolaciones clsicas no lo incluyen. Si deseamos que el objeto siga una trayectoria no rectilnea en una interpolacin clsica hemos de crear una capa gua de movimiento. Una gua es una capa especial que marca una trayectoria para los smbolos de la capa a la que afecta, para que dichos smbolos la sigan, durante el movimiento. Esta capa es invisible durante la reproduccin y permite dibujar cualquier tipo de dibujo vectorial, que nos permitir crear un movimiento no forzosamente rectilneo. Crear un movimiento mediante esta tcnica es bastante sencillo. Partimos de una capa con una interpolacin clsica: Sobre la capa en la lnea de tiempo, hacemos clic derecho y seleccionamos Aadir gua de movimiento clsica.
90
Creamos el trazado de la gua en la nueva capa, por ejemplo dibujando con el Lpiz. Y para acabar, hacemos coincidir el fotograma final de la interpolacin con el final del trazado de la gua. Es importante que el smbolo est en contacto con la gua. No es necesario colocarlos al principio del trazado ya que Flash lo hace automticamente. Vemos como la capa a la que se asocia la gua aparece debajo y sangrado a la derecha.
Podemos ver un efecto ms vistoso que el que realizamos con la interpolacin sencilla del principio del tema.
Una opcin que puede resultar muy interesante es Orientar segn el trazado, la cual encontramos en el panel de Propiedades. Esta opcin har que el smbolo vaya girando para seguir la lnea del trazado, lo que en la animacin anterior habra puesto el avin boca abajo al hacer el "loop". A) Tanto si el trazado es de una interpolacin de movimiento, como si es de una interpolacin clsica, podemos modificarlo de varias formas: Seleccionando la herramienta Seleccin y haciendo clic sobre el trazado y arrastrndolo. Seleccionando la herramienta Subseleccin y haciendo clic en el trazado, aparecern los controladores de curva, movindolos modificaremos el trazado. Seleccionando la herramienta Transformacin libre y haciendo clic en el trazado, aparecern los controladores de transformacin libre, movindolos modificaremos el trazado. Si se trata de un trazado de una interpolacin de movimiento, adicionalmente disponemos de otros mtodos para modificar el trazado: Moviendo la posicin del objeto en el escenario, esto hace que se cree automticamente un fotograma clave de propiedad y se modifique el trazado. Esta es, quizs, la forma ms fcil de modificar un trazado. Utilizar el editor de movimiento para modificar los valores de X, Y, Z.
91
Si estamos modificando el trazado de una interpolacin clsica, debemos tener cierto cuidado con no producir discontinuidades en el trazado, ya que esto hara que la animacin se detuviera en ese punto. En general es ms fcil y flexible utilizar los trazados con las interpolaciones de movimiento que con las interpolaciones clsicas. B) Muchos movimientos complicados pueden ser duplicados fcilmente sobre otros objetos utilizando ActionScript 3.
92
14. Animacin por Forma.

14.1. Interpolacin por forma.
Cuando lo que queramos no sea cambiar la posicin de un objeto en el escenario, sino su forma de manera progresiva (o ambas cosas a la vez), Flash CS5 nos ofrece la tcnica de la Interpolacin por Forma, que consiste simplemente en ir transformando el contorno de un objeto creado en su interfaz hasta que sea igual que el contorno de otro objeto distinto. Realizar una interpolacin por forma, es muy semejante a crear una interpolacin de movimiento. Flash genera fotogramas intermedios en los que va variando ligeramente la forma del fotograma anterior. As como hacamos en el tema anterior, slo necesitamos dos fotogramas clave. Colocaremos en el primer fotograma el objeto con su aspecto original, y en el ltimo la apariencia final que queremos que tenga. Esta vez, es importante destacar que para que una Interpolacin por Forma funcione como es debido aquellos objetos que intervengan debern ser objetos vectoriales (no smbolos Flash). Debemos tener tambin dos aspectos en cuenta: 1) Separar en distintas capas los objetos fijos y los que estarn animados. 2) Poner en distintas capas objetos que vayan a ser transformados con formas distintas, ya que Flash transformar todos los objetos vectoriales del primer fotograma en aquello que haya en el ltimo fotograma de la interpolacin. Si realizamos la interpolacin por forma correctamente la lnea de tiempo tendr este aspecto:
Las consideraciones sobre la velocidad y el nmero de fotogramas que vimos en las interpolaciones de movimiento se pueden aplicar tambin a la interpolacin por forma y a cualquier animacin hecha con Flash. Si hay algn fallo en los parmetros necesarios para que la interpolacin se ejecute bien, como por ejemplo, que uno de los objetos en capa sea un smbolo, se mostrar algo as en la lnea de tiempo:
93
Para crear la interpolacin, una vez tengamos los fotogramas de inicio y fin de la animacin hacemos clic derecho en alguno de los fotogramas intermedios, y seleccionamos la opcin del men Crear interpolacin de forma. Recuerda que podemos alterar el fotograma final todo lo que queramos. A continuacin podemos ver el ejemplo de interpolacin de forma sencilla.
Inicio
Fin
Tambin podemos realizar interpolaciones de forma en varias fases de manera anloga a como lo hacamos en el tema anterior. De esta forma podemos hacer que un determinado objeto de convierta en otro antes de adoptar su forma definitiva.
Inicio
Fin
En el siguiente ejemplo podemos ver el ejemplo anterior pero haciendo que se transforme previamente en un tringulo antes de pasar a ser cuadrado. Lo hemos conseguido simplemente haciendo clic con el botn derecho sobre el fotograma 10 y creando un fotograma clave (Insertar Fotograma Clave). Luego slo tenemos que borrar el objeto que aparece en el escenario y dibujar el tringulo.
14.2. Transformar textos.

Debido a la importancia de los textos, es importante comentar las aplicaciones que tienen los cambios de forma sobre ellos. Aadimos as una posibilidad ms para realizar logotipos o presentaciones vistosas y transmitir informacin de manera espectacular.
94
Recordemos que para realizar una interpolacin de forma es necesario que el objeto sea de tipo vectorial. Este no es el caso de los textos, que se basan en fuentes y son creados en funcin de los valores de la tabla ASCII y un tipo de letra asociado. Para solucionar este problema, deberemos transformar el texto previamente en un objeto vectorial, es decir, como si hubiramos repasado con la herramienta lpiz el contorno de cada letra. Posibilidades de esta tcnica en textos? Muchsimas, aunque puede llevar a confusiones si no se hace adecuadamente. Por ejemplo debemos asegurarnos de dar suficientes fotogramas de margen para que se note la transicin. Tambin es conveniente dar un tiempo para que cada letra sea mostrada y pueda ser visualizada y "entendida" por aquel que vea la pelcula, porque si no lo hacemos corremos el riesgo de que la animacin parezca slo un garabato revolvindose.
Inicio
Fin
Una de las posibilidades es "deletrear" una palabra de manera tan vistosa como vemos arriba. Podemos comprobar como simplemente cambiando el color del objeto final, se produce una transicin tambin en el color. Observemos a su vez como cuando se forma cada letra, mantenemos su imagen el tiempo suficiente como habamos indicado que era necesario. Inicio
Fin En este otro ejemplo se observa la transicin de colores ms claramente y, adems, observamos transiciones de forma a texto. Cuando creemos interpolaciones de forma y queramos incluir textos deberemos actuar de un modo especial dado que un objeto de texto no se considera como una forma. Para ello, y una vez
95
tengamos la animacin creada con una forma en el fotograma inicial y un texto en el final veremos que la interpolacin aparece como incorrecta. Deberemos, entonces seleccionar el fotograma donde se encuentre el texto y seleccionarlo. Haremos clic en el men Modificar Separar para convertir el texto en un conjunto de puntos que creen una forma. Y la interpolacin ya estar lista.
Consejo: Cuando vayas a aplicar el comando Separar sobre una palabra completa observa que primero lo que hace es separar la palabra en letras individuales. Debers ejecutar de nuevo el comando para que estas letras se separen y creen una forma.
14.3. Consejos de forma.

Como ocurra en el tema anterior, a veces no nos viene bien el tipo de accin que hace Flash por defecto. En las interpolaciones de movimiento lo solucionbamos mediante la gua de movimiento. En el caso de la interpolacin por forma, es posible que Flash realice la transformacin de los objetos de una forma que no es la que esperbamos y que no nos conviene para llevar a cabo nuestro propsito. Pues bien, para estos casos Flash nos ofrece una herramienta para solucionarlo: los consejos de forma. Los consejos de forma son marcas que indican a Flash qu puntos de la imagen inicial son los que deben corresponderse con otros tantos puntos en la figura final. Al indicar esto, estamos controlando las formas intermedias que se generarn. Para aadir un consejo de forma a una interpolacin nos situaremos en el fotograma inicial y pulsaremos Control + Shift + H (o bien ir al men Modificar Forma Aadir Consejo de Forma).
96
Aparecer un crculo de color con una letra dentro en el centro de la figura. Su color ser rojo mientras no sea colocado en el contorno del objeto (los extremos, si es que no hay contorno), que es donde tiene efecto. Cuando estn colocados sobre una curva (vector) que forma un contorno son amarillos para el objeto inicial y verdes para el final. Dicho crculo debemos colocarlo en un punto del contorno de la figura inicial. Automticamente aparecer un punto con la misma letra dentro en la figura final (este punto ser el que se deba corresponder con el punto del objeto de origen) y deberemos colocarlo en el punto que deseemos del contorno. El primer consejo de forma est marcado con la letra "a". Si creamos ms de uno sern marcados con las letras "b", "c", "d" ... hasta la z, que es el lmite (26 como mximo). Ahora realicemos el seguimiento de otro ejemplo, tenemos la siguiente animacin (sin consejos de forma):
Inicio
Fin
Vamos a insertar un consejo de forma en el punto indicado en los grficos situados un poco ms abajo: Fijmonos en las posiciones inicial y final del Consejo de Forma y en el seguimiento del mismo, posteriormente comprobaremos que Flash realiza lo que le pedimos:
Como vemos el punto que hemos marcado en el objeto inicial se acaba correspondiendo con el punto que marcamos en el final, con lo que hemos conseguido forzar la transformacin que nosotros queramos.
Punto Inicial Seguimiento
Punto Final
Inicio
Fin
97
15. Efectos sobre animaciones.

15.1. Introduccin.
Si no te parecen suficientes las interpolaciones de forma y de movimiento, y quieres realizar animaciones ms complejas, puedes combinar las interpolaciones de movimiento con los efectos y transformaciones que se pueden realizar sobre los smbolos que las componen y aplicar efectos sobre las mismas interpolaciones. Una vez comprendidas todas las tcnicas de este tema, estaremos en disposicin de realizar todo tipo de animaciones en Flash. Slo tendremos que poner un poco de imaginacin porque, como hemos visto y veremos, el programa nos facilitar enormemente el trabajo. Con el panel de Propiedades podemos controlar los efectos y filtros, pero tambin podemos usar el Editor de movimiento para controlar gran parte de los efectos.
15.2. Efectos sobre la interpolacin.

Para describir todos los efectos que podemos aplicar sobre una interpolacin de movimiento previamente creada, sin necesidad de tocar ningn smbolo, nos centraremos en el panel Propiedades. Si seleccionamos un fotograma y un objeto perteneciente a una interpolacin, y abrimos el panel Propiedades, desde el botn de la parte superior derecha, o bien desde el men Ventana, Propiedades, encontraremos las distintas propiedades aplicables a ese objeto en ese fotograma. Las propiedades variarn segn el tipo de interpolacin, segn puedes ver en las siguientes imgenes correspondientes a las propiedades de la interpolacin de movimiento, interpolacin guiada e interpolacin de forma:
98
En las interpolaciones de movimiento podemos darle un nombre de etiqueta, nos ayudar a identificarla en la barra de tiempo. Aparecer a lo largo de todos los fotogramas que la componen. A) Tamao. La propiedad tamao se representa por los valores AN (anchura) y AL (altura) y para modificarla basta colocar el cursor sobre el valor y aparecer un deslizador que podemos mover a izquierda o derecha, tambin podemos hacer clic sobre el valor y teclear el nuevo valor.
Desde el Editor de movimiento tambin podemos modificar el tamao de un objeto desde las propiedades Escala X (anchura) y Escala Y (altura) que tienen valores en tanto por ciento.
Por ltimo, con el uso de la herramienta Transformacin libre tambin podemos variar las dimensiones del objeto. B) Escala. En las interpolaciones guiadas, esta casilla, al activarla, permite un incremento/decremento progresivo del tamao del objeto inicial cuando sus dimensiones son distintas a las del objeto que est en la posicin final de la animacin. Si la casilla est desactivada podramos encontrarnos con una animacin como la siguiente.
En las interpolaciones de movimiento, esta opcin est activada por defecto. Como vemos Flash hace el desplazamiento de posicin, pero el cambio de tamao se produce bruscamente en el ltimo fotograma.
99
C) Aceleracin. Esta barra deslizante nos permite determinar la aceleracin del primer tramo de la animacin. Podemos elegir valores entre -100 y 100. Si el valor de aceleracin es negativo el smbolo se mover despacio primero e ir acelerando de manera progresiva. Si dicho valor es positivo provocar un efecto opuesto. Podemos por ejemplo dar la impresin de que un objeto, por ejemplo un coche, arranca, va cogiendo velocidad poco a poco (valor -100) y despus va frenando y disminuyendo su velocidad hasta pararse.
D) Rotacin. Esta opcin es muy interesante ya que nos da la posibilidad de aplicar una rotacin al objeto mientras se produce el movimiento. Podemos especificar el nmero de veces o vueltas que se produzca la rotacin durante los fotogramas que dure la interpolacin, o tambin podemos indicar los grados que queremos que rote el objeto.
Si se trata de una interpolacin de movimiento, nos presenta un submen Direccin, con tres opciones: Ninguno. Con esto le indicamos a Flash que no aplique rotacin alguna sobre el smbolo en movimiento. Es la opcin por defecto en las interpolaciones de movimiento. Derecha (En interpolacin clsica CW). Permite realizar el nmero de rotaciones completas o el valor de grados en la direccin de las agujas del reloj. Izquierda (CCW). Permite realizar el nmero de rotaciones completas o el valor de grados en la direccin contraria a la de las agujas del reloj.
Si se trata de una interpolacin clsica, nos presenta un submen Direccin, con una opcin ms: Auto. Marcando esta opcin hacemos que se produzca la rotacin en aquella direccin que necesite menos movimientos. Si cuesta lo mismo hacerlo por un lado o por el otro, es decir, cuando la imagen inicial y final est en la misma posicin (en cuanto a rotacin se refiere), el hecho de activar esta opcin no tendr ningn efecto.
100
Esta opcin es la que est marcada por defecto en las interpolaciones clsicas y por eso no hemos visto hasta ahora un objeto rotar en nuestras interpolaciones clsicas. Para que hubiera tenido efecto deberamos haber rotado la ltima imagen de la interpolacin. Este es el resultado que hemos obtenido, como podemos comprobar, ha recorrido el camino ms corto, ya que el 6 ha pasado progresivamente de su posicin anterior a la que ocupaba el 1 de la otra forma el 6 habra pasado por las posiciones anteriores del 5, 4, 3, 2 y 1, siendo la longitud del movimiento mucho mayor.
Inicio
Fin
Desde el Editor de movimiento, tambin podemos especificar los grados de una rotacin. E) Orientar segn trazado. Si activamos esta casilla, tanto si la interpolacin sobre la que actuamos es una interpolacin guiada, como si es de movimiento, Flash har que el smbolo tome la direccin de la gua, rotando para orientarse en la misma posicin que adopta la lnea. Para entender mejor este concepto, recordemos una animacin anterior, en la que el avin haca una especie de "looping". Resultaba un poco extrao ver la animacin porque los aviones no van marcha atrs y, en esta ocasin y en muchas otras, no es conveniente que los objetos se muevan solo en el escenario quedando el mismo smbolo inmvil, como si levitara. Con este comando solucionaremos esto, y el resultado sera este.
101
E) Sincronizar (Sinc). Con esto evitamos que no se reproduzca el ltimo bucle de un smbolo grfico incluido en nuestra pelcula con una animacin en su lnea de tiempo interna, cuando el nmero de fotogramas que ocupa en la lnea principal no es mltiplo de los fotogramas que contiene la instancia. F) Ajustar. Si activamos esta opcin, el centro de la instancia (identificado con una cruz) se ajustar forzosamente a la gua que hemos marcado en la correspondiente capa. De hecho si intentamos mover la instancia en un fotograma de la animacin, Flash la volver a colocar sobre la gua de manera automtica.
15.3. Efectos sobre el smbolo interpolado.

Ya vimos en temas pasados cmo aplicar efectos sobre instancias de smbolos y vimos que se poda lograr efectos vistosos. No obstante, cuando los efectos muestran su verdadera potencia es cuando el smbolo forma parte de una animacin. Para explicar y demostrar las posibilidades de estos efectos vamos a abrir el panel Propiedades, que nos mostrar, en el desplegable Color los posibles efectos a aplicar si seleccionamos una instancia de un smbolo cualquiera de nuestra pelcula. Podemos aplicar los efectos sobre cualquier smbolo de cualquier fotograma de la animacin, tanto sobre el fotograma inicial o el final como en los intermedios. En este ltimo caso, si se trata de una interpolacin clsica, deberemos convertir a fotograma clave aquel que contenga la instancia y despus aplicar el efecto. El efecto se ir aplicando de forma gradual. De hecho, es frecuente utilizar interpolaciones clsicas nicamente para aplicar efectos. Para entender bien lo que sigue, es necesario controlar la aplicacin de efectos sobre instancias. Esto lo vimos en el Tema 9 y por eso omitiremos detalles sobre cmo aplicar efectos concretos sobre smbolos.
15.4. Efecto brillo.

El efecto de brillo, como su propio nombre indica, nos viene muy bien para simular el hecho de que algn objeto se encienda o brille, o por el contrario se apague o pierda brillo. En el ejemplo que tenemos a la izquierda, hemos intentado simular este efecto. Para ello hemos creado un semforo de luces intermitentes de color mbar. Como se puede ver, las luces se encienden y apagan progresivamente de manera alternada. Para conseguir esto hemos creado una interpolacin para cada luz, formada por tres fotogramas claves. El tercero lo hemos colocado justo en el medio de la secuencia de fotogramas. A la primera luz y a la ltima le hemos
102
dado el mismo valor de brillo, y en la del medio le hemos dado un valor ms alto o ms bajo segn fuera el smbolo de abajo o el de arriba. Como los movimientos de las luces son distintos e independientes los hemos colocado en distintas capas. Para la luz superior los valores de brillo fueron: 0 para el primer fot. clave, -46 para el central y 0 para el del medio. Y en la luz inferior al contrario: -46 para el primer fot. clave, 0 para el central y -46 para el del medio.
15.5. Efecto tinta.

El efecto de tinta, tiene un amplio marco de posibilidades de uso. Es muy usado en textos y en botones, por ejemplo haciendo que cambien progresivamente de color al pasarles el ratn por encima o simplemente efectos de cambio de color en presentaciones. Tintar colores supone un toque alegre y muy vistoso en las presentaciones y, si se usan varios efectos combinados adecuadamente, dota de un ritmo rpido a la animacin, como una explosin de color que sorprenda al receptor de la pelcula. Otro interesante uso de este efecto es simular la proyeccin de una luz de color sobre un objeto que se va acercando al foco. Veamos un ejemplo de esto.
Vemos como al acercarse el avin a la luz roja del Sol, ste lo ilumina con una luz roja. Hemos aplicado a la instancia del avin del ltimo fotograma de su interpolacin de movimiento un efecto de tinte rojo con una intensidad del 60%. Lo mismo hemos hecho en el centro del Sol pero con dos fases, poniendo en el fotograma central un efecto de tinte granate del 25%. La corona solar es simplemente una interpolacin de forma en cuatro fases.
103
15.6. Efecto transparencia (Alfa).

Este es probablemente el efecto ms utilizado debido a la versatilidad del hecho de controlar el grado de visibilidad de los objetos. Podemos, por ejemplo, simular un foco apuntando a un escenario o, lo ms comn, hacer aparecer objetos de la nada y tambin hacer que se desvanezcan poco a poco. Este ejemplo podra representar la entrada a cualquier web o portal de Internet, de hecho es bastante tpico.
104
16. Generar y publicar pelculas swf.

16.1. Consideraciones sobre el tamao de las pelculas.
Antes de aventurarnos a publicar nuestra pelcula para que otros la vean, sobre todo si la vamos a publicar en una pgina web, donde el tamao de descarga es de vital importancia, debemos tener en cuenta los siguientes aspectos: A) CONSIDERACIONES EN EL DIBUJO. Aunque los degradados queden muy vistosos, tambin requieren ms memoria, por lo que debemos evitar su uso excesivo, en la medida de lo posible. La herramienta Pincel gasta ms memoria que el resto de herramientas de dibujo, por lo que deberamos elegir estas ltimas en la medida de lo posible. Hemos visto que la animacin de lneas es bastante til. Sin embargo el uso de lneas que no sean las definidas por defecto y que usamos en el captulo que hemos comentado, har que el tamao de la descarga aumente. Por tanto evitemos las lneas discontinuas, de puntos... Dibujar las curvas con el menor nmero de nodos posible. C) CONSIDERACIONES EN LA ORGANIZACIN. Agrupar los objetos que estn relacionados, con el comando Modificar Agrupar. Si hemos creado un objeto que va a aparecer varias veces, deberamos convertirlo a smbolo, ya que como hemos visto, Flash lo colocar en la biblioteca y cada vez que quiera mostrarlo, har referencia a una nica posicin de memoria. Ya hemos comentado el mayor tamao de los mapas de bits, lo que hace que debamos minimizar el nmero de apariciones de stos en nuestra pelcula. D) CONSIDERACIONES EN LOS TEXTOS. Hemos podido observar, cuando manejbamos textos, que cuando abrimos el men de tipos de letras, las tres primeras son siempre "_sans", "_serif" y "_typewriter". Esto no es una casualidad. Estn colocadas ah para resaltar que estas fuentes ocupan un mnimo de memoria, por lo que se recomienda su uso. E) CONSIDERACIONES EN LA ANIMACIN. Utilizar lo ms que podamos las interpolaciones de movimiento y las guas para reducir el nmero de fotogramas clave y el tamao de la pelcula. Evitar el uso de la interpolacin por forma para animaciones de cambio de color, cuando sea posible. Independientemente de la optimizacin que hagamos, a veces no se puede evitar que el tamao de la pelcula aumente. Es recomendable entonces hacer un preloader (precarga) cuando la pelcula que queramos publicar sea de tamao superior a unos 80KB.
105
16.2. Preloader. Cargar la Pelcula entera antes de reproducirla.

Un preloader se usa principalmente para evitar la carga parcial de la pelcula, mientras sta se est reproduciendo, lo que, en ocasiones en las que la pelcula es de un tamao considerable, hace que la pelcula se vea entrecortada. Normalmente, los preloaders se hacen vistosos para que el observador no se aburra y deje de lado la opcin de visitar nuestra web. Suelen llevar alguna animacin sencilla que se va reproduciendo mientras se est cargando simultneamente la pelcula principal, mucho ms grande. Se pueden complicar mucho ms, pero nosotros haremos uno sencillo que nos sirva para entender bien el concepto, y la manera de hacerlo. Partimos de que ya tenemos nuestra pelcula terminada. Si queremos saber su tamao podemos ir a Archivo Configuracin de publicacin seleccionar la pestaa Flash, y marcar la casilla Generar Informe de Tamao. Si pulsamos el botn Publicar, aparecer en nuestro directorio un archivo de texto donde se explica con detalle el tamao de nuestra pelcula. Ahora insertaremos una nueva escena (Insertar Escena). Deber ser la primera que se ejecute. Para asegurarnos de ello accedemos a Ventana Otros Paneles Escena, y en la ventana que aparece arrastramos la escena que acabamos de crear hasta que est la primera. En nuestro ejemplo le hemos llamado "Preloader" y hemos supuesto que la Escena con la pelcula se llama "Pelcula" (lgicamente). Deber quedar algo similar a lo que muestra la imagen. En la escena recin creada insertaremos otra capa, de manera que nos queden dos capas a las que llamaremos, "Accin" y "Cargando". En la capa "Cargando" crearemos una animacin sencilla. Por ejemplo, hagmosle honor al ttulo y escribamos "Cargando ..."; puedes aplicarle la animacin que prefieras, siempre que no sea muy compleja. En nuestro ejemplo, esta capa tiene por lo menos dos fotogramas. En la capa "Accin" disearemos el "corazn" del preloader. Vamos a hacer que la animacin de nuestra escena de carga se ejecute repetidas veces, hasta que se haya cargado la escena que contiene la pelcula principal, mediante las acciones ActionScript 3 de Flash. Para ello abrimos el panel de Acciones. Vamos a emplear la funcin gotoAndPlay de ActionScript, que como ya comentamos nos permite ir a un fotograma determinado. Podemos escribirlo gotoAndPlay(1, "Escena") para ir al primer fotograma de la escena indicada. Podemos saber cuntos fotogramas se han cargado hasta ahora propiedad this.framesLoaded, y cuantos fotogramas hay en total con this.totalFrames. con la
106
Conociendo estos datos, lo nico que tenemos que hacer es preguntar si los fotogramas cargados igualan a los totales. Si es que s, ya podemos avanzar hasta la siguiente escena. Y si no, podemos volver al principio de nuestro loader, lo que lo ir repitiendo en bucle. Para expresar esto en ActionScript, lo haramos as: 1 if(this.framesLoaded==this.totalFrames) { 2 gotoAndPlay(1, "Pelcula") 3 } else { 4 gotoAndPlay(1, "Cargador") 5 }
Si no entiendes exactamente el cdigo no te preocupes, lo veremos ms adelante. Lo importante ahora es el concepto. Por lo tanto, lo que har esta instruccin es reproducir la escena Cargador, y al final comprobar el estado de la carga. Si se no se ha completado, vuelve al principio del cargador, lo que har que vuelva a pasar por la instruccin. Cuando la carga est completa, iniciamos la Pelcula. Y esto es todo lo que hay que hacer para crear un preloader (aunque por supuesto se puede hacer ms sofisticado), con lo que los visitantes ya no huirn de nuestra web. En los primeros temas de ActionScript veremos cmo mostrar en el preloader el estado de la carga.
16.3. Distribucin como archivo swf en un reproductor autnomo.

Para poder distribuir pelculas creadas en Flash que la gente pueda ver, son necesarias dos cosas: crear un archivo SWF y que el que la quiera visualizar tenga instalado el Reproductor de Flash. Flash nos ofrece varias opciones y funcionalidades para la creacin de un archivo SWF. Estas opciones se pueden ver en el panel de Configuracin de Publicacin, al que podemos acceder mediante el menArchivo Configuracin de Publicacin (Pestaa Flash). Veamos cules son estas opciones: Reproductor: Si queremos publicar nuestra pelcula para que sea vista con versiones anteriores de Flash, debemos seleccionar aqu la versin deseada. Versin de ActionScript: El uso de ActionScript 3 nos permitir usar las novedades relativas a objetos, clases etc... Si hemos introducido cdigo ActionScript debemos de respetar la versin elegida al crear el archivo, si no se pueden producir errores.
107
Calidad JPEG: Si en el panel de propiedades del mapa de bits no hemos indicado una compresin concreta, aqu podremos determinar su grado de compresin, que determinar a su vez el espacio ocupado en memoria por este tipo de imgenes. A mayor compresin, menos espacio en memoria ocupar la imagen, pero tambin su calidad ser menor. Establecer Flujo de Audio o Evento de Audio: Esta opcin nos permite acceder al Panel "Configuracin de Sonido" desde donde podemos configurar, para cada tipo de sonidos, sus caractersticas. Suplantar configuracin de sonido: Con esto se suplantarn los niveles de compresin seleccionados para cada archivo de sonido de nuestro documento. Comprimir pelcula: Comprime la pelcula al mximo posible. Generar Informe de tamao: Esta opcin la hemos usado en el apartado anterior. Si la activamos, se crear un archivo de texto con una relacin detallada del tamao del documento. Proteger Frente a Importacin: Activando est casilla har que cuando otro usuario (o nosotros mismos) queramos importarla no podamos o tengamos que introducir una contrasea si se ha escogido alguna. Omitir acciones de trace: Las acciones de traza se emplean para comprobar el correcto funcionamiento de la pelcula durante la creacin de esta (durante las pruebas). Tambin se consideran trazas los comentarios que insertemos en el cdigo ActionScript. Si activamos esta seal, la pelcula creada no los incluir, ocupar menos tamao y ahorraremos tiempo innecesario. Es recomendable cuando se publique la pelcula de un modo definitivo. Permitir depuracin: Permite que se pueda depurar el archivo SWF. Tambin exige la introduccin de una contrasea ya que se debe tener permiso del creador para Importar el archivo y depurarlo.
108
16.4. Distribucin para pginas web.

Esta es una parte importante, ya que normalmente las pelculas de Flash estn orientadas a la publicacin va Web. Para publicar una pelcula Flash en Internet de manera que forme parte de una pgina web deberemos insertarla en un archivo tpico de pginas web cuyo lenguaje de programacin sea del estilo del HTML. Para ello debemos atender a las opciones de publicacin HTML que nos ofrece Flash, y que nos ayudarn a que nuestra pelcula se visualice como realmente queremos. Las opciones de este tipo de publicacin estn en Archivo Configuracin de Publicacin... (Pestaa HTML). A) Plantilla. Para incrustar una pelcula Flash en un documento HTML, hay que escribir una serie de cdigos de programa algo complejos y laboriosos de hacer a mano. Para facilitarnos esta tarea Flash hace esto automticamente pero, puesto que cada web es distinta y nuestras necesidades van a ser muy distintas, los cdigos tambin sern muchos y distintos, por esto Flash incluye Plantillas, que crean este cdigo automticamente segn el tipo de publicacin que deseemos: En el botn Informacin que est a la derecha de la pestaa "Plantilla" se nos muestra informacin muy til sobre cada tipo de plantilla. Estas son las plantillas ms comunes: Slo Flash: Esta es la opcin predeterminada y utiliza el reproductor Flash. Flash con FSCommand: Imprescindible cuando se usen FSCommands. Permiten controlar el reproductor desde la pelcula. Mapa de Imgenes: Si hemos incluido una Image Map (imgenes completas que ejecutan distintas acciones segn la coordenada que se pulse) debemos activar esta opcin. QuickTime: Permite incluir una pelcula QuickTime. etc ... B) Detectar Versin de Flash. Desde aqu podemos seleccionar si queremos que nuestra pelcula detecte la existencia o no existencia del plugin de Flash en el ordenador del usuario, as como las pginas web donde se insertar el cdigo encargado de comprobarlo y las pginas web a las que se ir en caso de disponer del Plugin o no disponer de l.
109
C) Dimensiones. Especifica la unidad en la que mediremos las dimensiones del Documento. Anchura X Altura: Aqu introduciremos la anchura y altura, teniendo en cuenta que a veces un objeto ms grande que estas dimensiones provocar un cambio en stas. D) Reproduccin. Permite realizar determinados cambios en cuanto a la reproduccin de la pelcula: Pausa al Comienzo: Permite que sea el usuario quien haga que se inicie la reproduccin, que inicialmente aparecer detenida. Reproduccin Indefinida: Cuando la pelcula termine, volver a empezar desde el principio. Esto lo har infinitamente. Visualizar Men: Permite que al hacer el usuario clic con el botn derecho del ratn sobre la pelcula, el men emergente tenga todas las opciones por defecto. Si la desactivamos slo aparecer la opcin "Acerca de Flash". Fuentes de Dispositivo: Sustituye las fuentes utilizadas en los textos sin animacin de la pelcula por las fuentes predeterminadas en la mquina de quien la visualice.
E) Calidad. Aqu podemos modificar la calidad de visualizacin de la pelcula, que depende del suavizado de la imagen y el tiempo de reproduccin. Las opciones son: Baja No hay suavizado. El tiempo de reproduccin es el de mxima velocidad. Baja Automtica: El reproductor detecta si la mquina soporta en cada instante un ligero suavizado, si lo soporta, lo aplica. El tiempo sigue siendo muy rpido. Alta Automtica: Pone al mismo nivel el tiempo y el suavizado, pero si hay alguna limitacin, siempre dar preferencia a la velocidad. Media: Valores intermedios de velocidad y suavizado. No suaviza los bitmaps. Alta: Usa siempre el suavizado, los mapas de bits se suavizan slo si no hay animacin. Da preferencia a la buena visualizacin. ptima: Se suaviza todo, incluidos los mapas de bits en cualquier caso. Total preferencia de la apariencia frente a la velocidad.
F) Modo de Ventana. Opciones para la reproduccin dentro de las ventanas de Windows: Ventana: Se reproduce la pelcula en la ventana de la web en la que est insertada. Opaco sin Ventanas: Hace que los objetos situados en capas situadas detrs de la pelcula no se vean (en pginas DHTML). Transparente sin Ventanas: Es el opuesto al anterior. Permite que los objetos situados detrs se vean.
110
G) Alineacin HTML. Posicin relativa de la pelcula dentro de la pgina web HTML. Tenemos varias opciones: Predeterminada: Centra la pelcula en la pgina. Si no cabe se cortan los extremos. Izquierda: Alineacin a la izquierda. Tambin se recortan los bordes si no cabe. Derecha: Alineacin a la derecha. Superior: Alineacin en el borde superior de la pgina. Inferior: Alineacin en el borde inferior de la pgina.
H) Escala. Si hemos especificado el tamao en pxeles o en tanto por ciento, podemos decirle a Flash cmo distribuir la pelcula en el rectngulo que hemos decidido que la contenga: Predeterminada: Se ve toda la pelcula guardando las proporciones originales. Sin Borde: Recorta (en caso de que la pelcula sea ms grande que el rectngulo) todo lo que sobre con el fin de mantener las proporciones. Ajuste Exacto: Distorsiona las proporciones si es necesario para conseguir que la pelcula ocupe el rectngulo completo. I) Alineacin Flash. Se hace necesario alinear la pelcula cuando esta no tiene las mismas dimensiones que el rectngulo definido. Las opciones son: Alineacin Horizontal: Podemos escoger entre Centro, Izquierda o Derecha. Alineacin Vertical: Podemos escoger entre Centro, Superior o Inferior. J) Mostrar Mensajes de advertencia. Permite que se muestren los posibles mensajes de error de cdigo ActionScript. Adems, Flash crear el cdigo JavasScript que detecte la versin de Flash y otras acciones. De todas formas, lo ms habitual es utilizar un editor web, como Dreamweaver para crear la pgina web, y desde ah insertar el archivo SWF, por lo que ser el propio editor el que se encargue de generar este cdigo.
111
17. Vdeo.
17.1. Video.
Con Flash cada vez es ms fcil aadir vdeos a nuestras presentaciones o webs. En particular Flash CS5 incorpora una serie de caractersticas que facilitan la tarea al mximo y permiten el uso de vdeos como si se tratase de cualquier otro objeto en pantalla. A continuacin explicaremos cmo hacerlo y cules son las mejores alternativas. Utilizaremos el siguiente ejemplo para documentar algunos de los pasos que deberemos realizar.
17.2. Importando vdeos.

Lo primero que deberemos hacer es transformar formato avi, mpeg, mov, wmv o dv al formato que utiliza Flash: flv. nuestro vdeo de
Este formato, adems de crear archivos de vdeo de buena calidad muy comprimidos, te permitir introducir puntos de referencia desde donde controlaremos la interaccin del entorno de la pelcula con el vdeo. Haz clic en Archivo Importar Importar vdeo para empezar a configurar el archivo .flv que crearemos. Se abrir una pantalla como sta: Aqu debers seleccionar el archivo que quieres importar para utilizarlo en tu pelcula. Haz clic en el botn Examinar y bscalo en tus carpetas. Cuando lo hayas encontrado pulsa el botn Aceptar y estars listo para seguir pulsando el botn Siguiente. Tambin es posible marcar la opcin Ya se ha implementado en un servidor Web, Flash Vdeo Streaming Service o Flash Communication Server. En este caso debers introducir la URL del archivo, que previamente habr sido preparado para poder utilizarlo en Flash.
112
La siguiente pantalla te permitir seleccionar el aspecto del reproductor:
La siguiente pantalla te mostrara la informacin del video que vamos a exportar, donde se importara, etc:
A partir de este punto, ya tenemos el vdeo incorporado en nuestro proyecto.
17.3. Puntos de referencia.

El vdeo se puede mostrar como un flujo, simplemente reproducirlo y pararlo. Pero podemos hacer ms, podemos hacer que se pueda navegar a determinados momentos del vdeo, o que se produzca un evento cuando alcance una posicin determinada. Pero para hacer todo esto, tenemos que trabajar con puntos de referencia. Podemos ver Puntos de referencia desde de Propiedades del componente de vdeo: el panel
113
Existen dos tipos de puntos de referencia diferentes: puntos de referencia codificados y puntos de referencia de ActionScript. A) Los puntos de referencia codificados se aaden al codificar el vdeo con Adobe Media Encoder. Pueden ser de Navegacin o de Evento. Creando puntos de Navegacin podremos referenciarnos ms tarde a ellos para saltar en la pelcula. Sera algo as como crear captulos sobre los que podremos navegar utilizando botones y ActionScript. El punto de Referencia de Evento nos permitir crear interacciones con el resto de objetos en la pelcula. Estos puntos nos permitirn pasar parmetros que podremos recuperar mediante ActionScript.
En la imagen anterior, vemos que hay 3 puntos de Navegacin, a los cuales acudiremos pulsando los botones para saltar entre los captulos de la pelcula. Luego hemos aadido 4 puntos de Evento desde los que pasaremos un parmetro que har que se muestre determinado fotograma de un clip que se encontrar en el Escenario. B) Los puntos de ActionScript, como su nombre indica, se codifican mediante ActionScript. Por ello, podemos aadirlos directamente desde el panel de Propiedades. Para hacerlo no tenemos ms que desplazar el cabezal del vdeo hasta el momento en el que lo queramos aadir, y pulsar el icono ms + del panel.
Tanto los puntos de ActionScript como los codificados, pueden enviar parmetros, lo que nos permite recibir informacin.
114
18.4. El componente FLVPlayback

El vdeo, no se reproduce directamente. Lo hace a travs de un reproductor, un componente del tipo FLVPlayback. Otra forma de insertar un vdeo en el escenario, es creando primero este componente, e indicndole el vdeo a reproducir. Podemos hacerlo a travs del Panel Componentes, accesible desde el men desdeVentana Componentes FLVPlayback.
Desde el inspector de Propiedades podemos configurarlo. Veamos sus opciones: Align: especifica el diseo del vdeo. Por ejemplo, lo podemos centrar con center. AutoPlay: puede tomar los valores true o false. Indican si el vdeo debe reproducirse nada ms abrir el archivo o esperar a una orden para empezar a reproducirse. CuePoints: indica los puntos de referencia que estn incluidos en la pelcula. Una vez importada la pelcula a formato flv no pueden ser modificados los puntos codificados, aunque s los de ActionScript. IsLive: puede tomar los valores true o false. Este campo se utilizar para la transmisin de vdeo en vivo y slo podr utilizarse a travs de un servidor deStreaming. Preview: Permite obtener previsualizacin desde una imagen png. una
ScaleMode: Indica si se altera la escala del vdeo: si muestra su tamao original, si se ajusta al tamao de la escena, etc... Skin: desde aqu podemos modificar la apariencia de los controles de la pelcula y seleccionar uno entre los predefinidos. SkinAutoHide: puede tomar los valores true o false. Indicar si los controles se pueden esconder para volver a aparecer cuando el cursor se site sobre la pelcula. SkinBackgroundAlpha establece y skinBackgroundColor su color. la transparencia del fondo del skin,
Source es el archivo de vdeo que se mostrar en el reproductor.
115
Volume: de 0 a 100. Indica el volumen mximo del vdeo.
A parte de las que se muestran en el panel, existen otras propiedades que pueden sernos tiles: AutoRewind: puede tomar los valores true o false. Indica si el vdeo deber volver a la posicin inicial despus de haberse reproducido completamente, o tras hacer un stop. AutoSize: puede tomar los valores true o false. Indica si el control deber ajustarse al tamao del vdeo, o por el contrario deber ser el vdeo el que se ajuste al tamao del control. BufferTime: especifica el nmero de segundos que se almacenarn en la memoria antes de que se inicie la reproduccin del vdeo. TotalTime: indica el tiempo total del vdeo. Recuerda que todas estas propiedades son accesibles desde ActionScript. Una vez insertada la pelcula mediante la adicin de este componente o por importacin deberemos darle un nombre de instancia para poder referirnos a l. Hazlo desde este mismo panel o desde el Panel Propiedades.
17.5. Uso de componentes para la reproduccin .

Usar componentes para controlar la pelcula es muy sencillo, slo debers arrastrarlos desde el Panel Componentes al Escenario y escribir unas pocas lneas en el Panel Acciones. BackButton: retrocede el flujo del vdeo al punto de referencia inmediatamente anterior o en su defecto al inicio de ste. BufferingBar: muestra el progreso de descarga del vdeo. ForwardButton: avanza el flujo del vdeo al punto de referencia inmediatamente posterior o en su defecto al final de ste. FullScreenButton: cambia al modo de pantalla completa. MuteButton: establece el volumen de la pelcula directamente a 0. Actuara de forma similar a la lnea: 1 miVideo.volume = 0;
116
PauseButton: pausa la pelcula en el momento en el que se pulse el botn. PlayButton: reaunda (o comienza) la reproduccin a partir de donde se encuentre el cabezal de reproduccin de vdeo. PlayPauseButton: una mezcla de los dos anteriores, es capaz de pausar y reanudar la reproduccin desde un mismo control. SeekBar: desde esta barra avanzar y retroceder manualmente por la lnea de flujo de la pelcula. StopButton: detiene la reproduccin y posiciona el cabezal de reproduccin al principio del vdeo. VolumeBar: permite el aumento o disminucin del volumen del vdeo mediante una barra de volumen.
Una vez aadidos los componentes necesarios al Escenario tendrs que darle un nombre de instancia y luego asociarlo al reproductor empleando ActionScript. Bsicamente, el reproductor tiene una propiedad que coincide con el tipo de componente, por lo que hay que asignar cada instancia a su propiedad correspondiente. Un ejemplo sera el siguiente: El componente se asociar al vdeo y funcionar por s solo. Fcil, verdad? Puedes modificar los componentes que aadas al Escenario haciendo doble clic sobre ellos y cambiando su forma, tamao o color. 1 2 3 4 5 6 7 8 9 10 miVideo.playButton = miBotonPlay; miVideo.pauseButton = miBotonPausa; miVideo.playPauseButton = miBotonPausaPlay; miVideo.stopButton = miBotonStop; mVideo.backButton = miBotonAtras; miVideo.forwardButton = miBotonAdelante; miVideo.muteButton = miBotonSilencio; miVideo.volumeBar = miBarraVolumen; miVideo.seekBar = miBarraDeslizadora; miVideo.bufferingBar = miBarraProgreso;
18.6. Crear controles propios.

Crear controles propios no es muy complicado en Flash CS5. Slo tienes que crear los botones que consideres necesarios y utilizar las propiedades del componente FLVPlayback. Puedes recurrir al panel Fragmentos de cdigo donde encontrars cdigos muy tiles con las funciones bsicas.
117
Play(): reproduce el vdeo. 1 miVideo.play();
Stop(): detiene el vdeo y vuelve al inicio. 1 miVideo.stop(); Pause(): detiene el vdeo conservando su posicin actual. 1 miVideo.pause();
Seek(segundo:Number): permite el avance o retroceso de la pelcula de vdeo. 1 miVideo.seek(5);
Esta lnea colocar la cabeza lectora en el segundo 5 y reproducir a partir de ah. Volumen: define el volumen del vdeo. Puedes introducir un valor entre 0 y 100. 1 miVideo.volume = 50; Un ejemplo de cmo crear un botn de Play/Pause sera asociando el cdigo siguiente a un botn: 1 miBoton.addEventListener(MouseEvent.CLICK,pararContinuar); 2 function pararContinuar(event:MouseEvent) { 3 if (miVideo.state==miVideo.PAUSED) { 4 miVideo.play(); 5 } else { 6 miVideo.pause(); 7 } 8 } La propiedad state devuelve el estado en el que se encuentra nuestro vdeo en el momento, puede tomar los siguientes valores: miVideo.PAUSED: el vdeo se encuentra pausado. miVideo.PLAYING: el vdeo se est reproduciendo. miVideo.REWINDING: el vdeo est en estado de rebobinado. miVideo.SEEKING: el vdeo est en estado de bsqueda. miVideo.STOPPED: el vdeo se encuentra detenido. miVideo.BUFFERING: el vdeo todava se est almacenando en el buffer.
118
miVideo.CONNECTION_ERROR: se ha producido un error de conexin y el vdeo no podr visualizarse. miVideo.DISCONNECTED: el vdeo est en estado de desconexin. Este estado se producir hasta que se le asigne una ruta a la propiedad contentPath. miVideo.LOADING: el vdeo est en estado de carga.
17. Navegar con los puntos de referencia.

Ahora veremos cmo interactuar con los puntos de referencia que hayamos creado. Principalmente, podemos usar los puntos de referencia de dos formas: usarlos apra navegar por el vdeo, o esperar a que se produzcan y entonces realizar una accin. A) Navegar con puntos de referencia. En el ejemplo hemos creado 3 botones que debern saltar a los tres puntos diferentes que hemos creado: inicio, carrera1 y carrera2. El cdigo asociado al botn sera el siguiente:
1 miBoton.addEventListener(MouseEvent.CLICK,reproducirInicio); 2 function reproducirInicio(event:MouseEvent) { 3 miVideo.seekToNavCuePoint("inicio"); 4 miVideo.play(); 5 }
Este trozo de cdigo utiliza la funcin seekToNavCuePoint para buscar el punto de referencia que se le indique, luego tendremos que decirle que reanude la reproduccin. Tambin puedes utilizar las funciones seekToNextNavCuePoint() y seekToPrevNavCuePoint() para avanzar y retroceder, respectivamente, por los diferentes puntos de referencia de navegacin creados. 1 miVideo.seekToNextNavCuePoint(); 2 miVideo.seekToPrevNavCuePoint();
119
21.8. Trabajar con eventos de vdeo.

Como vimos antes, podamos crear puntos de referencia de Eventos para pasar parmetros a nuestra pelcula desde la reproduccin del vdeo. B) Capturar el evento. Imaginemos que tenemos un vdeo con un punto de referencia llamado susto, y que cuando el vdeo lo alcance, queremos mostrar un texto determinado en un componente de texto. Lo que tenemos que hacer es escuchar cundo se produce el evento MetadataEvent.CUE_POINT, y entonces llevar a cabo nuestra accin, como en el siguiente ejemplo: 1 2 3 4 5 6 7 8 9 10 11 import fl.video.MetadataEvent; //Necesitamos importar el tipo de evento reproudctor.addEventListener(MetadataEvent.CUE_POINT, fl_CuePointHandler); function fl_CuePointHandler(event:MetadataEvent):void { //con event.info.name podemos conocer el nombre el punto if(event.info.name=="susto") { txtSalida.text="Atencin a la cara de Juanito"; } }
Como vimos, tambin podamos recuperar parmetros del punto de referencia: 1 2 3 4 5 6 7 8 import fl.video.MetadataEvent; reproductor.addEventListener(MetadataEvent.CUE_POINT,eventosVideo); function eventosVideo(event:MetadataEvent ) { if (event.info.parameters) { mensaje.gotoAndPlay(event.info.parameters["fotograma"]); } }
Lo que hacemos en la condicin, es comprobar si hay informacin sobre los parmetros (.info.parameters). Si es as, sacamos la informacin del parmetro llamndolo por su nombre y actuamos en consecuencia. Lo que hemos hecho, es hacer que el parmetro fotograma nos indique la etiqueta a la que queremos desplazar el cabezal de mensaje. En el ejemplo hemos creado un clip de pelcula que se llama mensaje. Cuando se van produciendo determinados eventos en el vdeo vamos moviendo el cabezal de reproduccin de dicho clip y as creamos una vinculacin entre ambos, el clip y el vdeo.
120

PAEM

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PAEM

Uploaded by

Copyright:

Available Formats

PAEM

PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

1.1 Principios de la animacin.

C) Puesta en escena (Staging).

D) Accin directa y pose a pose (Straigh ahead action and pose-to-pose).

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

E) Accin continuada y superpuesta (Follow through and overlapping action).

F) Aceleracin y deceleracin (Slow in and out).

H) Accin secundaria (Secondary action).

I) Sentido del tiempo (Timing).

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

K) Modelados y esqueletos slidos.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

2. Introduccin a Flash Professional.

2.2. Importancia de Flash CS5.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

2.3. Novedades de Flash CS5.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

2.4. Ventajas y desventajas de Flash.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

2.5. Primera animacin Flash.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

3.2. La barra de Mens.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

3.3. La Lnea de tiempo.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

3.4. Las capas.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

3.6. Las Vistas o Zooms.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

3.7. Los Paneles.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

4.2. La barra de Herramientas - (Herramientas Bsicas).

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

4.3. La barra de Herramientas - (Herramientas avanzadas).

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

4.4 La barra de Herramientas (Opciones).

4.5 El panel Color.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

4.6. El panel Muestras.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

5.2. Insertar texto.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

5.3 Escribir texto.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

5.4. Propiedades de los textos.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

5.4.1 Texto clsico.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

Propiedades de los textos.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

5.5. Propiedades de los contenedores de texto.

MC. DANIEL SOLANO PRODUCCIN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

5.6. Flujo de texto entre contenedores.