1

Sommaire

1 Introduction6 Les panneaux9 Sélections d’objets11 Dessiner, transformer, déformer16 Symboles et occurrences20 Les calques23 Texte Forme24 Les boutons30 Les sons31 Interpolations (guides de mouvement)37 Programmation avec ActionScript44 Raccourcis-clavier, liens

Réal. Joël Leporcq CDDP des Zardennes

Tutoriel basé sur la version 6.0 de Macromedia Flash MX

2

Flash MX : introduction

Flash est un logiciel qui est destiné à réaliser des fichiers (au format swf) à intégrer dans des pages HTML au même titre que des images Gif ou Jpeg. Ces fichiers présentent des animations. Cela peut aller de la simple animation de formes géométriques à la réalisation de dessins animés interactifs. Certaines animations peuvent contenir de l'interactivité ou bien ne pas en avoir. Pour celles qui en ont, cela peut aller de simples boutons qui permettent d'établir une navigation d'image en image jusqu'à la réalisation d'applications utilisant de la programmation orientée objet .L'intégration de fichiers au format "swf" nécessite l'ajout d'un plug-in au navigateur afin de visualiser ce type de fichier. Les navigateurs sont aujourd'hui pour la plupart capables de lire des pages contenant des fichiers au format swf version 6.0.

Puissance de Flash :Le logiciel est pensé au départ pour réaliser des animations. C'est au cours des différentes versions que la possibilité croissante d'ajouter de l'interactivité fait son entrée. Aujourd'hui, Flash MX présente un degré de programmation très avancé.

Spécificité des fichiers SWFC'est de présenter un poids de fichier relativement léger. Il utilise les courbes de Bezier pour le tracé des différentes formes. Les figures et animations créées par Flash sont donc vectorielles, ce qui permet une transmission optimale par Internet. Il en va de même pour ce qui concerne la conception d’animations à l’aide de symboles et d’occurrences.

Ce logiciel n’est pas uniquement fait pour créer des fichiers à destination du web. En effet, il est possible de créer desvisionneuses, permettant ainsi une lecture autonome des fichiers swf sans faire appel à un navigateur.

On ou Off-line ?

3

Exemple de page Web incluant une animation Flash

Voici un exemple d’animation Flash, telle que vue par le visiteur de votre site. Ici, un bouton déclenche l’éparpillement de particules dans la page …

Le source de la page montre uniquement le nom du fichier SWF, son identification auprès de Windows, le site permettant éventuellement de télécharger le lecteur Flash et divers paramètres d’affichage.Tout ceci (le code HTML appelant l’animation) est écrit par Flash lui-même lors de la publication de l’animation.

4

Lorsque vous ouvrez l’environnement Flash, la création d'un nouveau document génère une nouvelle scèneavec une nouvelle Bibliothèque (« Fenêtres/Bibliothèque »). Les différents objets que vous utiliserez pour vos animations sur la scène se trouvent au départ dans la bibliothèque et s'appellent des symboles. Lorsque vous placez un symbole sur la scène, la représentation graphique du symbole s'appelle alors une occurrence. Si vous placez plusieurs fois un symbole sur la scène, toutes les occurrences obtenues seront alors indépendantes les unes des autres (un symbole n’existe que dans la bibliothèque). La modification d'un symbole engendre en revanche une transformation automatique de toutes ses occurrences. Le contrôle du déroulement de votre animation passe par la fenêtre du Scénario. Enfin, une multitude de panneaux vous permettront de paramétrer votre animation.

Principes

la scène

occurrences d’un même symbole

un symbole dans la bibliothèque

Le scénario (ou ligne du temps)

la barre d’outils

5

Le scénario

Le scénario, ou timeline, est donc la partie de l'interface qui est consacrée au contrôle de vos animations. Vous pouvez comparer chaque cellule (sur un même calque) de ce scénario à une image d’un film.

Il est conseillé de ne pas garder la vitesse de déplacement de la tête de lecture proposée par défaut (12 images/s) mais de la régler par exemple sur 24 images/s. Pour ce faire, accédez aux propriétés du document, en double-cliquant sur la zone indiquant la vitesse de défilement.

Chaque couche du scénario, ou calque, est censé contenir le scénario spécifique à un « acteur », objet concerné par l’animation, ou simple décor statique. Un calque peut ne contenir que du code ActionScript. Dans ce cas, ce calque sera situé de préférence au sommet de la pile des calques, car étant lu, lors du déroulement de l’animation, en premier.

6

Le scénario - les calques

Ainsi que les logiciels de graphisme, Flash utilise les calques. Ce sont autant de couches sur lesquelles on peut travailler indépendammant les unes des autres. Ce qui permet de se concentrer sur l’objet concerné par les modifications sans risque d’interférences.

Les calques sont visibles dan la fenêtre du Scénario. Le calque actif est en surbrillance. L’icône du crayon indique que l’on peut modifier ce calque. Pour sélectionner un autre calque, il suffit de cliquer dessus.

Si vous sélectionner un objet de la scène, le calque contenant cet objet devient aussi actif.

Changer l’ordre d’empilement des calques permet de faire changer un objet de plan. Aucun effet de connexion ni de segmentation ne peut se produire dans le cas d’objets appartenant à des calques différents.

Lorsque votre animation contient un nombre important de calques, vous pouvez alors regrouper certains calques dans un même dossier.

L’œil : permet d'afficher ou masquer un calque

Le verrou : permet de verrouiller un calque. Vous ne pouvez plus éditer le calque (placer ou créer des éléments sur la scène, ni déplacer, ni même supprimer quoi que ce soit sur ce calque).

Le carré : permet de visualiser les calques en mode tracé. Vous ne voyez alors plus que le contour du contenu des calques

7

Insérer un calque, créer des dossiers de calques

Dans la fenêtre Scénario, cliquez sur la calque au-dessus duquel vous souhaitez en ajouter un, puis cliquez sur le bouton « Insérer un calque » dans le coin inférieur gauche de la fenêtre Scénario …

Le nouveau calque vide apparaît et l’on peut commencer par le renommer en double-cliquant sur son nom.

Vous pouvez dessiner dans ce nouveau calque. Mais afin de faciliter et de rendre plus sûre cette étape du travail, vous pouvez à l’aide des icônes du Scénario masquer ou verrouiller d’autres calques

Les dossiers pouvant contenir des calques et d'autres dossiers, vous pouvez organiser les calques de la même manière que vous organisez les fichiers de votre ordinateur. Les outils du scénario relatifs aux calques s'appliquent à tous les calques d'un même dossier. Par exemple, le verrouillage d'un dossier de calques entraîne le verrouillage de tous les calques qu'il contient.

Si vous cliquez sur l’œil qui se trouve en haut de la colonne de points, vous masquez/affichez tous les calques d'un seul clic. De même pour le verrou et le mode tracé.

8

Calques de masque

Soient deux calques. Celui du dessous contenant une image destinée à être masquée, celui du dessus une forme pleine.

On indique à Flash que la forme doit être utilisée comme masque à l’aide du clic droit sur son calque.

Le calque de masque laisse apparaître la zone correspondant aux calques liés inférieurs, situés sous la forme remplie et cache toutes les autres zones. Les calques de masque contiennent uniquement une forme, une occurrence ou un objet de type unique.

Calque de masque

Calque masqué

9

Le scénario – les pelures

Gestion des calques :Supprimer un calque.Créer un dossier afin de regrouper un ou plusieurs calques.Ajouter (associer) un guide de mouvement à un calqueCréer un nouveau calque

Les « pelures d’oignon » permettent, lorsque le scénario s’étend sur plusieurs images, d’apercevoir, par transparence, les images précédant et suivant celle où se trouve la tête de lecture.Les 2 premiers boutons vous permettent en effet d'afficher les images qui suivent et précèdent l'image en cours. Le 3ème et dernier permet d'afficher uniquement les images-clés. Vous pouvez ainsi combiner un affichage des images-clés avec les images intérmediaires et régler par exemple une animation image par image …

Options de visualisation :

10

Le long du scénario, s’égrènent les images au fil du temps.Certaines d’entre elles sont dites « images-clés ». Ce sont les images où le concepteur a décidé qu’une modification aurait lieu, qu’une information serait apportée.

Le scénario – images et images-clés

L’utilisateur peut convertir une image en image-clé par le menu du clic droit du scénario.

Les autres images, statiques, sont calculées par Flash, soit simplement copies de la précédente image-clés, soit résultat d’une interpolation de mouvement ou de forme …

Image statique, éventuellement calculée par Flash

Image-clé, contenant un ou plusieurs objets

Image-clé vide

Image-clé, contenant un ou plusieurs objets et du code ActionScript

Image-clé vide, contenant du code ActionScript

11

Les panneauxL’interface de Flash fait appel à de nombreux panneaux qu'il est possible de déplacer et d’ancrer. Vous pouvez personnaliser votre interface en masquant les panneaux que vous n'utiliserez jamais ou pas très souvent. Vous disposerez autour de votre écran ceux que vous utiliserez quotidiennement. Le premier problème auquel vous devrez faire face est relatif à la gestion de la surface de votre écran.

Ne déplacez pas vos panneaux. Essayez de leur trouver une disposition que vous garderez.

Configurations mémorisables :Si vous souhaitez mémoriser la disposition de vos panneaux (car vous travaillez à plusieurs sur un poste ou disposez d'un portable que vous branchez à un moniteur, etc.) vous pouvez faire appel à la commande « Fenêtre », « Enregistrer la disposition des panneaux … » qui vous permet de donner un nom à la disposition courante et de la retrouver plus tard par « Fenêtre », « Jeux de panneaux ».

Les indispensables :

Hormis la Scène et le Scénario, ce sont :

La bibliothèque. C'est la fenêtre qui contient les différents symboles que vous utiliserez pour la composition et la création de vos animations.

La barre d'outils. Elle rassemble tous les outils qui vous

permettront de créer vos

animations.

L'inspecteur des propriétés se modifiant en fonction de l'outil ou de l'actif avec lequel vous travaillez, il vous permet d'accéder rapidement aux fonctions fréquemment utilisées :

12

Manipulation et organisation des panneaux

Les panneaux peuvent être ouverts par le menu Fenêtres. La plupart des panneaux contiennent un menu déroulant comprenant des options supplémentaires. Le menu Options est indiqué par une commande placée dans la barre de titre du panneau. Si aucune commande d'option n'apparaît, ce panneau n'offre aucune option spécifique.

Pour cacher/montrer tous les panneaux ouverts, utilisez la touche Tabulation

Les panneaux se déplacent par la poignée située sous la barre de titre.Ils se réduisent ou se développent par un clic dans leur titre :

Pour ajouter un panneau à un groupe de panneaux : Faites glisser le panneau par sa barre de titre pour le placer sur un autre panneau.

13

Conseils

Des bibliothèques trompeuses :Tous les composants de vos animations se retrouveront au même endroit appelé la "Bibliothèque". Si vous lisez parfois Librairie au lieu de Bibliothèque, sachez qu’il s’agit de la même chose . La confusion provient de la traduction du terme d’origine "Library" qui a été traduit par " Bibliothèque " et non "Librairie". Attention : chaque animation possède sa propre bibliothèque et elle s’affiche à l’écran sur votre demande par la sélection de la commande "Bibliothèque" du menu "Fenêtre"  (ou raccourci Ctrl + L). Elle ne se fermera que si vous la fermez ou lorsque vous quitterez le logiciel. Si vous avez donc une animation et sa bibliothèque ouvertes au moment où vous créez une nouvelle animation, sachez que la bibliothèque que vous avez sous les yeux est celle de l’animation qui se trouve derrière celle que vous venez de créer. Il faut que vous ouvriez vous même la bibliothèque de cette nouvelle animation. De cette façon, vous pouvez avoir plusieurs bibliothèques ouvertes pour une animation mais une seule y est rattachée. Celle qui a un fond de bibliothèque grisé n'est pas celle de l'animation de premier plan.

Vos objets doivent être des symboles :Si vous importez ou vous créez un "objet" dans votre animation, tant que vous ne l’avez pas transformé en symbole, il ne figurera pas dans la bibliothèque et son utilisation restera limitée. C’est pourquoi il est fortement conseillé de transformer tout ce que vous faites en symbole.La touche de fonction F8 est celle qui vous permettra de transformer une sélection (import sélectionné, un dessin sélectionné…) en un symbole. Utilisez aussi la commande « Fichier, Importer dans la Bibliothèque ».

Les clips ne sont visibles qu’en mode de prévisualisation :Vous utiliserez dans vos animations des objets animés appelés « Clip ». Ces derniers ne seront visualisables qu’en effectuant le raccourci clavier CTRL + Entrée. De même que les boutons.

Quelle taille de scène choisir ?Vous devez uniquement respecter le rapport du format que vous voudrez obtenir. La taille en elle-même n’a pas d’importance, car Flash fonctionne en vectoriel. Ce qui permet d’agrandir ou rétrécir la scène sans perte de qualité.

14

Forme non sélectionnée

Contour sélectionné

Fond sélectionné

Fond et contour sélectionnés

Groupe sélectionné

Sélection d’objets

Pour modifier un objet, vous devez d'abord le sélectionner. Macromedia Flash MX fournit diverses méthodes pour sélectionner un objet, telles que les outils Flèche et Lasso et les commandes clavier. Vous pouvez grouper des éléments pour les manipuler comme un objet unique. Flash met en évidence à l'aide de pointillés les objets et les traits qui ont été sélectionnés. Les groupes sélectionnés sont encadrés avec la couleur utilisée pour le contour du calque qui contient le groupe sélectionné

Lorsque vous sélectionnez un objet, l'inspecteur des propriétés affiche son trait et son remplissage, ses dimensions en pixels, et les coordonnées x et y de son point de transformation.

Vous pouvez utiliser l'inspecteur des propriétés sur une forme pour changer le trait et le remplissage de l'objet. Vous avez également la possibilité d'éviter qu'un groupe ou un symbole ne soit sélectionné et accidentellement modifié. Pour ce faire, il suffit de verrouiller le groupe ou le symbole (Modification, Réorganisation, Verrouiller).

15

L’outil Flèche (ainsi que le Lasso) est utilisé pour sélectionner une forme, une ligne, un remplissage, afin de pouvoir les modifier.

Sélection des lignes et des formes

Un clic avec la Flèche sur cette forme ne sélectionne en fait que son remplissage. La Flèche pouvant être utilisée pour déplacer l’objet sélectionné, on voit ici que seul le remplissage était bien sélectionné.

Pour sélectionner à la fois le bord et le remplissage, il faut effectuer un double-clic dans la forme. De même, lorsque vous ferez un double clic sur une ligne, toutes les lignes adjacentes seront sélectionnées.

Vous pouvez aussi opérer une sélection quelconque en maintenant la touche Maj enfoncée pendant que vous cliquez, afin de sélectionner plusieurs remplissages ou plusieurs lignes.

Enfin, vous pouvez tracer un rectangle avec l’outil Flèche, et englober toute une forme, ou plusieurs, dans une même sélection, afin de pouvoir les modifier …

Ces différentes méthodes de sélection peuvent être combinées.

16

Dessiner et peindre : Crayon, Pot de peinture et Pinceau

Les outils de dessin classiques sont disponibles et permettent le tracé de figures géométriques sur la scène : ligne, rectangle, ellipse.

Lorsque vous sélectionnez un outil, ses modificateurs apparaissent dans la zone Options de la barre d’outils

La section Couleurs de la barre d’outils vous permet de choisir rapidement une couleur de remplissage ou une couleur de trait :

L’outil Crayon permet, grâce à ses modificateurs, de redresser ou d’adoucir les lignes tracées …

Quant à l’outil Pinceau, ses modificateurs permettent de l’utiliser pour remplir, peindre derrière, à l’intérieur, …

L’outil Pot de peinture remplit les espaces fermés, et ses modificateurs tolèrent les surfaces plus ou moins bien fermées

17

L’outil Flèche permet également de déformer les lignes d’une forme. En approchant d’une forme (non sélectionnée), l’outil Flèche indique ce qu’il peut faire : déplacer un sommet ou une ligne …

Outil Flèche : lisser, redresser ou déformer

Avec les modificateurs de l’outil Flèche :

Modificateur Lisser

Modificateur Redresser

Si le modificateur Ajuster de l'outil Flèche est activé, un petit anneau noir apparaît sous le pointeur lorsque vous faites glisser un élément. Cet anneau s'agrandit lorsque l'objet se trouve à distance d'ajustement d'une ligne de grille. Par exemple, si vous déplacez une forme remplie en la faisant glisser vers son centre, le point central s'ajuste sur les lignes de grille et les autres éléments. Ceci est particulièrement utile pour ajuster les formes sur les trajectoires de déplacement lors de la création d'effets animés.

18

Outil Transformation librePour déplacer la sélection, placez le pointeur au-dessus de l'objet dans le cadre de sélection et faites-le glisser. Ne faites pas glisser un point de transformation.

Pour définir le centre de pivotement ou de redimensionnement, faites glisser le point de transformation vers un nouvel emplacement.

L'outil Transformation libre ne permet pas de transformer les symboles, bitmaps, objets vidéo, sons, dégradés, groupes d'objets ou le texte.

Les Options de l’outil Transformation libre permettent de redimensionner, pivoter, tordre, ou modifier l’enveloppe d’une forme ou de texte converti en formes.

19

Segmentation ou regroupement des formes sélectionnées

Une opération de sélection peut permettre ensuite de segmenter une figure :

Deux formes de même couleur que l’on fait se chevaucher se regroupent une fois désélectionnées …

Deux formes de couleurs différentes que l’on fait se chevaucher se segmentent une fois désélectionnées …

Pour éviter la segmentation, utiliser la commande « Modification », « Grouper »

20

Zoomer

Vous serez amené au cours de votre travail à zoomer sur différentes parties de votre scène. Prenez l’habitude dès à présent de double-cliquer sur l’outil de la loupe ou de la main pour récupérer votre affichage à une taille réelle ou une taille écran.

Liste des zooms prédéfinisLa loupe :

La loupe et la touche Alt :

Tracé du rectangle à zoomer avec la loupe :

La barre d’espacement ramène la main :

21

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 ne fonctionnent pas dans la séquence d'animation d'un symbole graphique.

Symboles et occurrences - définitions

Un symbole est une image, une animation, ou un bouton. Une occurrence est l’instance d’un symbole sur la scène. Les symboles simplifient la création d’animation, et permettent de réduire la taille des fichiers. Ils sont également nécessaires à l’implémentation d’interactivité sophistiquée.

Pour créer un symbole d’après un objet, sélectionnez l’objet concerné de la scène, puis utilisez la commande « Insertion », « Convertir en symbole », ou le clic droit sur l’ojet, ou le raccourci clavier F8 …

Chaque fois que vous créez un symbole, vous devez déterminer son comportement en fonction de la façon dont vous souhaitez l'utiliser dans l'animation.

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 du bouton, puis vous affectez des actions à une occurrence du bouton

Les clips possèdent leur propre scénario à images multiples qui est lu indépendamment du scénario de l'animation principale. Un clip est une petite animation à l'intérieur d'une animation principale, pouvant contenir des contrôles 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

L'utilisation de symboles dotés d'animation permet de créer des animations avec beaucoup de mouvement, tout en limitant la taille de fichier. Pensez à créer de l'animation dans un symbole lorsque l'action est répétitive ou cyclique, comme les battements d'ailes d'un oiseau, par exemple.

22

Modifier une occurrence - taille, inclinaison, couleur

Le fantôme sur la scène est maintenant une occurrence du fantôme de la Bibliothèque …

Chaque animation possède sa propre bibliothèque.

Une fois que vous avez créé un symbole, vous pouvez placer des occurrences de ce symbole où vous le souhaitez dans l’animation.

Vous pouvez modifier l’inclinaison ou l’échelle des occurrences d’un symbole à l’aide de l’outil Transformation libre.. Et la couleur des occurences à l’aide de l’Inspecteur des propriétés :

23

Modifier un symbole (1)

Vous pouvez modifier une occurrence indépendamment des autres. Vous pouvez aussi modifier un symbole, ce qu modifiera automatiquement toutes les occurrences de ce symbole …

Pendant que vous modifiez un symbole, le reste de l’animation s’estompe et le symbole seul apparaît. C’est le mode d’édition des symboles.

Pour ce faire, choisissez une occurrence, et appelez la fonction « Édition », « Modifier les symboles ». Vous obtenez le même résultat en double-cliquant sur le symbole concerné dans la Bibliothèque.

Toutes les occurrences du symbole sont affectées par les modifications au niveau du symbole, mais les variations individuelles des occurrences, effets de couleur, taile et orientation, subsistent.

Ici, la taille des yeux du symbole « Fantôme » a été modifiée et on en a supprimé la bouche. Modifications répercutées sur toutes les occurrences du symbole.

24

Modifier un symbole (2)

Flash permet de modifier les symboles de trois manières différentes :

Modifier le symbole par rapport aux autres objets de la scène à l'aide de la commande Modifier en place. Les autres objets apparaissent en grisé pour les distinguer du symbole que vous modifiez. Le nom du symbole que vous manipulez est affiché dans une barre d'information, en haut de la scène, à droite du nom de la séquence courante.

Vous pouvez aussi modifier un symbole dans une autre fenêtre, à l'aide de la commande Modifier dans nouvelle fenêtre. La modification d'un symbole dans une autre fenêtre vous permet de visualiser à la fois le symbole et le scénario principal simultanément. Le nom du symbole que vous manipulez est affiché dans une barre d'information, en haut de la scène.

Modifier : vous modifiez le symbole en changeant la fenêtre de façon à ne plus afficher la scène mais seulement le symbole (dans le mode d'édition de symbole). Le nom du symbole que vous manipulez est affiché dans une barre d'information, en haut de la scène, à droite du nom de la séquence courante

25

Ajouter du texte, le convertir en formes

Flash permet de saisir du texte, de le formater (taille, fonte, couleur, …) de le transformer comme un objet, de le diviser en formes. La saisie se fait dans un bloc de texte, redimensionnable par sa poignée.

L’Inspecteur des propriétés permet d’ajuster les caractéristiques du texte au niveau de ses fonte, taille, couleur, alignement, d’y associer un hyperlien, …

La conversion d’un texte en formes permet de le manipuler comme objet graphique (déformation, remplissage, etc.) mais ne permet plus ensuite de le modifier, de le corriger, comme texte :

Ceci s’obtient par la comande « Modification », « Séparer », le bloc de saisie étant sélectionné (outil Flèche). Flash convertit le texte en courbes et sélectionne celles-ci

Suite à quoi il devient possible de modifier chaque forme, selon ses lignes ou son remplissage …

Vous pouvez mettre en forme plusieurs blocs de saisie simultanément, pour peu qu’ils soient sélectionnés (outil Flèche).

Y compris avec les options de l’outil Transformation libre :

26

Les boutons - création

Les boutons sont en réalité des clips interactifs composés de quatre images. Lorsque vous sélectionnez le comportement de bouton pour un symbole, Flash crée un scénario avec quatre images. Les trois premières images affichent les trois différents états du bouton et la quatrième définit la zone active du bouton. En réalité, le scénario du bouton n'est pas joué séquentiellement, il réagit simplement aux mouvements et aux actions du pointeur en se plaçant sur l'image appropriée.

Flash bascule en mode édition de symboles.

Choisissez Insertion > Nouveau symbole. Dans la boîte de dialogue Propriétés du symbole, entrez le nom du nouveau symbole de bouton et dans Comportement, choisissez Bouton.

Pour créer l'image du bouton dans un état Haut, utilisez les outils de dessin, importez un graphique, ou placez l'occurrence d'un autre symbole sur la scène (dans un bouton, vous pouvez utiliser un symbole graphique ou un symbole de clip, mais vous ne pouvez pas utiliser un autre bouton dans un bouton. Si vous souhaitez créer un bouton animé, utilisez un symbole de clip.

L'en-tête du scénario change pour afficher quatre images consécutives intitulées Haut, Dessus, Abaissé et Cliqué. La première image, Haut, est une image-clé vide

27

Cliquez sur la deuxième image, intitulée Dessus, et choisissez Insertion > Image-clé

Répétez les étapes 5 et 6 pour les images Abaissé et Cliqué (Si vous ne spécifiez pas d'image pour l'état Cliqué, l'image de l'état Haut sert alors d'image pour l'état Cliqué)

Vous pouvez maintenant revenir sur la scène et créer une occurrence du bouton.

Les boutons - création et test

Remplacez l'image du bouton par l'état Dessus.

Les clips et les boutons ne sont pas réactifs dans l'environnement de création de Flash. Pour tester une animation, et donc ce bouton, utilisez la commande « Contrôle », « Tester la scène » (raccourci-clavier : Ctrl + Entrée ).

28

Les boutons - utilisation des pelures d’oignon

Ici, un bouton est créé au moyen de trois images-clés contenant chacune une forme dessinée.

L’image-clé « Cliquable », lorsqu’elle contient une forme, utilise celle-ci comme frontière de sensibilité du bouton (i.e. la zone réceptive au clic).

Afin de pouvoir se guider sur les images-clés précédentes, vous pouvez utiliser l’option « Contours de pelures d’oignon », qui laisse distinguer par transparence les contours des images précédentes :

La même technique pourrait être employée par exemple pour la création d’une animation image par image.

29

Les boutons - ajouter un son

Sélectionnez le bouton dans la bibliothèque.

Sélectionnez Modifier dans le menu Options de la bibliothèque, ou par le clic droit, ou par un double clic sur le symbole …

Dans le Scénario du bouton, ajoutez un calque

Dans le calque (audio), créez une image-clé normale ou vide correspondant à chaque état du bouton pour lequel vous souhaitez définir un son. Par exemple, pour ajouter un son lu à chaque fois que l'utilisateur clique sur le bouton, créez une image-clé dans l'image intitulée Cliqué.

Cliquez sur l'image-clé que vous venez de créer et dans l’Inspecteur des propriétés, choisissez le son voulu, qui doit avoir été importé dans la Bibliothèque (Fichier, Importer dans la Bibliothèque).

Choisissez Événement dans le menu déroulant Sync.

Pour associer un son différent à chacune des images-clés du bouton, utilisez une image-clé vide et ajoutez un fichier audio différent pour chaque image-clé. Vous pouvez aussi utiliser le même fichier audio et appliquer un effet audio distinct pour chaque image-clé du bouton

30

Les boutons - ajouter une action

Lorsqu’il faudra associer une action au clic sur le bouton, ceci se fera dans le panneau Action de l’occurrence du bouton dans la scène.On aura pris soin de sélectionner, dans les options d’affichage du panneau Actions, le mode Expert, qui permet une plus grande souplesse dans la saisie des scripts :

Ici, l’action devant répondre au clic sur le bouton a été ajoutée au script du bouton :

Le résultat du clic sur ce bouton pourra être testé par le contrôle de l’animation (raccourci-clavier : Ctrl + Clic).

31

Convertir le comportement d’un objet ?

Supposons que vous souhaitiez déclencher une action (ex : envoyer un mail) lorsque le visiteur clique sur un texte ou un graphique …Or, Flash n’autorise pas les actions sur ce type d’objet. Seuls les clips, les boutons, les images du scénario peuvent recevoir des actions.

Flash permet de convertir l’objet sélectionné en symbole (clic droit). Ici, choisissez Bouton comme type de comportement du nouveau symbole. Et vous aurez accès aux actions les occurrences de ce nouveau bouton.

N’oubliez pas de modeler le nouveau bouton par son scénario (image « Cliquable » notamment).

32

Les sons continus – Extension de l’animation

Hormis les sons produits par les évènements des boutons, Flash peut faire jouer un son en continu. Ce dernier est émis tant que dure le calque qui le contient (sons d’arrière-plan).

Il est plus facile d’utiliser des sons en les conservant sur des calques distincts. Ajoutez donc un calque destiné à contenir le son qui sera joué en continu :

Vous pouvez placer plusieurs sons dans un même calque ou dans des calques contenant d'autres objets. Cependant, il est conseillé de placer chaque son dans un calque distinct. Chaque calque se comporte comme une piste audio distincte. Les sons de l'ensemble des calques sont combinés à la lecture de l'animation.

Afin de faire durer l’animation (elle ne compte qu’une image) il nous faudra ajouter une image suffisamment loin, tant ici pour le calque image que pour le calque son …

Le son doit exister dans la Bibliothèque, il doit y avoir été importé (Fichier, Importer dans la Bibliothèque).

Avec le nouveau calque audio sélectionné, faites glisser le son depuis le panneau Bibliothèque jusqu'à la scène. Le son est ajouté au calque courant. L’Inspecteur des propriétés vous permet de définir des effets sur le son :

33

Animation interpolée et images-clés - simple déplacementL’animation interpolée est une technique qui consiste à déplacer un objet sur la scène, modifier sa taille, sa couleur, sa forme. Pour définir une animation interpolée, on créée dans Flash des images-clés, qui sont les images où se situeront les points importants de l’animation, ceux par exemple où l’objet animé subira une modification. Les images-clés apparaissent sous forme de cercles dans les images du scénario. Flash ensuite comblera les vides entre les images-clés pour créer l’animation en continu …

L’objet à animer étant sélectionné, au début d’un scénario supposé contenir un nombre suffisant d’images, choisissez la commande « Insertion », « Créer une interpolation de mouvement ». Flash trace alors une ligne pointillée dans l’espace disponible du calque.

Sélectionnez l’image de la fin de l’animation interpolée et placez dans la scène l’objet à la place qu’il devra occuper à ce moment.

L’image que vous interpolez dans une interpolation de mouvement doit être un symbole (ou un groupe).

Flash insère automatiquement une nouvelle image-clé à la fin de l’animation et remplace la ligne pointillée par une ligne continue. L’interpolation est créée.

Nouvelle image-clé

Dernière apparition de l’image-clé précédente

34

Interpolation de taille et de rotation - ajout d’images-clésLorsque vous sélectionnez une image-clé du scénario, l’image de la scène est également sélectionnée, et les modifications que vous lui apporterez concerneront uniquement cette étape de l’animation.

Afin de transformer l’occurrence, vous pouvez faire appel à l’outil Transformation libre

Puis, vous pouvez, d’un clic droit sur la piste du scénario, créer l’interpolation de mouvement et Flash interpolera, de la première image à la dernière, l’animation en mouvement, taille et rotation …

Vous pouvez aussi bien ajouter des images-clés pour procéder par étape et combiner dans le temps différentes déformations, trajets, …

Taille

Déplacement et rotation

35

Guides de mouvementFaire suivre un parcours complexe, bien que possible à l’aide d’images-clés, est beaucoup plus facile à l’aide d’un guide de mouvement.

L’ajout d’un guide de mouvement sur un calque se fait simplement par le bouton présent dans le scénario :

L’étape suivante est le dessin du chemin dans le calque du guide, avec l’outil crayon.

Souvenez-vous que vous pouvez, à l’aide de la flèche, déformer les lignes ou déplacer les sommets, de même que lisser les courbes à l’aide des modificateurs de la flèche …

Cliquez sur « Ajuster aux objets » dans les options de la flèche :

Il faut ensuite créer l’interpolation de mouvement et caler l’abeille au-desus de chaque extrémité du chemin dans les images de début et de fin …

Vous pourrez ensuite cacher le calque du guide de mouvement.

36

Interpolation de couleurs - Méthode générale pour une interpolation de mouvement

Interpoler un effet de couleurs s’opère de manière similaire.

Création d’une interpolation de mouvement entre deux images-clés. Puis, sur l’image de fin, faire apparaître le panneau Effet et jouer sur la teinte, la luminosité, la transparence …

2. Placez une occurrence sur la scène mais surtout sur un calque vide 3. Sélectionnez une image éloignée (sur ce même calque) dans le scénario 4. Insérez une image à cet endroit (F5)5. Sélectionnez la commande « Créer l’interpolation de mouvement  » (clic droit)6. Convertir en image-clé la dernière position de l’animation 7. Déplacez, modifiez, l’occurrence dans la dernière image (la seconde image-clé)

Attention, il est important de comprendre qu'une interpolation doit se faire entre deux occurrences du même symbole et que celles-ci doivent être seules sur leur calque.

Options d'une interpolation de mouvements :

Lorsque vous réalisez une interpolation de mouvement, vous avez la possibilité de régler la vitesse de transformation (déplacement, rotation, etc...).

Méthode générale pour créer une interpolation de mouvement (déplacement, rotation, déformation, effets de couleur)

37

Interpolation de formes

L’interpolation de formes, à la différence de l’interpolation de mouvement, ne peut se faire sur une occurrence de modèle ni sur un groupe. Elle n’opère que sur des graphiques non groupés. Utilisez « Modification », « Séparer » pour appliquer l'interpolation de forme dans les autres cas.

Quand vous aurez créé les deux images-clés, la seconde contenant la forme modifiée, ou une autre forme, il suffit de choisir Interpolation : Forme dans le panneau Image …

1 Première image-clé, première forme non groupée

2 Seconde image-clé, seconde forme non groupée

3 « Interpolation » « Forme » dans l’Inspecteur des propriétés de la permière image-clé

C’est tout

38

Réalisation d’une interpolation de mouvement avec un calque de masque (exemple)

L’image du calque « Fleur terne » restera visible quoi qu’il arrive. On peut même la verrouiller. L’image du calque suivant, « Fleur » sera en revanche partiellement masquée. Pour bien aligner les images entre elles et avec la scène, utilisez l’Inspecteur de propriétés.

Ajoutez un nouveau calque au-dessus du calque destiné à être masqué.Créez-y une forme.

Enfin, déclarez, à l’aide du clic droit, ce calque « Masque ». Lors de l’animation, l’image de fond reste constamment visible, et seule l’image du deuxième calque est masquée par la forme le long de son chemin.

NB : le calque masqué et le calque masque sont automatiquement verrouillés par Flash. Si vous voulez apporter une modification, déverouillez-les, mais n’oubliez pas de les reverrouiller pour que le masque fonctionne …

Dans le calque de la forme, crééez une interpolation de mouvement quelconque.

39

Programmer une animation Flash

Programmer consiste en l’écriture d’instructions qui seront exécutées par Flash lors du déroulement de l’animation. Ces instructions, ou Actions, seront rédigées dans la fenêtre « Actions », en respectant la syntaxe du langage ActionScript, proche de celle de JavaScript. ActionScript comprend des éléments, tels que des actions, des opérateurs et des objets, que vous pouvez intégrer dans des scripts afin d'indiquer à votre animation ce qu'elle doit faire. Vous configurez ensuite l'animation de manière à ce que les événements (par exemple, un clic sur un bouton ou une pression sur une touche) déclenchent ces scripts.

Avant d'utiliser l'ActionScript, commencez donc par configurer la fenêtre Actions en mode Expert. Ce mode est beaucoup plus souple. Sélectionnez la commande "Mode Expert" via le menu contextuel (en haut à droite) de la fenêtre Actions :

D'un point de vue général, vous avez le choix entre 2 possibilités d'emplacement de scripts. Sur une image-clé ou sur une occurrence (dans ce dernier cas, vous devez faire la différence entre les occurrences de types Bouton ou Clip).

Image-clé vide avec script

Image-clé vide

Image-clé

Image-clé avec script

Scripts sur images-clés : Scripts sur une occurence (utilisation de Gestionnaires) :

40

Programmation avec ActionScript

Dans le cas d'un script placé sur une occurrence, vous devez utiliser un gestionnaire, ce qui n'est pas forcement le cas sur une image clé. Un gestionnaire est chargé de répondre à un type d’évènement pouvant survenir dans la vie de l’occurrence …

Un gestionnaire se compose du mot "on" (que nous pourrions traduire par l'expression « Au moment où ») pour un bouton, ou « onClipEvent » pour un clip, suivi d'un événement écrit entre parenthèses puis d'une paire d'accolades à l’intérieur desquelles sont listées les instructions à exécuter.

Exemple pour une occurrence de bouton :release

rollover

rollout releaseoutside

dragover

dragoutTapez le raccourci ESC - O - N dans la fenêtre des Actions afin d'insérer directement ce gestionnaire (pensez à bien cliquer dans la fenêtre Actions avant d'exécuter ce raccourci).

Les scripts associés à des clips ou à des boutons seront exécutées lorsque l’évènement géré se produira. À cause de cela, les actions onClipEvent (clips) et on (boutons) sont baptisées « gestionnaires ».

Tandis que les scripts associés à une image-clé se déclencheront lorsque la tête de lecture passera sur l’image.

on (press) {  instructions}

41

Séquences et ActionScript

Pour organiser une animation de façon thématique, vous pouvez utiliser des séquences. Par exemple, vous pouvez utiliser des séquences distinctes pour une introduction, un message de chargement ou un générique. Lorsque vous publiez une animation Flash qui contient plus d'une séquence, les séquences de l'animation sont lues dans l'ordre dans lequel elles sont répertoriées dans le panneau Séquence du document Flash.

Vous pouvez ajouter, supprimer, dupliquer, renommer une séquence ou modifier l'ordre des séquences.

Pour arrêter une animation ou la mettre en pause après chaque séquence, ou pour laisser l'utilisateur naviguer dans l'animation de façon non linéaire, vous devrez utiliser des actions, comme stop(), gotoandplay(), gotoandstop() …

on (release) {

GotoAndPlay("Balades", 1);}

Exemple de code sur un bouton faisant passer l’utilisateur sur le première image d’une autre séquence :

42

Exemple de script sur une image - introduire un délai

Ce script, défini sur l’image-clé 2, incrémente le contenu de la variable « a » et retourne jouer l’image 1, tant que a ne vaut pas 48.Cette méthode de temporisation utilise donc la fréquence de l’animation, en images/seconde, pour définir le délai d’atente après lequel l’animation pourra passer à l’image 3.

Structure de test ActionScript :if (condition){faire ceci si vrai}else{faire cela si faux}

Affectation d’une variable en ActionScript :a = 0 ;euros = francs / 6.55957 ;Nom = "Maria" ;

Incrémentation d’une variable en ActionScript :a++ ;

43

Exemples de scripts sur une occurrence de bouton

on (release) {gotoAndPlay("Balades", 1);

}

on (rollOut) {

TxtBalades._visible=0;

}

on (rollOver) {

TxtBalades._visible=1;

ImageBalades.Play(2);

}

Le bouton relâché fera passer à l’image n°1 de la séquence « Balades » :

Occurrence de bouton :

La souris passant sur le bouton fera :- afficher le texte- jouer un clip

La souris sortant du bouton masquera le texte.

Le texte TxtPhotos

Le clip ImageBalades (interpolation Alpha)

44

Exemple - piloter un clip quand la souris passe sur un bouton (1)

Création (Insertion, Nouveau symbole) d’un bouton rudimentaire avec deux images-clés :

Création d’un clip où une même image, d’abord transparente, devient visible, puis redisparaît … (Effet Couleur, Alpha) au moyen d’une interpolation de mouvement et de trois images-clés.

45

Exemple - piloter un clip quand la souris passe sur un bouton (2)

Ici, on a saisi l’instruction Stop(); sur la première image-clé du clip, empêchant celui-ci de s’exécuter au lancement de l’animation.

Programmation du bouton, cette fois. L’évènement « on (rollover) » lançant la lecture du clip à partir de la première image, qui s’arrêtera de nouveau lors de la boucle suivante.

Lorsque le clip est placé sur la scène et que l’animation est testée (Ctrl + Enter), on constate que celui-ci est lancé automatiquement :

Il va donc falloir programmer un arrêt sur sa première image.

46

Raccourcis-clavier - Liens

Quelques raccourcis-clavier à connaître :

F8 : crée un symbole d’après l’élément sélectionné (inséré ou créé avec les outils du logiciel) et l’insère dans la Bibliothèque.F5 : insère une image dans le ScénarioF6 : insère une image-cléCtrl + Entrée : prévisualise l’animationCTRL + & : affiche rapidement la scène à l'échelle 100%

http://www.inook.com/home/cub.html

http://barou.free.fr/epouvantail/

http://www.barou.net/

http://www.viguier.com/

http://www.cbastin.com/

http://www.lt2.fr/

http://www.caroline-marechal.fr/

Quelques adresses, arbitrairement choisies parmi tant d’autres, de réalisations avec Flash. Pages ou sites entiers, personnelles ou professionnelles.

http://www.leschinois.com/fr/haut_debit/home.php

http://www.yazo.net/pages_flash/tablematieres.html

Une formation à Flash MX avec de nombreux exemples :

http://www.nagaoka-id.ac.jp/gallery/gallery.html

http://www.yugo.com

http://www.lexplicateur.com

Une formation à ActionScript :