Flash3.exe. Flash 3 est un logiciel d édition de graphiques vectoriels. Il permet de créer des animations et des

Transcription

1 Flash3.exe Flash 3 est un logiciel d édition de graphiques vectoriels. Il permet de créer des animations et des anim ations interactives destinées principalement à être diffusées sur internet. Tutoriel créé par Mathieu Caussé Professeur d arts plastiques Académie de Bordeaux Ce tutoriel est libre d utilisation.

2 INTERFACE La barre d outils. En haut les outils, en bas leurs options. L échelle temporelle. À gauche Les différentes couches, semblables à des calques, dans lesquelles sont placées les éléments de l animation. Pour insérer une couche : Insérer > Couche. À droite Le nombre d images que l animation contient. En bas Le nombre d images par seconde ou cadence (ici 12 ips) et durée totale de l animation. Les scènes. L animation contient initialement 01 scène. La scène active est en blanc. Pour insérer une scène : Insérer > Scène. Une flèche blanche et bleue permet de revenir à la scène principale. La scène. Entourée par la zone de travail en gris. Pour afficher totalement cette dernière : Afficher > Zone de travail La bibliothèque. Elle contient les symboles (graphique, Movie Clip ou bouton), sons et bitmaps utilisables sur la scène. Pour l afficher : Fenêtre > Bibliothèque ou Ctl+L.

3 PRINCIPES GENERAUX C EST PARTI! Je paramètre une scène qui sert de base à l animation (dimensions, cadence, couleur de fond ). *** Sur la scène, je dessine les éléments nécessaires à l animation. Ces éléments peuvent être transformés en symboles, chacun doté d un nom. Ils sont alors automatiquement intégrés dans la bibliothèque et réutilisables. L occurrence d un symbole est ce symbole placé sur la scène. Un symbole peut avoir trois types de comportement : graphique (exemple : le dessin d un décor de fond) ; Movie Clip (exemple : personnage) ; bouton (interactivité). Ces éléments sont placés sur des couches, nommables et visibles dans l échelle temporelle. Une couche est semblable à une feuille de papier calque. La couche supérieure correspond au premier plan, la couche inférieure à l arrière-plan. Conseil : il est préférable de placer chaque élément animé sur une couche différente. Ces éléments sont modifiés dans le temps, image par image (couleur, forme, dimensions, position ). Toute image comportant la modification d un élément devient une image-clé (elle contient un rond bleu uni). Il existe deux moyens principaux de créer une animation : image par image (je dessine toutes les images) ou interpolation (je défini une image-clé de départ, une image-clé de fin et je laisse Flash calculer les images intermédiaires. *** Si nécessaire, j ajoute de l interactivité à l animation : création de boutons et utilisation d ActionScript, le langage de programmation de Flash. *** Enfin, une fois l animation terminée et testée, je la publie (exportation). Je peux ainsi la publier : sous forme de page HTML afin de l intégrer dans un site web ; sous forme d un projecteur autonome afin de pouvoir lire l animation sans recourir à un navigateur web. PREPARATION Je lance le logiciel : Démarrer > Programmes > Macromedia Flash 3 > Flash 3. Si la scène est calée contre la barre d outils à gauche, je décide d agrandir ma zone de travail : Afficher > Zone de travail. La scène est maintenant au centre de la zone de travail grise. Afin de faciliter mon travail futur, je choisis Fichier > Préférences et dans la fenêtre qui s ouvre je coche les cases «Sélection avec la touche Maj» et «Afficher le menu déroulant de l image». Je vais maintenant créer une animation. Elle comprendra au final : une image «photographique» au format *.jpeg comme décor de fond ; un personnage dessiné qui évoluera dans ce décor ; un peu d interactivité.

4 ANIMATION Le décor Le nouveau fichier d animation est ouvert. Il est pour l instant vierge. Je l enregistre sous le nom «animation». Le fichier créé porte l extension «*.fla» (animation.fla). J importe l image «paysage_nuit.jpeg» : Fichier > Importer et je cherche l image voulue (ou Ctrl+R). Comme indiqué, j ai l intention d utiliser une image photographique au format *.jpeg comme décor de fond. Je modifie donc les dimensions de la scène afin qu elles correspondent à celles de cette image (500x375 px) : Modifier > Animation et dans la fenêtre Propriétés de l animation qui s ouvre, entrer 500 px en largeur et 375 px en hauteur (l unité est le pixel). L image se place sur la scène. Elle est entourée d un liserai grisé, comme l est tout élément sélectionné sur la scène. Je remarque qu elle a été automatiquement insérée dans la Bibliothèque. J affiche la fenêtre Bibliothèque qui me servira plus tard : Fenêtre > Bibliothèque (ou Ctrl+L). La Bibliothèque s ouvre : elle est vide (normal!). Pour aligner l image au centre de la scène : je sélectionne l image, fais Modifier > Aligner (ou Ctrl+K). Dans la fenêtre qui s ouvre, je coche Aligner à la page et clique sur les boutons d alignement centré horizontal et vertical. Je fais OK. Dans l échelle temporelle, j ai maintenant un élément dans l image 01 de la couche 01. Pour plus de clarté, je renomme cette couche : je double-clique sur le nom de la couche et remplace «couche 1» par «fond». Je fais Entrée.

5 Afin de pouvoir intervenir sur l image de fond, je vais en séparer les pixels (opération de traçage) : Je sélectionne l image, puis choisis Modifier > Tracer bitmap Dans la fenêtre qui s ouvre, je mets le seuil de couleur à 80, la zone minimale à 5, j ajuste la courbe à pixels et seuil de coin à plusieurs coins. Je fais OK. Petit temps de calcul et l image apparaît comme tramée : elle est sélectionnée. Je clique dans la zone de travail pour la désélectionner. Au passage : l image perd plus ou moins de sa qualité! Solution 02 : Je groupe les pixels : Modifier > Associer (Ctrl+G). Le personnage Je vais séparer ce paysage en deux zones : une que je place dans une couche de premier plan, et une dans une couche d arrière-plan. Ainsi, mon personnage pourra évoluer non pas sur mais à l intérieur du paysage. Je crée une nouvelle couche que je nomme arbre : Insérer > Couche. Le personnage va évoluer dans ce décor et passer entre l arbre du premier plan à gauche et ceux plus en arrière, i.e. entre les couches fond et arbre. Afin d éviter toute modification accidentelle, je verrouille ces deux couches : je clique sur l icône main ou crayon à côté du nom de la couche et dans le menu qui s affiche je sélectionne Verrouillée (un cadenas s affiche alors). Je crée une nouvelle couche personnage que je glisse entre les couches fond et arbre. Avec l outil Lasso ou au moyen de l icône Flèche + touche Majuscule, je détoure l arbre au premier plan à gauche et un peu de sol (chaque partie sélectionné devient grisée). Je coupe l arbre de la couche Fond : Ctl+X. Je clique dans la couche arbre, sélectionne l image 01 et fais Édition > Coller sur place. Tant que l arbre est encore sélectionné, j associe ses pixels afin d éviter toute modification accidentelle. Deux solutions au choix pour cela. Solution 01 : Je le transforme pour cela Clip : Insérer > Créer un symbole. Dans la fenêtre qui s ouvre, je sélectionne Clip et donne arbre comme nom. Je fais OK. Je clique dans la première image de la couche personnage. Je choisis l outil Pinceau et dessine un fantôme (couleur et remplissage au choix). Afin de le nommer et d y apporter des modifications, je change mon dessin en symbole Clip : je sélectionne mon fantôme, fais Insérer > Créer un symbole et dans la fenêtre qui s ouvre nomme fantôme et choisis Clip.

6 Mouvement Je vais faire se déplacer mon Clip «fantôme» sur une durée de 02 secondes à partir de la gauche jusqu à un hors-champ à droite. La cadence de l animation étant de 12 images par seconde, mon animation comportera 24 images. Couche personnage : je clique sur l image 24 et fais Insérer > Image-clé (ou touche F6). Je crée ainsi une nouvelle occurrence de mon fantôme à l image 24. Mon fond et mon arbre ont disparu. Normal, ils ne duraient qu une seule image. Je les fais donc durer eux-aussi 24 images. J observe qu une flèche rouge s est dessinée dans la couche personnage entre l image 01 e l image 24, d é f i n i s s a n t a i n s i l e s i m a g e s intermédiaires par interpolation. Pour voir mon animation : je fais Entrée. Pour la tester, je fais Contrôle > Tester animation (Ctrl+entrée). Pour fermer la fenêtre de test, je clique sur la croix en haut à droite. Bravo! Je viens de réaliser ma première animation sous Flash 3! Mais je peux compliquer un peu! Je veux faire apparaître mon fantôme en fondu. Couche personnage : je clique sur l image 24 et sélectionne mon fantôme. Je le déplace à droite en dehors de la scène sur la zone de travail grise. Je clique sur l image 01 de la couche personnage qui contient mon fantôme. Je double-clique sur le fantôme. La fenêtre Propriétés de l occurrence s ouvre. Je sélectionne l onglet Effet de couleur, choisis Couche Alpha et paramètre celle-ci à 0%. Je fais OK. Je teste mon animation (Ctrl+Entrée). Je veux que mon fantôme change de taille lors de son déplacement. Couche personnage : je clique n importe où entre l image-clé 01 et l imageclé 24. J effectue un clic-droit et choisis Propriétés (ou menu Modifier > Image). Dans la fenêtre qui s ouvre : Je choisis l onglet Interpoler, Déplacement dans le menu déroulant et je coche la case Interpoler les changements de taille. Je fais OK. Il va rapetisser en passant derrière l arbre pour regrandir ensuite. Je clique entre l image 01 et 24 là où le fantôme passe derrière l arbre. Je clique sur F6 afin d insérer une image-clé dans laquelle je vais modifier mon fantôme. Avec l outil redimensionner, je rapetisse mon fantôme. Je teste mon animation (Ctrl+Entrée).

7 INTERACTIVITE Je veux que mon fantôme suive une trajectoire moins rectiligne. Pour cela, je dois créer un chemin de trajectoire (ou guide de déplacement). Je clique dans la couche qui contient mon fantôme sur l icône à côté du nom de la couche (main ou crayon). Dans le menu déroulant qui s affiche, je sélectionne Ajouter un guide de déplacement. Une nouvelle couche, appelée couche de trajectoire et reconnaissable à son icône linéaire bleue apparaît. Dans cette couche, avec l outil Crayon, je dessine une trajectoire partant de la gauche et sortant hors-champ à droite. Je sélectionne l outil Flèche puis l outil Adhérence. Dans l image-clé 01 de la couche personnage, je sélectionne mon fantôme et le place au point de départ de ma trajectoire (croix centrale sur point de départ qui devient un cercle). Je fais de même dans l image-clé 24. Flash ajoute de l interactivité aux animations par le biais de symboles Boutons et du langage ActionScript par lequel je détermine des actions. Je veux créer un bouton qui me permettra de lire et de stopper l animation. Je crée une nouvelle couche que je nomme actions (je la place au-dessus des autres). Je repère que flash a automatiquement inséré les 24 images nécessaires à mon animation. Il faut tout d abord que j interdise la lecture automatique de l animation si je veux la lancer plus tard à l aide d un bouton. Je vais donc commencer par bloquer l animation sur l image 01. En premier, j isole celle-ci du reste des images de la couche actions : je clique sur l image 02 et y insère une image-clé par F6. Puis je reviens dans l image 01 et effectue un clic droit pur sélectionner Propriétés. Dans la fenêtre qui s ouvre je choisis l onglet Actions. En haut à gauche, je clique sur le bouton + et dans le menu qui s affiche je choisis stop. Je fais OK. Je repère qu un petit a apparaît sur cette première image, indiquant la présence d une action sur celle-ci. Création du bouton de lecture Je dessine dans l image 01 de la couche actions l image qui me servira pour le bouton et la place en bas à gauche (ici un crâne). Je fais de ce dessin un symbole bouton : je le sélectionne et fais Insérer > Créer un symbole, coche Bouton et nomme lire. Je place aussi sur ma trajectoire le fantôme de l image-clé à laquelle il change de taille. Pour rendre le déplacement plus juste, je vais orienter le fantôme dans le sens de la trajectoire. Je sélectionne le fantôme de l image-clé 01 et fais Modifier > Image. Dans la fenêtre qui s ouvre je coche la case Orienter vers la trajectoire. Je fais OK et teste mon animation.

8 J effectue un clic-droit sur ce symbole et choisis Modifier. Mon dessin est maintenant isolé sur un fond blanc. Je remarque que mon échelle temporelle en haut a changé. Elle ne comporte plus que 4 images : Haut (bouton non survolé), Dessus (bouton survolé), Abaissé (clic de souris) et Cliqué (zone réactive de la souris). Mon bouton de lecture n existe que dans l image 01 de l animation. Je veux créer dans les autres images le même bouton mais qui me servira cette fois à stopper l animation pour revenir à l image 01. Dans la Bibliothèque je sélectionne le bouton «lire». Je clique sur la flèche de menu en haut à droite et choisis Dupliquer. Avec l outil Flèche je sélectionne les trois images vides et fais F6 afin de rajouter trois images-clés identiques à la première. Dans l image-clé Dessus je modifie mon dessin. J inscris par exemple le texte «lecture» afin d indiquer l usage du bouton. Je peux modifier aussi l image Abaissé. L image Cliqué sert à sélectionner la partie du dessin qui sera sensible à la souris. Dans la fenêtre qui s ouvre, je rentre stop comme nom, garde Bouton comme sélection et fais OK. Un second bouton nommé stop et identique à lire est créé. Je modifie ce bouton stop afin d inscrire «stop» à la place de «lecture». Je reviens à la scène principale en cliquant sur la flèche blanche et bleue au-dessus des onglets de scène à droite de la fenêtre d animation. J intègre maintenant l action nécessaire à la lecture et à la pause de l animation. Dans la scène principale, je sélectionne le bouton que je viens de créer. J effectue un clic-droit, choisis Propriétés (ou, sans clic-droit : Modifier > Occurrence) et sélectionne l onglet Actions. Je clique sur le bouton + et choisis l action Go To. Dans les champs d information à droite je garde <scène actuelle> comme scène de renvoie, entre 2 comme numéro d image et coche la case Aller à et lire. Ainsi, lorsque je cliquerai sur le crâne, la lecture commencera à partir de l image 02. Dans la scène principale, à partir de la bibliothèque, je place par glisserdéposer le bouton stop dans l image 02 de la couche actions, exactement superposé au bouton lire de l image 01. Pour faciliter ce placement, je clique sur l icône Calque contenant trois petits carrés rouges en haut à gauche des couches. Je rends ainsi visibles plusieurs images successives. Une fois le bouton calé, je désactive la fonction Calque. Je sélectionne le bouton stop et lui attribue comme action Go To avec Aller et lire à l image 1 comme paramètres. Une fois ce bouton cliqué, l animation reviendra à l image 01. Note : je peux définir différentes destinations comme lien de ce bouton (une image d une autre scène, une page HTML ).

9 PUBLICATION Je veux créer un bouton me permettant de fermer et quitter le lecteur d animation dans le cas d une animation autonome non inscrite dans une page HTML. Comme précédemment, je crée un bouton. J effectue un clic-droit sur ce bouton, choisis Propriétés et l onglet Actions. Je choisis FSCommand comme action et entre dans le champ d information à droite le mot «Quit». Ainsi, en cliquant sur ce bouton, le lecteur se fermera automatiquement. Pour publier une animation sous la forme d un lecteur autonome. Je fais Fichier > exporter l animation. Dans la fenêtre qui s ouvre je choisis un nom, le format *.swf et je fais enregistrer. Dans la fenêtre Export shockwave flash qui s ouvre alors, je change la qualité et laisse les autres informations telles que. Je fais OK. Dans l explorateur windows, je double-clique sur le fichier Shockwave flash que je viens de créer. Une fois ouvert, je fais Fichier > Créer projection et je saisis un nom. Je remarque que je crée ainsi un fichier *.exe.

10 MISE EN ŒUVRE FACILE AVEC UN ELEVE. Pour publier une animation sous la forme d une animation à lire dans un navigateur web. Je fais Fichier > exporter l animation. Dans la fenêtre qui s ouvre je choisis un nom, le format *.swf et je fais enregistrer. Dans la fenêtre Export shockwave flash qui s ouvre alors, je change la qualité et laisse les autres informations telles que. Je fais OK. Je crée une page HTML dans laquelle j insèrerais l animation shockwave flash. Il est assez facile de permettre à un élève de démarrer un projet avec Flash, sans pour autant engager un «long et profond» apprentissage du logiciel. Voici donc les quelques indications nécessaires pour ce faire : L élève démarre l ordinateur. Il ouvre le logiciel (Démarrer > Programmes > Macromedia Flash 3 > Flash 3). Si la scène est calée contre la barre d outils à gauche, il agrandit la zone de travail afin d y placer la scène au centre : Afficher > Zone de travail. Il choisit Fichier > Préférences et dans la fenêtre qui s ouvre coche les cases «Sélection avec la touche Maj» et «Afficher le menu déroulant de l image». L enseignant explique à l élève : où se trouve la barre d outils et son fonctionnement (sélection de l outil pour plus d options) ; où se trouve la scène sur laquelle il va dessiner ; où se trouve l échelle temporelle et son fonctionnement (un petit rectangle = 01 image ; quand je dessine sur la scène, le cercle contenu dans ce rectangle devient bleu ; je rajoute une nouvelle image en cliquant sur la touche F6 du clavier : je copie-colle ainsi à l identique le contenu de mon image précédente ; je modifie la nouvelle image ; je clique sur F6 ; etc.). L élève voit ainsi que trois images suffisent à créer une petite animation. S il le désire, l élève conserve l animation créée en l enregistrant dans le dossier approprié définit par l enseignant. Indication complémentaire 1 : l enseignant explique le fonctionnement des couches et leur utilité. Il vaut mieux dessiner chaque élément sur une couche différente afin de faciliter la réalisation de l animation. L élève ajoute une nouvelle couche en faisant Insérer > Couche. La couche supérieure définit le premier plan, la couche inférieure définit l arrière-plan. Indication complémentaire 2 : l enseignant explique comment regrouper les différentes parties d un même «corps». Soit l élève sélectionne tout d abord chaque partie voulue en maintenant la touche Majuscule enfoncée puis fait Modifier > Associer (Ctrl+G). Soit l élève sélectionne ces parties de même mais les convertit en Clip en faisant Insérer > Créer un symbole (F8). Il choisit alors l option Clip et nomme son élément.