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:
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.zipPrimero 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 !
