adam.benjamin.thomas

This post will walk through the construction of a simple XML and Flash gallery. If you want to use the images and XML file we are referring to in this example you can download our XML document here and download our images here. Our gallery will simply load the first image and then with each click it’ll load the next image form our XML document.

First of all here is the XML we will be working with:

<?xml version="1.0" encoding="utf-8"?>
<gallery>
     <photo>
          <filename>http://adambenjamin.com/blog/wp-content/img_0001.jpg</filename>
          <width>800</width>
          <height>531</height>
          <title>Field at Night</title>
     </photo>
     <photo>
          <filename>http://adambenjamin.com/blog/wp-content/img_0002.jpg</filename>
          <width>800</width>
          <height>531</height>
          <title>Van on the Road</title>
     </photo>
     <photo>
          <filename>http://adambenjamin.com/blog/wp-content/img_0003.jpg</filename>
          <width>800</width>
          <height>531</height>
          <title>Van on the Road Close Up</title>
     </photo>
     <photo>
          <filename>http://adambenjamin.com/blog/wp-content/img_0004.jpg</filename>
          <width>800</width>
          <height>531</height>
          <title>Mountains</title>
     </photo>
     <photo>
          <filename>http://adambenjamin.com/blog/wp-content/img_0005.jpg</filename>
          <width>800</width>
          <height>531</height>
          <title>Edge of a Cliff</title>
     </photo>
     <photo>
          <filename>http://adambenjamin.com/blog/wp-content/img_0006.jpg</filename>
          <width>800</width>
          <height>531</height>
          <title>Another Road</title>
     </photo>
     <photo>
          <filename>http://adambenjamin.com/blog/wp-content/img_0007.jpg</filename>
          <width>800</width>
          <height>531</height>
          <title>Tight Path</title>
     </photo>
     <photo>
          <filename>http://adambenjamin.com/blog/wp-content/img_0008.jpg</filename>
          <width>800</width>
          <height>531</height>
          <title>Yellow Pickup</title>
     </photo>
     <photo>
          <filename>http://adambenjamin.com/blog/wp-content/img_0009.jpg</filename>
          <width>800</width>
          <height>531</height>
          <title>Power Lines</title>
     </photo>
     <photo>
          <filename>http://adambenjamin.com/blog/wp-content/img_0010.jpg</filename>
          <width>800</width>
          <height>531</height>
          <title>Pig</title>
     </photo>
     <photo>
          <filename>http://adambenjamin.com/blog/wp-content/img_0011.jpg</filename>
          <width>800</width>
          <height>531</height>
          <title>Drying Coffee Beans</title>
     </photo>
     <photo>
          <filename>http://adambenjamin.com/blog/wp-content/img_0012.jpg</filename>
          <width>800</width>
          <height>531</height>
          <title>Homes</title>
     </photo>
</gallery>

In this example the only piece of information we will need is the filename. In future posts we may use the image titles and dimensions.

First we need to import a few Classes:

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

Next we need a Movie Clip to load images into and apply Tweens to:

var containerMovie:MovieClip = new MovieClip();
addChild(containerMovie);

Then we define a URL Loarder and an XML Object:

var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();

We are going to need two variables: one to keep track of what image we are currently viewing and another to keep track of whether or not we are in the progress of loading the next image.

var galleryCounter:Number=new Number(0);
var galleryStatus:Boolean=new Boolean(false);

Then we are gong to add an Event LIstener to the main Movie Clip to listen for Click Events.

containerMovie.buttonMode = true;
containerMovie.addEventListener(MouseEvent.CLICK,clickHandler);

When some one clicks the main Movie Clip we check to make sure another image isn’t half way through loading; and if it isn’t we add one to the counter Variable, check to make sure it hasn’t gone too high and then load that photo.

function clickHandler(evt:MouseEvent):void {
     if (galleryStatus==false) {
          galleryCounter++;
          if (galleryCounter>=xmlData.photo.length()) {
               galleryCounter=0;
          }
          loadPhotoStep1(galleryCounter);
     }
}

Now that our containers and butons are all set up lets load our XML.

xmlLoader.load(new URLRequest("gallery.xml"));

Once that loading is complete we put the loaded information into our XML Object and start eh first step of loading our image.

xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
function LoadXML(e:Event):void {
     xmlData=new XML(e.target.data);
     loadPhotoStep1(galleryCounter);
}

Setp 1 - we save the loaded image number into our galleryCounter variable and set galleryStatus to true. This prevents our clickHandler function above from loading another image before this one has finished loading. And we Tween the Alpha out of the current image.

function loadPhotoStep1(photoNumber:Number):void {
     galleryCounter=photoNumber;
     galleryStatus=true;
     var tweenOut:Tween=new Tween(containerMovie,"alpha",Strong.easeOut,1,0,15);
     tweenOut.addEventListener(TweenEvent.MOTION_FINISH,loadPhotoStep2);
}

Step 2 - once the first Tween has completed we load empty the container Movie Clip and load in the new image.

function loadPhotoStep2(evt:TweenEvent):void {
     var imageLoader:Loader = new Loader();
     var imageRequest:URLRequest=new URLRequest(xmlData.photo[galleryCounter].filename);
     imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadPhotoStep3);
     imageLoader.load(imageRequest);
     emptyContainer();
     containerMovie.addChild(imageLoader);
}

One the image has loaded in we Tween the Alpha back in.

function loadPhotoStep3(evt:Event):void {
     var tweenIn:Tween=new Tween(containerMovie,"alpha",Strong.easeOut,0,1,15);
     tweenIn.addEventListener(TweenEvent.MOTION_FINISH,loadPhotoStep4);
}

Once that Tween is complete we set galleryStatus back to false so the next time the user clicks the Movie Clip i’s good to go!

function loadPhotoStep4(evt:Event):void {
     galleryStatus=false;
}

This last function removes all Children from the containerMovie Movie Clip. It is called by the step 2 function.

function emptyContainer() :void {
     for (var i:int; i < containerMovie.numChildren; i++){
          containerMovie.removeChildAt(i);
     }
}

Download the Gallery Flash File

Download a Version of this Gallery with Thumbnails

For this example first we need a few buttons to trigger our blurring and something to blur. If you haven’t already open up a new Flash document and reate the following timeline (your frames will not be grey yet as you have nothing on them):

Now add to your stage two buttons form theComponents window (CTRL+F7) and name them blur_btn and unlur_btn. Next add something to blur; make sure it’s a Movie Clip named image_mc.

The built in Flash Tween class does not have the option of tweening a blur but Jack Doyle’s TweenMax class does. Once you have downloaded the TweenMax class you should have a gs folder in the same folder as your fla and swf. Now we need to import the TweenMax class for use in our fla.

import gs.TweenMax;
import gs.easing.*;

Next we need to set the labels on our butons:

blur_btn.label = "Blur";
unblur_btn.label = "Unblur";

And finally add two Event Listeners to out buttons which blur and unblur our Movie Clip. In this example below it also faded the Movie Clip in and out.

blur_btn.addEventListener( MouseEvent.CLICK, blurHandler );
function blurHandler( evt:MouseEvent ):void {
     TweenMax.to( image_mc, 1, {blurFilter:{blurX:20, blurY:20}, autoAlpha:0} );
}
unblur_btn.addEventListener( MouseEvent.CLICK, unblurHandler );
function unblurHandler( evt:MouseEvent ):void {
     TweenMax.to( image_mc, 1, {blurFilter:{blurX:0, blurY:0}, autoAlpha:1} );
}

Download the Blur Flash File

During a preloader class we decided we wanted to re-create the initial preloader at pepsi.com. At first glance it looks a little chaotic.

Some of the stuff happening during this preloader was a little too much so we decided that we were going to create a preloader which did the following:

1. Display the percentage loaded in a random location within the stage
2. Tween each number to the center of the stage
3. Tween each number to have a with and height of zero

So just like the previous preloader post create a timeline like the following:

Put a stop(); action on frame one and five of the actions layer and and for now put something like a fairy large on frame five of the content layer. This will give us something to actually preload.Now go back to frame one on the action layer and open up your actions panel. This is where the rest of our Actionscript is going to go.

For this example we’re just going to use the built in Flash Tween class so right before your stop(); action add the following code:

import fl.transitions.Tween;
import fl.transitions.easing.*;

Next we need to define a TextFormat to use with our percentage numbers. So right after your stop(); action add the following TextFormat:

var newFormat:TextFormat = new TextFormat();
newFormat.size = 80;
newFormat.font = "Arial";
newFormat.color = 0x666666;

This tells our percentage numbers to be Arial, 80px and a grey. There are lots more formatting options you can check out at the TextFormat page in the Actionscript Language Reference.

For each percentage number we place on the stage we are going to need four tweens. By the end of our loading animation we likely will have used around 400 tweens. To prevent any conflicts by using the same teen names over and over we are going to place all of our tweens in four arrays:

var tweenX:Array = new Array();
var tweenY:Array = new Array();
var tweenScaleX:Array = new Array();
var tweenScaleY:Array = new Array();

We will also use a counter to track which set of tweens we are currently on:

var tweenCounter:Number = new Number(0);

Next we need to create a function that is executed whenever the download made progress. This function contains the bulk of the code:

this.loaderInfo.addEventListener(ProgressEvent.PROGRESS,onLoaderProgress);
function onLoaderProgress(evt:ProgressEvent):void {
     var percent:Number=evt.bytesLoaded/evt.bytesTotal;
     var newNumber:TextField = new TextField();
     newNumber.text = String( Math.round( percent * 100 ) );
     newNumber.selectable = false;
     newNumber.x = stage.stageWidth * Math.random() - newNumber.width / 2;
     newNumber.y = stage.stageHeight * Math.random() - newNumber.height / 2;
     newNumber.setTextFormat( newFormat );
     addChild( newNumber );

The first half of this function creates a new TextField object with the current percent loaded and places it on a random location on the stage. I also applies the TextFormat defined earlier.

The second half of the function tweens the new TextField to the center of the stage and to a width and height of zero. Each of these tweens are place in an array kept track with the tweenCounter variable.

     tweenX[tweenCounter] = new Tween(newNumber,"x",Strong.easeOut,newNumber.x,stage.stageWidth / 2,24);
     tweenY[tweenCounter] = new Tween(newNumber,"y",Strong.easeOut,newNumber.y,stage.stageHeight / 2,24);
     tweenScaleX[tweenCounter] = new Tween(newNumber,"scaleX",Strong.easeOut,1,0,24);
     tweenScaleY[tweenCounter] = new Tween(newNumber, "scaleY",Strong.easeOut,1,0,24);
     tweenCounter ++;
}

Finally we need a function to run when the downloading is complete. This function will simply run a play(); action to play out the rest of the swf.

this.loaderInfo.addEventListener(Event.COMPLETE,onLoaderComplete);
function onLoaderComplete(evt:Event):void {
     play();
}

And that’s it! We have a time warp looking Pepsi preloader!! Click the Pepsi image to replay the preloader:

Download the Pepsi Preloader

This post will review how to use the built in Flash Tween class. Many believe that the Tween class that comes with Flash is quite bulky and cumbersum so a few peiple have written their own custom tween classes; two of the more popular are Tweener and TweenLite. But for now that’s besides the point…lets try out Flash’s tween class.

The Flash Tween class is not loaded by default so lets load the Tween class and the set of easing equations that the Tween class requires:

import fl.transitions.Tween;
import fl.transitions.easing.*;

Now that those are loaded we can statert tweening! The Tween class requires a whole lot of information:

1. obj:Object - the name of the object we are going to tween
2. prop:String - the property we want to tween express as a string
3. func:Function - the easing function we would like to use to tween our object
4. begin:Number - the begining value of the specified property
5. finish:Number - the ending value of the specified property
6. duration:Number - the number of frames the animation shoud take to complete
7. useSeconds:Boolean - this optional value if set to true will change the duration from frames to seconds

So lets say we want to animate a logo with the instance name logo_mc from off stage left to the center of the stage we would use the following code:

var firstTween:Tween = new Tween(logo_mc,"x",Strong.easeOut,-150,275,24);

It the above example the easing function we have choosen is Strong.easeOut. There are many easing equations available:

1. Back: Extends the animation over one or both ends of the tween
2. Bounce: Creates a bouncing effect in the tween at one or both ends
3. Elastic: Creates a mixture of the bounce and back classes. The animation is extended over and bounces back at one or both ends of the Tween
4. Regular: Slower motion at one or both ends of the tween
5. String: Similar to regular but is more pronounced when combined with the various easing methods
6. None: A simple linear transition from a to b

The above easing classes can be combined with these four methods:

1. easeNone: No ease
2. easeIn: The ease is applied only at the start of the tween
3. easeOut: The ease is applied only at the end of the tween
4. easeInOut: The ease is applied at both the beginning and end of the tween

These easing class and method descriptions were taken from Kirupa. There is also more information available on the Adobe LIvedocs AS3 Language Reference. You’ll need to click on the fl.transitions.easing package in the package list.

One of the main events when working with tweens is the MOTION_COMPLETE event. To use any of teh Flash Motion Events we need to add one more line to our import lines:

import fl.transitions.TweenEvent;

If we want something to execute when a tween is complete we need to create a function to execute and then attach it to the Motion Finish Event:

var firstTween:Tween = new Tween(logo_mc,"x",Strong.easeOut,-150,275,24);
firstTween.addEventListener(MotionEvent.MOTION_FINISH,motionFinishHandler);
function motionFinishHandler(evt:MotionEvent):void {
     trace("Motion Finished!");
}