Creare animazioni in Actionscript 3: la classe Tween

(scritto da , il giorno 07-04-2008 20:07)
add to my flexgala

Una delle comodità di sempre (disponibile già dalla versione precedente di Actionscript 2.0), è la possibilità di creare animazioni accattivanti utilizzando alcune classi create ad hoc. In questo tutorial vedremo come gestire animazioni via codice.

Una delle comodità di sempre (disponibile già dalla versione precedente di Actionscript 2.0),  è la possibilità di creare animazioni accattivanti utilizzando alcune classi create ad hoc. In questo tutorial vedremo come gestire animazioni via codice.

Il codice che analizzeremo in questo tutorial è ovviamente per Flash CS3. Questo perchè ovviamente per Flex 3 ci sono delle leggere modifiche.

Procedendo con ordine, creiamo in Flash un nuovo documento in Actionscript 3.0.

Ovviamente necessitiamo di un oggetto da animare. Quindi, sempre via codice, creiamo una clip (una semplice forma, istanza di una Movie Clip) e animiamo suddetta clip.

La classe Tween, ovviamente deve essere importata all'interno del nostro progetto:

<codice Flex 2/Actionscript 3>

  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.*;


Proseguiamo creando la nostra forma:

<codice Flex 2/Actionscript 3>

  1. var miaClip:MovieClip=new MovieClip();
  2. addChild(miaClip);
  3. with(miaClip.graphics)
  4. {
  5.     beginFill(0xFF0000, 1);
  6.     moveTo(0,0);
  7.     lineTo(100,0);
  8.     lineTo(100,100);
  9.     lineTo(0,100);
  10.     endFill();
  11. }


A questo punto non resta che gestire il tutto tramite la nostra classe Tween:

<codice Flex 2/Actionscript 3>

  1.     var myAnimation:Tween=new Tween(miaClip, "x", Elastic.easeOut, miaClip.x, 300, 3, true);


Analizzando esattamente il costruttore della classe Tween appena esposto abbiamo così suddiviso il tutto:
il primo parametro è l'oggetto da animare, il secondo è la proprietà dell'oggetto su cui intervenire, il terzo è il moviemento con relativo andamento, il quarto è il punto iniziale dell'animazione, il quinto è il punto finale, il sesto è il numero dei secondi o dei fotogrammi, l'ultimo valore è di tipo booleano e indica se considerare il valore precedente come secondi (true) o come fotogrammi (false).

A questo punto non resta che provare la nostra animazione (CTRL+INVIO).

Ovviamente esistono diversi tipi di animazioni: oltrea "Elastic" mostrata in questo esempio, potete cambiare questo parametro nel costruttore con "Back" o "Regular" o "Bounce".

Inoltre esiste una classe per gestire gli eventi della classe Tween, i TweenEvent.
Tra questi c'è il metodo "yoyo", che permette di ripetere l'animazione con i punti iniziali e finali invertiti.

Qui di seguito inseriamo il codice della classe relativa, con l'aggiunta di quest'ultimo metodo:
<codice Flex 2/Actionscript 3>

  1. package{
  2.  
  3.     import flash.display.MovieClip;
  4.     import fl.transitions.Tween;
  5.     import fl.transitions.easing.*;
  6.     import fl.transitions.TweenEvent;
  7.  
  8.     public class MyAnimation extends MovieClip{
  9.  
  10.     public var miaClip:MovieClip=new MovieClip();
  11.     public var tweenAnimation:Tween;
  12.  
  13.     public function MyAnimation():void
  14.     {
  15.         with(miaClip.graphics)
  16.         {
  17.             beginFill(0xFF0000, 1);
  18.             moveTo(0,0);
  19.             lineTo(100,0);
  20.             lineTo(100,100);
  21.             lineTo(0,100);
  22.             endFill();
  23.         }
  24.         addChild(miaClip);
  25.         tweenAnimation=new Tween(miaClip, "x", Elastic.easeOut, miaClip.x, 300, 3, true);
  26.         tweenAnimation.addEventListener(TweenEvent.MOTION_FINISH, comeBack);
  27.     }
  28.  
  29.     public function comeBack(e:TweenEvent)
  30.     {
  31.         tweenAnimation.yoyo();
  32.     }
  33.  
  34.     }
  35.  
  36. }



Commenti (0)

Registrati ed esegui il login se vuoi lasciare un commento

Visualizza l'articolo in formato pdfScarica o stampa l'articolo "Creare animazioni in Actionscript 3: la classe Tween" in formato PDF

Torna indietro
Per collaborazioni, proposte, segnalazioni scrivete a:

Javaday 2010




  •  
    Articoli
     
  •  
    Blogs
     
  •  
    Eventi
     
  •  
    Layout
     
  •  
    in più
     
 

Utilizzare i Charts components in Flex 3 - I° parte (07-01-2010)
Una delle potenzialità messe a disposizione nel Flex Builder, nelle Flex SDK e nel futuro Flash Builder, è la possibilità di utilizzare i Charts...

JavaDay a Roma il 30 gennaio 2010 (11-12-2009)
Anche quest'anno si terrà a Roma - presso l'Università di Roma Tre - l'attesissimo evento JAVADAY oggi giunto alla 4° edizione. Una full...

Adobe AIR 2 beta su Adobe Labs (09-12-2009)
Già da qualche giorno è disponibile la nuova versione beta di Adobe AIR. Molte sono le novità che questa release presenta. Anzitutto, dato il...

FITC 2010: pronti per la 3° edizione! (22-11-2009)
Nel 2010 si terrà ad Amsterdam il 22 e 23 febbraio: segnate queste date sulla vostra agenda, mi raccomando! E' assolutamente vietato mancare! E...

Verso la creazione di Rich Web Applications con le novità di Spring 3.0 e l'integrazione con Adobe Flex (18-11-2009)
Un evento unico, completamente gratutito, condensato in 3 ore dense di contenuti e anteprime. Per la prima volta in Italia verrà presentata...

Nuovi e-seminar per FlexGALA in calendario (09-11-2009)
Come preannunciato lo scorso settembre, alla ripresa post-vacanze, eccoci con il primo appuntamento al quale faranno seguito altri eventi in...

Working on New and Legacy topics in the same time.
Author : Flexblog by Faratasystems

This very long weekend I was working on my presentations for upcoming Flex symposium in New York City. I have two topics there that should have...


continua...

Microsoft SharePoint 2010 Administrator's Companion
Author : O'Reilly New Books

Get comprehensive information to plan, deploy, administer, and support SharePoint 2010. With this ADMINISTRATOR'S COMPANION, you get...


continua...

apri dettaglio news Programming Windows Identity Foundation
Author : O'Reilly New Books


apri dettaglio news Steal This Computer Book 4.0
Author : O'Reilly New Books


JavaDay IV edizione

Data di svolgimento: 30-01-2010

A day in a differtent universe è quello che si...

Rich Web Applications con Spring Training

Data di svolgimento: 30-11-2009

Un evento unico, completamente gratutito, conde...

WorkCity ospite allo SMAU 2009

Data di svolgimento: 21-10-2009

WorkCity, nato da un'idea del nostro collaborat...

Integrare LiveCycle DS nelle architetture Enterprise

Data di svolgimento: 27-11-2008

Livecycle DS e Flex 3 sono le soluzioni di ...

Live Cycle DS best practices: creare architetture per RIA

Data di svolgimento: 05-11-2008

Livecycle DS e Flex 3 rappresentano insieme il ...

Adobe e l\'Open Source: usare le tecnologie aperte di Adobe

Data di svolgimento: 28-10-2008

Non solo licenze a pagamento: Adobe ha detto sÃ...