MOMENTO III.

Submódulo II. Diseño digital

Conocimientos:
Animaciones multimedia:

• Entorno
• Conceptos básicos
• Aplicar animación a un objeto
• Botones de manipulación
• Aplicar sonido y video

Lectura 1. Animaciones multimedia

Conociendo Macromedia Flash 8

Macromedia Flash nos sirve para crear animaciones y objetos interactivos, este programa
es muy utilizado ya que el tamaño de sus archivos es pequeño.

Este Software no solo es un programa para crear gráficos, sino un lenguaje de

programación utilizado normalmente para crear presentaciones, anuncios, gráficos y
páginas web. Las animaciones creadas en flash les puedes incluir efectos atractivos e
interactividad con los usuarios para realizar algunas acciones.

En Macromedia flash se trabajan prácticamente 3 aspectos principales que son:

✓ Dibujar y diseñar los objetos que se necesitan en la película.

✓ La animación de los objetos que lo requieren.
✓ Aplicar interactividad a los objetos que consideres que lo necesitan.

En Macromedia flash puedes manejar dos tipos de archivo: los de extensión .fla y los .swf.

A continuación, se te presenta la pantalla principal de Macromedia flash, donde se

describen los elementos principales.
 Elementos de la ventana de Macromedia Flash

5
4
3

6
2

Descripción de cada una de las partes de la ventana de Macromedia Flash.

1.La barra del menú muestra menús con comandos principales del programa, cada uno de
ellos despliega una lista de opciones con funciones de Flash.

2.La barra de herramientas contiene botones que te permiten crear las figuras las cuales
servirán para formar la película, así como también las opciones de cada herramienta.

3. Las capas te permiten modificar el contenido de una capa sin afectar el contenido de
otras capas. De acuerdo con (Gonzales, 2005, pág. 84) Una capa “se trata de varios dibujos
superpuestos que forman una imagen completa.

4.La Línea de tiempo Permite organizar y controlar el contenido de un documento mediante

capas y fotogramas a través del tiempo, es decir es donde se le indica a Flash en que
momento desea que se muestren los gráficos y otros elementos del proyecto

“La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado.
Consta de 2 partes.
1) Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando
rectángulos)

2) Los Números de Fotograma que permiten saber qué número tiene asignado cada
fotograma, cuánto dura o cuándo aparecerá en la película.” (Aula clic, s.f.)

5.Los Fotogramas son cada imagen que se agrega a la línea del tiempo con las cuales
formas la animación.

6.El Escenario Es el área rectangular donde se muestran los gráficos, videos, botones y
objetos durante la reproducción.

7.Los Paneles Estos contienen utilidades que permiten modificar la película o su contenido
y cada panel se encuentra especializado en un tema.

Actividad de aprendizaje 1. Elaborar un reporte de lectura en Microsoft Word o en tu

libreta sobre la Lectura 1. Conociendo Macromedia Flash donde agregues los conceptos
principales tratados en esta lectura.

Herramientas básicas de Macromedia Flash

Herramienta Nombre Descripción

Te permite seleccionar objetos en la imagen solo con dar
Selección
clic encima del mismo. Entre los objetos de puede
mencionar rectángulos, círculos, líneas, etc.
Permite dibujar líneas rectas. Una vez que se ha activado el
Línea
botón, se accede al escenario y se hace clic ahí.
Manteniendo pulsado el botón del ratón, arrastre, y suelte.
Se utiliza para incorporar mensajes de texto a la película. Una
Texto
vez activado el botón, acceda al escenario y haga clic en
la zona que deberá comenzar el escrito.

Permite trazar círculos y elipses. Una vez activado el botón,

Ovalo
acceda al escenario y haga clic ahí. Manteniendo pulsado
el botón del ratón, arrastre, y suelte cuando el círculo o elipse
tenga la forma deseada
 Este botón permite dibujar todo tipo de recuadros:
cuadrados y rectángulos. Una vez pulsado el botón, haga
Rectángulo clic sobre el escenario y, sin soltar el botón del ratón, arrastre
hasta completar el recuadro que desee; entonces, libere el
botón del ratón y el cuadro queda listo. El cuadrado si lo
deseas puede quedar con las esquinas redondas.
Permite dibujar como lo haríamos con un lápiz en un papel.
Este sistema de dibujo consiste en hacer clic en el escenario
Lápiz y, sin soltar el botón, arrastrar por donde deseemos, ya que
el ratón ira dejando una estela como lo haría un lápiz al
deslizar su punta por el papel. Automáticamente se activa la
sección opciones que nos permite: Enderezar, suavizar, tinta.
Es una herramienta similar a un pincel, pero permite pintar
más grueso a modo de brocha. Para usar esta herramienta
se selecciona la herramienta, se hace clic en el escenario y
sin soltar el botón derecho del ratón se arrastra.
Pincel Automáticamente se activa la sección opciones que nos
permite: Pintar normal, relleno de pintura, pintar detrás y
pintar selección.
Se emplea para aplicar un relleno de color a las figuras ya
dibujadas (o las que vallamos a dibujar posteriormente).
Cubo de
pintura Bastara con hacer clic sobre una figura para que su interior
adquiera el aspecto que apliquemos con el cubo.
Como se puede suponer, el borrador permite borrar zona de
dibujo. Para ello, hacemos clic en una zona del escenario y,
sin soltar el botón del ratón, arrastramos en la dirección
deseada. Por donde pasemos el dibujo ira borrándose.
Cuando activamos esta herramienta, la selección Opciones
Borrador
ofrece vario botones con los que podremos elegir varias
formas. Automáticamente se activa la sección opciones
que nos permite:
Borrar normal, rellenos, líneas, bordes, rellenos seleccionados
y borrar dentro.
Actividad de aprendizaje 2. Crear los siguientes dibujos utilizando las diferentes
herramientas de Macromedia Flash tales como ovalo, rectángulo y cubo de
pintura.

Ovalo
Cubo de Pintura Ovalo y Rectángulo

Ovalo
Pincel Borrador
Texto

Aplicar animación al objeto

En Macromedia flash puedes crear tantas animaciones como tu imaginación te lo permita

combinando las diferentes herramientas como son el lápiz, el pincel, formas y texto, entre
otras herramientas con las que cuenta Macromedia Flash con capas, los símbolos, los
efectos y las transiciones.

Interpolación de movimiento

“Es la acción básica de las animaciones en Flash. Permite desplazar un símbolo Flash de un
lugar a otro del escenario, siendo necesarios únicamente dos fotogramas, lo que optimiza
mucho el rendimiento de la película. Es importante destacar que para que una
Interpolación de movimiento se ejecute correctamente aquellos objetos que intervengan
deberán haber sido previamente convertidos a símbolo.” (Aula clic, s.f.)

Una animación con interpolación de movimiento se establece mediante la definición de

las posiciones del inicio y el fin de un objeto que se desee animar para que Macromedia
Flash 8 calcule todas las posiciones de interpolación de este objeto. De esta manera, puede
crear animaciones de movimiento lentas o rápidas con sólo establecer las posiciones de
inicio y fin del objeto que se está animando.

De acuerdo con (Gonzales, 2005, pág. 121)”Para crear una animación con interpolación
de movimiento sencilla debemos disponer de un símbolo con el que crearemos una
interpolación de movimiento en un fotograma clave, una instancia(copia) de este símbolo
deberá estar colocada en una capa exclusivamente para él, si añade otras instancias o
figuras a la capa también se moverán.”

Interpolación de forma
Con la interpolación de forma se pueden cambiar la forma de un objeto, esta consiste en
tener un objeto inicial y que este objeto, conforme pasan los fotogramas cambia su forma
a un objeto final diferente, por ejemplo, el objeto inicial puede ser un círculo y lo podemos
convertir en un pentágono y este pentágono convertirlo en un corazón, como se realizará
en la actividad de aprendizaje siguiente.

Actividad de aprendizaje 3. Realizar una animación con interpolación de

movimiento en la cual una elipse cambia de tamaño y se mueve a otro lugar
puedes utilizar los siguientes pasos para realizar la actividad.

1. En el FT 1, crear un fotograma clave, dibujar una elipse.

2. En el FT 20 crear un fotograma clave, mover la elipse y hacerla mas grande
3. Clic derecho en la línea del tiempo sobre los fotogramas/Crear
interpolación de movimiento

1 2
3
Actividad de aprendizaje 4. Crear una animación con interpolación de forma.
1. Abrir un archivo nuevo
2. Clic en el FT 1/Clic derecho en el FT 1/insertar fotograma clave
3. Dibujar en el escenario una elipse
4. Clic derecho en el FT 10/Insertar/fotograma clave
5. Dibujar en el escenario un hexágono
6. Clic derecho en el FT 20/Insertar fotograma clave
7. Dibujar con el pincel un corazón
8. Dar clic en el FT 10, y en los parámetros elegir FORMA en animar
9. Dar clic en el FT 20, y en los parámetros elegir FORMA en animar

Los dibujos en los

fotogramas 1,10 y 20

Ft 10
Ft1
Ft 20

Interpolación de forma

A continuación, se muestran imágenes de cómo va cambiando la forma de las

figuras según en el fotograma que se encuentran
Símbolos y bibliotecas.
“Un símbolo es un objeto grafico al que le tiene que dar un nombre para poder ser utilizado
posteriormente en la misma película o en otra. Los símbolos se utilizan como objetos gráficos
fijos, como animaciones en la película y como botones que forman la parte interactiva de
la misma.” (Gonzales, 2005, pág. 121)

Los símbolos que se crean a partir de un objeto dibujado son muy útiles ya que pueden ser
utilizados varias veces en una misma película e incluso en otras películas.

Para crear un símbolo partiendo de un objeto que ya existe, basta con hacer lo siguiente:

1. Activar la herramienta selección

y haz clic sobre el objeto.

2. Ir al menú Modificar→ Convertir en símbolo o presionar F8.

Nombre: Escribir el nombre que tendrá el símbolo.

Tipo o comportamiento:

a. Clip de película: una animación dentro de la película.

b. Botón: Interactividad de la película.
c. Gráfico: una imagen más o menos fija.
d. Registro: Indica la posición donde se registra el símbolo.

3.Pulsar el botón Aceptar.

Biblioteca de símbolos

La biblioteca de símbolo te permite administrar y almacenar los símbolos que se van

creando en cada película. La biblioteca nos ofrece la posibilidad de crear nuevos símbolos,
cambiar el nombre de los que ya formen parte de la película y borrarlos.

Para mostrar la biblioteca en el marco de paneles se debe elegir el menú Ventana →

Biblioteca o la tecla F11.

1
1) Visor que nos muestra al símbolo seleccionado.
2) Nuevo símbolo.
3) Nueva carpeta.
4) Propiedades.
5) Eliminar.

2 3 4 5

Instancia: “Una instancia representa la existencia de un símbolo en el escenario.” (Adobe

Animate Guía de Usuario, 2020). La instancia puede ser diferente a su símbolo en cuanto a
su color, función y tamaño. Cuando se edita el símbolo, sus instancias se actualizan, cabe
mencionar que, al aplicar efectos a una instancia de un símbolo, estos sólo se aplicas a la
instancia en cuestión.

Nota: Si se va a definir un símbolo que aún no ha dibujado puede ir directamente al menú

insertar y elegir nuevo símbolo.

Los símbolos también se pueden eliminar, pero una vez eliminados ya no se pueden
recuperar, por esta razón Macromedia Flash te envía un cuadro de dialogo cuando deseas
eliminar un símbolo donde te pide conformación para eliminarlo.

Animaciones Interpoladas con trayecto

Existe la posibilidad de conseguir que una instancia recorra un trayecto que puede ser en
línea recta o curva la cual se anima mediante una interpolación de movimiento, esto se
realiza mediante una guía de movimiento.

Se le llama guía de movimiento a la trayectoria que se marca para que los símbolos de la
capan la sigan mientras se lleva a cabo el movimiento.

Actividad de aprendizaje 5. Realiza la siguiente actividad donde debes de crear

un símbolo y aplicar interpolación de movimiento, a continuación se te muestran
los pasos a seguir.

1. Abrir Macromedia Macromedia Flash

2. Posicionarme en el fotograma1 y dibujar un tren

3. Insertar/Nuevo símbolo/Clip de película/Aceptar

 4. Posicionarme en el fotograma 15/Clic derecho/Insertar fotograma clave
5. Mover el tren al fotograma clave
6. Crear interpolación de movimiento

Capas
Las capas en flash son similares a las capas en Photoshop, funcionan de la misma manera
como si tuvieras apiladas varias hojas de acetato, es decir, varios dibujos superpuestos que
forman una imagen completa. Es decir ”Se trata de varios dibujos superpuestos que forman
una imagen completa. La ventaja que ofrecen es que se puede modificar el dibujo
contenido en una capa sin afectar a las demás.” (Gonzales, 2005, pág. 84).

Tipos de capas: Normal, guía y mascara.

“Normal, es el tipo de capa estándar en la que podremos incorporar objetos y animarlos.

Guía. Es un tipo de capa especial en la que podemos añadir, además de objetos y

animaciones cuadriculas con las que alinear mejor esos objetos.

Máscara. Es una capa opaca en la que podemos generar huecos para ver los objetos
situados en las capas inferiores. Los huecos se trazan mediante figuras rellenas, esas zonas
rellenas serán transparentes mientras el resto serán zonas opacas” (Gonzales, 2005, pág. 89)

Para crear una capa es necesario:

1. Seleccionar el menú Insertar→Línea del tiempo→Capa

Las capas cuentan con las siguientes propiedades:

Nombre: Nombre de la capa.

Mostrar o bloquear: Mostrar u ocultar capa.

Tipos: Normal, Guía, con guía, Máscara, con Máscara, carpeta.

Color de contorno: Define el color del contorno.

Altura de la capa: Establece lo alto de la capa.

Las cuales las puedes configurar en la ventana de propiedades de las siguientes maneras:

1.Clic derecho sobre la capa/Propiedades

2.Ir al menú modificar/Línea de tiempo/Propiedades de la capa

La línea de tiempo te permite organizar y controlar el contenido de un documento a través

del tiempo por medio de capas y fotogramas. Cada una de las capas contiene una
imagen diferente y estas se muestran en el escenario. La línea de tiempo está formada por
los siguientes componentes: capas, fotogramas y la cabeza lectora.

Fotograma clave
Fotograma clave vacío Cabeza lectora Encabezado de línea del tiempo
 Animación por fotogramas
Centrar fotograma

Insertar capa
Carpeta de capas Tiempo transcurrido
Insertar guía de movimiento Velocidad de fotograma
Insertar capa Fotograma actual
Un fotograma clave es aquel que define un cambio en las propiedades de un objeto de
una animación o se incluye código ActionScript para controlar determinado aspecto del
documento. (Adobe Animate Guía de Usuario, 2020).

Los fotogramas clave tienen contenido específico, son creados especialmente para insertar
un nuevo contenido en ellos. En un fotograma se pueden cambiar las características de un
objeto o de un símbolo con el fin de variar su actuación durante la película, además de
cambiar las características del objeto o del símbolo podemos eliminar o añadir objetos o
símbolos.

Existen dos formas de crear un fotograma clave

1. Hacer clic en el fotograma, posteriormente seleccionar el menú insertar → Línea del

tiempo → Fotograma clave.

2. Hacer clic derecho sobre el fotograma y seleccionar Fotograma clave.

Actividad de aprendizaje 6. Elaborar una animación con guía de movimiento

1. Abrir un archivo nuevo Macromedia Flash
2. Insertar 4 capas (Capa1 paisaje (Dibujar un paisaje), capa2 cielo (Dibujar un cielo),
capa 3 flores (Dibujar las flores), capa 4 mariposa (Dibujar mariposa), cada objeto
dibujarlo en el FT1 de su capa).
3. En el FT 30 de cada capa (césped, cielo y flores) insertar un fotograma.
4. En el FT 1 de la capa mariposa, seleccionar la mariposa y convertirla en símbolo
(clip de película).
5. Posicionarse en FT 30 de esta capa que deseamos a donde llegue la animación e
insertar un fotograma clave. 4.
6. Posicionarse en un fotograma intermedio, dar clic derecho y seleccionar
interpolación de movimiento.
7. Seleccionar la capa mariposa y posteriormente hacer clic en guía de movimiento

8. Inmediatamente después seleccionar la herramienta lápiz y trazar la línea por

donde se desea que el objeto se mueva, la línea no se debe cruzar.
9. Posicionarse en la capa1 y posicionarse en el fotograma 1.
10. Mover el objeto hasta que el centro de él (un circulito blanco) se encuentre sobre
la línea trazada.
11. Posicionarse sobre el último fotograma de la capa1 y mover el objeto hasta que el
centro de él coincida con el final de la línea.
12. Probemos cómo quedó. Ctrl + Enter
13. Insertar una guía de movimiento.
14. La práctica lucirá como muestra a continuación.