Generació dinàmica de subclips. Relació entre clip i subclips
 
 
  En aquesta pràctica, veureu les possibilitats de la generació dinàmica de clips i subclips de pel·lícula tenint en compte la relació de jerarquia i dependència que s'estableix.  
      
  També creareu les primeres funcions en ActionScript amb l'objectiu d'organitzar el codi d'una forma més modular i aclaridora.  
       
Desenvolupament de la pràctica  
   
» Recupereu l'arxiu casa.fla.
   

En aquesta activitat, heu de tractar de duplicar un clip de pel·lícula pare/mare al mateix temps que un subclip.

       
  S'entén per clip pare/mare un símbol movieClip que es duplica a d'altres que s'anomenen clips fills. Aquests, els clips fills, hereten les propietats del clip pare/mare.  
      
  Respecte a un subclip, es pot dir que és un clip que s'ubica dins un altre clip de pel·lícula i, per tant, té un nivell inferior en la jerarquia. També es pot anomenar clip fill, ja que les seves propietats també depenen del clip contenidor. Per tant, podeu diferenciar entre clip fill duplicat i subclip o clip fill no duplicat. Es pot afirmar que un subclip no es genera obligatòriament per duplicació, en canvi, el clip duplicat sempre es pot generar en temps d'execució amb l'ordre duplicateMovieClip.  
      
  Però vegeu a la pràctica aquests conceptes, ja que es tot serà més clar.  
 

  

 
  Si heu obert ja l'arxiu casa.fla, observareu que hi ha dos símbols de tipus gràfic.  
      
 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Imatge núm. 1
 
  
Es tracta de crear una aplicació petita que permeti la duplicació d'un nombre de cases i un nombre de finestres desitjat per l'usuari/ària. Però aquesta duplicació s'ha de fer mantenint la jerarquia en la qual la finestra és un subclip inclòs en el clip pare/mare casa.
  
» Creeu un clip de pel·lícula a partir del símbol gràfic gcasa.
  
» Creeu, també, un símbol de pel·lícula a partir del símbol gràfic gfinestra, però aquesta vegada dins el clip gcasa.
  
Amb la finalitat d'observar la relació entre aquests dos clips, programeu cada clip perquè es puguin arrossegar per l'escenari.
  
» Creeu una instància anomenada casa del clip gcasa i un altra finestra del clip gfinestra (inclosa dins el clip gcasa).
  
» Inseriu el codi següent a la instància casa.
  

onClipEvent (mouseDown) {

if (this.hitTest(_root._xmouse, _root._ymouse,true)) {
this.startDrag();
}

}

onClipEvent (mouseUp) {

if (this.hitTest(_root._xmouse, _root._ymouse,true)) {
this.stopDrag();
}

}

  
  
» Comproveu que, si arrossegueu la casa, la finestra estarà immòbil dins el clip pare i que no es pot arrossegar de forma independent.
  
Una solució senzilla per resoldre aquest problema és crear dins el clip finestra un botó amb el codi següent:
  

on (press) {
startDrag("");
}
on (release) {
stopDrag();
}

  
Aquest codi, com ja sabeu, permet arrossegar la instància finestra a través del botó que la conté.
  
» Creeu un botó dins la instància finestra amb el codi anterior.
  
» Comproveu, ara, que la finestra es pot arrossegar independentment del seu clip pare/mare.
  
Ara ha arribat el moment de fer famílies. Ens referim, és clar, a generar duplicats del clip pare/mare i també del subclip finestra. Com que el nom finestra de la instància és un nom molt llarg i ho heu d'escriure moltes vegades, canvieu-lo pel nom f.
  
» Entreu el codi següent al fotograma clau de la pel·lícula principal:
  

inix = _root.casa._x;
ncasas = 1;
nfinestres = 1;

  
Amb aquest codi, primer deseu el valor de la coordenada X de la instància casa, ja que, quan es generin els duplicats, aquesta instància canviarà la seva posició horitzontal.
  
Amb la segona i la tercera línia, utilitzeu dues variables per inicialitzar el nombre de duplicacions.
  
» Afegiu al codi anterior el codi següent:
  

function crearcasa () {

for (var n = 0; n<ncasas; n++) {

_root.casa.duplicateMovieClip("casa"+n, n);
_root.casa._x = _root.casa._x+_root.casa._width+1;

for (var n2 = 1; n2<nfinestres; n2++) {
eval("_root.casa"+n+".f").duplicateMovieClip("f"+n2, n2+100);
eval("_root.casa"+n+".f")._x =
eval("_root.casa"+n+".f")._width+eval("_root.casa"+n+".f")._x+1;
}

}
_root.casa._x = 1000;

}

  
 Com podeu veure, es tracta d'una funció. Ja sabeu que les funcions faciliten i estalvien moltes tasques repetitives i ajuden a organitzar millor el codi dels programes.
  
 Aquesta funció anomenada crearcasa té la tasca, no solament de crear duplicats de clip casa, sinó també de duplicar un nombre determinat de finestres per a cada casa.
  
Com podeu observar, esteu utilitzant un bucle imbricat dins un altre. El segon bucle duplica les finestres per a cada casa que duplica el primer bucle.
  
Amb la instrucció Amb = _root.casa._x+_root.casa._width+1, el programa situa cada casa duplicada a un píxel de l'anterior en l'eix de coordenades X. Si varieu aquest nombre, podeu comprovar com canvia la separació entre les instàncies duplicades.
  
L'ordre que us pot semblar més complexa pot ser aquesta:
  
eval("_root.casa"+n+".f").duplicateMovieClip("f"+n2, n2+100);
  
Amb aquestes accions, el que esteu fent és simplement generar duplicacions de la instància finestra que heu anomenat f. El Flash crearà cadenes com la següent:
  
eval("_root.casa"+n+".f"), és a dir: _root.casa1.f.
  
duplicateMovieClip("f"+n2, n2+100), és a dir: _root.casa1.f1
 
Però per poder veure l'efecte de la duplicació, heu de cridar a la funció. Afegiu, al final del codi, l'activació de la funció: crearcasa();
  
Si executeu el programa, veureu només una casa amb una finestra. Podeu modificar les variables ncases i nfinestres per augmentar el nombre de duplicacions.
  
» Utilitzant el programa, creeu cinc cases amb dues finestres cadascuna, i comproveu que podeu arrossegar cada casa i cada finestra dins cada casa.
  
Però seria més interessant poder entrar el nombre de duplicacions en un quadre de text d'entrada, com en aquest exemple:
  

  
Observeu que no s'ha protegit el nombre màxim de cases o finistres que sortien de l'escenari.
  
Ara, acabeu la pràctica amb un resultat semblant a aquest i feu les proteccions corresponents perquè el programa tingui la consistència adient.
  
Deseu la pràctica amb el nom casa.fla.