Le cours en PDF

MASTER IPM EAD 2007­2009 Cours Flash Chapitre 3 : les Symboles Rappel : les fichiers fla et swf sont dans le fichier « 3_symboles.zip ». SOMMAIRE 1 OBJ ECTIFS DU CHAPITRE ............................................................................................................... 1 2 INTRODUCTION ................................................................................................................................. 2 3 SYMBOLE GRAPHIQUE .................................................................................................................... 4 3.1 3.1.1 4 SYMBOLE CLIP................................................................................................................................... 8 4.1 4.2 5 EXERCICE : DERAPAGE INCONTROLE ................................................................................................ 5 Compléments............................................................................................................................. 6 EXERCICE : VOL D’OISEAUX DANS LES NUAGES ................................................................................ 8 EXERCICE OPTIONNEL : UN MINI SYSTEME SOLAIRE ......................................................................... 10 SYMBOLE BOUTON ......................................................................................................................... 12 5.1 5.2 CREER UN BOUTON ........................................................................................................................ 12 EXERCICE : UNE BOUSSOLE ............................................................................................................ 15 1 Objectifs du chapitre A la fin de ce chapitre, vous saurez : ­ ce que sont les symboles, et plus particulièrement les symboles graphiques, boutons et clips ; ­ comment créer un symbole ; ­ comment transformer un dessin en symbole, ­ créer des symboles contenant d’autres symboles, ­ animer des symboles pour les faire se déplacer, se déformer,…
MASTER IPM EAD 2007­2009 J.C. Tarby 2 Introduction Dans ce chapitre, nous allons aborder la notion de symboles Flash qui va vous ouvrir une nouvelle dimension dans l’animation graphique. Plus tard, quand nous aborderons la programmation ActionScript, nous associerons les symboles au code ActionScript et vous verrez dès lors que la seule limite à la puissance de Flash est votre imagination… Les symboles sont des éléments réutilisables d'un document. Il peut s'agir de graphiques, de boutons, de clips, de fichiers sons ou de polices. Lorsque vous créez un symbole, ce dernier est enregistré dans la bibliothèque du document. Lorsque vous placez un symbole sur la scène, vous créez une occurrence de ce symbole. Chaque fichier FLA contient sa propre bibliothèque, mais vous pouvez très facilement ouvrir deux FLA et faire des copier­coller entre les bibliothèques. De plus, Flash propose des bibliothèques de boutons (menu Fenêtre > Bibliothèques communes > Boutons). Les symboles permettent de réduire la taille des fichiers car, quel que soit le nombre d'occurrences que vous créez, Flash n'enregistre le symbole qu'une seule fois dans le fichier source .fla. Conseil : utilisez des symboles, animés ou non, pour chaque élément qui apparaît plus d'une fois dans un document. Vous pourrez ainsi soit modifier les propriétés des occurrences sans affecter le symbole qui a permis de les créer, soit modifier le symbole de manière à modifier toutes les occurrences en une seule opération. Chaque symbole possède son propre scénario et sa propre scène. Chaque fois que vous créez un symbole, vous devez en déterminer le type en fonction de la façon dont vous souhaitez l'utiliser dans l'animation. Il existe pour cela trois types de symboles (voir ci­dessous). Je vous invite à lire ces définitions, et surtout à y revenir quand vous aurez lu ce chapitre ; elles vous paraîtront certainement plus compréhensibles (vous pouvez également vous reporter à l’aide de Flash).
· Utilisez des symboles graphiques pour les images statiques et pour créer des éléments réutilisables liés au scénario de l'animation principale. Les symboles graphiques fonctionnent de manière synchronisée avec le scénario de l'animation. Les sons et les éléments de contrôle interactifs placés dans le scénario d'un symbole graphique ne fonctionnent pas dans la séquence principale.
· Utilisez des symboles de bouton pour créer dans l'animation des boutons interactifs qui réagissent aux clics de la souris, à un survol ou à d'autres actions. Vous définissez les graphiques associés aux différents états de bouton, puis affectez des actions à une occurrence de bouton. Vous pouvez aussi affecter des sons aux boutons.
· Utilisez des symboles de clip pour créer des éléments réutilisables d'une animation. Les clips possèdent leur propre scénario, qui est lu indépendamment du scénario de l'animation principale ; imaginez de petites animations à l'intérieur d'une animation principale, pouvant contenir des éléments de contrôle interactifs, des sons, voire d'autres occurrences de clip. Vous pouvez également placer des occurrences de clip dans le scénario d'un symbole de bouton pour créer des boutons animés.
Flash : les Symboles Page 2 sur 15 MASTER IPM EAD 2007­2009 J.C. Tarby L’imbrication de symboles est infinie (par exemple un clip dans un clip dans un bouton dans un clip…). A vous de savoir ce que vous voulez créer… Dans cette partie de cours, nous n’aborderons que les symboles graphiques, clip et boutons. Les sons seront vus plus tard, et les polices ne seront pas abordées. De même, nous verrons la notion de Bibliothèque, mais nous ne verrons pas les bibliothèques et les symboles partagés. Ces derniers sont des fonctionnalités augmentant encore plus la réutilisabilité des animations, mais ils sont plus du ressort des Flasheurs que des IPM.
Flash : les Symboles Page 3 sur 15 MASTER IPM EAD 2007­2009 J.C. Tarby 3 Symbole graphique Un symbole graphique est un symbole qui est censé ne contenir que du dessin. Si vous regardez l’exemple « Bébé flash » vu dans la partie précédente, vous pourrez vérifier les types des symboles utilisés. Pour vérifier cela facilement :
· ouvrez le fichier « Bébé flash.fla »
· puis ouvrez LA bibliothèque de l’animation « Bébé flash » par le raccourci CTRL+L ou la touche F11 ou par le menu Fenêtre>Bibliothèque (et non pas Fenêtre>Bibliothèques communes qui contient des éléments directement utilisables dans Flash, à vous de les découvrir par vous­mêmes). Vous obtenez alors le panneau ci­dessous (cf. Figure 1) que vous pouvez placer avec les panneaux de droite pour optimiser la place. N.B : Chaque animation a sa propre bibliothèque qui regroupe tous les symboles (graphiques, clips, boutons, images, sons…) utilisés dans l’animation. Cette bibliothèque est incluse dans le fichier fla.
· La bibliothèque affiche le nom du fichier FLA associé (ceci est intéressant car vous pouvez ouvrir plusieurs bibliothèques en même temps si vous avez ouverts plusieurs FLA par exemple, et vous pouvez par simple drag&drop réutiliser des symboles d’une bibliothèque dans une autre 1 ). La bibliothèque affiche également le nom et le type de chaque symbole (notez les icônes associées aux types), ainsi que d’autres informations qui ne nous intéressent pas ici. Quand un symbole est sélectionné, vous voyez son aperçu en haut de la bibliothèque (dessin réduit pour un symbole graphique, le son sous forme d’ondes pour un son, …). Si le symbole a plus d’une image dans son scénario, vous aurez en plus un bouton play et un bouton stop en haut à droite dans l’aperçu. Figure 1 : la bibliothèque de « Bébé flash » Nous allons maintenant créer un symbole graphique et voir comment l’utiliser. 1 Si vous faites un copier­coller d’un élément (par exemple un bouton qui contient 3 clips) depuis la scène de l’animation A sur la scène de l’animation B, Flash copie automatiquement dans la bibliothèque de B le symbole bouton et les 3 symboles clips associés.
Flash : les Symboles Page 4 sur 15 MASTER IPM EAD 2007­2009 J.C. Tarby 3.1 Exercice : Dérapage incontrôlé But : utiliser des interpolations de mouvement (et non plus des interpolations de forme) pour faire déraper une voiture, puis créer un accident entre 3 voitures. Les résultats à atteindre sont montrés dans « dérapage final.swf », puis dans « dérapage final 2.swf ». Avant de voir comment faire cet exercice, commençons pour une fois par voir ce qu’il ne faut pas faire ! Ouvrez le fichier « dérapage mauvais.fla » et jouez l’animation. Inutile de dire que le résultat n’est pas celui escompté. Mais pourquoi cela ? Rappelez­vous que les interpolations de forme (représentées par les flèches vertes dans le scénario) transforment des formes en d’autres formes (un rond en carré par exemple). Or, pour le moment, la voiture n’est qu’un ensemble de formes ; vous pouvez le vérifier facilement car en cliquant sur l’auto, elle se « grise » à l’intérieur. Vous pouvez par conséquent déformer la voiture (comme montré sur la Figure 2) en « tirant » sur ses bords ou en déplaçant des morceaux. Si c’était un symbole, un clic sur la voiture afficherait un rectangle autour de la voiture. Dans le contre­exemple « dérapage mauvais.fla », Flash « éclate » donc la voiture pour passer de la forme « voiture horizontale » à la forme « voiture verticale ». Il ne sait pas que ces deux formes sont le même dessin pour vous. La 1 ère interpolation (celle à l’horizontale) fonctionne quant à elle sans problème puisque les deux formes sont les mêmes. Figure 2 : la voiture initiale et déformée Pour réaliser « dérapage final », il faut commencer par transformer le dessin de l’auto en symbole graphique sur lequel nous pourrons ensuite appliquer des interpolations de mouvement qui se contenteront de déplacer la voiture sans la faire « exploser ». N.B. : les interpolations de mouvement permettent de déplacer des symboles, en les faisant éventuellement se déformer (agrandissement/réduction), tourner (rotation), etc., mais les occurrences au début et à la fin de l’interpolation doivent impérativement être issues du même symbole. Pour créer l’interpolation de mouvement de la voiture :
· ouvrez « dérapage.fla »
· sélectionnez TOUTE la voiture et convertissez­la en symbole graphique (et non pas clip ou bouton) avec la touche F8 ou le menu Modification>Convertir en symbole. Nommez­la « auto » par exemple ;
· réalisez une interpolation de mouvement sur 3 images clés. La 1 ère montre la voiture à droite, la 2 nde montre la voiture au centre, et la 3 ème montre la voiture en bas à gauche et se dirigeant vers le bas (outil de dessin Transformation libre à utiliser pour la rotation). Pour
Flash : les Symboles Page 5 sur 15 MASTER IPM EAD 2007­2009 J.C. Tarby l’interpolation entre les images­clés 2 et 3, j’ai choisi une rotation vers la gauche dans les propriétés. Maintenant que vous avez compris le principe, vous comprendrez facilement comment « dérapage final 2 » a été réalisé. Il suffit de créer des calques supplémentaires et de copier le symbole « auto » sur chaque calque, puis de faire les interpolations de mouvement associées. 3.1.1 Compléments 3.1.1.1 Mode de lecture des symboles graphiques Si vous regardez les propriétés d’une occurrence de symbole graphique, vous verrez qu’elle peut se jouer de différentes façons : une seule fois, en boucle, une seule image, et on peut également choisir la première image. Ceci vous permet par exemple d’avoir plusieurs occurrences se jouant différemment : une qui se joue en boucle en commençant à son image 5, une autre qui se joue une seule fois, etc. 3.1.1.2 Accélération / Décélération perfectionnées Concernant les interpolations de mouvement, on peut jouer également sur les accélérations/décélérations comme vu précédemment avec l’exercice du billard, mais on peut aller bien au­delà. Regardez par exemple l’animation « déplacement bizarre.fla » et jouez­la. Curieux, non ? Pour voir comment ceci est fait avec une seule interpolation de mouvement, sélectionnez une image de l’interpolation (l’image 20 par exemple), regardez les propriétés et cliquez sur le bouton « modifier » à côte de la zone « Accélération ». Vous obtiendrez une fenêtre qui vous permettra de faire des animations plus poussées. Voici la copie écran des deux paramètres que j’ai modifiés ici. Pour mon animation, j’ai demandé une rotation vers la gauche dans l’interpolation de mouvement, puis j’ai modifié l’accélération comme ci­dessous.
Flash : les Symboles Page 6 sur 15 MASTER IPM EAD 2007­2009 J.C. Tarby Figure 3 : Modification des positions Figure 4 : Modification de la rotation
Flash : les Symboles Page 7 sur 15 MASTER IPM EAD 2007­2009 J.C. Tarby 4 Symbole clip Un symbole clip (souvent appelé clip tout court, ou encore « movie clip ») est une sorte de sous­animation Flash. Son scénario se joue indépendamment du scénario principal, mais avec la même cadence de lecture. Les clips sont utilisés pour montrer des sous­animations qui se répètent (par exemple des nuages qui passent dans le ciel, ou un personnage qui pédale 2 comme sur la Figure 5), ou pour piloter des objets par ActionScript (ce que nous verrons plus tard). Figure 5 : Exemple de clip dans une bibliothèque 4.1 Exercice : Vol d’oiseaux dans les nuages Nous allons utiliser les clips pour donner, à terme, l’impression de voir deux oiseaux voler dans les nuages. Le résultat final est « oiseauX final ». Nous allons commencer par réaliser « oiseau final » (sans X) que je vous invite à regarder en version SWF avant de démarrer. Vous constaterez que l’oiseau semble venir vers vous en battant des ailes. Etapes à suivre :
· ouvrez « oiseau.fla » et regardez le contenu de la bibliothèque, et le contenu du clip « oiseau » (double­cliquez sur l’icône à gauche du nom du clip). Cf. Figure 6… 2 Ne cherchez pas ce fichier FLA, il ne vous a pas été donné.
Flash : les Symboles Page 8 sur 15 MASTER IPM EAD 2007­2009 J.C. Tarby Figure 6 : Le clip « oiseau » et son scénario
· revenez sur la scène principale et placez ce clip en haut à gauche de la scène principale (était­ce utile de le préciser ?). Puis créez une interpolation de mouvement avec une autre image­clé contenant ce même clip en bas à droite de la scène. Pour créer la 2 nd occurrence, soit vous reprenez le clip depuis la bibliothèque, soit vous faites un copier­coller à partir de la 1 ère occurrence.
· cliquez sur le clip de la 1 ère image­clé et demandez le menu Modification>Transformer>Redimensionner et faire pivoter, puis choisissez 10% pour l’échelle ;
· dans les propriétés de ce même clip, prenez Couleur>Alpha et mettez la valeur à 0% ; l’oiseau devient transparent (opacité = 0%).
· pour voir le résultat réel, vous devez demander à tester l’animation (CTRL+ENTREE) car sinon vous ne verrez que le déplacement de l’oiseau et pas ses battements d’aile (c’est une limite de Flash). A présent, vous pouvez imaginer comment faire le vol de plusieurs oiseaux dans des nuages. Consultez le fichier « oiseauX final.fla » ; vous verrez que j’ai utilisé des symboles graphiques, des clips, des clips dans des clips, etc. Tout ceci est bien sûr perfectible, mais cet exemple a pour but de vous montrer que l’on peut tout combiner à l’infini !
Flash : les Symboles Page 9 sur 15 MASTER IPM EAD 2007­2009 J.C. Tarby Figure 7 : Exemple de clips 4.2 Exercice optionnel : un mini système solaire Si vous voulez tester votre niveau d’assimilation des concepts associés aux symboles graphiques et clips, je vous propose un exercice optionnel dont je ne vous donne que l’énoncé et la solution en fichier FLA. But : réaliser une mini système solaire tel que celui montré dans « système solaire final.swf ». Pensez que la Terre et la Lune tournent sur elles­mêmes, que la Lune tourne autour de la Terre et la Terre avec la Lune autour du soleil. Cela signifie que vous devez faire en sorte que les planètes passent tantôt devant tantôt derrière. Pour montrer les rotations des planètes, j’ai utilisé un nuage pour la Terre et un cratère pour la Lune. Figure 8 : Le mini­système solaire Remarques :
· pour le moment, faites des interpolations simples (c'est­à­dire linéaires, des orbites en losange par exemple), vous pourrez améliorer les orbites des planètes dans quelques temps quand nous aurons vu les guides de mouvement.
· pour parfaire le résultat, il est important d’avoir des animations de longueurs proportionnelles afin d’éviter des décalages. Par exemple, si le clip Terre dure 21 images,
Flash : les Symboles Page 10 sur 15 MASTER IPM EAD 2007­2009 J.C. Tarby chaque fois que le clip Terre est utilisé ailleurs, il devra apparaître pendant 21 images pour être sûr que les raccords seront parfaits. La solution est dans « système solaire final.fla ». Vous avez également deux autres version : « système solaire final plus fluide.fla » et « système solaire final plus fluide (tordu).fla ». Le premier a été un peu plus travaillé (vitesse de lecture, nombre d’images, interpolation pour le soleil, agrandissement des planètes,…), et le second reprend le premier en l’intégrant dans un clip qui lui­même a une interpolation de mouvement. Quand je vous disais qu’on peut imbriquer à l’infini, vous comprenez mieux maintenant ? Note qui peut vous rendre beaucoup de services : pour récupérer une animation et la transporter ailleurs (par exemple dans un clip), sélectionnez les images qui vous intéressent sur le scénario (par exemple sélectionner toutes les images entre l’image 10 et l’image 25, et ce sur plusieurs calques en même temps !), puis clic droit sur cette sélection du scénario, choisir « copier les images », puis déplacez­vous dans le scénario cible (par exemple celui d’un clip d’une autre animation), cliquez sur une image, puis clic droit et choisissez « coller les images ». Cela aura pour effet de recréer le scénario, y compris les calques associés, et d’importer dans la bibliothèque tous les objets associés aux images que vous avez copier­coller. Puissant, non ?
Flash : les Symboles Page 11 sur 15 MASTER IPM EAD 2007­2009 J.C. Tarby 5 Symbole bouton Les symboles « bouton », appelés plus couramment boutons, sont généralement utilisés avec du code ActionScript puisqu’ils ont pour objectif de déclencher des actions. Nous verrons la programmation prochainement, mais nous pouvons déjà voir ici comment créer des boutons sur le plan graphique. Avant de passer aux exercices, regardez « exemples de boutons final.swf » ; il vous montre quelques exemples de boutons. Ceux du haut sont issus de la bibliothèque commune des boutons livrés avec Flash 3 (menu Fenêtre> Bibliothèques communes>Boutons). Ceux du bas ont été faits entièrement. Notez que l’ampoule peut être allumée en cliquant sur le rond vert, sur la croix bleue ou … sur du vide ! Pourquoi ? la solution est dans la constitution des boutons comme nous allons le voir maintenant. Note : je vous ai mis un exemple d’utilisation du slider (ancien bouton Flash) qui s’appelle « utilisation du slider.fla ». Comme indiqué, il contient du code ActionScript que je vous invite à ignorer pour le moment. Revenez sur cet exemple quand vous aurez suffisamment avancé dans la programmation ActionScript. Figure 9 : des exemples de boutons 5.1 Créer un bouton La structure des symboles « bouton » est différente des symboles graphiques et clips, c’est pourquoi cette partie explique comment créer un bouton. Avant toute chose, il faut savoir qu’un bouton a 4 états : (a) position haut, c'est­à­dire quand le bouton au repos, (b) position dessus quand la souris est dessus, (c) position abaissé quand on enfonce le bouton avec la souris, et (d) une zone « cliquable ». Nous allons faire un bouton qui sera bleu au repos (position haut), vert quand la souris est dessus, et rouge quand on clique sur le bouton. La version finale est dans « un bouton final ». Pour réaliser ce bouton, vous devez :
· demander à créer un nouveau symbole avec le menu Insertion>Nouveau symbole ou le raccourci clavier CTRL+F8.
· donner un nom à ce futur bouton, et choisissez le type bouton. 3 Certains sont issus de versions anciennes de Flash, et n’existent plus dans les versions actuelles, voire même ne se programment plus de la même manière…
Flash : les Symboles Page 12 sur 15 MASTER IPM EAD 2007­2009 J.C. Tarby · Après avoir validé, vous devez obtenir un scénario particulier tel que celui présenté sur la Figure 10. Ce scénario est particulier puisqu’il ne comporte que quatre images, une par état précédemment énoncé. Dans chacune de ces images, vous pouvez placer des dessins, des symboles graphiques, des symboles clips, et éventuellement des sons dans les 3 premières images. Figure 10 : le scénario d’un nouveau bouton
· Commencez par dessiner un rectangle bleu au centre de la scène (dans mon exemple, j’ai demandé un rectangle avec des bords arrondis pour faire plus joli). Vous pouvez utiliser la fonction Aligner (CTRL+K) de Flash qui est très puissante et qui permet d’aligner des objets par rapport à la scène, ou des objets entre eux.
· Appuyez ensuite sur F6 pour insérer une image clé pour l’état « dessus ». Ceci a pour effet de dupliquer l’image du bouton ; il vous suffit alors de changer la couleur de remplissage de bleu en vert.
· Procédez de même pour l’état « abaissé », et remplacez le vert par du rouge.
· Ne faites rien pour l’état « cliquable » (la cellule doit rester vide, même pas une image clé vide (cf. Figure 10)
· Revenez à la scène principale et déposez ce bouton sur la scène par drag&drop depuis la bibliothèque.
· Vérifiez que les boutons sont activés directement dans Flash, c'est­à­dire que dans le menu Contrôle la commande activer les boutons simples doit être cochée. Quand cette commande n’est pas cochée, vous pouvez sélectionner les boutons comme de simples symboles ; dans le cas contraire, les boutons réagissent comme des boutons.
· Testez le bouton soit directement dans Flash (puisque la commande est maintenant activée), soit en mode Shockwave (CTRL+ENTREE). Nous pouvons maintenant améliorer le réalisme de ce bouton en ajoutant simplement une forme simulant l’ombre du bouton, et en décalant la position du bouton quand on clique dessus (cf. le fichier « un bouton ombré final »). Remarquez à cette occasion l’optimisation pour l’ombre ; étant donné qu’elle est toujours au même endroit, une seule image clé suffit pour le calque (vous y avez pensé avant moi ? J). Voyons maintenant à quoi correspond l’état « cliquable ». La colonne correspondante définit la zone dans laquelle la souris doit être placée que le bouton réagisse. Si cette colonne n’est pas remplie, Flash va automatiquement trouver la plus grande zone, c’est­à­dire la zone qui recouvre à la fois les états « haut », « dessus » et « abaissé ». Par contre, si vous dessinez une zone dans cette colonne, seule cette zone permettra de déclencher le bouton. Cette zone peut donc être sur le dessin du bouton, ou complètement à côté du dessin du bouton. C’est ce que j’ai fait avec l’exemple de l’ampoule. Le bouton « lampe » contient une zone cliquable qui est à gauche du culot de l’ampoule. Lorsque j’ai placé le bouton « lampe » sur la scène, j’ai simplement dessiné sur la scène un rond vert ou une croix bleue à l’emplacement de cette zone cliquable (ces dessins ne servent à rien pour le bouton, ils ne servent qu’à l’utilisateur pour repérer la zone à cliquer). De cette manière, il est possible d’avoir des boutons qui réagissent de façon identique, mais avec des déclencheurs visuels différents. Astucieux, non ?
Flash : les Symboles Page 13 sur 15
MASTER IPM EAD 2007­2009 J.C. Tarby Et que pensez­vous de boutons pour lesquels certains états seraient vides ? Réfléchissez­ y… J et… faites des essais… J
Flash : les Symboles Page 14 sur 15 MASTER IPM EAD 2007­2009 J.C. Tarby 5.2 Exercice : une boussole But : créer un bouton correspondant à une boussole (cf. Figure 11). Au repos, l’aiguille est orientée au nord (bleu en haut). Quand la souris est sur le centre de l’aiguille (et uniquement sur ce petit rond noir !), l’aiguille tourne en permanence (sans marquer de temps d’arrêt ! 4 ). Quand on clique sur le centre de l’aiguille, l’aiguille se fige au sud (bleu en bas). Figure 11 : la boussole au repos La solution est dans « boussole finale.fla » et une autre version dans « boussole finale améliorée.fla » 4 Encore une petite astuce pour Flash… Avez­vous trouvé ou compris comment j’ai procédé pour supprimer le temps d’arrêt que vous avez certainement dû rencontré ? Une solution avec de l’ActionScript serait plus facile, mais c’est trop tôt J
Flash : les Symboles Page 15 sur 15