Prise en main d’Adobe Scout

Adobe Scout est un outil de profiling révolutionnaire destiné au contenu Flash exécuté aussi bien sur ordinateur (Flash Player), que sur périphérique mobile (Adobe AIR). Il vous permet d’obtenir des informations sur le comportement de votre contenu Flash auxquelles vous n’aviez auparavant pas accès. Mieux encore, la configuration de Scout ne comporte aucune étape complexe pour une prise en main aisée.

Avant Scout, le profileur Flash Builder vous permettait d’analyser les problèmes de performances au niveau de votre code ActionScript 3, sans toutefois exposer les opérations internes de Flash Player. En cas de problème de rendu ou d’utilisation incorrecte d’une API Flash, il était impossible de comprendre la raison du dysfonctionnement à l’aide du profileur, puisque vous n’aviez pas accès au cœur du problème.

Scout résout ce problème en collectant des données sur les opérations internes de Flash Player. Ces données vous aident à comprendre la manière dont votre code ActionScript interagit avec l’environnement d’exécution, afin que vous puissiez agir à la racine des problèmes de performances.

Scout s’appuie sur la fonction Telemetry introduite dans Flash Player 11.4 et Adobe AIR 3.4. Cette fonction collecte des informations détaillées sur le fonctionnement interne de l’environnement d’exécution Flash, ainsi que sur le code ActionScript exécuté par celui-ci, et les envoie à Scout. Scout présente ces données sous forme de graphiques clairs et précis, de manière à permettre un diagnostic rapide des problèmes de performances de votre contenu (voir figure 1).

Aucune version de débogage de Flash Player n’est requise pour Scout. Cela signifie que vous pouvez profiler votre contenu dans une version validée à l’aide du fichier SWF et de la page Web qui seront exécutés par vos utilisateurs. De plus, Scout vous permet d’effectuer ce profiling à vitesse normale, afin que vous puissiez vous concentrer sur les problèmes de performances gênant réellement vos utilisateurs.

Aucune configuration spéciale n’est requise pour commencer à utiliser Scout. Il vous suffit d’exécuter votre fichier SWF pendant l’exécution de Scout pour ouvrir une nouvelle session de données. Par défaut, les fichiers SWF ne fournissent toutefois que des informations basiques à Scout. Pour accéder à toutes les données disponibles, telles que les informations sur votre code ActionScript et les informations détaillées sur les rendus DisplayList et Stage3D, vous devez activer le mode Telemetry avancé sur votre fichier SWF. Adobe n’expose pas ces informations par défaut de manière à prévenir l’utilisation de Scout par d’autres personnes dans le but d’obtenir facilement ces informations sur votre contenu. Toutefois, pas d’inquiétudes, activer cette fonction et libérer toute la puissance de Scout est un jeu d’enfants.

Vous pouvez activer le mode Telemetry avancé de plusieurs façons.

A l’aide de Flash Builder 4.7

Le moyen le plus facile d’activer le mode Telemetry avancé, et celui recommandé par Adobe, est de créer votre projet à l’aide de Flash Builder 4.7, qui intègre la prise en charge de Scout.

Flash Builder 4.7 est doté d’une nouvelle option de compilation ActionScript permettant d’activer le mode Telemetry avancé. Vous pouvez utiliser la méthode suivante aussi bien pour les nouveaux projets que les projets existants :

1. Ouvrez les propriétés du projet.
2. Sélectionnez Compilateur ActionScript.
3. Sélectionnez Activer la télémétrie détaillée (voir figure 2).

Une fois ce mode activé, vous recevez les données sur votre code ActionScript ainsi que les rendus DisplayList et Stage3D.

A l’aide de Flash Professional

Si vous utilisez Flash Professional, il n’existe pas encore d’interface utilisateur intégrée permettant d’activer le mode Telemetry avancé. Adobe prévoit d’ajouter cette interface dans une version ultérieure. En attendant, vous pouvez utiliser un script Python (add-opt-in.py) téléchargeable à l’adresse : https://github.com/adamcath/telemetry-utils. Si vous ne disposez pas de Python, rendez-vous sur le site http://python.org pour obtenir plus d’informations et le télécharger. Exécutez ensuite simplement le script add-opt-in.py sur votre fichier SWF et le tour est joué.

Cette méthode peut se révéler également utile si vous profilez des fichiers SWF existants dont la recompilation est difficile.

Exemples de contenu avec mode Telemetry avancé activé

Si vous souhaitez tester Adobe Scout avec du contenu existant, voici quelques exemples de contenu prenant en charge le mode Telemetry avancé :

• Hungry Hero (Starling) : http://www.hungryherogame.com
• Démo des composants Feathers http://feathersui.com/examples/components-explorer
• Invawayders (Away3D) http://awaymedia.co.uk/projects/invawayders/Main.html
• Démo de Backyard (Coppercube) http://www.ambiera.com/coppercube/demo.php?demo=backyard&mode=flash

Ouvrez Scout, accédez à l’un des liens ci-dessus et commencez votre expérience.

Les composants suivants sont requis pour utiliser Scout :

• Flash Player 11.4 (version plug-in ou autonome) ou Adobe AIR 3.4 ;
• l’application de bureau Adobe Scout.

Si vous profilez du contenu de bureau sur l’ordinateur exécutant Scout, aucun autre composant n’est requis. Il vous suffit d’exécuter votre contenu en même temps que Scout pour ouvrir une nouvelle session de profiling.

Vous pouvez également profiler votre contenu sur un ordinateur autre que celui exécutant Scout, à l’aide de la fonction Profiling à distance.  Les scénarios les plus courants sont les suivants :

• Un ordinateur de bureau exécute le contenu (avec Flash Player), tandis qu’un autre ordinateur exécute Scout. Cette fonction peut s’avérer utile pour déboguer un projet à distance ou si vous ne pouvez pas exécuter Scout sur l’ordinateur sur lequel vous voulez exécuter votre contenu.
• Un périphérique mobile exécute le contenu (avec Adobe AIR), tandis qu’un autre ordinateur exécute Scout. Cette situation peut se présenter lorsque vous développez du contenu mobile et que vous souhaitez ajuster les performances sur les périphériques ciblés.

Profiling à distance pour contenu de bureau

Si vous exécutez votre contenu sur un ordinateur distant, vous pouvez diriger les données Telemetry Flash vers tout ordinateur accessible exécutant Scout. Pour ce faire, il vous faut créer un fichier spécifique appelé .telemetry.cfg sur l’ordinateur sur lequel vous exécutez votre contenu Flash. L’emplacement de ce fichier dépend de votre système d’exploitation :

• MacOS : ~/.telemetry.cfg
• Windows : %HOMEDRIVE%%HOMEPATH%\.telemetry.cfg

Remarque : si vous exécutez votre contenu dans Chrome, consultez la liste des questions fréquentes à la fin de ce guide pour plus d’informations.

Supposons que Scout s’exécute sur le port 7934 d’un ordinateur dont l’adresse IP est 192.168.1.20. Pour se connecter à Scout, votre fichier .telemetry.cfg doit respecter les conditions suivantes :

Les quatre dernières lignes doivent correspondre aux options de Scout sous Paramètres des nouvelles sessions. Notez qu’il est nécessaire de les saisir manuellement si vous utilisez la fonction Profiling à distance. Une fois que vous avez configuré le fichier .telemetry.cfg, il vous suffit d’exécuter votre contenu distant pour que celui-ci apparaisse dans Scout.

Profiling à distance pour AIR sur périphérique mobile

L’application Scout Companion disponible pour iOS et Android permet de configurer facilement les périphériques mobiles. Après avoir installé cette application, vous pouvez l’utiliser afin de localiser Scout, puis utiliser Scout pour configurer les données à recevoir.

Pour utiliser l’application :

• Vérifiez que votre périphérique est connecté au même réseau Wi-Fi que l’ordinateur exécutant Scout, puis lancez l’application Scout Companion. Celle-ci recherche alors les ordinateurs exécutant Scout, puis affiche la liste de toutes les instances Scout trouvées.
• Cliquez sur le nom de votre ordinateur pour vous connecter.
• Dans l’application de bureau Scout, sélectionnez les données à collecter. Cette sélection est reflétée dans l’application Companion.
• Lancez votre contenu mobile AIR pour ouvrir une nouvelle session dans Scout (voir figure 3).

Si vous exécutez un contenu Flash local ou que vous avez suivi les instructions de la section précédente pour configurer la communication de votre contenu distant avec Scout, vous pouvez commencer à profiler. Il vous suffit de lancer votre contenu dans votre navigateur, via Adobe AIR ou une version autonome de Flash Player pour ouvrir une nouvelle session dans Scout. Vous savez que la connexion est établie lorsque vous voyez apparaître un graphique en couleur.

Flash Player vérifie si Scout est connecté uniquement au moment du chargement du contenu Flash. Si votre contenu s’exécutait déjà avant le démarrage de Scout, vous devrez donc le charger à nouveau. La liste des sessions ouvertes se trouve à gauche de l’écran ; elle inclue le nom du fichier SWF et son domaine. Si vous souhaitez arrêter la transmission de données, cliquez sur le bouton d’arrêt en forme de carré rouge situé en regard de la session (voir figure 4). Si vous arrêtez l’exécution de votre contenu Flash, la session arrête automatiquement d’enregistrer des données et le bouton d’arrêt se désactive.

Par défaut, tout chargement de contenu Flash entraîne l’ouverture d’une nouvelle session dans Scout. De cette manière, vous pouvez commencer à profiler le contenu rapidement. Toutefois, ce comportement peut s’avérer ennuyeux si vous effectuez d’autres tâches sur votre navigateur, car des sessions s’ouvrent chaque fois que vous chargez une page comportant du contenu Flash.

Pour plus de contrôle, vous pouvez configurer Scout pour qu’il filtre les sessions indésirables. Cliquez sur l’icône de filtre située en regard d’une session (voir figure 5) pour que Scout ne démarre des sessions que pour les fichiers SWF du même nom. Ce filtrage vous permet de naviguer sur différents sites Web sans ouvrir un nombre important de sessions. Toutefois, les sessions réapparaîtront si vous rechargez votre contenu.

Maintenant que vous savez comment démarrer des sessions dans Scout, vous pouvez choisir le type de données que vous souhaitez collecter. Une section intitulée Paramètres des nouvelles sessions se trouve dans la partie gauche de l’écran, au-dessus de la liste des sessions (voir figure 6). Cette section présente les différentes catégories de données qui peuvent être envoyées par Flash Player. Notez que certaines fonctions de Scout ne fonctionnent que si vous activez la collecte des données pertinentes.

Avant de démarrer une nouvelle session, cochez les cases en regard des données à collecter. Etant donné que vous ne pouvez pas modifier ce paramètre lorsque la session est en cours, il est important de définir ce que vous souhaitez mesurer à l’avance. Si vous souhaitez mesurer des performances, telles que la durée d’une fonction ActionScript spécifique, collectez uniquement les données à faible surcharge. Si vous collectez toutes les données, les données de durée peuvent être inexactes car Flash Player nécessite plus de temps pour collecter et envoyer les données.

Voici une brève description des catégories :

• Telemetry de base : toujours activée. Fournit des informations sur les opérations internes de Flash Player, ainsi qu’un récapitulatif de l’utilisation du processeur et de la mémoire GPU.
• Echantillonneur ActionScript : mesure la durée d’exécution du code ActionScript en prenant régulièrement des instantanés de la pile d’appels. La surcharge de cette catégorie est faible car elle utilise un échantillonnage statistique. En prenant le temps d’observer les échantillons sur une longue période, vous pouvez obtenir un aperçu précis des fonctions les plus longues.
• Utilisation du processeur : mesure périodiquement la durée d’utilisation du processeur par Flash Player, indiquée par le système d’exploitation. Cette valeur correspond à celle affichée dans le moniteur d’activité sous Mac OS ou le Gestionnaire des tâches sous Windows.
• Détails du rendu DisplayList : fournit la liste détaillée des objets du rendu DisplayList et les représente visuellement à l’écran. Vous pouvez ainsi repérer les régions de l’écran dont le rendu prend le plus de temps.
• Enregistrement Stage3D : capture les commandes Stage3D exécutées par votre contenu, afin que vous puissiez les réafficher et les parcourir dans Scout. Cette option pouvant facilement générer des giga-octets de données en quelques minutes, vous avez la possibilité de définir le mode d’enregistrement sur différé. Cette option vous permet de définir le moment auquel Scout doit commencer à capturer les données Stage3D.

Rappelez-vous que le mode Telemetry avancé doit être activé pour votre contenu afin de pouvoir activer ces catégories (à l’exception de Telemetry de base).

L’interface utilisateur Scout est conçue pour une utilisation simple et efficace. Elle est dotée de multiples fonctions visuelles qui vous aident à interpréter les données et à filtrer les informations inutiles afin de trouver rapidement la cause des problèmes de performances. L’interface utilisateur comporte de nombreux panneaux (voir figure 7) qui peuvent dérouter à première vue, mais qui, ensemble, constituent les rouages d’une mécanique bien huilée.

Les panneaux peuvent être repositionnés ; pour ce faire, faites glisser l’onglet et déplacez le panneau vers l’emplacement souhaité. Si vous fermez un panneau, vous pouvez le rouvrir depuis le menu Fenêtre. Les panneaux incluent une section appelée espace de travail. Vous pouvez enregistrer et passer d’un espace de travail à un autre depuis le menu Fenêtre.

Vous pouvez masquer la barre latérale gauche qui affiche la liste des sessions ouvertes et les options de configuration des nouvelles sessions en cliquant sur son bouton de masquage (voir figure 8).

Nous allons maintenant décrire les panneaux dans l’ordre dans lequel vous devriez les rencontrer lors de l’utilisation de Scout. Le panneau le plus important est le panneau Chronologie d’image. Il s’agit du panneau central qui comporte de nombreux graphiques. Il affiche un graphique du temps passé dans chaque image de votre fichier SWF, ainsi que d’autres graphiques sur l’utilisation de la mémoire et les événements.

Pour faciliter votre navigation dans la session, une vue récapitulative du panneau Chronologie d’image s’affiche dans la partie supérieure de l’écran. Cette section s’appelle Résumé de la session car elle offre un aperçu des pics d’activité sur toute la session.

Résumé de la session

Si vous souhaitez accéder directement à une période ou un événement spécifique, tel qu’un pic d’activité important, cliquez simplement sur la partie concernée du Résumé de la session. Par défaut, un graphique du temps passé dans chaque image s’affiche, mais vous pouvez également cliquer avec le bouton droit de la souris sur ce dernier (voir figure 9) pour faire apparaître des graphiques supplémentaires (voir figure 10).

Ces graphiques correspondent aux graphiques disponibles dans la Chronologie d’image ; sélectionnez-en un pour obtenir une vue d’ensemble de ce dernier sur toute la session. Cette fonction est particulièrement utile pour contrôler l’utilisation de la mémoire au fil du temps. Vous pouvez notamment repérer les fuites de mémoire très lentes dans le Résumé de la session si vous exécutez votre contenu assez longtemps.

Chronologie d’image

Il s’agit du panneau principal que vous utilisez pour rechercher les problèmes de performances dans Scout. Le graphique situé dans la partie supérieure de ce panneau affiche la Chronologie d’image : la session est divisée en images individuelles afin de représenter le temps passé par Flash Player sur chacune des images (voir figure 11).

L’élément le plus important de ce panneau est la ligne rouge. Elle représente le budget de temps que vous ne pouvez pas dépasser pour chaque image en fonction de l’objectif fixé. Par exemple, pour un fichier SWF s’exécutant à une fréquence de 30 images par seconde, vous disposez d’un budget de 33 ms par image (1 000 ms/30 fps = environ 33 ms). En d’autres termes, si vous utilisez plus de 33 ms par image, votre application s’exécutera de manière saccadée et sautera des images, ce qu’il est bien entendu préférable d’éviter.

La figure 11 affiche clairement les images qui dépassent le budget et nécessitent une attention particulière. La ligne de budget rouge varie car vous êtes autorisé à modifier la fréquence des images de votre fichier SWF de manière dynamique, ce qui est le cas dans ce contenu particulier.

L’autre élément important du graphique Chronologie d’image est la variation de couleur de chaque barre. Chaque couleur représente une activité différente exécutée par Flash Player, de façon à ce que vous puissiez voir quelles activités ont pris le plus de temps dans chaque image :

• Bleu             Exécution d’ActionScript
• Vert          Rendu DisplayList
• Jaune         Réseau et vidéo
• Orange        Autre (activités telles que le nettoyage de la mémoire, le traitement des événements, etc.)

Nul besoin de retenir ce code de couleur. Le panneau Résumé qui suit fournit la signification de chaque couleur. Vous pouvez également placer votre curseur au-dessus d’une partie du graphique pour faire apparaître une info-bulle expliquant la signification de la couleur (voir figure 12).

Le panneau Chronologie d’image comporte d’autres graphiques. Utilisation du processeur : comme son nom l’indique, ce graphique indique l’utilisation du processeur. Notez que celle-ci peut dépasser 100 % si votre ordinateur dispose de plusieurs cœurs. Il existe également un graphique Mémoire dont les couleurs correspondent chacune à un type de mémoire. La signification de ces couleurs est également expliquée dans le panneau Résumé.

Vous pouvez sélectionner les graphiques à afficher en activant et désactivant les boutons situés dans la partie supérieure du panneau Chronologie d’image. La figure 11 présente uniquement les graphiques Chronologie d’image, Utilisation du processeur et Mémoire. Si vous cliquez sur Evénements, des pistes d’événements s’affichent sous le graphique Mémoire (voir figure 13). Chaque piste horizontale représente un type spécifique d’événement et l’intensité des barres bleues indique le nombre d’événements de chaque type ayant eu lieu dans chaque image.

Les pistes d’événements sont les suivantes :

• Souris : des événements de souris sont-ils distribués ?
• Clavier : des événements de clavier sont-ils distribués ?
• Réseau : des opérations d’E/S sont-elles réalisées sur le réseau ?
• Minuteur : la classe Timer est-elle utilisée ?
• Rendu : des rendus sont-ils effectués ?
• Evénements de trace : votre code ActionScript effectue-t-il des appels trace() ?

Comme vous pouvez le voir, le panneau Chronologie d’image vous permet de déceler rapidement les zones sensibles au sein de votre application, de connaître le temps passé et d’en identifier la raison.

Synthèse

Le panneau Résumé décrit le code de couleur utilisé dans les graphiques du panneau Chronologie d’image, mais constitue bien plus qu’une légende. Vous pouvez également effectuer des glisser-déposer dans la Chronologie d’image pour sélectionner une plage d’images. Le panneau Résumé récapitule ensuite les données des images sélectionnées afin que vous puissiez voir ce qui s’est produit en moyenne dans ces images.

La figure 14 présente le panneau Résumé avec deux images sélectionnées. Remarquez d’abord le numéro de fréquence d’images situé dans le coin supérieur gauche. La fréquence d’images était de 1,8 fps, tandis que la cible était fixée à 24 fps, ce qui représente donc un dépassement du budget de 248 %. Ce contenu ne fonctionnait pas de manière optimale et vous souhaitez sûrement savoir pourquoi.

En regardant le graphique temporel, vous pouvez voir que la majeure partie du temps a été passée à exécuter le code ActionScript. Il peut donc être utile de rechercher ce que le code faisait pour essayer de l’optimiser. Pour ce faire, d’autres panneaux Scout sont à votre disposition. Nous les décrirons plus loin dans ce document. Notez que si vous cliquez sur l’icône en forme d’engrenage située à droite, vous pouvez afficher le temps total de la sélection (voir figure 14) ou le temps moyen par image.

Dans ce scénario, le code ActionScript pose clairement problème et vous souhaitez filtrer les autres catégories afin de vous concentrer uniquement sur l’exécution du code ActionScript. Scout dispose de nombreuses couleurs pouvant vous distraire. Prenez donc le temps de filtrer celles que vous ne souhaitez pas afficher.

Cliquez sur la catégorie ActionScript pour griser les autres catégories (voir figure 15). Plus important encore, la Chronologie d’image est également filtrée, afin que seul le code ActionScript exécuté dans chaque image soit visible (voir figure 16). Toutes les couleurs de Scout sont en fait filtrées, ce qui vous permet de vous concentrer uniquement sur les données qui vous intéressent.

En plus de pouvoir cliquer sur une catégorie pour la filtrer, vous pouvez également développer certaines catégories pour afficher des informations plus détaillées sur ces dernières. La figure 17 montre la manière dont le graphique de mémoire Bitmap peut être développé pour afficher davantage de détails. Les nouvelles couleurs apparaissent dans la Chronologie d’image afin que vous puissiez suivre leur évolution au fil du temps.

Activités principales

Le panneau Activités principales affiche davantage de détails sur les opérations internes de Flash Player que le panneau Résumé. Au lieu de proposer un graphique divisé en catégories principales, telles qu’ActionScript, il affiche un graphique détaillé des activités, telles que la gestion d’événements spécifiques (voir figure 18).

Les chiffres de la colonne de droite reflètent le temps passé dans chaque activité et le temps passé par Flash Player à exécuter chaque activité en pourcentage. Dans cet exemple, 54 % du temps (ou 2,279 ms) a été passé dans les gestionnaires de l’événement enterFrame ; il pourrait donc être utile d’optimiser cet événement. Nous reviendrons sur cet exemple plus tard dans la section relative au panneau ActionScript.

Séquence d’activité

Le panneau Activités principales affiche les activités qui prennent le plus de temps, mais il est également utile de connaître la séquence précise de chaque activité. Il s’agit du rôle du panneau Séquence d’activité. A la différence du panneau Activités principales qui regroupe les données de plusieurs images, le panneau Séquence d’activité (voir figure 19) présente les informations d’une seule image à la fois pour éviter d’afficher trop de données.

Le panneau Séquence d’activité affiche l’ordre précis et l’imbrication des activités dans une image. Par exemple, dans la figure 19, vous pouvez voir que 92 % du temps a été passé à gérer l’événement enterFrame, ce qui a entraîné la création d’un événement gameObjectDie qui a occupé à son tour 61 % du temps. Vous pouvez également voir qu’un nettoyage important a été effectué dans le gestionnaire d’événement et que la mise en forme du texte a été mise à jour.

Par défaut, les activités de moins de 0,5 ms n’apparaissent pas dans les panneaux Séquence d’activité et Activités principales, afin que vous puissiez vous concentrer sur les opérations les plus chronophages. Vous pouvez désactiver cela en désélectionnant le bouton de filtre situé dans le coin supérieur gauche.

Notez que le code de couleur est le même que celui du panneau Résumé, afin de faciliter la mise en correspondance des données des différents panneaux. Le filtrage d’une catégorie dans le panneau Résumé grise toutes les activités à l’exception de celles qui vous intéressent, afin que vous puissiez vous concentrer sur les informations que vous recherchez.

ActionScript

Après avoir abordé les opérations internes de Flash Player, nous allons maintenant décrire les opérations de votre code ActionScript 3. Il s’agit du rôle du panneau ActionScript (voir figure 20)

La liste des appels de fonction principaux est l’élément le plus visible du panneau ActionScript. Cette liste répertorie les fonctions appelées par Flash Player dans votre code ActionScript. Pour développer cette liste afin d’afficher la pile d’appels complète, cliquez simplement sur le bouton Tout développer à droite du paramètre Du haut vers le bas (voir figure 21).  Vous pouvez également cliquer sur l’un des triangles tout en appuyant sur la touche Alt pour le développer complètement.

Vous pouvez faire défiler la pile d’appels vers le bas pour repérer les appels natifs qui prennent le plus de temps. Dans la figure 22, l’appel Context3D.present est le plus chronophage, occupant 35 % du temps.

Par défaut, le panneau ActionScript affiche une vue de haut en bas de la pile d’appels, dans laquelle le point d’entrée se trouve en haut de la pile et les appels natifs en bas. Il est utile d’inverser cette vue, afin d’analyser le temps passé dans chaque fonction individuelle. Sélectionnez simplement l’option Du bas vers le haut située en haut du panneau.

Vous pouvez également obtenir une vue d’ensemble du temps passé dans chaque package en développant la catégorie ActionScript du panneau Résumé. En développant cette catégorie, les fonctions du panneau ActionScript bénéficient également du code de couleur. Les fonctions natives apparaissent en bleu foncé, le code ActionScript en bleu clair et Stage3D en vert turquoise. La figure 23 présente la vue du bas vers le haut avec ce code de couleur.

Vous pouvez également utiliser le panneau Résumé pour filtrer les fonctions qui ne se trouvent dans aucun package spécifique, afin de repérer plus facilement le code qui vous intéresse et de mettre le focus sur celui-ci. La figure 24 présente l’interface lorsque vous mettez le focus sur le package invawayders.

Dans la vue Du bas vers le haut, les nœuds parent correspondent aux fonctions individuelles et la colonne Durée propre indique le temps total passé dans chaque fonction sur toutes les images sélectionnées (appels dans d’autres fonctions non inclus). Lorsque vous développez le nœud parent, la pile d’appels inversée affiche l’élément appelant dans la fonction parente et la contribution de chaque appel à la colonne Durée propre du nœud parent.

Le panneau ActionScript offre une vue agrégée du code ActionScript exécuté dans les images sélectionnées de la Chronologie d’image. Rappelez-vous que ces données sont obtenues par échantillonnage statistique, ce qui signifie que plus vous analysez d’échantillons, plus les données sont précises. Si un visage triste apparaît dans le coin supérieur droit, cela signifie que vous devez sélectionner plus d’images !

Le panneau ActionScript comporte une autre fonction utile permettant d’interagir avec les données via les panneaux Activités principales et Séquence d’activité. Dans ces deux panneaux, vous pouvez cliquer sur une activité que vous souhaitez filtrer dans le panneau ActionScript. La figure 25 offre un aperçu du panneau ActionScript lorsque vous cliquez sur l’événement mouseDown dans le panneau Activités principales. Le panneau n’affiche que le code ActionScript exécuté dans ce gestionnaire d’événement spécifique.

Vous pouvez filtrer toutes les activités, et non uniquement les gestionnaires d’événement ActionScript. Par exemple, la figure 26 offre un aperçu du panneau ActionScript filtré par nettoyage. A la différence des événements appelant dans le code ActionScript, le nettoyeur de mémoire peut se déclencher alors que votre code est en cours d’exécution. Le filtrage par nettoyage vous permet de repérer les fonctions qui ont déclenché le nettoyage. Le nettoyage apparaît en effet dans la pile d’appels. Si une fonction particulière entraîne un nettoyage important, celle-ci alloue peut-être trop de mémoire.

Journal des traces

Scout ne se contente pas d’échantillonner votre code ActionScript, il recueille également la sortie des instructions trace() figurant dans votre code. La piste d’événements de la Chronologie d’image indique les images ayant exécuté des instructions trace() ; celles-ci apparaissent dans le panneau Séquence d’activité si vous sélectionnez une seule image. Vous avez également la possibilité de sélectionner un nombre illimité d’images afin d’en visualiser la sortie trace() complète dans le panneau Journal des traces (voir figure 27).

La barre d’outils en haut du panneau se compose de deux boutons. Le premier vous permet d’activer ou de désactiver l’affichage de l’horodatage en regard de chaque instruction trace(). Vous pouvez le voir activé à la figure 27. Le second bouton vous permet quant à lui de restreindre la sélection d’images aux seules images dont vous mettez la sortie trace() en surbrillance. Par exemple, si vous cliquez sur ce bouton dans la figure 27, vous accédez à l’image correspondant à la sortieSUPER DUPER : AbstractScene à 0:07.902.

Informations de session

Scout vous permet de partager facilement des données avec d’autres personnes. Par exemple, si vous remarquez un problème de performances dans un contenu Flash, vous pouvez enregistrer la session Scout, la sauvegarder en tant que fichier FLM et l’envoyer à un collègue afin qu’il vous aide à déboguer le problème. Avec toutes ces données, il est facile de perdre des informations importantes, comme l’ordinateur sur lequel vous exécutiez Flash Player ou la version de Flash Player utilisée.

Le panneau Informations de session de Scout est là pour vous rappeler ces informations. Il est divisé en plusieurs sections indiquant les informations du fichier SWF que vous exécutiez, l’environnement d’exécution Flash, le système d’exploitation et le modèle de l’ordinateur, ainsi que les types des données Telemetry devant être collectées par Scout (voir figure 28).

Rendu DisplayList

Nous avons abordé de nombreux panneaux permettant de diagnostiquer les opérations internes de Flash Player et du code ActionScript. Que faire lorsque votre problème est lié au rendu ? L’un des principaux avantages de Scout est qu’il vous permet d’accéder au cœur des problèmes de rendu.

Si vous utilisez un rendu DisplayList Flash classique, vous pouvez activer le paramètre Détails du rendu DisplayList pour les nouvelles sessions et collecter des informations détaillées sur les opérations du rendu. Le panneau Rendu DisplayList vous permet de visualiser les données d’une image sélectionnée (voir figure 29).

La liste de toutes les passes de rendu de l’image sélectionnée se trouve dans la partie gauche du panneau et indique la durée de chacune de ces passes. Les passes de rendu ne sont pas toujours exactement alignées sur les limites de l’image. Il est ainsi possible qu’une passe de rendu commence sur une image et se termine sur la suivante. Si vos images comportent plusieurs passes de rendu complètes, la fréquence des rendus est peut-être trop élevée. Par exemple, l’événement updateAfterEvent() est peut-être appelé inutilement.

Le panneau Rendu DisplayList s’ouvre en mode Carte thermique par défaut. Cette représentation de l’écran indique les zones rendues. Les zones les plus claires sont celles dont le rendu a été le plus long. Vous pouvez cliquer sur une zone pour la mettre en surbrillance dans l’arborescence à droite. Les opérations de la passe de rendu apparaissent, ainsi que la durée de chacune d’entre elles.

Vous pouvez obtenir une vue plus détaillée de la passe de rendu en passant en mode Régions (voir figure 30). Ce mode divise les régions de l’écran en quatre catégories différentes que Flash Player utilise dans son moteur de rendu. Comprendre ces catégories peut vous aider à améliorer vos performances de rendu de manière considérable. Vous pourrez, par exemple, éviter de mettre en cache un élément modifié à chaque image.

Les quatre catégories affichées en haut du panneau sont dotées d’un code de couleur et peuvent être activées ou désactivées :

• Les régions (en rouge) sont les cadres de délimitation contenant les pixels de l’écran qui doivent être redessinés. Elles correspondent à l’information renvoyée par la fonction Rendu DisplayList dans la version de débogage de Flash Player.
• Les surfaces mises à jour (en bleu) représentent les surfaces mises à jour dans cette passe de rendu. Les surfaces sont des bitmaps créés en interne par le lecteur Flash Player lors de l’utilisation de filtres, de modes de fusion, de mise en cache de bitmap et bien sûr de bitmaps.
• Les surfaces mises en cache (en jaune) sont des surfaces mises en cache par l’environnement d’exécution, qui peuvent être réutilisées sur plusieurs images. Seuls les caches rendus à nouveau dans cette passe de rendu sont affichés.
• Les objets d’affichage (en vert) sont des contenus vectoriels que vous ajoutez au rendu DisplayList. De même, seuls les objets d’affichage rendus sont affichés.

Notez que les activités situées à droite disposent du même code de couleur. Vous pouvez cliquer sur une zone de l’affichage pour mettre en surbrillance l’activité correspondante (voir figure 31). Les petits points situés en regard des entrées indiquent que la région a été redessinée car elle devait être mise à jour.

Rendu Stage3D

Si vous développez du contenu avec accélération GPU pour Flash Player, vous utilisez les nouvelles API Stage3D. Ces API permettent d’utiliser le GPU indépendamment de la plateforme pour accélérer le rendu sur le bureau (Adobe AIR 3.0 et version ultérieure, et Flash Player 11 et version ultérieure) et sur les applications mobiles (Adobe AIR 3.2 et version ultérieure). Vous développez peut-être du contenu 3D ou utilisez peut-être une structure 2D telle que Starling, qui utilise le GPU pour effectuer le rendu de contenu 2D.

Si vous activez l’enregistrement Stage3D dans Scout, Flash Player envoie chaque commande Stage3D exécutée par votre contenu à Scout. En d’autres termes, tous les appels de l’objet Context3D sont enregistrés. Le panneau Rendu Stage3D vous permet de revoir ces commandes étape par étape (voir figure 32).

Ce panneau contient la liste de toutes les commandes Stage3D de l’image sélectionnée. Vous pouvez cliquer sur n’importe quel appel de texture (Context3D.drawTriangles) pour mettre à jour la partie gauche du panneau et afficher l’état du tampon d’arrière-plan immédiatement après l’appel. Appuyer sur la touche espace permet de passer à l’appel de texture suivant (la touche de retour arrière passe à l’appel précédent), afin de faciliter votre navigation dans le rendu de la scène (voir figure 33).

Si vous utilisez le rendu de la texture dans votre contenu, Scout affiche automatiquement la cible de rendu sélectionnée (c’est-à-dire la texture de rendu), au lieu du tampon d’arrière-plan.

Chaque commande Stage3D est affichée dans un format compact avec ses arguments, dans l’ordre dans lequel elle les a reçus. Si vous avez oublié la signification des arguments, vous pouvez cliquer avec le bouton droit de la souris sur la liste des commandes et sélectionner l’option Afficher les noms d’argument.

Le panneau Rendu Stage 3D permet de parcourir les appels de texture car Scout exécute une copie du moteur Stage3D. L’environnement d’exécution n’envoie pas de bitmaps à Scout, il envoie les commandes Stage3D et les arguments que vous fournissez, tels que les textures, les programmes et les tampons. Scout vous permet ainsi d’examiner et d’explorer votre scène sous des angles inédits afin de déboguer votre contenu.

Le mode filaire peut être activé depuis la barre d’outils située en haut du panneau (voir figure 34). Il permet d’afficher un aperçu de la scène uniquement avec le rendu des bords des triangles, afin que vous puissiez voir le dessin situé derrière chaque objet.

L’utilisation du panneau Rendu Stage3D nécessite l’activation de l’enregistrement Stage3D, mais des informations sur la mémoire GPU sont également capturées en permanence. Pour chaque contenu Stage3D, vous pouvez consulter la section Mémoire GPU (voir figure 35) et également activer le graphique correspondant dans les panneaux Résumé de la session et Chronologie d’image.

Vous pouvez afficher le nombre d’appels de texture de chaque scène et un graphique de la mémoire ressource, généralement dominé par les textures que vous chargez.

Editeur de programme Stage3D

Scout disposant d’informations complètes sur les commandes Stage3D exécutées par votre application, vous pouvez modifier chaque commande de manière interactive et observer les conséquences de ces modifications sur le rendu. Chaque fois que vous appelez Context3D.drawTriangles, vous ordonnez au GPU d’exécuter deux programmes : un programme de sommets (vertex) qui positionne les triangles sur l’écran et un programme de fragments qui donne leurs couleurs aux pixels individuels de chaque triangle. Scout vous permet d’afficher et de modifier ces programmes de manière interactive à l’aide de l’Editeur de programme Stage3D.

Dans le panneau Rendu Stage3D, cliquez sur un appel de texture (voir figure 36), puis accédez à l’Editeur de programme Stage3D (voir figure 37) via le menu Fenêtre. L’éditeur affiche le code AGAL des programmes de sommets et de fragments exécutés par l’appel de texture.

Vous pouvez modifier ces programmes de manière interactive et cliquer sur Télécharger afin d’indiquer à Scout d’effectuer à nouveau le rendu de la scène avec le programme modifié. La figure 38 présente une scène dans le panneau Rendu Stage3D, dont le programme de fragments pour l’appel de texture sélectionné est le suivant :

Les deux premières lignes de ce programme proviennent de deux textures différentes, et la dernière ligne multiplie les textures ensemble pour déterminer la couleur de sortie du pixel. La première texture (fs1) correspond aux briques des murs du bâtiment, et la deuxième (fs2) aux ombres.

Pour connaître l’effet d’une modification du programme, modifiez la dernière ligne de manière à ce qu’elle ne multiplie pas les deux textures ensemble, mais définisse la couleur sur la première texture :

Lorsque vous cliquez sur Télécharger, la scène est rendue avec le nouveau programme (voir figure 39). Vous remarquerez que certains appels de texture sont passés en violet, indiquant que vous avez modifié le programme qu’ils utilisent. Vous pouvez cliquer sur Réinitialiser dans l’Editeur de programme Stage3D pour rétablir le programme d’origine.

Vous pouvez ensuite mettre à jour le programme pour qu’il affiche uniquement la deuxième texture (les ombres) :

En cliquant de nouveau sur Télécharger, seules les ombres sont rendues (voir figure 40).

Cette interactivité est particulièrement utile pour le débogage et l’utilisation pendant votre apprentissage de l’écriture de programmes AGAL.

Recherche dans Scout

La version 1.1 de Scout offre de nouvelles fonctions facilitant la navigation au sein des sessions. Elle comporte notamment un nouveau menu de recherche dont le premier élément est Aller à l’image, tel qu’illustré à la figure 41. Cette option vous permet d’accéder rapidement à une image spécifique de la session.

La seconde fonction, et la plus utile, est la fonction Rechercher. Cette option vous permet de faire apparaître la barre Rechercher en bas de l’écran, dans laquelle vous pouvez saisir le texte à rechercher dans la session actuelle (voir figure 42).

Au fur et à mesure que vous tapez, Scout recherche tous les panneaux ouverts contenant ce texte. Les autres panneaux ne correspondant pas aux termes de la recherche sont grisés pour vous permettre de trouver plus facilement ce qui vous intéresse. Vous pouvez également voir le nombre de correspondances trouvées dans les panneaux ouverts. Dans la figure 43, le mot anglais « context » est recherché au sein des panneaux ActionScript et Activités principales. Scout effectue la recherche parmi les noms des fonctions ActionScript, ainsi que les activités, instructions trace, noms des objets d’affichage et commandes Stage3D, en fonction des panneaux ouverts.

Si vous cliquez sur les boutons > ou <, Scout passera aux résultats suivants ou précédents dans les résultats de la recherche. Le résultat actuel apparaît dans une police de plus grande taille qui permet de le distinguer plus facilement. A mesure que vous parcourez les résultats, Scout ouvre les rangs correspondants dans l’arborescence en la faisant défiler pour faire apparaître les différents résultats. Cette fonction est très utile pour trouver un appel de fonction spécifique au cœur d’une application de grande taille.

La fonctionnalité la plus utile est probablement la recherche de texte dans une image différente. Si vous cliquez sur le bouton >>, Scout étendra la recherche au-delà de la sélection d’images actuelle jusqu’à trouver une image contenant le texte recherché. Scout accède alors à cette image et, dans le cas où le résultat n’apparaît pas dans un panneau visible, ouvre le panneau en le faisant défiler jusqu’au résultat. Le bouton << agit de la même façon, en recherchant dans le sens inverse.

Les questions suivantes peuvent vous aider lors de la prise en main de Scout.

Pourquoi je n’arrive pas à connecter Flash Player à Scout ?

Si aucune session n’apparaît, vérifiez les points suivants :

• Vérifiez que votre version d’Adobe Scout est à jour.
• Vérifiez que vous disposez d’une version récente de Flash Player.
• Pour les projets mobiles, vérifiez que vous les développez sur une version à jour du SDK ou de Flash Builder.
• Pour les projets mobiles, vérifiez que l’application Companion est connectée.
• Assurez-vous également que le fichier .telemetry.cfg se trouve à l’emplacement correct avec les contenus appropriés.
• Vérifiez que le serveur Scout écoute. Ouvrez Scout puis saisissez localhost:7934 dans votre navigateur Web. Un message de type « connexion au serveur perdue », « aucune donnée reçue » ou similaire s’affiche rapidement étant donné que Scout n’est pas un serveur HTTP. Scout affiche un message d’erreur de type « impossible d’ouvrir une nouvelle session car les données de télémesure ne sont pas valides ». Si le serveur s’interrompt pendant une longue durée, puis renvoie un message de type « serveur introuvable » ou autre message similaire, cela signifie que le socket ne fonctionne pas. Vérifiez votre pare-feu et vos paramètres de sécurité. Vous pouvez modifier le port Scout sous Préférences > Ecouter les nouvelles sessions sur le port. Si vous décidez de modifier le port, n’oubliez pas de mettre à jour votre fichier .telemetry.cfg.

Si vous ne parvenez pas à connecter l’application iOS ou Android Scout Companion, essayez les solutions suivantes :

• Assurez-vous que l’application Scout Companion est à jour.
• Si l’application Companion ne détecte pas votre ordinateur, essayez de vous connecter en sélectionnant Autres et en saisissant l’adresse IP de votre ordinateur.
• Essayez de vous connecter à votre ordinateur depuis votre périphérique à l’aide d’une autre application. Essayez de configurer un serveur Web sur votre ordinateur et de vous y connecter :
  • Sous Mac OS, accédez à Préférences Système > Partage et activez l’option Partage Web.
  • Sous Windows, activez les Services Internet (IIS).
  • Essayez d’accéder au site Web de votre ordinateur depuis ce dernier.
  • Essayez maintenant de vous connecter au site Web depuis votre périphérique.

Comment puis-je effectuer un profiling depuis Chrome ?

Si vous utilisez le plug-in Flash Pepper sur Chrome (plug-in activé par défaut), le fichier .telemetry.cfg se trouve dans un emplacement plus difficile d’accès. En effet, le sandbox de Chrome limite le nombre d’emplacements depuis lesquels Flash Player est autorisé à lire des fichiers. Les emplacements possibles sont les suivants (le format du fichier reste le même) :

Mac OS :   ~/Library/Application Support/Google/Chrome/Default/

Pepper Data/Shockwave Flash/UserHome/.telemetry.cfg

Windows :  %HOMEDRIVE%%HOMEPATH%\AppData\Local\Google\Chrome\

User Data\Default\Pepper Data\
Shockwave Flash\UserHome\.telemetry.cfg 

Que signifie le message « En attente du GPU » ?

Dans une application Stage3D, votre processeur et votre GPU doivent être synchronisés pour obtenir la fréquence d’images souhaitée. Si l’un des deux est en surcharge, la fréquence d’images ralentit. Si le message « En attente du GPU » reste affiché pendant un certain temps, cela signifie que votre GPU est en surcharge. Vous disposez de plusieurs possibilités pour résoudre ce problème :

• La fréquence d’images du GPU ne peut excéder 60 fps. Si vous essayez de mettre à jour l’écran à une fréquence supérieure, il se bloque. Si votre fréquence d’images est de 60 fps, nul besoin de vous soucier du message « En attente du GPU ».
• Si votre fréquence d’images est nettement inférieure à cette valeur, le GPU est en surcharge. Vous devez optimiser votre code 3D ou utiliser un périphérique plus puissant. Par exemple, essayez de rendre moins de triangles, ou d’utiliser des programmes AGAL plus simples ou des textures moins volumineuses. A l’heure actuelle, Scout n’est pas en mesure de vous montrer directement quels éléments étaient lents dans le GPU car il ne peut pas mesurer le temps de celui-ci. Toutefois, si vous activez l’enregistrement Stage3D et consultez le panneau Rendu Stage3D, vous pouvez afficher les commandes Stage3D exécutées, les parcourir et observer leur incidence sur la scène. Cela peut vous permettre de trouver une solution pour améliorer l’efficacité des commandes.
• Si votre fréquence d’images varie, oscille ou est en dents de scie, vous rencontrez peut-être un problème de synchronisation entre le processeur et le GPU dans Flash Player. Adobe cherche actuellement une solution à ce problème.

Scout s’est bloqué ou a affiché une erreur. Que dois-je faire ?

Si Scout s’est bloqué avant que vous n’ayez pu enregistrer votre session, vous pouvez récupérer vos données depuis les emplacements suivants où un ou plusieurs fichiers FLM sont disponibles :

Mac OS :  /var/folders/… …/Adobe Performance Data

Windows :  %HOMEDRIVE%%HOMEPATH%\AppData\Local\Temp\Adobe Performance Data

Notez que sous Mac OS, l’emplacement peut varier. Le meilleur moyen de le trouver est d’accéder à /var/folders dans le Finder et de rechercher « Adobe Performance Data ».

Si Scout se bloque de nouveau lorsque vous ouvrez le fichier FLM, il s’agit d’un bogue. Adobe vous serait reconnaissant de bien vouloir envoyer votre fichier FML afin de pouvoir trouver une solution au problème.

Si une erreur se produit, vous pouvez obtenir davantage d’informations sur cette dernière dans le journal Scout :

Mac OS :  ~/Library/Preferences/Adobe/Scout/1.0/logs

Windows :  %HOMEDRIVE%%HOMEPATH%\AppData\Roaming\Adobe\Scout\1.0\logs

Vous connaissez maintenant le fonctionnement et l’utilisation d’Adobe Scout. Il ne vous reste plus qu’à vous essayer à son utilisation pour personnaliser vos jeux dans Flash Player ou AIR.