サイトトップ
Director Flash 書籍 業務内容 プロフィール

Adobe Flash非公式テクニカルノート

StarlingフレームワークのQuadインスタンスをグラデーションで塗る

ID: FN1202001 Product: Flash CS5 and above Platform: All Version: 11 and above/ActionScript 3.0

StarlingフレームワークでつくったQuadインスタンスに、カラーとアルファのグラデーションを設定します。Starlingフレームワークのごく基本的な使い方とQuadインスタンスのつくり方については、「Starlingフレームワークを使う」で解説しています。また本稿では、Flash Professional CS5.5を用います(CS5でもほぼ同様)。


01 Quadインスタンスの頂点にカラーを定める
まず、Starlingフレームワークでステージの真ん中に黒い正方形のQuadインスタンスを置きます(図001)。そこで、Starlingフレームワークで表示リストのルートにオブジェクトをつくるクラス(本稿ではStarlingフレームワークの「ルートクラス」と呼びます)として、以下のクラスMySpriteを定めます(スクリプト001)。

図001■ステージの真ん中にQuadインスタンスの黒い正方形を描く
図001

スクリプト001■黒い正方形のQuadインスタンスをステージの真ん中に置くStarlingルートクラスの定義
    // ActionScript 3.0クラス定義ファイル: MySprite.as
  1. package {
  2.   import starling.display.Sprite;
  3.   import starling.display.Stage;
  4.   import starling.display.Quad;
  5.   import starling.events.Event;
  6.   public class MySprite extends Sprite {
  7.     private var square:Quad;
  8.     private var nUnit:Number = 100;
  9.     public function MySprite() {
  10.       addEventListener(Event.ADDED_TO_STAGE, initialize);
  11.     }
  12.     private function initialize(eventObject:Event):void {
  13.       square = new Quad(nUnit, nUnit, 0x0);
  14.       addChild(square);
  15.       square.x = stage.stageWidth / 2;
  16.       square.y = stage.stageHeight / 2;
  17.       square.pivotX = nUnit / 2;
  18.       square.pivotY = nUnit / 2;
  19.     }
  20.   }
  21. }

そして、上記ActionScript(AS)ファイルと同階層に保存するFlashムービー(FLA)ファイルから、つぎのようなフレームアクションでルートクラスを呼出します。これらのスクリプトについて詳しくは、前出「Starlingフレームワークを使う」をご参照ください。

// フレームアクション: メインタイムライン
import starling.core.Starling;
var myStarling:Starling = new Starling(MySprite, stage);
myStarling.start();

Quadインスタンスには、各頂点ごとにRGBカラーやアルファが定められます。異なる設定を与えた頂点の間は、値が滑らかに変わります。インスタンスの4頂点には、つぎのように0から3までの整数で頂点番号が決まっています(図002)。

図002■Quadインスタンスの4頂点の番号
0 1
図002
2 3

Quadインスタンスの頂点のカラーは、Quad.setVertexColor()メソッドで定めます。ふたつの引数には、頂点番号の整数とRBGカラー値を渡します。

Quad.setVertexColor(頂点番号, RBGカラー)

前掲スクリプト001でつくったQuadインスタンスの頂点ごとに異なったカラーを定めてみましょう。つぎのスクリプト002は、Quadインスタンスに対してQuad.setVertexColor()メソッドを呼出し、頂点1から3にそれぞれ赤(0xFF0000)と緑(0x00FF00)と青(0x0000FF)を設定しました(第19〜21行目)。異なるカラーを定めた頂点の間は、グラデーションで塗られます(図003)。

スクリプト002■StarlingフレームワークのQuadインスタンスに頂点ごとのカラーを定める
    // ActionScript 3.0クラス定義ファイル: MySprite.as
  1. package {
  2.   import starling.display.Sprite;
  3.   import starling.display.Stage;
  4.   import starling.display.Quad;
  5.   import starling.events.Event;
  6.   public class MySprite extends Sprite {
  7.     private var square:Quad;
  8.     private var nUnit:Number = 100;
  9.     public function MySprite() {
  10.       addEventListener(Event.ADDED_TO_STAGE, initialize);
  11.     }
  12.     private function initialize(eventObject:Event):void {
  13.       square = new Quad(nUnit, nUnit, 0x0);
  14.       addChild(square);
  15.       square.x = stage.stageWidth / 2;
  16.       square.y = stage.stageHeight / 2;
  17.       square.pivotX = nUnit / 2;
  18.       square.pivotY = nUnit / 2;
  19.       square.setVertexColor(1, 0xFF0000);
  20.       square.setVertexColor(2, 0x00FF00);
  21.       square.setVertexColor(3, 0x0000FF);
  22.     }
  23.   }
  24. }

図003■Quadインスタンスの頂点ごとに異なったカラーが設定された
図003


02 Quadインスタンスの頂点にアルファを加える
Quadインスタンスのアルファも、カラーと同じように頂点ごとに定められます。用いるのは、Quad.setVertexAlpha()メソッドです。Quad.setVertexColor()メソッドと同じく引数はふたつで、頂点番号の整数とアルファ値を渡します。

Quadオブジェクト.setVertexAlpha(頂点番号, アルファ)

前掲スクリプト002でつくったQuadインスタンスの頂点に、さらにアルファを加えます。つぎのスクリプト002は、Quadインスタンスに対してQuad.setVertexAlpha()メソッドを呼出し、頂点0をアルファ0に設定しました(第19行目)。

スクリプト003■Quadインスタンスの頂点にアルファを加えて回転する
    // ActionScript 3.0クラス定義ファイル: MySprite.as
  1. package {
  2.   import starling.display.Sprite;
  3.   import starling.display.Stage;
  4.   import starling.display.Quad;
  5.   import starling.events.Event;
  6.   public class MySprite extends Sprite {
  7.     private var square:Quad;
  8.     private var nUnit:Number = 100;
  9.     public function MySprite() {
  10.       addEventListener(Event.ADDED_TO_STAGE, initialize);
  11.     }
  12.     private function initialize(eventObject:Event):void {
  13.       square = new Quad(nUnit, nUnit, 0x0);
  14.       addChild(square);
  15.       square.x = stage.stageWidth / 2;
  16.       square.y = stage.stageHeight / 2;
  17.       square.pivotX = nUnit / 2;
  18.       square.pivotY = nUnit / 2;
  19.       square.setVertexAlpha(0, 0);
  20.       square.setVertexColor(1, 0xFF0000);
  21.       square.setVertexColor(2, 0x00FF00);
  22.       square.setVertexColor(3, 0x0000FF);
  23.       addEventListener(Event.ENTER_FRAME, rotate);
  24.     }
  25.     private function rotate(eventObject:Event):void {
  26.       square.rotation += 0.1;
  27.     }
  28.   }
  29. }

さらに、イベントEvent.ENTER_FRAMEに登録したリスナー関数(rotate())で、Quadインスタンスに回転のアニメーションを加えました(第23および第25〜27行目)。[パブリッシュプレビュー]で確かめると、頂点ごとに異なったカラーとアルファを設定したQuadインスタンスが回ります(図004)。なお、回転のアニメーションについては、前出「Starlingフレームワークを使う」をご参照ください。

図004■頂点にカラーとアルファを設定されたQuadインスタンスが回る
図004   図004

気をつけなければならないのは、Quad.setVertexAlpha()メソッドでインスタンスの頂点にアルファを加えるのは、Quad.setVertexColor()メソッドによるカラーの定めの後でなければならないということです。なぜなら、Quad.setVertexColor()メソッドはカラーを定めるだけでなく、アルファも1に設定し直してしまうからです。

たとえば、前掲スクリプト003第20行目の頂点番号1のカラー設定の前につぎのようにアルファを0に変えても、アルファ値は1に戻されてしまいます。なお、頂点のカラーやアルファの値を確かめるには、Quad.getVertexColor()およびQuad.getVertexAlpha()メソッドを用います。引数はともに頂点番号です。

    square.setVertexAlpha(1, 0);
  1. square.setVertexColor(1, 0xFF0000);
    trace(square.getVertexAlpha(1));   // 出力: 1

作成者: 野中文雄
作成日: 2012年2月8日
Copyright © 2001-2012 Fumio Nonaka.  All rights reserved.