Undolog.com » Flash CS3 http://www.undolog.com Research & Development Blog Wed, 17 Mar 2010 14:52:19 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Adobe Flash CS4: creare un Ajax Loader o Activity Indicator http://www.undolog.com/2009/11/04/adobe-flash-cs4-creare-un-ajax-loader-o-activity-indicator/ http://www.undolog.com/2009/11/04/adobe-flash-cs4-creare-un-ajax-loader-o-activity-indicator/#comments Wed, 04 Nov 2009 14:19:44 +0000 Giovambattista Fazioli http://www.undolog.com/?p=2595 Creare un Ajax Loader (o Activity indicator per chi è ormai abituato ad usare l'Apple iPhone) per il Web non è una cosa difficile: esistono servizi che generano immagini gif animate di tutti i tipi. Tuttavia il formato GIF ha il grosso difetto di non supportare le trasparenze come si deve. La trasparenza, nel formato GIF attuale, coinvolge un solo piano di bit con la conseguenza che se non abbiamo un colore di sfondo uniforme, i bordi dell'immagine risultano notevolmente sgranati e frammentati.
L'animazione mostrata qui sotto è stata realizzata impostando come colore di trasparenza il bianco.

ajax-loader

Quindi se lo sfondo è bianco (o un colore simile) non ci sono problemi. Al contrario, appena sostituiamo lo sfondo, ecco cosa accade:

ajax-loader

In attesa, quindi, della diffusione del formato APNG (Animated PNG) - che supporterà un vero e proprio canale alpha per le trasparenze, importare GIF animati in contesti come Adobe Flash risulta "graficamente" una pessima scelta. Ecco allora come realizzare un'animazione in Adobe Flash del tutto simile a quelle presenti sul Web.

Costruiamo il nostro Ajax Loader in Adobe Flash: il "petalo"

Prima di tutto creiamo un MovieClip vuoto (o se preferite potete lavorare direttamente sullo stage) e disegnamo una linea verticale nera, il nostro petalo, alta 60/70 pixel per comodità, impostando uno spessore (tratto) di 10:

Ajax Loader in Adobe Flash

Selezioniamo la nostra linea e trasformiamola temporaneamente in un oggetto immagine (F8). Dal pannello Allinea, centriamola nello stage. Adesso duplichiamo (CTRL+D o CMD+D) la nostra linea, centriamo la linea duplicata e ruotiamola dal pannello Trasforma di 30 gradi:

Ajax Loader in Adobe Flash Ajax Loader in Adobe Flash

Ripetiamo questa operazione (duplica, centra, ruota di 30 gradi) fino ad ottenere:

Ajax Loader in Adobe Flash

Selezioniamo tutta l'immagine, cioè la somma degli oggetti:

Ajax Loader in Adobe Flash

Dal menu Elabora selezionate Dividi (CTRL+B o CMD+B):

Ajax Loader in Adobe Flash

Poi, sempre dal menu Elabora, selezionate Forma > Converti linee in riempimenti. In questo modo abbiamo ottenuto una figura "unica".

Adesso dobbiamo "bucare" il centro della nostra immagine. Per fare questo aumentate un po' lo zoom (tipo 400). Create un nuovo livello e proteggiamo quello con il lavoro svolto fino adesso:

Ajax Loader in Adobe Flash

Su questo nuovo livello potremmo lavorare in tranquillità, senza danneggiare l'altra nostra immagine. Disegniamo, partendo dal centro (mantenete premuto il tasto ALT insieme al tasto maiuscole SHIFT) un cerchio rosso senza bordo:

Ajax Loader in Adobe Flash

Nella figura qui sopra ho impostato la trasparenza del cerchio per evidenziare la sua posizione rispetto alla nostra figura (che si trova sul livello sottostante). Notate che ho appositamente "tagliato" gli spigoli dove si congiungono i "petali" della nostra figura. Il cerchio, quindi, dev'essere della giusta grandezza, cosa che ci tornerà comoda più avanti. Fatto questo selezionate il cerchio, copiatelo (CTRL+C o CMD+C) ed eliminate pure l'ultimo livello creato, sbloccate il livello con la nostra figura, e incollate!

Ajax Loader in Adobe Flash

Cliccate adesso sul bianco dello stage in modo da deselezionare il cerchio rosso. Ora abbiamo "fuso" i nostri due oggetti. Selezionate nuovamente il cerchio rosso ed eliminatelo!

Ajax Loader in Adobe Flash

Ottimo! Adesso selezioniamo tutto il nostro oggetto e cambiamogli colore con un grigio chiaro:

Ajax Loader in Adobe Flash

Selezioniamo poi il primo petalo (ore 12) e impostiamolo a nero (voi ovvimente potete scegliere la gradazione di colori che preferite):

Ajax Loader in Adobe Flash

Impostiamo ora il secondo petalo (ore 13) ad un grigio scuro:

Ajax Loader in Adobe Flash

Proseguiamo per gli altri due petali (scegliete vuoi quanta gradazione applicare) fino ad ottenere:

Ajax Loader in Adobe Flash

L'animazione

Perfetto, ci siamo quasi, l'ultimo sforzo richiesto è creare la rotazione. Questa non deve riguardare i petali ma solo il colore. Per fare questo avremmo potuto procedere anche in altri modi (vedi ad esempio con luso delle maschere...), tuttavia questo mi sembra più semplice. Spostiamoci di qualche fotogramma avanti, tipo al 5 e inseriamo un Fotogramma chiave.

Ajax Loader in Adobe Flash

Da pannello Trasforma ruotiamo la nostra immagine di 30 gradi, gli stessi gradi utilizzati durante la creazione dei nostri "petali". Ripetiamo questa operazione (inserimento Fotogramma chiave e rotazione di 30 gradi) mantenedo sempre costanti in numero di fotogrammi tra una chiave e un'altra, fino ad ottenere:

Ajax Loader in Adobe Flash

Finito! Il nostro Ajax Loader in Adobe Flash è terminato! Ecco qui sotto la versione GIF esportata da Flash.

Ajax Loader in Adobe Flash

Qui sotto il filmato Flash con uno sfondo in movimento (notate che non ci sono distorzioni o sgranature):

Il sorgente :)

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2009/11/04/adobe-flash-cs4-creare-un-ajax-loader-o-activity-indicator/feed/ 1 Come usare Google Maps in Adobe Flash CS4 http://www.undolog.com/2009/08/29/come-usare-google-maps-in-adobe-flash-cs4/ http://www.undolog.com/2009/08/29/come-usare-google-maps-in-adobe-flash-cs4/#comments Fri, 28 Aug 2009 22:34:40 +0000 Giovambattista Fazioli http://www.undolog.com/?p=2360 In Adobe Flash è possibile utilizzare un vasto assortimento di Web API esterne fornite da servizi come Facebook, Twitter o Flickr. In questo tutorial vedremo come integrare, in modo davvero semplice, i servizi di Google Maps in un filmato/applicazione Adobe Flash CS4. Premetto che il procedimento per poter utilizzare Google Maps in Flash è molto simile a quello che accade in HTML/Javascript (vedi per dettagli Come inserire Google Map nel proprio Web).

Download ed installazione delle SDK

Per prima cosa memorizziamo nei bookmark del nostro browser l'indirizzo del sito Google Maps API per Flash. Su questo sito troviamo tutto ciò che ci server per utilizzare le API di Google. Sulla destra della pagina è possibile accedere ad una serie di risorse, tra cui il link per scaricare le SDK da usare in Flash. Salvate lo ZIP sulla vostra scrivania (o Desktop) e scompattatelo. Nella cartella sdk/lib troverete un file chiamato map_1_16.swc. Copiate questo file nella clipboard (Command-C per Mac o Ctrl-C per PC) e posizionatelo all'interno di questo percorso:

PLAIN TEXT
CODE:
  1. // Mac
  2. [cartella utente]/Library/Application Support/Adobe/Flash CS4/language/Configuration/Components
  3.  
  4. // Windows
  5. [cartella utente]\Local Settings\Application Data\Adobe\Flash CS4\language\Configuration\Components

Se la cartella Components non esiste già, createla e in questa create una cartella Google e incollate il file map_1_16.swc. Se per caso avevate già aperto Flash (frettolosi...), chiudetelo e rapritelo, in modo che possa ricaricare il componente appena installato.

Creiamo il filmato Flash

A questo punto apriamo Flash e creiamo un nuovo filmato. Aprite la finestra Componenti e dovreste trovare Google Maps:

Google Maps Library

Selezionate il componente GoogleMapsLibrary e trascinatelo nello stage. Nel primo frame del nostro filmato inserite il seguente semplice codice:

PLAIN TEXT
Actionscript:
  1. // Importo le classi Google Maps
  2. import com.google.maps.*;
  3. import com.google.maps.overlays.*;
  4. import com.google.maps.controls.*;
  5.  
  6. var map:Map = new Map();
  7. map.key     = "API_KEY"; // vedi sotto per ottenere una tua chiave
  8. // In questo esempio imposto la dimensione della Mappa Google della
  9. // stessa grandezza del filmato. In alternativa potete inserire le
  10. // dimensioni che preferite.
  11. map.setSize( new Point(stage.stageWidth, stage.stageHeight));
  12. addChild(map);

Nella riga 7 dovete sostituire la stringa API_KEY con la chiave di attivazione che fornisce Google. Per ottenerla basta tornare sul sito Google Maps API for Flash e richiedere una API Key cliccando su Sign up for a Google Maps API Key. Quando vi verrà chiesto di inserire l'url del sito sul quale volete utilizzare il filmato Flash che accede alle API di Google, nel caso non lo sapete ancora o voletete semplicemente provare il filmato in locale, inserite http://localost e cliccate su Generate API Key:

Google API Key

A questo punto possiamo già provare il filmato, ottenendo:

Filmato Flash con Google Maps

Aggiungiamo qualche controllo

Per prima cosa aggiungiamo i classici controlli di Posizione, Zoom e Tipo Mappa. Per fare questo dobbiamo essere sicuri che la mappa sia pronta all'uso. Basta quindi creare un listener sull'evento MapEvent.MAP_READY. Aggiungiamo quindi le seguenti righe di codice:

PLAIN TEXT
Actionscript:
  1. // Aggiungiamo i controlli
  2. map.addEventListener( MapEvent.MAP_READY, onMapReady );
  3.  
  4. function onMapReady(e:MapEvent):void {
  5.     map.addControl( new PositionControl() );
  6.     map.addControl( new ZoomControl() );
  7.     map.addControl( new MapTypeControl() );
  8. }

Impostiamo un indirizzo

A questo punto possiamo impostare la mappa in modo che visualizzi un indirizzo specifico, come la sede della mia società Saidmade a Modena - o qualsiasi altro indirizzo che preferite.
Suggerimento: per trovare le coordinate del nostro indirizzo, ovvero Latitudine e Longitudine, possiamo usare questo semplice e utile hack. Aprire il sito di Google Maps. Una volta sulla mappa cercate l'indirizzo che desiderate (ad esempio Via Cortese 10, Modena). Quando l'indirizzo è visualizzato sulla mappa, inserite questa riga nella barra indirizzi del browser:

PLAIN TEXT
JavaScript:
  1. javascript:void(prompt('',gApplication.getMap().getCenter()));

Si aprirà una finestra pop-up con le coordinate utilizzabile nel codice:

Latitudine e Longitudine

Torniamo ad ActionScript e aggiungiamo le seguenti righe di codice nella funzione onMapReady():

PLAIN TEXT
Actionscript:
  1. // centro la mappa su una specifica località
  2. map.setCenter( new LatLng( 44.639828, 10.941795), 18, MapType.SATELLITE_MAP_TYPE );

Eseguiamo il filmato:

La sede di Saidmade Srl

Aggiungiamo un Marker

Sempre all'interno della funzione onMapReady() aggiungiamo le seguenti righe di codice:

PLAIN TEXT
Actionscript:
  1. // aggiungiamo il default marker
  2. var m:Marker = new Marker( new LatLng( 44.639828, 10.941795) );
  3. map.addOverlay(m);

Marker overlay

I Marker possono essere personalizzati a piacimento, sia tramite gli stili fornite dalle API stesse di Google, sia tramite Flash. Ad esempio aggiungendo questa import all'inizio del codice:

PLAIN TEXT
Actionscript:
  1. import com.google.maps.styles.*;

e sostituiendo il codice di creazione Marker visto prima con:

PLAIN TEXT
Actionscript:
  1. // aggiungiamo il default marker
  2. var m:Marker = new Marker(
  3.   new LatLng(44.639828, 10.941795),
  4.   new MarkerOptions({
  5.      strokeStyle: new StrokeStyle({color: 0x987654}),
  6.      fillStyle: new FillStyle({color: 0x223344, alpha: 0.8}),
  7.      radius: 12,
  8.      hasShadow: true
  9. }));
  10. map.addOverlay(m);

otteniamo il seguento effetto:

Personalizzare il Marker

In alternativa è possibile associare direttamente un MovieClip come Marker. Essendo un MovieClip, ovviamente, esso potrà contenere animazioni, video o qualsiasi altro tipo di contenuto interattivo supportato in Flash. Inoltre è possibile disegnare linee e forme così da creare delle mappe interattive e ricche di contenuti multimediali.
Per aggiungere un MovieClip e sufficiente crearlo, usando ad esempio un'immagine o un'animazione Flash, e impostare le sue proprietà in questo modo:

Impostazione proprietà MovieClip usato come Marker

Fatto questo modificate il codice di creazione Marker in:

PLAIN TEXT
Actionscript:
  1. // aggiungiamo il default marker
  2. var m:Marker = new Marker( new LatLng(44.639828, 10.941795),
  3.                new MarkerOptions( {icon: new myMarkerMovieClip() } ) );
  4. map.addOverlay(m);

Un Marker davvero speciale

Tutte le informazioni sulle API, le classi, metodi, eventi e proprietà sono disponibili su Google Maps API ActionScript Reference.
Inoltre l'intero pacchetto è stato recentemente aggiornato con molte novità interessanti, come le Mappe 3D.

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2009/08/29/come-usare-google-maps-in-adobe-flash-cs4/feed/ 16 Da Actionscript ad Objective-C http://www.undolog.com/2009/06/12/da-actionscript-ad-objective-c/ http://www.undolog.com/2009/06/12/da-actionscript-ad-objective-c/#comments Fri, 12 Jun 2009 08:00:26 +0000 Giovambattista Fazioli http://www.undolog.com/?p=1725 Ho pensato che potrebbe essere utile a chi si è avvicinato da poco allo sviluppo di applicazioni per Apple iPhone, confrontare Adobe Actionscript - il linguaggio utilizzato in Adobe Flash e Adobe Flex, più diffuso tra i neo-programmatori - e Objective-C, il linguaggio utilizzato da Apple per sviluppare le sue applicazioni. Objective-C è a tutti gli effetti un linguaggio ad oggetti nel senso puro, non che Actionscript non lo sia, ma Objective-C ha sicuramente una marcia in più in quanto è un'estensione dell'ANSI C e la sua sintassi è un mix tra C/C++ e Smalltalk; è un vero OO (Object-oriented language). Moltissime caratteristiche dell'Objective-C non sono presenti in Actionscript che, nell'ultima release 3.0, ha dimostrato di poter crescere nonostante sia ancora lontano dal profilo di un buon linguaggio di sviluppo ad oggetti.

Classi

Ad esempio vediamo come vengono diversamente strutturate le definizioni delle classi in Actionscript e Objective-C.

PLAIN TEXT
Actionscript:
  1. // pakage - per il namespacing di Adobe
  2. pakage {
  3.     // definizione della classe vera e propria
  4.     public class MyClass {
  5.         // definizione delle proprietà (pubbliche o private)
  6.         public var myPropertyVar:String;
  7.         // costruttore
  8.         public function MyClass() {
  9.             // todo
  10.         }
  11.         // metodo pubblico
  12.         public function myMethod():void {
  13.             // todo
  14.         }
  15.     }
  16. }

In Objective-C la prima differenza (ereditata dal C) è la separazione tra le "definizioni" e l'implementazione. In Objective-C avrete sempre a che fare con due tipi di file distinti: .h e .m (in C avremmo .h e .c). I file .h (header file) contengono solo le definizioni, quindi nessuna impostazione o implementazione.

PLAIN TEXT
Objective-C:
  1. // myClass.h
  2. @interface myClass : NSObject {
  3.     @public NSString *myPropertyVar;
  4. }
  5.  
  6. - (void)myMethod;
  7.  
  8. @end

Nel file .m abbiamo invece:

PLAIN TEXT
Objective-C:
  1. // myClass.m
  2. @implementation myClass
  3.  
  4. - (void) myMethod {
  5.     // todo
  6. }
  7. @end

Objective-C gestisce le proprietà e i metodi in modo abbastanza differente da Actionscript. Ad esempio il metodo myMethod visto in precedenza viene chiamato (o invocato) in questo modo:

PLAIN TEXT
Objective-C:
  1. [self myMethod];

Si parla, infatti, di Sending Message, più che di chiamata ad un metodo!

Nota: questa caratteristica è reale. Quando si invoca un metodo in Objective-C non si chiama un indirizzo fisico o puntatore a funzione. In Objective-C si spedisce effettivamente all'oggetto un vero e proprio messaggio dove gli si chiede di eseguire un particolare "metodo"

La sintassi con le parentesi quadre, forse la cosa più difficile da digerire anche per gli sviluppatori ANSI C, risulta più chiara e semplice se consideriamo che:

PLAIN TEXT
Objective-C:
  1. myClass.myMethod();
  2. // è uguale a
  3. [myClass myMethod];
  4. // oppure
  5. myClass.myPropertyVar = 1978;
  6. // uguale a
  7. [myClass setMyPropertyVar:1978];

Per quanto riguarda la creazione di oggetti, quindi la creazione di una instanza di una classe, abbiamo:

PLAIN TEXT
Actionscript:
  1. var istanceMyClass:MyClass = new MyClass();

PLAIN TEXT
Objective-C:
  1. MyClass *istanceMyClass = [[MyClass alloc] init];
  2. // o più semplicemente
  3. MyClass *istanceMyClass = [MyClass alloc];
  4. // Objective-C non supporta in realtà un unico costruttore, come
  5. // avviene invece in Actionscript: vedi ad esempio initWithName,
  6. // initWithFrame o semplicemente init

Tutto questo è solo un semplice aiuto, che lascia inesplorate moltissime altre funzionalità dell'Objective-C; ci sono concetti come i puntatori (simili ai riferimenti in Actionscript - ma non uguali), i protocolli, le categorie e molto altro ancora. Se siete proprio sconfortati nell'affrontare Objective-C, come ho già consigliato altre volte, partite dall'ANSI C, lasciate stare - per adesso - Actionscript, Javascript o PHP! Quest'ultimi, conoscendo bene l'ANSI C, li riscoprirete sotto una luce davvero differente.

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2009/06/12/da-actionscript-ad-objective-c/feed/ 1 Very short snippet: estendere un array Actionscript con il metodo shuffle() http://www.undolog.com/2009/04/02/very-short-snippet-estendere-un-array-actionscript-con-il-metodo-shuffle/ http://www.undolog.com/2009/04/02/very-short-snippet-estendere-un-array-actionscript-con-il-metodo-shuffle/#comments Thu, 02 Apr 2009 13:40:06 +0000 Giovambattista Fazioli http://www.undolog.com/?p=1512 Avevo parlato già di come realizzare il metodo shuffle() in Javascript e Actionscript. Mi sono accorto, tuttaavia, di non aver sottolineato che anche Actionscript è in grado di estendere, nel medesimo modo di Javascript, il proprio oggetto Array:

PLAIN TEXT
Actionscript:
  1. Array.prototype.shuffle = function() {
  2.     for(var j:uint, x:*, i:uint = this.length; i; j = Math.floor(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);
  3. }

Questo codice può essere inserito anche all'interno di una classe, ad esempio nel costruttore:

PLAIN TEXT
Actionscript:
  1. package {
  2.     public class Hello extends MovieClip {
  3.         public function Hello() {
  4.             Array.prototype.shuffle = function() {
  5.                 for(var j:uint, x:*, i:uint = this.length; i; j = Math.floor(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);
  6.             }
  7.         }
  8.     }
  9. }

Per usare poi tale "estensione" è sufficiente chiamare il meotodo shuffle() da qualsiasi istanza di un array:

PLAIN TEXT
Actionscript:
  1. var a:Array = ["ciao","come","va"];
  2. a.shuffle();

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , , , , , , , , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2009/04/02/very-short-snippet-estendere-un-array-actionscript-con-il-metodo-shuffle/feed/ 2 Papervision 3D: mostrare il cursor hand sugli elementi 3D interattivi http://www.undolog.com/2009/03/15/papervision-3d-mostrare-il-cursor-hand-sugli-elementi-3d-interattivi/ http://www.undolog.com/2009/03/15/papervision-3d-mostrare-il-cursor-hand-sugli-elementi-3d-interattivi/#comments Sun, 15 Mar 2009 12:48:24 +0000 Giovambattista Fazioli http://www.undolog.com/?p=1459 Impostato un materiale in modalità interactive e agganciando un evento ad un piano:

PLAIN TEXT
Actionscript:
  1. var mymaterial:BitmapAssetMaterial = new BitmapAssetMaterial("foto1");
  2. mymaterial.interactive             = true;
  3. var myplane:Plane                  = new Plane( my_material, 200, 100, 0, 0);
  4. myplane.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS,
  5.     function(e:InteractiveScene3DEvent):void {
  6.     // todo
  7.     }
  8. );

è possibile attivare la visualizzazione della "manina" agendo sulla BasicView che lo contiene e lo "renderizza", e non sui singoli elementi tridimensianali:

PLAIN TEXT
Actionscript:
  1. var bv:BasicView = new BasicView(stage.stageWidth, stage.stageHeight, false, true);
  2. bv.buttonMode    = true;
  3. bv.useHandCursor = true;

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2009/03/15/papervision-3d-mostrare-il-cursor-hand-sugli-elementi-3d-interattivi/feed/ 0 Biglietto da visita in 3D con Papervision http://www.undolog.com/2009/03/05/biglietto-da-visita-in-3d-con-papervision/ http://www.undolog.com/2009/03/05/biglietto-da-visita-in-3d-con-papervision/#comments Thu, 05 Mar 2009 21:15:50 +0000 Giovambattista Fazioli http://www.undolog.com/?p=1436 Ecco un modo originale di proporre e presentare il proprio biglietto da vista sul Web! Il sorgente qui.

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2009/03/05/biglietto-da-visita-in-3d-con-papervision/feed/ 5 Very short snippet: shuffle() in Javascript e Actionscript http://www.undolog.com/2009/02/16/very-short-snippet-shuffle-in-javascript-e-actionscript/ http://www.undolog.com/2009/02/16/very-short-snippet-shuffle-in-javascript-e-actionscript/#comments Mon, 16 Feb 2009 22:23:08 +0000 Giovambattista Fazioli http://www.undolog.com/?p=1371 In PHP esiste una comoda funzione chiamata shuffle() che permette di mescolare un array (vedi Very short trick: prendere elementi casuali da un array in PHP). Un'ottima versione per Javascript l'ho trovata qui. Qui sotto il codice leggermente rivisto:

PLAIN TEXT
JavaScript:
  1. Array.prototype.shuffle = function() {
  2. for(var j, x, i = this.length; i; j = Math.floor(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);
  3. }

Rispetto all'originale ho esteso l'oggetto Array e inserito Math.floor() al posto di parseInt(), in quanto da test effettuati è risultato estremamente più veloce, almeno sulla mia macchina e con FireFox 3.

In ActionScript 3.0 l'ho usata all'interno della classe MatrixArray:

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Mescola in modo casuale la matrice
  3.  *
  4.  */
  5. public function shuffle():void {
  6.     // thanks to http://jsfromhell.com/array/shuffle
  7.     for(var j, x, i = __len; i; j = Math.floor(Math.random() * __len), x = this[--i], this[i] = this[j], this[j] = x);
  8. }

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , , , , , , , , , , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2009/02/16/very-short-snippet-shuffle-in-javascript-e-actionscript/feed/ 3 Actionscript 3.0 for beginners: lesson #5 http://www.undolog.com/2009/01/22/actionscript-30-for-beginners-lesson-5/ http://www.undolog.com/2009/01/22/actionscript-30-for-beginners-lesson-5/#comments Thu, 22 Jan 2009 05:00:10 +0000 Giovambattista Fazioli http://www.undolog.com/?p=1221 Chi ha iniziato a sviluppare codice con linguaggi di scripting come Javascript o lo stesso Actionscript, potrebbe non conoscere affatto il concetto di tipo dato. Con alcuni linguaggi ad alto livello, infatti, si è abituati - nella migliore delle ipotesi - a dichiarare le variabili senza assegnargli un tipo dato specifico, senza contare quei linguaggi che non richiedono nessuna dichiarazione (come ad esempio il PHP – non nella versione strict 5). Chi viene dal C, al contrario, non saprebbe nemmeno come fare ad usare una variabile senza dichiararla in modo rigoroso.
Nell’esempio qui sotto vediamo la dichiarazione di due variabili senza specificare il tipo dato che conterranno:

PLAIN TEXT
Actionscript:
  1. var mio_numero = 0;
  2. var mia_stringa = "stringa di testo";

Lo stesso Actionscript, come annunciato, prevede la non dichiarazione dei tipi e delle variabili! Quest’ultimo comportamento va forzato eliminando la spunta nella casella “Modalità rigorosa” della finestra di Impostazioni Actionscript 3.0:

Flash CS3

Così facendo un codice come questo qui sotto non produrrà nessun errore:

PLAIN TEXT
Actionscript:
  1. var mio_numero = 3;
  2. mio_nove = 9;
  3. trace( mio_nove + mio_numero + 5 );

Alla riga 2 la variabile mio_nove non solo non contiene il tipo, ma non è nemmeno stata dichiarata tramite la keyword var. Nonostante sia stata mantenuta la possibilità di dichiarare le variabili in questa modalità “blanda”, è estremamente più corretto, utile ed efficacie specificare il tipo dato associato alla nostra variabile:

PLAIN TEXT
Actionscript:
  1. var mio_numero:uint = 0;
  2. var mia_stringa:string = "stringa di testo";

Questo è il modo corretto per dichiarare le variabili, utile per migliorare le performance e la solidità della nostra applicazione.

Vantaggi nell’uso dei tipi

C’era un tempo in cui un programmatore doveva risparmiare memoria a livello bit! Quando il codice aveva pochi Kilobyte a disposizione, usare 8 bit per mantenere i mesi dell’anno era davvero uno spreco immane. Con 4 bit, infatti, possiamo memorizzare 16 valori, dallo 0 (0000) al 15 (1111). Oggi, evidentemente, i tempi sono cambiati. Un personal computer dispone in media di qualche Giga di RAM (il mio ne ha 8!). Diventa quindi di uso comune non fare più attenzione al “consumo” di RAM e risorse.
Ad un esame più attento, poi, il problema del consumo maggiore di RAM non riguarda solo uno “spreco” fine a se stesso; una cattiva gestione dei tipi può rendere il codice più lento in quanto obbliga compilatore, interprete ed eseguibile finale a lavorare su tipi più “capienti” del necessario.

Actionscript 3.0 ha introdotto alcuni tipi dati nuovi che permettono di sviluppare applicazioni sicuramente più performanti grazie all’indicazione – preventiva – della tipologia di dato da trattare. Un esempio classico riguarda i cicli for. Partendo da questa tabella:

  • Number: (64 bit) da -9.007.199.254.740.992 a 9.007.199.254.740.992 (per gli interi)
  • int: (32 bit) da -2.147.483.648 (-231) a 2.147.483.647 (231 - 1)
  • uint: (32 bit) da 0 a 4.294.967.295 (232 - 1)

Scrivere:

PLAIN TEXT
Actionscript:
  1. for( var i:Number = 0; i <100; i++) {
  2.  // ...
  3. }

rappresenta palesemente uno “spreco di risorse”, molto meglio e sufficiente sarebbe:

PLAIN TEXT
Actionscript:
  1. for( var i:uint = 0; i <100; i++) {
  2.  // ...
  3. }

In linea generale sarebbe buona regola fare riferimento a questa tabella:

  • Number: qualsiasi valore numerico, con o senza decimali
  • int: numero intero senza decimali
  • uint: numero intero senza segno, vale a dire un numero intero non negativo

Questo significa che se dobbiamo memorizzare valori interi, cioè non decimali, positivi, uint è il tipo dato perfetto! Se abbiamo necessità anche del "segno", cioè valori interi negativi, possiamo avvalerci di int. Nei casi di numeri molto molto grandi e con decimali, allora il tipo Number è l'unica soluzione a nostro disposizione.

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2009/01/22/actionscript-30-for-beginners-lesson-5/feed/ 4 Very short trick: ADDED_TO_STAGE http://www.undolog.com/2009/01/08/very-short-trick-added_to_stage/ http://www.undolog.com/2009/01/08/very-short-trick-added_to_stage/#comments Thu, 08 Jan 2009 09:34:42 +0000 Giovambattista Fazioli http://www.undolog.com/?p=1137 Come abbiamo visto più volte, nel costruttore di una classe che estende un MovieClip può essere necessario aggiungere l'evento ADDED_TO_STAGE per capire quando il nostro MovieClip è disegnato effettivamente sulla stage:

PLAIN TEXT
Actionscript:
  1. // costruttore
  2. public function MyClass():void {
  3.     addEventListener( Event.ADDED_TO_STAGE, main );
  4. }

Sarebbe buona norma eliminare tale evento all'interno della funzione main():

PLAIN TEXT
Actionscript:
  1. // costruttore
  2. public function MyClass():void {
  3.     addEventListener( Event.ADDED_TO_STAGE, main );
  4. }
  5. //
  6. private function main( e:Event = null ):void {
  7.     removeEventListener( Event.ADDED_TO_STAGE, main );
  8.     // ...
  9. }

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2009/01/08/very-short-trick-added_to_stage/feed/ 0 Very short trick: addEventListener() AS3, un handler più eventi http://www.undolog.com/2009/01/06/very-short-trick-addeventlistener-as3-un-handler-piu-eventi/ http://www.undolog.com/2009/01/06/very-short-trick-addeventlistener-as3-un-handler-piu-eventi/#comments Mon, 05 Jan 2009 23:32:22 +0000 Giovambattista Fazioli http://www.undolog.com/?p=1118 In Actionscript 3.0 è necessario utilizzare addEventListener() per intercettare un qualsiasi evento:

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Dato un MovieClip mc, si impostano eventi e handler
  3.  */
  4. mc.addEventListener( MouseEvent.CLICK, on_click );
  5. mc.addEventListener( MouseEvent.ROLL_OVER, on_roll_over );
  6. mc.addEventListener( MouseEvent.ROLL_OUT, on_roll_out );
  7. /**
  8.  * Funzioni di hander per gli eventi sopra indicati
  9.  */
  10. function on_click( e:MouseEvent ):void {
  11.     // click
  12. }
  13. function on_roll_over( e:MouseEvent ):void {
  14.     // roll over
  15. }
  16. function on_roll_out( e:MouseEvent ):void {
  17.     // roll out
  18. }

In alternativa è possibile usare la forma:

PLAIN TEXT
Actionscript:
  1. mc.addEventListener( MouseEvent.CLICK, on_handler );
  2. mc.addEventListener( MouseEvent.ROLL_OVER, on_handler );
  3. mc.addEventListener( MouseEvent.ROLL_OUT, on_handler );
  4. /**
  5.  * Creo un'unica funzione per gestire tutti gli eventi
  6.  */
  7. function on_handler ( e:MouseEvent ):void {
  8.     switch( e.type ) {
  9.         case MouseEvent.CLICK:
  10.              // click
  11.              break;
  12.         case MouseEvent.ROLL_OVER:
  13.              // roll over
  14.              break;
  15.         case MouseEvent.ROLL_OUT:
  16.              // roll out
  17.              break;
  18.     }
  19. }

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2009/01/06/very-short-trick-addeventlistener-as3-un-handler-piu-eventi/feed/ 9 Wordpress Plugin: Flash Feed Scroll Reader http://www.undolog.com/2008/12/22/wordpress-plugin-flash-feed-scroll-reader/ http://www.undolog.com/2008/12/22/wordpress-plugin-flash-feed-scroll-reader/#comments Mon, 22 Dec 2008 21:03:38 +0000 Giovambattista Fazioli http://www.undolog.com/?p=1090 Prendendo spunto dal post Creare un semplice Feed Reader con SimplePie e jQuery ho creato il primo Plugin Wordpress targato Saidmade. Flash Feed Scroll Reader utilizza SimplePie per creare un proxy PHP per accedere ai diversi indirizzi feed. Per l'effetto di scroll ho scelto Flash per una questione di performance! Nonostante sia possibile generare lo stesso effetto anche con librerie Javascript come jQuery, la fluidità offerta da Flash è sicuramente superiore, consentendo di non rallentare eccessivamente il sistema. Inoltre il Plugin sfrutta la libreiria SWFObject per inserire il filmato Flash nel blog. In questa release è possibile impostare il comportamento dello scroller direttamente dal pannello di controllo. Nelle prossime versioni sarà possibile passare ulteriori parametri alla funzione PHP in modo da aggiungere più scroller sulla stessa pagina.

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , , , , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2008/12/22/wordpress-plugin-flash-feed-scroll-reader/feed/ 7 Adobe AIR e le API di Feedburner: reloaded http://www.undolog.com/2008/11/18/adobe-air-e-le-api-di-feedburner-reloaded/ http://www.undolog.com/2008/11/18/adobe-air-e-le-api-di-feedburner-reloaded/#comments Tue, 18 Nov 2008 13:47:26 +0000 Giovambattista Fazioli http://www.undolog.com/?p=968 Prendo spunto dall'ottimo tutorial di Napolux, Flex 3, Adobe AIR e le API di Feedburner, che mostra come scrivere una semplice applicazione (o widget) Adobe AIR usando Flex 3, per mostrare come realizzare la stessa identica cosa usando Adobe Flash CS3. Se lo desiderate, inoltre, potete sfruttare l'estensione per la creazione di applicazioni Adobe AIR. Non è infatti necessario, ai fini di questo tutorial, compilare l'applicazione come eseguibile AIR; potete usare il codice proposto come semplice filmato Flash da "apporre" alle vostre pagine Web.

Flash vs Flex

Nonostante apprezzi Adobe AIR come tecnologia e come è stato implementato nelle piattaforme HTML (Dreamweaver), Flash e Flex, non sono "ancora" del tutto ben disposto verso Flex! Non voglio certo mettere a confronto Flash con Flex, nonostante hanno molti punti in comune ma anche molte differenze. Tuttavia non ho assolutamente apprezzato la politica Adobe rispetto a questo spinoff a volte privo di senso. Avrei preferito, invece, la costituzione di un unico ambiente (Flax) di sviluppo e non questa "inutile" separazione. Inoltre, da buon programmatore, gli ambienti troppo "visuali" non mi piacciono granchè e Flex sembra proprio destinato a diventare pericolosamente simile a Visual Basic, che tra l'altro conosco molto bene e su cui ho lavorato per molti anni. Insomma, Flex sinceramente non l'ho capito e non ho capito cosa vuole fare Adobe con questo branch. Se Flex è indicato come l'ambiente ideale per scrivere RIA qual'è il destino di Flash? Tutte le features di Flex, effettivamente non disponibili "direttamente" in Flash, potrebbero - volendo - essere inserite senza costringere ad acquistare licenze multiple per sviluppare - alla fine - la stessa identica cosa.

Differenze tra Flash e Flex

La prima cosa che noterete nella versione Flash è la presenza di un po' più codice. Infatti Flex risolve alcune procedure sfruttando direttamente i "suoi" file MXML. A ben guardare, comunque, non c'è tanto più codice di quello che si potrebbe pensare. La procedura più corposa, che in Flex è "oscurata", è la connessione via REST alle API di Feedburner. Uno dei vantaggi nell'uso di un codice scritto in Flash è che lo stesso può funzionare immediatamente sia come applicativo AIR che come filmato Flash su una qualsiasi pagina Web! Sempre se non abbiamo utilizzato funzionalità specifiche di un amiente desktop. Inoltre, ed ecco un altro motivo per cui Flex non mi convince affatto, l'applicazione Adobe AIR creata con Flash risulta 5 volte inferiore a quella proposta da Napolux e compilata con Flex builder:

Nota: ad onor del vero questo è imputabile a tutta una serie di componenti (come l'mx.controls.Alert ) che vengono inclusi in Flex e non nella mia versione Flash; in Actionscript 3.0, infatti, tutta una serie di funzionalità è stata eliminata: tutti i "pachetti" mx presenti in Actionscript 2.0 e migrati ora sotto Flex! Comunque mi riservo quanto prima di effettuare maggiori test al riguardo.

Il codice

Deciso o meno di compilare il nostro filmato come applicazione Adobe AIR (cosa che potete fare in qualsiasi momento successivo), ecco la classe documento Feedburner.as: (tutti i codici sono disponibili su Google Code)

PLAIN TEXT
Actionscript:
  1. package {
  2.     /**
  3.      * Class Document for FeedBurner Adobe AIR version
  4.      * Original idea by Napolux.com (http://www.napolux.com/2008/flex-3-adobe-air-feedburner.html)
  5.      *
  6.      * @author        Giovambattista Fazioli
  7.      * @email         g.fazioli@undolog.com
  8.      * @web           http://www.undolog.com
  9.      *
  10.      * CHANGE LOG
  11.      *
  12.      * ver 0.8
  13.      *    - First Adobe AIR release
  14.      *
  15.      */    
  16.     import flash.display.*;
  17.     import flash.text.*;
  18.     import flash.events.*;
  19.     import flash.net.URLLoader;
  20.     import flash.net.URLRequestMethod;
  21.     import flash.net.URLLoaderDataFormat;
  22.     import flash.net.URLRequest;
  23.     import flash.net.URLVariables;
  24.  
  25.     public class FeedBurner extends MovieClip {
  26.  
  27.         private const FEEDBURNER_API        :String        = 'http://api.feedburner.com/awareness/1.0/GetFeedData';
  28.        
  29.         public function FeedBurner():void {
  30.             trace("construtor::FeedBurner");
  31.             addEventListener( Event.ADDED_TO_STAGE, init );
  32.         }
  33.         //
  34.  
  35.         private function init( e:Event = null ):void {
  36.             result_txt.text = '';
  37.             feed_url.text     = 'http://www.undolog.com/feed';
  38.             //
  39.             check_btn.addEventListener( MouseEvent.CLICK, checkFeedBurnerReaders );
  40.         }
  41.        
  42.         //
  43.         private function checkFeedBurnerReaders(e:MouseEvent = null ):void {
  44.             trace( "FeedBurner::checkFeedBurnerReaders()" );
  45.             //
  46.             var loader        :URLLoader      = new URLLoader();
  47.             var urlreq        :URLRequest     = new URLRequest();
  48.             var param         :URLVariables   = new URLVariables();
  49.             //
  50.             param.uri                         = feed_url.text;
  51.             urlreq.url                        = FEEDBURNER_API;
  52.             urlreq.method                     = URLRequestMethod.GET;
  53.             urlreq.data                       = param;
  54.             //    
  55.             loader.dataFormat                 = URLLoaderDataFormat.TEXT;
  56.             loader.addEventListener(Event.COMPLETE, completeHandler);
  57.             try {
  58.                 loader.load(urlreq);
  59.             } catch (error:Error) {
  60.                 trace("Errore nel caricamento dell' URL");
  61.             }
  62.             function completeHandler(event:Event):void {
  63.                 //<rsp stat="ok">
  64.                 //  <feed id="651641" uri="undolog">
  65.                 //    <entry date="2008-11-17" circulation="389" hits="1348" downloads="0" reach="43"/>
  66.                 //  </feed>
  67.                 //</rsp>
  68.                 var x_xml    :XML             = XML(event.target.data);
  69.                 if( x_xml.@stat == 'ok' ) result_txt.text = x_xml.feed.entry.@circulation.toString();
  70.                 else result_txt.text = '0';
  71.             }
  72.         }
  73.     }
  74. }

La parte di interfaccia è disponibile su Feedburner.fla.

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2008/11/18/adobe-air-e-le-api-di-feedburner-reloaded/feed/ 3 Actionscript 3.0 for beginners: lesson #4 http://www.undolog.com/2008/11/11/actionscript-30-for-beginners-lesson-4/ http://www.undolog.com/2008/11/11/actionscript-30-for-beginners-lesson-4/#comments Tue, 11 Nov 2008 05:00:41 +0000 Giovambattista Fazioli http://www.undolog.com/?p=915 Riprendiamo il nostro codice di esempio del TicTacToe (che trovate per intero su Google Code) e iniziamo ad analizzarlo in dettaglio.

Importare le definizioni

Con Actionscript 3.0 è stato fatto un grande lavoro di pulizia e sistemazione nell'alberatura delle classi (contenute nei pacchetti, package) utilizzate durante lo sviluppo. In altri linguaggi di programmazione, come il C ad esempio, quando si desidera utilizzare una funzionalità bisogna esplicitamente "importarla" nel codice. Questa operazione di "importazione" è necessaria per permettere al compilatore di avere tutti i codici e le definizioni legate alla funzionalità che vogliamo usare. In Actionscript 3.0, tuttavia, l'istruzione import non va confusa con l'equivalente C/C++ #include; Actionscript 3.0 mette a disposizione l'istruzione include che è identica all'#include del C/C++. Quest'ultima, infatti, "include" effettivamente del codice che, se usato o meno, viene compilato nell'eseguibile finale. L'istruzione import è di più alto livello e risulta più "intelligente" in fase di compilazione. Essa serve principalemente per accedere alle classi senza doverne specificare il nome completo. In alre parole invece di usare forme del tipo:

PLAIN TEXT
Actionscript:
  1. var myMC:flash.display.MovieClip = new flash.display.MovieClip();

Importando la definizione dallo specifico pacchetto (o libreria se preferite), si ottiene il più semplice e leggibile:

PLAIN TEXT
Actionscript:
  1. import flash.display.MovieClip;
  2. //
  3. var myMC:MovieClip = new MovieClip();

Nel nostro esempio, all'interno della dichiarazione del package della classe, troviamo subito tre import:

PLAIN TEXT
Actionscript:
  1. import flash.display.*;
  2. import flash.events.*;
  3. import flash.text.*;

Il primo import rende disponibili tutte le classi e le definizioni all'interno del package flash.display. In alternativa avremmo potuto sostituire l'intero pacchetto con l'importazione (mirata) delle singole classi e definzioni che usiamo, ovvero:

PLAIN TEXT
Actionscript:
  1. import flash.display.DisplayObject;
  2. import flash.display.MovieClip;
  3. import flash.display.Stage;
  4. import flash.display.StageAlign;
  5. import flash.display.StageScaleMode;

Questa operazione di "dettaglio" non è comunque necessaria ai fini del risultato finale. Se una classe importata non viene utilizza nello script, non viene - intelligentemente - esportata nel file SWF.

Questo significa che è possibile importare pacchetti di grandi dimensioni senza doversi preoccupare delle dimensioni del file SWF; il codice byte associato a una classe viene incluso in un file SWF solo se tale classe viene effettivamente utilizzata.

Al massimo, se esageriamo con gli "asterischi", cioè con sintassi come flash.*, possiamo avere un "leggero" rallentamento durante la fase di compilazione! Nella "vita di tutti i giorni", dunque, è possibile utilizzare in tutta tranquillità la sintassi usata nel nostro esempio.

Costanti statiche

Ecco un'altra caratteristica interessante di Actionscript 3.0: le costanti statiche. Nell'esempio ne ho introdotte alcune a titolo di esempio:

PLAIN TEXT
Actionscript:
  1. static public const NAME    :String = "TicTacToe";
  2. static public const VERSION :String = "1.0";
  3. static public const AUTHOR  :String = "Giovambattista Fazioli <g.fazioli@undolog.com>";

È curioso notare che la stessa sequenza può essere scritta come:

PLAIN TEXT
Actionscript:
  1. public static const NAME    :String = "TicTacToe";
  2. public static const VERSION :String = "1.0";
  3. public static const AUTHOR  :String = "Giovambattista Fazioli <g.fazioli@undolog.com>";

Lasciando da parte queste "curiosità" dell'ambiente Flash CS3, diciamo che le variabili o costanti statiche sono associate alla classe e non all'istanza della classe! Vedi Classi, Oggetti e Istanze. Questa è una differenza importantissima, infatti nel nostro caso se scriviamo - a titolo di esempio:

PLAIN TEXT
Actionscript:
  1. var ttt:TicTacToe = new TicTacToe();
  2. trace( ttt.AUTHOR );  // errore

Verrà generato un errore. Questo perchè le costanti o variabili statiche vengono associate direttamente alla definizione della classe stessa e non ad una sua istanza. Il modo corretto è:

PLAIN TEXT
Actionscript:
  1. trace( TicTacToe.AUTHOR );  // Giovambattista Fazioli <g.fazioli@undolog.com>

Le costanti o variabili statiche hanno la caratteristche di non essere "istanziate" più volte. Vengono usate in tutte quelle situazioni dove il valore memorizzato (sia sotto forma di variabile che sotto forma di costante) rimane valido per tutte le istanze di quella classe e quindi può essere condiviso con tutti i "figli".

Variabili e Costanti

È facile intuire la sostanziale differenza tra variabile e costante, essendo il nome stesso auto esplicativo. È bene tuttavia spiegarlo visto che ne abbiamo appena parlato. Una variabile è uno spazio riservato ad un dato (numerico, stringa, booleano, etc...) che può (o deve) mutare il suo valore durante l'esecuzione di un codice. Al contrario le costanti sono spazi riservati a dati che non mutano mai il loro valore durante l'esecuzione di un codice: rimangono costanti! Si veda al riguardo Costanti e variabili: qual’è la vera differenza?.

In Actionscript 3.0, come in altri linguaggi, le costanti possono essere impostate solo una volta: direttamente durante la definizione o successivamente nel codice:

PLAIN TEXT
Actionscript:
  1. class Esempio {
  2.     public const COSTANTE_A:int = 0;
  3.     public const COSTANTE_B:int;
  4.     // costruttore
  5.     public function Esempio() {
  6.         COSTANTE_B = 10;
  7.     }
  8. }
  9. var sample:Esempio  = new Esempio ();
  10. trace( sample.COSTANTE_A ); // 0
  11. trace( sample.COSTANTE_B ); // 10

La prossima volta proseguiremo l'analisi del codice e daremo un'occhiata ai "tipi" dato, argomento interessante ed importante con la release 3.0 di Actionscript.

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2008/11/11/actionscript-30-for-beginners-lesson-4/feed/ 3 Very short trick: cicli for più rapidi in Actionscript http://www.undolog.com/2008/10/15/very-short-trick-cicli-for-piu-rapidi-in-actionscript/ http://www.undolog.com/2008/10/15/very-short-trick-cicli-for-piu-rapidi-in-actionscript/#comments Wed, 15 Oct 2008 14:00:51 +0000 Giovambattista Fazioli http://www.undolog.com/?p=733 In Actionscript i cicli for è bene utilizzarli sempre con cura. Ad esempio è bene usare variabili uint quando è possibile:

PLAIN TEXT
Actionscript:
  1. for( var i:uint = 0; i++; i <100) {
  2. // ...
  3. }

È anche possibile usare la - non sempre conosciuta - forma:

PLAIN TEXT
Actionscript:
  1. var i:uint = 0;
  2. // ...
  3. for(;  i++; i <100) {
  4. // ...
  5. }

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2008/10/15/very-short-trick-cicli-for-piu-rapidi-in-actionscript/feed/ 0 Actionscript 3.0: MovieClip over MovieClip http://www.undolog.com/2008/10/14/actionscript-30-movieclip-over-movieclip/ http://www.undolog.com/2008/10/14/actionscript-30-movieclip-over-movieclip/#comments Tue, 14 Oct 2008 10:36:27 +0000 Giovambattista Fazioli http://www.undolog.com/?p=807 Appena uno sviluppatore Flash/Actionscript si appresta a scrivere una funzione simile ad un tooltip, si scontra immediatamente con il problema della propagazione degli eventi tra MovieClip sovrapposti. Infatti se un MovieClip (B) si sovrappone ad un MovieClip (A) che risponde, ad esempio, ad un evento MouseEvent.Mouse_OVER, passando con il mouse sul MovieClip (B) più alto nessun evento verrà più intercettato dal MovieClip (A):

MovieClip over MovieClip

In questo scenario si presenta la necessità di inibire l'intercettazione degli eventi da parte del MovieClip (B). Questo è possibile impostando a false la property mouseEnabled:

PLAIN TEXT
Actionscript:
  1. mcb.mouseEnabled = false;

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2008/10/14/actionscript-30-movieclip-over-movieclip/feed/ 1 Skypemote versione Adobe AIR http://www.undolog.com/2008/09/30/skypemote-versione-adobe-air/ http://www.undolog.com/2008/09/30/skypemote-versione-adobe-air/#comments Tue, 30 Sep 2008 08:59:28 +0000 Giovambattista Fazioli http://www.undolog.com/?p=713 Download Install Skypemote Adobe AIR Version

Questa è la prima release, la 0.8 (allineata con la versione online), di Skype Emotions Editor - Skypemote - in versione Adobe AIR. Per adesso le funzionalità sono le medisime della versione online, con il vantaggio di essere un'applicazione desktop, installabile quindi su Windows, Mac e Linux.
Prima dell'installazione ricordatevi di aggiornare e/o installare per la prima volta le runtime di Adobe AIR, se non l'avete già fatto in precedenza.

Download

Potete scaricare Air Skypemote da Google Code.

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , , , , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2008/09/30/skypemote-versione-adobe-air/feed/ 0 Actionscript 3.0 for beginners: lesson #3 http://www.undolog.com/2008/09/28/actionscript-30-for-beginners-lesson-3/ http://www.undolog.com/2008/09/28/actionscript-30-for-beginners-lesson-3/#comments Sun, 28 Sep 2008 12:52:14 +0000 Giovambattista Fazioli http://www.undolog.com/?p=698 Continuiamo l'analisi dell'esempio del gioco Tic Tac Toe, presentato in Actionscript 3.0 for beginners: lesson #2. Eravamo arrivati alla funzione che crea la griglia di gioco:

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Disegno graficamente la griglia (3x3) a video
  3.  *
  4.  * @param        void
  5.  * @return       void
  6.  * @private
  7.  */
  8. private function createGrid():void {
  9.     // puntatore temporaneo ad uno oggetto MovieClip
  10.     // nota: qui si sarebbe potuto usare anche un oggetto Sprite
  11.     // ma in questo caso mi serve di poter estendere l'oggetto
  12.     // aggiungendo alcune proproetà personali. L'oggetto Sprite
  13.     // è una classe chiusa e quindi non estendibile runtime, mentre
  14.     // la classe MovieClip è una classe dinamica e quindi rende
  15.     // possibile l'aggiunta di proprietà runtime
  16.     var tm:MovieClip, i:uint = 0;
  17.     // aggiungo in uno schema 3x3 i MovieClip
  18.     for(; i <9; i++) {
  19.         tm                    = new MovieClip();
  20.         addChild( tm );
  21.         tm.x                  = OFFSETX+( (i%3)*(PLAYER_WIDTH+PLAYER_OFFSET) )
  22.         tm.y                  = OFFSETY+Math.floor(i/3)*(PLAYER_HEIGHT+PLAYER_OFFSET)
  23.         tm._index             = i;
  24.         drawPlayer( tm, 0 );
  25.     }
  26.     // disegno le 2 linee veriticali e le 2 orizzontali
  27.     with( this.graphics ) {
  28.         lineStyle(6,0x666666);
  29.         moveTo(OFFSETX,OFFSETY+(PLAYER_HEIGHT+15));
  30.         lineTo(OFFSETX+( (PLAYER_WIDTH+20)*3 ),OFFSETY+(PLAYER_HEIGHT+15));
  31.         moveTo(OFFSETX,OFFSETY+(PLAYER_HEIGHT+20)*2);
  32.         lineTo(OFFSETX+( (PLAYER_WIDTH+20)*3 ),OFFSETY+(PLAYER_HEIGHT+20)*2);
  33.         moveTo(OFFSETX+(PLAYER_WIDTH+15),OFFSETY);
  34.         lineTo(OFFSETX+(PLAYER_WIDTH+15),OFFSETY+( (PLAYER_HEIGHT+20)*3 ));
  35.         moveTo(OFFSETX+(PLAYER_WIDTH+20)*2,OFFSETY);
  36.         lineTo(OFFSETX+(PLAYER_WIDTH+20)*2,OFFSETY+( (PLAYER_HEIGHT+20)*3 ));
  37.     }
  38. }

Questo meotdo svolge due compiti: aggiunge un MovieClip usato per intercettare il click del mouse (la casella "cerchio" o "croce") e disegna le due righe verticali e le due orizzontali rappresentati della graglia (se classiche stanghezza che si fanno con la matita). Come indicato nel commento del metodo, è stato scelto l'oggetto MovieClip, invece del più semplice Sprite, perchè quest'ultimo non permette l'aggiunta di proprietà o metodi in fase di runtime.
Dopo la creazione del MovieClip viene chiamata una speciale funzione drawPlayer() che ha il compito di disegnare sul MovieClip vuoto appena creato uno dei giocatori (la casella "cerchio" o "croce"), in base al secondo parametro passato nel Inputs.

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Disegna un cerchio o una croce in base al giocatore
  3.  *
  4.  * @param    (movieclip)        p=MovieClip dove disegnare
  5.  * @param    (uint)            pl=numero del giocatore: 1 o 2 - se 0 disegna un rettangolo per intercettare l'evento click
  6.  */
  7. private function drawPlayer(p:MovieClip, pl:uint):void {
  8.     switch(pl) {
  9.         // questo è un caso particolare: viene disegnato un rettangolo
  10.         // usato per rilevare il click del mouse
  11.         case 0:
  12.             with(p.graphics) {
  13.                 clear();
  14.                 beginFill(CELL_EVENT_COLOR, CELL_EVENT_ALPHA);
  15.                 drawRect(0,0,60,60);
  16.                 endFill();
  17.             }
  18.             p.useHandCursor = p.buttonMode = true;
  19.             // aggiungo l'evento click da questa casella
  20.             p.addEventListener( MouseEvent.CLICK, onCellClick );
  21.             break;
  22.         // player 1 (o)
  23.         case 1:
  24.             with(p.graphics) {
  25.                 clear();
  26.                 lineStyle(PLAYER_LINE_WIDTH, PLAYER_1_COLOR);
  27.                 drawCircle(30,30,30);
  28.             }
  29.             p.useHandCursor = p.buttonMode = false;
  30.             // rimuovo l'evento click da questa casella
  31.             p.removeEventListener(MouseEvent.CLICK, onCellClick);
  32.             break;
  33.         // player 2 (x)    
  34.         case 2:
  35.             with(p.graphics) {
  36.                 clear();
  37.                 lineStyle(PLAYER_LINE_WIDTH, PLAYER_2_COLOR);
  38.                 moveTo(0,0);
  39.                 lineTo(60,60);
  40.                 moveTo(60,0);
  41.                 lineTo(0,60);
  42.             }
  43.             p.useHandCursor = p.buttonMode = false;
  44.             // rimuovo l'evento click da questa casella
  45.             p.removeEventListener(MouseEvent.CLICK, onCellClick);
  46.             break;
  47.     }
  48. }

Il case 0 corrisponde alla casella vuota. Questa circostanza si verifica all'inizializzazione del gioco: si veda infatti la chiamata a drawPlayer() nel metodo createGrid():

PLAIN TEXT
Actionscript:
  1. drawPlayer( tm, 0 );

In questa circostanza la casella è pronta a rispondere agli input utente. Viene infatti aggiunto un listener per intercettare l'evento click del mouse. Notare che quando viene disegnato uno dei due giocatori (caso 1 e 2, giocatore "cerchio" e "croce"), il listener viene semplicemente rimosso, così da evitare una "doppia giocata"!

Eventi

Come abbiamo visto sopra, la casella "vuota" risponde all'evento click del mouse:

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Questo evento viene rilasciato quando si fa click su una cella di gioco
  3.  */
  4. private function onCellClick(e:MouseEvent = null):void {
  5.     // controllo che il gioco non sia in pausa o bloccato
  6.     if( !__stop ) {
  7.         // incremento il contatore dei click
  8.         __clickNumber++;
  9.         // prelevo il puntatore al player "cliccato"
  10.         var p:MovieClip = e.currentTarget as MovieClip;
  11.         // disegno (o) o (x)
  12.         drawPlayer( p, __player );
  13.         // riflette la giocata nell'array lineare
  14.         __cell[p._index] = (__player==1)?PLAYER_1_WIN:PLAYER_2_WIN;
  15.         // controllo se qualcuno ha vinto
  16.         checkCell();
  17.         // cambio turno: se ha giocato il player 1 imposto il player 2 e viceversa
  18.         __player = (__player==1)?2:1;
  19.         // segnalo a video il nuovo turno del giocatore
  20.         turno_txt.text = "PLAYER "+__player;
  21.     }
  22. }

Il flag __stop, che corrisponde ad una variabile globale all'interno della nostra classe, è una tecnica standard che consente di controllare lo stato del gioco. Nel nostro caso l'ho usata per distinguere la modalità "gioco" __stop = false, e la modalità "in pausa" __stop = true. Quando scatta l'evento onCellClick(), al click del mouse sulla casella, controllo appunto che il gioco non sia "in pausa". Se stiamo giocando incremento la variabile __clickNumber che tiene conto del numero di click (o di giocate) effettuate. Questo "contatore" ci tornerà utile più avanti per capire se tutte le caselle sono state selezionate.
Tramite la proprietà e.currentTarget recupero il puntatore alla casella su cui si è effettuato il click e su questa disegno uno dei due possibili segni ("cerchio" o "croce") in base al giocatore attivo indicato in __player; utilizzando sempre il meotdo drawPlayer(). La riga:

PLAIN TEXT
Actionscript:
  1. __cell[p._index] = (__player==1)?PLAYER_1_WIN:PLAYER_2_WIN;

è importante in quanto riflette la giocata nell'array logico lineare usato - come vedremo più avanti - per determinare la vincita di uno dei due giocatori. Le costanti PLAYER_1_WIN (valore 1) e PLAYER_2_WIN (valore 10) indicano nell'array lineare chi ha effettuato la giocata.

Vedi per ulteriori informazioni: Undolibrary MatrixArray: un’estensione della classe Array

checkCell(): the core

Deichiamo un paragrafo a questo metodo essendo, nel contesto di questo esempio, il vero cuore del gioco. Il metodo checkCell(), infatti, controlla se c'è stata una vincita da parte di uno dei due giocatori:

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Questa funzione controlla l'array per verificare se qualche
  3.  * giocatore ha vinto. Viene chiamata ogni volta che un giocatore
  4.  * segna una casella con una (x) o un (o).
  5.  * Inoltre se la variabile __clickNumber è uguale a 9, significa
  6.  * che tutte le caselle sono stati riempite e, non essendoci nessun
  7.  * vincitore, nessuno ha vinto!
  8.  *
  9.  * @private
  10.  */
  11. private function checkCell():void {
  12.     // in base al valore di __player viene impostato il
  13.     // valore di controllo per verificare una vincita
  14.     var winValue:uint     = (__player==1)?3*PLAYER_1_WIN:3*PLAYER_2_WIN;
  15.     // controlla tutte le righe, colonne e le due diagonali
  16.     var c:Array = __cell;
  17.     // controllo le prime 3 righe
  18.     if( c[0] + c[1] + c[2] == winValue ||
  19.         c[3] + c[4] + c[5] == winValue ||
  20.         c[6] + c[7] + c[8] == winValue ||
  21.         // le 3 colonne
  22.         c[0] + c[3] + c[6] == winValue ||
  23.         c[1] + c[4] + c[7] == winValue ||
  24.         c[2] + c[5] + c[8] == winValue ||
  25.         // le 2 diagonali
  26.         c[0] + c[4] + c[8] == winValue ||
  27.         c[2] + c[4] + c[6] == winValue ) {
  28.         // se una di queste condizioni è verificata
  29.         // qualcuno ha vinto e mostro quindi il pannello
  30.         // di "vittoria" (1)
  31.         showPanel(1);
  32.     } else {
  33.         // se nessuno ha vinto, controllo se tutte le caselle
  34.         // sono piene. In caso affermativo mostro il pannello
  35.         // di fine partita e "nessun vincitore" (0)
  36.         if( __clickNumber == 9 ) {
  37.             showPanel(0);
  38.         }
  39.     }
  40. }

Il metodo, nella sua semplicità, si commenta da solo. Esso viene richiamato ad ogni click sulla scacchiera decidendo le sorti del gioco! L'array logico viene utilizzato per "sommare" righe, colonne e diagonali alla ricerca di un possibile "tris" da parte del giocatore attuale, indicato dalla variabile __player. Inoltre, come può accadere, __clickNumber tiene conto dei click effettuati. Questa variabile non dovrebbe mai raggiungere il valore 9, a meno che nessuno dei due giocatori ha vinto.

La prossima volta esamineremo alcune caratteristiche specifiche del linguaggio Actionscript 3.0 usate in questa demo.

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2008/09/28/actionscript-30-for-beginners-lesson-3/feed/ 0 Undolibrary MatrixArray: un’estensione della classe Array http://www.undolog.com/2008/09/15/undolibrary-matrixarray-unestensione-della-classe-array/ http://www.undolog.com/2008/09/15/undolibrary-matrixarray-unestensione-della-classe-array/#comments Mon, 15 Sep 2008 13:35:34 +0000 Giovambattista Fazioli http://www.undolog.com/?p=658 MatrixArray è un'estensione della classe Array di Actionscript 3.0, con lo scopo di semplificare la manipolazione di Array lineari usati come matrice n x m. Questa classe fa parte della libreria Undolibrary (nel package undolibrary.utils.MatrixArray) che potete scaricaricare liberamente da Google code tramite un qualsiasi client SVN (Subversion) all'indirizzo:
svn checkout http://undolibrary.googlecode.com/svn/trunk/
In alternativa potete scaricare il solo file MatrixArray.as. Un'esempio dell'uso di matrici lineari è stato dato in Actionscript 3.0 for beginners: lesson #2 dove abbiamo visto un suo semplice uso nella realizzazione del classico game Tic Tac Toe. Una matrice di questo tipo è paragonabile ad un'area rettangolare (wxh), proprio come una scacchiera. Con questa classe è possibile trattare una matrice di questo tipo proprio come un reticolo con delle sue coordinate x ed y. La MatrixArray l'ho usata, ad esempio, nello sviluppo di tutta la logica dell'editor di Emotions Icons per Skype: Skypemote.

Metodi

La classe MatrixArray estende quindi la normale classe Array aggiungendo una serie di utili metodi per gestire e manipolare matrici n x m. Per creare una matrice n x m è sufficente usare:

PLAIN TEXT
Actionscript:
  1. // importanzione della classe - se avete scaricato l'intera libreria Undolibrary
  2. // in alternativa potete scaricare solo il file MatrixArray.as e usarlo da solo
  3. import undolibrary.utils.MatrixArray;
  4. //
  5. var ma:MatrixArray = new MatrixArray(10, 10);

Creata la matrice 10x10, come nel precedente esempio, possiamo manipolarla con utili metodi che rendono il nostro lavoro estremamente più rapido e semplice. In effetti la matrice 10x10 non è altro che un semplice Array lineare di 100 elementi!

clip()

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Restitusice un porzione rettangolare della matrice nella forma MatrixArray
  3.  *
  4.  * @param    (uint)            sx Coordina x del taglio
  5.  * @param    (uint)            sy Coordina y del taglio
  6.  * @param    (uint)            cw Dimensione orizzontale del taglio
  7.  * @param    (uint)            ch Dimensione verticale del taglio
  8.  * @result    (MatrixArray)    Una nuova matrice cw x ch
  9.  *
  10.  */
  11. clip(sx:uint, sy:uint, cw:uint, ch:uint):MatrixArray
  12.  
  13. // esempio
  14. // crea una nuova MatrixArray dalle coordinate 2,2 e larga e alta 5
  15. var nma:MatrixArray = ma.clip(2, 2, 5, 5);

fill()

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Riempie la matrice con un determinato valore
  3.  *
  4.  * @param    (any)    Valore da inserire nella matrice
  5.  */
  6. fill(v:*);

paintChar()

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Riempie la matrice con un (solo) carattere prelevato da una stringa
  3.  * di lunghezza pari alle dimensioni della matrice stessa
  4.  *
  5.  * @param    (string)    v Stringa con la serie di caratteri da mappare
  6.  * @result    (boolean)    true ok, false errore: stringa di lunghezza errata
  7.  *
  8.  */
  9. paintChar(v:string)
  10.  
  11. // esempio
  12.  
  13. var ma:MatrixArray = new MatrixArray(10,5);
  14. ma.paintChar(
  15.     '**********'+
  16.     '**##**##**'+
  17.     '**********'+
  18.     '**#####**'+
  19.     '**********'
  20. );

flipH(), flipV()

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Esegue un'operazione di riflessione orizziontale(flipH) o
  3.  * vertical (flipV) direttamente sulla matrice
  4.  */
  5. flipH():void
  6. flipV():void

move()

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Sposta il contenuto della matrice (eseguendo uno shift) nelle quattro
  3.  * direzione di un offeset prestabilito
  4.  */
  5. move(ox:int, oy:int):void
  6. //
  7.  
  8. var ma:MatrixArray = new MatrixArray(10,5);
  9. ma.paintChar(
  10.     '**********'+
  11.     '**##**##**'+
  12.     '**********'+
  13.     '**#####**'+
  14.     '**********'
  15. );
  16. ma.move(2,4);
  17.  
  18. // output
  19. ****##**##
  20. **********
  21. ****#####
  22. **********
  23. **********

peek()

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Restituisce il contenuto della matrice alle coordinate x, y
  3.  */
  4. peek(x:uint, y:uint):*

poke()

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Imposta il contenuto della matrice alle coordinate x, y
  3.  */
  4. poke(x:uint, y:uint):void

getString()

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Usato spesso per il debug restituisce la matrice nxm come stringa
  3.  */
  4. getString():String

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2008/09/15/undolibrary-matrixarray-unestensione-della-classe-array/feed/ 0 ActionScript 3.0: lo sapevate che… http://www.undolog.com/2008/09/10/actionscript-30-lo-sapevate-che/ http://www.undolog.com/2008/09/10/actionscript-30-lo-sapevate-che/#comments Wed, 10 Sep 2008 21:52:41 +0000 Giovambattista Fazioli http://www.undolog.com/?p=642 Alcune curiosità su Actionscript 3.0 non sempre note...

trace()

L'istruzione trace(), usata per il debug, ora supporta più parametri:

PLAIN TEXT
Actionscript:
  1. trace( a, b, c );

eval()

L'istruzione eval() è stata eliminata in Actionscript 3.0. Tuttavia visto che è possibile accedere a proprietà e metodi di un oggetto anche con la sintassi usata per accedere agli elementi di un array, si può in alcune circostanze "simulare" - in qualche modo - l'istruzione eval():

PLAIN TEXT
Actionscript:
  1. var coo:String = (muoviX)?'x':'y';
  2. myMovieClip[coo] = 20;

super()

La chiamata alla superclasse, tramite super(), non è più vincolata alla prima istruzione nel costruttore di una sottoclasse. Ora si può chiamare super() in qualsiasi punto del costruttore:

PLAIN TEXT
Actionscript:
  1. public function MiaClasse() {
  2.    initOne();
  3.    super();
  4.    initTwo();
  5. }

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , ,

Post correlati

]]> http://www.undolog.com/2008/09/10/actionscript-30-lo-sapevate-che/feed/ 0 Actionscript 3.0 for beginners: lesson #2 http://www.undolog.com/2008/09/03/actionscript-30-for-beginners-lesson-2/ http://www.undolog.com/2008/09/03/actionscript-30-for-beginners-lesson-2/#comments Wed, 03 Sep 2008 14:55:53 +0000 Giovambattista Fazioli http://www.undolog.com/?p=502 Come promesso ecco la seconda lezione su ActionScript 3.0! Oggi inizieremo l'analisi di un semplice progetto che riproduce il giochino del Tris o Tic Tac Toe. Ho cercato di inserire in questo esempio alcune caratteristiche particolari di ActionScript 3.0, cercando di dare spazio alla comprensione e non allo stile. Ne segue che se avessi dovuto scrivere il "gioco" davvero, probabilmente l'avrei strutturato in modo assai diverso, ma in questo caso ho cercato di mediare tra una classica programmazione compatta ed ermetica con una maggiormente comprensibile per i neofiti. Ho realizzato un'unica classe documento, procedura non necessaria ma utile per rimanere in linea con la precedente lezione.

Tic Tac Toe

I sorgenti

Oltre al file ActionScript (.as) della classe documento, che inizieremo ad analizzare in dettaglio qui, il progetto è corredato con un classico filmato Flash (.fla) che fornisce l'interfaccia di gioco. Tutti i file necessari per seguire il commento al codice sono disponibili qui.

Schema del gioco

In questa versione del gioco non ho inserito il computer come avversario, attività che potete svolgere voi lettori se ne avete voglia. Il gioco, quindi, alterna due giocatori, esattamente come se stessimo giocando su una lavagna o su un foglio di carta. Lo schema logico che seguiremo è il seguente:

Schema Tic Tac Toe

Visione globale

Prima di iniziare l'analisi vera e propria del codice è bene visualizzare lo schema di una classe generica, composta dal package, class e il suo interno:

Schema Tic Tac Toe

Costruttore Classe Documento

Come abbiamo anticipato la scorsa volta, quando leghiamo ad un documento Flash - un filmato - una classe documento, essendo quest'ultima un vero e proprio oggetto da istanziare, il sistema avvierà il costruttore.

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Costruttore della classe
  3.  */
  4. public function TicTacToe ():void {
  5.     // imposta stage scale mode e stage align
  6.     stage.scaleMode    = StageScaleMode.NO_SCALE
  7.     stage.align            = StageAlign.TOP_LEFT;
  8.     addEventListener(Event.ADDED_TO_STAGE, init);
  9. }

Il costruttore nel nostro caso imposta l'oggetto stage, che rappresenta il contenitore all'interno di un browser e aggiunge la chiamata alla funzione/metodo init() quando la nostra classe documento è aggiunta allo stage, cioè quando sarà visualizzata! Questa è una procedura standard che adotto spesso. In alcuni casi è del tutto inutile, tuttavia se si fa uso di componenti, cioè quegli oggetti visuali presenti nell'interfaccia di Flash (come TextArea, TreeView, etc...), questi non saranno disponibili (come puntatori) fino a quando l'evento ADDED_TO_STAGE non è stato rilasciato! Così, per mettersi al sicuro, è buona norma seguire sempre questa via, in previsione di eventuali nuove release.

Per chi è proprio all'asciutto di programmazione ad oggetti, consiglio quantomeno la lettura di Classi, Oggetti e Istanze!

La funzione, o metodo, init() è stata definita privata (vedi Actionscript 3.0: public, protected, private e internal ) tramite la keyword private:

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Metodo invocato appena il MovieClip è aggiunto allo stage
  3.  *
  4.  * @param        {event}        e=passato da addEventListener(). Può essere null
  5.  * @return         void
  6.  * @private
  7.  */
  8. private function init(e:Event = null):void {
  9.     initCell();
  10. }

Per ora, come si vede, questa funzione non fa altro che chiamarne un'altra, initCell(). Spesso nel metodo init() vengono inserite tutte le funzioni di inizializzazione, evitando di inserire direttamente il codice aperto. Questo può ritornare utile in caso serva re-inizializzare qualche parametro. Essendo questo un esempio di un gioco relativamente semplice, può risultare strano avere questo doppio salto quasi inutile, tuttavia in altri casi il metodo init() può risultare molto più ampio, chiamando una serie di init functions tipo:

PLAIN TEXT
Actionscript:
  1. private function init(e:Event = null):void {
  2.     initBackground();
  3.     initIntro();
  4.     initPlayers();
  5.     initScore();
  6.     initEnemy();
  7.     initSound();
  8.     start();
  9. }

Il metodo init() viene invocato (cioè chiamato) quando il sistema rilascia l'evento ADDED_TO_STAGE. Proprio per questo motivo è stato inserito il parametro e:Event.

Tricks note: può capitare spesso di avere metodi (come init()) che vengono richiamati sia da eventi, sia all'interno del codice. È proprio per questo motivo che il parametro di questo metodo è stato impostato a e:Event = null. In questo modo, infatti, se dovesse mai servire, possiamo richiamare init() senza passare nessun parametro, in quanto non siamo un evento e quindi non potremmo passare il parametro e:Event (a meno di "simularlo" con un notevole spreco di energie). Per dettagli sulla gestione dei parametri in Actionscript 3.0 si veda anche: Argomenti variabili e di default in Javascript, Actionscript e PHP e Argomenti variabili in Actionscript 3.0,

Inizializzazione del gioco

PLAIN TEXT
Actionscript:
  1. /**
  2.  * Inizializza un array lineare che rappresenterà la nostra griglia di gioco.
  3.  * Questa "griglia" viene preimpostata a zero (0), valore che indica che nessun
  4.  * segno (o/x) è stato fatto.
  5.  * Al player 1 (o) verrà associato il valore uno (1). Mentre al player 2 (x) verrà
  6.  * associato il valore dieci (10). Con questo stratagemma quando ad esempio la
  7.  * somma dei valori presenti nella riga 1 è uguale a 3, sapremo che ha vinto il player 1.
  8.  * Se la somma, invece, della colonna 1 è 30, allora ha vinto il player 2... e via così.
  9.  *
  10.  * 0 | 0 | 0
  11.  * --+---+---
  12.  * 0 | 0 | 0
  13.  * --+---+---
  14.  * 0 | 0 | 0
  15.  *
  16.  * @param        void
  17.  * @return         void
  18.  * @private
  19.  */
  20. private function initCell():void {
  21.     // preimposto l'array di gioco a zero
  22.     __cell            = [0,0,0, 0,0,0, 0,0,0];
  23.     // inizia sempre il giocatore (player) numero 1
  24.     __player        = 1;
  25.     // disegno la griglia a video
  26.     createGrid();
  27.     // mostro a video il turno del giocatore (in questo caso 1)
  28.     turno_txt.text     = 'PLAYER '+__player;
  29.     // questa variabile è usata per mettere il gioco in pausa se true
  30.     // start-game
  31.     __stop            = false;
  32. }

Questo metodo initCell() si preoccupa di inizializzare tutte le variabili e creare tutti gli oggetti del gioco.

Tricks note: quasi tutti i programmatori di videogame conoscono perfettamente la tecnica di mappare l'area di gioco in un array ad una o più dimensioni. Questa tecnica, usata nei cosidetti Tile Game, permette di eseguire tutta una serie di controlli in un'area logica svincolata dalla grafica a video. In questo specifico caso io ho usato un semplice array monodimensionale composto da 9 elementi che rappresentano le 9 caselle del gioco. Il fatto che gli elementi dell'array siano sequenziali, rispetto alla griglia 3 x 3, non è un problema come vedremo, ma solo una questione di punti di vista!
Per chi vuole approfondire l'interessante argomento, consiglio la lettura di Tile Based Games

Tutte le variabili ad uso interno, globali a livello di classe, uso indicarle con il doppio underscore davanti. Queste, infatti, durante la prima stesura di una classe potrebbero diventare successivamente proprietà pubbliche, sfruttando l'incapsulamento proprio della programmazione OO (vedi Scrivere buon codice OO in Adobe Flash). __player e __stop indicano rispettivamente il giocatore attivo e lo stato del gioco.

Per adesso mi fermo qui! La prossima volta analizzeremo il metodo createGrid() e il resto del gioco, se avete dubbi o domande su questa parte commentate.

Digg del.icio.us Technorati Facebook Google Bookmarks Twitter BarraPunto Current email FriendFeed laaik.it LinkedIn Live MySpace Netvibes Print RSS Segnalo StumbleUpon Wikio IT

Tags: , , , , , , , , , , , ,

Post correlati

]]> http://www.undolog.com/2008/09/03/actionscript-30-for-beginners-lesson-2/feed/ 4