Paul Smith風マルチストライプ作成 | IT工房｜AI入門とWeb開発

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

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

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

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

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

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

import caurina.transitions.Tweener;

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

//コンストラクタ
public function MultiStripe()
    {
        TweenBox();
     }

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

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

//Paul Smith風ストライプ作成メソッド
   private  function TweenBox():void {
       var boxs:Array = new Array();
       // 四角形を複数作って配列に代入
       for(i = 0 ; i < 145 ; i++){
           boxs[i] = newBox(i);
        }           
        // 一番目の箱をトゥイーンさせる　プロパティ + 時間
          Tweener.addTween(boxs[0], {x: 450, time: 1.0});
        // 二番目の箱をトゥイーンさせるプロパティ + 時間 + イージング
          Tweener.addTween(boxs[1], {x: 430, time: 1.0, transition: 'easeOutBounce'});            
        //３番目以降のストライプを トゥイーンさせるプロパティ + 時間 + イージング + 遅延
          for(var j:uint =2 ; j <  boxs.length ; j++ ){
            Tweener.addTween(boxs[ j ], {
                  x: 433-3*j, time: 1.0, transition: 'easeOutBounce', delay: 0.5});
            }
        }

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

box.graphics.beginFill(0xffffff * Math.random());//塗りの指定
box.graphics.drawRect(0, 0, line, 20);//四角を描く
box.graphics.endFill();//描画終了

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

0xffffff * Math.random()

たったこれだけです。

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

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

// 四角形を作るためのメソッド
        private function newBox(i):Sprite
        {
            var box:Sprite = new Sprite();
            var line:uint;
            var color:uint;
            switch(i) {
                case 0 :
                    line = 50;
                    break;
                case 1:
                    line = 20;
                    break;
                default:
                    line = 3;   
            }
            box.graphics.beginFill(0xffffff * Math.random());
            box.graphics.drawRect(0, 0, line, 20);
            box.graphics.endFill();
            addChild(box);
            return box;
        }

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