12 Publication Tester une animation Les tests en général

Transcription

1 12 Publication 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 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 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 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

2 430 Flash CS4 l animation dans l environnement de réalisation (Contrôle > Lire) ne suffit pas. Il faut générer le fi chier 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. Raccourci CMD+RETOUR (Mac) ou CTRL+ENTRÉE (Windows) lance le lecteur Flash intégré afi n 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 ). 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 Le menu Contrôle du lecteur Flash. Raccourci 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.

3 Publication 431 Raccourci 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 Java Script. 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 fi chiers d une animation fi nalisé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.fl a 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.

4 432 Flash CS 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 = bits/s. Comme son nom l indique, un octet correspond à 8 bits. Il faut donc diviser par 8 pour obtenir = 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 Affi chage du lecteur de test 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.

5 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).

6 434 Flash CS4 Figure 12.1.g Le testeur de bande passante en affi chage 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 affi chage 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é.