TUTORIAL DE MOTORS (3a part)-(ACTIONSCRIPT-ALEX)

Quan només volem controlar una sola propietat ( per exemple desplaçar una cosa en una direcció només ) llavors es podria simplificar el motor força. També teniu l'exemple al FTP.

La simplificació consisteix en fer els següents canvis:

A. Eliminació de la instància "motor1" puig que no la necessitem ja.
Volem que el clip q(del qual la instància es diu "q1") es comporti com el motor que teniem en l'exemple anterior. Per la qual cosa programarem ara la línia de temps de q de forma similar a la que teniem al motor amb bucles per avençar o retrocedir.

B. Ús de la propietat _y o _x en contes de la variable i, que teniem al motor.

C. Eliminació de les accions que teniem a la línia de temps principal. Fins i tot amb un sól de fotograma a la línia de temps principal en tindriem prou.


A continuació veieu els elements que farem servir.






Fixeu-vos en que la línia de temps principal no assignarem cap acció.





I en canvi a la línia de temps del clip de película q hem posat ara els fotogrames amb les accions que en l'exemple anterior teniem al clip motor. Aquí tenim cinc fotogrames que compleixen la mateixa funció havent-hi també dos bucles.






A continuació el codi que hi ha a cada fotograma de la capa accions:

FOTOGRAMA1


//per evitar que es posi en
//marxa el motor.

stop();




FOTOGRAMA2


//Per fer que creixi la _x en una unitat

this._x=this._x+1;




FOTOGRAMA3


// per evitar que la peli passi
//al fotograma 4
// i vagi fent així bucles entre els
// fotogrames 2 i 3

gotoAndPlay(2);





FOTOGRAMA4


// per fer que el valor de
// la variable _x disminueixi
// en una unitat.

this._x=this._x-1;



FOTOGRAMA5


// per evitar que la peli torni al
// fotograma 1 i a més també per
// que faci un bucle entre els 3-4

gotoAndPlay(4);





A continuació el codi que hi ha als botons:

BOTÓ DRET

// Quan apretem "press" en aquest botó
// enviem a reproduir-se el
// segon fotograma del q



on(press){
this.q1.gotoAndPlay(2);

}


// Quan deixem anar el dit del ratolí
// "release" el q s'atura estigui
// on estigui.

on(release){
this.q1.stop();

}




BOTÓ ESQUERRE


// Quan apretem "press" en aquest botó
// enviem a reproduir-se el
// quart fotograma del q


on(press){
this.q1.gotoAndPlay(4);

}


// Quan deixem anar el dit del ratolí
// "release" el q s'atura estigui
// on estigui.

on(release){
this.q1.stop();

}

TUTORIAL DE MOTORS (2a part)-(ACTIONSCRIPT-ALEX)

Afegits a l'exercici anterior.

En l'article anterior vam definir un clip anomenat motor, del qual a la seva instància li vam posar com a nom d'instància "motor1". La raó per la qual vaig posar-li aquest nom: "motor1" és simplement que vull duplicar aquesta instància i a la còpia posar-li de nom "motor2". Així amb dos motors independents podrem controlar també moviments i propietats independents. Per exemple: entre d'altres coses podriem controlar tant la posició vertical com la horitzontal.


ALTRES PROPIETATS(de moment):
_x
_y
_alpha(amb valors de 0-100)
_rotation(angle)
_currentframe (informa o defineix el fotograma en el que està la instància)
_width (informa o defineix la amplada de la instància)
_height (informa o defineix de la alçada de la instància)
_xscale (informa o defineix de la escala horitzontal de la instància)
_yscale (informa o defineix de la escala vertical de la instància)

[Això s'ampliarà amb les noves propietats que incorpora Flash8]



EXERCICI:

Dupliqueu la instància "motor1", canviant-li el nom a "motor2", "motor3",... per cada propietat que volgeu controlar. També cal que dupliqueu cada parell de botons per controlar cadascún d'aquests altres motors.

Cada parell nou de botons que feu haurà de controlar un motor diferent per tant fixeu-vos d'assegurar-vos que us esteu referint a la instància adequada. Fixeu-vos en els enrutaments.

Haureu d'afegir línies al fotograma 1 de la línia de temps principal per poder controlar aquelles altres propietats. Per exemple:

this.q1._y=this.motor2.i;
this.q1._rotation=this.motor3.i;
etc...

[ A veure que s'us acut per controlar aquestes altres propietats. ]

TUTORIAL DE MOTORS (ACTIONSCRIPT - ALEX )

Recapitulació

  1. Ja heu conegut la finestra "Acciones".
  2. Heu fet control de línies de temps de películes.
    1. Heu fet canvi d'escenes a la línia de temps principal.
    2. Heu activat la línia de temps d'un clip de película en que hi havia una oscilació. Recordeu que calia posar noms a les instàncies per poder referir-nos a ella.
    3. Heu anidat un clip de película a dins de l'estat sobre d'un botó.
    4. Heu fet una botonera per poder simular altres estats que no estàn previstos als botons reals de flash. Aquest exercici és continuació del que es va fer el divendres però en una aplicació pràctica diferent.

  3. Hem fet servir el punt de mira per enrutar correctament el cap a la instància que volem, això sí: prèviament les hem nomenades.

Introducció

L'exercici que farem a continuació és la base per poder entendre altres d'exercicis importants que vindràn més endavant. Amb aquest exercici a més de utilitzar lo que heu fet fins ara com a novetat:

  1. Coneixereu les variables i la seva utilitat.
  2. Veureu entre d'altres les propietats: _x i _y i la seva sintàxi.
  3. Com que les variables seràn locals caldrà saber fer correctament els enrutaments per poder referir-nos, no tan sols a la instància concretas sino també a la variable d'aquella instància concreta.

NOTA: La manera amb que s'explica aquest exercici no és la única forma de fer-ho. Amb lo que sabeu fins ara s'ha de fer així. Es podria simplificar i fer variacions a partir d'aquest. Està presentat així per que us fixeu en coses com els enrutaments i variables i també per que separeu conceptes.





Objectiu d'aquest exercici.
Desplaçar el quadrat del mig que té com a nom d'instància "q1" a voluntat de l'usuari que ho controlarà amb els botons.


Mireu el croquis.

Quan els botons els apretem posen en marxa el motor1 i la instància q1 es desplaça.

[ "Això són faves comptades!". ;) ]

Etapes a seguir:

1. CREAR ELS BOTONS I ELS CLIPS motor i q
i posar com a noms d'instància respectivament "motor1" i "q1". Hem de procurar que la creu d'aquest clip de película estigui a la cantonada esquerre superior del clip ja que la creu serà el que prendrà com a referència el flash per desplaçar-lo.





2. PROGRAMAR LA LÍNIA DE TEMPS DEL CLIP motor.

El clip de película motor el farem servir per generar una variable que anirà creixent o decreixent. El valor d'aquesta variable l'aprofitarem des de fora. Serà una variable de la qual el seu valor serà llegit des de la línia de temps principal.

A) Al clip motor1 han d'haver aquests fotogrames:




CODI DEL FOTOGRAMA 1

//per iniciar la variable i
// i per declarar-la numèrica.

i=0;



//per evitar que es posi en
//marxa el motor quan es reprodueixi la //pelicula.

stop();




CODI DEL FOTOGRAMA 2

//Per fer que creixi la i en una unitat

i=i+1;




CODI DEL FOTOGRAMA 3

// per evitar que la peli passi al fotograma 4
// i vagi fent així bucles entre els
// fotogrames 2 i 3 de tal manera que
// cada volta que passi pel 2
// revaloritzi la variable i

gotoAndPlay(2);




CODI DEL FOTOGRAMA 4

// per fer que el valor de
// la variable i disminueixi
// en una unitat.

i=i-1;




CODI DEL FOTOGRAMA 5

// per evitar que la peli torni al
// fotograma 1 i a més també per
// que faci un bucle entre els f3 i f4
//per que redueixi el valor de
//la variable i...

gotoAndPlay(4);






3. PROGRAMAR LA LÍNIA DE TEMPS PRINCIPAL. A la línia de temps principal definirem la propietat _x de la instància "q1" en funció del que valgui la variable i de la instància "motor1". Dit en altres paraules: a la línia de temps principal definirem una mena de correa de transmissió que transmetrà el creixement o decreixementde la variable i del motor a la coordenada x de q1.

FOTOGRAMA 1

//x0 es la posición horizontal
// inicial de q1.

x0=250;



// this..q1._x es la
// coordenada x de q1.

this.q1._x=_root.motor1.i+250;


FOTOGRAMA 2

// para que vuelva al fotograma 1
// para reevaluar el valor de la
// coordenada x de q1

gotoAndPlay(1);






4. PROGRAMAR ELS BOTONS per a que l'usuari pogui donar la ordre de posar en marxa el motor i amb això faci que q1 es desplaci cap a la dreta o l'esquerra.


BOTÓ DRET

// Quan apretem "press" en aquest botó
// enviem a reproduir-se el
// segon fotograma del motor1
//
// Recordeu que el segon fotograma
// del motor és aquell que i=i+1;
// és a dir que és el que creix.

on(press){
this.motor1.gotoAndPlay(2);

}


// Quan deixem anar el dit del ratolí
// "release" el motor s'atura estigui
// on estigui.

on(release){
this.motor1.stop();

}




BOTÓ ESQUERRE


// Quan apretem "press" en aquest botó
// enviem a reproduir-se el
// quart fotograma del motor1
//
// Recordeu que el quart fotograma
// del motor és el que la i=i-1;
// es a dir que és el que decreix.

on(press){
this.motor1.gotoAndPlay(4);

}


// Quan deixem anar el dit del ratolí
// "release" el motor s'atura estigui
// on estigui.

on(release){
this.motor1.stop();

}








CONCLUSSIONS:
[Ja que aquests exemples no es poden explicar de forma linial... i al principi costa... Fixeu-vos en les connexions].

1. Amb els botons controlem la línia de temps de motor1 enviant a un primer bucle(2-3) o a un segon bucle(4-5). [BOTONS connecten amb MOTOR1]. També amb els butons, quan es deixa anar el dit del ratolí, ordenem que s'aturi el motor1.

2. A la línia de temps principal, al fotograma 1, definim la propietat _x de la instància q1 en funció del que llegeixi que val la variable i del motor1. [BOTONS connecten amb MOTOR1].

En resum. Amb els botons controlem el motor1. I amb els fotogrames de la línia principal de temps controlem el que val el clip de película en funció del que valgui la variable i del motor.







COMENTARIS:

ESTUDIEU AQUEST EXEMPLE I TRACTEU D'ANALITZAR EL PERQUÈ DE CADA COSA. TRACTEU DE PREGUNTAR-ME TOTS ELS DUBTES. SI POT SER EN AQUEST BLOG MILLOR AIXÍ PODRÉ AMPLIAR AQUEST ARTICLE.





Teniu un exemple a la carpeta Apunts/Declasse/ en la data d'avui del FTP vostre