February 27, 2010 3:47 AM

プロパティの出力と入力を厳密に行うアクセサメソッド。前回では明示型の記述方法を描きました。入力用と出力用をメソッドがはっきり用意されているので、値を扱うクラスを作る際にはとても便利です。

ただ、明示型のアクセサメソッドはいかにもメソッドを使ってます!ってな感じな指定の仕方ですよね。前回のクラスで例えるとこんな感じ↓


student.setGPA( 値 );


普通のやり方ならば単純にプロパティに値を指定するだけになりますよね。


student._gpa = 値 ;


明示型アクセサメソッドのようにメソッドを使って値を入れるのも何ら問題はないですが、上記の単純な指定でやり取りすれば、実際にプロパティに値を指定している分、プロパティ値の流れがわかりやすくなります。

このアクセサメソッドでも厳密な指定をする際に、そういったシンプルな指定をしていみたい。そういう時に役に立つのが暗黙型アクセサメソッドです。


暗黙型アクセサメソッド

まずアクセサメソッドの明示と暗黙というのは、一体何に対してなのかという事ですが、これは「値の参照に対してメソッドを使っているかどうか」という事だと僕は解釈しています。明示型のアクセサメソッドは明らかにメソッドを使って値を扱っています。それに対して暗黙型アクセサメソッドは普通のプロパティの値指定とほとんど同じ記述になります。

Baseクラス

package  {

    import flash.display.Sprite;
    import flash.events.Event;


    public class Base extends Sprite{

        public function Base() {
            addEventListener(Event.ADDED_TO_STAGE,init);
        }
        
        private function init(e:Event):void{
            removeEventListener(Event.ADDED_TO_STAGE,init);
            addOn();
        }
        
        private var student:GPA = new GPA();
        
        private function addOn():void{

     trace("GPAオブジェクトのデフォルト値:"+student.gpa);
            student.gpa = 4 ;//入力の処理
        }
        
    }
    
}


GPAクラス

package {

    public class GPA {

        public function GPA() {
            // constructor code
        }
        private var _gpa:uint = 3;

        public function get gpa():uint {
            return _gpa;
        }
        public function set gpa(value:uint):void {
            if (value>4) {
                _gpa=4;
            } else if (value < 0) {
                _gpa=0;
            } else {
                _gpa=value;
            }
            trace("値は更新されました。現在の値は:"+_gpa);
        }

    }

}


上記が構成されているクラスの中身です。

Baseクラスの値の操作に注目して欲しいですが、プロパティの指定がとても普通な記述になってます。これが暗黙型の指定の仕方で、クラスを呼び出す方にはメソッドをプロパティのように扱う事が可能になります。(そういう風に見えます。)

GPAクラスはメソッドの記述を変更してあります。「get」「set」という記述を足してますね。呼び出す側には「gpa」の値で参照し、元クラスでは「_gpa」を操作しています。
これにより呼び出し側と呼び出し元のクラスそれぞれで違和感の無いプロパティの参照が可能になりますね。

実行結果はこちらです。


GPAオブジェクトのデフォルト値:3
値は更新されました。現在の値は:4


February 26, 2010 4:10 AM

ASでクラス同士の値のやり取りや、親クラスからメソッドを呼び出す際に、強引にパブリックプロパティで値を書き換える事をよくやってしまいます。

自分で案件を一から組む際には、致命的な事にはならないんですが、強引な印象は否めないですし他の人と組むときに親切じゃないですよね。(あと恥ずかしい・・・)

そんな時に使われるのが、アクセサメソッドというやり方です。

スクリプトで働く人間として、これは知らねばという事で記述を残しておきます。


実際どういう時に使うものなの??

このメソッドを使うときは一体どんな時なのか?それはクラス内のプロパティの値を入力、出力する時です。たとえば、計算結果をプロパティの値にしたい、とか、現在のプロパティ値を呼び出してtraceで表示したいとか。

クラス内で定義したプロパティがパブリックであれば、正直どんな位置からでも簡単にアクセスする事が可能になります。ですが、それは厳密な指定とはかけ離れ、ミスを生み出す可能もあります。そういった適当な指定をしたくない時にアクセサメソッドは必要となります。


アクセサメソッドにはgettersetterという二つの要素があり、さらにこれがアクセサメソッドということを明示するタイプの型と暗黙型の二つの記述方法があります。


今回は明示型の記述です。クラスの構成はアクセサメソッドでプロパティの値を入出力するGPAクラスと、そのパブリックメソッドで実行のみを行うBaseクラスです。


明示型アクセサメソッド

Baseクラス

package  {

    import flash.display.Sprite;
    import flash.events.Event;


    public class Base extends Sprite{

        public function Base() {
            addEventListener(Event.ADDED_TO_STAGE,init);
        }
        
        private function init(e:Event):void{
            removeEventListener(Event.ADDED_TO_STAGE,init);
            addOn();
        }
        
        private var student:GPA = new GPA();
        
        private function addOn():void{

     trace("GPAオブジェクトのデフォルト値:"+student.getGPA());
            student.setGPA(4);//入力の処理はsetterのメソッド
        }
        
    }
    
}


GPAクラス

package {

    public class GPA {

        public function GPA() {
            // constructor code
        }
        private var _gpa:uint = 3;

        public function getGPA():uint {
            return _gpa;
        }
        public function setGPA(value:uint):void {
            if (value>4) {
                _gpa=4;
            } else if (value < 0) {
                _gpa=0;
            } else {
                _gpa=value;
            }
            trace("値は更新されました。現在の値は:"+_gpa);
        }

    }

}


上記が構成されているクラスの中身です。

見るとわかると思いますが、扱うプロパティ「_gpa」はプライベート型です。明示型はパブリックプロパティではなく、プライベートを使用します。とりあえず、その段階で安易なアクセスは不可能になりますね。

内部にif文なども含まれていますが、重要なのが入力と出力のメソッドがしっかりとわかれている事です。Baseクラスから入力するには「setGPA()」、出力する際には「getGPA()」を使用します。これによりプロパティの値の流れが、明確になるだけでなくイベントとも繋げやすくなりますね。

実行結果はこちらです。


GPAオブジェクトのデフォルト値:3
値は更新されました。現在の値は:4


「これであれが出来る!!」って感じのメソッドではないですが、使うと色々綺麗なソースになりそうなので覚えておきます。

暗黙型の記述もまたやります。

February 4, 2010 2:42 AM

今更ですがCS4のFlashから、新しい機能が幾つか追加されています。型指定の可能な配列オブジェクトが作れるVectorクラス、フィルタが自分で作成できるカスタムフィルタ、タイムラインのインスタンスに関節部分を定義できるインバースキネマティックなどですね。

クラスは今まで、一般的なクラスしか使ってこなかったのでこういった新しいクラスに触れるのは楽しいですね。


2Dを3Dへ投影するPerspectiveProjectionクラス

パースぺくてぃぶぷろじぇくしょん・・・・中々長いクラス名です。

このクラスは、2D表示のオブジェクトを擬似的に3Dライクな表示に投影してくれるクラスです。CS4にはタイムライン上のオブジェクトのZ軸や、視野をいじったりできるパネルが追加されているかと思いますが、それらのプロパティを統括しているクラスがPerspectiveProjectionクラスです。奥行き、遠近感や消失点と呼ばれる要素を手軽に実現することができます。


消失点を定義するprojectionCenterプロパティ

このクラスを使用するときはまず、PerspectiveProjectionオブジェクトを作ります。そこからプロパティにアクセスします。PerspectiveProjectionオブジェクトはメインタイムライン(root)のtransform.perspectiveProjectionプロパティからアクセスしますので、こう記述します。


var obj:PerspectiveProjection = root.transform.perspectiveProjection;


これでオブジェクトを作成できました。現時点では消失点はステージの中心にあります。(stagewidth/2, stageHeight/2)消失点を自分で制御する場合はこう記述します。


_pro.projectionCenter = new Point ( x , y );


作成したオブジェクトにアクセスしてプロパティを指定するわけです。ただ、消失点の値はPointクラスですので、projectionCenter用のPointクラスオブジェクトを作った方がスマートです。


var _centerPro:Point = new Point( x , y );
_pro.projectionCenter = _centerPro;


視野角を指定するfieldOfViewプロパティ

fieldOfViewプロパティは3次元の視野角を指定出来ます。0〜180の数値で遠近法の変形と歪みの強さを決定します。カメラをやっている方ならわかりやすいですね。0に近いとオブジェクトの遠近感がかなり少なく、180に近くなればなるほど歪みが大きくなります。遠近感が強くなり魚眼レンズ効果が生まれてきます。

プロパティの値が大きい時、オブジェクトのz値が0より少ない(マイナスの値)ほど遠くにあるような感じになり、z値が大きいほど手前にあるような表示になります。ただ注意点として、扱いとしては0〜180の値になっておりますが、値に0と180を入力すると画面に何も出なくなるので注意してください。


視点からオブジェクトの距離を指定するfocalLengthプロパティ

focalLengthプロパティは視点からz軸上のオブジェクトとの距離を指定出来るプロパティです。基本的にはfieldOfViewプロパティを指定後、動的に計算されて値が生成されますが、こちらから明示的に指定することも可能です。色々さわってみてもいいですが、無理に使う必要もない気がしました。


wonderFlでforkしてみました。


使った感想

さわった感想としては、とても使い易かった感じです。ガリガリな3D表現はできませんが、ふわっとした浮遊感や奥ゆき感は簡単に実装できます。プロパティも少ないので、軽くソースを見ただけで覚えられるし、rotation系やPointクラスなどを使い色々出来そうですね。


追記 1つ注意

1つ書き忘れていました。このクラスは手軽に立体感を表現は出来ますが、実際に立体に変換されているのとは違います。その証拠に、それぞれのオブジェクトの表示は必ずaddChildで登録された順になっていると思います。一回転とかやろうとすると、ちょっと描画がおかしくなるので注意してくださいね。

September 14, 2009 3:19 PM

Prgoression3


addCommandの二つの処理

addCommandを使った処理を行うためのオブジェクトに、SerialListクラスオブジェクトを使うという事を前に書いたですが、SerialListクラス以外にPrallelListクラスというのもあります。


ParallelListクラスとSerialListクラスの二つの違いは、簡単に言いますと


「処理を順次行うか、同時に行うか」


という事です。SerialListクラスでの処理はカンマで区切った順に上から処理していきますが、PrallelListクラスはカンマで区切りは関係なく、同時に処理されます。



var list:SerialList = new SerialList();
list.addCommand(
new Trace("1"),
new Wait(1000),
new Trace("2"),
new Wait(1000),
new Trace("3")
);
list.execute();


上記はSerialListクラスでの記述ですが、この場合はtraceの処理が順々に1,2,3と表示されていきます。(new Waitというコマンドで()内での数字を待ち時間として指定出来ます)


例2

var list:ParallelList = new ParallelList();
list.addCommand(
new Trace("1"),
new Wait(1000),
new Trace("2"),
new Wait(1000),
new Trace("3")
);
list.execute();

例2の場合は全て同時に処理される為、Waitのコマンドが動いてもtraceが三つとも同時に表示されます。


例3

var list:SerialList = new SerialList();
list.addCommand(
new Trace("1"),
new Wait(1000),
new Trace("2"),
new Wait(1000),
new Trace("3"),
[
new Trace("4"),
new Trace("5"),
],
new Trace("6"),
);
list.execute();


二つは全く違う性質を持っているので、使う時はどちらを選択するかは簡単かと思います。ですが、実際に使う時に両方の性質を必要とする時もあると思います。

SerialListクラスでaddCommandしてても、このコマンドとあのコマンドは同時に処理したいなー、とかですね。


上記の例3ではSerialListクラスでaddCommandを実行していますが、四角の括弧([ ]こういうの)で囲った部分だけはParallelListクラスで処理されます。

なので、1,2,3は順番に表示され、4,5は同時に表示されます。そして6はその後に表示されるようになります。

例3はSerialListクラスで処理を行っているので括弧の内側がParallelListクラスに変換されていますが、逆にPrallelListクラスのaddCommand内で四角括弧を使うと、SerialListクラスに変換されます。


実際にaddCommandなどで行う命令は、順番通りの処理だけ、同時の処理だけの方が少ない気がするので、これはとても便利です。Progressionはこういった部分にサポートが行き届いているのが本当に凄いっすね。



今回の記事ではかなり他のクリエーターさんの記事を参考にさせていただきました。本当に感謝です。

flabaka - ParallelListとSerialList

もうみんなProgressionやればいいのに、と思う今日この頃。 | エントリー | _level0.KAYAC

jp.progression.commands.SerialList

September 11, 2009 12:38 PM

基本構文


Progression3のコマンド

Progressionには大きな特徴が3つあります。まず一つはシーン。シーン構造を作る事により階層の行き来がとても簡単になりました。各シーンのアドレス発行や参照などが可能になります。

次にキャストです。キャストとはProgressionで用意されているオブジェクトの事で、表示時や削除時の処理をキャスト自身に記述する事が出来ます。

最後にコマンドです。コマンドは処理を実行したり、登録させたりする機能です。このコマンドでなんかつまづいている感じです。


addChildでの基本的な記述はこちらです。

protected override function _onCastAdded():void {

     // 実行したいコマンドを登録します。

     addCommand(
     new DoTweener( obj ,{time:1,alpha:0,transition:"easeOutExpo"})
     );

}


上記のスクリプトはオブジェクトが表示されたら実行される関数です。実行されるとDoTweenerによってオブジェクトの透明度が0になります。DoTweenerはProgressiond内でTweenerを使用するメソッドです。ここでよくやってしまうのですが、addCommand内のスクリプトの最後にセミコロン「;」は必要ありません。


例2

protected override function _onCastAdded():void {

     // 実行したいコマンドを登録します。

     addCommand(
     new DoTweener( obj ,{time:1,alpha:0,transition:"easeOutExpo"}),
     new Trace("OK")
     );

}


例2のスクリプトでは、二つの処理を順番に実行しています。まず最初に先程のDoTweenerの処理を実行し、それが完了したらTraceメソッドを実行します。この場合、DoTweenerのスクリプトの最後にカンマを付けます。これによってエラーが起こらず順番に処理が実行されます。

ここで使われているTraceメソッド以外にも、addCommand以内でのみ使われるメソッドは一杯ありますが、通常のメソッド(例えばtrace()とか)を使うとaddCommand内の順序通りの処理になりません。順番通りに処理を行う為には、addCommandのメソッドを使う事が必要です。

September 9, 2009 6:08 PM

prgoression3

Progression3で制作開始


最近プログレッションでの構築の制作をやっています。

ってまだ全然わかっていないんですけど、リファレンスを見直しやっていくのは嫌なのでここにメモ一杯書いていきます。

ここに来て色々な事に手を出していますが、この状態は結構まずい気がします。しっかりと方向性を決めないとー!


addScene

addSceneメソッドは記述はaddChild系と同じですが、プログレッションではシーン構造を構築する為に必要な重要なメソッドです。

SceneObjectクラスのオブジェクトが子シーンを追加するために使います。

addChildAtみたいにaddSceneAtというメソッドもあります。

August 26, 2009 10:52 AM

AS3を仕事でよく使うようになって、今まで気にしていなかった要素が急に気になり出しました。

技術的に難しくないFlashならば、簡単なクラスを制作出来る技術さえあれば何とかなると思うのですが、今後もっと複雑なコンテンツを制作する時の為に簡単な復習をしていこうと思います。


変数と定数

変数はもう今更なので、というかこれはもう標準で使っているので記述は無いです。気にしていなかったのは定数の方。定数は「const」で宣言します。記述の違いは宣言の時以外は特にありません。ただ、一般的に名前は判別の為に大文字を使うようになっているみたいです。値の格納は代入の時、一回のみでその後から値を代入しようとしてもエラーになります。


const STR:String = "text";

const NUM:Number = 100;

const MAX_NUM:int= 9999;

const ARR:Array = new Array(00,01,02,03);


//オブジェクトを定数とした場合、操作は可能である

const ARR:Array = new Array(00,01,02,03);

ARR.push(04);

trace(ARR)

結果:00,01,02,03,04


//エラーになる記述1

const TITLE:String = "titlename";

TITLE = "newname";



//エラーになる記述2

const ARR:Array = new Array(00,01,02);

ARR = new Array(03,04,05);


で、考えたのが定数のメリット。実際に変数のみで制作を行っていても今の所全く支障ありません。他のクリエーターさんのブログでも処理速度の向上といった面でのメリットは見つけられなかったし・・・。ただクラスプロパティの記述を整理する為や、エラー原因の特定の為に使えばいいのかなと思いました。

August 5, 2009 1:19 PM

DIAMOND BAR


DIAMOND BAR

今回のサイトはダイアモンドを中心としたジュエリーを展開をするDIAMOND BARさんのフルFlashサイトです。

全体にしっとり且つ華やかなBGM、派手な演出をかけずプロダクトを大きく見せるようにシンプルなレイアウトで構成されています。トップの部分の指輪が並んで静かにスクロールしている演出はとても綺麗でお気に入りです。
ボタン周りのインタラクションやそれに付随する効果音等、細部が凝っているのでシンプルながら簡素な印象を全く感じません。外部ページに飛ぶ時に、サイトのBGMが消えるのにクリック音の余韻が静かに残るのには感動しました。

ダイアモンド自体に音の形はありませんが、響いたらこんな音だろうなと思わせるSEとBGM、それに光の演出が重なりダイアモンドの持つ眩しいイメージが伝わるような気がします。

あまりジュエリーになじみのない僕ですが、そんな僕でもしばらく見ていたい気持ちよさがあります。


DIAMOND BAR | ダイヤモンドバー | MJC [三菱ジュエリーコレクション]

about

Prev Categoryevent

Next CategoryGainer

Resent EntriesIndex page