J’ai eu une envie soudaine de préciser quelques points des pratiques du flash lorsque je vois encore certaines bannières/sites sur internet. Des redites certainement, voire des choses de débutants, mais je me dis que cela ne peut pas faire de mal de partager quelques notions de base.

Article orienté plutôt pour des graphistes flash.

Ayez une vision globale du projet
Sans doute un détail… garder toujours en tête : pourquoi je le fais en flash ? qu’est ce que cela m’apporte ? ai-je bien considéré tous les points positifs et négatifs de le faire dans cette techno là ? qu’est ce que cela implique ? Comment gérer les mises à jour et ajouts de contenu ? et par quelle techno (xml, php… ) ? Maitrisez en amont la conception.

Le flash, c’est des clips dans des clips, dans des clips dans des clips… mais attention à la structure globale du projet. Il faut préparer au moins dans sa tête ce que l’on veut faire afin de ne pas de retrouver bloqué dans son animation, et avoir une idée de l’arborescence des différents éléments qui vont s’animer et des éléments interactifs.

Toujours dans la structure globale du projet, ayez une vision de recul sur le poids total des éléments qui seront intégrés. Doit-on tout développer en un seul swf ou en plusieurs de manière à répartir le temps de chargement en plusieurs temps d’attente ? Tout dépend du poids total. Mais attendre qu’un flash de 5mo se charge, c’est ennuyeux à souhait.

Rendre son flash accessible.
ActiveContent, ou swfobject, utilisez-le ! Il permet de désactiver ce ‘cliquer sur cet activex pour interagir avec’ sous IE. Le swfobject permet en plus d’y insérer un contenu alternatif.
Utile aussi, le swfaddress permet d’avoir une url bien précise pour accéder à l’intérieur d’un flash.

Préparez vos fichiers.
Combien de fois ai-je fait des retours sous photoshop afin d’optimiser, de séparer en deux une seule image, de la recadrer… Il n’y a pas de sens interdit. Le bouton mise à jour dans la bibliothèque est le meilleur ami de l’homme.

Pensez aux outils disponibles dans flash… parfois, il est inutile de sortir un PNG transparent si l’on peut faire un masque pour moins de poids…

De la méthode
Dans le cas où quelqu’un reprendrait votre animation, pensez à nommer vos calques, et à classer par dossier en catégories vos calques. (J’ai mis des années à me résoudre à le faire, mais c’est bien pratique!)

Optimisez le flash !
Faire bien attention au poids total d’un flash est primordial. Il faut rester raisonnable, qu’il s’agisse d’une bannière ou d’un site. Vous aurez très certainement un jour à devoir prendre en compte une limite stricte de poids. On ne fait pas la même animation avec 45Ko et 55Ko. Travail de conception, où il faut prévoir et justifier la présence de chaque élément graphique pour ne pas franchir la barre fatidique du poids limite. Utilisez dans la bibliothèque au besoin l’optimisation des éléments fichiers par fichiers, à 10% près, on passe… ou pas.

Pas la peine de créer 10 symboles différents pour la même forme. Le movieClip est là pour vous faciliter la vie et alléger l’animation. Réutilisez au besoin la même forme… 10 fois !

Optimisez la puissance requise pour votre animation. J’en vois qui crée des animations consommant 80% du processeur, avec 30 objets gèrant de la transparence… ou un script mal placé qui fait une boucle infinie (c’est ma spécialité, ca, je l’adore^). Tout le monde n’a pas un CoreDuo 2… (enfin, une machine de course quoi…)

Attention à l’utilisation des composants ! Le poids d’une animation peut monter très vite…

Apprenez un peu d’actionscript.
Quelques notions d’actionscript ne peuvent faire de mal. Je vois parfois des graphistes flash qui ne savent pas ce qu’est un _root ou comment créer un bouton. C’est bien malheureux, le code n’est pas si compliqué que cela. Mais quelle liberté une fois que l’on connait ne serait-ce qu’une vingtaine d’expressions !! On s’affranchit de déranger un programmeur qui a autre chose à faire que du code ‘Playskool’, et on satisfait le client, plutôt que d’avoir un retour « le bouton ne marche pas ».

Et pourtant, il n’y a pas grand chose à retenir en AS1 :
stop();
play();
gotoAndPlay();, gotoAndStop();
bouton.onRelease = function (){ gnagnagna… }
getURL(« http://www.miaou », »_blank »);
loadMovie
fscommand(« quit »);

Autre intérêt pour les plus téméraires. Une connaissance plus large du code permet de concevoir des systèmes interactifs qui vont réellement être efficaces, et surprendre l’utilisateur dans le bon sens du terme. Lorsque le concept est graphiquement basé sur un système interactif exploitant des fonctions judicieuses, le résultat peut être suprenant. Mon plus bel exemple est certainement levitated.net. Pour ma part, je ne me suis jamais autant amusé dans flash depuis que j’ai mis les papattes dans le code.

Connaissez les capacités des versions de Flash.
Vous connaissez Flash 8 ? Vous adorez les effets de blur, et d’ombrage. Votre animation est terminée. Mais on vous demande un flash en version 6. Aie… A force de travailler sur des versions différentes de flash, j’ai pu connaitre les possibilités de chaque version, tant au niveau du code qu’au niveau de l’animation/graphique. C’est une expertise que je trouve importante, et cela évite les désagréments de conception en cours de route.

Maitrisez l’animation. Créez de la vie !
Flash est un logiciel d’animation. Ce n’est pas ImageReady pour faire du gif animé. Il faut bien retenir cela. Je vois passer quelques fois des bannières qui ne justifiaient en rien du flash. L’animation est un domaine fantastique, qui regorge de possibilités. Apprenez à maitriser la simulation de la physique, du poids des objets, de leurs accélérations, décélérations… Retournez voir les premiers travaux du début du siècle sur l’analyse du mouvement. Vous vous souvenez ? ce cheval qui court, en mouvements décomposés…

Faites bouger un personnage d’un point A à un point B. Si vous lui donnez la même vitesse de A à B, l’animation sera fade. C’est de la perte de temps d’avoir dessiné un personnage ! Par contre, si le personnage démarre lentement (un corps, c’est du poids à déplacer), pour arriver au point B avec une petite inertie, c’est tout de suite plus vivant.

Hommage à Onesque sur cette animation là !

Sans doute le plus important : si vous ne faites pas de dessin animé, oubliez ce f… 12 images par seconde ! C’est 25 images secondes une animation fluide, comme à la télé ! Certains codeurs montent le framerate, mais c’est pour des besoins plus spécifiques. (Tips : votre animation toute entière est un poil trop rapide ? baissez le fps, des fois, ca passe plutôt que de devoir refaire toute l’animation. Ruse pas terrible, mais ruse quand même.)

Pensez à tout ce que Flash peut faire d’autre
Flash peut faire des exports vidéos d’animation. La fonction marche plus ou moins bien, mais une fois passés les pièges à éviter, cela m’a déjà sauvé la vie lorsque je manquais de temps pour créer une animation rapidement en vidéo. (on peut même faire des gifs, mais là, honnêtement, je n’en ai jamais eu l’usage…)

Flash peut faire aussi des cd-roms. Dit comme ca, ce n’est pas très sexy, mais pouvoir emporter une présentation en .exe et être certain de n’avoir pas de problèmes de version de flash sur le poste utilisé pour la présentation, c’est important, ca rassure et ca évite les ennuis. (L’exe embarque un lecteur flash autonome, pas un plugin).

Derniers détails
- Faites du texte lisible, et pas flou ! J’ai parfois l’impression de devoir changer de lunettes tant certains textes sont illisibles. Il y a des ruses (faire du texte en png transparent), et des optimisations possibles pour cela. C’est du boulot, mais cela fait plus pro.

- Vous avez un temps de chargement un peu long ? Faites une barre de chargement… mais inventive ! Créez un petit jeu avec l’utilisateur de manière à ne pas l’ennuyer. Une animation très efficace graphiquement peut faire patienter beaucoup plus qu’une vulgaire barre de chargement avec un pourcentage. Cela vous évitera que la personne quitte le site inopinément.

- Tips pour la vidéo : je connais bon nombre de grandes entreprises qui blacklistent les vidéos en flash pour des raisons de bande passante. Soyez le premier à passer les firewall : renommez votre vidéo *.flv en *.vlf ou n’importe quoi d’autre qui n’existe pas. La vidéo sera quand même lue… et le firewall n’y verra que du feu :D

Pause anecdote : il y a quelques années, j’étais chez un client assez connu dans Paris, qui m’avait refusé un développement en flash alors que le sujet l’aurait mérité. Sa justification était sans appel : « pas de ca, on ne veut plus voir de flash chez nous. » L’explication venait d’un projet précédent qui s’était visiblement mal passé. Graphiquement déplorable, mal conçu, mal animé, il était bon à jeter…. pourtant, il aurait suffit de suivre la moitié des points évoqués ici…