Albert Fx blog: Flash: Página Web Dinámica 3

1. Ahora se trabajará en la sección Portfolio, hay que acceder a la MovieClip.

Para cargar archivos de imágen o video en flash sin que se integren al proyecto, es decir que se cargen de forma externa se emplea el componente UILoader (Window / Component)

Sus propiedades se modifican en la ventana Component Inspector.
Empleando esta opción cargar la imagen uno de la carpeta images, nombrar como instancia: LargeImageLoader

2. Tambien se pueden agregar elementos desde una librería propia de Flash llamada Common Libraries, en esta ventana hay botones, clases y sonidos predeterminados. Agregar de aquí los botones para ir a la imagen anterior (nombrarlo como instancia: back_btn) y la siguiente (nombrarlo como instancia: next_btn)

3. Agregar una capa para ActionScript y pegar el siguiente código:

next_btn.addEventListener(MouseEvent.CLICK, nextImage);

function nextImage (me:MouseEvent):void{
largeImageLoader.source = "images/portfolio02.jpg";
}

back_btn.addEventListener(MouseEvent.CLICK, backImage);

function backImage (me:MouseEvent):void{
largeImageLoader.source = "images/portfolio01.jpg";
}

Con este código se añaden las funciones de los botones, simplemente cambian de la imagen uno a la dos mandando llamar a una propiedad del UILoader

4. Sustituir el código anterior por el siguiente:

next_btn.addEventListener(MouseEvent.CLICK, nextImage);

var imageNumber:Number = 1;

function nextImage (evtObj:MouseEvent):void{
imageNumber++;
largeImageLoader.source = "images/portfolio0"+imageNumber+".jpg";
}

back_btn.addEventListener(MouseEvent.CLICK, backImage);

function backImage (evtObj:MouseEvent):void{
imageNumber--;
largeImageLoader.source = "images/portfolio0"+imageNumber+".jpg";
}

El código se ha optimizado de tal forma que generando una variable esta se vaya incrementando para ir a la imagen anterior y la siguiente sin tener que escribir una función por cada una.

5. Sustituir el código por el siguiente:

Ahora el código indica al usuario cuando ya no hay más imágenes que mostrar, así si se llega al número de imágen que ya no existe entonces desaparece los botones respectivos.

6. Finalmente sustituir el código con lo siguiente:

next_btn.addEventListener(MouseEvent.CLICK, nextImage);

var imageNumber:Number = 1;

function checkNumber():void{
next_btn.visible=true;
back_btn.visible=true;

if(imageNumber==5){
next_btn.visible = false;
}

if(imageNumber==1){
back_btn.visible = false;
}
}
checkNumber();

function nextImage (evtObj:MouseEvent):void{

imageNumber++;
largeImageLoader.source = "images/portfolio0"+imageNumber+".jpg";
checkNumber();
}

back_btn.addEventListener(MouseEvent.CLICK, backImage);

function backImage (evtObj:MouseEvent):void{

imageNumber--;
largeImageLoader.source = "images/portfolio0"+imageNumber+".jpg";
checkNumber();
}

largeImageLoader.addEventListener(Event.COMPLETE, imageLoaded);

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

function imageLoaded(event:Event){
trace("image has been loaded");
new Tween(largeImageLoader,"rotationX",Elastic.easeOut,90,0,2,true);
}

Ahora agregamos transiciones automáticas, cada que una nueva imagen se carga esta se anima empleando la librería Tween y controlando su velocidad con Easing, el valor en este caso es la rotación 3D horizontal.

Albert Fx blog

Latest Entries »

Flash: Página Web Dinámica 3

About Me

Frase

Sesiones