Macromedia flash 8 by rivera flores

MACROMEDIA FLASH 8

5to Año

TEMA Nº 01: INTRODUCCION Macromedia Flash 8 es un programa exclusivo para realizar animaciones vistosas para páginas web, así como para crear Gifs animados. INGRESO AL PROGRAMA. 1ra forma:…………………………………………………………………………………………………………………. 2da forma:…………………………………………………………………………………………………………........

VENTANA PRINCIPAL DE MACROMEDIA FLASH 8. 1

7 6

1. ……………………………………………………

5. ……………………………………………………

2. ……………………………………………………

6. ……………………………………………………

3. ……………………………………………………

7. ……………………………………………………

4. ……………………………………………………

8. …………………………………………………

Docente: Lic. Ricardo Rivera Flores

Pág. 1

MACROMEDIA FLASH 8

5to Año

TEMA Nº 02: UTILIZACION DE LA LINEA DE TIEMPO Y CAPAS LA LÍNEA DE TIEMPO La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Consta de 2 partes.

1) LOS FOTOGRAMAS (FRAMES). Vienen delimitados por líneas verticales (formando rectángulos). Los Números de Fotograma que permiten saber qué número tiene asignado cada fotograma, cuánto dura o cuándo aparecerá en la película. TIPOS DE FOTOGRAMAS A. Fotograma Clave (KeyFrame) : Son fotogramas con un contenido especifico, se crean, por tanto, para insertar en ellos un nuevo contenido no existente en la película. Se identifican por tener un punto negro en el centro y cuando esté vacío se le diferencia por una línea negra vertical. Para insertar Fotograma Clave Presionar F6 Por ejemplo, en el ejemplo de la "pelota" que rebotaba en el suelo habría 3 Keyframes. Uno para cada posición distinta de la pelota.

B. Fotograma Normal (Normal Frame) : Estos fotogramas siempre siguen a los fotogramas clave, no representan contenido nuevo y son de color gris. El último fotograma de una secuencia de fotogramas normales viene representado por un cuadrado blanco sobre fondo gris. En el ejemplo, los fotogramas del 2 - 5 son fotogramas normales, su contenido no es nuevo, esto es, es el mismo que el del fotograma 1. Como vemos, su misión es prolongar la duración de un fotograma clave. Para insertar Fotograma Normal Presionar F5. C. Fotograma Vacío: Son fotogramas sin contenido, Su color es blanco. Si se inserta algo en estos fotogramas, pasan a ser Fotograma Clave. D. Fotogramas Animados: Pueden ser de 2 tipos:

Docente: Lic. Ricardo Rivera Flores

Pág. 2

MACROMEDIA FLASH 8

5to Año

a) Fotogramas de Animación de Movimiento: Vienen caracterizados por el color morado y representa el movimiento (con o sin efectos) de un objeto, que pasa de la posición del Keyframe inicial al final. Para representar esta animación aparece una flecha entre estos Keyframes.

Esta imagen representa el ejemplo de la pelota. Del frame 1 se pasa al 6, (Flash representará el movimiento entre ambas posiciones en la película final) y del 6 al 11. Otro movimiento. E. Fotogramas de animación de Forma: Vienen caracterizados por el color verde y representan un cambio en la forma de un objeto, que pasa de la forma que tenía en el Keyframe inicial a la del final. Para representar esta animación aparece una flecha entre estos Keyframes.

Este ejemplo, similar al de arriba representa el cambio de forma de la pelota. En el frame 1 tendría la forma original, en el frame 6, forma de cuadrado (por ejemplo) y en el 11, otra forma distinta. 2) LAS CAPAS Cada capa es, un nivel en el que podemos dibujar, insertar sonidos, textos... con independencia del resto de capas. Hay que tener en cuenta que todas las capas comparten la misma Línea de Tiempos y por tanto, sus distintos fotogramas se reproducirán simultáneamente. TRABAJAR CON CAPAS INSERTAR CAPAS : Como su nombre indica, sirve para Insertar capas en la escena actual. Procedimiento: Clic secundario sobre la capa / insertar capa. O también; Menú Insertar / Linea de tiempo / Capa.

Docente: Lic. Ricardo Rivera Flores

Pág. 3

MACROMEDIA FLASH 8

5to Año

AÑADIR CAPA GUÍA : Inserta una capa de tipo guía. Procedimiento: Clic secundario sobre la capa / Añadir guía de movimiento. O también; Menú Insertar / Línea de tiempo / Guía de movimiento. BORRAR CAPA : Borra la capa seleccionada. Procedimiento: Clic secundario sobre la capa / Eliminar Capa. CAMBIAR NOMBRE: Para cambiar el nombre a una capa, basta con hacer doble clic en el nombre actual. MOSTRAR / OCULTAR CAPAS : Este botón permite ver u ocultar todas las capas de la película. Es muy útil cuando tenemos muchas capas y sólo queremos ver una de ellas ya que permite ocultar todas a la vez, para después mostrar sólo la actual. Procedimiento: Hacer clic en la capa correspondiente en el punto (o en la cruz) que se encuentra bajo el icono "Mostrar / Ocultar capas". BLOQUEAR CAPAS : Bloquea la edición de todas las capas, de modo que no podremos modificarlas hasta desbloquearlas. Procedimiento: Para bloquear o desbloquear una capa, clic en el punto o icono "Cerrojo" situados en la capa actual bajo el icono "Bloquear Capas". MOSTRAR/OCULTAR CAPAS COMO CONTORNOS : Este botón nos muestra/oculta los contenidos de todas las capas como si sólo estuviesen formados por bordes. De este modo y ante un conjunto numeroso de objetos, podremos distinguirlos a todos de forma fácil y podremos ver en qué capa está cada uno de ellos. Procedimiento: Para activar o desactivar una capa, clic en el punto o icono REORGANIZAR LAS CAPAS Los objetos que se mostrarán delante de todos los demás serán aquellos que se encuentren en la capa situada más arriba. Procedimiento: Para mover una capa, clic sobre la Capa y arrastar. Para mover un fotograma de una capa a otra, basta con seleccionar el fotograma a mover y arrastrarlo hasta la capa donde queramos pegarlo. También se puede Copiar el fotograma y luego pegarlo en la capa de destino.

PRACTICA Nº 02  Empleando los diferentes fotogramas crear una animación de un rebote de pelota, mediante animación de movimiento. (En capa 1 de nombre PELOTA; del fotograma 1 al 20)  Crear una animación de forma de una pelota a un cuadrado, y del cuadrado a una pelota. (En capa 2 de nombre TRANFORMAR; del fotograma 1 al 20).  Guardar la animación con el nombre de 02PRACTICA(MI NOMBRE).

Docente: Lic. Ricardo Rivera Flores

Pág. 4

MACROMEDIA FLASH 8

5to Año

TEMA Nº 03: HERRAMIENTAS BÁSICAS Flash no es un programa de diseño gráfico, pero su potencia en este ámbito es casi tan grande como la de otros programas. Herramientas Básicas.

La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Veamos cuáles son las más importantes y cómo se usan: Herramienta Selección (flecha): . Es la herramienta más usada de todas. Su uso principal es para seleccionar objetos. permite seleccionar los bordes de los objetos, los rellenos (con un sólo clic), los bordes (con doble clic), zonas a nuestra elección... Además, su uso adecuado puede ahorrarnos tiempo en el trabajo. Herramienta Línea: Permite crear líneas rectas de un modo rápido. Las líneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la línea recta. Una vez creada la podemos modificar sin más que seleccionar situar el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla. Herramienta Texto: Crea un texto en el lugar en el que hagamos clic. Sus propiedades se verán en el tema siguiente. Herramienta Óvalo: La herramienta Óvalo permite trazar círculos o elipses de manera rápida y sencilla. Herramienta Rectángulo: Su manejo es idéntico al de la Herramienta Óvalo, tan solo se diferencian en el tipo de objetos que crean. Herramienta Lápiz: Es la primera Herramienta de dibujo propiamente dicho. Permite dibujar líneas con la forma que decidamos, modificando la forma de estas a nuestro gusto. El color que aplicará esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas. Herramienta Pincel: Su funcionalidad equivale a la del lápiz, pero su trazo es mucho más grueso. Se suele emplear para aplicar rellenos. Se puede modificar su grosor y forma de trazo. Herramienta Cubo de pintura: Permite aplicar rellenos a los objetos q que hayamos creado. Al contrario que muchos otros programas de dibujo, no permite aplicar Docente: Lic. Ricardo Rivera Flores

Pág. 5

MACROMEDIA FLASH 8

5to Año

rellenos si la zona no está delimitada por un borde. El color que aplicará esta Herramienta se puede modificar, bien desde el Panel Color o bien desde el subpanel Relleno que hay en la Barra de Herramientas. Herramienta Borrador: Su funcionamiento es análogo a la Herramienta Pincel. Pero su función es la de eliminar todo aquello que "dibuje". Herramienta Subseleccionador: Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vértices que componen los objetos creados con dicha herramienta. Herramienta Bote de Tinta: Se emplea para cambiar rápidamente el color de un trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel Colores que hay en la Barra de Herramientas.) Herramienta Cuentagotas: posteriormente podamos utilizarlos.

misión

"Capturar"

colores

para

que

El Panel Color El Panel Color, como su nombre indica se usa para fabricar nuestros propios colores y para seleccionar los que más nos gusten. Para seleccionar un color determinado, bastará con hacer clic en las pestañas que se encuentran junto a los iconos de las Herramientas de Lápiz y de Bote de Pintura. (Si queremos modificar el color de un borde, pulsaremos sobre la pestaña que está junto a la Herramienta Lápiz y si queremos modificar un relleno, haremos clic en la pestaña que está junto a la Herramienta Bote de Pintura.) Al hacerlo aparecerá un Panel con multitud de colores para que seleccionemos el que más nos gusta. Trabajar con Textos Propiedades de los Textos Para poder escribir, deberemos hacer clic en la Herramienta Texto y posteriormente en el punto del escenario en el que queramos empezar a escribir. El Panel Propiedades contiene las principales propiedades de todos los objetos que empleemos durante nuestra película, de modo que si seleccionamos un texto, podremos ver en él todo lo que nos hace falta conocer sobre nuestro texto.

Docente: Lic. Ricardo Rivera Flores

Pág. 6

MACROMEDIA FLASH 8

5to Año

Fuente:

Espaciado:

Dirección del Texto:

Ajuste automático entre caracteres:

Configuración:

A la Izquierda:

Centrar:

A la derecha:

Justificado:

PRACTICA CALIFICADA Nº 03

Crear una capa 1 de nombre fondo y dibujar un paisaje con una pista

El tamaño de la imagen debe sobrepasar el escenario hacia los lados laterales

Crear una animación de movimiento desde fotograma 1 hasta fotograma 30

Seleccionando fotograma 1 la imagen debe moverse al lado izquierdo del escenario

Seleccionar fotograma 30 presionando la tecla F6 y mover la imagen con las teclas direccionales hacia el lado derecho del escenario

Crear una capa 2 de nombre Camión y dibujar un camión

Presionar CTRL + ENTER para visualizar la animación.

Docente: Lic. Ricardo Rivera Flores

Pág. 7

MACROMEDIA FLASH 8

5to Año

TEMA Nº 04: MASCARA E IMPORTACION DE IMÁGENES. Crea un nuevo documento, luego importa la imagen que usaras de fondo -

Nos ubicamos en Capa 1, Fotograma 1 Menú Archivo/ importar / importar a escenario (o Presione CTRL + R). Seleccione el archivo (la imagen) y dar clic en abrir.

Acamada la imagen en el escenario donde deseas que inicie la animación (la imagen debe desplazarse de izquierda a derecha)

Haciendo clic con la herramienta transformación libre imagen que sea más grande que el escenario

Inserte una nueva capa

Seleccione Capa 2, Fotograma 1

Haciendo clic en la herramienta texto En el panel de propiedades elige Arial Black, tamaño 96 Escribe el texto (FLASH)

Docente: Lic. Ricardo Rivera Flores

puedes estirar la

Pág. 8

MACROMEDIA FLASH 8

Haciendo clic con la herramienta transformación libre que sea tamaño del escenario

5to Año

puedes estirar la letra

Sobre la Capa 1 que es la imagen inserte un fotograma clave en el fotograma 30 -

Clic en Capa 1 / clic en fotograma 30

Presionar la tecla F6 (o clic secundario insertar fotograma clave)

Mueve la imagen con las teclas direccionales a la segunda posición(En este caso muevo de izquierda a derecha)

Docente: Lic. Ricardo Rivera Flores

Pág. 9

MACROMEDIA FLASH 8

5to Año

Seleccione Capa1, Fotograma1/ movimiento.

Clic

secundario

crear

interpolación de

Clic Sobre capa 2 , Fotograma 30.

Clic secundario / insertar fotograma ( o presionar F5 )

Seleccione capa 2 y hacer clic secundario

Hacer clic en Mascara. Presionar CTRL + ENTER para ver la animación

PRACTICA CALIFICADA Nº 04 -

Crea una animación empleando Mascara e importación de imagen.

Guardarlo en USB con el nombre Mascara-mi nombre, para su posterior uso.

Docente: Lic. Ricardo Rivera Flores

Pág. 10

MACROMEDIA FLASH 8

5to Año

TEMA Nº 05: LA OPCIÓN GUÍA DE MOVIMIENTO. Este comando inserta directamente una carpeta encima de una capa que esté seleccionado una Capa Guía de movimiento. En esta Capa podemos dibujara la ruta del movimiento que deseamos para un objeto que este en la capa inferior. Lo que dibujemos en esta capa no se verá en la película. Veamos el siguiente ejemplo: 1) Abra un documento nuevo. 2) Dibuja un círculo cualquiera en la parte superior izquierda del escenario. No muy grande. 3) Selecciona el fotograma 1. 4) Añadir una interpolación de movimiento (Clic secundario sobre el fotograma / añadir interpolación de movimiento). 5) Convierta en fotograma clave el número 40 de esta capa. 6) Inserte una capa Guía de movimiento (Clic secundario sobre la capa 1 / añadir guía de movimiento). 7) Insertar fotograma clave en el fotograma 41 de la Capa Guía. 8) Selecciona el fotograma 1 de la Capa Guía 9) Con la herramienta Lápiz dibuje la línea que quiera comenzando en el centro del círculo. Esta línea será la ruta por la que el círculo viajara en su movimiento. 10) Tenemos que mover el objeto (Capa 1) en el fotograma 40 hasta el final de la línea dibujada para que el movimiento lo traslade de un lugar a otro. Para ello, debemos seleccionar el fotograma 40 de la (Capa 1) del objeto y llevamos al círculo al punto que queremos. 11) Ahora seleccione el fotograma 40 de la capa del objeto. La línea dibujada esta allí. Llévese el círculo al final de la línea, con la herramienta Flecha, procurando coincidir su centro con el final de la línea. 12) Ya puede probar la película. 13) Si el movimiento le parece que reproduce demasiado rápido esto puede corregir con F5. PRÁCTICA Nº 05 1) Crear una animación empleando la opción guía de movimiento. 2) Crear el movimiento de los electrones. Docente: Lic. Ricardo Rivera Flores

Pág. 11

MACROMEDIA FLASH 8

5to Año

TEMA Nº 06: CONVERTIR LAS PALABRAS EN GRÁFICO. PROCEDIMIENTO: 1) Crear un Documento nuevo / Clic en el Fotograma 1 2) Menú Archivo / Importar a escenario / Seleccionar una imagen / Abrir. (Si la imagen es grande con la herramienta transformación libre reducirlo a la mitad superior del escenario) 3) Hacer clic sobre la imagen con el botón derecho / escoger la opción Separar.

4) Clic en cualquier fotograma. Por ejemplo (25), Luego presionar F6. 5) En este Fotograma escribimos la palabra. Por ejemplo MACROMEDIA. 6) Seleccionar la palabra haciendo doble Clic, luego en propiedades cambiar a Arial Black 50, color Azul, etc. Y lo ubicamos en la mitad inferior del escenario. 7) Con la herramienta Selección hacer clic sobre la palabra, Clic secundario / Separar (Repetir esta acción 2 veces).

8) Hacer clic en cualquier fotograma que este entre el 1 y el 25 / en propiedades elegir Animar Forma.

9) Presionar Ctrl + Enter para ver la animación.

PRÁCTICA Nº 06 1) Crear una animación empleando la Animar Forma con figuras geométricas. 2) Crear una animación que convierta una imagen a texto empleando la Animar Forma

Docente: Lic. Ricardo Rivera Flores

Pág. 12

MACROMEDIA FLASH 8

5to Año

TEMA Nº 07: INSERTAR SIMBOLO La acción de crear un nuevo símbolo es una de las más usadas en Flash ya que es uno de los primeros pasos para crear una animación. El procedimiento es el siguiente: Insertar → Nuevo Símbolo simplemente pulsando Ctrl + F8.

Introducimos el nombre del símbolo que vamos a crear/ Aceptar Aparece una pantalla para diseñar ya sea: Clip de película, Boton o Grafico. LA BIBLIOTECA. Sirve para utilizar los símbolos que contienen. Para acceder a la líbrería de símbolos de la película que estamos creando de nuevo vamos a la Barra de Menús, Ventana → Biblioteca. En esta biblioteca aparecerán todos los símbolos que hemos creado hasta el momento. Podemos comprobar como el nuevo símbolo que hemos creado en el ejercicio anterior (Ejercicio Crear Símbolo) se ha añadido a nuestra biblioteca accediendo a ella como acabamos de indicar. Los símbolos contenidos en las bibliotecas están identificados por su nombre y por un icono que representa el tipo de símbolo que representan: Clip

Botón

Gráfico

BOTONES Los símbolos de tipo Botón son los que aportan la mayor parte de la interactividad de las películas Flash con aquel que la está visualizando. Un botón, en Flash, es igual que cualquier botón de cualquier entorno informático, sea web o cualquier otro.

Reposo. Aspecto por defecto del botón, es decir, cuando el puntero del ratón no está situado sobre él. Sobre. Aspecto del botón cuando situamos el puntero sobre él. Presionado. Apariencia que deseamos tenga nuestro botón mientras lo mantengamos pulsado. Creación de un Botón Menú Insertar → Nuevo Símbolo, le daremos el Tipo Botón y asignaremos un nombre nuevo símbolo.

Diseñamos el botón, con sus respectivas acciones. Docente: Lic. Ricardo Rivera Flores

Pág. 13

MACROMEDIA FLASH 8

5to Año

TEMA Nº 08: FLAX. Flax, es un pequeño programa exclusivo de animación de texto. LA PANTALLA PRINCIPAL DE FLAX. 1 2

1. ……………………………………………

4. ……………………………………………

2. ……………………………………………

5. ……………………………………………

3. ……………………………………………

6. …………………………………………….

GUARDAR Y EXPORTAR ARCHIVOS. Procedimiento: -

Clic en File / Export SWF. Ubicar la carpeta a Guardar. Dar un nombre a la animación / Guartdar

IMPORTAR UN ARCHIVO FLAX A MACROMEDIA FLASH. Procedimiento: -

Ingresar a Macromedia Flash. Menú Archivo / Importar / Importar a Escenario. Activar la Biblioteca: Menú Ventana / Biblioteca / Ubicar el clip o botón importado Arrastrar hacia el escenario.

Docente: Lic. Ricardo Rivera Flores

Pág. 14

MACROMEDIA FLASH 8

5to Año

TRABAJAR CON SONIDOS

Importar Sonidos Importar, no es más que decirle a Flash que añada un determinado archivo a nuestra película, para que podamos usarlo cuando queramos. En realidad, lo añade a nuestra Biblioteca, que es el Panel en el que están todos los objetos que participan en la película Así pues si queremos manejar un sonido en nuestra película, deberemos importarlo previamente. Una vez esté importado, podremos usarlo con total libertad. Para importar un sonido haz clic en el menú Archivo → Importar → Importar a biblioteca.

Se abrirá el cuadro de diálogo de Importar a biblioteca. Allí deberás seleccionar en Tipo de archivo Todos los formatos de sonido. Navega por las carpetas hasta encontrar el archivo de audio que quieras incluir en tu película. Seleccionalo haciendo clic sobre él y haz pulsa el botón Aceptar. El sonido estará listo para usarlo donde quieras, podrás encontrarlo en la Biblioteca (menú Ventana → Biblioteca).

Docente: Lic. Ricardo Rivera Flores

Pág. 15