FrocessingではじめるActionScriptドローイング

第1回 はじめてのFrocessing

この記事を読むのに必要な時間:およそ 4.5 分

FlexSDKでコンパイルする

サンプルコードのファイルを作成するとディレクトリが図5のような状態になっていると思います。

図5 ライブラリとサンプルコード

図5 ライブラリとサンプルコード

FlexSDKを利用する場合は,コマンドラインツールでコンパイルを行うので,まずはプログラムのあるディレクトリに移動します。

cd C:\test\

ここで以下のコマンドを実行します。

mxmlc FrocessingSample.as

問題なければサンプルコードがコンパイルされ「FrocessingSample.swf」が生成されます。このSWFファイルをブラウザにドラッグ&ドロップすることで実行結果を確認できます。

FlashCS4(CS3)でコンパイルする

サンプルコードのパブリッシュ

FlashCS4(CS3)でコンパイルする場合には,新しくflaファイルを作成します図6)⁠

図6 flaファイルの作成

図6 flaファイルの作成

次にflaファイルのドキュメントクラスにサンプルコードを指定します。このときステージサイズやフレームレートも設定しておきます図7)⁠

図7 ドキュメントクラスと各種設定

図7 ドキュメントクラスと各種設定

ここでメニューから「制御→ムービープレビュー(Ctrl+Enter)⁠を選択するとSWFファイルが生成され,同時に実行結果を見ることができます。

フレームスクリプトに書く

FlashCS4(CS3)で制作する場合には,フレームスクリプトに直接プログラムを書くこともできます。今回のサンプルコードを例に手順をみていきましょう。

新しくflaファイルを作成し,ドキュメントクラスに「frocessing.display.F5MovieClip2DBmp」を指定します。これはサンプルコードで記述したクラス(FrocessingSample)のスーパークラスにあたります。ステージサイズやフレームレートも設定しておきます図8)⁠

図8 ドキュメントクラスと各種設定

図8 ドキュメントクラスと各種設定

次に先頭のフレームを右クリックし「アクション」を選択して「アクション-フレーム」ウインドウを開きます。このウインドウに記述されるプログラムをフレームスクリプトといいます。フレームスクリプトではクラスの定義などを行わずに,変数や関数だけを書くことになります。サンプルをフレームスクリプトで記述すると以下のようになります。

リスト5 フレームスクリプトサンプル

var stage_width:Number;
var stage_height:Number;
var n:int;
var t:Number;

function setup():void {
  stage_width = 465;
  stage_height = 465;
  n = 5;
  t = 0;
  size( stage_width, stage_height );
  background( 0 );
  noFill();
  stroke( 255, 0.1 );
}

function draw():void {
  if ( isMousePressed )
    background( 0, 1 );
  
  translate( 0, stage_height / 2 );
  beginShape();
  curveVertex( -100, 0 );
  for ( var i:int=0; i <= n; i++ ){
    var xx:Number = i * stage_width / n;
    var yy:Number = noise( i * 0.25, t ) * 300 - 150;
    curveVertex( xx, yy );
  }
  curveVertex( stage_width+100, 0 );
  endShape();
  t+=0.01;
}

ここでムービープレビュー(Ctrl+Enter)を実行すれば,SWFが生成され実行結果を見ることができます。この方法であれば別途クラスファイルを作成する必要がなく,より手軽にグラフィック描画のプログラムを試すことができます。

著者プロフィール

高輪知明(たかなわともあき)

デザイナー/ディレクター。2008年初夏より「SparkProject」に参加し,今回紹介する「Frocessing」などをコミット。http://nutsu.comでマイペースに個人活動継続中。