Knowledge Base |
Loader Pro V3
(views: 22084)
The Loader Pro V3 is a professional loader that features scale modes (scale, crop, scale-crop, resize), align modes, built in preloaders and customized transition tweens. Here are all known issues for Loader Pro V3. If you have any questions that you think we should discuss here please let us know.
MCTE + LoaderProV3 + Multiple transitions
(2009-01-26 - views: 37509)
Q: How can I change the MCTE + Loader Pro V3 slide show example so that the slide show uses different effects on the images ?
A: This is the AS2 example from our knowledge base translated into AS3 code (http://www.jumpeyecomponents.com/knowledgebase/MCTE-V3-(MovieClip-Transition-Effect-V3)/MCTE-LoaderProV3-Multiple-transitions~811/). Here is the code:
//the time in miliseconds, which is between images
//curent position
// Handler for the COMPLETE event - it is dispatched when all the xml data has been loaded.
// Gets the path for all the images and places them in a list.
// Each SLIDESHOW_DELAY miliseconds, the next image should be loaded.
}
// Hamdler for the MCTE's TRANSITION_END event.
All you have to do is set up the Loader Pro and MCTE components just like in the AS2 example and place the code above on the same frame where the two component instances are located.
import com.jumpeye.Events.MCTEEvents;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.net.URLRequest;
import flash.net.URLLoader;
// The list of patterns to be applied randomly. All the patterns will be
// applied with the default settings
const PATTERN_LIST:Array = new Array("Alpha", "AlphaBars", "Blur", "Slide", "Scale", "SquareScale", "Waves");
//the time in miliseconds, which is between images
const SLIDESHOW_DELAY:int = 2000;
//curent position
var curentPosition:int = 0;
//the number of the images, from the xml
var totalImages:Number = 0;
// the list of images
var imagesArray:Array = new Array();
var isSliding:Boolean = false;
var timerObject:Timer = new Timer(SLIDESHOW_DELAY);
var urlString:URLRequest = new URLRequest("data.xml");
var loadedData:URLLoader = new URLLoader(urlString);
var xmlData:XML = new XML();
loadedData.addEventListener(Event.COMPLETE, loadCompleteHandler);
timerObject.addEventListener(TimerEvent.TIMER, timerHandler);
effect.addEventListener(MCTEEvents.TRANSITION_END, transitionHandler);
// Handler for the COMPLETE event - it is dispatched when all the xml data has been loaded.
function loadCompleteHandler(evtObj:Event):void {
xmlData = XML(loadedData.data);
parseXML();
}
// Gets the path for all the images and places them in a list.
function parseXML():void {
for each (var item:XML in xmlData.item) imagesArray.push(item.@path);
totalImages = imagesArray.length;
startSlideShow();
}
// Each SLIDESHOW_DELAY miliseconds, the next image should be loaded.
function timerHandler(evtObj:TimerEvent):void {
showNextImage();
}
//method used to start the slideshow
function startSlideShow():void {
isSliding = true;
showNextImage();
}
//method used to stop the slideshow
function stopSlideShow():void {
timerObject.stop();
isSliding = false;
}
//method used to play the next image from the slideshow
function showNextImage():void {
loadImage(curentPosition + 1);
}
//method used to play the previous image from the slideshow
function showPreviousImage():void {
loadImage(curentPosition - 1);
}
/**
method used to jump to a specified index
usage: loadImage(3);
*/
function loadImage(nr:Number):void {
//cecking if the nr is between 0 and totalImage
if (nr > totalImages - 1) nr = 0;
if (nr < 0) nr = totalImages;
//set the curent position to the new one
curentPosition = nr;
// An index id generated randomly, to select one of the patterns from the list
var randomIndex:Number = Math.round((PATTERN_LIST.length - 1) * Math.random());
effect.patternName = PATTERN_LIST[randomIndex];
trace("Current pattern : "+PATTERN_LIST[randomIndex]);
//start loading the new image
ldr.source = imagesArray[curentPosition];
//stop the timer until the transition ends.
timerObject.stop();
}
// Hamdler for the MCTE's TRANSITION_END event.
function transitionHandler(evtObj:MCTEEvents):void {
// Start the timer when the transition ends, so the image is displayed exactly
// SLIDESHOW_DELAY miliseconds since the transition on it ended and the next
// image is transitioned in.
timerObject.start();
}
All you have to do is set up the Loader Pro and MCTE components just like in the AS2 example and place the code above on the same frame where the two component instances are located.