21 de junio de 2008

Librería MaskSquareEffect - ActionScript 2.0

MaskSquareEffect es una librería que te permite realizar varios efectos de mascara con cuadros en flash, aquí hay un panel para que pruebes los distintos efectos que se pueden generar:

Ejemplo

Esta versión utiliza el motor de animaciones TweenLite, el rendimiento ha mejorado muchísimo, en comparación al motor que viene por defecto en flash (Tween).

¿ Cómo la utilizo ?

Bajen primero el archivo

MaskSquareEffect.zip

Primero debemos descomprimir el archivo, vamos a ver una carpeta “com”, esta la extraemos dentro del proyecto donde vamos a aplicar los efectos.

La clase principal es MaskSquareEffect, se encuentra en el paquete com.jahepi.squareeffect.

DOCUMENTACIÓN MASKSQUAREEFFECT

CONSTRUCTOR

1.- MaskSquareEffect(target:MovieClip, rows:Number, columns:Number, fadeIn:Boolean)

Descripción:
Crea un nuevo objeto MaskSquareEffect.

Parámetros:

target: El nombre de instancia del movieclip al cual le queremos dar el efecto.
rows: El número de filas que va a ser dividido el movieclip para hacer el efecto.
columns: El número de columnas que va a ser dividido el movieclip para hacer el efecto.
fadeIn: Indica si el efecto aparece o desaparece el movieclip.

Ejemplo:
var effect:MaskSquareEffect = new MaskSquareEffect(mc, 10, 10, true);

MÉTODOS

1.- play():void

Descripción:
Inicia la ejecución de la animación.

Ejemplo:
effect.play();

2.- isPlaying():Boolean

Descripción:
Retorna verdadero si la animación esta en ejecución y falso en caso contrario.

Ejemplo:
effect.isPlaying();

3.- remove():void

Descripción:
Remueve la máscara que se creo dinámicamente al hacer el efecto, solamente se puede remover si la mascara ha sido creada y si la animación no esta en ejecución.

Ejemplo:
effect.remove();

PROPIEDADES

1.- animationType:Function

Descripción:
Propiedad que lleva como referencia el tipo de animación, las siguientes opciones son las que puedes usar, para utilizarlas tienes que importar el paquete mx.transitions.tween.easing.*

  • Strong.easeIn, Strong.easeOut, Strong.easeInOut
  • Back.easeIn, Back.easeOut, Back.easeInOut
  • Bounce.easeIn, Bounce.easeOut, Bounce.easeInOut
  • Regular.easeIn, Regular.easeOut, Regular.easeInOut
  • Elasctic.easeIn, Elasctic.easeOut, Elasctic.easeInOut
  • None.easeNone
Ejemplo:
effect.animationType = Bounce.easeInOut;

2.- direction:IDirection

Descripción:
Esto es la dirección que va a tomar la animación, por ejemplo, puede ir de izquierda a derecha ó de derecha a izquierda, las siguientes direcciones son las disponibles en el paquete, se tiene que importar el paquete com.jahepi.squareeffect.directions.*:

  • UptoDown
  • DowntoUp
  • LefttoRight
  • RighttoLeft
  • DowntoUpCornerLeft
  • DowntoUpCornerRight
  • UptoDownCornerLeft
  • UptoDownCornerRight
  • ZigZag

Ejemplo:
effect.direction = new UptoDown(1, .2);

Ahora los objetos IDirection como UptoDown reciben 2 parámetros:

Delay: Este es el tiempo en segundos que va a transcurrir para que empiece la animación.

DelayIncrementer: Este es un poco confuso al principio, pero es la espera en segundos que se va a incrementar por cada línea de animación generada por la dirección, hagan la prueba para que vean el efecto.

3.- duration:Number

Descripción:
Es el tiempo en segundos que va a durar la animación en cada división del movieclip.

Ejemplo:
effect.duration = 2;

4.- rows:Number

Descripción:
Número que indica el número de filas que será dividido el movieclip.

Ejemplo:
effect.rows = 13;

5.- columns:Number

Descripción:
Número que indica el número de columnas que será dividido el movieclip.
Ejemplo:
effect.columns = 13;

6.- fadeIn:Boolean

Descripción:
Booleano que indica si el efecto oculta el movieclip o lo muestra.
Ejemplo:
effect.fadeIn = true;

EVENTOS

1.- ON_MOTION_FINISH

Descripción:
Evento que nos notifica cuando la animación ha terminado.

effect.addEventListener(MaskSquareEffect.ON_MOTION_FINISH, onFinish);

function onFinish(evt:Object):Void {
evt.target.remove();
}

El evento nos devuelve un objeto que tiene una propiedad target que hace referencia al objeto MaskSquareEffect.

Ahora veamos un ejemplo completo:

import com.jahepi.squareeffect.MaskSquareEffect;
import mx.transitions.easing.*;
import com.jahepi.squareeffect.directions.*;

var effect:MaskSquareEffect = new MaskSquareEffect(mc, 10, 15, true);
effect.animationType = Elastic.easeOut;
effect.duration = 1;
effect.direction = new ZigZag(1, .05);
effect.addEventListener(MaskSquareEffect.ON_MOTION_FINISH, onFinish);
effect.play();

function onFinish(evt:Object):Void {
evt.target.remove();
}

Sencillo, no ?, si quieren pueden agregarle mas tipos de direcciones para eso métanle mano al paquete com.jahepi.squareeffect.directions, ahí viene la clave.

Dentro del archivo, viene un ejemplo para que vean el funcionamiento.

Sale, cualquier duda, comentario, mejoras, etc., se los agradecería muchísimo.

Un saludote !

2 comentarios:

Rafael dijo...

Este vai ser muy útil para mí.
Muchas gracias! :)

Anónimo dijo...

Hola, muchas gracias algo asi estaba buscando, voy a intentar utilizarlo aunque no se nada de ActionScript.. vamos a ingeniarnoslas =)