Apprenez à réaliser un preloader Flash multimédia, dans ce tuto Flash ActionScript de près de 3 heures (2h45 divisé en 17 vidéos). Vous verrez comment il est possible d'organiser un projet complet et comment utiliser des composants externes pour accroitre votre production.

Pour cela nous prendrons un exemple concret, la création (de A à Z) d'un preloader multimédia via le langage AS3 (de Flash CS5). Ce preloader bénéficie d'une multitude de réglages nous permettant par exemple de charger :

• Des images : jpg, jpeg, png, gif, JPG, JPEG, GIF
• Des fichiers audio : mp3, mp2, wav
• Des fichier flash: swf
• Des vidéos au format flv

En fonction des extensions, le preloder proposera différents type de réglages, un positionnement en x et en y, un centrage automatique pour le chargement d'images, de fichiers swf et vidéos et la possibilité de régler le volume et le nombre de boucles de lecture pour les fichiers audios et vidéos.

Sachez aussi que pour le chargement de vidéos, un lecteur possédant toutes les interactions standard liées à la lecture sera proposé (boutons : play, stop, pause,mute, fullScreen, slider de : volume et seek).Concernant l'interface du preloader, vous aurez la possibilité de choisir les couleurs des cubes de chargement, mais aussi celles des effets (lueurs et textes)

Le gros avantage de cette application se situe au niveau de sa mise en place, en effet pour charger l'ensemble de ces médias une seule ligne de code suffit  (l'ensemble des réglages y compris).

Pour vous en convaincre, voici l'exemple du chargement d'un fichier flv:

Comme vous pouvez le voir, aucune variable n'est à créer, ici nous utilisons des méthodes statiques facilitant l'instanciation de cette application.

Si vous le souhaitez, vous pouvez tester l'ensemble des modes de chargement en suivant ses adresses:

• preloaderMultimediaImage.swf
• preloaderMultimediaAnim.swf
• preloaderMultimediaAudio.swf
• preloaderMultimediaVideo.swf

Fonctionnalités du preloader multimédia:

• Un preloader au design soigné avec un déploiement animé
• Gestion multimedia : jpg,jpeg,png,gif,GIF,mp3,mp2,wav,swf,flv
• Paramétrage des couleurs du preloader et de ses effets
• Possibilité de modifier le volume et le nombre de boucles (fichier audio et vidéo)
• Possibilité de positionner les médias manuellement ou d'activer le centrage auto
• Mise en place et paramétrage simplifié
• Une gestion des erreurs avancées (découpe des erreurs, messages personnalisés, affichage dans l'application)
• Ensemble du preloader créé dynamiquement (carrés y compris)

Les grandes étapes de ce tuto Flash:

I°) Mise en place de l'interface :

• Création de l'interface (fichier fla) et paramètrage
• Mise en place du composant FLVPlayback 2.5
• Paramétrage du composant
• Récupération de la font choisie et liaison pour l'export

II°) Préparation du projet

• Mise en place des médias chargés pour les tests
• Mise en place des classes de mon framework (ViewError, returnError, DessineRect)
• Mise en place du dossier fonts contenant la police à Embeder

III°)Mise en place de la classe Precharg

• Mise en place de la structure de base (package, classe, constructeur)
• Ajout des imports (classés par package)
• Chargement de la police utilisé via le tag 'Embed'
• Mise en place de l'ensemble des variables et constantes du projet
• Mise en place des paramètres de réglage du preloader
• Test des paramètres et gestion de l'affichage des possibles erreurs de liaison
• Récupération du type de média en fonction des extentions récupérées
• Mise en place de la partie graphique (création des carrés et des conteneurs)
• Mise en place de la première tween pour le déploiement des carrés
• Création du texte de chargement et de son conteneur (utilisation de with)
• Lancement de la progression en fonction des médias chargés
• Paramètrage en fonction des médias (FLVPlayer>>skin, audio>>soundChannel>>soundTransform)
• Mise en place des écouteurs en fonction des médias
• Gestion de la progression (animation des carrés, gestion des couleurs et du texte de chargement)
• Mise en place de la fin du chargement replis du preloader (textes, carrés, lueurs, etc)
• Gestion des erreurs de chargement (gestion des id d'erreurs, affichage personnalisé)
• Suppression des éléments (utilisation de la méthode proposé par Grant Skiner(LocalConnection().connect('foo'))
• Gestion de l'affichage du média (en fonction des paramètres passés)

IV°) Instanciation du preloader

• Import de la custom classe dans le fichier fla conteneur
• Mise en place des exemples de chargement comprenant l'ensemble des médias gérés
• Utilisation de l'ensemble des paramètres proposés par notre classe.

V°) Débogage

• Nous allons corriger ensemble le projet et voir comment utiliser le panneau de sortie et d'erreurs de compilation. Nous verrons comment ces panneaux peuvent faciliter le débogage et nous faire gagner un temps précieux

VI°)Les fichiers sources proposés:

• Fichiers fla pour Flash CS4 et CS5
• Fichier swf pour flash CS4 et Cs5
• Classes de mon framework DessineRect, ViewError, ReturnError
• Classe Preloader
• Médias d'exemples pour les test (swf,mp3,mp2,wav,png,jpg,gif)
• Dossier font contenant l'ensemble des fonts du projet
• Skin du player utilisé (SkinOverAll.swf)
• Image d'aperçu de cette formation.
• Description de la formation (fichier txt)