Painting Flash CS3: effetti con le matrici Matrix
Venerdì 8 Febbraio, 2008Giocherellando 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:
Il codice per questo giochino è:
-
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();
-
addChild(lvg2);
-
//
-
// creo ed imposto una matrice per l'inclinazione della
-
// lavagna lvg2
-
var myMatrix:Matrix = new Matrix();
-
// inclino si -25 gradi
-
var angle:Number = Math.PI * 2 * -25 / 360;
-
// traslo
-
myMatrix.tx = 300;
-
myMatrix.ty = 100;
-
myMatrix.b = Math.tan(angle);
-
lvg2.transform.matrix = myMatrix;
-
//
-
// 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);
-
}
-
}
Da notare, righe 30 e 31, che il secondo Sprite (lvg2) è traslato usando la Matrix e non via x e y.
Inoltre, righe 46 e 58, le funzioni di disegno sullo Sprite inclinato mantengono la stessa forma di quelle dello Sprite frontale (lvg1).
- in caso di vincita una piccola donazione...
Questa tecnica poi non la conoscevo ed è veramente una...
Paint-o-matic | Undolog.com ha detto:
[...] Painting Flash CS3: effetti con le matrici Matrix Creare un’applicazione Paint in Flash [...]