Il movimento di un oggetto, che abbiamo ottenuto finora con l'animazione, può essere ottenuto variando le coordinate tramite script.

L'esempio più semplice è il moto rettilineo uniforme.

Usiamo come esempio di partenza questo: movimento_inizio.fla

Selezioniamo il clip filmato dell'aereo, e inseriamo il codice:

onClipEvent {this._x=this._x+1;}

this._x=this._x+1;

this._x += 1;

In questo modo, all'esecuzione del filmato, il clip dell'aereo si sposterà di un pixel a destra per ogni esecuzione, creando un moto uniforme. Aumentando il valore, si aumenta la velocità dello spostamento.

Scarica il file sorgente: movimento_uniforme.fla

In questo esempio, al posto di scrivere direttamente un valore per la velocità nello script che muove il clip filmato, scriviamo una variabile:

onClipEvent (enterFrame) {
	this._x = this._x + _root.velocitax;
}

In questo modo, possiamo creare dei pulsanti che, modificando il valore della variabile, realizzeranno il movimento.

In questo esempio, abbiamo due pulsanti per il movimento a destra e sinistra, ed uno per fermare il movimento.

I due pulsanti laterali avranno il codice:

on (release) {
	_root.velocitax=-3;
	}

e

on (release) {
	_root.velocitax=3;
	}

mentre il pulsante centrale, che ferma il movimento avrà:

on (release) {
	_root.velocitax=0;
	}

Ecco il risultato:

Scarica il file sorgente: movimento_uniforme_controlli0.fla

Per esercizio, provate a creare anche i controlli per il movimento verticale.

Tramite script, si possono simulare diversi tipi di movimento (anche piuttosto complessi).

Vediamo qui un caso molto utile, che si realizza con una formula abbastanza semplice: il moto uniformemente decelerato.

Daremo al nostro filmato una meta da raggiungere in modo uniformemente decelerato. Se applichiamo ad un clip filmato questo codice:

onClipEvent (load) {
//questa la "meta", un valore di coordinata x:
meta=300;
//in quanti frame ci deve arrivare:
frame=10;
}
 
onClipEvent (enterFrame) {
this._x = this._x - ((this._x-meta)/frame);
}

Il clip filmato si sposterà in modo uniformemente decelerato fino alla coordinata x=400.

Vediamo come funziona:

nell'arco di dieci fotogrammi, (frame=10), il clip filmato si sposterà dalla sua posizione iniziale alla posizione _x=meta. Ad ogni fotogramma, viene sottratta alla posizione iniziale il risultato dell'espressione:

(differenza fra la posizione attuale e la meta programmata) diviso il numero di frame

Dato che ad ogni ciclo (ogni frame), la differenza diminuisce, l'effetto è di un moto uniformemente decelerato.

Il vantaggio di questa soluzione è che si può realizzare un moto molto fluido e realistico, soltanto variando la meta finale. In questo esempio ci sono due pulsanti che impostano la meta a 100px e a 500px:

Scarica il file sorgente:movimento_decelerato1.fla

Un esempio di controllo tramite mouse, potrebbe funzionare così:

aggiungendo questo codice:

onClipEvent (mouseDown) {
	meta=_root._xmouse;
	}

In questo modo, quando il mouse viene cliccato, la coordinata del puntatore del mouse (riferita allo stage) (_root._xmouse) viene impostata come meta. L'effetto è questo:

Scarica il file sorgente: movimento_decelerato_mouse.fla

Con lo stesso procedimento si può realizzare anche il movimento sull'asse y: in questo modo l'aereo si posiziona in corrispondenza del puntatore del mouse quanto si clicca:

Cominciamo ora con la creazione del nostro gioco. Saremo alla guida del nostro aereo, e dovremo fronteggiare orde di aerei nemici! (idea orginalissima). :)

Cominciamo a creare il movimento del nostro aereo, che controlleremo con la tastiera.

Per muovere l'aereo useremo il moto rettilineo uniforme.

Cominciamo da questo file: gioco_aereo_start.fla

Dopo aver trascinato un'istanza dell'oggetto aereo, inseriamo il seguente codice:

onClipEvent (load) {
	//assegnamo un valore alla variabile velocita
	velocita=10;}
 
//faremo eseguire questa istruzione ad ogni fotogramma (in modo continuo)
onClipEvent (enterFrame) {
if (Key.isDown(Key.UP)) {
		this._y = this._y - velocita;
	} else if (Key.isDown(Key.LEFT)) {
//se è premuto il tasto sinistra, sposteremo l'aereo a sinistra, e cosi via...
		this._x = this._x - velocita;
	} else if (Key.isDown(Key.DOWN)) {
		this._y = this._y + velocita;
	} else if (Key.isDown(Key.RIGHT)) {
		this._x = this._x + velocita;
	}
}

Ora salvate il file e selezionate Prova filmato dal menu “Controllo”: dovreste poter muovere l'aereo con i tasti freccia.

Ecco il risultato:

Scarica il file sorgente: gioco_aereo_movimento.fla

Aggiungiamo un effetto: le dimensioni dell'aereo variano a seconda dell'altezza: in questo modo daremo una certa “profondità” alla nostra scena.

Per farlo, aggiungiamo delle righe di codice allo script dell'aereo, che ora sarà così:

 
onClipEvent (load) {
	//assegnamo un valore alla variabile velocita
	velocita=10;}
 
//faremo eseguire questa istruzione ad ogni fotogramma (in modo continuo)
onClipEvent (enterFrame) {
if (Key.isDown(Key.UP)) {
		this._y = this._y - velocita;
	} else if (Key.isDown(Key.LEFT)) {
//se è premuto il tasto sinistra, sposteremo l'aereo a sinistra, e cosi via...
		this._x = this._x - velocita;
	} else if (Key.isDown(Key.DOWN)) {
		this._y = this._y + velocita;
	} else if (Key.isDown(Key.RIGHT)) {
		this._x = this._x + velocita;
	}
 
	//gestiamo le dimensioni in base all'altezza:
    partevariabile=this._y/5;
    this._yscale=40+partevariabile;
    this._xscale=40+partevariabile;
 
}

Quello che abbiamo cambiato è:

 
    partevariabile=this._y/5;
    this._yscale=40+partevariabile;
    this._xscale=40+partevariabile;

Con questo blocco di codice, impostiamo la scala x e y dell'aereo (che va da 1 a 100), in modo proporzionale alla coordinata y. Diamo un valore di 40 (che sarà il minimo), a cui aggiungiamo una parte variabile ottenuta dalla divisione per 5 della coordinata _y (potete fare delle prove, per aggiustare l'effetto come volete.

Scarica il file sorgente: gioco_aereo_movimento_effetto1.fla

Realizziamo ora un effetto che fa ruotare l'aereo in base alla direzione in cui sta andando.

Aggiungiamo ora questa parte di script, sempre dentro l'istruzione onClipEvent(enterFrame):

if (this._y>vecchioy) 
        {this._rotation=5;}
else if (this._y < vecchioy)
        {this._rotation=-5;}
else if (this._y == vecchioy)
	{this._rotation=0;} 
vecchioy=this._y;

Questo codice confronta la coordinata _y che ha l'aereo alla fine del ciclo precedente, e la confronta con quella che ha all'inizio del ciclo attuale. Se è maggiore, l'aereo sta scendendo. Quindi viene ruotato in giu di 5 gradi. Se invece sta salendo viene ruotato in senso inverso. Se invece sta procedendo in piano (o è fermo), la rotazione viene impostata a zero.

ecco l'effetto risultante:

Scarica il file sorgente: gioco_aereo_movimento_effetto2.fla

Per dare l'idea di un movimento in avanti, animeremo due elementi: la striscia sulla strada, e dei pali della luce che aggiungeremo.

Per prima cosa, selezioniamo la striscia tratteggiata, inseriamola come oggetto clip filmato. Inseriamo un secondo fotogramma chiave e spostiamo la riga di qualche pixel a sinistra o a destra.

Invece, disegniamo un palo della luce, con due lunghi cavi a destra e a sinistra. Faremo in modo che si sposti in senso contrario rispetto all'aereo, rafforzando l'idea di un movimento in avanti.

Trasformiamo il disegno del palo e dei fili in un clip filmato. Non aggiungiamo fotogrammi all'interno, ma assegniamo queste azioni:

//sposta l'oggetto di 20 pixel ogni ciclo
onClipEvent(enterFrame) {this._x=this._x-20
 
//quando raggiunge il bordo destro, viene riportato allaposizione iniziale...
if (this._x<0) 
{this._x=500;}
}

Ecco l'effetto che si ottiene:

Scarica il file sorgente:gioco_aereo_movimento_consfondo.fla