Categoria ‘Grafica & Design’


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

Adobe AIR: l’incompreso

Adobe AIRAlcuni, e non a torto, discutono sull’utilità di Adobe AIR, Adobe Integrated Runtime (ex Apollo) proposto da Adobe. Di che stiamo parlando? Dopo tutto AIR è ancora una beta (l’ultima release è del 12/12/2007 – la beta 3) e il suo successo, vedremo se compreso o meno, dipende da molti fattori.

Continua...

Actionscript Flash contest: erase tool

Premetto subito: non si vince nulla! A parte l’orgoglio – caso mai – di aver risolto il problema.

QUEST – DOMANDA

Come si realizza un tool per cancellare, eliminare, ripulire, una “porzione” della grafica disegnata con le API di Actionscript 3.0?

Con Actionscript 3.0 alcuni oggetti visivi, come i MovieClip o gli Shape, espongono la proprietà graphics, un puntatore ad un altro oggetto che “serve” tutte le funzioni grafiche di disegno runtime. Ad esempio è possibile sviluppare una semplice applicazione di disegno. Questo oggetto graphics permette di disegnare qualsiasi cosa, ad esempio su un oggetto Shape, in modo semplice e rapido. Il problema è che una volta disegnato qualcosa è possibile ripulire tutto ma non una singola parte.

Disegnare una linea è facilissimo:

1
2
3
4
5
6
var myShape:Shape = new Shape();
addChild(myShape);
//
myShape.graphics.lineStyle(2,0xff0000,1);
myShape.graphics.moveTo(0,0);
myShape.graphics.lineTo(100,100);

Disegnato qualcosa è possibile ripulire tutto con la semplice chiamata al metodo clear():

1
myShape.graphics.clear();

Ma se voglio “cancellare” solo un punto? Oppure dalle coordinate 50,50 a 100,100?

Cercando su Internet ho trovato numerosi esempi di “applicazioni di disegno” e, in effetti, nessuna supporta o propone lo strumento “cancella”.

Avete qualche soluzione?

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

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

Restyling e Rebloging

Pensieri Sottili

Con il nuovo anno è sempre piacevole rinfrescare gli ambienti, anche quelli virtuali dei Blog. Ho rivisto lo sfondo grafico di Undolog.com, che ora è estremamente più armonico.

Più complesso è stato spostare Pensieri Sottili da Blogger a WordPress! Ma alla fine il risultato è stato davvero gratificante!

Continua...

Wacom: editing grafico con le tavolette-display 2.0

CintiQ

Una rivoluzione, finalmente, nel campo dell’editing grafico. Wacom presenta un’interessante soluzione che fonde una tavoletta grafica con un sistema touch-screen. Avendo anch’io una tavoletta Wacom, che ormai uso quotidianamente al posto del mosue, apprezzo moltissimo questo passo avanti (la prossima spesa che farò ;) ). Attualmente io uso una Intuos3 formato A5, perfettamente integrata sia in Windows Vista che nei software di sviluppo che uso, come Adobe Photoshop CS3 e Flash CS3. Spesso mi è capitato anche di usarla semplicemente per scrivere una mail, grazie al software di riconoscimento della calligrafia presente in Windows Vista:

Riconoscimento calligrafico

La nuova serie CintiQ, Interactive Pen Display, si presenta con caratteristiche davvero interessanti:


1.024 livelli di sensibilità alla pressione

Sensibilità all’inclinazione
Inclinate il dispositivo di immissione dati in qualsiasi direzione per creare tratti di penna, pennello e gomma dall’effetto naturale.

Riconoscimento della rotazione
Alcuni dispositivi di immissione dati, ad esempio il nuovo Art Marker, sono ruotabili attorno al proprio asse: grazie al riconoscimento della rotazione, il Cintiq è in grado di rilevare questa rotazione e, nelle applicazioni appropriate (ad esempio in Painter 9) di trasformarla in pennellata ruotante.

Tool ID
Con il Tool ID (ID strumento) è possibile programmare e configurare individualmente ogni dispositivo di immissione input Cintiq per qualsiasi software. Le impostazioni memorizzate vengono attivate automaticamente nel momento in cui viene avviato il software.

ExpressKeys
Gli ExpressKeys sono una serie di tasti disposti lungo il lato sinistro e il lato destro della superficie attiva. Potete assegnare agli ExpressKeys le vostre combinazioni di tasti o macro preferite, dopodiché potrete dimenticare la tastiera.

Touch Strip
Con la nuova Touch Strip è possibile eseguire operazioni spostando il dito direttamente sulla tavoletta, come sul touchpad di un computer notebook: ad esempio ingrandire e ridurre le dimensioni delle immagini oppure scorrere documenti o editor PDF spostando semplicemente il dito.

Gomma
Correggere gli errori non è mai stato così facile: basta capovolgere la penna e cancellare!

Senza cavo né batteria
Tutti i dispositivi di immissione dati funzionano senza cavo e senza batteria: la necessaria alimentazione viene fornita dalla tavoletta.

Installazione Plug & Play
Il sistema Cintiq si installa facilmente e rapidamente ed è compatibile con tutte le vostre applicazioni software.

Tecnologia della penna Wacom
La tecnologia delle penne senza cavo e senza batteria sinonimo di un prodotto affidabile e di alta qualità, che richiede un assoluto minimo di manutenzione. Il tecnologia garantisce un alto livello qualitativo dei prodotti dell’azienda leader nel settore delle soluzioni di immissione dati basate su penna.

Wacom CintiQ

Questa soluzione potrebbe rappresentare il futuro dell’interazione tra uomo e PC, un fantastico ibrido tra un touchscreen e una tavoletta, che segue la direzione giusta a vantaggio dell’usabilità e accessibilità. L’era del mouse è davvero al tramonto?

Continua...



Stop SOPA