Articoli con Tag ‘Tutorials’


Painting Flash CS3: real time erase tool

Partendo dai codici forniti in Creare un’applicazione Paint in Flash CS3, ed eseguendo piccole modifiche, si può migliorare notevolmente lo strumento di “erase”. Aggiungendo una Shape non visibile, è possibile usarla come “piano” per eseguire il draw() in modalità di fusione “erase”. Come mostrato nell’esempio qui sotto, dopo aver disegnato qualcosa, tenete premuto il tasto Ctrl e l’effetto di “cancellazione” appare ora in tempo reale.

Loading Flash Player...

Il codice è il seguente – sorgente:

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import flash.events.MouseEvent;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.display.GradientType;
//
import flash.geom.Matrix;
//
var md:Boolean = false;
//
var event_spr:Sprite = new Sprite();
addChild (event_spr);
//
var area_width:Number = event_spr.stage.stageWidth;
var area_height:Number = event_spr.stage.stageHeight-32;
//
var fillType:String = GradientType.LINEAR;
var colors:Array = [0xFF0000, 0x00FF00, 0x0000ff];
var alphas:Array = [1, 1, 1];
var ratios:Array = [0, 128, 255];
var spreadMethod:String = SpreadMethod.PAD;
var matrix:Matrix = new Matrix();
matrix.createGradientBox (area_width, area_height, 1, 0, 0);
//
with (event_spr.graphics) {
    beginGradientFill (fillType,colors,alphas,ratios,matrix,spreadMethod);
    drawRect (0,0,area_width, area_height);
    endFill ();
}
// paint event
event_spr.addEventListener (MouseEvent.MOUSE_DOWN, _onMouseDown);
event_spr.addEventListener (MouseEvent.MOUSE_MOVE, _onMouseMove);
event_spr.addEventListener (MouseEvent.MOUSE_UP, _onMouseUp);
event_spr.addEventListener (MouseEvent.MOUSE_OUT, _onMouseUp);
//
var bmpd:BitmapData = new BitmapData(event_spr.width,event_spr.height,true,0);
var bmp:Bitmap = new Bitmap(bmpd);
addChild (bmp);
//
// shape temporanea
var draw_shape:Shape = new Shape();
addChild (draw_shape);
//
// shape, non visibile, usata per la "cancellazione"
var erase_shape:Shape = new Shape();

//
function _onMouseDown (e:MouseEvent):void {
    debug ("_onMouseDown");
    draw_shape.graphics.lineStyle (10, 0xffffff, 1);
    erase_shape.graphics.lineStyle (20, 0xffffff, 1);
    draw_shape.graphics.moveTo (e.localX,e.localY);
    erase_shape.graphics.moveTo (e.localX,e.localY);
    md = true;
}
//
function _onMouseUp (e:MouseEvent):void {
    md = false;
    bmp.bitmapData.draw (draw_shape);
    draw_shape.graphics.clear ();
    erase_shape.graphics.clear ();
}
//
function _onMouseMove (e:MouseEvent):void {
    debug ("_onMouseMove");
    if (md && !e.ctrlKey) {
        draw_shape.graphics.lineTo (e.localX,e.localY);
    } else if (md && e.ctrlKey) {
        erase_shape.graphics.lineTo (e.localX,e.localY);
        bmp.bitmapData.draw (erase_shape,null,null,"erase");
    }
}
//
function debug (v:String):void {
    var d:Date = new Date();
    trace (d.getMinutes()+":"+d.getSeconds()+":"+d.getMilliseconds()+": "+v);
}

È stata aggiunta una nuova Shape, erase_shape, non visibile (non è stato effettuato nessun addChild()):

1
2
3
...
// shape, non visibile, usata per la "cancellazione"
var erase_shape:Shape = new Shape();

Nella parte di codice che si preoccupa di disegnare è stato introdotto il controllo per il tasto Ctrl e, se premuto, viene interessata proprio la Shape erase_shape e copiata sulla Bitmap:

1
2
3
....
erase_shape.graphics.lineTo (e.localX,e.localY);
bmp.bitmapData.draw (erase_shape,null,null,"erase");

Continua...

Creare un’applicazione Paint in Flash CS3

Come esposto in Actionscript Flash contest: erase tool non è possibile “cancellare” una particolare zona di uno Sprite, MovieClip o Shape su cui sono state tracciate linee o rettangoli tramite il puntatore graphics. Esiste, infatti, il solo metodo clear() che, tuttavia, ha effetto sull’intera area del nostro oggetto. La soluzione al problema risiede nella possibilità di usare gli oggetti Bitmap e BitmapData. Come vedremo possiamo accedere direttamente ai dati Bitmap e manipolarli in modo da “cancellare” i tratti con un vero e proprio strumento “cancellino”.

Presenterò due metodi diversi per realizzare il “cancellino”. Il primo “disegna” (cancella) i dati direttamente nella BitmapData, sfruttando il metodo fillRect() – si può usare anche setPixel() per esempio. Il secondo metodo, quello che preferisco, sfrutta i metodi di fusioni (blendMode).

Prima di tutto vediamo che tipo di organizzazione minimale è necessaria per realizzare un semplice Painter in Flash. Lo schema presentato qui sotto vale per entrambe le proposte del “cancellino”:

schema-bitmap

Ho creato tre layer: il primo, MovieClip o Sprite, funziona da sfondo e gestore eventi (MouseDown, MouseMove e MouseUp). Il secondo, la Bitmap, è il nostro layer principale, quello che conterrà effettivamente la grafica disegnata e su cui sarà applicata la funzione “cancellino”. Il terzo e ultimo layer, lo Shape, risolve due questioni: la prima è che permette di utilizzare direttamente le funzioni messe a disposizione dal puntatore graphics (come lineStyle, drawRect(), ecc…). Inoltre aumenta le performance durante il tracciamento grafico, come spiegato in dettaglio più sotto.

Continua...

Paint-o-matic

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:

Loading Flash Player...

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

Painting Flash CS3: effetti con le matrici Matrix

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

Creare un tasto fotorealistico con Photoshop

wg1

Tasto fotorealistico con Photoshop Oggi sono in vena di consigli grafici! Vedremo, infatti, passo passo, come realizzare un tasto (di una tastiera) fotorealistico con Photoshop.

Continua...

Google Maps component per Flash

AFComponents UMAP

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!

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

I nuovi strumenti di Adobe Photoshop CS3 Extended

Adobe Photoshop CS3 Extended

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:

image

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

Migliora bordo

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:

Migliora bordo

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

Flash CS3: la nuova gestione degli eventi

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:

1
2
3
4
// Events
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.events.Event;

Continua...

Flash CS3: TextField.appendText()

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

Flash CS3: comunicazione con un Web Server

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



Stop SOPA