Flash 5.0 - Facultad de Ciencias Económicas

Flash 5.0
FLASH 5.0
Esta obra esta bajo una licencia reconocimiento-no comercial 2.5 Colombia de creativecommons.
Para ver una copia de esta licencia, visite http://creativecommons.org/licenses/by/2.5/co/ o envié una
carta a creative commons, 171second street, suite 30 San Francisco, California 94105, USA
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
Director:
Cesar Augusto Mendoza Martínez
Coordinadores:
Mauricio Vergara Bravo
Oscar Javier Silva
Asesores y conferencistas:
Henry Martínez Sarmiento
Carlos Alberto Rodríguez Romero
Néstor Orlando Rojas Castillo
Edison Jair Duque Oliva
Auxiliares de Investigación:
Adriana Maria Acosta
Ana Judith López Suárez
Andrea Nadine Gutiérrez
Astrid Rocío Angarita
Aura María García
Diana Angélica Maldonado
Diana María Garzón
Diana Vanesa Mora
Edgar Darío Mayorga
Gema Andrea Álvarez
Iván Darío Carrillo
Jaime Giraldo Olaya
Jairo Andrés Hernández
Jhon Freddy Mateus
Karolina Roberto
Lida Marcela Herrera
Luz Dary Lozano
Magda Johanna Cifuentes
Natalia Bejarano Neme
Natalia Milena Velasco
Nelson Armando Ariza
Néstor Giovanny González
Olga Liliana Sánchez
Sergio Alexander Cedano
Viviana Marcela Marín
Este trabajo es resultado del esfuerzo de todo el equipo perteneciente a la Unidad de
Informática.
Se prohíbe la reproducción parcial o total de este documento, por cualquier tipo de método
fotomecánico y/o electrónico, sin previa autorización de la Universidad Nacional de
Colombia.
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
1
Flash 5.0
1 INTRODUCCIÓN
Flash es un programa especializado en creación de animaciones, es muy utilizado
para crear gifs animados o películas para la web y es un gran aliado para el creador
web ya que da muchas facilidades para ser usado de una forma rápida; para los
conocedores de Corel, es importante hacer énfasis que en Flash no es necesario
generar cuadro a cuadro cada una de las animaciones, lo que hace más fácil su
trabajo; por otro lado para los conocedores de Director, les va a ser un gran
compañero ya que Flash y Director por ser de la misma casa “Macromedia” son
compatibles en todos los sentidos, cosa
que no se presenta en su totalidad con
programas como Front Page de Microsoft, ya que para este es necesario conocer
un poco más a fondo las utilidades del conocidísimo por todos creador Web, el
famoso código HTML.
Con Flash se puede crear todo tipo de animaciones, lo más importante antes que
cualquier cosa es conocer los tipos de imágenes que son esenciales en el trabajo,
por que si no se entiende la diferencia de un gráfico vectorial con un mapa de bits,
en cuestiones de calidad y espacio por ejemplo un .jpg con un .cdr, es difícil
entender que tipos de gráficos trabaja Flash, además de cómo editarlos y cuales son
sus limitantes a la hora de trabajar en el programa.
Al mejor estilo de Macromedia, Flash 5.0 nos muestra un pantallazo inicial donde se
presenta todas sus barras de herramientas.
Lo principal para esta guía es hacerle entender al lector la lógica de Flash, es cómo
es la diferencia entre frame, scene y movie, después de esto no es más que
entender un poco de qué es lo que se necesita, por ejemplo botones de
desplazamiento entre frames o scenes, botones para activar alguna animación o
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
2
Flash 5.0
generar duplicados de las escenas, o una de las tantas posibilidades que da Flash a
través de sus acciones en su versión 5.0 para trabajar.
A continuación se presentara una imagen del pantallazo inicial de Flash 5.0:
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
3
Flash 5.0
2 TABLA DE CONTENIDO
1
INTRODUCCIÓN ____________________________________________________ 2
2
TABLA DE CONTENIDO ______________________________________________ 4
3
REQUERIMIENTOS DEL SISTEMA PARA FLASH PLAYER _____________________ 5
4
CÓMO ES FLASH_____________________________________________________ 6
5
MENÚS _____________________________________________________________ 8
5.1
________________________________________________________ 8
5.2
_________________________________________________________ 9
5.3
_______________________________________________________ 10
5.4
_______________________________________________________ 10
5.5
____________________________________________________ 11
6
BARRAS DE HERRAMIENTAS __________________________________________ 12
7
CÓMO CREAR UNA ANIMACIÓN _____________________________________ 15
8
PROPUESTA DE CURSO ______________________________________________ 17
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
4
Flash 5.0
3 REQUERIMIENTOS DEL SISTEMA PARA FLASH PLAYER
Para usar Flash Player en su computador usted necesita el siguiente software y
hardware:
•
Microsoft Windows 95, NT 3.5.1 ó posterior; ó un 68K Macintosh computer
(PowerPC recommendado) con Sistema 7.1 ó posterior.
•
Netscape 2 ó posterior (Windows y Macintosh).
•
Si va a utilizar controles ActiveX, Microsoft Internet Explorer 3 ó posterior
(Windows 95 ó posterior, Windows NT) es requerido.
•
Si va a correr Flash Player Java Edition, es necesario tener activo Java en su
navegador.
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
5
Flash 5.0
4 CÓMO ES FLASH
Una explicación breve de Flash, es creer que se esta en una película, obra de teatro o
novela, ese programa de T.V es igual que decir una Movie de Flash 5.0, como se sabe
para cualquier telenovela se tienen varias escenas, estas escenas no son más que las
scene de Flash 5.0, en cada escena se encuentran los personajes que en Flash 5.0 se le
llamaran layer, si vemos al lado derecho de cada una de los layer, se ven como casillas
que van numeradas, cada casilla es un frame, Flash tiene por default aproximadamente
564 frames para cada layer o actor, dependiendo de cuantos frames tenga cada actor
este aparecerá en la escena, si observamos en la grafica en la parte inferior de la parte
donde esta layer aparecen dos cuadros uno tiene en el centro un mas (+) y otro un
símbolo , el del (+) crea un nuevo layer y el otro genera un guide layer, este guide
layer no es más que una herramienta para generar ayudas para cuando se va a dibujar,
esta layer no aparece en el momento de la presentación de la escena o la película.
La permanencia de los layer esta predeterminada por la velocidad que tengan las
figuras por segundo, esto se puede ver en la parte inferior de la figura en el número
que va acompañado por las letras fps, estas letras quieren decir “figuras por segundo”
dependiendo de que tan alto este el número, la película será más rápida o lenta la
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
6
Flash 5.0
película y permanecerán los layer en escena, al lado derecho se encuentra en la figura
un (0.0s) que quiere decir en que segundo va de la película, otro de los iconos que se
ven al lado derecho del icono de insertar guide layer, el ícono tiene forma de caneca
de basura, con este ícono se quitan los layer que se tengan seleccionados.
En la parte superior se ven tres íconos uno de un ojo, otro de un candado y otro de
un cuadro,
el del ojo nos permite aparecer y desaparecer en el área de
trabajo de la escena el layer que seleccionemos, el candado permite bloquear el layer
para no poder trabajar en este más y el cuadro muestra el contorno de cada uno de
los objetos en el layer escogido, como manera de reconocer los diferentes layer, ya
que a cada uno le da un color distintivo de layer o personaje.
Flash 5.0 tiene una barra de herramientas muy parecida a la de Corel o parecida a la
barra de herramientas de Paint.
Estos son unos de los menús que se pueden encontrar en Flash 5.0 y que
continuación se van a detallar un poco más a fondo.
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
7
a
Flash 5.0
5 MENÚS
Con este icono se puede manejar la ventana de Flash 5.0.
5.1
En este menú se encuentra las opciones más comunes por ejemplo: abrir, cerrar, o guardar.
Hay opciones diferentes como:
1.
Importar: Para importar las imágenes ó la música a la película.
2.
Exportar movie ó exportar imagen: Para cuando se desee guardar el archivo como un
archivo .swf, o sea que necesita de Flash 5.0 para poderse abrir.
3.
Publish preview: Sirve para poder guardar el archivo ya sea como HTML ó ejecutable
de Flash 5.0.
4.
Publish settings: Sirve para guardar la imagen o película de Flash 5.0 como algún
formato diferente, por ejemplo .mov, .gif, etc.
5.
Publish: Genera un ejecutable .fla.
6.
Page setup: Configura las páginas para la impresión.
7.
Print preview: Genera una vista preliminar de cada una de las frames para imprimir.
8.
Print: Imprime.
9.
Send: Para enviar la presentación a través del servidor de correo.
10.
Exit: Sale de la presentación.
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
8
Flash 5.0
5.2
1.
Undo: Es la opción deshacer.
2.
Redo: Es la opción rehacer.
3.
Cut: Corta.
4.
Copy: Copia.
5.
Paste: Pegar.
6.
Paste in place: Pegar en un lugar.
7.
Paste special: Pega el objeto como película de Flash, como dibujo de Flash ó
como Bitmap.
8.
Clear: Desaparece el color de la figura seleccionada y la deja con el color del
background.
9.
Duplicate: Duplica la imagen seleccionada.
10.
Select all: Selecciona todo.
11.
Deselect all: Elimina la selección.
12.
Copy frames: Copia las frames
13.
Cut frames: Corta las frames.
14.
Paste frames: Pega las frames.
15.
Edit symbols: Los lleva al símbolo para generarle cambios.
16.
Edit selected: Edita una selección.
17.
Preferences.: Es la entrada al menú de preferencias, donde se pueden cambiar
las opciones generales, de edición y del clipboard.
18.
Keyboard Shortcuts...: Permite revisar cuáles son las teclas abreviadas activas,
pero además aumentar el número de las mismas, a través de teclas
personalizadas.
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
9
Flash 5.0
5.3
1.
Go to: Permite desplazarse entre los frames según opciones.
2.
Zoom in: Aumenta el acercamiento al área de trabajo.
3.
Zoom out: Disminuye el acercamiento al área de trabajo.
4.
Magnification: Despliega una lista de opciones de zoom.
5.
Outlines: Muestra solo las líneas de contorno de las figuras.
6.
Fast: Genera una vista del área de trabajo.
7.
Antialias: Genera una vista del área de trabajo.
8.
Antialias Text: Genera una vista del área de trabajo.
9.
Timeline: Muestra la línea de tiempo de los frames.
10.
Work area: Muestra el área de trabajo.
11.
Rules: Muestra las reglas en el área de trabajo.
12.
Grid: Muestra una grilla para guiar al momento de dibujar.
5.4
1.
Convert to symbol...: Convierte el área seleccionada en un símbolo.
2.
New simbol: Inserta un nuevo símbolo.
3.
Layer: Inserta un nuevo layer.
4.
Motion Guide: Inserta un Motion guide.
5.
Frame: Inserta un frame.
6.
Remove frames: Elimina frames.
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
10
Flash 5.0
7.
Keyframes: Inserta un Keyframe.
8.
Blank keyframe: Inserta un Blank keyframe.
9.
Create Motion tween: Inserta una motion entre Keyframe o Blank keyframe.
10.
Scene: Inserta una nueva escena.
5.5
1.
Instance: Permite modificar una instancia a través de los behavior.
2.
Frame: Permite modificar las propiedades del frame.
3.
Layer: Permite modificar las propiedades del layer.
4.
Scene: Permite modificar el nombre las secuencias y la edición de la película.
5.
Movie: Permite modificar las propiedades de la película como el fondo, las
dimensiones, etc.
6.
Shape: Permite modificar los shapes.
7.
Transform: Permite generar transformaciones en las figuras.
8.
Arrange: Permite ordenar las figuras, entre traer al frente, enviar al fondo, etc.
9.
Frame: Convierte los frames en Keyframe, blank keyframe, o sincronización entre
símbolos.
10.
Group: Genera grupos para varias figuras, que pueden ser deseleccionados con las
herramientas subsiguientes.
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
11
Flash 5.0
6 BARRAS DE HERRAMIENTAS
En esta barra encontramos las herramientas al
mejor estilo paint o Corel, a través de este
menú, se pueden dibujar las figuras que se
deseen para Flash 5.0, además trae la opción de
texto para escribir lo que quieran, en la parte
de abajo se encuentra la opción de color.
A través de estas opciones se pueden generar
los diferentes layer, en caso que no se desee
importar una imagen.
Esta barra muestra las propiedades de el layer,
con esta se puede cambiar el color, además de
especificar de qué tipo es, por ejemplo si es de
guía o normal, o si está bloqueado o no, la parte
de layer height cambia el tamaño de el layer en
el cuadro de la animación, las opciones son 100,
200 ó 300% de ancho.
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
12
Flash 5.0
Esta es una de las barras más funcionales, a solo
un clic derecho encontramos las opciones de
crear un tween, que sirve para conectar aun
frame con el otro y generar una animación
entre ambas, solo si se quiebran los objetos de
ambos frames a través de un control + b y
después de esto se va a panel en este mismo
menú, frame y en effect se selecciona el efecto.
Se
puede
insertar
frames,
quitarlas,
seleccionarlas todas, cortar y pegar, sincronizar
símbolos, generar acciones y entrar a los paneles
de frames y sonido.
En esta barra, se puede entrar a las propiedades
de la película, con esta podemos aumentar o
disminuir, la velocidad en que pasan los frames,
aumentar o disminuir el campo de trabajo,
cambiar el color de fondo de la película,
cambiar las unidades en las que se va a medir la
película.
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
13
Flash 5.0
Con esta opción se puede de izquierda a
derecha en los iconos de abajo, duplicar, añadir
o borrar escenas, a parte de haciendo doble clic
cambiar el nombre.
Esta es una de las opciones o menú más
importantes, ya que con este se le dan acciones,
existen dos maneras de ver esta opción de
frame actions en modo normal y en modo
experto, la diferencia radica en la cantidad de
acciones que tiene, es algo así para los
conocedores de Director a programación en
Lingo, pero esta vez solo haciendo clic en el
frame y después en la acción , él generara el
código respectivo pero hará preguntas básicas
como a dónde quiere ir o cosas de simple lógica
(no olviden que es en inglés).
En esta barra podemos seleccionar el sonido,
sólo si es importado con anterioridad a través
de la opción importar, este aparecerá en lista,
después se mostrara en que efecto especifico
comenzará el sonido, también se encuentra la
opción de frames donde se dirá qué clase de
efecto va a tener el frame y la opción effect, que
no es más que la forma de seleccionar efectos.
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
14
Flash 5.0
7 CÓMO CREAR UNA ANIMACIÓN
Esta es una animación básica, por lo tanto no será muy extensa, es solo para dejar un
abrebocas de las posibilidades de Flash 5.0; Después de entrar a Flash 5.0 se entra a
File – New, o simplemente Control + N, en este momento se ha generado una nueva
película, a partir de este momento, se debe pensar qué se quiere.
El objetivo para esta película es mostrar el logo de la Unidad de Informática de la
F.C.E. y alguna distracción para el usuario final, para esto se debe empezar por pararse
en la timeline (línea de tiempo) en el frame 1 allí se crea el primer objeto, digamos
una bolita, después se para en el frame #20, en este se le da clic derecho opción
insert Keyframe, en este keyframe se debe poner el lugar de destino y la figura de
destino, en este caso se colocara otra bolita de igual color al extremo contrario, se
debe hacer lo mismo en los frames # 40, 60 y 80, al hacer esto se ira al primer frame
y se selecciona dando clic derecho la opción Create Motion Tween, esto se hará en
todos los Keyframes creados, si esta bien los frames intermedios tomaran el color lila y
se creara una línea continua, no punteada de un Keyframe a otro Keyframe.
Para personalizar los efectos en cada lapso de Keyframe a Keyframe se dará clic
derecho- panels – frame – efect y allí se selecciona el efecto a seguir (no olvide
clientelizar el color al cual cambiará con las flechas de % de color).
El anterior era solo un actor o layer de la película, para crear otro se da clic en la
pestaña con el más (+) en la línea de tiempo, en este layer se hace lo mismo que en
el anterior, o sea se paran en el frame #1 con este se colocan dos cuadrados en la
parte inferior de el área de trabajo, después se paran en el frame #50 y allí se
posicionan al lado del circulo que ya habían creado en el anterior layer, crean un
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
15
Flash 5.0
keyframe y colocan un cuadrado al lado del circulo, después de esto se van al último
frame y allí utiliza la herramienta texto y escriben puede ser su nombre, al finalizar
esto van al frame #1 y crean una Motion Tween lo cual creara una línea punteada
hasta el frame #50; en el frame # 50 dan clic derecho, van a panel – frame – en la
opción tweening se cambia el motion por shape tanto en la # 50 como en la ultima
donde esta el texto, si esta bien se tornara de color verde y una línea unirá el frame
#50 con el ultimo de la película.
Nota: Si desean insertar música solo deben crear un nuevo layer y allí se inserta la
música que debe ser previamente importada, a través de la herramienta import, y
seleccionada en la herramienta sound, los loops dependen de cuantas veces desee
que se repita la música si se deja 1, el tocara la canción hasta donde este editada
cuando se importo.
Nota2: No olviden para hacer más fácil el trabajo las teclas abreviadas, una lista de
ellas se encuentra en Edit – Keyboard Shortcuts....
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
16
Flash 5.0
8 PROPUESTA DE CURSO
El curso se puede dictar en una sola sesión de cinco (5) horas, solo es necesario
ver Windows, ya que el programa se movería en esa plataforma.
E curso se dividiría en:
1 Hora
1.
Diferencias entre imágenes Vectoriales y mapas de bits.
2.
Presentación del pantallazo y familiarización con el mismo.
2 Hora
1.
Presentación de la línea de tiempo y trabajo con motion tweening.
2.
Trabajo con la herramienta gráfica.
3.
Clientelización de los layers, creación de escenas.
3 Hora
1.
Presentación de las deformaciones, creación de las mismas.
2.
Importaciones de imágenes y sonido.
3.
Adición de sonido a la película
4 Hora
1.
Herramienta Acciones, creación de símbolos.
2.
Exportar y publicar animaciones.
5 Hora
1.
Inquietudes y tema libre acerca de Flash 5.0
UNIVERSIDAD NACIONAL COLOMBIA
FACULTAD DE CIENCIAS ECONÓMICAS
UNIDAD DE INFORMÁTICA
17