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

1. Quelques clés pour débuter avec les animations Flash Jean-Paul Stromboni Infographie, 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é Animation Flash : • idem en Flash, images jouées dans une fenêtre de l'écran • Idem en Flash, où le scénario est découpé en séquences • Idem en Flash, on empile des calques avec des personnages • Idem en Flash, où les calques sont modifiés par interpolation ou image-clé par image-clé • Idem, une piste son par calque • Idem, on regroupe les acteurs animés dans des bibliothèques • Pas pareil en Flash !! vous pouvez intervenir sur le déroulement de l'animation (avec ActionScript) ! Dessin animé, cartoon • succession d'images projetées sur un écran à cadence suffisamment rapide (25 à 40 ips) crée l'illusion du mouvement • Une animation est un ensemble de séquences, ou d'actions, ou de sketches, mises bout à bout • Une scène, c'est un décor, avec des personnages animés et fixes • Pour créer l'illusion de mouvement, on photographie des calques successifs • Dans un dessin animé, il y a des pistes son, dialogues, bruitages • On constitue des dossiers de personnages en dessin animé • Vous êtes un spectateur passif devant un dessin animé

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