Animacions mitjançant la generació dinàmica de clips  
 
 
 

En les dues pràctiques anteriors, heu practicat la duplicació de clips i subclips de pel·lícula. En aquesta pràctica, treballareu més amb la creació d'animacions mitjançant la duplicació.

També treballareu el mètode que permet canviar la profunditat de les instàncies.

Un altre concepte important és l'anomenat punt de registre d'un clip, que us permetrà conèixer les coordenades locals i globals dels diferents clips de pel·lícula.

Els objectius d'aquesta primera pràctica són:

    • Descobrir les possibilitats de l'animació mitjançant la duplicació de clips.
    • Treballar amb el concepte de profunditat de clip.
    • Treballar amb la composició i el moviment dels clips i subclips tenint en compte el seu punt de registre.
 
       
Desenvolupament de la pràctica  
    
En aquesta pràctica, creareu un petit programa que permetrà controlar interactivament el moviment de rotació i l'escala d'un nombre de clips de pel·lícula definits per l'usuari/ària.  
      
Un dels objectius és aconseguir que els objectes tinguin moviments sincronitzats i que la seva distribució en l'espai sigui també sincronitzada depenent de la mida de les propietats d'amplada o d'alçada de cada clip de pel·lícula.
  
  Es tracta, també, de poder aplicar aquest tipus d'animació a qualsevol objecte.  
    
Feu clic per executar l'aplicació
  
»  Obriu l'arxiu avions.fla.
  
  »  Arrossegueu una instància del clip que teniu en la biblioteca, a l'escenari, i anomeneu-la avio (recordeu, com a programadors, la conveniència de no utilitzar accents en els noms d'instàncies, funcions..., encara que el Flash ho permet).  
      
  Ara es tracta de crear una funció amb un paràmetre amb l'objectiu que us serveixi per fer un nombre determinat de còpies d'aquesta instància. Però abans heu de crear les variables per inicialitzar els valors que es modificaran.  
  
  »   Inseriu al fotograma clau de la pel·lícula principal el codi següent:  
  

inix = _root.avio._x;
iniy = _root.avio._y;
xscale = _root.avio._xscale;
yscale = _root.avio._yscale;
tipus = 1;
navions = 2;
unitat = 3;

  
Les variables inix i iniy s'utilitzen per emmagatzemar la posició de les coordenades del clip que ara anomenem ja clip pare avio, ja que aquest serà el clip mestre que farà totes les operacions deixant còpies a mesura que es va movent.
  
  Les variables xscale i yscale s'utilitzen per emmagatzemar l'escala inicial del clip, ja que aquesta és una propietat que l'usuari/ària del programa també podrà modificar.  
  
  La variable tipus us servirà més endavant per poder accedir als fotogrames restants del clip avio, i aplicar, d'aquesta forma, l'animació a altres objectes.  
  
La variable navions la utilitzareu per controlar el nombre de còpies del clip avio que es generaran mitjançant la funció que creareu.
  
  La variable unitat correspon a una unitat arbitrària que creareu per poder definir la mida de l'escala global del clip. Heu de tenir en compte que, si un clip de pel·lícula el poseu ja escalat a l'escenari, les propietats _xscale i _yscale poden tenir altres resultats no previsibles.  
  
  »  Comenceu creant una funció que anomenareu mida(unitat). Aquesta funció la podeu crear, també, en el fotograma clau de la pel·lícula principal. S'ha escollit com a unitat arbitrària per poder augmentar o disminuir una sisena part del clip de pel·lícula original.  
      
 

function mida (unitat) {
_root.avio._xscale = xscale*(unitat/6);
_root.avio._yscale = yscale*(unitat/6);
}

 
      
  Aquesta funció té com a objectiu escalar el clip avio en fraccions d'1/6 de l'escala inicial.  
      
  »  Ara creareu la funció que us permetrà fer les duplicacions segons un paràmetre que l'usuari/ària ha d'introduir en un quadre de text d'entrada.  
      
 

function creaavio (navions) {

_root.avio._x = inix;

for (var n = 0; n<navions; n++) {
_root.avio.duplicateMovieClip("avio"+n, n);
_root.avio._x = _root.avio._x+_root.avio._width+0.5;
eval("_root.avio"+n).gotoAndStop(tipus);

}
_root.avio._x = 1000;

}

 
      
  Abans que es comenci a executar el bucle de duplicacions, s'ha emmagatzemat la posició de la coordenada X del clip avio, ja que voleu que sempre es dupliqui des d'aquesta posició.  
      
  Si observeu, després del codi de duplicació _root.avio.duplicateMovieClip(), heu afegit unes accions amb la funció principal de situar cada còpia del clip pare avio a una distància que correspon a l'amplada del clip més 0.5 píxels.  
      
  La sentència següent, eval("_root.avio"+n).gotoAndStop(tipus), permetrà accedir mitjançant la variable tipus al fotograma següent, on es trobarà un altre objecte segons el nombre de fotograma que correspon a la variable tipus. Podeu esbrinar que cada fotograma té un objecte gràfic diferent i, quan s'executa l'acció gotoAndStop(tipus), feu que es mostri el dibuix corresponent del clip.  
      
  Per últim, la sentència _root.avio._x = 1000; amaga fora de l'escenari el clip pare avio una vegada s'ha duplicat el nombre de vegades predefinit.  
      
      
 

» Ara comproveu el funcionament correcte del programa.

Per executar i provar les funcions, afegiu el codi següent al final del les accions del fotograma clau de la pel·lícula principal.

_root.mida(4);
_root.creaavio(4);

 
     
  Ara, si tot ha anat bé, el programa haurà creat quatre avions amb una mida de quatre unitats.  
      
 

» Observeu, també, les distàncies entre cada clip duplicat, que han de ser sempre les mateixes.

Ara es tracta de crear animacions de cada clip mitjançant rotació. Cada clip duplicat haurà de girar prenent com a centre el seu punt de registre. Per fer-lo, creeu un clip de pel·lícula nou fora de l'escenari amb l'objectiu de programar/controlar les animacions dels clips duplicats.

 
      
  » Anomeneu a aquest clip de pel·lícula nou accions.  
      
  »  Afegiu una incidència enterFrame i inseriu el codi següent:  
      
 

 

onClipEvent (enterFrame) {

_root.avio._rotation = _root.avio._rotation+5;
_root.mida(4);
_root.creaavio(5);

}

 
     
  Amb la primera línia, heu definit una rotació de 5 graus per a cada vegada que entri el fotograma. Recordeu que, per defecte, el nombre de fotogrames per segon en una pel·lícula és de 12. Per tant, 5 graus x 12 = 60 graus.  
      
 
A la segona i la tercera línia dins la incidència, heu cridat a les funcions per crear cinc avions amb una mida de quatre unitats.
 
      
  Aprofiteu aquest programa per veure els efectes diferents que es produeixen en variar la distància del clip respecte al seu punt de registre.  
     
 
      
  Modificant aquesta distància, podeu canviar una animació per rotació a una animació per translació. Si el punt de registre està al centre del clip, es produeix una rotació; en canvi, si augmenteu la distància entre el clip i el punt de registre, semblarà més una translació.  
      
 

» El pas següent serà crear un quadre de diàleg per a l'entrada de dades amb la finalitat que l'usuari/ària pugui definir els paràmetres de les funcions i no solament quedi a mans del programador.

 
      
 
 
Quadre de diàleg que es pot arrossegar
 
       
 

El quadre de diàleg que podeu observar a la imatge 1 és un clip de pel·lícula i a dins d'aquest creareu:

  • Etiquetes (textos)
  • Camps d'entrada de text de tipus input
  • Dos botons en forma de fletxa
  • Un botó (barra superior de color blau) que permet arrossegar el quadre sencer
 
      
  »  Creeu aquest quadre de diàleg. Recordeu que la barra blava és un botó dins el clip.  
      
 

» Recordeu, també, assignar als camps de text les variables:

  • _root.unitat (nombre d'objectes)
  • _root.mida (mida)
 
      
  Respecte als botons fletxa, us serviran per saltar al fotograma següent del clip avio i poder, així, veure l'animació dels altres objectes. El codi de cada botó serà, respectivament:  
      
 

//Botó fletxa dreta

on (release) {
_root.avio.gotoAndStop (_root.tipus++);
}

//Botó fletxa esquerra

on (release) {
_root.avio.gotoAndStop (_root.tipus--);
}

 
     
  Ara ja teniu preparat el quadre de diàleg, però us falta modificar el codi del clip accions perquè rebi bé aquestes variables (navions, unitat).  
      
  »  Recordeu esborrar les accions del fotograma principal que havíeu fet de prova:  
      
  _root.mida(4);
_root.creaavio(4);
 
     
  »  Modifiqueu el codi de la incidència enterFrame.  
     
  El codi hauria de quedar així:  
      
 

 

onClipEvent (enterFrame) {

_root.avio._rotation = _root.avio._rotation+5;
_root.mida(_root.unitat);
_root.creaavio(_root.navions);

}

 
     
  »  Proveu el programa. Us adonareu que si creu, per exemple, deu avions i després intenteu crear-ne quatre, el programa no esborra el sis restants. Per solucionar aquest problema, creeu al fotograma clau de la pel·lícula principal una funció especial per esborrar tots els clips de pel·lícula que comencin per la paraula avio, d'aquesta forma, esborrarà i crearà de nou el nombre d'avions definit per l'usuari/ària.  
     
 

function esborraavio () {

for (z in _root) {

if (_root[z]._name.substr(0, 4) == "avio") {
_root[z].removeMovieClip();
}

}

}

 
     
  »  Inseriu la crida a aquesta funció en el clip accions que teniu fora de l'escenari.  
     
 

onClipEvent (enterFrame) {
_root.avio._rotation = _root.avio._rotation+5;
_root.esborraavio();
_root.mida(_root.unitat);
_root.creaavio(_root.navions);
}

 
       
  » Proveu la pel·lícula i comproveu que es creen els avions amb la mida corresponent quan s'introdueixen aquestes dades al quadre de diàleg.  
     
  »  Comproveu, també, la visualització dels altres objectes mitjançant els botons fletxa del quadre de diàleg.  
     
  Per completar l'exercici, podeu afegir objectes nous al clip avio, cadascun en un marc diferent. Modifiqueu la distància al punt de registre o la forma de cada gràfic. Es recorda, també, que no hi ha protecció en el valor que han d'emmagatzemar les variables del programa, i que podeu protegir amb condicions (en el cas de seguir fent clic als respectius botons de fletxes, aquests valors poden estar per sota de l'1 o per sobre del nombre de marcs on teniu els objectes del clip avio).  
     
  Podeu desar ja la pel·lícula al vostre disc dur.