Tutoriales en la web

Creando un efecto de aparecer con Flash utilizando Action Script 3

Posteado el 29. Jan, 2010 por Webi in Flash

Vamos a ver en este tutorial como crear una máscara en Flash utilizaremos clips de película, máscaras y Action Script 3.

PASO 1

Vamos a empezar creando un documento nuevo de ActionScript 3 y con unas dimensiones de 500 X 500 px y con un Frame Rate de 24.

Efecto máscara en Flash

PASO 2

Ahora renombramos la primera capa con el nombre de Imagen.

Efecto máscara en Flash

PASO 3

Ahora vamos al menú File – Import – Import to Stage… y buscamos la imagen que necesitamos que aparezca.

Efecto máscara en Flash

PASO 4

Ahora vamos a la ventana Align y le damos en la opción To Stage y en la opción Aling Horizontal center y Aling Vertical Center, para que nuesta imagen quede alineada en el centro.

Efecto máscara en Flash

PASO 5

Ahora damos click derecho sobre la imagen y vamos a la opción Conver To Symbol y le colocamos el nombre fuente, el nombre puede variar según deseen, en tipo selecciónamos Movie Clip y en Registration nos fijamos que el punto de la esquina superior izquierda este marcado.

Efecto máscara en Flash

PASO 6

Ahora vamos a la ventana properties y en el Instance Name colocar: imageToReveal_mc y bloqueamos la capa imagen por que ya no la vamos a cambiar más.

Efecto máscara en Flash

PASO 7

Ahora vamos al menú Insert – New Symbol y le colocamos de nombre animacioncirculos y de Typo escogemos la opción Movie Clip.

Efecto máscara en Flash

PASO 8

Ahora nos aparece toda la pantalla en blanco, y un layer nuevo, renombrémoslo con el nombre de animación.

Efecto máscara en Flash

PASO 9

Ahora vamos a crear un círculo con la herramienta Oval Tool. Que tenga un color de relleno y sin contorno.

Efecto máscara en Flash

PASO 10

Ahora vamos a convertir en símbolo nuestro circulo, dándole click derecho y eligiendo la Opción Convert To Symbol y le colocamos el nombre de circulo y escogemos el tipo Graphic y el punto de registro nos fijamos que este en el centro.

Efecto máscara en Flash

PASO 11

Ahora vamos a darle animación, primero vamos a nuestra línea de tiempo y en el primer Frame le damos Click Derecho y Seleccionamos la Opción de Create Motion Tween y luego agregamos 3 puntos mas haciendo click en el lugar exacto dode agregaremos nuestro punto y dándole click derecho y escogiendo la opción Insert to Keyframe.

Efecto máscara en Flash

PASO 12

Ahora dándole click en el primer punto y click sobre el objeto nos vamos a la ventana Properties en el tamaño le colocamos W 1.0 y H: 1.0 X: 0.0 Y: 0.0 y luego en el segundo punto colocamos los valores. W 100.00 y H: 100.0 X: 0.0 Y: 0.0 en el tercer punto colocar los valores W 60.00 y H: 60.0 X: 0.0 Y: 0.0 y en el cuarto punto colocar los valores W 80.00 y H: 80.0 X: 0.0 Y: 0.0

Efecto máscara en Flash

PASO 13

Ahora creamos un nuevo layer llamado actions este siempre va dentro del movie clip de la animación del circulo.

Efecto máscara en Flash

PASO 14

Ahora nos vamos al Frame 14 y haciendo click derecho y seleccionamos la opación Insert Keyframe.

Efecto máscara en Flash

PASO 15

Ahora vamos a insertar un action scrip. Siempre con sobre el frame 14 y en le layer Actions vamos a pulsar la tecla F9 y nos aparecera la ventana de Actions – Frame y vamos a escribir lo siguiente:

stop();

Efecto máscara en Flash

PASO 16

Ahora vamos a la ventana Library y buscamos el movie clip Animación círculos le damos click derecho y escogemos la opción de properties.

Efecto máscara en Flash

PASO 17

Ahora nos cercioramos que las opciones avanzadas estén desplegadas y escogemos la opción Export For ActionScript y automáticamente se seleccionara la opción Export in First Frame.

Efecto máscara en Flash

PASO 18

Ahora volvemos a la Ecena Principal y creamos un nuevo frame que se llame Actions.

Efecto máscara en Flash

PASO 19

Ahora vamos a agregar el código para que realice el efecto que necesitamos, pulsamos la tecla F9 para agregar el Acction :

var maskImg:MovieClip = new MovieClip();
addChild(maskImg);
imageToReveal_mc.mask = maskImg;

var xPos:Number = imageToReveal_mc.x;
var yPos:Number = imageToReveal_mc.y;
var spacingX:Number = 50;
var spacingY:Number = 50;

var createChildTimer:Timer = new Timer(30);
// createChildTimer.addEventListener(TimerEvent.TIMER, revealImage);
createChildTimer.addEventListener(TimerEvent.TIMER, revealImage, false, 0, true);
createChildTimer.start();

var maxXPos:Number = imageToReveal_mc.x + imageToReveal_mc.width + spacingX;
var maxYPos:Number = imageToReveal_mc.y + imageToReveal_mc.height + spacingY;

function revealImage(evt:TimerEvent):void {

var ca:animacioncirculos = new animacioncirculos();
ca.x = xPos;
ca.y = yPos;
maskImg.addChild(ca);

xPos += spacingX;

if (xPos > maxXPos) {
xPos = imageToReveal_mc.x;
yPos += spacingY;
}

if (yPos > maxYPos) {
createChildTimer.removeEventListener(TimerEvent.TIMER, revealImage);
}
}

Ahora solo ver el resultado final con el comando Ctrl + Enter.