Flash MX 2004 1er Séance LIU Xinlei GI02

Plan d’exposé Introduction Flash Flash MX Outils de dessin Scénario et notion d’image-clé Calques Symboles Animation interpolée de mouvement Animation interpolée de forme Exportation vers DreamWeaver MX

Introduction Flash

Introduction Flash Pour quoi Flash? Il permet de créer facilement de petites animations, et apporte ainsi de la vie à votre page WEB.

Flash MX

Flash MX Environnement

La bibliothèque d’animation Flash MX Panneau de commandes Fenêtre de scénario La barre d’outils La bibliothèque d’animation La Scène Barre des propriétés

Outils de dessin

Outils de dessin La barre d’outils Flèche Ligne Plume Ovale Crayon Transformation libre Encrier Pipette Main Couleur de trait Options (en rapport avec l’outil sélectionné) Sous–sélection Lasso Texte Rectangle Pinceau Transformer le remplissage Pot de peinture Gomme Zoom Couleur de remplissage

Outils de dessin Option- Gomme

Outils de dessin Options-Pinceau

Outils de dessin Options - Pot de Peinture

Outils de dessin Options - Crayon

Outils de dessin Affinités et groupes 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. 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).

Outils de dessin Pour les grouper: On peut sélectionner plusieurs objets et les grouper avec « Modification »  « grouper »

Outils de dessin - A l’inverse, on peut aussi les dissocier avec « Modification »  « dissocier »

Scénario et notion d’image-clé

Scénario et notion d’image-clé Affichir seulement les contours La scénario Liste objet Scène Afficher et marquer claque Liste scène Verouille claque Position tête de lecture Durée Image sélectionée Nombre image par seconde Ajouter claque / dossier claque

Scénario et notion d’image-clé Insertion d’image-clé Dans le scénario, vous travaillez avec des images et des images-clés. Image: Ce sont les éléments d’une animation. Image clé L’image clé est une image singulière qui correspond à un changement d’état à un moment bien précis défini dans le scénario.

Scénario et notion d’image-clé Insertion d’image-clé Remarque: Une image clé est soit vide ( représentée par un point blanc) Soit pleine (représentée par un point noir)

Scénario et notion d’image-clé Insertion d’image-clé- Utilisation des raccourcis clavier F6 pour une image clé

Calques

Calques Les 3 principaux types de calques : Les calques normaux Les calques guides et guidés Les calques masques

Calques L’utilisation des calques De même que dans Photoshop, les éléments sont placés dans des calques. - Possibilité de travailler sur plusieurs couches avec un ordre de superposition - Facilité pour traiter chaque élément séparément lors des animations

Calques Dessin sur plusieurs calques Sélectionner l’onglet calque dans la fenêtre scénario pour ajouter des calques. La superposition de ces calques donnera le dessin d’origine. Les calques peuvent être organisés par dossiers.

Calques masque les calques

Calques

Symboles

Symboles Définition Un symbole est un objet (graphique, clip ou bouton) qui appartient à la bibliothèque. Il y a 3 type de symbole: clip, bouton et graphique.

Symboles L’utilisation des symboles pour une utilisation multiple (intérêt dans le cas de modification) pour un objet clé

Symboles Créer un nouveau symbole Aller au « Insertion » 

Symboles Convertir un dessin en symbole - Sélectionner votre image, clic droit  « convertir en symbole » apparition d’un rectangle bleu autour de votre symbole - F8 Exemple appartient à la bibliothèque

Animation interpolée de mouvement

Animation interpolée de mouvementn Créer 2 calques: - un calque « poisson» et un calque « requin » (mettre le calque poisson au second plan) - Sélectionnez l’image 1 du calque poisson, dessinez un poisson, allez à l’image 30, « insérer une image clé »

Animation interpolée de mouvement - Sélectionnez l’image 1 du calque requin, ajouter votre symbole requin. - Allez à l’image 30, ajouter une image clé, prenez la requin sur la scène et mettez du droite.

Animation interpolée de mouvement 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.

Animation interpolée de mouvement Avec un guide de mouvement Sélectionner le calque poisson Insertion ou bouton droit>Guide de mouvement Sélectionner la 1ère image du calque « Guide : poisson » Dessiner la trajectoire avec crayon Placer l’objet en début et fin de trajet

Animation interpolée de forme

Animation interpolée de forme 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é, et supprimer le carré sur la scène 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

Animation interpolée de forme Remarque: Contrairement aux autres interpolations, celle-ci ne se fait pas avec des symboles!!

Exportation vers DreamWeaver MX

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