Home » ActionScript 3.0

Using FaderFileMaterial to create Slideshow

20 January 2009 4 Comments
Share on Facebook

The aim of this tutorial is to create slideshow using the FaderAPI.

FaderAPI can be used to create Flash Slideshow within few steps. FaderAPI contains Fader Class and FaderFileMaterial classes to load and animate external Image and SWF files.

Features:
Some exciting features of the Slideshow are as follows

  • Ability of handling Image and SWF together.
  • SWF may also be an animated file.
  • No Need of Preloader- Since the animation will not happens until the next file is loaded.
  • Customized events to handle the Slideshow

Complete Flash Slideshow in AS2 and AS3

Difficulty:
Beginners to Medium

 

FaderFileMaterial:

Here we are going to use the FaderFileMaterial to create slideshow.
FaderFileMaterial is a Class under FaderAPI, to load external contents like Image, SWF and animate them.
Now this makes the loading external content easier and animating them.

Steps to create Slideshow using Actionscript:

Import External Classes:

import com.utils.Fader.*;
import com.utils.Fader.FaderURL;
import com.utils.Fader.Events.*;

Importing the external classes makes the external classes available to use in Code.

Create FaderURL:

var _faderURLItems:FaderURL = new FaderURL();
_faderURLItems.addURL( "Images/image1.jpg" );
_faderURLItems.addURL( "Images/image2.jpg" );
_faderURLItems.addURL( "Images/image3.jpg" );
_faderURLItems.addURL( "Images/image4.jpg" );
_faderURLItems.addURL( "Images/image5.jpg" );
_faderURLItems.addURL( "SWF/swf1.swf" );

Create object for FaderURLItems, FaderURLItems are used as stack to store URLS of the external files.
addURL is public method of FaderURLItems to push URL into FaderURLItems Object. Later we will fetch URL one by one to load the external files.

Create FaderFileMaterial:

var _fader:FaderFileMaterial = new FaderFileMaterial( _faderURLItems, 5000, true );
_fader.addEventListener( ObjectEvent.FADER_INIT, handleInit );
_fader.addEventListener( ObjectEvent.FADER_ITEM_INIT, handleItemInit );
_fader.addEventListener( ObjectEvent.FADER_ITEM_PROGRESS, handleItemProgress );
_fader.addEventListener( ObjectEvent.FADER_ITEM_COMPLETE, handleItemComplete );
_fader.addEventListener( ObjectEvent.FADER_COMPLETE, handleComplete );
addChild( _fader )
_fader.start();

FaderFileMaterial fades the loaded external items. We are passing the Object of FaderURLItems which contains the URLS, delay, and Boolean to repeat the slideshow at end to constructor of FaderFileMaterial

fader.start() will initiates the Slideshow.

Note:
Add the Fader Object to the displayList. This makes the slideshow visible.

Online Documents for Classes used

FaderURL
FaderFileMaterial

Entire Example:

import com.utils.Fader.*;
import com.utils.Fader.FaderURL;
import com.utils.Fader.Events.*;

var _faderURLItems:FaderURL = new FaderURL();
_faderURLItems.addURL( "Images/image1.jpg" );
_faderURLItems.addURL( "Images/image2.jpg" );
_faderURLItems.addURL( "Images/image3.jpg" );
_faderURLItems.addURL( "Images/image4.jpg" );
_faderURLItems.addURL( "Images/image5.jpg" );
_faderURLItems.addURL( "SWF/swf1.swf" );

var _fader:FaderFileMaterial = new FaderFileMaterial( _faderURLItems, 5000, true );
_fader.addEventListener( ObjectEvent.FADER_INIT, handleInit );
_fader.addEventListener( ObjectEvent.FADER_ITEM_INIT, handleItemInit );
_fader.addEventListener( ObjectEvent.FADER_ITEM_PROGRESS, handleItemProgress );
_fader.addEventListener( ObjectEvent.FADER_ITEM_COMPLETE, handleItemComplete );
_fader.addEventListener( ObjectEvent.FADER_COMPLETE, handleComplete );
addChild( _fader )
_fader.start();

function handleInit( e:ObjectEvent ):void{
 trace("::::::::::Fader Started:::::::::")
}
function handleItemInit( e:ObjectEvent ):void{
 trace("init:: "+e.targetObject)
}
function handleItemProgress( e:ObjectEvent ):void{
 trace("progress::"+_fader.loaderPercentage)
}
function handleItemComplete( e:ObjectEvent ):void{
 trace("complete:: "+e.targetObject)
}
function handleComplete( e:ObjectEvent ):void{
 trace(":::::::::Fader Complete:::::::::")
}

stop_mc.addEventListener( MouseEvent.CLICK, handleStop );
start_mc.addEventListener( MouseEvent.CLICK, handleStart );

function handleStop( e:MouseEvent ):void{
 _fader.stop();
}
function handleStart( e:MouseEvent ):void{
 _fader.start();
}

Updated Flash as3 slideshow with more features with source

Â

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner


Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.