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

Présentation au sujet: "Quelques clés pour débuter avec les animations Flash"— Transcription de la présentation:

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,

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é, 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é 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) !

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 on y trouve :
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