DigiTechLog Dot Com » BitmapData http://digitechlog.com Adobe AIR、Flex、Flash、Java Tue, 08 Nov 2011 12:46:29 +0000 http://wordpress.org/?v=2.8 ja hourly 1 PotrAs: ２色のラスタ画像（BitmapData）からベクタ変換するActionScript 3ライブラリ http://digitechlog.com/2010/01/29/potras-convert-bitmap-data-vector-in-actionscript3.html http://digitechlog.com/2010/01/29/potras-convert-bitmap-data-vector-in-actionscript3.html#comments Thu, 28 Jan 2010 15:16:34 +0000 admin http://digitechlog.com/2010/01/29/potras-convert-bitmap-data-vector-in-actionscript3.html PotrAsとは、日本人で開発され、２色のラスタ画像（BitmapData?）からベクタ変換するPortraceをActionScript 3に移植したオープンソースライブラリです。GPLライセンスで発表されていました。

PotrAsを利用してBitmapDataから、ベクターによるシェイプを生成することができます。

プレゼン資料はリアルタイムで変換しながら表示しているので、CPU 消費量が少し高めです。あと、Mac でどう表示されるかが分からないのがちょっと不安です（アンチエイリアスがらみ）。

という問題もありそうです。

PotrAs-convert-bitmap-data-vector-in-actionscript3

新たなモーションタイポの可能性

Flash でモーションタイポするには、問題点がいろいろありました。デバイスフォントは回転・透過ができなくて表現力が低すぎるし、BitmapData に転写すると処理が煩雑になってしまいます。フォントを埋め込めば自由にできるのですが、日本語フォントは権利関係が難しいし、ファイルサイズも大きくなってしまいます。

それに対する解が、この PotrAs です。デバイスフォントを BitmapData に描画し、それをトレースしてベクタ変換します。アクロバティックですが、ローカルのフォントを使っているので権利関係も（たぶん）問題ありません。回転縮小アルファも自由自在。塗りや線のスタイルを少し変えるだけで文字の表情も変わります。また、あえて低い解像度でトレースすると、味のある見た目になります。上のスライドの１枚目がそれです。

新たなモーションタイポの表現が可能になる気がしています。みんな遊んでね。

関連情報：

以下より入手できます。

http://snippets.libspark.org/svn/as3/PotrAs/src/com/nitoyon/potras

参考資料の一つ：ラスタ→ベクタ変換する AS ライブラリ "PotrAs"

参考資料の２番目： String型の文字列をチラシ文字のような画像を作成

デモの四つがある：http://www.libspark.org/svn/as3/PotrAs/samples/potras/demo20070929/bin/

公式サイト：http://www.libspark.org/wiki/nitoyon/PotrAs

最後はそんなに関係ないですが、ActionScriptのノウハウをみんなで共有しよう＠Spark projectでSpark projectの紹介していくつか優秀のASプロジェクトも挙げているので、自分が興味あるものを見つけるかの知れないね。

Related Posts

]]> http://digitechlog.com/2010/01/29/potras-convert-bitmap-data-vector-in-actionscript3.html/feed 0 SWFフォーマット画像ファイルをローカルに保存とするAdobe AIRアプリケーション http://digitechlog.com/2009/01/16/the-tutorial-on-how-to-save-swf-file-from-an-image-bitmap-in-adobe-air.html http://digitechlog.com/2009/01/16/the-tutorial-on-how-to-save-swf-file-from-an-image-bitmap-in-adobe-air.html#comments Fri, 16 Jan 2009 13:25:42 +0000 admin http://digitechlog.com/2009/01/16/the-tutorial-on-how-to-save-swf-file-from-an-image-bitmap-in-adobe-air.html Adobe AIRアプリケーションにLoaderクラスを利用してロードされた画像ファイル、内部的に圧縮されたSWFファイルではなくて独自なフレームとして保存されます（そのような話について、正式なドキュメントとか資料はないようですが、誰か知ってるとぜひ教えていただきますね）。

BitmapDataをPNGやJPEGなどをエンコードして、loadBytesメソッドでLoaderにロードして、終わったらLoaderInfoクラスのbytesというプロパティでSWFに出力するようになります。そうする、SWFフォーマット画像ファイルをローカルに保存することをできました。注意しなければいけないのは、そのような操作はAdobe AIRだけです。ほかのウェブ系とかはいけないです。

下記はBitmapDataクラスからローカルswfファイルを生成／保存するメソッドです。

  1. /* create bitmap to be saved as an swf file */
  2.  var bd:BitmapData = new BitmapData(320,240);
  3.  /* capture application snapshot, this can be any other object */
  4.  bd.draw( Application.application as IBitmapDrawable );

作ったビットマップファイルをPNGやJPEGなどバーチャルファイルにエンコード処理を必要となります。ここの「バーチャル」というのは、ByteArrayクラスを使ってメモリ中に格納とすることです。サンプル中にはmx.graphics.codec.PNGEncoderを利用してバーチャルファイルを作成とします。

  1. /* create virtual png file */
  2.  var png:ByteArray = ( new PNGEncoder() ).encode( bd );

最後はLoaderクラスでバーチャルファイルをロードします。下記のようなソースでロードを終了するとsaveContentToSWFメソッドが実行されます。

  1. /* load virtual png image */
  2.  var l:Loader = new Loader();
  3.  l.contentLoaderInfo.addEventListener( Event.COMPLETE, saveContentToSWF );
  4.  l.loadBytes( png );

以下はsaveContentToSWFメソッドソース：

  1. function saveContentToSWF( event : Event ):void
  2. {
  3.  /* create output file on desktop */ 
  4.  var file:File = File.desktopDirectory.resolvePath('out.swf');
  5.  var fs:FileStream = new FileStream(); fs.open( file, FileMode.WRITE );
  6.  
  7.  /* pull out SWF bytes from Loader */ 
  8.  fs.writeBytes( (evt.target as LoaderInfo).bytes );
  9.  
  10.  fs.close();
  11. }

上記のメソッドは圧縮してないswfファイルが生成されます。実際運用するとき、圧縮しないとサイズが大きいですから、圧縮処理を必要です。以下は圧縮機能を付けって保存メソッドです。

  1. function saveContentToSWF_compress( event : Event ):void
  2. {
  3.  var file:File = File.desktopDirectory.resolvePath('out_c.swf');
  4.  var fs:FileStream = new FileStream();
  5.  fs.open( file, FileMode.WRITE );        
  6.  
  7.  /* compressed file header */
  8.  var swf_head : ByteArray = new ByteArray();
  9.  swf_head.endian = Endian.LITTLE_ENDIAN;
  10.  swf_head.writeBytes( (evt.target as LoaderInfo).bytes, 0, 8 );
  11.  swf_head[0] = 0x43; // 'C' letter, indicates that file is compressed
  12.  swf_head.position = 0;
  13.  
  14.  /* compressed file body */
  15.  var swf_body : ByteArray = new ByteArray();
  16.  swf_body.endian = Endian.LITTLE_ENDIAN;
  17.  swf_body.writeBytes( (evt.target as LoaderInfo).bytes, 8 );
  18.  swf_body.position = 0;
  19.  swf_body.compress();
  20.  swf_body.position = 0;        
  21.  /* write it down to file */
  22.  fs.writeBytes( swf_head );
  23.  fs.writeBytes( swf_body );
  24.  fs.close();        
  25. };

リソース：

http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=9364&productId=2&loc=en_US

Related Posts

]]> http://digitechlog.com/2009/01/16/the-tutorial-on-how-to-save-swf-file-from-an-image-bitmap-in-adobe-air.html/feed 0