2

Flash Slideshow in Actionscript 3

Flash Slideshow in Actionscript 3 via @largestartist Posted by Jose Cuadra on March 26, 2009 Tags: | | | | Filed Under: Applications

“Simple Slide” is an automated slide show that can also be used for banner ads. Download it now to tweak it for your specific application.

The application simply rotates a predefined number of images with a fading transition effect.

Editable options

Delay
The JavaScript file(int.js) contains the delay time, between transitions, in milliseconds.(secondx1000)
XML File Location
The JavaScript file(int.js) contains the path to the XML file.
Image File Locations
The file locations for the images you want to include are located in the XML file.

XML Structure:

<?xml version="1.0" encoding="utf-8"?>
<images>
<img src="imgs/sidebar.png" />
<img src="imgs/tatt.jpg" />
<img src="imgs/supes.jpg" />
</images>

Document Class:

package {
	import flash.display.Sprite;
	import flash.display.Loader;
	import fl.transitions.Tween;
	import fl.transitions.easing.*;
	import fl.transitions.TweenEvent;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.xml.XMLDocument;
	import flash.net.navigateToURL;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.utils.Dictionary;
	public class slideShow extends Sprite {
		var count:Number = new Number(0);
		var imgList:XMLList = new XMLList();
		var paramList:Object;
		var xmlPath:String = "../xml/sidebar.xml";
		var seconds:uint = 1000;
		//Storing the tween globally temporarily prevents it from being dumped prematurely.
		//Fix From: http://www.scottgmorgan.com/blog/index.php/2007/11/18/as3-garbage-collection-the-reason-your-tweens-are-ending-early/
		var antiGC:Dictionary = new Dictionary(false);
 
		public function slideShow():void {
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
 
 
			var xmlLoader:URLLoader = new URLLoader();
			paramList = this.root.loaderInfo.parameters;
			if (paramList["xmlPath"] != undefined) {
				xmlPath = paramList["xmlPath"];
				seconds = paramList["delay"];
			}
			var xmlURL:URLRequest = new URLRequest(xmlPath);
			xmlLoader.addEventListener(Event.COMPLETE, intSlideShow, false, 0, true);
			intLoading();
			function intLoading() {
				xmlLoader.load(xmlURL);
			}
		}
		public function intSlideShow(evt:Event):void {
			evt.target.removeEventListener(Event.COMPLETE, intSlideShow);
			var xmlDoc:XML = new XML(evt.target.data);
			imgList = xmlDoc.children();
			loadImage();
		}
		public function loadImage():void {
			var imgLoader:Loader = new Loader();
			var imgURL:URLRequest = new URLRequest(imgList[count].@src);
			imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, displayObject);
			imgLoader.load(imgURL);
			count++;
			if (count>imgList.length()-1) {
				count=0;
			}
		}
		public function displayObject(evt:Event):void {
			evt.target.removeEventListener(Event.COMPLETE, displayObject);
			var slide:Sprite = new Sprite();
			slide.addChild(evt.target.content);
			slide.addEventListener(Event.ADDED_TO_STAGE, addedToStage);
			stage.addChild(slide);
		}
		public function addedToStage(evt:Event) {
			var animate:Tween = new Tween(evt.target, "alpha", None.easeNone, 0, 1, .4, true);
			animate.addEventListener(TweenEvent.MOTION_FINISH, finishedTween);
			antiGC[animate] = animate;
		}
		public function finishedTween(evt:TweenEvent) {
			antiGC[evt.currentTarget] = null;
			delete antiGC[evt.currentTarget];
			var delay:Timer = new Timer(seconds, 1);
			delay.addEventListener(TimerEvent.TIMER_COMPLETE, hideObject);
			delay.start();
			if (stage.numChildren-1>1) {
				stage.removeChildAt(1);
			}
		}
		public function hideObject(evt:Event):void {
			loadImage();
		}
	}
}

Demo

Simple Slide Demo

Download

Simple Slide v1

Credits

I use SWFObject to embed the swf and pass the required parameters to the stage.

Also I used a method found here to force the Tween to fully complete.

Want More? Try These.

Related Articles
Multiple On Load Events
Transversing the Display List Correctly
The Textfield’s Alpha Property in AS 3.0
Target Blank for XHTML
Flash Display Fixes
IE Conditional Comments
fliteBox Lightbox for Flickr
JavaScriptless Tool Tips
Access Cascading Styles with JavaScript
CFCACHE, IE, CSS and XHTML
Random Articles
CFCACHE, IE, CSS and XHTML
Disable Safari’s Textarea Grip
Conditional Shortcut in ActionScript
Web Fonts Suck!
Multiple On Load Events
JavaScripted Tooltips
Transversing the Display List Correctly
IE Conditional Comments
Classy Glassy Orbs
The Coolest Lightboxes Around

2 Responses to “Flash Slideshow in Actionscript 3”

  1. jorisshh says:

    Would there be a posibility to create some buttons which link you to the choisen image?

    • Jose Cuadra says:

      Actually, jorisshh, that’s a pretty good idea. I will release an update to this project and let you know.

      Rather than buttons I will link the entire image. This will keep it simple and flexible. Thanks for the input!

Leave a Reply