プリローダーで、画像を下から上に表示する方法

質問

プリローダーというと普通はバーで0%から100%に近づくにつれて
左から右に伸びるのがよくあるパターンですが
バーの代わりに何らかの画像が下から上に向けて現れてくるように
するにはどのようにすれば宜しいのでしょうか？
バーをpngで読み込んだ画像に変えて
_root.xxxx._xscale = percent;xscaleを
_root.xxxx._yscale = percent;に書き換えても
全く反映されません。
ちなみにMX2004を使っています。

あと、静止画像とはちょっと違うかもしれませんが
http://www.flashcomponents.net/upload/samples/431/index.html
上記のサイトのように下から上に上がっていくのは
どのようなスクリプトになっているのでしょうか？

回答No.2

BlurFiltan

＃１ です。

> 上記にしてありますが、実際にアップするとプリローダーが現れてくれません。
> 修正点はどの辺りにありますでしょうか？

スクリプトは大変な状態です。
しかし，大変な状態なのはわかっていて，
あえてそのままのスクリプトを記述（コピペ）し，
実際に重めのファイルを作成して試してみましたけど画像はちゃんと上に上がりましたよ。

プリローダとしては成り立っていませんが，
ロードする割合に対しては「png_mc」が上がることは上がります。
その上がり方は良いか悪いかは私が判断するところではないので別にして，
「png_mc」が上がることだけは問題なしだと思います。

スクリプトは大変な状態なのは置いておいて，
プリローダーが現れない原因ですが，
これは様々なことが考えられますので特定できませんし，
考えられる以外に原因があるのかもしれません。

ファイル容量はちゃんと重い物を作成しましたか？
回線速度によるので何とも言えませんが，
100KB とか 200KB とか，そんな軽いファイル（SWF）だと，
0.1秒くらいでロードされてしまうかもしれませんよ。

アップロードした SWF のキャッシュは１回閲覧する度に消していますか？
たとえ 10MB くらいのファイル（SWF）を作成したとしても，
２回目の閲覧以降，ブラウザはキャッシュを参照しますから，
キャッシュを消さないと一瞬でロード完了してしまいますよ。

ActionScriptの修正点よりもまず，
そもそも，
画像をアップロードして実験するところが間違っているように思います。
プリローダを試す場合は，アップロードするのではなく，
作成したドキュメントを開いた状態で，
「制御」→「ムービープレビュー」
これでムービーがプレビューできますから，
そのムービープレビューの画面で
「表示」→「プロファイラ」 にチェックを入れて，
「表示」→「ダウンロードのシミュレート」 にチェックを入れます。
これでダウンロード状況がシミュレーションできます。
回線の設定を変更する場合は，
「表示」→「ダウンロードの設定」 で，
既存の設定回線から選択するか自分で回線状況を作成するかします。

アップロード後の動作確認も必要ですが，
プリローダに関しては，アップロードしてしまうと動作確認ができない（しにくい）と思います。

＝＝＝本題とはあまり関係のない補足＝＝＝＝＝＝＝＝

「png_mc」 が上に上がるのとは関連しないことも含めて，
補足のスクリプトに注釈行を入れてみました。
画像が上がる部分ではなくそれ以外の部分で，
どこが間違っているか，よく観察して考えてみてください。

なお，インデントに全角空白文字を使用しているため，
このままのコピペでは使用できません。

/////////////////////////////////////////////////////////
// １フレーム進む時間ごとに毎回毎回実行
_root.onEnterFrame = function():Void {

　　// 全フレーム数 と ロードされたフレーム数 が等しいとき
　　if (_totalframes == _framesloaded) {
　　　　// フレームラベル 「2」 に進めて再生（★フレームラベル？）
　　　　gotoAndPlay("2");
　　}

　　// 変数 total に ムービーの全バイト数を取得
　　total = _root.getBytesTotal();

　　// 変数 loaded に ムービーのロードされたバイト数を取得
　　loaded = _root.getBytesLoaded();

　　// 変数 percent にロードされたパーセント（整数）を取得
　　percent = Math.floor(loaded/total*100);

　　// 変数 time にムービー開始からの秒を取得（★意味不明）
　　time = Math.floor(getTimer()/1000);

　　// 「png_mc」 の y 座標を
　　// ロードされたパーセンテージ×2ずつ下から上げる
　　_root.png_mc._y = 200-percent*2;

　　// 表示を即更新（★全く意味なし）
　　updateAfterEvent();

};

// 再生停止
stop();
/////////////////////////////////////////////////////////

間違っていると推測される部分や，
間違ってはいないけれど，あまり相応しくないと思った部分などを書き替えてみました。
（繰り返しますが，書き替えても 「png_mc」 が
　正常に上に上がるというわけではありません。
　 「png_mc」 以外の部分の書き替えです。）

全角空白文字インデントは付けていませんのでコピペできます。

///////////////////////////////////////////////////////
// 再生停止（☆まず先に stop() です）
stop();

// １フレーム進む時間ごとに毎回毎回実行
_root.onEnterFrame = function():Void {

// 変数 total に ムービーの全バイト数を取得
total = _root.getBytesTotal();

// 変数 loaded に ムービーのロードされたバイト数を取得
loaded = _root.getBytesLoaded();

// 変数 percent にロードされたパーセントを取得
percent = Math.floor(loaded/total*100);

// 変数 time にムービー開始からの秒を取得
// （★ 意味不明ですが残しました）
time = Math.floor(getTimer()/1000);

// 「png_mc」 の y 座標を
// ロードされたパーセンテージ×2ずつ下から上げる
_root.png_mc._y = 200-percent*2;

// ロードされたバイト数 が 全バイト数 以上になれば
if (loaded>=total) {
// フレーム2 に進めて再生（☆フレーム2でしょう？）
gotoAndPlay(2);
// この onEnterFrame を削除（☆☆絶対必要）
delete _root.onEnterFrame;
}
};
///////////////////////////////////////////////////////

最後の，

　　// この onEnterFrame を削除（☆☆絶対必要）
　　delete _root.onEnterFrame;

に関してですが，これを入れないと ，

　　// フレーム2 に進めて再生（☆フレーム2でしょう？）
　　gotoAndPlay(2);

これが１フレーム進む時間ごとに毎回毎回実行され続けます。
つまり フレーム2 に行きつづけるため，次のフレーム（フレーム3 以降）に進めなくなります。

それと最初のスクリプトの途中の，

　　// 表示を即更新（★全く意味なし）
　　updateAfterEvent();

ですが，
Flash は基本的に自動で１フレーム進む時間ごとに毎回毎回表示を更新しています。
だからアニメーションするのです。
もしこれが必要であるとするなら，全てのフレームに書く必要が出てきます。

updateAfterEvent() は１フレーム進む時間と時間との間に変化が起こるときに使う物で，
その場合でも普通は必要ありませんし使いません。
あえて「表示を更新したいときのみ」に使います。

たとえば，
マウスをダラーーーーっとドラッグしたとき，
マウスの座標は１フレーム進む時間とは関係なく変更されます。
代替カーソルなどを使った場合で，１フレーム進む時間ごとに表示更新すると，
なんとなくカーソルの動きが遅く感じたりカクカクして（飛び飛びで）動くように見えることがあります。
「１フレーム進む時間とは関係無しで何かが起こる場合で，
　なおかつ
　その微妙なタイミングで起こる何かに即表示を対応させる場合」
そういうときに使う物です。

＝＝＝別件＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

とにかく，
当たり前ですがプリローダは回線によってその動きが大きく変わります。
またキャッシュに残る残らないによっても全く動きが変わります。

回線や状況によってなるべく変えたくない場合は，
次のページを参考にしてみてください。

「QNo.4071675 ローディングバーをゆっくりみせる方法」
http://okwave.jp/qa4071675.html

お礼

本日作り直してみました。
そうですね、確かにフラッシュで描いた四角は
上に“上がり”ました。

もうちょっと自分で工面して考えてみます。

このたびは非常にためになる情報、ご意見等ありがとうございます！

補足

非常にご丁寧な返信、ありがとうございます。
解り易くて助かります！
再考してから後日改めてお礼差し上げます。

回答No.1

BlurFiltan

元がどうなっているのかわかりませんから，
どこをどうすれば良いというようなかなり具体的な回答はできませんが。

>_root.xxxx._xscale = percent;xscaleを
>_root.xxxx._yscale = percent;に書き換えても
> 全く反映されません。

_xscale は 文字通り x方向のスケール（大きさ）プロパティです。
ちなみに 100 をオリジナルの大きさとしたときの数値です。
_yscale も 文字通り y方向のスケール（大きさ）プロパティです。
これも 100 をオリジナルの大きさとしたときの数値です。

とりあえず，
pngをムービークリップに変換してインスタンス名を何か付けて，
そのムービークリップの _y （ｙ座標）プロパティ を，
percent に比例した y座標 に移動させなければならないと思います。

png をムービークリップにしたものの インスタンス名 を
「png_mc」 とするならば，

_root.png_mc._y = 100-percent;

とか，

_root.png_mc._y = 200-percent*2;

とかです。
100 や 200 や 2 などは，
作成していらっしゃるものの状態や画像の大きさや好みなどによって変わります。

> あと、静止画像とはちょっと違うかもしれませんが
> http://www.flashcomponents.net/upload/samples/431/index.html
> 上記のサイトのように下から上に上がっていくのは
> どのようなスクリプトになっているのでしょうか？

基本的に上のスクリプトと同じでしょう。
ムービークリップ内に png を置くのではなく，
波打つようなアニメーションを作成しておいて，
そのアニメーション入りムービークリップの y座標 を小さくして入ってるのだと思います。

アニメーション入りムービークリップにはマスクをかけて，
○の部分だけ表示するようにしているのかもしれませんし，
黒い背景に○の穴を開けて，
その後（下レイヤー）にアニメーション入りムービークリップを置いているかもしれません。
その辺は，スクリプトとはあまり関係ないと思います。

お礼

ありがとうございます。
２コマ目から動画を再生させたいと考えています。
プリローダで出したい絵は縦のサイズが200pxなので
1コマ目のアクションスクリプトは
_root.onEnterFrame = function():Void {
if (_totalframes == _framesloaded) {
gotoAndPlay("2");
}
total = _root.getBytesTotal();
loaded = _root.getBytesLoaded();
percent = Math.floor(loaded/total*100);
time = Math.floor(getTimer()/1000);
_root.png_mc._y =200-percent*2;
updateAfterEvent();
};
stop();

上記にしてありますが、実際にアップするとプリローダーが現れてくれません。
修正点はどの辺りにありますでしょうか？