Pratiques recommandées – Conseils pour la création de contenu pour appareils mobiles

Création d’un contenu Animate pour une utilisation sur des appareils mobiles

Pour créer un contenu Animate pour des appareils mobiles, suivez certains principes de base. Par exemple, les développeurs Animate évitent souvent les illustrations très complexes et les transparences ou les interpolations inutiles.

Les développeurs de Flash Lite sont confrontés à des défis supplémentaires, car les performances sur les appareils mobiles varient considérablement. Si le contenu doit être publié sur de nombreux périphériques différents, les développeurs doivent parfois créer pour le plus petit dénominateur commun.

L’optimisation du contenu mobile nécessite de faire des compromis. Par exemple, une technique peut améliorer l’aspect du contenu, tandis qu’une autre améliore les performances. Au fur et à mesure que vous évaluez ces compromis, vous aurez à faire des allers-retours répétés entre les tests dans l’émulateur et les tests sur l’appareil cible. Vous devez voir votre contenu sur l’appareil réel pour évaluer l’exactitude des couleurs, la lisibilité du texte, les interactions physiques, la réactivité de l’interface utilisateur et d’autres aspects de l’expérience mobile réelle.

 Le contenu sur Flash Lite ne s’applique pas à Flash CC et versions ultérieures.

Conseils Flash Lite pour l’animation sur des périphériques mobiles

Lors de la création d’un contenu animé pour un périphérique mobile, gardez en mémoire les limites de la mémoire du périphérique. En respectant les instructions suivantes, vous éviterez peut-être que le contenu Flash Lite ne s’exécute lentement :

• Lors de la création d’un fichier Flash Lite, vérifiez que le document est correctement défini. L’adaptation des fichiers Animate se fait de manière lisse, mais si le fichier ne s’exécute pas dans son format de scène d’origine et doit s’adapter au lecteur, les performances peuvent en souffrir. Essayez de définir la taille de scène du document afin qu’elle corresponde à la résolution du périphérique cible. Définissez également Flash Player sur la version correcte de Flash Lite.

• Flash Lite permet d'effectuer le rendu des graphiques vectoriels en basse, moyenne et haute qualité. Plus la qualité de rendu est élevée, plus le rendu des images vectorielles est fluide et précis (0}Flash Lite), et plus la demande sur le processeur de l’appareil est importante. Pour créer une animation complexe, essayez de modifier le paramètre de qualité du lecteur, puis testez le fichier du SWF de manière approfondie. Pour contrôler la qualité de rendu d'un fichier SWF, utilisez la propriété _quality ou la commande SetQuality. Les valeurs valides pour la propriété _quality sont LOW, MEDIUM et HIGH.

• Limitez le nombre d’interpolations simultanées. Réduisez le nombre d’interpolations ou séquencez l’animation afin que l’une commence lorsqu’une autre se termine.

• Utilisez les effets de transparence (alpha) sur les symboles avec parcimonie, car ils sollicitent beaucoup le processeur. Évitez en particulier d’interpoler les symboles avec des niveaux alpha qui ne sont pas entièrement opaques (moins de 100 %).

• Évitez les effets visuels sollicitant fortement le processeur, tels que de grands masques, de trop nombreux mouvements, le fondu alpha, de trop nombreux dégradés ou des vecteurs complexes.

• Essayez différentes combinaisons d’interpolations, d’animations d’image-clé et de mouvements ActionScript pour obtenir les résultats les plus efficaces.

• Le rendu des ovales et des cercles vectoriels nécessite beaucoup plus de mémoire que le rendu des quadrilatères. L’utilisation de contours ronds et ovales augmente également considérablement l’utilisation du processeur.

• Testez les animations régulièrement sur les périphériques cibles réels.

• Lorsque vous définissez une région animée dans Animate, un cadre de sélection est défini autour de la zone. Optimisez le dessin afin que le rectangle soit le plus petit possible. Évitez le chevauchement des interpolations, car Animate interprète la zone fusionnée comme un simple rectangle, ce qui entraîne une région totale plus grande. Utilisez la fonction d’affichage de la zone de retraçage d’Animate pour optimiser l’animation.

• Évitez d’utiliser _alpha = 0 et _visible = false pour masquer les clips à l’écran. Si vous désactivez simplement la visibilité d’un clip ou si vous remplacez son alpha par zéro, ce dernier est toujours inclus dans les calculs de rendu des lignes, ce qui peut affecter les performances.

• De même, n’essayez pas de masquer un clip en le dissimulant derrière une autre illustration. Il sera toujours inclus dans les calculs du joueur. Au lieu de cela, déplacez complètement les clips hors de la scène ou supprimez-les en appelant removeMovieClip.

Graphiques bitmap et vectoriels Flash Lite sur des périphériques mobiles

Flash Lite permet d’afficher des graphiques vectoriels et des images bitmap. Chaque type de graphique présente ses propres avantages et inconvénients. Le choix du type de graphique n’est pas toujours évident et dépend souvent de plusieurs facteurs.

Les graphiques vectoriels sont représentés de façon compacte dans les fichiers SWF sous forme d’équations mathématiques, puis affichés à l’aide du lecteur Flash Lite. Par opposition, les graphiques bitmap sont représentés sous forme de tableaux d’éléments d’image (pixels), ce qui nécessite davantage d’octets pour décrire les données. Par conséquent, l’utilisation de graphiques vectoriels dans un fichier permet de minimiser la taille du fichier et la mémoire sollicitée.

Les graphiques vectoriels conservent également leurs formes intactes lorsqu’ils sont redimensionnés, contrairement aux images bitmap qui peuvent prendre un aspect pointilliste ou pixélisé.

Comparés aux bitmaps, cependant, les graphiques vectoriels nécessitent davantage de puissance de traitement, notamment les graphiques recourant à des formes ou des trames complexes. Par conséquent, l’utilisation généralisée de formes vectorielles risque de réduire les performances globales du fichier. Dans la mesure où les images bitmap nécessitent moins de puissance de traitement que les vecteurs, elles peuvent représenter un meilleur choix pour certains fichiers, comme une carte routière complexe devant être animée et utilisée sur un téléphone portable.

Gardez ces différents points en mémoire :

• Évitez d’utiliser des contours dans vos formes vectorielles. Les contours ont un bord intérieur et extérieur (les fonds n’en ont qu’un) et représentent le double du travail de rendu.

• Le rendu des coins est plus simple que celui des courbes. Si possible, utilisez des bords plats, en particulier avec de très petites formes vectorielles.

• L’optimisation est particulièrement utile pour les petites formes vectorielles telles que les icônes. Les icônes complexes peuvent perdre leurs détails lors du rendu et le travail de rendu des détails est perdu.

• En règle générale, utilisez des bitmaps pour les images petites et complexes (telles que les icônes) et les images vectorielles pour les images plus grandes et simples.

• Importez des images bitmap à la taille appropriée ; n’essayez pas d’importer de grands graphiques et de les réduire avec Animate, dans la mesure où cela augmente la taille du fichier et utilise de la mémoire inutilement.

• Le lecteur Flash Lite ne prend pas en charge le lissage bitmap. Si vous redimensionnez ou faites pivoter un bitmap, vous obtiendrez un aspect de morceau. Si vous devez mettre à l’échelle ou faire pivoter un graphique, pensez plutôt à utiliser un graphique vectoriel.

• Le texte est essentiellement une forme vectorielle très complexe. Bien sûr, le texte est souvent essentiel, il peut donc rarement être évité entièrement. Lorsque du texte est nécessaire, évitez de l’animer ou de le placer sur une animation. Pensez à utiliser du texte comme image bitmap. Pour le texte dynamique multiligne et le texte d’entrée, le saut de ligne de la chaîne de texte n’est pas mis en cache. Animate effectue les sauts de ligne au moment de l’exécution et recalcule le saut de ligne à chaque fois que le champ texte doit être redessiné. Les champs de texte statique ne posent aucun problème, car le saut de ligne est précalculé au moment de la compilation. Pour le contenu dynamique, il est inévitable d’utiliser des champs de texte dynamique. Si possible, pensez plutôt à utiliser des champs de texte statiques.

• Réduisez l’utilisation de transparents dans les fichiers PNG, car Animate doit toujours calculer le dessin, même dans les parties transparentes de l’image bitmap. Par exemple, avec un fichier PNG transparent qui représente un élément de premier plan, n’exportez pas le fichier PNG transparent à la taille réelle de l’écran. Au lieu de cela, exportez-le à la taille réelle de l’élément de premier plan.

• Essayez de regrouper des calques bitmap et des calques vectoriels. Animate doit mettre en place différents affichages pour les contenus bitmap et vectoriels, et passer d’un affichage à l’autre prend beaucoup de temps.

Définition des options de compression des images bitmap Flash Lite pour les périphérique mobiles

Si vous utilisez des bitmaps, vous pouvez définir des options de compression d’image (au niveau de chaque image ou globalement pour toutes les images bitmap) qui réduiront la taille de votre fichier SWF.

Définition d’options de compression pour un fichier bitmap unique

Définition de la compression de l’ensemble des images bitmap

Optimisation des images Flash Lite pour les périphériques mobiles

• La plupart des périphériques prenant en charge Flash Lite lisent le contenu à une vitesse d’environ 15 à 20 images par seconde (ips). La cadence peut être aussi basse que 6 i/s. Pendant le développement, définissez la cadence du document pour obtenir une vitesse de lecture proche de celle de l’appareil cible. Cela montre comment le contenu s’exécutera sur un appareil aux performances limitées. Avant de publier un fichier SWF final, définissez la cadence du document sur au moins 20 i/s afin d’éviter de restreindre les performances au cas où le périphérique prendrait en charge une cadence plus élevée.

• Lorsque vous utilisez la commande gotoAndPlay, souvenez-vous que chaque image entre l’image en cours et l’image demandée doit être initialisée avant la lecture de cette dernière. Si la plupart de ces images ont un contenu différent, il peut être plus efficace d’utiliser des clips différents plutôt que le scénario.

• Bien qu’il soit judicieux de précharger tout le contenu en le plaçant au début du fichier sur le bureau, le préchargement sur un appareil mobile peut retarder le démarrage du fichier. Espace le contenu dans tout le fichier afin que les clips soient initialisés au fur et à mesure de leur utilisation.

Optimisation des performances du code ActionScript pour le contenu Flash Lite sur des périphériques mobiles

En raison des restrictions applicables en termes de puissance de traitement et de mémoire à la plupart des périphériques mobiles, respectez les directives suivantes lorsque vous développez du contenu ActionScript for Flash Lite à destination des périphériques mobiles :

• Conservez la simplicité du fichier et de son code. Supprimez les clips inutilisés, les boucles de code et d’images superflues et évitez les images trop nombreuses ou superflues.

• L'utilisation de boucles FOR peut être coûteuse en raison de la surcharge occasionnée par la vérification de la condition à chaque itération. Lorsque les coûts de l'itération et le surdébit de la boucle sont comparables, exécutez plusieurs opérations individuellement au lieu d'utiliser une boucle. Le code est peut-être plus long, mais les performances s’amélioreront.

• Arrêtez la lecture en boucle d’images dès qu’elle n’est plus requise.

• Si possible, évitez le traitement de tableaux et de chaînes, car cette opération peut s’avérer particulièrement gourmande en ressources.

• Essayez toujours d’accéder directement aux propriétés, au lieu d’utiliser les méthodes de lecture/définition d’ActionScript, qui consomment davantage de ressources que les autres méthodes d’appel.

• Gérez les événements avec discernement. Réduisez la taille des tableaux d'écouteur d'événements en utilisant des conditions pour vérifier si un écouteur existe (n'est pas nul) avant de l'appeler. Effacez tous les intervalles actifs en appelant clearInterval et supprimez tous les écouteurs actifs en appelant removeListener avant de supprimer du contenu à l'aide de unloadapplication ou removeapplicationClip. Animate ne récupère pas la mémoire des données SWF (par exemple, des intervalles et des tableaux) si des fonctions ActionScript font référence aux données SWF lorsqu’un clip est déchargé.

• Lorsque les variables ne sont plus nécessaires, supprimez-les ou définissez-les sur null, ce qui les marque pour le garbage collection. La suppression de variables permet d’optimiser l’utilisation de la mémoire pendant l’exécution, car les ressources inutiles sont supprimées du fichier du SWF. Il est préférable de supprimer les variables plutôt que de les définir sur null.

• Supprimez de façon explicite les tableaux des objets en appelant la fonction removeListener avant la suppression des données inutiles.

• Si vous appelez une fonction de façon dynamique et transmettez un ensemble fixe de paramètres, utilisez la fonction call et non pas la fonction apply.

• Rendre les espaces de noms (tels que les chemins) plus compacts pour réduire le temps de démarrage. Chaque niveau du package est compilé dans une instruction IF et provoque un nouvel appel Object . Par conséquent, réduire le nombre de niveaux dans le chemin permet de gagner du temps. Par exemple, un chemin avec les niveaux com.xxx.yyy.aaa.bbb.ccc.funtionName entraîne l'instanciation d'un objet pour com.xxx.yyy.aaa.bbb.ccc. Certains développeurs de Flashs utilisent un logiciel de préprocesseur pour réduire le chemin d'accès à un identifiant unique, tel que 58923409876.functionName, avant de compiler le code du SWF.

• Si un fichier est composé de plusieurs fichiers de SWF qui utilisent les mêmes classes d'ActionScript, excluez ces classes de certains fichiers de SWF pendant la compilation. Cela peut aider à réduire le temps de téléchargement des fichiers et les exigences de mémoire d’exécution.

• Évitez d’utiliser Object.watch et Object.unwatch, dans la mesure où tout changement de propriété des objets implique que le lecteur détermine si une notification de changement doit être envoyée.

• Si le code ActionScript qui s’exécute sur une image clé dans le scénario prend plus d’une seconde à s’exécuter, envisagez de fractionner ce code, de façon à répartir son exécution sur plusieurs images clés.

• Supprimez les instructions trace du code lors de la publication du fichier de SWF. Pour ce faire, cochez la case Omettre les actions de vectorisation dans l’onglet Flash de la boîte de dialogue Paramètres de Publish.

• L'héritage augmente le nombre d'appels de méthode et utilise plus de mémoire : une classe qui inclut toutes les fonctionnalités dont elle a besoin est plus efficace au moment de l'exécution qu'une classe qui hérite d'une partie de ses fonctionnalités d'une superclasse. Par conséquent, vous devrez peut-être effectuer un compromis de conception entre l’extensibilité des classes et l’efficacité du code.

• Lorsqu'un fichier de SWF charge un autre fichier de SWF contenant une classe d'ActionScript personnalisée (par exemple, foo.bar.CustomClass), puis décharge le fichier de SWF, la définition de classe reste en mémoire. Pour économiser de la mémoire, supprimez explicitement les classes personnalisées des fichiers SWF déchargés. Utilisez l'instruction delete et spécifiez le nom de classe complet, tel que : delete foo.bar.CustomClass.

• Limitez l’utilisation des variables globales, dans la mesure où elles ne sont pas supprimées automatiquement si le clip qui a servi à les définir a été supprimé.

• Évitez d’exploiter les composants d’interface standard (disponibles dans le panneau Composants de Flash). Ces composants sont conçus pour fonctionner sur des ordinateurs de bureau et ne sont pas optimisés pour fonctionner sur des appareils mobiles.

• Dans la mesure du possible, évitez d’utiliser les fonctions à imbrication complexe.

• Évitez de référencer des variables, des fonctions ou des objets non existants. Par rapport à la version de bureau de Flash Player, Flash Lite 2 recherche lentement les références à des variables inexistantes, ce qui peut affecter considérablement les performances.

• Évitez de définir des fonctions à l’aide d’une syntaxe anonyme. Par exemple, myObj.eventName = function{ ...}. Les fonctions explicitement définies sont plus efficaces, telles que function myFunc { ...}; my Obj.eventName = myFunc;.

• Limitez l’utilisation des fonctions mathématiques et des nombres à virgule flottante. Le calcul de ces valeurs ralentit les performances. Si vous devez utiliser les routines mathématiques, envisagez de précalculer les valeurs et de les stocker dans un tableau de variables. L'extraction des valeurs d'une table de données est beaucoup plus rapide que leur calcul par Flash lors de l'exécution.

Gestion de la mémoire du fichier Flash Lite pour les périphériques mobiles

Flash Lite efface régulièrement de la mémoire les objets et les variables qui ne sont plus référencés par le fichier. Ce processus est appelé suppression des données inutiles. Flash Lite exécute ce processus toutes les 60 secondes ou lorsque l’utilisation de la mémoire du fichier augmente brusquement de 20 % ou plus.

Bien que vous ne puissiez pas contrôler la façon dont Flash Lite exécute ce processus et sa fréquence, vous pouvez cependant libérer la mémoire non utilisée. Pour un scénario ou des variables globales, utilisez l’instruction delete pour libérer la mémoire utilisée par l’objet ActionScript. Pour les variables locales, par exemple une variable créée par une fonction, vous ne pouvez pas utiliser l’instruction delete pour libérer la mémoire d’un objet ; en revanche, vous pouvez définir sur null la variable qui référence l’objet. Cette opération libère la mémoire utilisée par l’objet, à condition que cet objet ne soit pas référencé ailleurs.

Les deux exemples de code ci-après montrent comment libérer la mémoire utilisée par des objets en supprimant la variable qui y fait référence. Les exemples sont identiques, à ceci près que le premier crée une variable de scénario et le second crée une variable globale.

// Premier cas : variable associée à un film ou
// scénario de clip
//
// Créer l’objet Date.
var mcDateObject = new Date();
// Renvoie la date actuelle sous forme de chaîne.
trace(mcDateObject);
// Supprimer l’objet.
delete mcDateObject ;
// Renvoie non défini.
trace(mcDateObject);
//
// Deuxième cas : variable globale associée à un film ou
// scénario de clip
//
// Créer l’objet Date.
_global.gDateObject = new Date();
// Renvoie la date actuelle sous forme de chaîne.
trace(_global.gDateObject);
// Supprimer l’objet.
delete _global.gDateObject ;
// Renvoie non défini.
trace(_global.gDateObject);

Comme indiqué plus haut, vous ne pouvez pas utiliser l’instruction delete pour libérer la mémoire utilisée par une variable de fonction locale. À la place, définissez la référence de variable sur null, ce qui a le même effet que l'utilisation de delete.

function func()

{ 

    // Créer l’objet Date. 

    var funcDateObject = new Date(); 

    // Renvoie la date actuelle sous forme de chaîne. 

    trace(funcDateObject); 

    // La suppression n’a aucun effet. 

    delete funcDateObject ; 

    // Renvoie toujours la date actuelle. 

    trace(funcDateObject); 

    // Définissez la référence d’objet sur null. 

    funcDateObject = null ; 

    // Renvoie la valeur null. 

    trace(funcDateObject); 

} 

// Appeler la fonction func(). 

func();func();

Chargement de données pour des périphériques mobiles dans Flash Lite

Lors du développement de fichiers pour les périphériques mobiles, réduisez la quantité de données que vous essayez de charger en une seule fois. Si vous chargez des données externes dans un fichier Flash Lite (par exemple, à l'aide de XML.load), le système d'exploitation de l'appareil peut générer une erreur de « défaillance de la mémoire » si la mémoire allouée aux données entrantes est insuffisante. Cette situation peut se produire même si la quantité totale de mémoire restante est suffisante.

Par exemple, supposons que votre fichier tente de charger un fichier XML de 100 Ko, alors que le système d’exploitation du périphérique n’a affecté que 30 Ko pour la gestion de ce flux de données. Dans ce cas, Flash Lite affiche un message d’erreur indiquant que la mémoire disponible est insuffisante.

Pour charger de grandes quantités de données, regroupez les données en plus petits éléments (par exemple, dans plusieurs fichiers XML) et effectuez plusieurs appels de chargement de données pour chaque élément. La taille de chaque donnée, et par conséquent le nombre d’appels de chargement de données que vous devez effectuer, varie selon le périphérique et le fichier. Pour déterminer le juste équilibre entre le nombre de demandes de données et la probabilité d’une défaillance de la mémoire, testez les fichiers sur différents périphériques cibles.

Pour des performances optimales, évitez de charger et d’analyser les fichiers XML. À la place, stockez les données dans des paires nom/valeur simples et chargez les données à partir d'un fichier texte en utilisant loadVars ou à partir de fichiers de SWF précompilés.

Exclusion de classes de la compilation pour Flash Lite

Pour réduire la taille d’un fichier SWF, il peut être nécessaire d’exclure des classes de la compilation, tout en ménageant un accès à ces dernières pour leur exploitation et la vérification du type. Par exemple, cette opération peut être nécessaire si vous développez un fichier qui a recours à plusieurs fichiers SWF ou bibliothèques partagées, notamment celles qui accèdent à de nombreuses classes identiques. L’exclusion de classes permet d’éviter la duplication de classes dans ces fichiers.