Flash y su entorno

1. GUIA 1
Tema:
Flash y su entorno.
Objetivo General
Lograr que los estudiantes conozcan y se familiaricen
con el área de trabajo y las herramientas del programa
Adobe Flash.
Objetivos Específicos
- Que el estudiante conozca la interfaz del programa.
- Que el estudiante pueda utilizar la interfaz del
programa de forma intuitiva.
Contenidos
- ¿Qué es Adobe Flash?
- ¿Qué podemos hacer con flash?
- ¿Qué es el Action Script ?
- Interfaz del Programa
Materiales y Equipo
Guía 1, previamente leída.
Hoja de evaluación correspondiente a la unidad 1
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
¿Qué es Adobe Flash?
Adobe Flash CC (anteriormente llamado Macromedia
Flash) es una aplicación en forma de estudio de
animación que trabaja sobre “fotogramas”, destinado a
la producción y entrega de contenido interactivo para las
diferentes audiencias alrededor del mundo sin importar
la plataforma. Es actualmente desarrollado y distribuido
por Adobe System, y utiliza gráficos vectoriales e
imágenes raster, sonido, código de programa, flujo de
vídeo y audio. En sentido estricto, Flash es el entorno y
Flash Player es el programa de máquina virtual utilizado
para ejecutar los archivos generados con Flash.
Los archivos de Flash, que tienen generalmente la
extensión de archivo SWF, pueden aparecer en una
página web para ser vistos en un navegador, o pueden
ser reproducido por un reproductor Flash. Los archivos
de Flash aparecen muy a menudo como animaciones
en páginas Web y sitios Web multimedia, y más
recientemente Aplicaciones de Internet. Son también
ampliamente utilizados en anuncios de la web.
¿Qué podemos hacer con
flash?
Flash es un programa con una amplia gama de posi-
bilidades que permite hacer desde simples botones
interactivos y banners hasta sitios web completos (no
recomedable); películas de dibujos animados de larga
duración, desarrollar juegos de cierta complejidad o
crear contenidos para telefonía móvil.
El “diseño Flash”, con su despliegue visual, interacti-
vidad y movimiento, ha cautivado a los diseñadores
de todos los rubros, desde pequeños juegos en línea,
hasta comunidades virtuales que se comunican a
través de esta útil herramienta de diseño. En este curso
estudiaremos las principales herramientas del progra-
ma, los tipos básicos de animación y los métodos de
trabajo más usuales. Nos introduciremos, además, en
ActionScript3,
el poderoso lenguaje del programa.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
¿Qué es el Action Script ?
ActionScript es un lenguaje de programación orientado
a objetos (OOP), utilizado en especial en aplicaciones
web animadas realizadas en el entorno Adobe Flash, la
tecnología deAdobe para añadir dinamismo al panorama
web. Fue lanzado con la versión 4 de Flash, y desde
entonces hasta ahora, ha ido ampliándose poco a poco,
hasta llegar a niveles de dinamismo y versatilidad muy
altos en las últimas versiones de Flash. Actualmente se
trabaja únicamente con la versión 3 del lenguaje.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Interfaz del Programa.
La interfaz de Flash, que se muestra en la figura 1.0,
consta de la Ventana del documento, el menú, el Panel
de herramientas, el Panel de propiedades, la Línea de
tiempo y varios paneles que pueden ser organizados
por el usuario. La Ventana del documento muestra el
Escenario (Stage) que cumple dos funciones: es el
espacio para crear y editar los elementos gráficos que
componen la película y el lugar donde se visualiza
la animación completa o el fotograma que está
seleccionado. El Panel de propiedades permite editar los
atributos del elemento seleccionado, objeto, fotograma,
símbolo, etcétera. Otro componente importante de
la interfaz es la Línea de tiempo. Este panel, propio
de los programas de animación y video, representa
el desarrollo de la película en el tiempo. Es una barra
numerada horizontal que muestra los Fotogramas

2. (Frames) que componen la animación. A la izquierda
del panel “Línea de tiempo” están ubicadas las Capas
(Layers) que sirven para organizar los elementos de la
película. Los paneles flotantes que completan la interfaz
son varios, cada uno con su prestación propia.
Barra de menú.
Esta es la típica barra que contiene las opciones por
defecto que aparece en la mayoría de programas de
diseño actuales. Desde aquí podemos abrir y cerrar
archivos, guardarlos, insertar objetos o activar otros
elementos como las reglas o líneas guías, entre otras
posibilidades. Un aspecto importante a tomar en
cuenta sobre el menú, es que en el apartado “Ventana”
encontraremos todos los paneles de trabajo de Flash,
de tal forma que si no vemos uno abierto en la interfaz
o si lo cerramos por error, siempre podemos reactivarlo
desde aquí. No hay necesidad de entrar en pánico y
formatear la máquina!
Espacio de trabajo (Figura 1.1)
Flash posee varias configuraciones de interfaz pensadas
para el perfil del usuario que vaya a manejarlo. En la parte
superior derecha, donde probablemente dice “Clásico”,
se encuentra el “Espacio de Trabajo”. Aquí podremos
seleccionar la configuración que se adapte mejor a
nuestras necesidades: Conceptos básicos, diseñador,
animador y otros. Si ninguna de estas opciones se
adecúa a nuestro estilo de trabajo, es importante saber
que se puede cambiar la posición y/o el tamaño de todos
los paneles de la interfaz hasta encontrar un esquema
que nos satisfaga. Una vez hecho esto, es posible
conservar la nueva distribución de los paneles con la
opción “Nuevo espacio de trabajo”. Al dar click a esta
opción, deberemos darle un nombre significativo al
nuevo esquema y luego aceptar. El esquema aparecerá
por encima de los demás. Del mismo modo, es posible
borrar esquemas o regresarlos a su distribución
original con las opciones “eliminar” y “restablecer”
respectivamente.
figura 1.0
figura 1.1

3. figura 1.2
Barra de herramientas (Figura 1.2)
Dado que la barra de herramientas funciona
como cualquier otro panel en Flash, es posible
cambiar sus dimensiones para optimizar el es-
pacio disponible en pantalla. Veamos un ejem-
plo de esto antes de estudiar sus partes.
Si prestamos atención al literal A de la figura
1.2, observaremos dos pequeñas flechas en la
esquina superior izquierda de la barra. Estas
flechas sirven para cambiar automáticamente el
tamaño del panel. Así, la imagen de la izquierda
presenta la Barra de herramientas en su mínima
expresión en la interfaz, mientras que la imagen
al medio muestra la barra de herramientas utili-
zando un poco más de espacio y la imagen al
extremo derecho la muestra con dimensiones
medias. El literal B señala las áreas de la barra
que permiten moverla de lugar para ubicarla en
otra región acoplable de la interfaz o para dejar-
la como flotando sobre ella.
Estas mismas áreas y las flechas se encuentran
en todos los paneles de Flash para facilitar su
reubicación.
Es posible también cambiar el tamaño del cualquier pa-
nel de forma manual. Para hacer esto, podemos ubicar
el cursor en los extremos de la ventana, como se mues-
tra en el literal C. Pero ojo, en el caso de la barra de
herramientas, si la redimensionamos tal como se ve en
la tercera imagen corremos el riesgo de dejar fuera de
vista la parte de los “Modificadores de herramienta”.
La Barra de herramientas está dividida en: “Herra-
mientas de selección y transformación”, que nos
permiten mover, cambiar el tamaño o seleccio-
nar objetos en el escenario; “Herramientas de di-
bujo”, que como su nombre lo indica, nos permi-
ten dibujar, crear figuras geométricas y añadir texto;
“Herramientas de edición”, que nos servirán para pin-
tar, borrar, y modificar líneas o trazos de una ilustración,
así como mover, acercarnos o alejarnos del escenario.
Las “Herramientas de selección de color” nos dejarán
escoger el color tanto para líneas como trazos (que
veremos más adelante) y los “Modificadores de herra-
mienta” nos mostrarán opciones extras que depende-
rán de la herramienta seleccionada en ese momento.
La Barra de herramientas puede encontrarse en Barra
de Menú -->Ventana-->Herramientas. O con la combi-
nación de teclas Ctrl+F2.
Línea de tiempo (Figura 1.3)
La línea de tiempo organiza y controla el contenido de un
documento a través del tiempo en capas y fotogramas.
Al igual que en las películas, los documentos de Flash
dividen el tiempo en fotogramas. Las capas son como
varias bandas de película apiladas unas sobre otras,
cada una de las cuales contiene una imagen diferente
que aparece en el escenario. Los componentes
principales de la línea de tiempo son las capas, los
fotogramas y el cabezal de lectura.
-Capas.
Las capas (literal A de la figura 1.3) aparecen en la
columna situada a la izquierda de la línea de tiempo y
permiten organizar los objetos en el escenario así como
la animación a través de los fotogramas que contienen.
Cada capa puede contener una o muchas imágenes
diferentes para que aparezcan en el escenario, y es
posible editar cada capa sin afectar a las otras. Aunque
también se puede permitir que unas influyan sobre otras
al convertirlas en máscaras.
El literal B indica el ícono del ojo, que sirve para ocultar
o mostrar una determinada capa. El literal C señala
el ícono del candado, con el que podemos bloquear
y desbloquear las capas, de tal forma que si una
está bloqueada, no se le puede hacer ningún tipo de
modificación hasta volver a desbloquear.

4. El ícono señalado por el literal D es especial: al activarlo
cambia la vista de todos objetos contenidos en los
fotogramas de esa capa, de tal forma que solamente se
vean sus líneas de contorno, como si estuvieran hechos
de alambre y no tuvieran color de relleno. Esto es útil en
animación para descongestionar un poco un escenario
lleno de objetos, pero sin perder de vista todos los
elementos.
Las capas se pueden renombrar al darle un doble click
al nombre original con el que aparecen en la línea de
tiempo. Además, es posible cambiar a voluntad el orden
en el que se encuentran con solo arrastrarlos hacia
arriba o hacia abajo.
Finalmente, en la parte inferior de la línea de tiempo,
literal E, podemos observar tres íconos que nos servirán
para crear nuevas capas, carpetas para contener las
capas que deseemos y un último ícono para borrar
aquellas que ya no necesitemos.
Fotogramas
Los fotogramas (o frames) se encuentran a la derecha
de cada capa y se pueden entender como momentos
individuales en el tiempo de la historia. Al reproducir los
fotogramas en secuencia se da la ilusión de movimiento
gracias a lo que se conoce como “la persistencia del ojo”
que conserva por poco tiempo la última imagen vista y
hace la conexión inmediata con la siguiente.
Los fotogramas están contenidos en cada capa en
orden correlativo y puede añadirse virtualmente un
número infinito de ellos. El único límite en ese sentido
es la capacidad misma de la computadora.
El encabezado situado en la parte superior de la línea de
tiempo indica los números de fotograma.
Para añadir nuevos fotogramas en la línea de tiempo
podemos ir al menú principal --> Insertar--> línea de
tiempo---> fotograma. Aquí veremos, sin embargo, que
existen varios tipos de fotograma y es muy importante
comprender las diferencias entre ellos, así como las
indicaciones visuales que provee Flash de acuerdo con
el tipo de animación que presenten más adelante los
fotogramas.
figura 1.3
-Fotograma clave vacío (literal F). Un
fotograma de color gris oscuro y con un círculo
sin relleno en su centro indica que, aunque
ocupa espacio en el tiempo de la animación,
no contiene información visible alguna.
-Fotograma clave (literal G). Un fotograma
de color gris claro y con un círculo negro en
su centro indica información contenida en el
fotograma que puede ser visible o no, pero
que es editable.
-Fotogramas simples (literales F y
G). Un fotograma de color gris claro
u oscuro con un rectángulo vacío al
centro indica también que carece de información
propia, aunque sigue ocupando espacio en el tiempo.
La diferencia con los otros, sin embargo, es que estos
fotogramas sirven como un reflejo de la información
que contenga un fotograma clave anterior a ellos. En
otras palabras, si detrás de un fotograma simple hay
un fotograma clave -que contiene un dibujo cualquiera,
por ejemplo- el fotograma simple también mostrará ese
mismo dibujo, aunque no lo contenga en sí mismo. Es
como un reflejo de cualquier cosa que exista detrás de
él.
Esto resulta muy útil porque nos permite extender
la aparición de un objeto en la línea de tiempo sin
necesidad de repetir constantemente ese mismo objeto
en cada fotograma; lo que a su vez repercute en un
tamaño pequeño del archivo flash. Por ejemplo, el sol
de un paisaje que deba quedarse al fondo durante toda
una escena: el sol se coloca una tan sola vez y luego se
extiende con la ayuda de fotogramas simples.
Del mismo modo, un fotograma simple que tenga detrás
suyo un fotograma clave vacío, reflejará ese mismo
vacío.
Si observamos el literal H veremos que nos señala una
secuencia de fotogramas de color verde que además
contiene una flecha que separa dos fotogramas clave.
Esto nos indica uno de los tres tipos de animación nativa
de Flash. En este caso se trata de la animación llamada
“interpolación de forma”.

5. El literal I señala el segundo tipo de animación nativa de
Flash: “Interpolación clásica”, que se caracteriza por el
color morado entre sus fotogramas claves.
Por último, el literal J (fascinante letra!) nos indica la
animación por “Interpolación de movimiento” y su color
es el celeste. Además, este tipo de animación carece
de flecha. Más adelante en el curso estudiaremos
detenidamente cada uno de estos tipos de animación y
sus reglas de funcionamiento.
Para poder desplazarnos por la línea de tiempo y entre
los fotogramas, haremos uso del cabezal de lectura,
literal K. Esta línea roja nos indica el fotograma actual
que se muestra en el escenario. Mientras se reproduce
el documento, el cabezal de lectura se mueve de
izquierda a derecha, pero nosotros podemos moverlo
manualmente hacia el lado contrario arrastrando el
rectángulo superior que queda justamente arriba de los
fotogramas.
Del mismo modo, si queremos reproducir nuestra
animación en la línea de tiempo, podemos utilizar
los controles indicados en el literal L. Estos controles
funcionan de forma similar a los de un reproductor de
música: podemos reproducir, pausar, ir al primer o último
fotograma y avanzar o retroceder un fotograma.
El literal M nos muestra las opciones de “papel de cebolla”
que veremos también más adelante. Sin embargo, es
bueno saber que estas opciones nos permiten observar
y/o editar varios fotogramas a la vez.
El literal N señala la velocidad de los fotogramas,
es decir, a cuántos fotogramas por segundo se está
reproduciendo la animación (fps = frames per second.
No first person shooter!) y el tiempo en segundos en que
se encuentra el cabezal de lectura. En este caso, como
el cabezal está en el primer fotograma, el indicador
marca 0.0 segundos.
Por último, el literal N indica el nivel de zoom o
acercamiento que tenemos de la línea de tiempo. Si
modificamos este valor podemos ver más grandes o más
pequeños los fotogramas, dependiendo de si movemos
la flecha hacia la derecha (montañas grandes) o hacia la
izquierda (montañas pequeñas).
Panel de color y muestras (Figura 1.4)
Al lado derecho de la línea de tiempo tenemos el panel
de color y muestras. Como su nombre lo dice, nos
permite seleccionar de una amplia gama cualquier color
que necesitemos.
Esta selección puede hacerse a través de Matiz,
saturación o brillo; o a través de la combinación de rojo,
verde y azul. Además, si conocemos las tonalidades por
sus valores, Flash nos permite ser muy precisos a la
hora de seleccionar un color determinado.
Panel Biblioteca (Figura 1.5)
El panel Biblioteca es donde se guardan y organizan
los símbolos creados en Flash, además de archivos
importados tales como gráficos de imágenes de mapa
de bits, archivos de sonido y clips de vídeo. El panel
Biblioteca permite organizar los elementos en carpetas,
consultar con qué frecuencia se utiliza un elemento en
un documento y ordenar los elementos por nombre, tipo,
fecha, número de usos o el identificador de vinculación
deActionScript. También se puede buscar en el el campo
de búsqueda del panel.
figura 1.4
figura 1.5

6. El escenario (Figura 1.6)
El escenario se encuentra al centro de la interfaz de
Flash y consta de dos partes principales: Un área blanca
y un área gris, o área de trabajo, que contiene a la
primera. Es importante hacer esta distinción que parece
muy obvia porque cualquier objeto dentro de los límites
del área blanca será visible por el usuario al momento de
reproducir la animación; mientras que cualquier objeto
que se encuentre ubicado dentro del área gris quedará
fuera de la animación. Del mismo modo, si uno objeto
queda entre estas dos áreas del escenario se verá solo
parcialmente por el usuario.
Podemos apreciar un ejemplo de esto si comparamos la
figura 1.6 con la figura 1.7: En la primera figura veremos
que, en el escenario completo, el pentágono se ubica
en medio de las dos áreas anteriormente mecionadas;
mientras que en la figura 1.7, que es la reproducción de
la animación, solo queda visible la mitad del pentágono.
El escenario puede contener igualmente imágenes,
dibujos, video o texto y los elementos pueden alinearse
con facilidad en una cuadrícula (ver--> cuadrícula-->
mostrar cuadrícula), con líneas guías (ver--> guías -->
mostrar guías) o con el uso de una regla (ver-->reglas)
El área de trabajo puede desactivarse si quisiéramos
concentrarnos solo en el escenario en sí. Para esto va-
mos a menú-->ver-->área de trabajo y deselecciona-
mos esa opción.
También podemos observar el escenario en el modo
de pantalla completa, es decir, con el resto de paneles
ocultos. Para lograr esto, podemos presionar la tecla
F4, o ir al menú--> ver--> modo de pantalla--> modo
de pantalla completa. Para regresar al modo normal,
podemos presionar F4 ó F11.
El literal A de la figura 1.6 nos muestra el control de zoom
que podemos tener sobre el escenario. Este control nos
permite alejarnos o acercarnos al escenario cambiando
los valores númericos que nos presenta. También pode-
mos ajustar a ventana para que el escenario se ajuste
automáticamente al tamaño de la ventana.
figura 1.6
figura 1.7

7. “Mostrar fotograma” centrará el escenario y dejará el
área blanca completamente visible, incluso si no hay ob-
jetos dentro de ella. Finalmente, “Mostrar todo” nos per-
mitirá ver todos los elementos del escenario que estén
dentro de ese fotograma, ya sea dentro del área blanca
o de la gris.
Panel de propiedades (Figura 1.8)
El panel o inspector de propiedades facilita el acceso a
los atributos más utilizados de la selección actual, ya sea
en el escenario o en la línea de tiempo. Puede modificar
los atributos del objeto o documento en el inspector de
propiedades sin acceder a los menús o paneles que
contienen estos atributos.
El panel de propiedades muestra información y la
configuración del elemento que está seleccionado, que
puede ser un documento, un texto, un símbolo, una
forma, un mapa de bits, un vídeo, un grupo, un fotograma
o una herramienta. Cuando hay dos o más tipos de
objetos seleccionados, el inspector de propiedades
muestra el número total de objetos seleccionados.
Para mostrar el inspector de propiedades, seleccione
Ventana >Propiedades, o presione Control+F3.
Si no hay ningún objeto seleccionado, el panel de
propiedades mostrará los atributos del documento que
estemos trabajando, con lo que podremos cambiar el
tamaño e incluso el color del escenario, la velocidad de
los fotogramas, las unidades de medida (pixels, mm,
cm, etc) y algunas opciones de publicación.
En conclusión inconclusa
Esto es apenas un primer vistazo a la interfaz de Flash
y las opciones que ofrece, en la medida en la que
avancemos en el curso veremos con más detalle las
herramientas, otros paneles y las posibilidades que
nos da el programa para la creación de animaciones.
Mientras tanto, trabajaremos en la segunda parte de
esta guía algunos ejercicios básicos que nos permitan
acostumbrarnos a los elementos que acabamos de ver.
figura 1.8