Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Replicare interpolazioni con Flash

Vedremo come replicare un'interpolazione su più elementi utilizzando le nuove opzioni di Flash CS3 e come questi comandi ci permettano di risparmiare tempo rispetto alla soluzione che era necessario adottare nelle versioni precedenti
Vedremo come replicare un'interpolazione su più elementi utilizzando le nuove opzioni di Flash CS3 e come questi comandi ci permettano di risparmiare tempo rispetto alla soluzione che era necessario adottare nelle versioni precedenti
Link copiato negli appunti

Flash CS3 introduce due nuovi comandi relativi alle interpolazioni che consentono di copiare i movimenti di un oggetto così da poterli replicare su altri elementi, questo sia utilizzando un'altra interpolazione oppure sfruttando Actionscript 3.

In questo articolo vedremo come replicare un'interpolazione su più elementi utilizzando le nuove opzioni di Flash CS3 e come questi comandi ci permettano di risparmiare tempo rispetto alla soluzione che era necessario adottare nelle versioni precedenti.

Creare l'interpolazione iniziale

Per prima cosa creiamo un nuovo progetto e inseriamo un'interpolazione di movimento lunga 25 fotogrammi sulla linea temporale principale, facendo muovere l'oggetto da sinistra verso destra.

Interpolazione di un oggetto con movimento da sinistra verso destra

Come fare per applicare lo stesso movimento ad altri oggetti? Vediamo le soluzioni a disposizione con le varie versioni di Flash.

Replicare il movimento, prima di Flash CS3

Con le versioni fino alla 8 è necessario avere già pronta la clip a cui vogliamo applicare il movimento, sia essa un movieclip o un simbolo grafico: tale elemento dovrà essere in libreria per poter poi essere applicato all'interpolazione che andremo a copiare.

Figura 1. Le clip della transizione e del simbolo a cui vogliamo applicare il movimento
Screenshot della libreria

Una volta preparato l'oggetto, selezioniamo dalla linea temporale tutti i fotogrammi coinvolti nel movimento che vogliamo copiare, quindi tramite il menù, da tasto destro, selezioniamo l'opzione "Copy Frames".

Figura 2. Copia dei fotogrammi dell'interpolazione dalla linea temporale
Screenshot della timeline

Creiamo quindi un nuovo livello e incolliamoci i fotogrammi copiati, usando questa volta l'opzione "Paste Frames".

Figura 3. Incollaggio dei fotogrammi sul nuovo livello
Screenshot della timeline

Selezioniamo l'interpolazione creata sul nuovo livello, quindi clicchiamo sul quadrato della nuova interpolazione e dal pannello Proprietà premiamo il pulsante Swap: apparirà un nuovo pannello dove potremo selezionare il simbolo a cui applicare l'interpolazione.

Figura 4. Pannello per lo scambio di elementi
Screenshot del pannello

Una volta cambiato il simbolo dell'animazione noteremo come questa sia esattamente sovrapposta alla precedente: sarà necessario spostare la posizione degli elementi per eseguire l'animazione in una posizione diversa da quella del primo oggetto. Il risultato sarà simile al seguente:

L'interpolazione copiata sul secondo oggetto

Per ottenere questo risultato si sarebbe anche potuto agire direttamente sul simbolo Tween 1, in questo caso però non avremmo potuto applicare modifiche al movimento di un singolo oggetto mentre con due interpolazioni separate abbiamo come vantaggio principale la possibilità di agire indipendentemente sui due oggetti, ad esempio sul secondo quadrato potremmo aggiungere un effetto di trasparenza:

Effetto di trasparenza applicato alla seconda interpolazione

Ne consegue che se dovessimo applicare uno stesso movimento a più oggetti, dovendo però variare leggermente l'effetto su ognuno di essi, il procedimento sarebbe piuttosto lungo.

Replicare il movimento con Flash CS3

Il discorso cambia notevolmente con Flash CS3, in questa versione, infatti, è possibile replicare il movimento su più oggetti in maniera molto più veloce.

Prendiamo sempre la prima interpolazione creata e selezioniamone i fotogrammi, questa volta però dal menu da tasto destro della linea temporale non usiamo l'opzione Copy Frames, ma Copy Motion.

Figura 5. Selezione dell'opzione Copy Motion
Screenshot della linea temporale

Creiamo il simbolo a cui vogliamo applicare il movimento, quindi posizioniamolo su un nuovo livello nello stage. Clicchiamo con il tasto destro sul fotogramma del nuovo livello e selezioniamo l'opzione Paste Motion.

Figura 6. Incollaggio del movimento tramite l'opzione Paste Motion
Screenshot della linea temporale

A questo punto il movimento verrà applicato all'oggetto: possiamo notare come venga copiato il tipo di movimento ma l'oggetto a cui l'abbiamo applicato mantiene la sua posizione iniziale e non è quindi necessario andare a modificare l'interpolazione per disporre correttamente gli elementi.

Anche in questo caso è naturalmente possibile variare le proprietà dell'interpolazione replicata, ma abbiamo copiato il movimento molto più rapidamente e diventa quindi semplice replicarlo anche su altri oggetti sempre tramite il comando Paste Motion.

Movimento replicato su più oggetti

Altro comando utile di Flash CS3 è Paste Motion Special. Il suo funzionamento è simile al normale Paste Motion, ma con questa opzione è possibile copiare soltanto alcune proprietà dall'interpolazione originale. Supponiamo ad esempio di voler replicare il seguente movimento, copiando però solo lo spostamento orizzontale, la rotazione e la trasparenza.

Interpolazione con alpha, ridimensionamento e spostamento su entrambi gli assi

Copiamo il movimento come già visto, quindi sul nuovo livello con l'oggetto a cui vogliamo applicare il movimento selezioniamo Paste Motion Special.

Figura 7. Incollaggio del movimento tramite l'opzione Paste Motion Special
Screenshot della linea temporale

Apparirà un nuovo pannello da cui potremo scegliere quali proprietà replicare e quali invece tralasciare.

Figura 8. Il pannello Paste Motion Special
Screenshot del pannello

Nell'esempio in figura abbiamo deciso di mantenere la posizione orizzontale, gli effetti di colore e la rotazione dell'oggetto. Non verranno riproposti lo spostamento verticale e il ridimensionamento (filtri e blend mode non erano presenti nemmeno nell'interpolazione iniziale):

L'interpolazione replicata solo per alcuni parametri

Copiare il movimento come codice Actionscript 3

Un'altra possibilità offerta da Flash CS3 è la copia del movimento come codice utilizzabile in Actionscript. Per questo è necessario usare l'opzione Copy Motion as Actionscript 3.

Figura 9. Copia del movimento come codice Actionscript 3
Screenshot della linea temporale

La selezione di questa opzione farà aprire un nuovo pannello dove dovremo inserire il nome istanza della clip che vogliamo esegua il movimento copiato.

Figura 10. Pannello per l'inserimento del nome istanza
Screenshot del pannello

Otterremo un codice da incollare su uno dei fotogrammi che sarà di questo tipo:

Listato 1. Codice da incollare su uno dei fotogrammi

import fl.motion.Animator;
var copia_xml:XML = <Motion duration="25" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
  <source>
    <Source frameRate="12" x="42" y="50" scaleX="1" scaleY="1" rotation="0" elementType="graphic" symbolName="Tween 1">
      <dimensions>
        <geom:Rectangle left="-27" top="-23" />
      </dimensions>
      <transformationPoint>
        <geom:Point x="0.5" y="0.5"/>
      </transformationPoint>
    </Source>
  </source>
  
  <Keyframe index="0" rotateDirection="cw" rotateTimes="5" tweenSnap="true" tweenSync="true">
    <tweens>
      <SimpleEase ease="1"/>
    </tweens>
  </Keyframe>
  <Keyframe index="24" tweenSnap="true" tweenSync="true" firstFrame="24" x="436" y="196.65" scaleX="2.407" scaleY="2.407">
    <color>
      <Color alphaMultiplier="0"/>
    </color>
    <tweens>
      <SimpleEase ease="0"/>
    </tweens>
  </Keyframe>
</Motion>;

var copia_animator:Animator = new Animator(copia_xml, copia);
copia_animator.play();

A questo punto basta che la clip sullo stage abbia nome istanza copia ed eseguirà lo stesso movimento copiato in precedenza.

È possibile anche applicare il movimento anche ad altre istanze, basterà aggiungere un codice di questo tipo:

var copia_animator2:Animator = new Animator(copia_xml, copia2);
copia_animator2.play();

In questo caso animeremo la clip copia2. Usando poi la proprietà autoRewind possiamo fare in modo che l'animazione riparta quando necessario, come nell'esempio seguente dove il quadrato arancione è animato tramite un'interpolazione mentre gli altri due usano il codice Actionscript visto precedentemente:

L'interpolazione replicata con Actionscript 3

Conclusioni

Abbiamo visto come grazie alle nuove opzioni di Flash CS3 sia semplicissimo replicare un'interpolazione su più clip, eventualmente ricavandone solo alcune proprietà oppure copiandola come codice Actionscript così da applicarla facilmente a diverse clip e poterla variare tramite modifiche al codice stesso.

Queste funzionalità sveltiscono molto il lavoro del designer e consentono di apportare in maniera molto più semplice movimenti simili a più oggetti, con notevole risparmio di tempo e risorse.


Ti consigliamo anche