Professional Documents
Culture Documents
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 [:)] )
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.
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:
Cdigo :
var nombreVariable:TipoDato
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...
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.
ifFrameLoaded, etc. con la esperanza de que la gente migrara al nuevo esquema de forma ms amigable.
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).
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.)
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
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>"; } };
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