MASTER IPM EAD 2007200 9 - LIFL - jctarby/cours_flash_master_ipm/1... · 2017-06-15 · Le cours de Flash a pour objectif principal de vous faire découvrir l’animation multimédia

MASTER IPM EAD 20072009 J.C. Tarby

Flash: Introduction et prise en main Page 1 sur 13

MASTER IPM EAD 20072009

Cours Flash

Chapitre 1 : Introduction et prise en main

Dans tous les chapitres du cours Flash, vous aurez pour chaque exercice un énoncé, et pour la solution vous trouverez, dans le fichier zip portant le nom du chapitre, la version finale en SWF et en FLA (« truc final.swf » et « truc final.fla »), et parfois un fichier FLA servant de point de départ (« truc.fla »). Inutile de préciser que la solution en FLA (« truc final.fla ») ne doit être consultée qu’après votre solution ou en cas de blocage… Pour ce chapitre, vous trouverez les fichiers dans « 1_introduction.zip ».

SOMMAIRE 1 OBJECTIFS DU CHAPITRE.......................................................................................................................... 1

2 PREAMBULE.................................................................................................................................................. 2

3 INTRODUCTION............................................................................................................................................ 3

3.1 EXERCICE.................................................................................................................................................. 5

4 LES CONCEPTS FONDAMENTAUX DE FLASH........................................................................................ 7

4.1 COMPOSITION D’UNE ANIMATION FLASH (PREMIERE APPROCHE) ................................................................. 7 4.2 EXERCICE.................................................................................................................................................11

1 Objectifs du chapitre Ce chapitre a pour objectifs de :

vous faire découvrir l’environnement Flash les concepts fondamentaux ainsi que le vocabulaire associé (scénario, scène, imageclé,

etc.), jouer une animation existante, regarder le contenu d’une animation existante.



2 Préambule Avant de commencer le cours, je vous propose une petite récréation. Dans le fichier « introduction.zip », vous trouverez un fichier « Règle de 3.exe ». Exécutez ce fichier pour voir un exemple d’application Flash qui explique aux enfant ce qu’est la règle de 3 (bon exercice typique IPM). Vous devez parfois cliquer sur la scène pour passer à l’écran suivant… Gardez cet exemple en mémoire pour, au fur et à mesure de votre avancée dans ce cours, estimer le temps qu’il faut uniquement pour réaliser ceci en Flash…



3 Introduction Le cours de Flash a pour objectif principal de vous faire découvrir l’animation multimédia avec Flash. Ces animations pourront être placées dans des pages web, utilisées dans des CDROMS, envoyées par email, etc.

Le cours de Flash n’a pas pour objectif de vous expliquer comment faire de belles animations ; ce n’est ni un cours de dessin, ni un cours d’esthétisme ou de design. Je vous expliquerai le fonctionnement de l’outil Flash, je vous donnerai des règles d’usage, des trucs et astuces, mais ça sera à vous de mettre tout ceci à profit au cours de votre formation et de votre vie professionnelle.

Objectifs du cours Flash Vous verrez dans tout au long des chapitres comment créer des animations simples image par image, par interpolation de formes et de mouvements, comment utiliser les symboles, intégrer des sons et de la vidéo, et surtout comment rendre vos animations interactives grâce au langage ActionScript que nous aborderons en 2 temps : découverte (c'estàdire quelques fonctions basiques), puis approfondissement. Vous verrez à ce momentlà qu’ActionScript est un langage puissant qui mériterait un cours à part entière (au moins 40h !), mais il ne vous est pas demandé de devenir des professionnels d’ActionScript. Vous devez être capable à l’issue du cours Flash de réaliser des animations interactives prototypées, c'estàdire servant de démonstrateurs pour vos scénarisations pédagogiques (les interactions complexes sont de plus en plus du ressort des programmeurs Flash, les « Flasheurs » comme on les appelle).

Pour suivre ce cours, vous pourrez utiliser en complément l’aide de Flash (cf. Figure 1) et tout autre support que vous jugerez utile (livres, sites Internet,…). Quelques petites remarques cependant :

les sites internet sont souvent centrés autour de la programmation en ActionScript, et ne sont donc pas les meilleurs points de départ pour les débutants, mais il arrive que certains proposent des cours pour tous niveaux.

je déconseille aux débutants Flash de suivre immédiatement les didacticiels livrés avec Flash (cf. Figure 1). Ceuxci sont très bien, mais ils sont d’une part très verbeux (peu d’images et aucune animation) et d’autre part d’un niveau difficilement abordable pour des débutants (beaucoup d’informations nouvelles en même temps, beaucoup de concepts, etc.). Par contre, n’hésitez pas à les consulter plus tard (tout au long du cours ou après le cours). On dénigre souvent les aides des logiciels, mais cellesci ont bien évolué depuis leurs origines Celles de Flash, même si elle n’est pas très « fun » à lire, contient des multitudes d’informations. Fouillezla au fur et à mesure de votre apprentissage, ne seraitce que pour consulter l’aide associée aux motsclés que vous apprendrez (imageclé, scénario, gotoAndPlay, etc.).

je vous ai fourni un ensemble de vidéos que j’ai réalisées avec Captivate (autre produit Macromedia/Adobe). Cellesci sont classées dans un ordre de progression logique, et vous montrent les bases de la prise en main de Flash. Commencez par les regarder toutes pour avoir un aperçu général, et regardezles de nouveau au fur et à mesure de vos besoins et de votre avancement dans les chapitres 1 et 2. Ces vidéos sont dans le zip « Prise en main de Flash.zip ». Leurs contenus sont :

1. créer un nouveau document Flash (c'estàdire un fichier « .fla ») 2. modifier les paramètres de la scène (taille, couleur, vitesse de lecture,…) 3. manipuler les panneaux de l’environnement Flash, puis créer des calques et les

déplacer 4. afficher et masquer des calques, les verrouiller et les déverrouiller 5. dessiner et déformer 6. créer une interpolation de forme 7. exemples d’options associées aux outils de Flash



Par ailleurs, je vous ai aussi donné des exemples que j’ai récupérés sur le web sur le site http://www.friendsofed.com/catalog.html?books=flash qui propose leurs ouvrages, entre autres sur Flash. J’ai fait un tri dans tout ce qui est téléchargeable pour n’en garder qu’une toute petite partie (vous pouvez récupérer le reste depuis le site http://www.friendsofed.com si vous le souhaitez). Les animations que j’ai gardées sont dans le zip « Exemples de Friends of ED.zip ». Elles ne sont là que pour vous montrer des exemples. La majorité d’entres elles sont d’un niveau supérieur à celui d’un IPM ; ne soyez donc pas découragé si vous regardez le code ActionScript qu’elles contiennent, mais inspirezvous plutôt des symboles utilisés (cf. chapitre 3 pour les symboles), de leur structure en séquences, et dossier de symboles, de la lisibilité du code ActionScript, etc. Pour savoir comment « manipuler » ces animations (les ouvrir, les jouer, etc.), patientez un peu. A la fin du chapitre 3, vous pourrez aller les voir plus en détail. Pour le moment, vos pouvez déjà jouer les « SWF »… (les FLA sont à ouvrir dans Flash). Regardez par exemple l’ébauche « au loup maquette.swf », Figure 2, (qui raconte l’histoire du garçon qui criait au loup), puis sa version finalisée « au loup.swf », Figure 3. Ces deux fichiers sont réalisés sans ActionScipt (donc non interactif), mais on attend le même genre de pratique de la part d’un IPM (prototype interactif non finalisé, mais suffisamment abouti pour avoir une idée du produit final)

Figure 1 : Rubriques d’aide prioritaires si vous débutez en Flash (très nombreuses et très verbeuses)

http://www.friendsofed.com/catalog.html?books=flash

http://www.friendsofed.com/



Figure 2 : Maquette de l’animation « Au loup ! »

Figure 3 : Version finale de l’animation « Au loup ! »

Avant de commencer à travailler avec Flash, il faut savoir que l’interface de Flash est paramétrable. L’ensemble des panneaux peut être réorganisé à volonté. Vous pouvez bouger les panneaux, en ouvrir, en fermer, et même enregistrer votre propre configuration. Reportezvous aux vidéos 1 et 3 si nécessaire.

3.1 Exercice Après avoir créé un nouveau document Flash (menu Fichier>Nouveau document, onglet Général>Document Flash), ouvrez le menu Fenêtre>Présentation de l’espace de travail>Par défaut. Ensuite, ouvrez et fermez les panneaux qui vous intéressent (tous les panneaux sont accessibles par le menu Fenêtre) et réorganisezles de telle façon à avoir au minimum la configuration cidessous (cf. Figure 4). Enregistrez cette configuration (par exemple sous le nom Master IPM) grâce à la commande « Enregistrez la présentation active… » dans le menu Fenêtre>Présentation de l’espace de travail. Ceci ajoutera cette disposition dans la liste proposée par Flash. Vous pouvez ajouter d’autres panneaux si vous le souhaitez bien sûr.



Figure 4 : Configuration minimale proposée pour suivre le cours



4 Les concepts fondamentaux de Flash Il est temps maintenant de voir les concepts fondamentaux de Flash. Reportezvous à la Figure 5 pour le lien avec l’interface Flash. Vous devez charger l’animation « bébé flash.fla » qui se trouve dans le fichier introduction.zip associé à ce document de cours. La Figure 5 a été réalisée avec une ancienne version de Flash, la version MX 2004 Professionnelle, mais vous pourrez constater qu’elle est très proche de celle que vous avez chez vous.

Attention ! les concepts présentés ici sont présentés de façon simpliste afin de « dégrossir » Flash. Il y a des cas particuliers pour beaucoup de ces concepts (par exemple le scénario principal n’a pas le même rôle que le scénario des symboles, un calque peut contenir autre chose que des dessins, etc.). Les détails des concepts seront vus au fur et à mesure du cours.

4.1 Composition d’une animation Flash (première approche) Une animation Flash, quel que soit son format (.swf, .exe, .hqx, .mov), est toujours issue d’un fichier Flash (.fla), appelé fichier source en informatique. Ce fichier .fla est celui que vous créez quand vous travaillez dans Flash, et c’est le seul qui vous permet de modifier votre animation.

Voyons à présent la composition d’un fichier « .fla » (par abus de langage nous appellerons « animation Flash » une fichier « .fla », même si l’animation à proprement dit est le fichier « .swf » issu du « .fla »). Une animation Flash possède un scénario principal, situé dans le panneau de même nom au centre, vers le haut de l’écran. Le scénario peut être affiché/masqué en cliquant sur le mot « scénario » qui joue le rôle de bouton. Le scénario principal peut être découpé en séquences. Une séquence peut être comparé à un chapitre de livre, un acte dans une pièce de théâtre, etc. Les séquences permettent de découper un gros scénario en sousscénarios suivant un ordre qui peut être logique (les chapitres d’un livre s’enchaînent de façon logique) ou purement technique (liées à des contraintes pour la programmation, l’utilisation de symboles, etc.). Sur la Figure 5, la séquence courante s’appelle « page 1 ».

Un scénario est constitué de lignes et de colonnes et peut être vu comme une pellicule de cinéma présentée horizontalement. Chaque colonne représente une image de la pellicule, et chaque ligne représente un niveau de profondeur dans l’image. Ainsi, sur la Figure 5, la tête de lecture est positionnée sur l’image 31 du scénario. Ceci peut être vérifié également grâce aux chiffres qui apparaissent en bas du scénario : 31=n° de l’image courante, 15.0 i/s=15 images par seconde (vitesse de lecture), 2.0s=temps écoulé depuis le début du scénario pour arriver à l’image courante (ici, 30 images déjà lues à 15 images/s = 2 secondes écoulées). Nous verrons plus tard que les images et les calques peuvent contenir non seulement des dessins, mais également des symboles de bibliothèques, des sons, du code ActionScript, etc.

Le scénario indique ce qui doit être joué sur la scène. La scène est l’endroit où se déroule l’animation. Sur la Figure 5, à l’image 31, la scène comporte un bébé, une plage, des parasols, un ciel, une mer. Tous ces éléments sont placés dans des calques (les calques sont les lignes horizontales du scénario). Plus un calque est en haut du scénario, plus son contenu est vers l’avant plan 1 . Ainsi, si le ballon cache la plage, cela signifie que le calque qui contient le ballon est plus haut que le calque qui contient la plage. Vous pouvez constater que sous les calques il y a différentes icônes pour créer des calques, des guides (nous verrons cela dans le

1 Un moyen mnémotechnique pour se souvenir de ceci est de se dire que plus un calque est proche du dessin de l’œil situé audessus des calques, plus il est proche de votre œil, donc du 1 er plan.



chapitre 4), et des dossiers 2 de calques (utiles pour regrouper des calques, et les afficher/masquer en une seule fois).

Chaque calque contient des images (c'estàdire les cellules contenues dans le calque). Voici deux exemples de cellule : Une cellule peut être : • blanche : cela signifie qu’il n’y a pas de dessin à faire afficher, • avec un rond noir : c’est une imageclé, ce qui signifie que le contenu du calque change dans

cette cellule, • avec un rond blanc : c’est une imageclé vide, ce qui signifie que l’on efface le contenu du

calque dans cette cellule, • grise (avec ou sans rectangle blanc) : on affiche la même chose que la dernière imageclé

rencontrée sur le calque. Ainsi sur le calque « Bébé », les images 26 à 32 affichent le même dessin que le contenu de l’imageclé 25. Le rectangle blanc marque la fin d’une suite d’images identiques.

Quelques compléments importants : un calque peut facilement être déplacé vers le haut ou le bas par un simple drag&drop

(glisserdéposer), pour changer l’ordre des plans dans l’image. Reportezvous à la vidéo n° 3 si nécessaire.

un calque peutêtre renommé en doublecliquant sur son nom, ou par un clicdroit, puis Propriétés. Reportezvous à la vidéo n° 3 si nécessaire.

vous pouvez déplacer des images dans les calques, et entre les calques, par drag&drop, mais ces déplacements ont des conséquences que vous comprendrez mieux dans quelques temps, lorsque vous aurez manipulé Flash. Néanmoins, vous pouvez tester ce genre de déplacement, et fermer le fichier « bébé.fla » sans enregistrer les modifications.

un calque peut être verrouillé ou déverrouillé en cliquant sur le calque, à la verticale du cadenas. Dans la Figure 5, tous les calques sont verrouillés. Pour les dé/verrouiller tous en un seul clic, cliquez sur l’icône cadenas, juste à côté de l’œil. Reportezvous à la vidéo n° 4 si nécessaire.

un calque peut être affiché ou masqué en cliquant sur le calque, à la verticale de l’œil. Dans la Figure 5, tous les calques sont affichés. Pour les afficher/masquer tous en un seul clic, cliquez sur l’icône œil. Reportezvous à la vidéo n° 4 si nécessaire.

Astuce Les « Flasheurs » donnent des noms significatifs aux calques, par exemple « plage », « parasols », « ciel bleu », etc. Ceci est très intéressant quand le nombre de calques devient élevé et dès lors que l’on veut travailler en équipe. On connaît ainsi immédiatement le contenu du calque. Les répertoires (ou dossiers) de calques facilitent encore plus cette tâche, par exemple un dossier voiture pourrait contenir des calques « carrosserie », « vitres », « roues avant », etc. Je vous invite à suivre ces pratiques, elles vous feront gagner du temps par la suite. Ainsi, plus tard, vous aurez des calques « action » pour tout ce qui est code ActionScript, « fonctions » pour les fonctions communes à votre animation, « étiquettes » réservé pour les noms d’images, etc.

Pour résumer ces premiers concepts Flash, nous pouvons donc écrire : • 1 animation Flash (fichier « .fla »)= séquences + 1 scène • 1 séquence = 1 scénario associé à des calques • 1 scénario = calques associé à des images

2 Un dossier de calques peut contenir des dossiers de calques. Ce principe est le même que celui des dossiers de votre ordinateur. On le retrouve également dans la bibliothèque des animations Flash pour classer les symboles. Pensezy quand vous lirez le chapitre 3.



• 1 image = image clé (rond noir) ou image clé vide (rond blanc) ou image vide (zone blanche) ou image (zone grise)

et avec un peu d’avance dans le cours, je rajoute : • 1 image peut contenir des symboles ou du code Action Script • 1 symbole = clip (avec son scénario) ou graphique (avec son scénario) ou bouton



Imageclé vide

Imageclé

Tête de lecture

Calques

Séquence courante

Liste des séquences

Liste des symboles

Scène

Temps écoulé

Vitesse de lecture

Image courante

Explorateur d’animations avec affichage des images et

des scripts éventuels

Zooms

Figure 5 : Concepts fondamentaux de Flash (copie écran avec Flash MX 2004 Pro)



4.2 Exercice Avant de faire notre première animation Flash, nous allons « jouer » avec l’animation « Bébé Flash ». Ouvrez le fichier de nouveau si nécessaire (si vous avez modifié quelque chose par exemple). Nous allons commencer par jouer cette animation pour voir ce qui se passe et ce qui est produit. Pour cela, faites les étapes cidessous dans l’ordre indiqué : 1. positionnezvous sur la première image de l’animation en cliquant sur la colonne 1 du

scénario (cliquez sur le chiffre 1). La tête de lecture doit venir se positionner sur cette image 1, et vous devez voir une plage sans ballon ni bébé.

2. Appuyez sur la touche ENTREE de votre clavier. Vous verrez alors la tête de lecture se déplacer, et l’animation se jouer. La touche ENTREE joue le rôle Play/Stop chaque fois que vous appuyez dessus.

3. Quand l’animation est terminée, revenez à l’image 1 en déplaçant la tête de lecture par drag&drop (vous cliquez dessus et vous la déplacez avec la souris). Vous constaterez que vous pouvez donc jouer votre animation manuellement en avant et en arrière…

4. Regardez à présent à droite du scénario. Il y a un ascenseur, donc des calques non affichés. Parcourez l’ensemble des calques en déplaçant l’ascenseur ; vous pouvez constater qu’il y en a plus que l’on pourrait le croire… Au total, le scénario contient 10 calques. Si vous placez votre souris à la frontière du scénario et de la scène, vous verrez qu’elle change d’aspect et que vous pouvez agrandir le scénario pour voir tous les calques. Vous pouvez également redimensionner la scène en demandant « Afficher tout » dans la liste « zoom » en haut à droite du scénario.

5. Cliquez à présent sur le bouton « liste des séquences » (cf. Figure 5). Le menu qui apparaît liste toutes les séquences de l’animation (ici, une seule).

6. Cliquez sur le bouton « liste des symboles » (cf. Figure 5). Le menu qui apparaît liste tous les symboles de l’animation. Prenez le symbole « bébé.assis ». Vous obtenez alors la Figure 7, la Figure 6 est sensiblement différente de la vôtre car faite avec Flash MX. Ce que vous voyez est le symbole « bébé.assis » ; ce symbole est composé, lui aussi, d’un scénario qui lui est personnel. Vous pouvez jouer ce scénario avec la touche ENTREE ou par drag&drop de la tête de lecture. Si vous vous reportez à ce que j’ai écrit plus haut, un scénario contient des images qui peuvent contenir des symboles qui contiennent eux mêmes des scénarios et donc on peut aller comme cela à l’infini… (un symbole a un scénario qui a des images qui ont des symboles qui ont des scénarios qui ont des images qui…etc.). Nous verrons en détail les symboles au chapitre 3.

• Remarque : vous pouvez faire afficher des règles, une grille, etc. sur la scène principale ou sur la scène des symboles. Pour cela, consultez le menu Affichage puis Règle, Grille, etc.

7. Toujours dans la liste de symboles, prenez le symbole « profil.corps » puis « lunettes ». Que pensezvous de tout ceci ? La réponse est que les symboles sont des objets (dessins, sons, …) réutilisables et assemblables. Par exemple, le symbole « parasol » permet d’avoir plusieurs parasols sur la plage, ceci à partir d’un seul et même dessin (il suffit de déformer le symbole sur la scène). D’un autre côté, par moment le bébé est un assemblage d’un corps, d’une tête, d’une tétine et de lunettes, ce qui permet de changer uniquement la partie qui nous intéresse sans devoir tout redessiner (par exemple faire bouger la tétine ou lui faire cligner un œil).

8. Revenez à la scène principale en cliquant sur « page 1 » en haut à gauche du scénario. 9. Nous allons à présent tester l’animation en version Shockwave (nous verrons plus loin

comment paramétrer cette version shockwave). Pour cela, faites soit un CTRL+ENTREE au clavier (c'estàdire que vous enfoncez la touche CTRL, et pendant qu’elle est enfoncée, vous appuyez sur la touche ENTREE de votre clavier), soit menu



Contrôle>Tester l’animation (qui vous affiche également le raccourci clavier Ctrl+Entrée). Flash exporte alors l’animation au format Shockwave et joue en boucle ce fichier SWF produit. Pour revenir à la version « fla », fermez ce document comme un document classique (case de fermeture en haut à droite de la fenêtre par exemple).

• Notes : o SWF signifie ShockWave Flash. Shockwave est une technologie créée par

Macromedia, et elle s’applique à Flash, mais aussi à Director, Authorware, etc.

o Une animation SWF se joue toujours en boucle par défaut. Si vous voulez modifier ceci, vous pouvez demander à modifier la publication HTML (cf. chapitre 2), ou bien encore insérer du code ActionScript pour arrêter l’animation quand elle arrive à la fin (nous verrons cela dans les chapitres sur la programmation ActionScript).

10. Quittez Flash. Vous pouvez aller voir dans le répertoire où vous avez dézippé « bébé flash.fla » que ce répertoire contient à présent un fichier « bébé flasf.swf ». Si vous doublecliquez sur ce SWF, vous lancez le player Flash autonome et l’animation se joue automatiquement en boucle. Vous pouvez redimensionner cette fenêtre et vous constaterez que quelle que soit sa taille, l’animation du bébé reste parfaitement bien dessinée et fluide. Ceci est dû aux images vectorielles.

• Rappel : de façon schématique, une image vectorielle contient les équations mathématiques des formes qu’elle contient ; ainsi pour dessiner un rectangle plein, il suffit de stocker les coordonnées de deux coins opposés, et la couleur de remplissage, et ce quelle que soit la taille du rectangle. Une image bitmap contient quant à elle tous les pixels qu’elle affiche ; ainsi un rectangle plein de 100x10 pixels contient 1000 pixels, alors qu’un rectangle de 800x600 pixels contient 48000 pixels. Cette différence fondamentale permet à Flash, qui utilise principalement des images vectorielles, d’animer très rapidement des images, et ce quelles que soient leurs tailles. D’un autre côté, cela induit un « look bande dessinée » facile à repérer si vous avez visité des sites Flash.

Symbole en cours d’édition

Scénario du symbole

Retour à la scène principale

Figure 6 : un symbole de l’animation « Bébé Flash » (faite avec Flash MX)



Figure 7 : le même symbole affiché dans Flash 8

Documents

MASTER IPM EAD 2007200 9 - LIFL - jctarby/cours_flash_master_ipm/1... · 2017-06-15 · Le cours de Flash a pour objectif principal de vous faire découvrir l’animation multimédia