1

Quelques clés pour débuter avec les animations Flash

Jean-Paul StromboniInfographie, SI4, avril 2011

Flash est un outil original et passionnant. Il laisse la porte ouverte à l'imagination de ses utilisateurs pour arriver à leurs fins, même au prix de trucs et d'astuces, pour la bonne cause. C'est un environnement extrêmement riche

dont les multiples facettes rendent difficile une description exhaustive. Aussi, la démarche adoptée ici est l'analyse d'exemples, à comprendre, imiter, modifier, pour aboutir à la maîtrise de l'outil et à l'invention de nouvelles idées.on trouvera les exemples utilisés ainsi que ce document sur la page du cours,

http://www-local.polytech.unice.fr/vimm06

2

le succès de Flash

• Flash est devenu en 10 ans un standard, en particulier avec le format swf (Small Web Format)

• On le trouve implanté dans divers domaines :– Publicité, sur le web– Dessins animés, – Jeux vidéos, simulation– Sites web, lecteurs vidéos, formulaires, …

• à l'origine, Flash est né d'un besoin d'enrichir le web et html jugé trop pauvre (textes, sons, images) pour diffuser l'information de manière plus réaliste, plus vivante et plus efficace (utilisation du multimédia, de l'animation, du web)

3

éléments d'histoire de Flash • 1995 : Splash, imagine de créer des animations légères en utilisant

graphismes vectoriels :– (exemple : courbes de Bézier, B splines, …)

• 1997, rachat par Macromedia, Flash 1.0– Développement du plug in Flash et du Flash Player– Compression des sons– Développement du langage ActionScript, puis ActionScript2– Ouverture du format swf (small web format)– 1998, Microsoft inclut le Flash player dans Internet Explorer swf

devient un standard, comme html• 2006, rachat de Macromedia par ADOBE,

– ActionScript3, dans la suite CS3, avec FlashPlayer 9– Lecteur vidéo au format propriétaire FLV– Adobe propose un SDK pour swf

• Depuis 2006, FLEX (gratuit) et éventuellement Flash Builder d’Adobe permettent de développer des applications web RIA

4

Flash et le dessin animéDessin animé, cartoon1. succession d'images projetées sur un

écran à cadence suffisamment rapide (25 à 40 ips) crée l'illusion du mouvement

2. Une animation est un ensemble de séquences, ou d'actions, ou de sketches, mises bout à bout

3. Une scène, c'est un décor, avec des personnages animés et fixes

4. Pour créer l'illusion de mouvement, on photographie des calques successifs

5. Dans un dessin animé, il y a des pistes son, dialogues, bruitages

6. On constitue des dossiers de personnages en dessin animé

7. Vous êtes un spectateur passif devant un dessin animé

Animation Flash :1. idem en Flash, images jouées dans

une fenêtre de l'écran

2. Idem en Flash, où le scénario est découpé en séquences

3. Idem en Flash, on empile des calques avec des personnages

4. Idem en Flash, où les calques sont modifiés par interpolation ou image-clé par image-clé

5. Idem, une piste son par calque

6. Idem, on regroupe les acteurs animés dans des bibliothèques

7. Pas pareil en Flash !! vous pouvez intervenir sur le déroulement de l'animation (avec ActionScript) !

5

Source et exécutable (fla et swf)

• Au départ, une animation Flash est assemblée dans un fichier source d'extension .fla :– On importe des images, des sons, des vidéos,on crée des

dessins vectoriels, des symboles animés, on ajoute des scripts pour programmer l'interactivité, …

– On dispose ces éléments suivant le scénario choisi

• Une fois testée, l'animation est traduite en instructions exécutables dans un fichier d'extension swf exécuté par une machine virtuelle placée dans : – le plug in Flash dans un navigateur web– le Flash Player sur votre système d'exploitation

6

le jargon des animations Flash

• la scène, c'est le plan où on joue l'animation, c'est une fenêtre de l'écran (2 dimensions x, y) – C'est aussi l'atelier où on constitue les images

• chaque image est un empilement de calques (dimension z, de l'écran vers le spectateur)

• les images successives sont fixées pour tous les calques dans un scénario (dimension temps t)– le scénario peut être découpé en Séquences, pour organiser

l'animation en sketches

7

Environnement de développement

8

Les calques, niveaux de profondeur

• plus on monte sur la pile des calques, et plus on se rapproche du spectateur

• les calques reçoivent les éléments de l'animation :– les symboles (un seul symbole animé par calque).– les sons, les images, les dessins (vectoriels), les scripts …

• l'image du calque qui reçoit un symbole, un son … devient une image-clé (symbolisée par une puce)

• on trouve des calque spécialisés :– calque Guide de mouvement– calque masque

9

Les images-clés, étapes marquées de l'animation

• d'un calque sont celles dans lesquelles on a déposé un acteur de l'animation :– dessin, image, son, symbole, script …– on signale un script dans une image par un 'a'

• programmation de base des images clés– stop(); // arrête l'animation sur cette image– play();– gotoAndPlay(10); // image n°10– gotoAndStop("début"); // l'image "début"

10

La bibliothèque

• réunit des éléments d'animation – qui peuvent être utilisés plusieurs fois, – et qui peuvent être partagés avec d'autres animations,

• il existe une bibliothèque commune,

• et des bibliothèques partagées

• une animation peut uiliser la bibliothèque d'une autre

• on y trouve :– des symboles: clips, boutons et graphiques (vectoriels),– des sons, images bitmaps, vidéos, animations … importés,– des textes

• la bibliothèque sera incluse dans le fichier swf : attention de ne pas la surcharger inconsidérément !!!

11

Symboles, occurrences

• dans la bibliothèque, seuls les symboles peuvent être animés et programmés. – 3 types : Clips, Boutons et Graphismes

• poser un symbole sur la scène crée une occurrence de ce symbole – une occurrence peut être nommée et pilotée

par un script– si symbole = classe, alors occurrence = objet

12

Dessins vectoriels

• Principe: ils sont définis par des points, des épaisseurs et des couleurs (traits, remplissages) :– Légers en taille, donc faciles à télécharger– Faciles à animer par interpolation, il suffit de calculer le

déplacement des points– Insensibles au zoom, au contraire des images bitmap

• C'est un facteur essentiel du succès de Flash• Exemple des courbes de Bézier cubiques (retenir quatre

points pour reconstruire une courbe)• Remarques

– Outil de dessin vectoriel : la 'Plume'– Outil de transformation d'image bitmap en dessin vectoriel

13

animation par interpolation

• calcul des images manquantes entre deux images clés d'un calque

• il y a deux formes d'interpolation :– de mouvement : translation, homothétie– de forme (placer des repères peut aider)

• réservé aux dessins vectoriels et aux symboles

14

animation image par image

• quand l'interpolation est impossible ou peu satisfaisante, on peut encore dessiner une à une les images clés à projeter. Par exemple :– personnage qui marche– papillon qui bat des ailes, …

• Le mode de dessin 'Pelure d'oignon' aide :– à construire des animations image par image– à vectoriser un croquis scanné

15

Boutons

• Un bouton peut contenir jusqu'à quatre images clés

• On peut associer des scripts à chacun des états d'un bouton, mais aussi des sons, des clips, …

• contrôle de l'occurrence de bouton bt_btn depuis une image clé : bt_btn.onRelease=function(){ trace("Hello");}

• contrôle depuis une occurrence non nommée :– on(press)

gotoAndStop("gameOver");

16

Clips

• Un clip est une animation à part entière, avec des calques, des images clés, et un scénario

• Un clip peut contenir d'autres clips, qui peuvent contenir eux-mêmes des clips, …– Méthode du symbole unique

• On peut associer un script à un clip• Programmation de base d'un clip d'occurrence

nommée monClip :– monClip.gotoAndPlay(3);– monClip.gotoAndStop("gameover");

17

Textes statiques et dynamiques

• Statiques ou dynamiques (interactivité)

• Quand ils sont dynamiques, on peut leur associer une variable qui peut être lue ou écrite dans un script:– monTexte="Hello";

• les textes peuvent être 'séparés' : chaque lettre devient alors un symbole qui peut être animé séparément

18

Scripts

• On associe des scripts :– aux images clés (apparaît alors la lettre 'a')– aux symboles et aux occurrences– à l'animation, aux clips à l'aide de classes

ActionScript définies dans des fichiers extérieurs à l'animation

19

ActionScript

• Deux versions coexistent actuellement :– ActionScript 2, appelée à disparaître, mais encore

très utilisée (FlashPlayer 6), – ActionScript3, véritable langage de programmation

orientée objet, où• les scripts sont réservés aux images, et non plus aux

symboles et aux occurrences• des classes peuvent être associées aux clips et à l'animation• un mécanisme de listeners a été généralisé

• Flash CS3 distingue automatiquement et accepte les deux versions

• On étudiera des exemples dans la suite

20

Publier, paramètres de publication

• Le fichier source de l'animation (fla) est traduit en swf, à lire par le Flash Player

• Dans les paramètres de publication, on choisit :– les exécutables générés,

• Un swf• Une version html : swf +html• Une version exécutable Windows

– la version d'ActionScript et le FlashPlayer utilisé (Onglet Flash)

– le taux de compression des sons, et la protection du swf contre la copie

21

les outils de dessin

22

créer un symbole

23

Éditer un bouton

24

Éditer un symbole

• Un élément animé par calque

25

interpolation

26

Paramètres de publication