El documento describe las características y herramientas básicas del programa Adobe Flash, incluyendo el escenario de trabajo, la línea de tiempo, la biblioteca y los menús. Explica cómo crear un sencillo documento Flash con la animación de un círculo al moverse de izquierda a derecha a través de fotogramas clave.

1. DISEÑO MULTIMEDIA II TUTOR: CUSTODIO GARCÍA ARROYO E-Mail: [email_address] Cel: 311 6950179 FUNDACIÓN UNIVERSITARIA DEL ÁREA ANDINA ESPECIALIZACIÓN EN INFORMÁTICA Y TELEMATICA

2. Flash es una herramienta de edición con la que los diseñadores y desarrolladores pueden crear presentaciones, aplicaciones y otro tipo de contenido que permite la interacción del usuario. Los proyectos de Flash pueden abarcar desde simples animaciones hasta contenido de vídeo, presentaciones complejas, aplicaciones y cualquier otra utilidad relacionada. En general, los fragmentos independientes de contenido creados con Flash se denominan aplicaciones, aunque se trate solamente de una animación básica. Se pueden crear aplicaciones de Flash con una amplia variedad de contenido multimedia que incluye imágenes, sonido, vídeo y efectos especiales.

4. Barra de Men ú s. Como en cualquier otro programa, en la parte superior de la pantalla se desarrolla la Barra de Men ú s: ARCHIVO : Junto con el men ú de Edici ó n, es un men ú com ú n en cualquier programa. Nos permite manejar el flujo de trabajo con los diferentes archivos. Desde men ú abriremos los documentos de trabajo, los guardaremos y los publicaremos. EDICI Ó N: Al igual que en otros programas, desde este men ú 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 (es uno de los m á s usados). MODIFICAR : Desde este men ú podremos alterar cualquier componente de la pel í cula... incluso la pel í cula en s í misma (es uno de los m á s usados). TEXTO: Nos permitir á controlar los diversos atributos aplicados al texto (no lo usaremos mucho). COMANDOS: Este nuevo men ú administra la ejecuci ó n de acciones preprogramadas llamadas comandos. (En este curso no lo usaremos). CONTROL : Rige la reproducci ó n de la animaci ó n. M á s que este men ú usaremos la barra de herramientas de mismo nombre que veremos m á s adelante. 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 por grama flash incluye un men ú de ayuda. Al contrario de lo que ocurre en otros programas, la ayuda de Flash es realmente una ayuda muy ú til cuando estamos perdidos o queremos introducirnos en el conocimiento de alguna parcela del programa.

5. Panel y barras de herramientas Una de las partes m á s importantes de Flash es el panel de Herramientas (Ventana>Herramientas). Dentro de este Panel las herramientas se organizan por grupos: 1. El primer grupo nos ofrece las diferentes herramientas con que contamos para crear y modificar cualquier dibujo en el área de trabajo. En este caso se ve activada la herramienta de Selección y Movimiento (esquina superior izquierda). 2. Éstas son las herramientas de ayuda para la visualización del área de trabajo 3. Éste es el controlador de color de Flash. Dividido en el color de Contorno y de Relleno. Muy similar al de otros programas vectoriales como Freehand. 4. Al final del panel aparecerán las opciones de la herramienta que tengamos activada. En este caso las opciones de la herramienta de Selección y Movimiento.

6. BARRA DE EDICI Ó N En Flash 8 la Barra de Edici ó n est á localizada justo encima de la L í nea de tiempo: Nos da informaci ó n sobre el zoom al que estamos viendo la escena y nos servir á tambi é n para recibir informaci ó n de la escena en la que estamos y los elementos que tenemos en juego en ese momento. La barra de Herramientas Principal contiene iconos que nos permiten aplicar los comandos utilizados m á s a menudo, como por ejemplo Guardar, Copiar, Pegar, etc. Esta barra de herramientas se define por los botones de Play, Rebobinar, Hacia delante, Hacia atr á s, Stop, etc. con los que podremos trabajar con la vista preliminar de pel í culas Flash . BARRA PRINCIPAL BARRA DEL CONTROLADOR

7. Panel de L í nea de Tiempo Este es un panel crucial en el trabajo con flash. Nos ofrece la posibilidad de gestionar la estructura y longitud de nuestras pel í culas, de nuestras animaciones en el tiempo. Desde este panel podremos organizar las escenas de nuestra pel í cula, la longitud de cada una de ellas y su contenido. En fin... va a actuar como una mesa de edici ó n de v í deo.

8. El panel Propiedades Uno de los paneles m á s importantes cuando se trabajan con gr á ficos en Flash es el panel Propiedades. Desde este panel tenemos la posibilidad de modificar la propiedad de cualquier herramienta que est é activada o cualquier objeto que tengamos seleccionado en el escenario. Por lo tanto, el aspecto de este panel variar á dependiendo de lo que tengamos seleccionado, ofreci é ndonos sus propiedades para variarlas. En la imagen, nos ofrece las propiedades de una herramienta que tenemos activada: la herramienta Ó valo.

9. Men ú derecho de paneles 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. Por eso, Flash los coloca en lugares prominentes de la pantalla. Pero no solo de estos paneles vive Flash... el men ú de paneles ocupa la parte derecha de la pantalla y est á dise ñ ado para contener los paneles m á s utilizados por el usuario. Su uso es muy c ó modo gracias a que se puede ocultar y visualizar todo el men ú con solo pulsar en el bot ó n situado en medio de la barra que lo separa del resto de la pantalla.

10. Escenario El Escenario , situado en la parte central del programa, es el á rea de trabajo en forma rectangular donde se produce la pel í cula. Se puede trabajar tanto dentro como fuera de é l, teniendo en cuenta que la visualizaci ó n del resultado de lo que estamos haciendo y que publicaremos, se limita al interior de ese rect á ngulo o escenario. Debemos pensar en el á rea de trabajo como en un teatro: Los espectadores solo van a ver lo que est é a la vista en el escenario... pero nosotros podemos tener cualquier otra cosa entre bastidores (fuera del escenario, pero dentro del á rea de trabajo).

11. Visualizaci ó n del escenario En la barra de Edición encontramos el men ú desplegable de ZOOM:

12. Las pel í culas flash Archivos .fla y .swf En el proceso de trabajo con Flash se ven involucrados diferentes tipos de archivos, pero explicar aqu í todos ellos puede resultar un poco confuso. Nos centraremos principalmente en dos de ellos: .Fla: Archivo de trabajo Este archivo es el que necesitamos para trabajar, dibujar, animar, hacer modificaciones... en la pel í cula. Es la extensi ó n con la que se guarda el archivo cuando estamos trabajando. As í , podemos abrirlo, editarlo y trabajar con é l, y restaurar con é l los dem á s tipos de archivo. No es el archivo que se publica en Internet. .Swf: archivo resultante Se caracteriza porque s ó lo es la visualizaci ó n resultante de la pel í cula. No nos permitir á modificarla. Por eso tiene un tama ñ o muy reducido; motivo por el que Flash ha alcanzado tanta popularidad en la creaci ó n de animaciones dirigidas para Internet. Es el archivo que genera la pel í cula optimizada preparada para ser reproducida, y puede ser visto por cualquier persona que cuente con un Navegador de Internet y el plug-in Reproductor Flash (o Flash Player). El p ú blico no puede editar este tipo de archivo, s ó lo puede verlo. En resumen, el archivo .FLA es el ORIGEN y el archivo .SWF es el RESULTADO.

13. Teniendo el .fla de una pel í cula podemos hacer con ella lo que deseemos.

14. Cuando se edita contenido en Flash, se trabaja en un archivo de documento de Flash. Estos documentos tienen la extensión de archivo .fla (FLA) y se componen de cuatro partes principales: El escenario es donde se muestran los gráficos, vídeos, botones y demás objetos durante la reproducción. La línea de tiempo es donde el usuario indica a Flash cuándo desea que se muestren los gráficos y otros elementos del proyecto. También se utiliza para especificar el orden de capas de los gráficos en el escenario.

15. Cuando se edita contenido en Flash, se trabaja en un archivo de documento de Flash. Estos documentos tienen la extensión de archivo .fla (FLA) y se componen de cuatro partes principales: El panel Biblioteca es donde Flash muestra una lista de los elementos multimedia del documento. ActionScript es el código que permite añadir interactividad a los elementos multimedia del documento.

16. Aplicaciones que se pueden crear con Flash Animaciones: Incluyen anuncios publicitarios, tarjetas de felicitación en línea, dibujos animados, etc. Muchos otros tipos de aplicaciones de Flash también incluyen elementos de animación. Juegos: Numerosos juegos se crean con Flash. Los juegos normalmente combinan las capacidades de animación de Flash con las capacidades lógicas de ActionScript. Interfaces de usuario: Un gran número de diseñadores de sitios Web utilizan Flash para diseñar interfaces de usuario. Estas interfaces incluyen tanto sencillas barras de navegación como diseños mucho más complejos. Áreas de mensajes flexibles: Se trata de áreas de las páginas Web que utilizan los diseñadores para mostrar información que puede variar con el tiempo. Aplicaciones dinámicas de Internet: Incluyen un amplio abanico de aplicaciones que proporcionan una elaborada interfaz de usuario para mostrar y manipular datos almacenados de forma remota a través de Internet. Una aplicación dinámica de Internet podría ser una aplicación de calendario, una aplicación de búsqueda de precios, un catálogo de compra, una aplicación de educación y pruebas, o bien cualquier otra aplicación que presente datos remotos con una completa interfaz desde el punto de vista gráfico.

17. Pasos básicos para crear una aplicación de Flash: Decida las tareas básicas que realizará la aplicación. 2. Cree e importe elementos multimedia como imágenes, vídeo, sonido, texto, etc. 3. Organice los elementos multimedia en el escenario y en la línea de tiempo para definir cuándo y cómo aparecerán en la aplicación. 4. Aplique efectos especiales a elementos multimedia según estime oportuno. 5. Escriba código Action Script para controlar cómo se comportarán los elementos multimedia, incluido cómo responderán los elementos a las interacciones del usuario. 6. Pruebe la aplicación para determinar si funciona como se había previsto y busque cualquier error que se produjera al crearla. La aplicación se debe probar durante todo el proceso de creación. 7. Publique el archivo FLA como archivo SWF para que pueda mostrarse en una página Web y reproducirse con Flash Player.

18. Creación de un sencillo documento de Flash Dibujo de un círculo: 1. Seleccione la herramienta Óvalo del panel Herramientas. 2. Seleccione la opción Sin color en el selector de Color de trazo. 3. Elija el color que desee en el selector de Color de relleno. Asegúrese de que el color de relleno contrasta bien con el color del escenario.

19. 4. Con la herramienta Óvalo seleccionada, utilice la función de arrastre con la tecla Mayús presionada para dibujar un círculo en el escenario. Al mantener la tecla Mayús presionada, la herramienta Óvalo se convierte en un círculo. Forma del círculo dibujado en el escenario

20. Creación de un símbolo: Para que la nueva ilustración se vuelva un activo reutilizable, es necesario convertir ésta en un símbolo de Flash. Un símbolo es un activo multimedia que se puede reutilizar en cualquier parte del documento de Flash sin necesidad de volver a crearlo. Para crear un símbolo: 1. Haga clic en la herramienta Selección del panel Herramientas. 2. Haga clic en el círculo del escenario para seleccionarlo. 3. Con el círculo aún seleccionado, elija Modificar > Convertir en símbolo. 4. En el cuadro de diálogo Convertir en símbolo, escriba mi círculo en el cuadro de texto Nombre. El comportamiento predeterminado ahora es Clip de película. 5. Haga clic en Aceptar. Aparece un recuadro de delimitación alrededor del círculo. Acaba de crear un activo reutilizable, denominado símbolo, en el documento. 6. El nuevo símbolo aparece en el panel Biblioteca. Si el panel Biblioteca no está abierto, seleccione Ventana > Biblioteca.

21. Para crear una animación con el círculo: 1. Arrastre el círculo a la izquierda del área del escenario. 2. Haga clic en el fotograma 20 de la capa 1 en la línea de tiempo.

22. 3. Seleccione Insertar > Línea de tiempo > Fotograma. Flash añade fotogramas al fotograma 20, que permanece seleccionado. 4. Con el fotograma 20 aún seleccionado, elija Insertar > Línea de tiempo > Fotograma clave. Se añade un fotograma clave al fotograma 20. El fotograma clave es un fotograma en el que se cambia de manera explícita alguna propiedad de un objeto. En este nuevo fotograma clave, cambiará la ubicación del círculo.

23. 5. Con el fotograma 20 aún seleccionado en la línea de tiempo, arrastre el círculo a la derecha del área del escenario. 6. Seleccione el fotograma 1 de la capa 1 en la línea de tiempo. 7. En el inspector de propiedades (ubicado de forma predeterminada en la parte inferior de la ventana de la aplicación Flash), seleccione Movimiento en el menú emergente Animar. Aparece una flecha entre los fotogramas 1 y 20 de la capa 1 de la línea de tiempo.

24. 8. En la línea de tiempo, arrastre la cabeza lectora roja hacia adelante y hacia atrás desde el fotograma 1 al 20 para previsualizar la animación. 9. Seleccione Archivo > Guardar. 10. Elija una ubicación para el archivo en la unidad de disco duro y asígnele el nombre SimpleFlash.fla. 11. Seleccione Control > Probar película para probar el archivo FLA. 12. Cierre la ventana Probar película. Con este paso se crea una animación interpolada del círculo que se mueve desde su posición en el primer fotograma clave del fotograma 1 a la nueva posición en el segundo fotograma clave del fotograma 20.

25. En cierta medida, Flash trabaja como si fuese una pel í cula. Una animaci ó n es una sucesi ó n de im á genes fijas que, al pasar r á pidamente unas detr á s de otras, dan la impresi ó n de un movimiento. Cada una de estas im á genes fijas es llamada tambi é n fotograma. Los fotogramas son representados bajo forma de rect á ngulos en la parte derecha del escenario. En estos rect á ngulos podemos alojar tres tipos diferentes de im á genes: Im á genes clave Se trata de las im á genes que nosotros mismos dibujaremos Im á genes fijas Son las im á genes claves copiadas en los fotogramas siguientes al de la primera imagen clave de manera a producir un efecto de objeto est á tico. Im á genes de interpolaci ó n Se trata de im á genes calculadas por Flash que permiten la transici ó n gradual entre dos im á genes claves. Este tipo de im á genes muy ú tiles ya que se generan autom á ticamente y proporcionan un efecto suave de movimiento o transformaci ó n. Las Capas y los Fotogramas

26. Por otra parte, una animación esta generalmente constituida de una variedad de objetos diferentes, cada uno de los cuales se introduce en un momento diferente y presenta un comportamiento independiente al resto de los objetos. De manera a organizar y editar todos estos elementos Flash permite el uso de capas o calcos. Así, una animación Flash esta compuesta de una superposición de capas en cada una de las cuales introduciremos un objeto que tendrá su propia línea de fotogramas. Estas capas nos permiten trabajar la animación en distintos planos independientes. Por defecto, al comenzar una nueva escena encontraremos en nuestra línea de tiempo una sola capa. Progresivamente iremos introduciendo más capas que nos permitan separar cada uno de los elementos de la animación: objetos, fondo, sonidos o trayectorias. Un uso inteligente de las capas es la base para crear animaciones de calidad. Las Capas y los Fotogramas