Como depurar errores de Actionscript I

Como depurar errores de Actionscript I

Muchas de las preguntas que aparecen en los foros de Actionscript son por errores en el c贸digo que podr铆an responderse siguiendo algunos pasos a la hora de depurar.

Lo primero es tener en cuenta donde se ha producido el error, para ver de que manera podemos depurarlo:

1. El error se produce al compilar

Cuando publicamos o probamos la pel铆cula saltan uno o varios errores en la ventana "Errores de compilador" de Flash. Algo parecido a esto:

Flash Error

Para arreglarlo, evidentemente tenemos que ir a la linea indicada en la ventana de errores y arreglar el error en cuesti贸n. Dependiendo del error, puede ser mas f谩cil o mas dificil solucionarlo, veremos como afrontar estos errores en la siguiente parte de este post.

2. El error se produce en tiempo de ejecuci贸n

Este tipo de errores pueden ser mas dif铆ciles de depurar.

-Si estamos probando desde el IDE (desde Flash), al producirse uno de estos errores saltar谩 un error de este tipo en el panel de "Salida".

TypeError: Error #1009: No se puede acceder a una propiedad o a un m茅todo de una referencia a un objeto nulo.
at index_fla::MainTimeline/imprimir()

En la descripci贸n encontramos en que clase y en que m茅todo est谩 localizado el error, por lo que deberemos acceder a la fuente para solucionarlo.

-Si el error se produce probando en el navegador, podemos utilizar el FlashPlayer Debugger para depurar el error. A veces, probamos una aplicaci贸n en el Flash IDE y al subirlo y probar en el navegador algo falla o no funciona como esper谩bamos. Si tenemos instalado en el navegador el Flash Player "normal", los errores que se produzcan en las pel铆culas que veamos con ese navegador se producir谩n "en silencio". Normalmente la pel铆cula dejar谩 de funcionar, pero no saltar谩n avisos de error ni alertas. Para solucionar esto, podemos instalar la versi贸n "debugger" para nuestro navegador (pod茅is encontrarla aqu铆).

Con esta versi贸n instalada, cada vez que se produzca un error en un pel铆cula, saltar谩 una ventana de error en el navegador con informaci贸n sobre su procedencia:

Flash Error Debugger

-Dentro del los errores que se producen en el navegador, est谩 esta pregunta cl谩sica:

Tengo una galer铆a de fotos que funciona bien en mi ordenador, pero al subirla deja de funcionar, que est谩 pasando驴?

En el 90% de los casos, pasa una de estas dos cosas:

-Es un error de rutas: Flash no est谩 encontrando las fotos porque la estructura que tenemos en el servidor no es la misma que tenemos en local. Para ver que est谩 buscando Flash en el servidor, pordemos utilizar alg煤n proxy de depuraci贸n Por ejemplo, el Fiddler (gratis y para PC). Este programa nos dir谩 todas las peticiones que est谩 haciendo nuestro navegador, y si alguna de ellas ha fallado. Tambi茅n es muy 煤til cuando enviamos o recibimos variables al servidor (a un archivo php, asp, etc), ya que podemos saber que est谩 mandando Flash y que est谩 devolviendo el servidor.

-Es un error de seguridad SandBox: este error ocurre cuando intentamos cargar un archivo de un servidor distinto al nuestro. Si ocurre esto y tenemos instalado Flash Player Debugger saltar谩 un error en el navegador de este tipo:

securityError no controlado: text=Error #2048: Violaci贸n de la seguridad Sandbox

Para solucionarlo podemos mover los archivos a nuestro servidor o poner un archivo crossdomain en el servidor del que vamos a cargar los archivos.

En la segunda parte del post entraremos mas en detalle en cada uno de los tipos de error.

StageFocusRect: quitar el rect谩ngulo amarillo que aparece al tabular

StageFocusRect: quitar el rect谩ngulo amarillo que aparece al tabular

Etiquetas: stageFocusRect

Otra linea que se me olvida siempre. Si queremos que no aparezca (en Actionscript 3.0) el rect谩ngulo amarillo que aparece al pulsar la tecla de tabulaci贸n, tenemos que poner la siguiente linea:

  1.  
  2. stage.stageFocusRect = false;
  3.  
Abrir una nueva ventana pasando par谩metros por POST con navigateToURL

Abrir una nueva ventana pasando par谩metros por POST con navigateToURL

Etiquetas: navigateToURL

Este es un snippet para abrir un ventana con navigateToURL en Actionscript 3.0, pasando variables por "POST":

  1.  
  2. var peticion:URLRequest = new URLRequest("descarga.php");
  3. var variables:URLVariables = new URLVariables();
  4. variables.imagen = "ruta de la imagen";
  5. peticion.method = URLRequestMethod.POST;
  6. peticion.data = variables;
  7. navigateToURL(peticion, "_blank");
  8.  
Modificar el men煤 contextual (bot贸n derecho) con Actionscript 3.0

Modificar el men煤 contextual (bot贸n derecho) con Actionscript 3.0

Etiquetas: ContextMenu ContextMenuItem

Modificar el men煤 contextual (bot贸n derecho) con Actionscript 3.0

Desde Actionscript podemos modificar los elementos del men煤 que aparece al pulsar sobre nuestra pel铆cula con el bot贸n derecho.

Para cambiar el men煤, podemos seguir estos pasos:

-Crear una variable de tipo ContextMenu:

  1. var menuDTRK:ContextMenu = new ContextMenu();

-Crear los elementos que vamos a a帽adir al men煤. Estos elementos son de tipo ContextMenuItem, y el constructor recibe como par谩metro el texto que v谩 a aparecer en el men煤 (hay otros 3 par谩metros opcionales):

  1. var quienes:ContextMenuItem = new ContextMenuItem("QUIENES SOMOS");
  2. var trabajos:ContextMenuItem = new ContextMenuItem("TRABAJOS");

-A帽adir los elementos que hemos creado al men煤:

  1. menuDTRK.customItems.push(quienes, trabajos);

-Poner listeners a los elementos del men煤 que hemos creado. Es decir, hemos creado las variables "quienes" y "trabajos", las hemos puesto en el men煤, y ahora tenemos que decir que pasa cuando el usuario clica en ellas:

  1. quienes.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, quienesSelect);
  2. trabajos.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, trabajosSelect);
  3.  

-Crear las funciones que hemos dicho que se van a ejecutar. En este caso lo que yo hago es llamar a una funci贸n para cargar un archivo:

  1. function quienesSelect(e:Event):void {
  2. 	cargarContenido("swf/quienes.swf")
  3. }
  4.  
  5. function trabajosSelect(e:Event):void {
  6. 	cargarContenido("swf/galeria_dtrk.swf")
  7. }

-Indicar para que objeto queremos utilizar ese men煤. Puede ser un MovieClip en particular o toda la pel铆cula. Por ejemplo si estamos en el main:

  1. contextMenu = menuDTRK;

Otra opci贸n que tenemos, es eliminar los elementos que vienen por defecto en el men煤 contextual (se eliminan todos menos "Configuraci贸n" y "Acerca de..."):

  1. menuDTRK.hideBuiltInItems();
Actionscript 3.0: Poner el foco sobre un campo de texto.

Actionscript 3.0: Poner el foco sobre un campo de texto.

Etiquetas: focus

La manera de poner el foco sobre un campo de texto en Actionscript 3.0 es incluso m谩s sencilla que en Actionscript 2.0.

Basta con utilizar la propiedad stage.focus para poner el foco sobre el campo que queramos. Por ejemplo:

  1.  
  2. stage.focus = Campo_txt;
  3.  
Como crear un men煤 din谩mico con Actionscript 3.0 y XML

Como crear un men煤 din谩mico con Actionscript 3.0 y XML

Etiquetas: URLLoader URLRequest currentTarget

Como crear un men煤 din谩mico con Actionscript 3.0 y XML

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:

  1.  
  2. <?xml version="1.0" encoding="utf-8" ?>
  3. <data>
  4. 	<elementos>
  5. 		<elemento>
  6. 			<titulo>Google</titulo>
  7. 			<enlace>http://www.google.com</enlace>
  8. 		</elemento>
  9. 		<elemento>
  10. 			<titulo>Yahoo</titulo>
  11. 			<enlace>http://www.yahoo.com</enlace>
  12. 		</elemento>
  13. 		<elemento>
  14. 			<titulo>Altavista</titulo>
  15. 			<enlace>http://www.altavista.com</enlace>
  16. 		</elemento>
  17. 		<elemento>
  18. 			<titulo>Lycos</titulo>
  19. 			<enlace>http://www.lycos.com</enlace>
  20. 		</elemento>
  21. 	</elementos>
  22. </data>
  23.  

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:

  1.  
  2. for (var i:uint = 0; i < datos.elementos.elemento.length(); i++) {
  3.  
  4. }
  5.  

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:

  1.  
  2. boton = new ElementoMenu();
  3. boton.Texto_txt.text = datos.elementos.elemento[i].titulo;
  4. boton.enlace = datos.elementos.elemento[i].enlace;
  5. boton.y = i * 25
  6. boton.buttonMode = true;
  7. boton.mouseChildren = false;
  8. boton.addEventListener(MouseEvent.CLICK, navegar);
  9. addChild(boton);
  10.  

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:

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

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

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铆:

  1.  
  2.   var loader:Loader = new Loader();
  3.  

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:

  1.  
  2. loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imagenCargada);
  3. loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, imagenError);
  4. loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imagenProgreso);
  5.  

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:

  1.  private function imagenCargada(e:Event):void {
  2.   trace("Cargada: " + e);
  3.   addChild(e.target.content);
  4.   }
  5.  
  6.   private function imagenError(e:IOErrorEvent):void {
  7.   trace("Error: " + e);
  8.   }
  9.  
  10.   private function imagenProgreso(e:ProgressEvent):void {
  11.   trace("Cargados=" + e.bytesLoaded + " Total=" + e.bytesTotal);
  12.   } 

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:

  1.  
  2.   loader.load( new URLRequest(url));
  3.  

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:

Dibujar en un cristal con vaho en Actionscript 3.0

Dibujar en un cristal con vaho en Actionscript 3.0

Etiquetas: addEventListener MOUSE_MOVE drawCircle beginFill endFill

Dibujar en un cristal con vaho en Actionscript 3.0

Este ejemplo muestra como hacer el efecto de "pintar sobre el vaho" en un cristal. Esta es la manera m谩s sencilla que en encontrado de hacerlo, desde el punto de vista de alguien con pocos conocimientos de programaci贸n. Para hacer este efecto necesitamos:

-Imagen del cristal con vaho:

Ventana con vaho

-Imagen de cristal sin vaho:

Imagen de cristal sin vaho

-Nociones de AS3 (Sobre todo de la API de dibujo)

Los pasos a seguir ser铆an los siguientes:

-Importar las dos im谩genes a Flash, y poner cada una en una capa (la imagen sin vaho por encima de la con vaho), en la posici贸n (0,0)

-Crear un clip vacio y llamarlo "Mascara_mc". Ponerlo en (0,0)

-Hacer que "Mascara_mc" sea la mascara para la imagen sin vaho. Aqu铆 tenemos un peque帽o "problema", y es que al estar vacio, no nos va a aplicar bien la m谩scara. Por ello, antes de ponerlo como m谩scara, nos metemos dentro de "Mascara_mc" y dibujamos un peque帽o cuadrado.

La linea de tiempo nos quedar铆a asi:

Linea de tiempo en Flash

-Por 煤ltimo, tenemos que programar la escena, para que cuando hagamos click, se dibuje dentro de "Mascara_mc" y se vaya destapando la imagen con vaho.

El c贸digo en Actionscript 3.0, y el resultado, son los siguientes:

Seguir el puntero del rat贸n en Actionscript 3.0

Seguir el puntero del rat贸n en Actionscript 3.0

Etiquetas: MouseEvent MOUSE_MOVE Point localToGlobal mouseX mouseY

Seguir el puntero del rat贸n en Actionscript 3.0

Este tutorial es muy sencillo, pero cuando empec茅 a aprender flash hace 5 o 6 a帽os, estaban "de moda" los tutoriales de este tipo.

Se sol铆a hacer para que una serie de letras siguieran al puntero, con diferentes movimientos y tipos de easing. Para crear un elemento que siga al puntero, s贸lo hay que seguir los siguientes pasos:

1/ Creamos el S铆mbolo (en este caso una mosca) y lo linkamos a una clase (en este caso "Seguidor")

2/En la clase Seguidor, a帽adimos un evento que detecte el movimiento del rat贸n:

  1.  
  2. stage.addEventListener(MouseEvent.MOUSE_MOVE,mover);
  3.  

3/En la funci贸n mover, recogemos las coordenadas del rat贸n (que son las locales del objeto) y las convertimos en globales:

  1.  
  2. var punto:Point = localToGlobal(new Point(mouseX,mouseY));
  3.  

4/Colocamos el objeto en el nuevo punto:

  1.  
  2. x = punto.x;
  3. y = punto.y;
  4.  
Funci贸n para comprobar la edad (Actionscript 2.0 y 3.0)

Funci贸n para comprobar la edad (Actionscript 2.0 y 3.0)

Etiquetas: Date getMonth getDate getFullYear

Esta funci贸n sirve para comprobar si la diferencia en a帽os entre dos fechas, es mayor o igual que cierto n煤mero, pasado como par谩metro.Sirve para AS2 y AS3.

Por ejemplo, si tenemos que comprobar en un formulario si alguien tiene m谩s de 18 a帽os, tendremos que hacer lo siguiente:

  1.  
  2.  //Creo un objeto Date con los datos del formulario
  3. var nacimiento:Date = new Date(1920, 6, 10);
  4. //Creo un objeto Date con los datos de hoy
  5. var hoy:Date = new Date();
  6. //Llamo a la funcion, pasando como parametro la edad (18) que quiero comparar y 
  7. //las dos fechas
  8. trace(comprobarMayor(18,nacimiento,hoy));
  9.  

La funci贸n comprobarMayor, consta de 3 lineas:

-En la primera, comprobamos si este a帽o ya ha pasado la fecha metida en el formulario

-En la segunda, calculamos el n煤mero de a帽os, que depende de si en el a帽o en curso ha pasado la fecha o no.

-La tercera devuelve true si la persona tiene igual o mayor edad de la pasada como par谩metro, y false si es menor.

La funci贸n es esta:
Como hacer una pizarra en Actionscript 3.0

Como hacer una pizarra en Actionscript 3.0

Etiquetas: Shape lineStyle moveTo clear removeEventListener doubleClickEnabled

Como hacer una pizarra en Actionscript 3.0

Uno de los ejercicios t铆picos que se suelen hacer al comenzar a programar en Actionscript, es una pizarra.

En Actionscript 3.0 tenenmos que utilizar la clase Graphics. Podemos pintar dentro de cualquier objeto de visualizaci贸n que tenga el atributo graphics (Shape, Sprite, MovieClip).

Lo primero que tenemos que hacer es definir el estilo de linea (color,grosor, etc) que vamos a utilizar en nuestro objeto. En este ejemplo vamos a dibujar en un Shape definido por la variable pizarra, por lo que podemos definir su estilo de linea asi:

  1. pizarra.graphics.lineStyle(10,0x000000);

Ahora tenemos el pincel en (0,0), con un grosor de 10 y color negro. Si queremos pintar una linea desde (100,100) hasta (200,200), tenemos que mover el pincel hasta (100,100). Para ello usamos la funci贸n moveTo(x,y);

  1. pizarra.graphics.moveTo(100,100);

Y ahora dibujamos la linea con lineTo:

  1. pizarra.graphics.lineTo(200,200);

Por 煤ltimo, si queremos borrar lo dibujado, utilizamos la funci贸n clear():

  1. pizarra.graphics.clear();

Hay que tener en cuenta que esta funci贸n borra adem谩s las definiciones de estilo de linea y relleno, por lo que antes de seguir dibujando debemos volver a hacerlas.

Diferencias entre MovieClip, Sprite y Shape

Diferencias entre MovieClip, Sprite y Shape

Etiquetas: Sprite Shape MovieClip

En Actionscript 3.0 tenemos la posibilidad de trabajar con varios tipos de display objects. Esto es un intento de explicar cuales son las diferencias entre ellos y para qu茅 se pueden utilizar:

-MovieClip: La clase MovieClip hereda de la clase Sprite. Es decir: todos los atributos y m茅todos de Sprite, los tiene MovieClip. Adem谩s los MovieClips incluyen linea de tiempo, y las propiedades y m茅todos asociados. Por ejemplo MovieClip incluye los m茅todos play(), stop(), gotoAndPlay(), nextFrame(), etc... y las propiedades currentFrame, currentLabel, scenes, totalFrames, etc...

-Sprite: como un MovieClip pero sin linea de tiempo. Es decir, un Sprite puede utilizarse como contenedor de objetos, almacenar variables, y recibir eventos. Lo 煤nico que no se puede hacer es manipular su linea de tiempo, ya que no tiene.

-Shape: como un Sprite pero sin interactividad de rat贸n ni teclado. Tampoco pueden contener objetos de visualizaci贸n secundarios. Se suelen utilizar para dibujar dentro de ellos, ya que poseen el atributo graphics.

Utilizar el Micr贸fono en Actionscript 3.0

Utilizar el Micr贸fono en Actionscript 3.0

Etiquetas: Microphone Security getMicrophone showSettings setLoopBack

Utilizar el Micr贸fono en Actionscript 3.0

Ejemplo de interacci贸n con el micr贸fono en AS3. Para que funcione el ejemplo es importante permitir a Flash el acceso al micro en el cuadro de seguridad, y elegir el micro correcto en el combo correspondiente.
Evento doble click en Actionscript 3.0

Evento doble click en Actionscript 3.0

Etiquetas: MouseEvent DOUBLE_CLICK doubleClickEnabled

Evento doble click en Actionscript 3.0

Una de las novedades que trajo Actionscript 3.0 fu茅 que el evento "doble click" ya ven铆a implementado.

Para utilizarlo hay que hacer dos cosas:

-Activar la propiedad
  1. doubleClickEnabled
del objeto que recibe el evento, y a帽adir el evento al objeto.
Programar un bot贸n en Flash Actionscript 3.0 (AS3)

Programar un bot贸n en Flash Actionscript 3.0 (AS3)

Etiquetas: MouseEvent addEventListener CLICK MOUSE_OVER MOUSE_OUT

Programar un bot贸n en Flash Actionscript 3.0 (AS3)

En Actionscript 2.0 exist铆a la opci贸n de crear un bot贸n, hacer click encima y escribir c贸digo encima del propio objeto. En AS3 no existe la posibilidad de escribir c贸digo sobre clips de pel铆cula ni botones, todo el c贸digo debe estar situado en la linea de tiempo o en clases. Esto puede parecer un inconveniente, pero a la hora de hacer desarrollos medianos/complejos hace las cosas mucho m谩s sencillas.

Adem谩s programar botones en AS3 no es m谩s complicado que hacerlo en AS2, s贸lo tenemos que a帽adir el evento al objeto con addEventListener, indicar que evento a帽adimos ("Event.CLICK", "Event.MOUSE_DOWN, etc...) y crear la funci贸n que se v谩 a ejecutar cuando se reproduzca el event. Es decir, que traducido al castellano, lo que decimos es:

 

Detectar la inactividad del rat贸n con Flash Actionscript 3.0

Detectar la inactividad del rat贸n con Flash Actionscript 3.0

Etiquetas: setTimeout clearTimeout MOUSE_MOVE

Detectar la inactividad del rat贸n con Flash Actionscript 3.0

La siguiente clase genera un "detector de inactividad" del rat贸n. B谩sicamente consta de dos funciones: "ratonMovido", que se ejecuta cuando se mueve el rat贸n y pone a 0 el tiempo que ha pasado desde la 煤ltima vez que se movi贸 el rat贸n, y "ratonParado", que se ejecuta cuando ha pasado un tiempo t sin movimiento del rat贸n.
Utilizar clases con Actionscript 3.0: Parte II

Utilizar clases con Actionscript 3.0: Parte II

Etiquetas: package import addEventListener

En este anterior post, mostraba como empezar a trabajar con clases en AS3. En este segundo tutorial, mostrar茅 como podemos enlazar nuestros elementos de la biblioteca con sus clases correspondientes, y como insertar estos objetos en el escenario (haciendo algo "parecido" a lo que se hac铆a en AS2 con attachMovie.

Lo primero que voy a intentar explicar es como se "suelen" organizar las clases. Normalmente la clase principal (la que se asocia al documento, como vimos en el anterior tutorial) se deja en la misma carpeta que el .fla principal, y el resto de clases secundarias se ordenan en una serie de subcarpetas siguiendo esta estructura:

-Nombre del dominio invertido de la persona o empresa que crea el programa. Por ejemplo en mi caso tengo las clases en com/esedeerre/.. es decir, que siempre creo una carpeta com, que tiene dentro una carpeta esedeerre, que tiene dentro una serie de carpetas con los nombres de los paquetes (ahora veremos lo que es un paquete): "utilidades", "precargas", "sonido", etc...

Esta forma de nombrar las clases, garantiza que los nombres de paquete sean 煤nicos. Por ejemplo si en una aplicaci贸n Flash usamos clases de Papervision, de Ape, propias y de Flash, y todas estuvieran nombradas de la misma manera, Flash tendr铆a problemas para buscarlas. Utilizando esta estructura nos aseguramos que nuestras clases no se van "a pegar" con las de otros paquetes de clases.

Ahora que hemos visto como se suelen organizar las clases, vamos a ver como acceder a esas clases que est谩n "escondidas" en carpetas. Si tenemos una clase en com/esedeerre/Bola.as, para acceder a ella tendremos que hacer:

  1.  
  2. import com.esedeerre.Bola
  3.  

Dicho esto, creamos un documento nuevo de Flash(Actionscript 3.0) , y asociamos el escenario a la clase Main. Ahora vamos a crear un c铆rculo, click encima, bot贸n derecho, convertir en s铆mbolo, y dejamos la pantalla como esta:

Flash: Exportar en primer fotograma

Lo que estamos haciendo es crear un clip de pel铆cula con nombre de instancia Bola_mc. Lo asociamos a la clase com.esedeerre.Bola (que vamos a crear despu茅s), y le decimos a Flash que lo exporte en el primer fotograma y lo exporte para Actionscript.

Ahora que tenemos el clip de la clase "Bola", vamos a su archivo de clase. Creamos un nuevo Archivo de Actionscript y lo guardamos en una carpeta llamada esedeerre, que est茅 dentro de una carpera com, con el nombre de Bola.as.

En este archivo escribimos:

  1.  
  2. package com.esedeerre{
  3. 	import flash.display.MovieClip;
  4. 	public class Bola extends MovieClip {
  5. 		import flash.events.*;
  6. 		public function Bola():void {
  7. 			addEventListener(Event.ENTER_FRAME,mover);
  8. 		}
  9. 		private function mover(e:Event) {
  10. 			x+=5;
  11. 			if (x > 300) {
  12. 				x = 0;
  13. 			}
  14. 		}
  15. 	}
  16. }
  17.  

Lo que estamos haciendo es crear una clase Bola, que hereda de MovieClip. En la primera linea ponemos

package com.esedeerre{

porque hemos guardado el archivo Bola.as en com/esedeerre/. Si lo hubieramos guardado en la misma carpera que el fla, s贸lo tendr铆amos que poner package. Es decir. que le estamos indicando a Flash la ruta hasta el archivo Bola.as. El resto de lineas siguen la estructura que ya vimos en el primer tutorial. En este caso en la funci贸n constructora

  1.  
  2. public function Bola():void {
  3.  

hemos a帽adido un evento enterframe para el objeto, asociado a la funci贸n mover. Esta funci贸n mueve 5 px hacia la derecha el objeto, y cuando llega a x=300 lo vuelve a colocar en 0.

Ahora que tenemos la clase Bola, vamos a crear la clase Main. Creamos un nuevo archivo de Actionscript, y escribimos:

  1.  
  2. package {
  3.  
  4. 	import flash.display.MovieClip;
  5.  
  6. 	public class Main extends MovieClip {
  7.  
  8. 		import flash.text.TextField;
  9. 		import com.esedeerre.Bola;
  10.  
  11. 		public function Main():void {
  12.  
  13. 			var bola:Bola = new Bola();
  14. 			addChild(bola);
  15.  
  16. 		}
  17. 	}
  18. }
  19.  

Como vemos, hemos tenido que importar la clase Bola para poder utilizarla. En la funci贸n constructora Main, creamos una nueva Bola y la a帽adimos al escenario:

  1.  
  2. var bola:Bola = new Bola();
  3. addChild(bola);
  4.  

Guardamos los dos archivos .as, publicamos el fla, y deberiamos nuestra bola movi茅ndose de izquierda a derecha.

Utilizar clases con Actionscript 3.0: Parte I

Utilizar clases con Actionscript 3.0: Parte I

Etiquetas: class import extends MovieClip TextField

Ha pasado a帽o y medio desde que sali贸 Flash CS3 con el "nuevo" Actionscript 3.0, el 1 de Noviembre sale CS4 con algunas nuevas clases del lenguaje, y todav铆a muchos dise帽adores (y algunos desarrolladores) se muestran reacios a dar el salto a AS3.

Personalmente creo que ese "miedo" al AS3 se perder铆a con un par de charlas sobre el lenguaje, y dando pistas sobre como se hacen los "basicos" (programar un bot贸n, una carga externa, etc). Luego ya es cuesti贸n de trastear y ver como un poco de organizaci贸n en los desarrollos (que antes era "optativa", pero ahora est谩 casi impuesta) puede ahorrarnos horas de correcciones y muchos quebraderos de cabeza.

Este tutorial va a ser el primero de una serie en la que intentar茅 explicar como se hacen los "b谩sicos" en AS3.

En Actionscript 3.0 no podemos programar "encima de los objetos" como hac铆amos en Actionscript 2.0. Es decir, que ya no existe eso de crear un bot贸n y poner encima:

  1.  
  2. on(release){  
  3. 	trace("Me has pulsado");    
  4. }
  5.  

Ahora tenemos que crear el bot贸n, ponerle un nombre en el panel de propiedades, y a帽adirle los eventos desde la linea de tiempo o desde un fichero .as externo.
La opci贸n recomendada es trabajar con clases, asi que en este tutorial muestro como asociar un documento .fla con una clase principal.
Lo primero es crear un archivo Flash (Actionscript 3.0). Ahora tenemos que asociar el documento a la clase que haremos luego. En este caso la he llamado "Main". Este nombre tenemos que ponerlo en el campo "Clase de documento" del panel de propiedades:

Propiedades Escenario

Despu茅s creamos un campo de texto en el escenario y le ponemos el nombre "Texto_txt". Es este ejemplo vamos a hacer que desde la clase Main se ponga un texto en ese campo. Una vez que tenemos el fla preparado, lo guardamos en una carpeta.

Ahora vamos a crear la clase Main. Creamos un Archivo de Actionscript, y lo guardamos con el nombre "Main.as" en la misma carpeta que el fla. Es importante saber que le nombre del archivo tiene que ser el mismo que el nombre de la clase. En el fichero tenemos que escribir este c贸digo:

  1.  
  2. package {
  3.  
  4. 	import flash.display.MovieClip;
  5.  
  6. 	public class Main extends MovieClip {
  7.  
  8. 		import flash.text.TextField;
  9.  
  10. 		public function Main():void {
  11.  
  12. 			Texto_txt.text = "Texto con clase";
  13.  
  14. 		}
  15. 	}
  16. }
  17.  

La palabra package es la que abre siempre los documentos de clase. Puede ir seguido de la ruta hasta el archivo, pero eso ya lo veremos otro d铆a. En la segunda linea vemos un import de la clase MovieClip. La clase asociada al stage, hereda las propiedades de la clase MovieClip, por lo que tenemos que importar esta clase antes de usarla en la tercera linea:

  1.  
  2.   public class Main extends MovieClip {
  3.  

En esta linea estamos diciendo que vamos a crear la clase Main (que es el nombre que hemos puesto al archivo y en el panel de propiedades) , y que para esta clase vamos a utilizar como base la clase MovieClip. La siguiente linea:

  1.  
  2. import flash.text.TextField;
  3.  

importa la clase TextField. En este ejemplo vamos a utilizar un campo de texto, por lo que antes de usarlo debemos "explicarle" a flash qu茅 es un campo de texto importando la clase correspondiente (que es lo mismo que hacemos en la segunda linea con el MovieClip).

La siguiente linea

  1.  
  2. public function Main():void {
  3.  

es la que crea la llamada funci贸n constructora de la clase. Esta funci贸n tiene que existir siempre, y tener el mismo nombre que la clase. La funci贸n constructora se ejecuta siempre que creamos un nuevo objeto de esa clase. Puede recibir par谩metros, pero eso ya lo veremos m谩s adelante. La 煤ltima linea no tiene misterio, le decimos que ponga un texto en el campo que hab铆amos creado.

En resumen, hemos creado una clase asociada al escenario, que tiene que extender la clase MovieClip. Adem谩s la clase, la funci贸n constructora, y el archivo .as tienen que llamarse igual.

Ahora s贸lo falta publicar el fla para ver el campo con el texto.

Para cualquier duda pod茅is utilizar el formulario de contacto.

Flash: Im谩genes rotativas en AS3

Flash: Im谩genes rotativas en AS3

Etiquetas: setTimeout removeChild addEventListener URLRequest Loader

Flash: Im谩genes rotativas en AS3

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.
Enlace en Actionscript 3.0

Enlace en Actionscript 3.0

Etiquetas: navigateToURL URLVariables URLRequest getURL

El equivalente a getURL en Actionscript 3.0 es navigateToURL. Este m茅todo permite pasar variables con la url, por medio del atributo data de URLRequest, y elegir la ventana en la que queremos abrir el enlace ("_blank", "_self", "_parent" o "_top").
Novedades Actionscript 3.0: MovieClip.currentLabel

Novedades Actionscript 3.0: MovieClip.currentLabel

Etiquetas: currentLabel

La nueva propiedad currentLabel del objeto MovieClip, nos permite saber la etiqueta actual en la que se est谩 reproduciendo la linea de tiempo. Por ejemplo, para acceder a la propiedad currentLabel de un objeto MovieClip llamado "Objeto_mc", escribiriamos:

trace(Objeto_mc.currentLabel);
Actionscript 3.0: Arrastrar y soltar elementos con startDrag() y stopDrag()

Actionscript 3.0: Arrastrar y soltar elementos con startDrag() y stopDrag()

Etiquetas: startDrag stopDrag

Este ejemplo de Actionscript 3.0 b谩sico muestra como arrastrar y soltar elementos con las function startDrag() y stopDrag() de Flash.
Actionscript 3.0: Detectar tecla pulsada con KeyboardEvent

Actionscript 3.0: Detectar tecla pulsada con KeyboardEvent

Etiquetas: charCode keyCode KeyboardEvent.KEY_DOWN

El siguiente c贸digo muestra como detectar la tecla pulsada durante la ejecuci贸n de una pel铆cula Flash. Para ello hay que a帽adir al escenario un listener del tipo KeyboardEvent, y recoger en la funci贸n correspondiente el par谩metro que esta genera.
Actionscript 3.0: Restringir valores en campos de texto

Actionscript 3.0: Restringir valores en campos de texto

Etiquetas: restrict

Los campos de texto en Flash cuentan con una propiedad (en AS2 y AS3) llamada restrict, que permite restringir el conjunto de car谩cteres admitidos por el campo. La sintaxis es bastante sencilla, en este ejemplo utilizo tres campos de texto y les aplico diferentes restricciones:
Pasar par谩metros en funci贸n asociada a un addEventListener

Pasar par谩metros en funci贸n asociada a un addEventListener

Etiquetas: addEventListener function

Esta es una forma de indicar que valores queremos que tengan los par谩metros de una funci贸n asociada a un addEventListener dentro del mismo addEventListener.
Novedades de AS3: La clase Timer

Novedades de AS3: La clase Timer

Etiquetas: Timer currentCount delay

La clase Timer permite crear objetos que se ejecutan a intervalos especificos. Para utilizarlos s贸lo hay que crear el objeto, indicar el n煤mero de repeticiones que queremos y el intervalo que las separa. Es decir, algo equivalente a lo que se conseguia en AS2 con setTimeout y contadores.