FLASH MX Sance 1 Intervenants Gabriel et Najib

FLASH MX Séance -1 - Intervenants: Gabriel et Najib. 1

Présentation du logiciel. Flash est un logiciel de chez macromédia. Il offre la possibilité de mettre sur les pages Web des effets multimédia, mais aussi des applications telles que des jeux, des simulations ou des aides à la navigation pour les pages Web. 2

Ce que nous allons étudier: Définition de l’outil et apprentissage du dessin: outils de dessin (+ groupes) scénario et notion d’image-clé calques (+ calque masque) symboles (comportement : graphique) Créer une animation: animation interpolée de mouvement (+ calque guide de mouvement) animation interpolée de forme exportation de l’animation et insertion dans Dreamweaver 3

Les bases en Flash. Apprentissage du dessin Définition des outils 4

Interface de flash MX Scénario (montage). Choix de la couleur pour les dessins. O U T I SCENE. L S Actions, image et propriétés. Composants. 5

La barre d’outils de dessin. La boîte à outils contient tous les outils qui vous permettront de dessiner, sélectionner et modifier vos animations. Flèche Ligne Lasso Plume Texte Ovale Rectangle Crayon Transformation libre Pinceau Transformer le remplissage Encrier Pot de peinture Pipette Gomme Main Prenez le temps de visiter par vousmême cette barre d’outils elle contient des fonctionnalités intéressantes. Sous–sélection Zoom Couleur de trait Couleur de remplissage Options (en rapport avec l’outil sélectionné) 6

Présentation des possibilités offertes par la barre d’outils. Options Gomme Options crayon Options Pot de Peinture Options Pinceau Outils transformation libre Pivoter et incliné Déformer Redimensionner enveloppe 7

Le dessin et ses règles. Introduction Quand vous dessinez sur la scène vous dessinez sur un calque. Un calque c'est une couche transparente sur laquelle il est possible de dessiner ou d'inclure des symboles. Il y a un calque par frame, d’origine (1 frame = 1 image dans la zone scénario). Ensuite vous pouvez superposer les calques sur une même frame. Pour créer un calque cliquez sur l’icône ajout de calque. 8

La gestion des calques Exemple: Dans la partie scénario on peut donc ajouter des calques. On peut renommer un calque en double cliquant gauche sur celui-ci. Plus le calque est haut dans la fenêtre et plus il sera au premier plan sur la scène c’est-à-dire qu’il cachera éventuellement les autres en dessous de lui. Pour changer l’ordre des calques il suffit de faire un clic gauche sur le calque qu’on veut déplacer et de le déplacer. Il est intéressant d’effectuer cette opération pour visualiser le(s) changement(s) sur la scène produit par cette manipulation. 9

Exercice. Créez 3 calques. Nommez les Triangle, Carré et Cercle en double cliquant sur le nom. Sélectionnez le calque triangle et dessiner un triangle, le remplir d’une couleur verte. Dessinez dans les calques carré (carré rouge) et cercle (cercle jaune) en superposant partiellement le carré et le cercle au triangle. Changez l’ordre des calques en les faisant glisser avec la souris. Observez la différence. 10

Le calque masque est destiné comme son nom l’indique a devenir un masque. Un masque sert à voir un objet à travers la forme d'un autre objet. Un masque est toujours placé au dessus du calque qu’il masque dans la fenêtre scénario. 11

Créer un masque Créer deux calques un contenant votre dessin placé en dessous dans la fenêtre scénario et un contenant le dessin qui vous servira de calque. Renommez les comme dans l’exemple de gauche. Cliquez droit sur le calque masque Sélectionnez masque. Et le tour est joué !! Remarquez l'apparence de la ligne de temps, tous les calques qui sont sous un masque sont précédés d’une sorte de petit drapeau, de même les calques se verrouillent automatiquement (petits verrous) lors de la création du calque. 12

Exercice Au début Ouvrez un nouveau dessin (ctrl+N ou Fichier – nouveau) Dessinez un gros carré vert. Insérer un 2 e calque par-dessus et nommez le masque. Dans le calque masque, dessinez un petit cercle rouge qui recouvre partiellement le carré vert. Après avoir sélectionner masque. Cliquez droit sur le calque masque, sélectionnez Masque. On ne voit plus que la partie recouverte du carré. Le calque masqué s’affiche en retrait sous le calque masque dans le scénario. Exemple de beau masque. 13

Superposition de deux objets de même couleur. Afficher par exemple deux cercles rouge sur la scène a l’aide de l’outil ovale. Déplacer un des deux cercle sur l’autre. Deux possibilités: soit vous double cliquez sur le cercle au premier plan et ça les associe au sein d’une même forme. soit vous cliquez sur le cercle au second plan et quand vous déplacerez le cercle au premier plan avec l’outil flèche par la suite le cercle au second plan sera amputé de la partie qui était caché précédemment. 14

Superposition de deux objets de couleur différentes. Afficher par exemple un cercle vert et un cercle rouge sur la scène a l’aide de l’outil ovale. Déplacer un des deux cercle sur l’autre. Là on a plus qu’une seule possibilité. Cliquez sur le cercle au second plan et quand vous déplacerez le cercle au premier plan avec l’outil flèche le cercle au second plan sera amputé de la partie qui était caché précédemment. 15

Grouper et dissocier. L’action de Grouper rassemble plusieurs objets dans un même cadre (raccourci clavier Ctrl+G). Pour modifier un objet dans un groupe, double-cliquez sur le groupe, le reste de la scène est alors assombri, Modification l’objet puis double-cliquez à l’extérieur pour sortir du groupe. On peut par exemple rassembler les deux cercles dessinés précédemment au sein d’un même cadre. L’action de dissocier sépare les objets d’un groupe. (raccourci clavier Ctrl+Maj. +G) 16

Le scénario Scénario Cette zone contient l’association de calques qui représentera a posteriori votre réalisation. L'œil permet de cacher un calque lorsqu'il devient parfois difficile de le sélectionner. Le cadenas verrouille le calque, il reste visible, mais n'est pas modifiable. Le contour permet d'afficher le contour dessins du calque. Cette option est intéressante lorsque l'on place des composants invisibles. Pour lancer la lecture du scénario appuyer sur entrée ou si vous voulez observer l’animation dans une grande fenêtre appuyer sur 17 Ctrl+entrée.

Remplir la zone quadrillée du scénario avec des images clés. Exemple: Cliquez sur la frame 1 du claque du haut et dessinez un cercle sur la scène. Le rond de la frame 1 qui était auparavant blanc se noircit. Une image clé (rond noir) est une frame dans laquelle se situent un ou plusieurs dessins. Quand une image clé est vide (pas de dessin), elle est représentée par un rond vide. Une image clé servira à créer une Interpolation. Vous avez créer une image clé. Pour créer une image clé en frame 30 clic droit sur la frame 30 / insérer une image-clé ou clic gauche sur la frame 30/ F 6 Maintenant dessinez sur la scène et vous venez de terminer la manipulation. Frame 1(=image 1) 18

Symboles Un dessin peut être converti en symbole. Définition Il existe trois type de symboles: Graphique : pour faire un objet animé. Bouton : pour faire un objet dirigeant la navigation de l’animation. Clip : pour faire une animation à l’intérieur de l’animation de base. Nous ne nous intéresserons ici qu’aux symboles de type graphique. Il est pratique de convertir un dessin en symbole car: il est alors enregistrer dans la bibliothèque ce qui nous permettra de le réutiliser n’importe quand sur n’importe quelle frame sans avoir besoin de le redessiner (et dans n’importe quelle proportion). si on retrouve un dessin de nombreuses fois dans le scenario pour le modifier on aura besoin de le faire uniquement une fois si on l’a converti en symbole et sinon le nombre de fois qu’apparait l’image si on a conservée l’image telle quelle. Une chose importante : Donnez toujours un nom significatif à vos symboles. Comme ça, vous les retrouverez facilement dans votre bibliothèque 19

Symboles Processus de création d’un symbole. Si on veut créer directement un symbole sur le calque faire : Insertion / Nouveau symbole Si on veut transformer un dessin en symbole : Sélectionner le dessin à convertir / Clic droit / Convertir en symbole Ou clic gauche sur le dessin puis F 8 20

Symboles Modifier le symbole Dans la bibliothèque, double cliquez sur le symbole. Modifier votre symbole. Quand la modification et terminé, cliquez sur séquence 21

Bibliothèque. Commencez par faire apparaître la bibliothèque. Pour cela il y a deux méthodes: Cliquez sur Fenêtre / Bibliothèque Ou F 11 La bibliothèque permet de stocker les symboles que vous créer. Elle vous offre par conséquent la possibilité de réutiliser a l’infini le symbole sur n’importe quelle frame du scenario. 22

Interpolations Interpolation de mouvement. Interpolation de forme. 23

Interpolation de mouvement. Attention!! Une interpolation de mouvement se fait uniquement avec des symboles graphiques. Étape 1 : réaliser un dessin et le transformer en symbole graphique. Étape 2 : choisir une autre image du calque et y insérer une image-clé. Étape 3 : bouger cette dernière. Étape 4 : cliquer sur une image intermédiaire dans le scénario (bouton droit) et choisir interpolation de mouvement. Ctrl+entrée pour tester 24

Interpolation de mouvement. Utilisation d’un guide de mouvement. Suggestion : renommer le calque, exp- « dessin » Garder la même animation créée à l’étape précédente. Sélectionner le calque « dessin » et créer un guide Sélectionner la première image du guide et tracer une trajectoire. Cliquer sur la première image du calque « dessin » et placer le symbole sur une extrémité de la trajectoire. Se placer sur la dernière image du même calque et positionner le symbole sur l’autre extrémité. 25 Testez!!

Interpolation de mouvement. Changement de couleur. Réaliser un dessin et le convertir en symbole graphique. Insérer une image-clé sur le scénario. Ouvrir le menu « propriétés » et sélectionner la dernière image créée (en cliquant dessus sur la scène). Effectuer les modifications voulues (teinte, luminosité, transparence). Réalisation une interpolation de mouvement. Maintenant, on peut animer un objet en mouvement et en changement de couleur simultanément. 26 Testez!!

Interpolation de forme. L’interpolation de forme peut se faire sans convertir les dessins en symboles. Réaliser le premier dessin. Choisir une image du scénario et y insérer une image-clé vide. Dessiner dessus une autre forme. Cliquer sur une image intermédiaire du scénario et choisir dans « propriétés » interpolation de forme (en choisissant la vitesse qu’on veut appliquer). 27 Testez!!

Utilisation de masques. Définition : un masque sert à voir un objet à travers la forme d'un autre objet ^^ Taper une phrasemot. Créer un nouveau calque, le renommer « masque » et le sélectionner. Sélectionner l’outils « Ovale » ou « rectangle » et dessiner un objet sur le calque « masque » . Veiller à ce qu’il ne touche pas le texte. 28

Utilisation de masques. Cliquer à l’aide du bouton droit sur le calque « masque » et sélectionner « masque » ^^ Déverrouiller les deux calques. Avec l’outils « flèche » , sélectionner le rectangle (ou le cercle) du calque « masque » et le convertir en symbole graphique. Sur le calque du texte, choisir une image du scénario et y insérer une image. Réaliser une interpolation de mouvement du symbole de façon à ce qu’il se déplace de l’autre côté du texte (tout en restant parallèle). 29 Testez!!

Utilisation de masques. Une autre variante de ce qu’on vient de faire. Refaire les mêmes étapes mais avec un léger changement : Cette fois, le mot sera écrit sur le calque masque. Sélectionner l’autre calque. Le rectangle, qui sera transformé en symbole, sera plus large et portant un dégradé de couleurs. Repositionner le rectangle : Réaliser une interpolation de mouvement : 30 Testez!!

Merci de votre attention. 31