Abrégé du logiciel Flash 5
54
INF-5066 INITIATION À L’ANIMATION SUR LE WEB Abrégé du logiciel Flash 5 Regroupement 9 CSDM Juin 2002 Manuel de l’élève
Transcript of Abrégé du logiciel Flash 5
INF-5066
INITIATION À L’ANIMATION SUR LE WEB
Abrégé du logiciel Flash 5
Regroupement 9
CSDM
Juin 2002
Manuel de l’élève
FLA
SH 5
Tab
le d
es
ma
tiè
re
s
page 2
Table des matières01 Introduction ............................................................................................................................................. 4
01.01 Les objectifs du cours............................................................................................................... 4La méthodologie et l’évaluation................................................................................................ 4
01.02 Aperçu du contenu ................................................................................................................... 5Bibliographie............................................................................................................................. 5
02 Qu’est-ce qu’une animation Flash? ........................................................................................................ 6
02.01 Citation de quelques exemples ................................................................................................ 602.02 Définition .................................................................................................................................. 7
03 La documentation de Flash .................................................................................................................... 8
03.01 Le document Utilisation de Flash ............................................................................................. 8Le menu de l’aide ..................................................................................................................... 9
03.02 L’aide en ligne sous le mode Sommaire................................................................................... 903.03 Le mode Sommaire à partir des fenêtres de Flash ................................................................ 1003.04 L’aide en ligne sous le mode Index .........................................................................................1103.05 L’aide en ligne sous le mode Recherche.................................................................................11
04 L’interface de Flash............................................................................................................................... 12
04.01 Exploration des composantes du logiciel 1 ............................................................................ 12Les fenêtres de l’interface Flash ............................................................................................ 12Les outils ................................................................................................................................ 12La scène et la zone de travail entourant la scène .................................................................. 12Le scénario ............................................................................................................................. 13Le contrôleur .......................................................................................................................... 13
04.02 Exploration des composantes du logiciel 2 ............................................................................ 14La bibliothèque ....................................................................................................................... 14L’explorateur d’animation ....................................................................................................... 14Les panneaux d’ajustements.................................................................................................. 15
05 La première animation : L’interpolation de mouvement ........................................................................ 16
05.01 Le nom d’Éva Laudée en mouvement.................................................................................... 1605.02 Les propriétés de l’animation ................................................................................................. 1705.03 La création d’un objet texte .................................................................................................... 1805.04 La conversion d’un objet en symbole ..................................................................................... 1905.05 L’insertion d’une image-clé ..................................................................................................... 2005.06 La création de l’interpolation de mouvement.......................................................................... 2105.07 Aperçu de l’animation dans l’environnement de création....................................................... 2205.08 Tester l’animation ................................................................................................................... 2305.09 L’effet de zoom avant ............................................................................................................. 2405.10 L’ajout d’une rotation .............................................................................................................. 2405.11 L’ajout d’une action sur une image......................................................................................... 2505.12 L’ajout d’un calque de guide pour créer une trajectoire.......................................................... 2605.13 La modification de la durée de l’interpolation ......................................................................... 2705.14 L’édition d’un symbole ............................................................................................................ 2805.15 La publication de l’animation .................................................................................................. 29
FLA
SH 5
Tab
le d
es
ma
tiè
re
s
page 3
05.16 L’intégration d’une animation dans une page HTML .............................................................. 2905.17 Le principe d’images par seconde.......................................................................................... 3005.18 L’image-clé et l’interpolation ................................................................................................... 31
06 La deuxième animation : L’effet générique ........................................................................................... 32
06.01 Les calques ............................................................................................................................ 3206.02 La préparation de la deuxième animation .............................................................................. 33
L’affichage et l’ajustement de la grille..................................................................................... 3306.03 L’insertion du texte dans l’animation ...................................................................................... 3406.04 Le positionnement des éléments sur la scène ....................................................................... 35
L’ajustement de la position initiale du texte ............................................................................ 35L’ajustement de la durée de l’animation ................................................................................. 35L’ajustement de la position finale du texte.............................................................................. 36La création de l’interpolation de mouvement.......................................................................... 36Le test de l’animation ............................................................................................................. 36La création d’un fond pour les boutons .................................................................................. 36L’ajustement du fond .............................................................................................................. 37Les symboles et les occurrences ........................................................................................... 38
06.05 La bibliothèque commune Boutons ........................................................................................ 3806.06 L’ajout et l’ajustement des boutons ........................................................................................ 38
Les boutons............................................................................................................................ 3906.07 L’ajout d’une action à un bouton............................................................................................. 4106.08 L’ajout de sons à un bouton ................................................................................................... 4206.09 L’ajout de sons à une animation............................................................................................. 4406.10 L’ajout de sons dans un calque de l’animation....................................................................... 4406.11 L’importation de sons dans Flash........................................................................................... 45
07 La troisième animation : L’effet polaroid ............................................................................................... 46
07.01 La création d’une animation à plusieurs scènes .................................................................... 4607.02 La préparation de la première scène...................................................................................... 4707.03 La duplication de la Scène 0 .................................................................................................. 4807.04 L’ajout d’un encadré dans la Scène 1 .................................................................................... 4907.05 L’accélération d’un mouvement .............................................................................................. 4907.06 La création d’un fondu d’entrée.............................................................................................. 5107.07 Le test de la scène ................................................................................................................. 5207.08 La création des autres scènes ............................................................................................... 5207.09 L’application des actions ........................................................................................................ 54
FLA
SH 5
Int
ro
du
ct
ion
page 4
01 Introduction
01.01 Les objectifs du cours
Ce cours vise à vous initier à la création d’animations sur Internet. Vous aurez donc à créer vous-même des animations contenant du texte, des images, plus souvent des dessins vectoriels que des photos matricielles (bitmap en anglais) et du son. Pour ce faire, vous utiliserez le logiciel le plus utilisé chez les professionnels : Flash, version 5, de Macromedia.
Le but du cours n’est pas de connaître à fond le logiciel, ce qui nécessiterait des centaines d’heures d’apprentissage et d’exercices, le but est de vous donner les rudiments de base de la création d’animations sur le Web et de vous rendre autonome dans l’utilisation du logiciel par le biais de son aide en ligne.
La méthodologie et l’évaluationLa méthodologie retenue pour ce cours est la même que celle utilisée pour le cours précédent (Introduction à la création de sites Web). Cette méthodologie est connue sous le nom de pédagogie par projet. Ce qui signifie que les apprentissages que vous aurez à faire dans Flash sont ceux qui sont reliés à votre projet de site animé. Il n’y a donc pas de séries d’exercices obligatoires et il n’y a pas d’examen.
Après une initiation à la création d’animation pour le Web, vous aurez à présenter par écrit un projet Flash à votre enseignant. Il est fortement recommandé d’utiliser le même projet que vous avez réalisé pour le cours de Dreamweaver, et de l’animer. Votre enseignant évaluera si vos idées d’animations sont trop ambitieuses (ou pas assez). Il peut aussi vous guider dans l’élaboration de votre projet, que ce soit au niveau de la pertinence de vos idées d’animations, du design ou de l’intégration des éléments sonores, et ce afin de vous éviter de vous lancer dans un projet qui se révélera trop complexe pour le cadre de ce cours qui ne dispose que de 50 heures (2 unités).
Vous aurez réussi le cours lorsque vous aurez réalisé et intégré vos animations dans votre site Web et que votre enseignant aura accepté votre version finale. Il pourra alors télécharger votre site sur le serveur Web de la CSDM, afin qu’il soit visible et audible de n’importe quel ordinateur branché sur Internet dont le navigateur sera doté du lecteur Flash.
FLA
SH 5
Int
ro
du
ct
ion
page 5
01.02 Aperçu du contenu
Bien que les éléments de contenu de ce cours sont liés à votre projet, il n’en demeure pas moins qu’il y a des éléments de base dans la conception d’animations Flash qui sont communs à tous les projets.
• Qu’est-ce qu’une animation Flash? Visionnement de quelques exemples;
• L’interface du logiciel Flash : Les fenêtres de travail, c’est-à-dire la scène, le scénario, le contrôleur, la bibliothèque, l’explorateur d’animation, les fenêtres d’outils et d’ajustements (panneaux), les menus déroulants et l’aide en ligne;
• Les objets, les symboles et les occurrences;
• Les calques;
• Leur ordre de priorité et leurs propriétés : Éditer une trajectoire non-linéaire à l’aide d’un calque guide, dévoiler certaines parties de l’image à l’aide d’un calque masque;
• L’interpolation de forme et de mouvement;
• Le premier exercice : Animer du texte, par exemple votre nom sur votre page d’accueil personnelle;
• Les boutons;
• Ajouter du son : Le son continu et le son d’événement en boucle, le son sur un calque, le son d’événement sur un bouton, importer des fichiers sonores;
• Conserver une animation en clip;
• Intégrer plusieurs clips dans une nouvelle animation;
• Sauvegarder une animation en cours de réalisation (fichiers FLA);
• Sauvegarder une animation terminée pour le Web (fichiers SWF);
• Intégrer une animation à un site Web via Dreamweaver.
BibliographieHARMSET, F et C. LINDEMANN. Flash™ 5, édition Micro Application, 2000. (Collection Guidexpress).
CURTIS, Hillman. Flash™ Web Design, édition New Riders, 2000.
CHUN, Russel. Macromedia Flash 5 advanced for Windows & Macintosh, édition Peachpit Press, 2001. (Collection Visual Quickpro Guide).
FLA
SH 5
Qu
’est
-ce
qu
’un
e a
nim
at
ion
Fla
sh?
page 6
02 Qu’est-ce qu’une animation Flash?
02.01 Citation de quelques exemples
Avant d’apprendre à faire une animation Flash ou même de définir ce que c’est, il est plus simple d’aller voir de visu quelques animations sur le net.
Pour se donner une idée des possibilités de Flash, allez voir ces quelques sites réalisés par des professionnels. N’oubliez d’activer le son de votre poste et de mettre vos écouteurs.
Ce site est un bel exemple de travail approfondi des possibilités de Flash, tant au niveau de l’image que du son. Un énorme travail de conception réalisé par des programmeurs :
www.aleart.net
www.derbauer.de
Allez voir maintenant ce site qui offre une jolie collection d’animations :
www.h69.net
L’interface du site de h69.net est en Flash, ainsi que toutes les animations qu’on y trouve. Cependant on a recours au JavaScript pour que chacune de ces animations puisse apparaître dans sa propre fenêtre. À la limite, on pourrait voir plusieurs animations à la fois.
Remarquez que, contrairement à Derbauer, h69.net met l’accent sur l’interactivité dans ses animations.
Voici un autre site bien fait (et en français) de l’auteur-interprète Henri Salvador. Un site sur sa vie, sa carrière, sa discographie etc. Remarquez l’excellente intégration de sa musique :
www.henrisalvador.com
Remarquez aussi l’incroyable décision d’offrir des extraits de chansons en format Realplayer, alors que Flash aurait pu tout intégrer (mais c’est beaucoup de travail et il faut croire qu’avant de publier le site en Flash, il devait y avoir un site HTML référant à une banque d’extraits de chansons en format Realplayer qu’ils ont décidé de récupérer dans le nouveau site pour éviter de tout refaire).
Du côté commercial et plus près de nous (à Montréal), un exemple simple d’accueil à un site par une animation flash :
www.discartbyrsb.com
FLA
SH 5
Qu
’est
-ce
qu
’un
e a
nim
at
ion
Fla
sh?
page 7
02.02 Définition
Les sites Web les plus vivants incluent des animations. La plupart de ces animations sont réalisées avec Macromedia Flash. Ce logiciel est devenu l’outil de création Web par excellence. Pourquoi? Parce que Flash travaille avec des fichiers très légers de type vectoriel qu’il manipule aisément pour créer des zooms, des déplacements, des métamorphoses, des fondues au noir et vice et versa etc. La légèreté des fichiers Flash garanti un temps de téléchargement relativement court pour le visiteur, particulièrement s’il navigue sur Internet avec un modem téléphonique.
Flash intègre aussi à ses animations des fichiers matriciels (bitmap en anglais), des photographies numérisées par exemple, mais on déconseille d’essayer d’inclure de la vidéo, à moins d’être un expert. Et Flash a ceci de particulier, c’est d’ailleurs une des raisons qu’il le rend si puissant, c’est qu’il «vectorialise» les fichiers matriciels pour pouvoir les animer facilement. Sachez tout de suite qu’il y a toujours une perte de qualité de l’image matricielle (lourde) lorsque elle est convertie en image vectorielle (légère).
Finalement, Flash crée des animations interactives, c’est-à-dire des animations sur lesquelles le visiteur peut intervenir pour en modifier les paramètres grâce à l’utilisation des boutons.
La force actuelle de Flash est aussi due au fait que les récentes versions des navigateurs Netscape et Explorer sont dotées d’un lecteur Flash. En effet, la lecture d’une animation Flash nécessite l’utilisation d’un lecteur (player en anglais). Les animations publiées sur Internet ou localement sont des fichiers SWF lisibles par différents lecteurs dont Flash Player, application autonome (standalone application en anglais), le lecteur QuickTime Player, à partir de la version 4, et bien sûr, comme stipulé en début de paragraphe, le plugiciel (plug-in en anglais) Shockwave Flash incorporé aux navigateurs Netscape et Explorer. Lorsqu’on désire une mise à jour du lecteur, on se rend sur le site de Macromedia (www.macromedia.com/downloads) pour télécharger la plus récente version du lecteur. Le lecteur Flash est gratuit.
Les animations SWF sont lisibles autant sur plate-forme Macintosh que PC. C’est le lecteur qui est différent d’une plate-forme à l’autre.
Remarquez que ces sites sont entièrement conçus en Flash. Les concepteurs n’ont pas eu besoin de recourir à un éditeur HTML (comme DreamWeaver), tout s’est fait avec Flash 5. Cependant, ils ont eu besoin de programmer leur site avec le langage ActionScript inclus dans Flash. Dans le cadre de ce cours, nous ne ferons qu’effleurer le langage ActionScript en utilisant quelques scripts de programmation déjà écrits. La programmation de codes est optionnelle.
Ce dernier exemple représente bien le type d’exercices prévus dans le cadre de notre cours mais rien ne vous empêche d’aller plus loin dans votre projet.
FLA
SH 5
La d
oc
um
en
tat
ion
de
Fla
sh
page 8
03 La documentation de Flash
03.01 Le document Utilisation de Flash
Le document Utilisation de Flash est l’ouvrage de référence édité par le concepteur du logiciel, c’est-à-dire Macromedia. Il constitue une ressource inépuisable d’informations et de conseils. Il pourra répondre à pratiquement toutes vos questions parce qu’il couvre tous les concepts de production de site Web par ce logiciel. Ce document est écrit pour la version Macintosh et pour la version Windows (PC), mais les images de captures d’écran ont été prises sur la version PC du logiciel. Les versions Mac et PC sont pratiquement identiques. Ils diffèrent aux niveaux de l’esthétique et de quelques raccourcis clavier. Votre enseignant dispose de cet ouvrage et il peut le mettre à votre disposition dans le labo pour consultation sur place. Il s’agit d’une brique de 402 pages, probablement imprimée en noir sur blanc, très lourde, difficile à consulter. C’est en quelque sorte le dictionnaire encyclopédique de Flash. Généralement, on le consulte seulement et on ne le lit pas de la page 1 à la page 402.
Heureusement, Macromedia a créé une version HTML de ce document et l’a rendu accessible de l’intérieur même de Flash. Il s’agit de l’aide en ligne du logiciel et conserve le même titre : Utilisation de Flash. La version HTML (en ligne) et la version imprimée offrent le même contenu, mais il est préférable d’utiliser l’aide en ligne afin de pouvoir faire des recherches et bénéficier de l’hypertexte. Étant de format HTML, ce fichier d’aide sera donc lu par un navigateur Web, comme Netscape ou Explorer.
Il est important de bien comprendre le fonctionnement de l’aide en ligne, parce que nous allons nous en servir constamment.
L’aide en ligne de Flash est construit de la même manière que l’aide en ligne de Dreamweaver, à la différence près qu’il n’y a pas à priori de raccourci clavier dans Flash pour démarrer l’aide (dans Dreamweaver, la touche F1 démarre automatiquement l’aide). On peut cependant créer nous-mêmes des raccourcis clavier si on le désire.
Ouvrons donc cet aide en ligne directement à partir du logiciel Flash.
1. Si ce n’est déjà fait, démarrez Flash. L’application devrait normalement se trouver ici :
Disque dur \ Applications \ Macromedia Flash 5 \ Flash 5
2. Double-cliquez sur l’application. C’est parti!
3. Dans Flash, cliquez sur le menu Aide dans la dernière barre de menu à droite;
3. Ensuite, sélectionnez le document Utilisation de Flash dans le menu déroulant. Ceci aura pour effet de démarrer l’application Netscape (ou Explorer), qui affichera la page d’accueil du document d’aide en ligne.
FLA
SH 5
La d
oc
um
en
tat
ion
de
Fla
sh
page 9
Le menu de l’aideLe menu de l’aide est notre principal allié. Il offre, en haut à gauche, trois modes de navigation dans le document Utilisation de Flash :
1. Le sommaire (particulièrement adapté aux débutants);
2. L’index (particulièrement utile aux intermédiaires);
3. La recherche (particulièrement prisé par les initiés).
03.02 L’aide en ligne sous le mode Sommaire
Ce mode nous offre le contenu de l’aide par section. Lorsque l’on clique sur le bouton Sommaire, l’aide affiche, juste en dessous dans le cadre de gauche, la liste des sections du document Utilisation de Flash. On clique sur la section que l’on désire et l’aide affiche juste en dessous de ce titre de section, légèrement en retrait, la liste des rubriques appartenant à cette section, et ce toujours dans le cadre de gauche. C’est lorsque que l’on clique sur la rubrique désirée que l’aide affiche les explications dans le cadre de droite de la page. L’aide est construit de manière à n’afficher qu’une rubrique à la fois et jamais une section au complet. À chaque rubrique correspond une seule page HTML (et non pas une page papier). Si cette page HTML est trop longue pour apparaître au complet à l’écran, une barre de défilement permet de se déplacer verticalement sur cette page. Les flèches (ßà) permettent de passer respectivement à la rubrique précédente ou à la rubrique suivante dans l’ordre normal du document original. Parfois, à l’intérieur d’une rubrique, il y a des liens hypertextes conduisant directement à d’autres rubriques.
Pour bien comprendre le fonctionnement de l’aide, rien ne vaut un bon exemple : Disons que nous voulons savoir ce qu’est un symbole dans Flash. Cette notion est un concept de base de Flash. Sans apprendre tout de suite cette notion, voyons si nous pouvons nous rendre à son explication dans l’aide en ligne.
Effectuez les opérations suivantes :
1. Cliquez sur Sommaire et l’aide vous affiche ses sections. Vous pouvez voir qu’il y a une section intitulée Principes de base de Flash.
2. Cliquez sur le titre de cette section et l’aide affiche à la suite de ce titre, légèrement en retrait, la liste des rubriques afférentes à cette section. Vous verrez qu’il y a une rubrique intitulée Symboles et occurrences.
3. Cliquez sur cette rubrique pour en afficher son contenu.
Il n’est pas nécessaire pour l’instant de lire cette rubrique puisque le but du présent exercice est seulement de bien naviguer dans l’aide.
Remarquez que lorsque vous cliquez de nouveau sur le titre de la section Principes de base de Flash, l’aide n’affiche plus ses rubriques. Remarquez aussi que si vous cliquez sur
FLA
SH 5
La d
oc
um
en
tat
ion
de
Fla
sh
page 10
plusieurs titres de section, l’aide n’affichera que la liste des rubriques de la dernière section cliquée. De la même manière, l’aide affiche dans le cadre de droite la dernière rubrique cliquée et continue de l’afficher tant qu’un nouveau titre de rubrique ne sera pas cliqué dans le cadre de gauche. Et ce, même si vous cliquez sur de nouveaux titres de section.
03.03 Le mode Sommaire à partir des fenêtres de Flash
L’icône (?) se trouve dans le coin supérieur droit de plusieurs fenêtres de Flash. En cliquant sur cette icône sur une fenêtre donnée, l’aide en ligne Utilisation de Flash démarre (s’il ne l’était pas déjà) et affiche automatiquement la rubrique concernant le titre de la fenêtre. De plus, dans le cadre de gauche de l’aide, on peut voir à quelle section appartient cette rubrique, puisque tout se passe comme si l’on avait cliqué sur la section et la rubrique pertinente, sauf que tout s’est fait automatiquement.
Par exemple, retournez à Flash, si vous êtes actuellement dans l’aide. Rappelons que l’on passe d’une application à une autre dans le coin supérieur droit de l’écran. Remarquez la petite fenêtre en haut à droite. Elle a pour titre Info. Si ce n’est pas le cas, cliquez sur le premier onglet de gauche dans cette petite fenêtre. Cliquez sur l’icône (?) se trouvant dans le coin supérieur droit. Automatiquement l’aide en ligne vous affichera la rubrique Panneau Calques en plus de vous préciser que cette rubrique appartient à la section Utilisation de calques dynamiques.
Notez que cette petite fenêtre contient quatre panneaux : Info, Transformer, Trait et Remplir. Le panneau Info est en avant-plan et cache les trois autres, mais ces derniers demeurent accessibles par des onglets. Cliquez sur l’onglet Transformer, nous aurons bien sûr le panneau Transformer en avant-plan, cachant à son tour les trois autres, mais remarquez que le titre de la fenêtre n’est plus Info et qu’il est devenu Transformer, de sorte que si vous cliquez de nouveau sur le même icône (?), l’aide vous affichera alors la rubrique À propos du panneau Transformer.
En bref, les panneaux dans Flash apparaissent souvent en groupe de deux, trois ou même quatre à l’intérieur d’une même fenêtre. Le titre de la fenêtre change en fonction du panneau qu’on met en avant-plan lorsqu’on clique sur l’onglet correspondant. Et cliquer l’icône (?) conduit toujours l’aide en ligne à afficher la rubrique concernant le titre affiché dans l’entête de la fenêtre.
Par ailleurs, certains éléments des menus déroulant font apparaître une fenêtre. Là aussi, il y a un accès à l’aide sous le mode Sommaire. Par exemple, dans Flash, cliquez sur le menu Modification > Calque. La fenêtre Propriétés du calque s’ouvrira. Sur le côté droit de la fenêtre, il y a un bouton aide. Cliquez sur ce bouton et l’aide vous conduira directement à la rubrique Modification des calques.
Tout au long de cet abrégé, c’est-à-dire dans les pages qui suivent, on aura souvent recours à l’aide sous ce mode, appelé Sommaire, en utilisant la convention suivante :
Sommaire > Section > Rubrique (page).
Pour revenir à notre exemple, la référence apparaîtrait comme suit :
Vois la section Sommaire > Principes de base de Flash > Symboles et occurrences.
FLA
SH 5
La d
oc
um
en
tat
ion
de
Fla
sh
page 11
03.04 L’aide en ligne sous le mode Index
Ce mode correspond à l’index de tout bon ouvrage de référence. Dans un livre, il se situe bien sûr à la fin. Il offre donc des mots-clé, classés par ordre alphabétique. Ce mode permet de faire des recherches structurées autour de ces mots clé. C’est un mode très pratique pour chercher rapidement de l’information à propos d’un élément ou d’un aspect du logiciel. Il suffit de cliquer une lettre, et l’aide affiche tous les mots-clé commençant par cette lettre, et lorsque pertinent, il affiche aussi, légèrement en retrait sous un mot-clé, la liste des éléments qui réfère à ce mot-clé. Tous les mots-clé et leurs éléments associés sont cliquables et renvoient à une rubrique.
Reprenons l’exemple ci-haut, où nous voulions avoir des explications sur la notion de symboles :
1. Cliquez sur Index et l’aide affiche les lettres de l’alphabet.
2. Cliquez sur la lettre S. L’aide affiche tous les mots-clé commençant par «S». Descendez la barre de défilement pour repérer en bas le mot-clé Symboles. Sous ce mot-clé, légèrement en retrait, il y a tous les éléments se rattachant à ce concept.
3. Cliquez sur À propos de et l’aide affiche dans le cadre de droite la même rubrique que plus haut, intitulée Symboles et occurrences.
Les flèches (ßà) conservent leur fonction de passer à la rubrique précédente ou suivante, toujours dans l’ordre du document original.
Précisons que Index est un mode de recherche s’adressant plus particulièrement aux utilisateurs intermédiaires du logiciel parce qu’il suppose une certaine connaissance des concepts inhérents au logiciel.
03.05 L’aide en ligne sous le mode Recherche
Ici l’aide nous offre un moteur de recherche dans le document Utilisation de Flash. On y inscrit les mots importants (en les séparant par le signe «+») et on clique sur le bouton Afficher les rubriques. L’aide affiche alors dans le cadre de gauche tous les titres des rubriques qui contiennent ces mots. On sélectionne alors la rubrique que l’on croit pertinente à notre recherche et on clique sur le bouton Afficher pour qu’elle apparaisse dans le cadre de droite.
La fonction Recherche est un mode avancé de consultation de l’aide. Un débutant s’y perd facilement. Il est utile aux initiés, habitués de naviguer dans l’aide, pour trouver une information précise et déjà bien cernée.
FLA
SH 5
L’in
te
rfa
ce
de
Fla
sh
page 12
04 L’interface de FlashPour créer des animations Flash, on n’utilise pas un lecteur Flash (comme Flash Player qui ne peut que lire des animations), on utilise le logiciel auteur Flash et rien d’autre (et ce logiciel n’est pas gratuit). Macromedia livre une version Mac et une version PC de son logiciel. Les différences entre la version Mac et la version PC et Windows sont mineures.
Si ce n’est déjà fait, ouvrez l’application Flash 5, qui normalement devrait se trouver dans le dossier Macromedia Flash, lui-même étant dans le dossier Applications sur le disque dur de votre appareil, ou selon la convention :
Disque dur \ Applications \ Macromedia Flash 5 \ Flash 5
Flash s’ouvre avec ses multiples fenêtres. Pour faire suite au chapitre précédent concernant l’aide en ligne. Sachez tout de suite que Flash utilise les petites bulles d’aide. Pointez la souris sur un élément de l’interface de Flash, disons sur un quelconque outil de la barre d’outils à gauche de l’écran, pointez sans cliquer et sans bouger pendant une seconde, Flash vous affiche alors la définition de cet élément.
04.01 Exploration des composantes du logiciel 1
Les fenêtres de l’interface FlashIl y a beaucoup de fenêtres dans Flash. Il est pratique de pouvoir afficher celle que l’on se sert souvent et fermer les autres. Le menu Fenêtre sert à cela. Si vous cherchez une fenêtre que vous ne voyez pas à l’écran, activez-la par ce menu.
Les outilsCe type de fenêtre se trouve dans plusieurs logiciels de traitement de l’image. Elle contient les différents outils de création et de transformation d’images, de texte ou en bref, de tout élément graphique. D’autres développeur de logiciels nomme cette fenêtre la palette d’outils alors que Macromedia l’appelle la barre d’outils.
La scène et la zone de travail entourant la scèneLa surface de travail principale de Flash est la scène. Elle comprend la scène (par défaut le rectangle blanc) et ce qui l’entoure (hors scène en gris); c’est le lieu de l’action que vous animerez, c’est là que vous faites glisser vos images, vos textes, vos clips déjà préparés etc. et c’est directement sur cette surface que vous les positionnez (position de départ, position d’arrivée et même trajectoire).
Remarquez que seuls les éléments sur la scène apparaîtront dans votre animation terminée. Travailler hors scène est utile lorsqu’on veut par exemple, qu’une image ou
Voir la section Principes de base de Flash > Utilisation de la boîte à outils.
FLA
SH 5
L’in
te
rfa
ce
de
Fla
sh
page 13
un texte traverse la scène complètement en apparaissant d’un côté et disparaissant de l’autre. Son point de départ et son point d’arrivée sont donc à l’extérieur de la scène.
Le scénarioSitué juste au-dessus de la scène, le scénario est liée à votre scène. C’est ici que vous définissez les séquences de votre animation, c’est-à-dire l’action qui se passe sur la scène dans le temps, image par image (frame by frame en anglais).
C’est là également que vous précisez la hiérarchie des différents éléments, leurs propriétés, l’intégration du son, la vitesse de votre animation etc. Horizontalement, la série de nombres indique les numéros; c’est la ligne de temps (time line en anglais). Le petit rectangle rouge doté d’une ligne verticale est la tête de lecture. Cette tête se déplace lorsque l’on fait jouer l’animation, nous indiquant ainsi à quel moment de l’animation nous nous trouvons. On peut aussi la déplacer avec la souris.
Le contrôleurPetite fenêtre vous permettant de commander la lecture de votre animation. Un peu à la manière d’un magnétoscope (ou encore d’une télécommande). Vous avez les commandes suivantes : arrêt, retour au début, lecture arrière image par image (au clic) ou accélérée (bouton de la souris enfoncée), lecture normale, lecture avant image par image (au clic) ou accélérée (bouton de la souris enfoncée), et aller à la fin.
Sachez tout de suite que ce contrôleur ne peut pas toujours vous donner un aperçu de votre animation en construction. Par contre, la commande Tester l’animation, disponible à partir du menu Contrôle, ouvre une nouvelle fenêtre et affiche votre animation telle qu’elle serait lue par un lecteur Flash.
Voir la section Principes de base de Flash > Environnement de travail de Flash > La scène et le scénario.
Voir la section Principes de base de Flash > Aperçu et test des animations > Aperçu des animations dans l’environ-nement de création.
FLA
SH 5
L’in
te
rfa
ce
de
Fla
sh
page 14
04.02 Exploration des composantes du logiciel 2
La bibliothèqueLa bibliothèque accumule les symboles que vous y mettez, de sorte que vous pouvez vous servir des mêmes éléments à plusieurs reprises dans votre animation.
L’explorateur d’animationCette fenêtre contient deux onglets : Explorateur d’animation et Actions sur les images/objets. Le titre de la fenêtre est celui de l’onglet mis en avant-plan. Cliquez sur l’un et l’autre des onglets et vous verrez le titre de la fenêtre devenir celui de l’onglet cliqué. L’explorateur d’animation vous offre une vue d’ensemble de votre animation et de sa structure tandis que les actions sur les images ou sur les objets sont plutôt reliées aux actions (écrites en Action Script) qu’on associe aux images ou aux objets. Nous verrons plus tard l’utilité de cette fenêtre.
Voir la section Principes de base de Flash > Utilisation de la bibliothèque.
FLA
SH 5
L’in
te
rfa
ce
de
Fla
sh
page 15
Les panneaux d’ajustementsLa série de petites fenêtres à droite de l’écran contiennent chacune plusieurs panneaux vous permettant de visualiser, organiser ou modifier les éléments de l’animation. Les panneaux sont activés par des onglets. Comme stipulé au paragraphe précédent, le titre de chacune de ces fenêtres varie en fonction de l’onglet mis en avant-plan.
Il y a au total dix-sept panneaux dans Flash et ils ne sont pas tous nécessairement affichés. Cliquez sur le menu Fenêtres et sélectionnez Panneaux en maintenant le bouton de la souris enfoncé. Vous verrez alors la liste des panneaux de Flash; ceux qui sont associés à un crochet «√» sont affichés en avant-plan dans une fenêtre. C’est également par ce chemin qu’on affiche un panneau dont la fenêtre ne serait pas visible à l’écran. Si la fenêtre est visible, Flash met le panneau désiré en avant-plan. Ceci dit, ces panneaux servent à préciser une couleur, paramétrer des caractères (sa police, son style, sa taille), aligner des objets sur la scène et hors scène, etc.
Vous pouvez obtenir plus d’information sur chacun de ces panneaux en cliquant sur l’icône d’aide (?) de la fenêtre correspondante.
Arrêtons ici la présentation du logiciel Flash et passons à l’action. L’apprentissage des concepts se fera au fur et à mesure par des exercices de composition d’animations.
Voir la section Principes de base de Flash > Environnement de travail de Flash > Panneaux.
Voir également la section Principes de base de Flash > Utilisation des panneaux.
FLA
SH 5
La p
re
miè
re
an
ima
tio
n
page 16
05 La première animation : L’interpolation de mouvement
05.01 Le nom d’Éva Laudée en mouvement
Votre premier exercice d’animation est simple. Il s’agit d’animer votre propre nom sur votre page d’accueil de votre site personnel que vous avez probablement réalisé dans le cours Initiation à la création de sites Web. En utilisant un navigateur (Netscape ou Explorer), voyez l’exemple du site de Éva Laudée (version Flash) qui se trouve dans le dossier de l’application Flash. Vous n’avez qu’à double-cliquer sur le fichier index.html.
Disque dur \ Applications \ Flash 5 \ Eva.Laudee.Flash \ index.html
Si vous ne trouvez pas le site d’Éva Laudée, version Flash, demandez à votre formateur où il se trouve.
Observez l’animation du texte Éva Laudée. L’image qui est composée des mots Eva et Laudée arrive de la droite. L’image fait un tour sur lui-même, tout en s’agrandissant, et s’arrête enfin à l’horizontale sur la gauche. L’animation dure 5 secondes.
Revenons à notre exemple d’animation du texte Éva Laudée. Avant d’être intégrée à une page HTML, cette animation avait son existence propre, sous la forme d’un fichier SWF, que l’on peut visionner avec un lecteur Flash (Flash Reader ou QuickTime Player et non pas le logiciel Flash lui-même). Allez visionner de nouveau cet exemple mais cette fois-ci en-dehors d’une page HTML en double-cliquant sur le fichier EvaLaudee.swf qui se trouve ici :
Disque dur \ Applications \ Flash 5 \ Eva.Laudee.Flash \ Animations \ EvaLaudee.swf
Ainsi lancée, l’animation s’ouvre avec Flash Player. Cliquez sur le menu Contrôle pour voir les raccourcis clavier des commandes de lecture.
En d’autres termes, appuyez sur les touches z R pour revenir au début de l’animation.
Ensuite, appuyez sur les touches z . (Commande et point) à plusieurs reprises pour avancer d’une image à la fois. Ainsi, vous pouvez constater qu’il y a 60 images dans cette animation de 5 secondes (toujours à 12 images/seconde) et qu’il n’y a qu’une seule image : le texte Éva Laudée.
Maintenant, à vous de jouer. Faites cette animation vous-même, avec votre propre nom.
Pour en savoir plus sur l’animation dans Flash, voir la section Principe de base de Flash > Effet animé dans Flash.
FLA
SH 5
La p
re
miè
re
an
ima
tio
n
page 17
05.02 Les propriétés de l’animation
1. Démarrez l’application Flash (si ce n’est déjà fait).
2. Définissez les paramètres de votre animation en cliquant sur le menu Modification > Animation (touches z M). La fenêtre Propriétés de l’animation apparaît. Remarquez que c’est ici que l’on pourrait modifier la cadence de l’animation.
3. Il faut ajuster les dimensions de la scène. Disons 400 pixels de largeur et 200 pixels de hauteur.
4. Plus bas, attribuez comme couleur d’arrière-plan de la scène la même couleur de fond que vous avez choisie pour votre page personnelle, afin que l’animation se confonde plus tard à votre page Web. Dans notre cas, nous utiliserons la couleur d’arrière plan de la page d’accueil du site d’Éva Laudée, c’est-à-dire la couleur numéro FFFFCC.
5. Cliquez sur le bouton OK pour fermer la fenêtre Propriétés de l’animation.
6. Faites immédiatement une sauvegarde de votre animation dans votre dossier personnel sur le serveur du centre. Nommez votre animation PrenomNom.fla.
FLA
SH 5
La p
re
miè
re
an
ima
tio
n
page 18
05.03 La création d’un objet texte
1. Dans la barre d’outils, activez l’outil Texte. Cliquez n’importe où sur la scène (scène ou hors scène) et saisissez votre nom.
2. Sélectionnez toutes les lettres de votre nom, afin de leur attribuer une police de caractère, une taille et une couleur.
3. Le panneau Caractère est sur votre droite. Si vous ne le voyez pas, cliquez sur le menu Fenêtres > Panneaux > Caractère.
4. Choisissez pour votre nom la même police de caractères que celle que vous avez utilisée sur votre page d’accueil, ou si vous le désirez, choisissez-en une autre.
5. Déterminez la taille de vos caractères (environ 30 points) et un espacement les séparant (0 signifiant normal).
6. Finalement, attribuez à ces lettres une couleur, de préférence la même couleur que celle que vous avez choisie pour la typographie de votre page d’accueil. Sortez du mode d’édition de texte en cliquant sur l’outil Flèche.
Regardez maintenant votre fenêtre Scénario, depuis la création de votre objet texte. Flash l’a automatiquement placé dans l’image 1 de votre animation.
Remarquez que Flash insère automatiquement un calque lorsqu’on crée une nouvelle animation. Par défaut, il se nomme Calque 1. Nous reviendrons plus tard sur les calques. Entre-temps, enregistrez votre document (touches z S).
FLA
SH 5
La p
re
miè
re
an
ima
tio
n
page 19
05.04 La conversion d’un objet en symbole
Vous venez de créer votre premier objet texte. Afin que Flash puisse manipuler cet objet aisément, transformez-le en symbole. Flash «vectorialise» alors votre objet et l’enregistre dans la bibliothèque de votre animation.
1. Pour ce faire, sélectionnez votre objet texte et cliquez sur le menu Insertion > Convertir en symbole. La fenêtre Propriétés du symbole apparaît. Donnez un nom à ce symbole (par exemple : MonNom.gra) et cliquez sur le bouton Graphique, puis fermez la fenêtre en cliquant sur le bouton OK ou en appuyant sur la touche Retour.
2. Assurez-vous de sélectionner votre symbole MonNom sur la scène à l’aide de l’outil Flèche, puis glissez-le en dehors de la scène à droite, de manière à ce que la première lettre de votre prénom soit juste à droite de la scène. C’est la position de départ de l’animation de votre nom.
FLA
SH 5
La p
re
miè
re
an
ima
tio
n
page 20
05.05 L’insertion d’une image-clé
1. Puisque nous désirons créer une animation de cinq secondes, sélectionnez dans le scénario l’image 60 du Calque 1. Cette image est vide pour l’instant. Cliquez sur le menu Insertion > Image-clé. Flash insère une copie de votre symbole MonNom dans l’image 60. L’objet que vous voyez sur la scène n’est plus celui de l’image 1, mais une copie.
2. Assurez-vous que l’image 60 soit toujours sélectionnée dans le scénario. Saisissez votre nom sur la scène et glissez-le vers la gauche, de manière à ce que votre nom entier soit sur la scène mais à l’extrême gauche de celle-ci. C’est la position finale de l’animation de votre nom.
3. Cliquez sur l’image 1 du scénario. Vous devriez voir votre nom à droite et à l’extérieur de la scène.
4. Cliquez sur l’image 60 du scénario. Vous devriez voir votre nom à gauche mais à l’intérieur de la scène.
FLA
SH 5
La p
re
miè
re
an
ima
tio
n
page 21
05.06 La création de l’interpolation de mouvement
Maintenant il faut créer les images 2 à 59 pour générer le mouvement de l’objet texte de la droite vers la gauche.
1. Dans le scénario cliquez sur la zone gris clair dans le Calque 1, afin que toutes les images soient sélectionnées. Cela aura pour effet de noircir toute la bande grise.
2. Cliquez sur le menu Insertion > Créer une interpolation de mouvement.
Voilà! À la lecture de l’animation, les images 2 à 59 seront calculées automatiquement par Flash et le mouvement sera généré.
FLA
SH 5
La p
re
miè
re
an
ima
tio
n
page 22
05.07 Aperçu de l’animation dans l’environnement de création
Pour obtenir un aperçu de l’animation dans l’environnement de création, il faut effectuer les opérations suivantes :
1. Cliquez sur le panneau Contrôleur. Si vous ne la voyez pas, cliquez sur le menu Fenêtre > Barre d’outils > Contrôleur.
2. Cliquez sur le bouton Rembobiner (|<<) pour amener l’animation au début (image 1). Cliquez sur le bouton Lire (>) pour voir votre animation de 5 secondes sur la scène.
3. Cliquez de nouveau sur le bouton Rembobiner (|<<) pour ramener l’animation au début et cliquez sur le bouton En avant (>>) plusieurs fois pour voir le mouvement de chacune des 60 images, une à la fois. Vous pouvez cliquer sur le bouton En arrière (<<) pour revenir en arrière, une image à la fois.
Sachez cependant que la l’affichage de l’aperçu de la scène dans l’environnement de création pourrait ne pas donner exactement le même résultat de l’animation lorsqu’elle sera publiée en format de fichier Flash Player (SWF). D’ailleurs la zone grise autour de la scène ne sera pas visible.
Pour avoir un aperçu de son animation, il faut la tester en format de fichier Flash Player (SWF) et non en format Flash (FLA).
FLA
SH 5
La p
re
miè
re
an
ima
tio
n
page 23
05.08 Tester l’animation
Pour tester l’effet animé, on doit générer un fichier Flash Player (SWF). Pour ce faire ont doit effectuer l’opération suivante :
Cliquez sur le menu Contrôle > Tester l’animation (touches z √). Une fenêtre s’ouvre et démarre votre animation. Le menu a changé; votre animation n’est plus dans l’environnement de création, mais plutôt dans l’environnement de Flash Player.
Par défaut, Le lecteur Flash affiche au-dessus de votre animation le testeur de bande passante. Désactivez-le en cliquant sur le menu Affichage > Testeur de bande passante (touches z B). Ainsi vous ne voyez que l’animation telle que vous la verriez si elle était terminée. Remarquez que le titre de cette fenêtre est le même que celui de votre animation, mais avec le suffixe SWF.
Par défaut également, votre animation joue en boucle, parce que Flash considère toute animation en boucle. On verra plus loin comment arrêter une animation.
Pour revenir dans l’environnement de création, à votre fichier de format Flash (FLA), vous n’avez qu’à fermer la fenêtre qui contient l’animation Flash Player (SWF).
FLA
SH 5
La p
re
miè
re
an
ima
tio
n
page 24
05.09 L’effet de zoom avant
Pour ajouter un effet de zoom avant du début vers la fin de l’animation, vous n’avez qu’à réduire votre objet texte de l’image 1.
Voici la procédure :
1. Sélectionnez l’image 1 du Calque 1 et cliquez sur le menu Modification > Transformer > Redimensionner. Votre texte initial est maintenant entouré de huit poignées.
2. Saisissez la poignée située en bas à droite et ramenez-la vers le centre du texte. Cette manoeuvre réduit votre objet texte.
Voilà. Testez de nouveau votre animation en appuyant sur le bouton Lire du contrôleur.
05.10 L’ajout d’une rotation
Pour faire pivoter votre objet texte (c’est facultatif), vous devez effectuer les opérations suivantes :
1. Sélectionnez votre interpolation de mouvement en cliquant sur n’importe quelle image (entre 1 et 59) et amenez en avant-plan le panneau Image. Si vous ne le voyez pas, cliquez sur le menu Fenêtres > Panneaux > Image (touches z F).
2. Dans ce panneau, cliquez sur le menu Interpolation et sélectionnez l’option Mouvement. Dans le menu Rotation, sélectionnez l’option Vers la gauche et le inscrivez 1 dans le champ fois. Appuyez sur la touche Retour.
3. Testez encore votre animation en cliquant sur le menu Contrôle > Tester l’animation (touches z √).
FLA
SH 5
La p
re
miè
re
an
ima
tio
n
page 25
05.11 L’ajout d’une action sur une image
Mais comment arrêter l’animation qui, par défaut, est lue en boucle? Il suffit d’attribuer une action, l’action Stop dans ce cas-ci, à la fin de votre séquence.
1. Sélectionnez d’abord la dernière image (l’image 60) de votre Calque 1 dans le scénario. Puis cliquez sur le menu Fenêtres > Actions (touches ALT z A). La fenêtre Actions d’image apparaît.
2. Sur la gauche, déployez la série des actions de base en cliquant sur cette catégorie. Pointez la souris sur l’action Stop sans cliquer et sans bouger votre pointeur pendant une seconde. Une info-bulle apparaît et indique que l’action à pour fonction d’arrêter la lecture de l’animation.
3. Double-cliquez sur l’action Stop. Cela aura pour effet d’appliquer cette action sur l’image sélectionnée dans le scénario. Dans votre cas, il s’agit de l’image 60. Une petite lettre «a» apparaîtra sur l’image 60, indiquant qu’elle contient maintenant une action. Vérifiez si votre animation s’arrête en effectuant un test de l’animation (touches z √).
FLA
SH 5
La p
re
miè
re
an
ima
tio
n
page 26
05.12 L’ajout d’un calque de guide pour créer une trajectoire
Votre première animation pourrait se terminer ici, mais il serait pertinent de savoir comment modifier le mouvement.
Éliminez la rotation de l’objet texte en effectuant les opérations suivantes :
1. Cliquez sur n’importe quelle image du Calque 1.
2. Dans le panneau Image, cliquez sur l’onglet Image et inscrivez 0 dans le champ fois (nombre de rotations) et appuyez sur la touche Retour.
Votre mouvement entre la position de l’image 1 et celle de l’image 60 est redevenue linéaire, c’est-à-dire en ligne droite.
Grâce au calque de guide, vous pouvez dessiner la trajectoire de votre mouvement.
1. Cliquez sur le menu Insertion > Guide de mouvement, ou cliquez simplement sur le petit icône bleu sous le Calque 1. Vous venez de créer dans le scénario un calque de guide au-dessus du Calque 1 qui servira de guide pour le mouvement.
2. Positionnez la tête de lecture sur la première image, et assurez-vous que le calque de guide est sélectionné. Il devrait être en couleur inversée. S’il ne l’est pas, cliquez dessus.
3. Dans le panneau Outils, cliquez sur l’outil Crayon, et dessinez la trajectoire désirée pour votre mouvement. Par exemple, dessinez une vague.
4. Dans le Calque 1, sélectionnez l’objet texte de l’image 1, et placez-le au début de la trajectoire. Ensuite, cliquez sur la dernière image (l’image-clé) du Calque 1 et positionnez votre objet texte exactement à la fin de la trajectoire.
FLA
SH 5
La p
re
miè
re
an
ima
tio
n
page 27
5. Faites jouer votre animation avec le contrôleur, afin de vérifier si votre objet texte suit la trajectoire du calque de guide. Lorsque vous testez votre animation en appuyant sur les touches z √, le tracé de la trajectoire n’apparaît plus. En effet le tracé de la trajectoire n’est qu’un guide de mouvement, il n’apparaîtra pas dans votre animation terminée.
Pour l’instant, votre objet texte suit la trajectoire mais demeure horizontal. Optionnellement, vous pouvez faire en sorte que votre objet texte ait une inclinaison s’orientant sur la trajectoire.
Pour ce faire, sélectionnez votre interpolation de mouvement en cliquant sur n’importe quelle image du Calque 1 et amenez en avant-plan le panneau Image. Si vous ne le voyez pas, cliquez dans le menu Fenêtres > Panneaux > Image (touches z F). Dans ce panneau, vous n’avez qu’à cocher l’option Orienter vers la trajectoire.
Avant de terminer votre animation, vous pourriez la personnaliser davantage en apportant certaines modifications.
05.13 La modification de la durée de l’interpolation
Pour une durée d’animation plus courte ou plus longue, vous n’avez qu’à saisir la dernière image, l’image-clé, de votre Calque 1, et la déplacer à un numéro inférieur ou supérieur.
Attention, cette manoeuvre serait simple si votre image-clé faisait partie de l’interpolation. Si votre image-clé ne fait pas partie de l’interpolation, il faut s’y prendre à deux reprises. La première augmente seulement la durée de visibilité de votre image-clé. Maintenez la touche ALT enfoncée lorsque vous saisissez votre image-clé. La seconde fois (sans la touche ALT) ramène la durée de visibilité de l’image-clé à une seule image, et la durée de l’interpolation est modifiée.
Vous voulez utiliser une rotation, mais le texte de votre nom est long et vous n’appréciez pas que certains caractères sortent de la scène lors de la rotation? Vous pouvez soit agrandir la dimension de la scène (comme à l’étape 3), ou à la place d’une rotation, vous pouvez opter pour un pivotement horizontal.
Vous pouvez également modifier la taille de vos caractères. Pour cela, il vous faut modifier votre symbole MonNom.
Voir la section Utilisation d’objets > Pivotement d’objets.
FLA
SH 5
La p
re
miè
re
an
ima
tio
n
page 28
05.14 L’édition d’un symbole
1. Ouvrez la bibliothèque de votre animation (touches z L), et double-cliquez sur votre symbole pour l’éditer. Remarquez que la scène a disparue. Vous n’avez que votre symbole. Voyez à gauche, en haut du scénario, un onglet MonNom est apparu à la droite de l’onglet Scène 1, vous indiquant que vous êtes en mode d’édition de ce symbole.
2. Pour agrandir ou diminuer la taille de vos caractères, sélectionnez l’outil Texte et utilisez le panneau Caractères pour l’éditer.
Si vous le désirez, vous pouvez choisir une taille différente pour chacune des lettres de votre nom. Pour sortir du mode d’édition du symbole, vous n’avez qu’à cliquer sur l’onglet Scène 1.
FLA
SH 5
La p
re
miè
re
an
ima
tio
n
page 29
05.15 La publication de l’animation
Votre animation terminée, il ne vous reste plus qu’à la publier.
Dans le menu Fichier cliquez sur Publier.
C’est tout. Flash crée dans votre dossier, au même niveau que votre fichier PrenomNom.fla, un fichier PrenomNom.swf, lisible par un lecteur d’animation comme Flash Reader ou QuickTime.
C’est ce fichier SWF qui sera incorporé à votre page d’accueil de votre site. Flash crée aussi un fichier PrenomNom.html qui inclut votre animation. En double-cliquant sur ce fichier HTML, vous verrez votre animation via Netscape ou Explorer. Ces navigateurs ont le plugiciel Shockwave/Flash, leur permettant de lire les animations Flash.
Ce fichier HTML n’est pas très utile pour nous car nous avons déjà nos fichiers HTML créés avec Dreamweaver. On peut signifier à Flash de ne pas créer de fichier HTML dans les Paramètres de publication qui se trouve dans le menu Fichier.
05.16 L’intégration d’une animation dans une page HTML
Pour intégrer votre animation sur votre site Web, on vous conseille de vous créer un dossier que vous nommerez animations. Tout comme votre dossier nommé images, le dossier animations devrait être au même niveau que votre fichier index.html. Faites une copie de votre fichier PrenomNom.swf dans votre nouveau dossier animations.
1. Ouvrez votre fichier index.html avec Dreamweaver, et effacez votre nom. Laissez votre curseur à cet endroit et cliquez sur le bouton Insérer Flash dans la barre d’outils Commun sur votre gauche. Dreamweaver vous demandera alors de localiser l’animation Flash que vous voulez insérer. Si nécessaire, redimensionnez votre animation à l’intérieur même de Dreamweaver. Le tour est joué!
2. Appuyez sur la touche F12 pour prévisualiser votre page d’accueil dans un navigateur avec sa nouvelle animation.
En conclusion, il est intéressant que chacun personnalise l’animation de son nom sur sa page d’accueil. Plusieurs possibilités s’offrent à vous pour faire cette animation. Rien ne vous empêche de la modifier plus tard.
Vous pourriez, par exemple, faire entrer les différentes lettres de votre nom tour à tour, avec pour chacune un mouvement différent. Mais pour cela, il vous faudrait utiliser plusieurs calques. C’est, entre autres, le défi du prochain exercice.
FLA
SH 5
La p
re
miè
re
an
ima
tio
n
page 30
05.17 Le principe d’images par seconde
Mais d’abord qu’est-ce qu’une animation? Simplement une série d’images qui défilent dans le temps. La plupart d’entre nous avons expérimenté la lecture image par image sur un magnétoscope. En vidéo, la cadence est de 30 images par seconde. En cinéma, c’est 24 images par seconde. Le fait de voir tant d’images (similaires) dans une seule seconde crée l’impression de mouvement.
Dans Flash, la cadence par défaut est de 12 images par seconde, mais elle est ajustable. À douze images par seconde, cela crée un mouvement plutôt saccadé, mais tout de même satisfaisant. Cette fréquence à 12 images par seconde a pour but d’alléger la taille du fichier. Ajuster notre cadence à 24 ferait en sorte que notre animation serait plus lourde et exigerait pour le visiteur sur Internet un temps de téléchargement plus long (sans parler des ordinateurs de faible puissance qui auraient du mal à jouer l’animation à haute cadence). C’est pourquoi, nous adopterons la cadence par défaut de Flash, soit 12 images par secondes (frames per second en l’anglais).
D’ailleurs le terme anglais «frame» a ceci d’intéressant : Il réfère non seulement à une image, mais aussi à un instant précis dans l’animation. En effet, on peut avoir une animation de cinq secondes constituée d’une seule image. Par exemple une photo ou un texte qui se déplace dans l’écran en changeant de taille. On peut alors parler de 60 images différentes (à 12 images par seconde), mais il n’y a qu’une seule image (la photo ou le texte).
Pour éviter toute confusion dans les termes employés, on dira avec Flash que, dans cet exemple, il y a effectivement 60 images différentes, mais ayant le même contenu graphique. D’une image à l’autre, c’est le même contenu, mais à une position différente ou à une taille différente sur l’écran. Ainsi, le mot «image» sera équivalent au terme anglais «frame», et il référera à un contenu graphique à un moment précis. Le terme «graphique» sera employé pour désigner le contenu d’une image, que ce soit une photo numérisée, un texte, un dessin vectoriel etc. Le terme «vectoriel» n’a effectivement pas la même définition que dans vos cours de mathématiques. De cette manière, toujours dans notre exemple, on pourra dire au besoin qu’à la vingt-quatrième image (à la deuxième seconde), notre photo ou notre texte (en fait notre graphique) doit se situer au centre de l’écran ou avoir telle dimension.
Pour en savoir plus sur les propriétés de l’animation, cliquez sur le bouton aide en bas à droite de cette fenêtre. Vous vous trouverez dans l’aide, sous le mode Sommaire, à la rubrique Création d’une animation et définition de ses propriétés. Après avoir lu cette information, revenez à Flash.
Pour en savoir plus sur les mouvements selon une trajectoire et les calques de guide, voir la section Création d’animations > Interpolation de mouvement selon une trajectoire et Utilisation des calques > Utilisation des
FLA
SH 5
La p
re
miè
re
an
ima
tio
n
page 31
05.18 L’image-clé et l’interpolation
Pour savoir si votre image-clé fait partie de l’interpolation ou non, il suffit de vérifier si la flèche de l’interpolation se termine sur l’avant-dernière image (image 59) avec une petite ligne verticale la séparant de l’image-clé (image 60).
Dans ce cas, l’image-clé est indépendante de l’interpolation, et elle est de couleur grise. Par contre, s’il n’y a pas de petite ligne séparant les deux dernières images, alors l’image-clé fait partie de l’interpolation et elle est de la même couleur que les images de l’interpolation, soit bleu pâle.
Par ailleurs, mettez le pointeur de la souris sur cette image-clé, sans cliquer et patientez une seconde. Si Flash indique le mot «motion» pour mouvement, votre image-clé fait partie de l’interpolation. Par contre, si Flash indique le mot «static» pour statique (sans mouvement), votre image-clé ne fait pas partie de l’interpolation.
C’est lorsqu’on crée l’interpolation que l’on détermine si l’image-clé sera ou non incluse à l’interpolation, en sélectionnant les images à interpoler incluant ou non l’image-clé.
FLA
SH 5
La d
eu
xiè
me
an
ima
tio
n
page 32
06 La deuxième animation : L’effet génériqueDans le précédent exercice, notre scénario ne comportait qu’un seul calque (layer en anglais), ou deux si l’on considère le calque de guide. La majorité des animations utilisent plusieurs calques. Avant d’entrer dans la seconde animation, l’effet générique, précisons quelques points sur la manipulation des calques.
06.01 Les calques
À l’instar de plusieurs logiciels (comme Photoshop), Flash utilise aussi le concept de calque. Les calques sont analogues à des feuilles de papier transparent que l’on superpose les unes par dessus les autres. Lorsqu’on crée un objet sur la scène, cet objet appartient obligatoirement à un calque. Les calques supérieurs ont priorité sur les calques inférieurs.
Par exemple, effectuez les opérations suivantes :
1. Ouvrez un nouveau document dans Flash, dessinez sur la scène un cercle avec l’outil Ovale. Flash assigne automatiquement cet objet au Calque 1.
2. Créez un nouveau calque, en cliquant sur le menu Insertion > Calque, ou simplement en cliquant sur le petit icône avec le signe + en bas à gauche du scénario, sous le Calque 1. Flash insère un nouveau calque qu’il nomme par défaut Calque 2. Ce nouveau calque apparaît en couleur inversée. Ce qui signifie qu’il est actif. Le Calque 1 apparaît maintenant en gris.
Il est recommandé de consulter ces quatre courtes rubriques de l’aide pour bien comprendre les calques. Voir les sections :
Utilisation des calques > Vue d’ensemble de l’utilisation des calques
Utilisation des calques > Création de calques
Utilisation des calques > Affichage des calques
Utilisation des calques > Modification des calques
FLA
SH 5
La d
eu
xiè
me
an
ima
tio
n
page 33
3. Modifiez la couleur de remplissage du cercle en sélectionnant une couleur différente. L’outil Couleur de remplissage est aussi à gauche dans la barre d’outils.
4. Saisissez l’outil Rectangle et dessinez un rectangle que vous disposerez en partie sur le cercle. Le rectangle appartient au Calque 2. Renommez ce nouveau calque, donnez-lui le nom de Rectangle. Voyez que le rectangle cache en partie le cercle parce qu’il appartient à un calque de niveau supérieur.
5. Saisissez le calque Rectangle et faites-le glisser sous le calque Calque 1. C’est maintenant le cercle qui cache en partie le rectangle, tout simplement parce que le calque Cercle est maintenant au-dessus du calque Rectangle.
06.02 La préparation de la deuxième animation
Après ce bref exposé théorique sur les calques, revenons à l’exercice principal de ce chapitre. Dans cet exercice, nous utiliserons plusieurs calques pour animer un texte à la manière d’un générique de film, à la grande différence que nous pourrons, grâce à des boutons interactifs, arrêter le défilement du texte, le relancer ou revenir au début.
Tout comme au chapitre précédent, vous pouvez voir cet exemple sur le site de Éva Laudée (version Flash) :
Disque dur \ Applications \ Macromedia Flash 5 \ Eva.Laudee.Flash \ index.html
1. Créez un nouveau document Flash que vous nommerez TexteAnime.fla. Ce fichier servira à créer l’animation d’un texte, de préférence le vôtre, qui sera intégré dans votre page d’accueil. Ayez à la portée de votre souris un fichier texte qui devrait contenir environ de 15 à 30 lignes (à peu près 10 mots par ligne).
2. Cliquez sur le menu Modification > Animation (touches z M), et ajustez la grandeur de la scène à 350 sur 350 pixels. Si vous voulez que l’animation de votre texte se confonde au fond de votre page d’accueil, choisissez la même couleur d’arrière-plan.
L’affichage et l’ajustement de la grilleAffichez la grille en cliquant sur le menu Affichage > Grille > Afficher la grille. Cette grille ne vous servira qu’à positionner vos éléments. Elle n’apparaît pas dans l’animation. Elle apparaît seulement sur la scène.
La grosseur par défaut de ses mailles (18 pixels) étant trop grande pour positionner précisément nos objets, ajustez la grille à des petits carrés de 10 par 10 pixels. Pour ce faire, cliquez sur le menu Affichage > Grille > Modifier la grille (touches ALT z G). Cochez la petite case Ajuster à la grille.
FLA
SH 5
La d
eu
xiè
me
an
ima
tio
n
page 34
06.03 L’insertion du texte dans l’animation
À partir du Finder, ouvrez le fichier qui contient votre texte. Sélectionnez-le, copiez-le (touches z C) et revenez dans l’environnement Flash.
Dans la barre d’outils, activez l’outil Texte. Cliquez sur la scène, légèrement en retrait vers la droite. Tout en maintenant le bouton de la souris enfoncée, ouvrez votre fenêtre Texte à la largeur de la scène (ou un peu moins). Collez votre texte (touches z V). Sélectionnez tout le texte (touches z A) afin d’appliquer la police de caractères désirée ainsi que sa taille à l’aide du panneau Caractère. La police Arial de taille 12 convient très bien mais vous pouvez choisir d’autres paramétrages. Sortez du mode d’édition de texte en cliquant sur l’outil Flèche.
Sélectionnez votre texte en cliquant dessus une seule fois. Convertissez-le en symbole. Pour ce faire, cliquez sur le menu Insertion > Convertir en symbole (touche F8). Nommez-le MonTexte.gra et attribuez-lui le comportement de symbole graphique. Il apparaît maintenant dans la bibliothèque de votre animation. Le suffixe GRA sert seulement à vous rappeler qu’il s’agit d’un symbole graphique.
Flash a automatiquement installé votre symbole MonTexte.gra dans l’image 1 du Calque 1. Double-cliquez sur Calque 1 pour le renommer Texte. Maintenant il faut positionner correctement votre texte sur la scène.
FLA
SH 5
La d
eu
xiè
me
an
ima
tio
n
page 35
06.04 Le positionnement des éléments sur la scène
Le premier petit icône de la série des sept icônes à droite, en bas de la scène, permet d’afficher (ou de masquer) la fenêtre contenant le panneau Info. Il peut être utilisé au lieu de cliquer sur le menu Fenêtres > Panneaux > Info.
Ce panneau nous informe des dimensions et de la position de l’objet sélectionné sur la scène. Ce panneau nous permet également de modifier les valeurs de l’objet sélectionné. Les lettres L et H signifient «largeur» et «hauteur», alors que les lettres X et Y réfèrent à la position. Ces valeurs sont toujours exprimées en pixels.
La position initiale de X = 0 et de Y = 0, se situe dans le coin supérieur gauche de la scène. Les valeurs de X augmentent vers la droite, comme un graphique cartésien en mathématiques, alors que les valeurs de Y augmentent vers le bas (contrairement au graphique cartésien).
D’ailleurs, par défaut dans le panneau Info, le point de référence de l’objet lui-même se situe aussi en haut à gauche. Observez juste à gauche des lettres X et Y, il y a 9 petits carrés. Par défaut, c’est le premier en haut à gauche qui est sélectionné, c’est-à-dire qui est de couleur noire. Les 8 autres sont de couleur blanche.
Par exemple, une fois votre texte sélectionné, si le panneau Info indique une position X = 18 et Y = 384, cela signifie que le coin supérieur gauche du texte se situe à 18 pixels à droite du coin supérieur gauche de la scène (l’origine) et que le coin supérieur gauche du texte se situe à 384 pixels plus bas que la position initiale. Pour les exercices à venir, assurez-vous que, parmi les 9 petits carrés du panneau, ce soit bien celui en haut à gauche qui soit sélectionné. Si ce n’est pas le cas, cliquez dessus.
L’ajustement de la position initiale du texteSélectionnez votre texte sur la scène et ajuster sa position à X = 20 et Y = 375 en entrant directement ces nombres dans les cases appropriées du panneau Info.
L’ajustement de la durée de l’animationLe texte doit traverser la scène au complet à une vitesse raisonnable pour qu’on ait le temps de le lire. Si vous croyez qu’on peut lire votre texte en 15 secondes, donnez-vous une marge de manœuvre et prévoyez une durée d’animation de 20 secondes, c’est-à-dire 240 images (puisqu’il y a 12 images par secondes). Pour diminuer la taille des carrés représentant les images du scénario, effectuez les opérations suivantes :
1. Cliquez dans le coin supérieur droit de la fenêtre du scénario et sélectionnez l’option Petite ou Minuscule.
FLA
SH 5
La d
eu
xiè
me
an
ima
tio
n
page 36
2. Faites glisser la barre de défilement horizontale du scénario jusqu’à l’image 240 (ou 720 si vous avez besoin d’une minute). Cliquez sur l’image 240. Cliquez sur le menu Insertion > Image-clé.
L’ajustement de la position finale du texte1. Sur la scène, à l’image 240, sélectionnez votre texte pour lui donner sa position
finale. Glissez-le entièrement en haut de la scène.
2. À l’aide du panneau Info, ajustez sa position horizontale à X = 20. Sa position verticale dépend de la longueur du texte. Il n’est pas nécessaire de l’ajuster directement, assurez-vous simplement que le texte ne touche pas à la scène.
La création de l’interpolation de mouvement1. Comme dans l’exercice précédent, sélectionnez la totalité des images de votre
calque Texte en cliquant sur le nom du calque.
2. Cliquez sur n’importe quelle image de votre calque Texte.
3. Cliquez sur le menu Insertion > Créer l’interpolation de mouvement.
Le test de l’animationTestez tout de suite votre animation (touches z √) et assurez-vous que le texte défile à une vitesse raisonnable. Si la vitesse est trop rapide, augmentez la durée en déplaçant votre image-clé à un numéro d’image supérieur. Dans le cas contraire, soit une vitesse de défilement trop lente, ramenez votre image-clé à une position inférieure.
La création d’un fond pour les boutonsMaintenant nous allons créer un fond pour y intégrer des boutons de commande de l’animation.
1. Avant-tout, ajoutez un nouveau calque avec le menu Insertion > Calque, ou simplement en cliquant sur le petit icône avec le signe + en bas à gauche du scénario. Nommez ce calque Fond.
2. Déterminez d’abord la couleur de remplissage de votre fond dans la barre d’outils (section couleurs sous les outils).
3. À l’aide de l’outil Rectangle, dessinez un rectangle de n’importe quelle taille n’importe où sur la scène. Sortez du mode d’édition du rectangle en reprenant l’outil Flèche.
Attention, le rectangle est fait de deux éléments indépendants. Le contour et la surface intérieure. Pour sélectionner votre rectangle au complet, son contour et sa surface, il faut double-cliquer dessus.
FLA
SH 5
La d
eu
xiè
me
an
ima
tio
n
page 37
4. Convertissez-le en symbole (touche F8). Nommez-le Fond.gra et attribuez-lui le comportement de symbole graphique.
Devenu symbole graphique, vous n’avez plus besoin de double-cliquer sur votre rectangle pour le sélectionner, car le contour et sa surface font partie du symbole Fond.gra. Un seul clic suffit.
Remarquez maintenant votre calque Fond dans le scénario. La bande noire indique que votre fond est présente sur le même nombre d’images que votre texte. Par défaut Flash a inséré une occurrence de votre symbole Fond.gra dans le calque Fond et l’installe sur toutes les images de l’animation, afin qu’elle soit toujours visible. Il en sera de même pour les autres objets que l’on disposera dans les calques existants et dans les nouveaux calques de cette animation.
L’ajustement du fondPour ajuster la taille et la position de votre fond, il suffit de sélectionner son occurrence sur la scène. Dans le panneau Info, entrez les valeurs suivantes : Largeur L = 350, hauteur H = 50, position horizontale X = 0, position verticale Y = 300. Voilà, votre fond est en place.
Maintenant nous allons disposer sur ce fond trois boutons de commande de l’animation : Retour au début, Stop et Lecture normale. Ces trois boutons ainsi que leur étiquette feront partie d’un troisième calque. Ainsi donc, insérez un nouveau calque que vous nommerez Boutons.
FLA
SH 5
La d
eu
xiè
me
an
ima
tio
n
page 38
Les symboles et les occurrencesEn réalité, il n’y a jamais de symboles sur la scène. Il n’y a que des occurrences de symboles. Une occurrence, c’est comme une copie du symbole. On peut modifier une occurrence sur la scène et ces modifications n’affectent pas le symbole lui-même.
Les symboles que l’on crée sont logés dans la bibliothèque. On peut saisir un symbole dans la bibliothèque et le faire glisser sur la scène. On peut même répéter cette opération plusieurs fois avec le même symbole.
Flash crée alors à chaque fois une occurrence du symbole et on peut modifier chacune de ces occurrences sans que le symbole lui-même ne soit modifié. Par contre, lorsqu’on modifie le symbole lui-même, toutes les occurrences de ce symbole présentes sur la scène sont affectées. En effet, on peut éditer un symbole en double-cliquant son icône directement dans la bibliothèque.
06.05 La bibliothèque commune Boutons
Bien qu’il soit possible de créer ses propres boutons, nous utiliserons en guise d’introduction des boutons prédéfinis disponibles dans une des bibliothèques communes de Flash.
Cliquez sur le menu Fenêtre > Bibliothèques communes > Boutons.
Il y a 57 symboles de boutons prédéfinis dans cette bibliothèque, classés pour la plupart dans des dossiers oranges. Double-cliquer sur un dossier a pour effet de l’ouvrir (ou de le fermer). Cliquez sur un symbole de bouton pour obtenir un aperçu de son apparence dans la fenêtre en haut de la bibliothèque.
Les trois boutons du site d’Éva Laudée Flash proviennent du dossier (circle) VCR Button Set, il s’agit des boutons VCR Rewind, VCR Stop et VCR Right.
Choisissez-vous trois boutons à votre goût.
06.06 L’ajout et l’ajustement des boutons
1. Amenez, par un glisser-déposer, vos trois boutons sur le fond destiné à intégrer les boutons.
2. Si les boutons choisis sont trop gros ou trop petit, ajustez leur taille à l’aide du panneau Transformer qui est habituellement à droite du panneau Info. Dans ce panneau, vous pouvez modifier la taille, horizontalement et verticalement, de l’occurrence sélectionnée sur la scène. Cochez la case Contraindre pour qu’une modification sur un sens s’applique également sur l’autre. Comme pour le panneau Info, vous pouvez entrer directement la valeur désirée dans la case appropriée.
Voir la section Principes de base de Flash > Environnement de travail de Flash > Symboles et occurrences.
FLA
SH 5
La d
eu
xiè
me
an
ima
tio
n
page 39
Si vous avez choisi les mêmes boutons que sur le site d’Éva Laudée Flash, il vous faudra diminuer leur taille à environ 35 %. Sélectionnez les trois boutons (touche Majuscule et clic de la souris) et dans le panneau Transformer, entrez la valeur 35 dans la première case et appuyez sur la touche Retour.
Voilà, les trois boutons sont redimensionnés d’un seul coup. Si nécessaire, disposez-les de nouveau sur le fond.
3. À l’aide de l’outil Texte, créez trois petites étiquettes pour ces boutons. Il vous suffit de cliquer n’importe où sur la scène avec cet outil pour écrire le mot «Retour» puis, d’ajuster les paramètres typographiques (police, taille, etc.) à l’aide du panneau Caractère. Faites de même pour les mots «Arrêt» et «Lecture».
4. Cliquez sur l’outil Flèche, et positionnez vos trois étiquettes près des boutons correspondants.
5. Testez votre animation (touches z √). Pour l’instant les boutons sont sans effet sur l’animation du texte. Ces boutons sont composés d’événements prédéfinis. Leur apparence change lorsqu’on place la souris au-dessus ou lorsqu’on clique dessus. Pour l’instant ces boutons n’on aucun effet sur l’animation. Il reste à attribuer des actions à ces boutons, afin qu’ils modifient l’animation en cours de lecture.
Les boutonsLes boutons ont un rôle fondamental dans Flash. Ils sont indispensables pour ajouter de l’interactivité à une animation. Un bouton n’a pas toujours l’apparence d’un bouton. N’importe quel élément graphique (un texte, une photo, un dessin vectoriel) peut jouer le rôle de bouton. Il suffit pour cela de convertir notre élément graphique en symbole, tout en lui attribuant le comportement de symbole bouton plutôt que celui de symbole graphique comme précédemment.
FLA
SH 5
La d
eu
xiè
me
an
ima
tio
n
page 40
Un bouton est composé d’au moins deux images, dont l’affichage à l’écran dépend du fait que le pointeur de la souris est ou n’est pas sur le bouton. On peut ajouter une troisième image pour la durée, généralement courte, où l’on clique sur le bouton. Plus précisément, le bouton est caractérisé par quatre états en rapport avec l’activité de la souris de l’usager :
• La première image, l’état Haut, représente l’apparence normale du bouton quand le pointeur n’est pas dessus.
• La deuxième image, l’état Dessus (mouse within en anglais), représente l’apparence du bouton quand le pointeur se trouve dessus.
• La troisième image, l’état Abaissé (still down en anglais), représente l’apparence du bouton quand vous cliquez dessus.
• La quatrième image, l’état Cliqué (mouse up et release en anglais), définit la zone sensible qui réagit au clic de la souris. Cette zone est invisible dans l’animation.
Visuellement, on peut donc associer trois images différentes à un bouton en fonction de l’événement. On n’associe pas d’image à l’état cliqué, puisqu’il ne dure qu’une fraction de seconde.
Le bouton est d’abord un symbole. Il se trouve donc dans une bibliothèque. Lorsqu’il apparaît sur la scène, il s’agit donc d’une occurrence de ce symbole bouton. Chaque occurrence est modifiable. On peut donc éditer un bouton qui se trouve sur la scène.
Double-cliquez sur un bouton et voyez le scénario se transformer, il ne s’agit plus du scénario de votre animation. Il s’agit du scénario du bouton. Les calques présents dans ce scénario sont les calques du bouton et il n’y a plus de ligne de temps. À la place, il y a les quatre états possibles du bouton. Vous êtes en mode d’édition de bouton, tous les éléments sur la scène sont grisés, sauf votre bouton sélectionné.
Sur la gauche du scénario, en haut du titre des calques, Flash a ajouté un onglet activé, juste à la droite de l’onglet Scène 1, qui a pour titre le nom du bouton. Cliquez sur les trois premiers états, Haut, Dessus ou Abaissé, pour éditer l’apparence du bouton. Le graphique simple (en général, un rectangle ou un ovale) logé dans l’état cliqué n’est pas affiché lors de l’animation. Il représente seulement la surface sensible du bouton (sensible à la position de la souris).
Pour mieux comprendre le concept de bouton, lisez la rubrique concernant la création de boutons. Voir la section Utilisation de symboles et d’occurrences > Création de boutons.
FLA
SH 5
La d
eu
xiè
me
an
ima
tio
n
page 41
06.07 L’ajout d’une action à un bouton
Pour qu’un bouton modifie l’animation, il faut lui attribuer une action.
1. Sélectionnez le bouton Retour sur la scène et cliquez sur le menu Fenêtre > Actions (touches ALT z A). Pour afficher les actions de base, cliquez sur l’icône Actions de base situé dans la fenêtre de gauche pour déployer la liste des actions. Double-cliquez sur l’action Go To. Ceci a pour effet d’attribuer au bouton Retour la fonction de ramener la tête de lecture de l’animation à l’image 1, c’est-à-dire au début du texte.
2. Sélectionnez maintenant le bouton que nous avons nommé Arrêt, et double-cliquez sur l’action Stop. Ce bouton, lorsque cliqué, arrêtera l’animation, c’est-à-dire le défilement du texte.
3. Sélectionnez finalement le bouton Lecture, et double-cliquez sur l’action Play. Ce bouton, lorsque cliqué, reprendra la lecture de l’animation là où on l’a arrêté.
FLA
SH 5
La d
eu
xiè
me
an
ima
tio
n
page 42
06.08 L’ajout de sons à un bouton
Il est d’usage courant d’associer des sons à des boutons. Il y a quelques sons disponibles dans une des bibliothèques communes de Flash.
1. Cliquez sur le menu Fenêtre > Bibliothèques communes > Son. Une liste de 38 sons apparaît. Plusieurs de ces sons peuvent être utilisés sur des boutons. Pour entendre un son, vous n’avez qu’à cliquer sur le son désiré, et Flash affiche sa représentation graphique dans la petite fenêtre en haut de la bibliothèque. Dans cette fenêtre on y trouve un bouton de lecture et un bouton d’arrêt pour faire jouer le son et l’arrêter.
2. Double-cliquez sur votre bouton qui a pour étiquette Retour, afin de le modifier.
3. Insérez un nouveau calque, afin d’y intégrer le son associé au bouton Retour. Identifiez votre calque en utilisant le même nom du son que vous avez choisi.
4. À partir de la bibliothèque, faites glisser le son de votre choix sur la scène. Par la suite, saisissez ce son au niveau du calque et déplacez-le vers l’état cliqué à la quatrième colonne. Revenez dans l’animation en cliquant sur la rubrique Scène 1 dans le scénario. Répétez le même processus pour les deux autres boutons.
Vous pouvez faire autrement si vous voulez mais, c’est ainsi que le son Switch Toggle a été ajouté aux trois boutons dans l’exemple du site de Éva Laudée Flash. Pour connaître une autre manière d’ajouter un ou plusieurs sons à un bouton, veuillez consulter l’aide.
On doit donc double-cliquer l’occurrence du bouton sur la scène pour faire apparaître le scénario du bouton. Il faut ensuite ajouter un calque pour loger le son désiré. Pour ajouter ce son, il suffit de le saisir dans la bibliothèque et le faire glisser sur la scène. Flash affiche la représentation graphique du son dans le calque sélectionné (en principe c’est celui qu’on vient de créer) et bien sûr n’affiche rien sur la scène.
FLA
SH 5
La d
eu
xiè
me
an
ima
tio
n
page 43
Ensuite il faut saisir le son dans le calque et le déplacer sous l’état souhaité pour informer Flash à quel moment le son doit se faire entendre. En effet, le son peut être déclenché à quatre instants différents. Les deux premiers correspondent à des mouvements de souris sur le bouton sans qu’il n’y ait de clic, alors que les deux derniers correspondent au clic lui-même sur le bouton.
• Haut : Placé sous cet état, le son est déclenché à l’instant précis où la souris sort de la surface sensible du bouton (mouse leave en anglais).
• Dessus : Placé sous cet état, le son est déclenché à l’instant précis où la souris entre dans la surface sensible du bouton (mouse enter en anglais).
• Abaissé : Placé sous cet état, le son est déclenché à l’instant précis où le bouton de la souris est enfoncé sur la surface sensible du bouton (mouse down en anglais). En conservant, le bouton de la souris enfoncé sur le bouton, le son est joué une seule fois, soit à l’instant où on l’a enfoncé.
• Cliqué : Placé sous cet état, le son est déclenché à l’instant précis où le bouton de la souris est relâché sur la surface sensible du bouton (mouse up et release en anglais). En conservant le bouton de la souris enfoncé sur le bouton, le son n’est pas joué. Flash attend qu’on relâche la souris pour faire entendre le son.
Le fait que le son soit placé sous l’état haut ou dessus ne fait pas vraiment de différence pour un mouvement rapide de la souris au-dessus du bouton (rollover en anglais, c’est-à-dire rouler dessus sans cliquer ni s’y arrêter). De même, le fait que le son soit placé sous l’état abaissé ou cliqué ne fait pas vraiment de différence pour un clic rapide de la souris sur le bouton.
FLA
SH 5
La d
eu
xiè
me
an
ima
tio
n
page 44
06.09 L’ajout de sons à une animation
Ajouter des sons aux boutons c’est sympathique, mais est-il possible d’ajouter une ambiance sonore, voire même musicale, qui durera pendant toute l’animation? Oui, évidemment.
1. Ajoutez un calque à votre animation que vous nommerez BoucleSonore.
2. Depuis la même bibliothèque commune Son, saisissez le son Visor Hum Loop et faites-le glisser sur la scène. Sa représentation graphique apparaît dans votre nouveau calque.
3. Pour paramétrer un son, il faut d’abord le sélectionner dans son calque audio puis ouvrir le panneau Son. Cliquez sur le menu Fenêtres > Panneaux > Son.
4. Dans le cas d’un son d’ambiance qui n’est pas synchronisé avec les images de l’animation, choisissez le Sync. Démarrage, et entrez dans la case Boucles le nombre maximum de fois que vous voulez faire entendre le son (n’oubliez pas d’enfoncer la touche Retour).
5. Testez votre animation (touches z √), elle devrait être terminée.
06.10 L’ajout de sons dans un calque de l’animation
L’animation en cours de construction sera une animation qui jouera en boucle. À la fin elle recommencera automatiquement depuis le début. Nous ignorons combien de temps restera notre visiteur sur notre site Web. Par ailleurs nous ignorons s’il va arrêter l’animation, afin d’avoir plus de temps pour lire le contenu textuel, etc.. Il serait donc pratique d’avoir un son d’ambiance qui puisse jouer également en boucle, quoiqu’il arrive.
Le son Visor Hum Loop est un exemple de son conçu pour être joué en boucle. Sa durée est cependant d’une seule seconde. Si vous estimez qu’après 5 minutes il n’est plus
FLA
SH 5
La d
eu
xiè
me
an
ima
tio
n
page 45
nécessaire de faire entendre le son d’ambiance, il suffit de demander à Flash de jouer ce son 300 fois.
Si vous estimez que le visiteur peut demeurer 20 minutes sur votre page, alors demandez 1200 boucles de ce son. Un tel son d’ambiance est un son d’événement, et l’événement en question n’est que le démarrage de l’animation. Une fois démarré, ce son est indépendant de la ligne de temps de l’animation. Si l’on désire un ou plusieurs sons synchronisés parfaitement avec les images, il faudra donner à ces sons la propriété de son continu.
06.11 L’importation de sons dans Flash
De la même manière que l’on peut importer des images vectoriels ou matricielles dans Flash, on peut aussi importer nos fichiers audio. Cliquez sur le menu Fichier > Importer et Flash ajoute vos fichiers audio dans la bibliothèque de l’animation. Flash, version Macintosh, accepte les fichiers de format AIFF, SDII, WAV, MP3, qu’ils soient de 8 ou 16 bits à n’importe quelle fréquence d’échantillonnage. Flash recommande des sons de 16 bits à 22 kHz.
Pour en savoir davantage sur l’ajout de sons dans une animation, voir la section Ajout de sons > Ajout de sons à une animation.
Voir la section Ajout de sons > Importation de sons.
FLA
SH 5
La t
ro
isiè
me
an
ima
tio
n
page 46
07 La troisième animation : L’effet polaroid
07.01 La création d’une animation à plusieurs scènes
Dans le précédent exercice, notre animation ne comportait qu’une seule scène, la Scène 1. Comme au cinéma, Flash peut créer des animations comportant plusieurs scènes. À la lecture de l’animation, les scènes sont lues les unes à la suite des autres dans l’ordre qu’elles apparaissent dans le panneau Scène. À moins bien sûr qu’une interaction fasse passer l’action directement à une autre scène.
L’exemple suivant utilise quatre scènes (les scènes 0, 1, 2 et 3).Voyons maintenant l’animation, elle consiste à simuler le développement de trois photos polaroid Pour la simplicité de la présentation, ces scènes se ressemblent. Il s’agit bien sûr de l’animation des photos de Éva Laudée sur le site exemple.
Comme vous maîtrisez maintenant les principaux concepts, les explications de cet exemple seront plus brèves. Le but n’est pas que vous reproduisez exactement la même animation. Il est cependant important que vous la compreniez parce qu’on y trouve des nouvelles possibilités. Après quoi vous pourrez vous en inspirer afin d’animer vos propres photos.
Voici donc comment cette animation a été créée à partir de trois photos d’Eva préparés à 210 par 210 pixels, une photo de l’appareil polaroid à 280 par 310 pixels et un son de camera polaroid. Si vous désirez reproduire cet exemple, vous utilisez les fichiers de la caméra Polaroid.pct et du son PolaroidShutterWind.wav dans le dossier suivant :
Disque dur \ Applications \ Macromedia Flash 5 \ Effet Polaroid
Vous pouvez préparer trois photos de vous-même de grandeur 210 par 210 pixels à une résolution de 72. Les photos de Eva se nomment Eva_1.jpg, Eva_2.jpg, Eva_3.jpg. Nommez les vôtres de la même manière avec votre prénom. À chaque fois que la description fera référence à Eva, remplacez ce prénom par le vôtre.
Consultez l’aide pour en savoir plus sur l’utilisation des scènes dans Flash Principes de base de Flash > Utilisation de scènes.
FLA
SH 5
La t
ro
isiè
me
an
ima
tio
n
page 47
07.02 La préparation de la première scène
Créez un nouveau document dans Flash et nommez-le Polaroid.fla. La grandeur de la scène doit être ajustée à 280 par 590 pixels. La couleur d’arrière-plan doit identique à la page d’accueil.
Effectuez les opérations suivantes :
1. Ouvrez le panneau Scène, et double-cliquez sur la Scène 1 pour la renommer Scène 0. C’est la scène d’introduction.
2. Importez les trois photos de Eva (Eva_1.jpg, Eva_2.jpg, Eva_3.jpg), celle de l’appareil Polaroid.jpg et le son Polaroid shutter wind.wav par le menu Fichier > Importer (touches z R). Tous ces éléments sont maintenant dans la bibliothèque de l’animation.
3. À partir de la bibliothèque, sélectionnez la photo de la caméra et glissez-la dans le bas de la scène. Dans le panneau Info, fixez sa position à X = 0, Y = 280. Renommez ce premier calque Appareil.
4. Créez un nouveau calque et disposez un bouton sur l’appareil. Choisissez le bouton Menu qui se trouve dans le dossier (circle) Button Set de la bibliothèque commune Boutons.
5. Positionnez ce bouton à X = 180, Y = 425 et identifiez le calque par le mot Bouton.
FLA
SH 5
La t
ro
isiè
me
an
ima
tio
n
page 48
6. Double-cliquez sur le bouton pour l’éditer. Ajoutez un calque et nommez-le Son Shutter. À partir de la bibliothèque sélectionnez le son Polaroid Shutter et fait-le glisser sur la scène. Dans le scénario du bouton, saisissez le son localisé à l’état Haut pour le faire glisser à l’état Cliqué.
07.03 La duplication de la Scène 0
La première scène, la Scène 0, est quasiment terminée. Rien ne se passe encore. Il n’y a qu’un appareil Polaroid avec un bouton qui attend d’être appuyé.
1. Ouvrez à nouveau dans le panneau Scène. Sélectionnez la Scène 0 et cliquez sur le premier petit icône dans le bas de la fenêtre pour dupliquer la Scène 0. Flash créé une nouvelle scène identique à la Scène 0 et la nomme Copie de la Scène 0.
2. Double-cliquez sur Copie de la Scène 0 et renommez-la Scène 1.
À l’angle supérieur gauche du scénario, on voit qu’on édite maintenant la Scène 1.
FLA
SH 5
La t
ro
isiè
me
an
ima
tio
n
page 49
07.04 L’ajout d’un encadré dans la Scène 1
1. Dans la Scène 1, ajoutez un troisième calque et nommez-le Papier blanc.
2. Avant de dessiner un rectangle, ajustez dans le panneau Trait l’épaisseur du trait à 0.25 ou choissez filet maigre dans le menu déroulant. Puis, dans la barre d’outils, section Couleurs, sélectionnez la couleur #FFFFFF (blanc).
3. Avec l’outil Rectangle, créez un rectangle blanc de n’importe quelle taille sur la scène.
4. À l’aide de l’outil Flèche, double-cliquez sur le rectangle blanc afin de sélectionner à la fois l’intérieur et le contour. Convertissez le rectangle en symbole (F8), nommez-le PapierBlanc.gra et attribuez-lui le comportement de symbole graphique.
5. Sélectionnez l’occurrence de ce symbole sur la scène, c’est-à-dire le rectangle blanc, et dans le panneau Info ajustez sa taille à L = 240 et H = 300 ainsi que sa position à X = 10 et Y = 280.
6. À l’image 20 de ce même calque, insérez une image-clé (F6). Puis modifiez sa position verticale à Y = 0.
07.05 L’accélération d’un mouvement
1. Cliquez sur n’importe quelle image entre l’image 1 et l’image 19 pour sélectionner les 19 premières (l’image 20 ne doit pas être sélectionnée) et créez l’interpolation de mouvement.
2. Sélectionnez le calque et dans le panneau Image choissez Interpolation de mouvement et ajustez l’accélération à 60, afin que le mouvement soit rapide au départ, mais lent à la l’arrivée. Une accélération négative ferait l’effet contraire sur le mouvement, soit lent au départ mais rapide à l’arrivée.
FLA
SH 5
La t
ro
isiè
me
an
ima
tio
n
page 50
3. Saisissez l’image-clé et faites-la glisser jusqu’à l’image 150. L’idée est de créer un mouvement du papier blanc sur les 20 premières images seulement, et ce papier doit demeurer visible par la suite, sans bouger. Avec le contrôleur vérifiez si c’est le cas.
4. Pour que la caméra soit visible sur les 150 images de cette scène, il suffit de créer une image-clé à l’image 150 au niveau du calque Appareil sans interpoler. Il faut faire de même avec le bouton.
5. Pour que le papier blanc glisse sous la caméra, afin de donner l’impression qu’il sort de la caméra, il suffit de saisir le calque Papier Blanc et le déplacer sous le calque Appareil.
6. Pour la première photo de Eva, ajoutez un quatrième calque et renommez-le Eva1. Ce nouveau calque doit se situer juste au-dessus du calque Papier Blanc.
7. À partir de la bibliothèque, glissez la photo Eva1.jpg sur la scène en prenant soin de s’assurer que le calque sélectionné est bien Eva1.
8. Dans le panneau Info, ajustez la position de la photo à X = 25 et Y = 15.
9. Dans le calque Eva1, la photo apparaît par défaut dès l’image 1. Il faut saisir l’image 1 et la déplacer à l’image 20, afin que la photo n’apparaisse que lorsque le papier blanc a terminé son mouvement.
FLA
SH 5
La t
ro
isiè
me
an
ima
tio
n
page 51
07.06 La création d’un fondu d’entrée
Il faut maintenant que la photo apparaisse lentement sur le papier blanc, qu’elle se développe au contact de l’air comme une vraie photo Polaroid. Pour ce faire, vous devez créer un fondu d’entrée sur la photo.
1. Ajoutez un cinquième calque et renommez-le Fondu transparent. Ce nouveau calque doit se situer juste au-dessus du calque Eva1.
2. Pour créer un carré qui deviendra transparent, il faut d’abord créer un carré blanc sans contour. Dans la barre d’outils, sélectionnez l’outil Rectangle. Mais avant de créer un nouveau rectangle sur la scène, cliquez dans la barre d’outils, dans la section Couleurs, sur le petit crayon (couleur de trait), et ensuite cliquez un peu plus bas sur le petit icône de forme carré avec une diagonale rouge. Cette manoeuvre fera en sorte que le rectangle que vous allez créer n’aura pas de contour. Sur la scène, créez ce carré blanc sans contour, peu importe la taille.
3. Convertissez ce carré blanc en symbole de comportement graphique (F8), et nommez-le CarreBlanc.gra.
4 . Dans le panneau Info, ajustez la taille de ce carré à L = 210 et H = 210 et la position à X = 25 et Y = 15. Le carré blanc doit recouvrir entièrement la photo.
5. Tout comme la photo, le carré blanc ne doit apparaître qu’à l’image 20. Dans son calque Fondu transparence, saisissez l’image 1 et la déplacez-la à l’image 20.
6. Dans le calque Fondu transparent, insérez une image-clé à l’image 150. Insérez une image clé à l’image 150 dans le calque Bouton et dans le calque Appareil.
7. Dans le calque Fondutransparent, vous devez rendre cette image-clé 150 transparente. Cet effet sur les occurrences de symbole est disponible dans le panneau Effet. Dans le menu déroulant, choissez Alpha et ajustez-le à 0 %.
8. En cliquant et en maintenant le bouton de la souris enfoncé sur n’importe quelle image (entre 21 et 149) du calque Fondu transparent, créez l’interpolation de mouvement.
Ici le mouvement n’est pas un déplacement. Il s’agit de la transformation d’un objet opaque vers un objet transparent, laissant ainsi transparaître la photo dans son intégralité.
FLA
SH 5
La t
ro
isiè
me
an
ima
tio
n
page 52
07.07 Le test de la scène
L’animation de cette scène doit s’arrêter là.
1. Sélectionnez l’image-clé (150) du calque Fondu transparent pour lui attribuer une action Stop (touches ALT z A). Ouvrez la fenêtre Actions d’image et double-cliquez sur l’action Stop dans la série des Actions de base.
2. Pour avoir un aperçu de la scène, testez la scène plutôt que l’animation entière. Dans le menu Contrôle, choisissez Tester la scène (touches ALT z √). Assurez-vous que cette scène fonctionne bien, car les deux scènes suivantes seront des duplicata de cette première scène.
07.08 La création des autres scènes
La première scène est pratiquement terminée.
1. À partir du panneau Scène, dupliquez la Scène 1. Pour ce faire, cliquez sur le premier petit icône dans le bas de la fenêtre pour dupliquer la Scène 1. Flash créé une nouvelle scène identique à la Scène 1 et la nomme Copie de la scène 1. En double-cliquant sur Copie de la scène 1, renommez-la Scène 2. À l’angle supérieur gauche du scénario, la Scène 2 apparaît. Pour changer de scène, toujours dans le panneau scène, cliquez simplement sur la scène désirée.
FLA
SH 5
La t
ro
isiè
me
an
ima
tio
n
page 53
2. Dans le scénario de la Scène 2, sélectionnez le calque Eva1 et supprimez-le en cliquant sur l’icône de la corbeille située juste en dessous du premier calque.
3. Insérez un nouveau calque à la place de celui que vous venez de supprimer et nommez-le Eva2.
4. À partir de la bibliothèque, sélectionnez la seconde photo Eva2.jpg et glissez-la sur la scène. Positionnez-la à X = 25 et Y = 15. N’oubliez pas de déplacer l’image 1 du calque Eva2 à l’image 20.
6. La scène 2 est pratiquement terminée. Dupliquez cette scène pour créer une troisième scène dans laquelle vous devrez répéter les étapes 2 à 4 pour troisième photo, soit Eva3.jpg dans un calque Eva3.
FLA
SH 5
La t
ro
isiè
me
an
ima
tio
n
page 54
07.09 L’application des actions
Il reste à spécifier les actions.
1. Dans la Scène 0, sélectionnez l’image 1 du calque Appareil et attribuez-lui l’action Stop (touches ALT z A). Pour ce faire, ouvrez la fenêtre Actions d’image et double-cliquez sur l’action Stop dans la série des Actions de base.
2. Toujours dans la Scène 0, sélectionnez le bouton sur la scène. Ouvrez la fenêtre Actions sur les objets (touches ALT z A). Double-cliquez sur l’action Go To dans la série des Actions de base et spécifiez dans le champ Scène la Scène 1 en utilisant le menu déroulant.
3. Répétez cette étape trois fois. Le bouton de la Scène 1 doit amener l’animation à la Scène 2; le bouton de la Scène 2 doit amener l’animation à la Scène 3; le bouton de la Scène 3 doit amener l’animation à la Scène 1.
4. Testez l’animation en appuyant sur les touches z √.
Enregistrez votre document et faites-vous plaisir, démarrez votre animation et appréciez le résultat de votre travail !
