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

Deshabilitar caché al cargar archivos dinámicamente desde Flash

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)
Clase para hacer precargas en Actionscript 3.0

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

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.