Loader movies : les animations
"amorce"
Tant que tout le monde n'a pas un modem ultra-rapide, vous devez faire
attention à la taille de vos animations Shockwave. Macromedia vous
offre plusieurs possibilités pour réduire la taille d'une
animation donnée :
- utiliser des images vectorielles
- compresser les images bitmap et les sons
- créer et manipuler des images à la volée
- diviser votre projet en plusieurs petites animations
- télécharger des distributions externes qui peuvent servir
pour plusieurs animations
- ...
Dans tous ces cas il y a question d'un compromis : vous réduisez
le temps de téléchargement mais vous réduisez également
la qualité ou la réactivité. Parfois, créer
une grosse animation est votre seule option. Comment donc convaincre les
utilisateurs potentiels de l'intérêt de la télécharger
?
Une solution est de vous servir d'une "loader movie", une animation
amorce. Une toute petite animation, l'amorce se charge très vite
sur le disque dur de votre utilisateur, puis l'occupe pendant que votre
animation principale se charge en tâche de fond.
Afficher la progression
Dans un monde idéal, l'animation amorce fait partie intégrante
de l'expérience que vous voulez donner à l'utilisateur.
Dans le monde réel, l'utilisateur comprend tout de suite qu'il
ne s'agit que d'une subterfuge pour le faire patienter. Il est donc courtois
de lui indiquer la progression du téléchargement de l'animation
principale. Vous pouvez faire cela de deux manières : par
un affichage texte du style "X% de Y Ko téléchargé",
ou par une barre de progression.
Lorsque l'animation principale est disponible, vous devrez faire un choix :
vous pouvez passer immédiatement à l'animation principale
sans l'avis de l'utilisateur, ou vous pouvez donner à l'utilisateur
la possibilité de changer d'animation quand il sera prêt.
Démonstration
Ouvrez l'animation Shockwave de démonstration.
Elle ne pèse que 16 Ko, et se charge très vite. Elle appelle
aussitôt une autre animation : "grosseAnimation.dir".
En fait, pour ne pas monopoliser votre modem pour la démonstration
celle-ci ne pèse que 24 Ko. A vous de la remplacer par une autre,
autrement plus lourde.
Si votre connexion est lente, une barre de progression et des détails
textuels vous informent, au fur et à mesure, de l'état de
téléchargement. Dès que la deuxième animation
est chargée dans un cache sur votre disque dur local, le bouton
"Démarrer" de l'animation amorce devient actif.
Les cinq comportements
L'animation de démonstration utilise cinq comportements interdépendants :
- Précharger animation
- Etats souris
- Go to net movie
- Afficher flux
- Afficher URL en cours de téléchargement
Les trois premiers comportements sont attachés à la même
image-objet, qui représente un bouton avec le texte "Démarrer".
Le comportement "Précharger animation" démarre
le téléchargement, puis informe les deux suivants lorsque
le téléchargement se termine avec succès. Le comportement
"Etats souris" affiche différents états pour le
bouton : inactif, standard, survol et activé. Il bloque aussi
les événements #mouseUp tant que le bouton
n'affiche pas son état actif. Le comportement "Go to net movie"
attend la fin du préchargement avant de permettre à l'utilisateur
de sauter à l'animation principale. Le comportement "Etats
souris" n'est donc pas essentiel. Si vous le retirez, le bouton fonctionnera
quand même dès la fin du téléchargement. Par
contre, il n'y aura aucune indication visuelle que le bouton est devenu
actif.
Les deux autres comportements permettent de afficher une barre de progression
ainsi que du texte qui donne des détails sur l'url et l'état
du téléchargement. "Afficher flux" est utilisé
sur deux images-objets ; celle avec un acteur Forme (#shape)
affiche une barre de progression, celle avec un acteur Champ (#field)
affiche le pourcentage du fichier déjà chargé. "Afficher
URL en cours de téléchargement" s'occupe d'afficher
le nom de l'URL dans un acteur Champ. Une fois le téléchargement
terminé, le nom de l'URL est effacé.
Je ne vais pas décrire les scripts en détail : le
code source est bien commenté. Il suffit de sauvegarder l'animation
non protégée "amorcer.dir"
(88 Ko) sur votre disque dur, puis de l'ouvrir dans Director. (Cliquez
sur le lien avec le bouton droit sur PC, ou cliquez et gardez appuyé
sur Mac : dans le menu contextuel qui apparaît, choisissez
"Enregistrer le cible sous...", ou semblable).
Personnaliser
Vous pouvez personnaliser l'animation, sans modifier les comportements.
Si vous le souhaitez, vous pouvez également étudier les
comportements pour découvrir comment ils fonctionnent. Vous verrez
que les comportements sont assez généralistes. Vous pouvez
donc diminuer encore la taille de l'animation, en retirant toute ligne
de code qui n'est pas essentielle pour votre animation.
N'oubliez pas de sauvegarder votre animation finale en format Shockwave
: pour l'exemple utilisé ici, la taille de l'animation Shockwave
est moins de 20% de la taille de l'animation non compressée. Le
téléchargement se fait alors plus de 5 fois plus vite.
Simili-streamStatus
J'ai inclus un Script Parent nommé "Simili-streamStatus".
Pour tester la barre de progression hors ligne, changez le type de Script
en "Script d'animation" (#movie). Ainsi, vous interceptez
les appels à trois gestionnaires natifs de Director : getStreamStatus(),
netDone() and netError(). En ligne, cela n'a
pas de sens. Mais simuler le téléchargment d'un fichier
sans vous connecter à Internet peut être utile. Vous pouvez
alors apporter des modifications et tester leur effet sans vous soucier
du coût d'une communication téléphonique. Une fois
vos comportements bien réglés, reconvertissez le script
"Simili-streamStatus" en Script Parent, ou supprimez-le complètement.
A vous de jouer
Il ne vous reste qu'à ajouter une activité simple qui occupera
l'utilisateur en attendant que l'animation principale se charge.
Bon courage.
|
