ローディングバーセットを作ったよ:サンプルファイル付き

loader.jpg

以前のエントリ「ローディングバーセットを作ろう」で言っていたローディングバーセット(プリローダー)を作りました。

前回記事中のtype2ということで、ローディングバーだけのswfファイルを作って、そのルートにコンテンツとなるswfをMovieClipLoaderクラスで監視しつつロードするというタイプです。

ご自由に使っていただいて結構です。使用感等コメントいただけると嬉しいです。β版ということで、誤作動の責任等はとれません。僕の理解不足な箇所があればコメント欄にフィードバックをお願いします。

Download:loader.zip(Flash8形式、1.9MB)

Download:loader_mx2004.zip(FlashMX2004形式、なぜか2.6MB)

上記リンクから、プリローダーセットの圧縮ファイルをダウンロードしてください。内容は以下の通りです。

  • loader.fla&swf:このファイルのルートの_level2に、ターゲットをロードする仕組みになってます。ローディングバーのカスタマイズはこのファイルが対象になります。
  • loaded.fla&swf:ロードされる側のファイルです。
  • loaded.png:loaded.flaに埋め込まれている画像ですが、loaderから直接画像をロードできるようにもなっているので、添付しておきました。
  • com/trick7/shape/DrawArc.as:円弧を描くためのカスタムクラスです。いじる必要はありません。

loader.flaを開いた状態では、円弧を描くローダーMC: loadingCircleSetがステージ上に配置してあります。ライブラリの中にはオーソドックスな棒状のローダーMC: loadingBarSetもあります。使いたい方を選んでステージ上に配置してください。ロード対象swfの指定や、見栄えのカスタマイズ等、スクリプトは、各MCのフレームスクリプトに記述してあります。ロード処理に関する流れは両者共通で、以下のようになっています。

  1. _rootにロードされるswfファイルの容器となるcontainerを作成し、_alpha=0にしておく。
  2. MovieClipLoaderインスタンスを作り、リスナーで以下の処理を監視する。
  3. onLoadStart(ロード開始時):ロードされるswfをフレーム1で止めておく。
  4. onLoadProgress(ロード中の処理):何パーセントロードしたかを算出。ただ、この値をそのままローダーグラフィックのアニメーションに適応させると、滑らかには動かないので、アニメーション処理に関しては直下のonEnterFrameで処理する。
  5. onLoadComplete(ロード完了時の処理):ロード完了時のグラフィックをTweenクラスを使って処理する。念のために全ての処理が終わったら、ローディング関連のグラフィックを全て非表示する。containerのアルファを戻し、ロード対象のswfの2フレーム目に移動←コンテンツ開始。
  6. onLoadInit(ロード完了後、swfの初期化時の処理):ロードされた側のswfで、_rootのパス指定が使えるように「container._lockroot = true」にしておく。
  7. mcLoader.loadClip(”ロード対象となるswfへのパス”, container); を適宜書き直してください。

今回は簡単に見栄えがいじれるようにというテーマで作ったつもりです。各インスタンスやシンボルのカラーやサイズ、Tweenの設定あたりをいじるだけで、結構バリエーョンができるかと思います。

いろいろ説明すると、とても長い記事になりそうなので、カスタマイズ方法など、おいおい整理していきます。とりあえず、loadingBarSetの方のソースを載せておきます。一見して使えそうなら試してみて下さい。間違いがあったらコメントいただけると嬉しいです。

//setting--------------------------------------------
var friction:Number = 0.3;
//---------------------------------------------------
import mx.transitions.Tween;
var home = this;
this.loadBar._xscale = 0;
var container:MovieClip = _parent.createEmptyMovieClip("container", 2);
container._alpha = 0;
var percentage:Number = 0;
var percentageDes:Number = 0;
//---------------------------------------------------
var mcLoader:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();

//ロード開始時の処理
listener.onLoadStart = function(target:MovieClip) {
target.stop();
};

//ロード中の処理
listener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void  {
percentageDes = (bytesLoaded/bytesTotal)*100;
};
onEnterFrame = function () {
percentage += (percentageDes-percentage)*friction;
loadNumSet.loadNum.text = Math.floor(percentage);
loadBar._xscale = percentage;
if (percentage>99) {
loadBar._xscale = 100;
percentage = 100;
listener.onLoadComplete(container);
delete this.onEnterFrame;
}
};

//ロード完了時の処理
listener.onLoadComplete = function(target:MovieClip) {
if (percentage == 100) {
loadNumSet.loadNum.text = 100;
var myTween:Tween = new Tween(loadNumSet, "_alpha", mx.transitions.easing.Strong.easeInOut, 100, 0, 1.5, true);
loadBarBack._visible = false;
var myTween:Tween = new Tween(loadBar, "_yscale", mx.transitions.easing.Strong.easeInOut, 100, 0, 1.5, true);
myTween.onMotionFinished = function() {
var myTween:Tween = new Tween(target, "_alpha", mx.transitions.easing.Strong.easeOut, 0, 100, .5, true);
target.gotoAndPlay(2);
//全ての処理が終わったら、ローディング関連のグラフィックを全て非表示する
myTween.onMotionFinished = function() {
home._visible = false;
};
};
}
};

//ロード完了後、swfの初期化時の処理
listener.onLoadInit = function(target:MovieClip):Void  {
//ロードされた側のswfでの_rootパス指定をサポート
container._lockroot = true;
};
mcLoader.addListener(listener);
mcLoader.loadClip("loaded.swf", container);

以下、今後の記事のための覚え書き

  • FlashPlayer7以前でも動くが、loadingCircleSetの線の端が丸くなる事。
  • フレームレートを合わして下さい。
  • loadingCircleSetの色変更はカラーの着色、線の太さはスクリプトパネルで変更して下さい。
  • Tweenでのアルファや拡大縮小、マスク等に対応させるため、フォントを埋め込んでおく事。
  • Tweenクラスの上書き、または複数個のTweenインスタンスの作成とonMotionFinishedとの関係。
  • ロードされる側のflaは1フレームを空白にして空けておくだけ、stop()も不要。
  • loader.swfのステージサイズはコンテンツswfのサイズと合わせる事を念頭に作ったが、調節できること。
  • if (percentage>99) {…}の記述が気持ち悪いが、ここでロード未完了でトラブっても、もう一度onLoadCompleteが呼ばれるチャンスがあるからOKかな?

もっと完成度を高めて、記事もまとめて、華々しくエントリしたかったのにグダグダに、orz..

Comments:15

Mika 07-03-20 (火) 13:58

プリローダーを探して、ここにたどり着きました。
見た目がシンプルかつスタイリッシュだったので、気にいったのと、実装も簡単にできました。すばらしい!

最初、ロードされる側の1フレーム目をブランクにしただけで動かしてみたところ、ロードされたイメージがチカチカしてしまったので、もうひとつレイヤーを追加して、2フレームにstop()を入れて回避できました。

ありがとうございました!

tera 07-03-20 (火) 14:10

>Mika様
僕の冗長な説明書きを乗り越え、ご使用していただき、ありがとうございます。
スタイリッシュかどうかは謎ですが、実装が簡単なのは、僕が難しいことを知らないからです。w
今後ともよろしくです。

yoshidam 07-05-18 (金) 20:02

このローディングバーを導入させていただきました!簡単に設置できました。が、
container._lockroot = true;
の部分でつまづきました。
containerに読み込まれたswfから、Flashvarsで送った変数を読もうとしていたのですが、
_rootで読もうとしていてうまくいきませんでした。
なんとか調べて、_level0で読み込むことができました。
_lockrootを知らなかったので勉強になりました!
もし同じような人がいたらとおもってコメントしておきます。

tera 07-05-18 (金) 21:22

>yoshidam様
こんにちは。コメントありがとうございます。
_lockrootは見落としがちですよね。僕も忘れてましたw。
使っていただけて嬉しい限りです。
今後ともよろしくお願いします。

そう 07-09-17 (月) 20:43

こんばんわ、こちらのローディングFlashが非常にかっこよかったので使わせていただきました。
ただ、うまく読み込みができないのかローディング後のFlashムービーが単体で動かした時よりも2,3倍早いスピードで進行してしまいます。
Flashはほとんど初心者でスクリプトをみてみてもよく分からず・・・
どのようにすればいいのでしょうか?

そう 07-09-17 (月) 20:48

すいません!書いてすぐにフレームレートが原因であることがわかりました
注意書きのところにちゃんと書いてありましたね 本当にすいませんorz

tera 07-09-17 (月) 23:00

>そう様
自己解決おめでとうございます!
「赤いswfファイルは通常の3倍のスピードで再生されるのですよ。」と、ボケて返そうと思ったのに残念です(笑)
今後ともよろしくお願いいたします。

ごん 08-03-19 (水) 0:07

こんばんは、とても気に入り使わせて頂きたく
ダウンロードしました。
有難うございます。

ただ、ローカルでは問題なく動作するのですが、
サーバへUPすると、「Loading」「0%」で先にすすみません。
ロードするswfが上手くいっていない気がするんですが
解決できませんでした。
原因がお分かりになりましたら教えて頂けないでしょうか?

サーバへはローカルと同じで、階層みな同じにしました。

tera 08-03-19 (水) 9:04

>ごん様
コメントありがとうございます。
お尋ねの症状ですが、今までの人が使えているようなので、そこまで大きなバグはないかと思いますので(たぶん、、)
上のコメントでも言及されてる注意点:
・_rootか_level0か
・両ムービーのフレームレート
・絶対パスで通るか
・書き出しバージョン
あとはスクリプトの関数”on…”のところにtrace文を書いて、どのあたりでとまっているのかを探るぐらいしか思いつきませんですー。すいませんー。

key 08-11-08 (土) 21:34

こんばんわ。

当方、アクションスクリプトがなかなか理解出来ない40代です。
美しく目を引くローディングスクリプトに感動し、ダウンロードさせて頂きました。

ところでお教え頂きたいのですが...
読み込みたいターゲットのswfファイルを指定しているのは理解出来ているのですが、次のシーンを読み込ませたい場合はどの様に書き換えれば良いのでしょうか?
ご多忙かと存じますが、分かりやすくお教え頂ければありがたいのですが、お願いできますでしょうか?

tera 08-11-08 (土) 23:43

>keyさま
こんばんは。コメントありがとうございます。

次のシーンとのことですが、
まず、「シーン」自体、Flashではあまり使われている機能ではないのです。というのもシーンの移動に関して、Flashの挙動が特殊なのです。
参考記事:http://www.fumiononaka.com/TechNotes/Flash/FN0205002.html

そして今回想定されている状況が、ロード完了後、ロードしたswf(サンプルでいうとloaded.swf)内の次のシーン(「シーン2」を作ったと仮定して)を読み込ませたい場合を考えてらっしゃるのでしたら、loder.flaのロードグラフィックの中に書かれているコードの64行目を
target.gotoAndStop(”シーン 2”, 1);
とすれば行きそうなものですが、当方でもやってみたところこれがうまく動きません。

原因としては上記リンクで解説されていることに関連するのですが、_rootシーンの構造がロードの都合で入れ替わったりしているため「シーン」の機能が混乱している感じだと思ってください。そこでシーンは当てにせず、「シーンとはいえ、タイムラインは繋がっている」という考え方を利用して、ロードされる側の「シーン 2」のフレームにラベルを付けてやります。(「s2」とでもします。)
で、先ほどの64行目のコードを
target.gotoAndStop(”s2″);
とすれば、「ロード完了後、loaded.swfのシーン2に移動している」ことになっていると思います。

・シーンといいつつ、実はシーン1→シーン2・・・と繋がっている(これがなんか変に感じるのですが。。)
・そこでシーン名による移動ではなく、ラベル移動を利用する。
ということを利用するわけです。

長くなりましたが、こんな感じです。でもやはり上記のような変な仕組みになっているので、一般的に「シーン」を使う機会は少なくなってきているかと思います。

key 08-11-09 (日) 10:54

ご回答くださりありがとうございます。
感謝致します。

早速お教えただいた64行目について記述を、
target.gotoAndPlay(2);

target.gotoAndStop(”s2″);
に書き換え試用させて頂きました。

また、73行目以下は不要な様でしたので消してみました。
これにより指定したフレームラベルに飛ぶ様にはなりましたが、せっかくのtera様のローディング画面が動いていない様な感じになってしまいます。

実は、なぜ別のswfを読み込むのが困るのか?
これをお伝えしないといけないかもしれません。
元々作っていた自作swfファイルには、loadMovie でカウンターを表示させているのです。
ですから、load.swf上に読み込まれた自作swf上に更にloadMovie出来ない...と言うわけです。

せっかく素晴らしいローディングスクリプトに出会えたのですから、カウンターをmcの入れ子にして表示出来ないか行ってみます。
また、ご報告させて頂きますので、行き詰まった時にはご教示をお願い致します。
* URLをお見せしたいのですが、非公開可能でしょうか?

tera 08-11-09 (日) 11:40

key様

お疲れ様です。
73行目以降が不要なのかどうかが定かではないのですが、まぁ動けばそれが一番ですね。
ちょっと最近AS3ばかりやっているので、AS2のことを忘れてきているのですが、仰っているようなこともたぶんできるかと思います。
投稿内容の非公開など可能ですが、すぐにお返事できるかと、教えていただいたswfを見て僕が意図を汲み取れるかは確実ではありませんので、その点よろしくお願いいたします。

おそらく僕よりも野中文雄さんのサイト
http://www.fumiononaka.com/TechNotes/Flash/FN0307007.html
などを参考にされた方がよいかと思いますw。

あと
http://ameblo.jp/chaco-web/entry-10099000424.html
のサイトの記事がそのままあてはまるかと思います。

key 08-11-09 (日) 11:52

早々にお返事くださりありがとうござました。

64行目、
target.gotoAndPlay(2);
は、そのままにして、2フレームに次のシーンを記述してみたのですが、やはりローディング画面はうまく表示できませんでした。
ご呈示頂いたサイト等を参考にしながら、頂いたサークルローディングを活かせる工夫をさせて頂きたい所存です。
貴重なお時間を割いてご教示くださり感謝致します。
ありがとうございました。

3104 09-01-02 (金) 18:12

非常に使い勝手が良く格好良いので使わせて頂いてます。
現在制作中のサイトで使おうと思ったら問題が…
ターゲットのswfファイルにサウンドをリンケージで埋め込みBGMをループしてるんですが音が出なくなってしまします。
対処方法をお教え頂けませんでしょうか?

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.trick7.com/blog/2006/09/21-135325.php/trackback
Listed below are links to weblogs that reference
ローディングバーセットを作ったよ:サンプルファイル付き from trick7

Moleskine Plain Notebook Large

アイデア帳として。

AS3習得本
AS3の全容を学習できる本。この中でどれか1冊自分に合ったものを。
Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート (DVD-ROM付) Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付) ActionScript3.0 プロフェッショナルガイド 初めてのActionScript 3.0 Flashユーザーのためのステップアップガイド 詳説 ActionScript 3.0 Actionscript 3.0 Cookbook
AS3発展本
ASでアニメーションさせる面白さを知るための本。最後のはPHP連携デビューにオススメの洋書。
Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編] ActionScript 3.0 アニメーション AdvancED ActionScript 3.0 Animation (Advanced) Flash and PHP Bible (Bible (Wiley))
AS2
"Flash"ではなく"ActionScript2.0"学習のための良著。他にもいろいろ読んだけど、この4冊を読んだ後、自分が成長できた感じがしました。
FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付] Essential Actionscript 2.0 Flash 8 Essentials Foundation Actionscript Animation: Making Things Move (Foundation)

Return to page top