Per questo lavoro la cosa importante
è, oltre a stabilire le dimensioni del filmato preparare tutti
gli elementi che si devono muovere come Clip filmato (Movieclip)
singoli e separati tra loro. L’ombra, la testa, gli occhi, i
baffi ecc.
La cosa importante è che tutti quanti gli elementi condividano
il medesimo centro. Per praticità prima ho creato le Clip filmato
poi ho preso come riferimento il centro della clip “naso” che
poi è quella che comanderà gli spostamenti tramite un “drag”
(spostamento). Su questo centro ho tracciato con le guide una
croce per avere appunto un punto centrale di referenza. Dopodiché
ho iniziato a posizionare ogni elemento ciascuno su un livello
separato, ombra nel livello ombra, testa nel livello testa e
cosi via (il livello superiore deve essere quello del naso).
Man mano che posizionavo ogni elemento, entravo in modalità
edita in posizione (con un doppio click sulla clip) e facevo
combaciare il centro della clip dell’elemento a cui stavo lavorando
con il mio centro di riferimento (lo stesso di quello della
clip naso). In seguito selezionavo l’oggetto di questa clip
(che si trovava "fuori posto" graficamente parlando) e con i
tasti freccia lo spostavo fino alla posizione adeguata per la
grafica complessiva.
Dopo tutto questo lavoraccio dobbiamo dare un
nome istanza a tutti queste clip.
La clip naso, quella che dobbiamo trascinare,
dovremmo renderla “draggabile” per fare ciò clicchiamo 2 volte
per entrare dentro la clip in modalità edita in posizione, selezioniamo
l’immagine e quindi facciamo F8 per convertirla in un simbolo
“Pulsante”. Su questo pulsante inseriamo il seguente codice:
on (press) {
this.startDrag();
}
on (release, releaseOutside) {
this.stopDrag();
}
Fatto questo usciamo dalla modalità edita in
posizione posizioniamoci sulla timeline del nostro filmato principale.
Per l’oggetto naso adesso abbiamo una immagine "naso" dentro
un pulsante che a sua volta si trova dentro una Clip filmato.
Adesso, dopo che abbiamo sistemato tutti gli
elementi sui vari livelli e abbiamo dato il nome istanze a ciascuna
clip iniziamo a inserire codice. Inserite su tutte le Clip filmato
queste righe di codice:
Tralascio di spiegare dettagliatamente il codice,
vi dico soltanto che le stringhe che dovremmo cambiare più in
là sono:
ratio = .2;
friction = .5;
che ci permettono di controllare la fluidità
ed il tipo di arresto del movimento di tutti gli elementi e
tagx = _root.naso._x;
tagy = _root.naso._y;
che ci permetterà di relazionare ed impostare
il movimento di ciascun elemento rispetto ad un altro elemento.
Mi spiego: scrivete le righe di codici su tutte le Clip e provate
il vostro filmato. Se draggate il naso tutti gli elementi si
sposteranno per piazzarsi in corrispondenza del centro della
Clip “naso”. Avrete una sensazione di movimento brusco, uguale.
Adesso provate a cambiare su ciascuna Clip filmato
le seguenti righe:
tagx = _root.naso._x;
tagy = _root.naso._y,
sostituendo naso con il nome istanza della clip
che sta sul livello superiore. Esempio: Sulla Clip “ombra” inserite:
Questo fa si che, draggando il naso, la Clip
occhiali si sposti relazionandosi con “naso", quella dei baffi
imposta il suo movimento sulla clip "occhiali" e così via fino
all’ultima clip.
Questo ci permette di avere un movimento più dolce, più fluido.
Provate adesso a giostrare con i valori delle
variabili ratio e friction (mai superiori a 1).
Volendo, con alcune alterazioni al codice, possiamo
anche apportare alcune migliorie. Un esempio potrebbe essere
rendere la testa del gatto sensibile ad un evento come il click
del pulsante del mouse.
Per fare ciò basta selezionare la Clip filmato
del naso, (usiamo questa clip perché l’abbiamo individuata come
la clip maestra, quella che tutte le altre clip seguono), ed
inseriamo il seguente codice:
onClipEvent (enterFrame)
{
ratio =.1;
friction =.5;
Il codice è praticamente uguale usato per le altre clip solo
che le variabili “tagx” e “tagy” che poi in pratica individuano
la posizione finale dove si dovrà spostare la clip non fa riferimento
ad un'altra clip bensì alla posizione del mouse nella scena.
In pratica il Metacode agisce più o meno cosi:
Ad ogni evento frame Flash controlla se la condizione
“mouseaction” è vera o falsa.
Se è falsa nulla accade, se invece avviene un evento “mouseDown”
la condizione passa a vera ed esegue il codice della condizione
che posiziona la clip “naso” sulle coordinate del mouse (e ovviamente
tutte le altre clip si mettono in movimento seguendo il proprio
codice)
L’evento “mouseUp” serve a riportare la condizione su false
per fare si che la clip naso si fermi.
Adesso se provate il vostro filmato cliccate su una zona del
vostro scenario e guardate cosa succede.Un'altra miglioria al
codice potrebbe essere usare le variabili “friction” e “ratio”
come variabili condivise da tutte le clip. La differenza sta
nel fatto che se volete “giocare” con i valori adesso dovete
cambiare questo valori su tutte le clip ed invece con questa
modifica basta cambiare questi stessi valori su le 2 variabili
condivise da tutte.
Allora, create un livello e chiamatelo “actions”,
selezionate il frame di questo livello sulla linea temporale
ed inserite il seguente codice:
stop();
rootratio=.2;
rootfriction=.5;
Adesso su ciascuna Clip filmato cambiate il
codice
ratio=.2;
friction=.5;
in
ratio = _root.rootratio;
friction = _root.rootfriction;
cosi le variabili ratio e friction le clip prendono
i valori delle variabili “globali” che abbiamo posizionato sul
frame della timeline. Adesso provando a variare i valori di
rootratio e rootfriction possiamo influenzare il movimento di
tutte le clip.
Questo ovviamente può essere applicato a qualsiasi
cosa. Per dubbi o ulteriori spiegazioni sono sempre disponibile.
Il prossimo tutorial sarà su come dare un uso “utile” a questo
codice creando un Menu verticale che si possa spostare da una
parte ad un'altra.
Questo tutorial è stato creato da
GnoKy per Pastrugni – Dicembre 2003
