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.

LA TEORIA

L'artifizio che possiamo usare è il seguente: leggiamo i dati contenuti in una Bitmap pixel per pixel, li trasformiamo in valori esadecimali e li inviamo in POST ad una pagina PHP (in questo esempio sfruttiamo PHP e la GD Library per creare effettivamente l'immagine, ma altre soluzioni sono ugualmente efficaci).

Diciamo subito che l'unico neo di questa tecnica è l'estrema lentezza, almeno con Bitmap abbastanza grandi (io ho provato con una Bitmap 640 x 300)!

Inoltre, come vedrete nel codice Actionscript, non è possibile controllare il progress dell'invio, ma solo ottenere l'evento del completamento di tutto il lavoro; Actionscript + PHP.

LA PRATICA

Data una Bitmap l'algoritmo da usare può essere il seguente:

Actionscript:
  1. /**
  2. ** @prototype   : 0.0.1
  3. ** @author      : =undo=
  4. ** @email       : g.fazioli@undolog.com
  5. ** @web         : http://www.undolog.com
  6. **
  7. ** @params      :
  8. **
  9. ** __bitmap     : puntatore alla nostra bitmap
  10. ** __width      : larghezza in pixel
  11. ** __height     : altezza in pixel
  12. **
  13. */
  14.  
  15. // copia per la lettura - questo potrebbe essere evitato
  16. var sbmp:BitmapData = new BitmapData(__width, __height);
  17. sbmp.draw ( __bitmap );
  18. //
  19. var pixels:Array = new Array();
  20. for (var xx:uint = 0; xx <= __width; xx++) {
  21.     for (var yy:uint = 0; yy <= __height; yy++) {
  22.         pixels.push( sbmp.getPixel32(xx, yy).toString(16) );
  23.     }
  24. }
  25. //
  26. var urlreq:URLRequest     = new URLRequest( "http://miodominio.com/savebitmap.php" );
  27. var urlpar:URLVariables    = new URLVariables();
  28. var urlldr:URLLoader    = new URLLoader();
  29. //
  30. urlldr.addEventListener( Event.COMPLETE,
  31.     function (e:Event):void {
  32.         trace( ' Completato' );
  33.     }
  34. );
  35. //
  36. urlpar.pixels = pixels.toString();
  37. urlpar.height = __height;
  38. urlpar.width = __width;
  39. urlreq.data = urlpar;
  40. urlreq.method = URLRequestMethod.POST;
  41. urlldr.load( urlreq );

Come codice PHP possiamo usare:

PHP:
  1. /**
  2. ** @prototype   : 0.0.1
  3. ** @author      : =undo=
  4. ** @email       : g.fazioli@undolog.com
  5. ** @web         : http://www.undolog.com
  6. **
  7. ** @params      :
  8. **
  9. ** __bitmap     : puntatore alla nostra bitmap
  10. ** __width      : larghezza in pixel
  11. ** __height     : altezza in pixel
  12. **
  13. */
  14. // $pixels diventa un array con i valori dei singoli pixel
  15. $pixels = explode(",", $_POST['pixels']);
  16. $width = $_POST['width'];
  17. $height = $_POST['height'];
  18. // creo l'immagine - @evitando di emettere errori
  19. $image = @imagecreatetruecolor( $width ,$height );
  20. // Scrivo i pixel per tutta la lunghezza e altezza
  21. $index = 0;
  22. for($x=0; $x<=$width; $x++){
  23.     for($y=0; $y<=$height; $y++){
  24.         $r = hexdec("0x".substr( $pixels[$index] , 2 , 2 ));
  25.         $g = hexdec("0x".substr( $pixels[$index] , 4 , 2 ));
  26.         $b = hexdec("0x".substr( $pixels[$index] , 6 , 2 ));
  27.         $color = imagecolorallocate($image, $r, $g, $b);
  28.         imagesetpixel ($image,$x,$y,$color);
  29.         $index++;
  30.     }
  31. }
  32. // scrivo immagine (in JPG - ma potete usare un diverso formato) sul disco/server
  33. imagejpeg( $image, "immagine.jpg" );
  34. imagedestroy( $image ); // libero tutto

Torneremo prossimamente sull'argomento proponendo anche altre soluzioni... ;)

Riferimenti e webgrafia:

Post correlati

2 commenti a: “Come salvare immagini in Flash CS3”

  1. getAvatar 1.0 mercoledì 08 ottobre, 2008 alle 03:48
    werutzb ha detto:

    Hi!

    I would like make better my SQL capabilities.
    I red really many SQL books and would like to
    read more about SQL for my occupation as mysql database manager.

    What would you recommend?

    Thanks,
    Werutz

  2. getAvatar 1.0 martedì 13 gennaio, 2009 alle 02:35
    Abramovicl ha detto:

    Hi , i have some questions about you desing
    maybe you can give designer contacts?

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>

Usa <pre> per racchiudere codice