ActionScript 3.0入門ノート CS4でタグ「totalFrames」が付けられているもの

最初にswfを表示する際の読み込み待ちについて簡単に紹介しましょう。AS2まではframesLoadedプロパティを使って、特定のフレーム、特定のインスタンスが読み込まれたどうか判断して読み込み待ちを行いました。

[:script:]最後まで読み込まれたらtopへ進む。それまではループする。
if (this.framesLoaded == this.totalFrames) {
    gotoAndPlay("top");
}else{
   gotoAndPlay("loop");
}

framesLoadedプロパティを使った方法はAS3でも使えますが、AS3からは次に示すようにloaderInfoのprogressイベントのリスナーになり、bytesLoadedとbytesTotalのプロパティを使うことでダウンロード量を調べることができます。

[:script:]プログレスバーを表示するフレームアクション
stop();
var bar:Sprite = new Sprite();
bar.graphics.beginFill(0x000000);
bar.graphics.drawRect(0,0,1,5);
bar.graphics.endFill();
bar.y=stage.stageHeight/2;
addChild(bar);
loaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
loaderInfo.addEventListener(Event.COMPLETE, completeHandler);

function progressHandler(eventObj:ProgressEvent):void {
	var per:Number = loaderInfo.bytesLoaded/loaderInfo.bytesTotal;
	bar.width = stage.stageWidth*per;
}
function completeHandler(eventObj:Event):void{
		removeChild(bar);
		loaderInfo.removeEventListener(ProgressEvent.PROGRESS, progressHandler);
		loaderInfo.removeEventListener(Event.COMPLETE, completeHandler);
		gotoAndStop("top");
}
swfを試す
1回実行するとブラウザにキャッシュされるので、2回目以降はプログレスバーが表示されない場合があります。

これを見て外部jpegやswfを読み込むLoaderでの処理と同じと思った人も多いはず。そうです。LoaderのcontentLoaderInfoですね。contentLoaderInfoは読み込むコンテンツオブジェクトのloaderInfoの値なんですね。

(section07-01 表示オブジェクトの追加から抜粋)

 次のサンプルではクリックした位置に花のインスタンスを作ります。先のサンプルと同じように表示するフレームとスケールはランダムに決めています。インスタンスの座標は6〜7行目でクリックした座標に設定しています。クリックした座標はMouseEvent.MOUSE_DOWNイベントの引数のイベントオブジェクトのstageX、stageYプロパティで取り出せます。
fig07-01-08b.jpgswfを試す

[:script:]クリックした位置にインスタンスを作る
1	stage.addEventListener(MouseEvent.MOUSE_DOWN, newFlower);
2	//クリックでインスタンスを作る
3	function newFlower(eventObj:MouseEvent):void {
4		var flower_mc:Flowers=new Flowers();
5		//クリックした座標に表示する
6		flower_mc.x=eventObj.stageX;
7		flower_mc.y=eventObj.stageY;
8		//スケールを0.8〜3.8の間でランダムに決める
9		var scale:Number=0.8+3*Math.random();
10		flower_mc.scaleX=flower_mc.scaleY=scale;
11		//表示するフレームをランダムに決める
12		var frame:uint=1+Math.floor(flower_mc.totalFrames*Math.random());
13		flower_mc.gotoAndStop(frame);
14		//ステージに表示する
15		addChild(flower_mc);
16	}	
(section05-01 フレームのナビゲーションから抜粋)

次のサンプルではムービークリップの上でマウスカーソルを左右に水平に動かすだけでムービークリップのフレームの写真をブラウズできます。スライダーを動かして映像のコマ送りを行うような操作です。マウスカーソルがインスタンスの左端ならフレーム1の写真を表示し、右端なら最終フレームの写真を表示します。カーソルが途中の40%の位置にあるならば総フレーム数の40%の位置のフレームを表示します。
#これを応用すれば外部ファイルのサムネイルだけを先に読み込んでブラウズすることもできますよね。

fig05-01-03_shiji.jpg
カーソルが左端ならフレーム1,右端は最終フレームというようにロールオーバーしているカーソルの水平座標に応じてムービークリップのフレームを移動します。
swfを試す
photo_mc.stop();
photo_mc.addEventListener(MouseEvent.ROLL_OVER, onRollover);
photo_mc.addEventListener(MouseEvent.ROLL_OUT, onRollout);

//ロールオーバーで動作開始
function onRollover(eventObj:MouseEvent):void {
	var mc:MovieClip=eventObj.target as MovieClip;
	mc.addEventListener(Event.ENTER_FRAME, stepFrame);
}
//ロールアウトで動作停止
function onRollout(eventObj:MouseEvent):void {
	var mc:MovieClip=eventObj.target as MovieClip;
	mc.removeEventListener(Event.ENTER_FRAME, stepFrame);
	mc.gotoAndStop(1);
}
//マウス座標に応じたフレームへ移動
function stepFrame(eventObj:Event):void {
	var mc:MovieClip=eventObj.target as MovieClip;
	//幅を総フレーム数としたときのマウスが指すフレーム番号
	var frame:uint= Math.ceil(mc.totalFrames*mc.mouseX/mc.width);
	mc.gotoAndStop(frame);
}
まったく新しいAS3の世界!
694a.jpg
Adobe Flash CS4
詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)

楽しいActionScript。
新たなる1歩へと踏み出しましょう。
■内容は?→ 目次を見る
■評判は?→ 書評を読む
この本を書いたわけ

タグ

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

あわせて読みたいブログパーツ