Cita:
Iniciado por sergio87 
Hola gente..
hoy necesito de su ayuda, necesito saber como puedo realizar el efecto de paso de sección en este sitio web hecha con flash
http://www.studioquadra.com/castellano9/index.htm
cuando cambia de sección aparecen unos cuadrados y aparece la otra imagen, como logro hacerlo?
gracias por su ayuda!
Hola Sergio87 !
He visto por aqui que algunos foreros han preguntado del cómo hacer este efecto, me decidí a hacer una pequeña clase que les ayudará a hacer ese tipo de efectos fácilmente.
Primero baja este archivo:
Archivos
Decomprímelo, vas a ver una carpeta llamada com, esa colócala donde se encuentra tu proyecto.
Ahora bien, dentro de tu proyecto debes tener un movieclip al cual quieras aplicarle el efecto, dale un nombre de instancia, ahora importemos la clase:
Código PHP:
import com.jahepi.squareeffect.MaskSquareEffect;
import mx.transitions.easing.*; //Opcional
var effect:MaskSquareEffect = new MaskSquareEffect(mc, 10, 10, true);
effect.addEventListener(MaskSquareEffect.ON_MOTION_FINISH, onFinish);
effect.animationType = Elastic.easeIn; //Opcional
effect.play();
function onFinish(evt:Object):Void {
trace("La animación ha terminado");
evt.target.remove();
}
Como puedes ver primero importamos la clase en la línea uno, la siguiente línea es opcional pero esta colócala si quieres que la animación sea distinta.
En la línea 4, instanciamos y le pasamos como parámetro la referencia al movieclip, luego el número de filas que quieres que sea dividido el movieclip, el siguiente el número de columnas que quieras que sea dividido el movieclip y por último un valor booleano que si es true la imagen aparece al hacer el efecto o desaparece en caso contrario.
En la línea 5, podemos decirle que seamos notificados cuando la animación termine, cuando finalice la función onFinish será llamada.
En la línea 6, cambiamos el tipo de animación que tiene por defecto que es Strong.easeInOut por Elastic.easeIn para hacer esto tienes que forzósamente importar las clases que hay dentro del paquete easing esto quiere decir que la línea 2 del ejemplo(import mx.transitions.easing.*; ) la tienes que poner, a continuación te pongo los tipos animación que puedes utilizar:
- 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
En la línea 7 llamamos al método play para empezar a correr la animación.
Si te fijas en la función onFinish esta la siguiente línea:
Código PHP:
evt.target.remove();
Primero evt.target hace referencia a nuestro variable effect que creamos.
El método remove lo tienes que llamar si quieres eliminar la máscara que se creo al hacer el efecto, también liberarías recursos, pero eso te lo dejo a tu decisión si más adelante quieres remover la mascara que se creo dinámicamente.
Cualquier duda, aquí andamos.
Saludos !
UPDATE: Nueva librería mejorada y documentación en la siguiente liga:
DOCUMENTACIÓN MASKSQUAREEFFECT