Most Popular

• Create a sliding content in flash
• Flash Flip Letter Effect
• Create a Show/Hide Sliding Panel using Flex
• 3D rotation with Flash CS4
• Capture images from the webcam
• Sliding menu with actionscript 3 and TweenLite
• Create a 360° panorama viewer with AS3
• Create an Auto-Scrolling Vertical Content
• Eyes follow the cursor
• Circular rotation with as3

XML Horizontal Accordion Photos Gallery

In this AS3 tutorial, learn how to create an XML driven Horizontal Accordion that displays a list of Photos.
If you have the right webhosting for your website that supports XML, this tutorial would work perfectly once you’ve decided to display the integration of these codes on your site.

1. Create a new flash file (Actionscript 3.0) and save it as accordion.fla.

2. Create an XML file to store the photos’ datas and save it as datas.xml.

<photos>
	<photo>1.jpg</photo>
	<photo>2.jpg</photo>
	<photo>3.jpg</photo>
	<photo>4.jpg</photo>
	<photo>5.jpg</photo>
</photos>

(Photos credits :Sunset, Seabirds In Flight, Apple Tree, Daffodils, White Cloud And Blue Sky)

3. Create an “actions” layer. Open the actions panel. We’ll use the Tweenlite engine so first write the following statements in order to use it and its easing properties.

import com.greensock.TweenLite;
import com.greensock.easing.*;

4. Next declare the following variables.

var xml:XML;
var folder ="photos/";
var totalPhotos:Number;
var photos:Array = new Array();
var photosLoaded:int = 0;
var current:Number = -1;
var accordion:Sprite
var photoWidth:uint;
var barWidth:Number;

5. Load the XML file :

function loadXML( file:String ):void{
	var xmlLoader:URLLoader = new URLLoader();
	xmlLoader.load(new URLRequest(file));
	xmlLoader.addEventListener(Event.COMPLETE,parseXML);
}

6. Then parse the XML :

function parseXML(e:Event):void {
	xml = new XML( e.target.data );
	totalPhotos =xml.photo.length();
	loadPhotos();
}

7. Inside the loadPhotos() function, we loop through the xml datas to create a Loader for each photo. The onComplete() function checks whether all photos are loaded. If so, it calls the createPanels() function.

function loadPhotos():void{
	for(var i:int = 0; i<totalPhotos; i++){
		var loader:Loader = new Loader();
		loader.load(new URLRequest(folder+ xml.photo[i]));
		photos.push(loader);
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);
	}
}

function onComplete(e:Event):void{
	photosLoaded++;
	if(photosLoaded == totalPhotos)
		createPanels();
}

8. Inside the createPanels() function, loop through the photos array in order to create the accordion’s panels that contain the photos. Position each panel according to the stage’s width divided by the total number of photos.

function createPanels():void{
	accordion = new Sprite();
	addChild(accordion);

	for(var i:int = 0; i < photos.length; i++){

		var panel:Sprite = new Sprite();
		barWidth = Math.ceil( stage.stageWidth / totalPhotos );
		panel.x = i  * barWidth;

		var bm:Bitmap = new Bitmap();
		bm = Bitmap(photos[i].content);
		bm.smoothing = true;
		panel.addChild(bm);
		accordion.addChild(panel);

		if (i==0) photoWidth=panel.width;

		if (i==photos.length-1)
			addListeners();
	}
}

9. Once all the panels are created, we add our event listeners:

function addListeners():void{
	for( var i:int = 0; i < accordion.numChildren; i++ ){
		var sp:Sprite = accordion.getChildAt(i) as Sprite;
		sp.addEventListener(MouseEvent.ROLL_OVER, onPanelOver);
	}
	accordion.addEventListener(MouseEvent.ROLL_OUT,closePanels);
}

10. Inside the onPanelOver() function we set each panel x coordinate so that the current one is entirely visible.

function onPanelOver(e:MouseEvent):void{
	var panel:Sprite = Sprite(e.target);
	current = accordion.getChildIndex(panel);

	barWidth = Math.ceil((stage.stageWidth-photoWidth) / (totalPhotos-1));

	for( var i :int = 0; i <accordion.numChildren; i++ ){
		var sp:Sprite = Sprite(accordion.getChildAt(i));
		var newX:Number;

		if( i <= current )
			newX = i * barWidth;
		else
			newX = photoWidth + ( i - 1 ) * barWidth;

		TweenLite.to( sp, 1,{ x: newX,ease:Expo.easeOut} );
	}
}

11. Inside the closePanels() function, we reposition each panel so that their visible part are of the same size.

function closePanels(e:MouseEvent):void{
	var sp:Sprite;
	barWidth = Math.ceil(stage.stageWidth/totalPhotos);
	for( var i:int = 0; i < accordion.numChildren; i++ ){
		sp = Sprite(accordion.getChildAt(i) );
		TweenLite.to( sp, .5, { x: i * barWidth } );
	}
}

12. Finally don’t forget to call the loadXML() function to make it work.
Here’s the final code.

import com.greensock.TweenLite;
import com.greensock.easing.*;

var xml:XML;
var folder ="photos/";
var totalPhotos:Number;
var photos:Array = new Array();
var photosLoaded:int = 0;
var current:Number = -1;
var accordion:Sprite
var photoWidth:uint;
var barWidth:Number;

loadXML( "datas.xml" );

function loadXML( file:String ):void{
	var xmlLoader:URLLoader = new URLLoader();
	xmlLoader.load(new URLRequest(file));
	xmlLoader.addEventListener(Event.COMPLETE,parseXML);
}

function parseXML(e:Event):void {
	xml = new XML( e.target.data );
	totalPhotos =xml.photo.length();
	loadPhotos();
}

function loadPhotos():void{
	for(var i:int = 0; i<totalPhotos; i++){
		var loader:Loader = new Loader();
		loader.load(new URLRequest(folder+ xml.photo[i]));
		photos.push(loader);
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);
	}
}

function onComplete(e:Event):void{
	photosLoaded++;
	if(photosLoaded == totalPhotos)
		createPanels();
}

function createPanels():void{
	accordion = new Sprite();
	addChild(accordion);

	for(var i:int = 0; i < photos.length; i++){

		var panel:Sprite = new Sprite();
		barWidth = Math.ceil(stage.stageWidth/totalPhotos);
		panel.x = i  * barWidth;

		var bm:Bitmap = new Bitmap();
		bm = Bitmap(photos[i].content);
		bm.smoothing = true;
		panel.addChild(bm);
		accordion.addChild(panel);

		if (i==0) photoWidth=panel.width;

		if (i==photos.length-1)
			addListeners();
	}
}

function addListeners():void{
	for(var i:int = 0; i < accordion.numChildren; i++){
		var sp:Sprite = accordion.getChildAt(i) as Sprite;
		sp.addEventListener(MouseEvent.ROLL_OVER, onPanelOver);
	}
	accordion.addEventListener(MouseEvent.ROLL_OUT,closePanels);
}

function onPanelOver(e:MouseEvent):void{
	var panel:Sprite = Sprite(e.target);
	current = accordion.getChildIndex(panel);

	barWidth = Math.ceil((stage.stageWidth - photoWidth) / (totalPhotos-1));

	for(var i :int = 0; i <accordion.numChildren; i++){
		var sp:Sprite = Sprite(accordion.getChildAt(i));
		var newX:Number;

		if(i <= current)
			newX = i * barWidth;
		else
			newX = photoWidth + (i-1) * barWidth;

		TweenLite.to(sp,1,{x: newX,ease:Expo.easeOut});
	}
}

function closePanels(e:MouseEvent):void{
	var sp:Sprite;
	barWidth = Math.ceil( stage.stageWidth / totalPhotos );
	for(var i:int = 0; i < accordion.numChildren; i++){
		sp = Sprite(accordion.getChildAt(i));
		TweenLite.to(sp,.5,{ x: i * barWidth});
	}
}