Ormai da mesi su molti blog, portali e riviste del settore vengono enfatizzate e descritte le funzionalità di Adobe Flash CS3 e del nuovo linguaggio ActionScript 3.0, la maggior parte delle volte, tuttavia, senza entrare nei dettagli tecnici e affrontando gli argomenti solo a livello teorico.

In questo articolo vedremo invece come cambia nella realtà la nuova release del linguaggio, creando diversi esercizi in ActionScript 3.0 (d’ora in poi AS3) allo scopo di agevolare il passaggio dalla versione precedente e focalizzando l’attenzione sulle novità più radicali.

Per svolgere i vari esercizi dovremo creare un nuovo documento Flash File (Actionscript 3.0) e posizionare il codice all’interno del primo frame, tranne nei casi dove diversamente specificato.

Display list e DRAWING API
Un nuovo modo di gestire gli oggetti in Flash

In passato il movieclip e il concetto di profondità (depth) erano gli elementi fondamentali su cui si basava la visualizzazione degli elementi e il loro ordine “z” all’interno dello Stage di Flash.

In AS 3.0 tutto è radicalmente cambiato e la gestione degli elementi visivi è stata delegata alla nuova funzionalità Display List, una sorta di indice gerarchico in cui l’elemento inserito per primo avrà indice 0 e sarà visualizzato sotto tutti gli oggetti, mentre quello aggiunto per ultimo avrà indice più alto e sarà visualizzato sopra tutti gli altri.

Come vedremo in diversi esempi di questo articolo l’elemento da visualizzare, indipendentemente dal fatto che sia un componente, una forma vettoriale disegnata con le drawing API (API di disegno) od un contenitore, dovrà prima di tutto essere definito e poi aggiunto alla DisplayList utilizzando, ad esempio, il metodo addChild (classe flash.display.DisplayObjectContainer).
All’inizio il passaggio potrà sembrare difficiltoso e poco intuitivo ma approfondendo l’argomento sarà facile intuire e notare come le cose siano state radicalmente semplificate.

Nello script seguente utilizzeremo proprio questo metodo per visualizzare sullo Stage tre cerchi di dimensioni differenti, introducendo altre due novità: il concetto di Shape, una sorta di oggetto contenitore simile al MovieClip ma adatto a contenere forme vettoriali, e drawCircle(), metodo che crea un cerchio accettando tre parametri (posizione x, posizione y e il raggio).

1
2
3
4
5
6
7
8
9

function doDrawCircle(x:Number, y:Number, radius:Number):void 
{
	var child:Shape = new Shape();
	child.graphics.beginFill(0xFFCC00);
	child.graphics.lineStyle(2, 0x000000);
	child.graphics.drawCircle(x, y, radius);
	child.graphics.endFill();
	addChild(child);
}

NOTA:
dall’immagine si nota immediatamente che l’ultimo cerchio creato appare sempre sopra il precedente, a dimostrazione della gestione automatica della profondità in Flash tramite la Display List.

Nel caso in cui fosse necessario cancellare un elemento dallo Stage sarà sufficiente utilizzare uno dei diversi metodi messi a disposizione dalla classe DisplayObjectContainer, tra i quali, ad esempio removeChildAt(indice posizione).

Per eliminare il primo elemento, ad esempio, potete utilizzare:

1

removeChildAt(0);

I COMPONENT
Utilizzare componenti e gestire eventi in AS 3.0

Come nelle precedenti versioni di Flash, anche nella CS 3 sono disponibili gli ormai famosi componenti preconfezionati e pronti all’uso (ComboBox, DataGrid, Button e così via). La loro implementazione è però cambiata rispetto al passato e segue il principio della Display List descritto nel paragrafo precedente, rendendo l’utilizzo molto più semplice ed immediato.

Nel prossimo script creeremo tramite codice un componente Button ed una TextArea, quest’ultima utilizzata per visualizzare il tipo di evento invocato dal pulsante.

Per eseguire lo script è necessario trascinare i componenti in questione dal pannello Components alla Libreria.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import fl.controls.Button;
import fl.controls.TextArea;
 
var b:Button = new Button();
b.x = 100;
b.y = 10;
addChild(b);
 
var t:TextArea = new TextArea();
t.x = 100;
t.y = 30;
addChild(t);
 
 
function onClick(event:MouseEvent):void {
	t.text = "onClick";
}
function onMouseOver(event:MouseEvent):void {
	t.text = "onMouseOver";
}
function onMouseOut(event:MouseEvent):void {
	t.text = "onMouseOut";
}
 
b.addEventListener(MouseEvent.CLICK, onClick);
b.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
b.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);

NOTA:
in questo esempio notiamo altre due novità importanti:
- davanti al nome delle proprietà non viene più utilizzato l’underscore (per esempio x e visibile al posto di _x e _visible)
- tutti i package delle classi sono cambiati. Le classi hanno infatti subito un importante processo di refactoring: sono tutte state spostate e moltissime sono nuove.

La classe LOADER
Caricare dinamicamente immagini e file swf

I metodi loadClip e loadMovie hanno fatto il loro tempo.
La classe Loader ha preso il loro posto portando una serie di novità, anche se la sua gestione è abbastanza simile a quella della “vecchia” classe MovieClipLoader.

In questo esempio, creeremo un’istanza della classe Loader e caricheremo l’immagine utilizzando il metodo load(), che accetta come parametro un’istanza della classe URLRequest (un’altra novità di ActionScript 3.0), nella quale abbiamo incapsulato il percorso dell’immagine che vogliamo caricare.

Definiamo infine gli eventi ProgressEvent.PROGRESS ed Event.COMPLETE, che rispettivamente ci forniranno informazioni riguardo al caricamento dell’immagine ed al suo completamento.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import flash.display.*;
import flash.net.URLRequest;
import flash.events.Event;
 
 
var loader:Loader = new Loader();
var url:String = "image.jpg";	
var urlReq:URLRequest = new URLRequest(url);
loader.load(urlReq);
addChild(loader);
 
// Caricamento in corso
function onProgress(event:ProgressEvent):void {
	trace(" Percentuale caricamento: " + int((event.bytesLoaded/event.bytesTotal)*100));
}
 
// Caricamento Completato
function onComplete(event:Event):void {
	trace(" ::: CARICAMENTO COMPLETATO :::");
}
 
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

NOTE:
La proprietà contentLoaderInfo contiene informazioni e statistiche inerenti al processo di caricamento. E’ importante notare come i due eventi facciano parte di due classi distinte: la fase di caricamento viene infatti gestita dalla classe ProgressEvent, mentre il completamento dalla classe Event.

XML E4X
Sfruttiamo la nuova classe XML per leggere il nostro blog

Anche la gestione ed il parsing di file XML sono radicalmente cambiati in Actionscript 3.0.
Le modalità di caricare i dati in formato XML sono ora molteplici ma tra le novità maggiori spicca l’introduzione al supporto delle specifiche ECMAScript for XML (E4X).

La nuova classe XML fornisce una serie di metodi che agevolano notevolmente il lavoro dello sviluppatore nella manipolazione dei dati acquisiti, permettendo l’utilizzo della sintassi a punto (.), familiare a coloro che già utilizzavano Actionscript.

In questo esempio caricheremo il file XML disponibile nel nostro portale FlexGala e visualizzeremo in output alcune informazioni inerenti le ultime news.

ESTRATTO DAL FILE XML http://www.augitaly.com/flexgala/rss.php?t=n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?xml version="1.0" ?> 
- <!--  Generated on Sun, 13 May 2007 19:10:05 +0000   --> 
- <rss version="2.0">
- <channel>
  <title>Le news di Augitaly.com</title> 
  <link>http://www.augitaly.com</link> 
  <description>News dal mondo di Flex 2</description> 
  <language>it</language> 
  <webMaster>webmaster@augitaly.com</webMaster> 
  <generator>PHP RSS Feed Generator</generator> 
- <item>
  <title>Adobe Flex Component Kit for Flash CS3</title> 
- <description>
- <![CDATA[ [...]
  ]]> 
  </description>
<link>http://www.augitaly.com/flexgala/index.php?cmd=newsreader&id=133</link> 
  <pubDate>Fri, 11 May 2007 08:10:04 +0000</pubDate> 
  </item>
- <item>
// …. [Contenuto News n° 2]
</item>
…. [News n° 3]
… [continua]

CODICE ACTIONSCRIPT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var myXML:XML = new XML();
var XML_URL:String = "http://www.augitaly.com/flexgala/rss.php?t=n";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
 
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded);
 
function xmlLoaded(event:Event):void
{
    myXML = XML(myLoader.data);
	parseXML(myXML);
}
 
 
function parseXML(myXML:XML) 
{
 
	trace("Portale: " + myXML.channel.title)		
	trace("URL: " + myXML.channel.link)		
	trace("--------------------------------");
 
	for each (var property:XML in myXML.channel.item)
	{
 
		trace("Titolo news: " + String(property.title));		}	
}

NOTA:
La classe XML disponibile in AS2 rimane comunque disponibile anche in ActionScript 3.0, ma è stata rinominata in XMLDocument per evitare conflitti con le nuove funzionalità E4X.

Creare una classe in ActionScript 3.0
Muovere un oggetto sullo Stage utilizzando OnEnterFrame

Tra le novità presenti in Flash CS 3 non poteva mancare un supporto più avanzato alla programmazione ad oggetti ed alla scrittura di classi personalizzate.

Scriveremo un semplice esempio utile a dimostrare i cambiamenti nella scrittura di una classe personalizzata e come è possibile abbinare una classe ad un elemento visivo presente sullo Stage. Creeremo, quindi, una semplice animazione, utilizzando l’evento ENTER_FRAME, che sposterà un elemento di 5 pixel a destra ad ogni fotogramma.

Creiamo un nuovo Flash File (Actionscript 3.0) assegnando un nome qualsiasi, disegnamo un rettangolo sullo Stage e dopo averlo selezionato premiamo il pulsante F8 dalla tastiera per trasformarlo in un simbolo della libreria di tipo MovieClip.
Assegniamo il nome dell’oggetto, che in questo esempio sarà button_mc, e clicchiamo sull’opzione Linkage -> Export for Actionscript (come rappresentato nell’immagine seguente). Accettiamo i parametri di default e clicchiamo su OK nella finestra di avviso che apparirà subito dopo.
L’attributo Class, settato automaticamente, indica a Flash che all’oggetto in questione corrisponde una classe chiamata button_mc.as.

Creiamo, quindi, un nuovo Actionscript File, chiamato proprio button_mc.as, lo salviamo nella stessa cartella del file .fla ed inseriamo al suo interno il seguente codice.
Per testare lo script è necessario, infine, compilare il file .fla (Win: Control + Invio)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class button_mc extends Sprite
	{
		public function button_mc() 
		{
			addEventListener(Event.ENTER_FRAME, onEnterFrame)
		}
 
		private function onEnterFrame(event:Event):void 
		{
			this.x +=5;
		}
	}
}

Classe ANIMATOR e funzione “Copy Motion As ActionScript 3.0”
Convertire animazioni create sulla TimeLine in Actionscript

E’ finalmente possibile selezionare un’animazione realizzata su timeline, convertirla in actionscript/XML ed utilizzarla all’interno del proprio script.
Prestazioni migliori ed una collaborazione più immediata tra designer e developer sono solo due tra i principali vantaggi nell’utilizzo di questa tecnica.

Possiamo quindi realizzare su un nuovo file Flash AS 3 un’animazione di tipo Tween Motion (ad esempio possiamo animare una movieclip da un punto all’altro dello Stage).
Selezioniamo i fotogrammi inerenti l’animazione e con il tasto destro del mouse scegliamo la voce Copy Motion as ActionScript 3.0(vedi immagine seguente)

Apparirà una nuova finestra chiedendo di definire il nome istanza dell’elemento a cui fare riferimento. Questo valore dovrà coincidere con il nome istanza dell’oggetto da animare utilizzato nel codice actionscript.

A questo punto, possiamo “incollare” il codice in memoria sul primo fotogramma di un nuovo file flash as 3. Creiamo, in un nuovo livello, un nuovo movieclip (ad esempio un rettangolo) e, utilizzando il pannello proprietà, facciamo in modo che il suo nome istanza coincida con quello scelto in precedenza.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import fl.motion.Animator;
var square_xml:XML = <Motion duration="20" xmlns="fl.motion.*" 
	xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
	<source>
		<Source frameRate="12" x="51" y="266" scaleX="1"
  		 scaleY="1" rotation="0" elementType="movie clip" symbolName="square">
			<dimensions>
				<geom:Rectangle left="0" top="0" width="50" height="50"/>
			</dimensions>
			<transformationPoint>
				<geom:Point x="0.64" y="0.48"/>
			</transformationPoint>
		</Source>
	</source>
 
	<Keyframe index="0" tweenSnap="true" tweenSync="true">
		<tweens>
			<SimpleEase ease="0"/>
		</tweens>
	</Keyframe>
 
	<Keyframe index="9" tweenSnap="true" tweenSync="true" x="128.95" y="-107">
		<tweens>
			<SimpleEase ease="0"/>
		</tweens>
	</Keyframe>
 
	<Keyframe index="19" x="240.95" y="31"/>
</Motion>;
 
var square_animator:Animator = new Animator(<strong>square_xml</strong>, <strong>square</strong>);
square_animator.play();

La prima parte del codice potrà sembrare incomprensibile a coloro che non utilizzano Flex o che non hanno esperienza con XML, ma non è importante al momento capirne il significato in quanto generato automaticamente da Flash.

La penultima riga rappresenta, invece, l’animazione vera e propria.
Creiamo una nuova istanza della classe Animator, passando come primo parametro l’oggetto XML che rappresenta l’animazione creata con l’opzione Copy Motion as ActionScript 3.0, mentre, come secondo, il nome istanza del movieclip che vogliamo spostare (nel mio caso ho utilizzato un movieclip presente su Stage con nome istanza square).

Utilizziamo infine il metodo play() della classe Animator per avviare l’animazione.

FLV PlayBack - FULL Screen Video


Il componente utilizzato per visualizzare video FLV in streaming o tramite download progressivo è stato rivisitato notevolmente e tra le funzionalità che giudico di maggior rilievo c’è sicuramente il supporto totale al full screen video.

Per utilizzare il componente è sufficiente trascinarne un’istanza dal pannello components allo Stage di Flash.
Selezioniamo il componente, apriamo il pannello PARAMETERS e utilizziamo la proprietà source per localizzare il file video FLV del nostro hard disk che vogliamo visualizzare.

Sarà, infine, sufficiente selezionare uno skin che supporta la visione a schermo intero, ad esempio SkinUnderPlayFullScreen.swf, compilare il file (Win: Control + Invio) e cliccare sul pulsante relativo al FullScreen.