Tutorials » Sviluppo » Grafica & Design » Flash CS3 » Actionscript 3.0

Painting Flash CS3: effetti con le matrici Matrix

venerdì 8 febbraio, 2008

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 è:

PLAIN TEXT
Actionscript:
  1. import flash.events.MouseEvent;
  2. import flash.geom.Matrix;
  3. //
  4. // flag per il detect del mousedown
  5. var md:Boolean = false;
  6. //
  7. // creo una lavagna front
  8. var lvg1:Sprite = new Sprite();
  9. lvg1.graphics.lineStyle(0,0xffffff);
  10. lvg1.graphics.beginFill(0x666666);
  11. lvg1.graphics.drawRect(0,0,199,199);
  12. lvg1.graphics.endFill();
  13. addChild(lvg1);
  14. lvg1.x = lvg1.y = 30;
  15. //
  16. // creo la lavagna inclinata
  17. var lvg2:Sprite = new Sprite();
  18. lvg2.graphics.lineStyle(0,0xffffff);
  19. lvg2.graphics.beginFill(0x666666);
  20. lvg2.graphics.drawRect(0,0,199,199);
  21. lvg2.graphics.endFill();
  22. addChild(lvg2);
  23. //
  24. // creo ed imposto una matrice per l'inclinazione della
  25. // lavagna lvg2
  26. var myMatrix:Matrix = new Matrix();
  27. // inclino si -25 gradi
  28. var angle:Number = Math.PI * 2 * -25 / 360;
  29. // traslo
  30. myMatrix.tx = 300;
  31. myMatrix.ty = 100;
  32. myMatrix.b = Math.tan(angle);
  33. lvg2.transform.matrix = myMatrix;
  34. //
  35. // paint event
  36. lvg1.addEventListener (MouseEvent.MOUSE_DOWN, _onMouseDown);
  37. lvg1.addEventListener (MouseEvent.MOUSE_MOVE, _onMouseMove);
  38. lvg1.addEventListener (MouseEvent.MOUSE_UP, _onMouseUp);
  39. //
  40. function _onMouseDown (e:MouseEvent):void {
  41.     trace("_onMouseDown");
  42.     var c:uint = 0xffffff;
  43.     e.target.graphics.lineStyle (10,c,1);
  44.     lvg2.graphics.lineStyle (10,c,1);
  45.     e.target.graphics.moveTo (e.localX,e.localY);
  46.     lvg2.graphics.moveTo (e.localX,e.localY);
  47.     md = true;
  48. }
  49. //
  50. function _onMouseUp (e:MouseEvent):void {
  51.     md = false;
  52. }
  53. //
  54. function _onMouseMove (e:MouseEvent):void {
  55.     trace("_onMouseMove");
  56.     if (md)  {
  57.         e.target.graphics.lineTo (e.localX,e.localY);
  58.         lvg2.graphics.lineTo (e.localX,e.localY);
  59.     }
  60. }

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

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , , , , , , ,

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

  1. getAvatar 1.0
    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
[as][/as]           // Actionscript
[css][/css]         // CSS Style Sheet
[html][/html]       // HTML
[js][/js]           // Javascript
[objc][/objc]       // Objective-C
[php][/php]         // PHP
[sql][/sql]         // SQL