2011年9月アーカイブ

kyuu1.jpg

今回は前回まで作成した3Dの球体に画像を貼付けます。

まず、説明はいいからやり方を教えろという方向けの手順です。

  1. 前回までの方法で作成した3Dの球体のソースを用意します。
  2. 張り付ける画像sample.jpgをbinフォルダに用意します。
  3. BitmapFileMaterialクラスをインスタンス化します。
  4. Sphereクラスをインスタンス化する際の第1引数にnullではなく2でインスタンス化したオブジェクトを入れます。
    あとは前回と同じです。簡単ですね。

 

3D球体を描くソース

package 

{

    import org.papervision3d.objects.primitives.*;

    import org.papervision3d.view.*;

    import org.papervision3d.materials.*;



    public class Main extends BasicView

    {



        public function Main():void 

        {

            var sphere:Sphere = new Sphere(null,600,30,30);

            scene.addChild(sphere);

            startRendering();

        }



    }



}

3D球体に画像を貼るソース

package 

{

    import org.papervision3d.objects.primitives.*;

    import org.papervision3d.view.*;

    import org.papervision3d.materials.*;



    public class Main2 extends BasicView

    {



        public function Main2():void 

        {

            var mat:BitmapFileMaterial = new BitmapFileMaterial("sample.jpg");//ここが新たに加わります。

            var sphere:Sphere = new Sphere(mat,600,30,30);//第1引数に上でインスタンス化したオブジェクトを入れます。

            scene.addChild(sphere);

            startRendering();

        }



    }



}

ここから文法の説明です。

var mat:BitmapFileMaterial 

左側で変数matをBitmapFileMaterial 型で宣言しています。

new BitmapFileMaterial("sample.jpg") 

右側ではsample.jpgファイルを引数に入れてnew演算子でインスタンス化しています。 ここで注意するのは画像sample.jpgはbinフォルダに入れるようにしてください。 (インターネットで公開する場合はswfファイルと同じ場所でかつ、swfファイルを埋め込んだhtmlと同じ場所にする必要があります)

つまり画像ファイルはコンパイル前に読み込まれるのではなく、コンパイル後に外部ファイルとして読み込まれます。 ということは、この画像を変更することでいつでも好きな画像を読み込ませることが可能だということなのです。

それから、通常は外部画像を読み込む場合下記のようなめんどうな手続きが必要です。今回使用したライブラリにはすでに下記のような処理が用意されており、メソッドに貼付けたい画像を指定するだけで良い訳です。至れり尽くせりですね。興味のある方はBitmapFileMaterialクラスの内容を確認してみると良いかもしれません。Loadの手続きが書かれているはずです。

<参考>Loaderクラス〜外部の画像ファイルを読み込む

画像を外部から読み込めるようにして、表示する画像を変更しやすく、汎用性に富んだものにすることができます。 画像を外部から読み込むには、Loaderクラスのload()メソッドの引数に画像のファイルパスを指定します。 ここで注意が必要なのは画像のパスはString型の文字列ではエラーになります。 この引数はURLRequestクラスを使用しなければなりません。

    loader = new Loader();
    var url:URLRequest = new URLRequest("img/photo1.jpg");
    loader.load(url);
  • Loader クラスは、SWF ファイルまたはイメージ (JPG、PNG、または GIF) ファイルをロードするために使用します。ロードを開始するには load() メソッドを使用します。ロードされた表示オブジェクトは Loader オブジェクトの子として追加されます。
  • Loader クラスは、継承する次のメソッドをオーバーライドします。これは、Loader オブジェクトが持つことができるのは 1 つの子表示オブジェクト、つまりロードするオブジェクトに限られているためです。次のメソッドを呼び出すと例外がスローされます。メソッドは、addChild()、addChildAt()、removeChild()、removeChildAt()、および setChildIndex() です。ロードされた表示オブジェクトを削除するには、親の DisplayObjectContainer 子配列から Loader オブジェクトを削除する必要があります。
  • 画像がLoderオブジェクトに追加されたときEvent.INITイベントが送出されます。
  • Event.INITイベントを受け取るリスナーは通常だとLoderのオブジェクトloderと考えられがちですが、LoderInfoオブジェクトにする必要があります。LoderInfoオブジェクトとはロードした画像に関する情報を提供するオブジェクトです。
  • LoderInfoオブジェクトを参照するにはLoderインスタンスのインスタンス変数のcontentLoderInfoを通して行う事ができます。
  • ロード終了後の画像にアクセスするにはLoderオブジェクトのインスタンス変数contentで行う事ができます。
  • または深度0の子を指定してアクセスするメソッドgetChildAt(0)でもアクセスできます。これはLodaerオブジェクトはただひとつの子をもつことしかできないことを利用したものです。
  • 最後にロードした画像を表示リストに追加するにはaddChild()するだけです。表示リストに追加すると画像はLoderオブジェクトから自動的に削除されます。

参考 ここでLoader クラスとLoderInfoクラスの詳細についてはActionScript 3.0 コンポーネントリファレンスガイドで確認しましょう。

表示リストとは

表示リストとは、Flash Playerに表示されるすべてのオブジェクトの階層です。

hyouji1.jpg

階層の構成要素

  1. ステージ:すべての表示オブジェクトの最上位となる表示オブジェクトコンテナです。
  2. 表示オブジェクトコンテナ:表示オブジェクトの一種で、子を持つことができます。
  3. 表示オブジェクト:Flash Playerに表示されるすべてのオブジェクトは表示オブジェクトとなります。表示オブジェクトコンテナ以外の表示オブジェクトは子を持つことができません。

3種類の抽象クラス

  1. DisplayObjectクラス:画面上に表示する機能のみを持っている
  2. InteractiveObjectクラス:DisplayObjectを継承して、さらにキーボードやマウス操作に反応できるようにしたもの
  3. DisplayObjectContainerクラス:InteractiveObjectを継承して更に他のコア表示クラスのコンテナになれるクラス
    これらから直接インスタンスは作成することができません。インスタンス化するにはそれぞれサブクラスを使用することになります。
    上記DisplayObjectクラスなどの3種類のクラスのプロパティ、メソッド、イベントについてはActionScriptコンポーネントリファレンスガイドを参照してください。

子の追加

addChild();

表示リストに表示オブジェクトを追加するのは簡単な2つの手順だけです。

1. SpriteかMovieClipのインスタンスを作成 var sp:Sprite = new Sprite();

2. addChild();で表示をする

addChildAt();

使用例 addChildAt(myball,0);

addChild();メソッドは表示オブジェクトを表示リストの最後に追加します。それは一番上のインデックス(一番上)にオブジェクトを配置します。

addChildAt()は表示リストの特定の位置に追加することができます。第2引数の0が一番下。

removeChild();

表示リストからオブジェクトを削除するにはremoveChild();を使用します。

特定のレベルのオブジェクトの削除はremoveChildAt();を使用します。

removeChildAt(0);とするとzインデックス0のものを削除するとなります。

removeChild();は表示を消すだけでオブジェクトは削除されていませんので注意してください。

オブジェクトを削除するには参照している変数をnullにしてガベージコレクションに任せます。

<author Tahara>

もしよろしければ、下ボタンをクリックお願いします。

sphere.jpg

今回は具体的に球体の作成方法をまとめておきます。

文法はどうでもいいからとりあえず作りたい場合は次の手順です。

  1. FlashCS3以上かFlashDevelopを用意します。今回はフリーのFlashDevelopを使用して作成します。
  2. 新規プロジェクトを作成します。AS3 Projectを選択してAS3のプロジェクトを作成します。
  3. ライブラリを入手します。papervision3dのページからPapervision3D ActionScript 3.0 Library .ZIP をダウンロードします。
  4. プロジェクトマネージャに表示されるsrcフォルダの中にライブラリの nochump と orgを入れます。libに入れるのではなくsrcに入れますので間違わないようにしてください。
  5. 下記ソースをMain.asファイルにコピーします。
  6. プロジェクトをテストボタンをクリックして実行画面を確認します。
  7. bin フォルダに出来上がったswfの拡張子が付くファイルがあります。これが球体を描くFlashのファイルです。
    ついでにindex.htmlファイルもできていますので、自分のページに流用することができます。FlashをHTMLに挿入する方法が解らない場合はこのソースを使用すればよいです。JavaScriptで表示させる仕組みになっていますので、このHTMLソースを使用する場合はbinにある各ファイル、フォルダを自分が使用する環境に入れておく必要があります。
package 
{
    import org.papervision3d.objects.primitives.*;
    import org.papervision3d.view.*;
    import org.papervision3d.materials.*;

    public class Main extends BasicView
    {

        public function Main():void 
        {
            var sphere:Sphere = new Sphere(null,600,30,30);
            scene.addChild(sphere);
            startRendering();
        }

    }

}

ここから文法です。

クラスのインスタンス化

さて、上のソースのコンストラクタの中のステートメントを見てみましょう。

var sphere:Sphere = new Sphere(null,600,30,30);

これは変数の宣言とクラスのインスタンス化を一度に行っているものです。

ActionScript3では変数の宣言は次のとおりです。この部分がjavaと少し違いますね。

var 変数名:型

インスタンス化は次のとおりです。

new コンストラクタ

コンストラクタがパラメータを持っていれば引数を入れてやります。

今回の場合は左側で var sphere:Sphere と変数宣言しています。

Sphereクラスの型を持ったsphereという変数を宣言しているのです。

右側はnew演算子を使用してSphereクラスをインスタンス化しています。

インスタンス化とは設計図を使って具体的な物にするイメージです。

 

では、もう少し詳しく見て行きましょう。

インスタンス化するSphereクラスを見てみましょう。Sphereクラスはライブラリの中にあります。

org/objects/primitives/Sphere.as

コンストラクタを見てください。

public function Sphere( material:MaterialObject3D=null, radius:Number=100, segmentsW:int=8, segmentsH:int=6 )
  {
    super( material, new Array(), new Array(), null );
    this.segmentsW = Math.max( MIN_SEGMENTSW, segmentsW || DEFAULT_SEGMENTSW); // Defaults to 8
    this.segmentsH = Math.max( MIN_SEGMENTSH, segmentsH || DEFAULT_SEGMENTSH); // Defaults to 6
    if (radius==0) radius = DEFAULT_RADIUS; // Defaults to 100

    var scale :Number = DEFAULT_SCALE;

    buildSphere( radius );
    }

4つのパラメータがありますね。つまりクラスをインスタンス化する場合には引数を指定する必要があるのです。
ただし、この場合はパラメータにそれぞれ初期値が設定されていますので省略は可能です。引数を省略した場合は初期値の球が描かれます。

Sphereコンストラクタのパラメータの内容

第1引数はマテリアル(3Dに貼付ける画像など)
第2引数は半径
第3引数は横セグメント
第4引数は縦セグメント

*セグメントとは3Dの形状の分割数のことです。セグメントを増やせばポリゴン数が増えて滑らかな表現になりますが、CPU負荷が高くなります。

 

super( material, new Array(), new Array(), null );

これはスーパークラスのコンストラクタです。スーパークラスについては継承の特集で別途やります。

さて、ここまで解ればあとはSphereクラスに何が書かれているのかブラックボックスの状態で構わないのです。

その使い方さえ解ればいいわけです。

それでは元に戻りましょう。今度は

scene.addChild(sphere);

について見ていきましょう。

addChild()とは出来上がったオブジェクトを画面に表示するためのメソッドです。引数にオブジェクト名を入れるとそのオブジェクトが表示されるものです。

表示についてActionScript3では表示リストという概念があります。これをしっかり理解しないと的確にActionScript3を使いこなせないでしょう。

次回表示リストについてやります。

<author Tahara>

もしよろしければ、下ボタンをクリックお願いします。

カスタムクラスの作成

球体を描くソース

package 
{
    import org.papervision3d.objects.primitives.*;
    import org.papervision3d.view.*;
    import org.papervision3d.materials.*;

    public class Main extends BasicView
    {

        public function Main():void 
        {
            var sphere:Sphere = new Sphere(null,600,30,30);
            scene.addChild(sphere);
            startRendering();
        }

    }

}

描画結果

sphere.jpg

import文

任意のパッケージにあるコードは、別のパッケージ内にあるコードを参照できません。
別のパッケージにあるpublicのクラスにアクセスできるようにするには、importディレクティブを使用します。

今回ライブラリはsrcフォルダの中に入れます。ライブラリフォルダは2つでorgフォルダとnochumpフォルダです。
描画する球体ではorgフォルダ内のクラスを使用しますので下記のようにimportを行っています。

ワイルドカードのアスタリスク(*)を使えば、同じパッケージ階層のすべてのクラスを指定できます。アスタリスクを使って指定できるのはあくまで同じパッケージ階層であって、その階層以降のすべてを参照するものではありませんので注意してください。

    import org.papervision3d.objects.primitives.*;
    import org.papervision3d.view.*;
    import org.papervision3d.materials.*;

クラスの定義

クラス定義はキーワードclassで始め、その後クラス名を記述します。クラス名は慣習的に大文字で始めます。空白やダッシュを含んではいけません。数字から始めるこもできません。パッケージ名を同じにすると、例えば別ファイルに記述したクラスでも同じパッケージの一部とみなされます。一方クラス定義は複数のファイルにまたがることはできません。

クラス名とクラスのファイルは必ず同一にします。Mainクラスの場合はMain.asというファイル名にします。

デフォルトでは、任意のクラスはそのパッケージ内にあるコードからのみ使用することができます。定義されたパッケージの外からクラスを使用できるようにするにはpublic属性をつけて定義します。また、パッケージ内のみ使用できることを明示的に示したい場合はinternal属性を使用します。アクセス制御指定子を省略すると暗黙的にinternal属性となります。

public class Main extends BasicView 

extends BasicView は BasicViewクラスを継承するという意味になります。

この場合はBasicViewクラスを継承したパッケージ外のクラスからも参照できるMainクラスを宣言するという意味になります。

継承はオブジェクト指向で非常に重要な仕組みです。継承については別に特集します。

*Adobeのコンパイラではメインクラスにはpublic属性をつけて定義する必要があります。

コンストラクタメソッド

コンストラクタメソッド(コンストラクタ)はクラスのインスタンスを初期化するために使用される、特別な命令セットです。コンストラクタメソッドの名前はクラス名と正確に一致させる必要があります。

コンストラクタメソッドのブロックステートメントはインスタンスを初期化するディレクティブが含まれます。クラスで明示的にコンストラクタメソッドを定義しないとそのクラスの新しいインスタンスで初期化を実行しないデフォルトのコンストラクタを提供します。通常たとえ空でもコンストラクタは常にクラスに含めるようにします。コンストラクタメソッドの暗黙的に制御指定子はpublicとなります。通常は明示的に必ずpublicをつけて記述します。

public function Main():void 
        {
            var sphere:Sphere = new Sphere(null,600,30,30);
            scene.addChild(sphere);
            startRendering();
        }

* アプリケーションのメインのコンストラクタはプログラム内で特別な役割を演じます。コンストラクタはアプリケーションの開始後すぐにコードを実行できる機会を提供するのです。つまりメインクラスのコンストラクタはプログラムの開始点と考えることができます。

<author Tahara>

もしよろしければ、下ボタンをクリックお願いします。

オブジェクト指向とは

object1.jpg

Coline Moock氏はオブジェクト指向について次のような例を上げています。

飛行機をまったくゼロから作れと言われたらどうしますか?

その場合に行うべき処理について思いをめぐらせてみてください。

まさかいきなり金属工場に行って溶接を始めたりはしないでしょう。

まずは飛行機の設計図の作成から始めるはずです

しかも何もないところから飛行機を作る場合には、一枚だけでなく、

飛行機の多くの部分(車輪や両翼、椅子、ブレーキなど)の

それぞれについて設計図を書く必要があるでしょう。

そして今度は部分ごとにそれぞれの設計図どおりに加工し、

それが終わったらマスターの設計図に従って組み立てていきます。


ActionScriptのオブジェクトは、空を飛ぶ飛行機が一連の設計図に基づいて相互に作用するパーツの集まりであるのと同じように、動作する一連のクラスに基づいて相互に作用するオブジェクトの集まりです。

ActionScriptのオブジェクトは、プログラム内の目に見えるものと目に見えない概念の両方を表しています。

オブジェクトの例としては数値、ボタン、カレンダーの日付、画像のぼかし効果などであったりします。

オブジェクトはクラスの具体化(インスタンス化)であり、クラスはオブジェクトの基になる設計図のことをいいます。

クラスとオブジェクトを使ってプログラムを構築することをオブジェクト指向プログラミングobject-oriented programming(OOP)といいます。


カスタムクラスとビルトインクラス
新しいプログラムを作成するときの最初の手順はクラスを決める事です。各クラスはオブジェクトの特定のタイプに関する特性と振る舞いの両方をコードで表したものです。
オブジェクトの特定のタイプに関する特性と振る舞いを表すためにはゼロの状態から記述するクラスが必要になります。このクラスのことをカスタムクラスと呼びます。

これに対してよく使われるオブジェクトの特定のタイプに関する特性と振る舞いについてはActionScriptとFlashランタイムが提供するさまざまなクラスがあります。これをビルトインクラスと呼びます。ビルトインクラスには数値やテキストの作成、サウンドの再生、画像の表示、ネットワークへのアクセス、ユーザー入力の応答などの基本的な作業の実行に使用します。

ビルトインクラスの詳細はAdobeが公開している「ActionScript 3.0 コンポーネントリファレンスガイド」を参照します。
次回は3D描画のライブラリを活用してカスタムクラスを作成していきます。
<author Tahara>
pv3d1.jpg

今回から数回に分けてActionScriptで3Dを試してみましょう。

3Dは難しいというのが一般的なイメージかもしれません。
実際にこれをスクリプトだけで実現するのは大変だろうと思います。ところが、ライブラリを使用すると実に簡単に3D表現が可能になるのです。

では早速サンプルを見ていきましょう。

なんだ、お前のホームページか、センス無いなと言わないでください。下段の真ん中にあるのがPapervision3Dを使用したサンプルです。工夫すると色々な作品ができそうですね。あとは創造力です。

今回の連載の最終目標はとりあえずこのサンプルと同じものを作成する事です。
そのためにはまず基本を少し勉強しておきましょう。

まずはカスタムクラスの作成方法です。

カスタムクラスの作成

ポリゴンがどうしたこうしたと怪獣みたいな名前は少し置いといて、いきなり球体を描くソースを見てみましょう。

球体を描くソース

package 
{
    import org.papervision3d.objects.primitives.*;
    import org.papervision3d.view.*;
    import org.papervision3d.materials.*;

    public class Main extends BasicView
    {

        public function Main():void 
        {
            var sphere:Sphere = new Sphere(null,600,30,30);
            scene.addChild(sphere);
            startRendering();
        }

    }

}

描画結果

sphere.jpg

コンストラクタの中にたった3つのメソッドがあるだけです。

これで球体が描かれている訳です。

これくらいならプログラミングの経験がなくてもできそうですね。

それではActionScriptの文法について見ていきましょう。

まずはパッケージについてです。

パッケージについて

一番上の

package

これはパッケージの宣言です。package しか書かれていませんので、これはデフォルトのパッケージとなります。名前のないパッケージは他のどこからも参照することができるものです。ちょっとした作品を作る場合はこれで大丈夫です。

少し詳しく説明します。

パッケージはクラスを収めるコンテナです。

その領域にはパッケージ名が付けられます。パッケージ名は慣習的に通常小文字で始めます。一方クラス名は通常大文字で始めます。そうすることでパッケージ名とクラス名を区別しやすくなります。

パッケージ定義ディレクティブ(ディレクティブとはプログラム命令の意味)の一般形式は以下のとおりです。

クラスのソースがパッケージ内にあるとそのクラスは自動的にそのパッケージ名をクラスの名前に加わります。例えばgemeというパッケージ内のクラスPlayerという名前のクラスはgame.playerクラスとなります。これでプログラム内の他のクラスやビルトインクラスとコンフリクト(衝突)が避けられる訳です。

パッケージ名の付け方

慣習的にプログラムを作成する組織が持つドメイン名を逆に並べて、次に任意のパッケージ名(.)で繋げる事で一意であることが保証され、別の組織が作成したコードとのコンフリクトが避けられます。

package net.studiom.map{

この例はstudiom.netというドメイン名を持つ作成者がmap関連のクラスを作成する場合です。

package名をこのようにするとソースファイルの置き場に注意が必要です。

このソースファイルはmapフォルダ内に存在し、mapフォルダはstudiomフォルダ内に存在し、studiomフォルダはnetフォルダ内に存在します。(net/studiom/map/Mapstate.asのファイル構造になる)

名前を持たないパッケージに含まれたクラスは、自動的に作成されるパッケージ内に配置されます。このパッケージは名前のないパッケージと呼ばれます。名前のないパッケージ内のクラスはそのプログラム内のどこからでも利用できます。ただし、別のクラスとコンフリクトの恐れがあることを認識しておく必要があります。

<author Tahara>

もしよろしければ、下ボタンをクリックお願いします。

前回のマルチストライプ作成でActionScriptに軽く触れていきましたが、今回から少し噛み砕きながら進めていきたいと思っています。(文法の解説はColin Moock著 Essential ActionScript3.0 O'REILLTをベースにしています)


プログラミング初心者対象のレベルです。

ActionScriptについて

ActionScriptはAdobeのFlashプラットフォームにおける公式プログラミング言語です。元来アニメーションを制御する簡単なスクリプトでしたが、高度なFlashコンテンツ作成のため高い要求に応える必要がでてきました。現在のActionScript3.0はECMAScript4に基づいています。
そして、クラスやオブジェクト、インターフェースといったオブジェクト指向の概念をもった言語です。

ActionScriptコードを記述するツール

ActionScriptのコードはWindowsのメモ帳などシンプルなテキストエディッタで作成できます。
専用ツールとしてはAdobe社のFlashBuilder やFlashProfessionalまたフリーで手に入る FLASH DEVELOPなどがあります。
FlashBuilder(Flex)はAdobe社が提供する統合開発環境IDE(Integrated Development Environment)です。IDEはコードを記述し管理するためのアプリケーションのことをいいます。ActionScriptとMXMLを使ってコンテンツを開発します。
FLASH DEVELOPはフリーで利用できるFlexSDKを使ったIDEです。
これに対してFlashProfessionalオーサリングツールは、デザイン、アニメーションを作成し、プログラミングを行う複合的なエディタです。

Flashクライアントランタイム環境

ActionScriptプログラムは「Flash Player」、「Flash Lite」、「Adobe AIR」の3つの異なるソフトウェアアプリケーションで実行できます。
1. Flash PlayerはWebブラウザやデスクトップ上のスタンドアロンモードでActionScriptプログラムを実行します。
Flash Playerはオペレーティングシステムにほとんどアクセスできません(たとえば、ファイル管理やウィンドウ制御、ハードウェアへのアクセスなどは行えません)
2. Adobe AIRはデスクトップ上のオペレーティングシステムと統合することができます。(たとえば、ファイル管理やウィンドウ制御、大部分のハードウェアへのアクセスが可能です)。
3. Flash Liteは携帯電話などのモバイルデバイス上でActionScriptプログラムを実行します。
Flash Player  Flash Lite Adobe AIRはFlashクライアントランタイムと呼ばれています。FlashクライアントランタイムはWindows,Mac,Linuxなど異なるオペレーティングシステム用に用意されています。

コンパイル

1. ActionScript3.0コードをActionScriptバイトコード(ABC)にコンパイルするコンンパイラをActionScriptコンパイラといいます。
2. swfファイルと呼ばれるバイナリコンテナにラップするものがSWFコンパイラと呼ばれます。
ActionScriptプログラムをFlashランタイムで実行するにはその前に、人間が読むことのできるActionScript3.0コードから、Flashランタイムが理解する、ActionScriptバイトコード(ABC)と呼ばれる圧縮されたバイナリ形式に変換する必要があります。さらに.swfファイルと呼ばれるバイナリコンテナにラップする必要があります。swfファイルを作成する処理はswfファイルのコンパイルと呼ばれ、swfファイルの書き出し、パブリッシュともいわれます。

FlashBuilder やFlashProfessionalは同じActionScriptコンパイラを持っていますが、SWFコンパイラは別のもので、それぞれFlashコンパイラ、Flexコンパイラと呼ばれます。FlexコンパイラはFlexSDKとしてフリーで提供されています。


ジャストインタイムコンパイル Flashは2度コンパイルされる
ActionScriptコードは、人間の読める形式からActionScriptバイトコードにコンパイルし、次にプログラムが動作するハードウェアの理解できるネイティブマシンコードにコンパイルします。
後者のコンパイルはプログラムが必要な時の寸前に発生するためジャストインタイムコンパイルと呼ばれます。
次回はオブジェクト指向についてです。
<author Tahara>

もしよろしければ、下ボタンをクリックお願いします。

mstrip.jpg

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

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

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

ActionScript3はサンプルのように拡張子をasとします。エディッタはメモ帳などでOKです。問題はコンパイルが必要になります。通常は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)で作成した四角形を代入します。 1番先頭の四角形と2番目の四角形のみ大きさを変えています。この辺は好みに応じて変更してみるとよいと思います。 3番目以降は全て3ピクセルの幅にしています。

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

//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'});            
        //3番目以降のストライプを トゥイーンさせるプロパティ + 時間 + イージング + 遅延
          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を指定しています。今回1番目と2番目の四角形に個性(大きさだけですが)を持たせるためのものです。 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;
        }

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

<author Tahara>

もしよろしければ、下ボタンをクリックお願いします。

このアーカイブについて

このページには、2011年9月に書かれたブログ記事が新しい順に公開されています。

次のアーカイブは2011年10月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

カテゴリ

ウェブページ