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








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