Documentos de Académico
Documentos de Profesional
Documentos de Cultura
¿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:
Entorno de Trabajo
Linea de Tiempo
Caja
Herramientas
Escena: Escena es nuestra área trabajo, es donde se insertan los objetos que
se necesitan para realizar una animación.
Caja de Herramientas:
Descripción de cada herramienta de Izquierda a Derecha:
Herramienta Línea
Herramienta lápiz
1. Seleccione la herramienta lápiz.
Radio de
rectángulo
redondeado
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.
4. Vuelva a hacer clic para indicar donde desea que termine el primer segmento de
a línea recta.
anclajes y modifique.
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.
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
Icono 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.
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).
Herramienta
Texto
Gráfico 1
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
5. Seleccione los atributos de texto como tipo de fuente, color, etc. En el panel
propiedades.
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.
Operaciones de Transformación
de Objetos
Reflejar objetos
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.
Ejemplo:
Distorsionar Objetos:
1. Seleccionar objeto a escalar y girar.
2. Ir a la opción Modificar, Transformar, elegir distorsionar
3. Presione los tiradores que se muestran alrededor objeto y arrastre.
Ejemplo:
Envoltura en Objetos:
1. Seleccionar objeto a aplicar envoltura.
2. Ir a la opción Modificar, Transformar, elegir Sesgar y rotar
3. Presione los tiradores que se muestran alrededor objeto y arrastre.
Ejemplo:
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:
Izquierda: Objeto
original.
Derecha: Objeto con una
distancia de expansión: 10
px y dirección Hundir.
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.
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:
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.
Para cambiar el nombre de una capa o carpeta, realice una de las acciones
siguientes:
Para bloquear o desbloquear una o más capas o carpetas, utilice uno de los
siguientes procedimientos:
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.
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.
• 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.
Tipos de Fotograma
"Frame".
Tipos de Animaciones
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.
3. Presionar F8.
6. Pulse Aceptar.
3. Presionar F8.
6. Pulse Aceptar.
3. Presionar F8.
6. Pulse Aceptar.
Sobre: Estado del botón que se muestra cuando se colocan el puntero del
Mouse.
8. Regrese al área de la escena; presione dos veces clic fuera del dibujo.
Editar Símbolos
Editar Símbolo Clip de Película:
2. Salir del área de símbolo haciendo doble clic fuera del objeto.
2. Salir del área de símbolo haciendo doble clic fuera del objeto.
2. Editar cada una de las zonas del botón: reposo, sobre, presionado, zona activa.
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.
2. Apertura el Panel Propiedades; elija una de las opciones: brillo, tinta, alfa y
personalizado en la propiedad COLOR.
Ejemplo:
Ejemplo:
Uso de la biblioteca
Cuando 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.
Biblioteca
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.
Fotograma
Fotograma clave final
clave inicial
Fotograma 12
seleccionado.
Opción girar:
Horario.
Importar Imágenes
Para 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.
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.
Imagen animada
importada
Cola de imágenes
mapa de bits Ing. Melvy Terán Santa Cruz
Manual Macromedia Flash
Interpolación de Movimiento y la
propiedades de un símbolo
Anteriormente 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.
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%.
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
Seleccionar
símbolo
Seleccionar
símbolo
Seleccionar
fotograma 1
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.
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.
Seleccionar
fotograma 25
Panel transformar: 50 %
reducción
Seleccionar
fotograma 1
Seleccionar
fotograma 25
Ejemplo:
Transformación de un rectángulo a una letra A
Pasos:
1. Insertar un rectángulo n el fotograma 1.
Consejos de forma
iniciales
5. Seleccionar fotograma 10, mover los consejos de forma al lugar que crea
conveniente.
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.
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.
Ejemplo:
Funciones de Pantalla
Fscommand: Permite controlar los comandos de pantalla. Esta función puede estar
asociado a un botón o a un fotograma.
Botones
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.
Carpetas contenedoras de
botones.
Para 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();
Fotograma clave
vacío
Acción stop();
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.
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
}
_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.
Ejemplo: Ejercicio que se encuentra en la carpeta Ejemplos con el nombre
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.
Ejemplo: Ejercicio que se encuentra en la carpeta Ejemplos con el nombre
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:
Video
Tendrá 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.