Articoli con Tag ‘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.
Ho trasformato questo in un simbolo ed ho applicato due effetti nella giusta sequenza: smussatura e sfocatura:
Il risultato è stato: 
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...
Oggi propongo un’interessante variante del “classico” orologio analogico in Flash. Questa versione contiene una transizione Tween all’avvio del filmato. Mi sono ispirato al Gadget presente in Windows Vista che esegue, appunto, questo bel effetto all’avvio.
Il codice è scritto in Actionscript 2.0 ed è stato compilato con il nuovo Adobe Flash CS3. Questo a dimostrazione che la nuova suite CS3 è pienamente compatibile con le precedenti versioni di Flash, un punto estremamente importante per chi ha deciso di prendere in considerazione l’aggiornamento del prodotto.
Per il sorgente cliccate qui.
Continua...
Grazie allo “sprono” di TV Revolution ho realizzato un piccolo Widget natalizio (vediamo se riusciamo a migliorarlo con i vostri commenti).
Per usarlo basta inserire il seguente codice sul vostro sito:
1
| <script language="javascript1.2" type="text/javascript" src="http://www.undolog.com/services/snow.php?h=100"></script> |
Il parametro h determina l’altezza in pixel del filmato. Di default questo viene mostrato in posizione assoluto e largo al 100%. Per modificare queste impostazione usate abs=0 per posizionare la neve all’interno delle pagina e non sopra. Usate invece w=800 per impostare una dimensione personale. Ad esempio:
1
| <script language="javascript1.2" type="text/javascript" src="http://www.undolog.com/services/snow.php?h=50&abs=0&w=640"></script> |
Crea la neve alta 50 pixel, in posizione relativa e larga 640 pixel, come mostrato qui sotto:
Continua...
Per alcuni sviluppatori basta sapere che esiste una nuova versione del loro pacchetto di sviluppo preferito per correre ad acquistare l’aggiornamento. Altri, e non a torto, mantengono una maggiore calma e "pretendono" di conoscere gli effettivi miglioramente della nuova versione prima di modificare le proprie abitudini. Nel caso di Adobe Flash CS3 non c’è molto da attendere, visto gli innumerevoli cambiamenti che ha subito il pacchetto da quando Macromedia è stata acquisita da Adobe.
Ecco, quindi, 10 semplici, ma importanti, motivi che, a mio personale parere, bastano per convincersi ad eseguire l’aggiornamento ad Adobe Flash CS3. Mi soffermerò, ovviamente, solo sulle caratteristiche che mi hanno colpito personalmente; questo non vuole essere un elenco esaustivo di tutte le numerose novità introdotte con la suite CS3, solo un volo radente per anticipare qualche features della versione CS3.
1. Installazione
L’installazione è gradevole e rapida, rispetto alle precedenti versioni. Si integra, tra l’altro, con tutti i prodotti Adobe (Dreamweaver CS3, Photoshop CS3 extended, ecc…) il che rende le operazioni di installazione/rimozione ed aggiornamento un vero piacere.
2. Compatibilità a ritroso
Una questione spesso sottovalutata, ma sempre tenuta in considerazione nella storia di Flash: la possibilità di gestire le precedenti versioni del prodotto. In Flash CS3 ci sono tutti gli strumenti sia per migrare che per manipolare le precedenti versioni dei nostri filmati. Troviamo questa possibilità sia nel debug (un debug separato per Actionscript 2.0 e Actionscript 3.0) sia in fase di compilazione del filmato. Scrivere da subito applicazioni Flash in Actionscript 3.0 potrebbe essere controproducente in determinati contesti. Se il vostro sito target ha un traffico notevole potrebbe capitare che molti utenti non hanno ancora installato le ultime versioni del Player Flash per il browser e quindi non vedrebbero il filmato. Tuttavia, come già detto, Flash CS3 permette di sviluppare applicazioni Flash mantendedo la compatibilità a ritroso e quindi non vedo in questo un grosso ostocalo nell’upgrade del prodotto.
3. Interfaccia grafica e IDE
L’IDE di Flash CS3 (come quella di Dreamweaver CS3) è stata rivisitata al meglio. I pannelli (vedi figura qui a sinistra), spesso scomodi nelle precedenti versioni, sono stati completamente ridisegnati e adesso il loro uso è notevolemente meno invasivo. 
Inoltre la possibilità di ridurre ad icona i pannelli (vedi figura qui a destra) è una vera trovata che rende l’interfaccia gradevole e funzionale. Quando un pannello si trova in modalità icona occupa molto meno spazio e con un semplice click è possibile aprire il pannello principale prima sempre visibile.
Tutta l’IDE, insomma, è stata rivista compresa la zona centrale con la finestra per l’editing grafico e del codice. Non vi segnalo tutti i cambiamenti altrimenti vi rovinerei la sorpresa…
Continua...
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...
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:
Continua...
Sul blog di Internet Explorer (IE Automatic Component Activation (Changes to IE ActiveX Update)) è stato annunciato un’importante cambiamento che avverà introno ad aprile 2008, con il rilascio di importante patch, compresa la tanto attesa Service Pack 3. Un’anteprima, tuttavia, sarà disponibile entro dicembre 2007 dal centro download di Internet Explorer.
Nell’aprile 2006, infatti, Microsoft aveva introdotto una patch in Internet Explorer che bloccava l’interazione con i componenti ActiveX presenti in una pagina Web. Questo “blocco”, alla fine, si risolveva nella richiesta esplicita – diretta all’utente/navigatore - di attivare il controllo (filmato Flash, QuickTime, etc…) tramite la barra spaziatrice o un click del mouse.
Nel tempo, tuttavia, sono state introdotte tutta una serie di scorciatoie per evitare questa fastidiosa richiesta, scorciatoie ufficiali (proposte ad esempio dalla stessa Macromedia per Flash e da Apple per QuickTime) e non ufficiali (SWFObject o UFO, ad esempio – vedi anche Unobtrusive Flash Objects).
Secondo Microsoft gli sviluppatori non dovranno modificare nulla ad aprile 2008 nei “vecchi” siti che utilizzavano scorciatoie, tuttavia è bene dare un’occhiata al blog di Internet Explorer per i casi particolari.
Microsoft torna quindi sui suoi passi, ed effettivamente ci eravamo chiesti un po’ tutti che idiozia fosse questa dell’attivazione del controllo, “pezza” adottata per una carenza nella gestione degli ActiveX (TAG OBJECT) più che a falle nei componenti stessi. Negli altri browser, infatti, l’uso dei Plugin è accompagnato dal più solido TAG EMBED. Ultima nota:
In the coming weeks, we’ll be updating the MSDN article with descriptions of the new behavior. Keep an eye out here for when the preview goes live.
Continua...
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:
- Non può essere applicata a tutti gli oggetti esposti da Flash
- 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...
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...
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.
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...
Ultimi Commenti
Giovambattista Fazioli: @Nik: Sono contento! In bocca al lupo dunque!!
Nik: Lunedì ho l’esame di informatica su java, grazie mi sei stato utilissimo, il libro che ho era poco chiaro...
Marco: Ti ringrazio moltissimo, mi hai illuminato
ho risolto impostando [cc_objc] //OptionViewController.m -...
Giovambattista Fazioli: @Marco: Ti consiglio un approccio credo più corretto. Se hai eseguito il subclass del tab...
luigi: molto chiaro e semplice devo ammettere che anche scrivendo da un pà difficilmente uso delegati creati da...