Introducció a la interacció en les animacions | ||
|
||
En aquesta pràctica, creareu una aplicació petita on es treballarà la combinació d'incidències de botó i de movie clip per crear interacció a les animacions. |
||
Treballareu amb variables i amb la funció eval(), que us permetrà accedir al valor de les variables per referència. Recordeu que la funció eval() avalua l'expressió que estigui dins els parèntesis i és molt útil. Si voleu esbrinar més sobre aquesta funció, teniu a la vostra disposició l'ajut de l'ActionScript de Flash. | ||
També començareu a integrar instàncies de clips de pel·lícula en botons. | ||
Desenvolupament de la pràctica | ||
» Recupereu l'arxiu font infantil1.fla del mòdul anterior. | ||
» Afegiu una instància a l'escenari del clip de la biblioteca esquirol i anomeneu-la esquirol. | ||
En aquest moment, teniu a l'escenari dues instàncies: mussol i esquirol. Aquestes instàncies seran les protagonistes de l'animació. | ||
Ara es tracta de crear dos botons animats a partir dels dos clips que teniu a la biblioteca: mussol2 i esquirol. | ||
» Convertiu els dos clips de pel·lícula en dos botons animats. | ||
Recordeu el procediment de crear un botó. En la seva edició, s'insereix el clip de pel·lícula animat mussol2 que teniu a la biblioteca. Amb aquests procediments, que no serien els únics, creareu un botó animat. | ||
» Anomeneu els botons com a bmussol i besquirol. | ||
Imatge
núm. 1
|
||
|
||
Ara ja es pot programar el botó perquè pugui controlar les propietats dels clips de pel·lícula. Aquests botons tindran la funció de decidir quina de les mascotes sortirà a fer l'animació. | ||
Per tant, heu de partir del fet que, quan es carrega inicialment la pel·lícula principal, les instàncies mussol i esquirol han de ser invisibles. Aquesta assignació de propietats es podria fer al fotograma clau de la pel·lícula principal o també a la incidència Load de la instància programa que ja teniu a fora de l'àrea de treball. Escolliu aquest últim mètode, ja que, d'aquesta forma, tindreu el codi menys repartit. | ||
» Arrossegueu les instàncies al començament de l'escenari procurant que els punts d'inserció (registre) que estan ubicats al centre de la instància coincideixin. | ||
» Creeu una incidència Load dins la instància programa. | ||
»
Inseriu aquest codi per inicialitzar la propietat _visible amb el
valor false, i esborreu, també, les ordres: _root.ample=_root.mussol._width; _root.alt=_root.mussol._height; que utilitzàveu per desar les dimensions originals de la instància. |
||
|
||
» Proveu d'executar la pel·lícula i comproveu que les instàncies mussol i esquirol no són visibles en aquest moment. | ||
Ara es tractarà de programar els botons perquè facin que les mascotes puguin aparèixer i fer l'animació. | ||
» Inseriu al botó bmussol el codi següent: | ||
|
||
Com podeu observar al codi anterior, primer heu creat una variable amb el nom de mascota i li heu assignat una cadena. Aquesta cadena és el nom de la instància que farà l'animació. En aquest cas, es refereix a la instància mussol. | ||
En segon lloc, heu modificat la propietat _visible de la instància mussol. Ara ja té el valor true i es podrà visualitzar a l'escenari. A la propietat _visible de la instància esquirol, li heu assignat el valor false perquè només es pugui visualitzar la instància mussol. | ||
Ara heu de fer el mateix amb el botó besquirol. | ||
» Inseriu el codi següent al botó besquirol. | ||
|
||
Una vegada hagueu programat els botons, faltarà programar la incidència enterFrame perquè faci l'animació. | ||
Modifiqueu el codi de la incidència enterFrame de la instància programa per substituir l'ordre _root.mussol._x+=5; per eval(_root.mascota)._x+=5;. El motiu d'aquesta substitució és que la funció eval() reconeix el valor de la variable mascota per referència. (Recordeu que es pot accedir al contingut d'una variable per valor o per referència com en altres llenguatges de programació.) | ||
» Esborreu la part de codi d'aquesta incidència que feia variar la mida (escalar) de la instància. | ||
» Feu les modificacions descrites anteriorment i us haurà de quedar un codi semblant a aquest: | ||
|
||
En programes de més complexitat, és habitual inicialitzar primer les variables d'accés general en tot el programa. En aquest cas, esteu utilitzant la variable mascota en el codi dels botons i les incidències de les instàncies. Encara que en ActionScript 1 no és requisit indispensable inicialitzar les variables com en altres llenguatges (exemple C), és una bona pràctica fer-ho, i com a resultat tindreu un codi més clar i més fàcil de modificar. La versió nova d'ActionScript 2 que porta incorporat el Flash MX 2004 sí que requereix aquesta obligació d'inicialitzar les variables. És convenient, també, incloure anotacions del programador que facin més aclaridor aquest codi. En el vostre cas, inicialitzeu les variables a la incidència Load la instància programa amb les anotacions del programador corresponents. |
||
|
||
Perquè les mascotes surtin des del mateix lloc de l'escenari, en el codi anterior s'ha inicialitzat, també, el punt de sortida de les instàncies quan comença el programa amb les coordenades _x, _y. | ||
Observeu que, quan canvieu de mascota per l'acció del botó corresponent, la mascota té com a punt d'inici les coordenades inicialitzades en el codi anterior. A la pràctica 3 d'aquest mòdul fareu que la mascota iniciï el moviment en el punt que ha finalitzat l'anterior. | ||
Amb aquest codi, heu inicialitzat la posició de partida de l'animació. Recordeu que la incidència Load és el lloc on generalment es poden inicialitzar les variables, però que també ho podeu fer al fotograma clau de la pel·lícula principal. | ||
» Proveu la pel·lícula per veure el funcionament. | ||
Ara heu de fer que, quan es canviï de mascota, surti aquesta última al mateix lloc de l'escenari on es trobava l'anterior. Recordeu que la variable mascota ha desat el nom de la instància mussol o esquirol però no les coordenades del punt on es trobaven. A vosaltres us interessa només que recordi la coordenada _x de la instància que voleu que es faci visible. | ||
» Afegiu el codi següent al botó besquirol. | ||
|
||
» Afegiu, també, el codi següent al botó bmussol. | ||
|
||
El que heu fet és assignar a la propietat _x de la mascota nova el mateix valor de l'anterior. | ||
» Proveu la pel·lícula per comprovar aquesta última funcionalitat. | ||
» Deseu aquesta pel·lícula amb el nom infantil2.fla. | ||
Una altra forma d'aconseguir el mateix seria que el clip mussol tingués dos fotogrames. El primer amb la imatge del mussol i el segon fotograma amb la imatge de l'esquirol. A cada fotograma hi haurà l'acció stop();. El clip estarà aturat en el primer fotograma i, quan cliqueu al botó de l'esquirol, només haureu de posar el codi que faci el canvi de fotograma, i amb això s'aconseguirà que canviï la imatge i en la mateixa posició, ja que és el mateix clip. El codi serà: _root.mussol.gotoAndStop(2); | ||