Graphics関係に手を出してみる

さて、ナニやろうかな

　Flash(ActionScript3.0)リファレンス / パッケージ / トップ・flashの部分はかなり理解できてきた。
　とりあえず、media、net、printingあたりは当分使いそうな気がしないので置いておくとして、グラフィック系はやっておきたい。
　Bitmapはそれだけでまたかなり大変そうなので、Graphicオブジェクトをやってみる。

　コンポーネントの作り方が、未だに良く判らないので逃避だ。
　ちなみに、　[コンポーネント定義...]-[編集するフレーム]に入れる数字の意味が分からなかったので、Adobeのサポートにメールしてみた。
　んで、以下のような回答を貰った。

フレームを指定することで、そのコンポーネントの利用者が
Flash CS3 Professionalでコンポーネントの編集モードに
入った際に自動的にその指定フレームを
表示するようになります。

　…しょーもね。
　なぜ、この程度のことがヘルプに載ってないのかも、かなり疑問。

　あ、そうそうF-siteの5月のセミナーに行ってきました。
　今回は先生方の話を聞いて酒飲んでくるだけでしたが、壇上に立てるように頑張ります。

本日の成果

　フキダシを色々作ってみました。

Graphic

　で、ActionScriptで絵を描くにあたり基本になるのはGraphicsオブジェクトだ。
　これが、どんなやつかというと、TextFieldでいうところのTextFormatみたいな感じのオブジェクトで、コンテナになっているオブジェクトのプロパティとして参照がぶら下がっていて、そいつを書き換えることで親の方の属性を変えたような感じになる。

　大雑把に言って、幾つかのオブジェクトで使うプロパティやメソッドの塊があるんで、そいつをオブジェクトそのものに設定するんじゃなくて、別オブジェクトに分離しておくことで使い回しちゃいましょうというもの。
　継承とかインタフェースとかじゃダメなのという気もしてくるが、インタフェースだと結局各オブジェクトで実装することになるし、ActionScript3.0は多重継承を許していないので、この方法という訳だろう。
　オブジェクト指向用語的にいうと、コンポジションにあたる(…と思う)
　個人的には、オブジェクトをオブジェクトを組み立てる部品とするわけで、継承より分かりやすい気がする。
　単純にオブジェクトを作る時にクラスを使うのは当たり前にやっているが、プロパティとして外に出しているところが、ちょっと違うところ(…だと思う)
　でもActionScript3.0って値とオブジェクトの区別なくて全部オブジェクトだから、プロパティ全般がコンポジションってことになるな…。
　いやまて、コンポジションって基本的なプロパティの作り方のことを言うのか?そんな気がしてきた。
　うーむ、このへんのOOP用語、結構テキトーに使っていることに気づいた。ちゃんと勉強した方がいいなこりゃ。

　フォルダにファイルが含まれたりするのは、コンテナ-要素(element)関係。
　コンポジションはフォルダと情報(プロパティ)パネルの関係みたいな感じで1対1の関係。
　という理解でいいんかね、いいんですよね。うーむデザインパターンやUMLをまたやり直した方がいいなこりゃ。
　良く判らなくなってきた。ちょっと検索してみたけど、どのコンポジションの説明もピンとこないな。コード見てもそれがコンポジションだとしてコレはどーなの?みたいな感じで。Wikipediaの説明とか最悪だなぁ。理解できたら書き換えたい。
　そういや委譲(delegation)との違いも分からなくなってきたな…。あ、委譲はオブジェクトの種類が一定じゃないのか。そーかそーか。
　イベントも他のオブジェクトに仕事を放り投げるんだけど、ひとつのオブジェクトじゃなくて、複数のオブジェクトに放る(broadcast)ことができる。ネットワークのブロードキャストと用語被って分かりにくいな。えーと、ActionScript3.0だとディスパッチ(dispatchEvent)が使われてるな。ActionScriptの説明する時はディスパッチで行くか。
　ブロードキャストとリスナって組み合わせは分かりやすいんだけどな…、ディスパッチャとハンドラで行くほうがいいんかな。おいおいコンポーネントインスタンスからのイベントのブロードキャスト って、ヘルプじゃブロードキャストって書いてんのかよ。ヒデェな。
　もう完全に、自分向けのメモだなコレ。日記だから当然だけど。

使ってみる

　では早速(笑)Graphicsオブジェクトを使ってみよう。
　GraphicsオブジェクトはSpriteとShapeで設定されている。
　当然Spriteを継承しているオブジェクトでも使える。

　ShapeがSpriteより軽いのでそっち使おうと思ったが、メインタイムラインがMoveClipなんだから、そこに描けば良いじゃない。
　ちゅーとこでテスト。

graphics.drawRect( 100, 100, 200, 200 );

　あれ、表示されん。色の指定忘れてた。

graphics.beginFill( 0xffff00 );
graphics.drawRect( 100, 100, 200, 200 );

描画APIにはどんなのがあるのか

　で、とりあえずdrawRect()で四角を描いたんだけど、他にどんなのがあるかGraphicsオブジェクトを見てみる。
beginBitmapFill()、beginFill()、beginGradientFill()、clear()、curveTo()、drawCircle()、drawEllipse()、drawRect()、drawRoundRect()、endFill()、lineGradientStyle()、lineStyle()、lineTo()、moveTo()、といったところ。
　円を描くメソッドがあるのは嬉しいが、扇型の図形は描けないという8bitBASIC以下の仕様に憤慨しない人がいようか!!
　ベジェ(curveTo())も2次しか用意してない。とほー。

　この中でbeginFill()、beginBitmapFill()、beginGradientFill()とlineStyle()、lineGradientStyle()、が初期値を設定するメソッドで、他のメソッドは、このへんで設定した値に従って描かれる。
　beginFill()とlineStyle()以外は滅多に使わないと思う。

　んで連続した線がlineTo()とcurveTo()で引かれ、endFill()かmoveTo()が実行されると線が閉じられて面になる。
　このとき、面が重なるところはXORで計算される。つまり、面の表示と非表示が交互に現れるということだ。
　この仕様が便利かどうかは微妙な感じもする。
　ちなみに、こうやって描いた図形をmaskに指定した場合XORで重ねて透明になった部分も、マスク的には透明とは見なされず、マスクとして扱われる。
　この仕様、便利じゃねぇよ。直感に反してるよ。

無理くり3次ベジェ

　BezierSegmentってやつを使うと3次のベジェの座標が得られる。
　これ作っといて描画メソッドに3次ベジェがないとか、いじめか!!ユーザいじめか!!
　とりあえず、一番簡単な、適当に分割して直線で結んでみる方式でやってみる。

import fl.motion.BezierSegment;

var bs:BezierSegment = new BezierSegment( new Point( 100, 100 ), new Point( 120, 100 ),  new Point( 200, 150 ),  new Point( 200, 200 ) );

graphics.lineStyle( 1 );
graphics.moveTo( 100, 100 );
for ( var i:Number = 0; 1 > i; i += 0.1 ) {
	var p:Point = bs.getValue( i );
	graphics.lineTo( p.x, p.y );
}

　てな感じで、ベジェってみたぜっ!

　Σc ' _' )　　< まぁ…ベジェだな
　$ σ_σ$　　< ええ、ベジェね

　今日はここまで。

2008-06-02