16. ActionScript: esdeveniments i referències

Índex | Anterior | Següent

 

16.1. El llenguatge ActionScript

El llenguatge ActionScript deriva del C++ i es troba estretament emparentat amb el JavaScript. En tot el que segueix i mentre no s'indiqui el contrari el significat i el funcionament dels recursos a què es farà referència és el mateix que en JavaScript.

Curs de JavaScript

 

16.2. Vinculació dels programes

ActionScript permet l'elaboració de programes que controlen la interactivitat de les animacions. Aquests programes es vinculen a un fotograma, a un exemplar d'un botó o a un exemplar d'un clip.

Quan vinculem un programa a un fotograma, és recomanable - no pas obligatori - dedicar-hi una capa especial. Seleccionem el fotograma fent clic en el punt adequat de la línia de temps. A continuació cal activar Window > Actions i s'obre un editor, en el qual escrivim el programa. Els fotogrames dotats d'un programa queden marcats en la línia de temps amb una a petita.

Per vincular un programa a un exemplar d'un botó o d'un clip, cal seleccionar-lo (un clic); a continuació activem Window > Actions i procedim com en el cas anterior.

A mesura que anem elaborant programes, l'explorador de l'animació ens els mostra.

 

16.3. Dues formes d'elaboració de programes

Dins l'editor de programes hi ha dues formes de treball: mode normal (Normal mode) i mode expert (Expert mode). Es passa d'un mode a l'altre fent clic en una petita icona que hi ha a l'extrem dret de la barra de títol de l'editor o en una icona amb una fletxa orientada cap amunt i a la dreta (un petit triangle que hi ha a la dreta immediatament sota la barra de títol de l'editor).

En el mode normal l'editor de programes queda dividit en tres parts. A l'esquerra hi ha els comandaments, agrupats en carpetes, indicats per sengles botons; a la dreta hi ha un espai per al programa, inicialment en blanc, i un quadre de diàleg contextual. Fent clic sobre un dels blocs es despleguen totes les opcions que conté; seleccionem la que desitgem i l'arrosseguem cap a la dreta o hi fem un doble clic. A la dreta apareix un fragment de programa, en el qual apareixen ressaltats els paràmetres que hi calgui precisar, cosa que fem des del menú contextual.

Si en un determinant context una opció no es pot aplicar, el rètol de la icona corresponent apareix en gris.

Exemple

Aspecte de l'editor en mode normal. Hem seleccionat Movie Control, i dins d'aquesta carpeta, Goto, en la variant Goto and Play. Hem seleccionat el tipus Frame Number i el fotograma 1. El resultat ha estat

gotoAndPlay(1);

A continuació hem triat la conseqüència de l'esdeveniment: hem fet clic a la carpeta Basic Actions, hem arrossegat Go To a la dreta i hi ha aparegut, intercalat en el programa anterior, gotoAndPlay(1), que equival a dir: En arribar al fotograma present, salta al fotograma 1 i continua l'execució.

Notem que l'opció on apareix en gris: significa que en aquest context no es pot aplicar.

Observem les dues icones que ens permeten passar del mode normal al mode expert (envoltades aquí en blau cel).

En el mode expert l'espai queda dividit només en dues parts: a l'esquerra tenim els comandaments agrupats en blocs. Podem, com en el cas enterior, arrossegar els comandaments desitjats (o fer-hi doble clic); però també podem escriure el programa directament a la dreta. I en qualsevol cas hem d'escriure directament els paràmetres que calgui. També podem escriure el programa en un arxiu de text exterior i passar-lo a l'espai de la dreta simplement tallant i enganxant.

 

16.4. Plantejament general dels programes.

El plantejament general d'un programa consisteix a formular-se les preguntes següents i donar-hi resposta.

Així, en l'exemple de l'apartat anterior, tenim:

En l'exemple de 15.5 el resultat és que el text dinàmic mostra l'hora, la dada és l'hora submnistrada pel rellotge de l'ordinador, i no hi ha cap circumstància especial (és a dir, el programa s'executa sempre). En l'exemple de 15.6 la circumstància és deixar de fer clic sobre el botó, les dades són, d'una banda, el nom entrat per l'usuari i, de l'altra, la paraula Hola, i el resultat, l'aparició d'un text dinàmic de salutació a l'usuari

Aquests són programes molt elementals, però se'n poden fer de molt més complicats. Un cas molt freqüent i molt interessant és que el programa prengui decisions depenent de diversos factors: per exemple, una animació amb un mòbil que fes recorreguts diferents depenent de l'hora del dia, o que en determinades circumstàncies s'estigués quiet.

 

16.5. Control d'edeveniments

Els programes vinculats a un fotograma s'executen incondicionalment cada vegada que en el transcurs de l'execució de l'animació s'ateny el fotograma corresponent.

Els programes vinculats a un botó queden condicionats a un determinat esdeveniment; en aquest cas el programa queda inclòs en una estructura com la següent:

on(esdeveniment) {
   programa
}

Els principals esdeveniments són:

Anàlogament, els programes vinculats a un clip queden inclosos en una estructura com la següent:

onClipEvent(esdeveniment) {
   programa
}

En aquest cas els principals esdeveniments són

 

16.6. Denominació dels elements afectats

Els fotogrames es denominen especificant el nom de l'escena i el número del fotograma:

("nom",número)

El nom de l'escena s'ha d'indicar entre cometes; el número de fotograma per un número (sense cometes).

Podem donar nom a un fotograma fent clic en el punt adequat de la línia de temps i escrivint el nom desitjat a la casella Label del menú contextual Properties (activant Window > Panels > Frame i omplint la casella Label); el fotograma apareixerà marcat amb una banderola en la línia de temps. Si el fotograma ha rebut un nom, el número de fotograma pot ésser substituït per aquest nom (entre cometes).

L'animació comença en el fotograma 1. S'inicia un moviment ascendent fins arribar al fotograma 30. Aquest fotograma ha rebut un nom, sg. A partir d'aquest es produeix un moviment, obtingut mitjançant sengles interpolacions, primer cap a la dreta, després cap a l'esquerra i finalment altre cop cap al centre, que s'ateny en el fotograma 110. Aquest fotograma conté el programa següent:

gotoAndPlay("sg")

D'aquesta manera en arribar al fotograma 110 el control retorna no pas a l'inici sinó al fotograma 30. A continuació, doncs, el moviment només es produeix entre els fotogrames 30 i 110

Els fotogrames es poden precisar amb el número o amb el nom rebut; en aquest cas hem fet servir aquesta darrera opció.

Els símbols es denominen amb el nom que reben en ésser creats.

Els exemplars dels botons i dels clips que hagin de resultar afectats per un programa han de rebre un nom; cal establir-lo en la casella Instance Name del menú contextual Properties (activant Window > Panels > Instance i omplint la casella corresponent).

El fet que un símbol en pugui incloure un altre planteja la necessitat de les denominacions jerarquitzades. Aquestes denominacions s'obtenen acumulant els noms dels símbols, separats per un punt, i precedits de _root, que significa l'animació completa.

Així si una animació té un botó anomenat boto2 i aquest al seu torn conté un clip anomenat clip1, el nom complet d'aquest darrer és

_root.boto2.clip1

Podem eliminar d'aquesta denominació tot allò que sigui redundant. Si en el cas anterior el programa és vinculat a boto2, podem referir-nos al clip simplement com

clip1

I des d'un element contingut en un de superior podem referir-nos a un altre que també hi sigui comprès fent servir el prefix _parent. Així, si un botó conté dos clips, clip1 i clip2, des del primer podem referir-nos al segon així:

_parent.clip2

Finalment, ens referim als documents HTML de la forma habitual.

 

16.7. Comentaris en els programes

Si una animació conté un programa molt complex, al cap d'un temps segurament haurem oblidat els detalls de la seva estructura; per això és convenient deixar-hi pistes explicatives, en forma de comentaris. Els comentaris són textos d'una línia que comencen per //. Podem incloure comentaris en qualsevol punt d'un programa d'ActionScript.