Alla fine di questo tutorial imparerete come animare un oggetto dentro una determinata area, farlo ritornare indietro quando sta per uscire fuori della zona che delimita il filmato ed a controllare la timeline dello stesso oggetto ogni qual volta cambia direzione.

Creiamo un filmato nuovo con le misure 550x400 e cambiamo il colore di sfondo in nero ed iniziamo a creare il nostro filmato base.

Creiamo un nuovo simbolo con Ctrl+F8, lo chiamiamo pastrugni, scegliamo la tipologia Clip Filmato e diamo l’ok.
Ora nel fotogramma 1 della linea temporale del simbolo Pastrugni importiamo l’immagine di base che vogliamo animare - nel mio caso ho importato un’immagine vettoriale, creata esternamente, della scritta Pastrugni - e poi creiamo tanti fotogrammi chiave quanti sono i cambiamenti che vogliamo che la nostra immagine assuma quando cambia direzione. In questo caso i fotogrammi creati sono sei.

A questo punto ci troviamo con 6 fotogrammi chiave tutti uguali e quindi andiamo a modificare il colore della scritta in ciascuno di essi per renderli diversi.

Poi sull’editor di Actionscript inseriamo su ciascun fotogramma l’istruzione:

stop();

questo fa si che il filmato si fermi a ciascun passaggio, attendendo nuove istruzioni.

Sul fotogramma n°7 creiamo un fotogramma chiave vuoto e per farlo posizioniamoci semplicemente sul fotogramma 6 e premiamo F7.
Questo fotogramma sarà importante per reiniziare il ciclo di cambiamenti e ci scriviamo quindi il seguente codice:

gotoAndStop(1);

Il seguente passo sarà posizionarci sulla timeline principale (Scena 1), ovverosia la _root,
che al momento è vuota e dalla libreria (Ctrl+l) trascinare il clip filmato pastrugni nello stage.
Ancora selezionato il simbolo pastrugni clicchiamo su F8 per convertirlo in un nuovo simbolo, assegniamoli un nome - Mc nel mio caso - e scegliamo come tipologia sempre Clip Filmato.
Diamo l’OK.

Nello stage facciamo doppio clic sul nostro nuovo filmato "Mc" per entrare in modalità "edita sul posto" e all’interno troviamo il nostro Clip Filmato "pastrugni" su un unico livello.
Creiamo un secondo livello che chiamiamo "azioni" e posizionandoci sul primo fotogramma del livello azioni creiamo 3 fotogrammi chiave.
Avremo così il nostro livello "azioni" con 3 fotogrammi chiave e anche il livello "oggetto" con 1 fotogramma chiave che si estende su tutti 3 fotogrammi.

Ora inizieremo a creare il codice per muovere il nostro oggetto.
Sul primo fotogramma di "azioni" inseriamo il seguente codice:

_x=Math.random()*200;
_y=Math.random()*200;
xspeed=2;
yspeed=2;
rightedge=550;
leftedge=0;
topedge=0;
bottomedge=400;

Analizziamo adesso cosa significano queste righe di codice. Le prime 2 righe, posizionano il nostro oggetto in un punto a caso scegliendo 2 valori, per le coordinate x e y, compreso tra 0 e 200.

_x=Math.random()*200;
_y=Math.random()*200;

Le altre 2 righe seguenti sono solo 2 variabili che corrispondono alla velocità del nostro oggetto

xspeed=2;
yspeed=2;

Le ultime 4 righe sono sempre variabili che corrispondono alle coordinate del nostro stage, ovverosia, dei limiti del nostro filmato.
Di solito e per una questione di praticità uso l’inglese per codificare, ma ognuno può chiamare le variabili, le funzioni, ecc… come vuole.

Il codice del fotogramma 1 serve a inizializzare alcuni parametri che saranno utili ed importanti in seguito.

Passiamo adesso al "piatto forte", al secondo fotogramma. Scriviamo:

_x += xspeed

Se provate adesso il filmato noterete che il nostro oggetto si riposiziona nello stage ed inizia a muoversi da sinistra verso destra, ma senza fermarsi e uscendo irrimediabilmente dallo stage.
Per evitare che questo accada inseriamo di seguito le seguenti righe:

if (_x+_width/2>rightedge) {
_x = rightedge-_width/2;
xspeed = -xspeed;
}

*****************************************************************************
Prima di spiegare il codice voglio ricordare che ciascun filmato ha il suo "punto di registro" che serve per fare capire a Flash come deve ordinare, allineare e registrare gli oggetti.
*****************************************************************************

Ok, passiamo al codice. Abbiamo creato una "condizione" che dice:
se la posizione (lo spostamento orizzontale) del nostro oggetto meno la metà della sua larghezza è superiore al valore della variabile rightedge pari a 550 (550 ricordiamo è la parte più a destra del nostro stage) allora la nuova coordinata per _x sarà pari alla nostra variabile meno la metà della larghezza del nostro oggetto.
Sembra complicato, ma non lo è. Questa parte della metà della larghezza del nostro oggetto è importante proprio perché il punto di registro di cui ho fatto la premessa è posto al centro dell’oggetto. Perciò è importante aggiungere o sottrarre la metà al valore di _x altrimenti l’oggetto uscirebbe per la metà dello schermo oppure sarebbe riposizionato nello stage con metà oggetto fuori.

L’altra riga di codice, invece dice che quando la nostra condizione diventa "true", vera, il valore della xspeed smette di incrementare e inizia a decrementare invertendo così la direzione del movimento: in soldini, fa si che il nostro oggetto torni indietro.

xspeed = -xspeed;

Se provate adesso il filmato noterete che l’oggetto si sposta verso destra e quando sta per uscire crea l’illusione di sbattere contro un muro e cambia direzione tornando indietro.
Il seguente passo è scrivere del codice, relativamente uguale, per impedire che l’oggetto esca dalla parte sinistra dello stage. E’ molto simile a quanto scritto finora, ma cambiano solo le variabili ed alcuni segni di + e –

if (_x-_width/2<0) {
_x = leftedge+_width/2;
xspeed = -xspeed;
}

Tutto chiaro penso, no?

Provando adesso il nostro oggetto si sposta a destra e a sinistra orizzontalmente.
Ora scriviamo il codice per far muovere verticalmente l’oggetto che è uguale alla precedente parte di codice, va sostituita soltanto la la _y al posto della _x e bottomedge al posto di rightedge e _height al posto di _width . Per chiarire _width e _height sono 2 proprietà dell’oggetto Clip (filamto) la prima restituisce il valore della “larghezza” dell’oggetto e la seconda il valore dell’altezza. Cosi:

if (_y+_height/2>bottomedge) {
_y = bottomedge-_height/2;
yspeed = -yspeed;
}

e anche topedge al posto di leftedge

if (_y-_height/2<leftedge) {
_y = topedge+_height/2;
yspeed = -yspeed;
}

Ed ecco fatto, se provate adesso il filmato vedrete che la scritta si sposta su tutte 4 direzioni: alto, basso, destra e sinistra. Bello, no?

Ma non abbiamo ancora finito. Dobbiamo dire al nostro oggetto che ogni volta che va a sbattere deve cambiare colore (o forma). Se no a cosa sarebbe servito tutto quel lavoraccio con l’oggetto "pastrugni"?

Basta inserire prima di tutti i cambiamenti di direzione, questa piccola riga di codice:

scritta.nextFrame();

Dopo selezionando il nostro oggetto "pastrugni" che si trova nel livello "oggetto" assegnamo il nome "scritta" all’istanza.

Il codice finale è questo (le righe che iniziano con "//" sono soltanto commenti che aiutano a capire meglio il codice):

// Incrementa la velocità orizzontale
_x += xspeed;
// Controlla quando la scritta arriva alla estremità destra dello schermo e cambia la sua direzione
// decrementando la variabile xspeed
if (_x+_width/2>rightedge) {
_x = rightedge-_width/2;
scritta.nextFrame();
xspeed = -xspeed;
}
// Controlla quando la scritta arriva alla estremità sinistra dello schermo e cambia la sua direzione
// decrementando nuovamente la variabile xspeed
if (_x-_width/2<0) {
_x = leftedge+_width/2;
scritta.nextFrame();
xspeed = -xspeed;
}
// Incrementa la velocità orizzontale
_y += yspeed;
// Controlla quando la scritta arriva alla estremità inferiore dello schermo e cambia la sua direzione
// decrementando la variabile yspeed
if (_y+_height/2>bottomedge) {
_y = bottomedge-_height/2;
scritta.nextFrame();
yspeed = -yspeed;
}
// Controlla quando la scritta arriva alla estremità superiore dello schermo e cambia la sua direzione
// decrementando nuovamente la variabile yspeed
if (_y-_height/2<topedge) {
_y = topedge+_height/2;
scritta.nextFrame();
yspeed = -yspeed;
}

L’ultima cosa è scrivere sul fotogramma 3 del livello "azioni" il seguente codice per creare il "loop" che fa funzionare il tutto.

gotoAndPlay(2);

Ovviamente il codice potrebbe essere diverso utilizzando istruzioni come onClipEvent ecc. ma cosi è più semplice per chi inizia adesso con l’Actionscript.

Per completare sulla _root (Scena 1), nel primo e unico fotogramma scrivete il seguente codice che permette di aprire il filmato a tutto schermo:

fscommand ("fullscreen", "true");
fscommand ("allowscale", "true");

Scarica il file .fla di questa guida.
Visualizza il filmato.

Per fare diventare questo filmato uno screensaver dovete pubblicare il filmato come Proiettore Windows (*.exe) e poi usare un programma tipo FlashForge per convertire l’EXE in formato SCR.
FlashForge è shareware e lo potete trovare su www.goldshell.com

Questo tutorial è stato creato da GnoKy per Pastrugni – Settembre 2003
Revisione by Kirke