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:

onClipEvent (enterFrame) {
ratio = .2;
friction = .5;
targetx = _root.naso._x;
targety = _root.naso._y;
speedx = ((targetx-_x)*ratio)+(speedx*friction);
speedy = ((targety-_y)*ratio)+(speedy*friction);
_x += speedx;
_y += speedy; }

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:

tagx = _root.testa._x;
tagy = _root.testa._y,

sulla Clip “testa”

tagx = _root.baffi._x;
tagy = _root.baffi._y,

sulle Clip “baffi”

tagx = _root.occhiali._x;
tagy = _root.occhiali._y,

ecc. ecc.

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;

if (mouseaction){
targetx = _root._xmouse;
targety = _root._ymouse;
speedx = ((targetx-_x)*ratio)+(speedx*friction);
speedy = ((targety-_y)*ratio)+(speedy*friction);
_x += speedx;
_y += speedy;
}
}
onClipEvent(mouseDown){
this.mouseaction=true;
}
onClipEvent(mouseUp){
this.mouseaction=false;
}

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;

così 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.

Scarica i file .fla di questa guida.

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