Flash para Revisar

Fundamentos necesarios para que puedas desenvolverte fácilmente
en el entorno de trabajo de Flash. Veremos los conceptos básicos

necesarios para el buen uso de esta tecnología y describiremos el
empleo de las herramientas más comúnmente utilizadas.
Listado de los capítulos

1.- Prólogo del manual de Flash
Comenzamos el tutorial de Flash... Entrar
2.- Qué es Flash

Descripción de esta tecnología vectorial. Entrar
3.- Entorno de trabajo en Flash

Describimos la interface de la aplicación Flash MX. Entrar
4.- Capas y fotogramas en Flash

Explicamos los conceptos de capas y fotogramas y su uso. Entrar
5.- Clases y objetos en Flash

Cómo construir clases y objetos en Flash. Entrar
Comenzamos el tutorial de Flash...
Por Rubén Alvarez
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
Bienvenido al manual de Flash de DesarrolloWeb.
El objeto de este manual es el de proporcionar los fundamentos necesarios para que puedas
desenvolverte fácilmente en el entorno de trabajo de Flash. A lo largo de estos artículos,
vamos a abordar los conceptos básicos necesarios para el buen uso de esta tecnología y
describiremos el empleo de las herramientas más comúnmente utilizadas.
Este tutorial no pretende ser una descripción exhaustiva de la aplicación Flash. Deseamos,
más bien, dejar sentadas las nociones que os ayudarán a tener las ideas claras a la hora de
plantear vuestro proyecto. Así que os dejamos a vosotros mismos la oportunidad de ver a
fondo todas las posibilidades que este programa ofrece, algo que podréis descubrir a medida
que creáis vuestras propias animaciones.
Aparte de este manual, los elementos que necesitáis para crear vuestras animaciones son
más bien pocos: La aplicación Flash, que puedes descargar en versión de prueba en el sitio
de Macromedia, un navegador web y un editor de texto como el bloc de notas de Windows.
Esperamos que el manual resulte de vuestro agrado y os invitamos a complementar su
aprendizaje con otro tipo de servicios que pueden ayudaros en vuestra progresión:
• La lista de ayuda de DesarrolloWeb, donde podrás plantear tus dudas a otros
desarrolladores al mismo tiempo que contribuyes al intercambio de conocimientos.

• Los foros de Flash, en los que podrás intercambiar más información sobre temás
relativos a esta tecnología.

• Los recursos Flash, sitios web en los que podrás encontrar información, sonidos,
animaciones y otros recursos de interés.
Para finalizar, os rogamos que nos contactéis si encontráis algún tipo de errata en el manual
y que no dudéis en aportar cualquier tipo de complemento a los capítulos añadiendo un
comentario por medio del enlace previsto a ese efecto al pie de cada capítulo.
Descripción de esta tecnología vectorial.

Por Rubén Alvarez
Probablemente, uno de los avances más importantes en materia de diseño en el web ha sido
la aparición de la tecnología desarrollada por Macromedia denominada Flash.
Flash es la tecnología más comúnmente utilizada en el Web que permite la creación de

animaciones vectoriales. El interés en el uso de gráficos vectoriales es que éstos permiten
llevar a cabo animaciones de poco peso, es decir, que tardan poco tiempo en ser cargadas
por el navegador.
Como puede que sepáis, existen dos tipos de gráficos:
• Los gráficos vectoriales, en los cuales una imagen es representada a partir de
líneas (o vectores) que poseen determinadas propiedades (color, grosor...). La
calidad de este tipo de gráficos no depende del zoom o del tipo de resolución con el
cual se esté mirando el gráfico. Por mucho que nos acerquemos, el gráfico no se
pixeliza, ya que el ordenador traza automáticamente las líneas para ese nivel de
acercamiento.
• Las imágenes en mapa de bits. Este tipo de gráficos se asemejan a una especie
de cuadrícula en la cual cada uno de los cuadrados (píxeles) muestra un color
determinado. La información de estos gráficos es guardada individualmente para
cada píxel y es definida por las coordenadas y color de dicho píxel. Este tipo de
gráficos son dependientes de la variación del tamaño y resolución, pudiendo perder
calidad al modificar sucesivamente sus dimensiones.
Así, Flash se sirve de las posibilidades que ofrece el trabajar con gráficos vectoriales,
fácilmente redimensionables y alterables por medio de funciones, así que de un
almacenamiento inteligente de las imágenes y sonidos empleados en sus animaciones por
medio de bibliotecas, para optimizar el tamaño de los archivos que contienen las
animaciones.
Esta optimización del espacio que ocupan las animaciones, combinada con la posibilidad de
cargar la animación al mismo tiempo que ésta se muestra en el navegador (técnica
denominada streaming), permite aportar elementos visuales que dan vida a una web sin que
para ello el tiempo de carga de la página se prolongue hasta límites insoportables por el
visitante.
Además de este aspecto meramente estético, Flash introduce en su entorno la posibilidad de
interaccionar con el usuario. Para ello, Flash invoca un lenguaje de programación llamado
Action Script. Orientado a objetos, este lenguaje tiene claras influencias del Javascript y
permite, entre otras muchas cosas, gestionar el relleno de formularios, ejecutar distintas
partes de una animación en función de eventos producidos por el usuario, saltar a otras
páginas, etc.
De este modo, Macromedia pone a nuestra disposición una tecnología pensada para aportar
vistosidad a nuestra web al mismo tiempo que nos permite interaccionar con nuestro
visitante. Por supuesto, no se trata de la única alternativa de diseño vectorial aplicada al
Web pero, sin duda, se trata de la más popular y más completa de ellas.
Describimos la interface de la aplicación Flash MX.

Por Rubén Alvarez
Las animaciones Flash son producidas en una aplicación de diseño. Se puede descargar dicha
aplicación en versión prueba desde el sitio de Macromedia.
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 aplicación 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 aplicación.
Para la redacción de este manual, nos hemos servido de Flash MX. Cabe esperar que lo dicho
para esta versión sea aplicable en gran medida a las versiones precedentes y las que salgan
en un futuro.
Nada más instalar y abrir la aplicación por primera vez, accederemos a una ventana de
diálogo que nos propone tres modos de uso distintos:
• Modo diseñador, destinado a crear animaciones y gráficos
• Modo general, en el que dispondremos de todas las opciones de Flash además de la
ayuda.
• Modo desarrollador, enfocado a la creación 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 sección 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
edición de gráficos. En cierto modo es como el papel en el cual dibujaremos lo que
haga falta.
• La línea de tiempo Esta sección es donde podremos organizar en el tiempo cada
una de las imágenes diseñadas 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 gestión de los fotogramás. Ambos elementos, capas y
fotogramás serán tratados más adelante.
• La caja de herramientas Aquí encontraremos las herramientas de edición grafica
que Flash pone a nuestra disposición. Como puede observarse, éstas son muy
parecidas a las que podemos encontrar en otros programás de edición grafica que ya
sea vectorial o no.
Explicamos los conceptos de capas y fotogramas y su uso.

Por Rubén Alvarez
Como hemos dicho en el capítulo anterior, la línea de tiempo es donde podremos organizar la
sucesión de imágenes que dan lugar a una animación. En este capítulo introduciremos los
conceptos de capa y fotograma, vitales para una compresión del funcionamiento de Flash.
En cierta medida, Flash trabaja como si fuese una película. Una animación es una sucesión
de imágenes fijas que, al pasar rápidamente unas detrás de otras, dan la impresión de un
movimiento. Cada una de estas imágenes fijas es llamada también fotograma. Los
fotogramas son representados bajo forma de rectángulos en la parte derecha del escenario.
En estos rectángulos podemos alojar tres tipos diferentes de imágenes:
• Imágenes clave Se trata de las imágenes que nosotros mismos dibujaremos
• Imágenes fijas Son las imágenes claves copiadas en los fotogramas siguientes al
de la primera imagen clave de manera a producir un efecto de objeto estático.

• Imágenes de interpolación Se trata de imágenes calculadas por Flash que
permiten la transición gradual entre dos imágenes claves. Este tipo de imágenes muy
útiles ya que se generan automáticamente y proporcionan un efecto suave de
movimiento o transformación.
Por otra parte, una animación esta generalmente constituida de una variedad de objetos
diferentes, cada uno de los cuales se introduce en un momento diferente y presenta un
comportamiento independiente al resto de los objetos. De manera a organizar y editar todos

estos elementos Flash permite el uso de capas o calcos.
Así, una animación Flash esta compuesta de una superposición de capas en cada una de las
cuales introduciremos un objeto que tendrá su propia línea de fotogramas. Estas capas nos
permiten trabajar la animación en distintos planos independientes.
Por defecto, al comenzar una nueva escena encontraremos en nuestra línea de tiempo una
sola capa. Progresivamente iremos introduciendo más capas que nos permitan separar cada
uno de los elementos de la animación: objetos, fondo, sonidos o trayectorias.
Un uso inteligente de las capas es la base para crear animaciones de calidad.
Cómo construir clases y objetos en Flash.

Por Susana Ríos Suanes
Como esta es la primera vez que escribo sobre Clases y Objetos, veo que es necesario
insistir en la diferencia entre clase y objeto.
Comencé con el concepto del hombre en su acepción de todo el género humano.
Buscando un concepto lógico pedí por Google "Ferrater Mora concepto hombre" y es
apasionante leer como refuta cada definición: Ser racional, Homo sapiens, Homo faber,
Homo symbolicus, etc. Y al fin da su definición "El hombre es «un modo de ser su cuerpo»" y
la explica largamente.
Por si desea leerla, aquí está:
http://www.ferratermora.com/lang_palabras_section.html
De todos modos doy por hecho que cualquiera sea la idea que ustedes tienen de el ser
humano, saben que es un concepto, una definición, una clase. Y que Juan Pérez, mi vecino y
María Duarte, su esposa son realidades, instancias de la clase. El objeto es la idea hecha
realidad.
Una clase se va ampliando en nuevas clases: La clase arquitecto es para nosotros la idea del
hombre, a la que sumamos la idea del que ha obtenido el título de arquitecto. Pero no deja
de ser una idea.
Para concretarse en realidad tiene que ser vivo y haber estudiado y obtenido su diploma
FLASH CLASES Y OBJETOS
Con las herramientas de dibujo de FLASH hice este ciprés.
Lo convertí en clip de película:

seleccionar -->modificar-->convertir en símbolo-->clip de película Le puse por nombre
cipres.Sin embargo sigue siendo una clase común de clip.
Está en la biblioteca como están en nuestra mente cualquier clase general como europeo,
americano, álamo, sauce. Si lo traigo al escenario, ha nacido. Es un objeto que ocupa un
lugar en el espacio y ya tiene precisas sus coordenadas x, y.
Pero en cuanto a su naturaleza de clip de película solamente se diferencia de otro clip por su
forma. Y no puede hacer nada distinto a cualquier otro clip.
Por ejemplo: Si quiero arrastrarlo con el ratón tendré que programarlo en su propio panel de
acciones o en el fotograma de la línea del tiempo, o agregando un botón
La palabra clave extends
La palabra clave extends nos permite extender, ampliar una clase con otras ya definidas en
FLASH. Dentro de la clase métodos de MovieClipentre otras subclases están definidas la clase
startDrag y la clase stopDrag Y la palabra extends nos permite definir una nueva clase,
ampliando la clase MovieClip de modo que lleve dentro de sí, la capacidad de responder a las
funciones de startDrag y stopDrag.
Para hacer esto, debemos escribir un script directamente en un archivo ActionScript
Archivo -->Nuevo-->ArchivoActionScript y lo guardas en la misma Carpeta donde guardas el
archivo .fla
El nombre del archivo debe ser exactamente el mismo que la clase. Si es Arrastre.as, la clase
es Arrastre y no arrastre (con la inicial en minúscula)
Numeré y separé las partes del script para explicarlos mejor.
Se nos ocurrió el nombre Arrastre para esta sub clase, así que en el renglón 1 en la sintaxis
de Flash dice:
1 class Arrastre extends MovieClip {
2 function Arrastre() {
3 onPress=Arrastrar;
4 onRelease=Soltar;
5 }
6 private function Arrastrar():Void{
7 this.startDrag();
8 }
9 private function Soltar():Void{
10 this.stopDrag();
11 }
12 }
Esta clase se llama Arrastre y amplía la clase MovieClip. La palabra extends significa que si
bien se trata de una ampliación no estamos inventando nada nuevo, sino que estamos
construyendo con clases ya definidas en el sistema de FLASH.
Volvemos a la sintaxis de la línea 1 que abre la llave que se cierra en la línea 12.
class Arrastre extends MovieClip {
class Arrastre nos dice que se define una nueva clase
extends MovieClip aclara que es una subclase de la clase MovieClip y que por lo tanto hereda
todo lo que en ella está definido. Extends crea la relación de subordinación entre las dos
clases
A continuación hay que escribir una función que tenga el mismo nombre que la clase y que
explicite con claridad de que se trata esta subclase.
Se trata de una subclase de MovieClip que atiende a las órdenes de Arrastrar y Soltar.
Esos nombres también los elegimos nosotros y lo decimos en las líneas 2, 3, 4 y 5.
4 onRelease=Soltar;
5 }
La subclase Arrastre quedó definida.
A la presión del mouse Arrastrar y cuando se levanta la presión Soltar Pero ahora hay que
explicar que quieren decir exactamente esas dos palabras nuevas
7 this.startDrag();
8 }
Creamos una función privada para esta clase de clip que no retorna ningún valor. Por eso
Void (por ejemplo no devuelve una string, o un número)
Simplemente ordena para éste clip que se está presionando (this) la función ya definida
startDrag()
Y en las líneas 9,10 y 11 definimos la función para Soltar.
Ahora tenemos que hacer que el clip cipres que tenemos en biblioteca posea la clase Arrastre
que hemos definido.
Dentro de la biblioteca seleccionas el clip y pulsas Propiedades con el botón derecho del
ratón. Si no aparece un cuadro grande como el que ves pulsa Avanzado.
Exporta para ActionScript, y en Clase de ActinScript 2.0 escribe Arrastre
Si todo está como en la figura, pulsas aceptar.
Ahora trae al escenario unos cuantos ciprés grabas y corres el programa para probar si
puedes arrastrarlos.
En esta aplicación dibujo.fla participan de la clase arrastre cada una de las piezas que
forman la casa y también el árbol que está detrás de ella.
Como ejercicio crea otro clip y luego en biblioteca le puedes agregar pulsando Propiedades
su participación en esta nueva clase que ya la has puesto como archivo Arrastre.as en tu
carpeta.
También hemos creado otra clase de este mismo tipo que nombramos Calesita
A ella pertenecen, el clip Flores que ves como pastito, el clip sauce y el clip VerNover que es
el texto de entrada.
Clip Calesita
Aquí tienes el script Calesita.as
Por supuesto tienes que crearlo haciendo Archivo -->Nuevo-->ArchivoActionScript copiarlo
tal cual está ahí y guardarlo en la misma carpeta.
La funciones que definen a la clase Calesita son Clic y Soltar
La clase Clic se define con las funciones del sistema start Drag que usamos en la anterior y
nextFrame que nos interesa especialmente porque vamos a hacer MovieClips de varios
fotogramas.
La función Soltar es la misma que ya definimos en la clase Arrastre
class Calesita extends MovieClip {
function Calesita() {
onPress=Clic;
onRelease=Soltar;
private function Clic(clip):Void{
this.nextFrame();
this.startDrag();
private function Soltar():Void{
this.stopDrag();
clip VeroNover
Aquí tienes el clip editado y en el primer fotograma.
La acción del fotograma es stop();
Tiene dos gráficos:
El texto:
"Ver/ocultar este texto"
Y debajo el texto largo.
El primer texto mide 156 x 20 y por eso lo colocamos en -78 para x y en -10 para y.
El segundo texto, debajo y más o menos que su mitad coincida con la del primero. En el
segundo fotograma la acción es stop();y ponemos solamente el gráfico chico.
En el último fotograma no ponemos ningún gráfico y su acción es: gotoAndStop(1)
Y así logramos el efecto calesita de girar y volver al primer fotograma.
No olvides, lo que explicamos en el comentario anterior:
Hay que exportarlo para ActionScript y escribir la nueva clase en la ventanita
correspondiente.
Los otros clip no necesitan explicación.
Lo importante es que todos los fotogramas llevan la acción stop(); menos el último que debe
mandar al primero.
gotoAndStop(1);
El uso de bibliotecas. Concepto de simbolo y ocurrencia.

Por Rubén Alvarez
En el capítulo precedente introducimos el concepto de capa y fotograma y subrayamos la
necesidad de utilizarlos inteligentemente. Otro elemento de Flash que necesita una gestión lo
más sabia posible es la biblioteca.

Como dijimos previamente, Flash permite la optimización del espacio ocupado por la
animación, 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 más que un almacén de objetos (gráficos o sonidos) que podrán ser
utilizados en una misma animación en una o más ocasiones. Dependiendo del rango que
presente esta biblioteca, ésta puede ser propia a la animación, compartida por varias
animaciones, o bien permanente (empleada por la totalidad de animaciones).
Cada uno de los elementos que constituyen una biblioteca son denominados símbolos.
Como hemos dicho, estos elementos podrán ser utilizados en nuestra animación cuantas
veces lo deseemos. No obstante, cada una de estas utilizaciones no es llamada símbolo, sino
ocurrencia.
Por lo tanto, una ocurrencia es cada una de las ocasiones en las que un símbolo
almacenado en nuestra biblioteca es utilizado en nuestra animación.
Cambiando las propiedades de un símbolo de la biblioteca , cambiamos todas cada una de
las ocurrencias que aparecen en la animación. Contrariamente, la modificación de una
ocurrencia no altera al símbolo de la biblioteca ni a las otras ocurrencias de la animación.
Como podemos observar, el uso de las bibliotecas no solo nos ayuda a aligerar el archivo,
sino que nos permite una creación, edición y borrado rápidos de cada una de las ocurrencias.
En capítulos posteriores abordaremos con más detalle la gestión de bibliotecas símbolos y
ocurrencias. Pasaremos a continuación a la aplicación de lo aprendido a partir de la creación
de una animación.
Creación de un símbolo en nuestra biblioteca flash.

Por Rubén Alvarez
Después de haber introducido los conceptos básicos 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 línea de tiempo, nuestra animación consta de una sola capa y
un único fotograma representado por un rectángulo con un círculo. Este círculo significa que
se trata de un fotograma que contiene una imagen clave vacía.
La animación que pretendemos crear consiste en un movimiento de traslación de una esfera
con una trayectoria elíptica. 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 vacío, sino que crearemos un símbolo en nuestra biblioteca.
Para crear nuestro símbolo en la biblioteca:
Ventana > Biblioteca
Llegados a este punto veremos aparecer en la pantalla una ventana como la que veis en la
ilustración.
Para insertar el símbolo lo podemos hacer a partir del botón con una cruz situado en la parte
inferior izquierda de la ventana de la biblioteca, o bien ir a la barra de menús y hacer:
Insertar > Nuevo Símbolo
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 gráfico). Por el momento no entraremos en la explicación de la opción
comportamiento, ya lo veremos más 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 animación para meternos en un espacio en el que podemos
editar el símbolo 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 círculo. Una vez elegida nos colocamos en
el escenario y, apretando la tecla mayúsculas y pulsando el botón izquierdo del ratón (el
único para los usuarios Mac), desplazamos el ratón hacia cualquier dirección. Veremos
aparecer un círculo con los colores definidos en el apartado colores de la barra de
herramientas.
Ahora, para darle la sensación 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:

En este panel, seleccionaremos en el menú desplegable la opción Radial. Veremos como la
ventana cambia de aspecto pareciéndose 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 continuación, 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 botón izquierdo sobre la parte rellena del círculo. Si todo funciona
correctamente, deberemos obtener una esfera similar a la de la figura mostrada:

Sugerimos repetir este proceso de relleno del círculo con un degradado jugando con las
opciones que nos ofrece el panel mezclador de colores. Podemos ver que es posible añadir
más casitas para conseguir un efecto de coronas o bien cambiar el tipo de degradado a lineal
y más cosas...
Después de dejarnos llevar por nuestra vena creativa podemos volver a cosas más serias.
Para empezar, podemos alinear la esfera con la cruz que define el punto de alineamiento del
símbolo. Para ello, elegiremos la herramienta flecha y seleccionaremos la esfera desplazando
el ratón al mismo tiempo que mantenemos pulsado el botón izquierdo. Para mover la esfera
lo haremos del mismo modo, desplazando el ratón hasta el lugar apropiado manteniendo
pulsado el botón izquierdo. Podemos precisar el desplazamiento usando las flechas del cursor
que nos permitirán desplazarnos píxel por píxel.
Vamos a empezar a trabajar con la animación propiamente dicha.

Creación de imágenes clave.
Por Rubén Alvarez
Vale, ya hemos definido el símbolo en la biblioteca. Ahora vamos a empezar a trabajar con la
animación propiamente dicha. Lo primero que debemos de hacer es salir del espacio de
creación del símbolo y colocarnos en el escenario de la animación. 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 símbolo que acabamos de
crear. Antes de nada, iremos a la ventana biblioteca (si la tenéis cerrada podéis abrirla con
Ventana > Biblioteca) y seleccionaremos el símbolo esfera. A continuación, pincharemos y
arrastraremos el símbolo hasta el escenario. El resultado debería ser algo como lo que se
muestra en la imagen inferior:
Podemos observar que el círculo vacío del primer fotograma se ha convertido ahora en un
círculo lleno, lo que significa que la imagen clave no esta vacía.
Pasemos ahora a estudiar el tipo de animación que vamos a hacer. Como hemos dicho,
pretendemos simular un movimiento de traslación de la esfera con una trayectoria elíptica,
dando la impresión de un círculo en perspectiva. Esta animación podría ser definida por tres
imágenes clave:
• La esfera situada en primer plano al principio de su movimiento.
• La esfera situada en segundo plano a mitad de su ciclo de traslación.
• La esfera llegada al final del ciclo, aproximadamente en la misma posición que la
primera esfera.
Podemos ver cuales serian estas tres imágenes clave en el siguiente esquema:
De modo que ya disponemos de la primera imagen clave. Ahora, introduciremos la segunda
en el lugar aproximado que le correspondería. Para ello llevamos a cabo las siguientes
operaciones:
• Insertamos una imagen clave en la capa 1, más o menos sobre el fotograma 15.
Para ello nos situamos en la capa 1, en el fotograma 15. Pulsamos el botón derecho
del ratón y seleccionamos Insertar fotograma clave. Podemos observar como, una
vez realizada la operación, un nuevo círculo aparece en ese fotograma, indicando la
presencia de otra imagen clave que será idéntica 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 posición y tamaño. La posición la modificamos empujándolo hacia
arriba con la tecla del cursor o bien pinchando y arrastrando, como ya hemos visto
antes. Para modificar el tamaño, seleccionaremos la herramienta transformación
libre. Una vez hecho esto, seleccionaremos la opción escalar, que nos permitirá
bloquear las proporciones del objeto y reduciremos el tamaño 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 continuación 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 debería 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 vacío en el fotograma 29 (Insertar>Fotograma clave
vacío)
• Volvemos al fotograma 1 y lo copiamos (Edición>copiar)
• Volvemos al fotograma 29 y lo pegamos (Edición>pegar)
El resultado es un fotograma idéntico al 1 en el cual deberemos mover ligeramente la
ocurrencia a la izquierda, algo que haremos más tarde.
Creación de una guía de movimiento

Por Rubén Alvarez
De modo que ya disponemos de las imágenes claves que definen la animación. Lo que
necesitamos ahora es definir una trayectoria elíptica que las una. Esta trayectoria ha de ser
definida en una capa especial llamada guía de movimiento. La guía de movimiento no es más
que una capa que contiene una línea sobre la cual podemos colocar nuestros objetos de
manera a que dicho objeto se mueva de una posición a otra respectando la trayectoria
definida por esta línea.

En nuestro caso, dado que lo que buscamos es una trayectoria cíclica, para no confundir al
objeto definiremos dos líneas distintas, correspondientes a cada media vuelta. Si no
tomásemos esta precaución, el objeto tendría dos posibles sentidos para llegar a una misma
posición. Pasemos pues a definir estas líneas:
• Creamos la guía de movimiento. Para ello, seleccionamos la capa 1 (o donde
hayamos creado nuestras imágenes clave) y hacemos Insertar>guía de movimiento.
Constatamos la aparición de una nueva capa llamada Guía: 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 creación de la
esfera, pero esta vez no elegimos ningún 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 (Edición>cortar). El resultado es la obtención de una
semielipse.
• Nos colocamos en el fotograma 15 de esta misma capa y lo convertimos en un
fotograma clave vacío (Insertar>fotograma clave vacío)

• 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
opción más interesante es la de usar le edición simultanea de varios fotogramas.
Esta opción, disponible en la línea de tiempo (ver figura), nos permite la visualización
y edición 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 operación.
Creando una interpolación

Por Rubén Alvarez
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 interpolación de movimiento. Como ya hemos dicho, eso es algo que Flash
calcula automáticamente, evitándonos la modificación sistemática de cada uno de lo
fotogramas intermedios que forman parte de la secuencia. Para crear la interpolación de

movimiento, seleccionaremos los fotogramas de la capa 1y haremos:
Insertar>Crear interpolación de movimiento.
Hecho esto, podremos constatar la aparición 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 posición y tamaño entre ellas. Como puede verse, el
objeto se desplazaría desde 1 hasta 15 y seguidamente de 15 a 29 siguiendo una línea recta.
Para obligarlo a adoptar una trayectoria elíptica como la definida en la guía de movimiento,
tendremos que localizarnos en cada una de las imágenes clave (1, 15 y 29) y , usando la
herramienta flecha, colocaremos el centro del objeto sobre la línea 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 línea, vuelve a colocarse automáticamente sobre ella.
Llegados a este punto, ya solo nos queda ocultar la capa de la trayectoria. Esto puede
hacerse seleccionándola 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.
Ya tenemos construida la animación. Para probarla rápidamente podemos hacer:
Control>Probar escena
Veremos como hemos saltado a otra nueva ventana que nos muestra la escena creada, tal y
como la veríamos en realidad. Esta ventana nos ofrece múltiples posibilidades que ya
abordaremos en otros capítulos. No obstante, os aconsejamos el echar un vistazo al tipo de
opciones que propone.
Si lo que deseas es ver la animación directamente en el navegador, es posible hacerlo
seleccionando:
Archivo>Previsualizacion de la publicación>HTML
Habiendo llegado a este punto, habréis descubierto algunas de las muchas posibilidades que
Flash ofrece para la creación de animaciones y, lo que es más importante, os habéis
familiarizado con el tipo de técnicas y conceptos que emplea.
Un pequeño truco para conseguir el código necesario para incrustar

una película Flash dentro de una página web.
Por Ludwing Rodriguez
Colocar películas Flash en nuestros archivos html, asp, php, etc; podría ser una de las
principales preguntas que hacemos, cuando empezamos a conocer este grandioso programa,
y hacerlo es más sencillo de lo que parece.
Antes debemos tener en cuenta que debemos seguir algunas reglas para que todo funcione
correctamente. Cuando creamos una película con Flash, este genera un archivo con
extensión ".fla", este nos permite crear la película y modificarla. Otro archivo que se genera
es el que tiene la extensión ".swf", este se compone en el momento que probamos la
película, 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 películas y nos ayuda a tener una idea más clara de cómo se veran en la web.
1. Cuando tu película 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 "Código fuente", esto hace que se ejecute el "Bloc de notas", el cual nos
mostrara el código html de las películas.

3. Dentro del contenido del Bloc de notas, debes buscar las etiquetas
<object>...</object>, copia el contenido que se encuentra entre las esas etiquetas
(lógicamente debes incluir esas etiquetas) y finalmente pégalo 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 películas Flash no se cargarán.

Nota: Otra manera muy sencilla para insertar una animación Flash en una página web es
utilizar el programa Dreamweaver, también desarrollado por la empresa Macromedia. En dicho
programa existe un botón, en la ventana de objetos comunes, que nos permite seleccionar el
archivo Flash (Con extensión .swf) que deseamos insertar en la página web.
No es necesario que subas a tu servidor el archivo .fla, ya que el .swf y .html no lo
necesitarán.
Vemos un sencillo código HTML para visualizar Flash en una página

web y explicamos sus etiquetas.
Por Miguel Angel Alvarez
Conseguir un código HTML para colocar una película Flash es sencillo. Basta con tener Flash
o Dreamweaver para que estos programas generen el código por nosotros. Pero a veces no
tenemos Flash en nuestro ordenador y sólo tenemos un archivo .swf que tenemos que
incrustar en una página web, entonces podemos crear nosotros mismos el código HTML para
ello.
En este artículo mostraremos el código HTML necesario para visualizar una película Flash,
procurando explicar algunas de sus etiquetas y atributos, para que quede claro lo que
estamos haciendo. Daremos un código de ejemplo que podremos incluir en HTML para
mostrar Flash.
Nota: Como decíamos, también podemos obtener el código HTML para incluir un Flash
utilizando el propio programa Flash. Lo explicamos en el artículo: Colocar películas Flash en
nuestras páginas
Veamos primero un posible código HTML para incrustar un Flash en una página.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,
0,2,0" width="500" height="350">
<param name=movie value="archivo.swf">
<param name=quality value=high>
<embed src="archivo.swf" quality=high
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="500"
height="350">
</embed>
</object>
En el código HTML para insertar Flash tenemos aquí dos etiquetas básicas:
• <object> , que es propia de Internet Explorer, y que sirve para incluir cualquier tipo
de componente que se cargue con un control ActiveX, no sólo películas Flash.

• <embed> , que es para Firefox y que sirve para embeber objetos o componentes en
páginas web. Del mismo modo que <object> , sirve para incrustar diversos tipos de
componentes en páginas web, no sólo elementos flash.
Dentro de las etiquetas se deben incluir varios parámetros para configurar el aspecto y
comportamiento de las películas.

En <object> :
• classid: que indica el plugin o componente ActiveX que Internet Explorer tiene
utilizar para cargar la película Flash.

• codebase: para indicar dónde está el plugin, si es que lo tiene que descargar de
algún sitio.
• width: con el ancho en píxels en los que se debe mostrar la película.
• height: con el alto en pixels deseado.
Luego anidada dentro de <object> hay que meter una nueva etiqueta, para indicar el archivo
donde está la película Flash, con su ruta:
<param name=movie value="archivo.swf">
En <embed> :
• src: la ruta y el nombre del archivo Flash a mostrar.
• pluginspage: el sitio donde está el plugin necesario para mostrar Flash
• type: el tipo de objeto embebido.
• width: la anchura en píxel
• height: la altura en píxel deseada.
Con estas nociones básicas podremos crear nosotros mismos un código HTML para insertar
Flash, esto es, un HTML para incluir flash en una página web.
Explicación paso a paso sobre la creación de botones en el

programa Flash.
En este capítulo aprenderemos a crear botones y cómo enlazarlos con nuestros archivos o
con otras paginas web, que no estén en nuestro servidor.
Flash, nos permite crear botones personalizados, de manera muy rápida; a la vez nos ayuda
a darle mas vida a nuestras páginas web; en pocas palabras, nos ayuda a hacer más
atractivo nuestro sitio y lógicamente eso es lo que queremos para aumentar el número de
visitas a nuestro website.
Por medio de lenguajes de programación (por ejemplo Javascript), también podríamos crear
botones, pero sería un poco más complicado; además no podríamos crear exactamente los
mismos efectos que podemos hacer con Flash.
Empecemos:
1- Primero crearemos un nuevo símbolo, haciendo la siguiente combinación de teclas:
ALT+F8.
Aparecerá el siguiente cuadro:
2- En Nombre (Name), escribe "botón 1", en Comportamiento (Behavior) selecciona la
opción Botón (Button), finalmente haz click en Aceptar (OK).
Automáticamente, seremos enviado desde la Escena 1 al escenario del símbolo "botón 1";
ahí es donde crearemos un botón que será incluido en nuestra biblioteca.
El escenario únicamente para la creación de botones, será parecido a la siguiente imagen:
Mira hacia la línea del tiempo (Timeline), como puedes notarlo es diferente a la línea del
tiempo de la Escena 1.
La línea del tiempo, del escenario para crear botones es parecida a la siguiente imagen:
Expliquemos el gráfico anterior:
Debemos entender que Reposo, Sobre, Presionado y Zona activa son los cuatro estados de
un botón. Veamos a continuación, qué representa cada estado.
Reposo: es cuando el mouse no está colocado sobre nuestro botón o no se ha hecho click
sobre él.
Sobre: es cuando el mouse está colocado sobre el botón, pero aún no se ha hecho click
sobre él.
Presionado: lógicamente, es cuando haces click sobre el botón.
Zona Activa: su mismo nombre lo indica, es cuando el botón está activo.
Continuemos con la creación de nuestro "botón 1".
La cabeza lectora, en la línea del tiempo tiene que estar señalando el estado de Reposo.
4- Haz click sobre la Herramienta de Rectángulo (Rectangle Tool), que se encuentra en el
Panel de Herramientas.
5- Dibuja un rectángulo en el centro del área de trabajo, y ponle el color azul.
6- Después presiona la tecla F6; ésto hará que la cabeza lectora en la línea del tiempo pase
al estado Sobre.
Como podrás notarlo, el botón se copia, así que no necesitarás hacer un nuevo dibujo.
7- Aún estamos en el estado Sobre, si no tienes seleccionado el botón, hazlo (con la

Herramienta Flecha y haz doble click sobre nuestro dibujo), luego dirígete a Color de Relleno
que se encuentra en la sección colores del Panel de Herramientas, y escoge el color rojo,
como se muestra a continuación:
8- Después 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 botón. Para este último estado, no es realmente necesario
cambiar el color de fondo.
Con los colores que hemos aplicado, haremos que el botón cambie de color, cuando se lleven
a cabo los Estados de los botones anteriormente descritos.
Nuestro botón ha sido creado, así que puedes volver a la Escena 1, abre la biblioteca y verás
que ahí esta el símbolo llamado "botón 1", podrás arrastrarlo al escenario las veces que
quieras para hacer varias copias de él.
Toma la Herramienta de Texto (A), y escribe lo que desees, después coloca el texto sobre el
botón creado; para probar la película haz la tradicional combinación de teclas CTRL + Enter.
Si después quieres ver la película en tu explorador de internet, únicamente presiona las
teclas CTRL + F12.
Podemos ver un ejemplo del botón creado siguiendo estos pasos.
Cómo hacer que al pulsar un botón se acceda a otra página en el

navegador.
Si creamos botones, lógicamente es por que queremos enlazarlos con otras páginas web en
nuestro servidor, o páginas web en otros servidores. Para este capítulo necesitaremos el
botón que creamos en el capítulo anterior.
Para hacer los enlaces o links, debemos utilizar el panel de Acciones de Flash. Para poder
visualizar dicho panel, dirígete al menú principal y haz click en Ventana > Acciones.
Aparecerá la siguiente imagen:
El panel de Acciones, nos servirá para trabajar con ActionScript.
¿Qué es ActionScript?, es el lenguaje de creación de scripts de Flash. Puede utilizar
ActionScript para controlar objetos en las películas de Flash con el fin de crear elementos
interactivos y de navegación, y para ampliar Flash con el fin de crear películas altamente
interactivas y aplicaciones Web. En otras palabras, ActionScript es el lenguaje de
programación utilizado por Flash.
Comencemos a hacer el enlace.
1- Desde la biblioteca de Flash, arrastramos a la Escena 1 el botón creado en el capítulo
anterior. Mantén el botón 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), automáticamente se
desplegará una especie de submenú en donde debes hacer click en Explorador
(Browser/Network), después haz doble click en getURL.
getURL es la acción que nos permitirá navegar entre páginas web, también permite pasar
variables a otras aplicaciones en una URL definida. Un ejemplo de URL es
http://www.desarrolloweb.com
4- Como habrás 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í especificarás la dirección a la cual se enlazará el botón.
Si vas a hacer un enlace con una página 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 página 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 vacío). Especifica de qué forma será
cargado el documento o fotograma. Las formas en que se cargarán son:
_self: especifica el fotograma actual de la ventana activa.
_blank: indica que la página se abrirá o cargará en una nueva ventana..
_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 información etc, se usa
para formularios, así que en nuestro caso no son necesarias las variables; así que selecciona
No enviar.
Un ejemplo de cómo tendría 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 código anterior y
pégalo en el panel de Acciones)

Puedes ver que la primera linea del script aparece escrito: "on (release)". Es una acción
utilizada en los botones, que indica que la acción que aparece entre "{ }" se ejecutará
inmediatamente después de hacer click sobre el botón, o sea, al liberar el botón del mouse.
Podemos ver un ejemplo del botón creado siguiendo estos pasos.
Cómo enlazar un botón flash con una dirección de correo

electrónico.
Por medio de botones hechos en Flash, podemos ejecutar nuestros programas de envío de
correos electrónicos (Outlook por ejemplo), para enviar mensajes .
(Tus programas de envío de correos electrónicos tienen que estar configurados e instalados
correctamente)
¿Cómo hacer ésto?
1- Creamos un botón.
2- Click derecho sobre el botón > Acciones
3- Copia las siguientes acciones y pégalas en el panel de Acciones:
on (release) {
getURL("mailto:tu_e-mail@dominio.com");
Expliquemos lo anterior:
• on (release), es una acción utilizada únicamente para botones, e indica que la acción
se ejecutará inmediatamente después de haber presionado y liberado el botón del
ratón.
• getURL: Acción; carga un documento de una URL específica en una ventana o pasa
variables a otra aplicación en una URL definida.

• Mailto: método utilizado para enviar correos electrónicos.
Prueba tu película (CTRL+Enter). Después puedes publicarla (en menú principal Archivo >
Publicar).
El resultado se ve en este enlace.

Cómo cambiar la forma física de un objeto en el escenario de Flash.
La interpolación de formas, consiste en hacer que un objeto en el escenario de Flash cambie
su forma física. Por ejemplo, podemos hacer que un círculo se transforme en un rectángulo.
Para realizar una interpolación de formas, tenemos que hacer uso de "Fotogramas clave
vacíos", ya que éste nos permite crear un vacío en la línea del tiempo, el cual nos permitirá
crear otras formas u objetos.
Para este capítulo, haremos un ejemplo simple, comencemos:
1- Arriba en la parte izquierda del escenario, dibuja 3 rectángulos con la herramienta
"Rectángulo"(Rectagle tool).
En la línea del tiempo, podrás observar que estamos haciendo uso del fotograma 1, de la
capa 1.
2- Haz click en el fotograma 4, después presiona la tecla F6, para crear fotogramas claves.
3- Después haz click en el fotograma 17 y presiona la tecla F7 para crear un fotograma clave
vacío.
Observa la línea del tiempo, y verás que la cabeza lectora está sobre un fotograma que no
contiene nada; es exactamente en ese fotograma vacío en donde crearemos la imagen en la

que se transformarán los rectángulos 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", después haz click en la "Herramienta Flecha",
con el texto seleccionado, haz la siguiente combinación de teclas: CTRL + B, dos veces.
La combinación 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 sóla imagen y la interpolación de formas no funcionará.
5- Ahora dirígete al fotograma 30 y presiona F6 para alargar el tiempo de duración de los
objetos en la línea 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 opción llamada "Interpolación"(Tween), puedes desplegar el combo de opciones y
elige la opción "Forma"(shape).
Puedes ver que en la línea 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 interpolación de formas; como muestra la siguiente imagen:
Ahora puedes probar la película (CTRL + Enter)
Con este capítulo el usuario aprenderá a hacer interpolaciones con

objetos complejos como grupos y símbolos.
Por Ivett Kelemen
En este párrafo aprenderemos a crear interpolaciones con objetos complejos como grupos y
símbolos.
Primero, creamos un símbolo: Insertar / Símbolo Nuevo. Damos un nombre: 'hello' y
elegimos el botón de opción "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 línea de tiempo. Hacemos click en el menú Ventana/Biblioteca. En la ventana que
aparece cogemos el símbolo 'hello' y lo arrastramos al escenario.
Movemos el símbolo a la parte de arriba del escenario, más o menos al centro. En el panel
de "Propiedades" en la opción "Color" desplegamos el combo de opciones y elegimos la
opción "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 símbolo. En el panel de "Propiedades" cambiamos el valor "Alpha"
a 100% para que sea opaco. Desplazamos el símbolo al fondo del escenario. Con el botón
"Free transform" alargamos el texto. Así hemos definido la situación inicial y final de la
interpolación. Hace falta crear los fotogramas intermedios. Hacemos click en la línea del
tiempo. En el panel de "Propiedades" en la opción "Interpolación"(Tween) desplegamos el

combo de opciones y elegimos la opción "Movimento" (Motion). Probamos la película:
Ctrl+Enter. Todo funciona perfectamente.
Retornamos al área del desarrollo para ajustar otro parámetro. En el panel de "Propiedades"
en la casilla "Ease" podemos ajustar la aceleración de la animación. Elegimos -100: así la
velocidad aumenta durante la animación. Probamos la película : Ctrl+Enter
Cómo se pueden usar las máscaras para obtener una animación

web.
Las Máscaras es un efecto utilizado frecuentemente en páginas web que contienen películas
Flash.
Dicho efecto consiste en ocultar objetos que se encuentren en el escenario de Flash, y
mostrarlos poco a poco, por algún objeto que tenga una interpolación de movimiento o
cualquier otro efecto que sea producto de tu imaginación. La máscara no es solamente para
ocultar objetos completamente, un ejemplo podría ser mostrar los objetos color gris y que un
objeto con interpolación de movimiento los muestre de otro color cuando pase sobre ellos.
Para tener todo más claro, hagamos un ejemplo fácil:
1- En Flash, en la escena 1, toma la herramienta de texto (A) y escribe lo que desees, utiliza
un tamaño de fuente grande para que el texto abarque gran parte del escenario...
2- Dirígete al fotograma (frame) numero 60 de la "capa 1", haz un click sobre él, y presiona
F6, para que el tiempo de duración de la película sea más prolongado.
3- Crea otra capa (capa 2), después 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 opción "Máscara" (Mask)
5- Ahora dirígete al fotograma número 1 de la "capa 2" (es donde está el óvalo), haz click
derecho, y después haz click en la opción "Crear interpolación de movimiento".
6- Finalmente haz click en el fotograma número 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 imaginación.
Nuestra línea del tiempo tendría que ser parecida a la siguiente imagen:
Ahora prueba la película
Click para ver un ejemplo
Existe otro tipo de animación llamada "fotograma por fotograma".

En este capítulo veremos como hacer este tipo de animaciones.
Por Ivett Kelemen
En este capítulo nos ocupamos de la animación "fotograma por fotograma".
Para realizar este tipo de animación hemos de modificar manualmente los símbolos. Por
ejemplo simularemos el movimiento de una brocha. Creamos un símbolo de brocha y la
colocamos en el nivel 1. Creamos un símbolo 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 "Trasformación libre"
alargamos la raya. Insertamos fotogramas claves en el fotograma 7. (F6).
Ahora queremos que el movimiento sea fluido. ¿Cómo lo hacemos? Pulsamos el botón "Onion
skin" en la barra de estado de la línea 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 película: Ctrl+Enter
Como elegir una imagen y poderla usar como fondo o relleno de

manera sencilla.
Por Ivett Kelemen
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 símbolo, y podemos reutilizarla varias veces en la película
sin que el tamaño del archivo crezca excesivamente.
Todos los bitmaps insertados están en el panel Color Mixer (menu Window/ Color Mixer o
Shift+F9) y pueden ser utilizados como relleno.
¿Cómo 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 dibujamos un rectángulo. El
rectángulo está formado por pequeños pájaros.
En el Tool Box panel pulsamos Fill Transform y hacemos click dentro del rectángulo. Uno
de los pájaros queda seleccionado. Podemos cambiar su tamaño o girarlo pinchando con el
ratón en símbolo correspondiente. La totalidad de los pájaros que forman el relleno quedan
modificados de la misma forma.
Vemos como modificar una imagen importada con el programa

Flash.
Por Ivett Kelemen
Modificar bitmap
El Flash no es una programa para retocar fotografias, y por eso no es tan fácil modificar las
imágenes importadas. Se pueden modificar parcialmente a través de la división o
transformar a diseños vectoriales.
- Primero trataremos la división:
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 diseño.
Por ejemplo seleccionamos el Lasso Tool y después el Magic Wand y hacemos click en
el fondo del imagen. Con esto conseguimos que sólo el fondo de la imágen quede
seleccionado (marcado con puntos). Ahora podemos cambiar el color, o editar cualquier
parámetro del fondo sin afectar a la imágen en primer plano. Podemos ver el resultado en la
siguiente imágen:
Cómo podemos ver en la imágen, la capacidad de seleccionar del Flash no es todo lo perfecta
que sería de desear. Aún 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 librería, la imágen del pájaro original. Como podéis ver,
la imagen en la librería 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 pájaro ya es un diseño vectorial, y podemos editarlo como tal.
En este artículo, englobado dentro del manual de Flash, vamos a

aprender a hacer animaciones con objetos complejos.
Por Ivett Kelemen
En Flash, en 1 línea de tiempo se puede animar solamente 1 objeto. Pero si quisieramos que
un texto, por ejemplo, explotara ¿cómo debemos hacerlo?
En el versión 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í
todavía no podemos animarla porque todas las letras están en el mismo nivel. Para
animarlas tendrían que estar en niveles diferentes.

• mientras la palabra está seleccionada elegimos el menú: Modify / Distribute To
Layers. Flash automáticamente crea para cada letra un nivel diferente.

• Ahora borramos la linea de tiempo "layer 1" que queda vacía.
• 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 opción Tween desplegamos el
combo de opciones y elegimos la opción Motion.
Esto crea, en todos los fotogramas intermedios entre el 1 y el 10, las imágenes
necesarias para dar sensación de movimiento progresivo entre el texto legible que
tenemos en el 1 y las letras distribuidas que tenemos en el 10.

• Probamos la película: Ctrl+Enter
Esta es lo que queríamos lograr: un texto donde todas las letras están 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.
Inserción y gestión de películas en los proyectos Flash.

Por Ivett Kelemen
Importar vídeo
Una de los novedades de Flash MX es la mejora en la importación y gestión 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 símbolo, y dentro de este símbolo 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 diálogo donde podemos ajustar la importación del video.
Flash comprime las secuencias de video con el codex 'Sorenson Spark' lo que
permite reducir notablemente el tamaño del archivo. Los parámetros Quality,
Keyframe y Scale permiten ajustar este proceso.
• Dejamos 40 el valor de Quality, y 24 el de Keyframe. Este parámetro indica la serie
de fotogramas clave que serán insertados en la secuencia. Ponemos Scale = 70%
para reducir el tamaño del vídeo. La importación puede tardar varios minutos -
dependiendo del tamaño del vídeo. Antes de insertar definitivamente la secuencia de
vídeo, Flash nos informa que este necesita por su reproducción 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 cómo podemos aplicar las modificaciones de símbolos en la secuencia de
vídeo.
• Regresamos al escenario. Insertamos un fotograma clave en la posición 84.
• Regresamos a la fotograma 1. Seleccionamos el Movie Clip, y lo movemos al rincón
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 interpolación (haciendo click en un fotograma intermedio, y en el
Properties panel, menú desplegable "Tween", elegimos la opción "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 película.
Probamos la película (menú Control / Test Movie o Ctrl+Enter)
Cómo se hace un lector de noticias con estas dos tecnologías.

Por Galileo
Si algo echaré de menos el día que mis obligaciones no me permitan publicar, sin duda, será
el tener la oportunidad de dar a conocer el grandísimo talento y conocimientos de personas
que, aún siendo muy conocidas (como en este caso), en After-Hours por su entrega y
dedicación, además de otros por donde habitualmente suele moverse, por razones obvias, su
trabajo no siempre puede llegar a todo el mundo como sería deseable.
Me gustaría presentarles a dondiegote, moderador de los foros de AH, un amigo que según
reza en su web, se presenta de esta forma... “TRABAJO MUCHO Y DUERMO POCO. HASTA
QUE TENGA TIEMPO LIBRE, QUE AL MENOS ALGO MIO DESCANSE”
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 la sección noticias de www.framemedia.co.uk. En la web,
que me parece muy buena, llama la atención sobre todo por su sencillez y por este sistema
de noticias. Es cierto que esta forma de presentación recuerda mucho, la verdad es que
muchísimo a www.carldekeyzer.com de los grandes www.group94.com.
El planteamiento de lo que se va a hacer es sencillo.
Divide los elementos que va a usar en 2 grupos diferentes, títulos y textos. Tiene en el
escenario 2 máscaras, una para cada grupo.
La idea es crear 2 grandes MovieClips que contengan por un lado todos los títulos, y
enmascararlos dentro de su espacio, y por otro lado los textos y enmascararlos también.
Los datos los pone en 2 arrays diferentes, con la idea de poder recogerlos desde un xml o
txt. En el post completo hay un ejemplo de cómo añadirle 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 quizás lo más 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, situándolas en función de la principal.
Como curiosidad podéis 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 más lógico hacerlo sobre la que
se ha picado.
Ahora lo importante, el fla:
http://www.thelirios.com/ah_news_framemedia/news_framemedia.zip
Y el código:
Stage.scaleMode = "noScale";
prof = 10; // Sigo marcandome la profundidad, no me acostumbro al getNextHighestDepth
// Creo 2 arrays, uno con los títulos 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 serán los botones con los títulos
this.createEmptyMovieClip("mnu", prof++);
// Lo situo donde su máscara. En la escena solo tengo 2 máscaras más el fondo, lo demás
lo attacheo
this.mnu._x = msk._x;
this.mnu._y = msk._y;
// lo enmascaro
this.mnu.setMask(msk);
// Creo un clip "noticias" que serán 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 demás se colocan en relación 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
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 posición 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 función 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 número para operar con
él
// Defino yFin en el botón 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
máscara 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 queréis, podéis verlo en aquí
http://www.thelirios.com/ah_news_framemedia
Pequeña aplicación concreta en flash para realizar una muñeca de
recortables.
La idea y las imágenes las saqué de aquí:
www.teacuerdas.com
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"
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 muñeca.
Verán que la acción 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 aplicación, con ejemplos:
• Al abrir, la muñeca solo en malla y las ropitas (botones) en la vidriera.
• Clic en botón(enterito amarillo), vestimos con el enterito amarillo.
• Clic en botón(chaqueta de abrigo), agregamos abrigo a la muñeca.
• Clic en botón(enterito amarillo), la muñeca queda solo con la chaqueta
2) Crear en nuestra computadora una carpeta nueva que podemos llamar probador.
3) Conseguir las imágenes necesarias. Como nuestro propósito es Flash y no el dominio del
tratamiento de imágenes, se las doy prontas. Pero cualquier cosa que quieran preguntar a
este respecto, contestaré por email con mucho gusto. En la página
http://www.delphi.todouy.com/flash/probador/imagenes.html encontrarán todas las que
necesitan.
Con el botón derecho del ratón, 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 extensión .png por .bmp o
.jpg las imágenes saldrán con el fondo celeste y no transparente como necesitamos.
4) Abrimos el Flash y creamos la aplicación: Archivo->, Nuevo->, Documento de Flash.
Nuestra aplicación tendrá un solo frame(fotograma) y en la línea 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 página 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".
Grabamos el fla que también 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 demás.
6) Importar a la biblioteca el resto de las imágenes (todos los botoncitos y clips), que por
ahora no son ni botones, ni clips sino imágenes "mapa de bits".
7) Primero vamos a probar con b1 y c1. Arrastramos a b1 desde la biblioteca al escenario y
lo transformamos en botón con el nombre boton1. Y traemos a c1 y lo transformamos en clip
de película 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 muñeca.
Importante En un papel debes ir apuntando la ubicación 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 acción en el
frame 1, (el único frame que tendremos en la línea del tiempo).
setProperty("clip1", _visible, false);
En el boton1 escribimos la acción 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 funcionarán 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 acción para cada
uno de los artículos 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, tendrás que sacar la anterior. Al final tendrás que ponerlas todas apiladas y
por eso les decía 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 acción.
Ahora hay que transformar a b2.png en el clip boton2 y ubicarlos en la vidriera. Copias la
acción de boton1 y la pegas como acción de boton2. Después corriges cambiando en lo que
pegaste, "clip1" por "clip2".
Y así hasta que tengas los nueves botones, ubicados en vidriera y con la acción referida al
clic con su mismo número.
11)Los botones están prontos y en vidriera. Sigues con los clips que vestirán a Yolanda.
De cada c1.png, c2.png, etc. creas un clip de película con los nombres clip1, clip2, etc. y lo
ubicas vistiendo a Yolanda para apuntar la posición 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 próximo clip y apuntar sus coordenadas. Por el momento nada más.
12) Crear la pila de los clip, cada uno según el apunte. Y OJO, NO TE OLVIDES DE PONER A
CADA UNO, SU NOMBRE EN EL PANEL PROPIEDADES
Te quedará así:
13) Completar la acción del frame para que haga invisible la pila entera:
Pequeña aplicación flash para descubrir un refrán donde

practicaremos la creación de variables, y la adjudicación de sus
valores.
1) Tener una idea clara de la salida que queremos.
Para esto, traten de descubrir el refrán.
HACER CLIC AQUÍ PARA DESCUBRIR EL REFRÁN
2) Jugando, nos damos cuenta, que la línea de arriba está formada por variables, esperando
que el jugador les adjudique valores, que son las distintas letras que corresponden.
También el contador de ayudas es otra variable que se incrementará con cada ayuda que se
pida.
Ése es nuestro trabajo. Crear en tiempo de diseño las variables y buscar la forma de,
mientras se juega tiempo de ejecución 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 gráficos para identificar las letras y las
ventanitas con sus botones.
Te quedará así:
Hacer estos gráficos lleva tiempo. Para lograrlos, primero hay que hacer el cuadrilátero de
fondo como símbolo gráfico, y también cada número. Después sobreponerlos atendiendo a
las coordenadas para que resulten parejos.
No hay nada que aprender aquí más que paciencia y dedicación y no creo que lo necesiten.
Por eso, se los envío para que los bajen:
Con el botón derecho del ratón, hacen clic sobre cada imagen y "Guardar imagen como.."
Jugando, ya habrás descubierto, que el refrán es DE TAL PALO TAL ASTILLA y también el
número correspondiente a cada letra.
En la línea de arriba los organizas distanciando las palabras con los números de cada letra.
En la línea de abajo simplemente los números en orden para que el usuario escriba las letras
y pulse el botón 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 aplicación tratamos los tres tipos de variables: de texto, numéricas, 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 dinámico, resolví que todas comenzarían con
"din" y seguirían con la letra de la solución.
Si la letra aparece repetida se le agregará un número.
Por ejemplo las variables donde la solución es A se llamarán dina, dina1, dina2, dina3, dina4.
Creas entonces para cada letra un texto dinámico, ajustando las medidas con 28 por ancho y
32 de altura.
Yo usé letra Verdana tamaño 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 verán así:
5) Ahora necesitamos variables, que reciban lo tecleado por el jugador. Usamos Introducción
de Textos
Uno para cada número. El mismo tamaño 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 verás:
6) Los botones se encargarán de tomar los valores impuestos por los jugadores,
asignándolos a las letras (variables dinámicas) que correspondan.
A continuación los códigos para cada botón.
En la tabla siguiente copio primero los códigos de los botones para solo una letra.
Por ejemplo el botón 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 refrán deben asignar valor
a varias variables.
Botón 1 Botón 2 Botón 6

on(press){ on(press){ on(press){
dind=vard; dine=vare; dinp=varp;
} } }
Botón 7 Botón 8 Botón 9
on(press){ on(press){ on(press){
dino=varo; dins=vars; dini=vari;
} } }
Botón 4
on(press){
Botón 3 dina=vara; Botón 5
on(press){ dina1=vara; on(press){
dint=vart; dinl=varl;
dint1=vart; dina2=vara; dinl1=varl;
dinl2=varl;
dint2=vart; dina3=vara; dinl3=varl;
dinl4=varl;
} dina4=vara; }
7) El contador de ayudas es un ejemplo de variable numérica. La creamos en el fotograma
(línea del tiempo).
Código de la acción del fotograma:

stop();
ayudas=0;
Y como deseamos ver en pantalla la marcha del contador, ponemos en pantalla un texto
dinámico y nombramos a la variable con el nombre ayudas para que refleje la actualización
del contador.
8) Código de los botones de ayuda.
letra 5
on(press){
letra 9 letra 8 ayudas=ayudas+1;
on(press){ on(press){ varl="L";
ayudas=ayudas+1; ayudas=ayudas+1; dinl="L";
vari="I"; vars="S"; dinl1="L";
dini="I"; dins="S"; dinl2="L";
setProperty("ayudar9", setProperty("ayudar8", dinl3="L";
_visible, false); _visible, false); dinl4="L";
} } 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á más o menos así:
Primera parte de cómo realizar un pequeño juego en Flash. Creamos

el fondo, la bruja y botones para moverla.
Lo más importante en este tipo de juegos, de buenos y malos, de invasores y defensores,
etc., es la materia prima: buenas imágenes y buen tema.
Lo que pretendemos es mostrarles las herramientas más elementales que necesitan para
poner en marcha un jueguito de este estilo.
He creado una página bruja.html donde pongo las imágenes que necesites bajar y también
las direcciones para que cuando juegas te quede más fácil, 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 página.html y
pincha Juego completo. Juega varias veces, y trata de pensar cuantas herramientas están
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 más 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 página bruja.html verás lo que haremos para este archivo: una capa con el
fondo, la bruja y los botones para moverla.
3) La Bruja. En la página html, hay seis imágenes de la bruja. Tu necesitas las cuatro últimas
(izquierda, arriba, derecha, abajo) y podrías hacer con ellas el clip de película de la bruja.
Pero no te lo aconsejo.
Si hicieras el clip, con esas cuatro imágenes, te ahorrarías trabajo pero el clip pesaría 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 página html. Con el botón derecho haces clic sobre la imagen Iz1 -> Guardar Imagen
como -> y la bajas a tu Carpeta bruja. Después:
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 píxeles. La achicas a 130 x105. La conviertes en símbolo gráfico que
llamas brujita.
Ahora los cuatro gráficos 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 gráfico que se
llama brujita.
Hacer los cuatro símbolos gráficos:
Traes brujita al escenario-> la seleccionas ->Modificar ->convertir en símbolo gráfico
->nombre izquierda
Traes brujita al escenario-> la seleccionas ->Modificar -> Transformar -> Rotar 90º en el
sentido de las agujas del reloj ->Modificar -> convertir en símbolo gráfico -> nombre arriba
Traes brujita al escenario-> la seleccionas ->Modificar -> Transformar -> Voltear
horizontalmente ->Modificar -> convertir en símbolo gráfico -> nombre derecha
Traes brujita al escenario-> la seleccionas ->Modificar -> Transformar -> Rotar 90º en el
sentido contrario a las agujas del reloj ->Modificar -> convertir en símbolo gráfico ->
nombre abajo
Ahora ya tenemos en biblioteca los cuatro símbolos que necesitamos.
Haremos un clip de película de exportación que se llamará clipbruja :
Insertar-> Nuevo símbolo
Si aparece este cuadro debes hacer clic en avanzado porque es el que necesitas
Escribes el nombre y-> eliges Exportar para ActionScript.
Si todo queda como en la imagen pulsas Aceptar.

Ahora no estás en la línea del tiempo de truco.fla sino en otra película y la línea del tiempo
es la de clipbruja.
Necesitamos cuatro fotogramas clave, donde van a ir distintas imágenes, así que conviene
crear primero los cuatro y en la línea del tiempo, poner en cada fotograma la acción:
stop();
Para que los códigos que escribiremos en los botones coincidan con el ejemplo que tenemos
hay que seguir el orden:
En el primer fotograma, traemos de biblioteca el símbolo gráfico 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 símbolo arriba, ancho 105.6, x -52.8, alto 130, y -65
Fotograma 3 símbolo derecha, ancho 130, x -65, alto 105.6, y -52.8
Fotograma 4 símbolo abajo, ancho 105.6, x -52.8, alto 130, y -65
El clip de película clipbruja está completo. Para afirmar y salir pulsas Escena1 y vuelves a la
línea 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
clipbruja, en la línea del tiempo hay un solo fotograma sin ninguna acción.
Grabas, pulsas Control+Enter para probar y luego Control + tecla b para saber cuánto pesa
ese clip que por ahora está quieto en el escenario.
Verás que pesa 5 Kb.
Para limpiar ese mensaje vuelves a pulsar Control + tecla b.
Vuelve a la página .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 opción de crear una Carpeta.
Haz clic allí y ponle el nombre Abruja. Es un método mío poner una A a todos los nombres de
carpeta en la biblioteca, porque como se ordenan alfabéticamente, consigo que queden todas
las Carpetas arriba sin mezclarse con las cosas nuevas que vamos agregando.
Después 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 olvídate de la bruja. En la página html, pulsando con el
botón derecho sobre el fondo, eliges Propiedades y te enteras que el nombre es cielo.jpg y
su tamaño es 960 x 550 píxeles.
También tienes con la opción de Guardar imagen como, que traerla a la Carpeta donde estás
trabajando.
Ahora desde tu trabajo (la aplicación 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 píxeles. 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 gráfico para sacarlos a todos. Dibujé con lápiz grosor 2
color negro y sin fondo un triángulo de 33 por base, con 52 de altura. Antes de transformarlo
a símbolo lo copié para que me quedaran cuatro triángulos vacíos. 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 símbolos gráficos con los respectivos nombres de
gris, rojo, amarillo, negro.
Hacemos Insertar 'Nuevo símbolo, por nombre flecha, por tipo boton y ' Aceptar.
Aparece el cuadro con los cuatro fotogramas de un botón tipo. En el fotograma Reposo
ponemos el gráfico 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 símbolos gráficos en el escenario sean
x -16.5 y -26
Para salir del modo edición y volver a la película presionar escena1
El botón 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 acción dependiendo de hacia donde apunte.
on(press){ on(press){
on(press){ on(press){
clipbruja.gotoA clipbruja.gotoA
clipbruja.gotoA clipbruja.gotoA
ndStop(3); ndStop(4);
ndStop(1); ndStop(2);
clipbruja._x = clipbruja._y =
clipbruja._x = clipbruja._y =
clipbruja._x + clipbruja._y +
clipbruja._x -20; clipbruja._y -20;
20; 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 botón fecha y los gráficos 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

Cambiamos los botones para las teclas flechas y la bruja
desmaterializa un elemento invasor.
Al finalizar truco.fla y archivarlo con ese nombre, también 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 acción. La
capa inferior tiene solo el fondo. La superior la bruja en el clip de película clipbruja
En la capa bruja también pusimos botones para que la muevan.
Para eliminar todo lo que se refiera a los botones, en la biblioteca, con el botón derecho
pulsas donde dice Aflecha y eliges Eliminar
En la Capa bruja en el primer fotograma pones la acción para que puedas mover la bruja con
las flechas del teclado.
Además creas un fotograma clave. Y en este segundo pones :
gotoAndPlay(1);
Archiva truco2.fla , pruébalo y mide su peso. Pesa lo mismo mover con botones que con
teclas.
Sin embargo si llevaras esto al Navegador, tendrías que agregar un texto, diciendo que para
activar las teclas, el usuario debe antes, hacer clic en el escenario de la película.
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
razón 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;
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;
}
Aclaración
Los códigos 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 acción de
caída y también la detección del choque con la bruja.
Con la herramienta óvalo dibujamos un círculo de 16 x 16 píxeles. Lo seleccionamos y lo
convertimos en un clip de película 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 acción 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 paréntesis){
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
más 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 píxel más;
3 }
Segundo if, renglones 4,5 y 6. Teniendo en cuenta que clipbruja mide 130 x 105 tomamos su
medida más ancha. Esta medida hace las cosas muy fáciles para el usuario, pero hacerlo
más difícil e interesante queda a la creatividad de ustedes. Estoy dispuesta a sugerir
cambios, pero ahora es importante que todo sea lo más 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 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 película para que funcionen las teclas, pero en Internet hay que hacerlo.
Antes de irse graben también este mismo trabajo como truco3.fla para que nos quede de
respaldo truco2.fla, mientras seguimos complicando el juego. Después nos quedaremos con
el último archivo y aliviaremos la memoria de la máquina borrando los anteriores.

Ultimos pasos para terminar el juego de la bruja en Flash.
Ahora estamos en truco3.fla pero queremos 10 invasores. Recuerda que para el clip invasor
que llamamos m1 dibujamos un círculo, y lo convertimos en un símbolo clip de película.
De la misma forma hacemos otros nueve clips, de distintos colores, que serán m2, m3, m4,
m5, m6, m7, m8, m9, y m10.
Y los colocas encima del escenario más o menos así;
Y no te olvides de poner a cada uno, su nombre en el Panel de Propiedades.
Crear la función invade (clip)
Mantén 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 cumplía la condición de que no estuviera demasiado bajo, entonces se lo
adelantara un píxel
En el segundo si se cumplía la condición 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 función que realice lo
mismo.
Arregla el código del fotograma para que figuren los condicionales dentro de una función 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 < _root.clipbruja._y+105)){
clip_y = clip_y; clip.stop();
clip._visible=false;
Nota que la función tiene un parámetro que figura entre paréntesis. El parámetro indica que
la función va a ser llamada con un argumento general que servirá como representante de
algo singularmente único.
Con otras palabras (clip) es la palabra que después representará a m1, m2, etc.
Después de arreglar la función, la llamas para cada uno de los invasores, completando así el
código para este fotograma:
invade(m1);
invade(m2);
invade(m3);
invade(m4);
invade(m5);
invade(m6);
invade(m7);
invade(m8);
invade(m9);
invade(m10);
Archivar, probar y pesar. Sigue pesando 26 kb.
Después de grabar este trabajo como truco3.fla, guárdalo como truco4.fla para continuar.
Y no olvides que en el Navegador, para activar las teclas flechas, debes hacer antes un clic
sobre la película.
truco4.fla Usamos la función getTimer() para que los invasores caigan a distintos tiempos.
¡No tiene gracia que los invasores caigan todos a la vez! ¡El juego resulta muy fácil!
Le daremos a una función predefinida del sistema esta tarea: getTimer()
Esta función da en milisegundos el tiempo que ha transcurrido desde el comienzo de la
ejecución de una película.
Probando distintas cuentas, más por ensayo y error que por razonamiento logré dar con una
fórmula 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 función invade(clip) queda como
está, pero se usa la fórmula para llamar a la función en distintos tiempos. La acción 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();
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 más. 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 aparecía por el otro. Pero en el viaje
vertical eso no nos conviene más. Después 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 número 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 más rápida la caída de los invasores.
En el código del fotograma de esta capa donde dice;
if(clip._y <540){
clip._y=clip._y+1;
Cambia el número 1 por el número 2 así avanzará a pasos (píxeles) más largos.
Archiva truco4.fla guárdalo, pésalo.
Para el próximo paso guárdalo como truco5.fla .
truco5.fla Usamos la función getTimer() para que los invasores caigan a distintos tiempos.
Disparador del juego porque activa las teclas flechas.
Necesitábamos que el usuario hiciera clic en cualquier punto de la pantalla para activar las
teclas flechas.
Crearemos en botón con el texto explicativo.
Primero pones candado a todas las capas y creas una superior a todas que llamaremos texto
Yo usé letra Verdana, tamaño 14 color blanco. Recuerda que todas las capas están con
candado menos la del texto que estamos haciendo.

Como la letra es blanca, elegimos para escribir la parte más oscura del escenario, después
Seleccionamos el texto (son solo palabras sin fondo)y con Modificar' Convertir en símbolo '
tipo Botón nombre activar
El botón ya está en la biblioteca y lo puedes borrar del escenario.
Si en la biblioteca lo seleccionas, verás solamente la crucesita, porque las letras son blancas
y el fondo de la biblioteca también.
Antes de traerlo al escenario, mira la capa fondo para asegurarte que la imagen cielo esté
con las coordenadas x, y, a cero.
Después de nuevo con candado en todas menos en la capa texto trae el botón activar a las
coordenadas x, y, a cero.
Escribe en el panel de Propiedades el nombre de instancia activar
Y la acción del botón activar es:
on(press){
activar._visible=false;
Y además 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 caída de invasores.
Comentario final con el resultado del juego.
Trabajamos en la capa invasores con candado en las demás.
Al pie del escenario creamos un texto dinámico y le ponemos de nombre a la variable:
barridos
No ponemos nombre de instancia. Usé letra verdana, tamaño 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 están 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 código 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;
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 imaginación y hacerlo más interesante. Después ya habrá que buscar
otras herramientas, tratando de no llegar a tener que decir: Espere por favor que estamos
cargando.
Les debo esta aplicación porque cuando hice el juego de las brujas
me olvidé que FLASH tiene este método.
Esta aplicación es una de tantas en la web de una Academia de Choferes.
La Academia ha pedido que primero se repase las SEÑALES DE TRÁNSITO, luego las
SEÑALES DE ADVERTENCIA (viene curva cerrada, cruza tren, viene puente, etc.), después
los DERECHOS DEL PEATÓN (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 ficción) el peligro de no
respetar las señales.
Repasemos las Señales de Tránsito
Los símbolos los copié del Google y no te los paso porque saqué los de Uruguay, pero ví que
cada país tiene los suyos, a veces igual y otras veces, no.
Si haces esta aplicación puedes dejar los símbolos como imágenes tal como las traes o
convertirlas a en simbolos gráficos y pesarán 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 símbolo MovieClip, con nombre azul.
Necesitaba 14 cuadrados, porque de las 16 señales que tiene mi país me salteo la una (ceda
el paso) y la seis(pare) porque tienen las palabras en el símbolo 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 símbolo,
para poder luego detectar si los impactos(hitTest) son o no correctos.

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 quién es quién.
El único script que escribes en el primer fotograma de la capa señales 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 colisión entre las
dos instancias hace que el cuadrado suba el alpha a 80.
Las etiquetas
Como ves las etiquetas se arrastran sin ninguna programación, porque son clips a los que les
hemos agregado la propiedad de ser arrastrados usando la extensión de la clase MovieClip
que ya comentamos en el artículo Clases y objetos en Flash
Explico rápidamente como hacer estas etiquetas.
En un principio las diseñas y las conviertes a símbolos 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
El nombre del archivo debe ser exactamente el mismo que la clase. Si es Arrastre.as, la clase
es Arrastre y no arrastre (con la inicial en minúscula)
Numeré y separé las partes del script para explicarlos mejor.
Se nos ocurrió el nombre Arrastre para esta sub clase, así que en el renglón 1 en la sintaxis
de Flash dice:
1 class Arrastre extends MovieClip {
4 onRelease=Soltar;
5 }
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 aplicación
que estás haciendo, debes extender la propiedad de arrastre a cada etiqueta.
Para eso seleccionas en la biblioteca con el botón 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.

Te muestro la línea del tiempo con solo dos capas. En la capa cuadros están los cuadros
(azul2, etc) y las etiquetas (t02, etc.)
En la capa señales los símbolos y los textos.
En la capa señales, en el fotograma 1, está el script para detectar las colisiones y en el
fotograma 2 dice: gotoAndPlay(1);

Cómo crear un scroll de texto sencillo con Flash.
Por Carlos Carmona
Vamos a crear un scroll de texto de la forma más sencilla que hay. Ya será cosa vuestra
hacerlo estéticamente más llamativo o complicarlo más.
Abrimos una nueva película de Flash y vamos a usar una única capa. Con la herramienta de
texto Creamos un campo de texto del tamaño que queramos y le damos las siguientes
propiedades:
Estas propiedades son: Campo de texto tipo dinámico, multilínea para que el texto pueda
ocupar más de una línea, creamos la variable "MiTexto" que es donde, usando ActionScript,
meteremos el texto del scroll. En cuanto al tipo de fuente, tamaño 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.
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 botón de abajo, está invertido; para los que esteis muy verdes en flash, os
diré que para darle la vuelta, aunque hay varias maneras, la más sencilla sería seleccionar el
botón y modificar>transformar>voltear verticalmente, y listo.
Bien, la parte del diseño, (lo más sencillo posible), ya está terminada, ahora vamos a ver el
código que necesitamos. Empecemos por el código de los botones; seleccionamos el botón
de arriba, hacemos click derecho sobre él y le damos a "acciones", se nos abrirá el cuadro de
código, y metemos el siguiente:
on (press) {
MiTexto.scroll -= 1;
Y en el botón de abajo ponemos:
on (press) {
MiTexto.scroll += 1;
Estos códigos, lo que le dicen a flash es que cuando se presione el botón, 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 teníamos.
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:
stop();
MiTexto = "El texto que quieras.";
El código es muy simple, sencillamente, le ponemos de entrada un stop, por una razón, cada
vez que se lea este fotograma, se ejecutará este código, como solo debe ejecutarse una vez,
(de lo contrario el texto no pararía de cargarse en el scroll), le ponemos un stop y la película
se detendrá. A continuación cargamos el texto metiéndolo en la variable MiTexto que nos
creamos al crear el campo de texto dinámico. Ojo con un error muy estupido que nos puede
dar algún 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 daría error. En este caso, por ser un texto tan corto se ve
facil, pero lo más lógico 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
línea. Son las únicas cosas a tener en cuenta en este tipo de scroll.
Si lo deseas, puedes descargarte el archivo del ejemplo aquí.
Cómo crear un formulario con PHP y darle un estilo diferente

utilizando flash.
Por Carlos Carmona
Resultado
Abrimos una nueva película 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 más donde
pondremos el formulario. El primero lo dejamos vacio de momento, ya veremos más
adelante para qué lo usaremos. En el segundo fotograma clavecreamos un nuevo campo de
texto y le damos las siguientes propiedades:
Como veis, tenemos que poner un campo de texto de tipo "introducción de texto", que sea
línea única, con el formato de texto que deseemos (tipografía, color, tamaño, 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 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 botón a la izquierda
de "Var" en las propiedades.
Añadimos tres campos de texto más, "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 línea ú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í.
Con el scroll ya creado, tendremos esto:
Añadimos dos botones, uno el de enviar y otro el de borrar y un nuevo campo de texto
donde se mostrará el estado de envío 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á más o menos así:

Los campos que están con asterisco (*) serán 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 código ActionScript necesario, vamos a terminar la presentación del
formulario, para ello, en la capa "Fondo", en el segundo fotograma, dibujamos el fondo que
deseemos y que coincida en tamaño, forma y posición con los campos de texto. Para el caso,
yo he dibujado este fondo:

Ok, con esto hemos terminado la presentación, ahora vamos con el código que hará que
todo esto funcione.
Seleccionamos el botón de enviar, y metemos el siguiente código:
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 estén 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 botón borrar ponemos: on (release) {
nom = "";
email = "";
empresa = "";
contacto = "";
mensaje = "";
respuesta = "";
Con lo que al apretar el botón borrar todos los campos de texto se borrarán :P
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 código:
nom=''
email=''
contacto=''
mensaje=''
Esto es para que los campos obligatorios estén vacios cuando se cargue la pelicula de flash.
¿Por qué?, Las variables que se crean se alojarán en un espacio que le asigne el sistema
operativo en la memoria ram, si no los inicializamos a "vacio", podrían tener 'basura' con lo
que la comprobación de estos campos podría fallar.
Y para terminar, en el segundo fotograma de la capa "Formulario" añadimos 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í. 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 además 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 eñes 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 envíe un correo, con lo
que en nuestro servidor, con la opción correspondiente del programa ftp que
usemos, tenemos que cambiar los permisos (buscar en el programa la opción
'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.

Cada vez con más frecuencia los desarrolladores de sitios en Flash
necesitan mostrar contenidos dinámicamente, tomando datos de
fuentes externas.
Por Fernando Campaña
Presentación de la base de datos
El desarrollo del tutorial está realizado utilizando una base Access muy sencilla, pero el
ejemplo puede adecuarse a bases más potentes, como SQL Server, con muy pequeñas
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:

El ejemplo se refiere a una compañía que dispone de Representantes en distintos países y se
propone mostrar en su web realizada en Flash los datos de cada uno para que sus clientes
contacten al representante más cercano.
Se trata de una estructura jerárquica de datos que nos proponemos respetar cuando
consultemos la base (bd_tutorial.mdb).
Supongamos que la empresa carga los datos a través de un Panel de Cliente realizado en
algún lenguaje de programación 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 alojándolos transitoriamente en
objetos de tipo Recordset
2. Volver a grabar esos datos en formato XML, que respetará la estructura jerárquica y
que es de muy fácil acceso desde el Flash
3. Realizar una película en Flash que lea los datos XML y los muestre a los visitantes.
Los primeros dos objetivos los realizaremos utilizando una página ASP (entorno Windows)
que denominaremos representantes.asp.
El tercero será desarrollado íntegramente en la parte 2 de este tutorial: de XML a Flash.
Comentaremos a continuación los aspectos claves del código de representantes.asp.
Antes que nada, nuestra página 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 más alto en la jerarquía, en nuestro caso las Areas Geográficas.
Debemos armar la consulta de tal modo de obtener únicamente aquellas áreas que tengan
algún país asociado. Si algún área no tuviera todavía países asociados la consulta lo
ignorará, como ocurre con "Asia" en la base de muestra.
Si algún área posee más de un país asociado, lo que es lógico que ocurra, aparecerá varias
veces (tantas como países tenga) por lo que utilizamos el predicado DISTINCT para obtener
cada área una sola vez.
El código sería 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 armándolo y grabándolo línea a línea 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 características:
• 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
países tenga esa área.

• Dentro de cada nodo pais tendremos tantos nodos representantes como
representantes tenga ese país.
Los nombres de cada Area, cada País 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>
Volviendo al código ASP, la lógica que seguiremos consiste en analizar para cada Area (bucle
Do While #1) qué Países hay, para cada País (bucle Do While #2) qué Representantes hay y
para cada Representante (bucle Do While #3) cuáles son sus datos.
Ya disponemos de las Areas (en el Recordset rsAreas que obtuvimos más arriba) por lo que
podemos armar los bucles y la escritura del XML de la manera que sigue:
El resto del código
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 países asociados => xml vacío /***
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 Países 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 País
Do While Not rsPaises.EOF
archivo.WriteLine("<pais nombre='" & rsPaises("NombrePais") & "'>")
'buscamos los Representantes del País
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 País
archivo.WriteLine("</pais>")
rsPaises.MoveNext
Loop
'cerramos y destruimos el recordset de Países
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
End If
En este punto tenemos una página 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 algún editor XML como XML Editor o Notepad ++ (decarga gratuita).
Resultaría conveniente (por no decir indispensable) hacer que representantes.asp se ejecute
cada vez que se realiza algún cambio en la base a través del panel que utiliza la empresa
para actualizar sus datos. De ese modo garantizaremos que siempre se leerán los datos más
recientes disponibles.
De aquí en más ...
En la parte 2 de este artículo: "de XML a Flash", desarrollaremos una película Flash con la
programación necesaria en ActionScript para leer y mostrar dinámicamente el contenido de
nuestro archivo XML, respetando exactamente la estructura de los datos guardados en la
base.
2º parte del artículos sobre Bases de datos y XML para Flash
utilizando ASP.
Por Fernando Campaña
Presentación del archivo XML y algunas nociones sobre Arrays
En la primera parte de este articulo (Parte 1 - de Access a XML) desarrollamos una página
ASP que, luego de conectarse a una base de datos Access, recogía los datos
correspondientes a los representantes comerciales de una empresa ficticia y los volvía a
grabar en formato XML respetando la estructura jerárquica original.
Esta jerarquía implicaba que los Representantes estaban divididos según su País de
residencia y que a su vez los Países estaban agrupados en Areas Geográficas.
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 utópico caso
de un Area con un solo País 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
dinámicamente los datos.
En este contexto, dinámicamente significa que crearemos en tiempo de ejecución los
movieclips que contendrán el texto que queremos mostrar.
Para tratar de que la cosa sea un poco más clara comentaremos primero cuáles serán los
Arrays que utilizaremos:
• Un Array de Areas Geográficas, cuyos elementos serán las Areas que se encuentren
en el XML. En el caso del ejemplo será: areas = ["América del Sur", "América Central
y Caribe", "América del Norte", "Europa"]

• Un Array por cada Area Geográfica, cuyos elementos serán los Países que están
incluídos en esa Area. Por ejemplo: América del Sur = ["Argentina", "Brasil", "Chile",
"Uruguay"]
• Un Array por cada País, cuyos elementos serán los datos de cada uno de los
Reresentantes de ese País. 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:"González",…etc.} elem2 =
{ciudad:"Córdoba",nombre:"Mabel",apellido:"Lucero",…etc.} Para acceder a sus
valores: Argentina [0].nombre = Alejandro Argentina[1].ciudad = Córdoba
Trabajando en Flash con ActionScript
Ya con el Flash, abrimos una nueva película que denominaremos representantes.fla.
Denominaremos la primera capa como 'actionscript' y allí colocaremos todo el código
utilizando el Panel de Acciones (F9 para abrir).
En el fotograma 1 colocaremos primero el código encargado de:
• Cargar los datos del XML dentro de un Objeto XML del Flash
• Construir el esquema de Arrays que analizamos un poco más arriba
Utilizaremos tres bucles for anidados (Areas, Países de cada Area y Representantes de cada
País). Debemos recordar que desconocemos de antemano el nombre que tomarán la mayoría
de los Arrays (dependerán de los datos contenidos en el XML), por lo que deberán 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 recién 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 función encargada de armar los Arrays a partir de los datos
function organizarXML() {
// Array para las Areas Geográficas
areas = new Array();
// Primer bucle para buscar Areas revisando todos los primeros nodos
// ejemplo: América del Sur, América Central, etc.
for (yy=0; yy<represXML.firstChild.childNodes.length; yy++) {
// Agregar el nombre del Area (guardado como Atributo) al Array de Areas Geográficas
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 Países (atributo) de cada Area
// ejemplo: Argentina, Brasil, etc.
for (aa=0; aa<represXML.firstChild.childNodes[yy].childNodes.length; aa++) {
// Agregar el nombre del País 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 País (ejemplo: Argentina) para crear un nuevo Array
// donde se van a guardar los datos de los Representantes que pertenecen a ese país
_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 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 país
_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 función está más abajo)
mostrarDatos();
En este punto tenemos nuestros datos poblando una serie de Arrays y solo nos resta
mostrarlos ordenadamente.
Mostrar los datos dinámicamente
Dado que disponemos de tres tipos de datos: Area, País y los datos del Representante,
agregaremos a la Biblioteca tres movieclips. Cada movieclip tendrá como contenido cajas de
texto dinámico que mostrarán 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 agregarán al escenario dinámicamente debemos indicarle al Flash
que los exporte para ser utilizados en tiempo de ejecución. 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 botón derecho del mouse sobre el
movieclip en la Biblioteca y seleccionar Linkage … en el menú emergente.
Básicamente lo que haremos será crear un movieclip vacío 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
película) crearemos otro movieclip vacío (denominado "mc_msk") y dentro dibujaremos con
ActionScript un rectángulo del tamaño apropiado para oficiar de "ventana". Colocando a
"mc_msk" como máscara 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 límites
para que todos los Representantes resultes visibles.
El siguiente código continúa al anterior:
function mostrarDatos() {
// Creamos un mc vacío 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;
// Construímos 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 Países 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 País
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 rectángulo con las dimensiones
// apropiadas para el tamaño de nuestra película
_root.createEmptyMovieClip("mc_msk", 301);
mc_msk._x = 10;
mc_msk._y = 50;
// Dibujamos el rectángulo (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
máscara.
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 código de los botones que manejan el scroll de
"contenedor":
Botón Subir:
on (release) {
if (_root.contenedor._y < _root.mc_msk._y) {
_root.contenedor._y += _root.intSeparar;
Botón Bajar:
on (release) {
if (_root.contenedor._y > _root.mc_msk._height - _root.contenedor._height) {
_root.contenedor._y -= _root.intSeparar;
}
Al ejecutar la película terminada se obtendrá un resultado similar al de la siguiente imagen,
dependiendo de los detalles accesorios de presentación que se agreguen:
Una característica muy interesante de Flash es la posibilidad de

preparar contenidos específicamente para imprimirlos.
Por Tutoriales-flash.com
Licencia Copyleft.
Puedes reproducirlo citando al autor y enlazando su página web.
Es decir, podemos imprimir contenidos especialmente maquetados para que se adapten al
medio impreso sin importarnos como está maquetado el contenido visible en pantalla.
Si a esta ventaja le añadimos que la impresión se basa en gráficos vectoriales por defecto,
nos encontramos con que la funcionalidad de imprimir desde Flash se trata de un gran
invento. Gracias a los vectores conseguimos que la calidad de impresión sólo esté limitada
por la capacidad de nuestra impresora.
Como hacerlo
En ActionScript 1.0 tenemos a nuestra disposición el método print (soportado desde Flash
Player 4) que es el motor de este ejemplo. Su funcionamiento es muy sencillo, ya que sólo
puede recibir dos parámetros. El primero es la instancia de clip de película que se imprimirá
y el segundo es el recuadro de delimitación, que nos indica el método para generar el área
imprimible.
El recuadro de delimitación puede recibir 3 valores:
• bmovie. El área de impresión de define en relación a un frame, que fijamos con una
etiqueta de fotograma #b. La parte imprimible de cada página vendrá determinada
por el área que contiene todos los elementos que hay que el fotograma con etiqueta
#b. Esta opción es la que vamos a emplear en nuestro ejemplo.

• bmax. Esta opción toma como área de impresión aquella que contiene a todos los
elementos de todos los fotogramas. No es necesario etiquetar con #b ningún
fotograma.
• bframe. Cada página toma como área de impresión aquella que contiene todos sus
elementos. Esta opción puede implicar cambios de escala entre distintas páginas.
Para definir que fotogramas del clip elegido vamos a imprimir los etiquetamos con #p, esta
operación es necesaria para los tres posibles valores del recuadro de delimitación.
Ahora que ya sabemos como funciona el método print vamos a ver como está hecho el
ejemplo.
En la capa impresion tenemos el clip con nombre instancia imprimible_mc que vamos a
utilizar como soporte de impresión, está a la derecha, fuera del stage. Está colocado aquí
porque no nos interesa que se vea, sólo lo queremos con propósitos de impresión. Por si
acaso, estableceremos su propiedad _visible en false, hecho que no afectará a su impresión.
En el botón de imprimir irá el resto de código de toda la película.
on (release) {
print("imprimible_mc", "bmovie");
}
Ahora vamos a lo importante, seleccionamos el clip imprimible_mc para editarlo. En su
interior vemos la disposición de capas de la imagen.
En la capa etiquetas vemos que los 3 primeros fotogramas tienen una etiqueta #p y el
cuarto y último una #b. Esto nos dice los tres primeros se imprimirán y que el cuarto nos
definirá el área de impresión.
Fijaos en el contenido de los fotogramas 1-3 y vereís que sólo cambia lo que hay en la capa
textos. El resto de capas tienen elementos comunes como los titulos, el marco o el pie de
página.
En la capa area imprimible, tenemos en el cuatro fotograma (el de la #b) un rectángulo con
el tamaño y proporciones correctas para imprimir en un A4, que será el tipo de papel que
tendrá la mayoría de los usuarios.
Podemos añadir tantos fotogramas con #p como páginas queramos imprimir. Cuando
genereís el swf se mostrará una advertencia de rótulo #p duplicado que teneís que pasar por
alto.
Para terminar hay que tener en cuenta algunas consideraciones.
a) Si queremos imprimir efectos de color o transparencias debemos emplear el método
printAsBitmap que se utiliza igual, pero genera la impresión como bitmap y no como
vectores, lo que implica la impresión será 72ppp de resolución. En ActionScript 1.0 también
están disponibles los métodos printNum y printAsBitmapNum, que nos permiten imprimir un
_level en lugar de un clip de película.
b) Como no podemos asignar dinámicamente una etiqueta a un fotograma, el número de
páginas a imprimir no se puede cambiar en tiempo de ejecución. Para ello tenemos la clase
printJob de ActionScript 2.0 que dota de mayor control a la capacidad de imprimir de Flash,
estamos preparando un tutorial sobre su uso. Lo que sí podemos hacer es mostrar contenido
dinámico en cada uno de los frames etiquetados con #p.
Podéis descargaros este mismo ejemplo y ver cómo funciona: imprimirAS10.fla

Cómo podemos utlizar el método Color.setTransform, para darle un
color distinto a un clip en Flash.
Licencia Copyleft.
Podemos teñir un clip del color que queramos exactamente igual que con las propiedades de
color avanzadas, pero utilizando ActionScript, con el método Color.setTransform.
Como hacerlo
Para utilizar este método vamos a usar los mismos parámetros que en las propiedades de
color avanzadas, así que si queremos saber los valores que vamos a necesitar para obtener
un determinado color, solo tenemos que conseguir ese color directamente en el panel y
apuntar los valores. En todo caso es muy útil para hacernos una idea del funcionamiento de
este método.
En este ejemplo, haremos que la foto vaya adoptando las propiedades de color de los
pequeños clips que hay a su lado. Haz click sobre ellos para iniciar el cambio.
Asignar un color a un clip mediante este método es cuestión de cuatro líneas:
myColor = new Color(clip);
myColorTransform = new Object();
myColorTransform = {ra:100, rb:0, ga:100, gb:0, ba:100, bb:0, aa:100, ab:0};
myColor.setTransform(myColorTransform);
Sólo hay que sustituir los valores de ra, rb, ga, gb, ba, bb, aa y ab por los que queramos.
Los valores introducidos en este ejemplo son los que tiene un clip por defecto (100% de
porcentaje y 0 de desplazamiento en todos los colores y en el alpha).
Por si lo queréis también, este es el código del ejemplo. Todo el código está en el primer
fotograma:
//Creamos el Array con los valores iniciales de las propiedades de color de la foto
//es decir los que tiene cualquier clip cuando no lo hemos modificado.
//llamémosles "valores actuales".
valores=new Array(100,0,100,0,100,0,100,0);
//Esta función es la que hará que cambie el color
function cambiarColor(ra,rb,ga,gb,ba,bb,aa,ab){
//cambio es un Array donde se definen los nuevos valores que queremos dar al clip.
//llamemosles "valores de destino".
cambio=new Array(ra,rb,ga,gb,ba,bb,aa,ab);
//creamos el objeto Color y el objeto myColorTransform
foto.myColor = new Color(foto);
foto.myColorTransform = new Object();
//borramos el enterFrame del clip, por si hubiera alguno reproduciéndose a la mitad,
//y creamos uno nuevo
delete foto.onEnterFrame;
foto.onEnterFrame = function() {
//se insertan los valores actuales y se aplica el método al objeto Color.
this.myColorTransform = {ra:valores[0], rb:valores[1], ga:valores[2], gb:valores[3],
ba:valores[4], bb:valores[5], aa:valores[6], ab:valores[7]};
this.myColor.setTransform(this.myColorTransform);
//aquí hacemos un bucle, que repasa todos los valores y los compara con los valores
//de destino. Si valor actual es menor que el de destino, le suma uno, y si
//es al contrario, le resta uno.
for (var contador=0;contador<8;contador++){
if (valores[contador]<cambio[contador]){
valores[contador]++;
}else if (valores[contador]>cambio[contador]){
valores[contador]--;
//si los valores actuales son iguales que los de destino, para el enterFrame.
if (valores.toString()==cambio.toString()){
delete this.onEnterFrame;
//este bucle escribe los valores actuales en las cajas de texto para que los veáis.
for (var contador=0;contador<8;contador++){
_root["valor"+contador]=valores[contador];
};
}
//Aquí asignamos las acciones a los botones. Se trata simplemente de llamar a la función
//con diferentes valores de destino.
verde_btn.onRelease=function(){
cambiarColor(88,-143,100,86,32,61,100,0);
amarillo_btn.onRelease=function(){
cambiarColor(0,239,-60,229,96,-11,100,0);
negativo_btn.onRelease=function(){
cambiarColor(-100,255,-100,255,-100,255,100,0);
azul_btn.onRelease=function(){
cambiarColor(43,-31,43,76,43,198,100,0);
Y este es el .fla, para verlo mejor: color_setTransform.fla

Cómo crear un reproductor de mp3 en flash y asp.
Licencia Copyleft.
En este tutorial vamos a aprender a realizar un reproductor MP3 con Flash, con su lista de
reproducción. Como vamos a emplear componentes, veréis lo fácil que es la programación
del ejemplo.
COMO HACERLO.
Vamos a depositar los archivos MP3 en un directorio en la raiz del servidor web llamado
mp3. Si disponemos de la capacidad para ejecutar alguna tecnología de servidor como ASP o
PHP, crearemos dinámicamente un archivo XML con los nombres de los archivos MP3. Si no
tenemos ninguna de estas tecnologías a nuestro alcance lo mejor es crear el archivo XML
manualmente y depositarlo en el servidor. En cualquier caso, el XML que suministra los datos
deberá tener esta estructura.
<?xml version='1.0' ?>
<exploracion carpeta='mp3'>
<archivo nombre='2_pi_r.mp3' />
<archivo nombre='Brain_Stew.mp3' />
<archivo nombre='Carrera_Rapida.mp3' />
<archivo nombre='Feel_The_Pain.mp3' />
<archivo </exploracion>
En nuestro ejemplo empleamos ASP, para ello nos basamos en el tutorial Como leer los
archivos que hay en una carpeta del servidor con ASP y pasarlo a Flash.
El archivo que usamos genera esta salida.
Ya en Flash, arrastramos cuatro componentes al stage desde el panel de componentes.
Primero arrastramos un componente MediaPlayback que se va a encargar de la reproducción
de los archivos MP3, le ponemos como nombre de instancia controlador. Con el componente
seleccionado, pinchamos en la pestaña parámetros de la barra de propiedades para abrir el
Inspector de componentes. Una vez abierto, asignamos los parámetros como se muestra en
la figura.
Después posicionamos en el stage un componente del tipo lista y le ponemos como nombre
de instancia temas_list.
Este componente va a contener la lista de canciones de nuestro reproductor MP3 y nos va a
permitir cambiar de tema al pulsar sobre sus elementos.
Los otros dos componentes que nos quedan son dos del tipo Label, que nos van a indicar el
título de la canción que se está reproduciendo y el número de temas en la lista. Sus
respectivos nombres de instancia son titulo_lb y cantidad_lb.
A continuación teneís el código comentado que va en la línea de tiempo principal, que
además es el único de toda la película, exceptuando unas pequeñas líneas asociadas al
componente lista.
// código en línea de tiempo principal
// ajustes iniciales
// evitamos problemas con los nodos en blanco
XML.prototype.ignoreWhite = true;
// defino un estilo global para los componentes
_global.style.setStyle("fontSize", 10);
// en este array almacenaré las canciones
var array_temp:Array = new Array();
// objeto XML que carga la lista de archivos
var lista_xml:XML = new XML();
lista_xml.onLoad = cargarLista;
// vuelco el contenido del XML
// en el componente lista
function cargarLista():Void {
array_temp = this.firstChild.childNodes;
if (!isNaN(array_temp.length)) {
// numero de temas
titulo_lb.text = array_temp.length+" temas";
// relleno la lista
for (var k:Number = 0; array_temp[k]; k++) {
temas_list.addItem(array_temp[k].attributes.nombre);
// carga la primera canción
cargarMP3(0);
// con esta función cargo el mp3 dentro del
// componente mediaplayback
function cargarMP3(indice:Number):Void {
controlador.setMedia("/mp3/"+array_temp[indice].attributes.nombre, "MP3");
controlador.play(0);
// rutinas para pasar a la siguiente canción
// cuando termine la actual
var listenerObject:Object = new Object();
listenerObject.complete = function(eventObj:Object) {
_root.tema_actual++;
if (_root.tema_actual>=array_temp.length) {
_root.tema_actual = 0;
cargarMP3(_root.tema_actual);
};
controlador.addEventListener("complete", listenerObject);
// cargo la lista de reproducción
lista_xml.load("/asp/verLista.asp");
// esta línea sería del tipo
// lista_xml.load("miLista.xml");
// si empleo un archivo de texto
// plano con formato XML
Ahora sólo queda el código asociado al componente lista.
on (change) {
_root.cargarMP3(this.selectedIndex);
Podéis descargaros este mismo ejemplo y ver cómo funciona: mp3player.zip, contiene todos
los archivos necesarios para ejecutarlo en un servidor ASP excepto los propios MP3, que
ocupan varios megas.

Cómo crear películas Flash que se adapten al tamaño de la ventana
del navegador.
Licencia Copyleft.
Uno de los dilemas que se le presentan a un diseñador web cuando comienza un proyecto en
Flash es el tamaño de la película. Normalmente se define un tamaño objetivo y se trabaja
en base a esas dimensiones, el problema suele surgir cuando se visualiza el swf en pantallas
que tienen una resolución diferente.

¿No os ha ocurrido nunca esto? Diseñais una web con resolución fija, a 800 x 600px. por
ejemplo, y cuando el cliente ve los primeros pantallazos con una resolución de 1024 x 768 o
incluso de 1280 x 1024 px. (cada vez más frecuente debido al boom de los TFT de 17'') se
queja porque considera que hay un área importante de la pantalla sin utilizar. Llegados a
esta situación se presentan dos alternativas:
Alternativa 1. Convencemos a nuestro cliente de que el tamaño es el adecuado, le
aconsejamos de la necesidad de no saturar la pantalla, le hablamos de las bondades de usar
claros en la composición, le decimos que técnicamene es la única opción, bla, bla, bla.
Alternativa 2. Le diseñamos un website adaptable a la resolución de pantalla (siempre
habrá un tamaño mínimo). Si no sabeis como hacerlo, en este tutorial os explicamos nuestra
manera de hacerlo, que seguro que no es la única.
La web www.ivi-concept.com está desarrollada empleando el sistema que os vamos a
enseñar en este tutorial.
COMO HACERLO.
Aunque queremos que los contenidos de la película se adapten al tamaño de la ventana del
navegador, debemos definir un ancho y un alto mínimo para organizar y diseñar la
composición. Trabajaremos con estas dimensiones y planificaremos al ajuste para
resoluciones mayores. En nuestro ejemplo vamos a trabajar con una película de 600 x
400px. y le asignaremos comportamientos a los elementos que se ejecutarán cuando se
detecte un cambio en el área disponible para mostrar la peli, es decir, diseñamos la peli
pensando en como se debe reajustar para diferentes tamaños. Todos los elementos
ajustables tienen que ser del tipo movieclip y deben tener su origen en su esquina superior
izquierda. Si tenemos botones o cajas de texto los meteremos dentro de un movieclip.
Tenemos que incluir el swf en el html con unas dimensiones de 100% de ancho y 100% de
alto, además de indicarle en la línea de tiempo principal que no quiero que se reescale, pero
sí que se ajuste a la esquina superior izquierda. En el primer frame escribiremos:
Stage.scaleMode = "noScale";
Stage.align = "TL";
Si hacemos esto, cuando aumentemos o disminuyamos el tamaño de la ventana estaremos
haciendo lo propio con el tamaño del Stage. Todo el mecanismo del tutorial se basa en este
tamaño del Stage.

A continuación definimos las dimensiones mínimas:
ancho_minimo = 600;
alto_minimo = 400;
Para almacenar los clips que se tienen que ajustar (que serán todos menos los que se
ajustan arriba a la izquierda) vamos a crear un array o matriz:
clips_ajustables = new Array();
Definimos el objeto detector de eventos que va a detectar el cambio de tamaño y lo
asociamos al Stage para detectar los cambios:
myListener = new Object();
Stage.addListener(myListener);
La función rec es la que se va a ejecutar cada vez que detectemos un cambio en el tamaño
del Stage:
myListener.onResize = rec;
function rec() {
alto = Stage.height;
if (alto<alto_minimo) {
alto = alto_minimo;
ancho = Stage.width;
if (ancho<ancho_minimo) {
ancho = ancho_minimo;
for (var g = 0; clips_ajustables[g]; g++) {
clips_ajustables[g].alinear();
Esta función obtiene en primer lugar el nuevo tamaño del Stage, lo compara con las
dimensiones mínimas y si es menor asigna el valor mínimo. Después ejecuta el método
alinear() para cada uno de los elementos del array clips_ajustables que son los clips. Con
esto lo que hacemos es ajustar cada clip de la manera que le hayamos dicho. ¿cómo se lo
decimos? Ahora lo vemos...
Para continuar vamos a definir dos métodos o funciones para todos los movieclips mediante
prototipos, los prototipos nos permiten añadir métodos a clases enteras sin tener que
hacerlo individualemente, ya publicaremos un tutorial hablando sobre ellos. El primer método
que implementaremos será setAjuste(ajuste_x, ajuste_y, ajuste_width,
ajuste_height), a través del cual vamos a indicar como queremos que se ajuste cada clip.
// Los valores para ajuste_x son "izquierda", "derecha" y "centrar"
// Los valores para ajuste_y son "arriba", "abajo" y "centrar"
// Los valores para ajuste_width son false, un número de píxeles
// de anchura o el porcentaje de la anchura del clip respecto de la escena
// Lo mismo se aplica para ajuste_height con la altura
MovieClip.prototype.setAjuste = function(ajuste_x, ajuste_y, ajuste_width,
ajuste_height) {
this.ajuste_x = ajuste_x;
this.ajuste_y = ajuste_y;
this.ajuste_width = ajuste_width;
this.ajuste_height = ajuste_height;
// almaceno la posición y el tamaño
// iniciales de los clips ajustables
this.x0 = this._x;
this.y0 = this._y;
this.w0 = this._width;
this.h0 = this._height;
this.ajustePersonalizado = false;
// almaceno el clip en el array
clips_ajustables.push(this);
this.alinear();
};
Como se ve al final del bloque de código ejecutamos el método alinear() del clip. Esta
función la definimos de un modo parecido con otro prototipo. Con alinear() lo que hacemos
es ajustar cada clip dependiendo de los ajustes que le hayamos pasado con setAjuste():
M ovieClip.prototype.alinear = function() {
// si se le ha pasado el parámetro ajuste_width en la función

// setAjuste, significa que debo ajustar el ancho del clip
// cuando reescalo la pantalla
if (this.ajuste_width) {
if (this.ajuste_width.indexOf("%") != -1) {
// si el valor de this.ajuste_width es un porcentaje
this._width = (_root.ancho*parseInt(this.ajuste_width))/100;
} else {
// si el valor de this.ajuste_width es un número de píxeles
this._width = this.ajuste_width;
// lo mismo con el ajuste del alto del clip
if (this.ajuste_height) {
if (this.ajuste_height.indexOf("%") != -1) {
this._height = (_root.alto*parseInt(this.ajuste_height))/100;
} else {
this._height = this.ajuste_height;
// ajustes de posicion de los clips
if (this.ajuste_x == "izquierda") {
this._x = this.x0;
if (this.ajuste_x == "derecha") {
this._x = Math.round(this.x0+(_root.ancho-_root.ancho_minimo));
if (this.ajuste_x == "centrar") {
this._x = Math.round((_root.ancho-this._width)*0.5);
if (this.ajuste_y == "arriba") {
this._y = this.y0;
if (this.ajuste_y == "abajo") {
this._y = Math.round(this.y0+(_root.alto-_root.alto_minimo));
if (this.ajuste_y == "centrar") {
this._y = Math.round((_root.alto-this._height)*0.5);
}
// si el clip tiene un ajuste especial ejecuto su función ajustar
// que hemos definido en el onClipEvent(load) del clip
if (this.ajustePersonalizado) {
this.ajustar();
};
Como veis al final del código, se comprueba el valor de la propiedad ajustePersonalizado,
esta propiedad va a tener un valor igual a true en el caso de que queramos ajustar el clip de
un modo personalizado. Es decir, si os habeis fijado en el método setAjuste las opciones que
tenemos para ajustar un clip son ajustar a la izquierda, a la derecha o al centro en el plano
horizontal, ajustar arriba, abajo o al centro en el plano vertical, y definir ancho y alto dando
un número de píxeles o dando un porcentaje del Stage. Estas opciones son básicas, es muy
probable que determinados clips queramos ajustarlos de otro modo. Para ello, en el
onClipEvent(load) en lugar de ejecutar el método setAjuste, lo que vamos a hacer es
asignarle un valor true a su propiedad ajustePersonalizado, incluirlo dentro del array
clips_ajustables y definir su funcion ajustar() que es la que le ajustará de manera
personalizada. Si aplicais vuestra imaginación y un poco de tiempo en la construcción de las
funciones ajustar() podreis ampliar este tutorial y desarrollar sitios donde todo de se ajusta
al tamaño de pantalla de un modo impecable. El código de clip de ajuste personalizado del
ejemplo es:
onClipEvent (load) {
this.piePagina_txt.autosize = "left";
this.x0 = this._x;
this.y0 = this._y;
// como quiero ajustar el clip
// lo añado al array de clips ajustables
_root.clips_ajustables.push(this);
// este clip va tener un ajuste personalizado,
// va a extender a lo ancho la caja de texto
// que tiene dentro. Para ello definimos su
// ajuste dentro de la función ajustar
ajustePersonalizado = true;
function ajustar() {
this.piePagina_txt._width = _root.tira2_mc._x-_root.tira1_mc._x-26;
this.piePagina_txt._width = _root.tira2_mc._x-_root.tira1_mc._x-26;
this._y = _root.alto-this._height-5;
}
En cambio en un clip que se ajusta según los criterios estándar es código sería más sencillo:
onClipEvent (load) {
this.setAjuste("derecha", "arriba", false, false);
Seguir esta instrucciones es complejo, así que os recomendamos la descarga del fla con
comentarios explicativos.
ejemplo_ajustePantalla.fla
El formateo de datos mediante XML, se ha convertido en una
solución universal, por lo tanto, la clase XML nos permite obtener
incorporar datos externos a nuestra película de un modo
estandarizado.
En este tutorial vamos a aprender a recibir una serie de datos en formato XML, comprobar
posibles errores y trasladarlos a un array para manipularlos con mayor control.
COMO HACERLO.
En nuestro ejemplo vamos a recibir datos XML con información de varios modelos de coches,
para ello vamos a cargar un documento de texto con formato xml llamado coches.xml. Para
mostrar el funcionamiento de la clase XML, nos valdrá este archivo, sin embargo, en
proyectos reales, lo corriente es que los datos xml los recibamos desde una base de datos
empleando PHP, ASP o alguna otra tecnología de servidor.
Nuestro archivo coches.xml tiene este aspecto:
<?xml version="1.0" encoding="ISO-8859-1"?>
<coches>
<coche id="1" marca="Seat" modelo="Léon" vMax="215" />
<coche id="2" marca="Renault" modelo="Clio" vMax="188" />
<coche id="3" marca="Smart" modelo="ForTwo" vMax="135" />
<coche id="5" marca="Aston Martin" modelo="DB7" vMax="340" />
<coche id="4" marca="Ford" modelo="Fiesta" vMax="190" />
</coches>
Si nos fijamos en su estructura vemos que consta de una cabecera donde incluye la
codificación del documento y de un nodo principal de primer nivel llamado . Todos los
documentos XML sólo pueden que un único nodo principal. Dentro de tenemos los nodos con
sus atributos, que son los que realmente contienen los datos de cada coche.
Para recibir estos datos correctamente en Flash debemos incluir las sentencias en el primer
fotograma:
Con la primera línea le indicamos a Flash el sistema de códigos que debe emplear para no
tener problemas con las tildes y otros caracteres especiales. En la segunda línea le indicamos
que no interprete los saltos de línea de todos los futuros documentos XML como nodos
vacíos.
Creamos nuestro objeto XML y definimos la función que se ejecutará una vez la carga se
haya completado.
datos_xml = new XML();
datos_xml.onLoad = cargarDatos;
function cargarDatos(exito) {
// si el xml se ha cargado bien...
if (exito) {
cochesCargados = this.firstChild.childNodes;
for (var k = 0; cochesCargados[k]; k++) {
pasar_a_array(cochesCargados[k]);
delete cochesCargados;
delete datos_xml;
verCoches();
} else {
// aquí las sentencias en caso de error
La función cargarDatos comprueba la carga y si se ha realizado correctamente, nos
transforma los datos de los nodos en un array que podemos ordenar por el criterio que
deseemos. La transformación de datos la lleva a cabo, concretamente, otra función, la
función pasar_a_array. En esta función extraemos los atributos de cada coche y creamos un
elemento nuevo con ellos en el array coches_array que es con el que nos vamos a quedar
definitivamente.
function pasar_a_array(nodo) { var objetoCoche = new Object(); var atributos =
nodo.attributes; objetoCoche.marca = atributos.marca; objetoCoche.modelo =
atributos.modelo; objetoCoche.vMax = Number(atributos.vMax); objetoCoche.id =
Number(atributos.id); coches_array.push(objetoCoche); }
Para mostrar la lista de coches en la caja de texto ejecutamos la función verCoches.
function pasar_a_array(nodo) {
var objetoCoche = new Object();
var atributos = nodo.attributes;
objetoCoche.marca = atributos.marca;
objetoCoche.modelo = atributos.modelo;
objetoCoche.vMax = Number(atributos.vMax);
objetoCoche.id = Number(atributos.id);
coches_array.push(objetoCoche);
Simplemente nos queda introducir el código de los botones para poder ordenar los datos.
En el botón "ordenar por marca":
on (release) {
coches_array.sortOn("marca");
verCoches();
En el botón "ordenar por velocidad":
on (release) {
coches_array.sortOn("vMax", Array.DESCENDING | Array.NUMERIC);
verCoches();
}
En el botón "ordenar por id ":
on (release) {
coches_array.sortOn("id", Array.NUMERIC);
verCoches();
Para ver el ejemplo en marcha pulsa este enlace.
Aquí teneis el archivo ejemplo_xml.zip del ejemplo con el código comentado.

En este tutorial vamos a explicar cómo obtener el nombre y el
tamaño en KBytes de los archivos alojados en determinado
directorio del servidor web. Luego pasaremos está información a
Flash en formato XML.
Esta técnica tiene múltiples aplicaciones, como por ejemplo:
• Cargar una galería de imágenes que previamente hayamos depositado vía FTP en
en el servidor.
• Mostrar los enlaces de descarga de un conjunto de archivos en una carpeta.
(NUESTRO CASO)
• Explorar el contenido del disco duro del servidor web.
Como Flash no puede realizar esta función, necesitamos alguna tecnología de servidor como
PHP, ASP, ColdFusion..., en este tutorial vamos a emplear ASP.
COMO HACERLO.
Primero creamos el archivo explorar.asp que es el que se va a encargar de mostrar en
formato XML la información de los archivos, en este ejemplo se trata de la carpeta files
situada en la raiz de nuestro dominio. En esta carpeta están los archivos de descarga que
acompañan a nuestros tutoriales.
Contenido de explorar.asp
<%
' intentamos evitar la caché del navegador --------------
Response.Expires=0
Response.CacheControl="private"
' ----------------------------------------------------------------
Response.ContentType="text/XML"
'Creamos el objeto FileSystemObject
Set fso = Server.CreateObject("Scripting.FileSystemObject")
' elegimos la carpeta files desde la raiz del servidor web
' sustituir "/files/" por la que os interese
Set folder = fso.GetFolder(Server.MapPath(("/files/")))
Set files = folder.Files '
' construimos el XML ----------------------------------------
Response.Write("<?xml version='1.0' ?><exploracion carpeta='"+folder.Name+"'>")
For Each file in files
fil=file.Name
Response.write("<archivo nombre='")
Response.write(file.Name)
Response.write("' size='")
Response.write(file.size\1024)
Response.Write("' />")
Next
Response.Write("</exploracion>")
' ----------------------------------------------------------------
Set files = nothing
Set folder = nothing
Set fso = nothing
%>
En este código sólo tenéis que modificar la línea
Set folder = fso.GetFolder(Server.MapPath(("/files/")))
Donde ponéis la carpeta a explorar. Podéis ver el resultado del documento aquí.
Luego en nuestra película incluimos este código en el primer fotograma:
miXML = new XML();
miXML.onLoad = verArchivos;
function verArchivos(ok) {
carpetaElegida = this.firstChild.attributes.carpeta;
if (ok) {
var files = this.firstChild.childNodes;
for (var k = 0; files[k]; k++) {
archivos.addItem(files[k].attributes.nombre+" - "+files[k].attributes.size+" KBytes",
files[k].attributes.nombre);
} else {
//fallo en la carga
function clicLista(component) {
getURL("/files/"+component.getSelectedItem().data, "_self");
En la primera línea,
le decimos a Flash, que ignore los espacios en blanco y las tabulaciones en el momento de
analizar cualquier XML que carguemos.
Después, definimos el objeto XML que va a recibir los datos del fichero ASP y la función
verArchivos. Esta función se va recorrer el XML y va a añadir un elemento al listBox por
cada archivo que haya en la carpeta a explorar.
La función clicLista es la que se ejecuta cuando seleccionamos un elemento del listBox, en
nuestro caso, lanza la descarga del archivo seleccionado.
Por último falta el código del botón, que es el que carga los datos XML, el código es:
on (release) {
//evitamos cargar el XML más de una vez
if (!miXML.loaded) {
miXML.load("/asp/explorar.asp");
Os recomendamos la descarga del fla con comentarios explicativos, ejemplo_explorar.zip

La clase MovieClipLoader nos permite gestionar de un modo óptimo
la carga de clips de película.
Hasta la aparición de esta clase (en Flash MX 2004), la carga de archivos externos (swf o
jpeg) era un proceso muy limitado y con escasas posibilidades de control.
Antes la única opción era ejecutar la sentencia loadMovie o loadMovieNum y había que
recurrir a incordiosos bucles para comprobar la carga completa del archivo externo.
Ahora con el uso de la clase MovieClipLoader, Flash se encargará de comprobar la carga y
ejecutará las acciones que le indiquemos cuando el clip esté disponible. Además, prodemos
ejecutar código en distintos momentos del proceso. Es decir, cuando se inice la carga
podemos ejecutar acciones, durante el progreso de la carga, también, y como hemos
comentado, cuando finalice la transferencia, ¡¡¡también!!! pasamos a tener ¡todo bajo
control!
A continuación os podeis descargar un fla comentado donde se explica de modo sencillo
cómo emplear la clase MovieClipLoader.zip.
Nota: Para comprobar el funcionamiento perfectamente los archivos a cargar deben estar
alojados en un servidor remoto.
En este recurso vamos a aprender a hacer una galería fotográfica.
En ella se mostrarán las miniaturas de las imágenes y cuando
hagamos clic en alguna de ellas se mostrará en grande. Todo ello se
hará cargando dinámicamente las imágenes.
COMO HACERLO.
Como veremos más delante, este tutorial es el resultado de juntar varios tutoriales
existentes en tutoriales-flash.com.
Lo primero que hay que hacer es crear las miniaturas en nuestro programa de
manipulación de imágenes preferido. Tanto las miniaturas como los originales deben estar en
formato JPEG no progresivo, de lo contrario, Flash Player no podrá cargarlas.

Una vez que tengamos listos todos los JPEG, los metemos en dos directorios llamados
originales y minis. Es importante que cada imagen tenga el mismo nombre de archivo
en el original y en la miniatura.
Después de esto, preparamos el archivo XML que nos va a dar la lista de fotos.
En este ejemplo se trata del archivo http://www.tutoriales-flash.com/asp/verMiniaturas.asp
que podéis visualizar. Para aprender como enviarle a Flash un XML con la lista de archivos
de determinado directorio tenéis disponible estos otros tutoriales.
Recepción de datos externos en Flash. La clase XML.
Como leer los archivos que hay en una carpeta del servidor con ASP y pasarlo a Flash.
Para el resto del tutorial no saldremos de Flash. Todo el código del ejemplo va en el primer
fotograma salvo unas pequeñas acciones en los botones de pasar página. Vamos a ir
poniendo el código de este primer fotograma en bloques para comentarlos.
// acciones en fotograma 1
stop();
import mx.transitions.Tween;
// separacion-> distancia entre las imágenes
// tanto horizontal como vertical
var separacion:Number = 116;
// vbles para pasar de página
var pagina_actual:Number = 1;
var num_paginas:Number;
// array donde metemos los elementos del XML
var IMG_array:Array;
// objeto XML que carga la lista de miniaturas
Hasta aquí hemos definido una serie de ajustes iniciales.
var miniaturasXML:XML = new XML();
miniaturasXML.onLoad = mostrarMiniaturas;
miniaturasXML.load("/asp/verMiniaturas.asp");
// funcion que se ejecuta al cargar el XML

function mostrarMiniaturas():Void {
// contadores de columna y fila para
// disponer las miniaturas
var fila:Number = 0;
var col:Number = 0;
// paso los datos del XML al array
IMG_array = this.firstChild.childNodes;
// como caben 12 fotos por página podemos
// saber el núm de páginas necesarias para
// mostrar todas las fotos
num_paginas = Math.ceil(IMG_array.length/12);
// creo el clip donde meteremos todas las miniaturas
var lienzo:MovieClip = _root.createEmptyMovieClip("lienzo_miniaturas",
_root.getNextHighestDepth());
// lo posiciono donde nos conviene
lienzo._x = 19;
lienzo._y = 100;
// y lo enmascaro con el clip situado en la
// capa mascara. se enmascara para hacer el deslizamiento del
// clip cuando tengamos muchas miniaturas y no entren todas a
// la vez en pantalla (nuestro caso)
lienzo.setMask(mascara_mc);
// recorro el array que contiene la lista con los nombres de
// los archivos de las miniaturas e invoco la función crearMiniatura
// que es la que carga la imagen, la recoloca, le pone un pequeño
// marco y le asigna las acciones para verla ampliada
for (var k:Number = 0; IMG_array[k]; k++) {
// extraigo la ruta del archivo de imagen
//var ruta:String = "minis/"+IMG_array[k].attributes.nombre;
// como sólo tengo tres columnas, cuando llegue a
// la tercera, avanzo una fila y retorno a la primera
if (col>2) {
col = 0;
fila++;
// creo la miniatura. extraigo la ruta del archivo de imagen
// y la paso como tercer parámetro
crearMiniatura(col, fila, IMG_array[k].attributes.nombre);

col++;
En el bloque anterior hemos definido el objeto XML que va a recibir los datos y también la
función encargada de procesarlos.
function crearMiniatura(columnaF:Number, filaF:Number, ruta:String) {
// bajo_clip es el clip que contendrá el marco de la miniatura
var bajo_clip:MovieClip =
lienzo_miniaturas.createEmptyMovieClip("bajo_"+filaF+"_"+columnaF,
lienzo_miniaturas.getNextHighestDepth());
// clip contendrá la imagen
var clip:MovieClip = lienzo_miniaturas.createEmptyMovieClip("foto_"+filaF+"_"+columnaF,
lienzo_miniaturas.getNextHighestDepth());
// para cargar la miniatura definimos un objeto MovieClipLoader
// y un objeto detector de eventos
var mi_mcl:MovieClipLoader = new MovieClipLoader();
var miListener:Object = new Object();
mi_mcl.addListener(miListener);
clip.valor = "aaa";
// cargamos la imagen
mi_mcl.loadClip("/minis/"+ruta, clip);
miListener.onLoadStart = function(target_mc:MovieClip) {
// cuando comienza la carga de la imagen
// ponemos al _alpha a 0
target_mc._alpha = 0;
};
miListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number,
bytesTotal:Number) {
// aquí podéis poner acciones para mostrar una precarga,
// este caso no lo hemos considerado oportuno
};
// cuando ya se ha completado la carga y tenemos disponible el clip
miListener.onLoadInit = function(target_mc:MovieClip) {
// recolocamos la imagen (todavía está oculta, con _alpha=0)
target_mc._x = (separacion*columnaF)+(100-target_mc._width)*0.5;
target_mc._y = (separacion*filaF)+(100-target_mc._height)*0.5;
// recolocamos el marco que rodea a la foto
bajo_clip._x = target_mc._x-5;
bajo_clip._y = target_mc._y-5;
// dibujamos el marco
with (bajo_clip) {
beginFill(0xffffff);
lineStyle(1, 0xEEEEEE, 100);
lineTo(target_mc._width+10, 0);
lineTo(target_mc._width+10, target_mc._height+10);
lineTo(0, target_mc._height+10);
lineTo(0, 0);
endFill();
// al pinchar sobre el área del marco,
// mostramos la foto grande con la función
// verFotoGrande
bajo_clip.onRelease = function() {
verFotoGrande(ruta);
};
// muestro la miniatura animando el _alpha hasta 100
var myTween:Tween = new Tween(target_mc, "_alpha",
mx.transitions.easing.Regular.easeOut, 0, 100, 2, true);
};
Hasta aquí hemos definido la función que crea cada una de las miniaturas. En este tutorial
tenéis material de apoyo.
Carga de clips externos en Flash. La clase MovieClipLoader.
function verFotoGrande(ruta:String) {
clearInterval(intervaloColor);
// creo el clip donde irá la foto grande en una profundidad fija
// para que se reemplace cada vez que pincho en una miniatura
var grande:MovieClip = _root.createEmptyMovieClip("grande_mc", 2*IMG_array.length+11);
// igual con el clip que contendrá el marco
var bajo_grande:MovieClip = _root.createEmptyMovieClip("bajo_grande_mc",
2*IMG_array.length+10);
// posición vertical fija
grande._y = 100;
// para cargar la foto grnade definimos otro objeto MovieClipLoader
// y otro objeto detector de eventos
var grande_mcl:MovieClipLoader = new MovieClipLoader();
var grandeListener:Object = new Object();
grande_mcl.addListener(grandeListener);
// cargo la foto grande
grande_mcl.loadClip("/originales/"+ruta, grande);
grandeListener.onLoadStart = function(target_mc:MovieClip) {
// aplico una transformación de color que deja el clip
// tintado de blanco
myColor = new Color(target_mc);
myColorTransform = new Object();
myColorTransform = {ra:100, rb:255, ga:100, gb:255, ba:100, bb:255, aa:100, ab:0};
};
grandeListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number,
bytesTotal:Number) {
// aquí podéis poner acciones para mostrar una precarga,
// este caso no lo hemos considerado oportuno
};
grandeListener.onLoadInit = function(target_mc:MovieClip) {
// recolocamos la imagen (todavía está oculta)
target_mc._x = 382+Math.round((315-target_mc._width)*0.5);
// recolocamos el marco que rodea a la foto grande
bajo_grande._x = target_mc._x-5;
bajo_grande._y = target_mc._y-5;
// dibujamos el marco
with (bajo_grande) {
beginFill(0xffffff);
lineStyle(1, 0xEEEEEE, 100);
lineTo(target_mc._width+10, 0);
lineTo(target_mc._width+10, target_mc._height+10);
lineTo(0, target_mc._height+10);
lineTo(0, 0);
endFill();
}
// con estas rutinas hacemos la transición de color desde el blanco
var indiceColor:Number = 255;
intervaloColor = setInterval(cambiarColor, 10);
function cambiarColor() {
myColorTransform = {ra:100, rb:indiceColor, ga:100, gb:indiceColor, ba:100,
bb:indiceColor, aa:100, ab:0};
indiceColor -= 2;
if (indiceColor == -1) {
clearInterval(intervaloColor);
};
Ya hemos creado la foto grande. Para hacer las transición de la foto grande hemos usado el
método setTransform de la clase Color. Es este otro tutorial se explica un ejemplo de su uso.
Tutorial para cambiar el color de un clip en Flash, usando ActionScript.
// con esta función desplazo el lienzo de las miniaturas para
// pasar de página
function moverLienzo(posY:Number):Void {
var myTween:Tween = new Tween(lienzo_miniaturas, "_y",
mx.transitions.easing.Regular.easeOut, lienzo_miniaturas._y, posY, 1, true);
// deshabilito de inicio el botón de volver atrás
// ya que se muestra la página 1
pMenos_btn.enabled = false;
pMenos_btn._alpha = 30;
Por último queda el código de los botones de pasar página.
En página-
on (release) {
// activo el botón página+

pMas_btn.enabled = true;
pMas_btn._alpha = 100;
moverLienzo(100-(pagina_actual-2)*464);
pagina_actual--;
// si llego a la primera página
// ya no puedo retroceder, por tanto
// deshabilito el botón
if (pagina_actual == 1) {
pMenos_btn.enabled = false;
En página+
on (release) {
// activo el botón página-
pMenos_btn.enabled = true;
moverLienzo(100-(pagina_actual*464));
pagina_actual++;
// si llego a la última página
// ya no puedo avanzar, por tanto
// deshabilito el botón
if (pagina_actual == num_paginas) {
pMas_btn.enabled = false;
pMas_btn._alpha = 30;
En este tutorial os hemos enseñado los pasos para hacer una galería de fotos, ahora es el
momento de experimentar con código e introducir vuestras propias variaciones sobre el
ejemplo.
Podéis descargaros este mismo ejemplo y ver cómo funciona: galeria.zip.

En las Flash las transformaciones básicas que podemos aplicar a un
clip son cambiar la posición, la rotación y la escala.
Sin embargo, si queremos distorsionar un clip de película veremos que con las
herramientas que nos proporciona Flash no podremos hacerlo directamente.
En este documento os vamos a facilitar una manera de distorsionar un clip de película en
tiempo de ejecución con ActionScript. En realidad el clip original permanecerá inalterable, lo
que haremos será crear otro clip con la distorsión aplicada y ocultar el primero. El proceso se
va a basar en la clase bitmapData de ActionScript. La clase bitmapData nos permite
akmacenar y manipular los píxeles que componen un clip.
COMO HACERLO.
La distorsión se va a hacer según este esquema donde cada bloque representa una columna
de píxeles:
Se va a descomponer la representación gráfica del clip original en filas o columnas según sea
la distorsión horizontal o vertical. Después modificaremos las dimensiones de estos
segmentos y se generará la apariencia de distorsión. Vamos explicar sólo la distorsión
vertical, ya que la distorsión horizontal es prácticamente igual y las diferencias en el código
son mínimas como podréis comprobar más adelante.
El primer paso consiste en almacenar en un objeto bitmapData los píxeles del clip a
distorsionar. Lo llamaremos bitmap_1. Después vamos a crear un clip vacío que contendrá
el clip con la distorsión aplicada. Su identificador será contenedor. Para crear la distorsión
vamos a descomponer la rejilla de píxeles del objeto bitmap_1 en sus columnas, de modo
que nos quedará dentro del clip contenedor una serie clips de un píxel de ancho y la misma
altura que el original. Para copiar estos píxeles, nos apoyamos en otros objetos bitmapData,
que se corresponden con el identificador bitmap_temp que hay dentro del bucle en el código.
// importamos las clases necesarias
import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;
MovieClip.prototype.distorsionarV = function(distorsion:Number) {
var ancho:Number = Math.round(this._width);
var alto:Number = Math.round(this._height);
var transparent:Boolean = true;
var fillColor:Number = 0x00000000;
// objeto bitmapData donde almacenamos la info del clip a distorsionar
var bitmap_1:BitmapData = new BitmapData(ancho, alto, transparent, fillColor);
bitmap_1.draw(this);
this._visible = false;
distorsionado_mc.removeMovieClip();
// clip donde crearemos la distorsión
var contenedor:MovieClip = this._parent.createEmptyMovieClip("distorsionado_mc",
this._parent.getNextHighestDepth(), {_x:this._x, _y:this._y});
contenedor._x = this._x;
contenedor._y = this._y;
for (var k:Number = 1; k<ancho; k++) {
var clip_temp:MovieClip = contenedor.createEmptyMovieClip("clip"+k,
contenedor.getNextHighestDepth(), {_x:k, _y:0});
clip_temp._x = k;
var bitmap_temp:BitmapData = new BitmapData(1, alto);
bitmap_temp.copyPixels(bitmap_1,new Rectangle(k, 0, k, alto),new Point(0, 0));
clip_temp.attachBitmap(bitmap_temp,clip_temp.getNextHighestDepth(),"auto",true);
clip_temp._yscale = ((k/(alto-1))*(100-distorsion))+distorsion;
clip_temp._y = (alto-clip_temp._height)*0.5;
// liberamos memoria
bitmap_1.dispose();
};
Para distorsionar un clip simplemente hay que llamar a su método
distorsionarV(distorsion). El valor del parámetro distorsión debe estar entre 0 y 100 sino
los resultados son imprevisibles (podéis experimentar de todos modos). Un ejemplo sería:
miClip.distorsionarV(70);
El código os lo facilitamos en unos archivos .as de modo que para emplearlos tenéis dos
opciones:
• Copiar el código del .as dentro de nuestra película.
• Usar un #include para disponer de sus funciones.
Con esta base lo interesante es probar nuevas formas de distorsión o incluso combinar varias
distorsiones.
En esta imagen sea aplicado una distorsión horizontal y luego otra vertical para conseguir un
efecto de perspectiva.
Descarga de los archivos .as: distorsion.zip
Una herramienta gratuita para hacer gráficas en Flash. Permite
gráficos diversos, como gráficas de barras, de líneas, de tarta, etc.
Por Miguel Angel Alvarez
Vamos a hablar de un componente Flash muy interesante para la creación de gráficas de
representación de datos. Se trata de Open Flash Chart, una herramienta de código libre,
gratuita y libre de uso.
Con Open Flash Chart podrás crear gráficas en tu página web con facilidad y sin necesidad de
tener Flash instalado en tu ordenador. En las gráficas podrás cargar los datos que desees y
elegir entre varios tipos de gráficas, los colores, etc. Una vez publicadas las gráficas en tu
sitio web las podrán ver todos los visitantes que tengan instalado el plugin de Flash, lo que
es casi la totalidad del tráfico que podrás recibir en tu página.
Es un proyecto muy completo, que no sólo permite crear variados modelos de gráficas, sino
que además tiene diversos tipos de usos y tiene librerías para utilizar integrar el sistema de
gráficas Flash con la carga de datos en diversos lenguajes de programación web como
PHP, .NET, Perl, Java, Python, Rubi y Google WebToolkit.
Podemos encontrar Open Flash Chart en http://teethgrinder.co.uk/open-flash-chart/
En el momento de escribir este artículo está en fase de desarrollo la nueva versión del
producto, Open Flash Chart 2, que tiene diversas mejoras, pero principalmente se trata de
un cambio en el esquema de desarrollo, que según el autor, es mucho más robusto y
permite una mejor organización del código y el crecimiento del proyecto. Podemos encontrar
la nueva versión en: http://teethgrinder.co.uk/open-flash-chart-2/
Lo más destacable para los desarrolladores que pretendan utilizar la segunda versión de
Open Flash Chart es que la carga de datos se realiza por JSON, una notación especial de
Javascript para la definición de objetos.
Para hacer unas pruebas del sistema, aunque la versión segunda del proyecto está en fase
Beta, en DesarrolloWeb.com hemos creído que sería mejor ver la segunda versión. Según
dice el autor además, la versión 1 ya no se va a seguir actualizando.
Utilizar Open Flash Chart
La creación de gráficas en Flash se puede hacer de una manera bastante rápida, al menos
los primeros ejemplos que ofrecen. Para ello será necesario que descarguemos el sistema
desde zona de Download de la página de Open Flash Chart. Con ello obtendremos un archivo
zip que tenemos que descomprimir en nuestro disco duro.
Dentro veremos una estructura de directorios que tiene muchos códigos y componentes,
aunque no cabe asustarse, porque para los ejemplos más sencillos no hace falta utilizar más
que un archivo, que es la película Flash (archivo open-flash-chart.swf) que hay en la raíz del
paquete comprimido. Esa película o animación Flash es la que tiene el código para generar
por Flash la gráfica. Luego la tendremos que configurar con un archivo JSON para indicarle
los datos que se desean mostrar.
Para incluir en una página web la película Flash tenemos que utilizar un código como este:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=
8,0,0,0"
width="600"
height="300" id="graph-2" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="open-flash-chart.swf" />
<param name="quality" value="high" />
<embed
src="open-flash-chart.swf"
quality="high"
bgcolor="#FFFFFF"
width="600"
height="300"
name="open-flash-chart"
align="middle"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
Este código lo he extraído del tutorial 1 de la creación de gráficas Flash que tienen en la
propia página del proyecto. Es un código normal para incluir una película Flash en una página
web.
Ahora bien, para que esto funcione tienes que tener en cuenta una serie de cosas que
veremos a continuación.
1) Tienes que tener la animación Flash (archivo open-flash-chart.swf) en el mismo directorio
donde está el archivo con el código HTML anterior. Podrías cambiar el archivo swf al lugar
que desees, pero entonces tendrás que actualizar la ruta a este archivo en el código HTML
anterior. Fíjate que la ruta al archivo está en dos sitios del código anterior, en una etiqueta
PARAM y en un atributo de la etiqueta embed src="open-flash-chart.swf".
2) Tienes que crear el código JSON para la carga de datos de la gráfica y ponerlo en el lugar
correcto, con el nombre de archivo "data.json". Según la documentación de Open Flash Chart
parece que se busca este archivo de datos en varios lugares ese archivo json, por ejemplo en
la raíz del dominio, pero según las pruebas que he hecho en desarrolloweb .com, no me ha
funcionado así. Luego veremos un ejemplo de este código y una manera de localizarlo para
que funcione el ejemplo, si es que no queremos colocarlo en la raíz del dominio.
3) Importante: el ejemplo tampoco se visualizará correctamente si no colocas los archivos
en un servidor web. Es decir, tienes que publicarlos en tu espacio de alojamiento que tengas
en Internet y no en tu ordenador local. O si tienes un servidor web configurado en tu
ordenador, debes colocarlo en algún directorio de publicación y acceder al ejemplo pasando
el servidor web. Esto es porque el Flash adquiere por http el archivo JSON, por medio de
Ajax, lo que sólo funciona si estás en un servidor web y accedes a la página a través de http.
Archivo JSON de carga de datos de la gráfica Flash
El archivo JSON lo debemos crear para indicarle a la película Flash cuáles son los datos que
se tienen que mostrar. Este archivo se escribe con una sintaxis especial, en lenguaje
Javascript. No te asustes porque la sintaxis es sencilla de leer, entender, editar según tus
necesidades, ya que JSON es una notación entendible por las personas.
De todos modos, el propio Open Flash Chart tiene una serie de librerías en distintos
lenguajes, como había comentado antes en este artículo de DesarrolloWeb.com, para
generar juegos de datos en sintaxis JSON, por lo que no tendrías por qué conocer nada sobre
JSON para utilizar este componente.
Un archivo JSON que podemos utilizar de ejemplo tiene esta forma:
"title":{
"text": "Gráfica de prueba - DesarrolloWeb.com",
"style": "{font-size: 20px; color:#999900; text-align: center;}"
},
"y_legend":{
"text": "Gráfica creada con Open Flash Chart",
"style": "{color: #99cc33; font-size: 12px;}"
},
"elements":[
"type": "line",
"alpha": 0.5,
"colour": "#0000cc",
"text": "Páginas vistas",
"values" : [14,12,14,9,10,12,15,12,13]
},
"type": "line",
"alpha": 0.5,
"colour": "#660033",
"text": "Paginas vistas 2",
"values" : [9,7,8,10,12,14,13,10,11]
],
"x_axis":{
"stroke":2,
"colour":"#d000d0",
"grid_colour":"#00ff00"
},
"y_axis":{
"stroke": 4,
"tick_length": 3,
"colour": "#9933ff",
"grid_colour": "#0000ff",
"offset": 0,
"max": 20
} Lo he sacado del tutorial que ofrecen en la página del producto y sólo he adaptado unas
pocas cosas para personalizarlo y de paso conocer algunas de las funcionalidades de este
módulo.
Ahora sólo tendríamos que indicar el lugar donde está el archivo con los datos. Para ello la
forma más sencilla es a través de la URL.
Coloca simplemente el archivo JSON en el mismo directorio que has colocado tanto la página
web con el código HTML para invocar al Flash, como la propia película, con el nombre
"data.json". Así pues tendrás en ese directorio 3 archivos.
• El archivo HTML con el código para incluir la película Flash
• El archivo de la animación Flash: open-flash-chart.swf
• El archivo con los datos JSON: data.json
Ahora accede a esa página indicando en la URL el nombre del archivo JSON:
http://www.tudominio.com/ruta_de_tu_archivo_html.html?ofc=data.json
Hemos colocado el ejemplo en DesarrolloWeb.com para que puedas verlo.

Flash para Revisar

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Flash para Revisar

Caricato da

Copyright:

Formati disponibili

Fundamentos necesarios para que puedas desenvolverte fácilmente

en el entorno de trabajo de Flash. Veremos los conceptos básicos

Listado de los capítulos

2.- Qué es Flash

3.- Entorno de trabajo en Flash

4.- Capas y fotogramas en Flash

5.- Clases y objetos en Flash

Bienvenido al manual de Flash de DesarrolloWeb.

desenvolverte fácilmente en el entorno de trabajo de Flash. A lo largo de estos artículos,

describiremos el empleo de las herramientas más comúnmente utilizadas.

que creáis vuestras propias animaciones.

de Macromedia, un navegador web y un editor de texto como el bloc de notas de Windows.

Esperamos que el manual resulte de vuestro agrado y os invitamos a complementar su

• La lista de ayuda de DesarrolloWeb, donde podrás plantear tus dudas a otros

desarrolladores al mismo tiempo que contribuyes al intercambio de conocimientos.

relativos a esta tecnología.

animaciones y otros recursos de interés.

y que no dudéis en aportar cualquier tipo de complemento a los capítulos añadiendo un

Descripción de esta tecnología vectorial.

la aparición de la tecnología desarrollada por Macromedia denominada Flash.

Flash es la tecnología más comúnmente utilizada en el Web que permite la creación de

Como puede que sepáis, existen dos tipos de gráficos:

• Los gráficos vectoriales, en los cuales una imagen es representada a partir de

líneas (o vectores) que poseen determinadas propiedades (color, grosor...). La

de cuadrícula en la cual cada uno de los cuadrados (píxeles) muestra un color

determinado. La información de estos gráficos es guardada individualmente para

gráficos son dependientes de la variación del tamaño y resolución, pudiendo perder

calidad al modificar sucesivamente sus dimensiones.

fácilmente redimensionables y alterables por medio de funciones, así que de un

almacenamiento inteligente de las imágenes y sonidos empleados en sus animaciones por

cargar la animación al mismo tiempo que ésta se muestra en el navegador (técnica

Además de este aspecto meramente estético, Flash introduce en su entorno la posibilidad de

visitante. Por supuesto, no se trata de la única alternativa de diseño vectorial aplicada al

Describimos la interface de la aplicación Flash MX.

aplicación en versión prueba desde el sitio de Macromedia.

Una vez descargada e instalada, ya podemos ponernos a trabajar. Evidentemente, aprender

intentaremos hacer hincapié en lo segundo dejando al lector la posibilidad de descubrir poco

diálogo que nos propone tres modos de uso distintos:

• Modo diseñador, destinado a crear animaciones y gráficos

• Modo general, en el que dispondremos de todas las opciones de Flash además de la

acceder a él desde la barra de herramientas en la sección Ayuda>Bienvenido.

Dentro de esta interface, podemos distinguir tres partes principales:

edición de gráficos. En cierto modo es como el papel en el cual dibujaremos lo que

una de las imágenes diseñadas en el escenario. Podemos subdividirla en dos partes:

queda reservada a la gestión de los fotogramás. Ambos elementos, capas y

fotogramás serán tratados más adelante.

• La caja de herramientas Aquí encontraremos las herramientas de edición grafica

sea vectorial o no.

Explicamos los conceptos de capas y fotogramas y su uso.

En estos rectángulos podemos alojar tres tipos diferentes de imágenes:

• Imágenes clave Se trata de las imágenes que nosotros mismos dibujaremos

de la primera imagen clave de manera a producir un efecto de objeto estático.

útiles ya que se generan automáticamente y proporcionan un efecto suave de

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

permiten trabajar la animación en distintos planos independientes.

uno de los elementos de la animación: objetos, fondo, sonidos o trayectorias.

Un uso inteligente de las capas es la base para crear animaciones de calidad.

Cómo construir clases y objetos en Flash.

insistir en la diferencia entre clase y objeto.

Comencé con el concepto del hombre en su acepción de todo el género humano.

Por si desea leerla, aquí está:

de ser una idea.