Manual Flash DesarrolloWeb

Manual de Flash - Manual completo
Pgina 1 de 77
Manual de Flash
Manual por: DesarrolloWeb.com [http://www.desarrolloweb.com/]
Versin on-line:
"Tu mejor ayuda para aprender a hacer webs"
http://www.desarrolloweb.com/manuales/39
NOTA: Este PDF no puede incluir las animaciones Flash resultantes de hacer los
ejercicios, por razones tcnicas relativas al formato PDF. Para ver las animaciones de
los ejemplos hay que dirigirse a DesarrolloWeb.com
Prlogo del manual de Flash

Bienvenido al manual de Flash de DesarrolloWeb.
El objeto de este manual es el de proporcionar los fundamentos necesarios para que puedas
desenvolverte fcilmente en el entorno de trabajo de Flash. A lo largo de estos artculos, vamos
a abordar los conceptos bsicos necesarios para el buen uso de esta tecnologa y describiremos
el empleo de las herramientas ms comnmente utilizadas.
Este tutorial no pretende ser una descripcin exhaustiva de la aplicacin Flash. Deseamos, ms
bien, dejar sentadas las nociones que os ayudarn 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 podris descubrir a medida que creis
vuestras propias animaciones.
Aparte de este manual, los elementos que necesitis para crear vuestras animaciones son ms
bien pocos: La aplicacin Flash, que puedes descargar en versin de prueba en el sitio de
Macromedia [http://www.macromedia.com/downloads/], 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 progresin:

La lista de ayuda de DesarrolloWeb [http://www.desarrolloweb.com/listacorreo/], donde podrs plantear

tus dudas a otros desarrolladores al mismo tiempo que contribuyes al intercambio de
conocimientos.
Los foros de Flash [http://desaweb.forosdelweb.com/forumdisplay.php?forumid=16], en los que podrs
intercambiar ms informacin sobre tems relativos a esta tecnologa.
Los recursos Flash [http://www.desarrolloweb.com/directorio/diseno/flash/], sitios web en los que
podrs encontrar informacin, sonidos, animaciones y otros recursos de inters.
Para finalizar, os rogamos que nos contactis [http://www.desarrolloweb.com/contacta/contacta.php?

si encontris algn tipo de errata en el manual y que no dudis en aportar
cualquier tipo de complemento a los captulos aadiendo un comentario por medio del enlace
previsto a ese efecto al pie de cada captulo.
destinatario=1]
Qu es Flash
Probablemente, uno de los avances ms importantes en materia de diseo en el web ha sido la
aparicin de la tecnologa desarrollada por Macromedia [http://www.macromedia.com/] denominada
Flash.
Flash es la tecnologa ms comnmente utilizada en el Web que permite la creacin de
animaciones vectoriales. El inters en el uso de grficos vectoriales es que stos permiten llevar
a cabo animaciones de poco peso, es decir, que tardan poco tiempo en ser cargadas por el
navegador.
Pgina 2 de 77
Como puede que sepis, existen dos tipos de grficos:

Los grficos vectoriales, en los cuales una imagen es representada a partir de lneas (o
vectores) que poseen determinadas propiedades (color, grosor...). La calidad de este tipo
de grficos no depende del zoom o del tipo de resolucin con el cual se est mirando el
grfico. Por mucho que nos acerquemos, el grfico no se pixeliza, ya que el ordenador
traza automticamente las lneas para ese nivel de acercamiento.
Las imgenes en mapa de bits. Este tipo de grficos se asemejan a una especie de
cuadrcula en la cual cada uno de los cuadrados (pxeles) muestra un color determinado.
La informacin de estos grficos es guardada individualmente para cada pxel y es
definida por las coordenadas y color de dicho pxel. Este tipo de grficos son dependientes
de la variacin del tamao y resolucin, pudiendo perder calidad al modificar
sucesivamente sus dimensiones.
As, Flash se sirve de las posibilidades que ofrece el trabajar con grficos vectoriales, fcilmente
redimensionables y alterables por medio de funciones, as que de un almacenamiento
inteligente de las imgenes y sonidos empleados en sus animaciones por medio de bibliotecas,
para optimizar el tamao de los archivos que contienen las animaciones.
Esta optimizacin del espacio que ocupan las animaciones, combinada con la posibilidad de
cargar la animacin al mismo tiempo que sta se muestra en el navegador (tcnica denominada
streaming [http://www.desarrolloweb.com/articulos/482.php?manual=15]), permite aportar elementos
visuales que dan vida a una web sin que para ello el tiempo de carga de la pgina se prolongue
hasta lmites insoportables por el visitante.
Adems de este aspecto meramente esttico, Flash introduce en su entorno la posibilidad de
interaccionar con el usuario. Para ello, Flash invoca un lenguaje de programacin 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 animacin en funcin de eventos producidos por el usuario, saltar a otras pginas, etc.
De este modo, Macromedia pone a nuestra disposicin una tecnologa 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 diseo vectorial aplicada al Web pero, sin
duda, se trata de la ms popular y ms completa de ellas.
Entorno de trabajo en Flash

Las animaciones Flash son producidas en una aplicacin de diseo. Se puede descargar dicha
aplicacin en versin prueba desde el sitio de Macromedia [http://www.macromedia.com/downloads/].
Una vez descargada e instalada, ya podemos ponernos a trabajar. Evidentemente, aprender a
hacer animaciones con este programa requiere por una parte un conocimiento del software y
por otra, una aplicacin inteligente de los recursos que se nos ofrecen. En este manual
intentaremos hacer hincapi en lo segundo dejando al lector la posibilidad de descubrir poco a
poco la aplicacin.
Para la redaccin de este manual, nos hemos servido de Flash MX. Cabe esperar que lo dicho
para esta versin sea aplicable en gran medida a las versiones precedentes y las que salgan en
un futuro.
Nada ms instalar y abrir la aplicacin por primera vez, accederemos a una ventana de dilogo
que nos propone tres modos de uso distintos:

Modo diseador, destinado a crear animaciones y grficos

Modo general, en el que dispondremos de todas las opciones de Flash adems de la
Pgina 3 de 77
ayuda.
Modo desarrollador, enfocado a la creacin de aplicaciones con formularios, botones y
otros componentes.
Este men aparecer nicamente la primera vez que abramos Flash, no obstante, podremos
acceder a l desde la barra de herramientas en la seccin Ayuda>Bienvenido.
Ya dentro del programa, tras haber cerrado algunos paneles con el objeto de disponer de
espacio de trabajo, haremos frente a una interface como la que se muestra en la figura:
Dentro de esta interface, podemos distinguir tres partes principales:

El escenario Se trata del espacio en el cual llevaremos a cabo todas las tareas de edicin
de grficos. En cierto modo es como el papel en el cual dibujaremos lo que haga falta.
La lnea de tiempo Esta seccin es donde podremos organizar en el tiempo cada una de
las imgenes diseadas en el escenario. Podemos subdividirla en dos partes: La parte
izquierda, donde podremos organizar las capas y la parte de la derecha que queda
reservada a la gestin de los fotograms. Ambos elementos, capas y fotograms sern
tratados ms adelante.
La caja de herramientas Aqu encontraremos las herramientas de edicin grafica que

Flash pone a nuestra disposicin. Como puede observarse, stas son muy parecidas a las
que podemos encontrar en otros programs de edicin grafica que ya sea vectorial o no.
Capas y fotogramas en Flash

Como hemos dicho en el captulo anterior [http://www.desarrolloweb.com/articulos/1068.php?manual=39], la
lnea de tiempo es donde podremos organizar la sucesin de imgenes que dan lugar a una
animacin. En este captulo introduciremos los conceptos de capa y fotograma, vitales para una
compresin del funcionamiento de Flash.
En cierta medida, Flash trabaja como si fuese una pelcula. Una animacin es una sucesin de
imgenes fijas que, al pasar rpidamente unas detrs de otras, dan la impresin de un
Pgina 4 de 77
movimiento. Cada una de estas imgenes fijas es llamada tambin fotograma. Los fotogramas
son representados bajo forma de rectngulos en la parte derecha del escenario.
En estos rectngulos podemos alojar tres tipos diferentes de imgenes:

Imgenes clave Se trata de las imgenes que nosotros mismos dibujaremos

Imgenes fijas Son las imgenes claves copiadas en los fotogramas siguientes al de la
primera imagen clave de manera a producir un efecto de objeto esttico.
Imgenes de interpolacin Se trata de imgenes calculadas por Flash que permiten la
transicin gradual entre dos imgenes claves. Este tipo de imgenes muy tiles ya que se
generan automticamente y proporcionan un efecto suave de movimiento o
transformacin.
Por otra parte, una animacin 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 animacin Flash esta compuesta de una superposicin de capas en cada una de las
cuales introduciremos un objeto que tendr su propia lnea de fotogramas. Estas capas nos
permiten trabajar la animacin en distintos planos independientes.
Por defecto, al comenzar una nueva escena encontraremos en nuestra lnea de tiempo una sola
capa. Progresivamente iremos introduciendo ms capas que nos permitan separar cada uno de
los elementos de la animacin: 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 acepcin de todo el gnero humano.
Buscando un concepto lgico ped por Google "Ferrater Mora concepto hombre" y es
apasionante leer como refuta cada definicin: Ser racional, Homo sapiens, Homo faber, Homo
symbolicus, etc. Y al fin da su definicin "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 [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 definicin, una clase. Y que Juan Prez, mi vecino y Mara
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 ttulo 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
Pgina 5 de 77
Con las herramientas de dibujo de FLASH hice este ciprs.

Lo convert en clip de pelcula:
seleccionar -->modificar-->convertir en smbolo-->clip de pelcula Le puse por nombre
cipres.Sin embargo sigue siendo una clase comn de clip.
Est en la biblioteca como estn 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 pelcula 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 ratn tendr que programarlo en su propio panel de
acciones o en el fotograma de la lnea del tiempo, o agregando un botn
La palabra clave extends
La palabra clave extends nos permite extender, ampliar una clase con otras ya definidas en
FLASH. Dentro de la clase mtodos de MovieClipentre otras subclases estn 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 minscula)
Numer y separ las partes del script para explicarlos mejor.
Se nos ocurri el nombre Arrastre para esta sub clase, as que en el rengln 1 en la sintaxis de
Flash dice:
1 class Arrastre extends MovieClip {
2
3
4
5
function Arrastre() {
onPress=Arrastrar;
onRelease=Soltar;
}
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 ampla la clase MovieClip. La palabra extends significa que si bien
se trata de una ampliacin no estamos inventando nada nuevo, sino que estamos construyendo
con clases ya definidas en el sistema de FLASH.
Volvemos a la sintaxis de la lnea 1 que abre la llave que se cierra en la lnea 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 relacin de subordinacin entre las dos clases
A continuacin hay que escribir una funcin 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 tambin los elegimos nosotros y lo decimos en las lneas 2, 3, 4 y 5.
2 function Arrastre() {
3 onPress=Arrastrar;
Pgina 6 de 77
4 onRelease=Soltar;
5}
La subclase Arrastre qued definida.

A la presin del mouse Arrastrar y cuando se levanta la presin Soltar Pero ahora hay que
explicar que quieren decir exactamente esas dos palabras nuevas
7 this.startDrag();
8}
Creamos una funcin privada para esta clase de clip que no retorna ningn valor. Por eso Void
(por ejemplo no devuelve una string, o un nmero)
Simplemente ordena para ste clip que se est presionando (this) la funcin ya definida
startDrag()
Y en las lneas 9,10 y 11 definimos la funcin 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 botn derecho del ratn.
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 ciprs grabas y corres el programa para probar si puedes
arrastrarlos.
En esta aplicacin dibujo.fla participan de la clase arrastre cada una de las piezas que forman la
casa y tambin el rbol que est detrs de ella.
Como ejercicio crea otro clip y luego en biblioteca le puedes agregar pulsando Propiedades su
participacin en esta nueva clase que ya la has puesto como archivo Arrastre.as en tu carpeta.
Pgina 7 de 77
Tambin 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 funcin 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();
}
Pgina 8 de 77
clip VeroNover
Aqu tienes el clip editado y en el primer fotograma.

La accin del fotograma es stop();
Tiene dos grficos:
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 ms o menos que su mitad coincida con la del primero. En el
segundo fotograma la accin es stop();y ponemos solamente el grfico chico.
En el ltimo fotograma no ponemos ningn grfico y su accin es: gotoAndStop(1)
Pgina 9 de 77
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.
Los otros clip no necesitan explicacin.
Lo importante es que todos los fotogramas llevan la accin stop(); menos el ltimo que debe
mandar al primero.
gotoAndStop(1);
Puedes
ver el ejemplo funcionando aqui [http://www.delphi.todouy.com/flash/extends/dibujo.swf].
Bibliotecas en Flash
En el captulo precedente introducimos [http://www.desarrolloweb.com/articulos/1069.php?manual=39]el concepto
de capa y fotograma y subrayamos la necesidad de utilizarlos inteligentemente. Otro elemento
de Flash que necesita una gestin lo ms sabia posible es la biblioteca.
Como dijimos previamente, Flash permite la optimizacin del espacio ocupado por la animacin,
o lo que es lo mismo, del tiempo que el usuario tarda en cargarla. Uno de los elementos que
contribuye a ello es las denominadas bibliotecas.
Una biblioteca no es ms que un almacn de objetos (grficos o sonidos) que podrn ser
utilizados en una misma animacin en una o ms ocasiones. Dependiendo del rango que
presente esta biblioteca, sta puede ser propia a la animacin, compartida por varias
animaciones, o bien permanente (empleada por la totalidad de animaciones).
Cada uno de los elementos que constituyen una biblioteca son denominados smbolos. Como
hemos dicho, estos elementos podrn ser utilizados en nuestra animacin cuantas veces lo
Pgina 10 de 77
deseemos. No obstante, cada una de estas utilizaciones no es llamada smbolo, sino ocurrencia.
Por lo tanto, una ocurrencia es cada una de las ocasiones en las que un smbolo almacenado
en nuestra biblioteca es utilizado en nuestra animacin.
Cambiando las propiedades de un smbolo de la biblioteca , cambiamos todas cada una de las
ocurrencias que aparecen en la animacin. Contrariamente, la modificacin de una ocurrencia
no altera al smbolo de la biblioteca ni a las otras ocurrencias de la animacin. Como podemos
observar, el uso de las bibliotecas no solo nos ayuda a aligerar el archivo, sino que nos permite
una creacin, edicin y borrado rpidos de cada una de las ocurrencias.
En captulos posteriores abordaremos con ms detalle la gestin de bibliotecas smbolos y
ocurrencias. Pasaremos a continuacin a la aplicacin de lo aprendido a partir de la creacin de
una animacin.
Mi primera animacin en Flash I

Despus de haber introducido los conceptos bsicos de Flash, vamos a poner en practica
algunos de ellos de manera a comenzar a familiarizarnos con la interface.
Para empezar, comenzaremos por generar un documento en blanco por medio de:
Archivo > Nuevo
Como podemos observar en la lnea de tiempo, nuestra animacin consta de una sola capa y un
nico fotograma representado por un rectngulo con un crculo. Este crculo significa que se
trata de un fotograma que contiene una imagen clave vaca.
La animacin que pretendemos crear consiste en un movimiento de traslacin de una esfera
con una trayectoria elptica. As pues, lo primero que debemos hacer es dibujar la esfera. Sin
embargo, para empezar con las buenas costumbres, no dibujaremos la esfera directamente
sobre nuestro fotograma vaco, sino que crearemos un smbolo en nuestra biblioteca.
Para crear nuestro smbolo en la biblioteca:

Ventana > Biblioteca
Llegados a este punto veremos aparecer en la pantalla una ventana como la que veis en la
ilustracin.
Pgina 11 de 77
Para insertar el smbolo lo podemos hacer a partir del botn con una cruz situado en la parte
inferior izquierda de la ventana de la biblioteca, o bien ir a la barra de mens y hacer:
Insertar > Nuevo Smbolo
Una nueva ventana de dialogo aparece ante nuestros ojos (ver figura abajo). En ella podremos
definir el nombre (para este caso la llamaremos esfera) y el comportamiento (elegiremos
grfico). Por el momento no entraremos en la explicacin de la opcin comportamiento, ya lo
veremos ms adelante.
Al rellenar debidamente la ventana anterior y Aceptar, veremos como el escenario se agranda y

la barra superior del escenario nos muestra la palabra Esfera. Lo que ha pasado es que hemos
salido de nuestra animacin para meternos en un espacio en el que podemos editar el smbolo
que queremos crear. As que nos ponemos manos a la obra con nuestra labor de artistas.
Para dibujar la esfera vamos a servirnos de las herramientas de dibujo. Comenzamos por elegir
la herramienta valo, representada por un crculo. Una vez elegida nos colocamos en el
escenario y, apretando la tecla maysculas y pulsando el botn izquierdo del ratn (el nico
para los usuarios Mac), desplazamos el ratn hacia cualquier direccin. Veremos aparecer un
crculo con los colores definidos en el apartado colores de la barra de herramientas.
Ahora, para darle la sensacin de perspectiva a la esfera, vamos a colorearla en su interior
usando un degradado radial. Para ello, visualizamos el panel mezclador de colores:
Ventana > Mezclador de color
Llegados aqu, veremos una ventana como la de la figura:
Pgina 12 de 77
En este panel, seleccionaremos en el men desplegable la opcin Radial. Veremos como la

ventana cambia de aspecto parecindose a la imagen siguiente:
Lo que haremos es seleccionar dos colores (los que os gusten) para cada una de las casitas que
se encuentran en la parte inferior de la barra de degradado. Para ello, clicaremos sobre cada
una de las casitas y a continuacin, elegiremos un color en la paleta desplegable situada en la
parte superior izquierda del panel. Repetiremos el proceso para la otra casita.
Una vez definido el degradado, podemos seleccionar la herramienta cubo de pintura y
clicaremos con el botn izquierdo sobre la parte rellena del crculo. Si todo funciona
correctamente, deberemos obtener una esfera similar a la de la figura mostrada:
Pgina 13 de 77
Sugerimos repetir este proceso de relleno del crculo con un degradado jugando con las
opciones que nos ofrece el panel mezclador de colores. Podemos ver que es posible aadir ms
casitas para conseguir un efecto de coronas o bien cambiar el tipo de degradado a lineal y ms
cosas...
Despus de dejarnos llevar por nuestra vena creativa podemos volver a cosas ms serias. Para
empezar, podemos alinear la esfera con la cruz que define el punto de alineamiento del
smbolo. Para ello, elegiremos la herramienta flecha y seleccionaremos la esfera desplazando el
ratn al mismo tiempo que mantenemos pulsado el botn izquierdo. Para mover la esfera lo
haremos del mismo modo, desplazando el ratn hasta el lugar apropiado manteniendo pulsado
el botn izquierdo. Podemos precisar el desplazamiento usando las flechas del cursor que nos
permitirn desplazarnos pxel por pxel.
Mi primera animacin en Flash II

Vale, ya hemos definido el smbolo en la biblioteca. Ahora vamos a empezar a trabajar con la
animacin propiamente dicha. Lo primero que debemos de hacer es salir del espacio de
creacin del smbolo y colocarnos en el escenario de la animacin. Para ello, pincharemos en la
palabra Escena 1 que aparece en la parte superior izquierda del escenario.
Ya dentro del escenario, vamos a incluir en el primer fotograma el smbolo que acabamos de
crear. Antes de nada, iremos a la ventana biblioteca (si la tenis cerrada podis abrirla con
Ventana > Biblioteca) y seleccionaremos el smbolo esfera. A continuacin, pincharemos y
arrastraremos el smbolo hasta el escenario. El resultado debera ser algo como lo que se
muestra en la imagen inferior:
Pgina 14 de 77
Podemos observar que el crculo vaco del primer fotograma se ha convertido ahora en un
crculo lleno, lo que significa que la imagen clave no esta vaca.
Pasemos ahora a estudiar el tipo de animacin que vamos a hacer. Como hemos dicho,
pretendemos simular un movimiento de traslacin de la esfera con una trayectoria elptica,
dando la impresin de un crculo en perspectiva. Esta animacin podra ser definida por tres
imgenes clave:

La esfera situada en primer plano al principio de su movimiento.

La esfera situada en segundo plano a mitad de su ciclo de traslacin.
La esfera llegada al final del ciclo, aproximadamente en la misma posicin que la primera
esfera.
Podemos ver cuales serian estas tres imgenes clave en el siguiente esquema:
De modo que ya disponemos de la primera imagen clave. Ahora, introduciremos la segunda en
Pgina 15 de 77
el lugar aproximado que le correspondera. Para ello llevamos a cabo las siguientes
operaciones:
Insertamos una imagen clave en la capa 1, ms o menos sobre el fotograma 15.

Para ello nos situamos en la capa 1, en el fotograma 15. Pulsamos el botn derecho del
ratn y seleccionamos Insertar fotograma clave. Podemos observar como, una vez
realizada la operacin, un nuevo crculo aparece en ese fotograma, indicando la presencia
de otra imagen clave que ser idntica a la imagen de nuestro primer fotograma..
Modificamos este nuevo fotograma clave.

Para ello, situados en este fotograma, seleccionamos el objeto (u ocurrencia) y
modificamos su posicin y tamao. La posicin la modificamos empujndolo hacia arriba
con la tecla del cursor o bien pinchando y arrastrando, como ya hemos visto antes. Para
modificar el tamao, seleccionaremos la herramienta transformacin libre. Una vez hecho
esto, seleccionaremos la opcin escalar, que nos permitir bloquear las proporciones del
objeto y reduciremos el tamao de la esfera pinchando y arrastrando en uno de los
puntos de las esquinas de la marca que rodea la esfera.
La figura siguiente os ilustra la tarea de redimensionamiento y os da una idea del aspecto que
debe tener el fotograma una vez modificado:
A continuacin vamos a crear el tercer y ultimo fotograma clave, correspondiente al momento

en que la esfera esta a punto de completar el ciclo. Este fotograma debera en principio
parecerse al primero con la diferencia de que la esfera no ha llegado a completar el ciclo, sino
que esta de cera de conseguirlo. Realizaremos los siguientes pasos:

Insertamos un fotograma clave vaco en el fotograma 29 (Insertar>Fotograma clave

vaco)
Volvemos al fotograma 1 y lo copiamos (Edicin>copiar)
Volvemos al fotograma 29 y lo pegamos (Edicin>pegar)
El resultado es un fotograma idntico al 1 en el cual deberemos mover ligeramente la

ocurrencia a la izquierda, algo que haremos ms tarde.
Pgina 16 de 77
Mi primera animacin en Flash III

De modo que ya disponemos de las imgenes claves que definen la animacin. Lo que
necesitamos ahora es definir una trayectoria elptica que las una. Esta trayectoria ha de ser
definida en una capa especial llamada gua de movimiento. La gua de movimiento no es ms
que una capa que contiene una lnea sobre la cual podemos colocar nuestros objetos de manera
a que dicho objeto se mueva de una posicin a otra respectando la trayectoria definida por esta
lnea.
En nuestro caso, dado que lo que buscamos es una trayectoria cclica, para no confundir al
objeto definiremos dos lneas distintas, correspondientes a cada media vuelta. Si no tomsemos
esta precaucin, el objeto tendra dos posibles sentidos para llegar a una misma posicin.
Pasemos pues a definir estas lneas:
Creamos la gua de movimiento. Para ello, seleccionamos la capa 1 (o donde hayamos

creado nuestras imgenes clave) y hacemos Insertar>gua de movimiento. Constatamos
la aparicin de una nueva capa llamada Gua: Capa 1 (ver figura).
Seleccionamos el primer fotograma de esta nueva capa y dibujamos una elipse sin
relleno. Podemos servirnos de la herramienta valo utilizada para la creacin de la esfera,
pero esta vez no elegimos ningn color en la paleta de relleno (la ausencia de color viene
simbolizada por un cuadro blanco barrado en diagonal por una banda roja). El resultado
es una figura tal que esta:
Con la herramienta lazo, seleccionamos la mitad (izquierda o derecha, como prefieras) y

la cortamos (Edicin>cortar). El resultado es la obtencin de una semielipse.
Nos colocamos en el fotograma 15 de esta misma capa y lo convertimos en un fotograma
clave vaco (Insertar>fotograma clave vaco)
Pegamos la otra media elipse, que se quedar descolocada con respecto a la otra. Para
ajustar las semielipses podemos por supuesto hacerlo a ojo pivotando entre el fotograma
14 y el 15 hasta que las dos se solapen correctamente. Sin embargo, una opcin ms
interesante es la de usar le edicin simultanea de varios fotogramas. Esta opcin,
disponible en la lnea de tiempo (ver figura), nos permite la visualizacin y edicin

Pgina 17 de 77
simultanea de varios fotogramas. De este modo, podemos seleccionar una de las

semielipses y moverla por medio de los cursores hasta hacerla coincidir con la otra media.
Deseleccionaremos este modo una vez finalizada la operacin.
Mi primera animacin en Flash IV

Llegados a este punto, podemos comenzar a definir la primera media vuelta de la esfera. Para
generar el movimiento existente entre los fotogramas clave, hemos de crear lo que se
denomina una interpolacin de movimiento. Como ya hemos dicho, eso es algo que Flash
calcula automticamente, evitndonos la modificacin sistemtica de cada uno de lo fotogramas
intermedios que forman parte de la secuencia. Para crear la interpolacin de movimiento,
seleccionaremos los fotogramas de la capa 1y haremos:
Insertar>Crear interpolacin de movimiento.
Hecho esto, podremos constatar la aparicin en la capa 1de una flecha entre el fotograma 1 y
15 y otra entre el 15 y el 29. Si ahora nos colocamos en alguno de los fotogramas intermedios,
veremos que la imagen que contiene no es la misma que la de los fotogramas clave 1 o 15, sino
un intermedio de posicin y tamao entre ellas. Como puede verse, el objeto se desplazara
desde 1 hasta 15 y seguidamente de 15 a 29 siguiendo una lnea recta. Para obligarlo a adoptar
una trayectoria elptica como la definida en la gua de movimiento, tendremos que localizarnos
en cada una de las imgenes clave (1, 15 y 29) y , usando la herramienta flecha, colocaremos
el centro del objeto sobre la lnea de la elipse en cada una de las extremidades
correspondientes.
Podemos comprobar que el objeto esta bien colocado en la trayectoria si al intentar moverlo
fuera de la lnea, vuelve a colocarse automticamente sobre ella.
Llegados a este punto, ya solo nos queda ocultar la capa de la trayectoria. Esto puede hacerse
seleccionndola y pinchando sobre el punto que se encuentra bajo el ojo. El punto se convierte
en una cruz, que significa que la capa no es visible, aunque por supuesto sigue existiendo.
Pgina 18 de 77
Ya tenemos construida la animacin. Para probarla rpidamente podemos hacer:

Control>Probar escena
Veremos como hemos saltado a otra nueva ventana que nos muestra la escena creada, tal y
como la veramos en realidad. Esta ventana nos ofrece mltiples posibilidades que ya
abordaremos en otros captulos. No obstante, os aconsejamos el echar un vistazo al tipo de
opciones que propone.
El resultado, es una animacion como esta:
Si lo que
deseas es ver la animacin directamente en el navegador, es posible hacerlo seleccionando:
Archivo>Previsualizacion de la publicacin>HTML
Habiendo llegado a este punto, habris descubierto algunas de las muchas posibilidades que
Flash ofrece para la creacin de animaciones y, lo que es ms importante, os habis
familiarizado con el tipo de tcnicas y conceptos que emplea.
Colocar pelculas Flash en nuestras pginas

Colocar pelculas Flash en nuestros archivos html, asp, php, etc; podra ser una de las
principales preguntas que hacemos, cuando empezamos a conocer este grandioso programa, y
hacerlo es ms sencillo de lo que parece.
Antes debemos tener en cuenta que debemos seguir algunas reglas para que todo funcione
correctamente. Cuando creamos una pelcula con Flash, este genera un archivo con extensin
".fla", este nos permite crear la pelcula y modificarla. Otro archivo que se genera es el que
tiene la extensin ".swf", este se compone en el momento que probamos la pelcula, y nos
ayuda a ver el resultado de las creaciones y modificaciones de los archivos ".fla".
Finalmente podemos generar un archivo "html", que se compone cuando publicamos nuestras
pelculas y nos ayuda a tener una idea ms clara de cmo se veran en la web.
Pgina 19 de 77
1. Cuando tu pelcula Flash este terminada, guardada y probada (CTRL+Enter), debes

publicarla (CTRL + F12).
2. En el men principal de nuestro explorador, debemos hacer click en "Ver", despues click
en "Cdigo fuente", esto hace que se ejecute el "Bloc de notas", el cual nos mostrara el
cdigo html de las pelculas.
3. Dentro del contenido del Bloc de notas, debes buscar las etiquetas <object>...</object>,
copia el contenido que se encuentra entre las esas etiquetas (lgicamente debes incluir
esas etiquetas) y finalmente pgalo en tus archivos.
Eso es todo, pero recuerda que, de seguir este truco y si no editas la etiqueta <object>, debes
colocar los archivos .swf y .html en el mismo directorio del servidor o disco duro de tu
computadora, de lo contrario las pelculas Flash no se cargarn.
Nota: Otra manera muy sencilla para insertar una animacin Flash en una pgina web es utilizar el
programa Dreamweaver [http://www.desarrolloweb.com/articulos/332.php], tambin desarrollado por la
empresa Macromedia. En dicho programa existe un botn, en la ventana de objetos comunes, que nos
permite seleccionar el archivo Flash (Con extensin .swf) que deseamos insertar en la pgina web.
No es necesario que subas a tu servidor el archivo .fla, ya que el .swf y .html no lo necesitarn.
Cmo hacer botones en Flash

En este captulo aprenderemos a crear botones y cmo enlazarlos con nuestros archivos o con
otras paginas web, que no estn en nuestro servidor.
Flash, nos permite crear botones personalizados, de manera muy rpida; a la vez nos ayuda a
darle mas vida a nuestras pginas web; en pocas palabras, nos ayuda a hacer ms atractivo
nuestro sitio y lgicamente eso es lo que queremos para aumentar el nmero de visitas a
nuestro website.
Por medio de lenguajes de programacin (por ejemplo Javascript), tambin podramos crear
botones, pero sera un poco ms complicado; adems no podramos crear exactamente los
mismos efectos que podemos hacer con Flash.
Empecemos:
1- Primero crearemos un nuevo smbolo, haciendo la siguiente combinacin de teclas: ALT+F8.
Aparecer el siguiente cuadro:
2- En Nombre (Name), escribe "botn 1", en Comportamiento (Behavior) selecciona la opcin

Botn (Button), finalmente haz click en Aceptar (OK).
Automticamente, seremos enviado desde la Escena 1 al escenario del smbolo "botn 1"; ah
es donde crearemos un botn que ser incluido en nuestra biblioteca.
El escenario nicamente para la creacin de botones, ser parecido a la siguiente imagen:
Pgina 20 de 77
Mira hacia la lnea del tiempo (Timeline), como puedes notarlo es diferente a la lnea del tiempo
de la Escena 1.
La lnea del tiempo, del escenario para crear botones es parecida a la siguiente imagen:
Expliquemos el grfico anterior:

Debemos entender que Reposo, Sobre, Presionado y Zona activa son los cuatro estados de un
botn. Veamos a continuacin, qu representa cada estado.
Reposo: es cuando el mouse no est colocado sobre nuestro botn o no se ha hecho click sobre
l.
Sobre: es cuando el mouse est colocado sobre el botn, pero an no se ha hecho click sobre
l.
Presionado: lgicamente, es cuando haces click sobre el botn.
Zona Activa: su mismo nombre lo indica, es cuando el botn est activo.
Continuemos con la creacin de nuestro "botn 1".
La cabeza lectora, en la lnea del tiempo tiene que estar sealando el estado de Reposo.
4- Haz click sobre la Herramienta de Rectngulo (Rectangle Tool), que se encuentra en el Panel
de Herramientas.
5- Dibuja un rectngulo en el centro del rea de trabajo, y ponle el color azul.
6- Despus presiona la tecla F6; sto har que la cabeza lectora en la lnea del tiempo pase al
estado Sobre.
Pgina 21 de 77
Como podrs notarlo, el botn se copia, as que no necesitars hacer un nuevo dibujo.
7- An estamos en el estado Sobre, si no tienes seleccionado el botn, hazlo (con la
Herramienta Flecha y haz doble click sobre nuestro dibujo), luego dirgete a Color de Relleno
que se encuentra en la seccin colores del Panel de Herramientas, y escoge el color rojo, como
se muestra a continuacin:
8- Despus presiona nuevamente la tecla F6, para que la cabeza lectora pase al estado
Presionado, y cambia el color de relleno de la misma forma que lo hicimos en el paso 7; y
escoge un color verde. Finalmente presiona por ultima vez F6 para pasar al estado Zona activa,
sto har que se copie el botn. Para este ltimo estado, no es realmente necesario cambiar el
color de fondo.
Con los colores que hemos aplicado, haremos que el botn cambie de color, cuando se lleven a
cabo los Estados de los botones anteriormente descritos.
Nuestro botn ha sido creado, as que puedes volver a la Escena 1, abre la biblioteca y vers
que ah esta el smbolo llamado "botn 1", podrs arrastrarlo al escenario las veces que quieras
para hacer varias copias de l.
Toma la Herramienta de Texto (A), y escribe lo que desees, despus coloca el texto sobre el
botn creado; para probar la pelcula haz la tradicional combinacin de teclas CTRL + Enter. Si
despus quieres ver la pelcula en tu explorador de internet, nicamente presiona las teclas
CTRL + F12.
Podemos
ver un ejemplo del botn creado siguiendo estos pasos
[http://www.desarrolloweb.com/articulos/ejemplos/flash/boton.html].
Enlazar pginas web por medio de botones Flash

Si creamos botones, lgicamente es por que queremos enlazarlos con otras pginas web en
nuestro servidor, o pginas web en otros servidores. Para este captulo necesitaremos el botn
que creamos en el captulo anterior.
Para hacer los enlaces o links, debemos utilizar el panel de Acciones de Flash. Para poder
visualizar dicho panel, dirgete al men principal y haz click en Ventana > Acciones.
Aparecer la siguiente imagen:
Pgina 22 de 77
El panel de Acciones, nos servir para trabajar con ActionScript.

Qu es ActionScript?, es el lenguaje de creacin de scripts de Flash. Puede utilizar ActionScript
para controlar objetos en las pelculas de Flash con el fin de crear elementos interactivos y de
navegacin, y para ampliar Flash con el fin de crear pelculas altamente interactivas y
aplicaciones Web. En otras palabras, ActionScript es el lenguaje de programacin utilizado por
Flash.
Comencemos a hacer el enlace.
1- Desde la biblioteca de Flash, arrastramos a la Escena 1 el botn creado en el captulo
anterior. Mantn el botn seleccionado, si no lo est, haz click sobre l con la herramienta
flecha.
2- En el men principal, haz click en Ventana > Acciones.
3- En el panel de Acciones, haz click en la palabra Acciones (Actions), automticamente se
desplegar una especie de submen en donde debes hacer click en Explorador
(Browser/Network), despus haz doble click en getURL.
getURL es la accin que nos permitir navegar entre pginas web, tambin permite pasar
variables a otras aplicaciones en una URL definida. Un ejemplo de URL es
http://www.desarrolloweb.com
4- Como habrs notado, al hacer doble click sobre getURL, arriba del cuadro que est a la
derecha del panel de Acciones, aparecen los siguientes campos de texto:
URL: aqu especificars la direccin a la cual se enlazar el botn.
Si vas a hacer un enlace con una pgina web dentro de tu servidor tienes que escribir el
nombre del archivo, por ejemplo: nombre_de_archivo.html
Si vas a hacer un enlace con una pgina web que no est dentro de tu servidor tienes que
escribir http://, mas el nombre del archivo, por ejemplo: http://www.desarrolloweb.com
Ventana: ste es opcional (si quieres puedes dejarlo vaco). Especifica de qu forma ser
cargado el documento o fotograma. Las formas en que se cargarn son:
_self: especifica el fotograma actual de la ventana activa.
_blank: indica que la pgina se abrir o cargar en una nueva ventana..
Pgina 23 de 77
_parent: especifica el elemento principal del fotograma actual.

_top: especifica el fotograma de nivel superior de la ventana actual.
Variables: POST y GET, especifica la manera en que se enviar la informacin etc, se usa para
formularios, as que en nuestro caso no son necesarias las variables; as que selecciona No
enviar.
Un ejemplo de cmo tendra que quedar el script en el cuadro derecho de el panel de Acciones
es:
on (release) {
getURL("http://www.desarrolloweb.com", "_blank");
}
(si tienes problemas en seguir las instrucciones, simplemente copia el cdigo anterior y pgalo
en el panel de Acciones)
Puedes ver que la primera linea del script aparece escrito: "on (release)". Es una accin
utilizada en los botones, que indica que la accin que aparece entre "{ }" se ejecutar
inmediatamente despus de hacer click sobre el botn, o sea, al liberar el botn del mouse.
Podemos ver un ejemplo del botn creado [http://www.desarrolloweb.com/articulos/ejemplos/flash/boton.html]
siguiendo estos pasos.
Enlaces email flash

Por medio de botones hechos en Flash, podemos ejecutar nuestros programas de envo de
correos electrnicos (Outlook por ejemplo), para enviar mensajes .
(Tus programas de envo de correos electrnicos tienen que estar configurados e instalados
correctamente)
Cmo hacer sto?
1- Creamos un botn.
2- Click derecho sobre el botn > Acciones
3- Copia las siguientes acciones y pgalas en el panel de Acciones:
on (release) {
getURL("mailto:tu_e-mail@dominio.com");
}
Expliquemos lo anterior:

on (release), es una accin utilizada nicamente para botones, e indica que la accin se
ejecutar inmediatamente despus de haber presionado y liberado el botn del ratn.
getURL: Accin; carga un documento de una URL especfica en una ventana o pasa
variables a otra aplicacin en una URL definida.
Mailto: mtodo utilizado para enviar correos electrnicos.
Prueba tu pelcula (CTRL+Enter). Despus puedes publicarla (en men principal Archivo >
Publicar).
El resultado
se ve en este enlace. [http://www.desarrolloweb.com/articulos/ejemplos/flash/botonemail/boton.html]
Pgina 24 de 77
Interpolacin de Formas
La interpolacin de formas, consiste en hacer que un objeto en el escenario de Flash cambie su
forma fsica. Por ejemplo, podemos hacer que un crculo se transforme en un rectngulo.
Para realizar una interpolacin de formas, tenemos que hacer uso de "Fotogramas clave
vacos", ya que ste nos permite crear un vaco en la lnea del tiempo, el cual nos permitir
crear otras formas u objetos.
Para este captulo, haremos un ejemplo simple, comencemos:
1- Arriba en la parte izquierda del escenario, dibuja 3 rectngulos con la herramienta
"Rectngulo"(Rectagle tool).
En la lnea del tiempo, podrs observar que estamos haciendo uso del fotograma 1, de la capa
1.
2- Haz click en el fotograma 4, despus presiona la tecla F6, para crear fotogramas claves.
3- Despus haz click en el fotograma 17 y presiona la tecla F7 para crear un fotograma clave
vaco.
Observa la lnea del tiempo, y vers que la cabeza lectora est sobre un fotograma que no
contiene nada; es exactamente en ese fotograma vaco en donde crearemos la imagen en la
que se transformarn los rectngulos anteriormente dibujados.
4- Click en la "Herramienta de texto" del panel de herramientas y en la parte derecha de abajo
del escenario, escribe la palabra "WEB", despus haz click en la "Herramienta Flecha", con el
texto seleccionado, haz la siguiente combinacin de teclas: CTRL + B, dos veces.
La combinacin de teclas CTRL + B, har que el texto se separe, para que Flash interprete cada
letra como una imagen individual, de lo contrario Flash interpretar a la palabra "WEB" como
una sla imagen y la interpolacin de formas no funcionar.
5- Ahora dirgete al fotograma 30 y presiona F6 para alargar el tiempo de duracin de los
objetos en la lnea del tiempo.
6- Regresa al fotograma 4, click sobre l, y ve hacia el panel de "Propiedades" que
normalmente est ubicado en la parte de abajo del entorno de Flash, (si no lo puedes visualizar
ve al men principal, click en Ventana>Propiedades); en el mencionado panel existe una opcin
llamada "Interpolacin"(Tween), puedes desplegar el combo de opciones y elige la opcin
"Forma"(shape).
Puedes ver que en la lnea del tiempo de la capa 1, aparece el color verde junto con una flecha
que debe extenderse desde el fotograma 4 hasta el 17; es ah exactamente donde se realiza la
interpolacin de formas; como muestra la siguiente imagen:
Ahora puedes probar la pelcula (CTRL + Enter)
Pgina 25 de 77
Un ejemplo parecido de nuestra interpolacin de formas es:
Shape Hint. Interpolacin ordenada de formas
En esta captulo nos ocupamos del Shape Tweening para controlar y

ordenar la interpolacin de las formas. Primero preparamos la
interpolacin a modificar: transformamos un rectngulo a un
tringulo.
En el primer fotograma dibujamos un rectngulo. Copiamos su base
Edicin>Copiar. Insertamos un fotograma clave vacio Insertar>
Fotograma Clave Vaco en el fotograma 25, y pegamos
Insertar>Pegar en sitio (paste in place). Para ver el original
rectngulo pulsamos el botn Onion Skin
tringulo.
y completamos el
Nos colocamos en alguno de los fotogramas intermedios. En el panel

de propiedades en la opcin Interpolacin (Tween) desplegamos el
combo de opciones y elegimos la opcin Forma (Shape). Probamos la
pelicula (Ctrl+Enter)
Podemos ver que la tranformacin es bastante

Queremos que la base siempre quede en su sitio.
Pgina 26 de 77
desordenada.
En
el
primer
fotograma
hacemos
click
en
el
menu
Modify>Shape>Add Shape Hint. Desplazamos el punto rojo al ngulo
iquierdo del rectngulo y en el fotograma 25 al ngulo izquierdo del
tringulo.
Aadimos otro Shape Hint al ngulo derecho de las formas.
Probamos la pelicula (Ctrl+Enter).
Podemos ver que la transformacin ya es mucho ms ordenada.

Aadimos otro Shape Hint a la mitad de la base de las formas y
probamos la pelicula (Ctrl+Enter).
Pgina 27 de 77
Interpolaciones de smbolos
En este prrafo aprenderemos a crear interpolaciones con objetos complejos como grupos y
smbolos.
Primero, creamos un smbolo: Insertar / Smbolo Nuevo. Damos un nombre: 'hello' y elegimos
el botn de opcin "Grafica". Con el "type tool"
escribimos HELLO. En el panel "Propiedades"
formateamos. Regresamos a la escena y hacemos click en el "Sceen1" debajo de la lnea de
tiempo. Hacemos click en el men Ventana/Biblioteca. En la ventana que aparece cogemos el
smbolo 'hello' y lo arrastramos al escenario.
Movemos el smbolo a la parte de arriba del escenario, ms o menos al centro. En el panel de
"Propiedades" en la opcin "Color" desplegamos el combo de opciones y elegimos la opcin
"Alpha", y damos un valor de 0%. Con esto conseguimos que el texto sea transparente.
Insertamos un fotograma clave Insertar> Fotograma Clave en el fotograma 25. Aqu
seleccionamos el smbolo. En el panel de "Propiedades" cambiamos el valor "Alpha" a 100%
para que sea opaco. Desplazamos el smbolo al fondo del escenario. Con el botn "Free
transform"
alargamos el texto. As hemos definido la situacin inicial y final de la
interpolacin. Hace falta crear los fotogramas intermedios. Hacemos click en la lnea del tiempo.
En el panel de "Propiedades" en la opcin "Interpolacin"(Tween) desplegamos el combo de
opciones y elegimos la opcin "Movimento" (Motion). Probamos la pelcula: Ctrl+Enter. Todo
funciona perfectamente.
Pgina 28 de 77
Retornamos al rea del desarrollo para ajustar otro parmetro. En el panel de "Propiedades" en
la casilla "Ease" podemos ajustar la aceleracin de la animacin. Elegimos -100: as la velocidad
aumenta durante la animacin. Probamos la pelcula : Ctrl+Enter
Efecto de mscaras con Flash

Las Mscaras es un efecto utilizado frecuentemente en pginas web que contienen pelculas
Flash.
Dicho efecto consiste en ocultar objetos que se encuentren en el escenario de Flash, y
mostrarlos poco a poco, por algn objeto que tenga una interpolacin de movimiento o
cualquier otro efecto que sea producto de tu imaginacin. La mscara no es solamente para
ocultar objetos completamente, un ejemplo podra ser mostrar los objetos color gris y que un
objeto con interpolacin de movimiento los muestre de otro color cuando pase sobre ellos.
Para tener todo ms claro, hagamos un ejemplo fcil:
Pgina 29 de 77
1- En Flash, en la escena 1, toma la herramienta de texto (A) y escribe lo que desees, utiliza un
tamao de fuente grande para que el texto abarque gran parte del escenario...
2- Dirgete al fotograma (frame) numero 60 de la "capa 1", haz un click sobre l, y presiona F6,
para que el tiempo de duracin de la pelcula sea ms prolongado.
3- Crea otra capa (capa 2), despus toma la "herramienta valo" y dibuja un valo:-)
4- Haz click derecho sobre el nombre de la "capa 2" y en el men que se desplegar, selecciona
la opcin "Mscara" (Mask)
5- Ahora dirgete al fotograma nmero 1 de la "capa 2" (es donde est el valo), haz click
derecho, y despus haz click en la opcin "Crear interpolacin de movimiento".
6- Finalmente haz click en el fotograma nmero 60 de la "capa 2" y presiona la tecla F6 y
mueve el valo como t quieras, eres un Flasher, as que debes tener mucha imaginacin.
Nuestra lnea del tiempo tendra que ser parecida a la siguiente imagen:
Ahora prueba la pelcula

Click para ver un ejemplo [http://www.desarrolloweb.com/articulos/ejemplos/flash/ejemplo_mascara.html]
Onion skin (piel de cebolla)

En este captulo nos ocupamos de la animacin "fotograma por fotograma".
Para realizar este tipo de animacin hemos de modificar manualmente los smbolos. Por
ejemplo simularemos el movimiento de una brocha. Creamos un smbolo de brocha y la
colocamos en el nivel 1. Creamos un smbolo de raya y lo colocamos en el nivel 2. En ambos
niveles seleccionamos el fotograma 4 y pulsando F6 insertamos 2 fotogramas claves. En el nivel
de la brocha, movemos la brocha. En el nivel de la raya con la "Trasformacin libre" alargamos
la raya. Insertamos fotogramas claves en el fotograma 7. (F6).
Ahora queremos que el movimiento sea fluido. Cmo lo hacemos? Pulsamos el botn "Onion
skin" en la barra de estado de la lnea de tiempo. Cogemos el borde izquierdo del "Onion skin" y
movemos hasta el primer fotograma. Esto nos permite ver los fotogramas anteriores, que
aparecen semi-transparentes. Insertamos fotogramas claves en el fotograma 10. Movemos la
brocha, y alargamos la raya.
Probamos la pelcula: Ctrl+Enter
Pgina 30 de 77
Importar bitmap y usar como relleno

Del menu File elegimos Import, y elegimos el archivo Pajaro.bmp. La imagen aparece en el
escenario y est en el Library (menu Window/Library o F11).
La imagen se comporta como un smbolo, y podemos reutilizarla varias veces en la pelcula sin
que el tamao del archivo crezca excesivamente.
Todos los bitmaps insertados estn en el panel Color Mixer (menu Window/ Color Mixer o
Shift+F9) y pueden ser utilizados como relleno.
Cmo se hace?
Abrimos el panel de los colores (menu Window/ Color Mixer o Shift+F9). En el combo de
opciones elegimos Bitmap. En el cuadro debajo aparecen todos los bitmaps que podemos
utilizar. Elegimos Pajaro.bmp, y con el Rectangle Tool
rectngulo est formado por pequeos pjaros.
dibujamos un rectngulo. El
Pgina 31 de 77
En el Tool Box panel pulsamos Fill Transform

y hacemos click dentro del rectngulo. Uno de
los pjaros queda seleccionado. Podemos cambiar su tamao o girarlo pinchando con el ratn
en smbolo correspondiente. La totalidad de los pjaros que forman el relleno quedan
modificados de la misma forma.
Modificar Bitmap
Modificar bitmap
El Flash no es una programa para retocar fotografias, y por eso no es tan fcil modificar las
imgenes importadas. Se pueden modificar parcialmente a travs de la divisin o transformar a
diseos vectoriales.
- Primero trataremos la divisin:
En el menu File/Import seleccionamos el archivo Pajaro.bmp.
Seleccionamos la imagen con la flecha negra y elegimos el menu Modify/Break Apart. La

imagen seleccionada queda marcada con puntos. A partir de este momento ya es posible
modificar por partes la imagen con los instrumentos de diseo.
Por ejemplo seleccionamos el Lasso Tool
y despus el Magic Wand
y hacemos click en
el fondo del imagen. Con esto conseguimos que slo el fondo de la imgen quede seleccionado
Pgina 32 de 77
(marcado con puntos). Ahora podemos cambiar el color, o editar cualquier parmetro del fondo
sin afectar a la imgen en primer plano. Podemos ver el resultado en la siguiente imgen:
Cmo podemos ver en la imgen, la capacidad de seleccionar del Flash no es todo lo perfecta
que sera de desear. An as, puede ser til en muchos casos.
Otra manera de manejar los bitmaps es convertirlos en reas vectoriales.
Para probar esta facilidad, eliminamos la imagen que tenemos en el escenario y copiamos a l,
arrastrando desde la ventana de librera, la imgen del pjaro original. Como podis ver, la
imagen en la librera est intacta y no se ha visto afectada por las modificaciones que hicimos
con su copia en el escenario. Seleccionamos la imagen con la flecha negra y elegimos el menu:
Modify/Trace Bitmap. En la ventana que aparece damos los siguientes valores:
ColorTreshold: 50. Esto significa que si la diferencia entre los valores RGB de 2 pixeles es
menor de 50, entonces el color de los 2 pixeles se considera igual.
Minimum Area: 5
Dejamos invariable los valores Curve fit= Normal, y Corner Tresholder=Normal.
La imagen del pjaro ya es un diseo vectorial, y podemos editarlo como tal.
Color Treshold=50, Minimum Area=5
Pgina 33 de 77
Distribute to Layers
En Flash, en 1 lnea de tiempo se puede animar solamente 1 objeto. Pero si quisieramos que un
texto, por ejemplo, explotara cmo debemos hacerlo?
En el versin MX de Flash tenemos la respuesta.

con el Type Tool escribimos el texto 'Ciao bello'.

Seleccionamos con la flecha negra y elegimos el men : Modify / Break Apart. As todava
no podemos animarla porque todas las letras estn en el mismo nivel. Para animarlas
tendran que estar en niveles diferentes.
mientras la palabra est seleccionada elegimos el men: Modify / Distribute To Layers.
Flash automticamente crea para cada letra un nivel diferente.
Ahora borramos la linea de tiempo "layer 1" que queda vaca.
En todas las lineas de tiempo del fotograma 10 insertamos un fotograma clave.
Seleccinamos el fotograma 10. Vemos en el escenario las letras del texto "Ciao bello".
Distribuimos las letras por el el escenario, procurando ponerlas cerca del borde.
Ahora nos movemos a un fotograma intermedio entre el 1 y el 10, selecionando todas las
lineas de tiempo. En el panel Property, en la opcin Tween desplegamos el combo de
opciones y elegimos la opcin Motion.
Esto crea, en todos los fotogramas intermedios entre el 1 y el 10, las imgenes
necesarias para dar sensacin de movimiento progresivo entre el texto legible que
tenemos en el 1 y las letras distribuidas que tenemos en el 10.
Probamos la pelcula: Ctrl+Enter
Pgina 34 de 77
Esta es lo que queramos lograr: un texto donde todas las letras estn animadas.
Hemos probado el Distribute to layers en un texto. Es posible usar este men en todos los
objetos complejos que puedan ser divididos en objetos individuales.
Insertar video en Flash

Importar vdeo
Una de los novedades de Flash MX es la mejora en la importacin y gestin de las secuencias
de video (video-clip). Flash es capaz de manejar los siguientes archivos:
-
.avi
Quick Time
.mpeg
Digital video
Es necesario que en el ordenador tenga instalado el Quick Time 4 o Director 7 (o versiones

posteriores).
Vamos a crear un smbolo, y dentro de este smbolo insertamos una secuencia de video.
Elegimos el men Insert / Create New Symbol (name=callejon, behavior=Movie Clip). Del
men File elegimos Import y elegimos calle.avi. Flash presenta una nueva ventana de
dilogo donde podemos ajustar la importacin del video.
Flash comprime las secuencias de video con el codex 'Sorenson Spark' lo que permite
reducir notablemente el tamao del archivo. Los parmetros Quality, Keyframe y Scale
permiten ajustar este proceso.
Dejamos 40 el valor de Quality, y 24 el de Keyframe. Este parmetro indica la serie de

fotogramas clave que sern insertados en la secuencia. Ponemos Scale = 70% para
reducir el tamao del vdeo. La importacin puede tardar varios minutos - dependiendo
del tamao del vdeo. Antes de insertar definitivamente la secuencia de vdeo, Flash nos
informa que este necesita por su reproduccin total un numero de fotogramas superior al
que tenemos actualmente. Por lo tanto es necesario aumentar el numero de fotogramas
(en esto ejemplo: 84).
El procedimiento esta completo.
Ahora vamos a ver cmo podemos aplicar las modificaciones de smbolos en la secuencia de
vdeo.
Regresamos al escenario. Insertamos un fotograma clave en la posicin 84.
Regresamos a la fotograma 1. Seleccionamos el Movie Clip, y lo movemos al rincn

izquierdo, y con el Free Transform
lo giramos un poco. En el Properties panel abrimos
el men desplegable de Color y elegimos color = Alpha. Le damos un valor del 0%.
Creamos una interpolacin (haciendo click en un fotograma intermedio, y en el Properties

panel, men desplegable "Tween", elegimos la opcin "Motion"). Haciendo click en el
fotograma 84 abrimos el panel Actions (menu Window / Actions o F9), y escribimos stop
(). Haciendo doble-click en el video, y haciendo click en el fotograma 84 abrimos el panel
Actions (menu Window / Actions o F9), y escribimos stop(). As no se repite infinitamente
la pelcula.
Probamos la pelcula (men Control / Test Movie o Ctrl+Enter)
Pgina 35 de 77
Sistema de noticias con Flash y Actionscript

Si algo echar de menos el da que mis obligaciones no me permitan publicar, sin duda, ser el
tener la oportunidad de dar a conocer el grandsimo talento y conocimientos de personas que,
an siendo muy conocidas (como en este caso), en After-Hours [http://www.after-hours.org/foro] por su
entrega y dedicacin, adems de otros por donde habitualmente suele moverse, por razones
obvias, su trabajo no siempre puede llegar a todo el mundo como sera deseable.
Me gustara presentarles a
dondiegote [http://www.thelirios.com/],
moderador de los foros de AH

un amigo que segn reza en su web [http://www.thelirios.com/], se
presenta de esta forma... TRABAJO MUCHO Y DUERMO POCO. HASTA QUE TENGA TIEMPO
LIBRE, QUE AL MENOS ALGO MIO DESCANSE
[http://www.after-hours.org/foro],
Para que esta frase tenga sentido para todos vosotros, lo mejor es que veamos una de sus
ltimas aportaciones.
Se plante en el foro
Como se hizo [http://www.after-hours.org/foro/viewforum.php?
la seccin noticias de http://www.framemedia.co.uk/. En la

web, que me parece muy buena, llama la atencin sobre todo por su sencillez y por este
sistema de noticias. Es cierto que esta forma de presentacin recuerda mucho, la verdad es que
muchsimo a http://www.carldekeyzer.com/ de los grandes http://www.group94.com/.
f=5&sid=cf3ca173651c6c9235aa6b58d7bc83a4]
El planteamiento de lo que se va a hacer es sencillo.

Divide los elementos que va a usar en 2 grupos diferentes, ttulos y textos. Tiene en el
escenario 2 mscaras, una para cada grupo.
La idea es crear 2 grandes MovieClips que contengan por un lado todos los ttulos, y
enmascararlos dentro de su espacio, y por otro lado los textos y enmascararlos tambin.
Los datos los pone en 2 arrays diferentes, con la idea de poder recogerlos desde un xml o txt.
hay un ejemplo de cmo aadirle
En el post completo [http://www.after-hours.org/foro/viewtopic.php?t=3069]
Pgina 36 de 77
un xml creado por kaax

El resto es relativamente sencillo y est explicado dentro del script. Usa un prototipo easing
para hacer los movimientos y quizs lo ms llamativo es la forma de controlar y mandar estos
movimientos. Utiliza como referencia la noticia que se quiere mostrar, y recorre en dos bucles
diferentes las noticias de arriba y las de abajo, situndolas en funcin de la principal.
Como curiosidad podis observar que en framemedia no coincide la noticia donde pinchas con la
que se ve, sino la anterior y en este caso, el ha visto ms lgico hacerlo sobre la que se ha
picado.
Ahora lo importante, el fla:
http://www.thelirios.com/ah_news_framemedia/news_framemedia.zip
Y el cdigo:
Stage.scaleMode = "noScale";
prof = 10; // Sigo marcandome la profundidad, no me acostumbro al getNextHighestDepth
// Creo 2 arrays, uno con los ttulos y otro con los textos.
// La idea es poder recogerlos desde un xml o un txt
News = new Array("noticia 1", "noticia 2", "noticia 3", "noticia 4", "noticia 5", "noticia 6", "noticia 7");
Noticias = new Array("Titulo noticia 1\n\nEste es el texto de la noticia 1", "Titulo noticia 2\n\nEste es el texto de la
noticia 2", "Titulo noticia 3\n\nEste es el texto de la noticia 3", "Titulo noticia 4\n\nEste es el texto de la noticia 4",
"Titulo noticia 5\n\nEste es el texto de la noticia 5", "Titulo noticia 6\n\nEste es el texto de la noticia 6", "Titulo noticia 7
\n\nEste es el texto de la noticia 7");
// Hago un prototipillo para hacerme los easings
// lo uso sobre todo para _y pero le paso "prop" para usarlo en _scales
MovieClip.prototype.easing = function(prop, fin, frec) {
this.onEnterFrame = function() {
this[prop] += (fin - this[prop])*frec;
if(Math.abs(this[prop] - fin) < .5) {
this[prop] = fin;
delete this.onEnterFrame;
}
}
}
// Creo un clip "mnu" que sern los botones con los ttulos
this.createEmptyMovieClip("mnu", prof++);
// Lo situo donde su mscara. En la escena solo tengo 2 mscaras ms el fondo, lo dems lo attacheo
this.mnu._x = msk._x;
this.mnu._y = msk._y;
// lo enmascaro
this.mnu.setMask(msk);
// Creo un clip "noticias" que sern los textos de las noticias
this.createEmptyMovieClip("noticias", prof++);
// lo coloco
this.noticias._x = msk2._x;
this.noticias._y = msk2._y;
// lo enmascaro
this.noticias.setMask(msk2);
// Empieza la juerga ...
for(n=0; n < News.length; n++) {
// TITULOS
// atacheo "new"
this.mnu.attachMovie("new", "new"+n, prof++);
// lo doy el texto correspondiente
this.mnu["new"+n].txt.text = News[n].toUpperCase();
// Defino una variable interna del clip new+n llamada yFin
// en yFin almaceno el destino _y del clip y los dems se colocan en relacin a los yFines
this.mnu["new"+n].yFin = this.mnu["new"+(n-1)].yFin + this.mnu["new"+(n-1)]._height;
// Si yFin devuelve NaN estoy en el primero, luego lo coloco donde quiero
if(isNaN(this.mnu["new"+n].yFin)){ this.mnu["new"+n].yFin = msk2._y + msk2._height - msk._y - this.mnu
["new"+n]._height};
// le mando hacer el easing y que vaya a su sitio
Pgina 37 de 77
this.mnu["new"+n].easing("_y", this.mnu["new"+n].yFin, .5);

// NOTICIAS
// attacheo "textos"
this.noticias.attachMovie("textos", "textos"+n, prof++);
// les doy su texto
this.noticias["textos"+n].txt.text = Noticias[n];
// Defino yFin
this.noticias["textos"+n].yFin = this.noticias["textos"+(n-1)].yFin + this.noticias["textos"+(n-1)]._height;
// Coloco el primero
if(isNaN(this.noticias["textos"+n].yFin)){ this.noticias["textos"+n].yFin = 0};
// Les mando a su sitio
this.noticias["textos"+n].easing("_y", this.noticias["textos"+n].yFin, 5);
// ACCIONES BOTONES
// el rollOver y el rollOut, sencillitos
this.mnu["new"+n].rOver._alpha = 0;
this.mnu["new"+n].onRollOver = function() {
this.txt.textColor = 0xffffff;
this.rOver._yscale = 0;
this.rOver._alpha = 100;
this.rOver.easing("_yscale", 100, 6);
}
this.mnu["new"+n].onRollOut = this.mnu["new"+n].onReleaseOutside = function() {
this.txt.textColor = 0x333333;
this.rOver._yscale = 100;
this.rOver.easing("_alpha", 0, 15);
}
// onRelease
this.mnu["new"+n].onRelease = function() {
// La posicin que van a tomar el clip de los textos de las noticias.
// Muevo el clip "noticias" entero, pero tomo como referencia el alto de un texto
var newpos = this._parent._parent.msk2._y - (this._parent._parent.noticias.textos1._height*substring(this._name,
4));
// le mando a su sitio
this._parent._parent.noticias.easing("_y", newpos, 15);
// Llamo a la funcin ColocaTitulos para colocarme los botoncillos
ColocaTitulos(substring(this._name, 4));
}
}
// Para situar los botones cuando click en alguno
function ColocaTitulos(actual) {
var actual = Number(actual); // transformo el String actual en nmero para operar con l
// Defino yFin en el botn clickado, y le mando a su sitio (justo debajo de las noticias)
this.mnu["new"+actual].laY = msk2._y - msk._y;
this.mnu["new"+actual].easing("_y", this.mnu["new"+actual].laY, 5);
// Defino y coloco los botones por encima del clickado, tomandolo como referencia
for(n = (actual-1); n>=0; n--) {
this.mnu["new"+n].laY = this.mnu["new"+(n+1)].laY - this.mnu["new"+n]._height;
this.mnu["new"+n].easing("_y", this.mnu["new"+n].laY, 5);
}
// Defino y coloco el boton por debajo del clickado, tomando como referencia la mscara de los textos
this.mnu["new"+(actual+1)].laY = msk2._y + msk2._height - msk._y;
this.mnu["new"+(actual+1)].easing("_y", this.mnu["new"+(actual+1)].laY, 5);
// Defino y coloco los botones por debajo del anterior, tomandolo como referencia
for(n = actual+2; n < News.length; n++) {
this.mnu["new"+n].laY = this.mnu["new"+(n-1)].laY + this.mnu["new"+(n-1)]._height;
this.mnu["new"+n].easing("_y", this.mnu["new"+n].laY, 5);
}
}
Se ha subido un ejemplo para verlo on-line, si queris, podis verlo en aqu

http://www.thelirios.com/ah_news_framemedia
Vestir a una mueca en Flash

La idea y las imgenes las saqu de aqu:
http://www.teacuerdas.com/nostalgia-juguetes-recortables-mini.htm
Pgina 38 de 77
y la us en la siguiente muestra que quiero que la vean para tener una idea clara de lo que
pretendemos hacer.
Una tiendita que se llama "Sol" [http://www.delphi.todouy.com/flash/sol/]
En esta tiendita hay en FLASH un probador de ropa que es lo que haremos aqu.
El resto es PHP y una base de datos MySql.
Comencemos en forma ordenada:
1) Tener una idea clara de lo que queremos hacer. En este caso lo mejor es entrar a la tiendita
"Sol" y jugar un poco en vestir y desvestir distintas ropas y botas a la mueca. Vern que la
accin siempre est en los botones que son las ropitas de la vidriera. En la vidriera, clic sobre la
ropita para vestir y el mismo clic para desvestir. Resumiendo el funcionamiento de la aplicacin,
con ejemplos:

Al abrir, la mueca solo en malla y las ropitas (botones) en la vidriera.

Clic en botn(enterito amarillo), vestimos con el enterito amarillo.
Clic en botn(chaqueta de abrigo), agregamos abrigo a la mueca.
Clic en botn(enterito amarillo), la mueca queda solo con la chaqueta
2) Crear en nuestra computadora una carpeta nueva que podemos llamar probador.
3) Conseguir las imgenes necesarias. Como nuestro propsito es Flash y no el dominio del
tratamiento de imgenes, se las doy prontas. Pero cualquier cosa que quieran preguntar a este
respecto, contestar por email con mucho gusto. En la pgina
http://www.delphi.todouy.com/flash/probador/imagenes.html encontrarn todas las que necesitan.
Con el botn derecho del ratn, hacen clic sobre cada imagen y "Guardar imagen como.."
Guardan en la Carpeta que crearon el fondo.png y los nueve futuros botoncitos b1.png,
b2.png,...b9.png
y los nueve futuros clips c1.png, c2.png,.... c3.png . Si cambian la extensin .png por .bmp
o .jpg las imgenes saldrn con el fondo celeste y no transparente como necesitamos.
4) Abrimos el Flash y creamos la aplicacin: Archivo->, Nuevo->, Documento de Flash.
Nuestra aplicacin tendr un solo frame(fotograma) y en la lnea del tiempo dos capas.
Por ahora tenemos una sola capa que nombraremos fondo.
Importamos la imagen del fondo desde la misma Carpeta.
Archivo-> Importar-> Importar a biblioteca. Y ya tenemos la imagen en biblioteca.
Si la biblioteca est cerrada, la abrimos con Control L y traemos el fondo.png a escena.
En propiedades vemos que las dimensiones de esa imagen son 402 x 500. Si la imagen va a
formar parte de
otra pgina como en el caso de la "tiendita Sol" el escenario debe ser dimensionado 402 x 500
tal cual el fondo.
Y ajustadas las posiciones del fondo.png en el panel Propiedades. A cero tanto "x" como "y".
Pgina 39 de 77
Grabamos el fla que tambin podemos llamar probador.fla y lo pueden probar con Control
Enter .
5) Ponemos candado a la primer capa y creamos la segunda donde va todo lo dems.
6) Importar a la biblioteca el resto de las imgenes (todos los botoncitos y clips), que por ahora
no son ni botones, ni clips sino imgenes "mapa de bits".
7) Primero vamos a probar con b1 y c1. Arrastramos a b1 desde la biblioteca al escenario y lo
transformamos en botn con el nombre boton1. Y traemos a c1 y lo transformamos en clip de
pelcula con el nombre clip1. Ubicamos a boton1 en la vidriera y a clip1 en el lugar exacto para
que le quede bien a Yolanda, que as se llama la mueca.
Importante En un papel debes ir apuntando la ubicacin exacta de cada clip. En mi caso:
clip1, x 238, y 160
8) Las acciones correspondientes:
Clip1, va a estar ah, pero no queremos que se vea. Para esto escribimos la accin en el frame
1, (el nico frame que tendremos en la lnea del tiempo).
setProperty("clip1", _visible, false);
En el boton1 escribimos la accin para vestir y desvestir esa blusita azul que es clip1.
on(press){
if(clip1._visible==false){
setProperty("clip1", _visible, true);
}else{
setProperty("clip1", _visible, false);
}
}
El frame nombra a clip1, y boton1 nombra a clip1, en sus acciones, que no funcionarn si te
olvidas de seleccionar clip1 para, en el Panel de Propiedades escribir su nombre en Nombre de
Instancia.
9) Ahora grabas y pruebas y si todo funcion como esperamos, repites la accin para cada uno
de los artculos de vidriera. Te llevar poco tiempo usando Edit, Copiar y Pegar, ajustando
correcciones para cada caso. Por supuesto que para saber el lugar exacto donde va cada
prenda, tendrs que sacar la anterior. Al final tendrs que ponerlas todas apiladas y por eso les
deca que deben apuntar las ubicaciones de cada clip.
10) Para que no te olvides de nada, comencemos con los botones. Ya transformaste a b1.png
en el boton1, lo ubicaste en la vidriera y le escribiste la accin.
Ahora hay que transformar a b2.png en el clip boton2 y ubicarlos en la vidriera. Copias la accin
de boton1 y la pegas como accin de boton2. Despus corriges cambiando en lo que pegaste,
"clip1" por "clip2".
Y as hasta que tengas los nueves botones, ubicados en vidriera y con la accin referida al clic
con su mismo nmero.
Pgina 40 de 77
11)Los botones estn prontos y en vidriera. Sigues con los clips que vestirn a Yolanda.
De cada c1.png, c2.png, etc. creas un clip de pelcula con los nombres clip1, clip2, etc. y lo
ubicas vistiendo a Yolanda para apuntar la posicin exacta en las coordenadas x, y, que
corresponden, y lo borras del escenario para que quede en la biblioteca y Yolanda quede en
malla para probarle el prximo clip y apuntar sus coordenadas. Por el momento nada ms.
12) Crear la pila de los clip, cada uno segn el apunte. Y OJO, NO TE OLVIDES DE PONER A
CADA UNO, SU NOMBRE EN EL PANEL PROPIEDADES
Te quedar as:
13) Completar la accin del frame para que haga invisible la pila entera:
Pgina 41 de 77
Creacin de variables, y la adjudicacin de sus valores en

FLASH
1) Tener una idea clara de la salida que queremos.
Para esto, traten de descubrir el refrn.
HACER CLIC AQU PARA DESCUBRIR EL REFRN [http://www.delphi.todouy.com/flash/refran/refran.swf]
2) Jugando, nos damos cuenta, que la lnea de arriba est formada por variables, esperando
que el jugador les adjudique valores, que son las distintas letras que corresponden.
Tambin el contador de ayudas es otra variable que se incrementar con cada ayuda que se
pida.
se es nuestro trabajo. Crear en tiempo de diseo las variables y buscar la forma de, mientras
se juega tiempo de ejecucin se adjudiquen los valores.
3) Comencemos con crear una Carpeta en nuestra computadora que se llame refran y un
documento nuevo que guardaremos ah y ser refran.fla.
La primera capa, se llamar fondo y tendr solo grficos para identificar las letras y las
ventanitas con sus botones.
Te quedar as:
Hacer estos grficos lleva tiempo. Para lograrlos, primero hay que hacer el cuadriltero de
fondo como smbolo grfico, y tambin cada nmero. Despus sobreponerlos atendiendo a las
coordenadas para que resulten parejos.
No hay nada que aprender aqu ms que paciencia y dedicacin y no creo que lo necesiten. Por
eso, se los envo para que los bajen:
Con el botn derecho del ratn, hacen clic sobre cada imagen y "Guardar imagen como.."
Pgina 42 de 77
Jugando, ya habrs descubierto, que el refrn es DE TAL PALO TAL ASTILLA y tambin el
nmero correspondiente a cada letra.
En la lnea de arriba los organizas distanciando las palabras con los nmeros de cada letra.
En la lnea de abajo simplemente los nmeros en orden para que el usuario escriba las letras y
pulse el botn de entrada. Hecho esto, pones candado a la capa, grabas y pruebas.
4) Creamos la segunda capa. Aqu pondremos las variables y las acciones para manejarlas. En
esta aplicacin tratamos los tres tipos de variables: de texto, numricas, y booleanas
(verdadero, falso).
Comencemos con las de texto: Debemos crear una para cada letra.
Para facilitarnos la tarea, tratamos de pensar un nombre que aluda al significado de la variable.
Como van a ser mostradas en texto dinmico, resolv que todas comenzaran con "din" y
seguiran con la letra de la solucin.
Si la letra aparece repetida se le agregar un nmero.
Por ejemplo las variables donde la solucin es A se llamarn dina, dina1, dina2, dina3, dina4.
Creas entonces para cada letra un texto dinmico, ajustando las medidas con 28 por ancho y
32 de altura.
Yo us letra Verdana tamao 31. Y en la casilla Var escribes el nombre de la variable.
Ubicas cada uno de estos textos en su lugar. Superpuestas las capas, se vern as:
5) Ahora necesitamos variables, que reciban lo tecleado por el jugador. Usamos Introduccin de
Textos
Uno para cada nmero. El mismo tamao y la misma letra. Para los nombres de las variables de
entrada hemos elegido que comiencen con var y terminen con la letra.
De modo que son: vard, vare, vart, vara, varl, varp, varo, vars, vart.
Superponiendo las capas vers:
6) Los botones se encargarn de tomar los valores impuestos por los jugadores, asignndolos a
las letras (variables dinmicas) que correspondan.
Pgina 43 de 77
A continuacin los cdigos para cada botn.

En la tabla siguiente copio primero los cdigos de los botones para solo una letra.
Por ejemplo el botn 1 que asigna a la variable dind el valor impuesto en la variable vard.
El valor se adjudica con el signo =.
En cambio los botones asignados a las letras que se repiten en el refrn deben asignar valor a
varias variables.
Botn 1
Botn 2
on(press){
on(press){
dind=vard;
dine=vare;
}
}
Botn 7
Botn 8
on(press){
on(press){
dino=varo;
dins=vars;
}
}
Botn 6
on(press){
dinp=varp;
}
Botn 9
on(press){
dini=vari;
}
Botn 5
Botn 4
on(press){
on(press){
Botn 3
dina=vara;
dinl=varl;
on(press){ dina1=vara;
dinl1=varl;
dint=vart;
dint1=vart; dina2=vara;
dinl2=varl;
dint2=vart; dina3=vara;
dina4=vara;
dinl3=varl;
dinl4=varl;
}
7) El contador de ayudas es un ejemplo de variable numrica. La creamos en el fotograma

(lnea del tiempo).
Cdigo de la accin del fotograma:
stop();
ayudas=0;
Y como deseamos ver en pantalla la marcha del contador, ponemos en pantalla un texto
dinmico y nombramos a la variable con el nombre ayudas para que refleje la actualizacin del
contador.
8) Cdigo de los botones de ayuda.
letra 9
on(press){
ayudas=ayudas+1;
vari="I";
dini="I";
setProperty("ayudar9",
_visible, false);
letra 8
on(press){
ayudas=ayudas+1;
vars="S";
dins="S";
_visible, false);
letra 5
on(press){
ayudas=ayudas+1;
varl="L";
dinl="L";
dinl1="L";
dinl2="L";
dinl3="L";
dinl4="L";
Pgina 44 de 77
_visible, false);
}
9) No te olvides de guardar y probar a cada paso. Poner candado en esta capa y crear otra para
los textos.
Todo junto se ver ms o menos as:
Juego en Flash. Parte I

Lo ms importante en este tipo de juegos, de buenos y malos, de invasores y defensores, etc.,
es la materia prima: buenas imgenes y buen tema.
Lo que pretendemos es mostrarles las herramientas ms elementales que necesitan para poner
en marcha un jueguito de este estilo.
He creado una pgina bruja.html donde pongo las imgenes que necesites bajar y tambin las
direcciones para que cuando juegas te quede ms fcil, con la flechita del navegador
ir y volver con rapidez: http://www.delphi.todouy.com/flash/bruja/bruja.html
1) Tener una idea clara de la salida que pretendemos. Para eso entra a la pgina.html y pincha
Juego completo. Juega varias veces, y trata de pensar cuantas herramientas estn
involucradas, para hacer posible algo tan sencillo. Iremos paso a paso para cada herramienta.
Al grabar usaremos la palabra truco que no es lo mismo pero es ms corta.
2) truco.fla . Abre en tu computadora una carpeta que se llame bruja, para grabar este primer
paso que archivaremos como truco.fla
Si entras a la pgina bruja.html vers lo que haremos para este archivo: una capa con el fondo,
la bruja y los botones para moverla.
Pgina 45 de 77
3) La Bruja. En la pgina html, hay seis imgenes de la bruja. Tu necesitas las cuatro ltimas
(izquierda, arriba, derecha, abajo) y podras hacer con ellas el clip de pelcula de la bruja. Pero
no te lo aconsejo.
Si hicieras el clip, con esas cuatro imgenes, te ahorraras trabajo pero el clip pesara 11 kb. En
cambio te aconsejo que bajes solamente la imagen original que se llama Iz1, el trabajo no ser
tanto y el clip pesar 5 kb. As que:
En la pgina html. Con el botn derecho haces clic sobre la imagen Iz1 -> Guardar Imagen
como -> y la bajas a tu Carpeta bruja. Despus:
Archivo -> Importar a biblioteca -> buscas la Carpeta Bruja, seleccionas la imagen y pulsas
Abrir.
La imagen ya est en la biblioteca. La traes al escenario y en el panel de Propiedades ves que
mide 229 x 186 pxeles. La achicas a 130 x105. La conviertes en smbolo grfico que llamas
brujita.
Ahora los cuatro grficos que necesitamos deben ser instancias de brujita.
Si hasta ahora todo va bien graba este trabajo que llamamos truco.fla Y no te olvides de grabar
seguido.
En tu biblioteca tienes en este momento una imagen que se llama Iz1 y un grfico que se llama
brujita.
Hacer los cuatro smbolos grficos:
Traes brujita al escenario-> la seleccionas ->Modificar ->convertir en smbolo grfico ->nombre
izquierda
Traes brujita al escenario-> la seleccionas ->Modificar -> Transformar -> Rotar 90 en el
sentido de las agujas del reloj ->Modificar -> convertir en smbolo grfico -> nombre arriba
Traes brujita al escenario-> la seleccionas ->Modificar -> Transformar -> Voltear
horizontalmente ->Modificar -> convertir en smbolo grfico -> nombre derecha
Traes brujita al escenario-> la seleccionas ->Modificar -> Transformar -> Rotar 90 en el
sentido contrario a las agujas del reloj ->Modificar -> convertir en smbolo grfico -> nombre
abajo
Ahora ya tenemos en biblioteca los cuatro smbolos que necesitamos.
Haremos un clip de pelcula de exportacin que se llamar clipbruja :
Insertar-> Nuevo smbolo
Si aparece este cuadro debes hacer clic en avanzado porque es el que necesitas
Pgina 46 de 77
Escribes el nombre y-> eliges Exportar para ActionScript.

Si todo queda como en la imagen pulsas Aceptar.
Ahora no ests en la lnea del tiempo de truco.fla sino en otra pelcula y la lnea del tiempo es la
de clipbruja.
Necesitamos cuatro fotogramas clave, donde van a ir distintas imgenes, as que conviene crear
primero los cuatro y en la lnea del tiempo, poner en cada fotograma la accin:
stop();
Para que los cdigos que escribiremos en los botones coincidan con el ejemplo que tenemos
hay que seguir el orden:
En el primer fotograma, traemos de biblioteca el smbolo grfico izquierda y atendemos al Panel
de Propiedades para que la coordenada
x sea la mitad de ancho
y sea la mitad de alto
An 130
x -65
Al 105.6
y -52.8
Fotograma 2 smbolo arriba, ancho 105.6, x -52.8, alto 130, y -65
Fotograma 3 smbolo derecha, ancho 130, x -65, alto 105.6, y -52.8
Fotograma 4 smbolo abajo, ancho 105.6, x -52.8, alto 130, y -65
El clip de pelcula clipbruja est completo. Para afirmar y salir pulsas Escena1 y vuelves a la
lnea del tiempo de truco.fla
El nuevo clip est en la biblioteca.
El estado de truco.fla actual tiene que ser ste. Has puesto en cualquier lugar del escenario a
Pgina 47 de 77
clipbruja, en la lnea del tiempo hay un solo fotograma sin ninguna accin.
Grabas, pulsas Control+Enter para probar y luego Control + tecla b para saber cunto pesa ese
clip que por ahora est quieto en el escenario.
Vers que pesa 5 Kb.
Para limpiar ese mensaje vuelves a pulsar Control + tecla b.
Vuelve a la pgina .html y mira de nuevo que nos falta para completar este primer paso que
llamamos truco.fla: El fondo y botones para mover la bruja.
Antes de seguir, mira la biblioteca (Control + L). Ah tienes 7 elementos. Al pi de la Biblioteca
Hay la opcin de crear una Carpeta.
Haz clic all y ponle el nombre Abruja. Es un mtodo mo poner una A a todos los nombres de
carpeta en la biblioteca, porque como se ordenan alfabticamente, consigo que queden todas
las Carpetas arriba sin mezclarse con las cosas nuevas que vamos agregando.
Despus sin abrir la Carpeta pinchas cada elemento y lo arrastras hasta la Carpeta para
guardarlos all. Con doble clic abres la Carpeta si lo necesitas, o del mismo modo la cierras.
4) El Fondo.
Deja limpio el escenario y por ahora olvdate de la bruja. En la pgina html, pulsando con el
botn derecho sobre el fondo, eliges Propiedades y te enteras que el nombre es cielo.jpg y su
tamao es 960 x 550 pxeles.
Tambin tienes con la opcin de Guardar imagen como, que traerla a la Carpeta donde ests
trabajando.
Ahora desde tu trabajo (la aplicacin truco.fla ) traes desde la Carpeta a la Biblioteca la imagen
cielo.jpg Te recuerdo que debes usar Archivo-> Importar -> Importar a biblioteca -> cielo.jpg
La imagen cielo est ahora en biblioteca. Antes de traerla al escenario debo darle a ste las
dimensiones 960 x 550 pxeles. Luego traes la imagen y le pones en el Panel de Propiedades las
dos coordenadas x e y a 0 (cero).
Eso es todo sobre la capa fondo. Le pones candado. Grabas, la pruebas y mides su peso. Ahora
pesa 25 Kb.
5)Los botones. Creamos otra capa con el nombre bruja. Traes de la biblioteca clipbruja y la
ubicas en cualquier lado.
Son muy sencillos. Basta un solo grfico para sacarlos a todos. Dibuj con lpiz grosor 2 color
negro y sin fondo un tringulo de 33 por base, con 52 de altura. Antes de transformarlo a
smbolo lo copi para que me quedaran cuatro tringulos vacos. Con la herramienta Cubo de
pintura pint los fondos. Uno con gris matizado, otro con amarillo, otro con rojo y otro con
negro. De a uno, los transform en smbolos grficos con los respectivos nombres de gris, rojo,
amarillo, negro.
Hacemos Insertar 'Nuevo smbolo, por nombre flecha, por tipo boton y ' Aceptar.
Aparece el cuadro con los cuatro fotogramas de un botn tipo. En el fotograma Reposo
ponemos el grfico gris, en el fotograma Sobre el amarillo, en el Presionado el rojo y en Zona
activa el negro.
En todos los casos cuidar que las coordenadas de los smbolos grficos en el escenario sean x 16.5 y -26
Para salir del modo edicin y volver a la pelcula presionar escena1
El botn flecha est pronto en biblioteca. Traen cuatro instancias de flecha al escenario y las
colocan apuntando a las cuatro direcciones. Lo hacen con la ayuda de Modificar y Rotar. No
necesitamos ponerles nombre en el Panel de Propiedades, porque nunca vamos a referirnos a
ellos. Cada uno tendr su propia accin dependiendo de hacia donde apunte.
on(press){
clipbruja.gotoAndStop
(1);
clipbruja._x =
clipbruja._x -20;
}
on(press){
(2);
clipbruja._y =
clipbruja._y -20;
}
Pgina 48 de 77
on(press){
(3);
clipbruja._x =
clipbruja._x + 20;
}
on(press){
(4);
clipbruja._y =
clipbruja._y + 20;
}
Todos se refieren a clipbruja. Si no escriben su nombre en el Panel de Propiedades no

funcionar.
truco.fla que es el primer paso est pronto. Graba, prueba y pesa. Sigue pesando 25Kb.
Antes de salir, mira si tu biblioteca est ordenada.

Recuerda que vamos a seguir agregando cosas. Debes crear la carpeta Aflecha y ah guardar el
botn fecha y los grficos gris, rojo, amarillo y negro.
Archiva (graba) de nuevo truco.fla con la biblioteca ordenada.
Antes de irte guarda este mismo archivo con el nombre truco2.fla
Juego en Flash. Parte II

Al finalizar truco.fla y archivarlo con ese nombre, tambin lo archivamos como truco2.fla para
agregar herramientas sin perder el primer paso.
Lo que vemos en la imagen es lo que tenemos hasta ahora: Dos capas sin ninguna accin. La
capa inferior tiene solo el fondo. La superior la bruja en el clip de pelcula clipbruja
En la capa bruja tambin pusimos botones para que la muevan.
Para eliminar todo lo que se refiera a los botones, en la biblioteca, con el botn derecho pulsas
donde dice Aflecha y eliges Eliminar
Pgina 49 de 77
En la Capa bruja en el primer fotograma pones la accin para que puedas mover la bruja con
las flechas del teclado.
Adems creas un fotograma clave. Y en este segundo pones :
gotoAndPlay(1);
Archiva truco2.fla , prubalo y mide su peso. Pesa lo mismo mover con botones que con teclas.
Sin embargo si llevaras esto al Navegador, tendras que agregar un texto, diciendo que para
activar las teclas, el usuario debe antes, hacer clic en el escenario de la pelcula.
Aqu vamos a poner esa advertencia, que ser necesaria solamente en el Navegador pero ya
nos ocuparemos, cuando el juego est completo de que el usuario haga clic por alguna otra
razn antes de jugar, y ni se entere de que est activando las teclas flechas..
Programamos las teclas flechas
if (Key.isDown(Key.LEFT)){
clipbruja.gotoAndStop(1);
if (clipbruja._x >= 0){
clipbruja._x = clipbruja._x - 10;
}else{
clipbruja._x=960;
}
}
if (Key.isDown(Key.UP)){
if (clipbruja._y >= 0){
clipbruja._y = clipbruja._y - 10;
}else{
clipbruja._y=550;
}
}
Pgina 50 de 77
if (Key.isDown(Key.RIGHT)){
if (clipbruja._x <= 960){
clipbruja._x = clipbruja._x + 10;
}else{
clipbruja._x=0;
}
}
if (Key.isDown(Key.DOWN)){
if (clipbruja._y <= 550){
clipbruja._y = clipbruja._y + 10;
}else{
clipbruja._y=0;
}
}
Aclaracin
Los cdigos me parecen tan claros que no los explico por temor a aburrirlos. Pero contesto por
e-mail con mucho gusto cualquier pregunta sobre este trabajo.
Creamos una capa para los invasores.
Ponemos candado a las dos capas que ya tenemos, y creamos otra que llamaremos invasores
ubicada al medio de las otras dos.
Al final tendremos 10 invasores pero por ahora con uno alcanza para estudiar la accin de cada
y tambin la deteccin del choque con la bruja.
Con la herramienta valo dibujamos un crculo de 16 x 16 pxeles. Lo seleccionamos y lo
convertimos en un clip de pelcula que se llamar m1.
Lo ubicamos por encima del escenario por ejemplo con la coordenada y = -20 y no olvidamos
de ponerle su nombre m1 en el Panel de Propiedades
La accin para el fotograma de la Capa Invasora es:
1
if(m1._y <540){
2 m1._y=m1._y+1;
3
}
4
if((m1._x >_root.clipbruja._x)and(m1._x > _root.clipbruja._x+130)and (m1._y > _root.clipbruja._y)and(m1._y <
_root.clipbruja._y+130)){
5
m1._visible=false;
6
}
Numero los renglones para explicar.

Tenemos dos if
La estructura de un if es:
Si (pasa lo que pongo entre parntesis){
Entonces hay que hacer lo que est entre las llaves;
}
Primer if renglones 1,2 y 3. Recordamos que el escenario nuestro es de 960 de ancho por 550
de altura. Pero no queremos que los invasores que no son disueltos por la bruja pasen ms all
de y= 550 y se nos pierdan de vista. As que la orden es:
1
Si (la coordenada y de m1 es menor que 540) {
2
Entonces, que avance otro pxel ms;
3
}
Segundo if, renglones 4,5 y 6. Teniendo en cuenta que clipbruja mide 130 x 105 tomamos su
medida ms ancha. Esta medida hace las cosas muy fciles para el usuario, pero hacerlo ms
difcil e interesante queda a la creatividad de ustedes. Estoy dispuesta a sugerir cambios, pero
ahora es importante que todo sea lo ms simple posible.
De forma que, est donde est la bruja el lugar que ocupa es lo que est entre (su coordenada
x) y (su coordenada x+130) y entre (su coordenada y) y (su coordenada y +130) ya que no
Pgina 51 de 77
sabemos si la bruja va a estar vertical u horizontal.

4
Si ( m1 est ocupando el mismo espacio que la bruja) {
5
Entonces, que se vuelva invisible;
6
}
Con esto, truco2.fla queda terminado. Archiven, prueben y pesen. Est pesando 26 Kb.
Recuerden que para probarlo con Control+Intro este es en la computadora de ustedes, no
necesitan pulsar la pelcula para que funcionen las teclas, pero en Internet hay que hacerlo.
Antes de irse graben tambin este mismo trabajo como truco3.fla para que nos quede de
respaldo truco2.fla, mientras seguimos complicando el juego. Despus nos quedaremos con el
ltimo archivo y aliviaremos la memoria de la mquina borrando los anteriores.
Juego en Flash. Parte III

Ahora estamos en truco3.fla pero queremos 10 invasores. Recuerda que para el clip invasor que
llamamos m1 dibujamos un crculo, y lo convertimos en un smbolo clip de pelcula.
De la misma forma hacemos otros nueve clips, de distintos colores, que sern m2, m3, m4,
m5, m6, m7, m8, m9, y m10.
Y los colocas encima del escenario ms o menos as;
Y no te olvides de poner a cada uno, su nombre en el Panel de Propiedades.

Crear la funcin invade (clip)
Mantn los candados en las capa fondo y brujas. Trabajamos en la capa invasores.
En el primer fotograma hemos escrito dos condicionales if
En el primero si se cumpla la condicin de que no estuviera demasiado bajo, entonces se lo
adelantara un pxel
En el segundo si se cumpla la condicin de que el invasor estuviera en el mismo espacio que la
bruja, entonces hacerlo invisible.
En vez de repetir esto para cada nuevo invasor, vamos a crear una funcin que realice lo
mismo.
Arregla el cdigo del fotograma para que figuren los condicionales dentro de una funcin as:
function invade(clip){
if(clip._y <540){
clip._y=clip._y+1;
}
if((clip._x >_root.clipbruja._x)and(clip._x < _root.clipbruja._x+130)and (clip._y > _root.clipbruja._y)and(clip._y <
clip_y = clip_y; clip.stop();
clip._visible=false;
}
}
Nota que la funcin tiene un parmetro que figura entre parntesis. El parmetro indica que la
funcin va a ser llamada con un argumento general que servir como representante de algo
singularmente nico.
Con otras palabras (clip) es la palabra que despus representar a m1, m2, etc.
Despus de arreglar la funcin, la llamas para cada uno de los invasores, completando as el
cdigo para este fotograma:
invade(m1);
invade(m2);
invade(m3);
invade(m4);
invade(m5);
Pgina 52 de 77
invade(m6);
invade(m7);
invade(m8);
invade(m9);
invade(m10);
Archivar, probar y pesar. Sigue pesando 26 kb.

Despus de grabar este trabajo como truco3.fla, gurdalo como truco4.fla para continuar.
Y no olvides que en el Navegador, para activar las teclas flechas, debes hacer antes un clic
sobre la pelcula.
truco4.fla Usamos la funcin getTimer() para que los invasores caigan a distintos tiempos.
No tiene gracia que los invasores caigan todos a la vez! El juego resulta muy fcil!
Le daremos a una funcin predefinida del sistema esta tarea: getTimer()
Esta funcin da en milisegundos el tiempo que ha transcurrido desde el comienzo de la
ejecucin de una pelcula.
Probando distintas cuentas, ms por ensayo y error que por razonamiento logr dar con una
frmula que me devuelve los intervalos que se ajustan bien.
a = getTimer();
momento = a/100;
b = int(momento)
c=b/10;
De forma que en el fotograma de la Capa Invasores, la funcin invade(clip) queda como est,
pero se usa la frmula para llamar a la funcin en distintos tiempos. La accin completa del
fotograma queda as: function invade(clip){
if(clip._y <540){
clip._y=clip._y+2;
}
if((clip._x >_root.clipbruja._x)and(clip._x < _root.clipbruja._x+130)and (clip._y > _root.clipbruja._y)and(clip._y <
clip_y = clip_y; clip.stop();
}
}
a = getTimer();
momento = a/100;
b = int(momento)
c=b/10;
if(c >1){invade(m1);}
if(c >21){a = ""; b=""; c= "";}
Ahora otro arreglo ms. Pones candado en las Capas fondo e invasores porque vamos a
trabajar en la Capa bruja
Hasta aqu la bruja llegando a un extremo del escenario apareca por el otro. Pero en el viaje
vertical eso no nos conviene ms. Despus de cierta altura, en medio del mar, la bruja ya no
podr atrapar invasores.
Por eso debemos cambiar para las teclas UP y DOWN el nmero 540 por el nuevo que es 417
Y otra reforma en la Capa Invasores, as que candado en las otras y libre sta.
Vamos a hacer ms rpida la cada de los invasores.
En el cdigo del fotograma de esta capa donde dice;
if(clip._y <540){
clip._y=clip._y+1;
}
Pgina 53 de 77
Cambia el nmero 1 por el nmero 2 as avanzar a pasos (pxeles) ms largos.

Archiva truco4.fla gurdalo, psalo.
Para el prximo paso gurdalo como truco5.fla .
truco5.fla Usamos la funcin getTimer() para que los invasores caigan a distintos tiempos.
Disparador del juego porque activa las teclas flechas.
Necesitbamos que el usuario hiciera clic en cualquier punto de la pantalla para activar las
teclas flechas.
Crearemos en botn con el texto explicativo.
Primero pones candado a todas las capas y creas una superior a todas que llamaremos texto
Yo us letra Verdana, tamao 14 color blanco. Recuerda que todas las capas estn con candado
menos la del texto que estamos haciendo.
Como la letra es blanca, elegimos para escribir la parte ms oscura del escenario, despus
Seleccionamos el texto (son solo palabras sin fondo)y con Modificar' Convertir en smbolo ' tipo
Botn nombre activar
El botn ya est en la biblioteca y lo puedes borrar del escenario.
Si en la biblioteca lo seleccionas, vers solamente la crucesita, porque las letras son blancas y
el fondo de la biblioteca tambin.
Antes de traerlo al escenario, mira la capa fondo para asegurarte que la imagen cielo est con
las coordenadas x, y, a cero.
Despus de nuevo con candado en todas menos en la capa texto trae el botn activar a las
coordenadas x, y, a cero.
Escribe en el panel de Propiedades el nombre de instancia activar
Y la accin del botn activar es:
on(press){
activar._visible=false;
}
Y adems encerramos el llamado a getTimer() y el lanzamiento de los invasores en un if que

traduciendo dice:
Si el usuario puls el texto entonces comienza el juego. Esto es, comienza a correr el tiempo, y
la cada de invasores.
Comentario final con el resultado del juego.
Trabajamos en la capa invasores con candado en las dems.
Al pie del escenario creamos un texto dinmico y le ponemos de nombre a la variable: barridos
No ponemos nombre de instancia. Us letra verdana, tamao 16, color blanco
Le puse de anchura 517.
Cuando la variable c, resultado del tiempo desde que el juego comenz, llega a valer 44 los
invasores han sido barridos o estn en la tierra.
Por eso creamos un contador que cuente los invisibles, para tener los resultados y trasladarlos
a la variable barridos
Por si te perdiste te doy el cdigo completo del fotograma de la Capa Invasores.
if(clip._y <540){
clip._y=clip._y+2;
}
if((clip._x >_root.clipbruja._x)and(clip._x < _root.clipbruja._x+130)and
(clip._y > _root.clipbruja._y)and(clip._y < _root.clipbruja._y+105)){
}
}
if(activar._visible==false){
a = getTimer();
momento = a/100;
b = int(momento)
c=b/10;
Pgina 54 de 77
if(c>44){
contador = 0;
if(m1._visible==false){ contador = contador+1;}
if(m10._visible==false){contador = contador+1;}
Z = 10-contador;
barridos = "barridos "+ contador + ", invadieron mar y tierra " +Z;
}
}
Comentario final.
Trat de que el juego completo pesara lo menos posible. Pesa 31 KB. Hasta que pese 100 KB,
puedes usar tu imaginacin y hacerlo ms interesante. Despus ya habr que buscar otras
herramientas, tratando de no llegar a tener que decir: Espere por favor que estamos cargando.
Mtodo hitTest() detector de colisiones.

Esta aplicacin es una de tantas en la web de una Academia de Choferes.
La Academia ha pedido que primero se repase las SEALES DE TRNSITO, luego las SEALES
DE ADVERTENCIA (viene curva cerrada, cruza tren, viene puente, etc.), despus los DERECHOS
DEL PEATN (ej. cebras).
Hecho el repaso el programa hace que el usuario conduzca y en distintas escenas se encuentra
con los carteles y experimentar (menos mal que en ficcin) el peligro de no respetar las
seales.
Repasemos las Seales de Trnsito [http://www.delphi.todouy.com/transito/uno.swf]
Los smbolos los copi del Google y no te los paso porque saqu los de Uruguay, pero v que
cada pas tiene los suyos, a veces igual y otras veces, no.
Si haces esta aplicacin puedes dejar los smbolos como imgenes tal como las traes o
convertirlas a en simbolos grficos y pesarn lo mismo.
Lo que importa es el cuadrado donde se apoyan y que se ve de un gris oscuro. Es muy simple,
hice un cuadrado de 140 por 140 le puse un color azul fuerte (#003399) y lo convert a smbolo
MovieClip, con nombre azul.
Necesitaba 14 cuadrados, porque de las 16 seales que tiene mi pas me salteo la una (ceda el
paso) y la seis(pare) porque tienen las palabras en el smbolo y no necesitan etiqueta.
A cada instancia que pongo en el escenario, le bajo el alpha a 10 y por eso se ve gris oscuro. En
el Panel de propiedades le pongo los nombres, todos distintos, de acuerdo al smbolo, para
poder luego detectar si los impactos(hitTest) son o no correctos.
Pgina 55 de 77
Por eso, si el cuadrado se llama azul2 la etiqueta se llamar t02

Recuerda que si te olvidas de ponerle los nombres a cada clip en el Panel De Propiedades, el
programa no sabe quin es quin.
El nico script que escribes en el primer fotograma de la capa seales es el siguiente:
if(t02.hitTest(azul2)){
azul2._alpha=80;
}
azul3._alpha=80;
}
azul4._alpha=80;
}
azul5._alpha=80;
}
azul7._alpha=80;
}
azul8._alpha=80;
}
azul9._alpha=80;
}
azul10._alpha=80;
}
azul11._alpha=80;
}
azul12._alpha=80;
}
azul13._alpha=80;
}
azul14._alpha=80;
}
azul15._alpha=80;
}
azul16._alpha=80;
}
Como ves por el script del frame 1, si el test de impacto (hitTest) detecta la colisin entre las
dos instancias hace que el cuadrado suba el alpha a 80.
Las etiquetas
Como ves las etiquetas se arrastran sin ninguna programacin, porque son clips a los que les
hemos agregado la propiedad de ser arrastrados usando la extensin de la clase MovieClip que
ya comentamos en el artculo Clases y objetos en Flash [http://www.desarrolloweb.com/articulos/2414.php]
Explico rpidamente como hacer estas etiquetas.
En un principio las diseas y las conviertes a smbolos MovieClip.
Como son todas distintas, cada una tiene su nombre.
En este caso, t02, t03, etc.
Para extender la clase a arrastrable debemos escribir un script directamente en un archivo
ActionScript
Archivo -->Nuevo-->ArchivoActionScript y lo guardas en la misma Carpeta donde guardas el
archivo .fla
Pgina 56 de 77
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 minscula)
Numer y separ las partes del script para explicarlos mejor.
Se nos ocurri el nombre Arrastre para esta sub clase, as que en el rengln 1 en la sintaxis de
Flash dice:
1 class Arrastre extends MovieClip {
2
3
4
5
function Arrastre() {
onPress=Arrastrar;
onRelease=Soltar;
}

7 this.startDrag();
8}
9 private function Soltar():Void{
10 this.stopDrag();
11 }
12 }
Una vez que tienes el archivo Arrastre.as en la misma Carpeta donde guardas la aplicacin que
ests haciendo, debes extender la propiedad de arrastre a cada etiqueta.
Para eso seleccionas en la biblioteca con el botn derecho, una por vez, cada clip etiqueta,
pulsas Propiedades y ah la exportas para ActionScript y la integras a la clase ActionScript
Arrastre.
Cuando la veas como la siguiente imagen pulsas Aceptar.
Pgina 57 de 77
Te muestro la lnea del tiempo con solo dos capas. En la capa cuadros estn los cuadros (azul2,
etc) y las etiquetas (t02, etc.)
En la capa seales los smbolos y los textos.

En la capa seales, en el fotograma 1, est el script para detectar las colisiones y en el
fotograma 2 dice: gotoAndPlay(1);
Scroll de texto en Flash
Vamos a crear un scroll de texto de la forma ms sencilla que hay. Ya ser cosa vuestra hacerlo
estticamente ms llamativo o complicarlo ms.
Abrimos una nueva pelcula de Flash y vamos a usar una nica capa. Con la herramienta de
texto
Creamos un campo de texto del tamao que queramos y le damos las siguientes
propiedades:
Estas propiedades son: Campo de texto tipo dinmico, multilnea para que el texto pueda
ocupar ms de una lnea, creamos la variable "MiTexto" que es donde, usando ActionScript,
meteremos el texto del scroll. En cuanto al tipo de fuente, tamao y color, he puesto una letra
Arial, a 14 px y de color azul, vosotros poner lo que querais. Y por ltimo tenemos estos tres
botones:
El primero quiere decir que el texto podr ser seleccionado por el usuario, el
segundo, que el texto leer el formato HTML, es decir, podremos poner etiquetas de HTML, y el
tercero es que el campo de texto tendr un marco alrededor.
Pgina 58 de 77
Ahora vamos a crear 2 botones, para mover el texto hacia arriba y hacia abajo. Podeis crear los
botones como os apetezca, para este ejemplo, hemos usado unos de los que vienen en la
biblioteca de archivos comunes de Flash MX (ventana>biblioteca comunes>botones>circle
buttons>menu):
Como veis, el botn de abajo, est invertido; para los que esteis muy verdes en flash, os dir
que para darle la vuelta, aunque hay varias maneras, la ms sencilla sera seleccionar el botn
y modificar>transformar>voltear verticalmente, y listo.
Bien, la parte del diseo, (lo ms sencillo posible), ya est terminada, ahora vamos a ver el
cdigo que necesitamos. Empecemos por el cdigo de los botones; seleccionamos el botn de
arriba, hacemos click derecho sobre l y le damos a "acciones", se nos abrir el cuadro de
cdigo, y metemos el siguiente:
on (press) {
MiTexto.scroll -= 1;
}
Y en el botn de abajo ponemos:

on (press) {
MiTexto.scroll += 1;
}
Estos cdigos, lo que le dicen a flash es que cuando se presione el botn, a MiTexto, que es la
variable que nos creamos para el texto anteriormente, en la propiedad scroll que ya viene
definida en ActionScript, le restamos (para subir), o le sumamos (para bajar), una unidad a lo
que ya tenamos.
Por ltimo, nos queda meter el texto en el scroll, seleccionamos el primer y nico fotograma
que tenemos, damos click derecho sobre l y nos vamos a 'acciones', y ponemos:
Pgina 59 de 77
stop();
MiTexto = "El texto que quieras.";
El cdigo es muy simple, sencillamente, le ponemos de entrada un stop, por una razn, cada
vez que se lea este fotograma, se ejecutar este cdigo, como solo debe ejecutarse una vez,
(de lo contrario el texto no parara de cargarse en el scroll), le ponemos un stop y la pelcula se
detendr. A continuacin cargamos el texto metindolo en la variable MiTexto que nos creamos
al crear el campo de texto dinmico. Ojo con un error muy estupido que nos puede dar algn
dolor de cabeza si somos novatos; para cargar el texto, la estructura es la siguiente: variable =
"texto"; como veis, el texto va entre comillas, de modo que el texto que pongamos no podr
tener nada entre comillas, es decir, esto: variable = "aqu va el "texto" que quiero poner"; nos
dara error. En este caso, por ser un texto tan corto se ve facil, pero lo ms lgico es que el
texto lo copiaramos y pegaramos, tener en cuenta que no puede haber comillas intercaladas. Y
otra cosa que no puede haber son intros o saltos de lnea. Son las nicas cosas a tener en
cuenta en este tipo de scroll.
Si lo deseas,
puedes descargarte el archivo del ejemplo aqu.
[http://www.scourdesign.com/articulos/tutoriales/flash/descargas/10.zip]
Un saludo.
Formulario de contacto en Flash y PHP

Resultado
Si lo deseas, puedes
Pgina 60 de 77
descargarte el archivo del ejemplo aqu.
[http://www.scourdesign.com/articulos/tutoriales/flash/descargas/formulario.zip]
Abrimos una nueva pelcula de Flash. Para empezar, vamos a crear dos capas, una que se
llamar "Formulario" y otra "Fondo":
En la capa de "Formulario" creamos un nuevo fotograma clave vacio y otro ms donde

pondremos el formulario. El primero lo dejamos vacio de momento, ya veremos ms adelante
para qu lo usaremos. En el segundo fotograma clavecreamos un nuevo campo de texto
le damos las siguientes propiedades:
Como veis, tenemos que poner un campo de texto de tipo "introduccin de texto", que sea lnea
nica, con el formato de texto que deseemos (tipografa, color, tamao, alineado, etc...), y muy
importante, darle un nombre de variable, en este caso, este campo ser para introducir el
nombre, y a la variable le hemos dado el nombre "nom".Con esto ya tenemos el campo
Pgina 61 de 77
nombre, de momento se ver as:
NOTA:
En la capa "Fondo" pondremos el fondo de cada campo, as que los campos de texto deben ser
transparentes, para ello, asegurate de que queda deseleccionado el botn a la izquierda de
"Var" en las propiedades.
Aadimos tres campos de texto ms, "E-mail", "Empresa", "Motivo del contacto", donde
haremos exactamente lo mismo, solo que dandole a las variables los siguientes nombres:

Campo E-mail: Variable "email"

Campo Empresa: Variable "empresa"
Campo Motivo del contacto: Variable "contacto"
Siempre sin comillas. De momento lo tendremos as:
Ahora vamos a crear el campo de texto para el mensaje, este tiene las propiedades algo
distintas:
Las diferencias son dos basicamente, le hemos dado el nombre de instancia "eltexto", y ya no
es lnea nica sino multilinea, aparte de que la variable en este campo se llamar "mensaje".
Lo de "eltexto" es para hacer el scroll de este campo, no voy a explicar como se hace el scroll
aqu ya que puse un tutorial sobre scroll de texto, lo encontraras aqu
[http://www.desarrolloweb.com/articulos/scroll-texto-flash.html].
Con el scroll ya creado, tendremos esto:
Pgina 62 de 77
Aadimos dos botones, uno el de enviar y otro el de borrar y un nuevo campo de texto donde
se mostrar el estado de envo del mensaje, es decir, dir si el mensaje se ha enviado
correctamente o no. Este ltimo campo de texto tendr estas propiedades:
Bien, nuestro formulario de contacto web estar ms o menos as:
Pgina 63 de 77
Los campos que estn con asterisco (*) sern obligatorios tal y como se indica, es decir, si el
usuario los deja vacios el mensaje no se enviar y en el cuadro de estado aparecer un
mensaje de error.
Antes de introducir el cdigo ActionScript necesario, vamos a terminar la presentacin del
formulario, para ello, en la capa "Fondo", en el segundo fotograma, dibujamos el fondo que
deseemos y que coincida en tamao, forma y posicin con los campos de texto. Para el caso, yo
he dibujado este fondo:
Pgina 64 de 77
Ok, con esto hemos terminado la presentacin, ahora vamos con el cdigo que har que todo
esto funcione.
Seleccionamos el botn de enviar, y metemos el siguiente cdigo:
on (release) {
if ((nom=='') or (email=='') or (contacto=='') or (mensaje=='')) {
respuesta = "Hay campos obligatorios sin rellenar. Por favor,
revise el formulario.";
} else {
loadVariablesNum ("php2excel_csv.php", 0, "POST");
respuesta = "El formulario ha sido enviado con xito.
Nos pondremos en contacto con Ud. lo antes
posible. Reciba un saludo.";
}
}
Aqu lo que estamos haciendo es comprobar que los campos obligatorios no estn vacios, si
alguno de ellos lo esta, en el campo de texto estado aparecer el mensaje de error arriba
indicado, si no, el correo se enviar y aparecer el mensaje de envio exitoso.
En el botn borrar ponemos:
on (release) {
nom = "";
email = "";
empresa = "";
contacto = "";
mensaje = "";
respuesta = "";
}
Con lo que al apretar el botn borrar todos los campos de texto se borrarn :P
Pgina 65 de 77
Ahora retomamos algo que dej pendiente al comienzo; en el primer fotograma de la capa
"Formulario", donde creamos un fotograma clave vacio, pondremos el siguiente cdigo:
nom=''
email=''
contacto=''
mensaje=''
Esto es para que los campos obligatorios estn vacios cuando se cargue la pelicula de flash.
Por qu?, Las variables que se crean se alojarn en un espacio que le asigne el sistema
operativo en la memoria ram, si no los inicializamos a "vacio", podran tener 'basura' con lo que
la comprobacin de estos campos podra fallar.
Y para terminar, en el segundo fotograma de la capa "Formulario" aadimos la orden:
stop();
Con esto hemos terminado de crear el formulario en Flash, pero aun no funciona, nos queda la
parte de php.
Necesitamos tres archivos, uno se llamar php2excel_csv.php, libmail.php y formulario.csv. Los
puedes descargar de aqu. [http://www.scourdesign.com/articulos/tutoriales/flash/descargas/php.zip] Los archivos
libmail.php y formulario.csv no hay que tocarlos, donde hay que hacer los cambios para
adaptarlo a nuestro formulario es en el otro archivo, ya en el propio archivo he puesto los
comentarios, as que abrir php2excel_csv.php y all lo explico.
El archivo formulario.csv es un archivo de texto que se nos enviar conjuntamente con el email
como archivo adjunto, de modo que el email lo recibiremos como siempre, con el texto escrito
en el cuerpo del email, y adems el mismo email en un fichero adjunto por si queremos
guardarlo en el disco duro. Los archivos *.csv son de Microsoft Excel, sin embargo, si lo
abrimos con dicho pograma, los caracteres raros como acentos y ees no se leen bien, as que
mejor abrirlos con el block de notas.
Para terminar, un par de cosas a tener en cuenta para no tener problemas:

Estos tres archivos han de estar en la misma carpeta en la que est el formulario en
Flash.
El archivo formulario.csv se escribir cada vez que alguien enve un correo, con lo que en
nuestro servidor, con la opcin correspondiente del programa ftp que usemos, tenemos
que cambiar los permisos (buscar en el programa la opcin 'chmod' o permisos) sobre
este archivo a 777.
Y bueno, aunque es evidente, por si a alguien se le pas, es imprescindible que nuestro
servidor interprete el lenguaje php.
Si lo deseas,
puedes descargarte el archivo del ejemplo aqu
[http://www.scourdesign.com/articulos/tutoriales/flash/descargas/formulario.zip].
Un saludo.
Actualizacin I:
Algunos me habeis preguntado si se puede hacer un formulario de contacto pero solo con flash,
sin usar lenguajes como php, asp, o similares, bien, la respuesta es no. Flash por si solo no
puede enviar correos, lo nico que podra hacer flash es crear un vinculo de email, que al
cliquear en el se abriera el gestor de correo por defecto del sistema, generalmente el Outlook,
lo cual es muy incomodo, ya que muy pocos usuarios tienen configurado este tipo de
programas, dado que usan correos gratuitos tipo hotmail que llevan gestor via web.
Pgina 66 de 77
As que para una web, y para dar una imagen un poco profesional, es imprescindible usar
lenguajes del lado del servidor, para este caso, php.
Actualizacin II:
Modificados los archivos php para que interpreten correctamente los caracteres latinos (acentos
y ees).
Actualizacin III:
Me habeis mandado ya varios correos preguntandome como se configura el archivo
php2excel_csv.php, as que paso a explicarlo aqu para quien pueda interesar:
El archivo php2excel_csv.php es el encargado de recoger lo que ha escrito el usuario en el
formulario (los datos de las variables) y pasarselo al archivo libmail.php para que este haga el
resto. Pero este archivo hay que configurarlo, dandole los datos de nuestro correo y las
variables que hayamos declarado en Flash.
Donde est la pgina que cargar el formulario, en esa misma carpeta en vuestro servidor,
debe estar tambin el archivo swf (Flash), los 2 archivos de php, libmail.php y
php2excel_csv.php y el archivo formulario.csv
Os pongo y comento aqu el archivo en cuestin (php2excel_csv.php):
<?PHP
$archivo = fopen("formulario.csv" , "w");
if ($archivo) {
//variables que hayamos declarado en la pelicula de flash
$datos="Nombre del autor: $nom
+ Su email:,$email
+ Su empresa:,$empresa
+ Motivo del contacto:,$contacto
+ Mensaje:,$mensaje";
fputs ($archivo, $datos);
}
echo $pulsado;
fclose ($archivo);
?>
<?php
include "libmail.php";
$m= new Mail;
//correo desde el que se enviar
$m->From( "correo@correo.com" );
//correo al que se enviar. Se puede poner en ambos lugares el mismo correo
$m->To( "correo@correo.com" );
//el subject del email, ser el email que haya escrito el usuario, salvo que lo cambiemos, pon lo que quieras
$m->Subject( "$email" );
//variables que hayamos declarado en la pelicula de flash
$m->Body( "Nombre del autor:
$nom
Su email:
$email
Su empresa:
$empresa
Motivo del contacto:
$contacto
Mensaje:
$mensaje" );
//Si queremos que el correo se enve a ms cuentas de correo, quitar las barras de comentario y especificar los correos
//$m->Cc( "alguien@algun_server.au");
//$m->Bcc( "alguien_mas@otro_server.es");
$m->Priority(1) ;
$m->Attach( "formulario.csv", "application/vnd.ms-excel", "attachment" );
$m->Send();
?>
Pgina 67 de 77
Lo que est de color azul es lo que hay que cambiar, os comento por partes.
Donde dice:
$datos="Nombre del autor: $nom
+ Su email:,$email
+ Su empresa:,$empresa
+ Motivo del contacto:,$contacto
+ Mensaje:,$mensaje";
Eso es el archivo adjunto que os llegar con el email, ah hay que poner el nombre de las
variables que pusimos en flash ($nom, $email, $empresa, etc...) y el texto de introduccin
antes de cada campo.
Si en el campo 'Nombre' el usuario puso Pepe Garca, en 'Email' puso pepe@pepe.com, en
empresa puso DecoHogar, etc..., en el correo que nos llegue, pondr:
Nombre del autor: Pepe Garca
Su email: pepe@pepe.com
Su empresa: DecoHogar
Etc...
Tal y como est declarado, el texto que aparece antes de las variables se escribir siempre tal y
como est, y las variables se sustituirn por lo que escriba el usuario.
Si en la pelcula de flash de vuestro formulario solo teneis 3 campos que se llaman:
Correo, Ciudad y mensaje y las variables las habeis llamado respectivamente elcorreo, laciudad
y elmensaje, ese trozo de cdigo debera quedar as:
$datos="Su correo: $elcorreo
+ Su Ciudad: $laciudad
+ Su mensaje: $elmensaje";
El siguiente cdigo a configurar es:
//correo desde el que se enviar
$m->From( "correo@correo.com" );
//correo al que se enviar. Se puede poner en ambos lugares el mismo correo
$m->To( "correo@correo.com" );
//el subject del email, ser el email que haya escrito el usuario, salvo que lo cambiemos, pon lo que quieras
$m->Subject( "$email" );
Bien, en correo desde el que se enviar y correo al que se enviar, poned vuestra direccin de
correo, sin ms. Y el Subject es el asunto que aparecer en el correo. Tal y como est puesto
ah, en el asunto aparecer lo que el usuario escriba en el campo email, ya que a ese campo le
he dado el nombre de variable email en Flash (a las variables en php se les aade el simbolo
del Dolar antes, $email). Podeis poner lo que querais, si poneis una variable de las declaradas
en Flash, aparecer lo que el usuario ponga en dicho campo, si quereis podeis poner un texto
fijo, por ejemplo:
$m->Subject( "Correo enviado desde mi web" );
Con lo que en el asunto siempre aparecera dicha frase.
Bien, pasemos al siguiente cdigo:
$m->Body( "Nombre del autor:
$nom
Su email:
Pgina 68 de 77
$email
Su empresa:
$empresa
Motivo del contacto:
$contacto
Mensaje:
$mensaje" );
Hay que hacer exactamente lo mismo que en el primer cdigo que he explicado, solo que este
de aqu es para el mensaje de correo electrnico, y el anterior era para el archivo adjunto.
Y por ltimo, donde dice:
//Si queremos que el correo se enve a ms cuentas de correo, quitar las barras de comentario
y especificar los correos
//$m->Cc( "alguien@algun_server.au");
//$m->Bcc( "alguien_mas@otro_server.es");
Si quereis que el mensaje del formulario solo os llegue a vosotros, no lo toqueis, ya que ese
cdigo es para que el correo se mande a varias cuentas de correo cuando el usuario le de a
enviar. Si quereis que tal cosa suceda, quitad las barras de comentario "//" al principio de la 2
y 3 lnea y poned las otras 2 cuentas a las que quereis que el correo se mande, por ejemplo:
$m->Cc( "ramon@miweb.com");
$m->Bcc( "lorena@miotraweb.com");
Y con eso, el correo llegar a esas dos cuentas a parte de la vuestra.
Espero haber resuelto las dudas sobre como configurar este archivo.
Actualizacin IV:
Seores, para que el formulario funcione es Imprescindible que el servidor web donde est
alojada la pgina del formulario tenga un servidor de correo (SMTP), de lo contrario no podr
enviar el mail.
Para que un correo funcione hacen falta 2 servidores web, uno que enva (SMTP) y otro que
recibe (POP3); un solo servidor puede hacer ambas funciones, por ello, el formulario funciona
perfectamente si lo usamos con correos gratuitos tipo Hotmail, por que dicho servidor POP3
recibir el correo, pero no tendr nada que recibir sin un servidor SMTP que lo enve desde
nuestra web. los que intenteis usar el formulario en servidores gratuitos tipos Iespana,
Webcindario, Web1000, etc... no lo conseguireis, por que estos servidores web no tienen
servidor de correo SMTP. Tenedlo en cuenta.
De Access a XML
Presentacin de la base de datos
El desarrollo del tutorial est realizado utilizando una base Access muy sencilla, pero el ejemplo
puede adecuarse a bases ms potentes, como SQL Server, con muy pequeas modificaciones.
Supongamos que tenemos que tomar datos de una base que utiliza solo 3 tablas, con la
estructura que se detalla en la siguiente figura:
Pgina 69 de 77
El ejemplo se refiere a una compaa que dispone de Representantes en distintos pases y se

propone mostrar en su web realizada en Flash los datos de cada uno para que sus clientes
contacten al representante ms cercano.
Se trata de una estructura jerrquica de datos que nos proponemos respetar cuando
consultemos la base (bd_tutorial.mdb).
Supongamos que la empresa carga los datos a travs de un Panel de Cliente realizado en algn
lenguaje de programacin del lado del servidor (ASP o PHP). Los datos de muestra son los
siguientes:
Trabajando en ASP y XML

Nuestro trabajo consistir en lograr tres objetivos:
1. Recoger los datos de la base mediante consultas SQL alojndolos transitoriamente en
objetos de tipo Recordset
2. Volver a grabar esos datos en formato XML, que respetar la estructura jerrquica y que
es de muy fcil acceso desde el Flash
3. Realizar una pelcula en Flash que lea los datos XML y los muestre a los visitantes.
Los primeros dos objetivos los realizaremos utilizando una pgina ASP (entorno Windows) que
denominaremos representantes.asp.
El tercero ser desarrollado ntegramente en la parte 2 de este tutorial: de XML a Flash.
Pgina 70 de 77
Comentaremos a continuacin los aspectos claves del cdigo de representantes.asp.

Antes que nada, nuestra pgina activa deber conectarse a la base y realizar sobre ella las
consultas SQL que recojan los datos de forma ordenada dentro de los objeto Recordset.
Conectarse a la base bd_tutorial.mdb
Dim Conn, ConnStr
ConnStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="
ConnStr = ConnStr & Server.MapPath("data/bd_tutorial.mdb")
Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Mode = adModeReadWrite
Conn.ConnectionString = ConnStr
Conn.Open
Realizar la primera consulta SQL

Una vez conectados a la base debemos realizar la primera consulta SQL, que recuperar la lista
de los datos ubicados ms alto en la jerarqua, en nuestro caso las Areas Geogrficas. Debemos
armar la consulta de tal modo de obtener nicamente aquellas reas que tengan algn pas
asociado. Si algn rea no tuviera todava pases asociados la consulta lo ignorar, como ocurre
con "Asia" en la base de muestra.
Si algn rea posee ms de un pas asociado, lo que es lgico que ocurra, aparecer varias
veces (tantas como pases tenga) por lo que utilizamos el predicado DISTINCT para obtener
cada rea una sola vez.
El cdigo sera el siguiente:
Dim strSQLAreas
strSQLAreas = "SELECT DISTINCT Areas.* FROM Areas INNER JOIN Paises ON Areas.IdArea =" & _ "Paises.AreaPais"
Set rsAreas = Server.CreateObject("ADODB.Recordset")
rsAreas.Open strSQLAreas, Conn, 1
En ste momento estamos en condiciones de empezar a armar nuestro archivo XML.

La idea es ir armndolo y grabndolo lnea a lnea en el servidor mediante el objeto ASP
FileSystemObject.
Para poder grabar deberemos disponer en el servidor de una carpeta que posea permiso de
escritura, caso contrario obtendremos un mensaje de error.
En nuestro ejemplo utilizamos una carpeta denominada XML y nuestro archivo
representantes.xml tendr las siguientes caractersticas:

Tendr un nodo (primer hijo) llamado arbitrariamente lista.

Dentro de lista tendremos tantos nodos area (hijos de lista) como reas tengamos.
Dentro de cada nodo area tendremos tantos nodos pais (hijos de cada area) como pases
tenga esa rea.
Dentro de cada nodo pais tendremos tantos nodos representantes como representantes
tenga ese pas.
Los nombres de cada Area, cada Pas y los datos de cada Representante (nombre, apellido,
etc.) los incluiremos como atributos de cada nodo bajo la forma de pares nombre = valor (por
ejemplo: apellido="Gonzalez").
En resumen, la estructura ser la siguiente:
<lista>
<area nombre="xx">
<pais nombre="yy">
<representante nombre="zz" apellido="zz" telefono="zz" email="zz">
</representante>
<representante nombre="zz" apellido="zz" telefono="zz" email="zz">
</representante>
</pais>
</area>
</lista>
Pgina 71 de 77
Volviendo al cdigo ASP, la lgica que seguiremos consiste en analizar para cada Area (bucle Do
While #1) qu Pases hay, para cada Pas (bucle Do While #2) qu Representantes hay y para
cada Representante (bucle Do While #3) cules son sus datos.
Ya disponemos de las Areas (en el Recordset rsAreas que obtuvimos ms arriba) por lo que
podemos armar los bucles y la escritura del XML de la manera que sigue:
El resto del cdigo
dim fso, archivo
Set fso = createobject("scripting.filesystemobject")
Set archivo = fso.CreateTextFile(Server.MapPath("xml/representantes.xml"), True)
archivo.WriteLine("<?xml version='1.0' encoding='ISO-8859-1'?>")
archivo.WriteLine("<lista>")
If rsAreas.RecordCount = 0 Then
'***no hay Areas con pases asociados => xml vaco /***
archivo.WriteLine("</lista>")
Else
rsAreas.MoveFirst
'Bucle Do While #1 - para cada Area
Do While Not rsAreas.EOF
'escribimos el nodo XML
archivo.WriteLine("<area nombre='" & rsAreas("NombreArea") & "'>")
'buscamos los Pases del Area que tengan Representantes, sin duplicados: DISTINCT
strSQLPaises = "SELECT DISTINCT Paises.IdPais, Paises.NombrePais FROM Paises " & _
"INNER JOIN Representantes ON Paises.IdPais = Representantes.PaisRepres " & _
" WHERE Paises.AreaPais =" & rsAreas("IdArea")
Set rsPaises = Server.CreateObject("ADODB.Recordset")
rsPaises.Open strSQLPaises, Conn, 1
If rsPaises.RecordCount <> 0 Then
'Bucle Do While #2 - para cada Pas
Do While Not rsPaises.EOF
archivo.WriteLine("<pais nombre='" & rsPaises("NombrePais") & "'>")
'buscamos los Representantes del Pas
strSQLRepre = "SELECT * FROM Representantes WHERE " & _
"PaisRepres=" & rsPaises("IdPais")
Set rsRepre = Server.CreateObject("ADODB.Recordset")
rsRepre.Open strSQLRepre, Conn, 1
If rsRepre.RecordCount <> 0 Then
'Bucle Do While #3 - datos de cada Representante
Do While Not rsRepre.EOF
archivo.WriteLine("<representante ciudad='" & rsRepre("CiudadRepres") & "' nombre='" & rsRepre("NombreRepres") &
' apellido='" & rsRepre("ApellidoRepres") & "' telefono='" & rsRepre("TelefonoRepres") & "' email='" & rsRepre
("EmailRepres") & "'>")
'cerramos el nodo de cada Representante
archivo.WriteLine("</representante>")
rsRepre.MoveNext
Loop
'cerramos y destruimos el recordset de Representantes
rsRepre.Close
Set rsRepre = Nothing
End If
'cerramos el nodo de cada Pas
archivo.WriteLine("</pais>")
rsPaises.MoveNext
Loop
'cerramos y destruimos el recordset de Pases
rsPaises.Close
Set rsPaises = Nothing
End If
'cerramos el nodo de cada Area
archivo.WriteLine("</area>")
rsAreas.MoveNext
Loop
'cerramos y destruimos el recordset de Areas
rsAreas.Close
Set rsAreas = Nothing
'cerramos el nodo principal
archivo.WriteLine("</lista>")
archivo.Close
Pgina 72 de 77
End If
En este punto tenemos una pgina ASP (representantes.asp) que cada vez que se ejecuta toma
los datos que existan en la base y los graba en un archivo con formato XML
(representantes.xml).
El archivo XML as generado puede verse en cualquier editor de textos aunque es mejor utilizar
algn editor XML como XML Editor o Notepad ++ [http://notepad-plus.sourceforge.net/es/site.htm]
(decarga gratuita).
Resultara conveniente (por no decir indispensable) hacer que representantes.asp se ejecute
cada vez que se realiza algn cambio en la base a travs del panel que utiliza la empresa para
actualizar sus datos. De ese modo garantizaremos que siempre se leern los datos ms
recientes disponibles.
De aqu en ms ...
En la parte 2 de este artculo: "de XML a Flash", desarrollaremos una pelcula Flash con la
programacin necesaria en ActionScript para leer y mostrar dinmicamente el contenido de
nuestro archivo XML, respetando exactamente la estructura de los datos guardados en la base.
De XML a Flash
Presentacin del archivo XML y algunas nociones sobre Arrays
En la primera parte de este articulo (Parte 1 -
de Access a XML
[http://www.desarrolloweb.com/articulos/de-acceess-a-xml.html])
desarrollamos una pgina ASP que, luego

de conectarse a una base de datos Access, recoga los datos correspondientes a los
representantes comerciales de una empresa ficticia y los volva a grabar en formato XML
respetando la estructura jerrquica original.
Esta jerarqua implicaba que los Representantes estaban divididos segn su Pas de residencia y
que a su vez los Pases estaban agrupados en Areas Geogrficas.
Independientemente de su origen (generado a partir de una base de datos o tipeado
directamente en un editor de texto) el archivo XML resultante tiene la estructura que se
muestra en la siguiente imagen:
Nota: no se muestran los datos, solo la arquitectura general del archivo para el utpico caso de un Area
con un solo Pas y dos Representantes.
Desarrollaremos el resto del trabajo dentro del Flash, desde donde cargaremos el contenido del
archivo XML en una serie de Arrays (o Matrices) que a su vez utilizaremos para mostrar
dinmicamente los datos.
En este contexto, dinmicamente significa que crearemos en tiempo de ejecucin los movieclips
que contendrn el texto que queremos mostrar.
Para tratar de que la cosa sea un poco ms clara comentaremos primero cules sern los
Arrays que utilizaremos:

Pgina 73 de 77
Un Array de Areas Geogrficas, cuyos elementos sern las Areas que se encuentren en el
XML. En el caso del ejemplo ser: areas = ["Amrica del Sur", "Amrica Central y Caribe",
"Amrica del Norte", "Europa"]
Un Array por cada Area Geogrfica, cuyos elementos sern los Pases que estn includos
en esa Area. Por ejemplo: Amrica del Sur = ["Argentina", "Brasil", "Chile", "Uruguay"]
Un Array por cada Pas, cuyos elementos sern los datos de cada uno de los
Reresentantes de ese Pas. Este Array es peculiar ya que sus elementos son en realidad
Arrays Asociativos, que guardan pares dato:"valor", y son especialmente tiles para los
datos personales de los Representantes. Veamos el ejemplo simplificado del Array
Argentina: Argentina = ["elem1", "elem2"] tiene dos asociativos: elem1 =
{ciudad:"Buenos Aires",nombre:"Alejandro",apellido:"Gonzlez",etc.} elem2 =
{ciudad:"Crdoba",nombre:"Mabel",apellido:"Lucero",etc.} Para acceder a sus valores:
Argentina [0].nombre = Alejandro Argentina[1].ciudad = Crdoba
Trabajando en Flash con ActionScript

Ya con el Flash, abrimos una nueva pelcula que denominaremos representantes.fla.
Denominaremos la primera capa como 'actionscript' y all colocaremos todo el cdigo utilizando
el Panel de Acciones (F9 para abrir).
En el fotograma 1 colocaremos primero el cdigo encargado de:

Cargar los datos del XML dentro de un Objeto XML del Flash
Construir el esquema de Arrays que analizamos un poco ms arriba
Utilizaremos tres bucles for anidados (Areas, Pases de cada Area y Representantes de cada
Pas). Debemos recordar que desconocemos de antemano el nombre que tomarn la mayora
de los Arrays (dependern de los datos contenidos en el XML), por lo que debern declararse
como _root[nombre_variable] (sin punto).
Cargar datos y armar Arrays
// Nos aseguramos que se muestren bien los acentos
System.useCodepage = true;
// Creamos el objeto que guardar los datos del archivo XML
represXML = new XML();
represXML.ignoreWhite = true;
//Cargamos el archivo XML en el objeto recin creado
represXML.load("../xml/representantes.xml");
// Cuando termina de cargar lo mandamos a organizar para poder mostrar los datos
represXML.onLoad = organizarXML;
stop();
// Esta es la funcin encargada de armar los Arrays a partir de los datos
function organizarXML() {
// Array para las Areas Geogrficas
areas = new Array();
// Primer bucle para buscar Areas revisando todos los primeros nodos
// ejemplo: Amrica del Sur, Amrica Central, etc.
for (yy=0; yy<represXML.firstChild.childNodes.length; yy++) {
// Agregar el nombre del Area (guardado como Atributo) al Array de Areas Geogrficas
areas.push(represXML.firstChild.childNodes[yy].attributes.nombre);
// Crear un Array con el nombre de cada una de las reas encontradas
_root[represXML.firstChild.childNodes[yy].attributes.nombre] = new Array();
// Segundo bucle para buscar el nombre de los Pases (atributo) de cada Area
// ejemplo: Argentina, Brasil, etc.
for (aa=0; aa<represXML.firstChild.childNodes[yy].childNodes.length; aa++) {
// Agregar el nombre del Pas al Array del Area a la que pertenece
_root[represXML.firstChild.childNodes[yy].attributes.nombre].push( represXML.firstChild.childNodes[yy].childNodes
[aa].attributes.nombre);
// Utilizar el nombre de cada Pas (ejemplo: Argentina) para crear un nuevo Array
// donde se van a guardar los datos de los Representantes que pertenecen a ese pas
_root[represXML.firstChild.childNodes[yy].childNodes[aa].attributes.nombre] = new Array();
// Tercer bucle para entrar a cada Representante y leer sus atributos
for (bb=0; bb<represXML.firstChild.childNodes[yy].childNodes[aa].childNodes.length; bb++) {
// Crear un Objeto para guardar los datos de cada Representante como si fueran propiedades del Objeto (array
Pgina 74 de 77
asociativo con pares dato:"valor" )

repre = new Object();
repre.ciudad = represXML.firstChild.childNodes[yy].childNodes[aa].childNodes[bb].attributes.ciudad;
repre.nombre = represXML.firstChild.childNodes[yy].childNodes[aa].childNodes[bb].attributes.nombre;
repre.apellido = represXML.firstChild.childNodes[yy].childNodes[aa].childNodes[bb].attributes.apellido;
repre.telefono = represXML.firstChild.childNodes[yy].childNodes[aa].childNodes[bb].attributes.telefono;
repre.email = represXML.firstChild.childNodes[yy].childNodes[aa].childNodes[bb].attributes.email;
// Agrego el Objeto (datos representante) al Array del pas
_root[represXML.firstChild.childNodes[yy].childNodes[aa].attributes.nombre].push(repre);
// Elimino el Objeto
delete repre;
}
}
}
// Mandamos los datos ya organizados a que se muestren (la funcin est ms abajo)
mostrarDatos();
}
En este punto tenemos nuestros datos poblando una serie de Arrays y solo nos resta mostrarlos
ordenadamente.
Mostrar los datos dinmicamente

Dado que disponemos de tres tipos de datos: Area, Pas y los datos del Representante,
agregaremos a la Biblioteca tres movieclips. Cada movieclip tendr como contenido cajas de
texto dinmico que mostrarn el contenido de las siguientes variables:

mc_areas (identificador para linkage: mc_areas): tx_area

mc_paises (identificador para linkage: mc_paises): tx_pais
mc_repres (identificador para linkage: mc_repres): tx_ciudad, tx_nom_ape, tx_telefono y
tx_email
Por ejemplo, para el mc_areas:
Como estos movieclips se agregarn al escenario dinmicamente debemos indicarle al Flash

que los exporte para ser utilizados en tiempo de ejecucin. Esto lo realizamos indicando un
identificador para Linkage, que por comodidad establecemos igual al nombre del movieclip.
Para establecer el identificador se debe pulsar con el botn derecho del mouse sobre el
movieclip en la Biblioteca y seleccionar Linkage en el men emergente.
Bsicamente lo que haremos ser crear un movieclip vaco que denominaremos "contenedor",
que contendr la lista en s, utilizando createEmptyMovieClip(nombre de instancia, nivel).
De un modo similar a lo que hicimos antes, utilizaremos tres bucles for anidados para recorrer
nuestros Arrays e iremos sucesivamente agregando a "contenedor" instancias de los movieclips
que tenemos en la Biblioteca mediante attachMovie(id. de linkage, nombre de instancia, nivel).
Como la lista resultar extensa (tendr un desarrollo vertical mayor que el alto de la pelcula)
crearemos otro movieclip vaco (denominado "mc_msk") y dentro dibujaremos con ActionScript
un rectngulo del tamao apropiado para oficiar de "ventana". Colocando a "mc_msk" como
mscara de "contenedor" lograremos ocultar el sobrante de la lista y solo restar hacer que
"contenedor" se deslice hacia arriba y hacia abajo dentro de ciertos lmites para que todos los
Representantes resultes visibles.
Pgina 75 de 77
El siguiente cdigo contina al anterior:

function mostrarDatos() {
// Creamos un mc vaco para encapsular la lista de Representantes
// y lo posicionamos en el escenario principal
_root.createEmptyMovieClip("contenedor", 300);
_root.contenedor._x = 10;
_root.contenedor._y = 50;
// Construmos la lista
intContaPaises = 0;
intContaRepres = 0;
intPosicion = 0;
intSeparar = 50;
// Para cada una de las Areas
for (aa=0; aa<areas.length; aa++) {
_root.contenedor.attachMovie("mc_areas", "mc_areas"+aa, aa);
_root.contenedor["mc_areas"+aa]._y = (intPosicion * intSeparar);
_root.contenedor["mc_areas"+aa]._x = 25;
_root.contenedor["mc_areas"+aa].tx_area = areas[aa];
intPosicion++;
// Para cada uno de los Pases del Area
for (bb=0; bb<_root[areas[aa]].length; bb++) {
_root.contenedor.attachMovie("mc_paises", "mc_paises"+intContaPaises, 100+intContaPaises);
_root.contenedor["mc_paises"+intContaPaises]._y = (intPosicion * intSeparar);
_root.contenedor["mc_paises"+intContaPaises]._x = 45;
_root.contenedor["mc_paises"+intContaPaises].tx_pais = _root[areas[aa]][bb];
intPosicion++;
// Para cada Representante de cada Pas
for (cc=0; cc<_root[_root[areas[aa]][bb]].length; cc++) {
_root.contenedor.attachMovie("mc_repres", "mc_repres"+intContaRepres, 200+intContaRepres);
_root.contenedor["mc_repres"+intContaRepres]._y =(intPosicion * intSeparar);
_root.contenedor["mc_repres"+intContaRepres]._x = 55;
_root.contenedor["mc_repres"+intContaRepres].tx_ciudad = _root[_root[areas[aa]][bb]][cc].ciudad;
_root.contenedor["mc_repres"+intContaRepres].tx_nom_ape = _root[_root[areas[aa]][bb]][cc].nombre + " " + _root
[_root[areas[aa]][bb]][cc].apellido;
_root.contenedor["mc_repres"+intContaRepres].tx_telefono = _root[_root[areas[aa]][bb]][cc].telefono;
_root.contenedor["mc_repres"+intContaRepres].tx_email = _root[_root[areas[aa]][bb]][cc].email;
intPosicion++;
intContaRepres++;
}
intContaPaises++;
}
}
// Creamos un nuevo mc en el que dibujamos un rectngulo con las dimensiones
// apropiadas para el tamao de nuestra pelcula
_root.createEmptyMovieClip("mc_msk", 301);
mc_msk._x = 10;
mc_msk._y = 50;
// Dibujamos el rectngulo (en este caso de 530px de ancho por 350px de alto)
// No importan los colores de trazo y relleno porque no se ver, lo utilizaremos como mscara.
with (mc_msk) {
beginFill(0xff0000,50);
lineStyle(1,0x00ff00,100);
lineTo(530,0);
lineTo(530,350);
lineTo(0,350);
lineTo(0,0);
endFill();
}
// Enmascaramos el listado con el recuadro que acabamos de dibujar y LISTO! ;-)
_root.contenedor.setMask(mc_msk);
}
Como ltimo detalle ponemos el cdigo de los botones que manejan el scroll de "contenedor":
Botn Subir:
on (release) {
if (_root.contenedor._y < _root.mc_msk._y) {
_root.contenedor._y += _root.intSeparar;
}
}
Botn Bajar:
on (release) {
if (_root.contenedor._y > _root.mc_msk._height - _root.contenedor._height) {
Pgina 76 de 77
_root.contenedor._y -= _root.intSeparar;
}
}
Al ejecutar la pelcula terminada se obtendr un resultado similar al de la siguiente imagen,

dependiendo de los detalles accesorios de presentacin que se agreguen:
Autores del manual:

Hay que agradecer a diversas personas la dedicacin prestada para la creacin de este manual.
Sus nombres junto con el nmero de artculos redactados por cada uno son los siguientes:
Rubn Alvarez
(9 captulos)
Ludwing Rodriguez
http://www.progresivoweb.com/
(6 captulos)
Ivett Kelemen
Diseo y desarrollo de sitios web
http://www.ivettkelemen.com/
(7 captulos)
Galileo
(1 captulo)
Susana Ros Suanes

Docente de Lgica.
http://www.delphi.todouy.com/
(7 captulos)
Pgina 77 de 77
Carlos Carmona
http://www.scourdesign.com/
(2 captulos)
Fernando Campaa
Programacin - Multimedia
http://www.rakidwam.com.ar/
(2 captulos)
Todos los
derechos de reproduccin y difusin [http://www.desarrolloweb.com/copyright/]

Multimedia S.L. [http://www.guiartemultimedia.com/]
Volver [http://www.desarrolloweb.com/manuales/39]
reservados a
Guiarte

Manual Flash DesarrolloWeb

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Manual Flash DesarrolloWeb

Загружено:

Авторское право:

Доступные форматы

Manual de Flash - Manual completo

Prlogo del manual de Flash

La lista de ayuda de DesarrolloWeb [http://www.desarrolloweb.com/listacorreo/], donde podrs plantear

Para finalizar, os rogamos que nos contactis [http://www.desarrolloweb.com/contacta/contacta.php?

Manual de Flash - Manual completo

Como puede que sepis, existen dos tipos de grficos:

Entorno de trabajo en Flash

Modo diseador, destinado a crear animaciones y grficos

Manual de Flash - Manual completo

Dentro de esta interface, podemos distinguir tres partes principales:

La caja de herramientas Aqu encontraremos las herramientas de edicin grafica que

Capas y fotogramas en Flash

Manual de Flash - Manual completo

Imgenes clave Se trata de las imgenes que nosotros mismos dibujaremos

Clases y objetos en Flash

Manual de Flash - Manual completo

Con las herramientas de dibujo de FLASH hice este ciprs.

6 private function Arrastrar():Void{

class Arrastre nos dice que se define una nueva clase

Manual de Flash - Manual completo

La subclase Arrastre qued definida.

Manual de Flash - Manual completo

Manual de Flash - Manual completo

Aqu tienes el clip editado y en el primer fotograma.

Manual de Flash - Manual completo

Y as logramos el efecto calesita de girar y volver al primer fotograma.

ver el ejemplo funcionando aqui [http://www.delphi.todouy.com/flash/extends/dibujo.swf].

Manual de Flash - Manual completo

Mi primera animacin en Flash I

Para crear nuestro smbolo en la biblioteca:

Manual de Flash - Manual completo

Al rellenar debidamente la ventana anterior y Aceptar, veremos como el escenario se agranda y

Manual de Flash - Manual completo

En este panel, seleccionaremos en el men desplegable la opcin Radial. Veremos como la

Manual de Flash - Manual completo

Mi primera animacin en Flash II

Manual de Flash - Manual completo

La esfera situada en primer plano al principio de su movimiento.

De modo que ya disponemos de la primera imagen clave. Ahora, introduciremos la segunda en

Manual de Flash - Manual completo

Insertamos una imagen clave en la capa 1, ms o menos sobre el fotograma 15.

Modificamos este nuevo fotograma clave.

A continuacin vamos a crear el tercer y ultimo fotograma clave, correspondiente al momento

Insertamos un fotograma clave vaco en el fotograma 29 (Insertar>Fotograma clave

El resultado es un fotograma idntico al 1 en el cual deberemos mover ligeramente la

Manual de Flash - Manual completo

Mi primera animacin en Flash III

Creamos la gua de movimiento. Para ello, seleccionamos la capa 1 (o donde hayamos

Con la herramienta lazo, seleccionamos la mitad (izquierda o derecha, como prefieras) y

Manual de Flash - Manual completo

simultanea de varios fotogramas. De este modo, podemos seleccionar una de las

Mi primera animacin en Flash IV

Manual de Flash - Manual completo

Ya tenemos construida la animacin. Para probarla rpidamente podemos hacer:

Colocar pelculas Flash en nuestras pginas

Manual de Flash - Manual completo

1. Cuando tu pelcula Flash este terminada, guardada y probada (CTRL+Enter), debes

Cmo hacer botones en Flash

2- En Nombre (Name), escribe "botn 1", en Comportamiento (Behavior) selecciona la opcin

Manual de Flash - Manual completo

Expliquemos el grfico anterior:

Manual de Flash - Manual completo

ver un ejemplo del botn creado siguiendo estos pasos

Enlazar pginas web por medio de botones Flash