連載: 2007年10月アーカイブ

スクリプト内で文字として扱う文字を文字列と呼びます。 よく使う使用方法としては

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);//出力 : 15

Number() 関数は、（）内の値を数値に変換するための関数です。
ただし、文字列のなかに数字以外の文字が含まれていた場合は正しく数値化できません。
また次のような可能性もあるかもしれません。

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上で配布されているスクリプトには、大体作者のコメントが入ってますので、コメントを先に見ることでスクリプトを読み解く手助けになるかと思います。
また、配布、公開されているスクリプトは、冒頭にライセンスについて書かれていたりもします。

このようにスクリプトを書く上で、コメントは実際の実行処理には影響しないものの、重要な役割を担っています。

参考
さまざまなライセンスとそれらについての解説

スクリプトの中でよく使われているものとして true と false という値があります。
この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 という式にわざわざ（）を使わないようなものです。

まずはActionScriptを書く上で、簡単なルールを少し覚えておきましょう。

実際には計算以外にも複雑なことができるのですが、基本的な流れで言えば計算式と捉えてもらえれば分かりやすいと思います。

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 を通してスクリプトを組むための
基本的なところから、中級的なところまで書いていこうと思います。

はじめに断っておきますが、僕自身中級者ですのであしからず。
僕にもまだまだ勉強は必要です。

この講座を読んで 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関連の書籍にこだわらずに、いろいろ目を通してみてください。
例えば、中高校時代テストでは赤点ばかりだった僕にとっては「高校数学公式活用事典」なんてのは目から鱗、棚からぼた餅だったワケです。


取り留めのない感じになってますが、以後こんな感じで進めていきますので
どうぞよろしくお願いします。



そうそう、ここまでで既に何か分からない単語とかあるんですかね？
何か不明な点とかあれば、コメントで質問していただければ、極力答えていきますので
気軽に書き込んでください。
と言っても、面識ある人たちは直接聞いてくれたらいいんだけどもね。