domingo, 23 de diciembre de 2012

Tutorial flash: Efecto zoom con TweenLite

En el siguiente tutorial flash vamos a crear un efecto zoom al pasar por encima de una imagen con un plugin llamado TweenLite. Nos quedará algo parecido a esto:
Tutorial en video:
¿Vienes de youtube?

Ir directamente al código

Antes de hacer cualquier cosa con el programa de flash, tenemos que descargar el plugin de TweenLite que nos permitirá crear el efecto de zoom (con este plugin podremos crear muchos efectos más).
1.- Lo descargaremos desde su web oficial: www.greensock.com/tweenlite/
2.- Una vez descargado, los descomprimimos y lo guardamos en la carpeta donde tengamos guardados todos nuestros archivos flash.
3.- Ya lo tenemos descargado y descomprimido. Empezamos a crear el efecto:

1.- Abrimos un nuevo documento ActionScript 3.
2.- Importamos la imagen a la que queramos darle zoom (o cualquier dibujo que hagamos, yo lo haré con la imagen de un coche).
3.- Seleccionamos nuestra imagen y pulsamos F8 para convertir a Clip de pelicula con el nombre: coche_mc
4.- En nombre de instancia también le pondremos: coche_mc
5.- Nos situamos en el primer frame de nuestro documento y pulsamos F9 para abrir el cuadro de codigo. En él, introducimos el siguiente código:

Codigo:

import gs.*;
coche_mc.addEventListener(MouseEvent.ROLL_OVER, zoomIn);
coche_mc.addEventListener(MouseEvent.ROLL_OUT, zoomOut);
function zoomIn(event:MouseEvent):void{
TweenLite.to(coche_mc, 1, {scaleX:2, scaleY:2});
}
function zoomOut(event:MouseEvent):void{
TweenLite.to(coche_mc, 1, {scaleX:1, scaleY:1});
}

En la linea import gs.*; deberemos poner la ruta donde guardamos el plugin. En mi caso guarde la carpeta gs en la misma carpeta donde guarde el archivo flash.

No hay comentarios:

Publicar un comentario