Publication

Publication
12
Avant de finaliser la diffusion de votre animation, ce qui dans le vocabulaire Flash s’appelle publier,
il faut tester, notamment évaluer les performances de l’animation vis-à-vis de différents débits de
connexion. En effet, la forme la plus naturelle de publication est celle qui la rend lisible dans un navigateur. Dans ce cas, de nombreux paramètres régissent l’intégration avec le contenu HTML. Il faudra
également s’assurer de la présence d’une version minimum du lecteur Flash sur la machine cible.
La suite CS4 permet désormais l’ajout de métadonnées à votre animation, informations qui joueront
à l’avenir un rôle important en matière de référencement du site auprès des moteurs de recherche.
Publier sur d’autres supports que la Toile est également envisageable. Flash permet depuis longtemps
la publication d’une projection, gravable sur un disque amovible. La version CS4 offre désormais
la publication pour le Bureau, à destination de AIR, autrement dit la possibilité que votre animation
s’exécute sur un ordinateur en dehors de tout navigateur, comme n’importe quelle autre application.
Flash vous permet enfin d’exporter des images ou des séquences d’images de votre animation.
12.1
Tester une animation
Erreur de fonctionnement, cahier des charges, documents d’analyse et de conception, chartes graphique et
fonctionnelle, fichier SWF, lecteur Flash, publier, fichier HTML, aperçu de publication, transférer sur un serveur,
téléchargement, fichier JavaScript, feuille de style externe, données XML, image bitmap externe, animation
secondaire externe, audio externe, vidéo externe, panneau Projet, testeur de bande passante, fluidité de
la lecture, débit de téléchargement, débit théorique descendant, seuil de flux, latence de téléchargement,
simuler le téléchargement
12.1.1
Les tests en général
Vous testez votre animation. Elle fonctionne comme vous le souhaitez. Vous la sophistiquez, puis
refaites un test. Une erreur de fonctionnement apparaît. Nécessairement, la cause de l’erreur réside
dans ce que vous avez fait depuis le dernier test. Dès lors que vous vous êtes suffisamment imprégné
de cette réalité, une autre évidence s’impose, pratique celle-la : plus vous testerez souvent et plus il
vous sera facile de cerner la cause d’une erreur. Testez tôt. Testez souvent. Prenez la saine habitude
de toujours sauvegarder avant de tester : on est parfois surpris de l’ampleur des erreurs que l’on
produit…
Au plus simple, le test se fait au jugé. Vous vérifiez que votre animation a bien l’apparence attendue
et fonctionne comme prévu. Dans une chaîne de production plus structurée – et notamment dans le
cadre d’un travail en équipe –, en amont de la réalisation, le projet aura fait l’objet de toutes sortes de
documents : cahier des charges, documents d’analyse et de conception, chartes graphique et fonctionnelle. Tester consistera alors à vérifier la conformité à ces documents préparatoires.
Nous avons évoqué à la section 4.1.3 les moyens de prévisualiser une animation. Il s’agissait d’animation au sens propre. S’agissant ici d’animation Flash au sens plus large d’application Flash, lancer
© 2009 Pearson Education France – Flash CS4 – Gil Mathieu
Flash.indb 429
22/09/09 16:18
430
Flash CS4
Raccourci
l’animation dans l’environnement de réalisation (Contrôle > Lire) ne suffit pas. Il faut générer le
fichier SWF et faire lire celui-ci par le lecteur Flash (une version de ce dernier fait partie de l’installation de Flash sur votre ordinateur). Utilisez pour cela la commande Contrôle > Tester l’animation.
CMD+RETOUR (Mac) ou CTRL+ENTRÉE (Windows) lance le lecteur Flash intégré afin de tester l’animation.
Une fois que votre animation s’exécute dans le lecteur Flash intégré, la barre des menus de l’application s’est modifiée. Outre les habituels menus Flash, Fichier, Modifier, Fenêtre et Aide, vous ne
disposez plus que de trois menus spécifiques : Affichage (voir Figure 12.1.e), Contrôle et Déboguer.
Nous ne dirons rien ici sur ce dernier menu (voir section 11.3.3). Comme le montre le menu Contrôle,
reproduit Figure 12.1.a, le fichier SWF est lu en boucle par défaut.
Figure 12.1.a
Raccourci
Le menu Contrôle
du lecteur Flash.
Dans le lecteur Flash intégré, RETOUR (Mac) ou ENTRÉE (Windows) arrête ou relance la lecture. MAJ+,
rembobine et , (la virgule) ne recule que d’une seule image. Pour l’avance d’une image – contrairement à
ce qu’indique le menu Contrôle – le raccourci clavier est ; (le point-virgule) sous Windows (sur Mac, ni le
point, ni le point-virgule n’ont d’effet).
Le lecteur Flash est un premier niveau de test. Le second consiste à publier. Dans la plupart des
cas, votre animation est destinée à une relecture sur la Toile. Dans ce cas, la publication va produire
comme précédemment un fichier SWF, mais également le fichier HTML qui va y faire appel (voir recette 12.3). La Figure 12.1.b reproduit le menu Fichier > Aperçu avant publication (commande qui devrait s’intituler Aperçu de publication, puisqu’avant d’avoir un aperçu, il faut bien publier !). Le plus
simple est de faire appel à sa première commande : Par défaut - (HTML). Aperçu signifie qu’après
la publication, le logiciel adéquat est lancé pour visualiser le résultat. S’agissant ici de HTML, le
navigateur par défaut se lance pour que vous puissiez tester votre animation. La commande Fichier >
Publier est une alternative. Elle est moins pratique, au sens où c’est ensuite à vous d’ouvrir le fichier
HTML dans un navigateur.
Figure 12.1.b
Le menu Fichier >
Aperçu de publication.
© 2009 Pearson Education France – Flash CS4 – Gil Mathieu
Flash.indb 430
22/09/09 16:18
Raccourci
Publication
431
CMD+F12 (Mac) ou CTRL+F12 (Windows) lance l’aperçu de publication.
Aux deux premiers niveaux de test précédents, vous êtes resté en local sur votre ordinateur. Le troisième niveau de test consiste à transférer tous les fichiers nécessaires à votre animation sur le serveur
et à tester le comportement de votre animation en téléchargement. Vous ferez vous-même les premiers
tests, puis quand vous serez satisfait du résultat, vous ferez tester par différentes personnes.
Les fichiers à transférer seront au moins le fichier SWF et le fichier HTML qui l’appelle. Dans
l’exemple de la Figure 12.1.c, il s’agit respectivement de accueil.swf et de index.html. Mais souvent,
il y a d’autres fichiers à transférer. La publication peut générer un fichier JavaScript. L’exemple de la
Figure 12.1.c a été publié sous Flash CS3 et comprend un fichier AC_RunActiveContent.js (sous Flash
CS4, il est possible de se passer de ce fichier). Enfin, votre application fera souvent usage de données
externes au SWF. Dans l’exemple de la Figure 12.1.c, on trouve un feuille de style externe (stephanie.
css), des données XML (spectacles.xml) et des images bitmap organisées en trois sous-dossiers. Vous
pourriez également avoir des animations secondaires externes (d’autres fichiers SWF), de l’audio ou
de la vidéo (au format FLV, par exemple).
Figure 12.1.c
Les fichiers d’une
animation finalisée à
transférer sur le serveur.
Pour un projet conséquent comme celui de la Figure 12.1.c, impliquant de nombreux fichiers, vous
aurez défini un fichier de projet (voir recette 1.3). Le panneau Projet, reproduit en partie gauche de
la Figure 12.1.d, donne une autre vision des fichiers de l’exemple précédent. En y sélectionnant le fichier accueil.fla et en appelant dans le menu contextuel (reproduit en partie droite de la même figure),
la commande Transformer en document par défaut, l’icône du fichier s’est ornée d’une étoile. D’un
simple clic en bas, sur le bouton Tester le projet, tous les fichiers du projet sont publiés et celui désigné
comme document par défaut est ouvert. Dans le cas de l’exemple, c’est accueil.swf qui est ouvert dans
le lecteur Flash, mais il serait aussi possible de transformer index.html en document par défaut pour
lancer l’animation dans le navigateur.
Figure 12.1.d
Le panneau Projet et
son menu contextuel.
© 2009 Pearson Education France – Flash CS4 – Gil Mathieu
Flash.indb 431
22/09/09 16:18
432
Flash CS4
12.1.2
Simuler le chargement de l’animation
Avant de transférer les fichiers pour procéder à un test en vraie grandeur de votre animation, vous pouvez vous faire une idée de son comportement au téléchargement grâce au testeur de bande passante
qui donne des éléments d’évaluation et permet d’en faire une simulation.
Essayons de prendre conscience du challenge auquel le lecteur Flash est confronté. La lecture d’une
animation démarre dès que les données de la première image sont chargées. Imaginons que vous ayez
conservé la cadence par défaut de 24 I/S. Cela signifie que pour que cette cadence soit respectée,
le lecteur Flash doit impérativement mettre moins d’une seconde à charger les données des 24 prochaines images à rendre. Ceci ne pose aucun problème tant que votre animation ne contient que du
graphisme vectoriel et du texte. Par contre, dès que des éléments plus lourds entrent en jeu (composants, images bitmap, audio, vidéo), la fluidité de la lecture risque d’être rompue. En effet, tant que les
données d’une image de l’animation ne sont pas entièrement téléchargées, le lecteur Flash est obligé
de suspendre la lecture.
Flash vous offre la possibilité de simuler la lecture d’une animation à différents débits de téléchargement. Ce débit, choisissez-le dans le sous-menu Affichage > Paramètres de téléchargement, reproduit
à la Figure 12.1.e.
Le sous-menu visible Figure 12.1.e a été personnalisé grâce à la boîte de dialogue qui s’ouvre lorsque
vous sélectionnez tout en bas Personnaliser. On y a mis une gamme de débits plus en phase avec ceux
couramment rencontrés aujourd’hui que ceux du sous-menu par défaut. Lorsque votre fournisseur
d’accès vous loue une “connexion 8 Méga”1, cela signifie que le débit théorique – descendant, c’està-dire pour télécharger des données sur votre ordinateur – est de 8 Mbits/s = 8 × 1 024 × 1 024 bits/s.
Comme son nom l’indique, un octet correspond à 8 bits. Il faut donc diviser par 8 pour obtenir 1 024 ×
1 024 = 1 048 576 octets/sec. Pour compliquer les choses, lorsque vous validez et que vous revenez
au sous-menu, la valeur de débit est indiquée entre parenthèses en Ko/s, donc divisée par 1 024, ce qui
donne 8 Méga (1024 Ko/s).
Figure 12.1.e
Le menu Affichage
du lecteur de test.
1. 8 Méga ne correspond pas à 8 Mo, mais à un débit de 8Mb/s (b pour bits), ce que les commerciaux des FAI
appellent “du 8 Méga”, avec sans doute l'arrière-pensée commerciale qu’utiliser les Mb/s au lieu des Mo/s cela
donne des nombres 8 fois plus grands, donc que cela impressionne plus le client.
© 2009 Pearson Education France – Flash CS4 – Gil Mathieu
Flash.indb 432
22/09/09 16:18
Publication
433
Figure 12.1.f
La boîte de dialogue
Personnaliser les
paramètres de
téléchargement.
Pour évaluer a priori le téléchargement de votre animation, demandez comme précédemment
Contrôle > Tester l’animation et lorsque le lecteur Flash est lancé, cochez Affichage > Testeur de
bande passante. Le testeur de bande passante s’affiche au-dessus de la scène. Comme le montre les
Figures 12.1.g et 12.1.h, sa partie gauche donne un ensemble d’informations dans la rubrique Animation : les dimensions de la scène, la cadence spécifiée dans le scénario, la taille globale du fichier,
la durée de l’animation en nombre d’images et en secondes. Dans la rubrique Paramètres, la bande
passante sélectionnée pour le test est rappelée (en octets/s cette fois-ci, pourquoi faire simple…).
L’information décisive pour l’évaluation se trouve en dernière ligne de la rubrique Animation : Préchargement. Il s’agit de la durée en nombre d’images et en secondes qui sera nécessaire pour télécharger un fichier de cette taille, en fonction de la cadence spécifiée et de la bande passante disponible.
Ainsi, dans l’exemple du haut des Figures 12.1.g et 12.1.h, la bande passante testée est celle du bas
débit, c’est-à-dire d’un modem 56k (4,7 Ko/s). On voit que l’animation ne sera pas lisible dans ce
type de configuration : elle fait 546 images (30,3 s) et son préchargement nécessiterait 960 images
(53,3 s). Par contre, si l’on refait le test pour une connexion haut débit, courante de nos jours, 8 Méga
(1 024 Ko/s) – test reproduit en bas des Figures 12.1.f et 12.1.g –, on constate que dans ce type de
configuration le préchargement ne nécessiterait plus que 3 images (0,2 s), ce qui devient raisonnable.
La partie droite du testeur de bande passante est un graphique temporel pour visualiser le coût de téléchargement. Vous avez les choix entre deux modes d’affichage : Affichage > Graphique de lecture en
continu (exemple Figure 12.1.g) ou Affichage > Graphique image par image (exemple Figure 12.1.h).
Dans le premier mode, on voit en haut de la Figure 12.1.g que la zone inférieure est grisée et si l’on
faisait défiler horizontalement, on constaterait que cette zone grisée s’étend au-delà de la dernière
image du scénario, ce qui pose pour le moins problème. En bas de cette même figure, on constate de
visu que le téléchargement de toutes les données est fait en trois images.
Dans le mode image par image, la taille des ressources qu’il est nécessaire de télécharger pour chaque
image du scénario est reportée sous forme d’une colonne grise. En bas du graphique, une ligne rouge
dite seuil de flux représente le seuil en deçà duquel la lecture en continu se déroulera sans nuire à la
fluidité. S’il existe une quelconque image dont la colonne grise dépasse le seuil de flux, il est probable
qu’elle induira une latence. Vous pouvez ainsi repérer les images susceptibles de poser problème
(pour la première image, il y a presque nécessairement une latence).
© 2009 Pearson Education France – Flash CS4 – Gil Mathieu
Flash.indb 433
22/09/09 16:18
434
Flash CS4
Figure 12.1.g
Le testeur de bande
passante en affichage
de lecture en continu.
La valeur du seuil de flux dépend de deux facteurs : le débit de connexion testé et la cadence de l’animation. Bien sûr, diviser par deux le débit de connexion divise aussi le seuil par deux. Et doubler la
cadence de l’animation, divise également le seuil par deux. Dans un cas comme dans l’autre, il faut
tout télécharger deux fois plus vite. En haut des Figures 12.1.g et 12.1.h, en Modem 56 k (4,7 Ko/s),
le seuil de flux est de 266 octets. En bas de ces mêmes figures, en ADSL 8 Méga (1 024 Ko/s), le seuil
est de 56,9 Ko.
Figure 12.1.h
Le testeur de bande
passante en affichage
image par image.
Dans la ligne du temps du testeur de bande passante (tout en haut), lorsque l’animation s’exécute dans
le lecteur de test, un curseur triangulaire indique l’image couramment affichée. Vous pouvez simuler
le téléchargement pour la bande passante que vous avez sélectionnée en demandant Affichage > Simuler le téléchargement. Dans ce cas, une barre horizontale verte recouvre progressivement les numéros
d’images, indiquant quelles images ont été téléchargées, de la même façon que dans un lecteur audio
ou vidéo de flux continu. Dans ce mode, le lecteur Flash intégré introduit des latences artificielles
correspondant aux paramètres théoriques du téléchargement, de sorte que vous puissiez vous faire une
idée de ce qu’un internaute dans une telle configuration est susceptible d’expérimenter.
Bien sûr, la simulation précédente se base sur le débit théorique de la connexion. En pratique, le débit
peut descendre bien en dessous de sa valeur théorique, en fonction de la qualité de la ligne téléphonique, des engorgements éventuels du réseau et de la quantité de requêtes faites simultanément sur le
serveur. Par ailleurs, le testeur de bande passante a d’autres limites : il ne peut simuler ni le téléchargement de ressources dont l’URL de requête est absolue (sur un autre serveur), ni le téléchargement
de fichiers FLV en flux continu simulé.
© 2009 Pearson Education France – Flash CS4 – Gil Mathieu
Flash.indb 434
22/09/09 16:18