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

第7回 Flashでジェネレータを作ってみよう

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

さて,今回はいままでの集大成として,少し凝った Flash を作成します。いきなりですが,完成品をご覧いただきましょう。Web 2.0風ロゴジェネレータです。

テキスト欄の文字を編集してみてください。リアルタイムにロゴが更新されます。

ジェネレータといえば,ボタンを押して少し待ってから結果が表示されるものがほとんどですが,Flashの表現力を持ってすれば,リアルタイムに反映されるものが作れるのです。

コンパイルしよう

今回のソースコードは全体で200行近くあります。2つのファイルを同じフォルダにダウンロードしてください。

mxmlcを実行してコンパイルします。

mxmlc -default-background-color=0xffffff LogoGenerator.as

コンパイルオプションに-default-background-color=0xffffffをつけています。これはデフォルトの背景色を白色に設定するものです。今回のサンプルは,背景が白色であることを前提にしているため,このように指定しています。

コンパイルオプションでWeb2Badge.asを指定していませんが,LogoGenerator.asの中でWeb2Badgeクラスを参照しているため,Web2Badge.asも一緒にコンパイルされます。

ソースコードの全体を把握する

個別の部分を見てく前に、LogoGenerator.asの全体を把握しておきましょう。LogoGeneratorクラスが定義されています。

package {
    import ...

    // LogoGenerator クラス
    public class LogoGenerator extends Sprite {
        // インスタンス変数の宣言
        private var inputText:TextField;   // テキスト入力欄
        private var reflection:Bitmap;     // 反射効果
        private var preview:Sprite;        // プレビュー表示
        private var previewText:TextField; // プレビュー文字
        private var hilight:Sprite;        // 明るくするハイライト
        private var badge:Web2Badge;       // BETA のバッジ

        // コンストラクタ
        public function LogoGenerator():void {...}

        // 表示オブジェクトの初期化
        private function initComponents():void {...}

        // 表示を更新する
        private function update():void {...}

        // 反射を更新する
        private function updateReflection():void {...}
    }
}

このクラスは6個のインスタンス変数とコンストラクタ,3つのメソッドから成り立っています。

コンストラクタ

最初にコンストラクタの処理をざっと見ていきます。

// コンストラクタ
public function LogoGenerator():void {
    // 左上に固定して拡大縮小されないよう指定
    stage.scaleMode = "noScale";
    stage.align = "TL";

    // 各コンポーネントを初期化する
    initComponents();

    // 初回の描画を行う
    update();

    // イベント登録を行う
    inputText.addEventListener("change", function(event:Event):void {
        update();
    });
}

Flashは表示する中身が埋め込まれたときのサイズに収まるように,自動的に拡大縮小されます。これを防ぐために,最初にstageのscaleModeプロパティを"noScale"(拡大縮小しない),alignプロパティを"TL"(左上に配置)と設定しています。

次に,自分で定義したinitComponents()メソッドとupdate()メソッドを呼んで,表示の初期化を行っています。最後に,テキスト入力欄の内容が変更されたときにupdate()メソッドが呼ばれるようにイベント登録しています。

それでは,それぞれのメソッドの処理を見ていきましょう。

著者プロフィール

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

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

URLhttp://tech.nitoyon.com/

コメント

コメントの記入