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

Présentation au sujet: "Séance -1- FLASH MX Intervenants: Gabriel et Najib."— Transcription de la présentation:

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

2 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.

3 3 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

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

5 5 Interface de flash MX Choix de la couleur pour les dessins. Scénario (montage). OUTILSOUTILS SCENE. Actions, image et propriétés. Composants.

6 6 Sous–sélection Lasso Texte Rectangle Pinceau Transformer le remplissage Pot de peinture Gomme Zoom Couleur de remplissage Flèche Ligne Plume Ovale Crayon Transformation libre Encrier Pipette Main Couleur de trait Options (en rapport avec l’outil sélectionné) 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. Prenez le temps de visiter par vous- même cette barre d’outils elle contient des fonctionnalités intéressantes.

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

8 8 Le dessin et ses règles. 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. Introduction

9 9 La gestion des calques 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. Exemple:

10 10 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. Exercice.

11 11 Le calque masque 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.

12 12 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.

13 13 Ouvrez un nouveau dessin (ctrl+N ou Fichier – nouveau) Dessinez un gros carré vert. Insérer un 2e calque par-dessus et nommez le masque. Dans le calque masque, dessinez un petit cercle rouge qui recouvre partiellement le carré vert. 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. Exercice Au début Après avoir sélectionner masque. Exemple de beau masque.

14 14 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.

15 15 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.

16 16 Grouper et dissocier. L’action de Grouper rassemble plusieurs objets dans un même cadre (raccourci clavier Ctrl+G). On peut par exemple rassembler les deux cercles dessinés précédemment au sein d’un même cadre. 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. L’action de dissocier sépare les objets d’un groupe. (raccourci clavier Ctrl+Maj.+G)

17 17 Le scénario 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 des dessins du calque. Cette option est intéressante lorsque l'on place des composants invisibles. Scénario Cette zone contient l’association de calques qui représentera a posteriori votre réalisation. 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 Ctrl+entrée.

18 18 Remplir la zone quadrillée du scénario avec des images clés. 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. 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. 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/ F6 Maintenant dessinez sur la scène et vous venez de terminer la manipulation. Frame 1(=image 1)

19 19 Symboles Un dessin peut être converti en symbole. 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 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.

20 20 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 F8

21 21 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

22 22 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 F11 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.

23 Interpolations Interpolation de mouvement. Interpolation de forme.

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

25 Interpolation de mouvement. Utilisation d’un guide de mouvement. 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. Suggestion : renommer le calque, exp- « dessin » 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é. Testez!!

26 Interpolation de mouvement. Changement de couleur. Testez!! 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.

27 Interpolation de forme. Testez!! 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).

28 Utilisation de masques. Définition : un masque sert à voir un objet à travers la forme d'un autre objet ^^ Taper une phrase\mot. 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.

29 Utilisation de masques. Testez!! 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. 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). Sur le calque du texte, choisir une image du scénario et y insérer une image.

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

31 Merci de votre attention.