Augitaly blog: il sito per i fan di Adobe

Creiamo un nuovo File Flash (ActionScript 3.0) e trasciniamo un componente Button nella Libreria.

Inserite il seguente codice nel primo frame del file .fla:

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import fl.controls.Button;
import flash.events.MouseEvent;

stage.frameRate = 30;

// =====================================
// Creiamo l'oggetto da animare (un cerchio)
// =====================================
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0xFF9900);
circle.graphics.drawCircle(100, 100, 50);
circle.graphics.endFill();
circle.x = 50;
circle.y = 50;
addChild(circle);

// =====================================
// Definiamo l'animazione Tween e i suoi listener
// =====================================
var start_x:Number = circle.x;
var start_y:Number = 300;
var duration:Number = 2;
var myTween:Tween = new Tween(circle, "x", Bounce.easeOut, start_x, start_y, duration, true);

function onMotionFinished(event:TweenEvent):void {
trace("Animazione Terminata")
}

function onMotionStart(event:TweenEvent):void {
trace("ReStart Animazione")
}

myTween.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinished)
myTween.addEventListener(TweenEvent.MOTION_START, onMotionStart)

// =====================================
// RESTART Animation Button
// =====================================

var restart_btn:Button = new Button();
restart_btn.label = "Restart Animation";
restart_btn.y = 340;
addChild(restart_btn);

function restartAnimation(event:MouseEvent):void {
myTween.start();
}

restart_btn.addEventListener(MouseEvent.CLICK, restartAnimation);

DETTAGLI CODICE:

1) Innanzitutto importiamo le classi necessarie al funzionamento dello script.
Come si nota, tutti i package e i percorsi delle classi sono cambiati rispetto ad ActionScript 2.0

2) Subito dopo, un’altra novità di AS 3.0: definiamo infatti il framerate del .fla tramite codice

3) Creiamo l’oggetto da spostare, un cerchio, utilizzando un’altra nuova classe (Sprite) e un nuovo metodo drawCircle, che accetta 3 parametri: x, y e il raggio.
Utilizziamo infine il metodo addChild per visualizzare l’elemento sullo Stage.

4) Definiamo un’istanza della classe Tween, myTween, che rappresenterà la nostra animazione.
Come si può vedere dal codice, in questo caso le novità rispetto AS 2.0 sono minime.

5) Definiamo i listener e gli event handler degli eventi MOTION_FINISH e MOTION_START dell’istanza della classe Tween, che ci segnaleranno, rispettivamente, la fine dell’animazione (nel momento in cui viene completata) o il suo avvio (quando viene premuto il pulsante “Restart Animation”)

NOTA: la definizione degli eventi cambia radicalmente rispetto alla precedente versione di ActionScript. Ora, per il broadcast, viene infatti utilizzata una nuova classe, TweenEvent, e anche la loro implementazione differisce leggermente dal passato.

6) Creiamo infine il pulsante restart_btn per riavviare l’animazione.