Articoli con Tag ‘Tutorials’


Creare un fiocco di neve in Flash

Alcuni lettori mi hanno chiesto come è stato creato il fiocco di neve, così realistico, del Widget natalizio. Chi ha scaricato il sorgente probabilmente già lo sa… comunque è stato davvero semplice. Prima di tutto ho selezionato lo Strumento Pennello in Flash ed ho disegnato un punto.

Fiocco di neve Fiocco di neve

Ho trasformato questo in un simbolo ed ho applicato due effetti nella giusta sequenza: smussatura e sfocatura:

Fiocco di neve Fiocco di neve

Il risultato è stato: Fiocco di neve

A questo MovieClip (simbolo) ho associato una semplice classe CNeve, che crea di fatto l’intelligenza del fiocco stesso:

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
class CNeve extends MovieClip {
    private var _interval;
    private var _maxy:Number;
    //
    function CNeve() {
        _interval = setInterval(this, "_move", 25);
        _maxy = Math.round((Stage.height+256)/2)+_getRndRange(-20, -7);
    }
    //
    private function _getRndRange(min:Number, max:Number):Number {
        var randomNum:Number = Math.floor(Math.random()*(max-min+1))+min;
        return randomNum;
    }
    //
    private function _move() {
        _y += _getRndRange(1, 5);
        _x += ((_getRndRange(-50, 50))>0) ? 1 : -1;
        _rotation += _getRndRange(1, 5);
        if (_y>_maxy) {
            clearInterval(_interval);
        }
        updateAfterEvent();

    }
}

Il metodo _move() contiene l’intelligenza del fiocco, ovvero la funzione di caduta, estremamente semplice. Variando la funzione randomica _x += ((_getRndRange(-50, 50))>0) ? 1 : -1;, ad esempio inserendo un _getRndRange(-550, 50), si può aggiungere un effetto effetto vento, cioè i fiocchi cadono con una pendenza particolare. In particolare si possono mandare i fiocchi a destra e a sinistra usando un codice di questo tipo:

1
_x += ((_getRndRange( _getRndRange(-350, -50), _getRndRange(50, 350) ))>0) ? 1 : -1;

La rotazione (_rotation += _getRndRange(1, 5);), poi, conferisce un ulteriore dettaglio al fiocco stesso.
Quando creo un fiocco (vedi funzione creaFiocco() più sotto) ho aggiunto anche un alpha=90 e uno scale randomico, per avere fiocchi di neve di diverse dimensioni.

1
2
3
4
5
6
7
8
9
10
11
12
// crea fiocco
function creaFiocco() {
    var s = randRange(20, 100);
    var x = randRange(-Math.floor((Stage.width - 320) / 2), Math.round((Stage.width + 320) / 2));
    var y = -Math.floor(((Stage.height - 256) / 2)) - 10;
    c_mc.attachMovie("neve","neve_" + index,index,{_x:x, _y:y, _xscale:s, _yscale:s, _alpha:90});
    index++;
    if (index > 1000) {
        index = 1;
        c_mc = createEmptyMovieClip("c_mc", 2);
    }
}

E questo è tutto… ;) Dimenticavo… Auguri a tutti e Buone feste… ;)

Continua...

Flash: disabilitare un TextField in modalità input

Come si disabilità un TextField in modalità input? Visto che la proprietà enabled non è disponibile si può ricorrere ad un semplice artifizio: cambiare runtime lo stato del TextField. Fortunatamente gli sviluppatori di Flash hanno permesso di modificare lo stato di un TextField anche runtime, tramite la proprietà type. Ne deriva che se un TextField è inserito nello stage come input (quindi con type="input"), da codice possiamo trasformarlo in un testo “statico”. In realtà lo trasformeremo in testo dinamico (type="dynamic") ma il risultato visivo è il medesimo. L’artifizio funziona in quanto sia il TextField input che il TextField dinamico condividono la stessa proprietà text. Così se ho inserito un testo in un TextField input quando lo trasformo in un TextField dinamico avrò solo l’impressione di non poter più inserire caratteri! Ovvero ho disabilitato il TextField input!

L’oggetto TextField, inoltre, può essere esteso come un MovieClip, quindi potremmo avvalerci del seguente utile codice:

1
2
3
TextField.prototype.Enabled = function(v:Boolean) {
    this.type = v ? "input" : "dynamic";
};

Continua...

Creare MovieClip modali in TopMost

Illustrerò una tecnica per realizzare simboli (MovieClip) modali da usare similmente ai componenti Alert e Window di Flash. L’obiettivo è quello di mostrare un MovieClip sopra tutti gli altri, disabilitando – anche – l’accesso all’area sottostante e qualsiasi altro oggetto/componente presente. Ad essere sincero ho realizzato tutto ciò eseguendo un po’ di reverse engineering dai codici Adobe, che sono in chiaro! Non ho proprio resistito ;)

L’artefizio che si usa, per disabilitare qualsiasi interfaccia presente al di sotto del nostro MovieClip, è quella di creare un MovieClip trasparente che prenda tutta l’area dello stage. A questo MovieClip, che non sarà praticamente visibile, si aggancia un metodo “nullo” sull’evento onRelease, stando attenti ad impostare la proprietà useHandCursor a false.

Prima di tutto creiamo un filmato con una qualsiasi interfaccia nello stage principale:

Interfaccia

Continua...

Aggiungere proprietà ad un MovieClip

Nel Post Estendere i MovieClip in Adobe Flash MX avevo illustrato alcune tecniche per estendere un MovieClip. In particolare avevo detto che l’uso di MovieClip.prototype non permetteva l’estensione di proprità ma solo di metodi:

[...] Due importanti limitazioni di questa tecnica sono:

  1. Non può essere applicata a tutti gli oggetti esposti da Flash
  2. Possono essere “aggiunti” solo metodi e non proprietà [...]

In verità è possibile, con un passaggio in più, aggiungere dinamicamente proprietà anche usando MovieClip.prototype. Prima dell’introduzione di function get e function set, infatti, Flash permetteva l’aggiunta di proprietà (in lettura/scrittura o solo lettura) tramite il metodo addProperty(). Nella pratica questo si traduce nell’invocazione del metodo addProperty() e nella definizione di due funzioni getter e setter. La setter può essere null così da creare proprietà in sola lettura. Ad esempio se volessimo estendere tutti i MovieClip con una nuova proprietà _alpha in grado di aggiungere un’animazione, basta scrivere il seguente codice:

1
2
3
4
5
6
7
function _get_alpha():Number {
        return(this._alpha);
}
function _set_alpha(v:Number):Void {
       new Tween(this, "_alpha", Strong.easeOut, this._alpha, v, 1, true);
}
MovieClip.prototype.addProperty("_alpha_tween", _get_alpha, _set_alpha);

Da questo momento in poi se abbiamo un simbolo “miosimbolo_mc” possiamo sfruttare questa nuova proprietà:

1
miosimbolo_mc._alpha_tween = 50;

Quello che non è possibile fare, invece, è sovrascrivere le proprietà esistenti; per questo motivo ho usato _alpha_tween invece di _alpha. Ecco, quindi, un buon motivo per usare comunque le Classi 2.0 per estendere – e derivare – eventuali MovieClip.

Continua...

Filmati ridimensionabili in Flash: atto II

Riprendendo il Post StageExt Class: filmati ridimensionabili in Flash ecco un modo ancor più semplice per ottenere il medesimo effetto, solo se nella libreria del nostro filmato è presente almeno un componente Flash!

Create un simbolo, un quadrato rosso 100×100 e ponetelo nella stage chiamandolo resizeWindow. Inserire in libreria, non nello stage, un componente qualsiasi, ad esempio un TextInput, e scrivete il seguente codice nel primo fotogramma del filmato.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import mx.managers.SystemManager;
//
Stage.scaleMode = "noscale"
//
//SystemManager.init();
SystemManager.addEventListener("resize", resizeWindow);
//
resizeWindow.resize = function(Void):Void {
    var s:Object = SystemManager.screen;
    this._width = s.width;
    this._height = s.height;
    this._x = Math.round(s.x);
    this._y = Math.round(s.y);
}
resizeWindow.resize();

La riga 6 (SystemManager.init();) può essere omessa.

Continua...

Flash: come inizializzare componenti nel costruttore di una classe

Quando si estente una classe da un MovieClip che continene altri oggetti (MovieClip, TextField, etc…) questi ultimi potrebbero non essere “pronti” all’interno del costruttore. Questo accade soprattutto quando si utilizzano altri MovieClip estesi o i componenti (controls) di Flash. Per risolvere il problema basta sfruttare l’evento onLoad ereditato dalla classe stessa. Ad esempio immaginiamo di avere un MovieClip che contiene un campo TextField (oggetto visuale statico interno a Flash) e un oggetto TextInput (controllo inserito dal pannello componenti) e si vuole impostare qualche proprietà durante il costruttore della nostra classe MiaClasse.

Esempio Creiamo un simbolo ed inseriamo al suo interno sia l’oggetto TextField (chiamiamolo text_txt) sia l’oggetto TextInput (textinput_txt). Associamo questo simbolo ad una classe che estende un MovieClip, chiameremo la nostra classe MiaClasse. Quello che vogliamo ottenere è che durante il costruttore della nostra classe MiaClasse vengano inizializzati questi due controlli. Se proviamo ad usare un codice come questo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//
import mx.controls.TextInput;
//
class MiaClasse extends MovieClip {
    //
    private var text_txt:TextField;
    private var textinput_txt:TextInput;
    //
    function MiaClasse() {
        trace("MiaClasse::costruttore");
        //
        text_txt.text = "Ciao";
        textinput_txt.text = "Ciao";
        //
    }

}

Continua...

Fullscreen in Flash dal browser

Flash ha sempre supportato la modalità a schermo interno (fullscreen) sia nel Player stand-alone che nel proiettore. Questa modalità ancor oggi viene pienamente supportata e non ha subito modifiche. Adobe ha invece recentemente introdotto la possibilità di attivare il fullscreen direttamente nei filmati visualizzati nel browser. È stata introdotta una nuova e semplice funzionalità ActionScript che lavora sia con i player stand-alone che con i player browser. Per rendere il fullscreen fuzionante bisogna operare anche lato HTML, aggiungendo un nuovo parametro allowFullScreen nei TAG <object> ed <embed>. Tutto il resto è demandato al motore interno di Flash.
Questa nuova funzionalità ha comunque alcune restrizioni che bisogna conoscere, prima tra tutte l’uso del Flash Player versione 9.0.28.0 o superiore. Inoltre, ricapitolando:

  • Sul Browser dev’essere installata la versione del Player 9.0.28.0 o superiore
  • I developer devono aggiungere un nuovo parametro allowFullScreen nei Tag <object> e <embed>. Questo parametro è impostato normalmente a false e non permette il fullscreen. Per permettere il fullscreen bisogna esplicitamente impostarlo a true.
  • Un Box di dialogo verrà mostrato quando si entra in modalità fullscreen e indicherà all’utente come uscire da tale modalità. Questo Box sarà visibile per pochi secondi, passati i quali scomparirà da solo.
  • L’attivazione del fullscreen da ActionScript può avvenire solo in risposta di un click del mouse o tramite la pressione di un tasto, qualsiasi altra modalità verrà ignorata in ActionScript 2.0 e scatenera una eccezione throw in ActionScript 3.0.
  • Durante la modalità di fullscreen non è possibile utilizzare la tastiera. L’utente finale non può quindi inserire o modificare testi. L’unica risposta alla tastiera è riservata alla combinazione di tasti usata per uscire dalla modalità di fullscreen (la pressione del tasto ESC)

Codice ActionScript

Il codice necessario per impostare il fullscreen è semplicissimo e sfrutta l’oggetto Stage discusso su questo Blog in StageExt Class: filmati ridimensionabili in Flash:

1
Stage["displayState"] = "fullScreen";

Continua...

MagicLetter Flash Class: una classe per le scritte magiche

Come promesso ecco la versione aggiornata del simpatico effetto delle scritte magiche. Ho realizzato una diversa animazione per la “lettera”, per mostrare quanti effetti si possono fare. Il sorgente completo potete scaricarlo qui.

Loading Flash Player...

Classe MagicLetter

Questo è il codice della Classe che, ovviamente, può essere modificato e migliorato ulteriormente. Ad esempio è possibile inserire un parse per supprotare un simbolo di “nuova linea”, per andare a capo insomma. Possono essere introdotte le funzioni di get e set per esportare alcune proprietà all’esterno, ed altro ancora.

Continua...

Scritte magiche in Flash

Questo che propongo è un articolo che scrissi nell’agosto del 2003 (titolo originale: Scritte magiche in Flash MX). Nonostante sia “datato” (ora userei un codice ActionScript differente), è a mio avviso un simpatico strumento utile per effetti davvero suggestivi. Proporrò più avanti, o fatelo voi, la versione aggiornata con l’uso delle classi…

MovieClip dinamici

L’elemento che gioca un ruolo fondamentale nell’architetura Flash è l’oggetto MovieClip. La possibilità di creare questo tipo di oggetti da codice conferisce a Flash una notevolissima potenzialità, rendendolo un decoroso ambiente di sviluppo davvero divertente. Grazie alla possibilità di aggiungere run-time oggetti di tipo MovieClip, vedremo quanto sia semplice realizzare l’effetto mostrato in figura 1.

Loading Flash Player...

Fig. 1 – Esempio di testo ad effetto

La classe MagicText_class

Visto che stiamo utilizzando la versione MX di Flash, facciamo le cose per bene e creiamo una classe MagicText_class da riutilizzare a nostro piacimento. Quello che stiamo per fare è definire una nuova classe MagicText_class, che erediterà tutte le caratteristiche di una classe MovieClip. In questo modo avremmo a disposizione un vero e proprio oggetto, la base per creare successivamente un componente Flash vero e proprio! Se lo desideriamo. Per ora soffermiamoci solo sulla nostra classe e vediamo come costruirla.

Continua...

Estendere i MovieClip in Adobe Flash MX

Io utilizzo due tecniche per estendere le funzionalità di un MovieClip. La prima, utilizzata anche nelle precedenti versioni di Flash MX, usa la proprietà prototype, un puntatore alla superclasse (madre), come indicato nel manuale:

Un riferimento alla superclasse di un oggetto classe o funzione. La proprietà  prototype viene creata automaticamente e associata a qualsiasi oggetto classe o funzione creato. Questa proprietà è di tipo statico ed è specifica della classe o della funzione creata. Se, ad esempio, si crea una classe personalizzata, il valore della proprietà  prototype viene condiviso da tutte le istanze della classe ed è accessibile solo come una proprietà della classe. Le istanze della classe personalizzata non possono accedere direttamente alla proprietà prototype, ma possono accedervi mediante la proprietà __proto__.

Uno dei vantaggi nell’uso di prototype, soprattutto con i MovieClip, risiede nell’estensione di tutti i MovieClip, nessuno esluso. Di fatto si effettua un’estensione broadcast a tutti i MovieClip statici o dinamici. Ad esempio, una comoda estensione potrebbe essere:

1
2
3
MovieClip.prototype.move = function(x:Number, y:Number) {
    this._x = x; this._y = y;
}

Continua...



Stop SOPA