iniciación al flash
DESCRIPTION
Se trata del inicio de un curso de flash muy interesante para utilizarlo en cualquier aplicación web o no.TRANSCRIPT
1ª edición, mayo de 2011
Autora: Carla Novillo Lapeyra
de esta edición:FOREM. Fundación Formación y Empleo Miguel EscaleraC/ Las Mercedes, 19, 28020 Madrid (España)Tel.: +34 91 572 54 00 — 902 300 290Fax: +34 91 306 91 93Correo electrónico: [email protected]://www.forem.es
Comité editorial: Marta del Castillo Coba, Sonia Fanega García, Ana Fernández Fernández y Pablo Martín de la Hoz
ISBN: 978-84-694-3498-7
Reservados todos los derechos. Quedan prohibidas, sin el permiso escrito de FOREM, la reproducción o la transmisión total o parcial de esta obra por cualquier procedimiento mecánico o electrónico, incluyendo la reprografía y el tratamiento informático, y la distribución de ejemplares mediante alquiler o préstamos públicos.
2
Índice del curso
Este curso de iniciación a Flash se estructura en tres módulos:
• Módulo 1: Figuras estáticas
1. La interfaz de Flash2. Herramientas gráficas3. Modelar figuras4. Herramienta de Texto5. Resumen
• Módulo 2: Dar movimiento
1. Capas2. Animación Flash3. Símbolos4. Sonido5. Resumen
• Módulo 3: Interactividad básica
1. Botones2. Uso de acciones3. Aplicación interactiva4. Publicar una película5. Resumen
Este curso es una introducción al programa de Flash, aplicación imprescindible de diseño gráfico, de animación en dos dimensiones y de creación de presentaciones interactivas dentro y fuera de la Web. Flash es un programa de reconocida calidad y utilidad, pero que no tiene un uso tan intuitivo como otras aplicaciones menos versátiles.
• Módulo 1
Conocer y usar la interfaz de trabajo. Experimentar con las herramientas y facilidades del programa para empezar a trabajar en la modelación de los elementos de un Acuario.
• Módulo 2
Conocer el método de trabajo de animación en Flash para crear una película animada utilizando los elementos del Acuario creados en el módulo anterior.
• Módulo 3
Proporcionar los conocimientos necesarios para dotar a la animación del Acuario de interactividad. Y publicar el resultado final de nuestro trabajo.
A lo largo del curso irás creando una serie de elementos con los que, finalmente, compondrás un acuario animado e interactivo.
El curso pretende los siguientes objetivos generales:
Objetivos del curso
3
4
Módulo 1:
1. La interfaz de Flash
2. Herramientas gráficas
3. Modelar figuras
4. Herramienta de Texto
5. Resumen
Figuras estáticas
5
1. Espacio de trabajo2. Menú Principal3. Escenario4. Paneles:
4.1. Línea de tiempo4.2. Herramientas de dibujo4.3. Propiedades4.4. Menú derecho de paneles
– Biblioteca – Alinear | Información | Transformar– Color | Muestras de color
Índice
• 1. LA INTERFAZ DE FLASHMódulo 1.- Figuras estáticas
• De forma general, aprender a moverse por el entorno de Flash.
• De forma específica, familiarizarse con la interfaz de trabajo de Flash y sus paneles de control.
Este primer contacto con Flash pretende facilitar y proporcionar un punto de arranque y una visión general del entorno de trabajo y de sus elementos.
Los objetivos que persigue este capítulo “La interfaz de Flash” son:
6
1. La interfaz de Flash | 1. Espacio de trabajo
Al iniciar el programa nos aparecerá un cuadro de diálogo desde el que podemos decidir qué tipo de tarea vamos a realizar con Flash: Abrir un elemento reciente, Crear un nuevo archivo de Flash, etc. En nuestro caso seleccionaremos la opción Crear nuevo > Archivo de Flash (AS 2.0). Tras seleccionar esta opción accedemos al espacio de trabajo.
Flash proporciona una configuración del entorno de trabajo por defecto que incluye los paneles de uso más frecuente. Sin embargo, el espacio de trabajo se puede configurar de acuerdo con las preferencias del usuario y las necesidades de la actividad que se esté realizando.
Desde el menú “Ventana”, de la barra de menú principal (en la parte superior de la pantalla), se pueden establecer los paneles que se quieren ver. Nosotros vamos a trabajar con el Espacio de Trabajo: Diseñador (una mezcla entre animador y desarrollador).
Además, también nos permite cambiar la ubicación de los mismos en el entorno de trabajo, desplegarlos o plegarlos, y acceder a las opciones que puedan tener.
Nosotros vamos a trabajar con el Espacio de Trabajo: Diseñador.
Espacio de trabajo
Diseñador
Ventana
7
• El menú principal (parte superior de la pantalla) permite acceder a las acciones principales de Flash:
El espacio de trabajo de Flash se parece a la mesa de dibujo y animación tradicional. El escenario es el papel y los paneles los recursos para trabajar como lápices, pinceles, colores, reglas, etc.
El espacio de trabajo de Flash estáconstituido por un menú principal, y por un escenario alrededor del cual se encuentran una serie de paneles.
Archivo | Edición | Ver | Insertar | Modificar | Texto | Comandos | Control | Depurar | Ventana | Ayuda
• El escenario (parte central del programa) es el espacio de la pantalla donde se produce la película. Vendría a ser nuestro papel en blanco.
• Los paneles (alrededor del escenario) son ventanas que presentan información o proporcionan los controles necesarios para realizar determinadas operaciones:
Línea de tiempoHerramientasPropiedadesBibliotecaAlinear / Información / TransformaciónColor / Muestras
Como en cualquier otro programa, en la parte superior de la pantalla se desarrolla la Barra de Menús:
• ARCHIVO: Desde este menú abriremos los documentos de trabajo, los guardaremos y los publicaremos.
• EDICIÓN: Desde aquí podremos realizar acciones de gestión y desplazamiento (Copiar, Cortar, Pegar...).
• VER: Se facilita el trabajo en la creación de una película Flash desde el punto de vista de cómo ver el área de trabajo. Incluye las opciones de ayuda al dibujo, como son las Reglas o la Cuadrícula.
• INSERTAR: Hace referencia a todos los componentes que se pueden ir incluyendo en una película Flash; desde los símbolos, los fotogramas con diferentes cualidades o las escenas de que se compone la película final.
• MODIFICAR: Desde este menú podremos alterar cualquier componente de la película, incluso la película en sí misma.
• TEXTO: Nos permitirá controlar los diversos atributos aplicados al texto. • COMANDOS: Este nuevo menú administra la ejecución de acciones preprogramadas llamadas
comandos.• CONTROL: Rige la reproducción de la animación.• VENTANA: Este menú gobierna la visualización y organización de toda la interfaz del programa.
Desde aquí puedes visualizar y ocultar cualquier panel o barra de herramientas que desees. • AYUDA: Como cualquier otro programa, flash incluye un menú de ayuda. Resulta muy útil cuando
estamos perdidos o queremos introducirnos en el conocimiento de alguna parcela del programa.
1. La interfaz de Flash | 2. Menú principal
Archivo Edición Ver Insertar Modificar Texto Comandos Control Depurar Ventana Ayuda |Fl
8
Área de trabajo
Escenario
La superficie de trabajo de Flash está situada en la parte central del programa. El Escenarioes donde se produce la película. Se puede trabajar tanto dentro como fuera de él, pero tenemos que tener en cuenta que la visualización del resultado de lo que estamos haciendo y que publicaremos se limita al interior del escenario, es decir, al rectángulo central.
1. La interfaz de Flash | 3. Escenario
Podemos imaginarnos la superficie de trabajo y el escenario como un TEATRO: El usuario sólo ve lo que está a la vista en el escenario. Pero nosotros no sólo trabajamos en el escenario sino también entre bastidores (fuera del escenario, en la superficie de trabajo).
Más adelante veremos que trabajar fuera del escenario nos será muy útil.
Preparado para entrar en escena.
9
Los paneles muestran información sobre el elemento que interviene en el trabajo que se estárealizando y proporciona controles para manejar el elemento al que se refieren. El entorno o espacio de trabajo de “Diseñador” ofrece estos paneles:
Línea de tiempo. Permite controlar la evolución del escenario a lo largo del tiempo y los elementos presentes.
Herramientas de dibujo. Proporciona el control de los instrumentos de diseño gráfico proporcionados por la aplicación.
Propiedades. Muestra la información sobre los elementos sobre los que se está trabajando y los controles para modificar sus propiedades.
Menú derecho de paneles:- Biblioteca. - Alinear | Información | Transformar.- Color | Muestras de color.
1. La interfaz de Flash | 4. Paneles
A parte de éstos, hay otros paneles o ventanas que "a priori" no están visibles. A medida que avancemos con el programa iremos viendo aparecer más paneles.
Los fotogramasLas capas
4.1. Panel Línea de Tiempo
La línea de tiempo organiza y controla el contenido de un documento a través del tiempo en capas y fotogramas. Al igual que en las películas, los documentos de Flash dividen el tiempo en fotogramas. Las capas son como varias bandas de película apiladas unas sobre otras, cada una de las cuales contiene una imagen diferente que aparece en el escenario.
Los componentes principales de la Línea de tiempo son:
La cabeza lectora
Las capas de un documento aparecen en una columna situada a la izquierda de la línea de tiempo. Los fotogramas contenidos en cada capa aparecen en una fila a la derecha del nombre de la capa. La cabeza lectora indica el fotograma actual que se muestra en el escenario. Mientras se reproduce el documento, la cabeza lectora se desplaza de izquierda a derecha de la línea de tiempo. 10
Controlador de color de Flash.
4.2. Panel de Herramientas
Una de las partes más importantes de Flash es el panel de Herramientas. Dentro de este Panel, las herramientas se organizan por grupos:
Éstas son las herramientas de ayuda para la visualización del área de trabajo.
El primer grupo nos ofrece las diferentes herramientas con que contamos para crear y modificar cualquier dibujo, o un texto, en el área de trabajo.
En este caso se ve activada la herramienta de Selección y Movimiento (esquina superior izquierda).
Al final del panel aparecerán las opciones de la herramienta que tengamos activada.
•La mano se emplea para mover el escenario por la pantalla.
•El zoom permite ampliar y reducir el escenario
•Color de Trazo
•Color de Relleno
•Blanco y negro | Intercambiar colores
4.3. Panel Propiedades
Uno de los paneles más importantes cuando se trabajan con gráficos en Flash es el panelPropiedades.
Desde este panel tenemos la posibilidad de modificar la propiedad del Documento, de cualquier herramienta que esté activada o cualquier objeto que tengamos seleccionado en el escenario.
Si por ejemplo acabamos de abrir el programa y aún no estamos usando ninguna herramienta ni hemos dibujado ningún objeto, el Panel Propiedades nos ofrece la información relativa al Documento (o Escenario):
– El color de fondo (blanco)– Su perfil (Predeterminado)– Los fotogramas por segundo (25 FPS)– El tamaño (550 X 400 px)– Etc.
11
Pero si estamos trabajando con la Herramienta Rectángulo, por ejemplo, en el panel Propiedades aparece la información relativa al rectángulo,
así como la posibilidad de variar sus atributos. Sencillamente deberemos modificar los valores adecuados en cada uno de los campos.
RECUERDA: el aspecto del panel Propiedades variará dependiendo de lo que tengamos seleccionado, ofreciéndonos sus propiedades para variarlas.
El panel Propiedades es uno de los paneles más útiles. Este panel unifica en un mismo espacio la interacción con elementos diversos. Este enfoque no es habitual en las interfaces de otros programas y cuesta acostumbrarse a él, pero con el uso se pone de manifiesto su utilidad.
4.4. Menú derecho de paneles
En la parte derecha de la pantalla tenemos otros paneles también muy útiles:
• Biblioteca. Todos los símbolos, archivos de audio, fotos, sonidos y componentes de Flash, se encuentran en la biblioteca.
• Alinear / Información / Transformar. Este pequeño grupo de herramientas nos ofrece la posibilidad de alinear, dimensionar y distribuir objetos rápidamente en Flash.
• Color / Muestras de color. Permite desde utilizar las muestras de color de Flash, hasta crear nuestro propio color.
Como hemos visto, los paneles de Herramientas, Línea de tiempo y Propiedades son los más importantes y a los que más recurriremos. Pero no solo de estos paneles vive Flash...
12
La muestra de color propone un catálogocromático, del que se puede escoger un color, y una selección de modelos de degradados, de la que se puede elegir uno. Además, se pueden definir degradados personalizados.
El mezclador de colores, permite determinar los colores sólidos estableciendo sus composiciones en RVA (Rojo, Verde y Azul) y transparencia (Alfa), o seleccionar su tonalidad mediante espectros cromáticos de muestra.
Además el panel Color permite modificar la apariencia del color, modificando el tipo de relleno o de trazo que vamos a aplicar a la figura. En el cuadro Tipo.
COLOR
MUESTRAS
Hay dos ventanas para establecer los colores en Flash: Color y Muestras.
13
1. Herramientas de dibujo
1.1. Herramientas de trazado básico:
2. Otras herramientas de dibujo
Índice
Módulo 1.- Figuras estáticas • 2. HERRAMIENTAS GRÁFICAS
1.2. Herramienta Pluma1.3. Herramienta Lápiz y Borrador1.4. Herramienta Pincel
– Línea / Rectángulo / Óvalo– Polígono– Método de trabajo en Flash
Antes de empezar a modelar los elementos del Acuario, veremos en profundidad las herramientas de dibujo disponibles en Flash.
Los objetivos que persigue este capítulo “Herramientas gráficas” son:
• De forma general, conocer los utensilios de dibujo disponibles en Flash.
• De forma específica, saber qué herramientas deberemos utilizar a la hora de dibujar y cómo deberemos usarlas.
14
La Goma, el borrador del dibujante, sirve para eliminar trazos, partes de ellos o elementos enteros.
El Pincel también facilita un trazo parecido al que se obtiene con el correspondiente utensilio clásico.
El Lápiz permite dibujar de una forma más parecida a como se hace tradicionalmente.
La Pluma permite crear figuras compuestas por líneas enlazadas, y controlar la forma de éstas y su conexión.
El Rectángulo, el Óvalo y el Polígonopermiten la creación de estas figuras básicas, que constituyen la base de diseños más complejos.
La Línea permite trazar líneas rectas, se trata de un instrumento muy útil, a pesar de su aparente simplicidad.
Existen variasherramientas de dibujo en Flash.
La elección de una u otra depende de la tarea a realizar (y de las preferencias del diseñador):
2. Herramientas gráficas | 1. Herramientas de dibujo
Las herramientas de dibujo que proporciona Flash son el equivalente digital de los instrumentos tradicionales esenciales del diseñador como el lápiz, el tira líneas, el pincel, etc.
Para crear cuadrados o circunferencias , en vez de rectángulos u óvalos, tendrás que presionar “Mayús” mientras arrastras el cursor.
La línea, el rectángulo y el óvalo son tres herramientas de trazado básico, que permiten crear elementos que suelen formar parte de diseños más sofisticados.
Permite crear una línea recta entre dos puntos, para ello pulsamos el botón izquierdo del ratón sobre algún punto del escenario y, sin soltarlo, arrastramos el cursor poreste, con lo que se va creando una línea recta hasta que se suelta el botón.
Permite trazar rectángulos con facilidad, estableciendo la posición de dos de sus vértices opuestos. Se selecciona uno de los puntos con el botón izquierdo del ratón y, sin soltar, se establece el segundo.
Proporciona un medio sencillo de crear óvalos, de modo análogo a los rectángulos, estableciendo los vértices opuestos del rectángulo en el que el óvalo se inscribe.
1.1. Herramientas de trazado básico
• Línea, Rectángulo y Óvalo
15
El polígono también es una herramienta de trazado básico, que permite crear elementos que suelen formar parte de diseños más sofisticados.
Esta herramienta nos permite crear diferentes polígonos, dependiendo del número de sus lados.
Además esta herramienta también nos da la opción de crear estrellas.
Triángulo Pentágono
Estrella
• Polígono
Óvalo
Triángulo
Triángulo
Línea
A partir de triángulos creamos las aletas del pez.A partir de un óvalo
creamos el cuerpo del pez.
A partir de una línea creamos la boca del pez.
Como veremos más adelante, el método de trabajo de Flash a la hora de dibujar consiste en moldear elementos básicos (rectángulo, óvalo, etc.) para crear otros elementos más sofisticados.
A partir de formas básicas (óvalo, etc.) creamos otras formas más sofisticadas:
• Método de trabajo de Flash
16
La pluma es el instrumento de trazado por excelencia, aunque no se parece a ningún utensilio del mundo real, podría verse como una combinación de las técnicas básicas de delineación: trazado de líneas, rectas y curvas, y conexión entre ellas controlando sus tangencias.
En esencia, con la pluma se van estableciendo puntos entre los que se trazan líneas. Después del primero, si se indica un punto con un clic del botón izquierdo, la línea trazada es recta. En las misma circunstancias, si al indicar el punto pulsando también el botón izquierdo este no se suelta, la línea es curva y se pasa a establecer la tangente de ella en el punto.
Para determinar el último punto se hace doble clic, si se quiere dejar abierto el polígono, o se selecciona de nuevo alguno de los puntos establecidospreviamente. Cuando el último punto seleccionado es el primero, otra vez, se define un polígono cerrado.
1.2. Herramienta Pluma
1.3. Herramientas Lápiz y Borrador
El lápiz está inspirado en el instrumento de dibujo del mismo nombre.
Modo de funcionamiento: Pulsar el botón izquierdo del ratón sobre algún punto del escenario y, sin soltarlo, arrastrar el cursor por este, con lo que se crea un trazo continuo hasta que se suelte el botón.
El borrador (o goma) funciona como el lápiz, pero eliminando la parte de los trazos que encuentra en su camino.
El borrador no sólo borra el trazo del lápiz si no que también borra las superficies de color (el pincel, los rellenos de los objetos, etc.), las líneas, etc.
El lápiz puede configurarse. Sus trazos pueden enderezarse, suavizarse o simplemente pulirse para evitar el efecto aserrado característico de las imágenes digitales.
17
1. Seleccionamos la Herramienta Lápiz.2. Activamos el atributo Enderezar del
Lápiz, antes de dibujar:
A la izquierda, un triángulo dibujado a mano alzada.
A la derecha, un triángulo dibujado a mano alzada pero con
la opción Enderezar activada.
Seleccionamos la HerramientaLápiz y dibujamos.
¿Qué pasa si activamos el atributo Enderezar del Lápiz antes de dibujar?
La herramienta pincel está también basada en el utensilio homónimo.
Su funcionamiento es esencialmente como el del lápiz, aunque el grosor y forma de su trazo se puede regular.
La herramienta Pincel se puede utilizar como herramienta de trazado, aunque con frecuencia puede generar diversos puntos innecesarios que hacen aumentar el tamaño de los archivos y dan bastantes dolores de cabeza al intentar editar las formas posteriormente.
También incluye la herramienta de pincelrociador, que actúa como un spray.
1.4. Herramienta Pincel
18
•El Cubo de pintura permite rellenar de un color la superficie interior de un objeto ya dibujado.
•El Bote de tinta se utiliza para establecer el color del borde de los objetos dibujados.
•El cuentagotas sirvepara obtener el color de un objeto dibujado para aplicarlo a otro.
En el Panel de Herramientas se encuentran las herramientas para poder aplicar el color.
La Herramienta Borrador no sólo borra el trazo del lápiz sino también borra las superficies de color.
Recuerda
2. Herramientas gráficas | 2. Otras herramientas de dibujo
Herramienta de rotación 3D. Permite transformar, rotar y trasladar un objeto en el escenario bajos sus puntos cartesianos en X, Y, e inclusive con su profundidad en Z.
Herramienta Lazo. Permite seleccionar los objetos dibujados, proporciona distintas modalidades, pulso, poligonal o gama de color (barita mágica).
Herramienta Deco. Permite añadir un tramado continuo o patrón a lo largo de todo el documento (efecto similar al que se utiliza en Photoshop con su cubo de pintura).
Herramienta Hueso. Permite animar personajes de una forma mucho más sencilla de como se venía haciendo hasta ahora, aplicando un esqueleto.
Herramienta Transformar. La transformación libre permite modificar las figuras dibujadas con Flash, rotándolas, escalándolas o distorsionándolas de distintas formas.
Existen otras herramientas de dibujo en Flash que son de gran utilidad para realizar tareas complementarias:
19
2.1. Crear un óvalo2.2. Borde y Relleno2.3. Modos de dibujo en Flash2.4. Crear un triángulo2.5. Colores degradados2.6. Propiedades del Trazo
– Herramienta de Selección– Herramienta de Subselección
4. Copia de objetos
3. Modificación de elementos
2. Creación de elementos básicos
Índice
5. Importar elementos
Módulo 1.- Figuras estáticas • 3. MODELAR FIGURAS
4.1. Transformar
1. Introducción
Una vez que has visto en profundidad las herramientas de dibujo disponibles en Flash, empezarás a trabajar en la creación de los elementos del Acuario.
Los objetivos que persigue este capítulo “Modelar figuras” son:
• De forma general, conocer la técnica de dibujo de Flash.
• De forma específica, llegar a crear formas complejas, como la figura de un pez.
20
Antes hemos comentado que el método de trabajo en Flash a la hora de dibujar, es moldearelementos básicos (triángulo, rectángulo, óvalo) para crear otros más complejos.
ÓvaloÓvalo
Triángulo
Triángulo
Línea
A partir de triángulos creamos las aletas del pez.A partir de un óvalo
creamos el cuerpo del pez.
A partir de una línea creamos la boca del pez.
3. Modelar figuras | 1. Introducción
1. Pues bien, comenzaremos nuestro ACUARIO creando elementos de formas básicas(rectángulos, círculos, etc.).
2. Más tarde moldearemos y modificaremos estas formas básicas para transformarlas en objetos más complejos.
3. Y por último aprenderemos a copiar estos objetos ya existentes y transformarlos paraahorrar tiempo y esfuerzo en el desarrollo del proyecto.
21
Comencemos creando un Óvalo. Sigue estos pasos:
Como puedes observar, el óvalo tiene:
un borde
y un relleno.
1. Selecciona la Herramienta Óvalo.
2. Coloca el cursor sobre el escenario.
3. Haz clic en el botón izquierdo del ratón y, sin soltarlo, arrástralo hasta que el óvalo alcance el tamaño deseado.
4. Suelta el botón del ratón.
2.1. Crear un óvalo.
Al crear una figura cerrada, ésta tomará el color de relleno que se encuentre seleccionado en ese momento, por lo que las figuras cerradas suelen tener dos colores: Color de trazo(colorea la línea exterior) y Color de relleno (se utilizará en el interior de la figura).
3. Modelar figuras | 2. Creación de elementos básicos
Para seleccionar todo el óvalo, es decir, el borde y el relleno:
Para seleccionar sólo el borde o contorno:
Para seleccionar sólo el relleno:
2.2. Borde y Relleno
Haz un solo clic sobre el relleno.
Haz un solo clic sobre el contorno.
Haz doble clic sobre él, o arrastra el cursor, sin soltarlo, hasta abarcar todo el óvalo.
+
Al crear una figura cerrada, Flash dibuja un borde y un relleno. Cada una de las partes, borde y relleno, funcionan como elementos independientes (puedes mover una de las partes a otra posición sin que la otra se desplace).
Para seleccionar toda la figura, o sólo el contorno (borde) o el relleno de un objeto, selecciona la herramienta Selección (la Flecha: ) y:
22
A la hora de dibujar podéis utilizar dos modos de dibujo en flash: El modo de dibujo combinado (Formas) y el modo de dibujo de objetos (Grupos).
• Modo de dibujo combinado (Formas)
Flash fusiona las formas dibujadas en los puntos donde se superponen, de tal forma que si desplazas o borras una forma que ha sido fusionada con otra, la parte que estaba superpuesta desaparece definitivamente de la forma que queda en lugar inferior.
• Modo de dibujo de objetos (Grupos)
Flash no fusiona los objetos dibujados. Permanecen independientes y separados como Grupos incluso si están superpuestos.
2.3. Modos de dibujo en Flash
Para habilitar el modo de dibujo de objetos,selecciona la herramienta que quieras utilizar y haz clic en el icono Ajustar a objetos en el área de opciones del panel Herramientas (imagen).
Este botón nos permite cambiar entre los dos modos de dibujo que incorpora Flash.
1. Haz doble clic en el grupo con la herramienta Selección ( ). Verás que todos los elementos de la página que no forman parte del grupo aparecen atenuados, lo que indica que no se puede acceder a ellos.
2. Haz cualquier cambio en el elemento del grupo.
3. Para salir del modo edición, haz doble clic en un punto vacío del escenario con la herramienta Selección, o haz clic sobre la flecha de Paso atrás ( ), situada debajo de la Línea de tiempo. Flash restablece los elementos del grupo a elementos individuales para poder trabajar con otros elementos del escenario.
¿Cómo editar un grupo?
Los grupos, al igual que los símbolos (que veremos más adelante), se pueden editar:
23
Una vez creadas tus figuras tanto con formas como con grupos, puedes agrupar las formas y desagrupar los grupos, en el menú Modificar > Agrupar / Desagrupar.
• Para este curso de Flash, debes tener en cuenta lo siguiente:
Como más tarde vamos a animar los distintos elementos del pez, es conveniente que utilices el MODO DE DIBUJO DE OBJETOS y que cada elemento del pez sea un grupo.
Grupos
Formas
De esta forma, cuando desplacemos a otra capa de la línea de tiempo algún elemento para animarlo (ya sea la aleta, el ojo, etc.), no habremos borrado definitivamente otras partes del cuerpo (como podéis observar en la imagen de la derecha).
1. Utilizar la Herramienta Línea, dibujarlo a mano alzada (con la opción Enderezar activada),
2. O utilizar la Herramienta PolyStar.
2.4. Crear un triángulo
1. Selecciona la herramienta PolyStar. Se encuentra en la ventana desplegable de la Herramienta Rectángulo y Óvalo.
Para crear un triángulo con la herramienta PolyStar, haz lo siguiente:
No hay ninguna herramienta específica para crear triángulos, así que tienes dos opciones:
24
3. Se desplegará una ventana donde podremos modificar el número de lados de nuestro polígono. (Fig. 2)
4. Haz clic en Aceptar.
5. Pulsa el botón izquierdo del ratón sobre algún punto del escenario y, sin soltarlo, arrastra el cursor por éste, con lo que se va creando un triángulo hasta que se suelta el botón.
Fig. 1Fig. 2
2. Una vez que has seleccionado la Herramienta PolyStar, vete al panel de Propiedades,y en Configuración de Herramienta, selecciona el enlace Opciones… (Fig. 1)
Ya sabes dibujar formas básicas en Flash. Ahora puedes, por ejemplo, configurar su color. Los degradados son un tipo de relleno especial, compuesto por una transición entre dos o más colores. Podemos utilizar este tipo de color tanto para el relleno como para el bordede una figura.
2.5. Colores degradados
El relleno de la figura comenzarápor un color y terminará por otro, realizando el paso de un color a otro progresivamente.
Hay 2 tipos de degradados: El degradado lineal se basa en una línea horizontal.El degradado radial se forma con círculos concéntricos.
Con el uso de degradados conseguiremos que nuestras figuras no sean tan planas y sencillas. Los degradados hacen que nuestros dibujos tengan una apariencia más elaborada. 25
3º Accede al Panel COLOR y haz clic sobre el botón Color de relleno.
Vamos a dibujar una burbuja para nuestro acuario, consiguiendo el efecto de volumen. Para ello trabajaremos en el panel Color.
4º Despliega el Tipo de Color, y selecciona Radial.
1º Selecciona la Herramienta Óvalo y dibuja un círculo.
Recuerda que para dibujar un círculo
tendrás que pulsar la tecla Mayús. Si no lo haces, Flash dibujará
un óvalo.
2º Haz doble clic en el grupo para editarlo.
• Crear un degradado radial
5º Haz doble clic sobre los indicadores de color del degradado y selecciona un color de la ventana de muestras de color que se despliega.
Podemos crear colores intermedios haciendo clic debajo de la barra de degradado. Automáticamente se creará un indicador de color nuevo.
6º En el Panel Herramientas, selecciona Cubo de Pintura,y haz clic sobre el interior del círculo para aplicar los cambios de color.
7º Selecciona el borde o contorno del círculo y suprímelo.
8º Sal del modo edición (Haz doble clic en un punto vacío del escenario con la herramienta Selección , o haz clic sobre la flecha de Paso atrás situada debajo de la Línea de tiempo).
26
Desde la HerramientaTransformación de degradado(Panel Herramientas) podrás ajustar la dirección del degradado, la ubicación del punto focal y otras propiedades de degradados.
Distorsionar
GirarEscalar
Mover Punto focal
• Transformar un degradado
Para cambiar la apariencia del degradado disponemos de la herramienta Transformaciónde degradado, en la barra de herramientas.
En el Panel Propiedades están a mano los valores del trazo:
- Color- El grosor del Trazo (4.00)- Estilo: De puntos- Etc.
También puedes configurar el contorno del objeto, en Propiedades del Trazo.
Sigue estos pasos:
1º Selecciona el contorno.
3º Despliega la ventana Estilo,y selecciona el estilo de línea que desees.
2º Aplícale el color que desees.
En el icono del lápiz puedesmodificar los valores del Trazo.
2.6. Propiedades del trazo
27
En las pantallas anteriores has visto las bases de la creación de elementos. Ya conoces la diferencia entre un relleno y un trazo, un color sólido y un gradiente, etc.
Pero la verdad es que es bastante difícil trabajar con unos elementos tan básicos como estos. A base de círculos, rectángulos y líneas no parece muy sencillo crear formas complejas, como un pez. La forma de trabajar en Flash se basa en la transformación y modelado de los objetos ya existentes.
3. Modelar figuras | 3. Modificación de elementos
La Herramienta Selección no sólo permite seleccionar objetos gráficos para trabajar con ellos, sino que además sirve para modelar los objetos de dibujo. Permite:
La Herramienta Subselección hace visibles las líneas y puntos que constituyen los trazos y permite manipularlos. Para ello se hace clic con el ratón en el trazo y aparecen las conexiones entre líneas. Los puntos de conexión se pueden mover de sitio y las líneas se transforman para seguir unidas a ellos. También se pueden modificar las tangencias, que indican como se conectan las líneas en tales puntos.
1.Cambiar la curvatura de las líneas y deformar el relleno.
2.Cambiar la posición de los puntos, o crear nuevos puntos, que limitan las líneas independientes o de una figura. Para ello pulsa la tecla Alt mientras modificas el elemento.
Flash proporciona herramientas que permiten modificar los trazados que se han realizado con alguna de las herramientas presentadas antes.
28
A la hora de crear los elementos de una escena, una de las herramientas más útiles e importantes que pone Flash a nuestra disposición es la capacidad de copiar objetos.
El método más sencillo para copiar objetos es la copia directa. Por medio del ratón y de la tecla Control, podrás copiar los elementos seleccionados de la escena todas las veces que quieras. Lo vemos en los siguiente pasos:
1. Dibuja un círculo en el escenario.
2. Pulsa la tecla Control y haz clic con el ratón sobre el grupo círculo y, sin soltar, arrastra el elemento seleccionado a una nueva posición.
3. Suelta el botón del ratón y la tecla Control. Flash ha copiado el círculo en la nueva posición.
Si dedicas mucho tiempo y trabajo en la creación de un elemento complicado, ¿para qué volver a invertir el mismo esfuerzo en crear otro elemento exactamente igual? Bastará con copiarlo.
3. Modelar figuras | 4. Copia de objetos
Una vez que tienes el pez para tu acuario, puedes hacer copias de él y además modificarlo para dar un cierto aire de diversidad.
Flash ofrece muchas opciones para transformar un objeto, desde Rotar, Escalar y girar, Distorsionar, etc.
Desde la HerramientaTransformación libre (Panel de Herramientas) puedes modificar las figuras dibujadas con Flash, rotándolas, escalándolas o distorsionándolas de distintas formas.
Recuerda que al final del panel Herramientas aparecen las opciones de la herramienta que
tengas activada.
4.1. Transformar
Para modificar objetos, Flash nos ofrece la herramienta de Transformación libre.
29
Estos son algunos ejemplos de peces dibujados en Flash con los conocimientos que has adquirido hasta ahora. Dependiendo de la herramienta que elijas, del color, etc., se pueden crear muy diferentes tipos de elementos.
Si lo prefieres, también puedes utilizar una imagen para calcarla. Flash permite importar desde elementos que se crearon en otra película Flash, hasta gráficos, audio y vídeo.
Importar una imagen:
1.Selecciona Archivo > Importar > “Importar a escenario…”. Se abrirá el cuadro de diálogo Importar.
2.Busca la imagen en tu ordenador y selecciónala.
3.Haz clic en el botón Abrir que se encuentra en la parte inferior derecha de la ventana. Flash importará el archivo en la capa seleccionada.
3. Modelar figuras | 5. Importar elementos
Importar a escenario… Ctrl+RImportar a biblioteca…Abrir biblioteca externa… Ctrl+Mayús+OImportar vídeo
Imagen pez: Luc Viatour 30
1. Funcionamiento de manejo
2. Propiedades del texto
3. Convertir el texto en un enlace Web
Índice
Módulo 1.- Figuras estáticas • 4. HERRAMIENTA DE TEXTO
Para el uso de textos, rótulos, títulos y mensajes, aprenderemos a trabajar con textos en Flash.
Los objetivos que persigue este capítulo “Herramienta de Texto” son:
• De forma general, dar a conocer al alumno una de las herramientas más importantes de una animación interactiva: el texto.
• De forma específica, ver y conocer los tipos de campo de texto y los cuadros de diálogo Carácter y Párrafo. Con ellos controlar los aspectos del texto (desde el tamaño, fuente, color, etc.).
31
La herramienta de texto permite incluir texto en el diseño o la película.
Para utilizar la herramienta de texto de forma básica: 1º se selecciona en el panel de herramientas el icono correspondiente a la operación (T), 2º se indica con el ratón la posición en el escenario donde se quiere que esté el texto, 3º se escribe el mensaje.
A la hora de escribir el mensaje, la ubicación del mensaje se puede establecer:
1. con un clic de ratón, en cuyo caso aparece una caja que se va adaptandoa la longitud de la línea introducida (Fig.1),
2. o estableciendo a priori la longitud máxima de las líneas, apretando el botón izquierdo del ratón y sin dejar de pulsar, arrastrarlo hasta que el cuadro tenga la longitud deseada (Fig. 2).
Fig. 1
Fig. 2
4. Herramienta de texto | 1. Funcionamiento de manejo
Las propiedades del texto se controlan desde los cuadros de diálogo Carácter yPárrafo. A través de ellas es posible cambiar todas las propiedades básicas del texto (tipo, color, justificación, etc.) y otras más sofisticadas (orientación, posición en la línea, espacio entre caracteres, interlineado, etc.).
Se pueden crear 3 tipos de campos de texto:
• Texto estático (predeterminado)• Texto dinámico• Introducción de texto
• Los campos de texto dinámico requierenprogramación ya que se actualizan de forma dinámica (como la fecha y la hora).
• Los campos de introducción de textopermiten a los usuarios introducir texto en formularios o encuestas.
4. Herramienta de texto | 2. Propiedades del texto
32
Panel PROPIEDADES:
Sin necesidad de crear ningún símbolo Botón ni de escribir nada de código ActionScript, tenemos la posibilidad de acceder a una página Web mediante la herramienta de texto.
http://www.forem.es
4. Herramienta de texto | 3. Convertir el texto en un enlace Web
1. Escribe el texto. Puedes darle algún color para resaltarlo.
http://www.forem.es
3. Opcional: Si despliegas la casilla “Destino” y seleccionas la opción “_blank”, la Web se abrirá en una nueva ventana.
2. Selecciónalo y en el panel Propiedades > OPCIONES > “Vínculo”, escribe la dirección URL.
> Web de Forem
4. Pulsa Control-Intro para probar la película. En el momento que colocamos el cursor sobre el texto, Flash transforma el puntero y lo convierte en una mano.
33
M1.- Figuras estáticas / RESUMEN
1. El espacio de trabajo de Flash está constituido por un menú principal (parte superior de la pantalla), y por un escenario (parte central del programa) alrededor del cual se encuentran una serie de paneles:
– Línea de tiempo– Herramientas– Propiedades– Biblioteca– Alinear / Información / Transformación– Color / Muestras
Paneles
2. Existen varias herramientas de dibujo en Flash. La elección de una u otra depende de la tarea a realizar (y de las preferencias del diseñador): Línea, Rectángulo, Óvalo, Polígono, Pluma, Lápiz, Pincel, Goma.
En el Panel de Herramientas se encuentran las herramientas para poder aplicar el color: Cuentagotas, Cubo de pintura.
Existen además otras herramientas de dibujo en Flash que son de gran utilidad para realizar tareas complementarias: Herramienta Transformar, Herramienta de rotación 3D, Herramienta Lazo, Herramienta Deco, Herramienta Hueso.
3. El método de trabajo en Flash a la hora de dibujar, es moldear elementos básicos (triángulo, rectángulo, óvalo) para crear otros más complejos. Así, por ejemplo, a partir de triángulos creamos las aletas del pez.
Al crear una figura cerrada, Flash dibuja un borde y un relleno. Cada una de las partes, borde y relleno, funcionan como elementos independientes.
A la hora de dibujar podéis utilizar dos modos de dibujo en flash: El modo de dibujo combinado (Formas) y el modo de dibujo de objetos (Grupos).
Los degradados son un tipo de relleno especial, compuesto por una transición entre dos o más colores. Podemos utilizar este tipo de color tanto para el relleno como para el borde de una figura. Para cambiar la apariencia del degradado disponemos de la herramienta Transformación de degradado, en la barra de herramientas.
También puedes configurar el contorno del objeto, en Propiedades del Trazo.
Flash proporciona herramientas que permiten modificar los trazados que se han realizado: Herramienta Selección, Herramienta Subselección.
Por medio del ratón y de la tecla Control, podrás copiar los elementos seleccionados de la escena todas las veces que quieras.
Para modificar objetos, Flash nos ofrece la herramienta de Transformación libre.
Flash permite importar desde elementos que se crearon en otra película Flash, hasta gráficos, audio y vídeo. 34
4. Para el uso de textos, rótulos, títulos y mensajes, aprenderemos a trabajar con textos en Flash.
Se pueden crear 3 tipos de campos de texto:• Texto estático• Texto dinámico• Introducción de texto
Las propiedades del texto se controlan desde los cuadros de diálogo Carácter yPárrafo. A través de ellas es posible cambiar todas las propiedades básicas del texto (tipo, color, justificación, etc.) y otras más sofisticadas (orientación, posición en la línea, espacio entre caracteres, interlineado, etc.).
Convertir el texto en un enlace Web. Sin necesidad de crear ningún símbolo Botón ni de escribir nada de código ActionScript, tenemos la posibilidad de acceder a una página Web mediante la herramienta de texto. Para ello vamos a necesitar que el tipo de campo de texto sea Texto dinámico.
35
36
Módulo 2:
1. Capas
2. Animación Flash
3. Símbolos
4. Sonido
5. Resumen
Dar movimiento
37
1. Definición de capa
2. Propiedades de edición de capas
3. Organización de las capas
4. Tipos de capas
5. Trabajar con capas
6. Capa máscara
Índice
– Normal– Guía– Con guía– Máscara– Con máscara
Módulo 2.- Dar movimiento • 1. CAPAS
En este capítulo se siguen revisando las herramientas proporcionadas por Flash y se introduce el fundamento de la técnica de capas que resulta fundamental para acometer proyectos reales.
Los objetivos que persigue este capítulo “Capas” son:
• De forma general, conocer el método de trabajo de Flash por capas.
• De forma específica, disponer los trazados realizados con las herramientas de dibujo en distintas capas.
38
Escenario
Personajeanimado
En las antiguas series de dibujos animados, el personaje se movía
por un escenario estático.
1. Capas | 1. Definición de capa
¿Recuerdas las antiguas series de dibujos animados en las que un personaje se movía por un escenario estático? Los dibujantes creaban un gran escenario, y los animadoresdibujaban el movimiento de dicho personaje en una serie de hojas transparentes. En cada fotograma intervenían dos elementos: el escenario y el personaje animado. En Flash, cada uno de ellos estaría en una capa distinta.
La imagen muestra una línea de tiempo con varias capas.
Desde este enlace “Nueva capa” podrás añadir tantas capas como sea necesario.
Las capas se encuentran en la parte izquierda del Panel Línea de Tiempo. Cuando creas una película nueva en Flash, únicamente aparecerá una capa en la línea de tiempo. Según vayamos añadiendo nuevos elementos en nuestra película resulta conveniente ir colocándolos en nuevas capas. Podrás añadir todas las que quieras con un simple clic del ratón.
Capa 1Capa 2Capa 3Capa 4
LÍNEA DE TIEMPO
Como norma general, el método de trabajo más adecuado es utilizar una primera capa como fondo (en la que colocaremos los elementos estáticos) y después crear una nueva capa para cada elemento significativo.
39
Nos podemos imaginar las capas como hojas transparentes (acetatos) apiladas, que contienen cada una un conjunto de objetos gráficos que participan en el diseño completo.
La Capa 1 queda debajo de la pila, mientras que la Capa 4 está encima de la pila. (En este contexto, por “pila” se entiende un conjunto de elementos colocados unos encima de otros).
También podemos utilizar las capas para organizar un sólo personaje. De tal forma que en las capas superiores vamos animando los diferentes elementos del personaje: los ojos, las aletas, etc.
La capa activa, que es sobre la que se está trabajando, se señala con un lápiz en la capa correspondiente.
Cada capa tiene un nombre (Capa 1, Capa 2, etc.) y un color predeterminados. Y unos atributos de visibilidad, bloqueo y contorno.
Nueva capa | Nueva carpeta | Eliminar capa
Puedes organizar las capas dentro de carpetas.
Capa ocultaCapa bloqueadaCapa como contorno
CarpetaCapa dentro de la carpeta
Gracias a las propiedades de edición de capas, podrás ocultar o bloquear todos los elementos que te molesten y centrarte únicamente en el que te interese, mostrarlos únicamente como contornos, etc.
1. Capas | 2. Propiedades de edición de capas
40
Cambiar el nombre de la capa.
Flash asigna un nombre predeterminado a las nuevas capas (Capa 1, Capa 2, Capa 3, etc.). Para una mayor organización, Flash nos deja la opción de asignar un nuevo nombre acada capa. Así podrás asociar el nuevo nombre con la finalidad de la capa.
Así, si por ejemplo queremos que el Pez amarillo quede escondido detrás de las algas, bastaría con seleccionar la capa Pez amarillo y arrastrarla, sin soltar el botón izquierdo del ratón, debajo de la capa Algas.
Otra de las ventajas que presentan las capas es que permiten modificar la posición de los objetos de la escena dentro de la pila. Es decir, Flash permite modificar el orden de las capas, con lo que se puede conseguir cierta sensación de 3D.
Para borrar una capa 1º selecciona la capa pulsando sobre su nombre, 2º haz clic sobre el icono en forma de papelera (parte inferior izq. de la línea de tiempo)
1. Capas | 3. Organización de las capas
Flash dispone de cinco tipos de capas:
• Normal. Es la capa que has venido utilizando a lo largo de este módulo. Es el tipo predeterminado.
• Guía. Es un tipo especial de capa. En ella se suelen dibujar formas que ayuden a alinear elementos, notas, etc. Esta capa no se incluirá en el archivo final. Su única finalidad es la de ayudar durante el proceso de creación.
• Con guía. Únicamente se podrá utilizar cuando estéasociada a una capa Guía. En ella podrá dibujar la línea de movimiento que seguirá algún elemento de la animación.
• Máscara. Se utiliza para determinar la parte del escenario que se verá (u ocultará). Los elementos que se dibujen en esta máscara serán los que determinarán quése verá en el escenario.
• Con máscara. Capa asociada a la anterior. Los elementos que se coloquen en dicha capa únicamente se verán a través de la máscara creada en la capa anterior.
Flash crea por defecto una capa Normal. Si quieres trabajar con otro tipo de capa, tienes que acceder a sus propiedades, para ello:
1. Haz doble clic sobre en el icono que hay delante del nombre de capa. Flash mostrará el cuadro de diálogo Propiedades de capa.
2. Selecciona el tipo de capa quequieras utilizar y haz clic en Aceptar.
1. Capas | 4. Tipos de capas
41
1. En el menú Archivo, selecciona el comando Nuevo. Flash creará una nueva película.
2. Guárdala bajo el nombre “Capas.fla”.
3. Haz doble clic sobra la Capa 1 y cámbiale el nombre, llámala Fondo.
4. Dibuja un pez (en la capa Fondo). Una vez que lo tengas cópialo varias veces y distribuye la copias por el escenario.
5. Activa el bloqueo ( ) y el contorno ( ) de la capa Fondo.
Hagamos un sencillo ejercicio para ver el funcionamiento de las capas en Flash: Crear un elemento transparente. Para crear un elemento transparente y para poder ver a través suyo, trabajaremos con dos capas normales. Sigue estos pasos:
1. Capas | 5. Trabajar con capas
6. Haz clic sobre el botón Insertar capa quese encuentra en la línea de tiempo.
7. Selecciona la Capa 2 y cámbiale el nombre, llámala Transparente.
8. Selecciona la Herramienta Óvalo y dibuja, en la capa Transparente, un círculo que abarque parte de los peces de
9. Vete a la ventana Color(Menú derecho de paneles) y haz clic sobre el botón de Color de relleno. Escoge un color amarillo.
10. En el desplegable Alfaescribe 50%. (También puedes mover el deslizador del campo Alfa).
la capa Fondo.
42
11. En el Panel Herramientas, selecciona Cubode Pintura.
12. Haz clic sobre el interior del círculo que acabas de dibujar en la pantalla para aplicar los cambios de color.
13. Haz clic sobre el botón Mostrar/Ocultar las capas como contornos que se encuentran en la capa Fondo. Flash volverá a mostrar el relleno de los elementos de dicha capa.
14. Guarda los cambios.
Además hemos cambiado el Color y Estilo del Trazo (del borde) desde el panel Propiedades.
El color del círculo es transparente y permite ver los elementos que se encuentran debajo de él.
La máscara se utiliza para controlar qué parte del contenido verán los usuarios. Por ejemplo, puedes crear una máscara circular para que los usuarios sólo puedan ver a través del área circular y así crear un efecto de cerradura o foco.
Vamos a crear una máscara circular:
1. En el menú Archivo, selecciona el comando Nuevo. Flash creará una nueva película.
2. Guárdala bajo el nombre “mascara.fla”.
3. Haz doble clic sobra la Capa 1 y cámbiale el nombre, llámala “Pez + agua”.
4. Dibuja un pez y un elemento conforma de agua por ejemplo.
Hasta ahora hay una única capa que contiene los elementos de nuestra película (el pez y el agua).
1. Capas | 6. Capa máscara
43
5. Inserta una nueva capa sobre la capa “Pez + agua” y llámala “Máscara”.
6. Haz doble clic sobre el icono que hay delante del nombre de la capa.
Se mostrará el cuadro de diálogo Propiedades de capa.
7. Selecciona Máscara y haz clic en Aceptar.
8. Ahora haz doble clic sobre en el icono que hay delante del nombre de capa de la capa “Pez + agua”. Se mostrará el cuadro de diálogo Propiedades de capa.
9. Selecciona Con máscara y haz clic en Aceptar.
Creamos una capa para la máscara
Convertimos la capa en máscara
Convertimos la capa en una capa enmascarada
La capa inferior se convierte en una capa enmascarada. Aparece desplazada para indicar que se ve afectada por la máscara de la capa superior.
Una vez que hemos preparado las capas, ahora vamos a crear la máscara:
10. Selecciona la herramienta Óvalo.
11. Selecciona la capa superior, Máscara, y dibuja un círculo en el centro del Escenario.
12. Para ver los efectos de la capa de máscara sobre la capa enmascarada bloquea ambas capas (icono en forma de candado). Para ello haz clic sobre el punto de cada capa que se encuentra debajo de este icono, Flash bloqueará los elementos de la capa y sustituirá el punto por un candado.
Resultado: La capa máscara se utiliza para determinar la parte del escenario que se verá. Y los elementos que se coloquen en la capa enmascarada únicamente se verán a través de la máscara creada en la capa superior. 44
– Interpolación de movimiento– Interpolación clásica– Interpolación de forma
4. Interpolación de movimiento
1. Animación por interpolación
2. Papel cebolla
3. Tipos de Interpolación
Índice
Módulo 2.- Dar movimiento • 2. ANIMACIÓN FLASH
4.1. Duración de la interpolación
4.2. Simulación de un bucle cerrado e infinito
Entramos en la animación Flash. La primera aproximación a la animación puede resultar difícil. A pesar de que la mayoría somos espectadores habituales de sus resultados, su práctica no suele formar parte de la formación básica general, como el dibujo.
Los objetivos que persigue este capítulo “Animación Flash” son:
• De forma general, conocer los medios de animación de trazados que utiliza Flash.
• De forma específica, revisar la animación tradicional de dibujos animados utilizando papel cebolla, así como animar trazados estáticos mediante la técnica de Interpolación de movimiento.
45
El alma de cualquier animación es el movimiento. La animación fotograma a fotograma es la que se utilizaba antiguamente en el mundo de la animación.
Los dibujos clásicos de Disney utilizaban esta técnica de animación. Las películas actuales donde los protagonistas son personajes de plastelina, también utilizan este sistema de animación. En ellos, para crear la película se toma una foto del personaje en una posición determinada, a continuación se modifica levemente su posición y se vuelve a hacer otra foto. Este proceso se repite una y otra vez hasta que se cuenta con un número suficiente de fotogramas como para crear una animación.
Sin embargo Flash puede facilitarte la creación de las animaciones. Cuenta con una técnica llamada Interpolación en la que toma un fotograma clave de inicio y otro fotograma clave final y Flash se encarga de calcular los fotogramas intermedios.
2. Animación Flash | 1. Animación por interpolación
Interpolación: Cuando trabajes en la creación de una animación con Flash, bastarácon que te centres en la creación de los elementos que componen los fotogramas clave de la película (imagen: fotograma clave 1 y fotograma clave10). Flash se encargará de generar los fotogramas intermedios (imagen: fotogramas 2, 3, 4, 5, 6, 7, 8 y 9) por medio de la técnica de animación Flash llamada Interpolación.
Si te fijas en la imagen, los fotogramas de la capa “Interpolación” no sólo aparecen teñidos de color sino que además verás que sólo hay definidos dos fotogramas clave: el fotograma 1 y el 10. En el resto de fotogramas aparece una flecha indicando la animación entre el primer y el último fotograma. Así es como Flash representa la animación por interpolación.
Fotograma a fotograma: El Fotograma clave en Flash es aquel donde se define un cambio en la animación. En las animaciones creadas foto a foto, todos los fotogramas que intervendrán serán claves, porque en todos ellos se define algún cambio en la animación.
46
Como vemos en la imagen de la izquierda, el resultado de la animación es el mismo en los dos casos (ya sea utilizando una animación Fotograma a fotograma o utilizando la técnica de Interpolación).
Sin embargo Flash nos ahorra mucho trabajo y tiempo en el caso de la animación por Interpolación ya que sólo hemos tenido que definir dos fotogramas clave (el 1 y el 10), en lugar de los 10 fotogramas clave de la animación Fotograma a fotograma.
ÚltimoFotogramaclave
1erFotogramaclave
Imagen: Movimiento ascendente de una burbuja.
Hemos activado el Papel cebollapara ver la evolución de la animación.
Fotogramaa fotograma
Interpolación
En animación tradicional, se suele utilizar una mesa de luz para comprobar la secuencias de fotogramas. Para ello se colocan varios fotogramas uno sobre otro y se miran a trasluz, con lo que se puede ver la evolución de los movimientos, formas, etc.
Flash proporciona un instrumento especial para este fin: el Papel Cebolla. Con él se pueden ver sobrepuestos los fotogramas anteriores y posteriores a uno dado, y estudiar el desarrollo de la acción entre ellos.
Papel cebolla | Contornos de papel cebolla Puedes establecer el intervalo de fotogramas presentados.
2. Animación Flash | 2. Papel cebolla
47
La creación de animaciones en Flash es uno de sus puntos fuertes. En Flash se pueden crear tres tipos de animaciones interpoladas:
• En la interpolación de forma, una forma parece transformarse en otra. Flash también puede interpolar la ubicación, el tamaño, el color y la opacidad de las formas.
Interpolación de forma
• La interpolación de movimiento nos permite realizar determinados efectos sobre un símbolo a lo largo del tiempo, como por ejemplo la posición (desplazar una figura por el Escenario), el tamaño, el color, etc.
2. Animación Flash | 3. Tipos de interpolación
• La interpolación clásica es muy parecida a la interpolación de movimiento. Tiene algunas diferencias y algunas opciones más.
1. En el menú Archivo, selecciona el comando Nuevo. Flash creará una nueva película.
2. Guárdala bajo el nombre “Interpolacion_movimiento.fla”.
3. Dibuja un pez sencillo, fuera del escenario, en el lado derecho.
4. Selecciona todo el pez, vete a Modificar > Convertir en símbolo. En el cuadro de diálogo que se abre Convertir en símbolo, deja Símbolo 1 (predeterminado) como nombre y selecciona Gráfico como Tipo. Haz clic en Aceptar.
Para la interpolación de movimiento será necesario convertir los elementos que intervengan en la interpolación en símbolos. Veamos un ejemplo guiado como explicación:
2. Animación Flash | 4. Interpolación de movimiento
48
5. Selecciona el símbolo (haz un clic sobre él) y selecciona Insertar (menú principal) > Crearinterpolación de movimiento.
Verás que Flash añade algunos fotogramas automáticamente (la duración de la interpolación dependerá del número de fotogramas por segundo que hayamos asignado a la película) y que estos fotogramas son de color azul indicando así que hay aplicada una interpolación de movimiento.
6. Desplaza la cabeza lectora hasta el último fotograma en la línea de tiempo.
Cabeza lectora
Automáticamente Flash marca el último fotograma como Fotograma clave, y crea una línea o guía de movimiento entre la primera y la última posición que acabamos de darle al pez.
7. Mueve el pez hasta el lado opuesto del área de trabajo, fuera del escenario (selecciónalo, y sin soltarlo, arrástralo).
Fotograma clave
Guía de movimiento
En la Interpolación de movimiento, Flash crea una línea o guía de movimiento entre los fotogramas clave.
49
8. Vamos a reproducir la película:
• Haz clic en el menú Archivo.
• Selecciona Vista previa de publicación > Flash.
– seleccionando Reproducir en el menú Control (también puedes pulsar la tecla “Intro”),
– o publicando una vista previa de nuestra película:
Antes de continuar, vamos a ver cómo se está desarrollando nuestro trabajo. Cuandocreamos películas animadas en Flash, es muy importante comprobar constantemente el resultado de la animación.
9. Coge la Herramienta Selección del panel Herramientas y curva la línea o guía de movimiento arrastrándola hacia arriba.
Si todo ha ido bien, al probar la película, debemos ver que el pez entra en escena por el lado derecho de la pantalla, y sale de escena por el lado izquierdo de la pantalla. El movimiento es muy simple, ya que el pez se mueve en línea recta.
Para crear la sensación de que el pez nada con un movimiento ondulante de agua, vamos a manipular la línea o guía de movimiento que Flash ha creado automáticamente entre la primera y la última posición de la animación. Primeramente vamos a curvarla. Para ello:
Podemos modificar una interpolación de movimiento trabajando directamente sobre su línea o guía de movimiento, sin necesidad de crear ni de manipular los fotogramas del panel Línea de tiempo.
Arrastra la línea o guía de movimiento hacia arriba.
50
10. Crearemos un nuevo Fotograma clave en la mitad de la interpolación. Para ello desplaza la Cabeza lectora de la línea de tiempo hasta un fotograma intermedio de la animación (quedaría en el fotograma 13).
11. Con la herramienta Selección, haz clic sobre el pez, y sin soltar el botón del ratón, arrastra el pez hacia abajo. Suelta.
AutomáticamenteFlash marca el fotograma 13 como Fotograma clave, y modifica la línea de movimiento.
Así dará la sensación de que el pez nada con un movimiento ondulante de agua.
12. Reproduce la película o publica una vista previa para ver el resultado.
13. Guarda los cambios.
Vamos a seguir manipulando la línea o guía de movimiento para terminar de crear la sensación de movimiento ondulante:
4.1. Duración de la interpolación
La duración de las interpolaciones dependerá del número de fotogramas por segundo que hayamos asignado a la película. De forma predeterminada Flash asigna a la película 24 fotogramas por segundo, por lo tanto obtendremos 24 fotogramas al crear una interpolación.
Para modificar la duración de una interpolación basta con arrastrar la parte final de la misma en la línea de tiempo, o bien hacia la izquierda (acortando el número de fotogramas y por lo tanto acelerando la animación) o bien hacia la derecha (aumentandoel número de fotogramas y por lo tanto ralentizando la animación).
Por lo tanto, para ralentizar o acelerar la velocidad de una interpolación, no es necesario modificar el número de fotogramas por segundo de la película, sino que debéis modificar la propia línea de tiempo de la interpolación.
Duración de la interpolación 51
4.2. Simulación de un bucle cerrado e infinito
• Así, por ejemplo, para simular el movimiento de un pez por el acuario esimportante que la animación del pez empiece fuera del Escenario, a la derecha del área de trabajo por ejemplo, y que la animación termine también fuera del Escenario,en el lado opuesto del área de trabajo, es decir a la izquierda (o viceversa). De esta forma conseguiremos crear un bucle cerrado e infinito.
• En el caso de que el loop se de dentro del escenario (por ejemplo unas algas que se mueven), o dentro de un símbolo Clip de película (como la aleta trasera del pez que veremos más adelante) es importante que el primer y último fotograma de la animación sean iguales.
La simulación de un bucle cerrado o infinito, o loop, es un recurso muy utilizado en Flash. Dicho loop es una secuencia animada, de tal forma que al terminar vuelve a iniciarse y así un sinfín de veces, dando la impresión de una animación continua e interminable.
Así, cuando Flash llega al final de la animación de la línea de tiempo y vuelve a reproducirse, es decir, vuelve al fotograma 1 para volver a empezar la animación, no hay un salto en la posición de la animación, sino que la animación es continua.
52
– Gráfico– Botón– Clip de película
Índice
1. Uso de símbolos
2. Tipos de símbolos
3. Instancias de los símbolos
4. Duplicar símbolos
5. Símbolo Gráfico
6. Símbolo Clip de película I
7. Símbolo Clip de película II
Módulo 2.- Dar movimiento • 3. SÍMBOLOS
Los símbolos son unas de las piezas fundamentales de la animación con Flash y su empleo es imprescindible para aplicar algunas técnicas como la interpolación de movimiento.
Los objetivos que persigue este capítulo “Símbolos” son:
• De forma general, entender la importancia de los símbolos.
• De forma específica, conocer los distintos tipos de símbolos y capacitar al alumno para crearlos y utilizarlos en las animaciones Flash.
53
Para entender los símbolos, antes vamos a aprender a manejar tres conceptos fundamentales en Flash: los símbolos, las instancias y la biblioteca de símbolos.
• Símbolo: Un símbolo puede ser un dibujo, una imagen, un botón, o una pequeña película animada. A la hora de trabajar, lo habitual es crear un símbolo cuando sepamos que vamos a volver a utilizarlo varias veces en la misma película (o en otra distinta).
Para aprovechar las ventajas del empleo de los símbolos, es fundamental diseñarlos correctamente para intentar reutilizarlos siempre que sea posible. En este sentido, es muy importante dedicar tiempo a estudiar cómo se van a usar y las implicaciones que ello tiene en su diseño.
3. Símbolos | 1. Uso de símbolos
• Instancia: Las instancias son copias de un símbolo. Es decir, al crear instancias de un símbolo, lo que estamos creando son copias de un símbolo original. Una vez creado el símbolo, podemos utilizar todas las copias del símbolo que necesitemos en el transcurso de la película.
Como las instancias son copias del símbolo original, si modificamos el símbolo original todas las instancias de ese símbolo mostrarán también automáticamente los cambios realizados.
Una de las principales ventajas que tienen las instancias es que no ocupan prácticamente nada ya que son copias del símbolo original. Esto permite reducir notablemente el tamaño de las películas, lo que es esencial para algunas aplicaciones como el uso de Flash en la Web.
Por ejemplo: Supongamos que vamos a crear una escena con un banco de peces. Dibujamos un pez, lo convertimos en un símbolo (que automáticamente se inserta en la Biblioteca) y hacemos varias copias del mismo pez para que parezca que hay un banco de peces. ¿Cuánto crees que ocupa todo esto? Ocupa aproximadamente lo que ocupe un único pez, nuestro pez original.
• Biblioteca de símbolos: Los símbolos se almacenan automáticamente en la Biblioteca (panel Biblioteca) y estarán disponibles para posteriormente ser utilizados.
Para incluir un símbolo en algún lugar de la película solo hay que seleccionarlo en la Biblioteca y arrastrarlo hasta el Escenario.
54
• Gráfico (Graphic): Se utiliza para las imágenes estáticas y para crear animaciones asociadas a la línea de tiempo principal. Los controles y sonidos interactivos no funcionan en un símbolo Gráfico.
• Botón (Button): Permite la interactividad en las películas, donde se pueden agregar una serie de instrucciones o acciones que el usuario podrá utilizar generando un evento. Está constituido por cuatro fotogramas (reposo, sobre,presionado y zona activa).
• Clip de película (Movie Clip): Los símbolos Clip de película tienen su propia línea de tiempo de varios fotogramas, independiente de la línea de tiempo principal. Pueden contener otros símbolos clip de película, botones o gráficos, consiguiendo de esta manera objetos de mayor complejidad e interacción superior. Además, se pueden ejecutar scripts para los clip de película en ActionScript.
Hay tres tipos de símbolo:
Flash permite crear tres tipos de símbolos, cada uno de los cuales tiene unas características determinadas:
3. Símbolos | 2. Tipos de símbolos
Veamos su funcionamiento a través de un ejercicio guiado:
4. Copia el símbolo:
– Selecciónalo en la Biblioteca y arrástralo hasta el Escenario.
– O bien cópialo (Ctrl+c) y pégalo (Ctrl+v) .
1. En el menú Archivo, selecciona el comando Nuevo. Flash creará una nueva película.
2. Guárdala bajo el nombre “instancias_simbolos.fla”.
3. Dibuja un pez y conviértelo en un símbolo: Selecciona todo el pez, vete a Modificar > Convertir en símbolo. En el cuadro de diálogo que se abre Convertir en símbolo,deja Símbolo 1 (predeterminado) como nombre y selecciona Gráfico como Tipo. Haz clic en Aceptar.
Las instancias son copias de símbolos que se encuentran presentes en el Escenario. Un símbolo actúa como un molde, y a partir de él todas las copias que hagamos serán iguales. Cada vez que se edita y modifica un símbolo, automáticamente todas las instancias que dependen de él cambiarán su aspecto.
3. Símbolos | 3. Instancias de los símbolos
55
5. Una vez que hemos copiado el símbolo, vamos a editarlo. Para ello haz doble clicsobre una de sus instancias, la de la izquierda por ejemplo.
Ahora estamos “dentro” del símbolo Pez verde.
6. Una vez dentro del símbolo vamos a cambiarle el color. Empezaremos cambiando el color del cuerpo por amarillo.
Todos los elementos de la página que no forman parte del símbolo aparecerán atenuados (fíjate en el pez derecho de la imagen), lo que indica que no se puede acceder a ellos.
Verás que a medida que cambias el color, las demás instancias del símbolo también cambian de color automáticamente.
Pestaña Escena 1
7. Ahora “sal fuera” de la edición del símbolo, para regresar a la película.
Para ello haz clic sobre el icono de la flecha Paso anterior, o haz clic en la pestaña Escena 1, en la barra situada sobre el Escenario.
La edición del símbolo cambia el prototipo de la biblioteca y provoca el cambio de todas las apariciones del símbolo (instancias) en la película.
Flecha Paso anterior
Los símbolos se pueden editar, pero sus cambios son globales.
8. Guarda los cambios.
56
Sin embargo, a las instancias de los símbolos se les puede aplicar ciertas modificaciones sin que esto afecte al símbolo guardado en la biblioteca.
En particular, las instancias de símbolos se pueden escalar, sesgar y girar; se les puede aplicar Efectos de color, Filtros, etc. Para esto NO se edita el símbolo, es decir, no nos “metemos dentro” de él, sino que lo hacemos desde “fuera del símbolo”.
En la imagen hemos aumentado de tamaño el pez de la derecha y además lo hemos girado, todo ello con la herramienta Transformación libre (Q).
Las instancias de símbolos se pueden modificar localmente.
Con la herramienta Transformación libre (Q) se puede escalar, sesgar y girar una figura.
3. Símbolos | 4. Duplicar símbolos
Flash nos da la opción de duplicar un símbolo. Si por ejemplo necesitamos crear un nuevo símbolo que tiene partes en común con el original, podemos duplicar el símbolo, de esta forma los cambios que realicemos en el nuevo símbolo no tendrán ningún efecto en el primero. Hay dos formas de duplicar un símbolo:
1. Selecciona la opción Duplicar (clic derecho sobre el propio símbolo que hay en la Escena). Introduce un nombre para el nuevo símbolo en el cuadro de diálogo que aparece y pulsa el botón Aceptar. Este nuevo símbolo aparecerá automáticamente dentro de la Biblioteca.
2. Seleccionando la opción Cambiar nombre (clic derecho sobre el símbolo almacenado en la Biblioteca) podremos renombrar el símbolo seleccionado. De esta forma también estamos duplicando el símbolo y por lo tanto creando un símbolo nuevo y diferente. Los cambios que realicemos en el nuevo símbolo no tendrán ningún efecto en el primero.
También puedes duplicar el símbolo accediendo desde el panel Propiedades > Intercambiar > Duplicar símbolo (haz clic sobre su icono , del cuadro de diálogo emergente).
57
Los símbolos gráficos suelen contener imágenes u objetos. Pueden tener animación, pero en vez de ser una animación independiente, como la de los símbolos Clip de película, su movimiento está relacionado con la línea de tiempo principal de la película.
A la hora de elegir el tipo de símbolo adecuado para una animación, debemos decidir si éste será un símbolo Gráfico o si será un símbolo Clip de película.
Si eliges el símbolo Gráfico:
3. Símbolos | 5. Símbolo Gráfico
• La animación del símbolo sigue el mismo ritmo que el de la línea de tiempo principal.
De tal forma que si incluyes una animación dentro de un símbolo Gráfico de 50 fotogramas por ejemplo, en la línea de tiempo principal deberás dejar también 50 fotogramas, que es lo que dura la animación del símbolo Gráfico, para poder visualizar la animación.
• Los controles y sonidos interactivos no funcionan en un símbolo Gráfico.
3. Dibuja un pez. Selecciónalo y vete a Modificar > Convertir en símbolo. En el cuadro de diálogo introduce Pez1 comonombre y selecciona Clip de película como Tipo.Haz clic en Aceptar.
1. En el menú Archivo, selecciona el comando Nuevo. Flash creará una nueva película.
2. Guárdala bajo el nombre “clip_de_pelicula-1.fla”.
Veamos su funcionamiento a través de un ejercicio guiado:
Un símbolo Clip de película es, en muchos aspectos, como un documento dentro de otro documento, ya que puede contener dentro de sí otros símbolos clip de película, botones, gráficos, audio, etc. Este tipo de símbolos tiene una línea de tiempo propia, independiente de la línea de tiempo principal.
3. Símbolos | 6. Símbolo Clip de película I
Pez1
Clip de película
Aceptar
Convertir en símbolo
58
Una vez creado el símbolo Clip de película, vamos a editarlo y establecer un ciclo de animación interno: el movimiento de la aleta trasera.
Ciclo animación interno
4. Haz doble clic sobre el pez para editarlo.
Dentro del clip Pez1
5. Una vez dentro, selecciona la aleta trasera del pez, y pégala en una nueva capa. Renombra la nueva capa como “Aleta Pez1”.
6. Convierte la aleta trasera del pez en un símbolo Gráfico: Modificar > Convertir en símbolo. Introduce AletaPez1 como nombre y selecciona Gráfico como Tipo. Haz clic en Aceptar.
7. Una vez convertido en un símbolo Gráfico, vamos a animarlo, para ello: haz clic sobre el símbolo AletaPez1 para seleccionarlo, y vete a Insertar > Crearinterpolación de movimiento. Verás que Flash añade algunos fotogramas automáticamente en la capa donde se encuentra la aleta y que éstos son azules.
Aleta Pez1Capa 1
LÍNEA DE TIEMPO
La duración de la interpolación dependerá del número de fotogramas por segundo que hayas asignado a la película. Si la película tiene 24 fotogramas por segundo, por ejemplo, obtendrás 24 fotogramas al crear la interpolación. Para modificar la duración de una interpolación basta con arrastrar la parte final de la misma en la línea de tiempo.
8. Arrastra la parte final de la línea de tiempo hasta el fotograma 40.59
9. Ve creando los distintos fotogramas clave hasta completar el movimiento de la aleta.
Aleta: posición horizontal girada hacia arriba posición horizontal girada hacia abajo posición horizontal
Como la posición de la aleta es la misma en los fotogramas 1, 20 y 40, es decir, los fotogramas 1, 20 y 40 son iguales, vamos a copiar el fotograma 1 y pegarlo en los fotogramas 20 y 40 de la línea de tiempo. Así nos ahorramos trabajo.
Para ello:
• Copiar propiedades
1) Con la tecla Ctrl pulsada, haz clic en el Fotograma clave 1. Verás que el fotograma se queda de un color azul más oscuro indicando que está seleccionado.
2) Haz clic con el botón derecho del ratón sobre el Fotograma clave 1 seleccionado y escoge la opción “Copiar propiedades” del menú contextual.
3) Luego basta desplazarse hasta otro punto de la línea de tiempo, seleccionar un nuevo fotograma (por ejemplo el 20) y pegarlo. Para ello, con la tecla Ctrl pulsada,haz clic en el fotograma 20. Verás que el fotograma se queda de un color azul más oscuro indicando que está seleccionado.
4) Haz clic con el botón derecho del ratón sobre el fotograma 20 seleccionado y escoge la opción “Pegar propiedades” del menú contextual. Automáticamente Flash marca un Fotograma clave.
Fotograma clave 1 seleccionado
Fotograma 20 seleccionado
60
10. Alarga la línea de tiempo de la capa inferior. Para ello selecciona el último fotograma en blanco de la Capa 1 y pulsa la tecla F5 (Insertar Fotograma).
11. Sal del modo edición para regresar a la película. Haz clic en la pestaña Escena 1, en la barra situada sobre el Escenario.
12. Publica una vista previa de la película para ver el resultado: Haz clic en el menúArchivo y selecciona Vista previa de publicación > Flash.
13. Guarda los cambios.
BUCLE CERRADO E INFINITO
En el caso de que el bucle o loop se de dentro del escenario (por ejemplo unas algas que se mueven), o dentro de un símbolo Clip de película (como la aleta trasera del pez) es importante que el primer y último fotograma de la animación sean iguales.
Es muy importante que la posición de la aleta en el primer fotograma (1) y en el último fotograma (40) de la animación sea la misma. Así, de esta forma, cuando Flash llega al final de la animación de la línea de tiempo (fotograma 40) y vuelve a reproducirse, es decir, vuelve al fotograma 1 para volver a empezar la animación, no habrá un salto en la posición de la animación, sino que la animación será continua.
• Resumen: Hemos establecido un ciclo de animación interno: el movimiento de la aleta trasera.
1º Hemos creado un símbolo Clip de película con el dibujo del pez, y lo hemos llamado Pez1.
2º Después lo hemos editado (doble clic) y hemos animado la aleta traseradel pez. Para la interpolación de movimiento ha sido necesario convertir la aleta en un símbolo (en este caso un símbolo Gráfico).
1º 2º
61
Podemos combinar el movimiento interno del pez (el movimiento de la aleta trasera), con un movimiento de traslación de todo el pez en su conjunto.
Translación de todo el pez.
Animación interna de la aleta.
A la vez que el pez mueve la aleta trasera, también se desplaza.
Se combina el ciclo interno y la traslación externa del clip Pez1.
Y además…
3. Símbolos | 6. Símbolo Clip de película II
1. Abre el archivo “Clip_de_pelicula-1.fla” y guárdalo con otro nombre. Llámalo: “Clip_de_pelicula-2.fla”.
2. Selecciona el símbolo Clip de película Pez1 que aparece en pantalla y muévelo fuera del escenario, a la derecha del área de trabajo.
Repite el mismo proceso que hemos seguido para la Interpolación de movimiento. Trabajarás con el símbolo Clip de película “Pez1” que has creado anteriormente. Elhecho de que el clip contenga una animación interna no afecta a la hora de trabajar.
Fuera del escenario, a la derecha del área de trabajo.
3. Haz clic sobre él y vete a Insertar (menú principal) > Crear interpolación de movimiento. Verás que Flash añade algunos fotogramas automáticamente. 62
Automáticamente Flash marca el último fotograma como Fotograma clave, y crea una línea o guía de movimiento entre la primera y la última posición de la animación.
Desplaza la cabeza lectora hasta el último fotograma en la línea de tiempo, y mueve el pez hasta el lado opuesto del área de trabajo, fuera del escenario.
4.
BUCLE CERRADO E INFINITO
Tened cuidado con las apariciones y desapariciones repentinas enpantalla de los elementos animados.
En el caso de simular el movimiento de traslación del pez por el acuario, la manera más sencilla de hacerlo es que la animación del pez empiece fuera del Escenario, a la derecha del área de trabajo por ejemplo, y que la animación termine también fuera del Escenario, en el lado opuesto del área de trabajo, es decir a la izquierda (o viceversa).
De esta forma no habrá apariciones y desapariciones repentinas en pantalla de los elementos animados y conseguiremos crear la sensación de un bucle cerrado e infinito.
5. Manipula esta línea de movimiento: Cúrvala con la Herramienta Selección (comohemos visto anteriormente).
6. Crea un nuevo Fotograma clave en la mitad de la interpolación. Para ello posiciona el marcador en el fotograma 13 y mueve el pez a una nueva posición.
7. Publica una vista previa para ver el resultado: Haz clic en el menú Archivo y selecciona Vista previa de publicación > Flash.
8. Guarda los cambios.
63
Índice
Módulo 2.- Dar movimiento • 4. SONIDO
1. Los sonidos en Flash
2. Añadir sonidos
3. Eliminar un sonido
4. Sonidos en la línea de tiempo
5. Sincronización del sonido
En este capítulo conocerás los distintos métodos de inserción de sonido en un proyecto.
Los objetivos que persigue este capítulo “Sonido” son:
• De forma general, conocer el tratamiento del sonido en Flash.
• De forma específica, insertar sonido de fondo en nuestro proyecto del acuario.
64
4. Sonido | 1. Los sonidos en Flash
Flash puede insertar y manipular efectos sonoros dentro de las películas. Los sonidos se utilizan de 2 maneras distintas:
• Mediante la línea de tiempo: se puede insertar un sonido en una capa de la línea de tiempo y controlarlo mediante fotogramas clave.
• Asociados a eventos y botones: se puede asociar los sonidos para que se reproduzcan o se detengan al interactuar con un botón o al controlarlos con ActionScript.
Con la idea de OPTIMIZAR LA PUBLICACIÓN, lo primero que debemos tener en cuenta a la hora de trabajar con archivos de sonido es su tamaño y sus características. Al igual que pasa con las imágenes, en algunos momentos es interesante perder algo de calidad si el tamaño de la película Flash se reduce significativamente. Es muy importante conseguir que nuestra película tenga un tamaño reducido. El formato MP3 es el más se comprime, utilízalo siempre que sea posible.
4. Sonido | 2. Añadir sonidos
Para insertar un archivo de sonido en Flash selecciona la opción Archivo > Importar > Importar a biblioteca y escoge el sonido que vayas a insertar. Al importar un sonido éste se introduce como un elemento de la biblioteca de símbolos.
4. Sonido | 3. Eliminar un sonido
Para borrar un sonido de la biblioteca de símbolos selecciona el símbolo de sonido y pulsa en el icono Eliminar (en forma de papelera) en la parte inferior del panel Biblioteca. Al eliminar un símbolo de la biblioteca, en este caso un sonido, se eliminarán también todas las instancias de éste existentes en la escena.
BIBLIOTECAEn la imagen de la derecha puedes ver varios archivos de audio en la biblioteca. Al seleccionar algún archivo, se mostrará en la parte superior la forma de onda del sonido. Puedes pulsar el botón de reproducción para escucharlo.
Botones de reproducción
65
4. Sonido | 4. Sonidos en la línea de tiempo
Puedes utilizar un sonido de fondo para tu acuario. Después de insertar el sonido en la biblioteca comenzaremos a trabajar con él.
Para añadir un sonido en la escena, crea una capa que contendrá el sonido y arrastra el archivo desde la biblioteca hasta la escena. Verás que en los fotogramas de la línea de tiempo aparecerá una representación del sonido que se extenderá hasta que éste acabe o hasta que se terminen los fotogramas que hayas insertado en la escena.
Al probar la película (Ctrl+Intro) verás la escena (con los gráficos y animaciones pertinentes) al mismo tiempo que comienza a sonar el audio. Cuando la película llega al final comienza a reproducirse de nuevo, al igual que el sonido.
Para que el panel Propiedades muestre las propiedades del sonido es necesario seleccionar algún fotograma en la línea de tiempo que contenga dicho sonido.
Si por ejemplo no te ha gustado cómo ha quedado el efecto del sonido y quisieses eliminar el sonido de la escena (que no de la película) basta con eliminar la capa en la que esté insertado el sonido. Recuerda que no hemos borrado el sonido de la biblioteca de símbolos, simplemente hemos eliminado una instancia del sonido presente en la escena.
4. Sonido | 5. Sincronización del sonido
La última decisión que debemos tomar al insertar un sonido se refiere a cómo se debe reproducir el sonido respecto a los fotogramas clave de la película. Este parámetro se selecciona desde la opción Sincronizar del panel Propiedades. Flash nos ofrece varias opciones:
• Evento: Es la opción predefinida. El sonido comienza al mismo tiempo que la película o en el fotograma en que lo hayamos insertado y se reproduce completamente, aunque la película se detenga. Esta opción es muy útil a la hora de asignar sonido a un botón.
• Inicio: Similar a Evento, pero antes de reproducirse el sonido, se comprueba que no haya otra instancia de ese mismo sonido reproduciéndose. En el caso de que sí la haya no se reproduciráel sonido hasta que no concluya la otra.
• Detener: Al llegar a un fotograma clave con sincronización Detener, el sonido del canal se parará.
• Flujo: Este efecto es útil a la hora de reproducir archivos de sonido muy grandes, como por ejemplo una canción. Flash reproducirá la película a la velocidad adecuada para que la música vaya al mismo ritmo que la animación. Es especialmente valioso cuando ejecutamos una película desde Internet. Si la película se para porque no se han cargado todos sus elementos, también lo hace el sonido que esperará el momento de poder continuar.
Esta es la opción que utilizaremos en el caso de utilizar un sonido de fondo para el acuario.
66
M2.- Dar movimiento / RESUMEN
Las capas se encuentran en la parte izquierda del panel Línea de Tiempo.
Como norma general el método de trabajo más adecuado es utilizar una primera capa como fondo (en la que colocaremos los elementos estáticos) y después crear una nueva capa para cada elemento relevante.
Flash dispone de 5 tipos de capas: Normal, Guía / Con Guía, Máscara / Con Máscara.
La capa Máscara se utiliza para controlar qué parte del contenido verán los usuarios.
En Flash se pueden crear tres tipos de animaciones interpoladas: interpolación de movimiento, interpolación clásica e interpolación de forma.
Interpolación de movimiento: Para la interpolación de movimiento será necesario convertir los elementos que intervengan en la interpolación en símbolos.
1.
2.
• Copiar propiedades: A la hora de animar con la técnica Interpolación de movimiento, podemos copiar y pegar fotogramas en la línea de tiempo de la animación. De esta forma nos ahorramos trabajo y tiempo. Basta con copiar un fotograma (Copiar propiedades) y luego desplazarse hasta otro punto de la línea de tiempo, seleccionar un nuevo fotograma y pegarlo (Pegar propiedades).
Los símbolos se almacenan automáticamente en la Biblioteca (panel Biblioteca)
Las instancias son copias de un símbolo. No ocupan prácticamente nada ya que son copias del símbolo original. Esto permite reducir notablemente el tamaño de las películas.
Cada vez que se edita y modifica un símbolo, automáticamente todas las instancias que dependen de él cambiarán su aspecto.
Podemos duplicar un símbolo si necesitamos crear un nuevo símbolo que tiene partes en común con el original. De esta forma, al duplicar el símbolo, los cambios que realicemos en el nuevo símbolo no tendrán ningún efecto en el primero.
Flash permite crear 3 tipos de símbolos, cada uno de los cuales tiene unas características determinadas: Gráfico, Botón y Clip de película.
3.
Los símbolos Clip de película tienen su propia línea de tiempo de varios fotogramas, independiente de la línea de tiempo principal. Pueden contener otros símbolos clip de película, botones o gráficos, consiguiendo de esta manera objetos de mayor complejidad e interacción superior.
Bucle cerrado e infinito: Para que una animación sea continua, es importante que el primer y último fotograma de la animación sean iguales.
67
Para añadir un sonido en la escena, crearás una capa que contendrá el sonido y arrastrarás el archivo desde la biblioteca hasta la escena.
Tipos de sincronización para reproducir el sonido respecto a los fotogramas clave de la película: Evento, Inicio, Detener y Flujo.
Los sonidos se utilizan de 2 maneras distintas: Mediante la línea de tiempo yAsociados a eventos y botones.
Compresión del sonido: a la hora de trabajar con archivos de sonido lo primero que debemos tener en cuenta es su tamaño y sus características.
4.
Insertar un archivo de sonido en Flash: Selecciona la opción Archivo (menúprincipal) > Importar > Importar a biblioteca y escoge el sonido que vayas a insertar.
Eliminar un sonido: Selecciona el símbolo de sonido y pulsa en el icono Eliminar en la parte inferior de la biblioteca.
68
69
Módulo 3: Interactividad básica
1. Botones
2. Uso de acciones
3. Aplicación interactiva
4. Publicar una película
5. Resumen
70
Índice
1. Introducción
2. Crear un botón sencillo
3. Crear un botón con varios estados
4. Botones animados
5. Incorporar sonidos a los botones
Módulo 3.- Interactividad básica • 1. BOTONES
En este módulo nos adentramos en otro aspecto que supone una importante contribución de Flash al mundo del diseño: la integración de la interactividad en las películas.
Los objetivos que persigue este capítulo “Botones” son:
• De forma general, capacitar al alumno para crear elementos interactivos.• De forma específica, aprender a crear diferentes tipos de botones, incorporar
sonidos a los botones creados.
71
El botón es el protagonista indiscutible de todos los eventos multimedia. Representa el medio más sencillo de interactuación del usuario con el medio. Con Flash puedes utilizar cualquier forma, cualquier gráfico para crear un botón. De esta forma podrás integrar los botones en la animación.
Flash incluye una biblioteca con botones:
En Ventana (Menú principal) > Bibliotecas comunes
> Botones
Los botones son el tercer tipo de símbolos que se consideran en Flash. No se han tratado hasta ahora porque están directamente relacionados con la interactividad, que es el tema de este módulo.
1. Botones | 1. Introducción
3. Selecciona la Herramienta Rectángulo quese encuentra en el Panel Herramientas. Vete al Panel Propiedades y arrastra la barra en el campo de radio de esquina del cuadro de diálogo Opciones de rectángulo hasta 40.
4. Dibuja el rectángulo en el escenario. Con el radio que le has dado, Flash dibujará un rectángulo con los extremos redondeados, como el de la figura.
Sigue estos pasos para ver cómo crear un botón sencillo:
1. En el menú Archivo, selecciona el comando Nuevo. Flash creará una nueva película.
2. Guárdala bajo el nombre “Boton_sencillo.fla”.
1. Botones | 2. Crear un botón sencillo
72
5. Vete al menú Insertar > Convertiren símbolo, y escribe Boton1 enel campo nombre e indica que el Tipo de símbolo es un Botón.
6. Haz clic sobre el botón Aceptar.
Flash dibujará un cuadrado azul sobre el rectángulo del escenario, indicando así que lo ha convertido en un símbolo. (Además se guardaráautomáticamente en el panel Biblioteca).
Una vez creado el elemento que se convertirá en un botón, tendrás que proceder a definirlo como tal.
Para ello:
Aparentemente, el símbolo que aparece en pantalla no se diferencia en nada de otros símbolos que has ido creando a lo largo del curso. De hecho, no hay nada que indique a simple vista que se trata de un botón. Para verlo, tendrás que probar la película:
En el momento que colocamos el cursor sobre el botón, Flash
transforma el puntero y lo convierte en una mano.
7. Utiliza el comando Control > Probar película, o la combinación de teclas: Control+Intro.
8. Guarda los cambios.
73
1. Abre el archivo “Boton_sencillo.fla”. Guárdalo con otro nombre, en Archivo > Guardar como…. Llámalo: “Boton_multiestado.fla”.
2. Haz doble clic sobre el botón que aparece en la pantalla. Flash pasará a modoedición:
Reposo | Sobre | Presionado | Zona activa
Observa la línea de tiempo. No tiene el mismo aspecto que las líneas de tiempo que has visto en otras animaciones. En realidad, los fotogramas no están numerados, sino que cada uno tiene su propia etiqueta: Reposo, Sobre, Presionado y Zona activa.
El símbolo Botón está constituido por cuatro fotogramas o estados: Reposo, Sobre, Presionado y Zona activa. Cuando se habla de estado se hace referencia a los distintos aspectos que puede mostrar un botón. Veamos un ejemplo práctico:
1. Botones | 3. Crear un botón con varios estados
• Reposo. Esta imagen será la que mostrará el botón cuando estéinactivo.
• Sobre. Imagen que mostrará la película en el momento que el usuario pase el cursor por encima del botón.
• Presionado. Aspecto que tendrá el botón cuando el usuario haga clic sobre él. En concreto, la apariencia que tendrá mientras esté pulsado.
• Zona activa. En este estado, tendrás que definir el área del botón que puede utilizar el usuario. Es decir, tendrás que determinar la zona en la que se puede hacer clic dentro del botón.
Las cuatro etiquetas se corresponden con los cuatro estados que puede tener el botón:
74
3. Crea un fotograma clave en cada estado del botón: Pulsa la tecla F6 para insertar un fotograma clave.
4. Copia y pega el rectángulo en cada estado del botón, cámbiales el color, y escribe con la Herramienta Texto los estados en cada fotograma correspondiente.
La Zona activa no es visible, así que sólo será necesario definir la zona en la que se puede hacer clic dentro del botón.
Vamos a pasar a crear los cuatro estados del botón:
5. Cierra el modo edición de Flash. Para ello, haz clic sobre el vínculo Escena 1 que se encuentra bajo la Línea de tiempo.
6. Para probar el funcionamiento del botón, en la barra del Menú principal, selecciona Control > Probar película (o la combinación de teclas: Control+Intro). Flash pasará a modo prueba. Observa que cambia el aspecto del botón cuando se pasa el cursor sobre él y cuando se presiona.
7. Guarda los cambios.
75
REPOSO SOBRE PRESIONADO ZONA ACTIVA
Con Flash puedes utilizar cualquier forma o gráfico para crear un botón. De esta forma puedes integrar los botones en la animación.
Por ejemplo, para el acuario podemos crear un símbolo Botón en forma de cofre y definir los cuatro estados del botón de la siguiente manera:
– Fotograma Reposo: dibujo del cofre cerrado.– Fotograma Sobre: dibujo del cofre abierto.– Fotograma Presionado: dibujo del cofre abierto + forma de color amarillo con alfa
simulando el brillo del oro.– Fotograma Zona activa: forma cuadrada que abarca la figura del cofre (recuerda que
la Zona activa define la zona en la que se puede hacer clic sobre el botón).
EJEMPLO / Botón en forma de cofre
Al igual que en los símbolos Clip de película, puede haber otros símbolos (como un Clip de película animado) dentro de la línea de tiempo de un símbolo Botón para crear botones animados.
Hay 2 maneras de hacerlo: O bien creas un símbolo Botón y colocas un símbolo Clip de película animado dentro del botón. O bien creas un Clip de película animado y lo conviertes en un símbolo Botón. Por ejemplo, para el segundo caso:
Verás el pez que se mueve. Y en el momento que colocas el cursor sobre el pez (al que has convertido en un símbolo Botón) Flash transforma el puntero y lo convierte en una mano indicando así que es un botón.
1. Botones | 4. Botones animados
1. Crea un símbolo Clip de película animado, por ejemplo un pez con un ligero movimiento oscilante de arriba abajo (un bucle).
2. Selecciona el símbolo Clip de película animado del pez que aparece en pantalla y ve al menú Insertar > Convertir en símbolo, e indica que el Tipo de símbolo es un Botón.Haz clic sobre el botón Aceptar.
3. Publica una vista previa para ver el resultado: Haz clic en el menú Archivo y selecciona Vista previa de publicación > Flash.
Mediante la utilización de clips de película se puede conseguir que un botón realice un movimiento cíclico aunque la película no se esté moviendo. 76
Aparte de los efectos visuales, los botones pueden incorporar sonidos. Su implementación es muy sencilla. Bastará con seguir estos pasos.
1. Crea una película nueva.
2. Guárdala bajo el nombre “Boton_con_sonido.fla”.
3. Utiliza uno de los botones que Flash incluye en la biblioteca del programa. En Ventana(Menú principal) > Bibliotecas comunes > Botones.
4. En la ventana de diálogo que se abre, selecciona un botón que te guste y arrástralo (sin soltar el botón del ratón) hasta el escenario.
5. Haz doble clic sobre él para acceder al modo edición.
6. Crea una nueva capa y llámala “sonido”.
7. Selecciona el fotograma Presionado de esta nueva capa “sonido” y pulsa la tecla F6para insertar un Fotograma clave.
1. Botones | 5. Incorporar sonidos a los botones
Flash también incluye sonidos en la biblioteca del programa. Vamos a utilizarlos. Para ello:
8. Selecciona Ventana (Menú principal) >Bibliotecas comunes > Sonidos.
9. En la ventana de diálogo que se abre, selecciona el sonido “Liquid Water Dripping Single 01.mp3”y arrástralo a la Biblioteca de símbolos de la película.
10. A continuación, asegúrate de que está seleccionado el fotograma Presionado.
11. Dirígete al panel Propiedades, y selecciona el sonido que acabas de importar a la Biblioteca de símbolos.
Panel propiedades
De forma predeterminada no aparece ningún sonido seleccionado. Debes desplegar la ventana Nombre del panel Propiedades y escoger el sonido. 77
12. Cierra el modo edición de Flash. Para ello, haz clic sobre el vínculo Escena 1 que se encuentra bajo la línea de tiempo.
Observa que el fotograma Presionado de la línea de tiempo de la capa “sonido”muestra el gráfico de sonido.
13. Utiliza el comando Control > Probar película para ver el funcionamiento del botón que acabas de crear.
14. Guarda los cambios.
78
1. Lenguaje de programación Flash: ActionScript
2. Versión ActionScript 2.0
3. Asociar una acción al Botón
4. Acciones comunes
Índice
Módulo 3.- Interactividad básica • 2. USO DE ACCIONES
Una vez que sabes cómo crear un símbolo Botón, necesitarás asociar una acción a dicho botón. Para ello conocerás el lenguaje de programación de Flash: ActionScript.
Los objetivos que persigue este capítulo “Uso de acciones” son:
• De forma general, tener un conocimiento básico del lenguaje de programación de Flash.
• De forma específica, aprender a asociar acciones a los botones y entender cómo funciona ActionScript.
79
El uso de script abre un enorme abanico de posibilidades para nuestras películas.
Un script es un conjunto de instrucciones que definen acciones que se deben realizar al pulsar sobre un botón, o al llegar a un determinado fotograma clave, etc. Las secuencias de acciones se escriben siguiendo las reglas del lenguaje de programación de Flash, llamado ActionScript.
Como cualquier lenguaje, ActionScript contiene distintos elementos: palabras, puntuación y estructura.
2. Uso de acciones | 1. Lenguaje de programación Flash: ActionScript
Los lenguajes de programación se utilizan para comunicarse con el ordenador enviando y recibiendo información. A través de dichos lenguajes, el usuario podrá decirle al ordenador lo que debe hacer, así como preguntarle por cualquier información. Gracias a la programación, el ordenador escucha, prueba o realiza las acciones requeridas por el usuario y da respuestas.
on (release) {play ();
}
Cualquier error en ActionScript provocará que la película no funcione. Una instrucción mal escrita, un punto de menos o unas llaves olvidadas hará que pasemos mucho tiempo buscando el error. Es muy importante no desanimarse ya que estos errores de sintaxis son muy comunes al principio, pero tienden a desaparecer con la práctica.
¡! ADVERTENCIA
on (release)
play ();
80
Al crear un nuevo documento con Flash debemos indicar si vamos a crear un proyecto en formato “ActionScript 3.0” o “ActionScript 2.0”. La versión AS 3.0 presenta muchos cambios respecto a las versiones anteriores 1.0 y 2.0; el lenguaje es más complejo y hay que escribir más código para obtener los mismos resultados. Por lo tanto, para este curso de Iniciación a Flash, escogeremos la versión anterior, la 2.0. Para ello, en la ventana que se abre al seleccionar el comando Nuevo del menú Archivo, escogeremos el Tipo: “Archivo de Flash ActionScript 2.0”.
2. Uso de acciones | 2. Versión ActionScript 2.0
Ubicación de los script
Al trabajar con ActionScript es muy importante saber dónde se almacenan los script para poderlos modificar cuando sea necesario.
En la versión de ActionScript 2.0 de Flash es posible insertar script:
• en la línea de tiempo (dentro de fotogramas),• en los clip de película,• en botones• y en archivos externos.
De este modo, por ejemplo, al pulsar sobre un botón se ejecuta el script insertado en ese botón.
81
1. Es preciso seleccionar el botón que se está preparando.
2. Y abrir el panel de acciones (una vez seleccionado el botón en pantalla).
– O bien desde Ventana (menúprincipal) > Acciones.
– O desde el propio panel de Propiedades.
3. Entonces, se desplegará el Panel de Acciones, en el que aparece, a la izquierda, la lista de acciones disponibles y, a la derecha, un espacio para configurarlas.
4. Para asociar una acción con el botón en preparación, hay que hacer doble clicsobre ella en la lista de la izquierda, o arrastrarla hasta la ventana de script.
5. A continuación, aparecerá en el lado derecho de la ventana el código ActionScriptcorrespondiente.
Las acciones más habituales de los botones no requieren tener conocimientos de programación, y se pueden configurar fácilmente. Bastará con seguir estos pasos:
2. Uso de acciones | 3. Asociar una acción al botón
Éste es el panel de Acciones. En él aparece, a la izquierda, la lista de acciones disponibles y, a la derecha, un espacio para configurarlas (lo que llamamos Ventana de script).
Ventana de script
82
Asistente de scriptactivado.
Una vez desplegado el panel Acciones, puedes activar el “Asistente de script”. El Asistente de script ayuda a evitar los errores de sintaxis y de lógica con los que pueden encontrarse los usuarios poco experimentados.
Al activar este modo de edición, aparecerán los controles en la parte superior de la Ventana de script, donde activaremos o seleccionaremos la opción que necesitemos.
Asistente de script
on (release)
play ();
Eventos de ratón: Un evento de ratón es una circunstancia desencadenada por un clic sobre un botón. Este evento on (release),tiene lugar cuando el usuario libera el botón del ratón (este es el comportamiento estándar de funcionamiento de un botón).
Llaves ( {} ): Como podéis ver, la acción play(); está encerrada entre llaves. Las llaves se utilizan para agrupar las acciones que se ejecutarán.
Truco: A veces leer este tipo de instrucciones ayuda a comprenderlas mejor. En este caso podríamos leerlo así: “Al hacer clic sobre el botón, inicia la reproducción de la película”.
Punto y coma ( ; ): Las acciones de ActionScript deben terminar con este símbolo. Es el indicador de fin de instrucción.
Paréntesis ( () ): Se utilizan para indicar los parámetros de las funciones o métodos. (En este ejemplo no hay ningún parámetro asignado).
Palabras clave e instrucciones:Las palabras que tienen significado específico en ActionScript, como palabras clave e instrucciones, aparecen en azul.
Al igual que en español, cada paréntesis abierto debe tener su correspondiente paréntesis cerrado. Lo mismo se aplica para los corchetes y las llaves.
Para comprender cómo funciona ActionScript, echemos un vistazo al script que acabamos de crear:
83
Permite controlar la reproducción de la película, iniciándola.
playReproducir película
Acción que desactiva todo el sonido de la película, sin que haya modo de realizar la operación inversa.
stopAllSoundsParar sonido
Permite detener la reproducción de la película.stopDetener película
Permite saltar a un fotograma determinado de la película, identificado por su número o etiqueta.
gotoIr a un fotograma
Todas estas acciones se activan al pulsar un símbolo Botón o al llegar a un Fotograma determinado.
2. Uso de acciones | 4. Acciones comunes
Estas son algunas de las acciones más comunes soportadas por Flash que se pueden asignar a botones y otros elementos como los fotogramas.
84
1. Introducción
2. Dinámica de funcionamiento de la aplicación
3. Estructura del acuario interactivo
4. Montar el acuario
Índice
Módulo 3.- Interactividad básica • 3. APLICACIÓN INTERACTIVA
Flash facilita todos los elementos para convertir las películas en aplicaciones interactivas: soporte para recibir estímulos y datos, un lenguaje de programación para procesarlos y una gran capacidad para presentar información de forma dinámica.
Los objetivos que persigue este capítulo “Aplicación interactiva” son:
• De forma general, conocer la dinámica de funcionamiento de una Web o de cualquier aplicación interactiva.
• De forma específica, crear nuestro acuario interactivo utilizando todos los elementos que hemos aprendido a lo largo del curso.
85
Vamos a desarrollar un acuario interactivo que consta principalmente de 4 botones y 4 ventanas con información.
El usuario se encontrará con 4 botones (por ejemplo: un pez globo, una estrella de mar, un pez común y un cofre pirata), y cuando haga clic con el ratón sobre cualquiera de estos 4 botones, se abrirá una ventana con información relativa al elemento que ha pulsado. Además podrá cerrar dicha ventana pulsando sobre un botón de cerrar.
Esta estructura puede ser la base de una Web o de una aplicación interactiva.
3. Aplicación interactiva | 1. Introducción
Pez globo Cofre del tesoro Pez común Estrella de mar
Éste es el acuario interactivo que vamos a desarrollar. Pero antes veamos cuál es la diná-mica de funcionamiento de esta aplicación.
Pulsa sobre las figuras de las esquinas.
86
BOTÓN Ventana con el contenido
FOTOGRAMA 1 FOTOGRAMA 2
La acción del botóndice: Al liberar el botón del ratón, ve y detente en el fotograma 2 de la película.
La acción del botóncerrar dice: Al liberar el botón del ratón, ve y detente en el fotograma 1 de la película (es decir, retrocede).
Xon (release) {
gotoAndStop (2);} on (release) {
gotoAndStop (1);}
stop ();
La película se queda parada en el primer fotograma, no avanza al tener un stop.
3. Aplicación interactiva | 2. Dinámica de funcionamiento
La dinámica de funcionamiento de la aplicación que vamos a desarrollar consiste básicamente en crear dos fotogramas, en los cuales, en el 1er fotograma de la película hay una acción stop(); asociada a dicho fotograma que impide que la película se reproduzca, y un botón con una acción gotoAndStop (2); que indica que al pulsarlo la película salte al fotograma siguiente, es decir, al fotograma 2; y en el 2º fotograma de la película está la ventana con la información y un botón de cerrar con una acción gotoAndStop (1); que indica que al pulsarlo la película retroceda al fotograma anterior, es decir, al fotograma 1.
Este sería el croquis:
Veamos cómo crear esta sencilla aplicación:
1. Crea un nuevo documento y selecciona el Tipo: “Archivo de Flash (AS 2.0)”.
1º Selecciona el botón.
2º Abre el panel de Acciones.
3º Una vez desplegado el panel de acciones, asegúrate de que el Asistente de script esté activado.
4º Haz doble clic sobre la acción que quieras añadir (en la lista de la izquierda), o arrástrala desde la lista de la izquierda hasta la ventana de script que se encuentra en el lado derecho del panel.
3. Crea un botón y asígnale la acción goto.
2. Guárdalo bajo el nombre “Interactivo_basico.fla”.
87
De esta forma indicamos que lo que queremos al pulsar el botón es que Flash vaya y se detenga en el fotograma 2 de la película.
5º Tienes que seleccionar la casilla “Ir a y detener”.
6º Y escribir el número 2 en la casilla Fotograma.
Al utilizar la función goto de la lista de acciones del lado izquierdo del panel Acciones, por defecto, en la ventana de script (lado derecho del panel Acciones) aparecerá la acción “gotoAndPlay (1);”.
Para modificar esta acción por “gotoAndStop(2);”, manipula los controles en la parte superior de la Ventana de script. Para ello:
4. Crea una nueva capa. Cámbiale el nombre y llámala “Contenido”. Crea un Fotograma clave (F6) en el fotograma 2 de la línea de tiempo de esta nueva capa. En este nuevo fotograma crea la caja de texto.
5. Crea de nuevo una nueva capa. Llámala “Botón cerrar”. Crea un Fotograma clave (pulsando la tecla F6) en el fotograma 2 de la línea de tiempo de esta nueva capa, y en él crea un botón con la acción:
6. Por último, crea una nueva capa.Llámala “Acción stop”. Al primer fotograma de la línea de tiempo de esta capa asígnale la acción stop.
stop ();
on (release) {gotoAndStop(1);
}
88
Acciones asociadas a fotogramas
En este caso hemos añadido una acción stop para impedir que la película siga mostrando el contenido de la Línea de tiempo hasta que el usuario haga clic sobre el botón.
Como hemos comentado anteriormente, las acciones no sólo se pueden asignar a los botones sino también a los fotogramas. Para asociar una acción a un fotograma:
Verás que el fotograma queda marcado con la letra “a”, indicando así que Flash ha asignado una acción a dicho fotograma.
1º Selecciona el fotograma.
2º Abre el panel de Acciones.
3º Haz doble clic sobre la acción que quieras añadir, o arrástrala hasta la ventana de script que se encuentra en el lado derecho del panel. A continuación aparecerá el código ActionScriptcorrespondiente.
En las dos imágenes que se muestran a continuación (Fig.1 y Fig.2), tenemos la estructura de la aplicación. Fíjate en la Cabeza lectora del panel Línea de tiempo. Nos muestra lo que se ve en el Escenario cuando la situamos en el fotograma 1 ó 2 de la película.
Observa que la capa Botón está presente en toda la película (tanto en el fotograma 1 como en el 2) y por lo tanto el botón está siempre presente en la película.
La dinámica de funcionamiento es la siguiente: La película se queda parada en el primer fotograma, no avanza al tener un stop, y lo único que el usuario ve es el botón (de la capa Botón). Cuando el usuario pulse sobre dicho botón, Flash “saltará” al fotograma 2 de la película, donde se encuentra la información. El usuario entenderá que se ha abierto la ventana. Al pulsar sobre el botón cerrar de la ventana de información, Flash volverá al fotograma 1 de la película, y el usuario entenderá que se ha cerrado dicha ventana de información.
Nosotros hemos simulado la apertura y el cierre de la ventana saltando de un fotograma a otro, pero el usuario sólo percibe que dicha ventana se abre y cierra.
89
Fig. 1 Fig. 2
Cabeza lectora situada en el fotograma 1. Cabeza lectora situada en el fotograma 2.
La dinámica de funcionamiento de la aplicación que vamos a desarrollar, el acuariointeractivo, es igual que la que acabamos de explicar pero con 4 botones y 4 ventanas de contenido.
BOTÓNVentana con el contenido
FOTOGRAMA 1 FOTOGRAMA 2
XBOTÓN
BOTÓNBOTÓN
Ventana con el contenido
FOTOGRAMA 3
XVentana con el contenido
FOTOGRAMA 4
XVentana con el contenido
FOTOGRAMA 5
X
Una vez que has entendido la dinámica de funcionamiento de la aplicación que vamos a desarrollar, pasemos ya a crear el acuario interactivo.
El primer paso a la hora de diseñar una aplicación interactiva consiste en dibujar sobre el papel un croquis de funcionamiento. De esta manera tenemos presentes las posibilidades con las que contará el usuario y los diferentes escenarios que se darán en función de su elección.
stop();
3. Aplicación interactiva | 3. Estructura del acuario interactivo
90
Imagen: croquis de funcionamiento
Éste es el croquis de funcionamiento del acuario interactivo (imagen anterior). En este croquis estamos definiendo los elementos principales y su dinámica de funcionamiento para tener una visión global del trabajo a realizar. Un correcto enfoque en este primer paso puede ahorrarnos mucho trabajo a medida que vayamos avanzando en el desarrollo.
En él hemos descrito los elementos con los que contaremos (cuatro símbolos Botón, más un quinto Botón de cerrar, y cuatro cajas de texto) y el funcionamiento de cada uno de ellos.
Este es todo el código del acuario:
La acción del botón cerrar indica que al pulsar sobre dicho botón Flash volverá al fotograma 1 de la película. El usuario entenderá que se ha cerrado la ventana.
Las acciones de los 4 botones indican que al pulsarlos Flash irá y se detendrá en el fotograma indicado (2, 3, 4 ó 5). El usuario entenderá que se ha abierto una ventana.
on (release) {gotoAndStop (1);
}
on (release) {gotoAndStop (2/3/4/5);
}
En el fotograma 1 de la línea de tiempo hay una acción stop que nos indica que la película se quedará parada en el primer fotograma y no avanzará.
stop();
91
La película se queda parada en el primer fotograma, no avanza al tener un stop, y lo único que el usuario ve son los 4 botones (capa Elementos) y el fondo decorativo del acuario (capa Fondo).
A medida que el usuario pulsa sobre los botones del primer fotograma (pez globo, cofre, etc.), Flash “saltará” a los fotogramas siguientes, donde se encuentra la información.Saltará al fotograma 2, 3, 4 ó 5, dependiendo del botón que pulse.
Ahora vemos el croquis pasado a Flash:
stop();
Como puedes observar, tanto los 4 botones(capa Elementos) como el fondo marino animado que decora la película (capa Fondo), están presentes en todo momento.
En la siguiente imagen podemos observar cómo quedaría el panel Línea de tiempo de nuestro proyecto. La capa superior, capa “stop”, únicamente contiene una acción en el primer fotograma. Las capas inferiores están organizadas en dos carpetas: la carpeta “Pop-ups”contiene las ventanas emergentes relativas a la ampliación de información; la carpeta “Acuario” contiene la animación de fondo de la película.
Bueno, ahora sólo queda montar el acuario interactivo. Ya conoces todos los elementos necesarios para ello: las herramientas de Flash, el panel Línea de tiempo, los fotogramas, los símbolos, la interpolación de movimiento, los botones, asociar acciones a los botones, etc. Pero antes de ponernos manos a la obra, vamos a a ver a continuación cómo incorporar la animación del módulo 2 en este tercer módulo.
El Cofre es un símbolo Botón con varios estados y con sonido incorporado.
El pez globo, el pez común y la estrella de mar, son símbolos Clip de película animados convertidos en botones.
Las ventanas emergentes de información se encuentran en los fotogramas 2, 3, 4 y 5 de la película. Además, estas ventanas emergentes de información tienen un símbolo Botón (esquina superior derecha) para cerrarlas.
Observa de nuevo el acuario interactivo de los contenidos on-line del curso. Ahora sabes cómo está hecho:
92
Vamos a aprovechar la animación del acuario del módulo anterior. Para ello vamos a necesitar pasar la animación del acuario de la Línea de tiempo principal a la Línea de tiempo de un símbolo Clip de película.
En el módulo 2 hemos trabajado en la Línea de tiempo principal. Tendréis una Línea de tiempo principal con un montón de fotogramas animados: 80, 200 o quizá más.Sin embargo, en el módulo 3, al desarrollar el acuario interactivo, os vais a encontrar con que sólo vamos a necesitar 5 fotogramas de la Línea de tiempo principal.
Y os preguntaréis: ¿dónde va la animación del acuario que ocupa 80 fotogramas (o más) de la Línea de tiempo principal si sólo vamos a trabajar en 5 fotogramas de la Línea de tiempo principal? La respuesta es sencilla: La animación del acuario va dentro de un símbolo Clip de película.
Por lo tanto tenéis que “meter” la animación del acuario del módulo 2 dentro de un símbolo Clip de película. Es decir, toda la animación del fondo del acuario estará contenida en un símbolo Clip de película. Ya sabéis que este tipo de símbolos tiene una línea de tiempo propia, independiente de la línea de tiempo principal.
3. Aplicación interactiva | 4. Montar el acuario
Podéis hacerlo de la siguiente manera (ésta no es la única manera de resolverlo, se pueden tomar diversos caminos, así que si se os ocurre otra forma de resolverlo será igual de válida que ésta) :
Fotogramas seleccionados
Fotogramas sin seleccionar
3. Una vez que los has seleccionado, haz Ctrl+Alt+C (copiar). De esta forma has copiado todos los fotogramas de la animación.
4. Abre un nuevo Archivo de Flash. Llámalo “acuarioInteractivo.fla”.
1. Abre el archivo de trabajo (FLA) del ejercicio del módulo 2.
2. Primeramente asegúrate de que las capas no estén ocultas o candadas. Después seleccionaremos todos los fotogramas de la Línea de tiempo principal, esto se hace desde “Edición” (menú principal) > “Seleccionar todo” (Ctrl+A).
Verás que todos los fotogramas de la línea de tiempo se colorean de un azul más oscuro (esto significa que están seleccionados).
93
5. Dibuja un rectángulo con la herramienta Rectángulo del panel Herramientas (cualquier figura sencilla nos sirve, ya que más tarde la vamos a borrar), y conviértelo en un símbolo Clip de película.
6. Métete dentro del símbolo Clip de película que acabas de crear. Para ello haz doble clic sobre él.
7. Una vez dentro, borra el rectángulo (o lo que hayas dibujado) ya que no lo necesitamos.
8. Selecciona el fotograma en blanco de la Línea de tiempo del símbolo Clip de película y haz Ctrl+Alt+V (pegar). De esta forma has volcado todos los fotogramas de la animación. Si todo ha ido bien, deberás ver todos los fotogramas volcados.
9. Ahora “sal fuera” de la edición del símbolo, hasta la Escena 1. Verás que solamente hay una capa, la Capa 1, y que esta capa tiene un fotograma.
10. Prueba la película: Control > Probar película. Verás la animación del acuario igual que la veías en el ejercicio práctico del módulo 2. La única diferencia es que en esta ocasión toda la animación está “dentro” de un símbolo Clip de película.
11. Guarda el archivo. Ya tienes el archivo de trabajo listo para realizar el ejercicio práctico del módulo 3.
94
1. Crear tu Web o aplicación interactiva
2. Presentar tu película al público
Índice
Módulo 3.- Interactividad básica • 4. PUBLICAR UNA PELÍCULA
2.1. Publicar una película para Internet
2.2. Publicar una película con proyector
El fin último de la creación de una animación o una aplicación interactiva es ponerla a disposición de los usuarios. Para eso hay que preparar la película. Flash se encarga de todo. Tú sólo necesitas conocer cómo se hace. Y esto es lo que vamos a ver en este capítulo.
95
Observa esta imagen. Es una Web ¿verdad? Pues aunque no lo creas, estás capacitado para hacer una Web como esta con los conocimientos que has adquirido en este curso. La estructura es exactamente la misma que la del acuario interactivo. Hay cuatro botones y cuatro ventanas con información.
Tanto los 4 botones como los elementos decorativos de la Web están presentes en toda la película.
Así que ya sabes, una bonita foto de fondo y una composición sencilla, junto con todo lo que has aprendido en este curso y ya tienes tu propia Web.
4. Publicar una película | 1. Crear tu Web o aplicación interactiva
Cuando estés listo para presentar tu película al público, deberás publicar o exportar el archivo Flash “.fla” a otro formato para su reproducción.
4. Publicar una película | 1. Presentar tu película al público
El paso final cuando terminamos de crear una película es el de publicarla. Esto significa que vamos a preparar la película para colocarla en Internet, distribuirla en un CD o cualquier otro medio.A partir del archivo de película original podremos generar varios tipos de archivos, cada uno orientado a un medio distinto.
2.1. Publicar una película para Internet
El medio más habitual para la difusión de Flash es Internet. Para poder colocar una película en Internet necesitamos generar dos archivos distintos:
• Archivo SWF: Es el archivo que contiene la película. Ocupa menos que el archivo FLA sobre el que trabajamos porque en los SWF sólo se almacena aquello que es imprescindible además de utilizar ciertos algoritmos de compresión para reducir su tamaño.
• Archivo HTML: La película en Internet se podrá visualizar gracias a la existencia de una página Web que será la encargada de contenerla. En ella se definen algunas características de la película como el tamaño en pantalla, posición, etc.
96
1. Buscamos en el menú principal Archivo> Configuración de publicación y nos aparece la siguiente ventana.
Para preparar tu película para Internet sigue estos pasos:
Recuerda que antes de publicar la película, es importante que pruebes si la película funciona mediante los comandos Probarpelícula, Probar escena yVista previa de publicación.
2. Asegúrate de que las opciones “Flash” y “HTML” estén seleccionadas.
3. Pulsa sobre el botón Publicar.
¡Tu primer interactivo Flash está listo para ser colgado en Internet!
Los archivos que se acaban de generar los encontraremos en la misma carpeta donde hemos guardado el archivo “.fla”. Si queremos verlo en nuestro ordenador no tenemos más que abrir el archivo con la extensión HTML y visualizaremos el trabajo en nuestro navegador.
Al publicar la película aparecerán dos nuevos archivos: .swf y .html
97
2.2. Publicar una película con proyector
Flash permite generar archivos ejecutables que se pueden copiar en CD-ROM, DVD, memorias USB o cualquier otro método de almacenamiento similar.
Al usar esta modalidad de publicación, Flash genera un archivo con extensión .exe quecontiene la película junto a un módulo que permite su reproducción.
Este método tiene la ventaja de que no hace falta que el ordenador donde se vaya a visualizar la película tenga conexión a Internet ni tampoco el programa reproductor de Flash. El proyector se encarga de todo.
Para preparar tu película con proyector sigue estos pasos:
1. Abre la película que vas a publicar.
2. En el menú Archivo selecciona la opción Configuración de publicación. Se desplegará el cuadro de diálogo Configuración de publicación.
3. En la pestaña formatos desactiva todas las casillas de verificación y activa la casilla Proyector de Windows.
Desactiva todas las casillas de verificación y activa la casilla Proyectorde Windows.
98
4. Pulsa sobre el botón Publicar.
Para generar un archivo ejecutable para sistemas Macintosh, en el cuadro de diálogo Configuración de publicación selecciona la opción ProyectorMacintosh que se encuentra a continuación de la que hemos utilizado.
Al publicar la película aparecerá un nuevo archivo: .exe
Observa que al acceder a la carpeta donde tenías la película original (FLA) ha aparecido un nuevo archivo con extensión exe. Para visualizar la película haz doble clic sobre el nuevo archivo exe. Verás que se reproduce dentro del proyector.
99
M3.- Interactividad básica / RESUMEN
El símbolo Botón está constituido por cuatro fotogramas o estados: Reposo, Sobre,Presionado y Zona activa.
Símbolo Botón animado: Mediante la utilización de clips de película se puede conseguir que un botón realice un movimiento cíclico aunque la película no se estémoviendo.
Aparte de los efectos visuales, los botones pueden incorporar sonidos. Flash incluye sonidos en la biblioteca del programa.
Como cualquier lenguaje, ActionScript contiene distintos elementos: palabras, puntuación y estructura.
Advertencia: Cualquier error en ActionScript provocará que la película no funcione.
En la versión de AS 2.0 de Flash es posible insertar script en la línea de tiempo (dentro de fotogramas), en los clip de película, en botones y en archivos externos.
La creación de script se lleva a cabo desde el panel Acciones.
1.
2.
La dinámica de funcionamiento del acuario interactivo consiste en simular la apertura y el cierre de las ventanas saltando de un fotograma a otro, pero el usuario sólo percibe que dichas ventanas se abren y cierran.
El primer paso a la hora de diseñar una aplicación interactiva consiste en dibujar sobre el papel un croquis de funcionamiento. En este croquis estamos definiendo los elementos principales y su dinámica de funcionamiento para tener una visión global del trabajo a realizar.
Hemos aprovechado la animación del acuario del módulo anterior pasando la animación del acuario de la Línea de tiempo principal a la Línea de tiempo de un símbolo Clip de película.
Para preparar la película trabajaremos el la ventana Configuración de publicación.
Recuerda que antes de publicar la película, es importante que pruebes si la película funciona correctamente mediante los comandos Probar película, Probar escena yVista previa de publicación.
3.
4.
A partir del archivo de película original (FLA) podremos generar varios tipos de archivos, cada uno orientado a un medio distinto. Podemos publicar una película para Internet (SWF y HTML) o publicar una película con proyector (EXE).
100
101
