Undolog.com » Flash http://www.undolog.com Research & Development Blog Thu, 18 Mar 2010 14:23:31 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Commodore 64 Javascript emulator http://www.undolog.com/2010/01/06/commodore-64-javascript-emulator/ http://www.undolog.com/2010/01/06/commodore-64-javascript-emulator/#comments Tue, 05 Jan 2010 23:18:38 +0000 Giovambattista Fazioli http://www.undolog.com/?p=2788 Un po’ di tempo fa avevo segnalato la versione di un emulatore Commodore 64 scritto in Adobe Actionscript 3.0, oggi in una nuova versione:

Commodore 64 Emulator in Adobe Flash

Adesso è possibile apprezzare il porting della versione Adobe Flash in Javascript:
Commodore 64 Emulator in Javascript
Sicuramente più lenta della sua controparte in Flash, questa versione in javascript si avvale di jQuery e, di fatto, ne diventa un’estensione per non dire Plugin :D (assai riduttivo). Buon divertimento…

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/2010/01/06/commodore-64-javascript-emulator/feed/ 0 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 Adobe Flash Professional CS5 per Apple iPhone http://www.undolog.com/2009/10/07/adobe-flash-professiona-cs5-per-apple-iphone/ http://www.undolog.com/2009/10/07/adobe-flash-professiona-cs5-per-apple-iphone/#comments Wed, 07 Oct 2009 08:16:54 +0000 Giovambattista Fazioli http://www.undolog.com/?p=2522 Adobe Flash Professiona 5 per Apple iPhone

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/10/07/adobe-flash-professiona-cs5-per-apple-iphone/feed/ 0 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 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 How I did it: il logo di Saidmade http://www.undolog.com/2009/01/14/how-i-did-it-il-logo-di-saidmade/ http://www.undolog.com/2009/01/14/how-i-did-it-il-logo-di-saidmade/#comments Wed, 14 Jan 2009 09:55:15 +0000 Giovambattista Fazioli http://www.undolog.com/?p=1171 Quando mi è stato chiesto di disegnare ed ideare il logo per Saidmade, come spesso accade per le proprie creature, ero abbastanza agitato. Tuttavia non era possibile affidarsi all'inventiva di altri, bisognava esprimere ciò che stava per nascere in modo autonomo e personale. Alla fine sono molto soddisfatto del risultato finale. Il simbolo che ne è uscito è esattamente ciò che cercavamo!

La caratteristica migliore del logo-grafico di Saidmade è la sua costruzione, basata esclusivamente su un elemento triangolare che oltre ad esprimere semplicità rappresenta tre vertici riconducibili ai i tre soci fondatori.

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/14/how-i-did-it-il-logo-di-saidmade/feed/ 5 Very short trick: proxy RSS con SimplePie http://www.undolog.com/2008/12/22/very-short-trick-proxy-rss-con-simplepie/ http://www.undolog.com/2008/12/22/very-short-trick-proxy-rss-con-simplepie/#comments Mon, 22 Dec 2008 11:50:23 +0000 Giovambattista Fazioli http://www.undolog.com/?p=1085 Se usate Flash o Ajax per leggere Feed RSS da altri domini, dovete necessariamente dotarvi di un proxy (tunneling) a causa delle protezioni imposte da entrambe le tecnologie (vedi Tunneling e proxy server per Ajax e non solo ). Se sul vostro sito o blog è già presente SimplePie, potete scrivere una semplice proxy in questo modo:

PLAIN TEXT
PHP:
  1. require_once "simplepie.inc";
  2.  
  3. $feed = new SimplePie();
  4. $feed->set_feed_url( 'http://www.undolog.com/feed' );
  5. $feed->enable_xml_dump(true);
  6. $feed->init();

A questo file (ad esempio proxy.php) è possibile inviare in GET l'url del feed che volete leggere:

PLAIN TEXT
PHP:
  1. require_once "simplepie.inc";
  2.  
  3. $feed = new SimplePie();
  4. $feed->set_feed_url( $_GET['feedurl'] );
  5. $feed->enable_xml_dump(true);
  6. $feed->init();

Usando nella chiamata proxy.php?feedurl=http://www.cnn.com/feed

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/very-short-trick-proxy-rss-con-simplepie/feed/ 1 SWFObject su Google AJAX Libraries API http://www.undolog.com/2008/11/14/swfobject-su-google-ajax-libraries-api/ http://www.undolog.com/2008/11/14/swfobject-su-google-ajax-libraries-api/#comments Fri, 14 Nov 2008 10:24:02 +0000 Giovambattista Fazioli http://www.undolog.com/?p=955 swfobjectGoogle AJAX Libraries API allarga il suo parco di librerie e framework anche a SWFObject, utilissima per inserire e manipolare filmati Flash sulle nostre pagine Web. SWFObject è anche disponibile come Plugin per Wordpress; nel momento in cui scrivo, tuttavia, il Plugin non è stato ancora aggiornato per caricare il codice dal "repository" Google. A breve, quindi, immagino verrà rilasciata anche una nuova versione del Plugin... a meno che non vogliate intanto modificarlo da soli...

Includere SWFObject da Google AJAX Libraries API

Come per le altre librerie presenti in Google AJAX Libraries API è possibile usare l'URL assoluto o il meotdo google.load():

PLAIN TEXT
HTML:
  1. <!-- URL ASSOLUTO -->
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
  3. <script type="text/javascript">
  4.     swfobject.embedSWF("main.swf", "main", "231", "132", "8.0.0");

PLAIN TEXT
HTML:
  1. <!-- google.load() -->
  2. <script src="http://www.google.com/jsapi"></script>
  4.     google.load("swfobject", "2.1");
  5.     google.setOnLoadCallback(function() {
  6.         swfobject.embedSWF("main.swf", "main", "231", "132", "8.0.0");
  7.     });

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/14/swfobject-su-google-ajax-libraries-api/feed/ 2 Adobe Creative Suite 4: Roma 21 ottobre 2008 http://www.undolog.com/2008/10/03/adobe-creative-suite-4-roma-21-ottobre-2008/ http://www.undolog.com/2008/10/03/adobe-creative-suite-4-roma-21-ottobre-2008/#comments Fri, 03 Oct 2008 06:00:16 +0000 Giovambattista Fazioli http://www.undolog.com/?p=740 Adobe Creative Suite 4: Roma 21 ottobre 2008

Adobe è lieta di invitarti agli eventi di lancio della nuova Adobe Creative Suite 4. Ti aspettiamo a Roma il 21 Ottobre e a Milano il 30 Ottobre. Per tutti i dettagli dell'incontro vai al minisito dedicato agli eventi CS4! In omaggio per tutti i partecipanti la t-shirt CS4!

Io cercherò di esserci... soprattutto per la maglietta :)

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/03/adobe-creative-suite-4-roma-21-ottobre-2008/feed/ 2 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 Considerazioni sull’evoluzione dei linguaggi di svilluppo: AS2 vs AS3 http://www.undolog.com/2008/08/05/considerazioni-sullevoluzione-dei-linguaggi-di-svilluppo-as2-vs-as3/ http://www.undolog.com/2008/08/05/considerazioni-sullevoluzione-dei-linguaggi-di-svilluppo-as2-vs-as3/#comments Tue, 05 Aug 2008 13:54:38 +0000 Giovambattista Fazioli http://www.undolog.com/?p=500 Leggendo l'articolo di Julius ActionScript 2 o ActionScript 3? Facciamo chiarezza! vorrei fare alcune considerazioni sull'evoluzione "inversa" di alcuni strumenti di sviluppo per chi, come me, viene dalla programmazione C/C++.

Una caratteristica comune - negli ultimi anni - di alcuni ambienti di sviluppo è quella di raffinare la sinstassi del proprio linguaggio con il tempo. Si parte da un linguaggio ad alto livello, come il Lingo di Macromedia Director, Actionscript 1.0 delle prime versioni di Flash o Microsoft Visual Basic 3 per arrivare ad allinearsi con il tempo alle specifiche e alle - ormai consolidate - sintassi dettate dallo standard ECMA. Anche se paragonare un Microsoft Visual Basic 3 con Javascript o Actionscript non è del tutto corretto, entrambe le situazioni denotano una chiara evoluzione "inversa" rispetto agli albori della codifica di programmazione.
Unica eccezione, forse, in questo scenario, sono soluzioni come Java o PHP, entrambi con radici fortemente orientate al C/C++.

Concentrandoci su Actionscript, è chiara la volontà della casa prodruttrice (ora Adobe) ad allineare il linguaggio di Flash allo standard ECMA. Usare ancora Actionscript 2.0 non porta nessun concreto vataggio allo sviluppatore, soprattutto a chi non possiede le conoscenze di base proprie del C/C++. Aggiungere patch a vecchi progetti, senza doverli "portare" (riscrivere) in base alle ultimi release, ha un senso in un'ottica di economia. Tuttavia sarebbe utile imparare subito, quando si presenta l'occasione, le "nuove" sintassi proposte dagli aggiornamenti degli ambienti di sviluppo. Più si attende e peggio sarà!

Apprendere Actionscript 3.0, per chi viene dal C/C++, è più come "disapprendere" (o disimparare), le vecchie "clausule", forzate e non standard, presenti nelle precendenti versioni. Stessa cosa accadrà con l'uscita di Flash CS4; evitare, quindi, di rimanere indietro.

Inoltre, lo standard, rende la portabilità del codice estremamente più fattibile e concreta. La similitudine tra PHP, Javascript e Actionscript 3.0, evita di dover rivedere pesantamente codici e algoritmi scritti in uno solo di questi linguaggi.

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/08/05/considerazioni-sullevoluzione-dei-linguaggi-di-svilluppo-as2-vs-as3/feed/ 4 Shadowbox 2.0: la release candidate 1 http://www.undolog.com/2008/07/08/shadowbox-20-la-release-candidate-1/ http://www.undolog.com/2008/07/08/shadowbox-20-la-release-candidate-1/#comments Tue, 08 Jul 2008 12:25:14 +0000 Giovambattista Fazioli http://www.undolog.com/?p=457 shadowbox È stata rilasciata la release candidate 1 (rc1) della versione 2.0 della libreria Javascript Shadowbox, di Michael J. I. Jackson, utilissima per aprire finestre dedicate alla visualizzazioni di vari tipi di media, da Flash a QuickTime a pagine HTML. In questa nuova versione troviamo:

  • Il sito è più ricco di informazioni e include ora un wizard (sullo stile di mootools) per creare "al volo" un pacchetto della libreria personalizzato alle nostre esigenze
  • Possibilità di usare un modulo standalone base, senza includere necessariamente - gli adattatori per le - librerie esterne come prototype.js, jQuery, etc...
  • Miglioramenti alla gestione e realizzazione delle Skin
  • Localizzazione

La libreria è disponibile anche su SVN all'indirizzo:

http://michaeljackson.googlecode.com/svn/trunk/shadowbox

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/07/08/shadowbox-20-la-release-candidate-1/feed/ 1 Tecniche di Text Replacement in Flash http://www.undolog.com/2008/06/25/tecniche-di-text-replacement-in-flash/ http://www.undolog.com/2008/06/25/tecniche-di-text-replacement-in-flash/#comments Wed, 25 Jun 2008 08:38:18 +0000 Giovambattista Fazioli http://www.undolog.com/?p=438 La tecnica di Text Replacement che presento oggi è, per certi aspetti, davvero interessante. A differenza della classica sostituizione per immagine tramite CSS, questa tecnica usa un filmato Flash per sovrascrivere i titoli del nostro sito. Nonostante sia un pochino più articolata, in quanto richiede la creazione di un filmato Flash e l'uso di Javascript, permette di ottenere una serie di vantaggi non indifferenti:

  • Mantiene l'accessibilità del sito sfruttando un True-Unobtrusive-Javascript in modo che crawler e spider continuino a vedere la pagina come semplice e corretto HTML
  • Non richiede la creazione di n immagini per n titoli. Basta un solo filmato per sostituire tutti i titoli del nostro sito, con un notevole risparmio in termini di Download
  • Permette di creare anche titoli semplici ma con Font normalmente non utilizzati sul Web
  • Il testo può essere reso in HTML, grazie alle caratteristiche di Flash
  • Il testo è selezionabile
  • Essendo un filmato Flash si può inserire interattività e animazioni di qualsiasi sorta

Noterete, anche, che in questa procedura i CSS non sono praticamente presi in considerazione!

Gli strumenti che useremo

Prima di procedere vediamo di cosa abbiamo bisogno per utilizzare questa tecnica.

  • Adobe Flash per la creazione del filmato che prenderà il posto del nostro titolo
  • La libreria SWFObject per l'inserimento - dinamico - del filmato (Unobtrusive)
  • La libreria prototype.js per automatizzare il tutto; io userò negli esempi il nuovo loader di Google AJAX Library API ma se volete potete includere prototype.js per conto vostro separatamente

A parte Flash, gli altri strumenti sono sostituibili da funzioni personali o altre soluzioni.

Il filmato Flash

Immaginiamo di voler realizzare un titolo con un Font particolare, cosa che rende i CSS inutili in quanto il problema è che tale Font potrebbe non essere installato sulla macchina dell'end-user e quindi non visualizzato dall'utente finale:

Apriamo Flash e creiamo un filmato con una dimensione simile a quella del titolo che vogliamo sostituire. Come vedremo non è importante la dimensione che imposteremo in design-time, questa potrà essere modificata successivamente senza alterare la resa del testo. Inseriamo un oggetto Testo:

Cliccate su "Incorpora" e selezionate:

Nel primo fotogramma inseriamo questo semplice e disarmante codice:

PLAIN TEXT
Actionscript:
  1. // funziona a qualsiasi dimensione
  2. stage.scaleMode  = StageScaleMode.NO_SCALE;
  3. stage.align = StageAlign.TOP_LEFT;
  4. // preleva il parametro content passato da Javascript
  5. label.htmlText = (this.loaderInfo.parameters.content == null)?'Errore':this.loaderInfo.parameters.content;

Compiliamo pure il nostro filmato (textreplacement.swf) e passiamo quindi dalla marcatura HTML, usandone una già vista, così da massimizzare la compatibilià:

PLAIN TEXT
HTML:
  1. <h1 id="titolo_uno"><span>Titolo uno</span></h1>

Nella sezione head del codice inseriamo:

PLAIN TEXT
HTML:
  1. <script type="text/javascript" src="swfobject.js"></script>
  2. <script type="text/javascript">
  3.      swfobject.embedSWF("textreplacement.swf", "titolo_uno", "544", "50", "9.0.0", null, {content: 'Titolo uno'});

Il TAG h1 viene sostituito dal nostro filmato textreplacement.swf, con il parametro content che contiene la stringa del titolo. In una situazione più articolata, quindi con più titoli, questa soluzione diventa sconveniente, nonostante sia sempre più "avvincente" della mera sostituzione tramite i CSS: clicca qui per esempio (notare che il testo è selezionabile).

Il titolo due ha un contenuto HTML ed è reso dal motore Flash; scritta in rosso:

PLAIN TEXT
JavaScript:
  1. swfobject.embedSWF("textreplacement.swf", "titolo_due", "544", "50", "9.0.0", null, {content: 'Titolo <font color="#ff0000">due</font>'});

Per ogni titolo presente nella pagina, infatti, bisogna inserire una riga Javascript che indichi a SWFObject l'id e il contenuto del titolo da trattare. Utilizzando prototype.js ed inserendo una classe per intercettare i titoli da sostituire, possiamo scrivere una semplice funzione in grado di sostituire tutti i titoli nella pagina con il contenuto Flash, prelevando il parametro content direttamente dall'HTML: clicca qui per esempio.

PLAIN TEXT
HTML:
  1. <h1 id="titolo_uno" class="text-replacement"><span>Titolo uno</span></h1>
  2. <h1 id="titolo_due" class="text-replacement"><span>Titolo due</span></h1>
  3. <h1 id="titolo_tre" class="text-replacement"><span>Sono il Titolo Tre un po' più complicato</span></h1>

PLAIN TEXT
JavaScript:
  1. google.setOnLoadCallback(
  2.     function() {
  3.         $$('h1.text-replacement').each(
  4.             function(element) {
  5.                 swfobject.embedSWF("textreplacement.swf", element.id, "544", "50", "9.0.0", null, {content: element.innerHTML});   
  6.             }
  7.         );
  8.     }
  9. );

In questo caso ho usato google.setOnLoadCallback() in quanto uso Google AJAX Library API per caricare prototype.js. Vengono quindi intercettati tutti i TAG h1 con classe impostata a text-replacement. A quel punto viene chiamato SWFObject per inserire sull'elemento trovato (element.id) il nostro filmato Flash. Notare che viene usato element.innerHTML per prelevare il contenuto testuale da passare al filmato Flash. Così facendo si passa in realtà il TAG span ma questo non è un probelma avendo impostato in campo testo nel filmato Flash come HTML.

Flash, poi, permette tutta una serie di effetti (runtime) che rendono questa tecnica davvero "simpatica": clicca qui per esempio.

Quello che ho presentato è ovviamente un semplice esempio! Tuttavia il codice Javascript e le taggature HTML possono essere migliorate e rendere questa tecnica davvero spettacolare. Si possono inserire titoli in animazione o sfondi grafici, oltre ad usare semplicemente Font non utilizzabili tramite CSS. Con le opportune modifiche si possono passare ulteriori parametri al nostro filmato Flash, rendendolo ancora più dinamico: dimensione del Font, posizione del testo, azioni da eseguire al click, etc... È inoltre possibile creare un set di filmati per le diverse tipologie di titoli da sostituire, garantendo comunque un notevole risparmio in termini di download-time!

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/06/25/tecniche-di-text-replacement-in-flash/feed/ 4 Flash e Papervision3D in Javascript http://www.undolog.com/2008/06/11/flash-e-papervision3d-in-javascript/ http://www.undolog.com/2008/06/11/flash-e-papervision3d-in-javascript/#comments Tue, 10 Jun 2008 22:25:54 +0000 Giovambattista Fazioli http://www.undolog.com/?p=429 Edward Smith ha sviluppato un wrapper in grado di sfruttare le API Flash e Papervision3D in Javascript! La libreria, AS3Wrapper, è compatibile con FireFox e con IE. Con Safari per Windows funziona mentre ho riscontrato problemi con Opera 9, sempre per Windows. Il meccanismo che sta alla base di questo progetto, e che rende possibile questa “magia”, è quello di includere nella nostra pagina HTML un contenitore Flash (AS3Wrapper.swf) che accetta comandi Javascript (AS3Wrapper.js), permettendo in pratica di costruire oggetti Flash direttamente da Javascript.

Il sistema, infatti, sfrutta la capacità di Javascript di comunicare con un filmati Flash presente nella pagina.
Il vantaggio, nell’uso di questa tecnica, potrebbe risiedere nella possibilità di creare dinamicamente del codice Javscript e quindi avere oggetti Flash anch’essi dinamici o, se preferite, generare contenuto Flash dinamicamente da Javascript. Sul sito Web dell’autore è possibile accedere alla documentazione di AS3Wrapper insieme ad una serie di demo online, come quello di un cubo Papervision3D.

Per avere un'idea di quanto sia semplice scrivere codice Actionscript in Javascript, ecco un esempio:

PLAIN TEXT
Actionscript:
  1. import flash.display.*;
  2. import flash.net.*;
  3. ... {
  4.         var image:Loader = new Loader();
  5.         image.load(new URLRequest(url));
  6.         addChild(image);
  7. }

In Javascrip avremo:

PLAIN TEXT
JavaScript:
  1. with(playerInstance)
  2. with(flash.display)
  3. with(flash.net){  
  4.     var image = new Loader();
  5.     image.load(new URLRequest(url));
  6.     addChild(image);
  7. }

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/06/11/flash-e-papervision3d-in-javascript/feed/ 0 Very short snippet: cutString() http://www.undolog.com/2008/06/04/very-short-snippet-cutstring/ http://www.undolog.com/2008/06/04/very-short-snippet-cutstring/#comments Wed, 04 Jun 2008 16:30:59 +0000 Giovambattista Fazioli http://www.undolog.com/?p=419 Utile e rapido! Con i valori Number di Actionscript, ad esempio, è un essenziale aiuto per il "print" a video.

PLAIN TEXT
Actionscript:
  1. /*
  2. ** @name        : cutString()
  3. ** @description : cut a string for n chars
  4. */
  5. protected function cutString(s:String, v:uint = 4):String {
  6.     return ( (s.length> v)?s.substr(0,v):s );
  7. }

Spesso lo uso anche in versione sub() o _s()

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/06/04/very-short-snippet-cutstring/feed/ 0 Flash CS3: creare un effetto Reflex su qualsiasi MovieClip http://www.undolog.com/2008/06/04/flash-cs3-creare-un-effetto-reflex-su-qualsiasi-movieclip/ http://www.undolog.com/2008/06/04/flash-cs3-creare-un-effetto-reflex-su-qualsiasi-movieclip/#comments Wed, 04 Jun 2008 01:00:58 +0000 Giovambattista Fazioli http://www.undolog.com/?p=421 Sfruttando una notevole caratteristica di Actionscript 3.0 (vedi Actionscript 3.0: tutto con l'operatore new) ho creato una classe ReflexMe in grado di generare un effetto "riflessione" su un qualsiasi MovieClip presente in libreria.

Il sorgente fa parte del pacchetto undolibrary - presente su GoogleCode - ma se volete potete scaricare il singolo file ReflexMe.as.


Utilizzo

Scaricate il file ReflexMe.as e posizionatelo nella cartella del vostro filmato .fla. Selezionate nella libreria il MovieClip a cui volete applicare l'effetto reflex e aprite la finestra delle proprietà simbolo. Nella sezione Concatenamento inserite ReflexMe nel campo Classe base:

Proprietà MovieClip

A questo punto, provando il filmato, il MovieClip selezionato avrà l'effetto reflex. Se al MovieClip date un nome di istanza potrente anche regolare alcuni parametri come:

  • reflexOffset - distanza del riflesso
  • gradientOffset - l'estenzione del gradiente riflesso
  • alphaOffset - il canale alpha del riflesso
  • gradientRadial - tipo di riflesso: radiale o lineare

Note

La classe ReflexMe.as è scritta come classe base per estendere un qualsiasi MovieClip. La sua semplicità è tale e disarmante che potete riaddatarla anche come codice "spurio" da utilizzare da codice, invece che dall'IDE Flash. Tutto l'effetto è generato dalle poche (tolti i commenti) righe di codice che seguono:

PLAIN TEXT
Actionscript:
  1. // preservo le dimesioni orginali del MovieClip
  2. __oWidth                  = this.width;
  3. __oHeight                 = this.height;
  4. // creo una BitmapData delle dimesioni del
  5. // MovieClip a cui voglio applicare l'effetto reflex
  6. __bmpd                    = new BitmapData( this.width, this.height, true, 0x000000);
  7. // copio il MovieClip sulla BitmapData
  8. __bmpd.draw( this );
  9. // creo un oggetto Bitmap per la visualizzazione
  10. // questo sarà il nostro effetto reflex
  11. __bmp                     = new Bitmap( __bmpd );
  12. // lo visualizzo
  13. addChild( __bmp );
  14. // lo ruoto di 180 gradi: lo inverto
  15. __bmp.scaleY              = -1;
  16. // lo posiziono alla base del MovieClip oroginale
  17. // il x 2 sull'altezza è necessario a casua della
  18. // rotazione che ha spostato l'origine degli assi
  19. __bmp.y                   = __oHeight*2 + __reflexOffset;
  20. // cache come bitmap: necessario per mascherare dopo
  21. // con effetto gradiente e alpha channel
  22. __bmp.cacheAsBitmap       = true;
  23. // creo una maschera
  24. __mask                    = new Shape();
  25. // cache come bitmap: necessario per mascherare dopo
  26. // con effetto gradiente e alpha channel
  27. __mask.cacheAsBitmap      = true;
  28. // posiziono anch'essa sopra l'immagine riflessa
  29. __mask.y                  = __oHeight + __reflexOffset;
  30. // creo una matrice per il gradiente
  31. __matrix                  = new Matrix();
  32. // creo il gradiente delle stesse dimensione del
  33. // MovieClip originale
  34. __matrix.createGradientBox(__oWidth, __oHeight, Math.PI/2);
  35. with( __mask.graphics ) {
  36.     clear();
  37.     beginGradientFill( GradientType.LINEAR, [0x000000,0x000000], [__alphaOffset, 0], [0, __gradientOffset], __matrix);
  38.     drawRect(0, 0, __oWidth, __oHeight);
  39.     endFill();
  40. }
  41. addChild( __mask );
  42. // imposto maschera
  43. __bmp.mask                = __mask;

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/06/04/flash-cs3-creare-un-effetto-reflex-su-qualsiasi-movieclip/feed/ 12 Effetti sulle Bitmap con perlinNoise() http://www.undolog.com/2008/06/02/effetti-sulle-bitmap-con-perlinnoise/ http://www.undolog.com/2008/06/02/effetti-sulle-bitmap-con-perlinnoise/#comments Mon, 02 Jun 2008 20:45:38 +0000 Giovambattista Fazioli http://www.undolog.com/?p=416 La classe BitmapData permette di applicare in modo semplice effetti utilissimi per svariati scopi. Avevamo già visto come creare un effetto "nebbia tv" con poche righe di codice (Flash CS3: creare effetto nebbia TV in 1 secondo). Ora ci occuperemo di un altro effetto "spettacolare" che, come vedremo in seguito, permette di realizzare degli interessantissimi effetti grafici, come nell'esempio mostrato qui sotto: variate i parametri per osservare i differenti effetti, cliccando con il mouse sull'immagine generata questa può essere spostata.

Per l'occasione ho anche aggiunto un nuovo semplice componente (Check) in Undolibrary! Quindi aggiornate il vostro repository SVN. Il sorgente è disponibile qui: MapEffect.zip

L'effetto mostrato nel filmato di sopra viene interamente realizzato sfruttando il metodo perlinNoise() messo a disposizione dall'oggetto BitmapData. Come indicato nel manuale:

L'algoritmo di generazione del disturbo Perlin interpola e combina singole funzioni di disturbo casuale (definite ottave) in un'unica funzione che genera un disturbo casuale dall'aspetto più naturale.

E ancora:

Le funzioni di disturbo Perlin possono essere utilizzate per simulare fenomeni naturali e paesaggi, come la trama del legno, le nuvole e le catene montuose.

Potete utilizzare il filmato dimostrativo per vedere come cambia l'immagine generata in base ai suoi parametri principali. Nel filmato non ho permesso la modifica del parametro randomSeed, un numero utilizzato per la generazione del pattern randomico (questo per permettere uno scroll continuo dell'immagine - cliccate con il mouse sull'immagine e trascinatela).

Sorgente

La classe documento MapEffect contiene tutto il codice della dimostrazione, tuttavia il cuore dell'applicazione è racchiuso nel metodo doPerlinNoise():

PLAIN TEXT
Actionscript:
  1. /*
  2. ** @name            : doPerlinNoise()
  3. */
  4. protected function doPerlinNoise():void {
  5.     var p:Point     = new Point(__translateX, __translateY);
  6.     __bmpd.perlinNoise(__mapWidth, __mapHeight, __octave, __seed, __transuni, __fractal, BitmapDataChannel.GREEN, true, [p,p,p]);
  7. }

__bmpd è un puntatore ad un oggetto BitmapData, che viene poi visualizzato tramite l'oggetto "grafico" Bitmap (__bmp). Tutti i parametri della chiamata a perlinNoise() sono parametrici, tranne - come accennato prima - __seed (questo può essere un valore a piacere).

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/06/02/effetti-sulle-bitmap-con-perlinnoise/feed/ 0 L’operazione aritmetica modulo http://www.undolog.com/2008/05/31/loperazione-aritmetica-modulo/ http://www.undolog.com/2008/05/31/loperazione-aritmetica-modulo/#comments Sat, 31 May 2008 06:00:13 +0000 Giovambattista Fazioli http://www.undolog.com/?p=415 Il "modulo" è una delle operazioni aritmentiche disponibili su praticamente tutti i linguaggi di programmazione (l'ho usato la prima volta con il Basic del Commodore 64). Può comparire come semplice operatore, come nel caso di Actionscript o Javascript che usano entrambi il carattere "percento" (a % b), o come metodo o istruzione. Per gli sviluppatori può risultare utile in contesti apparentemente diversi tra loro. Gskinner ne ha parlato poco tempo fa, mostrando alcuni classici, ma interessanti, esempi.

Semplificando, l'operazione modulo tra due numeri restituisce il resto della loro divisione. Per completezza diciamo che l'operazione di modulo è un argomento assai vasto, che ho trattato anche in La cifratura RSA! Questa volta, tuttavia, non parleremo di codici o cifrature, ma di cose utili e molto più semplici.

Divisibile per... alternare

Il primo uso che possiamo fare dell'operazione di modulo è quella di determinare se un numero a è divisibile per un numero b! Se il risultatto di a % b(userò qui la notazione % per indicare l'operazione di modulo) è zero, a è divisibile per b. Ricordo che quando ebbi a che fare con un problema simile non conoscevo l'operazione di modulo. Sul Commodore 64 mi serviva sapere se un numero era divisibile per 2. All'epoca usai questa sintassi (ho ritrovato il codice origionale - anno 1983):

PLAIN TEXT
CODE:
  1. 10 INPUT A
  2. 12 B=A/2: IF B = INT(B) THEN PRINT "OK IL NUMERO "A" E' PARI":GOTO 10
  3. 14 PRINT "IL NUMERO "A" E' DISPARI":GOTO 10

Il BASIC del Commodore 64, comunque, non possedeva l'operazione di modulo - almeno che io ricordi!!

In pratica facevo esattamente quello che per sua natura fa l'operazione di modulo: verificavo che la divisione per 2 non avesse resto, in questo caso verificavo che il risultato non contenesse decimali ( IF B = INT(B) )! Se l'operazione di divisione è uguale al suo intero, allora il numero è pari!

Se in a abbiamo il nostro valore da controllare, la stessa cosa può essere risolta da:

PLAIN TEXT
Actionscript:
  1. if( (a % 2) == 0 ) {
  2.     // pari
  3. }

Oppure, per il 3, da:

PLAIN TEXT
Actionscript:
  1. if( (a % 3) == 0 ) {
  2.     // divisibile per 3
  3. }

Piccola nota: grazie al binario se si ha a che fare con le potenze di 2 c'è annche un modo più rapido di verificare se un numero è pari o dispari. In notazione binaria, infatti, i numeri pari hanno tutti il primo bit a zero! Così, utilizzando gli operatori logici, è possibile sapere se un numero e pari o dispari semplicemente "testanto" il primo bit:

PLAIN TEXT
Actionscript:
  1. if( !(a & 1) ) {
  2.     // pari
  3. }

In Assembly, ad esempio, questo è pane quotidiano! Ed è ancora più immediato e semplice (il Motorola 68020, ad esempio, aveva un'istruzione BTST che "testata" proprio un singolo bit ;) ). Le operazioni logiche (AND, OR, NOT, XOR, etc...), infatti, sono notoriamente più veloci a livello di eseguzione e quindi di "tempo macchina"! (a & 1) esegue l'operazione logica di AND (& - moltiplicazione bit a bit) tra il nostro valore a e 1 (chiamato maschera). Se a = 7 (00000111), ad esempio:

PLAIN TEXT
CODE:
  1. 00000111 AND
  2. 00000001 =
  3. 00000001 ; dispari

Se a = 8:

PLAIN TEXT
CODE:
  1. 00001000 AND
  2. 00000001 =
  3. 00000000 ; pari

Non solo possiamo verificare i numeri pari, cioè con il primo bit a 0, e quindi divisibili per 2, ma possiamo anche verificare se un numero è divisibile per 4, 8, 16, 32, 64, etc... utilizzando le opportune maschere:

PLAIN TEXT
Actionscript:
  1. if( !(a & 3) ) {
  2.     // divisibile per 4 (maschera = 3 = 00000011) dato che 4 è 00000100)
  3. }

Se gli ultimi due bit sono a zero il numero è divisibile per 4! Se gli ultimi 3 bit (maschera 00000111) sono a zero il numero è divisibile per 8! E così via :)

Gskinner mostra l'uso del modulo nei casi di generazione di valori alternati. Classico esempio è quello di modificare lo sfondo di una lista di elementi: una riga bianca e una grigia. Gskinner propone:

PLAIN TEXT
Actionscript:
  1. if (rowIndex % 2 == 0) {
  2.    rowColor = 0xFFFFFF;
  3. } else {
  4.    rowColor = 0xCCCCCC;
  5. }

Prima di tutto il codice sopra può essere risolto con una sola riga di codice:

PLAIN TEXT
Actionscript:
  1. rowColor = (rowIndex % 2 == 0)?0xFFFFFF:0xCCCCCC;

Inoltre, in questo specifico caso, eviterei effettivamente di eseguire una "pesante" operazione di modulo. Questa situazione particolare è spesso innestata in loop, e quindi sarebbe "bene" non sciupare cicli di clock macchina. In questi casi a me piace la più pulita (e logica) soluzione:

PLAIN TEXT
Actionscript:
  1. rowColor = (fooIndex = (fooIndex == false) )?0xFFFFFF:0xCCCCCC;

Dove è fooIndex è un valore impostato precedentemete a true o false, a seconda di come vogliamo impostare inizialmente il nostro colore sfondo. Questo approccio è più sottile e meno immediato, a prima vista, ma più rapido in quanto esegue operazioni logiche di true/false. Se fooIndex è true, quando viene eseguita l'istruzione (fooIndex = (fooIndex == false) ) la condizione (fooIndex == false) sarà falsa e di conseguenza fooIndex verrà impostato da true a false. La seconda volta, tuttavia, la condizione (fooIndex == false) sarà vera e quindi fooIndex verrà impostato da false a true! E così via...

Ripetizioni: il comportamento ad orologio

L'aritmetica finita, che sta alla base del funzionamento dell'operazione di modulo, è spesso indicata come aritmetica dell'orologio. Un orologio classico a lancette ha un quadrante suddiviso in 12 ore (12 diurne più 12 notturne!), sufficienti ad indicare una delle qualsiasi 24 ore di una giornata. Se alle 08:00 del mattino vi chiedessi che ora segnerà il vostro orologio fra 18 ore, la vostra risposta non sarebbe 8+18 = 26! Bensì le 02:00 di notte! Involontariamente e senza forse saperlo, eseguiamo conitnuamente operazioni di modulo ogni qualvolta abbiamo a che fare con gli orari.

In Italia siamo abituati al sistema di 24 ore (o misto). Quando indichiamo le ore 16:00 intendiamo quell'orario che in altri paesi è indicato come 04:00 pm. Chi usa il postfisso am/pm per distinguere le ore diune da quelle notturne, esegue ancor più spesso l'operazione di modulo, in questo caso modulo 12! Noi italiani, ed altri, invece, essendo abituati a considerare le 24 ore, eseguiamo operazioni con modulo 24!

Quando sono le 11 del mattino (11:00 per tutti) e pensiamo a "fra 5 ore", noi italiani rispondiamo 5+11 = 16 (le quattro del pomeriggio), uno straniero potrebbe ugualmente rispondere 5+11 = 4 pm. Visto che 5 + 11, nell'aritmetica classica, fa evidentemente 16, come ha fatto lo straniero a rispondere 4 pm? Ha semplicemente eseguito il modulo 12 sul risultato: 5 + 11 = 16 mod 12 = 4. Non è necessario che prendiate una calcolatrice per verificare l'esattezza del computo, ma procedete come fanno un po' tutti; visualizzate un quadrante di un'orologio e posizionate mentalmente le lancette sulle 11, aggiungete poi - sempre visivamente - 5 ore e, come per magia vi ritroverete effettivamente sulle 4! Ecco perchè le quattro del pomeriggio vengono chiamate 16 :)

In Italia, invece, usiamo un modulo 24, infatti: 11+5 = 16 mod 24 = 16. Quando sono le 23:00 di sera, dopo 5 ore non saranno le 28:00, perchè 28 modulo 12 = 4! 122514884225 modulo 24 = 17! Quello che accade è che la cifra del risultato modulo 24 non supera mai 24. Ma la cosa più interessante è che i numeri si ripetono indefinitivamente:

PLAIN TEXT
CODE:
  1. 1 % 24 = 1
  2. 2 % 24 = 2
  3. 3 % 24 = 3
  4. ...
  5. 22 % 24 = 22
  6. 23 % 24 = 23
  7. 24 % 24 = 0
  8. 25 % 24 = 1
  9. 26 % 24 = 2
  10. 27 % 24 = 3
  11. ...
  12. 48 % 24 = 0
  13. 49 % 24 = 1
  14. 50 % 24 = 2
  15. 51 % 24 = 3
  16. ...

Questa ripetizione è di una comodità disarmante. Immaginiamo, ad esempio, di dover disporre un oggetto, un MovieClip, similmente ad una scacchiera, su quattro colonne. Creiamo un MovieClip quandrato, 55x55 pixel e dal pannello delle proprietà esportiamolo con il nome Simbolo. Il codice seguente disporrà il nostro MovieClip su quattro colonne e andrà "a capo" grazie all'operazione di modulo:

PLAIN TEXT
Actionscript:
  1. var col:Number = 4;
  2. for(var i=0; i <12; i++) {
  3.     var s:Sprite    = new Simbolo();
  4.     addChild( s );
  5.     s.x             = (i % col)*60;
  6.     s.y             = Math.floor(i/col)*60;
  7. }

Come si vede dal codice, la variabile i del ciclo for cresce in modo indefinito. Ma la coordinata x del nostro MovieClip non supera mai un certo valore, e si ripete indefinitivamente! Ecco un esempio concreto:

Tramite le due manopole potete variare il numero di colonne (il modulo) e il numero totale degli elementi, sfruttando l'algoritmo di sorpa.

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/05/31/loperazione-aritmetica-modulo/feed/ 1 Papervision3D: BasicView http://www.undolog.com/2008/05/30/papervision3d-basicview/ http://www.undolog.com/2008/05/30/papervision3d-basicview/#comments Fri, 30 May 2008 07:57:42 +0000 Giovambattista Fazioli http://www.undolog.com/?p=414 Papervision3D 2.0 (GreatWhite) è in continuo sviluppo e sono molte le funzione che quasi settimanalmente vengono aggiunte. Ad aprile è stato inaugurato il blog dedicato agli sviluppatori (http://dev.papervision3d.org/), tuttavia, la release 2.0, non è ancora stata rilasciata ufficialemente è spesso difficile carpirne le vere potenzialità. Una delle recenti novità introdotte, comunque, è il nuovo oggetto BasicView che crea un'ambiente 3D con pochissime righe di codice. Basta infatti creare questo oggetto per avere a disposizione scena, viewport e camera in un colpo solo.

Normalmente si dovevano creare manualmente gli oggetti base per rendere una scena:

PLAIN TEXT
Actionscript:
  1. /*
  2. ** @name        : initPapervision()
  3. ** @description : esempio di inizializzazione di Papervision3D prima di GreatWhite
  4. */
  5. protected function initPapervision():void {
  6.     viewport         = new Viewport3D();
  7.     addChild( viewport );
  8.     scene            = new Scene3D();
  9.     camera           = new Camera3D();
  10.     renderer         = new BasicRenderEngine();
  11. }

Adesso basta usare:

PLAIN TEXT
Actionscript:
  1. /*
  2. ** @name        : initPapervision()
  3. ** @description : esempio di inizializzazione di Papervision3D con GreatWhite
  4. */
  5. protected function initPapervision():void {
  6.     bv = new BasicView(640, 480, false, true);
  7.     addChild( bv);
  8. }

Dalla BasciView è possibile accedere a tutti gli oggetti che prima venivano creati manualmente, ad esempio:

PLAIN TEXT
Actionscript:
  1. ...
  2. bv.camera.zoom = 2;
  3. ...
  4. bv.scene.addChild(photo1);
  5. ...
  6. bv.cameraAsCamera3D.target = mytarget;
  7. ...
  8. bv.singleRender();

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/05/30/papervision3d-basicview/feed/ 0