AIR勉強中 – Eseclock
前回のSpark勉強会に参加したときに、yossyさんがライブラリ作成からSparkProjectにコミットするまでをライブコーディングしながら説明してくれました。
そこで作成したのが、UNIQLOCK的な何かが作れるライブラリ「Eseclock」です。 使い方は、
1.EseClockクラスを継承する。
2.createContentsメソッドをオーバーライドして、引数にDisplayObjectを指定する。
これだけで、6秒後にDisplayObjectが5秒間表示されます。
今回僕は、AIRを勉強中なので、Eseclockにテキストファイル、画像ファイルをドロップすると、AIR内で保存されて、ランダムに表示されるというものを作りました。
alumicanさんが拡張したアニメーション版を拝借してAIRに実装しました。 ソースのコアな部分は以下。Eseclockクラスを拡張したAirEseclockの中身です。
//対応する拡張子の登録 public static const TEXT_FILE_FORMAT:Array = [".txt", ".as", ".xml"]; public static const BITMAP_FILE_FORMAT:Array = [".jpg", ".JPG",".jpeg",".JPEG", ".png",".PNG", ".gif",".GIF"]; //表示するDisplayObjectを格納する配列 public var _showContentsArray:Array = []; //Eseclockの背景色private var _color:uint; //ドラッグ先のDisplayObjectContainerprivate var _container:DisplayObjectContainer; //コンストラクタ public function AirEseclock(container:DisplayObjectContainer) { _container = container; //ドラッグを始めるためのイベントを追加 _container.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, _onDragEnter); //ドロップのイベント追加 _container.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, _onDragDrop); //Eseclockの背景色を決める _color = uint(Math.random() * 0xffffff); //Eseclockのコンストラクタ実行 super(_color, 0xffffff, _container.width, _container.height); } private function _onDragEnter(e:NativeDragEvent):void { //Clipboardクラスのインスタンス作成 var cb:Clipboard = e.clipboard; if( //ドラッグするものがBitmapだったら cb.hasFormat(ClipboardFormats.BITMAP_FORMAT)|| //ドラッグするものがファイルだったら cb.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)|| //ドラッグするものがhtmlテキストだったら cb.hasFormat(ClipboardFormats.HTML_FORMAT)|| //ドラッグするものがリッチテキストだったら cb.hasFormat(ClipboardFormats.RICH_TEXT_FORMAT)|| //ドラッグするものがテキストだったら cb.hasFormat(ClipboardFormats.TEXT_FORMAT)|| //ドラッグするものがURLだったら cb.hasFormat(ClipboardFormats.URL_FORMAT)){ //読み込みを許可する(ドラッグを許可 NativeDragManager.acceptDragDrop(_container); }else { //読み込めないので何かエラー文でも出す trace("読み込めないYo！！"); } } private function _onDragDrop(e:NativeDragEvent):void { //Clipboardクラスのインスタンス作成 var cb:Clipboard = e.clipboard; //今回の実装では、ファイルの読み込みしか対応していません if(cb.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)) { //複数のファイルをドラッグしても配列で返ってくる var array:Array = cb.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array; //配列内のファイルを調べる for each(var file:File in array) { //ローカルのアドレが帰ってくるのでコンテンツにコンバートする convertContent(file.nativePath); } } } private function convertContent(str:String):void { //Textファイルかチェック var l:uint = TEXT_FILE_FORMAT.length; for (var i:int = 0; i < l; i++) { if (str.lastIndexOf(TEXT_FILE_FORMAT[i])!=-1) { //strを右から捜査して、Textの拡張子と一致したら //loadTextメソッドは、UrlLoaderクラスを利用して_showContentsArrayプッシュされます loadText(str); } } //Bitmapファイルかチェック l = BITMAP_FILE_FORMAT.length; for ( i = 0; i < l; i++) { if (str.lastIndexOf(BITMAP_FILE_FORMAT[i])!=-1) { //strを右から捜査して、Bitmapの拡張子と一致したら //loadBitmapメソッドは、Loaderクラスを利用して_showContentsArrayプッシュされます loadBitmap(str); } } }
この後は、_showContentsArrayの中にコンテンツがたまっていくため、それをランダムで表示している感じです。
現在対応している拡張子は、jpg,gif,png,txt,as,xmlの６つです。 flvや、swfも対応しようと思って、やってみたけどうまくいかなかったのでちょっと見送り。 現在のバージョンだと、画像もただ表示するだけだし、テキストは下から上に流れていくだけの状態で、あまり面白くはありません。あと音も鳴りませんので；；。
とりあえず、FlashにはないAIR特有のドラッグアンドドロップは理解できたので、おｋな感じなのですが、モチベーションが続けば、もっとAIRらしいガジェットを作ってSparkにコミットしたいものです
実際、コミット方法が分からなくなってしまって、コミットできないですが。 Downloadはコチラです。
AIRを初めて触ったのですが、面白いです。便利なガジェットとか作ってみようと思います。 コミット方法を思い出したらSparkにコミットしたいです。
