estoy haciendo mis primeras cosillas en Actionscript 3, un carrusel de imágenes. Las imágenes se cargan en un mc que contiene un rectángulo blanco, este rectángulo es un poco más grande que la imagen que se carga, de forma que crea un borde alrededor de la imagen.
Para la transición entre imágenes, la imagen antigua se hace desaparecer con un fade out, la nueva aparece con fade in, y el marco se redimensiona al tamaño apropiado para la imagen nueva.
El problema es que dichas transiciones no siempre funcionan: a veces el alpha se queda a mitad, otras veces no se redimensiona apropiadamente el marco, otras veces no consigo hacer el fade out a la imagen antigua (y esto crea un problema extra, ya que esta no se elimina del mc hasta que ha desaparecido del todo).
Éste es mi código:
Código :
import fl.transitions.*;
import fl.transitions.easing.*;
var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.addEventListener(Event.COMPLETE, onXMLLoaded);
var xml:XML;
var imageList:XMLList;
var formerImage:Number = 0;
var currentImage:Number = 0;
var numOfImages:Number;
var maxWidth:Number = 360;
var maxHeight:Number = 240;
var imageRatio:Number = maxWidth / maxHeight;
var frameBorder:Number = 7;
var stageWidth = stage.stageWidth;
var stageHeight = stage.stageHeight;
var myImage:DisplayObject;
var oldImage:DisplayObject;
var pictureRotation:Number = -1;
picture_mc.rotation = pictureRotation;
picture_mc.alpha = 0;
function onXMLLoaded(e:Event): void {
xml = new XML(e.target.data);
var interval:Number = xml.interval * 1000;
imageList = xml.item;
numOfImages = imageList.length();
var timer:Timer = new Timer(interval);
timer.addEventListener(TimerEvent.TIMER, onTimer);
timer.start();
loadImage(imageList[currentImage].path);
}
function onTimer(evt:TimerEvent):void {
//define el temporizador para la carga de imagen
loadImage(imageList[currentImage].path);
}
function onImageInit(evt:Event):void {
//cuando la imagen se empieza a cargar creo la transición
oldImage = myImage;
myImage = evt.target.content;
imageTransition();
myImage.alpha = 0;
}
function imageTransition():void {
//se encarga de la transición de la imagen
//calcular las nuevas dimensiones de la imagen para que mantengan el ratio
var myImageRatio:Number = myImage.width / myImage.height;
var newWidth:Number;
var newHeight:Number;
var newFrameWidth:Number;
var newFrameHeight:Number;
var newPictureX:Number;
var newPictureY:Number;
if(imageRatio < myImageRatio) {
newWidth = maxWidth;
newHeight = newWidth * myImageRatio;
} else if(imageRatio > myImageRatio) {
newHeight = maxHeight;
newWidth = newHeight * myImageRatio;
}
//aplicar estas nuevas dimensiones a la imagen
myImage.width = newWidth;
myImage.height = newHeight;
//calcular las nuevas dimensiones del marco
newFrameWidth = newWidth + frameBorder * 2;
newFrameHeight = newHeight + frameBorder * 2;
newPictureX = stageWidth - newFrameWidth;
newPictureY = stageHeight - newFrameHeight;
//aplicar mediante tween estas nuevas dimensiones
if(oldImage != null) {
var frameWidthResizer:Tween = new Tween(picture_mc.pictureFrame_mc, "width", Strong.easeOut, picture_mc.pictureFrame_mc.width, newFrameWidth, 2, true);
var frameHeightResizer:Tween = new Tween(picture_mc.pictureFrame_mc, "height", Strong.easeOut, picture_mc.pictureFrame_mc.height, newFrameHeight, 2, true);
var frameXPositioner:Tween = new Tween(picture_mc, "x", Strong.easeOut, picture_mc.x, newPictureX, 2, true);
var frameYPositioner:Tween = new Tween(picture_mc, "y", Strong.easeOut, picture_mc.y, newPictureY, 2, true);
var imageFader:Tween = new Tween(oldImage, "alpha", Strong.easeOut, oldImage.alpha, 0, 1, true);
imageFader.addEventListener(TweenEvent.MOTION_FINISH, onImageFaded);
} else { //si no existe oldImage, estaremos en la primera imagen, en ese caso no se aplican mediante tween
picture_mc.pictureFrame_mc.width = newFrameWidth;
picture_mc.pictureFrame_mc.height = newFrameHeight;
picture_mc.x = newPictureX;
picture_mc.y = newPictureY;
picture_mc.alpha = 1;
}
//colocar la imagen dentro del marco
myImage.x = frameBorder;
myImage.y = frameBorder;
}
function onImageFaded(evt:TweenEvent):void {
//eliminar la imagen anterior cuando se carga la nueva
picture_mc.removeChild(oldImage);
}
function onImageLoaded(evt:Event):void {
//cuando la imagen termina de cargar, se hace un fade in
var myImage = evt.target.content;
picture_mc.addChild(evt.target.content);
var mover:Tween = new Tween(myImage, "alpha", Regular.easeOut, myImage.alpha, 1, 3, true)
currentImage = (currentImage + 1) % numOfImages;
}
function loadImage(image:String):void {
//carga la imagen
var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest(image));
imageLoader.contentLoaderInfo.addEventListener(Event.INIT, onImageInit, false, 0, true);
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded, false, 0, true);
}
myXMLLoader.load(new URLRequest("carousel.xml"));Agradecería cualquier ayuda que me pudieseis proporcionar.
