Jump to content
GreenSock

failure13

How to make a very simple slideshow

Recommended Posts

Kinda confused, for example i got this simple loader and array of images urls:

import com.greensock.*;
import com.greensock.loading.*;

var loaderImages:ImageLoader;
var images:Array = [image1.jpg, image2.jpg, image3.jpg, image4.jpg];

loaderImages = new ImageLoader(images[0], {
name: "loaderImages",
container: this,
x: 120,
y: 275,
width: 280,
height: 545,
alpha: 0,
centerRegistration: true,
scaleMode: "proportionalInside"
});

loaderImages.load();

 

What i want is to make simle slideshow which would:

1) Load all images firstly

2) Show first image

3) Then after some delay start to cycle between images

 

Is there any cool, easy and handy alternative by gs of usual as3 timers to make slideshow load next slide after a while?

 

Thx for any help in advance! :)

Link to comment
Share on other sites

I'm a little confused as you stated that the requirements were :

 

1) Load all images firstly

 

and then you asked if the slideshow could load the next slide after a while.

 

You can either load them all upfront or load them all on demand. I'll assume you meant load them all upfront. Either way LoaderMax can handle it.

 

You should definitely check out the LoaderMax docs as it is the tool to use any time you are loading multiple assets.

 

If you want to work from an array of urls, the parse() method is built just for that, OR you could loop through your array and build individual ImageLoaders and append them to your LoaderMax.

 

Here is a basic example of using parse() to load a bunch of images.

They all load initially and then we use TweenLite.delayedCall() to display each one at 1-second intervals:

 

 

import com.greensock.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;

LoaderMax.activate([imageLoader]);

var index:int = 0;
var currentImage:Sprite;
var urls:Array = ["images/whale.png","images/crab.png","images/lobster.png","images/bird.png"];

var queue:LoaderMax = LoaderMax.parse(urls,{onComplete:onCompleteHandler,onprogress:onprogressHandler,maxConnections:1,onChildComplete:onChildCompleteHandler}, {alpha:0});
queue.load();

function onCompleteHandler(e:LoaderEvent):void {
trace("all images loaded");
showNextImage();
}

function onprogressHandler(e:LoaderEvent):void {
trace(e.target.progress);
}


function onChildCompleteHandler(e:LoaderEvent):void {
trace(e.target + " loaded");
}


function showNextImage() {
trace("image " + index)
currentImage = LoaderMax.getContent(urls[index]);
currentImage.alpha = 0;
TweenLite.to(currentImage, .5, {alpha:1});
addChild(currentImage);
if (index < urls.length-1) {
index++;
} else {
index = 0;
}
TweenLite.delayedCall(1, showNextImage);
}

 

I've attached a CS5 example with all necessary assets.

 

In addition I strongly recommend this tutorial which covers a lot of the LoaderMax/ImageLoader basics: http://www.snorkl.tv...ultiple-images/

simpleSlideShow.zip

Link to comment
Share on other sites

Wow, thank you a lot Carl!

TweenLite.delayedCall(1, showNextImage); and showNextImage function are just what i was searching for!
 
I'm sure i'll have a lot of questions about LoaderMax later, but for now i understood the part i needed fast, thanks again! :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×