アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » DEVELOPER STAGE » 特集 » プログラマのためのFlash遊び方 » 第2回 お絵かきしながら学ぶActionScript 3.0(前編)

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

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

今回からは,実践的な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/

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

使ってみよう! Windows Live SDK/API

Windows Liveサービスの一部にはAPIやSDKとして提供されているものがあります。本連載では各API・SDKの紹介とそれらを利用したアプリケーションを開発していきます。

Lifelog~毎日保存したログから見えてくる個性

コンピュータを使って,日常のさまざまなことの記録(ログ)をとり,それを分析して活用することで,もう一段階上の「楽な生活」をめざす日々の研究報告です。

もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

本連載では,実践サンプルとともに,jQueryを上手に活用してサイト制作の品質向上・効率化を実現するための実践テクニックを解説します。

Ruby Freaks Lounge

Rubyに関わる,執筆者自身の旬なテーマを扱った,リレー形式の連載です。

これでできる! クロスブラウザJavaScript入門

JavaScriptはウェブ制作において避けては通れない重要な言語ですが,JavaScriptに苦手意識を持たれている方は少なくないようです。 その最大の原因がクロスブラウザ対応という課題であり,本連載ではクロスブラウザ対応のテクニックを詳細に解説します。

ビジネスで成功するためのシステム運用管理のポイント

システムの多様化,技術進歩に伴い,ITシステムの運用管理の必要性が年々高まっています。本連載では,システムの運用管理とは何かについて,現場のニーズと具体的な指針を押さえながらを解説します。

2010年版SEO体得講座

本連載では,いまや企業サイトの戦略の1つとして欠かすことのできないSEOについて,最新トレンドからすぐに使えるTipsまでを紹介します。

小型Linuxサーバの最高峰 OpenBlockS 600活用指南

搭載メモリの増加,CPUクロックの向上など,あらゆる面が強化された期待の新モデルOpenBlockS 600。この記事ではOpenBlockS 600の紹介から,活用するためのさまざまなノウハウを紹介していきます。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス