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

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をフレーム１で止めておく。
  4. onLoadProgress（ロード中の処理）：何パーセントロードしたかを算出。ただ、この値をそのままローダーグラフィックのアニメーションに適応させると、滑らかには動かないので、アニメーション処理に関しては直下のonEnterFrameで処理する。
  5. onLoadComplete（ロード完了時の処理）：ロード完了時のグラフィックをTweenクラスを使って処理する。念のために全ての処理が終わったら、ローディング関連のグラフィックを全て非表示する。containerのアルファを戻し、ロード対象のswfの２フレーム目に移動←コンテンツ開始。
  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は１フレームを空白にして空けておくだけ、stop()も不要。
  • loader.swfのステージサイズはコンテンツswfのサイズと合わせる事を念頭に作ったが、調節できること。
  • if (percentage>99) {…}の記述が気持ち悪いが、ここでロード未完了でトラブっても、もう一度onLoadCompleteが呼ばれるチャンスがあるからOKかな？

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

このエントリーをはてなブックマークに追加
はてなブックマーク - ローディングバーセットを作ったよ：サンプルファイル付き

Comments:24

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ムービーが単体で動かした時よりも２，３倍早いスピードで進行してしまいます。
Flashはほとんど初心者でスクリプトをみてみてもよく分からず・・・
どのようにすればいいのでしょうか？

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

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

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

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

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

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

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

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

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

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

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

こんばんわ。

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

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

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

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

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

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

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

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

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

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

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

早速お教えただいた６４行目について記述を、
target.gotoAndPlay(2);
↓
target.gotoAndStop(“s2″);
に書き換え試用させて頂きました。

また、７３行目以下は不要な様でしたので消してみました。
これにより指定したフレームラベルに飛ぶ様にはなりましたが、せっかくの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
などを参考にされた方がよいかと思いますｗ。

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

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

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

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

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

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

irogoromo 09-10-13 (火) 16:54

現在自作サイトを作っている者です。
ドリームウェーバーCS4を使用し、何とか各ページは出来てきたのですが。

写真のスライドショーをHTML（参考スクリプトを利用）で作っています。
そのページの画像を読み込むまでの間、ローディング画面を表示させたいと
色々調べていました。

偶然こちらのサイトを拝見し、とても素敵で是非使わせて頂きたいと
思ったのですが、スクリプトなど勉強不足でまだまだよく分かりません。
上記参考ソースはローディングを入れたいHTMLファイルに入れ込めば
良いのでしょうか？初心者には難しいでしょうか？

いつでも構いません、お時間がある時に少しでもいいので
アドバイスを頂けると幸いです。

tanyan 10-01-26 (火) 16:38

いただきました！ありがとうございます＾＾わかりやすく書いてあったので初心者ですが迷いませんでした＾＾
今回は円がスクリプトで動いていましたがその他も見てみたいです＾＾お時間有ったら是非お願いします！失礼しました＾＾

tera 10-02-05 (金) 12:03

tanyanさま
どうもありがとうございます。ブログを書く励みになります！
AS2ではCASA Frameworkや、AS3もSketchbookやFrocessingなど、ActionScriptライブラリを使って弧や扇型も簡単に描けたりするので、ぜひ挑戦してみてくださいませ。
今後ともよろしくお願いいたします。

mips 10-06-02 (水) 0:57

使わせて頂きました。
ありがとうございます。

ちなみに上記3104さんのBGMが再生されない件についてですが、私も同じ問題が発生しましたが、new Sound()をnew Sound(this)に変更することにより解決しました。
一年以上前のコメントにかなりの遅レスですが、参考になれば。

Geo 10-07-26 (月) 11:21

円のローディングを使用させていただきました。ありがとうございます。一点質問です。flashファイルやcomフォルダを一式swfというフォルダに格納しました。このフォルダはflashを読み込むhtmlと同じ階層です。すると、「Loading」「０%」で先にすすみません。読み込むhtmlとswfファイルは同じ階層にないとエラーになるのでしょうか？

tera 10-07-28 (水) 22:02

Geoさん
はじめまして。
えーと、まず一旦パブリッシュしさえすれば、flaファイルとcomフォルダは必要ありません。
htmlとロードするswfとロードされるswfの3ファイルのみが関連してきます。

そしてロードする側のas末尾に、ロードされるswfのパスを記述する箇所があると思いますが、ロードされるパスはhtmlファイルが基点となりますので、Geoさんが仰るようなフォルダ構成

hoge.html
swfフォルダ（中にloader.swf, loaded.swf）

である場合は、

mcLoader.loadClip(“./swf/loaded.swf”, container);

とすればいいのではないでしょうか。

Geo 10-08-03 (火) 20:09

tera様
ありがとうございます。

一度試してみます。
ご返答が遅くなり大変申し訳ございませんでした。

ME 10-11-12 (金) 14:57

こんにちは。
こちらのローディングバーを利用させていただきました。
とてもわかりやすかったです。
お忙しいところ大変恐縮ですが、質問させてください。
読み込むswfがリキッドレイアウトのFlashなのですが、読み込むとなぜかレイアウトが崩れてしまいます。
何か原因はありますか？
解決方法があれば教えてください。
何卒よろしくお願いいたします。

虹色定期便 11-01-23 (日) 2:39

サークルのローディングバーを探してこちらにたどり着きました。圧倒的なかっこよさ！
AS初心者でとても遠い感じなんですが、今後とも勉強させていただきます。

このローディングバーで質問なのですが、リロードされた（swf読み込み済の）場合には、プリローダー部分を飛ばすようにしたいと思ったのですが、フレームをずらすと動作しなくなってしまったりして、うまくいきません。。。
お時間があるときで構いませんので、アドバイスいただけたら幸いです。どうぞ宜しくお願いします。

Comment Form
Remember personal info

Trackbacks:1

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
pingback from AS3のお勉強 | Jack's movement 10-07-23 (金) 11:02

[...] trick7.com blog: ローディングバーセットを作ったよ：サンプルファイル付き (tags: Flash AS2 tips Loading) [...]

Here are my
twitter
delicious
tumblr
hatena
booklog
kskl

最近の投稿
カテゴリー
アーカイブ

Return to page top