MASTERIPMEAD20072009

CoursFlash

Chapitre3:les Symboles

Rappel :lesfichiersflaetswfsontdanslefichier 3_symboles.zip.

SOMMAIRE
1 OBJ ECTIFSDUCHAPITRE ............................................................................................................... 1

2 INTRODUCTION ................................................................................................................................. 2

3 SYMBOLEGRAPHIQUE .................................................................................................................... 4
3.1 EXERCICE : DERAPAGEINCONTROLE ................................................................................................ 5
3.1.1 Complments............................................................................................................................. 6
4 SYMBOLECLIP................................................................................................................................... 8
4.1 EXERCICE : VOLDOISEAUXDANSLESNUAGES ................................................................................ 8
4.2 EXERCICEOPTIONNEL :UNMINISYSTEMESOLAIRE ......................................................................... 10
5 SYMBOLEBOUTON ......................................................................................................................... 12
5.1 CREERUNBOUTON ........................................................................................................................ 12
5.2 EXERCICE : UNEBOUSSOLE ............................................................................................................ 15

1 Objectifsduchapitre
Alafindecechapitre,voussaurez:
cequesontlessymboles,etplusparticulirementlessymbolesgraphiques,boutonset
clips
commentcrerunsymbole
commenttransformerundessinensymbole,
crerdessymbolescontenantdautressymboles,
animerdessymbolespourlesfairesedplacer,sedformer,
 MASTERIPMEAD20072009 J.C.Tarby

2 Introduction
Dans ce chapitre, nous allons aborder la notion de symboles Flash qui va vous ouvrir une
nouvelle dimension dans lanimation graphique. Plus tard, quand nous aborderons la
programmation ActionScript, nous associerons les symboles au code ActionScript et vous
verrezdslorsquelaseulelimitelapuissancedeFlashestvotreimagination

Lessymbolessontdeslmentsrutilisablesd'undocument.Ilpeuts'agirdegraphiques,de
boutons,declips,defichierssonsoudepolices.Lorsquevouscrezunsymbole,cedernier
est enregistr dans la bibliothque du document. Lorsque vous placez un symbole sur la
scne, vous crez une occurrence de ce symbole. Chaque fichier FLA contient sa propre
bibliothque, mais vous pouvez trs facilement ouvrir deux FLA et faire des copiercoller
entrelesbibliothques.Deplus,Flashproposedesbibliothquesdeboutons(menuFentre
>Bibliothquescommunes>Boutons).

Les symboles permettent de rduire la taille des fichiers car, quel que soit le nombre
d'occurrencesque vouscrez,Flash n'enregistre lesymbolequ'uneseule foisdans le fichier
source.fla.

Conseil:utilisezdessymboles,animsounon,pourchaquelmentquiapparatplusd'une
foisdansundocument.Vouspourrezainsisoit modifier lespropritsdesoccurrences sans
affecterlesymbolequiapermisdelescrer,soitmodifierlesymboledemaniremodifier
touteslesoccurrencesenuneseuleopration.

Chaquesymbolepossdesonproprescnarioetsaproprescne.Chaquefoisquevouscrez
un symbole, vous devez en dterminer le type en fonction de la faon dont vous souhaitez
l'utiliserdansl'animation.Ilexistepourcelatroistypesdesymboles(voircidessous).Jevous
invitelirecesdfinitions,etsurtoutyrevenirquandvousaurezlucechapitreellesvous
paratrontcertainementpluscomprhensibles(vouspouvezgalementvousreporterlaide
deFlash).
Utilisez des symboles graphiques pour les images statiques et pour crer des lments
rutilisables lis au scnario de l'animation principale. Les symboles graphiques
fonctionnent de manire synchronise avec le scnario de l'animation. Les sons et les
lments de contrle interactifs placs dans le scnario d'un symbole graphique ne
fonctionnentpasdanslasquenceprincipale.

Utilisez des symboles de bouton pour crer dans l'animation des boutons interactifs qui
ragissent aux clics de la souris, un survol ou d'autres actions. Vous dfinissez les
graphiques associs aux diffrents tats de bouton, puis affectez des actions une
occurrencedebouton.Vouspouvezaussiaffecterdessonsauxboutons.

Utilisez des symboles de clip pour crer des lments rutilisables d'une animation. Les
clips possdent leur propre scnario, qui est lu indpendamment du scnario de
l'animation principale imaginez de petites animations l'intrieur d'une animation
principale,pouvantcontenirdeslmentsdecontrle interactifs,des sons, voired'autres
occurrences de clip. Vous pouvez galement placer des occurrences de clip dans le
scnariod'unsymboledeboutonpourcrerdesboutonsanims.

Flash:lesSymboles Page2sur15
 MASTERIPMEAD20072009 J.C.Tarby

Limbricationdesymbolesestinfinie(parexempleunclipdansunclipdansunboutondans
unclip).Avousdesavoircequevousvoulezcrer

Danscettepartiede cours,nousnaborderonsque lessymbolesgraphiques,clipetboutons.

Lessonsserontvusplustard,etlespolicesneserontpasabordes.Demme,nousverronsla
notiondeBibliothque,maisnousneverronspaslesbibliothquesetlessymbolespartags.
Cesdernierssontdesfonctionnalitsaugmentantencorepluslarutilisabilitdesanimations,
maisilssontplusduressortdesFlasheursquedesIPM.

Flash:lesSymboles Page3sur15
 MASTERIPMEAD20072009 J.C.Tarby

3 Symbolegraphique
Un symbole graphique est un symbole qui est cens ne contenir que du dessin. Si vous
regardezlexemple Bbflash vudanslapartieprcdente,vouspourrezvrifierlestypes
dessymbolesutiliss.Pourvrifiercelafacilement:
ouvrezlefichier Bbflash.fla
puisouvrezLAbibliothquedelanimation BbflashparleraccourciCTRL+Loula
touche F11 ou par le menu Fentre>Bibliothque (et non pas
Fentre>Bibliothques communes qui contient des lments directement
utilisables dans Flash, vous de les dcouvrir par vousmmes). Vous obtenez alors le
panneau cidessous (cf. Figure 1) que vous pouvez placer avec les panneaux de droite
pouroptimiserlaplace.
N.B: Chaque animation a sa propre bibliothque qui regroupe tous les symboles
(graphiques,clips,boutons,images,sons)utilissdanslanimation.Cettebibliothque
estinclusedanslefichierfla.
La bibliothque affiche le nom du fichier FLA associ (ceci est intressant car vous
pouvezouvrirplusieursbibliothquesenmmetempssivousavezouvertsplusieursFLA
par exemple, et vous pouvez par simple drag&drop rutiliser des symboles dune
bibliothque dans une autre1). La bibliothque affiche galement le nom et le type de
chaque symbole (notez les icnes associes aux types), ainsi que dautres informations
quinenousintressentpasici.Quandunsymboleestslectionn,vousvoyezsonaperu
en haut de la bibliothque (dessin rduit pour un symbole graphique, le son sous forme
dondespourunson,).Silesymboleaplusduneimagedanssonscnario,vousaurez
enplusun boutonplayetunboutonstopenhautdroitedanslaperu.

Figure1:labibliothquedeBbflash
Nousallonsmaintenantcrerunsymbolegraphiqueetvoircommentlutiliser.

1
Sivous faitesuncopiercollerdunlment(parexempleunboutonquicontient3clips)depuislascnede
lanimationAsurlascnedelanimationB,FlashcopieautomatiquementdanslabibliothquedeBlesymbole
boutonetles3symbolesclipsassocis.

Flash:lesSymboles Page4sur15
 MASTERIPMEAD20072009 J.C.Tarby

3.1 Exercice:Drapageincontrl
But :utiliserdesinterpolationsdemouvement(etnonplusdesinterpolationsdeforme)pour
fairedraperunevoiture,puiscrerunaccidententre3voitures.Lesrsultatsatteindresont
montrsdans drapagefinal.swf ,puisdans drapagefinal2.swf .

Avantdevoircommentfairecetexercice,commenonspourunefoisparvoircequilnefaut
pasfaire!
Ouvrezlefichier drapagemauvais.flaetjouezlanimation.Inutilededirequelersultat
nestpasceluiescompt.Maispourquoicela?Rappelezvousquelesinterpolationsdeforme
(reprsentespar les flches vertesdans le scnario)transformentdes formesendautres
formes(unrondencarrparexemple).Or,pourlemoment,lavoiturenestquunensemble
de formes vous pouvez le vrifier facilement car en cliquant sur lauto, elle se grise
lintrieur.Vouspouvezparconsquentdformerlavoiture(commemontrsurlaFigure2)
en tirantsursesbordsouendplaantdesmorceaux.Sictaitunsymbole,unclicsurla
voiture afficherait un rectangle autour de la voiture. Dans le contreexemple drapage
mauvais.fla,Flash clatedonclavoiturepourpasserdelaforme voiturehorizontale
laforme voitureverticale.Ilnesaitpasquecesdeuxformessontlemmedessinpour
vous. La 1re interpolation (celle lhorizontale) fonctionne quant elle sans problme
puisquelesdeuxformessontlesmmes.

Figure2:lavoitureinitialeetdforme

Pour raliser drapage final , il faut commencer par transformer le dessin de lauto en
symbole graphique sur lequel nous pourrons ensuite appliquer des interpolations de
mouvement quisecontenterontdedplacerlavoituresanslafaire exploser.
N.B.: les interpolations de mouvement permettent de dplacer des symboles, en les
faisantventuellementsedformer(agrandissement/rduction),tourner(rotation),etc.,
maislesoccurrencesaudbutetlafindelinterpolationdoiventimprativementtre
issuesdummesymbole.

Pourcrerlinterpolationdemouvementdelavoiture:
ouvrez drapage.fla
slectionnezTOUTE la voitureetconvertissezlaen symbolegraphique(etnonpasclip
ou bouton) avec la touche F8 ou le menu Modification>Convertir en
symbole.Nommezla autoparexemple
ralisez une interpolation de mouvement sur 3 images cls. La 1re montre la voiture
droite,la2nde montrelavoitureaucentre,etla3me montrelavoitureenbasgaucheetse
dirigeantverslebas(outildedessinTransformationlibreutiliserpourlarotation).Pour

Flash:lesSymboles Page5sur15
 MASTERIPMEAD20072009 J.C.Tarby

linterpolationentrelesimagescls2et3,jaichoisiunerotationverslagauchedansles
proprits.

Maintenant que vous avez compris le principe, vous comprendrez facilement comment
drapagefinal2atralis.Ilsuffitdecrerdescalquessupplmentairesetdecopierle
symbole autosurchaquecalque,puisdefairelesinterpolationsdemouvementassocies.

3.1.1 Complments

3.1.1.1 Modedelecturedessymbolesgraphiques
Si vousregardez lespropritsduneoccurrence desymbolegraphique,vous verrezquelle
peut se jouer de diffrentes faons: une seule fois, en boucle, une seule image, et on peut
galement choisir la premire image. Ceci vous permet par exemple davoir plusieurs
occurrencessejouantdiffremment:unequisejoueenboucleencommenantsonimage5,
uneautrequisejoueuneseulefois,etc.

3.1.1.2 Acclration/Dclrationperfectionnes
Concernant les interpolations de mouvement, on peut jouer galement sur les
acclrations/dclrationscommevuprcdemmentaveclexercicedubillard,maisonpeut
allerbienaudel.Regardezparexemplelanimation dplacementbizarre.flaetjouezla.
Curieux, non?Pourvoir commentceci est faitavecune seule interpolationde mouvement,
slectionnezuneimagedelinterpolation(limage20parexemple),regardezlespropritset
cliquez sur le bouton modifier cte de la zone Acclration. Vous
obtiendrez une fentre qui vous permettra de faire des animations plus pousses. Voici la
copiecrandesdeuxparamtresquejaimodifisici.Pourmonanimation,jaidemandune
rotation vers la gauche dans linterpolation de mouvement, puis jai modifi lacclration
commecidessous.

Flash:lesSymboles Page6sur15
 MASTERIPMEAD20072009 J.C.Tarby

Figure3:Modificationdespositions

Figure4:Modificationdelarotation

Flash:lesSymboles Page7sur15
 MASTERIPMEAD20072009 J.C.Tarby

4 Symboleclip
Un symbole clip (souvent appel clip tout court,ou encore movie clip) est une sorte de
sousanimationFlash.Sonscnariosejoueindpendammentduscnarioprincipal,maisavec
lammecadencedelecture.

Les clips sont utiliss pour montrer des sousanimations qui se rptent (par exemple des
nuagesquipassentdansleciel,ouunpersonnagequipdale2 commesurlaFigure5),oupour
piloterdesobjetsparActionScript(cequenousverronsplustard).

Figure5:Exempledeclipdansunebibliothque

4.1 Exercice:Voldoiseauxdanslesnuages
Nous allons utiliser les clips pour donner, terme, limpression de voir deux oiseaux voler
dans les nuages. Le rsultat final est oiseauX final. Nous allons commencer par raliser
oiseau final (sans X) que je vous invite regarder en version SWF avant de dmarrer.
Vousconstaterezqueloiseausemblevenirversvousenbattantdesailes.

Etapessuivre:
ouvrez oiseau.fla et regardez le contenu de la bibliothque, et le contenu du clip
oiseau(doublecliquezsurlicnegauchedunomduclip).Cf.Figure6

2
NecherchezpascefichierFLA,ilnevousapastdonn.

Flash:lesSymboles Page8sur15
 MASTERIPMEAD20072009 J.C.Tarby

Figure6:Leclipoiseauetsonscnario

revenezsur la scneprincipaleet placezceclip en hautgauchede lascneprincipale

(taitceutiledeleprciser?).Puiscrezuneinterpolationdemouvementavecuneautre
imageclcontenantcemmeclipenbasdroitedelascne.Pourcrerla2nd occurrence,
soitvousreprenezleclipdepuislabibliothque,soitvousfaitesuncopiercollerpartir
dela1re occurrence.
cliquez sur le clip de la 1re imagecl et demandez le menu
Modification>Transformer>Redimensionner et faire pivoter, puis
choisissez10%pourlchelle
danslespropritsdecemmeclip,prenezCouleur>Alphaetmettezlavaleur0%
loiseaudevienttransparent(opacit=0%).
pourvoirlersultatrel,vousdevezdemandertesterlanimation(CTRL+ENTREE)car
sinonvousneverrezqueledplacementdeloiseauetpassesbattementsdaile(cestune
limitedeFlash).

Aprsent,vouspouvezimaginercommentfairelevoldeplusieursoiseauxdansdesnuages.
Consultez le fichier oiseauX final.fla vous verrez que jai utilis des symboles
graphiques,desclips,desclipsdansdesclips,etc.Toutceciestbiensrperfectible,maiscet
exempleapourbutdevousmontrerquelonpeuttoutcombinerlinfini !

Flash:lesSymboles Page9sur15
 MASTERIPMEAD20072009 J.C.Tarby

Figure7:Exempledeclips

4.2 Exerciceoptionnel:unminisystmesolaire
Si vous voulez tester votre niveau dassimilation des concepts associs aux symboles
graphiquesetclips,jevousproposeunexerciceoptionneldontjenevousdonnequelnonc
etlasolutionenfichierFLA.

But :raliseruneminisystmesolairetelqueceluimontrdans systmesolairefinal.swf .

Pensez que la Terre et la Lune tournent sur ellesmmes, que la Lune tourne autour de la
TerreetlaTerreaveclaLuneautourdusoleil.Celasignifiequevousdevezfaireensorteque
lesplantespassenttanttdevanttanttderrire.Pourmontrerlesrotationsdesplantes,jai
utilisunnuagepourlaTerreetuncratrepour laLune.

Figure8:Leminisystmesolaire

Remarques:
pour le moment, faites des interpolations simples (c'estdire linaires, des orbites en
losange par exemple), vous pourrez amliorer les orbites des plantes dans quelques
tempsquandnousauronsvulesguidesdemouvement.
pour parfaire le rsultat, il est important davoir des animations de longueurs
proportionnellesafindviterdesdcalages.Parexemple,sileclipTerredure21images,

Flash:lesSymboles Page10sur15
 MASTERIPMEAD20072009 J.C.Tarby

chaquefoisqueleclipTerreestutilisailleurs,il devraapparatrependant21imagespour
tresrquelesraccordsserontparfaits.

Lasolutionestdans systmesolairefinal.fla.Vousavezgalementdeuxautresversion :
systmesolairefinalplusfluide.flaet systmesolairefinalplusfluide(tordu).fla.Le
premieratunpeuplustravaill(vitessedelecture,nombredimages,interpolationpourle
soleil,agrandissementdesplantes,),etlesecondreprendlepremierenlintgrantdansun
clip qui luimme a une interpolation de mouvement. Quand je vous disais quon peut
imbriquerlinfini,vouscomprenezmieuxmaintenant?

Notequipeutvousrendrebeaucoupdeservices:pourrcupreruneanimation etla
transporter ailleurs (par exemple dans un clip), slectionnez les images qui vous
intressentsurlescnario(parexempleslectionnertouteslesimagesentrelimage10et
limage 25, et ce sur plusieurs calques en mme temps!), puis clic droit sur cette
slection du scnario, choisir copier les images, puis dplacezvous dans le
scnariocible(parexempleceluidunclipduneautreanimation),cliquezsuruneimage,
puisclicdroitetchoisissez collerlesimages.Celaaurapoureffetderecrer
le scnario, y compris les calques associs, et dimporter dans la bibliothque tous les
objetsassocisauximagesquevousavezcopiercoller.Puissant,non ?

Flash:lesSymboles Page11sur15
 MASTERIPMEAD20072009 J.C.Tarby

5 Symbolebouton
Lessymbolesbouton ,appelspluscourammentboutons,sontgnralementutilissavec
ducodeActionScriptpuisquilsontpourobjectifdedclencherdesactions.Nousverronsla
programmationprochainement, mais nouspouvonsdj voir icicommentcrerdes boutons
surleplangraphique.

Avant de passer aux exercices, regardez exemples de boutons final.swf il vous montre
quelques exemples de boutons. Ceux du haut sont issus de la bibliothque commune des
boutonslivrsavecFlash3 (menuFentre>Bibliothquescommunes>Boutons).
Ceuxdubasonttfaitsentirement.Notezquelampoulepeuttreallumeencliquantsur
le rond vert, sur la croix bleue ou sur du vide! Pourquoi ? la solution est dans la
constitutiondesboutonscommenousallonslevoirmaintenant.
Note: je vous ai mis un exemple dutilisation du slider (ancien bouton Flash) qui
sappelle utilisationduslider.fla.Commeindiqu,ilcontientducodeActionScript
que je vous invite ignorer pour le moment. Revenez sur cet exemple quand vous
aurezsuffisammentavancdanslaprogrammationActionScript.

Figure9:desexemplesdeboutons

5.1 Crerunbouton
La structure des symboles bouton est diffrente des symboles graphiques et clips, cest
pourquoicettepartieexpliquecommentcrerunbouton.

Avanttoutechose,ilfautsavoirquunboutona4tats:(a) positionhaut,c'estdirequand
leboutonaurepos,(b)positiondessusquandlasourisestdessus,(c)positionabaissquand
onenfonceleboutonaveclasouris,et(d)unezonecliquable.

Nous allons faire un bouton qui sera bleu au repos (position haut), vert quand la souris est
dessus,etrougequandoncliquesurlebouton.Laversionfinaleestdans unboutonfinal.
Pourralisercebouton,vousdevez:
demandercrerunnouveausymboleaveclemenuInsertion>Nouveausymbole
ou leraccourciclavierCTRL+F8.
donnerunnomcefuturbouton,etchoisissezletypebouton.

3
CertainssontissusdeversionsanciennesdeFlash,etnexistentplusdanslesversionsactuelles,voiremmene
seprogrammentplusdelammemanire

Flash:lesSymboles Page12sur15
 MASTERIPMEAD20072009 J.C.Tarby

Aprsavoirvalid,vousdevezobtenirunscnarioparticuliertelqueceluiprsentsurla
Figure 10. Ce scnario est particulier puisquil ne comporte que quatre images, une par
tatprcdemmentnonc.Danschacunedecesimages,vouspouvezplacerdesdessins,
des symboles graphiques, des symboles clips, et ventuellement des sons dans les 3
premiresimages.

Figure10:lescnariodunnouveaubouton
Commencezpardessinerunrectanglebleuaucentredelascne(dansmonexemple,jai
demandunrectangleavecdesbordsarrondispourfaireplusjoli).Vouspouvezutiliserla
fonction Aligner (CTRL+K) de Flash qui est trs puissante et qui permet daligner des
objetsparrapportlascne,oudesobjetsentreeux.
AppuyezensuitesurF6pourinsreruneimageclpourltat dessus.Ceciapoureffet
dedupliquerlimagedubouton ilvoussuffitalorsdechangerlacouleurderemplissage
debleuenvert.
Procdezdemmepourltat abaiss,etremplacezlevertpardurouge.
Nefaitesrienpourltat cliquable(lacelluledoitrestervide,mmepasuneimagecl
vide(cf.Figure10)
Revenezlascneprincipaleetdposezceboutonsurlascnepardrag&dropdepuisla
bibliothque.
VrifiezquelesboutonssontactivsdirectementdansFlash,c'estdirequedanslemenu
Contrle la commande activer les boutons simples doit tre coche.
Quandcettecommandenestpascoche,vouspouvezslectionnerlesboutonscommede
simplessymboles danslecascontraire,lesboutonsragissentcommedesboutons.
Testez le bouton soit directement dans Flash (puisque la commande est maintenant
active),soitenmodeShockwave(CTRL+ENTREE).

Nous pouvons maintenant amliorer le ralisme de ce bouton en ajoutant simplement une

forme simulant lombre du bouton, et en dcalant la position du bouton quand on clique
dessus (cf. le fichier un boutonombr final ). Remarquez cetteoccasion loptimisation
pour lombre tant donn quelle esttoujours au mme endroit, une seule image cl suffit
pourlecalque(vousyavezpensavantmoi ? J).

Voyonsmaintenantquoicorrespondltat cliquable.Lacolonnecorrespondantedfinit
lazonedanslaquellelasourisdoittreplacequeleboutonragisse.Sicettecolonnenest
pasremplie,Flash vaautomatiquementtrouver laplusgrandezone,cestdire la zonequi
recouvrelafoislestats haut, dessuset abaiss.Parcontre,sivousdessinezune
zonedanscettecolonne,seulecettezonepermettradedclencherlebouton.Cettezonepeut
donctresurledessindubouton,oucompltementctdudessindubouton.Cestceque
jaifaitaveclexempledelampoule.Leboutonlampecontientunezonecliquablequiest
gauche du culot de lampoule. Lorsque jai plac le bouton lampe sur la scne, jai
simplement dessin sur la scne un rond vert ou une croix bleue lemplacement de cette
zonecliquable(cesdessins neserventrienpour lebouton, ils neserventqu lutilisateur
pour reprer la zone cliquer). De cette manire, il est possible davoir des boutons qui
ragissentdefaonidentique,maisavecdesdclencheursvisuelsdiffrents.Astucieux,non?

Flash:lesSymboles Page13sur15
 MASTERIPMEAD20072009 J.C.Tarby

Et que pensezvous de boutons pour lesquels certains tats seraient vides? Rflchissez
yJetfaitesdesessaisJ

Flash:lesSymboles Page14sur15
 MASTERIPMEAD20072009 J.C.Tarby

5.2 Exercice:uneboussole
But : crer un bouton correspondant une boussole (cf. Figure 11). Au repos, laiguille est
orienteaunord(bleuenhaut).Quandlasourisestsurlecentredelaiguille(etuniquement
surcepetitrondnoir!), laiguilletourneenpermanence(sans marquerdetempsdarrt!4).
Quandoncliquesurlecentredelaiguille,laiguillesefigeausud(bleuenbas).

Figure11:laboussoleaurepos
La solution est dans boussole finale.fla et une autre version dans boussole finale
amliore.fla

4
EncoreunepetiteastucepourFlashAvezvoustrouvoucompriscommentjaiprocdpoursupprimerle
tempsdarrtquevousavezcertainementdrencontr ?UnesolutionavecdelActionScriptseraitplusfacile,
maiscesttropttJ

Flash:lesSymboles Page15sur15