Categoria ‘Tutorials’
Per completezza, in relazione a Painting Flash CS3: effetti con le matrici Matrix voglio sottolineare che le Matrix non sono necessarie per il comportamento indicato nel precedente post. Infatti vediamo nell’esempio qui sotto:
Il codice, leggermente diverso da quello precedente, è il seguente:
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| /*
** Actionscript 2.0 code
*/
import flash.events.MouseEvent;
import flash.geom.Matrix;
// flag per il detect del mousedown
var md :Boolean = false;
// creo una lavagna front
var lvg1 :Sprite = new Sprite();
lvg1 .graphics.lineStyle(0,0xffffff );
lvg1 .graphics.beginFill(0x666666 );
lvg1 .graphics.drawRect(0,0,199,199);
lvg1 .graphics.endFill();
addChild(lvg1 );
lvg1 .x = lvg1 .y = 30;
// creo la lavagna inclinata
var lvg2 :Sprite = new Sprite();
lvg2 .graphics.lineStyle(0,0xffffff );
lvg2 .graphics.beginFill(0x666666 );
lvg2 .graphics.drawRect(0,0,199,199);
lvg2 .graphics.endFill();
lvg2 .x = 400;
lvg2 .y = lvg1 .y;
lvg2 .rotation = 45;
lvg2 .scaleX = lvg2 .scaleY = .6 ;
addChild(lvg2 );
//
// paint event
lvg1 .addEventListener (MouseEvent.MOUSE_DOWN, _onMouseDown );
lvg1 .addEventListener (MouseEvent.MOUSE_MOVE, _onMouseMove );
lvg1 .addEventListener (MouseEvent.MOUSE_UP, _onMouseUp );
//
function _onMouseDown (e :MouseEvent):void {
trace("_onMouseDown");
var c:uint = 0xffffff ;
e .target.graphics.lineStyle (10,c,1);
lvg2 .graphics.lineStyle (10,c,1);
e .target.graphics.moveTo (e .localX,e .localY);
lvg2 .graphics.moveTo (e .localX,e .localY);
md = true;
}
//
function _onMouseUp (e :MouseEvent):void { md = false; }
//
function _onMouseMove (e :MouseEvent):void {
trace("_onMouseMove");
if (md ) {
e .target.graphics.lineTo (e .localX,e .localY);
lvg2 .graphics.lineTo (e .localX,e .localY);
}
} |
In questo caso le righe dalla 22 alla 25 dimostrano che anche con semplici rotazione e spostamenti l’effetto si ripete.
Continua...
Giocherellando con il potente e versatile oggetto Matrix (matrice), legato alla trasformazioni, è possibile fare cose bizzarre. Questi strumenti sono utilizzati per applicare particolari trasformazioni ad un oggetto visivo, come ad esempio un Sprite. È possibile, ad esempio, scalare, ruotare o distorcere (skew) uno Sprite. Mentre per le prime due funzioni (scala e rotazione) gli oggetti Sprite (e non solo) mettono a disposizione direttamente delle proprietà (scaleX/scaleY e rotation), per l’effetto Skew bisogna ricorrere direttamente alle matrici. Quello che vorrei sottolineare qui è che quando modifichiamo un oggetto grafico tutte le sue coordinate interne sono spostate:
Continua...
Oggi sono in vena di consigli grafici! Vedremo, infatti, passo passo, come realizzare un tasto (di una tastiera) fotorealistico con Photoshop.
Continua...
Google ha reso disponibile le API – in Javascript – per inserire le sue mappe in qualsiasi sito Web. Viediamo come realizzare la stessa cosa con Flash!
Partiamo da un componente gratuito, UMAP (Universal ActionScript 3.0 Mapping API – integrated with Google Maps), sviluppato da AFComponents, una società verticalizzata su componenti per Flash/Flex davvero interessanti e a prezzi accessibili. Sul sito, dove è necessario registrarsi per usufruire dei download gratuiti, sono presenti anche le versioni di UMAP per ActionScript 2.0: G MAP Ver.2.6.1. In questo caso noi analizzeremo la versione 0.4 Beta di UMAP per ActionScript 3.0 (all’interno del pacchetto c’è anche il componente Flex). Questa che andremo a vedere è – evidentemente – una versione beta e manca, quindi, di alcune funzionalità presenti nella versione per Actionscript 2.0 (G MAP Ver.2.6.1). Tuttavia, gurdando al futuro, mi sembra più interessante focalizzare l’attenzione su questa release; le ho provate entrambe e, nonostante la maggiore completezza della release per Actionscript 2.0, la versione beta per Actionscript 3.0 è notevolmente più performante.
Continua...
Chi ha la fortuna come me di possedere il nuovo Adobe Photoshop CS3 – versione Extended – si sarà “grogiolato” a vedere tutte le novità di questa nuova release. Tra le tante novità presenti nella versione 10.0.1 due in particolare mi hanno colpito per la loro estrema utilità. Il primo è lo strumento di selezione rapida:
Questo permette, ad esempio, di “scontornare” un oggetto in modo semplice ed efficace. Una volta selezionato basta cliccare sulla parte dell’immagine che vogliamo catturare e al resto pensa lui. È possibile, durante la selezione, rimuovere eventuali selezioni che non ci soddisfano, con il solito tasto Alt (su Windows – quello usato anche per elimnare parti di selezione con gli altri tool). Inoltre, nella toolbar superiore, è possibile regolare l’ampiezza del “pennello” di selezione, sino ad arrivare ad operare pixel per pixel.
Questa funzionalità si accoppia in modo perfetto con la seconda novità presente in Adobe Photoshop CS3: migliora bordo, accessibile dal menu Selezione (Alt+Ctrl+R).
Data una selezione, questo strumento permette di eseguire tutta una serie di operazioni davvero utili e interessanti, con un anteprima in tempo reale regolabile trmite quelle immagini che vedete in fondo alla finestra qui sopra. Oltre ad essere utile per migliorare i bordi durante le operazioni di scontorno e selezione, permette anche di effettuare rielaborazioni di semplici immagini, come quella mostrata qui sotto:
Dalla grezza e “quadrata” immagine di sinistra, grazie all’uso di Migliora bordo si è arrivati in un attimo alla figura di destra.
Vedi Video
Continua...
Finalmente con ActionScript 3.0 non abbiamo più due diverse gestioni di eventi come accadeva prima di ActionScript 2.0 (vedi: Gestione degli eventi: similitudini tra Flash e Javascript). Il metodo addEventListener(), onnipresente nella nuova architettura, permette di gestire in modo nuovo e straordinariamente pulito tutti gli eventi possibili, anche quelli personali. La nuova organizzazione in package permette di importare gli eventi che ci servono e trattarli tutti allo stesso modo:
Continua...
Flash CS3 ha davvero tante novità, tra cui quella “curiosa” di indicare al momento della compilazione alcuni consigli sulla scrittura del codice. Questo accade, ad esempio, quando abbiamo a che fare con gli oggetti TextField. Mi è capitato di dover aggiungere una stringa alla fine di un campo TextField, con la classica notazione:
1
| mioTextField_txt.text += "Stringa aggiunta"; |
Ma ecco che ActionScript 3.0, al momento di compilare il filmato, mi avverte (Warning) – o consiglia:
Warning: 3551: L’aggiunta di testo a un’istanza TextField mediante += è spesso un’operazione più lenta rispetto all’uso del metodo TextField.appendText().
Fantastico! Andiamo a vedere infatti la SYNOPSIS del metodo appendText() che effettivamente dice:
Aggiunge la stringa specificata dal parametro newText alla fine del testo del relativo campo. Questo metodo è più efficiente rispetto a un’assegnazione addizione (+=) applicata a una proprietà text (ad esempio <strong>someTextField.text += moreText</strong>), in particolare nel caso di un campo di testo con una quantità di contenuto significativa.
Ci fidiamo? Per sicurezza verifichiamo:
1
2
3
4
5
6
7
8
9
| import flash.utils.getTimer;
var i :uint= 0;
var s :int = getTimer();
for(i ; i < 10000;i ++) {
text_txt .text += "Ciao";
}
var f :int = getTimer();
trace(f -s ); |
Tempo: 9360 – sulla mia macchina, in debug mode. Proviamo allora come consigliato dal compilatore:
1
2
3
4
5
6
7
8
9
| import flash.utils.getTimer;
var i :uint= 0;
var s :int = getTimer();
for(i ; i < 10000;i ++) {
text_txt .appendText ("Ciao");
}
var f :int = getTimer();
trace(f -s ); |
Tempo: 8415 
Niente di eccezionale… tuttavia è vero! Il metodo appendText() è più rapido e performante dell’operatore pre-incrementale (+=). Come mai? Il motivo più ovvio è il seguente: l’operatore (+=) agisce su qualsiasi tipo di dato. Inoltre in un linguaggio OO questo operatore non è strutturato come nel semplice C ma è “oggettato”. In C++, ad esempio, è possibile sovrascrivere (override) tale operatore in quanto facente parte della struttura ad oggetti del linguaggio stesso. In definitiva appendText() è più rapido in quanto il suo obiettivo è quello di “appendere” una stringa e di conseguenza non si fa tante “domande” al suo interno. L’operatore (+=), invece, deve funzionare per qualsiasi tipo di dato e quindi non è ottimizzato per le stringhe. In C, al contrario, l’operatore (+=) è una funzione a basso livello e sarà sempre più rapida di una chiamata ad una funzione.
Continua...
ActionScript 3.0 introduce tutta una serie di formidabili strumenti di comunicazione, alcuni totalmente nuovi, altri rivisitati e migliorati rispetto alla precedente versione di ActionScript. Cominciamo a vedere come cambia il modo di interagire con un Web Server nel caso di una semplice comunicazione tra Flash e una pagina PHP con risposta in XML. Prima di tutto l’oggetto XML non esiste più! In ActionScript 3.0 sono stati introdotte nuove classi, alcune delle quali dedicate alla “retrocompatibilità”.
Nota: la classe XML (insieme alle classi correlate) di ActionScript 2.0 è stata rinominata XMLDocument e spostata nel pacchetto flash.xml. È inclusa in ActionScript 3.0 al fine di assicurare la compatibilità con le versioni precedenti.
In ActionScript 2.0 la comunicazione con un Web Server veniva spesso risolta sfruttando l’accoppiata degli oggetti LoadVars e XML, usando il metodo sendAndLoad() dell’oggetto LoadVars (vedi: Flash: LoadVars e XML per inviare dati in POST). Ora le cose cambiano, ma basta solo abituarsi ai nuovi nomi ed oggetti. Come indicato nel manuale, infatti:
Continua...
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...
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...
Ultimi Commenti
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...
Marco: Scusa lo spam.. ho notato che c’è un errore.. ecco la correzione [cc_objc] /** PrimaClasse.h **/ #import...
Marco: dimenticato.. in [cci]OptionViewController[/cci ] il [cci]@syntetize[/cci] del delegato l’ho messo
luigi: molto chiaro e semplice devo ammettere che anche scrivendo da un pà difficilmente uso delegati creati da...