Professional Slide Show with AS3

Step 2, Applying Effect:

In this final step we will apply a fade in effect to the entering picture. We will also create a functionality that will load the next picture after a certain amount of time. First open the file “slide_show.fla”.

A fade in effect is basically a fully transparent picture going progressively to a fully visible picture. To achieve this effect we need to apply a motion to the alpha property of the entering picture we load in our application. There’s many ways to add motion with Actionscript 3. For our slide show I chose to use the built in Tween class. So our first task is to import the Tween class and its event related subclass:

import fl.transitions.Tween;
import fl.transitions.TweenEvent;

We need a few new variables. We can dynamically set the amount of time the fade in should last. To keep track of this, we need a new variable:

var transition_time:Number = 3;

How long should the picture stay displayed on the screen before a new picture appears on top of it? A new variable will allow us to control this:

var displaying_time:Number = 5;

We now need to create a Tween variable that we will use to apply the fade in to our picture:

var alpha_tween:Tween;

We also create and add to the display list a Sprite object inside which we will attach the pictures we will load:

var picture_holder:Sprite = new Sprite();
addChild(picture_holder);

Now let’s add a couple of new lines in our slide_show() function:
To apply the fade in we need to know when the picture we load is fully loaded and ready to be displayed. We do this by registering an event listener that will call the loader_Handler() function once the picture is available:

picture_loader.contentLoaderInfo.addEventListener(Event.INIT, loader_Handler);

We also increase our index variable so next time we will call the slide_show() function it will load the next picture in the array:

index++;

Now we have a new function that we registered with the COMPLETE event of the picture_loader and it’s called “loader_Handler()”. Let’s take a look:

We first resize our picture to fit perfectly the display. We use a call to a resize_picture() function that we will write later:

resize_picture(e.target.content);

Now we set our picture to be invisible by default:

e.target.content.visible = false;

We add our picture to the Sprite variable we declared earlier:

picture_holder.addChild(e.target.content);

We get the index of the last picture attached to our Sprite variable:

var last_child:int = picture_holder.numChildren-1;

And we call a function on the last picture attached to our Sprite variable to fade in it:

start_transition(picture_holder.getChildAt(last_child));

And here is the complete code including the resize_picture and start_transition functions:

import fl.transitions.Tween;
import fl.transitions.TweenEvent;

var transition_time:Number = 3;
var displaying_time:Number = 5;
var alpha_tween:Tween;
var picture_holder:Sprite = new Sprite();
addChild(picture_holder);
var xml_data:XML;
var array_of_picture:Array = new Array();
var request_xml:URLRequest = new URLRequest("setup.xml");
var loader:URLLoader = new URLLoader();
var picture_loader:Loader;
var index:int = 0;
var request_picture:URLRequest;

loader.addEventListener(Event.COMPLETE, completeHandler);
function completeHandler(e:Event):void{
xml_data = new XML(loader.data);
for(var i:int; i<xml_data.children().length(); i++){
array_of_picture.push(xml_data.child(i));
}
start_slide_show();
}
loader.load(request_xml);

Now if you run this code the first picture fade in but the application stops there. Now we need to load the next picture and apply the same effect to it so the application will run by itself and load each picture one after another.

Of course we need a new variable. We use a Tween variable but not to create any motion this time, instead we will use it to keep track of time:

var timer_tween:Tween;

Two Boolean variables that we will use to know when to fade in the next picture:

var is_picture_loaded:Boolean;
var is_next_transition_ready:Boolean = true;

In the loader_Handler() function we set the is_picture_loaded to true to let know the application that the picture is available and ready to be fade in:

is_picture_loaded = true;

Then we check if the is_next_transition_ready variable is also set to true and if it is that means it’s time to start the fade in for this picture, if it’s not this function has done it’s job and terminate itself here:

if(is_next_transition_ready){
            var last_child:int = picture_holder.numChildren-1;
            start_transition(picture_holder.getChildAt(last_child));
}

Now in the start_transition() function we set our two Boolean variables to false so they are ready for the next picture to be loaded:

is_next_transition_ready = false;
is_picture_loaded = false;

We call our start_slide_show() function so a new picture can be loaded while we display the current one:

start_slide_show();

We add a listener to our alpha_tween variable so we know when the fade in has ended and when it did we call a new function called “start_timer”:

alpha_tween.addEventListener(TweenEvent.MOTION_FINISH, start_timer);

The start_timer function only check whether the displaying time is over and when it is, it triggers a remove_picture() function:
In this function we check if we have more than 2 pictures in our Sprite variable and if we do then we can safely remove the first one since it’s not displayed anymore:

if(picture_holder.numChildren>2){picture_holder.removeChildAt(0)}

We let know the application that the displaying time is over:

is_next_transition_ready = true;

The displaying time is over but before fading in the next picture we need to make sure it’s fully loaded:

if(is_picture_loaded){
            var last_child:int = picture_holder.numChildren-1;
            start_transition(picture_holder.getChildAt(last_child))
}

And this is it! Our slide show loads one by one our pictures and applies to them a fade in effect!