Introducción - Altervista · 2015. 3. 23. · Laboratorio de Cómputo de Ingeniería Flash 5...

Laboratorio de Cómputo de Ingeniería Flash 5

Introducción

Las películas de Flash son imágenes de vectores interactivas y animaciones para los sitios Web. Los diseñadores de la Web utilizan Flash para crear controles de navegación, logotipos animados y animaciones con sonido sincronizado. Las películas Flash son imágenes de vectores 1compactas que se descargan y se adaptan de inmediato al tamaño de la pantalla del usuario. Es más que probable que hayas visto e incluso utilizado películas Flash en muchos sitios Web. El Reproductor Flash reside en un sistema local, donde puede reproducir películas en navegadores o como aplicaciones independientes. Flash ofrece nuevas funciones para la creación de sitios Web interactivos interesantes y atractivos. El trabajo en Flash para la creación de una película2 incluye el dibujo o la importación de una ilustración, su organización y su animación con la Línea de tiempo. La película se hace interactiva al prepararla para que responda a determinados eventos y cambie en los sentidos determinados por el usuario. Cuando la película está completa, se exporta como película de Reproductor Flash, se incrusta en una página HTML y se transfiere junto con la página HTML a un servidor Web. Entre las nuevas funciones de reproducción se incluyen: Flujos de sonido MP3, campos de texto para que el usuario pueda incluir texto modificable en una película y mejoras en las acciones que permiten a Flash crear juegos, formularios y cuestionarios. Entre las nuevas funciones de creación se incluyen: un proceso de publicación fluido, una ventana de biblioteca con diseño nuevo, nuevos inspectores y una interfaz gráfica mejorada en la cual los inspectores de objetos y de transformaciones permiten ver y manipular la posición, escala, rotación e inclinación de los objetos seleccionados. Así pues al término de este curso podrás: - Conocer los elementos que comprende una aplicación multimedia - Desarrollar los elementos para conformar una animación - Crear una aplicación multimedia Éste manual está dividido en prácticas, en donde el usuario podrá aplicar los conocimientos impartidos en el curso. Antes de comenzar con el desarrollo de dichas prácticas, es necesario entender los conceptos básicos con los que flash trabaja; éstos conceptos se explican a continuación.

1 Checar Referencia de imágenes de Vectores En la Página 6, de éste manual. 2 En este manual se hará referencia a Película o animación en forma indistinta.

Capacitación


Conceptos Básicos

Abriendo Flash Para ejecutar Flash, da un Doble Click en el icono de Flash 5 o ve a Inicio, Programas y seleccione Flash 5 de Macromedia. Área de trabajo de Flash Las áreas en las que se trabaja cuando se crea una película de Flash son: el Escenario, área rectangular donde se reproduce la película; la ventana de Línea de tiempo, donde se animan las imágenes; la ventana de Biblioteca, donde se organizan los componentes de los medios reutilizables de la película, denominados símbolos, y las ventanas de edición de símbolos, donde se crean y modifican los símbolos. Propiedades de la película

Capacitación

1


a) Para la velocidad de frame3s, introduce en Frame Rate el número de frames de animación que deben mostrarse cada segundo. La mayoría de las animaciones que se visualizan en los sistemas locales, especialmente las que se reproducen desde un sitio Web, no necesitan una velocidad mayor de 8 a 12 fps (frames por segundo).

b) Para el tamaño, usa una de las siguientes opciones:

Para especificar el tamaño en pixeles, introduce en Dimensions valores de anchura y altura. El tamaño de película predeterminado es de 550 por 400 pixeles. El tamaño mínimo es de 18 por 18 pixeles; el máximo es de 2880 por 2880 pixeles.

Para establecer el tamaño del escenario de forma que el espacio que rodea el contenido sea igual en todos los lados, haz Click en Match: Contents.

Para establecer el tamaño del escenario con la mayor área de impresión posible, haz Click en Match: Printer. El área de impresión la determina el tamaño de papel que esté seleccionado en el área de Márgenes del cuadro de diálogo Configurar página, menos los márgenes establecidos.

c) Para establecer el color de fondo de la película, escoge un color en la muestra de

colores de Fondo.

d) Selecciona la unidad de medida en la opción Ruler Units. El Escenario Una película de Flash, se divide en frames. Es en el escenario donde se visualizan y componen los frames individuales de la película, mediante su dibujo o con la organización de ilustraciones importadas.

3Un Frame es una unidad gráfica que almacena en un instante x, un porción de una escena, o bien el cuadro por segundo de una película.

Capacitación

2

Laboratorio de Cómputo de Ingeniería Flash 5 La ventana de Línea de Tiempo Es donde se coordina el tiempo de la animación y se ensambla la ilustración en distintas capas. La ventana de línea de tiempo muestra todos los frames de la película. Las capas actúan como una pila de acetato transparente; mantienen la ilustración por separado, de forma que puedan combinarse distintos elementos en una imagen.

Ventana de biblioteca Es un contenedor donde se guardan y organizan los símbolos creados en Flash, además de archivos importados tales como archivos de sonido, imágenes de mapa de bits o videos. Los símbolos pueden ser imágenes, botones o clips de película.

Ventana de Biblioteca (Library Window)

Capacitación

3

Laboratorio de Cómputo de Ingeniería Flash 5 Uso de la paleta de herramientas Las herramientas de la paleta de herramientas permiten dibujar, seleccionar, pintar y modificar ilustraciones. Otras herramientas permiten cambiar la visualización del escenario. La mayoría de las herramientas cuentan con modificadores auxiliares para las tareas de pintado o edición.

Acerca de las imágenes de vectores y mapas de bits Los sistemas muestran imágenes en formato de vectores o de mapa de bits. Es muy importante comprender la diferencia entre ambos formatos para poder utilizarlos de la forma más eficaz. Flash permite crear y animar imágenes de vectores compactas. También permite importar y manipular imágenes de mapa de bits creadas en otras aplicaciones. Imágenes de vectores Los elementos gráficos de vectores representan imágenes mediante líneas y curvas, denominadas vectores, y tienen propiedades de color y posición. Cuando se edita una imagen de vectores, se modifican las propiedades de las líneas y curvas que definen su forma. La posición, el tamaño, la forma y el color de las imágenes de vectores puede cambiarse sin que por ello pierdan calidad. Las imágenes de vectores no dependen de la resolución, de pantalla, es decir se trabajan a cualquier resolución; sin embargo si dependen de la resolución del periférico de salida.

Capacitación

4

Laboratorio de Cómputo de Ingeniería Flash 5 Imágenes de mapa de bits Los elementos gráficos de mapa de bits representan imágenes mediante puntos de color, denominados pixeles, que están organizados en una cuadrícula. Un mapa de bits que representa una imagen bitmap se representa mediante el valor específico de posición y color de cada píxel en la cuadrícula, que crea una imagen similar a la de un mosaico. La visualización de un mapa de bits depende de la resolución de pantalla; es decir que si se escala o visualiza a una resolución mayor de la estipulada, nuestra imagen se verá distorsionada y por consiguiente perderá calidad visual.

Capas Las capas (Layers) son como hojas de acetato transparente apiladas. Cuando una capa está vacía, las capas situadas debajo pueden verse a través de ésta. Una película creada con Flash contiene una capa. Añade más capas para organizar las ilustraciones y la animación de las películas. El número de capas que pueden crearse sólo está limitado por la memoria del sistema. Las capas no aumentan el tamaño del archivo de la película publicada. Los objetos de una capa pueden dibujarse y editarse sin que afecten a objetos de otras capas. Además, las capas de guías pueden utilizarse para facilitar el dibujo y la edición y, las capas de máscara para facilitar la creación de efectos sofisticados. Utiliza capas separadas para los archivos de sonido y de acciones. De este modo encontrarás las acciones y los sonidos con mayor facilidad cuando tenga que editarlos. Creación de capas Cuando se crea una capa nueva, ésta aparece encima de la capa seleccionada. La última capa creada es la capa activa. Para crear una capa: Selecciona Insert > Layer ó da Click en el botón Add Layer que se encuentra en la parte inferior de la línea de tiempo.

Capacitación

5

Laboratorio de Cómputo de Ingeniería Flash 5 Edición de capas En la capa activa se puede dibujar y pintar. Selecciona una capa para activarla. El icono de lápiz situado junto al nombre de la capa indica que es la capa activa. Sólo puede estar activa una capa. Los objetos pueden editarse en las capas desbloqueadas y visibles. Las capas pueden bloquearse para protegerlas de posibles cambios y ocultarse para mantener el área de trabajo despejado. Los objetos pueden verse como contornos en cualquier capa, puede determinarse el color del contorno y cambiar la posición de la capa.

Animación La animación se crea mediante el cambio del contenido de frames sucesivos. Puede hacer que un objeto se desplace a lo largo del escenario, aumente o disminuya de tamaño, gire, cambie de color, aparezca o desaparezca, o cambie de forma. Los cambios pueden ocurrir por separado o combinados entre sí. Por ejemplo, puede hacer que un objeto gire a medida que aparece y se desplaza por el escenario. Flash ofrece dos maneras de crear secuencias de animación: frame a frame y por interpolación (Tweening). En la primera, debe crear la imagen de cada frame, y en la segunda, sólo crea los frames inicial y final y Flash crea los intermedios. Cada frame en el que cambia algo en el escenario es un frame clave (Keyframe) . La animación frame a frame aumenta el tamaño del archivo de forma mucho más rápida que la interpolada. Distinción de las animaciones en la línea de tiempo Flash distingue la animación frame a frame de la interpolada en la línea de tiempo de la siguiente forma: Los frames clave de interpolación de movimiento (Keyframes) tienen un punto negro; los

frames intermedios muestran una flecha negra sobre fondo azul claro. Los frames clave de la interpolación de forma tienen un punto negro; los frames intermedios

muestran una flecha negra sobre fondo verde claro.

Capacitación

6

Laboratorio de Cómputo de Ingeniería Flash 5 Una línea discontinua indica un problema en la interpolación.

Los frames clave simples tienen un punto negro; los frames de color gris claro situados tras

ellos tienen el mismo contenido. Los frames clave vacíos tienen un punto negro hueco.

Una “a” pequeña indica que al frame se le asignó una acción de frame con el cuadro de diálogo

Propiedades de frame. Previsualización y prueba de películas Conforme vayas creando una película, necesitarás reproducirla para ver la animación y probar los controles interactivos. Las opciones disponibles son las siguientes: Para probar la animación sencilla, los controles interactivos básicos y el sonido, utiliza el controlador o el comando Reproducir, para realizar una visualización previa de la película dentro del entorno de creación de Flash. (Window > Controler ó Control >Play) Para probar toda la animación y todos los controles interactivos, usa los comandos Probar película (Control > Text Movie o Ctrl + Enter ) y Probar escena (Control > Text Scene o Ctrl. + Alt + Enter) para crear películas de Reproductor Flash que se reproduzcan en otra ventana. Para probar la película en un navegador Web, utiliza el comando File > Publish Preview > HTML. Uso de Máscaras Una capa de máscara oculta todo aquello que está vinculado a dicha capa, excepto el lugar donde se sitúa el objeto con relleno. Un objeto de tipos en la capa de máscara crea un agujero a través del cual se ve el contenido de las capas situadas debajo. Las capas de máscara pueden contener una sola forma, instancia u objeto de tipo.

Para crear una capa de mascarilla

1. Crea una capa que incluya el contenido que desea mostrar a través de los agujeros de la

máscara. 2. Asegúrate de que la capa creada está seleccionada y elige Insertar > Capa para crear una capa nueva encima.

Una capa de máscara siempre cubre la capa situada debajo, por tanto asegúrate de crear la capa en el lugar correcto.

3. Dibuja una forma rellena, coloca un tipo o crea una instancia de un símbolo en la capa de máscara. Flash ignora los mapas de bits , degradados, transparencias, colores y estilos de línea en una capa de máscara. Todas las áreas rellenas de una máscara son transparentes; y las áreas no rellenas son opacas.

Capacitación

7

Laboratorio de Cómputo de Ingeniería Flash 5 Uso de capas de guías Para facilitar el dibujo, utiliza capas de guías. Puede visualizarse una cuadrícula de fondo en todas las escenas o crear una ayuda personalizada en una capa y designarla como la capa de guías. La capa de guías se señalan con un emblema de guía que se muestra delante del nombre de la capa. La capa de guías no se ve en las películas del Reproductor Flash publicadas.

Para designar una capa como capa de guía: Haga Click en el botón derecho del ratón (Windows) y elija Guía en el menú contextual.

Para cambiar la capa de guías a capa normal: Seleccione la capa y elige Guía en el menú contextual de esa capa. Nota: Sitúa todas las capas de guías en la última posición de la serie de las capas. De este modo se evita arrastrar de forma accidental una capa normal sobre una capa de guías y convertirla en una capa de guía de movimiento.

Guías de movimiento Las capas de guía de movimiento permiten dibujar trazados a lo largo de los cuales se animan instancias, grupos y bloques de tipos interpolados. Puedes vincular varias capas a una capa de guía de movimiento para hacer que varios objetos sigan el mismo trazado. Al vincular una capa normal a una capa de guía de movimiento se convierte en una capa con guía. Los trazados flexibilizan la animación, obligando a un símbolo a seguir un camino determinado sin necesidad de crear más keyframes que el inicial y el final. Para crear un trazado debes de seleccionar la capa que contendrá la animación y pulsamos el botón Añadir Capa guía. Símbolos e instancias Los símbolos son imágenes reutilizables que se crean con las herramientas de dibujo. Cuando se coloca un símbolo en el escenario o dentro de otro símbolo, se está creando una instancia del símbolo. Los símbolos reducen el tamaño de los archivos, ya que Flash, sin considerar el número de instancias creadas, sólo guarda una copia en el archivo.

Capacitación

8

Laboratorio de Cómputo de Ingeniería Flash 5 Los símbolos también son parte esencial en la creación de películas interactivas. Por ejemplo, los botones sobre los que puede hacer Click y que cambian en respuesta al puntero del ratón son un tipo de símbolos. Otro tipo de símbolo, el clip de película, también se utiliza para crear películas interactivas más elaboradas.

Creación de símbolos Puede crear un símbolo a partir de los objetos seleccionados en el escenario o crear un símbolo vacío y llenarlo en modo de edición de símbolos. Los símbolos pueden tener toda la funcionalidad disponible en Flash, incluida la animación. Mediante los símbolos con animación pueden crearse películas con mucho movimiento al mismo tiempo que se reduce al mínimo el tamaño del archivo. Considera la posibilidad de crear animación en un símbolo cuando exista una acción repetitiva o cíclica, por ejemplo el movimiento hacia arriba y hacia debajo de las alas de un pájaro. Para crear un símbolo nuevo con elementos seleccionados:

1 Selecciona elementos en el escenario y elige Insert > Convert to Symbol (F8)

2 En el cuadro de diálogo Propiedades de símbolo, escribe el nombre del símbolo y elige Gráfico, Botón o Clip de película en Comportamiento. Los elementos seleccionados se convierten en un solo objeto que es una instancia del símbolo. Los elementos también se copian en un símbolo nuevo en la biblioteca.

Los elementos seleccionados se convierten en un solo objeto que es una instancia del símbolo. Los elementos también se copian en un símbolo nuevo en la biblioteca. Para crear un nuevo símbolo vacío:

1 Asegúrate de que no hay nada seleccionado en el escenario y realiza uno de los siguientes pasos:

Selecciona Insert > New Symbol o bien, Haz Click en el botón New Symbol en la parte inferior de la ventana de biblioteca o bien, Elige New Symbol, en el menú Opciones en la ventana de biblioteca.

Capacitación

9


2 En el cuadro de diálogo Propiedades de símbolo, escribe el nombre del símbolo y elige Clip de película , Botón, o Gráfico en Comportamiento.

3 Para crear el contenido del símbolo, utiliza la línea de tiempo, dibuja con las herramientas

de dibujo, importa medios o crea instancias de otros símbolos. Ventana de edición de

Símbolos

4 Cuando hayas terminado de crear el contenido del símbolo, selecciona Edit > Edit Movie o (Ctrl+E) para salir del modo de edición de símbolos.

Ventana de exploración Ésta ventana es un asistente que te ayudará a identificar qué es lo que contiene tu película; es decir, si tiene texto, gráficos, botones e inclusive sus acciones, sonidos, etc. Ésta ventana nos ayudará a tener fácil acceso a los símbolos ya que se despliega en forma de árbol. Presiona (Window > Movie Explorer) o la llave corta Ctrl+Alt+m para que te muestre la ventana

Capacitación

10

Laboratorio de Cómputo de Ingeniería Flash 5 Creación de botones Un botón es un tipo de símbolo que puede mostrar una imagen distinta para cada uno de los posibles estados del botón y realizar una acción determinada cuando el usuario interactúa con el botón mediante el ratón. Los distintos estados del botón se especifican con la creación de frames clave (Keyframes) en una línea de tiempo de cuatro frames. Para consultar una lección interactiva sobre la creación de botones en Flash, elige Help > Lessons > Buttons. Para que un botón sea interactivo en una película, coloca una instancia del símbolo del botón en el escenario y asigna acciones a la instancia. Cada frame de la línea de tiempo de un símbolo de botón tiene una función específica:

El primer frame, el estado Arriba (Up), muestra el botón tal cual, siempre y cuando el puntero no esté sobre el. El segundo frame, el estado Sobre (Over), representa el aspecto del botón cuando el puntero se encuentra sobre el mismo. El tercer frame, el estado Abajo (Down), representa el aspecto del botón cuando se hace Click sobre el mismo.

El cuarto frame, el estado Acierto (Hit), define el área que responderá al ratón. Esta área es invisible en la película.

Para crear un botón: Asegúrate de que no hay nada seleccionado en el escenario y selecciona Insert > New Symbol (Ctrl+F8) . En el cuadro de diálogo Propiedades de símbolo, escribe un nombre para el símbolo de botón nuevo y elige Botón en Comportamiento. Flash cambia al modo de edición de símbolos. La cabecera de la línea de tiempo cambia para mostrar cuatro frames consecutivos denominados: Arriba (up), Sobre (over), Abajo(down) y Acierto (hit). El primer frame, Arriba, es un frame vacío. Para crear la imagen del botón en los diferentes estados, utilice las herramientas de dibujo, importe un gráfico o coloque una instancia de otro símbolo en el escenario. En un botón puede utilizarse un clip de película o un símbolo gráfico, pero no puede utilizarse otro botón. Utilice símbolos de clips de película si desea crear un botón animado.

Capacitación

11

Laboratorio de Cómputo de Ingeniería Flash 5 (a) (b) (c) (d) (a) Imagen con la que iniciará tu botón (up). (b) Imagen que se mostrará cuando el ratón pase por arriba del botón (over). (c) Imagen que se mostrará cuando des Click al botón (down). (d) Área sensible al ratón (hit). Acerca del Sonido en Flash. Para importar un sonido:

1. Elija File > Import. 2. En el cuadro de diálogo de importación estándar, localice y abra el archivo MP3, AIFF, ó

WAV. Para añadir sonidos a una película debes crear una capa adicional, asignar el sonido y establecer opciones en la carpeta de Sonido del cuadro de diálogo. Para ello debes de dar Click derecho en el primer frame, seleccionar panels y luego la carpeta de sonido (Sound).

ón

Capacitaci

12

Laboratorio de Cómputo de Ingeniería Flash 5 Flash pone valores predeterminados, si deseas editarlos cambia los valores de Efectos y/o Sincronización. Opciones de Efectos: Nosotros podemos dar diferentes efectos a nuestro sonido, como por ejemplo: cambios a los distintos canales y descenso o ascenso de volumen. Opciones de sincronización: • Evento.- Sincroniza el sonido con un evento. Un evento de sonido no comienza a sonar hasta

que aparece el fotograma clave inicial y suena por completo, independientemente de la línea de tiempo, aunque la película se detenga. Al reproducir la película publicada los eventos de sonido se mezclan.

• Inicio.- Es igual que Evento, pero si el sonido ya se está reproduciendo, inicia una nueva instancia.

• Detener.- Detiene el sonido especificado. • Flujo.- Sincroniza el sonido para reproducirlo en un sitio Web, Flash hace que la animación

vaya a la misma velocidad que los flujos de sonido. En los eventos de sonido, si la animación se detiene también lo hacen flujos de sonido.

Al igual que con los símbolos, sólo es necesaria una copia de archivo de sonido para utilizar el sonido de varias formas en la película. Las características o propiedades que tenemos en nuestra consola de sonido son las que se muestran en la imagen que a continuación se presenta:

Capacitación

13


Capacitación

14


PRACTICA 1

Objetivo Esta primer práctica tiene como objetivo familiarizarse con la interfaz de Flash, así como aprender a crear una animación usando elementos básicos utilizando las herramientas de la paleta de dibujo, y como parte final se aplicarán movimientos y efectos sencillos a objetos de la película. Al final de la práctica se obtendrá una imagen como la que se muestra a continuación (figura 1), logrando que el barco se desplace de izquierda a derecha al movimiento de la olas.

( figura 1 ) Desarrollo Para realizar esta práctica, es necesario seguir los siguientes pasos:

1. Crea una nueva película con dimensiones de 550 x 400 pixeles con fondo blanco.

1.1 Selecciona del menú File la opción New

Capacitación

15


1.2 Selecciona Modify > Movie y cambia las propiedades modificando las dimensiones y color del fondo del escenario.

2. Tienes que crear un cielo, un sol, unas nubes y olas en el escenario, para esto haz lo siguiente:

2.1 Selecciona el primer keyframe vacío de la línea de tiempo. Utiliza en la paleta de herramientas la opción del rectángulo y traza un cuadrado que abarque todo el escenario, esto hará la función de cielo.

2.2 Cambia el color del rectángulo utilizando la paleta de color, y crea un degradado que se difumine de un azul con coordenadas RGB (53,96,223) a un tono con coordenadas RGB (121,223,224).

Capacitación

16


2.3 Crea otra capa o layer, y de igual forma utiliza la paleta de herramientas para crear un sol, selecciona la opción “elipse” para crear un círculo y dibújalo con un gradiente, esto se lo indicas en las opciones de degradado.

2.4 Para crear las nubes usaras la brocha ubicada también en la paleta de herramientas, esto lo tendrás que realizar en otra capa o layer. Nota. Utilizando los diferentes estilos de brocha podrás darle mejor efecto a las nubes.

2.5 Para realizar las olas, tendrás que crearlas en tres diferentes capas o layers debido a que les daremos diferentes movimientos. Para dibujar las olas utiliza la herramienta del lápiz , selecciona un estilo de línea para mayor facilidad en el trazo del dibujo. ( figura 2 )

( figura 2 )

Capacitación

17


3. Anima las olas que vayan en sentidos distintos unas de otras.

3.1 Posiciona el puntero en el keyframe donde se encuentra la “ola” que quieras animar, en seguida arrastra el keyframe al frame 20, notaras que los frames intermedios están en blanco, para corregir esto tendrás que regresar el keyframe a la posición original. Ahora podrás mover la cabeza lectora a cualquier frame de la capa y se encontrará el dibujo de la “ola” en todos los frames.

3.2 Una vez realizado el paso anterior, posiciónate en el keyframe y da click

derecho , observa que aparece un menú, escoge la opción Create Motion Tween ( figura 3 ). En seguida, tendrás que insertar un keyframe en el frame 20; para esto debes de dar click derecho en el frame y seleccionar Insert keyframe ó la llave corta ( F6 ). ( figura 4 )

(Figura 4) (Figura 3)

3.3 Una vez creado el keyframe en el frame 20, tendrás que mover el objeto (la “ola”) a la posición que deseas que se desplace. Mueve la cabeza lectora y observa la animación que creaste. Realiza la misma operación para las demás olas que deseas animar.

Capacitación

18


3.4 Ahora, tendrás que crear (dibujar) un barco y animarlo como se muestra en la figura siguiente (figura 5). Todo lo podrás hacer con los conceptos y conocimientos que obtuviste en los pasos 3.1 – 3.3

(figura 5 ) Una vez terminada la animación, la puedes previsualizar y probar.

Capacitación

19


PRACTICA 2 Objetivo En la siguiente práctica se aplicarán dos herramientas importantes que maneja Flash, estos dos conceptos son: Add Motion Guide y las Mascarilla (Mask). Desarrollo Primero practicaremos el manejo del Add Motion Guide con una simulación de una pluma que escribe un texto, para ello debes de seguir los siguientes pasos:

1. Debes de importar el elemento Pluma fuente.gif del directorio que te indique el instructor. 1.1 Para ello debes seleccionar del menú File > Import o la llave corta Control + R, a continuación aparecerá una ventana como la que se muestra en la ( figura 2.1); debes de seleccionar el tipo de formato que desees importar, en este caso debes de escoger el tipo gif para que luego selecciones la imagen y dar click en el botón Abrir.

( figura 2.1 )

2. Una vez importada la pluma, crea otro layer y genera un texto cualquiera. .

Capacitación

20


3. Ubícate en el layer donde se encuentra la pluma y da click derecho sobre el layer, observa que aparecerá un menú, escoge la opción Add Motion Guide; te agregará un layer en la parte superior con una imagen como la que se muestra a continuación.

3.1 En éste nuevo layer se trazará la guía que la pluma debe de seguir, para ello debes de dibujar con el lápiz de la paleta de herramientas el trazo del texto que creaste.

3.2 A continuación , en el layer donde se encuentra la pluma crea un Motion Tween; en el primer keyframe posiciona el eje de la pluma que va hacer la posición con la que va a iniciar, haz el mismo paso para el último keyframe es decir, donde quieres que termine la animación.

3.3 Prueba la película y observa que la pluma sigue la guía que tú trazaste. Para explicar las mascarillas (mask) crearemos una animación donde por medio de un telescopio observarás el universo, como la imagen que se muestra a continuación:

Capacitación

21

Laboratorio de Cómputo de Ingeniería Flash 5 Debes de seguir los siguientes pasos:

1. Importa en diferente layers los siguientes elementos: 1. Telescopio.gif 2. Cometa.gif 3. Universo.gif

Nota: Es importante que los acomodes en el mismo orden que se mencionan.

2. Crea un nuevo layer entre el telescopio y el cometa, ponle el nombre de “hoyo”, da click derecho y selecciona Mask. Observa que tengas en tu línea de tiempo una imagen parecida a la que se muestra a continuación.

3. En el layer del “hoyo”, debes de crear un círculo y animarlo como quieras que se vaya viendo el universo.

4. Prueba la película y observa que solo se vera lo que este dentro del círculo.

Capacitación

22


PRACTICA 3 Objetivo En ésta práctica se aplicarán los conceptos de símbolos e instancias y creación de botones de navegación. Desarrollo Se tendrá que crear una animación de un pacman, que vaya desplazándose de un lado a otro comiéndose las perlas y huyendo de los fantasmas. Debes de seguir los siguientes pasos para la realización de la práctica.

1. Importa Escenario.Ai 2. Crea un nuevo símbolo (Insert>New Symbol) escoge la opción de Movie Clip, y

asígnale el nombre de Pacman. 2.1 Dentro del símbolo importa los elementos PacMan.Ai y PacMan_cerrado.Ai cada elemento debe de estar en una capa diferente. 2.2 Ambos Pacman deben tener 2 frames ocupados. Al Pacman cerrado debes insertarle al principio 2 frames en blanco para ello posesiónate al principio de la capa y con el botón derecho escoge la opción Insert Blank Keyframe o con la llave corta F7

3. Crea un nuevo Movie Clip y asígnale el nombre de Fantasmas.

3.1 Dentro del movie clip importa el archivo Fantasma.Ai. Una vez que se ha importado el archivo dentro de nuestra librería selecciona el fantasma y conviértelo en símbolo gráfico (Insert>New Symbol).

Capacitación

23


NOTA: Cuando se importa el archivo de fantasma.Ai se pueden observar dentro de la librería distintos símbolos que se generan de forma automática; estos símbolos en conjunto conforman el fantasma. Para no confundirnos crea una carpeta dentro de la librería y asígnale el nombre “trazado fantasma”. Selecciona todos los símbolos del fantasma y arrástralos dentro de la carpeta.

Crear carpeta

3.2 Genera tres capas, cada una debe contener el mismo símbolo gráfico del fantasma. (esto es conocido como instancia)

3.3 Para cambiarle el color a los fantasmas selecciona uno por uno y da clickkk derecho en el símbolo, una vez hecho esto selecciona Panels > Efects.

En la ventana de efectos escoge la opción de tinta, esto servirá para que puedas cambiar al color de tu preferencia el fantasma seleccionado.

Capacitación

24


3.4 A cada capa aplícale 15 frames y Create Motion Tween. Después crea movimientos ascendentes y descendentes a cada fantasma.

4. Crea un nuevo Movie Clip y asígnale el nombre de “fantasma rojo”. Arrastra hacia el

nuevo Movie Clip el gráfico fantasma

4.1 Colorea este fantasma de rojo de la misma forma que lo hiciste con los demás. 4.2 Aplica Create Motion Tween y genera la ruta que ha de tener el fantasma. 4.3 Para observar la ruta que toma el fantasma puedes arrastrar el escenario dentro de tu Movie Clip y utilizarlo como referencia o selecciónalo como guía .

5. A continuación tendremos que generar la ruta del Pacman y dar el efecto de cómo desaparecen las perlas. Para ello crea un nuevo Movie Clip con el nombre de Pacman Come.

4.4 Arrastra de tu librería el Movie Clip de Pacman y verás que automáticamente

se genera una capa. 4.5 Para poder observar la ruta que ha de seguir el Pacman arrastra tu escenario al Movie Clip y posesiónalo debajo de la capa del Pacman. 4.6 Genera la ruta que ha de seguir el Pacman utilizando Create Motion Tween. 4.7 Para cubrir las perlas al paso del Pacma crea rectángulos negros que irán creciendo y desplazándose; para ello tienes que aplicar Create Motion Tween y Scale de Propiedades.

NOTA: Tendrás que crear una capa por cada rectángulo.

4.8 Una vez que tengas la animación de la ruta del Pacman y las perlas, borra la capa del escenario.

Capacitación

25

Laboratorio de Cómputo de Ingeniería Flash 5 6. Ahora crearemos los botones de Play y Stop.

6.1 Crea un símbolo gráfico (Insert >New Symbol) llamado”botón rojo”. 6.2 Utilizando la herramienta ovalo dibuja tu botón de color rojo. 6.3 Crea un botón (Insert >New Symbol) llamado Play. Dentro del botón arrastra tu

símbolo llamado botón rojo. 6.4 Crea un Movie Clip llamado Movie Play y dentro de el escribe la palabra Play.

Aplícale un Create Motion Tween , dale un movimiento de arriba hacia abajo y aplica el efecto Alpha para darle efecto de desvanecido.

6.5 Posiciónate dentro de tu botón rojo e inserta un Keyframe en el recuadro UP. Esto indica como se verá nuestro botón sin que se pase el ratón encima o se le dé clickkk. 6.6 Inserta un Keyframe en el recuadro Over y estando posicionado en el aplícale a tu botón rojo efecto Alpha (Properties) de 50% para que se vea más claro. 6.7 Crea una nueva capa y arrastra en ella tu Movie Clip llamado Movie Play e inserta en el recuadro OVER un keyframe 6.8 Alinea tus elementos (Window>Panels>Align) o la llave corta ctrl.+k. 6.9 Para crear tu botón de Stop sigue los pasos anteriores, del punto 6.1 al 6.8

Capacitación

26

Laboratorio de Cómputo de Ingeniería Flash 5 7 Ahora inserta en tu escena principal todos tus elementos que haz creado. Pon especial

cuidado en acomodar el Pacman y el Fantasma Rojo sobre el escenario de las perlas. 8. Importa en una capa nueva el archivo Cerezas. Ai y conviértelo en símbolo. Al igual que el Pacman crea una carpeta para guardar los símbolos que se crean de forma automática. 8.1 Dale animación a las cerezas usando Create Motion Tween. 9. Crea una nueva capa y en ella escribe el texto READY!!!!! con color rojo. 9.1 Intercala Keyframes en blanco para dar el efecto de parpadeo.

10. Inserta una nueva capa, tendrás que crear etiquetas ( Panels >frame >label), mismas que serán necesarias para programar tu animación. 11. En el último frame de la película, cambia las propiedades haciendo que vaya a la etiqueta que creaste , es importante que selecciones en la parte inferior izquierda de las propiedades el check box para que cuando llegue la cabeza lectora en esta posición ejecute la acción que le asignaste. Esto servirá para que se genere un loop a un lugar en específico de la película.

Capacitación

27


De esta forma estas generando una navegación dentro de una película en flash. Las etiquetas nos permiten dividir la escena en distintas zonas de información.

Capacitación

28


Universidad La Salle Directorio: H. Raúl Valadez García, FSC Rector Ing. Edmundo Barrera Monsivais Vicerrector Académico Hno. Martín Rocha Pedrajo Vicerrector de Formación Ing. José Antonio Torres Hernández Director de la Escuela de Ingeniería Ing. Raúl Morales Farfán Secretario de Talleres y Laboratorios Ing. Luis M. Aguillón Banda Jefe del Laboratorio de Cómputo de Ingeniería Realización Enrique Osorio Farías

Líder de Proyectos

Revisión Ing. Liliana Vicenteño Loya Coordinadora Académica LCI

Laboratorio de Cómputo de Ingeniería MMI

Capacitación

29


Índice

Página

Introducción Conceptos básicos.................................................................................................................................1

- Abriendo Flash.............................................................. ...................................................1 - Área de trabajo..................................................................................................................1 - Propiedades de la película.................................................................................................1 - Escenario...........................................................................................................................2 - La ventana de Línea de tiempo.........................................................................................3 - Ventana de biblioteca........................................................................................................3 - Uso de la Paleta de herramientas.......................................................................................4 - Vectores.............................................................................................................................4 - Mapas de bits.....................................................................................................................5 - Capas.................................................................................................................................5

- Creación de capas...................................................................................................5 - Edición de capas....................................................................................................6 - Animación ........................................................................................................................6 - Previsualización o prueba de películas............................................................................7 - Mascaras............................................................................................................................7 - Guías.................................................................................................................................8 - Guías de movimiento....................................... ................................................................8 - Símbolos e instancias....................................... ................................................................8

- Creación de símbolos..............................................................................................9 - Ventana de exploración...................................................................................................10 - Creación de botones....................................... ................................................................11 - Sonido................................................................. ...........................................................12

Prácticas

Capacitación

30

Introducción - Altervista · 2015. 3. 23. · Laboratorio de Cómputo de Ingeniería Flash 5...

Documents

Transcript of Introducción - Altervista · 2015. 3. 23. · Laboratorio de Cómputo de Ingeniería Flash 5...