Optimiser Publicites Flash Action Script 3

8/3/2019 Optimiser Publicites Flash Action Script 3

1/60

L'Optimisation des Publicits Flash

Auteur : Thibault Imbert : http://www.byterarray.org

Traduction par Matthieu Deloison : http://www.actionscript-facile.com Page 1 / 60
http://www.byterarray.org/http://www.actionscript-facile.com/http://www.actionscript-facile.com/http://www.byterarray.org/


2/60


Ce livret vous a t remis par le site ActionScript-Facile.com.

Vous pouvez librement l'imprimer, le prter, le distribuer ou le faire suivre undveloppeurqui apprciera les conseils et stratgies de programmation actionscriptprsentes ici.

Si vous souhaitez partager directement l'adresse du site web, o j'explique en vidocomment crer simplement une application flash robuste et volutive, visitez :

http://www.actionscript-facile.com/

Livret de Formation

Ecrit par Thibault Imbert : http://www.bytearray.org/?p=1586

Traduction par Matthieu Deloison : http://www.actionscript-facile.com/


http://www.actionscript-facile.com/http://www.actionscript-facile.com/http://www.bytearray.org/?p=1586http://www.actionscript-facile.com/http://www.byterarray.org/http://www.actionscript-facile.com/http://www.actionscript-facile.com/http://www.actionscript-facile.com/http://www.actionscript-facile.com/http://www.bytearray.org/?p=1586http://www.actionscript-facile.com/http://www.byterarray.org/


3/60


Table des matires

INTRODUCTION..............................................................................................................................4

Loptimisation des publicits........................................................................................................4LES OPTIMISATIONS GRAPHIQUES.............................................................................................5

Qualit des animations et options de rendu du texte...................................................................5

Le frame rate (le nombre d'images par seconde).........................................................................9

Optimisation des images vectorielles.........................................................................................16

Bitmaps contre les Vecteurs......................................................................................................22

Bitmap mise en cache................................................................................................................24

La mauvaise utilisation de cacheAsBitmap................................................................................26

Utiliser les filtres correctement...................................................................................................31L'abus de l'alpha blending..........................................................................................................35

Supprimez la transparence des DisplayObject..........................................................................36

Offstage content........................................................................................................................ 37

Optimiser le rendu avec l'option redraw regions .................................................................. 39

L'Optimisation des Publicits Flash..............................................................................................1

TRAVAILLER AVEC LA VIDEO.....................................................................................................43

Remplacez les effets coteux par de la vido............................................................................44

OPTIMISATIONS ACTIONSCRIPT................................................................................................47

Dsactiver les DisplayObjects correctement..............................................................................47

Travailler avec les Timers..........................................................................................................52

Les interactions avec la souris...................................................................................................56

CONCLUSION...............................................................................................................................57

C'EST MAINTENANT !..................................................................................................................58

PRISE DE NOTES......................................................................................................................... 59




4/60


INTRODUCTION

Projet v 1.1

Par Thibault Imbert.

Loptimisation des publicits

Avant de vous expliquer comment optimiser les bannires publicitaires, il est important devous signaler quil existe diffrents niveaux de bannires Flash.

Voici un rsum de cette liste :

Animation manuelle : la publicit est anime manuellement, toutes les animationssont faites sur la timeline ou la scne (sans Actionscript).

A moiti dynamique : la publicit est compose danimation manuelle et danimationdynamique (en actionscript).

Compltement dynamique : lanimation de la publicit est entirement construite enActionscript.

La performance pour le rendu est le facteur le plus important concernant les optimisationsFlash.

Quelque soit le type de contenu que vous crez, le rendu est un des lments qui peuttre facilement amlior et vous pouvez ainsi obtenir des amliorations de performancesnormes.

Cest la raison pour laquelle ce livre se focalise sur les optimisations du rendu.

Des publicits peuvent avoir besoin de code.

Pour cette raison, nous allons dcouvrir, la fin de ce livre, les erreurs typiques de codespour toutes les versions dActionscript.

Parce que les publicits, cres chaque jour, utilisent diffrentes versions dActionscript.Des dveloppeurs utilisent encore Actionscript 1, dautres Actionscript 2 ou 3.




5/60


LES OPTIMISATIONS GRAPHIQUES

Qualit des animations et options de rendu du texte

Utiliser la qualit du stage la plus approprie.

A chaque fois que vous dveloppez du contenu flash, partir des applications stylePublicits, choisissez la qualit du Stage de l'animation, qui prsente une optimisationadquate.

En utilisant la qualit du Stage adquate, les performances de rendu peuvent grandementtre amliore.

Ces paramtres de configuration de la qualit du Stage sont disponibles en Actionscript 3 :

StageQuality.LOW : amliore la vitesse de lecture de l'apparence mais n'utilise pasl'anti-aliasing.

StageQuality.MEDIUM : appliquer de l'anti-aliasing mais pas d'optimisation sur lesbitmaps not smooth bitmaps.

StageQuality.HIGH : (option par dfaut) amliore la vitesse de lecture et utilisetoujours l'anti-aliasing. Si le SWF ne contient pas d'animation, les bitmaps sont

bitmaps are smoothed, si le SWF contient des animations, bitmaps are notsmoothed.

StageQuality.BEST : fournit la meilleure qualit et ne prend pas en compte lavitesse de lecture. Tous les lments possdent l'anti-aliasing et les bitmaps sonttoujours lisss.

La qualit de lapplication swf peut tre configure via une simple ligne de code, partir dela proprit quality de lobjet stage :

stage.quality = StageQuality.MEDIUM;

L'quivalent en AS1/AS2 version est :

_quality = "medium";

En AS3, l'objet Stage est rfrenc par n'importe quel DisplayObject ajout la displaylist.

Cependant, la qualit du Stage peut tre rgle partir du panneau paramtre depublication.




6/60


La copie d'cran ci-dessous vous montre les options de qualit de l'animation.

Figure 1.1

Mettez la qualit du Stage Medium, le texte utilise l'ant i-alias pour l'animation.

En utilisant la qualit Medium, cela fournit souvent une qualit suffisante si des bitmapssont utilises, dans quelques cas rares, la qualit Low est suffisante, mais ce n'est passouvent.

Un truc trs simple retenir est que dans le Flash Player 8, le texte anti-alias peut trerendu avec prcisions, mme avec la qualit du Stage Low.

Dans l'image ci-dessous, la qualit de l'animation est rgle sur Medium, et le rendu dutexte anti-alias est activ pour l'animation :

Figure 1.2

La qualit du Stage est rgl Medium, le texte utilise l'anti-alias pour l'animation.




7/60


Dans l'image ci-dessus, les paramtres de qualit du Stage affecte la qualit du texteparce que nous n'utilisons l'option de rendu de texte approprie.

Dans le Flash Player 8, une amlioration du texte inclus une option appele anti-alias

pour la lisibilit. Ce rglage permet d'obtenir une qualit parfaite de votre texte anti-aliasquelque soit la qualit du Stage et la version Actionscript utilis.

Dans l'image ci-dessous, la qualit de l'animation est rgl sur StageQuality.LOW et lerendu anti-alias du texte est activ pour la lecture :

Figure 1.3

La qualit du Stage est rgle Low, le texte utilise l'anti-alias pour la lecture.




8/60


La mme qualit de rendu peut tre obtenu en mettant le paramtre de rendu du texte bitmap Text (sans anti-alias).

Dans l'image suivante, la qualit de l'animation est rgle Low, et le rendu du texte

configur Bitmap Text :

Figure 1.4

La qualit du Stage est rgle Low, le texte utilise du texte bitmap.

Les 2 prcdents exemples montrent clairement qu'il est possible d'obtenir un rendu dehaute qualit du texte, sans utiliser le paramtre qualit du Stage.

Cette fonctionnalit est disponible depuis le Player Flash 8 et peut tre utilis dans lamajorit des cas.

Rappelez-vous, depuis la version 10.1, le Player Flash peut automatiquement passer enqualit Medium sur les appareils mobiles pour augmenter les performances.




9/60


Le frame rate (le nombre d'images par seconde)

N'utilisez jamais un frame rate au dessus de 30 ou 40 fps. Le Player Flash 10.1 est incapablede grer plus de 60fps.

En gnral, utilisez le framerate le plus faible possible pour des meilleures performances.

Le framerate d'une application dtermine combien de temps est disponible pour un cycledu rendu du code de l'application.

Un framerate lev peut crer des animations plus fluides.

Toutefois, lorsqu'il n'y a pas d'animation ou d'effets visuels, il n'y a aucune raison d'avoirun framerate lev.

Ci-dessous, des recommandations gnrales pour choisir le framerate adquate pourvotre application :

Si votre application contient des animations, le framerate adquate est de 20images par secondes. Plus de 30 images par secondes n'est pas souventncessaire.

Si votre application ne contient pas d'animation, un framerate de 12 images parsecondes est probablement suffisant.

Le framerate le plus bas possible varie en fonction de l'activit d'affichage de votreapplication.

Utilisez un framerate faible lorsque la vido est le seul lment dynamique de votreapplication.

Au dmarrage, le runtime lance la lecture d'une vido charge, au framerate par dfaut devotre application.

Si votre application ne possde pas d'animation ou de changement visuel du contenurapide, utiliser un framerate bas ne dgrade pas l'exprience de l'utilisateur.

Lorsque l'animation est termine, le framerate d'origine est utilis de nouveau.

Rappelez-vous que sur les mobiles et netbooks, une nouvelle fonctionnalit est apparueavec le Flash Player 10.1, intitule 'Pause and Resume automatiquement lorsque le swfest considr comme inactif (cran teint et cran rallum).




10/60


Sur le mme principe, le but de cette fonctionnalit est de limit l'utilisation du CPU. Il y ades consignes gnrales suivre pour dterminer le nombre d'images par secondesadquate en fonction du type d'activit :

Lorsqu'une animation est joue,utilisez un minimum de 20 images par secondes.Plus de 30 images par secondes est souvent inutile.

Lorsqu'aucune animation n'est joue, un framerate de 12 images par secondes estprobablement suffisant.

Les vidos charges sont joues au framerate natif de l'application. Si la vido estle seul contenu anim de votre application, un framerate de 12 images parsecondes est probablement suffisant.

Quand l'application n'a pas la focus (la main), un framerate de 5 images parsecondes est suffisant.

En supplment de cela, le Flash Player 10.1 implmente ces nouvelles options : Le framerate maximum est de 60fps pour les systmes de bureau. Il n'y a pas de

maximum pour les mobiles (60 fps est trop lev), mais nous respectons uneconsigne d'environ 30fps.

Tous les players de bureau sont concerns.

L'application AIR n'a pas de consigne.

EnterFrame peut fonctionner jusqu' 60fps.

Les appels LocalConnection prennent moins de 33ms pour s'excuter.

Les vnements Timersont limits 60 appels par secondes.

Publier un swf avec moins de 60fps est correct car le Player Flash peut grer un maximumde 60fps.

Rappelez-vous que vous pouvez modifier dynamiquement le framerate, pour le rduirelorsqu'il n'y a pas d'animation.

Vous pouvez dfinir le framerate par dfaut de l'application dans les paramtres decompilation ou le projet, mais le framerate n'est pas bloqu cette valeur.

Vous pouvez changer cette valeur avec le paramtre stage.frameRate.

Cette fonctionnalit n'est seulement disponible qu'avace l'AS3.

Donc, la publication de votre SWF avec une cadence suprieure 60 est inutile, vu que leplafonnement du Flash Player est un maximum de 60 images par seconde.

Mettez jour le framerate en fonction des besoins de votre application.




11/60


Diminuez le framerate quand votre application n'excute aucune animation.

Le code ci-dessous vous montre un exemple de mise en pratique, la fin de la tween, le

framerate passe 0 :import aze.motion.eaze;

import aze.motion.easing.Cubic;

var standbyFrameRate:uint = 0;

// final x position var destX:uint = 200;

// cration d'une animation synamique avec le framework Eaze - url :http://code.google.com/p/eaze-tween/ eaze(myMovieClip).to(2, { x:destX })

.onComplete(handler)

.easing(Cubic.easeInOut);

function handler ():void

{

// une fois l'animation termine

// mise jour dynamique du framerate

stage.frameRate = standbyFrameRate;

}

Lorsque l'animation dmarre, augmentez le framerate.

De la mme faon, si votre publicit est excute en tche de fond (aprs la perte dufocus), vous pouvez diminuer le framerate.

L'utilisateur est susceptible d'tre port sur une autre application ou une tche.


http://code/http://code/http://www.byterarray.org/http://www.actionscript-facile.com/http://www.actionscript-facile.com/http://code/http://www.byterarray.org/


12/60


Dans le code ci-dessous, nous coutons les vnements Event.ACTIVATE etEvent.DEACTIVATE, et nous mettons jour dynamiquement le framerate 0 quandl'animation perd le focus (passage un autre onglet) :

var originalFrameRate:uint = stage.frameRate; var standbyFrameRate:uint = 0;

stage.addEventListener ( Event.ACTIVATE, onActivate ); stage.addEventListener( Event.DEACTIVATE, onDeactivate );

function onActivate ( e:Event ):void

{

// restauration du framerate par dfaut de l'application

stage.frameRate = originalFrameRate;

}

function onDeactivate ( e:Event ):void

{

// mise 0 du framerate

stage.frameRate = standbyFrameRate;

}

Note : ces vnements sont disponible uniquement en ActionScript 3.

Mais attendez, il y a mieux, en optimisant les chapes correctement, vous pouvez gagnezune amlioration significative des performances, dcouvrons cela tout de suite.




13/60


Dans l'image ci-dessous, la qualit de l'animation est rgle sur Medium, et le rendu dutexte anti-alias est activ pour l'animation :

Figure 1.2

La qualit du Stage est rgl Medium, le texte utilise l'anti-alias pour l'animation.

Dans l'image ci-dessus, les paramtres de qualit du Stage affecte la qualti du texteparce que nous n'utilisons l'option de rendu de texte approprie.

Dans le Flash Player 8, une amlioration du texte inclus une option appele anti-alias

pour la lisibilit.

Ce paramtre permet d'obtenir une qualit parfaite de votre texte anti-alias quelque soit laqualit du Stage et la version Actionscript utilis.




14/60


Dans l'image ci-dessous, la qualit de l'animation est rgl sur StageQuality.LOW et lerendu anti-alias du texte est activ pour la lecture :

Figure 1.3

La qualit du Stage est rgle Low, le texte utilise l'anti-alias pour la lecture.

La mme qualit de rendu peut tre obtenu en mettant le paramtre de rendu du texte bitmap Text (sans anti-alias).

Dans l'image suivante, la qualit de l'animation est rgle Low, et le rendu du texteconfigur Bitmap Text :

Figure 1.4

La qualit du Stage est rgle Low, le texte utilise du texte bitmap.




15/60


16/60


Optimisation des images vectorielles

Toujours simplifier les vecteurs en enlevant les points de contrles inutiles.

Diffremment des bitmap, rappelez-vous toujours que les images vectorielles peuventavoir besoin de beaucoup de calculs pour le rendu, surtout lors de l'utilisation de dgradet des chemins complexes avec beaucoup de points de contrles.

Que vous soyez designer ou dveloppeur, assurez-vous toujours que les formes soientoptimises.

L'image ci-dessous, vous montre des formes non simplifi, avec beaucoup de points decontrles :

Figure 1.5

Image vectorielles non optimise.




17/60


En utilisant l'outil Lissage, vous pouvez enlever les points de contrles inutiles trsfacilement.

Ci-dessous, une copie d'cran d'Adobe Flash Pro :

Figure 1.6

Outil Lissage dans Adobe Flash.

Rappelez-vous que cet outil est cumulatif, en simplifiant les chemins, le rsultat final del'image peut tre altr.

Quand il est utilis intelligemment, il y a peu de chance qu'un il humain peroive dediffrence.




18/60


Un outil quivalent s'appelant Simplify, est disponible dans Adobe Illustrator, le nombretotal de points et les chemins peuvent tre lu partir du panneau d'information dudocuments.

Ci-dessous, une copie d'cran qui illustre ce panneau et l'outil :

Figure 1.7

Outil Simplify dans Adobe I llustrator.




19/60


Une fois optimis, les points de contrles inutiles sont supprims, cela rduit la taille duswf cr, et peut agment significativement les performances du rendu.

L'image suivante montre les chemins une fois optimiss :

Figure 1.8

Vecteurs Optimis .

Remarquez le nombre trs limit de points de contrle maintenant.

Le rsultat est que l'image finale est plus lgre avec un rendu plus rapide.




20/60


21/60


L'outil Simplify est aussi disponible dans Flash Pro, avec le menu Shape :

Figure 1.10

Outil Optimize dans Adobe Flash Pro.

Dans Adobe Illustrator, les courbes peuvent tre simplifies et optimises avec le

panneau optimisation comme illustr ci-dessous :

Figure 1.11

Optimisation des courbes avec la prvisualisation active.

Avec la case cocher prvisualisation, il est possible de voir le rsultat final, une foisoptimis.

Gardez l'esprit que ces optimisations peuvent tre ralises dans Adobe Illustrator ouAdobe Flash, en fonction de cadre de travail.




22/60


Bitmaps contre les Vecteurs

Dans certains cas, les bitmaps peuvent tre plus petite que les vecteurs avec un rendubeaucoup plus rapide.

Gnralement, les lments devenant imposant en taille sont raliss vectoriellementplutt qu'avec des bitmaps.

C'est un des nombreux avantages des vecteurs. C'est gnralement vraie pour le contenuvectoriel simple, mais souvent beaucoup de points de contrle sont utiliss, un versionbitmap du contenu peut tre plus lger.

L'image ci-dessous illustre un trac bitmap, pour convertir une image bitmap en vecteur,les paramtres utiliss pour le rendu sont des couleurs simplifies :

Figure 1.12

Image Bitmap.




23/60


24/60


Bitmap mise en cache

Utilisez le cache des bitmaps quand le texte se dplace ou pour le contenu vectoriel complexe l'cran.

Une autre optimisation importante peut tre effectue en utilisant la fonctionnalit decache des bitmap, apparue avec le Flash Player 8.

Cette fonctionnalit met en cache un objet vectoriel, le rendu est fait partir d'un bitmapinterne.

Le rsultat est un gain de performance pour le rendu, mais il est ncessaire d'utiliserbeaucoup de mmoire.

Rappelez-vous d'utiliser toujours la fonctionnalit de cache des bitmaps pour les imagesvectorielles complexes, comme des dgrads ou du texte, seulement quand c'estncessaire. Nous reviendrons sur cela plus tard dans ce document.

Dans Adobe Flash, cette fonctionnalit s'appelle Cache as bitmap et est activable viaune case cocher :

Figure 1.13

Fonctionnalit de cache d'un bitmap.

Note : cette case cocher n'apparait pas avec un TextField. En utilisant un TextFielddans un MovieClip, il est possible d'obtenir le mme rsultat de Cache as bitmap avec lecontainerMovieClip.




25/60


Rappelez-vous que cette fonctionnalit peut tre active ou dsactive dans toutes lesversions ActionScript, avec le paramtre cacheAsBitmap sur un TextField, ou un Buttonou un MovieClip.

myTextField.cacheAsBitmap = true; myButton.cacheAsBitmap = true;myMovieClip.cacheAsBitmap = true;

En ActionScript 3, tous les DisplayObject posscent cette proprit :

myDisplayObject.cacheAsBitmap = true;

Pour ce rsultat, vous utilisez un peu plus de mmoire mais avec des performances derendu amliores et qui demande peu de ressources CPU, et qui consomme moins lesbatteries des mobiles et ordinateurs portables.

videmment, il n'y pas d'intrt activer cette option de cache sur un bitmap ou uncontenant MovieClip un bitmap.

Le cache de bitmap doit tre activ sur le contenu vectoriel uniquement.

Attention, avec les filtres dynamiques sur les bitmap, cette fonctionnalit doit tre utiliseavec prcaution, sinon vous obtiendrez l'effet inverse.




26/60


La mauvaise utilisation de cacheAsBitmap

N'utilisez jamais le cache as bitmap sur du contenu qui doit tre translat en x et y.

Rappelez-vous, activer le cache as bitmap sur un objet anim (translat en x et y) quicontient des graphismes vectorielles complexes (comme du texte ou des dgrads)amliore les performances.

Modifier les proprits x et y d'un objet n'implique une recration de celui-ci.

Attention, toute rotation, scale ou modification de l'alpha provoque, dans le Player Flash,une recration de la version cach du bitmap, et par consquent, une diminution desperformances.

Suivant le mme principe, si le cache as bitmap est activ sur un Display Object commeun movieclip, qui contient ses propres lments imbriqus, sur chaque frame, le PlayerFlash met jour le cache des bitmap et les recalcule sur l'cran, ce qui demande plus deressources CPU et peut diminuer la vitesse du rendu.

Note : La fonctionnalit de cache d'un bitmap est intressante seulement quand le cacheest gnr une seule fois, sans avoir besoin de le mettre jour.

Un bitmap en cache peut utiliser plus de mmoire qu'une instance d'un movieclip.

Par exemple, si le movieclip sur le Stage est de 250 x 250 pixels, quand il est en cache, ilutilise 240 KB (250*250*4/1000), au lieu d'1 KB non cach.

Une autre solution pour amliorer le rendu et utiliser moins de CPU est de supprimer latransparence des MovieClip en utilisant la proprit opaqueBackground, avec laquelle ilest possible d'ajouter une couleur opaque de fond au MovieClip.

En enlevant la transparence, le contenu du Player Flash est affich plus vite enconsommant moins de ressources CPU et en augmentant le framerate global.

Note : si l'a proprit opaqueBackground d'un Display Object est mise une couleurspcifique, le Player Flash considre le Display Object comme opaque.

Lorque la proprit cacheAsBitmap est utilis, le Player Flash cre un bitmap de 32 bits

non transparent dans la mmoire.




27/60


Le canal alpha est mis 0xFF, ce qui amliore les performances, parce qu'il n'y a pasbesoin de transparence pour dessiner la bitmap l'cran.

Supprimer l'alpha donne un rendu plus rapide.

Si la profondeur de l'cran courant est limit 16 bits, alors une bitmap est stock enmmoire sur 16 bits.

Utiliser la proprit opaqueBackground, n'implique pas forcment d'activer le cache asbitmap.

Pour sauvegarder en mmoire, utilisez la proprit cacheAsBitmap et activez l surchaque Display Object, et galement pour le container.

L'activation du cache as bitmap sur le container cre un bitmap plus lourd en mmoire, encrant un bitmap transparent avec les dimensions de 211 x 279 pixels.

Cette image utilise environ 229 KB en mmoire :

Figure 1.14

Mauvaise utilisation, activer le cache as bitmap sur le container.




28/60


29/60


L'image ci-dessous illustre une situation o le cache bitmap est utilis efficacement :

: Figure 1.16

Le MovieClip se dplace sur les axes x et y.

Le MovieClip se dplace sur les axes x et y sans application d'autre transformation.




30/60


31/60


Utiliser les filtres correctement

Essayez de limiter l'utilisation des filtres; ou utilisez les en basse qualit ou mieux, utilisez desvidos.

Les filtres sont accessibles dans le panneau filtre d'Adobe Flash comme l'image ci-dessous :

Figure 1.18Panneau des filtres dans Adobe Flash.

Nous pensons que les filtres dans Flash sont identiques aux filtres de Photoshop, qu'ilsn'utilisent pas beaucoup de ressources CPU.




32/60


33/60


34/60


35/60


L'abus de l'alpha blending

Essayez de limiter l'utilisation des effets de transparence.

Les designers et dveloppeurs ont tendance utiliser des effets d'alpha, qui aident obtenir un affichage sympa, mais l'alpha est extrmement coteux en terme deperformances CPU.

vitez d'utiliser les effets ncessitant l'alpha en utilisant la proprit alpha, comme effetsde fondu.

Rappelez-vous que l'alpha ncessite normment de ressources CPU pour le PlayerFlash et peut nuire aux performances sur les machines lentes.




36/60


Supprimez la transparence des DisplayObject

La suppression de la transparence des DisplayObject amliore les performances de rendu.

Pour viter au Flash Player les rendus de transparence, nous pouvons supprimer latransparence des fond des display objects en utilisant la proprit (de toutes les versionsActionScript) opaqueBackground.

Cette optimisation est trs intressante pour le rendu de texte pour lesquels il y a desdessins complexes ou coteux.

Le code ci-dessous montre comment supprime la transparence en renseignant unecouleur opaque pour le fond :

myTextField.opaqueBackground = 0xFFFFFF;

En combinant cacheAsBitmap et opaqueBackground, nous pouvons optimiser le renduencore plus, le bitmap gnr en cache est opaque et le rendu est plus rapide :

myTextField.opaqueBackground = 0xFFFFFF;

myTextField.cacheAsBitmap = true;

Pour plus d'information propos de cela, rendez-vous sur Rendu des objets textes dans le paragraphe Optimisation des performances pour la plateforme Adobe Flash sur le guide disponible ici : http://www.adobe.com/go/optimize


http://www.adobe.com/go/optimizehttp://www.byterarray.org/http://www.actionscript-facile.com/http://www.actionscript-facile.com/http://www.adobe.com/go/optimizehttp://www.byterarray.org/


37/60


38/60


39/60


Optimiser le rendu avec l'option redraw regions

Utilisez toujours l'option redrax regions est pratique pour visualiser ce qui est redessiner etqui consomme du CPU.

L'option redraw regions est trs intressante pour tous les projets Flash sur lesquelsvous travaillez.

L'option "redessiner les rgions" est presque obligatoire pour chaque projet Flash surlequel vous travaillez.

Cela vous permet de trouver facilement ce qui est en cours de rendu et ce que le FlashPlayer affiche rellement comme rendu.

Cela vous permet de dtecter des zones inutiles redessin et de les corriger ce pouroptimiser le rendu, un outil trs pratique pour le rendu.

L'option redraw regions peut tre active sans code, avec un click droit sur le SWFexcut, en cochant show redraw regions dans le menu contextuel :

Figure 1.24

L'option Show Redraw Regions est disponible dans la version debug du FlashPlayer.




40/60


41/60


42/60


En utilisant l'option redraw regions , nous voyons clairement que ce MovieClip utilisetoujours du calcul pour le rendu :

Figure 1.26

L'option Show Redraw Regions permet de voir le contenu cach en cours derendu.

L'option redraw regions devrait toujours tre utilis pour comprendre le cot de rendu

de chaque lment graphique dans votre animation.




43/60


TRAVAILLER AVEC LA VIDEO

Encodez une vido en utilisant des images lentes et vitez la transparence lorsque c'est

possible.

Les publicits contiennent souvent des vidos et c'est important que vos publicitspuissent aussi tre visualises sur les appareils mobiles. Pour amliorer les performances,rappelez-vous ces points :

Seulement les vidos H.264 sont acclres matriellement sur les mobiles et lebureau dans le Flash Player 10.1.

La fonction de dcodage matriel n'affecte pas la lecture de Sorensen Spark ouOn2 VP6-encod.

Assurez-vous de toujours utiliser le codec H.264 quand c'est possible et n'utilisez pas unframerate lev dans les vidos.

De plus, vitez la transparence dans les vidos.

Quelques motion designer sont tents d'utiliser la transparence dans les vidosembarques dans des MovieClip.

Dans tous les cas, la transparence est toujours plus consommatrice en rendu que lecontenu opaque.




44/60


45/60


46/60


Chaque toile est compose d'un petit rond avec un dgrad de couleur qui est animavec une oscillation transparente entre 0 et 100%.

L'image suivante explique cette ide :

Figure 1.29L'animation des toiles avec un dgrad et de l'alpha.

Sur l'image 1.28, il y a environ 400 ou 500 toiles qui sont animes, ce qui demandebeaucoup de calculs pour le Player Flash.

Si vous utilisez un fond de ce style, cela ncessite beaucoup de ressources CPU.

Une meilleure implmentation est d'utiliser une vido pour cette animation, exporte partir de Flash CS5 et plac sur le stage comme un fond.

Vous conomisez ainsi des ressources CPU et cr une meilleure exprience de flou.

En utilisant le codec H.264, il y a de grandes chances que l'acclration du GPU soientutilises par toutes les plate-formes (Windows, Mac et les appareils mobiles).

Note : rappelez-vous de ne pas utiliser la vido pour tout, mais seulement lorsque cela estappropri. Utilisez des douzaines de vidos dans des objets anims avec des filtres sera

pire que l'animation graphique sur la timeline.




47/60


48/60


49/60


Note : si un display object est supprim de la display list, en dfinissant sa rfrence nullaprs sa suppression, cela ne garantit pas sa suppression de la mmoire.

Si le garbage collector ne s'excute pas, l'objet continue de consommer de la mmoire et

du CPU, tout le temps que l'objet n'est pas affich.

Pour vous assurer que l'objet consomme le minimum de CPU que possible, vrifiez sasuppression complte de la display list.

Depuis le Player Flash 10, si le tte de lecture rencontre une frame vide, le display objectest automatiquement supprim mme si vous ne l'avez pas spcifi par le code.

Le concept de suppression est aussi important pour le chargement de contenu distantavec la classe Loader.

Lorsque vous utilisez la classe Loader avec le Player Flash 9 en ActionScript 3, il estncessaire de supprim manuellement le contenu en coutant l'vnementEvent.UNLOAD, envoy par l'objet LoaderInfo.

Chaque objet doit tre manuellement supprim, ce qui n'est pas une tche facile.

Le Player Flash 10 a ajout une importante nouvelle mthode sur la classe Loaderquis'appelle unLoadAndStop.

Cette mthode permet de supprimer un fichier swf, automatiquement, pour chaque objetcharg dans un fichier swf, et oblige le garbage collector s'excuter.

Dans le code ci-dessous, un fichier swf est charg et supprim en utilisant la mthodeunload, ce qui ncessite pas plus de ressources qu'une suppression manuelle.

var loader:Loader = new Loader();

loader.load ( new URLRequest ( "content.swf" ) ); addChild ( loader );

stage.addEventListener ( MouseEvent.CLICK, unloadSWF );

function unloadSWF ( e:MouseEvent ):void

{

// Suppression du SWF file sans une dsactivation automatique de l'objet

// Toutes les dsactivations doivent tre faites manuellement

loader.unload();

}




50/60


Une meilleure pratique est d'utiliser la mthode unLoadAndStop, ce qui supprime lesobjets et oblige l'excution du garbage collector :

var loader:Loader = new Loader();

loader.load ( new URLRequest ( "content.swf" ) ); addChild ( loader );

stage.addEventListener ( MouseEvent.CLICK, unloadSWF );

function unloadSWF ( e:MouseEvent ):void

{

// Suppression du SWF file avec une dsactivation automatique de l'objet

// Toutes les dsactivations sont faites automatiquement

loader.unloadAndStop();

}

Les actions suivantes sont effectues lorsque la mthode unLoadAndStop est appele :

Les sons sont stopps.

Les couteurs enregistrs sur le fichier swf sont supprims.

Les objets Timer sont stopps.

Les appareils matriels (comme la camra et le micro) sont dsactivs.

Tous les MovieClip sont stopps.

L'envoie des vnements Event.ENTER_FRAME,Event.FRAME_CONSTRUCTED, Event.EXIT_FRAME, Event.ACTIVATE etEvent.DEACTIVATE sont arrts.




51/60


Depuis le Player Flash 9, lorsqu'une imag cl blanche survient, le contenu graphique estsupprim du stage (display list) comme si l'API removeChild avait t appele :

Figure 1.30Comportement ActionScript 3 de la timeline (depuis le Player Flash 10).

Une amlioration importante a t apporte dans le Player Flash 10, lorsque les objets

graphiques envoyaient l'vnement Event.ENTER_FRAME sont maintenantautomatiquement dsactivs,

Figure 1.31

Comportement ActionScript 3 de la timeline (depuis le Player Flash 10).

Pour plus d'informations propos de cela, rendez-vous sur le chapitre freezing andunfreezing dans le guide optimiser les performances pour la plateforme Adobe Flash ,disponible ici : http://www.adobe.com/go/optimize

Note : cette fonctionnalit est seulement disponible pour l'AS3.

En AS1 / AS2, une image cl blanche dsactive totalement les objets graphiques qui sontsupprims du stage comme MovieClip.removeMovieClip.

Lorsque vous travaillez avec des publicits, il peut arriver qu'il soit ncessaire desynchroniser les animations, le Timer est utilis pour cela.

Nous allons dcouvrir les piges classiques viter lors de l'utilisation des Timers.


http://www.adobe.com/go/optimizehttp://www.byterarray.org/http://www.actionscript-facile.com/http://www.actionscript-facile.com/http://www.adobe.com/go/optimizehttp://www.byterarray.org/


52/60


Travailler avec les Timers

N'utilisez jamais des Timers avec des intervalles court (moins d'une dure de 1000ms)dansvos SWF.

Les Timers sont souvent utiliss par les designers et les dveloppeurs pour lefonctionnement des tweens. Si l'intervalle utilis est trop court, cela peut vraiment viderune batterie et consommer beaucoup de ressources CPU.

Note : choisissez entre le Timers ou l'vnement ENTER_FRAME, en fonction du contenuanim. Les Timers sont prfrables que l'vnement Event.ENTER _FRAME pour lecontenu non anim, qui s'excute sur une priode longue.

Quelque soit la version ActionScript utilise, il y a 2 solutions pour appeler une fonction un intervalle donn.

La premire solution est d'utilis l'vnement Event.ENTER_FRAME envoy par lesobjets interactifs en ActionScript 3 ou l'vnement enterFrame en AS1 / AS2.

La deuxime solution est d'utiliser un objet Timer en ActionScript 3 et le setInterval en AS1/ AS2.

Les dveloppeurs ActionScript utilisent souvent l'vnement enterFrame.

Avec comme rsultat, l'intervalle avec lequel la fonction est appele est en fonction duframerate.

Le framerate est accessible avec la proprit frameRate de l'objet stage en ActionScript 3.Attention, dans certains cas, l'utilisation du Timer est un choix plus judicieux quel'vnement entreFrame.

Par exemple, si vous n'utilisez pas d'animation, mais que vous voulez appelez votre code des intervalles spcifiques, utilisez un Timer ou un setInterval peut tre un choixjudicieux.

Un Timer se comporte d'une faon similaire un vnement enterFrame, mais unvnement peut tre envoy sans tre li la vitesse de dfilement (le fps).

Ce comportement peut offrir une optimisation significative.




53/60


54/60


Comme le framerate d'un fichier swf, la mise jour du framerate du Timer peut varier danscertains cas :

Note : conomisez le nombre d'objets Timer et d'couteur enterFrame dans votre

application.

A chaque frame, le runtime envoie un vnement Event.ENTER_FRAME ou enterFramepour chaque display object dans la display list.

Aussi, vous pouvez enregistrer des couteurs pour l'vnement Event.ENTER_FRAMEavec plusieurs display objects,

Centralisez tout le code qui s'excute frquemment.

De mme, si vous utilisez des objets Timer, il est prfrable

De mme, si vous utilisez des objets Timer, il y a une surcharge CPU associe lacration et l'envoi d'vnements provenant d'objets Timer multiples.

Si vous devez dclencher les diffrentes oprations diffrents intervalles, voici quelquessolutions proposes:

Utilisez un nombre minimum d'objets Timer et regroupez les opration en fonctionde leur frquence.

Par exemple, utilisez un Timer pour les oprations frquentes, rglez l'appel toutesles 100ms. Utilisez un autre Timer pour les oprations moins frquentes ou entches de fond, rglez l'appel toutes les 2000ms.

Utilisez un objet Timer unique et avec des appels plusieurs fonction avec leparamtre delay.

Par exemple, imaginons que nous avons plusieurs oprations qui doivent tre appelestoutes les 1000ms, et d'autres toutes les 2000ms.

Dans ce cas, utilisez un objet Timer unique, avec un dlai de 1000ms.

Dans la fonction appele par le Timer, ajouter une condition pour l'appel une fois sur deuxpour les oprations toutes les 2000ms.




55/60


56/60


Les interactions avec la souris

Lorsque c'est possible, dsactivez les interactions avec la souris.

Lorsque vous utilisez des objets interactifs, comme un MovieClip ou un objet Sprite, lePlayer Flash excute du code en natif pour dtecter les mouvements de la souris.

La dtection des interactions avec la souris peut tre consommateur de CPU quand il y abeaucoup d'objets interactifs sur l'cran surtout si ils se chevauchent !

Une solution pour viter ces calculs est de dsactiver les interactions avec la souris sur lesobjets n'en ayant pas l'utilit.

Le code suivant vous montre l'utilisation des proprits mouseEnabled etmouseChildren en AS3 :

// Dsactivation des interactions avec la sourisavec cet InteractiveObject

myInteractiveObject.mouseEnabled = false;

const MAX_NUM:int = 10;

// Cration d'un container pour les InteractiveObjects

var container:Sprite = new Sprite();

for ( var i:int = 0; i< MAX_NUM; i++ )

{

// Ajout des InteractiveObject dans le container

container.addChild( new Sprite() );

}

// Dsactivation des interactions avec la souris sur tous les enfants

container.mouseChildren = false;

En AS1 / AS2, il nest pas possible de dsactiver les interactions de la souris.

A chaque fois que cest possible, dsactivez les interactions de la souris, cela permet deconsommer moins de ressources CPU, et de rduire lutilisation de la batterie.




57/60


CONCLUSION

Ce sont des optimisations trs simple qui peuvent tre appliques vos publicits pourobtenir de meilleures performances et de rapidit.

En faisant attention l'utilisation du processeur, l'exprience globale de l'utilisateur seraplus fluide.

Comme nous venons de voir, les optimisations ne sont pas lies uniquement ActionScript.

La plupart des optimisations efficaces, que vous pouvez appliquer vos publicits, sontlies de simples recommandations graphiques.




58/60


59/60


60/60

Optimiser Publicites Flash Action Script 3

Documents

Transcript of Optimiser Publicites Flash Action Script 3