Creating an XML Grid Image Gallery in Flash (ActionScript 3.0)

By Blue_Chi | Flash CS3 | ActionScript 3.0 | Intermediate | Page 1, 2, 3, 4, 5, 6, 7, 8

In this section of the tutorial we are going to add simple fade-in effects to all of the images in the gallery. We are going create these transitions using the Tween Class which is a class designed to make animating any property dead easy. This section will be divided into the following sections:

  1. Importing the Tween Class.
  2. Fading in each thumb once it loads.
  3. Fading in and out the entire gallery when a full image is shown and then removed.
  4. Fading in and out a full images when required.

Importing the Tween Class

The Tween Class is an ActionScript class that has no graphical assets, but it still needs to be imported for it to function. We can do that by pasting the following commands at the start of our code. We need the Tween Class itself, the Easing Classes required for determining the way the animation flows, and the Tween Event Class which is responsible for listening to Tween Events:

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

That should let us use the Tween Class as we wish in our code.

Fading in Each Thumb once it Loads

We will make the appearance of our thumbs nicer we will add a basic Tween that fade sit in instead of having it just pop up the way it does. We will execute this command to the instance of the Loader Class once it loads using the thumbLoaded() listener function:

function thumbLoaded(e:Event):void {
var my_thumb:Loader = Loader(e.target.loader);
container_mc.addChild(my_thumb);
new Tween(my_thumb, "alpha", Strong.easeIn, 0,1,0.5, true);
}
Please review the AS3 Tween Class tutorial to learn more about this subject.

Test your movie now to see each of your thumbs smoothly fade in when they finish loading.

Fading In and Out the Entire Gallery when a full image is shown

We are going to fade out all the thumbs when a full image is shown to emphasize the full image. All of the thumbs are located inside the container_mc MovieClip. This makes it possible for us to fade them all out by just fading out container_mc. We are going to execute this animation from within the callFull() listener function this way:

function callFull(e:MouseEvent):void {
var full_loader:Loader = new Loader();
var full_url = my_images[e.target.name].@FULL;
full_loader.load(new URLRequest(full_url));
full_loader.contentLoaderInfo.addEventListener(Event.INIT, fullLoaded);

var full_pb:ProgressBar = new ProgressBar();
full_pb.source = full_loader.contentLoaderInfo;
full_pb.x = (stage.stageWidth - full_pb.width)/2;
full_pb.y = (stage.stageHeight - full_pb.height)/2;
preloaders_mc.addChild(full_pb);

full_pb.addEventListener(Event.COMPLETE, donePb);

container_mc.removeEventListener(MouseEvent.CLICK, callFull);
new Tween(container_mc, "alpha", Strong.easeIn, 1,0.5,0.5, true);

}

We need to fade the container back in once the full image is removed. We can do this by executing another Tween from within the removeFull() listener function:

function removeFull(e:MouseEvent):void{
var my_loader:Loader = Loader (e.currentTarget);
my_loader.unload();
removeChild(my_loader);

container_mc.addEventListener(MouseEvent.CLICK, callFull);
new Tween(container_mc, "alpha", Strong.easeOut, 0.5,1,0.5, true);

}

You can test your movie now and click a thumb to see the gallery fade in and out as the full image is shown.

Fading In and Out the Full Image

Fading in the full image when it loads up is pretty easy and basically requires you to do the same thing you did with the thumbnails. Just execute a tween right after you add the full image to the display list from the fullLoaded() listener function:

function fullLoaded(e:Event):void{
var my_loader:Loader = Loader(e.target.loader);
addChild(my_loader);
new Tween(my_loader, "alpha", Strong.easeIn, 0,1,0.5, true);
my_loader.x = (stage.stageWidth - my_loader.width)/2;
my_loader.y = (stage.stageHeight - my_loader.height)/2;
my_loader.addEventListener(MouseEvent.CLICK,removeFull);
}

Fading the full image out is a bit more complicated because we need to unload the asset and also remove the loader completely from the display list, so doing that at the same time as the tween will not work because the object won't be on the stage once we execute the command.

To solve this problem we are going to change the contents of our removeFull() listener function so that we just fade it. First I will show you the current content of the removeFull() listener function:

function removeFull(e:MouseEvent):void{
var my_loader:Loader = Loader (e.currentTarget);
my_loader.unload();
removeChild(my_loader);

container_mc.addEventListener(MouseEvent.CLICK, callFull);
new Tween(container_mc, "alpha", Strong.easeOut, 0.5,1,0.5, true)

}

We can't unload the loader or remove it from the display list. We also can't add the container_mc event listener before the full image is also fully gone. So we are going to take these three items outs and do a fade in animation instead:

function removeFull(e:MouseEvent):void{
var my_loader:Loader = Loader (e.currentTarget);
var fade_out:Tween = new Tween(my_loader, "alpha", Strong.easeOut, 1,0,0.5, true);

new Tween(container_mc, "alpha", Strong.easeOut, 0.5,1,0.5, true)

}
Make sure you update this function so that it is exactly like the one shown above at this stage.

We put our Tween inside a variable this time to be able to register an event listener to it. We can register for the completion of the Tween animation and execute code only once the animation finishes using a TweenEvent. This way we can unload the loader, remove it from the display list, and register the container_mc event listener at the right time. Start off by registering the Tween Event this way:

function removeFull(e:MouseEvent):void{
var my_loader:Loader = Loader (e.currentTarget);
var fade_out:Tween = new Tween(my_loader, "alpha", Strong.easeOut, 1,0,0.5, true);
fade_out.addEventListener(TweenEvent.MOTION_FINISH, tweenFinished);

new Tween(container_mc, "alpha", Strong.easeOut, 0.5,1,0.5, true)

}

We now need to create the final listener function we need, type this at the bottom of your code and let it do the required actions we had earlier to remove all the unwanted assets and register the event listener back with container_mc:

function tweenFinished (e:TweenEvent):void{
var my_loader:Loader = Loader (e.target.obj);
my_loader.unload();
removeChild(my_loader);

container_mc.addEventListener(MouseEvent.CLICK, callFull);
}
obj is a Tween Class instance property that refers to the object currently being tweened.

That should do it. Test your movie, try to simulate download if you wish, and see how everything smoothly fades in and out!

Our gallery is more or less finished. In the final page of this tutorial we are going to polish it up and fix some bugs to ensure that gallery works well.

Summary of this Page

  1. Imported the Tween Class using the import directive.
  2. Faded in each thumb as it loaded.
  3. Faded in and out the entire gallery when a full image is shown.
  4. Faded in and out the full image as required.

Head to the final page of the tutorial to polish the grid gallery and wrap it up!

Next page