Spriteクラス　ActionScript3.0 Flash CS3

Spriteクラス（スプライト）

　SpriteオブジェクトはShapeオブジェクトと違って子表示オブジェクトを持つ事ができ、マウスイベントもサポートされています。ここではSpriteクラスの説明をします。

Spriteオブジェクトの使用

　Spriteオブジェクトは表示オブジェクト、表示オブジェクトコンテナでもあります。Spriteオブジェクトに別の表示オブジェクトを追加できますし、作成されたSpriteオブジェクトはマウスイベントもサポートされます。ここではSpriteオブジェクトにマウスイベントの設定と表示オブジェクトの追加方法を例にして順次説明していきます。

Spriteオブジェクトにマウスイベントの設定
Spriteオブジェクトに表示オブジェクトの追加

Spriteオブジェクトにマウスイベントの設定

円のSpriteオブジェクトを作成しそのオブジェクトをクリックしたら、trace()でテキストを出力する例を説明します。

例1：
・最初にSpriteオブジェクトを作成します。ここではオブジェクト名をmySpriteにしました。

var mySprite:Sprite = new Sprite();

・Spriteクラスのgraphicsプロパティを使用して円を描く設定を行います。（詳細はGraphicsクラスを参照してください。）

var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0x333333)
mySprite.graphics.drawCircle(100, 100, 50);

・今回はmySpriteをクリックした時に何かを起こすのでaddEventListener()を使用してマウスイベントの作成を行います。（詳細はaddEventListener()を参照してください。）

var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0x333333)
mySprite.graphics.drawCircle(100, 100, 50);

mySprite.addEventListener(MouseEvent.CLICK, myFunc);

・mySpriteがクリックされた時に実行される関数を定義します。

var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0x333333)
mySprite.graphics.drawCircle(100, 100, 50);

mySprite.addEventListener(MouseEvent.CLICK, myFunc);

function myFunc(event:MouseEvent):void {
trace("作成したmySpriteがクリックされました。");
}

・最後にaddChild()を使用して表示リストにmySpriteを追加します。（詳細はaddChild()を参照してください。）

・コードの記述が終了したらCtrl + Enter キー (Windows) または Command + Enter キー (Macintosh) を押して円をクリックしてみてください。
Output

Spriteオブジェクトに表示オブジェクトの追加

　作成したSpriteオブジェクトに別の表示オブジェクトを追加する方法を説明します。基本的にはステージにaddChild()メソッドを使用して目的の表示オブジェクトを追加する方法と一緒です。ここではコンテナ（Spriteオブジェクト）を2つ作り、そのコンテナに表示オブジェクトを追加します。

例1：
・最初にコンテナとなるSpriteオブジェクトを2つ作成します。ここではオブジェクト名をcontainer1とconteiner2にしました。

var container1:Sprite = new Sprite();
var container2:Sprite = new Sprite();

・次にrect1とrect2という四角形のSpriteオブジェクトを2つ作成します。

var container1:Sprite = new Sprite();
var container2:Sprite = new Sprite();

//rect1四角形を作成
var rect1:Sprite = new Sprite();
rect1.graphics.beginFill(0xFF0000);
rect1.graphics.drawRect(50, 50, 70, 70);

//rect2四角形を作成
var rect2:Sprite = new Sprite();
rect2.graphics.beginFill(0x0000FF);
rect2.graphics.drawRect(150, 50, 70, 70);

・最初にcontainer2にaddChild()を使用してcontainer1を追加します。

var container1:Sprite = new Sprite();
var container2:Sprite = new Sprite();

//rect1四角形を作成
var rect1:Sprite = new Sprite();
rect1.graphics.beginFill(0xFF0000);
rect1.graphics.drawRect(50, 50, 70, 70);

//rect2四角形を作成
var rect2:Sprite = new Sprite();
rect2.graphics.beginFill(0x0000FF);
rect2.graphics.drawRect(150, 50, 70, 70);

container2.addChild(container1);
container1.addChild(rect1);
container1.addChild(rect2);

・次にcontainer1にaddChild()を使用してrect1とrect2を追加します。

var container1:Sprite = new Sprite();
var container2:Sprite = new Sprite();

//rect1四角形を作成
var rect1:Sprite = new Sprite();
rect1.graphics.beginFill(0xFF0000);
rect1.graphics.drawRect(50, 50, 70, 70);

・ステージに表示させる為にthisにaddChild()を使用してcontainer2を追加します。

//2つのコンテナを作成
var container1:Sprite = new Sprite();
var container2:Sprite = new Sprite();

//rect1四角形を作成
var rect1:Sprite = new Sprite();
rect1.graphics.beginFill(0xFF0000);
rect1.graphics.drawRect(50, 50, 70, 70);

//rect2四角形を作成
var rect2:Sprite = new Sprite();
rect2.graphics.beginFill(0x0000FF);
rect2.graphics.drawRect(150, 50, 70, 70);

container2.addChild(container1);
container1.addChild(rect1);
container1.addChild(rect2);

//ステージに追加
this.addChild(container2);

・Ctrl + Enter キー (Windows) または Command + Enter キー (Macintosh) を押して出力を行うと下の様にrect1とRect2が表示されます。次にどのコンテナに表示オブジェクトがいくつ入っているかを調べてみます。
Output

・指定したコンテナ内の表示オブジェクトの個数を調べるプロパティに *numChildren があります。このプロパティは指定したコンテナ内の子表示オブジェクトの数を調べる事ができます。（孫は調べる事ができません。）

//2つのコンテナを作成
var container1:Sprite = new Sprite();
var container2:Sprite = new Sprite();

//rect1四角形を作成
var rect1:Sprite = new Sprite();
rect1.graphics.beginFill(0xFF0000);
rect1.graphics.drawRect(50, 50, 70, 70);

//rect2四角形を作成
var rect2:Sprite = new Sprite();
rect2.graphics.beginFill(0x0000FF);
rect2.graphics.drawRect(150, 50, 70, 70);

container2.addChild(container1);
container1.addChild(rect1);
container1.addChild(rect2);

//ステージに追加
this.addChild(container2);

trace(container1.numChildren); //2
trace(container2.numChildren); //1
trace(rect1.numChildren); //0
trace(rect2.numChildren); //0

・numChildrenを使用した出力結果は2,1,0,0となります。
container1にはrect1とrect2が入っている為個数は2。
container2にはcontainer1が入っているので個数は1。
rect1には何も入っていないので個数は0。
rect2には何も入っていないので個数は0。

* プロパティnumChildren はDisplayObjectContainerクラスのプロパティです。コンテナを持つ事ができるクラスは全てこのDisplayObjectContainer クラスを継承している為、このクラスのプロパティを使用する事ができます。

Top | Contents | Prev　| Next