FLASHでこんな効果

質問

FLASH MX でこんな事考えているんですが、

マウスが触れると犬がしだいにネコになり、ずっと触れたままだとネコのままでマウスが離れると、しだいに犬にもどっていく。さらに触れたままクリックするとシーン２に移る。

こんな事なんですが、透明ボタンを作りオーバーのところには犬がネコに変わるシェイプトィーンのムービークリップを仕込んでできたのですが、マウスが離れるときにネコが犬にもどるムービークリップをいれられずネコが一瞬で犬になってしまいます。これはボタンでは無理なんでしょうか？アクションスクリプトでやるにはどんなスクリプトを書けばいいのでしょうか。御教授下さい。

回答No.2

DPE · ベストアンサー

＃１です。
まず、透明なボタンについてですが・・・
従来のFlashではムービークリップの上でのクリックやロールオーバー・ロールアウトが検出できなかったので、透明なボタンを重ねる手法がとられてきました。ですが、MXからは、ムービークリップでもこれらが検出できるようになりました。透明なボタンを重ねる必要はありません。
ムービークリップの作成までは、問題がありませんでしょうか？作成を始める時は、「挿入」→「新規シンボル」でシンボルの編集画面にすると、シーンのタイムラインと混同しなくなると思います。
ムービークリップの内容を簡単に書くと、

　・フレーム１：犬の絵
　・フレーム２～10：犬→ネコのシェイプトゥイーン
　・フレーム11～20：ネコ→犬のシェイプトゥイーン
　・フレーム１・10・20に stop(); アクション

といった感じになります。トゥイーンの長さはお好きなように調節してください。stop(); はシーンのタイムラインではなくムービーのタイムラインの、各トゥイーンの最後のフレームに入れます。
ムービークリップの編集が終わったら、シーンの編集に戻ります。タイムラインの下に「シーン 1」「（編集中のシンボルの名前）」と書かれている部分がありますから、「シーン 1」をクリックしてください。これでシーンの編集に戻れます。

シーン 1、つまり、ムービーそのもののレイヤー構成は、レイヤー１を「ボタン」、レイヤー２を「アクション」とします。
「ボタン」のレイヤーにキーフレームを作り、先ほどのムービークリップのインスタンスを配置して、インスタンス名を付けます。＃１のサンプルでは、clip という名前になっています。
「アクション」のレイヤーにもキーフレームを作り、＃１で書いた、clip.on*** = function () ・・・のアクションを設定します。
なお、この状態では再生直後にシーン２に行ってしまいますので、ボタンが押されるまでムービーを止めておかなければいけません。＃１のスクリプトの最後に stop(); を入れて、ボタンが押されるまでムービーを止めておきましょう。

ポイントは、ボタンの形の変化を１つのムービークリップの中にまとめて作るところです。
メインのタイムラインに直にこれらのアニメを組んでしまうと、マウスカーソルが乗った／離れた時の変化をアクションで制御するのが難しくなります。

お礼

すごい。できました。うーーむ、こうやってやるんですね。目からウロコです。このアクションでやりたかったアイデアが結構たまってたんで作るのが楽しみです。前回の質問もDPEさんに回答してもらってました。たびたびの詳しくわかりやすいヘルプ感謝してます。本当に有難うございました。

回答No.1

DPE

Flash MXからは、ムービークリップでも、ボタンのように、ロールオーバーやロールアウトを検出して処理ができるようになりました。ボタンではなくムービークリップとして作った方が、簡単だと思います。

ムービークリップは、通常の状態・マウスカーソルが乗った状態・離れた状態をまとめて、１つのムービークリップとして作ります。アクションを同時に設定しますので、アクション設定用のレイヤーを、１つ作っておくと便利です。
まず、フレーム１に通常の状態（ボタンで言うところの「アップ」にあたる）の絵を描画します。
「アクション」のレイヤーに stop(); を設定し、普段はフレーム１が表示されるようにします。
フレーム２から、ボタンの上にマウスカーソルが乗った時（ボタンで言うところの「オーバー」にあたる）の絵を描画します。犬がネコに・・・とのことですから、フレーム２からシェイプトゥイーンを使い、ご希望のアニメを作成します。
仮に、フレーム２～10でアニメを作ったとします。
マウスが乗ったアニメが再生されたら、最後の状態（つまり、ネコの状態）で止めておくようにします。アニメの最後であるフレーム10に stop(); アクションを設定して、この状態のままムービークリップを止めておきます。
続けて、フレーム11から、マウスカーソルが離れた場合に再生するアニメを作ります。ここではとりあえず、フレーム20までのアニメだとします。
フレーム20にも、これまでと同様に stop(); アクションを設定します。

ムービークリップはこれで完成ですが、これだけでは何も起こりません。マウスカーソルが乗った時／離れた時、それから、ムービークリップがクリックされた時に実行するアクションを設定する必要があります。
MXからは、ムービークリップにイベントが起きた場合の処理を、予め定義しておくことができるようになりました。ムービークリップにではなく、フレームアクションとして定義します。
シーンの編集に戻り、メインのタイムラインで、ムービークリップにイベントが起きた時に行う処理を定義します。
今回は、イベント発生時、つまり、マウスカーソルが乗った時にフレーム２から、離れた時にフレーム11から、ムービークリップを再生するだけで構わないので、アクションは以下のようになります。ムービークリップのインスタンス名は、とりあえず、clip という名前だとします。
（↓このスクリプトをコピーして利用する場合は、各行の行頭に入っている全角のスペースを、全て半角のスペースかタブに置き換えてください）

　　//マウスカーソルが乗った時のアニメを再生
　　clip.onRollOver = function ()
　　{
　　　this.gotoAndPlay(2);
　　};

　　//マウスカーソルが離れた時のアニメを再生
　　clip.onRollOut = function ()
　　{
　　　this.gotoAndPlay(11);
　　};

更に、ボタンとして使うのですから、クリックされた場合の処理の定義も必要です。

　　//クリックされた時の処理
　　clip.onPress = function ()
　　{
　　　/*以下に、クリックされた時の処理を書く*/
　　　gotoAndPlay("シーン 2",1);
　　};

これで、いかがでしょうか。ご不明な点がありましたら、補足してください。

補足

早速の御回答ありがとうどざいます。やってみたところうまくいきません。どこか問題ありますか。
レイヤー１にムービークリップを、レイヤー２にそのフレームアクションを、そしてレイヤー３に透明なボタン図形のシンボルを１フレームから２０フレームまで置きレイヤー３のフレーム１にボタンアクションとして教えていただいたスクリプトをすべて設定したのですが、シンタックスチェックすると

シーン = シーン 1, レイヤー = レイヤー 3, フレーム = 1 : 行 1:ステートメントは on ハンドラ内でなくてはいけません。
clip.onRollOver=function()

というエラーがそれぞれ３ケ所で出てしまいます。
行頭は半角のスペースにしてますしスクリプト自体はおかしいとは思わないのですが、私のやり方が根本的にどこか間違っっていますでしょうか。

（シーンの編集に戻り、メインのタイムラインで、ムービークリップにイベントが起きた時に行う処理を定義します。）

このへんがよくわかってないからかもしれません。ややこしいやり方をしているのかもしれませんが、、、。
よろしく御指摘おねがいします。