プログラマのためのFlash遊び方

第2回 お絵かきしながら学ぶActionScript 3.0(前編)

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

今回からは,実践的なFlash作りを始めていきます。ActionScriptで簡単な図形描画をしながらActionScript 3.0の感覚をつかんでいきましょう。

最初は地味なサンプルと退屈な文法の解説が続きますが,後編では次のようなWeb 2.0 風バッジをActionScriptだけで描画します。がんばってついてきてください。

Web 2.0 風バッジ

サンプルコードをコンパイルしよう

円や四角を描画するだけの簡単なサンプルを用意しました。味気ないサンプルですが,ActionScript 3.0の基本がたっぷり詰まっています。

package{                                      ------(1)
  import flash.display.Sprite;                ------(2)

  public class DrawTest1 extends Sprite {     ------(3)
    public function DrawTest1() {             ------(4)
      // 円を描く
      var s1:Sprite = new Sprite();          
      s1.graphics.lineStyle(1, 0xff0000);    
      s1.graphics.drawCircle(0, 0, 50);      
      s1.x = 100;                            
      s1.y = 100;                            
      addChild(s1);                          

      // 四角を描く
      var s2:Sprite = new Sprite();
      s2.graphics.lineStyle(1, 0x0000ff);
      s2.graphics.beginFill(0xffffff);
      s2.graphics.drawRect(0, 0, 50, 50);
      s2.graphics.endFill();
      s2.x = 150;
      s2.y = 50;
      addChild(s2);
    }
  }
}

DrawTest1.asとして保存して,コンパイルしてみてください。

mxmlc DrawTest1.as

次のようなFlashができあがります。

DrawTest1.swf

まずはこのソースコードをじっくり理解していきましょう。

オブジェクト指向に詳しくない方にとっては,聞きなれない単語がどんどん出てくると思います。よく分からなくても「ふーん」程度に読み飛ばして,遠慮せずに次のページに進んでください。クラスの意味が分からなくても,次のページで解説する描画処理さえ理解できれば,ActionScript 3.0で遊べます!

クラス定義を理解しよう

ソースコード冒頭では,DrawTest1クラスが所属するパッケージを宣言しています。(1)ではパッケージ名が指定されていないため,トップレベルのパッケージとなります。ソースコードの規模が大きくなってくると,クラスの種類ごとに別々のパッケージに分類すると便利です。

次のimport文(2)は,「flash.displayパッケージのSpriteクラスを利用する」と宣言しています。ActionScript 3.0には,最初からいくつものパッケージとクラスが用意されています。Flex3リファレンスガイドに一覧がありますす。沢山ありすぎて迷ってしまいそうですが,mxで始まるパッケージは基本的にFlexで利用するものですし,日常的に使うクラスは限られています。少しずつ覚えていきましょう。

DrawTest1 クラスの定義

(3)ではDrawTest1クラスを定義しています。

クラスの定義

クラス属性はdynamic,final,internal,publicの4つが利用できます。publicはパッケージの外部に対してクラスを公開することを意味します。その他の属性については「ActionScript 3.0のプログラミング」クラス属性をご覧ください。

次のextends Spriteは,DrawTest1クラスがSpriteクラスを継承することを宣言しています。SpriteクラスはFlashで表示を行うときに汎用的に用いられるクラスです。コンパイル対象のファイルで定義されたクラスは,Sprite クラスを継承している必要があります。

DrawTest1 クラスのメソッド

クラスには複数のメソッドを定義できます。メソッドの定義は次のような形で行います。

メソッドの定義

publicはクラス外部からも呼び出せることを意味します。publicの他に,internal,private,protectedなどのアクセス制御属性を指定できます。アクセス制御属性とあわせて,staticも指定できます。staticを指定すると,インスタンスではなくクラスに所属する静的なメソッドとなります。詳しくは「ActionScript 3.0のプログラミング」クラスプロパティの属性をご覧ください。

DrawTest1 クラスにはメソッドが1つだけ定義されています(4)。メソッド名はクラス名と同じ DrawTest1 です。このように,クラス名と同じ名前のメソッドはコンストラクタとして扱われます。コンストラクタはインスタンスの生成時に1度だけ呼ばれるメソッドです。

Flash表示時の処理

ここではFlashが表示される際に,どのような処理が行われるかを簡単に見ておきましょう。

  1. コンパイルしたファイルで定義されているクラスのインスタンスが生成される
  2. インスタンスがFlashのステージ上に配置される

今回はDrawTest1.asをコンパイルしたので,DrawTest1クラスのインスタンスが生成されます。つまり,Flashの表示時にDrawTest1クラスのコンストラクタが呼ばれます。プログラムのエントリポイントはDrawTest1クラスのコンストラクタであると言い換えてもよいでしょう。

コンストラクタが呼ばれたあと,DrawTest1のインスタンスがステージに配置されます。その結果として,コンストラクタで描画した内容が画面に表示されるわけです。

著者プロフィール

最田健一(さいたけんいち)

有限会社 CO-CONV勤務のプログラマ。京都在住の京都好き。趣味で ActionScript 3.0やFlex 2を触っていたら,いつの間にか仕事でも使うことになっていた。個人ブログは「てっく煮ブログ」。

URLhttp://tech.nitoyon.com/

コメント

コメントの記入