[連載]の最近のブログ記事

前回はMovieClipの _x と _y のプロパティを変更して移動させましたが、
MovieClipにはその他にも様々なプロパティが定義されています。
このプロパティを変更することで、ムービークリップを回転させたり
透明度を変更したり、拡大縮小することなど、いろんなことができるようになります。

ってことでした。


それでは、他にどのようなプロパティが定義されているのか調べてみましょう。

キーボードのF1キーを押すとヘルプパネルが立ち上がるかと思います。（少なくとも初期設定の状態であれば）



ヘルプパネルが開いたら上図のプルダウンメニューから「リファレンスガイド（ActionScript & コンポーネント）」を開きます。

選択したらスクロールバーがしばらく、ずりーっとなったあと下図のようになります。



表示されたリストから「ActionScript 2.0 リファレンスガイド」→「ActionScript クラス」を選択します。



FLASH CS3 を利用している場合は以下のような感じです。



ActionScriptに定義されているクラスの一覧がつらつらと表示されるので、
その中から「MovieClip」の項を探して選択します。



開いたページ内には「プロパティ一覧」「イベントの一覧」「メソッド一覧」とテーブルが並んでいます。
このプロパティ一覧に _x や _y のようなプロパティから、透明度やサイズのプロパティの解説が書かれています。
このテーブルから、MovieClipがどのようなプロパティが定義されているのかを調べることができます。
実際にはどんなプロパティがあるのかを調べるより、こういうことをしたいときにはどのようなプロパティやメソッドを用いればいいのか。といった調べ方の方が多いと思いますが、そういうときにも僕はこの一覧の中から探しています。

ちなみに前回用いた onEnterFrame は「イベントの一覧」の中にあります。

さらに特定のプロパティの詳細が知りたいときは、左の一覧から選択するか、CS3の場合はリスト内のプロパティ名の箇所がリンクになっているので、そこから詳細ページに移ることができます。
詳細ページでは簡単なサンプルソースが掲載されていたりもするので、かなり参考になります。


これまで僕も様々なFLASHの参考書を買いあさってきましたが、結局最後まで使うのはヘルプです。
ヘルプを見ればほとんどのスクリプトの説明が載ってます。
これを読んでる方が調べて、解説されていないスクリプトってのはないんじゃないかと思います。

今ではActionScriptについて書かれているブログもかなり増えましたし、
技術者向けのニュースサイトで解説もされているので、インターネットを利用しても簡単に見つけることができると思います。

分からないときは FLASH-JP のようなフォーラムで質問するのも助けになるかと思いますが、
まずは、自分で調べる力を身につけましょう。


おまけ
以下のようなサイトで ActionScript について解説されています。

fumioNonaka.com
URL : http://www.fumiononaka.com/

Flashゲーム講座 & アクションスクリプトサンプル集
URL : http://hakuhin.hp.infoseek.co.jp/main/as.html

IT Pro 「Flash CS3入門　基本からActionScriptまで」
URL : http://itpro.nikkeibp.co.jp/article/COLUMN/20071025/285488/

Flashの枝（FLASH・アニメーション・ActionScript1.0,2.0,3.0の学習サイト）
URL : http://1art.jp/

ActionScript 逆引きクイックリファレンス
URL : http://www.openspc2.org/reibun/QuickReferenceActionScript/index.html

gihyo.jp「ActionScript 3.0で始めるオブジェクト指向スクリプティング」
URL : http://gihyo.jp/dev/serial/01/as3


ここで挙げた以外にも様々なサイトがありますので、いろいろ見てみるのもいいと思います。

連載とか言いながら、かなり放っておいたら催促されてしまいました。すいません。

今回はムービークリップをActionScriptを使って操作する方法と、簡単なアニメーションについて書こうと思います。

まず新規にflaファイルを作成して、ステージ上に簡単な矩形のムービークリップを作成します。
このインスタンス名は "mc" にしておきます。

さらに同レイヤー上に下記のActionScriptを記述します。

trace( [mc._x, mc._y] );

上図の場合 mc は x が 50 の位置に、y が 30 の位置に配置されています。
この状態で、一度プレビューしてみましょう。

出力パネルには「50,30」と出力されたと思います。

何度かステージ上のmcの位置を動かしてみて、その都度プレビューしてみてください。
ほぼ期待通りの数値が出力されるかと思います。
「ほぼ」と書いたのはたまに0.05の誤差が出る場合があるからです。
プロパティパネル上では0.1単位でしか指定できませんが、
実際 FLASH 上では0.05ピクセル単位で描画されてるため
マウスで配置するとこのようなズレの生じる場合があります。
まあ、今はあまり気にしないでください。

次にこれをタイムライン上でトゥイーンアニメーションを作成してみます。
下図のような感じです。



10フレーム目のキーフレームで mc の位置を（x=450,y=30）の位置に移しています。
また、位置を把握しやすいようにガイドを追加したのと、
出力値を表示する用のテキストフィールド（ダイナミックテキスト）を配置しています。

サンプルのflaファイルはこちらからダウンロードできます。
demo2.fla

ActionScriptは以下のように書き換えました。

this.onEnterFrame = function()
{
    output.text = mc._x;
}

this はこのタイムラインを指しています。

onEnterFrame は、FLASH上でタイムラインのフレームが
次のフレームに移ったときに呼び出されるMovieClipのイベントハンドラメソッドです。
（メソッドについては第6回を参照してください。）
ここでは onEnterFrame に新たに function を代入することで、onEnterFrameの実行内容を定義しています。

output は画面下に配置したテキストフィールドのインスタンス名です。
output.text でoutputの表示するテキストを取得、変更できます。
output.text に mc._x を代入することでmcのX座標の位置をプレビュー時に表示することができます。

最後に、図の中にはありませんが、プロパティパネル内のフレームレートを 2 まで下げています。
あんまり早いと表示された文字が読み取れないので。


それではプレビューしてみましょう。
当然 mc はカクカクとですが右にスライドしていきます。

この時、画面下のテキストフィールドに表示された値に注目してみてください。
mc が移動すると同時に mc._x の値が変わっているのが分かります。

書き出したデモはこちら
demo2.swf


ここまでくれば説明する必要もないかもしれませんが
mc._x は mc のXの位置を指すMovieClipのプロパティです。
同じく _y は mc のYの位置を指します。


では、このプロパティの値を見るだけではなく、今度はActionScriptを使って変更してみましょう。



トゥイーンアニメーションは使わないので、タイムラインを1フレーム目を残し、2フレーム目以降を削除してしまいます。
また、スクリプトを以下のように1行追加しました。

this.onEnterFrame = function()
{
    mc._x = mc._x + 10;
    output.text = mc._x;
}

追加した行では、現在の mc の _x プロパティの値に 10 を足した値を mc._x に代入しなおしています。
このflaファイルはこちら。
demo3.fla

これでプレビューした状態がこちらです。
demo3.swf

mc が10ピクセルずつ右にスライドしています。

さらにスクリプトを以下のように変更してみましょう。

this.onEnterFrame = function()
{
    mc._x += 10;
    mc._y += 5;
    output.text = mc._x;
}

今度は右下に向かって斜めに移動していきます。
mc._x += 10 は変更前と同様の意味を指します。
つまりmc._x の値に10加算するということです。
さらに _y プロパティにも数値を加算することで、下方向への移動も加わるため、
斜めに移動するようになります。

ただしこのままでは（x=450, y=230）を超えてもそのまま直進し続けてしまいます。
そのため、もう少し改良して以下のようにします。

this.onEnterFrame = function()
{
    if( mc._x < 450 && mc._y < 230 ){
        mc._x += 10;
        mc._y += 5;
    }
    output.text = mc._x;
}

if() はその後の{}内の命令に条件を与えるためのものです。
今回の変更では、もし（if）mc._x の値が 450 未満であり、mc._y の値が 230 未満であるとき、
この両方の条件を満たしているときだけ{}内の命令を実行する。というものです。

さらにここではフレームレートを 30 にしておきましょう。

これをプレビューした状態がこちらです。
demo4.swf

今回はMovieClipの _x と _y のプロパティを変更して移動させましたが、
MovieClipにはその他にも様々なプロパティが定義されています。
このプロパティを変更することで、ムービークリップを回転させたり
透明度を変更したり、拡大縮小することなど、いろんなことができるようになります。

しばらくほったらかしにしてましたが、そろそろムービークリップについて少し触れておこうと思います。

まずは新規ファイルを作成して、パブリッシュ設定の「ActionScript のバージョン」を "ActionScript 2.0" に設定しておきます。

ステージ上に下図のように "rect" というムービークリップを作成します。
今回「基準点」は左上に設定しておきます。


次にインスタンス名も同じく "rect" と設定します。


タイムラインは以下のようになっています。

レイヤー "rect" は、ムービークリップ"rect"のみを配置しています。
レイヤー "@root" はこれからActionScriptを書き込むレイヤーです。

次回からムービークリップの話をするときは、これを基に進めていきますので頭の隅っこの方にでも置いておいてください。

レイヤー "@root" に以下のスクリプトを書いてみます。

trace( _root );

Ctrl + Enter（Command + return）でプレビューしてみると、出力パネルに "_level0" と出力されました。
"_root" は、このムービーの一番上の階層を指定する場合に用います。
次に以下のように変更してもう一度プレビューしてみましょう。

trace( rect );

今度は "_level0.rect" と出力されました。
ムービークリップ "rect" は_rootに配置されているため、_lovel0のrectと表示されたわけです。

試しに以下のようなことをしてみましょう。
ステージ上のムービークリップ "rect" をダブルクリックで選択して、編集モードにした状態で、更に配置されている矩形をムービークリップに変換(F8)します。
名前は"fill"としてみました。


先ほどと同様にインスタンス名、レイヤー名をそれぞれ "fill" にして、さらに上にレイヤーを追加して "@rect" とします。


レイヤー "@rect" に以下のスクリプトを記述して、プレビューします。

trace( fill );
//出力結果 : _lovel0.rect.fill

出力結果は「_lovel0内のムービークリップrectの、更に内部のfill」であることを示しています。
この表記は何かと似ていませんか？HTMLでリンクの記述をするときに「contents/category1/page2.html」のように書くと思いますが、原理はこれと同じです。
Flashもすべて階層構造になっているため、階層を辿るために"/"の代わりに"."を使っているだけです。

レイヤー "@rect" は、ムービークリップ"rect" 自身の持つタイムラインであるため、 レイヤー "@rect"から、ムービークリップ"rect"を指定する場合は "this" を使います。

trace( this );
//出力結果 : _lovel0.rect

また、レイヤー "@rect"から一番上の階層（ルート）を指定する場合は "_root" で直接指定することも出来ますが、"_parent" を用いて相対的に、ひとつ上の階層として指定することも出来ます。

trace( _root );   // 出力結果 : _lovel0
trace( _parent ); // 出力結果 : _lovel0

HTMLで言えば "_root" は「http://」から指定する絶対パス、 "_parent" は「../」やディレクトリ名を用いて指定する相対パスといえます。
ちなみにルートに作成したレイヤー "@root" から、ムービークリップ"fill" を指定する場合は

trace( rect.fill );   // 出力結果 : _lovel0.rect.fill

となります。

しつこいようですが、もう少し関数について書いておきます。
前回オブジェクトについて書きましたが、それに関連して、もう少し関数をほじくり返してみます。

本題に入る前に、少し予備知識として話しておくことがあります。
Object には予めいくつかのプロパティやメソッドが定義されています。
これは Object に限った話ではないのですが、今はまだ Object の話しかしていないので、他の話はひとまずおいておきます。

また、ActionScript のバージョン 2 と 3 で定義されている内容は異なりますが、今は AS2 を基に話をすすめていきます。

で、Object に予め定義されているメソッドの中に toString() というものがあります。
これは Flash8 のヘルプには「指定されたオブジェクトをストリングに変換し、返します。」とあります。
つまり、この関数 toString() が定義されている Object を、人が読める形の String（文字列）に変換します。
用途は使いようによって様々ですが、今回は、主な目的のひとつである trace() 関数を使ったときに、出力する文字列を指定するために使います。
toString()の使い方は前回オブジェクトに定義した関数を使うときと同じです。
まずは以下のソースを見てください。

var obj = {};               // 変数 obj に新しく定義したオブジェクトを代入
var str = obj.toString();   // 変数 obj のtoString() 関数を呼び出して、結果を変数 str に代入
trace(str);                 // output : [object Object]

toString()の結果として"[object Object]"が出力されていることがわかります。
実際は trace() 関数を使用すると、内部でtoString()を呼び出すようになっているので わざわざ toString() を実行する必要はありません。
trace()の処理をわかりやすくすると以下のような感じです。

function trace( arg )
{
  出力( arg.toString() );
}

このtoString()を上書きして、新たに定義しなおしてみます。

var obj = {}
obj.toString = function()      // 変数 obj が持つオブジェクトのメソッド toString を上書き
{
  return "Method : toString";  // 定義内容を変更
}
trace( obj );                  // output : Method : toString

trace() の結果から toString が意図した通りに処理が書き換えられたのが分かります。

さて、前置きがかなり長くなりましたが、ここから本題です。
なるだけ分かりやすいようにHTMLの構造を真似てオブジェクトを組み立ててみます。
このオブジェクトを定義するために、折角ですから関数を用いることにします。

// ソースコード : 1
// オブジェクトを作成するための関数
function createObject( objName, objValue )
{
  var obj = { name : objName };   // name プロパティを持つオブジェクトを定義
                                  // name プロパティの値は引数 objName の値を設定する
  obj.toString = function()       // オブジェクトのtoString関数の処理を再定義
  {
    return objValue;              // 実行結果に引数 objValue の値を返すようにする
  }
  return obj;
}

続いてこの関数を用いてオブジェクトを定義します。

// ソースコード : 2
// 関数createObjectを用いてオブジェクトを定義していく
var html = createObject("html","HTML");
html.head = createObject("head","HEAD");
html.head.title = createObject("title","続・オブジェクトと関数");
html.body = createObject("body","BODY");

さて準備ができましたので、次に定義したオブジェクトが、実際どのようになっているかを探ってみましょう。

trace( html ); // output : HTML

上記のようにオブジェクト"html"を出力すると、関数createObject の引数に設定した objValue の値、つまり"HTML"が出力されました。
オブジェクト"html"のnameプロパティを参照する場合は以下のように書きます。

trace( html.name ); // output : html

お気づきかも知れませんが、このオブジェクトは階層構造になっています。
オブジェクト "head" はオブジェクト "html" のプロパティとして設定されており、さらにオブジェクト "title" はオブジェクト "head" のプロパティとして定義されています。
つまり、"html" の name と head は、同じオブジェクト "html" のプロパティであるということです。
ですので、オブジェクト "head" を参照する（この場合 trace で出力する）には

trace( html.head );

と書けばいいだけです。
それでは、オブジェクト "title" のnameプロパティを参照するにはどのように書けばよいでしょうか。
答えは次回に持ち越しますので試してみてください。

今度はソースコード:1の関数をを少し変更してみます。

// ソースコード : 1
function createObject( objName, objValue )
{
  var obj = { name : objName };
  obj.toString = function()
  {
    return objValue;
  }
  obj.outputName = function()  // 新たにメソッドを追加
  {
    trace( this.name );        // name プロパティの値を出力する
  }
  return obj;
}

新たにthisという言葉が入っています。
thisは実行しているオブジェクト自信を指すためのキーワードです。
オブジェクト"body"のメソッド"outputName()"を使うときも、プロパティと同様です。

html.body.outputName(); // output : BODY

ファイルやフォルダの関係は階層構造になっていますよね。
そのときファイルを指すURIは"/"（スラッシュ）を用いて階層構造を表しますが、それと同様です。
ただ"/"が"."になっているだけです。

以下に応用例を書いておきますので、また実際に実行してみていろいろ模索してみてください。

function node( name , child )
{
  var obj = { name:name , child:child , parent:undefined };
  child.parent = obj;
  obj.toString = function()
  {
    return this.name + "/" + this.child.toString();
  }
  return obj;
}
var source = node("1st", node("2nd", node("3rd", undefined )));
trace( source );
var anchor = source.child.child;
trace( anchor.name );
anchor.child = node( "4th", undefined );
trace( anchor.child.name );
trace( anchor.parent.name );

undefinedとは、「指定された名前は、まだ定義されていません」という意味です。
いきなり難易度を上げてしまったかもしれませんが、これが理解できれば後がかなりスムーズに理解できるようになると思いますので がんばって試行錯誤してください。

PICUP : this について

thisを用いることで参照先を明確にすることができます。
なぜ参照先を明確にしなければならないか、なのですが、その説明の前に以下のソースをコピーして実際にFlash上で実行してみてください。
// ---- ここから
var name = "VARIABLE";
var obj = {
          name:"PROPERTY" ,
          age:25
          };

obj.getName_1 = function(){ trace( name );        }
obj.getName_2 = function(){ trace( this.name );   }
obj.getAge_1  = function(){ trace( age );         }
obj.getAge_2  = function(){ trace( this.age );    }

obj.getName_1(); // output : VARIABLE
obj.getName_2(); // output : PROPERTY
obj.getAge_1();  // output : undefined
obj.getAge_2();  // output : 25
// ---- ここまで

関数getName_1は、最初に定義した変数 name を参照していることが分かります。
一方、thisを指定したgetName_2は、きちんと自身のプロパティ name を参照しています。
また、getAge_1に至っては、参照先、age が見つけられずundefinedを返しています。
こちらもthisを付けて参照先を指定したgetAge_2では、意図した通り"25"を返しています。

このようにthisを使うのと使わないのとでは、大きく結果が異なってきます。

これまで変数には文字や数値を代入して使ってきましたが、ここからは少しレベルアップしていきたいと思います。
これまでより少し難しいかもしれませんが、慣れれば何てことはありません。

今回お話しするオブジェクト（Object）は ActionScript の根幹を成す基礎中の基礎なので必ず身につけましょう。

まずはオブジェクトを定義します。
定義する場所には変数を使います。

var obj = new Object();

これで変数"obj"に新しいオブジェクトを定義して代入しました。
以下の方法でもオブジェクトを作成できます。

var obj = {};

こちらの方が、記述の手間も少ないですし、new を使うより処理も軽いのでこちらを使う頻度の方が高いでしょう。

さて、オブジェクトの使い方ですが、オブジェクトには大きく分けて 2 種類の値、プロパティとメソッドを持たせることができます。

変な例えですが、オブジェクトを何かに例えて説明するなら、ドラクエのキャラクターでしょうか。
プロパティは「名前」や「レベル」や「攻撃力」などのキャラクターのパラメーターで、メソッドはそのキャラクターが持つ動作的な要素、つまり「たたかう」や「魔法」、「にげる」にあたります。余計に分かりにくかったかな。
実際オブジェクトの方はもっと自由ですが。
要は複数の変数を持つことができるんです。

var obj = { x:10 , y:20 };
trace(obj);   // output : [object Object]
trace(obj.x); // output : 10
trace(obj.y); // output : 20

これは変数"obj"に"x"と"y"の 2 つのプロパティを持つオブジェクトを定義しています。
プロパティ"x"と"y"は、それぞれ"10"と"20"を代入しています。

var obj = {};
obj.x = 20;
trace(obj.x); // output : 20

このように定義した後からプロパティを追加することもできます。

次にメソッドです。

var obj = {
    method_1: function(){ trace("function method 1") } ,
    method_2: function(){ trace("function method 2") } 
  }
obj.method_1(); // output : function method 1
obj.method_2(); // output : function method 2

前回の内容を理解していれば、もうおわかりかと思いますが、メソッドとはオブジェクトが持つ関数です。
しかし、前回とは少し関数の定義の仕方が違いますよね。
実は関数には 2 通りの定義方法があります。
前回紹介したのは指定した関数名で関数を定義して、その関数名を使って実行するものでした。

function funcName()
{
  trace("Function");
}
funcName(); // output : Function

こんな感じに。
もうひとつは変数に関数を代入する方法です。

var func = function()
{
  trace("Function");
}
func(); // output : Function

つまり変数には関数も代入することができるのです。
この場合、関数そのものに名前を定義しないため、無名関数とも呼ばれます。
下記はもう少し変数への代入を分かりやすくしたものです。

function func_1()
{
  trace("Function");
}
var func_2 = func_1;
func_1(); // output : Function
func_2(); // output : Function

メソッドもプロパティと同様に、定義されたオブジェクトに追加することができます。

var obj = {};
obj.func = function()
{
  trace("Function");
}
obj.func(); // output : Function

つまり、メソッドもオブジェクトの持つプロパティの一種であることがわかります。
さらにオブジェクトのプロパティにオブジェクトを定義して、入れ子のようにすることも可能です。

var obj = {};
obj.prop = { name:"property" };
trace( obj );           // output : [object Object]
trace( obj.prop );      // output : [object Object]
trace( obj.prop.name ); // output : property

ActionScript は様々な機能があらかじめ定義されており、それは簡単に使うことができますが、 それらもすべて、このオブジェクトが元になっています。
冒頭にも書きましたが、オブジェクトはスクリプトを組む上でかなり重要な位置にありますので その仕組みをきちんと理解しておいてください。

PICUP : 代入について

詳しくは後日書きますが、変数に数値や文字列を代入することと、定義したオブジェクトを代入することは少し意味が違います。
実際はオブジェクトの参照先を代入していると言った方がいいかもしれません。
以下にそれを表したサンプルを書きます、これもいろいろと試してルールを把握してください。

var obj_1 = { x:10 };
var obj_2 = { x:10 };
var refer = obj_1; // 参照
var val = obj_1.x; // 代入

trace( refer==obj_1 ); // output : true
trace( obj_1==obj_2 ); // output : true
trace( obj_1.x ); // output : 10
trace( refer.x ); // output : 10
val = 20;
trace( obj_1.x ); // output : 10
trace( refer.x ); // output : 10
refer.x = 20;
trace( obj_1.x ); // output : 20
trace( refer.x ); // output : 20