Créer un diaporama pas à pas

Par lilive ( olivier tarasse ).

Voici une série de tutoriaux qui va traiter de la réalisation d'un diaporama en ligne avec flash, en actionscript 2 (AS2).
Par “diaporama”, on entend une application qui permet de visualiser une à une les photos d'un ensemble de photos, que nous appellerons album.
Par “en ligne”, on veut dire que le diaporama est consultable par une page web, que les photos sont également stockées sur le web, et que le diaporama les télécharge au fur et à mesure.

Nous allons pas à pas mettre en place une interface graphique qui affiche une photo, et propose à l'utilisateur les actions suivantes, citées dans l'ordre où nous les programmerons:

• Cliquer sur un bouton pour voir la photo suivante de l'album. Même chose pour la photo précédente.
  
• Faire défiler automatiquement les photos de l'album, à intervalle de temps régulier. Pouvoir stopper le défilement, le relancer.
  
• Pouvoir choisir la photo à afficher parmi un aperçu miniature de toutes les photos de l'album.
  

Nous commencerons très simplement, de façon à avoir rapidement un premier diaporama fonctionnel et très basique. Puis, au fur et à mesure, nous ajouterons les fonctionnalités citées plus haut, et les enrichissements courants d'un diaporama en ligne, à savoir les barres de progression du télé-chargement, des transitions en fondu-enchainé entre les photos, le défilement horizontal du bandeau contenant les miniatures, etc.

Au stade actuel d'écriture du tutoriel, le diaporama réalisé est celui-ci:

Au-delà de la réalisation d'un diaporama, ce tutoriel a pour but principal d'être une introduction très progressive à la programmation en ActionScript 2, accessible à des personnes qui n'ont jamais programmé. Il présente petit à petit les notions de ce langage, par la pratique. Les personnes qui ont déjà une pratique d'ActionScript, ou de programmation dans un autre langage, ne seront pas intéressées par de nombreux paragraphes, et devront trouver leurs chemins de traverse pour s'épargner l'explication de nombre de choses qui leurs sont déjà familières.

Il s'agit bien d'un tutoriel de programmation, et le diaporama sera essentiellement réalisé à l'aide de code. Il ne s'agira pas d'apprendre à utiliser Flash IDE, l'environnement de conception intégré d'Adobe. Vous pouvez suivre ce tutoriel aussi bien si vous utilisez Flash IDE que si vous utilisez une autre façon de créer vos animations flash, comme le duo mtasc/swfmill ou flashDevelop.

Si ce tutoriel vous pose des problèmes, si vous n'arrivez pas à comprendre quelque chose, si vous avez des remarques, des suggestions d'amélioration, merci beaucoup d'en faire part en ajoutant une réponse sur le forum aux sujets correspondants à la partie qui vous pose problème. Voici les liens vers les sujets en question: partie 1, 2, 3, 4, 5, 6, 7, 8, 9, 10.

Bonne lecture!

Cliquez sur ces liens pour accéder aux différentes parties:

1. Charger une image externe : Variables, MovieClip et loadMovie
2. Le bouton image suivante : Fonctions et évènement onPress
3. Améliorer la transition entre les images : MovieClipLoader et swapDepths
4. Transition en fondu entre les images : _alpha et onEnterFrame
5. Les barres de progression du téléchargement
   1. TextField et les méthodes de dessin
   2. onLoadStart et onLoadProgress
6. Pratique de débogage
7. Le préchargement des images
   1. this, tableaux et boucles for
   2. if ... else ...
   3. unloadClip, Boucle while et Valeur de retour d'une fonction
8. Le défilement automatique des images : Boutons, interrupteur, setInterval et clearInterval
9. Formater le texte et centrer les images : TextField, TextFormat, Polices, coordonnées de MovieClips et Rectangle
10. La barre des miniatures
    1. Création de la barre : blendMode, BitmapData

Pour finir, cet index permet d'accéder aux parties correspondantes aux différentes notions abordées.