Dans ce tutoriel, nous allons voir comment réaliser un slideshow simple, en utilisant les tweeners pour les animations, et un timer pour les changements d'images.
Notre slideshow prendra en paramètre un fichier xml, dans lequel apparaitront les informations à afficher.

Ce tutoriel n'est pas là pour vous donner le code source, mais plutôt pour donner les bases pour la réalisation. Nous ne verrons pas en détail toute les classes, mais seulement les parties les plus importantes.

Pré-requis

Pour les animations, nous allons utiliser la librairie TweenerHX. Pour l'installer, plusieurs moyens.
Soit directement via haxelib : 
haxelib install TweenerHX
Soit en allant récupérer les sources sur le site.

Structure du fichier XML

Chaque slide prendra comme paramètre : une image, un titre et un texte. Le titre et le texte étant optionnels. 

                       
    First photo                 
    slide2.jpg 
    Description
  
                       
    2 photo                 
    slide3.jpg 
    Description 2

Chargement des données

Pour le chargement de notre fichier XML, nous allons utiliser la classe ChargeurXML dont voici le contenu : 
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.events.HTTPStatusEvent;
import flash.events.SecurityErrorEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.URLLoaderDataFormat;
import flash.net.URLRequestHeader;
import flash.xml.XML;

class ChargeurXML extends EventDispatcher {
	private var chargeur : URLLoader;
	private var fluxXML : XML;
	private var antiCache : Bool;	

	public function new(?pAntiCache:Bool = false) {
		super();
		chargeur = new URLLoader();
		chargeur.dataFormat = URLLoaderDataFormat.TEXT;
		chargeur.addEventListener(Event.OPEN, redirigeEvenement);
		chargeur.addEventListener(ProgressEvent.PROGRESS, redirigeEvenement);
		chargeur.addEventListener(Event.COMPLETE, chargementTermine);
		chargeur.addEventListener(HTTPStatusEvent.HTTP_STATUS, redirigeEvenement);
		chargeur.addEventListener(IOErrorEvent.IO_ERROR, redirigeEvenement);
		chargeur.addEventListener(SecurityErrorEvent.SECURITY_ERROR, redirigeEvenement);
	}

	private function redirigeEvenement(evt:Event):Void {
		dispatchEvent(evt);
	}

	public function charge (pRequete:URLRequest):Void {
		if (antiCache)
			pRequete.requestHeaders.push( new URLRequestHeader("pragma", "no-cache"));
		chargeur.load(pRequete);
	}

	public function chargementTermine(evt:Event):Void {
		try {
			fluxXML = new XML(evt.currentTarget.data);
		} catch (pErreur:String ) {
			trace(pErreur);
		}
		dispatchEvent(evt);
	}	

	public function donnees():XML {
		return fluxXML;
	}

}
Nous pouvons maintenant récupérer nos données en instanciant cette classe et en écoutant l'évènement de fin de chargement.
_chargeur = new ChargeurXML();
_chargeur.addEventListener(Event.COMPLETE, onXmlComplete);
_chargeur.charge(new URLRequest("test.xml"));
Pour parser le xml, nous allons utiliser les classes flash.xml.XML et flash.xml.XMLList, pour chaque slide, nous allons instancier notre classe Slide qui ne fait que stocker les données : 
import flash.events.EventDispatcher;
class Slide extends EventDispatcher {
	private var _title : String;
	private var _img : String;
	private var _content : String;

	public function new(title:String, img:String, content:String):Void {
		super();
		_title = title;
		_img = img;
		_content = content;
	}
	
	public function getImage():String {
		return _img;
	}
}
Chaque slide va être stocké dans un tableau pour permettre de connaitre les éléments à afficher.

private function onXmlComplete(evt:Event):Void {
	_listSlide = new Array();
	_currentId = 0;

	var data : XMLList = _chargeur.donnees().slide;
	var content : XML;
	var slide : Slide;

	for (i in 0...data.length()) {
		content = data[i];
		slide = new Slide(content.titre.toString(), content.img.toString(), content.content.toString());
		_listSlide.push(slide);
	}

Puis nous instancions notre timer pour que l'image change toute les 10 secondes
	_timer = new Timer(10000);
	_timer.addEventListener(TimerEvent.TIMER, onTimerComplete);
	loadElement(); // chargement de la premiere image
}

Affichage des données

Maintenant que nous avons toutes nos données, nous pouvons commencer à les afficher.
Tout d'abord, nous devons lancer le timer, qui nous permettra de charger la prochaine image.
private function loadElement():Void {
	_timer.start();	
	_conteneurImage = new Loader();
	var image:URLRequest = new URLRequest(_listSlide[_currentId].getImage());
	_conteneurImage.load(image);
	_conteneurImage.alpha = 0;
	addChild(_conteneurImage);

Pour ce qui est des animations, nous allons faire quelque chose de simple, c'est à dire rendre l'image opaque. C'est pour cela que nous avons fixé son opacité à 0.
La fonction statique addTween() de la classe Tweener prend en paramètre le nom de la classe qui va prendre les changements, puis un objet de type Dynamic avec des paramètres additionnels, comme par exemple dans notre cas :
  • L'opacité finale
  • Le type de transition souhaité (pour plus d'informations)
  • Le temps nécessaire à l'animation
  • Et bien d'autres
Et pour être sûr qu'il n'y ai pas de conflit, nous stoppons également toutes les animations en utilisant la fonction pauseAllTweens()

	Tweener.pauseAllTweens();
	Tweener.addTween( _conteneurImage, { alpha:1, transition:"easeOutCubic", time:1.5 } );
}

Changement d'image

Il ne nous reste plus qu'à définir notre fonction qui va charger l'image suivante. Cette fonction se déclenchera dès que notre timer se terminera.
Cette fonction va gérer le déchargement de l'objet d'affichage, et du numéro du prochain slide à charger.
private function onTimerComplete(evt:TimerEvent):Void {
	removeChild(_conteneurImage);
	if (_currentId + 1 >= _listSlide.length) _currentId = 0;
	else _currentId++;	
	loadElement();
}