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
AS3 で Flash コンテンツに YouTube Player を埋め込む
AS3 用の Google 公式 YouTube 埋め込みプレイヤー...
AS3 で SWFAddress 2.4 を使う ( Flash でブラウザの戻るボタン、パーマリンクに対応する )
Flash サイトのページ内で移動すると、ブラウザの戻るボタンが聞か...
SWFAddress 2.4 リリース
SWFAddress が 2.4 にバージョンアップしていました。主...
AS3 の FileReference.upload() の使い方と注意すべき点
ユーザー参加コンテンツで「ユーザーが自由にファイルをアップロードした...
Flash CS5 Professional で iPhone アプリを作れるように
アメリカで開催されている Adobe MAX 2009 にて CS5...
Flash Develop に見切りを付けて Flex/Flash Builder Eclipse plugin を入れるプレイ
もうここ最近 Windows 環境で ActionScript を書...
loader.unload と addChild/removeChild に関する、Flash Player 9 と 10 の微妙な差異
Flash CS4 Professional で開発を行っていると、...
ありがとう Tweener/最終版 Tweener 1.33.74 小技
Flash のトゥイーン系ライブラリのスタンダードとも言える Twe...
Flash CS4 の新モーショントゥイーンは「ピクッ」ってならない
「回転したムービークリップ」(特に写真とかを含むムービークリップだと...
iPhone アプリ開発に効く8冊の本/iPhone SDKオススメ書籍
Mac なソフトウェアを作るのに興味があったのと、iPhone SD...