Minituts - Flash y XML

No me había tocado trabajar a fondo con XML hasta hace poco y con la llegada del as3 ahora es más fácil leer y manejar este tipo de archivos para tus aplicaciones en flash.

Supongamos que tenemos esta estructura XML:

<canciones>
  <cancion id="1">
      <nombre>caution</nombre>
      <mp3>Musica/Caution.mp3</mp3>
      <beat>545</beat>
      <inicio>4460</inicio>
      <pasos>
          <facil>Pasos/CautionFacil.xml</facil>
          <normal>Pasos/CautionNormal.xml</normal>
          <dificil>Pasos/CautionDificil.xml</dificil>
      </pasos>
  </cancion>
  <cancion id="2">
      <nombre>Bethoven</nombre>
      <mp3>Musica/Virus Beethoven.mp3</mp3>
      <pasos>
          <facil>Pasos/BethovenFacil.xml</facil>
          <normal>Pasos/BethovenNormal.xml</normal>
          <dificil>Pasos/BethovenDificil.xml</dificil>
      </pasos>
  </cancion>
  <cancion id="3">
      <nombre>DJ Otada</nombre>
      <mp3>Musica/DJ Otada.mp3</mp3>
      <pasos>
          <facil>Pasos/DJ Otada.mp3Facil.xml</facil>
          <normal>Pasos/DJ Otada.mp3Normal.xml</normal>
          <dificil>Pasos/DJ Otada.mp3Dificil.xml</dificil>
      </pasos>
  </cancion>
</canciones>

Para empezar tenemos que cargar este archivo con las siguientes lineas:

//cargador de xml
var xmlLoader:URLLoader = new URLLoader();
//variable que capturará la info
var xmlData:XML = new XML();

//cuando termine de leer el xml correrá la funcion cargadoXML
xmlLoader.addEventListener(Event.COMPLETE, cargadoXML);

xmlLoader.load(new URLRequest("URL_del_.xml"));

function cargadoXML(e:Event):void {
  //toma la info del xml y la pone en nuestra variable xmlData
  xmlData = new XML(e.target.data);
  trace(xmlData);
}

Si corremos el flash, nos mostrará tal cual la información del archivo XML en la ventana de "trace".

Una de las cosas que podemos hacer es manejar la información del XML como si fueran objetos. por ejemplo si la linea del "trace" la cambiamos por:

trace(xmlData.cancion.nombre);

Vamos a obtener como resultado los nombres de las canciones.

<nombre>caution</nombre>
<nombre>Bethoven</nombre>
<nombre>DJ Otada</nombre>

Si lo queremos sin las etiquetas, es decir, solo el texto que contiene, basta con poner:

trace(xmlData.cancion.nombre.text());

Aparte de poder manejar como objetos los xml, también se pueden manipular como arreglos y así solo obtener la información de solo un campo específico.
Por ejemplo para sólo obtener los datos de la primera cancion puedes usar esto:

trace(xmlData.cancion[0]);

Por último, pero no menos importante, están las listas o "XMLList" que, como su nombre lo indica, convierten tu información de XML a una lista que puedes recorrer fácilmente.
Por ejemplo, para obtener el atributo "mp3" de cada canción puedes hacer esto:

var  listaXML:XMLList  = xmlData.cancion;
   
for each (var elemento:XML in listaXML) {
   trace(elemento.mp3);
}

Para más detalles pueden checar este tutorial (en inglés).

Recuerda que puedes ayudar dando ideas para los siguientes minituts o si crees que algo se debe cubrir con más profundidad.

Haz click para seguir leyendo...

Contraer

Juego de ritmo usando flex

Después de tantos tutoriales ya es hora de que ponga algo de mis trabajos para el portafolio online que estoy tratando de armar.

Este es un juego de ritmo que estoy haciendo con as3. Además es la primera vez que uso Flex para manejar el proyecto y la verdad es mucho mas comodo y organizado, desde la manera de programar con el code hinting, hasta los snippets y demás cosas con las que cuenta.
Y por si fuera poco, los pasos de la canción los lee la aplicacion de un xml =P

Enjoy!

Haz click para seguir leyendo...

Contraer

Minituts - Preloader en AS2 y AS3 (precargador)

En este minitut voy a explicar como hacer un preloader o precargador, para que cuando alguien vea tu animación o juego pueda saber que debe esperar un momento a que se cargue.

Primero voy a explicar el codigo que se usa para precargar el archivo, sin nada gráfico. Después de haber entendido eso explicaré como hacer una barra de descarga que refleje lo que se ha descargado tu swf.

AS2

//primero detenemos el flash para que no avance hasta que cargue
stop();
//creamos una función que se va a ejecutar cada que avance un frame
this.onEnterFrame = function(){ 
  //declaramos una variable que va a tener el valor de lo que se ha cargado
    var cargado:Number = Math.round(getBytesLoaded()/getBytesTotal()*100);
    /* 
    getBytesLoaded nos da la cantidad de bytes cargados
    getBytesTotal nos da la cantidad de bytes de nuestro archivo
    Math.round redondea el numero para que no tenga decimales
    Después de esta operación tenemos un valor entre 0 y 100
    de lo que se ha cargado el swf
    */
    //checamos si nuestra variable cargado es 100 o sea si ya se cargó todo
    if(cargado == 100){
        //quita esta función
        delete(onEnterFrame);
        //avanza al siguiente frame
        nextFrame();
    }
}

AS3

//primero detenemos el flash para que no avance hasta que cargue
stop();
//asignamos un evento a loaderInfo que es un elemento de flash predeterminado //cada que se active el evento PROGRESS va a ejecutar la funcion "cargando"
loaderInfo.addEventListener (ProgressEvent.PROGRESS, cargando);

function cargando(evt:ProgressEvent):void {
    //declaramos una variable que va a tener el valor de lo que se ha cargado
    var cargado:Number=Math.round(evt.bytesLoaded/evt.bytesTotal*100);
    /*
    tomamos las propiedades de nuestro evento "evt"
    bytesLoaded nos da la cantidad de bytes cargados 
    bytesTotal nos da la cantidad de bytes de nuestro archivo 
    Math.round redondea el numero para que no tenga decimales 
    Después de esta operación tenemos un valor entre 0 y 100  
    de lo que se ha cargado el swf 
    */

    //checamos si nuestra variable cargado es 100 o sea si ya se cargó todo
    if(cargado==100){
        //quita el listener
        loaderInfo.removeEventListener (ProgressEvent.PROGRESS, cargando);
        //avanza al siguiente frame
        nextFrame();
    }
}

Ahora para hacer una barra que vaya llenándose necesitamos dibujar una, convertirla a MovieClip (F8) y ponerle nombre de instancia "barra". Después tenemos que dibujar la máscara que nos ayudara a que se muestre solo cierta parte de la barra, haz un rectangulo que cubra por completo la barra, hazlo MovieClip y llamalo "mascara".

Por último sólo necesitamos agregar unas cuantas lineas a nuestro código:


AS2

//primero detenemos el flash para que no avance hasta que cargue
stop();

//asignamos la mascara a la barra
barra.setMask("mascara");
//creamos una función que se va a ejecutar cada que avance un frame
this.onEnterFrame = function(){ 
    //declaramos una variable que va a tener el valor de lo que se ha cargado
    var cargado:Number = Math.round(getBytesLoaded()/getBytesTotal()*100);
    /* 
    getBytesLoaded nos da la cantidad de bytes cargados 
    getBytesTotal nos da la cantidad de bytes de nuestro archivo 
    Math.round redondea el numero para que no tenga decimales 
    Después de esta operación tenemos un valor entre 0 y 100  
    de lo que se ha cargado el swf 
    */

    //La escala a lo ancho de la mascara cambia dependiendo del porcentaje cargado
    mascara._xscale = cargado;
    //checamos si nuestra variable cargado es 100 o sea si ya se cargó todo
    if(cargado == 100){ 
       //quita esta función
       delete(onEnterFrame); 
       //avanza al siguiente frame
       nextFrame();
    }
}

AS3

//primero detenemos el flash para que no avance hasta que cargue
stop();

//asignamos la mascara a la barra 
barra.mask = mascara;
//asignamos un evento a loaderInfo que es un elemento de flash predeterminado //cada que se active el evento PROGRESS va a ejecutar la funcion "cargando"
loaderInfo.addEventListener (ProgressEvent.PROGRESS, cargando);

function cargando(evt:ProgressEvent):void {
    //declaramos una variable que va a tener el valor de lo que se ha cargado
    var cargado:Number=Math.round(evt.bytesLoaded/evt.bytesTotal*100);
    /*
    tomamos las propiedades de nuestro evento "evt" 
    bytesLoaded nos da la cantidad de bytes cargados 
    bytesTotal nos da la cantidad de bytes de nuestro archivo 
    Math.round redondea el numero para que no tenga decimales 
    Después de esta operación tenemos un valor entre 0 y 100  
    de lo que se ha cargado el swf 
    */

    //La escala a lo ancho de la mascara cambia dependiendo del porcentaje cargado
    //ya que cargado tiene valores del 1 al 100 y el scaleX en as3 el 100% se maneja     //con 1 necesitamos dividir entre 100
    mascara.scaleX = cargado/100;

    //checamos si nuestra variable cargado es 100 o sea si ya se cargó todo
    if(cargado==100){
        //quita el listener
        loaderInfo.removeEventListener (ProgressEvent.PROGRESS, cargando);
        //avanza al siguiente frame
        nextFrame();
    }
}

Para probarlo debes presionar ctrl+enter pero notarás que la animación de la barra no se ve ya que se cargó muy rapido, así que presiona de nuevo ctrl+enter (sin cerrar la ventana) para simular que tu archivo se esta descargando. Como ya es costumbre aquí estan los archivos fla en AS2 y AS3.

Ahora que ya sabes como funciona un precargador puedes crear distintas maneras de hacer que tu archivo se descargue, desde alguna animación personalizada con texto que indique el porcentaje o incluso hasta un minijuego.

Recuerda que puedes ayudar dando ideas para los siguientes minituts o si crees que algo se debe cubrir con más profundidad.

Haz click para seguir leyendo...

Contraer

Minituts - Drag and drop (Arrastrar y soltar)

En este minitut voy a explicar una manera sencilla de hacer "Drag & drop", es decir arrastrar un objeto con el mouse, tanto en action script 2 como en 3 y sólo usando 3 funciones.
Para empezar crea un MovieClip, en mi caso dibujé un círculo y de nombre de instancia le puse "circulo" (que imaginativo xD).

Ahora lo que sigue es pegar el código en el primer frame, es bastante sencillo y está comentado línea por línea. Sólo escoge tu sabor de actionScript:

AS2

stop();

//activa arrastrar cuando es presionado el circulo
circulo.onPress = arrastrar;
//activa soltar cuando se deja de presionar el circulo
circulo.onRelease = soltar;


function arrastrar():Void{
    //this se refiere a quien activo la funcion
    ////en este caso el circulo, y empieza la función de arrastrar
    this.startDrag();
    //cada que se mueva el mouse refresca la pantalla para
    ////que el movimiento sea más fluido
    this.onMouseMove = refrescarPantalla;
}

function soltar():Void{
    //detiene la función de arrastrar
    this.stopDrag();
    //quita la funcion de refrescar pantalla
    this.onMouseMove = null;
}

function refrescarPantalla():Void{
    //despues de mover el mouse actualiza la pantalla aunque
    ////no haya pasado un frame
    updateAfterEvent();
}

AS3

stop();

//evento que se activa al presionar sobre el círculo
circulo.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar);
//evento que se activa al soltar el círculo
circulo.addEventListener(MouseEvent.MOUSE_UP,soltar);


function arrastrar(evt:MouseEvent):void{
   //la variable mc toma el movieclip que activo el evento
   ////en este caso el circulo
   var mc:MovieClip = evt.currentTarget as MovieClip;
   //inicia la funcion de arrastrar
   mc.startDrag();
   //evento que se activa cuando el mouse se mueve
   ////refresca la pantalla para que el moviemiento se vea fluido
   mc.addEventListener(MouseEvent.MOUSE_MOVE,refrescarPantalla);
}

function soltar(evt:MouseEvent):void{
   //la variable mc toma el movieclip que activo el evento
   ////en este caso el circulo
   var mc:MovieClip = evt.currentTarget as MovieClip;
   //detiene la funcion de arrastrar
   mc.stopDrag();
   //quita el evento que refresca la pantalla
   mc.removeEventListener(MouseEvent.MOUSE_MOVE,refrescarPantalla);
}

function refrescarPantalla(evt:MouseEvent):void{
   //despues de mover el mouse actualiza la pantalla aunque
   ////no haya pasado un frame
  evt.updateAfterEvent();
}

Los dos códigos son igual de reutilizables, o sea que con las mismas funciones puedes hacer que muchos objetos sean arrastrables al mismo tiempo. Sólo basta agregar unas lineas para cada objeto:

AS2

objetoNuevo.onPress = arrastrar;
objetoNuevo.onRelease = soltar;

AS3

objetoNuevo.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar);
objetoNuevo.addEventListener(MouseEvent.MOUSE_UP,soltar);

Como siempre, si algo les falló aquí estan los archivos para flash CS3 y CS4.

Recuerden comentar que uso le podrían dar o incluso dar ideas de lo que quieren ver para los siguientes minituts =D

Haz click para seguir leyendo...

Contraer

Minituts - SharedObjects (cookies o saveFiles)

En este minitut vas a aprender como hacer para guardar datos localmente con flash, usando SharedObjects (sin php ni nada extra).

Este es un ejemplo de lo que se puede hacer con sharedObjects

Después de introducir tu nombre y dar clic en el botón de "listo" se almacena esa información en tu maquina, permitiendo que aunque actualizes la pagina, cierres el explorador o pasen unos días, la siguiente vez que visites la página tu nombre se seguirá viendo.

Para empezar lo que tenemos que hacer es obtener el SharedObject de la maquina del usuario con esta línea de código:

var so:SharedObject = SharedObject.getLocal("miFlash");

Lo que hace esa linea es asignar la información que se encuentre con el nombre de "miFlash".

Ahora tenemos que revisar si tiene o no información, ya que dependiendo de eso vamos a saber si ya se había almacenado algo o es la primera vez que el usuario ve tu flash.

if(so.data.info != null) {
   //Hay información almacenada
} else {
   //No hay información
}

Lo siguiente que necesitamos saber es almacenar la información en el sharedObject, esto se hace primero asignando la información que necesitamos y después utilizar la función "flush":

so.data.info = "hola";
//podemos almacenar mas datos con sólo cambiar el nombre de la propiedad del objeto
so.data.nombre = "Eder";
so.data.numVisitas = 0;

so.flush();

Por último si queremos eliminar toda la información del sharedObject, lo único que necesitamos es usar la función "clear":

so.clear();

Pueden usar esto para cosas sencillas como el ejemplo de arriba, para almacenar información sobre preferencias, puntajes y hasta avances en juegos.

¿Se te ocurre alguna otra manera de usar el SharedObject?
Compártela en los comentarios =D.

También puedes checar los demás minituts o dar ideas para los siguientes.

Haz click para seguir leyendo...

Contraer