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:

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:

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

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:

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

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:

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

-Añadir los elementos que hemos creado al menú:

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

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

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

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

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:

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:

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.

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:

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:

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:

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

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

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:

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:

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:

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:

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:

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

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

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:

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

4/Colocamos el objeto en el nuevo punto:

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:

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:

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:

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

Y ahora dibujamos la linea con lineTo:

Por último, si queremos borrar lo dibujado, utilizamos la función 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.

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.

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.

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 del objeto que recibe el evento, y añadir el evento al objeto.

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:

 

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.

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:

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:

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:

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

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:

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:

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

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:

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:

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:

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:

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:

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

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.

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.

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

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

Este ejemplo de Actionscript 3.0 básico muestra como arrastrar y soltar elementos con las function startDrag() y stopDrag() de Flash.

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.

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:

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.

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.