Macromédia Flash MX AFCI-NEWSOFT

Transcription

1 Macromédia Flash MX AFCI-NEWSOFT

2

3 Section I - Présentation de l espace de travail 1/ La scène C est la zone centrale de la fenêtre, celle sur laquelle se déroule l animation. On peut y contrôler le déroulement des animations et le fonctionnement des zones réactives (boutons...) en appuyant sur la touche entrée pour déclencher la lecture. Pour stopper, appuyer de nouveau sur la touche entrée. On peut aussi utiliser le contrôleur d animation : la fenêtre principale, ou accessible par le menu Fenêtre. situé en haut à gauche de Pour modifier la scène (taille, couleur de fond...) on utilise la palette des propriétés, en bas de l écran : Taille du document final Couleur de fond de l animation Lecteur de l animation Nombres d images lues par seconde La palette Propriétés est utilisée pour paramétrer les outils et certains objets. Elle change d aspect selon l outil ou l objet sélectionné. Tél. : Fax Page 3

4 2/ Les outils La palette d outils permet de créer de modifier des objets ou du texte. Les outils doivent être réglés avant leur utilisation. 1 - Sélection objet 2 - Sélection vectorielle 3 - Trait 4 - Sélection à main levée 5 - Tracé vectoriel 6 - Texte 7 - Ellipse 8 - Rectangle 9 - Crayon 10 - Pinceau 11 - Transformation d objets 12 - Transformer le remplissage 13 - Encrier 14 - Pot de peinture 15 - Pipette 16 - Gomme 17 - Déplacement page 18 - Loupe 19 - Couleur du contour 20 - Couleur du fond 21 - Couleurs par défaut 22 - Intervertir 23 - Magnétisme 24 - Options du tracé Définition des outils 1 - Sélection objet : Sélectionne le fond ou le contour des objets sur la scène. Cette sélection permet de modifier les couleurs avec les outils pot de peinture et encrier. 2 - Sélection vectorielle : Sélectionne l objet avec un contour en courbes de Bézier (tracé vectoriel), Il est possible de modifier l objet en utilisant les vecteurs et les points d ancrage. 3 - Trait : Trace une ligne droite, à n importe quel angle. Régler les options de trait dans la palette Propriétés, et la forme dans Options du tracé (bas de la palette outils). Page 4 Tél. : Fax

5 4 - Sélection à main levée : Sélectionne les objets, ou des parties d objets sur la scène. On peut ensuite effacer la zone sélectionnée, la copier, changer ses couleurs (outils Pot de peinture et Encrier ) Tracé vectoriel : Permet de tracer des formes directement en courbes de Bézier. En cliquant sur un point existant, on le supprime. En cliquant sur un tracé, on ajoute un point. Pour convertir un point d angle en point courbe, on utilise l outil de sélection vectorielle avec la touche alt. 6 - Texte : Cliquer sur la page et saisir le texte. Les réglages typographiques se font dans la palette Propriétés. Le texte statique permet de créer un lien sur le texte, en entrant l adresse de la page à atteindre dans la zone précédée d une chaîne. 7 - Ellipse : Pour tracer des ovales ou des cercles. Quand un petit cercle noir appairait à côté du curseur de la souris en cours de traçage, c est que le cercle est parfait. 8 - Rectangle : Pour tracer des rectangles ou des carrés. Quand un petit cercle noir appairait à côté du curseur de la souris en cours de traçage, c est que le carré est parfait. 9 - Crayon : Outil de dessin à main levée. Choisir l épaisseur, la couleur et le type de tracé (continu, pointillé... ) dans la palette Propriétés Pinceau : Même type de tracé que le Crayon, mais avec en plus de la couleur de contour une couleur de fond. Choisir ces options avant de tracer. On peut aussi régler l épaisseur du tracé, ainsi que la forme de la pointe en bas de la palette objets Transformation d objets : Après sélection de l objet, placer le curseur pour obtenir un des 3 outils de transformation disponibles avec cette fonction (Rotation, Mise à l échelle, Homothétie, Inclinaison) Transformer le remplissage : Déplace et repositionne le fond d un objet, a condition que ce fond soit un en dégradé ou un motif Encrier : Sélectionner un objet, cliquer sur l encrier et choisir une couleur de contour. En cliquant sur le contour de l objet on change sa couleur, 14 - Pot de peinture : Même principe que l outil précédent, mais affecte la couleur de fond de l objet Pipette : Prélève une couleur, n importe où sur l écran par un simple clic Gomme : Efface le fond et le contour des objets Déplacement page : Déplace la zone de travail par cliquer-glisser Loupe : Zoom plus et moins sur la page. Cet outil ne change pas la taille de l animation finale. Tél. : Fax Page 5

6 19 - Couleur du contour : Détermine la couleur du contour d un outil de traçage. Fonctionne avec les outils Crayon, Pinceau, Plume, Ellipse et Rectangle Couleur du fond : Détermine la couleur du fond d un outil de traçage. Fonctionne avec les outils Crayon, Pinceau, Plume, Ellipse et Rectangle Couleurs par défaut : Rétablit le blanc et le noir dans les couleurs de fond et de contour Intervertir : Echange les couleurs de fond et de contour Magnétisme : Impose un déplacement magnétisé sur la grille invisible, et permet un meilleur alignement des objets entre eux Options du tracé : Aide au tracé à main levée. Les options permettent de lisser le tracé, de le rendre angulaire ou de respecter exactement le tracé de l utilisateur. Dans les options de tracé (en bas de la palette objets ), choisir le type d aide au traçage désirée : Redresser, rend le tracé angulaire, Lisser arrondi les courbes, Encre ne change pas la forme du tracé de l utilisateur. 2/ Le scénario Il se compose de 2 zones : Les calques et la time line. Le scénario gère l'animation des objets placés sur la scène. Chaque objet, nommé acteur devra de préférence être placé sur un calque qui lui sera propre. Les acteurs se matérialisent dans la time line sous forme de points-clé ou images-clé. La sélection d une image-clé dans la time line entraîne la sélection de l objet sur la scène. Pour plus de facilité, le scénario peut se diviser en séquences. Chaque séquence est une partie du même scénario, enregistrée sur le même document. Page 6 Tél. : Fax

7 Par défaut, les séquences sont lues dans l ordre de leur création. On peut modifier l ordre de lecture grâce aux scripts (voir plus loin). Pour créer une nouvelle séquence : menu insertion, séquence. Pour accéder aux séquences créées, cliquer sur l icône dans la liste la séquence à atteindre. en haut à droite de l écran, et choisir a/ les calques Contiennent les acteurs présents sur la scène. L ordre des calques détermine l ordre des plans du dessin. Si un calque est placé tout en haut de la liste des calques, l objet qu il contient sera affiché par dessus tout les autres sur la scène. Il est préférable de nommer chaque calque, du nom de l acteur qu il contient. Nom du calque Afficher/Masquer Verrouiller/Déverrouiller Afficher en contours Nouveau calque Supprimer Calque de guide Groupe de calques Pour intervenir sur un seul des calques, cliquer sur les puces en face du calque. Pour masquer/afficher, verrouiller/déverrouiller, afficher les contours de tous les calques, cliquer directement sur les icônes. Le calque de guide impose un chemin de déplacement à l acteur qui se trouve sur le calque qui est lié à lui (voir plus loin animation ). Le groupe de calque se comporte comme un dossier contenant plusieurs fichiers. En masquant ou en verrouillant le groupe, on masque et verrouille tous les calques qui s y trouvent. Tél. : Fax Page 7

8 b/ La timeline Gère le facteur temps de l animation. Les acteurs, représentés par les points -clé, apparaissent sur la scène au moment où la tête de lecture les atteint dans la time line. La time line est graduée en IPS (images par seconde). Ne pas oublier de vérifier la cadence de lecture, qui détermine le nombre d images lues par seconde. Par défaut, la cadence est de 12 IPS. Une animation qui devra durer 1 seconde va occuper une plage de 12 images. Les éléments présents sur la time line : Graduation IPS Point clé ou image clé Tête de lecture Point clé vide ou image clé vide Amener l affichage à l emplacement de la tête de lecture Image courante Cadence de l animation Graduation IPS : Repères d animation. Ces repères servent à indiquer la durée des animations au cours de la construction. Ils ne changent pas, même si on modifie la cadence d animation. Ils sont affichés de 5 en 5. Tête de lecture : L endroit où elle se trouve sur la time line indique le moment de l animation qui est affiché dans la scène. Si la tête de lecture se trouve en image 24, pour une cadence de 12 IPS, elle affiche l image qui appairait au début de la 2 ème seconde. Donc, elle a déjà lu 2 secondes d animation. Point clé vide ou image clé vide : Pour insérer un Point clé vide, sélectionner une cellule dans la time line, et sélectionner image clé vide dans le menu insertion. Le point clé vide permet d ajouter un nouvel objet sur la scène. Par défaut, chaque nouveau calque possède une image clé vide en image 1. Point clé ou image-clé : Indique qu il existe un objet sur la scène, et permet de le sélectionner. A chaque modification de l objet dans l animation (changement de taille, de forme, de couleur, de direction dans un déplacement, interpolation...) un nouveau point clé appairait ou est inséré par l utilisateur (menu insertion ). Page 8 Tél. : Fax

9 Amener l affichage à l emplacement de la tête de lecture : courante de la tête de lecture. déplace l affichage du scénario jusqu à la position 3/ Description des acteurs Les acteurs sont les objets (dessins, photos, animations, sons...) qui composent l animation. On peut retrouver tous les acteurs dans la bibliothèque, sauf les éléments de décor. a/ La bibliothèque La bibliothèque est une palette flottante. Chaque nouvelle animation possède sa propre bibliothèque, en plus de celles par défaut. Les acteurs présents dans la bibliothèque ne doivent pas être supprimés, sauf s ils ne sont plus utilisés : ils sont liés à l animation. On ne peut pas annuler la suppression d un acteur dans la bibliothèque. La bibliothèque contient différents types d acteurs, et possède un affichage de prévisualisation. Nom de la bibliothèque Prévisualisation de l acteur Image importée Symbole Bouton Dossier Symbole Clip Son importé Symbole graphique Tél. : Fax Page 9

10 Nom de la bibliothèque : Porte le nom du document dans lequel elle a été créée. Ici, le document s appelle décor_scène. Quand on enregistre un document, sa bibliothèque est enregistrée en même temps. Elle s ouvre avec le document. Prévisualisation de l acteur : Affiche l image ou l animation de l acteur sélectionné dans la liste de la bibliothèque. Image importée : En général une photo ou un effet graphique créé sous photoshop et enregistré pour le web, dans un format léger (gif ou jpeg). contient des symboles. L utilisateur le crée en bas de la bibliothèque, et glisse les symboles à l in- Dossier : térieur. Son importé : En provenance d un logiciel de traitement du son (SoundForge ou Sound Edit), de sons téléchargés sur internet (attention aux droits) ou de sons enregistrés par l utilisateur. Ils peuvent être enregistrés en Wave ou en MP3 par exemple. Flash permet de recompresser n importe quel son importé au format MP3. b/ Les symboles Définition Graphique, clip d animation, ou bouton. Ces symboles ont chacun des propriétés particulières. Tous les acteurs qui interviennent dans l animation doivent être convertis en symboles, sauf les éléments de décor et ceux pour lesquels on fait une interpolation de forme. Conversion / Création Pour créer un nouveau symbole, sélectionner l acteur sur la scène et cliquer sur convertir en symbole dans le menu insertion. Selon l utilisation qui sera faite de l acteur, on choisira un des 3 types de symboles. Nom du symbole Emplacement du point de référence Etat du symbole On peut aussi créer le symbole en sélectionnant nouveau symbole dans insertion. Dans ce cas, le symbole n existe pas sur la scène, mais seulement dans la bibliothèque. Pour l insérer sur la scène, sélectionner un point clé dans la time line, ou insérer un point clé vide, et glisser le symbole sur la scène. Page 10 Tél. : Fax

11 Attention, toujours nommer les symboles. Symbole graphique : Utilisé par exemple pour les acteurs qui doivent se déplacer sur la scène, dans le cas d une interpolation de mouvement ou d un déplacement sur un guide. Symbole clip d animation : Un acteur en symbole clip est animé sans cesse.par exemple : un oiseau qui bat des ailes doit traverser l écran. Dans le clip, on anime seulement les ailes. L oiseau bat des ailes sans cesse (en boucle), et il est utilisé sur l écran pour le déplacement. Symbole bouton : Quand l acteur est destiné à être un lien, pour atteindre une autre séquence, une page HTML, jouer un son, faire apparaître un autre acteur... C est l utilisateur qui doit déclencher l action en cliquant sur le bouton. Emplacement du point de référence : Point d origine du symbole pour le situer sur la scène en X et Y. Le point noir est le point d origine se sont ses coordonnées qui apparaîtront en X et Y. Le point zéro (origine de la mesure) se trouve en haut à gauche de la scène. Modification Modifier un symbole dans la bibliothèque entraîne une modification du symbole sur la scène, à chaque fois qu il a été utilisé. Pour entrer dans la zone de modification du symbole, clliquer sur l icône choisir dans la liste le symbole a éditer. en haut à droite de la scène, et Dans la zone de modification du symbole, on peut à nouveau modifier sa forme, ses couleurs... Pour revenir sur la scène, sélectionner séquence... à côté du nom du symbole. Retour à la séquence Nom du symbole Les symboles peuvent-être imbriqués les uns dans les autres, en particulier lorsqu il s agit de symboles animés.. Tél. : Fax Page 11

12 Section 2 - Applications pratiques 1/ Les acteurs dans le scénario Le scénario permet de mettre les acteurs en scène. Ils apparaissent dans le scénario sous forme d images-clé sélectionnables. Chaque image-clé correspond au contenu d un calque du scénario. Calque contenant un élément présent uniquement en image 30. action Calque contenant un élément inerte (élément de décor), présent durant toute l animation. Calque contenant une animation (interpolation de mouvement) L aspect de la time line indique le rôle de l acteur dans le scénario - Une zone blanche indique l absence d acteur dans cette partie de l animation. Une image clé peut-être insérée plus loin pour faire apparaître l acteur plus tard dans l animation. Ici, dans le calque action, le point clé n existe qu en image 30, l action aura donc lieu à ce moment, quand la tête de lecture passera sur l image Une zone grise (toujours précédée d une image clé), indique que l objet n est pas animé, mais qu il existe sur la scène jusqu au rectangle gris qui termine la zone. Les calques Soleil et Cactus par exemple, sont des éléments de décor. Ils ne sont pas animés mais constituent le fond de page tout le long de l animation. - Une flèche dans une zone bleue indique la présence d une interpolation de mouvement. L objet se déplace sur la scène de sa position en image 1, à sa position en image 30. Page 12 Tél. : Fax

13 Le calque bus contient l animation du bus qui se déplace de la gauche à la droite de l écran. - Une flèche dans une zone verte indique la présence d une interpolation de forme. L objet se transforme sur la scène de sa forme initiale en image 1, à sa forme finale en image 30. Ci-dessous, le calque soleil se transforme d image 1 en image 30. Début et fin de l interpolation de forme. Les acteurs peuvent être placés dans le scénario de plusieurs façons - Par importation, d un logiciel comme Photoshop, Illustrator... : Les images sont enregistrées en JPG ou GIF sur le logiciel d origine, puis importées directement dans la bibliothèque de flash : Fichier - Importer dans la bibliothèque, puis insérées sur la scène par cliquer/glisser à partir de la bibliothèque. - En les dessinant directement sur la scène de Flash, après avoir inséré une image clé vide dans la timeline, au moment où l acteur doit apparaître : On peut ensuite le convertir en symbole ou pas, selon l utilisation qui sera faite de l acteur. - En insérant un nouveau symbole : On crée alors l acteur directement dans la fenêtre des symboles, puis on l'insère sur la scène en le glissant à partir de la bibliothèque. 2/ Interpolations et déplacements Elles sont de 2 types : mouvement et forme. Ce sont des manipulations de base sur Flash. On les utilise pour déplacer ou transformer les acteurs. Le logiciel crée lui-même (interpole) les étapes intermédiaires de la transformation, à partir d une image de départ et d une image finale définies par l utilisateur. 1/ Interpolation de forme C est un morphing. Un acteur carré bleu se transforme en acteur rond jaune progressivement. Il est possible d appliquer ces transformations sur le texte, à certaines conditions. Tél. : Fax Page 13

14 Les étapes de l interpolation de forme - Créer un nouveau calque et sélectionner l image clé vide. Il contiendra les 2 formes : - En image 1 (départ), dessiner la forme de base sur la scène (ici, le carré bleu). L image clé se remplit et devient noire. - Sélectionner l image finale dans le scénario (ici, l image 15) Image clé sélectionnée - Insérer une image clé vide, afin de pouvoir ajouter une forme différente (une image clé non vide duplique l objet qui existe déjà sur le calque). L acteur carré bleu est dupliqué jusqu en image 14. Sur l image 15, l image clé vide va permettre de dessiner le rond jaune. - Dessiner le rond jaune en image 15. L image clé en 15 se sélectionne en noir. Les 2 formes existent sur le même calque. - Sélectionner l image clé 1 seule dans le scénario. - En bas de l écran, ouvrir la fenêtre Propriétés. Dans le menu déroulant interpolation, choisir forme Page 14 Tél. : Fax

15 - Dans le scénario, une zone verte avec une flèche appairait pour signaler que l interpolation de forme est effective : - Jouer l animation pour contrôler l interpolation. - Sur la scène, les images intermédiaires ont été créées. Par exemple, en image 9, la forme est celle-ci : Flash a aussi interpolé la couleur, qui change progressivement de bleu à jaune. La quantité d étapes de formes et de couleurs générées par Flash dépend de la longueur de l animation demandée par l utilisateur. 2/ Interpolation de forme sur le texte La méthode est la même, à une exception : avant de pouvoir appliquer l interpolation sur le texte (d un texte à un autre, ou d un objet à un texte), celui-ci doit être séparé dans modification, plusieurs fois jusqu à ce que la commande séparer soit grisée. On ne peut pas faire d interpolation de forme sur un objet groupé ou un symbole. 3/ Interpolation de mouvement C est un déplacement. Un acteur carré bleu placé à gauche de la scène se déplace progressivement vers la droite de la scène. Il est possible de changer en même temps la taille et la forme de l acteur, mais pas sa couleur. Tél. : Fax Page 15

16 Les étapes de l interpolation de mouvement - Créer un nouveau calque et sélectionner l image clé vide : - En image 1 (départ), dessiner la forme de base sur la scène (ici, le carré bleu). L image clé se remplit et devient noire. - Convertir l objet en symbole graphique : menu insertion, convertir en symbole graphique - Sélectionner l image finale dans le scénario (ici, l image 15) - Insérer une image clé, afin de dupliquer la forme en 15 : L acteur carré bleu est dupliqué jusqu en image 14. Sur l image 15, on trouve cette fois une nouvelle occurrence du même objet - Sélectionner l image clé 1 seule dans le scénario. - En bas de l écran, ouvrir la fenêtre Propriétés. Dans le menu déroulant interpolation, choisir mouvement - Dans le scénario, une zone verte avec une bleue appairait pour signaler que l interpolation de mouvement est effective : - Jouer l animation pour contrôler l interpolation. Page 16 Tél. : Fax

17 4/ Le guide de mouvement Le guide de mouvement est un tracé, toujours ouvert, qui permet de guider un ou plusieurs acteur sur une trajectoire non rectiligne. Les étapes de création du guide de mouvement - Création de l acteur : insérer une image clé dans la timeline, pour y placer un acteur converti en symbole (graphique, bouton ou clip) - Sélectionner le calque de l acteur en cliquant sur son nom dans la zone des calques. - Dupliquer l acteur dans le scénario, jusqu au point souhaité pour la fin du mouvement Ici, l animation prendra fin en image Ajouter un calque-guide de mouvement, en cliquant sur l icône en bas de la zone des calques : Icône de création d un calque de mouvement Le calque de mouvement appairait au-dessus du calque de l acteur. Ils sont reliés par un pointillé qui indique que le calque de l acteur peut-être guidé par le calque de mouvement. - Tracer la trajectoire sur le calque de mouvement, avec l outil de traçage de votre choix. On peut aussi importer ou copier/coller un tracé de photoshop ou d illustrator. Tél. : Fax Page 17

18 Il est important que le tracé soit d un seul trait ininterrompu et ouvert aux extrémités : tracé du guide de mouvement Acteur à guider Quand le guide est tracé, il existe par défaut sur toute la longueur de l animation. - Verrouiller le calque de guide, pour éviter de modifier le tracé : Calque verrouillé - Sélectionner l image 1 de l acteur dans le scénario et déplacer l objet sur la scène pour le faire coïncider avec le début de la trajectoire : Le point central de l acteur doit toucher le début de la trajectoire. Page 18 Tél. : Fax

19 - Sélectionner l image finale de l animation, et déplacer l objet sur la scène à la fin de la trajectoire : - Sélectionner l image 1 du claque de l objet et ajouter une interpolation de mouvement. - Jouer l animation pour vérifier le fonctionnement du guide. 3/ Les séquences Les séquences permettent de découper l animation en sous-parties plus faciles à gérer. Elles donnent aussi la possibilité à l utilisateur de naviguer dans l animation à l aide de boutons. Par défaut, les séquences s enchaînent dans l ordre numérique. On peut, grâce à des boutons atteindre des séquences sans respecter l ordre de création. Pour travailler sur une nouvelle séquence : menu insertion, séquence. Pour se déplacer d une séquence à l autre, utiliser l icône en forme de clap, en haut à droite de la scène : Accès aux différentes scènes existantes Tél. : Fax Page 19

20 4/ Les boutons Les boutons sont des zones qui seront réactives à l utilisation. Ils peuvent être inertes ou animés, changer au passage de la souris... Les boutons servent à proposer un choix de navigation à l utilisateur, qui peut ainsi sélectionner les thèmes qui s affichent sur l écran. Ils sont en général cliquables, c est à dire qu ils réagissent à un clic de souris, mais peuvent aussi déclencher l action sur un simple passage du curseur. Les boutons de Flash sont des symboles auxquels on a attribué la caractéristique bouton. Pour créer un bouton comportant plusieurs états (bouton en roll-over), les différents états doivent exister dans la bibliothèque. On peut ensuite y ajouter un son. Les étapes de création d un bouton - Importer dans la bibliothèque ou dessiner les acteur qui devront être les états du bouton. En général, les boutons affichent 2 états : off (quand le curseur ne les touche pas) et on. Il est possible de faire des boutons avec un seul état (l aspect ne change jamais), ou avec 3 états différents (l aspect change.à chaque action de l utilisateur : - 1 /état initial, - 2/ quand on roule sur le bouton, - 3/ quand on clique sur le bouton) Ici, les graphismes viennent de photoshop. Ils ont été créés en RVB, 72 DPI et enregistrés pour le web, en JPG et importés dans la bibliothèque.de Flash.(menu fichier ). Ce sont de simples bitmaps, mais on peut utiliser aussi des symboles existants, graphiques ou clip d animation. Page 20 Tél. : Fax

21 - Dans le menu insertion, insérer un nouveau symbole bouton : - L écran affiché est celui du symbole bouton. La timeline est différente, et permet de définir les états du bouton : apparence inerte du bouton quand le pointeur n'est pas dessus apparence du bouton quand vous cliquez dessus. apparence du bouton quand le pointeur se trouve dessus zone qui réagit au clic de la souris. Cette zone est invisible dans l'animation - Glisser le premier état du bouton sur l image clé vide de haut, à partir de la bibliothèque - Sélectionner la cellule qui correspond à dessus et insérer une image clé vide. Cette opération permet de placer ensuite le 2 ème état du bouton à cet endroit. Zone de modification des symboles Tél. : Fax Page 21

22 - Toujours à dans la fenêtre modification du symbole, centrer l acteur grâce à la palette infos. Choix du point d alignement de l objet (haut-gauche ou centre) Coordonnées X et Y La petite croix est le centre de la zone de travail. On obtient la timeline suivante : L image clé haut contient l état 1 :. L image clé dessus contient l état 2 : - Retourner sur la scène, et insérer le symbole bouton qui se trouve maintenant dans la bibliothèque. - Tester l animation (ctrl entrée) pour voir le bouton fonctionner. L état change (passe de 1 à 2 lorsqu on roule dessus) et le curseur se transforme en main. Pour l instant, le bouton ne mène nulle part, puisqu on a pas encore indiqué quelle page ou quelle séquence il doit atteindre. Pour donner cette instruction au bouton, il faut utiliser les Actions de Flash pour établir des liens. Etapes de programmation du bouton Pour atteindre en cliquant sur le bouton, une autre séquence existante de Flash : - Sélectionner le bouton sur la scène Dans la fenêtre propriétés, l acteur est reconnu comme bouton : Page 22 Tél. : Fax

23 - En bas de l écran, ouvrir la fenêtre propriétés. - Cliquer sur la section Actions puis Contrôle de l animation et double cliquez sur GoTo. Cette action est paramétrable, afin de pouvoir atteindre et arrêtez, ou atteindre et lire la suite de l'animation. Les infos de scènes et d images ne seront disponibles que si ces éléments ont été créés au préalable. - Indique quelle zone la tête de lecture doit atteindre lors du clic sur le bouton et ce qu elle doit faire : Atteindre la cible et continuer la lecture Arrêter dans l attente d une autre action Séquence à atteindre N d image à atteindre sur la séquence - Le script (la commande) appairait en bas de la fenêtre, et permet du choisir l action : On release correspond à l action qui devra être effectuée par l utilisateur pour déclencher la réaction du bouton. En cliquant sur le texte On release, on accède aux autres possibilités d actions : Appuyer : quand le bouton de la souris est appuyé Relâcher : quand le bouton de la souris remonte (après le clic) Tél. : Fax Page 23

24 Relâcher en dehors : quand le bouton de la souris remonte, alors que le curseur n est plus, à l écran, dans la zone réactive (bouton) Touche : quand l utilisateur appuie sur la touche prévue. A définir ici, en cochant la case touche, puis en utilisant la touche souhaitée dans la zone de saisie. Survoler : quand le curseur passe sur le bouton, sans clic Sortir du survol : au moment où le curseur sort de la zone réactive du bouton Faire glisser au-dessus : quand l utilisateur fait glisser avec la souris un objet déplaçable de l animation au-dessus du bouton Faire glisser en éloignant : comme ci-dessus, mais quand l objet déplaçable sort de la zone du bouton 5/ Les clips d animation Les clips d animation sont des symboles animés continuellement. Une fois insérée sur la scène, l animation joue en boucle et il est possible de l utiliser soit comme élément de décor, soit comme bouton, ou encore de lui appliquer une trajectoire. Etapes de création d un clip d animation - Dessiner ou importer l élément de base (symbole graphique ou image bitmap) du clip. - Dans le menu insertion, créer un nouveau symbole clip. - Dans la zone de modification des symboles, créer l animation du clip. - Insérer le clip sur la scène, ou dans un symbole bouton. Le clip d animation ne fonctionnera sur la scène que lorsqu on testera l animation (ctrl entrée). Page 24 Tél. : Fax

25 6/ Les sons Flash accepte la plupart des formats de sons, mais il est pratique d utiliser le MP3, qui est un format léger qui garde une bonne qualité. Etapes d insertion de sons - Importer les sons dans la bibliothèque, menu fichier, importer dans la bibliothèque Le son possède sa propre icône, comme les symboles : Son importé - Sur la timeline, créer un nouveau calque son. Il occupe la longueur totale de l animation. - A partir de la bibliothèque, glisser le son sur la scène - On obtient une représentation graphique du son dans le scénario, qui permet de contrôler le temps de lecture du son Tél. : Fax Page 25

26 - Le son reste modifiable dans Flash dans une certaine limite. En double-cliquant sur son icône dans la bibliothèque, on accède aux informations et modifications ci-dessous : Représentation graphique Nom du son Mise à jour automatique en cas de modification du fichier d origine. Le son est ré-importé automatiquement dans la bibliothèque. Importer un son de remplacement. La mise à jour se fait aussi dans le scénario Jouer/arrêter le son Utiliser la qualité du fichier d origine re-compresser en MP3 avec Flash Infos de qualité, poids et compression du son - Dans la fenêtre propriétés, on peut modifier l aspect du son : Enveloppe du son Effets de rendu sonores Jouer le son en boucle. Indiquer le nombre de fois que le son doit rejouer (Voir plus loin la fenêtre de modification de l enveloppe) Page 26 Tél. : Fax

27 Les effets sonores modifient la répartition du son entre les hauts parleurs droit et gauche : - Canal gauche ou droit : le son sort du haut parleur gauche ou droit seulement - Fondu de droite à gauche ou de gauche à droite : le son joue seulement d un côté, puis se déplace vers l autre côté - Fondu entrant : le son arrive en début d animation dans les 2 canaux en même temps, mais à un volume très bas, qui augmente progressivement pour atteindre le volume normal - Fondu sortant : même chose que précédemment, mais le son perd de son volume pour s éteindre en fin d animation. - Personnalisé : donne la possibilité de régler soit même les effets de volumes sonores, l entrée et la sortie du son (moment de départ et d arrêt). Les poignées d enveloppe règlent le volume sonore. Elles sont déplaçables par cliquer/glisser. La barre d affichage centrale affiche le temps. Les réglages affichés sont les mêmes que dans modifier (pour modifier l enveloppe du son) Tél. : Fax Page 27

28 Section 3 - Exportation, publication et insertion dans dreamweaver 1/ Exportation de l animation Une fois l animation enregistrée, elle génère automatiquement un fichier *.SWF à insérer dans l éditeur HTML. Pour choisir soi-même les réglages de compression, il faut exporter l animation (menu fichier ) Etapes pour l'exportation - Dans le menu fichier, sélectionner Exporter l animation. Nommer le fichier et choisir sa destination. Ce fichier doit-être placé à son emplacement définitif et doit être mis en ligne avec les fichiers du site. Dans le menu déroulant type, il est possible de choisir d autres formats video pour la compilation de l animation, ce qui permets d utiliser les animations Flash dans d autres contextes. Pour le web, choisir SWF qui est le format par défaut. - La fenêtre de réglages appairait : Les options à vérifier sont les suivantes : Générer un rapport de taille : génère un fichier texte contenant des informations relatives au fichier SWF final Protéger contre l importation : permet de verrouiller le fichier et de le rendre non-importable. Si un mot de passe à été défini, seul l accès par ce mot de passe permettra d importer un fichier valide. Page 28 Tél. : Fax

29 Omettre les actions trace : les actions trace sont utilisées pour enregistrer des remarques de programmation ou pour afficher des messages dans la fenêtre Sortie pendant le test d'une animation. On peut les supprimer automatiquement dans la compilation à cet endroit. Compresser l animation : Actif seulement dans la version 6. Permet de gagner en poids sur l animation finale. Mot de passe : actif si l animation est protégée Qualité JPG : qualité de la compression. Plus la compression est forte, plus les pixels de l image risquent de s abîmer. Il faut trouver le bon rapport qualité/poids en faisant des essais. Flux continu : donne la possibilité d une recompression globale de tous les sons de l animation, et le choix de paramètres à utiliser. Neutraliser les paramètres audio : supprime pour la compilation toutes les sources sonores. Si on choisit cette méthode de compression dans le but de faire un site internet, il faut ensuite ouvrir une page de dreamweaver, et insérer l animation SWF grâce à l outil insérer un flash dans la barre d outils de dreamweaver. 2/ Publication du site Cette fonction s utilise essentiellement pour les sites web. En une seule opération, Flash génère tous les fichiers nécessaires à la mise en ligne de l animation. Etapes pour la publication 1/ Terminer l animation et sélectionner Paramètres de publication dans Fichier 2/ La fenêtre de publication permet de choisir quels fichiers seront créés par Flash, et quels seront leurs paramètres. Tél. : Fax Page 29

30 a/ Formats Placer les coches en face des fichiers souhaités. Pour un site web, cocher au minima Flash (swf) et HTML. La page HTML pourra ensuite être modifiée dans dreamweaver. Enlever la coche dans Utiliser les noms par défaut permet de changer les noms des fichiers qui vont être créés. Autrement tous les documents portent le même nom que l animation, avec des extensions différents. b/ Flash Pour les réglages de cette fenêtre, voir la rubrique Compression de l animation ci-dessus. Page 30 Tél. : Fax

31 c/ HTML Paramètres de la page HTML générée. d/ GIF Paramètres des images GIF générées. Les réglages de compression sont identiques à ceux de Photoshop. Le fichier créé sera un GIF animé, avec les mêmes paramètres et caractéristiques que ceux d image ready par exemple. Tél. : Fax Page 31

32 Une fois les réglages effectués, il suffit de cliquer sur Publier pour créer les fichiers demandés. Les documents sont créés dans le même dossier. Fichier de travail Flash (1) Image GIF (2) Page HTML (3) Animation compressée (4) 1 - Fichier Flash : C est le fichier de travail. Il garde tous les éléments qui composent l animation, sans les compresser. Il permet de retravailler l'animation au besoin. Ce fichier ne doit pas être mis en ligne. La page HTML ne fait pas appel à lui. Il doit être conservé en archive. 2 - Image GIF : Elle n est pas indispensable dans ce cas. Elle est utilisée en importation dans une page HTML. A mettre en ligne si elle a été utilisée sur une page. 3 - Page HTML : Indispensable. C est le document qui sera lu par le navigateur. Elle est modifiable dans n importe quel éditeur HTML (Dreamweaver par exemple). A mettre en ligne impérativement. 4 - Animation compressée : Indispensable. C est le document qui est lu sur la page HTML. Si ce document n est pas mis en ligne, la page HTML n affichera pas l animation. A mettre en ligne impérativement. Si on doit corriger l animation et la publier à nouveau, il n est pas nécessaire de retourner dans paramètres de publication. Les réglages sont enregistrés en même temps que le fichier Flash. On peut donc utiliser la commande Publier du menu Fichier. Attention, les anciens fichiers sont remplacés sans alerte. Page 32 Tél. : Fax

33 Table des matières Section I - Présentation de l espace de travail 1/ La scène Définition des outils / Le scénario a/ les calques b/ La timeline / Description des acteurs a/ La bibliothèque b/ Les symboles Définition Conversion / Création Modification Section 2 - Applications pratiques 1/ Les acteurs dans le scénario / Interpolations et déplacements / Interpolation de forme Les étapes de l interpolation de forme / Interpolation de forme sur le texte / Interpolation de mouvement Les étapes de l interpolation de mouvement / Le guide de mouvement Les étapes de création du guide de mouvement Tél. : Fax Page 33

34 3/ Les séquences / Les boutons Les étapes de création d un bouton Etapes de programmation du bouton / Les clips d animation Etapes de création d un clip d animation / Les sons Etapes d insertion de sons Section 3 - Exportation, publication et insertion dans dreamweaver 1/ Exportation de l animation Etapes pour l'exportation / Publication du site Etapes pour la publication a/ Formats b/ Flash c/ HTML d/ GIF Page 34 Tél. : Fax