begin process at 2010 02 10 08:57:55
  Trouver un code source :
 
dans
 
Accueil > 

Tutoriels

 > 

Tutoriaux

 > [FLASH] OPTIMISER SON ANIMATION POUR UN RENDU DE FAIBLE POIDS.

[FLASH] OPTIMISER SON ANIMATION POUR UN RENDU DE FAIBLE POIDS.


 Information sur le tutoriel

Note :
7,67 / 10 - par 27 personnes
7,67 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Tutorial

Flash - Optimiser son animation pour un rendu de faible poids.

Ce tutoriel a pour but d'apprendre à optimiser les animations sous Flash MX et Flash MX 2004.

 

Si vous voulez optimiser vos documents au maximum, il y a plusieurs astuces à connaître et plusieurs commandes de flash MX (ou MX 2004) à débusquer. Ce tutoriel sera divisé en trois parties :

I - Les astuces pour optimiser votre animation en général.

II - Optimistaion des images

III - Optimistaion des sons et musiques.

 

I - Les astuces pour optimiser votre animation en général.

Les astuces sont nombreuses et chaque utilisateur de Flash peut posséder les siennes.

Tout d'abord, il faut veiller à ne pas mettre plusieurs fois les mêmes graphismes dans la bibliothèque. Cela paraît peut-être ridicule mais c'est souvent négligé.
Ensuite, une chose importante est à savoir : sitôt que vous transformer une image en un symbole (graphisme, boutton ou MovieClip), vous pouvez utiliser autant d'occurence de cette image que vous le voulez, Flash réutilisera cette élément et n'en créera pas d'autre. La conséquence directe est que le poids de votre animation ne variera presque pas si vous mettez 1 ou 15 occurence d'un symbole. De plus, vous pouvez modifier ces symboles via ActionScript ou par l'interface de Flash.

Ainsi, il est bon de créer, lorsqu'on commence une animation, un ou deux symboles de formes réccurentes (rectangle, rond...) pour les utiliser comme bouton, comme remplissage, comme zone de clic invisible, etc...

Donc, en fait, si vous créez un rectangle de 40x10 px, vous pouvez l'utiliser pour remplir un plus grand zone. Par exemple, si vous faites une animation de 800x600, et que vous voulez un fond bleu, insérez votre rectangle sur la scène et entrez comme taille 800x600 et comme "couleur :" "teinte [bleu] à 100%". Ainsi votre animation aura un fond bleu de 800x600 qui n'aura le poids que d'un rectangle de 40x10.

 

II - Optimiser de images

Pour les images de gros poids, il y a un outils appelé Flash Optimizer, de SoftInfinity. Vous pouvez obtenir une description précise et télécharger le shareware ici :
http://softinfinity.com/order/products/flashoptimizer/
Il vous en coûtera un minimum de 99.95¤ pour obtenir la version commerciale.

Ce matériel n'est cependant pas indispensable pour optimiser votre animation. Flash lui même possède une commande pour optimiser vos image (Modification>Forme>Optimiser ou Ctrl+Alt+Maj.+C pour Flash MX 2004 ou Modification>Optimiser sous Flash MX).

Pour utiliser cette option, il faut sélectionner une image vectorielle, tracée, ou une bitmap dissociée au maximum.

Pour dissocier une image bitmap, il faut faire Ctrl+B. Lorsqu'apparaissent des petits points blancs sur cette image, vous pouvez alors l'optimiser.

III - Optimisation des sons et images.

Pour optimiser vos fichiers audios, vous pouvez biensûr utiliser des freewares spécialisés, il y en a suffisament sur le web. Mais là encore, Flash MX et Flash MX 2004 possèdent un outil capable d'optimiser vos fichiers. Pour ce faire, rien de plus simple. Une fois importé votre son se trouve dans la bibliothèque. Ouvrez-la (Ctrl+L). Puis double-cliquez sur l'icône du fichier en forle de haut-parleur.

Dans le panneau qui s'ouvre, repérer la partie [Paramètres d'exportation]. Afin d'obtenir le meilleur rendu poids/qualité, nous allos choisir le fameux format MP3 dans le menu déroulant compression (1). Dans le panneau Vitesse de transmission (2), entrez la valeur appropriée à votre son. Plus la valeur sera faible, moins la qualité du son sera bonne. Mais générallement, jusqu'à 24 ou 32 Kbits/s, la perte de qualité n'est pas audible. En qualité (3), bien-sûr mettez Rapide. Bien que le nom est un sens péjoratif, la qualité sera toujours bonne.

Vous voilà donc prêts à gagner des Kilo-octets !

@+.

WhiteMagus

Commentaires

Commentaire de Blacknight91titi le 23/06/2005 18:09:26

J'adore ton tuto White Magus :p
Mais alors les commentaires...................................

Commentaire de WhiteMagus le 23/06/2005 21:07:22

Ouaip. Je trouve pas super sympa que des gens mettent des 1, sans se justifier. Même si mon tutoriel n'est pas utile à tout le monde, j'estime qu'il vaut quand même mieux que 4, vue que la question des anims trop lourdes revient souvent sur le forum.

Commentaire de Blacknight91titi le 23/06/2005 23:07:17

Je suis d'accord.
Tient j'ai pas noter je vais te la remonter ta note ^_^
Pis sans prendre en compte sa je pense que ses conseils peuvent servir.
Ce sont de toute petite chose certe mais si on s'y habitue cela peut beaucoup servir (je le sais j'ai déja fait des anim sans clip alors après pour modifier un truc......c'est horible)

10/10

Commentaire de Prouprou_Sensei le 18/07/2005 01:09:14

Merci pour ton tuto !
Mais attention : "Pour dissocier une image bitmap, il faut faire Ctrl+B. Lorsqu'apparaissent des petits points blancs sur cette image, vous pouvez alors l'optimiser."
L'optimisation ne fonctionne pas sur un jpeg que l'on aurait dissocié. Pour tous jpeg et bitmap, il vaut mieux utiliser un logiciel de traitement d'image (paintshop, photoshop, fireworks, xat image optimizer...) pour compresser l'image avant de l'inserer dans flash.

Et pour l'utilisation d'un rectangle de petite taille, j'ai essayé avec un rectangle de 40x40 agrandi en 800 par 600 et un rectangle de 800x600 je suis passé de 101 octets pour le petit a 105 octets avec le grand rectangle. Cela ne fait pas gagner grand chose.

A tchao !

Commentaire de WhiteMagus le 18/07/2005 12:41:20

Merci des précisions. Pour les logiciels de traitement d'image je suis tout à fait d'accord.
Pour les rectangles, j'ai toujours fait comme ça et j'ai jamais vraiment fait attention au poid réel :D
C'était une astuce parce que j'avais vu qu'en gros ça faisait gagner quelques octets.
Merci beaucoup du commentaire.
@+ !

Commentaire de coit009 le 01/09/2005 13:43:57

Merci pour les astuces, ca peut servir car pour le son j'utilise 2 outils pour optimiser mon son. Si flash peut remplacer les 2 cool

Commentaire de WhiteMagus le 01/09/2005 21:19:57

Merci, ça fait très plaisir...

Mais, tu sais, il faudrait que tu test les deux, voir qui a le meilleur rendu après compression. On sait jamais :D.
Si tu veux nous faire part du nom de tes logiciels aussi, s'ils compriment mieux la musique, ça serait sympa...

Enfin voilà. Merci bien pour ton commentaire.
@+ !

Commentaire de fafan3 le 02/10/2005 15:59:01

maintenant, j'ai bien optimisé le poids de mon anim, mais il reste un problème de poids tout de même, c'est qu'il faut résoudre la faiblesse de certaines ressources systèmes,
j'ai fait de belles interpolations et de beaux clips, mais les lires avec un portable est périlleux.
SI un de vous avait des réponses pertinentes des trucs pour optimiser les ressources systèmes dans mon anim, ce serait bien, parceque mon swf est hyper leger mais il faut beaucoup de ressources systemes pour le faire fonctionner !
merci

Commentaire de Blacknight91titi le 02/10/2005 16:18:04

On conseil a prendre en compte c'est déviter de faire beaucoup de onEnterFrame
C'est généralement se qui prend le plus de ressource.
Essai d'en suprimer si possible ou tout simplement de les suprimer lrosque tu n'en a pas besoin pour éviter de les faire tourner pour rien.

Si tu peux réunit les en un seul sur la frame principale.

Blacknight

Commentaire de WhiteMagus le 02/10/2005 22:05:13

Salut.

En plus, on m'a souvent dit (je n'ai jamais vérifié) qu'il est préférable de mettre des setInterval() à la place des onEnterFrame...

Si quelqu'un sait si c'est vrai, qu'il me le dise, j'ai pas testé et en ce moment, j'ai pas trop le temps.

Un truc à éviter pour optimiser la cadence d'exécution c'est des alphas à tort à à travers. Flash affiche l'alpha des images suivant des calculs. Donc forcément, si tu as une image avec l'alpha modifié, qui se déplace à une bonne vitesse et en plus des onEnterFrame partout, ça marche pas super :D...

Sur ce, @+

Commentaire de fafan3 le 03/10/2005 00:17:39

oui, je reconnais, j'aime les alphas, et j'ai pas mal de ptits clips qui se balladent sur l'écran; J'ai commencé par enlever les dégradés qui se déplacent, car j'ai pensé que l'ordi avait du mal a les calculer.
Mais les alphas, vais-je devoir les sacrifier ?
pour les pauvres gars qui ont un petit cpu et peu de memoire vive comme moi!

je me demande , le vectoriel c'est bien,  c'est léger, mais ça mange de la ressources !!

Commentaire de WhiteMagus le 03/10/2005 16:44:57

Re.
En fait, essaye de remplacer l'alpha par des dégradés de couleur quand tu peux... Ça devrait déjà pas mal aider...

Allez @+ !

Commentaire de fafan3 le 04/10/2005 01:02:11

ma derniere trouvaille sur le sujet :

Dans quelques cas, les performances du processeur et de la carte graphique de l'utilisateur peuvent influer sur la vitesse de l'animation. sur de "vieux" ordinateurs, l'utilisation de techniques comme l'inclusion de couches alpha ou de variation d'échelle peut s'avérer gourmande en ressources. Si possible, offrez des animations restant utilisables pour les possesseurs de matériel "ancien".
adresse : http://www.veblog.com/fr/2001/0506-flash-utilisabilite-3.html

et merci pour vos réponses.

Commentaire de WhiteMagus le 07/10/2005 18:57:31

Merci à toi pour ce complément.

@+ !

Commentaire de fafan3 le 08/10/2005 08:44:01

Comme j'ai un vielle ordi chez moi, j'ai fait des essais pour tenter d'avoir mon anim peu gourmande; POUR user moins de ressources systèmes il est conseillé :
"Les performances d'affichage des contenus flash sont affectées par les vitesses des processeurs et la taille de la fenêtre dans laquelle se déroule l'animation. des animations dans une fenêtre 640X480 consommeront moins de ressources que dans une fenêtre 1600X1200. Permettre aux utilisateurs de matériel "ancien" de dérouler une animation dans une fenêtre de petite taille ne peut qu'améliorer leur feeling par rapport au contenu."

Donc j'ai demandé a flash de réduire la taille de mon anim lors de la publication : evidemment cela va beaucoup mieux avec une anim plus petite en surface.
Alors pour en revenir au tutorial,
"vous créez un rectangle de 40x10 px" pour en faire de plus grandes occurences à la demande" :
_ est-ce que lors du redimensionnement du rectangle "moins lourd" le player flash utilise plus de "ressources systèmes" ? Ne vaut il pas mieux avoir un rectangle de la taille exacte dès le départ ?
Autrement dit : le fait de demander à mon player de changer la dimmension de mon anim , n'ai pas handicapant pour mon CPU.
Sinon il faut que je redimensionne toutes les anims en plus petit !!!

Comme le dit prouprou_sensei Cela ne fait pas gagner grand chose, mais qui sait ? c'est à avec des petits ruisseaux que se font les grandes rivières.
Et puis on est souvent obsédé par le poids de l'anim et le chargement parceque flash en fait un rapport précis, mais sur la consommation des ressources systèmes que nenni;
ET pourtant que de reclame pour vanter la legereté, la compabilité des contenus vectoriel flash, sur toutes les machines.
et comme ils disent à la télé : merci de votre attention et de votre fidélité !
a+
FP

Commentaire de Blacknight91titi le 08/10/2005 09:29:39

Concernant le redimensionement des carrés il n'est pas plus mal de l'adapter après dans l'animation si la taille dépend des ressources processeur de l'utilisateur (je ne sais pas si flash dispose d'une fonction pour le savoir)
Mais de toute façon en redimensionant la taille de ton carré flash ne le fera qu'une fois, pas tout au long de l'animation.

Et puis le code que tu rajoute pour faire sa ne prend pas vraiment beaucoup de place (quelque octet)
Cela ralentira flash au début de l'animation (minimement) mais pas après.

Enfait le mieux c'est de faire des test sur des vielles machine et d'étudier les ressource cpu prise par flash.
Ainsi tu sera se qui est mieux.

La taille pour les petite config
Le poid pour les petites conexion

Blacknight

Commentaire de disciple95 le 20/11/2005 12:44:45

merci pour ce coup de pouce...n'etant pas un expert, ça m'a bien servi
ainsi que certain des commentaires...

merci a tous

a+

Commentaire de LeBeeg le 10/02/2006 01:04:51

Bon tuto.. c des astuces auxquelles on ne pense pas forcément.
Cool !

Commentaire de WhiteMagus le 10/02/2006 21:15:24

Je reviens juste sur ce topic et je suis content des messages :D
Merci bien à LeBeeg et à disciple95. Ça fait plaisir.
Merci beaucoup aussi à FanFan3 et Blacknight pour les compléments.

@+ !

Commentaire de fafan3 le 11/02/2006 11:31:03

Depuis cette discussion, j'ai essayé pour mes animations de personnages de les sortir en vidéo, images par images et de les passer à la télé (sans aucun code evidemment), ça marche.
Et en ce qui concerne le vectoriel, j'ai redessiné tout en utilisant des formes géométriques simples, pour  utiliser le moins possible les ressources systèmes. Quand on dessine au trait on oublie souvent des morceaux de tracé un peu partout cachés sous ou dans le dessin. A la construction chaque forme à son calque et on peu vérifié la pureté et la simplicité des formes. Je me suis inspiré , (pour ceux qui s'interesse à l'animation de personnages) de :
http://www.macromedia.com/fr/devnet/flash/articles/design_character.html

Commentaire de WhiteMagus le 11/02/2006 16:51:35

Ouaip très bon tutoriel.
Il m'a aussi permis de bien avancer dans l'anim. Le seul truc qui me bride aujourd'hui : je sais pas dessiner :D

Et en effet, moins la figure est anguleuse, moins elle comporte de traits, moins elle pèse lourd...

Bon @+

Commentaire de disciple95 le 11/02/2006 20:06:41

holla to all menbers...:)
merci a vous tous pour vos conseils....trés utile tout ça

a+

Commentaire de fafan3 le 13/02/2006 11:03:16

pour WhiteMagus
(je sais pas dessiner)

Cela dépend de tes prétentions : si tu sais écrire tu sais dessiner. Evidemment tu sais dessiner comme tu peux. Tu ne peux pas tout faire. Il ne reste plus qu'à saisir la nuance entre ce que tu veux et ce que tu peux faire.Ton invention de ton langage sera à ta mesure, et non à celle des autres.
Je dessine pour me distraire, à mon rytme et dans mes possibilités.
pour faire une animation, il n'y a pas que le savoir dessiner, moi le plus difficile c'est pour le scénario et l'inventivité.
regarde xiaoxiao , rien d'insurmontable pour un but appréciable.
rappel du lien :
http://www.xiaoxiaomovie.com/movie/movie05.htm

Commentaire de WhiteMagus le 13/02/2006 11:12:47

C'est vrai que cette anim est assez forte avec peu de moyens :D

Je sais pas dessiner = j'aimerai savoir dessiner, mais je m'en passe pour le moment
Moi c'est plus du détournement d'images comme des sigs, des headers de sites, etc : http://membres.lycos.fr/pompierscsv/Sigs/
Ce qu'il y a c'est que si je créeai mes propres persos pour les sigs, ça pourrait être pas mal ;)
Bon. En tout cas merci bien pour le commentaire. Bonne continuation !

Commentaire de fafan3 le 13/02/2006 11:23:59

impossible de s'inscrire dans la fenetre de saisie pour voir http://membres.lycos.fr/pompierscsv/Sigs/

Commentaire de WhiteMagus le 13/02/2006 11:29:54

Bon alors un échantillon :D
http://membres.lycos.fr/pompierscsv/Sigs/sig_gaara.jpg
http://membres.lycos.fr/pompierscsv/Sigs/sig_naruto_hinata_petit.jpg
http://membres.lycos.fr/pompierscsv/Sigs/sig_obito.jpg
http://membres.lycos.fr/pompierscsv/Sigs/sig_rocklee2.jpg

Voilà. Tout du thème naruto...

@+ !

Commentaire de Blacknight91titi le 13/02/2006 11:53:12

Fafan3 ton animation est super.
Graphiquement ce n'est rien d'extraordinaire mais vu que l'animation est belle, cela suffit largement.
Par contre pour la police ne dessous de l'animation faut SP2 pour la voir :(

J'avais pas vu ces photo la Clément, J'aime bcp les 4 dernières :D

Bonne continuation a tous :D

Blacknight

Commentaire de adjokpota le 04/10/2006 14:24:23

assez intéressant vue qu'il est important de reduire les paquets transmis sur des machines moins rapide

Commentaire de shadowfox666 le 26/10/2007 14:27:09

Salut ^^

Merci pour ce tuto, voulant faire mes débuts dans flash, je trouve que c'est quelque chose de très utile. L'optimisation est trop souvent négligée en programmation.

9/10 (parce que c'est écrit trop petit =D)

++

Commentaire de shadowfox666 le 26/10/2007 14:27:26

Salut ^^

Merci pour ce tuto, voulant faire mes débuts dans flash, je trouve que c'est quelque chose de très utile. L'optimisation est trop souvent négligée en programmation.

9/10 (parce que c'est écrit trop petit =D)

++

Commentaire de shadowfox666 le 26/10/2007 14:27:44

Salut ^^

Merci pour ce tuto, voulant faire mes débuts dans flash, je trouve que c'est quelque chose de très utile. L'optimisation est trop souvent négligée en programmation.

9/10 (parce que c'est écrit trop petit =D)

++

Commentaire de Il2garde le 26/06/2008 20:17:46

Idem, excellent tuto mais l'italique n'a pas vraiment sa place dans pour la bonne lisibilité... (^_^)'

Commentaire de mortblake le 18/10/2008 10:42:55

Merci beaucoup pour cette petite option qui m'avait échapper, j'ai pu alléger mon animation à plus de 80% de sa taille initiale.

=D

 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,109 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales