[連載]の最近のブログ記事
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 ); // 出力結果 : _lovel0HTMLで言えば "_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
ActionScript にあらかじめ用意された関数を使うこともできますし、自分で関数を新たに作ることもできます。
関数の仕組みを知るために、まずは自分で作ってみましょう。
function funcName( x )
{
trace( "func : " + x );
}
関数を簡単に作ってみました。
上記の関数の記述について簡単に説明します。| function |
関数を定義するために必ず function をまず書きます。 変数を定義するときの var のようなものです。 |
| funcName | funcName はこの関数を呼び出すための名前です。 |
| () | 関数に関数外から値を渡したい場合に、この括弧()の中に値を参照するための名前(変数のようなもの)を定義します。 |
| x |
関数の外部から渡された値を参照するための名前です。 関数の外部から渡された値のことを引数(Arguments)といいます。 |
| {} | 括弧{}の中に、この関数が実行する処理を書きます。 |
ただ、これをプレビューしてみても何も起こりません。
関数は定義するだけでは何もおこらず、定義した関数内の処理も実行されません。
これを実行するためには、定義した関数を呼び出さなければなりません。
function funcName( x )
{
trace( "function : " + x );
}
funcName();
funcName(); という行を1行追記しました。これをプレビューしてみると、出力に「function : undefined」と表示されます。
undefined とは「値が見つかりませんでした。」という意味です。
例えば
var a; trace(a);とすると、同じように undefined と表示されます。
変数a に何も値を入れていないためです。
つまり引数 x に何も値が設定されなかったために x が undefined になったのです。
そこで funcName(); を以下のように書き換えてみます。
funcName( "関数" );これをプレビューすると「function : 関数」と表示されます。
関数の呼び出しは、同じスクリプト内であれば、関数の定義より上で呼び出しても、下で呼び出しても 同様に使用することができます。
funcName("呼び出し 1");
function funcName( x ){ trace( x ); }
funcName("呼び出し 2");
まだ、これでは有り難味が感じられないので、以下のように書き換えてみましょう。
function funcName( x , y )
{
trace( x+y );
}
funcName( 10 , 20 );
funcName( 10 , -5 );
funcName( 1 , 10 );
プレビューしてみると「30 5 11」が表示されました。つまり関数は一度定義すると、その中の処理がどれだけ長くなっても、簡単に何度も呼び出して実行することができるのです。
しかし、このままでは関数の内部ですべて完結してしまって、関数内で計算した結果を、次の計算に活かすといったことができません。
そのために return を追記します。
function funcName( x , y )
{
return x+y;
}
var a = funcName(10,20);//結果 : 30
var b = funcName(5,5);//結果 : 10
trace(a+b);//出力 : 40
以下にひとつ例を挙げておきますので、いろいろ書き換えてみて、関数の仕組みに慣れてください。
var a = 2;
var b = 3;
var res = func(func(10,5) / func(b,a));
trace("a="+a);
trace("b="+b);
trace("res"+res);
function func( a , b )
{
trace("func:a="+a);
trace("func:b="+b);
return a*b;
}
つづく
var str_1 = "これは文字列です。"; var str_2 = "これは文字列です。"; trace(str_1); trace(str_2);このように " (ダブルクォーテーション)か ' (シングルクォーテーション)で挟まれた箇所が、
スクリプト中の文字列として扱われます。
var str_1 = "Adobe"; var str_2 = "Flash"; trace(str_1+" "+str_2); //出力 : Adobe Flashこのように、文字列は + 演算子で結合することができます。
スクリプトでの数値は、第1回から使っているように、そのまま 1 2 3 4... と入力した数字、
もしくは計算によって求められた結果だったりします。
ただし文字列内に含まれる数字は数値として扱われません。
これは後々になっても注意しなければならないところなのですが、
外部からFlashに動的に読み込んだデータに含まれる数値データは文字列になります。
そのため意図した通りの結果が現れないときは、これが原因になっている可能性も考えてみてください。
ところで、ここまで文字列と数値は別物と書いてきましたが、以下のスクリプトの場合
trace( "1" == 1 ); //出力 : true出力結果は true になります。
つまり同じであると判断します。
これは「文字列の 1 と数値の 1 が同じ値である」、と判断しているように見えますが
内部的には、文字列を一度数値に変換して、数値同士を比較するようになっているためです。
じゃあ問題ないじゃないか、と思ってしまいます。
実際、大抵は問題なかったりもしますが、次のような場合に困ったことになります。
var a = "10"; var b = 5; trace(a+b);この時の結果は「15」になってほしいところですが、実際は「105」と出力されてしまいます。
これは、片方が文字列の場合、もう片方も強制的に内部で文字列として扱われ、結果的に2つの文字列を結合した「105」が出力されるのです。
これを正しく計算するためには Number() 関数を使用します。
var a = "10"; var b = 5; trace(Number(a)+b);//出力 : 15Number() 関数は、()内の値を数値に変換するための関数です。
ただし、文字列のなかに数字以外の文字が含まれていた場合は正しく数値化できません。
また次のような可能性もあるかもしれません。
trace(Number("1")); //出力 : 1
trace(Number(" 1")); //出力 : 1
trace(Number("1 ")); //出力 : NaN
1行目は正常に数値化できています。2行目は数字の前に半角スペースが入った文字列ですが、これも正しく数値化されています。
3行目は出力結果がおかしなことになっています。
NaN とは Not a Number の略で、数値に変換しようとしたけど失敗しました。ということです。
こういった場合、一見すると分かりにくいので注意してください。
これらのような問題を起こさないためにも、数値と文字列をきちんと区別して考える癖を付けておきましょう。
HTMLで言うところのコメントタグ <!--コメント--> のようなものです。
コメントを残すことで、他の人がスクリプトを見たときのみならず、自分が後でスクリプトを修正するときなどに、そのスクリプトが何をしているのかを理解する手助けになります。
ActionScript でのコメントは、コメントの始めに /* と書いて、終わりに */ で閉じます。
これは CSS 内のコメントと同じルールです。
/* コメント */また1行だけのコメントの場合には、始めに // を使うことで、その後ろをコメントとして扱うことができます。
// コメントただし、"//" の場合、複数行のコメントを書く場合には、
各行のコメントの先頭に、毎回記述しなければなりません。
var speed = 10; // 速度 var distance = 100; // 距離 var angle = 30; // 角度このようにスクリプトの後ろに書き加えることもできます。
また、コメントは一時的に使用したくないスクリプトを、処理からはずすときにも使用します。
var a = 0; //a += 10; trace( a );みたいに。
Web上で配布されているスクリプトには、大体作者のコメントが入ってますので、コメントを先に見ることでスクリプトを読み解く手助けになるかと思います。
また、配布、公開されているスクリプトは、冒頭にライセンスについて書かれていたりもします。
このようにスクリプトを書く上で、コメントは実際の実行処理には影響しないものの、重要な役割を担っています。
参考
さまざまなライセンスとそれらについての解説
この2つの値をBooleanとかブール値といいます。
国内の書籍なんかでは、よく「真」「偽」と書かれています。総称して「真偽値」と書かれていたりもします。
もう少し噛み砕いて言うと「正しい」と「正しくない」が意味として近いと思います。
var a = 10; trace(a==10);上記のActionScriptを実行すると、「true」が出力されます。
これは「a==10」が「a の値は 10 と等しいです。」と書いています。
それに対して、書いていることが正しいので、その結果として true が出力されるのです。
もしこれを
var a = 5; trace(a==10);と書くと、 a の値は 5 であるのに対して、「a の値は 10 と等しいです。」と書かれているので、
間違ったことを言っているとして false が出力されます。
この中で使用している "==" を比較演算子といいます。
比較演算子は、その名の通り「2つの値を比較する」ためのものです。
"==" の場合、「左の値と、右の値が等しい関係である」ことを比較して調べているわけです。
比較演算子は他にも以下のようなものがあります。
比較演算子
| == | 左側の値と、右側の値が等しいかどうかを調べます。 |
| != | 左側の値と、右側の値が等しくないかどうかを調べます。 |
| > | 左側の値が、右側の値より大きいかどうかを調べます。 |
| >= | 左側の値が、右側の値より大きい、もしくは等しい(以上)かどうかを調べます。 |
| < | 左側の値が、右側の値より小さいかどうかを調べます。 |
| <= | 左側の値が、右側の値より小さい、もしくは等しい(以下)かどうかを調べます。 |
| === | 左側の値と、右側の値が型を含めて等しいかどうかを調べます。 |
| !== | 左側の値と、右側の値が型を含めて等しくないかどうかを調べます。 |
"!=" というものが上の表にあります。これは "==" の逆で、等しくなければ true を示し、 等しい場合は false を示します。
var a = 5; trace(a!=10);上記は true を出力します。
これはつまり、「a の値は 10 ではありません」と言っているので、言っていることは正しいということで true なのです。
また表の7つ目と8つ目については、文字と数値を区別した形で判断するためのものです。
文章中の文字として書かれた "1" という数字と、物の数が何個あるかを示す "1" は違うものということです。
詳しくは、また後日書きますので、まあ、こういうものもあるとだけ頭に入れておいてください。
以下に、また例をいくつか挙げておきますので、いろいろ試してみてください。
trace( 2*5 == 10 );
trace( 3*10 > 20 );
trace( 10 >= 10 );
trace( 10 > 10 );
trace( 1+2+3+4+5 != 30/2 );
trace( false == false );
trace( (2*5==10) != false );
var a = 2; var A = 4; trace( a < A );
いきなり前回の「スクリプトは左から」と違ってるじゃないか!と思った方へ。
trace( 5+5 == 20/2 );は
trace( (5+5) == (20/2) );この2つ目の式から括弧()を省略したものと考えてください。
1+2*3 という式にわざわざ()を使わないようなものです。
実際には計算以外にも複雑なことができるのですが、基本的な流れで言えば計算式と捉えてもらえれば分かりやすいと思います。
1+(2+3)×4=a上の式は単純な計算式ですが、これをスクリプトで書くと以下のようになります。
var a = 1+(2+3)*4;どちらも a の値(答え)は 21 です。
スクリプトは基本的に左上から処理されていきます。
横書きの文章と同じです。
ただし上の式だと、そのまま左から計算すると、
1+2=3
3+3=6
6*4=24
で、答えは 24 になってしまいますが、そうなると答えが間違っていますよね。
普通は括弧()の中の式が優先され、また足し算、引き算より掛け算、割り算の方が優先される。
これはスクリプトも算数も同じです。
試しに上の式をActionScriptで書いて出力してみましょう。
trace(1+(2+3)*4);上記をアクションパネルに書いて、Ctrl+Enter(MacではCommand+return)でプレビューしてみましょう。
出力パネルには 21 と出力されたと思います。
ところで、ここで書いたスクリプトには「var a=」が書かれていません。が、出力にはきちんと正しい値が出ています。
これは「1+(2+3)*4」だけで計算のための式は完結しているということです。
では「var a=」は何かと言うと、「a」に、右の式「1+(2+3)*4」を代入していることを表しています。
以下のスクリプトを書いて、もう一度プレビューしてみてください。
var a = 1+(2+3)*4; trace(a);21 が出力されましたね。
このように a は式の値を保持しておいて、後で再度使いたいたい時に、簡単に使えるようにするためのもので、総称して「変数」と呼びます。
「var」は何かというと、この「a」が変数であることを定義するためのものです。
しつこいですがもう一度このスクリプトを見てください。
var a = 1+(2+3)*4; trace(a*2);出力パネルには 42 が表示されます。
変数 a の値は 21 で、そこに 2 を掛けた値 42 が出力されたわけです。
それでは上記スクリプトを左上から読んでみてください。
まず、var で a を定義(宣言)して、そこに右側の式の値を代入する。
右側の式というのは 1+(2+3)*4 です。
次の行で、変数 a の値に 2 を掛けて出力する。です。
trace の右にも()がありますよね。この場合の()は必須のものなんですが、それでも考え方は同じで、()の中の式が先に処理されるわけです。
このように変数は後の計算に使いまわしの利く大変便利なもので、使う頻度も一番多いので覚えておきましょう。
ここでもうひとつ。式の中に出てくる"*"や"+"、"="などの記号のことを総称して演算子と呼びます。
この演算子には以下のようなものがあります。
代入
| = | 右側の値を左側の変数に割り当てます。 |
算術演算
| + | 数値を加算します。(足し算) |
| - | 符号反転や減算に使用します。(引き算) |
| * | 2 つの式を乗算します。(掛け算) |
| / | 左の値を、右の値で除算します。(割り算) |
| % | 左の値を、右の値で割ったときの剰余を計算します。(余りを求める) |
| ++ | 変数に 1 を加算します。 |
| -- | 変数から 1 を減算します。 |
算術複合代入
| += | 左側の変数に、右側の式を加算して割り当てます。 |
| -= | 左側の変数に、右側の式を減算して割り当てます。 |
| *= | 左側の変数に、右側の式を乗算して割り当てます。 |
| /= | 左側の変数に、右側の式を除算して割り当てます。 |
| %= | 左側の変数に、右側の式で剰余した値を割り当てます。 |
var a = 2*(a=6)+5*a; trace(a);
var a=5, b, c; c = 100-((b=a*2)*(a*a+b)/a); trace(c);
var a, b; b = a = (6+4)*4; trace(a); trace(b);
var a = 2; a *= 2; trace(a);
var a = 0; trace(a++); trace(a);
var a = 0; trace(++a); trace(a);
var a = 2; a += (++a)*a; trace(a);いろいろな式を書いては出力してみて、どんな結果が出るのかを試しつくしてみてください。
演算子について、変数については、また後日詳しくやりますので、今はまず計算の順序と結果について把握できるようになっておいてください。
スクリプト初心者の人向けに ActionScript を通してスクリプトを組むための
基本的なところから、中級的なところまで書いていこうと思います。
はじめに断っておきますが、僕自身中級者ですのであしからず。
僕にもまだまだ勉強は必要です。
この講座を読んで ActionScript を使えるようになった誰かが
僕より全然良い Flash を作るってことも、まったくありえる話だと思います。
まあ、そもそも Flash作品 の良し悪しに ActionScript はあまり関係ないんですけど
それを言っちゃうと元も子もないので、そのへんは気にしないでください。
要は僕ぐらいの人は、もっとそこらにゴロゴロいたっていいはずだと思ってるわけです。
■これを書くに至った経緯
デザイナーさんに ActionScript について教えることが、これまでに何度かありました。
その度にまず最初にスクリプトについての基本的な話からはじまります。
さすがに何度も同じ話をするのも面倒ですし、かと言って放っておく訳にもいかないので、
何度かに分けて、ここに ActionScript の基本的なところの話を書いておくことにしました。
■対象とする人
・ActionScript を自分で一から書けるようになりたい人。
・Flashを触ったことはある、Flashを触る環境はあるが ActionScript はよく分からない人。
・ActionScript を覚えようとサンプルを触ったりしたが、結局身に付かない人。
・せめて JavaScript は使える用になりたいと思ってる人。
・スクリプトには興味はあるが難しそうなので手を出せないでいる人。
などなど。
いわゆる初心者な人たちです。
■目標
最終的には自分で作りたいものを作れるようになってもらえるようになればと思ってます。
当たり前のことの様に聞こえますが、大概の初心者はここでつまづいてしまいます。
自分で作りたいと思っているものが作れなかったら、まったく面白くないですし。
その為に必要なことは「ちょっとしたルールを覚える」ことと、「自分で調べられる」こと。
たったこれだけのことなので、実はあんまり書くことなかったりして。
■内容
基本的に「Flash Professional 8」か「Flash CS3」ありきで話を進めていきます。
実はあんまり考えていないのですが、まずは基本的なところを AS2 をベースに書いていこうと思います。
なんとなく頃合を見計らって AS3 に移行していこうと思ってます。
よく「AS3 は初心者にはちょっとハードル高いんじゃない?」みたいな話をちらほらと耳にしますが
僕自身はそうは思ってません。「AS3が初心者にはハードル高い」と思うのは、その人がそれまでの
ASに慣れているからであって、これから身に付けていく人にはあまり関係ない話だと思います。
むしろ AS3 のソースを理解できるようになれば Java や C++ のソースを見ても読みやすいと思います。
そっちの方が参考になるものが多かったりしますし。
ちょっと話が脱線しちゃいましたが、最初は"変数"とか"関数"の話から"クラス"
についてもろもろ書いていこうと思ってます。(メチャクチャ大雑把やな)
ちなみに脱線しまくる可能性大です。
■はじめに
はじめにと言うか、はじめる前に ActionScript を使えるようになるためのちょっとしたコツを。
・初心者は極力サンプルを使わない。
ActionScriptの書籍だけでもかなりの量が出版されており、ネット上にもたくさんのサンプルが上がってます。
が、最初は使わない方がいいと思います。これらを使っていいのは、ある程度ソースが読めるようになってから。
そう決め込んでしまいましょう。
ありがちなのは、サンプルを見つけてきて、そのまま書き出せばうまく動くけど、自分でカスタマイズしようとしたら、
なぜこのスクリプトから先ほどのような動きが表現できていたのかが分からず、思い通りにならない。ってのがオチです。
結果を急いではいけません。
まずはその仕組みを理解しましょう。
・Ctrl+N(MacならCommand+N)を癖付けよう。
なぜか初心者ほど重いファイルであれこれしようとする傾向にあるように思います。(場合にもよりますが。)
結果がどうなるか分からないスクリプトは、まず新規ファイルを作って、そこで試しにスクリプトを書いてみて、
結果を確認してから制作中のファイルに書き加えましょう。
その方が書き出しも早いですし、スクリプトもスッキリしていて問題が明確になりやすいです。
・trace()を使いまくる。
ActionScriptには trace() というスクリプトが用意されています。
これは内容を「出力パネル」に表示するための関数というものです。
使い方は
trace("出力する内容");
という具合に書くと、出力パネルには『出力する内容』と表示されます。trace(1) と書けば『1』が出力されます。
スクリプトは、とにかく実行中にどんな値が処理されているのかが見た目に分かりにくいです。
そんな時に、調べたい値を trace() を使ってやることで、出力パネルに表示させて直接確認することができます。
第1回でもう少しこの trace については書くことにします。
だいたい最初はこんなものでしょうか。
これらは常に頭の片隅に置いておいてくださいませ。
■参考書籍
・初心者の人はこの本
FLASH ActionScript辞典
これは Flash 2004 の時のものですが初心者にはこれ1冊あれば充分過ぎます。
内容は Flash のヘルプをそのまま本にしたようなものですが、本を開くのと、ヘルプパネルを開くのでは大違いですので、これは持っておくといいと思います。
他にも名前に「入門」とついた本とか ActionScript 関連の本はたくさん出版されていますが、それを手にするのはもう少し先で構いません。
・ActionScriptで書かれたソースがある程度読める(理解できる)ようになったらこの本
Flash Hacks―プロが教えるテクニック&ツール100選
ActionScriptに限らずFlashのオーサリング全般に渡って、様々なテクニックが紹介されていますので是非参考にするといいでしょう。
・クラスを扱いだしたらこの本
FLASH OOP ActionScriptによるオブジェクト指向プログラミング
AS2でのクラスファイルの作成と使用方法についてのイロハが書かれてますので、是非繰り返し読まれることをお勧めします。
・次のステップを目指す人はこの本
高校数学公式活用事典
改訂新版 JavaScript 例文活用辞典
プログラミングの宝箱 アルゴリズムとデータ構造
C言語による最新アルゴリズム事典
ゲーム開発のための物理シミュレーション入門
PHP辞典
などなど。
挙げればキリがありません。あとは適材適所。必要だと感じたものを買うに限ります。
あと、最近ではFlash関連の国内ブログがやたら増えたので、チェックしておくといいと思います。
本を選ぶ時は、あまりActionScript関連の書籍にこだわらずに、いろいろ目を通してみてください。
例えば、中高校時代テストでは赤点ばかりだった僕にとっては「高校数学公式活用事典」なんてのは目から鱗、棚からぼた餅だったワケです。
取り留めのない感じになってますが、以後こんな感じで進めていきますので
どうぞよろしくお願いします。
そうそう、ここまでで既に何か分からない単語とかあるんですかね?
何か不明な点とかあれば、コメントで質問していただければ、極力答えていきますので
気軽に書き込んでください。
と言っても、面識ある人たちは直接聞いてくれたらいいんだけどもね。
