You are on page 1of 17

Banners en Flash

Muchos hemos visto en los portales, que en el lugar de los banners, estos nos cargan de manera aleatoria, es decir, un banner distinto cada vez que entramos, cuyo orden no esta establecido, y ademas de esto, cambian cada cierto tiempo. Esto se puede hacer de una manera muy interesante y sin necesidad de lenguajes dinamicos del lado del servidor gracias al lenguaje "ActionScript" de Flash MX Primero vamos a crear una carga aleatoria de imagenes JPG, y luego, haremos el mismo proceso con archivos SWF. Carga aleatoria de imagenes Flash, solo carga dentro de sus peliculas, imagenes del tipo JPG, asi que este debera ser el formato en el que las traeremos dinamicamente. Para empezar crearemos una pelicula, la he creado de 300x300 pixeles. Algo que debemos tener claro antes de iniciar es que DEBEMOS, por buenas costumbres de programacin y diseo, tener un tamao fijo para cada uno de los archivos JPG que vamos a cargar, he creado 5 imagenes, de 170x250 pixeles cada una, otra cosa importante es ponerles un nombre secuencial, mis imagenes se llaman: 1. 2. 3. 4. 5. ima001.jpg ima002.jpg ima003.jpg ima004.jpg ima005.jpg

Ahora vamos a lo interesante, para lograr cargar nuestras imagenes en el escenario, debemos crear un movie clips a donde lleguen los datos, asi que he creado un cuadrado de 170*250 pixeles, lo he convertido a movie clip y aqui esta como se deberia ver en el escenario:

si se fijan bien notaran que el punto de registro (Es decir, el centro del movie clip) se encuentra en la esquina superior izquierda; esto es porque ese es el punto (0,0) del movie clip, asi que esa sera la esquina donde se cargaran las imagenes. Como hacer para que al crear el movie clip el punto de registro nos quede alla arriba??? xD

Noten la posicin del cuadrito negro de "Registration", esta en la esquina superior izquierda Ahora si, lo interesante, digamos que queremos que se cargue una nueva imagen cada 20 segundos; asi que, tendremos que crear 240 frames (Suponiendo que la pelicula anda a 12fps, entonces 20segs*12frames=240); y colocar el codigo en el primer Keyframe de la pelicula, asi cada vez que la linea de tiempo pase por el primer frame (Osea, cada 20 segundos si son 240 frames) la carga de la imagen volvera a ser invocada y aparecera una nueva. Antes de continuar, coloquemosle un nombre de instancia a nuestro movie clip; se llamara "imagenes_mc"

Y lo que todos estaban esperando (Sonido de redoblante no encontrado ) El codigo ActionScript!!!!!!!!!!!, producto de varias semanas de investigacin sin dormir, dejar de lado todo tipo de placeres terrenales y no poder conectarme a Matrix de nuevo(Lo cual me ha creado un problema legal); aqui estan las interminables lineas de codigo ActionScript Este, coloquenlo en el primer KeyFrame imagenes_mc.loadMovie("ima00" add (1+random(5)) add ".jpg"); Reto a ver esa linea y no reirse, pero si la analizan, si tiene sus pequeas cosas raras. Asi que analizemosla imagenes_mc; pues nada, ese es el nombre del movie clip que cargara las imagenes loadMovie; esa es la instruccin que nos carga las imagenes y recibe por parametro, el nombre de la imagen a cargar, es ahi donde entra lo interesante "ima00" es el prefijo por el que inician todas las imagnes, verdad???. El operador "add" concatenara dos valores en uno solo, este operador nos sera util para unir la cadena de caracteres (String) "ima00", con el valor aleatorio de 1 a 5. Por que de 1 a 5?: en el disco duro tenemos 5 imagenes cuyo nombre de archivo solo tiene una diferencia, un solo numero que indica cual es, asi que ese numero es el que debemos generar aleatoriamente, como?, tenemos esto: (1+random(5)) La funcin "random", recibe por parametro un numero, en este caso "5", y devolvera un numero aleatorio con ese rango, osea, generara cualquiera de estos numero [0,1,2,3,4], 5 numeros aleatorios de 0 a 4, cualquiera de ellos; pero no nos sirve!!!!, necesitamos que los genre de 1 a 5; por eso le sumo 1 al resultado, asi siempre nos va a devolver un numero de 1a5 Por ultimo, tenemos que vuelve un operador "add" a concatenar todo lo anterior con la extensin de los archivos, osea ".jpg" Con estos sencillos pasos (Que los hago ver complicados es otra cosa :D) hemos creado un cargador aleatorio de imagenes que podra ser encapsulado en un componente o un movie clip para su posterior uso distribuido en sus futuras animaciones en Flash. Al final, la linea de tiempo debio quedarles asi:

Ok, me diran que hay no hay 240 frames, ... pero, creen que iba a meter una foto de mi linea de tiempo con 240 frames???; creo que no les gustaria hacer Scroll horizontal. FIN Bueno, Freddie, tu tambien prometiste hacerlo con archivos SWF para los banners Ok, ok, lo acepto, el articulo aun no termina, pero no es mucho lo que hay que decir, se utiliza una tecnica exactamente igual, para los archivos SWF, solo cambiales la extensin en el codigo, y listo!!!! (Obviamente, tambien los nombras como movie001.swf, movie002.swf, ETC!) Espero que tengan suerte haciendo esto (La van a necesitar [risas], pase 2 horas buscando un error que consistia en que el codigo estaba en el movie clip y no en el frame, asi que de leccin queda ver siempre la ventanita del output y no cerrarla instintivamente [:)] )

Enlaces email en Flash


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

on (release), es una accin utilizada nicamente para botones, e indica que la accin se ejecutar inmediatamente despus de haber presionado y liberado el botn del ratn. getURL: Accin; carga un documento de una URL especfica en una ventana o pasa variables a otra aplicacin en una URL definida. Mailto: mtodo utilizado para enviar correos electrnicos. Prueba tu pelcula (CTRL+Enter). Despus puedes publicarla (en men principal Archivo > Publicar).

Sonido en Flash
Un truco sencillo y muy til a la hora de crear una web o una multimedia con sonido es dotarlo de msica ambiental de fondo; pero el primer reto, sobre todo cuando se usan escenas es que el sonido se mantenga durante toda nuestra pelcula; as que aqu mostrare los pasos a seguir para conseguir un sonido de fondo continuo en nuestra web.
Importar un sonido

Obviamente, lo primero que debemos hacer es conseguir un sonido, mejor si es corto para que notemos el reinicio del sonido cuando termine su primera pasada; es recomendable en estos casos es usar un loop de sonido continuo; en FlashKit hay muchos disponibles para descargar. Ahora debemos importar nuestro sonido a Flash, igual que si importramos una imagen, con CONTROL+R buscaremos nuestro archivo de sonido y una vez elegido quedara guardado en la librera. Como haremos el sonido infinito por medio de ActionScript, necesitamos decirle al sonido que este disponible para ActionScript; as que en la librera, damos click derecho sobre el icono del sonido y elegimos la opcin Linkage del men; en el cuadro de dialogo emergente damos click a Export for ActionScript y en donde dice Identifier escribiremos sonidillo, que ser el nombre con el que ActionScript identificara nuestro sonido.
Colocando el cdigo

Ahora vamos al primer KeyFrame de nuestra pelcula y colocamos el siguiente cdigo (Lee los comentarios atentamente) /* Esta es una variable que nos permitir saber si ya iniciamos el cdigo del loop infinito para impedir repeticin de loops */ if (noRepeat == undefined) { //Aqui la declaramos para que no vuelva a ser "undefined" y este cdigo se ejecute

//una vez aunque la lnea de tiempo vuelva a este KeyFrame var noRepeat:Number; noRepeat = 1; //Creamos una nueva variable de tipo sonido var sonido:Sound = new Sound(); //Le adjuntamos el sonido que declaramos en la librera como "sonidillo" sonido.attachSound("sonidillo"); //Le decimos, que si el sonido ya se termino de ejecutar sonido.onSoundComplete = function() { //Vuelva a arrancarlo this.start(); }; //Iniciamos el sonido sonido.start(); } Como ven es un cdigo bastante sencillo; fcil de utilizar y muy practico a la hora de crear sonidos ambientales rpidamente; no coloco ejemplos ni archivos para descargar a este tutorial para animarlos a que ustedes mismos creen sus propios ejemplos y completen este tutorial, sencillo y til.

Strict Data Typing en ActionScript


A pesar del tiempo que tienen ya ActionScript 2 y ActionScript 3, an existe mucha gente que desconoce el Strict Data Typing. A pesar del tiempo que tienen ya ActionScript 2 y ActionScript 3, an existe mucha gente que desconoce el Strict Data Typing y escriben su cdigo del mismo modo como se hace en ActionScript 1 o PHP, por lo que podemos ver cosas como sta: Cdigo :
miVariable = "Hola Mundo";

Que no es muy diferente a lo que haramos en PHP:

Cdigo :
$miVariable = "Hola Mundo";

Como se dan cuenta, la nica diferencia entre uno y otro, es el signo de dlar ($) que identifica a un variable en PHP.

Claro que en este momento puedes decir: "S, yo lo hago as y me parece genial porque puedo poner distintos valores, de distintos tipos, en la misma variable". E incluso puedes pensar que eso te hace c00l, que ahorras memoria porque puedes hacer varias cosas con la misma variable y que ests contribuyendo al bienestar de los nios del mundo... Pues, mi querido(a) amigo(a), lamento tener que informarte que ests equivocado, y ahora veremos por qu:

Qu es el Strict Data Typing?


Bien, el Tipeo Estricto de Datos no es ms que una regla que nos permite asegurarnos acerca del tipo de dato que tendr una variable especfica, evitando que, accidentalmente, introduzcamos un valor de tipo equivocado en nuestro cdigo. El modo como funciona el Strict Data Typing en ActionScript 2 y ActionScript 3 es el siguiente:

Cdigo :
var nombreVariable:TipoDato

Por Qu Adoptar el Strict Data Typing?


La razn principal es sencilla: control sobre el cdigo. Pocas cosas son tan frustrantes como un cdigo que no da errores pero tampoco los resultados esperados. Adems que los errores de tipos de datos son de los ms difciles de rastrear. Veamos un pequeo ejemplo:

Cdigo :
miNumero = "10"; miOtroNumero = miNumero + 10; trace(miOtroNumero);

En principio parece que todo estara bien, no hay errores de compilacin, pero cuando corremos el cdigo nos aparece un hermoso NaN (Not a Number) Por qu nos pasa eso si somos buena gente? Sencillo, al colocar el valor de miNumero entre comillas (""), estamos diciendo que es texto (String), no un nmero, por lo que la operacin no puede ejecutarse. Claro que esto es slo un pequeo ejemplo a modo de ilustracin. Ahora imagina que esto te ocurra cuando ya tienes unas cuantas lneas de cdigo, o ests trabajando con funciones que -para ahorrar recursos- usan la misma variable con datos diferentes...

Strict Data Typing en ActionScript (2)


Tampoco es que necesariamente ahorres recursos, puesto que el compilador se ver en la obligacin de chequear en cada momento qu tipo de variable metes all, para convertir el tipo de datos al necesario. Esto significa tambin que asignar la mayor cantidad de memoria posible a la variable para evitar la prdida de datos.

De Cmo el Strict Data Typing Salv el Planeta


Como ves, la principal ventaja del SDT es que permitir chequear, en tiempo de compilacin si los valores que ests colocando en la variable son los que se esperan. Adems, permitir un uso ms eficiente de los recursos porque le asignar a cada variable la cantidad de memoria necesaria para cada caso y no ms; as que en vez de perder, ganas. Eso sin decir que hace tu cdigo ms legible porque le dice al siguiente que lo lea (que puedes ser t mismo) qu tipo de datos debe esperar. Tambin aumenta la performance de tu aplicacin porque el compilador no tiene que estar averiguando qu tipo de datos debe esperar por cada variable. Dicho sea de paso, el Strict Data Typing es obligatorio en ActionScript 3. As que si cambiamos el ejemplo anterior por:

Cdigo :
var miNumero:Number = "10"; var miOtroNumero:Number = miNumero + 10; trace(miOtroNumero);

Tendramos un hermoso mensaje de error en tiempo de compilacin que nos dira algo como se recibi String donde se esperaba Number, lo que nos permitir diagnosticar enseguida donde se encuentra el error y corregirlo, por ejemplo con:

Cdigo :
var miNumero:Number = 10; var miOtroNumero:Number = miNumero + 10; trace(miOtroNumero);

y asunto terminado.

Si el SDT es tan bueno por qu puedo escribir cdigo en ActionScript 2 sin l?


La respuesta es simple: ActionScript 2 es lo que yo llamo una versin de transicin entre ActionScript 1 y ActionScript 3. Mucho ms potente que la primera pero compatible con ella. Adems, da las pautas para escribir cdigo orientado a objetos, que ser lo que veamos en ActionScript 3. Esta necesidad de compatibilidad con ActionScript 1 es lo que permite usar algunos comandos que ya estn desfasados en ActionScript 2, como target,

ifFrameLoaded, etc. con la esperanza de que la gente migrara al nuevo esquema de forma ms amigable.

Formulario en Flash usando FormMail


Hacer un formulario en flash no es tan difcil como se piensa, el dolor de cabeza viene a la hora de enviarlo a una direccin de e-mail , y hacerlo de forma invisible para el usuario ( sin usar el programa de envo de correo electrnico); para esto se usa lo que se denomina CGI ( Common Gateway Interface -Interfaz de Compuerta Comn) , estos son archivos ejecutables se encargan entre otras cosas de recibir la informacin procesarla e enviarla por correo; las extensiones de dichos archivos pueden ser .cgi, .pl, php y otras. Para poder correr/ejecutar dichos archivos es necesario preguntarle al administrador del servidor qu posibilidades hay de usar archivos cgi, de que tipo ,en que carpeta se pueden guardar ( usualmente llamada cgi-bin ), o si ellos tienen archivos pre-establecidos ( para el uso del pueblo ) que cumplan con esa funcin, de ser as: cmo poder configurar tus formularios. Una vez con esta informacin lo dems "va sobre ruedas" En este tutorial tratar de explicar como hacer un formulario en flash y enviar la informacin usando un archivo pl (formmail de Matt Wright );mundialmente conocido por fcil de configurar, eficiente y lo ms importante: por ser GRATIS! : ) ; configurar el script formmail y un simple chequeo para verficar la insercin de datos en el formulario. Paso 1: Para hacer el formulario lo primero que tenemos que hacer son los TextFields , en este tutorial ocuparemos nicamente cuatro ( nombre, email, comentarios y status ),para esto seleccionamos la tecla de texto y la de TextFields ; click en el escenario y atrastramos. Una vez hecho lo seleccionamos, botn derecho y en propiedades le ponemos nombre [ estos nombres son los que llegarn por correo indicando a que campo pertenecen, por lo que recomiendo usar nombres significativos( al de nombre le pondremos nombre o name y as los siguientes) ] ver figura 1

figura 1. Propiedades del TextField para el campo nombre.

repetir los pasos para los otros campos, en el de comentarios seleccionar Multiline y WordWrap ; el campo status ser usado para la verificacin de los datos y como no queremos que escriban en el hacemos check en Disable editing y disable selection. Paso 2. Ocuparemos tambin dos botones uno enviar y otro borrar, en las acciones del botn revisaremos que digiten datos en los tres campos, es decir que si algn campo est en blanco saldr el error en el TextField status. La forma ms fcil de hacerlo sera revisando uno por uno, si alguno tira error el proceso termina ( no se enva el correo y sale reflejado en status).

Formulario en Flash usando FormMail (2)


Primero te pongo la lgica y luego el script.

Si campo nombre est en blanco ponga campo status en Digite su nombre caso contrario si campo email est en blanco ponga campo status en Digite su email caso contrario si campo comentarios esta en blanco ponga campo status en Digite sus comentarios. caso contrario ENVIE EL CORREO! y vaya a la etiqueta "ok" ahora en idioma de flash.

On (Release) If (nombre eq "") Set Variable: "status" = "Por Favor digite su nombre" Else If (email eq "") Set Variable: "status" = "Por Favor digite su email" Else If (comentarios eq "") Set Variable: "status" = "Sus comentarios son importantes" Else ...
Si estamos listos para enviar el correo ocupamos un par de cositas ms, primero tenemos que borrar el contenido de status ( para que no llegue el correo con una lnea que diga "por favor digite su email"); y segundo: tenemos que saber dos cosas: a qu direccin de correo ser enviado el formulario, qu queremos que diga el encabezado y donde est el script que lo va a enviar, para asi mandarle las variables (osea la informacin de los TextFields); si estuvieramos en DreamWeaver esto se haria con campos ocultos ( HiddenFields ) y la direccin del script sera la accin del formulario; en Flash podemos hacer esto defiendolos como variables en las accines del botn [con SetVariable(los campos)y LoadVarialbes(la direccin del Script)], pero, con qu nombre?.

Formmail nos dice que el campo destinatario se llama "recipient", el de encabezado "subject" y la direccin es la carpeta donde est el script ( que era usualmente cgi-bin) continuacin de script ...Else Set Variable: "status" = "" Set Variable: "subject" = "Solicitud de Informacin" Set Variable: "recipient" = "correo@server.com" Load Variables ("http://www.server.com/cgi-bin/formmail.pl", "", vars=POST) Go to and Stop ("ok") End If End On Tip. Formmail por tiene preestablecido devolver una pgina: la clsica gracias "...la informacin fu enviada satisfactoriamente, gracias"; pgina en html...,pero nosotros estamos en flash y ocupamos que se vaya al label "ok" [ donde est el mismo mensaje pero en flash :) ]. Para evitar est pgina no hacemos el link con GeUrl sino con LoadVariables ( como en el script ), pero envez de decirle loadvariables en un nivel, le hacemos target a nada y enviamos las variables usando post (ver figura 2.)

Figura 2. El LoadVariables, target " " using post.

Formulario en Flash usando FormMail (3)


Paso 3. para configurar el script (includo en el zip )cambiar lo enfatizado en figura3 de acuerdo al servidor que se est ulilizando, smtp_server= servidor de correo y referers= servidores habilitados ( autorizados) para correr el script figura3.

Nota. Para configurar formmail.pl versin unix/linux se requiere modificar las direcciones de perl, sendmail y @referers. Perl y sendmail usualmente estn en una carpeta standard pero si no funciona preguntale a tu Administrador de servidor por el Perl Path y te sabr dar indiciaciones.

Paso4. Para poner las acciones en el botn borrar, slo de demos que decir a flash que nos ponga las variables en blanco(con contenido nulo, sin contenido, >que nos las borre<); para eso de damos SetVariable, en la primer caja el nombre de la variable y ( nombre, email, comentarios ) y en la siguiente caja la dejamos en blanco. On (Release) Set Variable: "nombre" = "" Set Variable: "email" = "" Set Variable: "comentarios" = "" Set Variable: "status" = "" End On. figura4. como poner en blanco/borrar los campos

Enviando formularios y datos por GET y POST en Flash


Uno de los atractivos mas grandes de LoadVars es que nos permite enviar datos que nosotros pidamos al usuario desde Flash como un formulario HTML, que puede ser procesado por cualquier Script del lado del servidor (ASP, PHP, CFML, JSP, Perl, CGI, etc!), vamos a ver un pequeo ejemplo del envio de un formulario a un script; usare el ejemplo con PHP y con ASP, para que ustedes puedan escoger cual les conviene mas, ya que normalmente estos son los dos lenguajes que soportan la mayoria de servidores; de cualquier manera el codigo en Flash es el mismo. La idea es que cuando nosotros enviemos los datos del formulario, el script ASP o PHP nos devuelva un mensaje diciendonos que el registro se completo y que mientras el script nos da el aviso, aparezca un mensaje cargando. Para esto, vamos a crear una pequea interfaz de formulario, con un campo de texto de tipo "Dynamic Text para el mensaje que devuelve el script del servidor, tres campos de entrada para Nombre, Email y Contrasea; en este caso, como lo que vamos a hacer es un

formulario, usaremos los componentes de Flash MX 2004, no importa si lo quieres hacer con los tradicionales "Input Text", funcionara de la misma manera, usaremos para los campos de entrada este componente :

Asi que la interfaz de usuario nos quedaria con: 1. 2. 3. 4. 5. 6. Campo de texto "TextInput" para el nombre llamado "nombre_txt" Campo de texto "TextInput" para el email llamado "email_txt" Campo de texto "TextInput" para la clave llamado "clave_txt" Boton de envio del formulario Campo de texto "Dynamic Text" multilinea para el mensaje del servidor Logo de Cristalab en la esquina :D

Ahora el codigo, para no complicarme con codigo largo dentro del boton, creare una funcin llamada enviarForm que se encargara de tomar los tres valores de los campos de texto, organizarlos y enviarlos al formulario, asi que el codigo de el boton de enviar sera: on (release) { //Coloca el mensaje de carga en el campo de texto "mensaje_txt" mensaje_txt.text = "Cargando..."; //Llama a la funcin que envia el formulario

enviarForm(); } El codigo de la funcin que enviara los datos al formulario junto con el codigo inherente al LoadVars, estaran en el primer Keyframe de la pelicula. Nota: Como es la primera vez que vamos a enviar y recibir datos al tiempo, debo aclarar que Flash solicita dos objetos de la clase LoadVars para esta accin, y en este ejemplo asi lo vamos a hacer, pero tambien se puede hacer con uno solo, complicando mas el codigo pero haciendolo un poco mas optimo (La diferencia no es mucha). //Declaro las variables para enviar y para recibir var envio_lv:LoadVars = new LoadVars(); var recibir_lv:LoadVars = new LoadVars(); //Funcin que envia el forumlario function enviarForm() { //El nombre de la variable que enviara los datos del formulario //es "envio_lv", a esa variable le voy asignando uno por uno los //valores que le llegaran al formulario, y con el mismo nombre que //asigno aqui sera con el que los Scripts trataran los datos del //formulario envio_lv.nombre = nombre_txt.text; envio_lv.email = email_txt.text; envio_lv.clave = clave_txt.text; //Uso el metodo "sendAndLoad" para enviar el formulario y recibir //la respuesta del servidor, el metodo tiene tres parametros //el primero es la URL del script que tratara el formulario, en este //caso lo llame "form.php", el segundo es el objeto que cargara la //respuesta del servidor y el tercero el metodo de envio del formulario //que puede ser, como en HTML, GET o POST envio_lv.sendAndLoad("form.php", recibir_lv, "POST"); //Aqui ustedes pueden cambiar de form.php a form.asp dependiendo del servidor //que usen } //Funcin que procesa los datos recibidos del servidor recibir_lv.onLoad = function(exito) { if (exito) { //Hace que el campo de texto "mensaje_txt" reciba codigo HTML mensaje_txt.html = true; //Le asigna el mensaje recibido del servidor, con formato HTML mensaje_txt.htmlText = this.mensaje; } else { //Muestra un mensaje de error en negrita mensaje_txt.htmlText = "<b>Error en el Script</b>"; } };

Enviando formularios y datos por GET y POST en Flash (2)


Ahora, el codigo en ASP y PHP . . . En ASP: form.asp <% Dim nombre=Request.Form("nombre") Dim email=Request.Form("email") Dim clave=Request.Form("clave") Response.Write("mensaje=Bienvenido " & nombre & "<br />Entra con tu clave '" & clave & "' :D") Response.Write("<br />Att: The Cristalab Team") %> Y ahora en PHP form.php <? $nombre=$_POST["nombre"]; $email=$_POST["email"]; $password=$_POST["password"]; echo "mensaje=Bienvenido " . nombre . "<br />Entra con tu clave '" . password . " :D"; echo "<br />Att: The Cristalab Team"); ?> No importa si usas PHP o ASP, de cualquier manera ambos scripts siempre devolveran el mismo resultado, pongamos como ejemplo que nuestro usuario pone como nombre "Freddie", como email "webmaster@cristalab.com" y como clave "cr1stalab" , el codigo que cualquiera de los dos scripts generaria seria : mensaje=Bienvenido Freddie<br />Entra con tu clave 'cr1stalab' :D<br />Att: The Cristalab Team Para terminar, nuestra aplicacin despues de entrar esos datos se veria asi:

De esta manera Flash puede enviar datos como un formulario a scripts del lado del servidor que los procesen y puedan devolverle un resultado a Flash