macromedia Flash Guía Curricular

Transcripción

1 macromedia Flash Guía Curricular

2 Macromedia, Inc. Todos los derechos reservados. Macromedia, el logo de Macromedia, Dreamweaver, Director, Fireworks, Flash, Fontographer, FreeHand y Xtra son marcas comerciales o marcas comerciales registradas de Macromedia, Inc. Otros nombres de marca pueden ser marcas comerciales o marcas comerciales registradas de sus respectivos dueños. La imagen de Flash fue diseñada con Fireworks por Research Studios, de Londres. Tipografía diseñada con Fontographer por Font Bureau, Inc.

3 TABLA DE CONTENIDOS Introducción...iv Lección 1: Empecemos a Trabajar con Flash Configure un nuevo archivo de película de Flash. Dibuje los personajes y el fondo para su animación. Emplee sus herramientas básicas de dibujo como Pencil (Lápiz), Brush (Brocha), Paint Bucket (Cubeta de Pintura) y Text (Texto). Aprenda a seleccionar, desplazar y agrupar objetos...1 Lección 2: Conceptos Básicos de Animación Aprenda las técnicas y conceptos básicos para la animación en Flash. Empiece organizando sus elementos mediante el uso de escenas, capas y símbolos de Library (Biblioteca). Familiarícese con los conceptos generales de animación como cuadros (frames), transiciones entre cuadros clave (tweening) y papel cebolla (onion skinning). Aprenda a usar la línea de tiempo de Flash para crear una animación cuadro por cuadro, y después aplique transiciones entre cuadros clave (tweening) y papel cebolla (onion skinning)...11 Lección 3: Conceptos Básicos de Interactividad Lección 4: Sonido Añada acciones y botones para controlar su animación. Asigne acciones a cuadros específicos en la línea de tiempo para producir un ciclo de animación. Cree botones para que el usuario pueda detener e iniciar la animación. Diseñe los botones de modo que respondan a las acciones del usuario...21 Añada sonidos a su animación y sincronícelos en la línea de tiempo. Añada audio a los botones de modo que produzcan sonidos cuando se haga clic en ellos...29 Lección 5: Técnicas Avanzadas de Dibujo Aprenda más acerca del ambiente de dibujo de Flash y el rol que juegan los símbolos. Cree un relleno de gradación de color personalizado. Conozca las diferentes maneras de modificar imágenes ya existentes. Controle la edición y las capas de los objetos mediante la opción de agrupar. Comprenda la relación entre símbolos y su animación, y la manera de realizar cambios globales a las imágenes mediante la biblioteca...33 Lección 6: Integración de Todos los Elementos Con la interactividad de su animación terminada, expórtela a un archivo para la web. Emplee el programa Aftershock para crear automáticamente una página de web que contenga su película de Flash...41 ii

4 iii

5 INTRODUCCIÓN Flash es el formato estándar para gráficos de vectores y animación para la web. Con Flash, es muy sencillo y rápido darle vida a nuestras páginas de web añadiéndoles gráficos y efectos de texto animados. Flash nos permite, además, agregar una sofisticada interactividad a nuestro sitio sin necesidad de una compleja programación. Flash está diseñado para que nuestras animaciones de web bajen rápidamente de la red y para que empiecen a reproducirse a medida que van bajando. Como Flash crea gráficos basados en vectores, los archivos que genera bajan a una mayor velocidad que los formatos de imágen de mapa de bits, como GIFs y JPEGs. Además, el formato de Flash cuenta con la tecnología de flujo continuo de datos, lo que significa que las películas de web empiezan a reproducirse al tiempo que continúan bajando de la red. De este modo, nuestros usuarios no tienen que esperar para empezar a interactuar con las películas de Flash. El ambiente de autoría de Flash ofrece una serie completa de herramientas para crear animaciones listaspara-la-web. Las herramientas de dibujo y texto nos permiten crear imágenes y texto desde cero. Y además, Flash puede también importar imágenes desde otros programas gráficos como FreeHand e Illustrator, así como mapas de bits creados en Photoshop. La Timeline (Línea de Tiempo) de Flash resultará familiar para quienes han trabajado con Director de Macromedia, y nos permitirá aplicar animaciones e interacciones complejas a nuestras películas, con el control de cuadro por cuadro. Una vez terminada nuestra película en Flash, podemos exportarla al formato de archivo comprimido.swf y emplear Aftershock para añadir la película a una página de web. Este curso nos llevará paso por paso a través del proceso de producción de una animación interactiva en Flash. Aprenderemos a configurar una "película" animada, a dibujar personajes, añadir texto, animar tanto el texto como a los personajes, añadir botones interactivos para controlar la animación, y finalmente exportar nuestra animación a un archivo listo-para-la-web. Dentro de esta lección encontraremos un archivo llamado "final.fla", en el cual se encuentra la versión terminada de la película que crearemos a lo largo de la lección. El ejercicio en el que trabajaremos dará como resultado una película animada con botones interactivos. Sin embargo, Flash nos permite ir más allá de simples animaciones estilo caricatura, o películas basadas en la web. Sus características para responder a las acciones del usuario y para activar páginas de web hacen de Flash una herramienta muy útil para crear elementos de la interfaz del usuario, tales como barras de navegación y menús desplegables, que podemos añadir a nuestras páginas de web. A medida que avancemos en esta lección, podremos acceder a la documentación en-línea de Flash para contar con una mayor información. Además, podemos visitar el reconocido sitio de web de Macromedia en para obtener mayor información en su centro de desarrolladores de Flash. iv

6

7 LECCIÓN 1: EMPECEMOS A TRABAJAR CON FLASH OBJETIVOS En esta lección aprenderemos a: configurar un nuevo archivo de película de Flash emplear las herramientas de dibujo integradas a Flash para crear gráficos y texto trabajar con la barra de herramientas y el Stage (Escenario) CONTEXTO El primer paso para producir una animación de Flash lista para ser publicada en la web es crear los personajes que usaremos en nuestra animación. En este capítulo emplearemos las herramientas de dibujo ubicadas en la barra de herramientas de Flash para crear algunos personajes y texto simples. Será realmente sorprendente comprobar que la creación de gráficos en Flash es un proceso muy simple, incluso si nunca hemos empleado un programa de dibujo basado en computadora. Para aprovechar al máximo las características que nos ofrece Flash, es importante que tengamos la confianza para experimentar y jugar con sus diferentes herramientas y opciones. La animación que crearemos en estas lecciones contará con una hormiga caminando por la pantalla, de izquierda a derecha. Como fondo tendremos un día soleado. Y finalmente agregaremos algo de texto explicativo, el cual también animaremos. EJERCICIOS CREACIÓN DE UNA NUEVA PELÍCULA DE FLASH Las secuencias de animación en Flash se llaman "movies" (películas). Pero no necesitamos una cámara de cine para crear una película de Flash; podemos crearla dibujando y animando personajes. En este ejercicio configuraremos un nuevo archivo y aprenderemos a modificar las dimensiones generales de la película. Primero que nada, hay que abrir el programa de Flash. Al hacerlo, Flash abrirá automáticamente un nuevo documento. En futuras ocasiones, cuando deseemos crear nuevas películas de Flash debemos seleccionar File (Archivo) > New (Nuevo). Análisis de las Propiedades de una Película Antes de iniciar propiamente, sigamos estas instrucciones para examinar las diversas propiedades con que cuenta una película: 1. Seleccionar Modify (Modificar) > Movie (Película). Flash presenta la caja de diálogo Movie Properties (Propiedades de Película) (Figura 1-1). 2. Dejar la opción Frame Rate (Velocidad de Cuadros) en su valor por defecto de 12 fps. "fps" significa cuadros por segundo y determina la fluidez con la que correrá la animación y por lo tanto la 1

8 manera como lucirá. 12 fps podría dar buenos resultados para la web. (Sólo como referencia, las películas de cine se reproducen a 24 fps, mientras que las películas Quicktime lo hacen frecuentemente a 12 fps.) 3. Dejar la opción Dimensions (Dimensiones) en su valor por defecto de 550 x 400 pixeles. Éste es un buen tamaño para empezar. Más adelante se podrá alargar o reducir la película. El tamaño más pequeño permitido es de 18 x 18 pixeles. El tamaño más grande es de 2880 x 2880 pixeles. Después de crear una película hay que utilizar la opción Match (Igualar) > Contents (Contenidos) para recortar el espacio no empleado. Las dimensiones de la película determinarán el tamaño que ésta ocupará en el navegador de web. 4. Hacer clic en OK para continuar. Es posible regresar y modificar las propiedades de la película en cualquier momento. Sin embargo, es recomendable establecer la velocidad de cuadros por segundo desde el principio. Figura 1-1 La caja de diálogo Movie Properties (Propiedades de Película) determina la velocidad de cuadros por segundo y el tamaño de nuestra película. DIBUJO DE UN NUEVO PERSONAJE Vamos a empezar nuestra nueva animación dibujando la hormiga con las herramientas de dibujo que nos ofrece la Toolbar (Barra de Herramientas) de Flash. Al estar trabajando, nos daremos cuenta que la mitad inferior de la barra contiene modificadores sensibles al contexto (Figura 1-2). Éstos nos ofrecen diferentes opciones dependiendo de la herramienta que hayamos seleccionado en la parte superior de la barra de herramientas. En la parte media de la barra de herramientas tenemos un menú desplegable próximo al símbolo "%" que permite realizar un acercamiento o alejamiento en la película. Vamos a dibujar nuestra hormiga en el gran espacio en blanco de la parte inferior izquierda del documento. Esta área se llama Stage (Escenario) y nos servirá, más tarde, para reproducir nuestra película. Es importante saber que el tamaño del Stage (Escenario) está determinado por las dimensiones en pixeles de la caja de diálogo Movie Properties (Propiedades de Película) que vimos anteriormente. Figura 1-2 La mitad superior de la barra de herramientas contiene las herramientas básicas, mientras que la mitad inferior cuenta con modificadores dependiendo de la herramienta seleccionada. 2

9 Dibujo de un Personaje Empleando la Herramienta Pencil (Lápiz) Para empezar, necesitamos: Figura 1-3 El gran espacio en blanco de la parte inferior izquierda del documento se llama Stage (Escenario) y es donde crearemos las imágenes centrales de nuestra animación. 1. Hacer clic en la herramienta Pencil (Lápiz) de la barra de herramientas. Al hacerlo, cambian las opciones de modificación de la mitad inferior de la barra. 2. Hacer clic en el botón de modificación del primer cuadro y mantenerlo presionado para ver las opciones de Pencil Mode (Modo de Lápiz). Es posible modificar el lápiz para dibujar formas como óvalos, rectángulos y líneas. O bien, para dibujar de forma libre dejando que Flash se encargue de suavizar o rectificar los trazos dependiendo del modo seleccionado. 3. En el menú desplegable Pencil Mode (Modo de Lápiz) seleccionar Oval (Oval). 4. Mover el cursor al área Stage (Escenario). Usar la herramienta Pencil (Lápiz) para dibujar tres óvalos sobrepuestos que formarán el cuerpo de la hormiga. A menos que seamos una especie de Rembrandt, nuestro dibujo quedará como en la Figura 1-4. Figura 1-4 Con la herramienta Pencil (Lápiz) en modo Oval (Oval) dibujamos el contorno del cuerpo de la hormiga. 5. Ahora, para darle profundidad a la hormiga, es necesario borrar la porción donde se intersecta cada una de las curvas (Figura 1-5), por lo que hay que seleccionar la herramienta Arrow (Flecha) de la barra de herramientas. Hacer clic en la porción de curva que se desea borrar y hacer clic en la tecla Backspace (Suprimir) o Delete (Borrar). Flash, automáticamente, elimina las líneas y curvas de las intersecciones. 6. Los insectos, si recordamos nuestras clases de biología en la secundaria, tienen seis patas. Así que 3

10 Figura 1-5 La hormiga una vez que utilizamos la herramienta Arrow (Flecha) para borrar algunas de sus líneas. hay que ponerle esas seis patas. Para ello hay que seleccionar de nuevo la herramienta Pencil (Lápiz). Hacer clic en el botón de modo Pencil (Lápiz) y seleccionar Smooth (Suavizar) para dibujar líneas en forma libre. 7. Dibujar seis patas a la hormiga. 8. Emplear la herramienta Pencil (Lápiz) en modo Smooth (Suavizar) para dibujar detalles adicionales como las antenas y la boca. 9. Finalmente, cambiar al modo Oval (Oval) y usar el Pencil (Lápiz) para dibujar un ojo en la cabeza de la hormiga. 10. El dibujo debe lucir como en la figura 1-6. Figura 1-6 Ya está! Una hormiga, o algo parecido. Guardar el Trabajo En este punto debemos guardar el trabajo que hemos hecho, para ello tenemos que: 1. Seleccionar File (Archivo) > Save (Guardar). 2. Asignar el nombre "ant.fla" al archivo (".fla" es la extensión de archivo estándar para las películas de Flash). 3. El menú desplegable Save File as Type (Guardar Archivo como Tipo) debe decir Flash Movie (Película de Flash). 4. Con el navegador del disco, seleccionar una carpeta donde se desee guardar el nuevo archivo. 5. Hacer clic en el botón Save (Guardar). Adición de Color con la Herramienta Paint Bucket (Cubeta de Pintura) Ahora seguiremos este procedimiento para añadir algo de color a nuestra hormiga: 1. En la barra de herramientas, seleccionar la herramienta Paint Bucket (Cubeta de Pintura). 2. Observar cómo al seleccionar Paint Bucket (Cubeta de Pintura), se alteró el área de modificadores. El primer modificador es ahora el menú desplegable Fill Color (Color de Relleno), que contiene los colores estándar que lucirán bien en la mayoría de los sistemas computacionales. (Técnicamente 4

11 hablando ésta es la paleta de colores compatibles con la web -web safe-.) De este menú desplegable, hay que seleccionar un color gris claro. 3. Con la herramienta Paint Bucket (Cubeta de Pintura), hacer clic dentro de cada sección del cuerpo de la hormiga para rellenarla de color. Dejar el ojo de color blanco. 4. Regresar al menú desplegable Fill Color (Color de Relleno) y seleccionar el color negro. 5. Con la herramienta Paint Bucket (Cubeta de Pintura), hacer clic dentro del ojo de la hormiga para rellenarlo de color negro. La hormiga debe lucir más o menos como en la Figura 1-7. Figura 1-7 Empleamos la herramienta Paint Bucket (Cubeta de Pintura) para darle algo de color a la hormiga. ADICIÓN DE MÁS ELEMENTOS AL DIBUJO Adición de un Fondo con las Herramientas Brush (Brocha) y Pencil (Lápiz) El siguiente paso es añadir un fondo a nuestro dibujo. La escena será un día soleado y pondremos algo de hierba para que la hormiga corra sobre ella. Podemos ver la Figura 1-8 como referencia para nuestro trabajo. Para empezar debemos: 1. De la barra de herramientas, seleccionar la herramienta Brush (Brocha), que luce como una brocha de pintura. 2. Del área de modificadores, usar el menú desplegable Fill Color (Color de Relleno) para seleccionar un color amarillo brillante. 3. El modificador que se encuentra debajo del menú desplegable Fill Color (Color de Relleno) es el menú desplegable Brush Size (Tamaño de Brocha). De ahí, seleccionar una brocha de tamaño medio a grande para dibujar la parte central del Sol. 4. En la parte superior del Stage (Escenario), dibujar un medio círculo para el Sol. 5. Ahora, del menú desplegable Brush Size (Tamaño de Brocha) hay que seleccionar una brocha más pequeña. 6. Dibujar algunos rayos para el Sol. Y ahora hay que seguir estos pasos para añadir algo de hierba a nuestro dibujo: 1. De la barra de herramientas seleccionar la herramienta Pencil (Lápiz). 2. En el menú desplegable de modo Pencil (Lápiz) seleccionar Line (Línea). 3. En el menú desplegable de color seleccionar un verde brillante. 4. En el menú desplegable Line Thickness (Ancho de Línea) seleccionar 8.0 para una línea delgada. 5. En el menú desplegable Line Style (Estilo de Línea) seleccionar la quinta opción, que dará un aspecto borroso a la línea. 6. En el Stage (Escenario), dibujar una línea debajo de la hormiga, más o menos a una pulgada de la 5

12 base del Stage (Escenario). (En la Lección 3 colocaremos los botones de control en esta área vacía, por lo que es buena idea dejar espacio libre desde este momento.) Adición de Texto Para terminar con nuestro dibujo, añadiremos algo de texto a la imagen, para lo cual debemos: 1. Seleccionar la herramienta Text (Texto), representada con la letra A en la barra de herramientas. 2. En el área de modificación establecer 24 puntos como el tamaño para la fuente tipográfica. 3. En el menú desplegable Text Color (Color de Texto) seleccionar un color azul medio. 4. En el Stage (Escenario), emplear la herramienta Text (Texto) y hacer clic a la derecha del Sol. 5. Introducir "Where s the Picnic?". Figura 1-8 Utilizamos las herramientas Brush (Brocha), Pencil (Lápiz) y Text (Texto) para terminar nuestro dibujo. SELECCIÓN CON LAS HERRAMIENTAS ARROW (FLECHA) Y LASSO (LAZO) En ejercicios pasados utilizamos brevemente la herramienta Arrow (Flecha) para seleccionar segmentos de línea. En esta sección aprenderemos a usar las herramientas Arrow (Flecha) y Lasso (Lazo) para seleccionar y mover partes de nuestro dibujo. Selección de Elementos Individuales con la Herramienta Arrow (Flecha) Las herramientas de selección en Flash trabajan de manera un poco diferente a las de los programas de dibujo basado en vectores estándar. Estos pasos nos ayudarán a familiarizarnos con la manera en que trabaja la herramienta de flecha: 1. En la barra de herramientas, seleccionar la herramienta Arrow (Flecha). 2. Con la herramienta Arrow (Flecha), hacer clic en la pata trasera de la hormiga. La pata aparecerá realzada para indicar que ha sido seleccionada (Figura 1-9). 3. Ahora hay que hacer clic en la pata delantera. La pata trasera permanecerá seleccionada. 4. Para eliminar la selección, hacer clic en una de las áreas vacías del Stage (Escenario). Ahora, hay que hacer clic nuevamente en la pata delantera y observar que en este momento es el único elemento seleccionado. 6

13 Figura 1-9 La pata trasera aparece realzada, indicando que ha sido seleccionada. Selección de Múltiples Elementos con la Herramienta Arrow (Flecha) Ahora vamos a seleccionar no uno sino varios elementos, para ello debemos asegurarnos que la pata delantera aparece realzada y: 1. Hacer doble clic en la pata delantera y observar que toda la hormiga aparece realzada -con algunas pequeñas excepciones-. 2. Ahora hay que posicionar el cursor sobre cualquiera de los segmentos realzados de la hormiga. Hacer clic y arrastrar para mover las secciones realzadas. Hay que observar que algunas partes de la hormiga quedaron en su posición original, por ejemplo el color de relleno, el ojo y cualquier otra línea que no se encontraba en contacto con el segmento sobre el cual hicimos doble clic. El dibujo debe lucir como la Figura Figura 1-10 Qué pasó? Desplazamos la hormiga sin seleccionar todas sus partes. 3. Seleccionar Edit (Edición) > Undo (Deshacer) para mover las líneas de la hormiga a su posición original. 4. Hacer clic en el color de relleno del cuerpo de la hormiga. Observar que se realza como el contorno. 5. Presionar la tecla Shift (Mayúsculas) y hacer clic en la pata trasera para eliminar su selección. 6. Para eliminar toda la selección, hacer clic con la herramienta Arrow (Flecha) en una de las áreas vacías del Stage (Escenario). 7. Para seleccionar rápidamente toda la hormiga, se puede utilizar la herramienta Arrow (Flecha) para trazar el área de selección alrededor de la hormiga. Para ello hay que posicionar la Arrow (Flecha) a la 7

14 derecha y un poco arriba de la hormiga. Hacer clic y arrastrar la flecha hacia abajo y a la izquierda, hasta que la caja de selección rodee completamente la hormiga. Comprobar que toda la hormiga se encuentra seleccionada. 8. Hacer clic en cualquier parte de la hormiga, y arrastrarla un poco a la derecha. Si se le ha seleccionado correctamente, la hormiga entera se moverá hacia su nueva posición. Si alguna de sus partes permanece atrás, hay que seleccionar Edit (Edición) > Undo (Deshacer) y volver a intentarlo. Selección de Elementos con la Herramienta Lasso (Lazo) Con frecuencia necesitaremos seleccionar un grupo de objetos irregular que no cabe en el rectángulo de selección de la herramienta Arrow (Flecha). En estos casos, la herramienta Lasso (Lazo) puede ayudarnos, tan sólo hay que: 1. En la barra de herramientas, seleccionar la herramienta Lasso (Lazo) que se encuentra a la derecha de la herramienta Magnifier (Magnificador). 2. Si la hormiga permanece todavía seleccionada, hacer clic en una de las áreas vacías del Stage (Escenario) para eliminar la selección. Como otra alternativa, es posible seleccionar Edit (Edición) > Deselect All (Eliminar Toda Selección). 3. Posicionar el Lasso (Lazo) cerca, pero fuera, de la hormiga. Hacer clic y arrastrar para dibujar una selección irregular alrededor de la hormiga entera. Ahora la hormiga entera debe aparecer totalmente seleccionada. Agrupamiento Es mucho más fácil hacer clic una sola vez para seleccionar la hormiga entera, sin tener que seguir los pasos que acabamos de ver. Al agrupar todas las diferentes partes de la hormiga, podemos convertirla en un objeto que puede ser fácilmente seleccionado y movido de lugar. 1. Para empezar, la hormiga debe continuar seleccionada. Si no lo está, hay que usar alguno de los métodos ya vistos para seleccionar todas sus partes. 2. Seleccionar Modify (Modificar) > Group (Agrupar). La hormiga debe contar ahora con un rectángulo de selección a su alrededor, el cual indica que el ítem está agrupado (Figura 1-11). Por ahora, hay que dejar la hormiga como un objeto agrupado. (Cuando necesitemos separar un grupo en sus elementos individuales, es necesario seleccionar Modify (Modificar) > Ungroup (Desagrupar) o Modify (Modificar) > Break Apart (Separar). Para entender la diferencia entre estas dos opciones podemos referirnos a los Help Topics (Tópicos de Ayuda) que Macromedia ha incluido en nuestro programa de Flash.) Figura 1-11 La selección rectangular realzada indica que las diferentes partes de la hormiga fueron agrupadas como un objeto. 8

15 Hemos terminado nuestro dibujo de la hormiga por ahora. En la siguiente lección animaremos los dibujos que hemos hecho. En la Lección 5, aprenderemos técnicas de dibujo más avanzadas para Flash. MÁS EJERCICIOS PARA AFINAR NUESTRAS HABILIDADES Creemos un nuevo documento de Flash y experimentemos con las herramientas de dibujo. Una por una, seleccionemos cada herramienta de la barra de herramientas. Hagamos clic en cada uno de los modificadores y veamos qué hace. Invirtamos algo de tiempo en experimentar con las herramientas Arrow (Flecha) y Lasso (Lazo) para seleccionar, eliminar la selección y mover partes de nuestro dibujo. 9

16 NOTAS: 10