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 depe nde del zoom o del tipo de resolución con el cual se esté mirando el gráfico. Por mucho que nos acer acerqu quem emos os,, el grá gráfico fico no se pixe pixeli liza za,, ya que que el orden rdena ador dor traza raza 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 espec especie ie de cuad cuadríc rícul ula a en la cual cual cada cada un uno o de los los cuad cuadra rado dos s (píx (píxel eles es)) muestra un color determinado. Este Este tipo tipo de gráfi gráfico cos s son son depen dependi dient entes es de la vari variac ació ión n del del tama tamaño ño y reso resolu luci ción ón,,

pudi pudiend endo o

dimensiones.

perde perderr

cali calida dad d

al modi modifi fica carr

suce sucesi siva vame ment nte e

sus sus

Puede ede ver ver un ejemplo en la carpeta Ejemplos

(mapabits.fla).

Entorno de Trabajo

Linea de Tiempo

Caja Herramientas Escena: Hoja de trabajo

Ing. Melvy Terán Santa Cruz


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. Selecc Seleccion ione e la herram herramien ienta ta lápiz lápiz.. continuación ión seleccione seleccione el color color 2. Seleccione Ventana, Propiedades y, a continuac para el trazo, el grosor de la línea y el estilo en e l panel propiedades.

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

a. Seleccione Enderezar para dibujar líneas rectas y convertir figuras similares similares a triángulos, triángulos, óvalos, óvalos, círculos círculos,, rectángulos rectángulos

cuadrados cuadrados en

estas formas geométricas comunes.

b. Seleccione Suavizar para dibujar curvas suaves. para dibuja dibujarr líneas líneas a mano mano alzada alzada sin aplica aplicarle rles s c. Seleccione Tinta para ninguna modificación.

Líneas rectas, óvalos y rectángulos 1.

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


Manual Macromedia Flash 2.

Selección Ventana, Pro Prop pieda edades y se seleccione one lo los at atrib ributos de de tra traz zo y

de relleno en el panel propiedades. 3.

En la la he herramienta Re Rectángulo, hag haga cl clic en en el el mo modificador Rad Radio de de

rectan rectangul gulo o redonde redondeado ado para para especi especific ficar ar que desea desea esquin esquinas as redonde redondeada adas s e indique el valor del radio de esquina. Si el valor es cero, las esquinas son rectas.

Radio de rectángulo redondeado

4.

Arraste el cursos del Mouse sobre el escenario.

Nota: Si desea dibujar un círculo círculo perfecto o cuadrado cuadrado perfecto, mantenga mantenga presionada la tecla SHIFT mientras dibuja con la herramienta Óvalo o Rectángulo.

Polígonos y estrellas 1. Mant Manten enga ga puls pulsad ada a el botó botón n del ratón ratón sobre sobre la herra herrami mien enta ta Rect Rectán ángu gulo lo y arrástrela para seleccionar la herramienta PolyStar en el menú emergente.

2. Apertu Apertura ra el el Panel Panel propied propiedade ades. s. 3. Seleccione Seleccione los los atributos atributos de trazo trazo y relleno relleno en el panel propiedades. propiedades. 4. Haga clic clic en el botón botón Opciones Opciones del del panel panel de propiedad propiedades. es.

5. En el cuadro cuadro de Configuraci Configuración ón de herramienta herramientas, s, realice realice estas estas acciones: 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 Apertura el panel propieda propiedades des y seleccione seleccione los los atributos atributos de trazo trazo y relleno en el panel propiedades. 3. Coloque Coloque el puntero puntero en el escenario escenario,, en el inicio inicio de la línea línea recta, recta, y haga haga clic clic para definir e, primer punto de anclaje. 4. Vuelva Vuelva a hacer hacer clic para para indicar indicar donde donde desea que que termine termine el primer segment segmento o de a línea recta. 5. Siga haciendo haciendo clic clic para crear más más segment segmentos os rectos. rectos.

6. Para Para term termin inar ar el traz trazad ado o como omo un una a form forma a abie abiert rta a o cerr cerrad ada a coloq oloque ue 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. Colo Coloqu que e la herram herramie ient nta a Plum Pluma a en el punto punto del escen escenar ario io dond donde e dese desee e que que empiec empiece e la curva curva y manten mantenga ga presion presionado ado el botón botón del ratón. Aparecerá Aparecerá el primer punto de anclaje y la punta de la pluma se convertirá en una punta de flecha. 3. Arrastre Arrastre en la direcc dirección ión en la que desea desea dibujar dibujar el segmento segmento curvo. curvo. 4. Su Suel elte te el botón botón del ratón. ratón. La long longit itud ud y la pendi pendien ente te de los los sele select ctor ores es de tangentes determinan la forma del segmento curvo. Más tarde, puede mover los selectores de tangentes para ajustar la curva. 5. Coloque Coloque el puntero puntero donde donde desea desea que que finalice finalice el segmento segmento curvo. curvo.

:Para modifica modificarr los anclajes generados cuando se NOTA:Para utiliza la herramienta Pluma, seleccione la Herramienta ontinu nuac ació ión n haga haga clic clic sobr sobre e los los subselección, a conti anclajes y modifique .

Remodelar líneas y contornos de formas Remodelar con la Herramienta Selección


Manual Macromedia Flash Para remodelar una línea o el contorno de una forma, puede arrastrar cualquier punto punto de la línea línea median mediante te la her herram ramien ienta ta selección. El puntero puntero cambia cambia para 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. Arr Arrast astre re desde cualqui cualquier er punto punto del segmen segmento to para remodela remodelarlo rlo o arrast arrastre re 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.

Icono relleno

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



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

Transformar rellenos con degradado y de mapa de bits 1. Seleccione Seleccione un un objeto que que tenga tenga degradado degradado lineal, lineal, radial radial o de mapa mapa de bits. bits.

2. Seleccione la herramienta transformación de relleno 3. Hacer Hacer clic sobre sobre el objeto, objeto, mostrara mostrara unos tirador tiradores, es, de donde donde se podrá sesgar, sesgar, escala escalar, r, girar girar y mover mover solo solo el rellen relleno o mas no modifi modifica ca las dimensi dimensiones ones del objeto.

Tiradores con degradado radial

Tiradores con degradado lineal

Tiradores con Mapa de bits

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

-

Los Los camp campos os de test testo o estático muestr muestran an texto texto cuyos cuyos carac caractere teres s 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.


Manual Macromedia Flash 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).

Herramienta Texto

Gráfico 1

Para crear texto haga lo siguiente: 1. Seleccione la herramienta texto 2. Seleccione la Ventana, Propiedades

3. En el inspect inspector or de propiedades propiedades,, seleccione seleccione un un tipo de texto texto del menú menú emergente 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 Siga uno uno de esto estos s proced procedimi imient entos: os: a. Para crear crear un bloque bloque de texto texto que que muestre muestre texto en en una sola sola línea, línea, haga haga clic donde desee que empiece el texto. b. Para Para crear un bloque bloque con una anchur anchura a fija (para (para texto texto horizont horizontal) al) o una altura altura fija fija (para (para texto texto ver vertic tical) al),, coloqu coloque e el puntero puntero donde donde desee desee que


Manual Macromedia Flash empiece el texto y arrastre y arrastre el puntero para señalar la anchura o altura que desee. 5. Selecc Seleccion ione e los atributo atributos s de texto texto como tipo tipo de fuente, fuente, color, color, etc. etc. En el panel propiedades.

Separar Texto Puede separar texto para colocar cada carácter en un bloque de texto distinto. Después Después de separarlo, separarlo, puede distribuir distribuir rápidamente rápidamente los bloques bloques de texto en capas diferentes y animar cada bloque por separado.

Para separar texto haga lo siguiente: 1. Seleccione Seleccione la la herramienta herramienta selecci selección ón y haga clic clic en un un bloque bloque de texto. texto. 2. Seleccione Seleccione Modific Modificar, ar, Separar. Separar. Cada carácter carácter del texto selecci seleccionado onado se coloca coloca en un bloque de texto distinto. El texto permanece en la misma posición en el escenario.

3. Seleccione Seleccione Modific Modificar, ar, Separar Separar de nuevo para convertir convertir los caract caracteres eres en formas 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 herramienta texto seleccione seleccione un un bloque bloque de texto. texto.



2. Si el panel panel propiedades propiedades aun no se se muestra, muestra, seleccione seleccione Ventana Ventana,, Propiedades. Propiedades. 3. Para vínculo vínculo,, introduzca introduzca la URL URL a la que desea vincu vincular lar el bloque 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. Sele Selecci ccion onar ar el obj objeto eto a cop copia iar r 2. Pres Presio iona narr CTR CTRL L +C 3. Pres Presio iona narr CTRL CTRL + V. V. Copiar Objetos en la misma ubicación que el original

1. Selecci Selecciona onarr el objeto objeto a copi copiar. ar. 2. Pres Presio iona narr CTR CTRL L +C 3. Pres Presio iona narr CTRL CTRL + SHIF SHIFT T+V Mover Objetos:

1. Sele Selecci ccion onar ar el obj objeto eto a mov mover er 2. Pres Presio iona narr CTR CTRL L +X 3. Ubic Ubicars arsee en la nue nueva va posi posici ción ón 4. Pres Presio iona narr CTR CTRL L +V

Operaciones de Transformación Transformación de Objetos Reflejar objetos Ing. Melvy Terán Santa Cruz


1. Selecc Seleccion ionar ar objet objeto o a refl refleja ejar. r. opción ón Modi odific ficar, ar, Tran Trans sform forma ar, eleg elegir ir si se des desea Voltear 2. Ir a la opci

Horizontalmente o Voltear Verticalmente. Ejemplo:

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

Escalar y Girar Objetos: 1. Selecc Seleccion ionar ar objeto objeto a escal escalar ar y girar. girar. 2. Ir a la opción opción Modific Modificar, ar, Transform Transformar, ar, elegir elegir Escalar Escalar y Girar Girar 3. Ingresar Ingresar porcenta porcentaje je de escala escala y ángulo ángulo de giro.

Ejemplo:

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



Sesgar Objetos: 1. Selecc Seleccion ionar ar objet objeto o a sesgar sesgar.. 2. Ir a la opción opción Modific Modificar, ar, Transform Transformar, ar, elegir elegir Sesgar Sesgar y rotar rotar 3. Presione Presione los tirador tiradores es que se muestra muestran n alrededor alrededor objeto objeto y arrastre. arrastre.

Ejemplo:

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

Distorsionar Objetos: 1. Selecc Seleccion ionar ar objeto objeto a escal escalar ar y girar. girar. 2. Ir a la opción opción Modific Modificar, ar, Transform Transformar, ar, elegir elegir distorsi distorsionar onar 3. Presione Presione los tirador tiradores es que se muestra muestran n alrededor alrededor objeto objeto y arrastre. arrastre.

Ejemplo:

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



Envoltura en Objetos: 1. Selecc Seleccion ionar ar objeto objeto a aplicar aplicar envolt envoltura ura.. 2. Ir a la opción opción Modific Modificar, ar, Transform Transformar, ar, elegir elegir Sesgar Sesgar y rotar rotar 3. Presione Presione los tirador tiradores es que se muestra muestran n alrededor alrededor objeto objeto y arrastre. arrastre.

Ejemplo:

Izquierda: Objeto original. Derecha: Objeto con envoltura.

Modificar Formas: Expandir Rellenos: 1. Se Sele lecc ccio iona narr obj objet eto. o. 2. Ir a la opción Modificar, Modificar, Formas, Formas, elegir elegir Expandi Expandirr Relleno. Relleno. 3. Ingresar Ingresar informaci información ón de distancia distancia y tipo tipo de expansión. expansión.

Ejemplo:

Izquierda:

Objeto

original.

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



Suavizar bordes de Relleno: 1. Se Sele lecc ccio iona narr obj objet eto. o. 2. Ir a la opción opción Modific Modificar, ar, Formas, Formas, Suaviz Suavizar ar bordes de relleno. relleno. 3. Ingresar Ingresar informa información ción de distan distancia cia numero de escenari escenarios os y dirección. dirección.

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

Línea de Tiempo La 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 r ealice una de las acciones siguientes: •

Haga clic en la columna del ojo situada a la derecha del nombre de la capa o carpe carpeta ta en la líne línea a de tiem tiempo po para para ocul oculta tarl rla. a. Haga Haga clic clic de nu nuev evo o para 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 carpeta e introduzca 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 un a capa capa o carp carpet eta a para para bloqu bloquea earl rla. a. Haga Haga clic clic de nu nuevo evo 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 e lija Eliminar capa en el menú contextual.

Fotogramas 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. realice ce una una de las las acci accion ones es Para Para insert insertar ar fotogr fotogram amas as en la línea línea de tiemp tiempo o , reali 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 Para eli elimi mina narr un foto fotog grama rama,, fotog tograma rama cla clave o secu ecuenci encia a de seleccion ione e el fotogr fotograma ama,, fotogr fotograma ama clave clave o secuen secuencia cia y elija elija fotogramas , selecc Insertar > Eliminar fotograma o haga clic con el botón derecho del ratón en el


Manual Macromedia Flash fotograma, fotograma clave o secuencia y elija Eliminar fotograma del menú contextual. Los fotogramas de alrededor permanecen intactos. •

•

Para Para mo move verr un foto fotogr gram ama a clav clave e o secu secuen enci cia a de foto fotogr gram ama a 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 Para copi copia ar un foto fotogr gram ama a clav clave e o una una secu secuen enci cia a de foto fotogr gram ama a arrastrando con la tecla Alt presionada, haga clic y arrastre el fotograma clave a la nueva ubicación.

•

Para Para copia copiarr y pegar pegar un fotog fotogram rama a o una secuen secuencia cia de fotog fotogram ramas as,, sele selecc ccio ione ne el foto fotogr gram ama a o secu secuen enci cia a y elij elija a Edit Editar ar > Copi Copiar ar foto fotogr gram amas as.. 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.

•

arrastre re el Para Para cambi cambiar ar la longit longitud ud de una secuen secuencia cia inter interpol polad ada, a, arrast fotogr fotograma ama clave inicial inicial o final final a la derecha derecha o la izquie izquierda rda.. Para Para cambia cambiarr la longitud de una secuencia fotograma por fotograma.

Tipos de Fotograma Son foto fotogr gram amas as con con un Fotograma Fotograma Clave (KeyFrame) (KeyFrame):: Son conte onteni nido do

espe especí cífi fic co.

Se

util utiliizan zan

gen genera eralmen lmentte

para para

animaciones; se insertan presionando la tecla F6. fotogramas Fotogr Fotograma ama Normal Normal (Norma (Normall Frame) Frame):: Estos fotogramas siem siempr pre e sigu siguen en a los los foto fotogra grama mas s clav clave, e, no repre represe sent ntan an cont conten enid ido o nu nuev evo o y son son de colo colorr gris gris.. Para Para inse insert rtar ar un fotograma normal se presiona F5. Contie iene ne en la Fotogr Fotograma ama Etique Etiquetad tado o (Label (Label Frame) Frame):: Cont 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.

Foto Fo togr gram amas as de Anim Animac ació ión n de Movi Movimi mien ento to:: Vienen caracterizados por el color morado y representa el movimiento (con o sin efectos) de un objeto, que pasa de la posición del Keyfra Keyframe me inici inicial al al final. final. Para Para represe representa ntarr esta esta animac animación ió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 repre sentar esta animación aparece una flecha entre estos Keyframes

Tipos de Animaciones Animación Fotograma a Fotograma Se le llama animación fotograma a fotograma ya que para crear un efecto se necesita insertar fotogramas clave unos a continuación de otros. Puede e ver ver este este ejem ejempl plo o en la carp carpet eta a ejem ejempl plos os con con el nomb nombre re Ejemplo: Pued

fotogramaAfotograma.fla Animación de un objeto que cambia de colores. Pasos: 1. Insertar Insertar Objeto, Objeto, en mi mi ejemplo: ejemplo: una estrel estrella. la.


Manual Macromedia Flash 2. Selecc Seleccion ionar ar un fotogr fotograma ama cualqu cualquiera iera de la línea línea de tiempo tiempo,, insert insertar ar un fotograma clave (presionar F6). Cambiar de color de relleno al objeto.

Fotograma clave insertado en el número 5 Cambio de color de relleno del objeto con respecto al fotograma 1.

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.

Símbolos e Instancias Un símbolo es un gráfic gráfico, o, botón botón o clip clip de pelícu película la creado creado en Macrom Macromedi edia. a. Los símb símbol olos os se crea crean n un una a sola sola vez vez y se pued pueden en volv volver er a util utiliz izar ar en el mism mismo o docu docume ment nto o

o

en

otro otros s

docu docume ment ntos os..

Los Los

símb símbol olos os

crea creado dos s

form forman an part parte e

automátic automáticament amente e de la biblioteca biblioteca del documento documento activo. Una instancia es una copia copia de un símbolo símbolo ubicad ubicada a en el escenario escenario o anidad anidada a en otro otro símbol símbolo. o. Una instancia puede ser muy diferente a su símbolo en color, tamaño y función. Al editar editar el símbolo, se actualizan actualizan todas sus instancias, 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.

•

Utilic Utilice e símbol símbolos os gráfic gráficos os para para las imágen imágenes es estáti estáticas cas y para para crear crear animaciones reutilizables ligadas a la línea de tiempo principal.

•

Util Utilic ice e

símb símbol olos os de botó botón n para para crea crearr

boto botone nes s inte intera ract ctiv ivos os que que

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



•

Utilic Utilice e símbol símbolos os de clip clip de pelíc película ula para para crear crear piezas piezas de animac animación ió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 opción Modifi Modificar, car, Converti Convertirr a Símbolo. Símbolo. 3. Pres Presio iona narr F8. F8. 4. Ingres Ingrese e un nomb nombre re para para el símbol símbolo. o. 5. Elija un comportami comportamiento ento Clip de Pelicu Pelicula. la. 6. Puls Pulse e Ace Acept ptar ar..

Para convertir un objeto a Símbolo Gráfico: Utilizar una de las dos opciones:

1. Seleccione el objeto con la herramienta Selección. 2. Ir a la opción opción Modifi Modificar, car, Converti Convertirr a Símbolo. Símbolo. 3. Pres Presio iona narr F8. F8. 4. Ingres Ingrese e un nomb nombre re para para el símbol símbolo. o. 5. Elija Elija un comp comporta ortamie miento nto Gráf Gráfic ico. o.


Manual Macromedia Flash 6. Puls Pulse e Ace Acept ptar ar..

Para convertir un objeto a Símbolo Botón: Utilizar una de las dos opciones:

1. Seleccione el objeto con la herramienta Selección. 2. Ir a la opción opción Modifi Modificar, car, Converti Convertirr a Símbolo. Símbolo. 3. Pres Presio iona narr F8. F8. 4. Ingres Ingrese e un nomb nombre re para para el símbol símbolo. o. 5. Elija Elija un un compo comporta rtamie miento nto botón. botón. 6. Puls Pulse e Ace Acept ptar ar..

Estados del botón

7. Presio Presione ne doble clic clic en el botón botón y termin termine e de editar editarlo: lo: inserte inserte fotogra fotogramas mas 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 Regrese al área de la escena; escena; presione presione dos dos veces veces clic clic fuera del del dibujo. dibujo.



Editar Símbolos Editar Símbolo Clip de Película: 1. Selecciona Seleccionarr el símbolo a editar, editar, presionar presionar doble clic, clic, realizar realizar las modificaci modificaciones ones que se requiere. 2. Salir Salir del área área de símbol símbolo o haciendo haciendo doble doble clic clic fuera del objeto. objeto.

Editar Símbolo Gráfico: 1. Selecciona Seleccionarr el símbolo a editar, editar, presionar presionar doble clic, clic, realizar realizar las modificaci modificaciones ones que se requiere.

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

Editar Símbolo Botón: 1. Selecciona Seleccionarr el símbolo a editar, editar, presionar presionar doble clic, clic, realizar realizar las modificaci modificaciones ones que se requiere. 2. Editar Editar cada una de las las zonas del del botón: reposo, reposo, sobre, sobre, presionad presionado, o, zona activa activa..

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 Cada instan instancia cia de símbol símbolo o tiene tiene sus propieda propiedades des,, que son distinta distintas s 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. Selecc Seleccion ione e la insta instanci ncia a del símbo símbolo lo

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. Selecc Seleccion ionar ar insta instanci ncia a de símbo símbolo. lo. b. Ab Abri rirr el pane panell propi propied edad ades es c. Se Sele lecc ccio iona narr en Color Color:: Brill Brillo o d. Ingresa Ingresarr porc porcent entaje aje de brillo 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. Selecc Seleccion ionar ar insta instanci ncia a de símbo símbolo. lo. 2. Ab Abri rirr el pane panell propi propied edad ades es 3. Selecc Seleccion ionar ar en Color: Color: Tinta Tinta 4. Elegir Elegir el color color de tinta tinta e ingresar ingresar el porcentaj porcentaje e de transparenc transparencia. ia.

Ejemplo:

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

Para colocar atributo de alfa a una instancia de símbolo: 1. Selecc Seleccion ionar ar insta instanci ncia a de símbo símbolo. lo. 2. Ab Abri rirr el pane panell propi propied edad ades es 3. Selecc Seleccion ionar ar en Color: Color: Alfa Alfa



Ejemplo:

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

Uso de la biblioteca Cuando se convierte un objeto a Símbolo se almacena en la biblioteca. Para aperturar la biblioteca se presionan pre sionan las teclas CTRL + L. Para instanciar un símbolo de la biblioteca arrastre cualquiera de ellos a la escena.

Biblioteca

Distribuir objetos en capas Se 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 imag imagen en se obser observan van 3 objet objetos os en la capa capa 1. 1.

Seleccione el rectángulo y el triángulo, presionar clic derecho sobre ellos, elegir imagen puede puede observa observarr que automá automátic ticame amente nte de Distribuir Distribuir en Capas. Capas. En la imagen crearon las capas triangulo y rectángulo (nombres de los símbolos).

Animación Interpolación de Movimiento Tipo 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.


Manual Macromedia Flash 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. Inse Inserta rtarr un obje objeto to símb símbol olo o (de (de pref prefere erenc ncia ia grafi grafico co o clip clip de pelíc películ ula) a) en el fotograma inicio.

4. Insertar un fotograma clave (F6) en el fotograma 25. 5. Presi Presiona onarr anticl anticlic ick k entre entre fotogra fotograma ma clave inicio inicio y fotogra fotograma ma clave final, final, elegir 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 .

Fotograma 12 seleccionado.

Opción girar: Horario.



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

a) Im Imáge ágenes nes Estáti Estáticas cas:: 1. Archiv Archivo, o, importa importar, r, importa importarr a Biblio Bibliotec teca. a. 2. Eleg Elegiir imag imagen en 3. Puls Pulsar ar Abri brir 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.

b) Imágenes Animadas: 1. Archiv Archivo, o, importa importar, r, importa importarr a Biblio Bibliotec teca. a. 2. Eleg Elegiir imag imagen en 3. Puls Pulsar ar Abri brir Flash considera a estas imágenes como símbolo clip de película; cuando aperture la biblioteca biblioteca (ctrl +L) mostrara mostrara el nombre de la imagen, 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. Imagen animada importada

Cola de imágenes mapa de bits



Interpolación de Movimiento y la propiedades de un símbolo Ante An teri riorm ormen ente te se descr describ ibie ieron ron la prop propie ieda dade des s de un símb símbol olo, o, en esta esta sesi sesión ó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. Foto Fotogr gram amas as util utiliz izad ados os 1 y 25 25.. Ejem Ejempl plo o que que lo puede puede visu visual aliz izar ar en la carp carpet eta a Ejemplos con el nombre brillo.fla.

Pasos: 1. Insert Insertar ar un símb símbolo olo en el fotog fotogram rama a 1. 2. Insertar Insertar un un fotogram fotograma a clave clave en el fotograma fotograma 25. 3. Clic derecho derecho entre entre los fotograma fotogramas s mencionados mencionados anterio anteriormente, rmente, elegir Crear Crear interpolación de movimiento. 4. Seleccionar Seleccionar con con un clic clic el fotograma fotograma 25, luego luego hacer un un clic en el símbol símbolo o de ese fotograma, ir al Panel Propiedades, en el atributo Color, elegir Brillo y colocarle una cantidad -78%.

Seleccionar fotograma Seleccionar símbolo Seleccionar brillo y cantidad -78 %



5. Reproducir Reproducir la anima animación ción presionan presionando do las teclas teclas CTRL CTRL + ENTER. ENTER.

Ejemplo 2: Propiedad Alfa. Animación de un objeto con color tinta y luego aparece su color real. Foto Fotogr gram amas as util utiliz izad ados os 1 y 25 25.. Ejem Ejempl plo o que que lo puede puede visu visual aliz izar ar en la carp carpet eta a Ejemplos con el nombre alfa.fla.

Pasos: 1. Insert Insertar ar un símb símbolo olo en el fotog fotogram rama a 1. 2. Insertar Insertar un un fotogram fotograma a clave clave en el fotograma fotograma 25. 3. Anticlick Anticlick entre entre los dos fotogramas fotogramas,, elegir Crear Crear Interpolación Interpolación de Movimient Movimiento. o. clic en el foto fotogr gram ama a 1, clic clic en el símb símbol olo, o, abri abrirr Pane Panell Prop Propie ieda dade des, s, 4. clic seleccionar Alfa y su porcentaje (el porcentaje depende la transparencia del color). 5. Repro Reprodu duci cirr la pelíc películ ula. a.

Seleccionar fotograma 1

Seleccionar Propiedad Alfa y porcentaje de transparencia en el Panel de propiedades

Seleccionar símbolo

Propieda edad d Tint Tinta. a. An Anim imac ació ión n de un objet objeto o que que apar aparec ece e y lueg luego o Ejempl Ejemplo o 3: Propi desaparece.


Manual Macromedia Flash Foto Fotogr gram amas as util utiliz izad ados os 1 y 25 25.. Ejem Ejempl plo o que que lo puede puede visu visual aliz izar ar en la carp carpet eta a Ejemplos con el nombre tinta.fla.

Pasos: 1. Insert Insertar ar un símb símbolo olo en el fotog fotogram rama a 1. 2. Insertar Insertar un un fotogram fotograma a clave clave en el fotograma fotograma 25. 3. Anticlick Anticlick entre entre los dos fotogramas fotogramas,, elegir Crear Crear Interpolación Interpolación de Movimient Movimiento. o. clic en el foto fotogr gram ama a 25 25,, clic clic en el símb símbol olo, o, abri abrirr Pane Panell Prop Propie ieda dades des,, 4. clic seleccionar Tinta, elija el color y el porcentaje de tinta. 5. Repro Reprodu duci cirr la pelíc películ ula. a.



Seleccionar símbolo Seleccionar fotograma 1

Seleccionar Propiedad Tinta, su color.

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 Establecer los los puntos puntos de la animac animación: ión: punto punto inicial inicial y punto punto final. final.

2. Elegir los fotogramas inicio (fotograma 1) y fin (fotograma 20). 3. Insertar un símbolo en el fotograma 1. 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. Inserta rtarr una una cap capa a Guí Guía a (cl (clic ic en el icon icono o de de cap capa a guí guía a de de Lín Línea ea de Tiem Tiempo po 6. Inse

)

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

Ejemplo: Animación por Guía de Movimiento. Ejemplo que lo puedes encontrar en la carpeta Ejemplos con el nombre de guiamovimiento.fla



Uso del Panel Transformar En 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: 1. Insertar un símbolo en el fotograma 1. 2. Insert Insertar ar un fotogra fotograma ma clave: clave: fotog fotogram rama a 25.


Manual Macromedia Flash 3. Presionar Presionar clic clic derecho derecho entre los fotogram fotogramas as 1 y 25, elegir elegir Crear Interpolac Interpolación ión de movimiento. 4. Selecc Seleccion ionar ar el el foto fotogra grama ma 25. 5. Abrir el el panel transforma transformar, r, ingresar ingresar porcent porcentaje aje de reducc reducción. ión. 6. Reprodu Reproduci cirr la pelícu película: la: CTRL CTRL + ENTER ENTER..


Panel transformar: 50 % reducción

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: 1. Insertar un símbolo en el fotograma 1. 2. Insert Insertar ar un fotogra fotograma ma clave: clave: fotog fotogram rama a 25. 3. Presionar Presionar clic clic derecho derecho entre los fotogram fotogramas as 1 y 25, elegir elegir Crear Interpolac Interpolación ión de movimiento. 4. Se Sele lecc ccio iona narr el foto fotogra grama ma 1; abri abrirr el pane panell trans transfo form rmac ació ión n e ingre ingresa sarr un ángulo de sesgado horizontal 30 grados. Seleccionar fotograma 1

Panel transformar sesgado horizontal 30



5. Selecc Seleccion ionar ar el fotogra fotograma ma 25; abrir el panel panel transfor transformac mación ión e ingres ingresar ar un ángulo de sesgado vertical 150 grados.


Panel Transformar sesgado vertical de 150

6. Reprodu Reproduci cirr la pelícu película: la: CTRL CTRL + ENTER ENTER..



Animaciones Animaciones de Interpolación 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 Establecer los los puntos puntos de la animac animación: ión: punto punto inicial inicial y punto punto final. final. 2. Elegir Elegir los los fotog fotogram ramas as inic inicio io y fin. fin. 3. Insertar Insertar un objeto objeto vectorial vectorial no no SIMBOLO SIMBOLO en el fotogram fotograma a inicio. inicio. 4. Insertar Insertar un fotogram fotograma a clave clave (F6), (F6), borrar el objeto y dibuja dibujarr otro objeto objeto vectorial. 5. Selecciona Seleccionarr uno de los fotograma fotogramas s entre el fotogram fotograma a inicio inicio y el fotograma fotograma final. final. 6. En el Panel Panel Propied Propiedades, ades, en la propieda propiedad d Animar: Animar: elegir elegir Forma. 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. Insert Insertar ar un rectán rectángul gulo o n el fotogra fotograma ma 1.


Manual Macromedia Flash Insert rtar ar un foto fotogr gram ama a clav clave e en el 10 10,, inse insert rtar ar la letr letra a 2. Inse

A (sepa (separa rarr el

carácter). 3. Clic Clic derech derecho o entre entre los fotogram fotogramas, as, abrir abrir Panel Panel Propieda Propiedades des,, y en Animar, Animar, escoger Forma. 4. Se Sele lecc ccio iona narr foto fotogra grama ma 1, ir a Modi Modifi fica carr Form Forma, a, Añ Añad adir ir Form Forma, a, mover mover los consejos de forma al lugar que crea conveniente.

Consejos de forma iniciales

5. Selecc Seleccion ionar ar fotogram fotograma a 10, mover mover los consejo consejos s de forma forma al lugar que crea conveniente.

Seleccionar último fotograma

Consejos de forma modificados Ing. Melvy Terán Santa Cruz


Máscaras Para Para obten obtener er el efec efecto to de foco foco y de tran transi sici cion ones es,, puede puede util utiliz izar ar un una a capa 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 Este ejem ejempl plo o lo podr podráá obse observ rvar ar en la carp carpet etaa Ejem Ejempl plos os con con el nomb nombre re de mascaras.fla 1. Crear una una animación animación cualqu cualquiera iera sea de interpolac interpolación ión de movimien movimiento to 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 Arrastrar la nueva nueva capa capa debajo debajo de la capa capa que tiene tiene la animac animación. ión. 4. Clic derecho derecho sobre sobre la capa capa que tiene tiene la anima animación, ción, elegir elegir Máscara. Máscara.

Ejemplo:

Capa máscara objeto rectángulo

Capa enmascarada objeto texto de tipo estático



Funciones de Pantalla Fscommand: 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. Si se especifica true, Flash Player se establece en el

fullscreen

true o false

modo de pantalla completa. Si se especifica false, el reproductor vuelve a la vista de menú normal. Si se especifica false, el reproductor se establece de forma que el archivo SWF se dibuje siempre con su

allowscale

true o false

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. Si se especifica true, se activa el conjunto completo de

showmenu

true o false

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. escena1 1 hay unos unos efecto efectos s que deseam deseamos os observ observar ar en pantal pantalla la Ejemplo: En la escena 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

Botones Los botones en flash nos sirven para enlazar escenas, enlazar páginas web, e tc. Los símbolos de tipo botón los pueden crear o simplemente instanciarlos de la biblioteca de botones de flash.


Manual Macromedia 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.

Carpetas contenedoras de botones.

Para crear botones realice lo siguiente: 1. Insert Inserte e el objeto objeto que que actuar actuará á como como botón. botón. 2. Seleccione Seleccione el objeto objeto con la la herramienta herramienta selecci selección, ón, y presione presione F8; elija elija comportamiento botón y asígnele un nombre. 3. Ingres Ingrese e al área del del botón presio presionan nando do 2 veces veces clic sobre sobre él, termin termine e de editar los estados del botón (F6). 4. Regrese Regrese a la la Escena Escena en la cual esta trabajando. trabajando.

Enlazar escenas en una aplicación flash


Manual Macromedia Flash Para Para enlaza enlazarr dos o más escenas escenas de una aplicac aplicación ión Flash Flash,, se utiliz utiliza a la funció función 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();

Fotograma clave vacío

Acción sto

Este ejerc ejercic icio io se encu encuen entr tra a en la carp carpeta eta Ejem Ejempl plos os con con el nomb nombre re Ejemplo: Este

Escenas.fla. Se tienen 2 escenas: escenas: las animaciones animaciones de cada una terminan terminan en el fotograma 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(){ gotoAndPlay(“Escena 1”,1);


Manual Macromedia Flash // Permite retroceder a la escena anterior en este caso la Escena 1. }

Enla Enlaza zarr pági página nas s web web por por medi medio o de boto botone nes s Flash Si 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 crear pelícu películas las altame altamente nte intera interacti ctivas vas y aplic aplicaci acione ones s Web. Web. En otras otras palabra palabras, s, ActionScript es el lenguaje de programación utilizado por Flash.

Comencemos a hacer el enlace. Ejemplo

que

se

encuentra

en

la

carpeta eta

Ejem emp plos

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 flash Por medio de botones hechos en Flash, podemos ejecutar nuestros programas de envío de correos electrónicos e lectrónicos (Outlook por ejemplo), para enviar mensajes. (Tus


Manual Macromedia Flash 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 simple simplemen mente te Clip, Clip, es una película película en si misma, 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 conti continua nuació ción), n), esta línea línea tempora temporall no está está ligada ligada a la línea línea de tiempo tiempos s 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 como cualquier cualquier objeto creado con Flash, 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 foto fotogr gram amas as,, debi debido do a que que en la vist vista a gene genera rall del docu docume ment nto, o, noso nosotr tros os sólo sólo veremos un fotograma por clip, el cual puede estar compuesto por muchos frames,


Manual Macromedia Flash lo que que nos nos perm permit itir irá á tene tenerr un una a me mejo jorr visi visión ón de cómo cómo se desa desarro rroll lla a nu nues estr tra a animación, y una barra de tiempos más clara y "limpia". Los Los Clip Clips s son son un una a de las las herra herrami mien enta tas s que que dan dan mayo mayorr pote potenc ncia ia a Flas Flash h 8, permiti permitiéndo éndonos nos crear crear pelícu películas las de gran gran compl complejid ejidad ad y multip multiplic licar ar los efecto efectos s 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í permitía a dicho dicho símbol símbolo. o. Por esto, esto, normal normalmen mente te se utiliz utilizan an los clips clips para 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. Ejercic icio io que que se encue encuent ntra ra en la carp carpet eta a Ejem Ejempl plos os con con el nomb nombre re Ejemplo: Ejerc

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. Ejercic icio io que que se encu encuen entr tra a en la carp carpet eta a Ejem Ejempl plos os con con el nomb nombre re Ejemplo: Ejerc

altura.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._height=dibujo._height-10; dibujo._width=dibujo._width-10;


Manual Macromedia Flash }

_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. Ejercic icio io que que se encu encuen entr tra a en la carp carpet eta a Ejem Ejempl plos os con con el nomb nombre re Ejemplo: Ejerc

rotacion.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._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. Ejercic icio io que que se encu encuen entr tra a en la carp carpet eta a Ejem Ejempl plos os con con el nomb nombre re Ejemplo: Ejerc

posiciones.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._x=dibujo._x+5; dibujo._y=dibujo._y+10; }

Sonidos Reproducir 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:


Manual Macromedia Flash 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 debe mos 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

Video Tendrá que importar el vídeo a la biblioteca de flash. 5. Archiv Archivo, o, importa importar, r, importa importarr a biblio bibliotec teca. a. 6. Seleccione Seleccione el video, video, clic clic en importar, importar, mostrará mostrará la siguien siguiente te pantalla. pantalla.


Manual Macromedia Flash 7. clic en siguient siguiente e hasta hasta que muestre muestre la la siguient siguiente e ventana: ventana:

8. Elija el aspecto aspecto de su video, video, desplieg despliegue ue el cuadro cuadro de lista lista Aspecto. Aspecto. 9. Final inaliz izar ar.. 10. Si pide guardar el archivo, asigne un nombre a la aplicación fla. 11. Espere unos minutos a que termine de importar. importar. 12. CTRL + Enter: reproduzca la película. Este ejemplo se encuentra en la carpeta Ejemplos con el nombre: video.fla


Manual Flash8

Recommend Documents