Documentos de Académico
Documentos de Profesional
Documentos de Cultura
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
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
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.
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:
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.
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:
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.
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
function Arrastre() {
onPress=Arrastrar;
onRelease=Soltar;
}
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 {
Pgina 6 de 77
4 onRelease=Soltar;
5}
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
Pgina 9 de 77
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.
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.
Pgina 12 de 77
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.
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:
Podemos ver cuales serian estas tres imgenes clave en el siguiente esquema:
Pgina 15 de 77
el lugar aproximado que le correspondera. Para ello llevamos a cabo las siguientes
operaciones:
La figura siguiente os ilustra la tarea de redimensionamiento y os da una idea del aspecto que
debe tener el fotograma una vez modificado:
Pgina 16 de 77
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:
Pgina 17 de 77
Pgina 18 de 77
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.
Pgina 19 de 77
No es necesario que subas a tu servidor el archivo .fla, ya que el .swf y .html no lo necesitarn.
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:
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
[http://www.desarrolloweb.com/articulos/ejemplos/flash/boton.html].
Pgina 22 de 77
Pgina 23 de 77
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
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:
Pgina 25 de 77
y completamos el
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).
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
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:
Pgina 30 de 77
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
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.
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.
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.
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.
.avi
Quick Time
.mpeg
Digital 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.
Ahora vamos a ver cmo podemos aplicar las modificaciones de smbolos en la secuencia de
vdeo.
Pgina 35 de 77
dondiegote [http://www.thelirios.com/],
Para que esta frase tenga sentido para todos vosotros, lo mejor es que veamos una de sus
ltimas aportaciones.
Se plante en el foro
Pgina 36 de 77
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
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:
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
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
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;
}
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";
setProperty("ayudar8",
_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
setProperty("ayudar5",
_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:
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
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){
clipbruja.gotoAndStop
(2);
clipbruja._y =
clipbruja._y -20;
}
Pgina 48 de 77
on(press){
clipbruja.gotoAndStop
(3);
clipbruja._x =
clipbruja._x + 20;
}
on(press){
clipbruja.gotoAndStop
(4);
clipbruja._y =
clipbruja._y + 20;
}
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)){
clipbruja.gotoAndStop(2);
if (clipbruja._y >= 0){
clipbruja._y = clipbruja._y - 10;
}else{
clipbruja._y=550;
}
}
Pgina 50 de 77
if (Key.isDown(Key.RIGHT)){
clipbruja.gotoAndStop(3);
if (clipbruja._x <= 960){
clipbruja._x = clipbruja._x + 10;
}else{
clipbruja._x=0;
}
}
if (Key.isDown(Key.DOWN)){
clipbruja.gotoAndStop(4);
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
}
Pgina 51 de 77
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);
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 <
_root.clipbruja._y+105)){
clip_y = clip_y; clip.stop();
clip._visible=false;
}
}
a = getTimer();
momento = a/100;
b = int(momento)
c=b/10;
if(c >1){invade(m1);}
if(c >3){invade(m10);}
if(c >5){invade(m3);}
if(c >7){invade(m8);}
if(c >9){invade(m5);}
if(c >11){invade(m9);}
if(c >13){invade(m2);}
if(c >15){invade(m6);}
if(c >17){invade(m7);}
if(c >19){invade(m4);}
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;
function invade(clip){
if(clip._y <540){
clip._y=clip._y+1;
}
Pgina 53 de 77
Pgina 54 de 77
if(c >1){invade(m1);}
if(c >3){invade(m10);}
if(c >5){invade(m3);}
if(c >7){invade(m8);}
if(c >9){invade(m5);}
if(c >11){invade(m9);}
if(c >13){invade(m2);}
if(c >15){invade(m6);}
if(c >17){invade(m7);}
if(c >19){invade(m4);}
if(c>44){
contador = 0;
if(m1._visible==false){ contador = contador+1;}
if(m2._visible==false){ contador = contador+1;}
if(m3._visible==false){ contador = contador+1;}
if(m4._visible==false){ contador = contador+1;}
if(m5._visible==false){ contador = contador+1;}
if(m6._visible==false){ contador = contador+1;}
if(m7._visible==false){ contador = contador+1;}
if(m8._visible==false){ contador = contador+1;}
if(m9._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.
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
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;
}
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.)
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;
}
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,
[http://www.scourdesign.com/articulos/tutoriales/flash/descargas/10.zip]
Un saludo.
Si lo deseas, puedes
Pgina 60 de 77
[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":
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
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:
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:
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,
[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
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
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
'escribimos el nodo XML
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
'escribimos el nodo XML
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])
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
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
En este punto tenemos nuestros datos poblando una serie de Arrays y solo nos resta mostrarlos
ordenadamente.
Pgina 75 de 77
Pgina 76 de 77
_root.contenedor._y -= _root.intSeparar;
}
}
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)
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
reservados a
Guiarte