Banners en FlashMuchos 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 programación y diseño, tener un tamaño 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. ima001.jpg 2. ima002.jpg 3. ima003.jpg 4. ima004.jpg 5. 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 posición 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 investigaciòn 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 ActionScriptEste, 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 pequeñas cosas raras. Asi que analizemosla

imagenes_mc; pues nada, ese es el nombre del movie clip que cargara las imagenes

loadMovie; esa es la instrucciòn 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 función "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 1 a 5

Por ultimo, tenemos que vuelve un operador "add" a concatenar todo lo anterior con la extensión 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 extensión 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 lección queda ver siempre la ventanita del output y no cerrarla instintivamente [:)] )

Enlaces email en FlashCómo enlazar un botón flash con una dirección de correo electrónico PASO A PASO.

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

Sonido en FlashUn truco sencillo y muy útil a la hora de crear una web o una multimedia con sonido es dotarlo de música ambiental de fondo; pero el primer reto, sobre todo cuando se usan escenas es que el sonido se mantenga durante toda nuestra película; 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 importáramos una imagen, con CONTROL+R buscaremos nuestro archivo de sonido y una vez elegido quedara guardado en la librería.

Como haremos el sonido infinito por medio de ActionScript, necesitamos decirle al sonido que este disponible para ActionScript; así que en la librería, damos click derecho sobre el icono del sonido y elegimos la opción 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 código

Ahora vamos al primer KeyFrame de nuestra película y colocamos el siguiente código (Lee los comentarios atentamente)

/* Esta es una variable que nos permitirá saber si ya iniciamos el código del loop infinito para impedir repetición de loops */if (noRepeat == undefined) {//Aqui la declaramos para que no vuelva a ser "undefined" y este código se ejecute

//una vez aunque la línea de tiempo vuelva a este KeyFramevar noRepeat:Number;noRepeat = 1;//Creamos una nueva variable de tipo sonidovar sonido:Sound = new Sound();//Le adjuntamos el sonido que declaramos en la librería como "sonidillo"sonido.attachSound("sonidillo");//Le decimos, que si el sonido ya se termino de ejecutarsonido.onSoundComplete = function() {//Vuelva a arrancarlothis.start();};//Iniciamos el sonidosonido.start();}

Como ven es un código bastante sencillo; fácil de utilizar y muy practico a la hora de crear sonidos ambientales rápidamente; 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 ActionScriptA pesar del tiempo que tienen ya ActionScript 2 y ActionScript 3, aún existe mucha gente que desconoce el Strict Data Typing.

A pesar del tiempo que tienen ya ActionScript 2 y ActionScript 3, aún existe mucha gente que desconoce el Strict Data Typing y escriben su código del mismo modo como se hace en ActionScript 1 o PHP, por lo que podemos ver cosas como ésta:

Código :

miVariable = "Hola Mundo"; Que no es muy diferente a lo que haríamos en PHP:

Código :

$miVariable = "Hola Mundo"; Como se dan cuenta, la única diferencia entre uno y otro, es el signo de dólar ($) 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 estás contribuyendo al bienestar de los niños del mundo...

Pues, mi querido(a) amigo(a), lamento tener que informarte que estás equivocado, y ahora veremos por qué:

¿Qué es el Strict Data Typing?

Bien, el Tipeo Estricto de Datos no es más que una regla que nos permite asegurarnos acerca del tipo de dato que tendrá una variable específica, evitando que, accidentalmente, introduzcamos un valor de tipo equivocado en nuestro código.

El modo como funciona el Strict Data Typing en ActionScript 2 y ActionScript 3 es el siguiente:

Código :

var nombreVariable:TipoDato

¿Por Qué Adoptar el Strict Data Typing?

La razón principal es sencilla: control sobre el código. Pocas cosas son tan frustrantes como un código que no da errores pero tampoco los resultados esperados. Además que los errores de tipos de datos son de los más difíciles de rastrear. Veamos un pequeño ejemplo:

Código :

miNumero = "10"; miOtroNumero = miNumero + 10; trace(miOtroNumero); En principio parece que todo estaría bien, no hay errores de compilación, pero cuando corremos el código 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 número, por lo que la operación no puede ejecutarse.

Claro que esto es sólo un pequeño ejemplo a modo de ilustración. Ahora imagina que esto te ocurra cuando ya tienes unas cuantas líneas de código, o estás 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 obligación de chequear en cada momento qué tipo de variable metes allí, para convertir el tipo de datos al necesario. Esto significa también que asignará la mayor cantidad de memoria posible a la variable para evitar la pérdida de datos.

De Cómo el Strict Data Typing Salvó el Planeta

Como ves, la principal ventaja del SDT es que permitirá chequear, en tiempo de compilación si los valores que estás colocando en la variable son los que se esperan. Además, permitirá un uso más eficiente de los recursos porque le asignará a cada variable la cantidad de memoria necesaria para cada caso y no más; así que en vez de perder, ganas. Eso sin decir que hace tu código más legible porque le dice al siguiente que lo lea (que puedes ser tú mismo) qué tipo de datos debe esperar. También aumenta la performance de tu aplicación 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:

Código :

var miNumero:Number = "10"; var miOtroNumero:Number = miNumero + 10; trace(miOtroNumero); Tendríamos un hermoso mensaje de error en tiempo de compilación que nos diría 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:

Código :

var miNumero:Number = 10; var miOtroNumero:Number = miNumero + 10; trace(miOtroNumero); y asunto terminado.

Si el SDT es tan bueno ¿por qué puedo escribir código en ActionScript 2 sin él?

La respuesta es simple: ActionScript 2 es lo que yo llamo una versión de transición entre ActionScript 1 y ActionScript 3. Mucho más potente que la primera pero compatible con ella. Además, da las pautas para escribir código 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 están desfasados en ActionScript 2, como target,

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

Formulario en Flash usando FormMailHacer un formulario en flash no es tan difícil como se piensa, el dolor de cabeza viene a la hora de enviarlo a una dirección de e-mail , y hacerlo de forma invisible para el usuario ( sin usar el programa de envío de correo electrónico); para esto se usa lo que se denomina CGI ( Common Gateway Interface -Interfaz de Compuerta Común) , estos son archivos ejecutables se encargan entre otras cosas de recibir la información 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 función, de ser así: cómo poder configurar tus formularios. Una vez con esta información lo demás "va sobre ruedas"

En este tutorial trataré de explicar como hacer un formulario en flash y enviar la información usando un archivo pl (formmail de Matt Wright );mundialmente conocido por fácil de configurar, eficiente y lo más importante: por ser ¡GRATIS! : ) ; configurar el script formmail y un simple chequeo para verficar la inserción 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, botón derecho y en propiedades le ponemos nombre [ estos nombres son los que llegarán 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 verificación de los datos y como no queremos que escriban en el hacemos check en Disable editing y disable selection.

Paso 2. Ocuparemos también dos botones uno enviar y otro borrar, en las acciones del botón revisaremos que digiten datos en los tres campos, es decir que si algún campo está en blanco saldrá el error en el TextField status. La forma más fácil de hacerlo sería revisando uno por uno, si alguno tira error el proceso termina ( no se envía el correo y sale reflejado en status).

Formulario en Flash usando FormMail (2)Primero te pongo la lógica 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 más, primero tenemos que borrar el contenido de status ( para que no llegue el correo con una línea que diga "por favor digite su email"); y segundo: tenemos que saber dos cosas: a qué dirección 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 información de los TextFields); si estuvieramos en DreamWeaver esto se haria con campos ocultos ( HiddenFields ) y la dirección del script sería la acción del formulario; en Flash podemos hacer esto defiendolos como variables en las acciónes del botón [con SetVariable(los campos)y LoadVarialbes(la dirección del Script)], pero, ¿con qué nombre?.

Formmail nos dice que el campo destinatario se llama "recipient", el de encabezado "subject" y la dirección es la carpeta donde está el script ( que era usualmente cgi-bin)

continuación de script

...Else Set Variable: "status" = "" Set Variable: "subject" = "Solicitud de Información" 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 página: la clásica gracias "...la información fué enviada satisfactoriamente, gracias"; página 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á página 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 (incluído 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 versión unix/linux se requiere modificar las direcciones de perl, sendmail y @referers. Perl y sendmail usualmente están 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 botón borrar, sólo 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 pequeño 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 pequeña 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 Contraseña; 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. Campo de texto "TextInput" para el nombre llamado "nombre_txt"2. Campo de texto "TextInput" para el email llamado "email_txt"3. Campo de texto "TextInput" para la clave llamado "clave_txt"4. Boton de envio del formulario5. Campo de texto "Dynamic Text" multilinea para el mensaje del servidor6. Logo de Cristalab en la esquina :D

Ahora el codigo, para no complicarme con codigo largo dentro del boton, creare una función 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 función que envia el formulario

enviarForm();}

El codigo de la función 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 acción, 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 recibirvar envio_lv:LoadVars = new LoadVars();var recibir_lv:LoadVars = new LoadVars();//Función que envia el forumlariofunction 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//formularioenvio_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 POSTenvio_lv.sendAndLoad("form.php", recibir_lv, "POST");//Aqui ustedes pueden cambiar de form.php a form.asp dependiendo del servidor//que usen}//Función que procesa los datos recibidos del servidorrecibir_lv.onLoad = function(exito) {if (exito) {//Hace que el campo de texto "mensaje_txt" reciba codigo HTMLmensaje_txt.html = true;//Le asigna el mensaje recibido del servidor, con formato HTMLmensaje_txt.htmlText = this.mensaje;} else {//Muestra un mensaje de error en negritamensaje_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 aplicación 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