feb19.jp blog - life is creative!

AS2、AS3のFileReferenceクラスを使って、オリジナルダウンローダーを作る

ブックマークに追加する tags:       

AS2、AS3のFileReferenceクラスを使って、オリジナルダウンローダーを作る

ファイルをローカルにダウンロードさせるコンテンツを作る時、一般的にAS2までならgetURL、AS3ならnavigateToURLでそのファイルに直接リンクさせるのですが、問題点はブラウザによってはウィンドウが一瞬無駄に開いたり、(MP3ファイルなど)関連付けの設定によっては再生が始まったりしまうことがあります。(最悪なんか余計なソフトが立ち上がるとか)

Flash Player 8以降で使える、flash.net.FileReferenceクラスのdownload()メソッドを使うと、引数に指定したURL(AS1/2)、またはURLRequest(AS3)のファイルを、ダウンロードさせることが出来ます。

というわけで簡単なダウンロードUIを作ってみました。僕が昔宅録で作った曲(MP3)がダウンロードできます。(7.7MB)

サンプル

流れとしては、FileReferenceインスタンスを作る→OPENなイベントを監視→OPENイベントからダウンロードの進捗を監視→ダウンロード完了後THANK YOUメッセージ表示、という感じです。


以下、AS2と、AS3の場合の実装コード例。

Action Script 2.0

ちなみに、セキュリティ上、ローカルでテストはできないです。Flash Playerのバージョンにもよるかもしれませんが、一度ウェブサーバーにアップして、httpプロトコルなサンドボックス上でしか動きません。

import flash.net.FileReference;	//Flash 8からのクラスなので、インポート。
var _this:Object = this;	//スコープ対策
var fr_listener:Object = new Object();
fr_listener.onOpen = function(fr:FileReference):Void
{
	trace("start downloading");
}
fr_listener.onProgress = function(fr:FileReference, bytesLoaded:Number, bytesTotal:Number):Void
{
	var percent:Number = Math.floor(bytesLoaded / bytesTotal * 100);
	trace("downloading... " + percent + "%");
}
fr_listener.onComplete = function(fr:FileReference):Void
{
	trace("thank you for your downloading!");
}
//FileReference作成
var fr:FileReference = new FileReference();
fr.addListener(fr_listener);
//btnクリックでダウンロードのためのダイアログ表示。
btn.onRelease = function():Void
{
	_this.fr.download("song.mp3", "My Song.mp3");
}


Action Script 3.0

こちらは上のダウンロードUI例のコード。おわかりだと思いますが、gotoAndPlay()とかDisplayObjectなプロパティを操作してるところはアニメーションをさせているところです。コード汚いですねーとか言わなくていいですよ。

bar.scaleX = 0;
btn.buttonMode = true;
btn.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
btn.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
btn.addEventListener(MouseEvent.CLICK, clickHandler);
//FileReferenceインスタンス生成
var fr:FileReference = new FileReference();
function mouseOverHandler(event:MouseEvent):void
{
	var target:MovieClip = MovieClip(event.currentTarget);
	switch(target.name)
	{
		case "cancel_btn":
			cancelmc.gotoAndPlay("on");
			break;
		
		case "btn":
			downloadmc.gotoAndPlay("on");
			downloadmc.arrowmc.gotoAndStop(1);
			break;
	}
}
function mouseOutHandler(event:MouseEvent):void
{
	var target:MovieClip = MovieClip(event.currentTarget);
	switch(target.name)
	{
		case "cancel_btn":
			cancelmc.gotoAndPlay("off");
			break;
		
		case "btn":
			downloadmc.gotoAndPlay("off");
			downloadmc.arrowmc.play();
			break;
	}
}
function clickHandler(event:MouseEvent):void
{
	var target:MovieClip = MovieClip(event.currentTarget);
	switch(target.name)
	{
		case "cancel_btn":
			fr.cancel();
			destroy();
			break;
		
		case "btn":
			start();
			break;
	}
}
function start():void
{
	fr.download(new URLRequest("http://meditation-records.com/music/oriental.mp3"), "Oriental Colors.mp3");
	fr.addEventListener(Event.OPEN, openHandler);
}
function openHandler(e:Event):void
{
	fr.removeEventListener(Event.OPEN, openHandler);
	btn.buttonMode = false;
	btn.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
	btn.removeEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
	btn.removeEventListener(MouseEvent.CLICK, clickHandler);
	
	fr.addEventListener(ProgressEvent.PROGRESS, loadProgressHandler);
	fr.addEventListener(Event.COMPLETE, loadCompleteHandler);
	
	barbgmc.gotoAndPlay("show");
	cancelmc.gotoAndPlay("show");
	cancel_btn.visible = true;
	cancel_btn.buttonMode = true;
	cancel_btn.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
	cancel_btn.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
	cancel_btn.addEventListener(MouseEvent.CLICK, clickHandler);
}
function destroy():void
{
	fr.removeEventListener(ProgressEvent.PROGRESS, loadProgressHandler);
	fr.removeEventListener(Event.COMPLETE, loadCompleteHandler);
	
	barbgmc.gotoAndStop(1);
	cancelmc.gotoAndStop("hide");
	cancel_btn.visible = false;
	cancel_btn.buttonMode = false;
	cancel_btn.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
	cancel_btn.removeEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
	cancel_btn.removeEventListener(MouseEvent.CLICK, clickHandler);
	
	bar.scaleX = 0;
	percent_tf.text = "";
	
	btn.buttonMode = true;
	btn.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
	btn.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
	btn.addEventListener(MouseEvent.CLICK, clickHandler);
}
function loadProgressHandler(event:ProgressEvent):void
{
	var per:Number = Math.floor(event.bytesLoaded / event.bytesTotal * 100);
	
	percent_tf.text = per.toString() + "%";
	bar.scaleX = per/100;
}
function loadCompleteHandler(event:Event):void
{
	percent_tf.text = "100%";
	bar.scaleX = 1;
	
	thankyoumc.gotoAndPlay("show");
	
	destroy();
}


という感じです。ちなみにhttpStatusとかもイベントで監視しておくと、よりカシコイと思われます。今回はめんどくさかったのでやりませんでした。


参考
Action Script 2.0用Adobe公式解説ページ
Action Script 3.0用Adobe公式解説ページ

2009年03月28日13:50

Webデザインブログ

「AS2、AS3のFileReferenceクラスを使って、オリジナルダウンローダーを作る」の関連エントリー

 iTunes Store(Japan)

コメントを投稿

トラックバック

このエントリーのトラックバックURL:
http://feb19.jp/mt/mt-tb.cgi/171

Navigation

古:AS2、AS3で、MovieClipの一部だけをキャプチャする
新:AS3でポップアップウィンドウ(2009/春)
トップページ

Recently Entries
Mac でファイルの関連付けを変える(Mac で AIR アプリがアップデート出来ないを解決する方法)
ファイルを右クリックして「情報を見る」を選び、表示されたウィンドウの...
Mac OS X 10.6 Snow Leopard から入ってるフォント「Menlo」がコーディング作業にいい感じ
Xcode でコード書いているとき、Eclipse でコード書くより...
AIR で JSON 形式ファイルの入出力
AIR 祭り開催中。今回はファイル入出力。AS3 で扱っている Ob...
Adobe CS5 ティザーサイトオープン
カウントダウンが始まっています。いよいよ CS5 ですね。globa...
AIR でファイルがドラッグアンドドロップされたことを NativeDragEvent で検知する
最近また AIR が楽しい気がして触っているのですが、 Google...
iPhone アプリ "iBeat - BPM Counter" を発売しました & iPhone インタラクションデザインについて
BPM 計測アプリです。既に似たようなアプリはいくつか発売されている...
AS3 の演算子 ||= について
AS3 だけでつかえるものではないのですが、AS3 での動作を確認し...
iPhone SDK 「カテゴリ」について+NSString の空白文字を除去する
Objective-C では、高位のフレームワークで、低位のフレーム...
Flash CS4 で Flex SDK (mx パッケージ、クラス) を使う
Flex 用のライブラリとかを見ると mx パッケージとか使われてい...
Flash CS5 を予習 ~Text Layout Framework (TLF) 編~
Text Layout Framework (TLF) を使って、F...