Como crear un menú dinámico con Actionscript 3.0 y XML

Etiquetas: URLLoader URLRequest currentTarget

Este ejemplo intenta mostrar una forma básica de hacer un menú dinámico con Flash y XML. La misma teoria que se aplica aquí para crear los elementos del menú, se puede aplicar en la creación, por ejemplo, de una galeria de imágenes o videos.

La idea es hacer un menú cuyos elementos se crean a partir de los nodos de un XML. De esta forma se hace más sencillo el mantenimiento del menú, ya que por ejemplo para añadir un botón solo habría que añadir un nuevo nodo con los contenidos necesarios. El XML que vamos a utilizar es este:

 
<?xml version="1.0" encoding="utf-8" ?>
<data>
	<elementos>
		<elemento>
			<titulo>Google</titulo>
			<enlace>http://www.google.com</enlace>
		</elemento>
		<elemento>
			<titulo>Yahoo</titulo>
			<enlace>http://www.yahoo.com</enlace>
		</elemento>
		<elemento>
			<titulo>Altavista</titulo>
			<enlace>http://www.altavista.com</enlace>
		</elemento>
		<elemento>
			<titulo>Lycos</titulo>
			<enlace>http://www.lycos.com</enlace>
		</elemento>
	</elementos>
</data>
 

Vemos que cada elemento tiene un título, que vamos a poner en el texto del botón, y un enlace, que es la url que vamos a cargar al hacer click en el botón.

Una vez que tenemos el XML, vamos a flash y creamos el botón que vamos a utilizar para crear el menú. En este caso es un fondo blanco con un campo de texto dinámico llamado "Texto_txt". Una vez creado pulsamos con el botón derecho en el símbolo que tenemos en la biblioteca y seleccionamos "Vinculación". Tenemos que asociar el botón a la clase ElementoMenu, que es el nombre de clase que vamos a utilizar para crear los botones.

Vinculacion FLash Actionscript

Ahora vamos a cargar el XML. Creamos un URLLoader, añadimos los eventos, y creamos las funciones de carga y error. Se puede ver el proceso de carga más detallado en el tutorial de carga de XML en Actionscript 3.0 . Una vez cargado el XML y almacenado en la variable datos, llamamos a la función montar, donde vamos a crear el menú. Tenemos que recorrer todos los nodos, y crear un botón por cada nodo. Para recorrer los elementos con la estructura que hemos definido en el XML, tenemos que utilizar un for con este aspecto:

 
for (var i:uint = 0; i < datos.elementos.elemento.length(); i++) {
 
}

En cada "vuelta" del for, vamos a crear un botón, rellenamos su campo Texto_txt con el nodo titulo, y almacenamos en una variable dentro del botón el valos del nodo enlace. Lo colocamos en "y" descendente según avanzamos para que salgan uno debajo de otro, y por último le añadimos un evento click que llama a la función navegar:

 
boton = new ElementoMenu();
boton.Texto_txt.text = datos.elementos.elemento[i].titulo;
boton.enlace = datos.elementos.elemento[i].enlace;
boton.y = i * 25
boton.buttonMode = true;
boton.mouseChildren = false;
boton.addEventListener(MouseEvent.CLICK, navegar);
addChild(boton);
 

Ahora, cada vez que hagamos click en un botón, se ejecutará la función navegar. En esta función recogemos el valor de la variable que hemos almacenado en enlace dentro del botón, por medio de currentTarget:

 
private function navegar(e:MouseEvent):void {
	navigateToURL(new URLRequest(e.currentTarget.enlace), "_blank");
}

Espero haberlo explicado de una manera fácil. Para cualquier duda podéis utilizar los comentarios.

Actionscript 3.0: Ejemplo básico para cargar imágenes

Etiquetas: Loader URLRequest contentLoaderInfo addEventListener

Uno de los primeros post que escribí, fue "Carga de imágenes y SWF en AS3 con Loader" . Básicamente era una explicación de los diferentes eventos disponibles para trabajar con Loader, y de como añadirlos al objeto. Esta es una explicación más "sencilla" de como cargar una imagen, o un SWF en Actionscript.

Lo primero que tenemos que hacer es crear un objeto tipo Loader. Los Loader son los encargados de cargar imágenes (JPG, PNG o GIF) y SWFs en Flash. Esto lo hacemos así:

 
  var loader:Loader = new Loader();
 

Ahora que tenemos un "cargador", hay que pedirle que informe de los eventos de la carga. Hay muchos eventos, pero los principales son tres:

-Error al cargar la imagen (no se encuentra el archivo)

-Progreso de la imagen (nos informa del progreso de la carga)

-Imagen cargada (la imagen ya se ha cargado y podemos trabajar con ella).

Para que el Loader nos informe de estos eventos, tenemos que asociar cada uno a una función. Es decir, debemos decirle: "si la carga falla, ejecuta esta función, y si se carga, ejecuta esta". Esta charla, traducida a Actionscript 3.0 es:

 
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imagenCargada);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, imagenError);
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imagenProgreso);
 

Lo que hemos hecho es "añadir listener de los eventos". Como se puede ver, cada evento vá asociado a una función. El evento Event.COMPLETE, por ejemplo, está asociado a la función "imagenCargada". Estas funciones suelen tener esta apariencia:

 private function imagenCargada(e:Event):void {
  trace("Cargada: " + e);
  addChild(e.target.content);
  }
 
  private function imagenError(e:IOErrorEvent):void {
  trace("Error: " + e);
  }
 
  private function imagenProgreso(e:ProgressEvent):void {
  trace("Cargados=" + e.bytesLoaded + " Total=" + e.bytesTotal);
  } 

Como se puede ver, cada función recibe un parámetro (al que hemos llamado "e", en este caso) que no servirá para obtener información del evento. Por ejemplo, cuando pongamos a cargar la foto, se comenzará a ejecutar periódicamente la función imagenProgreso hasta que termine la carga. Cada vez que Flash ejecute esa función, pasará como parámetro un "e distinto", que contendrá información sobre el progreso de carga en los atributos bytesLoaded y bytesTotal del evento.

Una vez que tenemos añadidos los eventos, tenemos que cargar la imagen mediante la función load:

 
  loader.load( new URLRequest(url));
 

Y listo. El loader que hemos creado se encargará de ejecutar las funciones asignadas a los eventos que le hemos asociado. El evento más importante es Event.COMPLETE, que ejecuta la función imagenCargada cuando el archivo termina de cargarse. Podemos acceder al archivo dentro del parámetro e.target.content den evento.

El código completo, sería el siguiente:

Crear modelos 3D Collada para Papervision en Google Sketchup

Etiquetas: DAE load Viewport3D BasicRenderEngine Camera3D

Google Sketchup es uno de los programas mas sencillos de modelado 3D. Además la versión gratuita es bastante completa, y más que suficiente para hacer modelos sencillos.

Una vez hemos descargado Google Sketchup y hecho el primer modelo, tenemos que seguir los siguientes pasos:

-Exportar el modelo como Google Earth 4. Esto creará un archivo .kmz

-Renombrar el archivo .kmz a .zip.

-Descomprimir el archivo y buscar dentro el .dae y las texturas (si las hay).

Tras el salto, el 3D en movimiento y el código para cargar el modelo.

Flash: Imágenes rotativas en AS3

Etiquetas: setTimeout removeChild addEventListener URLRequest Loader

Esta clase, explica paso a paso como hacer en AS3 una carga de imágenes que van rotando cada cierto tiempo. Para ello se almacenan las urls en una matriz y se van cargando los archivos cada cierto tiempo.

Deshabilitar caché al cargar archivos dinámicamente desde Flash

Etiquetas: loadMovie movieClipLoader Loader

Si cargamos un archivo de forma dinámica en Flash (ya sea en Actionscript 2.0 por medio de loadMovie o movieClipLoader, o en Actionscript 3.0 por medio de un Loader o similar),veremos como el navegador cachea el archivo haciendo que la segunda vez y siguientes cargue "instantáneamente". Esto puede ser ventajoso en muchos casos, pero en sitios dinámicos puede ocurrir que el usuario no aprecie cambios realizados porque está viendo la versión cacheada en su navegador. También en fase de testeo es recomendable evitar la caché, para hacernos una idea de cuál es el tiempo real de carga de la web. La manera de evitar caché, es añadiendo una variable con valor aleatorio a la url del archivo que vamos a cargar, ya sea por medio de random() (Actionscript 2.0) o Math.random() (Actionscript 3.0)

Actionscript 2.0: Utilizar imágenes de la biblioteca

Etiquetas: attachBitmap BitmapData loadBitmap

El siguiente método muestra como añadir imágenes de nuestra biblioteca a la escena de la película, usando BitmapData y el método attachBitmap.

Clase para hacer precargas en Actionscript 3.0

Etiquetas: Loader MovieClip URLRequest

Esta es una clase que estoy utilizando bastante en mis últimos trabajos. Es bastante sencilla, pero se puede modificar fácilmente para añadir otros comportamientos. La clase tiene las siguientes function públicas:

-Función constructora: recibe como parámetro el clip que se va a mostrar durante la precarga. La clase está preparada para que este clip tenga un campo de texto llamado Texto_txt, que será donde se muestre el progreso de carga, y una animación de 100 fotogramas.

-Función cargar: recibe como parametro una url (String) y el clip donde vamos a cargar el contenido de la url (MovieClip).

Precargas de archivos externos con Actionscript 2: MovieClipLoader

Etiquetas: MovieClipLoader onLoadInit onLoadComplete onLoadProgress

En Actionscript 2.0 podemos cargar archivos externos con loadMovie o por medio de un MovieClipLoader. loadMovie es aparentemente mas sencillo de utilizar, pero no da información de ningún tipo sobre el estado de la carga, por lo que si queremos hacer precargas deberemos usar una instancia de MovieClipLoader. Este ejemplo muestra como utilizar este tipo de objetos, y utilizar sus eventos asociados.

Envio del e-mails con Actionscript 3.0 y PHP

Etiquetas: URLRequest URLLoader URLVariables

Este ejemplo muestra como enviar un correo electrónico desde flash y AS3 , por medio de php. Para que funcione debemos tener un php subido en nuestro servidor con el siguiente código:

 
	$email = $_POST['email'];
	$asunto = $_POST['asunto'];
	$cuerpo = $_POST['cuerpo'];
	mail("$email","$asunto","$cuerpo");
	echo "resultado=Mensaje enviado";
 

Podemos pasar los datos necesarios a este fichero desde Flash de la siguiente forma:

Recorrer XML en AS3

Etiquetas: XML URLLoader URLRequest elements

El siguiente código carga un XML y recorre sus nodos y atributos imprimiendolos en pantalla.

El XML que he utilizado es el siguiente:

 
<Discos>
	<Disco puntuacion="10">
		<grupo id="20">The Knife</grupo>
		<titulo>Deep Cuts</titulo>
	</Disco>
	<Disco puntuacion="7">
		<grupo id="21">Jose Gonzalez</grupo>
		<titulo>Veneer</titulo>
	</Disco>
</Discos>
 

Y el código AS:

Cargar archivos de texto y XML con URLLoader

Etiquetas: URLLoader URLRequest load

El código de este ejemplo carga un XML e informa de los eventos de carga. Para cargar imágenes y SWF hay que utilizar Loader en lugar de URLLoader.

Carga de imágenes y SWF en AS3 con Loader

Etiquetas: Loader URLRequest contentLoaderInfo addEventListener load

El código de este ejemplo sirve para cargar una imagen (jpg, gif o png) o swf controlando el proceso de carga. Para cargar otro tipo de archivos (por ejemplo XML o texto), hay que utilizar URLLoader.

Hacer un sendAndLoad en Actionscript 3.0

Etiquetas: URLRequest URLVariables sendToURL URLLoader method load dataFormat

sendAndLoad permitía enviar información a un fichero externo (PHP, ASP o similar) y recibir después información de este. En AS3 ya no se puede utilizar esta función, pero en su lugar se puede utilizar el siguiente código (en el ejemplo envio dos numeros a un PHP, que los sumará y devolverá el resultado). El php puede ser como este:

 
<?php
	$numero1 = htmlentities($_POST[numero1]);
	$numero2 = htmlentities($_POST[numero2]);
	$suma = $numero1 + $numero2;
	echo "suma=" . $suma;
?>
 

Y el Actionscript:

ActionScript 3.0: Subir archivos con FileReference y PHP

Etiquetas: FileFilter FileReference URLRequest browse upload

La clase File Reference de AS3 es bastante parecida a la de AS2. Además el ejemplo de la ayuda de Flash es bastante sencillo de entender.El código que pongo a continuación esta hecho a partir de dicho ejemplo, al que he añadido algunos comentarios para explicarlo. Para utilizarlo Hay que tener en el escenario un boton llamado "Examinar_bt" y un campo de texto dinámico llamado "Estado_txt".

Guardar imágenes con BitmapData y PHP

Etiquetas: BitmapData draw getPixel getURL sendAndLoad

La idea es sencilla: Hacer un dibujo en Flash, y guardarlo como jpg ( o guardar el contenido de un clip, o hacer un pantallazo). El proceso es el siguiente:

"Calcar" el objeto que queremos guardar en un objeto BitmapData
Recorrer ese objeto para almacenar el color de cada pixel en un String.
Mandar ese String a un PHP para que nos "pinte" la imagen y la guarde.

El código Actionscript es este:

Enlaces coloreados en Flash con Actionscript 2.0 y CSS

Etiquetas: StyleSheet htmlText load TextField createTextField

Lo primero es tener nuestro archivo CSS. Yo voy a utilizar uno sencillo:

 
a{
    font-size:16pt;
    color:#0000ff;
    text-decoration:underline;
}
d{
    font-size:20pt;
    color:#ff0000;
}
e{
    font-size:18pt;
    color:#00ff00;
}
f{
    font-size:14pt;
    color:#ff00ff;
}
 

En la parte Flash, cargamos el archivo CSS, y configuramos el campo de texto para que utilice la hoja de estilos que hemos cargado:

 
//Creo el campo de texto
 
createTextField("Texto_txt",0,0,0,300,300);
 
//Creo las variables que van a contener el texto html
 
var txt0:String = "<d>Este sería del tipo d</d><br/>";
var txt1:String = "<e>Este sería el primer e</e><br/>";
var txt2:String = "<f>Este es del tipo f</f><br/>";
var txt3:String = "<a href = 'http://www.esedeerre.com'>Este sería un enlace coloreado</a>";
 
//Creo la variable para vargar el CSS
 
var loadCSS = TextField.StyleSheet = new TextField.StyleSheet();
 
//Cuando carguen los estilos, relleno el campo con el html
 
loadCSS.onLoad = function(){
        Texto_txt.html = true;
        Texto_txt.styleSheet = loadCSS;
        Texto_txt.htmlText = txt0 + txt1 + txt2 + txt3;
}
 
//Cargo los estilos
 
loadCSS.load("url del css");
stop();
 

Intercambio de datos entre Flash (Actionscript 2.0) y PHP

Etiquetas: LoadVars sendAndLoad onLoad

Es una ejemplo muy sencillo: se envían dos numeros desde el Flash a un PHP que los suma y devuelve el resultado, impreso en pantalla por el Flash. Los datos se envían mediante LoadVars y la función sendAndLoad

Por una parte tenemos el archivo PHP con el siguiente código:

 
<?php
    $numero1 = $_POST["numero1"];
    $numero2 = $_POST["numero2"];
    $suma = $numero1 + $numero2;
    echo "suma=" . $suma;
?>
 

Y por otra, tenemos el Flash:

 
//Creo una variable para enviar los dos numeros que se suman, y otra 
//para recibir la suma
enviaNumeros = new LoadVars();
recibeNumeros = new LoadVars();
//Almaceno los dos numeros en la variable que se va a enviar al PHP
enviaNumeros.numero1 = 7;
enviaNumeros.numero2 = 10;
//Cuando reciba la variable, que imprima el resultado
recibeNumeros.onLoad = function(){
	trace("La suma es : " + this.suma);
}
//Envio la variable que contiene los dos numeros a la url del PHP, le digo que 
//voy a recibir recibeNumeros de ese PHP y que el metodo es post.
enviaNumeros.sendAndLoad("url del php", recibeNumeros, "post");
stop();
 