FLASH MX : séance 1 Sandrine Rabin Nicolas Mollet SI28.

Présentation au sujet: "FLASH MX : séance 1 Sandrine Rabin Nicolas Mollet SI28."— Transcription de la présentation:

1 FLASH MX : séance 1 Sandrine Rabin Nicolas Mollet SI28

2 Les atouts de Flash Création d’animations pour le Web, pouvant contenir une forte interactivité. Faible poids des fichiers. Compatible avec tous les navigateurs. Chargement en lecture continue: l’application se lance sans être complètement chargée.

3 Environnement Flash MX

4 Principaux éléments : Le scénario La barre d’outils La bibliothèque Panneau de commandes

5 La Scène Barre des propriétés Principaux éléments (2):

6 Dessinons avec Flash 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é)

7 Dessinons avec Flash (2) Options Gomme Options Pinceau Options Pot de Peinture Options Crayon

8 Affinités et groupes Les groupes permettent de créer un objet à part entière qui n’a plus d’intersection avec les autres objets (on peut séparer pour modifier). Deux objets de même couleur superposés ne forment plus qu’un (affinité de couleur). Un objet placé par dessus un autre objet de couleur différentes efface une partie de cet objet. Sur un même calque

9 Calques 2 types de calques:

10 Exercice Dessinez un triangle jaune sur la scène, avec des ronds dedans. C’est votre fromage! Ajoutez un calque au scénario: Dessinez une souris verte sur ce nouveau calque. Renommez vos calques avec un nom approprié.

11 Vous obtenez alors: Superposez les figures et constatez leurs positions par rapport à la position de leurs calques dans le scénario. Sur 2 calques différents, il n’y a pas d’affinités entre les dessins.  Plus le calque est haut, plus il sera en 1er plan.

12 Les symboles  Un symbole est un objet (graphique, clip ou bouton) qui appartient à la bibliothèque.  Pour créer un nouveau symbole: - « Insertion »  « Nouveau symbole »  Pour convertir un dessin en symbole: - Sélectionner votre image, clic droit  « convertir en symbole »  apparition d’un rectangle bleu autour de votre symbole Exemple:

13 Exercice Convertissez votre souris, puis votre fromage en symbole.

14 Scénario Une image : Une image : Elément de l’animation Une image clé : Une image clé : Image singulière qui correspond à un changement d’état à un moment bien précis défini dans le scénario Remarque: Une image clé est soit vide ( représentée par un point blanc) Soit pleine (représentée par un point noir)

15 Insérer une image clé 3 méthodes: 1. Utilisation des menus: « Insertion » puis « image clé » 2. Utilisation des raccourcis clavier F6 pour une image clé 3. Utilisation de la souris Clic droit puis « Insérer une image clé »

16 Exercice Sélectionnez le calque fromage Cliquez sur l’image 30 de ce calque Insérez une image clé Ainsi, votre fromage reste visible sur ces 30 premières images.

17 Interpolations de mouvement et de couleur Les interpolation de mouvement et de couleur ne sont possibles qu’avec des images converties en symboles!!!!

18 Interpolation mouvement  Sur le calque « souris », Allez à l’image 30, insérez une image clé, prenez la « souris » sur la scène et mettez la près du fromage.  Choisissez une image quelconque entre l’image 1 et l’image 30, dans la barre des propriétés, choisissez « interpolation de mouvement ». Une flèche sur fond violet apparaît dans le scénario. Déplacer la souris vers le fromage:

19 Guide de mouvement Etape 1: Création d’un guide de mouvement pour la souris:  Sélectionner le calque « souris »  « Insertion » puis « guide de mouvement »  Sélectionner la 1ère image du calque « Guide : souris »  Tracer au crayon le trajet de la « souris » Permet au symbole de suivre un trajet défini.

20 Guide de mouvement (2) Etape 2: Placement de la souris  Sélectionner l’image initiale (1) du calque « souris »  Cliquer sur « Accrocher aux objets »  Avec la flèche, déplacer la souris (  un petit rond apparaît)  Placer la souris sur le départ de la ligne en ajustant le cercle sur l’extrémité de la ligne de guidage  Créer une interpolation de mouvement  Se placer sur la dernière image et positionner la souris.  Appuyer sur entrée ou « contrôle » puis « lire » pour observer l’animation

21 Interpolation de couleur Changer la couleur d’une pomme:  Créez une pomme verte que vous convertirez en symbole graphique  Renommez le calque « pomme »  Insérer une image clé à l’image 15 par exemple  Sélectionnez votre pomme et dans la barre des propriétés, dans le menu « couleur » choisissez « teinte »  Choisissez la couleur rouge et 90%  Sélectionnez une image de l’animation et appliquez une interpolation de mouvement.

22 Interpolation de forme Remarque: Contrairement aux autres interpolations, celle-ci ne se fait pas avec des symboles!!

23 Interpolation de forme (2) Transformer un carré en cercle:  Sélectionnez l’image 1, et dessinez un carré avec un dégradé  Allez à l’image 25, insérer une image clé vide, et dessinez un cercle d’une autre couleur  Sélectionnez une image intermédiaire dans le scénario, et choisissez « interpolation de forme »  Lire l’animation

24 Exportation vers DreamWeaver MX  Enregistrez l’animation  Allez dans « fichier  paramètres de publication»  Cliquer sur « exporter l’animation » (création d’un.swf)  Dans DW, cliquez sur le symbole flash  Sélectionnez votre animation  « Lecture » dans les propriétés

25 Voila, c’est fini.