ＷＥＢサイトのＦｌａｓｈ

質問

http://www.nhk.or.jp/kokokoza/

このウェブサイトのように、カーソルがあたるとぐるっと画像が動くようにしたいのです。どんな指定をするべきでしょうか。

回答No.1

BlurFiltan · ベストアンサー

> どんな指定をするべきでしょうか。

「どんな指定」と軽く書かれているところにFlashを全然知っていらっしゃらないという不吉な予感がします。
作成が難しいということはなくどちらかと言うと比較的簡単なことですが，「指定」という次元の話ではありません。

Flashは基本的に，
「自分で動かしたいように構造を作成したりActionScriptプログラミングなどをして動かす」
ものです。
つまり，「動かしたいように動かす。そのためにしくみを作る。」のです。

またこれを作成するためには，
少なくとも Flash 作成ソフトが必要です。
　　　　　　~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Flash作成ソフトのソフト名も書かれていなければ，
またそのFlash作成ソフトのバージョンも書かれていません。
これでは回答不可能です。

したがって勝手に，
Macromedia(現Adobe) Flash MX 以上のバージョンをお持ちだということで下記を回答します。
Flash MX 以上 とは Flash MX，Flash MX 2004，Flash 8，Flash CS3 Professional のことです。

＝＝＝＝＝＝＝＝＝＝＝＝＝

新規ドキュメントを作成して，
矩形ツールでステージ上に 80×80px くらいの正方形塗りを描きます。

※Flash CS3 Professional の場合は，
　この時点で「ファイル」→「パブリッシュ設定」で「Flash」タブを選択し，
　ActionScriptのバージョン を
　ActionScript2.0 か ActionScript1.0 にしてください。

その正方形(=■)を選択して，反時計回りに45°回転させます(=◆)。
その◆を選択して，「修正(または挿入)」→「シンボルに変換」でムービークリップに変換します。

このムービークリップに変換するとき，
「基準点」を真ん中にチェックして「OK」しムービークリップに変換します。

　基準点(R)：□□□
　　　　　　　　□■□
　　　　　　　　□□□

ムービークリップに変換をしましたら，
その◆のムービークリップを選択した状態で，
下のプロパティインスペクタ(プロパティパネル)を表示させて，
左の方にあるインスタンス名を付ける部分，

　[ムービークリップ　　ｖ]
　[ <インスタンス名>　　　]

となっている <インスタンス名> のグレーの文字部分にインスタンス名を付けます。
インスタンス名は半角文字でアルファベットから始まっていれば何でもかまいませんが，
この説明では「ko_mc」というインスタンス名を付けることにしておきます。
「ko_mc」の意味合いは「子ムービークリップ」です。
（後でさらに「親ムービークリップ」の中に入れるので「子ムービークリップ」です。）

そのステージ上の「ko_mc」を選択して，
今度は時計回りに45°回転させます。
最初は反時計回りに45°，今回は時計回りに45°ですから，
また最初の正方形と同じ向き(■)に戻すということです。

何をしているのかと言うと，「ko_mc」のx軸の方向を変えているのです。

　■を普通にムービークリップに変換した場合
　「ko_mc」のx軸＝横方向
　■■■■■
　■■■■■
　＜─ x ─＞
　■■■■■
　■■■■■

　■を◆にしてムービークリップに変換し ■に戻した場合
　「ko_mc」のx軸＝斜め方向
　┌■■■■
　■＼■■■
　■■ x ■■
　■■■＼■
　■■■■┘

この元の向きに戻った「ko_mc」を選択して，
「修正(または挿入)」→「シンボルに変換」でもう一度ムービークリップに変換します。
このムービークリップにはこの説明上インスタンス名は不要です。
インスタンス名は不要ですが，便宜上「親ムービークリップ」と呼ぶことにします。

「親ムービークリップ」をダブルクリックするなどして，
その「親ムービークリップ」内のタイムラインの編集に入ります。
「親ムービークリップ」内のタイムラインは，
１レイヤー(レイヤー1)だけがあってそのレイヤーに「ko_mc」があるはずですから，
その レイヤー1 と書いてある文字部分を選択し，
右クリック→レイヤーを挿入 あたり(バージョンやOSによって少し仕様が違う)でレイヤーを追加します。

その追加したレイヤーに，
「ko_mc」と同じ大きさの正方形塗りを，
ちょうど「ko_mc」に重なるように今度は透明な塗り（アルファ0％）で描きます。
この塗りはマウスカーソルのヒットエリアになります。

　□ レイヤー２　　・・・□|●| ←透明な塗りの正方形
　□ レイヤー１　　・・・□|●| ←「ko_mc」

透明な正方形塗りが描けましたら，
「編集」→「ドキュメントの編集」などでシーン1などメインのタイムラインの編集に戻ります。

タイムラインの編集に戻ると，そこには「親ムービークリップ」があるはずですから，
その「親ムービークリップ」を選択した状態で下のアクションパネルを表示させます。
アクションパネルが出ていない場合は，「ウィンドウ」→「アクション」などで表示させます。

アクションパネルを表示させますと，
パネルの右半分以上に白いスクリプトを書く部分があると思いますから，
その部分に次の ActionScript を記入（コピペ）します。

--------------------------------------
// このムービークリップが表示されたとき
onClipEvent (load) {
//回転するスピードの設定(適当に変える)
speed = 1/20;
// 変数 kodo(弧度) を１回転に初期設定
kodo = 2*Math.PI;
// フラグの初期値を false にしておく
flag = false;
}

// このムービークリップにロールオーバーしたとき
on (rollOver) {
// フラグ が true でない場合
if (!flag) {
// フラグを true にする
flag = true;
// 変数 kodo(弧度) を 0 にする
kodo = 0;
}
}

// １フレーム進む時間毎に随時実行
onClipEvent (enterFrame) {
// kodoを １回転 に speed の割合ずつ近付ける
kodo += (2*Math.PI-kodo)*speed;
// ko_mc の横スケールを Math.cos(kodo)*100 にする
ko_mc._xscale = Math.cos(kodo)*100;
// もし１回転にある程度近付けば
if (kodo>=2*Math.PI-1/2 && flag) {
// フラグを false に戻す
flag = false;
}
}

// このムービークリップをクリックしたとき
on (release) {
// 他のページにジャンプさせる場合
getURL("他のページのURL");
}
--------------------------------------

あとは，
「制御」→「ムービープレビュー」などで動作確認できると思います。
または SWF をパブリッシュしても良いです。

上記スクリプトはなるべくシンプルにした１つの例です。
書き方は様々です。
実際はフレームにまとめて書いているかもしれませんし，
カスタムクラスなどを作成しているのかもしれません。

Math.cos() とは数学の cos（コサイン）のことです。
Math.PI とは数学の π（パイ）のことです。
cos や弧度（角度の単位の一つ）の説明まではここではできません。
この辺は ActionScript というよりも数学です。
もし数学がわからなくて知りたい場合は高校数学の教科書や参考書などで勉強してください。

※上のスクリプトでは，
　 説明の都合上「１回転」とかいう言葉を使っていますが，
　 実際は回転など全くしていません。
　 kodo を変化させて得られる Math.cos の値を利用して
　 「ko_mc」 の _xscale を 100～-100 の範囲で
　 変えているだけです。

グルグル回転するアニメーションは，
「ko_mc」内にモーショントゥイーンで作成して，
その「ko_mc」のタイムラインを play() させたり stop() させてもかまいません。
そうすれば，cos や π などは不要になります。
しかし，
モーショントゥイーンの作成方法までは書けません。
もっと長い説明になってしまいますし，図入りの本などを参考にする方が良いと思います。

↑以上「指示」のような次元の話ではありませんよね。
「そう動くように自分で作る」のです。
ここが面倒と言えば面倒ですし頭を使うところですが，
逆に言えば自分が動かしたいように自由に動かすことが可能だということです。

Flashの上の方ではハトが飛んできて留まって首を振っていますが，
これも「ハトが飛んできて留まって首を振る」というような指定をしているのではなく，
そういうアニメーションやしくみを地道に作っているのです。

なお，
Flash 作成定番ソフトMacromedia(現Adobe) Flash での作成方法を書きましたが，
Suzuka などフリーのソフトでもこのくらいは当然できます。
また上で書いたActionScriptも共通で使えます。
ただしソフトの仕様(使い方作り方)は違うので作成方法は上のものとは全く異なります。

「Suzuka」
http://www.cty-net.ne.jp/~uzgensho/

もし Flash MX 以上をお持ちでない場合は使ってみられるのも良いかもしれません。

お礼

懇切丁寧で明晰なご解答をしていただき、感謝致します。
ご指摘なされる通り、当方はウェブサイトやFlashに関して
とてつもない初心者だということが身に染みてよくわかります。
なるほどなるほど。これからSuzukaにていろいろ、試すところから
はじめてみようと思っています。Suzukaですと、やはり教えていただいた作成方法とはまったく異なるのですね。しかし、自分には全く不可能な領域かと早とちりしてしまっていたので、大変励みになるご解答でございました。本当にありがとう御座います。