Home > Flash | WEB | デザイン > FIVe3Dで３Dテンキー

FIVe3Dで３Dテンキー

久しぶりにFIVe3Dの配布サイトみたら、
なんか奇麗な３Dキーボードのデモが増えていました。

ふと思いついたので、もうちょっとリアルな形で
自分も３Dテンキーデモをパク作成してみました。

デモとソース↓

最初にキーをマウスでプッシュしてフォーカスを与えてください。
テンキーや、キーボードの数字キーとも連動して動きます。
計算機機能はおまけ程度につけました、ちゃんと動かないので真剣に使わないでくださいｗ　(^-^;

このテンキーはキーひとつを生成するSquareKeyクラスと、
SquareKeyをテンキーの数だけ生成するTenkey3Dクラスから成っています。

FIVe3Dはベクターベースの３D描画ライブラリで、
重なり順は考慮しないので、後ろにあるものから描画していく必要があります。
今回はキーは、影を出すためのbottom、
画面に見えてる３面のtop, front, sideのSprite3Dを組み合わせてキーひとつ分を作っています。
なので、右側からしか見下ろせません(^-^;;

同様に、キーを配置するTenkey３Dクラスでも、
後ろの方に配置されるキーから順番においていっています。

Tenkey3Dクラスで、"tenkeyDown"イベント、"tenkeyUp"イベントで、
どのキーが押されたかを検知できるようにしています。

>>text
ACTIONSCRIPT:
  1. Tenkey3D.addTenkeyEventListener(type:String, listener:Function);

listenerは、入力されたキーの文字列を引数として呼び出されます。

↓以下テンキーを生成するソース、計算部は適当に作ったので・・・載せない(^-^;;;

キーひとつ分のSquareKeyクラス

>>text
ACTIONSCRIPT:
  1. package
  2. {
  3.     import five3D.display.DynamicText3D;
  4.     import five3D.display.Sprite3D;
  5.     import five3D.typography.HelveticaBold;
  6.    
  7.     import flash.events.Event;
  8.     import flash.events.MouseEvent;
  9.     import flash.filters.DropShadowFilter;
  10.    
  11.     public class SquareKey extends Sprite3D
  12.     {
  13.         private var top:Sprite3D;
  14.         private var front:Sprite3D;
  15.         private var side:Sprite3D;
  16.         private var bottom:Sprite3D;
  17.        
  18.         public var sq_width:Number=100;
  19.         public var sq_height:Number=100;
  20.         public var sq_tall:Number=60;
  21.         public var _key:String;
  22.        
  23.         public var _onKeyDown:Function = null;
  24.         public var _onKeyUp:Function = null;
  25.        
  26.         public function SquareKey(key:String, width:Number, height:Number)
  27.         {
  28.             _key = key;
  29.             sq_width = width;
  30.             sq_height = height;
  31.             var diff:Number = sq_tall*Math.tan(10 * Math.PI / 180);
  32.            
  33.             bottom = new Sprite3D;
  34.             bottom.graphics3D.beginFill(0xCCCCCC);
  35.             bottom.graphics3D.drawRect(0,0,sq_width + 2 * diff ,sq_height + 2 * diff);
  36.             bottom.graphics3D.endFill();
  37.             bottom.rotationX = -90;
  38.             bottom.z = sq_height + diff;
  39.             bottom.x = -diff;
  40.             bottom.y = sq_tall;
  41.            
  42.             top = new Sprite3D;
  43.             top.graphics3D.beginFill(0xFFFFFF);
  44.             top.graphics3D.drawRect(0,0,sq_width,sq_height);
  45.             top.graphics3D.endFill();
  46.             top.rotationX = -90;
  47.             top.z = sq_height;
  48.             top.focusRect = false;
  49.            
  50.             var dropShadow:DropShadowFilter = new DropShadowFilter;
  51.             dropShadow.blurX = 10;
  52.             dropShadow.blurY = 10;
  53.             dropShadow.color = 0x000000;
  54.             dropShadow.inner = false;
  55.             dropShadow.angle = 45;
  56.             dropShadow.strength = 0.4;
  57.             bottom.filters = [dropShadow];
  58.            
  59.             this.addChild(bottom);
  60.             this.addChild(top);
  61.            
  62.            
  63.             var keys:Array = key.split("\n");
  64.             for(var i:Number=0;i<keys.length;i++){
  65.                 var letter:DynamicText3D = new DynamicText3D(HelveticaBold);
  66.                 if(key.length> 2) letter.size = 30;
  67.                 else letter.size = 50;
  68.                 letter.color = 0x666666;
  69.                 letter.text = keys[i];
  70.                 letter.x = 10;
  71.                 letter.y = 10 + 35 * i;
  72.                 top.addChild(letter);
  73.             }
  74.            
  75.             front = new Sprite3D;
  76.             front.graphics3D.beginFill(0xEEEEEE);
  77.             front.graphics3D.moveTo(0, 0);
  78.             front.graphics3D.lineTo(sq_width, 0);
  79.             front.graphics3D.lineTo(sq_width+diff, sq_tall);
  80.             front.graphics3D.lineTo(-diff, sq_tall);
  81.             front.graphics3D.lineTo(0, 0);
  82.             front.graphics3D.endFill();
  83.             front.rotationX = -10;
  84.             this.addChild(front);
  85.            
  86.             var sideBase:Sprite3D = new Sprite3D;
  87.             side = new Sprite3D;
  88.             side.graphics3D.beginFill(0xCCCCCC);
  89.             side.graphics3D.moveTo(0,0);
  90.             side.graphics3D.lineTo(sq_height, 0);
  91.             side.graphics3D.lineTo(sq_height+diff, sq_tall);
  92.             side.graphics3D.lineTo(-diff, sq_tall);
  93.             side.graphics3D.lineTo(0, 0);
  94.             side.graphics3D.endFill();
  95.             side.rotationX = -10;
  96.            
  97.             sideBase.x = sq_width;
  98.             sideBase.rotationY = -90;
  99.            
  100.             sideBase.addChild(side);
  101.             this.addChild(sideBase);
  102.                
  103.             side = new Sprite3D;
  104.            
  105.             top.addEventListener(MouseEvent.MOUSE_DOWN, mousePressHandler);
  106.             top.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
  107.             top.addEventListener(MouseEvent.MOUSE_OUT, mouseUpHandler);
  108.             top.useHandCursor = true;
  109.             top.buttonMode = true;
  110.         }
  111.        
  112.         private function mousePressHandler(event:Event):void{
  113.             keydown();
  114.         }
  115.         private function mouseUpHandler(event:Event):void{
  116.             keyup();
  117.         }
  118.        
  119.         public function get key():String{
  120.             return _key;
  121.         }
  122.        
  123.         public function keydown():void{
  124.             this.y = 13;
  125.             if(this._onKeyDown != null) this._onKeyDown(this._key);
  126.         }
  127.        
  128.         public function keyup():void{
  129.             this.y = 0;
  130.             if(this._onKeyUp != null) this._onKeyUp(this._key);
  131.         }
  132.        
  133.         public function addKeyEventListener(type:String, listener:Function):void{
  134.             if(type == "keydown"){
  135.                 this._onKeyDown = listener;
  136.             }else if(type == "keyup"){
  137.                 this._onKeyUp = listener;
  138.             }
  139.         }
  140.     }
  141. }

キーを並べるTenkey3Dクラス

>>text
ACTIONSCRIPT:
  1. package {
  2.     import five3D.display.Sprite3D;
  3.    
  4.     import flash.events.Event;
  5.     import flash.events.KeyboardEvent;
  6.     import flash.ui.Keyboard;
  7.  
  8.     public class Tenkey3D extends Sprite3D
  9.     {
  10.         private var keylist:Array;
  11.         private var numlock_key:SquareKey;
  12.        
  13.         private var _onTenkeyDown:Function;
  14.         private var _onTenkeyUp:Function;
  15.        
  16.         public function Tenkey3D()
  17.         {
  18.             keylist = new Array();
  19.            
  20.             var key_width:Number = 100 + 2 * 60*Math.tan(10 * Math.PI / 180);
  21.            
  22.             var key_base:Sprite3D = new Sprite3D;
  23.             key_base.z = 120;
  24.             this.addChild(key_base);
  25.            
  26.             numlock_key = new SquareKey("Num\nLock",100,100);
  27.             key_base.addChild(numlock_key);
  28.             numlock_key.z = key_width*4;
  29.            
  30.             var key_div:SquareKey = new SquareKey("/",100,100);
  31.             key_base.addChild(key_div);
  32.             key_div.z = key_width*4;
  33.             key_div.x = key_width;
  34.             keylist.push(key_div);
  35.            
  36.             var key_mul:SquareKey = new SquareKey("*",100,100);
  37.             key_base.addChild(key_mul);
  38.             key_mul.z = key_width*4;
  39.             key_mul.x = key_width*2;
  40.             keylist.push(key_mul);
  41.            
  42.             var key_sub:SquareKey = new SquareKey("-",100,100);
  43.             key_base.addChild(key_sub);
  44.             key_sub.z = key_width*4;
  45.             key_sub.x = key_width*3;
  46.             keylist.push(key_sub);
  47.            
  48.             var key_7:SquareKey = new SquareKey("7",100,100);
  49.             key_base.addChild(key_7);
  50.             key_7.z = key_width*3;
  51.             var key_8:SquareKey = new SquareKey("8",100,100);
  52.             key_base.addChild(key_8);
  53.             key_8.z = key_width*3;
  54.             key_8.x = key_width;
  55.             var key_9:SquareKey = new SquareKey("9",100,100);
  56.             key_base.addChild(key_9);
  57.             key_9.z = key_width*3;
  58.             key_9.x = key_width*2;
  59.             keylist.push(key_7);
  60.             keylist.push(key_8);
  61.             keylist.push(key_9);
  62.            
  63.             var key_4:SquareKey = new SquareKey("4",100,100);
  64.             key_base.addChild(key_4);
  65.             key_4.z = key_width*2;
  66.             var key_5:SquareKey = new SquareKey("5",100,100);
  67.             key_base.addChild(key_5);
  68.             key_5.z = key_width*2;
  69.             key_5.x = key_width;
  70.             var key_6:SquareKey = new SquareKey("6",100,100);
  71.             key_base.addChild(key_6);
  72.             key_6.z = key_width*2;
  73.             key_6.x = key_width*2;
  74.             keylist.push(key_4);
  75.             keylist.push(key_5);
  76.             keylist.push(key_6);
  77.            
  78.             var key_add:SquareKey = new SquareKey("+", 100, 220);
  79.             key_base.addChild(key_add);
  80.             key_add.z = key_width*2;
  81.             key_add.x = key_width*3;
  82.             keylist.push(key_add);
  83.            
  84.             var key_1:SquareKey = new SquareKey("1",100,100);
  85.             key_base.addChild(key_1);
  86.             key_1.z = key_width;
  87.             var key_2:SquareKey = new SquareKey("2",100,100);
  88.             key_base.addChild(key_2);
  89.             key_2.z = key_width;
  90.             key_2.x = key_width;
  91.             var key_3:SquareKey = new SquareKey("3",100,100);
  92.             key_base.addChild(key_3);
  93.             key_3.z = key_width;
  94.             key_3.x = key_width*2;
  95.            
  96.             keylist.push(key_1);
  97.             keylist.push(key_2);
  98.             keylist.push(key_3);
  99.            
  100.             var key_0:SquareKey = new SquareKey("0",220,100);
  101.             key_base.addChild(key_0);
  102.             keylist.push(key_0);
  103.            
  104.             var key_dot:SquareKey = new SquareKey(".",100,100);
  105.             key_base.addChild(key_dot);
  106.             key_dot.x = key_width*2;
  107.             keylist.push(key_dot);
  108.            
  109.             var key_enter:SquareKey = new SquareKey("Enter",100,220);
  110.             key_base.addChild(key_enter);
  111.             key_enter.x = key_width*3;
  112.             keylist.push(key_enter);
  113.            
  114.            
  115.             this.addEventListener(KeyboardEvent.KEY_DOWN, keydownHandler);
  116.             this.addEventListener(KeyboardEvent.KEY_UP, keyupHandler);
  117.             this.addEventListener(Event.ENTER_FRAME, enterHandler);
  118.            
  119.             for(var i:Number = 0; i <keylist.length; i++){
  120.                 var skey:SquareKey = keylist[i];
  121.                 skey.addKeyEventListener("keydown", tenkeyDownHandler);
  122.             }
  123.            
  124.         }
  125.        
  126.         private function tenkeyDownHandler(key:String):void{
  127.             if(this._onTenkeyDown != null) this._onTenkeyDown(key);
  128.         }
  129.        
  130.         private  function keyConvert(keyCode:Number):String{
  131.             var key_str:String = null;
  132.             if(keyCode == 48 || keyCode == Keyboard.NUMPAD_0){
  133.                 key_str = "0";
  134.             }else if(keyCode == 190 || keyCode == Keyboard.NUMPAD_DECIMAL){
  135.                 key_str = ".";
  136.             }else if(keyCode == 49 || keyCode == Keyboard.NUMPAD_1){
  137.                 key_str = "1";
  138.             }else if(keyCode == 50 || keyCode == Keyboard.NUMPAD_2){
  139.                 key_str = "2";
  140.             }else if(keyCode == 51 || keyCode == Keyboard.NUMPAD_3){
  141.                 key_str = "3";
  142.             }else if(keyCode == 52 || keyCode == Keyboard.NUMPAD_4){
  143.                 key_str = "4";
  144.             }else if(keyCode == 53 || keyCode == Keyboard.NUMPAD_5){
  145.                 key_str = "5";
  146.             }else if(keyCode == 54 || keyCode == Keyboard.NUMPAD_6){
  147.                 key_str = "6";
  148.             }else if(keyCode == 55 || keyCode == Keyboard.NUMPAD_7){
  149.                 key_str = "7";
  150.             }else if(keyCode == 56 || keyCode == Keyboard.NUMPAD_8){
  151.                 key_str = "8";
  152.             }else if(keyCode == 57 || keyCode == Keyboard.NUMPAD_9){
  153.                 key_str = "9";
  154.             }else if(keyCode == 191 || keyCode == Keyboard.NUMPAD_DIVIDE){
  155.                 key_str = "/";
  156.             }else if(keyCode == 186 || keyCode == Keyboard.NUMPAD_MULTIPLY){
  157.                 key_str = "*";
  158.             }else if(keyCode == 189 || keyCode == Keyboard.NUMPAD_SUBTRACT){
  159.                 key_str = "-";
  160.             }else if(keyCode == 187 || keyCode == Keyboard.NUMPAD_ADD){
  161.                 key_str = "+";
  162.             }else if(keyCode == Keyboard.ENTER || keyCode == Keyboard.NUMPAD_ENTER){
  163.                 key_str = "Enter";
  164.             }else if(keyCode == Keyboard.BACKSPACE || keyCode == Keyboard.DELETE ||
  165.                      keyCode == Keyboard.ESCAPE || keyCode == Keyboard.numLock ){
  166.                 key_str = "clear";
  167.             }
  168.             return key_str;
  169.         }
  170.        
  171.         private function keydownHandler(event:KeyboardEvent):void{
  172.             var key_str:String = this.keyConvert(event.keyCode);
  173.            
  174.             if(key_str){
  175.                 for(var i:Number=0; i<this.keylist.length;i++){
  176.                     if(keylist[i].key == key_str){
  177.                         keylist[i].keydown();
  178.                     }
  179.                 }
  180.             }
  181.         }
  182.        
  183.         public function pressKey(key_str:String):void{
  184.             for(var i:Number=0; i<this.keylist.length;i++){
  185.                 if(keylist[i].key == key_str){
  186.                     keylist[i].keydown();
  187.                     keylist[i].keyup();
  188.                 }
  189.             }
  190.         }
  191.        
  192.         private function keyupHandler(event:KeyboardEvent):void{
  193.             var key_str:String = this.keyConvert(event.keyCode);
  194.            
  195.             if(key_str){
  196.                 for(var i:Number=0; i<this.keylist.length;i++){
  197.                     if(keylist[i].key == key_str){
  198.                         keylist[i].keyup();
  199.                     }
  200.                 }
  201.             }
  202.         }
  203.        
  204.         private function enterHandler(event:Event):void{
  205.             if(Keyboard.numLock) numlock_key.keydown();
  206.             else numlock_key.keyup();
  207.         }
  208.        
  209.         public function addTenkeyEventListener(type:String, listener:Function):void{
  210.             if(type == "tenkeyDown"){
  211.                 this._onTenkeyDown = listener;
  212.             }else if(type == "tenkeyUp"){
  213.                 this._onTenkeyUp = listener;
  214.             }
  215.         }
  216.     }
  217. }

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://parpue.net/web/355/trackback
Listed below are links to weblogs that reference
FIVe3Dで３Dテンキー from parpue.net

Home > Flash | WEB | デザイン > FIVe3Dで３Dテンキー

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