マウスに反応するアニメーションについて

質問

AdobeのFlash CS4 Professionalを購入し、難しいマニュアルを見ながら四苦八苦しています。
最近、このサイトを知り、参考にさせて頂いていますが、なにぶんにも初心者ですので理解できない事が多すぎて・・・
少しずつ覚えていこうと思っています。

そこで私にも御伝授頂きたくご質問いたします。
　http://cweb.canon.jp/camera/eosd/kisssp/#/shooting/
上記のページの「ペット編」で犬がマウスに反応してマウスポインタに向かってお座りをします。
このアニメーションと同じ動作を初心者の私にも理解できる解説を宜しくお願い致します。

回答No.2

BlurFiltan · ベストアンサー

まず第一に理解しなければならない点は，
「犬が歩くアニメーションなど存在しない」 ということです。

「犬が "脚を動かすだけ" のアニメーション」 は存在します。
といいますか，タイムラインアニメーションで作っておく必要があります。
そして ActionScript で「犬を左右に移動させる」 ということをします。

　「犬の内部の動きは手動で作ったアニメーション」
　　　　　＆
　「犬全体が移動する動きはActionScript」

ということです。
「脚を動かす」＋「移動する」→「歩く」　です。

全体を理解するために，
「移動する」部分のみでも体感できる簡単なサンプルでも作成してみましょう。

Flash を起動させて，
「新規作成」 で 「Flash ファイル (AS 3.0)」 を選択し，新しいドキュメントを作成します。

テキストツール（ツールパネルの「T」ボタン）を選択し，
プロパティパネルで [静止テキスト] に設定し，
文字 設定部分で サイズ [20.0]pt くらいに設定して，
ステージ上の適当な場所に 『歩』 という一文字を打ちます。

フォントは何でもかまいませんが，
前に 「_ (アンダースコア)」 の付いた「_ゴシック」や「_等幅」や「_明朝」 というようなデバイスフォントは今回避けてください。
デバイスフォント "以外" の，何でも良い普通のフォントを使用します。
(デバイスフォントだと文字を反転させたとき消えてしまうというだけの理由です。)

そして，
選択ツール（ツールパネルの黒「←」ボタン） でその 『歩』 を選択し，
「修正」→「シンボルに変換」で，タイプ [ムービークリップ] に変換します。
この，
ムービークリップ に変換するときの シンボルに変換パネル の右の方には
「基準点」 を設定する箇所があります。
基準点はどこでも良いと言えばどこでも良いのですが，
今回のものを作成する都合上，「真ん中」 にするのが良いと思います。

　基準点(R) の設定
　　　　□□□
　　　　□■□
　　　　□□□

そしてムービークリップになったステージ上の 『歩』 を ダブルクリック して，
そのムービークリップ内のタイムラインの編集に移ります。

ムービークリップの中は，
「レイヤー1」 の１レイヤーだけがあって，1フレーム のみだと思います。

　レイヤー1　筆 ・・□|●|　　(←●に 『歩』 がある)

この 「レイヤー1」 の フレーム2 の場所を選択して，
「挿入」→「タイムライン」→「キーフレーム」などで，
フレーム2 も キーフレーム にします。

　レイヤー1　筆 ・・□|●|●|

その新しくできた フレーム2 のフレームにある 『歩』 という文字を
『座』 という文字に書き替えます 【図１↓】。

※以上までのことを簡潔に書くと，
　 　ムービークリップを作成し，
　 　そのムービークリップ内を２フレームにして，
　 　フレーム１には 『歩』 ，
　 　フレーム２ には 『座』 という文字を用意する。
　 ということです。

ここまでできましたら，
ステージ上 の何もないところをダブルクリックするなどして，
「シーン1」など メインのタイムライン の編集に戻ります。

※メインのタイムラインの編集に戻ると，
　 レイヤーは 「レイヤー1」 だけで，
　 フレームも フレーム1 が１つあるだけになっていると思います。
　 さっき作成した フレーム2 はムービークリップ内のタイムラインで，
　 今，この状態で見ているのは メインのタイムライン ですから
　 フレーム2 のキーフレームは無い状態で良いのです。

メインのタイムライン のステージ上には
『歩』 という文字だけが見えたムービークリップがあると思いますから，
その 『歩』のムービークリップ を選択して，プロパティパネルで，
例えば 「dog_mc」 というインスタンス名を付けます 【図２↓】。

そして メインのタイムライン の 「レイヤー1」 と書いてあるレイヤー名の部分を選択して，
「挿入」→「タイムライン」→「レイヤー」で新しいレイヤーを挿入します。

この新しく作ったレイヤーを ActionScript専用レイヤー と勝手に決めて，
このレイヤーの フレーム1 を選択した状態で 【図３↓】，
アクションパネルに次のような ActionScript を書きます。
コピペOKです。

/*------------------------------------------------*/
// 「dog_mc」 にイベントリスナーを登録
// 引数(イベント:毎フレーム実行，実行関数:moveDog)
dog_mc.addEventListener(Event.ENTER_FRAME,moveDog);

// カスタム関数 moveDog の定義
// 引数(イベント)：戻り値なし
function moveDog(evt:Event):void {
//
//余白(ゆとり)の変数 bln（略blank）を設定
var bln:int=10;
// 向きの変数 drc(略direction) の宣言
var drc:int;
// 動かすスピードの変数 spd(略speed)の設定
var spd:Number=2.5;
//
// もしマウスのX座標が 「dog_mc」のX座標+bln より大きい時
// (evt.target=イベントのターゲットインスタンス この場合「dog_mc」)
if (stage.mouseX>evt.target.x+bln) {
// 「dog_mc」のX軸方向の大きさを普通状態にする
evt.target.scaleX=1;
// 向きの変数 drc も 1 にする
drc=1;
// もしマウスのX座標が 「dog_mc」のX座標-bln より小さい時
} else if (stage.mouseX<evt.target.x-bln) {
//「dog_mc」のX軸方向の大きさを反転状態にする
evt.target.scaleX=-1;
// 向きの変数 drc も -1 にする
drc=-1;
}
//
// もし「dog_mc」上のマウスのX座標がblnより大きい時
if (evt.target.mouseX>bln) {
// 「dog_mc」内タイムラインを フレーム1 で停止
evt.target.gotoAndStop(1);
// 「dog_mc」を spd(px) ずつマウスの方向に動かす
evt.target.x+=drc*spd;
// 「dog_mc」上のマウスのX座標が0以下の時
} else {
// 「dog_mc」内タイムラインを フレーム2 で停止
evt.target.gotoAndStop(2);
// 「dog_mc」を spd(px) ずつマウスの方向に動かす
evt.target.x+=drc*spd;
}
}
/*------------------------------------------------*/

(ActionScript 3.0， Flash Player 9以上で動作)

そして，
「制御」→「ムービープレビュー」すれば動作確認ができると思います。

ムービークリップよりマウスが右にある時は
ちゃんとした向きの 『歩』 が右に動きますよね。
そしてムービークリップがマウス付近に近づけば，
ちゃんとした向きの 『座』 に変わると思います。

ムービークリップよりマウスが左にある時は
左右逆向きの 『歩』 が左に動きますよね。
そしてムービークリップがマウス付近に近づけば，
左右逆向きの 『座』 に変わると思います。

実際には 『歩』 や 『座』 の用意はしません。
「dog_mc」 内の フレーム1 には
「犬が脚を動かすだけのアニメーション入りムービークリップ」を配置します。
「dog_mc」 内の フレーム2 には
「犬が座るアニメーション入りムービークリップ」 を配置します。

階層構造を書くと次のようにするということです。

　メインのタイムライン
　　　└dog_mc
　　　　　├ フレーム1…脚を動かすアニメ入りムービークリップ
　　　　　└ フレーム2…座るアニメ入りムービークリップ

以上，
スクリプトの内容がわかるかどうかは別として，
大まかにはどうなっているかわかりましたでしょうか？

　入れ子状態のムービークリップを作成して，
　そのムービークリップのタイムラインや座標の動きを
　ActionScriptで制御＆管理する。

ということです。

なお，
「犬が脚を動かすアニメーション」や「犬が座るアニメーション」自体の作り方は，
ここでの説明は難しいです。
ここではご覧の通り 420×314px の図↓を１枚貼ることぐらいがせいぜいできることです。

Flash CS4 からは 「ボーンツール」 などが増えましたから，
こういうアニメを作るのは以前より比較的簡単になりました。
この辺を使っても良いかもしれません。

「ボーンツール IK」
http://www.google.co.jp/search?hl=ja&q=%E3%83%9C%E3%83%BC%E3%83%B3%E3%83%84%E3%83%BC%E3%83%AB+IK
などとネットで検索するか，
本に書いてあることを参考にして作るのが良いと思います。

また パラパラマンガ の要領で１コマずつ絵を描いても良いかもしれません。

＝＝＝ 補足 ＝＝＝

・「静的な動き」はタイムラインアニメーションで作成可能です。
・「動的な動き」には ActionScript が必要です。

ここで言う「動的」「静的」とは，
ものが「動く」とか「動かない」という意味ではありません。
動的要因によって何かが「変わる」か「変わらない」かということです。

映画 や ビデオ のようなものは一般的に何かの要因でストーリーなどが変わることはありません。
このようなものが 「静的」 なものです。
天気予報 や ニュース のようなものは天気や出来事によって情報や画像などが変わります。
このようなものが 「動的」 なものです。

単なる映画のようなアニメーションを作成する場合は，
ActionScript など全く要らないか，要ったとしてもほんの少しだけの場合が多いです。

「Flash閲覧者がキーを押したらミサイルを発射する」　とか，
「時間が来たら背景画像を変える」　とか，
「携帯の電波状況によってアンテナの数を変える」　とか，
そういう動的条件で見せる物の動向を変えるときには，必ず ActionScript が必要になります。

ご質問されているものも，
「Flash閲覧者がマウスを動かしたら物体の座標が変わる」
という「動的」要因によって変わるものですから，その部分には ActionScript が必要になります。

補足

こんなに早く、しかも初心者の私に分かり易く御回答頂けるとは、感謝の気持ちでいっぱいです。本当に有難うございました。
いつもBlurFiltan様の詳しい回答は、とても参考になり助かっています。

ついでで申し訳ないのですが、ご回答頂ければ幸いです。
参考のURLで画像にマウスを置くと画像が拡大して星が飛び散ります。

星が飛び散るのは、どのようにするのでしょうか？そして、その時点で（犬がお座りと同時に）効果音を加えたいと思っています。
星が飛び散るのと効果音を加える方法を御伝授頂きますよう宜しくお願い致します。

回答No.3

BlurFiltan

＃２ です。

「星が飛び散る」辺りは，
Flash の 基本中の基本である 『モーショントゥイーン』 です。

この辺は本などでキッチリされた方が良いと思いますよ...。
『モーショントゥイーン』 について 『CS4 用』 で書かれてある本です。

最近はどれが良いのか良く知りません。
もしお持ちでなければ， 『モーショントゥイーン』 について 『CS4 用』 で書いてある本を立ち読みするなどして探すのがベストだと思います。

ここでは例のごとく図説などに不向きですし。

一応は説明してみますが......。

ステージ上に星を描いて，
グラフィックシンボルのインスタンスに変換し（シンボル1），
さらに，そのグラフィックシンボルをムービークリップに変換します（シンボル2）。

　メインのタイムライン(シーン 1)
　　　└ムービークリップ(シンボル2 のインスタンス)
　　　　　　└グラフィック(シンボル1 のインスタンス)
　　　　　　　　　　└★の絵

ムービークリップをダブルクリックするなどして，
そのムービークリップ内の編集に入って
その中に４つのレイヤーを作り，
各レイヤーの同じ位置にグラフィックインスタンスをコピペで増やします。

　メインのタイムライン(シーン 1)
　　　└ムービークリップ(シンボル2 のインスタンス)
　　　　　　├グラフィック(シンボル1 のインスタンス)
　　　　　　│　　　└★の絵│
　　　　　　├グラフィック(シンボル1 のインスタンス)
　　　　　　│　　　└★の絵│
　　　　　　├グラフィック(シンボル1 のインスタンス)
　　　　　　│　　　└★の絵│
　　　　　　└グラフィック(シンボル1 のインスタンス)
　　　　　　　　　　└★の絵

各レイヤーを適当に 20フレーム くらいにして，
さらに各フレームに「挿入」→「モーショントゥイーン」で モーショントィーン を設定します。

各レイヤーの最終フレーム辺りを選択して，
各★グラフィックインスタンスを四方に配置します。
すると 「モーションパス」 という線が勝手に出てきます。

四方に配置した★グラフィックインスタンスを選択して
アルファ を 0 に設定します。

「自由変形ツール」を選択し，
Windows であれば 「Control (Ctrl)」 キー，
Mac であれば 「 Command」 キー を押した状態で，
カーソルを 「モーションパス」 の線の中央付近に近づけ，
カーソルの下に 「）」 のようなマークが出たとき 「モーションパス」 の中央付近を引っぱります。
すると線が曲線になります。

また，「自由変形ツール」の上にある 「ダイレクト選択ツール」で
モーションパス の アンカーポイント（端の点）をクリックすると
ペジェ曲線をコントロールできる コントロールハンドル が出てきますから，
これでさらに曲線を変形させても良いと思います。

これを繰り返して曲線運動をするアニメーションを作成します。

そして，レイヤーをもう１つ挿入して，
Actionscript専用レイヤーと勝手に決めて，
その最終フレームをキーフレームに変換し，
ムービークリップがループ再生しないように
stop();
を書きます。

ここまでを 【図】↓ にしてみました。

※図はあくまでもイメージです。
　 実際は 「分身の術！((((((★)」 のような ★ にはなりません。
　 「オニオンスキンマーカー」を設定して
　 「オニオンスキン」 を表示させているので，
　 「分身の術！((((((★)」 のような軌跡が見えるだけです。

以上のようにして作った ムービークリップを
どこか別のムービークリップの表示させたい場所に入れれば良いと思います。

書いてはみましたが，
以上の説明を読んでもよくわからないと思います。
とにかくこの辺は 本などを読んで，実際にやってみて，
Flash を使い倒しながら慣れるしかないと思います。

仮に説明を読んで理解できたとしても，
理解するだけでは決して実際に作ることはできないと思います。

この辺は 「Flashの基本中の基本」 ですが，
コピペすればできるような ActionScript などとは大違いです。
とにかく Flash を使い倒して感性や技術やコツなどを身に付けなければ何ともならないでしょう。

ちなみに上記で説明した Flash CS4 の モーショントゥイーン は，
『CS4 の モーショントゥイーン』 であって，『CS3 までの モーショントゥイーン』 とはかなり違います。
『CS3 までの モーショントゥイーン』 を CS4 では 『クラシックトゥイーン』 と言います。

現在，ネット上で単に 「モーショントゥイーン」 と検索しても，
出てくるページの大半は 『CS4 での クラシックトゥイーン』 のことを指しています。
混乱しないように気をつけてください。

『CS4 の モーショントゥイーン』 は，
『CS3 までの モーショントゥイーン』＝『CS4 での クラシックトゥイーン』
よりは，かなり簡単に色々なことができます。

上記の説明を例にしても，
『CS3 までの モーショントゥイーン』＝『CS4 での クラシックトゥイーン』
には モーションパス などありませんから，
曲線モーショントゥイーンを作成する場合は，
別レイヤーに 「モーションガイド」 という線をわざわざ描いて用意しなければなりません。
結構手間で大変です。
『CS4 の モーショントゥイーン』 の方がずっと楽です。

※『CS4 の モーショントゥイーン』 そのもの "自体" は，
　 Flash Player のバージョンを選びません。
　 例えば，
　 ムービークリップ の インスタンス は
　 初代 Flash の Flash 1 にはありませんが，
　 グラフィックシンボルのインスタンス ならあります。
　 また 初代 Flash 1 ではアルファはサポートされていません。
　 ですから パブリッシュ設定 で
　 Flash Player 1 を選んだ状態で作成を開始し，
　 グラフィックインスタンスにアルファを使わないような
　 CS4モーショントゥイーンを設定すれば，
　 Flash Player 1 対応用 SWF も作成することができます。
　 つまり，
　 　　「CS4 の モーショントゥイーン は，
　　　　Flash Player 10 以上でないと閲覧できない。」
　 　　ということは "決してない" 。
　 ので，比較的安心して使うことができます。

Flashの基本中の基本の説明にしては，専門用語のオンパレードですね。
「シンボル」，「インスタンス」，「モーショントゥイーン」，「モーションパス」，「オニオンスキン」，「オニオンスキンマーカー」，「アンカーポイント」，「コントロールハンドル」，「クラシックトゥイーン」…
いくら用語を覚えても，技術が身についていなければ何にもなりませんが，
「用語を覚えると検索などが楽になる」 というメリットがあるので，
この辺の専門用語も覚えた方が良いでしょう。

お礼

初心者に分かり易くご教示頂き本当に有難うございました。
本屋にはCS4の本が、まだ出てなくてCS3で試行錯誤していました。
モーショントゥイーンがこんなに簡単に出来ることに感動を覚えました。
ひとつずつ難題をクリアする毎にFLASHにのめり込んでいます。
Actionscriptをマスターするのに時間が掛かりそうですが、ひとつずつクリアしていきます。
また難題に直面した時は、ご教示頂きますようお願い致します。
本当に有難うございました。

回答No.1

salonpath

1.犬からみたマウスの方向（座標）を判定して、犬とマウスとの距離が0になるように犬の座標を変更
2.マウスと犬の距離が一定以下になると犬の座標変更を終了しお座りのモーションをスタート
マウスが一定距離以上離れると1へ

お礼

早々にアドバイス有難うございました。
全くの初心者ですので理解できませんでしたが、その後の試行錯誤で理解できるようになりました。