Animació a partir de la modificació de les propietats d'un clip de pel·lícula  
 
 
   
En aquesta primera pràctica, començareu a treballar l'animació modificant les propietats de la instància d'un clip de pel·lícula, encara que com, posteriorment veureu, es poden crear animacions amb altres tècniques.
 
 
  • Familiaritzar-se amb les propietats i incidències dels clips de pel·lícula.
  • Conèixer el sistema de coordenades dels clips de pel·lícula.
  
 

 

 
  
Desenvolupament de la pràctica  
    

Quan es crea una animació, el que s'està fent realment és modificar les propietats d'una instància. Això es pot fer en temps de disseny o temps d'execució, és a dir, amb programació.

 
.
   Com haureu pogut comprovar a les pràctiques del mòdul 1, el que es modifica realment són les propietats de la instància, no les del clip mestre que es troba a la biblioteca (movieClip) i té el seu nom.  
 
 

» Recupereu l'arxiu comprimit (en format ZIP): mascota.zip.

 
 

 

 
  » Obriu la biblioteca i creeu una instància a l'escenari del movie clip mussol2. Recordeu que s'ha d'arrossegar de la biblioteca a l'escenari.  
     
  » Anomeneu a la instància mussol.  
     
  Ara ja podeu modificar les propietats introduint el codi necessari dins les incidències. Si el que voleu és només canviar alguna propietat solament una única vegada en la reproducció, ja en teniu prou amb la incidència Load. Però si el que voleu és canviar dinàmicament alguna de les propietats per crear animacions, haureu d'utilitzar la incidència enterFrame.  
     
  Per introduir el codi, utilitzeu un clip de pel·lícula nou anomenat programa. Aquest clip de pel·lícula serà solament un contenidor de codi.  
     
  » Creeu un altre clip de pel·lícula i anomeneu-lo programa.  
 

 

 
  » Escriviu, com a nom d'instància, també la paraula programa.  
     
 
 
     
 
Imatge núm. 1
 
      
  » Arrossegueu-lo fora de l'escenari, tal com podeu observar a la imatge 1.  
 

  

 
  Aquesta instància no és necessari que tingui nom, ja que no en modificareu les propietats, solament és un contenidor de codi que controlarà les accions dels altres clips. Aquesta és una de les tècniques d'organitzar el codi font en la programació.  
      
 

Ara dotareu de moviment cap a la dreta el clip de pel·lícula que teniu sobre l'escenari, i controlareu que, quan surti del límit de l'escenari, aparegui a l'inici d'aquest escenari.

És clar que heu d'anar fent un increment de la coordenada de l'eix X, i controlareu la sortida de l'escenari amb una condició de superació dels límits d'aquest escenari.

 
 

  

 
  » Creeu una incidència enterFrame dins la instància controladora que heu creat abans fora de l'escenari.  
       
  » Inseriu el codi següent dins la incidència enterFrame:  
     
 

onClipEvent (enterFrame) {
_root.mussol._x++;
}

 
      
  Una altra forma de poder-ho aconseguir seria utilitzar les variacions i les millores desenvolupades a partir de la versió MX: es posa el codi en el mateix fotograma clau de la línia principal de temps com a funció. Aquí teniu un exemple de com quedaria el codi:  
      
 
_root.onEnterFrame = function() {
_root.mussol._x++;
}
 
      
  S'ha optat per la primera opció, ja que és compatible amb totes les versions anteriors de Flash i, a més a més, no deixa de ser una bona forma d'organitzar el codi en clips externs a l'escenari que controlen les accions del altres clips.  
      
  » Proveu la pel·lícula i observeu que el clip de pel·lícula es mou cap a la dreta i, en finalitzar les dimensions d'amplada de l'escenari, desapareix.  
       
  Observeu que la seva velocitat ve marcada pels fotogrames per segon predeterminats a la pel·lícula, que, en el vostre cas, serien dotze fotogrames per segon i correspondria a dotze píxels per segon.  
     
  »  Modifiqueu el nombre de fotogrames per segon a 120, que és el màxim que permet el Flash, i comproveu la variació de la velocitat. Això ho podeu modificar des de la programació fent que es vagin incrementant el nombre de píxels a mesura que avanci cada vegada, sense variar el nombre de fotogrames per segon.  
       
  » Torneu a modificar el nombre de fotogrames per segon i establiu-lo a 12 fotogrames per segon.  
       
  » Modifiqueu el codi anterior perquè cada vegada que es produeixi la incidència enterFrame avanci 5 píxels. Això correspondria a 12 f/s multiplicat per 5 píxels que avança cada enterFrame dóna un resultat de 60 píxels per segon.  
     
 
onClipEvent (enterFrame) {
_root.mussol._x+=5;
}
 
     
  Si voleu que tingui la velocitat de 120 píxels per segon, hauríeu de fer un increment de 10 píxels a la coordenada X que, multiplicat per 12 f/s, obtindríeu la mateixa velocitat que si modifiqueu la línia de temps a 120 f/s. Podeu observar que l'efecte visual no és el mateix, ja que es veuen les modificacions de la posició, però, en canvi, s'aconsegueix superar amb aquesta tècnica la barrera dels 120 píxels establerts com a velocitat màxima.  
       
  Depenent de l'aplicació que es vulgui fer, utilitzareu una tècnica o l'altra.  
     
  Per protegir que, quan se sobrepassin els límits de l'escenari, desaparegui el clip de pel·lícula, haureu d'incloure les condicions següents:  
     
 
onClipEvent (enterFrame) {
_root.mussol._x+=5;
if (_root.mussol._x>400) {
_root.mussol._x=1;

}

}
 
     
  Ara, proveu les propietats que modificaran l'escala del clip de pel·lícula. Aquestes propietats són: _xscale, _yxcale, width i height.  
      
  Feu que l'escala del clip vagi augmentant a mesura que vagi canviant la seva posició cap a la dreta i que torni a recuperar les seves dimensions originals quan la seva propietat _x (coordenada x) tingui el valor 1. Això farà l'efecte que el clip s'està apropant a vosaltres.  
      
  Primer, heu de desar les dimensions del clip de pel·lícula original (mussol) a les variables ample i alt.  
     
  » Inseriu el codi següent a la incidència Load.  
      
 

onClipEvent (load) {

_root.ample=_root.mussol._width;
_root.alt=_root.mussol._height;

}

 
      
  »  Inseriu el codi següent dins la incidència enterFrame i proveu la pel·lícula.  
      
 
onClipEvent (enterFrame) {
_root.mussol._x += 5;
_root.mussol._xscale += 0.5;
_root.mussol._yscale += 0.5;
if (_root.mussol._x>400) {
_root.mussol._x = 1;
_root.mussol._width = _root.ample;
_root.mussol._height = _root.alt;
}
}
 
     
  Observeu que, si la coordenada _x del punt d'inserció del clip (punt de registre) mussol és superior a 400, el clip comença a la coordenada _x=1, i restableix les dimensions originals que tornarà a escalar a mesura que avanci cap a la dreta.  
      
     
  Fins ara, encara no heu introduït interactivitat a l'animació. Però segurament ja imagineu que es poden fer moltes coses si combineu aquestes incidències amb les dels botons.  
 
Deseu aquesta pel·lícula amb el nom infantil1.fla.