Dans cette partie ...

Dans cette partie, vous allez decouvrlr les posslbllites et les limites de Flash tout en explorant, pour Ia majortre d'entre VOUS, un nouvel unlvers. Le Chapitre I presents Flash, son aspect, comment utillser ses barres d'outils et ses menus. Vous connaItrez les notions qui se cachent derriere deux elements essentiels de Flash, II savoir la scene et Ie scenario. Creez votre premiere animation pour apprecler l'emonon que genere we pareille entreprlse.

Dans Ie Chapitre2, vo us apprehenderez Ie processus de creation d'une animation Flash dans SOD ensemble. Tout part du developpement d'un concept et flnit par la publication de votre animation dans un format reconnu par les navigateurs Web. Nous expllquons comment pararnetrer les proprletes qui affectent votre animation, et comment Flash travaUle avec dllferents types de graphlques. Nous Indiquons enlln comment Imprimer votre animation Sur papier, etape essentieUe pour fonder Ie succes d'une conception Web reallsee avec Flash.

Chapitre 1

Bien Ie bonjour Monsieur Flash MX

•

• •

• •

J.)ans ce clrapitre :

Presentation de Flash,

Ce que vo us pouvez creer avec Flash MX. Quand ne pas utiliser flash MX. Decouvrir 1'6crao de Flash.

Utiliser l'alde.

Creer votre premiere animation. Quitter Flash.

Dans ce chapltre, vous decouvrlrez la philosoph!,: de Flash, son ecran et son systeme d'aide. Ensuite, gagne de febri1l~e, vous creerez une animation simple qui prandra tout son sens en lisant Ie reste de cet ouvrage.

A fa deeoueerte de Flash

Flash propose un systeme periormant pour creer des anlma.ti.ons destinees au Web. Volcl une raplde presentation des possibilttes de ce

systeme :

..... Creer une animation Flash en concevant des graphiques que vous anlrnerez sur une periode delerminee.

..... Utlliser la commande PubHer pour tncorporer 1'~lmatian da~s un lecteur de flchlers Flash. Lors de cette operatton, Flash cree le code HTML necessalre 11. toute page Web.

4 Premiere partie: flash dans son ensemble

----------------

"" Inserer du code HTML dans votre document Web pour faire reference au lecteur Flash. C'est un peu comme alouter des Images it une page Web, Ou bien, VOllS pouvez utlllser le code HTML de manlere autonome comme s'll s'aglssalt d'une nouvelle page Web.

J# TeJecharger Ie document HTML et Ie lecteur Flash sur Ie serveur q~l stocke vas pages Web. (par exemple votre fournisseur

d acces it Internet - PAl.)

"" Ouvrtr votre navlgateur pour surfer de page en page. Vous decouvrtrez alors vos fabuleuses animations egayant un site Web [usqu'alorstrss austere,

pour.~pprecler les elfets de Flash, vous avez besoin d'un lecteur sp~lflque. Aujourd'hul, Ie lecteur (ou pLayer) Flash est lnstalle sur la ~aJorltl: d~ ord.rnateurs. 11 fait partie Integrante des systernes

d esplottation ';"Indows et Mac as. De cette Iacon, l'uttllsateur qui arnve sur un sl~e Flash beneflcie lrnmedlatement, et sans s'en rendre compte, des arumatlons diaholiques concues avec celogidel de genie. Le lec,teur, module Installe dans votre navigateur, Ilt sans aucun ' probleme les ~nimatlons Flash presentes sur un site. En revanche certaines versions de Windows et Mac OS ne proposent pas ce Iecteur ~n standard. II faut alors le tel~charger sur le Site Macromedia 1I

I adresse sulvante : h t t p : !Iwww.macromedia.com!shockwave! download!index.cgi?Pl_Prod_Version-ShockwaveFlash.

Les sit~s v.:eb deviennent de plus en plus sophlstlques, En utlllsant des arumations et des etfets spectaux, vous pouvez facilernent distlngue~ votre site des autres. Cette distinction se fait dans Ie sens d,e la qua.l.i~e et non pas de la medlocrite. finis les pages perso ou les SItes artlstlques et commerciaux qui De sont que de simples vitrtnes Le Web a des restrictions. Flash les transforme en des atouts qui . dynaml.sent et relondent votre sens creatlf, Tout cela s'eflectue avec une fac.lItte deccncertanta. SI vous n'avez [amals cree d'anlmations de votre Vie, Flash 5 VOllS est tout destine. 11 suffit [uste d'y co

peu de temps. nsacrer un

Pour decouvnr les sItes Flash les plus recents, connectez-vous 1I hap.: Ilwww.macromedia.com/fr/ et cllquez sur Ie lien Galerle Jamals VOllS n'avtez vu Ie Web dans un tel etat, .

Ce que uous poutlez creer auec Flash MX

V.ous pouvez utlllser Flash MX pour creer de simples animations qui Vlendrontquelque peu egayer votre page Web. au bien, vous pouvez

_________ Chapitre 1 : Bien Ie bonjour Monsieur Flash MX 5

creer la totallte de votre page, voire un site complet Incorporant textes, images, boutons InteractUs et animations.

Ce livre vous asslste dans la creation d'un site Web simple ou complexe. L'enumeraUon suivante montre diff~rentes rnanleres de manipuler du texte, des Images et du sao avec F1ash:MX :

"" creer do texie, fixe ou anime qui prend place SIlT une page Web. VOllS pouvez arreter ]'anlmation apres quelques secondes au la repeter tant que Ie v1slteur ne quitte pas votre page.

"" Utillser les outlls de Flash pour creer vos propresimages deslinees 8 nne page Web ou en Importer. Vous pouvez agrementer une page Web avec des graphlques ou encore ajouter des Images a certaines parties de votre page Web.

Y' AnJmer des graphiques et faire appanuire et d18parBlD-e des objets grace am fonctlons de transparence. Les objets peuvent se deplacer, changer de tallle ou ptvoter. Flash perroet egalement la meramorphose - une forme change ... de forme.

"" Remplir des formes et du texte avec des degrades, dont les eeuleurs cbangent progresslvement. VOliS pouvez merne rempl1r des formes avec des Images bitmaps Irnportees dans Flash. Par exemple, vous pouvez rempl!r les lettres de votre nom avec des lleurs.

v Creer des boutons qui Indiquenlla direction a prendre tout en

cbangeant de forme et de eouleur, Vous pouvez creer des boutons qUI sublssent des modifications lorsque Ie pointeur de la souris passe dessus, Le Simple fait de cllquer peut declencher une animation.

"" AJouter des 901lS ou de III. rnuslque it votre animation. Vous pouvez controler la lecture d'un f1cbier audio. II peut etre lu une ou plus leurs fois, et pourquol pas en boucle.

"" creer des menus quI pennettent de navtguer dans votre site.

Comme vous le voyez. Flash pennet d'aller tres loin dans la conception d'un site Web. VOUS verrez que cette profondeur d'actlon ne se fait pas sans une certaine dose de plalslr et de satisfaction.

Quand ne pas utiliser Flash MX

SI Flash lIIlX est si mervel11eux, pourquol tous les createurs Web ne l'uUlIsent pas ? Pourquol tous les sItes Web ne sont-tls pas concus avec?

6

Premiere partie: Flash dans son ensemble

-------

Bien que les graphiq tori I

tell!i I . ues vee one. s et les animations Flash

c largen! rapfdement cel t se

entiil!rement et unlquem~nt r:~e~l e molns raplde qu'une page Web

res, Lorsque I'objectif avoue de ~o~r de ,tates ou d'images rudlmentaltlon comma Ie ferait un Journal impr~~~teffsthde,d@v~er une informa~ Au contratre, sa mise en reuvre I . , as n est d aucune uliJJte,

a sav,olr informer sans autre fo,;.~~ue de penaliser Ie, but de votre site, de Iaire danser les textes dans tous I:SP;~~~, Vous n avez pas besoln

Vous pouvez creer certains effets hl

bitmaps. Ceia est plus taplde a rearap diques en utlJ!sant des Images retouche d'images comme Photosh iser ans un p~ogramme de

phies. Flash ne permet pas de Ies o~.ld~T pour In~Jure des photogragramme d'Mitlon graphique P cr e~. audra utlliser un pro-

des vecteurs, c'est-a-dire UD ~n~~~'b~ol ? Parce que Flash ne gere que

cap abies de gen{irer des graphl ~ de formules mathematlques

rnleux comprendre Ia diffe ques s mples, Lisez Ie Chapltre 2 pour

riette. renee entre Image bitmap et Image Veela-

Pour des animations rudlmental:res .

ou un eftet de bannli~re, utlllsez des' c~mme des pomts qui dignotent lances partlculJeres les anImations ~ matlons GIF. Dans ces clrcons-

animatIons Flash Par eons sont plus petites que les

depuls le Web. V~us pou~~~::; ~~~s S; chargent plus rapldement ~e montage dedie sort A la video (co s ammations erf avec un logiciel tions GlF comme Clf' Animator 0 C,mmf M e ~remlere), salt aux anima-

u. Ovte Gear.

Flash propose une technl ue ul

animatrons 3D elementalr~s P~ Pdermet de creer des Images au

vous vo us en remettrez a d~ a urll es animations plus sophistiqueeS, Max. Reportez-vous au Cha it pp cations com me Poser ou 3D Studlo tridimensionnelles de flashP re 4 pour connailre ies possibiHtes

Prendre un bon depart

Comme Ie veut Ie proverbe . URi

point." L~ moyen Ie plus raPide ~~ ~~~~ ~e courir, II faut partir a

placer un raccourci de son ex - . Flash MX en actton est de

cUquez Sur l'leone, et c'est par~~~table sur votre Bureau. Double-

Demarrer Flash sur un PC

Que vous ayez Installe Flash depuls SOn CD-

telechargement sur Ie site d M ROM au depurs un

e acromedla, vous ne diSposez pas d'un

_________ Chapitre 1 : Bien Ie boniour Monsieur Flash MX

7

raccourcl d'executlon de ce programme sur votre Bureau, Pour en creer un, acttonnez Demarrer/Programmes/Macromedta/Macromerlla Plash MX, Cltquez sur Macrornedia Flash MX avec Ie bouton droit de 1a souris, Dans Ie menu contextuel chclsissez la commande Creer un raccourcl, Le nouveau raccourcl apparalt dans Ie menu. Faites glisser ce raccouret [usqu'a votre Bureau.

Pour renornmer !e raccourcl, cllquez dessus, puis cllquez sur Ie texte sous !'lcone, Le point d'lnsertion y clignote. Salslssez Flash MX (ou ce que vous voulez) et appuyez sur 121 touche Entree de votre clavier. Le raccourcl porte Ie nom de votre programme prefere. U sufflt de double-cllquer dessus pour auvrlr Flash,

Creer une nOUflefte animation

Les flchiers crees avec Flash sont cornmunement appeles des animations. Lorsque vous demarrez Flash, va us files pret A creer une nouvelle animation. Vetre premier travail constste genl!iralement a creer au a importer des graphlques, Tout cela est expltque au Chapltre 3.

Ouelr;r une animation esistante

51 VOllS destrez travatller sur une animation deja creee, appuyez sur Ctrl-O (WIndows) ou 31:+0 (Mac) ou cholsissez FlchlerJOuvrir. Dans la boite de dialogue qui apparait, locallsez le lichier et double-c.liquez dessus, La premiere image (trame) de )'animation apparait a I'ecran,

~llC Vous pouvez des lars commencer vas modifications,

Les utlllsateurs Windows peuvent cllquer sur I'lcone Ouvrlr de la barre d'outils Prlnclpale de Flash. SI celle-cl n'est pas aifichee, chotstssez FenetrefBarres d'outllsjPrlncipale.

Jeter un coup d'wil

L'ecran de Flash est radlcalement different de celul que proposent generaiement les autres programmes, Pour cette raison, Je vous dernande de regarder attentlvement l'lnterface de votre nouveau logtciel, La Figure 1.1 mantre un des aspects possibles de l'lnterface de Flash.

SI votre eCTan s'ouvre avec de petites Ienetres rernplies d'cnglets, acttonnez Fenetre/Fermer tous les panneaux pour les fenner. Nous en expllquerons Ie ionctionnement tout au long de cet ouvrage,

8

Premiere partie: Flash dans son ensemble

-------

Line des calques Bolte ~ outils

dedessin

Controleur de zoom Menus Sc~nario (ligne temporelle)

Figure 1.1: l'irJtertace de Flash.

Scene

les outils des barres J'(}utils

La version Mac de Flash ne contient u d

que la version Windows en q e eux barres d'outils tandls

Fenetre/Barres d'outlls I] s,:~~~ose quatre, Trois sonr dlsponibles via permettent d'affkher o~ de mas e commandes dites a "bascule" qui est mls A votre disposition: quer les barres d'outlls. Vote: ce qul

,., La barre d'ounls Prlncipale On ne I

Elle correspond a ce ue le~ p' a trouve que sous Windows.

barre d'outifs standad Par det;l~te;1 onhtl'ha,bltude d'appeler la ut, as ne I aifjche pas.

,., La barre d'outIJs Etat (unlquement so W.

breve description des ounls us rndows) aiflche une

d'outUs. Elle indlque egalem::.~e ,vIOUS seJectlonnez dans la barre rouiJJees. ou sl Ie pave nume f s es majuscules sont ver-

comme son nom )'. r que est actIC. Cette barre d'etat

de Flash. Elle n'est;~!cz:~~~~r~:~:f~~~~Jve des dlfMrents etats

_________ Cbapitre 1 : Bien Ie bonjour Monsieur Flash MX

9

".. Le ContrOleur vous pennet de Ure les animations. Pour plus d'inforrnations reportez-vous au Chapitre 9.

¥ La bette a outUs contlent taus les outlls necessalres au dessin et a la modification des objets. Elle porte Ie nom de "Outlls", En bas de cette boi1:e a outlls se trouvent Ies Options qul modifient Ie fonctionnement Initial des outlls. (Voir les Chapltres 3 et 4 pour une description complete des toncnons de la bone a ounls.)

Empl(}; des pttnneauJr

Les panneaux donnent acces awe nombreux parametres de Flash. Vous y accederez par Ie menu Fenetre. Les divers panneaux sent etudies en detail au cours du livre. Dans cette section. nous expllquons comment les manlpuler,

Les panneaux de Flash MX presentent plusleurs ameliorations. La plupart sont ancrables, c'est-a-dtre qu'ils peuvent etre colles sur un cote ou en bas de la fenetre de Flash sans recouvrir votre travail. Pour ancrer un panneau, faites-Ie gllsser sur la droite ou vers Ie bas de I'ecran. Pour supprlmer l'ancrage d'un panneau, deplacez-le en chquant-gllssant Ie bord gauche de sa barre de titre. Pour ouvrir ou fermer un panneau, vous pouvez aussl agir via Ie panneau Fenetre. Vous pouvez egalement fermer un panneau en cllquant sur son bouton de fermeture.

Vous pouvez rnalntenant empller des panneaux exaetement comme des boites. U suffit de cUquer-gllsser un panneau au-dessous ou audessus d'un autre panneau. 11 est aussl possible de redufre au developper un panneau, en utllisant la Ileche sur Ie c6te gauche de la barre de titre du panneau,

L'lnspecteur Pruprtetes a egalement change. 11 est rnalntenant contextuel, ce qui veut dIre que son contenu change selon ce que vous faltes. Si vous travalliez dans Ie scenario, l'lnspecteur Proprtetes lournlt des parametres relaUfs au scenario. 51 vous travalllez avec un objet, vous pouvez employer l'lnspecteur Proprietes pour modifier cet objet.

Pour une personnafisatlon plus poussee, vous pouvez enregistrer les dispositions de panneaux qui vous plaisent. Une fois les panne.aux agences, aetlonnez Fenetre/Enregistrer la dtsposltion des panneaux. Dans la fenetre de dJalogue Enreglstrer la disposition des panneaux. attrlbuez un nom ~ cet agencement et cllquez sur OK. Pour restaurer cette disposition 11 tout moment, actionnez Fenetre/Jeux de panneaux et cholslssez cet agencernent.

10

Premiere partie: Flash dans son ensemble

--------

A. fa decourJerte des menus de Flash

La plupart des fonctlons de des . .

a oetlls. De nombreuses actlor sm ne sont dtsponlbles que par la boTte

Ie scenario. En revanche tout: reuvent egalement etre reaJisees dans dent de menus. Pour rnleux vous es autres fonctlons de flash depen-

menus dans Ie Tableau 1.1. y retrouver nous avons regroepe les

Menu

Tableau 1.1 : Les menus de Flash.

fonction

Fichiar

Edition

Affichage

Insertion

Modification

Texte Contrale

Feniitre

Pe~et d'ouvrir et de fermer des fichier . d" . .

e~ d exporter des flchiers; d'imprimer : ~~ eb;;eg~strer ~es ~Ichlers ; d'importer

d envoyer une animation par e-mail (.II. d pu er, 9S animations sur Ie Web;

In ows unlquement) ; et de quitter Aasn

Propose des commandes pour annuler ~. .

culler des ill~men1s vars ou depuis la P:U r pete~ des actions; ccuner, copier et

seJactionner at deselectionnar des b.esse-pap srs: aNacar, dupliquer,

des symboles (voir Ie Chapitre 7 pouor t~~~ ; cop.ler et toller des images, modifier pnifl!rences; at creer des raccourcis c I ~avOir sur 85 symboles) ; d9finlr des

. aVler pour vos commandos.

Permetde mieux voir ce que vous faites •

ou masque certaines artJes d" . grace au zoom a~ant at arrl~re ; affiche

disposition de vas 9Ie~ents. e ~criln, et effiche une gnlle pour faciliter la

Permet d'inserer ou de cnier de b I' .

~hapitrl! 7 expllque cs tour de p:sie~p:s~s r pa~lr d'objets p~esants it "ecran (Ie

!Images du scenario) at des ima e ' e, msersr at suppnrnsr des tremes

~avojr plu~l ; inserer des caJq ue~ I:r~~::~ ~~Pc~~e~::~j. au Ch~pjtr8 9 pour en

m.lerpoJalllJnS de mouvement ivoir Ie Chspitre 9l.P , et creer des

Aide II modifier las symb I I

anima~on. Propose des :~~~:: ~:~s~~' las ~equ~n~es, ou la totalite d'une

diSSOCiation et de separation. rmanon, d ahgnement, de groupage, de

Perm at de manra en forme Ie texts.

Propose une sOria d'options qui c 61 I

animations at les sequences . act~r;:rCB~t~~ a lectur~1 de~ anima:ions ; teste les sons. ,InS oontru as mterectlfs ; at gere Jas

Parmet d'acceder a de nombreuses chose .

parneaux qui permanent de contriller I Sl/ cO~PrJ~ ~ne nouvelle lenatre ; des

Chapitro 2) ; des fllnetres our r' as 0 Jets; ~ blbhot~eQue !voir Ie

Chapitre 10); at l'EXplo(at~ur /a e.er ~~s controle~ !nteractrfs (Bxpliqu~ au

animation. nma IOns qUI feedlte Is gestion de votfe

____ Cbapitre 1 : Bien Ie bonjour Monsieur Flash MX

11

De nombreuses cornmandes proposent des raccourcis clavier. Une fonction de Flash permet de creer des raccourcls personnalls~.

SI vous utilisez la version Windows de Flash 5, vous pouvez afficher la barre d'outils Standard via Fenetre/Barres d'outllstprln Ipale. Elle contlen! de nombreuses Icones qui se substltuent aux commandes des

menus Plchier, Edition et Modification.

Les raccourcls sont afllch~ dans les menus a cote du nom de la commande.

(@UCDanSle.COinlnferleurgaUChedela!ene.tredePlaSh' vous trouverez une liste contenant des lacteurs de zoom (ou d'agrand\ssement et de reduction). Les valeurs et les optlons proposees par detaut ne sont pas exhaustives. Cllquez sur la valeur affjchee pour la s~ectlonner, puis saislssez Ie pouTcentage requis pour travalller dans de bonnes conditlons. Par exemple, 51 vous avez besom de voir votre. scene a

85 %, salslssez 85, puis appuyez sur Entree.

Mettre en scene f/os animations

La grande zone blanche sttuee au centre de I'ecran se nomme ta scene. Envisagez-Ia comme un ecran de projection oil vous dlsposez vos objets. Chaque ecran est appele une trame (au image), exaete.ment comme les trames tormant une sequence video. Les animations existent grace a une succession de trames lues a une certalne vitesse (comme les images imprimees sur une peUlcule dnematographique). Flash est done capable de lire les animations dlrectement sur la scene.

Af/ec te temps v« tout slen o«

Mais non \ Ne pleurez pas! Je ne vals pas chanter cette chanson dramatlque d'un certain Leo Ferre. Le temps a beaucoUp d'importance dans Flash. C'est Ie scenario qui gere cette donnee prlmord\ale. On l'appeLle auss! la Iigne temporeLle (terme qui me parmI: d'ailleurs bien

rnieux adapte).

La fenetre Scenario dlvise votre animation en trames- Chaque traroe represente une minuscule duree, telle que 1/12' de seconde. Creer une antmatton n'est rten d'autre qu'assembler des trames qui seront lues rapidement dans un ordre donne. Cette lecture donne alors 1'lIIusion

d'un mouvement, camme au ctnerna.

12

Prem" .'

rera partie; Flash dans son ensemble

-------

figure 1.2:

La sc~nario (ou ligns temporellel est la cle d'une gestion cohlirente de votte animation.

Le Chapitre 9 expUque en detail!

vous arracher les cheveux Po a ! mIse en oeuvre du scenario sans

d f . ur e moment ne r t

e son oncnonnernent. La FI ure 1 2 . e .enez que les bases

du scenario. g. montre une Illustration possible

A gauche du scenario, vous trouvez la I

VOUS OUVTez une nouvelle anlm tt pa ette des calques. Lorsque

logiquement appele Calque I U~ o~' un seul calque est present. IJ est transparent utilise pour les d~ I c q~e lonctlonne comrne un Iilm dessln se superpose aux autres Se~s am~es traditlonnels. Chaque

atteinte. Le prlnclpe est Ie _ leut etre rnodlfle sans leur porter

pouvez placer des objets qul s'anl ans Flash. Sur chaque calque, vous supprtmes sans a1terer les aut ~~ront, se modiJleront ou seront votre animation repose sur ce~!:S de:m~nts. Toute I'organlsation de souhaltez qu'un texte reste prese t ca ques, Par exemple, 51 vous pendant que des points rebondl n sur toute la duree de I'anlrnatlon

cal. ssent sur la seen

que speclftque aux points pour le . e, vous attrlbuerez un

autres objets (en l'occurrence Ie t s anlmer Independamment des

permet d'en ajourer autant exte). Cette palette des calques

calques avec grande preciS~~e VOllS voulez. Le Chapltre 6 tralte des

.... ~\lC V .

ous pouvez deplscer la petite barre

pour lalsser davantage de place fJ l'a1f~~ se trouve en bas du scenario

que Ie polnteur de 18 souris se tr . c age des calques crees, Des

barre, U prend la forme d'une do~~~e f~eo~onne position sur cette

bas. Malntenez Ie bouton de la . I . e polntant vers Ie haut et Ie dans la direction de redlmen I sour s enfonce, et faltes gllsser la barre

calques, vous la Ierez gUsser sv~~sn~~:~~ soubalte. Pour volr plus de

A drolte du Calq ue l, vnus YO ez un

Chacun represente une Imagi(ou tr:!TaJ)nde quantite de rectangles.

nouvelle animation ces tram e . Lorsque vous dernarrez une

de' . es sont vldes Par def

ure 1/12 de seconde, Chaque cal. dlst aut, chaque trame

que lspose de sa propre rangee de

_------- ChapitrEl 1 : Bien le bonjour Monsieur Flash MX

13

trame5 car vous pouvez avoir dUferentes animations ou oblets sur chaque calque.

Une image.de est une trame qui deflnit des changements dans votre animation. Dans certaines animations, chaque trames est une imagecleo Dans d'autres, seules la premiere et la derniet"e trame5 sont des Images-des. Vous comprendre.z cette subtUIte un peu plus tard.

N'utllisez pas le scenariO tant que vous n'etes pas pret a ani mer. Malgre cela, utllisezles calques pour repartlr vos objets sur des calques separes. Ne vous lnquietez pas 1 U est toujoW's possible de

deplacer un oblet d'un calque a. un autre.

Trouller de ('aide dans F(ash

Cet ouvrage regroupe toutes les InformatiOns necessaires pour creer de superbes animations. Cependant, st vous n'avez pas entre les mains la bible de Flash, mette? en reUVTe Ie systeme d'aide de Flash, des qu'une Information VOllS fall delaut. Le manuel d'utHlsatlon de flash est identique a I'aide en IIgne. Je rappe1le que l'aide en IIgne est un systeme d'aide qul se trouve non pas sur Ie Net mals avec le programme lui-me-me. pour Justifier cette appellation, les systemes d'aide

se presentellt de plus en plus sous la lorme de IIchiers HTML qui s'ouvrent dans votre navlgateur Web.

PoW' utiliser l'alde de Flash, cholslssez Aide/Utilisation de flash ou appuyez sur la touche Fl (Windows unlquement), Vous voyez alors

appara'itre !'ocran repTl!sente sur la Figure 1.3.

Trois sections d'aiae

Flash propose trois s~tlons d·aide. Utilisation de Flash est Ie manuel d'aide prlnclpal. llne deuxleme section concerne ActionScript, langage de programmatlon que vous utilisez pour creer des anlmatlons InteractiVe5 complexes. Une T~erence complete d'ActlonScrlpt est accessible sous forme de lenetre via I'ecran principal de Flash (pour en savoir plus, voir Ie Chapltre 10). Enlln, Flash propose des didacticiels. Dans cette section, nous allons nous concentrer sur Ie manuel

Utilisation de Flash.

Sommairel 'nde~ et Rechercher

L'ecran d'aide princlpal de flash propose trois onglets sltues dans la parUe gauche. Cliquez SUT l'onglet suscepUble de vous donner

14

Premiere rt' AI

pa Ie: . ash dans son ensomble

-------

1!1I!I"i!li"".I"I'1JI'f'."".1: Fl.1.h l'flIi".il '-lIilH "'atb ::::,dt.".b!1I .mi'll Q. DtI'IlIllj

li1lfll-oll:tltllll 111'111 ca'IIII11'11rw

~~j!t::;~':;~~::tliiA' .t

AI.UJ;tI ••• ~ .. UtIlI.IIIUM .. ·.bjillb '''''.!Dhj,,~ ••

ttull •• IJ!I1l!1l111l11tallrtil ",r.llt •• iflJfll1l111 ")'JI'L:bItl~"1

:1:Jj!~~~J~"'IIl u ..... ~J. III'.

r. ...... tJ'\1IP.i 1I·"'~Im.na" .:::~~:~ .. _.\. U"'lJtI .11'111£

h l.rJ9.v. "~.fl!li~fllil

macromedla

FLASH

!VI=-<

figure 1.3; l'l§cran principal de I'aide en ligna de Flash.

rapldement une reponse a I'lmerro .

heures. Voicl des precisions g~~on qui vous assaille depuis des

POUT utI tser ces onglets a bon esclent .

yI Sommaire; Cliquea sur un s . . .

probleme qui se pose a YOUSUJ~~. qui se rapproche Ie plus du affichees et Iisez Ie texte j' Jqu:z Sur une des rubriques

qu apparaJt dans Ie panneau de drolte.

Y' Index: Cliquez sur une des lettr d '

une Ilste de mots. Cllquez lese I alphabet pow: aCCeder a

bleme. sur e tenne traltant de vorre pro-

..., Recbercher: AIfiche une boTte d

Saisissez Ie OU les mots sur I e Idlalogue du meme nom.

en les separant du slgne " " ~~u~ doit porter votre recherche pour une recherche plus s:~ ~c~ e: la case SenSible a Ia casse dans 18 vaste zone vide occu p e .. ne Iste?e rubriques apparail:

de dialogue DOuble-elf pant la partie mlerleure de la boite

.," . quez SUr cells qui vo I ..

<UlIcher Ie eontenu dans Ie . us ntcresse pow: en

panneau drOit de la fenetre d'aJde.

Utiliser Ie JiJacticiel

~ash propose un ensemble de le .

bien demarrer avec ce ncuveau l~~~ ~t Jun dldacticlel qUi vous aide a sulvra les le~ons de Flash en h . Ie. e vous recommande de sulm aloes de suivre Ies Instr~ ~IS ssanr ~de/Le~ons/lhtroduction. U

c Ions Qui s afflchent a I'ecran.

_-------- Chapitre 1 : Bien Ie bonjour Monsieur Flash MX

75

Une lois les le~ons termtnees, essayez le didacticJel. 51 vous possedez Ie manuel HVTe avec Flash, vous trouverez ce dtdacttctel au Chapltre 1. Sinon, cholstssez Alde/UtlHsation de Flash, Dans Ie panneau gauche, veillez a ce que Ie contenu de I'onglet Sommaire soit alfiche. Ensutte, cllquez sur Dtdactlclel, Pour plus de sou pI esse, imprlmez les pages, ce qui YOUS eyltera d'utiliser Ies boutons Suivante et Precedente de votre navlgateur (demarche toUJOU1S fastidleuse).

Trou"er une aide supplementaire sur te Web

Macromedia met a votre dlsposltlon un support sur son site Web. Pour y aeceder, cholstssez Aide/Centre de support Flash. Le site Web de Macromedla consacre a Flash est rempll de ressources utlles . Cliquez sur la langue correspondant a votre pays d'utillsation pour mleux com prendre les informations dlstillees. AIin d'apprecler l'etendue des posslbllltes de Flash, je vous Invite a cllquer sur Ie lien Galerte. Vos yeux n'en crolront pas vos orellles !

Cholslssez FenetrejReponses pour acceder A de nouvelles ressources Flash de Macromedia.

L 'essauer; c lest l'adopter !

Je vous sens impatient de passer a l'actlon, Commencer un projet est chose facile. Rassernblez des idees, proietez-les en ceuvre d'art, ajoutez des animations, enregistrez votre animation Flash et publlezla. Afilchez-la ensutte dans un navigateur, que YOUS soyez ou non connecte a l'lnternet. Vaus abordez les sections les plus gratiliantes de ce chapitre, car flash vous montre les bases de sa philosoph Ie d'anlrnation.

Creer votre premiere animation

Supposons que vous souhaltlez ajouter un logo arume a votre page d'accuetl, VOllS voulez que I'anlmation tourne pendant le chargernent de la page, puis qu'elle s'arrete, La Figure 1.4 montre Ie logo de III societe Rainbow Resources - non anime en l'etat - et auquel YOUS pouvez substltuer n'lmporte quel graphique de votre cholx. Pour une meilleure comprehension, utlllsez les memes textes que ceux de mon exemple, L'ldeal est de recreer exacternent ce qui est represents sur la Figure 1.4, et de vous conformer aux etapes ci-dessous.

76

Premiere partie: Flash dans son ensemble

----------------

Figure 1,4;

La logo d'una societe qui peutsubir de multiples animations,

~tOI': ~~~ez que ledffiot I!ainbow arrive SUT votre page deputs la drone. e~ources epurs la gauche. Au meme moment vous voulez que Ie grapllique. effectue une rotation de ]80·. Llsez les sections sufvanres pour reallser cel eflet basique des plus Interessants.

Dessiner dans Flash

~~llsez Flash.pour creer Ie logo, Bien souvent vous importerez des ment~.au heu de les creer directement dans Plash. Le Cha ltre 3

analyse I Importation et la manipulation des [mages p

~v£ZP~ .•

!~' ~IVO~, commettez des eTfCUIS pendant cette procedure, utlltsez I~tm ' la!ement Ctri+~ ou £dltion/Annuler, Ensuite, recommence2 a~e ou V?u~ avez echoue. En cas d'erreurs multiples rep' etez

plus leurs fOIS I annulation. '

Pour votre preml~re animation Flash, sulvez les etapes cl-dessous ;

1. Demarrez flash.

Voir les instructions de la section "Demarrer Flash" preced _ ment dans ce chapltre. em

2. Cboisinez F1chler/lmporter.

La boRe de dIalogue Importer apparait.

3. P8l'Cou:rez Ie eentenn de vo Jecteurs pour Y lrouver Ie lago caD~U avec vos dolgts agUea. Appelons-Ie monlogo. sif.

4. CUquez sur Ie flchJer monlogo git pour Ie selectJonner

CUquez eIl8ulte sur Ouvrir. .

Vous voyez Ie logo It l'ecTan. [I va lallolr Ie sclnder en pJusieurs partJes pour en 'alre un graphique vectorlel facile a antmer.

5. ~t;::istssez ModHicaUonrrracerbltmap. Dansla boite de

ogue Tracer bitmap, reglez Seull de couJeur sur 100, Zone

_-------- Chapitre 1 : Bien Ie bonjour Monsieur Flash MX

mlnlmum. sur 1, Aspect des courbes sw' Pixel et Seull d'angle sur Angles nombrenx. Puts, dlquez sur OK pour fenner la feneb'e de dialogue.

Flash cree un graphique vectoriel et dtvtse Ie graphique Initial en une serle de cornposants indivlduels. "A cet instant de votre animation, I'ensemble du graphlque est selecttonne.

6. Cllque2. en denol'll du graphlque pour Ie deseleetlonner.

7. Supprimez Ie carre Invisible qui encadre Ie grapblque. n soffit de cUquer dessus sans cllquer sur Ie logo.

Vous voyez malntenant Ie carre selecttonne.

8. Appuyez sur Ia louche Snppr de votre clavier.

Le carre dlsparrul, lalssant le logo Intact.

Ca y est I Vous avez votre logo r Son animation ne va plus tarder.

Transformer uos objets en slJ.mbo(es

Dans Ie togo que vous venez d'importer, chaque lettre est devenue un objet Independent des autres. Cela peut preter a confusion. Chaque Iigne du logo est elle-meme separee des autres. Pourtant, vous deslrez que les mots et Ie logo restent groupes, Pour que les lettres torment un mot groupe, et Ie logo un dessin tout aussi groupe. contormez-vous aux etapes sulvantes :

1. CUquez sur Ie contrOle de zeom aline dans Ie coin lnferleur gauche de la fenetre principale de flash. Cboisissez 200 %.

SI ce poureentage ne convient pas, essayez 400 %. Augmenter Ie lacteur de zoom vous aide a selecnonner les lettres de chaque mot. Utlllsez La barre de defilement pour allicher la totailte du logo et des lettres.

2. CUquez sur I'outil Fleche de 18 bOlte 8 outlls s'll n'est pas deJi'!. selectianne.

3. Qiquez sur Ie coin su.perieur droit dn mot t traeez une marque de s61ectlon qui englobe 18 totaUte du mot "Rainbow".

Cette technique permet de selectlonner urnquement ce terme,

4. Cholsissez InsertionjCoDvertir en symbole. Dans 18 fenetre de dialogue Convertir en symbole. cllquez sur OK.

18

Premiere partie: Flash dans son ensemble

---~---

Flash trace un rectangle de select"

que les lettres IndlviduaUsees n ;00 auteur du mot. Vous voyea

unIque mot. e orment plus qu'un seul et

5. Repetez eette operation avec UD autre r

"Resources'. ertnc, par exemple

Cette fols, traeez Ie rectangle de selectio

~:.u_~e ; une Iots toutes les lettres selecti::l:r~~t Id~ In

, .. ...:.lLIon/Con vertlr en symboJe '. . 0 sissez

nant, routes les lettres du mot R ' pUIS ckquez SUr OK. Mainte-

seul objet. esources ne forment plus qu'un

6. Cllquez sur In Uste de ZOom I ch

totaIlte du Jogo. e 01 issez 100 % pour voir In

7. Cliquez sur Ie oin superieur h

rectangle qui I'englobe en tot!:~e~ e du logo et tracez un

8. Maintenez In touche Maj enfoDcee e .

pour les enJever de Ia selection Se~ ~quez sur chaque lUot

A. . e logo retlte ~ectloDDe.

9. ppuyez sur F8 (e'es! Ie raccourci clavi

symbole) et cliquez sur OK. er pour creer un

Flash cree un gro

upe avec les IJgnes eonstituant Ie I

V r ogo.

oyez e Chapitre 7 pour en apprendre davantage sur les syrnb I

o es.

Placer (los graphii{ues sur des ca(i{ues

Placer les differents compos ants de v • .

est sans doute la meiUeuI'e id~e . otre animation sur des calques calques vont permettre d'or ani qUJ putsse vous venlr a ('esprit. Les !'Identfle de chaqua eMment8 L ~~ v~tre animation en conservanl des calques. . e apitre 6 raconte Ia belle hlstoire

Pour repartlr vos elements sur trois cal .

aux etapes sulvantes : ques separes, con(ormez-vous

1. Cliquez sur I'outll selection dana Ia boite A ill

ou 8.

2. 01que.z-glissez en diagonaJ

logo (graphlame et tezte co~:~';). seJectionner la totaLite du

Vous devez voir deux reetan I d

Les trois objets du logo sont ~:l:c~ons u~ rectangle plus grand.

I1n=.

3. Chollssez MOdlIieatJon/R.epartlr I

sur es CWCIUe8.

_-------- Chapitre 1 : Bien Ie bonjour Monsieur Flash MX

19

Vous avez matntenant trots nouveaux calques, rtomrnes Symbole I a Symbole 3. Les trois objets du logo ant ete repartts sur les calques Symbole 1 a 3 et sup primes de Calque 1.

4. Ctiquez en dehors de 10 scene pour deseiectioDner les objets.

Les elements de votre composition sont desormais repartis sur des calques dlstlncts. La procedure d'ammatlon devient alors un veritable jell d'enlant.

Faire houlJer les lJraphit(ues

L'objectil est de Ialre eotrer Ie mot Rainbow par la drolte et Ie mot Resources par la gauche, tout en velllant it ee que le logo effectue une rotatlon de 180·. Vous allez maintenant apprendre it animer les (\h~meDts.

Vole! comment proceder :

1. Dans Ie calque Symbole 1, cltquez sur Ia trame 30. Cbolslssez alo)'8 insertion/lmage-c.le.

Le Chapitre 9 tratte des Images-des en prolondeur.

2. Dans Ie calque Symbole 2, clrquez sur la trame 30 et cholsissez Insertl.on/lmage.cle.

3. Dans Ie calque Symbole3, cliquez sur 18 trame 30 et appuyez SUT F6 (raccourd pour tnserer une lmage .. c1€).

4. Choisissez FlchlerfEnregistrer. Cholsissez un emplacement sur votre dlsque dur pour stocker Ie nouveau Dehler Rash.

II n'est pas [udlcieux d'enregistrer le tlchler dans le dossIer Flash, Vous aurez du mal a Ie retrouver parmi vos f1chlers programmes.

5. Donnez un nom a votre animatloD, comme animation de l' annee et cUquez ur Enregistrer.

Flash cree un flch!er nornrne animation de I' anne e , f La.

Revenons en arrtere pour creer Ie debut de l'anltnatlon, Flash remptira les trames vldes it notre demande. Vole! comment creer le debut de l'animatton.

1. Si Ie panneau Proprletes n'est pas ouvert, cholsissez Fenetre/ Proprteles.

20 PremiiH9 partie: Flash dans son ensemble --_

2. seJectionnez Ie mot Rainbow. Cllque.z sur la premlere Imag dn calque m1s en valeur.

3. Maintenez enfonc~ la touebe Maj et faltes IIlisser Ie mot vers la droite, jusqu'a ce qu'iI repose sur la partie grise (c'est-A-dire bon de la scene).

Sl vous ne voyez pas bien la partie droite de ceUe zone grise, uUllsez la barre de. defilement hortzontale de Ia lenctre de Flash pour l'afflcher.

4. Cllquez dans Ie calque du mot Rainbow, n'tmporte ou entre la preml~re et Is trenneme image.

5. Dans la llste d~rouJante interpolation du panneau Propnetes cholslssez Mouvement.

Vous voyez malntenant une longue neche sur fond bleu clalr dans Ie scenario. entre la premiere et la trentleme image.

6. Re~tez les etape8 2 a 4 pour Ie mot Resources. Pour Ie deplacement du mol Resources, maintenez enfoncee la touche MajWICule et.faltes.glisser Ie mot vel'S Ia gauebe, en deb,ors de la scene,

7. setectJoonez Ie logo et cllquez sur la premiere lmage du scenario dans la ligne mise en valeur.

8. Cboisl.ssez Modificationtrnmsformer/Falre plvoter de 90· a droile, pour pivoter Ie grapblsme de 90 degres dans Ie Bens horaJre.

9. Repetez Ia commande Modification(Transformer/Faire pi voter de 90° a drolte, pour obtenir une rotation totale de 180 degres.

10. Clique'l. sur Je calque miB en valeur (eelul du grapbJsme du logo), n'lmporte ou entre la prerniere et Ia trentleme Im.age, et choiBlssez Mouvement dans la Ilste deroul.ante Interpolation du panneau PropriHes.

II. SI olkessaJre, agi z sur la barre de defilement horlzontale pour ramener Ia scene au centre de l'ecran.

12. Cllquez sur III premiere Image de n'importe que! calque.

Votre ecran doit ressemb!er a celul de la Figure 1.5.

13. Appuyez sur Entree et observez l'a.n.I:m.o.tlon.

14. Enregistrez de nouveau votre animation, en 8.ctlonnant Flcbler/Enreilistrer,

Chapitre 1 : Bien Ie bon jour Monsieur Flash MX

--------

21

Figure 1.5:

Avent de lira I'animation, Rainbow S8 trouve 8 droite, Resources II gauche et Ie logo est r9tDurn~.

Pubfier votre premiere animation pour fa posterite

VOllS ne pouvez pas voir I'anlmatlon sur une page Web tant qu'elle n'esi pas publlee et iIlseree dans un document HTML. Void comment Y

parvenlr:

1. Cliquez Bur Ia scene pour ebanger I'affichalle de I'inspecteur Propriet~.

La mention Flash Player 6 est aUlchee b. drone de Publler.

2. CUquez 81If f1as.h Player 6 dans: J'tnspeeteur Propnetes.

La fenetre de dialogue Param!tres de publication s'ouvre.

3. CUquez sur l'onglet HTML.

4. CUquez sur la case a eocher Boucle, dans Ia section Lecture, pour la d~ectionDer.

5. Cllquez sur Publier, puis cl1que.z ur OK pour fermer la renetre de dialogue.

22 Premiere partie: Flash dans son ensemble

----------------------

Figure 1,6; L'animation de I'anmie en detail.

Flash publie I'animatlon et cree deux Iiehlers, un nomme Animation de f'anmie,swf (51 VOllS avez utilise ce nom) et un autre Animation de {'annee.hlm{, Us se trouvent dans Ie meme dossier que le Ilchler d'anlmation .Ila, Animation de l'onnee.ntm! contie.nt Ie code HTML requls pour afflcher l'animation dans une page Web.

6. Ouvrez votre navigateur Web.

7. Actionnez Flchler/Ouvrlr et locallsez Am'mah'an de , 'annee.hlm'.

_------- Chapitre 1 : Bien Ie bonjour Monsieur Flash MX 23

8. Dollble<llquez SID' Ie fidder.

SI necessane, cliquez sur OK pour fermer la lenetre de dtalogue Ouvr!r. Votre navtgateur ouvre Ie document HTML et lit l'anlmatlon Flash (Figure l.6).

9. Lorsqne vous avez finl de regarder I'animation, fennez votre navigateur.

Quitter Flash

Une Iols que vous en avez assez de travalller, cbolslssez Fichter/ Quitter ... Sayonara Flash 1

Chapitre 2

Les bases d'un travail dans Flash

• • •

• •• • ••

Dans ce chapitre :

Vue d'ensemble.

Definlr les proprletes de l'animatlon. Utlliser des graphlques (images). Emplol de rnodeles.

lmprlrner votre animation.

. . .. ....

C:e chapitre lntrcdult la procedure genenque de creation des animations dans Flash. Nous decouvrlrons ensutte les ourlls et les fonctlons qui ameliorent l'elJJcacite de Flash.

La creation d'un site Web dans Flash repose sur quelques etapes, Leur ordre varie, mats dans chaque cas, les prtnclpes utilises restent les memes, Une lois que vous connaltrez les londements directeurs de Flash, vous pourrez creer absolument toutes sortes d'anlmatlons.et par consequent des sites Web qui feront I'admlratlon de tous les Internautes. Void la procedure typique pour alouter une anlmaLlon a une page Web existante :

1. Bien y peaser, Couchez vos Idees sur papler, faltes des croquls, organisez vtrtuellement votre animation et votre page Web. Parmi toutes vos idees. U y en aura au moins une a retenir I

2. Parametrer votre anlmatlen, Flash perrnet de dt'lftnir la tallie el la couleur de la scene, la vitesse de I'animatlon (c'est-a-dlre Ie

26 Premiere partie; Flash dans son ensemble

----------------------

nombre d'lmages par seconde ou cadence), et d'autres parametres gem !raux qui iniluencent l'i.nMgralite de I'animation. Llsez la prochalne section pour en savolr davantage.

3. Ajouter des graphlques. Vous devez cholslr entre creer vos graphlques dans Flash au dans un logidel dedie. Dans ce demier cas, II laudra importer vas creations dans Flash. La decision depend de vos Qualltes artlstiques et des programmes de creations gtaphiques dont vous dlspcsez. Vous pouvez egalement utlliser plusieurs SOurces graphiques, pratique tres repandue dans Ie neLArt. (Le Chapltre 3 est rlcne de suggestions concernant tes graphJques.)

4. Disposer correctement vo grapbJqUe8 dans I'animatlon. C'est lei que vous [ouez sur les ciJmensions (echelJe), la rotation, et tout ce qui permet de bien lntegrer vos graphlques dans une animation. (Le Chapitre 4 traire de la modJllcaUon des images.)

5. Ajonter du tate. Flash donne au texte une dimension jusqu'alors !nsoup~onnee. Vous pouvez Ie delorrner, Ie rendre transparent, alouter des effets, et surtout Ie placer oil vous le souhalte.z. (Consultez Ie Chapllre 5 pour de nornbreux conselJs sur la typographie.)

6. Ol-ganfsez votre texte et V081Jnages en utlllsant les calques.

Les calques aldent a conserver une trace tangible de chaque graphiQue et de chaque texte. 115 represeorern un puissant outll d'organisatJon des elements de votre animation. N'hesttez pas it uttllser autant de calques que vous jugez necessatrs, et a placer chaque element sur un calque dlstinct des autres, L'animation n'en sera que plus facile.

7. Transformer un gnt,phlque en symbole que VOWl multlpllerez sur la lotalHe de I'animation. Transformer certains objets en symboles est une maniere d'evlter une Iuslon aleatoire avec d'autres objets au moment de I'animation. Vous utlllsez aussi les symboles pour diminuer la taille flnaJe du flchler Flash, pour dec!encher I'animation et pour developper des elements interactlfs comma des boutons. (Voyez Ie Chapitre 7 pour plus d'informations sur les symboles.)

8. Concevob' des boutons, Vous connaissez les boutons, Ie Web en a beaucoup plus qu'un adolescent en plelne puberte. Sachez que la p!upart d'entre eLL'1 (les boutans, pas les adolescents) son I' crees dans Flash. VOLIS pouvez mfune utlliser des clips d'antrnatlon pour creer des boutons animes, (Le Chapitre 8 en dlt bien davantage sur les boutons.)

Chapitre 2 : Les bases d'un travail dans Flash 27

__ ------------------

9. Anlmer! Vous pouvez creer votre animatlon Image par image ou laisser Flash anlrner les trames qui separent deux images eloignees de quelques trames. Cette methode se nomme interpolation. Flash peut interpoler des mouvements. des formes. des couleurs et la transparence. Tout un monde de magle se trouve entre vas mains. (Le Chapitre 9 se consacre a l'animatlon.)

10. L'lnteractlvlte. Tout Ie monde veut crser une veritable relation entre Ie vlsiteur et Ie site. Pour cela II est Imperatif de mettre en ceuvre des boutons, des Images et des symboles qui repondent aux actions des utllisateurs. U s'aglt de la /onctlon la plus complexe de Flash, mals nous terons tout pour la rendre simple. (Consultez Ie Chapitre lO pour en savolr plus sur l'interactlvtte.)

11. Faltes-la hurler I Qui veut aujourd'hul un site Web de papa?

Personna I C'est la surenchere aux effets les plus dements. En plus de I'image, nous vouJons Ie son. Alors, asslgnez des evenements senores a vas objets et pourquol pas awe actions de vos vtsiteurs. (Reportez-vous au Chapitre 11 pour tout savoir sur Ie son.)

12. Publier votre eenvre. Flash facillte la mise en place de votre animation sur le Web en creant ie fichier SWF (lecteur ou player Flash) et Ie code HTML de votre page Web. Flash dispose d'autres options pour publier l'anlmatlon SOllS des formats dffferents.

Felicitations 1 Vous avez virtuellement termlne votre premiere animation Flash. Les sections sulvantes montrent comment mettre un pied sollde dans une reaI!tl! parfols deconcertante.

Parametrer fa scene

Avant de passer aux choses amusantes que sont la creation .de graphiques et leur animation, vous devez prendre des declsions radlcales, EUes vont determiner la structure de votre animation dans une acception globale. Il est prii!erable de savoir lmrnedlaternent ce que vous allez laire, En effet, la modification de ces premiers pa~ametres en cours de creation risque de poser des problemes necessttant une revision complete de votre animation: et croyez-rnol ce n'est pas agreable du tout.

La premiere etape consiste a determiner la tallie, la couleur de votre scene et d'autres parametres Indispensables. Assurez-vous que l'inspecteur Proprletes est ouvert (actionnez F'enetre/ProprhHes).

28 Premiere pa.rtie : Flash dans son ensemble _

Figure 2.1 :

Las prop rie· tes de l'anlmation se modifienl via l'inspecteur Proprietes.

La scene etant active (cllquez dessusj.t'tnspecteur Proprietes a l'aspect de la Figure 2.1.

En deflnlssant la couleur de la scene. vous mettez en place un arrlereplan colore pour toute l'anlmation. Comme pour certains autres parametres, vous devez prendre en compte le contexte de la page Web qul contlendra I'animatlon. Par exemple, vous affecterez a I'anlmatlon la msrne couleur d'arriere-plan que celte de la page Web. Sll'animation rempllt toute la page Web, la couleur que vous choisirez pour la scene sera la couleur d'arrtere-ptan de la page Web.

Pour regler la couleur de la scene, cllquez sur I 'echanUllon de couleur Arrtere-plan dans l'lnspecteur Proprtetes, Flash ouvre la palette de couleurs. Cliquez sur la couleur deslree,

Dans le champ Cadence, speclflez le nombre d'images qui seront lues en une seconde et appuyez SU.r Entree. Plus la cadence est elevee, plus J'anlmation est flulde, mals plus la tallle du Hchler final est lourde, ce qul n'est pas tres bien vu sur Ie Web. Las internautes ne veulent plus sublr des temps de telechargement trop longs. Le Chapitre 9 est plus Ioquace ace sulet. Par delaut, Flash attribue une cadence de 12 images par seconde, ce qui est certainement Ie meilleur compromls entre tluldlte de l'antmatton et tallle du ftchler resultant. Meflez-vous. Mod11ler Ia cadence en cours de creation altere la totallte de l'anlmatlon. Cela peut avoir des consequences desastreuses sur I'animation de certains elements.

Le bouton Tallle lndlque las dimensions de l'anlmatIon Flash. Par detaut les vaJeurs de Hauteur et de Largeur sont respectlvernent de 550 et de 400 pixels. La bonne tame depend de la place que prendre I'animation Flash dans la page ou Ie site Web. La tal lie attrtbuee par defaut s'accorde a la maJorite des navigateurs. Cependant. rlen ne vous ernpeche de creer une mlnuscule animation qui prendra place dans un petit coin de la page Web. Ce peut etre Ie cas d'un logo anlme

Chapitre 2 : Les bases d'un travail dans Flash

----------------

29

Figure 2.2 :

La janetre de I dialogue Proprietes du document. pour regler

las parame, tres gene· raux de I'animation.

qul trfme fierement dans Ie coin superieur gauche de la page. Dans c cas, une petite scene sufflra,

Pour changer la tallie de la scene, cllquez sur Ie bouton Tallle, ce qul ouvre la fenetre de dialogue Proprietes du document (Flgure 2.2). Tapez les dimensions dans les cases Hauteur et Largeur.

I~ .. I • ~j~J I POI ,jM .. ~ I

I~I CI>oJIIi.I'q'~,~ ~ ~ o._'1iI!GinJo

Flash vous propose par aIlleurs deux raccourcls :

,..... CUquez sur Ie bouton Imprimante du parametre Aluster seton, Alnsi, la talUe de la scene correspondra ilia taille du_papler detlnie par delaut pour votre Imprin.limte dans I~ bolte de dialogue Mise en page (accessible via Achier/Mise en page). Flash prend en compte la definition des marges po~r accorder une zone d'impression acceptable. Dans la section Imprimer votre animation" de ce chapitre, nous traltons du contenu de cette boite de dialogue.

,..... CUquez sur le bouton Contenu de la zone Ajuster selon. Alns], la scene adapte sa talile au contenu reel de l'anlrnatton. Cette option n'est efflcace que 51 des objets sont presents sur Ill. scene. Flash genere une tallle de scene en defioissant un espace egaJ autour des bards du contenu de la scene. Pour creer la plus petite scene possible. placez tous vas objets dans le coin superieur gauche, pols cllquez sur Ie bouton Contenu.

Ailn de changer l'unlte de mesure employee po~r ~'ecran et les objets, cholstssez une unite dans la liste deroulante Umtes de la regle,

Notez que vous pouvez changer Ill. couleur d'arrlere·plan et Ill. cadence d'image autant dans la fenetre de dlalogue Proprle.teS du document que dans I'mspecteur Proprletes.

30 Premiere partie: Flash dans son ensemble

----------------

Lorsque vous avez finl de regler les proprletes de document cliquez

Sur OK pour fermer la Ienetre de dlalogue, '

Utiliser des IJrapniques

Figure 2.3 :

las bitmaps

p erd ent Ie ur qualM qusnd Ussont agrandis; res images vectoriefles conss rvent un aspect parlelt

Toute animation Flash commence par la creation au I'importation de graphiques. Avant de Iatre qual que ce solt, VOllS devez comprendrs ce quldlflerencle les types d'Images que vous allez utiliser dans vas animations Flash.

La difference entre uecteurs et bitmaps

P~ur bien comprendre la difference qui extste entre les Images bitmaps et vectorielles, vous devez connailre les principes qui gouvernent ces deux notions. SI c'est votre cas, passez cette section.

Les bitmaps sont Ie fruit de points. En les rassemblant, on obUent une Image ~oMrente. Lorsqu'i1s sont sur feCraIl, on les appelle des pixels. Ces POints rassembles engendrent un nchler de grande tallle pour ~tocker leurs informations. Comme II s'aglt de points fIxes, dont Ilnf~rmatJon de_taille est pn?definle, toute manipulation de dimension de I Image ~ntrrun~ une perte qualitative insupportable (surtout dans Ie sens de I agrandlssernentj, La Figure 2.3 montre I'aspect d'une ima e

bitmap avant et apres agrandissement. g

Leg images vectorlelles sont deflnies par des equations mathi!'mati. ques. Elies speclflent des llgnes, des formes et des positions, Les esp~ces Vldes ne sont pas prts en conSideration et les equations sont partJcul!erement eJficaces pour stocker des informations. Resultat : la

_________ Chapitre 2: les bases d'u" travail dans Flash 31

tallle des fichlers vectortels est bien plus petite Que celie des ftchters bitmaps.

Les graphJques vectortels sent redlmenslonnables a l'lnflnl. Peu Importe la taille de votre graphlque ; SOIl aspect reste parfait, cornme le montre la Figure 2.3. Vas images paralssent meme bien plus belles quand elles sont plus grandes car les courbes sont plus llsses,

Flash cree des images vectorlelles. La petite taille des fichiers les rend plus rapides a teltkharger depuis I'lnternet. En consequence, l'animation se charge tr~s vlte dans Ie navigateur des Intemautes. C'est Ie grand atout de Flash. (Aux Chapitres 3 et is, nous traitons des raisons qui mkessitent une parfaite connalssance des bitmaps et des veeteurs.)

Irauaer des IJraphitjues

D'sccord, vous venez de Ure et de relLre des pages theoriques, vous avez pris des notes et meme trace quelques croquis, Vous vous sentez pret a creer une animation Flash. Pour bien commencer,lI semble Iogtque de regrouper des graphlques qui serviront de ciment .li. votre animation Flash,

Oil pouvez-vous les trouver ? Le cholx est vaste :

V' Utlllsez la blbllotheque d'tmages IIvrees avec Hash. Integrez-les en I'elat ou modlftez-les au gre de votre creativlte.

V' Creez vas graphiques a partir d'une imagination debordante (sl vous avez I'ame d'un artiste) grace aux outils de dessln de Flash decrits au Chapitre 3.

"" Creez des graphlques dans un autre programme de dessln comme Fireworks au FreeHand.

"" Importez des graphlques que vous trouverez sur des CIJ.ROM speciallses OU sur le Web.

"" Cornblnez ces approches.

Vous pouvez egaJement Importer des Ilchlers video. Pour plus d'informations, voir Ie Chapitre 11.

Dans fa bihliothel{ue

Chaque graphique utilise dans Flash est precleux Son archlvage est recommande, Chaque animation dispose d'une blbliotheque.

32 Premiere partie: Flash dans son ensemble

----------------

Figure 2.4:

Vous pouvez stocker vos graphiques, animations, boutons et SIJnS dans votre lichier d'animation en cours.

E!Je ~auvegarde les types d'objets sulvants pour que vous les retrouviez a tout moment:

Ii'" Graphtques, clips d'anlrnation, symboJes de dips et symboles de

boutons.

Y" Sons.

Y" Graphlques importes. Y" Flchiers video lmportes.

VOllS lrez n!gullerement dans la blbllotheque. La Figure 2.4 mon re une b~bliotheque contenant plusleurs types de symboles un son at un

bttmap, '

leOne de symbole bouton lcene de dossier

tcene de video

leone de symbole graphlque

de reductlon/developpement

Ordre de t(1 (croissant ou aecrolssant)

'hage etendu _od .; .... ~l"I»~rAfflehage rMuit

veau dossier "mJV"'otI symbole leOne de symbole dip d'animation

leOne de son

leOne de bitmap

Pour afficher la bibliotheque, actlonnez Fenetre/BlbUotheque au appuyez sur Ctrl-L ou PII (WIndows) au Commande+L ou Fll (Mac). Vous pouvez changer les dimensions et l'emplacemenr de la Ienetre de la blbllotheque a votre guise.

_--------Chapitre 2: Las bases d'un travail dans Flash 33

Voic.i comment utillser un objet de la bibllotheque :

I. selectlonnez Ie calque sur lequel vous desirez placer J'obJet ou creez nn nouveau calque pour la clrconstance.

2. CJiquez sur Is trame du scenario (ligne temporeUe) 00 VOU8 desirez que I'objet apparalsse,

3. GUssez-depo ez l'obJet de la bibllotMqueJusqu'it la scene.

Vous pouvez egalemellt selectlonner un objet dans la liste et falTe gllsser son Image qui apparalt dans la zone d'apereu de la tenetre Blbltotheque.

Utiliser des dossiers

Une animation Plash peut contenlr des dlzalnes volre des centaines de symboles. II Iaut organtser tout cela, Flash propose "Ius leurs fonctlons qui permertent de ne pas s'arracher les cheveux pour retrouver un element parUculier parmlles centalnes qui agrernentent votre animation.

L'orgenlsatlon des symboles peut se Ialre par Ie blals de dossiers. Pour en creer un, II sulflt de cliquer sur Ie bouton Nouveau dossier de la tenetre Bibltotheque, Salslssez un nom qui decrit justement Ie contenu de ce dossier. II s'aglt en general du type de symbole utilise. Appuyez sur Entree pour vallder Ie nom assign~. Par exernple, vous pouvez creer un dossier appele Intra et un autre Conclusion.

Pour placer des symboles dans un dossler, Ialtes-le gltsser jusqu'au dossier en question. Vous pouvez egalement deplacer des symboles d'un dossier a un autre, slmplement en les lalsant glisser.

Pour ne pas etre submerge par une llste de symboles, VOllS pouvez fermer les dossiers qui Ies contlennent. Des que vous avez besom d'acceder au contenu I'un dossier, double-cliquez dessus. Faites de merne pour Ie refermer.

Pour apprecler rapldement la structure de vos dossiers, choislssez Redulre taus les dossiers dans Ie menu Options de la fenetre Btbliotheque. Vous pouvez egalement selectlonner Developper tous les

dossiers afln d'afflcher l'integral.lte des symholes contenus clans les dossiers.

Toujours plus sur fa bibliothet{ue

Par d~raut, Flash organise fa biblloth~que par ordre alphabetlque, Mats votreloglque n'est peut-etre pas celie de Flash. Le trl peut etre

34 Premiere partie: Flash dans son ensemble

----------------------

croissant au decroissaDt, c'est-a-dlre de A a Z ou de Z a A. Vous pouvez egaIement efCectuer un trl en agtssant sur les colonnes de la lenetre Blbllotheque. Pour mod1lier Ie sens du trl d'une colo nne, II suffit de cllquer sur son titre puis sur Ie bouton de sens du trl sltue dans Ie coin droit des colonnes, Une autre methode conslste simplement a chquer sur Ie nom de la colonne pour effectuer Ie trl dans un sens, et de cllquer de nouveau dessus pour Inverser Ie sens.

Vous pouvez redimenslonner la lenetre Blbllotheque en laisant gUsser l'un de ses bords. Une autre methode consiste a dlquer Sur Ie bouton d'agrandlssement ou de reduction de la Ienetre (voir Figure 2.3). Vous pouvez redimensionner n'lrnporte queUe colonne en fatsanr gUsser les separateurs de tltre des colonnes.

Pour renommer un element de la bibllotheque. double-cllquez sur SOn nom. Salslssez Ie nouveau nom el appuyez sur la touche Entree pour Ie valider. Cette action ne modifie pas Ie nom d'ortgtne des flchiers lmportes,

Pour supprlrner un element. selectlonnez-Ie puis cl!quez sur l'lcone de la poubelle.

POur savoir com bien de fois un element est utilise dans votre animation, regardez la colonne nommee Compte des utllisations. Pour une comptabilisation precise, ouvrez Ie menu Options de la tenStre Blbllotheque et choistssez Tenlr 4 Jour le compte des utlllsatlons, Des que vous cnnnalssez les elements Inutlllses, n'hesltez pas a les supprlmer pour reduire la taille de votre fichler Plash.

VOllS pouvez actuallser les bitmaps et les sons lmoortes qui ont subl des modlflcatfons. Pour cela, actlvez I'option Mettre 1:1 Jour de la fenStre Blbliotheque.

UtiUser fa bibfiotheque d'autre« animations

Apres avoir place des objets dans une blbllotheque, vous pouvez les utlllser dans n'lmporte queUe animation Flash. Dans votre animation en cours. cholslssez Flehler/Ouvrlr comme bfbltotheque. Chotstssez Ie ftchler d'anlmation contenant Ies symboJes a utlllser, puis cJiquez sur Ouvr!r. La fenetre de la nouvelle bibliotheque est collee 4 celle dejA en place, mats rien ne vous ernpeche de I'en detacher en la falsant gllsser, CUquez sur la neche de developpemen!/n!ductlon pour developper ou redulre cette lenetre de biblloth~que.

Vous pouvez exploiter les blbllotheques d'autres animations Plash ouvertes de la meme fat;on. La bibllotheque de chaque Ilchier ouvert

Chapitre 2 : les bases d'un travail dans Fla.sh 35

__ -------------------

dispose de sa propre barre de titre et vous pouvez Mvelopper ou redulre cette portion II votre guise.

Vous pouvez copier des symboles ou autres elements de la bibliotheque d'une animation vers une autre par simple cltquer-glisser d'une bibllotheque a I'autre. Developpez Ie contenu des blbllotheques a exploiter, selectionnez un element et laltes-le glisser dans l'autre blbltotheque.

Une autre nouveaute est la possiblllte de creer un nouveau symbole place directement dans la bibllotheque au !leu de la scene. Cholslssez Nouveau symbole dans le menu Options de la blbllotheque, VOUS passes en mode de modUication de symbole, au vous pouvez creer Ie symbole comme a l'habitude. Pourrevenlr a l'anirnatlon princlpale, acnonnez Edition/ModIfier Ie document. Pour plus dfnlormatlons sur Ia creation et la modification de symboles, voir Ie Chapltre 7.

6p(orer fa hibfiothet{ue (;(/ree agee Flash

Flash est fourni avec une btbllotheque contenant un assortlment de sons, de symboles d'interface et de symboles boutons. Ils valent le coup d'cell, Pour y acceder, choisissez Fenetre/Blbllotheques communes.

A1ln de ereer des animations Flash plus facllement, vous dlsposez

, main tenant de quelques modeles correspondants aux types d'anlrnatlons Ies plus courants. Les instructions pour pro ceder sont lournles a l'lnterleur des rnodeles eux-memes. Pour creer une animation Flash a

partir d'un modele, actlonnez Fichler/Nouveau a partir d'un modele. Vous obtenez la Ienetre de dialogue Nouveau document (Figure 2.5). Cholslssez one categorle de modele, un des elements de la categone, puis cllquez sur OK.

Votct les categories de rnodeles dlsponibles :

11* Diaporw.na. Ce modele genere un dlaporarna de photos et expHque comment lnserer vos propres photos.

,,_. Diffusion. Tallles d'animations approprlees pour la creation d'anlmations a destination du cinema, de la video ou de la television.

,,_. Menus. Deux menus sont disponlbles : une uste deroulante et un menu ~ onglets. Un fichler XML externe permet de creer votre

36 Premiere partie: Flash dans son ensemble _

Figura 2.5:

Utilisation de Is fenfitre de dialoguE Nouveau document pour crhr

una

animation Flash II partir d'un modele.

,..",_"",,," ..... "" O~I!IT.II!I Oil.

101 .....

--

propre interface de menu. Les rnodeles comprennent les Instructions completes et des exernples de fichlers XML it personnaltser.

"'" Presentation. Creation d'une presentation. Vous avez Juste a sulvre les instructions pour ajouter Ie texte et les graphlques desires a chaque image cornposant la presentation.

V' PubUcite.. Vous avez Je cholx entre dtverses lallles de publicites. Notez que ces modetes contiennent stmplernent une scene de la taille de la publlclte cholsle, Les instructions sont sur un calque separe, non imprimable, que vous pouvez masquer.

"'" Perlpheriques mobiles. Trois perlpherrques mobiles sont dlsponibles, avec de eourtes tnstructlons, un lien pour plus d'lnfcrmatlons et une scene de Ja tallle adequate.

"'" Test. Cree un qutz complet. VOllS dlsposez de plusleurs types de

formats de questions et de reponses.

Une lois la nouvelle animation generee a partir d'un modele, enregtstrez-ta SOllS un autre nom. Le modele reste alnst inchang6 et vous avez toute latitude pour apporter des changements ~ I'anlmation.

II est aussl possible d'enregistrer une animation en tant que modele. C'est lnteressant dans Ie cas ou VOllS creez une animation que VOllS voulez reutillser dans dlverses sltuattons. Actlonnez Ftchler/Enregtstrer cornme modele, pour ouvnr la fenetre de dialogue Enregistrer comme modele (Figure 2.6).

_--------Chapitre 2: Les bases d'un travail dans Flash 37

Figure 2.6:

Utillsez Ie fenetre de dialogue Enre gi str e r comma modele pour an reg i strer une animation en rant que modele rAutilisa ble a volonte.

Tapez un nom, choisissez une categorle et entrez une description pour Ie modele. Puis, cliquez sur Enreglstrer, A present, vous pouvez ouvrir Ie modele exactement comme n'lmporte quel modele fouml avec Flash. L'em pial de modeles est susceptible de vous epargner beau-

~\1t coup de travail.

Pour creer votre propre categcne de modeles, tapez un nom de categorle dans la case Categorte.

lmprimer ootre animation

Generalement, vos animations ne sont pas destinees a l'tmpresslon mals 11 la publication sur Je Web. L'lmpresslon est tdeale lorsque vous travaillez sur une animation avec d'autres personnes qui ne possedent pas Flash (comment est-ce possible 1) L'lrnpression est eaalement utile lorsque vous deslrez analyser une animation sur papter, £p!nglez vos Images sur un mur et reorganlsez les sequences 11 la manlere d'un scenarlmage (storyboard).

Voie! comment trnpnmer une animation:

1. Pour defin1r dell marges, choislssez Achier/Mise en page.

La bone de dialogue Mise en page apparaTt (voir Figure 2.7).

2. Dans Ia section MBrgell, defi:n.lsse.z tell ... mBrge8. vcus conserverez certainement les marges par defaut.

38 Premiere partie: flesh dans son ensemble

-------------------

Figure 2.7 :

UtiliS6Z la boite de dialogue Mise en page pour specifier la maniere dant I'anlmation doitetre Imprimee,

DI~ 1.,.,..,..11 .... ." .. _ B ~~>II"!~ [I.po 'IOn LSr<ll'i><>+'d. ~,iIIO 3

P"ElJq.IJOIm "-'

3. Activez I'option Centre pour centrer J'impression verncalement et horlzontaJement sur vutre page.

4. Dansla section ~18po8ltlon cllquez sur ,1& lisle Images.

DecJdez III vous IDlprimez tontes Ies images OU seuJement une seule.

5. CJlquez ,La Uste DiBposltion de Ia seedon du meme nom pour choisir une des options lII1ivantes :

• Tallle reeUe : VOllS laisse choisir une taille. Cette option Imprirne une image par page.

• AJu~ter s~ une page: Place une image sur une page. Elle redlrnenslonne I'Image pour qu'elle s'ajuste a la taille de la page.

• Storyboard - Zones: Place plusieurs vignettes de votre ~~imation sur une page. Vous pouvez specJt[er Ie nombre

~ Images dans Ie champ Jusqu'a l'image. Des experimentatlons seront ne<;essaires pour obtenir Ie bon resultat. Dans Ie champ Marge d image indlquez, en p1xeis,I'espace qui dolt separer les zones.

• St~ryb?ard - Grllle : Cree une grille de llgne et non pas des bottes mdlvlduelles auteur des Images. C'est un cholx purement esthetique.

_________ Chapitre 2: Les bases d'un travail dans Flash 39

• Storyboard - Vide: Pas de cadres (boTtes) ni de grilles.

Seules les lrnages sent lmprtmees, VOllS disposez des memes parametres Jusqu'a l'lmage et Marge d'Lmage des autres types de storyboard.

6, 51 VOllS choiBlssez nne option Storyboard, cochez la case Etiqueter les lmagespour que ehaquefmage soit numerotee,

7. Dans la zone Papler, selectlonnez 18 tallle el dlifinlssez Is source du papler,

Habltuellement, vous laissez Ie contenu de cette section en I'etat car elle se base sur les parametres par de [aut de votre Imprimanteo

8. Dans Is section Orientation, chois1sse.z Portrait ou Paysage.

9. Lorsque veus en avez termine, eUquez sur OK.

10. 51 VOWI avez cboisi nne option Storyboard, caetstssez HeWerl Apel'9l avant impression. Vans aurez une idee assez preciBe de ce que sera votre animation lmprimee.

11. Cllquez imprimer pour lancer dlrectement l'lmpresslon depuls I'apel",u. Vous pouvez egalement fe.nner 18 fenetre d'aperen, ouvrtr Ie menu Flch1er et cllqu r sar Imprlmer.

~I~:!.. ,I' '" ~,~~ ~

-* 4 ~ ~
kDllft.1 ~dulIl·..2 ~~I·) Sctlllll.,.
;¥ ft
~ '1- /f '1- 0, - .-
Figure 2.8:
Vous pcuvez
imprimerun &adal.J. lnm.l·1ti !l:!INUJ, '.1:_1.1
storyboard
de Votre /f ~ J j
animation qui - "1--' ... -- ... _.
afflche una
vignette pour
~haque !cifiIIl-' !hld:llL JI:I ~"NI II 150.:1.1.11
IlI1age. u ~ ~ ----- - ~
..... 40 Premiere partie: Flash dans son ensemble _

Une alternative consiste a appuyer sur Ctrl .. P (Windo\Vs) ou x .. p (Mac).

La FJgure 2.8 montre un exemple d'apercu d'une animatlon avant impression. Le mode selectlonne est Storyboard - Grille. L'orlentatton est de type pays age.

Deuxieme pe

1 000 images e\

"Je t'ai deja dit de ne pas cnirner les torches sur cette page Web !"

Dans cette partie .....

L es grllphlques, les Images Iondent res animations. Avant de falre bouger quoi que ce sou, vous avez besom d'un element graphJqu . Cette partie presente tous les types de graphlques que vnus pouvez mettre 1I contribution dans Flash, A partir de formes simples, vous creerez des animations epoustoullantes. Les outlls de flash vous a1deront efficacement dans la conception d'objets aux couleurs degradees. disposant de contours llsses, et dont la transparence peut varier dans Ie temps. Presque tout est envlsa-

geable dans Flash. I

Vous verrez egalement comment scinder un texte en plus leurs

parties pour anlmer chaque lettre individuellement. La gestton des calques donne une puissance d'organlsatlon peu commune des

divers elements mimes ou non. Enlin, vous pcuvez utiliser des calques speclaux comme guide d'annnatlon sur une trajectotre, et pour cacher des objets derriere des masques.

Chapitre3 Disposer de graphiques

. .

•

• • • • • •

Dalls ce chapitre :

UtUiser l'outil Crayon.

Desslner des hgnes, des rectangles et des ellipses. Travalller avec des formes.

Creer des combes avec l'outiJ Plume.

Travail sur les traits avec l'outll Encrler.

Uti!iser l'outil Pinceau pour plus de creativite. Creation de belles couleurs et de beaux rempllssages. Rempl!r des formes avec le Pot de peinture.

Uti!Jser leg outlls de precision.

Importer des images.

• • • 0 • • • • • • • • • • • •

n ans ce chapltre, vous apprendrez a desstner dans Plash. Les U outHs de dessln permettenl de creer lacilement des formes dignes des professionnels. Bien sur, vous pouvez Importer des images creees dans d'autres programmes.

Iaille: aotre crauon

Cet outil s'utlllse comme un simple crayon de bois pour creer des formes lib res a main levee. Des que vous souhaitez creer une forme proposee par aucun autre outl! de Flash, VOliS prendrez ce crayon en main, au plutdt a la souris. Cependant, la philosophie d'utillsatton de celoutil va bien au-dell! de celle d'un crayon classlque, Vous pouvez desslner des formes qui se llssent automatiquemenl ou qui se tlennent d'une rigid It!! milltalre. En plus de ces posslbllltes, Flash dispose d'une

44 Deuxieme partie: 1 000 images et 1 000 mots _

lonctlon dlte de redressemenr des tormes. Grace a elle, ce qui ressemble a un carre maladroit se trans forme automatlquement en un carre parfait. Cette fonction marche pour toutes les autres formes geometri. ques, Voiel comment toncttonne J'outil Crayon.

Pour commencer, cllquez sur Ik1ine ct-contre de Ja boite Ii outlls. AUn de dessiner, it suf£lt de placer Ie polnteur de la souris sur la scene et d'en maintenir eruonce Ie bouton. Deplacez la souris pour esqulsser la Jorme desiree. Des que vous rel1ichez Ie bouton de Ja sourls, Flash modlfie la forme en lonctlon des parametres de vos modlficateurs (zone Options en bas de la beite a outlls),

Parametrer les modificateurs du CralJon

Lorsque vous cllquez sur I'outil Crayon, les Options sltuees en bas de la bette a outils s'accordent lI. votre selection. Vous dtsposez aims de modlflcateurs propres a l'ouul Crayon.

Ces modWcateurs au options sont au nombre de trois:

"* Redresser: Redresse les llgnes et converUt les carres, les rectangles, les cercles, les ellipses et les triangles mal dessines, en des formes geometrlques parfaltes.

v Ltsser : Adoucit les courbes, eliminant de ce tal! I'elfet de crenelage. C'est ce que ron appelle une fonctlon d'antialiusing.

v Encre: Llsse les courbes et redresse les traits, sans porter

atteinte a la forme desstnee,

La figure 3.1 montre une neche dlrlgee vers la drolle. La premiere fJecbe a ete desslnee sans moditlcateur, alors que la seconde a ete creee avec l'optlon Redresser. La dIfference de quallte et de precision est flagrante.

Supposons que vous souhattlez animer des vagues sur votre site Web. Vous commencez par desslner les contours des vagues. La Figure 3.2 montre l'aspect des vagues selon que vous Ies dessinlez au non en mode L!sser.

Pour des formes plus complexes, Ie mode Encre est Indispensable. Vous beneficiez des memes eflets de llssage, mais la forme desstnee ne sublt aUCUDe modll1catlon ... de forme.

_----------- Chapitre 3 : Disposer de graphiques 45

Figure 3,1 :

Utilisezle mode

Re d reSSOT de l'outi\ CrBVon pour dessiner des lignes parfai1ement draites.

Figure 3.2:

La mode lissar adoucit les courbes peur en laire de magnifiques formes sans defauts.

Avant

Apres

Avant

Apres

Definir le tlJpe de trait

Lorsque vous desslnez avec Ie Crayon (et tout autre outil de desstn), vous pouvez contrdler l'epalsseur et la nature du trait (style de la llgne), VOid comment rn diCIer le trait;

1. Olquez sur l'oatH Crayon pour Iereudre 9ctif.

2. Ouvrez I'lnspecteur Proprietes en choislssant F nerrel Proprietes.

L'inspecteur Proprtetes apparait (Flgure 3.3). Comme nous l'expllquons au Chapltre 1, l'aspect de l'inspecteur Proprl~tes change selon I'element actlf et 1a partie de la fenetre Flash actuellernent urlltsee,

46 Deu)(ieme partie :. 1 000 images at 1 000 mots

-----------------------

Rgura 3.3:

Utilisez Ie

pannsau Proprietes pour controler 10 type et Ie

largeur de

trait

3, CIlquez sur Ia lisle deroulante Style de trait pour affIcher les styles de Ugne disponJbles et chotstesez un style de tigue,

4. Pour changer l'l!paisseur de la llgne, tap z un nouvelle valeur dans la case de sa1sle Hauteur de trait et appuye.z sur

Entree ou Return. ou faltes gJisser Ie curseur sur la valeur desiree.

La premiere epal$seur de trait dlsponlble est {ilet malgre, qui cree un trait de l'epalsseur d'un cheveu. L'unlte de mesure des llgnes est Ie point. Toute Ugne creee par un outl! de dessln aura les proprletes definies dans Ie panneau Proprletes.

Pour creer une epatsseur personnallsee, salslssez une valeur dans Ie champ numenque et appuyez sur Entree. Vous pouvez salsir n'lmporte quelle epalsseur, mats sachez que plus Ie trait est epals plus Ie flchler d'anlmatlon Flash s'alourdtt,

Vous pouvez egalement creer des styles de llgnes. Cliquez sur la Heche sltuee dans Ie coin superieur droit du panneau. vous y trouverez I'optlon Personnallser. Selecttonnez-la pour acceder II la boite de dialogue Style de trait.

Determiner fa couleur

Utilisez la ecuon CouJeur du panneau Proprietes pour deflnlr la couleur de votre hgne, Cliquez sur I'Icone qul, personnellement, me lait penser it !'ecran d'un montteur. VOllS accedez it une palette de

couleurs.

Voos en saurez davantage sur les couJeurs dans la section, "Un arc-enciel de couleurs", plus loin dans ce chapitre.

__ ---------- Chapitre 3 : Disposer de graphiques 47

Creer des formes predeterminees

Dans la precedents section. nous avons expUque comment creer des formes avec I'outil Crayon, Vous pouvez egalement tracer des lignes, des rectangles, des carres, des ovales et des cercles en utilisant les outlls de formes predeterminees. Par example. pour dessiner un cercle

parfait, utillsez l'outll Ovale.

Li9ne

Pour des siner une ligne, chotslssez I'outll du mme nom dans la boite II outUs. Cllquez sur la scene a I'endroit ou dolt commencer Ie trait. Maintene:z Ie bouton de la souris enlonce et faites gUsser Ie petit rongeur. Une fois le point terminal du tralt atteint, relachez Je bouton. Pour lorcer Ie trait a pivoter par pas de 45·, maintenez ta touche Maj enfoncee pendant que vous dessinez.

Etre carre

Pour desslner un rectangle, cholslssez l'outil du merne nom dans la boite 11 outlls, Cllquea sur la scene 1:1. l'endroit au dolt se sltuer Ie coin superieur gauche du rectangle. Faltes gllsser la souris dans Ie coin oppose. Lorsque vous relachez le bouton de la souris, le rectangle est cree. Pour faire un carte parfait, maintenez Ia touche Mal enfoncee pendant que vous tracez la forme.

Lorsque vous cllquez sur l'outll Rectangle, VOtiS pouvez modifier I'epalsseur du trait, son style et sa couleur, exactement comme vous l'avez lalt pour I'outll Crayon. Cependant, flash genere deux objets lorsque VOllS tracez un rectangle: Ie contour (Iait d'un trait connnu) et Ie rerttpllssage (qui se trouve al'mterteur du contour).

Voiclles parametres que vous pouvez ajuster :

".., Couleur de remplissage : Determine la couleur quJ remplira l'tnterleur de la forme. Vous pouvez cliquer sur ['leone situee a cote du pot de pelnture dans le panneau Proprietes ou dans la zone Couleurs de la bolte 11 outils. Une pipette apparait, ClIquez sur une couleur pour la seJectionner. EUe devient la couleur de rernpLissage.

".., Couleur de tl'ait : Determine la couleur du contour du rectangle.

CLiquez sur Ie petit rectangle colore dans Ie panneau Proprletes au dans la zone Couleurs de la botte a outi1s. Utlllsez la Pipette pour preiever une nouvelle telnte.

~8 Duuxieme partie: 1 DOD images et 1 DOD mots _

I'" Nair et blanc: DeIlnit une couleur de trait noire et une couleur de remplissage blanche. Le bouton Nair et blanc se trouve dans la zone CouJeurs de la boTte a outils.

I'" Pas de couleur : Detlnlt que le trait ou Ie rernpllssage n'a pas de couJeur. Vous devez selectlonner l'optlon trait ou rernplissage de la zone Couleurs avant d'utillser cette Icone.

I'" &hanger les couleurs : Permute la couleur de trait et de rempllssage.

P' Mod1ficateur Rayon de rectangle arrondi : Cree un rectangle aux coins arrondls. Ce madlficateur se trouve dans la zone Options, Cliquez sur son Icone pour ouvrlr la boite de dialogue

Parametres du rectangle. VOUS y definlssez Ie Rayon d'angJe exprlme en paints. Cliquez sur OK pour vahder la valeur saisie, Le rectangle apparait avec de jolis angles arrondls.

~\)C

... Pour creer un rectangle sans rempllssage, choislssez I'outil Rectangle.

Ouvrez la palette de cauleurs de rempltssage. Dans Ie coin superieur droit de cette palette, cllquez sur l'lcone barree d'une dlagonale rouge. Traces ensutte votre rectangle sur la scenell ne sera fait que d'un

contour.

Etre un /But

Pour desslner un ovale, choisissez l'outll Ovate dans la boite a outlls. Cltquez sur la scene a l'endrolt oil d it se sltuer un des "coins" de l'ovale, Faltes gllsser Ia souris dans Ie coin oppose. Vous voyez I'ellipse se former. Des que la dimension et la forme vous sieent, relachez Ie bouton de la souris. Pour creer un cerele parfait, malntenez 1<1 touche Mal enfoncee tout en tracant la forme.

Apres avotr selectionne l'outll Ovale, vous pouvez modilier la eouleur de la ltgne, son type et son epaisseur, comme vous l'avez fait dans la section "Detinlr Ie style de trait", pour I'outll Crayon. Vous pouvez selecttonner une couleur de remplissage cornme eela est decrlt dans la precedents section.

De t« sat/ante utilisation des formes

Creer des formes c'est bien. Les utlllser conjolnternent pour creer des objets plus complexes c'est encore mieux I lcl, vous devez trnperatlvement com prendre ce qui se passe iorsque deux objet's se tauehent. Les princlpes que nous allons evoquer ne sont pas d'une slmpllctte

proverbiale. AsSlmllez-les bien, car de leur comprehension depend Ja creation d'objets plus orlglnaux et plus realistes les uns que Ies autres, Les sections qul suivent traitent des deux regles qui regissent la Juxtaposltlon de deux objets.

~ ------- Chapitre 3 : Disposer de graphiques 49

Figure 3,4 :

Tracer une IIgne sur n'lmports quelle forme agllcomme un couteau dlicoupant I'objel en segments,

Decouper des formes

La premiere regie a retenlr est que lorsqu'une Ugne chevauche une autre forme ou une autre lIgne, elle aglt comme un couteau. La IIgne amsl tracee decaupe des segments. L'effet n'est remarquable qu'au moment au vous deplacez un des objets. Supposons que vous destrlez dessiner un craur brtse, (0 [eunesse que emelle n'as-tu ete envers mol dans mes amours adolescentes contrar!ees 0 Commencez par desslner un coeur 11 I'aide de I'outll Crayon. Dessinez ensulte la Ugne qui va sclnder le coeur. Cette fois encore vous utlUserez l'outll Cr~yon. Vous disposez malntenant de plusieurs objets. Deplacez une partie du CceUI pour constater qu'll est reellement brlse, a l'image de La FI-

gure 3.4, au te trait a bien sur ele efface.

Superposer les objets

La seconde regie concernant les objets qui se touchent est que torsque vous placez une forme sur une autre, la forme du dessus

rem place ce qui se trouve SOLIS elle, U! encore, te resultat n'est visible que si vous selectlonnez ou deplacez les tormes. Mais malntenant, apprehendons quelque chose d'un peu plus complexe :

v Sl les deux formes sont de la meme caul ur, eUes fusionnent en une forme comblnee.

50 DeuKieme partie: 1 000 images et 1 000 mots _

Rgure 3.5:

Cnlez des formes complexes en pla~ant lssunes sur las suITes des formes de couleurs identiques.

"'" Si les deux formes sont de couJeurs dlfferentes, elles restent

separees,

La FIgure 3.5 montre deux cercles et un triangle (It. gauche). lis sont de la meme conleur. A drotte, vous appreclez le resultat obtenu apres deplacement des deux cercles sur Ie triangle. Vous obtenez un clEur .. Essayez de deplacer Ie ceeur ... Eh oul ! Vous n'avez plus qu'un seuJ objet.

Note du traducteur : Attention! Celle technique ne Ionctionne que si I)OU5 dessinez des iormes sans couleur de con/our. N'oubliez pas que des que vous tracez une forme retnplie d'une couleur, f7o!>h considbre le trait wmme Uri objet et Ie remp/issage comme un autre. Done, pour que fro; objets d'uru: meme couleur fusionnenl, ii est imperatif de les dessiner sans couleur de contour. Pour cela, II suffi! de selecliormer l'icone du crayon dans la zone Couleurs, puis de cliquer sur ie carre barre d'une diagonale rouge. Celie ic{jne n'est active que si un outll de dessin est .~electjonne dans ta boile a DutUS.

Lorsque vous comblnez des formes de dlfferentes couleurs, vous creez de multiples zones de decou page. C'est une sorte de puzzle. A\I lieu de s'ajouter, les objets se soustraient. On parle parfois de methode soustracttve (terminologie bien connue des concepteurs 3D). La Figure 3.6 rnontre comment generer une "defence" dans une forme gtlJometrique. Vous desstnez un coeur rouge et une forme vaguement rectangulaire bleue, Placez Ie cceur sur le rectangle. Deselectlonnez les formes en cJlquant sur un endrott quelconque de la scene. Ensulte, setectlonnez le coeur en cllquant dessus et faltes-le ghsser en dehors du rectangle. Un coeur blanc s'est decoupe dans Ie rectangle. Le blanc est la couleur d'arrlere-plan, c'est-a-dlre de la scene.

Chapitre 3 : Disposer de grBphiques 51

-------------------

Creer des courbes avec t'outil Plume

Fl h 5 possede un nouvel outll qui permet de dessiner des courbes de B;;ier. II s'agit de t'outtl Plume. Ces courbes tirent leur no~ d'un mathematician fTan~ais, Pierre Bezter, qul a ete Ie premier ales decrlre. En uti lis ant l'outil Plume, vous pouvez creer des courbe~ llssea qul s'imbrlquent les unes dans les autres. Vous pouvez egale-

menl creer des llgnes droites.

Pour parametrer les preferences de l'outLI Plume, choisissez E?ition/ Preferences et cllquez sur !'onglet ModIfIcation. Je vous eonseille d'acttver l'optlon Affleher I'apen;u de I'outll Plume pour observer la lorme des ltgnes et des courbes au fur et 11 rnesure de leur creation.

Figure 3.6:

E.n plaqant

des formes

de couleurs differentes

las unss sur las Bunes, puis en

depla ~enlla forme du dessus, VOU5 creez des decoupes lou dilfonces).

Pour creer un etlet de defonce, sutvez les etapes cl..dessous :

I. Creez deux formes distinctes qui n'ont pas la meme couleur.

2. Placez nne forme sur l'autre.

3. Deselect10nnez la forme que vous venez de placer sur l'autre.

4. selectionnez..la de nouveau puis faUes-la gUsser en dehors de la fonne du dessons pour creer la defonce.

Reportez-vous au Chapitre 4 pour plus de details sur la selection et Ie deplacement des objets.

52 Deuxiiime partie: 1000 images et 1000 mots .....:__

Cela vous donne une apprectation immediate du resultat tlnal. Cliquez sur OK une fols que vous avez flnl de deflnir vas pret6rences.

Pour creer une ligne au une courbe, cholslssez l'outtl Plume dans la bOI e a outlls. La. suite depend de ce que vous desirez dessiner, une ligne droite ou une courbe, Les sections sulvantes envisagent les d l.IX posslbllites.

Dessiner des IilJnes droites

Pour dessiner une IIgne droite avec I'outil Plume, cUquez au point de depart puis au point d'arrtvee. Inutile de Ialre gllsser la souris tout en malntenant son bouton enlonce, Vous notez que la Plume reste active. Chaque "cue" cree un nouveau point d'ancrage d'ou vo us pouvez lalre partir un nouveau segment de drolte. Pour stopper Ia creation de nouveaux segments, double-cltquez, Vous pouvez egalemeru faire Ctri-Cllc (sous Windows) ou 8€+ClIc (Mac) n'lmporte au en dehors de la Ligne. Flash alflche l'apercu des segments en bleu. Lorsquevous cholstssez un autre outil (ou que vous appuyez sur la touche Ecnap du clavier), Flash affiche les Bezlers avec la couleur de tralt active.

Dessiner des courbes

II s'aglt d'une procedure en trois etapes :

l. Cllquez au point de depart de la eourb pour creer un premier polm d'ancrage. Deplacez 18 sow18 dans la diredion et a la distance soubaitee.

51 vous avez active l'optton de prevlsualisatlon de lacourbe (comme expllque dans la section "Creer des courbes avec I'outll Plume"), vous voyez une Ilgne "elastlque" attaches au polnteur de la souris.

2. Quand Ie pointenr de 18 souri trouve 8. I'endroit vonlu,

cllquez et, sans re1iicher Ie bouton de la souris, faltes-m gUsset pour creer la courbe.

Vous voyez une ligne langente, comme Ie montre la Figure 3.7. Une tangente deflnlt la direction et la longueur, c'est-a-dlre les deux parametres qui afiectent la forme de la courbe.

3. Oouble-cUquez an point de fin desire.

Pour continuer a desstner des courbes, commences comrne a I'etape 1, rnals des que voua avez definl le second point d'ancrage, partez dans

__ ---------- Chapitre J : Disposer de graphiques 53

Agure3.7 :
Dessiner una ,/ (b)
cQurhe avec la)
I'outil Plume
est une
procedurll ~
trois &tapes.
(el un autre direction. Vous pouvez poursutvre la creation d'une vaste courbe complexe en multi pliant les points d'ancrage. Une fols la forme obtenue, double-cllquez pour terminer la courbe.

Auss! bien pour les lignes que pour les ccurbes, il sufflt de maintenlrla touche MaJ enloncee pour appllquer un angle de 45·.

Desslner des courbes avec I'outil Plume demande de la pratique. Ne vous inquietez pas. rres 'lite vous serez UJ] expert en la matiere.

Deflenir artiste peintre aoec Ie Pinceau

L'outll Pinceau autorlse des eHets artlstiques proches de la pelnture. Vous pouvez regler la taiUe et ia forme du pinceau (aussl appele brosse dans Ie Jargon in[ographlque) et utlllser une tablette graphique. La pression sur Ie stylet Iera varier lesdltes tallies et formes.

Pour peindre avec l'outll Pinceau, cltquez dessus dans la boTte 11 outH.s, Lorsque vous peignez, maintenez la touche Mal enJonce.e pour obtenlr des "coups" de ptnceau horizontaux ou verticaux. Denmssez une . . couleur comme vous l'avez fait pour I'outil Ovale et Rectangle, ou bten utllisez le panneau Rempllr. Le plnceau ne genere pas de contours. Par consequent, iI n'est pas possible de definir une couleur de trait. Avec I'outil Pfnceau, Flash ne cree que des remplissages.

Pour cholsir une couleur de rernpllssage, utillsez la Iiste deroulante Couleur de rempllssage dans I'inspecteur Proprl~tes ou dans la section Couleurs de la bone a outils Dessln.

Lorsque vous actlonnez l'outll Plnceau, les modllicateuTs du Pinceau appara1ssent dans la section Options de la bolte a outlls Dessln

(Figure 3.8).

54 Deuxieme partie: 1 000 images et 1 000 mots _

Des que l'outll Pinceau est actll, la zone Options de la boite it outlls entre en action comme en temolgne la Figure 3.8.

Mode du plnceau

PresSion

Figure 3.B:

Ies options du Pinceau controlsnt sa taille at sa forme at Ie maniere dont II intersglt avec les autros

images Verrouiller le rempllssage

press ntas su r

Is selina. Tallie du plncseu

____ Forme du plncsau

Mode du pinceeu

Ce modlficateur determine la manlere dont Ie pinceau reagit quand iI rencontre d'autres objets sur la scsne, lei, vous disposez des chotx sulvants, lllustres sur la Figure 3.9 :

yI Peinl nonnalement : Rlen ne se passe de speclal lorsqua Ie Plnceau rencontre d'autres objets. n petnt par-dessus,

", RempUssage: Permet de peindre sur des rempllssages ou des zones vtdes de la scene. Ce mode ne pelnt pas les contours au les llgnes (Traits). Au moment au vous donnez votre coup de plnceau, la llgne semble we pelnte, Des que vous relaehez Ie bouton de la souris, la llgne reapparan,

'" Peint derriere: Vous pelgnezla lone vide qui se trouve derriere les ObJets presents, 111 encore, la pe!nture semble s'appllquer sur les objets. Cependant, des que vous reJachez le bouton de la souris, Ie coup de pinceau apparrul: derriere lea objets presents sur la scene, Grace A ce precede, vous ne pouvez pas pelndre sur un autre objet par lnadvertance.

'" Pelnt Ia selection: Ne pelnt que les zones selectlonnees rempltes par une couleur quelconque. SI un contour, ou un trait, fait partie de la selection, II sera recouvert par la pelnture.

_----------- Chapitrel : Disposer de graphiques 55

Figure 3.9 :

Choislssez un mode de plnceau pour oblenir I'affet sQuhaite.

MaTs original

MaTs avec des vers - Peint normaiement

Ma·is avec un arrlil!re-plan - Fel.lille remplie avec un

Pelnt derriere degrade 9rl5 -

Peint la selection

Mals avec des grains pourrls- Remplissage

MaYs avec des grains pourris -

Pelnt ~ "interieur

Lorsque vous ne selectlonnez que Ie rernpllssage d'un objet, ses contours ne sont pas a1teres par ce mode,

'" Pelnt a I'inteneur : Permet de pelndre a l'lnterieur des !ignes.

Seul \e rempl!ssage au vous commencez a pelndre est modine. Ce precede pennet egalernent de peindre sur une zone vide de la scene. Cette fois encore, Ie coup de plnceau semble pelndre la totallte des zones sur tesquelles vous passez, Mals des Que vous relachez Ie bouton de la souris, seule la zone concernee est peinte.

Ta;((e du pineeau

Cliquez sur la Iiste TailJe du ptncean pour cholslr une ... taille. Ce choix est vlsuel, [] s'opere en tonction de la grosseur des cercles presents dans la llste, Plus le cercle est gros, plus la taiUe de la brosse est elevee. Sl vous utlltsez le mode Pelnt la selectlon, la talile de la brosse

56 Deuxieme partie: 1 000 images et 1 000 mots _~~ _

Figura 3.10:

Chaque forme de

pi nc ea u cr6a un effet dffferent On Ie remarque davantage sur les darniers coups de pinceaulL

lmporte peu, En revanche, 51 vaus utlllsez le mode Pelot normaJement, la ta1Ue du pinceau est Iocdamentale.

Forme du pinceau

Flash offre plusleurs Formes de plnceau que vous pouvez selectlonner dans la llste de la boTte du meme nom. Chaque forme prodult un ellet dfIferent, notamment lorsque vous pelgnez en angle - essayez les formes et optez pour celie qui rempllt Ie mieux Ie role Que vous attendez de votre pinceau. La Figure 3.10 montre une scene desslnee avec drverses formes de brosses,

Modif;cateur de pression

Si vous possedez une tablette avec un stylet sensible a la pression, Flash permet (votr Figure 3.8) de varier I'epaisseur de votre brosse en lonction de la pression esercee sur Ie stylet.

Plash supporte les stylets senslbles a 13 pression et ajoute des lanctlons inhabituelJes, comme la posslblllte d'utlliser I'autre extremite du stylet pour effacer (un comportement semblable it de nombreux crayons surmontes d'une petite gamme). La F'igure 3.11 montre un stylet et une tablette.

Stylet et tahlette fonctlonnent de conserve. La tabJette suit le rnouvement lmprlme au stylet. Elle reaglt A la pression exercee pendant toute la duree du dessln, VOllS comprenez alors qu'll est laclle de Iatre varier l'epalsseur d'un trait sans s'arreter de desslner pour selectlonner une nouvelle taille dans la bo1te illiste corresponda.nte de Flash. Vous

Chapitre 3 : Disposer de graphiques

-----------------

57

Figure 3,11 :

Cette lshlette at co s\i'iet Wa~om permanent de dessiner plus facilement qu'il Is souris. Vous pouvez al56men! modifier Ie (aille du plnceau pendant qua vous dessinez.

pouvez utillser le stylet et la tablette pour des slner et empoigner la souris lorsque vous souhaltez selectionner des options dans les menus ou les bones de dialogue.

Reportez-vous a la section, "Un arc-en-ciel de couleurs""un ~eu plus loin dans ce chapltre, pour une explication precise sur I option

VerrouiUer Ie remplissage.

Verser de fa peinture

L'outll Pot de pelnture permel de rempltr des formes. Avec quol ? Avec de la couleur bien evidemment ! N'oubllez pas que certains outlls, rempHssent automatlquement tatorme desslnee, comme le font I Ovale et Ie Rectangle. Dans certaines circonstances, vous preIererez dessiner la forme generale d'un oblet avec I'outil Trait au C~yon.que vOU!> remplirez d'une au plusieurs couleurs avec I'ou~ Po~ e pe:ture. Il en sera de meme avec des formes Iermees qui ant ete ere es

grace aUK outlls Plume et Plnceau.

L'outll Pot de pelnture est pratique pour remplacer une couleur de remplissa.ge existante. Vous pouvez m.eme appltquer des degrades et eHectuer des remplissages avec des bitmaps.

58 Deuxieme partie: 1 ODD imageset 1 DOD mots

---------------------

Pour utiliser l'outtl Pot de pelnture, II sufflt de ellquer sur son leone dans la bone 1I outlls. Selectionnez une couleur en cllquant sur l'kone Couleur de remplissage ou en passant par Ie panneau Proprtetes.

Flash permet de detenniner comment seront rem plies des zones qui ne sont pas completernent Iermees .. Le mOdificateur Taille de l'espace, dans la zone Options de la bone a outlls, definJt la reaction de Flash en la matiere, Vous avez une plage de reglage aIlant de Ne Ierrne pas les espaces a Ferme les grands espaces. Dans la mesure oil petit et grand sont des termes tres subjectils, vous devez experimenter ces options pour obtenLr Ie resultat escompta, Une fots Ie modilicateur approprle selecttonne, diquez dans n'lmporte queUe ZOne Iermee ou presque Iermee pour 101 remplJr, comme Ie montre la Figure 3.12.

Figure 3.12:

Vous pouvez, grace au modificllteuf Tallie ds l'aspace, remplir des zones qui ne sontpas complets' ment farm6es.

@f~C

Apres avolr utilise Ie Pot de peinture pour remplir u. ne forme ereee avec un autre outll, vous pouvez effacer les contours de la forme et laisser Ie rernpllssage intact.

Encrier

VOUS utJliserez l'Encrler pour creer Ie contour d'une forme existante. Cet outll vous permet aussi de mod1fier une ligne existan.te.

Pour utlllser I'outil Encrier, cllouez Sur son leone dans la boTte a outils. CUquez ensuite sur I'leone Couleur de trait ahn de selecttonner une couleur. UtLllsez Ie panneau Proprletes pour defin!r une epalsseur de IIgne, comme [lOUS en avons parle dans la section consacree a l'outf Crayon. Ensuite, cllquez n'lmporte ou sur la forme. SI cette demlere ne possede aucun contour, Flash en ajoute un. Si elle dispose d'un

_----------- Chapitre 3 : Disposer de graphiques 59

contour, Flash modltte sa couleur, sa largeur ou son style, en Ionction des parametres deflnis dans Ie panneau Trait.

Un arc .. en .. ciel de couleurs

Flash met a votre disposition de nombreuses options liees a la eouleur. Vous pouvez travaliler avec des couleurs unles (aplats). Par delaut, Flash utilise une palette de 216 couleurs compatible Web. Cela slgniIle que ces couleurs apparaTtront telles que VOIlS les voyez quel que soit Ie navigateur qui accede a votre amrnatton Flash. Mais, vous pouvez creer vos propres couleurs.

Unicite de fa coufeur

Lorsque vous cholsissez l'outll CouJeur de trait ou de rempllssage (zone Couleurs de la boTte a outils), Flash ouvre la palette de couleurs courante. c'est-a-dlre Ie jeu de couleurs utilise par Flash. Si VOllS desirez utiliser les couleurs compatibles Web, vous devez selectlonner une de ces couleurs courantes.

Creer de noucelles couleurs ou modifier des couleurs esistante«

Flash permet de spectller vos propres couleurs de deux lacons, D'abord, vous pouvez eholslr I'outll Couleur de rempllssage ou Couleur de trait dans la zone Couleurs de la bolte a outlls. Cllquez sur l'icdne remplie d'une couleur, VOllS accedez A une petite palette. Pour personnaJlser une couleur, cllquez sur l'lcdne multleolore sttuee dans le coin superieur droit de cette premiere paiette. vous ouvrez alors la boTte de dialogue Couleurs. Faites-y Ies modifications qui s'lrnposent. A1ternativement, VOllS pouvez ehoisir Fenetre/MeIangeur de couleurs pour ouvrtr Ie panneau du merne nom. Ces deux methodes sent redondantes. Voiei comment uttltser Ie panneau Melangeur de couleurs represente Figure 3.13. 51 vous ne voyez pas la totallte du panneau, cliquez SUI sa f1l!ehe de developpement, dans l'angle lnferleur droit.

~~\1C 51 vous selectlonnez un objet avant d'utlllser Ie panneau Me.langeur de couleurs, la couleur de I'objet change des que vous en selectionnez une dans le Melangeur de ouleurs.

60 Deuxieme partie: 1000 images et 1000 mots _

Figure 3.13:

Utilisez Ie penneau Mblangeur de cuulsurs pour creer des couleurs ps rso on 81 j. sees.

Couleur de remplissage

Menu des oprions

Mode de couleur

Valeur de transparence (alpha)

LUminosite

Espac!! chrornatlque

Gerer des eouleurs

VOUS pouvez enreglstrer une palette a laquelle des couleurs ant ete aloutees au dans Jaquelle des couleurs ont (!!(! modltiees. Cette palette pourra ensulte etre utlUsee dans d'autres animations Flash. Les palettes de couleurs sont sauvegardees so us forme de Hchlers portant l'extenslon CLR, acronyrne de Flash Color Set (Jeu de couleurs Flash).

POUT importer une palette de couleurs, cholslssez Fenetre/NuanClers. Dans le menu sttue dans Ie coin superieur droit de la palette, cholslssez Alouter des couleurs. Cette action ajoute la palette importee Ii une palette exlstaate. Choislssez Enreglstrer les couleurs pour sauvegarder une palette sous forme d'un fichier Qui sera utillsabJe dans d'autres animations au programmes.

Vous pouvez utillser Ie menu du panneau Nuanciers pour gerer vos couleurs, Cholsissez parmi celles-cl :

"" Dupllquer Ie nuanerer : Cree une cople conforme du nuancter.

Choisissez cette option lorsque VOllS desirez creer votre nuancler personnel et un nuander existant.

"" Supprimer le financier: Supprime un nuancler,

"" Charge.r Ies couleurs par d~faut : Remplace la palette de couleurs active par la palette compatible Web de Flash.

"" Enreglstrer comme dHaut: Enreglstre la palette de couleurs active comme palette par d{,faut. C'est donc cette palette qui sera. utilisee pour to ute nouvelle anlmatlon Flash alnsl ereee,

""'Effacer les eouleurs : Supprime routes Ies couleurs a l'exceptlon du nair et du blanc. A utlllser lorsque vous souhaltez composer entlerement une nouvelle palette.

"" Web 216 : Charge la palette compatible Web de 216 couleurs, Y" Trier par coulenrs : Trie les couleurs ailichees par lumlnoslte,

____________ Chapitre 3 : Disposer de graphiques 6'

Figure 3,14: l.es degrades linliaires et radiaux rendentvos graphiques bien plus interessants queles eeulsurs unies,

Dei/fades de couleurs

VOUS ftes fatigue des couleurs unies et souhaltez plrnenter davantage vos ceuvres ? Les dtgrades representant une comblnalson de couleurs interessantes qui mlgrent graduellement d'une teinte a I'autre. Flash peut creer des degrades comportant [usqu'a 16 couleurs, Les degrades sont souvent utilises comme rempllssages. lis peuvent etre lineaires ou radiaux (concentrtques), comme Ie montre la F'lgure 3.14. Pulsque cette Illustration u'est pas en couleurs, II est difficile de mettre en valeur la vertu esthetlque des degrades.

Degrade radial

62 Deuxieme partie: 1 DOD images et 1 000 mots

---------------------

Flash propose des degrades standards que VOllS trouverez en bas de III palette de couleurs. Mals, dans bien des cas, VOllS serez amene 1I personnallser vos degrades, pour disposer d'un schema esthetlque repondant a une creatlvite dl!;bordante.

~uc Les degrades radiaux ont un meilleur rendu objets lncurves. Un cercle prend s.oud~nement I'aspec~ d'un: sphere ~uand on Ie remplit avec un degrade radial. Ce type de degrade donne J impression qu'un point lumlneux sort du centre de la sphere lorsqu'U est compose des

couieurs noire et blanche. De leur cote, les degrades llnealres sont plus adaptes aux objets rectillgnes.

Votct comment personnaliser un degrade:

1. Cbolslssez Fenetre/Melangeu:r de couleurs pour acceder au panneau du meme nom. Cboisissez ensuUe Degrade lineai:re ou Degrade radJaJ dans la Ilste des types de dl!grades.

La Figure 3.15 montre I'option Degrade linealre.

Figure 3.15:

Utilisez Ie penneau Aemplir pour creer votre propre degrad~.

Llste des types de degrades Plage de degrade

Valeur de transparence (alpha)

Espace chromatlque

Indlcateur de couleur

_----------- Chapitre 3 : Disposer de graphiQues 63

r@IlCSiVOUSS€lleCtiOnnezunrempliSSageavantd,exploiterlepanneau M~langeur de couleurs, la couleur de rempllssage de l'objet sera immMlatement mod.lfiee lorsque vous modltlerez Ie d~,rade dans Ie panneau Melangeur de couJeurs.

2. Pour utlliser un degrade existant COOUDe point de depart clJque.z sur l'ledne Couleur de re.mpUssage de la boRe a Quills. Dans la palette, selectionues un degrade sime dans Ie coin lnfeneur gauche.

VaLIs pouvez egalement actionner Fenetre/Nuanclers pour ouvrir Ie panneau Nuanclers et choistr un degrade dans la palette de couleurs,

3. Pour s¢ciDer la couleur dispensee par chaque lndlcateur formant Ie degrade, cllquez dessns: cette simple action selectioDoe 1'lndJcateur vise. n suml aJors de definlr Ia eouleur qo'il representera,

4. Pour modifier le nombre de eouleurs contenues dans un degrruie, BJootez ou 8upprimez des lndlcateurs,

Pour aJouter une couleur, II faut ajouter un lndlcateur de couleur, Cliquez sous la plage du degrade. a l'endrolt precis 00. vous souhaltez Ialre apparaltre l'Indlcateur, Pour supprlmer une couleur, illaut tout slmplement enlever J'indicateur qulla represente, Cllquez sur l'lndicateur superflu et faites-le gllsser vers Ie bas. Il accompagne Ie pointeur de la souris et dlsparait rapidement.

5. Pour enregistrer un degrade sptklfique, oeuvre gen1ale nee de votre ens artistique. diquez 8UJ' la Heche du menu situe dans Ie coin uperieur droit du panneau Melangeur de ceuleurs. Cboislssez l'optlon Ajouter un uuaneler,

Le nouveau degrade devient Irnmedlatement disponible dans la palette de couleurs de l'iedne Couleur de rempllssage et dans Ie panneau Nuanclers. Pulsqu'il est cree. n'hesltez pas une seconde a rempllr une forme avec.

Vous pouvez egalement deplacer le point central d'un degrad~, medlner sa largeur et sa hauteur, Ie falre pivoter, Ie redimenslonner, I'incllner et Ie repeter. Reportez-vous au Chapitre 4 pour plus de details sur la modlflcatlon des degrades.

6~ Deuxieme partie: 1 000 images at 1 000 mots _

Rgure 3.16:

Vaus pouvez ramplir n'importe Quelle forme svec un bitmap et 18 repeter II I'infini.

RemplissafJ.e bitmap

Vous pauvez creer des remplissages surprenants en Important une Image bitmap. Cette Image sera utUlsee pour remplir une forme. Dan notre site Web hypothetlque protestant centre les OGM (organismes genetlquement modifies), vous trouverez l'trnage d'un Insecte rernpllssant un epl de mals, La F1gure 3.16 montre Ie re.sultat obtenu.

VolcJ comment util!ser un graphlque bitmap dans une forme: 1. Creez l'objet ou la forme que VOU8 seuhaltez rempUr. 2_ Choisissez Acb1erflmporter.

La boTte de dialogue Importer apparru1:.

3. Dans eette boR de dialogue, chotstssez Ie bitmap 8. utlllser comme rempUssage.CUquez ensutte sur Ouvrlr.

Le bitmap envahit la scene,

Vous en saurez davantage sur I'importatlon d'image en fin de chapitre.

4. Cholslssez ModUicatJonjSeparer.

Flash divise Ie bitmap en une serie de zones de couleurs.

S. CUquez sur I'outll Pipette de la boRe a outlls.

6. Olquez sur Ie bitmapquJ se trouve sur Ia scene.

Vous notez que I'lcone Couleur derempllssage n'alllche plus une couleur, rnals une representation miniature de votre image.

(/errouiller un remplissafJ.e

_----------~ Chapitre 3 : Disposer de graphiques 65

Flash bascule automatiquement In Pip tte en Pot de pelnture pour remplir Immedletement un objet.

7. Cllquez StU I'objet A rempUr.

Flash remplit In forme avec Ie bitmap. SI ce bitmap est de petite taille, II se repete en mosaique dans In forme.

'l'IlC Plutot que d'ut.lIlSer l'outtl Pot de pemture, vous pouve. z mettre eo. eeuvre I'outll Plnceau et dessiner avec Ie bitmap. Une autre methode constste a supprtrner Ie bitmap qui II envahl la scene, puis a desslner une lorme dont la couleur de remplissage est Ie bitmap lrnporte, Ellet

garantll

Figure 3.17:

Una Image paul etre Bntierement retomposee en ramplis· sant plusieurs formes sUccessiv8s.

Flash dispose d'une fonctlon qui verroullle les remplissages bitmaps et les degrades. Un remplissage. uelTOuilte fonctionne comrne sl Ie rernpllssage se trouvalt derriere vos objets et que les objets De traltalent pas la totallte du rernpltssage, Resultat : st vous utLllsez Ie meme remphssage sur plusieurs objets, Flash verrouille la position du remplissage sur la totadte de la surface de dessln, plllt6t que de remplir Indivlduellement chaque objet. La Figure 3.17 montre ce que l'on obtient avec UIl remplissage verroullle. Sur cette figure, VOlLS observez des lenetres et des hublots rem plls avec un bitmap verrouUle representant un ctel nuageux, N'avez-vous pas i'impresslon que Ie clel se trouve derriere les fenetres ?

Pour verrouilier un rempl!ssage, chotslssez I'outll Plnceau ou Pol de pelnture. Dotez-Ie d'un degrade au dun rempllssage bitmap comrne ex:pllque dans les deux sections precedentes. Cllquea ensulte sur Ie mcdmcateur Verrouiller Ie remplissage. Commencez par pelndre OU

66 DUUlCieme partie: 1 000 images ell 000 mots _

vous desirez placer Ie centre du remplissage et poursulvez en remplissant d'autres zones.

Dessiner precisement

Figure 3.18 :

Alficher les r/)g195 aide II Is prlic isian de vas dessins; pour un contrOle plus pousss, utilisez coniointe· ment les reperes sur la scene.

511a preclston du dessin ne semble pas convalncante dans Flash, vous devez apprendre quelques fonctions qui VOilS donneront une grande dexterlte, D'autres programmes offrent des outils encore plus potntus, mats Flash pass Me certalnement les outils dont vous avez besoln,

La precision se gagne avec les r~gles que vous afflchez via Alfichage/ Regles. Elles prennent place en haut et a gauche de la scene, comrne Ie montre la Figure 3.18.

~c Pour disposer d'un espace plus important lars de la realisation de vo desslns, masquez le scenario. II sufflt de cholslr Affichage/Scenarlo. Pour Ie Iaire de nouveau apparaltre, recommencez cette operation.

Par defaut, l'unlte de mesure de la regie est Ie pixel. Les ecrans inlormatiques sont mesures en lonctlon du nombre de pixels qu'lls aifichent horizontalernent et verticalement. Les pixels sent utiles dans la conception des sites Web. En ellet, les navlgateurs utillsen! uniquement cette unite de mesure, Un pixel, cepeudant, n'a pas une taille physlquement Immuable. Elle depend de ta resolution d'ailichage et

____________ Chapitre 3: Disposer de graphiques 67

des parametres de votre ecran, Habitue au sys erne rnetrlque, vous pen ez en entlmetras et en mtlllmetres ... Comment vow en voulolr !

Va us pouvez deflnlr l'unlte de mesure des regles. Cholslssez Modlncatlon/Document. Dans la bolte de dialogue Propri4!!tes du document, cliquez sur la lisle Unites de la regIe. Choislssez-y une unite de mesure parmi Pixels, Pouces, Pouces (dectrnal), Points, Centimetres et Mllllmi:ltres, puis cllquez sur OK.

Quand la regie est afficMe, des llgnes apparatssent en haut et A gauche de la scene. Des que vous deplacez un objet, deux traits verticaux apparalssent sur la r~gle superieure, et deux traits horlzontaux sur la regle de gauche. Ces traits suivent Ie mouvement lmpnme a I'objet. Ces deux "reperes" permettent de pcsltlonner preclsement un objet. II en va de meme lorsque vous desslnez un objet. Chaque deplacement de la souris est accornpagne d'un trait sur la regie du haut et d'un trait sur 18 regle de gauche. En regardant les traits vous savez sl votre objet se trouve dans les Umltes de l'espace detini par la scene.

Ut;/iset' des iJuides

Les guides sont une nouvelle fcnctlon de Flash 5. [Is vous ardent II mettre en page la scene, c'est-a-dlre a disposer les eJem.ents avec une grande precision. Les guides, que l'on peut voir plus haut sur la

Figure 3.18, sont des lignes horlzontales et verticales que VOliS pouvez utUiser comme assistant avos travaux graphiques. Ne vous lnquietez pas. Meme s'lls sont vlsibles, les guides ne seront [arnals exportes avec votre animation. Pour utliiser les guides, vous devez les afficher via Aff!chage/Guldes/Accrocher 8UX guides. Cette simple action active la !onction attenante aux guides, mats vous ne voyez encore rten concreternent.

Pour aUicher les guides, vous devez les Ialre gllsser depuis les regles, Placez Ie pointeur de la souris sur une des regles, Malntenez Ie bouton enfonce et taites gUsser la souris vers la scene. Vous laites apparaltre un guide qui prend place a l'endrolt exact oil vous relachez le bouton de la souris.

Pour personnallser les guides, cholsissez Affichage/Guides/Modifier les guides. La bone de dialogue Guides apparait. Vous y definlssez la couleur des glides. la precision de l'accrochage, l'afftchage, l'accrochage et Ie verrouillage. Enlln, c'est dans cette boTte de dialogue que vous pouvez effacer tous les guJdes presents sur la scene. En revanche, pour ne supprimer qu'un seul guide, ·faltes-Ie gUsser vers la regie horizon tale ou verticale. Des que veus reUkhez Ie bouton de la souris,

68 Deuxieme partie; l' 000 :imageset 1 000 mots _

Ie guIde dtsparait, POLII verroulller les guIdes, U suttlt de choislr AffichagejGuldes/Verroulller les guides.

Tratlaitter atlec fa 9riUe

llest possible d'afficher une grlUe sur la scene pour vous aider a desslner avec une plus grande precision. La grille n'est IIJ. que pour vous aider I'll n'apparait jamllis quand l'anlrnatlon est lmprlmee au publlee sur un site Web. La grille n'obllge pas vos objets a s'ajuster sut elle. llnllsez-Ia quand vows avez besoin d'un guide vlsuel pour redlmenslonner, deplacer et disposer vas objets sur In scene.

Pour alflcher la grllle, cholslssez AfUchage/Gr!lle/Afficher In grille.

Uti 1.1 s ez cette rneme commende af:ln de masquer la grille. Vous pouvez parametrer les canes formant la grille. Pour cela,cholslssez Aflichage! Grllle/Modlller la gMlJe ; vous accedez a la bolte de dialogue Grille. Vaus pouvezegalement modifier la couleur des llgnes de la grille,

Modlilez I'unltt': de mesure utlllsee par la grille via Modlfication/ Document. Dam; la boite de dialogue Proprletes du document, chclsissez l'unite de rnesure de la regie. Cliquez ensutte sur OK.

Accrocher

Lorsque vous dt':sirez pousser 11.1. precision a son maximum, activez Ia [onctlonaccrocher. Accrocherindlque a. Plash que les objets dolvent se placer a des Intersections de la grille ou se coller a d'autres objets. Dans certafns programmes, on appelle cette fonction magnetisme.

Pour actlver l'accrochage, it sufflt de cllquer sur l'lcfme cl-contre dell Options de !a boite a outlis. Une autre methode conslste it cholsir Afflchage/GrllJe/Accrocher a la grille. Vous utillserez une deces delD!: methodes pour desactiver l'accrochage,

Avec l'accroehage, votre curseur est attire par les points de la grJlle et par les objets existents. L'accrochage est tres utile en phase de creation et de modification d'un objet. Plash indlq ue que vous: lravaillez dans ce mode enajoutant un petit cercle noir a 11.1. base des objets deplaces, erMs au modifies.

Del;n;r lesprefereHces J'accroc"age a fa grille L'accrochage aux points d'une grille se lart de plusteurs manleres, Destrez-vous que 11.1. lIn d'une IIgne s'ajuste systematlquement, ou

_---------- Chapitre 3 : Disposer degraphiques 69

SI Ia grille n'est pas assez precise, vous pouvez malntenant accrocher aux pixels. Cholslssez Afl:ichagej Accrocher aux pixels pour vallder au lnhlberce type d'accrochage. Lorsque Acerocher aux pixels est actlf, Flash afflche automatlquement la grille pixel quand vous zoomezen avant a 400 % au plus. TOllS les objets crees au deplac.es s'accrochent

~\)C ii. [a grUle pixel.

Lorsque Accrocher aux pixels est actll, vous poevez appuyer sur Ja

. touche C pour desactlver temporairement l'accrechage pixel. Valis ..

- dlsposez aussl de la touche X pour rnasquer temporairement la grme.

seulement quand elle se trouve a proxJmite d'un point de la !lriJIe ou d'un objet exIstant ? LespnHl!rences se defin!ssenl via Affichage/ GrlUe/Modlf!er la grl11e. II su!Jit alors de derouler la liste Precision de I'accrochage pour acceder aux dlverses options.

Defin;r tes pre(ereHcesJ'accroc"age au~objets Comme l'accroehage s'appllque ausst blenaux objets qu'a la grUle, vous pouvez indlquer a Flash commentgerer l'accrochage aux objets. Cholsissez Edmon/Preferences. Dans ta bolte de dialogue qui s'ouvre, cllquez sur l'onglet Modlflcatlon. Dans la section Parametres de dessln, cJiquez sur la llste Jolndre les Ugnes. Choisissez Dolt eIre proche, Normal ou Peut etre distant. Bien que Flash appelle csla Jotndre les !ignes, ce parametre aflecte les rectangles et les ovales, mals aussl les lignes creees avec les outils Ugne et Plume.

Ce reglage auecte aussl la maniere dont Flash identifle les llgnes vertlcales et horlzontales. Par exemple, l'optlon Peutetre distant ajuste des angles bien plus I III po rtants que I'option Dolt etre proche. Je veux dire iei qu'une .ligne !ncitnee vertlcalement, par exemple, deviendra vertlcalernent droite (idem pour une lIgne horlzontale). Tout cela correspond 11. la senslbilite qu'a Plash a decider que teUe Imperfection doll etre corrlgee,

AccrochtuJ.e aUK pixels

AlilJnerdesob;ets

Plash loumlt des outlls pour aligner scrupuleusement plusleurs objets verticalement au horizontaiement avec unespacement d'une precision suisse. L'aJignement d'obtets parfaltement espaces donne une allure resolument pro/esslonnelJe a vas animations Flash.

70 Deuxieme partie: 1 000 imag.as et 1000 mots _

Figure 3.19:

Utilisaz Ie panneau Aligner pour di sp use r ves objets avec un e pr~ c ision dlgne des plus grands siles professic nnels.

Pour bien orgaatser voscbjets, selecttonnez-les, puls chotstssee Fenetre/AlJgner. VOliS ouvrez Ie panneau represent~ sur la Figure 3.19.

A.~pamtl.on regull~re des objels par rapport aux bards Align" lesobjets hcrlzontalernent

Aligne les objets verticalamenr

AlIgn~rlr~partlr vers J~ scene E.s pace ro!g:u II~ rem ent I as objets

ve rtl ca I ement at h orlzomalement

AJU5t~ la lallie par la la'geur, 1.1 hauteur, ou les deux

Cholstssez une option dans Je panneau, pour aligner ou dlstrtbuer les objets. Vous pouvez ~galiser les dimensions d'objets avec les boutons Aluster la tallle. Experlmentez les diverses options jusqu'li obtenlr les resultats destres,

~,))t Pour centrer par!aitement un objet sur la scene, selectionnez-Ie et

, ChOjSiS~,ez Fen~t.re/A!lgner, Cll,qUeZ SU, de. bouton,ve,rs la scene. Da,ns les sections Aligner hortzontalement et AlIgner verucalement Qdentiflees par des lcones), cllquez sur les boutons qui allgnent les objets par rapport a leur centre. Flash centre les objets sur la scene. Une

methode plus replde conslste iI couper et a colter I 'objet. En effet, dans ce cas, Flash colle automatlquement les ohjets au centre de I 'afIich age , c'est-a-dlre au centre de la scene s·[ VOllS ne l'avez pas deplac~e verticalement au borfzcntalemenr.

Importer .. f'affaire des imaqe« extemes

Peut-etre Ialtes-vous partie de cas "fatneants" ou de ces personnes sans grand talent artlstique qui. ont vralment besoin d'alde pour concevalr un site dl.gne de ce nom. Dans cecas, au lleu de creer vos propres images, que ce sott dans Flash au dans un autre programme,

_----------- Chapine3 : Disposer degraphiques 71

uttllsez las travaux des autres, Flash est en ellet capable d'importer des flchiers graphiques bitmaps et vectorlels,

~(j)'),I: .. U I!,~,'!'\r LorsqU,e v. oUS utll,' lsez les Illuvr, es d'una autre pe, r, sonne, ,SouC.i.ez-vous

: 111.1 des drotts d'utlllsatlon. On parle de eopynght.Il exlste uncertaIn

II' nombre d'images dlspoolbles sur Ie Web qui peuveot etre utntsees a

- des fins personnelles mals en aucuncas commerctales. Toute personne contrevenanta cette regle s'expose a des poursultes [udtclatres. Idem pour les graphtques qul cornposent un site. Ces oeuvres ariginaIes sont protegees.; et en France, I. 'artiste dispose d'une protection poussee, Utlllser tout au partie d'une lrnage dent vous n'etes pas l'auteur peut en trainer de nombreux problemas. Demandez toulours a l'auteur de ]'ceuvre une autorlsation ecrlte avant d'lnclure l'image dans votre sIte. Ou vous obttendrez une autorlsation gratulte dans un cadre restr!ctif, ou une autorlsatton payante, ou encore VOllS essulerez un refus, Ne [ouez pas au plus malin en outrepassant la legislation protegeant les oeuvres des artistes.

Importer des imaqe«

Veicl comment importer des images :

1. Cholslssez Pkblerj1mponer.,

La bone de dialogue Importer apparrul:.

2. Dans Ja bolte de dialogue, locallsez Ie fichierconvoite. 3, CUquez sur Ouvrtr pour utUlse:r I'lmage,

Le /Jchler apparait sur Ia scene. S'II s'agit d'une Image bitmap, elle est automattquement in.tegree ala bibltotheque.

Une fonction tres interessante de Flash est Ja possihlllte d'identlfier des sequences d'images et de lesimporteren tant que telres. Slle ftch.ier [mage trnporte se termine par un numero et .qu'!! est suivt d'autres flchiers numerotes dans son dossier de stockage, Flash demande sl vous destrez lmporter la sequence de flchiers .. Dans l'alflrmative.ctlquez SUI Oul. Flash importe, sur le calque actif, Ies Images sous forme de trames successtves. Elles serviront d'anlmatlon de base. Le Chapltre 9 donne des informations complementalres sur les trarnes et les animations.

Vous pouvez simplement copier et collerles Images, Dans l'appllcatlon qui a. perrnis de creer une Image, COpi~z-la dans te presse-paplers. Ensulte, ouvrez Flash et cholslssez Edition/Colier.

72 Deuxieme partie: 1 000 images et 1 000 mots _

Utiliser des images importees

l.es graphiques vectonels lrnportes sont conslderes comme un objet groupe. Il s'utlllse done comme n'lrnporte quel autre objet de Flash. Le format WMF, un lormat vectorlel Windows, s'lmporte de la merne rnanlere, Ces formats fonctionnent partlcullerernent bien quand lis sont lmportes dans Flash. Vous trouverez des images WMF dans des collections de cllparts et sur Ie Web.

Vous pouvez importer du texte depuis un editeur de texte. Flash Ie convertlt en un objet textuel que vous pouvez modifier et mettre en forme d1rectement dans Flash. Reportez-vous au Chapltre 5 pour en savolr davantage sur le texte at les types d'objets.

Lorsque vous importez une image bitmap, vous devez respecter certaines cons ignes avant de les utlliser dans votre Behler Flash:

Y' Supprlmez l'an1ere-plan : Dans 101 majorlte des cas, Flash n'lrnporte pas unlquement la forme que vous destrez, maJs Russi l'arrlere-plan rectangulalre que vous ne deslrez pas Inclure dans l'anlmetlon. Pour l'eUmlner, deselectlonnez I'objet importe, puls selectionnez unlquernent Ie rectangle composant l'arrtere-plan, Appuyez sur la touche Suppr au Del de votre clavier. Si cette methode ne fonctionne pas, llsez ce qui suit.

Y' Dissodez I'lmage : Cette action conduit a separer les el.ements groupes, lis deviennent des eh~ments indlvlduels. Dissoder se fait en cholsissant la commande du meme nom dans Ie menu ModHicatlon:. 51 malgre la dissociation vous ne pouvez toulours pas travailler avec votre image, llsez ce qui SUit.

,..., 5eparer I'image : Cette action dlssocle les elements modifiables.

eparer est tres utile pour alleger Ill. tallle d'un (tchier. Cette commande convertlt les bitmaps en rernpllssages, Ie texte en lettres et contours et coupe Ie lien exlstant entre un objet de type OLE et son application source, En d'autres termes, la commande eparer est tres putssante. Selectionnez l'lmage, puis cholslssez Modllic.atlon/Separer.

~ Tracer bitmap: Flash peut travailler cornme un magiclen. Si vous deslrez un controle total, converttssez uo bitmap en image vectorielle.

Pour tracer un bitmap, sulvez ces etapes :

1. Impcrtez le bitmap - ne la desefectionnez p« ou n 'executez QUCUTIe action deesus.

_----------- Chapitre 3 : Disposof de graphiques 73

2. Cbol.8lssez l\1odJfier(rracer bitmap

La boite de dialogue Tracer bitmap apparalt.

3. Dans le cbamp SeuiJ de couleur, saillssez unchlftre.

Plus Ill. valeur est elevee, molns II y aura de couleurs dans Ie Ilchler vectoriel Ilnal, Pour un resultat proche de I'image que vous avez, essayez Ill. valeur 10.

4. D8D8 Ie champ Zone minimum saisis&ez nne valeur qui represente Ie nombre de pixels prts en consideration par Flash quand U W18lgne une couJeur i'l un pixel.

Pour une plus grande [Idelite, essayez III valeur 1.

5. DIlIl8 18 lisle Aspect des courbes, cboisissez nne option detennlnant 18 manlere dont Flasb va desslner les centours,

Pour un resultat precls, choislssez Pixel.

6. Dans la lisle Seull d'angle, choisissez une option detenninant 18 manlere dont Plash reprodulra les COlltOUl"8 vI.fs.

Pour une meilleure definition des contours. cholslssez Angles nornbreux.

7. Qlquez sur OK pour fenner la boi1e de dialogue Tracer

bitmap, puis deseiectionnez I'lmage pour apprecier Ie resoltal.

Lorsque vous Importez une image bitmap, Flash place Ie graphique dans la blbliotheque de I'animatlon en cours. Pour de mellleurs n!sultats, ne supprlmez pas ltrnage origlnale de la btbtlotheque, rneme 51 vous l'avez modtftee, flash continue a se reMrer au graphtque apres l'avolr convertl en symbole. (Le Chapitre 2 presente la blbltctheque en detail. Le Chapltre 7 est Incontournable pour une comprehension poussee des symboles.)

Sl VOllS travaillez sous Windows. vous pouvez coller une image dans Flash en tant qu'ohjet lncorpore, Pour Miler I'objet, doubJe-cllquez dessus, 11 s'ouvre alors dans l'appllcatton OU iI a etl! cree. UtLIlsez cette lots les outlls de l'appilcatlon en question.

Pour incorporer un objet. conformez-vous aux etapes suivantes : 1, Dans l'appllcation90urce qui a perm1s decreer I 'objet, st'Hectiolloez I'lmage pui8 hoisissez Edltlon/Copler.

2. Fermez l'appiJcation et ouvrez Flash.

3. Chols1ssez EdItion/Collage speda1.

74 Deuxii,me partie: 1 000 images at 1 000 mots _

La boTte de dialogue Collage sptklal s'ouvre,

4. Dansla boite de dialogue, slilectionDez Ie type d'objet i\ Incorpt)rer,.'!Ii un cholK veus e8t propose.

5. Acthrez l'opUon Coller lien 81 VOU8 dblrez qn'un llen solt conserve avec Ie fiewer d'orlglne. Mnsl, flash actuallsera Ie grapb1quechaque foisqu'iJ subtra des modifications· dans l'appUcatJoo source.

S. CUquezsur OK pour fermer Ia boite de dialogue Collage

speclal et alDsl vallder vas cholx.

Que vous creiez vos graphtques dans Flash au que vous les y lmportiez, vous devrez les modifier. Le Chapitre 'I expJique en detail la mod1flcatlon des objets.

Chapitr,e4 Vousetes Ilediteur d'ebjets

. .

•

• • •

•••

Dans ee cnapitre ; 5electionner des objets.

ManipuJer des objets (deplacer. copier et supprimer). Modllier des lormes.

Travailler avec des rempllssages. Transferer des proprletes 1I d'autres objets ..

Utiliser la commande Transformer (redlmenslonner, pivoter, incliner et retaumer).

Grouper et dlssccter, Separer des objets.

Changer l'ordre des objets.

• • • •

C:e chapttre vous dlt tout Col qu'll faut savotr sur ta modification _ des objets. Vous pouvez manlpuJer des objets de multiples

manl eres pour sattstalre votre fantalsie ar;tlslique. Las outlls d'edltlon de Flash permettent toulours d'obtenlr Ie rssultat recherche. Les lonctlons les plus comrnunement utlllsees donnent des combes Ilssees, des bords adoucis et d'mteressants rempllssages d'objets.

Selectionner des objets

Tout objet dolt etre selectlorme pour etre modlfle. Plusieurs methodes sent a votre disposition. Des que vous maTtrlserez les outUs de selection de Flash, II deviendra Impossible de vous en passer.

76 Deuxieme partie; 1 000 ima!les at 1 000 mots _

Figure4.1: 0

Vous crhz

un9l0ne de

:~~cCi:~~, 0

Fll1che pour

selectionner 0

rapidement la <>

mtalite d'un

ou plusieurs ~I:J

objets.

Selectionner euee l'outi! Selection

Pour selectlonner W1 objet, cliquez dessus avec I'outll Pleche. C'est un outll de selection traditionnel. SI VOllS n'en avez [arnals utilise, poursulvez la lecture de cette section.

Pour operer une bonne selection, II/aut comprendre la notion d'objet. SI vous desslnez une forme dtsposent d'un contour (une ligne all un trail c'est la rneme chose) et d'un rempllssage, vous dlsposez de deux objets - le contour et Ie remplissage. Votcl comment les selectJonner :

".. SI I'objet ne possede pas de contours mats n'est fa1t que d'un remplissage, la selection est on ne peut plus simple. Cliquez l'objet avec I'outll Fleche, Ca y est ! II est selectionne I

".. SI l'objet est fait d'un contour et d'un remplissage, ctiquez sur Ie rempllssage pour le selectionner. Le contour reste deselecttonne, VOliS pouvez utlllser cette fonctlon pour elolgner Ie rempllssage du contour. Afin de selectlonner les deux objets (rempllssage et contour), double-cliquez SUT l'oblet,

I'" Vous pouvez egalemellt utlllser ['outil Fleche pour creer une zone de selection. II sumt de rnalntenlr enfonce Ie bouton de Ia souris dans un des cams de l'objet (sans toucher I'objet), et de tracer un rectangle (Qui disparaitra des que vous rel1icherez Ie bouton de la souris) en gllssant Ie pointeur dans le coin oppose. Velllez Ii ce que ce rectangle englobe la totallte de votre objet, comme Ie montre la Figure 4.1.

Chapitre 4 : Vous etes I'editeur d'objets 77

------------------------

".. Pour selecttonner une ligne, cllquez dessus avec I'outll Fleche.

Dans Flash, II est tres difflcile de savolr quand un trace ne forme qu'un seul objet, comme sur la Figure 4.1. Par mesure de securlte, [e vous invite a double-cllquer sur une des Ugnes ou II tracer un cadre de selection. VOllS etes alors certain de selectionner la totallta des traits formant un objet.

I'" Pour selectlonner plusteurs objets separes, malntenez la touche Mal enloncee et selectlonnez les objets auppletnentalres. Lersque vous appuyez sur la touche Mal, vous ajoutez de nouveaux objets a la selection ex1stante.

Pour deselectJormer tes ohjets, cllquez SUI une partie vide de la scene.

f@}~C Vous tites tellement excite par les outils de desslns que VOllS avez oublie de c1iquer sur la Fleche avant de selectlonner un objet? Resultat, VOllS venez de dessiner sur un objet. Utlllsez lrnmedlatement Edition/AnnuJer. Vous annulez aiors votre coup de pinceau malheureux et pouvez selectlonner I'outil Fleche de deux manleres :

I'" Appuyez sur la touche V pour acttver l'outll Fleche.

", Basculez remporatrement vers I'outil F'Ieche en malntenant enloncee la touche Ctrl (Windows) au fJ@ (Mac) pendant que vous effectuez la selection.

Jouer du lasso

Vous POUVe2 prendre vos objets au lasso pour l§vlter qu'lls s'echappent. L'outil Lasso cree une selection personnallsee. Grace i lui, vous pouvez selecttonner certains objets en lalssant les a!itres ltbres.

Pour salslr vas objets, cliquez d'abord sur l'lcone de I'outil Lasso de III boite it outils.

POUf operer une selection II rnaln levee, verlfjez que Ie rnodutcateur Mode Polygone n'est pas selectionne. Cliquez n'lmporte ou sur la scene et desslnez auteur des objets it selecttonner, Plash cree un cadre de selection tout 11 fait personnel. ~eliicher Ie bouton de la souris fermele cadre de selection au point precis au vous l'aviez commence, comme l'lllustre la Figure 4.2.

POUT les debutants, la selection au lasso a maln levee n'est pas chose lacile it realiser. Dans ce cas, actlvez Ie modilicateur Mode Polygone. La selectlon se lera sous forme de segments de drotte comme l'expllquem les etapes sulvantes :

78 Deuxieme partie: 1 ODD images at 1 000 mots _

Figure 4,2:

Le lasso ~ main levee pour dlectJonner plusieurs objets.

1. Cliquez pOOT selectionner l'outi1 Lasso,

2. Cliquez sur Ie modlficaleur Mode Polygone.

3. Cllquez ou vons dealrez que commence cette selection polygon ale.

4. Cllquez Ii I'endrolt au dolt se term1net la premiere Ligne du polygone.

5. Cootinuez ii deplacer 18 souris et a cllquer pour former lea autres segmenls de drolte du polygone.

6. Double-ellquez pour fermer Ie polygone et entbioer 18

selection.

Le lasso de type polygonal semble plus complexe a utlllser, mars iI est plus facile a contr61er car vous n'avez pas a deplacer contlnuellement la souris pour desstner la selection.

Tout selectionner enune seule action

Flash met a votrs disposition des raccourcis pour tout selecnonner au tout deselectlonner en one seule operation:

~ Pour tout selectlonner, appuyez sur Ctrl+A (WIndows) ou K+A (Mac). Une autre methode consists a uttllser Edition{rout selectlonner,

jill' Tout selectlonner selectlonne taus les objets des calques it J'exceptlon d'objets qui se trouvent sur des calques caches au verroullles,

~ Pour selectlonner tout ce qui se trouve sur un calque, cllquez sur Ie nom de ce dernier.

_ Chapitre 4 : Vous eles I'editeur d'obiets 79

Se deplacer sur la scene et en dehors

~ Pour tout deselecttonner, appuyez sur Ctrl+Maj A (Windows) ou K+Maj+A (Mac), Vous pouvez aussl cholslr Edltion{fout deselecttonner, Ces raccourcls sont facHes iI. memortser. Tout deselectlonner deselectJonne tous les objets de tous les calques.

jill' Pour verrouiller un groupe ou un symbole de maniere qu'i1 ne pulsse pas etre selectionn€! au modlfie, selectionnez Ie groupe ou le symbole e! cholslssez ModiflcaUon!Reorganisatlon/ Verrouiller. Pour deverroutller un groupe ou un symbole, chotstssez Modifieatlon/R&lrganlsatlon(Tout deverrou Iller. (Reportez-vous ~ la section "Regrouper", plus loin dans ce chapttre, pour en savoir davantage sur les groupes Le Chapltre 7 dlt tout sur les symboles.)

Deptacetj copier et supprimer

Les modlllcatlons les plus communes que vous faites sur les objets sent Ie deplacement, la copie et la suppression. Ces taches sont relatrvement bien rnaltrlsees par tous ceux qui ont I'habltude des !ogiciels d'edJtion graphlque. Cependant, Flash propose quelques petites astuces,

Tout deplacement est precede d'une selection. Une fols Ie au les objets selectionnes, piacez Ie pointeur de la souris dessus [usqu'a ce qu'une leone composee de quatre neches apparaisse ~ la base du polnteur, A cet Instant, malntenez entonce le bouton de la souris et deplacez ce petit rongeur dans la direction au vous souhattez placer l'objet. Pour contraindre un deplacement par pas angulahe de 45°, maintenezla touche Mal enfoncee.

Pour plus de preciston dans la disposition des objets deplaces, utllisez la grille et acttvez la fonctlon d'accrochage. Le Chapltre 3 VOllS donne toutes les indications necesselres a. ce propos. Vous pouvez egaleIDent utillser cette technIque pour deplacer et copier des objets. Par exernple, vous pouvez attacher UIl objet it un autre en depJa~ant Ie premier objet [usqu'a ce qu'iI se colle au second, en utilisant Ie petit cercle nolr ornme guide,

Vous pouvez utllJser les neches du pave directlonnel de votre clavier alln de de placer un objet selectlonne, Chaque pression opere un deplacernent d'un pixel dans la direction lndiquee par la neche. Malntenez la touche Mal entoncee pour effectuer un deplacement de hult pixels.

80 Deuxieme partie: 1 ODD images et tODD mots _

Deplacer aflec Ie presse·pap;ers

Vous pouvez deplacer un objet en Ie coupant. Couper un objet Ie place dans Ie presse-papters. Il suffit alOTS d'utlliser la commande Coller pour Ie faire apparaRre sur un autre calque, une autre scene ou dans un autre flchler, volre une autre applicatIon. Une tols le OU les objets selectlonnes, chotstssez Edition/Couper. A1temativement, appuyez sur Ctrl-X (WIndows) ou M:+X (Mac). Selectloonez un autre calque ou une autre scene, au bien ouwez un autre flch1er et faJtes ce qui suit:

"* Pour coller la selection au centre de I'affichage, choislssez £dltion/Coller au appuyez sur Ctrl+V (WIndows) ou M:+V (Mac).

"* Pour coiler Ia selection a la rnerne position SUI la scene, chotstssez Edition/Coller en place.

Depiacer aaec l'inspeeteur PropritUes

51 vous voulez placer preclsement des objets, utlllsez I'inspec eur Proprletes. Apres selection d'un ou plusleurs objets, actionnez f'ene.tre!proprletes puis cllquez sur la neche de developpement! reduction pour afftcher le panneau dans sa version etendue (Figure4.3).

FigUf1l4.3 :

Placaz des

1i5:"""...... I " .. r -.11 1 ~

objets I~ ....... "~

precisemen~ , r:;:-'I , FU

au piKel pres ,F' ,('Or.', ..Il

51 necss- I:-,;;..,c=-...:.:.s;:;;... ...

sairn.

Speciliez I'emplacement dans les cases de saisle X et Y. Le parametre X specifie la distance horizontale ; le parametre Y speclfle la distance vertlcale.

Deplacer aseo le panneau Info

Vous pouvez egalement utiliser Ie panneau Info pour specifier les postttons et Y des objets, Actlonnez Fenetre/ln1o pour ouvrtr Ie panneau (FIgure 4.4). Ce panneau loumlt un autre nlveau de controls : vous disposez de la grnle a cote des cases de salsle X et Y pour

mesurer a partir de I'angle superieur gauche ou du centre de La selection, cltquez dans la grille sur Ie point de reference desire. Flash utilise les unites specltJees dans la fenetre de dialogue Propnetes du document. (POUl des informations sur Ie reglage des unttes dans la fenetre de dialogue Proprtetes du document,voyez la section du Chapltre B abordant Ie dessln de prectslon.)

___________ Chapitre 4 : Vous etes 1'6diteur d'objets 81

~~IONI

~(l)I<. N'oubllez jamals que deplacer un objet sur un objet existant Ie

'l" _..... fusionne (si les objets soot de la meme couleur) au le coupe (s'ils sont

• de couleurs dIJJerentes).

Figure 4.4:

Utilisezle panneeu Info pour placer des objets avec une grando precision qui atteint Ie pixel.

+ ~,iS7.o y ISO,('!

A·_ .... v· B,·

A"

Copier des objets

Apres avolr passe beaucoup de temps a creer des graphlques pertlnertts, VOUS souhalterez peut-etre les copier 11. divers endrolts de votre animation. La methode la plus simple est de les dupltquer par un deplacement Seleetlonnez I'objet et appuyez sur Ctrl (Windows) ou Option (Mac) pendant Ie deplacement. Flash cree tine cople qu'iJ deplace en merne temps que vous bougez votre sourls.

Vous pouvez egalement copier des objets dans le presse-papiers. Selectlonnez un ou plus!eurs objets et cholslssez Edition/Copier ou appuyez sur CtrltC (WIndows) ou X+C (Mac). Vous pouvez coller l'oblet selectionne sur Ie meme calque ou Ie placer sur un autre calque. une autre scene au un autre flchter, en utlllsant I'une de ces techniques:

", Pour coller I'objet selectlonne au centre de I'aiflchage. cholslssez EdItion/Coller Oll appuyez sur Ctrl-V (WIndows) ou K+V(Mac),

82 Deuxieme partie: 1 000 images at 1 000 mots _

~ Pour coder J'objet seJectlonne au meme endrolt que l'objet dupllque, cnotstssez Edition/Coller en place. SI vaus €ites sur Ie meme calque, la meme scene et Ie meme Ilchler, vous aurez deux copies parfaitement superposees l'une sur I'autre. Le nouvel objet etant selectlonne, vous pouvez lrrtmedlatement Ie deplaeer a l'endrolt souhalte,

i-\lC Comme Flash colle, de puis Je presse-paplers, les objets au centre de l'afficbage, VOliS dlsposez d'une technique geniale pour centrer les objets ernplles. Par exernple, sl vous deslrez creer deux cercles l'un sur l'autre, iI sufflt de les dessiner a des emplacements differents.

Commencez par couper et colier Ie plus grand cercle, puis Je plus petit. Va us avez alors deux cercles parlaitement concentriques, que vous pouvez deplaeer au vous Ie souhaitez.

~"'IONI

t:f.1iJ~I~ Lorsque vous .collez un nouvel objet, assurez-vous de bien le Placer. s. 'il o:r 6" Louvre un objet exlstant sur Ie merne calque. SI vous deselectlonnez Ie

• nouvel objet, soit it fusionne avec I'objet exlstant (s'll est de la meme couleur), so it ll le decoupe (s'll est de couleur diff~rente). Bien sOr, U peut s'agtr d'un acte volontalre de votre part. Reportez-vous Ala section qui tralte de ces posstbilltes au Chapitre 3.

Faites-les disparaitre

nest tres facile de laire d!sparaitre des objets. SeJectionnez-les et appuyez sur la touche Suppr au Retour arrtere (Windows) ou Del ou Clear (Mac).

Creer des formes plus precises

Vous avez cree un objet qul, malheureusernent, ne ressemble pas exactement 1I ce que vous attendJez. De petites modlflcations s'lrnposent. Flash dispose de plusleurs techniques pour vous aider it obtenir l'eeuvre partalte.

Modifier les formeset les contours

L'outll Fleche ne sert pas qu'a selectienner des objets, 1I perrnet egalement de les remodeler. Pour remodeler avec l'outf Fleche, vous ne seleenonnez pas I'objet.

Pour modifier la lorme d'un contour ou d'un rempllssage, cholstssez l'outf Fleche et placez le pointeur de la souris sur l'objet :

Y' Si VOllS apercevez un angle a cote du polnteur, vous pouvez deplacer, allonger ou raccourctr un point de termlnalson, comme Ie montre la Figure 4,5.

Y' Sf vous apercevez une courbe a cote dll potnteur. vous pouvez modifier la forme de la courbe, comme l'I11ustre la Figure 4.6.

_____ ------ Chapitre 4 : Vous etes I'editeur d'obiets 83

figure 4.5:

Utilisez I'outil Flilche sur las points de lerminaison pour les deplacer, les allonger ou las raccourelr,

Figure 4.6:

Utilisez I'outil Rache sur des courbes pour en modifier la lorme.

Malntenant, cllquez et laites gllsser la forme dans la direction souhaltee. Flash affiche temporairement une ligne noire pour donner un apercu du resultat obtenu quand vous reUicherez Ie bouton de 1a souris. 5i votre doigt echappe a une maltrlse [usqu'alors legendalre, et Que la forme resultante ne VOllS satls!ait pas, appuyez lmmedlaternent, et sans plus attendre, sur Ctrl+Z (WIndows). au SC+Z (Mac) - et recommencez.

Les modifications sont generalement plus simples torsque vous utilisez Ie zoom. Essayez un zoom a 200 au 400 %.

84 Deuxieme partie :10DDimageset 1 ODD mots _

Utiliser ('outil Sous .. selectionner

Vous pouvez utlliser l'outll Sons-selecrlonner pour redesslner la forme d'une lIgne ou d'un remptlssage qui a ete cree avec I'outll Crayon, Plume, Plnceau, Lrgne, Ovale ou Rectangle. Lorsque vous employez l'outil Sous-selecttonner, vous deplacez les po(nls d'oncrage qui

apparalssent sur I'objet. Pour utillser Sous-selectlonner, conformezvous aux etapes sulvaates :

l. Cholslssez routil So~lecHonner (la Heche blanche de 18 boile a outlls).

2. CUquez sur Iettrut (Ugne) au Ie remplliisage pour creer des polnl8 d'aocrage.

3. Faites gll88er 11*1 polnl8 pour modifier 18 fonne de I'objet.

4. Pour alterer 1.11 direction de la cour:be, diquez sur n'lmparte quel point. VoW! afficbez ala", des langentes, doni veus devez faire gl1sser les poignees (aw: extremUes de La tangente).

Les tangentes lndlquent la dlrectlon de la courbe, Reportez-vous ala section du Chapttre 3 censacree au traeage des courbesavec l'outll Plume pour rnleux apprehender la manipulation des points d'ancrage.

~. ~C . 51 vous cliquez sur un graphique avec l'outll 50us-se!ectIQnner e! -

qu'aucun point ne s'afflche sur ses bards, c'est que VOIlS avez certalnement groupe I'objet comme expllQue plus loin dans ce chapitre. Une autre hypothese est que votre objet a ete cri!e avec un autre outil que Ie Crayon, la Plume, le Plnceau, la Llgne, l'Ovale ou Ie Rectangle. Dans

tous les cas, essayez ModlllcationjDlssocier ou Modificatlon}Separer, puis utllisez i'outll Sous-setecuonner.

II est possible d'ellacer des points d'aacrage, Flash redesstne la Jorme en consequence. Selectlonnez I'objet avec l'outll Sous-selecttonner, cIlquez sur un point d'ancrage, puis appuyez sur la touche Suppr (au

Del). .

Transformation et deformation fibres de formes

~. 't\MX Le nouvel. outll T .. ransfo .. rm". tlon Iibre, .. avec ... ses OPti.o. ns Delormer.el

.. + Enveloppe·, est applicable am: objets,groupes, occurrences ou blocs

I . de tezte. En plus de ses capacttes spectales a creer des de:Jormations, II permet aussi de depl.acer, pivoter, redimenslonner et incliner les

_ Chapitre4 : Vouseles I'liditeur d'objets 8S

Volct les transformations courantes applicables a l'objet selectlonne : " DeplacemeDt. Placez Ie polnteur sur I'objet. Lorsque vous obtenez la quadruple !leche, cliquez-gllssez pour deplacer robjet selecttonne,

" Reglage du centre de rotation et de redlmensionnement Plecez Ie pclnreur sur Ie point de transformation. Lorsque Ie petlt cercle apparait, vous pouvez laire glisser le cercle au centre du cadre de selection pour deplacer Ie point de ltanstormatlon. Le point de transformation est Ie point de base utillse pour la rotation et Ie redlmensionnement.

fJ "'" Rotation. Plaeez le polnteur a l'exterleur d'une polgnee d'angle.

Lorsque la neche eourbe apparait, Ialtes !llIsser l'objet pour Ie Ialre plvoter auteur du point de transformation.

~\lC '.. Maintenez enloncee la touche Majuscule pendant le deplacernent de ta . souris pour forcer la rotatIon par increment de 45 degreS .. API'. uyez sur Alt (Windows) ou Option (Mac) pendant Ie depl.acement de la souris

. a1I0 de plvoter autour de l'angle dragonalernent oppose au polnteur

Figure 4.7: l'oojel est ent'llUr9 d"un cadre de

se I ecfio n, i I

P rese nte des poignees 81 un paint de tie n sfo rm a· lion.

objets. Plash possede d'autres outUs pour plvoter, redlmenslonner et mcltner, DOUS les abordons plus loin dans ce chapltre.

Vol.::! comment employer ce nouvel ouul Transformation IIbre. Selectlonnez un objet, une occurrence de symbole, un groupe ou un bloc de texte (pour plus d'inlormations sur les symbotes, VOlT Ie Chapttre 7; pour ce qui concerne les groupes, voir plus loin dans ce chapltre). Cllquez sur l'outil Transformation llbre dans la boite a

outlls. L'objet est sntoure d'uncadre de selection avec potgneeset un point de transtormatio«. represente par un cere te au centre du cadre de selection (Figure 4.7).

0---0---

86 Deuxieme partie: 1 ODD images et 1 ODD mots _

V ModlflcatioD des deux dlmensioDS. Placez Ie polnteur sur n'importe quelle poignee d'angle. Lorsque vous obtenez la fli!che double barree, laltes gllsser vers l'interleur ou l'exteneur. Malntenez enloncee la touche Majuscule pendant Ie deplacement de la souris pour garantlr un redlmensionnement proportlonnel de I'objet, sans deformation.

~\)C Vous pouvez selecttonner autant d'objets que vous voulez, Flash modlfiera leurs dimensions. Lorsque VOUlI seiectionnez plusleurs objets, Flash place les polgnees autour d'un cadre de selection Imaginaire qui englobe taus les objets.

H ".... ModlflcatioD d'one dimension. Placez Ie pointeur sur une

polgnee laterale, Lorsque vous obtenez la fli!che double. faItes gllsser vers l'mterleur ou l'exterleur pour redlmensionner dans la direction du deplacement.

v Inclmalscn. Placez Ie pointeur n'lmporte ou sur Ie cadre de

selection, saul sur les polgnees, Lorsque Ie polnteur a la forme de deux neches paralleles lnversees, faites gltsser dans la direction destree (I'inclinaison est etudiee en detail plus loin dans ce chapltre).

Jr

Figure 4.8:

La bisaaulage transforms lin carra en trapeze.

Biseautage J'objets

Vous pouvez transformer un carre en rapeze par biseoutage. Cela consiste 11 utillser l'ouUl Transformation IIbre pour laire gllsser une polgnee d'angle, Pendant Ie deplacement, I'angle collateral se deplace d'une distance egale dans la direction opposee (Figure 4.8). VOllS pouve.z biseauter d'autres formes, vous n'etes pas limite aux carres,

Pour effectuer un btseautage, appuyez sur Majuscule+CtrJ (Windows) ou Majuscule+Commande (Mac) pendant Ie deplacement de la souris sur une polgnee d'angle du cadre de selection. VOllS pouvez egalement utillser l'optlon Deformer de l'outn Transformation Ubre : cliquez sur le

bouton Dt:former et appuyez sur Majuscule pendant Ie deplacement de la poignee d'angle (cette technique convlendra mleux aux personnes qui ant du mal 11 enfoncer les touches Majuscule et Ctrl ou Commande en meme temps).

_---------- Chapitre 4 : Vous etes I'editeur d'obiets 87

Figure 4.9:

Feites glisser Ie cadre de selection pour lui donnerune nouvelle forme et l'obJet suit.

Deformation Jlobjets

Pour obtenlr des effets encore plus forts, vous pouvez deformer des formes (objets). Notez que cela ne lonctlonne pas sur les symboles, les occurrences de symboles, Ie texte au les groupes. Lorsque vous deformez un objet, vous changez la forme du cadre de selection et Ia lonne s'adapte au cadre de selection (FIgure 4.9).

Pour deformer des formes avec I'outil Transformation IIbre, appuyez sur Ctrl (Windows) au Commande (Mac) et faites gUsser un angle ou une poignee iaterale du cadre de selectron, Vous pouvez egalement utlllser l'optlon Deformer de l'outll Transformation libre : cliquez sur le bouton Deformer et faites gllsser Ja polgnee. Pour travalller via lea menus, actionnez Modification/TranslormerjDeformer.

Deformer IlemJeloppe

Vous pouvez apporter des modifications de forme encore plus fines en exploltant I'optlon EnveJoppe de l'outll Transformation IIbre. Lorsque cette option est active, Ie cadre de selection arbore des points CODlfDe lorsque vous employez l'outll Plume. Lorsque vous Ialtes glisser les polnts, des lignes de tangentes apparalssent, encore comme avec l'outll Plume. C'est ce que montre la figure 4.10.

88 Deuxieme partie: 1 DOD images et 1 DOD mots _

Figure 4.10: r ~- ----:::::::::::::;w.:::---~=-:=:;:::::;;::;;;:~;=:ill

~;: n~ I!iise I .

apres deformation

deson ~. ~

enveloppe.

Pour travalller sur l'enveloppe, selectlonnez un objet, c'est-a-dlre une forme (nl symbole, occurrence, teste ou groupe). Actlvez l'outll Transformation IIbre et l'opnon Enveloppe. Vous pouvez egalement actionner ModUtcat!on/Translormer(EJ]veioppe. Faltes gllsser un point vers l'lnterleur au l'exterteur, puis laltes gllsser l'extremite d'une ligne de tangents pour changer Ie direction d'une courbe,

Pour mettre lin 11. une transformation llbre, cllquez n'lmporte au en dehors de I'objet selecncnne.

Redresser res /iiJnes et incurver les courbes

A I'lnstar des Ugnes que vous pouvez redresser ou IIsser avec les modlficateurs de I'outil Crayon (voir Ie Chapltre 3), vous pouvez faire de rnerne avec lescontours et les remplissages des objets exlstants.

Vous pouvez activer repetltlvement les modltlceteurs Redresser et Usser pour apprecler la rnanlere dont Flash redesslne Ies lormes de vas contours et de vos rempllssages, Dans des clrconstances extremes, F'lash ne peut plus ni lisser, nt redresser.

'1>\l~P~

-§!(j)d· Cholslssez Edition/PreIoerenc~s/Modj:f[cation pour ajust~r In senslblttte

~ . de Flash dans ee domame. Agtssez sur les parametres Llsser les

. courbes et Reconna1tre les !Ignes.

Pour redresser une ligne, commencer par selectlcnner ['ohjet qu'elle compose. Avec l'outll Fleche actlf, cliquez sur Ie modillcateur Redresser (voir leone ct-contre) de Ia section Options de la botte it outlls, Flash est alors capable de redresser les courbes et de reccnnaltre les formes.

Pour !lsser une courbe, cnrumencez par selecnonner l'objet qu'e1le compose. Avec l'outll Pleche actil, cllquez sur Ie modlficateur Lisser de la section Options de la boite it outlls (voir cl-contre). l.lsser adouctt les courbes et redult Ie nombre de segments qu'elles contlennent.

___________ Chapilre 4 :Vous etes I'edit.eur d'objets 89

Vous pouvez dellnlr la manlere dont Plash aUecte la courbe en I'optlmisant. SI vous exagerez l'cptlmlsatlon, annulez trnmedlatement votre actIon. et recommeacezavec de nouveaux reglages. Vous n'a.glrezgeneralement que sur Ie paraml!tre Lissage. L'optlmisation des combes est assez rapide, saul si vas objets sont partlcullerement

com plexes. n est Inte.ressant d'alltcher Ie message des totaux du degre d'optimisation des courbes et le pourcentage d'optlmlsatton qu'lls representent, Une lois les parametres d'opttmtsation dt'!finis, cliquez sur OK.

~(fj~"t\O~,~ V. erlflez Ie. resultal obtenu suite. 11 une OPtlmlsatto.n. FlaS.h a ten. dance .11. 'I" ~e.]jm!ner les petits objets. D'autres modifications inopportunes

., peuvent survenlr. SI Ie resultat n'est pas a la mesure de vas attentes, cholslssez tdHion/ Annuler.

Agu(e 4.11 : o pli mi ser I es combes n!duit Ie nombra d'~laments

I nd wid UB Is qui les eumjiosant,

Vous pouvez uUHser les modJtlcateurs LlsseTet Redresser pour s'lmpllfler un trait ou une forme. Redessine.z I'obj,et avec l'outil Fleche, Sous-selectlonner ou Translonnation IIbre, comme nous l'avons decrtt dans la section precedente.

Optimiser les eourbe«

L'optimisarion redult Ie nombre d'eiements d'une courbe, Son avantage est de rMulte la taJlle de votre ltchier, ce qui amel:lore considerable. ment son telecllargement depuis un site Web. L'cptlmlsatlon peut se laire plusleurs fols comme le lissage et Ie redressement. L'optimlsatlon est racommandee pour les creations artlstlques complexes qui contiennent de nombreuses lignes et courbes,

Pour optlrnlser, seiectlonnez l'objet el cholstssez Modification/ Optimiser. VOliS aceedez 1IIa boTte de dialogue Optimiser les courbes repr~entee Figure 4.11.

Auulrt M mcirtlWll

OptiJ)f1't r Aw~I~ Qll.le~r p~ (~1'" ~J Alfic!>.,t 1~~!lI' deli Jpll.u,

90 Deuxieme partie: 1 000 images et 1 000 mots __ ~ _

Figure 4.12:

Utilisez Ie boite de dialogue Etendre Ie remplissage pour oparer la enntractlon ou Ie dilatation d'un remplissage.

Dilater et contracter ies formes remplies

Ces deux commandes donnent les mellleurs resultats sur des formes sans contour car Flash supprlme les contours pendant l'executlon de ces deux operations. Dilater au contracter une forme possedant un contour necesslte son redlmenslonnement. Nous l'expllquons plus loin dans ce chapltre,

La dilatation et la contraction sont plus performantes que Ie redimenslonnement, mals bien mains lntulttves et flexlbles. Dans bien des cas, vous devrez envlsager un redlmenslonnement de la forme plutot que rune des deux operations precitees. L'avantage de la contraction et de dlJatation est que la madill cation de la tallle s'exprime en pixels,

Pour dl later au contracter une forme, selection nez-la, puis chotslssez Modlflcation/Forme/~tendre Ie rernpllssage, La boite de dialogue du msme nom apparait comme sur la figure 4.12. Salsissez une valeur dans Ie champ Distance. L'untte de mesure utlltsee est celle detinle pour la totallte de l'animation. Par delaut, les animaUons sont mesurees en pixels. ryoyez Ja section consacree a Ja precision des dessins au Chapitre 3 pour en apprendre davantage sur les unites de mesure des anlmations.)

Etendrc le remph~sage

Dil;jat'Ce 14 ill!

t:liff.\ctlOn, r: Ver-:I'el(!8!leW r Vels l'il'lliirie1.lr

Pour dUater un remplissage, acttvez l'optlon Vers l'exterleur. Pour la contracter, choisissez Vers l'lnterleur. Une lois les parametres dennis, cliquez sur OK.

Lisser les contours

___________ Chapitre 4: Vous etes I'edileur d'objets 91

Figure 4,14:

Utillsez la boits de dialogue Adcuclr les bards de rem~liss8gB pour lisser las contours at olnanlr des

eHeu ----------------------------~

saisissants.

Figure 4.13 :

Vous pouvez lisser les contours pour cr~er des effets surprenants.

Lisser est un autre outll de modlllcatlon des formes, Vous pouvez adouclr Ies contours pour obteulr des images qui ressemblent a celles creees dans des programmes specialises en 1a matiere, comme Photoshop, La Figure 4.13 montre un texte avant et apres lissage de ses contours.

z

Pour llsser les contours, se!ectlonnez Ie ou les objets, puis chotstssez Modlflcatlon/Forme/Adouctr les bords de rernpltssage, Vous accedez a la boite de dialogue representee Figure 4.14.

DIt!tr\Ce ~ Nombl~ d'etllpel ~

D neooofl (: V 1m rext61ie\lr (" V*,I rll .. I~"el.M

OK

Voici comment llsser les bords:

I, Fixez la d1stance, Ene correspond a Ia largenr de l'adoucissement,

92 De;uxiemepertie: 1 ODD images at 1 000 mots _

La distance est mesuree en pixels. saul sl vous avez opte pour une autre untte de rnesure appliquee a l'ensernble de l'anlrnatlon, Reportez-vous au Chapitre 3 pour en savoie davantage en la matiere,

2, Definlssez Ie Dombre d'etapes, II determine Ie nombre de eeurbes que Rash otUlse pour creer le coni our adouct,

Commencez avec la valeur par deIaut. Vous la mootnerez sl le resultat ne VOllS convtent pas, Vous pouvez augmenter cette valeur pour obtentr un eHet d'adouctssement plus. prononce, Cependant, plus une forme est adouc!e, plusla tallle du {jehle! augmente.

3, Cbolslssez une direction d'adouelssemeat. Vers l'exterleur un eHet de dilatatl.on !lern c:ree,et vets I'lnterleur un e.ffel de contraction,

4, CUquez sur OK pour revenir a votre anImation.

Votre forme est selecttonnee, CHquez sur une partie vtde de la scene pour apprecter reflet S'U ne vous plait pas, choisissez EdlUonJAnnuler etappllquez d'autres parametres,

'@f!\\CvouspoUVeZegalementadoudrdesbords,enutlllsantdeSdegrades

.. qui se melarl.gent ~.Ia couleu. r d'arrl~~e-p~an de 180 scene. Le Chapitre 3

vous donne plus d mformations sur! utl.hsatlon des couleurs.

Com/eni" des fifJ.nes en rempiissQtjes

Flash propose dlverses methodes pour rempHr une forme. Par exemple, vous pouvez appUquer des degrad!s et des images bnmaps, Mals qu'en est-ll de ces pauvres lig,nes qul afflchent trlstement une couleur unie ? Flash est l'ennemi jure de 180 trtstesse, Par consequent, U y a certainement quelque chose a laire pour elles. 010yez le Chap!tre.3 POUT des explications approfondles sur las rempllssages, notamment les degradeS at les Images bltmaps.)

Dans certains cas, rempUr une ltgne est ridicule. Elle est tellernent line que personne De verra la dIJlerence, Mals, sl vous creez des Ugnes d'uae epalsseur consequente, vous pouvez creer des elfets Ires interessants, La Figure 4.15 montre des vagues obtenues avec une simple Iigne (desslnee avec l'nntll Crayon) d'une largeur de 10 points, c'est-a-dlre la largeur maxlmaJe autortsee par Plash, Nous avons converti la Ugne en rernpltssage, Ensulte, l'outll Pot de pelnture a ete utilise pour rernpltr 13 lIgne avec un degrade.

Chapitre 4.: Vous etes I'ed.iteur d'objets 93

--------------------------

Transformer lesremplissatjes

Figure 4,1'5:

Uti I iSIn laP ot de peinture pour modifier Ie remplissage.

POtIT convertlr une ligne en rempllssage, selectionne.z·la puis choistssez Modiiication/Forme/Convertir les lignes en rempllssage, C'est tout ce que vous avez a Ialre, Vous ue voyez sucune dUierence a I'ceil nu quand vous deselectlonnez la Ugne alnsl convertle. Cependant. vous poevez alterer Ie rempllssage comrne bon vous semble,

L'outil Transformer Ie remplissage propose une manlere unique de modifier un degrade et un rempllssage bitmap (cette posslblllte Halt auparavant offerte via une option de l'outll Pot de pelnture). Volcl les changements qullnIluent sur un remplissage :

"'" [}Cplacer son point central.

"'" ModJf1er sa largeur et sa hauteur. "'" Le falre pivoter.

"'" Le redlmenslonner.

"'" Le repeter.

"'" ModWer le rayon d'un degrade elrculalre, "'" L'mcltner.

Dans l'enumeratlon prscedente, vous notez qu'on ne parle pas de remplissage 11 l'etat pur, c'est-a-dlre avec une eouleur unte, Celli. n'a aucun interet pulsqu'une couleur unle conserve Ie meme aspect quelle que soit sa direction, sa tallte au son redlmenslonnement. (Reportezvous au Chapltre 3 pour en apprendre davantage sur lss remplissages avec un degrade ou un bitmap.)

Pour modifier un rempllssage, selectlonnez l'outll Transformer le rempllssage. CUquez sur n'tmporte quel degrade au rempllssage bitmap, Flash fait apparaitre une marque d'edltton auteur du rempllssage comme sur la Figure 4,16, La marque d'edttlon est clrculalre pour

94 Deuxieme partie: 1 ODD images et 1 000 mots _

un cercle (au une forme approchante), et rectangulalre pour un Mgrad(: Ilnealre au un remplissage bitmap.

Figure 4.16:

L'autil

Ira nsform e r Ie remplissage place une marque d'edition autour du remplissage.

Maintenant que vous dlsposez d'une marque d'edltlon, vous etes pret a rnanlpuler le rempllssage. Volcl comment efiectuer vas modificatlons:

"'" Pour deplacer Ie centre du rempllssage, laltes gllsser Ie point central. Il est Identlfi(: par un cercle place au mllieu de la marque d'edltlon. Effectuez ee deplacement [usqu'a ce que vo us

obtenlez un eflet choc I Le centre du remplissage permet de definir la direction de la lurnlere dans un degrade circulaJre au de decentrer un bitmap.

"'" Pour alterer la largeur d'un rempllssage. faltes gllsser Ie carre qui se trouve a la pertpherte de la marque d'edltlon. Pour modifier la hauteur du rempBssage, (attes glisser Ie cercle qut se trouve entre Ie carre et Ie cerde du bas. Sl une marque d'Mit!on ne propose pas ces pcignees, vous ne pouvez pas l'edtter de cette mantere, Modllier un rempllssage llneafre en le mettant perpendiculaJre li sa direction revlent au meme que modifier la dimension du rempllssage -Ies bandes devlennent plus larges,

"'" Pour lalre pivoter un rernpllssage, faites glisser la poign~ du bas. Des que Ie polnteur de Ja souris se trouve parfaitement place dessus, des neches tournant en rond apparalssent, CUquez et actlonnez la souris pour modifier la direction du rempJlssage. La Figure 4.17 montre un degrade llnealre ayant

~'" Pou,,::,:e':::d:e~.:~lfssage a un.multiPle de 45 degtes lars de la rotation d'un rempllssage, appuyez sur la touche Majuscule pendant Ie deplaeement de la souris.

_ Chapitre 4 : Vous etes I'editeur d'obiets 95

Figure 4.17 ~ Fairs pivater un ramplissage lineaire cree un remplissage diagonal.

"'" Pour redlmensionner un degrade bitmap, Iaites gllsser le carre de la marque d'edttlon. Vers l'lnterieur, vous dfmlnuez la taJlle du remplissage, tandls que vous l'augmentez vers l'exterleur. Redimensionner un degrade clrcuJaire modlfle son rayon. La figure 4.18 montre un degrade bitmap a sa tallie origlnelle, puis a une tallle plus reduite. Flash repete le bitmap comme un moU! quelconque pour qu'il remplisse ennerement la forme sur laquelle il est applique.

Figure 4.1 B :

Redime~sion· .1!!!ii~9I1 naz un remplissage bitmap pour Ie randre plus grand eu plus ... .....;;;;:...:......1 ..

petit

~1\ONI

t::iJi".. 51 vous redursez un bltrnap pour obtenlr une rnosatque, lorsque vous

~,A" voudrez modlJier le bitmap, Flash placers une marque d'edltlozi autour

• de chaque motif; vous devrez done modJfler chacun d'eux indlviduellement, ce qui peut demander beaucoup de temps.

"'" Pour Incliner un rempltssage bitmap, aglssez sur la polgnee circulaire sltu~e sur le bord superieur de Ill. marque d'edltlon. L'tncllnalson est d.lfferente de la rotation car Ie bitmap subit une deformation. La Figure 4.19 montre un bitmap lncllne,

Plus loin dans ce chapitre, nous expllquons comment laire ptvoter, redimenslonner et Incliner des objets entlers.

96 Deuxieme partie: 1 000 images at 1 000 mots

---------------------

Figure 4,19:

Vous pouyez incliner un remplissagB bitmap pour obtenir des resultats inattendus.

Transformer des obiets

Plus haul dans ce chapltre, 11 la section sur la transformation libre nous avons explique comment employer l'outll Transformation llbre pour remodeler des objets. De nombreuses operations semblables sont reallsables avec la comrnande Transformer.

Pour redimensionner, faire pivoter et renverser des objets. cbclstssea ModiflcatlonfTransformer. A cheque transformation, Flash se souvient des qualltes de I'objet. VOllS pouvez done retrouver son aspect d'origlne avant de VOllS decider pour une modification.

Redimensionner

La plupart du temps, Ie rectimensionnement via l'outll Transformation Jibre (voir plus haut dans ce chapltre) est ce qu'li y a de plus facile et de plus raplde, Cependant, vous disposez aussi de la commande Mod!fic~tlonfTIansformer/Redimensionner pour afficher des poignees sur I objet, que vous pouvez Ialre glisser vers l'Interleur ou l'exteneur, Cette methode est semblable 11 I'emploi de l'outJI Transformation libre saul que VQUS De pouvez appliquer qu'un redimensionnemenl.

Pour plus de precision, actlonnez Modlflcatlonrrransiormer/ Redlmenslonner et lalre plvoter. Dans la fenetre de dialogue Redimensionner et faire plvoter, entrez un pourcentage d'echeLle et cliquez sur OK.

Pour plus d'options, selectlennez un objet et actlonnez fenetre/

..... ,.\lC Transformer pour ouvrlr Ie panneau Transformer (Figure 4,20),

Les controles du panneau Transformer ne sont operatlonneJs que 51 un objet est selecttonne, 51 vous ne selectlonnez pas d'oblet, Inutile de fermer Ie panneau. SeJectionnez l'objet, et tout devlent actif I

___________ Chapitre 4 : Vous etes I'iiditeur d'objets 97 I

Rgure 4,20:

La panneau Tramtormer permatde relfrnB!1Sionner, taire pivoter at incliner des objets avec uns grande pr~cisicn,

Figure 4.21 :

Las carveaux attaquent I

Pour redlmensionner Ie au les objets selectionnes, saislssez une valeur de redlmensionnement entre 1 et 1 000. Toute valeur sttuee en

dessous de 100 redutt la talJle de l'objet, Alnsl, une valeur de 10 engendre un objet dont 18 tallle est de 10 % de celle de l'objet d'orlgtne, Avec une valeur de 1 000, I'objet est dtx lois plus grand que l'ortgtnal, Appuyez sur Entree ou Tab afln de vallder vos valeurs,

Pour creer une copte d'un objet redlmenslonne, il sultit de chquer sur Ie bouton Copier et appllquer la transformation situee dans le coin Interteur droit du panneau Transformer, La cople est placee sur I'ortginal. n n'y a done aucun moyen de la distinguer tant que vous ne la deplacez pas. La Figure 4.21 est lin parfalt exemple d'une telle cople, Elle donne l'impression que des "aliens" identlques se trouvent e]olgnes les uns des autres. Toute copie dolt etre cleplacee [usqu'a une nouvelle position.

Destrez-vous speclf!er la tame exacte de !'objet en pixels (ou dans I'unlte de mesure detinie pour l'lntegrallte de ]'anlmation) ? Peut-etre avez-vous besoin que I'objet s'integre dans un espace spectflque dont VOliS connalssez In talJle exacte, Dans ce cas, cholslssez Fenetre/

98 Deuxieme partie: 1 000 images et 1 000 mots _

Panneaux/lruo pour ouvrlr le panneau ... Inlo (referez.vous it la Figure 4.4).

Utllisez les champs L (largeur) et H (hauteur) pour dMinlr prectsernent ces deux dimensions appllquees 11. votre objet. Appuyez sur Entree ou Tab et le tour est [oue,

Iournicotons, toumicotis

Pour plvoter les objets, vous utlllserez la piupart du temps l'outil Transformation ltbre, comme expllque plus haut dans ee chapltre. Si YQUS voulez plus de precision. acnonnez Modlfleatlon(franslormerl Redlmensionner et falre plvoter, Tapez le nombre de degres pour la rotation de I'objet selecttonne et c1iquez sur OK. flash pivote la selection dans Ie sens horalre.

Pour faire pivoter un objet de 20· ou l'lncllner pendant une rotation, utlltsez le panneau Transformer. Selectlonnez l'objet et choisissez f'enetre{Transformer pour ouvrir Ie panneau Transformer (voir plus haut la Figure 4.2Q).

Pour faire pivoter des objets dans le sens des algullles d'une montre, salslssez une valeur comprise entre 1 et 359. Pour une rotation dans Ie sens contralre des algullles d'une montre, saislssez une valeur

~uc :~:::~~I:~ t:: ':0:: ::~;~~~:~ c~~:::eS:~rl:::::~n Reinltialiser

qui se trouve dans le coin lnlerteur droit du panneau Transformer et essayez de nouveau.

Pour Ialre une cople d'un objet ayant sub! une rotation, cJiquez sur Ie bouton Copier et appllquer la transformation (bouton de gauche a

I 'angle iuieriellT droit du panneau Transformer). L'objel cop!t~ etant selecuonne, vous pouvez Immedlatement Ie deplacer,

Pour elfectuer une rotation de 90°, utllisez les menus:

"" Pour falre ptvoter vers la droite (sens des aiguilles d'une rnontre), chotstssez Modilication!Transformer/Faire pivoter de 90· A droite.

"" Pour elIectuer une rotation vers la gauche (sens eontralre des aiguilies d'une montre), cholslssez ModlflcationjTransformerj Faire pivoter de 90' A gauche.

La rotation s'effectue par defaut en Ionctlon du point central de l'objet, Pour que la rotation 56 Iasse a partir d'un autre point, vous pouvez

convertlr l'objet en groupe ou en symbole et modifier son point de reference. 11 s'agit du point d'un objet auquel Plash s ref~re pour operer la rotation. Reportez-vous a la section consaeree A la modification du point de reference un peu plus loin dans ce chapltre,

VOllS pouvez creer des motifs circuJaires inattendus grace Ala fonction rotation et copier, comme Ie montre la Figure 4.22. Sl les objets ne sont pas totaJement symetrlques, vous devrez modlfler Ie polnt de rHerence.

_----------Chapitre 4: Vous etes I'editeuf d'objets 99

figure 4.22:

En falsant pivotor un objet at en Ie copiant, vous pouvez aiouter 10 pouvolr des fteurs II votre site Web.

Figure 4.23 :

Apres inclineison. une Heche bien sage deviant un 1i16ment

Ireniltique.

lnelinaison

L'lnelinalson est une var!ante de la rotation. Plutot que de Ialre plvoter !'integrallte d'un objet, vous l'lncltnez horlzontalernent, verticaJement au les deux. Incliner un carre donne un losange. Sur la Figure 4.23, vous voyez une simple lleche avant et apres lncllnaison.

100 Deuxieme partie :1000 imagesetl 000 mots _

La manlere la plus simple d'lncllner un objet est d'utlliser l'outll Transfoematton Ilbre, expllQlIe plus haut dans ce chapttre,

Generalement. l'lncllnatsnn se fait de vlsu, Pour plus de precision sur certe operation, utlllsez Ie panneau Transformer. Selectlonnez roblet puis cholslssez Fen.etre/Panneaux,lTransformer. Pour Incliner l'objer, cllquez sur lnclmer.

UtUlsez Ie champ de gauche pour incliner horlzontalement. Toure valeur cornprlse entre let 89 opere une inchnalson dans Ie sens des aiguilles d'une montre, Pour abtenlr une lncllnslson dans Ie sens contralre des alguflles d'une montre, salstssez une valeur comprise entre -I et -89. Valldez vos valeurs en appuyant sur Entree ou Tab.

Pour lncltner vertlcalemeat, salstssez une valeur dans Ie champ de drolte. Les va!eurs posl:tives operent une rotation dans le sens des algullles d'une montre et les valeurs negatives dans Ie sens contratre des algullles d'une montre. SI vous ne cornprenez pas bien ces notions, mettez-les en pratique pour voir ce qui se passe, Si Ie resuJtat obteae ne vous satisiait pas, ctlquez sur Reinltialiser (bouton de drone iI I'angle Inh~rieur droit du panneau Transformer), et essayez de nouveau.

Pour lalre une cople de I'objet Incline, cllquez sur Ie bouton Copieret appUquez Ia transformation (bouton de gauche it I'angle InUirl.eur dreJt du panneau Transformer). La cople apparait sur I'orlglnal. Comme elle est selectfonnse, deplacez-la a sa nouvelle position.

Remlersant renuersement

I1t 00 d'autres programmes parJent de renversement, Flash continue d'utlllser le terme pivoter. Mais II y ajoute les adverbes "horlzontalement"et "vertlcalemem". L~ renversement est un plvoternent qui aglt

comme un miroir. .

La Figure 4.24 montre des courbes qui ont eM plvotees horlzontalement, vertlcalementet dans les deux dlrectlons, Ce type de renversement se fait par rapport au centre de l'objet. Pour que I'ellet mlroir sott ccrnplet, Ie renversemenl dolt se faire dans les deux directions.

Pour renverser un objet, cholslssez Mod!fication/Transiormer/ Renverser verticalement ou Renverser horlzontalement. Pour que Ie renversemenl se lasse dans les deux directions, appll.quez-en d'abord une puis I'autre.

Chapitre 4 : Vous etes I'edileur d'objets 10 J

__ -------------------------

_Ic~, ~-

Figure 4.24:

Vous pOUVGl Ie I f'8 pivotar des objets verticalomant, horizn nta Ie· rnant au les deux.

RetJrouper

Original

Plvoter vertka!ement

Pivoter horlzontalement

Pivoter verticalement et horizontalement

Ce type de plvoternent permet de creer des objets symetrlques. Dans ce cas, 11 est necessaire de modi.lier i'emplacemenl du point de reference. Falres-le glisser du centre vers un bord au un angle.

Une fois que vous savez creer des objets, vous ne manquerez pas de les multiplier sur la scene. Au bout du compte leur gestion peut devernr tres comptexe, Par exemple, une operarton aussi simple que de deplacee plusleurs objets se transforme en un veritable cauchemar, La rnultiselecnnn s'avere penlble a realiser. II n'est pas rare en eflet d'oublter un rnorceau d'objet qui se trouve derriere un autre. Rendre ce marceau a l'objet auquelll appartleru devlent un veritable tour de force. Que Ialre ? Grouper I

Grouper est un concept habltuellement mis en reuvre dans les programmes graphtques. Vous se!ectionnez un groupe d'objets que vous regroupez en une seule operatlon, A partl r de 111, vous selectionnez tous les objets d'un simple clrc, SI VOUS en deplacez un, le reste suit docilement.

Dans Flash, Ie regroupement d'objets presente d'autres avantages, Si vous placez des objets les uns sur les autres, Ils luslonnent quand lis sont de Ia meme couleur au creent des decoupes quand Us sont d'une couleur dltlerente. Pour conserver l'integriM des objets, II suEnt de les grouper. (Une autre methode constste a les placer sur des calques dlfferents, comme celaest exp'llque au Chapitre 6.)

II est facile de grouper des objets. Selectlonnez-Ies et cholslssez Modification/Grouper, au utlllsez te raceourcl clavier Ctrl ... G

102 Deuxieme partie: 1 !lOO images et 1 000 mots

-------------------------

(Windows) et ~+G (Mac). Lorsque VOUS groupez des objets el que vous les selecti nnez. rous les objets son! entoures par une bordur de selection bleue,

Apres avoir groupe des objets, vous pouvez revenir en arriere. Selecticnnez le groupe, puis cholslssez Modl{ication/Dissocie.r,

Pour rnodlfier un cornposant du groupe sans Ie dlssocler, suivezles .eta pes cl-dessous :

1. Utillsez l'outll Fleche et double-ellquez sur Ie group .

Alternativemem, vous pouvez selectlonner Ie groupe et cholslr Edition/Modifier la selection,

Flash attenue les autres objets pres nts sur la seen et afllche le symbole Group au-dessous de la liste des calques.

2. Modifiez n'lmporte quel composant du groupe.

3. Pour revenlr au mode d'edltlon tradltlonnel, douhle-cliquez sur nne zone vierge de la scene avec I'outf Fleche, VallS pouvez egalement cliquer sur le symbole Sequencel situe a gauche du symboJe de groupe Oil SUI' la fleche arriere, ii. gauche du symbole de sequence.

Vcus pouvez egalernenr cholslr Edition/Toul modtlier,

Verrouiller ties objets

VOllS pnuvez verrouiller des gruupes et LIes symbotes pour ne pas les modifier accldentellernent. Quand un groupe ou un symbole est verroullle. il ne peut plus etre selectlonne.

Volci comment verroulller er deverroullter un groupe Oll un symbols :

I#" Pour verroulller un groupe aLI un symbole, selectlonnez-le puis chol slssez Mndiftca lion/Reorgan lsat: cn/Verrculller.

Y' Pour deverroufher un groupe ou un symbole, cholsissez ModllierjOrganiser/Tout deverroutller.

Separation J'objets

Avec la commands Modtflcat ion/Separer. vous separez du texte, des groupes, des occurrences de syrnboles et des bitmaps pout obtenlr des objets rnudlliables lndlvtduehernent.

_____________ Chapitre 4: Vous etes I'editeur d'objets 103

Voicl ce qui arrive aux objets Quane! vous I 5 s 'parez :

VI Texte. l.orsque vous separez un bloc de texte, Flash dlvise les mots en lettr s indlviduelles, chacune etant un objet separe, Si V()US utillsez la commande Separer une deuxieme lots sur une des lettres. 111 lettre devtent une forme que VQUS pouvez modllier COnlm€' toute autre forme.

Pour anlmer des lettres lndlvlduelles, separez du texte puis utillsez Ia cornmande Rei)i:lrtir vers les calques. Pour plus d'lnlonnations sur Ie texle, voyez le Chapilre 5 : pour les calques. voyez Ie Chapitre 6.

v Bitmaps. Flash convertit le bitmap en rernpllssage .

• a11DNt ,

"'~' Si VOllS separez Line occurrence de symbole, I occurrence perd son

~ . ..::~ lien avE'.· son syrnbole d'orlgine. SI VOLlS separez un syrnbole ani me.

" • seule l'lrnage en cours demeure, le reste est perdu, Le Chapitre 7

, expliqu les syrnboles. en detajl.

Orqaniser fa scene

Flash ernpile IE'S objets dans leur ordre de creation. Si vous dessinez un cercle puis un carte, ce demier se trouve au premier plan par rapport au cercle, Le dernier objet cree est tnujours au premier plan par rapp irt aux autres,

.;::;~~V.~4S Si vous pla .ez un nbjel sur un autre, les deux elements n'en torment

:,! It.r& plus qu'un seul s'lls sent de la merne couleur. Ell revanche, quand ils

I. sont de dlllerentes .ouleurs, l'objet du d ssus decoupe celui du dessous ... c'est ta vie I

Pour conserver I'integrite des Objets. \TOllS poirvez les grouper. Les symboles aussl peuvenl garder leur integrite. (Allez fain" un tour au Chapltre 7,) Les groupes et les symbcles sont toulours places sur les objets standards. Done, les objets doivent et re groupes ou convertls en syrnboles pour les faire apparaltre par-dessus des groupes ou des syrnboles extstants, Certains graphlques importes doivent egalernent etre I ranslormes en symb le (.IU ell groupe avant de pouvoir etre deplaces dans la pi! des elements.

~uc Si vnus dessinez un objet qui dlsparail trornediatement derriere un autre objet, c'est que vous tentez de le placer sur un groupe ou un symbole. Cela ne rnarche IUS. Dans ce cas. groupez l'objet ou cony rtissez-le en syrnbule,

10~ Deuxieme partie:' DOD images et1 000 mots _

Rguret25 :

Un bon vieuJI bitmap at una etoile vectorielle, lantOtl'un devant tentOl l'autre.

Une autre manlere de reorganlser les objets conslste a les placer sur des calques dillerents. Vous pouvez ensuite reorganlser I'ordre d'empilement. II suffit de selectlonner I'objet et de cholslr ModWcation/Reorganlsatlon, Activez I'une des quatre options sulvantes :

Y' Premier plan place l'objet selecttonne au sommet de la pile, Y' Vers I'evant deplace l'objet selectlonne d'un nrveau vers le premier plan.

j.-I VeTS l'arrlere deplaee l'objet selectionne d'un niveau vers l'arrtere-plan.

Y' Mettre a l'arrtere-plan envoie I'objet selectlonne derriere taus les autres, c'est-a-dire tout au fond de la pile.

La Figure 4,25 montre un exemple d'objets emplles de deux rnanleres dlfferentes,

Chapitre 5 Avez-vo s bon caractere ?

• • • • • • • • • • • • • • • • • • • • • • •• ••

Dans ee ehapitre :

Creer, modifier et mettre en forme du texte. Appliquer des effets au texte,

• • • • • • • • • • • • • • • • • • •

51 vow> entrez dans I'un!vers du Web, c'est pour y dire quelque chose. Ce chapltre traite du texte dans taus ses etats. Vous pouvez utlllser Flash pour creer Ie texte de vos pages Web, mats la grande performance de Flash est de pouvotr I'animer avec des effets epoustoullants.

Presenter votre teste

La plupart des textes presents sur Ie Web sont mls en forme avec UIl code HTML. Ce code determine Is police utlllsee, sa tallIe et sa couleur, L'uUlIsation de HTML est ideale pour afflcher une grande quantlte de texte, car Il s'aglt d'un code rudi.mentaire qui se telecharge tres rapidement.

Cependant, pour quelques mots OU de petltes phrases, sans doute souhalterez-vous une mise en forme partlcullere, dlsons, plus artistlque, plus travaillee ... plus animee, C'est iei que Flash surpasse Jes posslbllltes tntrlnseques de HTML. Dans Flash, Ie teste s'anlme comme n'importe quel autre objet. Par exernple, un logo anlme lnclut une Image et Ie nom de la societe qui lui est assocle, Ce nom est, bien evldemment, un texte.

Void un apercu de ce que vous pouvez falre sublr avos textes dans Flash:

106 Deuxieme partie: 1 DOD images at 1000 mots _

Figure&.' ; Vous pouvez

transformer un texte en forme at Ie modifiers volre

convenance.

A

Y' Vous pouvez Ialre plvoter, redtmenslonner, Incliner au renverser du texte tout en gardant Ia posalbillte de Ie modlfler.

Y' Vous pouvez transformer du texte en forme et Ie modifier comme vous l'entendez, Attention! Cette transformation empikhe d'alouter ou de modifier Ie Lexte en question par une simple salsle au clavier. La Figure 5.1 montre un tex.te alnsi modllie.

Y' Vous pouvez creer des caracteres trans parents.

Y' Vous pouvez creer des liens hypertextes qui renvoient a d'autres pages Web quand on clique dessus.

Y' Vous pouvez donner a I'utlllsateur la posslbillte de contrfiler certains aspects de I'animatlon en entrant du tex.te dans une case de salste au en chargeant du texte, par exemple des resultats spcrtlfs ou de la meteo, dynamlquement a partir d'un serveur.

Creer un texte

IJ n'y a sans doute rlen de plus simple a rea.User dans Flash.

1. Cliquez sur l'outll Texte.

2. lndiquez Ie point de depart de la saisie du texte sur Ia scene.

• Pour speclller la largeur du texte, cllquez dans Ie coin superieur gauche de Ia scene et faUes gllsser la souris vers la drolte pour de siner une zone de salsle de texte d'une longueur suJtJsante. Flash place un carre dans Ie coin superieur droit de la zone de texte.

_ ~ __ Chapitre 5: Avaz-vous bon caractere 1 107

• Pour creer une zone de texte qui s'agrandit au fur et a mesure de votre salsie, cllquez slmplement au poln! de la scene au doit commencer Ie texte, Vous notez que c'est un cercle qui apparalt dans Ie coin superieur droit de la zone. II indlque que cette zone de texte s'elargira en fonction de la longueur du texte salsl,

3. Commencez A sa1sir votre texte i pour forcer un retour A la IIgne, appuyez sur 1n toucbe Entree.

4. Des que vons avez fini de saIstr votre texte, cllquez n'importe ou Stir Ia scene. Le texte est desclectionne.

Felicitations, vous savez dire quelque chose!

Modifier un teste

II est rare qu'un texte nouvellement salsi soit exactement comma vous Ie souhaltlez. Je ne parle pas ici de son contenu mais de sa forme, sa position, son allure. Modifier un tex.te est une chose facile it realiser dans Flash. La premiere chose a falre est de Ie selectionner. Vcicl quelques techniques:

Y' Pour modifier la totante d'une zone de texte, cholslssez J' utll Fleche et cliquez sur Ie texte, Flash l'encadre avec une marque de selection. Vous pouvez deplacer, laire plvoter et redlmensionner tout le texte de cette zone.

Y' Pour modifier Ie contenu, double-cliquez sur Ie texte avec I'outll Fleche ou activez l'outil Texte et cllquez sur Ie texte. Flash fall cllgnoter le point d'mseruon dans Ja zone de salsie. Vous rernarquez que l'outll Texte est desorrnals selectionne.

.,... Actlvez I'outll Texte et faltes passer Ie polnteur de la souris sur un au plusleurs caracteres pour lees) seleetlonner,

.,... Choislssez I'outil Texte et double-cllquez sur n'lrnporte quel mot a selecttonner.

Y' Cholsissez l'outll Texte et cllquez au debut du texte a selectionnero Ensulte, malntenez la touche Maj enloncee et cllquez a la fin de Ia portion de texte I!. selectlonner,

Y' Acttvez I'outil Texte et cJiquez dans la zone de texte. Appuyez ensulte sur Ctrl+A (Windows) ou XtA (Mac) pour selectlonner Ie texte de la zone.

108 Deuxieme partie: 1 ODD .images at 1000 mots __ ~ _

Figure 5.2:

UtilisBz Ie panneau Propri~tes pour amellorer l'aspectua votril texts.

Afin de modlJler Ie contenu du texte, seleetlonnez une zone de texte puis seleetlonnez les caracteres ou les mots que vous destrez modifier (reportez-vous a I'enumeration ci-dessus). Saislssez le nouveau texte, II remplace Instantanement Ie texte selecuonne, Les techniques d'cditlon du texte sont les memes que celles proposees par un programme de traltement de texte. Par exemple, vous pouvez appuyer sur la touche Suppr (ou Del) pour supprtmer Ie caractere a dro!te du point d'insertIon. 51 vous appuyez sur la touche retour amere, vous supprlmez Ie caractere qui se trouve a gauche du point d'lnsernon

Definir les attribute des caractere«

Vous n'etes pas obllge d'utiliser la police par delaut proposee par Flash. OeILnissez les attributs avant ou apres avolr salsl votre texte. La modification se Ialt en double-cliquant sur la zone de texte. Ensuite, selecttonnez les caracteres au les mots it mettre en forme. Cholslssez Fenetre/ProprIHe. La Figure 5.2 represents le panneau Propnetes apres s~lectlon de texte stanque.

(.011"'"' d u ~.,e (femplm.go)

CMng<! I. dllKtlon du _.

Align. ~ !I.urn","n beut "til!

Position des <,,~tt6n!. 1'<111(0

targeur 61, hau[eur --

Opdon, de Iorme,

S~I.ctlormabl. Optloru de co~ct&"" pour In con,,,,,,, de police in.4gffls

ARk"', I. bcrdure .u(Qurdu '''''Ie

Def!n;r la police, fa taitte de po'lice et le st'Jre de police

VOllS pouvez changer les caractertstlques de la police qui contrelent ses proprletes speclflques, cornme sa tame et sao style.

'" Pour chotslr une tallie de pollee, salslssez-en une dans Ie champ reserve 11 cet effet ou faltes gUsseT Ie curseur,

'" Pour cholslr un style de pollee, chquez sur B (gras), I (itallque) au les deux. Flash appUque Ie style au texte selectionne.

Vous pouvez egalement choisir des polices. des talUes et des styles directement dans Ie menu Texte.

_----------Chapitre 5: Avez-vous bon caractara 1 109

Figure 5.3 :

Texte vertical,

Creation de teste "ertie«1

Flash MX salt creer du texte vertical. L'lnteret concerne prindpalement les langues comme le chinois. Le texte vertical est obllgatotrement statlque et peut etre lu de gauche a drolte au de drolte II gauche (les notions de texte statJque, de salsie et dynamlque sont presentees plus loin dans ce chapttre). La Figure 5.3 presente du texte vertical.

T E X T E

V E R T I C A L

Pour creer du texte vertical. Ialtes comme pour du texte normal mals, avant de cllquer sur la scene pour placer le texte, cliquez sur Ie bouton Change la dlrectlon du texte dans l'lnspecteur Proprletes, puis setecnonnez une des options cl-dessous :

,; Vertical, de gauche a drolte. ,; Vertical. de droite Ii gauche.

Une autre nouvelle caracteristlque de lexte apporte la gestlon du chlnois, du careen et des chaines Unicode. Unicode est un moyen de coder Ie texte en at1ectant II chaque caraetere un nombre et un nom, II a une grande importance pour representer des langues comme l'hebreu, l'arabe, Ie chlnols, Ie japonais et Ie careen.

110 Deuxieme partie: 1000 images et 1000 mots _

Specifier fa coufeur du tene

Noire est la eouleur par detaut des textes dans FLash. U est done [udicleux d'en changer en Ionctlon de la couleur d'arrlere-plan, L'lnt~ret d'un exte est d'ilitre llslble, Par consequent, un texte jaune ressorUra bien mleux sur un land noir que sur un fond blanc. Vous devez egalement conslderer le texte place sur des Images complexes. Certaines parties de votre prose risquent de ne pas ilitre vlslbles au du mains dJ!ficlles a dechtffrer.

Pour definir la couleur du texte, selecnonnea-le. Ouvrez le panneau Proprietes comme cela est decrit dans la precedente section. Cllquez sur l'icone Couleur du texte (rempUssage) aftn d'ouvrlr la palette de couleurs. Choisissez une couleur, (pour plus d'informatlons sur les couleurs, reportez-vous au Chapitre 3.)

Vous ne pouvez pas remplir du texte avec un degrade. J] faut prealablement separer le texte. Vous apprendrez cette technique en fin de chapitre.

Pour creer un texte transparent (au semi-transparent), chotsfssez Fenilitre/Melangeuf de couleurs, Dans le champ Alpha, salslssez une valeur de transparence. 100 % donne un texte totalement opaque. 50 % donne un texte semi-transparent. 0 % donne un texte entlerement transparent. Pour apprectsr Ie resultat d'une transparence, deselecttonnez Ie texte en choisissant l'outtl Fleche et cllquez en dehors du teste,

Ajuster Ie crenatje et l'espacement

Pour obtenlr l'aspect que vous destrez, it est necessalre d'afuster I'espacement entre les Iettres de votre texte. Le crenage redutt ['ecart qui se cree entre certaines lettres, comme Ie V et Ie A Cet ecart est dicte par la dlagonale du bord gauche de la lettre A. Sans crenage, Ie V et Ie A sembleraient espaces de manlere suspecte. La Figure 5,4 montre un texte avec et sans crenage,

Pour desactiver Ie crenage, selectlcnnez les caracteres vises. Ouvrez ensulte Ie panneau Proprietes et decochez la case Crenage automatlque.

Vous pouvez ajuster l'espace entre routes les lettres. Dans certains cas, vo us aurez besom d'rnserer un texte dans un espace redult ou dans une zone et ire e. sans modifier la tal lie de la police. La FIgure 5.5 rnontre du texte qui joue sur l'espacament entre les lettres.

___________ Chapitre 5: Avez·vous bon caractere 1 111

Figure 5.5 :

Quatre variations sur Isthilme de

OivlSCZ Ia sclm~

el laisl>e'Z·la propre

Divisez 18 scene

cl l a i s s e z-La pr o pre

I'e~rement et D I \ I S ell a sec n e Divi!l:2Dia!n:

de Is eLI n i s ~ e z - I D pro pre el~~

contraction

des taxtes.

Figure 5.4 :

La premiere VA· CATION

Iigne utilise . .

un cr1mSIlB,

tandis que Ie VACATION

seconds n'an

utilise pas.

Pour modifier l'espaeernent, ouvrez Ie panneau Proprletes et salslssez une valeur dans Ie champ Espacement des earacteres. Attention! Ce panneau de Flash n'indlque pas textuellement le nom du champ. nest represente par les lettres A et V soullgnees par une neche a deux tetes. Une autre methode conslste a cllquer sur le triangle nolr et a agtr sur Ie curseur,

Iexte lien hlJpertexte

VOllS pouvez ereer du texte qul sert de lien vers d'autres pages Web, II sulfit de cUquer sur [edit texte pouraeceder iI. une nouvelle page. Volcl comment creer ce type de texte :

1. 5elecHonnez Ie texte,

2. SI necessalre, cholslssez Fenetre/proplietes.

3. Dans I champ URI., saisi.8sez l'adresse Web de Ia page it atteindre.

La case de saisle URL se trouve dans la portion etendue du panneau Prcprletes, Si necessaire, cHquez sur la tleche de developpement dans l'angle in!~rieur droit du panneau Flash cree un Hen hypertexte vers I'URL defln!e, Lorsque J'animation

112 Deuxieme partie: 1 000 images at 1 000 mots _

Flash apparalt sur un site Web, cllquer Ie lien envole I'utillsateur vers I'URL speclflee.

Verifier ('aspect au testedans un nafJifj.ateur

Bien que Flash afire un grand nombre de polices, vous lgnorez sl elles seront bien alJichees par les navlgateurs de vas vlstteurs. Une pollee s'aftlche convenablement sl et seulement sll'internaute a cette police mstallee sur son systeme, Plus ernbetant encore est que teUe police ne s'afllche pas de la meme manlere sous Windows au Mac OS. Resultat:

Ie taxte n'apparelt pas comme vous Ie souhattez et la mise en page risque d'en patlr,

Pour eviter de mauvaises surprises, Flash IncJut trois polices de peripMriquesqul aident Ie lecteur Flash acompeuser certains rnanques, Alnsi.Ia police allichee dans Ie navlgateur est celie qui se rapproche Ie plus de la police utillsee dans votreanimation :

"" sans: Une pollee sans-serf slmllalre a Arial (WIndows) et Helvetica (Mac).

Y' serif: Une police serlf slmllalre a Times New Roman (WIndows) et Times (Mac).

Y' typewri te r : Une pollee q ul res semble il. celie rradltlonnellement utllisee par les machines a ecrlre ... Mals etes·vous asses age pour en avolr connu ? EUe est simJlalre a Courier New ('Nlndows) et Courier (Mac).

Un autre avantage que l'on trouve dansce gestlonnalre de polices est une reduction de la tallte de l'anlmatlon publlee, Elle se telecharge done bien plus rapidement.

Pour evlter l'lncornpatlblllte des polices, separez-les pour en la1re des formes. Reportez·vous a Ia fin de ce chapltre pour en savolr plus. Le texte etantaJors coastdere comme un element graphiQue, 1.1 n'y a plus a se soucier de savotr sl la police est ou non presente dans te systems Informatique de l'utiJisateur.

Pour savotr 5i une pollee peut au non etre exportee avec une animanon, chotstssee AffIchage/Texte anualtase, Vous verrez un texte plus llsse, sans eftet de crenelage (escalter), SI te texte demeure crenele,

'@f~C .' Flash ne peut pas I'exporter avec l'anlmatlon,

. La pratique l'ernporte encore une lois sur la theorte, Des que vous

avez cree une animation contenant du texte, publlez-la (voir Ie

____________ Chapitre 5 : Avez-vous bon cara.ctere 1 113

Chapitre 3) et envoyez-la par e-mail a un ami qui travaille SUI un autre systeme lnionnatlque que Ie vOtre. n vous dlra ce qu'll a obtenu comma afflehage et vous pourrez comger en consequence Ie texte de votre animation.

Lors de 1<1 publlcatlon d'une animation, vous pouvez desactlver l'utillsatlcn des polices de perlpherlq1.l8S. Cette posslblllte n'est dlsponlble que dans la version Windows de Flash. Dans ce cas, Ie lecteur Flash subst1tue les polices du systeme au." pollees quJ ne sont pas lnstallees SUI Ie systeme de J'utllLsateur. (Le Chapltre 12 en d!t bien plus sur les parametres de puhllcatlon.)

Mettre en forme lesparnfj.raphes

Vous pouvez deflnir des attrlbuts comme I'alignement, Jes marges, le retralt et l'lnterlignage. Utlllseaces parametres lorsque votre texte exige plusleurs Ugnes.

Defin;r l'ali9nement du teae

VaLIs pouvez aligner Ie texte sur la marge de gauche Uustificatlon gauche) ou sur Ia marge de droite Uustification droNe) de la zone. de texte, Vous pouvez creer un texte aligne a la lois sur Ie bord gauche et sur le bard drolt. On parte de jU1ilification pieine ou de texte jusfifie. Par dliiaut, Ie texte est allgne a gauche.

Pou.r allgner Ie texte, selectlonnez-Ie puis cholsissez Fenetre/Proprietes pour ouvrlr le panneau du merna nom (voir plus haut Ia Figme 5.2). Ensuite, ctlquez sur les boutons d'ali.gnement necessaires a votre tormatage du paragraphe,

Delinir les marges et tes retraits

La marge est l'espace qui separe le bord de la zone de texte de son contenu. Par deJaut, la marge est de 0 pixel. (L'unlte de mesure utlllsee par les marges est celie defirue pour votre animation; voyez Ie Chapltre 3 a ce sujet.) Vous pouvez augrnenter III marge pou.r disposer de plus d'espace auteur du texte, Vous pouvez deflnlr unlquement les marges de gauche et de drolte, Celles du haut et du bas ne peuvent pas etre alterees,

Pour fixer la marge gauche, selectlonnez Ie paragraphe et ctlquez sur le bouton Format dans Ie panneau Proprletes pour ouvrir la fenetre de dialogue Options de format (Figure 5.6). Salslssez une valeur dans Ie champ Marge gauche. Vous pouvez egaJement cllquer sur ta petite

114 Deuxieme partie: 1 000 ima.ges et 1 000 mots _

Figure 5.6:

Ulilisez la lanDtre de dialogue Opdons de formal pour mettrs In paragraphes en forme.

lleche pour agir sur Ie curseur du champ. Appuyez sur Tab ou Entree pour appllquer la valeur. La definition de la marge drolte se Iait de III. rneme manlere mais en utllisant Ie champ Marge drone.

ptions d ... "" '''., l . - _ _

Termipe

MIi"Q_e llaucr", M"'II~ drtl~"

Le retralt dec ale une !igne par rapport aux autres. C'est comme sl VOIlS placlez une marque de tabulation. L'unlte de mesure du retratt est cella defiole pour III. totallte de l'anhnatton. Par exemple, vous pouvez mettre en retrait III. premiere ltgne de 15 pixels. POllC cela, il suHlt de seiectlonner le paragrapheet de sais!r une valeur dans Ie champ lndentatlon. LA. aussl voas pouvez aglr sur le curseur. Appuyez sur Tab ou Entree pour vailder et appliquer Ie retralt.

Specifier f'interfl'9ne

L'interUgne tlefin!t l'espace qui separe deux hgnes, Flash Ie mesure en points car 101 talJle de III. pollee se mesure egalementen points. Par exemple, sl votre texte est de 18 points de haul et que vous placez un double espace entre les llgnes, utlllsez un Interllgne de 18 points. De cette mamere, l'espace correspond exactement a III. hauteur d'uns Ilgne de texte.

Pour deflnlr l'lnterllgne, selecttonnez Ie paragrapbe. Ensuite, dans Ie champ lnterligne de III. fenetre de dialogue Options de format, saislsse.z une valeur ou aglssez sur Ie curseur en cllquant sur la !I!':che. Appuyez sur Tab ou Entree pour valider la valeur de I"Interligne.

~l,\ONI

i;(€)41<.. Flash memorise les preprtetes de paragraphe, d'une animation a "'f ~ l'autre. 51 vous modlflez les proprletes d'un paragraphe, vous les

•. ' retrouverez dans une nouvelle animation. Si votre texte parmI etrange, par exemple avec UI] retralt systematique en debut de chaque paragraphe, verlf!ez toulours les parametres deilnis dans la Jenetre de dlalogue Options de format.

_----------- Chapitre5 ; AV8Z-VOUS boncaractere ? 115

Creation de tene de saisie etde test» dlJnamit[ue

vous pouvez creer trois sortes de textes dans Flash:

Y' Le texte statique, Texte ordinaire qui n'ast pas modttlable. Vails pouvez J'anlmer.

II" Le texte de salBie. Texte que peut entree l'utlllsatear, c'est done l'equlvalent d'une case de saisie dansu.n formulalre. Permet de recuperer des valeurs, eventueliement pour affecter l"anlmation.

II" Le texte dynamJque. TexLe qui change selon des donnees provenant d'une source externe, comme un serveur Web, au une source interne, comme de J'ActionScript au du texte salsl dans l'antmation. Sert souvent Ii: af!jcher des donnees actuallsees, tellesque reseltats sportlfs, meteo et cours d'acttons.

Pour cholslr te type de texte, seJectionnez une option dans la Iiste deroulante Type de texte, dans Ie pa.nneau Proprh~tes.

Pour un exemple de texte de salsle, voyez Ie Chapltre 8.

Chapitre 6 Lescalques

• • • • • • • • • •

••••••

• • •

Dans ce cnapitre :

Creation de calques, Modilier les calques.

Utillser des calques de guide,

Creer des trous avec des calques de masque.

•

• •

• •

F:ash permet d'organlser les objets d'uoe scene en les repartissant sur des calques. Alnsl, chaque objet est separe des autres. Cette partlcularne des calques est fondamentale. En ellet, lorsqus plusleurs objets sont presents sur Ie merne calque, Ils peuvent se decouper ou s'trnbrtquer, La chose n'arrlve pas lorsque chaque objet repose sur un calque distinct des autres. Les calques soot IncontournabJes pour obtenir des anLmations factles a gerer.

Creer des calques

Flash llste les calques dans Ia partie superleure gauche de la scene. Toute nouvelle animation dispose d'un seul calque, !oglquement appale Calque 1. Vous pouvez, et merne vous devez, changer Ie nom du calque pour que sa nouvelle appellation doone une Indication sur son contenu, comme Ie montre Is Figure 6.1.

Une bonne organisation se prepare. C'est un travail qui se falt en amant de toute animation. Alnsl, vous connaissez exactement Ie nombre de calques dont vous avez besotn, Leur denominallon n'en sera que plus ladle. Mals, pour des raisons qui tlennent au temperament des createurs, pour ne pas dire des artistes, l'organlsatlon d'une animation et de ses calques se fait au fUI et a mesure de la creation des objets.

118 Deuxieme partie: 1 000 images ell ODD mots

------------------ __

Figure 5.1 : flash est le maitre de I'organisation gr~ce II ses I'------------==j

calques.

Pour creer un calque, cllquez sur l'lcone lnserer un calque representee cl-contre, Elle se trouve en bas de la IIste des calques. Une autre methode consiste a utll!ser Insertion/Calque. Flash affiche Ie nouveau calque au-dessus du calque actlf au moment de Is creation.

Pour nommer un calque, double-cllquez sur son nom. Salsissez un mot representatlf de son contenu et appuyez sur Entree,

lltiliser des calques

Tout objet cree se place par delaut sur Ie calque actlI. Le calque acili est mis en evidence par la couleur noire dans la llste des calques, avec l'lcone d'un crayon placee [uste a sa droite. (Regardez Ie calque Arcen-ciel de Ia Figure 6.1.) Pour actlver un autre calque, II suffit de cllquer sur son nom. Vous pouvez egalement cllquer sur n'lrnporte quelle llgne d'un calque dans Ie scenario.

Flash selectlonne automatlquement Ie calque sur lequel repose l'obJel que vous selectlonnez sur la scene. 511a selection s'avere diificile au regard du nombre d'obJets presents sur la scene, vous avez tout interet a selectlonner le calque correspond ant dans la Iiste des calques,

Des qu'un calque est active, tous les objets q u'll contlent dans I'lmage courante sont selectlonnes. Meme 51 un calque est deja actif, cllquez de nouveau dessus pour selectlonner ses objets. Cette lonction est tres utile pour travaiLler avec to us les objets d'un calque et pour decouvrlr les objets presents sur un calque spedflque. 51 vous ne voulez pas que Jes objets solenl selectmnnes, cliquez en dehors de tout objet.

Du Ialt que chaque objet anlme dolt etre sur son propre calque, II Iaudra souvent distribuer les objets sur dlfferents calques. Une nouvelle caracteristlque ladlite ce processus: selectionnez les objets et actlonnez Modiricatlon(Repartlr vers les calques. Celte commande epa.rgne beau coup de travail.

_--------------Chapitre 6: Les calques J 19

Modifier l'etet des call{ues

En plus d'etre au non actifs, les calques possedent trois etats qui deterrnlnent comment les objets fonctionnenl au apparaissent sur un calque. Ces etats permettent d'organiser plus atsement votre travail. Plus vous avez d'objets et plus vous dlsposez de calques, done plus vous manlpulerez ces etats.

A drolte du nom des calques, vous voyez : un cell, un cadenas et un carre. Ce sont des symboles mystiques dorrt void la slgnillcation.

A f(ieher/masquer

Vous pouvez masquer tous les objets d'un calque. Cela [acUite Ia lIsibHite de votre espace de travail (notez par aJlleurs que les calques masques ne sont pas publles avec l'animation). Pour rnasquer un calque, done son contenu, cliquez dans la colonne correspondent a J'ic5ne de 1'0011. Flash place un X Indiquant que Ie calque en question est masque. Cela evite de I'oublier et de se demander au ant bien pu passer tels au tels objets, Pour lalre reapparrui:re le calque et ses objets, 11 suffit de cliquer sur cet X rouge. 1] disparait aiors que les objets du calque relont leur apparItion. N'oubUez pas qu'll est Impossible de travailler sur un calque masque, Vous pouvez masquer tous les calques en cliquant dlrectement sur l'icone de l'cetl de la palette des calques,

Pour afjjcher all rnasquer tous les calques saul un, malntenez la touche Alt (Windows) au Option (Mac) entoncee et cllquez sur l'lcone de l'cetl du calque que vous souhaltez afficher. Tous les autres calques sont alors masques. Vous pouvez egalement cllquer sur le calque a afficher avec Ie bouton droit de la souris au effectuer Ctrl-Cllc (Mac), et cbotslr Masquer les autres dans Ie menu contextuel.

(/errouillerldellerrouilfer

VOIlS pouvez preventr la modIfication du contenu d'un calque en Ie verrouillant. Cela evlte de commettre des erreurs parlols lrreparables. Pour verroullier un calque. cllquez dans la colonne de l'lcona du cadenas. Flash place un cadenas et barre d'une dlagonale rouge Ie c.rayon. Pour deverroulller un calque, cllquez slmplement sur Ie cadenas. Vous pouvez verrouilJer taus les calques en cltquant directement sur l'lcone du cadenas sltuee en haut de la palette des calques. Cllquez de nouveau sur cette leone pour deverroulller tous les calques. Cependant, gardez a l'esprtt Que vous ne pouvez pas travailler sur des calques verroullles.

120 Deuxiemepartie : I 000 images ,et 1 000 mots _

Pour verroulller ou deverrouiller tous les calques saul un, malntenez la touche Alt entcncee (WIndows) au Option (Ma.c) et cllquez dans la eolonne del'tcfme du cadenas. Vous pouvez egalement cliquer dessus avec Ie bouton droit de la souris (WIndows) au effectuer Ctrl ... CUc (Mac) pour acceder au menu contextuel. Choislssez-y Verrou!!ler les autres.

Contours

Vous pouvez aiflcher les objets sous lorme de contours de dlfferentes couleurs, Les contours permettent d'ident1f1er facUement a quel calque appartient tel objet, car tls sont representes d'une couleur dHie-rente, comme en ternolgne la Figure 6.2 (quotque au nlveau representation couleur on fasse bien mleux). Pour aiflcher des contours, dlquez dans la colonne de l'tcone des contours. Les objets apparaissertt sous lorme de contours dont la couleur correspond a celle du carre situea drotte de chaquecalque. Seul le texte reste rempll. Cliquez de nouveau sur un csrre vide de la palette des calques pour afficher plelnement Ie au les objets qu'li contient. Paul" afilcher tous les objets sous forme de contouracliquea directement sur 1'.icOne de contour de la palette des calques. Cllquez de nouveau dessus a tin que taus les objets reprennent leur lorme normale,

Sur ta F'igure 6 .. 2, le mot Evolution II ete separe pour etre anlrne. II est done represente sous forme de contourcomme les autres objets.

Figure 6.2:

Tous les objets de Ie sciina sent affichlis scus forme de

eo n to urs sa ul Ie te:d!l non separe.

r------·---------·- .... · .. ·· .... ·

I Texte

L ~ .. _. .. _ ... __ ... _ ...

_ ~Chapitre 6: Les calques 121

Pour afficher tous les calques sauf un, maintenez la touche Alt enfoncee (WIndows) au Option (Mac) el cllquez sur !'Icone de contour du calque dont vous desirez afficher normarement les objets.

Gestion des catl{ues

Une bonne gesnon des calques est gage d'une animation salne. Supprime.z les calques dont vous n'avez plus besotn, renommez ceux dont Ie contenu a change, coplez les calques avec leurs objets ; en d'autres termes, conserves un centrale absolu sur vas calques.

toile .. ... _

Vous pouvez selectlonner plusleurs calques en meme temps. Pour une

selection contigue. cllquez sur Ie premier calque,. maJnte. nez la touche MaJ enfoncee et cllquez sur Ie derniercalque. Pour sAlectionner plusieurs calques non contlgus, cllquez sur Ie premier calque,

raalntenez Ja touche Ctrl (WIndows) au X (Mac) enfoncee et cllquez SUI les calq ues a falre entrer dans la selection.

[~]

Supprimer des call{ues

Au fur et a mesure de l'avancee de votre travail, vous pouvez conslderer qu'un certain nombre de calques n'ont plus de ratson d'etre. Supprtmez-les ! Cllquez sur leur nom pour les selecttonner, puls SUI l'lcone de Ja poubelle,en bas a droite de In palette des calques.

,oIo."iION,

§fl)..\I<' SUPPrlmc.r un calque su.pP. fl.me e.sale.men. t. son conte ... HU, Cela .peut

q' A'" entralner de mauvalses surprises cartout n'est pas forcernent visible

• ,. sur un calque 11. un moment prects, Parexemple, 51 un cercle fait son apparition sur la trame 15 d'une animation d'un calque nomme Cercle et que la tete de lecture du scenario se trouve sur latrarne I, vous ne pouvez pas voir Ie cercle, 51 vous supprlmez le calque en vous basant uniquement sur ce que vous voyez surla trame 1, vous supprlrnez egaJement tout ce qui se trouve sur les autres trames de ce calque.

'i'<\lC Pour verifier la presence d'objets sur un calque, cllquez dessus avec le

bout.on dT.Olt de la sourIs. Cholslssez Masquer les autres, CUquez sur 111. premiere trame du scenario et appuyez sur la touche Entree pour lire l'animatlon. Les objets presents SUI Ie calque appara1tront durant

cette lecture. Min de bien voir I'anlmatlon, vous devez cbolstr Contr6le/Tester l'anlrnatlon. Cela est important sj vous avez utillse AcUon5cript pour contrcler l'anlmatlon.

122 Deuxiemepart.ie :IODO images et 1 000 mots _

Copler des ca./ques

Vous pouvez copier un calque avec la totallte de son contenu, c'est-adire tout ce qui est contenu sur les dlverses trames composant l'animation speclflque dudit calque. 51 vous avez cree une balle qui rebondlt et que vous souhaitez main tenant deux belles qui rebondlssent, coplez le premier calque. Vous modlfterez par la suite la position de la seconde balle pour qu'elle ne se superpose pas ~ la premiere; sinon VOllS ne la verrlez pas. En quelques petites manipulations, VOUS disposez de deux balles qui rebondtssent,

Volcl comment copier des calques:

1. CUquez sur Ie nom. du ca1quea se.lectioDD.er.

2. CboisJssez Edition/Copier lea tmages,

3. CUquez sur Ie bontonlnserer un calque pourcreer un nouvecau calque.

4. ~lectlonnezle nouveau calque,

5.. Choislssez EdiUon/Collage special.

Renommer les calques

Renommez un calque sl vous Ie souhaitez. Par defaut. Flash nomme las calques Calque I, Calque 2, etc. Lorsque vous utllisez des calques, renommez-Ies pour que Ie nom renete Ie contenu du calque. Doublecllquez sur Ie nom du calque et salslssez un nouveau nom. Appuyez sur Entree pour Ie vallder

Vous pouvez reuommer un calque de multiples Iacons.

Reorfjaniser les calquee

Au Chapltre 4, nous expllquonscomment changer I'organisatlon des objets sur la scene quand !Is sont sur le rneme calque. Mals, lorsque des objets se sltuent sur des calques dlfferents, de nouvelles ri:!gJes s'appllquent,

L'ordre des calques lndlque l'ordre d'afflchage des objets sur la scsne, Done, les objets du premier calque de la lisle des calques sont toulours par-dessus las autres, Les objets du deuxietne calque se trouvent UJ] nlveau en dessous, ceux du trolsleme un nlveau en dessous du deuxleme calque done It deux niveaux du premier, et ainsl

_______________ Chapitre 6 : les calques 123

Figure 6.3 .

En rna dilis nt I'ordre des calques, vous modi~ez aussl l'nrdra des Objets prsssms sur ces calques.

de suite. Les objets du dernie.r calque se trouvent au dernier niveau de la scene. derriere tout te teste.

La manlere la plus simple de contri'iler I'empilement des objets est de les placer sur des calques dlstlncts. Ensuite. II suHlt de deplacer un calque vers Ie haut au te bas, pour le sltuerau bon ntveau de votre animation.

Afin de deplacer un calque dans la hierarcbie de la palette des

calques, cllquez dessus et faltes-le glisser a J'emp.1acement souhane, La Figure 6.3 montre un exernple de disposition des objets avant et apres d~placement des calques. La balIe et t'ovete sont sur des calques dlstincts. Quand vous reorganlsez les calques, tes objets sont eux

au ssl reorganls 1':5.

'@flllC·Modlllerl'ordredesCalqUeSpemlet de selecttonner et d'edlter des

. oble. ts dlsslmules derriere d'all. tres~lements. FaRes glJsser Ie calque

[usqu'en haut de la liste. Des que vos modifications sont terrnlnees, replacez Ie calque a sa position d'orlglne.

Orl}anisati(ln des calque«

!l arrive de devolr gerer de LTeS nornbreux calques. Une nouvelle caracterlstique de Flash MX permet d'organlser l'ensernble en placant les calques dans des dossiers. Par exemple, vous creerez un dossier Actions pour les calques con tenant les actions et un dossier AnIma-

tlon contenant tous les calques d'objets anlmes,

Pourcreer un dcsster, cllquez sur l'lc6ne Inserer un dossier de calque, au-dessous de la I1ste des calques. Un nouveau dosster apparait audessus du calque actlt Pour nommer Ie dossier, eperez comme pour un calque: double-cllquez dessus, tapez Ie nom et appuyez sur Entree

724 Demcieme partie: 1000 images et 1000 mots _

au Return. Les dossiers sont faciJement dtsnngues des calques du fait de leur icone de dossier bien dlfferente.

Une fois Ie dossier en place, vous y tnserez des calques en les cllouantgllssant a I'interieur. Faites gllsser Ie calque [usqu'a la rangee du dossier. n (aut que l'lcdne de dossier s'assombrlsse. Le nom du calque est lndente pour montrer clatrement qu'Il Iair partie d'un dossier (Figure 6.4).

Figure 6.4:

Placez vos calques dans I--'.::=':=

des dossiers pourune meilleure

o r9 8 nisation. 1!'::::::""'''''=7---:--:-"'''---'-=:'i

11 est possible de placer des dossiers a l'lnterleur de dossiers. II sufflt de Ialre glisser un dossier sur un autre. Voici d'autres operations possibles sur les dossiers:

" DcpJacer un dossier hors d'nn autre dossier. Faltes glisser Ie dossier lrnbrtque au-dessus de son dossier parent.

yt Deplacer un calque bors d'nn dossier. Paites gllsser Ie calque au-dessus du nom de son dossier ou a un autre emplacement <:Ii) cela n'assombrlt pas une ieone de dossier.

Ii'" Redulre au developper un dossier. Cltquez sur la neche 1I gauche de l'icone du dossier.

Ii'" Developper all redulre tousles dossiers. Cliquez du bouton droit (Windows) ou avec la touche Ctrl enfoncee (Mac) et actlonnez Developper taus les dossiers au Redulre tous les dossiers dans Ie menu obtenu.

" Masquer au verrouiller un do ler et sea calques. Vous pouvez masquer ou verrouiller un dossier exactement comme un calque (voir "Modlfle.r t'etat des calques" plus haut dans ce chapitre). Cltquez dans la colonne de I'ceil ou de cadenas dans la rangee du dossier.

_--------------Chapitre 6: Les calques 125

" Modifier J'ordre des dossiers. Changer l'ordre de dossiers madlfie automatiquement I'ordre des calques contenus dans ces dossiers. Faltes gllsser l'tcone du dossier vers Ie haut au Ie bas. Pour plus d'informatlons, reportez-vous a la section "Reorganl. satlon des calques" un peu plus haut dans ce chapitre.

Ii'" Copier Ie centenu d'un do Ier dans un autre dosster, Redulsez Ie dossier et cllqnez sur son nom. Choislssez &!itlon/Copler les Images. Creez un nouveau dossier. Ce nouveau dossier etant aeU!, actlonnez Edition/Colier les images.

Ii'" Supprimer des dossiers. Vous pouvez supprlmer des dossiers de la meme fa~on que des calques. Seleetlonnez Ie dossier et cllquez sur I'lcone de la corbeille.

~"'IONI

$(l)";; La suppression d'un dossier supprlme taus les calques dans ce dossier ~ et tout ce qui existe sur ces calques. Flash vous en averttt avant de

• proceder.

I

Figure 6.5 : I

La baits de

dialogue I

Proprietes du calque

permet

d 'ajust8r certains parametres inharents aux calques.

Modifier les proprietes des calques

Vous pouvez utillser la boTte de dialogue Proprietes du calque, representee FIgure 6.5, pour modifier certaines proprieres lIees aux calques, comme la couleur du contour et la hauteur du calque. Cholsissez Modtflcatlon/Calque alln d'ouvrlr ladlte boite de dialogue.

~"'" lB-~;;; •. __ ~='I PAl"",", ""[)'POI r. 110m .. rG ..... r

" I.e champ Nom amehe Ie nom actueJ du calque. C'est lei que vous pouvez renommer Ie calque (entre autres).

Ii'" Modlllez les etll.lB d'afflcbage et de vermulllage en enehant 011 d6coch!mt les cases approprlees. Habltuellement, vous modlilez

126 Deuxieme partie: 1 DUO images et 1 000 mots _

ces l!tats dlrectement dans la palette des calques, comme cela est expUque precedemment dans ce chapltre,

yt VOUB pouvez modifier le type de calque dans 18 zone Type. Le calques de guide et de masque sont traltes un peu plus loin dans ce chapttre.

v VOU5 peuvez modifler la eouleur utl.llsee par F188h pow' afflcher Ies centours d'no calque sptkifique. Cllquez surl'lcone CouJeur du contour et selectlonnez une nouvelle teinte dans la palette.

v VerlIie:z si l'optlon AffIcher Ie calque sons forme de contours est 011 non actlvee. II est tres facile d'executer cette tache dans la palette des calques.

yt VOU8 pouvez doubler on tripler 10 hauteur du calque. Le but principal de cette modltlcatlon est d'alficher l'onde d'un flcb! r audio sur un calque contenant du son.

Une fois les proprtetes dl!flnies, cllquez sur OK.

Creer des calques de guide

Un calque de guJde est un calque invisible dans l'anlmannn publlee. Les guIdes permettent de dlsposer preclsement les objets sur la scene. Mais on constate une chose interessante, Aujourd'hul, la conception Web repose sur I'utillsation et l'afflchage de grilles diverses durant I'animatlon. C'est le look rnoderne du Web, Vous pouvez egalement importer une image bitmap sur un calque de guide et desslner pardessus en utillsant uo calque normal et les outtts de dessln de Flash. Cette technique de dessln SUT une image existante perrnet de crl!er des ellets artisttques lmpresstonnants.

Bien sur, vous pouvez toulours unllser un calque normal dont VOllS eflacerez tous les graphlques que vous ne souhaltez pas voir apparaiIre dans l'antmanon finale. Mals, 51 [amals VOllS devez eIfectuer des modifications sur ce calque, II faudra de nouveau creer des guides. En uUllsant un calque de guide, VOllS pouvez lalsser les guides aussl longtemps que I'exlge la conception de votre animation, sachant que

(l)~ p~ ces guides ne seront pas publles avec l'anlmatlon,

,r::;

~ Les calques masques apparaissent dans Ie llchler SWF publle,

Vous pouvez placer line trajectotre sur un calque de guide pour controler Ie deplacement d'un objet pendant une animation, La Figure 6.6 montre un tel calque de guide contenant un skateboarder.

_--------------Chapitre 6 : Les calques 127

Figura S.6 :

Vcus pnuvez utlliser un calque de guide pour contrOler Ie IIliplacement !I'un objet pendantune animation.

Uoe lots anlme, ce jeuoe garcon fait deux loopings en sulvant Ie guide de deplacement, (Le Chapitre 9 expllque comment creer des guides de deplacement.)

Pour creer un calque de guide, commencez par creer un nouveau calque, Sous Windows cllquez des sus avec Ie bouton droit de la sourIs, sous Mac taltes Ctrl-Cllc, et eholslssez Guide dans Ie menu contextuel. II n'en faut pas plus pour que Ie calque devienne un calque de guide.

Sulvez les memes etapes pour convertlr un calque de guide en calque normal. L'option Guide de ce menu est une eornmande a bascule. Une coche apparait devant pour Indlquer qu'elle est active. Reselectlonner cette option la deselectionne, et Flash supprtrne ('etat de guide du calque.

Lorsque vous utillsez un calque de guide comme guide de deplacement, Flash lie Ie calque de guide au calque contenant l'objet qui doit etre alnsl guide, Le calque qui sert de guide est alors appele calque de guide de mouuemenl. Sur In Figure 6.6, la boucle se trouve sur un calque de guide et Ie skateboarder sur un calque de guide de rnouvement. Tous les objets presents sur ce calque sulvent la trajectoire du guide de mouvement. Pour lier un calque A un calque de guide de mouvement, laltes ce qul suit :

v Creez un nouveau calque SQUS Ie calque de guide.

v Faites glJsser un calque exlstant sous Ie calque de guide.

v Faites Alt-Cllc (WIndows) ou Option-Cllc (Mac) sur Ie calque, v Cholsfssez Modification/Calque puis GUide.

128 Deuxit!lme partie: 1 000 images et 1 000 mots _

Flash met en retralt le calque guld~ par rapport au calque de guide pour vous alder a bien votr que Jes deux calques sont lies.

SI VOllS souhaltez brlser le lien qui extste entre ces deux calques, deplacez Ie calque guld~au-dessus du calque de gulde au chelslssez ModlIicationjCalque. Dans la bette de dtalogue Proprll!:tes du calque, selectionnez Normal. Vaus pouvez egalement lalre Alt-Cllc (WIndows) au Optlon+Cllc (Mac) sur Ie calque gulde pour basculer son etat.

Ou"rir ties {enetre« auec les calques de masque

Figure 6.7 :

Vous pouvaz utiliser un masque pour wier un trou dans lequal vu U 5 voyez Ie eontenu du Dudes calques qui se tmuvent justa en dsssous.

Un calque de masque cache taus les objets qui se trouvent sur Ie calque dont II depend A l'exceptlon des lormes remplles ou du texte, Vous pouvez utlllser des calques de masque pour creer des effets de hublot au de halo iumineux (poursulte). I..a Figure 6.7 montre un trou de serrure cree avec un masque qui cache Ill. totallti: du Jardin saul la partie qui se trouve dans le trou de Ill. serrure, En fait, Ie Jardin est un rectangle bten plus grand que la portion afflchee par le trou de serrure,

Creer un call{ue de masque

Voic! comment creer un calque de masquelnctuant l'objet dudlt calque et les objets qul se trouvent derriere lui:

_--------------Cha.pitf'e 6 : Les calques 129

1. creez lea objets que V01l8 d&.irez faire appamilre derriere Ie "Iron" c:reuse par Ie calque de masque,

Cas objets peuvent se trouver sur un au plusleurs calques. Placez taus les calques 11. masquer les uns a cote des autres et au-dessus de Ill. lisle des calques.

2,5electionnez Ie calque sup&teW', ClJquez 8W' Picone w8erer lID calque .. Un nouveau calqueappar8.J."l en baut de Ill. paleLte des calques.,

Ce calque sera le calque de masque,

S. Creez, inse.rez ou importe:z. une forme reDlpUe, lID texteou l'oecurrence d'un symbolesW" Ie nouveau calque (voir Ie Chapltre 7 pOW" plus de detaIls sur lea symboles).

La partie remplie de Ill. forme, du texte ou de l'occurrence devient Ie "trou" - en d'autres termes, transparente, les portions vides des objets deviennent opaques, Alnsl, taus les objets deviennent l'inverse de ce qu'Ils sout vtsuetlement,

4. COquez, avec Ie bouton droit de la souris (Windows) ou en matntenaat Ia touche Ctrl (Mac), Sill" Ie nom du calque, DimS Ie menu oonlextuel, choisissez Masque,

Flash transtorme Ie calque en masque et le verroui1le au meme titre que Ie masque qui se trouve [uste sous lui. Le calque masque est en retralt.

Modifier des catt{ues de masque

Comme Flash verrouille aussl bien le calque de masque que le all les calques Qui sent masques, vails ne pouvez pas tes modifier, Pour y parvenir, I.llaut cllquer sur le cadenas qui se trouve en haut de la i!ste des calques, Flash deverroullle les calques et supprlrne J'eflet de masque,

Des que VOIJS avez rermtne [a modification des calques, verreulllez-les de nouveau pour afUcher I'efiet de masque,

Lorsque VOIlS creez un calque de masque, Flash ne lle que le calque qui se trouve [uste en dessous du calque de masque. Un calque lie a un calque de masque est masque. Si vous placez des objets sur plusleurs calques. que vous desirel masquer, vous devez modifier les proprtetes de taus les calques en les fa/sant passer de normal a masque.

130 Deuxiemepe.rtie: 1 DOD images et 1000 mots _

~\.\up--4.r Taus les calques que vous desirez masquer doivent etre dlrectement i:>;;;~ places sous le calque de masque.

~II .

Vous pouvez lIer un calque a un masque de plusleurs tacons :

Troisieme ,partie Entrer

dans la syrnbolique

yt 5i vous deplacez un calque normal dlrectement sous un calque de masque, Flash Ie !Ie au calque de masque, en plus des calques masques exlstants.

V' PaRes Alt+Cllc (WIndows) au Ctrl-Cllc (Mac) sur Ie calque que vous desirez masquer.

V' CUquez sur Ie calque avec Ie bouton droit de la souris (Windows) au en maintenant Ia touche Ctrl entoncee (Mac). Dans Ie menu contextual, chotslssez Proprletes. Dans la boite de dialogue Propnetes du calque, cho!slssez Masque.

De mantere ldentlque, vous pouvez supprimerle lien extstant entre un calque et un calque de masque:

V' Deplacez Ie calque He au-dessus ducaJque de masque.

yt CUquez sur le calque avec le bouton droit de la souris (Wlndows)ou en malntenant la touche Ctrl eofoncee (Mac). Dans Ie menu contextuel. choistssez Proprletes. Dans la bo1t~ de dIalogue Proprietes du calque, chotstssez Normal.

V' Faltes Alt+Cl!c (Wi.nclows) au Ctri+Cllc (Mac) sur Ie calque. S'U est masque, Flash change son statu! en normal.

.1I.A8

Gxoa

Animer des catt(ues de masque

Les calques de masque sent bien plus drOles quand on les anime. VOUS pouvez las laue bouger, modifier leur taille et leur forme. 51 vous cree:z un trou de serrure comrne celul de la Figure 6.7. vous pouvez deplacer Ie troll pour deceuvrtr les autres parties de l'lrnage masquee, UtUlsez la meme technique pour creer un elfet de poursulte lumlneuse qui. eclalre une portion bien speclfique d'une scene (comme au drque ou au music-hal!). La seulechose que vous ne pouvez pas fal.re c'est anlmer les objets du calq ue de masque selon une trajectoire de deplacement (le Chapttre 9 expllque comment animer les masques et leurs objets). Plash MX presente une nouvelle caractertstlque servant ~ creer des animations de masques plus complexes, via ActionScript (voir Ie Chapltre 10).

"Regarde ! J' ai cree un petit brigand qui court sur notre site et se cache derriere les bo:nnieres publicitalres. Sur la derniere page, notre logo le place en etat de choc et lernmene a notre page d'eccueil."

Dans cette partie ...

L es symboles nous font errtrer dans les niveaux Ies plus prolonds de l'extstence. Dans Flash, les symboles vous !ntrodulront au ceeur des rnecanlsmes qui regissent les animations. Dans c.ette partie, vous apprendrez tout sur les trois types de symboles - graphlque, bouton et cllp d'animatton.

La manipulation des symboles est un aspect fondamental de Flash. Les symboles permettent d'utlllser plusleurs fois un merne graphique sans alourdlr signUlcatlvement l'anlmatlon. Sachez egaiement que dans la majorite des cas, vous utilisez des symboles pour animer vos objets. Cette partie vous presente les boutons, ces objets sans qui la deambulation sur Ie Web ITe sauran exlster. Tout Ie XXI- steele, et peut-etre plus, rlsque d'etre ccndltfonne par ces elements graphiques navigatlonnels. Flash permet de creer des boutons dont l'aspect change lorsque le pointeur de 12 souris passe dessus, et quand vous cllquez dessus, Vous pouvez merne creer des boutons anlmes. Vous comprendrez alsement que cette trotsleme partie rournlt les bases de la ereatton de superbes anlmatlons.

Chapitre 7 Svrnbolisme puissant

• •• •••••••••••••• ••

Dims ee cnapitre :

Decouvrlr les types de symboles, Creer des symboles,

Creer des occurrences,

• • •• •• ••• ••

• • •• •

Dans Flash, la simplification du travail passe par les symboles. Un symbole peut etre n'lmporte quel objet ou combinalson d'objets, animation au bouton Web. Lorsque vous creez un objet, it devient un symbole. Cela VOliS fait penser au regroupement ? Vous avez raison I La difference ld est que Flash stocke la definition d 'un symbole dans une blbllotheque. A partir de la, vous pouvez, sans aucun effort partlculler, lnserer de multiples copies de symboles dans votre animation. Chaque cople est appelee une occurrence. Avant d'entrer dans Ie vii du sujet, no us pouvons dire que les symboles entourent Ie bon utilisateur de Flash. IJ les utllise autant que possible.

Comprendre les tlJ.pes de slJmboles

Flash ollre trois types de symboles. Chacun est falt d'un groupe d'objets ou d'une animation. Cependant, chaque type poursult un objec.ti! partlculler, Com prendre eet obleetlf, c'est comprendre l'utiJlte des syrnboles en Ionctlon de leur categorte, En un mot: c'est comprendre les prlnclpes quJ reglssent les animations flash.

Utiliser des slJmboles qraphit{ues

Les symboles graplliques sont les plus simples et les plus laclles a apprehender. Lorsque vous ereez une animation Flash, vous placez des objets sur la scene. Certains objets resteront a [amala Lmmobiles, comme l'arrlere-plan. En revanche, sl vous ullJisez Flash, c'est bel et

134 Trnisieme partie: Entrer dansla symbolique _

Figure 7.1 :

Un symbols graphique, cree 8 partir de plusisurs obJrm, n's qu'una seule marque de selection.

bien pour anlmer des objets I Utilisez les symboles graphiques pour les series d'objets statiques ou anlmes, La Figure 7.1 montre un symbols graphique cree avec des courbes et des cerctes.

Vous creez des symboles graphiques pour redutre la taJlle de votre f!chJer et facillter l'lnsertlon de plusleurs coples de ce graphlque dans votre anlmation. Les symboIes sont stockes dans la blbltotheque, Atnst, lis deviennent dlsponibles pour toutes vas futures anlmatlons. Utillser des syrnboles est une excellente manlere de stocker des images qui seront utlllsees dans votre univers Flash. Vous n'aurcz pas a les recreer.

Flash ne reconnait nl les sons niles actions qui se trouvent dans les symboles graphiques. Les actions (que nous traitons au Chapltre 10) sont la cIe des animations lnteractlves, Pour cette ralson, ne convert is· sez une an imatlon en symbole graphiq ue que sl elle est simple. Le symboles graphiques sont toulours places dans le scenarto prindpal de I'animatlon.

Utiliser des slJmboles clip d1animation

Les clips d'anlmatlon ont ete Introdu1ts dans Flash 4. Un clip d'anima· tion est com me une animation dans une anlmatlon. VOUl> pouvez manlpuJer celle-cl grace a des eon troles interactlfs (aussl appeles actions et crees avec ActionScript, que nous trauons au Chapltre 10). Les dips d'anlmatlon sont mcon to urn abies pour les animations complexes, notamment Inter actives. Un clip d'anlmatlon ne prend pas place dans Ie scenario principal 11 possede sa propre llgne temporelle (ou scenario) et peut done etre anlrne lndependamrnent de I'anlmation qui Ie contJent. Dans ce chapltre, nous expllquons comment creer deS

Chapitre 7 : Svmbolisme puissant 135

clips d'anlmation. Le Chapltre 8 tralte de I'utllisation des clips d'ammatlon avec les boutons. Le Chapltre 9 couvre I'utllisation des clips d'anlmatlon dans les animations. Le Chapitre 10 expllque comment utilise! et ccntroler des dips d'anlmatlon avec des con troles Interactus,

Utiliser des slJmholes bouton

Les symboles bouton creent des toutans - ces petits graphlques sur lesquels VOliS ellquez tout au long de vas deambulatlons sur Ie Web pour passer d'une page 11 une autre et merne d'un slte a un autre. Dans Flash, vOUS utlIisez les boutons exactement de la meme rnanlere, rnals VOliS ne pouvez pas donner aux boutons l'opportunlte de lire au non une anlmatton, Quand vous avez clique sur Ie bouton,l'anlmation demarre. Vo us pouvez utlllser des scripts elabores pour creer des boutons qui contrclent des [eux InteractiIs et d'autres activi:tes de vos vlslteurs, Cependant, la mise en ceuvre de boutons commence toujours par la creation de symboles de type bouton. II est possible d'ajouter des clips d'anlrnation et des controles i.nteractifs aux boutons. Cnnsultez Ie Chapitre 8.

Creer des slJ.mboles

Dans de nombreuses c!rconstances, vous creez les objets necessatres a votre animation et vous les corrvertlssez ensulte en syrnboles. La creation d'un Clip d'anlmatlon rei eve d'une autre methode, car i! s'agtt d'un type partlculier d'animation. Solt vous creez une animation sur la scene et vous Ja ccnvertlssez en symboie de type clip d'anlmanon, solt vous creez le symbole clip d'anlmatlon, les objets fnltlaux et ensulte l'arumatlon,

Volei comment creer un symbole a partir d'un objet:

1. seJectlonnez lea objets presents sur la scene que VOWI desirez convertlr en symbole.

2. Cholslssez Insertlon/CoDvertir en symbole ou appuyez sur la touche FB.

La boTte de dialogue Convertlr en syrnbole appara1t com me sur la Figure 7.2.

3. Dans Ie champ Nom, attrlbuez un nom igniDcalil it votre symbole.

736 Tr'oisiemepaltie: Entrer dans la symboliq:ue _

Figure 7.2:

Utilisez Ie boits do dialogue Convertiren symbols pour splicifier Ie nom 911a type de symbole.

I~

4. Dans la zone Comportement, actlvez Ie boo 100 radIo qui correspond an type de symboJe que VOUll fKlnba1tez creer :

CUp, BoutonouGraph1que.

5, CUq.oez sur OK pour creer Ie symboIe et fermer la bone de d.1.alogue Convertiren symbole.

Les objets selectlonnes ne forment plus qu'un seul objet Identl!le par une marque de selection unique. Flash stocke Ie symbole dans la bibliotheque. (Le Chapttre 2 expl1que comment utiliser la blbUoth~que.)

Chaque type de symbole posssde sa propre ieone presents dans la btbllotheque .. La lisle ct-desscus presente les leones qulldentilient les symboles :

~i CI.ip d'anlmatloa

<t9: Bouton

m Graphlque

Plutfit que de convertlr des objets exlstant en symboles, vous pouvee creer un symbole vide. Plus tard, vous concevrez les objet.s du symbole. SI vous savez a l'avance qu'un symbole est necessalre, sans pour autant en detinlr Ie contenu, !altes ce qul suit:

I. Sans aucun objet seJectionnc, cbolslssez lnsertioo/Nouveau symbole.

La bolte de dialogue Creer un syrnbole appara1t.

2. Dansie champ Nom, salsisscz Ie nom de votresymbole,

_ Chapitre 7: Symbalisme puissant 737

3. DanslB.llste Comportem.ent, cholslsscz Ie type de symbole que vous dbIrez creer: QJp, Bouton 00 Grapblque; cllquez ensuite Suf OK.

Flash bascule alors en mode d'edition du symbole que nous decrtvons un peu plus loin,

4. Creez les objets ou I'animatlon du symbole de III meme manlb'e que vons editez UD.e animalion stBndard.

5.. Cbolslssez Edition/Modifier Ie document pOUT sortir du mode d'editlon do symbole et revenlr a l'arumatlon prln.clpale.

Votre nouveau symbole dispara1t I Ne vous lnquletez pas ! Flash enregtstre Ie symbole dans la bibllotMCjue. Pour I'lnserer sur la scene, reportez-vous a la section "Inserer des occurrences", plus loin dans ce chapitre.

Vous pouvez creer un symbole de clip d'ammatlon en convertlssant une anlmatton standard en clip d'anlmation. Utllisez cette methode lorsque vousavez deja crM l'antmatlon sur votre scenario.

Pour operer une telle conversion, reportez-vous !lUX etapes sulvantes :

I. Dans Ie scenario, selectlonnez toutet les Images (tram.es) de tous les calques contenaot I.'anlmatlon. CUquez sur Ie prem1er calque et, tout en maintenant Ia touche MaJ enfoncee,cUquez sur Ie demier colqucconccrne.

Pour selecncnner ces calques non consecutlfs, Jaltes Ctrl ('Nlndows) ou at: (Mac), et cliques sur les calques II. alouter a [a selectron.

2. Sur te scenarto, cllquez avec le boutoa droll de 18 souris (Wludowa) elcbolslssez COpIer les ima.ges.CeHe action eople toutes les lm.ages de l'animatJoodans Ie presse-paplere, Sur Mac, effectuez la m@meoperation mals en maintenant la louche Ctrlenfoncee.

Une alternative conslste a cnotslr ~dltlon/Copier les Images.

3. Vertfiez qu'aucDD. objet n'est s~ledlonn(l el chols:issez lnserHoD/Nouveau symbole.

La boite de dialogue Creer un symbole appara1t.

4. Dansie champ Nom,attrlbuel. un nom slgn:l.flcatifau cllp d 'animation.

5. Dans la I.l.ste Comportement, choiBissez. Clip.

138 Troisiemepartie : Entrer dans la symbolique _

6. CUquez: sur OK pOW' fermer ta boile de dialogue .PropriHes do symbole.

Plash bascule lustantanement en mode d'editlon du symbole.

7. ClIquez sur la premJere trame du srenarl.o pour dellnlr le point de depart du symbole clip d'anlmatlen.

8. Cholsbsez tdJtlon/CoDer les lmages POW' coller I'anbnatlon dansJe scenario et ain.9.i creer Ie symbole.

9. POUl' revenIr d8nsl'animatlon et Ie scen.arl.o principal, ehelstssez EdItion/Modifier Ie document,

10 . .PoW' supprJmer l'enlmatlon de l'an1matlon prlncipale (vous n'enavee plus besoi.o pulsqu'elle exlst:e sous forme de clip d'animatlon), selectionnez tous les calques comme nOlls l'avo08 fall a I'empe J. ChoisiSSel ensnlte InsertI.onfSupprlmer les images.

Vous pouvez maintenanl supprtmer l'anlrnatlon dans I'anlmatlon princlpale car vous disposez dans Ill. btbllotheque d'un clip conterrantcette animation.

La derntere methode de creation d'un symbole constste a dupllquer un symbole extstant, Volcl comment proceder ;

1. Ouvrez la blbllotheque (Fenetre/Bibliotheque).

2, 5e.Iectionnez Ie symbole que vans dMirez dupliqner.

3. CUquez sur te menu Options sltue dlUlsle co-In snperieUl' droit de la blbllotheque et eholsissez Dupllquer.

Plash ouvre la boite de dialogue Dupllquer le symbole.

4 .. Dansie champ NOID,attrtbuez un nom slgnlfieal:l.f au symbole d.upUque., pulschoisissez IUl type dans 1.8 zone Comportement. nest en eUet possible de creer un type de symbole different de l'origlnaJ.

5. CUquez sur OK pOW' fermer 18 boite de dIalogue et ereer Ie symbole dupllque.

ChanfJer le tlJpe deslJmhole

Dans vos creations Flash, it arrlvera qu'un syrnbole delve changer de type en cours d'exlstence, comme passer de graphlque 11 clip d'anlmatton II ny a aucun problemel

Chapitre 7 : Symboli.sme pu.issant 139

Volcl comment madiller Ie type de symbole :

I. Chotslssez FenetrejBlbUotheque pom acdder a la bibltothe. que.

2. Avec Ie bouren droit de Ia souris (Windows) au Ctrl+Qic (Mac), diquez sur "kone du symbole (pas son nom). Dans le menucontextueJ qui apparai't. chobissez Comportement.

3 .. Dans le sons-menu Comportement, cliolslssez Ie nenveeu type de symbole a assigner a I'objel.

Modifier des slJmholes

Une grande partie de la puissance des symboles repose sur le contrfile de leurs occurrences. 51 vous modtflez un symbole, Flash !es actualrse en consequence dans l'anlmatlon. Vous cornprenez q:ue la modification d'un symbole vous faltgagner enormement de temps quant a sa repercussion sur ses copies (occurrences). II est done [udlcteux de creer un symbole chaque Iols qu'une forme ou un groupe dolt etfe utilise a plusieurs reprtses dans votre animation.

11 existe trois marueres de modifier un symbole :

Y' Mod1fl.er en place : Perrnet d'edlter un symbole tout en aflichant d'autres objets sur la scene. Les autres objets sont "grises" durant eette phase de modiflcatlon.

Y' Mod1fier en mode d'edltlon des symholes : Basculez en mode d'edltton des symboles. Cette lois vous nevoyez que Ie syrnboJe.

Y' Modifier dW18 une nouvelle fenetr:e : Ouvrez une nouvelle

{enelre pour y I!!diter votre symbole. Vous ne voyez que ceiui-cl.

ModHler sur place permet d'apprecler l'evolutlon de votre symboJe par rapport aux autres objets de la scene. Par exemple, 51. vous souhaltez grossir un symbole, vous devez verilier q u'I.1 ne va pas recouvrir un texte quJ se trouve pres de Jul. Mals, 51 VOIlS avez beaucoup d'oblets sur la scene, modiJJer en mode d'edttlon du symbole au dans une nouvelle fenetre peut lacllrter l'operatlon de modtflcatlon,

Pour modlfier un symbole, conformez-vous auxetapes sulvantes :

I. Sur Is scene, selectionnez n'importe queUeuccurre.nce du symbol.e. CUquez deSSllSQVeC Ie bouton droit de 18 souris (Wi.odows)ou en falsant Ctrl+Cllc (Mac).

740 Troisieme partie: Entrer dans III symbolique _

Figurs 7.3 :

La bouton du d essus ests n eours de modification, at celui du dassous est 'grise' car Rash est an mode modiflc&~on en place,

2. Chollii58eZ Ie mode d'edilion dans Ie menu contextuel qul appara.illorsque VOtlS cllquez SID" l'OCCUtTeDCe avec Ie bouton droit de la souris (ou Ctr~+CJjc SUI' Mac). SI vous passez par Modifier do. menu Edltlonou du menu contexlueJ du symbole., veus bascwez en mode d'edltioD du symbole,

Sur la F1.gul"e 7.3, vous constatez Que Flash a1!lche Ie nom du symbo!B (Capsule) au-dessus de la palette des calques.

3. Modlfiez Ie symbole.

4 .. Une fois les modifications apportees, diquez sor Ie nom de la scene 8 gauche de celul du symbole (au-dessus de la palette des calques) au cholldssez Edition/Modifier Ie document i sl la mod:lflcatlon s'est faite dans une nouvelle fenette, cUquez sur son boutan de fermetur~,.

Vous volel de retour dans l'antrnatlon prlnctpale.

UtiliseI' des sljmbo/e's d'autres animations

Apres avolr cree un symhole, iJ est stocke dans la bib!lotl"u~que. Cela permet de l'utHiser dans n'lrnporte queUe autre animation. De ce lalt,

Chapilre 7: Symbolismepu.issant 147

rlen ne vous empeche d'utiJlser, dans votre animation, la btbllotheque de symboJes d'une autre animation.

51 l'aatre animation est ouverte, ainsl que sa bibllotheque, vous avez acces a cette blbUotMque a partir de votre animation actuelle. La blbllotheque de toute anlmatton ouverte est accessible 11 partir de n'lmporte quelle autre animatlonouverte.

Pour utlllser un symbole it partir de la blbtlotheque d'une autre animation qui n'est pas ouverte, sulvez ces etapes :

LChoislssez Flchier/Ouvrlr comme blbliotheque.

La boite de dlalogue Ouvrir comme bfbltotheque appara"it.

2. 5electlonnez Ie fichier d'anlmatlon GlIa). 3.. Cllquezsur Ouvdr.

Flash alflche la blbliotheque d'une autre animation dans une nouvelle Ienetre de type BlbUotheque.

Cette nouvelle blbllotheque peut recouvrlr celle de votre animation en cnurs. Contentez-vous de .Ia deplacer.~ la souris. Dans la nouvelle bibllotheque, de nombreuses options sont desacttvees pour eviler toute modification d'un symbole qui nulralt a I'anlmatlon alaque!le est attachee ladlte bibliotheque.

Pour uttliser un symbole de l'autre blbllotheque, laltes-le gJlsser SUT la scene. En operant ainsl, Flash place une cople du symbole dans Ia bjblioth~tle de votre animation. Pour plus. d'lnlormatlons sur la blbllctheque, voyez le Chapitre 2.

VOUS pouvezaussi actuallser ou rempJacer un symbole dans la blbliotheque de votre anImation par Ie contenu d'un symbole d' une autre blbllotheque stockee sur votre dlsque dur ou sur le reseau. L'acces a un symbole de cette facon s'appelle partage de sym/xlles ou elements a 10. programmation : cornprenez au moment de la programmation, du developpement, a com parer avec Ie partage de symboles ou elements Q {'·execufion (de l'anlmatton).

Lorsque vous partagez un symbole pendant la creation d'une animation (pendant son deve!oppement), Ie symbole dans I'animation en conrs conserve son nom d'orlg:ine mats le contenu prend les proprietes du symboJe partage. 51 VOtlS avez atnsl rernplace un symbole et que le symbole exteme change (su.1te a une modlflcatlon), II faut operer l'aetuallsatton du symbole da.ns votre anlmatlon pour 'i rellcler les changements du symbole.

142 Troisieme partie: Entrer dans la symbolique _

Pour actualiser ou rem placer un symbole avec les proprletes d'un autre symbole, sulvez ces etapes :

1. Ouvrez la blbllotheque (actionnez Fenetre/Blbllotbeque) et seIectlonnez le symbole a actualtser ou remplacer.

2. Dans Ie menu de Ia blbllotbeque. aetionnez Proprletes.

La tenetre de dialogue Propnetes du symbole s'ouvre,

3. ClIq uez sur A vance pour afficher 19 totallte de 1a fenelre de dialogue. Dans la ecnen Source, cllquez sur Parcourlr.

La fenetre de dialogue Rechercher un llchler de document Macromedla Flash s'ouvre,

4. Loeallsez Ie Behler d'animation (.fla) qui contient Ie symbole a employer. Seleclionnez·le et cllquez sur Ouvrir.

La fenetre de dialogue Selectionnez. Ie symbole source s'ouvre, Vous obtenez une Uste des symboles presents dans I'animatlon que vous avez selectrenrree.

5. Choisissez un symbole et cllquez SUT OK.

Lorsque vous cholstssez un symbole, vo us obtenez son apercu dans Ie cerre d'apercu, Lorsque vous clJquez sur OK, vous etes ramene dans Ia .Ienetre de dialogue Proprietes du symbole.

6. SI vous desirez obtenir I'actualisatlon du symbole lorsque l'originaJ change, validez, dans la section Source de 18 fen~f:re de dialogue Proprletes du symbole, l'eptlon TouJours metl:re a jour avant 18 publication.

Le fait de cocher cette case cree un lien entre le symbole source et Ie symbole dans l'anlmatton en cours,

7. Cllquez sur OK.

Vous dlsposez maintenant d'un symbo\e dans votre blbllotheque qui possede Ie nom que vous lui avez donne a I'orlgine mats dont l'aspecl est celui du symbole choisi dans l'autre animation,

Utiliser la bibli,!thet(ue de Flash

Flash est livre avec plusleurs blbllotheques que vous pouvez utillser dans votre animation. Pour y acceder, chotslssez FenetrejBiblioth~ ques communes. Un menu adlecent apparalt, Choislssez-y un type de blbllotheque, Flash lourntt des boutons, des interactions (pour creer

Chapitre 7 : Symbolisme puissanl 143

des quizz) et des sons. Ces blbliotheques sont ldeales pour y plocher des ldees que vous mettrez a profit dans vas animations personneUes.

Tratlaitler avec des occurrences

Figure 7.4 :

Insliraz una Occurrence d'un symbole en Ie faisent glisser depuis IB bibllGtheque,

Une fois un symbole cree, VOllS pouvez l'utlllser de plusleurs manlsres. lnserez-le dans votre animation ou dans d'autres symboies, voire dans d'autres animatlons. Chaque cople d'un symbole est appelee une occurrence. Il est possible de modtller une occurrence pour qu'elle acqulere sa propre identite. Par exempJe vous pouvez modWer sa couleur, I'orlglnal restant Intact.

lnserer des occurrences

Pour inserer une occurrence du symbole, suivez ces etapes :

I. Cholslssez FenetrejBibliotheque pour aceeder ala btbl1othe. que Ulustree sur la Agul'e 7.4.

2. CboiBissez Ie calque au VOU8 desirez placer Poccurrence,

3. Cl1quez sur I'lmage-cle du scenario a partl:r de laquelle dolt apparaib'e Ie symbole.

144 Troisiemepartie : Entrer dans lasvmbolique _

Flash ne place des occurrences que sur les unages-cles, SI vous ne selectlonnez pas une trnage-cle, Flash place l'occurrence Sur la premiere lrnage-cle situee a gauche de !'Image en CaUlS. (Voyez Ie Cha,pltre 9 pour plus d'lnformatlons sur les Imagescles.)

4. Fattesgllsser Ie symbole de 11.1 bibliothl!que sur I.a scene.

Lorsque vous lnserez uneoecurrence graphlque, vous clevez constdsrer 11.1 man.l~re dont elle s'ajuste 11 toute l'anlrnatton, Pur exemple, I'occurrence peut etre Ie point de depart de certaines animations nu laire partie de l'arrtere-plao starlque, P·eut-etre souhaltez-vous que I'occurrence surglsse it un polnt precis de i'anlmatlon. (Le Chapltre 9 expUque comment copier des graphlques sur un certain nombre d'lrnages pour creer un arrlere-plan stattque et tralte de l'anlmatton en detall.)

Une occurrence d'un clip d' animation ne prend place que sur une trerne du scenario.

Modifier des occurrences

Les occurrences ne sont pas necessalrement 11.1 copte conforme de leurs parents, les syrnboles, Etles peuvent differer par leur couleur, leur type et leur mode de lecture, Vous pouvez aussi les laire plvoter, lea redlrnenslonner ou les InclIner, sans toucher Ie momdre cheveu de leur syrnbole parent,

Flash a une rnemolre d'elephant, SI vous rrredlfiez une occurrence, II s'en souvient, Supposez que VOUS cretez un cercle rouge que vous converllssez en un symbole graphique. Ensulte, vous asslgnez la couleur rose a I'une de ses occurrences. Lorsque VOUS edUez le symbole du cerde pour le transformer en ovale, l'occurrence reste rose mals devient ovale. Seule la lonne est mise II. Jour, pas 11.1 couleur.

Les modil:ications apportees a une occurrence doivent se fa.ire dans le panneau Proprl.etes (commande FenetrejProprietes).

Votcl comment modifier la couleur, 11.1 lumlnoslte ou Ia. transparence d'une occurrence:

J, SClectionnez l'oceurrence,

2, Chol.!!l.ssez Fenetre/propriel& pour ouvrtr Ie panneau du memenom.

S. Dans Is. llste deroulante Couleur, cbolslssez une des options sulvanl.e8 :

_------------ Chapitre 7: Symbolisme puissant 145

Rgura 7.5:

L'option Taints

parmat rle modifier la ceulsur, alia qUBntita de ~ouleur, appliquh sur I'oecurrenc·e d'un

S\'lIlbole.

• Au CUD : N'aJoute aucun elfet de couleur.

• Lum'inoslle: Modifie la lumlnoslte de t'occurrence (Plus

claire ou plus sombre).

• Telnte : Permet de modlfier la couleur de l'occurrence.

• Alpha: Modlfte 11.1 transparence de l'occurrence,

• Avance: Permet de modifier a la 1015·11.1 couleur et 1<1 transparence.

4. Effectuez ves modUicatloll8 (voir lea sections suivantes),

Vous pouvez apprecler la portee de vos modifications en temps reel.

Modifier fa {uminosite

Avec I'effet Lumtnoatte, vous pouvez saislr directe.m.ent une valeur dans Ie champ ou aglr sur Ie curseur qui apparait des que vous cllquez sur la petIte f!~che. Une valeur positlve augmente la lumlnoslte (une valeur de 100 lalt dtsparaitre l'occurrence), tandlsqu'une valeur negative la dlmmue (0 passe l'occurrence en nair),

Modifier fa teinte

Lorsque vous chotsissez Teinte, vous pouvez la defJnlr dans Ie nuancler ou en cllquant sur l'lcone coloree. A~lssez ensuite sur Ie champ qui affiche un pourcentage POUT tlxer la transparence de la nouvelle couleur. VOllS pouvez obtenlr des melanges decouleurs tout a fait surprenants. La figure 7.5 montre les divers contrdles de cette option,

Comportement de symbole Styles de (auteurs Dosa.ge de telnte

Options graphiques

Couleur

146 Troisieme partie: Entrer dans la symbolique _

Le champ qui affiche un pourcentage dcHLnit une valeur d'Lnc1dence d la couleur sur l'occurrence. A 100 %, l'occurrence est totalernent recouverte par la nouvelle teiote. Des pourcentages Inferieurs permettent d'obtenlr des nuances entre la couleur d'orlgtne de I'occurrence et la nouvelle telnte. 51 le pourcentage est de 0, Flash n'altere pas fa couleur d'orlgme de l'occurrence,

Le melange de couleurs est tres facile a obtenlr avec l'option Teinte. g,v,U PJI.r

.t:;ij) S! vous deslrez appllquer des couleurs compatibles Web, cholslssez

z, un~ ?es tein.tes proposees par Ia pale~te de l'lcnne Couleur de telnte et verlflez que Ie champ Pourcentage alliche 100.

Modifier fa transparence

Dans la llste Couleur du panneau Proprietes, choislssez Alpha. Utllisez ensulte Ie curseur ou salslssez une valeur dans Ie champ afflchant un pourcentage, Plus Ie pourcentage est faible, plus I'occurrence est transparente, Lorsqu'une occurrence est entleremeat transparente, vous ne pouvez plus I'ldentifier sur Ia scene que par son polnt de reference. Lorsque vous deselec:tionnez l'occurrence, vous ne voyez absolurnent rlen I (Le Chapltre 4 e.xpUque tout ce que vous avez oulours voulu savoir sur Ie point de refl~rence des symboles, y

cotnprls leur dllplacement : reportez-vous a la section consacree aux

'\~\}C Groupes.)

~ La transparence partlelle permet de voir l'arriere-plan. Une occurrence ~I partlellement trans parente se melange avec l'arrtere-plan.

Modifier simu{tanement fa couleur et fa transparence Pour y parvenlr, selectlonnez Avance dans la Ilste Couleur du panneau Proprietes, puis sur Ie bouton Parametres. Vous agtssez alors sur les cornposantes RVB et Alpha comme le montre La Figure 7.6.

Pour une modification simple de la couleur et de la transparence d'une occurrence, utlllsez les contreles de I'effet Teinte. Modlfjez d'abord la couleur, puis agtssez sur le contrcle Alpha pour alterer sa transparence.

Modifier un tlJpe d'occurrence

L'occurrence tient sa nature de ceUe du syrnbole - ClJp, Graphlque OU BouLon. Bien evldemment, VOUS pouvez en changer. Parexemple, sl VOllS avez cree une animation avec un symbole graphique, vous

Chapitre 7 : Symbo li sme pu issant 147

Figure 7.6:

L'option Avance permet de modifier simultanemantla cculeur at Ie trsnsperanee.

pourrez l'utlliser en tant que clip d'animation. Plutdt que de changer Ie type de symbole. vous pouvez modifier celul de l'oecurrence que vans avez inseree.

Volcl commen proceder :

l. Sfllectlonnez I'oceurrence.

2. Cboisissez Fenetre/pmpriel.ea.

3. Dans la lisle Comportement de symboie cboisl.s&ez l'un des types swvants :

Graphique : 5i Ie graphtque contlent one animation, choislssez Graphique dans \a liste Comportement puis, dans la Iiste Options graphlques, determlnez comment I'anlmatlon sera [ouee :

Boucle. Joue Interminablement l'anlrnation contenue dans l'occurrence pendant to utes les trames occupees par J'occurrenc:e.

Llre une mis. LIt l'anlmatlon une lois a partir de l'image (trame) specirlee.

Une seule Image. A[fiche une image de I'animation. En d'autres terrnes, l'anlmatlon n'est pas lue : vous specifiez I'image afflchee par I'animatlon.

Bouton: Choisissez l'optton Bouton pour determiner comment iJ doit etre consldere. Dans la llste Options, selectlonnez Considerer comme un bouton si vous ne creez qu'un seul bouton. Selecticnnez Conslderer comme un element de menu sl vous creez des menus contextuels.

148 Tro,isiemeportie:. Entrer dans Is sjmbellque _

CUp: Chotslasez Clip et sp{!c!flez le nom d'une occurrence dans Ie champ prevu a cet effet. Vous utillsez. ce nom conjolntement a certaines actions (contrOles lnteractlls) de manlere a pouvotr vous y referer et contreler l'occurrsnce. (Pour plus d'informatlons sur les actIons, reportez-vous au Chapitre ro.)

Remptacer OU «u,ptil/uer une occurrence

Supposons que vous ayez cree une animation complexe avec des petits lapins qui sautent dans tousles coins de la scene. Soudaln, votre patron decide qu'illaut remplacer las lapins par des putors.

Void comment ne pas etre totalement demoralise par un revirement de dernlere minute:

1. Creez Ie symbole du putols (ou tout autre symbole necessMre a votre creation).

flash stocke Ie nouveau symbole dans une blbllotheque,

2. seleetJoonez, sur la 8C~e, une occurrence du lapln, qut est votreoccurrence ortginaJe.

3 ... Choislssez Fenetre/proprletes pour ouvrir Ie panneau Proprte. tes.

4. Cllquez sur "leone Ecb.ange.r Ie symbole pour ouvrir la bette de dlaJogue do meme nom.

S. Dans la bone de dialogue, se.lectJonnez Ie putois ou n'importe quel autre symbole.

6.. CI:lqueZ8llr OK pour echanger les IIYmboles et rermez la bulle de dtalogue.

Flash conserve vos ellets de eouleur et vas mcdfficatlorrs de tallie, mals subsutue le symboie.

Malheureusement, vous devrez repeter cette procedure avec tous vas lapins. MaJg c'est tout de meme mieux que de devoir rliinserer toutes vas occurrences el de refalre leurs modifications.

Pour dupliquer un symbole, sufvez cas etapes :

1. ~Iedlonnez une OCCWTeJlce,

2. Cliquez S-1Ir OptJOIl8 dansl'ang.le superieur droit de 18 blbllo. thequepour ouvrir Ie menu d'opttons,

3. Cb.olatssez DupUquer.

•

Chapitre 7 : Symbolism, puissant M9

La lenetre de dialogue Dupllquer Ie symbole s'ouvre, Notez que vous dupllquez Ie symbole, pas l'occurrence,

4. lapaz un nom pour Ie nouveau symbole.

5. ClJquez IIDr OK.

Pour creer un nouveau symbole, vous pouvez dupllquer un symbole existant deja et que vous souhaltez prendre comme modele. Apportez toutes les modillcations au nouveau syrnbnle et plaeez les cccurrences sur la scene.

Separer une occurrence

Vous pouvez separer une occurrence. YOU!! obtenez un ensemble d'objets qui la compose. Le symbole d'orlgtne Teste Intact dans la btbllotheque de I'animatlon. Vous pourrez utlliser l'oceurrenee comme modele a la creation d 'un symbole ennerement nouveau au vous voudrez animer les composants du symbole pour qu'lts se deplacent separernent. Toutes les autres occurrences restent tntactes.

Pour separer une occurrence, selectionnez-Ia et choislssez Modifler/ Separer. $1 une occurrence connent des symboles ou des objets groupes, VOIlS pouvez utlliser de nouveau la commande Separer pour lndlvlduallser iesdits objets.

Chapitr'e 8 esboutons

..

•

• •••

Dans ce chapitre :

Creer des boutons standards. Tester vos boutons,

S'attaquer it des boutons plus complexes.

. ..

• •

. . ..

L orsque vous vtsltez des pages Web, vous voyez des boutons sur lesquels Je simple fait de cllquer afliche une nouvelle page ou un nouveau site. Ces boutons sont des graphiques agrementes d'une fonctlon de lien hyperteste, connu sous le nom d' hyper/len. Si vous pretez attentlon aces boutons, vous constatez qu'lls chan gent generalernem d'aspect lorsque le potnteur de la souris passe dessus, Dans certaines pages, lis emettent un son des que VOllS cllquez dessns.

Flash peut creer toutes sortes de boutons. Par exemple, un bouton peut s'anhner au passage du polnteur. VOLIS pouvez meme ajouter des ccntroles lnteraetlfs (ou actions) pourqu'fls declenchent uneautre anImation au creent d'autres ellets.

Cree'r des boutons simples

Avant de placer des boutons dans une animation et les faire reagir comme ils Ie souhaltent, les createuJs dessment un grand nornbre de boutons qu'lls asservtront plus tard II leurs pageaconcaesavee Flash. Les boutcns contlennent bien sou vent du texte ldentlflant leur objet.

Mals les boutons ne sont pas cantonnes au simple rOle d'elements de navigation. Un bouton peut arreter la muslque, lndlquer un cholx ou constituer la piece d'un puzzle que Ie vtstteur reconstttue sur [a page Web.

152 Troi.siemepartie: 'Entrer dans 18 symbolique _

iFig ure 8,1 : los quatre elats d'un bouton:

He u~ 0 ass us, Abeiss~ at Cliquable,

Un bouton est un syrnbole, (Voyez le Chapitre 7 sur les methodes de creation et de modification des symboles.) lcl, nous rrancns du processus de creatlon des boutons.

Comprendre les etats attaches aux bouton«

Un bouton a quatre etats qui deflnlssent ses caractertstlques :

~ Hant : Delio.lt I'aspect du bouton quand le polnteur de la souris ne se trouve pas dessus, 11l.ltiaiement, chaque vislteur volt d'abord l'etat Haut d'un bouton.

J.<'" Dessus: Detlmt l'aspect d'un bouton quand Ie pointeur se trouve dessus (sans Ie cllquer),

~ Aba:Isse: Oeflnlt l'aspect du bouton quand l'utltlsereur clique dessns.

~ Cliquable: Deftnlt la zone du bouton qui repond a un clic de souris, L'utllisateur ne volt pas cette zone, Lorsque vous passel. Ie polnteur sur la zone reactive, Ie pomteur est constdere eire SUI Ie bouton, Un cltc n'lrnporte au dans la zone reactive declenehe l'action du bouton,

La Figure 8,1 montre un bouton et ses quatre etats. Typiquement, l't!lll.t DeSSlIS rend le bouton plus visible pour atttrer l'attentlon de l'lnternaute et modllJe sa forme quand on clique dessus (par exemple), Dans cet exemple, I'etat Abalsse deplace l'eclatrage vers la droite, donnant l'lmpresslon d'un mouvement.

Haut

Dessus

CO~jJelis

Abaisse

Clique

~.llC

Les degrades radlaux sont utlllses pour creer des effets d'eclaJrage au

. ... d.· es aspects enlonces. Uti.lisez une couleur claire pour donner l'appa-

rence ec1airee, Ut!lisez une couleur sombre pour creer un aspect

_------------ __ Chapitre 8 : Les boutons 153

Figure B.I:

Flash en modo ~'adition des boutoas affiche un sc~nario avec qU8lfe trames.

entonce, [I sumt de changer la coulear de rempllssage pour donner un superbe diet.

Creer un bouton standard

Pour creer un bouton d'une strnpllclte demorallsante, conformez-vous am: etapes setvantes :

1. Choislssez lnserer!Nouve&n symbole pour accede r a la baite de dialogue Creer lID symbole.

2. Dans Ie champ Nom, assip1f!Z lID nom au bouton,

3. Dans la zone Comportement:, activez.l'option Bouton,

Vous etes malntenant en mode d'edltlon du symbole. Flash aUlche un scenerto partlcuUer aux boutons .. 11 com porte quatre trames : Haut, Dessus, Aba.isseet Cliquable, comme l'lllustre la Figure 8.2. Le point alflche dans une trame lndlquela presence d'une lmage-cle. Une ImagtxJe apparaTt des que vous creez n'lmporte quel objet sur Ia scene, Le mot Haul est en surbrtllance, indiquant que Ia trame en question est actlve.

4. creez Icsrapbiq:ue de I'etat Heut,

VOllS pouvez utlllser les outlls de dessln de Bash, un graphlque tmporte ou t'occurrence d'un symbole. Vous pouvez ereer autant de calques que vous le seuhaltez pour le bouton en question. Pour un bouton anrme, utlllsez un symbole cllp d'anlrnatlon. NallS expliquons comment creer un bouton anune dans la section "Ajouter un Clip d'animatlon i\ un bouton", plus loin dans ce chapitre.

154 Troisieme partie: Entrer dansla symbolique _

SI YOllS voulez que l'lrnage du bouton salt a la meme place pour Ies quatre I!!tats, placez-la au centre de l'aUlchage et dellnissez Ies autres etats au centre. Pour cela, coupezet collez !'Image. (Reportez-vous. all Chapitre 4 pour plus d'infonnatlons sur Ie centrage des objets ~ l'ecran.) 51 les images ne sent pas a la merne place, Ie bouton se decale quand l'utlllsateur passe son potnteur dessus au eflectue un die.

5. Sou Windows, cllquez sur 18 trame Dessus avec Ie bouton droit de ia&ouris. Sow Mac, fBiles· Ctrl+CJlc. Dans le menu contextuel, ehulslssez lnBere.r une .Image-cle.

Flash lnsere une image-de dans la trame Dessus. VOliS pouvez Ilgalemem choislr lnsertlon/lmage-cle ou appuyer sur P6. Le graphlque de l'etat Haul reste sur la scene,

6. Creez Ie graphlque de I'etat Dessus.

Vous pouvez utlllser Ie graphlque de l'etat Haut comme point de depart et efiectuer toutes les modifications necessalres. 51 vous manquez d'imaginatlon, rlen ne vous ernpecbe de conserver le merne aspect de bouton pour les deux etats. Vous pouvez aussi supprimer le graphlque et en mettre un nouveau a la place. 51 vous avezcree piusieurs calques, placez une lmage-ele sur chacun d'eux avant de creer l'l!!lement artlstlque de cecalque,

7. Sous WIndows, clJquez!Jlll" l'eta.t Abaisse avec Ie bouton droit de 180 souris, Sous Mac, laites CtrJ+CUc. Dansie menu coateshlei, cbol:slssez Inserer nne lmage-cle.

8. Creez I'image de Petal Abaisse.

Repetez ['etape6.

9. Sous W1ndows, cUquez stir l'etalCliquable avec Ie bouton droit de la souris. SoUII Ma.c, falles Ctrl+CUc. Dans Ie menu eontextael, cbolslssezlnse.rer une lmage-cle.

10. Crilez la forme qui deBolt til. ZODe acUve do. bouton.

Cette lorme dolt entierement recouvrlr tous les graphiques des autres etats. HabltueHernent, un rectangle au un cercle s'avere sufflsanl. 51 vous lgnorez la trame Cliquab:le, Flash utilise les IImites de l'objet contenu dans Ill. trame Haut.

51 VOllS mettez du texte sur un bouton, les lnternautes devront preclsement cltquer sur les lettres saul sl YOIiS deftntssez une zone de cllquage rectangulaire auteur du texte. Pour couvrtr une zone de texte, creez uneforme remplie sur un nouveau calque.

~ ChapilreB : les buutens 15~

II. CUquez Ie nom de la scene aa-dessous de Ia palette des calques oucbolsissez tdlUon/Modlfier le document, VOUB void de retour dans le scenario prtneipaJ.

12. 51 la blbUotheque o'es! pasouverte, cholslssez PeDetreJ BlbUotheque. Faltesglisser sur la scene le symbole du benton que vans venez de creer.

Ca y est 1 Vous venez de creer un bouton I ~UP-4.r

§~_ Un bouton est un sym bole. Par consequent, lorsque VOIlS souhaltez

~. IIII fatre apparaitre, sur la scene, un bouton nouvellement cree, vous II .. devez faire gllsser Ie symbol~ depuls la blb~iotheque. Reportez.vous au Chapltre 7 pour une explication approtondle sur les symboles et les occurrences.

Tester les boutons

Une fois un bouton cree, il faut Ie tester. Plusleurs methodes sont a votre disposition.

La mamere la plus rapide de tester un bouton est de l' aaioer. Alnsl, iI repond it votre souris de la maniere escomptee - II prend l'aspect specltlequand la souris passe dessus au quand vous cliquez dessus. Pour activer les boutons de votre scene, choislssez Conttole/Actlver les boutons simples. Taus les boutons de la scene sont main tenant dlsponlbles.

Une 1015 votre bouton teste, imaglnez que vous vouliez Ie setectionner pour Ie deplacer. Impossible! II rMglt comme s'Il etalt sur Ie Web. Dans ce cas, choisissez Controle/Actlver Ies boutons simples pour desaetlver Ies boutons. C'est paradoxa], mats comme iJ s'agtt d'une cornmande a bascule, on ne peut pas talre autrement. Vous pouvez malntenant selecttonner le bouton comme n'lmporte quel autre objet. En general, n'actlvez tes boutons que pour les tester.

Cependant, sl vous souhaltez vrahnent selectiouner un bouton actlf, uullsez l'outll Fleche pOUT dessiner une marque de selection autour du bouton. Vous pouvezalors utlllser les neches du pave directlonnel pour deplacer Ie bouton. 51 vous souhaltez l'edlter, choisissez Fenetre/ Proprletes pour afilcher le panneau Proprietes, puis modlflez les proprletes du bouton comme expUque au Chapltre 7.

Si vous avez une autre animation sur la scene, vous pouvez la llre tout en gardant les boutons actives. Choisissez Controle/Lire ou appuyez sur la touche Entree. Toute animation est un jeu, et vous pouvez apprecler comment les boutons s'Intsgrent dedans.

156 TrDisieme Ipartie: Entrer dans 18 svmbolique _

llne autre manJ~re de tester l'anJmatlon constste a tester l'integraUte de l'anlmarlon. Cholsissez Contr5le(Tester l'ennnetton. Flash cree un Iichler SWF temporalre. Toutes les antrnattons sont alors executees et vous poevez tester vos boutons. Une lois Que cela est lalt, cllquez sur

~~\ON I Ie bouton Fermer en haut a drolte de 1.1. lemltre de test.

. $"~ Note pour les utlllsateurs Windows: U ne s'aglt pas du bouton Fermer

~ de la fenetre prlncipale de Flash.

Si votre bouton contlent des clips d'animatlon, vous devez utlliser cette methode de test. Dans Ie cas contratre, I'anlmatlon ne sera pas [ouee sur la scene.

Creer des houtons complexes

Les boutons peuvent laire bien plus que changer de forme au de couleur. Vous pouvez arnellceer Ie comportement de vos boutons de trois manleres :

"" Alonter nn 8On: Parexemple, vous pouvez ajouter un bruit de "die" a l\~tat C!lquable. Alnsl, I'utfilsateur entend un petit son lorsqu'U clique sur le bouton.

'"' AJouter un clIp d'aalmatfnn : Pour aalrner un bouton, aloutezlui WI clip d'anlmatlon. Vaus pouvez anlmer les trames Haul, Dessus et Abaisse.

'"' AJouler nne action (eoutr6le m.ternctlf) : Pour qu'un bouton lasse quelque chose, vous devez lui aJouter une action. Les actions sont traltees au Chapitre 10, mals nous en devonons les bases lei,

Ajouter un son a un bouton

Pour agrementer votre site, aJoutez un son il. un bouton .. Habttuellernent, les sons sont ajoUles aux etats Dessus et Abaisse. Le Chapltre 11 donne de nombreuses explications sur les sons. \cl, nous expllquons comment ajouter un son rudlmentalre a un bouton.

Pour ajouter un son a un bouton, sulvez Iesetapes ci-dessous .:

I. Creel lesymbole d'un bouton,

2. Cboi5issez F1cbler/lmporter pour acceder ala boite de dialogue du meme nom.

_ ChapitreB: las boutons 15:

Figura 8,]; Uuand VOIlS ajolilol un son iI un bouton, son onda apparait sur Ie scenario.

3.seIectionncz Ie .ftchler audio (au fonnat WAY, AIFFou MP3) et ~quez IJllI" Ouvrir.

Flash stocke Ie Ilchler dans la btbllotheque,

4. Chelstssez Fenetre/BlbllotMque pourouvrir cette dem.i~re .

5. 51 VOWI D'illes pas en mode d'edltloll des symboles, utUi8ez l'outll fleclle pour doubIe-cliquersur I'leone du boulonqul se trouve dans 10. blbUotheque.

6. CUquez sur I'lcone "of" !llmee dans Ie com Inferleur gauche de 10. palette des calques ]){lur .aJouter un nouveauealque.

1. Nommez-Ie "Son" au quelque chose de slmllalre.

Le Chapltre 6 donne des explleatlons approlondies sur les calques.

8. Avec Ie bouton droit de la somis (WIndOM!) ou CIrI+Oic (Mac), cllquez!fur 10 trame du nouveau calqueou VOWI souhaitez Insb'er Ie SOD. DIlI:lS Ie menu eontextuel, chelstssez Imerer one lmage<h~.

9. Cboisissez Fenetre/Proprietes pour accederau panneau du m@meoom.

10. Dans la IIste Son, cholslsse.z Ie ficbl.er audio 1k assigner au bouton.

Flash lisle tons les sons importes dans la blbllotheque. Quand vous cholslssez un flchi.er son, vous voyez apparattre Ie spectre de son onde sur la trame ou II a ete lnsere, comrne l'llhsstre la FIgure 8.3.

11. Dans 10. IIste Syn.chronlser du panneau PropriHea, cboislssez ~venement.

158 Troisiemepartie; Entrer dans lasymbolique _

1....0 parametre Evenement synchronise Ie son a l'evenement d'une occurrence. Dans cecas, II s'agtt du passage de la souris sur Ie bouton, c'est-a-dlre de I'e,tat Dessus.

12. Cliquez sur Ie nom de Ill. scene pour revenlr au scenario principal.

13. Faltes gUsset, depuis la blbliolbeque jusqu'illa scene, Ie symbole du bouton que vous venez de c~er.

Vous l'avez Jalt I Testez malmenant votre bouton comme expllque dans 13 preced.onte section.

Consultez Ie Chapitre II pour obtenir plus d'lnformatlons sur I'ajou! de sons a des boutons et des animations.

~c

~.. 51 vous avez deja ajoute Ie son a une autre animation, cholstssez

Fichier/Ouvrlrcomme btbllotheque et ouvrez l'autre animation.

.. Cliquez sur !'image-de deslree, puis laites gUsser Ie son de la blbllothe-

- que [usqu'a la scene. Flash place Ie son dans nmage-cle selectlonnee.

Ajouter un clipJ'animation a un bouton

511es simples boutons vous dernoralisent, antmez-les I Pour cera, vous devez creer un clip d'animation que vous lnserez dans une des trames. G~neraiemelll, l'anlmatlon d'un bouton est loealtsee dans la zone du bouton. SI VOIlS souhaitez creer un bouton tres eiabore, vous pouvez anlrner les trois trames qui le constltuent - Haut, Dessus et Abalsse,

Pour ajouter un dip d'anlrnatlon il un bouton, vous devez d'abord creer Ie clip. Le Chapltre 7 expllque comment y parventr et Ie ChaplIre 9 expllque comment creer l'aalmatton a placer dans Ie clip.

Si vous n'avez [amals cree de bouton, reportez-vous auxetapes de la section "Creer un bouton standard". Ensulte, pour creer un bouton avec un clip d'anlmatlon, conlormez-vous am: etapes ct-dessous :

I. Commencez une nouvelle an:Jm.gtiOD.

2. Cholslssez lnserHon!Nouveau symbole pour aeceder A la boite de dialogue Creer un symbole.

3. Dans Ie champ Nom, a.wgnez un nom au bouton.

4. Dans la zone Comportement. choisisse.z Bouton, puis dlqne.z IIU:t OK.

S. creez Ie gr:apblque pour J'etat Haut,

_______________ ChapilreB :Les houtens 159

Centrez son point de reference avec celul present sur la scene. Les fleches du pave dlrecttocnel sont routes lndlquees leL Vous obtenez un resultat semblabJe a celut de [a Figure 8.4. Le symbole graphlque est stattque, c'est-a-dire non anlme.

figureB.4 :

Unlisez un

symbole de [a .'

b ibliothii QU e pour erser un houtan smme.

6. Avee Ie bouton droit de la souris (Windows) ouCtrl+Cllc (Mac), clique.z sur Ill. trame DeslWll. Dans Ie menu contextuel, cholslssez Jnserer une lmage-cle.

Flash Insere une lmage-cle (~a tombe bien !).

7. Creez Ie grapblque destine it l'etal Dessus.

Pourcet example, supprtmez Ie graphlque present sur la scene (he rite de l'etat Haut) et [aJtes-y gllsser un cl!p d'animation. Placez-le au centre de III. scene comme VOllS l'avez fait pour le graphlque. Utlllsez les Ileches dlreclionnelles pour aligner son point de nHm-ence sur celul de [a scene.

S. Avec Ie bouton. droit de .10. souris (WIndows) ou Ctrl+CHc (Mac), cllquez sur 18 trame Abaisse. Dans Ie menu contextuel, ehotstssez l~rer nne lmage-cle.

9. Creez legrapWque de I'Hat Abatsse.

Supprlmez le clip d'animatlon herlte de ['<:'!tat Dessus, puis tattes gllsser un autre symbols graphlque, Utilisez res neches dlrectlonnel les pour centrer Ie symbole sur III. scene.

160 Troisieme partie: Entrer dans la symbolique _

10. Avec le bouton droit de la lIOuris (WIndows) ou Ctrl+Clic (Mac), cltquez sur la tnune Cliquable. Dans Ie menu centestuel, eholsl z In serer nne image-cle.

II. Utilisezl'outll Rectangle pour dessiner un carre qui couvre lit totallte du symbole. Le ymbole se trouve par-dessus le earre. 5aectionnez I symboJe pour Ie supprlmer. Seulle carre est present sur la scene.

S! vous ne VOllS confonnez pas aces etapes, les utillsateurs devront placer Ie pointeur de la souris sur un endrolt precis du graphlque pour voir I'animatlon. En definissant un tel cadre sur la trame Cliquab!e, le polnteur pourra etre place n'importe ou, Votre ecran doit ressembler a celui de la Figure 8.4 (volr plus haut).

12. Cllquez sur Ie nom de la scene (Sequence 1) au-dessoua de la palette des calques pour revenir au scenario principal.

]3. Faires gUsser,jusqu'a la scene, Ie ymbole du bouton que vous venez de creer,

Felicitations 1 Vous venez de creer un bouton contenant un clip d'animation.

Pour tester Ie bouton alnst Cree, cholsissez Controlerrester l'anlmatlon, Placez Ie polnteur de la souris sur Ie bouton, Le clip d'anlmatlon est Immediatement lu, Le laH de cllquer ne change nen, 51 eette animation vous interesse, cholslssez FichierjEnregistrer sous. Stockez aIors Ie lie hler sur votre disque duro

Aiouter une action a un bouton

Un bouton ne fait rten tant qu'aueune Instruction ne lui a et~ assignee. 11 se contente d'etre plus ou moins beau et de changer certaines proprietes en Ionctlon de son etat. La plupart des boutons renvoient a d'autres pages Web ou declenchent des animations. Les actions sont traltees au Chapitre to, maIs nous aJJons en apprehender les bases iel avec une action qui renvote I'utlilsateur A une autre page Web.

Pour ajouter une action a un bouton, suivez les etapes ci-dessous :

l. SI ee n'est pas dejA WI, faites gUsser une occurrence du houtou jusqu'a 18 scene. selecHonnez Ie bouton,

2. Cholslssez Fenetre/Actlons pour acceder ala fenetre Actions sur objets.

_ Chapitfe 8 : Les boutons 761

Figura 6.5 :

Dansie fgnatre Actions, vous pouvez ejoutar n'importe quelle action a un bouton.

3. CUquez sur ActionsjNavtgatellr/Reseau ou teute autre c.ategorie eentenaat I'aetlon destree.

4. Double-dlquez sur I'action que VOWI deslrez ; pour utlliser Ie bouton a lier !lime autre page, double-cllquez sur gelURL.

La Figure 8.5 montre la fenetre Actions avec l'actton getURL.

a'll! jril!!!lllll~~l I ljIac.OJU..f"·ll

5. Dans Ie champ URL en bas de Ia boite de dialogue, saisl.ssez J'URL it atteindre.

Lorsque vous salslssez I'URL, respeetez les memes rE!gles que lorsque vous creez un lien hypertexte SUI votre site Web. Par exemple, vous utlllsez habituellement les URL locales d'autres pages qui se trouvent sur Ie merne site Web. En revanche, vous avez besoln d'URL absolues (commeneant par http://) pour des liens renvoyant 1I d'autres sites.

6. Dansla lisle Fenetre, cholsissez _self pour que la nouvelle page s'affiehe dans la weme fen~tre du Ds.vigateur.

7. Dan eel exemple, laissez le parametre Variables 8ur sa valeur par delaut, c'est.a-dire Ne pas envoyer.

8. Redulsez Is feneb'e Acnone en cl1quant sur sa Beche de

reduction II. gauche de son titre.

Vous pouvez ajouter votre bouton a une page exlstante, Dans ce cas, Ie bouton sera le seul element Flash de eette page. Vous pouvez egalement Inclure des boutons comme pattie d'un envlrormernent emlerement concu dans flash. Dans tous les cas, les boutons sont des pieces rnaltresses de I'arsenal Flash I

162 Traisieme partie: Entrer dans Ia svmboHque ~ _

Creation d'un bouton qui afit seton l'entree de l'utllisateur

Volei un exemple pius avance de bouton quI utilise une action pour repondre a l'entree de l'utlllsateur. Comme vous pouvez Ie constater sur la F'lgure B.6,I'exemple comporte une case de salsle, un graphique et un bouton. La case de salsle est construlte a l'alde d'un texte de type Texte de satste (pour plus d'lnformatlons, voir Ie Chapltre 5). Lorsque lutilisateur tape un nombre dans ta case de salsle et clique sur Ie bouton,la largeur du graphique est reglee sur Ie Hombre de pixels entre dans la case de salsle, De la sorte, l'uUlisateur lnllue lnteractivement sur l'animatlon. n est bien sur possible d'employer n'lmporte quel graphlque et le bouton peut changer d'autres proprtetes que la largeur (voir Ie Chapltre 10 pour plus d'informatlons).

GO

Figure 8.6:

Le bouton de

~ette

animauon 'r~gle la largour du grsphique

(en pixels) sur Ie nombre tap~ dans Is case de saisie,

VOid les &apes il sulvre pour creer cet exemple :

1. Creez un symbole avec comportement clip d 'animatl 00 , POUT plus d'tnformatlons sur 101 creation de cllps d'arumatlcn, voyez Ie Chapltre 7.

2, Supprlmez Ie symbole, ouvrez la bl.bliolMque (actionnez Fenetre/BlbUo!heque)el faites gJlsser une eceurreneedu aymbO'le sur la scene.

3. Ouvrez l'lnspeeteur Proprietes (act:lonoez Feoetre/proprietes), Dans la case de salsle Nom de l'occWTence,.mpez OD nom

________________ Chapitre8 : tes boutons 16:

pour Peeeurreace. Ullerieuremenl, "Vow devrez fal.re reference B ceoom.

4. Qlquez sur I'O'uol Texte. Dans In Uste derouIante Type de texte de I'lnspedeur PropriiHe.s,chobissez Texte de salsle. Dell.mllez ODe case de salsle sur 18 scene.

5. Sinecess.aire, cliquez sur la neche de developpement dans I'angle inferieur droll de I'lospecteur Proprietes pour I'affi· cher dans sa taWe etendue. Dans la case de salsle Var, tapez un nom de variable pour lacase de saisle que vow venez de mer sur la scene. Dimsl'exemple d'animalion, Ie nom de variable est taille.

6. A gauche de la case desaisle Vat se trouve Ie bouton Afficher la bordure autour du texte, CUquez sur ce bouton pour obtenfr ODe bordure.

7. Cliquez sur Ie bouton Caractere pourouvrlr la fenelre de dial.ogue OptJons des caracteres. Aetlonnez Ie bouton Umquement, ccchez I'option Chlfires «(1..9) et cllquez sur ·rermfne.

8. Cr.eez un bouton (voir Ies explications plus haut dans ce chapUre).

Placez eventuellement du texte sur Ie bouton pour indiquer it rutllisateur Ie rOle du bouton. Dans l'exemple, le mot Go apparalt sur Ie bouton.

9. Folies .gJlsser 11Ile occurrence du bouton sur Is. scene. Le bouton etant seieclionne, ouvrez Ie panneau. Actions (actiou· aez Fenetre/Actions).

10. Choisissez ActionsjContr61e SUI' les cUps, puis double-cl.iquez Bur setProperty.

L'actlon setProperty est affichee dans la zone de droite de la lenetre Actions, ainst que I'evenement par delaut 00 (release) (pour plus d'informat!ons sur les evenements, volr Ie Chapltre 10).

II. Pour que l'uttllsateur pnisse appuyer sur Entree ou Return, ou cllquer sur Ie bouton, cliquez sur (rel e a s e ),cochez la case a cocher Touche (au-dessus) et appuye.z sur la IOLl('lJ.e Entree ou Return.

12. Cllquez sur le code eetProperty. Dans la lisle dereulante ProprMtes. cholslssez une propriete. Pour I'exemple,cholslssez _width (La r g eu r}.

164 Troisieme partie: Entrer dansla symboliqiue _

13. CUquez daae lacese de wsl.e Clble, pub sur Ie bouton Inserer un chemin db Ie. Dans lafenetre de dialogue lnserer un

chemin clble, choisissez Ie nom d'occurrence specifieli. I'elape 3. Cliquez sur OK-La dble est I'oceurrenee dent vous voulez regler la propr'lete,

14. ClIquez d8Jl8 la case de selste VaJeur. Tapez Ie nom de vm1abl.e que vonsavez donne a la case de salsJe Ii. I'etape 5 .. A drmte de ta case de salsle Valeur, cechez la case Expression.

Dans notre exemple, Ie nom de variable est tail1e. Val~ur sptkilIe onl'actinn setProper.ty recupsrela valeur ~ ailecter 11. 10 propriete que vous voulez regler, Dans Ie cas present, la valeur provlent de la case de salsle,

15. Reduisez ou fenoez Ie paJlDe~u Actions. Ajoutez eventueUement du textequl expUque Al'utillsa.teurcequ'll doU falre.

16. Pour tester I'aolmatlon, appuyez SUI' Ctrl+Enll'ee (Wlodows) on CtImmande+En~e (Mac). Entrez un nombre et dlquez SUI' Ie boulon. Essayez des nombres dUf6uts pour ,elarglr ou retred.r l'l:mage.

T

Quatrieme partie

Flash .. O~Rama complet

UJe ne comprends pas pourquoi chacun de mes swings me renvoie a votre page d'cccueil."

Dans cette partie ...

L I animation est le coeur et I'arne de Plash. Cette partie vous

. montre comment deplacer des objets. modifier leur forme (realtser des metamorphoses) ei laisser Flash creer des animations Ii. votre place.

Toute animation peut devenir interactive. Votre site n'en est a10TS que plus perform ant. Le langage ActionScript de Flash oflre un potentiel infln!. Nous verrons comment combiner votre animation avec vas symholes et comment ajouter des actions pour "programmer" la totallte de votre animation.

Flash n'est pas plus sllencleux que Ie monde qui nous entoure, Vous verrez dans cette partie comment ajauter du son, de la musique et de la video a vas animations.

Chapitre 9 Animer

•

•

•• •••• ••••

Dans ce cnap;tre :

Comprendre I'animation dans Flash. Etre pret A antrner,

Animer avec des images-des.

Utlliser I'interpolatlon de mouvement. Modilier votre anlmatlon.

Gerer des sequences.

• •

• • • • • • • • •

•••

p:0urquOi ereer des graphiques dans Flash? Pour les anlmer, bien silr, Dans ce chapltre, nous presentons l'anlmatlen - Ie cceur et I'ame de Flash - et la mise en mouvement de vos Images.

Prineipes de l'anlmation dans Ffash

Le secret de I'animation dans Flash, comme dans les films, est que rien ne bouge vralment, Une animation Plash cree simplement 1'l11usion d'un mouvement en afIl ch ant raptdetnent les Images Ilxes d'une sequence. Chaque Image fixe est legere.ment differente de celie qui la precede et de celle qui la suit. Votre cerveau comble Ie vide existant entre les deux images, recreant alnsll'lmpression du mouvement.

Flash permet de creer fadlement des animations complexes, extravagantes, spectaculalres. [I stocke WI maximum d'iniormations dans un format vectorleJ super compact. Comme les IIchlers resultants sent tres petits, leur teJechargement est raplde. Flash est done synonyme d'une anlmatlon spectaculalre au teJechargement raplde, L'ideal pour les intemautes.

Camme avec Ie Cinema, chaque image Itxe est contenue clans un cadre. Ce cadre est aussl appele trame. Chaque trame represents une unite

168 Quatrieme partie: Flash-O-Rama complet _

de temps. Vous creez l'anlmatlon en placant des Images dans les trames. Une trame peut contenlr plusleurs objets en foncUon de !a denslte que vous desirez donner a votre scene,

Le temps est votre allie dans Flash car vous Ie ccntrdlez totalement. VOliS pouvez observer chaque Lmage lndlvlduellement pour appnkler son contenu a un moment sptki£lque. Ensutte, ouvrez les gaz et lancez La lecture a grande vltesse VOliS verrez Ie deroulement de I'anlmation.

Dans Flash, !'anlmation peut decou!er de deux methodes:

"'" Image par image : Vous faites bouger et modiflez des objets une image apres I'autre. Cette rnethode est tres lente, moos c'est souvent III. seule qui permet d'cbtenlr des eltets anlmes tres complexes.

,,_.. lnrerpolanon : VOllS creez Ici 1'1 mage de depart et I'image d'arrtvee, Flash calculant toutes les images Intermedlalres pour aboulir a une animation coberente, L'lnterpolation est une technique d'animatlon qui a ete mise en reuvre dans les morphings. Cette methode est bien plus rapide que I'anlmatlon Image par Image, mals Ie resultat obtenu est hnealre, Atnsi, VOUS l'uttltserez pour calculer le deplacement d'un objet ou la transformation d'un objet en un autre. VOllS dlsposez donc de Ylnterpolation de mouoemetu et de t'inlerpolution de forme.

L'lnterpolation repose sur des lrnages-cles. On les appelle runsi car il s'agtt de moments-des dans la duree de l'antmation auxquels se refere le logiciel pour calculer les Images Intermedlalres. L'interpolation est rapide a reallser, et en plus elle genere des flchlers plus petits (qul se telechargent a grande vitesse). Cela tlent au fait que la descnp Ion de vos animations est plus concise. Dans une animation image par Image, chaque trame est une lrnage-cle, car chaque image definlt un changernent dans l'actlon,

Preparer l'animation

Avant de se lancer tete balssee dans l'antmatton, IIlaut preparer la scene, SLnon, votre animation risque de ne pas fonctlonner correctement. Volclles erapes Indispensables A la creation de votre animation:

l. Cholsl8SeZ Insertion/calque pour cre.er no nouveau calque enti~rement devolu a l'anlmation, Placez volrepremJer graphlque d WI.

Pour l'animation, travalllez toujours SUT un calque qui ne conttent pas d'autres objets. Dans Ie cas contralre, vos objets

_----------------Cbapitre 9: Animer 169

anlrnes rtsquent d'etre effaces, de fuslonner ou d'en decouper d'autres, Reportez-vous au Chapitre 6 pOUT plus d'infermatlons sur les calques.

2. 51 vous envisagez d'utlli8er I'interpolatlon de mouvement, convertissez votre graphJque en symbole ou en group . 51 vous envisagez d'utlliser I'lnlerpolatlon de forme, veriflez que votre (nlphlque est une forme. Et gi vous eovtsagez de creer UDe anlmaUonlmage par Image, votre graph.lq:ne peutetre de n'lmporte queUe nature.

Llsez 11.1 section "L'anlmanon lnterpolee' plus loin dans ce chapltre pour en apprendre davantage UT ['interpolation de mouvement et de forme. LlnterpoJation de mouvement ne foncUonne correctement que si votre graphique est un symbole, un groupe ou du texte. C'/oye'l. Ie Chapttre 7 pour plus d'lnformatlons sur les symboles. et Ie Chapitre 4 pour en savolr davantage sur le groupement des obJets.) Pour j'lnterpolation de forme, 11.1 regie est totalement contralre, Nul symbole ou groupe ne peut jamals etre lnterpole en forme. Desslnez slmplement une forme avec les outils mls a votre disposition dans Flash.

3. Dl!Hnlssez la cadence, c'est-a-dl:re Ie nombre d'lmages par

seconde (voir plus Loin la section "Le Ul!vre OU 11'1 tortue 7'1.

La creation d'une animation necesslte de lancer sa lecture de temps 11 autre. La mantere 111. plus simple est d'appuyer sur 111. touche Entree. Parfols, vous aurez besom de controler une partie de votre animation. Dans ee cas, vous utillserez Ie ContrOieur represente FIgure 9.l. II s'agtt d'une simple barre d'outils qui ressemble a la telecommaude d'un rnagnetoscope, Utlllsez-la pour lire. rembobiner, avancer raptdement et arreter 11.1 lecture de I'animation.

Fillure9.1: le Controfeur permetde contrOler la

lecture d'una ...... ___.I

animation.

Maitriser Ie scenario

Le scenario est la "table de montage" de votre s~quence anlmee, 51 vous ne Ie voyez pas 11. I'ecran, cholstssez AIflchage/Scenarlo. Chaque

170 Quatriemepartie: Flash-Q-Rama complet

-------------------

~c Le scenario peut etre detache de Ia Ienetre prtnclpale de Flash et re?imenSIO?,n~. ClJq.uez-g!issez Ie scenario li l'aide de sa barre de titre gnse, [usqu a I endrolt desire. Puis, changez ses dimensions en cJiquant-glissant I'angle inferieur droit (WIndows) ou la case dans

l'angle Inferleur droit (Maclntosh),

Le fatt de divlser l'anlmatlon en trames (images) permet d'lsoler les images et de travalller dessus lndependammant des autres, Un autre aspect tres performant du scenario est la possibillte d'orgaruser les

~\lC d' d

~ Ivers composants e votre an. lmatfon sur dlHerents calques,

'&). An!mez un seul calque a la (ois.

Cliquez sur n'trnporte quelle trame. Cette action l'actlve. N'oubliez pas de cllque,r dans la rangee du calque contenant les graphtques que vous deslr~ anrmer, En cliquant sur nfrnporte quelle trame, vous pouvez afficher Ie contenu de votre animation a un moment speclfique.

Figure 9.2 :

Utillsez 19 scenario de Flash pour contr61er vos animations.

calque possede une llgne temporelle sur Ie scenario. L'orgartlsatton du seenarlo permet d'apprehender la structure de votre animation, comme Ie montre la Figure 9.2.

Dossier

nte de lecture (indique I'image en cours) Contenu inchange (9r15 cI~ir, Etiquette d'image termlne par un rectangle)

Image-de vide

Interpolation de forme

Nom de la sequence (vert clair) " Secondes ecouh~es

Numero d Image Interpolation incomplete

Calques (pas d'image·ele terminale)

Interpolation de mouvement (bleu clair)

Au tu~ et it rnesure de la lecture de ce chapitre, vous mesurerez I'utllit~ du scenario.

_----- Chapitre 9 : Animar 171

~»c Masquez les calques qui ne VOllS interessent pas (en ellquant sur l'icone CEil). Mains IJ y a de calques viS.lbl.es. m. eiLleure est Ja IIsibillte de l'anlmation. Cependant, n'oubliez jamais de verifier Ie daroulement de l'anlmatton avec tous les calques afflches. II laut savou 51 Ies objets ant un comportement coherent en presence de tous les autres. De

meme, verrouiliez les calques sur lesquels vous pensez ne plus Intervenlr pour eviter toute modUication lnvolontalre de leur contenu Reportez-vous au Chapttre 6 pour masquer et verrouiller les calques.

Le fie(lre ou fa tortue J

Tout ce que vous avez a lalre pour rendre une animation Ionctlonnelle est d'afficher la sequence d'lrnages Ii une certalne vttesse, U en va de rneme au clnerna. L'epoque du muet affichalt les Images a une cadence de 16 au 18 Images par seeonde. Avec l'arrivee du parlant, Ill. vitesse est passee A 24 Images par seconde, Quant a la video, sa cadence en Pal ou en Secam est de 25 images par seconde, centre 30 en NTSC.

Sur Ie Web, les considerations techniques Imposent une cadence plus modeste, Moins iI ya d'tmages et plus Ie telechargement est rapide. La vitesse standard des animations Flash est de 12 images par seconde.

Pour modifier la cadence de votre animation:

1. Double-cllquez sur Ill. petite case afficbant Ie nombre d'images par seccnde et qui Be trouve en bas du 6C.enartO. VOU8 eceedez a la boile de dialogue Proprietes du document.

Une alternative conslste A utlUser Modlflcatlon(Document.

2. Dans Ie champ Cadence, saisissez nne nouvelle valeur, Cette valeur est exprimee en nombre d'lmages par ecende,

Vow; ne pouvez rlefinlr qu'une seule cadence pour Ill. totallte de I'animatlon. II est recornrnande de deftnir cette cadence avant de commencer I'animation.

3, Cllquez sur OK pour vallder Is nouvelle vltesse et fermer la

bone de dialogue.

~~C La cadence d'une animation Flash represerrte Ill. vitesse maxlmale de lecture de l'anlmatlon. Une animation Flash n'a pas une vitesse minlmale garantle. SI votre animation est trap iente, augrnenter sa cadence n'est certainement pas un gage d'acceleratton, au can ralre 1 En effet, augmenter Ja cadence aceroTt Ie nombre d'images a a1licher

en une seconde et ralentit d'autant la vltesse de teJechargement de l'anlmanon,

172 Qualriemepllrtie: Flash-O-Ramacllmplel _

Animer aoeo des images-eles

Les images·des sont des Images qul representant les lnsrants-cles d'une animation. Dans une anImatIon Image par Image, chaque trame est UIlB trnage-cle. Dans une anlmatlon Interpolee, seules I'a premiere et la dernlere trame sont des images-ch~s. Avec des lmages-cles, vous detln!ssez la duree, done la vitesse, de la sequence anlmee.

Pour creer une lmage-c.le, selectlonnez une trams sur Ie scenario et choislssez rnsertlonjlmage-cle. Pour aller plus vlte,appuyez sur Ie bouton droit de la souris (Windows) ou Iattes Ctrl+Clic (Mac) sur une des trames du scenario. Dans Ie menu contextuel, cholslssez ffisArer une Image-cll:. Une dernlere methode conslste II setecttonner une trame du scenario et a appuyer sur la touche F6.

~'!lC V. ous pouvez e~.anger I'a.spec~ d. es i.mag .• es d:m.. s ... le scena:io en d!quant sur Ie bouton d aifichage des Images, dans I angle superieur droit du

scenario. Vous deroulez ainsi Ie menu d'aflichage des images. Via ce

- menu, vous pouvez:

I>'" RegIer la largeur des cases des images sur Mjnuseules. Petites,

Normaies, Moyennes ou Grandes.

I>'" Dimlnuer la hauteur des cases d'lmages en cholslssant Courtes. I>'" Valider ouinhiber la telnte des sequences. d'lmages.

I>'" Choisir d'afflcher une vignette du contenu de chaque Image. SI vous cholstssez Apercu, la vtgnette est redlmenslonnee pour rempllr la totalite de la case dans le scenado ; 51 vous cholslssez Aff1cher un apercu dans Ie contexte, la vignette eomprend egalement tout eventuel espace vierge autour des zones pleines de l'tmage.

JmtuJe apres imafJeapreS imafJe

5i votre animation n'est pas un Simple survl de trajectotre au une modlftcatjon de forme (au de couleur), vnus opterez probablement pour une animation Image par image.

QUand faut y alier, faut y alter, Les animations complexes sent les plus dlfficiJes a rea1tser technJquement, ne seralt-ce que par ce travail que vous devez raallser sur chaque Image.

Volei comment creer une animation Image par image:

T

_ Chapitre 9: Animer 173

1. ~lectlonnez nn.etrame dans la raagee du calque que "0118 d eatrez utfllser,

L'animationconunencera. a ceue trame precise.

2. CUquez sur la trame avec le bouton droit de Ia souris. Dans Ie menu contextuel, ehotstssee Inserer nne lmage-cle.

La premiere trame du scenario est systematlquement une Imagede.!! n'est donc pas necessaire de la creer.

3. Creez Ie graphique de eette premiere trame,

Vous pouvez Importer. coller au desslner un graphlque. Le Chapltre 3 VOllS montre comment creer au Importer un graphlque.

4. Cllquez avec Ie bOU.tOD droit deja souris (WIndows) au fuita Ctrl+Cllc (Mac) sur la tnune eutvante. Cholstssez de nouveau In.se.rer un e 'lmage-c.l e"

La trame sulvante du scenario contlent la merne image que la precedente trame,

5. Modifiez legrapbique pour creer .19. seeeade Image de I' a.u.lmaIiOll.

6. Repetez les elapes 4 et 5 Jusqu'l ee que veua ayezcree toutes les Images neceli88.bes i't volre animation.

7. Pendant votre travaU, vous pouvezcontlnuellement verifier J'aspect de votre anImation en appuynnt sur la touebe Entree. pour lancer sa lecture.

La Figure 9.3 mantee les Images successrves d'une animation. lei, Ie mot New.! apparait sur ta page de manlere speclflque.

Dans fa nuit sans boufJer

Les Images standards ne ehangent pas. Done. 51 vous lnserez un graphlque dans la premiere lmage-cle, elle y restera [usqu'a ce que Ie scenario attelgne une image-cle con tenant un nouveau graphlque.

Plusieurs raisons justlfient la cople d'objets sur un certain nornbre d'images. Partols, vous deslrez une Image lixe presente sur uncalque tout au long de votre animation - c'est le cas d'un arrtsre-plan - sur laqueUe se deroulent toutes vas anlmatlons. Un arrlere-plan est le contexte du derou!ement de vos objets mimes. [[ arrive que des objets antmes dolvent rester sur la scene une lois leur animation termlnee.

174 Qu&t'fieme partie: Flasb-O-Rams eamplst ; _

Figure 9.3:

Une animation complaxe doit &tra criiee image par image.

Pour y parventr, ajoutez un nouveau calque a votre arrtere-plan ou Ii tout autre objet. Avec ee calque actlf, creez au collez vas objets sur la trame de depa:rt que VOllS souhaltez. Cilquez ensulte SUI votre trarne de Un et chclslssez Insertion/Image-de. Flash duplLque votre image sur to utes les trarnes Intermedlalres.

~).)C

~.. Une autre m. ethode conststea maintenir enloncee la touche Alt

~ (WIndows) ou Option (Mac) et a lalre gllsser la trame sur Ie scenario

[usqu'ace que vous attelgntez la derntere trame devant contenlr

T

_----------------Chapitre 9: : A'nimer 175

I'objet. Flash cople Ie contenu de la premiere trame sur toutes tes trames lntertnedlatres.

51 vous coplez les objets sur une lmage-cle, lis restent presents sur la scene jusqu'a 1& pro chaine image-de.

L 'animation interpolee

SI I'anlmation est rectlligne, c'est-a-drre qu'un objet suit une trajectoire ou change de lorme (voire de couleur), rernettez-vnus-en ala fonctlon d'interpolation de Flash. Avec cette technique, vous creez la premlere et la derniera image.de de i'animation ; flash se contente alors de calculer toutes les images lntermedlaires, On peut dire que Flash anlme Ii votre place.

Les posstbtlttes d'tnterpelatton de Flash sont Impresslonnantes. Volcl ce que vous pouvez laire avec:

v Interpolation de mouvement: C'est I'interpolation la plus repandue, lei, les objets se deplacent en llgne drone d'un point 11 un autre. Flash permet de creer des trajectoires plus complexes, contenant des courbes,

V InlerpolaUon de forme: Ce type d'lnterpolatlon accepte n'lrnporte quelle forme et la change progresslvement en une autre. Vous creez La prernlere et Ill. dernlere forme. Vas enlants appellent cela le morphing.

".. Modifier la truUe d'un objet (tnterpola.tion de mouvement et de forme) : Parexemple, sl vouscreez un objet qui devtent plus petit pendant son deplacernent, vous dcnnez 1'l11uslon qu'll s·el.oigne du spectateur,

,_.. Fake ptvotar un objet (Interpolation de mouvemenl et de forme) : VOllS speclfJez !'Importance de la rotation. Flash comblne l'tnterpelatlon de mouvement ou de forme avec la rotation. ce quJ permet d'obtenir deux efiets en un.

,_.. Modifier la couleur etlou La traosparence (ln1.erpola.HoD de mouvemeatet de forme) : flash cree un changement progressll de la couleur en se bas ant sur une telnte de depart et line teinte d'arrlvse.

~c _ Anlmer la transparence de. votre. graPhlq. ue est un effet partlcuuere-

ment elllcace, II permet d'obtentr un londu a l'ouverture et a la lermeture. C'est rnaglque I Les objets apparelssent et dlsparaissent

- selon votre voionte.

176 Quatriem.e partie: FllIsh·O-Rama compiliet _

Bien slir, VOtlS pouvez creer plusleurs animations, l'une apres I'autre, pour rnelanger lea effets. Rlen ne vous empeche de combiner une animation Image par Image avec une animation lnterpolee. talsseavous guider par votre imag~nation!

f} 'lc! a 114 - I'interpolation de mouaement

Dans une lnterpolauon de mouvement, vous pouvez deplacer un objet d'un endrott a un autre. Le mouvement peut etre rectJIIgne ou embrasser une trajectolre que vous desslnez avec l'outll Crayon. La Figure 9.4 moutrequelques trames d'une Interpolation de mouvement qui utilise une trajectoire en boucle. Le skateboarder est deux lols plus petit que sa talHe d'orlgine pour donner I'lmpression qu'il s'eloigne du spectateur, Bienevldemrnent, Ia traieetolre sera rendue invisible. Seule l'anlmaUan de l'oblet se deroulera sous vas yew: cbahis.

Deptacer dessljmbotes, des Ij.roupes et descllrtlcttre'S

Vous poovez appllquer une interpolation de mouvement sur lea occurrences des symboles, sur des objets que vous groupez au des caracteres (texte). Non seulement vous pouvez les deplacer, mats en plus modifier leur tame, les lalre plvoter, Ies lncllner et changer leur couleur, Et, dans Ie cas d'occurrences et de blocs de texte, vous pouvez egalement effectuer une Interpolation de la couleur (pour changer la couleur de groupes ou de texte pendant une tnterpoJatlan

i'S~~UP~ de mouvement, vous devez d'abord les ccnvernr en symboles).

: f.' . Incliner un objet signlfle Ie rendre obllque par rapport 11 un au it ses

• . deux axes.

POUT creer une simple animation interpolant un mouvement, sulvez ces etapes :

1. Avec Ie beuton droit de la souris (Windows) au en appuyanl sur la touche Ctrl (Mac), cHquez sur la trame de d(!part de I'animalloo et cholstssez Insertionflmage-cle.

La premiere trame du scenario est toujours une lmage-cle, Par consequent, st vous cornmencez l'anlmatlon sur eette premiere trarne, contentez-voua de cllquer dessus (l'lrnage-cle existe),

2. Creez un groupe au one zone de lexte au encore faJtes gUsser one occurrence d'onsymbole depuls la blbUotheque.

_---------------- Chapitrfl 9 : Animer 177

Figurll9.4 :

Vous PoUV€Z dassinsr n'importe quelle

traje etc ire pour animar llnobjeL

778 OUBtrieme partie: Flash-O-Rama camplet _

Reportez-vous au Chapltre 7 pour plus de details sur la creation des symboles et des occurrences. Reportez-vous au Chapitre 2 pour un long discours sur la blbltotheque,

3. C~ez nne autre image<Je pour terminer I'animation.

4. Deplacez I'objet a sa nouvelle posItion sur la scene.

5. Pour modifier 18 talUe de I'objel, Ie fa1re pivoter on changer sa couleur, e.ffectuez ces ri!:gJages sur cette demlere lmage<Je.

Reportez-vous aux deux prochaines sections de ce chapltre pour plus de details,

6. CUquez n'lmporte oil d8118 l'lnterpolatfen, avant 12 demlere lmage.de.

L'1mage [uste avant la dernlere image-de est un bon endroit pour cllquer.

7. Cholswez Fenelre/proprietes pour ouvrirl'lnspecteur Proplietes s'Il n'est pas deJlI ouvert.

SI necessalre, cliquez sur la lIeche de reductton sur Ia barre de titre de l'lnspecteur Proprletes pour aHicher l'lnspecteur dans sa taiUe complete.

8. Dans Ia liste deroulante Interpolation de I'lnspeeteur Proprtetes, cholstssez Mouvemenl.

Flash cree I'lnterpclatlon de mouvement. SI vous voulez modifier la tallle OU la rotation de l'objet, sptkifjez les parametres dans I'inspecteur Proprletes (voir les explications dans 1a section suivante).

C'est fait! Cliquez sur la premiere trame et appuyez sur Entree pour lire l'anlmanon,

Voici des phrases Simples pour vous aider A memorlser le contexte dans lequel vous pouvez utiliser l'interpolatlon de mouvement :

DrnJes

Premiere image-ere Objet - placez-le Dernlere Image-d~ Deplacer I'objet

Selectionnez Ia plage d'images

D'objets AJmeot

Se deplacer Done

Chapitre 9 : Animer 179

--------------------------------------

Figure S.5 :

L'inspecteur

Prt1pri8t~s psrmat de crlier una interpolation de mouvement, de modmerla

taille ella

rotation.

lnterpolez

Interpolation - chotsissez Mouvement dans la llste Interpolation

Redimensionner et faire pilloter un ob;et anime

Tres bien I Vous etes crl!atjf et arnbltieux, et vous en voulez toujours plus. Modifter les proprletes de vos graphiques pendant leur deplacement est assez simple a reallser. A I'etape 5 de la procedure cl-dessus, vous pouvez operer un redlmensionnemen! au Ialre ptvoter (lncluant 1'lncUnaison) votre objet.

UtUlsez 1'0utU Transformation libre de la boTte 1I outils, ou n'lmporte quelle autre methode pour changer Ia tallle ou la rotation. 010yez Ie Chapitre 4 pour plus de precisions sur le redlmenslonoement et la rotation des objets.)

Ensulte, a l'etape 7 de la procedure d'interpolation de mouvement, cornpletez les autres parametres du panneau Proprietes, comme le montre la Flgure 9.5 (llre Ia prochaine section).

Apres avoir spec.iJ1e l'lnterpclatlon de mouvement VOllS speclflez, dans Ie panneau Proprietes, la manlere dont l'lnterpolation dolt se derouler:

Y' Poor prendre en compte Ie redimenslonnement de "objet, cochez la case Red1mens. Cette option est sans effet si vous ne modlHez pas la taille de I'objet pendant I'interpolatlon. En revanche, sl une telle Interpolation exlste, decocher cette case desactlve Ie redlmensionnement.

180 Quatrieme partie: Flash.-O-Rama complet _

'" Pour (alre plvoter votre grapbJque, cholstssez une des option. de Rotation. L'opUon Auto fait plvoter l'cblet une fois dans la directton sulvte par l'objer. Vous pouvez ~alement cholslr d'operer une rotation dans le sens des algullles d'une montre au dans le sens Inverse avec lesoptlons Vers la drofte et Vers ta gauche, lndlquez, dans le champ rots, Ie nombre de rotatlon.s l! effectuer. Cette option fait plvoter l'objet merne sl vous n'avez trnprtme aucune rotation a I't'!tape 5 de 1.1 precedente enumeration. 51 vous avez fait pivoter i'objet, Flash lnsere deux rotations en ajoutant I'angle specifit!.

'" Pour contrO.ler l'accIHeration au la dlkeh'iratioll du mouvement, utillsez lecnrseur Acceh~radon. Par defaut, Ie curseur se trouve au milieu, c'est.A-dlrea la valeur O. Cela cree un mauvement constant sur toute Ia duree de l'anlmation lnterpolee. Depiacer Ie curseur vers le haut fait partir lentement I'objet qui prend de 1.1 vltesseau fur et a mesure de son animation. Deplacer Ie curseer vers Ie bas entraine un ralenussernent de I'objet en fin d'animaUon.

'" Pour em certain que votre symbole graphlque effectue cerreetement des boucles, eochez lacase Syn.cb. 51 vous animez un symbole graphique et que Ie nombre d'lmagesqu'il necesslte n'est pas un multiple des trames que le syrnbole eccupe sur Ie scenario principal, Flash synchronise les deux scenarios de maniere que Ie symbole graphtque effectue une boucle correcte dans Ie scenario principal.

Les parametres Accrocher et Orienter vers la rralectolre seat traites A la section "lnterpoler sur" une tralectotre", Les parametres Son, Effetet Sync sont etudles au Chapitre 11.

Interpo(er les cou(eurs et (a transparence

Pour changer Ja couleur d'un objet, cllquez dans Ie scenario sur l'irnage oil VOllS voulez modilier 101 couleur. Puis, c1lquez sur I'objet sur Ia scene. Cholslssez Fenetre/Proprl.etes pour ouvrlr l'lnspecteur Proprtstes s'll n'est pas dt\Jg. ouvert et, sl necessalre, cllquez sur la neche de reduction dans la barre de titre de !'Inspecteur Proprletes pour agrandir l'lnspecteur ii. sa taille complete. Choisissez une des options (com me Teinte au Alpha) dans la llste deroulante Couleur et apportez les ajustements desires. (Le Chapltre 7 expUque comment modlfler les occurrences de symboleset donne des details sur Ies options de la Uste deroulante Couleur.)

II est parfaltement possible d'interpoler Ie mouvement avec un redlrnensfonnement, une rotatlon et une mcdtflcatlon de couleur/

_________________ Chapit're 9: Animar 181

transparence pour creer des eIlets excitants. 51 un objet toume et devlent plus petit pendant son depl'acement, II semble s'eloigner de l'utllisateur. Anlmer des objets seml-transpareets les uns au-dessus des autres cree un rnelangeLnteressant de couleurs at donne de la profondeur a I'unlvers bidtmenslorurel du Web. Augmenter la valeur Alpha (c'ast-a-dlre augmenter l'opaclte) pendant l'interpolatfon perrnet delaire apparaltre graduellement les objets. Essayez les dlverses possibtlltes pour decouVTlr cellesqul convlennent a votre talent artistique.

'@f. J)C . Les fondus de couleurs sont plus rapldes queceux de transparence. 5i

VOUS avez besoin d'un objet qui apperalt au dlsparajten fondu, votre

. animation se chargera plus vite sl vous lnterpolez lacouleur de "objet

en fonction de la couleur d'arrlere-plan. Par exemple, sl vous avez un objet bleu reposant sur un arrlere-plan noi:r, II est plus judicleux

d'lnterpoler la couleur de I'objet du nair au bleu ou du bleu au noir plutdt que d'aglr sur sa transparence.

Interpo(er s.ur une trajectoire

Vous pouvez creer une animation oil Ie deplacement d'un objet ne se fait pas. en ligne droite. II sumt pour cela d'mterpoler Ie mouvement sur une trajectolre dessmee a main levee, Supposons Que Ie skateboarder de III. Figure 9.4 delve falre quelques figures. Les etapes sulvaetes montrent comment y parvenir.

Pour lnterpoler sur une teatectotre.ccntormez-vous .lUX etapes sulvantes :

I. 51 necesselre, creez la premiere lmage-cle.

Z. Placez votre occurrence, zone de tate ou groupe sur la scene.

Faites gllsser l'occurrence depuis la blbliotheque [usqu'au bord gauche de la scene.

3. Creez III. derntere :lmage-cle.

Ne touches pas A l'objet comrne vousle faltes pour une interpolation de mouvement tradltionnelle.

4. Cllquez o'lmporteou. entre les deux lmages-cl.es.

5. Cholsissez Fenetre/proprletes pour ollVliT I'lnspeeteur Proprletes s'l1n'esl pas deja. ouvert,

51 neeessalre, cllquez sur la Heche de developpement sur 1.1 barre de tltre de l'lnspecteur Proprletes pour afllcher l'lnspecteur dans sa tallle complete.

182 Quatrieme partie: Flash-O-Rama complet _

6. Dans 10 llste Interpolation, cholsJssez Mouvement.

VOllS avez maintenant une interpolation de rnouvement sans mouvement.

7. Dans Ie panneau Proprietes, cochez la case Ajuster pour ajuster Ie polnt de reference de I'objet sur 18 tn\jectoire.

8. Cochez dans .10 case OptJonB Orlenter vers la trajectoire, 81 VOU1I souhll.ltez que I'objet pivote en fo nctl on. de Pangle de cette ln1Jectolre.

9. Sou Windows dlquez sur Ie calque de I'objet avec Ie bouton droit de la souris. Sons Mac, failes Ctrl-Clle sur ledJt calque. Dans Ie menu contextuel, cholsissez AJouter un gulde de mouvement.

Un nouveau calque apparalt sur Ie scenario. II se nomme Guide et possede l'lcone d'un guide de mouvement. (Rien ne vous empeche de creer ce calque avant d'entamer le processus de creatton de I'animation.)

10 .. Desslnez votre In!Jectoire. Creez plusleura combes avec des boucles.

Vous pouvez utiliser n'lmporte quel outil de dessln : Crayon, Ugne, Cercle, Rectangle ou Pinceau. Vous pouvez adjoindre les rnodiflcateurs Redresser ou Llsser sl VOllS utlllsez l'outll Crayon. (La. trajectoire de la Figure 9.4 a ete creee avec l'outiJ Crayon et Ie rnodlficateur Usser.)

Verroulllez Ie calque de l'objet pendant que vous desslnez la trajectolre pour eviter de deplacer I'objet accidentellement. De merne, vertllez bien que le calque de guide est selectlonne au moment oil vous dessinez la trajectoire.

II. CUquez sur la prenrlere trame de I'animation et laltes gU.sser I'objet a partir de son point de reference (Ident:ifh~ par Ie signe "+"). Veillez !\ ce que Ie point de re.ference coincide avec Ie debut de la trajectoire.

12. Cliquez sur 18 dermere Image-de et failes gllsser I'objet de maniere que son point de reference co'inclde avec la fin de Ia trajectoire.

13. Appuyez ur la touche Entree pour lire I'animation.

________________ Chapitre g: Animer 183

Quelques ajustements

Les etapes decrttes el-dessus donnent une vision basique de l'mterpolatlon sur une trajeetolre, La perfection ne s'obtlent que par des ajustements precis.

VOllS n'etes pas satlsfalt de votre deplacement sur une tralectolre ? Pas de problema. Voie! comment modifier facilement la trajectolre. S!Jectlonne.z Je calque de guide. Cholslssez l'outll Fleche et redeflnlssez la forme de la ligne en faisant gllsser n'lmporte quel point la constftuant. Assurez-vous simplement de ne pas rom pre la IIgne en plusleurs rnorceaux I Appuyez de nouveau sur Entree pout voir l'objet suivre sa nouvelle trajectoire.

Vous ne deslrez plus voir Ie guide de mouvernenl ? Rien de plus Simple. Cliquez dans la colonne CEil du calque de guide de mouvement pour Ie masquer. Appuyez SUI Entree pour lire l'animatfon (meme st vous ne masquez pas Ie calque de guide de mouvement, ce guide de mouvement ne sera pas visible dans I'anlmatlon exportee),

SSCj)~U~~ Les symboles, Ies groupes, le texte et Ies images bitmaps ont Ul1 point

: f de reference. 11 se trouve gl!neralement au centre du graphlque.

, Loraque vous Interpolez sur une trajectoire, vous voulez peut-etre qu'un autre point suive la !rajectoire. Reportez-vous ala section du Chapltre 4 consacrse au deplacernent du point de reference.

Comment lalre pour lier un guide de mouvement a un objet se trouvant sur un autre calque? Admettons que vous ayez desslne un ovale et que VOllS deslriez que des electrons tournent autour. Vous tattes done de son calque un calque de guide de mouvement. Plusieurs choix s'olfrent a vous :

~ Creer un nouveau calque sous Ie calque de guide de mouvement. Le nouveau calque apparait en retralt, lndlquaat qu'll est Ile au calque de guide, comme Ie montre la figure 9.6. Ensuite, n'importe quel objet place sur Ie nouveau calque s'ajuste automatlquement au calque de guide de mouvement. Une [0[5 les objets places sur Ie nouveau calque, II ne vous reste plus qu'a faire glisser votre objet au debut de la trajectoire, puis it. cllquer sur la derniere lmage-cle et it. placer I'objet en fin de trajectolre.

¥' 51 vous avez dejA un calque que VOllS deslrez attacher it. votre tralectotre, tattes-le gllsser sous le calque de guide de mouvement. Quand Ie nouveau calque apparait en retrait sous le calque de guide de mouvement, vous savez que le Hen entre les deux est Habit

184 Quatriam.e partie: flash-Q-Rama complet _

Figure 9.6 :

Le calque guide sa lrouva en retre]t

"'" Une trolslerne option conslste a cholslr Ie calque de votre graphlque et a Iaire Modifier/Calque. Le calque dolt se trouver en dessous du calque de guide. Dans la boTte de dialogue Propnetes du calque, selectlonnez Guide. Malntenez enfoncee la touche AU (WIndows) au Option (Mac) et cliquez sur le calque de guide de mouvement.

Interpo(er des formes

let, vous modiliez la fOmle d'un objet II dllferenls moments de l'annnatlon. L'ordlnateurcree les formes lntermedlalres a votre place. Vous pouvez obtenlr de superbes effets en uttllsant I'interpolatlon de forme. Ce type d'lnterpolatlcnest souvent appele morpl1ing. Vous en voyez un example sur la Figure 9.7.

Vous pouvez combiner une Interpolation de lorme et de mouvemeat, tout en madill ant la taille, la couleuret la transparence Comme pour l'tnterpolatlon de mouvement, rravalller avec une seule forme par calque evlte de nombreux problernes,

VOtlS pouvez Interpoler la forme d'objetscrees avec les outils de dessln de Plash. Vous ne pouvez interpo!er la forme d'un symbo!e, de texte ou d'un groupe, 11 mains de les separer d'abord (en les setectlonnant et en actlonaant Modlilcatlon/Separer). Vous devez separer les blocs de teste deux lOis, une fois pour sepsrer Ie bloc de texte en lettres lndlvtduelles et une autre tots pour separer ces lettres en Iormes, Vous pouvez egalement essayer d'interpoler la forme d'une Image bitmap apres l'avolr separse mals les resultats sont trnprevtstbles,

~c

~ 51 vous separez un symboJe, un bloc de texte, une image bitmap au un

gr .. oupe en utlllsant Modl1icationj5eparer, vous aurez eventue.nement plusleurs formes a ani mer. Assurez-vous de placer chaque objet aalme sur un calque separe. Cela s'opere Iacilement en selecttonnant les objets el en acttonnant ModlJlcatlon/Repartir vers Ies calques (voir Ie

Chapltre 6).

_________________ Chapitre 9: An;imer '85

Figure 9.7:

Vous pouvez fei re pivote r at delormer vas objets avec l'interpola1io~ de mcuvement ici, U~ eerels devient una stoile.

Pour creer une Interpolation de forme simple, sulvez ces etapes :

l. Avec Ie bouton W:llil de Ia souris (Windows) OU la touche etrJ (Mac), cllquez 80f la trame vide oil dol.lcomme.ncer l'anhnation et cboi.sissez insertionjlmage-cle.

2. UW1.8ez les outns de dessin pour creer 1ft form.!'! de depart.

Vous pouvez creer des objets complexes issus de la fusion de plusleurs formes ayant une meme couleur. Vous pouvez ~.salement creer des formes decoupees avec desoblets de couleurs differentes. (Voir le Chapitre 3 pour plus de details.)

3. Creez une nouvelle imnge-cle apres 18 premiere en utiUsa.nlla meme methode qu'a l'etape l.

"aprea" ne veut pas dire juste derriere. VOllS pouvez definjr cetle seconde lmage-cle 1, 2, 10 ... 60 trarnes plus loin.

4 .. Creez La forme finale.

186 Quatrieme ipartie: flash-C-Rama complet _

Vaus pouvez effacer l'anclenne forme et en dessiner une nouvelle, au bien utiliser la premiere forme encore presente SUI' la scene et la modifier. Vous poueezegalement deplacer III. forme et modifier sa couleur et sa transparence. Vous 'f parviendrez facilement, apres avolr setecttenne I'objet, encllquant sur Ie Pot de pelnture de la zone Couleurs de la bolte A. out lis. UtllJsez Ie panneau Melangeur de couleurs POUI modifier la transparence (alpha), Reportez-vous au Chapltre 3 pour plus d'informattcns sur leg. cnuleurs et la transparence.

5. Cl1quez u'tmporte au dans l'Interpelatton avant III.. dendere Image-cle.

Un bon endroit est l'tmage juste avant la dernlsre image--cle.

6. Cb.oislssez PenetrejPropril!tes pour ouvrir l'Inspecteur Proprietes s'D n'est pas deja.ouvert.

51 necessatre, cUquez sur la neche de deveroppement dans la barre de titre de l'lnspecteur Proprletes pour allJcher I'lnspecteur dans sa tallle complete.

7. Cbolstssez Forme dans lallere Interpolation.

S. Choislssez nn mode de Melange: Angn1alre au DislTlbutif.

Cholstssez Angulalre pour metamo.rphoser les formes qui ant des angles et des llgnes droltes, Cela preserve les cotns et les llgnes sur toutes les formes lntermedlalres de !'interpolation. 5i vos formes n'ont pas d'angles atgus, utilisez Ie mode de Melange distrlbutil. Vous obtlendrez une Interpolation plus Ilulde,

9. Vous avez finj ! Cllquez STIr la premIere trnme at appnyez sur la teuehe Entree pour lire I'anl:matlon.

Repere.s de (tJrmes

Vous avez rnalntenant I'anlmatlon de votre lorme, mals la transformation est-elle ausal etrangeque vous le souhaitaz ? Flash eJfectue la metamorphose seton une probabtltte de mutation des formes .. En d'autres terrnes, II va au plus Simple. Vous n'obteaez pas Iorcernent la forme voulue.

Pour combler ceue lacune, Flash utilise des reperes de forme. Un repere de forme est un petit cercle colore contenant une lettre (a-z). Sur I'lmage-cie de depart, le repere de forme est jaune, et su rcelle de fIn, it est vert. Quand vous lnserez votre premier repsre, avant de Ie placer sur votre forme, II est rouge. La Figure 9.8 montre une forme de debut et de fin avec des reperes de lormes.

_________________ Chapitre 9: Animer 187

Figure 9.8: las r,ep ~ras de tcrmes guiderrt Aas~ dans l'tntsrpo latia n d's votfe 10 rm B.

Pour utlliser les reperes de lorma, suivez ces etapes :

1. creez nne animation de forme en ulillsant I'interpolation de fonne.

2. Cliquez sur l'tm.a.ge-cH~ au vous seuhenez ajouter votre premier repere de fonne.

3. Avec l'oblet s~"ectionne, cboiaissez Modificatioo/f'ormel Ajouter les reperes de formes.

Le premier repere de lorme apparait avec la lettre (1 dans un petit cercle rouge sur III. scene.

4. Cliquez. Sill' Ie petit cerde rougeet faites-Ie gJjsser sur la partie du grapWque que vons dl!Sirez marquer.

5. Cllquez sor la demlete image-cli: situeeen fin d'a.nlm.ation de la fonne.

Le repere de forme llnal apparalt sur la scene avec de nouveau III. lettre a dans un pettt cercle rouge.

6.. Cllquet. 601' Ie petlt eercte ronge et faites-le gJlsser sur votre grapblque il.1'endroUoll VODS veulezqne vntre polot commence a sa deplacer.

Lorsque vous taites cela, Ie repere de fin devient vert. 51 vous revenez en debut d'antmatlon, Ie repsre devlent Jaune.

7. Appuyez sur la touche Entree pour lire l'anlmatlon.

,,\It v.ous pouve. Z fa!. re glisser les reperes de lormes en de.hors de III. sce. ne pour les supprlrner, Une autre methode constste a cholstr ModlflcatlonjForme/Supprimer taus les reperes, Cholstssez AJflchage/AIflcher

- les reperes de forme pour voir tous les reperes de formes du calque et !'Ima,se-cle ell cours. Cholslssez de nouveau cette commande pour les masquer. WI encore, le calque et l'tmage-cle doivent etre setecuonnes.

188 Quatrieme partie: Flash·O·Rame, compl'e1 _

Aiuster les reperes de ffJrme

Pour une animation correcte, cliquez sur l'lmage-cle Qui se trouve au debut et a Ia fln de l'anlmetton de votre forme, et deplacez votre repere de fonne. Lancez la lecture de l'antrnedon pour apprecter la nouvelle lnterpelatloa. Plus votre forme est complexe, plus vous aurez besotn de dHinir des reperes. Pour des animations de forme cornplexes, utlltsez davantage d'lmages-cles. VOllS creez ains! dava.ntage de lormes lntermedlalres Que vouslnterpolez, En d'autres termes, vous pouvez creer deux Interpolations de Iorrne, une lmmedlatement apres une autre.

51 vous n'obtenez pas les resultats voulus, verlflez Ie placement de vas reperes de formes. SI vous avez une courbe avec des reperes <1, b et c dans cet ordre, Inutile de les Interpoleren une courbe dont l'ordre des rsperes est c, b eta, saul 51 vous desirez obtenir des effets Inhabituels. Flash lalt un meilleur travall lorsque vous organlsez Ies reperes de formes dans Ie senscontratre des algullles d'une montre, en pertant du coin superieur gauche de votre objet.

Modifier une animation

Personae n'est parfait. et vas premieres animations n'echapperont pas a cette regie bien "humalne". Heureusement, Flash perrnet de modifier Ie contenu de vas lmages-cles,

Vous ne pouvez modifier que Ies unages-ctes, pas les Images lnterrnedJaires criMes par Flash (issues de !'Interpolation). Vous pouvez ruser en inserant une image-de entreles deux Images-des de debut et de !tn, et alnst la modifier. Pour cela, cholsissez Insertionf!mage-de. Ne cholslssez pas [nsertlon/Lmage-cle vide SOllS peine de rompre l'interpolatlon, Vous pouvez egalement rnodlfler les trames lnterpolees en changeant l'hnage-cle de debut et celle de fin qul la delinlssent. Quand VOllS modifiez u.ne Image-de d'uneanlmatlon inter pohle, Flash recalcule toute J'interpolaUon.

Les sections sutvantes presentent des techniques utlles a l'ectltlon et a la gestlcn de vas animations.

Ajouter des etiquettes et des eommentaires

Apres de longues [ournees d'elaboratlon, les animations peuvent devenlr confuses. De multiples objets. calques, scenarios envahlssent un univers de travail "claustrophoblque" (sl [e peux me permettre).

_________________ Chapitre 9: Animar 789

Alnst, lorsque vous aJoutez de J'lnteractlvite A vas animations, vous pouvez i;lJouter des etiquettes aux trameset vous y nHerer dans vos scripts. (Vous en apprendrez davantage sur ActionScrlpt au Chapttre 10.)

Valet comment ajouter une etiquette ou un commentalre a une trame :

1. $electionnez une trame, c'est.&dlre une Image du scenario.

2. Cholslssez Fenetre/proprhHes pour DeeMer au panneau du merne nom,

3. Oans Jecbarnp tl1queue, salslssez Ie nom de I'eliquette ouun cemmentalre,

Un conimentaire est precede de deux banes obliques un. SI votre commentstre tlent sur plusieurs !ignes, chacune d'elles dolt debuter par ces deux slashes (autre nom donne aux barres obliques).

Selectionner des trames

Plash MX offre maintenant deux styles de selecuon dans le scenario. La methode par detaut est la selection a base d'lrnages. Dans cette methode, sl vous cllquez sur u.ne Image ou une image-de, elle est selectlonnee. Pour selectlonner un intervalle d'images, cllquez-gllssez sur tes trnages it. select!onner au cllquez sur Ia premiere image, appuyez sur Majuscule, puis cliquez sur la derruere Image dans l'intervalle.

L'autre style de selection est la selection a base de plage, Dans cette methode, st vous cliquez sur une image, cela setecnonne la totattte de la plage contenant cette Image, d'uae lmage-cle a. rautre. Un cllquergllsser dep.lace la totallte de Ia plage (d'une Image-de a l'autre), POUf selecttonner une image indIvlduelle, VOllS devez appuyer sur Ctrl (Windows) ou Commande (Mac).

Pour changer Ie style de selection, actlonnez E{iltian(Prt'iferences, dlquez sur I'onglet General dans la lenetre des pr~erences, puis cochez l'option S!!lectlon basee sur plages.

~"'i\ONI

$~. ~''- D. an. s 11'1 selection il base. de Pia. g. e, lorsque vous cIIQu.ez-gussez la ..

A" premiere ou dernlere Image-cle dune Interpolation, VOllS changez la

_. longueur de I'interpolatlon au lieu de selectJonner plusieurs images.

190 Quatrieme partie: Flash-O-iRama compl.et _

FigureU:

Vows pawez d~p'la~er une plage 9rrtiere sur un calque.

Copier et c()lIer

Vous pouvez copier des trames qui cocttennent des ~I~ments que vous deslrez faire apparaitre ailleurs. II suffltensulte de Jes colter a l'endroit specllle.

Void comment se derouJe lacopJeet Ie collage de trames :

I. selectionnez one ou plusleurs trames ..

2. Cholslssez td1l1on/Copler les !.mages pour "envoyer" les !.mages dans Je presse-paplers.

3,. 5e1ectlonnez la premiere trame de destl.nati.oD ou 18.sequence d'lmo.ges que veus de.slrez remplaeer,

4. Cholsissez &utlon/Collet les !.mages. Ellesapparalssenl it leur

nouvel. emplacement.

Vous pcevez egalement copier des trames en malntenant la touche Alt (WIndows) ou Option (Mac) entoncee pendant que vous deplacez l'tmage-cle ou la plage d'lmages vers un nouvel emplacement. Un petit slgne "+" appara1t pendant Ie dep!acement.

Deptacer des imafJes

Vous pouvez deplacer des trarnes etleur contenu. Selectlonnez Ie calque et placez Ie pointeur sur une trame ou une plaga de trames. Deplacez les trames jusqu'la. leur nouvel emplacement (FIgure 9.9).

.. r."!=!i<"
-oQiJ' " .. ~ .. , .s " :' .
gil """"0<.r<.'H . .1:1 jl t.;1

~
~ Aj()u.te.r des trames

Vous pouvezetendre la duree de votre animation. Avec le bouton de la souris (Windows) au la touche Ctrl (Mac), cllquez SUI une trame et cholsissez lnsersr une image dans le menu contextuel. Comme vous

_----------------Chllpitre9: Animer 191

avez malntenant davantage de trames entre votre premiere et votre derntere Image-de, l'anlmadon est plus longue, done plus lente. UtIHsez cette technique pour ralenth la cadence d'une animation.

Supprimer des frames

Supprlrnez des trames en en selecttonnant une ou plus leurs. Ensuite, cllquez dessusavec le bouton de la souris (Windows) ou en malatenan! enfane&: 1a touche Ctrl (Mac). Dans le menu eontextuel, caolslssez Sup primer les Images. 51. vousellacez des trames dans une animation mterpolee, l'anlrnatlon devtent plus courte, done plus rapide,

ConClertir des imafJes·clesen trames standards

51 une Image-cle ne vous ptait pas.changez-la en trame standard. II suInt de clJquer dessus avec le bouton de la souris (Windows) au en maintenant la touche Cttl enfoncee (Mac), et de cholslr Effacer !'Imagecleo Modifler alnsl i'etat d'une lrnage-cle altere ce qul s'y passe. Vous pouvez utlltser cette technique pour fuslonner deux Interpolations consecutlves, en transformant l'lrnage-ele centrale en une trame standard.

InClerser {'animation

Une animation peut etTe luea l'envers en selection.nant les images d'un ou plusieurs calques, puis en choistssant ModUlerjlmages/lnverser. Votre selection dolt commencer et 5e terminer par des lmages-cles,

Plus rapide ou plus lent ?

Une Iolsl'anlmatlon parametree, II est de bon ton d'en veriller Ia vttesse, Si l'une des animations mterpolees est trop rapide ou trop lente, VOllS pouvez falre gltsser tes lmages-cles pour rMulre ou augmenter la duree separant les deux Images-c1es. n sufflt slmplement de cllquer sur une !mage-clo! et de la deplacer a un autre point du scenario. Cela vous donne un enorme contrOie sur la cadence de votre animation.

192 8uatriemepartie: Flash-O-Hama complet _

~\)c . 5i vous.. avez des clifficultes pour deplacer une.lmage .. cle de fin, c.n:!ez-

en une nouvelle n'lmporte ou a drotte de l'lmage<li! en question, puis deplace:l: I'lmage-de recelcttranee,

La Figure 9.10 montre deux versions possibles d'un scenarlo, La version du bas a ete obtenue par deplacernent de la demiere image-c:l(: vers la drolte, ce qui aug:mente la duree de l'lnterpolation. Le resultat est une Interpolation plus lente.

R~urg 9.1'0:

Vous pouvei modifier la longueur d'una

i rrie rp 0 latien.

'" ~ IJI' ~ " ~ .,. "" "" " ,~
~.
II. TT .J IJ i IlTJIJ
.01°1' • ~ II '" l ~,.,=~
10 " ~o i"
n, '111 I ~ ~ I L'effet est plus remarquable avec une Interpolation de mouvement. Par exemple, si un symbole se depiace de gauche a droite de la scene et que vous raccourctsaez ]'lnterpol.atlon,le symbole semble traverser la sceae bien plus rapldement pUisqu'il ya moins d'tmages.

Modifier (esparametre.s de /'animation

nest toujours possible de modiller les parametres dennis dans le panneau Proprietes. Par exemple, vous pouvez ajouter au modUler Ie type de melange d'une Interpolation de Iornre, Ces parametres ont ete expltques un peu plus haut dans ce chapitre.

Pelure J'oitJnon

Pour VOllS alder a vlsualtser te deroulernent de votreanlmation, VOU! pouvez activer la tonctlon pelure d'olgnon, Elle permet de controler revolution d'une animation comme si vow; travalllrez sur un dessin ani me avec des transparents. La Figure 9.11 mantre I'effet obtenu avec I 'option Peiure d'oignoD et Contour de pelures d'olgnon, Vous voyez une sorte de superposition des Images lntermedlalres via un effet de transparence.

Pour a1ficher uneanlmation SODS forme de pelure d'olgnon, j] sufflt de cllquer sur Ie bouton du meme nom en bas du scenario et represents ci-contre.

_---------------Chap.itre 9: Animer 793

Figure 9.11 :

La fonction palure d'oigMn aide ~ epp~cier I'evolution de vone animation.

Figure 9.12 :

Lorsq u e VQ us

afflchel una pslure a'oignen, des repMes(ou marques) sent plac's sur ta

scenario.

Pour afllcher un contour de pelures d'oignon, cllquez sur Ie bouton du meme nom en bas du scenartoet represente cl-corrtre.

Lorsque vous afilchez une pelure d'olgnon, Flash place des marques en haut du scenario pOUT lndlquer la plage d'lrnages alftchees sous forme de pelure d'olgnon (volt la Flsure9.12). La plage alnsl deiinle se deplace en rneme temps que 1<1 tete de lecture. Vous pouvez ajuster manuallement le debut et la fin de In zone concernee par j'afllcnage sous forme de pelure d'olgnon, Il sulllt de falre glisser les petits points grts places aux extremftes de la plage,

Pour modifier les trarnes du scenario, quel que soit l'emplacement de la tete de lectu-re, cl!quez sur le bouton Modifier plusleurs Images. 511a tonetton pelure d'otgnon est active, vous pouvez alors modHier

194 Ouatrieme partie; Flash-Q-Rama camplet _

n'importe quelle Image tout en voyant les autres trames affichees par Ja pelure d'olgnon,

Cllquez sur le bouton Modlfler les reperes de pelures d'olgnon pour ajuster Je Ionctlonnement des reperes :

"'" Toujoul'S afficher Ies reperes : Afflche les reperes meme quand la fonctlon pelure d'olgnon est Inactive.

"'" AnereT Ja pelure d'oignon : Verroullle les reperes a leur position en cours, en evltant de les deplacer en meme temps que la tete de lecture.

"'" Oignon 2 : Applique la pelure d'olgnon aux deux trames qui se trouvent avant et apres la tete de lecture.

"'" OlgoOD 5 : Applique la pelure d'olgnon aux clnq trames qui se trouvent avant et apres la tete de lecture.

"'" OignoM sur tout: Applique la pelure d'olgnon sur toutes les

trarnes de votre scenario.

~IlC Les calques masques ou verrouilles ne peuvent jamais etre afflches sous forme de pelure d'otgnon. lis sont soustraits a to ute real!te de conception et ne peuvent sublr aucune alteration, Le Chapltre 6 expUque comment masquer et verroulller des calques.

•

.II

Tout deplacer sur Ia scene en une seule operation

i vous deplacez une animation complete sur la scene sans toucher aux graphlques, vous vous exposez a bien des desagrements, Pour conserver votre sante mentale, je vous invite a tout deplacer d'un seul coup.

Pour deplacer la totallte d'une animation, conformez-vous aux etapes sutvantes :

1. DevelTtJuiUez tous les calques quJ ceetlennent l'anlmation que vous destrez deplocer, et masquez Oll verroulllez taus tes calques que vow ne voalez pas deplacer.

2. 01quez sur Ie bouton Modifier plnsleurs images situe en bas du scenario.

S. Faltes IJUsser les reveres de pelure d'olgnoo au debut et a to fin des trames de votre animation.

_ __ ~ ~ Chapitre 9: Animer 195

Alternatlvernent, si vous destrez selecuonner toutes les trames, cllquez sur Ie bouton ModiIler les reperes de pelures d'olgrton et cholsissez l'opnon Olgnon sur tout.

4. hoisissez Ec:ution{fout seJ etionner .

5. Deplacez votre animation jusqu'A sa nouvelle pO!fltion ur 18 scene.

Organisation sous forme de sequences

Les animations deviennent tres vlte diffidles a gerer. Des dlzalnes de calques, d'objets, de symboles, ont prls place sur la scene. Bien souvent, l'orgamsatlon des calques ne sufflt pas.lI laut s'en remettre aux posstbllltes modulalres de vos animatIons, dont la sequence est un fervent artisan.

Quand est-il necessalre de sclnder votre animation en plusieurs sequences? 51 votre animation est relattvement simple, un sequence sulfit. Mais, si I'anlmation est plus complexe, vous souhaiterez la sctnder en message de chargement, en lntroductlon, en envlronnement principal, en sequence de lin et en remerciements.

Si votre scenario est tellement long qu'un seuJ eeran ne sulflt pas et qu'll faut sans cesse agtr sur les barres de defilement, vous trouverez loglque de placer vas elements sur des sequences tndlvlduelles, done plus petites, done aIflchees dans leur \ntegraLlte. Siles personnages de vas graphlques changenL A un moment precis de l'arnmation, peut-etre est-il plus subtll de les repartlr sur une nouvelle sequence. 51 vous envisagez de reutlllser une partie de votre animation dans d'autres animations, vous serez avis€: de la placer sur une sequence independante des autres.

Scinder uotre animation en sequenee«

Quand VOllS creez un nouveau IIchier Flash (en executant Flash pour Ja premiere fois au en cholslssant fichier/Nouveau), par defau! le flchler contlent une sequence vide. lnteU1gemment nornmee Sequence I. Toute nouvelle antmaucn commence avec une Sequence 1.

Pour ajouter une scene, cholslssez Insertion/Sequence. La sequence se nettoie en un elm d'reil et prend Ie sympathique nom de Sequence 2.

196 Iluatrieme partie; Flash-O-Rama complet _

Manipu(er cette set(uence

Pour garder line trace de vas sequences, ouvrez Ie panneau Sequence via Fenetre/Sequence (Figure 9.13). Ce panneau llste toutes les sequences de votre animation. Lorsque vous cholslssez Contr61e/ Tester l'animation, les sequences sont jouees dans l'ordre du panneau c'est-a-dtre de haut en bas. •

Figure 9.13 :

Le panneeu SAquence permet de

c rlier un e S Prlnclp 10, grande scene

composh de

plusieurs petites.

Void comment utlliser Ie panneau Sequence attn de contreler toutes vos sequences :

~ Pour modifier l'ordre des sequences, deplacez leur nom dans Ie panneau sequence.

~ Pour renommer une sequence, double-cllquez sur son nom dans Ie panneau Sequence, salsissez-en un nouveau et validez-Ie en appuyant sur Entree (au Return).

Pour supprlmer une sequence, selectionnez-la, puis c1iquez sur Ie bouton Supprimer Ia sequence. Une autre methode constste a ouvrtr la sequence et a choisir Insertlon/Supprtrner la sequence. Flash vous avertlt que la suppression d'une sequence est irrevocable.

Pour dupliquer une sequence. cllquez sur le bouton Dupliquer la sequence, en bas du panneau Sequence.

Pour a1llcher une sequence partlcullere, cliquez sur son nom dans Ie panneau Sequence. Vous pouvez egalement cholslr Aiflchage/A1ler a sulvl du nom de la sequence a attelndre.

Chapitre 10

I nteractivite

•

• • • • • • • • • • • • • • • • • • • • • • •

Dans ce chllpitre :

Se famillariser avec les actions.

Ajouter des images (trames),

Assigner des actions a des boutcns. Ajouter des actions aux clips d'animation. Travailler avec des actions.

Emploi de methodes pour controler le comportement d'objets.

• •••

£1 I'

intt'!ret reel de Flash apparait lorsque on met en ceuvre ses

possibilltes trueracuves. L'interoctivite signifie que I'internaute lnteragft avec Ie site Web qu'll vlslte. Bien entendu, cette interaction est prevue, car DOUS ne sommes pas encore entres dans !'ere des sites Web intelLigents. Par exemple, II laut entendre par tnteracttvtte Ie fait de declencner un son quand on clique sur un bouton.

Flash utilise des actions p ur specifier Ie fonctionnement de l'lnteractivite. 11 s'agit de courtes Instructions qui indlquent a Flash comment Teagir a une action d'un visJteur. En comblnant les actions, vous pouvez ereer des [eox d'instructlons complexes 11. la dtrnenslcn de vrais programrneurs. Les actions peuvent eontroler une antmanon sans pour autam y ajouter te concept d'lnteractlvite. Vous verrez que les actions de Flash sont d'une tres grande flexlbilite, et seule votre imagination est une limite a ce qu'iI est possible de Ialre,

Comprendre les actions

Les actions prennent place dans trois endroits : ~ Une trame du scenario (image).

198 Quatrieme partie: Flash-O-Rama complet _

Y' Un bouton.

Y' Un clip d'anlmatlorr,

Vous ne pouvez pas asslgner d'actlons aux graphlques.

Quand VDUS creez une action, vous devez prloritairement indiquer ce qui se passe lorsqu'elle est executee, C'est la partJe quand du processus. Par exernple, sl vous ajoutez une action a l'occurrenee d'un bouton, vous pouvez specllier que I'actlon s'executera quoad l'utllisateur relachera le bouton de sa souris apres avoir clique.

Ensulte, VDUS devez spec1fier l'actlon - ce qui se passe. L'action se trouve dans la Ilste des actions de Flash. De nombreuses a .tions disposent de parametres que vous pouvez preclser. Par exemple, pour qu'un bouton envoie l'ut1lisateur vers une autre page Web, vous utiliserez I'actlon Get URL et indlquerez fURL exacte (adresse de Ia page Web) comrne pararnetre,

A;outer des actions au» images (trames)

Vous aJoutez une action .!I une trame pour contrfiler ce qui se passe quand l'animatlon attelnt celle-cl, Les actions des trames (ou Images dans Ie contexte d'appreclatlon du scenario) sont souvent utlllsees pour lire un clip d'animation ou une animation en boucle. Alnsl, une partie spedElque de l'anlmatlon est repetee. Une autre utilisation des actions d'tmage permet d'arreter la lecture de l'anLmation ou de La Her automatlquement a une autre URL (comme l'adresse d'une page Web). Vous pouvez egaJement utiliser des actions d'image pour des programmations plus complexes.

Void comment ajouter une action simple ~ line Image (trame) :

I. Creez un nouveau calque consaere aux actions.

Le Chapltre 6 expllque comment aJouter un nouveau calque.

2. Clique-.: sur une image-cle.

Sl l'lrnage II empioyer n'est pas une Image-cle, dlquez du bouton droit (WIndows) ou fanes un Ctrt-cltc (Mac) surcette image, puis actionnez lnsertion/lmage-cle,

3. Acttoanez Fenetre/ActioDS pour oovrir Ie panneau Actions s'U n'est pas deja ouvert (FIgure 10.1).

_-------------- Chapitre 10 : lnteraetlvita 199

Figura 10.1 :

La fen~tre Actions est ('interface de Flash qui permst d'assigner des actions aux Images [tramasl du scenario.

,.. Y,il:I~

I:!J e...""",-

~I~

• F_IillIo' .... ~

4. Cliquez sur une categorie et une sous-eategorte dans la partie gauche du panneau Attions et double-clrquez sur une action ou mUes gUsser e tie actlon jusqo'au panneau de droite.

Vous pouvez egalement cltquer sur Ie signe plus, choislr une categorle, puis une action dans Ie sous-menu,

5. SI I'actien necessite des parami!tres,tapez l'lnformation reqnlse en. baut du panneau.

Nous verrons Ies parametres attaches aux actions speclliques un peu plus loin dans ce chapitre. Vous aJouterez d'autres actions en repetant les etapes 4 et 5.

6. Si vails 80uhattez fenner Ie paoneau Actioo.s, dl.quez du bouton droit (Windows) ou fanes un CtrI+clic (Mac) dans Ia barre de titre du panneau et actlonaez FeJ'DleT Ie panneau.

Un exemple tres simple d'utiJisation d'une action d'lmage consiste a placer une action Stop au debut de l'anJmatJon, comme Ie montre loll Figure 10.1. VOU!! pouvez alors deilntr un bouton qui lance La lecture de l'animaUon. Ains], Ie vislleur est libre de regarder ou non une eventuelle sequence d'lntroductlon au contenu de votre site. Dans cet exemple. I'animation se charge, mats la premiere chose qu'elle rencontre est un evenement de type stop. Done rien ne se passe tant que quelqu'un n'a pas trouve comment lancer In lecture de l'animatlon, notamment en cllquant un bouton que VOllS aurez programme pour cette tache. BI.en silT. toutes les pages de votre site n'ont pas hesotn de

200 o.uatT.iame partie: Hash-Il-Bama complet _

se com porter alns]. C'est meme une grave entrave Ii. J'aIlichage spontane ducontenu d'un site.

Void comment ajouter uneaction Stop Ii. votre animation:

1. Creez votre animation.

2.. Chol8lssezContrUle!fester I'anlroatloll polltapprtder son de.rollJement.

3. Creez en caJque reserve 8..ux actions. Nommez·le logJquement Actions.

Le Chapitre 6 expllque comment creer et nommer des calques.

4. Oiquez Silt I'lmage-cle devllDt contenlr l'aetlon,

S. Choislssez Feni!b'e/ Actions. pour 8.cceder·1I Ill. fenetre Actions.

6. CUquez!lUl' Actions, puis sur ConlriHe de I'anlmatlon.et double-cllquez SUI" Stop dans 1a liste d'aetloas,

Notez que Ie haut du panneau lndlque Pas de parametres.

7. Pour fermer Ie pauneau AcHans, ellquez du bouton droit (WIndows) au fanes uo Ctrl+d1c(Mac) daDs 18 barre de titre du panaeau Actions etacttoanez Fermer Ie panneau.

8. Actloonez de nouveau Contr6le!fester I'animation.

Cette lots, I'anlmatlon ne se deroule pas, en raison de t'actlon Stop.

VOIlS pouvez assocter plusleurs actions aux trames. Plus loin dans ce chapltre, nous lis tons les prlncipales actions et 18 manlere de les uUUser.

Pour tester une action d'lmage sans quitter Ie scenarto principal. ehotsissez Contr51e/Actlver les actions d'lmage simples,

Aiouter des actions aux boutons

La manlere la plus commune d'alouter de l'tnteractivite a. une page ou a un site est de creer un bouton. L·u.tlUsateur clique dessus et quelque chose s'execute (ou arrete son execution). Generruement, vous ajoutez un texte sur ou Ii. cate du bouton pour que le vislteur sache ce Qui va sa passer s'll clique dessus.

SI vous avez deJAcom;u des Sites Web, volre de simples pages personnelles, vous connalssez Ie concept de liens hype.rtextes.

_______________ Chapitre 10 : I.ntera.ctivite 201

51 HTML ne vous est pas lnconnu -Ie langage de dsscrlptton des pages Web -, VOllS aavez que vous potlVezcreer ce type de lien en utlllsant [a bruise (HREF>. Cette ballse lie un texte ou une Image Ii. une autre 00. Quand un vlslteur cllque sur Ie texte ou l'tmage, it se retrouve teleporte vers ladite URL. Vous pouvez crser des boutons Plash qui poursulvent Ie meme objectll, mals avec plus de subtHlte.

Les boutons peuvent laire bIen plus! lls peuvent Iancer ou arreter une animation, sauter dlreetement a une autre partie de I 'animation , arreter les sons, et bien d'autres chases encore.

L'ajout d'une action Ii un bouton est tr1!s simple Ii. realtser. La partie la plus dHticile est de decider quelle action dolt etre mise en (Euvre. Plus loin dans ee cnapltre, nous detaillerons quelques actions slgniftcatlves et Ill. maniere de les utll!ser. 010yez la fin du Chapttre 8 pour un exemple sur l'uttllsatlcn d'un bouton quJ renvole A dHferentes pages Web.)

Voiel comment creer un bouton auquel une actiones! ass,lgnee;

I. Creez Ie bouton et places-en une occurrence .sur la ·sequence.

Reportez-vous au Chapllre 8 sl vous ne savez plus comment creer des boutons.

2. L'ceeurrence etlmt s£iectioonee, ·cholstssez fen!lre/Actions pour ouvrtr in fenetre ACUODS representee Figure 10.2.

3. CUquez sur nne eat~orl.e et une .80us-ea:tegorl.e d8.llllia partie gauche du panneau Actions et double-cllquezsur nae actten figuranl dam la I1ste.

4. SI vous souhaltee modifier l'etat par defaul On (Release). dlquez dessus pour Ie selectlonner. Dansla zone Parametres, cbolsiuez nne autre option.

Reportez-vnus au Tableau 10.1 pour plus d'lnformatlons sur les Instructions que vous pouvez deflnlr quand une action est devalue Ii un bouton.

5. SI l'actsen requtert des parametres, salsI.ssez I'lnformation dans la zone Parametres en haul du panneau Actions.

Les actions les plus communes et leurs parametres sont .listes dans la section "UUlIser des actions" de ce chapltre. VOtiS pouvez ajouter d'autres actions en repetant les €tapes 4 et 5.

6. ClJquez sur la flkhe de reduction do panneau Actions.