Categoria ‘Tutorials’


3D CountDown con FIVe3D

Ho scritto una classe CountDown per Actionscript 3.0. Per provarla ho creato un esempio sfruttando le capacità di rendering testuale di FIVe3D.

Clicca per aprire il filmato Flash

Continua...

Papervision3D: effetti con perlinNoise()

Sfruttando l’effetto generato da perlinNoise() è possibile creare effetti di increspatura e onde con Papervision3D.

Scarica il sorgente

Continua...

Esperimenti con DisplacementMapFilter e perlinNoise()

Introduco oggi un argomento interessante e vasto che ha il suo “core” nell’uso della classe DisplacementMapFilter. Questa classe permette di applicare un Filtro mappa di spostamento ad un oggetto visuale Flash (Bitmap, Sprite, etc…). Di filtri, Flash CS3, ne ha vari ed appartengono tutti alla stessa famiglia. Tuttavia il DisplacementMapFilter ha caratteristiche davvero particolari, come vedreno, che lo rendono straordinario nella generazione di effetti davvero spettacolari.

DisplacementMapFilter - clicca per aprire il filmato Flash

DisplacementMapFilter – clicca per aprire il filmato Flash

Scarica il sorgente

Continua...

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...

Papervision3D: BasicView

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.

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...

FIVe3D: effetti speciali su un cubo! In attesa di Flash 10

Molto probabilmente, quando uscirà la nuova versione di Adobe Flash, librerie 3D a “basso livello” come FIVe3D faranno una brutta fine! Tuttavia, prima di “cestinarle”, ecco un esempio di quello che è possibile realizzare (con l’ultima release 2.1):

Loading Flash Player...

Il codice della demo qui sopra è abbastanza articolato, quindi non lo propongo integralmente online. Inserisco, comunque, alcune parti di codice interessanti.

Aggiornamento: per il sorgente clicca qui

Continua...

Google Maps: come ottenere Latitudine e Longitudine da un indirizzo

Anche questa volta rispondo ad un commento con un Post, visto il generale interesse. Armando mi chiedeva se era possibile, tramite Google Maps, ottenere Latitudine e Longitudine a partire da un nome di città o di una strada. La risposta è si! Tramite il servizio Google Maps API geocoding service è possibile chiedere direttamente a Google di trasfromare la nostra informazione testuale (stato, città, via) in coordinate geografiche. Potete provare un esempio online direttamente sul sito della documementazione Google.

Continua...

Google AJAX API Language e Prototype.js

Dopo aver visto il funzionamento delle Google AJAX API mi è venuto in mente un modo alternativo per tradurre realtime le nostre pagine Web. Sfruttando prototype.js è possibile marcare i TAG HTML che desideriamo tradurre, invece di sottoporre l’intero documento alla traduzione. Per marcare i TAG HTML da tradurre ho usato l’attributo rel, impostandolo a translate:

1
<p rel="translate">Questo testo deve essere tradotto</p>

Con una semplice funzione, poi, possiamo sfruttare prototype.js per elaborare tutti i  TAG HTML con rel='translate':

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 * @name         : translate()
 * @description  : translate  
 */
function translate() {
    $$('[rel="translate"]').each(
        function(e) {
            google.language.translate(e.innerHTML, 'it', 'en',
                function(result) {
                    if (result.translation) {
                        e.innerHTML = result.translation;
                    } else {
                        alert( 'Translate Error!\n\n' + result.error.message );
                    }
                }
            );                                          
        }
    );
}

Potete vedere questa funzione in azione su e-lementi.com

Ovviamente lo script può (e/o deve) essere perfezionato a seconda dei casi. È interessante notare, tuttavia, che è possibile specializzarlo in modo tale da sostituire delle immagini (nel caso di bottoni in grafica che contengono testo) o fargli elaborare TAG particolari come INPUT o TEXTAREA.

Uno dei limiti che ho riscontrato, e che vorrei approfondire, riguarda il numero di caratteri che possono essere tradotti. In caso di testi importanti, infatti, non è difficile ottenere un errore: che infatti ho gestito nello script con un alert().

Continua...



Stop SOPA