Home

Création d`animations interactives en Flash

1. TextFormat new TextFormat M thodes Propri t s XML new XML M thodes Propri t s Ev nements XMLSocket new XMLSocket M thodes Ev nements Key M thodes Constantes Ecouteurs Math ooo ES M thodes Constantes Mouse M thodes Ecouteurs Selection RE M thodes Ecouteurs Stage E M thodes Ecouteurs Extrait de Flash MX Animation interactivit ActionScript Guylaine Monnier Dunod Paris 2002 Monique Colinet CeFIS FUNDP Mai 2004 Page 58 Cr ation d animations interactives en Flash La hi rarchie dans les clips Les composants Outre les objets pr c dents FlashMX a encore compl t sa panoplie d objets pr d finis Il s agit d l ments d interface utilisateur Ce sont des clips complexes auxquels sont associ s des param tres et des m thodes Ces composants d interface sont au nombre de 7 Zone de liste s lection unique ou multiple Liste d roulante s lection unique Ils permettent une interactivit tr s compl te sans trop de travail de conception Ces composants peuvent galement tre accompagn s de scripts Ceux ci porteront sur les propri t s m me du composant couleur police de caract res alignement ou sur des actions en relation avec l animation principale Envisageons quelques exemples Exemple 1 Utilisation du composant ScrollBar Ce composant va permettre de placer une quantit importante de texte dans une zone de texte dynamique pr d
2. SN ST z Z o A Y 5 Le ns D partement __ Environnement Education et Technologie e Animation e Interactivit CR ATION D ANIMATIONS INTERACTIVES EN FLASH Notes provisoires Monique Colinet 5 85 Mai 2004 a j Centre pour la formation l Informatique dans le Secondaire Ces notes sont destin es aux personnes suivant la formation Cr ation d animations interactives avec Flash Elles sont provisoires et incompl tes Elles seront remani es en fonction de vos remarques corrections commentaires Vous tes invit s communiquer toutes vos observations monique colinet fundp ac be Cr ation d animations interactives en Flash Introduction Introduction Qu est ce que Flash Que peut on faire avec Flash Flash est pr sent comme tant un outil de conception d animations vectorielles pour le Web Il g n re des fichiers de petite taille ce qui repr sente un avantage important au vu des vitesses de connexion encore relativement lentes qu utilisent encore beaucoup d internautes Il permet de dynamiser un site Web pour le rendre plus attrayant Si son utilisation est souvent confin e Internet elle ne s y limite pas Les possibilit s de pr sentations sont infinies cr ation de boutons flash int grables dans une page HTML r alisation de dessins anim s De plus avec ses fonctions avanc es ce logiciel permet galement d int grer la d
3. action Monique Colinet CeFIS FUNDP Mai 2004 Page 34 Cr ation d animations interactives en Flash ActionScript Les propri t s Elles sont des attributs qui d finissent un objet de type clip Leur nom commence toujours par un underscore _ Exemple _totalFrames renvoie le nombre total d Images contenues dans le clip sp cifi Les variables Ce sont des identifiants qui contiennent des valeurs de n importe quel type de donn es Elles peuvent tre cr es modifi es ou mises jour On peut r cup rer les valeurs qu elles contiennent et les utiliser dans les scripts Exemples x 5 ou nom flash Les op rateurs Ce sont des instructions d di es la gestion des conditions utilis es le plus souvent pour comparer des variables Exemple Si a b ou c gt 200 o a b et c sont des variables Toutes ces instructions sont d taill es dans l aide du programme ou m me dans la fen tre R f rence qui peut tre activ e tout moment dans le logiciel Les v nements Toutes les actions fonctions sont d crites dans les scripts qui ne sont en fait que des blocs de texte Ces scripts doivent encore tre activ s pour pouvoir modifier la lecture de l animation Toutes les instructions plac es dans ces scripts doivent tre li es des v nements afin d tre ex cut es un moment donn lors de la lecture de l animation Il faut donc associer ces scripts des con
4. de mani re concise ou de mani re d taill e Il suffit pour cela de r gler les param tres d affichage de ce panneau Attention cependant toutes les informations ne seront pas donn es dans cet explorateur d animations Des renseignements tels que les propri t s de chacun des objets se trouvant sur chacune des images ne seront pas affich s Chacun pourra trouver dans cet explorateur les renseignements qui lui conviennent pour visualiser ses animations Il est possible d avoir acc s directement l information que l on recherche en vue d une modification par l interm diaire de cet explorateur d animations Un double clic sur l objet le fait appara tre sur la sc ne Il est donc aussi possible de travailler sur le sc nario la sc ne et sur une s quence par ce biais Ce moyen permet d avoir aussi un plan global de son travail Cet explorateur peut se r v ler tre un outil de r flexion de correction de synth se Voici d ailleurs un exemple Monique Colinet CeFIS FUNDP Mai 2004 Page 27 Cr ation d animations interactives en Flash _ Explorateur d animations Chercher CO OO O S quence 1 AN D Calque E e imaget Er actions sur image 1 startDrag truc true fas Re bulleetpoisson lt truc gt D finition s de symbole A E bulleetpoisson E C7 Calquei el image 1 i y E poisson Pir E bulles poisson D Caiquet La e image 1 bulles P Guide Calque 1 el image 1
5. exprime la valeur en pourcentage de la transparence de l occurrence entre 0 et 100 _rotation exprime la valeur de rotation d une occurrence comprise entre 180 et 180 degr s _visible permet de ne plus voir une occurrence du clip Le clip est cependant toujours pr sent sur la sc ne exprime la valeur du num ro de l Image sur laquelle est plac e la t te de lecture _totalframe permet de conna tre le nombre total d Images du sc nario en cours _currentframe recup re le nom d occurrence d un clip _target recup re le chemin de cible de l occurrence d un clip _mouse et permet de r cup rer les coordonn es de la souris _ymouse Monique Colinet CeFIS FUNDP Mai 2004 Page 65 Cr ation d animations interactives en Flash Utilisation de l objet Bouton Utilisation de l objet Bouton Les gestionnaires d v nements Boutons on appuyer la souris est enfonc e sur la zone cliquable du bouton rel cher release la souris est rel ch e mais dans la zone cliquable du bouton Si la souris est rel ch e en dehors de cette zone cliquable il n y a aucun effet rel cher en releaseOutside la souris est rel ch e une fois en dehors de la zone dehors cliquable keyPress une touche du clavier est enfonc e Indiquez entre les guillemets le nom de la touche survoler rollOver la souris passe sur la zone du bouton Elle le survole sortir du survol rollOut toujours en su
6. la m me couleur que celle du bouton 3 Voir le chapitre suivant r serv cette hi rarchie Relisez ventuellement les notes du chapitre La sc ne et ses objets pour conna tre la signification de ces 3 statuts 37 Sous entendu les objets de type texte de saisie et les objets de type texte dynamique Monique Colinet CeFIS FUNDP Mai 2004 Page 51 Cr ation d animations interactives en Flash L interactivit Les tapes Cr er une premi re zone de texte de saisie Donnons lui comme nom d occurrence comptage et comme nom de variable mot Cr er une seconde zone de texte de type dynamique cette fois Son nom d occurrence pourrait tre resultat et son nom de variable longueur Cr er enfin un bouton quelconque Sur ce bouton ajouter le script permettant de compter les lettres du mot qui sera encod dans la zone de saisie On travaille ici avec des objets de la classe String Le contenu de cette variable peut aussi tre des caract res chiffres ou des caract res sp ciaux Script on release longueur mot length Remarques L v nement sur le bouton aurait galement pu tre on press Le contenu de la variable mot est trait par la propri t length qui donne la longueur ou plut t qui compte le nombre de caract res de la cha ne de caract res Elle renvoie donc une valeur num rique Le contenu de la variable longueur est ensuite remplac par la valeur trouv
7. random fonction qui renvoie un entier compris entre 0 et le nombre entre _y random 350 50 permet de d finir la position du flocon de neige vitesse random 4 1 vitesse variable qui d termine la vitesse de chute du flocon coef random 100 coef variable qui d termine la grosseur du flocon _xscale coef _xscale et _yscale chelle de grandeur du _yscale coef flocon _alpha random 80 10 _rotation random 360 _alpha transparence du flocon entre 0 et 100 onClipEvent enterFrame orientation du flocon _y vitesse if _y gt 400 _y 10 coef random 100 condition si la position al atoire du flocon est trop grande 3 Le script ci dessus est cr pour un seul flocon 4 Pour avoir plusieurs flocons sur la sc ne il faut encore ajouter un script sur l Image cette fois Monique Colinet CeFIS FUNDP 2003 2004 Page 67 Cr ation d animations interactives en Flash Quelques exemples suppl mentaires for 1 1 1 lt 350 1 boucle de r p tition duplicateMovieClip duplicateMovieClip r p tition de l insertion flocon flocon i i du clip flocon eval flocon i x random 600 eval est une fonction qui permet de r cup rer les variables propri t s d finies eval flocon i y random 150 50 sur l objet flocon Exemple 2 la pluie Cet exemple est semblable au pr c dent Quelques variantes cependant les gouttes tombent sur P cran co
8. animation qui sera lue en une seule tape soit plausible Vous pouvez d s pr sent faire travailler votre imagination pour cr er des animations Troisi me exemple des lettres en mouvement Il ne faut pas s imaginer m me si cela n a pas encore t envisag que les animations sont r serv es aux objets de type dessin Il est aussi possible de r aliser des animations d objets textes Dans ce cas le texte ins r sur la sc ne sera un texte de type statique Il sera converti toujours selon les m mes principes en symbole graphique Et l enti ret des caract res contenu dans ce symbole se d placera sur la sc ne Si on souhaite un mouvement diff rent pour chacun des caract res de l objet texte une manipulation un peu plus complexe doit tre mise en place Etant donn que chacune des lettres effectuera un mouvement ces lettres doivent tre r parties sur des calques diff rents Il ne faut pas perdre son temps cr er un nouveau calque pour chaque caract re Cette op ration peut tre simplifi e Suivez la m thode Les calques cr s lors de ce type de manipulation peuvent tre class s dans un seul dossier calque de textes par exemple Quatri me exemple le calque Masque Le masque permet de voir certaines zones de l animation et de ne pas en voir d autres Une zone de masque se d finit sur un calque Vous pouvez utiliser un calque de masque pour cr er un trou qui laisse ap
9. placer la poign e Cr er le symbole image qui a le statut de clip Ce symbole peut contenir un objet quelconque une forme une image bitmap un clip Construire l animation e Placer sur la sc ne le symbole image et lui donner un nom d occurrence ce n est pas indispensable mais pr f rable pour prendre de bonnes habitudes e Rep rer la position et les dimensions de cet objet dans l inspecteur des Propri t s e Placer sur la sc ne le symbole poign e afin de le faire co ncider point d ancrage avec le point d ancrage de l objet image Se servir des informations de coordonn es et de dimensions affich es dans l inspecteur des Propri t s pour plus de pr cision Donnez aussi un nom d occurrence cette poign e a e Placer une seconde poign e b sur un autre endroit de l image e Sur cette image du sc nario crire le script permettant d interagir sur les dimensions de l image lorsque le fichier sera export en Flash onClipEvent enterFrame _X root a x _y root a y _xscale root b x root a x _yscale root b y root a y Monique Colinet CeFIS FUNDP 2003 2004 Page 71 Cr ation d animations interactives en Flash Quelques exemples suppl mentaires f Hacromedia Flash Player 6 Fichier Affichage Contr le Aide ioj xi Exemple 4 D filement d une image dans une fen tre La visualisation d une image dont les dimensions sont
10. viter que le symbole lui m me ne 28 T ne s agit pas de supprimer de mani re pure et simple mais plut t de masquer le curseur actuel Monique Colinet CeFIS FUNDP Mai 2004 Page 47 Cr ation d animations interactives en Flash L interactivit prenne les propri t s sp cifiques que l on va attribuer un exemplaire de ce symbole Il faut ensuite donner les instructions cette occurrence pour qu elle r agisse comme souhait Une fois l occurrence du clip s lectionn e commencez alors r diger le script par l interm diaire du panneau Actions Script 1 onClipEvent load 2 Mouse hide 3 startDrag this true 0 0 550 400 4 Explications du script Puisqu il s agit d une action sur un clip il faut d abord faire appel au gestionnaire d v nements des clips onClipEvent Il faut ensuite pr ciser quelle instruction doit tre ex cut e sur le clip load l action est initi e d s que le clip est instanci et appara t dans le sc nario les actions men es sur ce clip actif dans le sc nario sont au nombre de 2 e la disparition de la souris Mouse hide Il s agit d une action sur l objet souris donc une m thode de la classe Mouse e accrochage du nouveau clip au pointeur Il faut donc trouver une m thode dans la classe MovieClip qui accroche ce clip et faire en sorte que ce clip suive les mouvements du pointeur c est l instruction
11. Monique Colinet CeFIS FUNDP Mai 2004 Page 32 Cr ation d animations interactives en Flash ActionScript Le point est utilis pour indiquer les propri t s ou les m thodes associ es un objet ou un clip Il est aussi utilis pour identifier le chemin cible d un clip d une fonction d une variable ou d un objet Le point virgule signale la fin d une instruction dans ActionScript Les parenth ses permettent de d finir un ordre de priorit ou de d finir des arguments ou param tres de certaines actions Les parenth ses peuvent aussi servir valuer une expression situ e gauche d un point dans la syntaxe point Les majuscules et les minuscules Seuls les mots cl s sont sensibles la casse Il est cependant pr f rable de s en tenir aux conventions afin de retrouver facilement les noms des fonctions et des variables lors de la lecture du code ActionScript Les commentaires qui se repr sentent par permettent d ins rer des remarques dans un script Un script est plus facile comprendre lorsqu il est compl t par des commentaires Il est remarquer que les commentaires n alourdissent pas la taille du fichier export Les guillemets d limitent les cha nes de caract res Les objets Comme cela a d j t dit pr c demment les objets poss dent des propri t s et des m thodes Comment reconna tre une propri t d une m thode Voici un exemple de partie de script qui vous p
12. bon fonctionnement de cette animation le calque guide doit tre situ au dessus du calque o se trouve l objet d placer Le calque contenant l objet en mouvement doit tre modifi en calque guid Il faut donc modifier les propri t s des deux calques consid r s Le centre du symbole objet en mouvement doit se trouver sur la premi re Image cl au dans le sc nario Le centre appel aussi point d alignement d un symbole n est pas n cessairement situ au centre de l objet Il est repr sent par une petite croix lors de sa construction ou par Monique Colinet CeFIS FUNDP Mai 2004 Page 21 Cr ation d animations interactives en Flash L animation point de d part de la trajectoire et le centre de ce m me symbole doit co ncider sur la derni re Image cl avec l extr mit de la trajectoire Il faut en quelque sorte que l objet soit accroch la trajectoire Si apr s avoir test l animation l objet ne suit pas la trajectoire c est vraisemblablement que cet objet n est pas correctement accroch au point de d part ou au point d arriv e du guide Suivant le type d objet en mouvement sur cette trajectoire il ne faudra pas oublier dans les propri t s de l objet de s lectionner l option Orienter vers la trajectoire fRemarque les calques guides ne sont pas visibles lors de l exportation de l animation Deuxi me exemple deux objets en mouve
13. boutonson false 95 370 250 370 volumeson 1 on release stopDrag volumeson 0 Script 5 un bouton qui peut recevoir des codes correspondants des touches du clavier ici pour mettre un clip en mouvement de rotation on keyPress g roue rotation roue rotation 5 on keyPress lt Right gt roue rotation roue rotation s Troisi me exemple la cr ation d un curseur personnalis et anim Analyse Pour pouvoir cr er un curseur anim il faut avant tout disposer d un clip anim La premi re tape du travail est donc la r alisation de ce clip Dans un second temps il faut faire comprendre au logiciel que le curseur actuel doit tre remplac par le clip Comme dans tout programme informatique le remplacement est la combinaison de 2 actions suppression et insertion Il faut donc supprimer le curseur actuel qui est repr sent par une fl che oblique et ajouter le nouveau curseur D tail des tapes La construction du clip est enti rement autonome par rapport au reste du travail Il ne s agit pas de programmation mais tout simplement de la cr ation d un objet sur la sc ne enregistr comme symbole de type clip Ce symbole sera automatiquement ins r dans la biblioth que Lors de la seconde phase de construction il est indispensable de r cup rer le symbole clip sur la sc ne et lui donner un nom d occurrence Cela afin d
14. bullet Guide bulleZ bulle2 el image 1 i a bulle el image 15 Guide bulle3 bulle S quence 1 gt Calque 1 gt image 1 gt bulleetp ot gt image 1 gt bulle gt Calque 1 gt image 1 Monique Colinet CeFIS FUNDP Mai 2004 L animation Page 28 Cr ation d animations interactives en Flash ActionScript ActionScript Avant d aller plus loin un peu de POO Sans entrer dans la r daction d un cours sur la programmation orient e objet d sormais appel e POO il faut quand m me donner quelques notions de ce type de langage afin de pouvoir comprendre les m canismes utilis s par ActionScript pour ins rer de l interactivit dans ses animations Dans la POO les informations sont organis es en groupes appel s classes Lors de la cr ation d une classe il faut aussi d finir l ensemble des propri t s caract ristiques et des m thodes comportements d un objet virtuel de cette classe On pourra par la suite cr er autant d occurrences objets de cette classe que l on veut Tous les objets d une m me classe auront des caract ristiques communes et des m thodes identiques Il est noter que ActionScript contient d j une s rie de classes int gr es On peut d ailleurs les trouver dans le dossier Objets du panneau Actions Les objets peuvent tre de simples containers bo tes de donn es ou peuvent tre repr sent s graphiquement sur la sc ne sous forme de clips de b
15. ces graphiques simples Tout graphisme construit partir des outils de dessin est consid r comme une FORME La Forme est l objet le plus l mentaire dans Flash s agira de ne pas confondre l objet Forme crit avec une majuscule avec le terme g n rique orme Une premi re observation est faire lorsqu on commence dessiner sur la sc ne en utilisant les outils la Forme peut tre de deux types le trait ou le remplissage Des outils de dessin correspondent ces deux types de Forme Ces 2 types de Forme ont un comportement diff rent et des attributions diff rentes Voici un tableau r capitulatif des caract ristiques de ces 2 types de Forme Extrait de Flash MX Animation interactivit ActionScript Guylaine Monnier Dunod Paris 2002 Monique Colinet CeFIS FUNDP Mai 2004 Page 10 Cr ation d animations interactives en Flash La sc ne et ses objets Qui est quoi La ligne Le pinceau Le crayon L int rieur des ovales Le trac de la plume L int rieur des rectangles L ext rieur des ovales L int rieur d un trac ferm la L ext rieur des rectangles plume Le texte s par L image bitmap s par e Modification Pipette Crayon Encrier Texture image bitmap oui Dilater R tracter non oui Affecter un contour non oui Remarque particuli re les Formes peuvent avoir des comportements vectoriels ou bitmap Exemple dessiner un rectangle rouge et
16. cet objet Ce dernier pour pouvoir tre modifi doit aussi avoir le statut de clip Voici l arborescence de l animation S quence 1 E 07 Calque image 1 ko image lt imaget gt actions sur image onClipEvent enterFrame _ _root a _ _ys_root a _ y _ scale _root b _ root a _ _yscale _root b _y root a _y t Ea poignee lt a gt Ea poignee lt b gt E Ba D finition s de symbole E image E poignee E amp Calque e image 1 LES bt EF actions sur bt on press startDrag this t on release stopDrag t Monique Colinet CeFIS FUNDP 2003 2004 Page 70 Cr ation d animations interactives en Flash Quelques exemples suppl mentaires Quelques explications Cr er le symbole bouton Sur la premi re image dessiner un petit carr de couleur de quelques pixels s aider de l inspecteur des propri t s pour d finir ses dimensions mais ne pas crire d actionScript sur ce bouton Les autres images du bouton peuvent rester vides mais peuvent tre compl t es par un autre symbole par exemple la double fl che comme dans la majorit des programmes Cr er le symbole poign e qui a le statut de CLIP Ce symbole contiendra comme seul objet le bouton qui vient d tre dessin Sur ce bouton sera ins r l actionScript suivant on press startDrag this on release stopDrag qui permettra de d
17. clip nomm monClip lui m me contenu dans le sc nario principal l appel de cette fonction serait _root monClip test Si un autre clip imbriqu a galement besoin de cette fonction pour faire appel on utiliserait l criture _parent test Cette syntaxe point permet de travailler sur un objet partir de n importe quel endroit du sc nario Il est pr f rable lors de la d finition d une fonction de l associer l objet _global en vue de faciliter sa mise en oeuvre D s ce moment et quel que soit l endroit du sc nario o vous vous trouvez vous pouvez faire appel cette fonction par test puisqu elle a t d finie comme tant une fonction globale Il peut en tre de m me pour les variables qui peuvent tre globales ou locales celles ci n ont une existence qu l int rieur de la fonction L utilisation de variables globales reste cependant plus d licate car elle est active en permanence et risque d interf rer avec d autres variables locales qui pourraient l alt rer la d truire ou la recr er Les objets dans Flash Le premier objet Object est le p re de tous les objets dans Flash Cet objet n est pas destin une t che particuli re On l utilise souvent pour cr er des objets personnalis s qui ont des t ches sp cifiques Pour cr er un nouvel objet ou plus exactement une occurrence d un objet de quelque nature qu il soit il faut utiliser une fonction co
18. des groupes de propri t s et de m thodes Chaque objet ayant son propre nom et tant une occurrence d une classe particuli re Il existe des objets pr d finis dans ActionScript Exemple Date qui fournit des informations provenant de l horloge syst me Les actions Les actions sont des instructions qui demandent une animation de faire quelque chose au cours de la lecture On peut galement utiliser le terme instruction pour parler d une action Exemple stop Les fonctions Ce sont des blocs de code r utilisables qui peuvent recevoir des param tres et renvoyer une valeur Exemple getVersion qui renvoie la version de Flash Player qui est en train de lire l animation Les l ments et les composants d interface Un l ment d interface est la fois un objet un bouton une action en cliquant sur le bouton le logiciel change d image et un v nement Outre ces familles d instructions on peut encore retrouver d autres types d instructions parmi lesquels Les constantes Les constantes sont des l ments qui ne changent pas Elles sont utiles pour comparer des valeurs Ces constantes sont toujours crites en majuscules Exemple Key TAB qui fait r f rence la touche de tabulation 16 Dans le chapitre suivant il sera question d action stop De mani re g n rale lorsque le choix existe il est pr f rable dans la programmation objet d utiliser la m thode plut t que l
19. des interactions voire des changes de donn es entre celles ci Pour pouvoir visualiser la structure et naviguer dans celle ci le module appropri est l explorateur d animations qui permet une visualisation plus ou moins d velopp e du travail en cours Il permet donc de travailler dynamiquement avec la sc ne Le lecteur Ce module va permettre tout moment lors de la cr ation de visualiser le travail que l on est en train de r aliser Monique Colinet CeFIS FUNDP Mai 2004 Page 7 Cr ation d animations interactives en Flash D couverte de l environnement Les caract ristiques g n rales des fichiers g n r s Les propri t s des documents Ces propri t s vont avoir une influence sur l affichage de l animation au moment de sa lecture Le concepteur peut d cider entre autres de ses dimensions il s agit de la grandeur de la fen tre qui va s ouvrir lors du lancement de la lecture du fichier Ces dimensions peuvent se d finir en pixels ou en points en centim tres en millim tres en pouces ou encore en pouces transform s directement en centim tres Ces diff rentes dimensions vont permettre de pr voir un affichage correct suivant l environnement de diffusion de la cr ation la couleur de l arri re plan Il est noter qu il n est pas possible de choisir un d grad de couleur pour l arri re plan d une animation Flash En effet les calculs n cessaires lors de l affichage de ce
20. e par la propri t length puis est affich e dans la zone texte qui a t r serv e sur la sc ne Une consultation des m thodes et des propri t s de l objet String disponibles sera sans doute n cessaire De la m me mani re on peut crire des scripts qui utiliseront des objets encod s qui sont des variables num riques Voici un exemple de calcul simple Script calcul d une racine carr e on release keyPress lt Enter gt aucarre Math sqrt valeur e les v nements possibles sont le rel chement du bouton gauche de la souris ou la pression de la touche Enter ou Entr e 38 Cha ne de caract res Monique Colinet CeFIS FUNDP Mai 2004 Page 52 Cr ation d animations interactives en Flash L interactivit e valeur tant la variable de la zone de texte de saisie et aucarre la variable de la zone de texte dynamique e sqrt est une m thode de la classe Math Les objets de type texte dynamique vont galement tre fort utilis s dans les animations interactives contenant des compteurs de bonnes r ponses par exemple Ces textes de saisie et textes dynamiques peuvent encore tre combin s avec des listes de variables Citons comme exemple un traducteur fran ais anglais Ces actions n cessitent une analyse et une organisation un peu plus compl te des informations que l on doit traiter Elles seront envisag es dans le chapitre suivant Monique Colinet CeFIS
21. fonctions de base du logiciel nous pouvons entamer la cr ation proprement dite N oublions pas qu il faut en m me temps travailler sur la sc ne et sur le sc nario donc sur les Images et sur les Calques Quelques propri t s sont d finir avant le commencer la cr ation d une animation les dimensions de la sc ne elles seront d termin es en fonction de la destination finale et surtout du type de r solution d cran Il est cependant possible par programmation d adapter ces param tres pour la configuration personnelle de chaque utilisateur la couleur de la sc ne il n est pas possible d utiliser des d grad s de couleur car c est un l ment qui sollicite norm ment le CPU de la machine et qui ralentirait la lecture de la s quence l unit de mesure prise en r f rence pixels centim tres pouces la cadence de l animation c est le nombre d Images par seconde Ce param tre est d fini de mani re unique pour toute l animation Il existe plusieurs m thodes de cr ation d animations Le choix de l une ou l autre m thode va d pendre essentiellement du produit que vous voulez cr er Les animations simples L animation Image par Image Ce type d animation ressemble tr s fort aux animations traditionnelles que l on conna t d j Ne citons que les gif anim s Il s agit dans ce cas de cr er chacune des images individuellement et ensuite de les rassembler par l
22. il est plus simple d utiliser un script plut t que des interpolations de mouvement Avec un script le mouvement est perp tuel si on ne l arr te pas Voici encore quelques scripts de mouvements un peu plus complexes Script 1 mouvement de va et vient sur une ligne horizontale onClipEvent load sens 1 onClipEvent enterFrame x 3 sens Monique Colinet CeFIS FUNDP Mai 2004 Page 43 Cr ation d animations interactives en Flash L interactivit Monique Colinet CeFIS FUNDP Mai 2004 Page 44 Cr ation d animations interactives en Flash L interactivit _y 50 Math sin t 20 Script 5 un mouvement elliptique onClipEvent enterFrame t 0 1 _x 50 Math cos t 40 _y 120 Math sin t 10 Un avantage non n gligeable de l utilisation de scripts pour r aliser des mouvements d objets clips est que ces clips peuvent tous se trouver sur le m me calque Il est m me possible de n crire qu un seul script dans lequel on fait r f rence aux diff rents objets clips plac s sur la sc ne Il faut dans ce cas que tous les clips soient sur un m me calque Le sc nario est alors r duit seule Image Deuxi me exemple des boutons contr l s par des scripts Apr s le clip le bouton est le deuxi me objet le plus utilis dans les animations Flash Lui aussi poss de un gestionnaire d v nements riche en m thodes et propri t s Toutefois il
23. interm diaire du logiciel afin que celles ci soient vues et lues de mani re s quentielle Cette mani re de cr er une animation peut tr s vite devenir lourde en poids si l on souhaite utiliser cette animation pour Internet En effet l utilisation de ce proc d n cessite que chaque Image du sc nario soit une Image cl De plus deux m thodes sont envisageables pour construire ce type de s quence chaque Image est construite s par ment en redessinant l enti ret du contenu avec les quelques modifications n cessaires Citons par exemple la marche d un personnage chaque Image contient un maximum d objets communs Si l on reprend le cas pr c dent de la marche du personnage le tronc et la t te de ce personnage sont toujours les m mes Il est possible de les placer sur un calque Les parties qui diff rent seront quant elles plac es sur un des autre s calque s Les modifications seront donc minimis es et par le fait m me le poids du fichier aussi Cette m thode pourra encore tre am lior e si les objets en mouvement sont CPU Central Processing Unit microprocesseur Monique Colinet CeFIS FUNDP Mai 2004 Page 17 Cr ation d animations interactives en Flash L animation transform s en symboles Il ne restera plus qu placer ces symboles dans les positions convenables pour que la lecture puisse montrer un effet plus naturel Pour aider le concepteur un outil est mis sa disposi
24. j cit s pr c demment Le format SWF Le format le plus courant est sans doute le format SWF Il permet de lire les animations par l interm diaire du Flash Player Ce lecteur est totalement gratuit et peut tre t l charg sur le site propri taire de Macrom dia l adresse www macromedia com Les animations seront lues directement sans autre proc dure Cependant il est galement possible et s est la grande mode actuellement d ins rer ces animations Flash dans des pages Web Les animations gardant leur statut d animations Flash L insertion de ces animations se font par l interm diaire du code HTML Deux balises doivent tre renseign es lors de l int gration du fichier SWF dans la page HTML la balise Embed et la balise Object Voici un code regroupant ces deux balises n cessaires lt html gt lt head gt lt title Document sans titre lt title gt lt meta http equiv Content Type content text html charset iso 8859 1 gt lt head gt lt body gt lt object classid clsid D27CDB6E AE6D 1 1cf 96B8 444553540000 codebase http download macromedia com pub shockwave cabs flash s Wflash cab version 6 0 29 0 width 600 height 350 gt lt param name movie value monfichier swf gt lt param name quality value high gt lt embed src monfichier swf width 600 height 350 quality high pluginspage http www macromedia com go getflashplayer type application x shockwave flash g
25. le plus l mentaire Il contiendra de simples Formes Il est utilis pour gagner du poids dans l animation Il doit tre cr chaque fois qu un m me dessin doit tre r p t sur une m me image ou dans le temps Par exemple la roue d une voiture e le symbole bouton est un symbole r actif Lors de son survol par pointeur de la souris ce dernier se transforme en main pour signaler que la zone est r active Des actions pourront donc tre d clench es en fonction du comportement de l utilisateur sur ce bouton e Le symbole clip d animation est un symbole interactif et programmable Un symbole clip d animation peut galement tre anim Il poss de sa propre temporalit ce qui lui permet de lire son contenu et cela ind pendamment du sc nario principal Par exemple une roue de voiture qui tourne sur elle m me Le clip d animation est la cl de l interactivit Celle ci sera d taill e plus loin Certains symboles n auront pas de contenu graphique sur la sc ne En effet un symbole peut ne contenir qu un son Les objets de type texte Outre le dessin vectoriel il est bien entendu possible de pr senter du texte sur une sc ne Il est possible de trouver 3 types de blocs de texte Monique Colinet CeFIS FUNDP Mai 2004 Page 12 Cr ation d animations interactives en Flash La sc ne et ses objets la zone de texte statique Il s agit d un contenu r dactionnel qui sera simplement affich et
26. lu par l utilisateur le champ de texte dynamique Il s agit d une zone r serv e l affichage de texte de fa on dynamique Un nom d occurrence est associ ce champ Cela permet de le manipuler par programmation Le contenu est affich par l interm diaire d une variable Ce champ de texte dynamique est un champ de lecture pour l utilisateur Cela pourrait tre par exemple un score qui s affiche le champ de texte de saisie On peut le comparer un champ de formulaire Un nom d occurrence est galement associ ce champ Il est donc aussi possible de le traiter par programmation Une variable sera galement affect e ce champ afin d en permettre le traitement Ce champ de texte de saisie est un champ d criture pour l utilisateur Cela pourrait tre par exemple l introduction d une r ponse une question Ces trois types d objet ont des propri t s diff rentes Ces propri t s peuvent tre d finies par l interm diaire de l inspecteur de propri t s C est d ailleurs par l interm diaire de cet inspecteur de propri t s qu il faut pr ciser au moment de la cr ation de l objet le type de bloc texte statique dynamique ou de saisie que l on veut ins rer dans la sc ne Outre les objets graphiques classiques provenant de dessins vectoriels et les objets de type texte il est encore possible d ins rer dans une sc ne des objets multim dia tels que des sons de
27. n rale du script Celui ci contient les signes les chiffres des noms d occurrences de variables des param tres bleu pour les instructions les fonctions et les actions du langage Les cha nes de caract res sont galement color es en bleu bleu marine pour les mots r serv s Si un mot r serv reste en noir il faut en v rifier l criture et notamment la casse majuscules et minuscules car ils y sont sensibles gris pour les commentaires qui commencent par En mode Expert des commentaires sur plusieurs lignes peuvent tre encadr s par et rouge pour les syntaxes erron es ou incompl tes surlignage jaune pour les actions qui ne sont pas compatibles avec la version d export choisie La syntaxe et la structure d un script La structure d un langage est un mode d organisation des instructions Au sein de cette structure il existe une syntaxe qui est au langage de programmation ce que la grammaire et l orthographe sont aux langues Cette syntaxe est n cessaire pour que tout le monde puisse se comprendre Dans le cas de Flash la syntaxe doit permettre l interpr teur du langage de comprendre les instructions que vous lui demandez d ex cuter Les accolades permettent de regrouper un bloc d instructions Elles d terminent la port e pour un script ou une instruction Le d but est pr cis par l accolade ouverte et la fin par l accolade ferm e Exemple on release play
28. nements qu il provoque consciemment ou inconsciemment d ailleurs Les actions sur les boutons Les actions doivent toujours tre plac es sur une occurrence du bouton et non pas sur le symbole lui m me En effet un symbole de type bouton doit pouvoir tre r utilis plusieurs fois sans pour autant avoir toujours le m me comportement Il faut galement imbriquer ces actions dans un gestionnaire on et sp cifier les v nements souris ou clavier qui d clenchent l action Les actions sur les clips Les proc dures d utilisation des actions de navigation sont les m mes que celles utilis es sur les boutons A savoir les actions sont plac es sur une occurrence de clip et sont imbriqu es dans un gestionnaire onClipEvent Quelles sont ces actions Play et Stop Syntaxe play 18 Un gestionnaire constitue l ensemble des lignes li es un ou plusieurs v nements Un gestionnaire comprend la d finition de l v nement et toutes les instructions li es celui ci La litt rature parle d ailleurs de gestionnaire d v nements Dans ActionScript les actions sp ciales associ es un bouton ou un clip sont des gestionnaires C est en quelque sorte l association entre une action et un bouton ou entre une action et un clip Monique Colinet CeFIS FUNDP Mai 2004 Page 38 Cr ation d animations interactives en Flash L interactivit L action play lit le sc nario partir de l Image coura
29. normale Trait grossi 10 fois Par contre une image vectorielle est beaucoup plus exigeante en terme de processeur qu une image bitmap puisque les points de l image qui devront tre affich s ne sont pas enregistr s dans le fichier et devront tre calcul s l affichage sur l cran Monique Colinet CeFIS FUNDP Mai 2004 Page 4 Cr ation d animations interactives en Flash D couverte de l environnement D couverte de l environnement C est par l interm diaire de l outil de conception que nous allons d couvrir ce qu est FLASH Il s agit d un logiciel de cr ation d animations Pour utiliser efficacement ce logiciel il faut tenir compte de deux param tres fondamentaux l espace et le temps Il r pond aux m mes grands principes qu un logiciel de montage vid o Les cr ations d animations doivent tre envisag es dans deux directions en fonction du temps puisqu il s agit d une suite d images qui d filent et en fonction de l espace sur deux images diff rentes les objets ne sont pas situ s au m me endroit puisqu il existe une animation Nous allons donc d couvrir ces deux l ments diff rents mais qui ne peuvent tre dissoci s Le temps partie sc nario dans l environnement L animation est une suite d images qui d filent un certain rythme Ces images peuvent tre particuli res les images cl s qui seront enregistr es dans leur totalit avec toutes le
30. nouveaux calques afin de faciliter le travail sur d autres Ces deux param tres n ont cependant aucune r percussion sur le travail final c est dire lors de la lecture du fichier Les calques peuvent tre aussi de plusieurs types le calque Normal C est le plus courant et c est la propri t de tout calque par d faut le calque Guide Il pourra contenir une trajectoire qui servira de rep re pour un objet en mouvement situ sur un autre calque bien entendu Ce type de calque ne sera pas visible dans l animation et il ne sera m me pas export lors de la lecture du fichier le calque Guid C est celui sur lequel se trouvera l objet qui doit suivre une trajectoire dessin e sur le calque pr c dent Une op ration ne sera possible que si le calque Guide est situ juste au dessus du calque Guid le calque Masque Il permet de masquer le contenu d un ou plusieurs calques Masqu s Sa place dans la hi rarchie des calques est tout aussi importante Il doit se situer juste au dessus d eux le calque Masqu contiendra forc ment des informations qui ne seront visibles qu au travers du calque Masque Ces diff rents types de calques pourront tre class s dans des dossiers et sous dossiers afin de rendre le travail organis et structur Monique Colinet CeFIS FUNDP Mai 2004 Page 16 Cr ation d animations interactives en Flash L animation L animation Maintenant que nous connaissons les
31. on veut voir appara tre un autre bloc de texte Monique Colinet CeFIS FUNDP Mai 2004 Page 26 Cr ation d animations interactives en Flash L animation On observe que les zones entre les caract res ne sont pas cliquables Pour rem dier cet inconv nient on peut d finir une zone cliquable artificielle sur le 4 me tat du bouton Cette zone de forme rectangulaire couvrira toute la zone de texte un bouton invisible si vous avez compris le principe des tats du bouton vous ne placerez une Image cl que sur le 4 me tat du bouton tat Cliquable Le texte Dans cette premi re partie l animation de texte n est envisag e que pour du texte de type statique Ces zones de texte peuvent ainsi tre trait es comme des objets graphiques On peut donc leur faire subir aussi bien des interpolations de mouvement que des interpolations de forme Cela a d j t d crit pr c demment Les traitements les plus int ressants que l on peut faire avec les zones de texte n cessitent l utilisation de variables et du langage ActionScript Ils seront donc d crits un peu plus loin L organisation des informations Il est int ressant certains moments de pouvoir avoir une vue d ensemble de son travail qu il s agisse de visualiser les s quences les calques les clips Une aide pr cieuse sera l explorateur d animations Ce panneau peut tre activ ou d sactiv tout moment Il peut aussi tre affich
32. pas que l arr t ou la marche de la t te de lecture qui puisse tre prise en charge par un bouton Ceux ci peuvent galement d clencher ou arr ter des mouvements de clips modifier le contenu d une variable changer la s quence de lecture Rappel il faut que la t te de lecture soit l arr t sur l Inage contenant un ou plusieurs bouton s si l on veut que ceux ci soient utilisables Quelques exemples qui font appel des scripts que l on doit maintenant commencer comprendre Script 1 un bouton qui d clenche le mouvement d un clip on press monClip x 5 j Script 2 un bouton qui teste une valeur de variable introduite par Putilisateur on release if test gt 0 amp amp test lt 3 reponse OK else reponse FAUX Script 3 un bouton qui ouvre une fen tre du navigateur et qui charge la page demand e on press getURL http www det fundp ac be cefis 7 TI faut avoir d fini par ailleurs une variable test sur un objet de type texte de saisie et une variable reponse sur un autre objet de type texte dynamique Ces objets texte seront envisag s un peu plus loin Monique Colinet CeFIS FUNDP Mai 2004 Page 46 Cr ation d animations interactives en Flash L interactivit Script 4 un bouton curseur que l on peut d placer le long d une droite on press startDrag
33. pointeur Sa construction Envisageons tout d abord sa construction Il est souhaitable de le d finir comme tel avant de le dessiner Ce symbole est compos de 4 images Attention il ne s agit pas d Images du sc nario mais de 4 tats diff rents ou 4 apparences On parle aussi des images du sc nario du bouton l tat Haut 1 re image repr sente l apparence normale du bouton quand le pointeur n est pas dessus l tat Dessus 2 me image repr sente l apparence du bouton quand le pointeur se trouve dessus l tat Abaiss 3 me image repr sente l apparence du bouton quand l utilisateur clique dessus l tat Cliquable 4 me image d finit la zone qui r agit au clic de la souris Cette zone est invisible dans l animation Si cette zone n est pas d finie elle est quivalente la zone d finie dans l tat Abaiss Les comportements de la souris Chaque tat d un bouton correspond son aspect selon le comportement de la souris Les informations que l on peut donner aux diff rents aspects sont vari s le son il est possible d associer un son l tat Abaiss du bouton Il ne faut pas dans ce cas pr cis ajouter de calque mais simplement faire glisser sur la sc ne un son que l on a import dans la biblioth que le texte un bouton peut aussi tre cr partir d un bloc de texte Cette manipulation peut tre utile dans le cas o lors d un clic
34. s le d marrage de l animation mais ils peuvent aussi tre activ s par l interm diaire d un bouton Pour utiliser le langage ActionScript dans la construction de mouvements d objets il faut avant tout transformer ces objets en clips Ceux ci peuvent tre anim s ou non La d cision de prendre un symbole de type clip plut t que de type graphique pour un symbole non anim va offrir un plus grand choix d actions m thodes ou propri t s D tail des tapes de la r alisation Avant de se lancer dans la r daction du script il est indispensable de savoir le type de mouvement que l on veut mettre en place ainsi que les v nements qui vont s y rapporter Quelques questions doivent donc tre pos es l objet doit il tre en mouvement au lancement de la lecture de l animation Faut il d clencher l animation par un bouton Le mouvement est il rectiligne Dans quel sens Quelle est sa dur e On peut imaginer que suivant les questions pos es la mise en place du script sera diff rente Il y a cependant des invariants dans cette animation En effet quel que soit le mouvement que l on va d finir il faut avant tout e transformer l objet mettre en mouvement en clip A moins que vous ne d cidiez que ce clip soit anim Au quel cas il faudra le d finir avant de le construire e placer une occurrence de ce symbole sur la sc ne sur la premi re Image du calque 1 du sc nario principal Il est presqu imp
35. sera bien n cessaire d associer une autre action un v nement produit par un bouton Tout comme pour le clip c est sur l occurrence du bouton que vient se greffer le script Et plus sp cifiquement sur l tat Cliquable de ce bouton Mais le logiciel se charge de cette tape lui m me Envisageons quelques cas simples Pour viter qu une animation ne d marre automatiquement lors de la lecture il est conseill de placer sur la premi re Image un script stop La lecture de l animation se fera alors par exemple par l enfoncement d un bouton Analyse Il faut ins rer une premi re Image sur laquelle on place le script d arr t de la t te de lecture On place galement sur cette premi re Image une occurrence du bouton que l on a pr alablement dessin et enregistr comme tel Apr s avoir s lectionn l occurrence du bouton pr sent sur la sc ne et apr s lui avoir donn un nom d occurrence on peut lui ajouter un script Par exemple aller la seconde Image et s arr ter sur cette Image On en arrive alors de la programmation pure Comme ActionScript ne peut se suffire lui m me il faut le placer sur une Image d un sc nario Consulter galement l utilisation de l objet Bouton en fin de document Monique Colinet CeFIS FUNDP Mai 2004 Page 45 Cr ation d animations interactives en Flash L interactivit Script on release gotoAndStop 2 Il n y a
36. suite Sur un second calque cr er un masque c est dire d finir les zones de transparence de l cran Renommer ce calque en masque Ce n est pas obligatoire non plus Le nom peut tre quelconque Modifier la propri t du calque 2 masque en type Masque Automatiquement le calque 1 devient un calque de type Masqu Ces deux calques doivent tre verrouill s pour que leurs nouvelles propri t s soient r ellement actives Lire la s quence Pour une plus grande visibilit du masque vous pouvez cr er un calque suppl mentaire au dessus des pr c dents qui sera une r plique du masque mais dont les zones de forme seront compl mentaires par rapport aux zones de forme du masque Ces nouvelles zones pourront ainsi avoir une couleur M thode masque dynamique sur une sc ne statique Cr er un calque 1 masqu avec des objets images dessins ou textes statiques Cr er un calque 2 masque avec un objet symbole subissant une interpolation de mouvement Sur le calque 1 du sc nario ins rer une Image cl la m me position que la derni re Image du calque 2 Transformer les propri t s des calques masque et masqu et v rifier que ces deux calques sont verrouill s Lire la s quence Nous aurons encore l occasion de revenir sur cette notion de masque lors de l utilisation de clips En effet on peut aussi utiliser un clip anim pour cr er un masque de calque d
37. un ovale bleu qui ne se chevauchent pas et qui n ont pas de bord partie trait S lectionnez l ovale et d placez le sur le rectangle D placez le ensuite sur un autre endroit de la sc ne Le rectangle n a pas chang Faites la m me chose en s lectionnant le rectangle et en le d pla ant sur l ovale On observe que l objet s lectionn vient toujours se positionner au dessus des autres objets Il semble que les deux objets r agissent comme des objets vectoriels Refaites maintenant une autre manipulation S lectionnez le rectangle et placez le sur l ovale D s lectionnez le ensuite re s lectionnez le et d placez le L ovale est maintenant coup et le morceau situ sous le rectangle disparu Il semble maintenant que les objets r agissent comme des objets bitmap Il faut en avoir conscience d s la prise en main du logiciel lorsqu on dessine ces Formes car cela peut perturber quelque peu Vous pouvez m me essayer avec deux Formes de m me couleur elles ne semblent pas tre dans le m me plan Cependant si vous d s lectionnez la seconde Forme alors qu elle se superpose sur la premi re apr s elles n en forment plus qu une Les Formes se mangent quand elles sont de couleurs diff rentes et s agglom rent lorsqu elles sont de m me couleur Les groupes Comme son nom l indique le groupe est un ensemble de Formes Le groupe contient des Formes D s que les Formes sont englob es dans un g
38. 6 Mi x Fichier Affichage Contr le Aide Monique Colinet CeFIS FUNDP 2003 2004 Page 73 Cr ation d animations interactives en Flash Lexique Lexique de base ActionScript Calque Groupe Guide Image Image cl Image cl vide Masque Occurrence Pelure d oignon Sc nario Sc ne S quence Symbole Monique Colinet langage de programmation sp cifique au logiciel permettant de personnaliser les animations feuille transparente contenant les l ments d une animation c est un ensemble d objets ou de formes Les formes faisant partie d un groupe ne peuvent plus tre modifi es sauf en acc dant au groupe par un double clic calque ayant une fonction sp cifique et contenant une trajectoire ligne droite ou courbe que devra suivre un objet plac sur un autre calque dont la propri t sera d tre guid c est la plus petite division temporelle d une animation A chaque image correspond un tat et une position bien pr cise des diff rents objets qui composent l animation elle est le passage oblig d une animation Flash se sert entre autres de ces images pour calculer les effets d animation Les images cl s sont galement le seul endroit o l on peut faire appara tre ou dispara tre un objet lors d une animation elle est similaire une image cl mais elle ne contient aucun objet c est un calque opaque qui cache ce qui se t
39. FUNDP Mai 2004 Page 53 Cr ation d animations interactives en Flash La hi rarchie dans les clips La hi rarchie dans les clips La hi rarchie Comme on l a d j signal lors de l utilisation de s quences diff rentes au sein d une m me animation il est galement possible d ins rer un clip dans un clip Ceux ci ne seront pas situ s au m me niveau de hi rarchie Il en va de m me lorsque plusieurs animations doivent tre lues par Flash Player Les fichiers SWF peuvent tre charg s diff rents niveaux Comme le montre le sch ma ci dessous Clip Clip enfant enfant2 Pour avoir acc s directement ces animations et ou aux objets pr sents dans une animation on utilise la notation POINT dans le langage ActionScript La syntaxe point est un outil typique du langage orient objet Il permet d associer les objets de d finir un chemin dans une structure d objets ou encore de d finir une propri t Exemple 1 Soit un objet ballon et une propri t changeCouleur qui permet d en changer la couleur La commande sera ballon changeCouleur 3 Sch ma extrait du manuel d Utilisation de FlashMX fourni avec le logiciel La complexit du logiciel Flash MX est qu il utilise la notion d objet aussi bien dans l interface graphique que dans son module de programmation ActionScript Les 2 types d objets sont bien entendu en troite relation Monique Colinet CeFIS FUND
40. Flash Quelques exemples suppl mentaires Exemple 5 Faire bouger un objet par un clic de souris Dans cet exemple l action d un clic sur le bouton gauche de la souris provoquera un d placement de cet objet vers le pointeur de la souris Les diff rentes tapes Cr er un objet de type clip Cet objet peut contenir un simple graphique ou un clip Ins rer ce clip sur la sc ne et lui donner un nom d occurrence perso Sur l image de la sc ne r diger le script suivant xa perso x xa et ya sont les coordonn es de ya perso y l occurrence perso plac e sur la sc ne surveil new Object Cr ation d un nouvel objet surveil surveil onMouseDown function par la cr ation d une fonction sur ce nouvel Xa root xmouse objet lors du clic de la souris on remplace ya root ymouse les coordonn es de l objet par les E coordonn es de la souris Mouse addListener surveil Ajouter l couteur surveil l objet Mouse afin d activer cet objet lors d un clic de souris perso onEnterFrame function D placement de l occurrence de l objet lors perso x perso _x xa 0 1 du clic de la souris perso y perso y ya 0 1 0 1 d termine le pas de d placement de t l objet entre 2 Images Une remarque en modifiant la cadence du document 40 images par seconde plut t que 12 on obtient un d placement plus fluide de l objet F Macromedia Flash Player
41. Le sc nario et ses images Par contre les Images virtuelles ont toutes leur importance dans les animations et principalement dans les interpolations Nous en reparlerons un peu plus loin Pour pouvoir ins rer du contenu dans une Image il faut que celle ci soit une Image cl vide ou non suivant les situations Les calques Les calques sont des supports destin s recevoir des l ments graphiques ou non On peut les comparer des transparents qui se superposent Ils permettent ainsi d organiser les objets selon des plans d affichage diff rents Ce syst me de superposition permet de g rer l ordre des objets sur la sc ne 4 Calque 1 Calque 2 Superposition des 2 calques Le calque situ le plus en bas dans la fen tre du sc nario est situ le plus en arri re plan C est sur ce calque que l on placera les l ments destin s constituer le fond de l animation Il faut encore savoir que sur un m me calque les l ments d pos s respectent la m me r gle d empilement Donc le dernier d pos sera situ en avant plan par rapport tous les autres Cependant il faut remarquer que les objets de type Forme sont syst matiquement affect s au plan le plus en arri re du calque Ce qui signifie que si sur un m me calque on d pose un groupe puis un symbole puis une Forme l ordre de l arri re vers l avant sera la Forme le groupe et en avant plan le symbole Le
42. P Mai 2004 Page 54 Cr ation d animations interactives en Flash La hi rarchie dans les clips Dans la syntaxe point l expression commence toujours par le nom de l objet et se termine par la propri t qu on lui affecte La syntaxe point sert aussi relier des objets et des animations et d crit visuellement leur hi rarchie enfant parent Exemple 2 etoile coccinelle xscale 5 L exemple ci dessus cible la propri t xscale du symbole clip d animation coccinelle lui m me plac dans le symbole clip d animation etoile plac sur le sc nario principal Il est possible de cibler les sc narios imbriqu s de deux mani res diff rentes Pour les objets reli s on parle d alias _root qui pointe vers le plus bas des objets c est dire vers l objet dont le niveau hi rarchique est le plus haut _parent qui pointe vers l objet pr c dent Deux m thodes sont encore possibles pour indiquer le chemin vers un niveau hi rarchique sup rieur selon que l on travaille en mode absolu ou relatif le mode absolu Ce mode prend comme r f rence la racine du fichier c est dire le sc nario principal et prend la notation _root le mode relatif En mode relatif le chemin d o est cibl l objet est primordial Chaque chemin est d fini en partant de celui ci Le sc nario prend la notation this Lorsqu il s agit de hi rarchie d animations on utilise la syntaxe
43. StartDrag Des param tres doivent tre pr cis s dans cette m thode Examinons ces param tres lt this signifie que c est de ce clip l qu il s agit C est un mot cl qui permet de faire r f rence un objet ou une occurrence de clip lt true Une valeur bool enne sp cifiant si le clip accroch est verrouill au centre de la position de la souris true ou verrouill sur le point auquel l utilisateur a cliqu sur le clip false Ce param tre est facultatif Mouse hide cette m thode ne n cessite aucun param tre Elle a pour but de masquer le curseur dans une animation Le curseur tant visible par d faut 2 StartDrag cette action rend le clip cible d pla able pendant la dur e de l animation La cible tant bien entendu le clip dont nous parlons dans cet exemple 31 This mot r serv qui d signe l objet dont il est question dans l action Il s agit ici du clip qui est d plac par le curseur de la souris Ce mot fhis pourrait tre remplac par le nom de l occurrence du symbole clip qui est utilis Ce nom doit alors tre plac entre guillemets Monique Colinet CeFIS FUNDP Mai 2004 Page 48 Cr ation d animations interactives en Flash L interactivit lt les 4 valeurs suivantes sont les coordonn es des points qui d limitent le champ d action du clip gauche en haut droite en bas Il est conseill d utiliser les m mes valeurs que celles utili
44. _levelx Cette notation permet de r duire sensiblement la longueur de l criture des METRE NL EE STATE CT 1e scripts Encore faut il que l arborescence soit pr sente dans le travail de conception Exemple 3 Le bouton PlaneteBT est plac dans le clip PlaneteMC qui lui m me est plac dans le clip Carte Ce dernier est plac sur la premi re Image du sc nario principal Voici le script qui indique le nom de l occurrence du clip PlaneteMC dans la fen tre de texte dynamique dont la variable 4l Les objets sont empil s x tant le num ro du niveau de l animation 0 tant le premier niveau principal Monique Colinet CeFIS FUNDP Mai 2004 Page 55 Cr ation d animations interactives en Flash La hi rarchie dans les clips est aussi planete on rollOver _parent planete this name Cette m thode d criture des imbrications permet d utiliser un m me script car provenant d un m me bouton pour plusieurs occurrences d un m me symbole Voici une partie de l image de l explorateur permettant de comprendre cette imbrication Ep E PlaneteMiC E F Calquei image 1 3 PlaneteBT actions sur PlaneteBT on rollOwer _parent planete this _name t CG PlaneteBT E y Calquei el Haut ATTENTION Les actions plac es sur des clips imbriqu s sont enregistr es dans les symboles eux m mes Dans l exemple ci dessus l action sur le b
45. a complexit de l interactivit L interactivit peut aller du plus simple au plus complexe Cette interactivit est cr e gr ce au langage de programmation int gr du logiciel Ce langage de programmation s appelle ActionScript Il s agit de scripts d crivant les actions que le logiciel doit r aliser lors de l intervention de l utilisateur Il n est pas absolument n cessaire de conna tre toutes les commandes disponibles dans le langage ActionScript pour commencer ins rer de l interactivit dans une animation Ces actions peuvent encore tre d couvertes au fur et mesure des besoins L important est de ma triser les concepts de base avant d envisager tout contenu interactif Et le premier concept int grer est qu une action doit toujours tre affect e un l ment de l animation Comment le logiciel peut il interpr ter l interactivit La notion espace temps qui est pr sente en permanence dans la cr ation d une animation est aussi pr sente dans les actions Certaines de ces actions sont affect es sur les Images du sc nario et certaines actions sont affect es sur des objets de la sc ne Il existe en fait 3 l ments r actifs pouvant d tecter les comportements de l utilisateur un instant donn l v nement est le temps L action se lit lorsque la t te de lecture passe sur l Image o est plac e l action un objet r actif le symbole bouton qui d tecte le comporte
46. agrandissement d une image du sc nario C est donc la zone de travail par excellence C est aussi la feuille de papier en r alit l image sur laquelle on dessine on ins re du texte ou du son et qui sera vue lors de la lecture de l animation C est dans cette zone que se fera la majeure partie du travail de composition le sc nario tant r serv l organisation des informations ins r es dans la s quence que l on appelle aussi sc ne Le contenu visible de cette s quence peut tre variable suivant que le sc nario contient un ou plusieurs calques et que ceux ci sont visibles ou masqu s Il faut donc tre bien conscient que le travail que l on effectue sur la sc ne se fait en r alit sur une sorte de transparent et qu il est Monique Colinet CeFIS FUNDP Mai 2004 Page 5 Cr ation d animations interactives en Flash D couverte de l environnement possible de travailler sur plusieurs transparents d une m me image Il faut pour cela se situer avec pr cision dans le sc nario On voit d j que les deux environnements ne sont pas indissociables De plus les sc nes de travail doivent toujours tre positionn es sur des images cl s du sc nario sans quoi les modifications r alis es prendront cours d s l image cl pr c dente du m me calque Une manipulation pratique vous permettra de comprendre ce fonctionnement Les autres panneaux disponibles Le logiciel contient plus des fen tres volan
47. aucun param tre affect cette action e Syntaxe prevScene la t te de lecture va la s quence pr c dente et s arr te sur la premi re Image Il n y a aucun param tre affect cette action Une derni re action peut aussi tre plac e dans ce contexte Il s agit de charger un document depuis une adresse URL Syntaxe getURL url fen tre variable cette action permet de charger un document depuis une URL relative ou absolue dans une fen tre sp cifique ou suivant les propri t s que vous d terminez Ces propri t s sont facultatives Tableau synth se de la syntaxe sur une Image sur un bouton sur un clip ACTION on Ev nement souris onClipEvent Ev nement de l animation ACTION Les diff rents v nements possibles sur la souris et sur l animation peuvent tre consult s partir du dictionnaire ActionScript pr sent dans l aide du logiciel ou partir du panneau R f rence Des interactivit s complexes Outre les interactivit s de navigation de base qui viennent d tre envisag es Flash permet des interactions beaucoup plus complexes L imagination de chacun peut tester les possibilit s du logiciel mais certaines sont beaucoup plus courantes que d autres Nous allons en envisager quelques unes parmi les plus utilis es Pour comprendre le fonctionnement de ces interactivit s il faudra galement consulter les notes sur l ActionScript sans lequel rien
48. cette bo te que viendront se placer les l ments graphiques un dessin vectoriel une image bitmap une vid o ou non graphiques un son une action un commentaire que l on d pose sur la sc ne D s le moment o un l ment est plac sur cette Image cl vide cette derni re se transforme en Image cl sous entendu non vide On peut d j se rendre compte de la corr lation qui existe entre l Image cl du sc nario et la sc ne Il faut tout moment pouvoir observer les deux car lorsqu on ins re un objet non graphique un son ou une action sur la sc ne on peut quand m me le visualiser sur l Image du sc nario Un troisi me type d Image est l Image virtuelle Cette Image n est pas une bo te Elle ne contient qu une duplication du contenu de l image pr c dente Une Image virtuelle est un prolongement visuel d une Image cl Ces Images virtuelles permettent donc de voir un l ment plus longtemps Elles remplacent avantageusement gain de poids des Images cl s successives ne comportant aucune modification de graphie En bref si l on veut voir longtemps un objet il faut ins rer autant d Images virtuelles que n cessaire Il est impossible d ins rer un l ment dans ce type d image Tout l ment ins r sur ce type d Image le sera automatiquement dans l Image cl pr c dente Monique Colinet CeFIS FUNDP Mai 2004 Page 14 Cr ation d animations interactives en Flash
49. ci a atteint sa position finale Cette position devant tre d termin e par le concepteur bien entendu Dans une interpolation de mouvement l action est simple l insertion d une action stop sur la derni re Image cl et le probl me est r gl En effet la t te de lecture s arr te au lieu de continuer la lecture en boucle Qu en est il dans un mouvement cr par un script Il faut pr ciser dans le script que le logiciel doit arr ter d ins rer des Images sur lesquelles il placera chaque fois le clip Et cela lorsque la position du clip aura atteint la limite de la fen tre du lecteur Flash par exemple Il y aura donc deux tapes dans le script e tester la position du clip dans la fen tre et si cette position est correcte e ajouter une Image cl et ins rer le clip dans cette nouvelle Image Script onClipEvent load position onClipEvent enterFrame _x 4 position if _x gt 550 position 0 Observations e position estun drapeau permettant d effectuer un test chaque insertion d image La valeur 1 est vraie tandis que la valeur 0 est fausse e la condition est test e apr s chaque insertion d image Et si on veut que l objet ait un mouvement de va et vient il faudra encore compl ter ce script pour pr ciser que lorsque l extr mit est atteinte le mouvement du clip est invers C est dans ce dernier cas que l on constate qu
50. d animation trois m thodes sont mises disposition le mode Normal Ce mode permet de construire les scripts en s lectionnant les outils dans la bo te outils Actions Les actions les fonctions y sont pr d finies Il reste au concepteur compl ter les param tres de chacune de ces actions fonctions Ce mode peut tre tr s avantageux pour les d butants mais ne permet pas toujours d en comprendre le fonctionnement exact Actions Image el Actions pour l image 1du calque Calque 1 Ja 5 E Actions E Contr le de l animation S Atteindre etlire Atteindre et arr ter gto s quence es quence courante z on Jupe Num ro d image lt j pa nage sto 5 nn nr c T 2 ZE EIRE vo a MNavigateurir seau goto ndelay a Contr le sur les clips EJ Variables Conditionstboucles 2 Impression ET Fonctions d finies par l utilisat EJ Actions diverses Op rateurs Ell Fonctions Ligne 1 goto ndPlay 1 le mode Expert Le mode Expert n cessite que le concepteur saisisse par l interm diaire du panneau Actions et dans la fen tre r serv e cet effet directement l enti ret du code ActionScript Les diff rentes options de cette fen tre sont les m mes que pour le mode Normal 5 Un script est un morceau de texte contenant les instructions d un langage de programmation C est donc un programme dont le but est de r aliser une action calculer a
51. d identifier les points qui correspondent dans les formes de d part et de fin Ces rep res seront de couleur jaune dans l Image cl de d but de couleur verte dans l Image cl de fin et de couleur rouge s ils ne se trouvent pas sur une courbe Il est remarquer que les rep res de formes fonctionnent mieux s ils sont plac s en commen ant par le point le plus en haut gauche et en continuant le placement dans le sens horlogique Monique Colinet CeFIS FUNDP Mai 2004 Page 20 Cr ation d animations interactives en Flash L animation Les animations complexes Le travail du concepteur ne se limite pas la cr ation d animations simples telles que celles d crites ci dessus Si l on veut pr senter un travail un peu plus sophistiqu il va falloir r fl chir aux proc dures mettre en place Il peut s agir de combinaisons d animations simples Et l les possibilit s du logiciel sont nombreuses On peut simplement travailler avec l utilisation de calques diff rents ou de s quences diff rentes Mais il peut aussi s agir d utiliser des symboles de types diff rents Le plus courant pour cr er une animation dans une animation sera le clip Toujours sur un seul calque Premier exemple la d composition d une animation en plusieurs animations Une animation peut devenir un peu plus complexe lorsqu elle est d compos e en plusieurs animations simples Pensez au va et vient d un pendule Lors de la c
52. dant assez limit dans ses capacit s Il faudra par la suite combiner ces notions avec d autres pour largir les possibilit s offertes par le langage Le but de cet exemple est de colorier une forme plac e sur la sc ne en s lectionnant des boutons de couleurs diff rentes Les tapes Il faut d abord cr er un clip contenant autant d Images que l on veut de couleurs diff rentes de coloriage La premi re Image contiendra la forme de couleur blanche ou incolore Les autres Images contiendront la m me forme mais avec d autres couleurs rouge bleu vert jaune Pour viter que ce clip ne s ex cute ind finiment sur la sc ne il faut placer une action sur la premi re Image stop Placer ensuite ce clip sur la sc ne L occurrence de ce clip se nommera dessin Monique Colinet CeFIS FUNDP Mai 2004 Page 50 Cr ation d animations interactives en Flash L interactivit Cr er ensuite autant de boutons de la m me forme et de la m me grandeur pour une question d esth tique uniquement ayant chacun les couleurs de la forme dessin e dans le clip Sur chacun de ces boutons il faut maintenant crire un petit script qui donnera la couleur du bouton la forme du clip Il ne s agit pas dans ce cas de pr lever le code de couleur du bouton et le transf rer la forme mais simplement de lire l Image du clip qui correspond la m me couleur que celle du dit bouton Script on press dessi
53. de modifier une partie de la formule et non pas une partie des pixels Un autre avantage de ce format est le poids des fichiers qu il g n re Un carr rep r par la coordonn e de ses 4 sommets p sera toujours le m me poids quelle que soit sa dimension l image bitmap d un trait est faite d un ensemble de pixels 1 re ligne point blanc point blanc point blanc point noir point blanc point blanc 2 me ligne point blanc point blanc point blanc point noir point blanc point blanc Monique Colinet CeFIS FUNDP Mai 2004 Page 3 Cr ation d animations interactives en Flash Introduction 3 me ligne point blanc point blanc point blanc point noir point blanc point blanc etc pour chaque ligne L image vectorielle est par contre un ensemble de fonctions math matiques on donne les coordonn es de d part d un point on fait tracer le trait avec la longueur a avec une paisseur de trait b avec une couleur c suivant un angle d Donc si on agrandi l image bitmap la taille du fichier sera elle aussi agrandie tandis qu une image vectorielle agrandie ne change pas de taille seul un param tre sera modifi dans ce cas le param tre a D autre part une image vectorielle agrandie restera aussi nette que l originale tandis qu une image bitmap agrandie pr sentera une pixelisation Un exemple concret Trait taille normale Trait grossi 10 fois Trait taille
54. e cela vite de devoir garder de la souris sur la biblioth que ouverte en permanence un symbole CTRL Entr e pour lire l animation l aide du lecteur Flash et donc cr ation du fichier SWF CTRL F8 pour cr er un nouveau symbole CTRL G pour grouper plusieurs formes CTRL MAJ G pour dissocier un groupe de plusieurs formes pour lire l animation dans la fen tre de travail pour avoir acc s au dictionnaire ActionScript pour ouvrir ou fermer le panneau Biblioth que pour ins rer une Image dans le sc nario CRE pour ins rer une Image cl dans le sc nario F9 pour ouvrir et fermer le panneau Actions Monique Colinet CeFIS FUNDP 2003 2004 Page 75 Cr ation d animations interactives en Flash Bibliographie Bibliographie Abstrakt Graphics Flash MX Micro Application Cookbook Paris Novembre 2002 AUBRY C ActionScript programmer sous Flash 5 Nantes Cedex 1 Editions ENI 2001 BHANGAL S ActionScript Optimisez vos sites Flash Dunod Paris 2001 BLATZ C Flash MX ActionScript Micro Application R f rence Paris Ao t 2002 CHARTON E ActionScript pour Flash MX Campus Press Paris 2002 DECLERCR S Flash sur Flash 4 Comp tence Micro Hors s rie Fontainebleau Mai 2000 HOUSTE F Guide Microapp Macromedia Flash MX Micro Application Paris 2002 JAUNEAU M FlashMX pour d butants Comp tence Micro Exp rience Ecuelles Juillet 2003 LOTT J ActionScript en action O Rei
55. e cl C est donc la transformation d une Forme en une autre Forme On appelle g n ralement ce type de transformation morphing Il est bien vident que la Forme de d part peut aussi servir de base de dessin la Forme d arriv e Certaines options peuvent encore tre d termin es pour affiner les effets d animation acc l ration positive ou n gative qui montre une modification plus importante au d but ou la fin de l animation le m lange distributif pour des Formes arrondies ou angulaire pour des Formes plus anguleuses les rep res de Formes permettent de guider et d orienter les transformations Ce param tre est surtout utilis pour les Formes complexes Les Formes qui subissent une interpolation de forme ne doivent pas tre group es ni transform es en symboles Cela n aurait d ailleurs pas de sens Lors de certaines interpolations de formes plus complexes la transformation ne se fait pas toujours de mani re harmonieuse Dans ces cas compliqu s le logiciel fournit la possibilit de Monique Colinet CeFIS FUNDP Mai 2004 Page 19 Cr ation d animations interactives en Flash L animation placer des rep res de formes qui permettront de contr ler les modifications Ces rep res identifieront les points qui doivent correspondre dans les Formes de d but et de fin Citons par exemples la transformation d une forme pleine en une forme creuse ou encore les yeux d une m me figu
56. e du sc nario en est la seconde Une fois que l occurrence du clip a t renomm e on peut lui ajouter une action Script 1 startDrag nom de l occurrence du clip true Il n y a plus qu une seule ligne dans cette action En effet l action n est plus plac e sur l occurrence du clip mais sur un calque r serv sp cifique L action est donc plac e sur une Image mais en faisant r f rence dans les param tres l occurrence du clip Cette technique est possible quand il n y a qu une seule action placer sur un objet Dans le cas contraire il faut faire appel au gestionnaire d v nements afin que toutes les actions soient regroup es Les remarques envisag es dans l exemple pr c dent restent d application Cinqui me exemple d placer un objet en utilisant le curseur Cet exemple reprend les instructions de l exemple pr c dent mais sont compl t es puisque le 3 Les dimensions en pixels de la fen tre de sortie de l animation Monique Colinet CeFIS FUNDP Mai 2004 Page 49 Cr ation d animations interactives en Flash L interactivit rel chement du bouton gauche de la souris doit stopper le d placement de l objet Il ne s agit donc plus d un clip associ au mouvement de la souris mais d un bouton puisqu il nous faut agir sur la s lection de l objet par un clic sur le bouton gauche de la souris et la d s lection par un rel chement de ce m
57. e textes par l interm diaire d un diteur de textes est quand m me plus confortable qu une petite fen tre dans une animation Flash Mais ce sera chacun de juger Exemple 2 Utilisation du composant ScrollPane Ce composant permet d afficher dans une fen tre dot e de barres de d filement horizontale et verticale un clip dont les dimensions sont sup rieures celles de la fen tre Cela permet de ne pas trop encombrer l cran La m thode est assez simple Un autre param tre int ressant pour ce composant est dragContent Si ce param tre est true l utilisateur pourra utiliser dans cette fen tre le cliquer glisser de la souris pour d placer le clip afin de le visualiser compl tement Un clic droit sur le clip se trouvant dans la biblioth que permet l acc s aux propri t s de ce clip Il sera peut tre n cessaire d afficher les propri t s avanc es pour trouver les options de liaison 6 Par d faut ce param tre est false Monique Colinet CeFIS FUNDP Mai 2004 Page 61 La cr ation d animations interactives en Flash La publication La publication Bien qu tant encore tr s loin d avoir envisag toutes les possibilit s de l utilisation de Flash car ce programme n a sans doute de limites que celles de l imagination du concepteur nous pouvons d j envisager la publication de nos premi res pr sentations Cette publication peut se faire sous plusieurs formats d
58. e un fichier lisible par le lecteur QuickTime Il est galement possible d exporter l animation en choisissant le format MOV pour cr er ce type de fichier La projection Windows La publication sous cette forme est diff rente des pr c dentes En utilisant cette m thode vous pouvez rendre votre animation tout fait autonome L animation pourra tre enregistr e sur un c d rom par exemple et ne n cessitera pas la pr sence du lecteur Flash En fait en cr ant une projection Windows le fichier incorpore le lecteur lui m me et c est un fichier ex cutable qui est cr La taille du fichier sera cependant sensiblement augment e Il faut compter environ 770 ko suppl mentaire la taille de base du fichier SWF 7 Il est galement possible de cr er une projection Macintosh Monique Colinet CeFIS FUNDP Mai 2004 Page 63 Cr ation d animations interactives en Flash Utilisation de l objet MovieClip Utilisation de l objet MovieClip Les gestionnaires d v nements Clips onClipEvent charger load c est l v nement par d faut Les instructions conditionn es cet v nement s ex cutent une seule fois au chargement du clip d animation 7 entrer Image enterFrame les instructions s ex cutent toutes les Images la cadence d finie pour l ensemble de l animation vider unload les instructions s ex cutent lorsque le clip est d charg par l action unloadMovie o
59. ermettra de faire la distinction Il s agit de la position d une occurrence du symbole clip qui a t renomm e en monClip Sa position est d termin e par la propri t x qui d termine sa position sur laxe des abscisses Certaines propri t s peuvent tre des constantes Par exemple l une des propri t s de l objet Math est PI Les propri t s ne poss dent jamais de parenth ses Elles ne s ex cutent pas mais se manipulent Dans beaucoup de cas il est possible de r cup rer la valeur d une propri t ou de la d finir Dans le deuxi me cas le comportement du clip est modifi pour tre arr t La fonction stop 14 Argument nombre ou cha ne de caract res qui suit une commande et qui lui indique comment elle doit travailler ou sur quoi elle doit s appliquer Il peut aussi s agir d une variable ind pendante associ e une proc dure ou une fonction Grand dictionnaire terminologique 15 Ces constantes sont toujours crites en majuscules Monique Colinet CeFIS FUNDP Mai 2004 Page 33 Cr ation d animations interactives en Flash ActionScript pourrait aussi tre utilis e comme action sur une Image Les fonctions actions et m thodes se terminent par des parenth ses qui contiennent ou non des param tres et qui permettent leur ex cution Les principales instructions du langage Ces instructions peuvent tre regroup es en 4 grandes familles Les objets Ce sont
60. et la t te de lecture de passer d une Image une autre Image non cons cutive ou une Image pr cise se trouvant dans une autre s quence Cette action est surtout utilis e conjointement au clic d un bouton Plusieurs syntaxes sont possibles e Syntaxe gotoAndPlay s quence image envoie la t te de lecture l image sp cifi e d une s quence et lit partir de cette image Si aucune s quence n est sp cifi e il s agit de la s quence courante Le nom de la s quence doit tre crit entre guillemets Le num ro de l image peut tre remplac par son nom d tiquette entre guillemets aussi e Syntaxe gotoAndStop s quence image envoie la t te de lecture l image sp cifi e d une s quence et l arr te e Syntaxe nextFrame envoie la t te de lecture l image suivante et l arr te Il n y a pas de param tre pour cette action 1 Surtout si on ins re une Image dans le sc nario apr s avoir plac cette tiquette Monique Colinet CeFIS FUNDP Mai 2004 Page 39 Cr ation d animations interactives en Flash L interactivit e Syntaxe PrevFrame envoie la t te de lecture l image pr c dente et l arr te Cette action ainsi que la pr c dente sont surtout utilis e dans les actions sur les boutons et sur les clips e Syntaxe nextScene la t te de lecture va la s quence suivante et s arr te sur la premi re Image de cette s quence Il n y a
61. eut utiliser le langage de programmation du logiciel pour mettre en pratique Il sera certainement n cessaire de r ajuster plusieurs fois ces commandes pour obtenir un r sultat optimal Des tests pourront tre r alis s tout moment lors de la construction d une s quence ou d une animation Les r gles de base de l interactivit Lors de la cr ation d une interactivit il faut tenir compte e de l v nement qui va entra ner une modification de la lecture de l animation Ces 17 Storyboard carnet de bord d taillant les diff rentes tapes de l animation Monique Colinet CeFIS FUNDP Mai 2004 Page 36 Cr ation d animations interactives en Flash L interactivit v nements d pendent du comportement de l utilisateur face l animation mais plus sp cifiquement des objets qui vont se pr senter lui et des manipulations qu il va r aliser Ces v nements peuvent tre la position du curseur sur la sc ne le comportement de la souris sur certains objets l utilisation des touches du clavier le temps qui passe e des objets de l animation pouvant d tecter ces v nements Il existe trois l ments r actifs sur lesquels le concepteur peut agir l Image le bouton et le clip e dela cible c est dire l effet qui sera produit lors de l activation de l v nement Ces diff rentes tapes de la cr ation d une interactivit vont tre d taill es ci dessous L
62. fficher un texte lire une s quence Monique Colinet CeFIS FUNDP Mai 2004 Page 30 Cr ation d animations interactives en Flash E Actions 3 Contr le de l animation goto ndPlay goto ndStop nextFrame nextScene on play preuFrame preuScene stop stopAllSounds Navigateur r seau Contr le sur les clips Variables Conditions boucles goto ndPlay 1 ActionScript v Actions Image LA e Actions pour l image 1du calque Calque 1 in Impression Ligne 2 de 2 Col 1 par un diteur externe Il est aussi possible d crire les scripts l aide d un diteur de texte simple Les fichiers doivent alors tre enregistr s avec l extension as pour pouvoir ensuite tre int gr s dans le fichier FLA Ils sont import s dans la fen tre d action de Flash par l interm diaire du menu d roulant du panneau Actions dans le coin sup rieur droit du panneau Pour une meilleure organisation de votre travail et aussi par facilit il est conseill de cr er un dossier include dans le dossier configuration de Flash et d enregistrer vos fichiers as dans ce dossier D autres fen tres sont galement associ es Monique Colinet CeFIS FUNDP Mai 2004 Page 31 Mode Normal Ctr Maj fl v Mode Expert CtrHMaj E Atteindre la ligne Ctr G Rechercher Ctrl F Rechercher a nouveau F3 Remplacer Ctri H V rifier la syntaxe Ctr
63. finie Au moment de la lecture du texte il faudra utiliser cet ascenseur pour pouvoir en visualiser le contenu Monique Colinet CeFIS FUNDP Mai 2004 Page 59 Cr ation d animations interactives en Flash La hi rarchie dans les clips Si vous ne souhaitez pas devoir encoder tout le texte directement dans cette zone il est aussi possible de l enregistrer dans un fichier s par et de faire appel ce texte par l interm diaire d un script Les diff rentes tapes de la m thode pr c dente sont identiques sauf l avant derni re Au lieu d ins rer le texte dans la zone pr vue il faut sur l Image contenant ces objets crire le script suivant Script loadText new LoadVars loadText load sujet txt loadText onLoad function defile text this sujettext hs Quelques commentaires sont n cessaires e re ligne du script il s agit de la cr ation d un nouvel objet de la classe Load Vars Cette classe permet de faire appel des l ments externes Cet objet est surtout utilis pour ins rer des pages Web e 2 me ligne du script c est maintenant que le lecteur Flash charge le fichier texte nomm sujet txf On observe que ce fichier doit tre un texte brut format txt Mais il pourrait galement s agir d une adresse absolue sur Internet e 3 me ligne du script le gestionnaire d v nement LoadVars onLoad parfois appel fonction de rappel e
64. i T Afficher les conseils de code Ctr Spacebar Format automatique CtrMa F Options de format automatique Importer d un fichier Ctrl Mai 1 Exporter comme fichier Le Ctr Maj x Imprimer v Afficher les num ros de ligne CtrHMaj L Afficher les touches de raccourci Echap Pr f rences Aide Agrandir le panneau Fermer le panneau Cr ation d animations interactives en Flash ActionScript ActionScript la fen tre de Sortie qui permet lors du test de l animation de lister les erreurs de syntaxe la fen tre de R f rence qui donne la description de toutes les actions fonctions propri t s disponibles dans le langage la fen tre du D bogueur qui permet de rechercher les erreurs de script dans une animation en cours d ex cution dans le lecteur Flash Ce d bogueur permet d ins rer des points d arr t dans le code ActionScript Ceux ci permettront d arr ter l animation et de consulter le code ligne par ligne La seconde tape sera le retour au script proprement dit et sa correction Codes de couleur des scripts Afin de faciliter la t che du concepteur lors de la cr ation de scripts et surtout lors de la recherche d erreurs l int rieur de ces scripts Flash a pr vu des signes visuels pour l aider rep rer ses erreurs Flash utilise des codes de couleur pour montrer le d roulement et la structure du script que le concepteur est en train de cr er noir pour la structure g
65. ilisant le mode Expert et dans ce cas il faudra que le concepteur encode les lignes de programmation A ce panneau d actions on peut associer d autres panneaux comme le panneau de R f rence qui donne un lexique des diff rents termes du langage ActionScript ou encore le D bogueur qui permet de tester les actions ins r es dans l animation Les biblioth ques La biblioth que sert stocker certains l ments de l animation notamment des symboles des l ments multim dia Elle permet la r utilisation d un m me l ment sur une ou plusieurs sc nes L int gralit de cet objet ne sera enregistr qu une seule fois Pour toutes les copies de cet l ment ou objet seules les modifications par rapport l original seront enregistr es Le terme g n rique utilis dans ce logiciel pour les copies d objets est occurrence de symboles Chaque fichier Flash poss de sa propre et unique biblioth que Elle est accessible lorsque le fichier est ouvert et se ferme lors de la fermeture d un fichier Elle reste associ e au fichier en cas de transfert L explorateur d animations La puissance de l outil permet une animation constitu e de plusieurs sc narios contenant eux m mes des animations partir d un sc nario principal il est possible d imbriquer d autres sc narios contenant eux aussi des animations A partir de l l animation peut se complexifier avec des imbrications sur plusieurs couches et
66. imension de l interactivit Cette interactivit peut se faire l int rieur m me du produit qui est alors utilis comme un logiciel auteur de cr ation multim dia Gr ce ses fonctions avanc es de programmation l interactivit peut galement se faire en connexion avec un serveur de bases de donn es MySOL par l interm diaire de l interface PHP Avec ce programme 1l est donc possible de faire dans le plus simple mais aussi dans le plus complexe Avant de commencer Puisqu il est question d animations vectorielles il est peut tre bon de rappeler ce que sont les images vectorielles l inverse des images bitmap celles que l on rencontre le plus souvent sur le Web Qu est ce qu une image vectorielle L image vectorielle est une repr sentation conceptuelle de formes calcul es par des formules math matiques exemple un carr n est pas d termin par des pixels mais par une formule math matique qui d termine la longueur d un c t son emplacement sa couleur son orientation Le format vectoriel ne convient pas pour les images complexes comme des photos par exemple mais est surtout utilis pour des repr sentations sch matiques DAO 3D Il peut se montrer tr s simple d utilisation pour les modifications des images comme par exemple pour changer une partie de la couleur de l objet dessin ou encore les dimensions de cet objet Dans chacun de ces deux exemples il s agira
67. ire sans poss der le programme de cr ation il faut publier ces fichiers Plusieurs formats sont possibles le format SWF ShockWave Flash est le format obtenu lors de la publication du fichier FLA Il sera lisible partir du programme FlashPlayer Il est galement possible de lire ces fichiers SWF gr ce au lecteur impl ment il peut s agir d un plugin ou d un Contr le ActiveX dans les navigateurs Le fichier SWF doit alors tre int gr dans une page HTML le format EXE en publiant le fichier FLA sous ce format on rend le fichier ex cutable ce qui permet de cr er des applications offline ne n cessitant aucun autre programme pour les lire La taille de ce fichier est consid rablement augment e tant donn que le lecteur Flash IShockWave est une technologie d velopp e par Macromedia Inc destin e permettre l insertion d objets multim dia dans des pages Web Monique Colinet CeFIS FUNDP Mai 2004 Page 8 Cr ation d animations interactives en Flash D couverte de l environnement se trouve int gr dans le fichier e le format HTML permettra de contr ler la lecture du fichier SWF son affichage et son aspect dans une page HTML e les formats GIF JPEG et PNG permettent d exporter les Images de l animation dans ces diff rents formats Lors de la publication d un fichier FLA dans les diff rents formats d crits ci dessus ces publications s enregistrent par d faut dans le m me dossier
68. it va par contre permettre l utilisateur de diriger la manoeuvre Soit de lire tout ou seulement une partie du produit un peu comme on peut lire un chapitre d un film sur un DVD La partie non interactive du produit est alors lue de mani re s quentielle Une lecture lin aire ou non va d pendre des choix du lecteur de l utilisateur Dans ce cas cette lecture s apparente plus de la navigation sur nternet Enfin le produit peut tre compl tement interactif alors le lecteur devient acteur de son parcours Cette fois les animations telles qu elles sont envisag es jusqu ici ne sont plus que des pr textes mais d autres animations se mettent en place Les animations deviennent des actions entre le produit et l utilisateur La planification de l interactivit Avant de commencer cr er des animations interactives il est indispensable de formuler les objectifs que vous voulez atteindre Cette tape est certainement aussi importante si pas plus que l laboration d un storyboard Il faut tre conscient de ce que l utilisateur va devoir faire pour utiliser correctement le produit Citons quelques exemples e les utilisateurs devront entrer leur nom qui sera utilis dans les messages e les diff rentes occurrences d un bouton vont envoyer vers des parties diff rentes de l animation e une des s quences pr sente un formulaire compl ter D s que les actions sont d finies on p
69. jet dans lequel il est imbriqu e un d placement vertical s effectuerait avec la propri t _y La combinaison des deux propri t s donnerait un d placement oblique e __le d placement du clip s effectue par pas de 4 pixels dans le sens horizontal de la gauche vers la droite Le point 0 0 tant situ dans le coin sup rieur gauche de la fen tre du lecteur Flash e action est d clench e la cadence de l animation que vous avez d finie louverture du fichier L ex cution de cette animation n a pas de limite En effet l objet clip va d passer les limites de la fen tre de lecture de l animation et un contr le sur cet objet n est plus possible contrairement l animation cr e par interpolation de mouvement Un second cas 7 On peut d j penser que le poids du fichier risque d tre plus petit tant donn que l on ins re aucune autre Image cl dans le sc nario mais simplement quelques instructions de type texte L int r t sera sans doute plus grand lorsque le mouvement sera vari 3 C est du lecteur Flash Player dont il s agit puisque c est au moment de la lecture du script que le travail se fera Consultez les notes concernant l utilisation de l objet MovieClip en fin de document Monique Colinet CeFIS FUNDP Mai 2004 Page 42 Cr ation d animations interactives en Flash L interactivit Il serait int ressant d arr ter l animation du clip d s que celui
70. lly Paris Novembre 2003 MONNIER G Flash MX Animation Interactivit ActionScript Dunod Paris 2002 MOOCK C ActionScript pour Flash MX La r f rence 2e dition O Re lly Paris Juillet 2003 Utilisation de Flash MX document lectronique accompagnant le logiciel Macromedia Inc Etats Unis 2002 VANDEPUT E Programmer avec des objets une d couverte de la POO travers le langage Java http www det fundp ac be cefis publications etienne po02002 pdf WARBERSSON K Animations web avec Flash 5 Comp tence Micro Hors s rie Ecuelles Novembre 2001 WOLTER S amp NL S Flash MX ActionScript et Animations Micro Application R f rence Paris Novembre 2002 WOODS P S MX Flash First Interactive Paris 2002 Monique Colinet CeFIS FUNDP 2003 2004 Page 76
71. me bouton de la souris L objet qui sera d plac aura le statut de clip La premi re tape est donc de construire ce clip Il servira dans un deuxi me temps d objet placer sur l Image du bouton Puisqu il s agit bien d un bouton que l on va manipuler Lors de la cr ation de ce bouton les diff rents tats ne doivent pas tre n cessairement tous compl t s Seul l tat Haut peut contenir le clip cr moins que vous ne d cidiez de modifier la couleur de l objet s lectionn lorsqu il est accroch au curseur de la souris La derni re tape sera la r daction du script associ au bouton Sript on press startDrag this on release stopDrag Les param tres de l action startDrag peuvent tre compl t s si l on veut que l objet ne puisse pas d passer les limites d un cadre r serv par exemple En r p tant la m me manipulation sur plusieurs clips on peut d j cr er un puzzle o les pi ces de d part serait positionn e sur le m me calque Chaque partie du puzzle serait un bouton diff rent Pour que l utilisateur r alise le travail de reconstitution la perfection il faudrait aussi traiter les coordonn es des points d alignement des diff rents morceaux de ce puzzle Sixi me exemple un exemple de coloriage simple Cet exemple permet de comprendre l utilisation des classes objets conjointement avec les clips et les boutons Il est cepen
72. ment de la souris un objet interactif le symbole clip d animation qui d tecte les comportements et les v nements sur l animation actions sur objets actions d image notion espace temps Monique Colinet CeFIS FUNDP Mai 2004 Page 37 Cr ation d animations interactives en Flash L interactivit question qu est ce qui d clenche l action Quand se passe l action r ponse un bouton un clip d animation un moment donn D taillons un peu plus ces diff rents types d action Afin de mieux les comprendre il peut tre utile galement de consulter les notes se trouvant dans le chapitre pr c dent qui traite plus sp cifiquement d ActionScript Les actions de base de navigation Les actions de base qui sont possibles permettent de contr ler la t te de lecture dans le sc nario et d ventuellement charger une page web dans une fen tre de navigateur Les actions sur les Images G n ralement ces actions sont toutes regroup es sur un m me calque plac au dessus dans le sc nario et nomm Actions Ces param tres ne sont pas obligatoires mais permettent une plus grande clart et une meilleure lisibilit Mais il est galement possible de placer une action sur une Image cl pr cise d une animation Ce sera plus particuli rement le cas lorsqu on travaille avec plusieurs s quences dans une animation et lorsque l utilisateur passe d une s quence l autre suivant les v
73. ment simultan ment Le travail cr pour une seule interpolation de mouvement peut se r p ter ais ment sur plusieurs calques Cette superposition de calques permet des mouvements d objets identiques ou diff rents dans des directions identiques ou diff rentes et des vitesses identiques ou diff rentes Les combinaisons sont donc multiples Qu il s agisse d interpolation de mouvement ou de forme Cette association de plusieurs calques permet de garder un arri re plan commun pour toutes les images Vous aurez peut tre d j constat que d s qu une interpolation de mouvement est plac e sur un calque il devient impossible de placer d autres objets formes sur ce m me calque Donc si l on veut que deux objets se d placent simultan ment dans le temps il est obligatoire de les placer sur deux calques diff rents La complexit peut aussi augmenter si on donne chaque mouvement un guide Pensez dans ce cas qu il faut aussi respecter les proportions de un cercle contenant une croix lorsqu une occurrence de ce symbole est plac sur la sc ne La position de cette croix peut tout moment tre modifi e l int rieur du symbole 10 Si la trajectoire est une courbe ferm e il faudra en gommer une petite partie pour avoir un point de d part et un point d arriv e Monique Colinet CeFIS FUNDP Mai 2004 Page 22 Cr ation d animations interactives en Flash L animation chaque objet pour que l
74. mme sur une vitre L ActionScript sur le clip goutte onClipEvent load _x random 600 _y random 350 50 coef random 100 _xscale coef _yscale coef _alpha 100 coef Monique Colinet CeFIS FUNDP 2003 2004 Page 68 Cr ation d animations interactives en Flash Quelques exemples suppl mentaires onClipEvent enterFrame _xscale 3 _yscale 3 _alpha 3 if _alpha lt 0 _x random 600 _y random 350 50 coef random 100 _xscale coef _yscale coef _alpha 100 coef et le script sur la premi re Image de l animation for 1 1 i1 lt 150 i duplicateMovieClip goutte goutte 1 i eval goutte 1 x random 600 eval goutte 1 y random 350 50 3 Macromedia Flash Player 6 AmMenage Pluie qui tombe Monique Colinet CeFIS FUNDP 2003 2004 Page 69 Cr ation d animations interactives en Flash Quelques exemples suppl mentaires Exemple 3 d formation d objets Il s agit dans ce cas de cr er une poign e sur un objet Cette poign e permettra de redimensionner l objet dans la fen tre Flash L analyse du probl me nous apprend que cette poign e devra avoir le statut de bouton Ce bouton pour pouvoir tre d plac sur la sc ne doit avoir le statut de clip Ce clip devant permettre de d former une image ou un objet quelconque doit quant lui tre associ cette image ou
75. n le lecteur Flash Player lira les s quences les unes la suite des autres dans l ordre d termin par la cr ation ou par le concepteur lui m me En effet il est possible tout moment de modifier l ordre de lecture des s quences C est par l interm diaire du panneau S quence qu il est possible de modifier cet ordre Rien ne vous emp che donc de cr er des s quences dans le d sordre puis les replacer chronologiquement par la suite Des symboles particuliers Le clip Le symbole clip est une animation part enti re Pour construire un clip il faut d abord le d cider avant de commencer C est donc de cette mani re qu il faut commencer la cr ation d une animation La majorit des clips seront construits en priorit Cela n emp che pas le concepteur de cr er de nouveaux clips par la suite C est donc aussi avec ce type de symbole qu il faut envisager une animation d une animation Prenons comme exemple les roues d une voiture qui avance Il serait pr f rable que l on puisse voir le mouvement de rotation de ces roues Quelle proc dure mettre en place pour r aliser cette animation Il est vrai que l on peut prendre perdre du temps pour dessiner chacune des images en Monique Colinet CeFIS FUNDP Mai 2004 Page 25 Cr ation d animations interactives en Flash L animation modifiant la position de l objet voiture ainsi qu en modifiant le dessin de chacune des roues p
76. n gotoAndStop n On observe dans ce script que l action gotoAndStop est appliqu e l objet dessin et non pas une image du sc nario principal Il s agit dans ce cas de l utilisation de la hi rarchie des clips dans une animation Septi me exemple l utilisation des objets de type texte Les objets de type texte peuvent avoir 3 statuts diff rents texte statique texte dynamique et texte de saisie Les objets texte statique ne seront pas envisag s dans cette partie d ActionScript tant donn qu ils n entrent pas en jeu dans l interactivit Par contre les deux autres types d objets texte sont beaucoup utilis s dans les animations Flash interactives puisqu il s agit aussi d un moyen de communication entre l utilisateur et le programme que l on veut utiliser Les textes de saisie et les textes dynamiques seront e cr s sur la sc ne et resteront des zones vides e affect s d un nom d occurrence pour une plus grande lisibilit et e dot s d un nom de variable pour qu ils puissent tre trait s par le langage de programmation Pour manipuler ces textes il faudra donner les instructions par l interm diaire de boutons Prenons un exemple simple le comptage des lettres d un mot 3 Cet exercice peut galement tre r alis mais demande une connaissance un peu plus approfondie d ActionScript nest le num ro de l Image du clip qui correspond
77. ne sera possible Il faudra plus sp cifiquement comprendre les principes de base de la programmation orient e objet POO Il n est cependant pas n cessaire de conna tre tout le langage ActionScript pour d buter dans la cr ation de ces interactions La lecture du dictionnaire ActionScript dans l aide ou l ouverture de la fen tre Monique Colinet CeFIS FUNDP Mai 2004 Page 40 Cr ation d animations interactives en Flash L interactivit R f rence directement dans le logiciel sera souvent n cessaire pour trouver la bonne instruction et la bonne syntaxe N h sitez pas vous en servir Les exemples ci dessous permettront sans doute une meilleure compr hension du fonctionnement de cette interactivit Premier exemple les mouvements d un clip contr l s par un script Si les mouvements des objets clips ou graphiques peuvent tre d termin s sur une animation par une interpolation de mouvement il est galement possible de contr ler les mouvements d un clip par l interm diaire d un script Ce sera vous de choisir la m thode qui convient le mieux en fonction des besoins Il ne faut pas choisir la solution de facilit mais analyser les contraintes de l animation que vous voulez r aliser afin d obtenir un r sultat optimal et une taille de fichier minimale Et cela surtout si l animation est destin e tre diffus e sur Internet Ces mouvements peuvent tre d clench s automatiquement d
78. nstructeur La syntaxe est monObjet new Object o monObjet est le nom de ce nouvel objet new est l op rateur et Object est la fonction constructeur Cependant il n est pas n cessaire de cr er tous les objets que l on veut utiliser car il en existe d j On peut d ailleurs les classer en 3 cat gories diff rentes e les objets instanciables par l inspecteur des propri t s e les objets instanciables e les objets pr d finis Les fonctions constructeurs s crivent toujours avec une majuscule Monique Colinet CeFIS FUNDP Mai 2004 Page 57 Cr ation d animations interactives en Flash La hi rarchie dans les clips Ces objets sont repris dans le tableau ci dessous j Modes de cr ation Manipulation Instanciables par l inspecteur de Propri t s Button Sur la sc ne M thodes Propri t s Ev nements M thodes Propri t s Ev nements MovieClip Sur la sc ne createEmptyMovieClip duplicateMovieClip attachMovie TextField M thodes Propri t s Ev nements couteurs Instanciables Array new Array M thodes Propri t s Date new Date M thodes LoadVars new LoadVars M thodes Propri t s Ev nements Number M thodes Constantes Object new Object M thodes Propri t s String M thodes Propri t s Sound new Sound M thodes Propri t s Ev nements Sur la sc ne createTextField
79. nte Syntaxe stop L action stop arr te la t te de lecture sur l Image en cours sur le sc nario Les actions play et stop sont surtout utilis es en d but ou fin de s quence Des parenth ses sont plac es la fin des actions des fonctions et des m thodes Elles permettent de les ex cuter en leur attribuant des param tres ou arguments Des actions simples comme play et stop ne n cessitent pas de param tres Il est cependant n cessaire d crire les parenth ses mais elles restent vides Etiquette Avant de passer l action suivante il est int ressant maintenant de parler d tiquettes Les tiquettes sont des balises du temps Il est parfois pr f rable de faire r f rence un nom plut t qu un num ro d Image Cette tiquette sera ins r e par l interm diaire du panneau des Propri t s Elle sera valable pour tous les calques d un m me sc nario L tiquette est repr sent e par un petit drapeau rouge sur le sc nario Le nom sera visible si des Images virtuelles le suivent Pour une question de clart il est pr f rable d isoler les tiquettes sur un calque r serv cet effet On peut aussi constater que l utilisation de ces tiquettes facilite la lecture dans une animation contenant des actions faisant r f rence des Images dans d autres s quences Cela vite toute confusion Goto Cette action va permettre de lire l animation de mani re non lin aire Elle perm
80. our laisser appara tre leur mouvement de rotation Mais le travail est fastidieux En proc dant de mani re syst matique mais aussi pour r duire la taille du fichier une seconde m thode sera beaucoup plus efficace Il s agit de cr er un symbole de type clip repr sentant le mouvement d une roue Dans un deuxi me temps il faudra cr er la carrosserie de la voiture et y ajouter les roues de la voiture Le tout formera un symbole Il sera de pr f rence aussi de type clip C est ce dernier symbole qui sera utilis lors d une interpolation de mouvement On est maintenant au coeur de l animation L imbrication de clips est int ressante pour autant que l on ait organis son travail Sans quoi on risque de se trouver confront des situations desquelles il est assez difficile de se sortir Il est assez fastidieux de transformer une animation simple en clip car il faut recopier chacune des images de l animation dans le symbole Il est donc pr f rable pr voir le travail l avance Les clips peuvent aussi tre utilis pour cr er des masques La mise en oeuvre est cependant un peu plus complexe Le bouton Le bouton est un symbole tr s particulier qui peut tre utilis comme animation ou comme point de d part d une interactivit Nous le consid rerons dans ce chapitre comme le point de d part d une animation C est un symbole r actif Il transforme le curseur en main lors du survol de cet objet par le
81. outon est la m me quelle que soit la plan te plac e sur la sc ne Dans ces cas IL FAUT que les actions soient valables car les m mes pour toutes les occurrences de ce symbole L utilisation des actions des fonctions et des variables peut galement tre bas sur cette notation Point qui d coule de la POO Il s agit de la notion d h ritage pr sente dans ActionScript En effet dans la POO les classes peuvent changer entre elles des propri t s et des m thodes selon un ordre bien tabli Prenons un exemple Soit la classe v hicule qui serait une classe de moyens de transport qui contient des sous classes voiture camion v lo Chacune de ces sous classes pourrait elle m me contenir d autres sous classes Ces classes et ces sous classes poss dent des propri t s et des m thodes Superclasse v hicule Propri t s roues Monique Colinet CeFIS FUNDP Mai 2004 Page 56 Cr ation d animations interactives en Flash La hi rarchie dans les clips Sous classe v lo Propri t s selle pignon voiture Propri t s si ge Sous classe de v lo pignon Propri t s nombre de dents selle Propri t s couleur e La classe qui transmet des propri t s est une superclasse e la classe qui h rite d une superclasse est une sous classe e la classe qui h rite et qui transmet des propri t s est la fois superclasse et sous classe Exemple Si vous d finissez une fonction test dans un
82. outons ou de champs de texte Les clips sont des occurrences de la classe int gr e MovieClip Chaque occurrence d un clip contient toutes les propri t s et toutes les m thodes de la classe MovieClip Les boutons sont des occurrences de la classe int gr e Button En plus des classes qui existent dans ActionScript il est possible de cr er ses propres classes Pour d finir une classe il faut utiliser une fonction sp ciale appel e fonction constructeur Dans la POO les classes peuvent s changer entre elles des propri t s et des m thodes selon un ordre sp cifique appel h ritage Une classe qui h rite d une autre classe est appel e sous classe et une classe qui transmet une autre classe est appel e super classe Une classe peut tre la fois sous classe et super classe Ces notions vont tre d crites un peu plus en d tail dans les pages suivantes ActionScript ActionScript le langage de programmation propri taire de Flash permet d ajouter de l interaction dans une animation 12 Pour des informations sur la POO consultez les notes Programmer avec des objets une d couverte de la POO travers le langage Java d Etienne Vandeput Ce document est consultable l adresse http www det fundp ac be cefis publications etienne poo2002 pdf Monique Colinet CeFIS FUNDP Mai 2004 Page 29 Cr ation d animations interactives en Flash ActionScript Pour introduire ces scripts dans un fichier
83. para tre le contenu d un ou plusieurs calques situ s en dessous Ces calques peuvent contenir des objets statiques ou dynamiques Citons comme exemple le regard au travers d un trou de serrure Mais vous pouvez galement utiliser un masque de calque dynamique car un masque peut lui aussi tre anim L interpolation de mouvement permet le d placement de la zone de masque Dans ce cas on envisagera par exemple l effet de projecteur sur une sc ne statique Suivant la forme qu on place sur le masque de calque et l animation qu on lui applique on peut cr er des effets de projecteur de loupe pour donner l impression aux spectateurs qu ils Masque calque contenant une ou plusieurs formes statiques ou dynamiques qui d finiront les zones de transparence de l Image Ces formes doivent tre de type remplissage et poss der une couleur Monique Colinet CeFIS FUNDP Mai 2004 Page 23 Cr ation d animations interactives en Flash L animation regardent par un trou de serrure ou l aide de jumelles L imagination de chacun peut encore permettre d inventer d autres effets M thode masque statique devant une sc ne dynamique Sur un premier calque cr er une interpolation de mouvement d un objet quelconque Nommer ce calque masqu pour le reconna tre par la suite Cette d finition de nom n est pas absolue Le calque peut porter n importe quel nom pourvu qu il puisse tre retrouv par la
84. permet de cr er et de modifier des couleurs unies d grad es textur es ou transparentes Il est possible de s lectionner une teinte selon trois modes de d finition des couleurs le mode RVB rouge vert bleu le mode TSL teinte saturation luminosit et le mode hexad cimal Le nuancier quant lui affiche les 216 couleurs unies de la palette par d faut de Flash Il s agit des 216 couleurs communes aux syst mes Windows et Macintosh Cette palette pourra tre personnalis e Ce qui entra ne que chaque fichier Flash poss de sa propre palette de couleurs Celle ci est disponible chaque ouverture de fichier Les propri t s Monique Colinet CeFIS FUNDP Mai 2004 Page 6 Cr ation d animations interactives en Flash D couverte de l environnement Cette fen tre affichera automatiquement les propri t s de l objet s lectionn sur la sc ne ou de l image s lectionn e sur le sc nario c est dire qu elle permet la modification de cet objet S il s agit d un objet de type trait 1l est possible de modifier sa couleur son paisseur son type de trait sa dimension sa position Les actions Un module de programmation est int gr dans ce logiciel Il utilise un langage propri taire l ActionScript Cette fen tre permettra d ins rer du code soit en utilisant le mode Normal et dans ce cas il suffira de choisir l action faire ex cuter une sorte d assistant la programmation soit en ut
85. plus grandes que celles de la fen tre Flash peut se faire par l interm diaire d une fen tre La version FlashMX dispose maintenant d objets pr d finis les composants Parmi ceux ci le composant ScrollPane La premi re tape sera d importer l image dans la biblioth que du fichier Avant de cr er la fen tre il faut cr er un symbole clip dans lequel on place l image import e Il est indispensable de modifier les propri t s de ce clip en s lectionnant l option Exporter pour ActionScript Cette propri t peut tre activ e au moment de la cr ation du symbole clip ou en s lectionnant l objet dans la biblioth que puis en cliquant sur le bouton droit pour activer le menu contextuel et enfin en s lectionnant l item propri t s Il reste placer l objet ScrollPane sur la sc ne Par l interm diaire de l inspecteur des propri t s modifier dans les param tres le contenu de cette fen tre par le nom du clip invoqu L image sera visible et les ascenseurs seront actifs d s que le fichier sera publi F Macromedia Flash Player 6 OI x Scroll Content ie x 7 Horizontal Scroll Fichier Affichage Contr le Aide Vertical Scroll Drag Content Caire Rigan Le n pr amides Dans cet exemple il n est m me pas Hs 7 z gt stania n cessaire d crire du code ActionScript Monique Colinet CeFIS FUNDP 2003 2004 Page 72 Cr ation d animations interactives en
86. que le fichier source FLA Monique Colinet CeFIS FUNDP Mai 2004 Page 9 Cr ation d animations interactives en Flash La sc ne et ses objets La sc ne et ses objets Les objets de type dessin Les outils de dessin Les outils de dessin disponibles sont fort semblables aux outils de dessin de n importe quel logiciel graphique qu il soit d ailleurs de type vectoriel ou de type bitmap Comme chacun le sait tous les programmes ont des invariants outil de s lection crayon pot de peinture mais ont aussi leurs particularit s La d couverte devra tre progressive Cependant pour une prise en main un premier exercice serait de manipuler ces outils et de construire quelques graphiques pour se rendre compte des performances que l on peut atteindre et sans doute aussi des limites Dans ce cas le talent de chacun sera mis l preuve Les l ments graphiques d une sc ne sont appel s objets Il existe 3 principaux types d objets e les Formes e les groupes e les symboles Il existe une gradation dans l utilisation de ces objets Les Formes Les premiers graphiques que vous composez sur une sc ne sont essentiellement des formes ovale ligne rectangle En effet un dessin un sch ma un croquis aussi compliqu soit il commence toujours par quelques traits ou quelques formes C est l organisation de ces formes simples qui permettra la pr sentation de formes plus complexes Mais partons de
87. r ation d une interpolation de mouvement celle ci peut tre d compos e par la suite en une succession d interpolations de mouvement par insertion d Images cl s vides interm diaires sur lesquelles on placera chaque fois une occurrence du symbole mais des endroits diff rents ou avec des grandeurs diff rentes Cette m thode pourra tre compar e une interpolation de mouvement guid e voir exemple le calque guide o les trajectoires ne sont pas n cessairement rectilignes mais qui peuvent donner par exemple des effets dans la 3 dimension par changement de taille des occurrences sans changer la position du symbole On se rend compte qu il est possible de placer sur un m me calque plusieurs interpolations de mouvement pour autant que celles ci soient successives Deuxi me exemple animations successives de plusieurs objets Des interpolations de mouvement pourront tre cr es sur des objets diff rents Si l on travaille sur un calque unique les mouvements seront successifs un seul mouvement d objet la fois sur un calque Il n est en effet pas possible de superposer les interpolations de mouvement sur un m me calque Sur plusieurs calques Premier exemple le calque Guide Le calque guide nous permet de modifier la trajectoire rectiligne d finie comme telle dans le logiciel lors d une interpolation de mouvement simple en une trajectoire quelconque Quelques consignes sont respecter pour un
88. ratif de donner un nom cette occurrence Le script sera en effet appliqu l occurrence du symbole et non pas au symbole lui m me Le symbole se trouvant dans la biblioth que pourra tre r utilis par la suite pour subir une autre action 2 Voir ce propos le chapitre sur l animation 1 Surtout si le symbole est r utilis plusieurs fois C est le cas notamment des boutons Monique Colinet CeFIS FUNDP Mai 2004 Page 41 Cr ation d animations interactives en Flash L interactivit Une fois ce premier travail r alis on peut maintenant se focaliser sur la r daction du script Un premier cas Analyse Le contenu du script doit correspondre au mouvement que l on voudrait voir sur l animation lors de la lecture La principale diff rence avec une interpolation de mouvement classique est qu il ne faut pas ins rer des Images cl s sur le sc nario Il faut pr ciser dans le script que c est au logiciel de le faire lui m me Le clip tant positionn avec pr cision sur la sc ne il faut maintenant pr ciser que le logiciel doit cr er lui m me les Images cl s etre positionner le clip sur chacune de ces nouvelles Images Script 1 onClipEvent enterFrame RS Er 3 Quelques remarques concernant ce premier script e enterFrame est une m thode de l objet clip e _x exprime la coordonn e en pixels en abscisse du centre de l occurrence par rapport au centre de l ob
89. re qui doivent rester en place lors d une modification d expression de ce visage Qu il s agisse d une interpolation de forme ou de mouvement la repr sentation de cette interpolation sur le sc nario est visualis par une fl che continue entre les deux Images cl s Cette fl che est plac e sur un fond vert interpolation de forme ou bleu interpolation de mouvement Si la fl che estrepr sent e par une ligne discontinue c est que l interpolation n est pas correctement d finie L animation par programmation La programmation peut aussi tre utilis e pour cr er des animations On utilisera cette m thode dans le cas d animations complexes Pensons certains effets comme l lasticit ou la pesanteur qui n cessite des formules math matiques Celles ci seront d crites avec le langage de programmation sp cifique au logiciel ActionScript Dans ce cas l animation sera encore plus l g re qu une animation par interpolation de mouvement Le choix entre ces trois techniques d pend avant tout du type d effet que l on veut mettre en oeuvre de l esth tique du r sultat et surtout du niveau technique du concepteur Le facteur temps de mise en oeuvre est aussi un facteur non n gligeable Le jeu en vaut il la chandelle L utilisation de ActionScript sera d crite un chapitre sp cifique 7 Il est possible de placer jusqu 26 rep res de formes qui contiendront des lettres de a z permettant
90. roupe elles ne sont plus modifiables Monique Colinet CeFIS FUNDP Mai 2004 Page 11 Cr ation d animations interactives en Flash La sc ne et ses objets e La constitution d un groupe a plusieurs avantages e Les Formes sont prot g es Cela vite en cas de d placement sur la sc ne par exemple que certaines Formes ne se mangent accidentellement ou ne s agglom rent e Il y a augmentation de la productivit lorsqu on travaille dans un groupe Flash ne recalcule pas les l ments ext rieurs au groupe chaque manipulation e Le lecteur Flash n affiche un groupe que lorsqu il est compl tement charg Il y a donc optimisation de l affichage e Les groupes ne seront cr s que si l animation est compliqu e Une animation simple serait rendue plus lourde par la cr ation d un groupe Les symboles Les symboles sont fort semblables aux groupes Ils ont en tout cas les m mes avantages Ils ont en plus la particularit d tre stock s dans une biblioth que Ils sont de ce fait r utilisables Ils permettent donc de gagner du poids dans l animation Les symboles sont comparables des mod les dans la biblioth que dont sont extraits des tirages en local sur la sc ne et cela autant de fois que n cessaire Chaque utilisation d un symbole sur la sc ne est une occurrence du symbole Les symboles peuvent avoir 3 types de comportement e le symbole graphique est le plus simple et
91. rouve au dessous de lui et qui comporte des trous par lesquels on r v le les calques du dessous Les formes que l on dessine sur le calque de masque repr sente le ou les trou s c est la copie d un symbole dans une animation Il est possible de donner des occurrences d un m me symbole des attributs diff rents taille rotation transparence sans pour autant modifier le symbole d origine c est un mode d affichage des objets sur la sc ne C est seulement un outil de travail qui permet de visualiser les images qui sont avant et apr s dans le sc nario ligne du temps endroit o l on place les diff rents objets partie d une animation permettant une lecture lin aire ou non de toute l animation suivant l interactivit cr e c est un l ment r utilisable dans une animation Il peut s agir d un dessin simple d une animation compl te d un bouton d un fichier son d une police de caract res Ces symboles peuvent tre utilis s plusieurs fois en diff rents endroits d une animation on parle d occurrences du symbole CeFIS FUNDP 2003 2004 Page 74 Cr ation d animations interactives en Flash Raccourcis clavier Quelques raccourcis clavier utiles et pour d placer la t te de lecture image par image vers la gauche ou vers la droite ALT F3 pour ouvrir le panneau Explorateur d animations ALT clic gauche pour cr er une occurrence de ce symbol
92. rvolant la zone la souris en sort faire glisser au dragOver la souris est enfonc e sur le bouton en ressort et y dessus revient toujours enfonc e faire glisseren dragOut la souris est enfonc e sur le bouton et en sort en loignant restant enfonc e Plusieurs gestionnaires peuvent tre mis en oeuvre sur un m me bouton pour autant qu ils n entrent pas en conflit Monique Colinet CeFIS FUNDP Mai 2004 Page 66 Cr ation d animations interactives en Flash Quelques exemples suppl mentaires Quelques exemples suppl mentaires Afin de mettre au clair tous les concepts vus il est peut tre int ressant de d tailler quelques exemples qui reprennent une grande partie des notions envisag es dans les notes du cours Ces exemples sont bien videmment loin de reprendre tous les concepts de Flash Exemple 1 la neige qui tombe Deux alternatives pour cr er cet effet soit la cr ation d une suite d images sur lesquelles on place des flocons de neige qui se d placent Le travail est fastidieux Soit la cr ation d un clip neige que l on reproduira et que l on d placera par ActionScript Cette m thode est assez simple 1 Cr er un clip neige qui repr sente un flocon de neige Sa forme est quelconque 2 Placer une occurrence de ce clip sur la sc ne et le mettre en mouvement par un script Le script est donc ins r sur l occurrence du clip onClipEvent load _x random 550
93. s clips vid os des images bitmap Ces objets doivent d abord tre import s dans la biblioth que pour pouvoir tre utilisables Monique Colinet CeFIS FUNDP Mai 2004 Page 13 Cr ation d animations interactives en Flash Le sc nario et ses images Le sc nario et ses Images Comme cela a d j t crit pr c demment c est sur le sc nario que la notion de temps appara t Le sc nario permet de distribuer le contenu de l animation dans le temps C est donc la description de l animation qui se trouve sur le panneau sc nario Il est cependant difficile de travailler uniquement sur le sc nario sans tenir compte des objets situ s sur chacune des sc nes de ce sc nario Du moins lorsqu il s agit d animations graphiques Les Images Ce sc nario est compos d Images crit avec une majuscule afin de ne pas les confondre avec les images graphiques Elles repr sentent des l ments non graphiques mais des unit s de temps La lecture du sc nario se fait l aide d une t te de lecture que l on peut d placer manuellement ou faire d placer automatiquement en utilisant le lecteur Flash Les Images du sc nario peuvent avoir 3 tats diff rents e Image cl vide e Image cl e Image virtuelle A louverture d un nouveau fichier il y a n cessairement en premi re position sur le sc nario une Image cl vide Cette Image cl vide peut tre compar e une bo te vide C est dans
94. s es dans les propri t s du document FLA Une fois ce script termin il reste tester l animation l Quelques remarques L animation ainsi cr e ne comporte actuellement qu une seule image Si le curseur anim doit tre actif pendant toute la dur e de l animation il faudra ins rer une derni re Image cl sur le calque contenant ce curseur anim La position du calque dans le sc nario a aussi de l importance Il doit se trouver en avant de tous les autres calques sinon il risque de dispara tre lors de la lecture de l animation compl te Si vous ins rez ce curseur anim dans une animation comportant plusieurs s quences le curseur ne sera actif que dans la s quence o il a t d fini En effet lors de la lecture d une autre s quence l action n a pas t d finie Il n est pas non plus possible de d finir 2 curseurs anim s diff rents dans une m me s quence mais un curseur diff rent peut tre d fini dans chacune des s quences d une animation Quatri me exemple accrocher un objet un curseur Il ne s agit plus de masquer le curseur actuel et le remplacer par un clip mais simplement d accrocher un clip au curseur Les tapes seront les m mes mais le script ne contiendra plus toutes les instructions de l exemple pr c dent Les tapes La construction d un clip anim ou non reste la premi re tape de la construction L insertion de ce clip sur la sc ne de la premi re Imag
95. s calques sont indispensables dans la gestion des objets Ces calques pourront m me tre organis s en dossiers et sous dossiers ce qui permettra une am lioration de l organisation de l animation Il faut cependant savoir que ces dossiers n ont aucun impact sur le d roulement de sc nario Ils n ont pour fonction que de garder un espace de travail clair et propre Il est fortement conseill d en user sans r serve Surtout qu ils ont la propri t avantageuse de ne pas augmenter le poids du fichier Une autre raison pour laquelle le calque devient indispensable dans la cr ation d animations un peu plus complexes est que pour pouvoir animer un objet celui ci doit tre isol sur un calque Comment s organiser efficacement Vous cr erez syst matiquement des calques diff rents pour isoler les informations graphiques des informations non graphiques Ainsi des calques diff rents seront ins r s pour les actions les tiquettes les commentaires Monique Colinet CeFIS FUNDP Mai 2004 Page 15 Cr ation d animations interactives en Flash Le sc nario et ses images le son En isolant ainsi les diff rentes informations il sera beaucoup plus facile d y avoir acc s pour les manipuler D une mani re plus pratique les calques pourront tre verrouill s afin de ne pas les modifier malencontreusement par une manipulation involontaire Ils pourront galement tre rendus invisibles lors de la cr ation de
96. s de type son ont aussi leurs places dans les animations Flash Ils ont cependant besoin d tre import s dans la biblioth que de l animation avant de pouvoir tre activ s Ils doivent aussi se trouver sur des calques diff rents des calques contenant des graphies Pour les placer sur ces calques il suffit de les faire glisser de la biblioth que vers la sc ne Peu importe d ailleurs l endroit de la sc ne o vous les d posez car ils n y seront pas visibles La pr sence d un son dans une animation ne se visualise que sur les calques du sc nario Il est possible que la dur e du son soit plus longue que celle de l animation La lecture du son se fera jusqu au bout Pour viter ce d sagr ment et stopper la lecture du fichier audio il faut introduire une commande d ActionScript dans la derni re image du sc nario Nous envisagerons cette fonction dans un chapitre sp cifique Des animations sur plusieurs s quences Tout comme le monteur d coupe son film lorsque toutes les prises de vue sont r alis es le concepteur d une animation va lui aussi d couper son animation en plusieurs s quences Cette m thode vitera de travailler sur un sc nario trop long et trop encombr par les diff rents calques Chaque s quence pourra donc se construire s par ment selon les proc dures vues jusqu pr sent D s qu une s quence est termin e le concepteur cr era la suivante Lors de la visualisation de l animatio
97. st invoqu lorsque l op ration load est termin e La fonction re oit un param tre bool en true ou false si le chargement et l analyse des donn es re us par l objet LoadVars est correct ou non Le nouvel objet est rempli avec les variables t l charg es par l op ration load et les variables sont alors disponibles e _ 4 meligne du script l occurrence de l objet texte dynamique appel ici defile est affect de l objet sujettext Encore quelques pr cisions importantes e Le fichier externe sujet fxf doit commencer par sujettext afin que le lecteur Flash puisse contr ler s il existe une correspondance entre le fichier texte appel et le script e M me si le contenu du fichier externe est au format txt donc avec une police de caract res Monique Colinet CeFIS FUNDP Mai 2004 Page 60 Cr ation d animations interactives en Flash La hi rarchie dans les clips universelle il est possible de modifier cette police ainsi que d autres attributs par l interm diaire du panneau de Propri t s de l objet Le texte sera format avec la police la taille et les autres attributs d finis e Le fichier externe doit se trouver dans le m me dossier que le fichier FLA et donc SWF faisant appel lui Cette fa on de cr er une interaction risque d tre une tape de trop pour certains mais facilite la vie lorsqu on veut ins rer des textes plus cons quents dans une animation La r daction d
98. t lt embed gt lt object gt lt p gt lt body gt lt html gt L utilisation d un logiciel de cr ation de pages HTML tel que Dreamweaver permet une insertion ais e de fichiers SWF C est le logiciel lui m me qui se charge d ins rer le code n cessaire Monique Colinet CeFIS FUNDP Mai 2004 Page 62 La cr ation d animations interactives en Flash La publication Le format HTML Ce format de publication permet de contr ler la lecture du fichier SWF son affichage dans une page HTML Le r sultat obtenu est identique la pr c dente manipulation Ce sera alors au concepteur de pages HTML de compl ter la page afin que le fichier Flash apparaisse dans un document plus complet Cette technique est plus souvent r serv e aux webmasters qui souhaitent cr er une banni re anim e dans leur mod le de pages Web Les formats GIF JPG et PNG Lors de cette manipulation seule la premi re image de l animation est transform e dans le format choisi Suivant le type d image le choix se portera sur l un ou l autre des formats S il s agit r ellement d une animation il est pr f rable de choisir l option Exporter l animation et ensuite choisir un format d animation correct AVI ou Gif anim L exportation d une animation au format JPG par exemple cr era autant de fichiers JPG que l animation ne comporte d Images dans la s quence Le format MOV La publication au format MOV cr
99. tes plut t que des barres d outils Ces fen tres mobiles sont appel es panneaux et peuvent tre cach s ou se d voiler en fonction des besoins de l utilisateur Ce qui rend l interface personnalisable Les barres d outils Ce sont les barres d outils de base semblables celles que l on retrouve dans tous les programmes actuellement et leurs contenus sont bien entendu adapt s au logiciel Les invariants de ces barres d outils sont toujours situ s dans les m mes menus ce qui ne doit pas perturber le nouvel utilisateur Citons les incontournables ouvrir enregistrer sous couper copier coller Un item sp cifique l utilisation des diff rentes fen tres ou panneaux est accessible depuis la barre d outils principale Les panneaux Le but n est pas de r diger des notes sur les diff rents panneaux possibles car ils sont nombreux mais de reprendre les principaux Chacun pourra bien s r en fonction de son type de produit utiliser plut t l un que l autre Citons quand m me les outils de dessin ceux ci permettent comme le nom l indique de dessiner des formes particuli res ou main lev e de s lectionner des objets dessin s de les modifier forme couleur orientation d formation C est galement parmi ces outils de dessin que l on retrouve l item texte qui permet d ins rer des zones de texte dans l image Le m langeur de couleurs et le nuancier Ce m langeur de couleurs
100. textes v nements Ces contextes peuvent tre e une Image du sc nario principal e une Image d un clip e un bouton contenu dans la sc ne ou plus pr cis ment un tat de ce bouton e un clip contenu dans la sc ne Avec ce minimum de connaissances nous allons pouvoir d buter la partie la plus importante qui est la conception de l interactivit dans une animation Les informations suppl mentaires qui seront n cessaires lors de la r alisation d interactivit s plus sp cifiques seront d taill es au moment opportun ou n cessiteront la consultation de l aide du logiciel Quoi qu il en soit c est surtout par v rifications successives que l on pourra tester la coh rence de son travail Il ne faut pas h siter r aliser un test chaque modification de script Monique Colinet CeFIS FUNDP Mai 2004 Page 35 Cr ation d animations interactives en Flash L interactivit L interactivit Qu est ce que l interactivit Dans une animation simple la lecture des s quences et des images se fait de mani re lin aire Les animations Flash envisag es jusqu pr sent sont des produits simples ou complexes qui ne n cessitent aucune action de la part de l utilisateur Ce dernier est passif Il ne doit que lire ou regarder l animation Il ne peut pas interagir avec le produit Il s agit en quelque sorte de la lecture ou la visualisation d un film L introduction d interactiv
101. ti en symbole Il s agit bien entendu d une occurrence de ce symbole La 2 me Image cl contiendra une autre occurrence de ce m me symbole Cette occurrence sera modifi e en position mais aussi et ou en grandeur et ou en couleur La pelure d oignon est un mode d affichage des objets sur la sc ne en environnement auteur Elle n a aucune incidence sur le r sultat puisqu il s agit d un outil de travail Chaque occurrence d un symbole peut porter un nom diff rent Dans certaines situations ces noms d occurrences sont souhaitables L insertion du nom de l occurrence se fait par l interm diaire du Panneau de Propri t s lorsque l objet est s lectionn 6 pour donner l effet de mouvement Monique Colinet CeFIS FUNDP Mai 2004 Page 18 Cr ation d animations interactives en Flash L animation Il n est pas interdit de limiter l interpolation de mouvement au seul d placement La seule contrainte est de travailler sur deux occurrences d un m me symbole Chaque occurrence peut tre modifi e en position en grandeur en couleur C est avec ces interpolations de mouvement que l on va utiliser les calques guides L interpolation sera quant elle plac e sur un calque guid Nous en parlerons un peu plus loin L interpolation de Forme Il s agit dans ce cas de partir d une Forme se trouvant sur la 1 re Image cl pour terminer par une autre Forme sur la derni re Imag
102. tion la pelure d oignon Il s agit d un mode d affichage qui permet de visualiser sur la sc ne le contenu des Images qui pr c dent et suivent l Image en cours L utilisation de ces pelures d oignon n a aucune influence sur le contenu r el de l animation Elles ne sont pas non plus visibles lors de l exportation du fichier Elles n influencent donc pas le poids du fichier C est un outil de visualisation pr sent dans le logiciel Les objets se trouvant sur chacune des Images de cette animation peuvent tre aussi des symboles graphiques qui ont t pr alablement import s dans la biblioth que Il peut s agir d images de formats diff rents bmp gif jpg Dans ce cas le poids du fichier sera nettement plus important L animation par interpolation Les interpolations sont des effets g n r s par le logiciel Elles permettent d am liorer nettement le poids du fichier En effet le concepteur cr e l Image cl de d part et l Image cl de fin et ins re entre les deux autant d Images virtuelles qu il souhaite en fonction de la dur e de l animation qu il a choisi et de la cadence donn e cette animation C est le logiciel qui se charge de cr er les Images virtuelles interm diaires au moment de la lecture du fichier Il existe deux types d interpolation L interpolation de mouvement Elle se construit sur la 1 re Image cl partir d une Forme ou d un groupe de Formes conver
103. type d arri re plan n cessiteraient des performances mat rielles que tout utilisateur ne poss de pas Le poids du fichier serait aussi plus important ce qui va l encontre du but premier de ce type de programme la cadence de l animation Il s agit de la vitesse de d filement des Images lors de la lecture de l animation Cette vitesse s exprime en Images par seconde ips Par d faut la cadence est r gl e sur 12 ips Cette vitesse est suffisance pour une animation provenant d Internet D ailleurs les autres types d animations que l on rencontre sur Internet AVI et QuickTime sont aussi cadenc s 12 ips Le nombre d images par seconde a une influence certaine sur la fluidit de l animation Il est vrai que les s quences vid os classiques sont cadenc es une vitesse sup rieure D ailleurs pour que l oeil fonde les images la cadence minimum est de 15 ips mais dans ce cas l oeil n a pas le temps de voir tous les d tails des images et les objectifs d une animation Flash sont diff rents de ceux d une vid o L enregistrement et la publication des fichiers Les fichiers cr s sont enregistr s dans un format sp cifique Ils portent l extension FLA Ce sont les fichiers de travail Il s agit des fichiers d animation l tat brut Il est possible de les modifier tout moment m me apr s leur publication Afin de rendre ces fichiers lisibles sur Internet ou encore de pouvoir les l
104. u lorsque le clip dispara t de la sc ne souris mouseDown les instructions s ex cutent lorsque l utilisateur clique sur enfonc e le bouton gauche de la souris 4 souris mouseUp les instructions s ex cutent lorsque l utilisateur rel che le rel ch e bouton gauche de la souris d placement mouseMove les instructions s ex cutent lorsque l utilisateur d place la de la souris souris sur la sc ne touche keyDown les instructions s ex cutent lorsque l utilisateur enfonce enfonc e une touche du clavier touche keyUp les instructions s ex cutent lorsque l utilisateur rel che rel ch e une touche du clavier donn es data v rifie le bon chargement des informations lors de l utilisation de m thodes Quelques propri t s de l objet MovieClip exprime la coordonn e en abscisse du centre de l occurrence par rapport au centre de l objet dans lequel il est imbriqu exprime la coordonn e en ordonn e du centre de l occurrence par rapport au centre de l objet dans lequel il est imbriqu _xscale exprime la valeur de la largeur en pourcentage de l objet _yscale exprime la valeur de la hauteur en pourcentage de l objet Monique Colinet CeFIS FUNDP Mai 2004 Page 64 Cr ation d animations interactives en Flash Utilisation de l objet MovieClip exprime la valeur en pixels de la largeur de l occurrence _height exprime la valeur en pixels de la hauteur de l occurrence
105. urs caract ristiques C est galement sur ces images cl s que le concepteur de l animation ins re les objets de la s quence Les autres images normales seront calcul es par le logiciel en fonction de leurs diff rences avec la ou les pr c dentes et la ou les suivantes Nous y reviendrons plus en d tails lors des interpolations D autres images encore peuvent tre vides ne contenant pas d objet graphique mais seulement des informations d action tel qu un arr t par exemple En bref les images cl s permettent les modifications les images simples servent essentiellement modifier la dur e de l animation Pour une question d organisation de structure plusieurs images peuvent tre superpos es Dans ce cas elles sont plac es sur des calques sortes de transparents sur lesquels on place des objets Cependant certains calques peuvent ne contenir que des images vides comme pr cis plus haut mais seulement des informations d actions On pourrait comparer les diff rents calques diff rentes pellicules de films qui sont superpos es et qui sont lues simultan ment Ces calques peuvent tre de types diff rents normal guide masque dossier et avoir des propri t s diff rentes masqu ou verrouill L utilisation de ces calques est un passage oblig si on veut un travail clair et structur L espace partie s quence ou sc ne dans l environnement C est en r alit l
106. ynamique Tous les calques se trouvant en dessous d un masque subissent les effets du masque pour autant qu ils aient la propri t d tre de type masqu Les calques se trouvant par dessus le calque masque risquent quant eux de cacher les effets d un masque Il faut donc tre prudent avec ce genre de manipulation Pour obtenir les effets escompt s dans une animation il sera peut tre n cessaire de les construire dans une s quence bien particuli re La manipulation des masques des guides des interpolations va permettre une multitude d effets sp ciaux Citons un masque anim qui donne un effet de poursuite une interpolation de forme sur le calque Masque une transition qui laisse appara tre puis dispara tre un objet et qui est provoqu e par une Monique Colinet CeFIS FUNDP Mai 2004 Page 24 Cr ation d animations interactives en Flash L animation interpolation de forme ou de mouvement de l objet sur le calque Masque un effet de loupe sur un objet en utilisant un masque guid sur une trajectoire Les r sultats obtenus d pendent beaucoup de l imagination du concepteur et de l organisation mise en oeuvre pour obtenir un r sultat C est dans ce domaine pr cis ment que chacun devra faire preuve de cr ativit et de r flexion Cinqui me exemple des calques contenant des objets non graphiques Il n y a pas que des objets graphiques que l on peut placer sur les calques Des objet

Création d`animations interactives en Flash

Contents

Download Pdf Manuals

Related Search

Related Contents

Cr&eacute;ation d`animations interactives en Flash

Contents

Download Pdf Manuals

Related Search

Related Contents

Création d`animations interactives en Flash