Home > Flash | WEB > FIVe3Dでくじ引き用パネルを作ってみた

FIVe3Dでくじ引き用パネルを作ってみた

今週末に友人の結婚パーティーがあって、その幹事を仰せつかっています。

ちょっと前に同窓会の幹事もやったんですが、
そのときはクジの景品を選ぶのに、紙に書いたパネルを使いました。

ビンゴの景品を選んでもらうのに、
Flashでパネルが回転したりシャッフルされたりしたらおもしろいなー！
と思い立ち、突貫で作ってみた。


こんなの↑　クリックで拡大
ちなみに景品名は適当ですのであしからず。

回転とかの処理を、前から興味もってたFIVe3Dでやろう！と思って使ってみたけど、
やっぱいろいろ調査してから作らないとダメですね。
なるべく汎用性のあるものにしようと思ったけど、ちょっぴり悲しい結果になりました。

↓以下動作サンプルと、作ってみた感想等

shuffleクリックでパネルシャッフル、reverseでパネル回転、startで開始です。

開始後はパネルをクリックでひっくり返す。
最初の状態には戻れません。。。リロードプリーズ。

ひっくり返る処理をFIVe3Dを使って描画しました。
→FIVe3D

まず、汎用さを出すために、外部XMLをロードして一覧表示しようと考えました。
外部ファイルの内容はこんな感じ

>>text
XML:
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <root>
  3.   <setting>
  4.     <rows>4</rows>
  5.     <width>180</width>
  6.     <height>180</height>
  7.   </setting>
  8.   <items>
  9.     <item>
  10.       <name>PSP</name>
  11.       <size>70</size>
  12.       <bgColor>0xCCFFD9</bgColor>
  13.     </item>
  14.     <item>
  15.       <name>人生銀行</name>
  16.       <size>38</size>
  17.       <bgColor>0xD6F5F5</bgColor>
  18.     </item>
  19.   </items>
  20.   ・・・
  21. </root>

以前記事に書いたnicoCloudとほぼ同じで、
パネルのサイズや、アイテムの数などをXMLで記述して、
その分パネルを作って、表示させておしまい！ってやろうと思ったんですが、結構はまった。

パネルをFIve3Dで作ったんですが、
まずFIVe3Dの世界では、Z軸ごとの重なり順で表示されない。
そんでもって３Dで表示されるテキストに日本語が使えない。

Z軸ごとの重なり順で表示されないため、
パネルが回転したときに自動的に裏側が表示されませんでした。
そのため、表を向いているときは裏のSprite3Dを不可視に、
裏を向いているときには、表を不可視にしてやる必要がありました。
この辺のことをちゃんと読んで知ってれば・・・。英語の壁。

>>text
ACTIONSCRIPT:
  1. private function onEnterHandler(event:Event):void{
  2.     var rotationY:Number = sprite3D.rotationY;
  3.     if (rotationY> -90 && rotationY <= 90) {
  4.         head.visible = true;
  5.         back.visible = false;
  6.     }else {
  7.         head.visible = false;
  8.         back.visible = true;
  9.     }
  10. }

そんでもって、３Dテキストに日本語フォント使えない・・・。
以下の記事から、３Dテキスト用のクラスを作成できることはわかったのですが、
使う文字は予め用意しておかなければならない。
→ FIVe3Dで好きなフォントを使う(日本語も)
http://moringo.moo.jp/wordpress/?p=113

つまり、今回の場合で言うと・・・

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨワヲン無限人生銀行

というような使う文字を予め用意して、クラス化。
使う文字考えてクラス作るんだったら、XMLでアイテム名指定できる意味がない・・・。

そんでもって３Dテキストの文字整列が弱かったりして、コードもどんどん強引に・・・。
汎用性があるとは言い難くなってしまった。

でもまぁ、汎用性といいつつも出番があるのはきっと今回の結婚パーティーのみ。
本番までにもうちょっと直すかぁ〜

FIVe3Dについては、
Papervision3Dよりは簡単に３Dできるんじゃないかな、というような感想。
以下、全ソース。外部SWFファイルのリンケージしたデータも使ってます。

Panels パネル並べたりするクラス

>>text
ACTIONSCRIPT:
  1. package  {
  2.     import flash.display.Sprite;
  3.     import flash.display.StageAlign;
  4.     import flash.display.StageScaleMode;
  5.     import flash.events.Event;
  6.     import flash.events.KeyboardEvent;
  7.     import flash.events.MouseEvent;
  8.     import flash.net.URLLoader;
  9.     import flash.net.URLRequest;
  10.    
  11.     public class Panels extends Sprite{
  12.         private var panelFileLoader:URLLoader;
  13.         private var panelList:Array;
  14.         private var panel_width:Number;
  15.         private var panel_height:Number;
  16.         private var panel_rows:Number;
  17.        
  18.         [Embed(source = 'PanelsSeed.swf', symbol = 'shuffle') ]
  19.         private var Shuffle:Class;
  20.         private var shuffle;
  21.         [Embed(source = 'PanelsSeed.swf', symbol = 'reverse') ]
  22.         private var Reverse:Class;
  23.         private var reverse;
  24.         [Embed(source = 'PanelsSeed.swf', symbol = 'start') ]
  25.         private var Start:Class;
  26.         private var start;
  27.        
  28.         public function Panels() {
  29.             stage.scaleMode = StageScaleMode.NO_SCALE;
  30.             stage.align = StageAlign.TOP_LEFT;
  31.             panelList = new Array;
  32.            
  33.             var url:String = "panels.xml";
  34.             var request:URLRequest = new URLRequest(url);
  35.             panelFileLoader = new URLLoader(request);
  36.             panelFileLoader.addEventListener(Event.COMPLETE, loadCompleteHandler);
  37.            
  38.             shuffle = new Shuffle;
  39.             addChild(shuffle);
  40.             reverse = new Reverse;
  41.             addChild(reverse);
  42.             start = new Start;
  43.             addChild(start);
  44.  
  45.             shuffle.y = 730;
  46.             shuffle.x = 30;
  47.             shuffle.addEventListener(MouseEvent.CLICK, this.panelShuffle);
  48.             shuffle.useHandCursor = true;
  49.             shuffle.buttonMode = true;
  50.             reverse.y = 730;
  51.             reverse.x = 240;
  52.             reverse.addEventListener(MouseEvent.CLICK, this.panelAllReverse);
  53.             reverse.useHandCursor = true;
  54.             reverse.buttonMode = true;
  55.             start.addEventListener(MouseEvent.CLICK, this.numberingAndStart);
  56.             start.useHandCursor = true;
  57.             start.buttonMode = true;
  58.             start.y = 730;
  59.             start.x = 500;
  60.            
  61.             stage.addEventListener(KeyboardEvent.KEY_DOWN, keydownHandler);
  62.             try {
  63.                 panelFileLoader.load(request);
  64.             } catch (error:Error) {
  65.                 trace("(-_-)");
  66.             }
  67.         }
  68.        
  69.         private function loadCompleteHandler(event:Event):void {
  70.             var panelsXML:XML = new XML(panelFileLoader.data);
  71.             var xmlNodes:XMLList = panelsXML.child("items")[0].child("item");
  72.             var settingNode:XMLList = panelsXML.child("setting");
  73.            
  74.             this.panel_width = Number(settingNode.width);
  75.             this.panel_height = Number(settingNode.height);
  76.             this.panel_rows = Number(settingNode.rows);
  77.             var row:Number = 0;
  78.             var col:Number = 0;
  79.             for (var i:Number = 0; i <xmlNodes.length(); i++) {   
  80.                 var itemObject:Object = new Object;
  81.                 var node:XML = xmlNodes[i];
  82.                 var size:Number = node.size;
  83.                 var bgColor:Number = node.bgColor;
  84.                
  85.                 if (isNaN(size)) size = 10;
  86.                 if (isNaN(bgColor) || bgColor == 0) bgColor = 0xFFCCCC;
  87.                
  88.                 var panel:Panel = new Panel(this.panel_width-10, this.panel_height-10, node.name, size, bgColor);
  89.                 addChild(panel);
  90.                 panelList.push(panel);
  91.                 if (row>= this.panel_rows) {
  92.                     col++;
  93.                     row = 0;
  94.                 }
  95.                 panel.x = this.panel_width * row;
  96.                 row++;
  97.                 panel.y = col * this.panel_height;
  98.             }
  99.         }
  100.        
  101.         private function keydownHandler(event:KeyboardEvent){
  102.             if(event.keyCode == 83){
  103.                 panelAllReverse();
  104.             }
  105.             if(event.keyCode == 65){
  106.                 panelShuffle();
  107.             }
  108.             if(event.keyCode == 68){
  109.                 numberingAndStart();
  110.             }
  111.         }
  112.        
  113.         private function panelAllReverse(event:Event = null):void{
  114.             for(var i = 0; i <panelList.length; i++){
  115.                 panelList[i].reverse();
  116.             }
  117.         }
  118.        
  119.         private function panelShuffle(event:Event = null):void{
  120.             // randomize!
  121.            
  122.             var i = panelList.length;
  123.         while (i) {
  124.                 var j = Math.floor(Math.random()*i);
  125.              var t = panelList[--i];
  126.                 panelList[i] = panelList[j];
  127.                 panelList[j] = t;
  128.           }
  129.             var row:Number = 0;
  130.             var col:Number = 0;
  131.             for (i = 0; i <panelList.length; i++) {
  132.                 if (row>= this.panel_rows) {
  133.                     col++;
  134.                     row = 0;
  135.                 }
  136.                 var x = this.panel_width * row;
  137.                 row++;
  138.                 var y = col * this.panel_height;
  139.                 panelList[i].moveTo(x, y);
  140.             }
  141.         }
  142.        
  143.         private function numberingAndStart(event:Event = null){
  144.             for (var i = 0; i <panelList.length; i++) {
  145.                 panelList[i].number = i+1;
  146.                 panelList[i].clickReversable();
  147.             }
  148.             //this.panelShuffle();
  149.             this.removeChild(start);
  150.             this.removeChild(shuffle);
  151.             this.removeChild(reverse);
  152.         }
  153.     }
  154. }

Panel パネル一個分のクラス

>>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.HiraginoGothicProW6;
  9.     import five3D.typography.HiraginoProW6Bold;
  10.     import flash.display.Sprite;
  11.     import flash.events.Event;
  12.     import flash.events.MouseEvent;
  13.    
  14.     public class Panel extends Sprite {
  15.         private var scene:Scene3D;
  16.         private var sprite3D:Sprite3D;
  17.         private var head:Sprite3D;
  18.         private var back:Sprite3D;
  19.         private var headTf:DynamicText3D;
  20.  
  21.  
  22.  
  23.         private var backTf:DynamicText3D;
  24.         private var isHead:Boolean = true;
  25.         private var bgColor:Number;
  26.         private var panel_width;
  27.         private var panel_height;
  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. }

Comments:0

Comment Form
Remember personal info

Trackbacks:1

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

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

Home > Flash | WEB > FIVe3Dでくじ引き用パネルを作ってみた

最近の記事
カテゴリ
最近のつぶやき
    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