Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Preloader uniforme (bibliothèques partagées)

Compatible ActionScript 2. Cliquer pour en savoir plus sur les compatibilités.

Le but est d'avoir un preloader uniforme, réutilisable à n'importe quel échelon de notre site. Ce concept peut être appliqué à n'importe quel type d'objet devant apparaître à différents endroits. Dans ce tutoriel, nous allons voir 2 choses :

  • La gestion simple d'un preloader (récapitulation)
  • La base des bibliothèques partagées

Avant tout, nous allons établir une structure de dossier afin de séparer les éléments dont nous aurons besoin tout au long des étapes :

  • ./classes : contiendra les classes
  • ./gfx : contiendra les éléments graphiques
  • ./swf : contiendra les fichiers externe à charger

Préparation des symboles

Nous allons commencer par créer un preloader basique : une simple barre qui nous indiquera l'avancement du chargement. Pour cela, dans le répertoire ./swf, créez le fichier preloader.fla puis construisez les élément suivant sur votre scène principale :

  • un champ de texte ayant comme nom d'occurence label. Il nous servira à afficher un texte d'information afin de connaître le contenu étant chargé.
  • une barre de preload (un clip) don le nom est loadBar. Créez-la telle qu'elle sera lorsque le chargement sera effectué 100%

Lorsque ces 2 éléments sont créés, mettez-les dans un clip et effacez-le de la scène. Ensuite, ouvrez la bibliothèque, faites un click droit sur le clip qui contient votre preloader et sélectionnez Linkage… (Liaison). Dans la fenêtre qui s'ouvre, entrez les données suivantes :
bibliotheques_partagees.jpg
Maintenant votre clip est lié et peut être utilisé comme symbole de bibliothèque partagée. Cela signifie que si vous faite une modification dans votre ./swf/preloader.fla, tous les autre swf utilisant ce symbole seront automatiquement modifiés !
Maintenant, pour des raisons de souplesse, toujours dans preloader.fla, créez un clip vide que vous nommerez link_loader. Dans la fenêtre de liaison, cochez les mêmes cases que précédemment et ne touchez à rien d'autre. Pourquoi ce clip ? C'est lui que l'on va utiliser pour lier notre librairie aux autres swf !

Classe Preloader

La gestion du preloader s'effectue par la classe ./classes/Preloader dont voici la structure ci-dessous :

class Preloader
{
	//----------//
	//Constantes//
	//----------//
	public static var PRELOADER_LINK:String = "preloader"; //nom de liaison du clip
	public static var TIME_INTERVAL:Number = 2; //interval de vérification
	public static var LABEL_NAME:String = "label"; //nom du textfield pour le label
	public static var LOADBAR_NAME:String = "loadBar"; //nom du clip de la barre de preload
 
	//---------//
	//Variables//
	//---------//
	private var _clip:MovieClip; //clip ustilisé pour le preloader
	private var _isLoading:Boolean; //indique si le preloader est déjà en train de charger
	private var _init:Number; //initialisation de la taille de la barre de loading
	private var _interval:Number; //interval utilisé
	private var _clipLoaded:MovieClip; //clip en cours de chargement
	private var _destroyAfterLoading:Boolean; //si le preloader doit etre détruit après le loading
 
	public var onLoadComplete:Function; //fonction appelée lorsque le chargement est terminé
 
	//------------//
	//Constructeur//
	//------------//
	public function Preloader(where:MovieClip, depth:Number)
 
	//------------------//
	//Méthodes publiques//
	//------------------//
	public function getClip(Void):MovieClip
	public function setLabel(label:String):Void
	public function getLabel(Void):String
	public function isLoading(Void):Boolean
	public function destroy(Void):Void
	public function listen(clip:MovieClip, destroy:Boolean):Void
 
	//----------------//
	//Methodes privees//
	//----------------//
	private function update(Void):Void
}

Afin de vous rafraîchir la mémoire, passons rapidement sur les 2-3 méthodes intéressantes de cette classe ! Pour commencer le constructeur. Il se charge uniquement d'initialiser le clip. Il va donc le “poser” sur la scène via un attachMovie. Voici le code détaillé :

/**
	* Créer une nouvelle instande de Preloader dans le clip spécifié
	*
	* @param	where	Le clip ou le preloader doit etre créer
	* @param	depth	La profondeur du clip. Si aucune profondeur n'es sécifiée, la
	* 					méthode getNextHighestDepth sera utilisée.
	* @throws	Error	Si where est indéfini
	* @throws	Error	Si le clip de liaision n'existe pas (attachMovie invalide)
	*/
	public function Preloader(where:MovieClip, depth:Number)
	{
		//on teste si where est défini
		if (!where)
		{
			//si ce n'est pas le cas, on balance une erreur
			throw new Error("Preloader.<init> : where:MovieClip n'est pas défini");
		}
 
		//on teste si une profondeur est définie
		if (!depth)
		{
			//si non, alors on récupère la prochaine profondeur libre
			depth = where.getNextHighestDepth();
		}
 
		//et finalement on créer notre clip
		_clip = where.attachMovie(Preloader.PRELOADER_LINK, "preloader"+depth, depth);
		_isLoading = false;
		_init = _clip[Preloader.LOADBAR_NAME]._width;
		_interval = null;
		_clipLoaded = null;
		_destroyAfterLoading = null;
 
		//on check la liaison
		if (!_clip)
		{
			throw new Error("Preloader.<init> : nom de liaison invalide !");
		}
	}

Vient ensuite la méthode d'écoute du chargement du clip (listen). Cette méthode lance un interval qui va vérifier les données chargées et faire progresser la barre de chargement en fonction du nombres de bytes chargés. D'autre part elle nous permet de définir un paramètre destroy indiquant si le clip de preload doit être détruit à la fin du chargement. Voici le code détaillé avec la méthode update qui va avec :

/**
	* Ecoute une donnée à charger. Afin de fonctionner correctement, la méthode
	* loadMovie de clip devrait être appelée avant cette méthode.
	*
	* @param	clip	Un movieclip à écouteur
	* @param	destroy	Un booléan indiquant si le preloader doit être détruit lorsque
	*					le chargement est terminé. Par défaut cette valeur est false
	* @throws	Error	Si clip est indéfini
	* @throws	Error	Si un autre clip est déjà en cours de chargement
	*/
	public function listen(clip:MovieClip, destroy:Boolean):Void
	{
		//on vérifie l'existence du clip
		if (!clip)
		{
			throw new Error("Preloader.listen : clip:MovieClip n'est pas défini !");
		}
 
		//on vérifie si on est pas en train de charger un autre clip
		if (_isLoading)
		{
			throw new Error("Preloader.listen : ce preloader charge déjà un autre clip !");
		}
 
		//on check la valeur de destroy
		if (!destroy)
		{
			destroy = false;
		}
 
		//on est en train de charger
		_isLoading = true;
		_clipLoaded = clip;
		_destroyAfterLoading = destroy;
 
		//boucle de chargement
		_interval = setInterval(this, "update", Preloader.TIME_INTERVAL);
 
		//et on appelle directement la méthode upate
		update();
	}
 
	/**
	* Méthode appelée par le set interval pour mettre à jour
	* le preloader
	*/
	private function update(Void):Void
	{
		//récupération & calcul des données
		var loaded:Number = _clipLoaded.getBytesLoaded();
		var total:Number = _clipLoaded.getBytesTotal();
		var ratio:Number = loaded/total;
 
		//on modifie la barre de preloader
		_clip[Preloader.LOADBAR_NAME]._width = _init*ratio;
 
		//on vérifie si le loading est terminé
		if (ratio == 1)
		{
			//on vérifie que le clip est bien arrivée dans flash
			if (_clipLoaded._currentframe >= 1)
			{
				//okay on arrete le loading ici !
				clearInterval(_interval);
 
				//on ne charge plus !
				_isLoading = false;
 
				//on check si on doit destroyer
				if (_destroyAfterLoading)
				{
					destroy();
				}
 
				//et on dispatch l'évènement
				this.onLoadComplete(_clipLoaded);
			}
		}
	}

Et voila ! Notre preloader est prêt à fonctionner, passons directement à la suite.

Utilisation de la bibliothèque partagée

Avant tout, notez que tous les fichiers qui utiliseront le preloader devront être chargés par index.fla ou tout autre fla placé au même niveau ! Cela est du au chemin de liaison (.swf/preloader.swf) que nous avons mis dans le champs approprié. Notez que vous pouvez aussi l'utiliser dans des autres fichiers, du moment que le _root se rapport à un fla situé au niveau de ./index.fla ! Sachez aussi qu'il ne suffit pas de charger le fichier .swf/preloader.swf via un loadMovie pour pouvoir l'utiliser ! Mais la manoeuvre est très simple : dans ./index.fla ouvrez la bibliothèque de .swf/preloader.fla et glissez le clip link_loader sur la scène de ./index.fla et hop ! la liaison est faite ! Vous pourrez maintenant utiliser sans restriction le preloader dans ce fichier.
Notez que vous pouvez glisser n'importe lequel des 2 clips (link_loader ou preloader) sur votre scène. Tous les fla (même dans les sous-dossiers) devront utiliser cette technique afin de pouvoir utiliser le preloader. Le clip link_loader étant vide, vous n'aurez rien de visible par l'utilisateur sur votre scène.

Utilisation

Pour utiliser le preloader, c'est très simple :

//on créer le preloader
var pr:Preloader = new Preloader(this, 1);
var cl:MovieClip = this.createEmptyMovieClip("test", 0);
 
//lorsque le chargement est fini
pr.onLoadComplete = function(c:MovieClip):Void
{
	trace(c+" a été chargé !");
}
 
//on écoute le chargement du root
cl.loadMovie("url.swf");
pr.setLabel("Main...");
pr.listen(cl, true);

Conseils

Il se peut que votre preloader soit lourd (>= 10ko) et de ce fait, long à charger ! Avec cette technique, vous n'avez pas la contrainte “exporter sur la 1ère frame” dans vos animations utilisant le preloader par contre, dès que l'animation rencontrera un des clips lié sur la scène (link_loader ou preloader) et que .swf/preloader.swf n'a pas été au préalablement loadé, l'animation va se stopper afin de charger le fichier ! Afin d'éviter ce genre de problème, faites un loader du preloader.
Pour ce faire, il vous suffit de loader .swf/preloader.swf dans un clip sur la 1ère frame et faire un rapide preloader dessus, puis de le supprimer (le swf sera gardé en cache donc plus de souci) et votre preloader sera chargé pour tous les autres fichiers l'utilisant ! Pensez à jeter un oeil à cette astuce !

Sources

Vous pouvez télécharger les sources ici.

Liens

Note

Ce tutoriel s'inspire du site de roikku. Merci à lui !
Pour toutes vos questions/remarques/critiques, c'est ici !