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

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

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

表示オブジェクトの初期化

initComponents()は表示オブジェクトを初期化するメソッドです。Flashの表示開始時に,コンストラクタから呼ばれます。

初期化が完了すると,表示オブジェクトの階層は次のようになります。

画像

initComponents()メソッドでは,LogoGeneratorオブジェクトの子どもの6つの表示オブジェクトを順番に作成していきます。内容に応じた初期化処理を行い,addChild()メソッドを利用して表示オブジェクトの階層を構築します。

それぞれの表示オブジェクトを順番に見ていきましょう。

テキスト入力欄(inputText)

文字列を入力するTextFieldクラスのオブジェクトです。

TextFieldクラスのtypeプロパティに"input"を指定することで,編集可能な文字列となります。

inputText = new TextField();
inputText.border = true;
inputText.type = "input";

反射効果(reflection)

床に反射したような効果を表示するBitmapオブジェクトです。

initComponents()メソッドではインスタンスの作成のみを行っています。実際の描画はupdateReflection()メソッドで行っています。

プレビュー表示(preview)

この表示オブジェクト自体は何も表示しませんが,子の表示オブジェクトとして,⁠プレビュー文字」⁠明るくするハイライト」⁠BETAのバッジ」の3つを格納しています。

// プレビュー用の Sprite を生成
preview = new Sprite();
preview.y = 50;

...

preview.addChild(previewText);
preview.addChild(hilight);
preview.addChild(badge);

3つの表示オブジェクトを格納しているのは,反射効果を描画するときに,まとめてBitmapDataに描画する必要があるからです。詳しくは後述します。

プレビュー文字(previewText)

テキスト入力欄に入力された文字を,大きく青色で表示するTextFieldオブジェクトです。

defaultTextFormatプロパティを指定して,文字のサイズと色を変更しています。

var tf:TextFormat = new TextFormat();  // TextFormat オブジェクトを作成
tf.size = 48;                          // 文字サイズを 48px に変更
tf.color = 0x3292d8;                   // 色を #3292d8 (青色) に変更
previewText.defaultTextFormat = tf;    // TextFormat を指定

明るくするハイライト(hilight)

文字の上側半分を明るい色にしているのがこの表示オブジェクトです。

半透明の白い図形を文字の上に重ねることで,文字の一部分が明るく見えます。

hilight = new Sprite();
hilight.graphics.beginFill(0xffffff, 0.3);
hilight.graphics.drawRect(0, 0, 10, 10);
hilight.graphics.drawEllipse(0, 3, 10, 10);
hilight.graphics.endFill();

円と四角を重ねて描画しています。重なった部分は塗りがなくなります。そのため,のように,四角の下半分が円状にくり抜かれます。

画像

update()メソッドでは,この表示オブジェクトを文字のサイズに合わせて拡大しています。

BETAのバッジ(badge)

文字の横に表示されるBETAのバッジです。

バッジの描画は複雑なので,Web2Badgeクラスを別途定義して,そちらで処理を行っています。initComponents()メソッドでは,Web2Badgeクラスのインスタンスを作成しています。

badge = new Web2Badge();
badge.y = 10;
...
preview.addChild(badge);

Web2Badgeクラスの実装は第3回のものとほとんど同じです。ただし,第3回ではSpriteオブジェクトを作成して,そこに描画していましたが,今回はWeb2Badgeオブジェクトに直接描画しています。

著者プロフィール

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

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

URLhttp://tech.nitoyon.com/