MANUAL DE FLASH

El objeto de este manual es el de proporcionar los

fundamentos necesarios para que puedas desenvolverte
fácilmente en el entorno de trabajo de Flash. A lo largo
de estos artículos, vamos a abordar los conceptos
básicos necesarios para el buen uso de esta tecnología
y describiremos el empleo de las herramientas más
comúnmente utilizadas.

Este tutorial no pretende ser una descripción

exhaustiva de la aplicación Flash. Deseamos, más bien,
dejar sentadas las nociones que os ayudarán a tener
las ideas claras a la hora de plantear vuestro
proyecto. Así que os dejamos a vosotros mismos la
oportunidad de ver a fondo todas las posibilidades que
este programa ofrece, algo que podréis descubrir a
medida que creáis vuestras propias animaciones.

Aparte de este manual, los elementos que necesitáis

para crear vuestras animaciones son más bien pocos: La
aplicación Flash, que puedes descargar en versión de
prueba en el sitio de Macromedia, un navegador web y un
editor de texto como el bloc de notas de Windows.

Esperamos que el manual resulte de vuestro agrado y

os invitamos a complementar su aprendizaje con otro
tipo de servicios que pueden ayudaros en vuestra
progresión:
 • La lista de ayuda de DesarrolloWeb, donde podrás
plantear tus dudas a otros desarrolladores al
mismo tiempo que contribuyes al intercambio de
conocimientos.
• Los foros de Flash, en los que podrás intercambiar
más información sobre temás relativos a esta
tecnología.
• Los recursos Flash, sitios web en los que podrás
encontrar información, sonidos, animaciones y
otros recursos de interés.

Para finalizar, os rogamos que nos contactéis si

encontráis algún tipo de errata en el manual y que no
dudéis en aportar cualquier tipo de complemento a los
capítulos añadiendo un comentario por medio del enlace
previsto a ese efecto al pie de cada capítulo
QUE ES EL FLASH
Probablemente, uno de los avances más importantes en
materia de diseño en el web ha sido la aparición de la
tecnología desarrollada por Macromedia denominada
Flash.

Flash es la tecnología más comúnmente utilizada en el

Web que permite la creación de animaciones vectoriales.
El interés en el uso de gráficos vectoriales es que éstos
permiten llevar a cabo animaciones de poco peso, es
decir, que tardan poco tiempo en ser cargadas por el
navegador.

Como puede que sepáis, 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 depende del zoom o del tipo de
resolución con el cual se esté mirando el gráfico.
Por mucho que nos acerquemos, el gráfico no se
pixeliza, ya que el ordenador traza
automáticamente las líneas para ese nivel de
acercamiento.
• Las imágenes en mapa de bits. Este tipo de
gráficos se asemejan a una especie de cuadrícula en
la cual cada uno de los cuadrados (píxeles)
muestra un color determinado. La información de
 estos gráficos es guardada individualmente para
cada píxel y es definida por las coordenadas y
color de dicho píxel. Este tipo de gráficos son
dependientes de la variación del tamaño y
resolución, pudiendo perder calidad al modificar
sucesivamente sus dimensiones.

Así, Flash se sirve de las posibilidades que ofrece el

trabajar con gráficos vectoriales, fácilmente
redimensionables y alterables por medio de funciones,
así que de un almacenamiento inteligente de las imágenes
y sonidos empleados en sus animaciones por medio de
bibliotecas, para optimizar el tamaño de los archivos
que contienen las animaciones.

Esta optimización del espacio que ocupan las

animaciones, combinada con la posibilidad de cargar la
animación al mismo tiempo que ésta se muestra en el
navegador (técnica denominada streaming), permite
aportar elementos visuales que dan vida a una web sin
que para ello el tiempo de carga de la página se
prolongue hasta límites insoportables por el visitante.

Además de este aspecto meramente estético, Flash

introduce en su entorno la posibilidad de interaccionar
con el usuario. Para ello, Flash invoca un lenguaje de
programación llamado Action Script. Orientado a
objetos, este lenguaje tiene claras influencias del
Javascript y permite, entre otras muchas cosas,
gestionar el relleno de formularios, ejecutar distintas
partes de una animación en función de eventos
producidos por el usuario, saltar a otras páginas, etc.
De este modo, Macromedia pone a nuestra disposición
una tecnología pensada para aportar vistosidad a
nuestra web al mismo tiempo que nos permite
interaccionar con nuestro visitante. Por supuesto, no
se trata de la única alternativa de diseño vectorial
aplicada al Web pero, sin duda, se trata de la más
popular y más completa de ellas.

capas y fotogramas
Como hemos dicho en el capítulo anterior, la línea de
tiempo es donde podremos organizar la sucesión de
imágenes que dan lugar a una animación. En este
capítulo introduciremos los conceptos de capa y
fotograma, vitales para una compresión del
funcionamiento de Flash.

En cierta medida, Flash trabaja como si fuese una

película. Una animación es una sucesión de imágenes
fijas que, al pasar rápidamente unas detrás de otras,
dan la impresión de un movimiento. Cada una de estas
imágenes fijas es llamada también fotograma. Los
fotogramas son representados bajo forma de
rectángulos en la parte derecha del escenario.

En estos rectángulos podemos alojar tres tipos

diferentes de imágenes:
 • Imágenes clave Se trata de las imágenes que
nosotros mismos dibujaremos
• Imágenes fijas Son las imágenes claves copiadas
en los fotogramas siguientes al de la primera
imagen clave de manera a producir un efecto de
objeto estático.
• Imágenes de interpolación Se trata de imágenes
calculadas por Flash que permiten la transición
gradual entre dos imágenes claves. Este tipo de
imágenes muy útiles ya que se generan
automáticamente y proporcionan un efecto suave
de movimiento o transformación.

Por otra parte, una animación esta generalmente

constituida de una variedad de objetos diferentes, cada
uno de los cuales se introduce en un momento diferente
y presenta un comportamiento independiente al resto de
los objetos. De manera a organizar y editar todos
estos elementos Flash permite el uso de capas o calcos.

Así, una animación Flash esta compuesta de una

superposición de capas en cada una de las cuales
introduciremos un objeto que tendrá su propia línea de
fotogramas. Estas capas nos permiten trabajar la
animación en distintos planos independientes.

Por defecto, al comenzar una nueva escena

encontraremos en nuestra línea de tiempo una sola
capa. Progresivamente iremos introduciendo más capas
que nos permitan separar cada uno de los elementos de
la animación: objetos, fondo, sonidos o trayectorias.

Un uso inteligente de las capas es la base para crear

animaciones de calidad

CLASES Y OBJETOS EN FLASH

Como esta es la primera vez que escribo sobre Clases y
Objetos, veo que es necesario insistir en la diferencia
entre clase y objeto.
Comencé con el concepto del hombre en su acepción de
todo el género humano.
Buscando un concepto lógico pedí por Google "Ferrater
Mora concepto hombre" y es apasionante leer como
refuta cada definición: Ser racional, Homo sapiens, Homo
faber, Homo symbolicus, etc. Y al fin da su definición "El
hombre es «un modo de ser su cuerpo»" y la explica
largamente.
Por si desea leerla, aquí está:
http://www.ferratermora.com/lang_palabras_section.
html

De todos modos doy por hecho que cualquiera sea la

idea que ustedes tienen de el ser humano, saben que es un
concepto, una definición, una clase. Y que Juan Pérez, mi
vecino y María Duarte, su esposa son realidades,
instancias de la clase. El objeto es la idea hecha
realidad.

Una clase se va ampliando en nuevas clases: La clase

arquitecto es para nosotros la idea del hombre, a la
que sumamos la idea del que ha obtenido el título de
arquitecto. Pero no deja de ser una idea.
Para concretarse en realidad tiene que ser vivo y haber
estudiado y obtenido su diploma

FLASH CLASES Y OBJETOS

Con las herramientas de dibujo de FLASH hice este ciprés.

Lo convertí en clip de película:
seleccionar -->modificar-->convertir en símbolo-->clip de
película Le puse por nombre cipres.Sin embargo sigue
siendo una clase común de clip.
Está en la biblioteca como están en nuestra mente
cualquier clase general como europeo, americano,
álamo, sauce. Si lo traigo al escenario, ha nacido. Es un
objeto que ocupa un lugar en el espacio y ya tiene
precisas sus coordenadas x, y.
Pero en cuanto a su naturaleza de clip de película
solamente se diferencia de otro clip por su forma. Y no
puede hacer nada distinto a cualquier otro clip.
Por ejemplo: Si quiero arrastrarlo con el ratón tendré
que programarlo en su propio panel de acciones o en el
fotograma de la línea del tiempo, o agregando un botón
La palabra clave extends

La palabra clave extends nos permite extender, ampliar

una clase con otras ya definidas en FLASH. Dentro de la
clase métodos de MovieClipentre otras subclases están
definidas la clase startDrag y la clase stopDrag Y la
palabra extends nos permite definir una nueva clase,
ampliando la clase MovieClip de modo que lleve dentro
de sí, la capacidad de responder a las funciones de
startDrag y stopDrag.

Para hacer esto, debemos escribir un script

directamente en un archivo ActionScript
Archivo -->Nuevo-->ArchivoActionScript y lo guardas en
la misma Carpeta donde guardas el archivo .fla
El nombre del archivo debe ser exactamente el mismo que
la clase. Si es Arrastre.as, la clase es Arrastre y no
arrastre (con la inicial en minúscula)
Numeré y separé las partes del script para explicarlos
mejor.
Se nos ocurrió el nombre Arrastre para esta sub clase,
así que en el renglón 1 en la sintaxis de Flash dice:

1 class Arrastre extends MovieClip {

2 function Arrastre() {
3 onPress=Arrastrar;
4 onRelease=Soltar;
5}

6 private function Arrastrar():Void{

7 this.startDrag();
8}

9 private function Soltar():Void{

10 this.stopDrag();
11 }
12 }

Esta clase se llama Arrastre y amplía la clase MovieClip.

La palabra extends significa que si bien se trata de una
ampliación no estamos inventando nada nuevo, sino que
estamos construyendo con clases ya definidas en el
sistema de FLASH.

Volvemos a la sintaxis de la línea 1 que abre la llave que

se cierra en la línea 12.
class Arrastre extends MovieClip {
class Arrastre nos dice que se define una nueva clase
extends MovieClip aclara que es una subclase de la
clase MovieClip y que por lo tanto hereda todo lo que
en ella está definido. Extends crea la relación de
subordinación entre las dos clases

A continuación hay que escribir una función que tenga

el mismo nombre que la clase y que explicite con
claridad de que se trata esta subclase.
Se trata de una subclase de MovieClip que atiende a las
órdenes de Arrastrar y Soltar.
Esos nombres también los elegimos nosotros y lo
decimos en las líneas 2, 3, 4 y 5.
2 function Arrastre() {
3 onPress=Arrastrar;
4 onRelease=Soltar;
5}

La subclase Arrastre quedó definida.

A la presión del mouse Arrastrar y cuando se levanta
la presión Soltar Pero ahora hay que explicar que
quieren decir exactamente esas dos palabras nuevas

6 private function Arrastrar():Void{

7 this.startDrag();
8}

Creamos una función privada para esta clase de clip que

no retorna ningún valor. Por eso Void (por ejemplo no
devuelve una string, o un número)
Simplemente ordena para éste clip que se está
presionando (this) la función ya definida startDrag()

Y en las líneas 9,10 y 11 definimos la función para Soltar.

Ahora tenemos que hacer que el clip cipres que tenemos

en biblioteca posea la clase Arrastre que hemos
definido.

Dentro de la biblioteca seleccionas el clip y pulsas

Propiedades con el botón derecho del ratón. Si no
aparece un cuadro grande como el que ves pulsa
Avanzado.
Exporta para ActionScript, y en Clase de ActinScript 2.0
escribe Arrastre
Si todo está como en la figura, pulsas aceptar.
Ahora trae al escenario unos cuantos ciprés grabas y
corres el programa para probar si puedes
arrastrarlos.

En esta aplicación dibujo.fla participan de la clase

arrastre cada una de las piezas que forman la casa y
también el árbol que está detrás de ella.

Como ejercicio crea otro clip y luego en biblioteca le

puedes agregar pulsando Propiedades su participación
en esta nueva clase que ya la has puesto como archivo
Arrastre.as en tu carpeta.
También hemos creado otra clase de este mismo tipo que
nombramos Calesita

A ella pertenecen, el clip Flores que ves como pastito, el

clip sauce y el clip VerNover que es el texto de entrada.

Clip Calesita

Aquí tienes el script Calesita.as

Por supuesto tienes que crearlo haciendo Archivo
-->Nuevo-->ArchivoActionScript copiarlo tal cual está
ahí y guardarlo en la misma carpeta.

La funciones que definen a la clase Calesita son Clic y

Soltar

La clase Clic se define con las funciones del sistema

start Drag que usamos en la anterior y nextFrame que
nos interesa especialmente porque vamos a hacer
MovieClips de varios fotogramas.

La función Soltar es la misma que ya definimos en la

clase Arrastre

class Calesita extends MovieClip {

function Calesita() {
onPress=Clic;
onRelease=Soltar;
}
private function Clic(clip):Void{
this.nextFrame();
this.startDrag();
}
private function Soltar():Void{
this.stopDrag();
}
}

clip VeroNover

Aquí tienes el clip editado y en el primer fotograma.

La acción del fotograma es stop();

Tiene dos gráficos:

El texto:
"Ver/ocultar este texto"
Y debajo el texto largo.
El primer texto mide 156 x 20 y por eso lo colocamos en
-78 para x y en -10 para y.
El segundo texto, debajo y más o menos que su mitad
coincida con la del primero. En el segundo fotograma la
acción es stop();y ponemos solamente el gráfico chico.
En el último fotograma no ponemos ningún gráfico y su
acción es: gotoAndStop(1)

Y así logramos el efecto calesita de girar y volver al

primer fotograma.
No olvides, lo que explicamos en el comentario anterior:

Hay que exportarlo para ActionScript y escribir la

nueva clase en la ventanita correspondiente