When you want to create an animation to view your products, the flash player can give you a dynamic and excellent approach to achieving this. This little tutorial will show you the basics of creating an XML-based product viewer which can be reused by changing the content of the XML(of course). I refer to my post Loading external resources in Actionscript 3 in order to load images and How to load XML in Actionscript 3 before reading further. Below you will see the final result of the product viewer and the code to complete this tutorial.

Please download the full result to see the usage of components/symbols in the library.

The XML-structure is as follows:

package
{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.xml.XMLDocument;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.MouseEvent;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import caurina.transitions.Tweener;

public class MobileSelector extends MovieClip
{
private var imageHolder:Sprite;
private static var smallScale:Number 	= 0.7;
private static var normalScale:Number = 1.0;
private var num:int = 0;
private var _selected:int = 0;
private var currentSelected:Sprite;
private var leftButton:LeftButton;
private var rightButton:RightButton;
private var loader:URLLoader;
private var items:Array;

public function MobileSelector()
{
//create the holder for images and add images
imageHolder = new Sprite();

items = new Array();
this.addEventListener("onComplete", onComplete);

loader = new URLLoader();
loader.load(new URLRequest("http://flash.lillegutt.com/wp-content/uploads/mobile_selector_xml/SE_mobile.xml"));
loader.addEventListener(Event.COMPLETE, handleXMLLoaded);

imageHolder.y = 50;
imageHolder.alpha = 0;
addChild(imageHolder);

//prepare and add the left button
leftButton = new LeftButton();
leftButton.x = 10;
leftButton.y = (stage.stageHeight/2) - (leftButton.height/2);
leftButton.addEventListener(MouseEvent.CLICK, previous);
leftButton.alpha = 0.5;
addChild(leftButton);

//prepare and add the right button
rightButton = new RightButton();
rightButton.x = stage.stageWidth - rightButton.width - 10;
rightButton.y = (stage.stageHeight/2) - (leftButton.height/2);
rightButton.addEventListener(MouseEvent.CLICK, next);
addChild(rightButton);

//add keyboard events to stage
stage.addEventListener(KeyboardEvent.KEY_UP,checkKeyboardEvent);
}

public function onComplete(e:Event):void
{
setFocusedElement();
}

public function handleXMLLoaded(e:Event):void
{
var xml:XMLDocument = new XMLDocument();
xml.ignoreWhite = true;
xml.parseXML(loader.data);
for(var i:int = 0; i < xml.firstChild.childNodes.length; i++){
var o:Object = xml.firstChild.childNodes[i].attributes;
var item = new MobileItem(o.image, o.name, o.title, o.description);
if(i == 0)
item.addEventListener("onComplete", onComplete);
items.push(item);
addItemToStage(items[i], i*800, -1);
}

}

/*
* Animate to the next focused element
*/
public function setFocusedElement(){
if(currentSelected == null) {
currentSelected = imageHolder.getChildAt(_selected) as Sprite;
Tweener.addTween(currentSelected, {alpha:1, time:1, transition:"easeOut"});
}
else {
//Tweener.addTween(currentSelected, {scaleX:smallScale, scaleY:smallScale, time:1, transition:"easeOut"});
}
currentSelected = imageHolder.getChildAt(_selected) as Sprite;

Tweener.addTween(imageHolder,
{
x:(stage.stageWidth/2) - currentSelected.x - (currentSelected.width/2) ,
alpha:1,
time:1,
transition:"easeIn"
});
if(_selected == num-1)
rightButton.alpha = 0.3;
else if(_selected == 0)
leftButton.alpha = 0.3;
else
{
leftButton.alpha = 1;
rightButton.alpha = 1;
}
}

/*
* Handle the received keyboard event
*/
public function checkKeyboardEvent(e:KeyboardEvent) :void
{
if(e.keyCode == Keyboard.LEFT)
previous();
else if(e.keyCode == Keyboard.RIGHT)
next();
}

public function next(e:MouseEvent = null) :void
{
if(_selected+1 == num)
return;
_selected++;
setFocusedElement();
}
public function previous(e:MouseEvent = null) :void
{
if(_selected-1 < 0)
return;
_selected--;
setFocusedElement();
}

private function addItemToStage(item:MobileItem, x:Number, y:Number):void
{
var s:Sprite = item.getImage();
//get the ContentHolder from the library, which I created using design view
var info:ContentHolder = new ContentHolder();
info.x = 200;
//set the dynamic textfield with the content
info._name.text = item.getName();
//set the dynamic textfield with the content
info._title.text = item.getTitle();
//set the dynamic textfield with the content
info._description.text = item.getDescription();
s.addChild(info);
s.x = x;
s.y = y;
imageHolder.addChild(s);
num++;
}
}
}