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:
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:
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 suhttp://www.goldshell.com/
In ringraziamento a Kirk per la rivisione
dell'italiano.
Se desiderate "pastrugnare" con il FLA
basta via e-mail
