Flash Partie1

Flash Chapitre 1 : présentation du plan de travail Boite à outils

Panneaux Scène(partie en blanc seulement)

Outils pour changer la scène

Scénario : Là où on contrôle une animation. C’est là où l’on dépose les images qui seront affichées successivement de la première à la dernière. La vitesse de lecture dépend de la cadence de l’animation. Calques : Objets qui sont conservés dans le scénario. Imaginez-les comme des feuilles de papier transparentes. Un calque pourrait par exemple contenir une maison et un autre calque une voiture. Le mouvement des 2 pourrait simuler le passage d’une voiture devant la maison. Un calque est une série d’images, chacune étant numérotée. Séquence : Suite de scénarios (d’animations) qui s’exécutent dans un ordre définis. Un site web peut contenir plusieurs animations qui s’exécutent dans un ordre déterminé.

Chapitre 2 : Dessin vectoriel versus image bitmap Une image bitmap est composée d’une suite de points (pixels). Cette image est conservée dans un fichier graphique. Ce fichier graphique doit contenir l’information précise sur la façon de faire apparaître chacun des points. Pour chaque point il faut définir sa couleur, où est situé ce point sur l’image, etc… Donc si une image à la taille 550X400 = 220 000 pixels donc 220k. Puisque la couleur d’un pixel est définit par une combinaison de 3 couleurs de base la taille du fichier sera de 220k X 3 = 660k. Les dessins vectoriels diffèrent complètement des images bitmaps. Ils contiennent des algorithmes mathématiques nécessaires à la création des images. Un programme spécialisé dans la construction d’image à partir de formules mathématiques (Flash Player par exemple) lira ces formules et recréera l’image. La taille des images vectorielles sera ainsi beaucoup plus petite que la taille des images bitmaps. •

Un appareil photo numérique produit des images bitmaps.

•

Vous pouvez utiliser des images bitmaps dans une animation. Rappelezvous que la taille de l’animation sera beaucoup plus grande et que cela pourra fort probablement réduire la performance de l’animation et son temps de téléchargement.

•

Flash peut transformer des images bitmaps en images vectorielles mais on y perd beaucoup en qualité.

Avantages des images vectorielles : •

Aucune perte de qualité si on agrandit ou réduit la taille de l’image.

•

Le poids de l’image ne change pas même si on agrandit une image.

Inconvénient des images vectorielles : Ces images sont impossibles à lire sans une application spécifique pour les lire. Il est donc impossible de visualiser une image vectorielle dans une page web si le navigateur web n’intègre pas un lecteur d’image vectorielle, Flash Player par exemple.

Chapitre 3 : Une première animation Nous allons créer un ballon qui se déplace sur l’écran.

Image-clés & Interpolation de mouvements Le mouvement sera en fait une suite d’images qui donne l’impression que le ballon se déplace. Nous devrons donc insérer un ballon au début du déplacement et un autre à la fin de son déplacement c’est ce que l’on appel des image-clés. Flash s’occupera pour nous de dessiner tous les ballons nécessaires pour simuler le déplacement entre les image-clés. Ce procédé s’appel l’interpolation de mouvements. Mais tout d’abord il faut dessiner le ballon au moyen de la boite à outils et du nuanceur de couleurs 1) Dessiner le ballon sur la scène avec l’outil

N’oubliez pas de grouper les objets!!! (Sélectionner tout l’objet avec la flèche grasse, et faire Ctrl G (Ctrl B pour dégrouper) 2) Dans la barre du Calque, Insérer une image-clé là où l’on veut que l’animation se termine. Ex. image 35. Clic droit sur l’image 35 dans la fenêtre scénario (Barre du Calque 1)

Insérer une image-clé Déplace notre ballon là où l’on veut que l’animation se termine sur la scène.

3) Maintenant on crée le mouvement en créant une interpolation de mouvement entre les 2 image-clés. Clic droit sur n’importe quelle image (point) entre les 2 image-clés Choisir Créer une interpolation de mouvements

4) Pour voir notre ballon se déplacer on pèse sur retour ou on clic sur LIRE ou TESTER L’ANIMATION à l’item Contrôle du menu.

Ctrl Enter montrera l’animation dans le swf final.

Propriétés de l’animation : Double-clic sur la cadence dans le bas de la fenêtre Scenario La cadence de l’animation : c’est le nombre d’image seconde qui seront affichées. Donc c’est la vitesse d’exécution de notre animation. Ici on a 35 images donc à 12 i/sec l’animation durera presque 3 secondes. Si on augmente la cadence l’animation sera plus courte et plus fluide. Si on réduit la cadence l’animation sera plus longue et plus saccadée. • • •

Taille de la fenêtre Cadence Arrière plan de la scène

Propriétés du mouvement : On peut changer les propriétés de mouvement suivantes dans la fenêtre propriétés au bas de l’écran. Il faut préalablement cliquer sur l’extrapolation de mouvement que l’on veut modifier. Exemple : si on veut que notre ballon tourne sur lui-même on change la propriété rotation.

Exercice 1) exercice 1 interpolation de mouvement : Un cube circule de haut gauche à bas droite, tout en tournoyant, puis remonte, puis redescend….

On peut redimensionner un objet, faire pivoter un objet ou incliner un objet par interpolation de mouvement. Pour cela on clic sur l’image-clé final que l’on veut changer et fenêtre/transformer (ctrl/T).

Chapitre 4 : Les calques Objets qui sont conservés dans le scénario. Imaginez-les comme des feuilles de papier transparentes. Un calque pourrait par exemple contenir une maison et un autre calque une voiture. Le mouvement des deux pourrait simuler le passage d’une voiture devant la maison. Exemple : si on veut faire passer une bannière sur notre première animation on doit créer un 2 ième calque et y placer les objets désirés de la même manière que pour l’autre calque.

Voir les outils de calque. Ex : Calque 1 : une maison Calque 2 : un camion qui passe devant Dans Calque 1 : dessiner une maison Créer l’animation même si l’élément ne se déplacera pas, en insérant une image-clé au même endroit où le camion arrêtera au calque 2. Du menu : Insertion, Calque On peut masquer le Calque 1 en cliquant sur l’œil du Calque 1 si on le désire.

Dans Calque 2 : dessiner l’auto qui part de la gauche vers la droite (Créer une interpolation d’images) Si on dessine un objet complexe comme une auto, le grouper avant de procéder à la création de l’animation. (insérer une image-clé, déplacer l’objet à cette image-clé, et Créer une Interpolation d’images.