解 説

mstrip.jpg

今回はActionScript3でFlash形式(swf)のものを作成してみました。
出来上がりは「ようこそ画面」のヘッダー部分のマルチストライプです。

[ソースサンプルはコチラです。]

[使用例サンプルはコチラです。]

ActionScript3はサンプルのように拡張子をasとします。エディッタはメモ帳などでOKです。問題はコンパイルが必要になります。通常はAdobe Flash professionalCS3以上かFlexを使用することになりますが、オール ActionScript3なら無料のFlashDevelopを使えばコストがかかりません。これは結構すぐれものですから手なずけておいた方が良いかもしれません。

FlashDevelopの導入、使用方法は[FlashDevelopのサイト]を参照ください。

さて、ソースの説明です。といって説明するほどのものでもないですね。
要点だけ。

今回Tweenerのライブラリを使用しています。
[ライブラリはこちらから]

ライブラリ入手後、caurinaフォルダを全てsrcフォルダ内にいれます。
これをインポートする文が以下となります。

ActionScript3のプログラム開始はコンストラクタからになりますので、Paul Smith風ストライプ作成メソッド TweenBox() をコンストラクタ内に入れます。TweenBox()だけだからメソッドにする必要もなくコンストラクタに全部入れてしまってもいいのかもしれません。

TweenBox()メソッドでは配列を作成してその中にnewBox(i)で作成した四角形を代入します。
1番先頭の四角形と2番目の四角形のみ大きさを変えています。この辺は好みに応じて変更してみるとよいと思います。
3番目以降は全て3ピクセルの幅にしています。

Tweenerについて例えば以下の場合
Tweener.addTween(mc, {x: 100, time: 0.5, transition: ‘easeOutExpo’});
ターゲットオブジェクトmcのx座標を0.5秒でeaseOutExpoという動きで、現在の値から100までトゥイーンさせることを意味しています。
[詳細はコチラ]

四角形作成のメソッドはnewBox(i)です。パラメータにTweenBox()で使用するiを指定しています。今回1番目と2番目の四角形に個性(大きさだけですが)を持たせるためのものです。
ActionScriptでは四角形は以下で描きます。

四角形の色をランダムに変化させる事は簡単です。

たったこれだけです。

表示リストに加えます。
addChild(box)
ActionScriptの表示リストの考え方は詳しく知っておいた方が良いと思いますので今度特集したいと思います。

最後にインスタンスboxを戻して終了です。

以上簡単なスクリプトでできますので工夫していいものを作成してみてはいかがでしょうか。