Flash CS5. A - L environnement auteur de Flash

1 Flash CS5 L objectif de cet apprentissage CS5 est de comprendre les concepts utilisés par le logiciel, et la manière dont il travaille. La description des outils ne sera donc pas exhaustive. Les différents paragraphes font souvent appel à la réalisation d un exemple pratique. On trouvera en ressource l exemple réalisé. A - L environnement auteur de Flash Flash est un logiciel auteur multimédia. A ce titre, il offre la possibilité, dans un environnement auteur, d intégrer et d animer, notamment par l interactivité, les différents types de médias : l image fixe (vectorielle ou bitmap) ou animée (dont la vidéo), le texte, le son. Il permet en outre la création de dessins vectoriels. 1 - L interface du logiciel Lancer l application, puis sous Créer sélectionner ActionScript 3.0 pour ouvrir l interface. L interface auteur de Flash comporte plusieurs types de fenêtres: - la scène, qui contient une représentation spatiale des éléments visuels de l animation à un instant donné. Son ouverture est automatique, sans passer par le menu Fenêtre. Et, sont accessibles par le menu Fenêtre : - le scénario, qui contient une représentation temporelle de l animation - les bibliothèques qui contiennent certains objets de l'animation. - les fenêtres Outils, Propriétés, Aligner, Couleur, Infos, Nuanciers, Transformer, qui contiennent les outils de création ou de modification des éléments graphiques - les fenêtres de gestion de la programmation (Actions, Comportements, Débogueur, ). - les composants et autres panneaux. 2 - La scène, les séquences La scène est une représentation spatiale des éléments de l animation, à un instant donné. Par défaut, Flash créé automatiquement une scène. Cette scène n'est pas accessible par le menu fenêtre. Dans le menu Fichier, sélectionner Nouveau. On pourra également utiliser l'équivalent clavier Ctrl + N sur plate-forme Windows, ou Commande ("Pomme") + N sur plate-forme MacOS. Enregistrer la nouvelle animation sous le nom "Séquences" dans un dossier où nous regrouperons tous les éléments que nous utiliserons. Pour pouvoir tester le fonctionnement des animations, celles-ci doivent être enregistrées sur le poste de travail. Dans le menu Modification, sélectionner Document. Paramétrer la largeur de l'animation à 300 pixels et la hauteur à 100px. Choisir une couleur de fond. Notons que Flash fixe par défaut une cadence de lecture à l animation ; la cadence de l animation peut être modifiée (ex : 24 ips). Une animation peut être constituée de plusieurs Séquences. Dans la fenêtre Outils, sélectionner l'outil d'édition de texte ("T"), cliquer sur la scène : un champ d édition de texte est créé, Dans la fenêtre Propriétés (menu Fenêtre puis Propriétés) choisir des paramètres typographiques (police, style, taille, couleur ). Dans le 2ème menu déroulant en haut, sélectionner Lecture seule. Entrer le texte "Séquence1" dans le champ d édition de texte sur la scène. Sélectionner l'outil de sélection (flèche noire) dans le panneau 1

2 Outils. Sur la scène, recentrer l'objet (nous reviendrons sur la notion d objet) contenant le texte. Redimensionner la taille de l objet à l aide de l Outil Transformation libre de la fenêtre Outils. Dans le menu déroulant fenêtre, sélectionner Autres Panneaux/Séquence. Cliquer sur l icône en bas et à gauche du panneau Séquence («Ajouter une séquence»). Une nouvelle scène nommée "Séquence2" est créée. Elle peut être renommée: double cliquer sur le champ du nom et entrer un nouveau. C est une façon générale de renommer les éléments dans Flash. La Séquence2 est affichée, ainsi que son scénario (Fenêtre/Scénario). Créer un texte " Séquence2" sur la scène. Dans le menu déroulant Contrôle, sélectionner Tester l animation (ou raccourci clavier CTRL+Entrée). La fenêtre de test s ouvre (fichier au format swf). Les séquences sont lues successivement et dans l'ordre descendant du panneau Séquence. L'ordre des séquences peut être modifié en sélectionnant leurs icônes et en les glissant clic maintenu verticalement dans le panneau. Le glisser-déposer est fréquemment utilisé dans l interface. Relancer le test de l animation. Le test de l animation créé un fichier swf dans le même dossier que le fichier.fla (fichier source de l exercice). Cette utilisation des séquences peut parfois améliorer le confort de travail dans l'environnement auteur, mais elle est le plus souvent abandonnée dans la gestion des animations avec la programmation ActionScript. Elles peuvent servir pour l organisation du travail pour les graphistes. 3 - Le scénario Le scénario est une représentation temporelle de l animation. Il comporte une ligne de temps ou timeline, représentée par une règle graduée. La tête de lecture, représentée par le rectangle rouge, se déplace selon cette ligne, lorsque des Images sont insérées. Sous cette timeline, des calques sont disposés verticalement. (Cliquer sur le symbole «Nouveau calque» en bas et à gauche de la fenêtre Scénario pour en ajouter un. Le sélectionner et cliquer sur la corbeille en bas à gauche de la fenêtre pour le supprimer). L ordre des calques peut être modifié par simple glissé vertical. Les calques peuvent être renommés et regroupés par dossiers (icône «Nouveau dossier» en bas à gauche). L ordre d empilement est l ordre de visibilité dans l animation, le calque le plus en haut dans le scénario étant l élément de 1 er plan. Chaque numérotation de l échelle horizontale de la timeline correspond à une Image. Ici, le sens d'image est différencié de son sens habituel qui désigne une représentation graphique. La notion d'image est ici unité de temps du scénario. Quand la tête de lecture se trouve sur une Image, elle lit l'ensemble des éléments contenus dans les calques présents à cet instant, visuels et non visuels: représentations graphiques, sons, éléments de programmation Il existe trois types d'images pouvant être insérées dans le scénario: - Images-clés vides - Images-clés. - Images : il s agit ici de la continuité temporelle des Images-clés, vides ou non. 2

3 Créer une nouvelle animation. La position 1 du scénario, ou Image 1 contient un rectangle vide dans la première cellule. C'est une Image-clé vide, un conteneur pouvant recevoir des objets, visuels ou non (son, éléments de programmation ). Sélectionner l'outil Rectangle de la boîte à outils, choisir une couleur de contour et une couleur de remplissage dans les outils couleurs de la boîte à outils, et tracer un rectangle sur la scène. Une puce noire se trouve alors placée dans l image 1 du scénario. Elle symbolise une Image-clé. L'Image-clé vide que nous avions précédemment se trouve affectée d'un contenu (le rectangle tracé sur la scène). Cliquer sur la cellule de l'image 12 du scénario et dans le menu Insertion/Scénario, sélectionner Image (ou appuyer la touche F5). Une bande grisée occupe les cellules de 1 à 12. La visualisation du rectangle est étendue sur 12 images, soit 1 seconde si la cadence de l'animation est de 12 Images par secondes. Cliquer sur la cellule 12 et insérer une Image-clé (menu Insertion/Scénario/Image-clé, ou F6). L'Image-clé créée permet de modifier le contenu à l image 12 du scénario : sélectionner le rectangle sur la scène, puis dans la fenêtre Outils/Couleurs, choisir une couleur de remplissage différente. Le rectangle est rempli par la couleur choisie. Lancer la lecture par le contrôleur. Enregistrer le fichier sous le nom formes.fla dans le dossier de travail. B Formes, groupes, interpolations: Les formes: Le rectangle que nous avons créé précédemment est une «Forme». C est un objet élémentaire de Flash. (Pour une description systématique des outils de Formes de la fenêtre Outils nous nous reporterons au menu Aide de Flash). Les propriétés des formes peuvent être modifiées à partir des panneaux Outils, Propriétés, Aligner, Couleur, Info, Nuancier et Transformer. Tester les différents panneaux et les différentes propriétés. Création d'une interpolation de forme(s): Sélectionner l Image-clé 12 et appuyer sur la touche retour. Le contenu est effacé. L Imageclé est devenue une Image-clé vide. Cette Image-clé vide étant toujours sélectionnée, tracer sur la scène un rond de couleur (outil Ovale avec la touche Majuscule maintenue) à une position quelconque sur la scène. Sélectionner la première Image-clé ou la bande grisée entre les positions 1 et 12, et sous le menu déroulant Insertion (ou clic droit de la souris), sélectionner Interpolation de Forme. Une flèche apparaît dans le calque entre la position 1 et la position 12. Déplacer la tête de lecture dans le scénario. Les paramètres de couleur, de forme géométrique, de taille et de position sont transformés progressivement. Une interpolation de Formes est une transformation des propriétés d Objets Formes. (tester interpolation en modifiant différent paramètre : géométrie, couleur ). Cette interpolation peut intervenir entre une forme et plusieurs formes : sélectionner l image-clé 12 et ajouter des formes. Le texte peut être converti en Forme. Ajouter un texte, le sélectionner avec l outil de sélection, puis sous Modification, sélectionner une première fois Séparer. Chaque caractère 3

4 devient alors un bloc d édition. Ces blocs d édition peuvent être à leur tour «séparés» (Sélectionner puis Modification/Séparer). Les caractères deviennent alors du type Forme et peuvent supporter l interpolation de formes. Les transformations géométriques intermédiaires des interpolations de formes sont difficiles à prévoir. Flash propose des repères pour fixer des points autour desquels s'effectueront les modifications. Sélectionner la première Image-clé. Sous le menu Modification, sélectionner Forme/Ajouter un repère de forme (CTRL + Maj + H). Un repère de forme apparaît sur l'élément graphique, repéré par une lettre. Si les repères de formes n apparaissent pas, sélectionner Afficher les repères de formes dans le menu Affichage). Répéter l'opération de manière à obtenir plusieurs repères : a,b,c. Déplacer ces repères sur les contours du graphique de l Image-Objet 1. Sélectionner l Image-clé 12. Placer les repères sur le contour de la Forme. Tester l'animation. Les groupes: Créer une nouvelle animation nommée groupe.fla Tracer deux formes. Choisir l'outil de sélection, cliquer à l'extérieur de la surface occupée par les deux formes, et tirer le rectangle de sélection de manière à encadre les deux formes. Sous Modification, sélectionner Grouper. Les deux formes sont associées et un tracé rectangulaire de couleur représente l'enveloppe du groupe ainsi créé. La géométrie des groupes peut être modifiée avec l outil Transformation Libre du pan- -neau Outils, et des panneaux Propriétés, Aligner, Info, et Transformer. Tester les différentes modifications de propriétés. Création d'une interpolation de mouvement: Sélectionner la cellule 10 du calque et créer une Image-clé. Déplacer et modifier les propriétés du groupe (position, dimensions dans le panneau Info). Sélectionner la première Image-clé. Dans le menu Insertion (ou clic droit), sélectionner Interpolation classique. Une flèche apparaît dans le calque entre les positions 1 et 10, représentant une interpolation classique. Lire l animation. Pour accéder aux formes dans le groupe, double cliquer sur la scène sur la surface d une des formes qui composent le groupe. Pour Supprimer le groupe, c est à dire revenir ici à deux formes sur la scène, sélectionner le groupe sur la scène et sous Modifications, sélectionner Dissocier. Attention à ne pas confondre Séparer (voir précédemment la séparation du texte) et Dissocier, action inverse de l association de formes ou d objets autres (association de groupes ou de symboles). Les objets sur la scène sont souvent imbriqués les uns dans les autres, ex : Symboles contenant des groupes, qui contiennent eux-mêmes des formes On peut «descendre» dans la sélection des objets imbriqués par sélection et double clic sur les objets, et cliquer en dehors des objets pour «remonter» dans l imbrication. Le chemin de la sélection est affiché en haut et à gauche de la scène, à droite de l icône de la séquence. 4

5 L erreur commune consiste à confondre l interpolation de Formes, qui concerne EXCLUSIVEMENT les formes, et l interpolation classique qui concerne les groupes et les symboles. C - Les calques de masque et calques de guide de mouvement: Calque de masque : il s applique aux formes, aux groupes et aux symboles. Créer un nouveau fichier. Sur le calque 1, tracer une forme, et une interpolation de forme de manière à ce que l objet traverse l écran latéralement. Créer un nouveau calque (il se positionne au-dessus du calque existant. Dans ce calque, tracer un rectangle centré sur la scène, sur le parcours de la forme du calque1. Ce calque étant sélectionné dans le scénario, cliquer avec le bouton droit de la souris et cocher «masque» dans le menu déroulant (ou appuyer la touche CTRL + clic sous MacOS). Tester l animation. Le calque 1 est masqué par le calque masque. Les formes tracées dans le calque masque sont «les trous» du masque. Observer la disposition et les icônes des calques dans le scénario. (voir fichier Masque.fla) Calque guide de mouvement : Le calque de guide de mouvement permet d accrocher des interpolations classiques sur des trajectoires. Dans un calque, créer un symbole ou un groupe (une forme simple peut être groupée), et lui appliquer une interpolation classique. Sélectionner le calque et dans le menu déroulant sous le clic droit, sélectionner «Ajouter un guide de mouvement classique». Ce nouveau calque apparait au-dessus du précédent, décalé vers la gauche. Sur le calque de guide créé, tracer dans la 1ere image clé-vide une trajectoire à l aide de l outil crayon. Le contenu de ce calque ne sera pas visible dans le fichier édité. Dans le menu déroulant Affichage puis Accrochage, vérifier que Aligner par accrochage, Accrocher aux guides et Accrocher aux objets, sont bien sélectionnés. Sélectionner la première image-clé de l interpolation classisue en cliquant sur son centre (ce centre est alors symbolisé par un petit cercle) et «l Accrocher» sur le début de la trajectoire du calque de guide. Faire de même pour la 2 ème image-clé de l interpolation. Déplacer la tête de lecture. L interpolation suit la trajectoire. L interpolation étant sélectionnée dans le scénario, observer les options du panneau de Propriétés, et tester «Orienter vers la trajectoire». (voir fichier Guide.fla). D - Les symboles : Les formes et les groupes ne figurent pas dans la bibliothèque de l animation. Flash permet de créer des objets appelés Symboles, qui sont caractérisés par trois types de comportements : - Clip d'animation - Bouton - Graphique Ces symboles seront accessibles par la bibiothèque. Créer une animation nommée «Symboles». 5

6 Symboles Graphiques: Créer une forme sur le calque 1. Sélectionner la forme sur la scène, et sous Modification sélectionner Convertir en symbole. Un menu s'ouvre permettant de choisir le type de Symbole souhaité (Clip, Bouton ou Graphique). Cocher Graphique. Le symbole a été créé dans la bibliothèque. On pourra le renommer. Ce symbole peut être utilisé d une manière démultipliée dans l'animation, chaque utilisation dans le scénario est une Occurrence (ou Instance) du symbole. Les Propriétés de cette Instance peuvent être modifiées, sans modifier pour autant les propriétés du symbole. Tester les modifications des propriétés du symbole graphique (fenêtre Propriétés, Outil Transformation libre). Le symbole graphique possède son propre scénario, mais ce scénario ne supporte pas le code ActionScript et sa tête de lecture est dépendante de celle du scénario sur lequel il est imbriqué. (voir fichier Graphique.fla). Son scénario est accessible par double-clic sur l icône dans la bibliothèque. Symboles Boutons: Sous Insertion, sélectionner Nouveau symbole : Bouton L'interface graphique du bouton s'ouvre sur la scène. Créer une forme. Le scénario du bouton s'est ouvert simultanément à sa création. Ce scénario décrit trois événements du curseur de la souris: Haut (position de «repos»), Dessus (survol) et Abaissé (appui) La quatrième Image du scénario intitulée Cliqué permet de définir la surface de sensibilitée du bouton en traçant une forme, qui peut en effet être différente des formes affectées aux Images précédentes du scénario du bouton. Les éléments graphiques de l Image Cliqué du scénario Bouton ne seront pas visibles dans l'animation éditée. Si l on souhaite conserver la surface de sensibilité du bouton à son graphisme, il n est pas nécessaire de renseigner cette cellule. Pour créer un bouton invisible, on définira la zone sensible dans cette 4 ème image, sans définir de graphie dans les images Haut, Dessus et Abaissé. Les images du scénario du bouton sont analogues à celle du scénario principal : Images-clés, Images, Images-clés vides... Créer un élément de texte contenant le mot "Bouton" à la position Haut du scénario. Insérer une image-clé à la position Dessus et modifier le texte en "Survol", Modifier la taille et la couleur du texte. Créer une Image-clé à la position Abaissé et modifier le texte en "Clic". Cliquer sur l'icône Séquence 1 en haut et à gauche de la scène pour revenir à la timeline principale. Le symbole Bouton est créé dans la bibliothèque. Les éléments de la bibliothèque peuvent être renommés dans le champ qui apparaît quand on double clique sur le nom de cet élément. Nommer le symbole «monbouton» Les occurrences ou instances, les 2 termes sont équivalents de boutons sont reconnues par ActionScript lorsqu elles sont nommées. L'instance du bouton sur la scène étant sélectionnée, entrer «boutonalert» dans le champ contenant <Nom de l occurence> du panneau Propriétés. C est le nom de l instance du bouton qui sera identifiée par ActionScript. Ce nom doit comporter un seul mot sans espace, et ne doit pas commencer par un chiffre ni contenir un caractère spécial (#, *,% ) ou diacritique (ç, é, è, à ). Si plusieurs instances du même 6

7 symbole bouton sont placées dans le scénario, chaque instance devra porter un nom différent (boutonalert 1, boutonalert 2 ). (voir fichier Bouton.fla). Symboles Clip: Créer un symbole Clip. Ce symbole à la particularité de posséder son propre scénario qui offre des fonctionnalités identiques à celles du scénario principal, et qui peut échanger des données avec le scénario principal et avec les autres clips. Sa tête de lecture (à la grande différence de celle du symbole graphique) est indépendante de celle du scénario principal. Les instances de clips sont reconnues par ActionScript. Son scénario est accessible par double-clic sur le nom du symbole dans la bibliothèque, ou par double-clic sur l occurrence sur la scène principale. Dans un nouveau symbole clip, tracer une forme. Cette forme est positionnée dans le scénario du clip. Revenir au scénario principal. Renommer «monclip» le symbole clip créé dans la bibliothèque, et placer ce symbole sur un nouveau calque. L utilisation de ce Symbole dans le scénario est une instance de ce symbole. L'instance du clip sur la scène étant sélectionnée, entrer «clipalert» dans le champ contenant <Nom de l occurrence> du panneau Propriétés. Ce nom sera identifié par ActionSscript. Ce nom doit comporter un seul mot sans espace, et ne doit pas commencer par un chiffre ni contenir un caractère spécial (#, *,% ) ou diacritique (ç, é, è, à ). Si plusieurs instances du même symbole clip sont placées dans le scénario, chaque instance devra porter un nom différent (clipalert 1, clipalert 2 ). (voir fichier Clip.fla). Modifications des propriétés des symboles: Les propriétés des symboles peuvent être modifiées à partir du menu Propriétés, ou de l outil Transformation libre du menu Outils, ainsi que par les fenêtres Aligner, Couleur, Infos, Nuanciers, et Transformer. Les symboles Graphique, Bouton et Clip supportent les interpolations de mouvement. Les interpolations de mouvements sont plus attractives avec les symboles qu avec les groupes. Les symboles peuvent contenir d autres symboles. Les propriétés des instances de clips et de boutons pourront être modifiées par le code ActionScript (à la différence des symboles Graphiques). 7