Flash CS5

Le Campus
Flash CS5
Adobe
http://www.free-livres.com/
www.pearson.fr
Exemples sur
Gil Mathieu
customer 27921 at Fri Mar 11 19:10:40 +0100 2011 Proprit de Albiri Sigue <tag.tog@gmail.com>
Flash CS5
Pearson Education France a apport le plus grand soin la ralisation de ce livre afin de vous fournir une information complte et fiable. Cependant, Pearson Education France nassume de responsabilits, ni pour son utilisation, ni pour les contrefaons de brevets ou atteintes aux droits de tierces personnes qui pourraient rsulter de cette utilisation. Les exemples ou les programmes prsents dans cet ouvrage sont fournis pour illustrer les descriptions thoriques. Ils ne sont en aucun cas destins une utilisation commerciale ou professionnelle. Pearson Education France ne pourra en aucun cas tre tenu pour responsable des prjudices ou dommages de quelque nature que ce soit pouvant rsulter de lutilisation de ces exemples ou programmes. Tous les noms de produits ou marques cits dans ce livre sont des marques dposes par leurs propritaires respectifs.
Publi par Pearson Education France 47 bis, rue des Vinaigriers 75010 PARIS Tl. : 01 72 74 90 00 www.pearson.fr Avec la contribution technique de Mathieu Anthoine Collaboration ditoriale et mise en pages : Dominique Buraud Digit Books (www.digitbooks.fr) ISBN : 978-2-7440-4171-6 Copyright 2010 Pearson Education France Tous droits rservs
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc. Aucune reprsentation ou reproduction, mme partielle, autre que celles prvues larticle L. 122-5 2 et 3 a) du code de la proprit intellectuelle ne peut tre faite sans lautorisation expresse de Pearson Education France ou, le cas chant, sans le respect des modalits prvues larticle L. 122-10 dudit code.
Flash CS5
Gil Mathieu
la mmoire de Jean-Franois, qui eut une vie de papillon.
Table des matires

Prface ................................................................................................................................................
11
1 Lenvironnement de travail ............................................................................................. 13 Fiche 1. Apprhender linterface utilisateur ........................................................................... 13 Fiche 2. Grer lenchanement des tapes ............................................................................... 33 Fiche 3. Prototyper rapidement une application pour la Toile ......................................... 36 Fiche 4. Organiser les fichiers dun projet consquent ....................................................... 41 Fiche 5. Grer les fichiers provenant dautres applications ............................................... 45 Fiche 6. Partager son cran en ligne.......................................................................................... 50 2 Dessin vectoriel ....................................................................................................................... 63 Fiche 7. Apprhender lenvironnement de dessin ................................................................ 63 Fiche 8. Comprendre les modes de dessin .............................................................................. 70 Fiche 9. Tracer des droites............................................................................................................ 74 Fiche 10. Tracer des courbes ....................................................................................................... 77 Fiche 11. Tracer de formes primitives...................................................................................... 84 Fiche 12. Tracer au pinceau ......................................................................................................... 87 Fiche 13. Utiliser les outils Pinceau pulvrisateur et Dco............................................... 89 Fiche 14. Faire des slections...................................................................................................... 93 Fiche 15. Modifier les attributs des lignes et des formes ................................................... 97 Fiche 16. Appliquer une transformation............................................................................... 102 Fiche 17. Grer les couleurs ..................................................................................................... 108 Fiche 18. Importer du graphisme vectoriel.......................................................................... 111 3 Scnario, images et calques ........................................................................................... 119 Fiche 19. Crer un nouveau document.................................................................................. 119 Fiche 20. Composer des crans ............................................................................................... 123 Fiche 21. Dfinir les contenus successifs du scnario ..................................................... 124 Fiche 22. Structurer grce aux calques ................................................................................. 132 Fiche 23. Utiliser un masque .................................................................................................... 143
VI
Flash CS5
Fiche 24. Dcouper un long scnario .................................................................................... 146 Fiche 25. Naviguer dans le scnario lexcution ............................................................ 148 4 Animation ................................................................................................................................... 155 Fiche 26. Animer image par image ........................................................................................ 155 Fiche 27. Raliser une interpolation de mouvement ........................................................ 166 Fiche 28. Raliser une interpolation classique ................................................................... 190 Fiche 29. Mtamorphoser des formes ................................................................................... 203 Fiche 30. Animer un masque.................................................................................................... 211 Fiche 31. Animer par cinmatique inverse .......................................................................... 216 5 Groupes, symboles et occurrences ............................................................................ 243 Fiche 32. Regrouper des lments graphiques ................................................................... 243 Fiche 33. Tirer parti de la bibliothque de symboles ....................................................... 245 Fiche 34. Utiliser un symbole Graphique ............................................................................ 258 Fiche 35. Crer un symbole Bouton ...................................................................................... 259 Fiche 36. Imbriquer une animation dans un clip danimation ...................................... 263 Fiche 37. Modifier une occurrence de symbole ................................................................. 267 Fiche 38. Grer la dformation lagrandissement .......................................................... 273 Fiche 39. Positionner et orienter en 3D des objets 2D .................................................... 275 6 Texte ............................................................................................................................................... 285 Fiche 40. Crer et formater un texte au contenu fixe ....................................................... 285 Fiche 41. Redimensionner un bloc de texte ........................................................................ 293 Fiche 42. Grer les blocs de texte volumineux .................................................................. 296 Fiche 43. Crer des liens hypertextes .................................................................................... 298 Fiche 44. Grer les polices de caractres ............................................................................. 301 Fiche 45. Rendre le texte plus lisible..................................................................................... 308 Fiche 46. Modifier lexcution le contenu dun texte ................................................... 312 Fiche 47. Appliquer un balisage HTML du texte .......................................................... 316 Fiche 48. Corriger lorthographe ............................................................................................ 319 Fiche 49. Rechercher et remplacer du texte ou une police............................................. 320 Fiche 50. Sparer un texte ......................................................................................................... 322 Fiche 51. Utiliser la typographie avance et les blocs de texte chans ..................... 324
Table des matires
VII
7 Images bitmap ......................................................................................................................... 335 Fiche 52. Importer une image bitmap ................................................................................... 335 Fiche 53. diter une image bitmap......................................................................................... 345 Fiche 54. Intgrer une image bitmap non rectangulaire .................................................. 350 Fiche 55. Convertir une image bitmap en vectoriel .......................................................... 357 Fiche 56. Optimiser les images bitmap................................................................................. 363 Fiche 57. Jouer avec la fusion pixel pixel des clips....................................................... 368 Fiche 58. Tirer parti du cache bitmap.................................................................................... 372 Fiche 59. Appliquer des effets lexcution ....................................................................... 373 8 Son ................................................................................................................................................... 379 Fiche 60. Importer du son.......................................................................................................... 379 Fiche 61. Choisir le mode de synchronisation dun son ................................................. 388 Fiche 62. Mettre un son en place dans le scnario ............................................................ 391 Fiche 63. diter un son............................................................................................................... 395 Fiche 64. Compresser le son..................................................................................................... 400 9 Vido .............................................................................................................................................. 407 Fiche 65. Encoder la vido dans Adobe Media Encoder ................................................ 407 Fiche 66. Choisir la mise en uvre vido ............................................................................ 427 Fiche 67. Importer une vido courte dans lanimation .................................................... 433 Fiche 68. Lire une vido externe dans lanimation ........................................................... 437 Fiche 69. Contrler une vido.................................................................................................. 440 Fiche 70. Incruster une vido dtoure ................................................................................. 446 10 Prfabrication ........................................................................................................................... 449 Fiche 71. Comprendre les composants ................................................................................. 449 Fiche 72. Composants de texte ................................................................................................ 457 Fiche 73. Composants doptions ............................................................................................. 460 Fiche 74. Composants de menus ............................................................................................. 462 Fiche 75. Autres composants de formulaire ........................................................................ 466 Fiche 76. Autres composants dinterface utilisateur ........................................................ 468
VIII
Flash CS5
11 Bases de programmation ActionScript3.0 .......................................................... 475 Fiche 77. Comprendre le vocabulaire de la programmation .......................................... 475 Fiche 78. Se familiariser avec les outils Flash de programmation .............................. 490 Fiche 79. Une session type de programmation ActionScript ........................................ 508 Fiche 80. crire les scripts indispensables .......................................................................... 516 Fiche 81. ActionScript: demandez le programme! ......................................................... 526 12 Publication ................................................................................................................................. 527 Fiche 82. Tester une animation ................................................................................................ 527 Fiche 83. Paramtrer la publication ....................................................................................... 534 Fiche 84. Publier pour la lecture dans un navigateur ....................................................... 541 Fiche 85. Grer le tlchargement de lanimation ............................................................ 550 Fiche 86. Ajouter des mtadonnes ....................................................................................... 554 Fiche 87. Publier une application indpendante ................................................................ 558 Fiche 88. Exporter........................................................................................................................ 562 Index ....................................................................................................................................................
569
Prface
Dans la fentre de lancement de lapplication Flash CS5, vous remarquerez quil sagit en fait de la onzime version du logiciel. Que de chemin parcouru depuis le rachat de Future Splash par Macromedia pour produire la premire version de ce qui ntait au dpart quun logiciel danimation vectorielle pour la Toile. Au fil des versions successives, le caractre multimdia sest affirm: le texte, les images bitmap ou matricielles, le son, la vido. Le langage associ de lenvironnement Flash, ActionScript, a lui-mme suivi cette volution. Au dpart, avec Flash 4, est apparu un simple langage de scripts pour ajouter de linteractivit au scnario dune animation, qui sans eux ne peut tre que lue linairement du dbut la fin. Ce langage ne sappelait pas encore ActionScript. ActionScript 1.0 fait son apparition avec Flash 5. Cest un langage procdural. ActionScript 2.0, langage de programmation orient objet, a pris acte de lvolution multimdia de Flash, apportant les outils permettant de manipuler aussi par programme graphisme vectoriel, animation, texte, images matricielles, son et vido. Malheureusement, cela sest fait comme un largissement dActionScript1.0, qui la base navait pas du tout t conu pour cela. Avec ActionScript 3.0, tout a t repens la base et ce langage de programmation orient objet na pas rougir devant C++ ou Java. Il offre une plthore de classes prdfinies pour manipuler par programme tous les types de mdias que Flash est capable dintgrer une animation. Aujourdhui, avec Flash CS5 vous disposez dune puissante plate-forme dintgration et de programmation multimdia, avec laquelle vous pouvez dvelopper toutes sortes dapplications pour la Toile, linterface utilisateur sophistique et proposant un contenu enrichi (Rich Internet Application, RIA). Les domaines dapplication sont vastes : bandeaux de publicit anims, jeux, prsentations, sites de commerce interactif, dessin anim, e-learning. Cette courte liste nest videmment pas exhaustive. Par dfinition, le multimdia est multimtier. Vous qui commencez la lecture de ce livre tes peut-tre auteur, graphiste, animateur, programmeur, web designer, ralisateur multimdia (celui qui ralise lintgration des diffrents lments de mdias en un tout). Peut-tre mme, venant du monde de la photographie, de laudio ou de la vido, vous intressez-vous leur diffusion sur la Toile grce Flash. Cette liste de curs de mtiers nest pas plus exhaustive que la liste dapplications. La version CS4 de Flash a poursuivi lextension multimdia en y introduisant la3D. Sil ne sagit pas de vraie 3D Flash nest pas encore capable de manipuler de vritables objets 3D (que vous auriez produits dans un modeleur 3D, puis imports) vous pouvez nanmoins positionner et orienter en 3D des objets 2D, un peu comme si vous mettiez en scne des cartes postales dans lespace. Flash CS4 a galement marqu deux avances majeures dans son domaine dorigine quest lanimation. Dune part, linterpolation de mouvement a t repense et une nouvelle approche simplifie en a t propose (pour des raisons de rtro-compatibilit, lancienne
Flash CS5
approche, dite interpolation classique, est toujours prise en charge dans Flash CS5). cela sajoute une bibliothque dinterpolations prrgles, ainsi quun diteur de mouvement qui vous permet dditer les courbes de variation des diffrentes proprits interpoles. La seconde nouveaut majeure de Flash CS4 en matire danimation a t linterpolation par cinmatique inverse qui vous permet de structurer votre graphisme en dfinissant un squelette, cest--dire un ensemble de segments articuls. Les images-cls propres ce type dinterpolation sappellent des poses. Lorsque vous dfinissez une pose, en dplaant et/ou orientant un lment du graphisme anim, les autres lments se dplacent et/ou sorientent en respectant les contraintes dfinies par le squelette. Flash CS5 pousse plus loin la simulation physique en dotant les articulations dventuels ressorts paramtrables. Signalons demble que ces innovations rcentes intressantes 3D, nouvelle approche de linterpolation de mouvement et interpolation par cinmatique inverse prsentent encore bien des imperfections et quil faudra attendre une version ultrieure pour quelles atteignent leur maturit. Le dernier mdia faire lobjet dune avance majeure dans Flash CS4 fut la vido, avec la prise en compte via Media Encoder du codec H.264. Dans Flash CS5, cest le texte qui fait lobjet dune avance majeure: un nouveau moteur de rendu (TLF) injecte dans Flash tout le savoir-faire traditionnel dAdobe en matire de typographie et introduit le flux de texte entre blocs chans. Lune des raisons principales du succs fulgurant de Flash est la lgret des fichiers SWF que produit lopration finale de publication. Bien sr, tous les niveaux tout est fait pour prserver cette lgret lgendaire. Par ailleurs, dans ce monde de vitesse, sil est important que le fichier SWF soit lger pour que linternaute impatient ne zappe pas avant la fin du tlchargement, il est tout aussi crucial que lanimation soit fluide lcran. Les versions CS3 et CS4 de Flash ont particulirement travaill loptimisation du moteur de rendu qui se trouve au cur du lecteur Flash (respectivement en version 9 et 10). La Figure 0.1 donne une vue densemble de tous les logiciels qui dune faon ou dune autre gravitent autour de Flash. La version CS5 est la troisime version de Flash publie depuis le rachat de Macromedia par Adobe. CS est lacronyme de Creative Suite, qui est le concept de communication transparente entre logiciels de la suite logicielle. Ceci est trs important pour un logiciel dintgration multimdia comme Flash. En effet, selon le type de mdia, les possibilits ddition au sein de Flash seront au mieux limites, au pire inexistantes. Grce la Creative Suite, il vous suffit de double-cliquer sur llment en question pour lancer lditeur ddi, faire la retouche, puis valider pour revenir dans votre animation Flash o la modification de llment est prise en compte sans que vous ayez le r-importer. Flash collabore ainsi avec Illustrator (dessin vectoriel, illustration), Photoshop (retouche dimages bitmap, matricielles), Fireworks (graphisme pour la Toile, intgrant matriciel et vectoriel), Dreamweaver (dition de HMTL, XHTML), SoundBooth (dition et traitement audio). Si la communication avec les logiciels de vido nest pas aussi transparente, des passerelles existent nanmoins entre Flash et Premiere, de mme quentre Flash et After Effects. Ainsi, ce dernier, de mme quInDesign (composition de textes, PAO), peut exporter en XFL, le
Prface
3
nouveau format natif dune animation Flash dans la version CS5. Un autre format fait galement son apparition, FXG, ddi lchange de graphismes entre Photoshop, Fireworks ou Illustrator et Flash.
Figure 0.1
Larchipel des technologies autour de Flash.
TEXTE
MATRICIEL
GRAPHISME
VECTORIEL
SON
VIDO
3D Swift 3D 6
Indesign CS5
Photoshop CS5
Fireworks CS5
Illustrator CS5
Soundbooth CS5
Premire CS5
After Effects CS5
Kuler
Media Encoder CS5
Erain Adobe
INTGRATION, ANIMATION, INTERACTIVIT

Flash Catalyst CS5
GESTION DE PROJET
Version Cue Bridge Connect Now
Flash CS5
open source
Away 3D
ACTIONSCRIPT 3
Flash Builder 4
ACTIONSCRIPT 3 (FLEX)
Flash Remoting
Flash Media Server 3.5
Pixel Bender 1
TRAITEMENT DIMAGES
PROGRAMMATION
CT SERVEUR
MODLES 3D
Dans lensemble des logiciels cartographis Figure 0.1, Flash Catalyst est lune des grandes nouveauts de la version CS5. Cet outil de prototypage rapide dune animation Flash ignore compltement laspect dveloppement ActionScript, celui-ci tant cens dans ce cas tre pris en charge dans Flash Builder (ex Flex Builder) par une autre personne. Adobe a depuis quelque temps galement pris le parti de faire de certains logiciels indpendants des satellites des grands logiciels de la Creative Suite, voire den proposer de nouveaux. Flash est ainsi reli Bridge (gestionnaire de fichiers graphiques, audio et vido), Version Cue (gestionnaire daccs aux fichiers dans un contexte de travail en quipe), Kuler (explorateur dharmonies de couleurs, gestionnaire de jeux de couleurs), Pixel Bender (dveloppement de filtres pour le traitement dimages matricielles), Media Encoder (compression, codage audio et vido), ConnectNow (partage dcran distance pour le travail collaboratif) et Device Central (mulation de mobiles). Pour conclure cette prsentation rapide de Flash, il faut rappeler que lun des atouts de cette technologie est sa quasi universalit. Info ou intox, on estime 97% la pntration du lecteur sur les ordinateurs de bureau ou portables, mais aussi sur les appareils portables (assistants numriques, tlphones portables). De fait, le lecteur Flash ou le lecteur Flash Lite sont prsents dans leurs diffrentes versions sur normment de machines. Le nombre
Flash CS5
de sites ou dapplications raliss en Flash est tel que quiconque navigue un tant soit peu sur la Toile aura ncessairement un moment ou un autre tlcharg la dernire version de lextension Flash Player. Au grand dam de linstitution W3C charge de la normalisation des technologies de la Toile, Flash et ActionScript 3.0 sont devenus des standards de facto. Enfin, depuis la version CS4, Flash vous permet de publier pour lenvironnement dexcution AIR, cest--dire de crer une animation Flash qui sexcute sur le Bureau dun ordinateur, au mme titre que nimporte quelle autre application, en dehors de tout navigateur. La Figure 0.2 fait la synthse des diffrents supports destination desquels une animation Flash peut tre publie et indique les lecteurs associs.
Figure 0.2
Les diffrentes possibilits de relecture dune animation Flash.
Flash CS5 Dreamweaver CS5 Device Central CS5
Application hors ligne
Application internet (ordinateur)
Application internet (portable)
Application de bureau
Lecteur autonome Flash Player 10.1
Navigateur + Extension Flash Player 10.1
Lecteur Flash Lite 3
Lecteur AIR 2
Signalons que lune des nouveauts mises en avant de la version CS5 de Flash tait lapplication indpendante Packager pour iPhone ddie la publication sur les appareils portables iPhone, iPod Touch, iPad. Malheureusement ce projet est mort-n devant le refus dApple que soient commercialises sur lApp Store des applications dveloppes sous Flash.
qui sadresse ce livre

Notre ouvrage sadresse toute personne dsireuse de prendre en main Flash pour faire de lintgration multimdia. Le multimdia est multimtier, cest lune de ses difficults. Pour autant, dans aucun des domaines abords louvrage nimpose de prrequis. Il ne suppose aucune expertise chez le lecteur, uniquement de la curiosit. Ce livre sadresse aux non informaticiens et, en matire de programmation, il ne donne que des rudiments indispensables. Flash est un environnement la fois dintgration multimdia et de programmation multimdia. Dans la mesure o ces deux aspects sont dissociables,
Prface
5
le livre traite du premier des deux. En terme de mtier, il ne vise pas former des dveloppeurs, mais plutt des ralisateurs multimdia (designers). Cet ouvrage peut par ailleurs sintgrer toute formation au dveloppement de sites web et dapplications internet, que laccent soit mis sur le graphisme (cole darts appliqus) ou sur la conception de sites web (formations de concepteurs de sites web).
Les intentions de lauteur

Vous avez donc succomb aux sirnes du multimdia. Pour cela, vous avez install Flash CS5 sur votre ordinateur. Vous avez peut-tre pass des heures faire au petit bonheur vos premiers essais. Les menus droulants, botes de dialogue et autres panneaux du logiciel se sont rapidement rvls tre une jungle touffue. Lune de vos frustrations a sans doute t une impression de jargon face aux termes techniques qui reviennent sans cesse dans linterface ou dans la documentation officielle Adobe, mais qui nulle part ne sont dfinis, comme si tout le monde devait naturellement savoir de quoi il est question. Pour vous y orienter, vous venez donc dacqurir ce livre. Pour le rdiger, je me suis efforc de me replacer dans la situation de lapprenti que jai t, de rejouer les processus de comprhension parfois tortueux, pour en tracer de plus directs. Lambition de ce livre est de vous faire atteindre en trois mois de pratique le niveau de savoir-faire que jai mis trois ans atteindre seul. Cest une grande joie dcrire le livre que lon aurait rv lire pour surmonter rapidement les difficults. Louvrage sappuie sur ma double exprience. Ralisateur multimdia travaillant entre autres outils avec Flash, je pratique ce logiciel dont jai suivi les volutions depuis la version6. Enseignant/formateur, je rflchis depuis plusieurs annes aux principes du multimdia quil est capital dassimiler pour que lapprentissage dbouche sur une matrise relle des outils. Il ne sagit pas ici pour vous de suivre laveuglette une liste sche dinstructions excuter. Un livre de cuisine dont une recette contiendrait des instructions comme Passer au chinois ou Faire une bchamel sans que nulle part on ne vous explique ce quest un chinois ou comment faire la sauce bchamel, ce livre est mes yeux une imposture. En tant que lecteur de manuels sur le multimdia tout docteur en informatique que je suis, sagissant de ralisation multimdia, je suis autodidacte, jen ai trop souvent rencontr qui sadressaient au lecteur comme sil faisait dj partie du srail et matrisait le vocabulaire et les notions techniques. Si vous lisez ce livre, il y a de fortes chances pour que ce ne soit pas le cas! Ce livre est donc aussi un manuel pdagogique. Enseignant en master dinformatique le vocabulaire et les principes du multimdia, je me suis donc efforc de dfinir dans le corps du texte le vocabulaire ncessaire au dialogue
Flash CS5
avec la machine. Au besoin, vous trouverez des encarts redfinissant les notions cls. Lapprentissage dune technique quelle quelle soit passe par la matrise de son vocabulaire. La tche est ici dautant plus dlicate que le multimdia est multitechnique. Par ailleurs, la matrise du vocabulaire est indispensable la communication harmonieuse entre les diffrents spcialistes partenaires dune quipe de production. Ainsi, le dveloppeur doit connatre le vocabulaire du graphiste, lanimateur celui du ralisateur et vice versa. Dautre part, je me suis attach vous donner, mme succinctement, les lments qui vous permettent de comprendre ce qui se passe sous le capot. Je prendrai ainsi du recul en expliquant les techniques traditionnelles qui sont utilises comme mtaphores dans le logiciel. Sans rentrer dans les dtails informatiques et/ou mathmatiques, il est tout votre avantage de comprendre les enjeux pour que, dans vos ralisations, vous fassiez en connaissance de cause les bons choix de conception. Par exemple, la supercherie pourrait consister vous dire : dans telle bote de dialogue, cochez lun des formats vido FLV ou F4V. Je prfre commencer par un digest de plusieurs pages sur les principes de la compression dune vido numrique, de sorte que vous ayez en main tous les lments qui vous permettent de faire en connaissance de cause le choix dun codec vido. Sil est indispensable dacqurir le vocabulaire pour comprendre ce que la machine demande, il est indispensable dassimiler les principes pour comprendre ce que lon demande la machine. Lapproche reste pragmatique, il sagit typiquement dun livre que vous garderez porte de main pour y trouver rponse aux difficults que vous rencontrerez dans votre pratique de Flash CS5. Le texte est dans un style relativement ramass, qui vite les redondances, mais favorise les rfrences croises. Enfin, dun esprit fondamentalement visuel, jai suivi le vieil adage selon lequel une image peut remplacer mille mots et louvrage est abondamment illustr, avec plus de 500 copies dcran.
Lorganisation de ce livre
Le livre a t conu pour pouvoir tre utilis de deux faons diffrentes. Suivant la premire, cest un manuel dapprentissage progressif pour dbutant. Lisez-le linairement du dbut la fin. Lordre a t pens de la faon la plus logique possible, de sorte que vous abordiez chaque chapitre avec le minimum de notions pralables qui vous fasse dfaut. Bien sr, lordre idal nexiste pas et lon est parfois oblig de mentionner des notions qui ne seront expliques dans le dtail que dans un chapitre ultrieur. Pour compenser, nous nous sommes efforc dmailler le plus possible le texte de rfrences croises pour que vous puissiez au besoin trouver facilement des complments qui savreraient indispensables. La seconde faon daborder cet ouvrage est comme un livre de recettes. Il conviendra parfaitement quelquun ayant dj au moins une petite exprience de Flash. Vous avez plusieurs moyens dy entrer. Si vous examinez la table des matires, vous constaterez que les titres des fiches ont en rgle gnrale une forme active, dcrivant clairement le problme concret
Prface
7
quelles aident rsoudre. Tous les mots-cls techniques sont repris dans un index fourni, qui est un autre point dentre important dans louvrage. Enfin, grce au rseau de rfrences croises, vous pourrez rebondir de fiche en fiche. La progression de louvrage est organise comme suit: Chapitre 1, Lenvironnement de travail. Il comprend un nombre impressionnant de panneaux qui peuvent tre organiss en diffrents espaces de travail. On examine ensuite les commandes dannulation et le panneau historique, puis la gestion des diffrents fichiers dun grand projet. Enfin, ce chapitre traite de trois applications satellites de Flash: loutil de prototypage rapide Flash Catalyst, le gestionnaire de fichiers Bridge et loutil ConnectNow ddi la collaboration en temps rel avec un ou deux co-quipiers distance. Chapitre 2, Dessin vectoriel. Lune des premires raisons du succs du logiciel Flash tient lapproche vectorielle du graphisme, laquelle produit des fichiers compacts et des illustrations transformables sans perte de qualit. Sans rivaliser avec Adobe Illustrator, Flash est nanmoins un environnement de dessin vectoriel assez sophistiqu. Chapitre 3, Scnario, images et calques. La complexit du travail dintgration multimdia peut drouter le dbutant, car il sagit dintervenir simultanment dans plusieurs dimensions. Tout document Flash possde une dimension temporelle, celle des images du scnario. Le scnario a galement une dimension structurelle, celle de lempilement des calques sur lesquels limage est compose. Lanimation a enfin au moins deux dimensions spatiales sur la scne. Chapitre 4, Animation. Avant de devenir la plate-forme dintgration multimdia quil est dsormais, Flash fut lorigine un logiciel danimation vectorielle. cartant lanimation par programmation ActionScript, ce chapitre dcrit les quatre approches de lanimation que permet lenvironnement de ralisation: image par image, interpolation de mouvement, mtamorphose et interpolation par cinmatique inverse. Ce chapitre est en liens troits avec le prcdent calques et images-cls sont des lments capitaux en animation et avec le suivant la dcomposition hirarchique de lanimation passe par limbrication de symboles clips danimation. Chapitre 5, Groupe, symboles et occurrences. Aprs lapproche vectorielle du graphisme et le recours linterpolation pour beaucoup danimations, une autre raison fondamentale de la lgret des fichiers Flash et donc du succs de ce logiciel tient au fait que les lments graphiques rcurrents dans lanimation sont transforms en symboles stocks dans la bibliothque. Le scnario ne fait alors quenregistrer diffrentes occurrences de ces symboles, instancis sur la scne et dans le scnario. Ceci ajoute une dernire dimension architecturale lintgration multimdia. Le chapitre se termine sur les capacits 3D de Flash CS5.
Flash CS5
Chapitre 6, Texte. Si le texte est un mdia indispensable et pris en compte depuis longtemps par Flash dans ses proprits les plus lmentaires, le rendu de texte sur la Toile est sujet de nombreuses variations. Ladoption du jeu de caractres Unicode et la possibilit dinclure la police de caractres lanimation ont amlior la situation. Adobe a inject dans Flash son savoir-faire traditionnel en matire de typographie avec un nouveau moteur de rendu Text Layout Framework. Avec le texte TLF, on accde galement des possibilits de composition dcrans telles quen offre un logiciel de PAO. Chapitre 7, Images bitmap. Lenvironnement dintgration multimdia Flash ne pouvait se priver de prendre en compte les images bitmap. Si ldition interne reste sommaire, il est possible de texturer avec une image bitmap et diverses solutions sont envisageables pour intgrer une image non rectangulaire. Flash offre deux voies pour prserver la lgret du fichier SWF: la vectorisation ou loptimisation des images bitmap. Le chapitre se termine par trois sujets qui ne concernent pas directement les images bitmap, mais relvent nanmoins du rendu matriciel effectu par le lecteur Flash: modes de fusion, cache bitmap, application de filtres. Chapitre 8, Son. Comme tous les autres mdias lourds, le son est gnralement trait dans une application ddie avant dtre import dans lenvironnement dintgration Flash. Une fois quun son est mis en place dans le scnario, diffrents choix sont possibles pour le dclenchement de sa lecture et la synchronisation avec le reste de lanimation Pour la compression des sons, Flash offre une riche gamme de codecs. Chapitre 9, Vido. Flash poursuit son avance en simposant de fait comme la technologie la plus utilise pour diffuser de la vido sur la Toile. La vido est gnralement encode dans lapplication Media Encoder, de plus en plus souvent avec le codec H.264. Flash propose diffrentes possibilits de mise en uvre de la vido. Des composants, habillables de multiples faons, permettent de construire facilement un contrleur vido. La vido sintgre parfaitement lcran et il est mme possible de ly incruster. Chapitre 10, Prfabrication. Lenvironnement Flash vous fournit des lments prfabriqus sous la forme de composants, qui sont des clips danimation paramtrables (menus droulants, cases cocher, barre de progression, etc.) avec lesquels vous pouvez construire une interface graphique standard. Chapitre 11, Bases de programmation ActionScript 3.0. La programmation ActionScript nest pas le sujet de ce livre qui sadresse aux ralisateurs multimdias et non aux dveloppeurs. Nanmoins, pratiquement aucun site ni aucune application nest concevable sans un minimum dinteractivit. Votre animation Flash contiendra ncessairement quelques scripts basiques indispensables. Lobjectif de ce chapitre est simplement de vous donner les rudiments qui vous permettront de lire et comprendre un peu de code ActionScript 3.0 et den crire vous-mme quelques lignes dinstructions simples. Chapitre 12, Publication. Cest ltape ultime du cycle de ralisation Flash. Selon le support vis, vous allez produire un fichier SWF et le fichier HTML qui lappelle (lecture dans un navigateur), ou bien un fichier excutable (projection grave sur disque amovible ou application destination de lenvironnement dexcution AIR). Par ailleurs,
Prface
9
diverses possibilits dexportation sont offertes, sous forme dimages ou de squences QuickTime. Les logiciels satellites de la suite CS5 (voir Figure 0.1) sont abords, plus ou moins dans le dtail selon le cas. ConnectNow est trait de faon relativement complte. La description de Kuler, Bridge, Media Encoder et Flash Catalyst est dveloppe sans tre exhaustive. Pixel Bender nest prsent quau niveau de linterface utilisateur, puisquil vise les programmeurs, qui plus est spcialistes du traitement dimages. Version Cue est simplement voqu, car linstallation de Version Cue Server relve du spcialiste rseau. Device Central nest pas trait, puisquil sert au dveloppement Flash Lite. Si Flash est une le, il en est quelques presqules que nous navons pas traites dans ce livre. La plus importante dentre elles est ActionScript 3.0. Nous y avons fait une petite incursion au Chapitre 11 pour vous donner des rudiments qui devraient vous permettre de pousser plus loin lexploration si le cur vous en dit. Mais le sujet est vaste et mriterait un autre ouvrage. Nous limitant dlibrment un niveau dbutant en programmation ActionScript3.0, nous avons renonc traiter au Chapitre10 les composants de communication web, ainsi que la personnalisation et le paramtrage des composants la vole. Dautres sujets importants dans Flash auraient pu tre traits, mais ils ncessitent de lActionScript: par exemple, le chargement dimages matricielles ou danimations secondaires depuis lanimation principale, le traitement de fichiers de donnes XML. Laccessibilit est une autre presquleignore: Flash propose en effet des outils pour prvoir un contenu alternatif destination des personnes handicapes dont la vue ou loue est dficiente. Enfin, Flash est non seulement une le, mais cette le fait partie dun archipel, comme lillustre la Figure 0.1. Le dveloppement Flash Lite dapplications pour appareils portables (assistants numriques, tlphones portables) est un sujet part entire. La technologie Flash Remoting permet dajouter votre application sur la Toile de la programmation ct serveur. Ct serveur galement, Flash Media Server permet de diffuser de la vido en direct via le protocole RTMP. Enfin, Flash na pas le monopole de la programmation ActionScript3.0: il existe galement Flash Builder. Aucun de ces sujets nest trait dans ce livre. Il ny est pas non plus question des technologies Swift 3D ou Away 3D, qui ne sont ni lune ni lautre proprit dAdobe. Il ne nous reste plus qu vous souhaiter le calme ncessaire ltude, la persvrance dans lapprentissage et beaucoup de joie dans vos ralisations Flash.
Conventions
Au niveau de la typographie, lorsque vous rencontrerez un fragment de code ActionScript3.0, il sera dans cette police de caractres: MovieClip.play(). Les quelques fragments de code ActionScript3.0 plus importants seront sortis du labeur sous cette forme:
10
Flash CS5
function relacher( evt: MouseEvent): void { trace( Clic sur le bouton, evt.target.name); } <cheminCible>.addEventListener( MouseEvent.MOUSE_UP, relacher);
Suivant une convention usuelle dans les ouvrages dinformatique, pour obtenir du code compilable, vous devrez remplacer les lments entre signes infrieur et suprieur comme <cheminCible> par ce qui est dcrit entre ces signes ici un chemin cible valide dune occurrence de symbole de votre animation. Mentionnons ici, une bonne fois pour toutes, diverses choses qui alourdiraient le texte si nous devions les rpter chaque fois. Sur Mac, on accde aux prfrences de Flash par la commande Flash > Prfrences; sous Windows, par la commande Modier > Prfrences. Pour accder un menu contextuel, faites un clic droit si vous disposez dune souris plusieurs boutons et cliquez avec la touche Ctrl enfonce si vous utilisez un Mac quip dune souris bouton unique. Dans tous les logiciels, il y a un menu dition. Dans Flash depuis quelques versions, il a t r-intitul Modifier, ce qui est notre humble avis un trs mauvais choix dinterface. Cela peut en effet tre source de confusion avec le menu Modification (les deux ont un sous-menu Scnario, par exemple). Nous disposons dautre part de plusieurs types dencadrs:
Raccourci
Ces notes recensent les diffrents raccourcis clavier.
Les exemples sont disponibles au tlchargement depuis le site des ditions Pearson, ladresse http://www.pearson.fr/livre/?GCOI=27440100780310.
Ce pictogramme indique une animation tlchargeable depuis le site de Pearson ( ladresse http://www.pearson.fr/livre/?GCOI=27440100780310). Cette animation est jouable dans la version PDF de louvrage si votre lecteur de PDF lit le Flash. Ce pictogramme attire votre attention sur un point particulier.
Notions cls
Ces encadrs attirent votre attention sur les notions cls indispensables la bonne comprhension de louvrage.
Prface
11
Remerciements
Dominique Buraud pour le montage du projet, sa confiance indfectible et son soutien malgr les alas, ceux de la vie comme ceux de la rdaction, ainsi que son savoir-faire dditrice, Patricia Moncorg pour son coute et sa comprhension, Mathieu Anthoine pour sa relecture affte et sa comptence, Amandine Sueur pour sa minutie, Laure Ancel, Gilles Rougeron et Robin Fercoq pour leurs suggestions pertinentes, Monique Lebeau, Serge Lemaitre, Stphanie Mathieu, Ludovic Bouaud et Martien Hiemstra pour mavoir confi leurs ralisations, Jrme Gensel et Serge Miguet pour mavoir donn lopportunit denseigner le multimdia, Camille Llado pour la chimre, Olivier Verdier pour la belle image de couple dans le dsert, Anne-Sophie Gomez pour son mtier de graphiste (www.plume-image.com), mes parents pour mavoir donn le got du travail soign, ma famille sans qui je naurais pas ce cadre de travail merveilleux, Claudette, Michel, Stphanie pour leur affection, Hubert, Florence, Jrme, Rmy, Rachel, Gilles, Philippe, Fabienne, Olivier, Angela, Ludo, Sophie, Amandine, Cline B., Cline J., Michel, Genevive, Leo, Mieke, Guillaume, Claire, Isabelle et Denise pour leur soutien et leur amiti qui est le bien le plus prcieux, Adle, Paula, Clian, Nathanal, Valrian, Zanie, Lalou, Anicca et Samadhi pour leur spontanit rafrachissante, les papillons, la vipre de mon jardin et la vie enfin, ce quil en reste parce quelle est belle.
Prsentation de lauteur
Aprs avoir fait une thse de doctorat en informatique graphique, Gil Mathieu pratique depuis quelques annes la ralisation multimdia, essentiellement dans les domaines didactique et culturel. Ses outils de prdilection sont Director et Flash et leurs langages de programmation respectifs Lingo et ActionScript 2 et 3. Enseignant le vocabulaire et les principes du multimdia numrique en master dinformatique, il est galement formateur sur les logiciels avec lesquels il ralise (www.amuli.fr).
Lenvironnement de travail
Flash CS5 est la onzime version du logiciel et lenvironnement comprend un nombre impressionnant de panneaux qui peuvent tre organiss en diffrents espaces de travail. Les commandes dannulation et le panneau historique donnent toute libert dessayer une opration, quitte revenir une tape antrieure. Un fichier projet permet dorganiser les diffrents fichiers dun grand projet. Bridge, application transversale de la suite logicielle Creative Suite, sert grer les fichiers provenant des autres logiciels Adobe. Grce loutil ConnectNow, vous pouvez envisager la collaboration en temps rel avec un ou deux coquipiers distance.
Fiche 1
Apprhender linterface utilisateur

Vue densemble
Au lancement de Flash, vous vous retrouvez par dfaut face la fentre reproduite Figure1.1. La premire colonne affiche les documents que vous avez rcemment ouverts ainsi quun raccourci pour accder la bote de dialogue douverture de document. La seconde colonne liste les diffrents types de fichiers que vous pouvez crer de toutes pices dans Flash. Dans la troisime colonne, vous avez galement la possibilit de crer un document Flash partir dun modle (voir section Modles de document, Fiche 19) et daccder Flash Exchange, site proposant des outils complmentaires. En bas de la bote de dialogue se trouvent des liens vers un certain nombre de ressources utiles, surtout si vous dbutez.
Figure1.1
Lcran de bienvenue.
14
Flash CS5
Si vous ne souhaitez plus voir lcran de bienvenue aux prochains lancements, cochez la case Ne plus afficher. Vous aurez toujours la possibilit de ractiver son affichage dans les prfrences, catgorie Gnral, en slectionnant, dans le menu Au dmarrage, loption cran de bienvenue. Linterface peut se prsenter suivant diffrentes dispositions, dites espaces de travail (voir la section Les espaces de travail de cette fiche). la cration dun nouveau document Flash (Fichier> Nouveau), dans lespace de travail Classique, linterface se prsente comme la Figure1.2. Lcran y est dcoup en quatre colonnes. La premire, assez fine, est la bote outils.
Figure1.2
Un nouveau document dans lespace de travail Classique.
La seconde colonne de lcran, celle qui occupe le plus de place, est la fentre document. Verticalement, elle se dcompose en un scnario, des onglets pour chacun des documents ouverts (un seul sur la figure), la barre ddition (la bande horizontale dans laquelle on voit notamment le pourcentage daffichage de la scne, ici 100%) et enfin la scne (le rectangle blanc par dfaut). Sans anticiper sur le Chapitre 3 o ces notions seront expliques en dtail, disons simplement que le scnario est ddi aux aspects temporels de votre animation, tandis que la scne est lespace dans lequel elle se dveloppe. En filant la mtaphore, la zone grise qui lentoure en constitue les coulisses. Un lment en coulisses, cest--dire en dehors du rectangle de la scne, ne sera pas visible dans lapplication finale, mais il contribuera la taille du fichier publi. La dernire colonne de lcran est la zone des panneaux. Un panneau est une fentre que vous pouvez rduire (dans lexemple, certains le sont dans la troisime colonne de lcran), dvelopper ou regrouper avec dautres. Lexemple de la Figure1.2 ne montre que deux panneaux affichs, Info et Proprits, mais lenvironnement Flash en contient un grand nombre comme le montre le menu Fentre, reproduit Figure1.3. La majorit des fentres correspondent des panneaux. Dans ce menu, slectionnez un panneau pour le montrer (sil y est
15
dcoch) ou le cacher (sil y est coch). La dernire section du menu liste les documents couramment ouverts.
Figure1.3
Le menu Fentre.
Comme dans nimporte quel autre logiciel, llment central de lenvironnement Flash est sa barre de menus. Rappelons que chaque menu regroupe un ensemble de commandes et/ ou doptions. Une coche avant le nom dune option indique que cette option est active. Parfois, une option est exclusive. Son nom est alors prcd dun losange (Mac) ou dune puce (Windows). Les commandes les plus utilises possdent un raccourci clavier, visible en bout de ligne aprs le nom. Sous Windows spcifiquement, linterface comprend galement une barre doutils principale (Fentre> Barre doutils> Barre doutils principale) qui apparat au-dessus de la fentre de document. Ses boutons fournissent un accs rapide aux commandes les plus utilises: Nouveau, Ouvrir, Enregistrer, Imprimer, Couper, Copier, Coller, Refaire, Annuler, Accrocher aux objets, Lisser, Redresser, Pivoter et incliner, Redimensionner, Aligner.
La bote outils
La bote outils, que nous appellerons plus simplement le panneau Outils, comporte six sections dlimites par des traits de sparation. La premire regroupe les outils de slection et de transformation, la seconde les outils de dessin vectoriel et de texte, la troisime est
16
Flash CS5
ddie aux outils de modification de dessin et la quatrime contient les outils de zoom et de translation de la scne. Les puces de couleurs occupent la section suivante, tandis que la dernire, dite Zone doptions, comprend les options ventuelles de loutil slectionn. Une flche en bas droite de licne dun outil indique un menu droulant regroupant plusieurs outils. Licne est celle de loutil slectionn. Pour dplacer le panneau Outils, glissez-le par sa barre suprieure gris fonc. Pour le rduire en icne ou le dvelopper, cliquez sur le bouton double-flche en haut droite ou sur la barre suprieure du panneau qui contient ce dernier. Pour le cacher ou le montrer, cliquez sur la barre dintitul, barre grise sous la barre suprieure du panneau. Pour le redimensionner, glissez le coin infrieur droit du panneau. Toutes sortes de dispositions sont possibles: verticale sur une colonne (voir Figure1.2), verticale sur plusieurs colonnes, ou horizontale sur une ou plusieurs lignes (voir Figure1.4).
Figure1.4
Diffrentes dispositions du panneau flottant Outils.
Si la composition par dfaut du panneau Outils ne vous convient pas, libre vous de le personnaliser. Dans les menus Flash (Mac) ou dition (Windows), vous trouverez une commande Personnaliser le panneau Outils, qui ouvre la bote de dialogue reproduite Figure1.5.
Figure1.5
La bote de dialogue Personnaliser le panneau Outils.
Commencez par cliquer sur un outil dans le panneau, tel quil est reproduit gauche dans une disposition sur deux colonnes, pour slectionner un emplacement. Slectionnez-le ensuite dans la liste des outils disponibles (la lettre entre parenthses indique le raccourci clavier), puis cliquez sur le bouton Ajouter. Si vous ajoutez plusieurs outils, il y aura un menu drou-
17
lant cet emplacement. Pour retirer un outil de la slection actuelle, slectionnez-le dans la liste de droite, puis cliquez sur le bouton Supprimer. Le site Adobe Exchange vous permet de tlcharger des outils conus par dautres (www. adobe.com/cfusion/exchange/index.cfm, puis cliquer sur le lien Flash). Le langage JSFL (JavaScript FLash) permet aux dveloppeurs de crer leurs propres extensions linterface de Flash. Il est ainsi possible denrichir la barre doutils, mais aussi le contenu du menu Commandes, de crer de nouveaux panneaux ou des macros pour automatiser certaines tches.
La fentre document
La fentre document vous autorise ouvrir simultanment plusieurs documents. La dernire section du menu Fentre liste tous les documents ouverts. Pour basculer de lun lautre, plutt que de slectionner dans cette section en bas dun long menu, il est plus simple dutiliser les onglets. Depuis la version CS4, chaque onglet de ce dock de documents est dot dune case de fermeture et les onglets, qui sont par dfaut dans lordre douverture, sont dplaables. Vous avez la possibilit douvrir plusieurs fentres document (Fentre> Nouvelle fentre), ce qui est trs pratique pour faire du copier-coller ou du glisser-dposer de lune lautre.
Raccourci
Ctrl+tab ou Ctrl+Maj+tab fait passer dun onglet au suivant ou au prcdent.
Lapparence de la scne dans votre environnement dpend doptions et de commandes du menu Affichage. Lorsque loption Affichage> Zone de travail est coche, les coulisses sont visibles sur les quatre cts de la scne, sinon celle-ci est cale en haut gauche de la zone qui laffiche. Lorsque loption Affichage> Zoom > Ajuster la fentre est coche, votre scne est automatiquement mise chelle lorsque vous redimensionnez la fentre. Dans ce mme sous-menu, la commande Afficher une image modifie le pourcentage daffichage de manire cadrer sur la scne dans son ensemble (voir le haut de la Figure1.6), tandis que Afficher tout cadre sur le contenu de limage (voir le bas de la Figure1.6). La plupart de ces options et commandes se retrouvent dans le menu de pourcentage daffichage tout fait droite de la barre ddition, o elles sont dun accs plus facile. Ce menu, comme le menu Affichage> Zoom, contient des valeurs de pourcentage prdfinies. Dans le champ gauche du menu de la barre ddition, vous pouvez saisir une valeur de zoom entre 8 et 2 000 %, puis valider ; voir la section Aides au dessin et la composition, Fiche7, pour une description de loutil Zoom.
18
Flash CS5
Figure1.6
La scne aprs les commandes Afficher une image (en haut) et Afficher tout (en bas).
Les panneaux
Depuis le rachat de Macromedia par Adobe et lintgration de Flash la Creative Suite, les volutions de linterface ayant unifi toutes les palettes flottantes sous le concept de panneau, dans ce livre nous parlerons de panneau Outils et de panneau Proprits, plutt que dutiliser les termes dorigine Bote outils et Inspecteur de proprits, que vous rencontrerez encore loccasion dans la documentation. Les principes dinterface communs tous les logiciels de la Creative Suite 5 (CS5) vous offrent un grand nombre de possibilits darrangement des panneaux avec lesquels vous travaillez. Dans cette combinatoire, la premire distinction faire est quun panneau peut soit tre isol (cest le cas du panneau Outils reproduit Figure1.4), soit faire partie dun groupe. Les panneaux des Figures 1.7 1.10 sont regroups. Une seconde distinction importante est que dans un groupe, les panneaux sont, soit empils les uns au-dessus des autres, soit juxtaposs, soit organiss en onglets (voir respectivement les Figures 1.7 1.9).
19
Figure1.7
Un groupe flottant de deux panneaux empils.
Figure1.8
Un groupe flottant de deux panneaux juxtaposs.
Figure1.9
Un groupe flottant de deux panneaux organiss en onglets. Le premier onglet est visible gauche et le second droite.
20
Flash CS5
Enfin, dernire distinction, un panneau ou un groupe de panneaux peut soit tre flottant soit faire partie dun dock. Les panneaux des Figures 1.4, 1.7, 1.8 et 1.9 sont flottants, tandis que dans lexemple de la Figure1.10, un premier dock regroupe les panneaux Scnario et diteur de mouvement, et un second dock les panneaux Aligner et Outils. Avec le concept des docks, on retrouve celui de cadre dapplication, usuel sous Windows, qui depuis la version CS3 fait son apparition sur Mac. Il est possible, comme sur la Figure 1.10, de crer des docks dans la fentre document. Le panneau Outils peut lui-mme entrer dans un dock.
Figure1.10
Deux groupes de deux panneaux en dock.
Un groupe de panneaux dans un dock ne peut qutre organis en onglets. Le Tableau 1.1 fait la synthse des possibilits. Tableau 1.1 : Les diffrents arrangements de panneaux
Panneau isol Flottant En dock oui oui Engroupe Pile oui non Juxtaposition oui non Onglets oui oui
Lorsque vous slectionnez un panneau dans le menu Fentre, il rapparat dans le dock auquel il appartenait au moment dtre ferm, sinon il est flottant. Lorsquun panneau ou un groupe de panneaux est flottant, il a une barre suprieure gris fonc avec son extrmit gauche une case de fermeture. Pour le dplacer dans lenvironnement, faites-le glisser par cette barre suprieure, ventuellement pour le dposer dans un autre groupe de panneaux auquel il sancrera. Tout panneau, quil soit isol ou en groupe, possde une barre dintitul gris clair. Pour le dplacer individuellement dans lenvironne-
21
ment indpendamment des autres panneaux du groupe dans le cas dun groupe , faites-le glisser par cette barre dintitul, ventuellement pour le dposer dans un autre groupe de panneaux auquel il sancrera. Si vous maintenez enfonce la touche CMd (Mac) ou Ctrl (Windows) en mme temps que vous dplacez, vous empchez lancrage. Lors dun dplacement, appuyez sur la touche EsC pour annuler lopration. Lorsque vous dplacez un panneau ou un groupe de panneaux et que le pointeur de la souris survole lun des bords verticaux dun autre panneau ou groupe de panneaux flottant, celui-ci sorne dun trait bleu pais indiquant une zone de largage. Si vous relchez la souris, llment que vous dplaciez se juxtapose gauche ou droite selon le bord vertical survol. Une pile de panneaux nest jamais quune juxtaposition verticale. Le principe de lempilement est donc le mme que prcdemment, mais cette fois-ci au survol des bords horizontaux dun autre panneau ou groupe de panneaux flottant. Vous pouvez par la suite modifier lordre dempilement en cliquant-glissant un onglet vers le haut ou vers le bas de la pile. Juxtaposition et piles de panneaux sont flottantes. Une fois quelles sont constitues, vous pouvez les dplacer o bon vous semble en les faisant glisser par la barre suprieure. Lorsque vous dplacez un panneau ou un groupe de panneaux et que le pointeur de la souris survole la barre dintitul(s) dun autre panneau ou groupe de panneaux, quil soit flottant ou en dock, celui-ci sencadre dun rectangle bleu pais indiquant une zone de largage. Si vous relchez, llment que vous dplaciez cre un nouveau groupe avec le panneau isol ou rejoint le groupe de panneaux. Pour sortir un panneau dun groupe, glissez-dposez-le par sa barre dintitul en dehors du groupe. Lorsque les panneaux sont organiss en onglets dans un groupe, vous pouvez en modifier lordre par glisser-dposer dans la barre des intituls. Un dock est fixe. Vous ne pouvez pas le dplacer. Il est par contre possible de rduire ou augmenter lespace quun dock utilise en faisant glisser le bord infrieur du dock. Un dock peut recevoir nimporte quel panneau lexception des documents (les onglets des diffrents fichiers FLA ouverts) et de la scne. Les panneaux sont trs nombreux et il est trs laborieux de devoir sans cesse les ouvrir, les redimensionner, les dplacer et les fermer. Linterface vous vite cela puisquelle vous permet de rduire et dvelopper les panneaux ou groupes de panneaux. cette fin, doublecliquez sur lintitul ou cliquez (une seule fois) ailleurs dans la barre dintituls, droite du dernier onglet. La Figure1.11 montre un exemple de rduction dun groupe flottant de deux panneaux.
Figure1.11
Un groupe flottant de deux panneaux aprs rduction.
22
Flash CS5
Une autre possibilit consiste rduire en icne. Un panneau flottant ou un groupe flottant de panneaux a toujours lextrmit droite de sa barre suprieure (voir les Figures 1.4, 1.7, 1.8, 1.9 et 1.11) un bouton double-flche pointant vers la gauche. Pour obtenir une rduction en icne du panneau ou de tous les panneaux du groupe, tel que lillustre la Figure1.12, cliquez sur ce bouton, ou plus simple encore, cliquez nimporte o dans la barre suprieure qui le contient. Pour gagner encore de la place, vous pouvez mme redimensionner le groupe dicnes pour cadrer au plus prs des intituls, voire mme liminer ceux-ci et ne conserver que les icnes.
Figure1.12
Un groupe flottant de deux panneaux rduit en icnes. Trois redimensionnements.
Pour dvelopper toutes les icnes dun groupe de panneaux ainsi rduit, cliquez sur le bouton double-flche pointant vers la droite. Pour ne dvelopper quune seule des icnes du groupe, cliquez sur cette icne ou sur son intitul sil est visible. Pour rduire nouveau en icne ce panneau dvelopp, cliquez sur son onglet ou sur lun de ses deux intituls (celui de longlet, ou celui droite de licne sil est visible). Dans les prfrences, catgorie Gnral, on trouve une option Rduction automatique des panneaux dicnes (voir Figure1.15). Si vous la cochez, un panneau dvelopp partir de son icne sera automatiquement rduit lorsque vous cliquerez en dehors du panneau. On retrouve galement cette option dans le menu contextuel des groupes de panneaux. Par glisser-dposer, vous pouvez ajouter un panneau flottant ou un groupe flottant de panneaux un groupe dicnes. Les panneaux que vous dposez seront automatiquement rduits en icnes. Comme pour nimporte quelle fentre, vous redimensionnez un panneau flottant ou un groupe flottant de panneaux (dvelopp ou rduit en icnes) en faisant glisser le coin infrieur droit. Un panneau, quelque que soit larrangement dans lequel il intervient, a souvent un menu doptions (voir les Figures 1.7 1.11). La Figure1.13 en donne un exemple. Aprs dventuelles commandes et/ou options propres au panneau (il ny en a aucune dans lexemple de la Figure1.13), on trouve un accs contextuel laide et des commandes de fermeture de panneau. La commande Fermer quivaut au clic sur la case de fermeture. On retrouve cette commande dans le menu contextuel. Tous les onglets sont ferms si vous slectionnez la commande Fermer le groupe. Sachez enfin quil existe une commande Fentre> Masquer les panneaux.
23
Figure1.13
Le menu doptions dun groupe flottant de deux panneaux.
La version CS4 a introduit un lment de contrle remarquablement simple pour les champs valeur numrique des panneaux. Ces valeurs sont affiches en bleu, soulignes en pointills. Cest le cas de la cadence (I/S) dans les proprits de lanimation. On peut la voir sur la Figure1.13. Pour modifier la valeur, cliquez-la; le pointeur devient une double-flche et il vous suffit de glisser: vers la gauche la valeur diminue, vers la droite elle augmente. Le panneau Proprits se distingue des autres en ce quil est contextuel, cest--dire que son contenu change en fonction de votre slection dans la bibliothque, sur la scne ou dans le scnario de lanimation (voir Figure1.14).
Figure1.14
Le panneau Proprits en fonction de la slection. De gauche droite respectivement un objet de dessin dans la bibliothque, une image du scnario et un texte dynamique sur la scne.
Les prfrences
La Figure1.15 montre la catgorie Gnral de la bote de dialogue des prfrences Flash. Vous pouvez y spcifier ce que vous souhaitez afficher Au dmarrage : Aucun document, Nouveau document, Derniers documents ouverts, ou cran de bienvenue et vous pouvez fixer le niveau maximum des annulations (voir la fichesuivante).
24
Figure1.15
Flash CS5
La catgorie Gnral des prfrences.
Pour vos slections, vous avez le choix entre Utiliser la couleur de calque, cest--dire la couleur dfinie pour laffichage sous forme de contours (voir Fiche22), soit utiliser les couleurs dfinies via les cinq puces. Les autres options seront traites dans les fichespour lesquelles elles sont pertinentes. Les autres catgories de la bote de dialogue des prfrences seront galement traites dans le chapitre o elles ont une pertinence: Dessin (Fiche 7), Importateur de fichier AI (Fiche18), Texte (Fiche40), Importateur de fichier PSD (Fiche52). Les catgories ActionScript, Format automatique et Avertissements sont relatives la programmation (voir Chapitre 11).
Les espaces de travail

Le menu Fentre> Espace de travail est reproduit Figure1.16. On y trouve les sept espaces de travail prdfinis: Animateur (voir Figure1.19), Classique, Dbogage, Concepteur (voir Figure1.18), Dveloppeur, Indispensables (voir Figure1.17) et Petit cran, qui est une nouveaut CS5. Les quatre fentres toujours visibles dans nimporte quel espace de travail sont la scne et les panneaux Scnario, Outils et Proprits.
Figure1.16
Le menu Fentre> Espace de travail.
25
La commande Nouvel espace de travail vous permet denregistrer un jeu de panneaux personnel et leurs emplacements. Cela peut tre intressant, notamment si vous travaillez sur lcran dun portable. La bote de dialogue qui souvre ne contient quun champ dans lequel vous saisissez le nom de votre espace de travail.
Figure1.17
Lespace de travail Indispensables.
La commande Grer les espaces de travail ouvre une bote de dialogue contenant deux boutons Renommer et Supprimer. La version CS4 a introduit un menu Espace de travail dans la barre suprieure de la fentre Flash principale. Son contenu est le mme que celui du menu Fentre> Espace de travail de la Figure1.16. Non droul, ce menu affiche en majuscules le nom de lespace de travail courant.
Figure1.18
Lespace de travail Concepteur.
26
Flash CS5
Figure1.19
Lespace de travail Animateur.
Enregistrer un document
Ds quun document a fait lobjet dune modification, un caractre * apparat aprs son nom dans lintitul de son onglet. Lorsque vous appelez Fichier> Enregistrer, vous sauvegardez un fichier FLA, cest--dire un fichier source ditable dans Flash. Lorsque vous testerez et finaliserez votre animation, vous exporterez un fichier SWF (Small Web File), ce que dans le vocabulaire de Flash on appelle la publication, cette publication comprenant aussi souvent le fichier HTML qui fera appel au fichier SWF, de sorte que lanimation soit lisible par les internautes dans leur navigateur (voir Fiches 83 et 84). Lorsque vous avez plusieurs documents ouverts simultanment, vous pouvez les enregistrer tous via la commande Fichier> Enregistrer tout. La bote de dialogue denregistrement vous permet classiquement de parcourir larborescence pour slectionner un dossier existant o enregistrer, voire de crer un nouveau dossier pour cela. Sous Windows, dans cette bote de dialogue, vous pouvez galement, grce au menu contextuel, renommer un dossier, dplacer un fichier, supprimer un fichier. Sachez que Flash ne fait aucun enregistrement automatique. Il faut peut-tre prendre lhabitude denregistrer souvent (Mac OS 10.5 fait des enregistrements automatiques des fichiers ouverts, de sorte que les pertes en cas de coupure se limitent la dernire minute de travail). Flash ne cre aucun fichier pour la version n-1 de votre animation quand vous enregistrez sa version n. Si vous souhaitez conserver des versions successives (anim1.fla, anim2.fla, etc.), cest vous de les crer explicitement via Fichier> Enregistrer sous. Pour un projet consquent, et surtout si vous travaillez en quipe, il faudra utiliser loutil Version Cue, qui entre autres gre les versions. Celui-ci est inclus dans Bridge et il sera voqu brivement la Fiche5. Avant davoir enregistr la version n, si vous souhaitez abandonner les modifications faites et revenir la dernire version enregistre, utilisez la commande Fichier> Rtablir.
27
Dans la bote de dialogue qui souvre lors du premier enregistrement de votre animation (Fichier> Enregistrer, Fichier> Enregistrer sous), comme le montre la Figure 1.20, vous avez dsormais le choix entre trois options: Document de Flash CS5 (*.fla), Document de FlashCS4 (*.fla) et Document non compress de Flash CS5 (*.xfl), Si vous choisissez lune des deux options CS5, votre fichier source ne pourra tre ouvert dans une version antrieure de Flash. Si vous tes en train de modifier une animation dont le fichier source dorigine a t cr avec une version antrieure CS5, une bote de dialogue Compatibilit Flash apparat au moment o vous enregistrez avec lune des deux options CS5. Celle-ci vous rappelle que le fichier sera converti au format FlashCS5 et quil ne sera donc plus possible de louvrir avec une version antrieure. Choisissez loption Document de FlashCS4 (*.fla) si parmi vos collaborateurs il sen trouve qui nont que lavant dernire version de Flash (et bien sr si votre animation ne fait appel aucune des nouveauts CS5). Rappelons que jusqu la version CS4, Flash suivait une procdure denregistrement incrmental. Cela signifie que lors du premier appel la commande Fichier > Enregistrer, lenregistrement tait intgral. Il en allait de mme lorsque vous demandiez Fichier> Enregistrer sous. Mais partir du second enregistrement, lorsque vous invoquiez Fichier > Enregistrer, Flash nenregistrait que lincrment, cest--dire uniquement ce qui diffrait par rapport lenregistrement prcdent. Ctait une faon dallger la charge dcriture en termes de temps dexcution, mais qui se payait en termes de taille de fichier, puisque votre fichier FLA salourdissait de tout son historique (notons quil sagit l dhistorique travers les sessions de travail successives, la diffrence de celui du panneau Historique, trait la Fiche 2, qui ne concerne lui que la session de travail courante). Dans Flash CS4, pour enregistrer ltat actuel de votre animation, et uniquement cela, il fallait demander Fichier> Enregistrer et compresser. Il y avait alors diminution de la taille du fichier FLA (do le terme de compression), dans le sens o toute la partie historique tait limine.
Figure1.20
Les nouvelles options de format denregistrement dans Flash CS5.
Dans Flash CS5, vous constatez que la commande Enregistrer et compresser a disparu du menu Fichier. Le processus denregistrement a en effet t intgralement repens. Il repose sur le format XFL. Cette application XML (Xml FLash) a vu le jour avec la Creative Suite 4 comme format dexportation, destination de Flash, partir de InDesign CS4 et de AfterEffects CS4. Cest dsormais le format natif de Flash CS5. Lorsque vous choisissez denregistrer au format Document de Flash CS5 (*.fla) loption par dfaut , le fichier enregistr a toujours lextension FLA, mais en interne il est au format XFL. En apparence rien na chang: au niveau du systme de gestion des fichiers de votre systme dexploitation, que
28
Flash CS5
vous ayez choisi Document de Flash CS4 (*.fla) ou Document de Flash CS5 (*.fla), lenregistrement na produit quun seul fichier, par exemple animPapillons.fla. InDesign peut exporter un fichier XFL, dextension .fla. AfterEffects peut exporter un fichier XFL, mais avec lextension .xfl et non .fla. Vous pouvez donc sans problme dmarrer votre projet Flash dans lun de ces deux logiciels. Flash sait ouvrir un fichier XFL, mme sil na pas lextension FLA. Le format XFL prserve tous les calques et tous les objets du fichier InDesign ou AfterEffects. la rouverture dans Flash, vous retrouverez les calques dans le scnario et les objets dans la bibliothque. Clarifions maintenant le nouveau processus denregistrement. Prenons pour cela un exemple. La Figure 1.21 montre la bibliothque (voir Fiche 33) dune animation animPapillons.fla. Elle contient cinq lments: un son au format WAV, deux images bitmap de papillons au format PNG, ainsi que les donnes Fireworks correspondantes, les papillons ayant t dtours dans ce logiciel.
Figure1.21
La bibliothque dune animation enregistrer.
La hirarchie de dossiers et de fichiers produite par lenregistrement de animPapillons.fla au format Document non compress de Flash CS5 (*.xfl) est reproduite Figure 1.22. Au mme niveau que le fichier animPapillons.fla, un dossier animPapillons a t cr. Dtaillons son contenu: La description globale de lanimation se trouve dans un fichier XFL animPapillons.xfl. Des informations supplmentaires se trouvent dans trois fichiers XML : PublishSettings. xml, MobileSettings.xml et DOMDocument.xml. Des mta-informations se trouvent dans un sous-dossier META-INF.
29
Le sous-dossier LIBRARY contient les donnes relatives chacun des cinq lments de la bibliothque : le son au format WAV et les fichiers XML de chaque bitmap, renvoyant chacun au fichier PNG Fireworks correspondant. Le sous-dossier bin contient cinq fichiers DAT. Jusqu la version CS4 de Flash, chaque ressource externe importe tait convertie dans un format interne de manire tre incorpore lenregistrement au fichier binaire FLA. Dans Flash CS5, chaque ressource importe fait lobjet dune part dune copie sous son format dorigine dans le dossier LIBRARY, dautre part dune conversion dans une reprsentation binaire enregistre dans un fichier DAT du dossier bin. Les fichiers DAT permettent louverture plus rapide dun fichier FLA (XFL). Ils vitent Flash de devoir r-importer chaque ouverture dune animation toutes ses ressources externes: seules le sont celles qui ont fait lobjet dune modification dans le dossier LIBRARY depuis la dernire ouverture.
Figure1.22
Les fichiers produits par lenregistrement.
Si vous enregistrez une animation FLA cre dans une version de Flash antrieure CS5, les seules donnes accessibles sont celles, binaires, internes au fichier FLA. Dans ce cas, lenregistrement au format Document de Flash CS5 (*.fla) ne produit que des fichiers DAT dans le dossier bin et le dossier LIBRARY reste vide. Nanmoins, le fichier binaire FLA contient aussi le chemin daccs au fichier dorigine dune ressource importe. Sous rserve que ce chemin daccs soit toujours valide cest--dire que le fichier nait pas t dtruit ou dplac, il suffit donc de mettre jour cette ressource dans la bibliothque (voir Fiche 33)
30
Flash CS5
pour forcer la r-importation et donc crer la copie dans le dossier LIBRARY. Alors seulement vous pouvez enregistrer proprement au format Document non compress de Flash CS5 (*.xfl). En effet, si vous laviez choisi demble, tous les chemins daccs dorigine auraient t perdus et la r-importation impossible. Lun des formats CS5 tant qualifi de non compress, il est lgitime de penser que lautre lest! Il sagit en effet de compression ZIP. Remplacez lextension .fla par une extension .zip. Vous pourrez alors dzipper vous-mme le fichier animPapillons.zip et vous retrouverez la hirarchie de dossiers et de fichiers dcrite ci-dessus, directement visible lorsque vous enregistrez au format Document non compress de Flash CS5 (*.xfl). Nul doute que cette nouvelle approche de lenregistrement vous paraisse laborieuse (et notre explication la t). Elle est pourtant avantageuse. En premier lieu, les anciens utilisateurs de Flash apprcieront quelle ait rendu obsolte la commande Enregistrer et compresser. Plus gnralement, cette approche suit une tendance rcente (on pense MS Office 2007 et 2008) qui consiste renoncer aux formats binaires propritaires, botes noires impntrables, au profit de systmes de fichiers ouverts. Cette ouverture prsente bon nombre davantages: partir du dossier LIBRARY, vous pouvez modifier une ressource externe dans un diteur ddi, sans mme devoir diter lanimation dans Flash. Les modifications seront automatiquement prises en compte dans votre animation. Cet avantage est encore plus significatif dans un contexte de travail en quipe: la ressource peut tre dite partir du dossier LIBRARY par quelquun qui ne matrise pas Flash. chacun son mtier et ses outils. Par ailleurs, si vous modifiez une ressource externe dans son diteur ddi alors que lanimation est ouverte dans lenvironnement Flash, celui-ci a une capacit ddition en direct, savoir que les modifications seront automatiquement rpercutes dans votre animation. Travaillant sur une copie de la ressource faite dans le dossier LIBRARY, vous disposez systmatiquement ailleurs dune version de la ressource dans son tat dorigine. Vous ntes pas labri dune corruption des donnes pendant lopration denregistrement. Dans lancienne approche, lorsque cela se produisait, vous aviez perdu lanimation dans son ensemble, puisquelle consistait en un unique fichier binaire. Avec la nouvelle approche, la corruption a toutes les chances de se limiter au fichier de lune des ressources et elle sera plus facilement rparable. Dans un contexte de travail en quipe sur des applications consquentes, il est de mise de faire appel un systme de gestion des versions, de type Subversion. Dans lancienne approche, ce contrle ne pouvait que sappliquer en bloc sur le fichier binaire de lanimation. Avec la nouvelle approche, la gestion des versions peut seffectuer avec la granularit la plus fine sur chacun des fichiers qui entrent en jeu dans lanimation. Enfin, la nouvelle approche de lenregistrement ouvre la voie toutes sortes de traitements externes lenvironnement Flash. En effet, les diffrents fichiers texte qui composent une animation XFL (rappelons que XFL est une application XML) peuvent tre analyss par programme. Vous pouvez ainsi faire de la recherche et remplacement de chane, par exemple pour appliquer une modification cohrente de couleur dans len-
31
semble des fichiers du projet, et ce sans devoir diter chacun individuellement. On peut aussi imaginer qu lavenir des projets Flash soient produits par des outils tiers. Dans les forums, les gens questionnent la possibilit terme dune compilation de lanimation finale qui soit externe Flash, dans lesprit de la compilation de MXML pour Flex. Linconvnient majeur de cette nouvelle approche de lenregistrement est que celui-ci prend plus de temps. Avec le fichier dune animation complexe, attendez vous une barre de progression, chose qui tait tout fait improbable avec lancienne approche incrmentale. Les modles sont traits la section Modles de document, Fiche 19. Vous vous y reporterez pour la commande Fichier> Enregistrer comme modle. Aprs lultime enregistrement, vous fermerez le document via la commande Fichier> Fermer, ou lensemble des documents ouverts via Fichier> Fermer tout. Depuis la version CS4, les onglets des documents sont dots dune case de fermeture.
Raccourci
CMd+W (Mac) ou Ctrl+W (Windows) ferme le document courant.
Laide
Peut-tre avez-vous achet ce livre aprs vous tre dcourag la lecture de la documentation en ligne de Flash. Cest effectivement une lecture difficile pour diverses raisons. Paradoxalement, on vous y parle de notions comme si vous les matrisiez, ce qui nest par dfinition pas le cas si vous dbutez; linformation y est noye dans un grand nombre de redondances; certains passages datent de versions antrieures et nont pas t mis jour de manire cohrente; tout y est au mme plan, ce qui concerne le ralisateur (designer) et ce qui concerne le dveloppeur, ce que le dbutant doit commencer par comprendre et ce que lexpert recherchera si besoin; enfin, la traduction franaise laisse parfois dsirer. Passons nanmoins en revue les ressources offertes par le menu Aide. La Figure1.23 montre le menu Aide de Flash. La commande Aide> Aide de Flash ouvre dans votre navigateur la page daccueil de laide, quelque peu dconcertante. Dans la rubrique Rfrence Adobe, en haut de la colonne de gauche, le lien Utilisation de Flash Professional CS5 affiche, en bas de cette mme colonne, le sommaire de la section. Vous pouvez y dvelopper les sections et ventuelles sous-sections (carrs orns dun signe plus), puis cliquer sur le titre de la page qui semble rpondre vos proccupations.
32
Flash CS5
Figure1.23
Le menu Aide.
Si vous navez pas la moindre ide de lendroit o chercher dans larborescence de laide, utilisez le champ de recherche que lon trouve en tte du menu Aide (voir la Figure1.23). La liste de rsultats vous proposera des liens vers du texte et ventuellement de la vido (tutoriels), des commentaires et des valuations dutilisateurs. Vous pouvez aussi tlcharger le PDF de laide de manire pouvoir faire de la recherche de texte dans Acrobat Reader (ou, sur Mac, dans Aperu). Le site daide communautaire Flash (Aide> Centre de support Flash) vous offre en ligne des vidos, des tutoriels et des articles, des notes techniques, notamment pour la rsolution de problmes reconnus, ainsi que toutes sortes de liens (forum officiel, assistance, etc.). La commande Aide> Programme damlioration des produits Adobe ouvre une bote de dialogue. En cliquant sur Oui, participer, vous autorisez Adobe tudier lutilisation que vous faites du logiciel. Des informations anonymes seront alors envoyes en arrire-plan de vos sessions de travail Flash. Elles serviront Adobe pour la conception de la future version de Flash. La commande Aide> Flash Exchange ouvre la page Adobe Exchange dans votre navigateur. En cliquant sur Flash, vous avez accs des applications tlchargeables susceptibles denrichir lapplication mre. La commande Aide> Omniture renvoie la page des technologies Adobe Omniture: SiteCatalyst et Test&Target, utilisables sous forme dextensions pour Flash CS5. Ces outils sont ddis la gestion marketing dun site, savoir lvaluation du retour sur investissement. SiteCatalyst fournit des aides visuelles relatives au trafic sur un siteralis en Flash: points dentre les plus frquents, points de sortie, etc. Ces analyses de performances du contenu en ligne doivent servir faire voluer celui-ci dans le sens dune optimisation commerciale. Test&Target est dabord un outil convivial pour concevoir des contenus diffrents voire personnaliss automatiquement, ciblant diffrents segments de populations dinternautes. Cest ensuite un outil dvaluation de la pertinence commerciale de tels contenus alternatifs. La commande Aide> Grer les extensions lance Extension Manager CS5, qui vous permet dinstaller des extensions tlcharges partir de Flash Exchange.
33
Avec la commande Aide> Forums Adobe en ligne, vous accdez aux douze forums thmatiques autour de Flash, en anglais. Si vous ne lavez pas fait lors de linstallation, vous pouvez enregistrer votre licence Flash via Aide> Enregistrement. Vous pourrez demander ou non de recevoir des notifications de mises jour et autres propositions. lenregistrement, vous aurez dfini un ID Adobe et rempli un formulaire dfinissant votre profil. Vous pouvez grer ce dernier grce Terminer/ mettre jour le profil de lID Adobe. Une mme licence de Flash peut tre installe sur deux ordinateurs (typiquement votre portable et votre poste fixe). La commande Aide> Dsactiver ou Aide> Activer sert grer ces deux installations. Enfin, la commande Aide> Mises jour ouvre la bote de dialogue Adobe Updater qui va rechercher dventuelles versions plus rcentes de Flash et de ses logiciels priphriques ou de tous les logiciels de la suite dont vous avez acquis la licence. Le lien Prfrences ouvre une autre bote de dialogue qui vous permet de paramtrer la recherche automatique de mises jour.
Raccourci
F1 ouvre laide Flash.
Fiche 2
Grer lenchanement des tapes

Pour annuler votre dernire opration ou tape, utilisez Modifier > Annuler. Le nombre maximum dannulations par dfaut 100 , est paramtrable entre 2 et 9 999 dans les prfrences, catgorie Gnral (voir la Figure1.15). Pour rpter votre dernire opration, utilisez Modifier> Rpter. Cest trs utile quand, par exemple, aprs avoir rempli une premire forme avec une couleur, vous voulez en remplir une seconde avec la mme couleur. Il suffit de slectionner cette forme et de rpter lopration. Vous constaterez quen fonction de lopration, lintitul exact des commandes Annuler et Rpter change : par exemple Annuler Couleur de remplissage et Rpter Couleur de remplissage. Par dfaut, lannulation fonctionne au niveau du document: lorsque vous annulez une premire opration, puis une seconde, cette dernire peut concerner un autre objet que la premire, mais cest toujours lopration qui a t effectue juste avant. Vous pouvez si vous le souhaitez choisir loption Annuler au niveau de lobjet dans les prfrences, catgorie Gnral (voir nouveau la Figure1.15). Dans ce mode, aprs avoir annul une premire opration portant sur un objet, si vous annulez une seconde opration, ce sera lopration prcdente effectue sur le mme objet. Ce mode a la prfrence de beaucoup dutilisateurs anciens de Flash, puisque jusqu la version MX (Flash 6) ctait lunique mode dannulation. Il est en outre plus fidle la logique dimbrication luvre dans Flash.
34
Raccourci
Flash CS5
CMd+Z (Mac) ou Ctrl+Z (Windows) annule lopration. CMd+Y (Mac) ou Ctrl+Y (Windows) rpte lopration.
Pour annuler plusieurs oprations ou tapes, utilisez le panneau Historique (Fentre> Autres panneaux> Afficher lhistorique), reproduit la Figure2.1. Il contient la liste de toutes vos oprations depuis louverture du document, la plus rcente se trouvant en bas et la plus ancienne en haut.
Figure2.1
Le panneau Historique: enregistrement des commandes ( gauche), repentir (au milieu), reprise ( droite).
Certaines commandes ne font pas lobjet dentre dans la liste de lhistorique. Cest le cas des commandes Annuler et Rpter. Lhistorique est propre un document: si vous ouvrez plusieurs documents, chacun a son historique. Lhistorique est perdu la fermeture du document ou si vous leffacez avec la commande ddie du menu des options du panneau. Lorsque vous estimez avoir commis une erreur ou pris une mauvaise dcision, faites glisser le curseur de lhistorique vers le haut juste avant celle-ci (ou cliquez gauche de celle-ci). Toutes les oprations en aval se retrouvent grises dans la liste, comme le montre lexemple du milieu de la Figure2.1. Tant que vous neffectuez pas de nouvelle opration, vous pouvez encore les rintgrer en redplaant le curseur vers le bas. Mais toute nouvelle opration crasera la partie grise de la liste. Cest ce quillustre lexemple de droite de la Figure2.1. Le menu doptions du panneau Historique contient une commande Effacer lhistorique. On y trouve aussi des options dAffichage : par dfaut, seules les oprations sont affiches dans la liste, mais vous pouvez demander y voir les ventuels arguments de ces oprations, ou les appels JavaScript sous-jacents. Arguments et appels JavaScript peuvent aussi tre affichs dans une info-bulle au survol de lopration dans la liste. Il est possible de slectionner des tapes dans le panneau Historique. Par dfaut, si le curseur nest pas sur la dernire opration de la liste, la slection comprend toutes les oprations grises dans la liste. Pour slectionner vous-mme une tape, cliquez-la. Les accords classiques de slections multiples fonctionnent dans la liste historique : Maj+CliC pour une slection dtapes conscutives; CMd+CliC(Mac) ou Ctrl+CliC (Windows) pour une slection dtapes non conscutives. Dans une slection multiple doprations, leur ordre reste celui de lhistorique et vous navez aucun moyen de le modifier.
35
Une fois votre slection dtapes faite, vous avez accs aux trois commandes qui figurent en tte du menu doptions du panneau Historique et qui sont galement derrire les trois boutons qui apparaissent en bas du panneau. Le premier vous permet de r-excuter les tapes slectionnes, soit sur le mme objet, soit sur un autre que vous aurez slectionn au pralable. Cest donc une gnralisation plusieurs oprations de la commande Rpter. Le second bouton correspond la commande Copier les tapes slectionnes dans le pressepapier, utile pour coller la squence dtapes dans lhistorique dun autre document ouvert, aprs y avoir au pralable slectionn le ou les objets concerns. Le dernier bouton, dont licne est une disquette, vous permet denregistrer les tapes slectionnes sous forme de commande, ce qui leur assure une persistance au-del de la fin de votre session de travail, persistance que na pas le contenu du panneau Historique, rappelons-le. Si toutes les oprations peuvent tre annules et r-excutes, toutes ne sont pas ligibles pour tre intgres une commande, auquel cas elles apparaissent avec une croix rouge dans la liste. Cest le cas des oprations Plume et Crayon dans la liste de la Figure2.1. Lopration Ovale, par contre, derrire laquelle il y a un appel JavaScript avec des paramtres, ne pose aucun problme. Dautres oprations non ligibles: lajout de dgrad une forme, la slection dune image, la modification de la taille du document.
Raccourci
CMd+F10 (Mac) ou Ctrl+F10 (Windows) ouvre le panneau Historique.
La bote de dialogue Enregistrer comme commande ne contient quun champ dans lequel vous donnez un nom la commande. Un fichier JavaScript (extension JSFL) est ensuite enregistr dans le dossier Adobe Flash CS5\FirstRun\Commands. Ceci fait, votre commande apparat dans la dernire section du menu Commandes, ainsi que dans la bote de dialogue qui souvre lorsque vous slectionnez Commandes> Grer les commandes enregistres, reproduite Figure2.2. Dans cet exemple, au milieu de six commandes prdfinies dans Flash, on trouve une commande dessinChat que nous avons enregistre. La bote de dialogue vous permet de renommer des commandes et den supprimer de la liste. En invoquant Commandes> Excuter une commande, vous ouvrez une bote de dialogue qui vous permet de naviguer dans larborescence de votre ordinateur jusquau fichier JSFL (Flash JavaScript est slectionn par dfaut dans le menu Activer) correspondant la commande souhaite. Enfin, vous pouvez tlcharger des commandes dveloppes par des tiers en vous connectant Flash Exchange via Commandes> Obtenir dautres commandes.
36
Flash CS5
Figure2.2
La bote de dialogue Grer les commandes enregistres.
Fiche 3
Prototyper rapidement une application pour la Toile

Le logiciel Flash Catalyst est une grande nouveaut de la suite Web CS5. Il sagit pour le ralisateur multimdia dune alternative pour produire le fichier SWF dune animation ou application web. Comme lillustre la Figure 0.1, linverse de Flash qui est un environnement la fois dintgration multimdia et de programmation ActionScript, il sagit ici de clairement sparer les mtiers, qui dans un contexte de travail en quipe sont exercs par des personnes diffrentes. En amont de la ralisation multimdia, les graphistes (graphic designers) effectuent la cration graphique et la composition dans les logiciels traditionnels dAdobePhotoshop, Illustrator, InDesign, auxquels on peut ajouter Fireworks. En aval, les dveloppeurs effectuent la programmation ActionScript (criture, test, publication, dbogage) dans Flex Builder, dont la quatrime mouture a t renommeFlash Builder. Dans le flux de production dune quipe, on trouve des postes intermdiaires: les concepteurs dinterface (interface designers), les ralisateurs (web designers), qui tous ralisent lintgration multimdia. Il manquait un outil propre ces mtiers. Cest Flash Catalyst. Le logiciel se distingue de Flash principalement sous trois aspects. Dune part, les lments dinteractivit y sont produits par prfabrication. Le code ActionScript sous-jacent est gnr en coulisse par lapplication. Comme nous venons de lindiquer, lutilisateur de Flash Catalyst na pas lui-mme diter ce code. Dautre part, si le rsultat publi par Flash Catalyst peut bel et bien intgrer des lments danimation, ils sont eux aussi produits par prfabrication (dplacements, redimensionnements, rotations, fondus). Les animateurs (motion designers) continueront de travailler avec Flash qui reste leur outil de choix. Dernier aspect, la diffrence de Flash qui peut se suffire lui-mme pour produire un site ou une application web complets, dans la plupart des cas Flash Catalyst ne produit quune bauche qui devra tre finalise dans Flash Builder, voire dans Flash. En amont, Flash Catalyst reoit les donnes fournies par les graphistes au format FXG (voir la section changes de donnes via FXG, Fiche 5). En aval, Flash Catalyst fournit des donnes aux dveloppeurs au format SWF. Le format natif dun projet Flash Catalyst est FXP.
37
La prsente fiche na pas la prtention de vous initier Flash Catalyst, auquel un livre entier pourrait tre consacr. Nous allons nanmoins prsenter lenvironnement pour comprendre le flux de travail au sein de ce logiciel. En effet, si vous tes ralisateur multimdia, Flash Catalyst pourrait tre la prochaine corde votre arc.
Lenvironnement de ralisation
La Figure 3.1 donne une vue densemble de lenvironnement Flash Catalyst. Le document en cours de ralisation est la section dun site qui se prsente sous la forme dun cran interactif trois tats: initialement, un papillon est affich plein cran; au survol dune aile, du texte saffiche sur lautre aile et rciproquement.
Figure 3.1
Lenvironnement de ralisation Flash Catalyst.
38
Flash CS5
Passons en revue les composants de lenvironnement, en commenant par ceux qui ont un homologue dans Flash. Notons dabord que lon retrouve, en haut gauche du champ de recherche, une liste droulante des espaces de travail. Il ny en a que deux dans Flash Catalyst: Cration (par dfaut) et Code. Juste en dessous se trouve le panneau Outils. Il est lui aussi tout fait rduit par rapport celui de son an Flash: outre la Main et le Zoom, des outils de slection et de transformation dobjets, ainsi que des outils basiques de dessin vectoriel (texte, formes, lignes). En dessous toujours, on trouve un dock de trois panneaux. Comme celle de Flash, la Bibliothque contient les ressources de lanimation : illustrations, images, habillages, lments interactifs. Dans le mme dock, on trouve aussi le panneau Composants structure filaire, reproduit Figure 3.2. Comme son homologue Flash, il fournit des lments interactifs prts lemploi, daspect sommaire (do lexpression structure filaire). Dans le cas o vous nimporteriez pas un document multicalques en provenance dun logiciel de graphisme dans lequel linterface aurait entirement t dessine et compose, partant dun document vierge, vous effectuerez le prototypage rapide de votre interface utilisateur grce aux outils de dessin vectoriel et ces composants structure filaire. Lesprit est toujours celui de la prfabrication: ces composants intgrent demble des tats et des comportements.
Figure 3.2
Le panneau Composants structure filaire.
Le panneau Calques est le dernier du dock. Il est visible la Figure 3.1. Comme ses homologues des logiciels de graphisme (et comme la partie calques du scnario Flash), ce panneau affiche la structure dorigine du document import. On y retrouve les cases cocher classiques pour afficher/masquer et verrouiller/dverrouiller. Une ligne de ce panneau peut reprsenter un calque, un sous-calque, un objet (image, forme, texte ou composant) ou un groupe dobjets. En bas droite de lenvironnement, se trouve le panneau Scnarios. Comme son homologue Flash, il est ddi tout ce qui comporte une dimension temporelle, quil sagisse de lecture dlments de mdias (animation SWF, audio, vido), de transition (animation joue une fois au passage dun tat un autre), ou de squence dactions (interaction, lintrieur dun
39
mme tat, susceptible dtre joue en boucle). La Figure 3.3 montre le menu Ajouter une action se trouvant en bas du panneau Scnarios. On retrouve dans Flash Catalyst comme dans Flash un panneau Proprits, panneau contextuel qui affiche les proprits de la slection (graphisme, texte, lment interactif). La zone centrale de lenvironnement est la scne de lanimation. Comme dans Flash, on dispose de rgles, dune grille et de guides. Le menu Modifier propose galement des commandes pour Organiser, Aligner, Regrouper, Dissocier. Les quatre autres lments de linterface graphique de Flash Catalyst sont sans quivalent dans celle de Flash. Le panneau Pages/Etats, au-dessus de la scne, affiche une vignette pour chaque page ou tat dun lment. Dans lexemple de la Figure 3.1, le panneau affiche les trois tats de lcran. Mais il pourrait sagir des tats dun lment interactif, par exemple les vignettes des tats Haut, Dessus, Bas et Dsactiv dun composant Bouton.
Figure 3.3
Le menu Ajouter une action du panneau Scnarios.
Cest par le panneau Interactions que passe la gnration du code ActionScript sous-jacente aux lments interactifs. Grce lui, vous pouvez ajouter des composants ou des groupes dobjets des ractions prdfinies certains vnements dclencheur (actions de linternaute). Il peut sagir de: la transition dun tat (de page ou de composant) vers un autre ; laccs une URL via un hyperlien ; la lecture, la pause ou larrt dun clip vido: le dclenchement dune squence dactions. Le panneau Donnes en phase de conception sert garnir les listes de donnes dune faon factice mais visuellement significative, le temps de la ralisation, hors connexion effective.
40
Flash CS5
lexcution, ces listes de donnes seront alimentes grce la programmation ct serveur (requte une base de donnes ou service web). Enfin, lenvironnement Flash Catalyst propose une fentre flottante de fond sombre (visible en bas droite du papillon sur la Figure 3.1). Dans la version franaise du logiciel, cette fentre contextuelle est trs bizarrement intitule Affichage tte haute (head on). Elle fournit un accs rapide aux principales commandes relatives la slection. Aprs cette rapide visite guide de linterface graphique de Flash Catalyst, nous pouvons plus facilement dcrire les tapes dune ralisation dans ce logiciel.
Le flux de travail
Le projet aura sans doute commenc par une esquisse papier. partir delle, la cration graphique aura t effectue dans Photoshop, Fireworks ou Illustrator. Les lments du rsultat, exports au format FXG (voir la section changes de graphismes via FXG, Fiche5), peuvent alors tre imports dans Flash Catalyst. Le premier aspect du travail dans Flash Catalyst est lintgration de ces diffrents lments au sein dune animation SWF. Ldition circulaire (roundtrip editing) est possible, ce qui signifie que les lments peuvent effectuer des allers-retours entre Flash Catalyst et Photoshop, Fireworks et/ou Illustrator. Le second aspect de lintgration dans Flash Catalyst est lajout de la dimension temporelle: Lanimation va ventuellement intgrer au graphisme des lments dautres mdias temporels (sons MP3, vidos FLV, F4V). Les lments interactifs de lanimation auront diffrents tats, quil faut dfinir. Le troisime aspect de lintgration dans Flash Catalyst concerne linteractivit elle-mme Il faut dabord dfinir le type des lments interactifs utiles : boutons de navigation, barres de dfilement, listes de donnes, etc. Linterface sesquisse grce aux panneaux Composants structure filaire et Donnes en phase de conception. Il faut ensuite spcifier les transitions dun tat un autre dans le panneau Scnarios. Il faut enfin dfinir les interactions dans le panneau homonyme. lissue de ces tapes, lbauche de lanimation est publie sous forme de fichier SWF. Dans le cas o cette animation bauche ne serait pas pleinement fonctionnelle, il faudra reprendre ce fichier SWF sous Flash Builder 4 pour rajouter la programmation ActionScript ncessaire. Souvent, dans Flash Catalyst vous aurez dfini le versant frontal (front end) de lanimation et dans Flash Builder vous en dfinirez le versant back end, savoir la connection une technologie ct serveur qui garnira les listes en donnes.
41
Fiche 4
Organiser les fichiers dun projet consquent

Lorsque vous vous lancerez dans un projet consquent, la premire chose faire avant de vous ruer sur Flash est de faire une tude prliminaire du projet. Sans entrer dans les dtails il existe des livres entiers sur le sujet rappelons grands traits quelles sont les tapes dune telle tude. La toute premire consiste dresser un cahier des charges avec le commanditaire. On y dfinira lobjectif du site ou de lapplication: sagit-t-il dinformation, de vente, de divertissement, de formation, etc.? Quel est le public cibl? Quelle est la plateforme cible : les prrequis matriels et logiciels, le type de CPU minimale, la quantit minimale de RAM ncessaire, les cartes indispensables (son, vido), la rsolution dcran, la version du systme dexploitation, celle du navigateur, celle du langage ActionScript, la version minimale du lecteur Flash. Sur la base de ce cahier des charges, vous allez passer ltape de conception. Conception structurelle, fonctionnelle dune part: il existe diffrentes sortes de diagrammes danalyseconception; un graphe de navigation, cest--dire un plan du site avec ses liens, donnera une vision globale; peut-tre allez vous raliser un storyboard, dfinir une charte dinteractivit. Conception graphique dautre part: maquette graphique, dfinition dune charte graphique. Enfin, il est bon de faire un inventaire des lments de mdias (texte, images, formes, animations, son, vido, modles 3D) dont vous disposez. Avec lexprience, vous constaterez que cette tape de collecte et/ou de cration prend souvent plus de temps que prvu. ce stade, lintgration multimdia dans Flash peut commencer. Les tapes en sont grosso modo: dfinir les proprits de lanimation (voir Fiche19) ; importer les lments de mdias dans la bibliothque (voir Fiche33) ; instancier les lments de mdias dans le scnario et sur la scne (voir Chapitre3 et les Fiches33 39) ; ajouter les lments interactifs, notamment pour la navigation (voir les Fiches25, 35 et Chapitres10 et11) ; prvisualiser et tester les fichiers FLA (voir Fiche82) ; publier les fichiers SWF et HTML (voir les Fiches83 et 84). Le panneau Projet dans sa version reproduite la Figure4.1 (Fentre> Autres panneaux> Projet) est apparu avec la version CS4. Il sagit davoir un accs rapide aux diffrents documents Flash qui, ensemble, constituent votre application. Dans ce panneau apparat donc une collection de fichiers. Les formats reconnus par dfaut sont: FLA. Fichiers sources Flash, ils contiennent les lments de mdias internes que lanimation intgre, le scnario et le code ActionScript interne associ celui-ci.
42
Flash CS5
SWF. Fichiers rsultant de la publication dune animation Flash (leurs noms de fichier ont le mme radical), ils sont compresss (Small Web File). AS. Fichiers contenant du code ActionScript externe, cest--dire des dfinitions de classes. ASC. Fichiers de code ActionScript pour la programmation ct serveur, donc destins sexcuter sur un ordinateur quip de Flash Communication Server (ActionScript for Communication). SWC. Fichiers archives de composants (Flash, Flex), ils contiennent un clip danimation compil, toute autre ressource ncessaire, ainsi que le code ActionScript rendant le composant fonctionnel. MXML. Fichiers au format de lapplication XML ddie Flex. JSFL. Fichiers pour la description dextensions Flash. TXT. Fichiers texte simple. XML. Fichiers de formatage de donnes. Le grand absent de cette liste de formats reconnus est FLP, le format de projets Flash qui tait utilis dans lancien panneau Projets de Flash (initialement gProject dvelopp par Grant Skinner). Adobe a malheureusement fait fi ce niveau de la rtro-compatibilit et ceux qui ont des projets Flash dcrits en FLP ne peuvent plus les exploiter depuis la version CS4.
Figure4.1
Le panneau Projet.
Par ailleurs, lancien panneau Projets avait deux avantages importants sur le nouveau. Primo, il permettait de crer au besoin plusieurs projets par dossier. Secundo, grce lAPI JSFL Project, il permettait de publier un projet sans devoir ouvrir chacun des fichiers sources le
43
constituant. LAPI JSFL Project ayant t supprime, le processus de publication dun projet devient beaucoup plus lourd. Pour compenser, une commande JSFL a t introduite qui permet de publier sans avoir ouvrir toutes les sources. Revenons au panneau Projet actuel. Lorsque vous slectionnez un projet dans le menu des projets menu principal du panneau visible la Figure4.2, partie gauche, celui-ci saffiche dans le panneau sous forme darborescence, des triangles vous permettant de dvelopper ou rduire les dossiers quelle contient. Ce panneau vous offre un accs facile aux diffrents fichiers: il suffit de les double-cliquer. Vous pouvez voir la Figure4.1 que les fichiers Flash ont lextrmit droite de leur ligne une case cocher. Elle sert spcifier quels fichiers doivent tre publis. En haut du panneau, un dossier Fichiers rcents peut vous servir de raccourci daccs. Dans le menu des projets, on trouve une commande pour crer un projet. La bote de dialogue Nouveau projet vous demande de donner un nom au projet, de lui attribuer un dossier racine (tous ses sous-dossiers seront dveloppables dans le panneau) et de choisir entre les versions 2.0 et 3.0 du langage ActionScript pour ce projet. La commande Projet rapide cre un projet incluant le document courant. Ouvrir un projet vous permet de naviguer jusqu un projet existant. La seconde section du menu est une liste de projets (un seul dans lexemple gauche de la Figure4.2) et en y slectionnant, vous pouvez basculer dun projet un autre. Enfin, la commande Effacer le menu sert vider cette liste.
Figure4.2
Les menus du panneau Projet: menu des projets ( gauche), menu des options ( droite).
En bas du panneau se trouvent des boutons. Nous traiterons de celui intitul Tester le projet la Fiche82. Viennent ensuite cinq boutons portant une icne. Le premier sert verrouiller le dossier que vous avez slectionn, le second crer un dossier, le troisime crer un fichier (slectionnez un dossier dfaut, la racine du projet, cliquez le bouton, puis don-
44
Flash CS5
nez un type et un nom au fichier), le quatrime crer une classe ActionScript et le dernier supprimer la slection. La partie droite de la Figure4.2 reproduit le menu des options du panneau Projet. Les commandes Publier le projet, Fermer le projet, Renommer le projet, Effacer les fichiers rcents, Actualiser et Aide nappellent aucun commentaire, elles font simplement ce que leur intitul suggre. La commande Supprimer le projet ouvre une bote de dialogue vous demandant de choisir ou non de supprimer le contenu du dossier racine. Cette bote de dialogue est dpourvue de bouton Annuler, mais vous pouvez annuler avec la touche EsC. La commande Proprits du projet ouvre une bote de dialogue dcompose en trois onglets: dans Classes, spcifiez la version dActionScript et lemplacement des dossiers de fichiers de classes; dans Emplacements, spcifiez les emplacements des dossiers de fichiers sources; dans Chemins, spcifiez les emplacements des fichiers crs avec loutil de dveloppement logiciel Flex. De mme, la commande Prfrences du panneau ouvre une bote de dialogue dcompose en trois onglets. On retrouve les mmes onglets Classes et Emplacements, mais cette fois-ci pour les valeurs par dfaut pour tout projet et non plus pour les valeurs spcifiques du projet courant. Longlet Paramtres est reproduit Figure4.3. Vous pouvez filtrer les fichiers affichs par le type (par dfaut les fichiers des neuf formats numrs ci-dessus sont affichs). Vous pouvez galement spcifier un ou plusieurs caractres prfixes de sorte quaucun fichier ou dossier dont le nom commence par ces caractres ne soit pris en compte dans le projet. Les trois dernires options, coches par dfaut, ont un intitul limpide.
Figure4.3
Longlet Paramtres des prfrences du panneau Projet.
45
Fiche 5
Grer les fichiers provenant dautres applications

Fonctionnalits de Bridge
Jusqu la version CS4, Bridge tait la pierre de touche de lintgration de la Creative Suite. Lapparition du format FXG avec la version CS5 change la donne, au moins au niveau du graphisme (voir la section change de graphismes via FXG, la fin de cette fiche). Ceci ne remet cependant pas en question les formidables fonctionnalits de ce logiciel en matire de gestion des ressources multimdia externes lanimation. Dailleurs, cette application reste accessible depuis nimporte quelle application CS5 (commande Fichier > Parcourir dans Bridge). Bridge est un gestionnaire de fichiers graphiques, audio et vido, actuellement dans sa version 4.0. Sagissant dans Flash dintgrer entre autres un certain nombre dlments de divers mdias qui ont pu tre crs ou dits dans dautres logiciels CS5 (Illustrator, Photoshop, Fireworks, SoundBooth, Premiere, After Effects), il est important de pouvoir choisir facilement ces lments avant de les importer. Nos disques durs de capacit toujours plus grande tendent regorger de fichiers dimages et dillustrations, de sons, de musiques et de squences vido, de sorte que lexploration de leur hirarchie de dossiers au niveau du systme dexploitation peut savrer extrmement laborieuse. Le processus lest encore plus si vous devez lancer les diffrentes applications dont sont issues les fichiers. Bridge simplifie ce travail: dune part il vous permet, lors de votre exploration de larborescence, de visualiser dun coup dil tous les lments graphiques contenu dans le dossier courant, y compris les fichiers non-Adobe; dautre part, pour visualiser llment du dossier slectionn, il vous vite le lancement de lapplication cratrice de cet lment. Plus gnralement, Bridge vous offre un endroit centralis et trans-logiciel pour la gestion de vos lments graphiques, audio ou vido. Entre autres fonctionnalits, Bridge permet douvrir ou dimporter des fichiers Camera Raw, de synchroniser les paramtres de couleurs dun lment lors de son passage par diffrents logiciels CS5, ou encore dexporter pour divers supports (impression, Toile, DVD, mobile). Il est possible dimporter un lment dans Flash par glisser-dposer depuis la fentre Bridge. Cette fiche ne se veut pas exhaustive sur le sujet, mais vise seulement amorcer votre curiosit pour les possibilits puissantes quoffre ce logiciel.
Linterface de Bridge
Comme le montre la Figure5.1, les divers panneaux que comprend linterface de Bridge sont organiss en onglets dans trois colonnes, ou volets. Le tout est complt par une barre doutils, sous laquelle se trouve une barre de chemin donnant le chemin daccs au dossier
46
Flash CS5
courant. Comme dans Flash, la possibilit vous est offerte de basculer entre diverses dispositions, dites espaces de travail.
Figure5.1
Linterface de Bridge CS5.
Les deux panneaux principaux se trouvent dans le volet central: Contenu. On y trouve des vignettes daperu des fichiers contenus dans le dossier courant. Aperu. Il sagit dans ce panneau de visualiser les images fixes ou animes (fichiers SWF, mais pas FLA), voire de jouer, puisque Bridge gre aussi laudio. Dans le volet de gauche de la disposition (Figure5.1), on voit un autre panneau essentiel: Dossiers. Les oprations quon y effectue le sont dordinaire au niveau du systme dexploitation: parcourir larborescence locale, ou une arborescence distante, organiser, renommer, dplacer et supprimer des fichiers, voire excuter des commandes de traitement par lot. Le volet de droite visible sur la Figure5.1 montre le panneau: Mtadonnes. On y trouve un certain nombre dinformations sur le fichier slectionn, qui seront dtailles dans la section suivante. Sans tre exhaustif, signalons les panneaux suivants: Favoris. Glissez dans ce panneau des dossiers que vous tes amens explorer souvent.
47
Mots-cls. Lune des fonctionnalits puissante de Bridge est lindexation des lments de diverses manires. Vous pouvez attacher un ou plusieurs mots-cls un fichier. Vous pouvez aussi lui attribuer une tiquette de couleur ou encore une note de zro cinq toiles. Filtre. Sur la base des mots-cls ou des mtadonnes, ce panneau vous permet de rechercher et trier. Cest le moteur de recherche du systme dexploitation qui est mis contribution. Collections. Les rsultats dune recherche peuvent si besoin tre enregistrs dans une collection intelligente (smart collection). Inspecteur. Ce panneau sert grer les informations concernant les serveurs Version Cue (voir la dernire section), crer et supprimer des projets Version Cue, crer des versions. En haut droite de la barre doutils, on trouve divers boutons pour la rduction ou le dveloppement, pour la rotation des vignettes. En bas droite de la fentre, on trouve une glissire qui permet de rgler la taille des vignettes et des boutons pour basculer dun mode daffichage lautre.
Mtadonnes
Le terme mtadonnes dsigne un ensemble dinformations standardises relatives un fichier. Parmi les mtadonnes, on trouve bien videmment dabord celles disponibles au niveau du systme dexploitation: le nom, le type, la date de cration et la taille du fichier. Mais il y a souvent beaucoup plus. Par exemple la rsolution, lespace colorimtrique, le nom de lauteur, les informations de droits dauteur ou encore les mots-cls qui ont t attachs au fichier. Enfin, lorsquil sagit de photographie numrique, le photoscope a souvent gnr un certain nombre dinformations de prise de vue: la hauteur, la largeur, le format de fichier, la focale, louverture, la dure dexposition, le profil colorimtrique, etc. Dans Bridge, les mtadonnes reposent sur une application XML, Adobe XMP (eXtensible Metadata Platform). Le plus souvent, les mtadonnes sont stockes dans le fichier. Lorsque ce nest pas possible, elles sont conserves dans un fichier distinct, appel fichier annexe. Dautres formats de mtadonnes ont t utiliss par le pass,comme Exif, IPTC (IIM), GPS ou TIFF. Lorsque de telles mtadonnes sont rencontres, elles sont rcrites selon la norme XMP. Cette norme est aussi utilise par Version Cue (voir la section suivante). Voici certaines des mtadonnes parmi les plus courantes, accessibles dans le panneau Mtadonnes ou la bote de dialogue Informations: Proprits de fichier. Les caractristiques du fichier (taille, date de cration, date de modification, etc.) telles quon les trouve au niveau du systme dexploitation.
48
Flash CS5
IPTC Core. Contrairement aux prcdentes, il sagit de mtadonnes que vous spcifiez vous-mme et que vous modifiez au besoin: informations de droit dauteur, lgendes, etc. La norme IPTC (International Press Telecommunications Council) Core de 2004 est distinguer de lancienne, IIM. Si elle en hrite, certaines proprits ont t supprimes, dautres renommes et des nouvelles ajoutes. Donnes de l'appareil photo (Exif). Informations produites la prise de vue par le photoscope. GPS. Informations produites par le systme de positionnement global (GPS) ventuel dun photoscope. Audio. Mtadonnes des fichiers audio: genre, nom de lartiste, titre de lalbum, numro de piste. Vido. Mtadonnes des fichiers vido: scne, plan, format dimage en pixels. Version Cue. Informations de version de fichiers Version Cue. Mobile SWF. Informations sur les fichiers SWF: auteur, titre, description, donnes de droit dauteur.
Version Cue
Version Cue est une autre application transversale la suite logicielle CS5 et qui est incluse dans Bridge. Elle na dintrt que dans le cas dun travail en quipe. Imaginez dans ce contexte les complications ingrables quoccasionnerait le fait que vous ditiez un fichier en mme temps que lun de vos co-quipiers: chaque fois que lun de vous deux enregistrerait son travail, il craserait celui de lautre. Grce au systme de gestion de fichiers de Version Cue, pendant que quelquun de lquipe dite un fichier, personne dautre ne peut y accder. Version Cue fonctionne comme un serveur virtuel. Version Cue assure galement la gestion des versions successives des fichiers au fil du dveloppement dun projet, les sauvegardes, les rvisions en ligne, ainsi que les possibilits darchivage et dextraction de fichiers. Vos fichiers grs par Version Cue peuvent tre organiss en projets privs ou partags. Vous laurez compris, Version Cue relve de linformatique pure et dure, aussi linstallation du serveur Version Cue est-elle gnralement confie ladministrateur systme et rseau de lquipe. En tant que graphiste intgrateur Flash, vous ne devriez tre quun simple utilisateur de loutil Version Cue, aussi nous ne nous tendrons pas. Il tait nanmoins important que vous connaissiez lexistence de cette technologie.
change de graphismes via FXG

FXG est une application XML (Flash Xml Graphics, dans sa version 2.0 lheure o nous rdigeons) ddie lchange de graphismes entre logiciels de la suite CS5. La technologie Flex repose sur MXML, une application XML ddie la description textuelle dune
49
animation, tant dans ses aspects visuels que fonctionnels. FXG, sous-ensemble de MXML, se limite quant lui aux seuls aspects visuels, tant ddi la description de graphisme. Pour vous donner une ide de ce quil en est de la description textuelle dun graphisme, la Figure5.2 montre ldition du fichier FXG rsultant de lexportation dun exemple trivial de scne Flash ne contenant quun rectangle et une ellipse. Un graphisme plus raliste est bien videmment susceptible de produire un source FXG long et complexe.
Figure 5.2
Le fichier FXG dun graphisme trs simple, ouvert dans TextEdit.
FXG devient, au moins en ce qui concerne le graphisme, la clef de vote de lintgration entre logiciels de la Creative Suite 5. Les graphistes peuvent en effet travailller avec leurs outils ddis : Fireworks, Photoshop, Illustrator. En exportant leurs crations au format FXG, celles-ci pourront facilement tre rcupres par les ralisateurs multimdia, lesquels transformeront ces bauches graphiques en animations pleinement fonctionnelles. Pour cela, ils travailleront soit dans Flash, soit dans Flash Catalyst (voir Fiche 3). Dans le second cas, pour tre rendue pleinement fonctionnelle en terme de programmation ActionScript, lanimation bauche devra tre rcupre dans Flash Builder4. Le format de ce nouvel change est encore FXG. Chacun des trois environnements de ralisation Flash, Flash Catalyst et Flash Builder est capable dimporter (et dexporter) des fichiers FXG. Dans le cas o le graphiste aurait bauch lanimation dans InDesign ou After Effects, il pourra exporter son travail directement en XFL, le nouveau format natif de Flash (voir la section Enregistrer un document, Fiche 1). En sens inverse, vous avez la possibilit dexporter une slection dlments sur la scne de Flash en FXG (voir la Fiche 88 et en particulier la Figure 88.4). Ce type dexportation a ses limites. Sagissant purement de graphisme, en sont exclus tous les lments ayant une dimension temporelle: animations (image par images, par interpolation, par cinmatique inverse ; voir Chapitre 4), sons, vidos. En sont galement exclus les lments dinteractivit, dont la dimension temporelle est discrte (symboles de boutons, voir Fiche 35; composants, voir Chapitre 10). Les polices incorpores (voir Fiche 44) ne sont pas non plus exportes. Certains attributs de texte peuvent ne pas tre exports. Sagissant de graphisme2D, sont aussi exclus de lexportation FXG les lments 3D (voir Fiche 39). Les
50
Flash CS5
repres dchelle neuf dcoupes (foir Fiche 38) sont exports, mais relus uniquement par Illustrator. Enfin, mme dans le domaine du graphisme 2D, lexportation FXG depuis Flash rencontre des limites avec les dgrads (voir la section homonyme, Fiche 15), les masques (voir Fiche 23), certains filtres (voir Fiche 59) et certains modes de fusion (voir Fiche 57).
Fiche 6
Partager son cran en ligne

Fonctionnalits
Acrobat.com (https://acrobat.com/) est une palette de cinq services en ligne offerts par Adobe: une suite bureautique en ligne: Buzzword, le traitement de texte, Tables, le tableur et Presentations, le logiciel de prsentations; un outil de conversion au format PDF de document Word, Excel et PowerPoint; un espace personnel de stockage de 5 Go auquel vous avez accs via un navigateur depuis nimporte quel ordinateur connect la Toile; un outil de partage de fichiers trop volumineux pour tre joints un courriel, que vous pouvez rendre accessibles nimporte qui o seulement des personnes dsignes; ConnectNow, un outil de confrence web, cest--dire de collaboration en temps rel entre deux ou trois utilisateurs. ConnectNow est un site web sur lequel vous pouvez crer votre salle de runion virtuelle, dans laquelle organiser des sessions de travail collaboratif, cest--dire en ligne, entre collaborateurs distants. La technologie est trans-plateforme les participants peuvent indiffremment tre sous Mac OS X, Windows ou Linux, trans-programme nul besoin que chaque participant soit dtenteur dune licence dun logiciel de la suite CS5, temps rel et scurise (via Secure Sockets Layer avec encryptage 128 bits). Les participants une runion virtuelle ConnectNow peuvent communiquer dans cinq registres: Textuel. Conversation par messagerie instantane, prise de notes partages. Audio. Voix sur IP ou confrence tlphonique. Vido. Via une webcam. Graphique. Partage et annotation dcran, dessin au tableau blanc. Informatique. Partage de fichiers, prise de contrle distance dun ordinateur. Vous pouvez prendre part une session ConnectNow sous trois rles diffrents, lesquels vous donne un niveau diffrent de permissions quant vos possibilits dinteraction dans la runion virtuelle : hte, participant et public. Les participants et le public constituent les invits.
51
Lhte est par dfaut le crateur de la salle de runion virtuelle, mais nimporte quel participant peut tre promu ce rle. Seul un hte peut configurer la session (mise en cran, fonctionnalits accessibles, paramtrage de la conversation, de la confrence tlphonique, de la diffusion vido) et grer les invits (invitation, contrle de laccs, attribution des rles). Pour pouvoir crer votre propre salle de runion virtuelle, il vous faut imprativement crer un compte Acrobat.com. Pour pouvoir partager votre cran, lextension ConnectNow Add-in doit tre installe sur votre ordinateur, mais il est inutile de crer un compte Acrobat.com. Cette extension est une version tendue du lecteur Flash. Un invit qui ne souhaite pas partager son cran peut se contenter dune version au moins 9 du lecteur Flash (r47) installe sur son ordinateur et il na pas non plus besoin de crer un compte Acrobat.com. Le Tableau6.1 fait la synthse des prrequis lutilisation de ConnectNow. Tableau 6.1 : Synthse des prrequis selon le rle pour utiliser ConnectNow
Prrequis CompteAcrobat.com ExtensionConnectNowAdd-in Hte oui oui Invit Participant non oui Public non non
Sous rserve de rpondre aux prrequis, dans une runion virtuelle, un hte ou un participant peuvent: partager leur cran et lannoter ; converser via la messagerie instantane (tchat) ; dessiner au tableau blanc ; prendre des notes partages ; partager des fichiers ; diffuser un flux audio ; diffuser un flux vido. prendre le contrle distance de lordinateur dun participant (avec son autorisation). La seule part active que le public peut prendre la runion virtuelle est la conversation. Pour le reste, il est passif: voir lcran partag ; voir le tableau blanc ; lire les notes partages ; tlcharger les fichiers partags ;
52
Flash CS5
couter les flux audio ; voir les flux vido. Le Tableau 6.2 fournit, pour chacun des trois rles, une synthse des possibilits dinteraction dans la runion virtuelle. Tableau 6.2 : Synthse des possibilits dinteraction dans la runion virtuelle en fonction du rle
Technique Session cran Action Configurer Partagersoncran Annoterlcranpartag Voirlcranpartag Messagerieinstantane Converser Hte oui oui oui oui oui Invit Participant non oui oui oui oui Public non non non oui oui
Tableaublanc
Dessiner Voirledessin
oui oui oui oui oui oui oui oui oui oui oui oui
oui oui oui oui oui oui oui oui oui oui oui oui
non oui non oui non oui non oui non oui non oui
Notespartages
crire Lire
Fichierspartags
Transfrer Tlcharger
Audio
Diffuserunflux couter
Vido
Diffuserunflux Regarder
Ordinateurdistant
Prendrelecontrle Voirlinteraction
53
Initier une session de travail collaboratif

Depuis nimporte quel logiciel de la suite CS5, vous lancez une session ConnectNow via la commande Fichier> Partager mon cran. La commande vous redirige vers la page daccueil dAcrobat.com reproduite Figure6.1.
Figure6.1
Lcran daccueil dAcrobat.com.
Mais la technologie gratuite ConnectNow ntant pas exclusivement lie aux logiciels CS5, vous pouvez aussi tout simplement vous rendre sur le site dAdobe (https://acrobat.com/). Lors de votre premier essai, il faut commencer par crer un compte Acrobat.com. Cliquez le bouton Senregistrer, puis renseignez le formulaire visible Figure 6.1 avec votre adresse de courriel et le mot de passe de votre choix. Vous recevrez alors un courriel dinformations contenant notamment lURL de votre salle de runion virtuelle (https://connectnow.acrobat.com/ suivi de votre pseudonyme); pour modifier celui-ci, dans la bote de dialogue de la Figure6.3, cliquez sur le lien Personnaliser lURL de la runion. Cette inscription faite, vous pouvez vous connecter au service ConnectNow via lautre bouton (Se connecter), puis en rentrant adresse lectronique et mot de passe dans la bote de dialogue qui souvre. Aprs vous tre connect et avoir slectionn longlet Runions, vous obtenez lcran daccueil reproduit Figure 6.2. Si vous cliquez le bouton Aller ma salle de runion, au centre de lcran daccueil de celle-ci se trouve la bote de dialogue de mise en route, reproduite Figure6.3. Cette fentre flottante gris clair vous rappelle lURL de votre salle de runion. Par dfaut, elle masque le bouton Partager lcran de mon ordinateur. Dplacez-la pour pouvoir cliquer sur le bouton. La premire fois, vous serez invit tlcharger lextension ConnectNow Add-in, indispensable au partage dcran. Procdez linstallation. Les fois suivantes, le partage dcran sera activ directement lorsque vous cliquerez sur le bouton.
54
Flash CS5
Figure6.2
Lcran daccueil de ConnectNow.
Figure6.3
La bote de dialogue de mise en route de la runion virtuelle.
Cette installation faite, lavenir vous pourrez inviter une ou deux personnes au plus dans votre salle de runion virtuelle, aprs vous tre identifi (les invits ne peuvent que rejoindre un hte, jamais le prcder dans sa salle de runion) et avant de lancer le partage dcran. Pour cela, dans la fentre flottante gris clair de la Figure6.3, cliquez sur le lien Envoyer le courrier lectronique dinvitation maintenant. Le bouton Envoyer une invitation une runion, dans lcran daccueil de ConnectNow (Figure 6.2), est une alternative. Une autre faon de procder, trs simple, consiste copier-coller dans un nouveau courriel lURL de votre salle de runion. La premire gauche des icnes de la barre doutils (voir Figure6.7) correspond galement la commande dinvitation. Lorsque le destinataire reoit le courriel dinvitation, il lui suffit de cliquer sur le lien pour vous rejoindre (sil est invit en tant que participant, lors de son premier accs ConnectNow, il sera invit tlcharger lextension ConnectNow Add-in, pour pouvoir partager son cran). Lorsquau moins un invit vous a rejoint (visible dans la liste graphique en bas gauche de linterface; voir Figure6.10), vous pouvez partager votre cran. Cliquez le bouton central illustr Figure6.3. La seconde des icnes de la barre doutils (voir Figure6.7) correspond galement la commande de partage dcran. Avant de le faire, bien sr, vous aurez pris soin de fermer toute fentre dont le contenu serait protger des regards indiscrets, voire de quitter toute application inutile la session de travail collaboratif. Vos invits voient en effet toutes les fentres de toutes les applications qui sexcutent sur votre ordinateur, les mouvements du pointeur de votre souris ou trackpad, ainsi que vos interactions.
55
Linterface ConnectNow
La Figure6.4 donne une vue densemble de la disposition par dfaut de linterface ConnectNow. La grande zone grise est ddie la visualisation de lcran partag. Sur la droite, se trouvent un certain nombre de modules, nom donn dans ConnectNow aux panneaux daffichage. Certains modules ont un menu contextuel, accessible comme dhabitude par clic droit ou Ctrl+CliC (souris un seul bouton sous Mac). Ce menu existe galement sous forme de menu droulant, accessible par clic sur le triangle pointe en bas qui se trouve droite de lintitul du module. En bas se trouve la liste des personnes impliques : lhte et son ou ses invits. Dans lexemple de la Figure6.4, la runion comprend respectivement de gauche droite, un hte, un participant et un public dune personne. chaque rle correspond une icne diffrente. Lhte peut galement personnaliser son icne. Cliquer sur cette icne fait apparatre un menu droulant dont le contenu varie selon le rle. Lhte a ainsi accs des commandes pour spcifier le rle dun invit, demander un invit de partager son cran, demander prendre le contrle de lordinateur dun invit ou supprimer un invit de la runion. La barre doutils ConnectNow contient, dans le cas de lhte, trois menus droulants indiqus par un triangle pointe en bas Runion, Modules et Aide, ainsi que les icnes de raccourci des six commandes suivantes, respectivement de gauche droite : Inviter une personne, Partager lcran de mon ordinateur, Transfrer un fichier, Partager ma webcam, Partager mon microphone et Dfinir les informations de la confrence tlphonique.
Figure6.4
Vue densemble de linterface ConnectNow.
56
Flash CS5
La Figure 6.5 montre les commandes auxquelles lhte a accs dans le menu Runion : invitation des participants, partage de lcran dordinateur, chargement dun fichier sur le serveur, partage de la webcam, rglage des prfrences, fin de session, quitter ConnectNow.
Figure6.5
Le menu Runion de linterface ConnectNow dun hte.
Le menu Modules, reproduit Figure6.6, auquel seul lhte a accs, sert montrer/cacher les modules : Partage dcran, Conversation, Notes partages, Webcam, Fichiers, Tableau blanc, ainsi quune commande pour restaurer la disposition par dfaut. Lhte peut personnaliser laffichage en cochant ou dcochant les modules souhaits ou non. Libre lui galement de personnaliser la taille de chaque module visible. Enfin, le menu Aide reproduit la Figure6.7 propose laide de lapplication, le rglement de problmes, le paramtrage du compte et celui du lecteur Flash.
Figure6.6
Le menu Modules de linterface ConnectNow dun hte.
Figure6.7
Le menu Aide de linterface ConnectNow dun hte, ainsi que les icnes des commandes principales.
57
Lorsque vous activez le partage dcran, linterface change du tout au tout et se rduit une palette flottante Partage dcran, comme le montre la Figure6.8 (o lon voit principalement limage JPG dun plan dite sous Fireworks). Par dfaut, cette palette se dcoupe en cinq sous-panneaux, que vous pouvez dvelopper en cliquant sur le bouton orn dun signe plus, puis rduire en cliquant sur celui qui le remplace, orn dun signe moins. Certains sous-panneaux ont un menu doptions indiqu par un triangle pointe en bas droite de leur intitul. Le premier sous-panneau contient le bouton de fermeture rouge qui au clic interrompt le partage dcran et revient linterface dcrite prcdemment. Le second sous-panneau reprend la liste des personnes avec leurs rles, cette fois-ci affiche verticalement. En dessous se trouve un bouton Inviter. Les deux souspanneaux suivants reprennent les modules de conversation et de notes partages dont il sera question plus bas. Les invits ne voient pas la palette flottante Partage dcran ; sur leur cran, la zone quelle occupe dans lcran partag est rendue en hachur bleu.
Figure6.8
Lcran de lhte aprs partage de son cran.
Le dernier sous-panneau de la palette Partage dcran, intitul Annoter, est ddi lannotation de lcran partag. La Figure6.9 en montre un exemple. Lorsque vous cliquez sur le bouton Dmarrer, le partage dcran est interrompu momentanment afin que vous puissiez procder aux annotations. Pour cela vous avez accs la palette doutils de dessin qui est aussi celle du tableau blanc dcrit ci-dessous. Sur la Figure6.9, lcran montrant ldition du plan a t annot: on a surlign dun rectangle jaune une phrase de commentaire importante, on a barr dune croix une cote qui nest plus valable et une flche du schma a t redouble dune flche vectorielle de couleur assez paisse. Au besoin, il est possible denregistrer
58
Flash CS5
limage de lcran annot au format PNG grce au dernier outil de la barre, dont licne est une disquette. Lorsque vous avez fini dannoter, cliquez sur le bouton Arrt. La Figure6.10 montre ce que voit un participant sur son cran aprs que lhte ait partag le sien, dans lexemple celui reproduit Figure6.8. premire vue, linterface ressemble celle illustre Figure6.4, mais y regarder de plus prs, on saperoit quun participant ne dispose pas dun menu Modules.
Figure6.9
Lannotation de lcran partag.
Figure6.10
Lcran dun participant aprs que lhte ait partag son cran.
1. Lastrisque indique quil sagit de lcran de Claudette 2. Nouvelles mentions 3. Plus de menu Modules 4. Barre des outils restreinte
Dautre part, comme le montrent les Figures 6.11 et 6.12, comparer respectivement avec les Figures 6.5 et 6.7, les commandes auxquelles le participant a accs dans les menus Runion et Aide sont galement en nombre restreint. Enfin, les Figures 6.11 et 6.12 montrent que la barre doutils ne contient que les menus Partager lcran de mon ordinateur, Partager ma webcam et Partager mon microphone. Un participant ne peut, par dfaut, ni inviter une personne, ni paramtrer la confrence tlphonique, ni transfrer un fichier.
59
Figure6.11
Le menu Runion de linterface ConnectNow dun participant, ainsi que les icnes des trois commandes principales.
Figure6.12
Le menu Aide de linterface ConnectNow dun participant, ainsi que les icnes des trois commandes principales.
Conversation
Le module de conversation, visible sur la Figure6.10, est une messagerie instantane. Sauf si lhte la dsactive, nimporte qui hte ou invits peut envoyer des messages. On parle de conversation prive lorsque le message est adress une personne donne (les messages privs sont affichs en rouge). Lhte peut empcher les conversations prives (Runion> Prfrences> Conversation : Autoriser la conversation prive entre invits). En dehors de la conversation prive, un message peut tre adress tous les htes (messages affichs en bleu) ou tous. Tapez votre message dans le champ intitul Taper votre texte ici (un certain nombre dmoticnes sont reconnues), slectionnez ventuellement la couleur du texte via la puce de couleur (uniquement pour les messages adresss tous, les autres tant ncessairement rouges ou bleus, voir ci-dessus), slectionnez les personnes cibles via le menu droulant, puis cliquez sur Envoyer. Lorsque vous recevez un message instantan, il saffiche dans votre module Conversation prcd du nom de son auteur. Si le message est priv, outre la couleur rouge, il en est fait mention explicitement. Lhte peut galement paramtrer la conversation pour quavec le nom de lauteur saffiche la date et lheure denvoi (Runion> Prfrences> Conversation: Afficher la date et lheure sur les messages de conversation, puis choix entre deux formats).
60
Flash CS5
Si besoin, la conversation peut tre sauvegarde dans un fichier DOC via la commande Enregistrer sous du menu de la barre de titre du module.
Prise de notes partages

Le module Notes partages (voir Figure6.10) est un autre moyen de communiquer par le texte. Dans cette zone, au fur et mesure du droulement de la session de travail, htes et participants peuvent saisir des informations visibles de tous et copiables par tous, mais aussi effacer le contenu. Des options de formatage sommaire sont disponibles: taille des caractres, gras, italique, couleur, liste puces. En fin de session, si besoin, un bouton Enregistrer permet denregistrer les notes au format DOC.
Dessin au tableau blanc

Le module Tableau blanc est un tableau blanc virtuel sur lequel vous pouvez dessiner des schmas, des diagrammes de toutes sortes via une bote outils vectoriels rudimentaire. Cela peut vous servir reprsenter une ide, esquisser une interface. Les outils de dessin sont de haut en bas: slection, flche, crayon surligneur, rectangle surligneur, texte, formes primitives (ligne, ellipse, rectangle, rectangle arrondi). Ils sont complts par trois autres outils : historique (annuler, restaurer), gomme et enregistrer. Certains outils ont des paramtres. Dans ce cas, une seconde palette flottante apparat. Les deux palettes peuvent tre dplaces un endroit o elles ne gnent pas le travail. Ces palettes servent aussi annoter lcran partag. Elles sont visibles sur la Figure6.9.
Partage de fichiers
Le module Partage de fichiers permet de rendre accessible tous des documents texte (DOC, PDF) ou des tableaux (Excel, Numbers). Les fichiers ajouts dans ce module le sont par les htes ou les participants. Il suffit de cliquer sur Transfrer un fichier, de slectionner celui-ci, puis de cliquer sur Ouvrir. Il est galement possible de renommer et de supprimer des fichiers (menu contextuel via un clic droit). Tout le monde peut tlcharger lun de ces fichiers: le slectionner, puis cliquer sur Enregistrer le fichier slectionn. Le contenu du module ne persiste pas dune session de travail la suivante.
Diffusion dun flux audio

En matire daudio, deux possibilits soffrent vous : la voix sur IP ou la confrence tlphonique. Un numro de confrence tlphonique est fourni avec votre compte Connect-Now (Runion > Prfrences > Confrence tlphonique, qui donne galement un identifiant dhte et un identifiant de participant), mais vous pouvez trs bien en utiliser un autre. Sachez que pour les confrences tlphoniques Adobe, les tarifs internationaux
61
sappliquent. Un casque avec micro sera un accessoire indispensable pour travailler dans de bonnes conditions. Les rglages de microphone et de haut-parleurs se font dans Runion> Prfrences> Microphone et haut-parleurs. Slectionnez un microphone dans le menu homonyme, rglez son niveau de volume via la glissire et cliquez sur les boutons Tester le microphone et Tester les haut-parleurs pour vrifier que tout fonctionne correctement. Dans les prfrences de confrence tlphonique, si vous cochez loption Afficher les informations sur la confrence tlphonique aux invits leur arrive, le numro de tlphone utiliser sera notifi aux invits leur connexion et leur barre doutils proposera le bouton de confrence tlphonique.
Diffusion dun flux vido

Le module Webcam permet nimporte quel hte ou participant de diffuser aux autres de la vido en direct via sa webcam (bouton Dmarrer ma camra; si le lecteur Flash affiche une bote de dialogue demandant de valider laccs la camra, vous devrez cliquer sur Autoriser), de la mettre en pause ou de larrter (boutons Pause et Stop dans le coin suprieur droit de la source vido, dont les icnes sont respectivement un carr dot dun objectif et une croix). Plusieurs participants peuvent partager leur webcam en mme temps. Les images vido sont redimensionnes et rarranges pour toutes tenir dans le module Webcam. Un hte a la possibilit de mettre en pause nimporte quelle camra elle ne diffuse plus pour lui, mais continue le faire pour les autres ou de larrter elle ne diffuse plus pour personne. Une connexion assez haut dbit est conseille, sinon vous risquez de perdre la fluidit. Dans les prfrences (Runion> Prfrences> Webcam), loption par dfaut est une large bande passante.
Prise de contrle distance dun ordinateur

Pendant le partage dcran, nimporte qui, hte ou participant, peut donner le contrle distance de son ordinateur un autre. Il suffit de slectionner la commande dans le menu qui apparat au clic sur le nom de la personne en question dans la liste en bas gauche. Si vous tes hte ou participant, vous pouvez galement demander prendre le contrle distance de lordinateur dun autre, toujours dans le menu qui apparat au clic sur le nom de la personne dans la liste. Aucune prise de contrle distance dun ordinateur ne se fait sans que son propritaire, averti, nait donn son accord. Puisque la personne qui a pris le contrle dispose dun accs sans limite lordinateur distant, son propritaire peut tout moment reprendre le contrle via un bouton homonyme. La prise de contrle distance inclut celle de la souris et du cla-
62
Flash CS5
vier, mais le propritaire de lordinateur a toujours le contrle de sa souris et de son clavier, si bien que les deux peuvent collaborer. lheure o nous crivons, la mise en uvre de cette fonctionnalit est encore incomplte dans la version bta de ConnectNow. Lorsquelle sera acheve, vous disposerez l dun formidable outil pour recevoir ou faire du dpannage ou de la formation distance.
2
Fiche 7
Dessin vectoriel
Lune des premires raisons du succs du logiciel Flash tient lapproche vectorielle du graphisme, laquelle produit des fichiers compacts et des illustrations transformables sans perte de qualit. Sans rivaliser avec Adobe Illustrator, Flash est nanmoins un environnement de dessin vectoriel assez sophistiqu.
Apprhender lenvironnement de dessin

Vectoriel versus matriciel
Rappelons dabord brivement quen matire dinfographie il existe deux approches: matricielle et vectorielle. Les images photographiques ou numrises existent sous forme de bitmaps, cest--dire de matrices de pixels. Cest sous cette forme galement que sont stockes les donnes dune illustration ralise dans un logiciel de peinture matricielle comme Painter. Lavantage dune telle approche est la simplicit du rendu lcran, puisquil sagit dun simple transfert de pixels du fichier la mmoire vido. Ses trois inconvnients majeurs sont: la taille des fichiers, qui transfrs via la Toile imposeront une latence daffichage; laliassage, qui lors des transformations comme le zoom ou la rotation produit des artefacts (pixelisation: marches descalier); la difficult dditer sparment les diffrents lments dun graphisme, lorsque celui-ci nest pas compos par calques. La toute premire raison du succs du logiciel Flash est son approche vectorielle du graphisme. En dessin vectoriel, vous tracez des lignes, droites ou courbes. Les donnes de lillustration sont dans ce cas un nombre limit de vecteurs qui paramtrent la description mathmatique de ces courbes, dites courbes splines. Les avantages et inconvnients du graphisme vectoriel sont strictement inverses de ceux de lapproche matricielle: la taille rduite des fichiers; la transformation sans perte de qualit du graphisme (zoom, rotation, inclinaison) et en particulier son affichage correct nimporte quelle rsolution; la dcomposition du graphisme en lments qui restent ditables sparment. Ces avantages ont un prix: le rendu lcran sollicite beaucoup plus les ressources de la machine cliente. Dans notre cas, cest le lecteur Flash le plus souvent sous forme dextension Flash Player de votre navigateur qui effectue la vole ce calcul de pixels.
64
Notions cls
Flash CS5
Illustration matricielle. Produite dans un logiciel de peinture matricielle (Painter), voire de retouche dimage (Photoshop, Gimp, Fireworks), ses donnes sont la matrice des pixels ou points lmentaires de limage bitmap. Principaux formats: GIF, JPEG, PNG. Illustration vectorielle. Produite dans un logiciel de dessin vectoriel (Illustrator, Inkscape, Flash), ses donnes sont les vecteurs qui caractrisent les courbes de tous les contours prsents dans lillustration: coordonnes des points de contrle, attributs de trait, attributs de remplissage. Principaux formats: PostScript, EPS, PDF, SWF, SVG.
Spcificits du dessin vectoriel dans Flash

Si vous tes familier dun autre environnement de dessin vectoriel par exemple Adobe Illustrator ou son rival logiciel libre Inkscape le panneau Outils reproduit la Figure7.1 montre que lon retrouve dans Flash un crayon et un pinceau pour dessiner main leve, une plume pour tracer des courbes point par point, ou encore des formes primitives. Comme il se doit en dessin vectoriel, tout trac reste ditable.
Figure 7.1
Le panneau Outils.
La Figure7.2 prsente le panneau Proprits, dans lequel vous pouvez lire et modier les attributs de trait (paisseur, couleur, etc.). Vous pouvez de mme accder aux attributs de remplissage (couleur unie, dgrad ou image bitmap). Divers outils vous permettent dditer les points de contrle dune ligne, de remodeler ou de transformer les formes, etc. Ils seront dtaills dans les fiches de ce chapitre.
Figure 7.2
Le panneau Proprits avec le trac de la lettre S slectionn.
Dessin vectoriel
65
Lenvironnement de dessin vectoriel Flash a aussi quelques spcificits. Dordinaire, en dessin vectoriel, vous effectuez un trac, lequel est dot dattributs de trait et de remplissage. Dans Flash, ce que vous tracez lcran produit en interne deux tracs spars: un premier qui dfinit le trait (on parlera aussi de ligne) et un second qui dlimite le remplissage (on parlera aussi de forme). Ligne et forme sont deux entits diffrentes (voir Figure7.3).
Figure 7.3
Le trac de gauche (ligne et forme) a t dupliqu droite, puis ligne et forme ont t spares.
Sagissant de graphisme vectoriel pour la Toile, tout a t mis en uvre pour que les fichiers publis soient les plus lgers possibles. Le plus souvent, le dessin vectoriel repose sur les splines de Bzier, qui sont des courbes splines cubiques, cest--dire des splines dont les quations mathmatiques sont de degr3. Seconde spcificit de Flash: des fins doptimisation, il repose sur des courbes splines quadratiques, donc de degr2. Concrtement, cela signifie que trois points de contrle au lieu de quatre ont une influence sur un segment de courbe donn. La taille du fichier ainsi que le temps de calcul du rendu sont allgs, mais au prix dune prcision de trac moindre. Toujours dans cet esprit doptimisation, Flash a des facults originales de traitement automatique de vos tracs: il peut lisser des courbes que vous tracez et reconnatre des formes gomtriques simples (triangles, rectangles, ellipses). Enfin, le mode de dessin vectoriel par dfaut de Flash, dit mode par fusion, constitue sa quatrime spcificit par rapport aux autres environnements. Reportez-vous la Fiche 8, entirement consacre aux modes de dessin vectoriel.
Ligne. Trac vectoriel dit aussi trait. Il peut tre ouvert ou ferm. Dans ce dernier cas, il peut ou non tre le contour dune forme associe qui le remplit. Dans Flash, si elle existe, cette forme est un trac spar. Forme. Trac vectoriel qui dlimite un remplissage. Il peut ou non avoir une ligne contour associ. Dans Flash, si elle existe, cette ligne est un trac spar.
Notions cls
66
Flash CS5
Positionnement des lments

Pas de positionnement numrique sans un systme de coordonnes, un repre. Dans Flash comme toujours en infographie, lorigine du repre cest--dire le point de coordonnes (0,0) est le coin suprieur gauche de la scne. Les coordonnes sont celles des pixels. Sur laxe horizontal, les valeurs vont croissant vers la droite, tandis que sur laxe vertical, contrairement lusage en mathmatiques, les valeurs vont croissant vers le bas. Les pixels gauche et/ou au-dessus de la scne ont ainsi des coordonnes ngatives, comme le montre la Figure7.4.
Figure 7.4
Le systme de coordonnes rendu visible par laffichage des rgles.
Lorsque vous slectionnez un lment sur la scne, vous pouvez lire ses coordonnes X et Y dans le panneau Proprits. Les valeurs affiches l sont celles du point dalignement de llment en question. Ce point est dfini numriquement au vingtime de pixel. Pour un dessin vectoriel, le point dalignement est dfini par dfaut comme tant son coin suprieur gauche. Dautres types dlments ont leur point dalignement dfini par dfaut au centre de leur rectangle englobant. Cest le cas des symboles. De plus, contrairement celui des simples lments de dessin vectoriel, le point dalignement des symboles est visualisable en mode ddition de symbole (voir Fiche33 pour en savoir plus).
CMd+Maj+W (Mac) ou Ctrl+Maj+W (Windows) escamote/rtablit les coulisses de lanimation, cest--dire les parties de coordonnes ngatives, de coordonne horizontale suprieure la largeur de la scne et de coordonne verticale suprieure la hauteur de la scne.
Raccourci
Aides au dessin et la composition

Tt ou tard, pour travailler plus finement vous aurez besoin de zoomer. Lorsque vous slectionnez loutil Zoom dans le panneau Outils, la zone dOptions de celui-ci vous offre deux boutons Agrandir et Rduire (voir Figure7.5). Le pointeur de souris saccorde loption choisie. Il suffit ensuite de cliquer sur la zone zoomer sur la scne. Pour agrandir, vous avez aussi la possibilit de faire glisser un rectangle sur la zone cible. Vous pouvez enfin utiliser le menu droulant de zoom en haut droite de la scne, juste droite du champ indiquant le pourcentage de zoom, ou encore le menu Affichage> Zoom.
Figure 7.5
Loutil Zoom slectionn.
Dessin vectoriel
67
M slectionne loutil Zoom. CMd+ (Mac) ou Ctrl+ (Win) divise par deux le pourcentage daffichage. CMd+1 (Mac) ou Ctrl+1 (Win) restaure laffichage 100%. Enfoncer OptiOn (Mac) ou alt (Win) fait basculer temporairement dune option de zoom lautre.
Raccourci Raccourci Raccourci
Ayant zoom sur la scne, des lments se retrouvent hors cadre. Slectionnez loutil Main dans le panneau Outils (voir Figure7.6) pour faire glisser la scne et replacer dans le cadre les lments qui vous intressent.
Figure 7.6
Loutil Main slectionn.
H (pour Hand) slectionne loutil Main. Enfoncer la barre despace active temporairement loutil Main. Faites glisser la scne en maintenant la barre despace enfonce. La relcher vous ramne loutil prcdemment slectionn.
La Figure7.4 vous a montr que les rgles saffichent en haut et gauche de la scne. Elles servent placer des guides, positionner et mesurer des lments. Affichage> Rgles vous permet de les montrer/masquer. Vous pouvez choisir via un menu droulant les units des rgles dans les Proprits du document, accessibles par Modification> Document.
CMd+OptiOn+Maj+r (Mac) ou Ctrl+alt+Maj+r (Windows) bascule laffichage des rgles.
La grille est souvent une aide apprciable la composition de la scne. Son affichage bascule grce Affichage> Grille> Afficher la grille. La grille est paramtrable: Affichage> Grille> Modifier la grille ouvre la bote de dialogue Grille reproduite Figure7.7. Vous pouvez y choisir sa couleur, y fixer la taille dun carreau. Les deux commandes de Grille sont galement accessibles dans le menu contextuel qui apparat au clic droit sur la scne.
Figure 7.7
Paramtrage de la grille.
68
Raccourci
Flash CS5
Ctrl+ (Windows) bascule laffichage de la grille (sur Mac, CMd+ devrait faire de mme, mais affiche en fait 400 %). OptiOn+CMd+G (Mac) ou alt+Ctrl+G (Windows) ouvre la bote de dialogue Grille. Maj+CMd+ (Mac) ou Maj+Ctrl+ (Windows) bascule laccrochage de la grille.
Une limite de la grille est dtre espacements rguliers. Les guides, plus souples ce niveau, sont de bons auxiliaires pour aligner des lments. Pour les utiliser, vous devez dabord afficher les rgles. Vous crez un nouveau guide en cliquant sur lune de celles-ci puis en glissant le guide sur la scne. Vous avez toute libert pour le repositionner ensuite au besoin. Laffichage des guides bascule grce Affichage> Guides> Afficher les guides. La bote de dialogue Guides, reproduite Figure7.8, vous permet de paramtrer les guides. Les commandes de guides sont galement accessibles dans le menu contextuel qui apparat au clic droit sur la scne. Pour supprimer un guide, glissez-le en dehors. Verrouills, les guides ne sont plus dplaables.
Figure 7.8
Paramtrage des guides.
CMd+; (Mac) ou Ctrl+; (Windows) bascule laffichage des guides. OptiOn+CMd+; (Mac) ou alt+Ctrl+; (Windows) bascule le verrouillage des guides. Maj+OptiOn+CMd+G (Mac) ou Maj+alt+Ctrl+G (Windows) ouvre la bote de dialogue Guides. Maj+CMd+; (Mac) ou Maj+Ctrl+; (Windows) bascule laccrochage des guides.
Raccourci Raccourci
Laccrochage facilite lalignement. Au moment o vous glissez un lment sur la scne, des lignes pointilles apparaissent qui permettent de laligner sur dautres lments dj prsents. Affichage > Accrochage > Aligner par accrochage bascule lalignement par accrochage. Dans ce mme menu Affichage > Accrochage > vous pouvez slectionner les lments concerns par laccrochage: grille, guides, pixels et/ou objets. Laccrochage est paramtrable: Affichage> Accrochage> Modifier lalignement par accrochage ouvre une bote de dialogue qui aprs clic sur le bouton Avanc se prsente telle que reproduite Figure7.9. Vous pouvez spcifier un seuil en pixels en dessous duquel lobjet accroche un bord de la scne, ainsi quun espacement minimum entre objets. Enfin, il est aussi question daccrochage dans les Options de loutil Slection (voir Fiche14). Lorsque loption Accrochage est coche, le pointeur sorne dun anneau noir lorsquun lment est gliss, lequel devient plus gros lorsque lon passe sous le seuil de sensibilit de laccrochage.
Maj+CMd+U (Mac) ou Maj+Ctrl+U (Windows) bascule laccrochage des objets.
Dessin vectoriel
69
Figure 7.9
Paramtrage avanc de lalignement par accrochage.
Vous rglerez vos prfrences de dessin en slectionnant Modier > Prfrences, puis la catgorie Dessin. Il y a l des paramtres de sensibilit et de comportement des outils de dessin cruciaux pour: Le trac de droites. Afficher laperu de loutil Plume, Joindre les lignes (voir Fiche 9). Le trac de courbes. Afcher des curseurs prcis, Lisser les courbes, Reconnatre les lignes, Reconnatre les formes (voir Fiche10). Le trac de primitives. Reconnatre les formes (voir Fiche 11). Le dessin main leve. Lisser les courbes (voir Fiches 10 et12).
Figure 7.10
Prfrences de dessin.
70
Flash CS5
dition
Le menu Modifier contient les commandes traditionnelles de couper, copier et coller. Flash se singularise par deux variantes de la commande de coller : Modifier > Coller en place colle les lments coups ou copis aux coordonnes quils avaient lorigine, par opposition Modifier> Coller au milieu qui les colle au milieu de la scne. Remarquez aussi la commande Modifier> Dupliquer qui cre un duplicata des lments slectionns et le place 10pixels droite et plus bas que loriginal. Avant dapprendre utiliser les outils de dessin vectoriel dans les fiches qui suivent, il est bon dapprendre effacer. Double-cliquer sur loutil Gomme vide la scne de tout contenu. Loutil Gomme a trois options. La premire est un menu relatif au choix dune forme (et implicitement dune taille) de gomme. Par dfaut, la seconde option, Robinet, est dsactive et seules sont effaces par la gomme les parties de trait ou de forme que celle-ci survole. Une fois active, tout trait ou toute forme clique par la gomme est effac entirement. Notez que pour effacer un trait ou une forme, vous pouvez aussi le ou la slectionner (voir Fiche14), puis appuyez sur la touche sUppr. La dernire option est un menu de choix parmi diffrents modes: Efface normalement. Efface les zones remplies. Naffecte que les formes. Efface les lignes. Efface les zones remplies slectionnes. la fin, tout ce qui a t gomm et nappartenait pas la slection est restaur. Efface lintrieur. Ncessite de cliquer lintrieur dune forme et la fin, tout ce qui a t gomm et nappartenait pas la forme est restaur.
Figure 7.11
Loutil Gomme et ses trois options.
Fiche 8
Comprendre les modes de dessin

Fusion de dessins
Nous lavons mentionn en prsentation de lenvironnement la Fiche 7, Flash possde deux modes de dessin: la fusion de dessins par opposition au dessin dobjets. Commenons par le mode de fusion, qui est dune part une spcificit Flash lapproche dans les autres environnements de dessin vectoriel comme Adobe Illustrator relve du dessin dobjets et dautre part le mode de dessin par dfaut. Il importe donc que vous en compreniez bien le principe. Lorsqu la mme image dun mme calque (ces notions seront prcises au Cha-
Dessin vectoriel
71
pitre3) deux lignes et/ou formes sont amenes se chevaucher, selon leurs natures et leurs couleurs, un oprateur dunion, de poinon ou de dcoupe sapplique automatiquement ds que vous dslectionnez llment que vous venez de dplacer sur dautres. Dans le cas de formes seules (cest--dire dpourvues de lignes de contour) et de mme couleur, elles fusionnent en une seule forme inscable. Cest loprateur dunion illustr Figure8.1. Dans le cas de formes toujours seules, mais de couleurs diffrentes, celle qui recouvre les autres retire des pixels celles recouvertes. Cest loprateur de poinon illustr Figure8.2. Il y a galement poinon si la forme qui recouvre est de mme couleur, mais possde une ligne de contour.
Figure 8.1
Union: les deux formes sont de mme couleur. Plac au-dessus de lautre ( gauche), le croissant fusionne avec elle aprs dslection, ce que lon observe en slectionnant nouveau ( droite).
Figure 8.2
Poinon: les deux formes sont de couleurs distinctes. Plac au-dessus de lautre ( gauche), le croissant poinonne celle-ci, ce que lon observe en le dplaant nouveau aprs lavoir dslectionn puis reslectionn ( droite).
72
Flash CS5
Dans les autres cas dinteraction de ligne(s) et de forme(s), celles-ci se dcoupent les unes les autres. La Figure8.3 en donne un exemple. Un autre exemple est celui de deux segments de lignes qui en se croisant deviennent quatre segments de ligne rayonnant du point dintersection. Il est illustr la Figure8.5.
Figure 8.3
Dcoupe: le cercle trac par dessus le croissant ( gauche) dcoupe la forme de celui-ci en fragments, ce que lon observe en dplaant lun deux aprs lavoir slectionn ( droite). On observerait la mme chose pour les lignes de contour du croissant.
En soi le principe de ces oprateurs nest pas nouveau, mais cest leur application implicite qui dconcerte souvent le novice. Une fois ces rgles dinteraction au chevauchement comprises, vous avez l un moyen puissant de produire une certaine complexit graphique en jouant sur la succession doprations additives (union), soustractives (poinon) et sparatives (dcoupe). Dans les situations o ces comportements par dfaut dunion, de poinon et de dcoupe sont indsirables, vous avez toujours le recours de protger un ensemble dlments en en faisant un groupe (Modication> Grouper voir Fiche32) ou en les plaant sur un calque spar (voir Fiche22). Lautre solution consiste passer au dessin dobjets.
Dessin dobjets
Ce second mode de dessin vous sera plus naturel puisque vous laurez coup sr rencontr dans votre logiciel de dessin vectoriel habituel. Dans ce mode, tout lment trac possde une identit dobjet qui le prserve des interactions (dcrites prcdemment) avec dautres objets. Lorsque vous faites du dessin point par point (outil Plume), du trac de formes gomtriques (outils Ligne, Ovale, Rectangle ou Polygone), ou encore du dessin main leve (outils Crayon ou Pinceau), vous disposez dans le panneau Outils dune option Dessin dobjet, sous la forme dun bouton, relev par dfaut. La Figure8.4 vous montre ce bouton enfonc (sous loutil Plume).
Dessin vectoriel
73
Figure 8.4
Loutil Ligne slectionn avec loption Dessin dobjet.
Sur la Figure8.5, les deux segments de ligne ont t tracs en mode fusion de dessins ( gauche), si bien que les lignes se dcoupent au point dintersection, ce que lon observe en slectionnant un segment et en le dplaant ( droite).
Figure 8.5
Deux lignes traces en mode fusion de dessins.
Sur la Figure 8.6, les deux segments de ligne ont t tracs en mode dessin dobjets, ce que dnote le rectangle englobant le dernier segment trac ( gauche). Lidentit dobjet est claire lorsque lon dplace ce segment de ligne: dans ce cas, il ny aucune dcoupe ( droite).
Figure 8.6
Deux lignes traces en mode dessin dobjets.
Raccourci
j bascule entre le mode de dessin par fusion et le mode de dessin dobjet.
Le mode de dessin dobjets ne vous interdit pas lutilisation doprateurs de composition, mais cette fois-ci, vous les appliquerez explicitement sur votre slection dobjets via Modication> Combiner les objets, menu qui vous propose les quatre oprateurs dunion, dintersection, de poinon et de recadrage. Avec les oprateurs dunion, dintersection et de poinon, on retrouve un comportement dsormais familier. Lintersection produit naturellement la partie commune aux lments slectionns. Pour le recadrage, celui-ci se fait selon la forme du dessus. La Figure8.7 illustre leffet de ces quatre oprateurs.
74
Flash CS5
Contrairement lunion et lintersection, poinon ou recadrage peuvent produire des fragments dconnects. Sauf utiliser lhistorique (voir Fiche 2), lunion est une fusion irrversible, ce qui la distingue dun groupe sur lequel il est possible de revenir tout moment grce la commande Modication> Dissocier. Cette mme commande vous sera galement utile si vous souhaitez retravailler en fusion de dessin des lments tracs lorigine en dessin dobjets. Pour effectuer la conversion en sens inverse: slectionner llment sur la scne puis Modication> Combiner les objets> Union.
Figure 8.7
En haut: deux objets dessins. En bas, de gauche droite respectivement: leur union, leur intersection, leur poinon et leur recadrage.
Dessin de primitives
Depuis sa version CS3, Flash a vu lapparition de deux primitives rectangle et ovale (elles sont traites la Fiche 11). Ce qui peut premire vue tre considr comme un troisime mode de dessin est dans son essence une approche par objet. Ces primitives sont donc considrer comme une forme spcifique du second mode de dessin, le dessin dobjets. Leur spcificit tient au fait que la forme primitive soit paramtrable, les valeurs de paramtres pouvant tre modifies aprs trac dans le panneau Proprits.
Fiche 9
Tracer des droites

Droite avec loutil Ligne
Cest le plus naturel pour tracer un segment de droite. Slectionnez-le dans le panneau Outils, puis glissez le pointeur (en forme de rticule) sur la scne: le point de dpart est dfini lorsque vous appuyez; le point darrive lorsque vous relchez. Le segment de droite que Flash trace entre ces deux points a les attributs de trait courants (paisseur, couleur, style, embouts, raccords) spcifis dans le panneau Proprits. Soit vous laurez fait pralablement au trac, soit vous le ferez aprs coup aprs slection du segment (voir Fiche14).
Dessin vectoriel
75
Comme dans la plupart des logiciels de graphisme, en maintenant la touche Maj enfonce durant le trac, vous contraignez Flash ne tracer que des segments de droites dont langle est multiple de45. Pour tracer une polyligne, cest--dire une succession de segments de droite, il faut dmarrer le trac dun nouveau segment suffisamment proche de lextrmit du segment prcdent pour que Flash fusionne les deux en un mme trac. Demander Afchage> Accrochage> Accrocher aux objets vous facilitera la tche. Vous pouvez galement donner une tolrance maximale dans les prfrences, catgorie Dessin, en slectionnant Peut tre distant pour Joindre les lignes (option qui na de sens que si laccrochage est activ). En cliquant au-del de la tolrance, vous dmarrerez un nouveau segment distinct du prcdent. Nanmoins, tracer une polyligne avec loutil Ligne est quelque peu laborieux: en chaque point intermdiaire, vous devez relcher le bouton de la souris pour spcifier le point darrive du segment courant, cliquer sans avoir dplac la souris pour le point de dpart du nouveau segment, glisser, etc.
Droite avec loutil Plume

Il est plus simple de tracer une polyligne avec loutil Plume. Son fonctionnement est similaire ce quil est dans Illustrator. Slectionnez-le dans le panneau Outils. Chaque clic sur la scne cre un nouveau point et Flash le relie par un segment de droite au prcdent. Lopration est plus simple quavec loutil Ligne puisquil ny a pas faire glisser, ni recliquer en restant dans la zone de tolrance. Le trac peut aussi tre contraint des horizontales, des verticales et des diagonales via la touche Maj. En demandant Afcher laperu de loutil Plume dans les prfrences, catgorie Dessin, le segment de droite recherch saffiche avant que vous nayez cliqu, au fur et mesure que vous dplacez le pointeur. En cliquant sur le dernier point, ou en double-cliquant au moment de crer ce dernier, ou encore dun CMd+CliC (Mac) ou Ctrl+CliC (Windows) en dehors du trac, vous terminez celui-ci en le laissant ouvert. Pour le terminer en le fermant, cliquez sur le tout premier point: vous verrez le pointeur sorner dun petit rond. Une fois un trac termin, le clic suivant en dmarre un nouveau. Au fur et mesure du trac, points et segments ont t slectionns par Flash, ce qui ntait pas le cas avec loutil Ligne. Noubliez pas quen mode de fusion de dessin, sur un mme calque, toute ligne qui coupe dautre lments les dcoupe (reportez-vous la Fiche 8).
Droite avec loutil Crayon

En utilisant loutil Crayon touche Maj enfonce, vous pouvez galement tracer des horizontales, des verticales et des diagonales.
76
Raccourci
Flash CS5
n slectionne loutil Ligne, p (pour Pen) loutil Plume et Y loutil Crayon.
Attributs de trait
Ayant slectionn une ligne, vous avez accs ses attributs de trait dans le sous-panneau Remplissage et trait du panneau Proprits illustr Figure9.1. Vous pourrez aussi rgler les valeurs de ces attributs avant dutiliser un outil produisant du trait (Plume, Ligne, Ovale, Rectangle, Polygone, Crayon) ou loutil Encrier qui sert justement modifier les valeurs dattributs de trait dune ligne.
Figure 9.1
Les valeurs dattributs de trait dun segment de ligne droite.
Le clic sur la puce Couleur de trait ouvre un nuancier qui vous offre diverses faons de choisir une couleur (voir Fiche17). La glissire Trait permet de rgler lpaisseur de 0 200 pixels, la valeur ntant pas ncessairement entire. Le Style du trait est par dfaut Uni, donc un trait plein (le terme Continu aurait t plus parlant). Le choix du Filet est particulier: il sagit dun trait plein n dpaisseur un pixel dcran en toutes circonstances, cest--dire quel que soit le redimensionnement sur la scne. Si la diffrence entre les autres choix nest pas vidente la seule lecture de leurs intituls (Discontinu, Pointill, Irrgulier, Pointill n ou Hachur), rassurez-vous: un aperu en est donn dans le menu droulant. droite du menu, un bouton Modifier le style de trait ouvre la bote de dialogue Style de trait dans laquelle vous avez accs tous les paramtres. Le mieux est dexprimenter. Le menu chelle rgit laffichage du trait lors dun zoom. Avec la valeur par dfaut Normale le redimensionnement se fait dans les deux directions horizontale et verticale. Vous pouvez choisir Horizontale, Verticale ou Aucune.
Dessin vectoriel
77
La case Repre est dcoche par dfaut, ce qui signifie que les points de contrle de la ligne peuvent avoir des valeurs dcimales, donc se trouver entre deux pixels. Ceci peut leur donner du flou au rendu. En cochant Repre, vous forcez lancrage des points de contrle sur les pixels, diminuant le flou de rendu. Dans Flash, lExtrmit des traits est par dfaut de type Arrondi, lembout rajout dpassant dune demi-paisseur de trait de lextrmit du segment de droite. Vous pouvez choisir un embout Carr de mme longueur ou Sans embout. De mme, le Sommet dtermine le raccord entre segments de ligne adjacents. Il est Arrondi par dfaut, mais peut aussi tre en Biseau ou En pointe. Dans ce dernier cas, la valeur entire En pointe, entre1 et60, multiplie par lpaisseur des segments de droite, donne la longueur au-del de laquelle la pointe est biseaute.
Fiche 10
Tracer des courbes

Courbe avec loutil Plume
Loutil Plume sert tracer point par point une srie de segments connects, chaque segment pouvant tre soit rectiligne soit courbe. Compar un outil de dessin main leve, son maniement est laborieux, mais il offre en contrepartie une grande finesse dans le contrle de la ligne trace. Avant daborder les aspects pratiques, il est sans doute utile de faire un rappel du vocabulaire relatif aux points de contrle dune courbe spline. Distinguons dabord entre points dancrage et points directeurs. Les premiers, galement prsents dans une polyligne (suite de segments de droite), sont des points par lesquels passent la polyligne ou la courbe. Les seconds nont dexistence que pour une courbe. Ils sont associs un point dancrage donn et constituent avec lui une ou deux poignes directrices. En agissant sur ces poignes, vous dterminez les demi-tangentes la courbe au point dancrage, cest--dire selon quelle direction et quelle courbure elle arrive et repart dudit point dancrage. On appelle parfois ligne directrice la droite tangente, support par dfaut des deux poignes. Un point dinflexion est un point dancrage reliant deux segments de courbe, donc un point ayant deux demi-tangentes. Un point dangle est un point dancrage qui a au plus une demitangente, donc qui relie soit un segment de droite et un segment de courbe, soit deux segments de droite. Les courbes splines servent aussi en animation. Vous les retrouverez avec les trajectoires danimation sur la scne et plus gnralement avec les courbes de variation des proprits (reportez-vous au Chapitre 4). La procdure dutilisation de loutil Plume est explique la section Droite avec loutil Plume, Fiche 9, pour le trac de polyligne. Pour tracer une courbe procdez de mme, mais
78
Flash CS5
aprs avoir cliqu, au lieu de relcher, glissez maintenant le bouton de la souris enfonc pour faire apparatre les poignes directrices. Lorsque vous relchez, le segment de courbe est compltement dni. Continuez de proche en proche dfinir les points dancrage de votre courbe, avec ou sans points directeurs.
Figure 10.1
Les points de contrle A, B, B1, B2, C et C1 dune courbe ferme. A, B et C sont trois points dancrage; B1, B2 et C1 trois points directeurs. La courbe a deux poignes directrices: (B1, B, B2) et (C, C1). (B1,B2) et (C,C1) sont des droites directrices. B est un point dinflexion. A et C sont des points dangle.
B1
B2
C1
Figure 10.2
Pointeurs des neuf variantes de loutil Plume.
Au cours de votre travail avec loutil Plume, selon le contexte, vous en rencontrerez lune des neuf variantes illustres Figure10.2. Avant de cliquer le premier point dancrage, loutil se prsente avec le pointeur n1. Pour les points dancrage suivants, tant que vous ne survolez aucun trac, le pointeur reste le n2. Lorsque vous survolez un trac en dehors de tout point dancrage, loutil devient Ajouter un point dancrage (pointeur n3). Si vous survolez un point dancrage, et que celui-ci a des poignes directrices, loutil devient Supprimer les poignes de Bzier (pointeur n8), signifiant que vous allez transformer le point dinexion en point dangle. Si le point dancrage survol est un point dangle, loutil devient Supprimer un point dancrage (pointeur n4). Si vous survolez un point dancrage extrmit dun autre trac, loutil devient Poursuivre le trac (pointeur n5), signifiant que vous allez complter le trac en question. Votre trac peut enfin rejoindre un point dancrage existant: soit vous bouclez sur le trac courant (pointeur n6), soit vous en rejoignez un autre (pointeur n7). Vous avez aussi la possibilit de slectionner certaines de ces variantes dans le menu Outil Plume du panneau Outils: Ajouter un point dancrage (pointeur n3), Supprimer un point dancrage (pointeur n4) et Convertir un point dancrage (pointeur n9).
Dessin vectoriel
79
Raccourci
p slectionne loutil Plume, = loutil Ajouter un point dancrage, loutil Supprimer un point dancrage et C loutil Convertir un point dancrage.
En cochant loption Afcher des curseurs prcis dans la fentre des prfrences, catgorie Dessin, le pointeur de plume est remplac par un rticule qui vous permet effectivement de cliquer plus prcisment vos points de contrle.
Courbe avec loutil Crayon

Tracer une courbe au crayon est moins prcis puisque vous nagissez plus au point par point, mais globalement laide dun outil de dessin main leve (via la souris ou mieux, le stylet dune tablette graphique). Le crayon Flash se distingue par les diffrents modes quil propose: Redresser, Lisser et Encre. Mode du crayon est accessible dans la partie options du panneau Outils, une fois que vous avez slectionn loutil Crayon, comme le montre la Figure10.3. Cliquez et glissez avec la souris pour tracer la courbe.
Figure 10.3
Loutil Crayon slectionn et son menu Mode du crayon droul.
La Figure10.4 vous montre la diffrence entre les trois modes de loutil Crayon. Le geste du trac est similaire dans chaque cas. En mode Redresser le mode par dfaut votre trac est remplac par une courbe qui se rapproche de, voire dans certains cas ralise, une approximation par des segments de droite. En mode Lisser, votre trac est au contraire adouci, rendu plus souple. Enfin, en mode Encre, aucune des transformations automatiques prcdentes na lieu: votre trac est conserv tel quel avec ses ventuelles irrgularits et son trembl. Vous pouvez doser quel degr ont lieu ces transformations automatiques dans la fentre des Prfrences (Modier> Prfrences), catgorie Dessin: Lisser les courbes. Valeur Dsactiv(e), Irrgulier, Normal ou Lisser. Reconnatre les lignes. Valeur Dsactiv(e), Prcis, Normal ou Approximatif. Reconnatre les formes. Valeur Dsactiv(e), Prcis, Normal ou Approximatif.
80
Flash CS5
Notez enfin que mme lorsque vous choisissez Dsactiv(e) pour les deux dernires options, les tracs au Crayon subissent un lger lissage.
Figure 10.4
Trois tracs similaires effectus respectivement de haut en bas en modes Redresser, Lisser et Encre.
Avec loutil Crayon, vous tracez uniquement des traits: en effet, lorsquil est slectionn vous navez aucun accs la couleur de remplissage. Si vous souhaitez remplir un contour ferm trac au crayon, il faut cliquer lintrieur avec loutil Pot de peinture (voir section Modifier les attributs de remplissage, Fiche 15). linverse, loutil Pinceau (Fiche12), qui fonctionne de manire similaire au crayon, produit des formes. Et pour ajouter un trait une forme trace au pinceau, il faut cliquer son contour avec loutil Encrier (section Modifier les attributs de trait, Fiche 15).
Retravailler la courbe au niveau des points de contrle

Loutil Sous-slection permet dajuster aprs coup nimporte quel point dun trac. Un premier clic sur un trac, ligne ou contour dune forme, en rvle les points de contrle. Les points dancrage apparaissent sous forme de carrs, creux en labsence de slection. Cliquez sur lun deux pour le slectionner, ou pour une slection multiple glissez un rectangle ou cliquez avec la touche Maj enfonce. Lorsquun point dancrage est slectionn, des poignes directrices apparaissent: celles ventuellement incidentes au point dancrage et celles aux autres extrmits des segments de courbes passant par le point dancrage. Dans le cas le plus courant, illustr Figure10.5, cela donne quatre poignes directrices visibles pour un point dancrage slectionn. La slection dun ou plusieurs points faite, vous pouvez le ou les dplacer la souris. laide des flches du clavier, le dplacement est de 1pixel dcran et de 10 si la touche Maj est enfonce, ce qui veut dire que la scne tant affiche 400%,
Dessin vectoriel
81
le dplacement sera dun quart de pixel de la scne et de 2,5pixels de la scne si la touche Maj est enfonce.
Figure 10.5
Slection dun point dancrage dun trac.
Vous pouvez jouer sur la poigne directrice qualitativement (la faire pivoter modifie la tangente de la courbe au point dancrage) et quantitativement (lloigner de son point dancrage augmente la courbure). Supprimez un point dancrage slectionn avec la touche sUppr. Parfois, vous souhaiterez dsolidariser les deux demi-tangentes en un point dancrage, qui par dfaut sont alignes. En cliquant sur une poigne avec loutil Sous-Slection la touche OptiOn (Mac) ou alt (Windows) enfonce, vous pouvez la faire glisser indpendamment de la seconde. Et en la faisant glisser jusquau point dancrage, vous pouvez mme la supprimer. De mme, vous transformerez un point dangle en point dinflexion, donc ferez apparatre la ou les poignes directrices manquantes, en cliquant sur le point dancrage puis, en faisant glisser avec loutil Sous-Slection la touche OptiOn (Mac) ou alt (Windows) enfonce.
Figure 10.6
Cration dun point dangle.
82
Flash CS5
Retravailler la courbe au niveau des segments

Si le travail au niveau des points de contrle est courant dans tous les environnements vectoriels, Flash a une spcificit: loutil Slection vous permet dajuster nimporte quel segment (sous rserve que le trac ne soit pas slectionn, auquel cas vous le dplaceriez). Il vous suffit de cliquer sur le trac nimporte o en dehors dun point dancrage, puis de faire glisser, comme le montre la Figure10.7. Vous pouvez mme ainsi incurver une polyligne, cest--dire transformer une succession de segments de ligne droite en segments de courbe.
Figure 10.7
Remodelage dun segment de courbe.
Retravailler la courbe globalement

Flash est donc dot de facults de lissage variations de courbure plus douces et de redressement rapprochement dune approximation polygonale. Nous avons voqu ci-dessus lapplication automatique de ces traitements pendant le trac. Or, aprs coup, vous avez la possibilit daller au-del en en demandant explicitement une nouvelle passe, ventuellement de faon rpte. Slectionnez lensemble de la ligne ou de la forme dun double-clic avec loutil Slection. Cet outil vous offre deux options: la premire, Lisser, est illustre Figure10.8. La seconde, Redresser. Rappelons que Redresser fait aussi appel la reconnaissance de formes (ovale, rectangle, triangle). Les prfrences mentionnes la section Courbe avec loutil Crayon, Fiche 10, affectent aussi les modes Redresser et Lisser de loutil Slection. Le degr de lissage est modifiable dans le panneau Proprits (voir Figure10.3): la valeur de Lissage vaut par dfaut 50 et peut varier de 1 100. Des paramtrages avancs ont t introduits avec la version CS4: les deux botes de dialogue Modication> Forme> Lissage avanc et Modication> Forme> Redressement avanc sont illustres respectivement aux Figures 10.9 et10.10
Dessin vectoriel
83
Figure 10.8
La courbe de la Figure10.5 aprs un certain nombre dtapes de lissage.
Figure 10.9
La bote de dialogue Lissage avanc.
Figure 10.10
La bote de dialogue Redressement avanc.
Enfin, souvent vous ne chercherez pas tant transformer le trac qu en produire une version visuellement proche, mais comportant beaucoup moins de points de contrle, essentiellement pour allger la taille du fichier publi, donc son temps de tlchargement, mais aussi de rendu sur la machine cliente. Le cas se prsente surtout avec les dessins main leve (outils Crayon et Pinceau), mais lon fait aussi parfois des tracs la Plume inutilement riches en points dancrage. Aprs avoir slectionn le trac traiter, demandez Modication> Forme> Optimiser, ce qui ouvre la bote de dialogue Optimiser les courbes, reproduite la Figure10.11.
84
Flash CS5
Figure 10.11
La bote de dialogue Optimiser les courbes.
On y trouve un curseur Intensit de loptimisation qui permet de doser leffet avec une valeur allant de0 100. Si vous cochez Afcher le message des totaux, en fin de traitement une bote de dialogue en affiche un bilan chiffr. Demander un Aperu vous aidera doser loptimisation.
Fiche 11
Tracer de formes primitives

Flash vous propose cinq formes prdfinies regroupes dans un mme menu du panneau Outils, illustr la Figure11.1. Aprs avoir slectionn loutil, cliquez-glissez sur la scne le rectangle englobant la forme. Les attributs de remplissage courants sappliquent (si aucun remplissage nest visible, dsactivez laffichage par contours: Afchage> Mode Aperu> Complet).
Figure 11.1
Le menu des outils de formes.
Formes standard
Pour les formes standard Rectangle et Ovale, en enfonant la touche Maj le trac peut tre contraint respectivement un carr et un cercle. Pour ces deux formes, vous avez galement la possibilit de spcifier numriquement. alt+cliquez sur la scne avec loutil Rectangle pour faire apparatre la bote de dialogue Paramtres du rectangle illustre Figure11.2. Les paramtres sont parlants. Par dfaut, le point alt-cliqu sera le centre du rectangle englobant. Ce sera son coin suprieur gauche si vous dcochez Tracer partir du centre. Le Rayon dangle vaut au maximum la moiti de la plus petite dimension du rectangle. Il est possible de lui donner une valeur ngative, ce qui produit un effet dcoratif de concavit au lieu de convexit. Enfin, les ches haut et bas du clavier permettent de rgler interactivement pendant le trac la valeur du rayon dangle.
Dessin vectoriel
85
Figure 11.2
La bote de dialogue Paramtres du rectangle.
La bote de dialogue Paramtres de lovale est similaire: Largeur, Hauteur et Tracer partir du centre. Le rectangle de slection gauche de la Figure11.3 montre quun ovale est par dfaut un objet de dessin. La forme est constitue de points de contrle que vous pouvez slectionner (au centre), voire dplacer pour remodeler la forme ( droite).
Figure 11.3
Un ovale est trac en mode dessin dobjet; ses points dancrage peuvent tre slectionns, voire modifis.
Formes primitives
Les formes standard prcdentes, mme spcifies numriquement, ne sont plus ditables, au sens o il nest plus possible de revenir sur les valeurs de leurs paramtres. Les formes primitives sont par contre reparamtrables tout instant dans le panneau Proprits. La Figure11.4 montre un rectangle trac avec loutil Primitive rectangle. Dans la partie Options du rectangle du panneau Proprits, il est possible de rgler interactivement la valeur du rayon dangle via la glissire ou directement dans les champs numriques. Par dfaut, les quatre valeurs sont identiques, mais vous pouvez au besoin les dsolidariser en cliquant sur licne de chane.
Figure 11.4
Une Primitive rectangle.
86
Flash CS5
Loutil Primitive ovale fonctionne sur le mme principe. Les options de lovale Angle de dpart, Angle de n et Rayon interne sont illustres sur la Figure11.5. Si une forme primitive est ditable numriquement, elle nest par contre pas modelable comme nimporte quelle autre forme. Les points qui apparaissent sur son trac ne sont pas des points dancrage classiques, mais des points de contrle des valeurs de ses paramtres: rayon dangle pour une primitive rectangle; angles de dpart, de n et rayon interne pour une primitive ovale. Utilisez pour cela loutil Sous-slection.
Figure 11.5
Une Primitive ovale.
Si vous souhaitez nanmoins convertir une forme primitive en forme standard pour la remodeler par exemple, double-cliquez la avec loutil Slection et validez lavertissement reproduit Figure11.6.
Figure 11.6
Modification du trac dune forme primitive.
Rappelons que loption Redresser de loutil Crayon fait appel la reconnaissance de formes (voir Fiche10). Vous avez donc aussi la solution de dessiner main leve (mais dun seul geste, sans reprise) une approximation de lovale, du rectangle ou du triangle que vous souhaitez.
Raccourci
O slectionne loutil Ovale, r loutil Primitive rectangle et Y loutil Crayon.
Autres formes
Les dernires formes prdfinies sont fournies par loutil Polygone. Pour tre exact, cet outil permet de tracer des polygones rguliers, cest--dire des formes composes de segments de droites tous de mme longueur (triangles quilatraux, hexagones, etc.). Le sous-panneau Paramtres de loutil du panneau Proprits contient un bouton Options donnant accs la
Dessin vectoriel
87
bote de dialogue reproduite la Figure11.7. Le Style est par dfaut Polygone, mais vous pouvez choisir toile. Le Nombre de cts est maximum 32. La Taille des branches de ltoile peut varier de 0,10 1,00. Cliquez pour dsigner le centre de la forme, puis glissez pour dfinir sa taille et son orientation. Si vous enfoncez la touche Maj pendant le trac, lorientation est contrainte un nombre limit dangles. Sachez enfin que via Extension Manager, la couche dextension JavaScript de Flash, vous pouvez rajouter dautres formes proposes par des dveloppeurs tiers. En faisant une recherche sur le mot drawing ladresse www.adobe.com/cfusion/exchange (section Flash), vous trouverez des spirales, des formes en L, des flches, etc. Aprs tlchargement, installation de lextension et redmarrage de Flash, les nouvelles formes apparatront dans le menu aprs loutil Polygone.
Figure 11.7
La bote de dialogue Paramtres de loutil Polygone.
Fiche 12
Tracer au pinceau
Loutil Pinceau est un outil de dessin main leve, comme le Crayon (dcrit la section Courbe avec loutil Crayon, Fiche 10). la diffrence de ce dernier, il produit des formes et non des traits. Comme lui, il dpend de la valeur choisie dans la fentre des Prfrences, catgorie Dessin, pour le paramtre Lisser les courbes. La Figure 12.1 montre les sept options qui apparaissent dans le panneau Outil lorsque le Pinceau y est slectionn.
Figure 12.1
Loutil Pinceau slectionn et ses sept options: Dessin dobjet, Verrouiller le remplissage, Mode du pinceau, Taille du pinceau, Forme du pinceau, Utiliser la pression et Utiliser linclinaison.
88
Flash CS5
La premire option est la bascule entre modes de dessin (dessin dobjets ou fusion de dessins, dtaills la Fiche 8). La seconde option, Verrouiller le remplissage, est traite la section Modifier les attributs de remplissage, Fiche 15.
Raccourci
b (pour Brush) bascule loutil Pinceau loutil Pinceau pulvrisateur et rciproquement, j bascule le mode de dessin.
Pour le Mode du pinceau, cinq choix sont possibles, reproduits Figure12.2. Le rsultat de chacun de ces choix est illustr sur la Figure12.3 o le mme objet reoit le mme coup de pinceau (dbutant sur lobjet, descendant et se terminant en dehors de lobjet). Peint normalement est le mode par dfaut dans lequel tout est recouvert. Peint les zones remplies ne recouvre pas les traits. Peint derrire ne recouvre ni les traits, ni les remplissages. Peint la slection ne conserve du coup de pinceau que la partie intersectant la slection. Enfin, Peint lintrieur ne conserve du coup de pinceau que la partie intersectant la forme sur laquelle il a dbut.
Figure 12.2
Le menu des modes du pinceau.
Figure 12.3
Les cinq modes du pinceau en action: de gauche droite respectivement Peint normalement, Peint les zones remplies, Peint derrire, Peint la slection et Peint lintrieur.
Deux menus permettent de choisir la Taille du pinceau et la Forme du pinceau. Enfin, si votre ordinateur est quip dune tablette graphique sensible la pression, vous tirerez parti des deux dernires options Utiliser la pression et Utiliser linclinaison pour obtenir avec votre stylet des effets de pleins et de dlis comme celui de la Figure12.4 (il est galement conseill de choisir une forme de pinceau en diagonale).
Dessin vectoriel
89
Figure 12.4
Pleins et dlis grce aux options de stylet.
Fiche 13
Utiliser les outils Pinceau pulvrisateur et Dco

La version CS4 de Flash a vu lintroduction de ces deux outils de dessin qui ont en commun de procder par rplication dun ou plusieurs motifs. Les motifs utiliss doivent avoir t convertis en symboles graphique ou clip danimation au pralable. La bibliothque et ses symboles seront traits la Fiche33. Il suffit ici davoir lesprit que la cration dun symbole simpose ds lors quun motif est rpt en de multiples occurrences, ce qui est prcisment le cas avec ces outils de dessin dcoratif. Soyez bien conscient que le graphisme produit avec ces outils diffre du dessin vectoriel ordinaire en ce sens que vous ne pourrez plus le retoucher ensuite, par exemple avec loutil Plume.
Loutil Pinceau Pulvrisateur

Loutil Pinceau Pulvrisateur appartient au mme menu que loutil Pinceau. Par dfaut, aucun symbole-motif nest choisi et loutil est un arographe classique qui vaporise des pixels de la couleur spcifie via la puce de couleur du sous-panneau Symbole du panneau Proprits (les couleurs standard de trait et de remplissage sont sans effet ici). Pour exploiter pleinement loutil Pinceau Pulvrisateur, la premire chose faire aprs lavoir slectionn est de dsigner le motif en cliquant sur le bouton Modifier du sous-panneau Symbole. Ceci ouvre la bote de dialogue Slectionner un symbole grce laquelle vous pouvez choisir le symbole-motif dans la bibliothque. Au retour, son nom saffiche gauche du bouton Modifier: symbEtoile dans lexemple de la Figure13.1 o lon a ralis un ciel toil en vaporisant alatoirement des occurrences dun motif de scintillement dtoile. Si vous prvoyez dutiliser plusieurs reprises le symbole comme motif, cocher la case Forme par dfaut vous vitera davoir le slectionner chaque fois. La puce de couleur est inactive ds quun symbole est slectionn.
90
Figure 13.1
Un semis alatoire dtoiles ralis laide de loutil Pinceau pulvrisateur.
Flash CS5
Loutil Pinceau Pulvrisateur a quelques autres paramtres relatifs la taille et lorientation des duplicatas. En cochant Mise lchelle alatoire, les occurrences du motif auront des tailles horizontale et verticale alatoires dun pourcentage compris entre 0 et la valeur que vous aurez spcifie dans Largeur de lchelle et Hauteur de lchelle (50% minimum). En cochant Rotation alatoire, comme dans lexemple, chaque occurrence du motif a une orientation alatoire. Par contre, si vous dcochez Rotation alatoire et cochez Faire pivoter le symbole, lorientation change alatoirement dune touche de pinceau lautre, mais les occurrences du motif issues dune mme touche ont la mme orientation. Les paramtrages tant faits, il ne vous reste plus qu bomber (le pointeur de loutil est une bombe de peinture) en cliquant-glissant. Le dbit ntant malheureusement pas rglable, si vous ne voulez pas saturer votre dessin doccurrences du motif, il sera sans doute prudent de procder par clics successifs, sans glisser. Vous pouvez galement jouer sur la taille de la zone dapplication via les champs Largeur et Hauteur du sous-panneau Pinceau.
Raccourci
b (pour Brush) bascule du Pinceau au Pinceau Pulvrisateur et rciproquement.
Loutil Dco
Avec loutil Dco le symbole-motif nest plus rpliqu alatoirement, mais selon une structure prdfinie. Aprs slection de loutil, le sous-panneau Effet de dessin du panneau Proprits vous donne le choix, via un menu droulant, entre types de structures. Au trois dj prsentes dans la version CS4 (Remplissage vigne, Remplissage de la grille et Pinceau symtrique) sajoutent les sept nouveaux pinceaux suivants: 3D, Construction, Dcoration, Flammes, Fleurs, clairs et Arbres. Leffet Remplissage vigne gnre un motif vgtal partir de deux symboles-motifs Feuille et Fleur dsigns chacun via un bouton Modifier comme prcdemment. Au clic, une branche
Dessin vectoriel
91
de la couleur spcifie dans le sous-panneau Options avances est trace dans la direction spcifie par Angle de la branche (angle en degrs, CW signifiant clockwise, donc dans le sens des aiguilles dune montre). La branche se ramifie (Angle de la branche nouveau), des feuilles sont places et de temps en temps une fleur. Le processus sarrte par autointersections, mais sil tend remplir toute la scne, enfoncez la touche EsC pour le stopper. Une bonne stratgie consiste cliquer au centre avec par exemple un Angle de la branche de 45, puis cliquer nouveau au centre pour lancer le remplissage dans une autre direction avec par exemple un Angle de la branche de 160. Cest ce qui a t fait sur lexemple de la Figure13.2. La Longueur du segment a un effet dterminant, certaines valeurs pouvant produire des motifs circulaires. Exprimentez! Comme prcdemment, vous pouvez contracter ou dilater le motif via chelle du motif.
Figure 13.2
Leffet dcoratif Remplissage vigne.
Leffet Remplissage de la grille ralise un pavage rgulier partir du symbole-motif choisi. Vous pouvez en paramtrer lEspacement horizontal, lEspacement vertical et jouer l encore sur lchelle du motif. Leffet Pinceau symtrique se subdivise en quatre types de structures que vous choisissez dans le sous-panneau des Options avances: Reflet par rapport la ligne, Reflet par rapport au point, Faire pivoter autour du point ou Translation de la grille, qui produisent respectivement des structures symtrie axiale, symtrie centrale, rayonnantes ou en pavage gnralis. Aprs avoir spcifi le symbole-motif comme prcdemment, glissez le pointeur sur la scne pour crer la structure. Selon le type choisi, un certain nombre daxes verts apparaissent qui vous permettent de moduler interactivement les valeurs de ses paramtres
92
Flash CS5
via des poignes. La Figure13.3 montre ainsi comment la rotation de la poigne orne dun signe + joue sur la densit des motifs placs sur les diffrents cercles concentriques. Enfin, en cochant Tester les collisions vous empcherez les auto-intersections.
Figure 13.3
Deux paramtrages de leffet Pinceau symtrique (Faire pivoter autour du point).
Une fois dslectionn, le rsultat produit par loutil Dco est transform en groupe (les groupes seront traits la Fiche32). Il est dconseill de dgrouper celui-ci, sous peine de considrablement alourdir le fichier. Leffet 3D fonctionne selon le mme principe. Aprs avoir spcifi jusqu quatre symbolesmotifs, vous pouvez en pulvriser des occurrences alatoires sur la scne. Plus vous monterez sur la scne et plus celles-ci seront rduites pour simuler lloignement dans la mise en perspective. Les options avances vous permettent de doser leffet: le nombre maximum dobjets (Objets max.), leur densit (Zone de pulvrisation) et la Perspective, ainsi que son accentuation (chelle de distance). Vous pouvez en outre introduire des variations alatoires de la taille et de lorientation des occurrences dans un certain intervalle (Plage dchelles alatoires, Plage de rotations alatoires). Leffet Construction permet de tracer des gratte-ciels styliss. Vous pouvez slectionner le motif parmi quatre types prdfinis ou bien opter pour le choix alatoire parmi les quatre. La seule autre option avance est le paramtre de taille des occurrences du motif. Leffet Flammes permet une simulation trs sommaire de flamme en instanciant alatoirement diverses formes polygonales le long de votre trac. Les deux options avances sont le paramtre de taille des occurrences et la couleur de remplissage de base. Au fur et mesure du trac, la couleur effective est le rsultat dune interpolation vers le noir. Les effets Fleurs, clairs et Arbres permettent de tracer diverses structures ramifies. Vous ne pouvez pas spcifier de symbole-motif, mais les options avances vous donnent ventuellement le choix entre plusieurs variantes: quatre pour les fleurs et vingt pour les arbres. La Figure 13.4 vous donne quelques exemples de tracs possibles. Les autres options avances permettent de choisir tailles et couleurs des lments constitutifs.
Dessin vectoriel
93
Figure 13.4
Exemples de tracs laide de trois nouveaux pinceaux. De gauche droite Fleurs (option Rose), clairs, puis Arbres (option Tremble).
Leffet Dcoration permet de dcorer votre trac courbe laide de lun des vingt motifs illustrs Figure 13.5. Les options avances vous permettent dagir sur la couleur, la hauteur et la largeur du motif.
Figure 13.5
Les vingt variantes de motif du nouveau pinceau Dcoration.
Dernire nouveaut CS5 de loutil Dco, on y trouve des animations image par image prdfinies et paramtrables: Animation de feu, Animation de fume, Systme de particules. Enfin, les Options avances du pinceau clairs permettent galement de produire une animation. Toutes ces possibilits seront traites Fiche 26.
Fiche 14
Faire des slections

Lusage de loutil Slection est vident avec les tracs en mode dessin dobjets. La partie gauche de la Figure14.1 montre quun simple clic slectionne lobjet de dessin: le rectangle englobant de lobjet cliqu (ici un segment de droite) apparat. La partie droite de la mme figure montre que le double-clic dite lobjet de dessin: le rectangle englobant a disparu, le reste du graphisme (ici un unique autre segment) est gris et le chemin daccs dans la hirarchie des objets indique: Squence1 / Objet de dessin. Une fois lintrieur de lobjet de dessin, les rgles qui suivent sappliquent. En mode fusion de dessins, le comportement de loutil Slection ne vous semblera pas forcment clair demble, aussi passons en revue les diffrents cas de figure. La Figure14.2 montre les points dancrage des segments de lignes droites et courbes utiliss dans les exemples qui suivent. Pour cela, on a cliqu sur les tracs avec loutil Sous-slection, plus exactement sur un segment en dehors de tout point dancrage.
94
Figure 14.1
Slection dun objet de dessin: simple clic ( gauche), doubleclic ( droite).
Flash CS5
Figure 14.2
Les points dancrage des lignes et forme utilises comme exemples de slections.
La Figure 14.3 illustre le simple clic avec loutil Slection. Une lgre sur-paisseur du trait dnote la slection, ainsi que des pointills. En cliquant sur un segment de droite ( gauche), vous ne slectionnez que ce segment. Ce dessin provient des deux objets de dessin (segments de droite) tracs avec loutil Ligne la Figure14.1, qui ont ensuite t dissocis (Modification> Dissocier). Remarquez comment en perdant ainsi leur identit dobjet, ils ont fusionn et produit quatre segments. La partie centrale de la Figure14.3 montre que le simple clic avec loutil Slection sur un segment de courbe slectionne tous les segments contigus jusquau premier point dangle. Dans lexemple, cela reprsente trois segments de courbe contigus et il ny a aucun moyen de ne slectionner que le segment de courbe central, limit par deux points dinflexion (points dangle et points dinflexion sont dfinis la Fiche 10). Enfin, la partie droite de la Figure14.3 montre que le simple clic avec loutil Slection sur une forme la slectionne, sans slectionner son ventuelle ligne de contour.
Dessin vectoriel
95
Figure 14.3
Simple clic avec loutil Slection: sur un segment de droite ( gauche), sur un segment de courbe (au centre), sur une forme ( droite).
La Figure14.4 reprend les trois mmes cas de figure pour le double clic avec loutil Slection. Sur un segment de droite ( gauche), vous slectionnez tous les segments contigus. Sur un segment de courbe (au centre), vous slectionnez galement tous les segments contigus, cette fois-ci mme au-del des points dangle. Enfin, sur une forme, vous slectionnez la forme et son ventuelle ligne de contour.
Figure 14.4
Double-clic avec loutil Slection: sur un segment de droite ( gauche), sur un segment de courbe (au centre), sur une forme ( droite).
Les quatre dernires figures sont disponibles en couleurs dans les fichiers dexemple: FCS5_14a.tiff, b, c, d.
Lorsquune slection est faite, les attributs du trait ou les attributs du remplissage sont modiables dans le panneau Proprits (voir Fiche15). Vous pouvez galement supprimer la slection en enfonant la touche sUppr. Si vous aviez slectionn une ligne de contour ferme sans son ventuelle forme associe (voir Fiche 7), ou inversement une forme sans son ventuelle ligne de contour associe, vous constaterez que la seconde subsiste la suppression de la premire. Lorsque vous voulez slectionner la fois les formes et leurs lignes de contour vous pouvez glisser autour delles un rectangle avec loutil Slection. La Figure14.5 montre ce qui se passe dans le cas o votre rectangle de slection nenglobe que partiellement le dessin.
96
Flash CS5
Le dessin de gauche a t ralis en mode fusion. Il en rsulte (Figure14.6) une slection partielle de lignes et de formes: lintersection avec le rectangle. Le dessin de droite a par contre t ralis en dessin dobjet. Par dfaut, dans la catgorie Gnral de la fentre des prfrences, loption Activer au contact outils Slection et Lasso est coche. Par consquent, bien que partiellement englob, lobjet de dessin est entirement slectionn (droite de la Figure14.6). Il ne le serait pas si loption avait t dcoche.
Figure 14.5
Un rectangle de slection englobant partiellement un dessin en mode fusion ( gauche) et un objet de dessin ( droite).
Figure 14.6
La slection rsultante du rectangle de la Figure14.5.
Lorsque vous glissez un rectangle de slection avec loutil Sous-slection, vous slectionnez tous les points dancrage de toute ligne qui se trouve mme partiellement dans le rectangle. Loutil Lasso vous offre la dernire possibilit de slection. Dans le mode par dfaut, vous dessinez classiquement main leve une courbe ferme autour des lments slectionner. En mode polygone (dernier bouton enfoncer dans la zone doptions), vous cliquez les points successifs dune polyligne entourant les lments slectionner et double-cliquez pour terminer.
Dessin vectoriel
97
V slectionne loutil Slection, a loutil Sous-slection et l loutil Lasso. CMd+a (Mac) ou Ctrl+a (Windows) slectionne tout le dessin. Passage temporaire loutil Slection en enfonant la touche CMd (Mac) ou Ctrl (Windows).
Raccourci
Par dfaut, dans la catgorie Gnral de la fentre des prfrences, loption Slection laide de la touche Maj est coche, ce qui signifie que vous devez classiquement enfoncer la touche Maj pour ajouter de nouveaux lments votre slection. Si vous dcochez cette option, les clics successifs ralisent une slection cumulative sans avoir enfoncer la touche Maj. Notez enfin quaucune slection nest possible sur un calque verrouill (les calques seront abords la Fiche22).
Fiche 15
Modifier les attributs des lignes et des formes

Modifier les attributs de trait
Vous souhaiterez parfois donner une ligne de contour une forme qui en est dpourvue. Ou bien vous voudrez modifier les attributs dune ligne existante, que celle-ci soit ou non ouverte et quelle soit ou non contour dune forme. Dans un cas comme dans lautre, slectionnez loutil Encrier et ajustez les attributs de trait dans le sous-panneau Remplissage et trait du panneau Proprits dcrit la section Attributs de trait, Fiche 9. Il ne vous reste ensuite qu cliquer sur la ligne ou la forme (prs de son bord si son remplissage nest pas uni) pour la doter dun trait ayant les attributs choisis, ajoutant le trait dans le cas o il tait inexistant. Parfois, il existe dj sur la scne une ligne ayant les attributs que vous souhaitez donner une autre. Vous pouvez dans ce cas utiliser loutil Pipette pour les rcuprer, ce qui vous vite davoir les spcifier manuellement dans le sous-panneau Remplissage et trait. Le pointeur en forme de pipette sorne dun petit crayon au survol dun trait source, puis se transforme en Crayon au clic. En cliquant sur un trait ou une forme cible, vous lui transfrerez les attributs de trait prlevs.
Modifier les attributs de remplissage

De manire symtrique, vous souhaiterez parfois ajouter une forme lintrieur dune ligne ferme qui en est dpourvue. Ou bien vous voudrez modifier les attributs dune forme existante. Dans un cas comme dans lautre, slectionnez loutil Pot de peinture et ajustez les attributs de remplissage dans le sous-panneau Remplissage et trait du panneau Proprits. La puce Couleur de remplissage ouvre un nuancier dans lequel vous pouvez choisir une couleur unie, un dgrad de couleurs ou mme une image de texture. Il ne vous reste ensuite
98
Flash CS5
qu cliquer nimporte o lintrieur de la ligne ferme qui se verra ajouter une forme ayant les attributs choisis, ou lintrieur de la forme existante qui hritera de ces attributs. Loutil Pipette fonctionne galement avec les remplissages. Le pointeur en forme de pipette sorne dun petit pot de peinture au survol dune forme source, puis se transforme en Pot de peinture au clic. En cliquant sur un trait ou une forme cible, vous lui transfrerez les attributs de remplissage prlevs.
Raccourci
s slectionne loutil Encrier, i loutil Pipette et K loutil Pot de peinture.
Il arrive souvent dans Flash, notamment lorsque vous dessinez main leve avec loutil Crayon, quune ligne vous semble ferme alors quelle ne lest pas strictement. Cest lpaisseur du trait qui cre lillusion que les deux extrmits du trac fusionnent, mais deux points dancrage distincts subsistent, avec entre un petit espace rendant le remplissage impossible. La Figure15.1 donne en vue rapproche un exemple de ce genre de situation. Loption Taille de lespace de loutil Pot de peinture rsout le problme. Sa valeur par dfaut est Ne ferme pas les espaces, mais vous avez le choix entre trois seuils de tolrance aux espaces: Ferme les petits espaces, Ferme les espaces moyens et Ferme les grands espaces. Pour des tailles despaces sous le seuil, lalgorithme de remplissage considre les segments de droite ctifs qui les bouchent.
Figure 15.1
Cette ligne qui parat ferme prsente en ralit un espace quil faut fermer pour la remplir.
Si la tolrance maximum ny suffit pas, il ne vous restera plus qu refermer effectivement la ligne en glissant lun de ses points dancrage avec loutil Sous-slection ou en rajoutant le segment manquant avec loutil Plume. Cest typiquement le type dopration faire en zoom important comme sur la Figure15.1. Une forme peut tre dpourvue de remplissage: dans le nuancier qui souvre au clic sur la puce Couleur de remplissage, ou dans le panneau Couleur, slectionnez licne de carr blanc barr dune diagonale rouge. Un certain nombre de transformations sont possibles sur une forme, que vous trouverez dans le menu Modication > Forme. Aprs avoir slectionn la forme transformer,
Dessin vectoriel
99
Modication > Forme > tendre le remplissage ouvre la bote de dialogue reproduite Figure15.2. Vous avez le choix entre deux oprations: la dilatation (tendre) ou lrosion (Vers lintrieur). Dosez ensuite leffet via la Distance en pixels. La Figure15.3 montre gauche une forme de dpart et la droite de celle-ci respectivement son dilat et son rod, de 10pixels chacun.
Figure 15.2
La bote de dialogue tendre le remplissage.
Figure 15.3
Une forme de dpart et en-dessous, respectivement, son dilat, son rod et son adoucissement.
Modication> Forme> Adoucir les bords du remplissage ouvre la bote de dialogue reproduite Figure 15.4. Vous retrouvez les mmes paramtres que prcdemment, auxquels sajoute un Nombre dtapes, puisquil sagit ici de remplacer le bord tranchant de la forme par une transition progressive. La Figure15.3 montre tout fait droite ladoucissement de 10 pixels en 10 tapes de la forme de dpart tout fait gauche.
100
Flash CS5
Figure 15.4
La bote de dialogue Adoucir les bords du remplissage.
Signalons une dernire transformation possible, mme si elle se paye par un alourdissement du fichier : Modication > Forme > Convertir les lignes en remplissages. Elle se justifie si vous souhaitez appliquer une ligne une opration propre aux formes. Par exemple, lrosion, la dilatation, ladoucissement, ou encore lapplication dun dgrad ou la texturation par une image bitmap (voir section Remplissage bitmap dune forme vectorielle, Fiche53). Signalons que depuis lavnement des filtres (voir Fiche 59), ladoucissement vectoriel dcrit ci-dessus est quelque peu obsolte. Bien que le rsultat visuel ne soit pas strictement identique, il est dans certain cas plus avantageux en termes de taille de fichier et de vitesse de rendu dobtenir un adoucissement par application dun filtre Flou.
Dgrads
Une forme peut tre remplie avec un dgrad. Il en existe des prdnis, mais vous pouvez crer les vtres. Ouvrez pour cela le panneau Couleur, reproduit la Figure15.5. Choisissez dabord Dgrad linaire ou Dgrad radial dans le menu Type de couleur. Les couleurs qui apparaissent de gauche droite dans la bande daperu en bas de la fentre seront alors mises en correspondance respectivement de la gauche la droite de la forme ou de son centre vers sa priphrie. Dans les cas o la zone remplir est plus grande que le spectre et quil faut donc rpter celui-ci, choisissez lun des trois types de comportement Couleur agrandie (il faut lire Couleur propage), Reflter la couleur ou Rpter la couleur, en enfonant le bouton de Flux correspondant. Les couleurs du dgrad se dfinissent grce aux curseurs sous la bande de spectre plus fine. Cliquez nimporte o dans cette zone pour crer un nouveau curseur, dans une limite de16. Pour supprimer un curseur, faites le glisser en dehors. Double-cliquez un curseur pour slectionner la couleur associe dans le nuancier. Puis faites glisser les curseurs latralement pour ajuster les transitions de couleurs. Une fois que le dgrad vous convient, il faut le rendre accessible dans le nuancier qui souvre au clic sur la Couleur de remplissage. Pour cela, dans le menu des options du panneau Couleur, demandez Ajouter un nuancier (la commande serait plus justement nomme Ajouter un chantillon au nuancier). Votre dgrad personnalis est dsormais enregistr et il apparat en bout de la dernire ligne dchantillons en bas du nuancier.
Dessin vectoriel
101
Figure 15.5
La cration dun dgrad personnalis dans le panneau Couleur.
Vous pouvez donc choisir ce dgrad aprs avoir slectionn nimporte quel outil de trac de forme, avant de tracer celle-ci, ou encore aprs coup, aprs avoir slectionn la forme laquelle lappliquer. Les outils Pot de peinture et Pinceau ont une option Verrouiller le remplissage grce laquelle la correspondance avec les couleurs du spectre du dgrad se fait dun bout lautre de la scne de telle sorte que plusieurs formes puissent partager un mme remplissage, comme dans lexemple de la Figure15.6.
Figure 15.6
Un remplissage verrouill partag par deux formes.
La transformation des dgrads sera traite la fichesuivante.
102
Fiche 16
Flash CS5
Appliquer une transformation

Les transformations qui sont dcrites ici pour les dessins vectoriels sont aussi valables pour les groupes, les occurrences de symboles (Chapitre5), les blocs de texte (Chapitre6), les images bitmap (Chapitre7), les vidos (Chapitre 8) et les composants (Chapitre 10). Par transformation, on entend le fait de redimensionner (tirer ou comprimer), pivoter, incliner ou dformer un lment graphique. La manire la plus simple de procder est sans doute loutil Transformation libre, mais vous retrouvez galement toutes les transformations dans le menu Modication> Transformer>. La Figure16.1 montre la forme de rfrence qui subira dans les figures suivantes les diverses transformations. Loutil Transformation libre y est slectionn. Un cadre englobant la forme slectionne apparat, dot de poignes de transformation. Par dfaut, toutes les transformations sont accessibles partir de ces poignes. Loutil a nanmoins quatre options qui vous permettent de filtrer les transformations accessibles: Pivoter et incliner, Redimensionner, Dformer et Enveloppe.
Figure 16.1
La forme de rfrence transformer avec loutil Transformation libre.
Aprs toute manipulation des poignes de transformation, cliquez en dehors du cadre englobant pour valider la ou les transformations. Le panneau Transformer, reproduit la Figure 16.2, est votre troisime alternative pour grer les transformations. Vous pouvez y spcifier numriquement dimensions et valeurs dangles de rotation et dinclinaison. Son existence vous sera prcieuse quand il sagira dannuler des transformations malheureuses. En effet, la commande classique Modifier> Annuler nannule que la dernire transformation. Or le panneau Transformer vous offre un bouton Rtablir pour les dimensions, ainsi quun bouton Supprimer la transformation tout en bas droite, lequel restaure ltat initial, annulant dventuelles transformations cumules. La commande Modication > Transformer > Supprimer la transformation est quivalente. Enfin, le panneau Transformer offre un dernier bouton Dupliquer la slection et la transformer grce auquel vous pouvez produire une srie de duplicatas dun lment, chacun subissant la mme transformation incrmentale par rapport au prcdent.
Dessin vectoriel
103
Figure 16.2
Le panneau Transformer.
Redimensionner un objet
Pour tout redimensionnement, le point de transformation cest--dire celui qui reste fixe est le point diamtralement oppos la poigne que vous manipulez. Lorsque vous survolez une poigne dangle, le pointeur devient une che diagonale deux ttes. Glissez la poigne pour redimensionner la fois horizontalement et verticalement, comme illustr Figure 16.3. Vous pouvez contraindre la conservation des proportions en enfonant la touche Maj.
Figure 16.3
La forme redimensionne dans les deux dimensions.
Lorsque vous survolez une poigne latrale, le pointeur devient une che horizontale (respectivement verticale) deux ttes. Glissez la poigne pour redimensionner horizontalement (respectivement verticalement), comme illustr Figure16.4.
104
Flash CS5
Figure 16.4
La forme redimensionne verticalement seulement.
Modication> Transformer> Redimensionner fonctionne de manire similaire, la diffrence prs que la poigne dangle redimensionne systmatiquement proportionnellement (sans que vous ayez enfoncer la touche Maj). Si une interface numrique rpond mieux vos besoins, saisissez un pourcentage dans la bote de dialogue Modication> Transformer> Redimensionner et faire pivoter, ou dans le panneau Transformer. Noubliez pas non plus que vous avez aussi la possibilit de modier les valeurs de W (width, largeur) et de H (height, hauteur) dans le sous-panneau Position et taille du panneau Proprits.
Pivoter un objet
Lorsque vous survolez les environs dune poigne dangle du cadre englobant de loutil Transformation libre, le pointeur se transforme en che circulaire (loption Pivoter et incliner savre bien pratique pour viter que la poigne de redimensionnement napparaisse au survol de la poigne). Glissez en arc de cercle, comme illustr Figure16.5. Si pendant la rotation vous enfoncez la touche Maj, celle-ci est contrainte des angles multiples de 45. Il sagit bien sr de rotations 2D dans le plan de la scne. Les rotations 3D seront traites la Fiche 39.
Figure 16.5
La forme pivote.
Dessin vectoriel
105
Le rond blanc qui se trouve par dfaut au centre de lenglobant est le point de transformation, autrement dit le pivot. Vous pouvez tout fait le faire glisser si vous souhaitez pivoter autour dun autre point. Et si aprs lavoir dplac, vous vous ravisez et voulez le ramener au centre, double-cliquez dessus. Le panneau Info affiche par dfaut les coordonnes du point dalignement (voir Fiche7), mais si vous cliquez sur le bouton bascule Point dalignement/ transformation vous obtenez celles du point de transformation. Enfin, si vous faites glisser en enfonant la touche OptiOn (Mac) ou alt (Windows), vous faites pivoter autour de la poigne diamtralement oppose et non plus autour du point de transformation. Modication> Transformer> Pivoter et incliner fonctionne de manire similaire. Si une interface numrique rpond mieux vos besoins, saisissez un angle en degrs dans la bote de dialogue Modication> Transformer> Redimensionner et faire pivoter, ou dans le panneau Transformer. Enfin, vous disposez aussi des commandes Modication> Transformer> Faire pivoter de 90 gauche et Modication> Transformer> Faire pivoter de 90 droite ( droite devant bien sr sentendre dans le sens des aiguilles dune montre).
Incliner un objet
Pour linclinaison comme pour le redimensionnement, le point de transformation est le point diamtralement oppos la poigne que vous manipulez. Pour comprendre la nature de linclinaison, imaginez-vous que les quatre coins du cadre englobant sont articuls, ce qui produit la transformation illustre Figure16.6. Lorsque le pointeur de loutil Transformation libre survole nimporte quel segment du cadre englobant, entre deux poignes, il se transforme en double demi-che (encore une fois, loption Pivoter et incliner savre bien pratique pour viter que les poignes de redimensionnement napparaissent). Glissez alors le long du segment. Vous avez encore les mmes alternatives que pour Pivoter: commande ou panneau Transformer.
Figure 16.6
La forme incline.
106
Flash CS5
Renverser un objet
Pour renverser un lment selon lune des directions horizontale ou verticale, vous navez pas dautre choix que les commandes Modication> Transformer> Renverser horizontalement et Modication> Transformer> Renverser verticalement.
Dformer un objet
Avec loption Dformer de loutil Transformation libre active, au survol des poignes dangle le pointeur se transforme en une grande tte de che blanche. Vous pouvez alors manipuler la poigne indpendamment des autres, ce qui dforme llment comme illustr Figure16.7.
Figure 16.7
La forme dforme.
Lorsquaucune option nest active, vous avez lalternative denfoncer la touche CMd (Mac) ou Ctrl (Windows) et de faire glisser la poigne. Enfin, vous disposez de la commande Modication > Transformer > Dformer. Lorsque vous dformez en enfonant la touche Maj, la poigne oppose subit un dplacement symtrique. Lune des utilisations classiques de la dformation est la transformation du rectangle englobant en trapze pour crer un effet de perspective. Faire glisser une poigne latrale avec loption Dformer active ou la touche CMd (Mac) ou Ctrl (Windows) enfonce produit une inclinaison gnralise. Faire glisser une poigne dangle avec les touches Maj+CMd (Mac) ou Maj+Ctrl (Windows) enfonces produit une transformation que lon pourrait qualifier de trapzodation.
Remodeler lenveloppe dun objet

Avec loption Enveloppe de loutil Transformation libre active, le cadre englobant se dote de poignes denveloppe qui ne sont plus de simples points dancrages (carrs noirs) mais possdent aussi des points directeurs (ronds noirs). Via ces poignes de Bzier il est possible de dformer lenglobant, comme lillustre la Figure16.8. Lenglobant ntant plus un cadre on parle plutt denveloppe de la forme. La commande Modication> Transformer> Enveloppe fonctionne de mme.
Dessin vectoriel
107
Figure 16.8
Lenveloppe de la forme remodele.
Transformer un dgrad
Loutil de Transformation de dgrad se trouve dans le mme menu que loutil Transformation libre. Il sert comme son nom lindique transformer le dgrad qui remplit une forme, mais tout aussi bien la texturation dune forme par une image bitmap (voir section Remplissage bitmap dune forme vectorielle, Fiche 53). Le remplissage seul est affect, pas le contour de la forme. Aprs avoir slectionn loutil, cliquez le dgrad transformer. La Figure 16.9 donne un exemple sur un dgrad linaire. Une sorte denglobant matrialis par deux segments verticaux apparat. Trois poignes permettent doprer la transformation. La premire en forme de cercle, au survol duquel le pointeur se transforme en un faisceau de quatre ches perpendiculaires, sert repositionner le remplissage. La seconde, un carr contenant une che, au survol duquel le pointeur se transforme en une che deux ttes, sert tirer ou comprimer le remplissage. Enn, le cercle portant un petit triangle, au survol duquel le pointeur se transforme en une che circulaire, sert pivoter le remplissage. Glissez une ou plusieurs de ces trois poignes de contrle puis validez en appuyant sur la touche EsC ou en slectionnant un autre outil. Le principe est le mme pour transformer un dgrad radial. Deux poignes sajoutent aux trois prcdentes: un triangle sur la pointe qui sert rgler le point focal et un cercle avec une flche pour un second rglage de taille (compression ou dilatation radiale du spectre). Les cinq poignes sont visibles sur lexemple de la Figure 16.10.
108
Flash CS5
Figure 16.9
Loutil Transformation de dgrad appliqu un dgrad linaire.
Figure 16.10
Loutil Transformation de dgrad appliqu un dgrad radial.
Raccourci
Q slectionne loutil Transformation libre et F loutil Transformation de dgrad.
Reportez-vous aux fichiers dexemples: FCS5_16a.fla, b.
Fiche 17
Grer les couleurs

Dans lenvironnement Flash, partout o il faut choisir une couleur on trouve une puce de couleur qui au clic ouvre une fentre dans laquelle saffiche les chantillons parmi lesquels faire son choix. Il sagit par dfaut de ceux de la palette scurise pour la Toile, Websafe216. On retrouve ces chantillons de couleur dans le panneau Nuanciers reproduit
Dessin vectoriel
109
droite de la Figure17.1 (la version franaise de Flash traduit malheureusement color swatch par nuancier au lieu dchantillon de couleur, de plus, ce panneau devrait sintituler chantillons, Palette ou Nuancier, au singulier). Outre le nuancier, cette fentre affiche aussi dans sa partie suprieure un aperu plus large de lchantillon choisi, son code hexadcimal (vous pouvez au besoin y saisir un code), un champ Alpha permettant dappliquer un pourcentage dopacit, un bouton carr blanc barr dune diagonale rouge pour spcifier aucune couleur et enfin un bouton figurant une roue chromatique pour accder au slecteur de couleur du systme dexploitation. Les principales puces de couleur sont celles des couleurs de trait et de remplissage. On les trouve dans le panneau Outils, dans le sous-panneau Remplissage et trait du panneau Proprits et dans le panneau Couleur, reproduit gauche de la Figure17.1.
Figure 17.1
Les panneaux Couleur et Nuanciers.
Le panneau Couleur vous sert crer vos propres couleurs. Pour cela, si ce nest pas dj le cas, commencez par choisir la valeur Couleur unie pour le Type de couleur. Vous pouvez spcifier votre couleur numriquement laide des glissires rouge (R), vert (V) et bleu (B) ou en saisissant une valeur entre 0 et 255 dans les champs. Une quatrime glissire associe au champ Alpha permet dappliquer un ventuel pourcentage dopacit. Lespace TSL est sans doute plus intuitif. Utilisez les glissires de teinte (T), de saturation (S) et de luminosit (L), ou saisissez un pourcentage dans les champs correspondants. Enfin un dernier champ vous donne le code hexadcimal, code que vous pouvez aussi saisir. Mais si tous ces nombres vous rebutent, vous crerez votre couleur visuellement: glissez le point dans le carr contenant une sorte de spectre, puis glissez le curseur de la rglette verticale sa droite.
110
Flash CS5
Crer une couleur ne suffit pas. Si vous voulez la rutiliser, il faut en enregistrer un chantillon dans le nuancier. Demandez pour cela la commande Ajouter un nuancier (il faut comprendre Ajouter un chantillon) dans le menu des options du panneau Couleur. Votre couleur apparat dans le panneau Nuancier dans la zone blanche en dessous des chantillons existants. Pour supprimer un chantillon, cliquez dessus avec la touche Ctrl (Windows) ou CMd (Mac) enfonce. Le menu des options du panneau Nuancier contient aussi une commande Supprimer le nuancier (il faut comprendre Supprimer lchantillon). Le menu des options du panneau Nuanciers contient aussi des commandes relatives la sauvegarde de vos couleurs. Avec Enregistrer les couleurs, vous les exportez dans un fichier palette de couleurs. Le format par dfaut est propre Flash: Jeu de couleurs Flash (CLR). Si vous souhaitez que vos couleurs soient rimportables dans dautres environnement, choisissez le format Table de couleurs (ACT). Remplacer des couleurs relit la palette dun fichier CLR, ACT ou GIF en crasant les chantillons existants. Ajouter des couleurs relit aussi une palette, mais sans craser. Effacer les couleurs supprime toutes les couleurs lexception du noir et du blanc. Enfin, Charger les couleurs par dfaut restaure la palette Web 216. Kuler est une application Adobe, transversale la suite CS5, pour la cration et le partage de thmes de couleurs (http://kuler.adobe.com). Un thme est un jeu de cinq couleurs et linterface de cration reproduite la Figure17.2 vous permet dexplorer les combinaisons selon diverses rgles dharmonie chromatique. Une autre partie de lapplication permet aussi dextraire cinq couleurs partir de celles prsentes dans une image que vous spcifiez. Aprs avoir donn un titre et associ des mots-clefs votre thme, vous pouvez lenregistrer dans la base en ligne partage par tous les graphistes, o chacun pourra profiter des trouvailles des autres.
Figure 17.2
Linterface Kuler pour crer des thmes de couleurs.
Dessin vectoriel
111
Dans sa version originale, Flash CS5 comprend un panneau Kuler. Celui-ci comprend plusieurs onglets. Lun est ddi la cration de thme et reprend sous une forme simplifie linterface montre Figure17.2. Un second est ddi lexploration de la base de thmes, avec des possibilits de filtrage selon diffrents critres. Malheureusement, lextension Kuler nest pas intgre la version franaise de Flash CS5. Dans lespoir quelle le soit finalement un jour, vous pouvez dj vous familiariser avec lapplication (en anglais) ladresse donne ci-dessus.
Fiche 18
Importer du graphisme vectoriel

Flash na pas le monopole du dessin vectoriel. Le matre en la matire est Illustrator et une partie des outils de Fireworks est ddie aux tracs vectoriels. Ces deux logiciels faisant partie de la Creative Suite dAdobe, ils cooprent remarquablement avec Flash. Pour tout autre format de donnes vectorielles, le plus simple est de les convertir au format Illustrator CS5.
Donnes Illustrator
La coopration entre Illustrator et Flash na pas attendu le rachat de Macromedia par Adobe. Depuis longtemps, des rapprochements existent entre les deux logiciels. Il existe dans Illustrator des symboles qui se manipulent de faon analogue ceux de Flash (lesquels seront traits la Fiche33). En effet, vous pouvez donner un nom un symbole, lui attribuer un comportement (Clip par dfaut), spcifier son point dalignement, etc. Tout cela se fait dans la bote de dialogue Options de symbole. Illustrator et Flash partagent le mme raccourci clavier F8 pour la cration de symbole. Lorsque vous double-cliquez sur un symbole dans Illustrator, il souvre en mode isolement. Si le terme le change, le principe est celui du mode modication de symbole de Flash (voir dition de symbole, Fiche 33). Les panneaux Symbole ou Contrle dIllustrator vous permettent de travailler sur les instances du symbole: les nommer, les permuter avec un autre symbole, ou encore rompre leur lien avec le symbole. Chacune de ces oprations a son quivalent dans Flash. Comme les symboles, les textes Illustrator peuvent tre prpars en vue de leur future intgration dans Flash. Vous pouvez en effet leur donner lun des trois types reconnus par Flash: texte statique, texte dynamique ou saisie de texte. Il faut enfin mentionner la capacit dIllustrator exporter au format SWF. Toutes sortes doptions vous sont proposes pour spcifier comment symboles, calques et textes doivent tre traits au cours de lopration. Il sagit bien sr de rpondre aux mmes questions que lors de limportation dans Flash dun chier AI, format natif des donnes Illustrator. Pour transfrer de telles donnes de lun lautre, libre vous de choisir lexportation SWF depuis Illustrator ou limportation AI dans Flash.
112
Flash CS5
Pour importer dans votre document Flash un chier AI provenant dIllustrator CS5, choisissez Fichier> Importer> Importer dans la scne. Avec cette commande, la bibliothque reoit un nouveau symbole correspondant au contenu import et une instance de celui-ci apparat sur la scne. Parfois, cette instanciation automatique nest pas souhaitable. Dans ce cas, utilisez plutt la commande Fichier> Importer> Importer dans la bibliothque qui se contente de crer le symbole et vous vite de devoir supprimer linstance du symbole sur scne. En ce qui concerne le symbole cr dans la bibliothque aprs importation dun chier AI, ce dernier se retrouve encapsul dans un symbole Flash portant le nom du chier. On trouve galement dans la bibliothque au mme niveau que le symbole un dossier qui porte lui aussi le nom du chier import et contenant toutes les ressources utilises dans la hirarchie du symbole telle quelle a t construite dans Illustrator. Dans le dossier, les ressources apparaissent par contre par ordre alphabtique. Du point de vue des scnarios (la notion de scnario est prsente au Chapitre 3), les donnes importes le sont dans le scnario du clip et non dans le scnario principal de votre animation. Mais rien ne vous empche par la suite de rorganiser tout cela (renommer les calques, dplacer leur contenu). Revenons la procdure dimportation elle-mme. Quelque soit la commande utilise, naviguez jusquau chier AI, slectionnez-le, puis cliquez sur Importer. Une bote de dialogue souvre, qui sintitule soit Importer <nom du chier>.ai sur la scne, soit Importer <nom du chier>.ai dans la bibliothque. Limportation a ses limites et parfois vous rencontrerez des incompatibilits. Au besoin, cliquez sur le bouton Rapport dincompatibilit pour en avoir le dtail. Si par exemple le graphisme que vous importez est une illustration initialement destine limpression, son espace de couleur sera CMJN (Cyan, Magenta, Jaune, Noir). Or Flash ne connaissant que les espaces RVB et TSL, une conversion sera ncessaire. Il arrive aussi que le document Illustrator soit dune taille plus grande que celle maximum que Flash sait grer. Dans un cas comme dans lautre, il faudra adapter lillustration dans Illustrator CS5: la convertir en RVB dans le premier; la recadrer ou la redimensionner dans le second. Dans des cas plus complexes, cochez dans le rapport des incompatibilits la case Appliquer les paramtres dimportation recommands. La Figure18.1 reproduit la bote de dialogue dimportation. Celle-ci est organise en trois parties. La principale, en haut gauche, montre la structure de calques du document import. Elle contient au moins un calque. Dans lexemple simple de la Figure18.1, il ny a quun seul calque contenant cinq objets. Un triangle permet de dvelopper ou rduire chaque calque. Chaque ligne de cette partie comporte son extrmit gauche une case cocher pour slectionner le contenu (objet ou calque) pour limportation. lextrmit droite de la ligne, une icne usuelle dans Flash dnote le type de contenu: trac, groupe, symbole graphique, symbole clip, image bitmap ou texte. Lexemple de la Figure18.1 contient des tracs vectoriels et un texte et cest ce dernier qui est slectionn.
Dessin vectoriel
113
Figure 18.1
La bote de dialogue Importer dans la bibliothque.
En haut droite de la bote de dialogue dimportation safchent les Options dimportation du ou des lments slectionns gauche. Celles-ci varient bien sr en fonction du type de contenu: Trac vectoriel. Il est gnralement souhaitable de le conserver sous forme vectorielle, afin de pouvoir lditer dans Flash. Pour Importer comme, vous choisirez donc le plus souvent loption Trac modiable. Nanmoins dans les cas o certains aspects de lillustration seraient perdus limportation (cest le cas par exemple pour certains modes de fusion sans quivalent dans Flash; voir Fiche 57), choisissez Bitmap. Vous sacrifierez la possibilit ddition dans Flash, mais vous prserverez laspect visuel. Texte. Le principe est le mme que prcdemment, mais cette fois-ci avec trois options. La premire, Texte modiable, vous permet dditer dans Flash le texte import. Pour cela, le code des caractres est conserv et avec lui leur smantique. Ceci peut se faire parfois au dtriment de certains effets visuels. Par exemple, Flash ne gre pas le texte attach une courbe. Pour prserver de tels effets, il faut sacrifier la smantique des caractres et la possibilit dditer le texte en choisissant Contours vectoriels. Les points des contours vectoriels des caractres restent ditables, mais il sagit de pur dessin. La
114
Flash CS5
dernire option, Bitmap, est ici encore rserver au cas o certains effets de ltres ou de modes de fusion(voir les Fiches 56 et 57) seraient sacris lors de limportation avec les deux autres options. nouveau, le visuel est prserv, mais plus rien nest ditable. Image bitmap. Avec loption Fusionner limage bitmap, il sagit encore de prserver les effets. Groupe, calque. Loption Bitmap a la mme signification que prcdemment. Dans tous les cas o certains effets ne passent pas limportation, cochez loption Crer un clip. Un champ Nom de loccurrence apparat alors et vous avez la possibilit de dnir le point dAlignement. Crer un clip est par exemple le moyen de conserver les effets Illustrator dombre porte, de rayonnement ou de ou qui seront transposs en ltres Flash (le ou gaussien sera converti en ou linaire). Cette option existe pour les tracs, le texte, les images bitmap, les groupes et les calques. Le bas de la bote de dialogue dimportation est consacre aux options globales: Importer en tant quimage bitmap unique. Lorsque vous cochez cette option, dcoche par dfaut, tous les calques sont aplatis. Les donnes perdent leur nature vectorielle et les deux autres parties de la bote de dialogue dimportation sestompent. Convertir les calques en. Dans le cas o loption prcdente est reste dcoche, vous devez dire Flash quoi faire de chaque calque Illustrator. Le menu vous propose trois options: transformer chacun en un calque Flash distinct (Calques Flash; ils sont traits la Fiche22), ou en une image-cl distincte (Images-cls; elles sont traites la section Images-cls, Fiche 21), ou encore tout placer sur un seul calque, cest--dire aplatir les calques, les donnes restant nanmoins vectorielles (Calque Flash unique). Le plus souvent, vous choisirez la premire option. La seconde, Images-cls, nest utile que dans le cas particulier o vous avez dessin image par image dans Illustrator les diffrentes phases dune animation (voir Fiche 26), sur autant de calques distincts. Placer les objets leur position dorigine. Cette option nexiste que dans limportation sur la scne. Si vous la dcochez, les diffrents lments imports seront globalement centrs sur la scne, tout en conservant leurs positions relatives. Dnir la taille de la scne sur celle du plan de travail dIllustrator. Cette option nexiste que dans limportation sur la scne et son long intitul est explicite. Importer les symboles non utiliss. galement explicite. Dans la catgorie Importateur de chier AI de la fentre des prfrences (Figure18.2), vous retrouverez les options dimportation prcdentes relatives aux tracs, au texte, aux images bitmap, aux groupes et aux calques. Loption que vous choisissez dans les prfrences est celle qui sera choisie lorigine dans les Options dimportation dun lment lorsque vous le slectionnerez dans la partie gauche de la bote de dialogue.
Dessin vectoriel
115
Figure 18.2
Les prfrences Importateur de chier AI.
Notez que vous avez galement la possibilit de copier directement du graphisme dans Illustrator et de le coller dans Flash, mais le rsultat pourra tre plus hasardeux.
Donnes Fireworks
Avant le rachat par Adobe, les logiciels Fireworks et Flash taient tous deux des produits Macromedia. La bonne communication entre eux est donc une longue histoire. Fireworks est un logiciel de graphisme pour la Toile intgrant des outils de dessin vectoriel, des outils de traitement dimage matricielle et des outils propres la publication pour la Toile. Le format natif de Fireworks est PNG (prononcer ping). Il faut bien faire la diffrence entre deux sortes de PNG. La premire est celle qui rsulte dune commande Enregistrer: le fichier est alors un source Fireworks, avec tous les calques et masques qui composent ventuellement le graphisme. La seconde est celle qui rsulte dune commande Exporter, dans Fireworks ou dans nimporte quel autre logiciel graphique. Les ventuels calques ont dans ce cas t aplatis. Dans Fireworks, la premire forme de PNG est la seconde, ce que dans Photoshop PSD est JPEG, GIF ou PNG! Lun des intrts majeurs de limportation PNG dans Flash est que parmi les trois principaux formats dimage matricielle (les deux autres tant GIF et JPEG), PNG est le seul grer un
116
Flash CS5
ventuel canal alpha, donc une image avec de la transparence non binaire (voir Transparence en niveaux de gris, Fiche 54). Flash sait importer un chier source PNG Fireworks, donc vous pouvez si vous le souhaitez rcuprer dans Flash toute la structure dun graphisme compos dans Fireworks. La procdure dimportation est tout fait similaire celle dcrite la section prcdente pour une illustration Illustrator. On y retrouve des choix similaires faire entre la conservation sous forme vectorielle et la conversion en image bitmap. Comme pour limportation AI, certains lments ne peuvent rester sous forme vectorielle dans Flash et doivent donc tre rasteriss (texte attach une courbe, ou remplissage de contours par exemple). Rptons que si lopration prserve laspect visuel initial, la possibilit ddition dans Flash est perdue. Pour importer un fichier PNG Fireworks dans Flash, utilisez lune des deux commandes Fichier> Importer> Importer dans la scne ou Fichier> Importer> Importer dans la Bibliothque. Les deux crent dans la bibliothque un symbole contenant le graphisme, mais la premire cre en mme temps une occurrence du symbole sur la scne. Libre vous, si ncessaire, de supprimer plus tard cette occurrence. La Figure18.3 reproduit la bote de dialogue Importer un document Fireworks. Passonsen revue ses cinq options: Importer sous la forme dun bitmap fusionn (il faut lire sous la forme dune bitmap aplatie). Si vous cochez cette option elle reste dans ltat quelle avait lors de la dernire importation, tous les calques seront fusionns en une image bitmap aplatie. Rien ne subsistera donc sous forme vectorielle. Les options suivantes nayant dans ce cas plus aucun sens, elles sont estompes. En dcochant cette option, les calques seront traits sparment et selon vos choix pour les quatre autres options.
Figure 18.3
La bote de dialogue Importer un document Fireworks.
Importer. Dans le cas o le fichier PNG import ne contient quune page, vous navez aucun choix faire: Page 1 saffiche. Dans le cas dun document de plusieurs pages, choisissez dans le menu la page importer. Si vous slectionnez Toutes les pages, un nouveau calque sera cr. Il recevra pour nom celui du chier import et chaque page y fera lobjet dune image-cl.
Dessin vectoriel
117
Dans. Dans le cas o vous nimportez quune page, le choix par dfaut, Image actuelle sous forme de clip, encapsule le graphisme dans un nouveau symbole clip danimation (voir Fiche36) dont les calques sont exactement ce quils taient dans Fireworks. Vous prservez donc la structure initiale. Lautre choix, Nouveau calque, fusionne tous les calques en un seul et celui-ci est cr dans le scnario courant, par dessus tous ceux qui sy trouvent dj. Dans le cas o vous importez toutes les pages dun document, vous avez le choix entre Nouvelles images sous forme de clip et Nouvelles squences sous forme de clip. Dans un cas comme dans lautre, il y a cration dautant de symboles clips danimation quil y a de pages. La Figure 18.4 montre la bibliothque aprs limportation du fichier pages.png. Un dossier Objets Fireworks a t cr. Il a autant de sous-dossiers que de fichiers imports. Eux-mmes ont autant de sous-dossiers que de pages dans le document import. Enfin, chacun de ces sous-dossiers contient un clip et les lments graphiques que ce dernier encapsule. Le clip correspondant chaque page sera instanci sur des images successives du scnario principal si vous choisissez Nouvelles images sous forme de clip; et dans des squences successives du scnario principal si vous choisissez Nouvelles squences sous forme de clip. Objets. Le choix par dfaut, Importer au format bitmap pour prserver lapparence, a un intitul ambigu. En effet, cela ne signifie pas que tout sera rasteris, mais uniquement ce qui ne pourra pas tre conserv sous forme vectorielle dans Flash. linverse, si vous choisissez Prserver tous les trajets modiables (il faut comprendre Prserver tous les tracs modiables), il ny aura aucune conversion en image bitmap. Vous pouvez faire ce choix sans risque si vous tes sr que le fichier Fireworks ne contient rien qui ne puisse tre conserv sous forme vectorielle dans Flash (par exemple du texte attach une courbe, qui dans Flash serait restitu horizontal). Texte. Le choix par dfaut est encore Importer au format bitmap pour prserver lapparence. Lautre choix est Conserver tous les caractres modiables. Mme si lintitul de ce dernier diffre, les enjeux sont rigoureusement les mmes que prcdemment pour les objets. La plupart des filtres Fireworks peuvent tre imports dans Flash o ils restent ditables (les filtres seront traits la Fiche56). Si ce nest pas le cas, Flash importe limage rsultant de lapplication du filtre limage dorigine. Certains modes de fusion Fireworks peuvent tre imports dans Flash, o ils restent ditables (les modes de fusion seront traits la Fiche57). Si ce nest pas le cas, Flash ignore le mode de fusion en question limportation. Aprs limportation, libre vous de rorganiser et/ou renommer dans la bibliothque le contenu du dossier Objets Fireworks. Plus tard, lorsque vous r-ouvrirez le fichier source de votre animation, vous serez sans doute content davoir pris la peine de donner des noms plus descriptifs aux Bitmap<n>, Symbole <n> ou Page <n> (voir Figure 18.4).
118
Flash CS5
Figure 18.4
La bibliothque aprs importation dun document Fireworks de deux pages.
Le copier-coller depuis Fireworks dans Flash est possible. Il ralise lquivalent de limportation en cochant loption Image sous la forme dun bitmap fusionn.
Raccourci
CMd+r (Mac) ou Ctrl+r (Windows) pour Importer dans la scne.
Autres donnes
Les formats AI (Adobe Illustrator), EPS (Encapsulated PostScript) et PDF (Portable Document Format) appartiennent tous la famille des formats PostScript dvelopps par Adobe. Pour importer un chier Illustrator EPS ou Acrobat PDF, ouvrez le chier dans Illustrator CS5 et enregistrez-le sous forme de chier AI. Pour des donnes issues dune version ancienne de Illustrator, faites de mme. Vous pourrez ensuite limporter dans Flash en suivant la procdure dcrite ci-dessus.
Scnario, images et calques

Une fois donn votre nouveau document Flash ses proprits de base, vous allez le dvelopper sur la scne et dans le scnario. En composant vos crans sur la scne, vous agissez dans deux dimensions spatiales, voire trois. Dans le scnario, vous agissez galement dans deux dimensions. La premire est temporelle, cest celle des images, qui sont autant de moments diffrents de lapplication finale. La seconde est structurelle, cest celle des calques. En effet, comme dans nimporte quel autre logiciel dinfographie, chaque image gagne tre dcompose en lments rpartis sur diffrents calques. La complexit du travail dintgration multimdia peut drouter le dbutant. Elle tient ces cinq dimensions que sont sur la scne, la largeur, la hauteur et la profondeur et dans le scnario, le temps et lordre dempilement des calques. Dans ce chapitre, nous naborderons que quatre de ces cinq dimensions. La profondeur 3D ne sera traite qu la Fiche39. Signalons aussi quau Chapitre 5 nous rajouterons une dimension architecturale avec la notion de symboles stocks dans la bibliothque et instancis sur la scne et dans le scnario.
Fiche 19
Crer un nouveau document

Proprits de lanimation
Future Splash, lanctre de Flash, tait un logiciel ddi lanimation vectorielle. Cest la raison pour laquelle on parle souvent danimation Flash pour un document Flash. Lorsque vous crez un nouveau document (Fichier> Nouveau) et que vous validez dans la fentre Nouveau document le choix par dfaut ActionScript 3.0, lanimation cre possde les valeurs de proprits illustres Figure19.1. En labsence de toute slection sur la scne, le panneau Proprits affiche ces proprits de lanimation.
Figure 19.1
Proprits par dfaut dune animation.
120
Flash CS5
Par dfaut, une animation a donc un arrire-plan blanc, sa scne fait 550 pixels de large par 400pixels de haut et son scnario est lu 24images par seconde (I/S). Pour accder lensemble des proprits de lanimation, cliquez sur le bouton Modifier, droite des dimensions de la scne. La bote de dialogue Proprits du document saffiche, reproduite la Figure19.2. Vous pouvez galement y accder via la commande Modication> Document.
Figure 19.2
La bote de dialogue Proprits du document.
Si un fond de scne uni vous convient, le mme pour tous les crans de lanimation, cliquez sur la puce de couleur pour choisir la couleur de fond (voir Fiche17). Dimensionnez votre scne grce aux champs Dimensions qui acceptent une valeur entre 1 et 2880 pixels. Il est important de faire ce choix demble, car sil sera toujours possible de modifier ces valeurs plus tard, vous serez par contre oblig de reprendre la composition de tous les crans. Vous avez deux alternatives la spcification numrique des dimensions: Imprimante donne la scne celles de la zone dimpression maximale, tandis que Contenu cadre sur le contenu en mnageant une marge sur les quatre cts. La cadence, exprime en images par seconde, est le dbit daffichage des images que vous souhaiteriez lors de la relecture de votre animation. Notez bien quil ne sagit que dun souhait et que rien ne garantit que lanimation sera effectivement relue cette cadence. La valeur par dfaut a longtemps t 12I/S; elle est depuis la version CS4 de 24 I/S, ce qui est beaucoup demander (reportez-vous la Fiche26 pour un traitement plus dtaill de la cadence). Par dfaut, les rgles (dcrites Fiche 7) sont gradues en pixels. La Figure19.2 vous montre que le menu Units de la rgle vous propose cinq autres choix. Loption relative la perspective 3D sera aborde la Fiche39. Vos rglages faits, si vous prvoyez de produire toute une srie danimations qui partageront ces valeurs de proprits, vous avez tout intrt les tablir comme valeurs par dfaut en cliquant sur le bouton homonyme.
Raccourci
CMd+j (Mac) ou Ctrl+j (Windows) ouvre la bote de dialogue Proprits du document.
121
Modles de document
Lide dun modle de document est de ne plus partir dune animation vide, mais dune bauche.
Imaginons par exemple que vous dveloppiez un support de formation se dclinant en un ensemble de chapitres faisant chacun lobjet dune animation spare. Bien que diffrents, les chapitres auront des lments en commun: un canevas de mise en page dfini par des guides, du graphisme en fond dcran, des boutons de navigation, des sons, du code ActionScript, etc. Crez cette animation, puis au lieu de lenregistrer classiquement, utilisez la commande Fichier> Enregistrer comme modle. Une premire bote de dialogue vous avertit que les donnes de lhistorique du fichier SWF seront effaces au cours de lopration. Validez. Dans la bote de dialogue suivante, renseignez les trois champs Nom (par exemple Chapitre), Catgorie (Formation) et Description. Ensuite, chaque fois que vous crerez un nouveau chapitre via Fichier> Nouveau, cliquez sur longlet Modles de la bote de dialogue. La Figure 19.3 reproduit cet onglet. Flash vous est livr avec six catgories de modles: Animation, Bannires, Fichiers dexemples, Lect. fichier multimdia, Prsentations et Publicit. Les modles de cette dernire catgorie constituent des bauches on ne peut plus minimales puisquelles se contentent de donner la scne lune des tailles de bandeaux publicitaires couramment utilises sur la Toile, mais vous pouvez explorer les Fichiers dexemples ou les bauches dAnimation, plus labores. Dans notre exemple, il vous faudrait slectionner le modle Chapitre dans la catgorie Formation et vous auriez votre nouveau chapitre bauch.
Figure 19.3
La bote de dialogue Nouveau partir dun modle.
122
Flash CS5
Vue densemble de lenvironnement dintgration

La Figure19.4 montre quoi ressemble lenvironnement Flash CS5 dans lespace de travail Classique aprs cration dun nouveau document. Au chapitre prcdent, vous vous tes dj familiaris avec le panneau Outils, la scne sur laquelle vous avez dessin et le panneau Proprits. droite du panneau Outils, la fentre de document affiche les animations ouvertes sous forme donglets. Elle comprend de bas en haut, la scne, la barre ddition et une zone rserve aux deux onglets du scnario et de lditeur de mouvement. droite de la fentre de document se trouve la zone rserve aux diffrents panneaux. Sur la copie dcran de la Figure19.4, tous sont rduits sauf le panneau Proprits. droite de ce dernier, verticalement et regroups en trois groupes donglets, on trouve successivement les icnes de: Couleur, Nuancier; Aligner, Infos, Transformer; Fragments de code, Composants, Prslections de mouvements. Il ne sagit ici que dun premier contact. Les fonctionnalits de ces lments dinterface seront dcrites dans les fiches suivantes.
Figure 19.4
Lenvironnement dans lespace de travail Classique.
La version Windows de Flash offre en plus une barre doutils Principale contenant des boutons daccs raccourci aux commandes les plus courantes (voir Figure19.5).
Figure 19.5
La barre doutils Principale.
123
Fiche 20
Composer des crans

Le premier aspect du travail dintgration sapparente un exercice de mise en page. On pourrait parler de mise en cran. Une fois que vous aurez cr ou import dans votre animation des lments de mdias visuels de divers types, vous devrez les intgrer dans diffrents crans. Ces crans pourront contenir des formes vectorielles (Chapitre2), des animations imbriques (Fiche 36), des textes (Chapitre6), des images bitmap (Chapitre7), des vidos (Chapitre 9) ou encore des composants (Chapitre 10). Souvent, ces lments de mdias seront stocks dans la bibliothque, dcrite la Fiche 33. Dans le contexte du dessin vectoriel, nous avons dj voqu les aides la composition que sont loutil Zoom, loutil Main, les rgles, la grille, les guides et laccrochage. Ces outils restent pertinents pour nimporte quel mdia visuel. Reportez-vous la Fiche 7, section Aides au dessin et la composition pour plus de dtails. Le panneau Aligner constitue un outil de choix pour la composition des crans. Il est reproduit Figure20.1. Slectionnez sur la scne avec loutil Slection les lments traiter. Par dfaut, la rfrence est le rectangle englobant cette slection dlments, mais si vous enfoncez le bouton Sur la scne, la rfrence est le cadre de la scne. Cliquez alors le bouton correspondant lopration voulue.
Figure 20.1
Le panneau Aligner.
La premire srie de boutons concerne les oprations dalignement proprement dites. Les trois premiers pour lalignement vertical (Aligner les bords gauches, Aligner les centres verticalement et Aligner les bords droits) et les trois autres pour lalignement horizontal. La seconde srie de six boutons concerne les oprations de distribution dlments intervalles rguliers. Il sagit de placer les bords ou les axes de chaque lment (les six mmes que pour lalignement) gale distance les uns des autres. Cela implique que si les lments sont de tailles variables, lespacement entre eux sera lui aussi variable.
124
Flash CS5
Les deux oprations despacement horizontal ou vertical produisent le mme espacement entre lments, mme si ces derniers sont de tailles diffrentes. Enfin, il est possible de redimensionner automatiquement les lments, cest--dire mettre tous les lments la mme hauteur, ou la mme largeur, ou la mme taille (hauteur et largeur). La dimension retenue est la plus grande parmi les lments slectionns. Rappelons que vous pouvez caler votre slection laide des flches du clavier: le dplacement est de 1pixel dcran et de10 si la touche Maj est enfonce. Cela veut dire que la scne tant affiche 400%, le dplacement sera dun quart de pixel de la scne et de 2,5pixels de la scne si la touche Maj est enfonce. Les options daccrochage Accrocher aux objets, Accrocher la grille et Accrocher aux guides sont inoprantes lorsque vous calez ainsi laide des flches du clavier. Par contre, la commande Afchage> Accrochage> Accrocher aux pixels fonctionne, qui plus est quelque soit le pourcentage daffichage de la scne. La consquence contradictoire avec lintitul de la commande est quun lment peut avoir pour coordonne un nombre dcimal et non un nombre entier de pixels! Les calques guides sont un dernier auxiliaire de composition de la scne. Ils sont traits la sectionCalques non standard, Fiche 22.
Raccourci
CMd+K (Mac) ou Ctrl+K (Windows) affiche le panneau Aligner.
Fiche 21
Dfinir les contenus successifs du scnario

Images
Composer un cran, cest travailler dans les deux premires dimensions, spatiales, de lintgration : la largeur et la hauteur de la scne. La troisime dimension de lintgration multimdia est le temps. Laxe horizontal du scnario reprsente la ligne du temps qui scoule de gauche droite. Chaque colonne du scnario reprsente une unit inscable de temps, une image. Nous avons dit que Flash a dbut comme logiciel danimation. Sa mtaphore fondatrice est le cinma danimation. En filant cette mtaphore, chaque image de lanimation informatique donc chaque colonne du scnario correspond un photogramme de film danimation. Jusqu prsent, vous avez appris dessiner sur la scne et composer des crans sur cette mme scne. Nous ajoutons maintenant la dimension temporelle : chaque cran est une image de lanimation. Le scnario est une collection dimages. La scne affiche un instant donn le contenu dune seule de ces images: limage courante est indique dans le scnario par la tte de lecture. Glissez la tte de lecture sur la ligne de temps pour changer limage courante, donc laffichage de la scne.
125
moins que vous ayez cr votre document partir dun modle dont le scnario comporte dj un certain nombre dimages, votre nouvelle animation ne contient au dpart quune seule image. Si vous dessinez un contenu sur la scne et que vous prvisualisez lanimation (Contrle> Lire) celle-ci, puisque sa cadence est par dfaut 24 I/S, va afficher le dessin un vingt-quatrime de seconde! Pour augmenter la dure de lanimation, il faut lui ajouter des images. La commande Insertion> Scnario> Image insre une image aprs limage courante. Dans le menu contextuel qui surgit au clic sur une image (voir Figure21.1), vous trouvez galement une commande Insrer une image.
Figure 21.1
Le menu contextuel des images.
Dans le scnario illustr Figure21.2, on a insr quatre images, puis cliqu dans la ligne du temps hauteur de limage3. Le numro de limage courante est affich en bas du scnario dans la barre dtat, gauche de la cadence. droite de celle-ci et fonction de celle-ci, vous pouvez lire le temps coul en secondes depuis le dbut de lanimation pour atteindre limage courante. Limage initiale porte un petit cercle indiquant quil sagit dune imagecl (nous y viendrons dans la section suivante). Le cercle est vide, ce qui dnote une imagecl vide. En effet, la scne est encore vide de contenu. La dernire image (5) est indique par un petit rectangle. Du cercle au rectangle, il y a ce que lon appelle une plage dimages, les images 1 5 ici. Par dfaut, lorsque vous cliquez sur une image dans une plage, vous ne slectionnez que limage clique. Mais si dans les prfrences, catgorie Gnral, rubrique Scnario, vous cochez loption Slection base sur plages, au clic sur nimporte quelle image de la plage, vous slectionnerez cette dernire intgralement, donc ici les cinq images.
126
Flash CS5
Figure 21.2
Aprs insertion de quatre images: une plage de cinq images.
Lorsque vous insrez une image, la tte de lecture reste en place si vous avez slectionn une image, mais en labsence de slection, elle passe limage suivante, donc limage qui vient dtre insre. galement, lorsque vous insrez une image, si vous avez slectionn une image dans un calque (les calques seront abords dans la fichesuivante), linsertion ne concerne que ce calque. Par contre, en labsence de slection dans un calque (image dsigne dun clic sur la ligne du temps), linsertion concerne tous les calques. Vous pouvez rallonger une plage de plusieurs images en une seule opration dinsertion. Slectionnez un emplacement dimage au-del de lactuelle dernire image, puis insrez une image. La Figure21.3 donne en exemple en montrant le scnario avant et aprs lopration.
Figure 21.3
Rallonger de quatre images une plage.
Pour faire une slection multiple dimages dans des calques: slectionnez des images contigus laide de Maj+OptiOn+CliC (Mac) ou Maj+alt+CliC (Windows) et des images non contigus laide de CMd+CliC (Mac) ou Ctrl+CliC (Windows). Si vous demandez linsertion dimage aprs avoir slectionn un certain nombre dimages contigus (ventuellement sur plusieurs calques contigus), vous dupliquez la slection. Ainsi, sur lexemple de la Figure21.4, la plage est rallonge de cinq images aprs avoir slectionn lintrieur cinq images contigus.
Figure 21.4
Insertion de cinq images dans une plage.
127
Lorsque vous aurez dvelopp un scnario assez long, lascenseur de dfilement horizontal du scnario sera bien pratique. Par contre, il arrivera souvent quaprs avoir fait dfiler lascenseur, vous ayez perdu trace de la tte de lecture se trouvant en dehors de la portion affiche du scnario. Cliquez dans ce cas le bouton Centrer limage (bouton rouge de la barre dtat reprsentant la tte de lecture, visible Figure21.2) pour recadrer laffichage du scnario avec limage courante au centre. Vous pouvez dplacer une slection dimages contigus par glisser-dposer. Si vous la glissez-dposez avec la touche OptiOn (Mac) ou alt (Windows) enfonce, vous la dupliquez. Vous avez la possibilit de donner un nom une image. Slectionnez la, puis dans le souspanneau tiquette du panneau Proprits, renseignez le champ Nom (le Type est par dfaut Nom). Le nom saffiche alors dans le calque en regard dun petit drapeau rouge. Cest souvent utile pour reprer dans votre scnario des dbuts de squences danimation (voir Fiche25). Ainsi, dans lexemple de la Figure21.5, la premire image de lanimation gnrique daccueil a t nomme.
Figure 21.5
Nommage de la premire image dune squence danimation.
Pour supprimer une slection dune ou plusieurs images, utilisez la commande Supprimer les images du menu contextuel des images (voir Figure21.1). Sachez enfin que certaines animations Flash tout fait sophistiques ne contiennent quune seule image ! En effet, certains dveloppeurs adoptent parfois la position radicale qui consiste tout grer par programmation ActionScript et leur scnario peut tre vide ou ne contenir quun calque dune seule image contenant le code.
Images-cls
En animation traditionnelle, lorsque le dessin anim amricain est devenu une industrie, sa chane de production a t taylorise: les auteurs animateurs nont plus dessin que certaines images-cls, laissant des auxiliaires intervallistes (inbetweeners) le soin de dessiner les images intermdiaires intercaler entre deux images-cls pour assurer la transition fluide de lune lautre. Nous verrons au chapitre suivant que lanimation informatique reprend ce principe, lintervallisation tant remplace par linterpolation par lordinateur. Mais sans mme parler dinterpolation, la finalit du scnario est de dcrire lvolution temporelle de votre animation. Plus prcisment, durant lanimation lexistence dun lment
128
Flash CS5
visuel connat des moments significatifs. Il y a au moins celui o llment apparat sur scne et celui o il disparat. Entre les deux, ventuellement, il pourra y avoir des moments o la valeur dune certaine proprit de llment (sa position, son orientation, son opacit, sa couleur, etc.) est modifie. chacun de ces moments correspondra une image-cl.
Pour tre tout fait prcis, en interpolation, il sagira effectivement dimage-cl dans le contexte de linterpolation classique (voir section Scnario dune interpolation classique, Fiche 28) et dimage-cl de proprits dans le contexte de linterpolation de mouvement (voir section Nouvelle approche de linterpolation depuis Flash CS4, Fiche 27).
En toute image-cl, il se passe quelque chose dans lanimation: apparition, modification, disparition. De sorte quune image-cl diffre toujours de limage juste avant elle. En effet, en dehors de toute interpolation, une image ordinaire nest que la prolongation dans la dure de limage-cl qui la prcde. La Figure21.6 met cela en vidence: la tte de lecture est en image4, juste avant la seconde image-cl. En haut, le scnario est affich en mode habituel, tandis quen bas le mme scnario est affich en mode Aperu. Il est clair que la scne affiche le dessin de limage-cl initiale. Les images1 4 sont identiques visuellement. la section prcdente, nous avons appel plage dimages la squence dimages contigus depuis une image-cl (la premire image de tout calque est toujours une image-cl) jusqu la dernire image non vide du calque (dnote par un rectangle). On appellera aussi plage dimages la squence dimages contigus depuis une image-cl jusqu limage prcdant limage-cl suivante. Lexemple de la Figure21.6 contient deux plages dimages et lon y constate que les images dune plage sont homognes visuellement. Lorsque vous doublecliquez sur une image ordinaire (en dehors dune image-cl), vous slectionnez entirement la plage laquelle elle appartient. Remarquez que les images-cls de la Figure21.6 ont toutes deux un contenu visuel: elles sont dnotes par un cercle plein. Les images-cls des figures prcdentes sont toutes des images-cls vides: elles sont dnotes par un cercle vide. De plus, les plages dimages de la Figure21.6 ont toutes deux un contenu visuel: elles ont un fond gris. Les plages dimages des figures prcdentes sont toutes vides: elles ont un fond blanc. Du point de vue informatique, les images ordinaires dune plage dimages ntant que la prolongation de limage-cl initiale de cette plage, elles ne ncessitent aucun codage. Cest seulement au niveau des images-cls quil y a de linformation encoder. Autrement dit, les images ordinaires nont aucune incidence sur le poids de votre fichier, seules les images-cls lalourdissent. Le scnario reproduit Figure21.7 produira visuellement rigoureusement la mme animation que le prcdent, mais puisquil nest constitu que dimages-cls, il est inutilement plus long tlcharger que le prcdent. Ne crez des images-cls que l o elles sont strictement ncessaires: apparition, modification de proprit, disparition. Le seul contexte dans lequel des images-cls en srie se justifient est celui de lanimation image par image (voir Fiche26).
129
Figure 21.6
Deux images-cls: deux plages dimages homognes.
Figure 21.7
Un scnario inutilement lourd ne comportant que des images-cls.
Voir les fichiers FCS5_21a.fla et FCS5_21b.fla dans les exemples du livre.
Ligne du temps. Depuis quelle existe, lanimation exploite la persistance des images au fond de notre rtine pour donner lillusion dun mouvement continu partir dlments discontinus, discrets. La pellicule dun film est une succession de photogrammes spars. Dans le cas dun film danimation ralis image par image, chacun de ces photogrammes est une phase de lanimation. De mme, le scnario dune animation image par image sur ordinateur est une succession dimages-cls contenant ses phases successives.
La commande Insertion> Scnario> Image-cl insre une image-cl limage courante (et non aprs, comme ctait le cas pour linsertion dimage). Dans le menu contextuel qui surgit au clic sur une image (voir Figure 21.1), vous trouvez galement une commande Insrer une image-cl. Le contenu par dfaut de la nouvelle image-cl est une copie de celui
Notions cls
130
Flash CS5
de limage-cl prcdente, comme le montre la Figure21.8. Vous devez ensuite modifier ou supprimer ce contenu par dfaut sinon pourquoi avoir cr une image-cl?
Raccourci
F5 insre une image aprs limage courante, F6 insre une image-cl limage courante. Maj+F5 supprime une image. Maj+F6 efface une image-cl.
Figure 21.8
Insertion dune imagecl sur une image existante (avant, aprs).
Vous pouvez galement insrer une image-cl sur un emplacement vide dimage, cest-dire au-del de la dernire plage du calque. Celle-ci est alors prolonge jusqu la nouvelle image-cl, comme lillustre la Figure21.9.
Figure 21.9
Insertion dune image-cl sur un emplacement vide dimage (avant, aprs).
Lorsque vous insrez une image-cl, la tte de lecture passe limage suivante si vous aviez slectionn une image, mais en labsence de slection dimage dans un calque (image dsigne dun clic sur la ligne du temps), limage-cl est insre dans le calque de sommet de pile et la tte de lecture reste en place. Les rgles de slection multiple dimages-cls sont les mmes que pour les images. En slectionnant dans le scnario, vous slectionnez tout le contenu sur la scne. Rciproquement, en slectionnant un lment sur la scne, vous slectionnez limage-cl dans le scnario. La commande Copier, la diffrence de Copier des images, ne copie que le contenu sur la scne (aucune image du scnario).
131
Image-cl. Lorsquun lment visuel apparat sur la scne, cela fait lobjet dune imagecl. Lorsquune proprit dun lment visuel change de valeur, cela fait lobjet dune image-cl. Lorsquun lment visuel est remplac sur la scne par un autre, cela fait lobjet dune image-cl. Plage dimages. Une plage dimages dbute une image-cl et se poursuit jusqu limage prcdant la prochaine image-cl (vide ou non) du calque ou la dernire image de celui-ci. Image-clvide. Un calque peut contenir des plages vides, lesquelles commencent par une image-cl vide. Image ordinaire. Toute image dune plage, hormis la premire, est une image ordinaire. En labsence dinterpolation, une image ordinaire est visuellement identique limage-cl qui dbute sa plage.
Raccourci
OptiOn+CMd+C (Mac) ou alt+Ctrl+C (Windows) copie des images. OptiOn+CMd+V (Mac) ou alt+Ctrl+V (Windows) colle des images.
Comme pour les images, vous avez la possibilit dinsrer plusieurs images-cls en une fois en slectionnant un certain nombre dimages contigus (ventuellement sur plusieurs calques contigus). Si aprs avoir insr une image-cl, vous slectionnez lensemble du contenu par dfaut et le supprimez sans rien mettre la place, vous avez ralis dans le scnario la disparition du contenu de la plage dimages prcdente. Il y a cependant plus simple pour arriver au mme rsultat: insrer une image-cl vide, via la commande Insertion> Scnario> Image-cl vide ou sa jumelle Insrer une image-cl vide dans le menu contextuel (Figure21.1). Dans ce menu contextuel, on trouve galement la commande Supprimer limage-cl qui convertit limage-cl en image ordinaire. La Figure21.10 illustre la diffrence entre les deux commandes Supprimer les images (applique au milieu) et Effacer les images (applique en bas).
Notions cls
132
Flash CS5
Figure 21.10
Un scnario dans lequel limage 5 est slectionne (en haut); le mme aprs Supprimer les images (au milieu), puis aprs Effacer les images (en bas).
Fiche 22
Structurer grce aux calques

Utilit des calques
En animation traditionnelle, le film est ralis image par image sur un banc-titre. Dans un tel dispositif, la camra a son axe optique vertical et cadre une table transparente sur laquelle limage est compose. Pour viter de tout devoir redessiner chaque image, celle-ci est dcompose en lments dessins sur des cellulods transparents empils sur la table. La notion de calques, introduite au dpart dans Photoshop puis adopte dans de nombreux logiciels dinfographie dont Flash, reprend ce principe dempilement dlments distincts pour composer les images. Dans Flash, laxe vertical du scnario correspond cet empilement des calques. De haut en bas de la fentre du scnario, on parcourt la pile de calques galement de haut en bas. Le calque le plus bas dans la fentre correspond donc larrire-plan de la scne. ct de cette mtaphore des calques emprunte au banc-titre de lanimation, il peut tre clairant den signaler une autre emprunte la table de mixage audio. En effet, lenvironnement Director possde lui aussi une fentre scnario et chacune des lignes de celle-ci est appele piste plutt que calque. Cest aussi le cas dans les diteurs vido comme Final Cut ou Premiere. Cette mtaphore dcrit mieux que celle des calques le travail de synchronisation que vous allez devoir raliser dans cette fentre de scnario. Il sagit en effet dy rgler la squence dintervention en parallle de diffrents lments de mdias: entre en scne, variations ventuelles, sortie de scne. Le paralllisme inhrent au scnario est mieux rendu par le terme anglo-amricain utilis dans Director: score, partition. Les diffrents calques/ pistes du scnario sont bel et bien comparables aux diffrentes lignes dune partition dorchestre. vous dorchestrer les diffrents lments de mdias!
133
la Fiche 8, traitant des modes de dessin, nous avons dj voqu les calques comme un moyen de se prmunir contre la fusion des lments vectoriels dessins. Cest leur premire utilit et celle-ci est propre Flash. La seconde utilit des calques est universelle: ils vous permettent dorganiser visuellement les lments qui composent la scne. Lorsque ceux-ci se chevauchent, leur ordre dempilement devient significatif: ce qui est plus haut dans la pile masque ce qui est plus bas. vous de contrler lordre dempilement des calques pour obtenir ce que vous souhaitez. Dans lexemple de la Figure22.1, le calque papillon est au premier plan. Il recouvre les calques nuage et fleur, ce dernier recouvrant le calque toile larrire-plan. Sachez aussi quau sein dun calque le dessin vectoriel se trouve derrire le graphisme bitmap, le texte devant le graphisme (quil soit bitmap ou vectoriel) et pour le reste, ce qui a t plac plus rcemment se trouve par dessus ce qui est plus ancien (si ces rgles vous paraissent trop compliques, vous vous en affranchirez en plaant les lments sur des calques distincts; nous verrons galement au chapitre suivant que les interpolations de mouvement ncessitent un seul clip par calque). Aprs les deux dimensions spatiales de la scne, la dimension temporelle, lempilement des calques constitue la quatrime dimension de lintgration multimdia.
Figure 22.1
Lordre dempilement des calques est significatif lorsque leurs lments se chevauchent.
Les calques ont une troisime utilit comme outil dorganisation de vos donnes dans le fichier source. Ils facilitent votre travail dans lenvironnement de cration (et l seulement puisquils ne sont pas publis dans le fichier SWF). En donnant un nom descriptif aux calques, vous rendrez votre fichier source plus lisible. Ensuite, lenvironnement Flash vous offre diverses fonctionnalits trs utiles: hirarchisation dans des dossiers, masquer/montrer les calques, les verrouiller, afficher leur contenu sous forme de contours.
134
Flash CS5
Enfin, le principe de dcomposition par calques est tellement utile, qu ct des calques standard, il en a t cr dautres types spcifiques certaines techniques. Les calques guides sont des auxiliaires pour la composition de la scne (voir Calques non standard, Fiche22). Vous pouvez raliser des effets de pochoir laide des calques masques (la Fiche23 explique comment). Lanimation (traite au chapitre suivant) fait grand usage des calques: linterpolation utilise des calques standard, les calques guides de mouvement contiennent des trajectoires et la cinmatique inverse utilise des calques de pose.
Voir dans larchive des exemples du livre, le fichier FCS5_22a.fla.
Utilisation des calques

Sur la gauche de la barre dtat, se trouve les boutons des commandes relatives aux calques, lgends sur la Figure22.2. Le calque courant, lorsquil existe, est le calque slectionn. Il apparat en bleu dans la pile et une icne de crayon saffiche aprs son nom. Lorsque vous crez un nouveau calque en cliquant sur le bouton homonyme, il est insr dans la pile au-dessus du calque courant. Pour renommer un calque, double-cliquez sur son nom et saisissez en un nouveau. Dans lexemple de la Figure22.2, Calque1 tait le calque courant au moment o Calque3 a t insr. Ce dernier a t renomm papillon et est devenu le calque courant. Cliquer le bouton Supprimer ce niveau supprimerait le calque nomm papillon.
Figure 22.2
Gestion des calques.
Supprimer Nouveau calque Nouveau dossier
Lorsque vous modifiez un lment dun calque par exemple si vous retouchez un trac en ditant ses points dancrage avec loutil Sous-slection le calque courant ne change pas. Par contre, si vous slectionnez un lment sur la scne avec loutil Slection, son calque devient le calque courant. Pour slectionner un calque dans le scnario, donc en faire le calque courant, cliquez sur son nom, sur licne de calque gauche de celui-ci ou droite o apparatra licne de crayon. Lorsque cest fait, vous avez slectionn sur la scne tous les lments que contient le calque courant: sil y a des objets, leur rectangle englobant apparat; sil y a des lignes et des formes (tracs en mode fusion ou objets dissocis), elles se recouvrent des pointills de slection.
135
Lorsque vous voulez modifier ou supprimer du contenu dans votre animation, vous slectionnez dabord les lments, dans leur calque et limage-cl o ils apparaissent. Lorsque vous voulez ajouter une ou plusieurs images (images ordinaires ou images-cls) votre animation, vous pouvez slectionner soit un calque, soit une image (en cliquant dans la ligne de temps). Dans le premier cas, lajout dimage ne concerne que le calque slectionn; dans le second, il concerne tous les calques. Parfois, vous mettrez en place sur un mme calque diffrents lments, avant de dcider de leur attribuer chacun leur propre calque. Slectionnez les lments, puis utilisez la commande Modication> Scnario> Rpartir vers les calques, qui vous vite une laborieuse squence de couper-coller. Les calques sont crs dans lordre initial de cration des lments, et de haut en bas. Ils sont nomms automatiquement: du nom de loccurrence si elle en possde un, du nom du symbole ou du pseudo-symbole sinon. Dans le cas de texte spar, chaque calque cr reoit pour nom le caractre quil contient. Si aucune des rgles prcdentes ne sapplique, les calques sont nomms Calque 1, Calque 2, Calque 3, etc. Lorsque vous souhaitez changer lordre dempilement des calques, faites glisser un calque par son nom. Au survol, les nouveaux emplacements de la pile o vous pouvez le dposer se matrialisent par une sorte dpingle glisse entre deux calques. Vous pouvez galement faire appel aux quatre commandes du menu Modication> Rorganisation pour changer lordre dempilement lintrieur dun calque (graphismes bitmap excepts). Mettre au premier plan signifie placer au sommet de la pile, Vers lavant remonter dun cran, Vers larrire descendre dun cran et Mettre larrire-plan (NDA : et non pas Mettre lchrome comme lindique une erreur de localisation du logiciel.) placer en fond de pile. Dans lexemple de la Figure22.3, la forme de la tige a t mise au premier plan du calque fleur. Si vous rencontrez des difficults obtenir lordre dempilement voulu lintrieur du calque, rpartissez les lments sur plusieurs calques que vous mettrez facilement dans le bon ordre par glisser-dposer. Le copier-coller ordinaire est inoprant sur un fragment de scnario, cest--dire une slection dimages contigus, ventuellement sur plusieurs calques contigus. Nanmoins, Flash propose les commandes adquates. Faites votre slection. Le plus simple est de glisser un rectangle de slection, mais vous pouvez aussi cliquer dans un coin dudit rectangle, puis Maj+cliquer dans le coin oppos. Demandez ensuite Modier > Scnario > Copier les images. Slectionnez alors une image, puis demandez Modier > Scnario > Coller les images. Limage est remplace par la premire des images copies et toutes les images copies suivantes sinsrent la suite en dcalant les images antrieures. Le principe est le mme pour les calques: celui de limage slectionne est remplac par le premier des calques copis et tous les calques copis suivants sinsrent la suite en dcalant les calques antrieurs. Peut-tre est-il plus facile, avant de faire le collage, de slectionner un rectangle de mme taille que celui copi. Dans ce cas, il y a simple remplacement des images, sans insertion ni dcalage.
136
Flash CS5
Figure 22.3
Modification de lordre dempilement des lments lintrieur dun calque.
Raccourci
Maj+CMd+d (Mac) ou Maj+Ctrl+d (Windows) rpartit la slection sur diffrents calques. CMd+FlCHE HaUt ou bas (Mac) ou Ctrl+FlCHE un calque dun cran dans la pile.
HaUt
ou bas (Windows) fait remonter ou descendre

HaUt
Maj+OptiOn+FlCHE HaUt ou bas (Mac) ou Maj+alt+FlCHE calque en sommet ou en fond de pile.
ou
bas
(Windows) place un
Maj+OptiOn+C (Mac) ou Maj+alt+C (Windows) copie des images. Maj+OptiOn+X (Mac) ou Maj+alt+X (Windows) coupe des images. Maj+OptiOn+V (Mac) ou Maj+alt+V (Windows) colle des images.
Lenvironnement au service de la complexit

Plus votre scne se complexifie et plus il devient dlicat dy slectionner un lment. Heureusement, lenvironnement vous propose plusieurs fonctionnalits utiles. La premire consiste simplifier laffichage: cliquez dans la colonne surmonte dune icne dil pour masquer tout le contenu dun calque. Le point noir est remplac par une croix rouge. Cliquez nouveau pour rafficher le contenu du calque. Un calque masqu nest plus visible, non modifiable (ni copier, ni couper, ni coller), mais il sera export dans lanimation publie. Dans le scnario de la Figure22.4, le calque nuage est masqu. La seconde fonctionnalit consiste verrouiller un calque. La seconde colonne est surmonte dune icne de cadenas et au clic dans une case, le point noir est remplac par cette icne de cadenas, indiquant que le calque est verrouill. Un calque verrouill reste visible mais il est non modifiable sur la scne (mais il reste modifiable dans le scnario: ajout dtiquettes, de commentaires ou dactions, cest--dire de code ActionScript). Dans le scnario de la Figure22.4, le calque fleur est verrouill. Si besoin, vous avez la possibilit de verrouiller slectivement les lments dun calque grce la commande Modication> Rorganisation> Verrouiller. La troisime fonctionnalit se trouve dans la troisime colonne, surmonte dune icne de carr. Au clic dans une case, le carr de couleur se vide et tout le contenu du calque est
137
afch sous forme de contours, autrement dit les formes disparaissent et ne restent que les lignes. Celles-ci sont affiches dans la couleur qui remplissait le carr avant dy cliquer. Pour en changer, double-cliquez le carr et dans la bote de dialogue Proprits du calque utilisez la puce de Couleur de contour pour en choisir une autre (voir la Figure22.5). Cette fonctionnalit est utile pour mettre en place les lments les uns par rapport aux autres puisquil les rend en quelque sorte temporairement transparents. Un calque afch sous forme de contours sera export avec ses formes dans lanimation publie. Dans le scnario de la Figure22.4, le calque toile est afch sous forme de contours.
Figure 22.4
Calques : masquage, verrouillage et affichage sous forme de contours.
Voir, dans larchive des exemples, le fichier FCS5_22b.fla.
Les cases de ces trois colonnes sont donc des bascules individuelles. Si vous y cliquez avec la touche OptiOn (Mac) ou alt (Windows) enfonce, ce sont tous les autres calques qui basculent. Et si vous cliquez sur licne qui surmonte la colonne, tous les calques basculent. La bote de dialogue Proprits du calque, reproduite Figure22.5, souvre via la commande Modication> Scnario> Proprits du calque ou en double-cliquant sur le carr daffichage sous forme de contours. Les cases cocher Afficher, Verrouiller et Afficher le calque sous forme de contours sont redondantes avec les cases des trois colonnes vues prcdemment. Par contre, cette bote de dialogue est lun des endroits o il vous est possible de donner au calque lun des types non standard (voir la section suivante).
138
Flash CS5
Enfin, vous avez la possibilit de donner au calque une hauteur de 200% ou 300%. Un tel affichage na essentiellement dintrt que pour les calques auxquels un fichier son est associ, puisquil vous permet de mieux visualiser la forme donde de celui-ci (le son sera trait au Chapitre8). Si la Hauteur de calque est une option individuelle, le menu en haut droite de la fentre de scnario vous propose une option Courtes qui sapplique tous les calques et leur applique une rduction en hauteur de lordre de 80%. Ce menu offre galement cinq options pour la largeur des images (minuscules, petites, normales, moyennes ou grandes). Nous avons dj vu des exemples de loption dafchage en miniature du contenu de limage: les scnarios des Figures21.6 21.10 sont en Aperu. Avec cette option, le cadrage de la miniature se fait sur le contenu, tandis quavec loption Afcher un aperu dans le contexte, le cadrage se fait sur la scne. Loption Images teintes est active par dfaut: les images ayant un contenu ont un fond gris, tandis que les images vides ont un fond blanc.
Figure 22.5
La bote de dialogue Proprits du calque.
Vous pouvez escamoter ou faire rapparatre le scnario dans la fentre document en doublecliquant sur la barre grise droite de longlet diteur de mouvement. Dans la fentre document, vous pouvez redistribuer lespace entre le scnario et la scne en faisant glisser la ligne horizontale qui spare la barre dtat des onglets des animations ouvertes. Dans la fentre scnario, vous pouvez redistribuer lespace entre la pile de calques et la zone des images en faisant glisser la ligne verticale qui les spare. Si la fentre scnario est dans le dock du cadre de lapplication, redimensionnez la en glissant les lignes qui la sparent des autres fentres du dock. Si la fentre scnario est flottante, redimensionnez la en glissant son coin infrieur droit. ce stade, nous avons pratiquement explor toutes les fonctionnalits de la fentre document. Les boutons de la barre dtat que nous navons pas encore traits le seront la section Utiliser la pelure doignon, Fiche 26. Enfin, la barre ddition sera dcrite la Fiche33. Pour conclure cette section, malgr les facilits quoffre lenvironnement Flash pour travailler avec un scnario complexe, remarquons que mme avec beaucoup de calques, vous nviterez pas le dfilement vertical, ni le dfilement horizontal avec beaucoup dimages. Deux techniques permettent nanmoins de rduire le nombre dimages de votre scnario
139
et souvent aussi son nombre de calques. Ce sont dune part les squences (Fiche24) et la cration de hirarchie de scnarios via limbrication de symboles (Fiche36).
Navigation dans lanimation en phase de ralisation

En dpit de toutes les fonctionnalits dcrites la section prcdente, une animation significative aura de tout en quantit: calques, images, lments de mdias, etc. Dans ce cas, le panneau Explorateur danimation vous sera fort utile pour retrouver ce que vous cherchez. Il est reproduit Figure 22.6 dans trois configurations. En haut du panneau, sous la rubrique Afficher, cinq boutons vous permettent de filtrer ce que vous voulez voir affich, respectivement de gauche droite: le texte, les symboles (graphiques, boutons et clips), le code ActionScript, les fichiers imports (images bitmaps, sons, vidos), les images et les calques. gauche de la Figure 22.6, seul le cinquime bouton (images et calques) est enfonc. Au centre, le premier bouton (texte) et le quatrime (vidos, sons, bitmaps) sont enfoncs. droite, seul le troisime bouton (code ActionScript) est enfonc.
Figure 22.6
Lexplorateur danimation affichant les lments dune animation: ses calques et leurs images significatives ( gauche), ses textes et ses images bitmaps (au centre), son code ActionScript ( droite).
Si aucune des cinq options daffichage faisant lobjet dun bouton ne vous donne satisfaction, cliquez sur le sixime, et dernier, bouton de la rubrique Afficher pour accder la bote de dialogue Paramtres de lexplorateur danimation, reproduite Figure 22.7. Vous pourrez ainsi personnaliser plus finement laffichage de lexplorateur danimation, au sens o les catgories dlments regroupes dans un mme bouton font ici lobjet dune case cocher spare.
140
Flash CS5
Figure 22.7
La bote de dialogue Paramtres de lexplorateur danimation.
La Figure 22.7 montre que la bote de dialogue contient une seconde rubrique Contexte. Par dfaut, cest loption lments danimation qui est coche. Ctait le cas pour les trois copies dcran de la Figure 22.6. Dans ce cas, les lments filtrs sont affichs par squences (voir Fiche 24). Lanimation prise en exemple Figure 22.6 ne contient quune seule squence. Dfinitions de symbole est une seconde option pour le Contexte (elle sera traite la fin de la Fiche 36). Notez que les deux ne sont pas exclusives et peuvent tre coches simultanment. Bien que les options prcdentes permettent de filtrer les lments affichs par lexplorateur danimation, la liste hirarchique affiche peut rester consquente. Chacun de ses lments est prcd dun petit triangle cliquable qui vous permet de dvelopper/rduire. Slectionnez un lment de mdia dans la liste (ou plusieurs, en Maj-cliquant) pour travailler dessus. Slectionnez une image dun scnario complexe, long et/ou hirarchique, pour vous y rendre. Par exemple, limage 545 est une image significative de lanimation de la Figure 22.6, puisquelle est mentionne trois fois dans la copie dcran de gauche. Cliquer sur lune de ces mentions est sans doute la faon la plus simple de sy rendre, beaucoup plus rapide que de devoir faire dfiler le scnario jusque-l. Le menu des options du panneau Explorateur danimation est reproduit Figure 22.8 (le menu contextuel est similaire). Sa premire commande, Atteindre, est aussi un moyen efficace de naviguer jusqu llment slectionn (calque, image, squence) dans une animation complexe en cours de ralisation. Dans ce menu, on trouve des options Afficher les lments de lanimation et Afficher les dfinitions de symbole. Elles correspondent aux options de Contexte de la bote de dialogue de la Figure 22.7. Dautres commandes sont relatives aux symboles, la bibliothque et la modification. Elles seront traites la fin de la Fiche 36. Les autres commandes du menu ont un intitul qui se passe de tout commentaire. Enfin, si malgr le filtrage vous peinez trouver llment qui vous intresse, vous pouvez faire une recherche par nom via le champ Rechercher en tte du panneau Explorateur danimation. Cette recherche se fait dans la liste couramment affiche dans le panneau.
141
Figure 22.8
Le menu des options du panneau Explorateur danimation.
Calques non standard

La bote de dialogue Proprits du calque, reproduite Figure22.5, montre que par dfaut un calque est de type Normal, mais quil existe quatre autres types de calques. Sachez que vous retrouvez galement les types de calques Guide et Masque dans le menu contextuel qui apparat au clic droit sur un calque dans la pile. Les calques de type Guide, dans lutilisation pour laquelle ils ont t conus, sont des auxiliaires pour la composition. Par exemple, dans le scnario de la Figure22.6, le calque structure contenant lhorizontale, la verticale et les deux diagonales qui passent par le centre de la scne est de type Guide, ce que dnote licne de t gauche de son nom. Un tel calque peut aussi contenir un canevas daide au trac. Le contenu dun calque guide est ignor lorsque vous publiez le fichier SWF. Cette proprit a conduit une utilisation dtourne de ce type de calque : vous pouvez y placer des annotations de votre fichier source, pour mmoire ou lattention de vos quipiers. Les calques de type Dossier ne sont pas proprement parler des calques, puisquils nont pas de contenu propre. Dans Flash, le dossier de calques est au calque, ce que dans un systme dexploitation le dossier est au fichier. Autrement dit, grce aux dossiers de calques, vous pouvez structurer vos calques, les hirarchiser (limbrication des dossiers est possible). gauche de licne de dossier qui prcde son nom, un dossier de calques affiche
142
Flash CS5
le triangle habituel qui permet de le dvelopper ou de le rduire. Dvelopp, il affiche tous ses calques avec une indentation. Vous crez un dossier de calques via le bouton Nouveau dossier. Comme pour un nouveau calque, le nouveau dossier est insr au-dessus du calque courant. Il est initialement vide. Pour le garnir, faites une slection de calques les raccourcis universels de slection multiple Maj+CliC et CMd+CliC (Mac) ou Ctrl+CliC (Windows) fonctionnent avec les calques puis glissez-dposez celle-ci au-dessus de licne du dossier. Les proprits dun dossier (visibilit, verrouillage) sappliquent tous les calques quil contient. Pour sortir un calque dun dossier, procdez pareillement par glisser-dposer. Si vous supprimez un dossier, vous supprimez tous les calques imbriqus quil contient, aussi une bote de dialogue vous demande-t-elle confirmation. Les dossiers de calques sont un bon moyen de hirarchiser vos donnes, mais noubliez pas que vous disposez dun moyen dimbrication beaucoup plus puissant avec les clips danimation (voir Fiche36). En effet, avec ceux-ci limbrication nest pas seulement dans la dimension des calques, mais aussi dans celle, temporelle, des images.
Figure 22.9
Un calque guide utilis comme aide la composition.
Voir dans larchive des exemples, le fichier FCS5_22c.fla.
Les calques de type Masque et Masqu servent crer des effets de pochoir et sont traits la fichesuivante. Les calques guides de mouvement servent dfinir une trajectoire danimation, laquelle nest pas rendue directement dans le fichier SWF publi. Dprcis depuis la version CS4 au profit du nouveau systme dinterpolation et ne subsistant que par compatibilit avec les versions prcdentes de Flash, ils ne font pas lobjet dun type dans la bote de dialogue Proprits du calque, mais le menu contextuel dun calque propose une commande Ajouter
143
un guide de mouvement classique. Les guides de mouvement seront traits la section Interpolation classique guide, Fiche 28. Les calques de pose ne font pas non plus lobjet dun type dans la bote de dialogue Proprits du calque. Ils sont crs lorsque vous utilisez loutil Segment pour dfinir un squelette danimation par cinmatique inverse. Ils seront traits la Fiche31.
Fiche 23
Utiliser un masque
Le principe de la technique de masquage est de rvler le contenu dun ou plusieurs calques laide de celui dun autre calque. La phrase prcdente vous aura peut-tre pos problme, puisqua priori un masque est fait pour occulter et non pour rvler. Effectivement, dans Flash le terme masque est utilis de manire paradoxale : il faudrait presque parler dantimasque, puisque ce qui, au final, se trouve masqu ( savoir le pochoir) est ce qui se trouve sous la forme complmentaire de celle dite masque. Cet effet de pochoir fait appel deux types non standard de calques: Masque. Ce calque dont le contenu ne sera pas directement visible dans lanimation publie, sert dfinir la forme anti-pochoir. Si ce calque tait vide, rien des calques masqus ne serait visible. Un calque masque peut contenir des lments visuels de nimporte quel type, hormis les objets 3D (vous naurez pas accs aux outils 3D pour les objets placs sur un calque masque). Notez galement quil est nest pas possible de placer un calque de masque dans un bouton (voir Fiche 35). Le calque masque est unique, mais il peut tout fait contenir des lments disjoints. Masqu. Un calque masqu peut galement contenir des lments visuels de nimporte quel type. Si besoin, il peut y avoir plusieurs calques masqus associs un calque masque. Dans la pile des calques masqus, les rgles de recouvrement habituelles prvalent. Un calque masque ne peut pas faire partie des calques masqus dun autre calque masque. Commencez par crer sur un calque standard le ou les objets qui serviront de masque. Pour en finir avec lambigut de vocabulaire mentionne ci-dessus, prenons un exemple simple, celui du projecteur de poursuite qui nclaire quune zone circulaire dune scne de spectacle plonge dans le noir (cette animation sera ralise la Fiche 30). Pour raliser un effet quivalent sur votre scne Flash, vous dessineriez une forme de cercle (remplie, donc plus exactement un disque). Gardez lesprit quil sagit de masque binaire. Autrement dit, ni la couleur, ni lopacit des pixels ne compte. Seule compte leur prsence ou absence. Pour tout pixel du calque dit masque, le pixel correspondant des calques dits masqus sera rvl. Lorsque votre masque est prt, donnez lui explicitement le type Masque, dans la bote de dialogue Proprits du calque (voir Figure 22.5). Dans le scnario de la Figure 22.2, le calque texte est de type Masque. Remarquez son icne de pochoir en forme dellipse sur
144
Flash CS5
un damier vert et bleu. Ce calque ne contient quun seul objet texte dont les lettres sont en corps 200points. Ensuite, il vous reste placer un ou plusieurs calques standard sous influence du masque. Il suffit pour cela de les glisser sous le calque Masque : ils sy indentent et reoivent une icne damier vert et bleu corn (calque ciel dans le scnario de la Figure23.1). Au passage, ils ont reu implicitement le type Masqu, ce que vous pouvez vrifier en affichant leur bote de dialogue Proprits du calque. Notez quil est impossible de mettre sous influence dun calque de type Masque un autre calque de type Masque. En publiant lanimation (voir Fiches 83 et 84), vous visualiserez leffet. Il est nanmoins possible de le prvisualiser dans lenvironnement de ralisation en verrouillant tous les calques en jeu. Vous pouvez soit le faire manuellement, soit utiliser la commande Afcher les masques (il faut comprendre Afcher les masquages) du menu contextuel des calques. La Figure23.2 montre le rsultat du masquage construit dans le scnario de la Figure23.1, exemple de leffet trs rpandu de texte masque.
Figure 23.1
Le scnario dun effet de masquage.
Vous pouvez affiner votre effet : le calque masque reste ditable (en binaire). Il suffit pour cela de le dverrouiller. Tout calque en jeu dans un masquage peut redevenir un calque standard. Il suffit de lui redonner le type Normal dans la bote de dialogue Proprits du calque. Si ctait un calque de type Masque, cela dconstruit le masque; si ctait un calque de type Masqu, cela retire de la pile des calques masqus ledit calque ainsi que tous ceux qui se trouvaient sous lui. Pour ne retirer quun seul calque, glissez-le en dehors de la pile des calques masqus.
145
Gardez-vous dun recours excessif aux masques : sils sont trop nombreux, vous verrez la performance se dgarder, a fortiori sils font lobjet dune animation (voir Fiche 30).
Figure 23.2
Un effet de texte masque.
Les quatre tapes sont retrouver dans les fichiers de larchive des exemples de ce livre : FCS5_23a.fla (les donnes), FCS5_23b.fla (calque Masque), FCS5_23c.fla (calque Masqu) et FCS5_23d.fla (effet de masque de texte visualis).
146
Flash CS5
Si votre lecteur de PDF ne lit pas le Flash, tlchargez lanimation qui suit depuis le site de Pearson. Elle se trouve dans larchive des exemples : CHAP3 > FCS5_23e.swf (effet de masque de texte anim). Sinon, cliquez sur les boutons pour la lancer ou larrter.
Fiche 24
Dcouper un long scnario

Parfois votre scnario se dveloppera sur plusieurs milliers dimages. Vous pouvez aller jusqu 16000 images par fichier. Ce chiffre vous semble peut-tre une limite inatteignable, mais si vous faites de lanimation, ne serait-ce qu une cadence rduite de 12I/S, 10minutes correspondent 7200 images. Vous dplacer dans ce genre de scnario via lascenseur de dfilement horizontal va rapidement savrer laborieux. Un long scnario peut souvent tre fractionn en sections logiques. Pour une longue animation qui nest pas un plan squence, le dcoupage par plans simpose. Dans Flash, chacun de ces plans correspondra une squence. Les squences ont un ordre et lanimation publie les enchane sans transition dans cet ordre. Toute animation Flash a au moins une squence. Lorsquelle en a plusieurs, il y a une squence courante et le scnario naffiche plus que les images de celle-ci, ce qui rend plus simple laccs par dfilement. Gardez bien lesprit que ceci na pour but que de vous simplifier la tche au niveau de lenvironnement de ralisation. Il ny a rien attendre au niveau de lexcution: le dcoupage du scnario en squences nallgera pas le fichier SWF. Le plus simple pour grer les squences est douvrir le panneau ddi (Fentre> Autres panneaux> Squence), reproduit Figure24.1. Pour crer une nouvelle squence, cliquer sur le bouton en bas gauche (il existe galement une commande Insertion> Squence). La premire chose faire est sans doute de donner un nom descriptif la squence: double-cliquez son nom (Squence 2) dans le panneau et saisissez-en un nouveau. Avec une nouvelle squence, vous vous retrouvez face un scnario vide et une scne vide comme lorsque vous crez un nouveau fichier.
147
Le nom de la squence courante (salle4 dans lexemple de la Figure 24.1) est affich dans la barre ddition reproduite Figure24.2, laquelle vous offre galement un menu pour changer facilement de squence courante (si vous ne la voyez pas, faites la safficher via Fentre > Barres doutils > Barre ddition). Figure 24.1
Le panneau Squence.
Figure 24.2
La barre ddition affiche le nom de la squence courante et offre un menu pour en changer.
Le panneau Squence a deux autres boutons. Celui dont licne est une poubelle sert videmment Supprimer la squence. Le dernier permet de Dupliquer la squence. Imaginons que vous ayez dj construit une squence salle1. Plutt que de construire la squence salle2 partir de zro, puisque celle-ci possde dans sa structure pas mal en commun avec salle1, il sera plus malin de commencer par dupliquer cette dernire pour ensuite modifier ce qui diffre. Enfin, si vous souhaitez modifier lordre denchanement des squences, il vous suffit de les glisser-dposer au sein du panneau Squence.
Raccourci
CMd+CliC (Mac) ou Ctrl+CliC (Windows) sur la poubelle du panneau Squence supprime une squence sans confirmation.
Sil est vident que le dcoupage en squences diminue le nombre dimages afficher dans la fentre de scnario, il faut tre conscient que trs souvent cela diminue aussi le nombre de calques. En effet, il y a fort parier que certains objets nauront dexistence que dans certaines squences et mme souvent dans une seule. Dans un scnario squence unique, le calque de ces objets existerait partout, bien qutant vide de contenu sur un grand nombre
148
Flash CS5
dimages. Dans un scnario dcoup en squences, ce calque aura disparu des squences dans lesquelles lobjet ne figurepas. Le dcoupage en squences nest possible que sur le scnario principal et pas sur les scnarios des symboles (voir Fiche33). Les squences ne sont pas le seul moyen dont vous disposiez pour dcouper votre animation en sections logiques. Une alternative simple vous est offerte avec les symboles clips danimation qui seront traits la Fiche33. Une autre alternative consiste dcouper en fichiers SWF distincts, lesquels seront tlchargs la demande depuis une autre animation SWF matresse. Sa mise en uvre est plus dlicate, car elle ncessite un minimum de programmation ActionScript.
Enfin, souvent en vue de linteractivit et donc dune lecture non squentielle du scnario, vous aurez juste besoin dy dfinir des points de branchement. Dans ce cas, il est possible mais non indispensable de faire appel aux squences: des tiquettes dimages peuvent trs bien faire laffaire (voir fichesuivante).
Fiche 25
Naviguer dans le scnario lexcution

Interactivit, non linarit
Nous avons dit plusieurs reprises que la mtaphore fondatrice de lenvironnement Flash est le cinma danimation. Les photogrammes se suivent physiquement sur la pellicule dun film et le projecteur en fait une lecture linaire, squentielle. Lorsque Flash est utilis purement pour ses facults danimation, lanimation produite cette fois au sens de fichier SWF est galement destine une lecture linaire. Le Chapitre4 montrera que le scnario suffit pour raliser une telle animation linaire et que lon peut dans ce cas faire lconomie de la programmation ActionScript. Mais lanimation nest plus aujourdhui que lune des facettes de Flash, devenu au fil des versions une plateforme dintgration multimdia. Linteractivit en est une autre facette capitale. Au plus simple, on conservera une lecture linaire, mais en donnant la main lutilisateur qui dcidera du rythme des enchanements. Cest le cas lorsque vous ralisez le support multimdia dun expos ou dun diaporama interactif, ce que lon dsigne plus gnralement sous le terme de prsentation multimdia. Si dans une pure animation on laisse le lecteur Flash dcoder les images successives du scnario, dans une prsentation il faut reprendre la main sur le scnario pour bloquer la tte de lecture sur certaines images, jusqu ce que lutilisateur donne le signal de reprise de la lecture. Ceci demande de faire appel quelques instructions ActionScript dans ce langage, on parle dactions simples comme stop(); et play();. La plupart des applications multimdia sortent du cadre de la lecture linaire en exploitant toutes sortes dhyperliens. Pour raliser ce genre dhypermdia, il faut encore reprendre la main sur le scnario en bloquant la tte de lecture sur certaines images, mais cette fois-ci, au signal de lutilisateur, il ne sagit plus seulement de relancer la lecture, mais souvent de faire
149
faire la tte de lecture un saut dans le scnario (do la notion de non linarit). Il y a diffrentes actions ActionScript pour cela: gotoAndPlay();, gotoAndStop();, nextFrame();, prevFrame();, nextScene();, prevScene();.
Arrt et reprise de la lecture

Considrons une animation image par image toute simple qui affiche un dcompte de 9 0. Son scnario affich en mode Aperu est reproduit Figure25.1. La cadence a t fixe 6 I/S pour avoir le temps de voir les chiffres safficher. Si lon teste lanimation (commande Contrle > Tester lanimation > Tester), le fichier SWF est publi, puis le lecteur Flash lexcute. Par dfaut, celui-ci lit lanimation en boucle, retournant la premire image (9) aprs avoir affich la dernire (0). Il est possible dempcher ce comportement par dfaut en dcochant loption Contrle> Boucle du lecteur Flash: lanimation sarrte alors sur la dernire image. Mais notre objectif est dintgrer lanimation larrt de la tte de lecture sur une image.
Figure 25.1
Le scnario dune animation image par image simple qui affiche un dcompte.
Voir fichier FCS5_25a.fla.
Prsentation. A priori, la lecture est quelque chose de linaire: normalement, on lit une histoire du dbut la fin. Le livre, ou bien le diaporama, fournissent des mtaphores pour les applications multimdia les plus simples mettre en uvre: les prsentations. Powerpoint ou Keynote sont des logiciels ddis ce type dapplications, mais vous pouvez tout fait dvelopper vos prsentations dans Flash. Du point de vue de linteractivit, le minimum est un bouton qui au clic fait passer lcran suivant. Hypermdia. La consultation dune encyclopdie avec son sommaire, ses tables, index et renvois entre articles est fondamentalement un processus non linaire, non squentiel, puisquon y fait sans cesse des sauts dune partie une autre de louvrage. En multimdia, ces sauts sont automatiss via des hyperliens. On parle dhypermdia pour les applications multimdia les plus gnrales qui suivent cette mtaphore dencyclopdie. Le droulement de la consultation est non squentiel, incontrl, dtermin par lenchanement des clics de lutilisateur. Du point de vue de linteractivit, il faut mettre en place sur chaque cran un ensemble dhyperliens et/ou de boutons renvoyant diffrentes sections.
Notions cls
150
Flash CS5
Pour cela, nous commenons par crer un nouveau calque qui sera rserv la programmation ActionScript. Dans le scnario reproduit Figure25.2, nous lavons nomm scripts; souvent les gens le nomment actions. Habituellement, on place ce calque au sommet de la pile. Une autre bonne habitude est de verrouiller le calque scripts. Sans vous empcher dy ajouter ou modifier des scripts, cela vous prmunit contre lajout par inadvertance de contenu visuel sur ce calque rserv au code. Le script sera attach limage sur laquelle nous voulons boucler. Une image-cl a donc t cre limage 1 et le fait quun script y soit attach est dnot par un a minuscule au-dessus du cercle dnotant limage-cl vide.
Figure 25.2
Ajout dun calque scripts et du script pour arrter sur la premire image.
Voir fichier FCS5_25b.fla.
Pour crer le script, vous devez slectionner limage-cl vide puis ouvrir le panneau Actions via la commande Fentre> Actions. Tapez ensuite laction stop(); (en ActionScript les actions se terminent par un point-virgule) dans la zone ddition de script du panneau, tel que le montre la Figure25.3. La zone de gauche liste tous les scripts prsents dans lanimation en prcisant la squence, le calque et limage (dans notre exemple simplissime, il ny en a quun). En haut de la liste, Slection actuelle indique le script en cours ddition.
Figure 25.3
Le script pour arrter sur la premire image.
Il est possible de tester lanimation au sein de lenvironnement de cration en ayant dabord pris soin de demander la prise en compte du code via Contrle> Activer les actions dimage simples. Il suffit alors de rembobiner et de lire lanimation (menu Contrle> Rembobiner, Contrle> Lire). Nanmoins, cette prise en compte du code dans lenvironnement de cration tant limite (actions simples), il est prfrable de tester via Contrle> Tester lanimation > Tester pour voir en vraie grandeur le lecteur Flash relire le fichier SWF publi. Dans notre cas, il ny a apparemment rien dautre voir quun chiffre 9 lcran, mais cest bien le signe que la tte de lecture est retenue en image 1.
151
Raccourci
OptiOn+F9 (Mac) ou F9 (Windows) ouvre le panneau Actions.
Pour empcher lanimation dtre lue en boucle, la dmarche est rigoureusement la mme, la seule diffrence prs que le script est attach limage-cl de limage nale, comme le montre le scnario reproduit Figure25.4. Si lon teste lanimation, cette fois-ci le dcompte de 9 0 a bien lieu et le lecteur reste sur cette dernire image.
Figure 25.4
Ajout du script pour arrter sur la dernire image.
Voir le fichier FCS5_25c.fla, dans les exemples du livre.
La programmation en langage ActionScript est une programmation vnementielle. Elle suit un principe daction-raction: Action. Un vnement se produit dans lanimation. Les vnements se rpartissent en deux catgories. La premire est celle des vnements dclenchs par le lecteur Flash: il atteint une image donne du scnario, ou encore le chargement de certaines donnes de lanimation sachve. La seconde catgorie est celle des vnements initis par linternaute: il clique sur un bouton, ou il enfonce une touche. Raction. Sil existe un script contenant un gestionnaire de ce type dvnements, alors les actions contenues dans ce gestionnaire dvnements sexcutent. Elles le sont autant de fois que lvnement se produit, cest--dire ventuellement jamais, une fois ou plusieurs. Programmer en ActionScript demande donc dcrire des gestionnaires dvnements. Nous apprendrons le faire au Chapitre11. Les vnements temporels de passage dune image une autre du scnario constituent, en ActionScript, un cas particulier: lvnement est implicite et nous sommes dispenss dcrire un gestionnaire dvnements. Il suffit de placer les actions dans le script attach limage-cl, comme nous lavons fait ci-dessus. Ce type de script, dit script dimage, sexcute automatiquement ds que limage-cl laquelle il est attach se charge. Pour donner le contrle linternaute sur lanimation, il faut mettre en place des boutons ractifs. ces boutons seront associs des gestionnaires dvnements de survol (dbut et fin) qui dune faon ou dune autre modifieront et rtabliront lapparence du bouton pour signaler la prsence dun lment de commande. ces boutons sera galement associ un
152
Flash CS5
gestionnaire dvnements de clic qui mettra en uvre la dite commande de navigation. Ainsi, nous pourrions complter le scnario de la Figure 24.3 en ajoutant la premire image sur laquelle le lecteur Flash sarrte, un bouton qui au clic relance la lecture du scnario. Lunique action de son gestionnaire dvnements de clic serait play();. Son excution redonnerait la main au scnario qui se droulerait jusqu rencontrer la prochaine action dun script dimage arrtant la tte de lecture.
Sauts dans le scnario

En attendant dapprendre au Chapitre11 la programmation de base dun bouton de survol, dans la fin de cette fichenous nous contenterons de passer en revue les actions relatives la lecture dun scnario qui pourraient tre utilises dans le script dun tel bouton. Nous avons vu la fin de la section Images, Fiche 21, quil est possible de donner une tiquette une image, laquelle est exporte avec le fichier SWF. Ce genre dtiquette est trs utile pour faire sauter la tte de lecture limage en question. Elle sera passe en paramtre laction de saut pour spcifier limage cible. Il serait aussi possible et plus simple de lui passer en paramtre le numro de limage cible. Nanmoins, ceci est vivement dconseill. En effet, tout scnario est susceptible dvoluer et qui est limage 77 aujourdhui peut fort bien devenir limage 89 demain, auquel cas laction de saut limage 77 produira un bogue. Si, par contre, vous tiquetez limage, laction continuera faire sauter la tte de lecture la bonne image, mme aprs que celle-ci ait chang de numro. Cette solution est donc plus robuste. Une bonne habitude est de ddier un calque ces tiquettes dimages. Dans le scnario de la Figure25.5, ce calque se nomme repre, il est plac juste sous le calque script et il est verrouill comme ce dernier pour les mmes raisons.
Figure 25.5
Utilisation dun calque repre pour les tiquettes dimages.
153
Une fois vos tiquettes dimages dfinies, vous pouvez les exploiter avec, par exemple, gotoAnd-Play( "salle4"); ou gotoAndStop( "salle4");. Les deux actions sautent limage dont le nom est pass en paramtre entre guillemets (ici "salle4"); la premire y reprend la lecture, tandis que la seconde sy met en pause. Vous pouvez facultativement passer en second paramtre, spar par une virgule le nom de la squence laquelle appartient limage cible (toujours entre guillemets). Les actions nextFrame(); et prevFrame(); dplacent la tte de lecture respectivement limage suivante et prcdente dun scnario, o la lecture sarrte. Ce sont typiquement les actions utiliser dans les scripts des boutons de navigation dans une prsentation, un diaporama. Pour tre complet, signalons les actions nextScene(); et prevScene(); qui dplacent la tte de lecture la premire image respectivement la squence suivante et prcdente du scnario. Nous reviendrons ces actions la Fiche36, lorsque nous aurons introduit les clips danimation et leur imbrication dans le scnario principal. Avant de terminer cette fiche, signalons qu la lecture de lanimation, linternaute accs au menu contextuel du lecteur Flash. La version par dfaut de ce menu est reproduite la Figure25.6.
Figure 25.6
Le menu contextuel par dfaut du lecteur Flash.
Jusqu la version CS4, on trouvait dans ce menu des commandes de navigation dans le scnario: Lire, Boucle, Rembobiner, En avant et En arrire (lecture image par image). Elles ont dsormais disparu et linternaute ne peut quutiliser les outils de navigation que vous avez intgrs lanimation.
Animation
Avant de devenir la plate-forme dintgration multimdia quil est dsormais, Flash fut lorigine un logiciel danimation vectorielle. Si lon excepte lanimation par programmation ActionScript, lenvironnement de cration propose quatre approches de lanimation: image par image, par interpolation, par mtamorphose et par cinmatique inverse. La version CS4 a t une rvision majeure au niveau de lanimation, dune part parce que depuis linterpolation y suit une approche compltement nouvelle et dautre part de par larrive de la cinmatique inverse. Ce chapitre est en lien troit avec le prcdent calques et images-cls sont des lments capitaux en animation et avec le suivant la dcomposition hirarchique de lanimation passe par limbrication de symboles clips danimation.
Fiche 26
Animer image par image

Persistance rtinienne, cadence
Le principe de base de lanimation consiste simuler le mouvement par la relecture dune squence dimages corrles, dites phases de lanimation. Au cours du XIXe sicle, divers dispositifs furent invents bien avant que le cinma ne fasse son apparition. Plus proche de nous et toujours dactualit, ce principe sincarne dans le folioscope ou film pouce (flip book): un petit livret reproduit sur le recto de ses pages les phases dune animation que lon fait apparatre entre ses mains en faisant dfiler les pages avec son pouce. Lanimation traditionnelle est un processus extrmement laborieux, puisquil revient dessiner ou fabriquer par nimporte quel autre moyen tous les photogrammes successifs dun film, do le terme image par image. Lillusion dun mouvement continu partir de la lecture dimages discrtes fonctionne grce la persistance de celles-ci au fond de notre rtine et sous rserve que la cadence de leur relecture soit suprieure au seuil de fluidit qui est de lordre de 16 images par seconde (I/S). En dessous de 10I/S, le rsultat relve plutt du diaporamaet entre 10 et 16 I/S, le mouvement est saccad. partir de 16I/S, les phases successives fusionnent sur la rtine, do limpression de fluidit. Plus la cadence est leve, mieux les mouvements rapides sont rendus. Disposer des phases correspondant une cadence leve, cest aussi se mnager la possibilit de jouer lanimation au ralenti. Pour fixer les ides, rappelons les dbits dimages de diffrents mdias. Le cinma traditionnel dbite 24 I/S. En Europe, la tlvision dbite 25 I/S, tandis quen Amrique du Nord et en Asie pour des raisons de normes lectriques diffrentes elle dbite 30 I/S. Enfin, la tlvision haute dfinition et certains jeux vido dbitent 60 I/S. Notez que nous avons parl pour les mdias prcdents de dbit dimages et non de cadence en ce que ce dbit est fixe. En animation, on parle plutt de cadence, qui est un
156
Flash CS5
dbit dimages souhait, mais non garanti. En animation infographique, toutes sortes de facteurs psent sur le dbit de relecture effectif. Lanimation peut solliciter beaucoup le processeur, donc dbiter plus lentement sur une machine ancienne aux capacits plus limites. Le fichier de lanimation peut galement tre assez lourd, donc ne pas tre tlcharg suffisamment rapidement sur un ordinateur dont la connexion est dbit limit. Les performances des processeurs et des rseaux ne cessant de crotre, aprs avoir longtemps t de 12I/S, la cadence par dfaut dune animation Flash est dsormais de 24 I/S. Vous tes libre de la paramtrer une valeur de 120 I/S maximum et de 0,01 I/S minimum, soit environ 100 secondes par image. Lorsque vous fixez la cadence de votre animation Flash (voir section Proprits de lanimation, Fiche19), ayez toujours lesprit que rien nest magique en ce bas monde informatique. Si vous demandez plus de 30 I/S, vous risquez de le payer cher: ce sera dj plus de phases produire, donc peut-tre un plus gros travail de ralisation et ncessairement un fichier plus volumineux, donc plus long tlcharger et consommant plus de ressources processeur la relecture. Rappelons que le choix de la cadence est faire avant toute chose. Si daventure vous modifiiez plus tard cette valeur, toute la temporisation de lanimation serait reprendre, savoir que vous devriez corriger la longueur de chaque plage dimages afin de restaurer la dure de vie lcran de llment correspondant, ce qui pourrait savrer extrmement laborieux. En effet, si par exemple vous multipliez par deux la cadence, dans le scnario non modifi, les dures de toutes les plages sont divises par deux.
Scnario Flash image par image, permutation

Un calque dans lequel se droule une animation image par image est un calque dont chacune des images est une image-cl. Reportez-vous la Fiche21 pour les notions dimages et dimages-cls dun scnario, et en particulier la section Images-cls, pour la cration de celles-ci.
Raccourci
F5 insre une image aprs limage courante, F6 insre une image-cl limage courante. Maj+F5 supprime une image. Maj+F6 efface une image.
Considrons lexemple dune animation de battement dailes de papillon. Le repliement des ailes seffectue en cinq phases. Ces cinq phases auraient pu tre produites dans Flash, mais nous avons choisi ici de les produire dans Fireworks. En partant de limage bitmap du papillon ailes dployes, la seconde phase a t obtenue en transformant chaque aile de sorte que son rectangle englobant devienne un trapze. De proche en proche, par le mme procd, on a obtenu les phases successives. Ces cinq images bitmap ont alors t importes dans la bibliothque de lanimation Flash. Le rsultat est reproduit Figure26.1.
Animation
157
Figure26.1
Les diffrentes phases de lanimation importes dans la bibliothque.
Le fichier contenant les cinq phases importes est disponible dans les exemples: FCS5_26a.fla.
Dans le scnario dune animation image par image, crez au moins deux calques. Le premier ici papillon contiendra lanimation image par image proprement dite, tandis que le second ici fond sera rserv aux lments statiques, non anims. Dans notre exemple, limage-cl initiale du calque papillon instancie la premire phase du battement, donc le papillon ailes dployes. On ajoute sa suite quatre autres images-cls, dont le contenu est pour linstant identique celui de la premire. Plus tard, lorsque le repliement des ailes aura t ralis, on ajoutera dautres images-cls pour le redploiement des ailes. Pour la rgularit de lanimation, deux images successives doivent toujours afficher des phases diffrentes. Pour cette raison, la partie redploiement qui reprendra la partie repliement en ordre inverse, ne contiendra que les trois phases 2 4 (reprendre les phases extrmales conduirait rpter celles-ci lors de la lecture en boucle). Le calque fond doit donc contenir une plage de 5+3=8 images, comme le montre le scnario de la Figure26.4. Il sagit maintenant de mettre en place toutes les phases de lanimation. On procde pour cela par permutation du symbole ou pseudo-symbole que chacune des images-cls instancie. En slectionnant la seconde image-cl dans le scnario, puis en cliquant sur le papillon sur la scne, comme le montre la Figure26.2, on constate que limage-cl instancie limage bitmap battem1.png.
158
Flash CS5
Figure26.2
Proprits de la seconde image-cl, avant permutation.
En cliquant sur le bouton Permuter, la bote de dialogue Permuter le bitmap souvre, dans laquelle sont proposes les cinq images bitmaps prsentes dans la bibliothque. Il suffit dy slectionner battem2.png, comme le montre la Figure26.3. Nous navons l ni plus ni moins quun avatar numrique du truquage invent par Georges Mlis, qui arrtait la camra et remplaait (ou escamotait) lacteur, puis reprenait le tournage!
Figure26.3
Permutation dimage bitmap pour chaque image-cl.
Le fichier est disponible dans les exemples du livre: FCS5_26b.fla (cinq phases identiques).
En rptant lopration pour les phases 3, 4 et 5, on aboutit au scnario reproduit Figure26.4. Limage courante est limage 5 et lon voit sur la scne la cinquime phase de lanimation dans laquelle le papillon a ses ailes replies au maximum. Ltape suivante consiste copier dans le calque papillon la squence des trois images de2 4, puis la coller aux images 6 8. Il faut donc commencer par slectionner les trois images-cls copier. Ensuite, le premier rflexe serait dutiliser la commande Copier du menu Modifier. Mais en faisant cela, seul serait copi le contenu sur la scne de limage courante du calque papillon. La bonne commande pour copier une slection dimages dans le scnario est Modifier> Scnario> Copier les images. Aprs avoir slectionn limage 6 du calque papillon, il ne reste plus qu Modifier> Scnario> Coller les images.
Animation
159
Figure26.4
Le scnario du repliement des ailes du papillon en cinq phases.
Le fichier est disponible dans les exemples du livre: FCS5_26c.fla (aprs quatre permutations).
Raccourci
OptiOn+CMd+C (Mac) ou alt+Ctrl+C (Windows) copie des images dans le scnario. OptiOn+CMd+V (Mac) ou alt+Ctrl+V (Windows) colle des images dans le scnario.
Pour finir, il ne reste plus qu inverser lordre de la squence de trois nouvelles imagescls qui vient dtre colle. Il suffit pour cela de la slectionner et de demander Modification> Scnario> Inverser les images. Attention ne pas confondre le menu Modification et le menu Modifier, ce dernier tant un renommage bien malheureux du menu dition qui devrait tre prsent dans toute application sur Mac. Le scnario reproduit Figure26.5 montre en affichage Aperu la squence complte des huit phases du battement dailes de papillons.
Figure26.5
Le scnario complet dune animation de battement dailes de papillon image par image.
Le fichier source de l'animation finalise est disponible dans les exemples du livre: FCS5_26d.fla.
160
Flash CS5
Une animation image par image est souvent destine tre joue en boucle. Vous ne pourrez pas ncessairement, comme dans lexemple prcdent, procder par copier-coller et inversion de la premire partie de lanimation. Peut-tre allez-vous dessiner dans Flash toutes les phases de lanimation. Pour que le bouclage se fasse de manire indcelable la relecture, vous devez dans les dernires phases vous rapprocher de la premire et faire en sorte que la toute dernire phase soit visuellement trs proche de la premire, sans toutefois tre identique celle-ci. Si vous allez au-del dune dizaine de phases, vous constaterez vite par vous-mme combien la technique de lanimation image par image est fastidieuse, ce qui vous fera sentir tout le prix des autres techniques danimation dcrites dans ce chapitre. Quand cest possible, une manire de rendre le travail moins fastidieux est dutiliser comme point de dpart la conversion en images-cls de la squence dimages dune animation produite par lune des techniques dcrites dans les fiches suivantes (interpolations, mtamorphose, cinmatique inverse). Pour cela, slectionnez la plage de lanimation en question en cliquant sur la premire image puis en glissant jusqu la dernire (ou dun seul clic nimporte o dans la plage si vous avez opt dans les prfrences pour la slection par plage), puis demandez Modification> Scnario> Convertir en images-cls, ou utilisez soit la commande homonyme du menu contextuel, ou son raccourci clavier F6. Il ne vous reste plus qu retravailler chacune des phases pour obtenir votre animation image par image (si vous ne le faites pas, cette conversion ne prsente aucun intrt, puisque lanimation tait beaucoup plus conomique avant conversion, ntant pas lorigine image par image). Une animation image par image joue en boucle peut constituer leffet de survol dun bouton. Dans un premier temps, il faut placer les huit images de la boucle dans un symbole clip danimation (voir Fiche36), nomm battement dans lexemple de la Figure26.6. Dans un second temps, on cre un symbole bouton (voir Fiche35), nomm btnPapillon dans lexemple de la Figure26.6. Le scnario de ce bouton est reproduit Figure26.7. La premire image-cl de ce scnario Haut instancie battem1.png, limage bitmap du papillon ailes dployes. La troisime image-cl Abaiss instancie battem3.png, limage bitmap du papillon ailes replies. Quant la seconde image-cl Dessus, elle instancie le symbole clip danimation battement, comme le montre le panneau Proprits sur la Figure26.7. On dit de cette instance de symbole quelle est imbrique dans le symbole bouton btnPapillon. Les deux derniers paragraphes vous aurons peut-tre sembl hermtiques du fait que diverses notions abordes dans le chapitre suivant y sont utilises. Vous pourrez y revenir aprs avoir tudi le Chapitre5 et notamment la section Crer des symboles, Fiche 33 et les deux fiches cites ci-dessus. Tout devrait alors tre nettement plus clair dans votre esprit. Par ailleurs, vous trouverez la Fiche36 une autre animation image par image de battement dailes de papillon, mais qui exploite la 3D.
Animation
161
Figure26.6
Le scnario principal contenant un bouton papillon qui bat des ailes au survol.
Figure26.7
Le scnario du bouton papillon qui bat des ailes au survol.
162
Flash CS5
Si votre lecteur de PDF ne lit pas le Flash, tlchargez lanimation qui suit depuis le site de Pearson. Elle se trouve dans larchive des exemples. Elle montre un effet de battement d'ailes au survol et se trouve dans l'archive des exemples du livre (CHAP4 > FCS5_26e.swf). Sinon, cliquez sur les boutons pour la lancer ou larrter.
Prvisualiser une animation

Lanimation est rarement au point du premier coup et il faut souvent effectuer un certain nombre de cycles prvisualisation, ajustement (dailleurs ce que nous indiquons dans cette section pour lanimation image par image vaut galement pour les autres formes danimation). La premire possibilit consiste prvisualiser sans quitter lenvironnement de ralisation Flash. Cette solution a ses limites, car les animations imbriques sont ignores, de mme que tout code Action-Script. Elle est nanmoins tout fait valable pour une animation image par image ou une interpolation, du moment que celles-ci soient dans le scnario principal. Faites glisser la tte de lecture dans la ligne du temps, la vitesse que vous voulez, et valuez lenchanement des images sur la scne. Certains animateurs font mme faire des allers retours rapides la tte de lecture, comme sils frottaient la ligne du temps (en anglais scrubbing). Lautre possibilit est de lancer lanimation, toujours dans lenvironnement de ralisation. Commencez par placer la tte de lecture en image 1. Vous pouvez pour cela ouvrir le contrleur (Fentre> Barres doutils> Contrleur) qui vous offre toutes sortes de commandes, dont celle pour rembobiner, partir de boutons dont les icnes reprennent celles des tlcommandes de lecteurs vido. Ces commandes se trouvent aussi dans le menu Contrle: Lire, Rembobiner, Atteindre la n, Avancer dune image, Reculer dune image, Lire en boucle, Lire toutes les squences. La dernire possibilit consiste exporter le chier SWF en demandant Contrle > Tester lanimation > Tester. Cest aussi le test le plus complet, puisque cette fois-ci anima-
Animation
163
tions imbriques et code ActionScript ventuels sont pris en compte. Si votre scnario est dcoup en squences, vous pouvez ne tester que la squence courante via Contrle> Tester la squence.
La touche rEtOUr (Mac) ou EntrE (Windows) lance lanimation. Les touches point-virgule (;) Windows seulement et virgule (,) permettent respectivement davancer ou de reculer dune image. En maintenant le point-virgule ou la virgule enfonc, le scnario est jou rapidement environ 25images par seconde, indpendamment de la cadence du document.
Raccourci Raccourci
Figure 26.8
Le contrleur danimation.
CMd+rEtOUr (Mac) ou Ctrl+EntrE (Windows) teste lanimation.
Utiliser la pelure doignon

Les termes pelure doignon dsignent dans les arts graphiques un papier trs n, presque transparent. Il est utilis en animation image par image traditionnelle. Dune part, cela permet dempiler sur une table lumineuse les dessins des phases successives dune animation pour les visualiser simultanment. Dautre part, lanimateur peut faire une sorte de folioscope en tenant la pile dune main et en faisant dfiler les feuilles de lautre, ce qui lui donne une ide du mouvement. Ce principe est repris par les logiciels danimation. Montrer simultanment les images successives dune animation peut servir la fois ajuster les positions relatives voire dautres proprits et prvisualiser lanimation. Mais montres telles quelles, les images successives de lanimation seraient illisibles. Le principe est donc dafficher avec lopacit 100% limage courante du scnario. Les images avant et aprs cette image de rfrence sont elles affiches avec une opacit rduite. La Figure26.9 donne un exemple de pelure doignon. La pelure doignon sapplique tous les calques visibles du scnario en cliquant sur le bouton Pelure doignon (voir Figure26.10). Veillez ce que loption dafchage sous forme de contours ne soit pas active pour le calque contenant les phases de votre animation. Par dfaut, la pelure doignon est applique sur une plage de cinq images, savoir deux avant limage courante et deux aprs, comme dans lexemple de la Figure26.10. Il peut bien sr
164
Flash CS5
y avoir moins de cinq images dans la plage, si limage courante est la premire, la seconde, lavant-dernire ou la dernire. Pour ajuster la taille de la plage de pelure doignon, faites glisser ses repres de dbut et de fin, cest--dire les sortes de crochets orns dun point blanc. Dans lexemple de la Figure26.9, la tte de lecture a t centre dans lanimation et les repres glisss au maximum, de manire voir toutes les phases de la squence. On aurait obtenu le mme rsultat en slectionnant Oignon sur tout dans le menu Modier les repres de pelure doignon (voir Figure26.10). Ce menu vous propose galement Oignon2 (deux images avant, deux images aprs) et Oignon 5 (cinq images avant, cinq images aprs).
Figure26.9
Une animation image par image visualise en pelure doignon.
Figure26.10
Un fragment de la mme animation visualis en Oignon 2.
Repre de dbut de pelure d'oignon Pelure d'oignon Contours de pelure d'oignon
Repre de fin de pelure d'oignon Modifier les repres de pelure d'oignon Modifier plusieurs images
Animation
165
Par dfaut, la plage dimages en pelure doignon se recentre sur limage courante lorsque vous dplacez la tte de lecture. Si un moment donn, vous prfrez verrouiller la plage de pelure doignon, slectionnez Ancrer la pelure doignon dans le menu Modier les repres de pelure doignon. Si laffichage sur la scne des phases en pelure doignon est confus, essayez si vos donnes sont vectorielles de les afficher sous forme de contours via le bouton Contours de pelure doignon (voir Figure26.10). Jusquici, il ne sagissait que de visualiser les phases successives de lanimation, mais la seule image ditable restait limage courante. Parfois, il peut tre pratique dditer simultanment des images successives, par exemple pour en repositionner le contenu, ou le redimensionner. Pour cela, cliquez sur Modier plusieurs images (voir Figure 26.10). Cette fois-ci, chaque image est affiche en opacit 100%. Une autre diffrence est que les ventuelles images interpoles ne sont pas rendues: seules les images-cls sont affiches. Dans ce mode, vous pouvez diter dans nimporte quelle image de la plage, nimporte quel lment pourvu quil appartienne un calque visible et non verrouill.
Animations image par image, prfabriques et paramtrables

La variante clairs de loutil Dco sert la base dessiner une forme arborescente dclair (voir Fiche 13). Nanmoins, en cochant, dans les proprits de loutil, loption Animation, le trac ne seffectue pas dans la seule image courante, mais dans une succession dimagescls cres dans le scnario. Vous pouvez alors faire glisser la tte de lecture sur la ligne de temps et voir lclair se propager. Lanimation nest pas directement paramtrable et les proprits de loutil ne concernent que la forme de lclair : taille, couleur, largeur et dosage de la complexit. Trois variantes de loutil Dco sont exclusivement ddies lanimation. Avant de commencer dessiner sur la scne avec lun des outils Animation de feu ou Animation de fume, spcifiez une Dure de lanimation en nombre dimages. Lanimation possde un autre paramtre Vitesse. Les autres proprits de loutil ont trait la forme : taille, deux couleurs et dosage des tincelles pour le feu. Avec la variante Systme de particules, on retrouve le principe caractristique de loutil Dco dinstanciation de symboles clips danimation (voir Fiche 13). Les instances des deux symboles que vous spcifiez sont considres ici comme des particules dotes de mouvement. Dans une logique de programmation objet (voir Fiche 77), chaque particule possde les mmes proprits, mais avec des valeurs qui lui sont propres et dont certaines vont voluer au cours de lanimation. Le panneau Proprits de loutil offre sept champs pour contraindre les valeurs initiales alatoires de chaque particule : taille, orientation, vitesse (intensit et intervalle de directions possibles), gravit et dure de vie en nombre dimages. Trois autres proprits permettent de paramtrer globalement lanimation: la dure (intitu-
166
Flash CS5
le ici Longueur totale), le nombre dimages sur lesquelles il y a Gnration de particules et la Cadence laquelle cette gnration a lieu. Vous produirez ainsi des animations que lon pourrait ranger sous le terme gnrique de fontaines. Exprimentez. Vous trouverez sans doute rapidement les limites propres tout ce qui est prfabriqu. Les fiches qui suivent vous donneront les moyens de fabriquer des animations plus personnelles que celles rsultant des algorithmes du moteur de modlisation procdurale qui est au cur de loutil Dco. Lanimation image par image est par principe relativement coteuse. vous de lutiliser bon escient, cest--dire entre autres lorsquaucune des autres techniques danimation dcrites dans ce chapitre ne peut vous permettre dobtenir leffet recherch. Toutes les techniques qui suivent prsentent en effet par rapport lanimation image par image lnorme avantage que toutes leurs images ne sont pas des images-cls.
Fiche 27
Raliser une interpolation de mouvement

Interpolation, animation dobjets
Raliser une animation image par image est coteux en temps de ralisation. Nous avons dj mentionn la section Images-cls, Fiche 21 que la taylorisation de lindustrie du dessin anim a conduit rpartir le travail entre auteurs dessinateurs des images-cls et intervalistes (inbetweeners) dessinateurs des images intermdiaires. Lanimation par ordinateur reprend son compte le principe, mais en remplaant lintervalisation ralise par des auxiliaires humains par linterpolation (tweening) calcule par la machine. Linterpolation est le calcul mathmatique qui, connaissant les valeurs dune proprit limage i1 et limage i2, produit les valeurs intermdiaires de cette proprit aux images i1+1, i1+2 i21. Ce calcul est fait la vole par le lecteur Flash, lorsque vous prvisualisez sur votre ordinateur lanimation que vous tes en train de raliser, mais aussi lorsque linternaute relit sur le sien lanimation finalise. Ceci permet de comprendre la puissance de linterpolation vis--vis de la diffusion dune animation sur la Toile: le scnario est de taille rduite, puisque contrairement une animation image par image qui encode de linformation pour chaque image, lanimation par interpolation nen encode quen un nombre rduit dimages-cls. La taille du fichier publi tant plus faible, cest aussi un temps de tlchargement rduit. Le Chapitre 2 vous a donn lune des clefs du succs du logiciel Flash : lencodage vectoriel du graphisme. Lapproche par interpolation est une seconde clef. Dans un cas comme dans lautre, il sagit de remplacer des donnes chantillonnes, donc lourdes, par un codage smantique, plus compact. De mme que le codage vectoriel remplace de manire efficace lchantillonnage de lespace 2D dune image matricielle en pixels, le codage dinterpolation remplace de manire efficace lchantillonnage dans le temps dune animation image par image. Outre lintervalisation, lanimation par interpolation a un autre hritage de lanimation traditionnelle. Toujours dans le but de simplifier la production et dviter la ralisation intgrale
Animation
167
de chaque photogramme du film ( raison de 24 I/S, une minute de film est compose de 1440 images!), une grande famille de techniques est lanimation par dplacement dobjets. Les objets en question peuvent tre des dessins ou des papiers dcoups, mais aussi parfois de vritables objets ayant une paisseur. Limage est compose sur le plan horizontal dun banc-titre qui supporte une camra braque verticalement au-dessus de lui. La pellicule est impressionne, puis avance au photogramme suivant. Limage correspondant au vingt-quatrime de seconde plus tard est alors compose, et ainsi de suite. Tout lintrt de lapproche repose sur le fait quune fois que lon dispose des objets animer, il ne reste plus qu les agencer lgrement diffremment image aprs image. Les phases successives de lanimation sont donc produites de manire incrmentale. En animation par ordinateur, cette technique sert de mtaphore lanimation dobjets par scnario (dans Director, on parle danimation dimages-objetsdans le scnario). Laspect de rutilisation des mmes objets (au sens physique) dune image la suivante, se transpose en infographie en une approche par objets (au sens informatique de la programmation par objets). Dans Flash, ces objets qui seront dcrits au chapitre suivant (voir Fiche33), ce sont les symboles de la bibliothque (dans Director, le vocabulaire est diffrent, mais le principe est le mme: ce sont les acteurs dune distribution). Lapproche par instanciation de symboles est une troisime clef du succs de Flash, car mme en labsence dinterpolation, elle permet dj une factorisation dinformation qui est un autre facteur de rduction de la taille des fichiers publis.
Nouvelle approche de linterpolation dans Flash

Pour ceux qui auraient dj utilis une version ancienne de Flash, lapproche de linterpolation a chang depuis la version CS4. Bien entendu, essentiellement pour des raisons de rtro-compatibilit, il est toujours possible de raliser des interpolations selon lancienne approche, rebaptise interpolation classique et traite la fiche suivante. Nous traiterons en priorit dans la prsente fiche de la nouvelle approche: dune part parce quelle est plus simple mettre en uvre, dautre part parce quun jour viendra peut-tre o elle seule subsistera dans Flash. Commencez par slectionner llment animer sur la scne on lappelle lobjet cible ou bien limage-cl correspondante dans le scnario. Appelez ensuite la commande Insertion> Interpolation de mouvement ou de manire quivalente la premire commande du menu contextuel: Crer une interpolation de mouvement. Dans le cas o llment auquel vous voulez appliquer linterpolation nest pas un symbole, la bote de dialogue reproduite Figure27.1 vous demande confirmation pour la conversion en symbole. Si vous avez slectionn plusieurs lments, une bote de dialogue similaire apparat vous demandant confirmation pour encapsuler le tout dans un symbole.
168
Flash CS5
Figure27.1
Hormis le texte, tout lment doit dabord tre converti en symbole pour pouvoir faire lobjet dune interpolation de mouvement
Lorsque lobjet cible noccupe initialement quune seule image du scnario, la dure par dfaut dune interpolation de mouvement est dune seconde. Le nombre dimages par dfaut de la plage est donc variable en fonction de la cadence de lanimation, mais il est dau moins cinq images. Effectivement, dans le scnario de la Figure27.2, la cadence est de 24 I/S et la plage dinterpolation du calque papillon fait 24 images. Dans ce cas, la tte de lecture se positionne sur la dernire image de la plage. Dans le cas o lobjet cible occupe dj un certain nombre dimages (suprieur cinq), ce dernier reste le mme aprs cration de linterpolation de mouvement et la tte de lecture reste o elle tait. Une plage dinterpolation est bleue claire, tandis quune plage ordinaire dimages est grise.
Figure27.2
Une plage dinterpolation nouvellement cre.
Le fichier est disponible dans les exemples du livre: FCS5_27a.fla (trajectoire rectiligne).
Le papillon objet cible tant le seul lment du calque papillon, celui-ci a simplement t transform en calque dinterpolation ce que dnote licne gauche de son nom. Si lobjet
Animation
169
cible nest pas le seul dans son calque dorigine, un calque dinterpolation spar est cr. Dans le scnario de la Figure27.3, cest le cas de Calque 3 qui contient le papillon objet cible, lorigine dans le calque papillons avec dautres.
Figure27.3
Cration dun calque dinterpolation spar.
Dans lexemple prcdent, un calque a t cr au dessus du calque dorigine. Flash prserve toujours lordre dempilement dorigine des lments. cette fin, dans dautres situations le calque serait cr en dessous du calque dorigine, ou bien deux calques seraient crs, lun en dessous, lautre au dessus. Lobjet cible dun calque dinterpolation peut appartenir un calque de type Normal, Guide, Masque ou Masqu (voir section Calques non standard, Fiche 22). Un calque dinterpolation ne peut recevoir un guide de mouvement. Il est impossible de dessiner dans un calque dinterpolation. Une plage dinterpolation ne doit rien contenir dautre que lobjet cible. De plus, lobjet cible doit tre unique, sinon le rsultat est imprvisible. La seule faon de placer plusieurs objets cibles dans un mme calque dinterpolation, cest de les faire se succder dans le temps, donc dans des plages dinterpolations successives. Chaque lment interpol occurrence de symbole ou texte appartiendra donc un calque dinterpolation distinct. Vous pouvez nanmoins slectionner plusieurs objets cibles avant de crer linterpolation de mouvement, sous rserve que ces objets appartiennent au mme calque. Mais il y aura autant de calques dinterpolations crs que dobjets cibles slectionns. Cest juste une faon de crer plusieurs interpolations en une seule opration. Lobjet cible est dplaable, ventuellement vers un autre calque. Si vous supprimez lobjet cible, la plage dinterpolation subsiste, quoique vide de contenu visuel, de sorte que vous pourrez par la suite y instancier un autre objet cible. Vous pouvez galement modifier le type de lobjet cible. ce niveau, toutes les proprits ont une valeur constante sur toute la plage. Il ne peut donc y avoir aucune interpolation. Il faut dplacer la tte de lecture pour slectionner au moins une image intermdiaire et y modifier la valeur dau moins une proprit. partir du scnario de la Figure27.2, ramenons la tte de lecture en image 1, puis modifions la position du papillon en le glissant-dposant en bas gauche dans les herbes, et rglons galement son opacit 0% (sous-panneau Effet de couleur> Style> Alpha, voir Fiche37 et
170
Flash CS5
la Figure37.7). Glissons ensuite la tte de lecture en image10 et plaons le papillon grosso modo la position quil avait sur la scne de la Figure27.2. Enfin, en image 24, donnons au papillon la position quil a sur la scne de la Figure27.4 et rglons-le 100% dopacit. Diffrents signes sont apparus dans la plage dinterpolation. Le cercle plein de la premire image apparu la cration de linterpolation indique comme dhabitude la prsence de contenu visuel dans la plage. La nouveaut, ce sont les losanges pleins aux images 10 et 24. Ils dnotent des images-cls de proprit, cest--dire des moments auxquels la valeur dune ou plusieurs proprit(s) a t spcifie: la position en image 10, la position et lopacit en image 24. Vous constatez que sil ne doit y avoir quun seul objet cible par plage dinterpolation, rien nempche quil y ait ventuellement plusieurs proprits de lobjet cible faisant lobjet dune interpolation. Voil, la double interpolation est dfinie. Tout le reste est gr en interne par Flash. La nouvelle procdure introduite avec la version CS4 est nettement simplifie par rapport lancienne qui ncessite (voir la fiche suivante) que vous criez vous-mme explicitement des images-cls avant daller y modifier les valeurs de proprits. Comme le montre la Figure 27.4, une trajectoire rectiligne a t dfinie entre les trois positions spcifies du papillon et lexcution, celui-ci apparat en fondu le long de la dite trajectoire.
Figure27.4
Une double interpolation (position et opacit) qui ralise un fondu en entre.
Le fichier est disponible dans les exemples du livre: FCS5_27b.fla (trajectoire rectiligne et apparition).
Animation
171
Pour juger de leffet, toutes les techniques dtailles la section Prvisualiser une animation, Fiche 26, sont valables. Le plus simple est sans doute de faire glisser rapidement la tte de lecture sur la ligne de temps. Si la temporisation nest pas satisfaisante, vous devez rduire ou allonger la plage dinterpolation. Lorsque le pointeur de votre souris survole lune des extrmits de celle-ci, il se transforme en double-flche. Faites glisser dans le sens qui convient. Dans Flash, la plage dinterpolation est un objet (au sens de la programmation objet). Aussi, lorsque vous modifiez sa premire ou sa dernire image, les ventuelles images-cls intermdiaires sont dplaces de manire conserver les proportions relatives des sous-plages entre images-cls. Si vous souhaitez dplacer la premire ou la dernire image dune plage dinterpolation, mais cette fois-ci sans dplacer les images-cls intermdiaires, enfoncez la touche Maj en mme temps que vous faites glisser une extrmit. Vous pouvez galement utiliser les raccourcis clavier rappels la section Scnario Flash image par image, permutation, Fiche 26: F5 pour crer une image dans la plage et Maj+F5 pour en supprimer une. En cliquant la trajectoire avec loutil Sous-slection et la touche CMd (Mac) ou Ctrl (Windows) enfonce, vous pouvez effectuer sur celle-ci une transformation libre (voir Fiche16). Si vous souhaitez abandonner linterpolation construite et revenir une plage dimages statiques, utilisez la commande Insertion> Annuler linterpolation. On la trouve galement en tte du menu contextuel des plages dinterpolation, reproduit Figure27.5.
Figure27.5
Le menu contextuel des plages dinterpolation.
172
Flash CS5
Au chapitre prcdent (voir section Images, Fiche 21), nous avons vu que dans le mode par dfaut, le clic nimporte o dans une plage ordinaire dimages slectionne uniquement limage clique. Dans les prfrences, catgorie Gnral, il est possible dopter pour la slection de lensemble de la plage clique (Scnario :Slection base sur plages), qui dans les versions anciennes de Flash tait le mode de slection par dfaut. Pour les plages dinterpolation, cest ce dernier mode de slection qui sapplique, en accord avec la conception de la plage dinterpolation comme objet. Pour la slection multiple de plages, utilisez les touches habituelles Maj pour des plages contigus et CMd (Mac) ou Ctrl (Windows) pour des plages non contigus.
CMd+CliC (Mac) ou Ctrl+CliC (Windows) slectionne uniquement limage clique lintrieur dune plage dinterpolation. CMd+glisser (Mac) ou Ctrl+glisser (Windows) slectionne plusieurs images conscutives dune plage.
Raccourci
Vous aurez parfois besoin de remodeler les plages dinterpolation dans le scnario. Rappelons dabord que le fait que le calque soit verrouill empche les modifications sur scne, mais nullement dans le scnario. Vous pouvez glisser une plage dans le mme calque, donc la dplacer dans le temps. Vous pouvez galement la glisser dans un autre calque. Si le glissement est fait touche Maj enfonce, il ne sagit plus de dplacement, mais de duplicata. Cela peut tre trs utile pour appliquer la mme interpolation un autre objet cible: commencez par dupliquer la plage, puis permutez lobjet cible dans le duplicata (voir ci-dessous). Une plage dinterpolation peut tre copie-colle. Le menu contextuel de la Figure 27.5 propose des commandes Couper les images, Copier les images et Coller les images. Vous pouvez galement supprimer une plage via les commandes Supprimer les images ou Effacer les images. Nous avons vu prcdemment que le dplacement de lune des extrmits dune plage dinterpolation modifie sa dure. Bien sr, en cas de contigut avec une autre plage dinterpolation, les dures des deux sont modifies. Si daventure vous vouliez disjoindre deux plages dinterpolation contigus, glissez la premire image de la seconde plage, touche CMd (Mac) ou alt (Windows) enfonce. Le menu contextuel de la Figure27.5 offre galement la commande Diviser le mouvement. Lintitul est quelque peu hermtique, mais il sagit tout simplement de diviser en deux la plage dinterpolation slectionne. Leur enchanement doit a priori produire le mme rsultat visuel que lunique plage dorigine, sauf si vous avez utilis de lacclration dans celle-ci, auquel cas vous constaterez peut-tre quelques diffrences. La commande Joindre les mouvements ralise lopration inverse de fusion en une seule de deux plages dinterpolation successives. Au chapitre suivant, nous verrons que lapproche par objet sapplique aux symboles de la bibliothque, instancis dans le scnario en diverses occurrences. la Fiche37, nous passerons en revue les proprits dune occurrence. Linterpolation, en ce quelle est applique une occurrence de symbole, est bel et bien ce que la programmation objet appelle une pro-
Animation
173
prit dinstance, savoir que linterpolation affecte loccurrence, sans affecter le symbole dans la bibliothque. Si vous slectionnez sur la scne lobjet cible de linterpolation un papillon Sylvain dans notre exemple, le panneau Proprits affiche les valeurs de toutes les proprits de loccurrence du symbole limage courante de la plage dinterpolation. La Figure27.6 en est un exemple.
Figure27.6
Les proprits dune occurrence de symbole, ici le papillon faisant lobjet de linterpolation.
Sans dtailler lensemble de ces proprits ce sera fait la Fiche37, passons simplement en revue les diffrents sous-panneaux afin de voir ce sur quoi peuvent porter les diffrentes interpolations: Position et taille. Coordonnes 2D sur la scne (X,Y), largeur (L) et hauteur (H). Vue et position 3D. Coordonnes 3D (X, Y, Z), largeur (L) et hauteur (H), paramtres de vise (angle de perspective et coordonnes X,Y du point de vue). Effet de couleur. Au choix (Style), la teinte, la luminosit, lopacit (Alpha), ou en mode avanc, des facteurs multiplicatifs et additifs pour lopacit et pour les trois canaux R, V et B. Linterpolation de ces proprits fonctionne uniquement sur les symboles. Affichage. Le mode de fusion ne peut pas faire lobjet dune interpolation.
174
Flash CS5
Filtres. Les diffrents filtres appliqus (flou, rayonnement, biseau, etc.; voir Fiche59) ont tous un jeu de paramtres. Cest sur les valeurs de ces paramtres quune interpolation peut porter. On voit par l que le terme dinterpolation de mouvement est bien maladroitement choisi. Il ny a proprement parler mouvement que lorsque les proprits interpoles sont gomtriques (position, taille, rotation, inclinaison). Il serait donc plus juste de parler dinterpolation de proprits. Les valeurs de deux proprits ne sont pas modifiables dans le panneau Proprits, mais dans le panneau Transformer, reproduit la Figure27.7(qui permet aussi de modifier les proprits 3D). Rotation et inclinaison. Langle qui dfinit lorientation et les deux angles dfinissant le cisaillement.
Figure27.7
Angles de rotation et dinclinaison sont modifiables dans le panneau Transformer.
Les panneaux Proprits et Transformer ne sont pas les seuls endroits o rgler les valeurs de proprits. Plutt que de le faire numriquement, il est parfois prfrable et plus simple de le faire interactivement sur la scne. Pour la position, il suffit de glisser-dposer lobjet cible lemplacement voulu. Les valeurs dautres proprits sont modifiables via des outils: Transformation libre pour la taille, la rotation et linclinaison (voir Fiche16), Translation 3D et Rotation 3D pour la position 3D (voir Fiche39). En revanche, aucun outil ne permet de modifier les valeurs dun effet de couleur, ni celles des paramtres dun filtre. Le dernier endroit o dfinir les valeurs de proprits, aussi bien numriquement quinteractivement, est lditeur de mouvement, trait la section homonyme de cette mme fiche.
Animation
175
Image cl de proprit. Image dune plage dinterpolation en laquelle la valeur dune ou plusieurs proprits de lobjet cible est dfinie. Une image dune plage dinterpolation peut contenir plusieurs images cls de proprit, autant quil y a de proprits pour lesquelles une valeur est dfinie. Image intermdiaire. Image dune plage dinterpolation en laquelle la valeur dune ou plusieurs proprits de lobjet cible est calcule la vole partir de celles spcifies aux images cls de proprit prcdente et suivante.
Notions cls
Raccourci
Aprs avoir slectionn une image dans la plage dinterpolation, F6 cre une image-cl de proprit pour chacune des proprits. Aprs avoir slectionn une image du calque dinterpolation au-del de la plage, F6 tend cette dernire en crant une image-cl de proprit pour chacune des proprits, tandis que F5 tend la plage dinterpolation sans crer aucune image-cl de proprit.
Les images-cls de proprit sont indpendantes les unes des autres. Dans le menu contextuel des plages dinterpolation reproduit la Figure27.5, les commandes Insrer une imagecl et Effacer limage-cl ont un sous-menu reproduit la Figure27.8. Dans ce mme menu, la commande Afficher les images-cls a galement un sous-menu qui reprend les options du prcdent en y ajoutant loption Aucune. Cette commande permet donc un affichage slectif des images-cls de proprit, de mme que les deux prcdentes permettent une insertion slective et un effacement slectif. Ces commandes slectives peuvent tre utiles, mais dans les situations complexes dinterpolations sur de multiples proprits, le mieux est de passer lditeur de mouvement qui donne une vision globale (voir la section ddie dans cette mme fiche).
Figure27.8
Le sous-menu des commandes Insrer une image-cl et Effacer limage-cl.
Ces diffrentes proprits interpolables vous donnent accs toute une gamme deffets anims. Vous pouvez raliser des fondus en interpolant lopacit. Linterpolation de la Figure27.4 en est un exemple, mais vous pourriez aussi raliser un fondu au noir de lensemble de la scne en interpolant la proprit Alpha dun rectangle noir de la taille de celle-
176
Flash CS5
ci et plac par-dessus. En interpolant les paramtres dun filtre Flou, vous pouvez raliser un effet de mise au point. En interpolant la position3D, vous pouvez faire surgir un objet du point de fuite. Pour linterpolation 3D, sachez quelle ne sapplique quaux clips danimation et faites attention la notion despace 3D global versus espace 3D local. Vous devez en outre publier pour ActionScript 3 et une version au moins 10 du lecteur Flash (voir Fiche39). Le menu contextuel de la Figure 27.5 contient galement une commande Interpolation 3D. Des images-cls de proprits 3D sont ajoutes chaque image possdant des images-cls de proprits de position et/ou de rotation 2D. Les ventuelles images-cls de proprits 3D existantes sont supprimes. Vous pouvez dplacer une image-cl de proprit vers une autre image de la mme plage ou dune autre plage dinterpolation. Il suffit de la cliquer, puis de la CMd+glisser (Mac) ou Ctrl+glisser (Windows). Si vous la faites glisser avec la touche OptiOn (Mac) ou alt (Windows) enfonce, au lieu de la dplacer, vous la copiez dans la plage dinterpolation cible (la mme ou une autre). Il est possible de copier-coller toutes les proprits interpoles pour les appliquer sauf la position, qui nest pas prise en compte un autre objet cible. Utilisez pour cela les commandes Copier le mouvement et Coller le mouvement du menu Modifier> Scnario (attention, ne cherchez pas en vain dans Modification> Scnario!), aprs avoir slectionn les plages dinterpolation source dabord, puis cible ensuite. Au besoin, la longueur de la plage cible est ajuste. Il est galement possible de copier-coller les proprits interpoles dune image source donne. Slectionnez dans le menu contextuel de la Figure27.5 la commande Copier les proprits. Slectionnez ensuite limage cible, dans la mme plage ou dans une autre plage dinterpolation, puis appelez dans ce mme menu la commande Coller les proprits, ou la commande Coller les proprits spciales, qui ouvre une bote de dialogue dans laquelle vous choisirez quelles proprits coller (elles nont rien de spcial et la commande serait plus judicieusement nomme Coller les proprits choisies). Le copier-coller de proprits interpoles a quelques limitations : pour un effet de couleur, un filtre ou des proprits 3D, limage cible doit dj possder une image-cl pour la proprit colle. Enfin, il parat logique quil soit impossible de coller des proprits 2D dans une interpolation 3D. Nous lavons dj dit plusieurs reprises, dans Flash CS5 linterpolation est un objet. Lune des proprits importantes de cet objet est lobjet cible auquel elle sapplique. Il est possible de permuter cet objet cible. La premire solution est dutiliser le bouton Permuter dans le panneau Proprits (voir Figure27.6). Dans notre exemple, cliquer sur ce bouton ouvrirait une bote de dialogue dans laquelle nous pourrions choisir, parmi ceux prsents dans la bibliothque, un autre papillon que le Sylvain. Une autre solution consiste simplement glisser-dposer un symbole depuis la bibliothque et de confirmer la permutation dans la bote de dialogue qui saffiche. La dernire solution consiste copier-coller une occurrence sur la plage dinterpolation slectionne.
Animation
177
Si vous supprimez lobjet cible (avec la touche sUppr), dans le scnario le cercle plein de la premire image de la plage dinterpolation est remplac par un cercle vide, dnotant comme dhabitude labsence de contenu visuel. La plage dinterpolation conserve nanmoins ses images-cls de proprit et vous pouvez tout fait y instancier un autre objet cible. Enfin, dernire possibilit lie lapproche objet de linterpolation, vous pouvez glisser une plage dinterpolation sur un autre calque pour crer une autre plage dinterpolation. Le Tableau 27.1 fait la synthse des caractristiques de linterpolation de mouvement dans Flash. Tableau 27.1 :Caractristiques de linterpolation de mouvement dans Flash
Types dobjets Nombre dinstances Plages dimages Images-cls Acclrations Sans conversion : les symboles des trois types (graphique, bouton, clip danimation ) et les textes. Formes et groupes sont convertis en symbole clip danimation. Une seule occurrence (objet cible) par plage dinterpolation, sur laquelle se greffent des images-cls de proprits. La plage dinterpolation forme un tout (objet). Images-cls de proprit dfinies implicitement. Elles sont appliques la plage dinterpolation dans son ensemble.
Le menu contextuel de la Figure27.5 contient une commande Convertir en animation image par image. Dans ce cas, chaque image de la plage devient une image-cl (pas une imagecl de proprit). Nous lavons mentionn la fiche prcdente, ceci peut vous donner une base de travail pour raliser une animation image par image en modifiant par la suite ces diffrentes images-cls.
Trajectoire
Ds quil y a images-cls de position, il y a interpolation de position, donc trajectoire. Dans lexemple de la Figure27.4, nous avons vu quil y avait trois images-cls de position et que par dfaut Flash ralise une interpolation linaire entre les trois positions. Autrement dit, la trajectoire est une polyligne reliant les points. Nanmoins, la trajectoire est un trac vectoriel, donc vous tes libre de lditer et de le transformer comme vous le feriez avec nimporte quel autre trac vectoriel que vous auriez dessin ou import. Reportez-vous au trois sections consacres au retravail dune courbe, Fiche 10 pour ldition (outil Slection, outil Sous-slection, outil Plume) et la Fiche16 pour les transformations (translation, homothtie, rotation; outil Transformation libre). En partant de la scne telle que la montre la Figure27.4, en cliquant avec loutil Sous-slection sur
178
Flash CS5
chacune des trois positions dimages-cls la touche OptiOn/alt enfonce, puis en glissant, nous avons fait apparatre les poignes de Bzier grce auxquelles la trajectoire rectiligne est devenue la courbe que lon voit Figure27.9. Vous pouvez slectionner une trajectoire, puis la copier. Vous pouvez mme copier dans un calque, en guise de future trajectoire, nimporte quel trac vectoriel, du moment que celui-ci nest pas ferm. Lorsque vous collez un trac dans un calque, vous y collez une trajectoire sil sagit dun calque dinterpolation; un simple trac vectoriel, sinon. Une fois votre trajectoire colle, si vous voulez en inverser les points de dpart et darrive, dans lun des menus contextuels de trajectoire ou de plage dinterpolation, demandez Trajectoire du mouvement> Inverser le trac. Lorsque vous dplacez une trajectoire sur la scne, vous dplacez avec lobjet cible. Par contre si celui-ci est slectionn, en glissant-dposant vous ne dplacerez que lui. Pour dplacer la trajectoire en mme temps, il faut rajouter celle-ci la slection.
Figure27.9
Une trajectoire courbe: courbe de Bzier avec ses habituelles poignes.
Le fichier est disponible dans les exemples du livre: FCS5_27c.fla (trajectoire courbe).
Lorsquune trajectoire est slectionne, le menu des options du panneau Proprits (voir Figure27.12) propose en tte une option Toujours afficher les trajectoires de mouvement. Si vous la cochez, vous visualiserez simultanment sur la scne les trajectoires de toutes vos interpolations. Ceci sera trs utile pour les caler avec prcision, dans le cas par exemple o elles devraient converger en un mme point. Considrons lexemple de la Figure27.10. La position du papillon objet cible y a t dfinie, outre aux images de dbut et de fin 1 et 24, aux images 4 et 8. Au vu de la densit variable sur la trajectoire des positions intermdiaires calcules (elles sont reprsentes par de petits losanges), on peut deviner que la vitesse sera
Animation
179
rapide sur le premier segment de courbe (monte), moins rapide sur le second (descente) et plus lente sur le dernier (seconde monte).
Figure27.10
Une trajectoire dont les images-cls de position ne sont pas itinrantes.
Si le comportement prcdent nest pas souhaitable, il faut rendre itinrantes les deux images-cls de position initialement dfinies aux images 4 et 81. Seules les images-cls de position (X, Y, Z) peuvent tre rendues itinrantes. Demandez pour cela dans lun des menus contextuels de trajectoire ou de plage dinterpolation, Trajectoire du mouvement> Dfinir les images-cls sur itinrant. Cest ce qui a t fait la Figure27.11. Rendues itinrantes, les images-cls de position ne sont plus attaches une image spcifique. Remarquez en effet que les deux losanges qui taient prsents aux images 4 et 8 du scnario de la Figure27.10 ont disparu de celui de la Figure27.11, ainsi que de la trajectoire sur scne. On observe galement le dplacement de lobjet cible sur la scne, bien que la tte de lecture soit toujours limage 14. Remarquez aussi comment sur la trajectoire, les nouvelles positions intermdiaires calcules maintenant reprsentes par de petits ronds ont une densit constante du dbut la fin. Si nous dsactivions litinrance des images-cls de position (via la commande Dfinir
1. La traduction de roving par itinrant na malheureusement aucun sens en franais; il serait plus sens de parler dimages-cls sans attache.
180
Flash CS5
les images-cls sur non itinrant, dans le mme sous-menu), ces positions intermdiaires densit constante subsisteraient.
Figure27.11
La mme trajectoire que prcdemment, aprs avoir rendu itinrantes ses imagescls de position.
Lorsque vous collez une trajectoire (voir ci-dessus), les images-cls de position sont dfinies comme itinrantes par dfaut. Enfin, outre cette dfinition globale de litinrance des images-cls de position, il en existe une autre, locale, dans lditeur de mouvement (voir la section homonyme de la prsente fiche). Si vous cliquez dans la scne sur la trajectoire, ou dans le scnario dans la plage dinterpolation, le panneau Proprits affiche les proprits de linterpolation, comme le montre la Figure27.12. Le sous-panneau Chemin donne la position et la taille de la trajectoire. Vous pouvez y modifier numriquement celles-ci. Mais vous pouvez, plus simplement et interactivement, modifier la position de la trajectoire en glissant-dposant celle-ci sur la scne et modifier sa taille avec loutil Transformation libre. Lacclration reoit une valeur entire entre 100 et +100. Observez bien sur chacune des deux trajectoires de la Figure27.13 la rpartition des petits points (images intermdiaires) et des gros (images-cls). En haut, lacclration vaut 100 et les points sont trs rapprochs au dbut (en bas gauche) et beaucoup plus espacs la fin (en haut droite). Il y a donc acclration au dbut. linverse, en bas lacclration vaut +100 et il y a acclration la fin.
Animation
181
Figure27.12
Les proprits dune interpolation.
Figure27.13
Acclration sur une trajectoire: ngative en haut, positive en bas.
Le sous-panneau Rotation vous permet de dfinir lorientation de lobjet cible. Un angle seul ne suffit pas dfinir celle-ci sans ambigut, puisque les valeurs en degrs sont gales modulo 360 (350=10=370 par exemple). Cest la raison pour laquelle lorientation se dfinit via deux valeurs entires: un nombre de tours, plus une fraction de tour exprime par un angle. Sur la Figure27.14 (montage de cinq copies dcran), lorientation a t spcifie aux trois images-cls cest--dire aux premier, troisime et cinquime papillons.
182
Flash CS5
Lorientation des deuxime et quatrime papillons est le rsultat de linterpolation. Dans ce cas, loption Orienter vers la trajectoire une traduction mot mot qui ne veut rien dire: il faut comprendre Orienter selon la trajectoire est dcoche.
Figure27.14
Spcification de lorientation (imagescls de rotation aux premier, troisime et dernier papillons). Langle de rotation des second et quatrime papillons a une valeur interpole (montage).
Lorsque loption dorientation selon la trajectoire est coche on obtient un comportement comme celui illustr Figure 27.15 (montage de six copies dcran). Ne vous laissez pas abuser par cette figure: il na pas suffit de cocher loption pour que le corps du papillon se retrouve en chaque image tangent la trajectoire. la premire image, on a impos cette tangence laide de loutil Transformation libre.
Figure27.15
Orientation selon la trajectoire, aprs spcification de lorientation du papillon la premire image (montage).
La dernire proprit dinterpolation se trouve dans le sous-panneau Options. Il sagit de loption Synchroniser les symboles graphiques. Dans le cas particulier o vous enchaneriez deux plages dinterpolation sur des symboles graphiques, en supposant que le premier soit
Animation
183
interpol sur 24 images, si loption est coche, le second commencera limage 25 et non limage 1.
Interpolations prrgles
Lapproche interpolation de mouvement saccompagne de la livraison avec Flash dune sorte de bibliothque dinterpolations, sous la forme du panneau Prslections de mouvement reproduit la Figure27.16. Encore une traduction hasardeuse, puisque langlais preset est un prrglage. On trouve donc dans ce panneau des interpolations de mouvement prrgles. Cest lide dlments prfabriqus, que lon retrouve avec les bibliothques communes (voir section Le panneau Bibliothque, Fiche 33) ou encore avec le panneau Composants (voir Chapitre10). Parmi les trente lments prfabriqus, on trouve diffrentes entres en scne 2D (variations: par lun des quatre cts, avec ou sans effet de flou, divers types de trajectoires) ou 3D (applicables uniquement des occurrences de clips danimation). Lorsque vous slectionnez un lment dans la liste, vous avez un aperu de leffet dans la zone suprieure du panneau: une entre par la droite avec flou de boug sur lexemple de la Figure27.16. Cliquez en dehors du panneau pour interrompre lexcution de laperu.
Figure27.16
Le panneau Prslections de mouvement.
184
Flash CS5
Lorsque vous avez arrt votre choix, slectionnez lobjet cible sur la scne, puis cliquez sur le bouton Appliquer en bas droite du panneau, ou slectionnez la commande Appliquer lemplacement actuel (il faut en fait comprendre Appliquer en dbutant lemplacement actuel de lobjet cible) dans le menu du panneau. Pour appliquer linterpolation de mouvement prrgle de sorte quelle se termine lemplacement actuel de lobjet cible, cliquez sur le bouton Appliquer, touche Maj enfonce, ou utilisez la commande Terminer lemplacement actuel dans le menu du panneau. lapplication, et mme si elle contenait dj une interpolation de mouvement, la plage hrite la longueur de linterpolation prrgle. Vous tes libre de modifier ensuite ce nombre dimages prdfini. Vous ne pouvez appliquer quune seule interpolation prrgle un objet cible. Si vous en appliquez une seconde, elle se substitue la premire. Vous pouvez par contre, ventuellement appliquer dun coup la mme interpolation prrgle une slection multiple dobjets cibles. Bien que nous ayons parl dentre de sorte de bibliothque, il ny a aucun lien dinstanciation entre une interpolation prrgle et son application dans le scnario, la diffrence de ce qui se passe entre un symbole et son occurrence, comme nous le verrons au chapitre suivant. Cela signifie que les ventuels suppression, crasement ou renommage ultrieurs seront sans effet sur les applications dj effectues avant ces oprations. Par ailleurs, ces oprations ne sont pas prises en compte dans lhistorique. Outre le dossier Prslections par dfaut, dvelopp Figure27.16, le panneau Prslections de mouvement contient en standard un autre dossier Prslections personnalises. Comme son nom lindique, cest lendroit o stocker les effets dinterpolation de mouvement aboutis que vous tes susceptible de rutiliser. Slectionnez soit la plage dinterpolation dans votre scnario, soit lobjet cible sur la scne, soit son ventuelle trajectoire, puis cliquez sur le premier bouton en bas gauche du panneau (Enregistrer la slection sous forme de prslection). Dans le menu des options du panneau, on trouve galement une commande Enregistrer, et le menu contextuel des plages dinterpolation, reproduit Figure27.5, dispose aussi dune commande Enregistrer en tant que prslection de mouvement. Le second bouton, Nouveau dossier, vous permet dorganiser votre convenance les interpolations prrgles. Le dernier bouton, Supprimer llment, permet de faire le mnage dans ce panneau. Il y a galement une commande Supprimer dans son menu doptions. lappel de cette commande, Flash efface le fichier XML dcrivant linterpolation prrgle. Le chemin daccs ce fichier partir de votre dossier utilisateur est sous Mac OS X : Bibliothque/Application_Support/Adobe Flash CS5/fr_FR/Configuration/Motion Presets ; sous Windows : Local Settings\ Application Data\Adobe Flash CS5\fr_FR\Configuration\Motion Presets. Le menu des options du panneau contient une commande Exporter, grce laquelle vous pourrez gnrer le fichier XML de description de leffet, donc ensuite partager celui-ci avec dautres ralisateurs (vous pouvez aussi utiliser cette commande vos propres fins pour exporter une copie de sauvegarde de leffet avant de le supprimer du panneau). En sens inverse, vous rcuprerez des effets conus par dautres grce la commande Importer.
Animation
185
Si vous voulez doter une nouvelle interpolation prrgle dun aperu, crez un fichier source Flash ne contenant quune mise en uvre de cette interpolation, donnez comme radical au fichier FLA le nom de celle-ci, puis publiez le fichier SWF et placez celui-ci dans le mme rpertoire que le fichier de description XML (reportez-vous aux chemins daccs donns ci-dessus).
Lditeur de mouvement
Lditeur de mouvement a t introduit avec la version CS4 de Flash. Faisons dentre la mme remarque que prcdemment concernant linterpolation de mouvement qui serait plus justement nomme interpolation de proprits. Le panneau diteur de mouvement devrait en fait sintituler diteur dinterpolations, puisquil sagit dy afficher pour linterpolation actuellement slectionne les variations de valeur de toutes les proprits, ainsi que les images-cls de chacune delles. Avant de cliquer sur longlet diteur de mouvement (le panneau partage par dfaut avec le panneau Scnario le dock suprieur de linterface), slectionnez une plage dinterpolation dans le scnario, ou un objet interpol ou encore une trajectoire de mouvement sur la scne. La Figure27.17 reprend lexemple utilis ci-dessus plusieurs reprises, dont elle est simplement une variation sur la trajectoire courbe.
Figure27.17
Le panneau diteur de mouvement aprs slection du fondu dentre du papillon.
Remarquons dabord que ce panneau est une sorte de mini scnario, limit aux images de la plage de linterpolation examine dans notre exemple, les 24 images de leffet dapparition en fondu du papillon. On retrouve en haut une ligne du temps, ainsi quune tte de lecture qui indique limage courante quindique aussi le scnario sur la Figure27.17, elle se trouve en image 24, la dernire image de linterpolation. Comme dans le scnario, vous
186
Flash CS5
pouvez faire dfiler la tte de lecture rapidement dans un sens et dans lautre (scrubbing) pour prvisualiser leffet sur la scne. Pour chaque proprit, un graphique saffiche, qui montre la variation dans le temps (horizontalement) de sa valeur (reporte verticalement). Le long de cette courbe, les ventuelles images-cls de la proprit concerne apparaissent sous forme de points de contrle. Dans le cas dutilisation dune acclration, une seconde courbe saffiche en pointill par dessus la premire (voir Figure27.18). Cet diteur nest pas utilisable avec les interpolations classiques qui seront dcrites la fiche suivante.
Figure27.18
Deux modes daffichage des graphiques: normal et dvelopp.
Ce panneau tant susceptible dafficher un grand nombre dinformations, plusieurs outils sont votre disposition pour que vous puissiez le faire cohabiter avec les autres panneaux sans hgmonie. Dans la partie gauche de lditeur, toutes les proprits de lobjet cible sont reprises, organises par catgories: Mouvement de base, Transformation, Effet de couleur, Filtres. Cliquez sur le triangle figurant gauche dune catgorie de proprits pour la dvelopper ou la rduire. Dans lexemple de la Figure27.17, linterpolation ne portant que sur les proprits X, Y et Alpha, les catgories Transformation et Filtres sont rduites. Dans le mouvement de base, linterpolation porte seulement sur la position 2D, donc la proprit Rotation Z ne subit aucune variation, do une ligne horizontale pointille la valeur 0. Lopacit (Alpha) crot linairement de la premire la dernire image de la plage dinterpolation, sans aucune image-cl intermdiaire pour cette proprit. Les proprits X et Y varient non linairement de la premire la dernire image, en passant chacune par une image-cl intermdiaire limage 10. X crot, tandis que Y dcrot (comparez avec la trajectoire sur scne et noubliez pas quen infographie les valeurs en Y croissent vers le bas de lcran). En bas gauche de lditeur, vous avez accs trois paramtres daffichage, qui valent respectivement 51, 214 et 24 sur lexemple de la Figure27.17. Le premier est la taille verticale dun graphique en mode normal et le second sa taille en mode dvelopp 51 pixels et 214pixels dans notre exemple1. Le troisime paramtre est le nombre dimages visibles, au maximum le nombre total dimages de la plage dinterpolation cest le cas dans notre exemple: 24.
1. Un bogue dans la version de Flash CS5 que nous utilisons a rendu ces deux paramtres inoprants.
Animation
187
Lorsque vous cliquez sur le nom dune proprit, vous basculez le graphique entre ses deux modes daffichage, normal et dvelopp. un instant donn, un seul graphique peut tre dvelopp. Sur la Figure27.18, qui reprend lexemple prcdent en y ayant ajout des acclrations (courbes en pointills en forme de crneaux), la proprit X est en mode normal et la proprit Y en mode dvelopp: remarquez la graduation de lchelle de ses valeurs. Les catgories Effet de couleur et Filtres ont un fonctionnement diffrent des autres: toutes les proprits interpolables ne sont pas listes, mais uniquement celles effectivement interpoles. Vous pouvez ajouter une proprit interpoler en cliquant sur le bouton Ajouter dont licne est un signe plus, puis en la slectionnant dans le menu droulant (voir Figure27.19). Le bouton dont licne est un signe moins sert bien sr supprimer une proprit de lditeur.
Figure27.19
Les menus Ajouter des catgories Effet de couleur ( gauche) et Filtres ( droite).
Pour ajouter une image-cl, donc un point de contrle dans la courbe de la proprit, placez la tte de lecture dans limage dsire puis cliquez entre les deux flches, juste gauche du graphique, pour y faire apparatre un losange. Un second clic supprime limage-cl. Le menu contextuel des images-cls, reproduit Figure27.20, propose galement une commande Supprimer une image-cl. Les flches qui encadrent le losange vous permettent de passer aux images-cls prcdente et suivante de la proprit. Pour dplacer une image-cl de proprit vers une autre image, faites simplement glisser son point de contrle (vous ne pouvez bien sr pas aller au-del de la prcdente ou de la suivante).
Figure27.20
Le menu contextuel des images-cls.
Raccourci
CMd+CliC (Mac) ou Ctrl+CliC (Windows) dans le graphique ajoute une nouvelle image-cl pour la proprit, ou supprime une image-cl existante.
188
Flash CS5
Concernant les valeurs des proprits, notons dabord un cas particulier. Certaines proprits ne sont pas interpolables (cest le cas du paramtre de qualit de certains filtres). La valeur tant une constante, il ny a pas de graphique pour la proprit. Les proprits interpolables ont une valeur numrique. Vous pouvez la dfinir numriquement dans le champ qui se trouve juste droite du nom (champ glissable, comme tous les champs numriques dans Flash), ou interactivement dans le graphique, en dplaant verticalement le point de contrle. Certaines proprits ont des valeurs minimales ou maximales. Les valeurs de certaines proprits peuvent tre lies, de sorte quil y ait modification homothtique en X et en Y. Cest le cas de chelle X et chelle Y (Transformation), ou Flou X et Y (Filtres). Dans ce cas, on trouve droite de la valeur un bouton bascule Lier les valeurs des proprits X et Y, dont licne reprsente trois maillons dune chane, brise ou non. Enfin, en regard dune proprit ou dune catgorie de proprits, tout fait droite, on trouve gnralement un bouton Rinitialiser les valeurs, dont licne est une flche courbe. Dans le cas de linterpolation 3D, les proprits X, Y et Z sont corrles. Dune part, une image dune plage dinterpolation correspondant une image-cl de proprit pour lune de ces proprits doit tre une image-cl de proprit pour les trois. Dautre part, modifier la valeur Z modifie galement les valeurs X et Y du fait de la mise en perspective (voir Fiche39). La courbe dune proprit est un trac vectoriel. ce titre, elle est ditable comme nimporte quel trac vectoriel que vous auriez dessin ou import dans Flash (outil Slection, outil Plume, voir Fiche 10). lexception des courbes de position (2D ou 3D: X, Y, Z; la trajectoire se travaille plutt sur la scne que dans lditeur de mouvement qui peut tout au plus servir de petits ajustements), toutes peuvent tre modifies via leurs points de contrle et leurs poignes de Bzier. Ces modifications sont immdiatement rpercutes sur la scne. Par ailleurs, le menu contextuel des images-cls, reproduit Figure 27.20 propose quatre options Point dangle, Lissage gauche, Lissage droite (il faut lire Linaire la place de Lissage) et Point dinflexion qui permettent respectivement de supprimer les deux demitangentes au point de contrle slectionn, de ne crer quune demi-tangente ou den crer deux (voir section Courbe avec loutil Plume, Fiche 10).
Raccourci
OptiOn+CliC (Mac) ou alt+CliC (Windows) sur une image-cl la fait basculer entre point dangle et point dinflexion pour la courbe de la proprit.
Le menu contextuel des images-cls de la Figure27.20 a une dernire option Itinrant qui permet de rendre itinrante (sans attache) limage-cl slectionne. la diffrence de lactivation globale du caractre itinrant des images-cls vu la section Trajectoire de la prsente fiche, il sagit ici dun rglage local au sens o il ne sapplique quau cas par cas. Rappelons que ceci ne concerne que les proprits de position X, Y, Z. Vous pouvez dsactiver litinrance dune image-cl de position en faisant glisser celle-ci vers une ligne verticale dlimitant une image.
Animation
189
Comme une courbe de trac vectoriel ou une courbe de trajectoire, une courbe de proprit peut tre copie-colle. Le menu contextuel des courbes de proprits, reproduit Figure27.21, contient pour cela deux commandes Copier la courbe et Coller la courbe. Le copier-coller de courbe est mme possible entre proprits et acclrations (voir ci-dessous). Ce mme menu contextuel offre galement une commande Inverser les images-cls. Elle vous permet dinverser le sens de linterpolation.
Figure27.21
Le menu contextuel des courbes de proprits.
La dernire fonctionnalit de lditeur dinterpolations est lajout dacclration. De mme que la vitesse est une courbe de variation dans le temps de la position ou plus gnralement de la proprit, lacclration est une courbe de variation dans le temps de la vitesse. Nous avons dj rencontr lacclration prcdemment comme proprit dune interpolation (voir section Trajectoire de la prsente fiche, et en particulier la Figure27.12), mais dans le sous-panneau Acclration du panneau Proprits elle sapplique globalement, cest-dire toutes les proprits en jeu dans linterpolation. Dans lditeur dinterpolations, il sagit dappliquer une acclration plus localement: soit une catgorie de proprits, soit une proprit donne. La premire chose faire est de cliquer sur le bouton Ajouter de la dernire sectiondu panneau, Acclrations, puis de slectionner dans le menu droulant lacclration ajouter. Ceci fait, lacclration apparatra dans les menus droulants dacclration des proprits et des catgories de proprits. Pour lappliquer, il suffit de ly slectionner. gauche de chacun de ces menus se trouve une case cocher Activer ou dsactiver lacclration de la proprit ou de la catgorie de proprits. Cette option est trs pratique pour faire des tests comparatifs avec et sans acclration. Vous pouvez liminer une acclration de la section Acclrations via le bouton Supprimer gauche du bouton Ajouter. La Figure27.22 montre une slection des acclrations prfabriques fournies avec Flash. Le graphique permet de se faire une bonne ide de leffet de chacune. Le nom est une autre indication. Malheureusement, la version franaise est une nouvelle fois critiquable (si un logiciel de traduction automatique est utilis, on aimerait quun tre humain vrifie que le rsultat soit intelligible). LOnde assourdie est en fait une Onde amortie. On atteint des hauteurs surralistes ou comiques avec Printemps, retenu pour rendre Spring, alors quil sagit en fait de Ressort!
190
Flash CS5
La dernire option du menu Ajouter une acclration est Personnaliser, qui vous permet dditer une courbe dacclration, comme nimporte quelle autre courbe de Bzier (trac vectoriel, trajectoire, courbe de proprit). La valeur initiale dune courbe dacclration doit toujours tre 0 %.
Figure27.22
Un chantillon de la gamme dacclrations fournies.
Chaque acclration est dote dun champ numrique droite de son nom qui permet den doser leffet. Dans le cas de courbes dacclration simples, comme pour le paramtre dacclration global du panneau Proprits, une valeur ngative cre de lacclration en dbut de courbe et une valeur positive en fin de courbe. Lacclration alatoire effectue des sauts alatoires dune valeur lautre, do sa courbe en forme de crneaux. Dans ce cas, la valeur du champ numrique conditionne les largeurs et hauteurs alatoires de ces crneaux. Dans le cas de courbes dacclration de la famille des ondes (sinusodale, amortie, en dents de scie), la valeur du champ numrique joue sur le nombre de cycles. Comme la Figure27.13 pour une trajectoire, lapplication dune acclration influe sur la densit des images le long de la courbe. Sans acclration, celle-ci est linaire; avec une acclration, la densit devient variable. Lorsque les images-cls de position ont t rendues itinrantes, le mouvement (au sens propre et non au sens relch dans lequel la version franaise de Flash utilise ce terme) peut tre rendu plus raliste via des acclration et dclration aux extrmits de la trajectoire. Appliquer une acclration est un bon moyen dobtenir de la complexit sans devoir crer des courbes complexes de variation de proprits.
Fiche 28
Raliser une interpolation classique

Deux approches de linterpolation de mouvement
Depuis Flash CS4 et lapproche objet de linterpolation de mouvement dcrite la fiche prcdente, ce qui sappelait interpolation de mouvement dans les versions prcdentes a t rebaptis interpolation classique.
Animation
191
Dans lapproche classique, linterpolation doit aussi avoir un unique objet cible. Il peut sagir dun symbole de lun des trois types Graphique, Bouton ou Clip (voir Fiche 33). Si vous appliquez une interpolation classique une forme vectorielle, un texte ou un groupe, il est automatiquement converti en symbole graphique nomm Interpolation 1, Interpolation 2, etc. Le mieux est de faire vous-mme la conversion en symbole pour lui donner demble un nom significatif. Dans lapproche classique, linterpolation nest pas un objet. Elle repose sur une ou plusieurs plages dimages (voir section Images-cls, Fiche 21). Une plage dinterpolation classique est une plage dimages dlimite par deux images-cls: elle dbute une image-cl et se poursuit jusqu limage prcdent la prochaine image-cl du calque. Toutes les images de la plage, sauf la premire qui est une image-cl, sont des images intermdiaires, interpoles. Le calque qui supporte une interpolation classique peut contenir plusieurs plages. Chacune de ces plages dinterpolation classique peut instancier un symbole diffrent. Cest l une diffrence importante avec la nouvelle approche de linterpolation de mouvement, dcrite la fiche prcdente, qui ne permet pas, lexcution, la permutation de symbole dans la plage. Pour dfinir une interpolation classique, il vous faut donc au moins une plage dinterpolation classique, soit au moins deux images-cls. Commencez toujours par ddier un calque une nouvelle interpolation classique. Dans ce calque, vous devrez crer explicitement des images-cls. Cest essentiellement pour cette raison que linterpolation classique est rpute plus complexe: dans la nouvelle approche, les images-cls de proprit sont crs implicitement au fur et mesure que vous modifiez des valeurs de proprits dans certaines images de la plage dinterpolation.
Scnario dune interpolation classique

Dans le scnario de la Figure28.1, la premire image-cl se trouve en image 1 du calque papillon. Un symbole graphique y est instanci (limage-cl ne doit contenir que cette seule occurrence) et loccurrence est place en coulisse, au-del du bord gauche de la scne.
Figure28.1
Image de dpart dune interpolation de mouvement classique sur la position.
192
Flash CS5
Une seconde image-cl a ensuite t cre limage 73 du calque papillon. Par dfaut, la nouvelle image-cl duplique la prcdente. Cest exactement ce quil faut pour pouvoir interpoler et il ny a pas dinstanciation explicite faire dans cette seconde image-cl. Loccurrence a seulement t dplace en coulisse, cette fois-ci au-del du bord droit de la scne, comme le montre la Figure 28.2. Ensuite, en slectionnant nimporte quelle image de la plage (la premire image-cl ou une image intermdiaire), il ne reste plus qu invoquer dans le menu contextuel des images (voir Figure21.1) la commande Crer une interpolation classique (aprs cration, ce mme menu propose une commande Annuler linterpolation). La plage dinterpolation classique se colore en mauve et une flche noire relie les deux images-cls.
Figure28.2
Image darrive dune interpolation de mouvement classique sur la position.
Les fichiers sont disponibles dans les exemples du livre: FCS5_28a.fla (image-cl de dpart, position gauche), FCS5_28b.fla (image-cl darrive, position droite) et FCS5_28c.fla (interpolation classique).
Comme vous le constatez, mettre en uvre une interpolation classique nest pas si compliqu que cela. Si vous prvisualisez lanimation (voir section Prvisualiser une animation, Fiche 26), le papillon traverse la scne de gauche droite. La Figure28.3 vous montre le rsultat sous forme dun montage des quatre images 1, 25, 48 et 72 du scnario prcdent.
Figure28.3
Quatre images (montage) dune interpolation de mouvement classique sur la position.
Animation
193
Lexemple prcdent interpolait la position, mais dautres effets gomtriques sont possibles: linterpolation classique peut aussi porter sur la taille, sur lorientation, sur linclinaison ou sur la distorsion. Il suffit de modifier ces proprits dans les deux images-cls dlimitant la plage dinterpolation classique (voir Fiche16). Si la taille est interpole, vous devez cocher chelle dans le sous-panneau Interpolation des proprits dune image de la plage dinterpolation classique (voir Figure 28.7). La rotation sera explique ci-dessous (voir Figure28.11). Linterpolation classique ne prend pas en charge les proprits 3D. Outre les effets gomtriques, linterpolation classique peut aussi porter sur les effets de couleur: couleur, luminosit, opacit de lobjet cible. Interpoler simultanment deux effets de couleur lopacit et la couleur par exemple est quelque chose dimpossible avec la nouvelle approche de linterpolation de mouvement. Nous ne dtaillerons pas ici tous les moyens de modifier les valeurs de chacune des proprits de loccurrence sur lesquelles reposent les effets gomtriques et les effets de couleur, puisque cela fait lobjet de la Fiche37. Illustrons seulement linterpolation classique de lopacit dune occurrence de manire faire apparatre celle-ci sur scne (fondu dentre). La dmarche est la mme que prcdemment et la Figure28.4 montre que le scnario est identique celui de la Figure28.1. La seule diffrence est quaprs avoir slectionn limage-cl, il faut cliquer sur loccurrence sur scne puis accder au sous-panneau Effet de couleur du panneau Proprits. On y a slectionn Alpha dans le menu Style, puis rgl 0% la valeur de cette proprit.
Figure28.4
Image de dpart dune interpolation de mouvement classique sur lopacit.
On procde de mme limage-cl darrive illustre Figure28.5: slectionner limage-cl, puis cliquer sur loccurrence sur scne et dans le sous-panneau Effet de couleur du panneau Proprits, enfin rgler lopacit 100%. Les deux exemples prcdents ont trait un effet gomtrique et un effet de couleur, mais plusieurs de ces effets sont combinables dans une mme interpolation classique.
194
Flash CS5
Les fichiers sont disponibles dans les exemples : FCS5_28d.fla (image-cl darrive, opacit 100), FCS5_28e.fla (image-cl de dpart, opacit 0) et FCS5_28f.fla (interpolation classique).
Nous verrons la Fiche37 que la premire proprit dune occurrence est le symbole quelle instancie. Dans une interpolation classique, il est possible de permuter ce symbole (voir Fiche 26) dans limage-cl darrive, voire denchaner dans le mme calque des plages dinterpolation sur des symboles diffrents, ce qui nous lavons dj dit plus haut est impossible dans la nouvelle approche.
Figure28.5
Image darrive dune interpolation de mouvement classique sur lopacit.
Il arrive parfois quune interpolation classique soit corrompue. Vous le voyez dans le scnario: une ligne pointille remplace la flche noire. Par contre, rien ne vous indique la cause de la corruption. Dans lexemple de la Figure28.6, le problme vient de ce que limage-cl de dpart instancie deux symboles et dans ce cas il est vite repr sur la scne qui contient deux papillons. Dans le cas o vous auriez instanci plusieurs symboles dans la mme image-cl en pensant appliquer la mme interpolation chacun deux, il faudra corriger en rpartissant sur autant de calques, chacun mettant en uvre sa propre interpolation classique, ventuellement la mme lobjet cible prs. Mais parfois, llment en trop sera un vulgaire petit coup de crayon qui passera inaperu sur la scne. Dans ce cas, slectionnez dans la premire image-cl lobjet cible normal, coupez et regardez le scnario. Normalement, le cercle de limage-cl doit tre vide, indiquant labsence de contenu visuel. Sil est toujours plein, cest effectivement quil y a un intrus. Lorsquil y a plusieurs objets cibles dans un plage dinterpolation classique, les rsultats sont imprvisibles, mais souvent lexcution vous constatez lescamotage de certaines occurrences. Dautres causes de corruption dune interpolation classique: elle est applique des lments autres que des occurrences de symbole, par exemple des formes vectorielles; lune des images-cls de la plage dinterpolation classique est vide.
Animation
195
Figure28.6
Une plage dinterpolation classique corrompue.
Proprits et dition dune interpolation classique

Nous avons dit en prsentant lenvironnement Flash au premier chapitre que le panneau Proprits est contextuel. Cette caractristique est trs sensible dans le contexte de linterpolation classique. Si vous cliquez sur scne sur loccurrence, le panneau vous affiche ses proprits (voir Figures 28.4 et 28.5, ainsi que, pour une revue exhaustive, les Figures 37.2 37.5 et 37.7 37.9). Par contre, si vous cliquez dans le scnario sur une image de la plage dinterpolation classique, vous avez accs aux proprits dimage et parmi elles celles de linterpolation dans le sous-panneau homonyme reproduit Figure28.7. Cest ici que vous pourrez spcifier une acclration, le nombre de tours quune occurrence fait sur elle-mme et dans quel sens elle les fait, ainsi que des options de trajectoire (Accrocher, Orienter vers la trajectoire). Loption chelle, nous lavons dit plus haut, doit tre coche si linterpolation modifie la taille de loccurrence. Enfin, dans le cas o le symbole objet cible contient de lanimation et si le nombre dimages de celle-ci nest pas un multiple pair de celui de la plage dinterpolation, cochez loption Sync pour synchroniser la dite animation avec le scnario dans lequel elle est instancie. Le nombre dimages de linterpolation est recalcul. La commande Modification> Scnario> Synchroniser les symboles (voir Figure28.10) a le mme effet.
196
Flash CS5
Figure28.7
Le sous-panneau Interpolation des proprits dune image de la plage dinterpolation classique.
Linterpolation classique reste modifiable dans le scnario aprs sa cration, mais seules les images-cls sont modifiables (voir Fiche21 et, en particulier, le menu contextuel des images Figure21.1). Vous pouvez dplacer une image-cl par glisser-dposer dans le scnario. Bien que linterpolation classique ne soit pas un objet, il est possible de la copier-coller. Commencez par slectionner une occurrence ou des images du mme calque. Dans le menu Modifier> Scnario reproduit la Figure28.8 (attention ne pas confondre avec le menu Modification> Scnario, reproduit lui la Figure28.10), on trouve les commandes Copier le mouvement et Coller le mouvement.
Figure28.8
Le menu Modifier> Scnario.
Raccourci
F5 ajoute une image. Maj+F5 supprime une image. F6 ajoute une image-cl. Maj+F6 supprime une image-cl.
Dans ce mme menu, la commande Coller le mouvement spcial qui serait plus explicite si elle sintitulait Coller slectivement le mouvement ouvre la bote de dialogue reproduite Figure28.9 dans laquelle vous pouvez spcifier quelles proprits coller. Les deux dernires options, Remplace les proprits dchelle vises et Remplace les proprits dinclinaison et de rotation vises (par vises, il faut comprendre les proprits de loccurrence cible du collage), sont par dfaut dcoches, ce qui implique que les valeurs colles des proprits
Animation
197
dhomothtie, de rotation et dinclinaison seront relatives celles de loccurrence cible. Si vous cochez ces options, les valeurs colles craseront celles de loccurrence cible. Le menu Modification> Scnario reproduit Figure28.10, outre la commande Synchroniser les symboles dj voque ci-dessus, contient une commande trs utile: Inverser les images. Nous lavons utilise la Fiche 26 pour gnrer la squence de repliement des ailes du papillon par inversion dune copie de la squence de dploiement des ailes (voir Figures 26.4 et 26.5). Lorsque vous lappliquez une interpolation classique, il est important de slectionner au pralable limage-cl de fin et de demander dy crer une interpolation classique, dfaut de quoi, aprs inversion, il ny aura plus dinterpolation. Enfin, en bas du menu, deux commandes vous permettent de scinder en deux une plage dinterpolation (Diviser le mouvement), ou linverse, den fusionner deux en une seule (Joindre les mouvements).
Figure28.9
La bote de dialogue Coller le mouvement spcial.
Figure28.10
Le menu Modification> Scnario.
198
Flash CS5
Lorsque de la rotation est en jeu dans votre interpolation, il faut distinguer deux choses. Dune part, il y a un aspect orientation, caractris par un angle entre 0 et 359. Pour cela, il suffit dutiliser loutil Transformation libre pour orienter les occurrences en dbut et en n dinterpolation (voir section Pivoter un objet, Fiche 16). Dautre part, il y a un aspect tournoiement, lorsque lobjet cible fait plus dun tour sur lui-mme, donc lorsque langle de rotation est en dehors de lintervalle de 0 359. Cela se rgle dans le sous-panneau Interpolation des proprits dune image de la plage. Dans le champ numrique Faire pivoter, vous spcifiez le nombre de tours que loccurrence doit faire sur elle-mme. La valeur est 0par dfaut et loption est Sans. Pourquoi faire clair quand on peut faire hermtique: si vous slectionnez loption 90 droite (respectivement gauche), vous dites tout simplement Flash de faire tourner loccurrence dans le sens des aiguilles dune montre (respectivement dans le sens inverse). Enfin, si vous slectionnez loption Automatique (voir Figure28.11), Flash fera tourner dans le sens du moindre mouvement. Bien videmment, orientation et tournoiement ne sont pas exclusifs lun de lautre. Vous pouvez tout fait les combiner.
Figure28.11
Rglage de la rotation dans les proprits de linterpolation.
Interpolation classique guide

En interpolation classique, la gestion des trajectoires est radicalement diffrente de ce quelle est dans la nouvelle interpolation de mouvement. La trajectoire est dessine dans un calque spar, dit calque guide de mouvement, auquel on donne le type Guide (voir section Calques non standard, Fiche 22 et Figure22.5). Les calques de ce type ne font pas directement partie du fichier SWF publi. Ils ne sont donc visibles que dans lenvironnement de ralisation. Pour crer une interpolation de mouvement classique guide, commencez par slectionner le calque contenant lobjet cible et ses deux images-cls (calque papillon dans le scnario de la Figure 28.12). Dans le menu contextuel de la pile de calques, demandez Ajouter un guide de mouvement classique. Ce nouveau calque guide (vol dans le scnario de la Figure28.12) est cr au-dessus du calque guid, lequel est indent dans la pile de calques pour montrer quil est sous influence du calque guide. Vrifiez, comme cest le cas
Animation
199
Figure28.12, que le calque guide existe bien de limage-cl de dbut de linterpolation son image-cl de fin et corrigez si ncessaire. Ltape suivante consiste dessiner une ligne dans ce nouveau calque (voir Fiches 9 et 10). Le trac peut tre ouvert ou ferm. Vous navez a priori aucune restriction sur sa longueur, ni sur sa forme, mais vitez nanmoins les formes auto-intersectantes (si vous voulez vraiment une trajectoire auto-intersectante, il faudra aprs lavoir trace la couper en deux en rajoutant une image-cl au point dintersection). La trajectoire ne doit pas prsenter de manques (un seul trait) et il est vivement conseill quelle soit galement dpourvue de petits accidents: aprs le premier jet, lissez, optimisez (voir section Retravailler la courbe globalement, Fiche 10). Aprs tout ces efforts, verrouiller le calque pour protger votre trac. La dernire tape consiste accrocher lobjet cible la trajectoire aux deux images-cls de dpart et darrive. Assurez-vous dabord que dans le menu Afchage > Accrochage, les deux options Accrocher aux objets et Accrocher aux guides soient coches. Dans le souspanneau Interpolation (voir Figure28.7), cochez Accrocher, grce quoi le point dalignement de loccurrence saccrochera la trajectoire. Il ne vous reste plus qu la glisser par son point dalignement pour quelle sy accroche. Faites-le dans limage-cl de dpart et dans celle darrive. Prvisualisez votre animation pour vous assurer que lobjet cible suit bien la trajectoire aux images intermdiaires. La scne de la Figure28.12 est un montage des six images 1, 16, 33, 44, 60 et 72 du scnario.
Figure28.12
Interpolation classique de la position le long dune trajectoire (montage).
Les fichiers sont disponible dans les exemples du livre: FCS5_28g.fla (cration dun calque guide), FCS5_28h fla (dessin de la trajectoire) FCS5_28i (accrochage de limage-cl de dpart), FCS5_28j fla (accrochage de limage-cl darrive)et FCS5_28k fla (orientation selon la trajectoire).
200
Flash CS5
Dans le sous-panneau Interpolation (Figure28.7), on trouve galement une option Orienter vers la trajectoire (qui devrait sintituler Orientation selon la trajectoire). Lenjeu est le mme que pour loption similaire de linterpolation de mouvement. Reportez-vous aux Figures 27.14 et 27.15 pour vous rafrachir les ides. Vous pouvez si besoin placer plusieurs calques sous influence du mme calque guide de mouvement. Il suffit de les glisser sous celui-ci et ils sindenteront dans la pile de calques. Vous pouvez aussi leur donner le type Guid dans la fentre de proprits du calque (voir Figure22.5). Si vous avez dessin la trajectoire dans un calque normal, faites en un guide de mouvement en donnant ce calque le type Guide. Enfin, pour sortir un calque guid de linfluence du calque guide, redonnez-lui le type Normal. Notez que ni un calque de pose (voir Fiche31), ni un calque dinterpolation (voir fiche prcdente) ne peuvent recevoir un guide de mouvement. Dans lexemple ci-dessus, le papillon vole bel et bien en suivant une trajectoire courbe, mais en gardant ses ailes dployes, ce qui nest pas trs raliste. la Fiche36, lexemple sera sophistiqu grce limbrication: la Figure36.2 illustre un vol de papillon battant des ailes, le battement tant imbriqu dans un symbole clip danimation.
Acclrations
Il est possible dappliquer une acclration votre interpolation classique. Nanmoins, ce niveau les possibilits sont nettement plus sommaires quen interpolation de mouvement. Une diffrence essentielle avec linterpolation de mouvement est quun rglage dacclration diffrent peut tre appliqu chacune des ventuelles plages dinterpolation successives du calque. Parmi les proprits de linterpolation (voir Figure28.7), il y a un champ numrique Acclration. La valeur que vous y spcifiez sapplique lensemble de la plage. La valeur, par dfaut 0, doit tre entre 100 et 100. Comme pour linterpolation de mouvement (voir Figure28.13), une valeur ngative signifie une dclration en fin de mouvement, tandis quune valeur positive signifie une acclration en dbut de mouvement. droite de la valeur dAcclration se trouve un bouton, dont licne est un crayon, qui ouvre la bote de dialogue Acclration et dclration personnalise apparue avec la version 8 de Flash reproduite Figure28.13. Par dfaut, une ligne droite joint le coin infrieur gauche au coin suprieur droit de la grille, ce qui signifie que linterpolation est linaire de limage-cl de dpart celle darrive. Cliquez nimporte o sur la courbe pour y faire apparatre un nouveau point de contrle reprsent par un carr noir. Lorsque vous slectionnez un point de contrle, ses poignes saffichent, grce auxquelles vous pouvez inflchir la courbure. Dplacez un point de contrle par cliquer-glisser. Vous pouvez dsactiver laccrochage des points de contrle la grille en les glissant touche X enfonce. Pour supprimer un point de contrle, cliquez-le touche OptiOn (Mac) ou alt (Windows) enfonce.
Animation
201
Figure28.13
La bote de dialogue Acclration et dclration personnalise.
Testez vos rglages laide des boutons Lire et Arrter en bas droite. Cliquez sur le bouton Rinitialiser pour restaurer la courbe linaire du dpart et repartir de zro. Par dfaut, loption Utiliser un paramtre pour toutes les proprits (encore une traduction vide de sens: il faut comprendre Appliquer la mme courbe toutes les proprits) est coche. Si vous la dcochez, le menu Proprit, reproduit Figure28.14, devient accessible et vous pouvez spcifier une courbe dacclration-dclration diffrente pour chaque proprit. Vous pouvez copier-coller une courbe dacclration.
Figure28.14
Le menu Proprit de la bote de dialogue prcdente.
202
Flash CS5
Synthse comparative
Tableau 28.1 : Synthse comparative des deux approches de linterpolation de valeurs de proprits
Critre Types dobjets interpolables sans conversion Conversion des types dobjets non interpolables Plages dimages Interpolation de mouvement Symboles des trois types et textes Interpolation classique Symboles des trois types
Formes et groupes sont convertis en Formes, groupes et textes sont symbole clip danimation convertis en symbole graphique La plage dinterpolation forme un tout (objet) slectionnable, redimensionnable en glissant lune des extrmits Une seule occurrence par plage dinterpolation donc par calque , sur laquelle se greffent des imagescls de proprits Images-cls de proprits dfinies implicitement Impossible Une seule par plage dinterpolation Possible Possible Visible et modifiable sur la scne, sous-panneau Chemin Plages dimages dimage-cl en image-cl et ce sont les images qui sont slectionnes par dfaut Une seule occurrence par plage, mais ventuellement des occurrences de plusieurs symboles dans autant dimages-cls, donc de plages successives Images o sont instancis des symboles, dfinir explicitement Possible Interpolations simultanes possibles sur diffrents effets Impossible Impossible Guide de mouvement sur un calque spar
Instanciation de lobjet cible
Images-cls Permutation de symbole dans la plage lexcution Interpolation sur un effet de couleur Interpolation sur un objet 3D dition des courbes de proprits Trajectoire Acclrations
Appliques globalement la plage Appliques aux plages dimages dinterpolation (une acclration locale ncessite la construction dune courbe dacclration personnalise) Interpolation de mouvement, guide de mouvement et effets de scnario forment un tout Impossible Plus complexe
Simplicit
Corruption
Possible Impossible Possible
Enregistrement comme interpolation Possible prrgle Spcification dans une image-cl du numro de limage afficher dans un symbole (multi-image) Scripts dimage Impossible
Non permis
Permis
Animation
203
Fiche 29
Mtamorphoser des formes

La mtamorphose (morphing) consiste dfinir un graphisme de dpart et un graphisme darrive et laisser le soin un algorithme de produire les graphismes intermdiaires qui assurent une transformation progressive de lun en lautre. Les effets de mtamorphose les plus populaires sont ceux dans lesquels un visage se transforme en un autre. Sil sagit l de mtamorphose matricielle, il existe aussi de la mtamorphose vectorielle. Cette dernire est dailleurs plus facile mettre en uvre que la premire, puisque disposer dune description vectorielle dune forme cest en avoir une modlisation et il est plus simple algorithmiquement dapparier des points de deux modles pour les interpoler, que dinterpoler des matrices de pixels sans structure. Souvent, une mtamorphose est pr-calcule et enregistre (sous forme de vido dans le cas de la mtamorphose matricielle). Ce que Flash appelle linterpolation de formes est de la mtamorphose, vectorielle et calcule la vole par le lecteur Flash. Lopration de base consiste dfinir les formes de dpart et darrive en deux imagescls diffrentes dun mme calque. Linterpolation de formes ne fonctionne quavec du dessin vectoriel. Le texte (voir Chapitre 6), les groupes, les occurrences de symboles (voir Chapitre5) ou les images bitmap (voir Chapitre7) doivent au pralable tre spars (Modication> Sparer). Le texte doit tre spar deux fois: la premire opration spare en effet seulement le texte en ses diffrents caractres et une seconde opration est ncessaire pour produire des formes vectorielles. Aprs sparation, une image bitmap doit tre trace, cest--dire convertie en remplissages vectoriels (voir Fiche55). Nanmoins, sauf cas particulier, le rsultat produira une telle prolifration de contours vectoriels que la mtamorphose sera impraticable. Le plus sr reste encore dutiliser des formes vectorielles relativement simples, dessines dans Flash ou importes. Lexemple que nous allons prendre est une mtamorphose de serpent en papillon. Le graphisme vectoriel a t ralis dans Fireworks, puis export au format SWF avant dtre import dans lanimation Flash. La Figure29.1 montre la forme de dpart limage 1 du scnario. La Figure29.2 montre la forme darrive limage 72, soit raison de 24 I/S une mtamorphose en trois secondes. Une fois les deux graphismes vectoriels en place aux deux images-cls, slectionnez une image de la plage, puis demandez Insertion> Interpolation de forme, ou utilisez la commande Crer une interpolation de forme du menu contextuel. Faisons au passage une petite remarque de vocabulaire: il est singulier de parler dinterpolation de forme, au singulier, puisque sagissant de transformer une premire forme en une seconde, elles sont deux, donc il serait plus logique de parler dinterpolation de formes, au pluriel. Une fois linterpolation de formes cre, la plage dimages devient vert clair et elle porte une flche noire.
204
Figure29.1
Image de dpart dune interpolation de formes.
Flash CS5
Figure29.2
Image darrive dune interpolation de formes.
Les fichiers sont disponibles dans l'archive des exemples : FCS5_29a.fla (mtamorphose), FCS5_29b fla (mtamorphose avec repres de formes) et FCS5_29c.fla (mtamorphose segmente avec repres de formes).
Animation
205
Pour obtenir un aperu de linterpolation, toutes les possibilits voques la section Prvisualiser une animation, Fiche 26, sont valables, le plus simple tant de faire dfiler rapidement la tte de lecture dans la plage en la glissant dans le scnario, ou de lancer lanimation dans lenvironnement en appuyant sur EntrE. Pour ajuster la temporisation, vous devrez allonger ou rduire la plage dimages. Utilisez les raccourcis clavier F6 et Maj+F6 pour y ajouter ou supprimer des images et/ou dplacez par glisser-dposer les images-cls de dbut et de fin. Lorsquune image intermdiaire de la plage dinterpolation est slectionne, le sous-panneau Interpolation du panneau Proprits, reproduit la Figure29.3, donne deux proprits. La valeur du champ Acclration est 0 par dfaut. Pour ajouter une acclration la mtamorphose, donnez-lui une valeur entre 100 et 100, une valeur ngative crant comme dhabitude de lacclration en dbut dinterpolation et une valeur positive en fin dinterpolation. La seconde proprit, Fondu, peut prendre lune des deux valeurs Distributif ou Angulaire, dont les intituls sont pour le moins hermtiques. Avec la premire, qui est la valeur par dfaut, la mtamorphose privilgie des formes courbes lisses. Avec la seconde, au contraire, angles et segments de droites sont prservs. Ce choix na de sens que pour des formes de dpart et darrive effectivement rectilignes et anguleuses. Dans notre exemple, nous conserverons le rglage par dfaut.
Figure29.3
Les proprits dune interpolation de formes.
Si linterpolation de formes est par dfinition ddie la mtamorphose, il faut prendre conscience du fait quelle a la capacit danimer toutes les transformations gomtriques: translation, homothtie, rotation, cisaillement. De plus, bien quelle ne puisse pas proprement parler interpoler des effets de couleur, ne travaillant pas sur des occurrences de symboles, linterpolation des couleurs et/ou des opacits lui est nanmoins accessible via la spcification des couleurs de trait et de remplissage dans les images-cls de dpart et darrive. Linterpolation de formes a donc potentiellement la capacit de raliser la plupart des effets raliss en interpolation de mouvement. Travaillant sur des formes vectorielles et
206
Flash CS5
non sur des occurrences de symboles, elle peut traiter plusieurs objets dune image-cl sur un mme calque. Ceci dit, linterpolation de mouvement na pas pour autant t dtrne par linterpolation de formes. La raison en est simple: la seconde est bien plus coteuse que la premire, la fois en espace et en temps. Dune part, le fichier publi est plus lourd, puisquil ne bnficie pas de la factorisation dinformation propre linstanciation de symboles (voir Chapitre5), donc plus long tlcharger. Dautre part, la gnration la vole des formes vectorielles intermdiaires dune mtamorphose est gourmande en calculs et sollicite beaucoup le processeur de la machine cliente. En conclusion, ne recourrez linterpolation de formes que si vous avez besoin dune vritable mtamorphose. Outre son cot, linterpolation de formes prsente galement linconvnient dtre beaucoup moins prvisible que linterpolation de mouvement. La Figure29.4 est une image intermdiaire de la mtamorphose du serpent en papillon dont les formes de dpart et darrive sont visibles Figures 29.1 et 29.2. On pourra certes trouver des vertus esthtiques cette image et apprcier la chimre de papillon queue de serpent quelle propose, mais le moins que lon puisse dire est quelle ne correspond pas vraiment ce que lon pouvait esprer. Sauf avec des formes gomtriques extrmement simples et encore , vous serez du par lanimation produite par lalgorithme de mtamorphose vectorielle de Flash livr luimme. Pour obtenir un rsultat satisfaisant, plusieurs stratgies sont possibles: optimiser les formes, sparer la mtamorphose en plusieurs, crer des formes intermdiaires et enfin utiliser les repres de formes. Dans chacune des quatre, il sagit de canaliser lalgorithme vers le rsultat attendu. Si lalgorithme livr lui-mme produit des rsultats tranges, cest que pour pouvoir interpoler, il doit apparier des points des contours de dpart et darrive, ce que de lui-mme il fait au petit bonheur. Chacune des quatre stratgies favorise des appariements plus pertinents.
Figure29.4
Une image intermdiaire dune interpolation de formes non guide.
Animation
207
Commencez par optimiser au maximum les formes de dpart et darrive (voir section Retravailler la courbe globalement, Fiche 10). Moins il y aura de points de contrle et plus la combinatoire dappariements sera limite. Dans le mme esprit, prfrez le dessin en mode objet (voir Fiche 8), dans lequel trait et remplissage appartiennent au mme objet, ou bien liminez le trait pour ne garder que les formes (ce qui diminue le nombre de contours, voir Fiche 7). Sparer la mtamorphose en plusieurs, signifie faire plusieurs interpolations de forme sur des calques distincts. Typiquement, si vous voulez mtamorphoser le dessin vectoriel dune tte en une autre, dfinissez par exemple des calques visage, chevelure, il gauche, il droit, nez et bouche. Ce faisant, vous serez sr quun point du contour de lil gauche sera appari avec un point de lil gauche de la seconde tte, et non de loreille droite ou de la chevelure, ce qui ne manquerait pas de produire des monstruosits comme celles illustres Figure 29.4. Si vous conservez le trait et le remplissage, placez chacun deux sur un calque spar. Si le recours aux calques est une division du problme dans lespace, la cration de formes intermdiaires est une division du problme dans le temps. Lorsque le torrent est trop large sauter, nous cherchons un gu pour y faire trois sauts au lieu dun. Cest cette ide qui a t mise en uvre dans le scnario de la Figure29.5. limage 48, nous avons dessin une simplification du papillon de limage 72. De mme, limage 24, nous avons dessin une simplification du serpent de limage 1, simplification visible Figure29.7. Remarquez que les deux formes intermdiaires ont des paisseurs plus voisines et galement comment il suffira de faire se joindre les deux pointes de la premire pour passer la seconde. Le problme tant les mauvais choix dappariements de points de contour que lalgorithme fait automatiquement, une solution envisageable serait de faire de bons choix manuellement, sur des points significatifs des contours. Cest exactement la fonction des repres de formes. Placez-vous limage-cl de dpart. Demandez Modification> Forme> Ajouter un repre de forme. Un petit disque rouge apparat au centre de la forme, contenant la lettre a. Glissez-le alors avec loutil Slection sur un point significatif du contour, plutt dans le coin suprieur gauche de la forme. Vous avez la confirmation que le repre de forme est bel et bien accroch au contour lorsque le disque devient jaune. Dplacez-vous ensuite limagecl darrive. Vous retrouvez au centre de la seconde forme un petit disque rouge contenant la lettre a. Glissez-le sur le point significatif du second contour qui dans votre esprit doit tre appari celui spcifi linstant dans lautre image-cl. Vous avez la confirmation que le repre de forme est bel et bien accroch au contour lorsque le disque devient vert. Cocher loption Afchage> Accrochage> Accrocher aux objets vous facilitera la tche. Tant quil reste un disque rouge, lappariement nest pas fait. Lappariement fait, vous venez de dire Flash je veux que tel point soit transform en tel autre. Revenez limage-cl de dpart et ritrez la procdure avec le repre de formes b. Vous pouvez continuer ajouter des repres de formes jusqu z. Bien que vous ayez droit vingt-
208
Flash CS5
six repres de formes, si moins dune dizaine de font pas laffaire, il est peu probable quen rajouter change grand chose. Dans ce cas, il vaut mieux tout effacer et recommencer avec dautres points. Sachez que les repres de formes auront une meilleure efficacit si vous placez le premier, comme nous lavons dj dit, dans le coin suprieur gauche de la forme et si vous poursuivez dans le sens inverse des aiguilles dune montre.
Figure29.5
Une forme intermdiaire dessine.
La Figure29.6 montre les cinq repres de formes de la premire mtamorphose de notre exemple. Les petits disques sont jaunes puisquil sagit de limage-cl de dpart, limage1. La Figure 29.7 montre ces mmes repres de formes dans limage-cl darrive (petits disques verts), limage 24. Pour visualiser lensemble des repres de formes, cochez loption Affichage> Afficher les repres de formes. Vous pouvez supprimer un repre de formes en le faisant glisser hors de la scne. Ce faisant, vous supprimez bien sr aussi son dual dans lautre image-cl. Si ncessaire, les repres de formes restants sont renomms. Pour tous les supprimer, slectionnez la premire imagecl, puis demandez Modification> Forme> Supprimer tous les repres (la commande existe aussi dans le menu contextuel).
Animation
209
Figure29.6
Dfinition de repres de forme dans limage de dpart.
Figure29.7
Les repres de forme duaux dans limage darrive.
Raccourci
CMd+Maj+H (Mac) ou Ctrl+Maj+H (Windows) ajoute un repre de forme.
210
Flash CS5
Lune des conditions ncessaire mais non suffisante pour que linterpolation de formes fonctionne de manire attendue, est que celles-ci aient la mme topologie. Lesprit de la notion mathmatique de topologie est simple saisir: la dformation prs, sans rupture ni bouclage, les formes de mme topologie sont justement transformables lune en lautre (la topologie nglige la gomtrie, cest--dire les positions, les dimensions, les rotations et les inclinaisons). Un cercle et un carr ont la mme topologie: celle dune boucle. Par contre, un chiffre six et un chiffre huit nont pas la mme topologie: le premier a une boucle, tandis que le second en a deux, donc il est impossible de transformer lun en lautre sans rupture ni bouclage. Lune des faons les plus simples de garantir la mme topologie pour les formes de dpart et darrive, cest de produire vous-mme lune par dformation de lautre: retouche vectorielle (voir Fiche 10), transformation gomtrique (voir Fiche16). Si les deux formes sont dessines indpendamment lune de lautre dans Flash ou en externe puis importes, vous avez moins de chance quelles aient la mme topologie. Par ailleurs, si le nombre dlments dans chacune des deux images diffre, vous avez demble une topologie diffrente et vous pouvez vous attendre des surprises. Toute la difficult de notre exemple de mtamorphose de serpent en papillon rside dans la diffrence de topologie. En effet, le premier est topologiquement homologue un chiffre6 comme lest la forme intermdiaire de limage 24, tandis que le second est topologiquement homologue un chiffre8 comme lest la forme intermdiaire de limage 48. Notez que dans notre exemple, press par le temps, nous avons illustr Figures 29.6 29.8 lutilisation des repres de formes sur la premire des trois mtamorphoses successives, dont les formes de dpart et darrive ont mme topologie. La difficult initiale, bien quayant t diminue, rside toujours dans la seconde mtamorphose, o il sagira de grer le changement de topologie, savoir le fait que ce qui est encore un serpent limage 24 se morde la queue pour former deux ailes de papillon limage 48.
Figure29.8
chantillonnage des images dune mtamorphose.
Mme si vous mettez en uvre toutes les stratgies suggres, sachez que la ralisation dune mtamorphose est un processus laborieux passant par de nombreuses tentatives infructueuses, donc armez vous de patience.
Animation
211
Fiche 30
Animer un masque
Avertissement. Les exemples de cette fiche faisant particulirement appel des notions traites au Chapitre5 (bibliothque, symbole, conversion en symbole, graphique, clip danimation, instanciation, occurrences, dition en place, imbrication), il serait normal quen premire lecture elle vous droute. Tout devrait sclaircir en seconde lecture, aprs que vous ayez tudi le prochain chapitre.
La Fiche23 a montr comment raliser un effet de masque dans Flash. Rappelons brivement quun calque de type Masque dfinit la forme anti-pochoir, tandis quun ou plusieurs calques sont placs sous son influence (type Masqu), ce qui est indiqu par une indentation dans la pile de calques. En verrouillant les calques du masquage, il est possible de visualiser dans lenvironnement leffet de ce dernier. Rappelons galement que le masque peut tre dfini partir de formes vectorielles, de texte ou doccurrences de symboles Graphique ou Clip. Choisissez lun de ces quatre types et composez votre masque uniquement avec des lments de ce type. Si vous mlangez les types dans le masque, les rsultats risquent dtre surprenants. Le contenu du calque de type Masque dfinit un masque binaire. Autrement dit, Flash y ignore les styles de trait, la transparence, les couleurs, les dgrads et les bitmaps. Seule la prsence ou labsence dun pixel compte dans la dfinition du masque. Si vous utilisez des occurrences de symboles, les effets de couleurs seront ignors, seuls compteront pour le masque les effets gomtriques. Le type dinterpolation utiliser pour animer un masque varie selon la nature du masque objet cible. Si celui-ci est constitu de formes vectorielles, il sagira dinterpolation de formes. Dans tous les autres cas (texte, occurrence de symbole graphique ou clip danimation), il sagira dinterpolation de mouvement. Vous pouvez faire appel nimporte quelle technique danimation Flash pour animer un masque, lexception de linterpolation classique guide, puisque des calques Guide et Masque ne peuvent tre utiliss conjointement dans le mme scnario. Nous verrons nanmoins avec le second exemple quil est possible de contourner cette limitation. Le premier exemple met en uvre une mtamorphose de masque pour rvler une collection de papillons partir du centre de la scne. La forme de dpart de linterpolation est une minuscule ellipse et la forme darrive une ellipse en diagonale suffisamment grande pour recouvrir toute la scne. La Figure30.1 prsente un chantillonnage de six images de lanimation finale qui donne une ide de leffet.
212
Figure30.1
chantillonnage de six images de linterpolation classique de masque.
Flash CS5
La ralisation est extrmement simple. Le scnario de lanimation est reproduit Figure30.2. On commence par mettre en place le masquage (voir Fiche 23). Le calque rvlation va contenir lanimation de masque. On lui a donn le type Masque. En dessous, et sous influence du premier, se trouve un second calque collection dans lequel est compose la collection de papillons. Ensuite les deux calques ont t tendus 73 images. limage 1, on a dessin une petite ellipse, que lon a converti en symbole. Une image-cl a t cre limage 73 du calque rvlation. Loccurrence du symbole dellipse a t agrandie en cette seconde image-cl. Pour finir, on a demand la cration dune interpolation classique (voir Fiche 28).
Figure30.2
Limage 32 dun scnario dinterpolation classique de masque.
Animation
213
Pour tester lanimation, il suffit de verrouiller les deux calques pour voir leffet du masquage construit, puis de faire glisser la tte de lecture sur la ligne du temps. La Figure30.3 montre lune des images intermdiaires interpoles.
Figure30.3
Visualisation de leffet de masque limage 32 de linterpolation classique.
Les fichiers sont disponibles dans les exemples du livre: FCS5_30a.fla (masquage statique), FCS5_30b. fla (masque de limage-cl de dpart), FCS5_30c.fla (masque de limage-cldarrive) et FCS5_30d.fla (interpolation classique).
Lexemple incontournable de lanimation de masque selon une trajectoire est leffet de projecteur de poursuite qui balaye une scne dans la pnombre. Vous pouvez vous faire une ide de leffet la Figure30.4 qui prsente un chantillonnage de six images de lanimation finale. Cest limbrication de scnarios (voir Fiche36) qui permet de contourner limpossibilit dutiliser un calque Masque et un calque Guide dans le mme scnario. Le principe est de placer linterpolation classique guide lintrieur dun clip danimation donc dans le scnario imbriqu, puis dinstancier ce symbole clip danimation dans le calque Masque dans le scnario principal.
214
Flash CS5
Si votre lecteur de PDF ne lit pas le Flash, tlchargez lanimation qui suit depuis le site de Pearson. Elle se trouve dans l'archive des exemples du livre (CHAP4 > FCS5_30e.swf). Sinon, cliquez sur les boutons pour la lancer ou larrter.
Figure30.4
chantillonnage de six images du balayage de projecteur sur la collection de papillons.
Le scnario principal de lanimation est reproduit Figure30.5. Remarquons demble que les calques sont rduits une seule image, du fait que lanimation soit imbrique dans un symbole clip danimation. Dans la bibliothque, galement visible sur la figure, un symbole graphique collection est slectionn. Son aperu dans la zone suprieure du panneau montre quil contient la composition des quatorze images bitmap de papillons galement prsentes dans la bibliothque (fichiers PNG).
Les fichiers sont disponibles dans les exemples : FCS5_30f.fla (masquage statique), FCS5_30g.fla (cration des deux symboles disques imbriqus) et FCS5_30h.fla (interpolation classique guide).
Animation
215
Figure30.5
Bibliothque, scnario et scne dune animation de coup de projecteur sur une collection de papillons.
Le symbole graphique collection a t instanci deux fois dans le scnario principal. La premire fois dans un calque darrire-plan collectionAttnue (pour une meilleure lisibilit des scnarios, nous adoptons la convention qui veut que le nom dun calque soit ou contienne le nom du symbole quil instancie), o lopacit de loccurrence a t rgle 20% (voir Fiche37). La seconde fois dans un calque collection en avant-plan du prcdent, o lopacit de loccurrence est cette fois-ci normalement rgle 100%. Un troisime calque disque a t cr par dessus les deux prcdents. On y a dessin un disque (aucune couleur de trait; le noir comme couleur de remplissage). Ce calque disque a reu le type Masque et le calque collection a t gliss sous lui de sorte quil passe sous son influence. ce niveau, la bibliothque ne contenait que le symbole graphique collection et les14 pseudo-symboles images bitmap le composant. Slectionnant le disque, nous lavons converti en symbole disque, en lui donnant le type Clip (voir section Crer des symboles, Fiche 33). Ensuite, ce symbole a t dit en place (voir section dition de symbole, Fiche 33) et le disque tant toujours slectionn dans le scnario imbriqu (reproduit Figure30.6), il a t reconverti en symbole disqImbriqu, toujours de type Clip (cest une occurrence de symbole qui doit tre guide, do la ncessit de ce second symbole de disque, imbriqu dans le premier). Au-dessus du calque disqImbriqu, un nouveau claque trajectoire a ensuite t cr. On y a dessin la trajectoire en spirale. Ce calque trajectoire a reu le type Guide et le calque disqImbriqu a t gliss sous lui de sorte quil passe sous son influence (voir section Interpolation classique guide, Fiche 28).
216
Figure30.6
Flash CS5
Scnario du clip danimation imbriqu contenant linterpolation de la position du masque le long dune trajectoire.
Si votre lecteur de PDF ne lit pas le Flash, tlchargez lanimation qui suit depuis le site de Pearson. Elle se trouve dans l'archive des exemples du livre (CHAP4 > FCS5_30i.swf). Sinon, cliquez sur les boutons pour la lancer ou larrter.
Fiche 31
Animer par cinmatique inverse

Dans Flash CS3 encore, lorsque vous vouliez animer une structure articule, constitue dun certain nombre dlments sous forme de symboles, ctait vous den prendre intgralement en charge la ralisation dans le scnario. Linterpolation de mouvement (classique) pouvait mme difficilement tre mise contribution. Supposons que vous ayez dfini en
Animation
217
deux images-cls deux positions dune jambe, un calque contenant le symbole de la cuisse et un autre celui du mollet. Les deux interpolations oprant simultanment, mais sans communiquer lune avec lautre, rien ne garantirait une cohrence visuelle et il serait tout fait possible quen certaines images intermdiaires la continuit soit rompue au niveau du genou, ce qui ne saurait vous satisfaire. Cela ne vous laissait plus comme solution quune laborieuse et coteuse animation image par image. Flash CS4 avait apport une solution ce type de problmes grce la technique de cinmatique inverse (CI ; on croise dans la documentation IK, lacronyme de Inverse Kinematics). Lutilisation de cette technique dans une animation vous oblige publier pour ActionScript 3 (voir Chapitre12). Les contraintes qui manquaient dans notre exemple prcdent entre lments articuls vont tre spcifies dans un squelette dfini par dessus les occurrences de symboles articuler. Un squelette est compos de segments, lesquels segments sont relis par des articulations. Le squelette que vous construisez doit constituer une arborescence. Cela signifie que le premier segment dfini tant appel segment racine, il ne doit y avoir pour tout autre segment quun seul chemin le reliant au segment racine. Pour le dire autrement, vous ne pouvez pas crer de boucles lors de la dfinition du squelette. Remarquez que votre squelette ne prsentera pas pour autant des fourches deux segments ou plus articuls sur le mme , donc des branches diffrentes, puisquune simple chane est un cas particulier darborescence et rpond parfaitement la dfinition. Flash va plus loin encore en vous permettant de dfinir un squelette lintrieur dune forme pour en permettre la dformation cohrente. Imaginez par exemple que vous ayez dessin le corps dun nageur observ la verticale et que vous souhaitiez illustrer par une animation la squence de mouvements dune nage.
Dfinir un squelette sur des occurrences

Au diable les papillons, cest une chimre que nous allons assembler avant de la doter dun squelette articul. La Figure31.1 montre les dix pices dans la bibliothque, des symboles de type Graphique (voir Fiche34) partir desquels nous allons jouer les apprentis Frankenstein. Sur la scne de lanimation, la chimre est un collage. Comme le montre la Figure31.2, chacune des dix pices fait lobjet dun calque ddi dans lequel est instanci le symbole correspondant. Lordre dempilement des calques est bien sr dterminant: les pattes sont au fond de la pile et les antennes sur le dessus.
218
Flash CS5
Figure31.1
Les dix lments constitutifs de la chimre.
Figure31.2
La composition de la chimre par collage de ses lments constitutifs.
Les fichiers sont disponibles dans les exemples du livre: FCS5_31a.fla (composition de la chimre), FCS5_31b.fla (cration du squelette) et FCS5_31c.fla (dfinition des poses).
Animation
219
Si votre lecteur de PDF ne lit pas le Flash, tlchargez lanimation qui suit depuis le site de Pearson. Elle se trouve dans larchive des exemples : CHAP4 > FCS5_31d.swf. Sinon, cliquez sur les boutons pour la lancer ou larrter.
Il va maintenant sagir de lier ensemble les dix objets. Pour faciliter la mise en place prcise des articulations, il est conseill de dsactiver laccrochage aux objets (Affichage> Accrochage> Accrocher aux objets, voir section Aides au dessin et la composition, Fiche 7). Cest loutil Segment qui sert dfinir le squelette. Son icne, cela va de soi, est un os. La Figure31.3 montre que loutil partage son menu avec loutil Liaison, dont il sera question plus loin. Aprs que vous ayez slectionn loutil Segment, le pointeur de souris prend la forme dun os noir orn dun plus. Lorsque vous survolez un objet sur lequel il nest pas possible daccrocher un segment (un objet qui nest pas occurrence de symbole, une image bitmap par exemple), ou lorsque vous tes en dehors de tout objet, los noir sorne dun cercle barr. Lorsque vous survolez un objet sur lequel il est possible daccrocher un segment, los et le signe plus qui lorne sinversent en blanc.
Figure31.3
Loutil Segment et ses diffrents pointeurs.
Raccourci
X slectionne loutil Segment.
Pour travailler confortablement, vous pouvez ne garder visibles sur la scne que les objets utiles. Dans le scnario de la Figure31.4, on na conserv que le bas du corps et les pattes. Ensuite, pour travailler avec prcision, il est bon de zoomer sur la partie utile de la scne.
220
Flash CS5
Cliquez sur loccurrence qui sera racine du squelette dans notre exemple, il sagit de loccurrence du symbole patteD. Glissez ensuite jusqu une autre occurrence pour crer le segment qui les relie, puis relchez dans notre exemple, sur loccurrence du symbole corpsB. Dans le mode daffichage par dfaut, un segment est reprsent par une pointe qui dnote lorientation du segment. lextrmit large de la pointe, se trouve la tte du segment, qui est le point de transformation du segment et devient aussi celui de loccurrence attache (cest donc le point autour duquel ils vont pivoter). La tte du segment racine est donc le point de fixation de lensemble du squelette. Si vous ne souhaitez pas ces modifications automatiques des points de transformation, il suffit de dcocher la dernire option des prfrences, catgorie Dessin. lextrmit fine de la pointe, se trouve la queue du segment. Le point de transformation de loccurrence relie par un segment terminal du squelette est la queue de ce segment. Aux deux extrmits, les cercles reprsentent des articulations (langlais joint, qui signifie en anatomie une articulation, est malheureusement traduit par liaison). Celle de la racine du squelette est dnote par un cercle concentrique supplmentaire. En observant attentivement le scnario de la Figure 31.4, on remarque lapparition dun nouveau calque Squelette_1. Dautre part, les calques des deux objets impliqus dans le segment trac patte D et corps B sont dsormais vides de contenu. Les deux occurrences ont en fait t automatiquement transfres au calque Squelette_1, dit calque de pose. Ce nouveau calque de pose a t cr un endroit de la pile de calques qui permet de respecter lordre dempilement initial des objets sur la scne. Un calque de pose est dnot par une plage dimages sur fond vert et, dans la pile de calques, par une icne de personnage en mouvement. Il ne peut y avoir quun seul squelette par calque de pose. Si vous crez dautres squelettes, en traant des segments non connects ceux existant, vous verrez apparatre des calques de pose Squelette_2, Squelette_3, etc. Comme un calque dinterpolation (voir section Nouvelle approche de linterpolation dans Flash, Fiche 27), un calque de pose nest pas ditable :vous ne pouvez pas y dessiner, ni directement y ajouter des lments provenant dautres calques. Le calque de pose ne senrichit quau fur et mesure que vous ajoutez des segments au squelette. Notez enfin quun calque de pose ne peut recevoir un guide de mouvement (voir section Interpolation classique guide, Fiche 28). Continuez construire votre squelette. Au fur et mesure, rendez visibles les lments utiles. Procdez par cliquer-glisser sur la scne, comme prcdemment. Veillez seulement bien repartir dun segment existant, dfaut de quoi vous creriez un nouveau squelette sur un calque de pose spar. Il est parfois difficile de cliquer sur une occurrence de symbole, lorsque les rectangles englobants des autres recouvrent le sien. Dans ce cas, dplacez momentanment celle qui masque laide dune touche flche, touche Maj enfonce, pour translater de 10 pixels chaque fois, afin de pouvoir crer le segment, puis faites la translation inverse pour restaurer la composition initiale. Une autre difficult que vous rencontrerez, est quune fois articules
Animation
221
par des segments, les occurrences de symboles ont tendance toutes bouger un peu lorsque vous en dplacez une.
Figure31.4
Trac du segment racine.
Il y a deux faons de greffer le nouveau segment sur un segment existant. En cliquant sur la queue de ce dernier, vous chanez les deux. En cliquant sur la tte du segment existant, vous crez une fourche. La Figure31.5 montre une arborescence complte possible du squelette de la chimre. Le segment corpH_tte et le segment tte_antenneG sont enchans: le second a t cr en cliquant sur la queue du premier. Le segment corpH_tte et le segment corpH_brasG forment une fourche: le second a t cr en cliquant sur la tte du premier.
Figure31.5
Larborescence du squelette de la chimre.
tte bras G bras D corps B corps H
antenne G
antenne D
patte D
queue
patte G
222
Flash CS5
La Figure 31.6 montre notre chimre articule selon le schma de la Figure 31.5. Sur la scne un cercle pais dnote la racine de larborescence. Dans le scnario, remarquez que tous les calques lexception du calque de pose sont dsormais vides. Le squelette et les occurrences quil articule sont rendus visibles sur la scne en cliquant sur nimporte quelle image de la plage du calque de pose.
Figure31.6
Le squelette de la chimre.
Lorsque le calque de pose est slectionn, comme la Figure31.6, le panneau Proprits affiche les proprits du squelette, reproduites Figure31.7. Le mode daffichage du squelette se rgle dans le menu Style du sous-panneau Options. Le mode par dfaut, stupidement traduit par Uni, devrait en fait sintituler Plein. En effet dans le mode Filaire, les pointes ne sont plus remplies et il nen subsiste que les traits, tandis que dans le mode Ligne, chaque pointe est remplace par un simple segment de droite, ce qui fait perdre lindication du sens du segment de squelette. Lorsque le squelette est slectionn, tous les segments sont rendus avec la couleur de calque spcifie en regard du nom du calque de pose. Libre vous den changer (voir section Lenvironnement au service de la complexit, Fiche 22). Si vous cliquez maintenant sur un segment sur la scne, celui-ci est slectionn et est rendu avec la couleur complmentaire de la couleur de calque. Comme il se doit, le panneau Proprits affiche les proprits du
Animation
223
segment. La premire dentre elles est le nom du segment. Au fur et mesure de la construction, Flash attribue automatiquement des noms Segment_1, Segment_2, etc. Vous avez tout intrt donner vos segments des noms plus parlants. La Figure 31.8 montre que nous avons opt pour la convention de nommage suivante: nom du symbole sous-jacent loccurrence de tte du segment, suivi du caractre soulign, suivi du nom du symbole sousjacent loccurrence de queue du segment.
Figure31.7
Les proprits du squelette.
Figure31.8
Navigation dans larborescence du squelette de la chimre.
En informatique, ds que lon manipule une arborescence, lhabitude est dutiliser un vocabulaire gnalogique pour dcrire les positions relatives des nuds de celle-ci les occurrences de symboles dans notre cas. Les termes de parent, enfant, frre, descendants, ascendants se passent de dfinition. Lorsquun segment est slectionn, en haut droite du panneau Proprits se trouvent quatre boutons qui permettent de naviguer dans larborescence du squelette. Ces quatre boutons sont de gauche droite respectivement Frre prcdent, Frre suivant, Enfant et Parent. Selon le contexte, ils peuvent tre griss et dsactivs
224
Flash CS5
lorsquils nont aucune pertinence. La Figure31.8 montre un parcours complet de larborescence du squelette de la chimre. Il commence par le segment tte_antenneG, puis de gauche droite et de haut en bas, chaque tape un cercle indique quel bouton a permis de passer au segment suivant. Vous pouvez suivre le parcours sur la Figure31.5. Dfinir le squelette est une opration dlicate qui vous demandera parfois de vous y reprendre plusieurs fois. Par scurit, et dans lventualit o vous voudriez revenir facilement lune de vos tapes (lhistorique ne persiste pas dune session de travail la suivante), il est prudent denregistrer celles-ci sous diffrents noms.
diter le squelette
Nanmoins, rien ne vous oblige, mme si cela est souhaitable, crer du premier coup le squelette qui convient. Une fois construit, un squelette peut tre dit. Une condition ncessaire pour pouvoir le faire est de navoir dfini dans le calque de pose aucune autre pose que la pose initiale (les poses seront traites la section suivante). Si tel ntait pas le cas, avant de modifier la structure des segments, vous devriiez supprimer de la plage de cinmatique inverse toutes les poses autres que celle de la premire image. Voyons tout dabord comment slectionner les diffrents constituants dun squelette: Squelette. Nous avons vu prcdemment que le clic, dans le scnario, dans la plage de cinmatique inverse du calque de pose slectionne lensemble des segments dun squelette (rendus avec la couleur de calque), ainsi que toutes les occurrences de symboles quil articule. Vous pouvez galement double-cliquer sur lun deux avec loutil Slection. Dans ce cas, tous les segments sont slectionns et le panneau Proprits (voir Figure31.7) donne les valeurs des proprits qui sont communes tous. Sont galement slectionnes les occurrences de symboles dont le rectangle englobant contient le point double-cliqu. Segment. Pour slectionner un segment particulier, cliquez-le avec loutil Slection. Il est rendu avec la couleur complmentaire de celle du calque et le panneau Proprits donne les proprits du segment (voir Figure31.19). Selon que le point cliqu se trouve dans le rectangle englobant de lune ou des deux occurrences de symboles relies par le segment, vous slectionnez en mme temps une ou deux occurrences de symboles. Dans le cas o une seule des deux se trouve slectionne, ajoutez la seconde la slection en cliquant nouveau sur le segment, mais cette fois-ci sur un point lintrieur du rectangle englobant de la seconde occurrence de symbole. Comme le montre la Figure31.8, partir de nimporte quel segment vous pouvez dplacer la slection vers nimporte quel autre segment du squelette en naviguant grce aux boutons Frre prcdent, Frre suivant, Enfant et Parent du panneau Proprits. Occurrence de symbole. Cliquez loccurrence avec loutil Slection en dehors de tout segment. Le panneau Proprits donne les proprits de loccurrence. Aucun segment nest slectionn.
Animation
225
loccasion, vous aurez besoin de procder une suppression: Squelette. Comme le montre la Figure31.9, la premire commande du menu contextuel dun calque de pose est Supprimer le squelette. Cest elle quil faut utiliser si vous voulez supprimer le squelette sans supprimer les occurrences de symboles quil articule. En effet, si vous avez slectionn le squelette en cliquant dans le calque de pose, puis que vous enfoncez la touche sUppr, vous videz intgralement le calque de pose de son contenu, squelette et occurrences de symboles. Aprs suppression du squelette, souvent pour en reconstruire un autre, vous vous retrouvez avec toutes les occurrences de symboles dans un unique calque. Pour garantir un ordre dempilement correct une fois le nouveau squelette construit, il est prudent de replacer chacune dans son propre calque (Modification> Scnario> Rpartir vers les calques). dfaut, vous aurez peuttre des surprises, mais il suffira de rarranger lempilement via les commandes du menu Modification> Rorganisation (voir section Utilisation des calques, Fiche 22). Encore une raison supplmentaire pour faire des sauvegardes dtapes intermdiaires sous diffrents noms.
Figure31.9
Le menu contextuel dun calque de pose.
Segment. Lorsquun segment est slectionn, appuyez sur la touche sUppr pour le supprimer, ce qui supprime du mme coup tous ses segments descendants. Occurrence de symbole. La suppression dune occurrence dconnecte les descendants, la fois du reste du squelette et entre eux. Diverses oprations de repositionnement sont possibles au cours desquelles des longueurs de segments du squelette changent: Articulation. Dans les exemples qui suivent nous allons partir du squelette de jambes visible dans la partie gauche de la Figure31.10. Ce squelette articule un bassin, deux hanches, deux cuisses, deux mollets et deux pieds, tous schmatiss par des ellipses. Toute occurrence de symbole possde un point de transformation unique. Nous avons dit plus haut que lors de la construction du squelette, ce point de transformation de loc-
226
Flash CS5
currence de symbole et du ou des segments qui en partent est fix par dfaut la tte du segment. Vous pouvez nanmoins le modifier laide de loutil Transformation libre. La partie droite de la Figure31.10 en montre un exemple: le point de transformation qui se trouvait initialement en haut de la cuisse (cercle rempli de blanc) est dplac un peu en dessous du point dalignement du symbole, au centre de son rectangle englobant. Dans les parties droites des Figures 31.12, 31.13 et 31.14, les oprations sont effectues sur cette version du squelette. On y voit clairement que larticulation sest dplace avec le point de transformation et que par voie de consquence la longueur des deux segments qui sy articulent a chang. On voit galement sur ces figures que le choix du point de transformation donc darticulation est crucial pour la cohrence visuelle de lensemble articul. Cette tape essentielle peut savrer assez laborieuse, puisque repositionner le point de transformation dune occurrence de symbole fait souvent bouger les autres.
Figure31.10
Dplacement dune articulation laide de loutil Transformation libre.
Occurrence de symbole. En faisant glisser une occurrence de symbole laide de loutil Transformation libre, vous dplacez celle-ci indpendamment des autres occurrences de symboles du squelette. Vous pouvez galement la faire glisser avec lun des outils Slection ou Segment, tout en maintenant la touche CMd (Mac) ou alt (Windows) enfonce. La Figure31.11 en donne un exemple. On y voit que mme si aprs dplacement loccurrence est visuellement dconnecte, les articulations avec ascendants et descendants persistent, au prix dun allongement des segments connects loccurrence de symbole dplace.
Figure31.11
Dplacement dune occurrence de symbole laide de loutil Transformation libre.
Animation
227
Animer partir de diffrentes poses du squelette

Le squelette tant maintenant dfini et ventuellement retouch, il va sagir de lanimer. La premire chose faire est de crer la plage de cinmatique inverse de longueur voulue. Placez pour cela la tte de lecture sur la dernire image souhaite pour la plage et crez-y une image (raccourci clavier usuel F5). Toutes les techniques efficaces danimation dans Flash ont en commun linterpolation. Plus prcisment, votre travail consiste faire des spcifications en certaines images, spcifications partir desquelles le lecteur Flash calculera la vole les images intermdiaires. En interpolation de mouvement (voir Fiche 27), ces images que vous spcifiez sont des images contenant une ou plusieurs images-cls de proprits. En interpolation classique (voir Fiche28) ou en interpolation de formes (voir Fiche29), ces images sont des imagescls. La cinmatique inverse fonctionne galement par interpolation. Les images que vous spcifiez dans une plage de cinmatique inverse sappellent des images de poses. En interpolation de mouvement, pour crer une image-cl de proprit, il suffit de dplacer la tte de lecture limage voulue, puis de modifier la valeur de la dite proprit. Cest la mme simplicit de principe qui prvaut en cinmatique inverse: dplacez la tte de lecture limage voulue, puis avec lun des outils Slection ou Segment, repositionnez le squelette sur scne. Cela se fait simplement en faisant glisser les segments et/ou les occurrences de symboles sur lesquelles ils sont attachs. Il ne sagit plus comme prcdemment (voir Figures 31.10 et 31.11) de modifier le squelette, mais de faire jouer sa structure articule. En consquence, les longueurs de segments restent cette fois-ci fixes, mais les occurrences de symboles pivotent aux articulations. La Figure31.12 illustre un repositionnement du squelette en faisant glisser loccurrence du symbole dune cuisse. La Figure31.13 illustre un repositionnement du mme squelette en faisant glisser le segment partant de loccurrence du symbole de cuisse. Le comportement est le mme dans les deux cas. Dans le cas o un seul segment part dune occurrence de symbole, agir sur lui ou sur loccurrence de symbole revient au mme. La Figure31.14 aurait pu tre redouble dune figureanalogue montrant le glisser de loccurrence du symbole de la cuisse touche Maj enfonce. Ne considrons donc plus que les cas o nous nous agissons sur un segment. Vous avez deux faons de procder. La premire consiste simplement glisser un segment. Les articulations impliques sont celles de la tte du segment gliss, ainsi que toutes celles des ventuels segments ascendants celles de la cuisse, de la hanche et du bassin (jambe de gauche) dans les exemples de la Figure31.13. Sur cette figure, et particulirement droite du fait de la rupture de continuit visuelle, il est clair que les articulations successives des segments descendants du segment gliss ne jouent pas. Les angles de rotation y restent figs.
228
Flash CS5
Figure31.12
Glisser de loccurrence du symbole de la cuisse: la hanche se dplace avec elle.
Figure31.13
Glisser du segment partant de la cuisse: la hanche se dplace avec lui.
En faisant glisser le segment, vous repositionnez avec lui tous ses segments descendants et ascendants. Tous les autres segments du squelette autres descendantsventuels du segment gliss ou de ses ascendants restent en place. Les occurrences de symboles sur lesquelles pointent les segments repositionns sont bien sr repositionnes avec eux. Dans les exemples de la Figure31.13, il sagit des quatre segments de la jambe et des quatre occurrences de symboles sur lesquelles ils pointent: la hanche, la cuisse, le mollet et le pied. Dans le cas particulier o larborescence est une simple chane (une seule branche, aucune fourche), vous repositionnez tous les segments du squelette en en faisant glisser un seul. La seconde faon de procder consiste glisser un segment touche Maj enfonce. La seule articulation implique est celle de la tte du segment gliss celle de la cuisse dans les exemples de la Figure31.14. En faisant glisser le segment, vous repositionnez avec lui tous ses segments descendants. Tous les autres segments du squelette les ascendants, les autres descendants ventuels du segment gliss ou de ses ascendants restent en place. Loccurrence de symbole de laquelle part le segment gliss est repositionne, ainsi que toutes celles sur lesquelles pointent les segments repositionns, qui sont repositionnes avec eux. Dans les exemples de la Figure31.14, il sagit du segment gliss et de son unique descendant. Aux deux occurrences de symbole sur lesquelles ces derniers pointent, le mollet et le pied, il faut ajouter loccurrence de laquelle part le segment gliss: la cuisse.
Animation
229
Figure31.14
Glisser du segment partant de la cuisse touche Maj enfonce: la hanche reste en place.
Maintenant que vous savez comment spcifier des poses diffrentes du squelette, il suffit de placer la tte de lecture successivement aux images voulues et dy spcifier une pose. Dans le scnario, lexistence de ces poses est dnote par de petits losanges noirs. Les images qui en sont dpourvues sont des poses intermdiaires calcules la vole. Vous pouvez comme dhabitude les visualiser rapidement en faisant glisser la tte de lecture sur la ligne de temps, dans un sens ou dans lautre, ou en utilisant les autres techniques dcrites section Prvisualiser une animation, Fiche 26. La Figure31.15 montre le scnario de lanimation de la chimre. Aux images 1 et 73, la pose est celle initialement compose (voir Figure31.2). limage 30, la chimre est dans une pose de salut respectueux et limage 45, elle est dans une pose dtirement, bien mrit aprs tous ces efforts.
Figure31.15
Le scnario de lanimation de la chimre avec ses quatre images de poses.
Dans un calque de pose, il y a bel et bien de linterpolation, mais elle ne porte que sur les positions et les orientations. Vous ne pouvez interpoler ni les tailles, ni les effets de couleur, ni les filtres dans un calque de pose. Il faut imbriquer lanimation dans un symbole clip danimation pour lui appliquer globalement ce type dinterpolations. La Figure31.16 offre un chantillonnage de huit images de lanimation de la chimre. Le numro de limage est indiqu pour chacune delles. Pour les images de poses, le numro figuredans un losange. Les images dpourvues de losange sont donc des images de poses intermdiaires, interpoles par cinmatique inverse. Signalons que le squelette nest pas celui des Figures 31.5 et 31.6, qui senracine partir du haut du corps. Le squelette effectivement utilis dans cette animation senracine partir de la patte droite, comme sur la Figure31.4. Il est visible la Figure31.18.
230
Figure31.16
chantillonnage de huit images de lanimation de la chimre par cinmatique inverse.
Flash CS5
Lanimation en place dans le scnario, il faudra sans doute laffiner. Comme pour nimporte quelle technique danimation, la temporisation est affaire ddition du scnario: Insrer une image, Supprimer les images, ventuellement Inverser les images. Toutes ces commandes se trouvent dans le menu contextuel dun calque de pose (voir Figure31.9). Leur fonctionnement est le mme que pour leurs homonymes du menu contextuel des images dun calque normal. Modifier la longueur dune plage de cinmatique inverse se fait comme pour une plage dinterpolation de mouvement. Aux extrmits, le pointeur de souris se transforme en double flche. Faites glisser dans un sens ou dans lautre pour augmenter ou rduire la dure. L encore, les images des poses intermdiaires changent de manire ce que les sous-plages dinterpolation gardent entre elles approximativement les mmes proportions que dans la plage dorigine. Lorsque vous cliquez dans une plage de cinmatique inverse, vous la slectionnez. Si vous CMd+cliquez (Mac) ou Ctrl+cliquez (Windows), vous slectionnez limage. En CMd+glissant (Mac) ou Ctrl+glissant (Windows) vous pouvez mme slectionner plusieurs images conscutives de la plage. Une image de pose peut tre dplace par simple cliquer-glisser, dans la limite des image de poses prcdente et suivante. Si vous cliquez sur une image de pose, vous la slectionnez contrairement aux images intermdiaires, sans devoir CMd+cliquer (Mac) ou Ctrl+cliquer (Windows). La dernire section du menu contextuel dun calque de pose contient les commandes Copier la pose, Couper la pose et Coller la pose. Slectionnez limage de pose source, copiez ou coupez, puis slectionnez limage cible, enfin collez. Le copier-coller est trs utile pour crer deux poses successives identiques, ce qui permet dinsrer une sous-plage statique dans la plage anime par cinmatique inverse. Il ny a aucune interpolation entre deux poses identiques et le squelette, donc le graphisme articul, restent fixes.
Animation
231
Ce mme menu (Figure 31.9) offre une commande Insrer une pose qui vous permet de convertir une image intermdiaire en image de pose. Vous pouvez aussi positionner la tte de lecture sur limage intermdiaire et utiliser le raccourci clavier usuel de cration dune image-cl: F6. Dans le menu vient ensuite la commande Effacer une pose (qui devrait sintituler Effacer la pose). Il suffit de slectionner celle-ci avant dappeler la commande, qui pas plus que sa cousine Effacer limage-cl, nefface limage. Faites tout pour ne pas avoir utiliser cette commande. En effet, effacer une pose fait souvent bouger les occurrences dans les poses restantes, ce qui vous oblige un laborieux travail de remise en place de toutes les pices articules. La dernire commande du menu nest pas nouvelle, puisque nous lavons dj rencontre pour les autres types dinterpolations: Convertir en animation image par image. Rappelons quelle peut servir dgrossir une animation image par image. Ayez bien conscience de ce que vous faites: ce faisant, vous perdez tout le bnfice li linterpolation et linstanciation de symboles. Linterpolation par cinmatique inverse peut faire lobjet dune acclration. Si lditeur de mouvement nest pas utilisable, la Figure31.17 montre que vous avez nanmoins accs quatre variantes de deux acclrations basiques que lon trouve dans celui-ci (voir section Lditeur de mouvement, Fiche 27): Simple et Arrter et dmarrer. Comme pour les acclrations de lditeur de mouvement, un champ numrique Intensit vous permet de doser leffet. Comme toujours, sa valeur par dfaut est 0 et peut prendre toute valeur entre 100 et +100. Si vous slectionnez une image intermdiaire (respectivement une image de pose), lacclration affecte les images se trouvant entre la pose prcdente (respectivement la pose) et la pose suivante.
Figure31.17
Le sous-panneau Acclration des proprits du squelette.
232
Flash CS5
Contraindre les mouvements aux articulations

Une chimre a beau tre une chimre, comme le montre la Figure31.18, toutes les poses possibles par rotations des segments dun squelette ne sont pas pour autant les bienvenues. Il serait bon de limiter les possibilits. Flash vous permet de contraindre les valeurs dangles possibles aux articulations.
Figure31.18
Toutes les poses possibles dun squelette ne sont pas forcment souhaitables.
Lorsque vous slectionnez un segment du squelette, vous trouvez dans le panneau Proprits les proprits de larticulation la tte de ce segment (ce qui a ses limites: dans le cas o plusieurs segments sarticulent au mme point, les contraintes sont ncessairement communes tous): un paramtre de souplesse, ainsi que des tolrances et contraintes de rotation et de translation en X et en Y, comme le montre la Figure31.19. Le paramtre de Vitesse est quelque peu intrus dans un sous-panneau intitul Emplacement. Parler de la vitesse dune articulation na aucun sens. Ce paramtre peut recevoir une valeur de 0 200%, valeurs correspondant respectivement la plus grande difficult et la plus grande facilit de rponse de larticulation. Ce paramtre est en fait linverse de linertie, de la duret ou viscosit de larticulation. Il ne devrait pas sintituler Vitesse, mais Souplesse. Le sous-panneau Liaison : Rotation qui devrait sintituler Articulation : Rotation sert contraindre dans un intervalle les valeurs possibles pour langle de rotation du segment. Par dfaut, la case Activer est coche, ce qui signifie que la rotation en cette articulation est tolre. Si ce nest pas dj le cas, cochez-la. Ensuite, cocher Contraindre vous donne accs aux champs Min et Max, qui acceptent des valeurs en degrs. Ne vous souciez pas si vos souvenirs de mathmatiques sont vapors, car au fur et mesure que vous faites glisser la valeur dun champ, sur la scne un secteur angulaire vous permet de visualiser lintervalle de contrainte de rotation. Cet indicateur est illustr Figure31.20.
Animation
233
Figure 31.19
Les proprits dune articulation: souplesse, tolrance et contraintes la rotation et aux translations du segment.
Figure31.20
Le secteur angulaire de contrainte de la rotation au niveau dune articulation (zoom 400%).
Le principe est le mme pour la tolrance la translation dans les deux directions X et Y (voir Figure 31.21). Commencez par dsactiver la contrainte de rotation, ce qui fait disparatre lindicateur angulaire. Par dfaut, la translation dun segment nest tolre ni en X, ni en Y. Activez donc ensuite, lune et/ou lautre des contraintes de translation dans les
234
Flash CS5
sous-panneaux Articulation: Translation X et Articulation: Translation Y. Des flches apparaissent. Cochez Contraindre, puis spcifier lintervalle de tolrance dans les champs Min et Max. Sur scne, le segment indicateur se met jour instantanment. Si vous dsactivez les trois mouvements pour un segment, celui-ci est fig et suit le mouvement de son segment parent.
Figure31.21
Les segments de contrainte des translations au niveau des articulations (zoom 400%).
Ces options de tolrance la rotation et aux translations peuvent tre utiles lorsque vous voulez dplacer sur la scne lensemble de votre graphisme articul sur la scne (il ne sagit pas ici du repositionnement voqu la section Animer partir de diffrentes poses du squelette de la prsente fiche, pour la spcification de poses en certaines images, mais dun dplacement global). Le temps du dplacement du segment racine, supprimez la tolrance la rotation et activez la tolrance aux deux translations. Une fois que le squelette est au bon emplacement, vous pouvez dcocher loption Activer dans les deux sous-panneaux Translation et la cocher dans le sous-panneau Rotation. Jouez galement avec ces tolrances pour limiter les effets de bord du repositionnement dun segment sur les autres.
Offrir linteraction
Dans ce que nous avons fait jusqu prsent, la structure articule dfinie par le squelette na jou que dans lenvironnement de ralisation, lorsque nous avons spcifi les diffrentes poses. lexcution, le lecteur Flash interpole les poses intermdiaires par cinmatique inverse, mais lanimation est fige, au sens o elle est strictement la mme dune relecture la suivante.
Animation
235
Il est nanmoins possible de faire jouer la structure articule lexcution et de permettre linternaute dinteragir avec le graphisme. Il y a des conditions cela : dune part, le squelette doit articuler des occurrences de symboles clips danimation (ni graphiques, ni boutons, voir Fiche33) ou des formes (voir section suivante) et, dautre part, la plage de cinmatique inverse ne doit contenir que la pose initiale dans la premire image. Pour rendre interactif votre graphisme articul (sans aucun code ActionScript), slectionnez le squelette en cliquant dans la plage de cinmatique inverse du scnario, puis dans le souspanneau des proprits (voir Figure31.22), choisissez Excution pour le Type. La valeur par dfaut de ce Type est Heure de cration. Nous avons l encore une de ces perles de traduction stupide dont la version franaise de Flash a le secret: langlais authortime devrait tre rendu par Ralisation.
Figure31.22
Le sous-panneau Acclration des proprits du squelette.
Si cette fonctionnalit parat attractive, elle est double tranchant. En effet, lorsque vous manipulerez votre squelette articul dans lenvironnement de ralisation, vous vous apercevrez vite que toutes ses poses ne sont pas pertinentes (voir Figure31.18), do le risque quil y a le livrer linteraction de linternaute. La chose nest viable que si vous contraignez minutieusement toutes les articulations (voir la section prcdente), de sorte que vous contrliez un minimum la combinatoire des poses possibles.
Dfinir un squelette dans une forme

Avec la cinmatique inverse sur les formes, le squelette nest plus dfini par dessus des occurrences de symboles, mais lintrieur dune forme ou dun ensemble de formes vectorielles. Si prcdemment il sagissait dinterpolation contrainte par la structure articule, des positions et orientations des occurrences de symboles, ici il sagit de mtamorphose, dinterpolation contrainte par la structure articule, de formes. La forme dont vous partez peut indiffremment avoir t cre en mode de fusion de dessins ou en mode de dessin dobjet (voir Fiche 8). Vous pouvez aussi partir des formes vectorielles des caractres dun texte, aprs avoir spar celui-ci deux reprises (commande
236
Flash CS5
Modification> Sparer; voir Fiche50). Il ny a a priori pas de restriction sur la forme: elle peut tre compose de plusieurs traits et avoir diffrentes couleurs. Souvent, le dessin que vous voulez articuler est un ensemble de traits et de formes. Le dessin de la vipre de la Figure31.23 comprend un trait pour le corps, deux autres pour chacun des yeux, une premire forme pour la langue et une seconde pour le remplissage du corps. Dans ce cas, avant de tracer le premier segment du squelette, vous devez slectionner lensemble des traits et formes cibls. Le plus simple pour cela est sans doute de glisser un rectangle de slection autour de lensemble. Inutile dimbriquer lensemble dans un groupe (voir Fiche32) ou dans un symbole (voir Fiche33), car la cinmatique inverse de formes ne fonctionne que sur des formes vectorielles. Au moment o vous tracez le premier segment de squelette, lensemble des traits et formes est converti en une forme CI (cinmatique inverse) et transfr sur un calque de pose automatiquement cr. Le calque de pose ne peut contenir quune seule forme CI. Une forme CI possde ses propres points denregistrement et de transformation et son propre rectangle englobant. Elle ne peut plus fusionner avec dautres formes. Elle nest pas ditable au sens o vous ne pouvez plus lui ajouter de nouveaux traits ou de nouvelles formes. Nanmoins, les traits existants restent ditables. En dehors de ltape de slection pralable mentionne ci-dessus, la cration dun squelette de forme CI ne diffre en rien de celle dun squelette darticulation doccurrences de symboles (voir section Dfinir un squelette sur des occurrences, mme fiche). Il est galement conseill de zoomer pour pouvoir placer prcisment les segments. Le squelette doit encore tre une arborescence, donc ne prsenter aucune boucle. Il peut navoir quune seule branche chane ou bien des fourches, donc plusieurs branches. premire vue, le squelette dun serpent est une chane. Nanmoins, si vous regardez bien la Figure31.23, vous constaterez que le squelette construit est bel et bien arborescent: sa racine se trouve derrire la tte, de laquelle partent deux branches. La premire, vers lavant, na quun segment vers la bouche. La seconde, vers larrire, est une chane de segments jusqu la queue. Bien videmment, plus vous crerez de segments et plus leur articulation pour crer les poses sera affaire de patience (mot que nous avons dj employ propos de la mtamorphose de formes). Une fois votre squelette construit, vous pouvez le dplacer dans son ensemble en le slectionnant, puis en modifiant ses coordonnes X et Y dans le panneau Proprits. Une autre possibilit consiste OptiOn+glisser (Mac) ou alt+glisser (Windows) avec loutil Sousslection. Avec loutil Transformation libre, vous pouvez galement dplacer ou faire pivoter lensemble du squelette. Comme prcdemment, la touche sUppr supprime le segment slectionn et tous ses descendants. Reportez-vous la section Animer partir de diffrentes poses du squelette, mme fiche, pour les diverses oprations ddition dun squelette. Notez cependant une opration impossible sur unsquelette articulant des occurrences de symboles: laide de loutil Sousslection, vous pouvez dplacer les articulations par glisser-dposer.
Animation
237
Figure31.23
Le squelette de cinmatique inverse dune vipre.
Si le squelette ne donne vraiment pas satisfaction, vous pouvez le supprimer via la commande Modification> Sparer. La forme CI redeviendra une forme standard. Vous ne revenez pas la forme initiale, mais celle de la pose actuelle, avec parfois quelques surprises. Le conseil dj donn denregistrer les tapes successives de votre travail sous diffrents noms est encore de mise ici: il sera souvent plus simple de repartir de lun de ces fichiers. Linterpolation par cinmatique inverse peut, ici aussi, faire lobjet dune acclration (voir la fin de la section Animer partir de diffrentes poses du squelette de la prsente fiche). Les articulations dun squelette de forme CI peuvent tre contraintes de la mme faon quun squelette sur des occurrences de symboles (voir section Contraindre les mouvements aux articulations, cette fiche). De mme, il peut tre offert linteraction (voir section Offrir linteraction, cette fiche). Comme prcdemment, ldition de la forme CI nest possible aprs construction du squelette que si le calque de pose ne contient que la pose initiale dans la premire image. La cration de formes poses fonctionne elle aussi comme prcdemment: vous repositionnez les segments avec loutil Slection. Les formes poses, comme toutes formes vectorielles, peuvent tre dites principalement avec loutil Sous-slection. En cliquant sur le trait de la forme CI avec loutil Sous-slection, les points de contrle des contours saffichent. Pour dplacer un point de contrle, glissez-le avec loutil Sous-slection. Pour ajouter un point de contrle, cliquez sur le trait de la forme CI avec loutil Sous-slection en dehors de tout point de contrle, ou utilisez loutil Plume ddi (voir section Courbe avec loutil Plume, Fiche10). Pour supprimer un point de contrle :slectionnez-le avec loutil Sous-slection, puis enfoncez la touche sUppr, ou utilisez loutil Plume ddi. Vous pouvez galement cliquer-glisser une articulation avec loutil Sous-slection. Reportez-vous la section Retravailler la courbe au niveau des points de contrle, Fiche 10 pour un traitement complet de loutil Sous-slection, ainsi quaux sections Modifier les attributs de trait et Modifier les attributs de remplissage, Fiche 15, pour ldition laide des outils Encrier et Pot de peinture.
238
Flash CS5
Beaucoup de personnes tordent le cou dune vipre lorsquelles en croisent une. La Figure31.24 tendrait montrer que cest aussi ce que fait la cinmatique inverse sur les formes lorsquelle est livre elle-mme. Par dfaut, les points de contrle de la forme CI sont automatiquement relis au segment le plus proche du squelette. La dformation de la forme produite par articulation du squelette est alors rarement satisfaisante. Cest l quintervient loutil Liaison, qui se trouve dans le mme menu droulant que loutil Segment (voir Figure31.3). Cet outil sert diter les dpendances entre points de contrle et segments (relations un plusieurs, dans un sens et dans lautre). Lorsque vous cliquez sur un segment (respectivement sur un point de contrle) avec loutil Liaison, vous slectionnez les points de contrle (respectivement les segments) relis ce segment (respectivement ce point de contrle). Llment cliqu saffiche en rouge, les lments de lautre type qui y sont relis saffichent en jaune, tandis que ceux qui ny sont pas relis restent en bleu.
Figure31.24
Livre elle-mme, la cinmatique inverse sur les formes peut faire mal.
Sur la Figure31.25, le segment de gauche a t cliqu avec loutil Liaison. Les points de contrle lis ce segment saffichent en jaune, soit tous ceux visibles sur la figure, sauf un lextrme gauche et trois sur la droite. Le carr dnote un point de contrle li un seul segment; le triangle, un point de contrle li plusieurs segments. Les points de contrle lis au segment cliqu saffichent non seulement en jaune, mais leurs carrs et triangles sont plus gros et dun trait plus pais que les autres.
Figure31.25
Utilisation de loutil Liaison sur un segment.
Animation
239
Sur la Figure31.26, lunique point de contrle dnot par un triangle a t cliqu avec loutil Liaison. Il est affich en rouge, plus gros et dun trait plus pais. Effectivement, il est li aux deux segments visibles sur la figure, lesquels sont affichs en jaune. Tous les autres points de contrle sont en bleu, plus petits et plus fins. Ils ne sont lis qu un seul des deux segments. Visualiser les liens entre segments et points de contrle est une chose, mais loutil Liaison permet surtout de les diter: Crer un lien. Glissez le nouveau lien entre un segment et un point de contrle, dans un sens ou dans lautre. Ajouter un lien. Ajoutez un point de contrle (respectivement un segment) la slection en slectionnant le segment (respectivement le point de contrle), puis en Maj+cliquant le point de contrle (respectivement le segment). Vous pouvez en ajouter plusieurs dun coup: au lieu de slectionner un seul segment (respectivement un seul point de contrle) en le cliquant, slectionnez-en plusieurs en les cliquant-glissant. Supprimer un lien. Supprimez un point de contrle (respectivement un segment) de la slection en OptiOn+cliquant (Mac) ou Ctrl+cliquant (Windows) le point de contrle (respectivement le segment) qui passe alors du jaune au bleu.
Figure31.26
Utilisation de loutil Liaison sur un point.
De toute vidence, notre dessin de vipre import depuis Fireworks a beaucoup trop de points de contrle. Avant la cration du squelette, la forme de dpart doit tre lisse et optimise au maximum (voir section Retravailler la courbe globalement, Fiche 10). Il sagit encore une fois de limiter une combinatoire, ici celle des liens entre segments et points de contrle.
Raccourci
Z slectionne loutil Liaison.
240
Flash CS5
Jouer sur llasticit des segments

La version CS5 de Flash introduit un paramtrage de llasticit des segments, ce qui constitue un degr supplmentaire dans la simulation physique, susceptible de renforcer le ralisme de vos animations. Prenons comme exemple simple le profil daile doiseau reproduit Figure 31.27. Un squelette constitu de deux segments suffit pour construire une animation de battement daile.
Figure31.27
Une forme daile doiseau articule.
Lanimation par cinmatique inverse, telle que vous auriez pu la raliser dans Flash CS4, est illustre Figure 31.28. Le calque de pose fait 100 images. Aux images 1 et 100, la pose est celle de la Figure 31.27. limage 30, la pose est la position la plus referme de laile. limage 70, la pose est sa position la plus ouverte. Toutes les poses, y compris les intermdiaires, sont visibles sur la Figure 31.28 puisque laffichage est en mode Pelure doignon, Oignon sur tout (voir section Utiliser la pelure doignon, Fiche 26). Dans le panneau Proprits, on remarque le nouveau sous-panneau Ressort. Il na pas t exploit. En effet, les deux proprits Intensit et Amortissement ont une valeur nulle.
Figure31.28
Vue en pelure doignon de linterpolation par cinmatique inverse du battement daile (sans lasticit).
Animation
241
Les fichiers des tapes sont disponibles dans les exemples du livre: FCS5_31e.fla (dessin de laile), FCS5_31f.fla k (6 poses).
Lanimation illustre Figure 31.29 est une simple copie de la prcdente, dans laquelle on a simplement rgl Intensit 17 et Amortissement 5 (il est recommand de faire ces rglages avant dajouter des poses au calque). Ainsi le segment avantAile rsiste au mouvement de son segment parent, aile. Vous pouvez doser cette rsistance laide des deux proprits. La scne reproduite Figure 31.29, affiche en mode Pelure doignon, montre quen augmentant Intensit on a donn plus de souplesse larticulation, puisque lventail des poses y est plus large quen Figure 31.28. Plus la valeur donne Amortissement est leve, plus leffet de ressort samortit rapidement. A contrario, leffet persiste si la valeur est nulle.
Figure31.29
Vue en pelure doignon de linterpolation par cinmatique inverse du battement daile (avec lasticit).
242
Flash CS5
Rappelons que ce chapitre sur lanimation ne sera vritablement clos que lorsque nous aurons trait la dcomposition hirarchique des animations via limbrication des clips danimation la Fiche36.
Si votre lecteur de PDF ne lit pas le Flash, tlchargez lanimation qui suit depuis le site de Pearson. Elle se trouve dans larchive des exemples : CHAP4 > FCS5_31l.swf. Sinon, cliquez sur les boutons pour la lancer ou larrter.
Groupes, symboles et occurrences

Aprs lapproche vectorielle du graphisme et le recours linterpolation pour beaucoup danimations, une autre raison fondamentale de la lgret des fichiers Flash et donc du succs de ce logiciel tient au fait que les lments graphiques rcurrents dans lanimation sont transforms en symboles stocks dans la bibliothque. Le scnario ne fait alors quenregistrer diffrentes occurrences de ces symboles.
Fiche 32
Regrouper des lments graphiques

La Fiche 8 a trait des modes de dessin, indiquant que la fusion de dessins est le mode par dfaut. Considrons les deux formes de mme couleur, reproduites Figure32.1, places sur le mme calque et qui, comme lindiquent les pointills rsultant de la slection multiple, sont en mode fusion de dessins. Effectivement, une fois quelles sont composes (voir partie gauche de la Figure32.2), elles fusionnent de faon irrversible (tant que ltape prcdant la composition persiste dans lhistorique, il est possible dy revenir, mais terme la fusion est irrversible).
Figure32.1
Deux formes de mme couleur en mode fusion de dessins places sur un mme calque.
Dans la partie droite de la Figure32.2, lune des deux formes a t transforme en groupe: aprs lavoir slectionne, on a invoqu la commande Modication> Grouper. Cette fois-ci, la composition peut tre faite sans que les formes fusionnent (le groupe protgerait de mme dune ventuelle dcoupe ou dun poinon; voir Fiche 8). Les deux formes ont gard leur identit spare. Cela laisse la possibilit de modifier plus tard leur position relative pour corriger la silhouette de tte de chat. Le regroupement dlments visuels via un groupe nest souvent utilis que de faon temporaire le temps de sassurer que lon a la bonne composition. Dans notre exemple, une fois quil est acquis que la silhouette a les bonnes proportions il ny a plus dinconvnients fusionner les deux formes. Pour cela, la forme groupe doit tre dgroupe via la commande Modication> Dissocier (rappelons que cette commande sert aussi dissocier un objet trac en mode dessin dobjets).
244
Flash CS5
Figure32.2
gauche, les formes fusionnent, tandis qu droite le groupe empche la fusion.
Lorsquun groupe est slectionn, il sencadre dun rectangle bleu par dfaut (dans les prfrences, catgorie Gnral, vous pouvez choisir une autre Couleur de surbrillance, ou demander utiliser la couleur du calque; voir la Figure1.15), comme le montre la partie gauche de la Figure32.3 (lorsquun objet trac en mode dessin dobjets est slectionn, il sencadre lui aussi dun rectangle, mais noir). Il nest pas possible dditer directement les lments qui composent un groupe. Pour cela, il faut passer en mode ddition de groupe en double-cliquant celui-ci avec loutil Slection. Toutes les formes du groupe sont alors recouvertes de pointills de slection et le reste des lments de la scne est gris, voir la partie droite de la Figure32.3.
Figure32.3
gauche, un groupe slectionn sur la scne, puis dit en place droite.
Il y a une seconde indication de ce mode ddition de groupe dans la barre ddition (si elle nest pas visible, faites-la safficher via Fentre> Barres doutils> Barre ddition), laquelle affiche tout instant le chemin daccs dans la hirarchie lensemble que vous tes prsentement en train dditer. gauche de la Figure32.3, il sagit de la scne dans son ensemble et la barre ddition affiche Squence1. droite de cette mme figure, ldition ne concerne plus quun groupe sous-ensemble de la scne, ce quindique le chemin Squence1/ Groupe. Une autre utilit du groupe rside dans le fait de devoir le double-cliquer pour pouvoir lditer. Le temps que vous dessiniez ou composiez un calque de votre scne, les lments placs dans un groupe sont labri dune modification par inadvertance. Par dfaut, au sein dun mme calque, les groupes sont empils par dessus les lments non groups et ce dans leur ordre de cration (le plus rcent en sommet de pile). Vous pouvez
245
rordonner via les commandes du menu Modification> Rorganisation (voir section Utilisation des calques, Fiche 22). Il est tout fait possible dimbriquer les groupes. Slectionnez un groupe et dautres lments, puis demandez nouveau Modication> Grouper. Si vous ditez le groupe imbriqu en double-cliquant une premire fois sur son groupe parent, puis une seconde fois sur le groupe imbriqu lui-mme, la barre ddition affichera le chemin Squence 1 / Groupe / Groupe. Pour sortir du mode ddition en place dun groupe, cliquez dans le chemin daccs de la barre ddition sur lun des lments parents du groupe pour vous retrouver au niveau correspondant ddition. Si vous cliquez sur Squence 1, vous retournez au niveau de lensemble de la scne. La commande Modier> Tout modier produit le mme rsultat. Enfin, vous pouvez cliquer sur la flche bleue pour remonter dun cran dans le chemin daccs. Les groupes ont un intrt assez limit en dehors du regroupement temporaire durant la ralisation dune scne. Dune part, parce quil existe dautres moyens de se protger de la fusion: le dessin dobjets (voir Fiche 8) et lutilisation des calques (voir Fiche22). Dautre part, le regroupement sobtient aussi via la dfinition dun symbole, lequel offre des avantages que le groupe na pas, en particulier la rutilisation (voir la fichesuivante).
Raccourci
CMd+G (Mac) ou Ctrl+G (Windows) groupe. Maj+CMd+G (Mac) ou Maj+Ctrl+G (Windows) dgroupe.
Fiche 33
Tirer parti de la bibliothque de symboles

Instancier des symboles en occurrences
Nous avons vu la Fiche 26 que lanimation dobjets (numriques) par scnario a pour mtaphore la technique traditionnelle danimation par dplacement dobjets (physiques). Lesdits objets sont rutiliss dune image la suivante dans une composition lgrement diffrente. Du point de vue de la programmation, la rutilisation est lune des vertus de lapproche par objets. Le terme dsigne cette fois-ci un paradigme de programmation dans lequel on dfinit des classes qui seront instancies un certain nombre de fois en objets (nous y reviendrons brivement au Chapitre 11). Vous navez peut-tre aucun got pour la programmation. Sachez nanmoins quil a bien fallu programmer lenvironnement Flash et que du fait des choix faits par les ingnieurs, mme en simple utilisateur, vous faites de lobjet sans le savoir tel Monsieur Jourdain faisant de la prose! En effet, programmer objet consiste dans un premier temps importer et/ou crire des classes. De mme, raliser une animation Flash consiste bien souvent dans un premier temps
246
Flash CS5
importer et/ou crer dans lenvironnement des lments visuels auxquels on donne le statut de symboles. Leur collection constitue la bibliothque. Dans un second temps, un programme objet excute des instructions ralisant des instanciations multiples de ses classes en objets. Chacun des objets est dot lexcution de valeurs de proprits qui lui sont propres. De mme, votre travail dans Flash consiste en partie instancier les symboles. Dans le vocabulaire de Flash, les instances (souvent multiples) dun symbole sappellent des occurrences. Ce sont autant de copies de leur symbole matre, des clones en quelque sorte. Linstanciation spatiale de lobjet se fait sur la scne, o se joue lanimation, donc o se voient toutes les proprits visibles de loccurrence : sa position, ses dimensions, son orientation, son opacit, sa couleur, etc. Celles-ci sont accessibles via linspecteur de proprits. Linstanciation temporelle se fait dans le scnario qui spcifie les dures dexistence des contenus et leurs variations (comme dans une partition). Le fichier source FLA dune animation Flash est un fichier contenant une bibliothque, ainsi quun scnario o ses symboles y sont instancis.
Avantages des symboles

La mise en rserve des symboles dans la bibliothque et leur rutilisation en diverses occurrences du scnario suit un principe de factorisation dinformation qui prsente des avantages diffrents niveaux: Cot informatique. Une occurrence ne contient en elle-mme aucune information visuelle. Elle nest ni plus ni moins quune rfrence au symbole quelle instancie. Ceci conomise, bien sr, de lespace mmoire et rduit la taille du fichier SWF publi. Mais cela minore galement le temps de tlchargement: un symbole ne sera tlcharg quune seule fois et non plus autant de fois quil y en a doccurrences dans lanimation. Variations. Si nous avons compar ci-dessus linstanciation une forme de clonage, il ne sagit pas ncessairement de clonage lidentique. Dans le paradigme objet, chaque instance a des proprits dfinies dans la classe, mais les valeurs de ces proprits lui sont propres et peuvent diffrer de celles dune autre instance de la mme classe. De mme, une occurrence possde des proprits: position, dimensions, orientation, inclinaison, couleur, opacit pour ne citer que les plus simples (nous y reviendrons la Fiche 37). En jouant sur les valeurs de ces proprits, il est possible de raliser des variations visuelles dun mme symbole (voir Figure33.1). Mthodologie. Lorsque vous modifiez un symbole, vous lditez dans la bibliothque ou sur la scne (voir ci-dessous) et la modification se trouve automatiquement rpercute sur toutes ses occurrences, quelles appartiennent au scnario principal ou celui dautres symboles imbriqus dans ce dernier. Ceci simplifie les mises jour et vous assure une cohrence qui serait bien plus dlicate obtenir si vous deviez modifier les occurrences les unes aprs les autres.
247
Bien videmment, ces avantages ont un prix. Si la mmoire de stockage et la connexion rseau sont soulages, en contrepartie le lecteur Flash doit recalculer chaque phase de lanimation chacune de ses relectures. Ceci augmente la charge du processeur, a fortiori si linterpolation est utilise (voir les Fiches 27 31).
Figure33.1
Variations visuelles dun mme symbole via les proprits doccurrence.
Au Chapitre3, nous avons caractris la complexit du travail dintgration multimdia en passant en revue les diffrentes dimensions dans lesquelles vous devez agir: espace 2D de la scne, temps du scnario, empilement des calques. Nous verrons bientt Fiche39 que lespace de la scne Flash CS5 possde depuis la version CS4 une troisime dimension. Avec la bibliothque dans laquelle vous organisez vos symboles, nous pourrions pratiquement rajouter une dernire dimension de structure, darchitecture de votre animation. Signalons que la bibliothque Flash ne contient pas que des symboles et que nous en reparlerons dans la plupart des chapitres venir. Les composants sont des lments dinterface prfabriqus livrs avec Flash. Une fois instancis partir du panneau Composants (voir Chapitre10), ils apparaissent sous forme de symboles de la bibliothque. Le fait est quil sagit bien de symboles, mme si leur processus ddition est particulier et diffre de celui que nous allons dcrire dans la section suivante. Par ailleurs, le principe de limitation des cots par la rutilisation simpose pour tous les types de mdias dont les donnes sont volumineuses. La bibliothque peut donc galement accueillir sous forme de pseudo-symboles les polices de caractres (Chapitre6), les images bitmap (Chapitre7), les sons (Chapitre8) et les vidos (Chapitre9). Outre leur poids, ces types de mdias ont galement en commun de ne pas tre ditables dans lenvironnement Flash. La bibliothque reproduite Figure33.2 contient de bas en haut trois symboles des trois types graphique, clip et bouton , un son, une vido, une image bitmap, un composant (FLVPlayBack est ddi la lecture vido) et une police de caractres. Vous avez l tout ce
248
Flash CS5
quen tant que ralisateur graphiste vous tes susceptible de manipuler. Deux autres types dlments sont possibles, mais plutt du domaine du dveloppeur. En modifiant la classe de base dun clip de flash.display.MovieClip en flash.display.Sprite, on transforme un clip danimation en sprite, dont licne est semblable mais verte. Enfin, il existe des UIMovieClip ayant licne Flex.
Figure33.2
Tous les types dlments que peut contenir la bibliothque.
Au-del des avantages lis lapproche objet, les symboles jouent un rle capital dans trois domaines correspondant chacun un type de mdias: Animation. Nous avons vu au Chapitre4 que la transformation en symbole est un pralable lapplication dune interpolation. Nous complterons ce chapitre en traitant, la Fiche36, de limbrication des symboles qui permet une dcomposition hirarchique de lanimation. 3D. Nous verrons la Fiche39 que la transformation en symbole est galement un pralable lutilisation de la troisime dimension despace. Programmation. Les occurrences de certains types de symboles (boutons et clips danimation) sont identies sans ambigut par un nom doccurrence. Grce lui, elles peuvent tre contrles lexcution par le code des scripts ActionScript. De plus, les symboles de ces deux mmes types peuvent contenir leurs propres scripts leur permettant de ragir diffrents vnements (voir Chapitre11). Gnralement, les premiers symboles que lon produit sont obtenus par conversion dlments de dessin vectoriel (Chapitre 2). Avez-vous remarqu quau fil des derniers paragraphes nous avons renvoy tous les chapitres de ce livre hormis le premier et le dernier?
249
Cest dire limportance de la notion de symbole dans le monde de Flash et cest ce qui explique cette introduction exceptionnellement longue. Il est temps de passer la pratique.
Crer des symboles

Il y a deux faons de crer un symbole: soit le crer de toutes pices, soit convertir en symbole un lment visuel existant. Pour crer un symbole de toutes pices, demandez Insertion> Nouveau symbole ou cliquez sur le bouton homonyme en bas gauche du panneau Bibliothque. Ceci ouvre la bote de dialogue Crer un symbole reproduite la Figure33.3 (ici dans laffichage de ses options de base).
Figure33.3
La bote de dialogue Crer un symbole.
Comme le montre le menu de la Figure33.3, un symbole peut tre de lun des trois types Graphique, Bouton ou Clip. Tous trois ont en commun le fait de regrouper tout leur contenu en une entit slectionnable (comme un groupe), la rutilisabilit en de multiples occurrences et le fait de se prter linterpolation (dans la pratique, linterpolation sur un bouton a peu de sens, si ce nest ventuellement sur lopacit pour le faire apparatre). Le Tableau31. fait la synthse des diffrences entre les trois types. Les trois fiches suivantes, consacres chacun de ces types, dtailleront le contenu de ce tableau et vous donneront tous les lments pour choisir le bon type de symbole. Tableau 33.1 : Diffrences entre types de symboles
Type Graphique Bouton Clipdanimation Sonorisable Non Oui Oui Scriptable Non Oui Oui Scnario Liauscnarioparent Dequatreimagesprdfinies Indpendantduscnarioparent
Comme le montre la Figure 33.4, chaque type de symbole a une icne diffrente dans la bibliothque et un aperu du symbole slectionn dans la liste saffiche dans la zone suprieure.
250
Flash CS5
Aprs avoir choisi le type de votre nouveau symbole, donnez-lui un nom. Si vous adoptez une convention de nommage avec un prfixe renvoyant au type (par exemple g_, b_ ou c_), dans la bibliothque, vos symboles seront regroups par types et par ordre alphabtique au sein dun groupe. Depuis la version CS4, vous pouvez choisir o placer le symbole dans la bibliothque. En effet, lorsque celle-ci prendra de lampleur, vous lorganiserez hirarchiquement laide de dossiers. En cliquant sur le lien Racine de la bibliothque, vous pourrez naviguer dans votre arborescence de dossiers pour slectionner le bon.
Figure33.4
Les trois types de symboles dans la bibliothque.
En validant, vous passez en mode ddition de symbole, avec une scne et un scnario vides. Procdez alors comme vous le feriez avec une nouvelle animation Flash. Linterface du mode ddition de symbole est tout fait similaire au mode ddition de groupe dcrit la ficheprcdente. La barre ddition (voir Figure32.3) contient le chemin daccs au symbole en cours ddition partir de la squence courante. Ce chemin daccs peut contenir plus de deux noms en cas ddition dun symbole imbriqu dans un autre (voir Fiche36). Une fois votre symbole ralis, vous sortez du mode ddition en cliquant dans le chemin daccs sur lun des lments parents du symbole pour vous retrouver au niveau correspondant ddition. Si vous cliquez sur Squence 1, droite de licne de clap, vous retournez au niveau de lensemble de la scne. La commande Modier> Modier le document produit le mme rsultat. Enfin, vous pouvez cliquer sur la flche bleue pour remonter dun cran dans le chemin daccs. La seconde faon de crer un symbole est de convertir en symbole un lment visuel existant. Vous pouvez convertir en symbole toute combinaison de dessins vectoriels, de textes, dimages bitmap, de groupes et dautres symboles. Faites votre slection sur la scne, puis appelez la commande Modication> Convertir en symbole. La bote de dialogue Convertir en symbole (voir Figure33.5) reprend les options de la prcdente (Figure33.3), auxquelles elle ajoute le choix du point dalignement. Cliquez sur lun des neuf carrs pour dsigner le
251
centre du rectangle englobant, lun de ses quatre sommets ou le milieu de lun de ses quatre cts. Lorsque vous validez, le symbole est ajout la bibliothque et llment slectionn qui en est lorigine est converti en occurrence du nouveau symbole (visuellement rien na chang sur la scne).
Figure33.5
La bote de dialogue Convertir en symbole.
Parfois, vous aurez dvelopp une animation dans un scnario et vous voudrez ensuite en faire un symbole. Pour cela, slectionnez toutes les images de lanimation, puis appelez la commande Modifier> Scnario> Copier les images (ou Couper les images). Crez alors un nouveau symbole en lui donnant le type Clip danimation puis collez les images aprs avoir slectionn la premire image du nouveau scnario. Malheureusement, cette technique est dfaillante avec une animation 3D: aprs collage, les valeurs de coordonnes 3D sont corrompues. Dans tous les cas, il est souvent plus productif de crer demble un clip danimation si vous le pouvez.
F11 ou CMd+l (Mac) ou Ctrl+l (Windows) ouvre le panneau Bibliothque (library). F8 convertit la slection en symbole. CMd+F8 (Mac) ou Ctrl+F8 (Windows) cre un nouveau symbole. CMd+E (Mac) ou Ctrl+E (Windows) dite un symbole slectionn ou revient ldition du document.
Raccourci
Crer des occurrences

Un symbole cr de toutes pices na aucune occurrence. Un symbole cr par conversion a dj une occurrence sur la scne. Dans un cas comme dans lautre, pour crer une premire ou une nouvelle occurrence du symbole, cliquez-le dans le panneau Bibliothque (dans la liste, ou sil est dj slectionn dans celle-ci, dans la zone daperu); glissez-le ensuite depuis la bibliothque sur la scne, dans le calque et limage-cl que vous voulez. Lorsquune occurrence du symbole existe dj, vous pouvez en crer une nouvelle par copier-coller. Si le coller doit se faire dans la mme image, la commande Modifier> Dupliquer est plus rapide. Lorsque vous slectionnez une occurrence sur la scne, elle sencadre dun rectangle bleu comme pour un groupe (sauf si vous avez personnalis la Couleur de surbrillance dans
252
Flash CS5
les prfrences ; voir Figure 1.15). La Figure 33.6 montre slectionns sur la scne une occurrence du symbole papillon, ainsi quun groupe de deux occurrences du mme symbole. Vous remarquerez que loccurrence se distingue du groupe par lindication de son point dalignement (rticule dans un disque blanc). Len-tte du panneau Proprits indique galement selon le cas le type de symbole (ici Graphique) ou Groupe et affiche licne correspondante.
Figure33.6
Slection doccurrence de symbole et de groupe sur la scne.
Si un symbole prsent dans votre bibliothque na aucune occurrence dans le scnario, par dfaut il ne sera pas export dans le chier SWF publi. Il est nanmoins possible de demander Flash de lexporter via les paramtres de liaison que lon trouve dans les options avances des botes de dialogue Crer un symbole (voir Figure33.7), Convertir en symbole ou Proprits du symbole. Le symbole se voit alors attribuer un identifiant de liaison et une classe en vue de son exportation pour ActionScript. Il pourra ensuite tre instanci la vole par le code ActionScript. Nous ne dtaillerons pas cette procdure qui relve dun niveau de programmation dpassant les rudiments que nous donnerons au Chapitre11.
253
Figure 33.7
La bote de dialogue Crer un symbole en affichage avanc.
dition de symbole
Vous avez le choix entre deux modes ddition des symboles. Le premier sappelle ldition en place. Nous lavons dj rencontr la ficheprcdente propos de ldition dun groupe. Ce mode vous permet de voir le contexte de loccurrence sur la scne, mme si celui-ci est gris. La Figure33.8 montre un exemple ddition en place. Il faut bien comprendre que malgr la prsence du contexte, cest bien le symbole que vous ditez: il remplace temporairement loccurrence dans son contexte. Pour diter un symbole en place, slectionnez lune de ses occurrences et appelez la commande Modifier> Modifier en place, ou plus simplement, double-cliquez lune de ses occurrences sur la scne. Le second mode dite le symbole hors de tout contexte, savoir que celui-ci reste seul sur la scne. La Figure33.9 vous donne un exemple ddition du mme symbole papillon. Si le mode ddition en place prsente lavantage de montrer le contexte de loccurrence, il a aussi linconvnient de ne pas permettre de visualiser le symbole tel quel si loccurrence a ses propres valeurs de proprits: ainsi loccurrence de la Figure33.8 a subi un agrandissement et une lgre rotation. Dans la Figure33.9, le symbole est sa taille relle et les bords de son rectangle englobant sont horizontaux et verticaux. Vous navez que lembarras du choix pour passer en mode ddition de symbole. Le plus simple est sans doute de double-cliquer licne ou le nom du symbole dans la liste de la
254
Flash CS5
bibliothque, ou si celui-ci y est slectionn, de double-cliquer son aperu. Vous pouvez aussi invoquer la commande Modifier du menu contextuel de la bibliothque, ou la commande Modifier les symboles du menu Modifier. Enfin, dans la barre ddition, entre le menu des squences et le champ de pourcentage de zoom sur la scne, se trouve un menu Modifier les symboles. Slectionnez-y le symbole diter. En mode ddition de symbole, le rticule au centre de la scne dnote le point dalignement. Si vous souhaitez modifier la position de celui-ci, vous devez dplacer lensemble du graphisme par rapport ce rticule qui reste fixe.
Figure33.8
dition en place du symbole papillon.
Figure33.9
dition du symbole papillon.
Le panneau Bibliothque
La Figure33.10 montre les divers outils que vous propose le panneau Bibliothque. Le bouton Nouveau symbole a dj t voqu ci-dessus. Le bouton Nouveau dossier vous permet dorganiser hirarchiquement une bibliothque consquente. Un nouveau dossier est vide au dpart. Glissez-y les symboles ou autres lments de la bibliothque, y compris dautres dossiers. Le double-clic sur un dossier vous permet de le dvelopper ou le rduire. Grce
255
cette fonctionnalit, si vous vous organisez bien, vous ne devriez pratiquement pas avoir besoin dagrandir le panneau, ni de faire dfiler la liste.
Figure 33.10
Les outils du panneau Bibliothque.
Nouveau panneau Bibliothque Boutons de lecture Verrouiller la bibliothque active Menu des documents ouverts
Aperu du symbole
Nouveau symbole Nouveau dossier Proprits Supprimer
Le clic sur le bouton Proprits ouvre une bote de dialogue qui sintitule, selon le type de llment slectionn dans la liste, Proprits du symbole, Proprits du son, etc. Pour les lments non ditables dans Flash (images bitmaps, sons, vidos) cette bote de dialogue peut galement souvrir en double-cliquant sur llment dans la bibliothque. Depuis la version CS4 vous pouvez tablir les proprits dune slection multiple de symboles. Pour un symbole, la bote de dialogue (reproduite Figure33.11) vous permet de le renommer, de lditer en cliquant sur le bouton Modifier vous passez en mode ddition de symbole et mme de changer son type. Cette opration est assez rare et souvent il sagit dun changement temporaire (par exemple, passer temporairement un clip danimation en graphique pour tester dans lenvironnement et viter de devoir publier). Au cas o ce changement serait dfinitif, au niveau des occurrences, dans le panneau Proprits (se reporter la Fiche37 o lon verra que lune des proprits dune occurrence est son type, proprit dont la valeur peut diffrer ponctuellement du type du symbole) le type restera lancien, ce qui vous obligera toutes les slectionner pour rtablir la cohrence. Cliquer sur le bouton Supprimer du panneau Bibliothque ou enfoncer la touche sUppr supprime videmment le symbole slectionn dans la bibliothque, ce qui a pour consquence de supprimer toutes ses occurrences de tous les scnarios. La suppression dun dossier supprime tout ce quil contient sans dialogue de confirmation.
256
Flash CS5
Figure 33.11
La bote de dialogue Proprits du symbole.
Depuis la version CS4, il y a dans le panneau Bibliothque un champ de recherche de symboles par nom. Au fur et mesure que vous tapez le nom du symbole recherch le contenu du panneau est filtr. Cliquez sur la case de fermeture du champ de recherche pour revenir laffichage de lensemble des symboles. Comme son nom lindique, la zone daperu permet de se faire une ide du symbole slectionn. Pour un son, cest la forme donde qui saffiche (la Figure33.10 en donne un exemple); pour un clip danimation, cest la premire image; pour une vido, laperu nest pas toujours disponible. Pour les sons et les vidos, en haut droite de la zone daperu apparaissent des boutons de lecture. Dans le cas o plusieurs documents Flash sont ouverts, le panneau Bibliothque affiche par dfaut la bibliothque du document courant. Le menu au-dessus de la zone daperu du symbole slectionn vous permet de basculer la bibliothque dun autre document. Si vous souhaitez laisser visible une bibliothque, mme aprs tre pass un autre document, cliquez sur le bouton dont licne est une punaise. Cliquez nouveau pour dpunaiser cette bibliothque. Le bouton Nouveau panneau bibliothque fait ce que lon attend de lui! Il est utile de disposer de deux panneaux Bibliothque lorsque vous voulez transfrer ou copier-coller des symboles de lune lautre. ce propos, notez que le copier-coller dune occurrence dun fichier Flash dans le scnario dun autre fichier Flash ajoute automatiquement le symbole instanci la bibliothque du second fichier. Le menu contextuel de la bibliothque est pratiquement identique son menu doptions. Ce dernier est reproduit Figure33.12. Un certain nombre de commandes sont redondantes avec des fonctionnalits dj dcrites: Nouveau symbole, Nouveau dossier, Renommer, Supprimer, Modifier, Lire, Proprits. La commande Nouvelle police permet dintgrer une police, cest--dire la description le plus souvent vectorielle de la forme des caractres (voir section Incorporation de polices, Fiche 44). La commande Dupliquer est utile lorsque vous voulez crer un nouveau symbole ayant une base commune avec un symbole existant. La commande Slectionner les lments inutiliss est trs utile pour faire le mnage dans votre bibliothque si votre animation ne contient aucun lment qui soit instanci par programme. Dans le cas contraire, aucun des symboles bnficiant dun export (voir Figure 33.7) ntant slectionn par cette commande, il faut aller plus loin en demandant le compte des utilisations (voir ci-dessous) et vrifier que celui-ci est nul. Bien sr, ce compte peut tre nul dans le cas dun symbole instanci par ActionScript, mais cest l le domaine du dveloppeur.
257
Figure 33.12
Le menu doptions du panneau Bibliothque.
Si vous largissez le panneau Bibliothque (il faut ventuellement le dtacher pour cela), vous dcouvrez dautres informations que le nom: Type, Date de modification, Liaison et Nombre dutilisations. Depuis la version CS4, vous pouvez rorganiser lordre des colonnes en glissant-dposant les en-ttes. De mme, le clic sur un en-tte trie la liste selon ce critre et dans le cas o len-tte comporte un triangle, cliquer dessus inverse lordre. La colonne Liaison donne lventuel identifiant de liaison dfini dans les options avances des botes de dialogue de cration, de conversion ou de proprits de symbole. Le Nombre dutilisations vous donne le nombre doccurrences dans lanimation, mais il faut savoir que, par dfaut, la mise jour de ces valeurs nest pas automatique et quelle sobtient via la commande Mettre jour du menu des options de la bibliothque. Souvent, le symbole dont vous avez besoin existe dj dans une autre animation. Dans ce cas, il faut ouvrir la bibliothque de cette animation, qui est donc une bibliothque externe. Utilisez la commande Fichier> Importer> Ouvrir une bibliothque externe. La bote de dialogue Ouvrir comme bibliothque saffiche. Il vous suffit dy naviguer pour choisir le fichier source Flash. Sa bibliothque saffiche alors dans un nouveau panneau partir duquel vous pouvez copier-coller.
258
Flash CS5
Pour terminer, sachez que Flash est livr avec trois bibliothques communes de boutons, de sons et de classes. Pour les ouvrir, slectionnez-les dans le menu Fentre> Bibliothques communes. De la fentre qui souvre vous pouvez glisser-dposer dans votre propre bibliothque ce dont vous avez besoin. Au fil des projets, certains symboles deviennent rcurrents. Plutt que de devoir ouvrir une bibliothque externe chaque fois que lon en a besoin, il peut tre judicieux de crer sa propre, voire ses propres bibliothques externes. Il vous suffit pour cela de placer le fichier FLA dont la bibliothque contient les lments rendre accessibles dans le dossier Libraries, sous-dossier de Configuration, lui-mme dossier imbriqu dans un dossier Flash CS5 de la partie bibliothque de votre compte utilisateur. Le chemin daccs exact varie selon la plate-forme: Sous Mac OS X. <disque dur>/Utilisateurs/<utilisateur>/Bibliothque/Application Support/Adobe/Flash CS5/fr_FR/Configuration/Libraries/. Sous Windows XP. C:\Documents and Settings\<utilisateur>\Local Settings\Application Data\Adobe\Flash CS5/fr_F\Configuration\Libraries\. Sous Windows Vista. C:\Utilisateurs\<utilisateur>\Local Settings\Application Data\Adobe\Flash CS5/fr_F\Configuration\Libraries\).
Raccourci
Maj+CMd+O (Mac) ou Maj+Ctrl+O (Windows) ouvre une bibliothque externe.
Fiche 34
Utiliser un symbole Graphique

Lorsque vous donnez le type Graphique un symbole, celui-ci est dabord non sonorisable. Il nest pas non plus possible dappliquer un mode de fusion ou un filtre un symbole graphique. Un symbole graphique nest pas non plus scriptable. En effet, une occurrence de symbole graphique ne pouvant pas tre nomme, il est impossible dy faire rfrence dans un script ActionScript. Un symbole graphique est donc ferm linteraction. Une caractristique fondamentale dun symbole graphique est que son scnario est li au scnario parent (celui dans lequel son occurrence est instancie). Cela signifie quil sexcute en mme temps que lui impossible darrter son excution pendant que celle du scnario parent continuerait et la mme cadence que lui. Dautre part, cette dpendance implique que si le scnario parent na pas autant dimages que celui du symbole graphique, lanimation contenue dans ce dernier sera tronque. Comme le montre la Figure 34.1, lorsque vous slectionnez une occurrence de symbole graphique, le sous-panneau Boucle du panneau Proprits vous donne le choix entre les trois options Boucle, Lire une seule fois et Image unique. Le champ Premier (il faut lire Premire) vous sert spcifier la premire image laquelle dbutera la lecture en boucle ou lunique image affiche.
259
Figure34.1
Options de lecture du scnario dune occurrence de symbole graphique.
Souvent, on se limite ce que lintitul suggre, cest--dire nutiliser que la premire image du scnario (option Image unique) et ny mettre que du graphisme, de limage fixe. Encore faut-il que ce graphisme ne doive pas tre manipul par programme, ni faire lobjet de transformations 3D, auquel cas il faudrait lui donner le type Clip, bien quil soit dpourvu danimation. Souvenez-vous quil est toujours possible de changer aprs coup le type de comportement dun symbole dans la bote de dialogue Proprits du symbole (voir la ficheprcdente). Il est cependant tout fait possible de placer une animation dans un symbole graphique. Ce procd, autrefois dconseill, peut rendre de grands services en ralisation de dessin anim dans Flash ou, dans le contexte des jeux vido, pour la rasterisation par programme la vole, nouvel avatar de la technique prouve des planches de sprites plat. Il sagit dans les deux cas dune conception plus horizontale de lanimation, par opposition une approche verticale par imbrication. Les limitations dcrites ci-dessus peuvent dcourager dutiliser ce type de symbole. Nanmoins, son avantage sur le clip danimation est de prendre moins de place dans le fichier SWF publi et de consommer moins de ressources processeur lexcution.
Fiche 35
Crer un symbole Bouton

Un symbole de type Bouton vous permet de mettre en uvre simplement sans aucune programmation lun des dispositifs interactifs les plus utiliss: le bouton effet de survol. Rappelons de quoi il sagit. Le bouton a une apparence par dfaut. Lorsque le pointeur de souris survole le bouton, pour signaler linternaute quil sagit dun bouton cliquable, celui-ci change dapparence. Par dfaut, la zone ractive est le bouton lui-mme, mais il est possible de dfinir une zone ractive plus large dans les cas problmatiques (bouton petit, fin ou ajour). Lorsque linternaute clique, le bouton prend une troisime apparence pour montrer que le clic a bien t pris en compte.
260
Flash CS5
Dans Flash, lorsque vous passez en mode ddition de symbole aprs avoir donn le type Bouton dans la bote de dialogue Nouveau symbole, vous obtenez un scnario vide, particulier en ce que ses quatre premires images sont intitules respectivement Haut, Dessus, Abaiss et Cliqu. Dans ces quatre images, vous devez placer respectivement lapparence normale du bouton, son apparence au survol, son apparence au clic et la forme dfinissant sa zone ractive. Dans lexemple de la Figure35.1, on a slectionn la premire image (Haut) et on y a dessin avec loutil Primitive rectangle lapparence normale du bouton en prenant soin de dplacer la forme pour que le point dalignement soit bien en son centre. En insrant ensuite une image-cl (F6), la seconde image (Dessus) reoit par dfaut une copie de la premire. Dans lexemple de la Figure35.2, on a alors simplement chang la couleur de remplissage de la forme, en veillant ne pas dplacer celle-ci du moindre pixel afin quil ny ait aucun dplacement au survol, mais juste un changement de couleur.
Figure35.1
Construction dun bouton effet de survol: limage Haut.
Figure35.2
Construction dun bouton effet de survol: limage Dessus.
En insrant encore une image-cl, la troisime image (Abaiss) reoit par dfaut une copie de la seconde. Dans lexemple de la Figure35.3, on a alors appliqu un redimensionnement 90% via la commande Modification> Transformer> Redimensionner et faire pivoter. En insrant une dernire image-cl, la quatrime image (Cliqu; sa fonction serait beaucoup plus vidente si elle se nommait Zone ractive) reoit par dfaut une copie de la troisime. Dans lexemple de la Figure35.4, on a trac par dessus un rectangle nettement plus grand que le rectangle arrondi, ce qui la donc cras.
261
Figure35.3
Construction dun bouton effet de survol: limage Abaiss.
Figure35.4
Construction dun bouton effet de survol: limage Cliqu.
Gardez lesprit que cette forme ne sera pas visible dans lanimation publie. Sa couleur na donc aucune importance, seules comptent sa forme et sa taille qui dfinissent les pixels concerns par le survol et le clic. Dans ce cas prcis, la quatrime image aurait pu rester vide. En effet, le rectangle arrondi initial faisant 40pixels de large par 30 de haut, il dfinit une zone ractive confortable. Par contre, dfinir une zone ractive est indispensable pour des boutons dont le graphisme est fin et/ou trs dcoup, par exemple lorsquil ne contient que des caractres. Dans un tel cas, les pixels en jeu dans le survol sont en nombre rduit et leffet de survol est phmre. Le clic peut mme relever de lexploit, ce qui nest pas trs courtois vis--vis de linternaute. En revenant au scnario principal (clic dans la barre ddition sur la flche bleue ou sur Squence1), vous pouvez tester le comportement graphique de votre bouton directement dans lenvironnement de cration. Pour cela, il faut activer si ce nest pas dj fait loption Contrle> Autoriser les boutons simples. Cela vous dispense dexporter le fichier SWF. Par contre, cela ne permet pas de voir leffet dventuels scripts ActionScript que contiendrait le scnario du bouton. De plus, la slection et ldition de celui-ci sont bloques tant que loption reste active. Dsactivez-la via Contrle> Dsactiver les boutons simples. Le bouton ci-dessus na quun seul calque, mais rien ne vous empche de le raliser sur plusieurs. Ainsi, le bouton de la Figure35.5 a un intitul qui persiste sur les trois images
262
Flash CS5
Haut, Dessus et Abaiss. Remarquez cependant que si vous ne rajoutiez lintitul que dans le scnario principal, au-dessus de loccurrence du symbole bouton, vous vous mnageriez la possibilit dutiliser le mme symbole pour diffrents boutons ayant chacun leur intitul propre.
Les cinq tapes sont prsentes dans les fichiers dexemple: FCS5_35a.fla (limage Haut), b (limage Dessus), c (limage Abaiss), d (limage Cliqu), e (deux calques).
Figure35.5
Un bouton effet de survol construit sur deux calques.
Il est possible de sonoriser votre bouton. Vous pourriez ajouter un son de survol ventuellement (mais attention, cela peut vite agacer linternaute). Il est plus courant de sonoriser le clic avec un son trs bref. Reportez-vous la section Sonoriser un bouton, Fiche 62. Le bouton peut ventuellement contenir une animation de survol et/ou une animation de clic (encore une fois, attention leffet gadget; faites sobre). Il suffit pour cela dimbriquer une occurrence de clip danimation dans le scnario, aux images Dessus et/ou Abaiss. En ltat, leffet des boutons ci-dessus est totalement gratuit, puisquils ne dclenchent rien. Dclencher autre chose que le changement dapparence demande quelques rudiments dAction-Script. Reportez-vous au Chapitre11 qui vous les donnera. Dans certaines situations, vous aurez besoin dun bouton invisible. Laissez vides les trois premires images du scnario du bouton et ne dfinissez que sa zone ractive. L encore, sans ActionScript il ne se passera rien sur la scne cette fois-ci strictement rien, puisquil ny a rien voir! Dans lenvironnement de cration, si vous slectionnez loccurrence de bouton sur la scne, vous verrez un rectangle bleu transparent vide. Enfin, pour conclure, rappelons que lune des bibliothques communes est ddie aux boutons et mentionnons que les composants fournissent des boutons prfabriqus: bouton poussoir, bouton radio, etc. Voyez le Chapitre10.
Raccourci
OptiOn+CMd+b (Mac) ou alt+Ctrl+b (Windows) bascule lautorisation des boutons simples.
263
Fiche 36
Imbriquer une animation dans un clip danimation

Contrairement celui dun symbole de type Graphique, le scnario dun symbole de type Clip est indpendant de son scnario parent, cest--dire le scnario dans lequel son occurrence est instancie. Cela signifie que bien que partageant la mme cadence (I/S), lun peut tre interrompu et lautre continuer jouer. Enfin, le fait que le scnario parent ait moins dimages que celui du symbole clip est sans incidence sur le droulement de lanimation que contient ce dernier. Un symbole clip danimation na aucune des limitations dont souffre le symbole graphique. Il est sonorisable. Il est scriptable, ce qui signifie deux choses. Dune part, possdant un nom doccurrence, il peut tre contrl par programme ActionScript depuis dautres scnarios. Dautre part, il peut lui-mme agir sur dautres scnarios via ses propres scripts. La classe ActionScript MovieClip, sous-jacente aux clips danimation, dote ceux-ci dun grand nombre de proprits, de mthodes et vnements (reportez-vous la Fiche 77 pour en savoir plus sur ces notions). Limbrication danimations relve du chapitre prcdent, mais nous ne la traitons que maintenant que les symboles ont t prsents dans le dtail. Les symboles clips danimation sont en effet au cur de limbrication danimations. Derrire ce terme technique dimbrication se trouve lide de dcomposition hirarchique. Un cas simple et trs courant est celui dune animation dont une ou plusieurs parties sont cycliques. Puisque le comportement par dfaut de relecture dune animation Flash est de jouer en boucle indniment, il suffit de placer les diffrentes phases dun cycle de cette sous-animation dans le scnario dun clip danimation. La Figure 36.1 montre le scnario dun clip danimation nomm battement qui ralise un battement dailes de papillon. Il comporte trois calques : un pour le corps (qui reste fixe) et un pour chaque aile. En 17 images-cls successives, chacune des ailes se referme (la rotation 3D sera dcrite la Fiche39). Suivent alors 15 images-cls la copie en ordre invers des images-cls 2 16 pour le redploiement des ailes. Une erreur commune consisterait faire la copie en ordre invers des images-cls 1 17, ce qui redoublerait les images extrmes du mouvement et donc le ralentirait aux points dinversion. La sous-animation tant ralise, il sagit ensuite dinstancier le clip danimation dans un autre scnario. Nous pourrions faire sarrter la tte de lecture sur une image donne du scnario principal et y crer une occurrence du clip battement. Le lecteur Flash sarrterait alors sur cette image laquelle nous aurions un papillon pos, battant des ailes en continu. Nous pourrions aussi, comme suggr la ficheprcdente, raliser le bouton anim suivant: limage Haut du scnario du bouton recevrait une copie de limage 1 du clip battement, tandis que limage Dessus recevrait une occurrence de ce clip. Nous aurions alors un papillon qui batterait des ailes tant quil serait survol.
264
Flash CS5
Cest cause de ces situations de scnario dans le scnario que lon parle dimbrication. Celle-ci prend toute sa force lorsque loccurrence du clip imbriqu est elle-mme anime, ce qui hirarchise non seulement les scnarios, mais aussi lanimation. Quittons le mode ddition de symbole de la Figure36.1 pour revenir au scnario principal. Traons une trajectoire laide de loutil Crayon sur un premier calque qui servira de guide de mouvement (voir section Interpolation classique guide, Fiche 28). Instancions le clip battement sur un second calque guid. Ensuite, la premire et la dernire image de ce dernier, crons une image-cl et accrochons loccurrence une extrmit de la trajectoire. Aprs cration dune interpolation classique, cela donne le scnario reproduit Figure36.2. lexcution, un papillon traverse la scne selon la trajectoire, tout en battant des ailes. Le battement dailes est imbriqu dans le vol.
Figure36.1
Scnario dun clip danimation ralisant un battement dailes de papillon.
Les quatre tapes sont prsentes dans les fichiers dexemple: FCS5_36a.fla (les donnes), b (papillon pos), c (papillon anim au survol), d (vol de papillon).
la diffrence des symboles de type Graphique (anims) qui sont prvisualisables dans lenvironnement de cration, les symboles de type Clip ne le sont pas. Pour visualiser lanimation imbrique, vous tes oblig de gnrer le fichier SWF, en testant lanimation ou en la publiant. Dans lexemple ci-dessus, il ny a quune occurrence du clip danimation dans le scnario principal. Dans de nombreux cas, vous linstancierez plusieurs fois, profitant des avantages lis la rutilisation (voir Fiche33). Dans la marche ou la course dun personnage, vous aurez au moins deux occurrences du clip danimation jambe ou patte. Dans la traverse dun vhicule (vlo, voiture, etc.) vu de profil, vous aurez au moins deux occurrences du clip danimation roueQuiTourne; galement deux ou quatre occurrences du clip danimation hlices pour lanimation dun avion vu de face.
265
Figure36.2
Scnario principal ralisant le vol du papillon battant des ailes.
Rien ne vous oblige vous limiter un seul niveau dimbrication : le scnario imbriqu peut lui-mme contenir une ou plusieurs instances dautres symboles, donc imbriquer un ou plusieurs autres scnarios. La Figure36.3 montre que le clip battement contient lui-mme des symboles de type Clip. Nanmoins ceux-ci ne sont pas des animations (leur scnario se rduit une seule image). Dans ce cas, il semblerait que le type Graphique ait pu suffire, mais cest pourtant le type Clip qui a t choisi, car cest une condition ncessaire lanimation 3D (voir Fiche39).
Figure36.3
Imbrication de clips danimation sur deux niveaux.
266
Flash CS5
Gardez lesprit que tous ces scnarios imbriqus sexcutent indpendamment les uns des autres. Ils peuvent jouer des cadences diffrentes, sarrter pendant que les autres continuent sexcuter. Certains joueront en boucle, dautres non. Enfin, du point de vue du confort de votre travail dans lenvironnement, limbrication vous permet de rpartir sur une hirarchie de scnarios de tailles raisonnables ce qui ferait lobjet dun seul scnario norme. Le panneau Explorateur danimation a dj t voqu la section Navigation dans lanimation en phase de ralisation de la Fiche 22. Cet outil est galement trs prcieux pour visualiser la structure arborescente de lanimation. Le panneau affiche la hirarchie des clips imbriqus si vous cochez Afficher les dfinitions de symboles dans le menu des options (voir Figure 22.8) ou si vous cochez Dfinitions de symboles dans la rubrique Contexte de la bote de dialogue de paramtrage (voir Figure 22.7). Cest le cas dans lexemple de droite de la Figure 36.4. Le chemin complet daccs dans la hirarchie llment slectionn apparat tout en bas du panneau. Dans lexemple de gauche de la Figure 36.4, on na demand afficher que les lments danimation, en filtrant les symboles de lanimation (graphiques, boutons et clips).
Figure 36.4
Lexplorateur danimation sous langle des symboles de lanimation: en mode daffichage lments danimation ( gauche) ou Dfinitions de symboles ( droite).
Le champ Rechercher du panneau Explorateur danimation peut vous servir rechercher des occurrences par leur nom. En mode lments danimation, le menu des options du panneau (voir Figure 22.8) vous offre galement une commande Slectionner les occurrences de symbole. Ce menu contient dautres commandes relatives aux symboles. Pour retrouver un symbole dans la bibliothque, slectionnez-le dans la liste hirarchique, puis demandez Afficher dans la bibliothque. Vous pouvez galement diter le symbole slectionn dans la liste via les commandes Modifier en place et Modifier dans une nouvelle fentre (voir section dition
267
de symbole, Fiche 33). Enfin, en mode Dfinitions de symbole, vous pouvez rpertorier tous les fichiers associs au symbole slectionn grce la commande Ouvrir la dfinition du symbole.
Fiche 37
Modifier une occurrence de symbole

Nous lavons mentionn la Fiche 33, une occurrence peut prsenter des variations par rapport au symbole dont elle est issue par les valeurs de ses proprits doccurrence. La scne reproduite Figure37.1 a t compose de la manire suivante: le symbole graphique Marbr a t instanci une premire fois en haut gauche, puis cette occurrence a t duplique (Modifier> Dupliquer) treize fois. Les quatorze occurrences ont ensuite t mises en place grossirement par glisser-dposer, puis les positions furent affines avec les outils dalignement (voir la Fiche 20). Pour finir, chacune des occurrences hormis la premire fut slectionne tout tour et la valeur dune ou plusieurs proprits modifie, la plupart du temps dans lun des deux panneaux Proprits et Transformer.
Figure37.1
Diffrentes variations dun mme symbole via les proprits doccurrence.
Occurence non modifie Redimensionnements
Permutation de symbole Effets de couleur
Rotation 2D, inclinaisons
Rotations 3D
Voir le fichier exemple FCS5_37.fla.
En guise de rfrence, la Figure37.2 reproduit les deux panneaux Proprits et Transformer lorsque loccurrence non modifie est slectionne sur la scne. Notez que les valeurs 3D ne sont pas significatives, dans le cas dune occurrence de symbole graphique. La premire proprit gomtrique dune occurrence est sa position (la transformation mathmatique correspondante est la translation). Vous pouvez la lire et la modifier dans les champs X et Y du sous-panneau Position et taille du panneau Proprits. Il est possible dentrer une valeur dans ces champs. Depuis la version CS4, les champs numriques des panneaux peuvent tre cliqus-glisss vers la gauche ou la droite pour diminuer ou augmenter la valeur, ce qui est trs pratique pour affiner.
268
Figure37.2
Proprits de loccurrence non modifie.
Flash CS5
La seconde proprit gomtrique dune occurrence est sa taille (la transformation mathmatique correspondante est lhomothtie). Largeur et hauteur de loccurrence sont modifiables dans les champs L et H du sous-panneau Position et taille du panneau Proprits. La Figure37.3 reproduit de gauche droite les proprits des trois occurrences redimensionnes, respectivement de haut en bas sur la Figure37.1 une diminution de la hauteur (H = 48), de la largeur (L = 63) et des deux (L = 67,2 et H = 51).
Figure37.3
Proprits des trois occurrences redimensionnes.
La troisime proprit gomtrique dune occurrence est son orientation (la transformation mathmatique correspondante est la rotation 2D). La Figure37.4 reproduit de gauche droite les proprits de loccurrence pivote (en haut de la seconde colonne de la Figure37.1) et des deux occurrences inclines (en bas de cette mme colonne). Le champ Faire pivoter indique que loccurrence pivote a subi une rotation de 21.
Figure37.4
Proprits des trois occurrences pivotes ou inclines.
La quatrime proprit gomtrique dune occurrence est son inclinaison (la transformation mathmatique correspondante est le cisaillement). Toujours sur la Figure 37.4, le champ Incliner indique que loccurrence du milieu de la seconde colonne de la Figure37.1 a subi un cisaillement horizontal de 15 et celle du bas un cisaillement vertical de 16.
269
Pour toutes ces transformations gomtriques doccurrences, vous avez des alternatives lutilisation du panneau Transformer : loutil Transformation libre ou les commandes du menu Modification> Transformer. Reportez-vous la Fiche16. Ce qui y est dcrit de ces outils dans le cadre du dessin vectoriel reste vrai pour la translation, lhomothtie, la rotation et linclinaison des occurrences. Par contre, les outils de distorsion et de modelage de lenveloppe ne sont oprationnels que sur une occurrence dun symbole ne contenant que des formes vectorielles. Vous pouvez tout fait appliquer simultanment une mme transformation plusieurs occurrences. Il suffit de faire une slection multiple sur la scne. Nous lavons dj mentionn plusieurs reprises ci-dessus, les transformations gomtriques 3D (la Fiche39 y est entirement consacre) ne sappliquent qu des occurrences de symboles clips danimation. Le symbole Marbr tant de type Graphique, avant dappliquer une rotation 3D, il faut donner aux trois occurrences concernes le type Clip. Il suffit pour cela de slectionner loccurrence puis de slectionner le type de comportement souhait dans le menu droulant en tte du panneau Proprits, comme le montre la Figure37.5. Remarquez comment le fait de choisir Bouton ou Clip ouvre loccurrence la gestion par programme: un champ pour donner un nom loccurrence apparat, ainsi quun bouton daccs lditeur de scripts ActionScript. Rappelons que ce changement de type au niveau de loccurrence est sans rpercussion sur le type du symbole sous-jacent: Marbr reste un symbole graphique bien quayant trois occurrences de type Clip.
Figure37.5
Changement du type de comportement dune occurrence.
La Figure37.6 reproduit de gauche droite les proprits des trois occurrences de type Clip qui ont subi une rotation 3D, respectivement de haut en bas en X de 44, en Y de 51 et pour la dernire la fois en X de 19,4 et en Y de 45. Pour cette dernire, on na pas procd numriquement dans le panneau Transformer, mais interactivement via loutil Rotation3D (voir Fiche39). Nous avons fait le tour de toutes les transformations gomtriques applicables une occurrence. Les autres transformations applicables sont regroupes par Flash sous le terme deffet de couleur et accessibles dans le sous-panneau homonyme du panneau Proprits, aprs slection de loccurrence sur la scne. Les diffrents effets sont accessibles dans le menu Style, comme le montre la Figure37.7 qui reproduit de gauche droite les proprits des trois occurrences ayant subi, respectivement de haut en bas sur la Figure37.1, un effet de Luminosit, de Teinte et dAlpha.
270
Figure37.6
Proprits des trois occurrences pivotes en 3D.
Flash CS5
Figure37.7
Proprits des trois occurrences ayant un effet de couleur.
La luminosit est un pourcentage, 100% correspondant au blanc (lclaircissement maximum) et 100% au noir (lassombrissement maximum). Pour la teinte, le plus simple est de choisir une couleur dans la palette qui souvre au clic sur la puce de couleur (voir Fiche17). Vous pouvez ensuite affiner laide des quatre glissires Rouge, Vert, Bleu et Teinte. Les trois premires correspondent bien sr aux trois canaux RVB, avec des valeurs entre 0 et 255. La quatrime aurait t plus judicieusement nomme Saturation, puisque cest le pourcentage de saturation. Quant lalpha, cest comme dhabitude un pourcentage dopacit. Cest la valeur de proprit utilise dans les interpolations ralisant un fondu (apparition ou disparition doccurrence). Si vous voulez agir la fois sur la couleur et sur lopacit, slectionnez Avanc dans le menu Style, aprs avoir donn des valeurs de base via lun des trois autres styles. En style Avanc, lensemble des paramtres deffet de couleur se prsente comme le montre la Figure37.8. Pour chacun des quatre canaux Alpha, Rouge, Vert et Bleu, la colonne de gauche contient des facteurs multiplicatifs (pourcentages) et celle de droite des facteurs additifs ou soustractifs (entre 255 et 255). Les symboles de types Clip et Bouton ont dautres proprits que nont pas les symboles graphiques : le mode de fusion et les filtres. Comme le montre la Figure37.9, la valeur de la
271
premire se rgle dans le sous-panneau Affichage du panneau Proprits et la seconde fait lobjet dune sous-section Filtres. Modes de fusion et filtres seront traits respectivement aux Fiches57 et 59. Reportez-vous y.
Figure37.8
Les paramtres deffet de couleur en style Avanc.
Figure37.9
Les modes de fusion.
Nous avons vu au Chapitre4 que les paramtres dune interpolation sont accessibles dans le sous-panneau Interpolation du panneau Proprits lorsquune image de la plage dinterpo-
272
Flash CS5
lation est slectionne dans le scnario. La Figure37.10 en donne un exemple. Nanmoins, puisquune interpolation sapplique une occurrence, il faudrait aussi considrer ces paramtres comme des proprits doccurrence. La premire des proprits dune occurrence est le nom du symbole quelle instancie. Celuici saffiche en haut du panneau Proprits sous le type du symbole (voyez la Figure37.9 par exemple). droite de ce nom se trouve un bouton Permuter qui, au clic, ouvre la bote de dialogue Permuter le symbole (voir Figure37.11). Cette bote de dialogue est galement accessible via la commande Permuter le symbole du menu contextuel de la scne. La liste de la bote de dialogue reprend tous les symboles, de mme type que celui permuter, prsents dans la bibliothque (vous pouvez dupliquer le symbole slectionn laide du bouton sous laperu). Choisissez-en un, puis validez. Loccurrence est dsormais une instance du symbole choisi, tout en ayant conserv toutes ses valeurs de proprits, quil sagisse de gomtrie, de couleur, de mode de fusion, de filtres ou dinterpolation.
Figure37.10
Les paramtres dune interpolation.
Figure37.11
La bote de dialogue Permuter le symbole.
Parfois vous voudrez modifier une occurrence dun symbole, mais aucune des proprits que nous venons de passer en revue ne vous permettra dobtenir leffet voulu. Dans ce cas, il faudra rompre le lien dinstanciation entre loccurrence et le symbole. Pour cela, faites appel la commande Modification> Sparer (elle sert aussi sparer un texte une premire fois en caractres, une seconde en traits et sparer une image bitmap). La Figure37.12 montre deux occurrences dun mme symbole. Visuellement, rien ne les distingue, mais celle de gauche reste lie au symbole, tandis que celle de droite a t spare de lui. Remarquez la diffrence des rectangles de slection sur la scne. Le panneau
273
Proprits indique galement que lune est occurrence dun symbole graphique Apollon, tandis que lautre instancie une image bitmap iApollon. Aprs sparation, vous tes libre de modifier le graphisme sans que cela soit rpercut sur le symbole initialement instanci. En sparant, vous perdez les effets qui taient lis des modifications de valeurs de proprits de loccurrence. La sparation est une opration irrversible. En perdant le bnfice de rutilisation li linstanciation, vous augmentez la taille du fichier.
Figure37.12
Une occurrence de symbole graphique avant ( gauche) et aprs sparation.
Raccourci
CMd+b (Mac) ou Ctrl+b (Windows) spare (break apart) une instance de son symbole.
Fiche 38
Grer la dformation lagrandissement

Puisque linternaute a la libert de zoomer sur votre animation, il peut tre bon de contrler comment les lments se comportent lors dun agrandissement. La mise lchelle en 9dcoupes vous donne ce contrle, mais pour les symboles clips danimation uniquement. La partie gauche de la Figure38.1 montre le clip danimation clipSansDcoupes en dition de symbole (affichage 200%). Ce clip na pas loption de mise lchelle en 9 dcoupes active. La partie droite de la mme figure montre le clip danimation clipAvecDcoupes en dition de symbole, qui lui a cette option active. Vous y voyez en pointills les deux horizontales et les deux verticales qui dcoupent le symbole en neuf zones, do le nom. Les lignes de dcoupe sont galement visibles dans la zone daperu lors de la slection du symbole dans la bibliothque. En dition de symbole, il suffit de glisser-dposer les lignes pour modifier la dcoupe. Initialement, les lignes sont positionnes par dfaut au quart de
274
Flash CS5
la largeur et de la hauteur en partant des angles. Dans lexemple de la Figure38.1, elles ont t places de telle sorte que les quatre zones dangle correspondent aux zones darrondi du rectangle.
Figure38.1
Deux clips danimation identiques visuellement ( droite la mise lchelle en 9 dcoupes est active).
Loption Activer les repres dchelle 9 dcoupes peut-tre coche soit la cration dun symbole ou la conversion en symbole, soit aprs-coup dans la fentre des proprits du symbole. Dans tous les cas, vous devez au pralable cliquer sur le bouton Avanc, puisquil sagit dune option avance (voir Figure33.7). Pour voir leffet de cette option sur la scne dans lenvironnement de cration, si votre animation est paramtre pour la publication en ActionScript 2, utilisez la commande Contrle> Activer laperu en direct (si votre animation est paramtre pour la publication en ActionScript 3, laperu en direct est activ par dfaut sans tre dsactivable). Sur la scne reproduite Figure38.2, on a instanci deux fois le symbole clipSansDcoupes: en haut, il est sa taille normale; au milieu, il a t agrandi 300%. Loccurrence du bas de la scne instancie 300% le symbole clipAvecDcoupes. On constate que loption dsactive, le rectangle arrondi est agrandi de faon homogne horizontalement et verticalement, ce qui a pour consquence daugmenter le rayon de larrondi. Au contraire, lorsque loption est active, le comportement lagrandissement est le suivant: les quatre zones dangles nen subissent aucun, les quatre autres zones de bord ne subissent un agrandissement que dans une seule direction et seule la zone centrale subit un agrandissement dans les deux directions.
Figure38.2
Deux instances de clipSansDcoupes (en haut) et une instance de clipAvecDcoupes.
275
Puisquun clip danimation peut imbriquer dautres lments dans son scnario, sachez que loption dagrandissement nagit que sur les formes. Clips imbriqus, images bitmap ou texte sont dforms normalement.
Fiche 39
Positionner et orienter en 3D des objets 2D

Transformations 3D
Si la 3D a fait une entre remarque dans lenvironnement de cration Flash CS4, elle ne concerne que des objets 2D donc plats mis en position (translation) et en orientation (rotation) dans un espace3D, mais pas encore de vritables objets 3D, dfinis par exemple par un rseau ferm de facettes polygonales qui induirait un intrieur de lobjet. Seules les occurrences de clips peuvent se voir appliquer une transformation 3D, ce qui justifie le traitement de la 3D dans ce chapitre. Remarquez que cette limitation aux occurrences de clips nen est finalement pas une: si vous souhaitez appliquer une transformation 3D un lment dun autre type (texte, image bitmap, etc.), il vous suffit au pralable de convertir en symbole de type Clip ledit lment. Vous avez deux possibilits pour appliquer une transformation 3D : soit interactivement avec les deux outils Translation 3D et Rotation 3D (voir Figure39.1), soit numriquement via les panneaux Proprits et Transformer (voir Figure37.6).
Figure39.1
Les outils de transformation 3D: Translation 3D ( gauche) et Rotation 3D ( droite).
Ds que vous avez appliqu une transformation 3D une occurrence de clip, celle-ci devient un objet3D. Dsormais, lorsquelle sera slectionne sur la scne, cette occurrence de clip prsentera un indicateur dobjet 3D (par dfaut loption Afficher les axes pour les clips en 3D est coche dans la catgorie Gnral des prfrences) sous la forme dun repre 3D, comme le montre la Figure39.2. Nous avons dj mentionn plusieurs reprises les deux dimensions X et Y de la scne 2D. La troisime dimension est naturellement Z. Dans lenvironnement, la coloration des axes et des contrles des outils 3D repose sur la convention
276
Flash CS5
rouge pour X, vert pour Y et bleu pour Z. Cette convention est assez courante dans les environnements 3D, puisquelle exploite le moyen mnmotechnique RVB=XYZ. Dans le cas o loccurrence de clip devenue objet 3D est imbrique dans un autre symbole clip danimation, celui-ci ne peut plus tre dit en place (voir section Crer des occurrences, Fiche33). La transformation 3D a une autre limitation que sa seule application aux clips : elle est incompatible avec le masquage (voir Fiche23). Les occurrences de clips instancies sur un calque de type Masque ne peuvent plus faire lobjet dune transformation 3D. Rciproquement, les calques contenant des occurrences de clips faisant lobjet dune transformation 3D ne peuvent plus prendre le type Masque. Dans le cas de symboles imbriqus il existe une notion despace 3D local et despace 3D global, avec un mode correspondant dapplication des transformations 3D. Pour une occurrence de clip instancie dans la scnario principal, lespace local et lespace global concident. Le mode par dfaut est le travail dans lespace 3D global, cest--dire lespace de la scne. Si vous enfoncez le bouton bascule dans la zone doptions du panneau Outils (ou si vous basculez temporairement en utilisant loutil touche d enfonce), vous travaillez dans lespace 3D local, cest--dire lespace du clip parent. Si vous souhaitez appliquer la mme transformation 3D un ensemble doccurrences, faites-en une slection multiple sur la scne avec la touche Maj. Lorsque vous slectionnerez loutil 3D, ses contrles safficheront relativement au dernier objet slectionn, mais la mme transformation sera applique toute la slection. Enfin, le rsultat visuel sur la scne de lapplication de transformations 3D dpend des deux paramtres de vise 3D que sont langle de perspective et le point de vue. Pour les comprendre, on peut faire une analogie avec la photographie et dire quils correspondent respectivement la focale de lobjectif et au point do la photographie est prise. Les valeurs de ces deux paramtres nont dimpact que sur les objets 3D. Ils seront traits la section Paramtres de vise de cette fiche.
Figure39.2
Indication du repre 3D lors de la slection sur la scne dun objet 3D.
Vert Bleu Rouge
Le fichier source du papillon 3D (FCS5_39a.fla) est disponible dans les exemples de ce livre.
277
Translation 3D
Lorsque vous slectionnez loutil Translation 3D (cliquer sur licne slectionne lautre outil 3D; il faudra donc ventuellement cliquer une seconde fois), les contrles dessins Figure39.3 saffichent sur loccurrence slectionne, ou sur la dernire occurrence slectionne dans le cas dune slection multiple. Au survol des deux ttes de flches (rouge et verte) ou du point origine (bleu), le pointeur sorne respectivement dun X, dun Y ou dun Z.
Figure39.3
Les contrles de loutil Translation 3D.
Translation en X R Z Y X
Translation en Y V
Translation en Z B
RV B XY Z
La Figure39.4 donne gauche un exemple de translation 3D en X en faisant glisser horizontalement la tte de flche rouge. droite de cette mme figure en repartant toujours de la mme position initiale, il sagit de translation 3D en Y en faisant glisser verticalement la tte de flche verte.
Figure39.4
Translation 3D en X ( gauche) et en Y ( droite).
Les deux exemples prcdents sont trompeurs en ce quils semblent suggrer que les translations 3D en X et en Y concident avec les translations 2D en X et en Y. Ceci nest vrai que parce que, dans le cas de la Figure39.4, les axes X et Y du repre de lobjet 3D concident avec les axes de la scne 2D. Lobjet 3D de la Figure39.5 a subi une rotation 3D autour deY, de sorte que laxe X de son repre3D ne concide plus avec laxe X de la scne 2D. La figure montre que, dans un tel cas, la translation 3D en X ne seffectue plus dans le plan de la scne.
278
Flash CS5
La translation 3D en Z seffectue en faisant glisser verticalement le point bleu. Lobjet 3D de la Figure39.6 tant dans le plan de la scne, la translation en Z le dplace perpendiculairement celui-ci. Leffet de perspective joue et lobjet se dplace selon des lignes de fuite (qui convergent au point de fuite). Dans un sens (figure de gauche), lobjet 3D se rapproche et sa taille apparente augmente. Dans lautre sens (figure de droite), lobjet 3D sloigne et sa taille apparente diminue.
Figure39.5
Translation 3D en X sur un objet 3D ayant subi au pralable une rotation 3D.
Figure39.6
Translation 3D en Z: rapprochement ( gauche) et loignement ( droite).
Si vous prfrez effectuer la translation 3D numriquement plutt quinteractivement, il faut utiliser le sous-panneau Vue et position 3D du panneau Proprits (voir Figure37.6). Pour appliquer une translation 3D en X, en Y ou en Z, il suffit simplement de modifier respectivement la valeur du champ X, Y ou Z. Remarquez que ds lors que la translation ne se fait plus paralllement au plan de la scne, agir sur une coordonne en modifie galement une seconde, du fait de la perspective. Puisque la taille apparente de lobjet 3D change, les champs W et H (largeur et hauteur) sont galement modifis.
Rotation 3D
Lorsque vous slectionnez loutil Rotation 3D (cliquer ventuellement deux fois sur licne), les contrles dessins Figure39.7 saffichent sur loccurrence slectionne, ou sur la dernire occurrence slectionne dans le cas dune slection multiple. Comme pour la transla-
279
tion 3D, au survol des diffrents traits rouge, vert et bleu le pointeur sorne respectivement dun X, dun Y ou dun Z.
Figure39.7
Les contrles de loutil Rotation 3D.
Z Y X R V Rotation autour de X Rotation autour de Y
RV B XY Z
Rotation autour de Z Rotation libre
Orange
Tel quil est reprsent sur la Figure39.7, le contrle de rotation semble bi-dimensionnel, mais cest uniquement son apparence tant que les axes 3D X et Y restent dans le plan de la scne 2D. Les traits rouge et vert sont en fait des cercles de mme diamtre que le bleu, mais ils sont initialement vus de profil, leur plan perpendiculaire celui de la scne. Les contrles rouge, vert et bleu sont en fait trois cercles perpendiculaires dcoupant une sphre en octants. Un quatrime cercle orange est concentrique au cercle bleu, de diamtre lgrement suprieur celui-ci. Le centre commun aux quatre cercles (non reprsent sur la figure) est matrialis sur la scne par un gros point blanc. Il dsigne le point pivot, autrement dit le centre des rotations. Vous pouvez le dplacer par simple glisser-dposer. Si vous double-cliquez dessus, il est rinitialis au centre du rectangle englobant de loccurrence de clip en cas de slection simple et en cas de slection multiple au centre du rectangle englobant toute la slection (doublecliquez sur une occurrence de clip en maintenant enfonce la touche Maj pour rinitialiser le point pivot de la slection multiple au centre du rectangle englobant de cette occurrence). Les coordonnes 3D du point pivot sont consultables dans le panneau Transformer (voir la Figure37.6) sous lintitul Point central 3D, o vous pouvez les modifier. Lutilisation des quatre contrles de rotation est simple, puisquil suffit de faire tourner un cercle dans un sens ou dans lautre. La Figure39.8 illustre une rotation de laile droite du papillon autour de X ( gauche) et en repartant toujours de la mme position initiale autour de Y ( droite). Dans ce cas particulier o les cercles rouge et vert sont vus de profil et leur perpendiculaire parallle aux axes X et Y de la scne 2D, la rotation 3D autour de X dcoule dun glisser horizontal vers la gauche ou la droite et la rotation 3D autour de Y dun glisser vertical vers le haut ou le bas. Vous pouvez contraindre les rotations en enfonant la touche Maj. Elles sont alors dun angle multiple de 45. La Figure39.9 illustre une rotation de laile du papillon autour de Z ( gauche). Dans ce cas particulier o le cercle bleu est dans le plan de la scne 2D, il sagit
280
Flash CS5
de faire tourner le contrle dans ce plan. La partie droite de cette mme figure montre une rotation 3D libre applique via le cercle orange laile du malheureux papillon. Une rotation libre est en fait la composition dune rotation autour de X et dune rotation autour de Y.
Figure39.8
Rotation 3D autour de X ( gauche) et autour de Y ( droite).
Figure39.9
Rotation 3D autour de Z ( gauche) et rotation 3D libre ( droite).
Aprs toutes ces manipulations 3D assez barbares de laile droite de notre papillon, heureusement virtuel, la Figure39.10 vous en montre une plus respectueuse de son intgrit: une rotation 3D libre a t applique simultanment aux occurrences des trois clips qui le composent aprs slection multiple de celles-ci.
Figure39.10
Rotation 3D libre applique aux trois occurrences de clips composant le papillon.
Si vous prfrez effectuer la rotation 3D numriquement plutt quinteractivement, il faut utiliser le panneau Transformer o se trouvent des coordonnes X, Y, Z de Rotation 3D (voir la Figure37.6). Les champs sont comme les autres des champs de texte interactif: il suffit de faire glisser gauche ou droite pour diminuer ou augmenter la valeur. Vous pouvez bien sr
281
saisir une valeur, qui sera tronque au minimum 360 et au maximum 360. Noubliez pas quen bas droite du panneau Transformer se trouve un bouton Supprimer la transformation qui restaure votre occurrence de clip dans son tat initial. Il est trs pratique lorsquaprs un certain nombre de transformations 3D hasardeuses vous voulez tout reprendre zro.
Raccourci
G slectionne loutil Translation 3D. W slectionne loutil Rotation 3D. d bascule temporairement entre espace global et espace local.
Paramtres de vise
Laffichage de votre scne 3D sa projection dpend de deux paramtres de vise : langle de perspective et le point de vue. Leurs valeurs se trouvent en bas du sous-panneau Vue et position 3D du panneau Proprits (voir Figure37.6), lorsquun objet 3D est slectionn sur la scne. Il aurait t plus cohrent de placer ces paramtres dans les proprits de lanimation, puisque leurs valeurs sont globales au mme titre que les dimensions de la scne ou la cadence du scnario. Ils affectent donc tous les objets 3D et eux seulement. Langle de perspective correspond la focale dun appareil photo (dailleurs dans le panneau son icne est un appareil photo). Plus sa valeur est grande, plus les lignes de fuite convergent rapidement vers le point de fuite, et plus il y a de la distorsion. Les valeurs possibles vont de 1 180, la valeur par dfaut 55 tant cense correspondre une focale normale. La bote de dialogue Proprits du document possde une option coche par dfaut: Ajuster langle de perspective 3D pour prserver la projection actuelle de la scne. Cela signifie que si vous modifiez la taille de la scne, langle de perspective sera ajust automatiquement de sorte que lapparence des objets 3D soit prserve. La Figure39.11 montre une scne projete avec la valeur par dfaut 55 pour langle de perspective. Cette valeur passe 1 dans la Figure39.12. On remarque que les lignes de fuites y sont moins convergentes et la distorsion moindre. linverse, la convergence est trs accentue dans la Figure39.13 o langle de perspective vaut 120. La distorsion devient gnante.
282
Flash CS5
Figure39.11
Une scne 3D projete avec un angle de perspective par dfaut de 55.
Figure39.12
La mme scne 3D projete avec un angle de perspective de 1.
Figure39.13
La mme scne 3D projete avec un angle de perspective de 120.
Le point de vue lemplacement de lappareil photo ou de lil virtuel dfinit la direction de laxe Z du repre 3D. Il se trouve par dfaut au centre de la scne. Lorsque vous le modifiez dans le panneau Proprits, sa position est dnote sur la scne par lintersection dune horizontale et dune verticale grises. Le bouton Rinitialiser sert restaurer sa position par dfaut au centre de la scne. Les scnes des Figures39.11 39.13 taient projetes avec le point de vue par dfaut au centre de la scne. La Figure39.14 projette la mme scne avec un point de vue en bas droite et la Figure39.15 avec un point de vue en haut gauche.
283
Figure39.14
La mme scne avec un point de vue en bas droite de la scne.
Figure39.15
La mme scne avec un point de vue en haut gauche de la scne.
Aller plus loin

Lorsque vous publiez une animation (reportez-vous au dernier chapitre) exploitant les capacits 3D de Flash CS5, il faut imprativement publier pour la version10 du lecteur Flash et le langage ActionScript3. Sachez que lorsquelles sont utilises dans lenvironnement de ralisation, les capacits 3D ont certaines limitations. Par exemple, le point de vue est une proprit globale de lanimation et donc ncessairement le mme pour tous les objets3D. Par contre, lorsque vous faites de la 3D par programmation ActionScript3, chaque objet3D peut avoir son point de vue propre. Il est galement possible davoir de multiples points de fuite. Vous ntes pas non plus limit aux seules occurrences de clips: occurrences de boutons, occurrences du composant FLVPlayback et textes peuvent devenir directement des objets 3D. Si votre projet ncessite de vritables objets 3D ayant un volume (les objets manipuls ci-dessus sont plats) et si vous souhaitez un rendu plus sophistiqu (texturation des objets, sources de lumires multiples, ombres portes, rflexions diverses, etc.), deux voies soffrent vous. La premire vous est accessible mme si vous ntes pas programmeur. Le logiciel Electric Rain Swift 3D 6 (http://www.erain.com/products/swift3d/) regroupe un module
284
Flash CS5
de modlisation assez complet, un module danimation et un module de rendu selon divers algorithmes. Certains rendent une image de synthse de faon classique sous forme dimage bitmap, mais dautres la rendent sous forme de calques importables dans Flash contenant des donnes vectorielles. Ceci est tout fait original et explique le succs de ce logiciel. La seconde voie est rserve aux gens que neffraient ni la programmation ActionScript 3, ni les concepts de la vraie 3D. Elle passe par lutilisation de lun des moteurs de rendu en temps rel dans le lecteur Flash: Away3D (away3d.com), Papervision 3D (www.papervision3d.org) ou Sandy3D (www.flashsandy.org). La synthse dimages vectorielles en prproduction est au-del de la porte de ce livre, tout comme le rendu temps rel de modles dcrits par programmes ActionScript 3. Chacun pourrait faire lobjet dun chapitre, si ce nest dun livre entier.
Si votre lecteur de PDF ne lit pas le Flash, tlchargez lanimation qui suit depuis le site de Pearson. Elle se trouve dans larchive des exemples : CHAP5 > FCS5_39b.swf. Sinon, cliquez sur les boutons pour la lancer ou larrter.
Texte
Si le texte est un mdia indispensable et pris en compte depuis longtemps par Flash dans ses proprits les plus lmentaires, le rendu de texte sur la Toile est sujet de nombreuses variations. Ladoption du jeu de caractres Unicode et la possibilit dinclure la police de caractres lanimation ont amlior la situation. La version CS5 injecte dans Flash le savoir-faire traditionnel dAdobe en matire de typographie avec un nouveau moteur de rendu de texte TLF. Vous bnficiez ainsi doptions avances de typographie et de possibilits de composition dcrans telles quen offre un logiciel de PAO comme Adobe InDesign (voir www.adobe.com/fr/products/indesign/).
Fiche 40
Crer et formater un texte au contenu fixe

Deux voies soffrent vous pour intgrer du texte votre animation Flash: les champs de texte et les composants TextArea et TextInput. Ces derniers seront traits la Fiche72; dans ce chapitre il ne sera question que de champs. La version CS5 voit lintroduction dun nouveau moteur de texte, dit TLF (Text Lyout Framework), dont il sera question la Fiche 51. Lancien moteur de texte subsiste, pour des raisons de rtro-compatibilit, et il est rebaptis texte classique. Dans les fiches qui suivent, nous traitons de texte classique. Nanmoins, lessentiel des notions abordes valent galement pour le texte TLF, ce que nous indiquons rapidement en fin de fiche, avant de faire le point la Fiche 51. Nous reportons galement la dernire section de cette fiche, aprs que chacun des deux types de texte ait t prsent en dtail, ltude des motivations pour choisir un moteur de texte plutt que lautre.
Types de champs de texte classique

Dans Flash, il existe trois types de champs. Pour les comprendre, examinons diverses utilisations que lon peut faire du texte. Il y a dabord la titraille (titres dcrans, de sections, etc.) et les ventuels intituls dont vous dotez les lments dinterface de votre animation (boutons, cases cocher, champs de saisie, etc.). Il y a ensuite le cur de votre contenu, ce quen typographie lon nomme le labeur. Si celui-ci est comme la titraille et les intituls dfini une bonne fois pour toutes, utilisez du texte statique. Le contenu de ce type de texte tant connu au moment de la ralisation, il sera cod en dur dans lanimation Flash (et mme transform en image), linverse des deux autres types pour lesquels le contenu ne sera connu qu lexcution. Dans le cas du texte dynamique, le contenu est gnr la vole. Ce serait, par exemple, le cas pour un bulletin mto dont le texte proviendrait dune requte une base de donnes trs rgulirement mise jour. Dans le cas du texte de saisie, le contenu est gnr interacti-
286
Flash CS5
vement par chaque internaute qui rentre une valeur dans le champ prvu cet effet, souvent au sein dun formulaire. Le texte de saisie nest finalement quun cas particulier de texte dynamique, au sens o son contenu est galement modiable lexcution. Pour crer un champ de texte classique statique, slectionnez loutil Texte. Si besoin, slectionnez Texte classique dans le premier menu en tte du panneau Proprits. Le type du texte apparat dans le second menu, comme le montre la Figure 40.2. Texte statique est slectionn par dfaut. Si un autre type est slectionn, cest celui du dernier champ que vous avez cr. Dans ce cas, reslectionnez Texte statique. Le pointeur de la souris sest transform en rticule orn dun T. Cliquez-glissez ensuite un rectangle en pointill sur la scne pour dfinir le champ de texte. Sa largeur conditionnera le retour la ligne automatique (voir Fiche42). Peu importe que vous ne sachiez pas quelle dimension donner au champ, puisquil sera possible de le redimensionner aprs coup. Lorsque vous relchez la souris, le nouveau champ est slectionn et le curseur de saisie de texte y clignote, attendant que vous frappiez le texte ou que vous le colliez (Modifier> Coller au milieu). Si vous dslectionnez le champ de texte statique par exemple en cliquant en dehors sans y avoir plac aucun contenu, Flash le fait disparatre.
Raccourci
t slectionne loutil Texte.
Un champ de texte est ditable tant au niveau du fond le contenu du champ que de la formeses proprits. Pour modifier le contenu dun champ existant, slectionnez-le avec loutil Texte ou double-cliquez-le avec loutil Slection. Son rectangle englobant apparat alors en trait plein et lune des poignes de celui-ci est nettement plus grosse que les autres. Elle sert redimensionner le champ (cliquez-glissez-la). Comme lillustre la Figure40.1, la position, la forme et la couleur de cette poigne dnotent le type de texte. Remarquons dabord quelle se trouve en haut droite pour du texte statique et en bas droite dans tous les autres cas. Par ailleurs, aprs que vous avez trac un rectangle englobant, la poigne est de forme carre, ce qui indique un bloc de texte de largeur fixe. Si vous double-cliquez alors sur la poigne carre, elle prend la forme dun cercle, ce qui indique un bloc de texte de largeur variable, redimensionnement automatique.
Figure 40.1
Lemplacement, la forme et la couleur de la poigne indiquent le type dun champ de texte.
Texte
287
Sur les deux exemples du haut de la Figure40.1, contrairement aux quatre autres, lenglobant colle au plus prs du texte existant et si lon continue saisir des caractres il va sadapter en largeur au fur et mesure. Pour finir, remarquons quun texte dynamique peut tre dfilant, ce qui est indiqu par une poigne carre pleine. Notez que pour du texte vertical, la poigne se trouve toujours en bas, gauche dans le cas dun texte statique.
Contenu textuel
Dans Flash le codage des caractres repose sur Unicode, un code qui contient plus de240000 caractres appartenant un grand nombre dalphabets du monde entier, donc sans doute de quoi rpondre tous vos besoins. Devant une telle profusion, les deux questions qui se posent sont celles de la ralisation et de la relecture. Concernant la premire, il est vident que votre clavier, mme dmultipli par toutes les combinaisons possibles et imaginables de touches prfixes, ne saurait donner directement accs ces 240000 caractres. Pour les caractres non accessibles par une touche mme prfixe, le plus agrable est sans doute dutiliser une application vous permettant dexplorer visuellement les tables Unicode. Sous Mac OS, vous disposez ainsi du service Caractres (un service est un utilitaire transversal appelable dans diverses applications) dans lequel il suffit de slectionner le glyphe voulu avant de cliquer sur le bouton Insrer. Sous Windows, vous avez une application identique: Programmes> Accessoires> Outils Systme> Table des caractres. Un simple copier-coller permettra ensuite de rapatrier le caractre dans Flash en vous pargnant la barbarie des quatre chiffres hexadcimaux du code Unicode. Nanmoins, connaissant ce code vous pouvez aussi accder au caractre, par exemple sous Windows via une squence Alt, cest--dire en enfonant la touche alt tout en tapant le code. La seconde question est celle de la relecture. Un code de caractre ne trouve sincarner lcran, donc safficher, que sil existe un glyphe pour lui dans la police utilise, cest-dire la descriptionle plus souvent vectorielle de sa forme. Il est bien vident que si chaque police de caractres contenait 240000 glyphes sa taille serait rdhibitoire. En choisissant visuellement les caractres dans un utilitaire de type Caractres, vous tes assur de nutiliser que les glyphes existants de la police. ce niveau, reste la question de la prsence sur lordinateur de linternaute de ladite police pour pouvoir restituer le glyphe. Ce problme important fait lobjet de la Fiche44.
Proprits typographiques dun champ de texte classique

Aprs le fond, voyons la forme, cest--dire les proprits du champ de texte statique. Dans le panneau Proprits, les principales proprits typographiques du texte classique sont regroupes dans deux sous-panneaux: Caractre (reproduit la Figure40.2) et Paragraphe
288
Flash CS5
(Figure40.4). Comme avec tous les outils de dessin, vous avez deux faons de procder: soit vous dfinissez les valeurs des diffrentes proprits avant de tracer le champ, soit vous le faites aprs coup, aprs avoir re-slectionn le champ avec loutil Texte ou loutil Slection. Dans ce dernier cas, vous slectionnez lensemble du contenu du champ de texte, tandis quavec loutil Texte vous avez la libert de nen mettre en surbrillance (fond blanc opaque) quune portion seulement et de ne modifier les proprits que pour cette slection. La premire proprit dun champ de texte est son type classique ou TLF. La seconde proprit est son sous-type et rien ne vous empche de le modier aprs coup en choisissant une autre valeur dans le second menu droulant en haut du panneau Proprits. Laffichage de ce dernier se met jour en consquence. Comme tout objet graphique, un champ de texte a une position et des dimensions, aussi retrouve-t-on un sous-panneau Position et taille avec les quatre champs X, Y et L, H. Classiquement, vous repositionnez un champ de texte sur la scne laide de loutil Slection. Pour le redimensionner, nous avons voqu plus haut la poigne prvue cet effet. Vous pouvez galement passer par les valeurs numriques des quatre champs X, Y et L, H. Faites glisser la poigne pour diminuer ou augmenter une valeur ou saisissez-la directement. La seule restriction est que, pour du texte statique, vous ne pouvez agir sur la hauteur. Le texte peut tre transform comme nimporte quel autre objet graphique (voir Fiche16). Voyons maintenant les proprits typographiques (Figure40.2). Il sagit en premier lieu de choisir une police de caractres pour le texte de votre champ. Slectionnez-la dans le menu Famille, qui vous permet, par dfaut, den visualiser un chantillon en regard du nom (le mot sample affich dans une police de la famille en question). Vous retrouvez galement les polices dans le menu Texte> Police. Une famille de polices contient ventuellement des dclinaisons de style Normal, Italique, Gras et Gras italique par exemple. Malheureusement, les options du menu Style sont restes en anglo-amricain (et ce que vous cochiez ou non dans les prfrences de texte loption Afficher les noms de polices non romaines). Selon la famille, on y trouve Regular, Italic, Oblique, Bold, Light ou des combinaisons comme Light Italic ou Bold Oblique. On trouve galement Gras et Italique dans le menu Texte> Style.
Figure 40.2
Le sous-panneau Caractre du panneau Proprits dun champ de texte classique statique.
Texte
289
Il est important de noter ds maintenant que pour un champ de texte statique, une partie de la police choisie (la description de la forme des caractres glyphe utiliss) est automatiquement incorpore au fichier SWF. Voyez la Fiche44 pour en savoir plus sur linclusion de polices de caractres. Vous choisissez la couleur de votre texte en cliquant comme dhabitude sur la puce ddie (voir Fiche17). La taille des caractres les typographes parlent aussi du corps de la police sexprime en points. Cliquez-glissez la valeur du champ numrique Taille pour modifier celle-ci. Vous pouvez galement choisir lune des valeurs du menu Texte> Taille. En matire despacement des caractres, il faut distinguer deux proprits: linterlettrage et le crnage (en typographie, on parle respectivement dapproche de groupe et dapproche de paire). Prenons par exemple le mot valise trac sur la scne tel que reproduit Figure40.3. En haut, la Taille vaut 78 pt (gardez toujours lesprit que le point la diffrence du pixel qui est une unit absolue est une unit relative la police) et Espacement des lettres (il faut lire interlettrage) vaut 24.0. Au milieu, cette dernire proprit vaut 40.0 et lon constate que lespacement a t appliqu chaque paire de caractres. Il aurait galement t appliqu chaque paire de mots sil y en avait eu plusieurs. Lorsque vous rglez cette valeur, elle vaut pour lensemble de la ligne sur laquelle se trouve le curseur dinsertion, indpendamment de sa position exacte sur la ligne. La valeur par dfaut est 0. Les valeurs maximales sont 60 points et 60 points. Pour cette dernire, tous les caractres se chevauchent. Vous pouvez galement rgler la valeur par incrments dun demi-point via les commandes Augmenter et Diminuer de Texte> Espacement des lettres et revenir la valeur par dfaut via Texte> Espacement des lettres> Rinitialiser.
Figure 40.3
Linterlettrage (par dfaut en haut, augment au milieu) et le crnage (affin en bas).
OptiOn+CMd+FlCHE GaUCHE ou drOitE (Mac) ou alt+Ctrl+FlCHE GaUCHE ou drOitE (Win) diminue ou augmente linterlettrage. Enfoncer la touche Maj simultanment pour avoir un incrment plus grand. OptiOn+CMd+FlCHE HaUt (Mac) ou alt+Ctrl+FlCHE HaUt (Win) rinitialise linterlettrage.
Raccourci
290
Flash CS5
En regardant maintenant de plus prs le traitement dinterlettrage, on constate que cest par dfautcest--dire sans recours au crnage le mme espace qui est plac entre chaque paire de caractres. Plus exactement, le mme espace est plac entre les rectangles englobants de chaque paire de caractres : lespace est le mme entre les empattements infrieurs du A et du L quentre lempattement infrieur gauche du A et lempattement suprieur droit du V, et ce quelque soit linterlettrage (haut et milieu de la Figure40.3). En bas de la Figure 40.3, le crnage (approche de paire) a t utilis pour produire une solution plus agrable lil entre rapprochant le V du A. Pour cela, on a slectionn le V avant de lui appliquer une valeur dEspacement des lettres de 10.0 au lieu de 24.0, cette valeur ntant valable que pour la paire AV. En effet, si lon slectionne le mot en entier, un trait apparat la place de la valeur dEspacement des lettres, signifiant diffrentes valeurs sur la ligne. Loption Crnage automatique est coche par dfaut. En effet, de nombreuses polices contiennent des informations mtriques au sujet des paires de caractres qui, comme AV, posent problme. Il est de bon got que ces informations dapproche de paire automatique, si elles existent, soient utilises. Insistons une nouvelle fois sur limportance de lincorporation de la police au fichier SWF (ceci nest fait automatiquement que pour les champs statiques, voir Fiche44), faute de quoi de tels ajustements fins nont plus aucun sens, puisquune police de remplacement risque dtre utilise sur la machine de linternaute. Les options de lissage seront traites la Fiche45. Par dfaut, le texte classique que vous intgrez votre animation Flash est slectionnable. Cela signifie que linternaute est libre de le slectionner dans la fentre de son navigateur pour le copier ailleurs. Parfois cela ne pose aucun problme, notamment lorsque vous souhaitez rendre accessible linformation contenue dans le labeur. Dautres fois, ce nest pas souhaitable, soit pour des raisons fonctionnelles (il ny a aucune raison de permettre la copie de la titraille par exemple), soit pour des questions de droits dauteur. Slectionnez le champ de texte sur la scne, puis dsactivez loption Slectionnable via le bouton correspondant (le premier gauche de la srie de trois; voir Figure40.2). droite du bouton prcdent se trouvent deux autres boutons: Rendre le texte au format HTML et Afficher la bordure autour du texte. Pour du texte statique, ils nont aucune raison dtre et sont donc griss. Nous les retrouverons aux Fiches 43 et 46 o nous traiterons des autres types de champs. loccasion, notamment si vous tes amen manipuler des notations mathmatiques, vous aurez besoin de placer du texte en exposant ou en indice. Slectionnez le ou les caractres concerns laide de loutil Texte, puis cliquez sur le bouton bascule correspondant Activer/ dsactiver lindice ou Activer/dsactiver lexposant. Dans le menu Texte> Style, on retrouve aussi Indice et Exposant. Vous navez, en texte classique, aucun moyen de rgler le dcalage vertical. Donc, si le traitement automatique ne vous convient pas, vous avez l une premire motivation pour adopter le texte TLF. En texte TLF galement, approche de groupe et approche de paire automatique se trouvent dans le sous-panneau Caractre, respectivement
Texte
291
sous les intituls Interlettrage et Crnage automatique. Le texte TLF offre les styles supplmentaires Soulign et Barr (voir Fiche 51).
Proprits de mise en cran dun champ de texte

Si le sous-panneau Caractre est ddi la typographie, comme son nom lindique le souspanneau Paragraphe (Figure40.4) est quant lui ddi la mise en page, ou plutt la mise en cran. La rubrique Format comprend un jeu de quatre boutons poussoirs. Cet intitul vague est un curieux choix puisquil sagit en fait dalignement: Aligner gauche, Aligner droite, Centrer, Justifier. On retrouve ces quatre options classiques dans le menu Texte> Aligner.
Figure 40.4
Le sous-panneau Paragraphe du panneau Proprits dun champ de texte classique statique.
Maj+CMd+l (Mac) ou Maj+Ctrl+l (Win) aligne gauche (left), Maj+CMd+C (Mac) ou Maj+Ctrl+C (Win) centre, Maj+CMd+r (Mac) ou Maj+Ctrl+r (Win) aligne droite (right), Maj+CMd+j (Mac) ou Maj+Ctrl+j (Win) justifie.
Raccourci
La rubrique Espacement comprend le retrait et linterligne. Le premier est en fait lalina, cest--dire le retrait droite appliqu la premire ligne de chaque paragraphe. Il concerne donc ncessairement la premire ligne du champ de texte et ventuellement toute ligne qui vient immdiatement aprs un retour chariot explicite (voir Fiche42). La valeur dalina par dfaut est 0. Les valeurs maximales sont 720 et 720pixels. Nanmoins, cette valeur est dpendante de la marge gauche et vous ne pouvez pas aller au-del du bord gauche du champ de texte. Linterligne est la distance verticale entre la ligne des jambages (j, g, p, q, etc.) et celle des hampes (b, d, h, k, l, etc.) de la ligne de texte suivante. Sa valeur par dfaut est 2. Avec une
292
Flash CS5
valeur ngative, vous rapprochez les lignes de texte, au risque de les faire se chevaucher. Avec une valeur positive, vous arez le texte. Les marges gauche et droite ont une valeur de 0 pixel par dfaut et 720 au maximum. Au risque de lasser, rappelons que tous ces rglages mtriques nont de sens que si la police utilise est incorpore au fichier SWF, ce qui est le cas implicitement pour un champ statique. Les options du menu Comportement ne sont pas accessibles pour un champ statique. Elles seront traites la Fiche42. Dans la version CS5, lOrientation du texte ne se trouve plus dans le sous-panneau Paragraphe, mais en tte, droite du second menu de type de texte. Lorientation par dfaut du texte est bien entendu Horizontal. Les deux autres choix possibles sont Vertical, de gauche droite ou Vertical, de droite gauche. Lorsque vous choisissez lune des options Vertical, le texte est dispos en colonnes, chaque retour chariot crant une nouvelle colonne. Cest le cas dans lexemple de la Figure40.5 o lon a insr un retour chariot avant chaque changement de lettre. Notez que les caractres nont pas t pivots, la diffrence de ce qui se passerait si vous appliquiez au texte une rotation de 90 (voir Fiche16).
Figure 40.5
Du texte vertical.
Aprs avoir choisi lune des options Vertical, le sous-panneau Paragraphe sadapte : les quatre icnes des options dalignement refltent la nouvelle orientation. Le bouton qui, dans la version prcdente, permettait de faire subir aux caractres dun texte vertical une rotation de 90 a disparu de la version CS5. Cela se justifie par le fait que le texte TLF (voir Fiche 51) offre toutes les sophistications souhaitables pour grer du texte vertical. Voici une seconde motivation pour ladopter. Dans la catgorie Texte des Prfrences, reproduite Figure40.6, trois options relatives au texte vertical sont dcoches par dfaut. Il sagit de lorientation verticale par dfaut, le choix du sens (de gauche droite ou linverse) et la dsactivation du crnage. Ce sont des options cocher si vous travaillez dans une langue asiatique.
Texte
293
Figure 40.6
La fentre Prfrences, catgorie Texte.
Depuis la version CS4, vous avez la possibilit de personnaliser lapparence des menus de polices (dernire rubrique de la bote de dialogue de la Figure40.6). La premire option vous permet dafficher en anglais les noms des polices non romaines, cest--dire italique, gras, etc. Nous avons vu prcdemment que par dfaut les menus de polices donnent un aperu de chacune delles (le mot sample). Un menu vous permet de choisir la taille de cet aperu parmi cinq. Nous reviendrons la Fiche44 sur ce qui se cache derrire laffreux anglicisme mappage des polices. En texte TLF, linterligne passe du sous-panneau Paragraphe au sous-panneau Caractre. Le texte TLF offre des options dalignement de la dernire ligne dun paragraphe justifi, ainsi que des espacements avant et aprs le paragraphe (voir Fiche 51).
Fiche 41
Redimensionner un bloc de texte

Clarifions demble un point. Lorsque vous redimensionnez un bloc de texte, cest sur le conteneur que vous agissez. Les caractres conservent leur taille (ou corps, voir la ficheprcdente). Nous avons dj vu prcdemment comment redimensionner un champ de texte. Il faut dabord le slectionner avec loutil Texte, dun simple clic. Le curseur de saisie clignote, le rectangle englobant devient noir et lune de ses quatre poignes devient plus grosse. Vous obtenez le mme rsultat dun double-clic avec loutil Slection (le simple clic ne fait que slectionner le bloc de texte, son rectangle englobant est alors bleu et les quatre
294
Flash CS5
poignes sont identiques). Il suffit alors de faire glisser la grosse poigne, comme lillustre la Figure41.1. Ce faisant, dans le cas o cette poigne tait un cercle (redimensionnement automatique), elle se transforme en carr (champ largeur fixe). Si besoin, vous avez la possibilit de revenir plus tard au redimensionnement automatique en double-cliquant sur la poigne carre.
Figure 41.1
Redimensionnement dun champ de texte au moyen de la grosse poigne.
Cette grosse poigne est spciale en ce quelle indique diffrents modes et permet de basculer de lun lautre. Mais en ce qui concerne le redimensionnement, aprs avoir slectionn le champ de texte avec loutil Slection (rectangle englobant bleu), vous tes libre dutiliser nimporte laquelle des quatre poignes pour redimensionner horizontalement (pour un champ statique la hauteur ne peut tre change). La Figure41.2 montre que laugmentation de la taille de la police modifie ncessairement les dimensions dun champ de texte.
Figure 41.2
Modification du corps de la police dans le champ de texte prcdent.
Une troisime mthode de redimensionnement, toujours aprs avoir slectionn le champ de texte avec loutil Slection, consiste agir sur la valeur de largeur L du sous-panneau Position et taille du panneau Proprits (faire glisser ou diter la valeur). La dernire mthode consiste utiliser loutil Transformation libre. Sachez nanmoins que vous allez dformer les caractres. En redimensionnant ainsi un champ de texte statique, vous allez ncessairement comprimer ou tirer les caractres. La Figure41.3 montre ainsi la contraction dun champ de texte. Le rsultat de lopration est visible gauche de la Figure 41.4. droite de cette mme figure, le texte a, en outre, subi une rotation et une inclinaison.
Texte
295
Figure 41.3
Redimensionnement dun champ de texte laide de loutil Transformation libre.
Figure 41.4
Rsultat de la transformation prcdente ( gauche), puis inclinaison et rotation ( droite).
Ce qui a t dit ci-dessus, pour les champs de texte classique de type statique, reste vrai pour les autres. Outre le fait que dans ce cas la grosse poigne napparat plus dans langle suprieur droit, mais dans langle infrieur droit, la principale diffrence est que vous pouvez redimensionner aussi bien horizontalement que verticalement un champ de texte dynamique ou pour la saisie. Vous pouvez donc cette fois-ci faire glisser nimporte laquelle des quatre poignes horizontalement ou verticalement, ou agir sur la valeur de hauteur H comme sur la valeur de largeur L du sous-panneau Position et taille du panneau Proprits. Toute transformation gomtrique, et le redimensionnement en est une (voir Fiche16), nest possible que parce que la police utilise est prsente sur votre machine. En effet, les calculs se font partir de la description vectorielle des glyphes, cest--dire des formes des caractres. Pour que la mme transformation soit galement possible sur la machine cliente, il faudrait que la police utilise y soit aussi prsente. Cest la raison pour laquelle il est ncessaire par scurit dincorporer cette police votre fichier SWF. Si pour un champ de texte statique cela est fait automatiquement par Flash la publication, pour un champ de texte dynamique ou pour la saisie, vous devrez le faire explicitement (voir Fiche44). Enfin, mentionnons le cas particulier des polices dites, maladroitement, de priphrique (voir encore la Fiche 44). Sagissant en fait des polices prsentes sur lordinateur client, polices de la machine serait une traduction plus sense. Ces polices font lobjet dun traitement spcial. Dans lenvironnement de cration Flash, elles apparaissent bien redimensionnes comme vous en avez dcid, mais lexcution de lanimation, les caractres auront conserv leurs proportions, ce qui peut conduire un rsultat visuel totalement diffrent!
296
Fiche 42
Flash CS5
Grer les blocs de texte volumineux

Avant dexaminer les trois options de Comportement qui soffrent vous pour le texte en grande quantit, il nous faut rflchir la notion de retour chariot, laquelle prsente des subtilits que certains ne souponnent mme pas. Revenons lexemple de la Figure41.1. La phrase y tient initialement sur une seule ligne. Aprs redimensionnement du champ, la phrase tient sur trois lignes. Flash a rajout un retour chariot aprs chacun des mots le et suprieures. Ces retours chariot peuvent tre qualifis dimplicites au sens o ils nont pas t saisis, ni colls dans le champ de texte et ne sont pas cods dans le contenu. Considrons maintenant les quatre vers de Baudelaire de la Figure42.1. Le champ de texte statique est initialement en redimensionnement automatique (cercle) et son englobant cadre parfaitement le texte. En dessous, la figure montre ce mme texte aprs agrandissement du champ qui est pass ainsi en largeur fixe (carr). Cette largeur est suprieure la longueur de chacun des vers, mais ceux-ci se terminant tous par un retour chariot, lagencement du pome na pas chang. En loccurrence, ces trois retours chariot peuvent tre qualifis dexplicites au sens o ils ont t soit saisis, soit colls dans le champ de texte. Dans le cas dun texte dynamique, le contenu affect la vole au champ contiendrait ces trois codes de retour chariot. Dans le cas dune saisie de texte exemple irraliste sil en est puisque la ralit des formulaires est beaucoup plus prosaque, linternaute aurait appuy trois fois sur lune des touches rEtOUr ou EntrE (pav numrique).
Figure 42.1
Un pome contient souvent des retours chariot explicites (ici dans un champ de texte statique).
La diffrence entre retour chariot explicite et retour chariot implicite tant faite, nous sommes en mesure de comprendre lenjeu des trois options de Comportement du sous-panneau Paragraphe que montre la Figure42.2. En effet si la dernire option contient bel et bien lexpression sans retour, dans les faits les deux options multilignes (les deux dernires) prendront au moins en compte les retours chariot explicites.
Texte
297
Figure 42.2
Les options de Comportement pour un champ de texte classique dynamique.
Reprenons les quatre vers de Baudelaire et donnons au champ qui les contient le type Texte dynamique (voir le haut de la Figure42.2). Le champ avait initialement le type Texte statique (poignes en haut droite sur la Figure42.1). Ce changement de type fait, le menu Comportement devient accessible. Si nous y slectionnons loption Multiligne, puis que nous rduisons un peu la largeur du champ, aprs dslection, le pome se prsente tel que reproduit la Figure42.3. Autrement dit, Multiligne signifie avec dventuels retours chariot implicites. Ces derniers sont rajouts de sorte que le texte ne soit pas tronqu dans la largeur. Par contre, il pourrait ltre dans la hauteur si celle-ci tait insuffisante.
Figure 42.3
Le champ de texte classique dynamique du pome en comportement Multiligne.
La Figure42.4 montre le pome aprs slection de loption Multiligne sans retour. Les vers sont tronqus. Lexpression sans retour signifie donc plus exactement sans aucun retour chariot implicite.
298
Flash CS5
Figure 42.4
Le mme champ de texte classique dynamique en comportement Multiligne sans retour.
Enfin, la Figure 42.5 montre le pome aprs slection de loption Une seule ligne. Sans surprise, il ne reste plus que le premier vers, toujours tronqu puisque la largeur du champ de texte na plus chang. Ce mode est celui par dfaut des champs de texte dynamique ou pour la saisie.
Figure 42.5
Le mme champ de texte classique dynamique en comportement Une seule ligne.
En texte TLF, les proprits Comportement et Nbre max. de car. se trouvent dans le souspanneau Conteneur et flux (voir Fiche 51).
Fiche 43
Crer des liens hypertextes

La cration de liens hypertextes se fait dans le sous-panneau Options du panneau Proprits, reproduit la Figure43.1. Notez quil nest pas possible dajouter un hyperlien du texte vertical. Le paramtrage du lien demande dau moins renseigner le champ Lien avec une URL valide. Vous pouvez soit crer un hyperlien externe, cest--dire cibler un fichier sur un autre serveur, grce une URL absolue; soit crer un hyperlien interne, cest--dire cibler un fichier sur le mme serveur, grce une URL relative. Contrairement ce qui se passe dans le champ URL de la plupart des navigateurs, il nest pas question domettre la partie protocole,
Texte
299
ni la partie www. Si vous ne saisissez ou ne copiez pas intgralement lURL absolue, Flash linterprtera comme une URL relative, ce qui gnrera une erreur.
Figure 43.1
Dans du texte classique, le souspanneau Options sert dfinir un hyperlien.
Par cible, il faut en fait entendre le contexte daffichage du fichier cibl par lhyperlien. Ne rien renseigner dans le champ Cible a le mme effet que slectionner dans le menu loption _self : le fichier cibl saffichera dans la mme fentre de navigateur, et dans lventualit o il y ait un cadre (frame), dans ce mme cadre. Lautre option utile est _blank, si vous voulez que le fichier cibl saffiche dans une nouvelle fentre. Quant aux deux dernires options, vous pouvez les oublier (avec _parent, le fichier cibl saffichera dans la fentre qui est le parent de la fentre courante ; avec _top, dans le cas dune fentre contenant plusieurs cadres, le fichier cibl saffichera dans la mme fentre dans le cadre de plus haut niveau). Concrtement, pour crer un hyperlien classique dans un champ de texte statique, commencez par y slectionner quelques mots avec loutil Texte avant de renseigner les champs Lien et Cible. Vous pouvez aussi slectionner le champ avec loutil Slection avant de paramtrer le lien dans le sous-panneau Options. Dans ce cas, lhyperlien sapplique au champ tout entier. De la mme faon, vous pouvez appliquer un hyperlien globalement un champ de texte dynamique. Pour un champ de texte dynamique, vous avez galement la possibilit de rendre le texte au format HTML en enfonant le bouton homonyme dont licne est un signe <> (au centre de la srie de trois; voir Figure40.2). Le texte tant dans ce cas spcifi en HTML, il pourra contenir des hyperliens dfinis de manire classique via des balises <a> et leurs valeurs dattributs href et target. Pour supprimer un hyperlien existant dont vous ne voudriez plus, vous pouvez le faire en slectionnant le texte et en effaant lURL contenue dans le champ Lien.
300
Flash CS5
URL. Sur la Toile, tout doit tre localis sans ambigut (fichiers, botes aux lettres, etc.). On utilise pour cela une URL, acronyme de Uniform Resource Locator. Dans sa forme la plus complte par exemple : http://www.maPetite-Entreprise. com/imagerie/accueil.html une URL comporte quatre parties. La premire (ici http:) dsigne le protocole en jeu dans la transaction, dans notre cas HyperText Transfer Protocol (HTTP) le protocole le plus couramment utilis. La section suivante de lURL (ici //www.maPetite-Entreprise.com) cible le serveur auquel se connecter. Le plus souvent, comme ici, il est dsignpar son nom de domaine, www indiquant quil sagit dun serveur de la Toile. La troisime section (ici /imagerie) est un chemin daccs dans la hirarchie de rpertoires de la machine cible. Enfin vient un nom de fichier (ici /accueil.html). URL absolue versus relative. LURL telle que dcrit ci-dessus est dite absolue. Il existe galement des URL relatives. Dans ce cas, il sagit simplement de cibler un autre fichier sur le mme serveur que celui qui contient le fichier courant. LURL se rduit donc dans ce cas un chemin daccs relatif dans la hirarchie de rpertoires de cette machine. Elle ne contient ni protocole, ni nom de domaine, celui-ci tant suppos tre le mme que celui partir duquel le chier SWF est servi. URL de courriel. Pour un envoi de message, le protocole est mailto. LURL prend alors la forme mailto:<adresse>@<fournisseurAccs> ou mailto:<adresse>@<No mDeDomaine>. Par exemple: mailto:alain.b@maPetiteEntreprise.com.
Notions cls
Notez que dans lenvironnement de cration, aprs avoir dfini un hyperlien les mots qui en sont le support sont souligns. Par contre, lexcution de lanimation, la seule indication par dfaut que linternaute aura de lexistence de votre hyperlien sera le changement du pointeur de souris (main au doigt point), si daventure il survole les mots qui en sont le support. Rien nest prvu pour mettre en uvre automatiquement un code visuel comme le bleu soulign et/ou les changements de couleur de lhyperlien en fonction de ses tats successifs. Si vous souhaitez ce type dindicateurs, cest vous de les mettre en uvre, tant du point de vue graphique (dans un scnario) que fonctionnel (par programmation). Si vous tes observateur, vous avez sans doute remarqu un troisime champ Variable dans le sous-panneau Options. Nous lavons pass sous silence parce que la dfinition dune variable associe un champ de texte quil soit dynamique ou ddi la saisie est une pratique dsormais dconseille. Ce champ nest l que pour des raisons de compatibilit avec les versions plus anciennes de Flash. Il est tout autant possible dajouter un hyperlien des caractres, des mots ou des blocs entiers de texte TLF. Il faut seulement noter que les champs Lien et Cible se trouvent dans le sous-panneau Caractre avanc (voir section Typographie classique, Fiche 51).
Texte
301
Grer les polices de caractres
Polices et glyphes
Les fiches prcdentes ont renvoy de nombreuses reprises la prsente. Effectivement, au chapitre du texte, la question de la police de caractres est centrale. Rappelons brivement en quoi consiste le codage informatique du texte afin de mieux saisir les enjeux de ce qui suit. Puisque dans le monde numrique tout est nombre, un caractre dans votre texte est un nombre dans le fichier. Ce nombre est une entre dans une table, dite jeu de caractres. Parmi les diffrents jeux de caractres existants, citons un ancien: ASCII, limit 256entres; et un contemporain: Unicode, le jeu de caractres quutilise Flash et qui peut coder plus de 240000 caractres. Le jeu de caractres est donc une table qui associe un nombre (dit point de code) un caractre abstrait, cest--dire quelque chose de comprhensible par un esprit humain. Ainsi par exemple, au point de code 00C0 quatre chiffres hexadcimaux en Unicode correspond le C cdille majuscule. Pour que le caractre ne reste pas abstrait, mais se concrtise lcran, en aval de cette premire table purement informatique il faut une seconde table graphique: la police de caractres. Une police est une table qui associe un certain nombre de caractres abstraits un glyphe, cest--dire une apparence visuelle. Celle-ci est le plus souvent dcrite sous forme de contours vectoriels. Sous Windows, les polices peuvent tre visualises depuis le dossier Fonts du dossier Windows. Sous Mac OS X, lutilitaire Livre des polices permet dexplorer les formes de caractres des diverses polices prsentes sur lordinateur. La Figure44.1 montre la police Didot classe dans la catgorie Traditionnel. Comme toutes les polices de cette catgorie, elle tait utilise traditionnellement en imprimerie et ses caractres possdent des empattements, les petits traits aux extrmits qui rappellent les lignes dappui et aident lil du lecteur suivre. Dans le jargon typographe, ces polices sont dites serif.
Figure 44.1
La police Didot dans le Livre des polices de Mac OS X.
Fiche 44
302
Flash CS5
Substitution de polices
Lorsque vous installez un systme dexploitation sur votre ordinateur, linstallation comprend un rpertoire de polices (sous Mac OS, par exemple, le sous-dossier Fonts du dossier Bibliothque ; sous Windows, le dossier Fonts du dossier Windows). Ce rpertoire comprend des fichiers de description de polices que lon pourrait qualifier de polices systme. Linstallation de certaines applications complte ce rpertoire. laide dun utilitaire ddi ou sous Mac OS laide de lutilitaire fourni, Livre des polices , vous pouvez grer lensemble des polices reconnues sur lordinateur. Ceci nous fait prendre conscience du fait quil y a pratiquement autant de collections de polices diffrentes quil y a dordinateurs. Bien sr, certaines polices sont prsentes sur tous les ordinateurs Mac ou PC, comme Arial, Helvetica, Times ou Times New Roman. Imaginons que vous rcupriez un fichier source FLA et que les textes prsents dans lanimation utilisent le style Gras de la police Didot et le style Italique de la police Gill Sans (Sans indique quil sagit dune police sans serif, donc sans empattements). La Figure44.2 montre la bote de dialogue qui souvre louverture de ce fichier dans Flash (par dfaut, loption Afficher les polices manquantes est coche dans les prfrences; voir Figure40.6). Vous pouvez galement y accder via la commande Flash> Mappage de polices (Mac) ou diter> Mappage de polices (Windows). Dans la version franaise de Flash, lexpression font mapping est rendue par langlicisme horrible mappage des polices. Dans cette bote de dialogue, il sagit tout simplement dtablir des correspondances de polices, autrement dit de spcifier quelle police prsente substituer une police absente. Aprs avoir slectionn une police absente dans la liste, droulez le menu Police de remplacement pour fixer votre choix parmi lune des polices actives sur votre ordinateur, ou une police de priphrique (_serif, _sans ou _typewriter; voir section Polices de priphrique de cette mme fiche) ou encore la police systme par dfaut (dfinie via les menus Mappage des polices par dfaut et Style de la catgorie Texte des prfrences, voir Figure40.6).
Figure 44.2
La bote de dialogue qui souvre lorsquune police utilise nest pas installe sur la machine.
Aprs avoir valid votre remplacement, par exemple _serif la place de Academy Engraved, celui-ci apparat dans le sous-panneau Caractre lorsque vous slectionnez un texte utilisant la police. Comme le montre la Figure44.3, le nom de la police dorigine est entre parenthses suivi de celui de la police de remplacement.
Texte
303
Figure 44.3
Rsultat dune substitution de police dans le souspanneau Caractre.
La police que vous aurez choisie en ralisant votre animation risque dtre absente de lordinateur de certains internautes, surtout si vous ne vous tes pas content des classiques mentionnes ci-dessus. Linternaute verra donc votre animation avec une police de remplacement. Si la mtrique des glyphes de cette dernire est trs diffrente de celle des glyphes de la police que vous aviez choisie, le rsultat peut tre dsastreux et tous vos efforts de composition ruins. La Figure44.4 montre leffet de la substitution de la police Blackoak Std Andale Mono (toutes autres valeurs de proprits restant gales par ailleurs). Avec un utilitaire de gestion de polices comme Livre des polices, vous pouvez visualiser leffet dune substitution sans devoir raffecter la famille de chacun de vos champs de texte. Pour cela, fermez votre animation, puis dsactivez dans lutilitaire la police utilise, r-ouvrez lanimation et spcifiez le remplacement dans la bote de dialogue Mappage des polices.
Figure 44.4
Le mme champ de texte en Andale Mono ( gauche) et en Blackoak Std ( droite).
La Figure44.4 vous aura sans doute convaincu de faire le maximum pour viter la substitution de polices. Il y a essentiellement deux solutions que nous examinerons dans les sections suivantes: soit incorporer la police votre fichier SWF, au prix dun accroissement de la taille de celui-ci, soit ne spcifier quun groupe de polices (_sans, _serif ou _typewriter), groupe galement appel police de priphrique. Un autre problme de substitution de police plus rare qui pourrait arriver la relecture dune animation ralise dans une langue trangre ayant un alphabet plus ou moins loin-
304
Flash CS5
tain du ntre, serait que pour un code de caractre donn il nexiste pas de glyphe dans la police de remplacement. Rappelez-vous en effet quaucune police nencode lensemble des glyphes correspondant aux 240000 caractres abstraits quUnicode a le potentiel de coder. Il peut enfin arriver quune police apparaisse dans le menu droulant au sein de lenvironnement Flash, mais que les informations la concernant soient incompltes, auquel cas elle ne pourra pas tre exporte dans lanimation finale. Vous pouvez faire ce test: activez Affichage > Mode aperu > Texte anti-alias et examinez les bords des caractres. Sils sont lisss, il ny a aucun problme; mais sils sont crnels, cela signifie que linformation vectorielle sur les glyphes de la police est incomplte. Dans ce cas, une solution consiste utiliser une police comprenant les caractres ncessaires, comme par exemple la police Arial Unicode disponible avec la suite Microsoft Office.
Incorporation de polices
Incorporer les contours dune police dans le chier SWF, cest sassurer que le texte sera rendu de la mme manire sur nimporte quel ordinateur, indpendamment du fait que ladite police y soit ou non installe. De plus, disposer dune description vectorielle contours des caractres des glyphes, cest pouvoir transformer le texte (redimensionnement, rotation, inclinaison) sans perte de qualit. En contrepartie, lincorporation de glyphes augmente la taille du fichier. Sils sont en petit nombre, ce sera sans incidence significative. Une police complte ajoutera au moins 10 Ko pour des caractres Latin standard (code sur un octet), mais cela peut-tre beaucoup plus pour une police didogrammes asiatiques (code sur deux octets). Pour un champ de texte statique, lors de la publication, Flash incorpore automatiquement au fichier SWF la partie utile de la police choisie, cest--dire uniquement les glyphes des caractres utiliss. La seule police incorpore intgralement, ou presque, sera donc celle que vous aurez rserve au labeur, et encore si celui-ci est en grosses quantits. Si multiplier les polices de labeur est discutable sur le plan graphique, sur le plan informatique cest tout fait condamnable. Dans les versions prcdentes de Flash, les caractres incorpors ltaient en association avec le champ de texte partir duquel vous demandiez lincorporation. Cette association a disparu avec la version CS5 et lincorporation est simplement faite au niveau de lanimation Flash. Dans la nouvelle bote de dialogue Incorporation de polices dcrite ci-dessous, vous avez la possibilit de convertir une incorporation faite sous une version antrieure en une faite selon la nouvelle approche CS5. Pour un champ de texte dynamique ou pour une saisie de texte, par dfaut cest seulement le nom de la police choisie qui est enregistr. la relecture, le lecteur Flash recherchera sur la machine cliente une police de ce nom. Lincorporation est possible, mais non automatique. Cest vous qui la demandez explicitement. De plus, sagissant de champs de texte dont le contenu ne sera connu qu lexcution (gnr par programme ou saisi par linternaute), il faut en rgle gnrale inclure la police intgralement. Dans le menu des options de la bibliothque ou dans son menu contextuel, demandez Nouvelle police, ce qui a pour effet douvrir
Texte
305
la bote de dialogue Incorporation de polices reproduite la Figure44.5. Vous pouvez aussi y accder via le bouton Incorporer qui se trouve dans le sous-panneau Caractres droite du champ de style (voir Figure 44.3), ou encore via la commande Texte > Incorporation de polices. La version CS5 de Flash voit une refonte de cette bote de dialogue, qui est dsormais lendroit centralis o grer lensemble des polices incorpores votre animation. Celles-ci y sont prsentes dans la partie gauche, organises par familles. Cliquez sur le bouton orn dun signe plus pour y crer un nouveau pseudo-symbole police. droite, dans longlet Options, slectionnez la famille de polices et lun de ses ventuels styles, puis donnez un nom votre pseudo-symbole.
Figure 44.5
La bote de dialogue dincorporation des polices dans la bibliothque.
Puisquincorporer intgralement une police peut avoir un cot significatif, vous avez la possibilit de nen incorporer quune partie et bien sr, quand cest possible, il faut le faire. Ainsi, les informations attendues dans les champs dun formulaire remplir ont parfois des contraintes qui permettent ce genre dintgration partielle des glyphes (un code postal, par exemple, ne contient que des chiffres). Divers sous-ensembles prdfinis de glyphes vous sont proposs sous lintitul Plages de caractres. Slectionnez-en un, ou plusieurs, en cochant autant de cases que ncessaire. Latin basique comprend les majuscules, les minuscules (mais sans les caractres accentus), les chiffres et la ponctuation. Cest la bonne option pour la saisie utilisateur. Dans le cas o vous connaissez tous les caractres autoriss pour la saisie, entrez-les dans le champ Inclure galement les caractres suivants. Tout autre champ de texte de lanimation utilisant la mme police incorpore (plus exactement la mme variante de style incorpore
306
Flash CS5
de la mme police), aura lui aussi accs aux glyphes intgrs sans quil soit ncessaire de ritrer lopration dintgration. tout moment vous pouvez rafficher la bote de dialogue Incorporation de polices pour reparamtrer. Pour cela, vous avez le choix entre double-cliquer dans la bibiothque sur licne dun pseudo-symbole de police, slectionner Proprits dans le menu contextuel ou le menu doptions du panneau Bibliothque, cliquer sur le bouton Incorporer dans le panneau Proprits dun texte ou encore invoquer la commande Texte > Incorporation de polices. La partie droite de la bote de dialogue Incorporation de polices possde galement un onglet ActionScript reproduit Figure 44.6. On retrouve dans cet onglet les rubriques Liaison et Partage, communes aux proprits de tout symbole (voir la section Crer des occurrences, Fiche 33) en affichage avanc (Figure 33.7). Lorsque vous demandez lexportation pour ActionScript, vous devez galement slectionner sous quel format encoder les glyphes. La rubrique Format du contour propose deux options: Define Font 3 pour le texte classique, ou Define Font 4 pour le texte TLF (voir Fiche 51).
Figure 44.6
Longlet ActionScript de la bote de dialogue dincorporation des polices.
Dans lventualit o vous enregistreriez votre animation depuis Flash CS5 au format CS4, toute police incorpore en DF4 serait convertie en DF3 et tout texte TLF converti en texte statique. De plus lincorporation serait complte (plus de plage de caractres). Enfin, vous perdriez le bnfice de la nouvelle approche centralise de lincorporation des polices: les informations de contours seraient dplaces sur tous les champs de texte faisant rfrence aux pseudo-symboles de police.
Texte
307
Lincorporation de police vaut aussi bien pour le texte classique que pour le texte TLF (voir Fiche 51). Notez nanmoins que lutilisation dune mme police simultanment pour du texte classique et pour du texte TLF vous oblige crer un pseudo-symbole de police pour chacun des deux types.
Polices de priphrique
Le mcanisme dit des polices de priphrique est une solution de compromis. Sil ne prsente pas la garantie de fidlit de rendu de lincorporation de la police, il nen a pas non plus le cot. Par ailleurs, il protge des risques dune substitution sauvage de polices en garantissant un minimum de cohrence dans le choix de la police de remplacement. Les trois polices de priphrique dsignent en fait trois groupes de police. Le premier, _serif, est celui des polices avec empattements auquel appartient Didot (voir Figure44.1), mais aussi Times, Times New Roman ou Garamond. Le second groupe de polices, _sans, est celui des polices sans empattements. Gill Sans, illustre Figure44.7, appartient ce groupe, de mme que Helvetica ou Arial.
Figure 44.7
La police Gill Sans dans le Livre des polices de Mac OS X.
Le troisime et dernier groupe de polices, _typewriter, est celui des polices chasse fixe (la chasse est la largeur dun caractre). Courier, illustre Figure44.8, en est le reprsentant le plus connu, mais on y trouve aussi Courier New ou Monaco. Les glyphes de ces polices ont la proprit dtre tous de la mme largeur (comme les caractres frapps des anciennes machines crire, do le nom). On remarque effectivement sur la Figure44.8 que le i est comme dilat, tandis que le m est comprim. Dans tous les menus de polices de lenvironnement Flash menu Famille du sous-panneau Caractre ou Texte > Police vous retrouvez _sans, _serif et _typewriter. Par dfaut, un champ de texte dynamique ou une saisie de texte ont une police de priphrique. Polices de priphrique est une traduction littrale malheureuse de device fonts. Le terme device est prendre ici dans son sens gnral dappareil et il serait plus juste de parler de
308
Flash CS5
polices de la machine. En effet, si vous spcifiez _sans la ralisation, lexcution le lecteur Flash va rechercher une police sans serif parmi les polices prsentes sur la machine de linternaute (cest--dire lordinateur client et non lun quelconque de ses priphriques!). Il sera nouveau question de polices de priphrique la fichesuivante: le menu Anti-alias du sous-panneau Caractre a une option Utiliser les polices de priphrique.
Figure 44.8
La police Courier dans le Livre des polices de Mac OS X.
Fiche 45
Rendre le texte plus lisible

En rgle gnrale, les polices que vous utilisez sont plutt vectorielles, ce qui signifie que les glyphes y sont dcrits sous forme de contours vectoriels. Nanmoins nous y reviendrons la Fiche58, les crans de nos ordinateurs sont, quelle que soit leur technologie, physiquement de nature matricielle, si bien quin fine ces contours vectoriels doivent tre convertis en pixels, rasteriss. cette fin, diffrents algorithmes de conversion par balayage sont mis en uvre au sein du lecteur Flash. Le plus simple est binaire: pour chaque pixel, il value quel pourcentage du carr qui le modlise est occup par la forme vectorielle. Si le pourcentage est suprieur 50, le pixel reoit la couleur de la forme, sinon la couleur du fond. La gauche de la Figure45.1 donne un exemple de rsultat dun tel chantillonnage binaire en grossissement 400%. On y voit nettement les marches descalier produites par cette approche tout ou rien. Ce phnomne parasite de crnelage est un cas particulier dartefact dchantillonnage propre toute discrtisation donc toute numrisation, et que lon dsigne dans le cas gnral sous le terme technique daliassage.
Figure 45.1
Un champ de texte avec de laliassage ( gauche) et le mme anti-aliass ( droite, zoom 400%).
Texte
309
Il est possible dadopter un algorithme de conversion plus subtil qui ralise un chantillonnage en niveaux de gris, donc par exemple sur 256 niveaux au lieu de 2. Le pourcentage calcul prcdemment est tout simplement ramen par une simple rgle de trois au plus proche de ces 256 niveaux et ce pourcentage arrondi entre dans le calcul de la couleur du pixel comme moyenne pondre entre la couleur de la forme et la couleur du fond. On parle alors danti-aliassage. La droite de la Figure 44.1 donne un exemple de rsultat dun tel chantillonnage en niveaux de gris. En comparant avec le mme texte non anti-aliass, on voit quil y a eu un lissage du crnelage. Le lissage introduit du flou, un autre artefact, mais un moindre mal pour notre il. Avant dexaminer les options danticrnelage proposes par Flash, remarquons que le problme ne se pose pas avec une police bitmap. Dans une telle police, chaque glyphe est une matrice de pixels dont les valeurs ont t soigneusement dfinies pour limiter le crnelage. Que le problme daliassage ne se pose pas est en fait une illusion: nous lavons simplement dlgu en amont au typographe concepteur de la police bitmap. De plus, sagissant de donnes matricielles, il nest plus question de transformer le texte (le redimensionner, le pivoter, lincliner) sans perte de qualit visuelle. Une police bitmap 18 points ne peut tre utilise qu cette taille. Contrairement au cas dune police vectorielle, du texte en 24 points ncessitera la police bitmap 24 points de la mme famille, qui est une autre police. Ainsi avertis des enjeux, vous pouvez faire vos propres essais avec des polices bitmap que vous trouverez en ligne, par exemple sur le site www.fontsforflash.com. Revenons aux polices vectorielles qui sont malgr tout les plus utilises. Le lecteur Flash sorti avec la version CS4 (Flash Player 10), gre plus efficacement les polices vectorielles. Le moteur de rendu Saffron, apparu avec Flash Player 8, voit ses performances accrues, notamment en ce qui concerne le lissage, la rotation et le filtrage des polices de priphriques. Voyons quelques rgles gnrales que vous pouvez suivre pour ne pas pousser le moteur de rendu dans ses retranchements et assurer une bonne lisibilit de vos textes. En dessous dun corps de 10, voire de seulement 12 points, le texte peut devenir difcile lire. Essayez daugmenter la taille de la police. En ce qui concerne les couleurs, le texte noir sur fond blanc se lit mieux, dfaut choisissez au moins une couleur de caractres trs sombre sur fond trs clair, et si vous faites malgr tout le choix inverse, assurez au moins un fort contraste entre les couleurs. Contrairement ce qui se fait en imprimerie, en rgle gnrale on vite les polices serif (donc empattements, voir Figure44.1) pour le labeur, donc plus forte raison pour les petites tailles. Les caractres sans-serif sont plus lisibles lcran. Mettre tout en majuscules namliore pas la lisibilit: les caractres minuscules, de par leurs diffrences de hauteur sont une aide prcieuse la lecture dans les petites tailles. Enfin, prohibez le gras et litalique en petit corps. Quel que soit son type (classique: statique, dynamique ou saisie; TLF), un champ de texte a une proprit Anti-alias. Comme le montre la Figure45.2, elle se trouve dans le sous-panneau Caractre et vous donne le choix entre cinq options.
310
Flash CS5
Figure 45.2
Les options dantialiassage dun champ de texte.
La premire est intitule Utiliser les polices de priphrique. Si vous avez lu la fin de la ficheprcdente, vous savez quil faut comprendre Utiliser les polices de la machine. Avec cette option, le lecteur Flash effectuera le rendu avec la police la plus proche quil trouvera sur la machine cliente. Aux petites tailles, cette option produit souvent un texte plus lisible. Aucune information sur les glyphes ntant incorpore au chier SWF, vous optimisez la taille de ce dernier. Par contre, vous prenez le risque dune substitution de police et dun rendu avec la police systme par dfaut. Minimisez ce risque en vous en tenant aux polices les plus courantes sur toutes les plates-formes. Un autre risque avec cette option est que le lecteur Flash ragisse de manire imprvisible certains rglages de formatage avancs. La seconde option dAnti-alias est radicale, puisquelle consiste se passer totalement danticrnelage: Texte bitmap [sans anti-alias]. La Figure45.3 montre un champ de texte rendu avec cette option. Le crnelage y est bien visible.
Figure 45.3
Un champ de texte rendu avec loption Texte bitmap [sans anti-alias].
La troisime option consiste appliquer un anti-aliassage de base. Elle sintitule Anti-alias pour lanimation. Effectivement, si le champ de texte fait lobjet dune animation, cest loption retenir car anti-aliassage sophistiqu et interpolation font plutt mauvais mnage: le
Texte
311
texte rendu pour la lisibilit tant cal sur des pixels entiers, lors dune interpolation de sa position il fera des sauts visibles de pixel en pixel. Avec cette option, il passera de manire fluide par des tapes intermdiaires. Cette option correspond la premire implmentation de lanti-aliassage dans Flash, cest donc aussi celle retenir si vous publiez pour une version du lecteur Flash au plus gale 7.
Figure 45.4
Le mme champ de texte rendu avec loption Anti-alias pour la lisibilit.
La quatrime option, Anti-alias pour la lisibilit, correspond un anti-aliassage de qualit suprieure apparu avec la version Flash 8 et FlashType. Un exemple en est donn Figure45.4. Vous pouvez choisir cette option si vous publiez pour une version au moins8 du lecteur Flash. Cette option vous permet dutiliser les plus petits corps (9 ou 10) sans renoncer lanticrnelage. Par contre, elle ncessite lincorporation des glyphes au fichier SWF et si vous ne lavez pas demand, au moment o vous la choisissez une bote de dialogue vous le rappelle et propose un bouton daccs la bote de dialogue de la Figure44.5. La dernire option, Anti-alias personnalis, est identique la prcdente. Il sagit encore danti-aliassage de qualit suprieure pour version au moins 8 du lecteur Flash. Vous avez simplement accs en plus un paramtrage de lanti-aliassage via la bote de dialogue reproduite Figure45.5. Rglez-y lpaisseur et la Nettet. Il est inutile dexpliciter la signification de ces deux paramtres. Faites des essais et jugez directement de leurs effets sur la scne puisque le rendu y est mis jour instantanment. En texte TLF, seules trois des options dAnti-alias subsistent : Utiliser les polices de la machine, Lisibilit et Animation (voir section Typographie classique, Fiche 51).
Figure 45.5
La bote de dialogue Anti-alias personnalis.
312
Flash CS5
Notions cls
Aliassage. Toute numrisation consiste en un chantillonnage, donc une discrtisation dun signal continu. Dans le cas dune image, il sagit des variations de lintensit lumineuse dans les deux dimensions spatiales; dans le cas dun son, de la variation de la pression de lair dans la seule dimension temporelle. Lorsque linformation discrte qui constitue le signal numrique est insuffisante, la reconstruction dune approximation du signal continu partir de celle-ci prsente des artefacts daliassage (aliasing). Crnelage. Ce terme est parfois utilis comme synonyme daliassage. Effectivement, dans le cas de limage, lun des artefacts les plus courants est lapparition de marches descaliers, une pixelisation du graphisme qui justifie ici pleinement le terme de crnelage. Pourtant, il existe dautres formes daliassage pour lesquelles ce nest pas le cas. En imagerie toujours, lors du placage de certaines textures, il peut se produire des artefacts de moir. Enfin, laliassage concerne aussi la discrtisation dans le temps: cest parce que le cinma classique chantillonne la prise de vues 24images par seconde que dans les westerns les roues des diligences semblent parfois tourner lenvers. Repli spectral. Le domaine de laudio, plus marqu que celui de limagerie par le vocabulaire du traitement du signal, dsigne laliassage du son numrique sous ce terme. Anti-aliassage, anti-crnelage. En imagerie, lintroduction dun peu de flou est la solution pour attnuer les effets subjectifs de laliassage. En effet, le flou est un moindre mal pour lil humain que le crnelage, trs visible. Lissage. Le flou introduit ayant pour effet de disperser les transitions nettes des marches descaliers, on parle couramment de lissage pour lanti-aliassage, notamment du texte.
Fiche 46
Modifier lexcution le contenu dun texte

Limites du texte statique
Un champ de texte classique statique est fig en dehors de lenvironnement de cration, son contenu tant cod en dur dans le fichier SWF. Parfois le cahier des charges vous impose la possibilit de mise jour du contenu textuel la vole partir dune source externe. Cette mise jour peut tre dclenche automatiquement, via une requte une base de donnes, et/ou interactivement, via un choix de linternaute ou une saisie dans un formulaire. Souvent galement, on choisit un contenu dynamique car on peut alors confier la mise jour des informations proposes par un site une personne ne matrisant pas Flash et qui nen dtient pas mme une licence. Il suffira pour ladite personne dditer un ou plusieurs fichiers texte, puis de les tlcharger sur le serveur web. Votre travail de ralisateur effectu, vous naurez plus ritrer lintgralit de la squence dition du source FLA, modification, publication, puis tlchargement sur le serveur.
Texte
313
Enfin, dernire motivation pour choisir un champ de texte dynamique: il nest pas possible de rendre dfilant un champ de texte statique.
Texte classique dynamique

Pour crer un champ de texte dynamique, procdez comme dcrit la section Types de champs de texte, Fiche 40, pour le texte statique, mais slectionnez le type Texte dynamique dans le second menu droulant en tte du panneau Proprits (voir Figure42.2). Une premire diffrence avec le texte statique est que pour un champ de texte dynamique vous pouvez rgler aussi bien la hauteur que la largeur. Une autre diffrence est quun champ de texte dynamique nest pas ncessairement garni au moment de la cration. Les proprits typographiques et de mise en pages des champs statiques restent valables pour les champs dynamiques (voir respectivement les sections Proprits typographiques dun champ de texte et Proprits de mise en cran dun champ de texte, Fiche 40). Il en va de mme pour les diffrentes faons de redimensionner un champ (voir Fiche41). Les diffrents comportements dun champ de texte dynamique (Une seule ligne, Multiligne, Multiligne sans retour; sous-panneau Paragraphe; voir Figure42.2) ont t traits la Fiche42. Ce qui a t dit sur lincorporation de police et sur les polices de priphrique (respectivement aux sections Incorporation de polices et Polices de priphrique, Fiche44), est galement valable pour les champs de texte dynamiques. Rappelons quil ny a pas, comme pour les champs statiques, dincorporation automatique de glyphes dans le fichier SWF publi et que cest vous de le demander explicitement. Enfin, les diffrents traitements de laliassage expliqus la Fiche45 sappliquent aux champs dynamiques. Comme pour tout objet susceptible dtre manipul par programme ActionScript, un champ de texte dynamique doit recevoir un nom doccurrence (voir la Figure42.2, comparer avec la Figure40.2 o lon voit quun champ de texte statique na pas de nom doccurrence). Ce nom ne doit pas contenir despaces, ni commencer par un chiffre et il ne doit contenir que des lettres, des chiffres ou le caractre soulign. Rappelons quun champ de texte dynamique peut aussi recevoir un nom de variable ActionScript associe (sous-panneau Options, voir Figure43.1). Cependant, cette pratique est dsormais dprcie et le champ Variable ne subsiste que pour des raisons de compatibilit avec les versions 5 et antrieures de Flash. Vous pouvez donc loublier sans scrupules. En double-cliquant sur la grosse poigne qui se trouve en bas droite dun champ de texte dynamique en maintenant enfonce la touche Maj, cette poigne carre blanche devient noire (voir Figure40.1). Lorsque vous continuerez saisir du texte ou quand vous y collerez une quantit suffisante de texte, le rectangle englobant ne sagrandira plus pour sadapter. Dans lanimation publie, le texte sera dfilant. Nanmoins, en ltat, vous ne pourrez le faire dfiler quune seule fois pour en atteindre la fin. Un champ de texte dfilant pleinement
314
Flash CS5
fonctionnel avec flches de dfilement, glissire et curseur demande une programmation ActionScript au-del de la porte de ce livre.
Saisie de texte classique

Un champ ddi la saisie de texte nest jamais quun cas particulier de champ dynamique dans lequel linternaute peut taper ou coller du texte. Il se cre de la mme faon, sauf que vous slectionnez le type Saisie de texte dans le second menu droulant. Les proprits vues pour le texte dynamique et a fortiori pour le texte statique restent valables. Dans ce cas cependant, le menu Comportement (sous-panneau Paragraphe, voir Figure42.2) propose une quatrime option Mot de passe. Vous ferez ce choix pour un champ dans lequel lutilisateur devra saisir labri des regards indiscrets des informations confidentielles comme son mot de passe didentification ou le numro de sa carte de crdit. Le texte saisi par linternaute safchera lcran sous forme dastrisques la place des vritables caractres, ce qui lui permet tout de mme de voir combien de caractres il a entr. Un champ mot de passe est ncessairement sur une seule ligne. Pour un champ de saisie en gnral, et en particulier si son contenu est vide (ce qui est le plus souvent le cas; les cas de pr-remplissage sont rares), il est important de matrialiser leur emplacement par une bordure. Le bouton Montrer la bordure est le dernier de la srie de trois en bas du sous-panneau Caractre (voir Figure40.2). Il ny a aucune raison de rendre non slectionnable le contenu dun champ de saisie, aussi le premier bouton de cette mme srie est-il dsactiv.
Figure 46.1
Les proprits dun champ de saisie de texte classique.
Pour une saisie de texte, le bouton Intgration de caractres (voir Figure46.1 et la section Incorporation de polices, Fiche 44) revt une importance particulire, puisque les glyphes que vous incorporez correspondent aux caractres dont vous autorisez la saisie. Comme
Texte
315
le montre la Figure46.1, le sous-panneau Options vous permet galement de spcifier un nombre maximum de caractres pour la saisie de texte. Vous saisirez par exemple 5 dans ce champ pour un champ o linternaute devra saisir un code postal franais. Une valeur de 0 autorise linternaute entrer un nombre illimit de caractres.
Programmation minimum pour le texte dynamique

Une fois que vous aurez nomm votre champ de texte dynamique, par exemple leChampvotre code ActionScript (voir Chapitre 11) devra affecter sa proprit text une valeur chane de caractres. Celle-ci pourra tre littrale. Par exemple:
Dyna,
leChampDyna.text = "Aurore";
Nanmoins, affecter un champ dynamique une chane littrale donc fige dans le code est dun intrt limit. Le plus souvent vous aurez dfini une variable de type String (chane de caractres) qui recevra la valeur provenant de la saisie de linternaute, ou de la relecture dun chier texte, ou bien dune requte une base de donnes, ou encore dun service web. Appelons nomPapillon cette variable:
var nomPapillon: String = "Apollon"; leChampDyna.text = "Le papillon se nomme " + nomPapillon +".\n";
La valeur affecte est une concatnation (+) de chanes littrales avec la valeur de la variable. Le caractre spcial \n est un retour la ligne. Le champ dynamique affiche la lecture de lanimation Le papillon se nomme Apollon. suivi dun retour la ligne. Le champ de texte a bien dautres proprits. Ainsi, background est une proprit boolenne (valeur vrai ou faux) dterminant si larrire-plan est ou non visible; backgroundColor contient le triplet RVB en notation hexadcimale de la couleur darrire-plan, par dfaut le blanc 0xFFFFFF; si le champ a une bordure visible, la proprit boolenne border vaut true (vrai) et borderColor contient sa couleur, par dfaut le noir 0x000000. Vous pourriez ainsi rgler le fond de votre champ:
leChampDyna.background = false; leChampDyna.backgroundColor = 0x3C3C3C;
Si vous avez dfini un champ de saisie de texte nomm leTexteSaisi, sa proprit resvous permet de dfinir les caractres autoriss la saisie, mme dans le cas dutilisation des polices de priphrique. Sa valeur est une chane contenant tous les caractres permis. Par exemple, si leTexte-Saisi est un champ devant recevoir un nombre entier positif:
trict
leTexteSaisi.restrict = "0123456789";
Linstruction prcdente peut se formuler plus simplement:

leTexteSaisi.restrict = "0-9";
316
Flash CS5
Parfois, il est plus simple dinterdire des caractres (grce au caractre accent circonexe) que dnumrer ceux qui sont autoriss. Par exemple, pour interdire toutes les majuscules:
leTexteSaisi.restrict = "^A-Z";
Fiche 47
Appliquer un balisage HTML du texte

Rendu HTML
La Figure47.1 montre le bouton Rendre le texte au format HTML du sous-panneau Caractre. Cette option est activable lorsque le champ a le type Texte dynamique.
Figure 47.1
Loption Rendre le texte au format HTML.
Un tel champ ne peut recevoir de contenu HTML au moment de la cration, mais uniquement lexcution par affectation de sa proprit htmlText (on nutilise plus dans ce cas sa proprit text). Par exemple, pour loccurrence de la Figure47.1 qui porte le nom infos-EnHTML:
infosEnHTML.htmlText = "Le texte voit rouge.";
Vous avez ainsi accs certaines possibilits de formatage HTML. Le Tableau 47.1 fait la synthse des dix balises HTML que Flash reconnat et de leurs quinze attributs. Ceci vous permet notamment de crer dans Flash des hyperliens de manire classique.
Texte
317
Tableau 47.1 : Les balises HTML reconnues par Flash
Balises
<a> href target color face size <img> align height hspace id src vspace width <li> align class class 
Attributs
Descriptions Hyperlien. URL sur laquelle pointer. Protocoles standard http ou https. Directives mailto, javascript. Nom de la fentre dans laquelle lhyperlien doit souvrir. Nom de la fentre dans laquelle lhyperlien doit souvrir. Gras. Saut de ligne. Police de caractres. Couleur du texte. Exemple : #00CCFF. Nom de la police, ou liste de noms de polices spars par des virgules, ou encore lun des trois groupes de polices Flash (_serif, _sans ou _typewriter). Taille du texte (corps de la police). Italique. Fichier externe GIF (non anim), JPEG (progressif ou non), PNG, SWF ou clip danimation. Alignement left (par dfaut) ou right. Hauteur laquelle redimensionner. Nombre de pixels despace gauche et droite du contenu. Valeur par dfaut 8. Nom doccurrence de limage ou du clip danimation. URL du chier charger ou identiant de liaison dun symbole clip danimation. Nombre de pixels despace au-dessus et en dessous du contenu. Valeur par dfaut 8. Largeur laquelle redimensionner. Liste puces. Nouveau paragraphe. Alignement : left (par dfaut), center ou right. Formatage CSS. Appliquer au pralable un objet feuille de style (StyleSheet) au champ de texte. Formatage CSS. Appliquer au pralable un objet feuille de style (StyleSheet) au champ de texte. Classe CSS appliquer. Soulign.
318
Flash CS5
Feuilles de styles en cascade

Les feuilles de styles en cascade (Cascading Style Sheets, CSS) permettent de spcifier des rgles de formatage du texte HTML. Cest une faon de regrouper un ensemble dattributs de texte sous un nom, appel le slecteur. Considrons une feuille de styles trs simple comportant deux slecteurs titraille et labeur dont le nom dsigne clairement lutilisation. Pour la titraille, on souhaite utiliser la police Gill Sans, dfaut Arial, dfaut Helvetica (deux autres polices sans empattements plus courantes sur les ordinateurs) et dfaut nimporte quelle police sans empattements prsente sur la machine cliente. La spcification de police sera la mme pour la titraille et pour le labeur, mais la premire sera en corps 14 et le second en corps 12. Vous pouvez crer la feuille de styles CSS interne, donc dans le scnario Flash, en plaant sur la premire image du calque scripts de celui-ci le code suivant :
var styles_CSS = new TextField.StyleSheet(); styles_CSS.setStyle( "titraille", {font-family: Gill Sans, Arial, Helvetica, sans-serif; font-size: 14 px;} ); styles_CSS.setStyle( "labeur", {font-family: Gill Sans, Arial, Helvetica, sans-serif; font-size: 12 px;} );
Vous pourriez tout aussi bien placer la feuille de styles CSS dans un fichier lesStyles.css externe plac dans le mme rpertoire que le fichier SWF:
titraille { font-family: Gill Sans, Arial, Helvetica, sans-serif; font-size: 14 px; } labeur { font-family: Gill Sans, Arial, Helvetica, sans-serif; font-size: 12 px; }
Ce fichier CSS externe serait alors charg dans la premire image du scnario Flash, grce aux instructions suivantes places dans le calque scripts(pour tre complet et rigoureux, il faudrait intercepter le message de fin de chargement; nous y reviendrons au Chapitre 11):
var styles_CSS = new TextField.StyleSheet(); styles_CSS.load( "lesStyles.css");
Les diffrentes approches du formatage

Au terme de cette fiche, vous connaissez diverses manires de formater du texte. Utilisez le panneau Proprits lorsque tout peut tre dcid au moment de la cration, car cest le plus facile mettre en uvre. Recourez au HTML si vous disposez de beaucoup de sources texte sous cette forme. De mme, passez par les feuilles de styles CSS si un grand nombre
Texte
319
de styles vous sont dj fournis sous cette forme. Utilisez galement les feuilles de styles CSS pour le temps que fait gagner cette approche qui spare le fond (le contenu textuel) de la forme (son apparence): cette dernire tant factorise, vous simplifiez la procdure de maintenance et dvolution dun site. Enfin, pour inclure des hyperliens dans du texte dynamique, utilisez HTML avec CSS.
Fiche 48
Corriger lorthographe
Si votre animation contient du texte en grande quantit et/ou si vous tes vraiment nul en orthographe, vous apprcierez la vrification orthographique de Flash. Elle se configure grce la commande Texte> Configuration de la vrification orthographique, laquelle ouvre la bote de dialogue reproduite Figure48.1.
Figure 48.1
La bote de dialogue de configuration de la vrification orthographique.
Dans la rubrique Options de document, il sagit essentiellement de dterminer parmi tous les contenus textuels de lanimation (champs, noms dentits du scnario, code ActionScript, etc.) lesquels soumettre la vrification orthographique. En cochant Slectionner le texte sur la scne, vous pourrez plus facilement corriger. Flash possde diffrents dictionnaires intgrs. Par dfaut, Adobe et Franais sont activs (il faut au moins un dictionnaire coch). Vous disposez dun dictionnaire personnel, dont lemplacement par dfaut apparat dans le champ Chemin. En cliquant sur le bouton dicne
320
Flash CS5
de dossier, vous pouvez dsigner un autre emplacement. Cliquez sur le bouton Modifier le dictionnaire personnel pour diter celui-ci. Il sagit dun fichier texte qui doit navoir quune seule entre par ligne. Les Options de la vrification ont toutes des intituls parlants. Une fois configure, lancez la vrification orthographique via la commande Texte> Vrifier lorthographe, laquelle la rencontre dun mot suspect ouvre la bote de dialogue reproduite Figure48.2 (en labsence de mot suspect, une autre bote de dialogue signale lachvement de la vrification). Dans lexemple de la figure, on nous signale un mot absent des dictionnaires. Le type du conteneur est mentionn entre parenthses, ici un champ de texte. Le mot suspect background est mis en surbrillance dans son contexte. En cliquant sur Ajouter, il ira enrichir le dictionnaire personnel. Les autres options sont Ignorer (cette occurrence uniquement), Ignorer tout (toutes ses occurrences), Supprimer.
Figure 48.2
La fentre du vrificateur orthographique.
Pour la correction, slectionnez lune des suggestions de la liste ou saisissez le mot corrig dans Remplacer par. Vous pouvez ensuite Remplacer (cette occurrence uniquement) ou Remplacer tout (toutes ses occurrences). Cliquez sur Fermer si vous souhaitez interrompre la vrification orthographique avant son terme.
Fiche 49
Rechercher et remplacer du texte ou une police

Pour faire une recherche de texte, ouvrez le panneau Rechercher et remplacer via la commande Modifier > Rechercher et remplacer et slectionnez Texte dans le second menu droulant. Le panneau se prsente alors tel qu la Figure49.1. La premire chose faire est de spcifier o chercher. Le menu droulant Parcourir propose deux options: Document actif cest--dire toutes les squences ou seulement la Squence courante. Spcifiez la chane rechercher et ventuellement par quoi la remplacer. Classiquement, la chane sera ou non recherche lintrieur des mots selon que vous laisserez ou non loption Mot entier dcoche. Si vous cochez Respecter la casse, la diffrence sera faite entre minuscules et majuscules. Si vous navez pas dantcdents en programmation, vous ne
Texte
321
pratiquerez pas la recherche de chanes spcifies de faon gnrique sous la forme dune expression rgulire.
Figure 49.1
La fentre Rechercher et remplacer pour du texte.
Les quatre options de la colonne de droite vous permettent de filtrer parmi les diffrents types de contenus textuels de votre animation Flash. Par dfaut, la recherche se fait uniquement dans le texte qui sera prsent linternaute et seule donc loption Contenu des champs de texte est coche. Les quatre boutons Rechercher le suivant, Rechercher tout, Remplacer, Remplacer tout sont classiques: les quatre combinaisons de recherche ou remplacement avec une occurrence ou toutes. Si vous cochez loption Modification en direct, loccurrence suivante de la chane est slectionne, ce qui vous permet de la modifier dans son contexte. La zone du bas de la fentre est destine recevoir le journal des recherches et remplacements. Le panneau Rechercher et remplacer est polyvalent. Les autres options du menu droulant la recherche de sont Couleur, Symbole, Bitmap, Son, Vido et Police. Si vous slectionnez cette dernire option, vous accdez une fonctionnalit puissante de recherche et remplacement de polices dont la Figure49.2 reproduit linterface. Les critres de recherche, comme de remplacement, sont le nom de la police (slectionnez-le dans le menu droulant ou saisissez-le dans le champ) et/ou le style de la police (regular, bold, italic, light, etc.) et/ou la
322
Flash CS5
taille de la police (slectionnez ou saisissez les valeurs minimale et maximale dune plage de tailles). Pour le reste, le panneau est identique celui de la recherche et remplacement de texte.
Figure 49.2
La fentre Rechercher et remplacer pour une police.
Raccourci
CMd+F (Mac) ou Ctrl+F (Windows) ouvre la fentre de recherche et remplacement.
Fiche 50
Sparer un texte
La sparation est une opration que dans le jargon de la programmation objet lon dirait surcharge, puisquelle sapplique divers types dentits (groupes, textes, images bitmap), avec une signification diffrente dans chaque cas. Dans le cas du texte, la sparation peut se faire deux niveaux. La sparation de texte ne sapplique qu des polices vectorielles (TrueType sur toute plateforme, PostScript sur Mac uniquement). Si vous sparez un texte dans une police bitmap, il disparat de lcran lorsque vous le sparez. Enfin, le texte dun champ dfilant ne peut pas tre spar. La Figure 50.1 illustre le premier niveau de sparation dun texte. gauche, un unique champ de texte contenant le mot papillon. droite, aprs une premire application de la
Texte
323
commande Modification> Sparer, huit champs de texte pour chacune des lettres du mot papillon.
Figure 50.1
Premire sparation dun texte en caractres.
Avant sparation, il est possible danimer le texte la faon des gnriques traditionnels dans lesquels les mots dfilent verticalement. Aprs la premire sparation, il est possible danimer les caractres indpendamment. Par exemple, la Figure 50.2 montre une image dune animation par interpolation de mouvement dans laquelle chaque lettre descend de la coulisse en haut de la scne avec un lger dcalage par rapport la prcdente pour composer au final le mot papillon. Vous pouvez imaginer toutes sortes danimations de caractres : explosion, mtamorphose, etc. Dans tous les cas, pour animer les caractres sparment, il est indispensable de les placer sur des calques diffrents, via la commande Modification> Scnario> Rpartir vers les calques. En repartant de la slection des huit lettres du mot papillon, comme le montre la gauche de la Figure50.3, on peut avec la mme commande appliquer un second niveau de sparation au texte. Cette fois-ci le lien des caractres avec leur police est rompu et lon se retrouve avec de simples formes vectorielles, comme lindiquent les pointills de slection droite de la Figure50.3. Autrement dit, la smantique qui reposait sur le codage dans un certain jeu de caractres est perdue et il ne sagit plus que de pur dessin vectoriel.
Figure 50.2
Animation des caractres aprs la premire sparation.
Figure 50.3
Seconde sparation des caractres du texte en formes vectorielles.
324
Flash CS5
partir de l, vous pouvez utiliser nimporte quel outil vectoriel pour modifier les formes. La Figure50.4 donne un exemple. Un nouveau glyphe du caractre p y a t produit via loutil de Sous-slection. Loutil transformation libre pourrait aussi tre trs utile pour cela. Si un glyphe intressant tait destin tre rutilis, il faudrait le convertir en symbole. Ne voyez cependant pas dans cette technique une possibilit de vous assurer de la restitution correcte du texte sur toutes les machines. Si le moyen est efficace du point de vue graphique, il est particulirement inefficace du point de vue informatique, puisque vous perdez le bnfice de factorisation dinformation que reprsentait la police de caractres (les deux formes vectorielles p dans papillon deviennent redondantes l o il ny avait quun seul glyphe p). Pour viter la restitution de votre texte dans une police de substitution, il faut incorporer les caractres votre animation (voir section Incorporation de polices, Fiche 44).
Figure 50.4
Modification de la forme vectorielle dun caractre aprs la seconde sparation.
Raccourci
CMd+b (Mac) ou Ctrl+b (Win) spare (break) les caractres.
Fiche 51
Utiliser la typographie avance et les blocs de texte chans

Pour crer un bloc de texte TLF, vous procdez comme pour du texte classique (voir la section Types de champs de texte classique, Fiche 40). Dans le premier menu de len-tte du panneau Proprits, slectionnez simplement Texte TLF. Signalons demble que recourir au texte TLF vous oblige cibler ActionScript 3.0 et une version au moins 10 du lecteur la publication (voir chapitre 12). De plus, la relecture dune animation contenant du texte TLF ncessite une bibliothque ActionScript spcifique sur la machine cliente, laquelle sera tlcharge au besoin (uniquement la premire fois).
Typographie classique
Avant de voir les possibilits propres au texte TLF, passons en revue les proprits quil a en commun avec le texte classique. En effet, dans linterface celles-ci ne sont pas toujours accessibles de la mme faon dans un cas et dans lautre.
Texte
325
Notons pour commencer que pour tous les types de texte, hormis le texte classique statique, il y a la possibilit de donner un nom doccurrence. En ce qui concerne lemplacement et les dimensions du bloc de texte, la Figure 51.1 montre que le sous-panneau Position et taille du panneau Proprits est le mme dans les deux cas. Un bloc de texte TLF se redimensionne de la mme faon quun bloc de texte classique (voir Fiche 41). La partie droite de la Figure 51.1 montre galement que les proprits dun bloc de texte TLF offrent un sous-panneau Vue et position 3D, comme pour un clip danimation (voir Fiche 39).
Figure 51.1
Comparaison des sous-types et des sous-panneaux Caractre des proprits dun texte: classique ( gauche) et TLF ( droite).
Quil sagisse de texte classique ou TLF, le sous-panneau Caractre du panneau Proprits donne accs la Famille (de polices), au Style, la Taille (ou corps), la Couleur et la mise en Exposant ou en Indice (voir la section Proprits typographiques dun champ de texte, Fiche 40). Dans tous les cas, un bouton Incorporer vous donne accs la nouvelle bote de dialogue de gestion centralise de lincorporation des polices (voir la section Incorporation de police, Fiche 44). En ce qui concerne lanti-aliassage, rappelons ce qui a t dvelopp Fiche 45. Dans la mesure du possible, vitez de recourir des corps infrieurs 12 points. Dans le cas o vous ne pourriez faire autrement, choisissez une police sans-serif (voir Fiche 44), proscrivez le gras, litalique et lusage exclusif des majuscules. Pour la couleur, prfrez du noir sur fond blanc, ou au moins un trs fort contraste. Enfin, sauf si le bloc de texte fait lobjet dune animation, choisissez loption danti-aliassage pour la lisibilit. Pour du texte TLF, le menu Anti-alias offre le choix entre Utiliser les polices de la machine, Lisibilit et Animation. Il ny a ni option de texte bitmap, ni personnalisation (voir Fiche 45). Concernant les espacements, les mmes proprits se retrouvent pour les deux types de texte, mais des emplacements, voire sous des intituls, diffrents. Pour du texte classique, lapproche de groupe se trouve dans le sous-panneau Caractre sous lintitul Espacement
326
Flash CS5
des lettres et lapproche de paire automatique dans le mme sous-panneau sous lintitul Crnage automatique (voir la partie gauche de la Figure 51.1 et la section Proprits typographiques dun champ de texte, Fiche 40). Linterlignage se trouve quant lui dans le souspanneau Paragraphe, deuxime champ de la rubrique Espacement (voir la partie gauche de la Figure 51.2 et la section Proprits de mise en cran dun champ de texte, Fiche 40). Pour du texte TLF, tout est regroup dans le sous-panneau Caractre (voir la partie droite de la Figure 51.1): Interlignage (relatif, en pourcentage de la hauteur de ligne, ou absolu, en points), approche de groupe sous lintitul Interlettrage et approche de paire automatique sous lintitul Crnage automatique.
Figure 51.2
Comparaison des sous-panneaux Paragraphe des proprits dun texte: classique ( gauche) et TLF ( droite).
Dans tous les cas, le sous-panneau Paragraphe (voir Figure 51.2) contient les boutons doptions dalignement : en fer gauche, centr, en fer droite ou justifi (voir la section Proprits de mise en cran dun champ de texte, Fiche 40). Ils sont simplement sous la rubrique Format, en texte classique et sous la rubrique Aligner, en texte TLF. Flash appelle Retrait lalina. En texte classique, cest le premier champ de la rubrique Espacement. Les dernires proprits communes du sous-panneau Paragraphe sont les Marges, gauche et droite. En texte TLF, on retrouve le Comportement dun bloc (voir Fiche 42): Une seule ligne, Multiligne, Multiligne sans retour ou Mot de passe. Cette dernire option nexiste que pour du texte modifiable. Il en est de mme pour le Nombre maximum de caractres. Ces deux proprits se trouvent simplement dans le sous-panneau Conteneur et flux (voir Figure 51.5). Dans tous les cas, hormis celui du texte ditable, vous crez un lien hypertexte en spcifiant une URL dans le champ Lien, et ventuellement une cible dans le champ homonyme (voir la Fiche 43). En texte classique, ces proprits se trouvent dans le sous-panneau Options (voir la partie gauche de la Figure 51.2). En texte TLF, elles se trouvent dans le sous-panneau Caractre avanc (voir Figure51.3).
Texte
327
Typographie avance
Un bloc de texte de type TLF peut tre de lun des trois sous-types : Lecture seule, Slectionnable (par dfaut), Modifiable (voir la partie droite de la Figure 51.1). Le texte classique peut lui aussi tre rendu slectionnable via un bouton du sous-panneau Caractre (visible en bas de la partie gauche de la Figure 51.1 ; voir la section Proprits typographiques dun champ de texte, Fiche 40). Le texte TLF de type Lecture seule correspond au texte classique de type Statique, non slectionnable. Le texte TLF de type Modifiable peut tre modifi soit par programme, soit par interaction. Il correspond donc au texte classique de type Dynamique ou Saisie. Voyons maintenant les proprits propres au texte TLF. Toutes nont pas ncessairement un intitul. Dans ce cas, comme lordinaire, survolez un instant pour faire safficher la bulle daide jaune. On trouve dans le sous-panneau Caractre du panneau Proprits dun bloc de texte TLF (voir la partie droite de la Figure 51.1) trois proprits sans quivalent en texte classique. Surbrillance permet de slectionner la couleur de Surbrillance dune slection que fera linternaute lexcution de lanimation. Rotation, qui peut prendre lune des trois valeurs 0, 270 ou Automatique, permet de rendre des caractres horizontaux dans du texte vertical, la faon des enseignes en non verticales. Enfin, deux boutons donnent accs aux styles Soulign et Barr. Le sous-panneau Caractre avanc, reproduit Figure 51.3, est propre aux proprits du texte TLF. Son contenu varie en fonction du type.
Figure 51.3
Le sous-panneau Caractre avanc des proprits dun texteTLF.
328
Flash CS5
Outre les champs Lien et Cible dj mentionns ci-dessus, on y trouve sept proprits sans quivalent en texte classique: Casse. Vous permet de convertir le texte du bloc en Majuscules, Minuscules, Capitales en petites capitales (il faut lire Majuscules en petites capitales), ou Minuscules en petites capitales. Casse des chiffres. Vous donne le choix entre Alignement et Ancien style. Cette seconde option correspond ce que les typographes appellent aussi des chiffres non aligns ou elzviriens. La diffrence avec loption Alignement est que lapproche des chiffres tant variable, ils sintgrent mieux du texte. Largeur des chiffres. Vous donne le choix entre Proportionnel et Tabulaire. Comme son nom le suggre, choisissez cette seconde option pour des tableaux de nombres. La chasse tant fixe dans ce cas, les chiffres salignent dans les colonnes, ce qui nest pas le cas avec Proportionnel (chasse variable). Ligatures. Les typographes appellent ligature le remplacement de certaines squences de glyphes (par exemple: oe, ae, et, ct, fi, fl, fj, ft, th, st, sp) par un seul autre glyphe qui les fusionnent (la Figure 51.4 en donne trois exemples). En texte TLF, vous avez le choix entre quatre niveaux dapplication des ligatures: Minimum, Communes (par dfaut), Rares ou Exotiques. Saut. Cette proprit devrait sintituler Csure. Vous avez le choix entre quatre rgles dapplication des csures: Automatique, Tous, Nimporte lequel et Aucun saut. Cela vous permet dempcher la csure de certains mots ou dempcher que des mots dun groupe soient spars par un saut de ligne. Dcalage vertical. Il sagit ici dun dcalage de la ligne de base, qui vous permet de personnaliser des indices ou des exposants. Paramtres rgionaux. La langue du texte peut conditionner des spcificits typographiques qui seront appliques si vous la slectionnez dans ce menu.
Figure 51.4
Options de ligatures en texte TLF. De haut en bas: Minimum, Communes et Rares.
Texte
329
Le sous-panneau Paragraphe, reproduit en partie droite de la Figure 51.2, possde des proprits propres au texte TLF. Aux quatre options dalignement partages avec le texte classique sajoutent trois options dalignement ( gauche, centr, droite) de la dernire ligne du paragraphe. Lorsque vous avez choisi la justification du paragraphe, Justification vous donne le choix entre deux mthodes. Loption par dfaut est Espacement des mots. En choisissant Espacement des lettres, une sorte dapproche de groupe est applique pour diminuer les trop gros espaces entre mots. Enfin, deux proprits sont regroupes sous la rubrique Espacement : il sagit des espaces avant et aprs le paragraphe (en texte classique, une rubrique regroupe sous le mme intitul lalina et linterligne; voir la partie gauche de cette mme Figure 51.2). Sachez que le texte TLF prsente toutes les proprits ncessaires pour une gestion fine de blocs de texte dans un grand nombre de systmes dcriture dans toutes les directions, y compris les systmes idographiques. Parmi la trentaine pris en charge, citons lhbreu, larabe, le devanagari, le bengali, le chinois, le coren, le japonais.
Composer un texte
Outre les sophistications typographiques dcrites la section prcdente, la grande nouveaut quapporte le texte TLF est la possibilit de faire dans Flash de la composition de texte pour lcran, comme il est dusage den faire pour limpression dans un logiciel de PAO comme InDesign (il est aussi possible dexporter une composition faite dans InDesign vers Flash, via FXG le nouveau format de fichier transversal la suite CS5). Pour tre plus prcis, un bloc de texte TLF peut-tre multi-colonnes et il est possible de dfinir un flux de texte via des blocs TLF chans.
Figure 51.5
Le sous-panneau Conteneur et flux.
330
Flash CS5
Concernant le premier aspect, tout repose sur les proprits du bloc de texte que lon trouve dans le sous-panneau Conteneur et flux, reproduit Figure 51.5: La valeur de Colonnes est 1 par dfaut, mais vous pouvez augmenter cette valeur (jusqu 50) pour crer un bloc de texte multi-colonnes. Un second champ droite de celui-ci permet de spcifier la largeur de la gouttire de colonne en pixels, cest--dire lespace inter-colonnes (20 par dfaut, 100 maximum). Quatre boutons sont ddis aux options dalignement du texte au sein du conteneur. Sous la rubrique Remplissage, les quatre champs G, D, B, H vous permettent de spcifier des valeurs de retrait du texte lintrieur du conteneur. Le bouton bascule orn de maillons de chane contraint ou non lgalit de ces quatre valeurs. Grce a deux puces de couleur, vous pouvez ventuellement choisir des couleurs pour le contour et le fond du conteneur. Lpaisseur du contour se rgle dans le champ droite de la premire puce de couleur. La premire ligne de base du texte peut tre positionne par rapport au haut du conteneur. Les options de Dcalage 1re l. sont: Hauteur de ligne, Ascendante, Automatique ou pt. Dans ce dernier cas, un champ numrique apparat pour y saisir la valeur en points. La Figure 51.6 donne un exemple de composition de texte pour lcran: on souhaite mettre en place les vers du pome Le papillon de Lamartine sur une illustration de papillon. Onze blocs de texte TLF ont t crs. Ils sont visibles en pointills sur la figure. Lensemble du pome a t coll dans le premier bloc. La poigne carre en bas droite de celui-ci porte un signe plus rouge, ce qui indique un excdent.
Figure 51.6
Composition dun pome: avant tout chanage des blocs de texte TLF.
Texte
331
Au survol, avec loutil Texte, de cette poigne carre en bas droite du bloc, le pointeur devient une flche. Pour chaner, il faut dabord cliquer cette poigne de sortie du bloc. Ensuite, tant que le pointeur ne survole aucun bloc, il a lapparence dune petite flche orne de lignes de texte. Ds quil survole un bloc, la petite flche sorne de maillons de chane, comme le montre la Figure 51.6. Il suffit alors de cliquer pour faire de ce bloc le suivant dans le flux. Un lien bleu apparat entre les deux blocs, jusqu la poigne en haut gauche de celui nouvellement chan. Une partie de lexcdent du bloc prcdent a rempli le nouveau, comme le montre la Figure 51.7. Tant que le nouveau bloc prsente un excdent, on poursuit le chanage vers dautres blocs existants (ils peuvent sans problme appartenir des images diffrentes du mme scnario). Il est aussi possible de crer les blocs au fur et mesure: aprs avoir cliqu comme prcdemment sur la poigne de sortie du dernier bloc chan, cliquez un endroit vide de la scne pour crer un bloc de mme taille que celui dorigine. Vous pouvez aussi cliquerglisser pour crer un bloc dune autre taille. En cas de repentir, double-cliquez sur lune des poignes extrmit dun lien du flux pour rompre celui-ci. La Figure 51.8 montre la composition acheve. Une fois le chanage complet termin, le flux de texte sadapte au redimensionnement des blocs que lon a ajusts. Il sadapte galement au changement de corps de la police (dans lexemple, on a diminu le corps au fil du chanage). Il sadapterait aussi si lon optait pour une police de mtrique diffrente.
Figure 51.7
Composition dun pome: aprs un premier chanage des blocs de texte TLF.
332
Figure 51.8
Composition dun pome: chanage finalis de tous les blocs de texte TLF.
Flash CS5
Choisir un type de texte

Maintenant que vous avez une vision prcise des deux types de texte classique et TLF, faisons le point sur les raisons qui vous pousseront choisir un moteur de texte plutt que lautre. Le moteur de texte TLF simpose dans les cas suivants: Vous avez un besoin impratif de sophistications typographiques absentes en texte classique. Vous souhaitez composer le texte des crans de vos animations Flash comme vous le feriez dans un logiciel de mises en page (InDesign, XPress). Vous avez besoin dappliquer des transformations (voir Fiche 37) un bloc de texte. Comme une occurrence de clip danimation, le texte TLF se prte directement aux effets de couleur (sous-panneau homonyme), lapplication de modes de fusion (sous-panneau Affichage) et aux translations et rotations 3D (sous-panneau Vue et position 3D, voir Fiche 39). Notons au passage que les filtres sappliquent indiffremment au texte classique et au texte TLF. Votre animation contient du texte dans des langues orientales ou extrme-orientales, notamment du texte de droite gauche ou vertical et/ou des critures idographiques. Si vous tes dbutant en Flash, vous pouvez tenir le raisonnement suivant : TLF est un moteur de texte davenir (cest le type par dfaut), peut-tre mme terme sera-t-il lunique moteur de texte de Flash, donc je lutilise exclusivement.
Texte
333
Mais peut-tre aussi tes-vous utilisateur de Flash depuis quelques versions, sans avoir jamais ressenti aucune limitation avec le texte dsormais dit classique. Voici quelques raisons de continuer travailler avec le moteur de texte classique : Par souci de rtro-compatibilit, vous ne souhaitez pas convertir en TLF le texte des anciennes animations Flash sur lesquelles vous retravaillez. Notez nanmoins que texte TLF et texte classique peuvent tout fait cohabiter dans une mme animation, voire une mme image ou un mme calque. Vous souhaitez utiliser une police PostScript Type 1. Or TLF ne prend en charge que les polices OpenType et TrueType. Vous voulez crer un masque de texte (voir Fiche 23). Vous avez un souci aigu de loptimisation. Or, le texte classique produit un fichier SWF plus lger que le texte TLF (et accessoirement, il ne ncessite aucune bibliothque spcifique sur la machine cliente).
Images bitmap
Bien que vectoriel ds lorigine dans son principe, lenvironnement dintgration multimdia Flash ne pouvait se priver de prendre en compte les images bitmap, traites dans une application ddie, puis importes. Si ldition interne reste sommaire, il est possible de texturer avec une image bitmap et diverses solutions sont envisageables pour intgrer une image non rectangulaire. Flash offre deux voies pour prserver la lgret du fichier SWF: la vectorisation ou loptimisation des images bitmap. Le chapitre se termine par trois sujets qui ne concernent pas directement les images bitmap, mais relvent nanmoins du rendu matriciel effectu par le lecteur Flash, lequel a considrablement volu dans ses dernires versions: modes de fusion similaires ceux dAdobe Photoshop, cache bitmap pour optimiser laffichage, application de filtres.
Fiche 52
Importer une image bitmap

Du matriciel dans le vectoriel?
Si Flash tire parti dune approche vectorielle du graphisme et si lenvironnement permet la vectorisation des images matricielles (voir Fiche 56), il en est qui prsentent trop de nuances et de dtails pour se prter une telle conversion et qui devront donc rester dans votre animation sous forme dimages bitmap. Gardez lesprit que toutes les images bitmap que vous allez importer dans votre animation seront incorpores au fichier SWF publi, lalourdissant dautant. Voyez la Fiche 59 consacre leur optimisation. Le Tableau 52.1 liste tous les formats dimages bitmap que Flash reconnat pour limportation. Les quatre premiers sont reconnus sur toute plateforme. Parmi les suivants, lun est propre au systme Mac OS et trois autres Windows. Avec une version 4 au moins du lecteur Apple QuickTime installe sur votre ordinateur (elle existe aussi pour Windows et vous pouvez la tlcharger gratuitement ladresse suivante: http://www.apple.com/fr/quicktime/download/, Flash reconnatra en plus les formats du Tableau 52.2. Au niveau des couleurs, Flash ne travaillant que dans lespace RVB, si les donnes sont codes dans un autre espace, limportation elles seront converties automatiquement en RVB. Photoshop ou Illustrator pouvant produire un meilleur rsultat, il est prfrable que vous y fassiez vous-mme la conversion. Le nouveau format FXG permet lchange de graphisme entre les diffrents logiciels de la suite CS5, donc en particulier des images bitmap en provenance de Fireworks ou Photoshop (voir Fiche 3).
336
Flash CS5
Tableau 52.1 : Les formats dimage bitmap importables en standard dans Flash
Formats GraphicInterchangeFormat JointPhotographicExpertsGroup PortableNetworkGraphics PhotoShopDocument WindowsBitMaP WindowsMetaFile EnhancedMetaFile Extensions .gif .jpg,.jpeg,.jpe .png .psd .bmp,.dib .wmf .emf MacOS oui oui oui oui non non non Windows oui oui oui oui oui oui oui
Tableau 52.2 : Les formats dimage bitmap importables via QuickTime dans Flash
Formats MacPaint PICT QuickTimeImageFile SiliconGraphicsImage TruevisionTGA TaggedImageFileFormat Extensions .pntg .pict,.pct,.pic .qtif .sgi .tga .tif,.tiff MacOS oui oui oui oui oui oui Windows oui oui oui oui oui oui
Importer des donnes Photoshop

Limportation dune image bitmap au format natif Photoshop (PSD, PhotoShop Document) est dans lensemble similaire limportation dun dessin vectoriel au format natif Illustrator (AI, Adobe Illustrator). Cette dernire ayant t traite la Fiche 18, pour viter dtre redondant nous vous y renvoyons. Rappelons toutefois la diffrence entre Importer sur la scne et Importer dans la bibliothque : dans les deux cas limage bitmap est importe dans la bibliothque, mais dans le premier une instance en est aussi cre sur la scne. Bien que Photoshop soit la base un logiciel de retouche dimages bitmap, il sest enrichi au fil des versions doutils vectoriels. Ainsi, parmi les calques composant un document PSD, vous trouverez loccasion du dessin vectoriel ou du texte. Le module dimportation PSD de Flash est capable de reprer ce qui est vectoriel et vous laisse la possibilit de le garder comme tel dans Flash.
Images bitmap
337
Comme vous pouvez le constater en comparant avec la Figure18.1, la bote de dialogue dimportation Photoshop reproduite aux Figures 52.1 52.3 est trs proche de celle de limportation Illustrator. La principale diffrence par rapport cette dernire est la possibilit de fusionner des calques (dans Photoshop et Fireworks, on parle plutt daplatir des calques; le choix de ce terme pour la version franaise de Flash aurait non seulement eu le mrite de la cohrence, mais il aurait cart tout risque de confusion avec les modes de fusion traits la Fiche 57). La zone principale vous prsente la structure de calques du document import, qui en contient au moins un. Pour chaque calque, tout fait gauche une case coche par dfaut vous permet ventuellement de le dslectionner pour limportation. droite, aprs son aperu et son nom, le type de son contenu est dnot via licne consacre dans Flash : image bitmap, texte, forme ou groupe. En haut droite de la bote de dialogue saffichent les options dimportation du ou des calque(s) slectionn(s) gauche. Elles varient bien sr selon le type de contenu. La Figure52.1 montre les options dimportation pour le dessin vectoriel. Si pour loption Importer ce calque de forme en tant que, vous cochez loption Tracs modiables et styles de calque, vous prservez alors la nature vectorielle du graphisme. Par styles de calque, il faut en fait comprendre lopacit et les modes de fusion qui seront dans la mesure du possible prservs (voir Fiche 57). linverse, en cochant loption Image bitmap aplatie, vous perdez la fois la nature vectorielle et les styles de calques.
Figure52.1
Importation Photoshop: calque slectionn contenant du dessin vectoriel.
La Figure52.2 montre les options dimportation pour le texte. Choisissez pour Importer ce calque de texte en tant que loption Texte modifiable pour prserver la fois le caractre
338
Flash CS5
ditable du contenu textuel et la nature vectorielle des caractres. En cochant Contours vectoriels, vous perdrez le caractre ditable du contenu, mais vous prserverez la nature vectorielle des caractres. Cest ainsi loption qui convient pour du texte attach une courbe, que Flash ne peut conserver tel quel. Dans les deux options prcdentes, loption Crer un clip pour ce calque est automatiquement coche. Si vous cochez la dernire option Image bitmap aplatie, plus rien ne sera ditable, ni le fond (le texte), ni la forme (les caractres).
Figure52.2
Importation Photoshop: calque slectionn contenant du texte.
La Figure52.3 montre les options dimportation pour limage bitmap. En choisissant pour Importer ce calque dimage en tant que loption Image bitmap avec des styles de calque modiables, les modes de fusion seront dans la mesure du possible prservs. Crer un clip pour ce calque est alors automatiquement coche. linverse, si vous cochez loption Image bitmap aplatie, les modes de fusions ne seront plus ditables dans Flash. Lorsque une image bitmap prsente de la transparence (binaire, dnote par un fond en damier), celle-ci est prserve. La Figure54.7 vous donne un exemple dimportation dune image dtoure dans Photoshop. Vous pouvez choisir de Crer un clip pour ce calque (nous avons vu prcdemment que parfois ce nest pas un choix, mais une ncessit). Si cette option est coche, vous avez accs au champ Nom de loccurrence, ainsi qu la dfinition de son point dAlignement. La cration dun clip permet de conserver certains effets Photoshop qui pourront tre rendus dans Flash laide de modes de fusion ou de ltres. La section Paramtres de publication permet de spcifier les rglages de compression qui seront appliqus limage bitmap lors de la publication (voir Fiche 56). Un bouton vous permet de Calculer la taille du bitmap en fonction de ces rglages.
Images bitmap
339
Figure52.3
Importation Photoshop: calque slectionn contenant de limage bitmap.
En bas de la bote de dialogue, le bouton Fusionner les calques devient accessible aprs que vous avez fait une slection multiple, de faon classique par Maj+CliC et/ou CMd+CliC (Mac) ou Ctrl+CliC (Windows). Si vous cliquez le bouton, un nouveau calque Bitmap fusionn est cr, les calques dorigine sont griss et lintitul du bouton devient Sparer, comme le montre la Figure 52.4. Lintrt daplatir ainsi les calques (sans impact sur le fichier PSD original) est de vous permettre dappliquer en une seule fois les mmes options dimportation un ensemble de calques.
Figure52.4
Calques aplatis lors de limportation Photoshop.
340
Flash CS5
Le menu Convertir les calques vous offre deux possibilits: soit avec Calques Flash faire de chaque calque Photoshop un calque Flash distinct, soit avec Images-cls en faire une image-cl distincte du scnario. Le plus souvent, vous ferez le premier choix, le second tant surtout pertinent dans le cas particulier o vous aurez mis en place dans les calques dun mme document Photoshop les diffrentes phases dune animation. Loption Placer les claques leur position dorigine est coche par dfaut. Elle ne doit pas vous inciter gifler qui que ce soit, pas mme les gens responsables de la version franaise de Flash! Simplement, en la dcochant les donnes importes seront globalement centres sur la scne, mais les diffrents lments conserveront leurs positions relatives. Cette option nexiste que dans limportation sur la scne. Loption Dnir la taille de la scne sur celle de la zone de travail de Photoshop modifie automatiquement les dimensions de la scne afin de les adapter celles du document Photoshop. Lorsque vous validez, lensemble du chier PSD est encapsul dans un symbole Flash qui porte le nom du chier. Un dossier portant lui aussi le nom du chier import est cr dans la bibliothque au mme niveau que le symbole. Il contient toutes les ressources utilises dans la hirarchie du symbole. Cette dernire est conserve telle quelle a t tablie dans Photoshop, mais elle est prsente par ordre alphabtique. Les donnes importes le sont dans le scnario du clip. Limportation de fichiers PSD a quelques limites et certaines des nombreuses possibilits du format ne sont pas reconnues par Flash: les objets dynamiques, les calques et images de remplissage, les calques de rglage. Leur caractre ditable est perdu dans Flash, mais leur application a bel et bien lieu, comme sils avaient t aplatis avec un calque classique. La Figure52.5 reproduit la section Importateur de fichier PSD de la bote de dialogue Prfrences. On y retrouve les options dcrites ci-dessus pour limage bitmap, le texte et les formes vectorielles. Choisir une option dans cette bote de dialogue, cest en faire loption coche par dfaut lorsque vous slectionnerez pour la premire fois un calque dans la partie gauche de la bote de dialogue dimportation.
Raccourci
CMd+r (Mac) ou Ctrl+r (Windows) importe un fichier dans la scne.
Images bitmap
341
Figure52.5
La section Importateur de fichier PSD de la bote de dialogue Prfrences.
Importer des donnes Fireworks

Avant le rachat par Adobe, Fireworks et Flash taient lorigine tous deux des produits Macromedia. Ils sont donc depuis longtemps communicants. Les concepteurs de Fireworks ont choisi comme format natif de lapplication le standard PNG (Portable Network Graphics). Le PNG Fireworks est lune des mises en uvre les plus pousses des spcifications de ce format par le W3C. Lorsque vous invoquez une commande Enregistrer dans Fireworks, un fichier PNG Fireworks est donc produit qui contient tous les calques et masques qui composent votre graphisme. En cela, PNG Fireworks est Fireworks ce que PSD est Photoshop. Lorsque vous invoquez une commande Exporter dans Fireworks comme dans la plupart des autres diteurs dimages matricielles un choix de formats de fichier soffre vous, parmi lesquels le PNG. Cette fois, le fichier produit contiendra le graphisme avec ses calques aplatis. Lun des intrts majeurs du format PNG est la gestion dune couche alpha, donc la possibilit de coder de la transparence en niveaux de gris. Ce format est prcieux pour limportation de ce type de transparence dans Flash (voir Fiche 54). La Figure 52.6 reproduit la bote de dialogue Importer un document Fireworks. Si vous cochez loption Importer sous forme de bitmap fusionne, toutes les autres options seront dsactives puisquelles sont relatives aux diffrentes pages et/ou calques qui composent limage avant dtre aplatis.
342
Flash CS5
Figure52.6
La bote de dialogue Importer un document Fireworks.
Lorsque le document Fireworks est compos de plusieurs pages, vous avez le choix entre en importer une ou les importer toutes. Dans ce dernier cas, un nouveau calque portant le nom du chier import est cr et chaque page y fait lobjet dune image-cl. Le choix par dfaut pour loption Dans est Image actuelle sous forme de clip. Les calques du fichier import deviennent autant de calques du nouveau symbole clip danimation. Si vous choisissez Nouveau calque, lensemble du contenu est import et aplati en un calque unique. On retrouve avec les options pour Objets et Texte les mmes enjeux que prcdemment pour limportation Photoshop. Dans les deux cas, avec loption par dfaut Importer au format bitmap pour prserver lapparence, contrairement ce que laisse penser lintitul, tout ce qui pourra tre prserv sous forme vectorielle le sera et le reste par exemple un mode de fusion ou un effet sans quivalent dans Flash, ou bien du texte attach une courbe sera aplati ou rasteris, cest--dire converti en image bitmap. Ne choisissez Prserver tous les trajets modiables (il faut lire tracs modiables), pour les Objets, et Conserver tous les caractres modiables, pour le Texte, que si vous tes sr que votre graphisme ne contient rien qui ne soit pas reconnu par Flash, sinon limportation sera partielle. Voyez la Fiche 57 pour les modes de fusion restitus dans Flash et la Fiche 59 pour les effets transposables en filtres Flash. Nhsitez pas importer une image provenant de Fireworks sous forme aplatie. Lorsque votre image aura t instancie et que vous en slectionnerez une copie (on ne parle pas doccurrence) sur la scne, le panneau Proprits saffichera tel que le montre la Figure52.7. Vous remarquez que lon y trouve un bouton Modifier. Si ce bouton est gris, cela signifie que le fichier a t renomm ou dplac aprs que vous layez import et quil faut le r-importer. En cliquant sur le bouton, le fichier original est ouvert dans Fireworks, o vous pouvez effectuer toutes les modifications souhaitables. En haut gauche de la fentre Fireworks se trouve une mention Modification partir de Flash. Quand vous avez termin votre retouche, cliquez sur le bouton Termin gauche de la mention. Vous revenez alors dans Flash o limage bitmap est mise jour dans la bibliothque, et par la mme toutes les copies que vous en avez faites dans le scnario. Ce mode de fonctionnement est trs efficace, puisquil vous vite de ritrer la procdure dimportation chaque modification.
Images bitmap
343
Figure52.7
Le panneau Proprits lorsquune copie dimage bitmap est slectionne sur la scne.
Limportation de donnes Fireworks sans aplatir cre dans votre bibliothque un dossier Objets Fireworks o se trouvent les clips gnrs. Libre vous de rorganiser votre convenance. Il est sans doute judicieux de donner aux clips et aux images des noms plus descriptifs que Symbole 1, Symbole2, etc., Bitmap 1, Bitmap 2, etc.
PNG Fireworks. Cest le format des fichiers sources des images bitmap composes dans cet diteur graphique, de mme que PSD est le format des fichiers source de celles composes dans Photoshop. Un fichier PNG Fireworks contient toutes sortes dinformations sur la structure de limage (calques, masques, effets, modes de fusion, etc.). Il ne peut donc tre ouvert que par Fireworks. PNG. Cest un format dimage bitmap, promu par le W3C. La plupart des diteurs graphiques sont dsormais capables dexporter une image ce format. Dans ce cas, il sagit dune image aplatie, cest--dire dont tous les calques et les effets ont t aplatis. Le format PNG est avec GIF et JPEG lun des trois standards pour le multimdia. Un fichier PNG peut tre ouvert par nimporte quelle application graphique.
Notions cls
Importer en lot
Vous avez la possibilit dimporter en une seule opration tout un lot de fichiers. Faites une slection multiple dans la bote de dialogue dimportation, comme dhabitude avec les touches Maj et/ou CMd (Mac) ou Ctrl (Windows). Si le dossier que vous slectionnez dans cette bote de dialogue contient une squence de fichiers qui ont un prfixe commun et ne diffrent que par un numro final, les numros tant conscutifspar exemple, papillon01.jpg, papillon02.jpg, papillon03.jpg, etc. Flash le dtecte lorsque vous slectionnez le premier fichier. Une bote de dialogue spcifique saffiche alors, vous proposant dinstancier les images de la squence sur des images successives du scnario. Validez si vos images sont les phases successives dune animation.
344
Flash CS5
Importer par copier-coller

Dans une certaine mesure, vous pouvez importer par simple copier-coller entre votre diteur dimages et Flash. Le passage dune pure image bitmap par le Presse-papiers du systme dexploitation ne pose aucun problme. Par contre, pour tout ce qui est vectoriel, pour le texte, la structure de calques, la transparence et les modes de fusion, le rsultat sera au meilleur hasardeux et au pire dsastreux! Le copier-coller marche beaucoup mieux entre Fireworks et Flash. Sont notamment reconnues les images multiples (animation), ainsi que les pages multiples (publication web).
Raccourci
CMd+V (Mac) ou Ctrl+V (Windows) colle au centre de la scne. Maj+CMd+V (Mac) ou Maj+Ctrl+V (Windows) colle en place, cest--dire en conservant la position.
Instancier une copie dimage bitmap

Une fois limage bitmap importe dans la bibliothque, vous devrez linstancier dans le scnario et sur la scne. Procdez comme vous le feriez avec un symbole (voir section Crer des occurrences, Fiche 33). Il faut slectionner une image du scnario avant de glisserdposer limage bitmap. Petite prcision de vocabulaire: une image bitmap ntant quun pseudo-symbole, on parle plutt de copie que doccurrence. Parfois, il arrive que la copie ne soit pas cre sa taille relle. Dans ce cas, il faut la supprimer et r-instancier limage bitmap. Au sein dun calque, les images bitmaps se trouvent toujours au-dessus du contenu vectoriel en mode de fusion (les objets vectoriels sont par dessus). Cet ordre nest pas un ordre par dfaut, il est inflexible : vous ne pouvez mme pas utiliser les commandes du menu Modication> Rorganisation pour le modifier. De plus, si vous sparez la copie dimage bitmap, celle-ci participe la fusion avec les lments vectoriels (voyez la section Sparer une image bitmap pour lditer, Fiche 53 qui vous en donne un exemple illustr). Lorsque limage bitmap est slectionne dans la liste de la bibliothque, en cliquant sur le bouton du bas portant un i, vous ouvrez la bote de dialogue Proprits du bitmap reproduite la Figure 56.2 (il est aussi possible de double-cliquer dans la liste, ou sur laperu, ou encore sur licne darbre en haut du panneau Proprits reproduit Figure52.6). Dans cette bote de dialogue, on constate que Flash conserve le chemin daccs au fichier import: il est affich sous le champ du nom. Si le fichier a t dplac ou renomm depuis limportation, le lien a t rompu. Le bouton Importer vous permet de le rtablir. Ce bouton vous offre aussi la possibilit de faire une permutation de fichiers (et non de pseudo-symboles, voir Fiche 37). Enfin, si depuis limportation le fichier a t modifi en externe et non pas partir de Flash comme dcrit prcdemment le bouton Mettre jour vous permet de mettre jour votre animation avec la dernire version de limage bitmap. Aprs permutation ou mise jour de fichier, limage
Images bitmap
345
bitmap est modifie dans la bibliothque et cela se rpercute bien sr sur toutes les copies du scnario, sans quil soit ncessaire de r-instancier.
Fiche 53
diter une image bitmap

Nous avons consacr le long Chapitre 2 au dessin vectoriel, lun des piliers de Flash. Nous y avons dit quen la matire lenvironnement Flash ne peut rivaliser avec un logiciel comme Adobe Illustrator ou mme son rival le logiciel libre Inkscape. En matire de traitement dimage matricielle, Flash est encore moins mme de rivaliser avec Adobe Photoshop, Adobe Fireworks ou le logiciel libre Gimp. En rgle gnrale, cest en externe, dans lun de ces environnements, que vous diterez les images bitmap intgres dans vos animations Flash, dautant que dsormais nouveaut CS5 les allers-retours ddition sont possibles dans Photoshop comme ils ltaient dj dans Fireworks (voir la section Importer des donnes Fireworks de la fiche prcdente). Ceci tant dit, si les possibilits ddition au sein de Flash sont trs limites, elles ne sont pas inexistantes. Faisons-en le tour. Une photographie que vous aurez importe sera traite comme une entit unique de la bibliothque Flash. On ne parle pas ce propos de symbole, ni doccurrences, nanmoins le principe de factorisation dinformation reste pertinent pour tous les types de mdias dont les donnes sont volumineuses. Vous pouvez donc intgrer dans votre scnario autant de copies que vous voulez dune image bitmap donne, celle-ci ne sera tlcharge quune seule fois par linternaute. Lorsque vous slectionnez sur la scne une copie dimage bitmap (outil Slection, outil Lasso), celle-ci sencadre dun rectangle de slection bleu (exemple gauche de la Figure53.1) indiquant que cest lentit qui est slectionne, de faon similaire ce qui se passe lorsque vous slectionnez un groupe ou un symbole. En rgle gnrale, le rendu des images bitmap est meilleur si vous cochez Autoriser le lissage dans la bote de dialogue Proprits du bitmap (elle est reproduite Figure56.2).
Sparer une image bitmap pour lditer

Ds lors que vous voulez diter une copie dimage bitmap, il faut commencer par la sparer. Slectionnez-la, puis faites appel la commande Modification> Sparer. La copie de limage se recouvre de petits points blancs, comme le montre lexemple de droite de la Figure53.1.
346
Flash CS5
Figure53.1
Slection de deux copies dune mme image bitmap: non spare gauche, spare droite.
Si la commande est la mme que pour la sparation occurrence-symbole, contrairement ce qui se passe avec cette dernire, le lien limage bitmap dans la bibliothque nest pas rompu. Notamment, quoi que vous fassiez par la suite sur la copie spare en effacer une partie, en masquer une partie, la redimensionner, cela ne diminuera aucunement la taille des donnes qui restera celle que limage bitmap avait au moment de limportation. Ceci est un argument de poids (dans tous les sens du terme!) pour effectuer en amont dans un logiciel ddi les oprations majeures ddition, puis mettre jour ou r-importer (voir la fiche prcdente). Prcisons quen soi la sparation naugmente pas non plus la taille de votre fichier publi. Encore une fois, le principe de factorisation dinformation vu pour les occurrences de symboles sapplique aussi pour les copies dimages bitmap, indiffremment que celles-ci aient t ou non spares. Une fois spare, limage devient ditable. Vous pouvez nen slectionner quune partie, par exemple en glissant un rectangle de slection (outil Slection), ou en utilisant loutil Lasso. Vous pouvez alors supprimer cette slection, la dplacer, la copier ou la couper puis la coller. Vous pouvez aussi diter les pixels via les outils de dessin vectoriel. Dans lexemple illustr Figure53.2, on a cr un calque par dessus celui de la copie de limage bitmap du papillon, puis peint avec loutil Pinceau dans ce nouveau calque le maquillage color.
Figure53.2
Maquillage du papillon en dessinant sur un calque spar.
Images bitmap
347
ce niveau, la copie de limage bitmap est intacte, prserve par les calques. Slectionnons le maquillage, coupons-le puis collons-le dans le calque du papillon. Le rsultat est montr sur la partie gauche de la Figure53.3. On y voit notamment les rectangles de slection de chacune des formes peintes en mode de dessin dobjets (voir Fiche 8). La partie droite de cette mme figure montre que la copie de limage bitmap est toujours intacte, prserve cette fois-ci par lidentit dobjet des dessins vectoriels.
Figure53.3
Copie des objets de dessin sur le calque du papillon: le maquillage reste sparable et limage bitmap est intacte.
En appliquant la commande Modification > Dissocier la slection dobjets de dessin, ceux-ci passent en mode de fusion. La partie gauche de la Figure53.4 montre le rsultat: la slection des formes est dsormais recouverte de points. Si lon dplace cette slection, comme le montre la partie droite de cette mme figure, on dcouvre que cette fois-ci il y a bel et bien eu dition de la copie de limage bitmap qui a t poinonne par les formes.
Figure53.4
La sparation des objets de dessin les fait fusionner et poinonner limage bitmap.
Dans les exemples du livre, le fichier source : FCS5_53a.fla..
Rappelons qu linverse, empils par dessus une forme vectorielle dans le mme calque, les pixels dune bitmap liminent toute portion du remplissage qui se trouve en dessous.
Raccourci
CMd+b (Mac) ou Ctrl+b (Windows) spare loccurrence dimage bitmap slectionne sur la scne.
348
Flash CS5
Si votre lecteur de PDF ne lit pas le Flash, tlchargez lanimation qui suit depuis le site de Pearson. Elle se trouve dans larchive des exemples : CHAP5 > FCS5_53b.swf ; elle illustre la sparation dans les deux cas. Sinon, cliquez sur les boutons pour la lancer ou larrter.
Remplissage bitmap dune forme vectorielle

Une fois spare, une image bitmap peut aussi servir de texture de remplissage dune forme vectorielle. Si vous cliquez dessus avec la pipette, elle devient la couleur de remplissage. Vous pouvez alors tracer une forme qui en sera remplie. Lorsque limage bitmap utilise comme texture de remplissage est plus petite que la forme remplir, il y a pavage comme lillustre la Figure53.5.
Figure53.5
Pavage lors du remplissage dune forme avec une image bitmap beaucoup plus petite.
Pour remplir une forme avec une texture bitmap, vous pouvez aussi slectionner Bitmap dans le menu Type du panneau Couleur (voir Figure15.5). Les images bitmap de la biblio-
Images bitmap
349
thque apparaissent dans le nuancier qui souvre au clic sur la puce Couleur de remplissage (voir section Modifier les attributs de remplissage, Fiche 15). Dans lexemple de la Figure53.6, la bibliothque contient sept images bitmap de papillons qui figurent comme chantillons tout en bas du nuancier.
Figure53.6
Les images bitmap de la bibliothque apparaissent comme chantillons slectionnables et couleur de remplissage.
Comme son nom ne lindique pas, loutil Transformation de dgrad (dcrit la section Transformer un dgrad, Fiche 16) permet aussi de transformer une texture de remplissage. Dans lexemple de la Figure53.7, le pavage a t dilat verticalement. Lorsque vous slectionnez la forme texture, puis loutil Transformation de dgrad, lun des carreaux du pavage sentoure dun rectangle englobant portant six poignes de contrle: milieu du ct gauche: redimensionnement horizontal; coin bas gauche: redimensionnement proportionnel; milieu du ct bas: redimensionnement vertical; milieu du ct droit: inclinaison horizontale; coin haut droit: rotation; milieu du ct haut: inclinaison verticale. Pour dplacer le point pivot, glissez-dposez le point central. Toutes ces transformations restent propres la copie et naffectent aucunement limage bitmap elle-mme. Tout se passe comme sil sagissait de proprits doccurrences. Une copie dimage bitmap ne subsistera pas forcment comme telle dans votre animation. Parfois, vous aurez intrt la convertir en forme vectorielle: il sagit de lopration de traage, dcrite la Fiche55. Dans dautres contextes, la copie dimage bitmap sera imbrique dans un symbole graphique ou clip. Ce sera le cas si vous souhaitez quelle fasse lobjet dune interpolation (voir Chapitre4) ou lui appliquer un effet de couleur (voir Fiche 37), un mode de fusion ou un filtre (ils seront traits respectivement aux Fiches 57 et 59).
350
Flash CS5
Figure53.7
Transformation du pavage de remplissage via loutil Transformation de dgrad.
Raccourci
F slectionne loutil Transformation de dgrad.
Fiche 54
Intgrer une image bitmap non rectangulaire

Lorsque vous composez une scne, il est trs courant de vouloir intgrer une image bitmap ayant une forme quelconque, non rectangulaire. Pour raliser cela dans Flash vous avez cinq options. Les quatre premires concernent le cas o lon passe sans transition du fragment dimage bitmap au reste de la scne: le remplissage dune forme vectorielle, le masquage interne, le dtourage interne ou le dtourage externe. Si vous souhaitez une transition progressive sur les bords du fragment dimage bitmap, il faudra faire appel la dernire option: la transparence en niveaux de gris, soit ralise dans un diteur externe, encode dans un fichier PNG puis importe, soit mise en uvre par modes de fusion.
Remplir une forme vectorielle

Nous avons trait la section Remplissage bitmap dune forme vectorielle, Fiche 53 le remplissage dune forme vectorielle par une image bitmap. Dans lexemple de la Figure53.5, limage bitmap servant texturer le remplissage tant plus petite que la forme remplir, il en rsultait un pavage. Rien ne vous empche dimporter une image bitmap dont les dimensions soient suprieures celles de lenglobant de la forme remplir. Nanmoins, en vous rappelant que lensemble de limage bitmap devra tre charg par linternaute mme sil ny en a quune fraction utilise dans le remplissage, vous vous arrangerez pour que la largeur
Images bitmap
351
et la hauteur de limage bitmap ne soient que lgrement suprieures celles de lenglobant de la forme. Dessinez une forme vectorielle avec un remplissage initial de couleur unie. Sil sagit dune forme gomtrique, utilisez loutil correspondant Rectangle, Ovale, Polygone, etc., (voir Fiche 11). Sinon, faites du dessin la plume ou main leve (voir Fiche 10). Dans ce dernier cas, retouchez ventuellement laide de loutil Sous-slection pour vous assurer que le trac correspond effectivement une courbe ferme. Ceci acquis, slectionnez dans le panneau Couleur le type Bitmap pour le remplissage, puis cliquez sur lchantillon de limage bitmap souhaite dans le nuancier de la couleur de remplissage (voir Figure53.6). Dans ce cas, limage bitmap est utilise avec ses dimensions dorigine. La Figure54.1 vous en donne un exemple. Limage bitmap utilise est slectionne dans la bibliothque. Vous pouvez galement appliquer le remplissage textur via loutil Pot de peinture (voir section Modifier les attributs de remplissage, Fiche 15). Dans ce cas, limage bitmap est de moindres dimensions.
Figure54.1
Remplissage dune forme avec une partie dune image bitmap plus grande quelle.
Masquer dans Flash

Reportez-vous la Fiche 23 pour lutilisation dun calque masque. Ce que nous y avons dcrit comme la ralisation dun effet de pochoir correspond tout fait notre problme actuel de dtourage dune image bitmap. La Figure54.2 montre le scnario et la scne dun
352
Flash CS5
tel dtourage par masquage et la Figure54.3 montre le rsultat visualis en verrouillant les deux calques.
Figure54.2
Ralisation de dtourage dans Flash via un masque.
Figure54.3
Rsultat du masquage construit la figure prcdente.
Dtourer dans Flash

Bien quil soit sans doute plus simple de dessiner un masque avec un outil de dessin main leve, vous avez aussi la possibilit de dtourer la copie dimage bitmap spare au pralable, voir section Sparer une image bitmap pour lditer, Fiche 53 directement sur la scne laide de loutil Gomme (voir section dition, Fiche 7). La Figure54.4 montre
Images bitmap
353
lbauche du travail sur la mme image que prcdemment. Remarquez quil faudrait affiner les jonctions de ptales avec une taille doutil plus petite. Cest l que le dessin dun masque savrerait sans doute plus pratique.
Figure54.4
Dtourage dune image bitmap spare laide de loutil Gomme.
Vous ntes pas limits la gomme: si vous faites des slections de zones de pixels laide de loutil Lasso, il suffit ensuite denfoncer la touche sUppr pour les liminer. En matire de dtourage dimage bitmap le mode baguette magique de loutil Lasso est un atout de choix. Dans la zone doptions de loutil se trouve un bouton Proprits de la baguette magique qui ouvre la bote de dialogue homonyme reproduite Figure54.5. Pour le Seuil, spcifiez une valeur entre 0 et 200. Plus la valeur sera grande et plus la tolrance sera grande pour la diffrence entre valeurs de pixels, donc plus la slection englobera de pixels. Dans le menu droulant Lissage, choisissez entre Pixels, Irrgulier, Normal et Lisser.
Figure54.5
La bote de dialogue Paramtres de la baguette magique.
Un second bouton dans la zone doptions de loutil Lasso permet dactiver le Mode baguette magique. Loutil fonctionne de faon classique. Si ce nest pas dj le cas, dslectionnez la copie dimage spare, puis cliquez-en un des pixels. Tous les pixels connexes au point cliqu dont la diffrence de couleurs est infrieure au seuil de tolrance se retrouvent slectionns. Ainsi, sur la Figure54.6, on a cliqu lun des pixels de haute lumire en haut gauche de limage. Il suffira ensuite denfoncer la touche sUppr pour liminer presque toute la partie du coin suprieur gauche (les quelques pixels rsiduels seront facilement effacs
354
Flash CS5
la gomme). En cliquant successivement sur plusieurs points, vous pouvez mme faire une slection multiple de zones.
Figure54.6
Poursuite du dtourage laide de la baguette magique.
Dtourage externe
Vous tes peut-tre familier dun diteur dimages matricielles dans lequel vous avez lhabitude de dtourer. Dans ce cas, faites ce travail en amont de limportation dans Flash. La Figure 54.7 montre limportation dun fichier monarque.psd contenant un papillon dtour dans Photoshop. Sur licne de lunique calque, vous remarquerez le fond damier, dnotation conventionnelle de la transparence.
Figure54.7
Importation dune image dtoure dans Photoshop.
Images bitmap
355
Transparence en niveaux de gris

Dans lexemple de la Figure54.7, la transparence est binaire. Autrement dit, chaque pixel de limage bitmap ne peut tre que totalement opaque ou totalement transparent. Ce serait aussi le cas avec de la transparence code dans la palette de couleurs dun fichier GIF. La consquence est que lil passe sans transition dun pixel opaque un pixel transparent, donc montrant le ou les lments se trouvant derrire limage bitmap dans lempilement de calques de la scne. Si vous souhaitez une transition progressive entre le totalement transparent et le totalement opaque, il faut recourir la transparence en niveaux de gris. Cela passe par lutilisation dun masque, mais celui-ci nest plus binaire, mais cod sur 256 niveaux. La Figure54.8 donne un exemple dun tel masque. Lexploitation des niveaux de gris est la suivante: la valeur code pour chaque pixel est ramene entre0 et 100 par une simple rgle de trois qui donne le pourcentage dopacit. Si celui-ci est strictement positif et infrieur 100, le pixel est partiellement opaque et lon calcule sa valeur finale par moyenne pondre avec la valeur de pixel de ce qui se trouve sous lui. Sil a t question de masque dans Flash la Fiche 23, nous y avons prcis que ce masque est binaire. Un masque en niveaux de gris peut tre cr en amont dans un diteur dimages matricielles. Celui de la Figure54.8 a t ralis dans Fireworks. La Figure54.9 montre la composition sur deux calques Fireworks qui produit lattnuation progressive de limage bitmap initiale.
Figure54.8
Un masque en niveaux de gris utilis dans Fireworks.
Si le format PNG nest pas encore devenu dans la pratique de chacun de nous le standard que ses concepteurs voudraient quil soit, vous avez au moins une bonne raison de lutiliser: il est le seul format dimage matricielle qui gre la transparence en niveaux de gris. Le document construit dans Fireworks illustr Figure54.9 a donc t export au format PNG, puis
356
Flash CS5
import dans Flash. La Figure54.10 montre limage de la fleur attnue sur les bords place sur une scne Flash de couleur darrire-plan noire.
Figure54.9
Construction dun masquage en niveaux de gris dans Fireworks.
Figure54.10
Le fichier PNG du masquage en niveaux de gris aprs importation dans Flash.
Images bitmap
357
Il est galement possible de mettre en uvre la transparence en niveaux de gris via certains modes de fusion. Reportez-vous la fin de la Fiche 57 o cette technique est explique.
Masque binaire, transparence binaire, GIF. Les masques quil est possible de dfinir dans Flash sont binaires, au sens o ni la couleur, ni lopacit dun pixel du masque nest prise en compte. La seule information signifiante pour le rsultat visuel du masquage est la prsence ou labsence de pixel. Le format dimages matricielles GIF est dit en couleurs indexes. En effet, un pixel ne contient pas directement son triplet RVB, mais un index renvoyant une entre de la palette de 256 couleurs dans laquelle on le trouve. Certaines entres de la palette peuvent tre dfinies comme transparentes. Il sagit encore de transparence binaire, puisque soit le pixel a une couleur, soit il est transparent. Masque en niveaux de gris, transparence en niveaux de gris, PNG, couche alpha. Pour des raisons informatiques de niveau matriel, les donnes sont toujours transfres en nombre pair doctets. Le transfert dun triplet RVB de trois octets en consomme donc quatre. Do lide dutiliser ce quatrime octet pour coder une opacit (ou une transparence, ce qui est quivalent) sur 256 niveaux. On parle alors de couche alpha dune image bitmap. Avec ce type de transparence en niveaux de gris, il est possible de raliser, par exemple, un effet de Marie-Louise floue autour dun portrait. Parmi les trois formats dimages bitmap standard pour le multimdia (GIF, JPEG, PNG), seul PNG est capable de grer une couche alpha.
Notions cls
Fiche 55
Convertir une image bitmap en vectoriel

Limage matricielle alourdissant rapidement le fichier SWF que vous publiez, elle demande tre employe avec parcimonie. Ainsi la bote papillons de la Figure55.1 qui contient sept images bitmap ne ferait sans doute pas une bonne page daccueil de site, car trop longue tlcharger. Si nanmoins cest ce graphisme que vous voulez tout prix, la solution consiste peut-tre le vectoriser, cest--dire transformer les donnes matricielles des pixels en donnes vectorielles de traits et de formes. Cette fonctionnalit est intgre lenvironnement Flash sous le terme de traage. Slectionnez la copie dimage bitmap convertir. Elle ne doit surtout pas avoir t spare; si cest le cas, supprimez-la et refaites une copie de loriginal depuis la bibliothque. Appelez ensuite la commande Modification> Bitmap> Tracer le bitmap qui ouvre la bote de dialogue Tracer le bitmap (voir Figure55.2).
358
Figure55.1
Une scne compose de sept images bitmap.
Flash CS5
Figure55.2
La bote de dialogue Tracer le bitmap.
Le paramtre Seuil de couleur attend une valeur entre 1 et 500, valeur laquelle sera compare le cumul des trois diffrences canal par canal (R,V et B) des pixels compars. Plus la valeur sera leve et plus le fichier sera lger, mais aussi plus les effets de posterisation seront grands. Le terme de posterisation dsigne de larges plages de pixels contigus ayant la mme valeur, par rfrence aux posters dimpression mdiocre qui taient autrefois revendus la sauvette. La scne de la Figure55.3 a t trace avec un Seuil de couleur de 100. Leffet de posterisation est surtout visible en affichage sous forme de contours (voir section Lenvironnement au service de la complexit, Fiche 22): les zones homognes sont celles o lon voit la couleur darrire-plan sur la Figure55.4. Comparez cette dernire avec les figures suivantes.
Images bitmap
359
Figure55.3
Les sept images bitmap traces avec les paramtres de la figure prcdente.
Figure55.4
La scne de la figure prcdente en affichage sous forme de contours.
La scne des Figures 55.5 et 55.6 a t calcule avec un Seuil de couleur de seulement 10, les valeurs des trois autres paramtres restant inchanges. Le rsultat visuel est nettement moins posteris et beaucoup plus fidle loriginal.
360
Figure55.5
Les sept images bitmap traces avec un paramtre de Seuil de couleur de 10.
Flash CS5
Le paramtre Zone minimum dfinit la taille de la zone considre pour calculer une moyenne. Sa valeur 8 par dfaut doit tre comprise entre 1 et 1000 pixels. L encore, plus la valeur sera leve et plus le fichier SWF sera lger, mais plus limage sera posterise. Les scnes des Figures 55.3 55.6 ont t calcules avec une Zone minimum de8pixels. Par contre, celle des Figures 55.7 et 55.8 a t calcule avec une Zone minimum de1pixel, les valeurs des trois autres paramtres restant celles de la Figure55.2. Le rsultat visuel est moins posteris que sur les Figures 55.3 et 55.4, mais pas aussi fidle loriginal que sur les Figures55.5 et55.6.
Figure55.6
Images bitmap
361
Figure55.7
Les sept images bitmap traces avec un paramtre de Zone minimum de 1 pixel.
Figure55.8
Le paramtre Aspect des courbes a six valeurs possibles allant de Pixels Trs lisse, Normal tant la valeur par dfaut. Trs lisse produit le fichier SWF le plus lger, tandis qu linverse Pixels fournit la meilleure qualit visuelle. Le paramtre Seuil dangle dfinit le seuil au-del duquel les angles sont supprims, cest-dire les courbes lisses. Ses trois valeurs possibles sont Angles nombreux (meilleure qualit visuelle), Normal (par dfaut) et Peu dangles (fichier SWF le plus lger).
362
Flash CS5
Dans les fichiers dexemple : le source FCS5_55a.fla et FCS5_55b.swf.
Avec un Seuil de couleur de 10, une Zone minimum de 1 pixel, Pixels pour lAspect des courbes et Angles nombreux pour le Seuil dangle, vous tes assurs dune bonne fidlit du trac vectoriel loriginal matriciel. Enfin, soyons honnte, vous ntes assurs de rien. Bien souvent de telles valeurs lancent un calcul qui semble tellement interminable que lon ne rsiste pas lenvie de tuer le processus au niveau du systme dexploitation! Sans parler des cas o lapplication Flash plante purement et simplement Et mme si tout se passe bien et que vous avez la patience dattendre, le rsultat est souvent une prolifration de segments vectoriels. La Figure55.6 en donne un bon exemple: on ny voit quasiment plus la couleur darrire-plan tellement les papillons sont saturs de traits de contours. La taille du fichier SWF rsultant peut tre rdhibitoire. Le comble est atteint lorsquelle est suprieure celle obtenue avec des images bitmap ! Il faut bien prendre conscience du fait que ce nest pas seulement une question despace informatique (taille de fichier), mais aussi une question de temps informatique: un fichier plus lourd est non seulement plus long tlcharger, mais une telle prolifration de segments va galement mettre forte contribution le moteur de rendu du lecteur Flash, et par l-mme le processeur de la machine cliente. Enfin, dernier inconvnient li la prolifration de segments: nous vous mettons au dfi dditer manuellement des graphismes vectoriels tels que ceux de la Figure55.6. Le traage dune image bitmap a ceci de commun avec sa compression JPEG quil est affaire de compromis entre lgret du fichier produit et qualit visuelle du rsultat. Il ny a pour cela aucune rgle. Tout se joue au cas par cas dans un cycle dessais successifs jusqu trouver le paramtrage produisant le compromis le plus satisfaisant. Pour information, les fichiers SWF correspondant aux Figures 55.3, 55.5 et 55.7 ont pour tailles respectives 60Ko, 192Ko et 376Ko. En matire de traage, le laborieux processus dessais-erreurs se complique du fait de la combinatoire engendre par les quatre paramtres. Nanmoins, vous disposez dans la bote de dialogue Tracer le bitmap dun bouton Aperu fort utile. Noubliez pas non plus la commande Modier> Annuler Tracer le bitmap. Bien souvent, les considrations de tailles conduisent un graphisme vectoriel visuellement infrieur loriginal matriciel, mais cela peut aussi tre un parti pris graphique. Avec la pratique galement, vous saurez mieux avec quelles images bitmaps tenter le traage. Dans notre exemple, il est vident que le papillon en bas droite de la scne sy prte mieux que celui du centre. Sont a priori vectorisables les graphismes comportant de larges zones homognes en couleur de pixels, dlimites par des tracs nets. Le traage peut tre une ncessit technique, par exemple si vous voulez appliquer une transformation gomtrique votre graphisme. Rappelons que sur la copie dimage bitmap, la transformation se fait rarement sans pixelisation, tandis que sur le graphisme vectoriel elle se fait toujours sans distorsion. Vouloir effectuer une mtamorphose sur le graphisme (voir la Fiche 31 sur les interpolations de formes) est une autre raison technique deffectuer un traage.
Images bitmap
363
Si la premire motivation pour le traage est lallgement escompt de la vectorisation, noubliez pas deffacer limage bitmap dorigine de la bibliothque pour allger le fichier SWF publi. Enfin, si le rsultat du traage est encore trop lourd votre got, pensez aller plus loin laide des commandes du menu Modication> Forme > (voir section Retravailler la courbe globalement, Fiche 10). Commencez par Optimiser et si cela ne suffit toujours pas, essayez Lissage avanc et Redressement avanc.
Si votre lecteur de PDF ne lit pas le Flash, tlchargez lanimation qui suit depuis le site de Pearson. Sinon, cliquez sur les boutons pour la lancer ou larrter. Elle se trouve dans larchive des exemples : CHAP7 > FCS5_55b.swf et reprsente le diaporama des sept illustrations avec leurs paramtres.
Fiche 56
Optimiser les images bitmap

Ne perdez pas de vue que toute image bitmap alourdit considrablement le fichier publi. Si vous ne vectorisez pas vos donnes matricielles (voir la fiche prcdente sur le traage), il faut imprativement vous poser la question de loptimisation de la taille de vos fichiers dimages bitmap.
dition externe
En amont de limportation dans Flash, dans votre diteur favori, il y a quelques mesures de bon sens prendre. Commencez bien sr par recadrer votre image pour supprimer tous les
364
Flash CS5
pixels (de couleur unis ou transparents) qui se trouvent au-del du rectangle englobant la partie utile. Les images tant destines laffichage sur cran, donnez-leur une rsolution de 72 points par pouce (dpi). Peut-tre partez-vous de fichiers initialement destins limpression, numriss en rsolution de 300dpi, voire suprieure. Dans ce cas, si limage est la bonne taille physique, vous devez sous-chantillonner. Prenez conscience du fait que passer de 300 72 dpi, cest diviser grosso modo par 4 la densit linaire de points (pixels), donc diviser par 16 la taille du fichier avant mme denvisager la compression. Le lecteur Flash est tout fait capable de redimensionner une image bitmap de votre bibliothque. Nanmoins, sil sagit de rduire ses dimensions et quaucune des copies de limage dans lanimation nest 100 %, cela prend inutilement de la place dans le fichier SWF (donc aussi du temps de tlchargement). Sil sagit daugmenter les dimensions de limage bitmap, vous allez invitablement avoir des artefacts de pixelisation lcran. Rduction ou augmentation des dimensions, dans un cas comme dans lautre cela surcharge inutilement le lecteur Flash (donc le processeur). Il nest pas logique de lui faire refaire la vole ce travail de r-chantillonnage chaque relecture de lanimation. Faites-le donc une bonne fois pour toutes dans votre diteur externe dimages bitmap. Et plutt que dagrandir une image, repartez si possible dune version plus haute rsolution de la mme image pour la sous-chantillonner, et non sur-chantillonner la premire. Au pire, utilisez des outils qui corrigent les artefacts de pixelisation lagrandissement. Il est tentant de paramtrer la compression dans un diteur ddi aux donnes matricielles, qui offre donc beaucoup plus de possibilits que Flash. Dun simple point de vue de confort de travail, votre diteur vous propose sans doute un mode daffichage 4 en 1 comme celui de Fireworks illustr la Figure56.1. En haut gauche se trouve limage originale. Les trois autres images rsultent de trois jeux diffrents de paramtres de compression (dans lexemple, une compression JPEG 60%, 40% et 20%). Cest un outil formidable pour trouver rapidement, pour une image donne, le compromis optimal entre le facteur de compression et la qualit visuelle. Soyez bien conscient du fait que si vous effectuez la compression en amont de Flash comme nous venons de le suggrer, lors de la publication vous ne pourrez que reprendre les paramtres de cette compression. Rien ne vous empche dans Flash dappliquer une seconde passe de compression, mais ce serait tout fait stupide. En effet, le JPEG dun JPEG ne serait pas beaucoup plus lger, par contre sa qualit visuelle aurait de fortes chances de se dgrader de manire visible. Lapproche prcdente peut se dfendre si vous travaillez seul et si vous avez bien compris comment fonctionne la compression, dans Flash en particulier. Dans un contexte de travail en quipe, un graphiste fournit les images une autre personne en charge de les intgrer dans Flash et de publier le fichier SWF. Ce second intervenant doit pouvoir faire diffrents tests en jouant sur les paramtres de compression quoffre Flash, do limportance de lui fournir des images non compresses et de retarder la compression jusqu la publication Flash.
Images bitmap
365
Dautre part, la compression JPEG dans Flash prsente un autre avantage sur celle de Fireworks. De faon pour le moins inattendue, Flash est capable de compresser en JPEG une image importe au format PNG et prsentant des pixels transparents, tout en conservant la transparence dans le fichier SWF.
Figure56.1
La fentre daperu 4 en 1 de Fireworks pour comparer loriginal trois images compresses diffremment.
Compression
En double-cliquant sur licne dune image bitmap dans la bibliothque (ou en cliquant sur le bouton dont licne porte un i, ou encore en slectionnant Proprits dans le menu contextuel ou le menu des options du panneau Bibliothque), vous ouvrez la bote de dialogue Proprits du bitmap, reproduite la Figure56.2. Selon une logique semblable celle des symboles, les proprits dune image bitmap affectent toutes les copies qui en sont faites dans le scnario. Le rendu de limage bitmap est souvent meilleur si vous cochez Autoriser le lissage. Aprs lissage, les transitions entre zones seront rendues plus progressives. Cela attnuera dven-
366
Flash CS5
tuels artefacts de compression JPEG et le flou introduit au cours de lopration est un moindre mal pour notre il. Nautorisez pas le lissage si limage est de petite taille, ni si elle fait lobjet dune animation, ce qui pnaliserait cette dernire. De par son principe, lalgorithme sous-jacent JPEG traite limage en blocs de huit par huit pixels. Lorsque vous compressez fortement, les blocs peuvent tre en partie visibles dans le rsultat. Limage en bas droite de la Figure56.1, compresse 20%, en est un exemple. Lorsque vous avez ce genre dimage, sans disposer dune version non compresse ou au moins de meilleure qualit que vous pourriez recompresser plus subtilement, cochez loption Activer le dgroupage pour attnuer lartefact.
Figure56.2
La bote de dialogue Proprits du bitmap.
Dans le menu Compression, vous faites le choix entre deux modes de compression. Les formats GIF (Graphic Interchange Format) et PNG (Portable Network Graphics) rsultent dune compression dite sans perte au sens o elle ne dtruit aucune information : aprs dcompression chaque pixel est rigoureusement ce quil tait dans limage originale. linverse, le format JPEG (Joint Photographic Experts Group) relve dune compression avec perte ou destructive: une partie de linformation prsente dans limage originale est carte (les hautes frquences cest--dire les transitions rapides auxquelles lil est moins sensible) et elle est impossible rcuprer la dcompression. Une image compresse en JPEG est dune taille en moyenne gale 10% de celle de limage non compresse, un facteur de compression quil est impossible datteindre par une compression sans perte. Le pourcentage effectif dpend dune part de limage et dautre part du rglage de Qualit JPEG (valeur entre 0 et 100) par lequel vous exprimez votre compromis entre lgret du fichier et qualit visuelle du rsultat. Sur la base de ce qui prcde, vous pourriez prendre le parti de choisir systmatiquement JPEG dans lide dobtenir les fichiers SWF les plus lgers possibles. Les choses sont plus subtiles. La compression sans perte a ses vertus sinon pourquoi ce menu droulant? En gardant lesprit que le P de JPEG est pour la photographie, vous choisirez sans hsiter ce format pour toute image pleine de nuances. Cest le cas dune photographie bien sr, mais
Images bitmap
367
aussi de la numrisation dune reproduction de peinture par exemple. Par contre si votre image est riche en aplats de couleurs pur graphisme, schma, texte, en fait toutes choses qui se prteraient parfaitement la vectorisation (voir la fiche prcdente) la compression sans perte reste pertinente. Ces principes assimils, soyons conscients quil ny a aucune rgle en la matire et que tout se joue au cas par cas. Do limportance du bouton Tester, qui au clic vous permet de prvisualiser leffet de votre paramtrage gauche de la bote de dialogue. Exploitez galement les informations qui saffichent en bas aprs avoir cliqu le bouton Tester : une taille de plusieurs centaines de kilo-octets ne serait sans doute pas raisonnable. Pour la compression JPEG, vous pouvez souvent descendre 5% de loriginal en conservant une qualit visuelle acceptable. Flash fait lhypothse que les images JPEG importes ont dj t optimises. Nous vous avons nous-mme incit le faire la section prcdente. Donc dans ce cas et si vous maintenez loption Photo (JPEG) pour la compression, loption Utiliser les donnes JPEG importes est coche par dfaut. En dcochant cette option, vous rendez accessible le paramtre Qualit JPEG. Sachez toutefois que recompresser en JPEG une image JPEG avec lespoir de diviser, chaque passe, la taille par10 est un non-sens. En effet, nous avons dit plus haut que lalgorithme sous-jacent JPEG limine plus ou moins agressivement selon votre rglage les hautes frquences de limage. Lorsque ceci aura t fait dans une premire passe, le facteur de compression dune seconde passe ne pourra tre quinsignifiant. Par contre, vous introduirez des artefacts dommageables la qualit visuelle. Si limage importe nest pas au format JPEG et si vous choisissez loption Photo (JPEG) pour la compression, loption Utiliser la qualit par dfaut du document est coche par dfaut (voir le paragraphe suivant). Comme prcdemment, en dcochant cette option vous rendez accessible le paramtre Qualit JPEG. Tous les paramtres que nous venons dvoquer pourraient tre qualifis de locaux au sens o ils sont propres une image bitmap donne. Dans les paramtres de publication (sur lesquels nous reviendrons la Fiche 83), il existe galement des paramtres globaux relatifs limage bitmap, valables uniquement pour le document courant. La Figure56.3 montre que lon y retrouve une glissire de Qualit JPEG et une option Activer le dgroupage JPEG. La rgle est que ces valeurs globales de paramtres ne sont utilises que pour les images pour lesquelles aucune valeur locale na t dfinie. Lorsque la case Gnrer un rapport de taille est coche, la publication Flash produit dans le panneau Sortie un rapport vous donnant la taille de tous les lments de votre fichier SWF. Une section de ce rapport est consacre aux images bitmap.
368
Flash CS5
Figure56.3
Longlet Flash de la bote de dialogue Paramtres de publication.
Fiche 57
Jouer avec la fusion pixel pixel des clips

Dans les diteurs dimages matricielles comme Photoshop ou Fireworks, il est possible de choisir entre diffrents modes dinteraction pixel pixel des calques, dits modes de fusion. Le principe est repris dans Flash pour les occurrences de clips qui se chevauchent. La technique nest pas nouvelle puisquelle est prise en charge depuis quatre versions du lecteur Flash (depuis Flash 8). Sagissant au niveau de ce dernier de rendu matriciel, ceci justifie le traitement de ce sujet dans le chapitre sur limage bitmap. Rappelons que lon dfinit la couleur et lopacit dune occurrence de clip danimation dans le sous-panneau Effet de couleur du panneau Proprits (voir Fiche 37). Lorsquune occurrence de symbole clip est slectionne sur la scne, le panneau Proprits possde galement un sous-panneau Affichage dont le menu droulant Fusion est visible la Figure57.1. Le mode par dfaut est Normale (il faut lire Normal). Le mode Calque correspond lempilement. La Figure57.2 illustre lapplication des neufs principaux modes de fusion la mme range de huit papillons. De toutes les illustrations de ce livre, celle-ci est sans doute celle qui souffre le plus dune reproduction en noir et blanc. Par ailleurs, le nom du mode de fusion ne vous aidera gure anticiper son effet: Obscurcir, Produit, claircir, cran, Incrustation, Lumire crue (sans doute la seule exception), Ajout, Soustraction et Diffrence. Nous ne nous risquerons pas tenter de dcrire leffet de chacun dentre eux.
Images bitmap
369
Figure57.1
Le menu droulant des modes de fusion.
Figure57.2
Les neufs principaux modes de fusion.
Normale Obscurcir Produit claircir cran Incrustation Lumire crue Ajout Soustraction Diffrence
Voir lillustration en couleurs: FCS5_57a.tiff, dans les exemples du livre.
Les trois donnes dun calcul de fusion sont la couleur de base (celle du pixel se trouvant en dessous), la couleur de fusion et lopacit (celles du pixel recouvrant). La couleur rsultante
370
Flash CS5
est le fruit dune combinaison linaire de ces trois valeurs. Le calcul est fait sur chacun des trois canaux RVB. chaque mode correspond une formule arithmtique diffrente (additions, soustractions, multiplications, troncature). Ceci explique lobscurit des noms qui sont donns aux modes de fusion et le caractre plutt imprvisible de leurs effets. Un seul conseilen matire de modes de fusion: faites vos propres exprimentations pour vous familiariser avec eux, vous ne manquerez pas dtre surpris. Pour cela, placez deux occurrences de clips danimation sur la scne de telle sorte quelles se chevauchent. Il nest pas obligatoire quelles appartiennent au mme calque. Fireworks CS5 propose quarante-six modes de fusion, tandis que Flash nen a que quatorze. Douze des modes de fusion Fireworks peuvent tre prservs aprs importation du fichier PNG dans Flash (les trente-trois autres sont purement et simplement ignors). Huit portent le mme nom dans les deux environnements : Normal, Obscurcir, Produit, claircir, cran, Lumire crue, Inverser et Effacer. Les quatre autres sont Recouvrement, Additif, Soustractif et Soustraire qui deviennent dans Flash respectivement Incrustation, Ajout, Soustraction et Diffrence. Les seuls modes de fusion Photoshop qui peuvent tre prservs aprs importation du fichier PSD sont les suivants: Normal, Obscurcir, Produit, claircir, cran, Lumire crue, Diffrence et Superposition. Les modes de fusion Effacer, Alpha et Calque permettent de mettre en uvre la transparence en niveaux de gris. Cette alternative la technique prsente la section Transparence en niveaux de gris, Fiche 54, vite le recours un diteur externe et limportation dun fichier PNG. La Figure57.3 montre le scnario principal de lanimation, tandis que la Figure57.4 montre celui du clip danimation instanci dans le scnario principal. Pour rendre les choses plus lisibles, les calques de ces deux scnarios portent le nom du symbole dont ils contiennent une occurrence. La bibliothque est visible en haut droite de la Figure57.3. Outre limage bitmap de la fleur (fichier JPEG import), elle contient deux clips danimation. Le premier, nomm fleurAttnue est donc instanci dans le scnario principal. Le second, nomm masque est instanci dans fleurAttnue dans un calque qui se trouve par dessus la copie de limage bitmap. Le symbole masque est slectionn dans la bibliothque. Comme le montre son aperu Figure 57.3, cest un rectangle vectoriel auquel un dgrad radial du noir au blanc a t appliqu. Le dgrad en question est visible dans le panneau Couleur reproduit Figure57.4 (voir section Dgrads, Fiche 15). Le curseur de gauche est slectionn. Il correspond au noir (R=0, V=0, B=0). Son opacit est nulle (Alpha=0%). Le curseur de droite correspond au blanc. Initialement lextrme droite, il a t gliss vers la gauche de manire ce que lattnuation radiale produise leffet voulu sur la fleur. Pour faire ce rglage, leffet tait visible sur la scne avant que le masque soit converti en clip danimation, ce qui nest plus le cas sur la Figure57.4. Pour finaliser la scne de la Figure57.3, dans le scnario imbriqu on a donn loccurrence de masque le mode de fusion Effacer (voir le panneau Proprits de la Figure57.4) et dans
Images bitmap
371
le scnario principal on a donn loccurrence de fleurAttnue le mode de fusion Calque (voir le panneau Proprits de la Figure57.3). Il aurait t galement possible de mettre 0% lopacit de lautre curseur du dgrad. Dans ce cas, il aurait fallu donner loccurrence de fleurAttnue le mode de fusion Alpha.
Figure57.3
Le scnario principal du dgrad en niveaux de gris par modes de fusion.
Figure57.4
Le scnario du clip danimation imbriqu dans le prcdent.
372
Flash CS5
Voir le fichier source : FCS5_57b.fla, dans les exemples du livre.
Fiche 58
Tirer parti du cache bitmap

Nous avons dtaill la section Vectoriel versus matriciel, Fiche 7, les avantages dune approche vectorielle du graphisme : transformation gomtrique sans perte de qualit, dcomposition en objets graphiques, lgret des fichiers. Nanmoins, quelle que soit leur technologie, nos crans sont physiquement constitus de pixels. Donc tout graphisme vectoriel doit in ne tre transform en image bitmap an dtre affich. Cest le lecteur Flash qui effectue ce travail. chaque nouvelle image du scnario, il doit retracer cest--dire reconvertir en image bitmap chacun des lments vectoriels et ce la cadence spcifie. La lgret des fichiers vectoriels a donc un prix : leur rendu est extrmement consommateur des ressources du processeur. Si lapproche vectorielle fait gagner au niveau de lespace de stockage et du temps de transfert, elle se paye en temps de calcul. Le cache bitmap est une technique doptimisation du rendu des donnes vectorielles effectu par le lecteur Flash. Nous avons dit la section Vectoriel versus matriciel, Fiche 7, que les inconvnients des images matricielles correspondent aux avantages des formes vectorielles. Les transformations gomtriques sont notamment problmatiques car elles impliquent un r-chantillonnage, donc une perte dinformation qui dgrade la qualit visuelle. Si cest bien le cas pour lagrandissement ou la rotation, remarquons que la translation ne pose aucun problme, puisquelle ne demande aucun recalcul des valeurs de pixels. Translater cest dplacer, donc simplement rafcher une sous-image en une position diffrente. Ceci est trs peu coteux en ressources, car cest lune des oprations de base de toute carte graphique. Les premiers jeux vido exploitaient cette technique dite de sprites, du nom donn aux sous-images bitmap composant le tableau de jeu. Imaginons que dans le scnario de votre animation un clip danimation assez complexe serve darrire-plan la scne. Ce clip va rester fixe. Imaginons aussi que des occurrences dautres clips danimation complexes se dplacent devant ce dcor, sans changer de taille, ni pivoter. Aucun de ces lments, fixes ou seulement translats, ne ncessite un retraage par le lecteur Flash chaque image. En demandant pour chacun deux conserver dans le cache bitmap limage bitmap trace la premire image, aux suivantes le lecteur Flash naura qu relire ces donnes de pixels afin de les rafcher, au pire en une position diffrente. Lorsque vous slectionnez sur la scne une occurrence de symbole clip danimation ou bouton, le sous-panneau Affichage du panneau Proprits vous propose une option Cache sous forme de bitmap, visible sur la Figure58.1. Cochez la case pour activer lexcution le mcanisme dcrit prcdemment de mise en cache dune version bitmap de loccurrence (sorte de copie dcran). Sachez que cela ne fonctionne pas avec un lment trop grand, plus exactement dont lune des dimensions dpasse 2880pixels ce qui vous laisse de la
Images bitmap
373
marge. Il peut aussi arriver que, bien quayant coch loption, lexcution la mise en cache nait pas lieu par dfaut de mmoire vive sur la machine cliente. Ds quune occurrence mise en cache subit une modification autre quun dplacement (redimensionnement, rotation, effet de couleur, interpolation de filtres, etc.), les donnes vectorielles doivent tre retraces et le cache bitmap mis jour. vous donc de demander bon escient la mise en cache bitmap: si chaque image du scnario, non seulement loccurrence doit tre retrace ce qui est la rgle ordinaire mais si en plus le rsultat doit tre transfr au cache, vous nallez pas soulager le lecteur Flash mais au contraire le ralentir!
Figure58.1
Loption de mise en cache bitmap.
Notons aussi que toute application dun mode de fusion (voir Fiche 57) ou dun effet par filtre (voir Fiche 59) un clip implique de facto la mise en cache bitmap de celui-ci, que vous ayez ou non coch loption. Donc appliquer une transformation autre quun dplacement (agrandissement, rotation) ce genre de clip, cest galement implicitement faire procder une criture dans le cache pour ce clip chaque image, donc obtenir coup sr une animation ralentie alors que la finalit du cache bitmap est au contraire lacclration du rendu. Ce problme ne peut tre trait que par un dveloppeur qui programmera la rasterisation via les classes ActionScript Bitmap et BitmapData.
Fiche 59
Appliquer des effets lexcution

Vous ne pouvez pas raliser directement des variations colores dune image bitmap, par exemple lui donner un air de photo ancienne avec une teinte spia. Pour cela, commencez par convertir limage bitmap en symbole (voir section Crer des symboles, Fiche 33). Donner au symbole le type Graphique suffit. Lorsquelle est slectionne, la diffrence dune copie dimage bitmap, une occurrence offre un sous-panneau Effet de couleur (voir
374
Flash CS5
Fiche 37). Vous pouvez ventuellement appliquer ainsi diffrents effets de couleur diffrentes occurrences. En incluant limage bitmap dans un symbole, vous avez galement la possibilit de lui appliquer une interpolation, par exemple sur son opacit pour raliser un fondu. Le lecteur Flash est capable dappliquer des effets la vole via les filtres. Il sagit l encore de traitement dimage matricielle, ce qui justifie le traitement des filtres dans ce chapitre. Disons demble que sagissant de calculs en temps rel, vous devez faire une utilisation raisonnable des filtres, sous peine de surcharger de manire dommageable votre animation le moteur de rendu du lecteur Flash. Dans cet esprit, il faut sans doute vous limiter la fois dans le nombre de filtres que vous appliquez une occurrence et dans la qualit de rendu que vous demandez. Sachez que vous navez pas cocher loption Cache sous forme de bitmap (voir la fiche prcdente), car ds quil y a utilisation de filtre loccurrence est automatiquement mise en cache bitmap. Les sept filtres disponibles dans Flash sont illustrs la Figure59.1: Ombre porte, Flou, Rayonnement, Biseau, Rayonnement dgrad, Biseau dgrad et Rgler la couleur. Dans cet exemple, les filtres ont t appliqus du texte, mais ils peuvent galement sappliquer des occurrences de symboles de type Bouton ou Clip.
Figure59.1
Exemples dapplication des sept filtres du texte.
Voir sur le fichier source FCS5_59.fla, parmi les exemples du livre.
Lorsque vous slectionnez une occurrence de bouton ou de clip, ou un texte sur la scne, vous trouvez dans le panneau Proprits un sous-panneau Filtres illustr la Figure59.2. Le tableau est initialement vide. En cliquant sur le premier bouton en bas gauche, vous droulez un menu dans lequel vous pouvez choisir le type de filtre ajouter. Celui-ci apparat alors dans le tableau. La liste de ses paramtres avec leurs valeurs par dfaut saffiche sous son nom (triangle gauche du nom pour dvelopper ou rduire cette liste).
Images bitmap
375
Figure59.2
Les paramtres des filtres Ombre porte et Flou.
La partie gauche de la Figure59.2 montre les paramtres dun filtre Ombre porte: Flou X et Flou Y vous permettent dtendre plus ou moins lombre porte. Puisque depuis Flash CS4 les champs numriques sont ractifs, vous pouvez augmenter ou diminuer la valeur en faisant glisser vers la droite ou vers la gauche. Vous pouvez bien sr saisir directement une valeur dans le champ. Licne de chane sert dsolidariser les valeurs en X et en Y. Voyez lIntensit comme une sorte dopacit: plus la valeur est leve et plus lombre est sombre. La Qualit est celle du rendu. Vous avez le choix entre Infrieure, Moyenne et Suprieure. Plus la qualit est leve et plus le lecteur Flash sollicite le processeur. Une Ombre porte de qualit suprieure prsente un ou similaire au ou gaussien. LAngle est celui de la source lumineuse virtuelle qui projette lombre porte. La Distance est celle de lombre lobjet. Elle est exprime en pixels. En cochant la case Masquage, vous masquez lobjet qui projette lombre porte, mais son empreinte subsiste sur leffet. Par dfaut leffet est externe lobjet. En cochant la case Ombre interne, leffet est appliqu lintrieur de lobjet. En cochant la case Masquer lobjet, vous masquez lobjet qui projette lombre porte, mais cette fois-ci aucune empreinte nest laisse sur leffet. Cette option nexiste que pour lOmbre porte. La Couleur est celle de lombre. Cliquez sur la puce pour ouvrir le nuancier. Comme le montre la partie droite de la Figure59.2, le filtre Flou partage avec Ombre porte les paramtres Flou X, Flou Y et Qualit. Les Figures 59.3 et 59.4 montrent que les paramtres Flou X, Flou Y, Intensit et Qualit existent aussi pour les filtres Rayonnement, Biseau, Rayonnement dgrad et Biseau dgrad. Selon le filtre, on retrouve aussi parfois un Angle, une Distance, une case Masquage ou une
376
Flash CS5
Couleur. Un Rayonnement a une case cocher Rayonnement interne et un Biseau (dgrad ou non) a un Type. Un Biseau a une seconde couleur de Surbrillance. Et bien sr, vous devez dfinir un Dgrad pour un Rayonnement dgrad ou un Biseau dgrad.
Figure59.3
Les paramtres des filtres Rayonnement et Biseau.
Figure59.4
Les paramtres des filtres Rayonnement dgrad et Biseau dgrad.
Le filtre Rgler la couleur (Figure59.5) est une sorte deffet de couleur appliqu la vole. Vous pouvez y rgler la Teinte, la Saturation, la Luminosit et le Contraste.
Figure59.5
Les paramtres du filtre Rgler la couleur.
Leffet dun filtre tant calcul en temps rel, vous pouvez appliquer un filtre une occurrence de clip danimation faisant lobjet dune interpolation de sa position : leffet suivra le dplacement. Mieux, vous avez aussi la possibilit dappliquer une interpolation (voir les Fiches 27 et 28) aux valeurs des paramtres dun filtre. La seule contrainte pour cela dans lenvironnement de cration est que les deux images de dbut et de n de linterpolation aient le mme jeu de ltres, appliqus dans le mme ordre. Rappelons quil y a aussi lexcution la contrainte des ressources de calcul.
Images bitmap
377
Le sous-panneau Filtres vous offre diverses autres fonctionnalits. Le bouton dont licne est une poubelle sert bien sr supprimer un filtre slectionn de la liste. Le menu Ajouter un filtre a galement une commande Supprimer tout. Le bouton dont licne est un il renvoie la mme smantique que son homologue pour les calques: activer ou dsactiver le filtre. Le menu Ajouter un filtre a galement des commandes Activer tout et Dsactiver tout. Le bouton Rinitialiser le filtre restaure les valeurs par dfaut de ses paramtres. Le menu Presse-papiers est ddi aux oprations de copier-coller. Enfin, comme il peut savrer assez laborieux de rgler tous les paramtres dun filtre, lorsque vous souhaitez appliquer le mme effet diffrents lments de votre scnario, utilisez les commandes du menu Prslections pour enregistrer un filtre et ses paramtres, puis pour les r-appliquer. Certains des effets Fireworks peuvent tre conservs dans Flash aprs importation dun fichier PNG. Les effets Ombre porte, Ombre pleine et Ombre interne sont restitus grce un filtre Ombre porte. Les effets Flou, Accentuer le flou et Flou gaussien sont restitus grce un filtre Flou. Enfin les deux effets Luminosit et Contraste sont restitus grce un filtre Rgler la couleur. Il nest pas possible de terminer cette fiche sur les filtres sans signaler lexistence de la technologie Adobe Pixel Bender. La bote outils Pixel Bender Toolkit est une application indpendante de Flash, qui se trouve dans le dossier Utilitaires Adobe de votre dossier dapplications. Elle permet de dcrire par programme vos propres effets de filtres. Comme le montre la Figure59.6, son interface se dcompose en trois zones.
Figure59.6
Linterface de lditeur de filtres Pixel Bender.
378
Flash CS5
La premire zone sert visualiser lapplication du filtre courant limage charge. La seconde, sous la premire, est lditeur du code source Pixel Bender dcrivant le filtre. Enfin dans le cas o le filtre dcrit est paramtrable, la dernire zone sur la droite affiche une interface graphique pour le rglage de ces paramtres, laquelle est gnre automatiquement partir du code du filtre. Nous nirons pas plus avant dans la description de Pixel Bender. Sagissant de programmation experte, nous sortirions du cadre de ce livre. Pixel Bender sera familier a quiconque a dj utilis OpenGL Shading Language (GLSL) langage de programmation de modules dombrage (shaders). La syntaxe de Pixel Bender ne vous posera pas non plus de problme si vous tes familier de celle du langage C ou de lun de ses descendants. Enfin, Pixel Bender tant finalement un langage de traitement dimages, des connaissances mmes rudimentaires en la matire sont les bienvenues, notamment la comprhension de ce quest un noyau de convolution. Cette technologie Adobe transversale la Creative Suite 5 sera sans doute lavenir le vecteur de nombreuses ralisations graphiques innovantes.
Son
Comme tous les autres mdias lourds, le son est gnralement trait dans une application ddie avant dtre import dans lenvironnement dintgration Flash. Une fois quun son est mis en place dans le scnario, diffrents choix sont possibles pour le dclenchement de sa lecture et la synchronisation avec le reste de lanimation. En matire de compression du son, Flash propose une bonne gamme de codecs.
Fiche 60
Importer du son
Formats audio reconnus
Le Tableau 60.1 fait la synthse des formats audio reconnus par Flash CS5. Ils sont lists en partant des plus rcemment et plus universellement reconnus. Si une version au moins4 de QuickTime est installe sur votre ordinateur, la gamme, qui sinon se limite trois formats audio, passe huit sur Mac et six sous Windows. Rappelons que la technologie QuickTime nest nullement une exclusivit Mac et quil existe QuickTime for Windows (rendez-vous sur le site www.apple.com/fr/quicktime/download/). Adobe dveloppe depuis quelque temps Soundbooth, un diteur audio qui communique parfaitement avec les logiciels CS5 concerns par laudio. Son format natif est ASND. Nous y reviendrons la Fiche 63. Le format MP3 est le standard que tout le monde connat. Les donnes y sont compresses dun facteur en moyenne 10 qui a fait le succs de ce format. Si vous disposez de vos sons au format AIFF ou WAV, les donnes y tant non compresses, cest sous cette forme quil est prfrable de les importer dans Flash. Le raisonnement est le mme que celui nonc la Fiche 56 propos des images bitmap: si possible, retardez la compression jusqu la publication Flash, vous vous garderez ainsi la possibilit de faire diffrents tests en jouant sur les paramtres de compression quoffre Flash. En important des donnes dj compresses, vous ne pouvez que reprendre les paramtres de la compression effectue en amont (rappelons que vous avez tout perdre appliquer une seconde passe de compression: le MP3 dun MP3 ne sera pas beaucoup plus lger, mais la qualit sonore risque par contre dtre dgrade). Pour tre complet, dans le cas particulier dapplications destination dappareils mobiles, Flash Lite la version de Flash pour ce type de support peut galement manipuler des sons prsents dans lappareil et dits maladroitement sons du priphrique (un tlphone portable ou un assistant personnel ne sont pas plus des priphriques quun ordinateur; nous avons dit au Chapitre 6 que les device fonts sont les polices de la machine, de mme les device sounds sont les sons de lappareil).
380
Flash CS5
Tableau 60.1 : Les formats audio reconnus par Flash

Formats SansQuickTime Mac ASND MP3 AIFF WAV SquenceQuickTimeaudio SunAU SoundDesignerII SonSystme7 *enversion4minimum oui oui oui non non non non non Windows oui oui non oui non non non non AvecQuickTime* Mac oui oui oui oui oui oui oui oui Windows oui oui oui oui oui oui non non
loccasion, vous aurez peut tre des donnes audio dans un autre format que ceux mentionns ci-dessus. Dans ce cas, il faudra au pralable convertir dans lun des huit formats du Tableau 60.1. La plupart des logiciels ddition audio permettent ce type dexportation. Vous pouvez galement faire appel QuickTime pour les conversions (en version 7.6.6 lheure o nous rdigeons), voire QuickTime Pro qui gre beaucoup plus de formats (www.apple. com/fr/quicktime/pro/).
En amont de limportation
Rappelons brivement quenregistrer un son cest enregistrer sa forme donde, cest--dire le graphique qui montre les variations dans le temps de lamplitude du son. La Figure 60.1 montre la forme donde dun morceau de musique dit dans Soundbooth. Si la forme donde dun son est grave de manire analogique dans la cire dun disque vinyle, en numrique elle subit une double discrtisation. Sur laxe horizontal, celui du temps, des chantillons sont pris intervalles rguliers. Une seconde de son qualit CD audio contient 44100 chantillons, soit une frquence dchantillonnage de 44,1kHz. Sur laxe vertical, celui de lamplitude, on fixe la quantification, cest--dire la taille des chantillons. Un chantillon de son qualit CD audio est cod sur 16 bits, soit 65536 niveaux de quantification distincts. Pour fixer les ides, une minute de son stro haute fidlit (non compress) occupe environ 10Mo sur un CD audio.
Son
381
Figure 60.1
Forme donde dun morceau de musique baroque visualise dans Soundbooth.
Le Tableau 60.2 donne en fonction de la frquence dchantillonnage, de la taille des chantillons et du nombre de canaux la qualit daudition restitue. Plus la frquence dchantillonnage est leve et plus le son est clair. Plus la taille des chantillons est leve et plus grande est la dynamique, cest--dire la diffrence entre le niveau le plus faible et le niveau le plus fort. Tableau 60.2 : Les diffrentes qualits audio
Frquence dchantillonnage Tailledes chantillons en kHz en bits 48 44,1 22,05 22,05 11,025 8 16 16 16 16 8 8 Nombre de canaux stro stro stro mono mono mono Qualit daudition DAT CDaudio radioFM cdrom radioAM tlphone
Mais la qualit dcoute a un cot (espace de stockage sur disque, temps de tlchargement via le rseau, temps de calcul du processeur), aussi se contente-t-on souvent pour le multimdia daudio 22,05kHz 16 bits mono. Pour de la parole ou un son deffet, on peut descendre jusqu 11,025 kHz 8 bits mono. Ne descendez jamais en dessous de 8 bits, sous peine dobtenir du bruit de quantification. Cet artefact audible nest tolrable que pour la voix en tlcommunications.
382
Flash CS5
Avec ces valeurs en tte, vous pouvez donc prparer dans un diteur audio (voir Fiche63) les versions des fichiers son que vous allez importer dans Flash. Outre le sous-chantillonnage, la rduction de la taille des chantillons et le passage de stro en mono, pour diminuer au maximum la taille des fichiers, pensez aussi les laguer dans lditeur en liminant les parties inutiles, en particulier les ventuelles plages de silence en dbut et en fin denregistrement. Par ailleurs, sachez que Flash ne gre que les frquences dchantillonnage 44,1kHz,22,05kHz et 11,025kHz. Au cas o vous disposeriez dune source audio chantillonne une autre frquence, r-chantillonnez-la dans lditeur afin de pouvoir utiliser ensuite si ncessaire les outils de traitement de son que celui-ci propose. Sinon, Flash fera lui-mme le r-chantillonnage lors de limportation, mais vous naurez aucune possibilit de correction.
Signal audio continu, amplitude, forme donde. Enregistrer du son, cest enregistrer en un point donn de lespace la variation dans le temps de la pression de lair. Lenregistrement analogique produit une forme analogue cette variation sous forme de signal lectrique continu, laquelle peut tre transforme en une autre forme analogue plus durable comme celle des micro-variations au fond du sillon dun disque vinyle. Quelque soit le support de cette variation analogique continue de lamplitude dans le temps, on lappelle forme donde du signal audio. Discrtisation, chantillonnage, quantisation. Numriser un son, cest en oprer une double discrtisation ou chantillonnage (au sens gnral), sur chacun des axes de la forme donde. Sur laxe du temps, on parle dchantillonnage (au sens particulier). Sur laxe des amplitudes, on parle de quantisation. Dans les deux cas, chantillonner cest prlever intervalles rguliers des chantillons discrets dans les donnes continues. Frquence dchantillonnage. Cest lintervalle auquel sont prlevs les chantillons sur laxe du temps. Elle sexprime en Hz (un Herz gal une fois par seconde). En qualit CD audio, lchantillonnage est fait la frquence 44,1 kHz, soit 44 100 chantillons par seconde. Niveaux de quantisation, profondeur de quantisation, taille des chantillons. Dune manire quivalente lintervalle entre valeurs discrtes damplitude retenues, on peut simplement prciser le nombre de ces valeurs, dites niveaux de quantisation. La valeur continue damplitude de chaque chantillon est arrondie au niveau de quantisation le plus proche. Le nombre de niveaux de quantisation est toujours une puissance de 2: 2n. Lentier n est dit profondeur de quantisation et les chantillons ont une taille n bits. En qualit CD audio, les chantillons sont cods sur n = 16 bits, soit 65536 niveaux de quantisation.
Notions cls
Son
383
Importation dans Flash
Limage bitmap est un autre mdia dont les lments, dits dans un logiciel ddi, sont imports et stocks dans la bibliothque. la Fiche 52, nous avons vu quil existe deux commandes pour cela dans le menu Fichier: Importer dans la bibliothque et Importer sur la scne. Un son ntant pas visuel, il ne peut tre plac automatiquement sur la scne. Pour un son, les deux commandes importent dans la bibliothque. Une fois import dans la bibliothque, un son sy prsente avec une icne de haut-parleur. Si vous slectionnez le pseudo-symbole audio dans la liste, sa forme donde simple ou double selon quil est mono ou stro est visible dans la zone daperu en haut du panneau Bibliothque. Deux boutons vous permettent dcouter le son (icne de che) et den arrter la lecture (icne de carr). La Figure60.2 montre le son de la Figure 60.1 aprs importation dans la bibliothque dune animation Flash.
Figure 60.2
Le pseudo-symbole audio du morceau de musique prcdent dans la bibliothque dune animation Flash.
Le son import, il vous restera instancier son pseudo-symbole dans le scnario, ce que nous verrons la Fiche 62. Avant cela, en fonction de la nature du son, il faudra choisir entre les divers modes de traitement par le lecteur Flash (voir Fiche 61). Sachez que la bote de dialogue dimportation vous permet ventuellement de faire une slection multiple dans le dossier choisi et donc dimporter en une seule fois plusieurs fichiers sons. Flash est fourni avec une bibliothque intgre de sons (Fentre > Bibliothques communes> Sons). Ouvrez-la et copiez-y dans votre bibliothque courante les sons dont vous avez besoin. Comme tout ce qui est prfabriqu et gratuit, cette bibliothque Sounds.fla de 186 sons ne vous sera en pratique sans doute pas trs utile: les sons ny sont pas de la plus grande subtilit et fortement connots par leur culture amricaine dorigine.
384
Flash CS5
Figure 60.3
La bibliothque de sons intgre Flash.
Mise jour aprs dition

Le problme que pose tout lment de mdia externe cest--dire ayant t cr et/ou dit en dehors de Flash est quaprs importation il peut tre retravaill dans lditeur externe. Aucun lien du fichier externe vers lanimation Flash ne permet une mise jour automatique de celle-ci avec la version modifie de llment de mdia. Il faut donc rimporter. Si avant de le faire, nous supprimons le pseudo-symbole de la bibliothque, toutes les instances qui en auront t faites dans le scnario vont se retrouver orphelines. Il faudra donc non seulement rimporter, mais aussi r-instancier. Refaire ce travail chaque dition de llment concern pourrait vite savrer pnible. Il y a heureusement beaucoup plus simple. Slectionnez le son dans la bibliothque, puis en cliquant en bas du panneau sur le bouton orn dun i, ouvrez la bote de dialogue Proprits audio, reproduite la Figure 60.4. Cliquez alors sur le bouton Mettre jour. Lopration peut prendre un certain temps, auquel cas vous verrez une barre de progression safficher. Lopration peut chouer si depuis la dernire mise jour ou depuis limportation, le fichier son externe a t renomm et/ou dplac (Flash utilise en effet le chemin daccs mmoris lors de limportation), auquel cas vous ne couperez pas une r-importation complte. On trouve galement une commande Mettre jour dans le menu contextuel ou le menu doptions du panneau Bibliothque. Dans la bote de dialogue Mettre les lments de la bibliothque jour, reproduite la Figure 60.5, cochez en regard du chier son externe concern et cliquez sur le bouton Mettre jour.
Son
385
Figure 60.4
La bote de dialogue Proprits audio en affichage normal.
Aprs mise jour, sans aucune intervention supplmentaire de votre part, toutes les occurrences du son dans tous les scnarios de lanimation prennent en compte la version modifie.
Figure 60.5
La bote de dialogue Mettre les lments de la bibliothque jour.
Bibliothque de sons partage

Les quelques chiffres donns ci-dessus vous aurons sans doute si ce ntait pas dj le cas sensibilis au problme de poids de fichier que pose lutilisation du son dans votre animation. En effet, les sons sont incorpors au fichier SWF. Pour tre tout fait exact, seuls les sons rellement instancis dans votre scnario sont incorpors au fichier SWF lors de la publication. Nayez donc aucun scrupule importer diffrents sons dans votre source FLA pour y faire tous les essais que vous voudrez. Mieux, la publication, Flash nincorpore au fichier SWF que les parties dun son effectivement utilises (voir Fiche 63). Si tout a t fait pour ne pas alourdir inutilement le fichier publi, le fait est que tout son utilis lalourdit!
386
Flash CS5
Ne recourrez donc pas au son pour faire multimdia, mais uniquement si cela donne une relle valeur ajoute votre application. Imaginons que vous dveloppiez un site consquent en Flash. Il sera dcoup en un certain nombre de fichiers SWF, peut-tre un par section du site. Certains sons vont tre communs aux diffrents fichiers: par exemple les sons lis aux outils de navigation, ou encore certaines musiques de fond. Les incorporer chaque fichier SWF signifierait en multiplier dautant le tlchargement. Si cela pourrait la rigueur tre acceptable pour des sons de clic, brefs, pour un morceau de musique ce serait aberrant. La bonne solution consiste factoriser dans une bibliothque partage les sons utiliss par les diverses animations Flash qui constituent lapplication. Il sagit dun simple document Flash dont la bibliothque contient la collection de sons. Dans ce fichier, ils ne sont pas instancis: le scnario est vide, comme le montre lexemple de la Figure 60.6 dune bibliothque partage de sons de boutons. Chaque fichier SWF utilisateur de ces sons est allg dautant et dsormais chaque son nest plus tlcharg quune seule fois sur la machine cliente.
Figure 60.6
Une bibliothque partage de sons de survol et de clic.
Dans la bibliothque partage, les sons doivent tre paramtrs pour le partage. Pour cela, un son tant slectionn, cliquez sur le bouton Avanc dans sa bote de dialogue Proprits du son (voir Figure 60.4). Elle se prsente alors comme sur la Figure 60.7. (vous pouvez aussi y accder via la commande Liaison du menu doptions du panneau Bibliothque ou de son menu contextuel). Une classe par dfaut vous est propose. Gardez-la. Ensuite, cochez Exporter pour le partage lexcution (au besoin, pour rendre cette case cocher accessible,
Son
387
dcochez Importer pour le partage lexcution). Enfin, renseignez le champ URL avec le nom du document publi, puis publiez. La bibliothque partage tant cre, vous pouvez y faire appel dans nimporte quelle autre animation, via la commande Fichier > Importer > Ouvrir une bibliothque externe. Dans la bote de dialogue qui souvre, slectionnez la bibliothque partage, puis cliquez sur Ouvrir. Les sons apparaissent en gris, ce qui indique quils appartiennent une bibliothque externe. Glissez ceux dont vous avez besoin dans la bibliothque courante. Sans avoir t copis dans cette dernire (une simple rfrence externe a t enregistre), les sons deviennent instanciables dans le scnario courant.
Figure 60.7
La bote de dialogue Proprits audio en affichage avanc.
Au-del de la logique darchitecture dun projet voque ci-dessus, une bibliothque partage est trs pratique pour partager des lments de mdia entre membres dune quipe.
388
Fiche 61
Flash CS5
Choisir le mode de synchronisation dun son

Son dvnement versus en flux continu
En matire daudio, il faut en premier lieu distinguer entre le tlchargement classique et la lecture en flux continu. Les diffrences portent galement, en aval du tlchargement du fichier, sur sa lecture, sa synchronisation et en amont sur son intgration dans lanimation Flash et sur le type de sons concerns.
Figure 61.1
Son de survol dun bouton dit dans Soundbooth.
Pour un son dit dvnement: Tlchargement. Il est classique, savoir que lintgralit du fichier doit tre tlcharge sur lordinateur de linternaute avant que la lecture puisse commencer. Lecture. Le son est transmis la carte son de lordinateur laquelle le lecteur Flash dlgue entirement la lecture. moins que larrt en soit explicitement demand, le son joue jusquau bout. Lorsquil est jou au sein de lenvironnement de cration, vous pouvez arrter un son dvnement en enfonant la touche EsC. Un son dvnement peut se comparer un symbole clip danimation en ce quil joue indpendamment du scnario principal. Sa lecture se poursuit mme si entre temps la lecture de lanimation sest termine. Synchronisation. La synchronisation dun son dvnement avec lanimation se limite la premire image-cl du son. Ensuite, il peut tout fait driver par rapport lanimation. Intgration. Un son dvnement est gnralement mis en place dans le scnario par dessus une animation ralise. Sons concerns. Lappellation son dvnement indique quil sagit le plus souvent dun son de courte dure. Les effets sonores relvent de ce type de sons. Ainsi, le son dont la Figure 61.1 montre la forme donde fait moins de 4 secondes. Il est utilis comme
Son
389
son de survol dun bouton. Vous pouvez nanmoins utiliser un son dvnement pour un fichier audio beaucoup plus long si celui-ci sert de musique dambiance, donc ne ncessite aucune synchronisation particulire avec le reste de lanimation. Enfin, dans le cas particulier dun son jou en boucle, court ou long il est toujours de type son dvnement, ceci afin de navoir le tlcharger quune seule fois (en flux continu, il serait inutilement tlcharg chaque boucle). Le fichier SWF de votre animation publie est lui-mme lu en flux continu par le lecteur Flash (extension Flash Player du navigateur de linternaute). Cela signifie que la lecture de lanimation dmarre lorsque suffisamment de donnes sont tlcharges sur la machine de linternaute pour pouvoir jouer les premires images du scnario. Ensuite, pendant que des images saffichent, le tlchargement des donnes des images suivantes se poursuit en arrire-plan. Si le tlchargement dun son dvnement nest pas termin au moment dafficher limage de lanimation dans laquelle celui-ci intervient, cette dernire est mise en pause jusqu larrive complte des donnes. Pour un son lu en flux continu: Tlchargement. Le fichier audio ne transite que par fragments sur lordinateur de linternaute. Lecture. Elle commence ds quune quantit suffisante de donnes est charge. Un son en flux continu peut se comparer un symbole graphique en ce quil joue de manire synchronise avec le scnario principal. Sa lecture se termine en mme temps que ce dernier. Vous pouvez lentendre dans lenvironnement de travail en faisant glisser la tte de lecture. Synchronisation. Le son est jou de manire synchronise avec le scnario. Intgration. Un son en flux continu prexiste souvent lanimation, qui est ralise en fonction de lui.
Figure 61.2
Morceau de musique dit dans Soundbooth. La structure de la chanson est nettement visible sur la forme donde.
390
Flash CS5
Sons concerns. Lappellation flux continu indique que cela sapplique le plus souvent des sons longs, typiquement un commentaire en voix-off, ou de la musique (bande-son, chanson, etc.). Le morceau de musique dont la forme donde est montre Figure61.2 dure plus de 3 minutes et la structure de la chanson couplet, refrain, couplet, refrain, reprise est nettement visible dans lditeur.
Les modes de synchronisation audio de Flash

Les modes de synchronisation des sons dans Flash sont au nombre de quatre. Loption En continu dsigne bien videmment la lecture de son en flux continu. Les trois autres options vnement, Dmarrage et Arrter relvent de ce que nous avons appel ci-dessus le son dvnement. Le mode de synchronisation dune instance dun son est accessible dans le panneau Proprits. Slectionnez dans le scnario limage-cl dans laquelle le son a t instanci (voir la fiche suivante). Le panneau affiche alors les proprits de limage et dans le sous-panneau Son reproduit la Figure61.3 se trouve un champ Sync. La valeur par dfaut du champ Sync est vnement, ce qui signifie que le son est jou en rponse un vnement. Cet vnement dclencheur (voir Chapitre11) peut tre soit un vnement temporel passage de la tte de lecture dune image une autre image donne du scnario , soit un vnement dinteraction survol ou clic dun bouton. Dans ce second cas, linternaute pourra par son interaction mettre rptition lvnement dclencheur, ce qui dclenchera la lecture simultane de plusieurs instances du son, en lger dcalage les unes par rapport aux autres. Avec loption de synchronisation Dmarrage, il sagit encore de son dvnement, mais cette fois-ci la lecture simultane de plusieurs instances dun mme son est impossible. Aucune nouvelle instance ne peut tre cre tant que la prcdente na pas fini de jouer.
Figure 61.3
Le sous-panneau Son du panneau Proprits lorsquune image est slectionne.
Son
391
Le mode de synchronisation Arrter sert arrter la lecture dun son dvnement, que celui-ci ait t dclench par un vnement temporel ou un vnement dinteraction: toutes les instances du son cibl qui seraient en cours de lecture sont arrtes. Enfin, si vous choisissez loption de synchronisation En continu, lanimation Flash restera en phase avec laudio. Cela signifie que le lecteur Flash fera en sorte que la lecture du scnario ne prenne aucun retard par rapport au son. Pour cela, dans le cas o il narriverait pas en dessiner sufsamment rapidement les images, il en sauterait certaines pour rtablir la synchronisation et viter toute drive. Cest typiquement le comportement souhaitable lorsque les moments de lanimation sont cals sur une bande-son, quil sagisse dun rcit ou dune musique. Noubliez pas quvnement tant le mode de synchronisation par dfaut, cest vous de paramtrer explicitement une synchronisation En continu. Par ailleurs, la lecture dun son en flux continu se terminant avec le scnario, vous devez galement vous assurer que la plage dimages qui dbute limage-cl o le son a t instanci comporte suffisamment dimages ordinaires (avant lventuelle image-cl suivante ou avant la fin de la plage). En clair, le scnario Flash vous donnant la possibilit de visualiser la forme donde (voir la fiche suivante), assurez-vous que celle-ci nest pas tronque.
Fiche 62
Mettre un son en place dans le scnario

Instancier un son
Avant dinstancier un son de la bibliothque dans le scnario, commencez par lui ddier un nouveau calque (le plus simple est de donner au calque le nom du fichier). En pratique, rien ne vous empche de placer un son sur un calque ayant du contenu graphique, mais cela rend votre scnario moins lisible et vous risquez, sans vous en rendre compte, de supprimer du son en supprimant un lment graphique. Prenez donc lhabitude de crer un calque pour tout nouveau son. Le lecteur Flash est tout fait capable de jouer plusieurs pistes son simultanment. Vous pouvez donc avoir plusieurs calques son en parallle. Si vous souhaitez que votre son existe partir de la premire image du scnario, vous disposez dj de limage-cl ncessaire pour ly instancier. Sinon, crez-en une nouvelle limage souhaite. Limage-cl dapparition du son tant slectionne, glissez le son sur la scne depuis la bibliothque ou, plus simple peut-tre, choisissez le son voulu dans le menu Nom du sous-panneau Son du panneau Proprits (voir Figure 61.3). De tous les mdias, le son est le seul navoir rien de visuel. Aprs instanciation, il ny a donc rien voir sur la scne. Pour voir quelque chose, il faut se tourner vers le scnario. En effet, la forme donde du son est reproduite dans la plage dimages du calque o vous lavez instanci. Il faut bien sr pour cela quil y ait assez dimages-cls au-del de la premire.
392
Flash CS5
Mais mme si tel est le cas, la forme donde risque dtre tellement condense dans laffichage usuel du calque, quil vous sera difficile de discerner le moindre dtail. Pour y voir plus clair, ouvrez la bote de dialogue Proprits du calque en double-cliquant sur le bouton daffichage du calque sous forme de contours (voir section Lenvironnement au service de la complexit, Fiche 22 et Figure 22.5). Dans le menu Hauteur du calque, choisissez 300% pour obtenir un affichage tel que celui reproduit Figure 62.1. Dans ce scnario, on a instanci le morceau de musique dont londe de forme tait dj visualise dans Soundbooth la Figure 60.1.
Figure 62.1
Forme donde dun morceau de musique baroque visualise dans le scnario Flash.
Le seul autre endroit o la prsence du son soit dtectable est le sous-panneau Son du panneau Proprits, lorsquune image de la plage supportant linstance est slectionne. Notez que dans le scnario, le rond blanc dnotant une image-cl vide reste blanc mme aprs instanciation du son. Autrement dit, lorsquon parle dimage-cl vide, il faut comprendre vide de contenu visuel. Du point de vue de lintgration, les sons de la bibliothque sont des pseudo-symboles. Entendez par l quils offrent les mmes avantages que les symboles au niveau de linstanciation: vous pouvez multiplier les instances dun mme son dans le scnario sans rel surcot, au sens o le fichier audio ne sera tlcharg quune seule fois. Pour synchroniser votre animation avec une bande-son, vous lui aurez au pralable donn loption de synchronisation En continu. Ensuite, vous afficherez votre scnario comme sur la Figure 62.1 pour avoir la meilleure visibilit possible de la forme donde. Celle-ci est un graphique pour le moins trange et il est difficile danticiper le son la seule vue de sa forme donde, mme pour un professionnel de laudio. Mais elle a une vertu capitale pour lintgration multimdia : elle met bien en vidence la structure temporelle dun son ou dun morceau de musique, notamment les silences et les rythmes. Ceci vous indique sans ambigut les images du scnario o placer les images-cls des lments visuels caler sur le son. Vous pourriez ainsi facilement faire safficher les paroles des couplets et du refrain dune chanson au fur et mesure quils sont chants. Pour arrter un son dans le scnario, il faut dans tous les cas insrer une image-cl vide limage o vous voulez que le son sarrte. Pour un son en flux continu, cela suffira. Pour un son dvnement, hors du contrle du lecteur Flash qui en a dlgu la gestion la carte son, vous devez donner en plus le mode de synchronisation Arrter cette nouvelle imagecl vide.
Son
393
Lecture en boucle
Pour jouer un son en boucle, aprs lavoir instanci vous avez plusieurs options possibles grce au dernier menu en bas du sous-panneau Son. Par dfaut, comme illustr la Figure61.3, loption slectionne est Rptition et le nombre de ces rptitions est 1. Ce nombre doit tre entier et peut aller au moins jusqu 10000, ce qui devrait vous suffire Si vous slectionnez Boucle dans le menu droulant, tel que cela a t fait Figure 62.2, le champ numrique disparat et le son rejouera indfiniment. Rappelons quil faut proscrire la lecture en flux continu pour un son rpt, car il serait totalement inefficace de rpter le tlchargement. De plus, la publication, Flash gnrerait automatiquement dans le scnario une plage dimages correspondant la dure du nombre de rptitions demand, ce qui alourdirait galement le fichier SWF. Si la synchronisation vnement limine le tlchargement multiple, on lvitera nanmoins en se rappelant que plusieurs instances sont susceptibles de jouer lune par dessus lautre en dcalage, lorsque linteraction met lvnement dclencheur de manire rptitive. La synchronisation la plus sre pour un son rpt est donc Dmarrage. Avec elle, vous tes sr dviter toute cacophonie dsastreuse.
Figure 62.2
Lecture en boucle dun fichier son.
La lecture de son en boucle est un moyen facile de sonoriser votre animation dans la dure moindre cot de tlchargement. Nanmoins, lastuce a tellement t utilise quelle en devient un clich. vous de lutiliser subtilement et discrtement. Si le son reste secondaire par rapport lanimation, cela peut fonctionner. Dans tous les cas, ne prenez pas linternaute en otage et ayez la courtoisie de lui offrir un moyen de couper et relancer le son.
394
Flash CS5
Sonoriser un bouton
Le son peut constituer un feed-back intressant pour linternaute qui interagit avec un bouton. Pour cela, il faut retenir un son trs court et qui attaque de suite. On procde dans le scnario du bouton sonoriser comme dans le scnario principal. La premire chose faire est de lui ajouter un calque ddi au son. Pour un son de clic, il faut crer dans ce calque une image-cl limage Abaiss. Il est galement possible de crer une image-cl limage Dessus du calque son. Cependant, un son de survol est le genre de gadget qui agace beaucoup dinternautes. Enfin, nattachez jamais de son limage Haut, ni limage Cliqu (zone ractive) dun bouton, sous peine dobtenir un comportement sonore du bouton assez trange. Limage-cl tant slectionne, il ne vous reste plus qu slectionner le son dans le souspanneau Son du panneau Proprits et choisir dans le menu Sync lune des options de synchronisation vnement ou Dmarrage (loption En continu est proscrire, puisque la plage se rduit une seule image). La Figure 62.3 donne un exemple de scnario de bouton sonoris au clic.
Figure 62.3
Scnario dun bouton sonoris au clic.
Boutons de lecture dun son

Il est trs facile de mettre en uvre sans aucune programmation ActionScript des boutons Lecture et Stop pour un son donn. Crez comme pour un bouton sonoris un calque ddi au son dans le scnario de chacun des deux boutons et crez-y une image-cl limage
Son
395
Abaiss. Instanciez ensuite le son contrler dans chacune de ces deux images-cls, mais donnez lui la synchronisation Dmarrage dans le bouton Lecture et la synchronisation Arrter dans le bouton Stop.
Fiche 63
diter un son
Nous avons dit que si Flash ne rivalise pas avec un diteur de formes vectorielles comme Illustrator (Chapitre 2), il rivalise encore moins avec un diteur dimages bitmap comme Photoshop ou Fireworks (Chapitre 7). Il en va de mme pour ldition audio. Les possibilits internes Flash se limitent aux rglages sur les volumes des canaux dun son (fondus, effets de balance) et la dfinition des points dentre et de sortie. Vous ferez lessentiel du traitement de vos sons dans un diteur ddi externe comme Audacity, Peak ou Soundbooth dvelopp par Adobe.
Appliquer des effets

La Figure 63.1 montre le menu Effet du sous-panneau Son du panneau Proprits de limage-cl laquelle un son est instanci. La valeur par dfaut est Sans, ce qui signifie que les canaux gauche et droit jouent dun bout lautre plein volume. Choisissez cette option aprs avoir appliqu au son un effet dont vous ne voulez plus.
Figure 63.1
Le menu des effets audio.
Flash vous propose six effets prfabriqus. Canal gauche et Canal droit servent ne jouer le son que sur un seul canal. Fondu droite et Fondu gauche sont des effets de balance
396
Flash CS5
(dits aussi parfois panoramiques): le son passe progressivement dun canal lautre, tant 100% sur un canal au dbut et se terminant 100 % sur lautre. Enfin, Fondu en entre et Fondu en sortie, agissent sur un quart de la dure totale du son, respectivement le premier quart et le dernier. Pour lentre, le son passe sur ce quart progressivement de 0 100 %; pour la sortie de 100 0%. Si aucun de ces effets courants mais sommaires ne vous convient, il vous reste la possibilit de crer votre propre effet. Pour cela, slectionnez Personnaliser en bas du menu Effet, ou cliquez sur le bouton Modier lenveloppe du son, dont licne est un crayon. Lun comme lautre ouvre la bote de dialogue Modier lenveloppe reproduite la Figure 63.2. Dans cette bote de dialogue, vous retrouvez la forme donde de votre son. Si celui-ci est stro, le canal gauche se trouve en haut et le droit en bas; sil est mono, haut et bas sont identiques. Entre les deux canaux se trouve la graduation. Par dfaut, il sagit de secondes (le bouton dont licne est une horloge est enfonc, voir Figure 63.2), mais vous pouvez demander une graduation en images en enfonant le bouton dont licne est une pellicule (voir Figure 63.3). Deux autres boutons vous permettent de faire des zooms avant et arrire sur la forme donde. Dans le menu Effet, vous retrouvez les six effets prfabriqus. Slectionnez-en un susceptible dtre un bon point de dpart pour lenveloppe personnalise que vous allez crer.
Figure 63.2
dition dun effet personnalis.
Lenveloppe du son est une polyligne dfinie par un certain nombre de poignes carres, huit au maximum. Cette polyligne dcrit les variations du volume avec la convention suivante: le bas du rectangle englobant un canal correspond 0% et le haut 100%. Faites glisser les poignes pour modifier lenveloppe. Les poignes sont duales (au mme temps ou la mme image, sil en existe une dans un canal, il y en a ncessairement une dans lautre), mais comme le montre la Figure 63.2 rien noblige ce quelles correspondent toutes deux au mme pourcentage. Cliquez nimporte o sur lenveloppe pour crer une nouvelle poigne (et sa duale). Faites glisser en dehors du rectangle englobant pour supprimer une paire
Son
397
de poignes denveloppe. Testez au fur et mesure de vos rglages grce aux deux boutons de lecture et darrt.
Dfinir les points dentre et de sortie

Dans la bote de dialogue Modier lenveloppe, on trouve galement aux extrmits de lchelle du temps (ou des images) deux curseurs qui dfinissent les points dentre et de sortie dans le fichier son. Vous pouvez faire glisser ces curseurs pour laguer les plages de silence en dbut et en n du chier, comme cela a t fait sur la Figure 63.3. Une autre possibilit intressante est de fragmenter un unique fichier son sur plusieurs instances, chacune delles en prlevant un fragment diffrent via diffrents points dentre et de sortie. Vous devez tre bien conscient du fait que toutes ces oprations ddition (enveloppe dun effet, points dentre et de sortie), sont propres linstance, en quelque sorte des proprits dinstance. Chaque instance est dite sparment et sans rpercussion sur le son dans la bibliothque. Si vous supprimez linstance, puis que vous r-instanciez nouveau un son (le mme ou un autre) sur limage-cl, leffet sera perdu et il vous faudra le reconstruire. Sachez enfin que les parties lagues cest--dire celles qui napparaissent dans aucune des instances du son ne seront pas exportes lors de la publication du fichier SWF.
Figure 63.3
Modification du point dentre dun son.
dition audio externe

Nous venons de voir quil est possible de modifier sommairement les instances dun son dans le scnario. Flash noffre par contre aucune possibilit ddition interne du son: impossible dlaguer effectivement un fichier son; aucun outil de traitement, mme sommaire, du son. Ce genre de travail doit tre fait en amont dans un diteur externe ddi. Vous pouvez
398
Flash CS5
vous tourner vers Audacity, qui prsente lavantage dtre gratuit (audacity.sourceforge. net). Sur Mac, Peak 6 est un excellent outil de production audio pour le multimdia (www. bias-inc.com). Adobe dveloppe deux logiciels ddition audio. Contrairement Audition, destin aux professionnels du son, Soundbooth ne permet que des oprations basiques de traitement du son. Cest donc un outil parfait pour la ralisation multimdia. Lautre atout de Soundbooth CS5 version 3.0 du logiciel comme diteur audio externe est que lapplication peut tre appele directement depuis Flash. Lorsquun son est slectionn dans la bibliothque, vous trouvez dans le menu des options de celle-ci ou dans le menu contextuel, une commande Modifier avec Soundbooth. Une fois les modifications faites, en les enregistrant vous revenez Flash o elles sont prises en compte sans que vous ayez r-importer (tant que ni le nom, ni lemplacement ni le format du fichier nont chang). Soundbooth fait partie de la Creative Suite 5. Il communique non seulement avec Flash CS5, mais aussi avec Premiere CS5 et After Effects CS5. Par ailleurs, Bridge CS5 gre les donnes audio issues de Soundbooth. Le format natif de Soundbooth est ASND, qui est un format de fichier audio non destructeur. Comprenez que, dans Soundbooth, ASND est MP3 ce que dans Photoshop, PSD est JPEG. Dans Photoshop, ldition selon le processus habituel est destructive au sens o aprs application dun filtre une image JPEG puis enregistrement, vous avez dtruit limage JPEG dorigine (sauf si vous aviez pris soin den sauvegarder une copie sous un autre nom). Photoshop vous permet galement de faire de ldition non destructive dimages en utilisant un calque deffet, par exemple un calque supportant lapplication dun filtre de flou limage dorigine. Ldition est cette fois-ci dite non destructive au sens o le flou est appliqu la vole. Les pixels de limage dorigine subsistent et vous pouvez revenir eux en supprimant le calque deffet. Vous pouvez aussi produire une image diffrente en modifiant le paramtrage du calque deffet, ou en appliquant ou ajoutant un autre effet. Soundbooth applique cette approche aux fichiers son et les fichiers ASND peuvent contenir en plus des donnes audio, des effets susceptibles dtre modifis par la suite, voire supprims pour revenir ltat original du fichier son. Ldition non destructive demande une application en temps rel des effets. Elle permet de faire toutes sortes dessais avant, le cas chant, de rendre le rsultat permanent. Linterface de Soundbooth est intuitive. Les principaux panneaux sont: diteur. La zone de visualisation de la forme donde. Outils. On y trouve les outils dusage courant: Slection temporelle, Slection de frquence, Rectangle, Lasso, Main et Zoom. Fichiers. Liste de tous les fichiers audio et vido ouverts. Effets. Gestion de tous les effets temps rel appliqus. Vido. Vous pouvez ventuellement retravailler le son des squences vido. On retrouve dans le menu dition de Soundbooth les commandes classiques Couper, Copier, Coller et dautres propres au son comme Mixer et Recadrer. En matire ddition audio et
Son
399
dans la perspective de lintgration multimdia dans Flash, une autre opration importante est la dfinition de tops de dpart (cue points). Ainsi, dans le fichier de la chanson dont ldition dans Soundbooth est montre Figure 61.2, vous pourriez dfinir des tops de dpart pour les diffrents dbuts de couplets, de refrains et de reprise, tops de dpart qui seraient exploits ensuite dans Flash pour synchroniser lapparition du texte des paroles en mme temps quelles sont chantes. Lenregistrement des tops de dpart fait appel une application XML. La Figure 63.4 montre le menu Tches de Soundbooth. Vous y trouvez des commandes pour des tches rcurrentes en audio, comme le nettoyage des enregistrements ou la cration dune boucle.
Figure 63.4
Le menu Tches de Soundbooth.
Dautres commandes de traitement du son se trouvent dans le menu Processus reproduit la Figure63.5. La premire section de commandes concerne les fondus, dont un exemple est donn la Figure63.6. La seconde section de commandes concerne les rglages de niveau sonore. La dernire section de commandes est ddie la rduction et llimination des bruits et sons parasites.
Figure 63.5
Le menu Processus de Soundbooth.
400
Figure 63.6
dition dans Soundbooth: application dun fondu dentre.
Flash CS5
La Figure 63.7 montre le menu Effets de Soundbooth. Chacun de ces effets correspond lapplication dun type de filtre diffrent au signal mono-dimensionnel que reprsente le fichier audio. Ce menu est lquivalent du menu Filtres de Photoshop.
Figure 63.7
Le menu Effets de Soundbooth.
Fiche 64
Compresser le son
Principes de la compression audio dans Flash
Les choix faire quant la compression du son dpendent de plusieurs facteurs. Dabord, la nature du son: sagit-il de musique, dun commentaire, dun effet sonore, etc. Un fichier audio contenant exclusivement de la parole peut supporter une plus forte compression quun autre. Ensuite, le contexte dutilisation : lanimation sera-t-elle relue sur la Toile, voire tlcharge par des internautes nayant pas le haut dbit ou bien consulte partir dun disque amovible (CD, DVD). Pour une diffusion en ligne, il faut faire le maximum pour rduire
Son
401
la taille des fichiers, donc se contenter de la qualit audio acceptable minimum. Pour une distribution hors ligne, la compression peut tre plus lgre, pour une meilleure qualit dcoute. Quoi quil en soit, le paramtrage de compression universel nexiste pas. Cest vous de le dfinir au cas par cas. Lapproche de la compression des sons dans Flash est la mme que pour les images bitmap (voir section Compression, Fiche 56), savoir quelle peut se paramtrer deux niveaux, lun individuel, lautre global. Le principe de base est similaire celui mis en uvre pour les images bitmap: si un paramtrage de compression individuel a t dfini, cest--dire si ce niveau loption de compression nest pas Par dfaut, ce paramtrage a la prsance, sauf si au niveau global loption Neutraliser les paramtres audio a t coche. Dans le cas dune option de compression individuelle Par dfaut, ou en cas de neutralisation des paramtres audio (sous-entendu: individuels), le paramtrage de compression global sapplique. Si tous les sons de votre animation, ou la plupart, doivent se voir appliquer les mmes paramtres de compression, le plus simple est de factoriser ce paramtrage au niveau global et de ne dfinir des paramtres individuels de compression que pour les cas particuliers. cette rgle de base sajoute un traitement diffrenci selon le type des sons. Pour un son dvnement cest--dire un son dont la synchronisation est soit vnement, soit Dmarrage, on sen tient au principe de base nonc ci-dessus. Les sons en flux continu font lobjet dun traitement spcifique. Flash mixe automatiquement en un seul tous les sons dont la synchronisation est En continu, y compris les pistes audio des vidos en flux continu. Le paramtrage de compression appliqu ce son mix est le suivant: si loption globale Neutraliser les paramtres audio est dcoche, parmi tous les paramtrages individuels de sons en flux continu, celui qui produit la meilleure qualit dcoute, donc compresse le moins, est retenu; sinon, le paramtrage de compression global sapplique. Pour paramtrer la compression dun son donn, ouvrez la bote de dialogue de ses Proprits audio. Pour cela, slectionnez le son dans la bibliothque, puis au choix, double-cliquez sur licne de haut-parleur en regard du nom du pseudo-symbole, ou cliquez sur le bouton orn dun i en bas du panneau, ou encore slectionnez Proprits dans le menu contextuel ou dans le menu des options de la bibliothque. Si la bote de dialogue est en affichage avanc, comme sur la Figure 60.7, vous pouvez cliquer sur Options de base pour quelle ressemble celle reproduite Figure 60.4. La section suivante dtaillera les choix de mthodes de compression et leurs options. Pour paramtrer globalement la compression des sons, ouvrez la bote de dialogue Paramtres de publication et affichez son onglet Flash, reproduit la Figure 64.1. Dans la deuxime section, Images et sons, se trouvent les deux paramtrages globaux Flux continu et
402
Flash CS5
Son dvnement. En cochant loption Neutraliser les paramtres audio, vous demandez Flash dignorer tout paramtre de compression individuel, donc dappliquer systmatiquement les paramtres globaux chaque son. Cela peut vous servir faire une publication rapide de lanimation avec dautres paramtres de son, sans devoir aller modier chacun individuellement. Loption Exporter les sons du priphrique na de sens que pour une publication pour appareil portable, donc destine au lecteur Flash Lite. Dans la bote de dialogue prcdente, si vous cliquez sur lun des deux boutons Dnir, vous ouvrez la bote de dialogue Paramtres audio reproduite la Figure 64.2. Dans le menu Compression, vous pouvez soit Dsactiver, soit choisir lune des quatre mthodes de compression galement proposes pour les paramtres individuels (ADPCM, MP3, Brut, Discours). La section suivante donne les explications ncessaires pour toutes les options de cette bote de dialogue.
Figure 64.1
Longlet Flash de la bote de dialogue Paramtres de publication.
Son
403
Figure 64.2
La bote de dialogue Paramtres audio, pour le paramtrage global de la compression.
Paramtres de compression audio

Au niveau individuel (Figure 60.4) comme au niveau global (Figure 64.2), vous avez le choix entre quatre mthodes de compression: ADPCM. Ce codec son (codec signifie algorithme de compression-dcompression) est celui des premires versions du lecteur Flash (jusqu la version 4). Il ne subsiste que pour des raisons de rtro-compatibilit car le facteur de compression obtenu est faible. Vous pouvez ventuellement lemployer pour des sons brefs, comme des sons de clic.
Figure 64.3
Les options de la compression ADPCM.
MP3. Ce codec son a t introduit avec la version 5 du lecteur Flash. Lorsque vous slectionnez loption MP3 et si le fichier import tait ds lorigine au format MP3, comme vous pouvez le voir sur la Figure 60.7, une option coche par dfaut apparat: Utiliser la qualit MP3 importe. Rappelons ce que nous avons dit dentre la section Formats audio reconnus, Fiche 60, savoir que si vous importez des donnes MP3 dans Flash, la publication vous ne pouvez que reprendre le paramtrage de la compression dj effectue, do le fait que loption soit coche par dfaut. Importez si vous le pouvez des donnes WAV ou AIFF pour pouvoir faire tous les tests de compression souhaitables dans Flash lors de la publication.
404
Flash CS5
Figure 64.4
Les options de la compression MP3.
Brut. Il est dans ce cas abusif de parler de mthode de compression, puisquil sagit de donnes brutes (en anglais raw data), donc non compresses. Cette option est donc exclure dans le cas dune diffusion sur la Toile. Elle ne peut tre envisage que si vous distribuez votre animation sur disque.
Figure 64.5
Les options de la compression Brut.
Discours. Encore une maladresse de traduction dans la version franaise de Flash. Effectivement, dans le langage courant lexpression faire un speech signifie faire un discours, mais cest pourtant le terme Parole qui conviendrait ici. En effet, la parole humaine a des spcificits qui permet le dveloppement dalgorithmes spcifiques pour son analyse, sa synthse et dans le cas qui nous occupe sa compression. Comme ADPCM, ce codec date des premires versions du lecteur Flash. Ne lutilisez jamais pour autre chose que de la parole.
Figure 64.6
Les options de la compression Discours.
Comme le montrent les Figures 63.3 63.6, diffrentes options de compression apparaissent en fonction du type de compression choisi:
Son
405
Prtraitement. Dans tous les cas, vous avez la possibilit de convertir la stro en mono. Loption est coche par dfaut: cest en effet le moyen le plus simple de diviser demble par deux la taille de vos donnes audio. Ne la dcochez jamais pour ADPCM et Discours, qui sont des codecs compressant faiblement, ne le faites a fortiori pas pour Brut. Pour MP3, vous pouvez dcocher cette option pour une vitesse de transmission suprieure 20 Kbps. Taux dchantillonnage. Dans tous les cas hormis le MP3, vous pouvez choisir la frquence dchantillonnage parmi les options 44, 22, 11 ou 5 kHz, qui correspondent plus prcisment aux valeurs 44 100, 22 050, 11 025 ou 5 512,5 Hz. Voici un autre moyen simple de rduire la taille de vos donnes (voir la section En amont de limportation, Fiche 60 et le Tableau60.2 pour savoir jusquo il est raisonnable daller). Le morceau de musique baroque utilis pour nombre de copies dcran de ce chapitre est un fichier AIF, donc de qualit CD audio 44,1 kHz 16 bits. la Figure 64.5, en compression Brut, donc sans compression, la ligne dinformations sous les options affiche pourtant une taille de 25% de loriginal. Cela sexplique par une premire division par deux grce la conversion en mono et par une seconde grce au sous-chantillonnage en 22,05kHz (un chantillon sur deux). Rappelons que ce menu ne peut vous servir qu sous-chantillonner, cest--dire que vous devez toujours y slectionner une valeur au plus gale celle de lchantillonnage de vos donnes. Si vous disposez de donnes 22,05 kHz, slectionner 44,1 kHz naurait aucun sens, puisque Flash serait bien en peine de produire une information qui nexiste pas (le double dchantillons). Bits ADPCM. Pour la taille du codage, vous avez le choix entre 2, 3, 4 ou 5 bits, 4 bits tant la valeur par dfaut. Plus la taille est grande et meilleure est la qualit sonore. Qualit. Uniquement pour MP3. Lintitul de loption est trompeur. Il sagit en fait du compromis entre rapidit de la phase de compression et qualit sonore rsultante, compromis sans incidence sur la taille du chier produit. Vous avez le choix entre Rapide, Moyenne, Optimale. Avec la valeur par dfaut Rapide, la rapidit est privilgie au dtriment de la qualit dcoute. linverse, si vous choisissez Optimale, cest la qualit dcoute qui est optimale au prix dune phase de compression plus longue. La logique consiste donc faire les tests avec la valeur Rapide. Lorsque les valeurs de vos autres paramtres seront dfinies, rglez la qualit sur Optimale en vue de la publication finale. Vitesse de transmission. Uniquement pour MP3. Dordinaire, on parle de dbit binaire (bit rate) pour dsigner le dbit dinformation lors de la transmission sur le rseau. Encore un choix malheureux de traduction, puisquen loccurrence le dbit dont il sagit ici est plus une vitesse de traitement des donnes audio quune vitesse de transmission. Plus ce dbit est lev, meilleure est la qualit sonore, mais au prix dune taille du chier plus leve. Les valeurs possibles schelonnent entre 8 et 160 Kbps. La valeur par dfaut de 16 Kbps constitue un seuil critique en dessous duquel il est dconseill de descendre pour de la musique. Rappelons ce que nous avons dj dit propos de la
406
Flash CS5
frquence dchantillonnage : il serait stupide de publier une meilleure qualit que celle dont vous disposez la source, puisque Flash ne peut pas crer magiquement linformation qui lui manque. Quelle que soit la mthode de compression choisie, partir des options de compression retenues Flash fait une estimation chiffre de la compression. Une ligne dinformations vous donne de gauche droite le dbit binaire, le nombre de canaux, la taille des donnes compresses et le facteur de compression en pourcentage. Les Figures 63.3 63.5 et 63.6 montrent les rsultats pour le mme fichier AIF, avec dans chaque cas les options par dfaut. Sans surprise, le meilleur facteur de compression est obtenu avec MP3. Si les carts de pourcentage avec ceux obtenus pour ADPCM et Discours ne sont pas si grands, cest parce que ces derniers sous-chantillonnent de 44,1 22,05 kHz, ce que MP3 ne fait pas. Les chiffres sont une chose, mais in fine vos donnes audio sont destines tre coutes. Utilisez pour cela le bouton Tester de la bote de dialogue Proprits audio (voir Figure60.4). Lorsque vous vous tes fait un avis sur le rsultat audible de vos paramtres de compression, cliquez sur le bouton Arrter.
Vido
La vido est gnralement encode dans lapplication Adobe Media Encoder fournie avec Flash. La gamme de codecs proposs sest toffe avec la version CS4. Flash propose diffrentes possibilits de mise en uvre de la vido. Des composants, habillables de multiples faons, permettent de construire facilement un contrleur vido. Flash CS5 hrite ce niveau aussi du savoir-faire Adobe (Premiere, After Effects). La vido sintgre parfaitement lcran aux lments des autres types de mdias et il est mme possible de ly incruster. Flash poursuit son avance en simposant de fait comme la technologie la plus utilise pour diffuser de la vido sur la Toile.
Fiche 65
Encoder la vido dans Adobe Media Encoder

Les sources vido
La vido est en essence une squence dimages bitmap raison dun dbit dimages de 25 ou 30 I/S. Cest donc lun des types de mdias les plus lourds qui soit. tel point que sil est possible pour limage bitmap davoir des donnes non compresses (un photoscope propose souvent un mode dans lequel limage est enregistre au format TIFF), pour la vido les donnes sont compresses ds lacquisition. Divers algorithmes de compression-dcompression (codec) sont mis en uvre selon les supports. Les camscopes analogiques utilisaient le Motion JPEG (M-JPEG), simple application de la compression JPEG chacun des vidogrammes. Pour les supports numriques, cette compression spatiale est redouble dune compression temporelle. Disques DVD, tlvision par cble, par satellite et tlvision haute dfinition sont rgis par le standard MPEG-2.Au cur du standard MPEG-4 on trouve le codec AV/H.264, dont nous reparlerons ci-dessous. En MPEG, les donnes sont souvent multiplexes, savoir que laudio et la vido sont entrelaces. Gnralement, on les dsentrelace dans QuickTime Pro, grce un composant QuickTime de lecture MPEG-2. Il existe galement des outils spciaux pour dsentrelacer les fichiers VOB dun DVD. En matire de prise de vue, des codecs dacquisition sont utiliss par les camscopes. Apple, Avid et Microsoft ont leur mise en uvre propritaire du codec DV (appareils MiniDV ou DVCAM). Il existe aussi des codecs dont le dbit de donnes (voir la section suivante) est plus lev: DVCPro, DVCPro HD, AVC-Intra. En matire de fichiers vido, vous tes susceptible de disposer de sources sous lun des principaux formats suivants: QuickTime (extension .mov). Dvelopp par Apple en 1991, on croit souvent tort que QuickTime est le format de la vido sur le Mac. Ce nest pas faux, mais tout fait limitatif. QuickTime est en effet un vritable format dintgration multimdia. Outre de la vido, une squence QuickTime peut contenir de laudio, du texte, de lanimation Flash,
408
Flash CS5
des images navigables (panoramas ou objets QuickTime VR), le tout assembl dans diffrentes pistes, comme dans un scnario Flash. Si QuickTime est la base de la plupart des diteurs vido sur Mac, sachez que votre PC nest pas oubli et que vous pouvez y installer QuickTime for Windows. La version actuelle de QuickTime est 7.6.6, sur Mac comme sous Windows (www.apple.com/fr/quicktime/download). QuickTime est trs utilis sur toute plate-forme aux deux extrmits de la chane de production vido: pour lacquisition et pour la diffusion. Motion Picture Expert Group (extensions .mpeg, .mpg). Un camscope HDV produit du MPEG, mais beaucoup dautres camscopes produisent du MPEG avec un autre codec que HDV. Lorsque lon dispose dun fichier MPEG, on ne sait pas quel codec a t utilis pour le produire. Beaucoup de fichiers vido MPEG se prsentent sous lapparence de fichiers AVI ou MOV. Digital Video (extension .dv). Format des camscopes DV. Audio Video Interleaved (extension .avi). Format dvelopp par Microsoft en 1992, lorigine pour lacquisition. Tous les codecs utiliss en AVI ne sont pas disponibles dans QuickTime. Windows Media Video (extensions .wmv, .asf). Ce format propre Windows est relu grce DirectX, en version 9.29 actuellement (www.microsoft.com/downloads). Ce nest pas un bon format source cause de la compression faible dbit de donnes qui peut dgrader limage. Si Flash est capable dimporter une vido dans une animation Flash ou dy lier une vido externe (voir Fiche 66), lenvironnement de ralisation ne dispose en lui-mme daucune fonctionnalit ddition vido. Vous devrez pour cela vous tourner vers un logiciel ddi. iMovie09 ou Windows Movie Maker 2.6 (inclus dans Windows Vista, mais supprim de Windows 7) sont des produits grand public. Les logiciels phares du domaine sont Adobe Premiere CS5, Adobe After Effects CS5 et Apple Final Cut Pro 7.
Comprendre le dbit de donnes

Le dbit de donnes (bit rate ou data rate) est la quantit de donnes fournir par unit de temps pour garantir la fluidit de la vido. Il sexprime en kilo-bits par seconde (Kb/s), voire en mga-bits par seconde (Mb/s). Rappelons que dans les units le k et le K ne sont pas quivalents: le premier celui des units de mesure physiques est un facteur 1000, tandis que le second celui des informaticiens est un facteur 1024. Pour fixer les ides, donnons les dbits de donnes de quelques technologies. Pour un camscope MiniDV ou DVCAM, il est de 25Mb/s pour la vido et de 5Mb/s pour laudio. En DVCPro, DVCPro HD, ou AVCIntra, le dbit de donnes peut atteindre 100Mb/s. En considrant que pour tre relue sur la Toile via une connexion haut dbit, une vido doit avoir un dbit de donnes entre 500Kb/s et 1Mb/s, vous comprenez tout lenjeu de la phase dencodage prliminaire lintgration de la vido dans votre animation Flash.
Vido
409
Avant dexaminer la pratique de lencodage, il importe que vous compreniez bien les diffrents facteurs qui dterminent le dbit de donnes. Remarquons dabord que toute connexion est susceptible de prsenter des variations de dbit. Pour cette raison, il est dusage de cibler un dbit de donnes total valant les trois quarts, voire la moiti du dbit thorique de la connexion. Ensuite, la plupart des vidos tant sonorises, le dbit de donnes total se rpartit entre le dbit audio et le dbit vido. Pour une connexion haut-dbit, considrez que vous pourrez fournir une qualit dcoute haute fidlit avec un dbit de 96 Kb/s pour du MP3 et de48Kb/s pour du AAC. Soustrayez le dbit de donnes audio du dbit total pour obtenir le dbit de donnes vido proprement dit. Concernant ce dernier, concrtement vous pouvez agir sur sa valeur trois niveaux: Dbit dimages (frame rate). Nous avons dj voqu cette notion la section Persistance rtinienne, cadence, Fiche 26. Comme la cadence dune animation, le dbit dimages dune vido sexprime en images par seconde (I/S). Rappelons que la premire est un dbit dimages souhait, mais non garanti, le dbit effectif pouvant varier selon la configuration matrielle de linternaute (ordinateur, connexion). En vido, lapproche est diffrente: le dbit dimages 25I/S en Europe, 30I/S en Amrique du Nord et en Asie doit imprativement tre respect pour une relecture correcte. Relire les donnes, dcoder puis afficher 25 ou 30 images bitmap par seconde demande des accs rapides au disque dur et un processeur puissant. Bien sr, un dbit dimages plus lev assure des mouvements rapides plus fluides, sans saut, parce que mieux chantillonns (certains jeux vido dbitent 60I/S). Mais sagissant de matriser le dbit de donnes de votre vido sur la Toile, vous allez plutt rduire le dbit dimages, cest--dire sous-chantillonner la squence. Et pour ne pas en recalculer de nouveaux chantillons, au moment de fixer le dbit dimages de la vido encode, vous choisirez un sous-multiple de celui de la vido source. Taille dimage. Il sagit de la largeur et de la hauteur de chacun des vidogrammes, lesquels conditionnent leur nombre de pixels. Les algorithmes de compression dcoupent chaque vidogramme en macroblocs de 1616 pixels. Il est donc prfrable de choisir pour la largeur et la hauteur des multiples de 16, dfaut de 8 et encore dfaut de 4. Signalons quen prise de vue vido les pixels ne sont pas carrs. Le r-chantillonnage des vidogrammes doit donc oprer le passage une matrice de pixels carrs. Ainsi, la matrice 720480 de pixels rectangulaires dun vidogramme DV doit tre r-chantillonne en lune des matrices 640480, 480360, 320240, 160120. De mme, la matrice 14401080 dun vidogramme HDV doit tre r-chantillonne en lune des matrices 19201080, 1024576, 768432, 512288, 256144.
410
Flash CS5
Compression. La compression vido a deux aspects: la compression spatiale celle de chaque vidogramme successif et la compression temporelle. La premire est ni plus ni moins celle queffectue JPEG. La seconde tire parti de la cohrence temporelle des vidogrammes, savoir que sauf aux changements de plan, un vidogramme diffre trs peu du vidogramme qui le prcde. Cette observation peut tre reformule de la faon suivante : limage diffrence dun vidogramme et du vidogramme prcdent diffrence pixel pixel des valeurs comporte un grand nombre de pixels dont la valeur est nulle. Cest donc une image extrmement peu coteuse coder. Le principe de la compression temporelle est de ne coder intgralement quun certain nombre de vidogrammes, dits imagescls ou intra-images ou encore i-images. Les vidogrammes entre deux images-cls sont dits des images prdictives ou p-images. Aux p-images, on nencodera que limage diffrence avec la i-image prcdente. On parle dintervalle dimage-cl ou de groupe dimages (group of pictures, GOP) pour lensemble constitu dune i-image et de toutes les p-images qui la suivent. Le facteur de compression de la vido dpend de diffrents choix que vous faites: Codec. Le choix dun algorithme de compression-dcompression est bien sr le premier choix que vous faites. Nous y consacrerons la section suivante. Longueur des groupes dimages. Cest un paramtre auquel vous avez accs lors de lencodage. Pour la frquence des i-images, il est conseill de choisir un multiple du dbit dimages de la vido source. Une autre possibilit consiste opter pour des images-cls dites naturelles. Les i-images ne sont alors plus choisies intervalle rgulier, mais de manire automatique, ds que dans un vidogramme le nombre de pixels diffrents de ceux de la i-image prcdente dpasse un certain seuil. Le choix des i-images a des consquences sur linteraction avec la vido. En effet, si vous permettez linternaute de rechercher dans la vido, lorsquil relchera le curseur de la glissire de dfilement, limage affiche sera la i-image la plus proche de limage pointe par le curseur. Nature des groupes dimages. Certains codecs se dclinent selon diffrents prrglages ou profils de compression, plus ou moins sophistiqus. Lune de ces sophistications consiste dfinir des images bi-prdictives ou b-images. la diffrence dune image prdictive ou p-image, qui est relative limage-cl prcdente, une image bi-prdictive est relative limage-cl prcdente, ainsi qu limage-cl suivante! Lide parat a priori un non-sens: comment comparer le vidogramme courant avec limage-cl suivante, qui par dfinition ne sera traite quaprs? Lastuce consiste simplement rordonnancer les vidogrammes de sorte que les images-cls prcdente et suivante se prsentent avant les images qui sont intermdiaires dans lordre dorigine. Le groupe dimages est alors constitu dune i-image et de toutes les b-images et p-images qui la suivent avant la i-image suivante. Les groupes dimages couramment utiliss sont de type IBBPBBPBB
Vido
411
ou IBBPBBPBBPBB. Une bonne rgle gnrale est de ne pas demander plus de trois b-images par intervalle di-image. Dbit de donnes constant ou variable. Par dfaut, la compression se fait dbit constant de donnes (constant bit rate, CBR). Cest galement impratif pour de la vido dlivre en vrai flux continu (voir Fiche 66). Mais il est parfois possible, lors de lencodage dune vido qui sera dlivre partir dun serveur web ou dun disque amovible, dopter pour un dbit variable de donnes (variable bit rate, VBR). Cela signifie que lon permet au dbit de sadapter, au fil du temps, la nature des donnes: il fera des pointes lors de passages plus forte complexit visuelle ; a contrario, il diminuera lors de passages de moindre complexit visuelle. Le dbit variable de donnes implique gnralement un traitement en deux passes (analyse de la complexit visuelle lors dune premire passe). Lencodage est donc plus long, mais donne un meilleur facteur de compression. Tous ces choix faits, vous disposez dune valeur pour le facteur de compression qui vous permet de calculer le dbit de donnes selon la formule:
Dbit de donnes vido = Largeur Hauteur Dbit dimages __________________________________________ Facteur de compression
Plus exactement, cest vous de dterminer des valeurs pour les paramtres qui entrent dans la formule prcdente de manire obtenir un dbit de donnes infrieur celui cibl. Les combinaisons qui rpondent la contrainte sont multiples. En fonction du contenu de la vido, vous privilgierez tel ou tel paramtre. Si vous encodez la vido dun cheval au galop, vous choisirez un dbit dimages lev an que le mouvement reste uide. Par contre, dans le cas dun interview face camra, vous pourrez choisir un dbit dimages plus faible, donc consacrer plus de dbit de donnes la qualit dimage, soit par une plus grande taille, soit par une compression moindre. Si vous augmentez le dbit dimages, vous aurez moins de mmoire allouer chaque image. De mme, si vous augmentez le nombre dimages-cls, la qualit de chacune delles diminuera. Le choix dun codec et le cas chant, de lun de ses profils de compression conditionne galement la faon dont le dbit de donnes disponible est utilis.
Taille dimage. Largeur et hauteur de chacun des vidogrammes encods. Dbit dimages. Nombre de vidogrammes retenu dans lencodage, par seconde de vido. Facteur de compression. Le rapport entre la taille de la vido encode et celle de la vido source dpend du codec retenu et du paramtrage de la compression : frquence des intra-images, type de groupe dimages (uniquement constitu dimages prdictives ou galement dimages bi-prdictives), constance ou variabilit du dbit de donnes.
Notions cls
412
Flash CS5
Choisir un codec vido

Il existe un grand nombre dalgorithmes de compression-dcompression. La varit des codecs sexplique par la diversit des supports : certains mettent laccent sur la qualit visuelle dition vido professionnelle et diffusion TV, tandis que dautres visent optimiser le facteur de compression diffusion sur la Toile ou sur les rseaux de tlphonie mobile. Dans QuickTime, une vingtaine de codecs sont accessibles. Aucun format de fichier efficace ne peut se permettre dencoder avec les donnes lalgorithme qui a servi les compresser et celui qui servira les dcompresser. Ce principe vaut pour la vido, ce qui signifie quaucun fichier vido ne contient le codec dont il est issu. Pendant trs longtemps, la rgle a t que pour pouvoir relire un fichier vido sur un ordinateur, il fallait que le codec ayant servi le compresser y soit install (soit dorigine dans la couche multimdia du systme dexploitation, soit comme extension dun lecteur vido tlcharge). Larrive de la version 6 du lecteur Flash a compltement chang la donne. En effet, ce dernier intgrant la dcompression des fichiers FLV et tant massivement prsent sur les ordinateurs du monde entier, le format FLV (FLash Video) est devenu un standard de facto (accs quasi universel) et Flash la technologie de choix pour dlivrer de la vido sur la Toile. Le codec vido apparu dans Flash avec la version 6 du lecteur est Sorenson Spark ou H.263. Dans les versions ultrieures, dautres codecs sont apparus qui amliorent non seulement la qualit de limage, mais aussi le facteur de compression: On2 VP6-E avec le lecteur Flash8, puis dans une version simplifie On2 VP6-S avec le lecteur Flash 9; cette dernire version du lecteur a surtout vu ladoption du codec AVC/H.264, standard de lindustrie vido. Le Tableau 65.1 compare ces quatre codecs selon diffrents critres. Utilisez-le pour guider votre choix en fonction des contraintes de votre ralisation. Tableau 65.1 : Comparatif des codecs vido Flash CS5
Codec Extension SorensonSpark (H.263) .flv On2VP6-E .flv On2 VP6-S (Simple) .flv AVC/H.264 (MPEG-4Part10) .f4v(reconnue uniquement parFlash),.m4v, .mp4,.mov 9.0.115
Versionminimum ncessairedu lecteurFlash Puissance decalculet mmoirencessaires* Tailledimage
9.0.115
D(PentiumIIIou antrieurs, PowerMacG3) Possible daller au-del de640480
Ne pas aller au-del Possibile daller de640480 jusqu 1280720
Vido
413
Tableau 65.1 : Comparatif des codecs vido Flash CS5 (suite)
SorensonSpark (H.263) D D A On2 VP6-S (Simple) C C B AVC/H.264 (MPEG-4Part10) A A D
Codec Qualitdimage* Facteur de compression* Temps de compression* Profils de compression Incrustation vido Codecaudio Codec Dbitdedonnes
On2VP6-E B B C
Aucun
Aucun
Aucun
Base,Main,High etHigh10bits Non AAC AVC/H.264 (MPEG-4Part10)
Non MP3 SorensonSpark (H.263) Possible daller au-delde1Mb/s Diffusionlibre dedroits
Oui MP3 On2VP6-E Nepasaller au-del de 500Kb/s Diffusionlibre dedroits
Non MP3 On2VP6-S(Simple)
Cotfinancier
Diffusionlibre dedroits
Utilisation commerciale soumise des droits
*A,B,CetDindiquentqueAestmeilleurqueB,lui-mmemeilleurqueC,lui-mmemeilleurqueD
Vous ne pouvez pas intgrer de vido votre animation si vous publiez pour une version au plus 5 du lecteur Flash, ni sil sagit dune animation pour appareil portable sous Flash Lite1.0, 1.1 ou 2.0. Les quatre codecs sont par contre disponibles pour Flash Lite 3.11, ainsi que pour AIR 1.0, 1.5 ou 2.0 (voir Fiche 87). Au fil des annes, les codecs se sophistiquent, mais cest au prix de calculs plus complexes, donc dun temps de compression toujours plus long. Il faut relativiser ce qui pourrait tre vu comme un inconvnient. En effet, que lencodage soit plus long est accessoire, au sens o vous ne faites a priori cette opration quune seule fois. Ce qui est plus problmatique est la phase de dcompression, elle aussi plus complexe. Cette opration est en effet pratique chaque relecture sur la machine cliente. Ce dcodage qui demande plus de ressources linternaute (connexion haut dbit, plus de mmoire vive, processeur plus rapide) nest donc viable que si vous cartez de votre audience cible les configurations plus anciennes.
1. Flash Lite 4 nest pas encore publi au moment o nous rdigeons.
414
Flash CS5
Sorenson Spark est le codec vido le plus ancien dans Flash et aussi le moins exigeant en ressources. On considre quil ne demande environ que la moiti de la puissance de calcul ncessaire On2 VP6. Mentionnons quelques autres caractristiques ne figurant pas dans le Tableau 65.1. Sorenson Spark est utilisable sur toutes sortes de plates-formes, en particulier les appareils mobiles. Il est utilis par beaucoup de logiciels dencodage en particulier des gratuiciels. Enfin, cest le seul codec dont la partie compression fasse partie du lecteur Flash (elle sert lencodage de la webcam la vole pour une diffusion via le protocole RMTP; voir Fiche 66). Le codec On2 VP6-S simplifie On2 VP6-E, en abandonnant certains calculs comme le filtrage adaptatif sous-pixel. Il est donc moins gourmand en ressources que la version plus sophistique, mais au prix dune moindre qualit dimage. Vous pouvez par contre lappliquer des tailles dimages plus grandes. Le codec H.264 est universel plusieurs titres. Au niveau de la production dabord: tous les bons logiciels ddition vido en produisent. H.264 est lisible par le lecteur Flash, mme sil a t encod via un autre logiciel que Adobe Media Encoder CS5, par exemple QuickTime Pro 7 ou un gratuiciel comme MPEG Streamclip (www.squared5.com) ou Any Video Converter (www.any-video-converter.com/products/for_video_free). Mettons un petit bmol cet enthousiasme en signalant que puisquil fait lobjet de diffrentes mises en uvres, vous nobtiendrez pas ncessairement le mme rsultat selon lencodeur que vous utiliserez. Le codec H.264 est galement universel au niveau de la diffusion. Il dborde largement le monde Flash, contrairement Sorenson Spark et On2 VP6 qui sont des codecs non tlchargeables comme extensions des autres lecteurs vido. H.264 est relu par tous les grands lecteurs : QuickTime, Real Player, Windows Media Player (fichiers M4V, MP4 ou MOV; les fichiers F4V ne sont reconnus que par Flash). Cest aussi le standard de lindustrie vido, quil sagisse des camscopes ou des disques HD Blu-ray. Latout majeur de H.264 est dobtenir au prix dune plus grande complexit dencodage les meilleurs facteurs de compression (profils Main ou High). Un autre aspect intressant de H.264 est lexistence de ses diffrents profils, adapts diffrentes puissances de calcul. Il est ainsi tout fait envisageable dencoder votre vido source plusieurs fois avec chacun des profils, puis de raliser une animation qui en tlcharge la meilleure version permise par la configuration de la machine cliente (ceci demande nanmoins un peu de programmation hors de la porte de ce livre). Si vous tes fch avec les mathmatiques, la formule du dbit de donnes explicite la section prcdente vous aura peut-tre laiss rveur. Dans ce cas, les chiffres des Tableaux65.2 et 65.3 vous seront sans doute utiles pour faire les bons choix sans avoir calculer vousmme. Vous y trouverez les facteurs de compression estims pour chacun des quatre codecs (et des trois profils de H.264). partir deux, nous avons calcul les dbits de donnes dans diffrents cas de figure. Un aspect essentiel prendre en compte est la nature de la squence vido en terme de mouvement. Pour fixer les ides, on considre que le mouvement y est faible, si en moyenne moins de 15% des pixels changent dun vidogramme au suivant. Si
Vido
415
en moyenne moins de 75% des pixels changent dun vidogramme au suivant, le mouvement est considr comme moyen. Le dbit de donnes est alors valu au double de celui du cas de figureprcdent. Le mouvement est considr comme important, si en moyenne plus de 75% des pixels changent dun vidogramme au suivant. Le dbit de donnes est nouveau valu au double de celui du cas de figureprcdent. Dans chacun des trois cas, les Tableaux65.2 et 65.3 donnent le dbit de donnes pour un dbit dimages de 25I/S et pour deux tailles dimages 4:3 diffrentes: 320240 et 600400. Tableau 65.2 : Codecs vido et leurs facteurs de compression
Codec Sorenson Spark 6000 H.264 profilBase 6500 On2 VP6_S 7000 On2 VP6_E 7500 H.264 profilMain 8000 H.264 profilHigh 8250
Facteurde compressionestim
Tableau 65.3 : Dbits de donnes obtenus avec les diffrents codecs vido
Codec Sorenson Spark Tailleet dbitdimage 320 x 240 25I/S 600 x 400 25I/S 320 x 240 25I/S 600 x 400 25I/S 320 x 240 25I/S 600 x 400 25I/S H.264 profil Base On2 VP6_S On2 VP6_E H.264 profil Main H.264 profil High
Quantitde mouvement Peudemouvement
DbitsdedonnesenKb/s
160
147
137
128
120
116
(plusde85%) Mouvementmoyen
300
276
256
240
225
217
320
295
274
256
240
232
(entre25et85%)
600
553
513
480
450
435
Beaucoupde mouvement (moinsde25%)
640
590
550
512
480
464
1200
1106
1026
960
900
870
*Entreparenthses:lamoyennedespourcentagesdepixelsconstantsdunvidogrammeausuivant.
416
Flash CS5
Concernant la partie audio dune squence vido sonorise, le codec vido H.264 fait appel au codec audio AAC (Advanced Audio Coding) qui ncessite une version au moins 9 du lecteur Flash. AAC fournit une qualit dcoute similaire celle produite par MP3 pour un dbit de donnes moindre (96 Kb/s au lieu de 128). Comme H.264 pour la vido, AAC est dclin en trois profils: LE (Low Complexity), Main et HE (High Efficiency, dit aussi SBR). Leurs facteurs de compression moyens sont respectivement 15, 16 et 17. Les autres codecs vido compressent laudio en MP3 (MPEG-1 Audio Layer III), avec un facteur de compression moyen de 11. En audio, le dbit de donnes se calcule selon la formule suivante:
Dbit de donnes audio = Frquence dchantillonnage en Hz x Nombre de canaux x Taille des chantillons en bits / Facteur de compression
Signalons que pour la partie compression de laudio, si votre animation doit encoder de la voix en temps rel, le lecteur Flash intgre depuis sa version 6 le codec audio Nellymoser Speech. Le codec Speex a t intgr avec la version 10. Pour finir, mentionnons quil est possible de ne pas compresser la piste audio dune vido. Ceci na de sens que sil sagit de vido incorpore lanimation (voir Fiche 67). Dans ce cas, la piste audio fera lobjet dune compression MP3 par Flash au moment de la publication.
Utiliser Media Encoder

Adobe Media Encoder est une application indpendante fournie avec Flash CS5. En version5.0 lheure o nous crivons, transversale toute la suite CS5, elle est capable de traiter divers types de mdias et cest dsormais une application 64 bits. Media Encoder vous permet dencoder un fichier isol ou tout un lot de fichiers. Lorsque vous lancez lassistant dimportation vido (Fichier> Importer> Importer de la vido), vous trouvez dans la bote de dialogue qui saffiche un bouton Lancer Adobe Media Encoder. Vous pouvez tout aussi bien localiser lapplication sur votre disque dur et la lancer dun double-clic. Au lancement, lcran daccueil de Media Encoder se prsente comme sur la Figure65.1. La zone centrale est la file de fichiers en attente dencodage, initialement vide. Commencez par la garnir. Cliquez pour cela sur le bouton Ajouter, en haut gauche, ou demandez Fichier> Ajouter, ou encore glissez-dposez directement vos fichiers vido dans la file. Le menu Fichier contient aussi des commandes spcifiques Ajouter une squence Premiere Pro et Ajouter une composition After Effects. Lorsque votre file dattente est cre, vous pouvez la rorganiser par simple glisser-dposer. Slectionnez un fichier dans la liste dattente. Sous le bouton Ajouter se trouvent un bouton Supprimer et un bouton Dupliquer. Ce dernier est trs utile pour enregistrer diffrentes versions dune mme vido source, encodes selon des rglages diffrents. Dans la liste dattente, vous pouvez faire une slection multiple selon les rgles habituelles: CMd+CliC (Mac) ou Ctrl+CliC (Windows).
Vido
417
Figure65.1
Lcran daccueil de Media Encoder.
Figure65.2
Choix de lun des deux formats.
Pour chaque fichier en attente, la premire chose faire consiste choisir un Format. Comme le montre la Figure65.2, vous avez le choix entre deux options: soit lencodage propritaire Flash Video (FLV | F4V), soit le format standard H.264. Daprs les statistiques, le nombre de personnes ayant install le lecteur Flash 9 sur leur machine est peine plus faible que le nombre de ceux nayant que la version 7 installe, donc en choisissant H.264 qui ncessite une version au moins 9 du lecteur Flash, le risque de perte daudience est vraiment limit. Avec la premire option, lextension du fichier encod sera soit .flv, soit .f4v. Avec la seconde, lextension sera .mp4. Le champ Fichier de sortie affiche lemplacement et le nom du fichier encod. Dans tous les cas, le fichier vido source (champ Nom de la source) restera intact.
418
Flash CS5
Le champ Prdfinir devrait en fait sintituler Prrglage (Preset). La Figure65.3 montre les prrglages disponibles pour lencodage propritaire Flash Video. Pour chaque prrglage, la version ncessaire du lecteur Flash est indique entre parenthses. La Figure65.4 montre les prrglages disponibles pour le format H.264. Vous voyez quil sagit ici plutt de faire un choix en termes de support de restitution de la vido.
Figure65.3
Le menu Prdfinir (prrglages) pour un choix de Format FLV | F4V.
Figure65.4
Le menu Prdfinir (prrglages) pour un choix de Format H.264.
Les prrglages sont une base. Il sagit ensuite de les affiner. Tout en bas des menus reproduits Figures 65.3 et 65.4, se trouve une commande Modifier les rglages dexportation. Aprs avoir slectionn un fichier dans la file dattente, vous pouvez aussi utiliser Modifier>
Vido
419
Rglages dexportation, ou encore cliquer sur le bouton Rglages (voir Figure65.1). Toutes ces oprations ouvrent la bote de dialogue Rglages dexportation reproduite Figure65.5. Lorsque vous aurez modif les rglages, tout moment vous pourrez revenir leurs valeurs initiales grce la commande Modifier> Rinitialiser ltat.
Figure65.5
La bote de dialogue Rglages dexportation.
La partie suprieure gauche de la bote de dialogue contient deux onglets Source et Sortie. Dans chacun deux, un bouton orn dune flche courbe vous permet de basculer vers lautre. Longlet Sortie sert visualiser le rsultat de vos rglages dencodage. Dans longlet Source, vous pouvez si besoin recadrer limage de la vido. Le bouton en haut gauche de longlet porte licne usuelle pour ce genre dopration de massicotage. La Figure65.6 vous montre un exemple. Spcifiez interactivement le rectangle de recadrage, ou bien entrez des valeurs numriques dans les quatre champs Gauche, Haut, Droite, Bas. droite de ces champs se trouve un menu galement visible sur la Figure65.6, dans lequel vous pouvez choisir lune des proportions dimage courantes. Aprs ce recadrage spatial, votre squence vido peut ncessiter un recadrage temporel, ou lagage. Parfois, vous souhaiterez nencoder quun fragment de la vido source. Cette opration se fait galement dans longlet Source, comme le montre la Figure65.7. Sous la zone daperu se trouve une glissire de dfilement jaune, au-dessus de laquelle se trouve un curseur dnotant limage couramment affiche, lhorodatage de celle-ci tant affich en haut gauche de la glissire.
420
Flash CS5
Les deux boutons triangulaires droite de lhorodatage servent dfinir les points dentre et de sortie de la squence que vous allez encoder. En cliquant sur lun deux, le vidogramme courant devient le premier ou le dernier vidogramme encoder. Vous pouvez aussi tout simplement faire glisser les deux curseurs triangulaires qui se trouvent sous la glissire de dfilement, initialement chacune des extrmits de celle-ci. Affinez en avanant ou en reculant dun vidogramme la fois grce aux touches flches. Ds que vous avez spcifi un point dentre ou de sortie, Plage source indique Personnalis. Si besoin, pour abandonner les points dentre et de sortie, choisissez-y lment entier.
Figure65.6
Recadrage de la vido dans longlet Source.
Figure65.7
lagage de la vido dans longlet Source.
Vido
421
Sous la glissire de dfilement, tout fait gauche, se trouvent quatre boutons dajout, de suppression, dimportation et denregistrement de ce que la version franaise de Media Encoder appelle des points de signalement. Encore une bvue de traduction: langlais cue points est un terme de thtre qui signifie les tops de dpart que lon donne aux acteurs pour leurs entres en scne. Rcuprs dans votre animation Flash, ces tops de dpart vous permettront via un peu de programmation ActionScript de synchroniser les diffrents lments de celle-ci avec la vido. Ces tops de dpart peuvent mme jouer un rle similaire celui que jouent les tiquettes pour votre scnario (voir section Sauts dans le scnario, Fiche 25), savoir que grce eux vous pouvez passer dune lecture linaire de la vido une lecture interactive par sauts en diffrents points (pour le dire autrement, la diffrence est la mme quentre les entres Film et Chapitres dun DVD). La Figure 65.8 montre un exemple de top de dpart. On voit que celui-ci possde trois proprits: un nom, un horodatage et un type. Le type vnement sert dclencher lexcution dinstructions ActionScript, tandis que le type Navigation sert aux sauts diffrents chapitres.
Figure65.8
Dfinition dun top de dpart dans longlet Source.
La partie droite de la bote de dialogue Rglages dexportation regroupe les options dencodage audio et vido (voir Figure65.5). On y retrouve dabord les informations dj visibles dans la fentre principale (voir Figure65.2): Format, Prconfiguration (il sagit du prrglage, qui l-bas sappelait Prdfinir!), Nom de la sortie (l-bas, Fichier de sortie). Vous pouvez, si vous le souhaitez, saisir des Commentaires. Cochez les cases dexportation vido
422
Flash CS5
et dexportation audio selon les besoins. Enfin, la rubrique Rsum synthtise les options dencodage courantes. On y trouve notamment les dbits cible et maximum. Dans longlet Format, reproduit Figure 65.9, il sagit tout simplement, dans le cas dun encodage propritaire Flash Video, de choisir entre les deux formats FLV et F4V.
Figure65.9
Longlet Format.
Avec longlet Vido, reproduit Figure65.10, nous sommes au cur du sujet. la rubrique Rglages vido de base, le codec choisi est rappel. Vous avez la possibilit de Redimensionner la vido en cochant la case homonyme et en spcifiant une largeur ou une hauteur (par dfaut, lautre dimension sadapte pour conserver les proportions). Il sagit ici bel et bien de r-chantillonner les vidogrammes et non de les massicoter comme prcdemment. la rubrique Rglages de dbit, vous avez le choix pour lEncodage du dbit entre trois options. Par dfaut, le dbit de donnes est constant (CBR), mais vous pouvez choisir un dbit de donnes variable (VBR), en une ou deux passes. Rappelons que cette troisime et dernire option implique un encodage plus long, mais donne un rsultat optimis. Si dans le menu Niveau de dbit vous choisissez Personnalis, deux glissires deviennent utilisables, qui vous permettent de spcifier un dbit de donnes cible et un dbit de donnes maximum. Si vous choisissez lune des trois autres options Faible, Moyen, Haut pour le Niveau de dbit, celui-ci est calcul automatiquement en fonction de lensemble de vos paramtres. la rubrique Rglages avancs, si vous cochez Dfinir la distance entre les images cls, vous avez la possibilit de spcifier la longueur des intervalles dimage-cl ou groupes dimages (GOP). Loption est dcoche par dfaut, ce qui signifie que les images-cls sont naturelles, donc intervalles irrguliers et dtermines automatiquement. Cest loption recommande. La rubrique Rglages vido de base contient cinq autres options importantes. Dans le menu Images/s [i/s], reproduit la Figure65.11, vous pouvez choisir parmi les valeurs courantes de dbit dimages. Rappelons quil nest raisonnable dopter pour un dbit dimages faible (infrieur 24 I/S), que si la squence ne contient que des lments relativement statiques dans le cadre. Cela permettra dobtenir une meilleure qualit dimage. A contrario, si la squence contient beaucoup de mouvement, il est plus prudent dopter pour Identique la source, de sorte quaucune image ne soit carte pendant le processus dencodage.
Vido
423
Figure65.10
Longlet Vido.
Figure65.11
Le menu Images/s [i/s] de longlet Vido.
Le menu Ordre des champs, reproduit la Figure65.12, pourrait sappeler Entrelacement. lpoque de la dfinition des standards de vido, on ne disposait pas de la bande passante ncessaire une frquence correcte de rafrachissement de limage. Lastuce a alors consist dcomposer chaque vidogramme en deux demi-images dites champs. Le champ impair ou suprieur (respectivement pair ou infrieur) est constitu de toutes les lignes impaires (respectivement paires) du vidogramme. Les deux champs sont transmis lun aprs lautre. la relecture, le vidogramme dorigine est reconstruit en entrelaant ses deux champs.
424
Flash CS5
Le rafrachissement de limage se fait en effet par balayage dit progressif, cest--dire dans lordre naturel des lignes, par opposition au balayage dit entrelac, dans lequel on balaye alternativement les lignes paires et les lignes impaires. Avec loption Aucun (progressif), il ny a aucun entrelacement. Les deux autres options crent de lentrelacement. Avec loption Suprieur, le champ suprieur est transmis avant le champ infrieur, et linverse avec loption Infrieur. Choisissez lune des options dentrelacement uniquement si vous encodez une vido NTSC ou PAL.
Figure65.12
Le menu Ordre des champs de longlet Vido.
Dans le menu Profil, reproduit la Figure65.13, il sagit de choisir lun des trois profils de compression Ligne de base, principal ou Elev du codec H.264.
Figure65.13
Le menu Profil de longlet Vido.
Slectionnez un Niveau dans le menu homonyme, reproduit la Figure65.14, pour doser la compression.
Figure65.14
Le menu Niveau de longlet Vido.
Deux options vous permettent dobtenir une qualit maximale du rsultat de lencodage, au prix dune dure plus longue de celui-ci. La premire se trouve dans longlet Vido: Rendre la profondeur maximum. La seconde se trouve sous les onglets : Utiliser la qualit de rendu maximale. Les calculs se feront alors avec plus de prcision (plus dun octet allou par pixel de chaque canal). Enfin, dans le cas o il y aurait disparit entre les dbits dimage
Vido
425
en entre et en sortie, cochez Utiliser linterpolation dimages, dfaut de quoi le rsultat manquera de fluidit. Longlet Audio est reproduit Figure65.15. Reportez-vous la fin de la section prcdente et la section En amont de limportation, Fiche 60, pour les enjeux des choix du nombre de canaux (paramtre ici bizarrement intitul Couches de sortie), de la frquence dchantillonnage, de la taille des chantillons (Qualit audio) et du dbit de donnes audio. Concernant ce dernier, sachez que pour de la parole (rcit, interview, discours, etc.), vous pouvez descendre jusqu 32Kb/s. Pour une bande-son musicale par contre, qui demande de la haute dlit, il faut utiliser un dbit des donnes plus lev, par exemple 96Kb/s. Longlet Filtres, visible Figure65.5, vous permet dappliquer du flou aux vidogrammes, horizontalement, verticalement ou dans les deux directions. Dans longlet FTP (voir Figure65.16), vous pouvez renseigner les informations FTP pour le transfert des fichiers sur le serveur.
Figure65.15
Longlet Audio.
Les donnes que vous encodez sont probablement accompagnes de mtadonnes XMP (voir la section Mtadonnes, Fiche 5). En cliquant sur le bouton Mtadonnes, raccourci de la commande dition > Modifier des mtadonnes, vous ouvrez la bote de dialogue Exportation de mtadonnes, dans laquelle vous pouvez dfinir quelles mtadonnes retenir dans votre encodage, et le cas chant choisir de les incorporer au fichier et/ou de les placer dans un fichier XMP dit sidecar. La bote de dialogue vous permet de dfinir une rgle de conservation, voire un modle dexportation.
426
Flash CS5
Figure65.16
Longlet FTP .
Il vous arrivera parfois davoir plusieurs vidos traiter selon les mmes rglages. gauche du menu des prrglages (voir Figure65.5), se trouvent trois boutons qui vous permettent respectivement de gauche droite dEnregistrer, dImporter ou de Supprimer un prrglage. Aprs avoir modifi certains des paramtres dun prrglage, le menu affiche Personnalis et vous pouvez cliquer sur le bouton Enregistrer. La bote de dialogue reproduite Figure65.17 souvre alors. Donnez un nom au prrglage. Vous le retrouverez ensuite dans le menu, donc vous pourrez lappliquer dautres fichiers de la file dattente.
Figure65.17
Lenregistrement dun prrglage personnalis.
De retour lcran principal de Media Encoder celui qui affiche la file dattente , un message vous indique que Le codage de la file dattente va dmarrer dans. Pour courtcircuiter le dcompte, cliquez sur le bouton Dmarrer la file dattente pour engager le processus dencodage. Vous avez alors un aperu de la progression dans la barre qui stend sur toute la largeur de la fentre. Soyez patient, lencodage dune vido demande toujours normment de calculs et sur une squence assez longue, avec le profil le plus sophistiqu du codec H.264, vous risquez dattendre un certain temps. Comme le montre la Figure65.18, lorsque lencodage de lun des fichiers vido de la file dattente est termin, une coche verte saffiche dans son champ tat. Rappelons que le traitement par lot ne vous oblige nullement appliquer les mmes paramtres dencodage tous les fichiers de la file dattente.
Vido
427
Pour conclure, sachez quil existe des alternatives Adobe Media Encoder : Sorenson Squeeze 6 (www.sorensonmedia.com/flash-video-encoding), ou encore On2 Flix (flix. on2.com), qui est dsormais proprit de Google.
Bridge (voir Fiche 5) gre les fichiers FLV.
Enfin, vous avez diffrentes possibilits pour lire un fichier FLV en dehors de Flash. Le plus simple est dutiliser le lecteur Adobe Media Player fourni avec Flash, mais le lecteur VLC Media Player (www.videolan.org/vlc) peut aussi le faire. Par ailleurs, un composant QuickTime (www. perian.org) vous permet de relire du FLV dans le lecteur QuickTime. Wimpy propose un lecteur FLV gratuit, en version Mac et PC (www.wimpyplayer.com).
Figure65.18
Le traitement de la file dattente.
Fiche 66
Choisir la mise en uvre vido

Avec la croissance rapide des dbits courants de connexion, la vido prend de plus en plus dimportance sur la Toile. Le fait que le lecteur Flash soit massivement diffus sur les ordinateurs du monde entier, alli au fait que depuis sa version 6, il intgre la dcompression des fichiers FLV, en ont fait de facto le lecteur standard de la vido sur la Toile. Par rapport RealPlayer, QuickTime ou Windows Media Player, le lecteur Flash possde deux avantages
428
Flash CS5
de taille: dune part, il offre une plus grande visibilit, dautre part il ne prsente aucune diffrence de mise en uvre entre plateformes (Mac, PC, machines sous Linux ou Solaris). Pour vous convaincre du succs de la vido Flash sur la Toile, il suffit de savoir que tous les sites suivants dlivrent des fichiers FLV: YouTube, MySpace, Google Video, MSN Video, Yahoo! Video. Dernier avantage de la vido Flash qui nest pas des moindres, quoique hors de la porte de ce livre, la vido est pilotable par ActionScript. Avant dexaminer les diffrents types possibles de mise en uvre de la vido dans Flash, remarquons quau plus simple il sagira juste de diffuser de la vido sur la Toile (par exemple de la vido Flash la demande) et, au plus sophistiqu, de lintgrer en un tout cohrent avec des lments dautres types de mdia (intgration multimdia).
Vido incorpore versus vido lie

En tout premier lieu, deux choix soffrent vous: soit incorporer la vido votre animation, soit simplement la lier. Incorpore, la vido devient interne votre animation, ce qui signifie que ses donnes se rajoutent au fichier SWF que vous publiez. Quand on sait la lourdeur en rgle gnrale des donnes vido et la lgendaire lgret des fichiers SWF, il y a bien videmment une contradiction de principe vouloir incorporer de la vido dans Flash. En fait, cette option ne subsiste que pour des raisons de rtro-compatibilit. Si elle constitue un hritage des anciennes versions de Flash, elle est dconseille pour plusieurs raisons. Dabord, la lecture de la vido ne peut commencer avant quelle ne soit intgralement tl-charge. Ensuite, cette solution pose des problmes de synchronisation audio. Enfin, le risque est grand de saturer la mmoire, ce qui fera planter le lecteur Flash. Nincorporez une squence vido votre animation que si elle dure moins de dix secondes, si elle est non sonorise et parfaitement compresse. Si vous incorporez de la vido votre animation, sur le serveur vous naurez que les habituels fichiers HTML et SWF transfrer. Enfin, si vous optez pour lincorporation au SWF, en cas de modification de la vido, vous devrez la rimporter et republier le fichier SWF. Lie, la vido reste externe votre animation, dans laquelle elle est joue via le composant FLVPlayback. La Figure 66.1 montre un exemple danimation utilisant de la vido lie, plus exactement les fichiers transfrer sur le serveur. Outre les habituels fichiers HTML et SWF (butinages.html, butinages.swf), il y a le fichier vido externe lui-mme (butinages.f4v) ainsi que lhabillage choisi pour le composant contrleur de vido (SkinUnderPlayStopSeekMuteVol.swf). Outre labsence dalourdissement du fichier SWF, la solution de la vido lie prsente des avantages en termes de maintenance. Dune part, toute modification du fichier vido est prise en compte immdiatement, sans ncessiter aucune republication. Dautre part, votre animation reste volutive. Il est trs simple de la mettre jour : il suffit simplement de modifier dans le fichier source FLA le lien vers la vido (et dans ce cas, de republier, puis transfrer sur le serveur le fichier SWF).
Vido
429
Figure66.1
Les fichiers transfrer sur le serveur pour une animation utilisant de la vido lie.
Vido lie: tlchargement progressif versus flux continu

Le (non-)choix fait de la vido lie, il vous reste opter pour lune des deux mthodes daccs: tlchargement progressif partir dun serveur web ou lecture en flux continu partir dun serveur Flash Media ou du service Flash Video Streaming dun CDN (Content Delivery Network, rseau mondial de serveurs qui permet loptimisation des requtes sur des fichiers multimdias volumineux). Le tlchargement progressif dune vido est similaire dans son principe la lecture en flux continu du son (voir section Son dvnement versus en flux continu, Fiche 61), savoir que sa lecture dmarre ds quune quantit suffisante de donnes a t tlcharge sur la machine de linternaute. Les plus tolrants des informaticiens diront que lexpression flux continu est utilise ici de faon relche; de faon abusive diront les spcialistes rseau les plus psycho-rigides. En effet, le tlchargement progressif se fait partir dun serveur web classique, selon le protocole HTTP (HyperText Transfer Protocol). On sera plus exact en disant quil sagit de simulation sur protocole HTTP de la vritable lecture en flux continu. Les avantages du tlchargement progressif sont les suivants:
Simplicit. La mise en uvre sur serveur HTTP est simple et peu coteuse.
Accessibilit. Les pare-feu nautorisant souvent que le contenu dlivr par HTTP via le port 80, il ny a gure de risque quune vido en tlchargement progressif soit bloque par un pare-feu. Possibilit dune utilisation hors ligne. Une animation Flash utilisant de la vido en tlchargement progressif peut, si besoin, lire celle-ci hors de toute connexion la Toile, depuis un disque (dur ou amovible). Le tlchargement progressif a aussi des inconvnients: Bande passante. Sauf utiliser un serveur web ddi au contenu FLV, la bande passante partir du serveur risque dtre mise aussi contribution par le service dautres ressources du site dautres visiteurs. Recherche dans la vido. Elle est limite. Le retour en arrire est possible, mais pas lexploration vers lavant, puisque cette partie du contenu nest pas encore tlcharge.
430
Flash CS5
Protection du contenu. Il ny en a aucune: un internaute peut rcuprer la vido dans le cache du navigateur. Cot financier. Par dfaut, le tlchargement continue vers le cache, que linternaute visionne ou non la squence. Ceci peut parfois engendrer des surcots. ct de ce flux continu simul, il existe un vrai flux continu (streaming), mis en uvre sur les rseaux via dautres protocoles que HTTP. Real Video ou Apple QuickTime utilisent le protocole RTSP (Real-Time Streaming Protocol). Flash utilise un protocole quivalent: RTMP (Real-Time Messaging Protocol). Dans Flash, la lecture de vido en flux continu se fait partir dun serveur Flash Media ou du service Flash Video Streaming dun CDN. Les avantages du vrai flux continu sont les suivants: Rapidit. La relecture de la vido est quasi-instantane et lon parle de flux continu en temps rel. Direct. Il est possible de diffuser un flux vido en direct (live). Bande passante. Le dbit de donnes du flux est ajust en fonction de ltat instantan de la connexion. Contrle de la lecture. Une ventuelle programmation ct serveur est susceptible de fournir un contrle amlior du contenu: rembobiner, avance rapide, rechercher dans la vido, etc. la diffrence du tlchargement progressif depuis un serveur web ordinaire, la communication serveur-client avec ce type de serveur ddi est double sens. Recherche dans la vido. Ce cas particulier du point prcdent est particulirement intressant pour les squences vido de longue dure. Protection du contenu. Les donnes ne passant que par la mmoire tampon du lecteur Flash, la gestion des droits dauteur est plus facilement envisageable. Cot financier. La facturation correspond ce que les internautes visionnent. La panace nexiste pas en informatique. Aussi sduisant soit-il, le vrai flux continu a aussi des inconvnients: Impossibilit dune utilisation hors ligne. Le vrai flux continu est par dfinition une technologie rseau. Accessibilit. Par dfaut, le contenu est dlivr via le port 1935, donc susceptible dtre bloqu par les pare-feu ou les proxies. Cot financier. La ncessit soit de lacquisition dune licence, soit dun hbergement spcifique, a un cot dissuasif pour le particulier. Cette solution est de fait rserve de grosses entreprises ou institutions dotes de moyens consquents. La diffusion de vido FLV en ux continu est apparue avec la version 6 du lecteur Flash, le tlchargement progressif de vido FLV avec la version 7. Concernant la protection du contenu, pour linstant la technologie Flash Media Rights Management Server (FMRMS) ne sapplique quaux applications AIR et aucune version du lecteur Flash noffre doutil de
Vido
431
protection des droits dauteur, ou selon la formulation anglo-saxonne, de gestion numrique des droits (Digital Rights Management, DRM). Mentionnons brivement le cas particulier de la vido pour appareil portable (assistant numrique personnel, tlphone portable). Dans les paramtres de publication, vous devez cibler le lecteur Flash Lite et, bien sr, avoir ralis lanimation dans cette optique. Pour conclure, rappelons une question importante concernant la mise en uvre de la vido, mme si la rponse cette question est hors de la porte de ce livre, puisque ncessitant ventuellement de faire appel lapplication XML SMIL (Synchronized Multimedia Integration Language). Jusquici nous avons considr un dbit de donnes cible unique. Pourquoi ne pas envisager de multiples dbits de donnes cible et encoder une version de la vido pour chacun? la relecture de lanimation, chaque internaute pourra ainsi obtenir la meilleure version que lui permet le dbit de donnes effectif de sa connexion. La solution la plus simple laisse linternaute le soin de choisir lui-mme la version la plus adapte. La solution la plus sophistique cest l que SMIL intervient sert automatiquement linternaute la version la plus adapte, aprs avoir valu les performances de sa connexion au serveur.
Vrai flux continu. Diffusion via un protocole RTSP ou RTMP partir dun serveur ddi (technologies Flash Media Server ou Flash Video Streaming), gnralement sur le port 1935. Flux continu simul. Diffusion via un protocole HTTP partir dun serveur web, gnralement sur le port 80. Dit aussi tlchargement progressif. Dans Flash, le son En continu est de ce type.
Notions cls
Hbergement pour du flux continu

Pour la mise en uvre du vrai flux continu, vous tes nouveau face deux options. La premire consiste faire hberger vos vidos sur un serveur Flash Media. Afin de la rendre accessible un plus grand nombre, la technologie Flash Media Server a t scinde en deux. Avec Flash Media Streaming Server, vous ne trouvez que les fonctionnalits de service de vido sur la Toile. Dans Flash Media Interactive Server, aux premires sajoutent les fonctionnalits lies linteractivit, comme par exemple le chat. Si une solution Flash Media est coteuse pour de grosses quantits, elle reste abordable pour de petites. Lassistant dimportation vido vous propose un lien En savoir plus sur Flash Media Server (voir Figure68.1). Lautre option de mise en uvre du vrai flux continu est le Flash Video Streaming Service (FVSS) propos par divers Content Delivery Networks (CDN). Lassistant dimportation vido vous propose un lien En savoir plus sur le service Flash Video Streaming (voir
432
Flash CS5
Figure68.1), o vous trouverez notamment dautres liens vers des socits, proposant des plates-formes CDN, avec lesquelles Adobe a instaur des partenariats: Akamai, Level (3) Communications, Limelight Networks. Faisons le point sur les solutions dhbergement de vos vidos: Serveur web (personnel ou hberg). Solution retenir si votre site Flash nutilise que quelques vidos et quaucune nexcde la taille limite du cache du navigateur (entre 30 et 50 Mo). Serveur Flash Media (hberg). Solution retenir pour des vidos dont la dure dpasse les dix minutes. Serveur de Flash Video Streaming Service (FVSS) dun CDN. Solution retenir pour des sites devant recevoir de grosses quantits de requtes et/ou devant garantir la meilleure protection du contenu.
Flux continu en direct partir de la webcam

Le lecteur Flash intgrant lencodeur vido Sorenson Spark et deux codecs audio ddi la parole (Nellymoser Speech et Speex), vous avez tout ce quil faut pour compresser la vido en direct. Si le codec Sorenson Spark ne rpond pas vos exigences, vous pouvez vous tourner vers Adobe Flash Media Live Encoder 3 (www.adobe.com/products/flashmediaserver/flashmediaencoder/). Cette application Flash Media Server est gratuite. Elle compresse la vido en direct en VP6 ou en AVC/H.264. Une application Flash Media Server peut ensuite redistribuer le flux capt diffrents internautes, voire lenregistrer pour une lecture en diffr. Les lments indispensables sont la publication pour une version au moins 6 du lecteur Flash, Flash Media Server en version au moins 2, une connexion dont le dbit remontant est de 128, voire 384Kb/s, une webcam FireWire ou USB et un micro USB ou Bluetooth. Il faudra deux animations Flash. La premire, dite animation ditrice, enverra le flux audio et vido au serveur Flash Media, tandis que la seconde, dite animation dabonn, se connectera lapplication sur serveur Flash Media pour rcuprer le flux. Celui-ci tant ncessairement cod en dbit constant de donnes (CBR), il faut le choisir compatible avec la connexion de tous les internautes cibls, ou bien publier plusieurs flux, ce qui implique davoir plusieurs webcams. Bien sr, la mise en uvre de telles applications est laffaire dun dveloppeur spcialis dans ces technologies, mais il aurait t dommage de ne pas les mentionner lapprenti ralisateur que vous tes.
Vido
433
Importer une vido courte dans lanimation
Nous avons vu au Chapitre 8 quincorporer du son au fichier Flash ntait srieusement envisageable que pour des sons brefs. Ce principe prvaut galement pour la vido, plus forte raison quil sagit dun mdia plus lourd que le son (voir section Vido incorpore versus vido lie, Fiche 66). Si la vido incorporer est dans lun des deux formats natifs de vido Flash (FLV ou F4V), vous pouvez utiliser lune des deux commandes classiques dimportation: Fichier> Importer> Importer dans la bibliothque, Fichier> Importer> Importer sur la scne. Nanmoins, pour la vido il existe une commande ddie: Fichier> Importer> Importer une vido. Ceci ouvre lassistant dimportation vido, dont le premier cran est reproduit Figure67.1. Un bouton Lancer Adobe Media Encoder vous permet dencoder votre vido (voir Fiche65), si ce nest pas dj fait. Aprs avoir dsign le fichier vido en cliquant sur le bouton Parcourir, cochez loption qui devrait sintituler Incorporer le fichier FLV au SWF et le relire dans le scnario, puis passez lcran suivant.
Fiche 67
Figure67.1
Option dincorporation au premier cran de lassistant dimportation vido.
Le second cran, reproduit la Figure67.2, contient quelques options dincorporation.
434
Figure67.2
Le second cran de lassistant dimportation vido: options dincorporation.
Flash CS5
Essentiellement, il sagit de dcider sous quelle forme votre vido sera intgre dans le scnario de lanimation. Le menu droulant devrait donc sintituler Sous la forme de. Les trois options possibles sont: Vido incorpore. Aprs importation, la vido aura la forme dun pseudo-symbole de la bibliothque. Celui-ci pourra alors tre instanci dans le scnario et synchronis avec le reste de lanimation. Dans ce cas, la vido est contrle par le scnario principal de lanimation. Elle peut tre cible par le code ActionScript. Symbole graphique. Cette option prsente peu dintrt. La vido ne peut tre cible par le code ActionScript. Symbole clip danimation. Avec cette option, la vido est encapsule dans un clip danimation et cest lui qui sera instanci dans le scnario. Cela signifie que la vido fera lobjet dun scnario spar. Elle se comportera donc un peu comme un symbole multiimages (graphique ou clip danimation, voir Fiche 36). Encapsuler votre vido dans un symbole clip danimation vous permet ensuite de lui appliquer toutes sortes deffets, par exemple un fondu par interpolation de mouvement (voir Fiche 27). Lorsque vous essayez dappliquer une interpolation de mouvement une vido, une bote de dialogue vous demande confirmation pour lencapsulation dans un symbole clip danimation. Si vous prvoyez dappliquer une interpolation de mouvement votre vido, autant lencapsuler demble limportation. Si vous cochez Placer loccurrence sur la scne, vous aurez lquivalent de la commande Importer sur la scne; sinon, ce sera lquivalent de la commande Importer dans la biblio-
Vido
435
thque. Dans le cas o vous demandez linstanciation automatique de la vido, si vous dcochez loption tendre le scnario si ncessaire, Flash vous demandera ensuite confirmation dans une bote de dialogue pour crer dans le scnario le nombre dimages ncessaire la lecture de la vido. Cochez loption pour viter cette demande de confirmation. Enfin, il semblerait que loption Inclure laudio ne fonctionne pas et que laudio soit systmatiquement import. Le troisime et dernier cran de lassistant dimportation vido fait une synthse de vos choix. La Figure67.3 montre la bibliothque, le scnario et la scne dune animation contenant de la vido incorpore (elle ne contient mme que cela).
Figure67.3
La bibliothque, le scnario et la scne dune animation contenant de la vido incorpore.
Remarquez dans la bibliothque licne de camra du pseudo-symbole vido. La vido a t incorpore sans encapsulation dans un symbole clip danimation (il ny a en effet rien dautre que le pseudo-symbole vido dans la bibliothque). Dans le scnario, une plage a t cre (automatiquement: tendre le scnario si ncessaire) de longueur correspondant
436
Flash CS5
la dure de la vido. Le nombre dimages de cette plage suprieur 60, autant que la Figure67.3 permet den juger; en fait gal 305 (voir Figure67.4) est fonction de la cadence de lanimation. Dans cet exemple, cette dernire vaut 18I/S, ce qui laisse penser que le fichier butineur.flv a effectivement t encod avec un dbit dimages de 18I/S.
Figure67.4
Les proprits dun pseudosymbole vido.
Lorsque vous testez dans lenvironnement de ralisation une animation comportant une vido incorpore sonorise, il est normal de ne pas entendre sa bande son. Pour lentendre, il faut tester via la commande Contrle > Tester lanimation. Une animation comportant une vido incorpore est lexemple type dune animation pour laquelle le testeur de bande passante simpose (voir section Simuler le chargement de lanimation, Fiche 82). Sur la scne, vous pouvez redimensionner, pivoter, incliner loccurrence de la vido grce loutil Transformation libre. Loccurrence de la vido peut aussi faire lobjet dune interpolation de mouvement, sous rserve dencapsulation dans un clip danimation. Ne perdez pas de vue quune vido sa taille dorigine, non pivote, non incline, non interpole consomme dj pas mal de ressources du processeur. Lui appliquer une transformation ou une interpolation risque donc de vous coter cher, outre le fait que cela peut trs facilement faire gadget. Si la transformation ou linterpolation est motive, faites-la au moins sur une version sous-chantillonne la fois dans lespace (image plus petite) et dans le temps (dbit dimages rduit). Si vous souhaiter diter la vido, vous devrez le faire dans un diteur vido externe. La modification faite, encodez le rsultat en FLV ou en F4V, en crasant sur votre disque dur lancien fichier avec la nouvelle. Il ne vous reste ensuite plus qu mettre jour via le bouton Mettre jour des proprits du pseudo-symbole vido. Lincorporation de vido dans Flash fait lobjet de deux limitations: dune part, la synchronisation du son nest garantie que si la vido ne dure pas plus de deux minutes; dautre part, vous navez droit qu 16000 images maximum pour votre plage vido. Outre les avantages et inconvnients dj mentionns la section prcdente, incorporer une vido dans Flash prsente un avantage au niveau de la ralisation: la synchronisation peut se faire sans ActionScript, dans le scnario, puisque chaque image de la vido correspond une image du scnario. Concernant les inconvnients, du point de vue de la ralisation, il y
Vido
437
en a deux: dune part, test et publication sont plus longs du fait de la lourdeur des donnes vido; dautre part, vous tes contraint daccorder cadence de lanimation et dbit dimages de la vido (voir Figure65.11), dfaut de quoi cette dernire ne sera pas lue son dbit dorigine.
Fiche 68
Lire une vido externe dans lanimation

Au risque de nous rpter, lire une vido externe dans une animation cest en premier lieu prserver la taille du fichier SWF publi. La procdure de liaison dune vido lanimation se fait via lassistant dimportation vido (voir fiche prcdente). Dans lcran daccueil, aprs avoir slectionn le fichier vido via le bouton Parcourir, il suffit de cocher loption Charger la vido externe avec un composant de lecture, comme le montre la Figure68.1. Lcran suivant de la procdure, reproduit Figure68.2, est ddi lhabillage du composant de lecture vido FLVPlayback. Le terme habillage dsigne la fois lopration (en anglais skinning) et son rsultat (skin, traduit dans Flash par enveloppe). Vous pouvez choisir dans le menu droulant lun des habillages prdfinis, ou bien spcifier lURL du fichier SWF qui contient lhabillage que vous souhaitez utiliser. Colorez ventuellement cet habillage via la puce de couleur.
Figure68.1
Option de lecture dun fichier externe via un composant au premier cran de lassistant dimportation vido.
438
Figure68.2
Le second cran de lassistant dimportation vido: spcification de lhabillage du composant de lecture vido (ActionScript 3.0).
Flash CS5
Le terme dhabillage est trompeur en ce quil ne sagit pas seulement dapparence, mais aussi de fonctionnalits du lecteur vido. La Figure 67.3 montre le menu des 44 fichiers SWF dhabillages prdfinis dans lenvironnement de ralisation pour le composant ActionScript3.0 (10 ont t rajouts dans la version CS5; leur intitul commence par Minima). Les noms de fichier sont longs, parce que descriptifs. Les habillages se rpartissent en deux catgories: pour les SkinOver, lhabillage se place par dessus limage vido, tandis que pour les SkinUnder, lhabillage se place sous elle. All dans le nom signifie les boutons lecture/ pause (Play), stop (Stop), recherche avant, recherche arrire (Seek), sonorisation (Mute), plein cran (Full), affichage des sous-titrages (Caption), barre de dfilement, glissire de volume (Vol). Certains habillages sont dcrits par soustraction All (No), tandis que dautres sont dcrits par numration partir des termes anglais donns ci-dessus entre parenthses. Vous auriez raison de trouver cela compliqu: slectionnez un habillage dans le menu et faites-vous en une ide de visu dans la zone daperu. Loption Aucun est utile si vous souhaitez que la vido dfile sans aucune possibilit dinteraction. La commande en bas du menu est une autre faon de spcifier lURL dun habillage personnalis. Prenez garde cibler le bon fichier SWF avec lURL que vous saisissez. Si ce nest pas le cas, voire si le fichier cibl nest pas dun type compatible, lassistant dimportation vous laissera faire et vous ne vous rendrez compte de lerreur quau moment de tester. Aprs la synthse de vos options dans un troisime et dernier cran, lassistant dimportation vido ajoute le composant FLVPlayback la bibliothque et linstancie sur la scne et dans le scnario, comme le montre la Figure68.4. Remarquez que dans le scnario, la plage ne contient quune seule image (comparez avec la Figure67.3).
Vido
439
Figure68.3
Les 34 habillages possibles du composant de lecture vido.
Si vous souhaitez diter la vido, vous devrez le faire dans un diteur vido externe. La modification faite, encodez le rsultat en FLV ou en F4V, en donnant votre fichier un nouveau nom. Modifiez ensuite la valeur du paramtre source du composant de lecture vido (voir la fiche suivante). Il ne vous reste ensuite plus qu supprimer du disque dur le fichier de lancienne version de la vido. Outre les avantages et inconvnients dj mentionns la section prcdente, lier une vido externe votre animation Flash prsente deuxavantages: dune part, test et publication ne sont pas alourdis, puisque la vido nexiste dans le fichier Flash que sous forme de rfrence; dautre part, cadence de lanimation et dbit dimages de la vido (voir Figure65.11) nont pas tre gaux. Au niveau de la ralisation, linconvnient majeur que prsente la liaison dune vido externe votre animation Flash est que la synchronisation ne peut se faire que par ActionScript, via la dfinition pralable de tops de dpart lors de lencodage (voir section Utiliser Media Encoder, Fiche 65).
440
Figure68.4
La bibliothque, le scnario et la scne dune animation contenant de la vido externe lue via le composant ddi.
Flash CS5
Fiche 69
Contrler une vido

Les composants ne seront traits quau Chapitre 10. Nous avons nanmoins prfr examiner le composant de lecture vido dans le prsent chapitre. Le composant de lecture vido FLVPlayback se dcline en deux moutures selon la version du langage ActionScript que vous ciblez. Les composants utiliss dans un fichier Flash (ActionScript 2.0) sont compatibles avec les versions 6, 7 ou 8 du lecteur Flash. Le composant FLVPlayback utilis dans un fichier Flash (ActionScript 3.0) demande une version au moins 9 du lecteur Flash.
Le composant FLVPlayback ActionScript 3.0

Le composant ActionScript 3.0 FLVPlayback permet de lire indiffremment des fichiers vido (externes) FLV ou H.264. Il est fonctionnel sans que vous ayez crire la moindre ligne dActionScript. Il a plus de paramtres que son homologue ActionScript 2.0, et par rapport lui, prsente lavantage de permettre la lecture vido plein cran.
Vido
441
Dans une animation ciblant ActionScript 3.0, ouvrez la bibliothque de composants via Fentre> Composants. Les composants se rpartissent en trois catgories: Flex, User Interface et Video. La Figure69.1 montre le contenu de cette dernire.
Figure69.1
La partie Video de la bibliothque de composants ActionScript 3.0.
la fiche prcdente, linstanciation du composant FLVPlayback tait prise en charge par lassistant dimportation vido. Rien ne vous empche de la raliser vous-mme. Glissezdposez lun des composants FLVPlayback ou FLVPlayback 2.5 depuis la bibliothque de composants sur la scne pour y placer une occurrence. Dans le scnario, linstanciation se fait limage courante du calque slectionn. Le composant FLVPlayback apparat comme symbole dans la bibliothque. Vous pouvez aussi glisser-dposer le composant FLVPlayback dans la bibliothque et ne linstancier sur la scne et dans le scnario que dans un second temps. Il sagit ensuite de paramtrer votre occurrence du composant FLVPlayback. Pour cela, cette dernire tant slectionne, accdez au sous-panneau Paramtres de composant du panneau Proprits reproduit Figure69.2. Dans la version CS5, ce sous-panneau remplace longlet Paramtres de linspecteur de composant. Les paramtres dune occurrence de composant FLVPlayback ActionScript 3.0 sont les suivants: align. Dans le cas o loccurrence du composant est plus grande que la taille dimage de la vido et si scaleMode a une valeur diffrente de noScale, ce paramtre vous permet de spcifier un alignement. La valeur par dfaut est center. Les autres valeurs possibles sont top, left, bottom, right, topLeft, topRight, bottomLeft et bottom-Right.
442
Flash CS5
autoPlay. Paramtre boolen. Lorsque sa valeur est false (faux), la lecture est en pause sur la premire image. Lorsque sa valeur est true (vrai), la lecture dmarre automatiquement.
Figure69.2
Le sous-panneau Paramtres de composant du panneau Proprits, lorsquune occurrence de FLVPlayback est slectionne.
cuePoints. Chane contenant les tops de dpart exploits par les boutons Recherche avant et Recherche arrire de certains habillages. Au double-clic, une bote de dialogue vous permet au besoin de les diter. isLive. Paramtre boolen. Lorsque sa valeur est true (vrai), il sagit dun flux vido en direct. preview. Au clic sur licne de crayon, la bote de dialogue reproduite Figure69.3 vous permet de slectionner le vidogramme qui servira daperu (dans lenvironnement de ralisation uniquement).
Figure69.3
La bote de dialogue de slection dune image daperu.
Vido
443
scaleMode. Avec la valeur par dfaut maintainAspectRatio, le rapport daspect est prserv, ce qui signifie que limage vido conserve ses proportions initiales. Avec la valeur noScale, la vido ne subit aucun redimensionnement. Si la taille de loccurrence du composant est plus petite que la taille dimage de la vido, la taille de loccurrence sadapte cette dernire. Avec la valeur exactFit, la taille dimage de la vido sadapte celle de loccurrence du composant, mme au prix dune distorsion. skin. Au clic sur licne de crayon, la bote de dialogue reproduite Figure 69.4 souvre, qui vous permet de slectionner lun des 44 habillages standard. Elle est tout fait semblable au second cran de lassistant dimportation dune vido externe (voir Figure68.2).
Figure69.4
La bote de dialogue de choix dun habillage.
skinAutoHide. Paramtre boolen. Avec la valeur par dfaut false, le contrleur est toujours visible. Avec la valeur true, il est invisible et ne devient visible quau survol de loccurrence du composant. skinBackgroundAlpha. Valeur dcimale entre 0,0 pour totalement transparent et 1,0 pour totalement opaque. skinBackgroundColor. Slectionnez une couleur darrire-plan via la puce de couleur. source. Au clic sur licne de crayon, la bote de dialogue reproduite Figure 69.5 souvre. Spcifiez-y le chemin daccs relatif de la vido externe lire.
Figure69.5
La bote de dialogue de saisie de la valeur du paramtre source.
444
Flash CS5
volume. Valeur dcimale entre 0,0 pour muet et 1,0 pour plein volume. Vous pouvez redimensionner, pivoter, et/ou incliner loccurrence du composant laide de loutil Transformation libre. Vous pouvez galement appliquer une interpolation loccurrence, puisquen essence il sagit dune occurrence de symbole clip danimation. Que vous puissiez le faire nimplique pas que vous deviez le faire: voir les rserves faites ce sujet la Fiche 67. La bibliothque de composants ActionScript 3.0 contient galement le composant FLVPlayback Captioning, ddi au sous-titrage, qui sappuie sur Timed Text, une application XML standardise par le W3C.
Les composants ActionScript 2.0

Comme son homologue ActionScript 3.0, le composant ActionScript 2.0 FLVPlayback permet de lire indiffremment des fichiers vido (externes) FLV ou H.264. Il est fonctionnel sans que vous ayez crire la moindre ligne dActionScript. Il ne permet pas la lecture vido plein cran. Si la bibliothque de composants ActionScript 2.0 se prsente de faon lgrement diffrente de son homologue ActionScript 3.0 (comparez les Figures 69.1 et 69.6), la procdure pour instancier une occurrence de composant FLVPlayback est rigoureusement la mme. On la paramtre de mme dans le sous-panneau Paramtres de composant du panneau Proprits, visible droite de la Figure69.6.
Figure69.6
La partie Vido de la bibliothque de composants ActionScript 2.0, ainsi que longlet Paramtres de linspecteur de composants, lorsquune occurrence de FLVPlayback est slectionne.
Vido
445
Les paramtres dune occurrence de composant FLVPlayback ActionScript 2.0 sont les suivants: autoPlay. Paramtre commun avec la version ActionScript 3.0 (voir section prcdente). autoRewind. Paramtre boolen. Lorsque la valeur est true (valeur par dfaut), il y a retour la premire image lorsque la dernire est atteinte. autoSize. Paramtre qui fonctionne avec maintainAspectRatio, avec lequel il constitue lquivalent de scaleMode dans la version ActionScript 3.0 (voir section prcdente). bufferTime. La valeur de ce paramtre est le nombre de secondes mettre en mmoire tampon avant de lancer ou reprendre la lecture dun tlchargement progressif ou dun flux continu en temps rel. Elle vaut 0.1 par dfaut. Vous pouvez laugmenter de manire significative pour du flux continu en temps rel dbit lev, dlivr sur une connexion dbit plus modeste. contentPath. Paramtre correspondant source dans la version ActionScript 3.0 (voir section prcdente). cuePoints. Paramtre commun avec la version ActionScript 3.0 (voir section prcdente). isLive. Paramtre boolen. Lorsque la valeur est true, il sagit dun flux continu en direct et la barre de dfilement est dsactive. maintainAspectRatio. Paramtre qui fonctionne avec autoSize, avec lequel il constitue lquivalent de scaleMode dans la version ActionScript 3.0 (voir section prcdente). skin. Lhabillage est choisir parmi 32 possibilits. Lorsque le nom dun habillage contient All, celui-ci offre les boutons de lecture/pause, de stop, de recherche avant, de recherche arrire, de sonorisation, une barre de dfilement et une glissire de volume. skinAutoHide. Paramtre commun avec la version ActionScript 3.0 (voir ci-dessus). totalTime. Si vous spcifiez une valeur de dure, elle crase celle provenant des mtadonnes. version_1_0_2. Lorsque ce paramtre apparat, il indique que vous utilisez la version rvise du composant. volume. Paramtre similaire son homonyme de la version ActionScript 3.0, mais dont la valeur est entire et comprise entre 0 et 100.
Contrler sans composant

Nous avons vu la Fiche 67 quune vido incorpore lanimation peut tre encapsule dans un symbole clip danimation. Lintrt est celui, classique, de limbrication (voir Fiche 36) : la vido ayant ainsi son scnario propre, il devient possible de larrter sans arrter le reste de lanimation.
446
Flash CS5
Dans le scnario principal, crez un calqueque vous nommerez par exemple btnVido et instanciez-y des boutons pause, lire et rembobiner (le plus simple tant de les choisir dans la bibliothque commune Boutons, qui propose plusieurs versions de ce genre de boutons dots de licne standard). Il ne vous restera plus qu crire le gestionnaire dvnements onClick pour chacun de ces trois boutons (voir Chapitre 11). Le corps de ces trois gestionnaires dvnements ne contiendra quune seule instruction, soit respectivement pour les boutons pause, lire et rembobiner: <nomOccurrence-ClipVido>. stop();, <nom-OccurrenceClipVido>.play(); et <nomOccurrenceClipVido>. gotoAndPlay(1);.
Fiche 70
Incruster une vido dtoure

Parfois, vous souhaiterez incruster la vido dans votre animation Flash. Vous aurez par exemple interview une personne et vous voudrez restituer la vido de linterview de telle sorte quen chaque vidogramme, la silhouette de la personne soit dtoure et rendue sur un calque par dessus les autres calques de lanimation. Pour raliser cet effet, en amont de Flash il faut filmer la personne devant un fond bleu ou vert, aussi plat et aussi lisse que possible, sans ombres, clair uniformment et de manire ce quil y ait le moins possible de rflexion bleue ou verte sur le sujet. Ensuite, vous devrez supprimer le fond dans un diteur vido (Premiere, After Effects, Final Cut Pro). Tous les bons logiciels de vido vous permettent de dessiner un masque vectoriel grossier dans lequel le personnage film sinscrive pour tous les vidogrammes. Une commande de chroma key permet ensuite de raliser le dtourage de chaque vidogramme. Le dtourage de la vido fait, il faudra lexporter en fichier FLV en utilisant le codec On2VP6 (voir section Choisir un codec vido, Fiche 65) et en demandant lencodage du canal alpha. Cette tape peut se faire soit dans votre diteur vido, soit dans Media Encoder CS5. Dans ce dernier cas, la rubrique Rglages vido de base de longlet Vido des Rglages dexportation (voir section Utiliser Media Encoder, Fiche 65), vous devez cocher Coder la couche alpha, comme le montre la Figure70.1. De plus, puisque le canal alpha va consommer une partie du dbit de donnes (voir section Comprendre le dbit de donnes, Fiche 65), il faut utiliser un prol de qualit moyenne ou leve pour conserver une qualit dimage pour les zones non masques du clip vido. Pour lintgration de la squence vido votre animation, procdez comme pour une vido non dtoure (voir les Fiches 67 69). Ce genre de squence est souvent lue automatiquement. Dans ce cas, vous choisirez Aucun dans le menu des habillages du composant FLVPlayback (voir Figure68.3).
Vido
447
Figure70.1
Rglages dexportation dune vido dtoure dans Media Encoder CS5.
10
Fiche 71
Prfabrication
Toute application Internet enrichie, quelle quelle soit, contient des lments dinterface graphique standard : menus droulants, cases cocher, barre de progression, etc. Dans Flash, ces lments gnriques sont fournis prfabriqus sous la forme de composants, qui sont des clips danimation paramtrables.
Comprendre les composants

Quest-ce quun composant ?
Si la programmation vous rebute ou si ActionScript est nouveau pour vous, les composants peuvent apporter des rponses prfabriques des problmes dinterface utilisateur courants: champs de texte, menus droulants, boutons, cases cocher, barres de dfilement, etc. Lun des avantages utiliser ces composants est davoir une cohrence graphique entre les diffrents lments de votre interface. Les composants sont en fait des symboles clips danimation (voir fiche 36) prfabriqus. Ils sont prts lemploi, vous fournissant non seulement du graphisme, mais aussi les scripts qui les rendent fonctionnels. Les composants sont enfin paramtrables, tant au niveau de leur apparence, que de leurs fonctionnalits. Les composants ont t crs par des dveloppeurs ActionScript confirms. Avant dtre intgrs la bibliothque de composants, ils ont t abondamment mis lpreuve. Utiliser un composant vous dispense de rinventer la roue, cest--dire de programmer et de tester votre propre version dun lment dinterface standard. Vous avez de plus une garantie de robustesse. En interne, les composants se prsentent sous forme dActionScript compil (format SWC). Entendons-nous bien. Utiliser un composant ne vous dispense pas totalement dcrire du code ActionScript. Imaginons que vous ayez mis en place quelques cases cocher sous forme doccurrences du composant CheckBox. Sans ActionScript supplmentaire, vos cases cocher sont fonctionnelles du point de vue de linterface. Autrement dit, vous pouvez les cocher et les dcocher lorsque vous excutez lanimation. Par contre, en ltat, les cocher ou les dcocher naura aucun autre effet que la mise jour graphique (apparition ou disparition de la coche). Tout ce quun choix de linternaute, via une occurrence de composant, doit dclencher, reste la charge de votre programmation ActionScript. Autrement dit, il vous reste crire un couteur dvnements (voir Fiche 80). Ainsi, dans le cas du jeu de cases cocher, vous devrez ajouter au script de limage laquelle il apparat, autant dcouteurs dvnements MouseEvent.CLICK quil y a de cases cocher, chaque couteur tant construit sur le modle suivant(voir section Les vnements de clic, Fiche 80) :
450
Flash CS5
function case<numeroCase>Cochee( evt: MouseEvent) { // feed-back aprs que linternaute ait coch la case <numeroCase> } <cheminCibleOccurCase<numeroCase>>.addEventListener( MouseEvent.CLICK, case<numeroCase>Cochee);
Il existe des composants pour ActionScript 2.0, comme pour ActionScript 3.0. La bibliothque nest pas tout fait la mme dans un cas et dans lautre. Et mme pour des composants homonymes, selon la version dActionScript, le jeu de paramtres peut diffrer. Nous verrons au Chapitre 11, quune mme animation Flash ne peut mlanger lActionScript 2.0 avec lActionScript 3.0 et que vous devez choisir la version du langage lors de la cration dun nouveau document Flash (voir Fiche 19), version que vous ciblerez lors de la publication (voir Chapitre 12). Pour tre cohrent avec le conseil de choisir demble lAction-Script 3.0 (conseil argument la section Historique dActionScript, Fiche 77), dans ce chapitre nous ne traiterons que des composants ActionScript 3.0, plus lgers et plus efficaces. Votre fichier source devra non seulement tre publi pour ActionScript 3.0, mais le chier SWF produit devra tre relu par une version au moins 9.0.28.0 du lecteur Flash. Vous pouvez tlcharger des composants labors par dautres sur le site Adobe Exchange, ladresse www.adobe.com/exchange, galement accessible via Aide > Flash Exchange. Slectionnez Flash, puis faites une recherche sur le mot component. Par ailleurs, depuis la versionCS4, vous avez la possibilit dimporter des composants dvelopps sous Flex. Le plus souvent, vous tlchargerez un fichier SWC (parfois un fichier FLA). Placez ce fichier dans le dossier <disque dur>\Applications\Adobe FlashCS5\fr_FR\Configuration\ Components de votre Mac; sous Windows, dans le dossier C:\Program Files\Adobe\Adobe FlashCS5\fr_FR \Configuration\Components.
Instancier un composant
La partie gauche de la Figure 71.1 reproduit le panneau Composants tel quil saffiche lorsque vous demandez Fentre > Composants dans un document Flash (ActionScript 3.0). Les composants y sont regroups en trois dossiers. Le composant de lecture vido FLVPlayback du dossier Video a t trait la section Le composant FLVPlayback ActionScript 3.0, Fiche 69. Lutilisation des autres composants du dossier Video demande un certain niveau en ActionScript (FLVPlaybackCaptioning sert pour les lgendes et tous les autres sont les lments constituants du lecteur vido FLVPlayback). Dans ce chapitre, nous ne traiterons que les composants dinterface utilisateur, regroups dans le dossier User Interface.
Raccourci
Ctrl+F7 (Mac) ou Ctrl+F7 (Windows) ouvre le panneau Composants.
Avant de pouvoir instancier un composant sur la scne et dans le scnario, vous devez le glisser-dposer dans la bibliothque. La partie droite de la Figure 71.1 montre la bibliothque de lanimation aprs que le composant ComboBox y ait t gliss-dpos. Outre le symbole clip danimation sous-jacent au composant, un dossier Component Assets a t
Prfabrication
451
cr qui contient des ressources utilises par celui-ci. Parmi eux, on trouve notamment les habillages possibles des diffrents lments du composant (sous-dossiers dont le nom est celui dun composant suivi de Skins). Parfois un composant complexe fait appel dautres composants. Cest le cas ici: ComboBox utilise List et TextInput; ces deux composants ont donc aussi t ajouts la bibliothque.
Figure 71.1
Le panneau Composants (ActionScript 3.0) et la bibliothque aprs gliss-dpos du composant ComboBox.
Bien que votre composant ait une icne propre dans la bibliothque et non licne de symbole clip danimation, pour linstancier procder comme pour un clip danimation (voir section Crer des occurrences, Fiche 33). Si ltape prcdente, au lieu de glisser-dposer depuis le panneau Composants dans la bibliothque, vous aviez gliss-dpos sur la scne, vous auriez demble cr une occurrence sur scne. Comme pour nimporte quel symbole, vous tes, bien sr, libre dinstancier un composant autant de fois que ncessaire. Ceci est sans surcot important au niveau de la taille du fichier publi (voir section Avantages des symboles, Fiche 33). La cration dune premire occurrence de composant dans votre animation rajoute environ 20Ko la taille du fichier SWF final. Il y a l beaucoup dlments communs lensemble des composants, de sorte que la cration dautres occurrences de composant du mme ou dun autre rajoute moins la taille du fichier SWF. Si vous souhaitez modifier par programme les valeurs des paramtres du composant, noubliez pas de donner un nom loccurrence, comme vous le feriez pour nimporte quel lment manipuler par instructions ActionScript (voir Figure 77.1). Si vous ralisez un formulaire, il est peut-tre judicieux de ddier un calque chacun des composants qui le constituent. Les formulaires sont le principal moyen de collecter des informations saisies par lutilisateur. Dans un formulaire, les occurrences de composants
452
Flash CS5
sont organises en une liste circulaire, dite ordre de tabulation. un instant donn, lune des occurrences de composants est active, au sens o cest elle qui reoit les commandes, la saisie de linternaute (notion de focus, terme anglo-amricain non traduit). Lorsque linternaute appuie sur la touche tab, le focus passe loccurrence suivante dans la liste circulaire. Sil appuie sur la touche tab touche Maj enfonce, le focus passe loccurrence prcdente de la liste circulaire. Outre cette gestion du focus, les occurrences de composants dun formulaire ont en commun un style et un habillage.
Paramtrer le comportement dun composant

Si vous slectionnez une occurrence de composant sur la scne, le panneau Proprits vous donne accs dans son sous-panneau Paramtres de composants, aux noms et valeurs des paramtres grce auxquels vous pouvez agir sur les aspects fonctionnels de cette occurrence de composant. La Figure 71.2 montre laffichage de ce sous-panneau pour une occurrence de composant ComboBox.
Figure 71.2
Le sous-panneau Paramtres de composants lorsquune occurrence de ComboBox est slectionne sur la scne.
Raccourci
Maj+F7 ouvre le panneau Inspecteur de composants.
Avant la version CS5, les informations de ce sous-panneau se trouvaient dans longlet Paramtres de lInspecteur de composants (Fentre > Inspecteur de composants). Cet inspecteur a deux autres onglets. Longlet Liaisons concerne les liaisons ventuelles entre deux composants ou plus. Longlet Schma liste les proprits du composant qui peuvent faire lobjet dune liaison. Il ne sera pas plus question de ces onglets dans ce chapitre, car ils relvent daspects ncessitant un niveau de programmation ActionScript avanc.
Prfabrication
453
Dans les fiches suivantes, nous montrerons les paramtres des diffrents composants. Certains de ces paramtres reviennent dans nombre de composants, aussi en donnons-nous la signification ici: enabled. Paramtre valeur boolenne. Lorsquil vaut false, loccurrence de composant est dsactive, grise et non utilisable. label. La plupart des composants doivent avoir un intitul, afin que linternaute sache quoi ils servent. labelPlacement. Les quatre valeurs possibles pour la position de lintitul par rapport llment graphique sont right, left, top et bottom. selected. Paramtre valeur boolenne. Lorsquil vaut true, loption est slectionne par dfaut, avant tout choix de linternaute. value. la suite dun choix de linternaute via le composant, la valeur retourne au code ActionScript est par dfaut lintitul. Ce nest cependant pas toujours le cas, par exemple lorsque cette valeur est un code informatique sans signification pour linternaute, celui est plac dans value, mais le composant propose linternaute un intitul plus parlant. visible. Paramtre valeur boolenne. Lorsquil vaut false, loccurrence est invisible. Quel que soit votre paramtrage, pour voir vos composants fonctionner, vous devez publier le fichier SWF pour que celui-ci soit lu par le lecteur Flash. Les composants ne sont pas fonctionnels dans lenvironnement de ralisation.
Paramtrer lapparence dun composant

Double-cliquer une occurrence de composant vous fait passer en mode ddition de symbole (voir section dition de symbole, Fiche 33). Comme le montre la Figure 71.3 pour un composant ComboBox, les diffrents tats du composant sont affichs simultanment. Double-cliquez nouveau sur lun des tats pour lditer. La Figure 71.4 montre ltat au survol (overSkin) par dfaut dun composant ComboBox. Si vous modifiez le graphisme, soyez conscient du fait que vous perdez lavantage de la cohrence graphique entre les diffrents composants, sauf faire le mme type de modification sur chacun deux. Vous pouvez nanmoins faire des essais sans crainte, puisque vous ne modifiez que le composant qui se trouve dans la bibliothque. tout moment, vous pouvez revenir lapparence par dfaut en crasant la version modifie du composant par celle glisse depuis le panneau Composants. Notez que vous ne pouvez pas modifier ainsi le texte, qui ne peut ltre que par programmation ActionScript.
454
Flash CS5
Figure 71.3
Un composant ComboBox en mode ddition de symbole.
Figure 71.4
dition de ltat au survol dun composant ComboBox.
Comme pour nimporte quelle occurrence, en la slectionnant, vous pouvez modifier son apparence dans le panneau Proprits. Modifiez X, Y, pour changer son emplacement, W,H pour la redimensionner, Effet de couleur (Alpha) pour jouer sur son opacit (voir Fiche37). Vous pouvez mme lui appliquer un mode de fusion (voir Fiche 57). Concernant le redimensionnement, vous pouvez galement utiliser les poignes du rectangle englobant de loutil Transformation libre. Cependant, tout nest pas toujours possible. Si les composants TextArea, Label, List, NumericStepper, Button et ColorPicker peuvent tre redimensionns dans les deux dimensions, pour TextInput, CheckBox, RadioButton, ComboBox et Slider, seul le redimensionnement horizontal est possible ou a un sens. Enfin, pour TileList et ScrollPane, le redimensionnement est impossible ou na aucun sens. La taille du texte est insensible au redimensionnement. Par ailleurs, linclinaison et la rotation feront disparatre le texte, moins que vous nincorporiez la police de caractres utilise (voir section Incorporation de polices, Fiche 44). Pour formater le texte dun composant, vous navez pas dautre choix que dcrire un peu de code ActionScript sur le modle suivant:
var formatageTexte: TextFormat = new TextFormat(); formatageTexte.font = "Gill Sans"; formatageTexte.bold = true;
Prfabrication
455
formatageTexte.size = 14; <cheminCibleOccurrenceDeComposant>.setStyle( "textFormat", formatageTexte);
Pour incorporer la police de caractres utilise, demandez Nouvelle police dans le menu des options de la bibliothque, puis dans la bote de dialogue Proprits de la police (voir Figure44.5), donnez un nom, puis choisissez le style et la taille. Dans les proprits avances, catgorie Liaison (voir Figure33.7), cochez Exporter pour ActionScript, puis relevez le nom attribu par Flash au champ Classe (appelons-le <NomDeLaClasseDePolice>). Vous pourrez ensuite instancier par programme le symbole de police selon le modle suivant:
var laPoliceIncorporee: Font = new <NomDeLaClasseDePolice>(); formatageTexte.font = laPoliceIncorporee.fontName <cheminCibleOccurrenceDeComposant>.setStyle( "embedFonts", true);
Pour vrifier que lincorporation est effective, il vous suffit dappliquer une rotation ou une inclinaison. Si cest bel et bien le cas, le texte ne doit plus disparatre. Vous pouvez galement appliquer la mme police chaque occurrence de composant User Interface de votre animation grce la mthode setStyle() de la classe StyleManager, en suivant le modle de code suivant:
StyleManager.setStyle( "embedFonts", true); StyleManager.setStyle( "fontFamily", "Times New Roman");
Dans cette classe, une mthode setComponentStyle() permet galement dappliquer le mme style toutes les instances dune classe de composants donne.
Linterface de programmation dun composant

UIComponent
Les dveloppeurs confirms peuvent crer leurs propres composants. La classe fl.core. contient les proprits, mthodes et vnements hrits par tous les composants, donc communs tous (voir section Lapproche par objets, Fiche 77 pour une dfinition des notions de classe, proprit, mthode, vnement, hritage et paquetage). La Figure71.5 montre le paquetage fl.controls dvelopp dans la bote outils des actions. On y trouve les classes correspondant la plupart des composants prsents dans ce chapitre. Pour en savoir plus sur linterface de programmation (Application Programming Interface, API) dun composant, dans la bote outils des actions (voir section Aide lcriture dinstructions ActionScript, Fiche 78), dveloppez lentre correspondant sa classe, puis lune des entre intitule Proprits, Mthodes ou vnements. Slectionnez alors lun des mots-cls, puis dans le menu contextuel, demandez Afficher laide. Vous pouvez galement partir de laccueil de laide en ligne de Flash: slectionnez dans la section Rfrence Adobe, ActionScript3.0 et ses composants; puis dans la section ActionScript3.0, ActionScript3.0 Reference for the Adobe Flash Platform. La Figure 71.6 montre lentre RadioButton de laide en ligne ActionScript3.0.
456
Figure 71.5
Le paquetage
fl.controls
Flash CS5
dvelopp dans la bote outils des actions.
Figure 71.6
Lentre
RadioButton de
laide en ligne ActionScript3.0.
Connatre les proprits, mthodes et vnements de la classe associe un composant vous sera utile, lorsquayant acquis un certain niveau en programmation ActionScript 3.0, vous envisagerez de paramtrer des occurrences de composant lexcution.
Prfabrication
457
Fiche 72
Composants de texte
Figure 72.1
Une occurrence de chacun des trois composants Label, TextInput et TextArea.
Le composant TextInput
Une occurrence de composant TextInput fonctionne avec un champ de texte ActionScript. Elle ressemble compltement un contrle HTML standard de saisie de texte, comme le montre lexemple de la Figure 72.1. Comme lui, elle a cette apparence en lger renfoncement. Son principal autre intrt est la cohrence graphique avec les autres composants auxquels vous ferez appel dans la mme image. Ceci mis part, il est aussi simple de mettre en uvre un champ de texte de saisie standard (voir section Saisie de texte, Fiche 46). Ce dernier prendra moins de place dans le fichier SWF publi et vous pourrez plus facilement lhabiller dune manire personnelle. La Figure 72.2 montre les paramtres dune occurrence de composant TextInput :
Figure 72.2
Les paramtres dune occurrence de composant TextInput.
458
Flash CS5
displayAsPassword. Paramtre valeur boolenne. Lorsquil vaut true, une astrisque saffichera pour tout caractre tap. Ainsi linternaute pourra voir combien de caractres il a entr, mais non leurs valeurs effectives. Cest utile pour protger toute information condentielle (mot de passe utilisateur, numro de carte de crdit, etc.) du regard de toute personne ayant le moniteur de lordinateur dans son champ de vision. editable. Paramtre valeur boolenne. Lorsquil vaut true, linternaute peut en modifier le contenu. maxChars. Nombre qui limite la taille de la saisie. Une valeur 0 autorise linternaute saisir autant de caractres quil le veut. Pour le champ du code postal dune adresse franaise, on donnera la valeur 5 ce paramtre. restrict. Les rgles sont pratiquement les mmes que pour la proprit homonyme dun champ de texte dynamique (voir section Programmation minimum pour le texte dynamique, Fiche 46). La seule diffrence est que pour spcier un caractre barre oblique inverse dans la chane du paramtre, il ne faut utiliser que deux barres conscutives au lieu de quatre. text. Le contenu texte. Une occurrence de composant TextInput nest pas redimensionnable verticalement, puisque constitue dune seule ligne de texte. Par dfaut, Flash utilise pour les occurrences de composants TextInput et TextArea des polices de la machine (polices de priphrique), comme pour les champs de texte dynamique ou de saisie (voir section Polices de priphrique, Fiche 44).
Le composant TextArea
Une occurrence de composant TextArea fonctionne aussi avec un champ de texte ActionScript. Similaire une occurrence de composant TextInput, elle en diffre par le fait quelle peut contenir plusieurs lignes de texte comme le montre lexemple de la Figure 72.1. Au besoin, si le contenu est trop long pour la zone dfinie, loccurrence de composant sera dote dune barre de dlement intgre (composant UIScrollBar). Vous pouvez vous en servir non seulement pour la saisie, mais aussi tout simplement pour lafchage dun texte assez long. Dans ce cas, vous navez besoin daucun code ActionScript. La Figure 72.3 montre les paramtres dune occurrence de composant TextArea. Les paramtres editable, maxChars, restrict et text ont la mme signification que pour une occurrence de composant TextInput (voir section Le composant TextInput de cette fiche). Les paramtres spcifiques sont: condenseWhite. Paramtre valeur boolenne. Lorsque sa valeur est true, les blancs (espaces, retours chariot) sont supprims. htmlText. La zone de texte peut traiter du texte format en HTML si vous laffectez ce paramtre. Ceci vous permet dajouter au texte des hyperliens, de la couleur et des changements de style.
Prfabrication
459
horizontalScrollPolicy, verticalScrollPolicy. Les valeurs possibles pour ces paramtres sont on, off ou auto (valeur par dfaut). Avec la valeur auto, les barres de dlement horizontal et vertical napparaissent que si ncessaire. Avec la valeur on, la barre de dlement est toujours prsente, mme quand ce nest pas ncessaire. Avec la valeur off, elle napparat jamais. wordWrap. Par dfaut (valeur true), le retour la ligne est automatique pour les lignes de texte plus longues que la largeur de la zone de texte (voir Figure 42.3). Avec la valeur false, seuls les retours chariot explicites ou les sauts de page, ou en HTML les balises et font passer la ligne suivante, au risque de tronquer les lignes trop longues.
Figure 72.3
Les paramtres dune occurrence de composant TextArea.
Le composant Label
Une occurrence de composant Label est une simple ligne de texte, sans bordure, non ditable. La Figure 72.1 en montre un exemple. Les intituls dans les exemples des Figures73.1 et75.1 sont galement des occurrences de composant Label. Le contenu nest pas fig pour autant: il peut tre modifi lexcution. Ce contenu peut ventuellement tre format en HTML. Les paramtres condenseWhite, htmlText, text et wordWrap ont la mme signification que pour un composant y (voir section prcdente). Deux paramtres sont spcifiques au composant y, comme le montre la Figure 72.4:
460
Flash CS5
autoSize. Avec la valeur none, il ny a ni alignement, ni redimensionnement pour sadapter au texte. Avec la valeur left (respectivement right), les cts gauche et haut restent fixes (respectivement les cts droit et bas). Le redimensionnement agit sur les cts droit et bas (respectivement les cts gauche et haut). Avec la valeur center, le centre reste fixe. Le redimensionnement agit sur tous les cts. selectable. Paramtre valeur boolenne. Lorsquil vaut false, vous empchez linternaute de slectionner le texte de loccurrence du composant.
Figure 72.4
Les paramtres dune occurrence de composant Label.
Fiche 73
Composants doptions
Le composant CheckBox
Une occurrence de composant CheckBox est une case cocher carre. On lutilise pour rpondre par oui/non, vrai/faux des questions. Cest une bascule: chaque clic, elle passe dun tat lautre. Lorsque la case cocher a le focus, linternaute peut aussi utiliser la barre despace pour basculer. Avec un jeu de cases cocher, linternaute peut faire un choix non exclusif, comme le montre lexemple gauche de la Figure 73.1. Comme lillustre la Figure 73.2, une occurrence de composant CheckBox na pas dautres paramtres que ceux, communs, dcrits section Paramtrer le comportement dun composant, Fiche 71.
CheckBox,
Si lintitul de la case cocher est plus long que la largeur de loccurrence du composant il sera tronqu. Dans ce cas, il faut ajuster les dimensions de loccurrence.
Prfabrication
461
Figure 73.1
Un jeu de cases cocher ( gauche) et un jeu de boutons radio ( droite).
Figure 73.2
Les paramtres dune occurrence de composant CheckBox.
Le composant RadioButton
Grce plusieurs occurrences de composant RadioButton, vous pouvez proposer linternaute de faire un choix exclusif dans un groupe doptions prcdes dun bouton radio rond, comme le montre lexemple droite de la Figure 73.1. En effet, slectionner un bouton radio dslectionne automatiquement celui qui tait prcdemment slectionn. Lorsque lun des
462
Flash CS5
boutons radio du groupe a le focus, linternaute peut aussi utiliser les touches flche gauche et droite pour slectionner le prcdent ou le suivant. La Figure 73.3 montre les paramtres dune occurrence de composant RadioButton. Outre ceux, communs, dcrits section Paramtrer le comportement dun composant, Fiche 71, elle possde un paramtre spcifique: groupName. Tous les boutons radio dun mme groupe ont mme valeur pour ce paramtre. Cest grce lui que Flash peut dslectionner automatiquement. Cest aussi grce ce nom de groupe que vous rcuprerez dans votre programme ActionScript la valeur slectionne pour le groupe. Comme pour une case cocher, si lintitul du bouton radio est plus long que la largeur de loccurrence du composant RadioButton, il sera tronqu. Dans ce cas, il faut ajuster les dimensions de loccurrence.
Figure 73.3
Les paramtres dune occurrence de composant RadioButton.
Fiche 74
Composants de menus
Le composant List
Une occurrence de composant List est une liste (droule, non droulante). Dans une liste, linternaute doit par dfaut faire un choix exclusif. Il est cependant possible de paramtrer la liste pour permettre le choix multiple. Si la liste contient plus dlments quil nest possible den afcher dans la hauteur de loccurrence, une barre de dfilement vertical apparat. Cest le cas avec lexemple de la Figure 74.1.
Prfabrication
463
Figure 74.1
Une liste ( gauche) et une liste droulante ( droite), droule.
Comme le montre la Figure 74.2, les paramtres spcifiques dune occurrence de composant List sont:
Figure 74.2
Les paramtres dune occurrence de composant List.
allowMultipleSelection. Paramtre valeur boolenne. Lorsquil vaut true, linternaute peut slectionner et dslectionner autant de valeurs quil le souhaite en maintenant enfonce la touche CMd (Mac) ou Ctrl (Windows) tout en cliquant sur les lments de la liste. En gardant la touche Maj enfonce, il peut galement slectionner des lments conscutifs. dataProvider. Pour spcifier la valeur de ce paramtre, double-cliquez dans son champ de valeur, ou bien aprs y avoir cliqu une seule fois, cliquez sur licne de crayon en bout de ligne. Ceci ouvre la bote de dialogue Valeurs, reproduite Figure 74.3. Pour
464
Flash CS5
chaque lment de la liste, cliquez sur le bouton orn dun signe plus. Ceci cre une nouvelle structure de deux paires nom-valeur pour llment. La premire paire a pour nom label. Vous devez obligatoirement spcier sa valeur, puisquil sagit de lintitul de llment dans la liste. La seconde paire a pour nom data. Spcifier sa valeur est facultatif, puisquil sagit de la valeur transmise au programme ActionScript lorsque linternaute choisit cet lment dans la liste. Par dfaut, cest lintitul qui est transmis au programme. Dans lexemple de la Figure 74.3, chaque choix dun genre musical correspond une valeur numrique transmise au programme. Si ces valeurs numriques taient utilises directement comme intituls, la liste de choix possibles serait bien sr incomprhensible pour linternaute. Le bouton orn dun signe moins vous permet de supprimer un lment et ceux orns de flches de rordonner la liste. horizontalScrollPolicy, verticalScrollPolicy. Ces paramtres dterminent dans quelles conditions les barres de dfilement sont prsentes, comme pour le composant TextArea (voir section Le composant TextArea, Fiche 72). horizontalLineScrollSize, verticalLineScrollSize. La valeur de ces paramtres est le nombre de pixels faire dfiler lorsque linternaute clique sur une flche de dfilement. horizontalPageScrollSize, verticalPageScrollSize. La valeur de ces paramtres est le nombre de pixels faire dfiler lorsque linternaute clique dans la glissire de dfilement.
Figure 74.3
La bote de dialogue Valeurs.
Le composant ComboBox
Une occurrence de composant ComboBox est une liste droulante ou surgissante (pop-up). Dans une liste droulante, linternaute doit par dfaut faire un choix exclusif. Celui-ci apparat ensuite sous forme dune ligne de texte. La liste doptions se droule en cliquant sur le
Prfabrication
465
triangle, par dfaut vers le bas, mais si lespace manque, elle se droulera vers le haut. Un composant ComboBox fait appel trois autres composants: Button, TextInput et List.
Combo-Box
Comme le montre la Figure 74.4, les paramtres spcifiques dune occurrence de composant sont: dataProvider. Paramtre identique celui dune occurrence de composant List (voir la section prcdente). editable. Paramtre valeur boolenne. Lorsquil vaut false, la liste est fige. Lorsquil vaut true, elle est volutive : linternaute peut saisir une nouvelle option en slectionnant le dernier lment de la liste qui ouvre un champ de saisie. prompt. Chane de caractres qui constitue linvite de la liste droulante, avant quun choix ne sy affiche. restrict. Restriction de lensemble de caractres que linternaute peut saisir dans le champ. Similaire au paramtre homonyme dune occurrence de composant TextInput (voir section Le composant TextInput, Fiche 72). rowCount. Nombre dlments visibles de la liste.
vitez de redimensionner une occurrence de ComboBox, conue pour une hauteur par dfaut de 22 pixels. Si vous la modiez, le graphisme subira une distorsion.
Figure 74.4
Les paramtres dune occurrence de composant ComboBox.
466
Fiche 75
Flash CS5
Autres composants de formulaire

Figure 75.1
Un slecteur numrique (en haut) et un bouton (en bas).
Le composant NumericStepper
Grce une occurrence de composant NumericStepper, vous pouvez contraindre lintervalle de valeurs numriques que linternaute peut choisir.
Figure 75.2
Les paramtres dune occurrence de composant NumericStepper.
Comme le montre la Figure 75.2, les paramtres spcifiques dune occurrence de composant NumericStepper sont les suivants: minimum. La valeur basse de lintervalle. maximum. La valeur haute de lintervalle.
Prfabrication
467
stepSize. Lincrment appliqu la valeur afche chaque clic sur lune des ches. Les valeurs possibles sont calcules partir de 0 et non de la valeur spcie pour le paramtre value. value. La valeur par dfaut.
Le composant Button
Lutilisation classique dune occurrence de composant Button est le bouton de validation dun formulaire. Bien sr, pour que votre bouton excute des instructions en rponse au clic, vous devrez lui adjoindre un couteur de ce type dvnements (voir sections Quest-ce quun composant ?, Fiche 71 et Les vnements de clic, Fiche 80). Comme le montre la Figure 75.3, les paramtres spcifiques dune occurrence de composant Button sont les suivants: emphasized. Paramtre valeur boolenne. Lorsquil vaut true, dans son tat normal (non cliqu), le bouton est entour dune bordure. toggle. Paramtre valeur boolenne. Lorsquil vaut false, le bouton est classique. Lorsquil vaut true, le bouton se comporte comme une case cocher, basculant entre deux tats. Initialement, le bouton sera par dfaut dans son tat dslectionn. Si vous souhaitez le contraire, rglez true son paramtre selected.
Figure 75.3
Les paramtres dune occurrence de composant Button.
468
Fiche 76
Flash CS5
Autres composants dinterface utilisateur
Figure 76.1
Une glissire et un slecteur de couleur.
Le composant Slider
Une occurrence de composant Slider est une glissire grce laquelle vous pouvez faire choisir une valeur numrique dans un intervalle. Celle de lexemple de la Figure 76.1 est verticale.
Figure 76.2
Les paramtres dune occurrence de composant Slider.
Comme le montre la Figure 76.2, les paramtres spcifiques dune occurrence de composant Slider sont les suivants: direction. La valeur de ce paramtre est soit horizontal, soit vertical. liveDragging. Paramtre valeur boolenne. Lorsquil vaut false, la mise jour du curseur et de la valeur ne se font que lorsque linternaute relche le bouton de la souris. Lorsquil vaut true, la mise jour du curseur et de la valeur se font au fur et mesure. maximum. La valeur haute de lintervalle.
Prfabrication
469
minimum. La valeur basse de lintervalle. snapInterval. La valeur par dfaut de ce paramtre est 0. Si cette valeur est non nulle, elle donne lincrment de variation de la valeur lorsque linternaute fait glisser le curseur. Vous pourriez ainsi contraindre la valeur tre paire en choisissant la valeur2 pour ce paramtre. tickInterval. La valeur par dfaut de ce paramtre est 0. Si cette valeur est non nulle, la glissire est gradue intervalles de longueur donne par cette valeur.
Le composant ColorPicker
Une occurrence de composant ColorPicker est une puce de couleur, qui au clic ouvre un slecteur de couleur, trs proche de celui que vous utilisez dans lenvironnement de ralisation Flash, comme lillustre la partie droite de la Figure 76.1.
ColorPicker
Comme le montre la Figure 76.3, les paramtres spcifiques dune occurrence de composant sont les suivants: selectedColor. La valeur de la couleur choisie, sous la forme usuelle de six caractres correspondant un triplet de valeurs hexadcimales, prcds dun #. showTextField. Paramtre valeur boolenne. Lorsquil vaut true, le slecteur de couleur affiche le champ de texte dans lequel linternaute peut saisir ou diter le code hexadcimal de la couleur choisie.
Figure 76.3
Les paramtres dune occurrence de composant ColorPicker.
470
Flash CS5
Le composant TileList
Une occurrence de composant TileList vous permet de crer une mosaque dfilante dimages, chacune tant accompagne dun intitul. Cest un bon moyen pour que linternaute choisisse de manire graphique. Au survol, chaque image de la mosaque se teinte lgrement de bleu et se borde dun liser bleu. Ce liser est visible sur lexemple de la Figure76.4 (o le pointeur de la souris est galement reproduit).
Figure 76.4
Une mosaque dimages
Le fichier source est disponible dans les exemples du livre: FCS5_76.fla. Lanimation (FCS5_76.swf) fonctionne avec les fichiers images du dossier PAPILLON, qui doit se trouver dans le mme dossier.
Le dfilement dune occurrence de composant TileList est gr par des paramtres scrollPolicy, hLineScrollSize, vLineScrollSize, hPageScrollSize et vPageScrollSize, similaires leurs homonymes des composants TextArea et List (voir sections Le composant TextArea, Fiche 72 et Le composant List, Fiche 74).
TileList
Comme le montre la Figure 76.5, les paramtres spcifiques dune occurrence de composant sont les suivants: allowMultipleSelection. Paramtre valeur boolenne. Lorsquil vaut true, linternaute peut faire une slection multiple, comme avec une occurrence de composant List (voir section Le composant List, Fiche 74). columnCount, rowCount. Respectivement le nombre de colonnes et le nombre de lignes de la mosaque, 5 et 2 dans lexemple de la Figure 76.4. columnWidth, rowHeight. La taille en pixels (largeur, hauteur) de chaque lment de la mosaque.
Prfabrication
471
dataProvider. La spcification de la valeur de ce paramtre passe par une bote de dialogue similaire celle reproduite Figure 74.2 (voir section Le composant List, Fiche 74). La seule diffrence est que la seconde paire nom-valeur na plus pour nom data, mais source. Dans lexemple de la Figure76.5, les valeurs pour les paires source sont les chemins daccs relatifs aux fichiers PNG des papillons. Dans une animation en ligne, ces valeurs doivent tre leurs URL. direction. La valeur de ce paramtre est soit horizontal soit vertical.
Figure 76.5
Les paramtres dune occurrence de composant TileList.
Le composant ScrollPane
Une occurrence de composant ScrollPane vous permet de faire dfiler horizontalement et verticalement du graphisme, quil sagisse dimage bitmap comme dans lexemple de la Figure 76.6, de clip danimation, ou danimation SWF. Deux raisons peuvent motiver le dfilement: soit le graphisme est trop grand pour la scne, soit vous prenez dlibrment le parti de nen montrer quun morceau la fois.
472
Flash CS5
Figure 76.6
Une image dfilante.
Le dfilement dune occurrence de composant TileList est gr par des paramtres horizontalScrollPolicy, verticalScrollPolicy, horizontalLineScrollSize, verticalLineScrollSize, horizontalPageScrollSize et verticalPageScrollSize similaires leurs quivalents pour les composants TextArea et List (voir sections Le composant TextArea, Fiche 72 et Le composant List, Fiche 74). Comme le montre la Figure 76.7, les paramtres spcifiques dune occurrence de composant ScrollPane sont les suivants:
Figure 76.7
Les paramtres dune occurrence de composant ScrollPane.
scrollDrag. Paramtre valeur boolenne. Lorsquil vaut true, linternaute peut faire glisser le graphisme directement, sans se servir des barres de dfilement. source. Dans lexemple de la Figure 76.7, la valeur de ce paramtre est le chemin daccs relatif au fichier PNG du papillon. Dans une animation en ligne, cette valeur doit tre lURL du graphisme.
Prfabrication
473
Autres composants
Le dossier User Interface du panneau Composants contient encore quelques composants. Nous ne les dtaillons pas et vous renvoyons laide en ligne. La description des autres composants faite ci-dessus doit vous avoir suffisamment familiaris avec la mthode: DataGrid. Ce composant sert laffichage de donnes. Au plus simple, celles-ci proviendront dun tableau dfini dans votre programme ActionScript. Souvent, nanmoins ces donnes seront celles dun enregistrement dans une base de donnes et rsulteront dune requte Flash Remoting (ColdFusion, Java, .Net). ProgressBar. Ce composant sert mettre en place une barre de progression standard de tlchargement. Il est rarement utilis, car il est relativement simple de programmer en ActionScript sa propre barre de progression personnalise. UILoader. Ce composant est ddi au tlchargement dune image bitmap JPEG ou dune animation SWF. Comme le prcdent, il est rarement utilis, car la programmation Action-Script dun tlchargement via un objet Loader est relativement simple. UIScrollBar. Ce composant fournit une barre de dfilement. Il est utilis par les composants TextArea, List, ComboBox, TileList et ScrollPane.
11
Bases de programmation ActionScript3.0

La programmation ActionScript nest pas le sujet de ce livre qui sadresse aux ralisateurs multimdia et non aux dveloppeurs. Nanmoins, pratiquement aucun site ni aucune application nest concevable sans un minimum dinteractivit. Mme en faisant grand usage des lments prfabriqus que sont les composants, votre animation Flash contiendra ncessairement quelques scripts basiques indispensables. Notre ambition dans ce chapitre est modeste. Il ne sagit nullement de faire de vous un programmeur ActionScriptaguerri, puisquun chapitre ny suffirait pas. Lobjectif est simplement de vous donner les rudiments qui vous permettront de lire et comprendre un peu de code ActionScript3.0 et den crire vous-mme quelques lignes dinstructions simples. Voyez cela comme le petit guide que vous achetez avant de partir pour un pays tranger dont vous ne connaissez pas la langue. Grce lui sans prtendre parler la langue, vous esprez pouvoir dcoder des pancartes et des panneaux et formuler quelques requtes indispensables ladresse des autochtones.
Fiche 77
Comprendre le vocabulaire de la programmation

Tout mtier a son vocabulaire. Celui de la programmation ne fait pas exception. Gardez votre sang-froid, nous allons dfinir le plus limpidement possible toutes les notions indispensables pour faire de vous un apprenti dveloppeur clair. Cette ficheaurait pu sintituler Alice au pays des merveilles de la programmation. Franchissez donc le miroir la rencontre du lapin blanc, qui dans ce monde-ci se nomme Mister Geek.
Compilation
Du point de vue du programmeur, le programme est un texte le code source quil rdige dans un langage donn pour dcrire un processus. Du point de vue de la machine, le programme est ce processus que le processeur excute. Entre ces deux tapes de codage et dexcution, il y en existe une intermdiaire: celle de la compilation. Aux temps hroques des pionniers, la programmation se faisait dans un langage horriblement hermtique et rebutant, parce que trs proche du seul langage quun ordinateur soit capable de comprendre, le langage machine. Au fil des dernires dcennies, toutes sortes de langages ont vu le jour, plus mme dtre apprhends par lintelligence humaine. En rgle gnrale et en premire approximation, la programmation se fait en deux tapes. Dans la premire, vous crivez un code source dans les termes et la syntaxe du langage de programmation. Dans la seconde, vous soumettez ce code source un logiciel dit compilateur du langage. La compilation commence par faire une analyse lexicale, puis syntaxique
476
Flash CS5
du code source, afin de vrifier que celui-ci est correctement orthographi et conforme la grammaire du langage de programmation. Si ce nest pas le cas, le compilateur produit des avertissements et des messages derreurs, vous renvoyant la correction de votre copie. Une fois que votre code source est conforme, le compilateur le traduit en code excutable, cest-dire en instructions du langage machine. Le code excutable cible une plate-forme donne, toutes nayant pas le mme jeu dinstructions de langage machine. Ainsi, par exemple, pour pouvoir sexcuter sur Mac et sur PC, le mme code source doit tre compil sparment pour les systmes dexploitation MacOS et Windows. Une approche plus universelle de la compilation, inaugure par le langage Java, consiste compiler le code source pour une machine dite virtuelle. La compilation ActionScriptet mme celle du langage de scripts initial de Flash, antrieur lActionScript 1.0 suit galement ce principe1. Les instructions en langage machine ne sont gnres qu lexcution du programme, en fonction de la machine relle sur laquelle il sexcute, donc de la plate-forme effective, Mac ou PC par exemple. Pour ActionScript, ce travail est celui du lecteur Flash ou de lenvironnement dexcution AIR. Programmer (on dit aussi coder), cest expliquer lordinateur, dans le langage de programmation, comment rsoudre un problme donn 2. Un langage informatique est la fois plus simple et plus rigide quune langue naturelle. Les deux sont structurs. Le code source que vous rdigez est constitu de phrases construites selon des rgles grammaticales propres au langage. Ce sont les instructions, quen ActionScripton appelle aussi actions. La phrase se dcompose son tour en mots construits selon des rgles lexicales. Les mots que vous utilisez dans cette explication quest le code source sont de deux catgories. La premire est celle des mots-cls ou mots rservs du langage. Lorthographe de ceux-l vous est impose. Ils sont propres au langage. La seconde catgorie est celle des identifiants, cest--dire des noms que vous donnez aux diffrentes entits que votre code source manipule. Ceux-l vous sont propres et vous avez une grande libert dans le choix des noms. Il est tout votre avantage et celui de vos ventuels co-quipiers de choisir des noms trs descriptifs, comme occurenceBoutonDeValidation, par exemple. Un identifiant ne peut contenir que des lettres, des caractres souligns et des chiffres, mais ne doit pas commencer par un chiffre3.
1. Plus exactement, il existe des langages compils et des langages interprts. Des langages comme Java ou ActionScriptsont dits semi-interprts. 2. Tout du moins en programmation dite imprative. Il existe aussi en intelligence artificielle une programmation dite dclarative, dans laquelle on dcrit le problme plutt que sa rsolution, laquelle rsolution est mise en uvre par un moteur dinfrence. 3. Codage Unicode oblige, lenvironnement de programmation Flash permet tout fait daccentuer les identifiants. Vous pouvez ainsi dclarer une variable aVatreliminer ou une fonction pteSable(), sans que cela pose aucun problme. Nanmoins, vous crirez peut-tre un jour du code ActionScript externe dans un diteur qui ne traitera pas correctement les signes diacritiques (accents, cdilles, etc.). Une bonne habitude de programmation consiste donc ne dclarer que des identifiants dpourvus de signes diacritiques: caVaEtreAEliminer, pateSablee().
477
Lespace du stockage: les variables

Tout programme manipulant des informations, il a besoin despace mmoire (mmoire vive, cest--dire la RAM) pour stocker celles-ci. Les diffrents conteneurs dinformation que le programme utilise sappellent des variables. Le terme renvoie clairement au fait que le contenu dune variable peut varier au cours de lexcution du programme. Si vous programmez une application domestique de suivi de compte en banque, vous aurez vraisemblablement une variable soldeCompteCourant dans laquelle sera calcule le solde du compte, montant qui varie au fil des jours. Lors de sa dclaration, la variable reoit un identifiant. Cet identifiant est crucial. Voyez-le comme le ticket de la consigne dinformation: en prsentant le ticket, cest--dire en invoquant dans votre programme lidentifiant de la variable, vous rcuprez la consigne, cest-dire la valeur couramment stocke. Pour que cela marche, lidentifiant de toute variable doit tre unique dans le programme. ActionScriptest sensible la casse, autrement dit la diffrence minuscule-majuscule est significative pour lui. Ainsi, soldeCompteCourant et soldecomptecourant sont deux identifiants diffrents. En ActionScript3.0, une variable est type. ce niveau, le typage de donnes signifie prciser pour chaque variable que votre programme utilise le type des donnes quelle est susceptible de contenir. Les types lmentaires les plus courants sont : boolen (Boolean), cest--dire valeur vrai ou faux (true, false), nombre (Number), chane de caractres (String). Le type de la variable qui conditionne la taille du conteneur dinformation, donc lespace mmoire rserv pour lui lexcution est prcis lors de la dclaration de variable. Lors de cette dclaration, la variable peut recevoir une valeur initiale. Par la suite, la variable ne pourra plus recevoir que des valeurs du type dclar. Impossible de mettre une valeur numrique dans une variable dclare String, par exemple. Lanalogie avec la consigne a ses limites. Il sagit en effet dune consigne dun genre trs particulier dans laquelle vous pouvez prsenter le ticket autant de fois que vous voulez pour rcuprer la valeur stocke. Par ailleurs, le conteneur a aussi une particularit: il ne peut contenir quune seule information du type dclar et ds que lon y dpose une nouvelle valeur, celle-ci crase la valeur prcdemment consigne. Certaines variables ActionScript 3.0 ont la particularit dtre constantes, savoir que leur contenu reste fixe au cours de lexcution (passons sur le bel oxymoron de la variable constante). Une telle constante serait par exemple utile dans votre application de suivi de compte en banque pour mmoriser la date de naissance du titulaire du compte. On appelle affectation lattribution dune valeur une variable: <identifiantDeVariable> = <valeur-DuTypeDeLaVariable>. Le signe gal reprsente ici loprateur daffectation. Autour de lui se trouvent ce que lon appelle traditionnellement une partie gauche et une partie droite, ou oprande de gauche et oprande de droite. Laffectation fonctionne en deux temps. Le premier temps consiste valuer la partie droite de linstruction daffectation. Ce
478
Flash CS5
peut tre une simple valeur littralecest--dire une donne en dur dans le code source, auquel cas lvaluation est triviale, mais ce peut tre une expression beaucoup plus complique, ou la valeur retourne par lappel une fonction (voir sectionsuivante). Le second temps de laffectation consiste donner la variable dsigne en partie gauche la valeur rsultat de lvaluation prcdente. Il est dusage, lorsque lon reproduit du code informatique, comme dans ce livre, dutiliser une convention pour distinguer deux niveaux dcriture: les choses saisir telles quelles dans votre code source et les choses adapter votre code source rel. La convention consiste encadrer la description de ces dernires par une paire de signes infrieur et suprieur. Par exemple, lorsque vous rencontrez <identifiantDeVariable> dans la reproduction dun fragment de code source, vous comprenez que vous devrez remplacer cette expression par ce qui est dcrit lintrieur, donc par lidentifiant valide dune variable dclare de votre code source.
Le flux du calcul: les structures de contrle et les fonctions

Programmer, cest mettre un algorithme en uvre dans un langage donn. Le mot algorithme sonne sans doute barbare vos oreilles. Disons simplement quun algorithme est lart de la programmation ce que la recette est lart culinaire. Voici en cinq tapes la recette de la pte sable: 1. Laissez 100 g de beurre ramollir en dehors du rfrigrateur. Pris de court par le temps, passez-le la rpe fine. 2. Mlangez dans un saladier 200 g de farine avec le beurre ramolli. 3. Ajoutez 100 g de sucre et mlangez en un tout homogne. Cela prend une consistance de sable, do sans doute le nom de pte sable. 4. Si la pte manque trop de liant, ajoutez un uf. 5. Laissez reposer la pte dans un endroit frais pendant au moins une heure. Une recette de cuisine est une suite dinstructions, cinq dans lexemple prcdent. Vous les excutez les unes aprs les autres dans lordre dans lequel elles sont rdiges et numrotes. Transformons maintenant la recetteprcdente en un algorithme de la pte sable. Nous allons lcrire dans un pseudo-langage de programmation, cest--dire un langage fictif possdant les structures de contrle dun vrai langage, mais dont les mots-cls sont en franais, ce qui rend le pseudo-code plus lisible (hgmonie amricaine oblige, les mots-cls des vrais langages de programmation sont en anglo-amricain). Notre fiche de cuisine prend lallure de la dfinition dune fonction. Cette fonction fera elle-mme appel des fonctions auxiliaires dont nous omettons la dfinition pour ne pas alourdir :
fonction pateSablee() : pateATarte { 0a variable doseDeFarine = 200; 0b variable doseDeBeurre = 100; 0
479
variable doseDeSucre = 100; si ( aucuneUrgence() ) { 1a.1 tant que ( beurreNonRamolli() ) { 1a.1.1 laisserRamollirCinqMinutes(); } } 1b sinon { 1b.1 passerLeBeurreALaRapeFine(); } 2 variable pate : pateATarte; pate = melangerDansLeSaladier( doseDeFarine( 200), doseDeBeurre( 100)); 3 pate = melangerDansLeSaladier( pate, doseDeSucre ( 100)); 4 si ( manqueTropDeLiant() ) { 4.1 pate = melangerDansLeSaladier( pate, ufs( 1)); } 5 pour ( var minutes = 1 ; minutes < 60 ; minutes = minutes +1) { 5.1 laisseReposerAuFrais(); } 6 retourner pate; }
0c 1a
Comme la fiche de cuisine, lalgorithme est une liste dinstructions. Dans le code source, vous ne pouvez bien sr que les rdiger les unes aprs les autres. Mais la diffrence de la fiche de cuisine, les instructions de lalgorithme ne sont pas ncessairement excutes dans leur ordre de rdaction. Remarquez dabord que si les instructions de lalgorithme prcdent sont globalement numrotes de0 6, cette numrotation est galement hirarchique (1a, 1b, 1a.1.1). Une bonne habitude consiste rendre cette hirarchie aussi visible que possible en dcalant chaque ligne de code avec le bon nombre de tabulations, de sorte que les instructions prcdes du mme nombre de tabulations soient toutes de mme niveau dans la hirarchie. Cette opration sappelle lindentation du code. On ne fait ceci que pour se rendre la tche moins ardue. En effet, le compilateur ne tient aucun compte des blancs (espaces, tabulations, retours chariot) et vous pourriez tout aussi bien lui fournir le code prcdent sur une seule ligne de texte. Avouez nanmoins que sous cette forme nous vous aurions dfinitivement dgot de la programmation. La hirarchie du programme se voit galement autre chose. Remarquez que le code source est correctement parenths, savoir que pour chacun des signes fonctionnant par paires parenthses, accolades, crochets , pour tout signe ouvrant, il existe un signe fermant correspondant et que lorsquun signe fermant se prsente, cest toujours celui correspondant au dernier signe ouvrant non encore referm. Dans notre pseudo-langage de programmation
480
Flash CS5
et en ActionScript, les accolades dlimitent des blocs dinstructions. Dans la prsentation adopte ici, elles se trouvent sur des lignes spares, ce qui are le code et rend plus ais la vrification visuelle du bon parenthsage. Dans le code source, ce sont les blocs dinstructions qui crent les niveaux hirarchiques. Lindentation nest quune faon commune de les mettre en vidence dans la prsentation. Le code source prcdent contient des mots en gras. Ce sont les identifiants que nous avons dfinis en le rdigeant. Tout ce qui nest pas en gras fait partie du pseudo-langage de programmation: ces mots (ou symboles isols) en sont des mots-cls. Dans notre pseudo-langage, de mme quen ActionScript, le point-virgule signe la fin dune instruction, de mme quen franais le point termine une phrase. Il y a nanmoins un cas dans lequel vous pouvez vous dispenser du point-virgule final : le groupe dinstructions, pour lequel laccolade fermante suffit. En ActionScript, les diffrentes instructions possibles peuvent tre classes en quatre catgories: Conditionnelles. Une instruction conditionnelle permet daiguiller le flux dexcution de lalgorithme en fonction de la valeur dune condition. Par exemple, si la condition est vraie, alors le programme excutera tel bloc dinstructions, dit clause ; sinon, il excutera tel autre bloc dinstructions, dit clause alternative. Lorsquil y a deux clauses (il peut mme y en avoir plus), quelle que soit la valeur de la condition, il se trouve des instructions du code source qui ne sont pas excutes. Dans lalgorithme prcdent, vous avez deux exemples de conditionnelles: le premier a deux clauses (1a, il ny a pas urgence, 1b, le temps presse), tandis que le second nen a quune (4, la pte manque de liant). Itratives. Une instruction itrative est une structure de rptition. Elle cre une boucle dans le flux dexcution de lalgorithme. La boucle est une structure dangereuse pour le programmeur. Sil nest pas vigilant, il peut rdiger une boucle infinie dans laquelle lexcution senfermera indfiniment (enfin, jusqu ce que lon tue le processus au niveau du systme dexploitation). Il faut donc crire des boucles finies. Il existe un premier type de boucle dans lequel elle est contrle par une condition de sortie. vous de vous assurer dans le corps de la boucle qu un moment ou un autre cette condition de sortie devienne vraie. Dans la premire boucle de lexemple prcdent (1a.1), la condition de sortie est le ramollisement du beurre. Il existe un second type de boucle dans laquelle vous fixez demble un nombre ditrations. Une boucle de ce type est contrle par une variable, dite indice de boucle, qui compte les tours. Vous spcifiez pour cette variable une valeur de dpart, une valeur de fin, ainsi quune incrmentation, cest--dire de combien vous augmentez (ou diminuez) la valeur dindice de boucle chaque itration. La seconde boucle de lexemple prcdent (5) est de ce type. Elle ralise un minuteur dune heure. Lindice de boucle est un simple compteur de minutes coules (valeur de dpart1, une valeur de fin60, incrmentation de1).
481
Branchements. Si les conditionnelles et les itratives sont des types de structures de contrle que lon retrouve dans la plupart des langages informatiques, il nen va pas de mme des branchements. Le vieux langage BASIC contient une instruction de branchement explicite, cest--dire de saut du flux dexcution de lalgorithme une autre instruction du code source. Mais ce genre de pratique a t dsign comme de la mauvaise programmation et vou au banissement. Que le branchement fasse son retour dans des langages comme ActionScriptou Lingo nen fait pas pour autant des langages peu respectables. En effet, il ne sagit plus ici de branchement dans le code source, mais dans le scnario Flash ou Director. Le saut est ici celui de la tte de lecture, renvoye une image non contige. Appels de fonctions. Une fonction est un bloc dinstructions qui lon a donn un identifiant. On parle de dfinition de la fonction. Lalgorithme prcdent est lui-mme dfini dans son ensemble comme une fonction pateSablee(). Pour dclencher lexcution de ce bloc dinstructions, ce qui sappelle effectuer un appel de la fonction, on fait simplement suivre lidentifiant de la fonction dune paire de parenthses, qui est loprateur dappel. Certaines fonctions ne font rien de plus quexcuter le bloc dinstructions. Dans les langages plus anciens, on les appelle des procdures. Dans notre exemple, laisserRamollirCinq-Minutes(), passerLeBeurreALaRapeFine() et laisseReposerAuFrais() sont de ce type. Dautres fonctions retournent une valeur dun type spcifi dans le code source. Notre fonction pateSablee() retourne (en6) la valeur dune variable (dclare en2) de type totalement farfelu pateATarte (spcifi la premire ligne). Le code source prcdent fait des appels aux fonctions aucuneUrgence(), beurreNonRamolli() et manqueTropDeLiant() sans en donner la dfinition. Nanmoins, du fait que ces appels servent de condition une instruction conditionnelle ou itrative, nous pouvons dduire que ces trois fonctions retournent une valeur de type boolen (vrai ou faux). Dans les langages plus anciens, une fonction se distingue dune procdure en ce que, contrairement la seconde, elle retourne un rsultat. Dfinir des fonctions est un bon moyen de simplifier le code source en regroupant, factorisant des blocs dinstructions rcurrents. Dans notre exemple, melangerDansLeSaladier() est appele trois fois. La dfinition de cette fonction nest pas donne dans notre exemple de la pte sable, mais supposons que son corps soit un bloc de 15 instructions. Grce la dfinition de fonction, on a remplac 45 instructions par 15 +1 (dfinition)+3 (appels)=19. On dfinit une fonction pour tout lment de calcul utile. Dans lapplication de gestion de compte bancaire par exemple, en supposant que parmi les informations disponibles sur le titulaire du compte figure sa date de naissance, on pourrait avoir une fonction ageTitulaire() qui calcule son ge par diffrence de la date courante.
482
Flash CS5
Les fonctions cites jusqu prsent nont aucun paramtre. Quelles retournent ou non en sortie une valeur rsultat, elles ne prennent en entre aucune valeur (on parle dargument pour la ou les valeurs relles prises en entre par une fonction). Dans pareil cas, lidentifiant de la fonction aussi bien lors de sa dfinition, que lors dun appel est suivi dune paire de parenthses vide. Lors de la dfinition dune fonction, on crit le mot-cl fonction, suivi de lidentifiant de la fonction, suivi de la paire de parenthses, puis du caractre : suivi du type de la valeur retourne par la fonction. Par exemple: fonction pateSablee() : pateATarte. Lors dun appel la fonction, on critsimplement lidentifiant de la fonction, suivi de la paire de parenthses. Par exemple : manqueTropDeLiant(). Lorsquune fonction prend de linformation en entre, on dfinit pour elle des paramtres : ufs( <nombre>). On distingue le paramtre formel (<nombre>), du paramtre rel ou argument, cest--dire la valeur effectivement passe lexcution lors de lappel (1, dans lappel rel ufs() dans le corps de la fonction pateSablee()). Si la fonction a plusieurs paramtres, ils sont spars par des virgules: melangerDansLeSaladier( <ingrdient1>, <ingrdient2>). Lors de lappel, les valeurs passes en argument sont aussi spares par des virgules et passes dans le mme ordre: dans lappel melanger-DansLeSaladier de la ligne 4.1, pte est largument pour le paramtre formel <ingrdient1> et ufs(1) largument pour le paramtre formel <ingrdient2>. En ActionScript3.0, le typage de donnes dj voqu pour les variables, vaut galement pour les paramtres. Pour chaque paramtre formel, un type de donnes prcise dans la dfinition de la fonction la valeur attendue comme argument. Les fonctions cites jusqu prsent sont toutes des fonctions personnelles, savoir que nous les avons dfinies nous-mme. Si notre pseudo-langage de programmation na pas de fonctions intgres, un vrai langage comme ActionScripten regorge. Nous pouvons maintenant tre plus prcis quant lordre dexcution dun algorithme. En labsence de conditionnelle, ditrative, de branchement et dappel de fonction, lordre dexcution des instructions est leur ordre de rdaction. Cest ce que lon appelle la squentialit. Les trois piliers de la programmation4 sont la squentialit, les branchements conditionnels et les boucles ditration. Nous pourrions rajouter comme quatrime pilier la rcursion le fait quune fonction puisse dans son corps dinstructions faire un appel elle-mme. Vous expliquer comment ce qui premire vue ressemble un auto-engendrement et perturbe votre esprit rationnel; cest normal, nous lavons t avant vous est en fait tout fait possible, vous expliquer cela donc, nous entranerait trop loin dans le monde des geeks5.
4. Hors contexte dexcution parallle, cest--dire en simultan sur plusieurs processeurs. 5. Daprs lOxford Dictionary, le geek du hollandais gek qui signifie stupide, insens est a knowledgeable and obsessive enthusiast, donc un passionn bien document, tendance obsessionnelle. Le computer geek est donc un fou dinformatique.
483
Le temps de lexcution: les vnements

Le flux du calcul, abord la section prcdente, est dj un aspect temporel de lexcution dun programme, du point de vue de lenchanement des instructions qui sexcutent. Le flux des vnements est un autre aspect temporel de lexcution. Sur votre ordinateur, le systme dexploitation sonde en permanence le matriel et gnre un flux dvnements. Ce flux alimente une file dattente de taille limite, souvent assez petite, par exemple20. Au besoin, les vnements les plus anciens sont limins de la file, mais en rgle gnrale ils sont traits plus vite que vous ntes capable den produire de nouveaux. La file nest jamais vide, mais contient au moins IDLE, qui signale une absence dvnement, cest--dire le fait que la machine soit disponible. Les vnements enregistrs dans le file dattente ont tous un type. Lanalyse dvnement est essentiellement une instruction conditionnelle sur le type dvnement. Tout programme interactif y compris linterface utilisateur graphique du systme dexploitation est dirig par les vnements. Cest fondamentalement une boucle vnementielle, boucle dattente et danalyse des vnements. Tout systme interactif suit un principe daction/raction : Action. Lutilisateur ou le systme agissent, des vnements se dclenchent. Raction. Le systme ragit, des instructions sexcutent. Attention, car en ActionScript, ces instructions-ractions sappellent des actions! Des vnements, il en est de toutes sortes. Essayons de les classer: vnements linitiative de linteracteur. Dans cette premire grande catgorie dvnements, on trouve ceux que tout dbutant est susceptible de manipuler. Les vnements dinteraction la souris sont dfinis dans la classe ActionScript MouseEvent. On y trouve les vnements de survol, dont les principaux sont:
MouseEvent.MOUSE_OVER MouseEvent.MOUSE_MOVE MouseEvent.MOUSE_OUT
ainsi que les vnements de clic:

MouseEvent.MOUSE_DOWN MouseEvent.MOUSE_UP MouseEvent.CLICK MouseEvent.DOUBLE_CLICK
Les vnements de frappe au clavier sont dfinis dans la classe ActionScript KeyboardEvent:
KeyboardEvent.KEY_DOWN KeyboardEvent.KEY_UP
484
Flash CS5
Signalons dautres vnements dinteraction, utiles un niveau de programmation plus avanc : linteracteur a saisi dans un champ (TextEvent.TEXT_INPUT, Event.CHANGE), le champ actif (focus) dun formulaire a chang (FocusEvent.FOCUS_ OUT, FocusEvent.FOCUS_IN), lanimation Flash nest plus lapplication de premier plan ou elle le redevient (Event.DEACTIVATE, Event.ACTIVATE), la fentre de lanimation Flash est redimensionne (Event.RESIZE). vnements internes au systme. Par systme, il faut entendre systme multimdia. Ce pourrait tre la couche multimdia du systme dexploitation. Dans notre cas, il sagit de lenvironnement dexcution de lanimation Flash, cest--dire par exemple le lecteur Flash ou AIR. Les vnements de cette seconde grande catgorie servent la synchronisation. Distinguons deux sous-catgories: vnements temporels. Le plus souvent, les vnements temporels sont lis au scnario et correspondent au fait que la tte de lecture atteint, affiche ou quitte une image donne. En ActionScript, lvnement Event.ENTER_FRAME correspond lentre de la tte de lecture dans une image du scnario. Mais il existe des vnements temporels compltement dtachs du scnario. En ActionScript, la classe Timer (la notion de classe sera aborde la section suivante) permet dinstancier une horloge dans lanimation, grce laquelle on mesure le temps coul et gnre des vnements des moments dfinis numriquement.
vnements non temporels. Toutes sortes de choses peuvent se passer pendant le droulement de votre animation et vous tes susceptible dcrire du code excuter en rponse ces vnements: le tlchargement de certaines donnes dmarre, progresse, se termine (Event.INIT, ProgressEvent.PROGRESS, Event.COMPLETE), la lecture dun son atteint la fin du fichier audio, une erreur est survenue, une interruption sest produite, etc. Certains systmes multimdia ont un vnement particulier parce quil a tout lair dun anti-vnement qui entre dans cette sous-catgorie, cest celui qui capture le fait quil ne se passe rien, ou plus exactement que linteracteur ne fait rien (en Lingo idle). En programmation vnementielle, la tche consiste associer des blocs dinstructions un vnement en raction duquel ils sexcuteront. Une telle association vnement/instructions sappelle un gestionnaire dvnement. En ActionScript, la programmation vnementielle consiste crire des couteurs dvnements. La syntaxe de la dfinition dun couteur dvnements est la suivante:
<quicoute>.addEventListener( <quelvnement>, <queFaireEnRponse>);
Dans une instruction de dfinition de ce type, <quicoute> est la rfrence lobjet cible de lcouteur, par exemple une occurrence de symbole bouton, dsigne via son nom doccurrence. Le premier paramtre de la mthode addEventListener() (la notion de mthode sera aborde la sectionsuivante), <quelvnement>, est le type des vnements couts. Comme nous lavons vu ci-dessus, les types par exemple MouseEvent.MOUSE_UP sont dfinis dans des classes spcifiques, dont le nom est ou se termine par Event. Enfin, le second paramtre de la mthode addEventListener(), <queFaireEnRponse>, est liden-
485
tifiant de la fonction excuter chaque fois quun vnement du type cout se produit. Si tout cela vous parat abstrait, rassurez-vous: de nombreux exemples concrets de dfinition dcouteur dvnements vous seront proposs la Fiche80. Chaque script peut contenir, outre des dclarations de variables et de fonctions, des dclarations pour un ou ventuellement plusieurs couteurs dvnements. Lensemble des scripts que lanimation contient constitue le programme ActionScriptde celle-ci.
Lapproche par objets

Dans le paradigme de programmation par objets, on abstrait des donnes qui se ressemblent au sens o elles ont en commun un certain nombre de caractristiques et de fonctionnalits en dfinissant une classe. Outre labstraction de donnes, une classe factorise de linformation, savoir la structure qui est commune tous les objets qui sont issus de la classe. Ces objets sont dits instancis partir de la classe, ce sont des instances de la classe. Votre chance pour comprendre le principe de la programmation par objets est que lenvironnement de ralisation Flash suit lui-mme ce paradigme. Vous avez dj abondamment rencontr le mot instanciation, partir du Chapitre5 dans lequel nous avons expliqu en quoi consiste linstanciation dun symbole en un certain nombre doccurrences. la section Instancier des symboles en occurrences, Fiche 33, nous avons mme dj fait le rapprochement avec linstanciation dune classe en un certain ombre dobjets. Effectivement en programmation par objets en gnral et en ActionScripten particulier, lobjet est la classe ce que loccurrence est au symbole dans lenvironnement de ralisation Flash. Dans les deux cas, il sagit dun rapport dinstanciation. Lobjet au sens de la programmation est une instance de la classe (dailleurs le mot anglais pour occurrence est instance). La classe est une sorte dobjet-type, un patron, un gabarit pour la cration de chaque objet lors de linstanciation. Le nom dune classe ActionScriptcommence toujours par une majuscule ( part cela, ce nom suit les rgles dj voques pour les identifiants en fin de section Compilation de cette fiche). Le langage ActionScript 3.0 contient une impressionante quantit de classes prdfinies. Par exemple, la classe MovieClip pour les symboles clips danimation. Mais nous pouvons aussi dfinir nos propres classes, par exemple, la classe Papillon. Les lments constitutifs dune classe, ses caractristiques, sont de trois ordres: Proprits. La premire chose que les objets instances dune classe ont en commun, ce sont des donnes. Les proprits de lobjet, ses attributs, sont des variables. Si les objets dune mme classe possdent tous les mmes proprits dfinies dans la classe, les valeurs de ces proprits sont propres chaque instance et peuvent diffrer de celles dune autre instance de la mme classe. En ce sens, les instances de classe sont semblables aux enregistrements dune base de donnes. Percevons-nous un instant comme des objets, instances de la classe Humain. Nous avons tous une proprit Humain.date-
486
Flash CS5
DeNaissance. La valeur de cette proprit est le plus souvent diffrente pour chaque humain, mme sil peut arriver que deux humains soient ns le mme jour. Les proprits sont le moyen de variations partir du patron, du gabarit que constitue la classe. Certaines valeurs de proprits sont constantes, mais dautres sont susceptibles de varier au cours de lexcution, sparment dans chacun des objets. Un objet instance de la classe MovieClip ou bien de la classe Papillon est plac sur la scne. Il a donc une position, cest--dire des proprits MovieClip.x et MovieClip.y ou Papillon.x et Papillon.y (on appelle syntaxe point cette faon dcrire la proprit en rfrence sa classe et spare de celle-ci par un point). Une occurrence de symbole clip danimation a bien dautres proprits, comme le montre la Figure77.1.
Figure77.1
Une partie des proprits de la classe MovieClip, propres aux occurrences de symboles clips danimation.
Une occurrence quil sagisse dinstanciation dun symbole bouton ou clip danimation, dun champ de texte ou encore dun pseudo-symbole image bitmap, son ou vido doit avoir reu un nom doccurrence si vous voulez pouvoir y faire rfrence dans votre code ActionScript. Ce nom doccurrence suit les rgles nonces ci-dessus concernant les identifiants. En utilisant le suffixe _mc pour une occurrence de clip danimation et le suffixe _btn pour une occurrence de bouton, vous pourrez bnficier dune aide plus
487
grande de lenvironnement de programmation (voir la fichesuivante). Dans lexemple de la Figure77.2, loccurrence du symbole clip danimation battement_mc a reu le nom leFlamb.
Figure77.2
Le nom doccurrence est indispensable pour pouvoir manipuler celle-ci par programmation ActionScript.
Mthodes. La seconde chose que les objets instances dune classe ont en commun, ce sont des fonctionnalits. Les mthodes de lobjet sont des fonctions. Ces fonctions peuvent agir sur lobjet, faire des oprations sur ses proprits, communiquer avec dautres objets, etc. Ce sont en quelque sorte des effectueurs de lobjet. Cest par lexistence des mthodes quune classe est plus quun ensemble, quune base de donnes: elle possde non seulement des lments, mais aussi des oprations. Un objet instance de la classe Papillon possderait sans doute une mthode Papillon.battreDesAiles() (remarquez que lon utilise galement la syntaxe point pour les mthodes). Toute occurrence de symbole clip danimation est dote des mthodes MovieClip.play() et MovieClip. stop() pour lancer et arrter sa lecture et de bien dautres encore, comme le montre la partie gauche de la Figure77.3. vnements. Certaines classes peuvent faire lobjet de dfinition dvnements qui leurs sont propres. La Figure77.3 (partie droite) montre une liste non exhaustive des vnments quune occurrence de symbole clip danimation, instance de la classe MovieClip, est susceptible de recevoir. Les classes prdfinies en ActionScript3.0 sont lgion. Elles sont regroupes en paquetages thmatiques. Un autre aspect important de lapproche par objets est la notion de hirarchies dhritage des classes, dj au niveau des classes prdfinies du langage, mais aussi de celles que vousmme dfinissez. La notion dhritage relve dun niveau de programmation plus avanc que celui que nous visons dans ce chapitre et nous nen dirons pas plus.
488
Figure77.3
gauche. Une partie des mthodes de la classe MovieClip, propres aux occurrences de symboles clips danimation. droite. Une partie des vnements de la classe MovieClip, propres aux occurrences de symboles clips danimation.
Flash CS5
Historique dActionScript
Terminons cette fiche par un bref rappel historique sur le langage informatique ActionScript. Au dpart, avec Flash 4, est apparu un simple langage de scripts pour ajouter de linteractivit au scnario dune animation, qui sans eux ne peut tre que lue linairement du dbut la fin. Grce quelques scripts de branchement ultra simples (voir Fiche25), il devenait ainsi possible de passer dune lecture linaire de lanimation une excution non linaire. Ce langage ne sappelait pas encore ActionScript. ActionScript 1.0 fait son apparition avec Flash 5. Cest un langage procdural. Sur cette base, ActionScript2.0, qui est un langage de programmation orient objet, a tendu les possibilits sans rien remettre en question de la version1.0 (rtro-compatibilit complte ou presque). Lextension a t vaste, fournissant tous les outils ncessaires pour manipuler par programme des lments de tous types de mdias (formes vectorielles, texte, images bitmap, animations, son, vido, lments dinter-
489
face) et dvelopper de vritables applications sur la Toile (navigation, communication avec les serveurs, scurit, etc.). La version3.0 fut une tout autre affaire. Cette refonte majeure a fait dActionScriptun vrai langage de programmation orient objet, robuste, qui na rien envier C++ ou Java (pardonnez-nous un peu de jargon technique: le cur du langage ActionScript3.0 est conforme la spcification ECMAScript4, laquelle rpond galement le langage JavaScript). Avec ce langage, vous disposez dun outil pour raliser des applications pour la Toile, dont on peut dire que les seules limites sont celles des capacits matrielles (quantit de mmoire de la machine cible, puissance de calcul de son processeur, dbit de sa connexion la Toile), du lecteur Flash, de votre imagination et de votre savoir-faire ! Avec lavnement de AIR (voir section Publier un fichier AIR, Fiche 87), vous pouvez mme dvelopper des applications pour le bureau, cest--dire qui sexcutent sur un ordinateur comme nimporte quelle autre application, en dehors de tout navigateur. Le revers de cette belle mdaille est que ce qui a t gagn en puissance dapplication a t perdu en facilit dapprentissage. Autre ombre au tableau, les remises en question furent tellement profondes et tout repens la base, quActionScript3.0 est incompatible avec les versions2.0 et a fortiori 1.0. Demble, vous devez choisir la version dActionScript que vous allez cibler dans vos paramtres de publication (voir Fiche82). Ne vous laissez pas abuser par le fait que les dernires versions du lecteur Flash partir de la9 sont indiffremment capables de relire des animations Flash ralises en ActionScript2.0 ou3.0. Derrire cette rtro-compatibilit, il y a en fait deux versions distinctes du lecteur Flash et dans une mme animation, aucune hybridation nest possible entre ActionScript2.0 ou 3.0: cest lun ou lautre. Si vous tes dbutant en ActionScript, notre conseil est que vous optiez sans tat dme pour lActionScript 3.0, car vous prendrez demble de bonnes habitudes de programmation. Profitez donc de la chance que vous avez de ne pas devoir dsapprendre lActionScript2.0! Sinon, si vous avez dj acquis des bases en ActionScript2.0, quoi quil vous en cote de faire la transition et le dsapprentissage quelle implique (personne naime dfaire pour refaire), puisez de la motivation dans les perspectives de ralisation bien plus vastes que vous offre lActionScript3.0. Dans un cas comme dans lautre, considrez que fatalement le jour viendra o lActionScript2.0 sera dclar obsolte et seul lActionScript3.0 subsistera. Et surtout, ne retournez pas largument pour attendre la sortie dune ventuelle version 4.0 pour faire le pas. Soyez confiant dans la solidit des fondations de la version3.0, solidit reconnue par les experts. Il y a fort parier que le jour o un ventuel ActionScript4.0 sortira, votre investissement intellectuel dans lapprentissage dActionScript3.0 sera toujours profitable. Au terme de cette ficheplutt dense, nous voici assurs que lessentiel des termes de programmation que vous rencontrerez dans la suite de ce chapitre et dans vos propres explorations a t dfini. Laissez tout cela dcanter et revenez-y au besoin au fil de votre pratique.
490
Fiche 78
Flash CS5
Se familiariser avec les outils Flash de programmation

Le panneau Actions
Quitte le personnaliser par la suite, le mieux pour commencer est sans doute dopter pour lespace de travail Dveloppeur (voir section Les espaces de travail, Fiche 1), reproduit la Figure78.1. gauche de la scne se trouve le panneau Projet (voir Fiche 4) et en dessous de celui-ci un dock qui runit les deux panneaux Composants (voir Chapitre10) et Bibliothque (voir Chapitre5). droite de la scne se trouve le panneau Proprits. Le panneau Outils est au-dessus de la scne, tandis quen dessous se trouvent en dock deux panneaux spcifiques au dveloppement ActionScript, dans lesquels saffichent diverses informations. Si votre code source nest pas conforme la grammaire formelle dActionScript3.0, des messages safficheront dans le panneau Erreurs de compilation, partir desquels vous tenterez de cerner lorigine du problme. Pour vous aider dans le dbogage, vous pourrez vousmme faire safficher des informations dans le panneau Sortie lors de lexcution.
Figure78.1
Lespace de travail Dveloppeur.
La programmation en elle-mme se fait dans le panneau Actions.

un niveau plus avanc, on crit des fichiers AS externes lanimation. Cela se fait dans une fentre de script, dont les outils sont un sous-ensemble de ceux du panneau Actions, dcrits ci-dessous.
Plusieurs chemins vous y mne: la commande Fentre> Actions, ou la commande homonyme dans le menu contextuel des images-cls, ou encore, lorsque vous avez slectionn une image-cl, le clic sur licne de cercle bleu orn dune flche qui apparat en haut droite du panneau Proprits, comme le montre la Figure78.2.
491
Figure78.2
La flche daccs au panneau Actions dans les proprits dune image.
Raccourci
OptiOn+F9 (Mac) ou F9 (Windows) ouvre le panneau Actions.
Le panneau Actions se dcompose par dfaut en trois grandes zones principales, visibles sur la Figure78.3. En bas gauche, ds linstant o votre animation contient plusieurs scripts, se trouve le navigateur de scripts. Comme son nom lindique, cette zone est le moyen le plus simple pour naviguer parmi vos diffrents scripts. Les listes que vous pouvez rduire et dvelopper font linventaire de toutes les images-cls des diffrents scnarios (le scnario principal et les scnarios imbriqus; voir Fiche36) qui contiennent un script. Il existe au moins une liste intitule Squence 1. Les ventuelles autres squences (voir Fiche24) ont chacune leur liste. Quant aux scnarios imbriqus, ils ont leur sous-liste dans la liste Dfinition(s) de symbole. Enfin, en tte du navigateur de scripts, une rubrique Slection actuelle vous permet de localiser le script slectionn, dont le contenu est visible dans la grande zone ddition droite, qui nest jamais quun diteur de texte.
Figure78.3
Le panneau Actions, dans une configuration o les trois grandes zones principales sont visibles: le navigateur de scripts (en bas gauche), la zone ddition et la bote outils des actions (en haut gauche).
492
Flash CS5
Dans le panneau Actions, tout est redimensionnable. Au survol des barres de sparation horizontale et verticale entre zones, lorsque le pointeur se transforme en trait double et double flche, vous pouvez faire glisser pour redfinir les proportions. Ces barres de sparation ont galement un bouton rectangulaire allong, orn dun triangle noir. Pour la barre verticale, le bouton est une bascule montrer/masquer la ou les zones de gauche. Pour la barre horizontale, le bouton est une bascule entre bote outils des actions et navigateur de scripts. Ainsi, dans la disposition de la Figure78.4, il ne reste plus que le navigateur de scripts et la zone ddition.
Figure78.4
Une autre vue du panneau Actions.
Pour arriver la configuration reproduite Figure78.4, on a galement double-cliqu dans le navigateur de scripts, celui qui tait dit Figure78.3, ce qui a eu pour rsultat de lpingler. Un script pingl reste accessible via son onglet sous la zone ddition pendant que lon dite un autre script, donc mme sil ne fait plus lobjet de la slection. pinglez ainsi les scripts sur lesquels vous travaillez un moment donn. Vous pourrez ainsi passer rapidement de lun lautre, sans avoir jouer de la barre de dfilement dans le navigateur de scripts. Le dernier, droite, des quatorze boutons de la barre doutils se trouvant au-dessus de la zone ddition, est une bascule qui permet de masquer ou afficher lunique zone ou les deux zones gauche du panneau Actions. Ainsi, dans la configuration reproduite Figure 78.5, seule subsiste la zone ddition. Les commandes les plus utiles de lenvironnement de programmation font lobjet dun bouton de raccourci. La Figure78.6 explicite les quatorze commandes correspondantes (Afficher ou masquer la bote outils, comme nous lavons not plus haut, concerne aussi le navigateur de scripts). Vous avez l tout ce quil vous faut pour rdiger votre code source, le formater, lditer, y faire des recherches et le dboguer. lextrmit droite de cette srie, se trouvent galement les boutons des Fragments de code, de lAssistant de script et daccs laide ActionScript.
493
Figure78.5
Une dernire vue du panneau Actions, bote outils des actions masque.
Figure78.6
Les boutons de raccourcis de commandes du panneau Actions.
Options de dbogage Rduire la slection Format automatique Insrer un chemin cible Ajouter un nouvel lment au script Dvelopper tout Appliquer un commentaire de ligne Afficher ou masquer la bote outils
Rechercher Vrifier la syntaxe Afficher les conseils de code
Supprimer le commentaire Appliquer un commentaire de bloc Rduire entre les accolades
Aide lcriture dinstructions ActionScript

La troisime des grandes zones est la bote outils des actions, gauche du panneau Actions (voir Figure 78.7), en haut lorsquelle partage lespace avec le navigateur de scripts. En en-tte de cette zone se trouve un menu droulant dans lequel vous choisissez avec quelle version dActionScriptvous travaillez (ou quelle version dActionScriptpour Flash Lite, si vous dveloppez destination des appareils portables). Cette zone est une liste hirarchique. Un niveau est rduit lorsque son icne est un livre orn dune flche; dvelopp lorsque son icne est un livre ouvert (voir Figure78.7). Au niveau le plus bas les mthodes de la classe MovieClip, dans lexemple de la Figure78.7, les mots-cls du langage sont prcds dune icne de cercle bleu orn dune flche. Lorsque vous en slectionnez un, sous rserve que les conseils de code soient activs, par commande ou par option des prfrences
494
Flash CS5
(voir Figures 78.6 et 78.21), aprs un temps de latence une info-bulle jaune vous donne une description succincte, comme le montre la Figure78.7. Si vous double-cliquez sur llment ou si vous le glissez-dposez, il se met en place dans la zone ddition de script. La Figure78.8, montre la mthode gotoAndPlay() applique un objet not_yet_set, cest-dire qui nest pas encore dfini. vous de remplacer not_yet_set par lidentifiant valide dune occurrence de clip danimation de votre animation Flash. Le conseil de code ce niveau nest pas trs pertinent puisquil sagit dune liste trs gnrale.
Figure78.7
Insertion dinstruction dans le code source via la bote outils des actions (conseils de code activs).
Figure78.8
Aprs insertion de linstruction.
Souvent, vous aurez besoin de la description dun lment du langage. Pour cela, cliquez le mot-cl pour le slectionner dans la bote outils des actions, comme dans la Figure78.7 (vous pouvez galement slectionner un mot-cl dans le script ou placer le curseur dinsertion juste avant), puis appuyez sur la touche F1, ou demandez lAide dans le menu contextuel, ou encore cliquez sur le bouton Aide, orn dun point dinterrogation, en haut droite du panneau Actions pour accder au dictionnaire en ligne ActionScript (si vous ntes pas connect, il sagit de la version en local de laide). La Figure78.9 montre, dans une fentre
495
du navigateur, lentre du dictionnaire en ligne ActionScript3.0 pour la mthode gotoAndPlay() de la classe MovieClip. On y trouve une description plus toffe de lutilit de la mthode et de son usage (paramtres, ventuelle valeur retourne). Lentre se termine par un exemple, mais les exemples pris sont dune telle trivialit quils napportent la plupart du temps rien de plus la comprhension. Tout en bas de la bote outils se trouve une entre Index, en jaune, visible sur la Figure78.10. Cest une alternative laccs hirarchique via le paquetage, puis la classe. Ici, tous les lments du langage sont repris en ordre alphabtique (bon courage pour atteindre la mthode zoom()!).
Figure78.9
Une entre du dictionnaire en ligne ActionScript3.0.
Figure78.10
Laccs aux lments du langage par ordre alphabtique, en bas de la bote outils des actions.
496
Flash CS5
Rien ne vous oblige utiliser la bote outils des actions. En fait, vous avez trois alternatives. La premire se situe dans le premier des quatorze boutons de commandes (voir Figure78.6), orn dun signe plus. Comme le montre la Figure78.11, lorsque vous cliquez sur ce bouton vous droulez le menu des paquetages, partir duquel vous droulez celui des classes du paquetages, partir duquel vous droulez celui des mthodes, des proprits ou ventuellement des vnements. Comme prcdemment, slectionner un lment linsre dans le script. La diffrence essentielle avec laccs galement hirarchique que propose la bote outils des actions, cest quici aucune aide nest offerte. Cela suppose donc de votre part une bonne familiarit avec llment de langage que vous voulez insrer.
Figure78.11
Le menu et les sous-menus du bouton Ajouter un nouvel lment au script.
La seconde alternative la bote outils ou plus exactement, un complment dassistance aux deux alternatives prcdentes est de passer en mode de rdaction assiste. Cliquez pour cela sur le bouton Assistant de script, orn dune baguette magique. Une quatrime zone apparat dans le panneau Actions, au-dessus de la zone ddition de script, comme le montre la Figure78.12. Cette fois-ci, les paramtres ventuels de llment de langage insr (toujours par double-clic dans la bote outils des actions ou par slection dans les menus droulants) font lobjet de champs de saisie. Comme le montre la partie droite de la Figure78.12, ds que vous renseignez lun de ces champs, le code est mis jour instantanment. Remarquez galement que la classe dont llment relve a fait lobjet dune instruction dimportation explicite en tte de script. Notez que, quelle que soit la mthode daide la rdaction qui vous agre (bote outils des actions, menus droulants ou assistant), aucune validation daucune sorte nest ncessaire: il ny a ni retour chariot enfoncer, ni bouton cliquer, llment de code sajoute instantanment votre script.
497
Figure78.12
Utilisation de lassistant de script.
La troisime et dernire alternative la bote outils des actions consiste, bien videmment, saisir directement le code ActionScript3.0 dans la zone ddition de script, et ce vos risques et prils. Cela dit, la version CS5 de Flash vous simplifie grandement la tche. Lenvironnement de dveloppement a t mis niveau avec ce qui existait dj dans Eclipse ou Flex Builder. Ainsi, dsormais ds que vous saisissez laccolade ouvrante dun bloc, son accolade fermante se met automatiquement en place dans le script.
Raccourci
CMd+ (Mac) ou Ctrl+ (Windows) affiche en surbrillance le bloc encadr par la premire paire daccolades, de crochets ou de parenthses.
La nouveaut la plus fondamentale est quau fur et mesure de votre frappe, des suggestions de code vous sont faites. Dans lexemple de la Figure 78.13, on commence dclarer une variable leClip qui va, comme son nom lindique, faire rfrence un clip danimation. Ds que la chane Mov a t saisie, le type MovieClip se slectionne automatiquement dans la liste droulante de suggestions. Il ne reste qu valider (retour chariot ou doubleclic) pour que le reste soit automatiquement complt. Comme le montre la Figure 78.14, ceci a galement pour effet dajouter en tte du script linstruction dimportation de la classe MovieClip qui appartient au paquetage flash.display (ce qui vous dispense davoir le retenir). Poursuivant lcriture du script, on souhaite rendre le clip glissable. Si lon se souvient que la mthode de la classe MovieClip qui ralise cela commence par start, il suffit de taper cette chane de caractres. La Figure 78.14 montre quau quatrime caractre la mthode startDrag() est slectionne automatiquement dans la liste droulante de suggestions.
498
Figure78.13
criture directe de script: premire suggestion de code.
Flash CS5
Figure78.14
criture directe de script: seconde suggestion de code.
Il suffit nouveau de valider pour profiter de lauto-compltion, dont le rsultat est visible Figure78.15. On y voit quil existe un second type dassistance sous la forme dune infobulle jaune donnant la signature de la fonction qui vient dtre insre, cest--dire les ventuels paramtres attendus et leur type de donnes, ainsi que le type de la valeur retourne par lappel de fonction. Dans lexemple de la Figure78.15, ce dernier est void, ce qui signifie quil ny a pas de valeur retourne, donc que lappel la mthode peut tre utilis comme simple instruction, sans tre affect une variable ou utilis dans une expression. Parfois, les derniers paramtres attendus sont entre crochets. Il sagit dune convention de notation universellement reconnue par les informaticiens pour signifier que la prsence de ces paramtres est facultative. Dans certains cas, plusieurs syntaxes sont possibles. Linfo-bulle contient alors des flches de navigation entre ces diffrentes possibilits. Par dfaut, dans la catgorie ActionScript des prfrences (voir Figure 78.21), loption Afficher les conseils de code est coche, ce qui signifie que vous bnficiez systmatiquement des listes contextuelles de suggestions et des info-bulles de signatures. Les premires saffichent juste aprs le point qui suit le nom dun objet, et contiennent les proprits et mthodes dont dispose la classe que cet objet instancie. Vous pouvez y naviguer laide des
499
touches flche haut et bas. Faites un choix dans la liste, cliquez en dehors de linstruction, ou enfoncez la touche EsC pour refermer la liste contextuelle. Les info-bulles apparaissent ds que vous tapez la parenthse ouvrante dappel de fonction. Tapez une parenthse fermante, cliquez en dehors de linstruction, ou enfoncez la touche EsC pour faire disparatre linfo-bulle. Les prfrences ActionScript permettent le rglage de la latence dapparition des conseils de code. Vous pouvez aussi dcocher loption daffichage systmatique, puis les faire safficher vous-mme au cas par cas: via le bouton Afficher les conseils de code de la barre doutils (voir Figure 78.6), ou la commande homonyme du menu des options. Votre curseur dinsertion doit tre plac aprs le point suivant le nom dun objet ou entre les parenthses dun appel de fonction.
Figure78.15
criture directe de script: troisime suggestion de code.
Raccourci
CMd+EspaCE (Mac) ou Ctrl+EspaCE (Windows) affiche la demande les conseils de code.
Pour faire des suggestions de proprits et de mthodes pertinentes, lenvironnement Flash sappuie sur le typage, cest--dire le fait que vous ayez dclar de quel type est une variable ou quelle classe un objet instancie. Dans ses premires versions, ActionScript tait un langage non typ. Pour pallier cette absence de typage et pouvoir fournir malgr tout des conseils de code, une convention de nommage des occurrences a t tablie. Le Tableau78.1, non exhaustif, vous donne pour les principales classes les suffixes utiliser lorsque vous donnez un nom doccurrence dans le panneau Proprits. En ayant termin le nom dune occurrence de clip danimation par le suffixe _mc ou celui dune occurrence de bouton par le suffixe _btn, lorsque vous tapez un point aprs avoir introduit un chemin cible, la liste contextuelle des proprits ou mthodes de la classe apparat.
500
Flash CS5
Tableau 78.1 Pseudo-typage par convention de nommage

Classe Button MovieClip String TextField TextFormat Sound Video Suffixe du nom doccurrence _btn _mc _str _txt _fmt _sound _video
Notez enfin, mme si cela concerne les programmeurs avancs, que depuis la version CS5 les suggestions de code fonctionnent non seulement avec les classes ActionScript natives, mais aussi avec les classes personnalises. Sous rserve quune telle classe ait fait lobjet dune instruction import en tte du script, des suggestions doivent safficher automatiquement aprs le point suivant le mot-cl this, et aprs lespace suivant les mots-cls new ou import. Nanmoins, au moment o nous rdigeons, un certain nombre dutilisateurs disent sur le forum Adobe rencontrer des problmes avec cette fonctionnalit qui semble instable. Les outils daide la rdaction nont rien de magique, contrairement ce que pourrait laisser croire licne de baguette magique de lassistant: vous devez savoir ce que vous voulez crire et Flash ne peut certainement pas le deviner, au mieux vous dire comment lcrire. Laide la syntaxe ActionScriptest fondamentale pour le dbutant et les classes ActionScript3.0 sont tellement vastes que lon nen a jamais vraiment fini dtre dbutant! Faites donc bon usage de la bote outils, ou des menus droulants pour les lments que vous assimilez. Lassistant, quant lui, est rput moins utile pour ActionScript3.0 que pour les versions prcdentes. vous de voir lusage. Laide la syntaxe ActionScriptest une chose, mais pour faire des progrs, le mieux est de se procurer des fragments de code fonctionnel, de les tudier (ventuellement en faisant de lexcution pas pas grce au dbogueur; voir fichesuivante), et partir de l, dadapter pour en faire votre programme ActionScript. Le panneau Fragments de code est une nouveaut de la version CS5 de Flash. Il peut vous tre utile si vous dbutez. Vous disposez l de code prfabriqu pour tout un ensemble de tches rcurrentes. tudier ce code est sans doute un bon moyen de vous familiariser avec la logique de la programmation ActionScript 3.0. Comme le montre la Figure 78.16, les fragments de code sont organiss par dossiers. Les trois suivants sont sans doute les plus importants pour dmarrer : Navigation dans le scnario (voir Fiche80, la section Piloter les diffrents scnarios), Gestionnaires dvnements (voir Fiche 80, les trois sections consacres aux vnements de survol, de clic et de clavier) et Animation (voir Fiche 80, la section vnements dimage). Dans le panneau, vous
501
pouvez survoler chaque fragment pour obtenir une info-bulle descriptive de la fonction de celui-ci.
Figure 78.16
Le panneau Fragments de code.
En rgle gnrale, un fragment de code cible un objet, qui est soit une occurrence de symbole ou de texte TLF, soit une image du scnario. La premire chose faire est donc de slectionner cet objet, dfaut de quoi vous obtenez lavertissement reproduit en haut de la Figure 78.17. Au cas o votre slection ne serait ni une occurrence de symbole, ni du texte TLF, celle-ci sera automatiquement convertie en symbole clip danimation (voir Fiche 36). Dans le cas o le fragment de code cible une occurrence, il lui faut un nom grce auquel le code pourra y faire rfrence. Si vous navez pas nomm loccurrence, vous obtenez lavertissement reproduit en bas de la Figure 78.17, qui vous informe quun nom va tre automatiquement attribu loccurrence. Pour insrer le fragment de code, il vous suffit de le double-cliquer. Vous pouvez aussi utiliser le bouton Ajouter limage actuelle, en haut gauche du panneau. Il est conseill de ddier un calque la programmation, au sommet de la pile des calques (voir fiche suivante, la section O placer les scripts). Si besoin, Flash cre automatiquement un calque Actions pour y placer le fragment de code. Comme le montre lexemple de la Figure 78.18, chaque fragment de code insr dans le script dbute par quelques lignes de commentaires prcieuses pour en comprendre la logique. Souvent, vous aurez personnaliser le fragment
502
Flash CS5
de code. Ces commentaires vous expliquent sur quels paramtres vous avez la possibilit dagir pour cela.
Figure 78.17
Beaucoup de fragments de code demandent la slection pralable dune image ou dune occurrence. Loccurrence cible doit galement avoir t nomme afin que le fragment de code puisse y faire rfrence.
Figure 78.18
Un fragment de code insr dans le script.
Vous ne serez pas toujours dbutant ! Avec un peu de pratique de la programmation ActionScript 3.0, vous constaterez sans doute que vous rcrivez rgulirement certains fragments de code, peut-tre plus sophistiqus que ceux, basiques, fournis avec Flash. Vous avez lopportunit de mmoriser vos propres fragments de code. Le panneau Fragments de code se distingue des autres panneaux en ce quil offre deux menus doptions. Le premier a licne habituelle. Le second, juste en dessous, a une icne dengrenage. Il est droul dans la Figure 78.19. La premire commande, Crer un fragment de code, ouvre la bote de dialogue reproduite Figure 78.20. Saisissez-y lintitul, le texte descriptif de linfo-bulle et le fragment luimme. Pour celui-ci, le plus simple est sans doute de partir dune slection dans lun de vos scripts pour navoir ensuite plus qu cliquer sur le bouton Remplissage automatique. Partout o apparat le nom de loccurrence cible dans votre code dorigine, remplacez celui-ci
503
par la chane instance_name_here et cochez la case doption sous le champ ddition du fragment de code.
Figure 78.19
Le menu des options du panneau Fragments de code.
Figure 78.20
Cration dun fragment de code.
Pour terminer cette sectionsur laide lcriture, il faut voquer la commande Insrer un chemin cible. Lorsque vous cliquez sur le troisime bouton, celui dont licne est un rticule (voir Figure 78.6), la bote de dialogue reproduite Figure 78.21 saffiche. Slectionnez-y simplement loccurrence cibler. Un chemin cible est un chemin dans la hirarchie des scnarios imbriqus (voir Fiche36). Le chemin dcrit la succession des symboles imbriqus en sparant leurs noms doccurrence par des points. Un chemin cible peut tre absolu ou
504
Flash CS5
relatif, comme le montre les deux boutons radio de la bote de dialogue de la Figure78.21. Si vous optez pour un chemin cible absolu, il commence par lexpression Object(root), la racine, donc le scnario principal. Si vous optez pour un chemin cible relatif, il commence par lexpression Object(this), quil faut comprendre comme ce scnario, cest--dire le scnario auquel appartient ce script. Utilisez le bouton Insrer un chemin cible, car avec lui vous liminez le risque dune faute de frappe en saisissant un nom doccurrence, puisque vous slectionnez au lieu de taper au clavier.
Figure78.21
La bote de dialogue de la commande Insrer un chemin cible.
Travail sur le code source

Dans la catgorie ActionScriptdes prfrences de Flash, reproduite Figure78.22, vous pouvez paramtrer laffichage dans la zone ddition de script. Par dfaut, loption Indentation automatique est active. Un champ vous permet de dfinir combien de caractres espace correspond une tabulation. Par dfaut, la saisie de toute accolade ouvrante, laccolade fermante est automatiquement place (nouveaut de la version CS5). Par dfaut galement, loption Conseils de code est galement active. Laissez-la ainsi pour dbuter. Quand vous serez plus laise, vous pourrez revenir ici pour la dcocher. Pour que les conseils de code ne soient trop intrusifs, un compromis consiste dfinir un Dlai de latence en secondes avant quils ne saffichent. La Coloration du code est une option utile pour la lisibilit des scripts. Elle est coche par dfaut et personnellement nous ne la dcochons jamais. Par contre, une certaine confusion rgne dans les puces de couleurs et les intituls de ce quoi la couleur est cense correspondre. Pas de problme pour Mots-cls, Commentaires et Chanes (de caractres). Par contre, sachez que la couleur intitule Premier-plan sera en fait celle de vos identifiants et des symboles non alphanumriques du langage. Quant la couleur intitule Identifiants, elle est attribue aux types, classes, proprits et mthodes. Le formatage automatique que Flash peut appliquer au code source que vous rdigez peut tre modul en cochant ou non six rgles diffrentes, comme le montre la catgorie Format automatique des prfrences de Flash, reproduite Figure78.23. vous dessayer les diffrentes combinaisons possibles et, en jugeant de leur effet dans la zone dAperu, de choisir laquelle vous convient le mieux, tout fait subjectivement.
505
Figure78.22
Les prfrences ActionScriptde Flash.
Figure78.23
Les prfrences Format automatique de Flash.
506
Flash CS5
Prenez la saine habitude de placer des commentaires dans votre code, cest--dire du texte que le compilateur ignorera et qui nest l qu lintention des pauvres cerveaux humains qui tentent dsesprment de comprendre quoi servent ces fichues lignes dinstructions ! Faites-le pour vos co-quipiers, ils ne vous respecteront que plus. Mme si vous tes un monstre dgosme, faites-le quand mme : pour vous ! On est toujours surpris lorsque lon relit son propre code, des mois aprs lavoir crit, quel point il semble avoir t crit par un autre ! Ne rien commenter est stupide. Lexcs inverse lest tout autant. Certaines instructions sont sans mystre, ni subtilit. Les commenter (exemple : this. gotoAndPlay(squenceFinale); // aller la squence finale du scnario) serait totalement redondant et nuirait la lisibilit du script. En ActionScript, les commentaires sont de deux sortes. La premire, dite commentaire de ligne, sert aux commentaires courts qui tiennent sur une ligne de script, comme dans lexemple prcdent: le compilateur ignore tout ce qui suit une squence //, jusquau prochain retour chariot. La seconde, dite commentaire de bloc, sert aux commentaires plus longs qui stendent sur plusieurs lignes de script : le compilateur ignore tout ce qui se trouve entre une squence ouvrante /* et une squence fermante */. Vous pouvez bien sr commenter vous-mme facilement la main, puisque les squences //, /* et */ sont courtes saisir et faciles effacer. Mais vous pouvez aussi faire une slection dans le script, puis cliquer sur lun des boutons Appliquer un commentaire de bloc ou Appliquer un commentaire de ligne (voir Figure78.6). La programmation est dabord une cole de la frustration ! Immanquablement, un jour plus proche que vous ne limaginez vous allez vous retrouver devant une animation qui ne fera pas ce pour quoi vous lavez pensez-vous programme. Commence alors la chasse au bogue qui fait drailler votre belle machinerie. Gnralement, en conjonction avec lutilisation du dbogueur (voir fichesuivante), vous testerez des instructions alternatives susceptibles de rsoudre le problme. Mais comme vous ntes pas certain que ces instructions alternatives vont bel et bien faire laffaire, plutt que dcraser les anciennes avec les nouvelles, conservez les instructions anciennes lintrieur dun commentaire de bloc (ou un commentaire de ligne pour une instruction isole). Si daventure vous dcidiez de revenir elles, il suffirait deffacer les instructions alternatives, puis de placer le curseur dinsertion dans les anciennes instructions commentes et de cliquer sur le bouton Supprimer le commentaire (voir Figure78.6), lequel les restaurera comme instructions compiles. Lorsque votre code commence prendre de lampleur, plutt que de le faire dfiler dans la zone ddition, vous pouvez le compacter temporairement en rduisant des blocs entiers dinstructions. La Figure78.24 illustre la rduction du bloc corps dune boucle for, qui permet du coup sans dfilement de voir linstruction if qui la suit. Rduisez des blocs laide des commandes Rduire entre les accolades et Rduire la slection (voir Figure78.6). Vous pouvez constater dans la partie basse de la Figure78.24, que lorsquun bloc a t rduit, un triangle noir apparat en tte de ligne. Cliquez sur ce triangle pour re-dvelopper le bloc. Pour re-dvelopper tous les blocs rduits, utilisez la commande Dvelopper tout (voir nouveau Figure78.6).
507
Figure78.24
La rduction dun bloc dinstructions dans laffichage du script.
La Figure78.25 montre le menu doptions du panneau Actions. On y trouve des options daffichage du code: Caractres masqus (symboles pour les blancs: espaces, tabulations, retours chariot), Numros de ligne, Retour la ligne (automatique, pour que laffichage ne soit pas tronqu), ainsi quun accs aux Prfrences. On y trouve galement une commande Rechercher et remplacer, trs pratique pour faire des modifications cohrentes didentifiants.
508
Flash CS5
Figure78.25
Le menu doptions du panneau Actions.
Fiche 79
Une session type de programmation ActionScript

O placer les scripts
Au niveau de dbutant en programmation ActionScript, tout le programme est mis en place dans diffrents scripts du scnario principal ou de ses scnarios imbriqus ( un niveau plus avanc, on dfinit aussi voire uniquement des classes ActionScriptdans des fichiers AS externes lanimation). Tout script doit tre attach une image-cl. Lorsque la tte de lecture atteint une image-cl contenant un script, elle en excute les instructions. Une bonne pratique pour vous y retrouver plus facilement est de crer dans chaque scnario susceptible de recevoir un ou plusieurs scripts, un calque ddi la programmation en haut de la pile de calques. Certains lappellent actions. Dans lexemple de la Figure79.1, ce calque se nomme scripts et juste en dessous se trouve le calque ddi repres (voir section Sauts dans le scnario, Fiche 25). Lemplacement des scripts est facilement reprable grce au petit a minuscule qui apparat au-dessus du cercle vide dnotant limage-cl vide de contenu (visuel). Sur ce calque ddi lActionScript, en chaque image o un script est ncessaire remarquez sur la Figure79.1 quil sagit souvent dune image o est galement dfini un repre du scnario, crez une image-cl. Pour saisir le code du script, il suffit douvrir le panneau Actions (voir fiche prcdente), aprs avoir slectionn limage-cl du calque scripts
509
laquelle ce script doit tre attach. Le panneau Actions est intitul Actions - Image (voir Figure79.15), indiquant que vous ditez un script dimage.
Figure79.1
Le calque ddi aux scripts est le premier du scnario principal, au-dessus de tous les autres.
La Figure79.2 montre le scnario du clip btnAla6 dont une occurrence est instancie dans le scnario principal de lanimation reproduit Figure79.1. Vous constatez que la logique est la mme dans les scnarios imbriqus: celui-ci possde ses propres calques ddis scripts et repres. Ici le scnario na que trois images, correspondant aux trois tats du bouton simul via un clip danimation. Le navigateur de scripts (voir section Le panneau Actions, Fiche 78) vous permet de passer facilement dun script lautre au sein de larborescence des scnarios imbriqus. Au fur et mesure de votre saisie du code dans la zone ddition du panneau Actions (voir ficheprcdente), Flash lui applique un premier formatage. Si vous souhaitez un formatage plus avanc, lassistant de script tant dsactiv, cliquez sur le bouton Format automatique (voir Figure78.6). Cette opration de formatage est prcde dune vrification de la syntaxe, ce qui signifie que nous ne sommes plus simplement dans la mise en forme, mais dj dans la compilation.
6. La figure est une copie dune ralisation effective, dans laquelle nous navons pas appliqu deux conseils donns plus haut. Dune part, nous avons accentu lidentifiant (nous aimons trop la langue franaise pour ne pas nous priver de la respecter quand les signes diacritiques sont correctement traits). Dautre part, nous navons pas termin le nom de loccurrence de clip danimation par le suffixe _mc (nous sommes suffisamment avanc pour nous passer de lassistance la rdaction que cela apporte). Par ailleurs, cette occurrence de clip danimation faisant office de bouton, nous lui avons donn le prfixe btn. Appliquant les conseils, vous la nommeriez plutt btnAlea_mc.
510
Figure79.2
On retrouve la mme logique dorganisation dans un scnario imbriqu.
Flash CS5
Compilation
Sil y a vrification implicite de la syntaxe de votre code source lors de son formatage automatique, vous pouvez aussi demander celle-ci explicitement en cliquant sur le bouton Vrifier la syntaxe (voir Figure78.6). Lorsque vous savez parfaitement comment programmer ce que vous voulez et que vous avez t vigilant dans la rdaction du script, tout se passe bien et un sourire illumine votre visage en constatant que le panneau Erreurs de compilation reste vide (Figure79.3).
Figure79.3
Ce que lon aimerait toujours voir: le panneau Erreurs de compilation vide.
Si vous demandez le formatage automatique dun script contenant des erreurs, le message reproduit Figure79.4 vous en avertit. Ne faites pas la grimace.
511
Figure79.4
Malheureusement, programmer cest aussi se confronter ce genre de message.
Lorsque le compilateur a dtect des erreurs dans votre programme, la premire chose faire est daller consulter linformation qui sest affiche dans le panneau Erreurs de compilation, dont la Figure79.5 donne un exemple. Dans ce cas de figure, la colonne Emplacement nous apprend que la cause du problme se trouve dans le script plac en image 1 du calque scripts du scnario du symbole btnSpec, plus exactement en ligne1 de ce script. La seconde colonne, Description, donne un code derreur totalement hermtique, suivi dune description succincte, mais plus accessible, du problme: Erreur de syntaxe : leftparen est attendu devant vol.. Avec un niveau danglais grand dbutant, nous comprenons alors quil sagit dun problme de parenthse gauche. Aprs vol, le compilateur sattendait trouver la parenthse ouvrante de fonction.
Figure79.5
Le panneau Erreurs de compilation, signalant une erreur.
Dans ce cas, il nest mme pas la peine daller scruter le code source dans le panneau Actions, puisque lon voit quune espace sest malencontreusement insre au milieu de lidentifiant survol, ce qui a t analys par le compilateur comme la succession de deux identifiants sur et vol, do lerreur. Il ne reste qu supprimer cette espace dans la zone ddition du panneau Actions. Aprs cela, en appelant nouveau la commande Vrifier la syntaxe, le panneau Erreurs de compilation devrait se vider.
Test et dbogage
ce niveau, vous avez compil avec succs, ce qui signifie que votre code source est dpourvu derreur syntaxique, car conforme la grammaire ActionScript3.0. Cela ne signifie pas pour autant que ce code source soit dpourvu derreur smantique, savoir quil soit conforme au sens que vous entendez lui donner, autrement dit qu lexcution il fasse bel et
512
Flash CS5
bien ce que vous attendez de lui. Dans tout langage, il y a trois niveaux successifs: lexical (lorthographe), syntaxique (la grammaire) et smantique (le sens). Nous avons vu quaux deux premiers niveaux, le compilateur peut se charger de vrifier si votre code source est correct. Au niveau de la smantique, il ny a malheureusement aucun programme pour vrifier que votre code source est correct! Cest l toute la difficult et la grandeur du mtier de programmeur et aussi la joie quil y a derrire tout dfi relev. Lorsque votre code source est faux smantiquement, quil ne rpond pas correctement au problme pos, cest vous et vous seul de trouver o la logique draille. Sil nexiste aucun logiciel pour automatiser cette tape de la programmation, il existe nanmoins un outil qui peut tre dun grand secours dans lauscultation du code source malade. Cet outil qui sert localiser les bogues 7 sappelle un dbogueur. Avant de lancer le dbogueur, le pralable indispensable consiste placer au moins un point darrt quelque part dans votre code source. Sous dbogueur, la rencontre dun point darrt, lexcution se suspend juste avant linstruction sur laquelle il est pos. Lexcution ainsi suspendue, le dbogueur vous offre diffrentes commandes pour la reprendre pas pas sous votre contrle. Pour poser un point darrt, dans la zone ddition du panneau Actions, cliquez gauche dune ligne de code, ce qui fait apparatre dans la marge un gros point rouge, comme le montre lexemple de la Figure79.6 qui contient deux points darrt. Un nouveau clic supprime le point darrt. Vous pouvez galement utiliser la commande Basculer le point darrt, dans le menu des Options de dbogage, droul sur la Figure79.6. La seconde commande de ce menu vous permet de Supprimer tous les points darrt.
Figure79.6
La commande Options de dbogage.
7. Le terme bogue est la francisation de langlais bug, cafard. Non pas quun programme qui ne marche pas donne le cafard, quoique Lorigine du terme remonte au temps des pionniers. lpoque, cest--dire avant les circuits intgrs, un ordinateur tait entre autres choses une grosse armoire lectrique pleine de connexions. Il se trouve quun jour o un programme dfaillant rsistait toutes les vrifications des ingnieurs, quelquun dcouvrit lorigine du problme en ouvrant larmoire. Celle-ci tait pleine de cafards qui craient des courtscircuits lectriques, lesquels dnaturaient linformation encode. Le bogue ntait en loccurrence pas logiciel, mais matriel et mme animal!
513
Les points darrt sont enregistrs avec le fichier FLA, donc dans les cas graves, vous pouvez tout quitter, aller faire un tour ou prendre les conseils dune bonne nuit de sommeil, puis retrouver vos points darrt la prochaine session de travail dans Flash. Une fois le ou les points darrt poss, vous pouvez lancer le dbogueur grce la premire commande du menu Dboguer reproduit la Figure79.7.
Raccourci
Maj+CMd+rEtOUr (Mac) ou Maj+Ctrl+EntrE (Windows) lance le dbogueur.
Figure79.7
Le menu Dboguer.
Le dbogueur lanc, lenvironnement passe dans lespace de travail Dbogage, tel que le montre la Figure79.8. Lexcution du code source a donc eu lieu jusqu la rencontre du premier point darrt. Dans lexemple de la figure, il sagit de celui pos ligne 3, ce que dnote la flche jaune superpose au gros point rouge. Au-dessus de la zone daperu du code source se trouve une zone qui liste les diffrents scripts du programme. Celui qui contient le point o lexcution a t suspendue autrement dit la prochaine instruction qui sera excute, est slectionn dans la liste. Sous la zone daperu du code source se trouve la fentre Sortie. Ce que lon y voit sur la Figure79.8 ne doit pas vous inquiter: un message de ce genre saffiche systmatiquement ds lors que vous lancez une session de dbogage. ce niveau, lexcution est suspendue et le dbogueur attend vos ordres. Ces ordres, vous les lui donnez via les cinq boutons de la console de dbogage, dont la Figure79.9 explicite les commandes. Vous retrouvez galement ces cinq commandes dans le menu Dboguer (voir Figure79.7). Si vous cliquez sur le bouton Continuer (icne de flche verte), vous perdez le contrle: lexcution reprend. Plusieurs cas se prsentent. Dans le premier, lanimation atteint une image sur laquelle la tte de lecture est arrte par une instruction stop(); et est en attente dinteraction. Vous devez alors interagir sur la scne pour que lexcution reprenne. Dans un second cas, lanimation va jusqu son terme et vous quittez le dbogueur. Dans le dernier cas, lexcution se poursuit jusqu rencontrer un nouveau point darrt et vous reprenez le contrle. Vous pouvez mettre un terme la session de dbogage en cliquant sur le second bouton de la console de dbogage, orn dune grosse croix rouge.
514
Figure79.8
Lespace de travail Dbogage pendant une session.
Flash CS5
Figure79.9
La console de dbogage et les boutons de ses cinq commandes.
Terminer la session de dbogage Pas pas dtaill Continuer Remonter lappelant
Pas pas sans dtail
Le plus intressant dans le dbogueur est lexcution pas pas, cest--dire instruction par instruction. Les trois derniers boutons de la console de dbogage y sont consacrs. Vous disposez de deux commandes de pas pas. Elles ont mme effet lorsque linstruction sur laquelle le dbogueur est suspendu nest pas un appel de fonction: cette instruction sexcute, puis lexcution se suspend sur linstruction suivante. Par contre, si linstruction sur laquelle le dbogueur est suspendu est bien un appel de fonction, en cliquant sur le bouton Pas pas dtaill, vous excutez la premire instruction du corps de cette fonction, puis lexcution se suspend sur la seconde. Votre excution pas pas est entre lintrieur de la
515
fonction, do licne de flche pointant lintrieur de la paire de parenthses qui dans le langage signifie un appel de fonction. La commande Pas pas principal gagnerait sintituler Pas pas sans dtail. En effet, si linstruction sur laquelle le dbogueur est suspendu est un appel de fonction, en cliquant sur ce bouton, vous excutez lensemble des instructions du corps de cette fonction, puis lexcution se suspend sur linstruction suivant lappel la fonction. Ceci explique licne de flche contournant la paire de parenthses qui dans le langage signifie un appel de fonction. Le dernier bouton de la console de dbogage nest cliquable que lorsque votre excution est rentre dans au moins un appel de fonction (dans le cas contraire, le bouton est gris). Ce bouton correspond la commande abusivement intitule Sortir du pas pas. Il serait plus juste de lintituler Remonter lappelant. En effet, en cliquant sur ce bouton, toutes les instructions restantes dans le corps de la fonction sont excutes, puis lexcution se suspend sur linstruction suivant lappel la fonction (vous ntes donc pas sorti du pas pas). Ceci explique licne de flche pointant lextrieur de la paire de parenthses qui dans le langage signifie un appel de fonction. Le dbogueur est rarement utile pour des scripts simples comme ceux que nous allons crire la fichesuivante. Il prend tout son sens lorsque votre programme commence avoir un flux dexcution plus complexe, cest--dire lorsquil met en uvre des structures de contrle conditionnelles et/ou itratives, ainsi que des appels de fonctions imbriqus (voir section Le flux du calcul : les structures de contrle et les fonctions, Fiche 77). Dailleurs, outre la recherche de bogues, une autre utilisation intelligente du dbogueur consiste faire de lexcution pas pas dans un programme crit par quelquun dautre (ou par vous-mme, il y a longtemps!), pour en saisir la logique dexcution, donc en quelque sorte visualiser le flux dexcution. Le flux dexcution nest quune facette du dbogueur. Une autre facette est le suivi de lvolution des valeurs des diffrentes variables. Pour cela, le plus simple consiste faire safficher ces valeurs dans le panneau Sortie. On utilise pour cela la commande trace();, dont voici un exemple:
trace("Echec de lanalyse XML:\n", err.message);
Une chane entre guillemets (doubles) est une chane littrale, donc qui sera reporte telle quelle par la commande trace(); dans le panneau Sortie. La chane \n est un retour chariot. Vous pouvez aussi utiliser le signe +, qui est loprateur de concatnation de chanes de caractres en ActionScript(concatner, dans le jargon informatique, signifie mettre bout bout). Linstruction prcdente reporte donc dans le panneau Sortie Echec de lanalyse XML: sur une ligne, puis sur la ligne suivante la valeur de la variable chane err.message, cest--dire le message standard (en anglais) correspondant lerreur en question.
516
Flash CS5
La commande trace(); peut aussi tout simplement servir contrler la justesse du flux dexcution laide dun certain nombre de commandes du style trace("Le furet est pass par ici ");, trace(" il repassera par l ");, etc. Les plus attentifs dentre vous auront remarqu que nous avons pass sous silence le dernier des panneaux de lespace de travail Dbogage, intitul Variables (voir Figure79.8). Il sagit dun tableau deux colonnes Nom et Valeur, dans lequel vous pouvez surveiller lvolution des valeurs de vos variables dans une excution pas pas. Souvent, on trouve linstruction incriminer lorsquaprs lavoir excute, on constate quune variable na pas la valeur quelle devrait avoir.
Fiche 80
crire les scripts indispensables

Les vnements dimage
Nous avons mentionn la section Le temps de lexcution : les vnements, Fiche 77 lvnement Event.ENTERFRAME, mis lorsque la tte de lecture atteint une image du scnario. un niveau de programmation ActionScript3.0 plus avanc, vous crirez peut-tre des couteurs dvnements Event.ENTERFRAME. Pour lheure, cest inutile. Rptons une fois nest pas coutume quelque chose que nous avons dj nonc la section Arrt et reprise de la lecture, Fiche 25, mais quil est important que vous compreniez bien. En ActionScript3.0, le passage dune image du scnario une autre constitue un cas particulier, au sens o lvnement est implicite. Cela signifie concrtement quil nest pas ncessaire quoi que possible de dfinir un couteur pour ces vnements. Lorsque vous voulez que des instructions soient excutes lorsque la tte de lecture atteint une image du scnario, il suffit de dfinir la dite image une image-cl dans le calque scripts et dy attacher les instructions. Ce type de script, dit script dimage, sexcute automatiquement ds que limage-cl laquelle il est attach se charge. Nous avons coutume de dire que dvelopper une application interactive dans un environnement comme Flash (avec son langage ActionScript) mais cest vrai aussi de Director (avec son langage Lingo) , cest un peu comme fabriquer un vhicule doubles commandes, puisquil y a deux pilotes: votre scnario et votre programme. Le fait davoir deux pilotes ncessite bien videmment une certaine ngociation du pilotage pour que chacun agisse son tour et non simultanment, au risque de donner des ordres contradictoires. Imaginez, comme cest souvent le cas, que la page daccueil dun site soit prcde dune animation introductive. Au plus simple, cette animation sera encode dans le scnario, lequel aura donc le contrle le premier. Une fois lanimation arrive son terme, il sagit de reprendre la main sur le scnario pour bloquer la tte de lecture sur limage de la page daccueil, en attente dun clic de linternaute pour sorienter vers lune des sections du site.
517
Le script attach limage-cl de la page daccueil doit pour cela au moins contenir linstruction suivante: stop();. Aprs lexcution de cette instruction, le scnario a perdu le contrle et la transmis au programme ActionScript. Les instructions suivantes dans le script dimage devront au moins comporter une ou plusieurs dfinitions dcouteurs dvnements pour le clic sur un ou plusieurs boutons (voir sections Les vnements de clic, Grer la fin de survol en dehors et Programmer un clip danimation faisant office de bouton de la prsente fiche). Souvent elles comporteront aussi les couteurs dvnements pour le survol de ces boutons (voir sections Les vnements de survol et Programmer un clip danimation faisant office de bouton de la prsente fiche).
Les vnements de survol

Nous avons donn la syntaxe gnrale dun couteur dvnements la section Le temps de lexcution : les vnements, Fiche 77. Grer le survol dun bouton, cest tout simplement dfinir deux couteurs pour les vnements MouseEvent.MOUSE_OVER et MouseEvent.MOUSE_OUT. Lobjet cible de ces deux couteurs doit bien sr avoir reu un nom doccurrence pour pouvoir tre manipul par votre code ActionScript. Pour le dsigner, utilisez la commande Insrer un chemin cible (voir fin de section Aide lcriture dinstructions ActionScript, Fiche 78). Lobjet que vous ciblerez ne devra pas tre une occurrence de symbole bouton (voir Fiche35). En effet, dans un symbole bouton, le survol est gr automatiquement au niveau du scnario, tandis quici nous le grons nous-mme par programme. Dans le script de limage dans laquelle lobjet cible est susceptible dtre survol, ajoutez aprs linstruction stop(); du code sur le modle suivant:
function debutDeSurvol( evt: MouseEvent): void { // feed-back lorsque lutilisateur dplace le pointeur // au-dessus du bouton } function finDeSurvol( evt: MouseEvent): void { // feed-back lorsque lutilisateur dplace le pointeur // en dehors du bouton } <cheminCible>.addEventListener( MouseEvent.MOUSE_OVER, debutDeSurvol); <cheminCible>.addEventListener( MouseEvent.MOUSE_OUT, finDeSurvol);
Dans le script prcdent, outre le chemin cible, il vous reste crire les instructions de feed-back (ou instructions de retour) dans le corps des deux fonctions, dites fonctions de rappel. La Figure80.1 donne un exemple de bouton effet de survol simul laide dun clip danimation. Le scnario de ce symbole btnAla comporte trois images. La premire
518
Flash CS5
sert linitialisation. On y a dfini le script visible sur la figure. Le second script, attach la seconde image, se rduit une seule instruction stop();
Figure80.1
Bouton effet de survol simul laide dun clip danimation.
Les images 2 et 3 correspondent aux deux tats du bouton, respectivement labsence de survol et le survol. Elles sont tiquetes respectivement norm (pour normal) et surv (pour survol) dans le calque repres. Plutt que de programmer entirement le feed-back de survol en modifiant les valeurs de certaines proprits (couleur, opacit, taille, etc.), il est souvent plus simple dencoder en dur ces modifications dans diffrentes images du scnario, suivant en cela lapproche retenue pour les symboles de type Bouton, avec leur scnario prdfini de quatre images (voir Fiche35). Le feed-back que ralisent les deux fonctions de dbut et de fin de survol doit alors au moins consister renvoyer la tte de lecture sur lautre image. Ainsi, linstruction this.gotoAndStop( surv); signifie: va et arrte-toi (gotoAndStop()) limage tiquete surv de ce scnario (this). Dans le cas prsent, le feed-back consiste galement lancer (play()) et arrter (stop()) la lecture dune occurrence de symbole clip danimation nomme dfilAla, instancie dans le scnario sur le calque de mme nom. linitialisation, ligne 11 du script, la tte de lecture est place alatoirement (Math.random()) sur lune des images de ce simple petit diaporama, ce qui donne limpression de dfilement alatoire.
519
Les vnements de clic

Le choix vous est offert de traiter le clic soit comme un seul vnement MouseEvent.MOUSE_ CLICK correspondant au fait que le bouton de la souris a t enfonc puis relch, soit comme deux vnements successifs distincts, MouseEvent.MOUSE_DOWN correspondant lenfoncement et MouseEvent.MOUSE_UP au relchement du bouton de la souris. Rappelons que lobjet cible des couteurs doit avoir reu un nom doccurrence pour pouvoir tre manipul par programme. Pour le dsigner, utilisez toujours la commande Insrer un chemin cible (voir fin de section Aide lcriture dinstructions ActionScript, Fiche 78). Dans le cas du clic, vous pouvez cibler indiffremment une occurrence de symbole bouton (voir Fiche35) ou de symbole clip danimation (voir Fiche36). Dans le script de limage dans laquelle lobjet cible est susceptible dtre cliqu, ajoutez aprs linstruction stop(); du code sur le modle suivant:
function relcher( evt: MouseEvent): void { trace( Clic sur le bouton, evt.target.name); } <cheminCible>.addEventListener( MouseEvent.MOUSE_UP, relcher);
Procdez de mme si vous souhaitez intercepter les vnements MouseEvent.MOUSE_ CLICK ou MouseEvent.MOUSE_DOWN; seule la spcification de lvnement change. Soyez conscient du fait que si vous interceptez les vnements MouseEvent.MOUSE_DOWN, les instructions du corps de la fonction gestionnaire (ici relcher()) sexcuteront ds lenfoncement du bouton de la souris, ne laissant linternaute aucune possibilit de se reprendre sil a cliqu par mgarde. Cest la raison pour laquelle, dans la grande majorit des cas, en se conformant un standard en ergonomie informatique, on prfre intercepter les vnements MouseEvent.MOUSE_UP. Si linternaute clique par mgarde et sen rend compte, il lui suffit de maintenir le bouton de la souris enfonc, de faire glisser pour sortir de la zone ractive du bouton cliquable et de relcher au dehors. Dans ce cas, les instructions du corps de la fonction gestionnaire ne seront pas excutes, puisquaucun vnement MouseEvent. MOUSE_UP ne sera mis. Dans le scnario de la Figure25.2, une instruction stop(); a t place sur la premire image de sorte que lanimation de dcompte soit demble suspendue. Crons un nouveau calque sur lequel nous dessinons un triangle qui fera office de bouton cliquable de lancement, convertissons-le en occurrence de symbole clip danimation (voir Figure33.5), laquelle nous donnons le nom lancerLecture. Pour rendre ce bouton fonctionnel, il suffit ensuite dajouter aprs linstruction stop(); le code suivantpour quau clic, lexcution redonne la main au scnario qui se droulera jusqu la fin, ou jusqu lventuelle rencontre dun script dimage contenant aussi une instruction stop();:
function lecture( evt: MouseEvent): void { this.play(); } lancerLecture.addEventListener( MouseEvent.MOUSE_CLICK, lecture);
520
Flash CS5
Grer la fin de survol en dehors

Nous avons expliqu la sectionprcdente lintrt dintercepter les vnements MouseEvent.MOUSE_UP pour permettre linternaute de changer davis tant quil na pas relch le bouton cliqu. Sil fait glisser le pointeur de la souris en dehors du bouton, aucune instruction nest excute aprs quil a relch. Cest ce qui est souhaitable dans la plupart des cas. Il existe nanmoins des cas particuliers dans lesquels il est souhaitable que les instructions de la fonction gestionnaire des vnements MouseEvent.MOUSE_UP soient aussi excutes lorsque linternaute relche en dehors de loccurrence de bouton. Un bon exemple est celui dun ascenseur de dfilement ou dune rglette, deux dispositifs interactifs dans lesquels un lment peut tre dplac sur une glissire. Il est courant dans ce cas que linternaute relche le curseur au-del de la position maximale autorise par la glissire. Il faut pourtant malgr tout excuter les instructions de retour. Comme prcdemment, donnez bien un nom doccurrence lobjet cible, dsignez-le laide de la commande Insrer un chemin cible et dans le script de limage concerne, ajoutez aprs linstruction stop(); du code sur le modle suivant:
function clic( evt: MouseEvent): void { stage.addEventListener( MouseEvent.MOUSE_UP, finClic); } function finClic( evt: MouseEvent): void { if (evt.target == <cheminCible>) { // feed-back si lutilisateur relche dessus } else { // feed-back si lutilisateur relche en dehors } stage.removeEventListener( MouseEvent.MOUSE_UP, finClic); } <cheminCible>.addEventListener( MouseEvent.MOUSE_DOWN, clic);
Ce code prsente plusieurs subtilits. Dabord, dans le corps de la fonction finClic(), gestionnaire des vnements MouseEvent.MOUSE_UP, il faut discriminer (if { } else { }) entre le relchement du bouton de la souris en dehors et au-dessus. Pour cela, il faut tester la cible de lvnement (evt.target). Ensuite, au dpart, seul lcouteur dvnements MouseEvent.MOUSE_DOWN est dfini (fonction gestionnaire clic()). Lcouteur dvnements MouseEvent.MOUSE_UP (fonction gestionnaire finClic()) nest quant lui dfini que dans le corps de la fonction clic(), donc uniquement aprs que lvnement MouseEvent.MOUSE_DOWN ait t mis. la fin de la fonction finClic(), donc aprs que lvnement MouseEvent.MOUSE_UP ait t mis, lcouteur dvnements MouseEvent.MOUSE_UP est supprim par appel la mthode removeEventListener(). Enfin, dernire subtilit, lobjet cible de cet couteur dvnements MouseEvent.MOUSE_UP nest pas le mme que celui des vnements MouseEvent.MOUSE_DOWN, mais la scne entire (stage). Lorsque linternaute fait glisser en dehors, quil ait ou non cliqu le bouton au pralable, un vnement MouseEvent.MOUSE_OUT est mis. Si dans le corps de la fonction gestionnaire de
521
fin de survol (voir section Les vnements de survol, cette mme fiche), vous avez besoin de discriminer les deux cas bouton de la souris enfonc ou relch , il faudra grer une variable boolenne initialise false et bascule true dans la fonction gestionnaire clic(). Dans le cas o le feed-back est le mme, que linternaute relche au-dessus ou en dehors, la fonction gestionnaire finClic() se simplifie:
function finClic( evt: MouseEvent): void { // feed-back, que linternaute relche au-dessus ou en dehors stage.removeEventListener( MouseEvent.MOUSE_UP, finClic); }
Grer le pointeur
Par dfaut, au survol dun lment dot de gestionnaires dvnements de survol et/ou de clic, le pointeur standard de che se transforme en une main non moins standard. Si vous ne souhaitez aucune transformation de pointeur au survol, utilisez dans votre script linstruction suivante:
<cheminCible>.useHandCursor = false;
Parfois, vous voudrez personnaliser le pointeur de souris, cest--dire lui donner une autre apparence que celle standard de che, qui se transforme en main au survol dun lment cliquable. Pour cela, placez dans limage concerne du scnario le script suivant:
stop(); Mouse.hide(); function miseAJourPositionPointeur( evt: MouseEvent): void { pointeurSourisPerso.x = evt.stageX; pointeurSourisPerso.y = evt.stageY; } stage.addEventListener( MouseEvent.MOUSE_MOVE, miseAJourPositionPointeur);
Lappel la mthode Mouse.hide() a pour effet de masquer le pointeur standard. Le script se termine par la dfinition dun couteur des vnements MouseEvent.MOUSE_ MOVE, qui permet de faire une mise jour permanente en fonction de la position courante du pointeur. La fonction gestionnaire attache une occurrence de clip danimation nomme pointeurSourisPerso cette position courante du pointeur. Dessinez dans le symbole clip danimation le graphisme de votre choix. Vous pouvez mme lanimer. En mode ddition de symbole, faites glisser le graphisme pour placer sous la croix centrale (point dalignement) le point que vous souhaitez voir concider avec celui point par la souris. Dans le scnario principal, loccurrence pointeurSourisPerso doit se trouver sur un calque au-dessus de tous ceux qui contiennent des lments visuels, dfaut de quoi le pointeur passera par
522
Flash CS5
moment derrire certains lments, ce qui constituerait une pitre simulation de changement de pointeur. Le code suivant est une alternative utilisant les mthodes MovieClip.startDrag() et Movie-Clip.stopDrag() qui respectivement initie et termine le gliss de loccurrence de clip danimation. La fonction pointeurEnCoulisse() place le pointeur personnalis en coulisse, 100 pixels gauche du bord de scne. Outre pointeurSourisPerso, le scnario instancie un clip danimation dont le nom doccurrence est zoneRect. Il sagit de la zone rectangulaire au survol de laquelle le pointeur devient personnalis:
stop(); pointeurEnCoulisse(); function pointeurEnCoulisse(): void { pointeurSourisPerso.x = -100; } function debutSurvol( evt: MouseEvent): void { Mouse.hide(); pointeurSourisPerso.x = evt.stageX; pointeurSourisPerso.y = evt.stageY; pointeurSourisPerso.startDrag(); } function finSurvol( evt: MouseEvent): void { pointeurSourisPerso.stopDrag(); pointeurEnCoulisse(); Mouse.show(); } zoneRect.addEventListener( MouseEvent.MOUSE_OVER, debutSurvol); zoneRect.addEventListener( MouseEvent.MOUSE_OUT, finSurvol);
Programmer un clip danimation faisant office de bouton

Beaucoup de programmeurs ActionScript prfrent ne pas utiliser de symboles de type Bouton, quitte simuler un bouton laide dun symbole de type Clip danimation, type qui offre de plus larges possibilits que le type Bouton (voir sections 35 et 36). Ce faisant, on perd nanmoins lavantage de la gestion automatise des tats de survol et de clic quoffre un symbole bouton. La Figure80.1 prsente un exemple de ce genre de simulation de bouton laide dun clip danimation. Outre un calque scripts et un calque repres, diffrents calques supportent le graphisme des diffrents tats (intiAla, dfilAla et zRaAla dans lexemple de la figure). Plus gnralement, dans le calque repres, les images-cls correspondant aux diffrents tats devront recevoir une tiquette, par exemple haut, dessus et abaiss. La premire image-cl du calque scripts recevra le code suivant:
stop(); function survol( evt: MouseEvent): void { this.gotoAndStop( dessus); } function finSurvol( evt: MouseEvent): void { this.gotoAndStop( "haut");
523
} function clic( evt: MouseEvent): void { this.gotoAndStop( "abaiss"); stage.addEventListener( MouseEvent.MOUSE_UP, finClic); } function finClic( evt: MouseEvent): void { if (evt.target == this) { this.gotoAndStop( "dessus"); } // else {this.gotoAndStop( "haut);} // inutile si evt.target == stage // car finSurvol a dj ramen haut stage.removeEventListener( MouseEvent.MOUSE_UP, finClic); } this.addEventListener( MouseEvent.MOUSE_OVER, survol); this.addEventListener( MouseEvent.MOUSE_OUT, finSurvol); this.addEventListener( MouseEvent.MOUSE_DOWN, clic);
On retrouve dans ce script la mme manire de procder qu la section Grer la fin de survol en dehors de cette fiche: dune part, lcouteur dvnements MouseEvent.MOUSE_UP nest cr quaprs interception dun vnement MouseEvent.MOUSE_DOWN et dtruit la fin de sa fonction gestionnaire dvnements; dautre part, il cible la scne entire (stage).
Piloter les diffrents scnarios

Faisons le point sur les instructions avec lesquelles vous pouvez contrler la lecture des scnarios. Pour linstant, nous avons vu comment reprendre la main sur le scnario laide dune instruction stop();. Dans lexemple de la Figure25.2, cette instruction est place sur la premire image, sur laquelle lanimation est suspendue. Dans lexemple de la Figure25.4, cette instruction est place sur la dernire image, sur laquelle lanimation est suspendue. la fin de la section Les vnements de clic de cette fiche, nous avons relanc la lecture suspendue de lanimation grce une instruction play(); place dans le corps du gestionnaire dvnements de clic dun bouton de lancement. ActionScriptvous offre dautres mthodes pour contrler la tte de lecture du scnario. Vous pouvez lui faire faire un saut dans le scnario grce aux mthodes gotoAndPlay() et gotoAndStop() de la classe MovieClip. Les deux font sauter la tte de lecture limage passe en paramtre, mais pour la premire, la lecture reprend en cette image, tandis que pour la seconde, la lecture est suspendue en cette image. Autrement dit, vous utiliserez gotoAndStop() pour passer un cran afficher et gotoAndPlay() pour passer une animation lire, par exemple par exemple un fondu dentre par interpolation de mouvement. La mthode gotoAndPlay() pourra aussi vous servir mettre en place un chapitrage, comme dans les DVD, ou encore un rembobinage, grce auquel linternaute pourra relire lanimation. Ces deux mthodes attendent en paramtre une rfrence une image. Au plus simple, il sagira dun numro dimage:
<cheminCibleOccurrenceClip>.gotoAndStop( 77);
524
Flash CS5
Nanmoins, cest une pratique risque. Si demain, le scnario est remani ce qui ne manquera pas darriver , ce qui se trouvait limage 77 risque bien de se retrouver limage 89 ou limage 63. Votre script est alors bogu. La bonne pratique consiste tiqueter dans un calque ddi nomm par exemple repres toutes les images qui peuvent tre cible dune mthode de saut de la tte de lecture (voir section Sauts dans le scnario, Fiche 25). Si vous tiquetez prsentation limage 77 de lexemple prcdent, linstruction suivante restera valide quelque soient les ajouts ou suppression dimages dans le scnario:
<cheminCibleOccurrenceClip>.gotoAndStop("prsentation");
Imaginons que vous conceviez lanimation daccueil dun site de la faon suivante : une premire squence de 60 images joue une seule et unique fois, puis une seconde squence de 100 images joue en boucle. Pour raliser cela, vous allez tiqueter limage 60, par exemple boucle, puis placer limage 160, la dernire, un script dimage contenant lunique instruction:
this.gotoAndPlay( "boucle");
Un clip danimation possde une proprit currentFrame qui contient le numro de limage courante, donc celle o se trouve actuellement la tte de lecture. Grce elle vous pouvez faire faire la tte de lecture un saut, non plus absolu comme prcdemment, mais relatif. Par exemple, linstruction suivante la fait avancer de 25 images:
<cheminCibleOccClip>.gotoAndStop( <cheminCibleOccClip>.currentFrame +25);
Les commandes nextFrame() et prevFrame() sont les quivalents respectifs de gotoAndStop( <cheminCibleOccurrenceClip>.currentFrame +1); et gotoAndStop( <cheminCibleOccurrenceClip>.currentFrame -1);. Si le scnario de votre animation est dcoup en squences (voir Fiche24), vous pouvez utiliser les mthodes nextScene() et prevScene() pour sauter respectivement la squence suivante et la prcdente.
Les vnements de clavier

Dans Flash, chaque frappe de touche du clavier fait lobjet dune srie dvnements successifs distincts : lorsque la touche est enfonce et tant quelle le reste, des vnements KeyboardEvent.KEY_DOWN sont mis ; lorsque la touche est relche, un vnement KeyboardEvent.KEY_UP est mis. La seule dtection de la frappe au clavier peut donc se faire avec du code conforme au modle suivant:
function toucheEnfoncee( evt: KeyboardEvent): void { // feed-back aprs enfoncement dune touche trace( Touche enfonce.); } function toucheRelachee( evt: KeyboardEvent): void { // feed-back aprs relchement dune touche
525
trace( "Touche relche."); } stage.addEventListener( KeyboardEvent.KEY_DOWN, toucheEnfoncee); stage.addEventListener( KeyboardEvent.KEY_UP, toucheRelachee);
Savoir que linternaute a utilis le clavier, cest bien. Connatre la touche quil a enfonce, cest mieux. Heureusement, un vnement KeyboardEvent a deux proprits utiles pour cela: keyCode. Cette proprit contient le code numrique de la touche du clavier enfonce. La valeur de keyCode est donc la mme pour la minuscule et la majuscule, obtenues via la mme touche. La classe Keyboard comprend des constantes correspondant au code numrique de touches non alphanumriques courantes comme Maj, EntrE, le retour chariot, les ches gauche, haut, droite, bas, le retour arrire, etc. charCode. Cette proprit contient le code UTF-8 du caractre correspondant la combinaison de touches enfonces. Les valeurs de keyCode et charCode sont les mmes pour les chiffres, ainsi que pour les lettres majuscules. Cest grce la valeur de charCode que lon discrimine entre minuscule et majuscule. partir du code de caractre, vous pouvez obtenir le caractre grce la mthode String.fromCharCode(). Vous pouvez crire un couteur dvnements clavier en vous inspirant du modle de code suivant, qui dtecte la frappe de lune des quatre touches flches et dfaut affiche le caractre saisi:
function frappeClavier( evt: KeyboardEvent): void { switch (evt.keyCode) { case Keyboard.RIGHT : trace("Flche droite"); break; case Keyboard.DOWN : trace("Flche bas"); break; case Keyboard.LEFT : trace("Flche gauche"); break; case Keyboard.UP : trace("Flche haut); break; default : var caracSaisi: String = String.fromCharCode( evt.charCode); trace(Vous avez appuy sur la touche, caracSaisi); } } stage.addEventListener( KeyboardEvent.KEY_DOWN, frappeClavier);
Ce fragment de code vous donne un exemple du second type dinstruction conditionnelle en ActionScript. La structure de contrle switch() teste la valeur dune expression ici la proprit evt.keyCode et selon la valeur, aiguille sur diffrentes instructions comme cest le cas ici ou blocs dinstructions. Si la valeur effective ne correspond aucune des valeurs des diffrentes clauses case, ce sont les instructions de la clause default qui sont excutes.
526
Fiche 81
Flash CS5
ActionScript: demandez le programme!

Nous vous avons accompagn jusqu la vaste fort de la programmation ActionScript3.0. Nous y avons fait ensemble une courte incursion, mais la taille et lobjectif de ce livre ne nous permettent pas de nous y enfoncer plus avant. Nous esprons nanmoins vous avoir aid identifier les arbres de premire importance dans cette fort, de sorte que puissiez raisonnablement continuer lexploration vous-mme. Mme sil reste encore normment assimiler pour faire de vous un dveloppeur ActionScript 3.0 chevronn, nous avons tout de mme abord suffisamment de notions pour que vous vous fassiez une meilleure ide de ce en quoi consiste la programmation. De notre point de vue, lun des attraits majeurs denvironnements de ralisation comme Flash et ActionScript ou Director et Lingo, cest de faire se rencontrer sur une mme scne le monde du graphisme (dessin, composition, animation, 3D), celui des autres mdias (texte, image, son, vido) et celui de la programmation (interactivit, animation, etc.). Cette rencontre peut se faire dans diffrents contextes. Le premier est celui du travail en quipe, par exemple en agence. lissue de la lecture de ce chapitre, peut-tre vous dites-vous que dcidment vous ntes que graphiste ou web designer et que vous laisserez toujours la programmation quelquun dont cest la spcialit. Mais peut-tre aussi, venez-vous de goter la programmation et souhaitez-vous aller plus loin pour ajouter cette corde votre arc. Un autre contexte pour la rencontre des mtiers que permet lenvironnement de ralisation Flash, est celui du ralisateur multimdia polyvalent, par exemple freelance. Si vous voulez aller plus loin en ActionScript3.0, le meilleur livre est incontestablement Pratique dActionScript3 de Thibault Imbert (Pearson, 2009). Nanmoins si vous tes rellement novice en programmation et venez de faire vos premiers pas avec nous, peut-tre y a-t-il un trop gros saut faire (gotoAndPlay !) pour passer directement la bible de programmeur quest lexcellent livre de Thibault Imbert. En attendant ce livre dapprentissage de la programmation ActionScript3.0 qui se voudrait accessible au non-programmeur (nous lcrirons peut-tre un jour), vous pouvez vous tourner vers Apprendre programmer en ActionScript3 de Anne Tasso (Eyrolles, 2009). Anne Tasso enseigne la programmation en IUT. Dans son livre, les notions sont introduites progressivement et par lexemple. Rptons ce que nous avons dj dit plus haut. Pour progresser, rcuprez sur la Toile des exemples fonctionnels, des fragments de code et tudiez-les, transformez-les pour faire vos essais et petit petit crire vos propres programmes ActionScript, de plus en plus sophistiqus. Encore une fois, il nous semble qu lissue de ce chapitre vous tes arms pour le faire. Bien sr, vous serez plus laise sur ce chemin si vous avez lesprit mthodique et de la patience. Mais si vous persvrez, vous naurez que plus de gratifications travailler dans Flash.
12
Publication
Avant de finaliser la diffusion de votre animation, ce qui dans le vocabulaire Flash sappelle publier, il faut tester, notamment valuer les performances de lanimation vis--vis de diffrents dbits de connexion. En effet, la forme la plus naturelle de publication est celle qui la rend lisible dans un navigateur. Dans ce cas, de nombreux paramtres rgissent lintgration avec le contenu HTML. Il faudra galement sassurer de la prsence dune version minimum du lecteur Flash sur la machine cible. Depuis la version CS4, il est possible dajouter des mtadonnes votre animation, informations qui joueront lavenir un rle important en matire de rfrencement du site auprs des moteurs de recherche. Publier sur dautres supports que la Toile est galement envisageable. Flash permet depuis longtemps la publication dune projection, gravable sur un disque amovible. Avec la version CS4 galement, est apparue la publication pour le Bureau, destination de AIR, autrement dit la possibilit que votre animation sexcute sur un ordinateur en dehors de tout navigateur, comme nimporte quelle autre application. Flash vous permet enfin dexporter des images ou des squences dimages de votre animation.
Fiche 82
Tester une animation

Les tests en gnral
Vous testez votre animation. Elle fonctionne comme vous le souhaitez. Vous la sophistiquez, puis refaites un test. Une erreur de fonctionnement apparat. Ncessairement, la cause de lerreur rside dans ce que vous avez fait depuis le dernier test. Ds lors que vous vous tes suffisamment imprgn de cette ralit, une autre vidence simpose, pratique celle-la: plus vous testerez souvent et plus il vous sera facile de cerner la cause dune erreur. Testez tt. Testez souvent. Prenez la saine habitude de toujours sauvegarder avant de tester : on est parfois surpris de lampleur des erreurs que lon produit Au plus simple, le test se fait au jug. Vous vrifiez que votre animation a bien lapparence attendue et fonctionne comme prvu. Dans une chane de production plus structure et notamment dans le cadre dun travail en quipe, en amont de la ralisation, le projet aura fait lobjet de toutes sortes de documents: cahier des charges, documents danalyse et de conception, chartes graphique et fonctionnelle. Tester consistera alors vrifier la conformit ces documents prparatoires. Nous avons voqu la section Prvisualiser une animation, Fiche 26, les moyens de prvisualiser une animation. Il sagissait danimation au sens propre. Sagissant ici danimation Flash au sens plus large dapplication Flash, lancer lanimation dans lenvironnement de ralisation (Contrle> Lire) ne suffit pas. Il faut gnrer le fichier SWF et faire lire celui-ci
528
Flash CS5
par le lecteur Flash (une version de ce dernier fait partie de linstallation de Flash sur votre ordinateur). Utilisez pour cela la commande Contrle> Tester lanimation > Tester.
Raccourci Raccourci Raccourci
CMd+rEtOUr (Mac) ou Ctrl+EntrE (Windows) lance le lecteur Flash intgr afin de tester lanimation.
Une fois que votre animation sexcute dans le lecteur Flash intgr, la barre des menus de lapplication sest modifie. Outre les habituels menus Flash, Fichier, Modifier, Fentre et Aide, vous ne disposez plus que de trois menus spcifiques: Affichage (voir Figure 82.5), Contrle et Dboguer. Nous ne dirons rien ici sur ce dernier menu (voir section Test et dbogage, Fiche 79). Comme le montre le menu Contrle, reproduit Figure 82.1, le fichier SWF est lu en boucle par dfaut.
Figure 82.1
Le menu Contrle du lecteur Flash.
Dans le lecteur Flash intgr, rEtOUr (Mac) ou EntrE (Windows) arrte ou relance la lecture. Maj+, rembobine et , (la virgule) ne recule que dune seule image. Pour lavance dune image contrairement ce quindique le menu Contrle le raccourci clavier est ; (le point-virgule) sous Windows (sur Mac, ni le point, ni le point-virgule nont deffet).
Le lecteur Flash est un premier niveau de test. Le second consiste publier. Dans la plupart des cas, votre animation est destine une relecture sur la Toile. Dans ce cas, la publication va produire comme prcdemment un fichier SWF, mais galement le fichier HTML qui va y faire appel (voir Fiche 84). La Figure 82.2 reproduit le menu Fichier> Aperu avant publication (commande qui devrait sintituler Aperu de publication, puisquavant davoir un aperu, il faut bien publier!). Le plus simple est de faire appel sa premire commande: Par dfaut - (HTML). Aperu signifie quaprs la publication, le logiciel adquat est lanc pour visualiser le rsultat. Sagissant ici de HTML, le navigateur par dfaut se lance pour que vous puissiez tester votre animation. La commande Fichier> Publier est une alternative. Elle est moins pratique, au sens o cest ensuite vous douvrir le fichier HTML dans un navigateur.
CMd+F12 (Mac) ou Ctrl+F12 (Windows) lance laperu de publication.
Publication
529
Figure 82.2
Le menu Fichier> Aperu de publication.
Aux deux premiers niveaux de test prcdents, vous tes rest en local sur votre ordinateur. Le troisime niveau de test consiste transfrer tous les fichiers ncessaires votre animation sur le serveur et tester le comportement de votre animation en tlchargement. Vous ferez vous-mme les premiers tests, puis quand vous serez satisfait du rsultat, vous ferez tester par diffrentes personnes. Les fichiers transfrer seront au moins le fichier SWF et le fichier HTML qui lappelle. Dans lexemple de la Figure 82.3, il sagit respectivement de accueil.swf et de index.html. Mais souvent, il y a dautres fichiers transfrer. La publication peut gnrer un fichier Java-Script. Lexemple de la Figure 82.3 a t publi sous Flash CS3 et comprend un fichier AC_RunActiveContent.js (depuis Flash CS4, il est possible de se passer de ce fichier). Enfin, votre application fera souvent usage de donnes externes au SWF. Dans lexemple de la Figure 82.3, on trouve un feuille de style externe (stephanie.css), des donnes XML (spectacles.xml) et des images bitmap organises en trois sous-dossiers. Vous pourriez galement avoir des animations secondaires externes (dautres fichiers SWF), de laudio ou de la vido (au format FLV, par exemple).
Figure 82.3
Les fichiers dune animation finalise transfrer sur le serveur.
Pour un projet consquent comme celui de la Figure 82.3, impliquant de nombreux fichiers, vous aurez dfini un fichier de projet (voir Fiche 4). Le panneau Projet, reproduit en partie gauche de la Figure 82.4, donne une autre vision des fichiers de lexemple prcdent. En y slectionnant le fichier accueil.fla et en appelant dans le menu contextuel (reproduit en partie droite de la mme figure), la commande Transformer en document par dfaut, licne du fichier sest orne dune toile. Dun simple clic en bas, sur le bouton Tester le projet, tous
530
Flash CS5
les fichiers du projet sont publis et celui dsign comme document par dfaut est ouvert. Dans le cas de lexemple, cest accueil.swf qui est ouvert dans le lecteur Flash, mais il serait aussi possible de transformer index.html en document par dfaut pour lancer lanimation dans le navigateur.
Figure 82.4
Le panneau Projet et son menu contextuel.
Simuler le chargement de lanimation

Avant de transfrer les fichiers pour procder un test en vraie grandeur de votre animation, vous pouvez vous faire une ide de son comportement au tlchargement grce au testeur de bande passante qui donne des lments dvaluation et permet den faire une simulation. Essayons de prendre conscience du challenge auquel le lecteur Flash est confront. La lecture dune animation dmarre ds que les donnes de la premire image sont charges. Imaginons que vous ayez conserv la cadence par dfaut de 24 I/S. Cela signifie que pour que cette cadence soit respecte, le lecteur Flash doit imprativement mettre moins dune seconde charger les donnes des 24 prochaines images rendre. Ceci ne pose aucun problme tant que votre animation ne contient que du graphisme vectoriel et du texte. Par contre, ds que des lments plus lourds entrent en jeu (composants, images bitmap, audio, vido), la fluidit de la lecture risque dtre rompue. En effet, tant que les donnes dune image de lanimation ne sont pas entirement tlcharges, le lecteur Flash est oblig de suspendre la lecture. Flash vous offre la possibilit de simuler la lecture dune animation diffrents dbits de tlchargement. Ce dbit, choisissez-le dans le sous-menu du lecteur Flash Affichage > Paramtres de tlchargement, reproduit la Figure 82.5. Le sous-menu visible Figure 82.5 a t personnalis grce la bote de dialogue qui souvre lorsque vous slectionnez tout en bas Personnaliser. On y a mis une gamme de dbits plus en phase avec ceux couramment rencontrs aujourdhui que ceux du sous-menu par dfaut.
Publication
531
Lorsque votre fournisseur daccs vous loue une connexion 8 Mga1, cela signifie que le dbit thorique descendant, cest--dire pour tlcharger des donnes sur votre ordinateur est de 8Mbits/s = 8 1024 1024 bits/s. Comme son nom lindique, un octet correspond 8 bits. Il faut donc diviser par 8 pour obtenir 1024 1024 = 1048576 octets/ sec. Pour compliquer les choses, lorsque vous validez et que vous revenez au sous-menu, la valeur de dbit est indique entre parenthses en Ko/s, donc divise par 1 024, ce qui donne8Mga (1 024 Ko/s).
Figure 82.5
Le menu Affichage du lecteur de test.
Pour valuer a priori le tlchargement de votre animation, demandez comme prcdemment Contrle> Tester lanimation > Tester et lorsque le lecteur Flash est lanc, cochez Affichage> Testeur de bande passante. Le testeur de bande passante saffiche au-dessus de la scne. Comme le montre les Figures 82.7 et 82.8, sa partie gauche donne un ensemble dinformationsdans la rubrique Animation: les dimensions de la scne, la cadence spcifie dans le scnario, la taille globale du fichier, la dure de lanimation en nombre dimages et en secondes. Dans la rubrique Paramtres, la bande passante slectionne pour le test est rappele (en octets/s cette fois-ci, pourquoi faire simple).
1. 8 Mga ne correspond pas 8 Mo, mais un dbit de 8Mb/s (b pour bits), ce que les commerciaux des FAI appellent du 8 Mga, avec sans doute l'arrire-pense commerciale quutiliser les Mb/s au lieu des Mo/s cela donne des nombres 8 fois plus grands, donc que cela impressionne plus le client.
532
Flash CS5
Linformation dcisive pour lvaluation se trouve en dernire ligne de la rubrique Animation: Prchargement. Il sagit de la dure en nombre dimages et en secondes qui sera ncessaire pour tlcharger un fichier de cette taille, en fonction de la cadence spcifie et de la bande passante disponible. Ainsi, dans lexemple du haut des Figures 82.7 et 82.8, la bande passante teste est celle du bas dbit, cest--dire dun modem 56k (4,7 Ko/s). On voit que lanimation ne sera pas lisible dans ce type de configuration: elle fait 546 images (30,3 s) et son prchargement ncessiterait 960 images (53,3 s). Par contre, si lon refait le test pour une connexion haut dbit, courante de nos jours, 8 Mga (1024 Ko/s) test reproduit en bas des Figures 82.7 et 82.8, on constate que dans ce type de configuration le prchargement ne ncessiterait plus que 3 images (0,2 s), ce qui devient raisonnable.
Figure 82.6
La bote de dialogue Personnaliser les paramtres de tlchargement.
Figure 82.7
Le testeur de bande passante en affichage de lecture en continu. Bande passante Modem 56k (en haut) et ADSL 8 Mga (en bas).
Publication
533
La partie droite du testeur de bande passante est un graphique temporel pour visualiser le cot de tlchargement. Vous avez les choix entre deux modes daffichage : Affichage > Graphique de lecture en continu (exemple Figure 82.7) ou Affichage> Graphique image par image (exemple Figure 82.8). Dans le premier mode, on voit en haut de la Figure82.7 que la zone infrieure est grise et si lon faisait dfiler horizontalement, on constaterait que cette zone grise stend au-del de la dernire image du scnario, ce qui pose pour le moins problme. En bas de cette mme figure, on constate de visu que le tlchargement de toutes les donnes est fait en trois images.
Figure 82.8
Le testeur de bande passante en affichage image par image. Bande passante Modem 56k (en haut) et ADSL 8 Mga (en bas).
Dans le mode image par image, la taille des ressources quil est ncessaire de tlcharger pour chaque image du scnario est reporte sous forme dune colonne grise. En bas du graphique, une ligne rouge dite seuil de ux reprsente le seuil en de duquel la lecture en continu se droulera sans nuire la fluidit. Sil existe une quelconque image dont la colonne grise dpasse le seuil de ux, il est probable quelle induira une latence. Vous pouvez ainsi reprer les images susceptibles de poser problme (pour la premire image, il y a presque ncessairement une latence). La valeur du seuil de ux dpend de deux facteurs : le dbit de connexion test et la cadence de lanimation. Bien sr, diviser par deux le dbit de connexion divise aussi le seuil par deux. Et doubler la cadence de lanimation, divise galement le seuil par deux. Dans un cas comme dans lautre, il faut tout tlcharger deux fois plus vite. En haut des Figures 82.7
534
Flash CS5
et 82.8, en Modem 56 k (4,7 Ko/s), le seuil de flux est de 266 octets. En bas de ces mmes figures, en ADSL 8 Mga (1024 Ko/s), le seuil est de 56,9 Ko. Dans la ligne du temps du testeur de bande passante (tout en haut), lorsque lanimation sexcute dans le lecteur de test, un curseur triangulaire indique limage couramment affiche. Vous pouvez simuler le tlchargement pour la bande passante que vous avez slectionne en demandant Affichage > Simuler le tlchargement. Dans ce cas, une barre horizontale verte recouvre progressivement les numros dimages, indiquant quelles images ont t tlcharges, de la mme faon que dans un lecteur audio ou vido de flux continu. Dans ce mode, le lecteur Flash intgr introduit des latences artificielles correspondant aux paramtres thoriques du tlchargement, de sorte que vous puissiez vous faire une ide de ce quun internaute dans une telle configuration est susceptible dexprimenter. Bien sr, la simulation prcdente se base sur le dbit thorique de la connexion. En pratique, le dbit peut descendre bien en dessous de sa valeur thorique, en fonction de la qualit de la ligne tlphonique, des engorgements ventuels du rseau et de la quantit de requtes faites simultanment sur le serveur. Par ailleurs, le testeur de bande passante a dautres limites: il ne peut simuler ni le tlchargement de ressources dont lURL de requte est absolue (sur un autre serveur), ni le tlchargement de chiers FLV en flux continu simul.
Dans le lecteur Flash intgr, CMd+b (Mac) ou Ctrl+b (Windows) affiche le testeur de bande passante. CMd+G (Mac) ou Ctrl+G (Windows) bascule le testeur de bande passante en affichage de lecture en continu. CMd+F (Mac) ou Ctrl+F (Windows) bascule le testeur de bande passante en affichage image par image. CMd+rEtOUr (Mac) ou Ctrl+EntrE (Windows) simule le tlchargment.
Raccourci
Fiche 83
Paramtrer la publication
Choisir un type de publication
Votre animation Flash peut avoir diffrentes destinations. Bien sr, Flash est principalement une plateforme dintgration pour le multimdia en ligne, aussi le plus souvent sera-t-elle insre dans un fichier HTML (voir Fiche 84). Cette insertion est paramtrable (voir section Longlet HTML des paramtres de publication, Fiche 84). La relecture de lanimation dans le navigateur est tributaire de la prsence sur la machine cible dune version suffisante de lextension (plug-in) Flash Player (voir section Dtecter la version du lecteur Flash, Fiche 85). Lun des principaux griefs retenus contre la ralisation de sites web en Flash a longtemps t leur non reconnaissance par les logiciels de rfrencement, dits robots, qui explorent automatiquement la Toile pour mettre jour les index des moteurs de recherche. La situation volue avec la possibilit dajouter des mtadonnes aux fichiers publis (voir section Faciliter le rfrencement de lanimation, Fiche 86). Pour le multimdia hors ligne, la plateforme dintgration phare est Director. Nanmoins, Flash permet depuis longtemps la cration dune projection pour Mac OS ou Windows, qui
Publication
535
pourra tre grave sur un disque amovible, CD ou DVD (voir section Publier une projection, Fiche 87). Cette pratique est cependant rapidement promise lobsolescence. Adobe dveloppe en effet depuis quelque temps la technologie AIR (Adobe Integrated Runtime), un environnement dexcution trans-plateforme. Depuis la version CS4, Flash vous permet de gnrer un fichier AIR partir de votre fichier source FLA, lequel pourra sexcuter sur le Bureau dun ordinateur sous Mac OS, Windows ou Linux comme nimporte quelle autre application. Enfin, mme si lon ne parle plus dans ce cas de publication, mais plutt dexportation, une animation Flash linaire, donc non interactive, peut tout fait tre convertie en un fichier FLV ou en une squence QuickTime (voir section Exporter de lanimation en vido, Fiche89). Signalons pour conclure que toutes sortes dapplications sont capables de relire le format SWF: le lecteur QuickTime, Director ou Office pour ne citer que les plus importantes (sous Windows, grce au contrle ActiveX Flash).
La procdure de publication
Avant de demander la publication (Fichier> Publier), vous devez paramtrer celle-ci. Pour cela, choisissez Fichier> Paramtres de publication, qui ouvre la bote de dialogue Paramtres de publication sur longlet Formats reproduit Figure 83.1. Le panneau Proprits possde un sous-panneau Publier dans lequel se trouve un bouton Modifier ( droite de Profil) qui ouvre galement cette bote de dialogue. Par dfaut, tous les fichiers susceptibles dtre publis reprennent le radical de votre fichier source FLA (accueil.fla dans lexemple). Libre vous den changer. Et si vous le regrettez, cliquez sur le bouton Utiliser les noms par dfaut. Par dfaut galement, tous les fichiers publis le seront dans le mme dossier que le fichier source FLA. Vous pouvez spcifier un autre emplacement en cliquant sur le bouton tout fait droite, dont licne est un dossier. Dans longlet Formats des paramtres de publication, vous devez cocher les types de fichiers qui correspondent la publication souhaite. Par dfaut, comme le montre la Figure 83.1, cest la publication pour la Toile qui est envisage et les deux seuls formats cochs sont SWF et HTML. La bote de dialogue Paramtres de publication prsente alors galement un onglet Flash et un onglet HTML. Si vous voulez gnrer une projection, cochez lune des deux dernires options de longlet Formats (format EXE et/ou APP) et dcochez le reste. Il ny a dans ce cas pas dautre onglet spcifique.
536
Flash CS5
Cochez lun des formats GIF, JPEG ou PNG si vous souhaitez exporter une image sous ce format (le terme de publication est abusif dans ce cas). Pour chacun de ces formats graphiques coch, vous verrez apparatre un onglet correspondant dans la bote de dialogue.
Figure 83.1
Longlet Formats des paramtres de publication.
Raccourci
Maj+OptiOn+F12 (Mac) ou Maj+alt+F12 (Windows) ouvre la bote de dialogue Paramtres de publication. Maj+F12 publie lanimation.
Lopration de publication est sans effet sur le contenu de votre fichier source. Nanmoins, les rglages que vous spcifiez dans la bote de dialogue Paramtres de publication sont enregistrs avec le fichier FLA. Entre autres choses, ces paramtres de publication (voir sections suivante et Longlet HTML des paramtres de publication, Fiche 84) ciblent une version du lecteur Flash, une version du langage ActionScript, sont des rglages de compression de certains lments de mdias et rglent la mise en page HTML. Parfois vous ferez de la multipublication. Il peut y avoir plusieurs raisons cela. La premire est le multiciblage : vous souhaitez diffuser votre animation sur diffrentes sortes dappareils et de supports. Par exemple, vous voulez diffuser sur la Toile une version relativement compresse de votre animation, de sorte quil ny ait pas de latence significative de tlchargement. Par ailleurs, vous comptez distribuer la mme animation sur CD dans une version peu compresse, avec une qualit dimage maximum. Une seconde excellente raison pour pratiquer la multi-publication, cest pour comparer de visu leffet de diffrents jeux de paramtres de publication. Quelle que soit la raison qui vous pousse la multipublication, redfinir un jeu de paramtres dj utilis prcdemment est une perte de temps. Enregistrez dans un profil de
Publication
537
publication un jeu de paramtres que vous utilisez de faon rcurrente. Dans lexemple de la Figure 83.2, deux profils de publication ont t dfinis, lun pour la Toile, lautre pour le DVD. Ils sont slectionnables dans le menu Profil actuel. Aprs avoir avoir mis au point un jeu de paramtres de publication que vous souhaitez conserver, cliquez sur le bouton orn dun signe plus pour Crer un nouveau profil. Si vous fermez la bote de dialogue en cliquant sur OK, puis demandez Fichier> Enregistrer, votre nouveau profil est enregistr avec le document. Vous tes libre de le faire voluer par la suite. Les modifications ventuelles seront prises en compte au prochain enregistrement du fichier source. ce niveau, le profil est propre au document, mais lui seul. Pour pouvoir lappliquer dautres animations, slectionnez la commande Exporter dans le menu Importer/ exporter le profil. Dans une animation laquelle vous souhaitez appliquer le profil export, slectionnez la commande Importer dans ce mme menu. La commande Dupliquer le profil est trs utile pour construire un profil voisin dun profil existant, sans devoir repartir de zro.
Figure 83.2
La gestion des profils de publication.
Supprimer le profil Renommer le profil Dupliquer le profil Crer un nouveau profil Importer / exporter le profil
Longlet Flash des paramtres de publication

Dans longlet Flash reproduit Figure 83.3, vous paramtrez le fichier SWF publi. La premire chose faire est de cibler une version du lecteur Flash. La Figure 83.4 montre les choix possibles pour celle-ci. Si votre animation Flash est classique, au sens o elle est destine tre relue dans le navigateur dun ordinateur, vous avez le choix entre les versions 5 10 du lecteur Flash. Si vous voulez faire de votre animation un excutable trans-plateforme, slectionnez Adobe AIR 2. Enfin, si votre animation Flash est destination dun appareil portable, slectionnez lune des sept versions du lecteur Flash Lite (on trouve les kits de dveloppement Flash Lite ladresse suivante : www.adobe.com/devnet/
538
Flash CS5
devices/development_kits.html). Quant au dernier choix, iPhone OS, oubliez-le. Apple reste inflexible et nautorise pas que des applications pour iPhone dveloppes avec Flash soient commercialises sur lApple Store.
Figure 83.3
Longlet Flash des paramtres de publication.
Figure 83.4
Le menu Lecteur de longlet Flash des paramtres de publication.
Dans le menu Script, choisissez lune des trois versions du langage ActionScript, 1.0, 2.0 ou3.0. Toutes les combinaisons de versions du lecteur Flash et du langage ActionScript ne sont pas possibles. Aidez-vous du Tableau 83.1.
Publication
539
Dans la version CS4, vous tiez alert en cas dincompatibilit entre les techniques utilises dans votre animation et la version du lecteur Flash cible. Dans la version CS5, si votre animation comprend, par exemple, une transformation 3D et que vous avez cibl une version infrieure 10 du lecteur Flash, la transformation 3D ntant pas prise en charge, elle est purement et simplement supprime sans mnagement de votre animation! Tableau 83.1 : Compatibilit entre versions du lecteur Flash et du langage ActionScript
LecteurFlash 15 6 7 8 9 10 10.1 LogicielFlash 15 MX MX2004 8 CS3 CS4 CS5 ActionScript aucun 1.0 1.0,2.0 1.0,2.0 1.0,2.0,3.0 1.0,2.0,3.0 1.0,2.0,3.0
la rubrique Images et sons, vous spcifiez les rglages globaux de compression JPEG et MP3. Ces rglages sappliquent aux images JPEG et aux sons MP3 qui ne font pas lobjet dun rglage de compression local (reportez-vous respectivement la section Compression, Fiche 56 et la Fiche 64 pour un traitement dtaill). Loption Activer le dgroupage JPEG est apparue avec la version CS4. Lalgorithme de compression JPEG procde par macro-blocs de 8 8 pixels. Une forte compression a tendance unifier les pixels dun mme macro-bloc, avec pour consquence de rendre certains de ces macro-blocs particulirement visibles. Cochez cette option pour appliquer un lissage qui attnuera ces artefacts. La rubrique Paramtres SWF comporte quatre cases cocher: Compresser lanimation. Cette option est coche par dfaut. Vous avez tout intrt ce que votre fichier SWF soit le plus lger possible. Dcochez cette option dans le cas o vous cibleriez une version antrieure 6 du lecteur, incapable de relire un fichier SWF compress. Inclure les calques masqus. Par dfaut, les calques masqus ne sont pas exports dans le fichier SWF, mais vous pouvez le demander en cochant cette option. Inclure les mtadonnes XMP. Cette option fait lobjet de la Fiche86. Exporter SWC. Le format SWC est de lActionScript compil. Cochez cette option dans le cas particulier o vous publiez le symbole clip danimation dun composant que vous avez ralis, pour le diffuser. Dans la dernire rubrique, intitule Avanc, on trouve:
540
Flash CS5
Suivi et dbogage. Quatre options sous forme de case cocher: Gnrer un rapport de taille. En cochant cette option, la publication produira galement un fichier texte.Vous y trouverez toutes sortes dinformations, grce auxquelles vous vous ferez une meilleure ide des proportions des divers lements de votre animation dans la taille globale du fichier SWF. Protger contre limportation. Cochez cette option pour protger votre travail de lintrusion dinternautes indlicats. Sachez nanmoins que ceci narrtera gure le hacker. Il existe en effet sur la Toile toutes sortes doutils, dits dcompilateurs de SWF, qui sont capables dextraire par types de mdias toutes les ressources utilises dans un fichier SWF. Omettre les actions Trace. Une faon simple de dboguer un programme ActionScript qui peut parfois viter de lancer une session sous dbogueur consiste placer des instructions trace() divers endroits du code, pour se faire une ide du flux dexcution grce laffichage de messages dans le panneau Sortie (voir section Test et dbogage, Fiche 79). Au moment de finaliser, peut-tre navez-vous pas supprim toutes ces instructions de dbogage de votre code source. Dans ce cas, cochez cette option. Autoriser le dbogage. la section Test et dbogage, Fiche 79, nous avons dcrit le dbogage en local, cest--dire sur votre ordinateur. Bien videmment, une telle section de dbogage ne permet pas dexplorer lexcution des ventuelles oprations de communication sur le rseau, dclenches par votre programme ActionScript. Il faudra dans ce cas faire du dbogage distance et pour cela cocher cette option. Le dbogage distance ncessite galement linstallation dans votre navigateur du lecteur Flash Debug, mais il sagit l dun outil concernant plus le dveloppeur ActionScript confirm que le simple ralisateur Flash. Mot de passe. Dans le cas o vous aurez coch les deux options Protger contre limportation et Autoriser le dbogage, vous pourrez protger laccs du dbogage distance par le mot de passe saisi dans ce champ. Scurit de lecture locale. Le lecteur Flash met en uvre depuis sa version 8 une stratgie de scurisation des accs que votre fichier SWF peut faire. Avec loption par dfaut, Accs aux fichiers locaux uniquement, il ne peut accder quaux fichiers locaux. Si vous slectionnez loption Accs au rseau uniquement, votre fichier SWF peut envoyer et recevoir des infos sur le rseau, mais il perd la possibilit daccs aux fichiers locaux, ce qui protge la machine cible dventuels programmes espions ou malveillants. Notez galement quun fichier SWF dlivr par HTTP ne peut pas accder des donnes relevant dun protocole scuris (HTTPS). Acclration matrielle. Cette option est apparue avec la version CS4. Par dfaut, il ny a aucune acclration matrielle. Si vous choisissez loption Niveau 1 - Direct, il ny a pas acclration matrielle, mais seulement logicielle (loption devrait sintituler Acclration du rendu): le rendu, au lieu dtre dlgu au navigateur, est directement pris en charge par le lecteur Flash. Lacclration matrielle est effective, si dune part vous avez choisi loption Niveau 2 - GPU, et si dautre part la machine cible comporte
Publication
541
une carte dacclration graphique haute performance. Nanmoins, la prise en charge de ces modes tant assez hasardeuse, par prudence vous vous contenterez de loption par dfaut.
Dlai du script. Rglez dans ce champ le dlai maximum dexcution des scripts, cest-dire le dlai maximum au-del duquel tout script dont lexcution nest pas termine se verra interrompu par le lecteur Flash.
Fiche 84
Publier pour la lecture dans un navigateur

Balises HTML pour linsertion de SWF
Jusqu prsent, nous avons parl du lecteur Flash comme dune extension du navigateur. Au moment de sintresser au code HTML qui incorpore lanimation Flash dans une page HTML, code qui appelle la lecture du chier SWF dans le lecteur Flash, il faut distinguer deux cas: Internet Explorer (IE) sous Windows. Dans ce cas, le lecteur Flash prend la forme dun contrle ActiveX. Au niveau HTML, ceci ncessite une balise <object>. Elle utilise la fois des attributs (width, height, id, align, etc.) et des balises <param> imbriques. Elle dnit des attributs classid et codebase qui lui sont propres. Autre navigateur. Dans tous ces autres cas, le lecteur Flash prend la forme dun module dextension (plug-in) Flash Player. Au niveau HTML, cela ncessite une balise <embed>, qui nutilise que des attributs. Elle utilise des attributs pluginspage et type qui lui sont propres. Sachant que tout navigateur ignore une balise quil ne reconnat pas, le code HTML utilis intgre les deux balises, la balise <embed> tant imbrique lintrieur de la balise <object>. Lorsque IE relira le code, il appliquera la balise <object> et ignorera la balise <embed> quil ne reconnat pas. Rciproquement, tout autre navigateur appliquera la balise imbrique <embed> en ignorant la balise <object>. La Figure 84.1 montre ldition dans Dreamweaver CS5 du code HTML pour linsertion dun fichier butinages.swf. Vous avez lignes 311 315 un exemple de balise <embed> imbrique dans une balise <object>. Le tout est ici imbriqu dans une balise <noscript>. Il sagit du code qui sexcute sur un navigateur ne reconnaissant pas JavaScript, ou dont le paramtrage bloque le traitement de scripts JavaScript. Peut-tre venez-vous dtre pris de nause ou de migraine la vue du code HTML de la Figure 84.1. Rassurez-vous, il nest aucunement question de saisir ce code vous-mme. Diverses possibilits de gnration automatique vous sont offertes. Vous disposez au moins de la premire: en cochant HTML dans longlet Formats (voir Figure 83.1), vous demandez Flash de gnrer le fichier HTML contenant ce code minimal. partir de l, soit
542
Flash CS5
vous copiez-collez la balise <object> et sa balise <embed> imbrique, depuis ce document HTML gnr automatiquement, dans celui que vous avez dvelopp pour accueillir lanimation Flash, soit vous enrichissez le document HTML gnr automatiquement. Si vous utilisez Dreamweaver pour ldition de code HTML, vous disposez dune autre solution. Ce logiciel faisant partie de la suite CS5, il propose des outils pour linsertion dune animation Flash dans une page HTML. La Figure 84.2 montre le code HTML gnr par Dreamweaver CS5 pour linsertion du mme fichier butinages.swf que prcdemment.
Figure 84.1
dition dans Dreamweaver CS5 dun fichier HTML publi par Flash.
Figure 84.2
Insertion par Dreamweaver CS5 du code HTML pour lintgration dune animation Flash.
Publication
543
Raccourci
Maj+F12 publie lanimation, donc gnre les fichiers SWF et HTML dans le cas dune publication pour la Toile.
Longlet HTML des paramtres de publication

Dans longlet HTML de la bote de dialogue Paramtres de publication, reproduit la Figure84.3, vous paramtrez lintgration de votre animation Flash dans la page HTML.
Figure 84.3
Longlet HTML des paramtres de publication.
Dans le menu Modle, reproduit la Figure 84.4, la valeur par dfaut Flash seulement est celle que vous utiliserez la plupart du temps, votre animation tant tlcharge via le protocole HTTP. Dans le cas dune application manipulant des donnes confidentielles, le tlchargement devra tre scuris et se faire via le protocole HTTPS. Dans ce cas, vous slectionnerez le modle Flash HTTPS. Les autres modles correspondent des cas particuliers. Vous pouvez dans un premier temps les ignorer. Nanmoins, pour en savoir un peu plus sur chacun deux, slectionnez loption, puis cliquez sur le bouton Infos.
544
Flash CS5
Figure 84.4
Le menu Modle de longlet HTML des paramtres de publication.
Pour la dtection automatique de la version du lecteur Flash prsent sur la machine de linternaute, reportez-vous la section Dtecter la version du lecteur Flash, Fiche 85. Loption par dfaut pour Dimensions est Identique lanimation. Le rectangle englobant lanimation dans la page HTML aura ainsi les dimensions exactes de la scne de votre animation Flash. Pour spcifier dautres dimensions de manire absolue, choisissez Pixels. Pour les spcifier de manire relative, cest--dire en pourcentage de la fentre du navigateur, choisissez Pourcentage. La rubrique Lecture regroupe quatre options sous forme de cases cocher: En pause au dmarrage. Cette option nest pas trs utile, puisquune instruction stop(); place sur la premire image du scnario aura le mme effet (voir Fiche25), tout en prsentant lavantage dtre dj effective lors des tests avant publication. Boucle. Cochez cette option si vous souhaitez que votre animation soit lue en boucle dans la page HTML. Police de priphrique. Sous Windows uniquement, vous devez cocher cette option si vous avez spcifi lutilisation des polices de la machine pour des champs de texte statique (voir section Polices de priphrique, Fiche 44). Afficher le menu. En cochant cette option, vous permettez linternaute daccder au menu contextuel du lecteur Flash, reproduit Figure 84.5. Cela laisse linternaute la possibilit de zoomer sur la scne, de choisir une qualit daffichage, darrter et de reprendre la lecture ou de rembobiner. Vous pouvez dsactiver tous les lments de ce menu, lexception de Paramtres et propos dAdobe Flash, via une instruction:
Player.Stage.showDefaultContextMenu = false;
Dans longlet HTML, choisissez pour le paramtre Qualit, lune des six options dantialiassage suivantes: Infrieure. Avec cette option, il ny aura aucun anti-aliassage. Basse automatiquement. Lintitul de cette option est pour le moins trange. Il signifie en fait que la lecture dmarre sans anti-aliassage, mais quil pourra y en avoir un peu si possible. Autrement dit, choisir entre la performance (le respect de la cadence) et la qualit de rendu, avec cette option le lecteur Flash privilgiera la premire: lanti-
Publication
545
aliassage naura lieu que si les ressources de linternaute (connexion, ordinateur) le permettent, aux moments o cela est possible.
Moyenne. Avec cette option, il y aura deux fois moins danti-aliassage quavec loption leve, mais aucun lissage des images bitmap. Les deux options Basse automatiquement et leve automatiquement sont un hritage de lpoque o la qualit de rendu ne pouvait qutre gre automatiquement. Il est dsormais possible de modifier la qualit de rendu du lecteur par instruction ActionScript et loption Moyenne est gnralement bien plus satisfaisante que les deux options automatiques. leve automatiquement. Cette option signifie que la lecture dmarre avec de lantialiassage, mais quil pourra tre supprim si besoin. Autrement dit, choisir entre la performance (le respect de la cadence) et la qualit de rendu, avec cette option le lecteur Flash privilgiera la seconde. leve. Option danti-aliassage tout le temps. Les images bitmap sont anti-aliasses, sous rserve quelle ne soient pas en mouvement. Suprieure. Option danti-aliassage tout le temps et pour tout (lissage systmatique des images bitmap, mme en mouvement).
Figure 84.5
Le menu contextuel du lecteur Flash.
Le paramtre Mode fentre a trois valeurs possibles. La valeur par dfaut est Fentre. Elle signifie que lanimation Flash joue dans une fentre qui lui est propre et avec laquelle le contenu HTML ne peut interfrer (par exemple un menu droulant DHTML ne pourra se drouler dans cette zone). Deux modes sans fentre permettent la composition du contenu Flash avec le contenu HTML. Avec loption Sans fentre opaque, les pixels du fond de scne
546
Flash CS5
conservent la couleur qui leur a t attribue dans Flash, tandis quavec loption Sans fentre transparent, ils deviennent transparent, de sorte que lanimation Flash sincruste dans le contenu HTML. Sachez que les modes sans fentre sont diversement pris en charge par les navigateurs et que mme sils le sont, ils reprsentent une charge de travail supplmentaire pour le rendu au sein du navigateur, surtout en transparence, qui peut svrement dgrader les performances de votre animation. Ces modes sans fentre sont ignors si vous avez opt pour une acclration du rendu (voir Figure 83.3). La Figure 84.6 montre leffet du paramtre Alignement HTML (dans chaque cas, la valeur est indique dans le titre de la fentre). Avec la valeur Gauche (respectivement Droite), le fichier SWF reste align gauche (respectivement droite) lorsque la fentre du navigateur est agrandie. linverse, lorsque la fentre du navigateur est rtrcie, le fichier SWF est tronqu droite (respectivement gauche) lorsque la valeur du paramtre est Gauche (respectivement Droite). Les autres options sont Haut, Bas et Par dfaut, correspondant au centrage. Les navigateurs mettent diversement en uvre linterprtation de ce paramtre. Ainsi, dans Firefox, le comportement est celui attendu pour Gauche, Haut et Droite, mais avec les options Bas ou Par dfaut, le fichier SWF reste quoi quil en soit dans le coin suprieur gauche de la fentre HTML.
Figure 84.6
Mise en page HTML: Alignement HTML.
Publication
547
Le paramtre chelle conditionne le comportement de lanimation Flash lors du redimensionnement de la fentre du navigateur (lintitul Redimensionnement serait dailleurs plus parlant). Vous avez le choix entre les quatre options suivantes: Par dfaut (afcher tout). Cette option prserve les proportions de lanimation et nintroduit aucune distorsion. Dans le cas o les proportions de lanimation et celles de la fentre diffrent, des bordures (horizontales ou verticales selon le cas) sont ajoutes la scne de lanimation pour quelle soit visible intgralement. Dans lexemple de la Figure 84.7 et dans ceux qui suivent, la scne de lanimation Flash fait 400 300 et dans la mise en page HTML, elle est place dans un rectangle 500 200. Dans chaque exemple, le titre de la fentre Firefox indique les valeurs pour les deux paramtres chelle et Alignement Flash. La Figure 84.7 montre que lanimation est rduite pour tenir dans la hauteur (comparez la Figure 84.10) et une bordure verticale est ajoute. Aucune bordure. Cette option prserve les proportions de lanimation et nintroduit aucune distorsion. Dans le cas o les proportions de lanimation et celles de la fentre diffrent, la scne de lanimation est tronque. Comme le montre lexemple de la Figure84.8, la partie tronque dpend du paramtre Alignement Flash. Lanimation est agrandie pour tenir dans la largeur (comparez la Figure 84.10).
Figure 84.7
Mise en page HTML: Afficher tout.
548
Flash CS5
Figure 84.8
Mise en page HTML: Aucune bordure.
Taille exacte. Par taille exacte, il faut comprendre celle spcifie en HTML et non celle de lanimation insre. Cette option ne prserve pas les proportions de lanimation et introduit de la distorsion pour remplir toute la fentre, comme le montre lexemple de la Figure84.9.
Figure 84.9
Mise en page HTML: Taille exacte.
Publication
549
Pas de redimensionnement. Avec cette option, il ny aura quoi quil en soit aucune adaptation la taille de la fentre. Comme le montre lexemple de la Figure 84.10, lanimation nest ni rduite, ni agrandie. Elle est tronque en fonction du paramtre Alignement Flash.
Figure 84.10
Mise en page HTML: Pas de redimensionnement.
Le paramtre Alignement Flash dtermine la position de lanimation Flash lintrieur du rectangle qui lui est allou dans la mise en page HTML. Il na deffet que lorsque les dimensions de ce rectangle diffrent de celles de lanimation et lorsque le paramtre chelle a une valeur diffrente de Taille exacte, comme le montrent les Figures 84.7, 84.8 et 84.10. Dans le menu Horizontal, vous avez le choix entre Gauche, Centr et Droite. Dans le menu Vertical, vous avez le choix entre Haut, Centr et Bas. Les deux valeurs par dfaut sont Centr. Laissez coche la case Afficher les messages davertissement.
550
Flash CS5
Communication avec le fichier SWF via JavaScript

Il est parfois ncessaire de transmettre des informations lanimation Flash au moment de son lancement, par exemple des donnes que vous auriez fait saisir par linternaute dans un formulaire HTML. Vous devez pour cela diter le code HTML gnr et rajouter un paramtre flashvars la balise <object> et un attribut flashvars la balise <embed>. La valeur de ce paramtre ou attribut est une chane qui suit la syntaxe dencodage des paires nom-valeur dans une URL. Autrement dit, nom et valeur seront spars par un signe gal et deux paires conscutives spares par une esperluette (nintroduisez aucun espace). Par exemple, ajoutez la balise <object> le paramtre suivant:
<param name="flashvars" value="phylum=papillon&espece=machaon" />
et ajoutez la balise <embed> lattribut suivant:

flashvars="phylum=papillon&espece=machaon"
Votre code ActionScript peut rcuprer ces valeurs dans des variables homonymes du scnario principal, phylum et espece dans lexemple ci-dessus. Une alternative consiste faire appel AC_FL_RunContent (voir http://kb2.adobe.com/cps/252/7c29e252.html).
Fiche 85
Grer le tlchargement de lanimation

Dtecter la version du lecteur Flash
En cochant Dtecter la version de Flash (voir Figure 84.3) et en renseignant les numros de rvision principale et secondaire (le numro de version majeure nest pas ditable, il correspond celui que vous avez cibl dans longlet Flash ; voir Figure 83.3), le fichier HTML publi contiendra le code JavaScript ncessaire pour dtecter le type et la version du navigateur, si oui ou non une version du lecteur Flash est prsente sur la machine de linternaute, et dans laffirmative, quelle version. Vous navez aucun script compliqu crire, ni mme copier. La dtection dans Flash CS5 nest pas parfaite, mais elle dtecte nanmoins la prsence dune version au moins 4 du lecteur Flash. Avant la version CS4, la publication produisait un fichier JavaScript externe AC_RunActiveContent.j quil fallait transfrer sur le serveur en mme temps que les fichiers HTML et SWF. Ce nest plus ncessaire, le fichier HTML se suffit lui-mme. Inutile de plonger dans le dtail de ce code complexe. Contentez-vous des paramtres de la fonction JavaScript qui fait le travail pour nous, visibles aux lignes 288 et 293 du code HTML gnr par Flash et reproduit Figure 84.1. lexcution, grce cette dtection, dfaut de lecteur Flash prsent ou si la version prsente est insuffisante pour la relecture de votre animation, linternaute en est inform et il est invit tlcharger la dernire version du lecteur Flash. La Figure 85.1 montre quelquesunes des interfaces possibles pour inviter linternaute tlcharger le lecteur Flash.
Publication
551
Figure 85.1
Diffrentes invites au tlchargement du lecteur Flash.
Par le pass, diffrentes solutions ont t proposes pour linvite au tlchargement du lecteur Flash. Par exemple, le code construit sur le modle suivant :
<embed ... pluginspage=http://www.adobe.com/go/getflashplayer />
produit licne de morceau de puzzle et le message dinvite reproduits gauche de la Figure85.1. Cette solution est pour le moins sommaire et ne vous permet pas dajouter du contenu de rechange. Le code construit sur le modle suivant:
<object ... codebase="http://fpdownload.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=8,0,0,0">
lorsquil est relu par Internet Explorer sous Windows, produit licne universelle de contenu manquant et une barre dinformation pas trs rassurante demandant linstallation du contrle ActiveX. Sur iPhone, licne est une brique de Lego avec un point dinterrogation (il ny a pas de lecteur Flash sur iPhone). Vous devez viter ce genre de situation qui peut savrer dstabilisante pour linternaute peu au fait des technologies numriques. Vous devez galement viter le pire, savoir labsence totale de contenu. Les deux mthodes prcdentes sont rputes obsoltes. Depuis la sortie de Flash CS4, la mthode recommande est dutiliser SWFObject 2. Vous trouverez un tutoriel dtaill sur cette approche traduit en franais ladresse http://egypte.olympenetwork.com/swfobject-francais.html. Le code est tlchargeable ladresse http://code. google.com/p/swfobject/downloads/list. Deux mthodes sont lheure actuelle prconises: Adobe Express Install. Il sagit dun dispositif interne au lecteur Flash qui permet la mise jour dune version ancienne de lextension lecteur Flash avec la dernire version. Cette mise jour est transparente, dans le sens o elle noblige pas linternaute faire le dtour par le site web dAdobe, ce qui dcouragerait beaucoup dinternautes. Une bote de dialogue standardise saffiche, dans laquelle linternaute doit simplement confirmer linstallation. Elle est reproduite au centre de la Figure 85.1. La solution nest toutefois pas une panace, puisqu part sur Internet Explorer, la procdure demande un moment donn de quitter le navigateur.
552
Flash CS5
Un contenu de rechange. Cest sans doute la solution qui importune le moins linternaute. Le gnrateur SWFObject 2 produit par dfaut le contenu de rechange suivant:
<a href="http://www.adobe.com/go/getflashplayer> <img src=http://www.adobe.com/images/shared/download_buttons get_flash_player.gif alt=Get Adobe Flash player /> </a>
dont leffet est laffichage dun bouton standard, qui au clic conduira linternaute la page de tlchargement. Ce bouton est reproduit droite de la Figure 85.1. Remarquez que le code gnr par Dreamweaver lors de linsertion dune animation Flash (Insertion> Mdias> Flash) prend en charge la dtection du lecteur et quil le fait selon cette approche (voir Figure 84.2, lignes 26 29 du code HTML). Ceci est une incitation, si vous le pouvez, plutt partir du code gnr par Dreamweaver que de celui gnr par Flash. Francisez le code prcdent et utilisez ladresse de tlchargement suivante: http://get.adobe.com/fr/flashplayer/. Ce bout de code doit bien sr tre enrichi par vos soins avec un visuel votre got faisant office de bande-annonce de votre site Flash de manire inciter linternaute procder la mise jour.
Utiliser un prchargeur
Aprs vous tre assur que linternaute dispose de la version requise du lecteur Flash, votre second problme est de lui garantir une lecture uide de lanimation. Un prchargeur est un dispositif cod en ActionScript qui empche le lecteur Flash de jouer lanimation tant que la totalit du chier SWF nest pas tlcharge. la terminaison dun tlchargement, un vnement Event.COMPLETE est mis. Le prchargeur est donc la base un couteur de cet vnement (voir section Le temps de lexcution : les vnements, Fiche 77). Placez le script suivant la premire image de votre animation:
stop(); //-------------------------------------------function finPrechargeur( evt: Event): void { play(); } this.loaderInfo.addEventListener( Event.COMPLETE, finPrechargeur);
Cette version minimale est trs critiquable, puisquelle ne communique absolument rien linternaute qui ne voit que le contenu de la premire image. Une seconde version consiste afcher textuellement le pourcentage charg, en le mettant jour au fur et mesure du tlchargement. Pour cela, vous devez utiliser les deux proprits bytesLoaded (nombre doctets dj tlchargs) et bytesTotal (nombre total doctets tlcharger), proprits dont disposent diffrentes classes ActionScript 3.0. Il vous suft de diviser la premire par la seconde pour obtenir la proportion dj charge du chier. Le rsultat de cette division est un nombre entre 0 et 1. Pour obtenir un pourcentage, il suffit de le multiplier par 100 (larrondi sobtient grce Math.floor()).
Publication
553
Lvnement ProgressEvent.PROGRESS est mis continment pendant toute la dure dun tlchargement. La seconde version du prchargeur ajoute donc un couteur de ces vnements. En supposant lexistence sur la premire image du scnario dun champ de texte dynamique nomm pourcentage, cela donne le code suivant:
stop(); //-------------------------------------------function prechargement( evt: ProgressEvent): void { pourcentage.text = Math.floor( evt.bytesLoaded /evt.bytesTotal *100) +% charg; } this.loaderInfo.addEventListener( ProgressEvent.PROGRESS, prechargement); //-------------------------------------------function finPrechargeur( evt: Event): void { play(); } this.loaderInfo.addEventListener( Event.COMPLETE, finPrechargeur);
Bien sr, laffichage du pourcentage sous forme textuelle a un parfum darchasme et vous voudrez certainement raliser une barre de progression indiquant visuellement la proportion danimation charge. Le plus simple et le plus sobre consiste utiliser une forme rectangulaire, dont vous mettrez jour la dimension horizontale (scaleX, qui attend une valeur entre 0 et 1) au l de la progression du tlchargement. Pour que le rectangle stire bel et bien vers la droite, vous devez tablir son point dalignement sur le bord gauche (voir Fiche 33). En supposant que cette barre de progression est une occurrence de clip danimation ou de graphique, nomme barreProgression, il vous suffira de remplacer le corps de la fonction prechargement() prcdente par linstruction suivante:
barreProgression.scaleX = evt.bytesLoaded /evt.bytesTotal;
Un raffinement consisterait placer sous loccurrence barreProgression et aux mmes coordonnes quelle, une autre occurrence du mme symbole avec une opacit attnue. Elle servirait de rfrence visuelle pour le 100%. Un autre raffinement, fonctionnel et non plus visuel, consisterait placer le contenu de lanimation principale partir de limage 2 voire dune autre image et de remplacer, dans la fonction fin-Prechargeur() prcdente, lappel play() par un appel gotoAndPlay(), avec en paramtre une rfrence cette image o lanimation dbute rellement.
554
Fiche 86
Flash CS5
Ajouter des mtadonnes

Les mtadonnes XMP
La suite CS5 permet lajout de mtadonnes de linformation sur les donnes aux fichiers que produisent ses diffrents logiciels. Outre le SWF, on trouve ainsi parmi les formats concerns GIF, TIFF, JPEG, PNG, EPS, PDF, PSD. Ces mtadonnes sont notamment reconnues par Bridge (voir Fiche 5), dans lequel vous pouvez mme les diter (bouton dont licne est un crayon). Dans ce contexte, ces informations seront dabord usage personnel. Grce aux mots-cls, par exemple, vous pourrez filtrer votre base de mdias pour y retrouver plus facilement des lments pertinents. Mais ces informations pourront aussi tre destination dautres ralisateurs et/ou dveloppeurs avec qui vous travaillez. Enfin, elles pourront lavenir alimenter les moteurs de recherche. Le format retenu est celui de XMP (eXtensible Metadata Platform), une application XML ddie. La bote de dialogue de saisie des donnes XMP est accessible de deux manires. Nous avons dj rencontr la premire la Fiche 83 : le bouton Informations droite de loption Inclure les mtadonnes XMP, la rubrique Paramtres SWF de longlet Flash des paramtres de publication (voir Figure 83.3). La seconde est la commande Fichier> Informations. La bote de dialogue des mtadonnes est organise en onglets. La Figure 86.1 reproduit le premier de ces onglets, intitul Description. Entre autres choses, vous pouvez y saisir le titre du document, son auteur et sa fonction, une description du document Flash et attacher des mots-cls ce dernier. Une section est galement ddie la proprit intellectuelle (origine amricaine oblige, cest dans les termes du droit anglo-saxon, donc du copyright et non des droits dauteur). Le dveloppement de XMP sest appuy sur les travaux de normalisation des changes de donnes dans le monde de la presse, travaux effectus par le consortium IPTC (International Press Telecommunications Council). Le second onglet sintitule donc IPTC et on y trouve quantit de champs dinformation relatifs la proprit intellectuelle. Viennent ensuite des onglets ddis chacun un type de mdia: la photographie, le son et la vido. Le premier de ces onglets sintitule Donnes de la camra, qui est sans doute une traduction non rflchie de Camera data, donc les Donnes du photoscope. On y retrouve en effet des champs concernant le type dappareil (Marque, Modle), la date et lheure de la prise de vue, les paramtres de la prise de vue (Vitesse dobturation, Programme dexposition, Ouverture du diaphragme, Valeur douverture, Valeur douverture maximale, Vitesses ISO, Distance Focale, Objectif, Flash), toutes informations que produisent les appareils photo numriques. On trouve ensuite un onglet intitul Donnes vido et un autre, Donnes audio.
Publication
555
Figure 86.1
Longlet Description des mtadonnes XMP .
Longlet Catgories, reproduit Figure 86.2, est sans doute avec longlet Description, le plus important pour le ralisateur Flash ordinaire. Cest en effet dans cet onglet que vous saisirez les mots-cls qui, on peut lesprer, seront bientt exploits par les programmes robots explorateurs de la Toile des moteurs de recherche.
Figure 86.2
Longlet Catgories des mtadonnes XMP .
Vous renseignerez les champs de longlet SWF mobile si vous dveloppez pour le lecteur Flash Lite. Longlet Origine reprend des informations de proprit intellectuelle. Longlet DICOM naura dutilit que si vous uvrez dans le domaine de limagerie mdicale. Le DICOM est en effet le standard de communication et darchivage en la matire (Digital Imaging and Communications in Medicine). Longlet Historique offre une zone de texte dans laquelle vous pouvez saisir lhistorique de lvolution du document. Dans longlet Illustrator, vous pouvez enregistrer un profil. Dans longlet Avanc, on trouve des proprits EXIF,
556
Flash CS5
PDF. Enfin, longlet Donnes brutes reprend le code XML des informations saisies dans les autres onglets. Une autre faon de voir ces donnes brutes est de cocher dans longlet Flash loption Gnrer un rapport de taille (voir Figure 83.3). La publication produira alors aussi un fichier XMP Data Report.txt.
Faciliter le rfrencement de lanimation

Loptimisation dun site web pour les moteurs de recherche (Search Engine Optimization, SEO) est un sujet part entire. Des livres entiers lui sont consacrs. Il nest donc pas question de traiter le sujet en profondeur dans cette section, mais simplement de donner quelques pistes concernant les sites raliss en Flash. Commenons par dnoncer une contre-vrit qui voudrait quun site fait en Flash ne soit pas index. Lors de la publication, Flash gnre un fichier HTML. Si cest bel et bien Flash que vous confiez cette tache, il ajoute automatiquement au HTML tout le texte statique, saisi manuellement dans lenvironnement de ralisation (par opposition au texte dynamique, gnr par ActionScript), y compris les hyperliens. Ce texte est donc trait par les robots, ces programmes qui explorent continuellement la Toile pour mettre jour les index des moteurs de recherche. Lors de loptimisation pour les moteurs de recherche dun site en HTML, un des lments importants consiste bien peser quels mots doivent faire lobjet dun traitement typographique particulier (la titraille, les styles gras et italique, les liens hypertexte). En effet, dans le peu que lon sache des algorithmes dindexation, il y a le fait que les mots du texte ayant ces enrichissements typographiques reoivent une plus forte pondration lors des calculs. A priori, avec du HTML gnr automatiquement par Flash, vous perdez cette possibilit dorienter lindexation vers les mots-cls pertinents. Ce HTML est en effet peu structur. Il fait simplement lobjet dune balise . De plus, les liens sont retranscrits en liens HTML standard avec uniquement des attributs href et target. Une parade consiste utiliser au maximum dans lanimation Flash des champs de texte dynamiques dans lesquels vous placerez du texte HTML (htmlText, voir section Rendu HTML, Fiche 47), que vous formaterez laide feuilles de style CSS, ou via la classe TextFormat. Lun des arguments majeurs des dtracteurs de Flash a longtemps t quun fichier SWF tait une bote noire lintrieur de laquelle les robots ne pouvaient pas entrer. Les choses changent. Adobe collabore dsormais avec Google et Yahoo!. Une version spciale du lecteur Flash leur a t fournie afin de servir dauxiliaire leurs algorithmes dindexation. Leurs robots sont donc dsormais en mesure dexplorer les fichiers SWF, comme ils le font avec les fichiers HTML. Le problme est comme dhabitude lopacit extrme qui entoure ces fameux algorithmes, de sorte que pas grand monde ne sait exactement comment ils procdent lintrieur dune animation Flash. dfaut de pouvoir rpondre la question comment indexent-ils?, nous pouvons rpondre la question quindexent-ils?. Rponse: tout le texte, y compris les URL. Or, une animation Flash, cest potentiellement pas mal de contenu texte: tous les champs de texte et tout le code ActionScript. Cela signifie que les robots accdent beaucoup de choses. Donc sil
Publication
557
y en a que vous souhaitez garder prives, il vous faudra les rendre graphiques. Sous forme vectorielle par sparation (voir Fiche 50), ou sous forme matricielle par importation (voir Fiche 52). Le site tout-en-Flash est sans doute un pige (sauf accepter dtre mal index). Les robots se basent en effet sur les liens hypertexte. Il faut donc viter un systme de navigation reposant uniquement sur des liens hypermdia raliss dans Flash. Si vous choisissez malgr tout cette approche, une solution pour tre index correctement consiste peut-tre redoubler le site tout-en-Flash dun autre site tout-en-HTML. Indpendamment du travail supplmentaire que cela reprsente, le risque est alors que cette redondance soit finalement considre par les algorithmes dindexation comme une forme de mauvaise pratique (cloaking), donc value ngativement. Une autre rponse possible ce problme de navigation est dabandonner le principe dune application Flash dun seul tenant, dont lexcution est asynchrone (un seul tlchargement), pour une application multipages, dont lexcution est synchrone (autant de tlchargements que de pages). Dans ce cas, la navigation ne se fait plus par saut des images tiquetes du scnario (voir Fiche 25), mais par hyperlien (URL), donc prise en compte par les robots. Par ailleurs, une autre supriorit du site tout-en-HTML sur le site tout-en-Flash, tient ce que, dans le premier, vous pouvez faire pointer un lien sur nimporte quelle page du site. Par contre, le site tout-en-Flash reste une sorte de forteresse, au sens o depuis le HTML vous ne pouvez a priori faire pointer un lien que sur lunique entre de ladite forteresse. De l, il faut plusieurs clics linternaute passages par plusieurs crans, plusieurs tats pour atteindre ce quil recherche. Dun point de vue dinterface utilisateur, dergonomie, ce nest pas trs bon. Pour corriger cela, il faut mettre en uvre des liens en profondeur, qui permettent datteindre directement certains crans du site ou tats de lapplication. Loutil SWFAddress, base de JavaScript et fonctionnant avec SWFObject, permet de raliser ces liens en profondeur. Il cre des URL virtuelles, sortes dancres nommes. Lexcution reste asynchrone. SWFAddress est tlchargeable ladresse suivante: http://sourceforge.net/ projects/swfaddress/files/swfaddress/. Pour conclure ces remarques sur le rfrencement, il semblerait quen dpit de ladoption par Adobe des mtadonnes XMP, celles-ci ne soient pas encore exploites par les algorithmes dindexation des moteurs de recherche. Que ceci ne vous dcourage pas de crer ces mtadonnes. Le jour o elles seront prises en compte, ce sera tout bnfice pour vous. Ajoutons que llment dterminant dans le rfrencement de votre site en Flash consistera tre point par un maximum de sites ayant une forte popularit de manire obtenir vousmme de la popularit (PageRank). Mais il sagit l du traitement gnral du rfrencement, indpendamment du fait que Fash ait t utilis pour la ralisation.
558
Fiche 87
Flash CS5
Publier une application indpendante

Publier une projection
Le terme de projection provient de la mtaphore fondatrice de Director qui est le cinma (un director est un metteur en scne). En filant cette mtaphore, le rsultat final du travail dintgration multimdia est une projection. Les fichiers SWF et HTML qui rsultent dune publication pour la Toile ne sont pas autonomes. Pour les relire, linternaute doit disposer dun navigateur et dun module dextension de ce dernier qui contient le lecteur Flash. Une projection est linverse une application entirement indpendante. Double-cliquable, elle sexcute en dehors de tout navigateur. Si elle ne ncessite pas de lecteur Flash, cest tout simplement que celui-ci est incorpor au fichier publi, ce qui produit un fichier faisant plusieurs mga-octets. Avec pareille taille, une projection nest pas destine la diffusion en ligne, mais la distribution hors ligne sur disque amovible, CD ou DVD. Rappelons que pour gnrer une projection, vous devez cocher Projection Windows ou Projection Mac (ou les deux) dans longlet Formats (voir Figure 83.1). Une projection nest pas trans-plateforme. Certains utilitaires ddis aux projections Flash offrent un paramtrage de la gnration de projection, paramtrage inexistant dans celle standard de Flash. Citons entre autres SWF Studio 3.8 (http://www.northcode.com), Zinc 3.0 (http://www.multidmedia.com). Vous pouvez demander ce que la projection joue en plein cran en insrant dans votre code linstruction suivante:
fscommand( fullscreen", true);
Nous ninsistons pas sur la projection, puisque la nouvelle possibilit de publication pour AIR la rend quelque peu obsolte.
Publier un fichier AIR

La technologie AIR (Adobe Integrated Runtime) est un environnement dexcution transplateforme pour Mac OS, Linux, Windows. partir de votre fichier source monAnima.fla, vous publiez un unique fichier monAnima.air qui sexcutera sur le Bureau de nimporte quel ordinateur de lune des trois plateformes, sous rserve que lenvironnement dexcution AIR y soit prsent. Ayant install Flash sur votre machine, vous avez AIR. Pour ceux qui ne lont pas, il est tlchargeable gratuitement ladresse suivante: http://get.adobe.com/ fr/air/. La Figure 87.1 reproduit lencart de tlchargement de AIR avec son logo rouge.
Figure 87.1
Lencart de tlchargement de AIR.
Publication
559
Vous pouvez dcider demble de crer une application AIR, donc faire le choix dans la bote de dialogue Nouveau document, comme le montre la Figure 87.2.
Figure 87.2
Nouveau document Flash destin une publication AIR.
Une autre possibilit consiste dvelopper une animation Flash (ActionScript 3.0) et ne cibler AIR quau moment de la publication. Flash CS3 ne permettait de cibler que AIR 1.0. Avec Flash CS4, il tait aussi possible de cibler AIR partir de la version 1.1. lheure o nous crivons, la version courante est AIR 2. La publication AIR dun fichier ActionScript2.0 est possible, mais lapplication naura pas accs linterface de programmation (API) ActionScript 3.0 propre AIR. La Figure 87.3 montre la page daccueil du Guide de rfrence ActionScript 3.0. Dans le panneau suprieur gauche, on voit que trois paquetages sont ddis AIR. Dans le panneau infrieur gauche, le nom des classes propres AIR est suivi de son icne rouge. Vous avez deux moyens douvrir la bote de dialogue des paramtres AIR dont longlet Gnral est reproduit Figure87.4: soit utiliser la commande Fichier> Paramtres dAdobe AIR 2, soit cliquer sur le bouton Modifier, en bas du sous-panneau Publier des proprits du document. Dans cet onglet, les champs Nom de fichier, Nom, Version et ID App sont prremplis. Naviguez sur le disque dur pour dsigner dans Fichier de sortie le dossier o enregistrer le fichier AIR. Renseignez les champs Description et Copyright. Choisissez un Style de fentre. Dcochez les profils dapplication qui ne correspondent pas la vtre. Le profil Priphrique mobile tendu nest pas encore utilisable. Ce qui distingue les profils Bureau et Bureau tendu, cest que dans le premier cas votre application sera installe par simple glisser-dposer du fichier AIR, tandis que dans le second elle le sera via un programme dinstallation dapplication natif. Utilisez ventuellement longlet Icnes, ainsi que longlet Avanc pour spcifier les types de fichiers associs, des paramtres de fentre initiaux, les dossiers dinstallation et de menus de lapplication.
560
Figure 87.3
La page daccueil du Guide de rfrence ActionScript 3.0.
Flash CS5
Figure 87.4
Longlet Gnral de la bote de dialogue des paramtres AIR.
Publication
561
Installer une application sur un ordinateur tiers tant une opration sensible, en tant quauteur dune application AIR, vous devez tre identifi par une signature numrique. Longlet Signature de la bote de dialogue des paramtres AIR, reproduit Figure 87.5, sert cette identification.
Figure 87.5
Longlet Signature de la bote de dialogue des paramtres AIR.
Lors de la publication de votre premire application AIR, il faut tablir cette signature numrique. Dans longlet Signature, cliquez sur Nouveau, ce qui affiche une nouvelle bote de dialogue, reproduite Figure87.6.
Figure 87.6
La bote de dialogue de cration dun certificat numrique auto-sign.
Aprs avoir renseign tous les champs de la bote de dialogue prcdente, cliquez sur le bouton icne de dossier puis naviguez jusquau dossier o enregistrer le fichier certificat et cliquez sur Choisir. Validez dun clic sur OK. Une bote dalerte vous informe que le
562
Flash CS5
certificat numrique auto-sign a t cr. Validez. De retour longlet Signature, le champ Certificat est pr-rempli avec le chemin du fichier de signature qui vient dtre cr. Entrez le mot de passe choisi ltape prcdente. Vous pouvez maintenant cliquer sur Publier. Une nouvelle bote dalerte vous informe que le fichier AIR a t cr. Validez une premire fois, puis une seconde pour enregistrer les paramtres AIR. La Figure 87.7 montre les trois fichiers produits partir du source Flash applicAIR.fla lissue de la procdure prcdente: applicAIR.swf, applicAIR-app.xml et applicAIR.air. Ce dernier peut tre double-cliqu. Une bote de dialogue demande confirmation lutilisateur pour linstallation de lapplication.
Figure 87.7
Tous les fichiers prsents lissue de la publication AIR.
Publier pour liPhone: si Apple jouait le jeu

Pour la version CS5 de Flash, Adobe a dvelopp et mis en avant dans son argumentaire commercial un outil Packager for iPhone permettant de publier des applications pour iPhone, cest--dire convertissant le fichier FLA de votre animation en une application iPhone, iPod Touch ou iPad native (OS iPhone 3.0). Cet utilitaire est galement intgr lenvironnement de dveloppement AIR. Malheureusement, cette ralit technologique bute sur la stratgie protectionniste dApple, qui refuse que des applications Flash destination des utilisateurs diPhone, diPod Touch ou diPad soient commercialises sur lApple App Store. Le travail fait par les ingnieurs Adobe pour dmontrer les possibilits de portages des applications Flash sur une grande varits de systmes et de machines se roriente vers la plateforme Android, systme dexploitation pour tlphones portables, dsormais dans le giron de Google.
Fiche 88
Exporter
Exporter une image de lanimation
La premire possibilit pour exporter limage courante de lanimation (celle sur laquelle se trouve la tte de lecture dans le scnario) est de le faire pendant la publication. Dans longlet Formats des paramtres de publication, vous pouvez cocher lun des trois formats de fichiers
Publication
563
dimages bitmap (voir Figure 83.1). Ce genre dimage pourra servir la promotion, ou bien elle pourra tre montre en cours de ralisation avant que lanimation soit excutable. La Figure 88.1 reproduit longlet GIF dans lequel vous paramtrez lexportation dans ce format. Par dfaut, la lecture est Statique. Le format GIF a la capacit dencoder les phases successives dune animation. Dans ce cas, cochez Anime. Spcifiez ou non la lecture en Boucle continue, ou un nombre fix de boucles. Soyez bien conscient du fait que produire un GIF anim partir dun fichier source Flash na de pertinence que pour une scne de taille trs rduite et un scnario de quelques images. Si vous cochez Entrelacer, limage saffichera sur la Toile en trois passes de raffinement progressif. Si dans le menu Type de palette vous avez choisi Personnalise, indiquez le chemin daccs cette palette personnalise dans le champ Palette. Spcifiez un Nombre maximum de couleurs si vous avez choisi dans le menu Type de palette lune des deux options de palette adaptative.
Figure 88.1
Longlet GIF des paramtres de publication.
La Figure 88.2 reproduit longlet JPEG dans lequel vous paramtrez lexportation dans ce format. Outre les dimensions, on y trouve la glissire habituelle grce laquelle vous faite le compromis entre un fort facteur de compression et une bonne qualit visuelle. Si vous cochez Progressive, limage saffichera sur la Toile en plusieurs passes de raffinement progressif. La Figure 88.3 reproduit longlet PNG dans lequel vous paramtrez lexportation dans ce format. Dans le menu Codage binaire, choisissez une profondeur de couleur, cest--dire
564
Flash CS5
la taille en bits alloue au codage de chaque pixel de limage. Vous pouvez ventuellement appliquer un filtre limage. Les autres paramtres sont identiques ceux de lexportation GIF.
Figure 88.2
Longlet JPEG des paramtres de publication.
Figure 88.3
Longlet PNG des paramtres de publication.
Vous avez une autre possibilit dexporter limage courante du scnario de votre animation: la commande Fichier> Exporter> Exporter limage. Dans la bote de dialogue denregistrement de fichier qui souvre, vous devez slectionner un format dans le menu reproduit Figure 88.4.
Publication
565
Figure 88.4
Le menu des formats dexportation dimage.
Aprs avoir valid, une bote de dialogue souvre qui vous permet de paramtrer lexportation dans le format choisi. La Figure 88.5 montre les paramtres de lexportation en JPEG.
Figure 88.5
La bote de dialogue Exporter au format JPEG.
Exporter de lanimation en vido

Lorsque votre animation est linaire, cest--dire lorsquelle est non interactive, donc que la tte de lecture parcourt le scnario de gauche droite sans arrt ni saut, vous pouvez envisager de lexporter sous forme de vido QuickTime ou de squence dimages JPEG, GIF ou PNG. Utilisez pour cela la commande Fichier> Exporter> Exporter lanimation, qui ouvre une bote de dialogue denregistrement de fichier dans laquelle vous devez choisir un format dans le menu reproduit Figure 88.6.
Figure 88.6
Le menu des formats dexportation de lanimation en vido QuickTime ou en squence dimages.
566
Raccourci
Flash CS5
Maj+OptiOn+CMd+s (Mac) ou Maj+alt+Ctrl+s (Windows) ouvre la bote de dialogue dexportation de lanimation.
Si vous choisissez le format QuickTime, la bote de dialogue des Paramtres dexportation QuickTime souvre. Elle est reproduite Figure 88.7. Si vous cochez ignorer la couleur de la scne, tous les pixels de la couleur de fond de scne seront cods dans un canal alpha, donc transparents. Ceci vous permettra de faire en aval de lincrustation vido. Lexportation peut tre globale (tout le scnario) ou bien dune dure que vous spcifiez. Laccs la mmoire vive tant beaucoup plus rapide que laccs au disque dur, il est recommand de stocker les donnes temporaires en mmoire vive si la cadence de votre animation est leve.
Figure 88.7
La bote de dialogue Paramtres dexportation QuickTime.
Si dans la bote de dialogue des Paramtres dexportation QuickTime vous cliquez sur le bouton Paramtres QuickTime, vous ouvrez une autre bote de dialogue Rglages de la squence, reproduite Figure 88.8. Elle donne accs trois autres onglets ou botes de dialogue, trois pour la vido et un pour le son. Le bouton Rglages ouvre la bote de dialogue Rglages de compression vido standard, reproduit Figure 88.9. Vous y retrouvez des paramtres usuels en compression vido (voir section Comprendre le dbit de donnes, Fiche 65): choix dun codec (Type de compression vido), stratgie pour les images-cls vido, dbit de donnes, profondeur de couleur (taille des chantillons) et qualit.
Publication
567
Figure 88.8
La bote de dialogue Rglages de la squence.
Figure 88.9
La bote de dialogue Rglages de compression vido standard.
Index
3D 248 local 276 objet 275 Arographe 89 Affecter une valeur une variable 477 Afchage des calques 137 Agrandissement, contrle 273 Aide 31 syntaxe ActionScript 3.0 500 AIR 413, 489, 558, 562 paramtres 559 Algorithme 478 de compression-dcompression (codec) 407, 412 Aliassage 312 crnelage 308 Alignement 123, 291 Aligner, panneau 123 HTML 546 par accrochage 68 Amlioration des produits Adobe 32 Amplitude 380 Analyse 41 code 475 vnements 483 Angle de perspective 276, 281 Animation calque 157 cyclique 263 dans un clip 263 de caractres 323 dcomposition hirarchique 263 explorateur 139 Flash 432 image par image 155 prfabriques 165 imbrication 263 incrmentale 167 navigation dans 139 objet cible 167 objet (d) 167 phase 155 proprit interpole 173 secondaire externe 529 tester 162 Anti-aliassage 309, 312 Anti-crnelage 312 Apparition dun lment visuel 128 Appel de fonction 481 Application multipages 557 pour le bureau 489 prototyper 36 Arborescence 217 ascendant 223 descendant 223 enfant 223 explorer 45 frre 223 nud 223 parent 223 Argument dune fonction 482 Arrter un son 392 Arrire-plan de la scne 120 Articulation contrainte 232 point de 226 proprits 232 ressort 240 souplesse 232 squelette de cinmatique inverse 217 Assistant de script, panneau 496 Assistant dimportation vido 433, 437 Attributs, modifier 97 Audio externe 529 Audio Video Interleaved (AVI) 408
A
Abstraction de donnes 485 Acclrations cinmatique inverse 231 interpolation classique 200 panneau 189 rendu (du) 540 Accrochage 68, 123 Acrobat.com 50 Action/raction 483 Actions 148, 476 gotoAndPlay(); 153 gotoAndStop(); 153 nextFrame(); 153 nextScene(); 153 panneau 150, 490, 508 play(); 148, 152 prevFrame(); 153 prevScene(); 153 stop(); 148, 150 ActionScript aide pour le code 493 compil 449 historique 489 versions 488, 538 2.0 440 3.0 440 ActiveX 541 addEventListener() 517 Adobe Media Encoder 407 Adoucir les bords du remplissage 99 ADPCM, codec son 403
570
Flash CS5
AVC-Intra 407 Avertissement du compilateur 476 Axe 66
B
Baguette magique 353 Balayage entrelac 424 progressif 424 Balise HTML 316 <embed> 541 <object> 541 Barre dfilement vido (de) 438 dition (d) 14, 147 menus 15 principale 15 progression (de) 553 Bascule 460, 467 Bibliothque 246, 450 commune 258 externe 257 intgre de sons 383 panneau 254 partage de sons 386 B-image 410 Bitmap 247 dgroupage 366 diter 345 importer 335 format 335 instanciation 344 intgrer 350 pr-chantillonnage 364 sparation 345 taille du fichier 363 variation colore 373 vectorisation 357 Bloc dinstructions 480 rduire 506
Bogue 512 Bote outils 14, 18 des actions 493 Bordure dun champ de texte 314 Boucle 149, 480 animation 160 ditration 482 vnementielle 483 infinie 480 son 389 Bouton affichage des sous-titrages 438 anim 262, 263 autorisation 261 Centrer limage 127 clip danimation en faisant office 522 cliquable 259 de validation 467 effet de survol 259 invisible 262 lecture/pause 438, 446 lecture, son 394 plein cran 438 radio 461 ractif 151 recherche 438 rembobiner 446 son 438 sonoris 262, 394 stop 394, 438 symbole 160 zone ractive 259 Branchement conditionnel 482 dans le code source 481 dans le scnario 481 Bridge 45, 554 Bruit de quantification 381 Button, composant 467 paramtres 467
bytesLoaded 552 bytesTotal 552
C
Cache bitmap 372 Cadence de lanimation 155, 437, 439 du scnario 120 Cahier des charges 41, 527 Calque 132 courant 134 dossier 141 fond (de) 157 guide 141 guid 198 guide et masque 141 interpolation classique 191 interpolation (d) 168 masque 143, 211 masqu 143, 211 proprits 137 scripts 508 scripts (de) 150 slection 134 son 391 standard 134 verrouillage 136 Caractre abstrait 301 animation 323 autoris 315 couleur 315 espacement 289 nombre maximum 315 taille 289 Carte graphique 372 Case cocher 460 CDN (Content Delivery Network) 430 Chane de caractres littrale 515
Index
571
paquetage 487 personnelle 485 Clause alternative 480 Clic par mgarde 519 Clip danimation 263, 522 dcoupe 273 Codage 475 caractres 287 smantique 166 Code 476 blanc 479 conseils 493 excutable 476 factorisation 481 fragments 500 gnration automatique 541 hirarchie 479 indentation 479 parenths correctement 479 sensibilit la casse 477 source 475 suggestions 494 Codec AAC 416 AVC/H.264 412 dacquisition 407 H.263 412 H.264 412 MP3 416 On2 VP6 446 On2 VP6-E 412 On2 VP6-S 412 son 403 Sorenson Spark 412 Cohrence temporelle 410 Collaboration en temps rel 50 Coller, commande 70 ColorPicker, composant 469 ComboBox, composant 464 paramtres 465 Commande 15 raccourci clavier 15 Commentaire de ligne et de bloc 506 Compilateur 475 Compilation 509 erreur 510, 511 Composants 247, 449 ActionScript 2.0 450 apparence 453 comportement 452 de lecture vido 437, 440 tat 453 Flex 450 FLVPlayback 437, 440 habillage 437, 451 instanciation 441 instancier 450 interface de programmation 455 liaison 452 menu, de 462 nom doccurrence 451 options, de 460 panneau 450 paramtrage 441, 445 paramtre 452 schma 452 texte, de 457 Composer un texte 329 Composition auxiliaire 123, 141 Compression avec perte 366 destructive 366 facteur 406 JPEG 539 MP3 539 sans perte 366
Chaner des blocs de texte 329 Champ impair ou suprieur 423 ordre (menu) 423 pair ou infrieur 423 Champ de texte 285 bordure 314 classique 285 dimensions 288, 294 dynamique 285, 296 diter 286 mise en cran 291 multiligne 297 position 288 pour la saisie 285, 296 statique 286 Charte fonctionnelle 527 graphique 527 CheckBox, composant 460 Chemin absolu ou relatif 504 accs (d) 244 cible 517 sous-panneau 180 Choix exclusif 461, 462, 464 multiple 462 non exclusif 460 Cible 299 vnement, dun 520 Cinmatique inverse 216 plage 227 sur les formes 235 Cisaillement 268 Classe 485 ActionScript 3.0 prdfinie 485 vnement 487 mthode 487
572
Flash CS5
Compression (suite) SWF 539 vido 407, 418 Concatnation 515 Conception fonctionnelle 41 graphique 41 structurelle 41 Condition 480 de sortie 480 ConnectNow annotation de lcran 57 compte 51 confrence tlphonique 60 dessin au tableau blanc 60 hte 51 invit 50 messagerie instantane 59 module 55 partage de 53, 57, 60 participant 50 prise de contrle distance dun ordinateur 61 prise de notes partages 60 public 50 rle 50 voix sur IP 60 webcam 61 Conseils de code 493 Console de dbogage 513 Consultation non linaire 149 Contenu de rechange 552 Contrainte de rotation 232 Contrle dune vido sans composant 445 Contrle, menu 162 Contrleur danimation 162 Conversation par messagerie instantane 59 Convertir en symbole 373
les lignes en remplissages, menu 100 par balayage 308 Copier-coller des images 135 Copier des tapes 35 Corps de police 289 Couleurs 108 ACT (table de couleurs) 110 CLR (Jeu de couleurs Flash) 110 crer 109 chantillon 110 enregistrer 110 espace de 335 opacit 109 panneaux 109 partage 110 puces 109 slecteur 469 thmes 110 TSL 109 Courbes Crayon 79 lisser 82 optimiser 83 Plume 77 points de contrle 80 redresser 82 retravailler 82 segments 82 slection 94 spline 63, 77 tracer 77 Crayon, outil 75 courbes 79 Crnage 289 Crnelage 312 CSS. VoirFeuille de styles
D
DataGrid, composant 473 Dbit binaire 405 images 155, 409, 437, 439 tlchargement, de 530 thorique descendant 531 Dbogage distance 540 Dbogueur 506, 512 Dclaration de variable 477 Dcompilateur de SWF 540 Dco, outil 90 effets 90 Dcoupage 72 par plans 146 Dlement graphisme, de 471 texte, de 458 Define Font 3 vs. 4 306 Dformer un objet 106 Dgrads 100 crer 100 transformer 107 Dgroupement 243 Dpannage distance 62 Dpendances entre points de contrle et segments 238 Dessin aide 66 fusion 243 modes 70 objets 72 prfrences 69, 79 primitives 74 tablette graphique 88 vectoriel 63 Dtourage externe 354 interne 352 vido 446
Index
573
E
change de graphismes via FXG 48 chantillonnage binaire 308 en niveaux de gris 309 frquence (son) 380 taux (son) 405 chelle dun trait 76 clairs, outil Dco 165 couteur dvnements 449, 484, 517 de survol 517 objet cible 484, 517 cran bienvenue, de 13 nature matricielle 372 diteur de mouvement, panneau 185 diteur externe 345, 355, 363 son audio 397 vido 439 dition Fireworks 342 Effacer, mode de fusion 370 Effet la vole 374 de couleur 269 Effet anim 175 couleur 193 distorsion 193 fondu dentre 193 inclinaison 193 luminosit 193 opacit 193 orientation 193 position 193 projecteur de poursuite 213 taille 193 Effet sonore balance 395 fondu 396 panoramique 396 personnalis 396 prfabriqu 395 lasticit dun segment 240 lments graphiques tiquettes 47 mots-cls 47 notes 47 rechercher 47 trier 47 visualiser 45 Empattement 301 Empilement calques 132 cellulods 132 Encodage la vole voix 416 webcam 414 Encrier, outil 97 Enregistrement incrmental 27 Enregistrer tapes sous forme de commande 35 licence 33 Enregistrer un document 26 Entrelacement 407 vido 423 Enveloppe outil 269 son 396 Environnement de travail 13 dexcution 476, 558 Erreur compilation, panneau 490 smantique 511 syntaxique 511 test 527
DF3 vs. DF4 306 Dictionnaire ActionScript 3.0, en ligne 494 intgr 319 personnel 320 Digital Video (DV) 408 Disparition dun lment visuel 128 Dissociation 243 Distortion, outil 269 Document annuler 33 danalyse et de conception 527 enregistrer 26 Documentation 31 Donnes audio 554 du photoscope 554 typage 477 vidos 554 XML 529 Donnes, dbit audio 409, 416 cibles 422 multiples 431 constant (constant bit rate, CBR) 411 maximum 422 thorique de la connexion 409 variable (variable bit rate, VBR) 411 vido 408, 409 Dreamweaver 542 DRM (Digital Rights Management) 431 DV 407 DVCPro 407 DVCPro HD 407
574
Flash CS5
Espace 3D 276 de couleurs 335 de travail 24, 490, 513 Espacement 124 Esprit mthodique 526 toile, outil 87 vnement 151 linitiative de linteracteur 483 champ actif 484 clic 152, 483 dclench par le lecteur Flash 151 de survol 151 frappe au clavier 483 image 516 implicite 151 initi par linternaute 151 interaction la souris 483 interne au systme 484 lecture audio 484 non temporel 484 saisie dans un champ 484 survol 483 tlchargement 484 Event.COMPLETE 552 Excution 475 asynchrone ou synchrone 557 commande 35 continuer 513 flux 515 linaire dune animation 488 pas pas 512, 514, 515 remonter lappelant 515 sur le Bureau 558 suspendue 512 Explorateur danimation 139, 266 Exportation GIF 563 JPEG 563 PNG 563 vido Quicktime 565 Express Install 551
Extension ConnectNow Add-in 51 Flash, 32 Manager 32
F
Factorisation 485 dinformation 246 Fentre de document 14 Feuille de styles 318 externe 318, 529 interne 318 Fichiers AS 42, 508 ASC 42 EXE 535 FLA 26, 41 grer fichiers graphiques, audio et vido 45 HTML 528 JavaScript 529 JSFL 35, 42 MXML 42 SWC 42 SWF 26, 42, 527 TXT 42 XML 42 File dattente 483 File de fichiers en attente dencodage 416 Filmage sur fond bleu ou vert 446 Filtre 374 flou vido 425 Fireworks effet exportable 377 importation 341 Flash Builder 36 Flash Catalyst 36 flux de travail 40 Flash Exchange 32, 450
Flash Lite 413, 537 Flash Media Live Encoder 432 Flash Media Rights Management Server (FMRMS) 430 Flash, onglet 537 Flash Video Streaming Service (FVSS) 431 fl.core.UIComponent 455 Flex 44 Flou 309, 366 Fluidit animation 155 lecture 530 Flux 427 continu 429, 432 des vnements 483 dexcution 480, 515 Flux de texte 329 Focus 452, 484 Fonction appel 481 argument 482 dfinition 481 intgre 482 paramtre 482 personnelle 482 valeur retourne 481 Formatage du code source 509 Formation distance 62 Formats APP 535 audio reconnu 379 F4V 414 FLV 412 GIF 366, 536 HTML 535 JPEG 366, 536 M4V 414 MOV 414 MP4 414 onglet 535 PNG 355, 366, 536
Index
575
Glyphes 289, 301 crer 324 Gomme, outil 70, 352 Graphisme articul interactif 235 dfilant 471 Grille 67, 123 Groupes 243 barre ddition 244 boutons radio 462 lments graphiques 243 images 410 imbrication 245 mode ddition 244 panneaux, de 18 Guides 68, 123 soulign 317 texte 316 Voir aussi Hyperlien Hyperlien 149 externe 298 interne 298 Hypermdia 149
Formats (suite) SWC 449 SWF 535 XMP 554 Formes 64 CI 236 cinmatique inverse 235 convertir en standard 86 dilater 99 interpolation 203 oprateurs 71 optimiser 207 Pinceau, outil 87 polygone 86 slection 95 sonde 380 standard 84 tlcharger 87 Formulaire 451 saisie 312 Forums 33 Fragments de code 500 Frquence dchantillonnage 380 Fusion dessins 70 empcher 133 FXG 36, 45, 48 FXP 36
I
Identifiant 476 AS 476 I-image 410 Illustration matricielle 64 vectorielle 64 Illustrator, donnes 112 Image Abaiss 260 bi-prdictive 410 bitmap 346, 350 Cliqu 260 copier-coller 158 courante 124 de pose 227 Dessus 260 diffrence 410 tiquette 524 externe 529 Haut 260 insertion 125 intermdiaire 127 inverser lordre 159 matricielle 345 nom 127 options daffichage 138 ordinaire 131 plage 128
H
Habillage dun composant 437 Haute frquence 366 Hritage 487 Historique 34 slectionner 34 Homothtie 268 Horloge 484 HTML attribut 316 balise 316 formatage CSS 317 gras 317 image 317 italique 317 liste puces 317 onglet 543 paragraphe 317 police de caractres 317 saut de ligne 317
G
Geek 482 Grer les fichiers 45 Gestionnaire dvnements 151, 484 Gestion numrique des droits 431 Glissire 468 volume vido 438
576
Flash CS5
Image (suite) prdictive 410 Voir aussi Image-cl Image-cl 156 de proprit 170 insrer 129 interpolation classique 191 intervalle 410 sans attache 179, 188 vide 131 vido 410 Imbrication danimations 263 Importer copier-coller 344 formats 118 lot de fichiers 343 Photoshop 336 Incliner un objet 105 Incrmentation 480 Incrustation vido 446 Indexation 556 Indice de boucle 480 Info-bulle 494 Infographie 63 vectorielle vs. matricielle 63 Inspecteur de composants, panneau 452 Inspecteur de proprits 18 Instance dune classe 485 Instanciation 485 Instancier 245 composant 441, 450 son 391 Instruction 476 conditionnelle 480 itrative 480 switch 525 Intgration multimdia 36, 123 dimensions 123, 124, 133 Interaction pixel pixel 368 Interactivit 148, 488
Interface de programmation dun composant 455 utilisateur 13, 449 Interlettrage 289 Interligne 291 Interpolation 166, 248 3D 176 cinmatique inverse 227, 231 classique 190, 191, 194, 195, 196, 197, 198, 199, 200, 213 formes (de) 203, 205, 207, 211, 235 image bitmap 374 inverser le sens 189 mouvement (de) 173, 174, 176, 180, 183, 184, 185, 188, 189, 190, 205, 211 orientations (sur les) 229 paramtres 271, 376 positions (sur les) 229 proprits (de) 174 vido (sur une) 436 Intervalle dimage-cl 410 Intitul 459 Intra-image 410 Inventaire des lments de mdias 41 Inverser le sens de linterpolation 189 Itration 480
KeyboardEvent.keyCode 525 KeyboardEvent.KEY_DOWN 524 KeyboardEvent.KEY_UP 524 Kuler 110
L
Label, composant 459 paramtres 459 Langage de scripts 488 informatique 488 machine 475 programmation oriente objet 489 Lasso, outil 353 Latence du tlchargement 533 Lecteur Flash 149, 308, 372, 528 invite au tlchargement 551 menu 544 numro de 550 version 537, 550 Lecteurs Adobe Media Player 427 composant QuickTime 427 standard de facto 427 VLC Media Player 427 Lecture flux continu 388 linaire 148 non squentielle 148 squentielle 146, 148 vido plein cran 440 Liaison, outil 238 Licence, enregistrer 33 Lien en profondeur 557 hypertexte 298, 557 Lier une vido lanimation 437 Ligne 64 de fuite 278 outil 74
J
Jeu de caractres 301 JPEG, rglage de qualit 366 JSFL, langage 17
K
KeyboardEvent KeyboardEvent.charCode 525
Index
577
Mode Alpha 371 Calque 371 couleur de base 369 crayon 79 Fireworks 370 fusion (de) 357, 368 Photoshop 370 synchronisation du son (de) 390 Modle de document 121 Modes de dessin fusion 70 objets 72 primitive 74 Modifier lment visuel 128 menu 70 Module dextension Flash Player 541 Morphing 203 Mosaque dfilante dimages 470 Mot-cl AS 476 XMP 554 Mot de passe 458 Moteur de recherche 556 de rendu en temps rel 284 Motion JPEG (M-JPEG) 407 Motion Picture Expert Group (MPEG) 408 Mot rserv AS 476 Mouse MouseMouse.hide() 521 MouseEvent MouseEvent.MOUSE_CLICK 519 MouseEvent.MOUSE_DOWN 519 MouseEvent.MOUSE_MOVE 521 MouseEvent.MOUSE_OUT 517 MouseEvent.MOUSE_OVER 517 MouseEvent.MOUSE_UP 519 MovieClip MovieClip.currentFrame 524 MovieClip.gotoAndPlay() 523 MovieClip.gotoAndStop() 518, 523 MovieClip.nextFrame() 524 MovieClip.nextScene() 524 MovieClip.play() 523 MovieClip.prevFrame() 524 MovieClip.prevScene() 524 MovieClip.stop() 518, 523 MPEG-2 407 MPEG-4 407 Multiciblage 536 Multiplexage 407 Multipublication 536 Musique 390 ambiance 389 MXML 48
Lisibilit du texte 309 Lissage 312 caractre 309 courbe 82 image bitmap 345, 365 List, composant 462 paramtres 463 Liste 462 dfilement 462 droulante 464
M
Machine relle 476 virtuelle 476 Main, outil 67, 123 Marge 292 Masquage 143 calque 136 interne 352 Masque 143, 211 binaire 143 en niveaux de gris 355 Math.random() 518 Media Encoder 416 Menu, affichage 17 Menu doptions 507 Message derreur 476 Mtadonnes 47, 554 Mtamorphose 203 de masque 211 vectorielle la vole 203 Mise jour de fichier 344 recherche 33 Mise lchelle en 9 dcoupes 273 Mise en cran 123
N
Navigateur de scripts 491 extension 541 Internet Explorer sous Windows 541 Nuanciers, panneau 108 NumericStepper, composant 466 Numro dimage 523
O
Objets 3D 278, 283 annuler 33 dformer 106
578
Flash CS5
Objets (suite) dessin 72 incliner 105 pivoter 104 proprit 485 redimmensionner 103 remodeler 106 renverser 106 rotation 2D 104 slection 93 Occurrence 243, 246 alpha 270 composant 441, 445, 454 filtre 270 inclinaison 268 luminosit 270 mode de fusion 270 modifier 267 nom 313, 486, 517 orientation 268 position 267 proprit 246, 267 symbole (de) 224, 225 taille 268 teinte 270 type de comportement 269 Opacit des couleurs 109 Oprateur daffectation 477 Oprateurs de formes dcoupe 72 explicites 73 implicites 72 poinon 71 recadrage 73 union 71 Opration, annuler 33 Optimiser une courbe 83 Option 15 active 15 exclusive 15 Ordre dans un calque 135
dempilement 133 des champs, menu 423 de tabulation 452 modifier 135 Organisation du fichier source 133 visuelle 133 Orientation du texte 292 Orthographe 476 Outils 74 Outils, panneau 15, 64, 66 barre suprieure 16 Ovale, outil 84
P
Panneaux 14 ancrage 20 barre dintitul 16 case de fermeture 20 champ valeur numrique 23 contextuel 23 dvelopper 21 dock (en) 20 empils 18 flottant 19 icne (en) 22 isol 18 juxtaposs 18 menu doptions 22 onglet (en) 18 redimensionner 22 rduire 21 zone de largage 21 Paralllisme 132 Paramtre formel 482 passage lanimation Flash 550 rel 482 typage 482
Parole, codec son 404 Partie gauche, droite 477 Passage de relais entre scnario et programme 516 Patience 526 Pavage 348 Pelure doignon 163 Permutation de fichiers 344 de symbole 157, 176, 194 Persvrance 526 Persistance rtinienne 155 Photogramme 124 P-image 410 Pinceau, outil modes 88 tracer 87 Pinceau Pulvrisateur, outil 89 paramtres 90 Pinceau symtrique 92 Pipette, outil 98 Piste 132 Pivoter un objet 104 Pixel carr 409 physique 372 rectangulaire 409 Pixel Bender 377 Plage (de) images 125, 128 interpolation 168, 191 pelure doignon 163 Plate-forme 476 play() 518 Plein cran 558 Plume, outil 75 courbes 77 PNG 343 Fireworks, importer 341, 343 importation 341 Pochoir 143
Index
579
initiale 224 intermdiaire 229 spcifier 229 Position 3D 275 Position et taille, sous-panneau 294 Posterisation 358 Pot de peinture, outil 97 Prchargeur 552 Prfrences 23 ActionScript 504 format automatique 504 Prslection de mouvement aperu 185 exporter, importer 184 panneau 183 Prsentation multimdia 148 Prvisualisation 162 Primitive ovale, outil 86 Procdure 481 Profil de publication 536 Programmation ActionScript 148, 248 bases 475 boucle ditration 482 branchement conditionnel 482 dclarative 476 vnementielle 151 imprative 476 objet 245 par objets 485 rutilisation 245 squentialit 482 Programme 485 Programmer 476 ProgressBar, composant 473 ProgressEvent.PROGRESS 553 Projection 558 Projet, panneau 41, 529 Proportions dimage vido 419 Proprit intellectuelle 554 Proprits de lanimation 119 Proprits, panneau 64, 267, 275 articulation 232 courbe 188, 189 graphique normal ou dvelopp 187 image 195 images-cls 186, 187 occurrence 195, 454 segment 223 squelette 222 typographie 287 valeurs des 188 Protection des droits dauteur 431 Protocole HTTP (HyperText Transfer Protocol) 429 RTMP (Real-Time Messaging Protocol) 430 RTSP (Real-Time Streaming Protocol) 430 Prototyper 36 PSD, importer 336 Pseudo-langage de programmation 478 Publication 26, 528 aperu 528 modle 543 paramtres 535 Puce de couleur 109, 469
Poignes de Bzier 188 directrices 77 Poinon 71 Point ajustement 80 dalignement 66, 254 dancrage 77, 93 dangle 77, 81 darrt 512 de code 301 de contrle 77, 188 de fuite 278 dentre et de sortie vido 420 de transformation 103 de vue 276, 281 dinflexion 77 directeur 77 pivot 3D 279 slection 93 unit typographique 289 Pointeur de souris, grer 521 Police de caractres 247, 288, 301 bitmap 309 corps 289 correspondance 302 de remplacement 302 empattements 307 famille 288 grer 301 incorporer 295, 454 machine (de priphrique) 295, 302, 307, 310 systme 302 vectorielle 308, 322 Polygone, outil 86 Pose calque 220 forme 237
Q
Quantification 380 QuickTime 379, 407
580
Flash CS5
RadioButton, composant 461 Rapport de taille 540 Rasterisation 308 Ralisation multimdia 36 Recadrage 73, 363 vido 419 Recherche et remplacement police de caractres 321 texte 320 Rechercher dans une vido 410 Recouvrement 133 Rectangle de slection 95 outil 84 Rcursion 482 Redimensionnement HTML 547 Redimensionner automatiquement 124 objets 103 poigne 293 vido 422 Redresser une courbe 82 Rduction de bloc dinstructions 506 R-chantillonnage vido 422 Rgles 67, 123 Rglette 520 Regroupement 243 Remodeler un objet 106 Remplissage 89 adoucir 100 attributs 64 effet Dco 90 tendre 99 forme vectorielle 350 grille 91 modifier 97 tolrance 98 vigne 91
Rendu moteur Saffron 309 qualit 544 Renverser un objet 106 Rpartition sur diffrents calques 135 Repre, origine 66 Rpter tapes 35 opration 33 Repli spectral 312 Requte une base de donnes 312 Rsolution 364 Ressort dune articulation 240 Rtablir, commande 26 Retour chariot explicite 296 implicite 296 Retrait 291 Rtro-compatibilit 488 Robot 556 Robustesse 489 Rotation 2D 104, 268 3D 269, 275 centre 279 contrainte 232, 279 libre 280 sous-panneau 181
S
Saffron 309 Saisie de texte 457 Salle de runion virtuelle 50 Saturation 270 Saut 481 Scnario 14 barre dtat 125 contenus successifs 124
contrler la lecture 523 dcouper 146 dition 230 escamotage 138 image 124 images-cls de proprit, modifier 175 imbriqus 491 indpendant du scnario parent 263 li au scnario parent 258 ligne du temps 124 naviguer dans 148 option de lecture 259 partition 132 plage dinterpolation, modifier 171 redimensionner 138 slection 172 tte de lecture 124 Scne 14 arrire-plan 120 Script 151, 485 attach une image-cl 508 image, de 150, 516 scnario, de 508 zone ddition 491 ScrollPane, composant 471 paramtres 472 Sections logiques dun scnario 146 Scurisation des accs 540 Segment courbe 82 lasticit 240 outil 219 point de transformation 220 queue 220 racine 217 rotation 227 squelette de cinmatique inverse 217 tte 220
Index
581
carte 388 commentaire 390 contexte dutilisation 400 chantillonnage 405 dition non destructive 398 effet 395 laguer 382 limination du bruit 399 en flux continu 389 vnement, de 388 fondu 399 importer 379 jouer en boucle 393 mise jour aprs dition 384 mixage automatique 401 nature 400 nettoyage 399 paramtres 401 points dentre et de sortie 397 proprits dinstance 397 pseudo-symbole 392 rapidit vs. qualit 405 r-chantillonnage 382 sous-chantillonnage 405 stro vs. mono 405 structure temporelle 392 survol, de 389 taille des chantillons 380 vitesse de transmission 405 Sortie, panneau 490 Soundbooth 379, 398 application en temps rel des effets 398 filtre 400 format natif ASND 398 rglage de niveau sonore 399 Souris, relcher au dehors 519 Sous-slection, outil 80 Squeeze 427 Squelette lintrieur dune forme 217 animation 227 branche 217 chane 217 dfini sur des occurrences de symboles 217 dition 224 fourche 217 modifier les longueurs de segments 225 naviguer 223 repositionnement 225, 227 slection 224 suppression 225 stage 520 Standard de facto 412 stop() 517 Streaming vido 430 String.fromCharCode() 525 Structure articule 216 jouer lexcution 235 Structure de contrle 480 Style dun composant 452 Suggestions de code 494 Survol 160 SWC, format 449 SWF 26 SWFAddress 557 SWFObject 2 552 Symbole 243, 246 bibliothque 245 bouton 160 clip 160, 263 convertir 250 dition en place 244, 253 graphique 258 imbrication 160 mise en cache bitmap 372
Slecteur couleur 469 CSS 318 numrique 466 Slection, outil 82, 93 avec un rectangle 95 objets 93 points dancrage 93 segments de courbes 94 Sparation 203 de texte 322 en formes vectorielles 323 Squence panneau 146 scnario 146 Serif 301 Serveur Flash Media 430 Flash Media Interactive Server 431 Flash Media Streaming Server 431 web 429 Services en ligne 50 Session de dbogage 513 Seuil de ux 533 Signature numrique 561 Signe ouvrant, fermant 479 Site web optimiser pour les moteurs de recherche 556 tout-en-Flash 557 Slider, composant 468 paramtres 468 SMIL (Synchronized Multimedia Integration Language) 431 Sommet des traits 77 Son 247 appareil 379 arrter 392 boucle, crer 399
582
Flash CS5
Symbole (suite) mode ddition 253 nom 272 permutation 272 prfabriqu paramtrable 449 proprit 255 scriptable 263 sparation 272 Synchronisation 132, 388, 484 Arrter 391 Dmarrage 390 en continu 391 vnement 390 vido 436, 439 Syntaxe point 486 vrification 509 Synthse dimage vectorielle 284 Systme de coordonnes 66 dexploitation 476
T
Tablette graphique 88 Taille dimage vido 409 target 520 Tlchargement 388, 529 latence 533 pourcentage charg 552 simuler 534 Temps de calcul 372 de compression vido 413 Test dune animation 150 Testeur de bande passante 530 Tte de lecture arrt 149 faire glisser 162 saut 152
TextArea, composant 458 paramtres 458 Texte 285 blocs chans 324, 329 choix dun type 332 classique 285 composer 329 crer et formater 285 dfilant 313 dynamique 313 exposant 290 flux 329 indice 290 lisibilit 308 mise jour la vole 312 modifier lexcution 312 multi-colonnes 329 multiligne 458 orientation 292 outil 294 pour la saisie 314 redimensionner 293, 294 retour la ligne automatique 459 slectionnable 290 TLF 324 vertical 292 Voir aussi Champ de texte TextInput, composant 457 paramtres 457 Texture de remplissage 348 this 518 TileList, composant 470 paramtres 470 TLF (Text Layout Framework) 324 Tolrance de remplissage 98 Top de dpart vido 421 Topologie 210 Tops de dpart 399 trace() 515
Tracer 357 courbes 77 droites 74 formes primitives 84 Trait attributs 64, 76 extrmit 77 modifier 97 redimmensionner 76 sommet 77 style 76 Traitement langage 378 par lot 416 Trajectoire 177 dition, transformation 177 Transfert sur un serveur 529 Transformation 102 3D 275 en image bitmap 372 libre, outil 102, 226, 269 poignes de 102 texture de remplissage 349 vido 436 Transformer, panneau 102, 267, 275 Transition progressive 355 Translation 267 3D, outil 275 contrainte 233 Transparence binaire 354 en niveaux de gris 355, 370 Travail collaboratif 50 Typage 482 de donnes 477 Type boolen 477 chane de caractres 477 de donnes 477 nombre 477
Index
583
Variation linaire ou non 186 visuelle 246 Vectoriel vs. matriciel 63 Vrification orthographique 319 Vrifier la syntaxe du code 509 Version Cue 45, 48 Vido 247 Adobe Media Player 427 assistant dimportation 433, 437 barre de dfilement 438 champ 423 chroma key 446 composant 427, 437 contrler sans composant 445 dtoure 446 dition 436, 439 lagage 419 encapsuler dans un clip danimation 434, 445 encodage du canal alpha 446 encoder 407 entrelace 424 externe 428, 437, 529 filmer sur fond bleu ou vert 446 filtre de flou 425 glissire de volume 438 incorporer au SWF 428, 433 incrustation 446 interne 428 interpolation 436 lecture plein cran 440 lie lanimation 428 points dentre et de sortie 420 progressif 424 proportions dimage 419 quantit de mouvement 414 recadrer 419 redimensionnement 422 r-chantillonnage 422 standard de facto 427 streaming 430 synchronisation 436, 439 tlchargement progressif 429 top de dpart 421 transformation 436 VLC Media Player 427 Vise 3D, paramtre 281 VOB 407 Voix-off 390
Typographie 324 avance 327 classique 324
U
UILoader, composant 473 UIScrollBar, composant 473 Unicode 287, 301 Union de formes 71 Unit, rgles 120 URL absolue 300 de courriel 300 relative 300
V
Valeurs lies 188 Validation, bouton de 467 Variable 477 affecter une valeur 477 constante 477 courante 477 dclarer 477 volution de 515 identifiant 477 initiale 477 littrale 478 type 477
W
Windows Media Video (WMV) 408
X
XFL 27
Z
Zoom, outil 66, 123
Flash CS5
Adobe
Toutes les cls pour prendre en main Flash et perfectionner vos ralisations multimdia la fois manuel dapprentissage progressif et recueil de fiches pratiques, cet ouvrage a pour ambition de vous faire accder en trois mois au niveau de savoir-faire dun professionnel de lintgration multimdia. Il vous indique comment rsoudre les problmes concrets rencontrs par les flasheurs et dgage les enjeux qui vous aideront, dans vos ralisations futures, faire, en connaissance de cause, les bons choix de conception. Vous y apprendrez ainsi non seulement comment manipuler Flash CS5 et le combiner aux autres logiciels de la Creative Suite dAdobe pour obtenir des animations riches et convaincantes, mais aussi les principes du multimdia indispensables assimiler pour dboucher sur une utilisation optimale des outils. Clair, pratique et abondamment illustr, cet ouvrage deviendra rapidement un compagnon indispensable, garder porte de main, pour vous aider surmonter les difficults rencontres dans votre quotidien dutilisateur de Flash. Fichiers dexemples et galerie sur www.pearson.fr
propos de l'auteur
Ralisateur multimdia et formateur, Gil Mathieu cumule la double comptence du praticien et du pdagogue. Il enseigne les principes du multimdia numrique en master dinformatique et forme aux logiciels avec lesquels il travaille. Ses outils de prdilection sont Director et Flash.
Le Campus
Table des matires

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. Lenvironnement de travail Dessin vectoriel Scnario, images et calques Animation Groupes, symboles et occurences Texte Images bitmap Son Vido Prfabrication Bases de programmation ActionScript 3.0 12. Publication
Niveau : Dbutant / intermdiaire Catgorie : Graphisme web Configuration : Multiplate-forme
Pearson Education France 47 bis, rue des Vinaigriers 75010 Paris Tl. : 01 72 74 90 00 Fax : 01 42 05 22 17 www.pearson.fr
ISBN : 978-2-7440-4171-6

Flash CS5

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Flash CS5

Transféré par

Droits d'auteur :

Formats disponibles

Le Campus

la mmoire de Jean-Franois, qui eut une vie de papillon.

Table des matires

Table des matires

After Effects CS5

Media Encoder CS5

INTGRATION, ANIMATION, INTERACTIVIT

Flash Media Server 3.5

Application hors ligne

Application internet (ordinateur)

Application internet (portable)

Lecteur autonome Flash Player 10.1

Navigateur + Extension Flash Player 10.1

Lecteur Flash Lite 3

qui sadresse ce livre

Les intentions de lauteur

Ces notes recensent les diffrents raccourcis clavier.

Apprhender linterface utilisateur

Ctrl+tab ou Ctrl+Maj+tab fait passer dun onglet au suivant ou au prcdent.

La catgorie Gnral des prfrences.

Les espaces de travail

CMd+W (Mac) ou Ctrl+W (Windows) ferme le document courant.

F1 ouvre laide Flash.

Grer lenchanement des tapes

CMd+F10 (Mac) ou Ctrl+F10 (Windows) ouvre le panneau Historique.

Prototyper rapidement une application pour la Toile

Organiser les fichiers dun projet consquent

Grer les fichiers provenant dautres applications

change de graphismes via FXG

Partager son cran en ligne

Initier une session de travail collaboratif

Prise de notes partages

Dessin au tableau blanc

Diffusion dun flux audio

Diffusion dun flux vido

Prise de contrle distance dun ordinateur

Apprhender lenvironnement de dessin

Spcificits du dessin vectoriel dans Flash

Positionnement des lments

Aides au dessin et la composition

Raccourci Raccourci Raccourci

Comprendre les modes de dessin

j bascule entre le mode de dessin par fusion et le mode de dessin dobjet.

Tracer des droites

Droite avec loutil Plume

Droite avec loutil Crayon

n slectionne loutil Ligne, p (pour Pen) loutil Plume et Y loutil Crayon.

Tracer des courbes

Courbe avec loutil Crayon

Retravailler la courbe au niveau des points de contrle

Retravailler la courbe au niveau des segments

Retravailler la courbe globalement

Tracer de formes primitives

O slectionne loutil Ovale, r loutil Primitive rectangle et Y loutil Crayon.

Utiliser les outils Pinceau pulvrisateur et Dco

Loutil Pinceau Pulvrisateur

b (pour Brush) bascule du Pinceau au Pinceau Pulvrisateur et rciproquement.

Faire des slections

Modifier les attributs des lignes et des formes

Modifier les attributs de remplissage

s slectionne loutil Encrier, i loutil Pipette et K loutil Pot de peinture.

La transformation des dgrads sera traite la fichesuivante.

Appliquer une transformation