Manual Flash8

Manual Macromedia Flash

¿Qué es Flash?Flash es la tecnología más comúnmente utilizada en el Web que permite la creación

de animaciones vectoriales

Existen dos tipos de gráficos:

Los gráficos vectoriales, en los cuales una imagen es representada a

partir de líneas (o vectores) que poseen determinadas propiedades (color,

grosor...). La calidad de este tipo de gráficos no depende del zoom o del tipo

de resolución con el cual se esté mirando el gráfico. Por mucho que nos

acerquemos, el gráfico no se pixeliza, ya que el ordenador traza

automáticamente las líneas para ese nivel de acercamiento. Puede ver un

ejemplo en la carpeta Ejemplos (dibujovectorial.fla)

Las imágenes en mapa de bits. Este tipo de gráficos se asemejan a una

especie de cuadrícula en la cual cada uno de los cuadrados (píxeles)

muestra un color determinado.

Este tipo de gráficos son dependientes de la variación del tamaño y

resolución, pudiendo perder calidad al modificar sucesivamente sus

dimensiones. Puede ver un ejemplo en la carpeta Ejemplos

(mapabits.fla).

Entorno de Trabajo

Ing. Melvy Terán Santa Cruz

Escena: Hoja de trabajo

Caja Herramientas

Linea de Tiempo


Película: Se le llama película al archivo que se genera con el programa de

Macromedia Flash. La extensión que genera este programa es “fla”.

Escena: Escena es nuestra área trabajo, es donde se insertan los objetos que

se necesitan para realizar una animación.

Objetos: Objeto es cualquier dibujo generado con las herramientas de flash,

ejemplo: un rectángulo, elipse, símbolo, imagen, componente, etc.

Caja de Herramientas:

Descripción de cada herramienta de Izquierda a

Derecha:

Herramienta Selección (seleccionar y mover

objetos)

Herramienta subselección (deforma a lo objetos

ayudándose de nodos)

Herramienta Transformar (gira, escala y sesga

objetos)

Herramienta Transformacion de Relleno (gira,

escala y sesga el relleno de los objetos)

Herramienta Línea

Herramienta Lazo: Realiza modificaciones de tipo

mano alzada.

Herramienta Bezier: Permite crear polígonos de “x”

lados e inserta curvas.

Herramienta Texto: Permite insertar textos de 3

tipos: Estático, Dinámico e Introducción de texto.

Herramienta Lápiz: Permite crear dibujos a mano

alzada.

Herramienta Pincel: Permite crear curvas similares

al lápiz.



Herramienta Bote de Tinta: Permite asignar un

borde con color a cualquier objeto.

Herramienta Bote de Pintura: Permite asignar un

relleno (sólido, degradado o mapa de bits).

Herramienta Cuentagotas: Permite capturar colores

de borde, relleno o de imagen.

Herramienta Borrador: Permite borrar contornos,

rellenos, partes seleccionadas de objetos.

Herramienta Elipse: Permite insertar elipses o

círculos.

Herramienta Rectángulo: Permite crear rectángulos

y cuadrados.

Herramienta lápiz

1. Seleccione la herramienta lápiz.

2. Seleccione Ventana, Propiedades y, a continuación seleccione el color

para el trazo, el grosor de la línea y el estilo en el panel propiedades.

3. Seleccione un modo de dibujo en las opciones de la barra de herramientas:

a. Seleccione Enderezar para dibujar líneas rectas y convertir figuras

similares a triángulos, óvalos, círculos, rectángulos cuadrados en

estas formas geométricas comunes.

b. Seleccione Suavizar para dibujar curvas suaves.

c. Seleccione Tinta para dibujar líneas a mano alzada sin aplicarles

ninguna modificación.



Líneas rectas, óvalos y rectángulos

1. Seleccione la herramienta Línea, Óvalo o rectángulo.

2. Selección Ventana, Propiedades y seleccione los atributos de trazo y

de relleno en el panel propiedades.

3. En la herramienta Rectángulo, haga clic en el modificador Radio de

rectangulo redondeado para especificar que desea esquinas redondeadas e

indique el valor del radio de esquina. Si el valor es cero, las esquinas son rectas.

4. Arraste el cursos del Mouse sobre el escenario.

Nota: Si desea dibujar un círculo perfecto o cuadrado perfecto, mantenga

presionada la tecla SHIFT mientras dibuja con la herramienta Óvalo o

Rectángulo.

Polígonos y estrellas

1. Mantenga pulsada el botón del ratón sobre la herramienta Rectángulo y

arrástrela para seleccionar la herramienta PolyStar en el menú emergente.

2. Apertura el Panel propiedades.

3. Seleccione los atributos de trazo y relleno en el panel propiedades.

4. Haga clic en el botón Opciones del panel de propiedades.


Radio de rectángulo redondeado


5. En el cuadro de Configuración de herramientas, realice estas acciones:

En el Estilo, seleccione Polígono o Estrella.

En Número de Lados, introduzca un valor que oscile entre 3 y 32.

En Tamaño de punto de estrella, introduzca un número cuyo valor oscile entre 0

y 1 para especificar la profundidad de puntos de la estrella. Cuanto más cerca esté

el número de 0, más profundos serán los puntos creados (como agujas). Si va a

dibujar un polígono, no cambie este valor.

Líneas rectas con la herramienta

Pluma

1. Seleccione la herramienta Pluma.

2. Apertura el panel propiedades y seleccione los atributos de trazo y relleno en el

panel propiedades.

3. Coloque el puntero en el escenario, en el inicio de la línea recta, y haga clic para

definir e, primer punto de anclaje.

4. Vuelva a hacer clic para indicar donde desea que termine el primer segmento de

a línea recta.

5. Siga haciendo clic para crear más segmentos rectos.

6. Para terminar el trazado como una forma abierta o cerrada coloque la

herramienta pluma sobre el primer punto de anclaje. Cuando esta colocada

correctamente, aparece un circulo pequeño junto a la punta de la pluma. Haga

clic o arrastre para cerrar el trazado.



Líneas curvas con la herramienta

Pluma

1. Seleccione la herramienta Pluma.

2. Coloque la herramienta Pluma en el punto del escenario donde desee que

empiece la curva y mantenga presionado el botón del ratón. Aparecerá el primer

punto de anclaje y la punta de la pluma se convertirá en una punta de flecha.

3. Arrastre en la dirección en la que desea dibujar el segmento curvo.

4. Suelte el botón del ratón. La longitud y la pendiente de los selectores de

tangentes determinan la forma del segmento curvo. Más tarde, puede mover los

selectores de tangentes para ajustar la curva.

5. Coloque el puntero donde desea que finalice el segmento curvo.

NOTA:Para modificar los anclajes generados cuando se

utiliza la herramienta Pluma, seleccione la Herramienta

subselección, a continuación haga clic sobre los

anclajes y modifique.

Remodelar líneas y contornos de

formas

Remodelar con la Herramienta Selección

Para remodelar una línea o el contorno de una forma, puede arrastrar cualquier

punto de la línea mediante la herramienta selección. El puntero cambia para

indicar el tipo de modificación que se puede realizar en la línea o relleno.



Para remodelar líneas o contornos de formas con la herramienta Selección

haga lo siguiente:

1. Seleccione la herramienta Selección.

2. Arrastre desde cualquier punto del segmento para remodelarlo o arrastre una

línea con la tecla CTRL presionada para crear un nuevo punto angular

Aplicar rellenos sólidos, degradados y

mapa de bits

1. Selecciona el objeto a aplicar el relleno con la Herramienta Selección.

2. Apertura el Panel color, ficha Mezclador de colores.

3. Seleccione el icono de relleno, luego en Tipo seleccione Lineal, Radial o Mapa de

bits


Icono relleno


Transformar rellenos con degradado y de

mapa de bits

1. Seleccione un objeto que tenga degradado lineal, radial o de mapa de bits.

2. Seleccione la herramienta transformación de relleno

3. Hacer clic sobre el objeto, mostrara unos tiradores, de donde se podrá sesgar,

escalar, girar y mover solo el relleno mas no modifica las dimensiones del

objeto.

Creación de Texto

Puede crear tres tipos de campos de texto: estáticos, dinámicos y de entrada.

- Los campos de testo estático muestran texto cuyos caracteres no se

modifican de forma dinámica.

- Los campos de texto dinámico muestran texto que se actualiza de forma

dinámica, como resultados deportivos, cotizaciones de valores o información

meteorológica.

- Los campos de introducción de texto permiten a los usuarios introducir

texto en formularios o encuestas.

En flash, puede crear texto horizontal (con flujo de izquierda a derecha) o texto

vertical estática (con flujo de izquierda a derecha o de derecha a izquierda).

Para crear texto, coloque bloques de texto en el escenario mediante la herramienta

texto (Grafico 1).


Tiradores con degradado radial

Tiradores con degradado lineal

Tiradores con Mapa de bits


Para crear texto haga lo siguiente:

1. Seleccione la herramienta texto

2. Seleccione la Ventana, Propiedades

3. En el inspector de propiedades, seleccione un tipo de texto del menú emergente

para especificar el tipo de campo de texto:

a. Texto Dinámico crea un campo que muestra texto que se actualiza de

forma dinámica. Introducción de texto crea un campo en el que los

usuarios pueden ingresar texto.

b. Texto Estático crea un campo que no se puede actualizar de forma

dinámica.

4. Siga uno de estos procedimientos:

a. Para crear un bloque de texto que muestre texto en una sola línea, haga

clic donde desee que empiece el texto.

b. Para crear un bloque con una anchura fija (para texto horizontal) o una

altura fija (para texto vertical), coloque el puntero donde desee que

empiece el texto y arrastre y arrastre el puntero para señalar la anchura

o altura que desee.

5. Seleccione los atributos de texto como tipo de fuente, color, etc. En el panel

propiedades.


Herramienta Texto

Gráfico 1


Separar Texto

Puede separar texto para colocar cada carácter en un bloque de texto distinto.

Después de separarlo, puede distribuir rápidamente los bloques de texto en capas

diferentes y animar cada bloque por separado.

Para separar texto haga lo siguiente:

1. Seleccione la herramienta selección y haga clic en un bloque de texto.

2. Seleccione Modificar, Separar. Cada carácter del texto seleccionado se coloca en

un bloque de texto distinto. El texto permanece en la misma posición en el

escenario.

3. Seleccione Modificar, Separar de nuevo para convertir los caracteres en formas

en el escenario.

Ahora puede aplicar rellenos degradados o de mapas de bits, si lo desea. Utilizando

la herramienta bote de Tinta, puede asignarle un contorno.

Vincular texto a una URL (solo texto

horizontal)

Puede vincular texto horizontal a una URL para que los usuarios pueden pasar a

otros archivos haciendo clic en el texto.

Para vincular texto horizontal a una URL haga lo siguiente:

1. Con la herramienta texto seleccione un bloque de texto.

2. Si el panel propiedades aun no se muestra, seleccione Ventana, Propiedades.

3. Para vínculo, introduzca la URL a la que desea vincular el bloque de texto.



Nota: Para crear un vínculo a una dirección de correo electrónico, utilice la

expresión malito: URL. Por ejemplo malito:[email protected]

Operaciones con Objetos

Copiar Objetos:

1. Seleccionar el objeto a copiar

2. Presionar CTRL + C

3. Presionar CTRL + V.

Copiar Objetos en la misma ubicación que el original

1. Seleccionar el objeto a copiar.

2. Presionar CTRL + C

3. Presionar CTRL + SHIFT + V

Mover Objetos:

1. Seleccionar el objeto a mover

2. Presionar CTRL + X

3. Ubicarse en la nueva posición

4. Presionar CTRL + V

Operaciones de Transformación

de Objetos

Reflejar objetos

1. Seleccionar objeto a reflejar.

2. Ir a la opción Modificar, Transformar, elegir si se desea Voltear

Horizontalmente o Voltear Verticalmente.

Ejemplo:



Escalar y Girar Objetos:

1. Seleccionar objeto a escalar y girar.

2. Ir a la opción Modificar, Transformar, elegir Escalar y Girar

3. Ingresar porcentaje de escala y ángulo de giro.

Ejemplo:

Sesgar Objetos:

1. Seleccionar objeto a sesgar.

2. Ir a la opción Modificar, Transformar, elegir Sesgar y rotar

3. Presione los tiradores que se muestran alrededor objeto y arrastre.


Izquierda: Objeto original antes de Voltear Horizontalmente.Derecha: Objeto Reflejado horizontalmente.

Izquierda: Objeto original antes de escalar y girarDerecha: Objeto con escala de 50% y ángulo de giro 25.


Ejemplo:

Distorsionar Objetos:

1. Seleccionar objeto a escalar y girar.

2. Ir a la opción Modificar, Transformar, elegir distorsionar


Ejemplo:

Envoltura en Objetos:

1. Seleccionar objeto a aplicar envoltura.

2. Ir a la opción Modificar, Transformar, elegir Sesgar y rotar


Ejemplo:


Clic y arrastre hacia la derecha, izquierda, arriba o abajo.

Izquierda: Objeto original antes de distorsionar.Derecha: Objeto distorsionado

Izquierda: Objeto original.Derecha: Objeto con envoltura.


Modificar Formas:

Expandir Rellenos:

1. Seleccionar objeto.

2. Ir a la opción Modificar, Formas, elegir Expandir Relleno.

3. Ingresar información de distancia y tipo de expansión.

Ejemplo:

Suavizar bordes de Relleno:

1. Seleccionar objeto.

2. Ir a la opción Modificar, Formas, Suavizar bordes de relleno.

3. Ingresar información de distancia numero de escenarios y dirección.


Izquierda: Objeto original.Derecha: Objeto con una distancia de expansión: 10 px y dirección Hundir.

Izquierda: Objeto OriginalDerecha: Objeto con bordes de relleno suavizados, distancia de 15 px, números de escenarios, 10 y dirección Expandir.


Línea de TiempoLa línea de tiempo organiza y controla el contenido de una película a través del

tiempo, en capas y fotogramas.

Capas:

Las capas son como hojas de acetato transparente apiladas. Los objetos de una

capa pueden dibujarse y editarse sin que afecten a objetos de otras capas. Es

aconsejable utilizar capas o carpetas distintas para archivos de sonido, acciones,

etiquetas y comentarios de fotogramas.

Creación de capas y carpetas de capas

Cuando se crea una capa , ésta aparece encima de la capa seleccionada. La capa

recién creada se convierte en la capa activa. Para crear una capa, realice una de las

acciones siguientes:

Haga clic en el botón Agregar capa en la parte inferior de la línea de tiempo.

Elija Insertar > Capa.

Visualización de capas

Para mostrar u ocultar una capa, realice una de las acciones siguientes:



Haga clic en la columna del ojo situada a la derecha del nombre de la capa o

carpeta en la línea de tiempo para ocultarla. Haga clic de nuevo para

mostrarla.

Haga clic en el icono del ojo para ocultar todas las capas y carpetas. Haga

clic de nuevo para mostrarlas.

Edición de capas y carpetas de capas

Puede copiar, eliminar capas y carpetas y cambiarles el nombre. También puede

bloquear capas y carpetas para que no puedan editarse.

Para cambiar el nombre de una capa o carpeta, realice una de las acciones

siguientes:

o Haga doble clic en el nombre de una capa o carpeta e introduzca un

nombre nuevo

Para bloquear o desbloquear una o más capas o carpetas, utilice uno de los

siguientes procedimientos:

o Haga clic en la columna Bloquear situada a la derecha del nombre de

una capa o carpeta para bloquearla. Haga clic de nuevo en la

columna Bloquear para desbloquear la capa o carpeta.

o Haga clic en el icono del candado para bloquear todas las capas y

carpetas. Haga clic de nuevo para desbloquear todas las capas y

carpetas.

Para eliminar una capa:

o Seleccione la capa o carpeta. Realice uno de los siguientes pasos:

o Haga clic en el botón Eliminar capa en la línea de tiempo.

o Haga clic con el botón derecho del ratón presionada en el nombre de

la capa o carpeta y elija Eliminar capa en el menú contextual.

FotogramasIng. Melvy Terán Santa Cruz


Un fotograma clave es un fotograma en el que se define un cambio en una animación, o

bien se incluyen acciones de fotograma para modificar una película. Puede cambiar la

longitud de una animación interpolada arrastrando un fotograma clave en la línea de

tiempo. El orden en el que aparecen los fotogramas y los fotogramas clave en la línea

de tiempo determina el orden en que se muestran en una película.

Para insertar fotogramas en la línea de tiempo, realice una de las acciones

siguientes:

Para insertar un nuevo fotograma, elija Insertar > Fotograma.

Para crear un fotograma clave nuevo, elija Insertar > Fotograma clave o haga

clic con el botón derecho en el fotograma donde desee colocar un fotograma

clave y elija Insertar fotograma clave del menú contextual.

Para crear un nuevo fotograma clave vacío, elija Insertar > Fotograma clave

vacío o haga clic con el botón derecho en el fotograma donde desee colocar el

fotograma clave y elija Insertar fotograma clave vacío del menú contextual.

Para eliminar o modificar un fotograma o fotograma clave, realice una de las

siguientes acciones:

Para eliminar un fotograma, fotograma clave o secuencia de

fotogramas, seleccione el fotograma, fotograma clave o secuencia y elija

Insertar > Eliminar fotograma o haga clic con el botón derecho del ratón en el

fotograma, fotograma clave o secuencia y elija Eliminar fotograma del menú

contextual. Los fotogramas de alrededor permanecen intactos.

Para mover un fotograma clave o secuencia de fotograma y su

contenido, arrastre el fotograma clave o secuencia hasta la ubicación deseada.

Para alargar la duración de un fotograma clave, arrastre con la tecla Alt

presionada presionada el fotograma clave hasta el fotograma final de la nueva

duración de la secuencia.

Para copiar un fotograma clave o una secuencia de fotograma

arrastrando con la tecla Alt presionada, haga clic y arrastre el fotograma clave a

la nueva ubicación.

Para copiar y pegar un fotograma o una secuencia de fotogramas,

seleccione el fotograma o secuencia y elija Editar > Copiar fotogramas.

Seleccione un fotograma o secuencia que desee reemplazar y elija Editar >

Pegar fotogramas.

Para convertir un fotograma clave en fotograma, seleccione el fotograma

clave y elija Insertar > Borrar fotograma clave o haga clic con el botón derecho

del ratón y haga clic en el fotograma clave y elija Borrar fotograma clave en el

menú contextual. El fotograma clave eliminado y todos los fotogramas hasta el



fotograma clave siguiente se sustituirán con el contenido del fotograma que

preceda al fotograma clave eliminado.

Para cambiar la longitud de una secuencia interpolada, arrastre el

fotograma clave inicial o final a la derecha o la izquierda. Para cambiar la

longitud de una secuencia fotograma por fotograma.

Tipos de Fotograma

Fotograma Clave (KeyFrame): Son fotogramas con un

contenido específico. Se utilizan generalmente para

animaciones; se insertan presionando la tecla F6.

Fotograma Normal (Normal Frame): Estos fotogramas

siempre siguen a los fotogramas clave, no representan

contenido nuevo y son de color gris. Para insertar un

fotograma normal se presiona F5.

Fotograma Etiquetado (Label Frame): Contiene en la

parte superior una "bandera" roja que indica que tienen un

nombre asociado. Dicho nombre se establece desde el Panel

"Frame".

Fotograma con Acciones asociadas: Contienen en la parte

superior una "a" que indica que tienen una acción asociada.

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.

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

Tipos de AnimacionesIng. Melvy Terán Santa Cruz


Animación Fotograma a FotogramaSe le llama animación fotograma a fotograma ya que para crear un efecto se

necesita insertar fotogramas clave unos a continuación de otros.

Ejemplo: Puede ver este ejemplo en la carpeta ejemplos con el nombre

fotogramaAfotograma.fla

Animación de un objeto que cambia de colores.

Pasos:

1. Insertar Objeto, en mi ejemplo: una estrella.

2. Seleccionar un fotograma cualquiera de la línea de tiempo, insertar

un fotograma clave (presionar F6). Cambiar de color de relleno al

objeto.

Para realizar animación de tipo interpolación de movimiento, guía de movimiento se

necesitan objetos de tipo símbolo, objetos que a continuación describiremos.


Fotograma clave insertado en el número 5

Cambio de color de relleno del objeto con respecto al fotograma 1.


Símbolos e Instancias

Un símbolo es un gráfico, botón o clip de película creado en Macromedia. Los

símbolos se crean una sola vez y se pueden volver a utilizar en el mismo

documento o en otros documentos. Los símbolos creados forman parte

automáticamente de la biblioteca del documento activo. Una instancia es una

copia de un símbolo ubicada en el escenario o anidada en otro símbolo. Una

instancia puede ser muy diferente a su símbolo en color, tamaño y función. Al editar

el símbolo, se actualizan todas sus instancias, pero al aplicar efectos a una instancia

de un símbolo, sólo se aplica a la instancia en cuestión.

Tipos de símbolos

Cada símbolo posee una línea de tiempo y un escenario exclusivos que incluyen

capas. Al crear un símbolo, se elige el tipo de símbolo en función de cómo se desea

utilizar dicho símbolo en el documento.

Utilice símbolos gráficos para las imágenes estáticas y para crear

animaciones reutilizables ligadas a la línea de tiempo principal.

Utilice símbolos de botón para crear botones interactivos que

respondan a las pulsaciones y desplazamientos del ratón, o a otras acciones.

Utilice símbolos de clip de película para crear piezas de animación

reutilizables. Los clips de película tienen sus propias líneas de tiempo de

varios fotogramas, independientes de la línea de tiempo principal. También

pueden colocarse instancias de clip de película dentro de la línea de tiempo

de un símbolo de botón para crear botones animados.

Nota: Los símbolos creados se almacenan en la Biblioteca de Flash. Para aperturar

la biblioteca de Flash presione CTRL+L

Para convertir un objeto a Símbolo Clip de Película:

Utilizar una de las dos opciones:

1. Seleccione el objeto con la herramienta Selección.

2. Ir a la opción Modificar, Convertir a Símbolo.

3. Presionar F8.



4. Ingrese un nombre para el símbolo.

5. Elija un comportamiento Clip de Pelicula.

6. Pulse Aceptar.

Para convertir un objeto a Símbolo Gráfico:




3. Presionar F8.


5. Elija un comportamiento Gráfico.

6. Pulse Aceptar.

Para convertir un objeto a Símbolo Botón:




3. Presionar F8.


5. Elija un comportamiento botón.



6. Pulse Aceptar.

7. Presione doble clic en el botón y termine de editarlo: inserte fotogramas

clave en cada estado del botón (Reposo, Sobre, Presionado, Zona Activa).

Reposo: Estado del botón que se muestra cuando no se realiza acción

alguna en el botón.

Sobre: Estado del botón que se muestra cuando se colocan el puntero del

Mouse.

Presionado: Estado del botón que se muestra cuando se hace clic en el

botón.

Zona Activa: Zona de interacción de un botón.

8. Regrese al área de la escena; presione dos veces clic fuera del dibujo.

Editar Símbolos

Editar Símbolo Clip de Película:

1. Seleccionar el símbolo a editar, presionar doble clic, realizar las modificaciones

que se requiere.

2. Salir del área de símbolo haciendo doble clic fuera del objeto.

Editar Símbolo Gráfico:


que se requiere.

2. Salir del área de símbolo haciendo doble clic fuera del objeto.

Editar Símbolo Botón:


que se requiere.

2. Editar cada una de las zonas del botón: reposo, sobre, presionado, zona activa.


Estados del botón


3. Salir del área del área haciendo doble clic fuera

Nota: Al realizar las modificaciones a una instancia de símbolo, automáticamente el

resto de instancias se modifican.

Operaciones con símbolos e

instancias de símbolos

Cada instancia de símbolo tiene sus propiedades, que son distintas de las del

símbolo. Puede modificar la tinta, la transparencia y el brillo de una instancia,

Las instancias de símbolos cuenta con 4 opciones de operación: brillo, tinta, alfa y

personalizado; opciones que se encuentran en el Panel Propiedades.

1. Seleccione la instancia del símbolo

2. Apertura el Panel Propiedades; elija una de las opciones: brillo, tinta, alfa y

personalizado en la propiedad COLOR.

Para colocar atributo de brillo a una instancia de símbolo:

a. Seleccionar instancia de símbolo.

b. Abrir el panel propiedades

c. Seleccionar en Color: Brillo

d. Ingresar porcentaje de brillo

Ejemplo:


Izquierda: Objeto original.Centro: Objeto con brillo de 62%.Derecha: Objeto con brillo de -66%


Para colocar atributo de tinta a una instancia de símbolo:

1. Seleccionar instancia de símbolo.

2. Abrir el panel propiedades

3. Seleccionar en Color: Tinta

4. Elegir el color de tinta e ingresar el porcentaje de transparencia.

Ejemplo:

Para colocar atributo de alfa a una instancia de símbolo:

1. Seleccionar instancia de símbolo.

2. Abrir el panel propiedades

3. Seleccionar en Color: Alfa

Ejemplo:

Uso de la bibliotecaCuando se convierte un objeto a Símbolo se almacena en la biblioteca. Para

aperturar la biblioteca se presionan las teclas CTRL + L.

Para instanciar un símbolo de la biblioteca arrastre cualquiera de ellos a la escena.


Izquierda: Objeto original.Derecha: Objeto con tinta de color naranja al 100%

Izquierda: Objeto original.Derecha: Objeto con alfa de 13%.

Biblioteca


Distribuir objetos en capasSe puede distribuir los objetos en diferentes capas con el fin de aplicarles efectos

diferentes a cada uno de ellos.

Ejemplo:

Se tienen varios objetos en una capa 1; se desea distribuir todos lo objetos menos

uno en capas diferentes.

1. En la imagen se observan 3 objetos en la capa 1.

Seleccione el rectángulo y el triángulo, presionar clic derecho sobre ellos, elegir

Distribuir en Capas. En la imagen puede observar que automáticamente de

crearon las capas triangulo y rectángulo (nombres de los símbolos).



Animación Interpolación de

MovimientoTipo de animaciones de forma lineal: Ejemplo: Arriba hacia abajo, de derecha a

izquierda, aparecer desaparecer, giros en su mismo sitio, etc.

Cuando se ha realizado correctamente la animación, muestra una flecha de color

negra continua y un fondo de color lila que representa a este tipo de animación.

Pasos: Objeto con Movimiento de izquierda a derecha

Puede ver este ejemplo en la carpeta Ejemplos con el nombre

interpolacionmovimiento.fla

1. Establecer los puntos de la animación: punto inicial (izquierda) y punto final

(derecha).

2. Elegir los fotogramas inicio (fotograma 1) y fin (fotograma 25).

3. Insertar un objeto símbolo (de preferencia grafico o clip de película) en el

fotograma inicio.

4. Insertar un fotograma clave (F6) en el fotograma 25.

5. Presionar anticlick entre fotograma clave inicio y fotograma clave final, elegir

Crear Interpolación de Movimiento.


Fotograma clave inicial

Fotograma clave final


6. Si desea que gire la animación, seleccionar uno de los fotogramas entre el

fotograma clave inicial y el fotograma clave final (ejemplo el fotograma 12),

abrir el panel propiedades y en el atributo Girar: elegir Horario o Antihorario.

Importar ImágenesPara importar una imagen en Flash; este lo trata de 2 formas:

a) Imágenes Estáticas:

1. Archivo, importar, importar a Biblioteca.

2. Elegir imagen

3. Pulsar Abrir

Flash considera a estas imágenes como mapa de bits; cuando aperture la biblioteca

(ctrl +L) mostrara el nombre de la imagen, además de su tipo (mapa de bits). Si se

desea instanciar la imagen a a la escena, deberá arrastrar el mapa de bits de la

biblioteca al escenario.


Fotograma 12 seleccionado.

Opción girar: Horario.


b) Imágenes Animadas:

1. Archivo, importar, importar a Biblioteca.

2. Elegir imagen

3. Pulsar Abrir

Flash considera a estas imágenes como símbolo clip de película; cuando aperture la

biblioteca (ctrl +L) mostrara el nombre de la imagen, además de su tipo (clip de

película) y una cola de imágenes de tipo mapa de bits. Si se desea instanciar la

imagen a la escena, deberá arrastrar el clip de película de la biblioteca al escenario.

Interpolación de Movimiento y la

propiedades de un símboloAnteriormente se describieron la propiedades de un símbolo, en esta sesión

trabajaremos con ellos creando animaciones.

Ejemplo 1: Propiedad Brillo. Animación de un objeto que cambia de su color real

a un brillo opaco.

Fotogramas utilizados 1 y 25. Ejemplo que lo puede visualizar en la carpeta

Ejemplos con el nombre brillo.fla.

Pasos:

1. Insertar un símbolo en el fotograma 1.

2. Insertar un fotograma clave en el fotograma 25.

3. Clic derecho entre los fotogramas mencionados anteriormente, elegir Crear

interpolación de movimiento.


Imagen animada importada

Cola de imágenes mapa de bits


4. Seleccionar con un clic el fotograma 25, luego hacer un clic en el símbolo de

ese fotograma, ir al Panel Propiedades, en el atributo Color, elegir Brillo y

colocarle una cantidad -78%.

5. Reproducir la animación presionando las teclas CTRL + ENTER.

Ejemplo 2: Propiedad Alfa. Animación de un objeto con color tinta y luego aparece

su color real.


Ejemplos con el nombre alfa.fla.

Pasos:



3. Anticlick entre los dos fotogramas, elegir Crear Interpolación de Movimiento.

4. clic en el fotograma 1, clic en el símbolo, abrir Panel Propiedades,

seleccionar Alfa y su porcentaje (el porcentaje depende la transparencia del

color).

5. Reproducir la película.


Seleccionar fotograma

Seleccionar símbolo

Seleccionar brillo y cantidad -78 %

Seleccionar fotograma 1


Seleccionar Propiedad Alfa y porcentaje de transparencia en el

Panel de propiedades


Ejemplo 3: Propiedad Tinta. Animación de un objeto que aparece y luego

desaparece.


Ejemplos con el nombre tinta.fla.

Pasos:



3. Anticlick entre los dos fotogramas, elegir Crear Interpolación de Movimiento.

4. clic en el fotograma 25, clic en el símbolo, abrir Panel Propiedades,

seleccionar Tinta, elija el color y el porcentaje de tinta.

5. Reproducir la película.



Animación por Guía de Movimiento

Tipo de animaciones no lineales, animaciones a través de trayectos establecidos

con herramientas como lápiz, bezier o línea deformada.

Pasos:

1. Establecer los puntos de la animación: punto inicial y punto final.

2. Elegir los fotogramas inicio (fotograma 1) y fin (fotograma 20).


4. Insertar un fotograma clave (F6).

5. Presionar clic derecho entre los fotogramas inicio (fot. 1) y fin (fot. 20), elegir

Crear Interpolación de Movimiento. En el panel propiedades activar la opción

Orientar según trazado.

6. Insertar una capa Guía (clic en el icono de capa guía de Línea de Tiempo )

7. Dibujar trayecto con herramienta Línea, lápiz o pluma.

Ejemplo: Animación por Guía de Movimiento. Ejemplo que lo puedes encontrar

en la carpeta Ejemplos con el nombre de guiamovimiento.fla




Seleccionar Propiedad Tinta, su color.


Uso del Panel TransformarEn el panel transformar Ud. podrá disminuir o aumentar el porcentaje de un objeto,

colocar un ángulo de giro o sesgado.

Para activar el panel transformar, presione las teclas CTRL + T.

Ejemplo 1: Ejercicio aplicando interpolación de movimiento y el panel transformar.

Decrecer un objeto.

Este ejemplo se encuentra en la carpeta Ejemplo con el nombre decrecer.fla

Pasos:


2. Insertar un fotograma clave: fotograma 25.



3. Presionar clic derecho entre los fotogramas 1 y 25, elegir Crear Interpolación

de movimiento.

4. Seleccionar el fotograma 25.

5. Abrir el panel transformar, ingresar porcentaje de reducción.

6. Reproducir la película: CTRL + ENTER.

Ejemplo 2: Ejercicio aplicando interpolación de movimiento y el panel transformar.

Sesgar un objeto desde el inicio con 30 grados (sesgado horizontal) y al final con

150 grados (sesgado verticalmente).

Este ejemplo se encuentra en la carpeta Ejemplo con el nombre sesgado.fla

Pasos:


2. Insertar un fotograma clave: fotograma 25.

3. Presionar clic derecho entre los fotogramas 1 y 25, elegir Crear Interpolación

de movimiento.

4. Seleccionar el fotograma 1; abrir el panel transformación e ingresar un

ángulo de sesgado horizontal 30 grados.



Panel transformar: 50 % reducción


Panel transformar sesgado horizontal 30


5. Seleccionar el fotograma 25; abrir el panel transformación e ingresar un

ángulo de sesgado vertical 150 grados.

6. Reproducir la película: CTRL + ENTER.



Panel Transformar sesgado vertical de 150


Animaciones de Interpolación por

Formas

Tipo de animación de transformación de un objeto a otro. Ejemplo: Que un círculo

se transforme a un cuadrado o un texto se transforme a una línea, etc.

Cuando se ha realizado correctamente la animación, muestra una flecha de color

negra continua y un fondo de color verde que representa a este tipo de animación.

Pasos:

1. Establecer los puntos de la animación: punto inicial y punto final.

2. Elegir los fotogramas inicio y fin.

3. Insertar un objeto vectorial no SIMBOLO en el fotograma inicio.

4. Insertar un fotograma clave (F6), borrar el objeto y dibujar otro objeto vectorial.

5. Seleccionar uno de los fotogramas entre el fotograma inicio y el fotograma final.

6. En el Panel Propiedades, en la propiedad Animar: elegir Forma.

Ejemplo: Animación de transformación de una estrella a un polígono deformado.

Este ejemplo se encuentra en la carpeta Ejemplo con el nombre formas.fla y otro

ejemplo formas1.fla

Ejemplo:

Transformación de un rectángulo a una letra A

Pasos:

1. Insertar un rectángulo n el fotograma 1.

2. Insertar un fotograma clave en el 10, insertar la letra A (separar el carácter).

3. Clic derecho entre los fotogramas, abrir Panel Propiedades, y en Animar,

escoger Forma.



4. Seleccionar fotograma 1, ir a Modificar Forma, Añadir Forma, mover los

consejos de forma al lugar que crea conveniente.

5. Seleccionar fotograma 10, mover los consejos de forma al lugar que crea

conveniente.


Consejos de forma iniciales

Seleccionar último fotograma

Consejos de forma

modificados


Máscaras

Para obtener el efecto de foco y de transiciones, puede utilizar una capa de

máscara para crear un agujero a través del cual se puedan ver las capas situadas

por debajo. Un elemento de máscara puede ser una forma rellena, un objeto de

tipo, una instancia de un símbolo de gráfico o un clip de película. Varias capas

pueden agruparse bajo una misma capa de máscara para crear efectos sofisticados.

Pasos: Este ejemplo lo podrá observar en la carpeta Ejemplos con el nombre de

mascaras.fla

1. Crear una animación cualquiera sea de interpolación de movimiento o de

formas. (Capa que tendrá función de Máscara).

2. Agregar una capa (ayúdese del icono de la Línea de tiempo), inserte objeto.

(Capa que tendrá función de enmascarada). Si el objeto es texto asegúrese de

que sea de tipo texto estático.

3. Arrastrar la nueva capa debajo de la capa que tiene la animación.

4. Clic derecho sobre la capa que tiene la animación, elegir Máscara.

Ejemplo:


Capa máscara objeto rectángulo

Capa enmascarada objeto texto de tipo estático


Funciones de PantallaFscommand: Permite controlar los comandos de pantalla. Esta función puede estar

asociado a un botón o a un fotograma.

Comando Parámetro Propósito

quit Ninguno Cierra el proyector.

fullscreen true o false

Si se especifica true, Flash Player se establece en el

modo de pantalla completa. Si se especifica false, el

reproductor vuelve a la vista de menú normal.

allowscale true o false

Si se especifica false, el reproductor se establece de

forma que el archivo SWF se dibuje siempre con su

tamaño original y nunca se cambie su escala. Si se

especifica true, se obliga al archivo SWF a cambiar su

escala al 100% del reproductor.

showmenu true o false

Si se especifica true, se activa el conjunto completo de

elementos de menú contextual. Si se especifica false, se

atenúan todos los elementos de menú contextual

excepto Configuración y Acerca de Flash Player.

Nota: Esta función solo se comprueba su funcionamiento a la hora de exportar la

aplicación.

Para exportar un archivo swf: Archivo, exportar, exportar película.

Ejemplo: En la escena1 hay unos efectos que deseamos observar en pantalla

completa, el código (el cual insertaremos en el fotograma 1 de la capa 2) sería el

siguiente:

fscommand(“fullscreen”,true);

Si deseamos salir de la aplicación clicando en un botón el código sería el siguiente.

btnsalir.onPress=function(){

fscommand(“quit”);

}

Exporte la película y compruebe los comandos.

La aplicación de este ejercicio lo encontrará en la carpeta Ejemplos, con el nombre

de pantalla.fla

BotonesIng. Melvy Terán Santa Cruz


Los botones en flash nos sirven para enlazar escenas, enlazar páginas web, etc.

Los símbolos de tipo botón los pueden crear o simplemente instanciarlos de la

biblioteca de botones de flash.

Para aperturar la biblioteca de flash: Ventana, bibliotecas Comunes, botones; a

continuación ingrese a las carpetas contenedoras de los botones, elija uno de su

agrado e instancielas a la escena.

Para crear botones realice lo siguiente:

1. Inserte el objeto que actuará como botón.

2. Seleccione el objeto con la herramienta selección, y presione F8; elija

comportamiento botón y asígnele un nombre.

3. Ingrese al área del botón presionando 2 veces clic sobre él, termine

de editar los estados del botón (F6).

4. Regrese a la Escena en la cual esta trabajando.


Carpetas contenedoras de botones.


Enlazar escenas en una aplicación flashPara enlazar dos o más escenas de una aplicación Flash, se utiliza la función

gotoAndPlay, la cual necesita de dos parámetros:

Sintaxis:

gotoAndPlay(“Nombre Escena a la que se dirige”, “numero de fotograma de

está”);

Nota: Cada escena debe tener una acción stop(); al finalizar sus efectos en la linea

de tiempo, por ejemplo: si las animaciones en la línea de tiempo terminan en el

fotograma 20, se agrega una capa mas y se inserta un clave vacio (F7) en el

fotograma 20, se selecciona ese fotograma, y en el panel acciones colocar stop();

Ejemplo: Este ejercicio se encuentra en la carpeta Ejemplos con el nombre

Escenas.fla.

Se tienen 2 escenas: las animaciones de cada una terminan en el fotograma 40 y

35 respectivamente. Por lo tanto a cada escena de le agregara una capa mas, se

insertara un fotograma clave vacío donde se colocará el stop.

Además cada escena deberá contener botón (nes) dependiendo del usuario, donde

se colocará el siguiente código en el fotograma 1 de la capa contenedora del boton:

btnsiguiente.onPress=function(){ // boton de avance a la escena siguiente

gotoAndPlay(“Escena 2”,1);

} //Btnsiguiente, es el nombre de instancia del botón, el cual se colocara en el panel

se propiedades seleccionando el botón.

Ir a la siguiente Escena.

BtnAnterior.onPress=function(){


Fotograma clave vacío

Acción stop();


gotoAndPlay(“Escena 1”,1);

// Permite retroceder a la escena anterior en este caso la Escena 1.

}

Enlazar páginas web por medio de botones

FlashSi creamos botones, lógicamente es por que queremos enlazarlos con otras páginas

web en nuestro servidor, o páginas web en otros servidores.

Para hacer los enlaces o links, debemos utilizar el panel de Acciones de Flash. Para

poder visualizar dicho panel, dirígete al menú principal y haz click en Ventana >

Acciones.

El panel de Acciones, nos servirá para trabajar con ActionScript.

¿Qué es ActionScript?, es el lenguaje de creación de scripts de Flash. Puede

utilizar ActionScript para controlar objetos en las películas de Flash con el fin de

crear elementos interactivos y de navegación, y para ampliar Flash con el fin de

crear películas altamente interactivas y aplicaciones Web. En otras palabras,

ActionScript es el lenguaje de programación utilizado por Flash.

Comencemos a hacer el enlace.

Ejemplo que se encuentra en la carpeta Ejemplos con el nombre de PaginaWeb.fla

1- Desde la biblioteca de Flash, arrastramos a la Escena 1 el botón creado en el

capítulo anterior. Mantén el botón seleccionado, si no lo está, haz click sobre él con

la herramienta seleccion.

2- En el menú principal, haz click en Ventana > Acciones.

3- En el panel de Acciones escriba lo siguiente:

on (press) {

getURL("http://www.aulaclic.com", "_blank");

}

on: Evento del Mouse.

press: Cuando se realice click izquierdo con el mouse.

getURL: Función que permite aperturar páginas web.

_blank: Destino de apertura de la página Web; la pagina de desarrollo Web se

abrirá en una ventana nueva.

Enlaces email flashPor medio de botones hechos en Flash, podemos ejecutar nuestros programas de

envío de correos electrónicos (Outlook por ejemplo), para enviar mensajes. (Tus



programas de envío de correos electrónicos tienen que estar configurados e

instalados correctamente)

¿Cómo hacer ésto? Ejemplo que se encuentra en la carpeta Ejemplos con el

nombre de PaginaWeb.fla

1- Creamos un botón.

2- Abrir el panel Acciones F9

3- Escribe las siguientes acciones:

on (release) {

getURL("mailto:[email protected]");

}

on (press), es una acción utilizada únicamente para botones, e indica que la

acción se ejecutará inmediatamente después de haber presionado el botón del

ratón.

getURL: Acción; carga un documento de una URL específica en una ventana o pasa

variables a otra aplicación en una URL definida.

Mailto: método utilizado para enviar correos electrónicos.

Prueba tu película (CTRL+Enter). Después puedes publicarla (en menú principal

Archivo >Publicar).

Clips de Película y sus Propiedades

Un Clip de Película o simplemente Clip, es una película en si misma, como

cualquiera de las que podamos haber creado hasta el momento en este curso, pero

que está incluida dentro de otra película y, a su vez puede contener también

películas insertadas en él.

Al igual que los otros tipos de símbolos de Flash, los clips de película tienen su

propia línea de tiempo. Sin embargo, y a diferencia de los Gráficos (como veremos

a continuación), esta línea temporal no está ligada a la línea de tiempos del

documento que lo contiene, de tal forma que su ejecución es independiente.

Este tipo de símbolos puede contener cualquier otro tipo de símbolo: gráfico, clip o

botón, así como cualquier objeto creado con Flash, ya que un clip es realmente

una película.

Otra de las ventajas de los Clips la encontramos cuando realizamos películas de

gran complejidad y tamaño, en la que intervienen un número muy elevado de

fotogramas, debido a que en la vista general del documento, nosotros sólo veremos

un fotograma por clip, el cual puede estar compuesto por muchos frames, lo que

nos permitirá tener una mejor visión de cómo se desarrolla nuestra animación, y

una barra de tiempos más clara y "limpia".



Los Clips son una de las herramientas que dan mayor potencia a Flash 8,

permitiéndonos crear películas de gran complejidad y multiplicar los efectos

visuales, ya que se pueden crear múltiples movimientos independientes entre sí y

crear conexiones entre los diferentes Clips de un documento.

Todas aquellas cosas que no podíamos hacer con un símbolo de tipo Gráfico, lo

podemos hacer con un Clip, además de poder realizar también todo aquello que

nos permitía dicho símbolo. Por esto, normalmente se utilizan los clips para

cualquier tipo de animación debido a su gran flexibilidad, dejando los gráficos sólo

para imágenes estáticas.

Propiedades

_alpha: Define la transparencia de una instancia de un clip de película. Los valores

válidos van de 0 a 100.

Ejemplo: Ejercicio que se encuentra en la carpeta Ejemplos con el nombre

transparencia.fla

En la escena 1 hay un clip de película, colocarle nombre de instancia dibujo, en el

panel propiedades; y al botón colóquele como nombre de instancia control.

Ubíquese en el fotograma 1 de la capa contenedora del botón, aperture el panel

acciones F9.

Y escriba lo siguiente:

control.onPress=function(){

dibujo._alpha=dibujo._alpha-40;

}

_height: Determine el alto de una instancia de clip de película en píxeles.

_width: Determina el ancho de una instancia del clip de película en pìxeles.


altura.fla




acciones F9.



dibujo._height=dibujo._height-10;

dibujo._width=dibujo._width-10;

}

_rotation: Determina el grado de rotación de una instancia de clip de película. Los

valores entre 0 y 180 corresponden a la rotación en sentido de las agujas del reloj,

por otro lado los valores entre 0 y -180 corresponde a la rotación en sentido

contrario a las agujas del reloj.




rotacion.fla




acciones F9.



dibujo._rotation=dibujo._rotation+5;

}

_x: Determina la coordenada x de una instancia de clip de película en relación con

las coordenadas locales del clip de película principal.

_y: Determina la coordenada y de una instancia de clip de película en relación con

las coordenadas locales del clip de película principal.


posiciones.fla




acciones F9.



dibujo._x=dibujo._x+5;

dibujo._y=dibujo._y+10;

}

SonidosReproducir Sonidos:

Para reproducir sonidos mp3 se utiliza el metodo loadSound de la clase Sound.

Dichas acciones pueden estar asignadas a un fotograma o evento producido por un

botón.

Antes de utilizar el método loadSound(), primero se debe crear un objeto Sound

como se muestra en el siguiente código:

Var sonido=new Sound();

Luego de crear el objeto Sound() denominado por la variable sonido, ahora se

puede llamar al método loadSoun() para reproducir el sonido.

Btnsonido.onPress=function(){

Sonido.loadSound(“Survivor.mp3”,true);

}

Este ejemplo se encuentra en la carpeta Ejemplos con el nombre: sonidos.fla



Detener Sonidos:

Para detener archivos mp3 se utiliza el método stop() de la clase Sound. Dichas

acciones pueden estar asignadas a un fotograma o evento producido por un botón.

Antes de utilizar el método stop() primero debemos crear un objeto Sound. Una vez

ya creado el objeto Sound() denominado por la variable detener ahora se puede

llamar el método stop() para detener el sonido.

Btndetener.onPress=function(){

Sonido=new Sound();

Sonido.stop();

}

Este ejemplo se encuentra en la carpeta Ejemplos con el nombre: sonidos.fla

VideoTendrá que importar el vídeo a la biblioteca de flash.

5. Archivo, importar, importar a biblioteca.

6. Seleccione el video, clic en importar, mostrará la siguiente pantalla.

7. clic en siguiente hasta que muestre la siguiente ventana:



8. Elija el aspecto de su video, despliegue el cuadro de lista Aspecto.

9. Finalizar.

10. Si pide guardar el archivo, asigne un nombre a la aplicación fla.

11. Espere unos minutos a que termine de importar.

12. CTRL + Enter: reproduzca la película.

Este ejemplo se encuentra en la carpeta Ejemplos con el nombre: video.fla


Manual Flash8

Documents

Transcript of Manual Flash8