ActionScript.com The Flash/Flex ActionScript Developer Community

Saturday, May 17, 2008

You are here : Article

Home

Tutorials

Forum

Consulting Services

Basic Usage (using the Component Inspector)

This component works by pulling images out of the library based on their Linkage identifiers. You can try out the component by dragging an instance of it on the stage and setting the list of Images in the Component Inspector to identify a list of images in your library.

The size of the tiles, speed of the effect (how fast the tiles clear) and the number of tiles affected during any given frame are all configurable on the Component Inspector. Some of the effects (the ones using blur filters) can be very processor intensive. If you notice the frame rate of the effect being negatively affected, adjust the speed to a higher number or the number affected to a lower number to reduce the total number of moving objects Flash has to keep up with.

The only two methods of the component you will need to call for basic usage are getNextImage() and getPreviousImage(). For example, if you wanted to create a constant slide show like the sample above, you would just drag the component on the stage, add your images to the Image list, give the component an instance name (I called mine "clip") and add this code in the first frame of the movie:

function nextImage() { clip.getNextImage(); } setInterval(nextImage, 6000);

Advanced Usage (using the API)

The component API is pretty straight forward and works much like the properties in the Component Inspector, but you can set them at runtime. They are:

setEffectSpeed()
setEffectType()
setImageArray()
setNumberAffected()
setTileWidth()
setTileHeight()
getNextImage()
getPreviousImage()

setEffectSpeed(n:Number):Void - This method is used to set the speed at which a tile is removed from the stage during the transition. It takes in any number greater than 1 and returns nothing.

setEffectType(s:String):Void - This method sets the type of transition effect that you want. Valid types are "pourTiles", "erodeTiles", "shatterTiles", "zoomTopToBottom", "zoomBottomToTop", "zoomRandom", "fadeTopToBottom", "fadeBottomToTop", "fadeRandom", "blurTopToBottom", "blurBottomToTop", "blurRandom", and "random"

setImageArray(a:Array):Void - This method takes in an array of strings identifying a list of images that exist in the library. This list will be used (in order) to display transitions between images.

setNumberAffected(n:Number):Void - This method sets the number of tiles that will be triggered to be removed during any given frame. It takes in any whole number greater than 0.

setTileWidth(n:Number):Void -This method takes in any number to set the tile width.

setTileHeight(n:Number):Void - This method takes in any number to set the tile height.

getNextImage():Void - This method will trigger the component to load the next image in the image array and transition the old image off the stage with the chosen effect. If the image currently displayed is the last image in the array, then the component will start back at the beginning of the array.

getPreviousImage():Void - This method will trigger the component to load the previous image in the image array and transition the old image off the stage with the chosen effect. If the image currently displayed is the first image in the array, then the component will draw from the end of the array.

Update - 11/18/2005:

I actually started using this component for a project this morning and immediately realized that it was missing some important functionality. So, I've added an addListener() method to it so that you can subscribe for "onEffectComplete" events from it. This will fire whenever the final tile is removed from the stage. I have also added a property called isInTransit. This is a boolean value telling you whether or not the transition is currently animating (doing a transition). The component also now ignores calls to getNextImage() and getPreviousImage() when it isInTransit.

The zip file on our server has been overwritten and the component is now in version 1.1.0. You can download it here

del.icio.us || Digg It || Technorati