Quelques cl

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 dAdobe 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 n10
• 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.onReleasefunction()
  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