アニメーションするロールオーバーにリンクを張りたい

このQ&Aのポイント
  • アニメーションするロールオーバーにリンクを張りたい。FLASH8を使用し、指定のURLにリンクがかかりません。
  • ロールオーバーにリンクを組み合わせたアニメーションを作成しようとしていますが、リンクが正常に機能しません。FLASH8を使用しており、スクリプトの記述方法が間違っている可能性があります。
  • FLASH8を使用してアニメーションするロールオーバーにリンクを設定しようとしていますが、ボタンに反応せず、指定のURLにリンクが張られません。助けを求めています。
回答を見る
  • ベストアンサー

アニメーションするロールオーバーにリンクを張りたい

http://www.geocities.jp/peperon44/peach.html←の様にアニメーションしてリンク先が出てくるロールオーバーを作っています。 http://www.geocities.jp/peperon44/peach.fla←に作っているファイルを置きましたが 一番上の階層にシンボル化したボタンを置き、その下の階層ですべてのフレームアニメーションをさせていますが、1フレーム目に this.stop(); //マウスカーソルがロールインした this.onRollOver = function() { //ロールオーバー開始 rollover = true; }; //マウスカーソルがロールアウトした this.onRollOut = function() { //ロールオーバー終了 rollover = false; }; //フレームが進む度に実行 this.onEnterFrame = function() { if (rollover) { //次のフレームへ進む(最終フレームでは無視される) this.nextFrame(); } else { //手前のフレームに戻る(先頭フレームでは無視される) this.prevFrame(); } }; を入れ大ボタンから出てくる紹介、名前、名簿をそれぞれフレームアニメーションにさせ、シンボル化させて各オブジェクトに on (release) { getURL("name.html", "_foot"); } を入れていますが、指定のURLにリンクがかかりませんのでボタンに反応してくれません。記述が間違っているのか、スクリプトを書く場所を間違えているのだと思います。 このつくりだと一番上の階層に on (release) { getURL("name.html", "_foot"); } と入れると指定のURLにリンクされますが、それでは3つリンク先を分けられないので大ボタンから3つの文字がアニメーションして出てくる意味がありません。大ボタンから出てくる小ボタンにリンクを張るようにしたいです。 FLASHに関してはまだまだの未熟者ゆえ解らないです。何方かお助け下さい。 環境はWindowsXP ソフトはFLASH8です。

  • Flash
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • suzuki-_-
  • ベストアンサー率77% (152/195)
回答No.2

まず、スクリプト内で「無視される」というのがありますが、実際無視はされていません 各々最終フレームの次がない、前のフレームが存在しないから"機能しない"だけで、スクリプト自体は実行を試みています 本題のほうですが、on(release)等のボタンのフォーカスやクリックに直接関係するonイベントハンドラは、上階層のものが優先(というか全部分をボタン判定化)するので、入れ子の場合、下の階層部分が機能しなくなってしまいます 今回のような、ロールオーバーとロールアウトの判定取得は以下のようにhitTestを使うと解決されると思います //アニメーションMCの1フレーム目を以下に変更 this.stop(); this.onEnterFrame = function() { if (this.hitTest(_root._xmouse, _root._ymouse)) { //このMCにマウスが触れている場合 if (this._currentframe != this._totalframes) { //現在のフレームが最後でなければ1フレーム進む nextFrame(); } } else { //このMCにマウスが触れていない場合 if (this._currentframe != 1) { //現在のフレームが1じゃなかったら1フレーム戻る prevFrame(); } } }; //ここまで ただhitTestの範囲は円状のMCであっても、四角形として判定されるので、望みの形が四角形じゃない場合注意が必要です

peperon44
質問者

お礼

早速の回答ありがとうございます。お礼が遅くなりましてすいません。すごいですね。出来てしまいました。教えて頂いたスクリプトは今後にも活かしていこうと思います。 本当にありがとうございました。

その他の回答 (2)

回答No.3

No1の者です。 なにやら意味不明なこと言ってました(笑 No2の方の言うとおりです。 ですが、flaファイルを見たところいろいろ指摘したいところがありました。 『ちゃんとインスタンス名を決めて、ロールオーバーやリリースなどの個々の役割をキチンと決めてやる』 これを守れば、hitTestでやらなくてもロールオーバーとリリースは使えます。 thisでmc全体にかけているから、そういう問題がでるんです。 pressで出来るなんて大嘘でした(汗 すいませんでした。。

peperon44
質問者

お礼

たびたび回答を頂きありがとうございます。 インスタンスの扱いについては日頃から悩んでいます。

回答No.1

ロールオーバーとreleaseは使えません。 releaseでなく、pressを使うといいです。 on (press) { getURL("name.html", "_foot"); }

peperon44
質問者

お礼

早速の回答ありがとうございます。 今回の小ボタンのオブジェクトをrelease から press に書き換えてみましたが、やはり反応がありません。入れる階層を間違えているのかもしれないです。それか _foot" 以降が違うのかもしれません。

関連するQ&A

  • アニメーションするナビゲーションを作りたい

    http://toyota.jp/ このTOPページの様にナビゲーションに触るとアニメーションし、離すとアニメーションして、さらにアニメーションしながらコンテンツが出てきて、離すとまたアニメーションしながら閉じるというナビゲーションを作りたいです。各ボタンをムービークリップに変換して on(rollOver){ this.play(); } on(rollOut){ this.gotoAndPlay("end"); } on(release){ getURL("ファイル名.html"); } をオブジェクトに入れるまではわかったのですが。アニメーションしながら出てくるコンテンツの方はどうすればいいかわかりません。 FLASHのいろいろなサイトや本で同じ事をやっているものを探しましたが、同じものは見つかりませんでした。よくあるナビゲーションだけに誰か作ったことのある方はおられないでしょうか。お教え下さい。

  • ページによってロールオーバーが機能しない

    javascriptを使用して、カーソルがあたった時に色が変わる ロールオーバーを実現しているサイトを作りました。 ところが、ページによってロールオーバーが機能しません。 すべて同じソースをコピペしただけなのですがこれが原因ですか? サイトは複数ページあり、機能するものとそうでないもので 置かれている階層が異なるものもあります。 他のjavascriptも記述されているのですが、それらが影響しているのでしょうか? ちなみに下記のようなソースです。(一部抜粋) 【HTML】 <div id="a"> <a href=""> <img src="test.png" /> </a> <ul> <li> <a href="00.html"><img src="test2.png" class="rollover" /></a> </li> </ul> </div> 【javascript】 $.fn.rollover = function() { return this.each(function() { // 画像名を取得 var src = $(this).attr('src'); //すでに画像名に「_on.」が付いていた場合、ロールオーバー処理をしない if (src.match('_on.')) return; // ロールオーバー用の画像名を取得(_onを付加) var src_on = src.replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"); // 画像のプリロード(先読み込み) $('').attr('src', src_on); // ロールオーバー処理 $(this).hover( function() { $(this).attr('src', src_on); }, function() { $(this).attr('src', src); } ); }); }; // 画像をロールオーバーする箇所を指定 $(function() { $('.rollover').rollover(); }); $(document).ready(function(){ $('.bxslider').bxSlider(); }); ご存知の方がいらっしゃいましたら対策を教えてください。 お願いいたします!

  • FLASH5で、ボタンにロールアウト時にもアニメーションさせたい

    FLASH5を使用しているのですが、ボタンにマウスのロールオーバーで アニメーションを設定することはできますが、ロールアウトしたときにも アニメーションを設定したい場合、どのような方法があるか教えていただきたいです。 今私が作りたいのは「何もないところにロールオーバーするとボタンがゆっくり表示され、 ロールアウトするとゆっくり消える」というものです。 現時点では、私はムービークリップの中にボタンを入れ、最初のフレームで フレームアクションに stop (); を設定し、そこに配置してあるボタン(ここでは、透明なボタン)に on (rollOver) { play (); } で次のフレームに行くようにし、そこでロールオーバー時のアニメーション(ゆっくりボタンが現れる) を作成して、止めたいところでフレームアクションに stop (); を設定し、その停止時に配置してあるボタン(表示されている可視状態)に on (rollOut) { play (); } を設定し、その次のフレームからはロールアウト時のアニメーション(ゆっくりボタンが消える) を作成しています。 これだと、動作はするのですが メニュー等のようにボタン(この場合はボタンを含んだ ムービーですね)を隣接させて複数置いた場合などに on (rollOut) { play (); } のスクリプトがうまく効かず、他のボタンにロールオーバーしているにも関わらず前にロールオーバーした ボタンがそのままの状態(ボタンが消えず表示されたままの状態)で残ってしまいます。 tellTargetとifを使用するのかな?とも考えたのですがよくわからず困っています、、、、 長文で申し訳ないのですが、よろしくお願いします。

  • アニメーション終了と同時に別のhtmlファイルにリンクするアクションスクリプト。

    タイトル通りなんですが、 『アニメーション終了と同時に別のhtmlファイルにリンクするアクションスクリプト』は存在するのでしょうか? いつも、シンボル化したあとに、 on (rollOver) やon (release) で次のアクションを起こしていました。 カーソルも動かさず、クリックもせず、自然に新しいhtmlファイルにリンクさせる事は可能なのでしょうか? おわかりになるかた、 方法を教えて頂きたいです。 宜しくお願い致します。

    • ベストアンサー
    • Flash
  • ロールオーバーするとラベルにジャンプし、ロールアウトするまでストップ

    ボタンAとボタンBの2つがありまして、 ボタンAにロールオーバーすると、指定したラベルにジャンプし、ボタンAの位置にボタンBがきます。 オーバー後少し進み、ロールアウトするまでストップしたいのですが、どうすれば良いのでしょうか? ボタンAには ──────────────────── on (rollOver) { gotoAndPlay("ボタンBの所のラベル"); } ──────────────────── と書いてあり、ロールオーバー時にきちんとラベルにジャンプしてくれます。 ボタンBには、 『 buttonB 』と名前を付け ──────────────────── on (release) { getURL("http://www.URL"); } ──────────────────── と記載してあり、別ページに飛ばしております。 該当のラベルまでジャンプした後、10フレームくらい進んだフレームにActionScriptをかけておりまして、 ──────────────────── stop(); clearInterval(stopID); var mov_stop = 4000; stopID = setInterval(function () { play(); clearInterval(stopID); }, mov_stop); } ──────────────────── となっており、ここのフレームでロールアウトするまでストップさせたいのですが、どうすればいいのか分からず困っております。 分かり難い文章で申し訳ないのですが、どなたか詳しい方ご掲示お願い致します。

    • ベストアンサー
    • Flash
  • 画像がランダムに表示されるFLASHを作りたい

    こんにちは、お世話になります。 下記FLASHを作りたく以前も質問させていただいたのですが、どうしてもうまくいかないところがあり、再度投稿させていただきます。 (1)リロードするたびにランダムで切り替わる画像1~6がある (2)画像の横にボタン1~6があり、マウスオーバーするとそれぞれ画像1、画像2…と表示される (3)ボタン1~6をクリックするとwebページ1~6へジャンプ(リンクさせている) (4)画像1~6をクリックするとwebページ1~6へジャンプ(リンクさせている) まず画像を表示させるために一定区間をループ再生するフレームアクションを画像分(=6個)作りました。 各々frame1、2…とフレームラベル名をつけ、 ボタン1~6には on(rollOver){ this. gotoAndPlay("frame1"); } と記述しています。(ボタン1の例) そして1フレーム目に stop(); button1.onRelease = function(){ getURL("リンク先URL", "_self"); } gazou1に on(release){ getURL("リンク先URL", "_self"); } としています。これにより(2)(3)(4)は実現できています。でも(1)のランダムが全然分かりません。 ループ再生のフレームの前に7フレーム追加し、 1は空白キーフレーム 2はgazou1 3はgazou2… と配置し、フレーム1のアクションに stop(); button1.onRelease = function(){ getURL("リンク先URL", "_self"); } a=Math.ceil(Math.random()*6)+this._currentframe; gotoAndStop(a); と書き加えました。すると、画像が何も表示されないのです。IE7やSafariでは更新ボタンを押せばランダムで画像が現れるのですが、更新ボタンを押さなければ表示されませんし、Operaでは一度ボタンにロールオーバーさせなければ表示できません。 ランダム関数がよく分からずにやっているからダメなのだと思いますが、わからなすぎて何を勉強すればいいのかも分かりません。 とにかく時間がないので困っています。 どこが間違っているのかお教えいただけないでしょうか? 長文で申し訳ありません。どうかよろしくお願いします。

    • ベストアンサー
    • Flash
  • Flash、ボタンが動かない!?

    Flashでコンテンツ制作中です。 ボタンが思うとおりに動きません。 まず、シーン1上に、レイヤー10枚400フレームほどでアニメーションを作っています。 まずは、あるボタンをクリックすると、他のフレームに移動するように作っています(移動はすべてフレームラベルをつけて移動しています)。 移動先はアニメーションなのでシンボルでアニメーションクリップ化しています。 そのアニメーションクリップはいくつかのボタンの集合体です。ボタンをクリックするとまた別のフレームに飛ばしたいのですが、うまく出来ません。 ボタン自体が動いていないわけではありませんでした。 on (release) {getURL("http://www.~~/");}にするとちゃんとページを表示します。 on (release) {gotoAndPlay("main");}とすると移動しません。 on (release) {gotoAndPlay("シーン 1", "main");} でもダメでした。 ラベルのスペル間違えではないとした場合、他に何かダメな理由が考えられることはありますか? よろしくお願いします。

  • FLASHからのリンクの設定

    いつもここには大変お世話になってます。 少しややこしいんですが、質問なんです。 ここのカテゴリーでいいのかわかりませんが・・・ HPでトップページ(index.html)はフレームをきらずにフラッシュをベタ貼りしてます。 そこからフラッシュのボタンでframeフォルダのtest.htmlにリンクを飛ばします. test.htmlはフレームを上下の3つにわって上から head.html body.html foot.htmlに設定しています。 この時にフラッシュのボタンを押したらbody.htmlが任意の画面に変わるようにしたいのですが、思うような結果ができません。 スクリプトは index.htmlに function link(p1){ window.open("frame/test.html"); window.open(p1,"mainFrame"); window.open("frame/head.html","topFrame"); window.open("frame/foot.html","bottomFrame"); } フラッシュのボタンに on(release){ getURL("JavaScript:void(link(\"frame/a.html\"))"); } としています。 フラッシュの項目は全部で5コあり、それぞれにa.html~e.htmlとボディーを変えたいんです。 このスクリプトですと一応はできるのですが、新しい画面が開いてしまいます。 元のindex.htmlが変わるようにしたいのですが、どうしたらいいのでしょうか? わかりにくいと思いますがよろしくお願いします。

  • FLASHでのロールオーバーについて

    こんにちは。 FLASHで、メニューボタンにマウスを乗せると別の領域に画像が表示される、というものを作りたいのですが、どうもうまくできません。 今やっている方法はこんな感じです。まずムービークリップで、1フレーム目を空白に、2フレーム目に表示する画像としたものを作り、インスタンス名をinfomationとして配置します。このシンボルの1フレーム目に、勝手に再生されないようstop(); を書いておきます。そしてメニューボタン(これも、アニメーションボタンにしたいのでムービークリップで作っています)に、以下のスクリプトを書きました。 on (rollOver) { with (infomation) { gotoAndStop(2); } } これで再生しますと、マウスをボタンに乗せても画像が表示されません。(ポインタの形状は変わりますので、ボタンとしては認識してくれているようなのですが・・・) この方法で、間違っているところや、あるいは もっとよい方法がありましたら、教えていただけませんでしょうか。 本やネットで調べたのですが、あまりにも初歩的な質問のためか?解決につながるようなものが見つかりませんでした。 どうぞよろしくお願いいたします。

  • jqueryのロールオーバーについて

    jqueryのロールオーバー設定に関してご質問です。 あるサイトのコーディングを行ってます。 サイト内のナビーゲーションボタンを瓶の画像でまとめてます。 各瓶の画像にリンクを付け、 マウスを乗せるとその瓶が開いた画像が 切り替わりでフェードインの感じで出てくるという設定を目指しているのですが、 うまくいきません。 色々やった結果マウスを当てると、 切り替わりで空いた瓶がフェードで出るのですが、 その画像奥に閉じた瓶がそのまま残ってて重なってる感じです。 こちらはどのようにすれば上手く画像奥の瓶は消えるのでしょうか? ちなみに画像はpngです。 フェードの切り替わりは是非そのまま使用したいと考えてます。 あとマウスを外せばまた閉じた瓶がフェードで出るという感じを目指してます。 どなたかご教示いただいてもよろしいでしょうか? 一応下記htmlとjsコードも載せておきます。 ▼html <script src="../lib/jquery1.8.1.min.js"></script> <script src="../js/jquery.tgImageRollover.js"></script> <script type="text/javascript"> jQuery(function(){ $(this).tgImageRollover({ selector : 'img.rollover', // セレクタ ←(7) attach : '_on', // ファイル名末尾句 ←(8) onFadeTime : 600, // カーソルON時のアニメーション時間 ←(9) offFadeTime : 400 // カーソルOFF時のアニメーション時間 ←(10) }); }); </script> <a href="#"><img class="rollover" src="../img/nav01.png" alt="" width="100" height="50"></a> <a href="#"><img class="rollover" src="../img/nav02.png" alt="" width="100" height="50"></a> ▼jquery.tgImageRollover.js ;(function($){ $.fn.tgImageRollover = function(options){ var opts = $.extend({}, $.fn.tgImageRollover.defaults, options); $(opts.selector).each( function(){ this.onImage = $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+ opts.attach +"$2"); this.onHtml = $('<img src="'+this.onImage+'" alt="" style="position:absolute; opacity:0;">'); $(this).before(this.onHtml); $(this.onHtml).hover( function(){ $(this).stop().animate({'opacity': '1'}, opts.onFadeTime); }, function(){ $(this).stop().animate({'opacity': '0'}, opts.offFadeTime); } ) } ) } // default option $.fn.tgImageRollover.defaults = { selector : 'img.rollover', attach : '_on', onFadeTime : 600, offFadeTime : 400, }; })(jQuery);