Comenzamos el tutorial de Flash...

19/2/03 - 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.

Qué es Flash

Descripción de esta tecnología vectorial.

19/2/03 - 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.

Entorno de trabajo en Flash

Describimos la interface de la aplicación Flash MX.

19/2/03 - 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.

Capas y fotogramas en Flash

Explicamos los conceptos de capas y fotogramas y su uso.

19/2/03 - Como hemos dicho en el capítulo anterior, la línea de tiempo es donde

podremos organizar la sucesión de imágenes que dan lugar a una animación. En
este capítulo introduciremos los conceptos de capa y fotograma, vitales para una
compresión del funcionamiento de Flash.

En cierta medida, Flash trabaja como si fuese una película. Una animación es una
sucesión de imágenes fijas que, al pasar rápidamente unas detrás de otras, dan la
impresión de un movimiento. Cada una de estas imágenes fijas es llamada también
fotograma. Los fotogramas son representados bajo forma de rectángulos en la
parte derecha del escenario.
En estos rectángulos podemos alojar tres tipos diferentes de imágenes:

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

dibujaremos
 Imágenes fijas Son las imágenes claves copiadas en los fotogramas
siguientes al de la primera imagen clave de manera a producir un efecto de
objeto estático.

 Imágenes de interpolación Se trata de imágenes calculadas por Flash que

permiten la transición gradual entre dos imágenes claves. Este tipo de
imágenes muy útiles ya que se generan automáticamente y proporcionan un
efecto suave de movimiento o transformación.

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

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

Por defecto, al comenzar una nueva escena encontraremos en nuestra línea de

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

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

Clases y objetos en Flash

Cómo construir clases y objetos en Flash.

21/3/06 - Como esta es la primera vez que escribo sobre Clases y Objetos, veo
que es necesario insistir en la diferencia entre clase y objeto.
Comencé con el concepto del hombre en su acepción de todo el género humano.
Buscando un concepto lógico pedí por Google "Ferrater Mora concepto hombre" y es
apasionante leer como refuta cada definición: Ser racional, Homo sapiens, Homo
faber, Homo symbolicus, etc. Y al fin da su definición "El hombre es «un modo de
ser su cuerpo»" y la explica largamente.
Por si desea leerla, aquí está:
http://www.ferratermora.com/lang_palabras_section.html
De todos modos doy por hecho que cualquiera sea la idea que ustedes tienen de el
ser humano, saben que es un concepto, una definición, una clase. Y que Juan
Pérez, mi vecino y María Duarte, su esposa son realidades, instancias de la clase. El
objeto es la idea hecha realidad.

Una clase se va ampliando en nuevas clases: La clase arquitecto es para nosotros la

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

FLASH CLASES Y OBJETOS

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

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

La palabra clave extends

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

Para hacer esto, debemos escribir un script directamente en un archivo ActionScript

Archivo -->Nuevo-->ArchivoActionScript y lo guardas en la misma Carpeta donde

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

1 class Arrastre extends MovieClip {

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

6 private function Arrastrar():Void{

7 this.startDrag();
8}

9 private function Soltar():Void{

10 this.stopDrag();
11 }
12 }
Esta clase se llama Arrastre y amplía la clase MovieClip. La palabra extends
significa que si bien se trata de una ampliación no estamos inventando nada nuevo,
sino que estamos construyendo con clases ya definidas en el sistema de FLASH.

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

A continuación hay que escribir una función que tenga el mismo nombre que la
clase y que explicite con claridad de que se trata esta subclase.
Se trata de una subclase de MovieClip que atiende a las órdenes de Arrastrar y
Soltar.
Esos nombres también los elegimos nosotros y lo decimos en las líneas 2, 3, 4 y 5.

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

La subclase Arrastre quedó definida.

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

6 private function Arrastrar():Void{

7 this.startDrag();
8}

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

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

Ahora tenemos que hacer que el clip cipres que tenemos en biblioteca posea la
clase Arrastre que hemos definido.

Dentro de la biblioteca seleccionas el clip y pulsas Propiedades con el botón derecho

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

En esta aplicación dibujo.fla participan de la clase arrastre cada una de las piezas
que forman la casa y también el árbol que está detrás de ella.

Como ejercicio crea otro clip y luego en biblioteca le puedes agregar pulsando
Propiedades su participación en esta nueva clase que ya la has puesto como archivo
Arrastre.as en tu carpeta.
También hemos creado otra clase de este mismo tipo que nombramos Calesita

A ella pertenecen, el clip Flores que ves como pastito, el clip sauce y el clip
VerNover que es el texto de entrada.

Clip Calesita

Aquí tienes el script Calesita.as

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

La funciones que definen a la clase Calesita son Clic y Soltar

La clase Clic se define con las funciones del sistema start Drag que usamos en la
anterior y nextFrame que nos interesa especialmente porque vamos a hacer
MovieClips de varios fotogramas.

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

class Calesita extends MovieClip {

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

clip VeroNover

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

La acción del fotograma es stop();

Tiene dos gráficos:

El texto:
"Ver/ocultar este texto"
Y debajo el texto largo.
El primer texto mide 156 x 20 y por eso lo colocamos en -78 para x y en -10 para
y.
El segundo texto, debajo y más o menos que su mitad coincida con la del primero.
En el segundo fotograma la acción es stop();y ponemos solamente el gráfico chico.
En el último fotograma no ponemos ningún gráfico y su acción es: gotoAndStop(1)
Y así logramos el efecto calesita de girar y volver al primer fotograma.
No olvides, lo que explicamos en el comentario anterior:
Hay que exportarlo para ActionScript y escribir la nueva clase en la ventanita
correspondiente.

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);

Puedes ver el ejemplo funcionando aqui.

Bibliotecas en Flash

El uso de bibliotecas. Concepto de simbolo y ocurrencia.

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.

Mi primera animación en Flash I

Creación de un símbolo en nuestra biblioteca flash.

14/3/03 -

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.

Mi primera animación en Flash II

Vamos a empezar a trabajar con la animación propiamente dicha. Creación

de imágenes clave.

14/3/03 - 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.

Mi primera animación en Flash III

Creación de una guía de movimiento

18/3/03 - 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.

Mi primera animación en Flash IV

Creando una interpolación

18/3/03 - 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.

El resultado, es una animacion como esta:

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.

Colocar películas Flash en nuestras páginas

Un pequeño truco para conseguir el código necesario para incrustar una
película Flash dentro de una página web.

29/12/03 - 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.

Crear un código HTML para mostrar una película Flash

Vemos un sencillo código HTML para visualizar Flash en una página web y
explicamos sus etiquetas.

12/7/07 - 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.

Cómo hacer botones en Flash

Explicación paso a paso sobre la creación de botones en el programa Flash.

12/11/03 - 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.

Enlazar páginas web por medio de botones Flash

Cómo hacer que al pulsar un botón se acceda a otra página en el

navegador.

12/11/03 - 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.

Enlaces email flash

Cómo enlazar un botón flash con una dirección de correo electrónico.

18/11/03 - 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.

Interpolación de Formas

Cómo cambiar la forma física de un objeto en el escenario de Flash.

05/2/04 - 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)

Un ejemplo parecido de nuestra interpolación de formas es:

Shape Hint. Interpolación ordenada de formas

La interpolación de formas es un proceso que lleva consigo ideas de

ordenación. En este capítulo veremos como podemos conseguirlo usando
Shape Tweening.

13/5/04 -

En esta capítulo nos ocupamos del Shape Tweening para controlar y

ordenar la interpolación de las formas. Primero preparamos la
interpolación a modificar: transformamos un rectángulo a un
triángulo.

En el primer fotograma dibujamos un rectángulo. Copiamos su base

Edición>Copiar. Insertamos un fotograma clave vacio Insertar>
Fotograma Clave Vacío en el fotograma 25, y pegamos
Insertar>Pegar en sitio (paste in place). Para ver el original
rectángulo pulsamos el botón Onion Skin y completamos el
triángulo.

Nos colocamos en alguno de los fotogramas intermedios. En el panel

de propiedades en la opción Interpolación (Tween) desplegamos el
combo de opciones y elegimos la opción Forma (Shape). Probamos la
pelicula (Ctrl+Enter)
 Podemos ver que la tranformación es bastante desordenada.
Queremos que la base siempre quede en su sitio.

En el primer fotograma hacemos click en el menu

Modify>Shape>Add Shape Hint. Desplazamos el punto rojo al ángulo
iquierdo del rectángulo y en el fotograma 25 al ángulo izquierdo del
triángulo.

Añadimos otro Shape Hint al ángulo derecho de las formas.

Probamos la pelicula (Ctrl+Enter).

Podemos ver que la transformación ya es mucho más ordenada.

Añadimos otro Shape Hint a la mitad de la base de las formas y
 probamos la pelicula (Ctrl+Enter).

Interpolaciones de símbolos

Con este capítulo el usuario aprenderá a hacer interpolaciones con objetos

complejos como grupos y símbolos.

16/6/04 - 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

Efecto de máscaras con Flash

Cómo se pueden usar las máscaras para obtener una animación web.

11/3/04 - 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

Onion skin (piel de cebolla)

Existe otro tipo de animación llamada "fotograma por fotograma". En este

capítulo veremos como hacer este tipo de animaciones.

02/7/04 - 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

Importar bitmap y usar como relleno

Como elegir una imagen y poderla usar como fondo o relleno de manera
sencilla.

02/11/04 - 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.

Modificar Bitmap
Vemos como modificar una imagen importada con el programa Flash.

17/11/04 - 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.

Color Treshold=50, Minimum Area=5

Color Treshold=100, Minimum Area=10

Color Treshold=150, Minimum Area=15

Distribute to Layers

En este artículo, englobado dentro del manual de Flash, vamos a aprender

a hacer animaciones con objetos complejos.

01/12/04 - 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.

Insertar video en Flash

Inserción y gestión de películas en los proyectos Flash.

20/12/04 -

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)

Sistema de noticias con Flash y Actionscript

Cómo se hace un lector de noticias con estas dos tecnologías.

14/7/05 - 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

Vestir a una muñeca en Flash

Pequeña aplicación concreta en flash para realizar una muñeca de

recortables.

03/2/06 - 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:

Creación de variables, y la adjudicación de sus valores en

FLASH
Pequeña aplicación flash para descubrir un refrán donde practicaremos la
creación de variables, y la adjudicación de sus valores.

13/2/06 - 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){
dina=vara; Botón 5
Botón 3 dina1=vara; on(press){
on(press){ dinl=varl;
dint=vart; dina2=vara; dinl1=varl;
dint1=vart; 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í:

Juego en Flash. Parte I

Primera parte de cómo realizar un pequeño juego en Flash. Creamos el

fondo, la bruja y botones para moverla.
22/2/06 - 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.gotoAndS clipbruja.gotoAndS clipbruja.gotoAndS clipbruja.gotoAndS
top(1); top(2); top(3); top(4);
clipbruja._x = clipbruja._y = clipbruja._x = clipbruja._y =
clipbruja._x -20; clipbruja._y -20; clipbruja._x + 20; clipbruja._y + 20;
} } } }
Todos se refieren a clipbruja. Si no escriben su nombre en el Panel de Propiedades
no funcionará.
truco.fla que es el primer paso está pronto. Graba, prueba y pesa. Sigue pesando
25Kb.

Antes de salir, mira si tu biblioteca está ordenada.

Recuerda que vamos a seguir agregando cosas. Debes crear la carpeta Aflecha y
ahí guardar el 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

Juego en Flash. Parte II

Cambiamos los botones para las teclas flechas y la bruja desmaterializa un

elemento invasor.

22/2/06 - 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)){
clipbruja.gotoAndStop(2);
if (clipbruja._y >= 0){
clipbruja._y = clipbruja._y - 10;
}else{
clipbruja._y=550;
}
}
if (Key.isDown(Key.RIGHT)){
clipbruja.gotoAndStop(3);
if (clipbruja._x <= 960){
clipbruja._x = clipbruja._x + 10;
}else{
clipbruja._x=0;
}
}

if (Key.isDown(Key.DOWN)){
clipbruja.gotoAndStop(4);
if (clipbruja._y <= 550){
clipbruja._y = clipbruja._y + 10;
}else{
clipbruja._y=0;
}
}

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.

Juego en Flash. Parte III

Ultimos pasos para terminar el juego de la bruja en Flash.

01/3/06 - 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();
clip._visible=false;
}
}
a = getTimer();
momento = a/100;
b = int(momento)
c=b/10;
if(c >1){invade(m1);}
if(c >3){invade(m10);}
if(c >5){invade(m3);}
if(c >7){invade(m8);}
if(c >9){invade(m5);}
if(c >11){invade(m9);}
if(c >13){invade(m2);}
if(c >15){invade(m6);}
if(c >17){invade(m7);}
if(c >19){invade(m4);}
if(c >21){a = ""; b=""; c= "";}

Ahora otro arreglo 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;

function invade(clip){
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.

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._visible=false;
}
}

if(activar._visible==false){
a = getTimer();
momento = a/100;
b = int(momento)
c=b/10;
if(c >1){invade(m1);}
if(c >3){invade(m10);}
if(c >5){invade(m3);}
if(c >7){invade(m8);}
if(c >9){invade(m5);}
if(c >11){invade(m9);}
if(c >13){invade(m2);}
if(c >15){invade(m6);}
if(c >17){invade(m7);}
if(c >19){invade(m4);}
if(c>44){
contador = 0;
if(m1._visible==false){ contador = contador+1;}
if(m2._visible==false){ contador = contador+1;}
if(m3._visible==false){ contador = contador+1;}
if(m4._visible==false){ contador = contador+1;}
if(m5._visible==false){ contador = contador+1;}
if(m6._visible==false){ contador = contador+1;}
if(m7._visible==false){ contador = contador+1;}
if(m8._visible==false){ contador = contador+1;}
if(m9._visible==false){ contador = contador+1;}
if(m10._visible==false){contador = contador+1;}
Z = 10-contador;
barridos = "barridos "+ contador + ", invadieron mar y tierra " +Z;
}
}

Comentario final.

Traté de que el juego completo pesara lo menos posible. Pesa 31 KB. Hasta que
pese 100 KB, puedes usar tu 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.
Método hitTest() detector de colisiones.

Les debo esta aplicación porque cuando hice el juego de las brujas me
olvidé que FLASH tiene este método.

19/4/06 - 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;
}
if(t03.hitTest(azul3)){
azul3._alpha=80;
}
if(t04.hitTest(azul4)){
azul4._alpha=80;
}
if(t05.hitTest(azul5)){
azul5._alpha=80;
}
if(t07.hitTest(azul7)){
azul7._alpha=80;
}
if(t08.hitTest(azul8)){
azul8._alpha=80;
}
if(t09.hitTest(azul9)){
azul9._alpha=80;
}
if(t10.hitTest(azul10)){
azul10._alpha=80;
}
if(t11.hitTest(azul11)){
azul11._alpha=80;
}
if(t12.hitTest(azul12)){
azul12._alpha=80;
}
if(t13.hitTest(azul13)){
azul13._alpha=80;
}
if(t14.hitTest(azul14)){
azul14._alpha=80;
}
if(t15.hitTest(azul15)){
azul15._alpha=80;
}
if(t16.hitTest(azul16)){
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 {

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 }

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);

Scroll de texto en Flash

Cómo crear un scroll de texto sencillo con Flash.

27/7/06 -

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í.

Un saludo.

Formulario de contacto en Flash y PHP

Cómo crear un formulario con PHP y darle un estilo diferente utilizando
flash.

02/8/06 - Resultado

Si lo deseas, puedes descargarte el archivo del ejemplo aquí.

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.

Si lo deseas, puedes descargarte el archivo del ejemplo aquí.

Un saludo.
Actualización I:

Algunos me habeis preguntado si se puede hacer un formulario de contacto pero

solo con flash, sin usar lenguajes como php, asp, o similares, bien, la respuesta es
no. Flash por si solo no puede enviar correos, lo único que podría hacer flash es
crear un vinculo de email, que al cliquear en el se abriera el gestor de correo por
defecto del sistema, generalmente el Outlook, lo cual es muy incomodo, ya que
muy pocos usuarios tienen configurado este tipo de programas, dado que usan
correos gratuitos tipo hotmail que llevan gestor via web.

Así que para una web, y para dar una imagen un poco profesional, es
imprescindible usar lenguajes del lado del servidor, para este caso, php.

Actualización II:

Modificados los archivos php para que interpreten correctamente los caracteres
latinos (acentos y eñes).

Actualización III:

Me habeis mandado ya varios correos preguntandome como se configura el archivo

php2excel_csv.php, así que paso a explicarlo aquí para quien pueda interesar:

El archivo php2excel_csv.php es el encargado de recoger lo que ha escrito el

usuario en el formulario (los datos de las variables) y pasarselo al archivo
libmail.php para que este haga el resto. Pero este archivo hay que configurarlo,
dandole los datos de nuestro correo y las variables que hayamos declarado en
Flash.

Donde esté la página que cargará el formulario, en esa misma carpeta en vuestro
servidor, debe estar también el archivo swf (Flash), los 2 archivos de php,
libmail.php y php2excel_csv.php y el archivo formulario.csv

Os pongo y comento aquí el archivo en cuestión (php2excel_csv.php):

<?PHP
$archivo = fopen("formulario.csv" , "w");
if ($archivo) {
//variables que hayamos declarado en la pelicula de flash
$datos="Nombre del autor: $nom
+ Su email:,$email
+ Su empresa:,$empresa
+ Motivo del contacto:,$contacto
+ Mensaje:,$mensaje";
fputs ($archivo, $datos);
}
echo $pulsado;
fclose ($archivo);
?>
<?php
include "libmail.php";
$m= new Mail;
//correo desde el que se enviará
$m->From( "correo@correo.com" );
//correo al que se enviará. Se puede poner en ambos lugares el mismo correo
$m->To( "correo@correo.com" );
//el subject del email, será el email que haya escrito el usuario, salvo que lo cambiemos, pon lo que
quieras
$m->Subject( "$email" );
//variables que hayamos declarado en la pelicula de flash
$m->Body( "Nombre del autor:
$nom
Su email:
$email
Su empresa:
$empresa
Motivo del contacto:
$contacto
Mensaje:
$mensaje" );
//Si queremos que el correo se envíe a más cuentas de correo, quitar las barras de comentario y
especificar los correos
//$m->Cc( "alguien@algun_server.au");
//$m->Bcc( "alguien_mas@otro_server.es");
$m->Priority(1) ;
$m->Attach( "formulario.csv", "application/vnd.ms-excel", "attachment" );
$m->Send();
?>

Lo que está de color azul es lo que hay que cambiar, os comento por partes.

Donde dice:

$datos="Nombre del autor: $nom

+ Su email:,$email
+ Su empresa:,$empresa
+ Motivo del contacto:,$contacto
+ Mensaje:,$mensaje";

Eso es el archivo adjunto que os llegará con el email, ahí hay que poner el nombre
de las variables que pusimos en flash ($nom, $email, $empresa, etc...) y el texto
de introducción antes de cada campo.

Si en el campo 'Nombre' el usuario puso Pepe García, en 'Email' puso

pepe@pepe.com, en empresa puso DecoHogar, etc..., en el correo que nos llegue,
pondrá:

Nombre del autor: Pepe García

Su email: pepe@pepe.com
Su empresa: DecoHogar
Etc...

Tal y como está declarado, el texto que aparece antes de las variables se escribirá
siempre tal y como está, y las variables se sustituirán por lo que escriba el usuario.

Si en la película de flash de vuestro formulario solo teneis 3 campos que se llaman:

Correo, Ciudad y mensaje y las variables las habeis llamado respectivamente
elcorreo, laciudad y elmensaje, ese trozo de código debería quedar así:

$datos="Su correo: $elcorreo

+ Su Ciudad: $laciudad
+ Su mensaje: $elmensaje";

El siguiente código a configurar es:

//correo desde el que se enviará

$m->From( "correo@correo.com" );
//correo al que se enviará. Se puede poner en ambos lugares el mismo correo
$m->To( "correo@correo.com" );
//el subject del email, será el email que haya escrito el usuario, salvo que lo cambiemos, pon lo que
quieras
$m->Subject( "$email" );

Bien, en correo desde el que se enviará y correo al que se enviará, poned vuestra
dirección de correo, sin más. Y el Subject es el asunto que aparecerá en el correo.
Tal y como está puesto ahí, en el asunto aparecerá lo que el usuario escriba en el
campo email, ya que a ese campo le he dado el nombre de variable email en Flash
(a las variables en php se les añade el simbolo del Dolar antes, $email). Podeis
poner lo que querais, si poneis una variable de las declaradas en Flash, aparecerá
lo que el usuario ponga en dicho campo, si quereis podeis poner un texto fijo, por
ejemplo:

$m->Subject( "Correo enviado desde mi web" );

Con lo que en el asunto siempre aparecería dicha frase.

Bien, pasemos al siguiente código:

$m->Body( "Nombre del autor:

$nom
Su email:
$email
Su empresa:
$empresa
Motivo del contacto:
$contacto
Mensaje:
$mensaje" );

Hay que hacer exactamente lo mismo que en el primer código que he explicado,
solo que este de aquí es para el mensaje de correo electrónico, y el anterior era
para el archivo adjunto.

Y por último, donde dice:

//Si queremos que el correo se envíe a más cuentas de correo, quitar las barras de
comentario y especificar los correos
//$m->Cc( "alguien@algun_server.au");
//$m->Bcc( "alguien_mas@otro_server.es");

Si quereis que el mensaje del formulario solo os llegue a vosotros, no lo toqueis, ya

que ese código es para que el correo se mande a varias cuentas de correo cuando
el usuario le de a enviar. Si quereis que tal cosa suceda, quitad las barras de
comentario "//" al principio de la 2ª y 3ª línea y poned las otras 2 cuentas a las que
quereis que el correo se mande, por ejemplo:

$m->Cc( "ramon@miweb.com");
$m->Bcc( "lorena@miotraweb.com");

Y con eso, el correo llegará a esas dos cuentas a parte de la vuestra.

Espero haber resuelto las dudas sobre como configurar este archivo.

Actualización IV:

Señores, para que el formulario funcione es Imprescindible que el servidor web

donde esté alojada la página del formulario tenga un servidor de correo (SMTP), de
lo contrario no podrá enviar el mail.

Para que un correo funcione hacen falta 2 servidores web, uno que envía (SMTP) y
otro que recibe (POP3); un solo servidor puede hacer ambas funciones, por ello, el
formulario funciona perfectamente si lo usamos con correos gratuitos tipo Hotmail,
por que dicho servidor POP3 recibirá el correo, pero no tendrá nada que recibir sin
un servidor SMTP que lo envíe desde nuestra web. los que intenteis usar el
formulario en servidores gratuitos tipos Iespana, Webcindario, Web1000, etc... no
lo conseguireis, por que estos servidores web no tienen servidor de correo SMTP.
Tenedlo en cuenta.

De Access a XML

Cada vez con más frecuencia los desarrolladores de sitios en Flash

necesitan mostrar contenidos dinámicamente, tomando datos de fuentes
externas.

03/8/06 - 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
'escribimos el nodo XML
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
'escribimos el nodo XML
archivo.WriteLine("<representante ciudad='" & rsRepre("CiudadRepres") & "' nombre='" &
rsRepre("NombreRepres") &
' apellido='" & rsRepre("ApellidoRepres") & "' telefono='" & rsRepre("TelefonoRepres") & "' email='" &
rsRepre("EmailRepres") & "'>")
'cerramos el nodo de cada Representante
archivo.WriteLine("</representante>")
rsRepre.MoveNext
Loop
'cerramos y destruimos el recordset de Representantes
rsRepre.Close
Set rsRepre = Nothing
End If
'cerramos el nodo de cada 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.

De XML a Flash
2º parte del artículos sobre Bases de datos y XML para Flash utilizando
ASP.

09/8/06 - 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:

Imprimir desde Flash con ActionScript 1.0

Una característica muy interesante de Flash es la posibilidad de preparar

contenidos específicamente para imprimirlos.

10/5/07 - 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

Cambiar el color de un clip en Flash, usando ActionScript

Cómo podemos utlizar el método Color.setTransform, para darle un color

distinto a un clip en Flash.

29/5/07 - 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

Crear un reproductor de MP3 en Flash

Cómo crear un reproductor de mp3 en flash y asp.

08/6/07 - 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
System.useCodepage = true;
// 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.

Películas Flash que se adaptan al tamaño de ventana.

Cómo crear películas Flash que se adapten al tamaño de la ventana del
navegador.

24/7/07 - 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

Recepción de datos externos en Flash. La clase XML

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.

07/8/07 - 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:

System.useCodepage = true;
XML.prototype.ignoreWhite = true;

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.

Como leer los archivos del servidor con ASP y pasarlo a

Flash

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.

21/8/07 - 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:

XML.prototype.ignoreWhite = true;
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,
XML.prototype.ignoreWhite = true;
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

Carga de clips externos en Flash. La clase

MovieClipLoader.

La clase MovieClipLoader nos permite gestionar de un modo óptimo la

carga de clips de película.

03/9/07 - 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.

Tutorial para hacer una galería de imágenes con carga

dinámica en Flash

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.

13/9/07 - 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();
System.useCodepage = true;
XML.prototype.ignoreWhite = true;
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};
myColor.setTransform(myColorTransform);

};
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};
myColor.setTransform(myColorTransform);
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;
pMenos_btn._alpha = 30;
}
}

En página+

on (release) {
// activo el botón página-
pMenos_btn.enabled = true;
pMenos_btn._alpha = 100;
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.

Primera animación en macromedia flash 8

En esta lección haremos nuestro primer archivo en flash. Así que, mucha
atención.

28/9/07 - Hacemos la suposición que el lector o la lectora ya tiene instalado en su

ordenador el macromedia flash 8. La versión que utilizaremos a lo largo de todos
estos tutoriales será la versión 8 de macromedia flash. Sin más demora,
¡empecemos!

Lo primero es abrir su programa flash.

Creación de un nuevo documento

1. Para eso de click sobre Archivo > Nuevo, en el cuadro de dialogo Nuevo
Documento, seleccione Documento de Flash. Si es que no esta seleccionada ya
porque viene de forma predeterminada y de Aceptar.
2. Luego el color de fondo esta de color blanco, si desea puede cambiarlo a su
gusto pulsando sobre la opción Background, y seleccione el de su gusto. Esta
opción esta en el inspector de propiedades. De forma predeterminada debe estar en
550*400.

Dibujo de un cuadrado

1. Seleccione la herramienta Rectángulo en el panel de herramientas.

Luego seleccione el color de fondo de su preferencia.

Creación de un símbolo

1. Haga click en la herramienta Selección en el panel de herramientas.

2. Haga click en el rectángulo del escenario para seleccionarlo.

3. Con el rectángulo aún seleccionado, elija Modificar>Convertir en símbolo.

4. En el cuadro de diálogo Convertir en símbolo, escriba mí _ rectángulo en el

cuadro de texto Nombre.

5. El comportamiento predeterminado elija: Clip de película. Haga clic en Aceptar.

Aparece un recuadro de delimitación alrededor del rectángulo. Acaba de crear un
activo reutilizable, denominado símbolo, en el documento.

6. El nuevo símbolo aparece en el panel Biblioteca. Si el panel Biblioteca no está

abierto, seleccione Ventana > Biblioteca.

Animación del rectángulo

Ahora que ha agregado una ilustración, es hora de hacerla que se mueva.

1. Arrastre el rectángulo a la izquierda del área del escenario.

2. Haga clic en el fotograma 20 de la capa 1 en la línea de tiempo.

3. Seleccione Insertar > Línea de tiempo > Fotograma. Flash añade fotogramas al
fotograma 20, que permanece seleccionado.

4. Con el fotograma 20 aún seleccionado, elija Insertar > Línea de tiempo >
Fotograma clave. Se añade un fotograma clave al fotograma 20. El fotograma clave
es un fotograma en el que se cambia de manera explícita alguna propiedad de un
objeto. En este nuevo fotograma clave, cambiará la ubicación del círculo.

5. Con el fotograma 20 aún seleccionado en la línea de tiempo, arrastre el círculo a

la derecha del área del escenario.

6. Seleccione el fotograma 1 de la capa 1 en la línea de tiempo.

7. En el inspector de propiedades, seleccione Movimiento en el menú emergente

Animar.

8. Aparece una flecha entre los fotogramas 1 y 20 de la capa 1 de la línea de

tiempo.

9. Con esto se crea una animación interpolada que se moverá desde el fotograma 1 al 20.

10. Arrastre la cabecera roja hacia delante y hacia atrás para ver la pre-visualización de su
animación.

11. Luego guarde el archivo, para eso seleccione Archivo > Guardar, elija la ubicación que usted
prefiera siempre y cuando lo guarde con la extensión “.fla”.

12. Por ejemplo: primerflash.fla

13. Seleccione Control > Probar película para probar el archivo FLA.

14. Cierre la ventana Probar película.

Nota: En la próxima sección veremos la configuración que hay que hacer para poder publicar
el archivo y lo podamos utilizar a gusto.
Cabecera Flash en Wordpress

En el siguiente tutorial, vamos a ver como cambiar la imagen de cabecera

de un wordpress por una archivo .swf de Flash.

09/10/07 - Los pasos a seguir serían los siguientes:

 Definir el tamaño exacto al que queremos diseñar nuestro .swf, lógicamente

ha de ser el que tenga la imagen de cabecera del WP (wordpress) con el
objetivo de ocupar el mismo espacio que ella y no dejar huecos vacíos. Para
ésto, tenemos que buscar el archivo que se llama head.jpg, normalmente lo
tendremos en la carpeta wp-content/themes(si usamos
alguno)/nombredetheme/images/nombrevariante(algunos themes
tienen distintas formas de poder visualizarse y pueden venir diferenciadas
por carpetas), y así podremos ver las dimensiones que tiene.
 Una vez hecho lo anterior, tenemos que incrustar el archivo .swf en el lugar
donde está dicha imagen, y para ello, tenemos que editar el archivo
header.php, normalmente ubicado en wp-
content/themes/nombredelthemequeuses. Lo que tenemos que hacer
es eliminar todo el contenido que encontramos entre la etiqueta div
id=”headerimg” y su etiqueta de cierre y sustituirlo por el código que se ve
en la imagen, dicho código lo encontraréis en un archivo de texto para
descargar al final del tutorial. Con eso ya tendríamos el swf en la cabecera.

Hay que tener en cuenta un pequeño detalle, que al menos a mi me dio la lata. Si
observáis el código de la imagen, la referencia la archivo .swf es relativa, es decir
no es del tipo http://…. dando la url exacta de donde está ubicada en el servidor,
sino que solo pone el nombre del archivo .swf, que deberemos alojar en la carpeta
principal de nuestro wordpress. Ésto tiene una explicación y hay que tenerlo en
cuenta especialmente si usamos botones en el swf, como es el caso de este blog
para dirigirse a las secciones princpales del mismo. El caso es que si usamos la url
en lugar de la ruta relativa, IE funciona perfectamente, pero en Firefox, se visualiza
correctamente el .swf pero los botones no funcionan.
Creo que no me olvidé nada, si no os funcionas ponéos en contacto conmigo y os
ayudaré en lo que pueda. A contanuación os dejo el link del cual podéis descargar
el código que se pone en el header.php para incrustar el swf.
código para incrustar flash en header.php

Por último comentar que bueno, si usamos animaciones en dicha cabecera, me

refiero animaciones de entrada, tenemos que tener en cuenta que cada vez que
cambiemos la sección, se va a recargar ese archivo, así que o bien las hacemos
cortas o bien no las hacemos porque puede llegar a ser incluso molesto, en mi
caso, me he limitado a animar solo los botones.

Tutorial para rotar objetos simulando 3D en Flash

Para simplificar el objeto sólo se rotará sobre el eje vertical. Para

comenzar el tutorial necesitamos tener la secuencia de imágenes que
componen la rotación.

02/11/07 - Una vez que tengamos esto, vamos a incluir la secuencia dentro de
la línea de tiempo de un movieclip y le vamos a poner un stop(); en el primer
fotograma.

Por otro lado vamos a definir un botón transparente, para ello solo definimos la
zona áctiva, dejando en blanco los fotogramas Reposo, Sobre y Presionado. En este
botón es donde va a ir la programación del ejemplo.

El funcionamiento del ejemplo es sencillo:

Cuando presionamos el botón almacenamos la posición _x del puntero y el
fotograma actual del movieclip. Después, mendiante un evento entreFrame vamos
comparando la posición _x del puntero mientras lo desplazo presionado con la pos
inicial almacenada. En función de este desplazamiento obtengo la "cantidad" que se
debe rotar el objeto o lo que es lo mismo, el fotograma del clip que tengo que
mostrar. Lo mejor es descargarse este fla de ejemplo que viene con el código
actionscript comentado:

ejemplo_rot3D.fla

Distorsionar clips con ActionScript

En las Flash las transformaciones básicas que podemos aplicar a un clip

son cambiar la posición, la rotación y la escala.

15/11/07 - 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

Tutorial para hacer un libro de visitas con Flash y ASP

En este tutorial os vamos a enseñar a hacer un libro de visitas simple con

ASP, Flash y sin necesidad de base de datos.

30/11/07 - Para evitar el uso de base de datos vamos a almacenar los

comentarios de los visitantes en un archivo de texto plano en formato XML.
 Nota: Los comentarios soeces u ofensivos serán borrados del archivo por el equipo de
tutoriales-flash.com.

El mecanismo del libro es muy sencillo, añadimos los comentarios secuencialmente

en un fichero de texto existente en nuestro servidor. Para mostrar todos los
comentarios, se lee el archivo y se cargan los datos en la película swf.

COMO HACERLO.

El archivo que almacena los comentarios, que en nuestro caso se llama libro.txt,
tendrá este formato:

<visita fecha='27/12/2006 12:31:11'>

<autor>Usuario%201</autor>
<comentario>Este%20es%20un%20comentario%20de%20prueba%2E%20%BFse%20ve%20bien
%3F</comentario>
</visita>
<visita fecha='27/12/2006 12:31:37'>
<autor>Usuario%202</autor>
<comentario>Este%20es%20otro%20comentario%20de%20prueba%2E%20Pues%20s%ED%2C%20se
%20ve%20bien%2E</comentario>
</visita>

Como veis, se parece a un documento XML, pero le faltan dos elementos

imprescindibles en todo XML: La declaración del tipo de documento y el nodo
principal que contiene al resto de nodos. Más adelante veremos el porqué de este
formato incompleto.

Para editar este archivo libro.txt cada vez que se incluye un comentario nuevo,
usamos el objeto FileSystemObject de ASP ya que Flash de por sí solo no puede
hacerlo. Además tendrá que estar habilitado el permiso de escritura en el
directorio que lo contenga. Con este archivo add_comentarios.asp llevamos a
cabo la operación.

<%
On Error Resume Next
' Creamos el objeto FileSystemObject llamado fs
Set fs=Server.CreateObject("Scripting.FileSystemObject")
' Abrimos el archivo para modificarlo y nos posicionamos al final
' del archivo, por eso el 2do argumento es 8, si fuera 1 se abriría
' en modo sólo lectura
Set f=fs.OpenTextFile(Server.MapPath("/libro_visitas/libro.txt"), 8)
' Insertamos los datos enviados desde Flash
f.WriteLine("<visita fecha='"& Now &"'>")
f.Write("<autor>")
f.Write(Trim(Request("autor")))
f.WriteLine("</autor>")
f.Write("<comentario>")
f.Write(Trim(Request("comentario")))
f.WriteLine("</comentario>")
f.WriteLine("</visita>")
' Cerramos y borramos los objetos usados
f.Close
Set f=Nothing
Set fs=Nothing
' si Err=0 todo ha ido bien, este valor es devuelto
' a flash para confirmarle la operación
Response.write("error="&Err)
%>

Si os fijáis, se añade la fecha del servidor en el momento del comentario, el autor y

el comentario en sí.

Para leer el archivo con los comentarios usamos el archivo comentarios.asp.

<%
Response.ContentType="text/xml"
' Abro el archivo para leerlo
Set fs=Server.CreateObject("Scripting.FileSystemObject")
Set f=fs.OpenTextFile(Server.MapPath("/libro_visitas/libro.txt"), 1)
' Añado la declaración de documento y abro el nodo principal
Response.write("<?xml version='1.0' encoding='ISO-8859-1' ?><visitas>")
Response.Write(f.ReadAll)
' cierro el nodo principal, con lo que ya tengo
' un XML bien formado
Response.write("</visitas>")
' Cerramos y borramos los objetos usados
f.Close
Set f=Nothing
Set fs=Nothing
%>

La respuesta de este archivo es un XML bien construido que podéis ver aquí. La
razón de guardar el archivo libro.txt en formato incompleto es que se facilita su
actualización de nuevos comentarios. Con cada comentario nuevo simplemente
tenemos que añadir al final los nuevos datos y olvidarnos.

En este punto, vamos a Flash para ver el código ActionScript necesario que va en el
primer fotograma:

// ajustes iniciales -----------------------------------

System.useCodepage = true;
// evitamos problemas con los nodos en blanco
XML.prototype.ignoreWhite = true;
_global.style.setStyle("fontSize", 10);
visitas_txt.htmlText = true;
// impedimos el uso de los caracteres < y >
// que pueden dar problemas
autor_txt.restrict = "^<>";
comentario_txt.restrict = "^<>";
// fin ajustes iniciales -------------------------------
// estilos CSS para los comentarios
var my_styles:TextField.StyleSheet = new TextField.StyleSheet();
my_styles.setStyle("autor", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"11px",
color:"#99CC00"});
my_styles.setStyle("fecha", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"10px",
color:"#006699"});
my_styles.setStyle("comentario", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"10px",
color:"#666666"});
visitas_txt.styleSheet = my_styles;
// objeto LoadVars para enviar comentarios
// y comprobar la operación
var visitas_lv:LoadVars = new LoadVars();
visitas_lv.onLoad = function() {
if (this.error == 0) {
comentarios_xml.load("/asp/comentarios.asp");
} else {
visitas_txt.text = "Error escribiendo comentario.";
}
};
// objeto XML que carga los comentarios
var comentarios_xml:XML = new XML();
comentarios_xml.onLoad = cargarComentarios;
function cargarComentarios() {
visitas_txt.text = "";
var array_temp:Array = this.firstChild.childNodes;
if (!isNaN(array_temp.length)) {
// numero de comentarios
titulo_lb.text = array_temp.length+" comentarios";
// relleno el textArea con los comentarios
array_temp.reverse();
for (var k:Number = 0; array_temp[k]; k++) {
var autor:String = unescape(array_temp[k].firstChild.firstChild.toString());
var comentario:String = unescape(array_temp[k].lastChild.firstChild.toString());
visitas_txt.text += "<p><autor>Autor: <b>"+autor+"</b></autor></p>";
visitas_txt.text += "<p><fecha>"+array_temp[k].attributes.fecha+"</fecha></p>";
visitas_txt.text += "<p><comentario>"+comentario+"</comentario></p>";
visitas_txt.text += "<p></p>";
}
}
}
// función para mandar un comentario, compruebo que el autor
// tenga por lo menos 3 caracteres y el comentario 1
function enviarComentario() {
if (autor_txt.text.length>=3 && comentario_txt.text.length>=1) {
visitas_lv.autor = escape(autor_txt.text);
visitas_lv.comentario = escape(comentario_txt.text);
visitas_lv.sendAndLoad("/asp/add_comentario.asp", visitas_lv, "POST");
}
}
// defino la función que se ejecutará el hacer click en el botón
boton_enviar.addEventListener("click", enviarComentario);
// cargo los comentarios sin intervención del usuario
// al entrar en la página
comentarios_xml.load("/asp/comentarios.asp");
Empleamos escape() y unescape() para asegurarnos que no haya problemas con
los caracteres empleados en el nombre de autor y los comentarios.

Podéis descargaros este mismo ejemplo y ver cómo funciona: libro.zip

Open Flash Chart

Una herramienta gratuita para hacer gráficas en Flash. Permite gráficos

diversos, como gráficas de barras, de líneas, de tarta, etc.

04/9/08 - 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.