Progressionを使ってサイトを作成する際にローダーを使うことはよくあり、既存のPreloader.asてのを使って作るのがあたりまえ？だと思うのですが、公式サイトに掲載されているやり方ではすぐに100％になってしまい、滑らかなローダーができない。
要領が大きくなると読み込みがカクカクするのです。。。
きっと簡単になめらかにできると思うとなんだか右往左往しながら制作してしまったのでメモ。しかも、このやり方がとても周りくどいと思うので、どなたか簡単に実装できる方法などございましたら、ご連絡いただければ幸いです。
まずはローディングバーを作成
protected override function _onCastLoadStart():void {
// 実行したいコマンドを登録します。
/************************************************************************
* テキストフォーマット＆テキストエリア
************************************************************************/
txt = new TextField();
txt.autoSize = TextFieldAutoSize.RIGHT;
txt.x = stage.stageWidth-10;
txt.y = stage.stageHeight / 2-150;
txt.appendText("0%");
addChild(txt);
/************************************************************************
* ローディングバーの作成
************************************************************************/
barbar = new Sprite();
with (barbar) {
graphics.beginFill(0x000000);
graphics.drawRect(0, -1, 1, 2);
graphics.endFill();
}
barbar.y = stage.stageHeight / 2;
addChild(barbar);
//カクカクなるのでエンターフレームで処理をする
stage.addEventListener(Event.ENTER_FRAME, onEnterFram);
}
ローディングバーのアニメーション
private function onEnterFram(e:Event):void
{
//読み込んだバイト数の0.1を加算していく
persentage += (loadbyte - persentage) * 0.1;
//バーの長さをステージの長さにする
barbar.width = stage.stageWidth * persentage * 0.01;
txt.text = Math.floor(persentage) + "%";
//100%に近くなったら100にして終了
if (persentage > 99.5) {
persentage = 100;
txt.text = Math.floor(persentage) + "%";
barbar.width = stage.stageWidth * persentage * 0.01;
stage.removeEventListener(Event.ENTER_FRAME, onEnterFram);
//フラグを0にしてカスタムコマンドを終了
flag = 0;
}
}
最後に_onCastLoadComplete()内に終了処理を書けば終わりなのですが、
アニメーションが終わるまで待ってくれない。。。
どうしたものかと検索しているとカスタムコマンドでなんとかなりそうなのが判明。下記サイトを参考に待機処理のコマンドをつくってみる。
MyCommand.asを作成し_execute()内を書き換える。
Preloader.asにあるflagを監視することで待機させる方法をとりました。
private function _execute():void
{
// 通常処理を終了します。
//_returnValue = "カスタムコマンドだよ！！！！！！"
timer = new Timer(100);
timer.addEventListener(TimerEvent.TIMER, onTime);
timer.start();
//こいつが終了を通知してくれる。
//executeComplete();
}
private function onTime(e:TimerEvent):void
{
//trace("タイマー作動中"); flagの確認
if(Preloader.flag == 0){
executeComplete();
//trace("timerSTOP!!");
timer.removeEventListener(TimerEvent.TIMER, onTime);
}
}
最後にPreloader.asの_onCastLoadComplete()内で先ほどのコマンドを呼び出して待機させてばOKでした
呼び出しはこんな感じです。
/**
* オブジェクトが読み込みを完了した瞬間に送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onCastLoadComplete():void {
// 実行したいコマンドを登録します。
//コマンドを作成
var _myCommand:MyCommand = new MyCommand();
addCommand(
//new Trace("スタート++++++++++++++++++++"),
//ここに登録
_myCommand,
new DoTweener(txt, {
alpha:0,
y:-150,
time:1.2,
onComplete:ore
}),
new Trace("完了++++++++++++++++++++")
);
}
こんな感じでなんとかできたのでした。
できたローダーがこんなのです。
もっと簡単にできるような気がする。。。。
説明が分かりにくいので
まとめたソースコードはコチラからダウンロードできます。
ご指摘等いただければ、幸いです。
