LIMITAR MOVIMENTS 1 - EXERCICI DE MOTORS (5a part) ACTIONSCRIPT-ALEX

Introducció:
Amb lo que sabeu de motors i de condicionals podem limitar moviments. Això ens pot anar bé per fer scrolls de maquetacions de text amb imatges però que voldrem que tinguin límits per que no s'escapin.


Objectiu de l'exercici: Heu de fer que un clip amb text maquetat es desplaci cap amunt fent el que anomenem un "scroll". Observeu el croquis.



Fixeu-vos que posarem una màscara. La raó és estètica, per deixar marges a dalt i abaix. Amb la màscara la instància "maq1" no es veurà per fora de la màscara. Es veurà com segueix:




Pasos a seguir:

1) Crear el clip de película maqueta i posar-li com a nom d'instància "maq1". Heu de fer que la creu del clip estiqui a dalt de tot.

2) Crear els botons que ens serviràn per controlar si pujen o si baixen.

3) Distribuïr aquests objectes en capes i fer la capa màscara. Veieu la figura:


4) Programar clip maqueta. Tal i com vam fer a l'article anterior "TUTORIAL DE MOTORS (3a part) ACTIONSCRIPT-ALEX", el concepte de motor el definirem en el mateix clip. Per tant per dins del clip programarem dos bucles. Veieu com és la línia de temps del clip maqueta:

Veieu a continuació el codi que ha d'anar a cada un dels fotogrames de la capa accions:

FOTOGRAMA 1

//per evitar que es posi en marxa
stop();



//per definir la posició final
ymaxim=16;

//per definir la posició inicial
yminim=-126;


//Aquests valors els he obtingut colocant el
//clip manualment i mirant la seva coordenada y

FOTOGRAMA 2

// Per que puji la instància "maq1"
// noteu que disminueix en una unitat
// ja que l'eix de les Y creix cap avall


this._y=this._y-.25;

//he posat com a increment _0.25 per
//que no vagi tant depressa com
//aniria amb valor 1

FOTOGRAMA 3

gotoAndPlay(2);

FOTOGRAMA 4

// Per que baixi la instància "maq1"
// noteu que disminueix en una unitat
// ja que l'eix de les Y creix cap avall


this._y=this._y+.25;

FOTOGRAMA 5

gotoAndPlay(4);

5) Programar els botons per controlar el clip.

Veieu a continuació el codi que ha d'anar als botons:

BOTÓ PUJAR

//per que es posi en marxa
//el primer bucle
on(press){
this.maq1.gotoAndPlay(2);
}

on(release){
this.maq1.stop();
}

BOTÓ BAIXAR

//per que es posi en marxa
//el segon bucle
on(press){
this.maq1.gotoAndPlay(4);
}

on(release){
this.maq1.stop();
}

OBSERVACIÓ: FINS ARA NO HEM POSAT LIMITACIONS. COMPROVEU QUE AMB LO QUE TENIM FINS ARA LA INSTÀNCIA "maq1" encara pot sortir-se. En el pas següent s'explica com posar limitacions.

6) Limitar el moviment de la instància "maq1". Per fer això tenim dues opcions que relatem a continuació:

Posar la limitació als botons.

Veie-m'ho amb el BOTÓ BAIXAR com a exemple:

//per que es posi en marxa
//el segon bucle

on(press){

if(this.maq1.yminim<=this.maq1._y<=this.maq1.ymaxim) { this.maq1.gotoAndPlay(4); } else { this.maq1.stop(); }

}



//per que s'aturi quan deixem anar el dit del ratolí

on(release){

this.maq1.stop();

}

Posar la limitació als bucles.
Veiem com a exemple el codi que hauriem de posar llavors al primer bucle(fotograma 2) del clip maqueta com a exemple:

// Per que puji la instància "maq1"
// noteu que disminueix en una unitat
// ja que l'eix de les Y creix cap avall.

if(this._y<=ymaxim){
this._y=this._y+.25;
}
else
{
this.stop();
}

Teniu aquest exemple a la carpeta de l'FTP lesClasses/2007-12-09/ el seu nom és:
scroll_maqueta.fla