Combinació d'incidències per crear interactivitat a les animacions  
 
 
 

L'objectiu d'aquesta pràctica és conèixer com integrar les diferents incidències en una aplicació per crear interactivitat.

 
     
  Continuareu desenvolupant l'aplicació de la pràctica anterior per afegir més interaccions i funcionalitats.  
     
  Si en la pràctica anterior havíeu integrat botons en instàncies de movieClip, en aquesta fareu l'operació inversa: integrareu botons animats dins les instàncies de clips de pel·lícula.  
     
  Estudiareu, també, algunes de les possibilitats de la propietat_xscale per invertir el sentit dels moviments dels objectes.  
     
  Desenvolupament de la pràctica  
   
» Recupereu l'arxiu infantil2.fla que havíeu desat a la segona pràctica.  
    
Fins ara, havíeu creat dos botons, cadascun dels quals, en combinació amb l'incidència enterFrame de la instància programa, feia que les mascotes tinguessin moviment. Aquest moviment era el resultat de la modificació de les propietats d'aquests clips. Les mascotes eren simplement instàncies de clip de pel·lícules.
 
» Esborreu les instàncies mussol i esquirol perquè es pugui explicar aquest procediment des del seu inici.
 
Ara es tracta que les mascotes siguin sensibles a l'acció de l'usuari/ària. És a dir, tinguin respostes a incidències del ratolí mentre estan en moviment.
 
  Per aconseguir això, la solució més senzilla és utilitzar botons. Però els botons en versions anteriors a la verisó MX, per si mateixos no tenen propietats, per exemple, no poden incrementar la seva propietat _x i _y, que és el que, en el vostre cas, us interessa. Opteu per fer-ho d'aquesta manera perquè pugui servir per a totes les versions.  
     
  La solució és crear un clip de pel·lícula nou (mussol22) que inclogui un botó animat. Per tant, tindreu una estructura com aquesta de la imatge 1.  
     
 
Imatge núm. 1
 
Si analitzeu l'estructura representada a la imatge, podreu observar que es tracta d'un movieClip (mussol22) que conté un botó animat (bmussol), és a dir, el botó conté també un altre movieClip.
 
D'aquesta forma, podeu crear una instància d'un clip de pel·lícula que respondrà a l'acció del ratolí, ja que conté un botó i, al mateix temps, podreu canviar-ne les propietats.
 
» Creeu una instància com aquesta que s'ha explicat i anomeneu-la mussol, com al mòdul anterior.
 
Recordeu que aquesta instància ha d'incloure un botó animat.
 
Voleu que, quan es faci clic a la mascota mussol, aquesta canviï el seu moviment en sentit contrari.
 
Per aconseguir aquesta funcionalitat, creeu una variable a la incidència Load amb el nom de sentit. Aquesta tindrà la funció d'interruptor i els seus valors possibles seran: 1= dreta i 2= esquerra. Inicialitzareu el sentit amb el valor 1.
     
  » Afegiu a la incidència Load el codi: _root.sentit=1;  
     
 

onClipEvent (load) {

_root.mussol._visible=false;

_root.mussol._x=1;
_root.mussol._y=100;

_root.sentit=1;

}

 
     
  Aquest serà el seu valor inicial, i quan es faci clic a la instància mussol, aquesta canviarà el sentit del moviment. Per tant, heu de programar el botó que hi haurà a dins d'aquesta instància.  
 

 

 
  » Inseriu al botó d'aquesta instància el codi següent:  
 

on (release) {

if (_root.sentit == 2) {
_root.sentit = 1;
} else {
_root.sentit = 2;
}

}

     
Com podeu analitzar, aquesta variable és un interruptor que emmagatzema l'última acció de l'usuari/ària.
     
  El valor d'aquesta variable ha de ser avaluada al mateix temps que s'està reproduint la pel·lícula. Per tant, heu d'utilitzar una sentència condicional a la incidència enterFrame.  
     
  » Afegiu el codi següent a la incidència enterFrame de la instància programa.  
     
 

onClipEvent (enterFrame) {

if (eval(_root.mascota)._x>400){
eval(_root.mascota)._x = 1;
}

if (eval(_root.mascota)._x<1) {
eval(_root.mascota)._x = 400;}

if (_root.sentit == 1) {
eval(_root.mascota)._x += 5;
} else {
eval(_root.mascota)._x -= 5;}

}

 
     
  » Proveu el funcionament de la pel·lícula.  
     
  Si tot funciona bé, quan feu clic a la mascota que està en moviment, aquesta ha de canviar el sentit del moviment.  
     
  Però si observeu bé, quan feu clic per primera vegada, la mascota no gira. Ara intenteu solucionar aquest problema.  
 
  » Una solució perquè una instància d'un clip de pel·lícula canviï la seva orientació en sentit contrari respecte a l'eix de coordenades X és multiplicar la seva escala X per -1. D'aquesta forma, no queda modificada visualment la mida del clip, però sí la seva orientació.  
     
  » Inseriu al botó de la instància mussol el codi següent:  
   

on (release) {

if (_root.sentit == 2) {

_root.sentit = 1;
eval(_root.mascota)._xscale = (eval(_root.mascota)._xscale)*-1;

} else {

_root.sentit = 2;
eval(_root.mascota)._xscale = (eval(_root.mascota)._xscale)*-1;

}

}

 
   
   
  Amb aquest codi, heu programat el botó perquè funcioni com un interruptor. La seva funcionalitat consisteix que, quan l'usuari/ària faci clic, l'escala de la instància canvia de signe. El valor inicial del clip és 100 (percentatge). La propera vegada que l'usuari/ària faci clic, l'escala tindrà el valor de 100*-1= -100. Ara l'escala del clip val -100, si l'usuari/ària fa una segona vegada clic amb el ratolí, el valor de l'escala torna a ser positiu: -100*-1=100.  
     
     
  També podeu utilitzar la propietat_xscale com una variable interruptor. D'aquesta manera, no necessitareu la variable _root.sentit. Amb una sentència condicional, el programa avalua si l'escala té un valor positiu o negatiu, com podeu observar a l'exemple següent.  
     
 

on (release) {

if (eval(_root.mascota)._xscale>0) {

eval(_root.mascota)._xscale = (eval(_root.mascota)._xscale)*-1;

} else {

eval(_root.mascota)._xscale = (eval(_root.mascota)._xscale)*-1;

}

}

 
 
   
 
 
 
 
 


 
Deseu l'arxiu amb el nom infantil3.fla.