Descargar - Tutoriales

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
2
Checar Referencia de imágenes de Vectores En la Página 6, de éste manual.
En este manual se hará referencia a Película o animación en forma indistinta.
Capacitación
Laboratorio de Cómputo de Ingeniería
Flash 5
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
Laboratorio de Cómputo de Ingeniería
Flash 5
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.
3
Un 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
Laboratorio de Cómputo de Ingeniería
Flash 5
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
(a)
(b)
Flash 5
(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).
Capacitación
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
Laboratorio de Cómputo de Ingeniería
Capacitación
Flash 5
14
Laboratorio de Cómputo de Ingeniería
Flash 5
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
Laboratorio de Cómputo de Ingeniería
Flash 5
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
Laboratorio de Cómputo de Ingeniería
Flash 5
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
Laboratorio de Cómputo de Ingeniería
Flash 5
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
Laboratorio de Cómputo de Ingeniería
Flash 5
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
Laboratorio de Cómputo de Ingeniería
Flash 5
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
Laboratorio de Cómputo de Ingeniería
Flash 5
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
Laboratorio de Cómputo de Ingeniería
Flash 5
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
Laboratorio de Cómputo de Ingeniería
Flash 5
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
Laboratorio de Cómputo de Ingeniería
Flash 5
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
7
Flash 5
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
Laboratorio de Cómputo de Ingeniería
Flash 5
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
Laboratorio de Cómputo de Ingeniería
Flash 5
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
Laboratorio de Cómputo de Ingeniería
Flash 5
Í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