AKOONE Farouck LI Li SI 28 A2004

Flash permet de : Créer des animations pour le Web, pouvant contenir une forte interactivité Des fichiers de faible poids (vectoriel) Compatible avec tous les navigateurs Chargement en lecture continue : l’application se lance sans être complètement chargée

Environnement Flash MX

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

La scène Barre des propriétés

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é)

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

Dessinons avec flash (3) Superposition de dessins : le dessin placé en arrière-plan sera effacé

Dessinons avec Flash (3) Deux dessins de même couleur fusionnent Pour éviter cela, il faut dessiner ses objets sur des calques différents !

Grouper des objets On peut regrouper des objets en un seul en: Sélectionnant les objets à grouper Modification Grouper On peut dissocier un groupe d’objets en faisant: Modification Dissocier

Calques 2 types de calques:

Exercice Dessiner trois objets de couleur différentes sur trois calques différents Pour créer un nouveau calque cliquer sur

Déplacez les calques les uns par rapport aux autres  Le premier calque de la liste est celui qui apparaît au premier plan.

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)

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é » Il faut au préalable sélectionner une image clé dans le scénario, sélectionnons l’image 15 du scénario.

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:

TYPES D’INTERPOLATION Il existe trois types d’interpolation: de mouvement de couleur de forme Pour les interpolations de mouvement et de couleur, il faut utiliser des symboles !

Interpolation de mouvement  Créez 1 calque voiture:  Sélectionnez l’image 1 du calque voiture Dessinez une voiture  Convertissez la en symbole (F8).

Interpolation mouvement (2)  Allez à l’image 20, ajouter une image clé, déplacer la voiture  Choisissez une image quelconque entre l’image 1 et l’image 20, dans la barre des propriétés, choisissez « interpolation de mouvement ». Une flèche sur fond violet apparaît dans le scénario.

Guide de mouvement Création d’un guide de mouvement pour la voiture:  Sélectionner le calque « voiture »  « Insertion » puis « guide de mouvement »  Sélectionner la 1ère image du calque « Guide : voiture »  Tracer au crayon le trajet de la voiture

Guide de mouvement (2) Etape 3 : Placement de la voiture  Sélectionner l’image initiale du calque « voiture »  Cliquer sur « Accrocher aux objets »  Avec la flèche, déplacer le symbole voiture (  un petit rond apparaît)  Placer la voiture 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 voiture à l’autre extrémité  Appuyer sur entrée ou « contrôle » puis « lire » pour observer l’animation

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

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

Interpolation de forme Transformer une pomme en banane :  Sélectionnez l’image 1, et dessinez une pomme  Allez à l’image 25, insérer une image clé, supprimer la pomme sur la scène et dessinez une banane  Sélectionnez une image intermédiaire dans le scénario, et choisissez « interpolation de forme »  Lisez l’animation

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

Les différents formats d’exportation Flash (.swf) : c'est le format d'exportation le plus courant, ce type de fichier est directement utilisable dans une fenêtre d'explorateur Internet. L'animation correspond exactement à celle que vous avez créée. HTML (.html) : Flash créée lui même une page html vierge contenant uniquement le.swf. GIF (.gif) : ce format est très répandu sur internet. Vous pouvez créer des gifs animés mais vous perdez totalement l'interactivité, et le résultat est parfois décevant. A n'utiliser qu'en toute connaissance de cause. JPEG (.jpg) : exporte en image, il n'y aura donc plus d'animation. PNG (.png) : idem que JPEG mais pour le format PNG. Projection Windows (.exe) : l'exportation sera très lourde (plusieurs Mo) mais l'avantage est que cela fonctionnera sur n'importe quelle machine car le logiciel pour visualiser est inclus. C'est une sorte de SWF avec visualisation intégrée. Projection Macintosh (.hqx) : comme le précédent mais pour Macintosh... Quick Time (.mov) : l'animation est transformée en film, vous perdez donc totalement l'interactivité.