PDF de programación - Adobe Flash - Nivel 1

Adobe Flash es un programa de edición y animación de gráficos vectoriales que trabaja
por medio de la manipulación de fotogramas en la línea del tiempo, enfocado en la
productividad, rápido manejo y resultados altamente impactantes.

Fue creado originalmente a mediados de los 90 por FutureWave Software y se llamaba
originalmente FutureSplashAnimator, en 1996 Macromedia adquiere a dicha empresa y el
programa pasa a llamarse Flash 1.0 y en el año 2005 Adobe compra a la empresa
Macromedia, pasando a llamarse Adobe Flash.

Sus aplicaciones van desde animaciones publicitarias, reproducción de video (como
youtube), páginas web, presentaciones corporativas y muchas aplicaciones más para web
usadas a nivel mundial.

Su extensión es .fla y su archivo compilado es extensión .swf (shock wave flash), el
proceso consiste en editar con flash y compilar en swf, que reduce el tamaño del archivo
drásticamente, y es este último con el que se interactúa.

Las aplicaciones se programan bajo un lenguaje llamado ActionScript (actualmente en su
versión 3) que forma parte de la familia de lenguajes de programación orientada a
objetos, que consiste, muy básicamente, en la interacción del usuario con objetos.

En este curso de Adobe Flash Nivel 1 veremos:

1. Entorno de Trabajo y herramientas básicas
2. Línea de tiempo
3. Animación de Movimiento – Ejercicio
4. Animación de Transformación – Ejercicio
5. Animación por capas – Ejercicio
6. Uso de los Filtros
7. Crear Símbolos
8. Diseño de la Presentación
9. Desarrollo de la Presentación en 4 secciones
10. Vincular los botones por medio Action Script.
11. Propiedades de Texto dinámico – Ejercicio
12. Galería con símbolo gráfico
13. Propiedades de Texto Input type – Ejercicio
14. Vinculo de un texto a una dirección de e-mail y sitio web
15. Inserción de Sonido
16. Control de Sonido por medio de Action Script
17. Inserción de Video
18. Precarga
19. Exportación

a) Entorno de Trabajo y herramientas básicas

Esta es estado inicial del entorno de trabajo al abrir el programa:

Donde tenemos, principalmente, acceso directo a:

a) Crear con plantilla (para iniciar con plantillas previamente diseñadas)
b) Abrir un elemento reciente (acceso a los últimos cuatro trabajos realizados)
c) Crear nuevo (AS2, AS3, y otras opciones)
d) Aprendizaje (acceso a lecciones en el sitio de Adobe)

Hacemos clic en la pestaña AS2, aparece un panel como este:

a) Menú superior

b) Línea del tiempo

e) Conjunto de paneles

c) Barra de herramientas

d) Escenario

Donde tenemos:

a) Menú superior (acceso a las principales funciones del programa)
b) Barra de herramientas (para crear objetos, editarlos, crear texto, etc.)
c) Línea del tiempo (panel de interpretación de los eventos ocurridos)
d) Escenario (área de trabajo de las animaciones)
e) Conjunto de paneles (conjunto de paneles para edición de las distintas funciones)

Barra de herramientas

a) Selección (selecciona, edita y mueve objetos)
b) Subselección (selecciona, edita y mueve nodos)
c) Trasformación libre (modifica dimensiones)
d) Rotación 3D (movimientos en 3d)
e) Lazo (selección de objetos dispersos)
f) Pluma (creación de figuras complejas)
g) Texto (inserción de texto)
h) Línea (crea líneas simples)
i)
j)
k) Pincel (trazado tipo pincel a mano alzada)
l) Deco (disemina figuras y animaciones automáticas)
m) Hueso (confiere rol de coyunturas)
n) Cubo de pintura (rellena espacios con color)

Figuras geométricas (crea figuras geométricas)
Lápiz (trazado simple a mano alzada)

o) Cuenta gotas (selecciona modelos de color)
p) Borrador (borra secciones de los objetos)
q) Mano (permite navegar sobre el escenario)
r) Zoom (acerca o aleja del escenario)
s) Color de trazo (color de trazo o borde en uso)
t) Color de relleno (color de relleno en uso)
u) Blanco y negro / Intercambiar colores
v) Ajustar a objetos (facilita el movimiento en el escenario)

Cuando el ícono de la herramienta tiene un triangulo en la esquina inferior derecha, es
porque contiene más herramientas ocultas en la misma casilla; para acceder a ellas deja
presionado dicho ícono y las herramientas ocultas de desplegarán.

Creación de objetos en el escenario

Con la herramienta de selección (a), seleccionaen las figuras geométricas (i), el rectángulo,
al seleccionarlo nos aparece el botón de dibujo de objeto en la parte inferior de la barra
de herramientas:

Antes de dibujar, activa dicho botón, basta con activarlo una sola vez y siempre estará
activado hasta que lo desactives nuevamente. Con el “dibujo de objeto” activado, las
figuras y trazados que dibujemos, quedarán unidos el relleno y el contorno, facilitando
enormemente el moverlos o cambiarles el tamaño.

Una vez activado este botón, ahora sí, arrastraen el escenario para dibujar un rectángulo.
Una vez dibujado, y previamente seleccionado con la herramienta de selección, en la
barra de herramientas, podes cambiar el color de trazo (s) y de relleno (t).

Panel de color

El primero que se abre es el de la izquierda. Puedes seleccionar cualquier color. Si deseas
más variedad, clic en el ícono arriba a la derecha y se abre un panel con más colores. Si
deseas un matiz del color más claro o más oscuro, arrastra arriba o abajo en la barra que
está a la derecha del otro panel de colores, y luego clic en aceptar.

Modificar tamaño y posición de los objetos

Para modificar la posición de un objeto que se encuentra en el escenario primero debes
seleccionar la herramienta de selección, la flecha negra (a), a continuación haz clic encima
del objeto y luego lo arrastras. Para modificar el tamaño de un objeto, hacemos clic en la
herramienta de trasformación libre (c), posamos el cursor en una de las esquinas y cuando
la apariencia del cursor cambie a una flecha inclinada, arrastra para adentro o para afuera
según sea tu necesidad. También puedes modificar las dimensiones del objeto desde los
costados del mismo. Al alejar el curso adquiere una apariencia como de círculo, significa
que está listo para ser rotado. El círculo blanco del medio indica el eje de rotación, éste,
también puede moverse. Si deseas deshacer los cambios, como en todos los programas,
presiona la tecla control y la tecla Z tantas veces sea necesaria.

b) La línea del tiempo

En el panel de la línea del tiempo es un medio por el cual se expresa gráficamente lo que
está sucediendo a través del tiempo de la animación. El entendimiento de esta, es esencial
para el correcto manejo de flash. Este panel, se encuentra ubicado en la parte superior del
programa por defecto aunque puede modificarse su disposición a voluntad.

A la izquierda están las capas, que nos permite organizar la superposición de los objetos. A
la derecha están los fotogramas que nos indican en qué momento del tiempo de la
animación estamos, lo correcto al hacer referencia a los fotogramas es pensar en cuando y
no en donde pues se está hablando de tiempo.

Cada una de estas pequeñas casillas se llama fotogramas, que vendría siendo como las
diapositivas de una cinta de una película en el cine. Cuando dispones ya de varios
fotogramas puedes navegar por así decirlo en el tiempo y así poder ubicar en qué
momento del tiempo de la animación hacer alguna edición.

También es importante saber interpretar el aspecto de la línea del tiempo. Se te puede
presentar con colores o figuras distintas en los fotogramas, veamos algunos de estos
aspectos:

Con el método de animación clásica:

a) Cuando aparece un círculo vacío en un fotograma significa que este es un
fotograma clave vacío, lo que significa que en el tiempo en ese instante va a ocurrir
algún cambio en la animación pero en el escenario todavía no hay nada dibujado.
Cuando es un círculo negro es un fotograma clave y en el escenario hay algo
dibujado.

c) Cuando es un rectángulo significa que hasta ese momento aparecerán en el

b)

escenario los elementos que estén en esa capa.

d) Cuando el color es blanco, significa que no hay nada en el escenario durante ese

e) Cuando es gris, significa que hay un objeto en esa capa en el escenario en ese

período de tiempo

momento pero está detenido.

movimiento en el escenario.

de forma.

f) Cuando es morado con una flecha continua significa que hay una animación de

g) Cuando el color es verde con una flecha continua significa que hay una animación

h) Cuando hay color morado o verde pero la líneaesdiscontinua significa que hay una

animación de movimiento o de forma pero hay un error en animación.

Con el método de animación nuevo (este nuevo proceso requiere obligatoriamente un
símbolo en el escenario y una vez hecha la animación no se pueden insertar otro tipo de
fotogramas en la línea del tiempo):

a) El círculo negro representa el momento donde aparece el objeto y el cuadrado

inclinado los momentos cuando ocurren cambios.

b) El color azul claro significa que hay una animación de movimiento con el sistema

actual.

Capas

Línea de tiempo con animación clásica y nueva.

Fot. Clave

Fot. Clave

Animación de movimiento nueva

Fot. Clave

Error

Fot. Clave vacio

Animación de movimiento clásica

Animación de forma

Vale destacar que se pueden utilizar ambas técnicas en una misma animación pero en
capas distintas, es cuestión de elección personal que técnica hemos de usar pero es
recomendable utilizar una sola para tener un flujo de trabajo más rápido y minimizar la
posibilidad de errores.

A fin de acelerar el proceso de animación es importante familiarizarse con los accesos
directos, entre los cuales tienes:

Insertar fotograma clave: tecla F6
Insertar fotograma clave vacío: tecla F7

a) Agregar tiempo a la línea del tiempo: tecla F5
b)
c)
d) Convertir en símbolo: tecla F8
e) Abrir el panel de acciones: tecla F9

Conforme vas avanzando en el curso, se irán usando las herramientas y más accesos
directos.

c) Animación de movimiento

Vamos a realizar una