18. ActionScript: recursos diversos

Índex | Anterior

 

18.1. Introducció

Amb els recursos dels dos temes anteriors es poden resoldre els aspectes més bàsics de la interactivitat de les animacions de Flash. Però hi ha molts més recursos, que permeten escriure programes molt complexos.

 

18.2. Literals, variables i assignació de valors

Els conceptes de literal, variable i vector i la forma de representar-los són els mateixos que en JavaScript.

L'ús de var és anàleg: si es fa servir, l'àmbit de validesa de la variable és la funció o el bucle dins els quals s'ha creat; altrament, es tracta d'una variable general.

Els vectors es creen amb new Array(), hi són vàlides les dues formes d'assignació de valors i la forma de referir-se als elements és la mateixa.

L'assignació de valors s'aconsegueix amb la fórmula general

variable = valor

on valor pot ésser expressat literalment o mitjançant una expressió.

 

18.3. Textos d'entrada i dinàmics

Els noms donats als textos d'entrada i als textos dinàmics es comporten com variables: indiquen alhora l'objecte i el seu valor. A diferència del que es fa en JavaScript amb les caselles d'entrada de text d'un formulari, no s'hi fa servir la propietat .value.

 

18.4. Manipulació de textos

Es recomana que totes les cadenes de text que hagin d'ésser manipulades es declarin prèviament com exemplars de l'objecte String:

nom=new String(valor)

valor representa el valor inicial, i és optatiu. En qualsevol moment es pot fer una assignació de valor a la cadena amb un mandat d'assignació ordinari.

La concatenació de cadenes s'obté amb concat():

cadena=concat(cadena1, cadena2,...)

També és possible, però, obtenir la concatenació amb el signe +.

La propietat .length i les funcions substring(), indexOf(), charAt(), toLowerCase() i toUpperCase() funcionen igual que en JavaScript.

En aquest exemple es mostra d'una banda una de les funcions que operen sobre textos, concretament toUpperCase(), que, aplicada a entrada, en transforma les minúsules en majúscules (i manté aquests darreres). De l'altra, hi veiem la definició d'una variable, saluda, mitjançant un literal, i diversos tipus de concatenació: la de dues variables, saluda i modificat, i la d'aquestes amb un literal, !.

Els termes entrada i sortida són els que hem donat lliurement al text d'entrada i al text dinàmic, respectivament.

El programa principal, associat al botó del primer fotograma, és el següent:

on (release){
   modificat=entrada.toUpperCase();
   saluda="HOLA, ";
   sortida=saluda+modificat+" !";
   gotoAndPlay(2);
}

 

18.5. Comparacions i execucions condicionades

Els operadors de comparació són ==, !=, >, i similars, i els operadors lògics, !, && i ||. Són doncs els mateixos que en JavaScript i funcionen igual.

I el mateix es pot dir de les estructures condicionals i de bucle: if(), while(), do{ ... } while() i for().

 

18.6. Matemàtiques

Els operadors matemàtics i les funcions matemàtiques són les mateixes que en el JavaScript. Els valors numèrics entrats a través de textos d'entrada, com els entrats amb un prompt() o mitjançant un formulari en JavaScript, són inicialment cadenes de text, però si entren a formar part d'una operació matemàtica altra que la suma, esdevenen automàticament nombres.

L'ActionScript disposa d'una funció Number(), que permet convertir els textos de contingut numèric en nombres:

nombre = Number(text)

on text pot ésser un literal o una variable.

Hi ha, a més, la funció eval(), amb un ús anàleg al que té en JavaScript.

Hi ha dues funcions diferents per generar nombres aleatoris, random(n), que en genera entre 0 i n, i Math.random(), que en genera entre 0 i 1.

Aquesta animació té només quatre fotogrames; en el primer es demanen a l'usuari les dades de l'equació que s'ha de resoldre, i els altres tres corresponen als tres possibles tipus de solucions que hi ha.

Cada fotograma va proveït d'un stop(), que evita que el procés vagi endavant abans que s'hagi premut el botó. Els botons dels fotogrames corresponents als tres possibles tipus de solució duen un gotoAndStop(1), que remet al primer fotograma.

L'aspecte més interessant i que il·lustra el que s'ha explicat en els apartats anteriors és el programa del botó del primer fotograma, que és el següent:

on (release){
   discr=b*b-4*a*c;
   if (discr>0){
      x1=(-b+Math.sqrt(discr))/(2*a);
      x2=(-b-Math.sqrt(discr))/(2*a);
      gotoAndStop(2);
   }else{
      if (discr<0){
         gotoAndStop(4);
      }else{
         x=-b/2*a;
         gotoAndStop(3);
      }
   }
}

a, b i c són les denominacions que reben els tres textos d'entrada del primer fotograma; x1 i x2 els dos textos dinàmics del segon fotograma, i x el text dinàmic del tercer fotograma.

Els símbols +, -, * i / corresponen a les operacions matemàtiques elementals, com també els parèntesis. I Math.sqrt() significa arrel quadrada.

Pel que fa a les decisions lògiques, s'hi fa servir dues vegades l'estructura if () {...} else {...}. Segons quin sigui el resultat del càlcul de la variable discr, el programa continua en el fotograma 2, en el 3 o en el 4.

Nota: si voleu anar sobre segur per comprovar el comportamewnt segons cada una de les tres possibilitats, feu servir els valors

  • 2, 5, -12
  • 1, -6 i 9
  • 1, 1 i 3

 

18.7. Dates i hores

Com en JavaScript, hi ha un objecte genèric, Date(), a partir del qual es poden crear exemplars i llegir-ne les dades amb les funcions getMonth() i anàlogues. No hi ha l'equivalent a setTimeOut() i per a l'establiment d'intervals de parada cal recórrer a la funció getTimer(). En la majoria dels casos, però, n'hi ha prou de fer servir les eines de temps de la línia de temps.

A partir de l'objecte Date() i de les funcions annexes, determinem la data del dia en curs. El programa és el que consta a la dreta. Té les parts següents:

  • Creem un exemplar, aramateix, de l'objecte Date().
  • Hi apliquem les quatre funcions adequades per obtenir el dia de la setmana, el dia del mes, el mes i l'any.
  • Transformem els valors numèrics en cadenes de text.
  • Ho ensamblem tot i atribuïm la cadena resultant a diaidata, que és el nom que hem donat al text dinàmic.

aramateix=new Date();
dia1=aramateix.getDay();
dia2=aramateix.getDate();
mes=aramateix.getMonth();
any=aramateix.getFullYear();
if(dia1==0){dia1="Diumenge"}
if(dia1==1){dia1="Dilluns"}
if(dia1==2){dia1="Dimarts"}
...
if(mes==0){mes="de gener"}
if(mes==1){mes="de febrer"}
if(mes==2){mes="de març"}
...
diaidata=dia1+", "+dia2+" "+mes+" de "+any;

 

18.8. Actuacions sobre clips

Els exemplars dels clips tenen una sèrie de propietats, que poden ésser modificades mitjançant un programa. El nom de les propietats comença sempre amb un guió baix. Algunes propietats importants són:

Aquestes propietats poden llegir-se amb la funció getProperty i canviar-se amb la funció setProperty. Aquests funcions es fan servir així:

valor=getProperty(objecte,propietat)
setProperty(objecte,variable,valor)

També es poden fer servir mandats d'assignació; en aquest cas el nom de la propietat es postposa al nom de l'exemplar del clip amb un punt de separació:

nom._propietat

Amb la funció duplicateMovieClip() es pot obtenir un exemplar nou d'un clip a partir d'un altre de ja existent. La sintaxi és

duplicateMovieClip(existent,nou,nivell)

Si es fa més d'una duplicació, és obligatori que cada una ocupi un nivell diferent.

L'animació conté un clip anomenat rectangle, del qual inicialment hi ha un sol exemplar, rect1.

En el fotograma 1 hi ha un stop() que impedeix el progrés automàtic de l'execució, i un programa vinculat al botó (on(release) i línies següents).

En arribar al fotograma 40, l'exemplar esdevé parcialment transparent. El programa que ho controla, vinculat al propi fotograma, fa ús de setProperty().

En arribar al fotograma 85 creem un duplicat, rect2 de l'exemplar rect1; el programa, iniciat amb duplicateMovieClip(), també és vinculat al fotograma.

I en arribar al final de l'animació apareix un fons groc i un stop() impedeix el retorn al primer fotograma.

 

Els programes al·ludits són els següents:

on (release){
   coordx=getProperty("rect1",_x); // mesura la coordenada x del centre de l'exemplar
   coordx=coordx+100; // hi afegeix 100 píxels
   setProperty("rect1",_x,coordx); // assigna la nova coordenada x a l'exemplar
   setProperty("rect1",_rotation,"45"); // fa girar 45 graus l'exemplar
   setProperty("rect1",_y,"110"); // assigna una nova coordenada y a l'exemplar
   gotoAndPlay(2); // fa passar l'animació al fotograma número 2 i en permet la continuació
}

setProperty("rect1",_alpha,"25");

duplicateMovieClip("rect1","rect2",1); // fa la duplicació
setProperty("rect2",_x,"150"); // estableix la coordenada x del nou exemplar
setProperty("rect2",_y,"100"); // estableix la coordenada y del nou exemplar

 

18.9. Posició del cursor del ratolí

La posició del cursor del ratolí és donada per les propietats

_xmouse
_ymouse

que fan referència a les coordenades horitzontal i vertical, respectivament.

El programa que conté aquestes propietats ha d'anar vinculat a un clip, el centre del qual fa d'origen de coordenades. Però com que la mesura no fa cap referència a una propietat d'un objecte, sinó al cursor del ratolí, els termes _xmouse i _ymouse s'usen absolutament, és a dir, sense prefix d'objecte.

Aquesta animació mostra en tot moment les coordenades del cursor i, en fer clic en un punt determinat, hi trasllada el cercle vermell que inicialment ocupa el centre de l'animació.

Els elements de l'animació són

  • Un exemplar, base1, d'un clip anomenat base: el rectangle verd.
  • Un exemplar, boleta, d'un altre clip, anomenat bola): el cercle vermell.
  • Un text dinàmic, anomenat coordenades.

Vinculat a base1 hi ha el programa següent:

onClipEvent (mousemove){
   valx=_xmouse;
   valy=_ymouse;
   _root.coordenades=valx+"; "+valy;
}
   onClipEvent (mouseDown){
   _root.boleta._x=valx+200;
   _root.boleta._y=valy+150;
}

Notem que les coordenades subministrades per la primera part del programa prenen com a origen el centre del rectangle verd, ja que el programa està viculat a aquest; en canvi, la posició del cercle vermell s'ha de donar en relació a l'animació; per això hi sumem 200 i 150, respectivament.