Flash CS3: creare un effetto Reflex su qualsiasi MovieClip

Mercoledì 4 Giugno, 2008

Sfruttando una notevole caratteristica di Actionscript 3.0 (vedi Actionscript 3.0: tutto con l'operatore new) ho creato una classe ReflexMe in grado di generare un effetto "riflessione" su un qualsiasi MovieClip presente in libreria.

Loading Flash Player...

Il sorgente fa parte del pacchetto undolibrary - presente su GoogleCode - ma se volete potete scaricare il singolo file ReflexMe.as.

Continua a leggere... »

Post correlati

Tags: , , , , , , , , , , , ,
Pubblicato in Actionscript 3.0, Flash, Flash CS3, Internet, Sviluppo, Tutorials | 7 commenti »

Effetti sulle Bitmap con perlinNoise()

Lunedì 2 Giugno, 2008

La classe BitmapData permette di applicare in modo semplice effetti utilissimi per svariati scopi. Avevamo già visto come creare un effetto "nebbia tv" con poche righe di codice (Flash CS3: creare effetto nebbia TV in 1 secondo). Ora ci occuperemo di un altro effetto "spettacolare" che, come vedremo in seguito, permette di realizzare degli interessantissimi effetti grafici, come nell'esempio mostrato qui sotto: variate i parametri per osservare i differenti effetti, cliccando con il mouse sull'immagine generata questa può essere spostata.

Loading Flash Player...

Per l'occasione ho anche aggiunto un nuovo semplice componente (Check) in Undolibrary! Quindi aggiornate il vostro repository SVN. Il sorgente è disponibile qui: MapEffect.zip

Continua a leggere... »

Post correlati

Tags: , , , , ,
Pubblicato in Actionscript 3.0, Flash, Flash CS3, Grafica & Design, Internet, Sviluppo, Tutorials | Nessun commento »

Come salvare immagini in Flash CS3

Lunedì 31 Marzo, 2008

Con Flash CS3 l'uso delle Bitmap è così migliorato che viene subito voglia di creare un piccolo Paint. Abbiamo già visto come realizzare un piccolo Paint (vedi Creare un'applicazione Paint in Flash CS3 Painter: semplice applicazione per disegno in Flash CS3 Pro) in grado di supportare un vero e proprio "cancellino" - funzione erase, grazie ad un uso particolare di layer Shape e Bitmap. Diciamo subito che Flash (a differenza di Flex) non permette ne encoding (tipo JPG o PNG) ne salvataggio automatico di immagini Bitmap. Tuttavia si può aggirare l'ostacolo sfruttando uno scripting lato server e la capacità di Flash di inviare dati in POST. Continua a leggere... »

Post correlati

Tags: , , , , , , , , , ,
Pubblicato in Actionscript 3.0, Flash CS3, Internet, PHP, Sviluppo, Tutorials | 1 commento »

Flash CS3: creare effetto nebbia TV in 1 secondo

Giovedì 27 Marzo, 2008

Flash CS3 non finisce di stupire. Ecco come creare il classico effetto nebbia dei televisori in un secondo con 10 righe di codice.

Loading Flash Player...

PLAIN TEXT
Actionscript:
  1. import flash.display.Bitmap;
  2. import flash.display.BitmapData;
  3. //
  4. var bmpd:BitmapData = new BitmapData(320, 256);
  5. var bmp:Bitmap = new Bitmap(bmpd);
  6. //
  7. addChild(bmp);
  8. //
  9. bmp.addEventListener( Event.ENTER_FRAME,
  10.     function (e:Event):void {
  11.         bmpd.noise(Math.random()*1000, 0, 200, 7, true);
  12.     }
  13. );

Post correlati

Tags: , , , , , , , , , ,
Pubblicato in Actionscript 3.0, Case Study, Flash CS3, Grafica & Design, Internet, Sviluppo, Tutorials | 1 commento »

Painting Flash CS3: real time erase tool

Lunedì 11 Febbraio, 2008

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

Loading Flash Player...

Il codice è il seguente - sorgente:

PLAIN TEXT
Actionscript:
  1. import flash.events.MouseEvent;
  2. import flash.display.BitmapData;
  3. import flash.display.Bitmap;
  4. import flash.display.GradientType;
  5. //
  6. import flash.geom.Matrix;
  7. //
  8. var md:Boolean = false;
  9. //
  10. var event_spr:Sprite = new Sprite();
  11. addChild (event_spr);
  12. //
  13. var area_width:Number = event_spr.stage.stageWidth;
  14. var area_height:Number = event_spr.stage.stageHeight-32;
  15. //
  16. var fillType:String = GradientType.LINEAR;
  17. var colors:Array = [0xFF0000, 0x00FF00, 0x0000ff];
  18. var alphas:Array = [1, 1, 1];
  19. var ratios:Array = [0, 128, 255];
  20. var spreadMethod:String = SpreadMethod.PAD;
  21. var matrix:Matrix = new Matrix();
  22. matrix.createGradientBox (area_width, area_height, 1, 0, 0);
  23. //
  24. with (event_spr.graphics) {
  25.     beginGradientFill (fillType,colors,alphas,ratios,matrix,spreadMethod);
  26.     drawRect (0,0,area_width, area_height);
  27.     endFill ();
  28. }
  29. // paint event
  30. event_spr.addEventListener (MouseEvent.MOUSE_DOWN, _onMouseDown);
  31. event_spr.addEventListener (MouseEvent.MOUSE_MOVE, _onMouseMove);
  32. event_spr.addEventListener (MouseEvent.MOUSE_UP, _onMouseUp);
  33. event_spr.addEventListener (MouseEvent.MOUSE_OUT, _onMouseUp);
  34. //
  35. var bmpd:BitmapData = new BitmapData(event_spr.width,event_spr.height,true,0);
  36. var bmp:Bitmap = new Bitmap(bmpd);
  37. addChild (bmp);
  38. //
  39. // shape temporanea
  40. var draw_shape:Shape = new Shape();
  41. addChild (draw_shape);
  42. //
  43. // shape, non visibile, usata per la "cancellazione"
  44. var erase_shape:Shape = new Shape();
  45.  
  46. //
  47. function _onMouseDown (e:MouseEvent):void {
  48.     debug ("_onMouseDown");
  49.     draw_shape.graphics.lineStyle (10, 0xffffff, 1);
  50.     erase_shape.graphics.lineStyle (20, 0xffffff, 1);
  51.     draw_shape.graphics.moveTo (e.localX,e.localY);
  52.     erase_shape.graphics.moveTo (e.localX,e.localY);
  53.     md = true;
  54. }
  55. //
  56. function _onMouseUp (e:MouseEvent):void {
  57.     md = false;
  58.     bmp.bitmapData.draw (draw_shape);
  59.     draw_shape.graphics.clear ();
  60.     erase_shape.graphics.clear ();
  61. }
  62. //
  63. function _onMouseMove (e:MouseEvent):void {
  64.     debug ("_onMouseMove");
  65.     if (md && !e.ctrlKey) {
  66.         draw_shape.graphics.lineTo (e.localX,e.localY);
  67.     } else if (md && e.ctrlKey) {
  68.         erase_shape.graphics.lineTo (e.localX,e.localY);
  69.         bmp.bitmapData.draw (erase_shape,null,null,"erase");
  70.     }
  71. }
  72. //
  73. function debug (v:String):void {
  74.     var d:Date = new Date();
  75.     trace (d.getMinutes()+":"+d.getSeconds()+":"+d.getMilliseconds()+": "+v);
  76. }

È stata aggiunta una nuova Shape, erase_shape, non visibile (non è stato effettuato nessun addChild()):

PLAIN TEXT
Actionscript:
  1. ...
  2. // shape, non visibile, usata per la "cancellazione"
  3. 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:

PLAIN TEXT
Actionscript:
  1. ....
  2. erase_shape.graphics.lineTo (e.localX,e.localY);
  3. bmp.bitmapData.draw (erase_shape,null,null,"erase");

Post correlati

Tags: , , , , , , , , , , , ,
Pubblicato in Actionscript 3.0, Flash CS3, Grafica & Design, Internet, Sviluppo, Tutorials | Nessun commento »

Creare un’applicazione Paint in Flash CS3

Domenica 10 Febbraio, 2008

Come esposto in Actionscript Flash contest: erase tool non è possibile "cancellare" una particolare zona di uno Sprite, MovieClip o Shape su cui sono state tracciate linee o rettangoli tramite il puntatore graphics. Esiste, infatti, il solo metodo clear() che, tuttavia, ha effetto sull'intera area del nostro oggetto. La soluzione al problema risiede nella possibilità di usare gli oggetti Bitmap e BitmapData. Come vedremo possiamo accedere direttamente ai dati Bitmap e manipolarli in modo da "cancellare" i tratti con un vero e proprio strumento "cancellino".

Presenterò due metodi diversi per realizzare il "cancellino". Il primo "disegna" (cancella) i dati direttamente nella BitmapData, sfruttando il metodo fillRect() - si può usare anche setPixel() per esempio. Il secondo metodo, quello che preferisco, sfrutta i metodi di fusioni (blendMode).

Prima di tutto vediamo che tipo di organizzazione minimale è necessaria per realizzare un semplice Painter in Flash. Lo schema presentato qui sotto vale per entrambe le proposte del "cancellino":

schema-bitmap

Ho creato tre layer: il primo, MovieClip o Sprite, funziona da sfondo e gestore eventi (MouseDown, MouseMove e MouseUp). Il secondo, la Bitmap, è il nostro layer principale, quello che conterrà effettivamente la grafica disegnata e su cui sarà applicata la funzione "cancellino". Il terzo e ultimo layer, lo Shape, risolve due questioni: la prima è che permette di utilizzare direttamente le funzioni messe a disposizione dal puntatore graphics (come lineStyle, drawRect(), ecc...). Inoltre aumenta le performance durante il tracciamento grafico, come spiegato in dettaglio più sotto. Continua a leggere... »

Post correlati

Tags: , , , , , , , , , , , ,
Pubblicato in Actionscript 3.0, Flash CS3, Grafica & Design, Internet, Sviluppo, Tutorials | 2 commenti »