Painting Flash CS3: real time erase tool
Lunedì 11 Febbraio, 2008Partendo 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.
Il codice è il seguente - sorgente:
-
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()):
-
...
-
// 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:
-
....
-
erase_shape.graphics.lineTo (e.localX,e.localY);
-
bmp.bitmapData.draw (erase_shape,null,null,"erase");
L'IDE di 
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. 
- in caso di vincita una piccola donazione...
Questa tecnica poi non la conoscevo ed è veramente una...
