Categoria ‘ActionScript’


Flash CS3: creare un effetto Reflex su qualsiasi MovieClip

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.

Loading Flash Player...

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

Continua...

Effetti sulle Bitmap con perlinNoise()

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.

Loading Flash Player...

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

Continua...

L’operazione aritmetica modulo

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):

1
2
3
10 INPUT A
12 B=A/2: IF B = INT(B) THEN PRINT "OK IL NUMERO "A" E' PARI":GOTO 10
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:

1
2
3
if( (a % 2) == 0 ) {
    // pari
}

Oppure, per il 3, da:

1
2
3
if( (a % 3) == 0 ) {
    // divisibile per 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:

1
2
3
if( !(a & 1) ) {
    // pari
}

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:

1
2
3
00000111 AND
00000001 =
00000001 ; dispari

Se a = 8:

1
2
3
00001000 AND
00000001 =
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:

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

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:

1
2
3
4
5
if (rowIndex % 2 == 0) {
   rowColor = 0xFFFFFF;
} else {
   rowColor = 0xCCCCCC;
}

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

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:

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:

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

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, 55×55 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:

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

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:

Loading Flash Player...

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

Continua...

undolibrary: libreria Actionscript 3.0 su Google Code

Ho aperto un progetto su Google Code: undolibrary. Per adesso, questa libreria, contiene un solo componente (Knob -  manopola) da utilizzare tramite Actionscript 3.0. Ne parlo in quanto questo componente è propedeutico ad una serie di tutorial/sorgenti in Flash che volevo rendere disponibili.

Loading Flash Player...

Google Code

Prima di tutto introduco il concetto di Google Code per chi ne fosse estraneo. Google Code è un servizio gratuito messo a disposizione da Google con lo scopo di condividere codice ma, soprattutto, di condividerlo in modo collaborativo e con un sistema di versioning (subversion) e wiki utilissimo a gruppi di sviluppo (soprattutto opensource) o a singoli programmatori. Sul sito Google Code troviamo:

È possibile cercare progetti di altri, con un motore di ricerca appositamente costruito. Molti gruppi di sviluppo, composti da team che sono ubicati in zone geografiche distanti, sfruttano questa condivisione per lavorare insieme, garantiti da un sistema di versioning ormai assodato (checkout/checkin per non sovrapporsi o il supproto per creare dei branch – spinoff di progetti). Librerie e tools come Papervision3D, Tweener o AS3corelib, ad esempio, sono ubicati proprio su Google Code godendo da un lato di un hosting di sviluppo e dall’altro di un accesso pubblico per il download dei sorgenti e della documentazione.
Punto importante, poi, è la possibilità – aperto un progetto – di impostare gli accessi e la visualizzazione. Se volete potete proteggere il vostro lavoro o renderlo del tutto privato, invece che pubblico.

Continua...

Creare eventi personalizzati in Actionscript 3.0

Creare eventi personalizzati in Actionscript 3.0 è semplicissimo. Usarli, poi, permette di utilizzare il metodo addEventListener() e rendere il nostro oggetto del tutto standard. Se abbiamo creato una classe, ad esempio Bottone, è corretto associare a questa uno o più eventi tramite una apposita classe (derivata dalla classe Event) BottoneEvent. Potremmo realizzare tutti gli eventi che interessano il funzionamento del nostro oggetto: il click, il mouse over, o un qualsiasi altro evento! Definendo anche delle nostre personali costanti. Lo scheletro – generico – di una classe evento personalizzata è:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
package {
    /*
    ** @name            : BottoneEvent.as
    ** @description     : Classe derivata da Event per gestire un proprio evento personalizzato
    ** @author          : =undo=
    ** @web             : http://www.undolog.com
    ** @email           : g.fazioli@undolog.com
    */
   
    import flash.events.*;

    public class BottoneEvent extends Event {
       
        public static const MIOEVENTO:String       = 'pluto'; // codice qualsiasi, anche 'mioevento' in minuscolo
       
        public var Valore:Number                   = NaN;        
        /*
        ** @name            : BottoneEvent
        ** @description     : constructor
        */

        public function BottoneEvent ( type:String, v:Number, bubbles:Boolean=false, cancelable:Boolean=false ):void {
            super(type, bubbles, cancelable);
            this.Value = v;
        }
       
        /*
        ** @override
        */

        override public function clone():Event    {
            return new KnobEvent(this.type, this.Value, this.bubbles, this.cancelable);
        }
    }
}

Continua...

Google AJAX Language API: tutorial sul funzionamento

Rispondo, con questo post, alla richiesta di Andrea su come inserire il traduttore di Google nel proprio web. Esistono vari modi per usufruire dei servizi di traduzione automatica messi a disposizione da Google e non solo. Possiamo usare Plugin scritti da terzi, un semplice script Javascript preconfezionato da Google stessa o imparare ad usare le API, cioè una serie di funzioni richiamabili – come vedremo – in vari modi.

Plugin

Su questa soluzione non mi dilungo, in quanto credo non sia propriamente attinente alla richiesta di Andrea, se ho compreso bene. Inoltre è una soluzione sostanzialemente valida solo per i Blog e non per un uso personalizzato e generico. Posso solo segnalare, per gli utenti WordPress, Global Translator, forse il più semplice, funzionale e diffuso Plugin di questo tipo.

Script preconfezionato da Google

Il modo più semplice per tradurre il proprio sito web o il proprio Blog è quello di inserire un semplice script Javascript fornito da Google stessa. Basta andare sul sito translate.google.com e cliccare sulla scheda ‘Strumenti‘. Da questa pagina è possibile preimpostare le funzioni di traduzione o lasciare quelle di default. Lo script è molto semplice:

1
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&amp;up_source_language=it&amp;w=160&amp;h=60&amp;title=&amp;border=&amp;output=js"></script>

e come risultato si ottiene:

Google Translate

Continua...

AS3Corelib: libreria per codifica MD5, SHA1 e JPG/PNG Encoder

AS3corelib project è una libreria scritta in ActionScript 3 che contiene una serie di classi e utilities per estendere lo sviluppo con ActionScript 3. È incluso il supporto per la codifica MD5 e SHA 1, encoders per JPG e PNG, e la serializzazione JSON per stringhe, numeri e Date APIs. Questa libreia risulta davvero utile nello sviluppo di applicazioni Flash e riesce ha dare il meglio di sè in accoppiata con Adobe AIR!

Dei vari package presenti i più interessanti sono com.adobe.crypto e com.adobe.images. Il primo permette di gestire le codifiche MD5, SHA1, SHA224 e SHA256, in modo davvero semplice: tramite il metodo hash() si passa la stringa-sorgente e viene restituita la codifica! Il pacchetto images permette addirittura di ottenere l’encoder JPG o PNG a partire da una semplice bitmap Flash!

1
public function encode(image:BitmapData):ByteArray

Il risultato ByteArray rappresenta l’encoding JPG che, Flash permettendo, può essere salvato direttamento su disco! Per saperne di più potete seguire questo tutorial video su come memorizzare un’immagine PNG – a partire da un oggetto video – su disco tramite as3corelib.

Continua...

Argomenti variabili e di default in Javascript, Actionscript e PHP

Chi sviluppa sa bene che una delle caratteristiche delle funzioni (function () ) è quella di avere o meno degli argomenti di input. Può capitare, a volte, di dover scrivere una funzione che, in base ai parametri di input, si comporta in modo differente (in programmazione OO troviamo questo comportamento indicato come poliformismo). I parametri variabili (varargs), introdotti già all’epoca del C e presenti di default nella classica dichiarazione del main:

1
int main(int argc, char *argv[]);

Continua...

Papervision3D: gestire le Bitmap come in FIVe3D

Partendo dall’esempio mostrato in FIVe3D: trattare le Bitmap, vediamo come realizzare il medesimo effetto utilizzando Papervision3D 2.0 (Great White), così da proseguire ad analizzare il funzionamento di questa beta Great White.

Loading Flash Player...

Continua...

FIVe3D: trattare le Bitmap

Con la release 2.1 di FIVe3D è possibile manipolare anche oggetti Bitmap, in modo da superare l’iniziale limite di questa libreria del solo vettoriale. Se inseriamo una Bitmap in libreria e la esprotiamo in modo da poterne creare un’instanza dinamica tramite Actionscript, diventa facile creare un oggetto Bitmap3D e ruotarlo a nostro piacimento:

Loading Flash Player...

Continua...



Stop SOPA