Cours Flash. Chapitre 1 : Introduction et prise en main SOMMAIRE

Transcription

1 MASTER IPM EAD 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 PREAMBULE INTRODUCTION EXERCICE LES CONCEPTS FONDAMENTAUX DE FLASH COMPOSITION D UNE ANIMATION FLASH (PREMIERE APPROCHE) EXERCICE 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, image clé, etc.), jouer une animation existante, regarder le contenu d une animation existante. Flash: Introduction et prise en main Page 1 sur 13

2 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 Flash: Introduction et prise en main Page 2 sur 13

3 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 CD ROMS, envoyées par , 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 moment là 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). Ceux ci 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 celles ci 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. Fouillez la au fur et à mesure de votre apprentissage, ne serait ce que pour consulter l aide associée aux mots clés que vous apprendrez (image clé, 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). Celles ci 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 regardez les 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 Flash: Introduction et prise en main Page 3 sur 13

4 Par ailleurs, je vous ai aussi donné des exemples que j ai récupérés sur le web sur le site 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 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 inspirez vous 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) Flash: Introduction et prise en main Page 4 sur 13

5 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. Reportez vous 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éorganisez les de telle façon à avoir au minimum la configuration ci dessous (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. Flash: Introduction et prise en main Page 5 sur 13

6 Figure 4 : Configuration minimale proposée pour suivre le cours Flash: Introduction et prise en main Page 6 sur 13

7 4 Les concepts fondamentaux de Flash Il est temps maintenant de voir les concepts fondamentaux de Flash. Reportez vous à 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 sourc 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 sous scé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 avantplan 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é au dessus des calques, plus il est proche de votre œil, donc du 1 er plan. Flash: Introduction et prise en main Page 7 sur 13

8 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 image clé, ce qui signifie que le contenu du calque change dans cette cellule, avec un rond blanc : c est une image clé 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 image clé 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 image clé 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 (glisser déposer), pour changer l ordre des plans dans l image. Reportez vous à la vidéo n 3 si nécessaire. un calque peut être renommé en double cliquant sur son nom, ou par un clic droit, puis Propriétés. Reportez vous à 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. Reportez vous à 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. Reportez vous à 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. Pensez y quand vous lirez le chapitre 3. Flash: Introduction et prise en main Page 8 sur 13

9 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 Flash: Introduction et prise en main Page 9 sur 13

10 Liste des séquences Séquence courante Liste des symboles Image clé Zooms Image clé vide Tête de lecture Calques Image courante Vitesse de lecture Temps écoulé Explorateur d animations avec affichage des images et des scripts éventuels Scène Figure 5 : Concepts fondamentaux de Flash (copie écran avec Flash MX 2004 Pro) Flash: Introduction et prise en main Page 10 sur 13

11 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 ci dessous dans l ordre indiqué : 1. positionnez vous 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 euxmê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 pensez vous 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 Flash: Introduction et prise en main Page 11 sur 13

12 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 double cliquez 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 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. Scénario du symbole Symbole en cours d édition Retour à la scène principale Figure 6 : un symbole de l animation «Bébé Flash» (faite avec Flash MX) Flash: Introduction et prise en main Page 12 sur 13

13 Figure 7 : le même symbole affiché dans Flash 8 Flash: Introduction et prise en main Page 13 sur 13