• 締切済み

AS3によるFLASHサイトのローディング処理について

いつもお世話になります。 ActionScript3(環境:FLASH CS4)にてフルFLASHサイトの制作を行なっております。 サイトにアクセスした際に表示されるローディング部分に関するご質問です。 ローディング処理部分をタイムラインの『1』に記載し、ローディング完了後にタイムライン『2』 に移動してページの表示処理が行なわれる仕組みで作りましたが、下記の2点でつまずいております。 (※ローディング処理のソースは下記に記載しております) 1.ローディングゲージが伸びていかない。 loadingImageというMovieClipのマスク部分のscaleXを0にし、ローディングの読み込み完了分に 合わせて徐々にscaleXの値が上がっていき、ローディングが全て読み込みされた時点でscaleXが 1になるような仕組みで作ったつもりですが、実際にサイトにアップしてもゲージが徐々に上がらず、 一気にscaleXが1になってしまいます。 徐々に伸びる部分にイージング処理を入れたかったので、scaleの値を代入する場所に (per - loadingImage.logoMask.scaleX)/8;という処理を入れております。 一般的なFLASHサイトのように徐々にゲージが伸びていく処理を行うにはどのようにしたら良いでしょうか? 2.ローディングアニメーションが表示されるまでに時間がかかる 一般的なFLASHサイトでは、サイトにアクセスした際にすぐにローディング画面が表示され、 ロード処理が開始されますが、下記の作りではローディング画面が表示されるまでにかなり時間が かかってしまい、真っ白な画面のままでブラウザが暫くサイトの読み込みを行なっているようです。 どうやら、ローディング画面が出る前の時点で画面全体の読み込み処理が始まってしまっている為に、 上記の1のゲージが伸びていかないことも関連しているようなのですが、 サイトにアクセスした際にスムーズにローディング画面を表示させ、そこからデータの読み込みを行なうには どのような記述が必要でしょうか? お手数では御座いますが、宜しくお願い申し上げます。 // =============================================================================== this.stop(); var info:LoaderInfo = root.loaderInfo; // ローディングゲージMC var loadingImage:MovieClip = new loadingImage_mc(); loadingImage.logoMask.scaleX = 0; // このタイムラインにイベントリスナーを登録 root.addEventListener(Event.ENTER_FRAME, watchLoading); function watchLoading(event:Event) {   var per:Number = info.bytesLoaded / info.bytesTotal;   loadingImage.logoMask.scaleX += (per - loadingImage.logoMask.scaleX)/8;   if (per >= 1) {     // このタイムラインに登録したイベントリスナーを削除     root.removeEventListener(Event.ENTER_FRAME, watchLoading);     // タイムライン2に移動     play();   } } // ===============================================================================

みんなの回答

回答No.1

1の症状 マスクはマスクされる領域がないと マスクなしってことにされます 2の症状 ライブラリの中で最初のフレームに書き出し チェック付いてるシンボルが他にも 沢山あったりするとかでしょうか 以下要らないおせっかいです このスクリプトだと 読み込みが完了しても 全部のロゴを表示する前に フレーム2に行っちゃいますが それでいいんですか? 多分そんなに重いファイルじゃない限り 一瞬でDL終わってイージングもなにもなく 一瞬1/8だけロゴを表示して刹那 次ぎに行っちゃうと思うのですが あと、作ったloadingImage_mcをどこにも addChildしてないんですが 動かそうとしてるloadingImageと スクリプトに書かれてるloadingImageは 本当にちゃんと同じものですか?

John12345
質問者

お礼

H240S18B73様 早々にご回答いただきありがとう御座います。 下記インラインにてご回答いたします。 >1の症状 >マスクはマスクされる領域がないと >マスクなしってことにされます 失礼いたしました。 ローディング処理の部分だけを記載しましたので、 インスタンス宣言を省いてしまっておりました。 正確にはloadingImage_mcを宣言しており、 正しくマスクもされております。 >2の症状 >ライブラリの中で最初のフレームに書き出し >チェック付いてるシンボルが他にも >沢山あったりするとかでしょうか 最初にフレーム書き出ししているシンボルが計16個程あります。 1フレーム目(今回の例で言うローディング処理部分)で使わない シンボルはプロパティで「1フレーム目に書き出し」にチェックを入れない にした方が適切でしょうか? >このスクリプトだと >読み込みが完了しても >全部のロゴを表示する前に >フレーム2に行っちゃいますが >それでいいんですか? ローディングが終了し、且つそのタイミングで全部のロゴ (ここで言うマスクのscaleXを1)を表示させたいのですが、 どの処理部分を変更したら良いでしょうか? >多分そんなに重いファイルじゃない限り >一瞬でDL終わってイージングもなにもなく >一瞬1/8だけロゴを表示して刹那 >次ぎに行っちゃうと思うのですが SWFのサイズは約1.86MBになります。 コンテンツ量等にもよると思いますが、 一般的なフルFLASHサイトの容量はどの程度なのでしょうか。 ご回答いただけると幸いです。 宜しくお願い申し上げます。

John12345
質問者

補足

お世話になります。 先程記載しました内容に補足です。 1フレーム目に書き出ししているシンボルが16個程あると記載しましたが、 ローディング時に必要ないシンボルを1フレーム目に書き出ししないように設定した所、 SWFファイル容量も約300KBとだいぶ軽くなりました。 最初の読み込み時も無駄な時間がかからずにローディング画面に 遷移するようになりました。 ただ、ご指摘の通り上記のスクリプトですと、最初に一瞬ロゴが表示されたまま ロード完了になってしまい、マスクのscaleが1になる前に次のステップに進んでしまいます。 こちらの正しい処理内容をお教えいただけると幸いです。 宜しくお願い申し上げます。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • AS3でのNowLoading処理について

    いつもお世話になっております。 ActionScript3(環境:FLASH CS4)にてフルFLASHサイトの制作を行なっております。 サイトにアクセスした際に表示されるNowLoading部分に関するご質問です。 ローディング処理部分をタイムラインの『1』に記載し、ローディング完了後にタイムライン『2』 に移動してページの表示処理が行なわれる仕組みで作りましたが、下記の点でつまずいております。 ■ローディングゲージが伸びていかない。 loadingImageというMovieClipのscaleXを0にし、ローディングの読み込み完了分に あわせて徐々にscaleXの値が上がっていき、ローディングが全て読み込みされた時点でscaleXが 1になるような仕組みで作ったつもりですが、実際にサーバにアップして確認しても scaleXが一瞬伸びただけでローディング処理が完了してしまい、ロード完了となって次のフレームに行ってしまいます。 swfファイルの容量は320KBですが、容量が小さいことが正しくローディングされない原因なのでしょうか。 一般的なFLASHサイトのように徐々にゲージが伸びていき、ローディング処理とscaleの値を連動させるにはどのようにしたら良いでしょうか? お手数では御座いますが、ご教授の程、宜しくお願い申し上げます。 (『loadingImage.scaleX += (per - loadingImage.scaleX)/8;』はscaleXをイージングさせる為の処理です) // =============================================================================== this.stop(); var info:LoaderInfo = root.loaderInfo; // ローディングゲージMC var loadingImage:MovieClip = new loadingImage_mc(); loadingImage.scaleX = 0; // このタイムラインにイベントリスナーを登録 root.addEventListener(Event.ENTER_FRAME, watchLoading); function watchLoading(event:Event) {   var per:Number = info.bytesLoaded / info.bytesTotal;   loadingImage.scaleX += (per - loadingImage.scaleX)/8;   if (per >= 1) {     // このタイムラインに登録したイベントリスナーを削除     root.removeEventListener(Event.ENTER_FRAME, watchLoading);     // タイムライン2に移動     play();   } } // ===============================================================================

    • ベストアンサー
    • Flash
  • AS3.0 ローディング

    こんにちは。 AS3.0でローディングを作成しているんですが、 うまくいきません。。 現状はこんなかんじです。。 参考書を参考に作成したんですが、 タイムライン上の1フレーム目に下記のASとloading_barを配置してあり、 ローディング終了後、2フレーム目から再生したいんですが、 ローディングが終了した後、そこからびくともうごきません。。。 var swf_loaderInfo = this.loaderInfo; swf_loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress); swf_loaderInfo.addEventListener(Event.COMPLETE, onLoaded); function onProgress(event){ var percent = Math.floor(swf_loaderInfo.bytesLoaded/swf_loaderInfo.bytesTotal*100); loading_bar.loaded_mc.scaleX=percent/100; }; function onLoaded(event){ swf_loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress); swf_loaderInfo.removeEventListener(Event.COMPLETE, onLoaded); this.play(); }; AS自体、学び始めてまもない初心者中の初心者です。。。 参考サイトやアドバイスなどありましたら、 どうぞよろしくお願いします。。

  • AS3.0にて。。

    AS3.0にて。。 先日本を参考に下記スクリプトを記述しました。 ほとんどのブラウザでは問題なく動作するのですが、 WINDOWSのIE6でのみローディングバーが表示されたまま止まってしまう事があります。 どなたが原因が分かりそうでしたら教えていただけないでしょうか? stop(); var _loaderInfo:LoaderInfo = this.loaderInfo; _loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress); _loaderInfo.addEventListener(Event.COMPLETE, onLoaded); function onProgress(event){ var percent = Math.floor(_loaderInfo.bytesLoaded / _loaderInfo.bytesTotal * 100); loadingBar.percent_txt.text = String(percent); loadingBar.loaded_mc.scaleX = percent/100; }; function onLoaded(event) { _loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress); _loaderInfo.removeEventListener(Event.COMPLETE, onLoaded); this.play(); };

    • ベストアンサー
    • Flash
  • FLASH AS3.0 ローディングバーについて教えてください。

    AS3.0を勉強しています。 インターネットや、書籍などで調べたのですが、どうしても原因がわからないので、どなたかご教授願います。 基本的な、横に伸びるローディングバーを作成したいと思っています。 タイムラインの1フレーム目に、矩形(H:10px,W100px)を作成し、シンボル化して、インスタンス名を『bar_mc』とつけました。 ASフレームの1フレーム目に、 //ローディングの読み込み var percent:uint = Math.floor(this.loaderInfo.bytesLoaded/this.loaderInfo.bytesTotal*100); //読み込み率に2をかけて、伸び率を2倍に設定 this.bar_mc.scaleX = percent * 2; ASレイヤーの2フレーム目に、 if (percent < 100) { gotoAndPlay(1); }else{ play(); } ASレイヤーの3フレーム目に、 stop(); と記述しました。 一応作動するのですが、問題は、ローディング中に横にのびるように設定した矩形が、設定してある200pxで止まらず、stageの右端いっぱいまでのびてしまうことです。 仮に、 this.bar_mc.scaleX = percent ; と変更しても、やはり右端までのびきります。 これは、何が原因でしょうか? 自分ではどうしてもわからないので、どうか教えてください。 よろしくお願いいたします。

  • ローディング画面について

    実現したいこと トップページのローディング画面について質問させてください。 現在、トップページにローディングを実装しています。 なお、ホームページ内のページ遷移からトップページ表示時は、ローディングを非表示にしています。 クライアント様から、検索画面→トップページ表示→検索画面に戻る→再度トップページ表示した際に、ローディングを表示したいとのご要望があり、試行錯誤しているところです。 ちなみに、’loading_bg’クラス・’body’タグは初めからdisplay:none;にしています。 ’loading_bg’は、ページ遷移の際に、トップページに行くとローディング画面がちらつくのが気になったためです。 ’body’タグは、ローディングが始まる前に一瞬読み込み前の画面が表示されるのが気になり、非表示にした方が気にならずに済んだからです。。。 /* ====================================  ローディング */ $(document).ready(function() { var time = new Date().getTime(); var h = $(window).height(); // セッションストレージから初回訪問のフラグを取得 var isFirstVisit = sessionStorage.getItem('isFirstVisit'); if (!isFirstVisit) { // 初回の訪問時にのみ実行 sessionStorage.setItem('isFirstVisit', 'true'); // セッションストレージに初回訪問情報を保存 showLoadingScreen(); // ローディング画面を表示する関数を呼び出す } else { // 2回目以降の訪問時には非表示 // ページ読み込みの際に非表示にするため、すぐに実行 hideLoadingScreen(); } // すべての読み込みが完了したら実行 $(window).on('load', function() { var now = new Date().getTime(); if (now - time <= 1000) { setTimeout(function() { stopload(); }, 1000 - (now - time)); } else { stopload(); } }); // 5秒たったら強制的にロード画面を非表示 $(function() { setTimeout(function() { stopload(); }, 5000); }); }); function showLoadingScreen() { var h = $(window).height(); $('.loading_bg').height(h).css('display', 'block'); } function hideLoadingScreen() { // フェードアウトのアニメーションを追加 $('.loading_bg').fadeOut(500, function() { // アニメーション完了後、非表示にする $(this).css('display', 'none'); }); } function stopload() { hideLoadingScreen(); // ローディング画面を非表示にする $(".wrapper").animate({ "opacity": 1 }, 500); } // ローディングの直前に表示を戻す document.addEventListener('DOMContentLoaded', function() { document.body.style.display = 'block'; });

  • ローディング画面の作り方(欲張りです)

    FLASHを触り始めたばかりですが、とても楽しく 不細工ながらも一生懸命いろんなのを作っています。 先日、趣味仲間とホームページの話になり、少しばかりFLASHを 触ってるばかりに友達のサイト作りを手伝う事になってしまいました。 簡単な、ボタン操作でキャラクターがピョコピョコ動く程度で良いという 話だったのでそれなら私も作れるかと思い手を貸す事になりました。 作業は順調に進み、すべての作業を終えたのですが 沢山面白機能を付けたばかりに少し重くなり、ホームページ閲覧時に 少し時間がかかります。 ローディング画面を作ってあげようと思ったのですが その友達のコンセプトの都合上、どうしても下記のようなローディング画面を 作らなくてはいけなくなりました。 ・・・・とても、難しく、もう1週間悩みやってますが成功しません。 誰かお助け下さい。 【やりたいこと】 ○読込中、3階層下にあるMC座標(Y位置)73.5⇒-44.8まで移動したい ○回線速度、ハイスペックマシンの方が見た場合、読み込みが速すぎて読み込みアニメが見れないので強制的に見せたい どうか、お助け下さい。 宜しくお願い致します

    • ベストアンサー
    • Flash
  • AS3を使って%だけ表示するプリローダーの作成方法

    AS3を使って%だけ表示するプリローダーの作成方法 はじめまして。あるサイトに掲載してあった方法でActionscript3.0、CS4を使って %のみ表示するプリローダーを制作しているのですが、どうしてもうまくいきません。 以下スクリプトになります。 //ファイルを読み込む var loader = new Loader(); loader.load(new URLRequest("VideoWall.swf")); //はじめは非表示にしてステージに追加 loader.visible = false; addChild(loader); //読み込み中に送られるイベント loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress); //読み込みが終了したときに送られるイベント loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete); function onProgress(e:ProgressEvent):void { //読み込んだファイル容量/全体のファイル容量を計算 var per = e.bytesLoaded/e.bytesTotal; //読み込んだ量をパーセントで表示 holder.txt.text = Math.round(per*100)+"%"; } function onComplete(e:Event):void { //ローディング表示を消す holder.visible = false; //読み込んだファイルを表示 //loader.visible = true; } ダイナミックテキストでパーセント表示用の数字100%を書き、インスタンス名をtxtにしていますが、下記の行がエラーとなってしまいます。 holder.txt.text = Math.round(per*100)+"%"; 数字はフレーム1つめに100%としか記入していないのですが、0%から100%まで記入しないといけないのでしょうか? 下記もエラーが出てしまいます。 function onComplete(e:Event):void { //ローディング表示を消す holder.visible = false; どなたかご教授頂けますと幸いです!

  • Strutsで重い処理を行う際の画面遷移

    Java jdk1.6.0_20 Struts-1.3.10 MySQL-5.0.45 を使用しています。 データの一覧などを画面に表示する際、件数が多くなると処理が返ってくるまでが遅くなることがあるため 最初にHTMLを表示させておいてデータ表示部(テーブルレイアウト)のところだけその後読み込むということを行いたいです。 できれば完了まで処理中であったりローディング中みたいなものも表示できればいいのですが、 まずは上記のことが行えるようになってから考えたいと思います。 最初の遷移時にはデータ表示の処理は行わず、読み込みが完了してからAjaxでデータ表示処理を行えばよいかと思ったのですが テーブル等複雑なレイアウトの書き換えやActionFormBeanなどが使えなさそうということもあって他に方法はないかと思っています。 良い方法があればご教授いただければと思います。 よろしくお願いいたします。

    • ベストアンサー
    • Java
  • 重い処理を行っているとGIFアニメが止まってしまう

    お世話になります。 ローディング画面を作成しようと思いスピナーのGIFを用意しました。 <div id="main"> <div id="loading"><img src="spinner.gif" /></div> </div> 上記のような感じで画面遷移した際にはスピナーが表示されるようにして、 ページの読み込みが終わった際に $(window).load(function() { $("#main").load('htmlのURL'); }); のように、htmlを読み込んで表示しようとしています。 実際にはjqueryのajax通信を使って非同期にサーバー側でHTMLを生成してそれを読み込むようにしているのですが、読み込む際にスピナーのGIFアニメが止まってしまいます。 重い処理(サーバー側の処理)を行っているからだと思うのですがGIFアニメをとめずにhtmlを更新することはできないのでしょうか。 よろしくお願いします。

  • Flash8でメインのファイルに外部ファイルを読み込む時、

    Flash8でメインのファイルに外部ファイルを読み込む時、 点滅したり動いたりする動画をローディング画面として表示させたいです。 外部ファイルにつけるのか、 それとも読み込む側のメインのファイルにつけるのか等、 よくわかりません。 ヒントや参考になるサイトがございましたら、 ぜひ教えてください!