Flash CS4: cinematica inversa con lo strumento Bone

Tra gli strumenti di Flash CS4 possiamo trovare una novità assoluta, ovvero la possibilità di applicare effetti di cinematica inversa tramite lo strumento Bone (letteralmente osso); tale strumento ci consente di collegare due o più oggetti tramite struttura simile ad uno scheletro.

In questo articolo osserviamo alcuni esempi per vedere come creare animazioni dove lo spostamento di un elemento influisca in maniera realistica sugli altri, sfruttando quindi la cinematica inversa e lo strumento bone.

Questo strumento è piuttosto versatile: si può usare sia per creare animazioni prestabilite, eseguendo quindi tutte le operazioni usando lo stage e la timeline, sia per creare movimenti e trasformazioni regolabili dall'utente in runtime durante l'esecuzione del filmato...il tutto sempre via stage, quindi senza nemmeno una riga di codice ActionScript!

Sebbene non sia necessario scrivere codice, tale strumento è supportato solo nei progetti creati con ActionScript 3, in quanto sfrutta comandi dell'ultima release del linguaggio. Non è possibile usarlo in progetti ActionScript 2, nemmeno per impostare le animazioni via stage.

Utilizzo dello strumento Bone

Lo strumento Bone si trova in un nuovo tassello della barra degli strumenti, al di sotto del nuovo strumento Deco/Spray e sopra allo strumento Secchiello, come possiamo vedere in figura. Si può accedere allo strumento sia selezionandolo dalla barra degli strumenti, sia tramite la scorciatoia da tastiera (X).

Figura 1. Ubicazione dello strumento Bone

Prima di selezionare lo strumento è comunque necessario provvedere al disegno dell'oggetto a cui applicare la struttura: disegnamo ad esempio un semplice rettangolo.

Figura 2. Rettangolo disegnato sullo stage

Creare l'ossatura dell'oggetto

Vediamo per prima cosa come creare lo scheletro dell'oggetto: selezioniamo lo strumento osso, quindi clicchiamo sul nostro rettangolo e trasciniamo: vediamo apparire una nuova forma sullo stage, spostandoci con il mouse possiamo scegliere il punto di destinazione.

Figura 3. Creazione di un osso

Rilasciando il mouse completiamo la creazione dell'osso: a questo punto possiamo partire dalla giuntura precedente e creare ulteriori ossa per completare la struttura del nostro oggetto.

Figura 4. Esempio di struttura di ossa

Possiamo notare come sulla linea temporale sia stato svuotato il primo layer e sia stato creato un nuovo livello con nome Armature_n (n varia a seconda del numero di strutture create fino a quel momento). Di fatto questo livello contiene sia l'oggetto, sia la sua ossatura. Questo è un nuovo tipo di livello introdotto in Flash CS4 e chiamato pose layer ed ha un tipo particolare di icona ad identificarlo.

Figura 5. Timeline con layer di tipo "pose"

A questo punto per vedere gli effetti dell'ossatura applicata al nostro oggetto, prendiamo il classico strumento di selezione (scorciatoia da tastiera V) e proviamo a selezionare e spostare le varie giunture: l'oggetto cambia conseguentemente forma e posizione.

Figura 6. Oggetto dopo lo spostamento di alcune ossa

Creare un'animazione

Una delle attività più interessanti da compiere con lo strumento bone e la cinematica inversa, è la creazione di animazioni con movimenti più o meno realistici (questo fattore lo stabiliamo col numero di ossa e giunture che creiamo).

Proviamo ad esempio ad animare una gamba che calcia: eseguiamo per prima cosa il disegno della nostra forma. Il disegno nell'esempio è molto approssimativo.

Figura 7. Forma da animare

Per creare il movimento saranno necessarie tre ossa: la prima che va dall'inizio del disegno (il teorico polpaccio) al ginocchio, la seconda dal ginocchio al tallone, la terza dal tallone alla punta del piede. L'ossatura risulterà quindi come in figura 8.

Figura 8. Ossatura della forma da animare

A questo punto possiamo impostare il fotogramma iniziale e quello finale della nostra animazione, operazione che eseguiremo sul livello Armature che sarà stato creato da Flash. Nel primo fotogramma lasciamo la struttura creata, inseriamo invece due nuovi fotogrammi chiave rispettivamente ai frame 15 e 30: al quindicesimo fotogramma avremo la gamba portata indietro a caricare, mentre al trentesimo avremo la gamba distesa in avanti, indicativamente così:

Figura 9. Fotogrammi dell'animazione

Il risultato sarà simile a quanto visibile nel filmato seguente.

Mancando il movimento di "ritorno a terra" delle gamba otteniamo uno scatto alla fine del filmato. Basterà però replicare la posizione iniziale (ad esempio al frame 45) per ottenere un effetto decisamente migliore.

Unione di più oggetti

Finora abbiamo operato sempre su un singolo elemento vettoriale, ma è anche possibile unire tra loro più movieclip: questo metodo è per diversi aspetti più comodo, infatti mantenendo separate le componenti da animare abbiamo maggiore comodità ad applicare modifiche in un secondo momento ad uno o più elementi. Il procedimento di associazione della struttura ossea agli oggetti è comunque il medesimo visto finora.

Figura 10. Serie di movieclip collegati tramite ossa

Aggiungere o rimuovere uno o più elementi

Non è possibile disegnare su un livello di tipo pose, se proviamo a disegnare o incollare un elemento su questo tipo di livello, Flash restituisce un messaggio di errore. Come aggiungere allora un elemento a una struttura già esistente?

Come abbiamo visto, quando creiamo un insieme di ossa, Flash crea automaticamente il livello di tipo pose e di inserire in esso tutti gli oggetti che concateniamo. È sufficiente quindi, posizionare inizialmente i nuovi oggetti che vogliamo aggiungere su un normale livello e collegarli alla struttura esistente sfruttando lo strumento bone. Gli oggetti verranno automaticamente inglobati nel livello che contiene la struttura.

Ecco ad esempio una struttura creata collegando prima tra loro i vari clip circolari e aggiungendo poi in un secondo momento i clip quadrati. Come possiamo vedere non risulta avere differenze rispetto alle precedenti.

Figura 11. Struttura ossea creata aggiungendo in un secondo tempo alcuni elementi

Diverso il discorso per la rimozione di uno o più elementi: la rimozione di un qualsiasi elemento compora una "rottura" della struttura all'elemento precedente. Per essere più chiari, prendiamo come riferimento la figura appena vista: rimuovendo per esempio il quarto cerchio da sinistra, la struttura risulterà composta solamente dalle ossa dei primi tre cerchi, tutte le altre saranno eliminate.

I legami tra gli oggetti precedenti e quelli seguenti quello eliminato non vengono ricreati automaticamente, sarà necessario reimpostare manualmente l'intera parte di struttura successiva all'elemento eliminato.

Figura 12. Struttura ossea dopo la rimozione di un elemento intermedio

Ecco un altro esempio di utilizzo dello strumento Bone:

Finora abbiamo utilizzato lo strumento Bone lavorando sullo stage, ma è anche possibile interagire con ActionScript, soprattutto è possibile creare filmati che sfruttano lo strumento bone in maniera interattiva senza dover utilizzare nemmeno una riga di codice e questo, se consideriamo la complessità degli effetti che si possono ottenere, è decisamente notevole.

Rendere interattiva una struttura Bones con ActionScript

Vediamo come rendere interattive le ossa nel nostro filmato. Prendiamo ad esempio il disegno della gamba visto precedentemente: selezionando sulla timeline il livello contenente l'ossatura, appaiono alcune opzioni nel pannello proprietà. Notiamo in particolare il parametro Type, impostato al momento su Authortime.

Figura 13. Proprietà di un layer di tipo Pose

Cliccando sulla combo type noteremo che l'altra opzione disponibile è Runtime, ovvero "durante l'esecuzione". Selezioniamo questa opzione al posto di Authortime, quindi esportiamo il filmato.

Figura 14. Selezione del tipo Runtime

Il risultato dell'operazione sarà il seguente. Può sembrare che non succeda niente, ma proviamo a cliccare e trascinare la nostra gamba più o meno in corrispondenza della struttura ossea che abbiamo creato sullo stage e prepariamoci a rimanere a bocca aperta.

Non è possibile creare un'animazione sullo stage e poi renderla modificabile durante l'esecuzione, per esempio avere di base il movimento della gamba visto in precedenza e poterne modificare la posizione a runtime. Se proviamo a selezionare un livello Pose contenente più di una posa e cambiarne il tipo in Runtime, Flash ci restituirà l'errore riportato nella figura di seguito, che ci informa come un livello animato con più di una posa non sia compatibile con la modalità Runtime.

Figura 15. Impossibile passare in runtime un livello Pose animato

Mostrare la struttura ossea in runtime

Nell'esempio precedente potremmo aver notato una certa scomodità nel modificare la posizione della gamba nell'SWF, e va considerato che noi conoscevamo la posizione delle giunture avendola creata sullo stage e che la struttura prevede solo tre ossa.

Possiamo quindi ipotizzare che un utente che veda il nostro filmato con solo il disegno della gamba possa trovarsi disorientato, non sapendo bene dove cliccare per modificare la posizione della gamba stessa; la situazione sarebbe ancora più complicata in caso di strutture con un numero maggiore di snodi. Sarebbe molto comodo disegnare la struttura in modo da renderla visibile all'utente come lo risulta sullo stage durante la sua creazione: ebbene, questo si può ottenere con un po' di ActionScript!

Creiamo un nuovo FLA, inseriamo una forma e convertiamola in movieclip (per mostrare le linee di riferimento è necessario che i simboli collegati siano movieclip e non una singola forma come era invece nel caso della gamba), quindi disponiamo sullo stage più istanze (eventualmente anche di più movieclip) e creiamo una struttura di ossa a nostro piacimento. Impostiamo il tipo su Fase di esecuzione (Runtime), quindi creiamo un nuovo livello e inseriamovi il seguente codice:

import fl.ik.*;
import flash.display.Sprite;

// Ricaviamo la struttura
var armInst:IKArmature = IKManager.getArmatureAt(0);
var rootJnt:IKJoint = armInst.rootJoint;
var lineContainer:Sprite = new Sprite();

// Creiamo uno sprite che conterrà le linee
addChild(lineContainer);
setChildIndex(lineContainer, 0);

// Analizziamo la struttura e disegnamo i vari collegamenti
function drawConnectingLines(jnt:IKJoint):void
{
  var len:uint = jnt.numChildren;
  for(var n:uint=0; n<len; n++)
  {
    var childJnt:IKJoint = jnt.getChildAt(n);
    var childClip1:DisplayObject = getChildByName(childJnt.bone.headJoint.name);
    var childClip2:DisplayObject = getChildByName(childJnt.bone.tailJoint.name);
    
    lineContainer.graphics.lineStyle(3, 0xCCCCCC);
    lineContainer.graphics.moveTo(childClip1.x, childClip1.y);
    lineContainer.graphics.lineTo(childClip2.x, childClip2.y);
    
    drawConnectingLines(childJnt);
  }
}

// Aggiorniamo le linee all'evento ENTER_FRAME
function enterFrameHandler(event:Event):void
{
  lineContainer.graphics.clear();
  drawConnectingLines(rootJnt);
}

addEventListener(Event.ENTER_FRAME,enterFrameHandler); 

Il codice non è particolarmente lungo o complesso, essenzialmente le operazioni sono poche. Per prima cosa viene ricavata la struttura, in particolare la prima (notare il parametro 0 per il comando IKManager.getArmatureAt), quindi viene associata la funzione enterFrameHandler all'evento ENTER_FRAME. Questa funzione semplicemente elimina le linee attualmente presenti e chiama la funzione drawConnectingLines che si occuperà di creare le nuove.

Quest'ultima funzione analizza il numero di ossa presenti, per ognuna ricava la giuntura iniziale (headJoint) e finale (tailJoint), quindi disegna una linea basandosi sulle rispettive coordinate x e y.

Poichè queste azioni sono associate all'evento ENTER_FRAME, la struttura verrà aggiornata di continuo e quindi risulterà sempre corrispondente alla posizione delle ossa anche dopo diversi spostamenti, come possiamo vedere nel filmato seguente.

Nel caso in cui avessimo diverse strutture sullo stage potremo regolarci sfruttando come detto il parametro index del comando getArmatureAt. In ogni momento è comunque possibile conoscere il numero di strutture di ossa presenti sullo stage grazie alla proprietà numArmatures, inoltre per ricavare la struttura dal suo nome e non dal suo indice potremo usare il metodo getArmatureByName al posto di getArmatureAt.

Attivare e disattivare strutture e singole ossa

La classe IKManager, che abbiamo appena utilizzato, offre anche altri metodi, ad esempio permette di attivare o disattivare un osso o anche l'intera armatura. Supponiamo ad esempio di voler lasciare la nostra struttura attiva per 5 secondi per poi disattivarla. Basterà aggiungere al codice precedente le righe:

setTimeout(disattiva,5000)

function disattiva()
{
  IKManager.trackIKArmature(armInst, false);
}

Analogamente potremo sempre riattivare la struttura specificando true come secondo parametro. I medesimi concetti valgono per il singolo oggetto sfruttando il comando trackIKObject al posto di trackIKArmature.

In conclusione, lo strumento Bone si rivela particolarmente versatile e soprattutto semplice e rapido da usare: sino alla versione precedente di Flash creare effetti di strutture collegate e gestibili tramite ActionScript era un'operazione piuttosto ardua, ora in pochi minuti possiamo ottenere gli stessi effetti senza nemmeno una linea di codice!