Home > Flash | デザイン > FIVe3Dでくじ引き用パネルを作ってみた(2) AIR化

FIVe3Dでくじ引き用パネルを作ってみた(2) AIR化

前のエントリで作成した、
ビンゴ景品用くじ引きパネルを、
結婚パーティー本番で、スタンドアローンで動かしたかったので、Air化してみました。

→Airとは？参考
http://www.atmarkit.co.jp/fwcr/rensai2/airwidget01/airwidget01_1.html

相変わらずBox2Dの３Dテキストの日本語フォント問題は残っていますが、
とりあえずXMLファイルをドロップして表示させるように変更しました。

これでパーティー本番の環境で、ローカルファイルセキュリティがー！とかって焦る心配ない！
Airが入ってねーとかって焦る心配はある。

また、ビンゴの景品用ということで、
今ビンゴのどの数字が出てきているか表示するような機能も追加しました。
これがあればきっとビンゴがもりあがるね！きっと！

参考までにAirファイルとドロップする用のXMLをおいておきます。
panelsair.air
panels.xml

相変わらずエラーは起きないものとして作ってます。運用回避！
↓ソース全部等

今回はFlex 3 BuilderでFlex 3 プロジェクトのデスクトップアプリケーションとして作成しました。

mxmlにファイルのドロップ処理などを加え、
さらにmxmlファイルからSpriteを継承したPanelsクラスをaddChildしています。
Spriteクラスは直接addChildできないようなのでUIComponentを間に挟みました。

mxmlファイル

>>text
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderColor="#F2F0F0" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" width="1000" height="800" creationComplete="setupPanel()">
  3.     <mx:Canvas x="10" y="10" width="978" height="757" id="canvas" backgroundColor="#FFFFFF">
  4.         <mx:Canvas x="10" y="620" width="958" height="137" id="bingoNum" backgroundColor="#F0F5FB">
  5.         </mx:Canvas>
  6.         <mx:Canvas x="189" y="10" width="600" height="650" id="panelArea">
  7.             <mx:Label x="121" y="211" text="Drug XML file to Me!" width="358" fontSize="27" id="drugme"/>
  8.        
  9.         </mx:Canvas>
  10.         <mx:Button x="84" y="590" label="+" width="47" id="plusButton" click="onPlusClick()"/>
  11.         <mx:Button x="139" y="590" label="-" width="42" id="minusButton" click="onMinusClick()"/>
  12.         <mx:TextInput x="10" y="590" width="66" id="binum"/>
  13.        
  14.     </mx:Canvas>
  15.     <mx:Script>
  16.         <![CDATA[
  17.             import mx.core.UIComponent;
  18.             import Panels;
  19.             import flash.desktop.*;
  20.             import flash.display.Bitmap;
  21.             import flash.filesystem.File;
  22.             import mx.controls.Label;
  23.  
  24.             private var panels:Panels;
  25.             private var bingoNumList:Array;
  26.             public function setupPanel():void{
  27.                 bingoNumList = new Array;
  28.                 var myUIComponent:UIComponent = new UIComponent();
  29.                 panels = new Panels;   
  30.                 myUIComponent.addChild(panels);
  31.                 panelArea.addChild(myUIComponent);
  32.                
  33.                 canvas.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onCanvasDragEnter);
  34.                 canvas.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onCanvasDragDrop);
  35.             }
  36.             // キャンバスにドラッグされた際呼び出されるリスナ
  37.             private function onCanvasDragEnter(event:NativeDragEvent):void {
  38.                 if (event.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)) {
  39.                      NativeDragManager.acceptDragDrop(canvas);
  40.                 }
  41.             }
  42.             // キャンバスにドロップされた際呼び出されるリスナ
  43.             private function onCanvasDragDrop(event:NativeDragEvent):void {
  44.                var fileList:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
  45.                if (fileList.length> 1) {
  46.                    return;
  47.                }
  48.                var file:File = fileList[0];
  49.                var stream:FileStream = new FileStream();
  50.                try {
  51.                    stream.open(file, FileMode.READ);
  52.                    var str:String = stream.readUTFBytes(stream.bytesAvailable);
  53.                    panels.loadXML(str);
  54.                    drugme.visible = false;
  55.                } catch (error:IOError) {
  56.                    trace("(-_-;;");
  57.                } finally {
  58.                    stream.close();
  59.                }
  60.            }
  61.            private function onPlusClick(){
  62.                if(this.binum.text == "") return;
  63.                var num:Label = new Label;
  64.                num.setStyle("fontSize", 28);
  65.                num.setStyle("color", 0x6481F5);
  66.                num.text = this.binum.text;
  67.                binum.text == "";
  68.                var i = this.bingoNumList.length;
  69.                // 時間がなかったのでアホな改行処理・・・４行あればいいかなって・・・・
  70.                num.x = i * 50;
  71.                if(i> 56){
  72.                     num.x -= 50 * 57;
  73.                     num.y = 90;
  74.                }else if(i> 37){
  75.                     num.x -= 50 * 38;
  76.                     num.y = 60;
  77.                }else if(i> 18){
  78.                     num.x -= 50 * 19;
  79.                     num.y = 30;
  80.                }
  81.                this.binum.text = "";
  82.                this.bingoNumList.push(num);
  83.                this.bingoNum.addChild(num);
  84.            }
  85.            private function onMinusClick(){
  86.                if(bingoNumList.length == 0) return;
  87.                var num = bingoNumList.pop();
  88.                this.bingoNum.removeChild(num);
  89.            }
  90.         ]]>
  91.     </mx:Script>
  92.    
  93. </mx:WindowedApplication>

Panelsクラス

>>text
ACTIONSCRIPT:
  1. package  {
  2.     import caurina.transitions.Tweener;
  3.    
  4.     import five3D.display.DynamicText3D;
  5.     import five3D.display.Scene3D;
  6.     import five3D.display.Sprite3D;
  7.     import five3D.typography.HelveticaBold;
  8.     import five3D.typography.HiraginoProW6Bold;
  9.    
  10.     import flash.display.Sprite;
  11.     import flash.events.Event;
  12.     import flash.events.MouseEvent;
  13.  
  14.     /**
  15.     * @author Default
  16.     */
  17.     public class Panel extends Sprite {
  18.         private var scene:Scene3D;
  19.         private var sprite3D:Sprite3D;
  20.         private var head:Sprite3D;
  21.         private var back:Sprite3D;
  22.         private var headTf:DynamicText3D;
  23.         private var backTf:DynamicText3D;
  24.         private var isHead:Boolean = true;
  25.         private var bgColor:Number;
  26.         private var panel_width:Number;
  27.         private var panel_height:Number;
  28.        
  29.         public function Panel(width:Number = 100, height:Number = 100, name:String = "test", fontSize:Number = 12, bgColor:Number = 0xFF00FF ) {
  30.             scene= new Scene3D();
  31.             this.addChild(scene);
  32.             this.bgColor = bgColor;
  33.             this.panel_width = width;
  34.             this.panel_height = height;
  35.            
  36.             sprite3D = new Sprite3D;
  37.             sprite3D.x = width / 2;
  38.             sprite3D.y = height / 2;
  39.             head = new Sprite3D;
  40.             back = new Sprite3D;
  41.            
  42.             head.graphics3D.beginFill(0xEEEEEE);
  43.             head.graphics3D.drawRoundRect( -panel_width/2, -panel_height/2, panel_width, panel_height, 10, 10);
  44.             head.graphics3D.endFill();
  45.             head.z = -1;
  46.             sprite3D.addChild(head);
  47.            
  48.             back.graphics3D.beginFill(0xAAAACC);
  49.             back.graphics3D.drawRoundRect( -panel_height/2, -panel_height/2, panel_width, panel_height, 10, 10);
  50.             back.graphics3D.endFill();
  51.             back.z = 1;
  52.             back.rotationY = 180;
  53.             sprite3D.addChild(back);
  54.            
  55.             headTf = new DynamicText3D(HiraginoProW6Bold);
  56.             headTf.size = fontSize;
  57.             headTf.color = 0x333333;
  58.             headTf.text = name.toString();
  59.             headTf.y = -fontSize/2;
  60.             headTf.z = 0;
  61.             headTf.x = -width /2 + 10;
  62.             head.addChild(headTf);
  63.            
  64.             // まだ数字は載せない
  65.             backTf = new DynamicText3D(HelveticaBold);
  66.             backTf.size = 80;
  67.             backTf.color = 0x333333;
  68.             backTf.y = -50;
  69.             backTf.z = 0;
  70.             backTf.x = -20;
  71.             back.addChild(backTf);
  72.            
  73.             scene.addChild(sprite3D);
  74.             this.addEventListener(Event.ENTER_FRAME, onEnterHandler);
  75.         }
  76.        
  77.         private function onEnterHandler(event:Event):void{
  78.             //sprite3D.rotationY += 2;
  79.             var rotationY:Number = sprite3D.rotationY;
  80.             if (rotationY> -90 && rotationY <= 90) {
  81.                 head.visible = true;
  82.                 back.visible = false;
  83.             }else {
  84.                 head.visible = false;
  85.                 back.visible = true;
  86.             }
  87.         }
  88.        
  89.         public function reverse():void{
  90.             var toRotation:Number;
  91.             if(isHead){
  92.                 isHead = false;
  93.                 toRotation = 180;
  94.             }else{
  95.                 isHead = true;
  96.                 toRotation = 360;
  97.             }
  98.             Tweener.addTween(sprite3D, {rotationY:toRotation, time:1, transition:"easeOutQuad"});
  99.         }
  100.        
  101.         public function moveTo(x, y):void{
  102.             Tweener.addTween(this, {x:x, y:y, time:1, transition:"easeOutQuad"});
  103.         }
  104.        
  105.         public function clickReversable():void{
  106.             this.addEventListener(MouseEvent.CLICK, clickHandler);
  107.             this.buttonMode = true;
  108.             this.useHandCursor = true;
  109.         }
  110.        
  111.         private function clickHandler(event:Event):void{
  112.             this.reverse();
  113.         }
  114.        
  115.         public function set number(num:Number):void{
  116.             if(num> 9) this.backTf.x = -48;
  117.             if(isHead) reverse();
  118.             this.backTf.text = num.toString();
  119.             back.graphics3D.clear();
  120.             back.graphics3D.beginFill(this.bgColor);
  121.             back.graphics3D.drawRoundRect( -panel_width/2, -panel_height/2, panel_width, panel_height, 10, 10);
  122.             back.graphics3D.endFill();
  123.         }   
  124.     }
  125. }

panelクラスは前の記事のものと変更ありません。初のAir化、なんとなく完了

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://parpue.net/web/flash/235/trackback
Listed below are links to weblogs that reference
FIVe3Dでくじ引き用パネルを作ってみた(2) AIR化 from parpue.net

Home > Flash | デザイン > FIVe3Dでくじ引き用パネルを作ってみた(2) AIR化

最近の記事
カテゴリ
最近のつぶやき
    Error: Unable to access Twitter at URL (http://www.twitter.com/statuses/user_timeline/.json?count=0). Verify service status. (HTTP code 404.)
>>Twitter
下北ぶらぶら、健康的な飯を食う。
ペンタで初スタジオなう。書き初め大会してた〜。俺も書こうかしら。
スタジオ、休憩で北海道みやげなう。
全部のせ。
コーラス苦手なう。
太い…
休みが終わる
キリッ
天丼と、そばの組み合わせ。最強。
観察されている
指の練習
あくび。俺も寝るかぁ〜
毎年の春先の好物。
たまにある、本気噛み
リハスタ
ゆっけ
スタジオって他であんま売ってない飲み物多いよな
生肉〜
>>Flickr
過去の記事
タグ
リンク
chocolataste-planner
millon

サーチ
Feeds
Meta
blog ranking ブログランキング・にほんブログ村へ
にほんブログ村 テクノラティのお気に入りに追加する

Return to page top