101

憲ちゃんの「ACTION SCRIPT講座」へようこそ！
「超初心者のためのＦＬＡＳＨ５講座」を開設して３年、今も本来の目的は、アクションスクリプト以前のＦＬＡＳＨ導入口としてのＱ＆Ａ掲示板に変わりはないのですが、いつのまにか”超初心者と思えないような”アクションスクリプトに関するご質問も増えてきました。
しかしその内容は千差万別で、基本をご理解されたうえでのご質問もあればそうでないご質問もあります。
このサイトは初心者が対象ですから、そうでないご質問こそ大歓迎ですが・・・
市販のサンプルスクリプト集どおりに記載したのになぜ動かないとか、いきなり高度なテクニックに関するご質問に対して、答えに窮することがよくあります。
憲ちゃんも初心者の頃そうでしたが、何が初歩的で何が高度なテクニックかの区別がつかないのも当然です。
そこで、これから初めてアクションスクリプトに取り組んでみようとお考えの方で、参考図書を読んでもよく分からないという方を対象に、アクションスクリプトに関する初歩の初歩から基本的な考え方と応用の仕方についてまとめてみようと考えました。
以後はこれを共通の理解レベルとして、なお不明な点やレベルアップに関しては、市販の参考図書を参照されるなり、Ｑ＆Ａ掲示板でご質問くださるようにしていただければと思います。

102

この講座のサンプルは「ＭＸ」で作成していますが、ＦＬＡＳＨ５のアクションスクリプトをベースに解説させていただきます。
「ＭＸ」には、「ボタン」や「テキストフィールド」の機能強化や追加されたアクション、通信機能など、ＦＬＡＳＨ５にない新しいものもありますが、初歩的レベルでのアクションスクリプトの考え方は全く同じです。
特に「ＭＸ」との違いがある部分は併記しますので、「ＭＸ」の方も安心して付いてきてください！！
なお、ＯＳは「Windows」です。

103

本来でしたら、以前の「ＦＬＡＳＨ５講座」のように、一気に講座を完成できればよいのですが、当時と違い憲ちゃんも今、まとまった時間が作れません！
それで、合間を見て記載するという”連載”のかたちにさせていただきます。
勉強される方には、まどろっこしいと思いますが、できるだけ早く完成するよう努力しますのでよろしくお願いします。

104

Ｑ＆Ａ掲示板で、スクリプトを提示され”これのどこが間違っているか教えてください！”とか、”〜〜するにはどんなアクションスクリプトを書けばよいか教えてください！”というようなご質問をいただくことがあります。
アクションスクリプトがそれ単独で動作しているなら即答できますが、このご質問にはいくつかの「前提条件」が分からなければ返答のしようがないのです。
その「前提条件」とは何か？

105

ＦＬＡＳＨは「アニメ制作ソフト」です。
その仕組みは先の「ＦＬＡＳＨ５講座」でご説明しているとおり、タイムラインという時間軸とそれに対応する各フレームのステージに配置された文字や図形等が、パラパラ漫画や映画のフィルムのように１コマづつ映し出されながら動画を再生するものです。
このような一方通行的な動きに対して、例えば「ボタン」がクリックされたら、タイムラインの進行をストップさせたり、ステージに配置した図形を別の位置に移動させたり、というようなことをアクションスクリプトで行うことになります。
つまり、最初にアクションスクリプトがあるのではなく、まずタイムラインやステージにムービークリップやボタンなどのオブジェクト（部品）があって、それに対して特別な動きをさせたい場合に、どこにどんなアクションスクリプトを記載すればよいか？と考えながら制作していくのが順序なのです。
ただ単にボタンをクリックして、タイムラインの進行をストップさせるだけなら、アクションスクリプトも簡単なのですが、複雑な動きになると、配置しているオブジェクト（部品）も単に最初のシーン編集画面上だけとは限らず、あとでご説明しますが、ムービークリップの中に幾重にもムービークリップを配置するという「入れ子構造」になっている場合など、その構造の如何によって、アクションスクリプトの記載の仕方が異なってきます。
アクションスクリプトを記載する場合の「前提条件」というのは、アニメを構成するために設けられたタイムラインとそれぞれのフレームに配置された「ムービークリップ」内の個々の仕組みや（入れ子）階層構造のことです。

106

アクションスクリプトに魅せられてＦＬＡＳＨを導入された方もいらっしゃると思います。
ＦＬＡＳＨのアクションスクリプトも作業手順を書いてコンピュータを制御するプログラム言語に違いないのですが、陥りやすい勘違いは、ＪａｖａＳｃｒｉｐｔやＣＧＩなどのpeｒｌ言語のように、ソース（プログラムを順番に記載したもの）だけで完結できるものではないということです。
他のプログラム言語に精通されている方でもこれまでＦＬＡＳＨに触れたことの無い方が、ＦＬＡＳＨソフトを購入後、いきなりアクションスクリプトから始められることは、それを理解できるまでに非常に遠回りになるかと思いますのであまりお勧めできません！

107

「アクションスクリプトは、ＦＬＡＳＨアニメを補完するもの」 ですから、本格的にアクションスクリプトに取り組まれる前にまず「ＦＬＡＳＨアニメ」の仕組みを十分理解しておいてください。
通常のＦＬＡＳＨアニメだけなら、目で視覚的・感覚的に確認しながら思い通りのイメージに仕上げていくことができますが、アクションスクリプトでは、これに頭の中での論理的な想像、予想の世界が加わってきますので、いろいろなアニメを繰り返し制作して、アニメの基本を”体感”できるまでに達しておくと、論理とイメージが結びつきやすくなります。

108

ということで・・・
ＦＬＡＳＨアニメの基本のうち、特にアクションスクリプトと深くかかわる重要な事柄について要点をおさらいしておきます。
アクションスクリプトの世界で、主役は「ムービークリップ」です。
先の「ＦＬＡＳＨ講座」のＬｅｓｓｏｎ５の最後に簡単に説明しましたように、「ムービークリップ」も、「グラフィック」や「ボタン」と同じ「シンボル」のひとつの形態で、アクションスクリプトを使用するうえで、「ボタン」とともに最も重要なオブジェクト（部品）です。

109

ムービークリップの作り方には、２つの方法があります。
�@ひとつは、メニューバー「挿入」→「新規シンボル」 をクリック、「新規シンボルの作成」パネルで”名前（シンボル名）”を記載し、”タイプ”を「ムービークリップ」にして、空のシンボル編集画面の中に文字や図形を描きこんだり、外部から画像ファイル等を読み込んで作成する方法。
�Aもうひとつは、先にステージに文字や図形を描いたり、外部の画像ファイル等を読み込んで配置したものを選択し、メニューバー「挿入」→「シンボルに変換」をクリック、「シンボルに変換」パネルで”名前（シンボル名）”を記載し、”タイプ”を「ムービークリップ」にして作成する方法です。

110

このときの留意点は、ムービークリップの中心点（基準点）をどこにするか！ということです。
出来上がったムービークリップの中に「＋」マークのあるところが中心点（基準点）です。
アクションスクリプトでムービークリップの位置を調べたり、位置を移動させたりするときの座標とは、この中心点（基準点）のことであり、特に回転させるときには、この中心点（基準点）を中心に回転することになるからです。
上記�Aで作成する際、ＦＬＡＳＨ５の場合は自動的に図形等の中心が中心点（基準点）に設定され、出来上がった後でメニューバー「修正」→「変形」→「中心点を編集」で任意に移動することができます。
※詳しくは過去記事の■アニメを往復運動させる方法の「Responce04」を参照。
「ＭＸ」では「シンボルに変換」パネルの段階で予め「基準点」の位置を指定して設定できるようになっています。

111

ムービークリップの特徴は、
�@内部に元のシーン編集画面のようにタイムラインを持ち、元のシーン編集画面と同じように編集することができます。
�Aムービークリップの中にさらにムービークリップを配置し、必要に応じて幾重にも「入れ子構造」をつくることができます。
�Bそしてムービー（ｓｗｆ）再生の際は、再生タイムライン上にあるムービークリップは（本体が停止していようが）独自にタイムラインを再生しますから、ムービーの中にある独立したムービーと考えることができます。
このことから逆に、シーンのムービー本体を一番外側にある大元のムービークリップと考えることができます。

112

■頭だけでは実感できないので実際にサンプルを作ってみましょう。
�@ムービー（ドキュメント）の大きさを「500×300」背景色を「黒」に設定。
�Aメニューバー「ファイル」→「名前をつけて保存」で、ファイル名を「invader.fla」として任意の保存場所に保存。
�Bメニューバー「挿入」→「新規シンボル」で「新規シンボルの作成」パネルを出し、名前を「インベーダ」、タイプを「ムービークリップ」とし「ＯＫ」。
中央に「＋」マーク（ムービークリップの中心点（基準点））だけがある空の「インベーダ」シンボル編集画面になります。
�Cインベーダ図形を描きやすくするために、メニューバー「表示」→「グリッド」→「グリッドの編集」で、「グリッドを表示」「グリッドに吸着」にチェックを入れ、横縦ピクセルを各々「8 px」に設定して「ＯＫ」。
�DＭＸの場合はタイムライン右下、ＦＬＡＳＨ５の場合はステージ左下にある、「パーセント表示」を２００％に拡大して、細かい図形を描きやすくします。
�Eステージに以下のような図形（左図）をグリッドの升目内に描いてください。


※矩形ツールで「線無し」「塗り白」の８pxの正方形を１つだけ描き、それをコピー＆ペーストで複製を作りながら描いています。
※「情報パネル」を活用すれば、正確に配置できます。

�F３フレームを右クリックして、右クリックメニューの「キーフレームの挿入」で、３フレームをキーフレームにし（右図）、インベーダの足の部分を図のように描き変えます。
�G４フレームを右クリック、「フレームの挿入」でひとつだけフレームを増やしておきます。
これで、足を開いたり閉じたりを永久に繰り返すアニメーション、「インベーダ」ムービークリップの出来上がりです。

113

■「入れ子構造」のイメージをつかむため、この「インベーダ」ムービークリップの中にもうひとつ別のムービークリップを配置してみます。
�@下図の赤○印部分のアイコンをクリックして「レイヤーを追加」します。「レイヤー２」が「レイヤー１」の上にできます。
�A間違って先のインベーダ図形に描くことのないよう、青○印部分をクリックして「レイヤー１」をロックし書き込み禁止にします。
�B改めて「レイヤー２」の１フレームをクリック選択して、ステージに図のような”弾丸”図形を描いてください（左図）。



�C”弾丸”図形を選択して、メニューバー「挿入」→「シンボルに変換」で、名前を「弾丸」、タイプを「ムービークリップ」にして「ＯＫ」。
「弾丸」ムービークリップになります。
�Dそれをステージでダブルクリックすると、「弾丸」 シンボル編集画面に変わります。
それが右図ですが、はじめは１フレームに弾丸図形があるだけです。
この弾丸をモーショントゥイーンで下に移動させたいのですが、モーショントゥイーンを設定するには、それがシンボルである必要があるので、 それを選択して、メニューバー「挿入」→「シンボルに変換」、名前を「弾丸図形」、タイプを「グラフィック」 にして「ＯＫ」。
「弾丸図形」という名前の「グラフィック」に変換されます。
�Eステージの「弾丸図形」グラフィックをダブルクリックして、「弾丸図形」シンボル編集画面にし、図形が選択されてることを確認して、「整列パネル」の「ステージを基準」を押し込んで、「下揃え」アイコンをクリック、弾丸の下先端が中心点（基準点）になるように設定します。（ＭＸでは「シンボルに変換」パネルの段階で基準点を下に設定しておけば、この操作は不要）
�F「弾丸」シンボル編集画面に戻って、さらに「整列パネル」で「下揃え」をクリックして、「弾丸」ムービークリップの中心点に「弾丸図形」グラフィックの中心点（弾丸の下先端）が重なるように設定します。
�G「弾丸」ムービークリップのタイムラインの６フレームにキーフレームを挿入。
６フレームの「弾丸図形」グラフィックを適当に真下にドラッグして位置を移動させます。
※パーセント表示を「２００％」から「１００％」に変更すると、大きくドラッグできます。
�H１フレームをクリック選択して「モーショントゥイーン」を設定します。
さらに、７フレームに空白キーフレームを挿入し、６０フレームを右クリック、「フレームを挿入」で以降空白フレームにします。（右図）
※１〜６フレームにかけて「弾丸図形」が下降、以後、５秒おきに同じことを繰り返す「弾丸」ムービークリップの出来上がりです。
※「５秒おき」：フレームレートを1/12秒としているので、６０フレーム×1/12秒＝５秒。
�I右図の黄○印の「インベーダ」をクリックして、「インベーダ」ムービークリップ編集画面に戻り、「弾丸」ムービークリップを選択、「整列パネル」でそれを「インベーダ」ムービークリップの横「中央」、縦「下揃え」に配置してください。
�Jこの段階で、メニューバー「制御」→「シーンプレビュー」 で動作確認すると、「インベーダ」ムービークリップの足の開閉アニメーションとは別のサイクル（５秒おき）で弾丸が発射される「弾丸」ムービークリップの様子も確認できるはずです。
これが、ムービークリップの中にムービークリップを配置した「入れ子構造」の一例です。
�K図のタイムラインの下「シーン１」の部分をクリックして、元のシーン編集画面に戻ってください。
そこには、まだ何の図形も配置されていません！
これまでの作業で作成したムービークリップは、どこにあるのでしょうか？

114

「ライブラリ」パネルが開いていなければ、メニューバー「ウインドウ」→「ライブラリ」で「ライブラリ」パネルをだします。
その中に、先ほど作成した「インベーダ」ムービークリップ、「弾丸」ムービークリップ及び弾丸の元図形にあたる「弾丸図形」グラフィックが「シンボル」という形態で登録されています。
「シンボル」とは、実態（バイト容量）のある元になる”基本図形”のことで、そのままではムービーとして再生できません。
■ムービーとして再生できるようにするためには、「ライブラリ」から「シンボル」をドラッグして、ステージに配置します。
�@「ライブラリ」の「インベーダ」ムービークリップシンボルをドラッグして、ステージの任意の場所に配置してください。
この時点で、「インベーダ」ムービークリップは、「シンボル」の”分身”である「インスタンス」に変身します。
※「インベーダ」ムービークリップシンボル⇒「インベーダ」ムービークリップインスタンス。
「インスタンス」には「シンボル」の元の質量はありませんが、鏡に映した分身のように中身を含めて原型をそっくり受け継ぎます。


※注：「ライブラリ」からステージにドラッグされたものだけが「インスタンス」ではありません。
例えば、上記109の�Aの方法で、ステージに描いた図形を選択して「シンボルに変換」を行った場合、「ライブラリ」には「シンボル」として登録され、ステージに残った図形は、その時点でその「シンボル」の「インスタンス」になっています。
また、すでにステージに配置されている「インスタンス」をコピー＆ペーストした場合も、ペーストされて配置されたものも「インスタンス」です。
つまり、「シンボル」として「ライブラリ」に登録されているものが、どんな手段であれ、ステージにあるものはすべて「インスタンス」ということです。

�A 「情報パネル」で確認すると・・・
ステージ上での「インスタンスの大きさ」が青○の中、サンプルでは「W=64.0」「H=56.0」で示されています。（横幅64ｐｘ、縦幅56px）
ステージ上の「インスタンスの中心点（基準点）の位置座標」が赤○の中、サンプルでは「X=432.0」「Y=120.0」で示されています。
※座標は、ムービー（ドキュメント）の左上を原点「X=0,Y=0」として右下に正の値で大きくなります。
�Bもうひとつ新たに「ライブラリ」から「インベーダ」ムービークリップシンボルをステージの別の位置に配置してみてください。
新しくできた「インスタンス」の位置座標は、当然先のものとは異なっているはずです。
その「インスタンス」を変形ツールなどで拡大すると、青○の中の「インスタンスの大きさ」も変更されます。
さらに「カラー」パネルで、個別にアルファ値（透明度）や着色を設定して変更することもできます。

115

このように、「インスタンス」は、元はひとつの「シンボル」ですが、ステージに配置された時点で、それぞれステージ上の固有の大きさ、位置座標、透明度、色、回転角度などをもつことになります。
この、大きさ、位置座標、透明度、色、回転角度などの”属性”のことを「インスタンスのプロパティ」といい、「インスタンスのプロパティ」は、ステージに配置されたインスタンスごとに固有の「値」をもちます。
先にドラッグした「インベーダ」ムービークリップインスタンスと後からドラッグしたインスタンスとは、姿かたちは同じでも、プロパティのひとつである位置座標、Ｘ座標値とＹ座標値がそれぞれ異なるということになります。
「情報パネル」や「カラーパネル」などは、そのインスタンスの現在の値を示すだけでなく、各パネルで値を変更することで、ステージ上のインスタンスのプロパティ値を変更することもできます。
たとえば、先のインスタンスを選択して、「情報パネル」の「X=432.0」「Y=120.0」とあるテキストボックスの中で、「X=100.0」「Y=50.0」と書き換えると、その瞬間、変更後の座標に移動します。

116

ＦＬＡＳＨアニメの優れた点のひとつは、質量をもたない「インスタンス」を使い回しすることで全体のバイト容量を抑え、モーショントゥイーンによって、キーフレーム間の「プロパティの値」の差※をマシンが計算し、時間軸である個々のフレームに自動的に「計算後の値」を割り振るため、軽い動きが実現できることです。
※モーショントゥイーンの開始フレームと最終フレームにあるインスタンスは、それぞれ「別のインスタンス」です。
最終フレームをキーフレームにしたとき、開始フレームにあったインスタンスの複製（コピー）が新たに作成され、同じ位置に配置されたことになり、別のインスタンスであるからこそ、それだけをドラッグして異なる座標（プロパティの値が異なる）に移動したりすることができるのです。

■ＦＬＡＳＨアニメのおさらいの最後に、その「モーショントゥイーン」を使って２つの「インベーダ」ムービークリップインスタンスを動かしてみましょう。
�@シーン編集画面で、レイヤーを追加し、「レイヤー１」「レイヤー２」それぞれにひとつづつ「インベーダ」ムービークリップインスタンスを配置します。
※「レイヤー１」のどちらか一方の「インベーダ」を右クリック、右クリックメニューの「カット」で切り取り、 「レイヤー２」の１フレームをクリック反転させ、ステージで右クリック、右クリックメニューの「ペースト」で振り分けできます。
�A「レイヤー１」の「インベーダ」を「X=56」「Y=56」の位置に配置し、カラー着色で色を「黄色」に変更、 「レイヤー２」の「インベーダ」を「X=440」「Y=120」の位置に配置し、色を「青」に変更します。
�B各レイヤーの３６フレームにキーフレームを挿入。
「レイヤー１」の「インベーダ」を「X=440」の位置に、「レイヤー２」の「インベーダ」を「X=56」の位置にそれぞれ横移動。
※ここまでは各々インスタンスの位置座標及び色のプロパティを、パネルを使って”手動で値を変更”したことになります。
�C各レイヤーの１フレームをクリック選択して「モーショントゥイーン」を設定してください。



図のようになります。
黄色の「インベーダ」は、最初、プロパティであるＸ座標の値が「X=56」、最終フレームの３６フレームで「X=440」です。
その差「440-56=384」を３６フレームかけて「モーショントゥイーン」で均等に移動しますから、
１フレーム当りの移動量は「384÷(36-1)」で約11ｐｘになります。
フレームレートを１/１２秒に設定していますから、この場合は、インスタンスのＸ座標プロパティの値を”マシンが自動的に”１/１２秒ごとに１１ｐｘづつ加算して位置を変更し移動させるということを行っています。
青の「インベーダ」は、その逆に１/１２秒ごとに１１ｐｘづつ減算して位置を移動させています。

117

モーショントゥイーンで出来ることはモーショントゥイーンで行ったほうがＦＬＡＳＨの利点を発揮できますから、今回あえてアクションスクリプトを使用していません。
アニメにアクションスクリプトを使うことは、基本的に、これら「インスタンスのプロパティの値の設定や変更」を、”編集の際（手動）”でもなく”モーショントゥイーン”でもなく、マシンが理解できる”プログラム”によって行うことです。
そして、各インスタンスは、シーン（大元のムービークリップ）上だけではなく、そこに配置されたインスタンスの中にも「入れ子構造」で存在するので、これをアクションスクリプトで行おうとすれば、どこにある何のインスタンスの、どのプロパティなのか（大きさなのか、位置なのか・・）を、ひとつひとつ”マシンが理解できるように特定する”必要があるのです。
したがって、アニメの元になるオブジェクト（部品）、主にムービークリップインスタンスがまず配置され、その階層構造やムービークリップ内の仕組みをしっかり把握していないと、正しいアクションスクリプトが記載できないということを、初回にあたって是非ご理解ください。

具体的なアクションスクリプトについては次回以降、順次ご説明します。




invader.fla ←今回のサンプル制作ファイルです。右クリックして「対象をファイルに保存」でダウンロードできます。