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:

Loading Flash Player...

Il codice per questo giochino è:

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

Un commento a: “Painting Flash CS3: effetti con le matrici Matrix”

  1. 15 apr, 2008 Paint-o-matic | Undolog.com:

    [...] Painting Flash CS3: effetti con le matrici Matrix Creare un’applicazione Paint in Flash [...]

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE:
<pre></pre> // blocco generico
					<code></code> // blocco generico
					[cc_actionscript][/cc_actionscript] // Actionscript
					[cc_actionscript3][/cc_actionscript3] // Actionscript 3
					[cc_css][/cc_css] // CSS Style Sheet
					[cc_html][/cc_html] // HTML
					[cc_js][/cc_js] // Javascript
					[cc_objc][/cc_objc] // Objective-C
					[cc_php][/cc_objc] // PHP
					[cc_sql][/cc_sql] // SQL


Stop SOPA