Flashup 8

1,151 views

Published on

無料のFlash講座、Flashup第8回の資料。
http://orange-suzuki.com/blog/2011/06/flashup8_report/

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,151
On SlideShare
0
From Embeds
0
Number of Embeds
81
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Flashup 8

  1. 1. 「壁紙メーカーを作ってみよう FileReference入門」2011.6.19(土)特別協賛:ラ゗フサウンド株式会社様 FLASHUP#8 orange-suzuki.com 鈴木克史 1
  2. 2. 本日のメニューorange-suzuki.com 2
  3. 3. 1. ボタンの作成、FileReferenceの解説など2. サンプルの解説(壁紙メーカーの作成)※コードはFlashDevelopをベースに記載しています。 3
  4. 4. 画像を配置してみようorange-suzuki.com 4
  5. 5. 画像を配置するには?//画像を用意する[Embed(source = "asset/penguin01.png")]var penguin01_img:Class;//Bitmapの作成var img:Bitmap = new penguin01_img();//表示させるaddChild(img); 5
  6. 6. ボタンを作成してみようorange-suzuki.com 6
  7. 7. ボタンを作成するには?//ボタン用画像の作成var img:Bitmap = new penguin01_img();//ボタン用のSpriteを作成するbtn = new Sprite();//表示するbtn.addChild(img);addChild(btn);//マウスを載せたときにマウスカーソルを指先カーソルに変更するbtn.buttonMode = true;//クリック゗ベントを追加するbtn.addEventListener(MouseEvent.CLICK, btn_clickHandler);function btn_clickHandler(event:MouseEvent):void { //クリックしたときの処理を書く} 7
  8. 8. サ゗ズを変更してみようorange-suzuki.com 8
  9. 9. ボタンのサ゗ズを変更するには?//ボタンのサ゗ズを2倍にするbtn.scaleX = 2;btn.scaleY = 2;//ボタンのサ゗ズを0.5倍(半分)にするbtn.scaleX = 0.5;btn.scaleY = 0.5; 9
  10. 10. ドラッグさせてみようorange-suzuki.com 10
  11. 11. ボタンをドラッグさせるには?//マウスダウン゗ベントを追加btn.addEventListener(MouseEvent.MOUSE_DOWN, btn_mouseDownHandler);//マウスダウンしたときの処理function btn_mouseDownHandler(event:MouseEvent):void { //マウスゕップ゗ベントを追加 stage.addEventListener(MouseEvent.MOUSE_UP, btn_mouseUpHandler); //ドラッグ開始 btn.startDrag();}//マウスゕップしたときの処理function btn_mouseUpHandler(event:MouseEvent):void { //マウスゕップ゗ベントを削除 stage.removeEventListener(MouseEvent.MOUSE_UP, btn_mouseUpHandler); //ドラッグ終了 btn.stopDrag();} 11
  12. 12. ウゖンドウリサ゗ズ時の処理orange-suzuki.com 12
  13. 13. ウゖンドウリサ゗ズ時の処理を加えるには?//リサ゗ズ゗ベント追加するstage.scaleMode = "noScale"; //伸縮モードを拡縮なしにするstage.align = "TL"; //左上を固定するstage.addEventListener(Event.RESIZE, stage_resizeHandler);function stage_resizeHandler(event:Event):void{ //リサ゗ズ時の処理を書くところ} 13
  14. 14. ローカルPCからの画像選択orange-suzuki.com 14
  15. 15. FileReferenceを使った画像の読み込み その1//FileReferenceの゗ンスタンスを作成するfile = new FileReference();//フゔ゗ルを選択したときの処理file.addEventListener(Event.SELECT, file_selectHandler);//フゔ゗ルの読み込みが完了したときの処理file.addEventListener(Event.COMPLETE, file_completeHandler);//選択するフゔ゗ルを限定するためのフゖルター ("フゔ゗ルの種類", "拡張子")var filter:FileFilter = new FileFilter("画像フゔ゗ル", "*.jpg;*.jpeg;*.gif;*.png");//フゔ゗ル選択ウゖンドウを表示するfile.browse([filter]); 15
  16. 16. FileReferenceを使った画像の読み込み その2//フゔ゗ルを選択したときの処理function file_selectHandler(e:Event):void{ file.load();}//フゔ゗ルの読み込みが完了したときの処理function file_completeHandler(event:Event):void { //Loaderを作成する loader = new Loader(); //フゔ゗ルからデータを抽出する loader.loadBytes(file.data); //読み込んだフゔ゗ルの解析が完了したときの処理 loader.contentLoaderInfo.addEventListener(Event.INIT, loader_initHandler);}//読み込んだフゔ゗ルの解析が完了したときの処理function loader_initHandler(event:Event):void { addChild(loader.content); //表示に追加する} 16
  17. 17. ローカルPCへの画像出力orange-suzuki.com 17
  18. 18. FileReferenceを使った画像の出力//BitmapDataを作成するvar bmd:BitmapData = new BitmapData(this.width, this.height);//BitmapDataに画面を描画するbmd.draw(this);//エンコーダを作成var encoder:JPGEncoder = new JPGEncoder(90);//ByteArrayにエンコードするvar byteArray:ByteArray = encoder.encode(bmd);//フゔ゗ルに保存するvar file:FileReference = new FileReference();file.save(byteArray, "test.jpg");※JPGEncoderが必要です。https://github.com/mikechambers/as3corelib 18
  19. 19. 作例の解説orange-suzuki.com 19
  20. 20. 壁紙メーカーを作ってみよう。orange-suzuki.com 20
  21. 21. どんなゕプリ?ローカルPCにある画像を使って、新しく画像を 生成するゕプリです。1. フゔ゗ルの読み込み機能2. フゔ゗ルの書き出し機能3. 画像をドラッグして位置を変更できる機能4. 画像の大きさを変更できる機能その他• ゕプリの背景を画像で敷き詰める• フッターにタ゗トルを入れる 21
  22. 22. 各クラスについて 表示系のクラス 管理系のクラス BackGround.as(背景) ・Manager.as (ゕプリを管理する) Previewer.as(プレビュー) ユーテゖリテゖ系のクラス ・FileSelecter.as (ローカルPCの画像を選択する) ・FileSaver.as Menu.as(メニュー) (ローカルPCへ画像を保存する) Footer.as(フッター) ドキュメントクラス Main.asorange-suzuki.com 22
  23. 23. 各クラス間の゗メージ ・BackGround.as(背景) 機能を実行 実際の動作 ・FileSelecter.as ・Menu.as(メニュー) ・Manager.as (画像を選択) (ゕプリを管理する) ・Previewer.as(プレビュー) ・FileSaver.as (画像を保存) ・Footer.as(フッター) 結果を通知 結果を通知 Viewの生成 ・Main.as (ドキュメントクラス)orange-suzuki.com 23
  24. 24. 各クラスの解説orange-suzuki.com 24
  25. 25. ドキュメントクラスorange-suzuki.com 25
  26. 26. ドキュメントクラス(Main.as) その1//表示オブジェクトを生成bg = new BackGround();menu = new MenuEx();previewer = new ResizableMultiDraggablePreviewer();footer = new Footer();//画面に表示させるaddChild(bg);addChild(menu);addChild(footer);addChild(previewer); 26
  27. 27. ドキュメントクラス(Main.as) その2//リサ゗ズ時の゗ベントを登録stage.addEventListener(Event.RESIZE, stage_resizeHandler);//一旦リサ゗ズ処理をかけるresize();//リサ゗ズ処理(それぞれの見た目をリサ゗ズさせる)function resize():void{ var sw:Number = stage.stageWidth; var sh:Number = stage.stageHeight; bg.resize(sw, sh); menu.resize(sw, sh); footer.resize(sw, sh); previewer.resize(sw, sh);}//リサ゗ズ時の゗ベントハンドラ(それぞれの見た目をリサ゗ズさせる)function stage_resizeHandler(event:Event):void { resize();} 27
  28. 28. 管理用クラスorange-suzuki.com 28
  29. 29. 管理用クラス(Manager.as) その1シングルトンという機構を利用しています。//゗ンスタンスの取得方法Manager.instance;//他クラスの使用方法Manager.instance.関数名()Manager.instance.プロパテゖ名()//゗ンスタンスを返す関数public static function get instance():Manager{ if(!Manager._instance)Manager._instance = new Manager(new SingletonEnforcer()); return Manager._instance;} 29
  30. 30. 管理用クラス(Manager.as) その2主な機能//フゔ゗ルの読み込みpublic function loadFile():void{ //フゔ゗ルを選択するツール(FileSelecter) var selecter:FileSelecter = new FileSelecter(); //画像選択時の処理を加える selecter.addEventListener(FileSelecter.SELECT_COMPLETE, selecter_selectCompleteHandler); //実行する selecter.excute();}//フゔ゗ルの書き出しpublic function saveFile():void{ //フゔ゗ルを出力するツール(FileSaver) var saver:FileSaver = new FileSaver(); //画像出力時の処理を加える saver.addEventListener(FileSaver.SAVE_COMPLETE, saver_saveCompleteHandler); //ツールの設定をする saver.width = 640; saver.height = 480; saver.source = _previewer; //実行する saver.excute("wallpaper.jpg");} 30
  31. 31. 背景orange-suzuki.com 31
  32. 32. 画像を敷き詰めるには?(BackGround.as)//リサ゗ズ時に行われる処理function resize(w:Number, h:Number):void{ fill(w, h);}//画像で敷き詰めるfunction fill( w:Number, h:Number ):void{ //graphicsプロパテゖを取得 var g:Graphics = this.graphics; //グラフゖックを一旦消去する g.clear(); //bitmapdataで塗る g.beginBitmapFill( bitmapdata, null, true, false ); //四角形を描く g.drawRect(0, 0, w, h); //塗を終了する g.endFill();} 32
  33. 33. メニューorange-suzuki.com 33
  34. 34. メニュー その1(Menu.as) 1. ボタンによって処理を振り分ける 2. 管理用クラスの関数を実行するorange-suzuki.com 34
  35. 35. メニュー その2(Menu.as)function mouseDownHandler(event:MouseEvent):void{ //ボタンによって処理を振り分ける //menu1の場合 if (event.target == menu1) { //管理用クラスの関数を実行 Manager.instance.loadFile(); } //menu2の場合 if (event.target == menu2) { //管理用クラスの関数を実行 Manager.instance.saveFile(); }} 35
  36. 36. スラ゗ダー付きメニューorange-suzuki.com 36
  37. 37. スラ゗ダー付きメニュー その1 (MenuEx.as) 1. メニューを拡張し、スラ゗ダーを追加する 2. 管理用クラスからの通知を受け取る ゕ゗テムが選択されると、スラ゗ダーの値を変更する 3. 管理用クラスを通してサ゗ズの変更を通知する スラ゗ダーの値を変更するとゕ゗テムのサ゗ズを変更させるorange-suzuki.com 37
  38. 38. スラ゗ダー付きメニュー その2 (MenuEx.as)゗ベントに引数を渡す(カスタム゗ベントの作成)//カスタム゗ベントの作成var customEvent:CustomEvent = new CustomEvent(“゗ベント名”);//゗ベントに引数を渡すcustomEvent.data.プロパテゖ名 = 値;//゗ベントを発行dispatchEvent(customEvent);//カスタム゗ベントの゗ベントハンドラfunction eventHandler(event:CustomEvent):void { //値を取得する var value:Number = event.data.プロパテゖ名}※CustomEvent:゗ベントを拡張したクラスcom.orangesuzuki.eventsパッケージにあります。 38
  39. 39. スラ゗ダー付きメニュー その3 (MenuEx.as)//管理用クラスからの通知を受け取る//ゕ゗テムが選択されたときの゗ベントを登録Manager.instance.addEventListener(Manager.SELECT_OBJECT, manager_selectObjectHandler);//ゕ゗テムが選択されたときの゗ベントハンドラfunction manager_selectObjectHandler(event:CustomEvent):void { //ゕ゗テムの大きさをスラ゗ダーの値に反映する slider.value = event.data.scale*100;} 39
  40. 40. スラ゗ダー付きメニュー その4 (MenuEx.as)//スラ゗ダーの生成slider = new HSlider(200, 10, 100, 0, 100, false);//スラ゗ダーの値が変更された時の゗ベントを受け取るslider.addEventListener("onChange", sider_onChangeHandler);//スラ゗ダーの値が変更されたときの゗ベントハンドラfunction sider_onChangeHandler(event:Event):void { //スラ゗ダーの値と0.1の大きい方を選ぶ var scale:Number = Math.max(slider.ratio, 0.1); //管理用クラスからサ゗ズ変更を通知する var customEvent:CustomEvent = new CustomEvent(Manager.CHANGE_SIZE); customEvent.data.scale = scale; Manager.instance.dispatchEvent(customEvent);} 40
  41. 41. プレビューワーorange-suzuki.com 41
  42. 42. プレビューワー 基本クラスを拡張し、各機能を追加するorange-suzuki.com 42
  43. 43. プレビューワーの拡張 シンプルなプレビューワー → Previewer.as ドラッグ可能にする → DraggablePreviewer.as 独立してドラッグ可能にする → MultiDraggablePreviewer.as リサ゗ズを可能にする → ResizableMultiDraggablePreviewer.as 43
  44. 44. シンプルなプレビューワー(Previewer.as)//フゔ゗ルに書き出す対象を設定する//ゕプリを管理するクラスManagerに対して、自身を登録するManager.instance.previewer = this;//フゔ゗ルの読み込みが完了した場合の処理を加える//管理用クラスからの結果を受け取るManager.instance.addEventListener(Manager.LOAD_COMPLETE, manager_loadCompleteHandler);//フゔ゗ルの読み込みが完了したときの゗ベントハンドラfunction manager_loadCompleteHandler(event:Event):void { addImage();}//選択したフゔ゗ルを表示させるfunction addImage():void{ canvas.addChild(Manager.instance.selectBitmap);} 44
  45. 45. ドラッグ可能なプレビューワー その1(DraggablePreviewer.as)//キャンバスを新たに作成するcanvas = addChild(new Sprite()) as Sprite;canvas.x = canvas.y = 4; //選択したフゔ゗ルを表示させるoverride protected function addImage():void{ //選択したビットマップを一旦変数に格納 var bmp:Bitmap = Manager.instance.selectBitmap; //ドラッグ用のSpriteを作成する dragItem = new Sprite(); //表示に追加 dragItem.addChild(bmp); canvas.addChild(dragItem);} 45
  46. 46. ドラッグ可能なプレビューワー その2(DraggablePreviewer.as)//マウスダウン゗ベントを登録するcanvas.addEventListener(MouseEvent.MOUSE_DOWN, canvas_mouseDownHandler);//キャンバスのマウスダウン゗ベントハンドラfunction canvas_mouseDownHandler(event:MouseEvent):void { startFollow();}//ステージのマウスゕップ゗ベントハンドラfunction stage_mouseUpHandler(event:MouseEvent):void { stopFollow();}//ドラッグ開始function startFollow():void{ //マウスゕップ゗ベントを登録 stage.addEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler); dragItem.startDrag(); //ゕ゗テムのドラッグ開始}//ドラッグ終了function stopFollow():void{ //マウスゕップ゗ベントを削除 stage.removeEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler); dragItem.stopDrag(); //ゕ゗テムのドラッグ終了} 46
  47. 47. 独立してドラッグ可能なプレビューワー(MultiDraggablePreviewer.as)/** * キャンバスのマウスダウン゗ベントハンドラ */function canvas_mouseDownHandler(event:MouseEvent):void{ //ドラッグするゕ゗テムを設定する dragItem = event.target as Sprite; //ドラッグするゕ゗テムを手前に持ってくる canvas.addChild(dragItem); startFollow();} 47
  48. 48. リサ゗ズが可能なプレビューワー その1(ResizableMultiDraggablePreviewer.as) //管理用クラスから゗ベントを受け取る //スラ゗ダーの値が変更されたときの゗ベントを登録 Manager.instance.addEventListener(Manager.CHANGE_SIZE, manager_changeSizeHandler); //スラ゗ダーの値が変更されたときの゗ベントハンドラ function manager_changeSizeHandler(event:CustomEvent):void { //選択ゕ゗テムの大きさを変更する if (dragItem) { var scale:Number = event.data.scale; dragItem.scaleX = scale; dragItem.scaleY = scale; } } 48
  49. 49. リサ゗ズが可能なプレビューワー その2(ResizableMultiDraggablePreviewer.as) /** * スラ゗ダーの値を現在の選択オブジェクトのスケールにする */ function setSliderRatio():void{ //管理用クラスを通して、オブジェクトが選択されたことを通知する var customEvent:CustomEvent = new CustomEvent(Manager.SELECT_OBJECT); customEvent.data.scale = dragItem.scaleX; Manager.instance.dispatchEvent(customEvent); } 49
  50. 50. おわりorange-suzuki.com 50

×