PAEM

COLEGIO MARISTA CENTRO ESCOLAR DEL NOROESTE MC. Daniel Solano

PRODUCCIÓN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

COLEGIO MARISTA CENTRO ESCOLAR DEL NOROESTE MC. Daniel Solano

PAEM

MC. DANIEL SOLANO PRODUCCIÓN DE ANIMACIONES CON ELEMENTOS MULTIMEDIA

2

1. Fundamento de la animación.

Los principios de la animación tradicional (Fluidez y expresividad en la animación) Nos referimos con este título a una serie de técnicas que los animadores utilizan para dar más fluidez y expresividad las animaciones.

Estos principios, que sería más correcto presentar como técnicas o procedimientos, fueron desarrollados a finales de los años veinte, principalmente por los animadores de la industria norteamericana del llamado cartoon (con múltiples traducciones al español como historieta, tira cómica o dibujo animado).

Las técnicas o procedimientos se basan en el conocimiento y la intuición que han tenido los animadores, de ciertos fenómenos descritos por la física y más concretamente, por la dinámica. La codificación de dichos procedimientos por parte de los dibujantes se ha debido más a la percepción sensorial que tenemos de esos fenómenos, como sujetos sometidos de la gravedad de la Tierra, que a la observación visual de los mismos.

Si un espectador, en unos dibujos animados, contempla cómo un vehículo se estira y se encoge según la aceleración, lo percibirá como algo perfectamente comprensible aunque tal fenómeno no se observe en la realidad a simple vista. La explicación a lo anterior es que todo el mundo ha experimentado la inercia en su propio cuerpo al viajar en un vehículo. Por tanto, los animadores han puesto en imágenes unas percepciones cinéticas que todos hemos tenido alguna vez, haciendo por medio de este artificio que la animación resulte, paradójicamente, más creíble. Algunas de las técnicas más utilizadas en la animación tradicional, son:

Claridad en la acción o en la puesta en escena - Staging.

Acción secundaria - Secondaryaction.

Tiempo de la acción - Timing.

Continuidad de la acción - Overlaping.

Terminación de la acción - Followthough.

Líneas de acción, arcos - Arcs.

Aceleración y deceleración - Slow in and out.

Appeal.

Los principios para la animación fueron creados en los años 30 por animadores en los Estudios de Disney. Se trata de una serie de reglas básicas de animación que se utilizaron como base creativa y de producción de dibujos animados en aquella época. Estos 12 principios ayudaron a que el oficio de la animación pasara de ser algo novedoso a ser una forma de arte.

Fueron aplicados inicialmente a los clásicos animados de Disney, como Blanca nieves, en 1937, Pinocho y Fantasía, en el 40, Dumbo, en el 41 y Bambi, en 1942, Estos principios hoy siguen funcionando, ayudan a crear personajes y situaciones más creíbles, proporcionan sensación de realidad. Para 3D estos principios se han tenido que reinterpretar y expandir, incluso se han tenido que añadir algunos principios adicionales que den soporte a los nuevos estilos y técnicas utilizados en la animación, Esto es porque en los años 30, el estilo dominante era la animación narrativa cartoon pose a pose. Durante este tiempo, las técnicas y los estilos de la animación han cambiado enormemente.


3

1.1 Principios de la animación.

A) Encoger y estirar (Squash and Strech). La exageración, la deformación de los cuerpos flexibles. Sirve para lograr un efecto más cómico o bien más dramático. El estiramiento muchas veces se relaciona con la velocidad y la inercia.

Se puede decir que se utiliza para representar la inercia mediante la compresión y el estiramiento del objeto, que variará según las cualidades del material con que esté hecho. Se basa en las leyes de Newton, que refrescaré a continuación: 1. Todo cuerpo permanece en su estado de reposo o de movimiento rectilíneo uniforme a menos que otros cuerpos actúen sobre él. 2. La fuerza que actúa sobre un cuerpo es directamente proporcional a su aceleración. 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) Anticipación (Anticipation). Se anticipan los movimientos, esto guía la mirada del espectador. Anuncia sorpresa. Se verán tres pasos: Anticipación (nos prepara para la acción); la acción en sí misma y la reacción (recuperación, término de la acción). En otras palabras podemos decir que toda acción está constituida por tres actos: introducción, desarrollo y conclusión. La anticipación es igual a la introducción y sirve para poner en situación 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 cámara ascendente.

C) Puesta en escena (Staging). Representación de una idea. Con este principio traducimos las intenciones y el ambiente de la escena a posiciones y acciones específicas de los personajes. Poniendo en escena las posiciones claves de los personajes definiremos la naturaleza de la acción. Hay varias técnicas de puesta en escena para contar una historia visualmente, esconder o revelar el punto de interés, o las acciones en cadena, acción – reacción, son dos ejemplos.

D) Acción directa y pose a pose (Straigh ahead action and pose-to-pose). Éstas son en realidad dos técnicas de animación diferentes. En la acción directa creamos una acción continua, pasó a paso, hasta concluír una acción impredecible, y en la acción pose a pose desglosamos los movimientos en series estructuradas de poses clave. La acción directa se distingue por la fluidez del movimiento, proporciona un look fresco, suelto y desenfadado. Influye la creatividad.


4

En la acción pose a pose se desarrolla un planteamiento inicial, es una animación más controlada que viene determinada por el número de poses y las poses intermedias. Se pueden mezclar estas dos técnicas.

E) Acción continuada y superpuesta (Follow through and overlapping action). Estas dos técnicas ayudan a enriquecer y dar detalle a la acción, en ellas el movimiento continúa hasta finalizar su curso. En la acción continuada, la reacción del personaje después de una acción nos dice cómo se siente el personaje además evita un efecto mecánico en los movimientos, según se va terminando una acción se encadena con la siguiente. En la acción superpuesta, movimientos múltiples se mezclan, se superponen, e influyen en la posición del personaje. En la animación 3D se utiliza mucho la acción continuada, por ejemplo en las simulaciones dinámicas de la ropa o el pelo.

F) Aceleración y deceleración (Slow in and out). Aceleración y deceleración, Un objeto cuando inicia un movimiento sufre una aceleración progresiva, mientras que al finalizar sufrirá una desaceleración igualmente progresiva. Para conseguir este efecto habrá más dibujos por fotogramas en la desaceleración y a la inversa para una mayor aceleración.

G) Arcos (Arcs). Al utilizar los arcos para animar los movimientos del personaje le estaremos dando una apariencia natural, ya que la mayoría de las criaturas vivientes se mueven en trayectorias curvas, nunca en líneas perfectamente rectas. Son guías que se trazan de manera curvilínea para guiar el trabajo de los dibujos intercalados entre las poses clave, para que sean lo más fluidas posibles. Visualmente, son las especies de curvas que aparecen en un movimiento muy rápido.

H) Acción secundaria (Secondary action). Pequeños movimientos que complementan a la acción dominante. Son resultantes de la acción principal. La acción secundaria no debe estar más marcada que la acción 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 acción. Las interrupciones en los movimientos. Aquí se define también el peso del modelo y la sensaciones de escalas y tamaños.


5

J) Exageración (Exageration). Acentuar una acción. La hace más creíble.

K) Modelados y esqueletos sólidos. Un modelado y un sistema de esqueleto sólido, o un dibujo sólido como se decía en los años 30, ayudarán al personaje a cobrar vida. El peso, la profundidad y el balance simplificarán posibles complicaciones en la producción debidas a personajes pobremente modelados. Además, hay que poner atención a las siluetas al alinear los personajes con la cámara.

L) Personalidad (Acting). Esto proporciona conexión 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.


6

2. Introducción 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 diseños vistosos para la web, y gráficos interactivos. Los motivos que han convertido a Flash en el programa elegido por la mayoría de los diseñadores web profesionales y aficionados son varios. Veamos pues, porque es interesante Flash Pro CS5. Desde la web de Adobe te puedes descargar una versión de evaluación de Flash Professional CS5 válida para 30 días. Esta versión 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 versión se han mejorado y simplificado las herramientas, y cada vez es posible lograr mejores efectos con menos trabajo. Aunque su uso más frecuente es el de crear animaciones (a lo largo de este curso veremos lo sencillo que puede resultar) sus usos son muchos más. Son tantos, que todos los diseñadores web deberían saber utilizar Flash. Durante mucho tiempo, Flash consiguió hacer posible lo que más se echa en falta en Internet: Dinamismo, y con dinamismo no sólo nos referimos a las animaciones, sino que Flash permite crear aplicaciones interactivas que permiten al usuario ver la web como algo atractivo, no estático. Con Flash podremos crear de modo fácil y rápido desde animaciones simples para lograr algunos efectos visuales, hasta aplicaciones complejas, como juegos. Además sus desarrolladores están apostando muy fuerte por ActionScript, el lenguaje de programación Flash. A cada versión se mejora y ofrece un abanico de posibilidades cada vez

http://www.adobe.com/es/products/flash/


7

mayor, por lo que además de dinamismo, Flash nos ofrece la posibilidad de ser la plataforma para aplicaciones web de un modo real. Flash es fácil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar horas y horas creando lo que nos dicte nuestra imaginación, pero esto no es suficiente para ser el preferido por los diseñadores 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 compañía se desmarca del resto ofreciendo un paquete de aplicaciones muy completas como hemos ido viendo año tras año, 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 más potentes de dibujo, como Illustrator, para crear nuestros gráficos, y después animarlos con Flash. Vamos a ver las opciones más destacadas que encontramos en esta última versión:

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 carácter y párrafo.

Se pueden aplicar efectos y atributos sobre el texto sin convertirlo a un clip de película.

El texto pude fluir entre varios contenedores asociados.

El panel Fragmentos de código.

Este panel nos permite insertar rápidamente el código ActionScript 3 de las acciones más comunes. Además, podemos emplearlo para almacenar nuestro propio código, y así poder reutilizarlo cómodamente.

Empaquetado de aplicaciones para iPhone. Flash CS5 nos permite convertir nuestras aplicaciones i juegos creados con el programa, en aplicaciones compatibles con iPhone.


8

Mejoras del vídeo.

Los puntos de referencia nos permiten navegar por el vídeo o reaccionar a eventos. Ahora, podemos añadirlos directamente desde el inspector de Propiedades o mediante ActionScript, sin necesidad de recodificar el vídeo. Además, se ha mejorado el componente reproductor de vídeo, que nos permite verlo en tiempo real, y nos ofrece una mayor colección de estilos. Mejora de la herramienta huesos. Se han añadido propiedades de "muelle" a la herramienta de cinemática inversa (IK). Con esto, se consiguen resultados mucho más á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 creación de pequeños botones o banners publicitarios, hasta webs totalmente basadas en esta tecnología, Internet está repleta de animaciones Flash. Como todo, Flash presenta tanto ventajas como inconvenientes: El tiempo de carga. Mientras que una página HTML puede ocuparnos 10-20 KB como media,

una animación Flash ocupa mucho más. Evidentemente depende del contenido que tenga, pero suelen superar los100 KB con facilidad, y si además incorpora sonidos es fácil que la cifra se dispare. Al ocupar más espacio, el tiempo que tardan estar visible el contenido Flash es mayor y no todos los visitantes están dispuestos a esperar... simplemente, se irán a otra página.

Los buscadores. Son capaces de indexar el contenido de nuestra página, el texto, pero no el

contenido del Flash, ya que no lo pueden leer, lo que afectará negativamente al posicionamiento de la página. Y hoy en día 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 diseño 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, impedirán la visualización del Flash. Este plugin lo suelen incorporar la mayoría 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 página si tienen que instalar "algo raro".

http://get.adobe.com/es/flashplayer/


9

Compatibilidad con distintos dispositivos. Cada vez es más frecuente acceder a la web

con teléfonos móviles, SmartPhones y Tablets, y algunos de ellos no soportan Flash (como los Android anteriores a la versión 2.2).

Flash es una tecnología propietaria de Adobe, por lo que su futuro depende de lo que

esta compañía quiera hacer con él.

Otro aspecto a tener en cuenta es la usabilidad de las páginas Flash, a veces se cae en la tentación de dar demasiada importancia al diseño y olvidarse de que la página debe ser fácil de usar, aunque es más un error de diseño que del propio Flash.

Tendencia a su desuso en la web. Con la llegada de HTML5, se solventan muchas de las

carencias de las páginas 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 también aporta ventajas:

La web se vuelve muy vistosa y atractiva, además de añadirle más 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 práctica, el desarrollo con Flash se vuelve rápido.

Flash permite comportamientos que de otra forma no podríamos lograr.

Compatibilidad con navegadores. Uno de los principales problemas en el diseño 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 página web puede ser cuestionable, aunque depende de muchas cosas. Aún así, no hemos de olvidar que Flash tiene muchísimas aplicaciones más (hecho que ha provocado que otras compañías traten de sacar a la venta "clónicos" del Flash). Por ejemplo, se puede usar Flash para la creación de DVDs interactivos (como los que incluyen las revistas de informática, entre otras), la creación de banners publicitarios o lo que más está de moda ahora: la creación de dibujos animados (os sorprendería saber la cantidad de dibujos animados conocidos creados o animados mediante Flash). Además, Flash tiene uso industrial, pues se emplea para optimizar planos, crear diseños de interiores y trabajar con imágenes vectoriales en general. No dejes de aprender a manejar el programa con más futuro... (al menos en cuanto a diseño web) Aquí tienes algunas páginas interesantes hechas con FLASH NRG y fwa, o con entradas muy llamativas http://www.derbauer.de/.

NRG

http://www.thefwa.com/

http://www.derbauer.de/


10

2.5. Primera animación Flash. Una de las características principales de Flash es su sencillez, esta sencillez en su utilización permite crear animaciones de un modo efectivo y rápido. Pongámonos en situación, supongamos que queremos crear una animación en la que una pelota

realice un movimiento de "bote", es decir, que baje y suba. Puede parecer un trabajo de horas,

pero nada más lejos de la realidad.

En este apartado no pretendemos enseñar cómo crear una animación Flash (pues eso se verá más

adelante), el objetivo es que entendamos cómo crea Flash las animaciones y de que modo nos

facilita el trabajo.

A primera vista, lo lógico parece ser dibujar la pelota en cada instante del movimiento, de modo

que cuantos más instantes dibujemos, más 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 más 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 animación de movimiento entre estos fotogramas. Fácil ¿verdad?

En esta versión de Flash aún se ha facilitado más la realización 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 más manejable e intuitiva. Además, tiene la ventaja de que es casi idéntica a la de otros programas de Adobe (Photoshop, Dreamweaver, Illustrator...), todo esto hace más fácil aprender Flash y más rápido 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 versión de evaluación de Flash CS5 en castellano. Puedes descargar esta versión de forma gratuita desde la web de Adobe. Estará disponible hasta que se lance la siguiente versión. 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 menús. Todos se irán viendo a lo largo de este curso aunque no aparezcan en esta imagen, que sólo pretende mostrar las partes principales de la interfaz de Flash. Veamos cuáles son.

https://www.adobe.com/cfusion/tdrc/index.cfm?loc=es_es&product=flash


12

3.2. La barra de Menús.

La Barra de Menús tiene como propósito facilitar el acceso a las distintas utilidades del programa. Es similar a la de cualquier otro programa de diseño web o gráfico, aunque tiene algunas particularidades. Veamos los principales Submenús a los que se puede acceder:

Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la utilidad Importar que inserta en la película actual casi todo tipo de archivos (sonidos, vídeo, imágenes e incluso otras películas Flash), o la de Configuración de Publicación desde donde se pueden modificar las características de la publicación. También permite configurar la impresión de las páginas, imprimirlas...

Edición: Es el clásico menú que te permite Cortar, Copiar, Pegar... tanto objetos o dibujos como fotogramas; también permite personalizar algunas de las opciones más comunes del programa.

Ver: Además de los típicos Zooms, te permite moverte por los fotogramas y por las escenas. También incluye la posibilidad de crear una cuadrícula y unas guías. Esto se puede seleccionar desde los submenús Cuadrícula y Guías desde donde también se pueden configurar sus opciones.

Insertar: Permite insertar objetos en la película, así como nuevos fotogramas, capas, acciones, escenas...

Modificar: La opción Transformar permite modificar los gráficos existentes en la película, y la opción Trazar Mapa de Bits convierte los gráficos en mapas vectoriales (este tema se tratará más adelante). El resto de opciones permite modificar características de los elementos de la animación Suavizar, Optimizar o de la propia película (Capa, Escena...).

Texto: Sus contenidos afectan a la edición de texto. Más 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 edición) que hayamos almacenado en nuestra animación, obtener otros nuevos de la página de Macromedia o ejecutar los que ya tengamos.

Control: Desde aquí se modifican las propiedades de reproducción de la película. Reproducir, Rebobinar, Probar Película....

Depurar: Aquí encontraremos las opciones de depuración de la película que te ayudarñan a encontrar errores de progrmación en ActionScrit, entre ellos se encuentran Entrar, Pasar, Salir, Continuar...


13

Ventana: Este menú, además de las opciones clásicas acerca de cómo distribuir las ventanas, incluye accesos directos a todos los paneles y también 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 Línea de tiempo.

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

de 2 partes.

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

2) Los Números de Fotograma que permiten saber qué número tiene asignado cada fotograma,

cuánto dura o cuándo aparecerá en la película.

Además, en la parte inferior hay herramientas para trabajar con Papel cebolla e información sobre

el Número de Fotograma actual (1 en la imagen), la Velocidad de los Fotogramas (24.0 en la

imagen) y el Tiempo de película transcurrido (0.0s en la imagen).

A nivel conceptual, la Línea de Tiempo representa la sucesión de Fotogramas en el tiempo. Es

decir, la película Flash no será nada más que los fotogramas que aparecen en la Línea de

tiempo uno detrás de otro, en el orden que establece la misma Línea de tiempo.

3.3.1 Fotogramas.

Un fotograma representa el contenido de la película en un instante de tiempo. Por tanto, una animación no es más que una sucesión de fotogramas. Todo esto se puede controlar desde la Línea de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual. Veamos qué tipos de fotogramas hay y cuáles 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 película. Se identifican por tener un

punto negro en el centro y cuando esté vacío se le diferencia por

una línea negra vertical.

Por ejemplo, en el ejemplo de la "pelota" que rebotaba en el suelo habría 3 Keyframes. Uno para

cada posición 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 misión es prolongar la duración de

un fotograma clave o keyframe.

C) Fotograma Contenedor: No son fotogramas propiamente dichos, sino que representan un lugar

dentro de la Línea de Tiempo en la que se puede insertar uno. Por defecto ocupan toda la película

y Flash no los tendrá en cuenta al publicar la película. 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 Vacío: Son fotogramas sin contenido, Su color es blanco.

En la imagen, los fotogramas del 6 al 10 (incluidos) son fotogramas vacíos. No debemos

confundirlos con los fotogramas contenedor, pues estos últimos vienen delimitados por líneas

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 animación). De modo que si queremos que un objeto

aparezca en el fotograma 1 y después otra vez en el fotograma 10.

Los fotogramas del 2 al 9 deberán ser fotogramas vacíos 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 duración 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 acción 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 película. En la imagen, la

acción existente en el fotograma 1 afecta también 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 Animación de Movimiento: Vienen

caracterizados por el color morado y representa el movimiento (con

o sin efectos) de un objeto, que pasa de la posición

del Keyframe inicial al final. Para representar esta animación

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 película final) y del 6 al 11. Otro movimiento.

2) Fotogramas de animación de Forma: Vienen caracterizados por

el color verde y representan un cambio en la forma de un objeto,

que pasa de la forma que tenía en el Keyframe inicial a la del final.

Para representar esta animación aparece una flecha entre

estos Keyframes.

Este ejemplo, similar al de arriba representa el cambio de forma de la pelota. En el frame 1 tendría

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. Aún así, veamos a grandes rasgos qué son las capas. Una Capa se puede definir como una película independiente de un único nivel. Es decir, una capa contiene su propia Línea de Tiempo (con infinitos fotogramas). Los objetos que estén en una determinada capa comparten fotograma y por tanto, pueden "mezclarse" entre sí. Esto es interesante a menudo, pero otras veces es conveniente separar los objetos de modo que no interfieran entre sí. Para ello, crearemos tantas capas como sea necesario. El uso de múltiples capas además, da lugar a películas bien ordenadas y de fácil manejo (es conveniente colocar los el código ActionScript en una capa independiente llamada "acciones", por ejemplo). Las ventajas y desventajas de usar capas se verá en la unidad referente a Capas.

3.5. El Escenario. A continuación veremos las diferentes partes que conforman el Área de trabajo empezaremos con la más importante: el Escenario. Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la película 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 botón derecho sobre cualquier parte del escenario en la que no haya ningún objeto y después sobre Propiedades del documento: Añade metadatos a tus archivos para una mejor inclusión de estos en los motores de busqueda rellenando los campos de Título y Descripción.

Dimensiones: Determinan el tamaño de la película. El tamaño mínimo es de 1 x 1 px (píxeles) y el máximo de 2880 x 2880 px.

Unidades de Regla: Unidad que se empleará para medir las cantidades.

Coincidir: Provocan que el tamaño de la película coincida con el botón seleccionado (tamaño 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 película.

Velocidad de Fotogramas: O número de fotogramas por segundo que aparecerán en la película. Para cambiar este número, arrastra con el cursor hacia la derecha o izquierda.

Transformar en predeterminado: Este botón 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 podrán 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 más 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 Submenús 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 rápido para dichos comandos. Veamos en qué consisten:

A) Mostrar Fotograma: Muestra el contenido del Fotograma actual en su totalidad. Es decir,

amplia el tamaño del fotograma hasta ocupar todo el Área de Trabajo. Si hay objetos fuera del

Área de Trabajo, no se verán.

B) Mostrar Todo: Muestra en el Área de Trabajo todos los objetos que haya en la película,

adaptando el tamaño del fotograma al espacio necesario para que quepan. Si todos los objetos

están 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 tamaño del Escenario.

C) 25%, 50%...: Muestra el fotograma con el tamaño que indiquemos en % teniendo en cuenta

que el 100% es el tamaño de referencia. Es decir, el 100% es el tamaño original de la película

(ocupa lo que se verá al publicar la película), todo lo demás depende de cuánto 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 según su función (por ejemplo, todo lo que haga referencia a las acciones, irá en el Panel Acciones). Su misión es simplificar y facilitar el uso de los comandos. Estos paneles o ventanas se encuentran organizados en el lateral derecho del área de trabajo. Pudiéndose expandir o minimizar con un clic de ratón. Si no están 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 algún momento el entorno se vuelve un poco caótico puedas recuperar tu configuración elegida desde el menú Ventana. Para ello deberás acceder a la opción Ventana → Espacio de trabajo → Nuevo espacio de trabajo y asignar un nombre a nuestro nuevo espacio.

Ahora sólo bastará darle un nombre a la disposición y será accesible desde el mismo elemento de menú Espacio de trabajo en cualquier momento.


19

Todos los paneles se estudiarán en profundidad a lo largo del curso. Aún así, vamos a nombrarlos y a resumir las funciones de la mayoría de ellos.

Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy útil.

Panel Color: Mediante este panel creamos los colores que más nos gusten.

Panel Muestras: Nos permite seleccionar un color de modo rápido y gráfico. (Incluidas nuestras creaciones).

Panel Información: Muestra el tamaño y las coordenadas de los objetos seleccionados, permitiéndonos modificarlas. Muy útil para alineaciones exactas.

Panel Escena: Modifica los atributos de las escenas que usemos. Escena no es más que una porción de la Línea 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 película.

Panel Comportamientos: Permiten asignar a determinados objetos una serie de características (comportamientos) que después podrán almacenarse para aplicarse a otros objetos de forma rápida 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 características y muchas utilidades (calendarios, scrolls etc...)

Panel Cadenas: Mediante este panel Flash aporta soporte multi-idioma a nuestras películas.

Panel Respuestas: Macromedia pone a nuestra disposición ayuda y consejos accesibles desde este panel.

Panel Propiedades: Sin duda, el panel más usado y más importante. Nos muestra las propiedades del objeto seleccionado en ese instante, color de borde, de fondo, tipo de trazo, tamaño de los caracteres, tipografía, propiedades de los objetos (si hay interpolaciones etc...), coordenadas, tamaño etc... Es fundamental, no debes perderlo de vista nunca.

Panel Explorador de Películas: Nos permite acceder a todo el contenido de nuestra película de forma fácil y rápida


20

4. Dibujar y colorear.

4.1. El dibujo en Flash CS5. Cuando se diseña una página web o una animación el diseñador pasa por muchas fases. Tras la fase de "Qué quiero crear y cómo va a ser" viene (normalmente) la fase de diseño gráfico. Llevar lo que ha producido tu imaginación al papel (en este caso al papel de Flash). No conviene engañarnos, Flash no es un programa de diseño gráfico, pero su potencia en este ámbito es casi tan grande como la de estos programas. Vamos a ver cómo emplear cada herramienta de dibujo para sacarle el máximo partido.

4.2. La barra de Herramientas - (Herramientas Básicas). 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 más importantes:

A) Herramienta Selección (flecha). Es la herramienta más usada de todas. Su uso principal es para seleccionar objetos, permite seleccionar los bordes de los objetos (con doble clic), los rellenos (con un sólo clic), zonas a nuestra elección... 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 verán en el tema siguiente.

C) Herramienta Línea. Permite crear líneas rectas de un modo rápido. Las líneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la línea 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 círculos o elipses de manera rápida y sencilla.


21

E) Herramienta Lápiz. Es la primera herramienta de dibujo propiamente dicho. Permite dibujar líneas 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 lápiz, pero por defecto su trazo es más 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 análogo a la Herramienta Pincel. Pero su función es la de eliminar todo aquello que "dibuje".

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

A) Herramienta Lazo. Su función es complementaria a la de la herramienta Selección, pues puede seleccionar cualquier cosa, sin importar la forma, (la Herramienta Flecha sólo puede seleccionar objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la selección a mano).

Al seleccionar esta herramienta, en el Panel de Herramientas aparecen estos botones: . Esto es la herramienta Varita Mágica, tan popular en otros programas de dibujo. Permite hacer

selecciones según los colores de los objetos. El tercer dibujo que aparece es este: para seleccionar Polígono.

B) Herramienta Pluma. Crea polígonos (y por tanto rectas, rectángulos...) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las más potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vértices de los polígonos, lo que nos asegura una gran precisión. Para crear curvas, hay que señalar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de práctica se acaba dominando.


22

C) Herramienta Sub selección. Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vértices que componen los objetos creados con dicha herramienta.

D) Herramienta Bote de Tinta. Se emplea para cambiar rápidamente 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 misión 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 además debemos hacer clic en la línea 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 sensación de estar "unidos".

B) Suavizar. Convierte los trazos rectos en líneas menos rígidas.

C) Enderezar. Realiza la labor inversa. Convierte los trazos redondeados en más rectilíneos.

4.5 El panel Color. El Panel Color, como su nombre indica se usa para fabricar nuestros propios colores y para seleccionar los que más nos gusten. Para seleccionar un color determinado, bastará con hacer clic en las pestañas que se encuentran junto a los iconos de las herramientas de Lápiz y de Bote de Pintura. (Si queremos modificar el

color de un borde, pulsaremos sobre el color que está junto al lápiz y si queremos

modificar un relleno, haremos clic en el color que está junto al bote de pintura .


23

Al hacerlo aparecerá un panel con multitud de colores para que seleccionemos el que más nos gusta. También permite introducir el código del color según el estándar. En vez de este selector rápido, 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:

Sólido: 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 película (O ajena a ella si antes se "importa")

4.6. El panel Muestras. El Panel Muestras sirve para poder ver de un modo rápido y claro los colores de que disponemos, tanto sólidos (un solo color) como degradados (lineales o radiales). Además, 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 rápidamente cada vez que trabajemos con nuestra película. Cada película tiene su propio conjunto de muestras y cada vez que la abramos para editarla, podremos usar las muestras que teníamos la última vez que trabajamos con dicha película.


24

5. Textos

5.1. El texto en Flash. Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animación, y por tanto, también todo aquello relativo a los textos. Sin embargo, Flash fue concebido para crear animaciones gráficas, de modo que tratará cualquier texto como si de un objeto más 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 estático o normal, texto dinámico y texto de entrada (para que el usuario introduzca sus datos, por ejemplo), también se puede crear texto que soporte formato HTML etc... Actualmente Flash utiliza dos motores para trabajar con texto: el motor clásico, 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 , que es la que nos permitirá escribir texto en nuestros proyectos.

Los caracteres del texto no están introducidos directamente en el documento, si no que están confinados en un contenedor de texto. En Flash podemos introducir dos tipos de contenedores:

A) Texto de puntos. El tamaño del contenedor depende del texto introducido, creciendo y decreciendo con él. B) Texto de área. Podemos definir su tamaño, 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 tamaño del área. En cualquier caso, siempre podemos convertir un Texto de puntos en área simplemente cambiando su tamaño, estirando de los controles de transformación 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 película final no se verá, pero nos servirá para localizar más fácilmente el texto y para moverlo o cambiar su tamaño. Finalmente, el círculo que hay arriba a la derecha significa que el recuadro del texto se expandirá según vayamos escribiendo y también el texto. Esto es, todo lo que escribamos, estará en la misma línea.

Si escribimos en el recuadro creado por defecto vemos como se alarga el recuadro que lo contiene. Para cambiar de línea, sería necesario pulsar la tecla Enter (Intro).

Si por otra parte, queremos delimitar lo que va a ocupar nuestro texto (cosa bastante común, acercaremos el cursor del ratón al borde del recuadro de texto, según donde lo acerquemos, se transformará en un símbolo o en otro.

Si lo acercamos al borde del recuadro, se le añadirá debajo de la flecha una flecha pequeña de 4 direcciones como la que muestra la figura y que nos indica que podemos mover el texto:


26

Si lo acercamos al círculo 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 límites del recuadro de texto, y además, el círculo que aparecía en el margen superior derecho, se convierte en un cuadrado. Este cuadrado significa que los límites del recuadro de texto han quedado fijados, y que al insertar más texto, se producirá un salto de línea en lugar de ensanchar el recuadro de texto. Este sería su comportamiento al introducir texto:

Si quisiéramos, (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 círculo y su comportamiento será el descrito al principio de esta página.

5.4. Propiedades de los textos. El Panel Propiedades contiene las principales propiedades de todos los objetos que empleemos durante nuestra película, 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 categorías.


27

Observarás que las imágenes 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 más

opciones. La de la derecha tiene establecido el motor Texto clásico, y aparecen menos opciones,

las que veníamos encontrando en la anterior versión del programa.

5.4.1 Texto clásico. A) El motor de texto clásico En Flash CS5, Adobe ha implementado un nuevo motor de renderizado de texto más completo y funcional. No obstante, existen algunas funciones que sólo están disponibles si se usa el motor de texto clásico, es por ello que Flash nos permite seguir utilizándolo. Flash distingue entre diversos tipos de textos clásicos y les da un tratamiento especial, según 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 más que haciendo clic sobre la pestaña Tipo de texto:

. B) Texto estático. El Texto Estático se caracteriza por no presentar ningún cambio a lo largo de la animación. Es importante que no confundamos la palabra "estático" con que el texto no se mueva o malinterpretemos la frase es el texto que no presenta cambios a lo largo de la animación. 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 estático. Así, un recuadro de texto en el que pone "Aprende Flash CS5" durante toda la película, es estático, aunque dicho texto cambie de posición, forma o color. Sin embargo, si en ese mismo recuadro de texto pasa a poner "Con este Curso", este recuadro de texto NO es estático. Se insistirá en este punto en los ejercicios de evaluación. C) Texto dinámicos. El Texto Dinámico en contraposición al estático sí que puede cambiar su contenido (además de estar animado). Su uso es bastante más complejo que el del Texto Estático, ya que cada recuadro de texto Dinámico puede ser una variable modificable mediante ActionScript, esto quiere decir que los valores y propiedades de este tipo de textos se pueden modificar mediante programación, lo que nos saca del objetivo de este curso. Un uso común 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 número de líneas que van a tener, se puede introducir texto HTML, se puede añadir fácilmente un borde al texto o dar nombre a la variable que represente al texto Dinámico.


28

Una opción interesante es el botón , que nos permite indicar qué caracteres incluir en el archivo SWF. Aquí debemos de indicar los caracteres que esperamos que muestre el texto dinámico. Al editar nuestra película, distinguiremos los textos dinámicos por aparecer enmarcados en una línea discontinua. D) Introducción de texto. El Texto de Entrada o Introducción de texto tiene básicamente las mismas propiedades que el Texto Dinámico, junto con algunas propias de un tipo de texto orientado a la introducción de datos por parte de usuario, como por ejemplo el número máximo de líneas 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 contraseñas). Evidentemente este tipo de texto se reflejará en nuestra película 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 Dinámico. Flash permite crear animaciones de texto tan interactivas como las que pueden crear con imágenes (ya hemos visto lo sencillo que es convertir un texto en un enlace a otra página web). Aún 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 muchísimas horas y mucha paciencia. Los resultados son increíbles, pero puede resultar recomendable en estos casos usar algunos programas diseñados con este objetivo. Entre otros destacan el Swish, el FlaX o el MiX-Fx, con ellos podrás crear efectos de texto asombrosos en pocos minutos, aunque no podrás gozar del entorno de Flash CS5 ni podrás 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, deberás de emplear el motor

clásico.

Veamos las principales opciones del panel Propiedades, comunes a ambos motores. Otras más

específicas las veremos más adelante, cuando vayamos a emplearlas:

Podemos elegir cómo se comporta el texto: Si es Seleccionable, y el usuario lo podrá seleccionar y

copiar en el portapapeles, Sólo lectura, lo que impedirá que lo pueda seleccionar, o si lo puede

cambiar (Editable), por ejemplo, para introducir datos.

Además, podemos establecer la orientación del texto, en Horizontal (por defecto) o Vertical.

A) Posición y Tamaño: Dado que Flash trata los textos como objetos, éstos también 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 tipografías 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. También se muestran los valores del ancho (AN) y alto (AL) del texto.


30

B) Carácter. En esta sección encontramos las opciones típicas del texto:

Familia: Desde aquí, al igual que en los editores de texto más comunes podemos seleccionar el tipo de letra o "fuente" que mejor se ajuste a nuestro diseño.

Estilo: Nos permiten la combinación de los dos estilos de texto habituales: texto normal (Regular), en cursiva (Italic), negrita (Bold) o negrita cursiva (Bold Italic).

Tamaño: El tamaño de la tipografía empelada.

Interlineado: Nos permite controlar la separación entre las líneas de texto dentro de un mismo párrafo.

Color: Como al resto de elementos, podemos dar color al texto.

Espaciado: Determina el espaciado adicional entre caracteres. Útil cuando la tipografía que empleamos muestra las letras muy juntas o para dar efectos concretos al texto.

Ajuste automático: Activar esta casilla provoca que la separación entre caracteres se realice de modo automático.

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 más 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. Sólo deberíamos de utilizar esta opción para las familias de fuentes más comunes.

Suavizado para legibilidad, favorece la legibilidad del texto. En este caso, deberíamos de incorporar la fuente, como veremos más adelante. No debemos de emplearla en textos animados.

Suavizado para animación, es la mejor opción cuando pretendemos animar texto, ya que se obtienen animaciones más fluidas ignorando algunos aspectos del texto, como alineaciones. En este caso, deberíamos 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, superíndice y subíndice.

C) Carácter avanzado:

Vínculo: Si queremos que al pulsar sobre nuestro texto, el usuario vaya a una dirección web, nada más fácil que escribirla ahí. Flash la asociará al texto que estés 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 ...

Además, en esta sección podemos especificar cómo se comporta el texto Por ejemplo, que se muestre en mayúsculas, los saltos, etc...

C) Un Párrafo no es más que un conjunto de caracteres con propiedades comunes a todos ellos. Estos párrafos admiten ciertas opciones que nos permiten trabajar con bloques de texto. El Panel Propiedades nos proporciona las siguientes opciones para trabajar con párrafos (entre otras).

A la Izquierda: Todas las líneas empezarán tan a la izquierda como sea posible (dentro del recuadro de texto que hayamos definido).

Centrar: Las líneas se distribuyen a la derecha y a la izquierda del punto medio del párrafo.


32

A la derecha: Todas las líneas empezarán 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 límites. Las diferentes opciones se refieren a la última línea del texto, que suele ser más corta que el resto.

El resto de opciones nos permiten determinar los márgenes (izquierdo y derecho), los sangrados de párrafo 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 categoría de opciones Contenedor y flujo.

La propiedad Comportamiento se refiere a como se amplía un contenedor de Texto al introducir texto. A) Caracteres máx.: Nos permite limitar el número máximo de caracteres que se pueden introducir en la caja de texto. Alineación: nos permite establecer la alineación horizontal del texto en el contenedor. Sus valores pueden ser Superior, Centrar, Inferior o Justificar.


33

B) Columnas nos permite dividir fácilmente un texto de área en el número de columnas indicado. En este caso, también podremos regular el espacio entre ellas (medianil).

. C) El relleno (padding) permite crear una separación entre los bordes del contenedor y el texto. Además, 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 tríptico, por ejemplo. En este caso lo ideal sería tener un texto

de área centrado en cada página, 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 símbolo . 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 Selección 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 continuación. El cursor

cambiará a cursor de , dándonos 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 película, se sustituirá por otra fuente disponible. Esto es un problema, ya que puede alterar bastante nuestro diseño. 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 película usamos el botón Incorporar que aparece en el panel de Propiedades. Se abrirá el siguiente cuadro de diálogo:

En el desplegable Familia seleccionamos la fuente que deseamos utilizar. Seleccionamos los estilos

que vamos a utilizar (Negrita, Cursiva y Tamaño).


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á señalada con

un asterisco (*).

De esta forma nos aseguramos que nuestro proyecto se verá tal cual lo creamos.

5.8. Introducir texto. Aunque el uso más común y principal de los contenedores de texto es mostrarlo, también 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 también hemos hecho que el contenido de todos cambie según lo que se escriba en el primero.


36

Para recoger información de los usuarios, normalmente emplearemos componentes de formulario, que son controles específicos para esta función. Pero a esto le dedicaremos un tema completo más adelante. Pero ¿cómo recogemos la información introducida en el cuadro de texto? Aunque aún 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. ¿Quién sería capaz de ver una película muda? ¿Y una animación espectacular sin sonido? Hasta hace poco, los únicos sonidos que oíamos en las páginas web eran los famosos "midis", de escaso tamaño y de escasa calidad. De hecho, eran sólo instrumentos musicales sin voz, de ahí su pequeño tamaño (y calidad). Aún así, siempre existía algún creador de páginas web que se aventuraba a poner algún sonido complejo (.wav o .mp3) en su página web, por desgracia, su carga es tan lenta, que la mayoría de los visitantes se irían de la página sin llegar a escucharla. Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia, poner sonido a las páginas web es un poco más fácil, ¿qué aporta Flash? Flash nos permite insertar cualquier sonido que queramos en nuestras películas (.wav, .aiff, .mp3, etc...) de forma fácil y muy efectiva, ya que es capaz de acelerar la descarga del sonido siempre y cuando se descargue junto con nuestra película. Podemos dar a la película efectos simples (el típico "clic" al pulsar un botón), efectos complejos (música de fondo) e incluso podemos hacer que la animación se desarrolle conjuntamente con una música (si bien esto último necesitaría que toda la película estuviera descargada previamente, para evitar "atascos" durante el desarrollo de la animación). En definitiva, Flash nos lo vuelve a poner fácil. Pero hemos de tener cuidado al incluir sonidos, sobre todo si son melodías. Es preferible que sea el usuario quien las active a través de un botón, o si es necesario que se reproduzcan automáticamente, tener un control fácilmente localizable para silenciarlo.

6.2. Importar sonidos. A) Utilizar sonidos externos. Podemos insertar en una película de Flash sonidos que tengamos en formato digital: grabados por nosotros mismos, descargados de internet, etc...Pero para que esté disponible en nuestra película y podamos usarlo, antes debemos de importarlo. Realmente debemos de importar a flash cualquier archivo externo que queramos usar: sonidos, gráficos, e incluso con otras películas Flash. Importar por tanto, no es más que decirle a Flash que añada un determinado archivo a nuestra película, para que podamos usarlo cuando queramos. En realidad, lo añade a nuestra Biblioteca, que es el Panel en el que están todos los objetos que participan en la película (este panel se verá más adelante).


38

Así pues si queremos manejar un sonido en nuestra película, 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 diálogo de Importar a biblioteca. Allí deberás 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 película. Selecciónalo haciendo clic sobre él y haz pulsa el botón Aceptar. El sonido estará listo para usarlo donde quieras, podrás 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 través 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 más 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 ningún 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 aparecerán los sonidos que tenemos importados en la Biblioteca. Deberemos seleccionar la canción que pretendamos añadir a nuestra película (en el siguiente punto veremos cómo insertarla). Si no queremos reproducir sonido, seleccionamos Ninguno. B) Efecto: Desde aquí podremos añadir algún efecto a nuestro sonido, como por ejemplo que el sonido pase del canal izquierdo al derecho (esto crea la sensación 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 añadir complejos efectos sonoros, deberemos tratar adecuadamente el sonido con algún programa creado específicamente para este propósito antes de importarlo. En el punto Editar Sonidos se tratará en más profundidad estos efectos.

C) Sinc: Esta opción 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 opción por defecto y provoca que el sonido se empiece a reproducir al pasar la película por el fotograma en el que está situado. También se puede sincronizar el sonido con botones y los demás tipos de símbolos. 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 opción sincroniza el sonido con el o los objetos con los que esté asociado, por tanto, si la carga de la película es lenta y las imágenes no fluyen adecuadamente, el sonido se detendrá para sincronizarse con ellas. Este efecto puede dar la sensación de que la película 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 reacción muy negativa en los que pueden estar viendo nuestra película). Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el efecto de que un personaje hable durante una película. En esta situación, es muy recomendable que el sonido y las imágenes estén sincronizadas.

D) Repetir: Determina el número de veces que se reproducirá el sonido según lo indiques de la derecha. También 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 opción Flujo y a la vez la de Repetir, ya que al estar sincronizados los sonidos con las imágenes, provocaríamos que las imágenes (y los fotogramas que las contengan) se dupliquen también, aumentando considerablemente el tamaño de la película.

6.4. Insertar sonido en línea de tiempo. Al añadir un sonido directamente sobre la línea 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 música a la película. Lo mejor será crear una nueva capa para cada sonido. Así lo controlaremos fácilmente. Creamos un fotograma clave en el momento en que queremos que comience a reproducirse el sonido, y lo arrastramos de la biblioteca al escenario. También podemos elegirlo directamente desde el panel de Propiedades. Con el fotograma de la nueva capa seleccionado, accedemos a sus propiedades, a la sección de Sonido. Seleccionamos los efectos deseados, y las veces que lo queremos Repetir. En el menú Sinc. Seleccionamos la opción de sincronización 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 reproducción del sonido a partir de ahí, marcamos Inicio. Si queremos iniciar el sonido en un fotograma más 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 más 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 sería utilizar la opción Flujo.

Al seleccionar esta opción, el sonido se reproducirá hasta que se acabe o llegue a un fotograma clave, siguiendo la película. Sólo es aconsejable esta opción si realmente la necesitamos.

6.5. Sonidos en botones. Es muy común insertar un breve sonido al pulsar un botón, así el usuario percibe que ese botón "hace algo". Como veremos más adelante, los botones tienen su propia línea de tiempo, con sus distintos estados. Por eso, no tenemos más que insertar los sonidos para cada estado. Lo que sí debemos de tener en cuenta, es en usar la opción de Sincronización 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. Aún así, los efectos que permite aplicar de un modo sencillo suelen ser suficientes para cualquier animación que queramos realizar. Disponemos de estos efectos del panel Propiedades:

Canal Izquierdo: El sonido tan sólo se escuchará por el altavoz izquierdo.

Canal Derecho: El sonido tan sólo 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 opción nos permite "editar" el sonido de un modo rápido y sencillo. Desde este editor podemos decidir qué volumen tendrá nuestro sonido y en qué altavoz. Podemos crear los efectos anteriores ajustándolos a nuestro gusto y podemos crear efectos más complejos a nuestra medida.

Esta es la apariencia del cuadro de diálogo Personalizar Sonido. La parte superior representa el canal izquierdo y la parte inferior el canal derecho. Entre las 2 partes hay una línea de tiempo que nos indica el tiempo de sonido transcurrido en cada punto. Las líneas 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 máximo), pero el canal derecho empieza en silencio, para poco a poco alcanzar el volumen normal (este efecto equivaldría 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 película, obteniendo formas. En este tema profundizaremos en cómo trabajar con estas formas u objetos, para ajustarlos a nuestras necesidades. Independientemente de si estamos trabajando en una animación, en una página web, en un catálogo 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 película y sea visible, de modo que podamos trabajar con él, por ejemplo, cualquier imagen que creemos o importemos, un botón, un dibujo creado por nosotros mismos etc... Los objetos de dibujo así considerados tienen 2 partes fundamentales:

El Borde: Consiste en una delgada línea que separa el objeto del exterior, del escenario. Puede existir o no, según nos convenga. Cuando creamos un objeto, el borde se crea siempre y su color será el indicado en el Color de Trazo (dentro del Panel Mezclador de Colores). Si queremos dibujar creando Bordes deberemos emplear las Herramientas Lápiz, Línea o Pluma y si queremos que nuestro dibujo no tenga borde, bastará con seleccionar el borde y suprimirlo (ver siguiente punto).

El Relleno: El relleno no es más que el propio objeto sin borde. Es, por tanto, la parte interna del objeto. Su existencia también es arbitraria, ya que podemos crear un objeto cuyo color de relleno sea transparente, como ya se vio en el tema de Dibujar, y por tanto, parecerá que dicho objeto no tiene relleno, aunque en realidad sí que exista pero sea de color transparente. Para dibujar Rellenos (sin borde) podemos usar herramientas tales como el Pincel o el Cubo de Pintura.

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 están seleccionadas.


44

Objeto SIN seleccionar Objeto con el BORDE seleccionado Objeto con el RELLENO seleccionado

Veamos cómo seleccionar las diferentes partes de un objeto:

Seleccionar un Relleno o un Borde: Basta hacer clic 1 vez en el Relleno o en el Borde que queramos seleccionar.

Seleccionar el Relleno y el Borde de un objeto: Hacer doble clic en el Relleno.

Seleccionar todos los bordes (o líneas) de un mismo color que estén en contacto: Hacer doble clic sobre una de las líneas que tenga el color que pretendamos seleccionar.

Seleccionar un Símbolo, un texto, o un grupo: Clic en el Símbolo, en el texto o en el grupo. Estos tipos de objetos mostrarán un borde de color azul (por defecto, depende de la capa) al estar seleccionados.

Seleccionar Varios elementos: Mantendremos pulsada la tecla SHIFT (Mayúsculas) mientras seleccionamos los objetos que queramos.

Seleccionar los objetos que se encuentran en una determinada zona: Para ello usaremos la Herramienta Selección (flecha). Haremos clic en una parte del escenario y arrastraremos el cursor hasta delimitar el área que contenga los objetos que queremos seleccionar. Si esta área corta una forma, sólo quedará seleccionada la parte del objeto que esté dentro del área que hemos delimitado. Si quisiéramos incluir dicho objeto, bastaría con usar la tecla SHIFT y seleccionar la parte del objeto que falta por seleccionar. Este modo de seleccionar objetos permite seleccionar muchos objetos rápidamente, además de permitirnos seleccionar determinadas zonas de los objetos, para cortarlas, pegarlas... Además de la Herramienta Seleccionar, también podemos usar la Herramienta Lazo, más útil aún si cabe. Nos permite seleccionar cualquier zona de cualquier forma (la forma la determinamos nosotros) del objeto que sea. Al contrario que la Herramienta Flecha, las áreas seleccionadas no tienen por qué ser rectangulares.

Seleccionar a partir de la Línea de Tiempo: Si seleccionamos un determinado fotograma en la línea de tiempo, se seleccionan automáticamente todos los objetos que estén en dicho fotograma. Esto es útil para modificar de un modo rápido todos los elementos del fotograma.

Seleccionar Todo: La forma más natural de seleccionar todo, consiste en hacer clic en el menú Edición → Seleccionar Todo.


45

7.3. Alineación de objetos. Ahora que ya sabemos seleccionar los objetos o las partes de estos que consideremos oportunas, veamos cómo colocarlos en el Escenario. Para colocarlos de un modo preciso (por no decir exacto), Flash pone a nuestra disposición el Panel Alinear. Este Panel lo podemos encontrar en el Menú Ventana → Alinear. Así funciona:

El Panel Alinear permite colocar los objetos tal y cómo le indiquemos. Antes de ver las posibilidades, debemos hacer hincapié en la opción Alinear en escenario. Esta opción nos permite decir a Flash que todas las posiciones que indiquemos para nuestros objetos tomen como referencia el escenario. Si esta opción no está seleccionada, los objetos toman como referencia al conjunto de objetos en el que se encuentran, y se colocan en función de ellos. Lo más habitual es seleccionar En Escenario, para que los objetos se coloquen según los límites de la película, en el centro del fotograma etc... Conozcamos un poco mejor el Panel Alinear y sus posibilidades:

A) Alineamiento. Sitúa los objetos en una determinada posición 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 quisiéramos situar un objeto en la esquina inferior izquierda, bastaría pulsar el primer y el sexto botón consecutivamente.


46

Por ejemplo, si queremos que coincida el centro de dos objetos los alineamos al centro horizontal y verticalmente.

B) Distribuir: Sitúa los objetos en el escenario en función de unos ejes imaginarios que pasan por cada uno de ellos, de modo que la distribución de los mismos sea uniforme. Por ejemplo, si tenemos 2 cuadrados y pulsamos el primer botón de la izquierda. Cada uno de los 2 cuadrados se situará en un extremo de la película (uno arriba y otro abajo).


47

C) Coincidir Tamaño. Hace coincidir los tamaños de los objetos. Si está activo Alinear en escenario estirará los objetos hasta que coincidan con el ancho y el largo de la película. Si no está activo, la referencia será el resto de objetos. Por ejemplo, si tenemos 2 cuadrados distintos y la opción Alinear en escenario no está activada, al hacer clic en el primer botón de "Coincidir Tamaño", el cuadrado más estrecho pasará a tener la anchura del cuadrado más 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, podéis ver la animación situada arriba al principio del capítulo.

7.5. Los grupos. Un grupo no es más 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 después 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 demás. Además, aparece el rectángulo azul (por defecto) que rodea al grupo, definiéndolo 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, ahorrándonos 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 tamaño de los coches. Podemos aumentar el tamaño de los coches de uno en uno, corriendo el riesgo de aumentar unos más que otros y perdiendo las proporciones entre ellos, o podemos formar un grupo con los coches y aumentar el tamaño del grupo, de modo que aumenten todos de tamaño a la vez y en la misma proporción. De igual modo, podemos mover al grupo de posición, hacer que gire... Al crear un grupo, simplemente estamos dando unas propiedades comunes a un conjunto de objetos y, en ningún caso perdemos nuestro objeto. En cualquier momento podemos deshacer el grupo, mediante el Menú Modificar → Desagrupar. Además, 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ú Edición → 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 lógico, los cambios realizados afectarán al grupo además de al elemento en cuestión.


49

8. Las capas.

8.1. Capas.

Todo el mundo ha visto alguna vez cómo trabajan los dibujantes de dibujos animados. Y todos

hemos visto cómo colocan una hoja semitransparente (láminas de acetato) con dibujos sobre

otras y la superposición 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 mayoría 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 Línea de Tiempo y por

tanto, sus distintos fotogramas se reproducirán simultáneamente.

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 portería de fútbol. En la otra los fotogramas del 1 al 5 contienen el dibujo de un portero

(del 5 en adelante están vacíos).

Pues bien, esta película nos mostrará inicialmente (durante el tiempo que duren los primeros 5

fotogramas) la portería con el portero, para después (durante los fotogramas del 5 al 10) mostrar

la portería sin portero.

De este modo la portería es independiente del portero, y podemos tratar estos objetos con total

libertad, ya que no interfieren entre ellos para nada.


50

Otra razón para separar los objetos en capas, es que Flash nos obliga a colocar cada animación

distinta en una capa. De lo contrario, todos los objetos que se encuentren en dicha capa formarán

parte de la animación. Si queremos que un objeto no forme parte de una animación, deberemos

quitarlo de la capa en la que se produce dicha animación.

Siguiendo con el ejemplo del portero, si quisiéramos crear un movimiento que haga que el portero

se desplace hacia un lado no hay ningún inconveniente, pero si la portería estuviera en la misma

capa que el portero, entonces ambos objetos se moverían hacia dicho lado, con lo que resultaría

imposible que sólo se moviera el portero. La solución es separar los objetos en 2 capas, como ya

hemos hecho.

Las capas además, tienen otras utilidades, nos permiten ordenar nuestra película de forma lógica,

y nos ayudan en la edición de dibujos (evitando que se "fundan" en uno sólo, o bloqueando el

resto de capas de modo que sólo podamos seleccionar la capa que nos interese).

Otro motivo es para organizar mejor nuestro contenido. Igual que creábamos una capa para los

elementos de audio, crearemos capas para otros elementos, como el código ActionScript.

8.2. Trabajar con capas. La vista estándar de una capa es la que muestra la imagen. Veamos para qué sirven los distintos botones y cómo 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 verán los distintos tipos de capas).

Crear carpeta : Nos sirve para crear carpetas, que nos ayudarán a organizar nuestras capas.

Borrar Capa : 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 más de menor importancia.

Aquí puedes cambiar diferentes opciones sobre la capa, como su nombre o su color. También puedes bloquearla u ocultarla. Pero haremos especial hincapié en la opción Tipo cuyas opciones, Guía y Máscara, veremos más adelante en el curso.

83. Trabajar con capas –( Opciones avanzadas)

Mostrar / Ocultar Capas : Este botón permite ver u ocultar todas las capas de la

película. Es muy útil cuando tenemos muchas capas y sólo queremos ver una de ellas ya

que permite ocultar todas a la vez, para después mostrar sólo 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 edición 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 botón nos muestra/oculta los

contenidos de todas las capas como si sólo estuviesen formados por bordes. De este

modo y ante un conjunto numeroso de objetos, podremos distinguirlos a todos de forma

fácil y podremos ver en qué capa está cada uno de ellos.

También se puede activar o desactivar para cada capa de un modo similar a los anteriores

botones.

Veamos cómo 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

opción, lo mismo sucede con el botón Bloquear capas. En la columna Mostrar capas como

contornos aparece un cuadrado con relleno, lo que simboliza que los objetos se mostrarán

completos y no sólo 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 opción.

Además, 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

podéis ver cómo queda un objeto en función de tener activada o no la opción contorno:


53

8.4. Reorganizar las capas.

Como ya se ha comentado, las distintas capas tienen muchas cosas en común unas con otras. Lo

primero y principal es la Línea de tiempo, todas las capas de una misma escena comparten la

misma línea de tiempos y por tanto, los objetos de todos los fotogramas 1 de todas las capas se

verán al mismo tiempo en la película superpuestos unos sobre otros. ¿y qué objeto está delante

de los demás? Pues este criterio viene dado por la colocación de las Capas en la película. Los

objetos que se mostrarán delante de todos los demás serán aquellos que se encuentren en la

capa situada más arriba.

Es decir, si nos fijamos en el ejemplo anterior:

El portero aparece delante de la portería, porque la capa "Portero" está situada encima de la capa

"Portería", como puede apreciarse en la imagen. Si quisiéramos cambiar esta distribución, basta

con hacer clic en la capa que queramos mover y arrastrarla hacia arriba o hacia abajo hasta la

posición deseada.

Veremos como los objetos se colocan delante o detrás de los de la capa seleccionada según 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. También se puede Copiar el fotograma y luego

pegarlo en la capa de destino.


54

8.5. Tipos de capas. Como habréis podido comprobar al ver las propiedades generales de una capa o al hacer clic con el botón derecho del ratón 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 más usadas y se emplean para todo, colocar objetos, sonidos, acciones, ayudas...

B) Capas animación movimiento. Son las capas que contienen una animación por interpolación de movimiento.

C) Capas Guía / : Son capas especiales de contenido específico. 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 misión es representar la trayectoria de un objeto animado, su contenido suele ser una línea (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 línea curva. La segunda capa la hemos definido como Capa Guía, para que al realizar la animación de movimiento (esto lo veremos en un tema posterior) su contenido no se vea en la película, sino que sirva de recorrido para la bola azul. Es importante recordar que el contenido de las Capas Guía no se verá en la película final. Su efecto hará que la pelota azul se desplace de un extremo de la línea al otro siguiendo esa ruta.


55

D) Capas guiadas (Guided Layers). Definir una capa como guía no tiene sentido hasta que definamos también una capa guiada. Esto es, una capa que quedará afectada por la guía definida en la Capa guía. Si no definimos una capa guiada, la capa guía no tendrá ningún efecto y si bien no se verá en la película (por ser una capa guía) tampoco provocará ningún efecto en las demás 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 guía. Las capas guía y las capas guiadas se relacionan entre sí de un modo evidente. A cada capa guía le corresponden una serie de capas guiadas. Al asociar una capa guía con una capa guiada, el icono que representa a la capa guía cambia, indicándonos que está realizando correctamente su labor. En la imagen podemos ver un ejemplo de capa guía y capa guiada correctamente asociadas entre sí. (La capa llamada inferior es, evidentemente, la capa con Guía)

El funcionamiento de las Capas Guía y sus utilidades lo veremos a fondo en el tema de las Animaciones

E) Capas Máscara. 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 sólo dejan que se vea la parte de éstas que tapan los objetos situados en las capas máscara (son como filtros). Al igual que las capas guía, los objetos existentes en este tipo de capas tampoco se ven en la película final. Sí se verán los objetos de su correspondiente capa enmascarada a los que estén "tapando".

F) Capas Enmascaradas. Estas capas funcionan conjuntamente con las anteriores, ya que son las capas que están bajo las máscaras y a las que afectan. Al igual que las capas guía y las capas guiadas deben ir asociadas unas a otras para que su efecto sea correcto. Sus objetos sí que son visibles en la película final, pero sólo cuando algún objeto de la capa Máscara está sobre ellos.

Veamos el funcionamiento de estas capas con un ejemplo. En este ejemplo, los rectángulos azules forman parte de la Capa Enmascarada y por tanto se verán en la película final (pero sólo lo que tape la capa máscara). El óvalo rojo está situado en la capa Máscara y no se verá en la película, pero sólo se verá lo que él "tape", que es lo que se ve en la imagen de la derecha. Así se emplean las máscaras...


56

9. Símbolos.

9.1. Símbolos Los Símbolos provienen de objetos que hemos creado utilizando las herramientas que nos proporciona Flash CS5. Estos objetos al ser transformados en símbolos, son incluidos en una biblioteca en el momento en que son creados, lo que permite que sean utilizados en varias ocasiones (instancias), ya sea en la misma o en otra película. Los símbolos nos resultarán fundamentales a la hora de crear nuestras animaciones.

9.2. Cómo crear un símbolo La acción de crear un nuevo símbolo es una de las más usadas en Flash ya que es uno de los primeros pasos para crear una animación, como veremos más adelante. El procedimiento es el siguiente:

1) Seleccionamos el o los objetos que queramos convertir en un símbolo. Lo más habitual es partir de una forma.

2) Abrimos a la ventana Convertir en símbolo, accediendo al menú Insertar → Nuevo

Símbolo, desde el menú contextual eligiendo Convertir en símbolo, 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 símbolo que vamos a crear, y que nos permitirá identificarlo en la biblioteca, lo que se hará imprescindible cuando tengamos muchos símbolos.

4) Sólo nos queda seleccionar el tipo de símbolo (desplegable Tipo) al que queremos convertir nuestro objeto. Podemos elegir entre Clip de Película, Botón y Gráfico. Sus características y las diferencias entre ellos las veremos en temas posteriores. Lo más habitual es Clips de película para los objetos que queremos mostrar en el escenario, y Botón si queremos que actúe como tal.

5) Bastará con pulsar Aceptar para tener nuestro símbolo creado.


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 películas que hemos creado. Todas ellas las tenemos a nuestra disposición para utilizar los símbolos que contienen. Para acceder a las bibliotecas comunes que nos ofrece Flash simplemente tenemos que ir a al menú Ventana → Bibliotecas Comunes y seleccionar alguna de las que se nos ofrecen. Las hay de todo tipo de símbolos: botones, clips o gráficos.

Para acceder a la biblioteca de símbolos de la película que estamos creando, de nuevo vamos a la Barra de Menús, Ventana → Biblioteca. En esta biblioteca aparecerán todos los símbolos que hemos creado hasta el momento. Podemos comprobar cómo el nuevo símbolo que hemos creado en el ejercicio paso a paso de la unidad anterior se ha añadido a nuestra biblioteca accediendo a ella como acabamos de indicar. Los símbolos contenidos en las bibliotecas están identificados por su nombre y por un icono que representa el tipo de símbolo que representan:

Clip Botón Gráfico

9.4. Diferencia entre símbolo e instancia.

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


58

9.5. Modificar una instancia.

Hemos visto en el ejercicio anterior que podemos modificar una instancia de un símbolo sin modificar el símbolo original en cuestión. Sin embargo, al no tratarse de un gráfico vectorial (veremos que significa esto más adelante), no podemos modificar las instancias con las herramientas de dibujo de Flash CS5, pero sí mediante el Panel de Propiedades, que permite la manipulación "externa" de la instancia. Así, este panel, que como hemos visto resulta sumamente útil, no nos permite modificar la estructura básica de la instancia, pero sí otras propiedades, esto es, podremos hacer que la instancia tenga más brillo, pero no transformar una estrella en un círculo). Esos cambios debemos de hacerlos directamente sobre el símbolo. Aunque sí podremos crear un símbolo a partir de una instancia, lo que desvinculará la instancia del símbolo 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 símbolo, el Panel Propiedades mostrará las propiedades del objeto en cuestión, pero no las características propias de los símbolos (cambios de color, intercambios etc...) En el momento que seleccionemos un símbolo aparecerán una serie de propiedades y opciones que comentamos a continuación:

Nombre y su icono correspondiente: El nombre de la instancia es muy importante, pues permite identificarla durante la película, y veremos más 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 símbolo es de un vistazo rápido.

Tipo de la instancia. Por defecto se nos muestra el tipo al que pertenecía el símbolo original pero nosotros podemos cambiarlo para que cambie su comportamiento, aunque pueda seguir manteniendo su estructura inicial (en la imagen es Botón).

Símbolo de la Instancia seleccionada (Instancia de:). Esta opción nos muestra el símbolo raíz del que proviene la instancia que estamos modificando.

Intercambiar: Esta opción merece especial atención, pues es muy útil y nos ahorrará mucho trabajo cuando sea necesaria emplearla. Su función consiste en cambiar el símbolo


59

de la instancia por cualquier otro que tengamos en nuestra Biblioteca, por lo que la instancia tomará el aspecto del nuevo símbolo. Puede parecer simple, pero durante el desarrollo de un trabajo profesional rápidamente surge la necesidad de probar situaciones y los diseños gráficos definitivos no suelen estar disponibles hasta bien avanzado el proyecto. Gracias a esta opción podemos trabajar tranquilamente con un "boceto" y sustituirlo de un modo efectivo (el nuevo símbolo hereda las propiedades del antiguo símbolo, incluido el nombre de instancia, las acciones que le afectarán, efectos gráficos etc...) cuando llegue el momento.

En la imagen se puede observar el panel Intercambiar Símbolo.

Este panel además, incorpora el botón Duplicar Símbolo cuya funcionalidad es la que nos podemos imaginar. Es muy útil cuando queremos hacer pruebas con un símbolo 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 gráfico de la derecha se puede observar la pestaña Estilo: del Panel Propiedades. Hay varios tipos de efectos. Si el símbolo se acaba de crear o si no tiene efecto asignado aparecerá en la pestaña Ninguno. En el siguiente apartado comentamos los distintos efectos aplicables a una instancia.


60

A continuación 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 opción permite cambiar el color de la instancia, pero puesto que, como dijimos, no podemos modificar la instancia internamente, al variar el color en la pestaña Tinta o bien mediante los valores RGB (cantidad de rojo, verde y azul), se cambiará el color de toda la instancia como si la estuviéramos tiñendo o poniendo una capa imaginaria de un color determinado. El grosor o intensidad de esta "capa" la podemos modificar en porcentaje mediante la primera pestaña 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 cuestión. También se puede modificar mediante valor directo o con la barra deslizante y es muy útil para animaciones de aparición y desaparición 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 través 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 más 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 translúcido 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 símbolo, pero que el símbolo original sigue intacto.


62

10. Gráficos.

10.1. Gráficos. Los Gráficos son símbolos que nos permiten representar objetos estáticos y animaciones sencillas. En caso de que utilicemos un símbolo gráfico para realizar una animación, debemos tener en cuenta que ésta estará ligada a la línea de tiempo de la película en la que se encuentre. Es decir, la animación se reproducirá siempre y cuando la película original también se esté reproduciendo. Esto hace que, pese a tener su propia línea de tiempo, no puedan contener sonidos, controles ni otros símbolos gráficos. Así pues, normalmente utilizaremos los gráficos para imágenes estáticas o para cuando nos convenga que una animación se reproduzca sólo cuando determinado frame de la línea de tiempo de la película esté en marcha, ya que para los casos que hemos comentado anteriormente en los que un gráfico no nos es útil, Flash nos ofrece otro tipo de símbolos como veremos en temas posteriores.

10.2. Tipos de gráficos. Los gráficos pueden ser: a) Estáticos. Estos gráficos se mantienen sin cambios cuando pasa el tiempo. Estos gráficos son los típicos en los fondos y en los objetos que no desempeñan ninguna función especial. Su tamaño y por tanto, el tiempo de carga de este tipo de gráficos, aunque siempre dependerá de la resolución, de sus dimensiones y de la forma en la que estén creados *, será en general reducido. c) Animaciones. Este tipo de gráfico varía su forma, posición u otras propiedades a medida que va pasando el tiempo. Puesto que para realizar la animación se deben usar varios gráficos más además del original o bien realizar determinadas acciones que modifiquen el estado inicial, el tamaño de esta clase de gráficos, para las mismas dimensiones y forma de creación, será mucho mayor que uno estático. Por esto, aunque las animaciones dan a nuestra web un aspecto más bonito y espectacular tienen dos inconvenientes: 1) Si se trata de un Mapa de Bits (ahora veremos que significa esto) la web puede llegar a tener un tamaño excesivamente grande.


63

2) Aunque no se traten de mapas de bits, por ejemplo, si son animaciones típicas de Flash, cuyo tamaño no es excesivo, el hecho de poner muchas animaciones puede llegar a "marear" un poco al visitante de nuestro sitio y desviar su atención de lo que realmente importa, su contenido. Los tipos de gráfico anteriores pueden ser, a su vez de dos tipos, según la forma en la que estén creados: Gráfico Vectorial o Mapa de Bits.

10.3. Creando un gráfico y comprobando sus propiedades. Como explicar teóricamente las propiedades de un gráfico resulta un tanto confuso, vamos a ver de manera práctica lo que queremos explicar. Vamos a crear un gráfico en Flash y a comprobar las propiedades que hemos comentado en el primer apartado del tema. Para ello, abre una nueva película Flash (Archivo→ Nuevo, archivo ActionScript 3). Ahora tenemos que crear el objeto que queremos convertir en un símbolo Gráfico. Dibujemos, por

ejemplo, un óvalo en cualquier lugar del área de trabajo con la herramienta Óvalo de la barra de herramientas de dibujo y démosle un color de relleno que será lo que después animemos (Selecciona el fondo del óvalo y dale el color azul mediante la herramienta Relleno de

color. ). Ya hemos creado nuestro objeto, vamos a convertirlo en un símbolo gráfico ¿lo recuerdas? Selecciona el objeto, haz clic derecho sobre el o haz clic en el menú modificar y selecciona Convertir en Símbolo, lo convertimos en un símbolo como ya habíamos visto y dándole el nombre GráficoAnimado y seleccionando el Tipo Gráfico:

Ahora vamos a crear la animación del gráfico. Puesto que todavía no hemos visto a fondo las

animaciones, la vamos a realizar de una forma que quizá no sería la más apropiada la mayoría de

las veces, pero nos servirá muy bien para este ejemplo. Para ello selecciona nuestro gráfico y

pulsa el botón derecho del ratón. Se desplegará un menú, en el que seleccionaremos la

opción Edición para modificar el gráfico y acceder a su línea de tiempo. Comprueba que estás en

la línea de tiempos del gráfico (justo encima del escenario existe una secuencia que nos indica en

qué nivel nos encontramos. En la imagen inferior, se puede apreciar

que nos encontramos en "Escena1 - Gráfico Animado" y, por

tanto estamos dentro del gráfico (y la línea de tiempos que vemos es

la del gráfico, y no la de la película principal)


64

Crearemos a continuación nuevos fotogramas clave seleccionando uno a uno los frames número

2, 3 y 4 y pulsando F6 cuando los seleccionemos.

Pulsa sobre el frame 2 y cámbiale el color de fondo al óvalo como hicimos antes. Haz lo mismo en

los dos siguientes frames.

Tu línea de tiempos debería tener este aspecto:

Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al nivel inicial

(Película principal) y podremos ver nuestro gráfico "desde fuera".

Ahora ya tenemos completo nuestro gráfico animado. ¿Qué crees que sucederá si reproducimos la

película? Comprobémoslo pulsando Control + Intro, se visualizará la película.

¿Y bien? Nada. Nada en absoluto. El óvalo sigue tal cual. ¿Por qué? La respuesta está en las

características de los gráficos que habíamos explicado: la línea de tiempos del gráfico va ligada a la

de la película.

En este caso la línea de tiempos de la película tenía un solo frame, mientras que la del gráfico tenía

4, por tanto, no le hemos dado tiempo al gráfico a desarrollar su animación; sólo ha reproducido

un frame, el primero.

¿Cómo podemos solucionarlo?

Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana del reproductor de

Flash, selecciona el fotograma 5 de la película principal y pulsa F6. Ahora tenemos 5 fotogramas

en la película principal.

Pulsa de nuevo Control + Intro.

El resultado podría ser éste:


65

10.4. Introducir un Mapa de bits. Los gráficos de tipo Mapa de Bits pueden crearse con muchos programas. Si deseas que en tus películas hayan mapas de bits lo más seguro es que prefieras crearlos y hacerlos más espectaculares en otro programa más 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 gráficos GIF, JPG, TIFF y muchos más. También nos permite modificarlos en cierto modo. Podemos cambiarle el tamaño y convertirlo en un símbolo 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 símbolo más. Para importar un archivo de Mapa de Bits al escenario haz clic en el menú Archivo → Importar → Importar a escenario.

Se abrirá el cuadro de diálogo de Importar, allí deberás seleccionar el formato de imagen que quieres importar seleccionándolo en el desplegable Tipo. Luego navega por las carpetas hasta encontrarlo. Selecciónalo haciendo clic sobre él y pulsa el botón 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 gráficos vectoriales como también 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 continuación, seleccionamos el tipo de archivo correspondiente al gráfico 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 gráficos de este tipo. Concretamente, Illustrator pertenece también 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 básico hay tipos de archivo de mapa de bits que soportan animaciones, como los GIF. Pues bien, con Flash también podemos crear una animación y guardarla como un GIF animado. Los fotogramas de la película se convertirán en fotogramas del GIF. Para lograrlo, tenemos que publicar la película como GIF, lo cual configuramos desde la Configuración de publicación, en el menú Archivo. Entre los formatos disponibles, marcamos Imagen GIF.

Y configuramos algunos parámetros pulsando en su pestaña:

Entre las opciones concretas del GIF, hay dos que afectan a la animación: En Reproducción, podemos marcar Estática (por defecto) o Animación. Debemos de elegir esta última para que el gif sea animado. Si es gráfico es animado, podemos seleccionar cuántas veces se repite dicha animación. Entre Reproducir indefinidamente en bucle, o Repetir un número determinado de veces. Otra opción muy interesante es Transparente, en la que decidimos cómo se exporta el escenario. Si como un color opaco o transparente. Abajo vemos el GIF Animado que resulta de exportar nuestro gráfico Flash.


67

11. Clips de Película.

11.1. Clip de película. Un Clip de Película, simplemente Clip o MovieClip es una película 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 película, formando un símbolo. Por tanto, cualquier clip siempre podrá estar compuesto por otros clips insertados en él, que a su vez estén formados por otros, etc. Al igual que los otros tipos de símbolos de Flash, los clips de película tienen su propia línea de tiempo. Sin embargo, y a diferencia de los Gráficos (como veremos a continuación), esta línea temporal no está ligada a la línea de tiempo del documento que lo contiene, de tal forma que su ejecución es independiente, y en un fotograma de la película principal se puede estar reproduciendo repetidamente un clip. Este tipo de símbolos puede contener cualquier otro tipo de símbolo: gráfico, clip o botón, así como cualquier objeto creado con Flash, ya que un clip es realmente una película. Otra de las ventajas de los Clips la encontramos cuando realizamos películas de gran complejidad y tamaño, en la que intervienen un número muy elevado de fotogramas, debido a que en la vista general del documento, nosotros sólo veremos un fotograma por clip, el cual puede estar compuesto por muchos frames, lo que nos permitirá tener una mejor visión de cómo se desarrolla nuestra animación, y una línea de tiempo más clara y "limpia" Los Clips son una de las herramientas que dan mayor potencia a Flash CS5, permitiéndonos crear películas de gran complejidad y multiplicar los efectos visuales, ya que se pueden crear múltiples movimientos independientes entre sí y crear conexiones entre los diferentes Clips de un documento. Todas aquellas cosas que no podíamos hacer con un símbolo de tipo Gráfico, lo podemos hacer con un Clip, además de poder realizar también todo aquello que nos permitía dicho símbolo. Por esto, normalmente se utilizan los clips para cualquier tipo de animación debido a su gran flexibilidad, dejando los gráficos sólo para imágenes estáticas.

11.2. Comprobar las propiedades de un Clip. Como hicimos con los gráficos, vamos a ver como la línea de tiempo de un clip no está ligada a la línea de tiempo del documento que lo contiene y, a la vez, veremos la diferencia entre los clips y los símbolos Gráficos, que supone una de las razones de la mayor utilización de los primeros en lo que se refiere a la creación de animaciones. Para ello abriremos una nueva película Flash (Archivo → Nuevo, archivo ActionScript 3). Después importaremos una imagen cualquiera o bien


68

crearemos una. La convertimos en Símbolo (botón derecho, Convertir en símbolo...) y seleccionamos en Tipo "Clip de Película" Arrastramos al escenario (si no está ya allí) nuestro clip de película. Ahora tenemos nuestro Clip, insertado en nuestro nuevo documento Flash. Es decir, tenemos dos películas, cada una con su línea de tiempo. Ahora veamos que son independientes, siguiendo un proceso similar al que utilizamos con los símbolos de tipo Gráfico. Observa la línea de tiempo de la película principal y comprueba que sólo tiene un fotograma.

Editemos el Clip que insertamos en el documento, haciendo doble clic sobre él y examinemos su línea de tiempos. Aparecerá un único MovieClip. Podemos realizar algo similar a lo realizado con los gráficos. Si creásemos una animación de movimiento, como veremos más adelante, podría quedarnos así:

Como vemos, la duración del clip que hemos insertado es mucho mayor que la película nueva que lo contiene. Si el símbolo fuera un gráfico ya hemos visto que al reproducir la película no ocurriría nada, porque sólo se reproduciría el primer fotograma de su línea 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 reproduciéndose aunque la línea 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 símbolo 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 gráficos, 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 vacío. Por esto, es interesante aprender cómo crear un símbolo, en este caso un clip, de la nada para después modificarlo.


69

Para insertar un clip vacío haz clic en Insertar → Nuevo símbolo y se abrirá el cuadro de diálogo de Crear un nuevo símbolo. Allí deberás darle un Nombre para identificarlo más tarde en la Biblioteca y seleccionar la opción Clip de Película en el desplegable Tipo. A partir de este momento tendremos un nuevo clip (vacío) al cual podremos acceder desde nuestra Biblioteca (menú Ventana → Biblioteca), si hacemos clic derecho sobre él y seleccionamos Edición, podremos editarlo y trabajar con él. Cuando estudiemos las animaciones haremos ejemplos de animaciones mediante clips de película y veremos el potencial real de este tipo de símbolos.

11.4. Importar y exportar MovieClips de la Biblioteca. Como para todos los símbolos 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 película debemos abrir primero la biblioteca en la que está contenido. Hemos visto en el tema de Símbolos, tenemos dos tipos de bibliotecas: las que están asociadas a documentos u otras películas y las que nos proporciona Flash CS5. Pues bien, no sólo podemos utilizar símbolos 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 exportación mediante biblioteca se hace automáticamente 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 símbolos de biblioteca y pulsar Abrir.

Aparecerá la biblioteca con la lista de los símbolos correspondientes a los gráficos, botones y clips del documento en cuestión. Es importante destacar que cuando insertemos un clip de una biblioteca, se insertarán a su vez todos los símbolos que contenga, incluidos los clips. Existe otra forma mucho más cómoda: si tenemos dos documentos abiertos, podemos arrastrar los elementos directamente de un escenario a otro.


70

12. Botones.

12.1. Botón. Los símbolos de tipo Botón son los que aportan la mayor parte de la interactividad de las películas Flash con aquel que las está visualizando. Un botón, en Flash, es igual que un botón de cualquier entorno informático, sea web o cualquier otro. Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una serie de acciones. También es habitual ver cómo este tipo de elementos reaccionan cuando se les pasa el ratón por encima o cuando están pulsados. La interfaz de Flash está diseñada de manera especial para la creación de botones, lo que nos permite crear todos estos efectos de una manera muy sencilla. Al igual que los otros símbolos de Flash CS5, los botones tienen su propia línea de tiempo. Esta es independiente pero, sin embargo, está formada únicamente por cuatro fotogramas, uno para cada estado posible del botón:

Reposo. Aspecto por defecto del botón, es decir, cuando el puntero del ratón no está

situado sobre él.

Sobre. Aspecto del botón cuando situamos el puntero sobre él.

Presionado. Apariencia que deseamos tenga nuestro botón mientras lo mantengamos pulsado.

Zona activa. Aquí debemos indicar el área real en la que queremos que actúe nuestro

botón. Esto es importante sobre todo en botones compuestos sólo por texto como veremos más adelante.

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


71

Los botones pueden contener a su vez otros símbolos, como clips o gráficos (también de tipo Bitmap). La unión de las posibilidades de todos los símbolos pueden dotar a los botones de efectos asombrosos. Todo esto es lo referente a la apariencia del botón. Después, tenemos que programar lo que queremos que haga el botón, cómo queremos que afecte a la película. Y esto lo haremos con ActionScript. 12.2. Creación de un botón En la creación de un botón podemos considerar dos fases. En la primera vamos a convertir nuestro objeto a símbolo de tipo botón y posteriormente veremos cómo completarlo internamente, lo que nos ayudará a entender mejor dicha estructura. Comenzamos creando el objeto que representará el aspecto por defecto de nuestro botón con las herramientas que nos ofrece Flash CS5. Recuerda que puedes usar varias capas. Seleccionaremos el objeto y accederemos al menú Insertar → Convertir en Símbolo, le daremos el Tipo Botón y asignaremos un nombre a nuestro nuevo símbolo.

De esta forma ya tenemos transformado el objeto para que se comporte como un botón. Ahora lo completaremos internamente. Para determinar cómo debe reaccionar el botón en función de las acciones del ratón, lo editaremos haciendo clic con el botón derecho del ratón sobre nuestro nuevo botón y seleccionando la opción Editar. Cuando tengamos delante la línea de tiempo del botón (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 botón para cada posición del cursor y marcar el área de acción del botón (fotograma Hit) en la que simplemente podremos dejar la misma figura que la inicial (en este caso sólo 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 botón. Como resultado obtenemos el botón que continuación mostramos. Éste es un botón muy básico, pero como veremos se pueden complicar mucho. Para empezar nos servirá con éste. Observa cómo cambian los estados de reposo (rojo pálido), sobre (rojo) y pulsado (azul). Si una vez creado el botón queremos observar sus distintos estados y todavía no hemos terminado la película entera y por tanto no deseamos tener que reproducirla toda podemos hacerlo a través del menúControl → Habilitar botones simples. Así podremos interactuar con el botón hasta que desactivemos esta opción.

12.3. Formas en los botones. Los botones son símbolos que pueden tener multitud de formas. Si bien lo más habitual es ver botones rectangulares, cuadrados y circulares, cuya creación es inmediata como vimos en el punto anterior, también hay otros muchos tipos de botones que, pese a ser menos utilizados, es muy habitual verlos en multitud de páginas web. Entre estos están los creados mediante formas poligonales, aquellos que están formados por texto únicamente, dibujos con diferentes motivos, etc. Es interesante su uso para dar más vistosidad ya que algunos resultan más expresivos, y en esto Flash nos ayuda mucho, debido a la relativa sencillez de creación de botones que sus herramientas de dibujo nos ofrece. Hay varias formas de botón también muy extendidas, como el botón con relieve sencillo o los botones en forma de píldora. Puesto que existen muchas formas de conseguir estos efectos, a continuación tienes un ejercicio paso a paso que muestra una forma de conseguir el relieve en un botón rectangular.

12.4. Incluir un clip en un botón. La inclusión de clips de película en los botones puede dotar a éstos de más vistosidad. Es habitual colocar un clip en el fotograma Sobre para indicar algún tipo de información extra o una animación para ir más allá de un cambio de color. También es común ver un clip de película actuando como un botón. Esto caso se puede hacer por ejemplo poniendo el clip en el fotograma Reposo. Veamos por ejemplo el botón siguiente:


73

Comprueba todos los estados del ratón. Por lo que nos dice el botón podemos intuir que empieza algo, pero quizá no tengamos claro qué. Ayudaría a la navegación que al ponernos sobre el cursor, el texto cambie para darnos información 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 información. O podemos usar los clips para animar elementos del botón, como en el siguiente ejemplo:

Incluir un Clip en un botón es muy sencillo. Tomando este ejemplo, y partiendo de que tenemos los dos textos como clips en la biblioteca, sólo tendremos que: - Hacer doble clic sobre el botón para entrar en su modo de edición. - 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 opción más práctica:

En las propiedades de la instancia, pulsamos Intercambiar... y elegimos el nuevo objeto de texto.

Por último, centramos el nuevo texto en el botón, si es necesario. Ya está listo, ahora cuando pases el ratón sobre el botón el clip de película empezará a reproducirse. Por supuesto, en vez de cambiar el texto podemos añadir otros clips, que simulen movimientos, reflejos, etc.


74

12.5. Bitmaps y botones.

Además de clips, los botones también pueden contener símbolos de tipo Gráfico. Puesto que, como ya hemos visto, todo lo que se puede hacer con un gráfico se puede hacer con un clip, vamos a centrarnos en los Bitmaps que Flash nos permite importar, ya que están muy extendidos como forma de expresión gráfica 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 creación de botones, pero no es así. Básicamente podemos hacer dos cosas: 1) Incluir en cada uno de los fotogramas del botón un bitmap distinto, obteniendo un efecto como el que se consigue con lenguajes como javascript o CSS. 2) Aprovechar las propiedades de los Gráficos en Flash. Para esto, deberíamos importar primero el Bitmap y después convertirlo a símbolo botón. Posteriormente lo editaríamos y, después de insertar cada fotograma clave, convertiríamos su contenido a símbolo Gráfico. Una vez hecho esto, variando los efectos de las instancias en Flash (Alfa, Tinta, Brillo) podremos conseguir efectos bastante buenos. He aquí una pequeña muestra en la que sólo hemos utilizado un Bitmap de tipo GIF, sacado de la Red y lo hemos convertido en un botón gráfico aplicándole un efecto Alfa (Transparencia) al estado de reposo, lo que da la sensación de estar apagado (también podríamos haber aplicado brillo). En el fotograma Sobre hemos dejado el GIF original para que al pasar sobre el botón de la sensación 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 más comunes. Nota: Al crear un archivo, habrás visto que podemos elegir distintas versiones de ActionScript (3.0 o 2.0). Esto se refiere al lenguaje de programación que podemos empelar en Flash y que lo convierte en una herramienta realmente potente. En las versiones 1 y 2, se podían agregar comportamientos directamente en las propiedades de los botones. Pero nosotros venimos empleando las versión 3.0 a lo largo del curso, por ser la más actual y potente. Esta versión nos


75

obliga a escribir el código ActionScript. Veremos cosas básicas, y entraremos un poco más en ActionScript a partir del tema 16. Comenzamos por crear o añadir nuestro botón, y asignarle un nombre de instancia. El nombre que le demos es muy importante, porque nos permitirá acceder a él desde el código. Aunque podemos escribir el código en la misma capa, recomendamos crear una capa exclusivamente para el código, 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. También encontramos la ventana Fragmentos de código. Desde ella, podemos generar breves instrucciones de código para el símbolo seleccionado, lo que la mayoría de veces nos facilitará la tarea, ya que se trata de las opciones más repetidas.

Sin entrar en detalle de qué es cada palabra, pues esto ya lo veremos, este es el aspecto general del código asociado a un botón:

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 botón.


76

A esta instancia, le indicamos que queremos que reaccione al clic del ratón (MouseEvent.CLICK), ejecutando las acciones llamadas accionesMiBoton (podemos darle el nombre que queremos). accionesMiBoton contiene las acciones a realizar, y podemos verlo a continuación. Solo habría 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. También tenemos que dar un nombre único a accionesMiBoton para cada uno, a no ser que queramos que realicen la misma acción. Ahora veamos algunas de las acciones más comunes. 1) Abrir una página web. Con esto conseguiremos abrir una página cualquiera de internet (o una película Flash), lo que nos servirá para irnos desplazando por webs que contengan más de una página, o permitir al usuario descargarse archivos entre otras cosas. La forma más sencilla de hacerlo es seleccionar el botón que queramos usar (en el siguiente ejemplo, hemos llamado a la instancia btnVisitarAulaclic) y buscar la acción que queremos en el panelFragmentos de código. En la carpeta Acciones hacemos doble clic sobre Hacer clic para ir a página Web. Se generará un código como el siguiente:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

/* Hacer clic para ir a página Web Al hacer clic en la instancia del símbolo especificado, la dirección URL se carga en una nueva ventana del navegador. Instrucciones: 1. Reemplace http://www.adobe.com por la dirección 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 código generado son comentarios. Este código, normalmente en gris claro, no se ejecuta como tal, y solo sirve para indicar cosas al usuario. En este caso, nos da explicaciones de cómo usar el código generado. Lo único que hemos de hacer es reemplazar la url de ejemplo (www.adobe.com) por la de la página a la que queramos que nos envíe el botón.

http://www.adobe.com/

http://www.adobe.com/


77

La instrucción en ActionScript que nos permite hacerlo es: navigateToURL(new URLRequest("http://www.mipagina.es"), "_blank");. "http://www.mipagina.es" se refiere a la página que queremos abrir, y "_blank" indica que se abrirá en una página nueva. 2) Controlar una película en curso. Si estamos reproduciendo una película 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 botón btnPausar para parar la película y el botón btnContinuar para reproducir. Nos será más cómodo si usamos el panel Fragmentos de código para generar el evento Clic del botón (carpeta Controladores de eventos → evento MouseClick). En el código generado, reemplazamos el código 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, afectaría a la película principal. Si lo que queremos parar o reproducir es un clip determinado, habría que escribirlo delante de la acción, separado por un punto. Por ejemplo miClip.stop();. Reconocemos que aunque ActionScript 3.0 es más potente que la versión 2.0, puede resultar mas liosa para usuarios sin conocimientos previos. Si quieres ver cómo serían estos mismos ejemplos en ActionScript 2, te invitamos a echar un vistazo a esta página de nuestro curso de Flash CS3.

http://www.aulaclic.es/flashcs3/t_12_3.htm


78

12.7. Incluir sonido en un botón. Si nuestras páginas van a tener sonido, el sonido en los botones es una parte fundamental. Podemos hacer, por ejemplo que se activen sonidos al pulsar un botón. Para ello, simplemente debemos editar nuestro botón y seleccionar el fotograma Presionado, e insertar el sonido. Como vimos en el tema correspondiente. Es este caso, el tipo de sincronización más conveniente suele ser Evento. Por ejemplo podríamos importar uno desde nuestro disco duro o bien tomar alguno que ya tengamos en la biblioteca. El resultado podría ser algo así:

AUDIO SOLANO


79

13. Animaciones de movimiento.

13.1. La animación en Flash. Flash es un programa básicamente orientado a la animación, de ahí la gran importancia de este tema. No obstante, para ir creando animaciones cada vez más complicadas se necesita, sobre todo, mucha práctica, aparte de conocer bien las herramientas. En este tema y los sucesivos mostraremos las técnicas básicas de animación en Flash. La unión de estas técnicas será la que nos permita crear las más variadas y vistosas animaciones. En el tema de la animación, 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 programación como JavaScript, de una manera muy sencilla, sin necesidad de excesivos conocimientos y ocupando muy poco espacio en disco. Aunque Flash ofrece técnicas mejores, también se pueden crear animaciones a modo de GIF animado. Se les denomina animaciones Fotograma a Fotograma. Estas son las animaciones más básicas y conviene conocerlas.

13.1.1 Animaciones fotograma a fotograma.

La animación en Flash. Una animación no es más 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 límite 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 líneas de tiempo a 24 fps. Por esto, aunque Flash CS5 incorpore técnicas 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 "físicamente", esto es, si la animación ocupa 20 fotogramas en la línea 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 cuáles son los pasos intermedios de la animación. Si todos fueran claves, el tamaño del archivo aumentaría considerablemente.

Crear una animación fotograma a fotograma. Aunque Flash incorpora técnicas mucho mejores que estas, también permite "simular" la forma de animación de los GIF animados, ya que en ocasiones la animación es muy brusca o el cambio no es realizable "automáticamente" con Flash o simplemente nuestro objetivo es exportar el gráfico creado como este tipo de mapa de bits.


80

Para crear una animación 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 modificándolos uno a uno, progresivamente, ya que una diferencia muy grande de un fotograma al siguiente crearía un golpe brusco para el que la visualiza. Una vez completada la animación tendremos algo como lo que mostramos a continuación en nuestra línea de tiempos:

Veamos la diferencia de tamaños de las diferentes técnicas de animación para una misma película: Tenemos la siguiente animación. La apariencia se mantendrá prácticamente igual en todos estos casos, pero cabe la posibilidad de que al hacerlo fotograma a fotograma, se cometan pequeños errores de posicionamiento en la trayectoria que Flash no cometería:

Y tenemos estas tres formas de crearlo con sus respectivos tamaños: Interpolación de movimiento. Ésta es su línea de tiempo:

Tamaño: 961 Bytes (0,93 KB)

Fotograma a Fotograma exportado como película Flash (SWF): La línea de tiempos como vemos tiene todos los fotogramas como fotogramas clave:

Tamaño: 1 KBytes


81

Fotograma a Fotograma exportado GIF Animado La línea de tiempos igual que en el caso anterior:

Tamaño: 2 KBytes

Aunque las diferencias se observarían mejor en películas más complejas, en este ejemplo ya podemos ver como es menor el tamaño utilizando la técnica de Flash Interpolación de Movimiento, es sensiblemente mayor en la animación fotograma a fotograma y es el doble para el caso del GIF animado.

…La animación en Flash.

A continuación veremos distintos tipos de animaciones que el creador de películas Flash deberá tomar como guía inicial. Cabe destacar que podremos aplicar varias de estas animaciones colocándolas en distintas capas. Con esto es con lo que conseguiremos los efectos más espectaculares a la par que útiles. Desde el punto de vista del diseño general de una página web es muy importante tener claro un concepto: no se debe crear animaciones en páginas que no lo necesitan ni crear animaciones que distraigan al que visualice nuestros documentos de lo realmente importante, el mensaje. Ya en la versión anterior de Flash se hicieron cambios importantes en el tema de animaciones. Lo que hasta entonces se llamaba interpolación de movimiento, pasa a llamarse interpolación clásica y la interpolación de movimiento actual es totalmente nueva, más potente y versátil.

13.2. Interpolación de movimiento. Es la acción básica de las animaciones en Flash. Permite desplazar un símbolo Flash de un lugar a otro del escenario, siendo necesarios únicamente dos fotogramas, lo que optimiza mucho el rendimiento de la película. Es importante destacar que para que una Interpolación de movimiento se ejecute correctamente aquellos objetos que intervengan deberán haber sido previamente convertidos a símbolos. Los gráficos, clips de película, textos y botones son algunos de los símbolos que se pueden interpolar. También se debe tener cuidado al realizar una interpolación con dos símbolos que se encuentren en la misma capa, ya que el motor de animación los agrupará como uno sólo y el resultado no será el esperado. Por esto es conveniente asegurarse de dos cosas:


82

1) Separar en distintas capas los objetos fijos y los que estarán animados. 2) Poner también en distintas capas objetos que vayan a ser animados con direcciones o

formas distintas. Pasemos pues al tema en cuestión. Una interpolación de movimiento, como hemos dicho, es el desplazamiento de un símbolo de un punto a otro del escenario. El hecho de que sólo se necesiten dos fotogramas es debido a que Flash, únicamente con la posición inicial y final, calcula una trayectoria en línea recta y la representa (veremos que también se pueden realizar movimientos no rectilíneos). Crearla es tan simple como hacer clic derecho sobre el fotograma que contiene los elementos y elegir Crear interpolación de movimiento. Por defecto, se añadirán 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 símbolo. Veremos que aparece una línea punteada, por defecto recta, que representa el trazado de la animación. Cuando realicemos la interpolación correctamente observaremos un aspecto como este en la línea de tiempo, en el que los fotogramas aparecen de color azul.

Esto indica que la animación cambiará la posición del símbolo del fotograma 1 hasta la posición del mismo símbolo en el fotograma 24, utilizando precisamente 24 fotogramas. El número de fotogramas que se usen en la interpolación indicará las subetapas de que constará la animación. Cuantas más subetapas más sensación de "continuidad" (menos saltos bruscos) pero a la vez menos velocidad en el movimiento. Podemos seleccionar cualquier fotograma y ver dónde se sitúa el clip en cada punto. De hecho, si en alguno de estos fotogramas lo cambiamos, se creará un fotograma clave de propiedad, mostrándose como un diamante en la línea de tiempo. La velocidad en el movimiento de las películas la podemos cambiar también modificando su

parámetro en la línea de tiempo, pero esto no cambiará lo que hemos comentado anteriormente respecto al número 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 línea de tiempo. A mayor valor más velocidad, pero se deben poner siempre suficientes fotogramas para que se desarrolle la animación como queremos. El trazado recto generado por defecto podemos modificarlo directamente haciendo clic y arrastrándolo, una vez seleccionada previamente la herramienta Selección.

En cualquier fotograma de la interpolación podemos cambiar la posición del símbolo (o cualquier otra propiedad), creando ahí un fotograma clave de propiedad, que se representa por un pequeño rombo en la línea de tiempo. La interpolación de movimiento permite modificar muchos parámetros del movimiento mediante el Editor de movimiento, que veremos a continuación.

13.3. El editor de movimiento. Existe un panel que nos permite personalizar mucho más la animación, llamado Editor de movimiento. Para acceder a él basta tener seleccionada una interpolación de movimiento y hacer clic en la pestañaEditor de movimiento que aparece junto a la línea de tiempo. Como cualquier panel, también es accesible desde el menú Ventanas. Este panel nos permite controlar multitud de propiedades y efectos que afectan a una animación con total precisión, 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 básico, Transformación, 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 línea de tiempo. En la siguiente columna podemos establecer si el valor se aplica con aceleración o no.


84

En la columna Fotogramas, podemos recorrer o eliminar los distintos fotogramas clave. También los controles - y + que nos permiten añadir efectos. Y a la derecha del todo encontramos la gráfica. Podemos ver que cada propiedad tiene una gráfica específica, que indica los fotogramas en horizontal y los valores de la propiedad en vertical. Si hacemos clic sobre una propiedad, veremos que su gráfica se expande para editarla con facilidad. En la gráfica encontramos los fotogramas clave marcados como un cuadrado negro, o verde cuando está seleccionado. Estirando de ellos, o de la línea de la gráfica podemos alterar los valores. En la gráfica, vemos que los puntos suelen formar un vértice. Una opción muy interesante es poder transformarlos en puntos suavizados (desde el menú contextual del fotograma), creando una curva Bézier, lo que formará transiciones más suaves entre los picos de valor. Esto no es aplicable a las propiedades X,Y, Z. A lo largo de los siguientes temas veremos cómo utilizarlo de forma concreta, ahora vamos a ver en un videotutorial, cómo podemos utilizar el editor de movimiento para realizar la animación del bote de la pelota del tema 2, utilizando una interpolación de movimiento, en lugar de una interpolación clásica como se hizo en ese tema.

13.4. Interpolación clásica. En versiones más viejas de Flash sólo había una interpolación de movimiento disponible, y se llamaba precisamente así, interpolación de movimiento, en la versión Flash CS4 esa interpolación de movimiento pasó a llamarse interpolación clásica. Una interpolación clásica, igual que una interpolación de movimiento, es el desplazamiento de un símbolo de uno a otro punto del escenario, muchos de los conceptos vistos en las interpolaciones de movimiento son los mismos para las interpolaciones clásicas. Por ejemplo, las animaciones también han de ser sobre símbolos y deben estar en una capa. Los Fotogramas Por Segundo (fps) tienen el mismo significado. Para crear una interpolación clásica hay que hacer clic derecho sobre el fotograma que contiene los elementos y elegir Crear interpolación clásica. Cuando realicemos la interpolación correctamente observaremos un aspecto como este en la línea de tiempo, con los fotogramas sobre fondo de color morado.


85

Vemos que la animación va desde el fotograma 1 hasta el fotograma 30. Aparece una flecha que no aparece en la interpolación de movimiento y el icono que hay a la derecha del nombre de la capa es distinto. Por supuesto, al realizar una interpolación clásica el fotograma inicial y final deberán ser diferentes, en caso contrario no se creará ningún tipo de animación. Observa en las siguientes imágenes dónde está situada la pelota en el primer fotograma de la animación y su posición final en el último fotograma: Si el objeto con el que queremos hacer la interpolación clásica no está convertido a símbolo nos encontraremos con algo así...

... y la animación no funcionará. También podemos realizar la interpolación de otra forma, sin convertir previamente el objeto a símbolo, ya que Flash lo convierte a símbolo automáticamente si no lo hacemos, dándole el nombre "Animar" más un número. Esto quizá no sea lo más conveniente en películas grandes, debido a lo que ya comentamos de la gran cantidad de símbolos que pueden aparecer y la confusión que crean muchos símbolos con nombres parecidos.


86

Para crear una interpolación de este tipo, basta con tener un fotograma clave. Hacemos clic con el botón derecho sobre el fotograma en la línea de tiempo, y seleccionamos Crear Interpolación Clásica. Ahora, creamos un nuevo fotograma clave donde queremos que finalice la interpolación, y modificamos los símbolos en los fotogramas clave. Veremos que si seleccionamos uno intermedio, se muestran los símbolos en su transición al fotograma final. Podemos decidir cómo mostrar el símbolo en ese fotograma, por ejemplo moviéndolo. Al hacerlo automáticamente 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 más. Pero recuerda, que para la mayoría de casos, nos resultará más versátil la interpolación de movimiento.

13.5. Diferencias entre interpolación de movimiento e interpolación

clásica. En general las interpolaciones de movimiento son más fáciles de utilizar y más potentes, no obstante las interpolaciones clásicas tienen características que pueden hacerlas más 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 animación clásica no existe el trazado, a menos que lo creemos expresamente.

Sólo se permiten realizar interpolaciones con símbolos, si aplicamos una interpolación de movimiento a un objeto que no es un símbolo, Flash lo convertirá en un clip de película, mientras que si se trata de una interpolación clásica lo convertirá en un símbolo gráfico.

En las interpolaciones clásicas cuando cambia una propiedad se crea un fotograma clave y cambia la instancia del objeto, mientras que en las interpolaciones de movimiento sólo 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 símbolo, como ocurre en las clásicas.

En un grupo de interpolación de movimiento no está permitido usar scripts de fotograma, mientras que sí es posible en las clásicas.


87

Los grupos de interpolaciones de movimiento se pueden cambiar de tamaño en la línea de tiempo. Se tratan como un objeto único. Las interpolaciones clásicas están formadas por grupos de fotogramas que se pueden seleccionar de forma independiente.

Las interpolaciones de movimiento sólo pueden aplicar un efecto de color por interpolación, mientras que las clásicas pueden aplicar más de uno.

Los objetos 3D sólo pueden animarse en interpolaciones de movimiento, no en clásicas.

Sólo las interpolaciones de movimiento se pueden guardar como configuraciones predefinidas de movimiento.

13.6. Cambio de forma en una interpolación. Acabamos de ver las interpolaciones de movimiento y las interpolaciones clásicas como un mecanismo para desplazar un símbolo Flash de un lado a otro del escenario. Sin embargo, podemos aprovechar una interpolación para realizar animaciones en las que nuestro objeto aumente o disminuya de manera progresiva su tamaño. Esto es muy sencillo con Flash, basta con modificar la instancia del símbolo en el último fotograma de la interpolación de movimiento o de la interpolación clásica, pero esta vez cambiándole el tamaño. Podemos utilizar la herramienta Transformación libre para cambiar el tamaño. Por supuesto, podemos aplicar ambos efectos a la vez, de manera que el cambio de tamaño se producirá mientras el objeto se desplaza. También podemos hacer el cambio de tamaño 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 tamaño en la sección de Transformación, separados en Escala X (ancho) y Escala Y (alto).

El ejemplo siguiente incorpora estas tres características de la interpolación:


88

Y la línea de tiempo que nos queda es algo tan sencillo como esto:

13.7. Animación de textos. Es indudable que para comunicar algún mensaje, en la mayoría de las ocasiones, no basta con imágenes o iconos, y es aquí donde el texto cobra gran importancia. No obstante, se debe tener cuidado con la animación de los textos, ya que resulta bastante complicado leer un texto que se desplaza o cambia de tamaño. Por este motivo, un texto animado debería estar sólo en las presentaciones o bien formar parte de una animación corta y, lo que es más importante no debería estar reproduciéndose infinitamente. En las presentaciones, se utilizan multitud de efectos que veremos más adelante. Sin embargo, con lo visto hasta ahora se pueden obtener efectos interesantes. Una de las opciones más utilizadas es separar las letras de los textos y animarlas independientemente.

13.8. Animación de líneas. Una buena animación no tiene que porqué estar compuesta sólo por textos o imágenes espectaculares. En ocasiones conviene darle a la película un aire más sencillo o añadir determinados efectos que la hagan vistosa sin necesidad de cargar mucho la película visualmente, y en cuanto a tamaño de archivo se refiere. Esto lo podemos conseguir simplemente animando líneas y haciendo que se muevan por el escenario. Esta técnica nos permite dar dinamismo a la animación o crear formas distintas a lo largo de su recorrido. Son especialmente útiles y vistosas en fondos oscuros y se suelen usar para formar rectángulos que se aprovechan para insertar imágenes. Aquí podemos ver un ejemplo de este tipo de presentaciones:


89

Para crear esta animación deberás crear tantas capas como animaciones de líneas vayas a crear, en el ejemplo hemos creado 4 capas. Una para el movimiento de líneas 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. También crearemos una capa que situaremos en la posición superior donde colocaremos las imágenes que formarán el mensaje de bienvenida. El funcionamiento de la animación es claro, deberemos crear interpolaciones de movimiento para cada una de las capas de líneas que en su posición final emplazaremos en su lado contrario de la pantalla, por ejemplo, las líneas situadas en un principio en la parte inferior al final de la animación se encontrarán en la parte superior. Realizaremos esto con las 4 capas de líneas. En la capa Imágenes crearemos animaciones que harán aparecer las imágenes 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 imágenes para colocarlas en su lugar en el fotograma. Estas imágenes se mostrarán únicamente durante el tiempo que dure el fotograma para desaparecer más tarde dando paso a la otra imagen. Consejo: Si quieres añadir un fondo deberás hacerlo en una nueva capa y colocar ésta debajo de todas las existentes.

13.9. Guía de movimiento clásica. Anteriormente hemos visto como las interpolaciones de movimiento incluyen por defecto el trazado con la trayectoria del objeto, y que este trazado puede modificarse fácilmente, sin embargo las interpolaciones clásicas no lo incluyen. Si deseamos que el objeto siga una trayectoria no rectilínea en una interpolación clásica hemos de crear una capa guía de movimiento. Una guía es una capa especial que marca una trayectoria para los símbolos de la capa a la que afecta, para que dichos símbolos la sigan, durante el movimiento. Esta capa es invisible durante la reproducción y permite dibujar cualquier tipo de dibujo vectorial, que nos permitirá crear un movimiento no forzosamente rectilíneo. Crear un movimiento mediante esta técnica es bastante sencillo. Partimos de una capa con una interpolación clásica: Sobre la capa en la línea de tiempo, hacemos clic derecho y seleccionamos Añadir guía de movimiento clásica.


90

Creamos el trazado de la guía en la nueva capa, por ejemplo dibujando con el Lápiz. Y para acabar, hacemos coincidir el fotograma final de la interpolación con el final del trazado de la guía. Es importante que el símbolo esté en contacto con la guía. No es necesario colocarlos al principio del trazado ya que Flash lo hace automáticamente. Vemos como la capa a la que se asocia la guía aparece debajo y sangrado a la derecha.

Podemos ver un efecto más vistoso que el que realizamos con la interpolación sencilla del principio del tema.

Una opción que puede resultar muy interesante es Orientar según el trazado, la cual encontramos en el panel de Propiedades. Esta opción hará que el símbolo vaya girando para seguir la línea del trazado, lo que en la animación anterior habría puesto el avión boca abajo al hacer el "loop". A) Tanto si el trazado es de una interpolación de movimiento, como si es de una interpolación clásica, podemos modificarlo de varias formas:

Seleccionando la herramienta Selección y haciendo clic sobre el trazado y arrastrándolo.

Seleccionando la herramienta Subselección y haciendo clic en el trazado, aparecerán los controladores de curva, moviéndolos modificaremos el trazado.

Seleccionando la herramienta Transformación libre y haciendo clic en el trazado, aparecerán los controladores de transformación libre, moviéndolos modificaremos el trazado.

Si se trata de un trazado de una interpolación de movimiento, adicionalmente disponemos de otros métodos para modificar el trazado:

Moviendo la posición del objeto en el escenario, esto hace que se cree automáticamente un fotograma clave de propiedad y se modifique el trazado. Esta es, quizás, la forma más fácil 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 interpolación clásica, debemos tener cierto cuidado con no producir discontinuidades en el trazado, ya que esto haría que la animación se detuviera en ese punto. En general es más fácil y flexible utilizar los trazados con las interpolaciones de movimiento que con las interpolaciones clásicas. B) Muchos movimientos complicados pueden ser duplicados fácilmente sobre otros objetos

utilizando ActionScript 3.


92

14. Animación por Forma.

14.1. Interpolación por forma. Cuando lo que queramos no sea cambiar la posición de un objeto en el escenario, sino su forma de manera progresiva (o ambas cosas a la vez), Flash CS5 nos ofrece la técnica de la Interpolación 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 interpolación por forma, es muy semejante a crear una interpolación de movimiento. Flash genera fotogramas intermedios en los que va variando ligeramente la forma del fotograma anterior. Así como hacíamos en el tema anterior, sólo 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 Interpolación por Forma funcione como es debido aquellos objetos que intervengan deberán ser objetos vectoriales (no símbolos Flash). Debemos tener también dos aspectos en cuenta: 1) Separar en distintas capas los objetos fijos y los que estarán 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 interpolación. Si realizamos la interpolación por forma correctamente la línea de tiempo tendrá este aspecto:

Las consideraciones sobre la velocidad y el número de fotogramas que vimos en las interpolaciones de movimiento se pueden aplicar también a la interpolación por forma y a cualquier animación hecha con Flash. Si hay algún fallo en los parámetros necesarios para que la interpolación se ejecute bien, como por ejemplo, que uno de los objetos en capa sea un símbolo, se mostrará algo así en la línea de tiempo:


93

Para crear la interpolación, una vez tengamos los fotogramas de inicio y fin de la animación hacemos clic derecho en alguno de los fotogramas intermedios, y seleccionamos la opción del menú Crear interpolación de forma. Recuerda que podemos alterar el fotograma final todo lo que queramos. A continuación podemos ver el ejemplo de interpolación de forma sencilla.

Inicio… … Fin También podemos realizar interpolaciones de forma en varias fases de manera análoga a como lo hacíamos 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 triángulo antes de pasar a ser cuadrado. Lo hemos conseguido simplemente haciendo clic con el botón derecho sobre el fotograma 10 y creando un fotograma clave (Insertar Fotograma Clave). Luego sólo tenemos que borrar el objeto que aparece en el escenario y dibujar el triángulo.

14.2. Transformar textos.

Debido a la importancia de los textos, es importante comentar las aplicaciones que tienen los

cambios de forma sobre ellos. Añadimos así una posibilidad más para realizar logotipos o

presentaciones vistosas y transmitir información de manera espectacular.


94

Recordemos que para realizar una interpolación 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 función 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 hubiéramos

repasado con la herramienta lápiz el contorno de cada letra.

¿Posibilidades de esta técnica en textos? Muchísimas, 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 transición. También es conveniente dar un tiempo para que cada letra

sea mostrada y pueda ser visualizada y "entendida" por aquel que vea la película, porque si no lo

hacemos corremos el riesgo de que la animación parezca sólo un garabato revolviéndose.

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

transición también en el color. Observemos a su vez como cuando se forma cada letra,

mantenemos su imagen el tiempo suficiente como habíamos indicado que era necesario.

Inicio

Fin

En este otro ejemplo se observa la transición de colores más claramente y, además, 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 animación creada con una forma en el fotograma inicial y un texto en el final veremos

que la interpolación 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 interpolación 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. Deberás ejecutar de nuevo el

comando para que estas letras se separen y creen una forma.

14.3. Consejos de forma. Como ocurría en el tema anterior, a veces no nos viene bien el tipo de acción que hace Flash por defecto. En las interpolaciones de movimiento lo solucionábamos mediante la guía de movimiento. En el caso de la interpolación por forma, es posible que Flash realice la transformación de los objetos de una forma que no es la que esperábamos y que no nos conviene para llevar a cabo nuestro propósito. 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 generarán. Para añadir un consejo de forma a una interpolación nos situaremos en el fotograma inicial y pulsaremos Control + Shift + H (o bien ir al menú Modificar → Forma → Añadir Consejo de Forma).


96

Aparecerá un círculo 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 están colocados sobre una curva (vector) que forma un contorno son amarillos para el objeto inicial y verdes para el final. Dicho círculo debemos colocarlo en un punto del contorno de la figura inicial. Automáticamente 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 más de uno serán marcados con las letras "b", "c", "d" ... hasta la z, que es el límite (26 como máximo). Ahora realicemos el seguimiento de otro ejemplo, tenemos la siguiente animación (sin consejos de forma):

Inicio… … Fin Vamos a insertar un consejo de forma en el punto indicado en los gráficos situados un poco más abajo: Fijémonos 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: Punto Inicial Punto Final Seguimiento

Inicio… … Fin

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 transformación que nosotros queríamos.


97

15. Efectos sobre animaciones.

15.1. Introducción. Si no te parecen suficientes las interpolaciones de forma y de movimiento, y quieres realizar animaciones más complejas, puedes combinar las interpolaciones de movimiento con los efectos y transformaciones que se pueden realizar sobre los símbolos que las componen y aplicar efectos sobre las mismas interpolaciones. Una vez comprendidas todas las técnicas de este tema, estaremos en disposición de realizar todo tipo de animaciones en Flash. Sólo tendremos que poner un poco de imaginación 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 también podemos usar el Editor de movimiento para controlar gran parte de los efectos.

15.2. Efectos sobre la interpolación. Para describir todos los efectos que podemos aplicar sobre una interpolación de movimiento previamente creada, sin necesidad de tocar ningún símbolo, nos centraremos en el panel Propiedades. Si seleccionamos un fotograma y un objeto perteneciente a una interpolación, y abrimos el panel Propiedades, desde el botón 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 variarán según el tipo de interpolación, según puedes ver en las siguientes imágenes correspondientes a las propiedades de la interpolación de movimiento, interpolación guiada e interpolación 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) Tamaño. La propiedad tamaño 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, también podemos hacer clic sobre el valor y teclear el nuevo valor.

Desde el Editor de movimiento también podemos modificar el tamaño 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 Transformación libre también podemos variar las dimensiones del objeto. B) Escala. En las interpolaciones guiadas, esta casilla, al activarla, permite un incremento/decremento progresivo del tamaño del objeto inicial cuando sus dimensiones son distintas a las del objeto que está en la posición final de la animación. Si la casilla está desactivada podríamos encontrarnos con una animación como la siguiente.

En las interpolaciones de movimiento, esta opción está activada por defecto. Como vemos Flash hace el desplazamiento de posición, pero el cambio de tamaño se produce bruscamente en el último fotograma.


99

C) Aceleración. Esta barra deslizante nos permite determinar la aceleración del primer tramo de la animación. Podemos elegir valores entre -100 y 100. Si el valor de aceleración es negativo el símbolo se moverá despacio primero e irá acelerando de manera progresiva. Si dicho valor es positivo provocará un efecto opuesto. Podemos por ejemplo dar la impresión de que un objeto, por ejemplo un coche, arranca, va cogiendo velocidad poco a poco (valor -100) y después va frenando y disminuyendo su velocidad hasta pararse. D) Rotación. Esta opción es muy interesante ya que nos da la posibilidad de aplicar una rotación al objeto mientras se produce el movimiento. Podemos especificar el número de veces o vueltas que se produzca la rotación durante los fotogramas que dure la interpolación, o también podemos indicar los grados que queremos que rote el objeto.

Si se trata de una interpolación de movimiento, nos presenta un submenú Dirección, con tres opciones:

Ninguno. Con esto le indicamos a Flash que no aplique rotación alguna sobre el símbolo en movimiento. Es la opción por defecto en las interpolaciones de movimiento.

Derecha (En interpolación clásica CW). Permite realizar el número de rotaciones completas o el valor de grados en la dirección de las agujas del reloj.

Izquierda (CCW). Permite realizar el número de rotaciones completas o el valor de grados en la dirección contraria a la de las agujas del reloj.

Si se trata de una interpolación clásica, nos presenta un submenú Dirección, con una opción más:

Auto. Marcando esta opción hacemos que se produzca la rotación en aquella dirección 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 posición (en cuanto a rotación se refiere), el hecho de activar esta opción no tendrá ningún efecto.


100

Esta opción es la que está marcada por defecto en las interpolaciones clásicas y por eso no hemos visto hasta ahora un objeto rotar en nuestras interpolaciones clásicas. Para que hubiera tenido efecto deberíamos haber rotado la última imagen de la interpolación. Este es el resultado que hemos obtenido, como podemos comprobar, ha recorrido el camino más corto, ya que el 6 ha pasado progresivamente de su posición anterior a la que ocupaba el 1 de la otra forma el 6 habría pasado por las posiciones anteriores del 5, 4, 3, 2 y 1, siendo la longitud del movimiento mucho mayor.

Desde el Editor de movimiento, también podemos especificar los grados de una rotación.

E) Orientar según trazado. Si activamos esta casilla, tanto si la interpolación sobre la que actuamos es una interpolación guiada, como si es de movimiento, Flash hará que el símbolo tome la dirección de la guía, rotando para orientarse en la misma posición que adopta la línea. Para entender mejor este concepto, recordemos una animación anterior, en la que el avión hacía una especie de "looping". Resultaba un poco extraño ver la animación porque los aviones no van marcha atrás y, en esta ocasión y en muchas otras, no es conveniente que los objetos se muevan solo en el escenario quedando el mismo símbolo inmóvil, como si levitara. Con este comando solucionaremos esto, y el resultado sería este.

…Fin Inicio…


101

E) Sincronizar (Sinc). Con esto evitamos que no se reproduzca el último bucle de un símbolo gráfico incluido en nuestra película con una animación en su línea de tiempo interna, cuando el número de fotogramas que ocupa en la línea principal no es múltiplo de los fotogramas que contiene la instancia. F) Ajustar. Si activamos esta opción, el centro de la instancia (identificado con una cruz) se ajustará forzosamente a la guía que hemos marcado en la correspondiente capa. De hecho si intentamos mover la instancia en un fotograma de la animación, Flash la volverá a colocar sobre la guía de manera automática.

15.3. Efectos sobre el símbolo interpolado. Ya vimos en temas pasados cómo aplicar efectos sobre instancias de símbolos y vimos que se podía lograr efectos vistosos. No obstante, cuando los efectos muestran su verdadera potencia es cuando el símbolo forma parte de una animación. 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 símbolo cualquiera de nuestra película. Podemos aplicar los efectos sobre cualquier símbolo de cualquier fotograma de la animación, tanto sobre el fotograma inicial o el final como en los intermedios. En este último caso, si se trata de una interpolación clásica, deberemos convertir a fotograma clave aquel que contenga la instancia y después aplicar el efecto. El efecto se irá aplicando de forma gradual. De hecho, es frecuente utilizar interpolaciones clásicas únicamente para aplicar efectos. Para entender bien lo que sigue, es necesario controlar la aplicación de efectos sobre instancias. Esto lo vimos en el Tema 9 y por eso omitiremos detalles sobre cómo aplicar efectos concretos sobre símbolos.

15.4. Efecto brillo. El efecto de brillo, como su propio nombre indica, nos viene muy bien para simular el hecho de que algún 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 semáforo 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 interpolación 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 más alto o más bajo según fuera el símbolo 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 ratón 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 rápido a la animación, como una explosión de color que sorprenda al receptor de la película. Otro interesante uso de este efecto es simular la proyección de una luz de color sobre un objeto que se va acercando al foco. Veamos un ejemplo de esto.

Vemos como al acercarse el avión a la luz roja del Sol, éste lo ilumina con una luz roja. Hemos aplicado a la instancia del avión del último fotograma de su interpolación 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 interpolación de forma en cuatro fases.


103

15.6. Efecto transparencia (Alfa).

Este es probablemente el efecto más 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 más común, hacer aparecer objetos de la nada y también hacer que se desvanezcan poco a poco. Este ejemplo podría representar la entrada a cualquier web o portal de Internet, de hecho es bastante típico.

3 2 1


104

16. Generar y publicar películas swf.

16.1. Consideraciones sobre el tamaño de las películas. Antes de aventurarnos a publicar nuestra película para que otros la vean, sobre todo si la vamos a publicar en una página web, donde el tamaño de descarga es de vital importancia, debemos tener en cuenta los siguientes aspectos: A) CONSIDERACIONES EN EL DIBUJO. Aunque los degradados queden muy vistosos, también requieren más memoria, por lo que debemos evitar su uso excesivo, en la medida de lo posible. La herramienta Pincel gasta más memoria que el resto de herramientas de dibujo, por lo que deberíamos elegir estas últimas en la medida de lo posible. Hemos visto que la animación de líneas es bastante útil. Sin embargo el uso de líneas que no sean las definidas por defecto y que usamos en el capítulo que hemos comentado, hará que el tamaño de la descarga aumente. Por tanto evitemos las líneas discontinuas, de puntos... Dibujar las curvas con el menor número de nodos posible. C) CONSIDERACIONES EN LA ORGANIZACIÓN. Agrupar los objetos que estén relacionados, con el comando Modificar → Agrupar. Si hemos creado un objeto que va a aparecer varias veces, deberíamos convertirlo a símbolo, ya que como hemos visto, Flash lo colocará en la biblioteca y cada vez que quiera mostrarlo, hará referencia a una única posición de memoria. Ya hemos comentado el mayor tamaño de los mapas de bits, lo que hace que debamos minimizar el número de apariciones de éstos en nuestra película. D) CONSIDERACIONES EN LOS TEXTOS. Hemos podido observar, cuando manejábamos textos, que cuando abrimos el menú de tipos de letras, las tres primeras son siempre "_sans", "_serif" y "_typewriter". Esto no es una casualidad. Están colocadas ahí para resaltar que estas fuentes ocupan un mínimo de memoria, por lo que se recomienda su uso. E) CONSIDERACIONES EN LA ANIMACIÓN. Utilizar lo más que podamos las interpolaciones de movimiento y las guías para reducir el número de fotogramas clave y el tamaño de la película. Evitar el uso de la interpolación por forma para animaciones de cambio de color, cuando sea posible. Independientemente de la optimización que hagamos, a veces no se puede evitar que el tamaño de la película aumente. Es recomendable entonces hacer un preloader (precarga) cuando la película que queramos publicar sea de tamaño superior a unos 80KB.


105

16.2. Preloader. Cargar la Película entera antes de reproducirla. Un preloader se usa principalmente para evitar la carga parcial de la película, mientras ésta se está reproduciendo, lo que, en ocasiones en las que la película es de un tamaño considerable, hace que la película se vea entrecortada. Normalmente, los preloaders se hacen vistosos para que el observador no se aburra y deje de lado la opción de visitar nuestra web. Suelen llevar alguna animación sencilla que se va reproduciendo mientras se está cargando simultáneamente la película principal, mucho más grande. Se pueden complicar mucho más, pero nosotros haremos uno sencillo que nos sirva para entender bien el concepto, y la manera de hacerlo. Partimos de que ya tenemos nuestra película terminada. Si queremos saber su tamaño podemos ir a Archivo → Configuración de publicación seleccionar la pestaña Flash, y marcar la casilla Generar Informe de Tamaño. Si pulsamos el botón Publicar, aparecerá en nuestro directorio un archivo de texto donde se explica con detalle el tamaño de nuestra película. 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 película se llama "Película" (lógicamente). Deberá quedar algo similar a lo que muestra la imagen. En la escena recién creada insertaremos otra capa, de manera que nos queden dos capas a las que llamaremos, "Acción" y "Cargando". En la capa "Cargando" crearemos una animación sencilla. Por ejemplo, hagámosle honor al título y escribamos "Cargando ..."; puedes aplicarle la animación que prefieras, siempre que no sea muy compleja. En nuestro ejemplo, esta capa tiene por lo menos dos fotogramas. En la capa "Acción" diseñaremos el "corazón" del preloader. Vamos a hacer que la animación de nuestra escena de carga se ejecute repetidas veces, hasta que se haya cargado la escena que contiene la película principal, mediante las acciones ActionScript 3 de Flash. Para ello abrimos el panel de Acciones. Vamos a emplear la función 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 cuántos fotogramas se han cargado hasta ahora con la propiedad this.framesLoaded, y cuantos fotogramas hay en total con this.totalFrames.


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 haríamos así:

1 2 3 4 5

if(this.framesLoaded==this.totalFrames) { gotoAndPlay(1, "Película") } else { gotoAndPlay(1, "Cargador") }

Si no entiendes exactamente el código no te preocupes, lo veremos más adelante. Lo importante ahora es el concepto. Por lo tanto, lo que hará esta instrucción 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 instrucción. Cuando la carga esté completa, iniciamos la Película. Y esto es todo lo que hay que hacer para crear un preloader (aunque por supuesto se puede hacer más sofisticado), con lo que los visitantes ya no huirán de nuestra web. En los primeros temas de ActionScript veremos cómo mostrar en el preloader el estado de la carga.

16.3. Distribución como archivo swf en un reproductor autónomo.

Para poder distribuir películas 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 creación de un archivo SWF. Estas opciones se pueden ver en el panel de Configuración de Publicación, al que podemos acceder mediante el menúArchivo → Configuración de Publicación (Pestaña Flash). Veamos cuáles son estas opciones:

Reproductor: Si queremos publicar nuestra película para que sea vista con versiones anteriores de Flash, debemos seleccionar aquí la versión deseada.

Versión de ActionScript: El uso de ActionScript 3 nos permitirá usar las novedades relativas a objetos, clases etc... Si hemos introducido código ActionScript debemos de respetar la versión 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 compresión concreta, aquí podremos determinar su grado de compresión, que determinará a su vez el espacio ocupado en memoria por este tipo de imágenes. A mayor compresión, menos espacio en memoria ocupará la imagen, pero también su calidad será menor.

Establecer Flujo de Audio o Evento de Audio: Esta opción nos permite acceder al Panel "Configuración de Sonido" desde donde podemos configurar, para cada tipo de sonidos, sus características.

Suplantar configuración de sonido: Con esto se suplantarán los niveles de compresión seleccionados para cada archivo de sonido de nuestro documento.

Comprimir película: Comprime la película al máximo posible.

Generar Informe de tamaño: Esta opción la hemos usado en el apartado anterior. Si la activamos, se creará un archivo de texto con una relación detallada del tamaño del documento.

Proteger Frente a Importación: Activando está casilla hará que cuando otro usuario (o nosotros mismos) queramos importarla no podamos o tengamos que introducir una contraseña si se ha escogido alguna.

Omitir acciones de trace: Las acciones de traza se emplean para comprobar el correcto funcionamiento de la película durante la creación de esta (durante las pruebas). También se consideran trazas los comentarios que insertemos en el código ActionScript. Si activamos esta señal, la película creada no los incluirá, ocupará menos tamaño y ahorraremos tiempo innecesario. Es recomendable cuando se publique la película de un modo definitivo.

Permitir depuración: Permite que se pueda depurar el archivo SWF. También exige la introducción de una contraseña ya que se debe tener permiso del creador para Importar el archivo y depurarlo.


108

16.4. Distribución para páginas web. Esta es una parte importante, ya que normalmente las películas de Flash están orientadas a la publicación vía Web. Para publicar una película Flash en Internet de manera que forme parte de una página web deberemos insertarla en un archivo típico de páginas web cuyo lenguaje de programación sea del estilo del HTML. Para ello debemos atender a las opciones de publicación HTML que nos ofrece Flash, y que nos ayudarán a que nuestra película se visualice como realmente queremos. Las opciones de este tipo de publicación están en Archivo → Configuración de Publicación... (Pestaña HTML). A) Plantilla. Para incrustar una película Flash en un documento HTML, hay que escribir una serie de códigos de programa algo complejos y laboriosos de hacer a mano. Para facilitarnos esta tarea Flash hace esto automáticamente pero, puesto que cada web es distinta y nuestras necesidades van a ser muy distintas, los códigos también serán muchos y distintos, por esto Flash incluye Plantillas, que crean este código automáticamente según el tipo de publicación que deseemos: En el botón Información que está a la derecha de la pestaña "Plantilla" se nos muestra información muy útil sobre cada tipo de plantilla. Estas son las plantillas más comunes:

Sólo Flash: Esta es la opción predeterminada y utiliza el reproductor Flash.

Flash con FSCommand: Imprescindible cuando se usen FSCommands. Permiten controlar el reproductor desde la película.

Mapa de Imágenes: Si hemos incluido una Image Map (imágenes completas que ejecutan distintas acciones según la coordenada que se pulse) debemos activar esta opción.

QuickTime: Permite incluir una película QuickTime. etc ... B) Detectar Versión de Flash. Desde aquí podemos seleccionar si queremos que nuestra película detecte la existencia o no existencia del plugin de Flash en el ordenador del usuario, así como las páginas web donde se insertará el código encargado de comprobarlo y las páginas 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 más grande que estas dimensiones provocará un cambio en éstas.

D) Reproducción. Permite realizar determinados cambios en cuanto a la reproducción de la película:

Pausa al Comienzo: Permite que sea el usuario quien haga que se inicie la reproducción, que inicialmente aparecerá detenida.

Reproducción Indefinida: Cuando la película termine, volverá a empezar desde el principio. Esto lo hará infinitamente.

Visualizar Menú: Permite que al hacer el usuario clic con el botón derecho del ratón sobre la película, el menú emergente tenga todas las opciones por defecto. Si la desactivamos sólo aparecerá la opción "Acerca de Flash".

Fuentes de Dispositivo: Sustituye las fuentes utilizadas en los textos sin animación de la película por las fuentes predeterminadas en la máquina de quien la visualice.

E) Calidad. Aquí podemos modificar la calidad de visualización de la película, que depende del suavizado de la imagen y el tiempo de reproducción. Las opciones son:

Baja No hay suavizado. El tiempo de reproducción es el de máxima velocidad.

Baja Automática: El reproductor detecta si la máquina soporta en cada instante un ligero suavizado, si lo soporta, lo aplica. El tiempo sigue siendo muy rápido.

Alta Automática: Pone al mismo nivel el tiempo y el suavizado, pero si hay alguna limitación, 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 sólo si no hay animación. Da preferencia a la buena visualización.

Ó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 reproducción dentro de las ventanas de Windows:

Ventana: Se reproduce la película en la ventana de la web en la que está insertada.

Opaco sin Ventanas: Hace que los objetos situados en capas situadas detrás de la película no se vean (en páginas DHTML).

Transparente sin Ventanas: Es el opuesto al anterior. Permite que los objetos situados detrás se vean.


110

G) Alineación HTML. Posición relativa de la película dentro de la página web HTML. Tenemos varias opciones:

Predeterminada: Centra la película en la página. Si no cabe se cortan los extremos.

Izquierda: Alineación a la izquierda. También se recortan los bordes si no cabe.

Derecha: Alineación a la derecha.

Superior: Alineación en el borde superior de la página.

Inferior: Alineación en el borde inferior de la página. H) Escala. Si hemos especificado el tamaño en píxeles o en tanto por ciento, podemos decirle a Flash cómo distribuir la película en el rectángulo que hemos decidido que la contenga: Predeterminada: Se ve toda la película guardando las proporciones originales.

Sin Borde: Recorta (en caso de que la película sea más grande que el rectángulo) todo lo que sobre con el fin de mantener las proporciones.

Ajuste Exacto: Distorsiona las proporciones si es necesario para conseguir que la película ocupe el rectángulo completo.

I) Alineación Flash. Se hace necesario alinear la película cuando esta no tiene las mismas dimensiones que el rectángulo definido. Las opciones son:

Alineación Horizontal: Podemos escoger entre Centro, Izquierda o Derecha.

Alineación Vertical: Podemos escoger entre Centro, Superior o Inferior. J) Mostrar Mensajes de advertencia. Permite que se muestren los posibles mensajes de error de código ActionScript. Además, Flash creará el código JavasScript que detecte la versión de Flash y otras acciones. De todas formas, lo más habitual es utilizar un editor web, como Dreamweaver para crear la página web, y desde ahí insertar el archivo SWF, por lo que será el propio editor el que se encargue de generar este código.


111

17. Vídeo.

17.1. Video. Con Flash cada vez es más fácil añadir vídeos a nuestras presentaciones o webs. En particular Flash CS5 incorpora una serie de características que facilitan la tarea al máximo y permiten el uso de vídeos como si se tratase de cualquier otro objeto en pantalla. A continuación explicaremos cómo hacerlo y cuáles son las mejores alternativas. Utilizaremos el siguiente ejemplo para documentar algunos de los pasos que deberemos realizar.

17.2. Importando vídeos. Lo primero que deberemos hacer es transformar nuestro vídeo de formato avi, mpeg, mov, wmv o dv al formato que utiliza Flash: flv. Este formato, además de crear archivos de vídeo de buena calidad muy comprimidos, te permitirá introducir puntos de referencia desde donde controlaremos la interacción del entorno de la película con el vídeo. Haz clic en Archivo → Importar → Importar vídeo para empezar a configurar el archivo .flv que crearemos. Se abrirá una pantalla como ésta:

Aquí deberás seleccionar el archivo que quieres importar para utilizarlo en tu película. Haz clic en el botón Examinar y búscalo en tus carpetas. Cuando lo hayas encontrado pulsa el botón Aceptar y estarás listo para seguir pulsando el botón Siguiente. También es posible marcar la opción Ya se ha implementado en un servidor Web, Flash Vídeo Streaming Service o Flash Communication Server. En este caso deberás 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 información del video que vamos a exportar, donde se importara, etc:

A partir de este punto, ya tenemos el vídeo incorporado en nuestro proyecto.

17.3. Puntos de referencia. El vídeo se puede mostrar como un flujo, simplemente reproducirlo y pararlo. Pero podemos hacer más, podemos hacer que se pueda navegar a determinados momentos del vídeo, o que se produzca un evento cuando alcance una posición determinada. Pero para hacer todo esto, tenemos que trabajar con puntos de referencia. Podemos ver Puntos de referencia desde el panel de Propiedades del componente de vídeo:


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 añaden al codificar el vídeo con Adobe Media Encoder. Pueden ser de Navegación o de Evento.

Creando puntos de Navegación podremos referenciarnos más tarde a ellos para saltar en la película. Sería algo así como crear capítulos 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 película. Estos puntos nos permitirán pasar parámetros que podremos recuperar mediante ActionScript.

En la imagen anterior, vemos que hay 3 puntos de Navegación, a los cuales acudiremos pulsando los botones para saltar entre los capítulos de la película. Luego hemos añadido 4 puntos de Evento desde los que pasaremos un parámetro 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 añadirlos directamente desde el panel de Propiedades. Para hacerlo no tenemos más que desplazar el cabezal del vídeo hasta el momento en el que lo queramos añadir, y pulsar el icono más + del panel.

Tanto los puntos de ActionScript como los codificados, pueden enviar parámetros, lo que nos permite recibir información.


114

18.4. El componente FLVPlayback El vídeo, no se reproduce directamente. Lo hace a través de un reproductor, un componente del tipo FLVPlayback. Otra forma de insertar un vídeo en el escenario, es creando primero este componente, e indicándole el vídeo a reproducir. Podemos hacerlo a través del Panel Componentes, accesible desde el menú desdeVentana → Componentes→ FLVPlayback.

Desde el inspector de Propiedades podemos configurarlo. Veamos sus opciones:

Align: especifica el diseño del vídeo. Por ejemplo, lo podemos centrar con center.

AutoPlay: puede tomar los valores true o false. Indican si el vídeo debe reproducirse nada más abrir el archivo o esperar a una orden para empezar a reproducirse.

CuePoints: indica los puntos de referencia que están incluidos en la película. Una vez importada la película 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 transmisión de vídeo en vivo y sólo podrá utilizarse a través de un servidor deStreaming.

Preview: Permite obtener una previsualización desde una imagen png.

ScaleMode: Indica si se altera la escala del vídeo: si muestra su tamaño original, si se ajusta al tamaño de la escena, etc...

Skin: desde aquí podemos modificar la apariencia de los controles de la película 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 sitúe sobre la película.

SkinBackgroundAlpha establece la transparencia del fondo del skin, y skinBackgroundColor su color.

Source es el archivo de vídeo que se mostrará en el reproductor.


115

Volume: de 0 a 100. Indica el volumen máximo del vídeo. 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 vídeo deberá volver a la posición inicial después de haberse reproducido completamente, o tras hacer un stop.

AutoSize: puede tomar los valores true o false. Indica si el control deberá ajustarse al tamaño del vídeo, o por el contrario deberá ser el vídeo el que se ajuste al tamaño del control.

BufferTime: especifica el número de segundos que se almacenarán en la memoria antes de que se inicie la reproducción del vídeo.

TotalTime: indica el tiempo total del vídeo.

Recuerda que todas estas propiedades son accesibles desde ActionScript.

Una vez insertada la película mediante la adición de este componente o por importación 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 reproducción. Usar componentes para controlar la película es muy sencillo, sólo deberás arrastrarlos desde el Panel Componentes al Escenario y escribir unas pocas líneas en el Panel Acciones.

BackButton: retrocede el flujo del vídeo al punto de referencia inmediatamente anterior o en su defecto al inicio de éste.

BufferingBar: muestra el progreso de descarga del vídeo.

ForwardButton: avanza el flujo del vídeo 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 película directamente a 0. Actuaría de forma similar a la línea:

1 miVideo.volume = 0;


116

PauseButton: pausa la película en el momento en el que se pulse el botón.

PlayButton: reaunda (o comienza) la reproducción a partir de donde se encuentre el cabezal de reproducción de vídeo.

PlayPauseButton: una mezcla de los dos anteriores, es capaz de pausar y reanudar la reproducción desde un mismo control.

SeekBar: desde esta barra avanzar y retroceder manualmente por la línea de flujo de la película.

StopButton: detiene la reproducción y posiciona el cabezal de reproducción al principio del vídeo.

VolumeBar: permite el aumento o disminución del volumen del vídeo mediante una barra de volumen.

Una vez añadidos los componentes necesarios al Escenario tendrás que darle un nombre de instancia y luego asociarlo al reproductor empleando ActionScript. Básicamente, 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 sería el siguiente: El componente se asociará al vídeo y funcionará por sí solo. Fácil, ¿verdad? Puedes modificar los componentes que añadas al Escenario haciendo doble clic sobre ellos y cambiando su forma, tamaño o color.

18.6. Crear controles propios. Crear controles propios no es muy complicado en Flash CS5. Sólo tienes que crear los botones que consideres necesarios y utilizar las propiedades del componente FLVPlayback. Puedes recurrir al panel Fragmentos de código donde encontrarás códigos muy útiles con las funciones básicas.

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;


117

Play(): reproduce el vídeo.

1 miVideo.play();

Stop(): detiene el vídeo y vuelve al inicio.

1 miVideo.stop();

Pause(): detiene el vídeo conservando su posición actual.

1 miVideo.pause();

Seek(segundo:Number): permite el avance o retroceso de la película de vídeo.

1 miVideo.seek(5);

Esta línea colocará la cabeza lectora en el segundo 5 y reproducirá a partir de ahí.

Volumen: define el volumen del vídeo. Puedes introducir un valor entre 0 y 100.

1 miVideo.volume = 50;

Un ejemplo de cómo crear un botón de Play/Pause sería asociando el código siguiente a un botón:

1 2 3 4 5 6 7 8

miBoton.addEventListener(MouseEvent.CLICK,pararContinuar); function pararContinuar(event:MouseEvent) { if (miVideo.state==miVideo.PAUSED) { miVideo.play(); } else { miVideo.pause(); } }

La propiedad state devuelve el estado en el que se encuentra nuestro vídeo en el momento, puede tomar los siguientes valores:

miVideo.PAUSED: el vídeo se encuentra pausado.

miVideo.PLAYING: el vídeo se está reproduciendo.

miVideo.REWINDING: el vídeo está en estado de rebobinado.

miVideo.SEEKING: el vídeo está en estado de búsqueda.

miVideo.STOPPED: el vídeo se encuentra detenido.

miVideo.BUFFERING: el vídeo todavía se está almacenando en el buffer.


118

miVideo.CONNECTION_ERROR: se ha producido un error de conexión y el vídeo no podrá visualizarse.

miVideo.DISCONNECTED: el vídeo está en estado de desconexión. Este estado se producirá hasta que se le asigne una ruta a la propiedad contentPath.

miVideo.LOADING: el vídeo está en estado de carga.

17. Navegar con los puntos de referencia. Ahora veremos cómo interactuar con los puntos de referencia que hayamos creado. Principalmente, podemos usar los puntos de referencia de dos formas: usarlos apra navegar por el vídeo, o esperar a que se produzcan y entonces realizar una acción. A) Navegar con puntos de referencia. En el ejemplo hemos creado 3 botones que deberán saltar a los tres puntos diferentes que hemos creado: inicio, carrera1 y carrera2. El código asociado al botón sería el siguiente:

1 2 3 4 5

miBoton.addEventListener(MouseEvent.CLICK,reproducirInicio); function reproducirInicio(event:MouseEvent) { miVideo.seekToNavCuePoint("inicio"); miVideo.play(); }

Este trozo de código utiliza la función seekToNavCuePoint para buscar el punto de referencia que se le indique, luego tendremos que decirle que reanude la reproducción. También puedes utilizar las funciones seekToNextNavCuePoint() y seekToPrevNavCuePoint() para avanzar y retroceder, respectivamente, por los diferentes puntos de referencia de navegación creados.

1 2

miVideo.seekToNextNavCuePoint(); miVideo.seekToPrevNavCuePoint();


119

21.8. Trabajar con eventos de vídeo. Como vimos antes, podíamos crear puntos de referencia de Eventos para pasar parámetros a nuestra película desde la reproducción del vídeo. B) Capturar el evento. Imaginemos que tenemos un vídeo con un punto de referencia llamado susto, y que cuando el vídeo lo alcance, queremos mostrar un texto determinado en un componente de texto. Lo que tenemos que hacer es escuchar cuándo se produce el evento MetadataEvent.CUE_POINT, y entonces llevar a cabo nuestra acción, 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="Atención a la cara de Juanito"; } }

Como vimos, también podíamos recuperar parámetros 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 condición, es comprobar si hay información sobre los parámetros (.info.parameters). Si es así, sacamos la información del parámetro llamándolo por su nombre y actuamos en consecuencia. Lo que hemos hecho, es hacer que el parámetro fotograma nos indique la etiqueta a la que queremos desplazar el cabezal de mensaje. En el ejemplo hemos creado un clip de película que se llama mensaje. Cuando se van produciendo determinados eventos en el vídeo vamos moviendo el cabezal de reproducción de dicho clip y así creamos una vinculación entre ambos, el clip y el vídeo.


120

PAEM

Documents

Transcript of PAEM