parpue.net » Flash http://parpue.net Flash, Flex, デザイン等自分の好きなことを好きなようにやってます Wed, 12 Aug 2009 17:46:04 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 PaperVision3Dでタグクラウド http://parpue.net/web/667 http://parpue.net/web/667#comments Thu, 30 Apr 2009 19:12:32 +0000 okm http://parpue.net/?p=667 e38394e382afe38381e383a3-4

最近、３Dのタグクラウドよくみるので、
何となく作ってみた・・・けど、これ目立つけど見づらいような。。。

↓


あの雲まで飛べる！

XMLでタグ情報を読み込んで、
タグの内容から、Text3Dオブジェクトを生成して、
PaperVision3Dのシーンに参加させています。

あとはTweenerでくるくると。

読み込んでいるタグクラウド用のXMLは こちら

コード

>>text
ACTIONSCRIPT:
  1. package {
  2.     import caurina.transitions.Tweener;
  3.    
  4.     import flash.display.*;
  5.     import flash.events.*;
  6.     import flash.net.URLLoader;
  7.     import flash.net.URLRequest;
  8.     import flash.text.TextField;
  9.    
  10.     import org.papervision3d.cameras.*;
  11.     import org.papervision3d.materials.*;
  12.     import org.papervision3d.materials.special.Letter3DMaterial;
  13.     import org.papervision3d.objects.*;
  14.     import org.papervision3d.render.BasicRenderEngine;
  15.     import org.papervision3d.scenes.*;
  16.     import org.papervision3d.typography.fonts.HelveticaBold;
  17.     import org.papervision3d.view.Viewport3D;
  18.     [SWF(backgroundColor=0x000000)]
  19.    
  20.     public class Pv3DCloud extends Sprite
  21.     {
  22.         private var scene     : Scene3D;
  23.         private var camera    : Camera3D;
  24.         private var rootNode  : DisplayObject3D;
  25.  
  26.        private var viewport:Viewport3D;
  27.        private var renderer:BasicRenderEngine;
  28.        
  29.         private var loader:URLLoader;
  30.         private var text:TextField;
  31.        
  32.         private var tags:Array;
  33.         private var bases:Array;
  34.        
  35.         private var cameraPosition:Number = 3300;
  36.         private var radius:Number = 1000;
  37.        
  38.         public function Pv3DCloud()
  39.         {
  40.             stage.frameRate = 60;
  41.             stage.quality   = "MEDIUM";
  42.             stage.scaleMode = "noScale";
  43.             stage.align = StageAlign.TOP_LEFT;
  44.  
  45.             var url:URLRequest = null;
  46.            
  47.             var flashvars:Object = LoaderInfo(this.root.loaderInfo).parameters;
  48.             var xmlpath:String = (flashvars["xmlpath"]) ?  String(flashvars["xmlpath"]) : "test.xml" ;
  49.             url = new URLRequest(xmlpath);
  50.            
  51.             loader = new URLLoader();
  52.             loader.addEventListener(Event.COMPLETE, onLoadHandler);
  53.             loader.addEventListener(IOErrorEvent.IO_ERROR, onIOErrorHandler);
  54.             loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityErrorHandler);
  55.             loader.load(url);   
  56.         }
  57.        
  58.         private function onSecurityErrorHandler(event:Event):void{
  59.             trace("sec error");
  60.         }
  61.        
  62.         private function onLoadHandler(event:Event):void{
  63.             trace("onload");
  64.             try{
  65.                 var xmlData:XML = new XML(this.loader.data);
  66.                 tags = new Array;
  67.                 bases = new Array;
  68.  
  69.                 viewport = new Viewport3D(stage.stageWidth , stage.stageHeight);
  70.                 addChild(viewport);//viewportを表示ツリーに追加
  71.                 renderer = new BasicRenderEngine();
  72.        
  73.                 scene = new Scene3D();
  74.                 camera = new Camera3D();
  75.  
  76.                 //rootNode生成
  77.                 rootNode = new DisplayObject3D();
  78.                 scene.addChild( rootNode );
  79.                
  80.                 var letterMaterial:Letter3DMaterial = new Letter3DMaterial;
  81.                 letterMaterial.fillColor = 0xFFFFFF;
  82.                 letterMaterial.oneSide = false;
  83.                 letterMaterial.interactive = true;
  84.                
  85.                 var i:Number = 0;
  86.                 var tagXml:XMLList = xmlData.tags.tag;
  87.                 var oneDegree:Number = 360 / tagXml.length();
  88.                 for each(var tag in xmlData.tags.tag){
  89.                     var tag3D:Tag3D = new Tag3D(String(tag) , new HelveticaBold() , letterMaterial);
  90.                     tag3D.degree = oneDegree * i;
  91.                     //tag3D.scale = 1 + Number(tag.@level) * 3 /10;
  92.                     if(tag.@level == "1") tag3D.scale = 3;
  93.                     else if(tag.@level == "2") tag3D.scale = 1.75;
  94.                     tag3D.rotateSpeed = Math.floor(Math.random()*5)+1;
  95.                     tag3D.y = Math.floor(Math.random()*(radius*2))-radius;
  96.                     tag3D.z = radius*Math.sin(tag3D.degree * Math.PI / 180);
  97.                     tag3D.x = radius*Math.cos(tag3D.degree * Math.PI / 180);
  98.                     Tweener.addTween(tag3D, {time:tag3D.rotateSpeed, rotationX:360, onComplete:onTweenHandler, onCompleteParams:[i]});
  99.                     rootNode.addChild(tag3D);
  100.                     tags.push(tag3D);
  101.                     i++;
  102.                 }
  103.                 stage.addEventListener(Event.ENTER_FRAME, loop);
  104.                 camera.z = -this.cameraPosition;
  105.  
  106.             }catch(err:Error){
  107.                 trace("error" + err.toString());
  108.                 return;
  109.             }
  110.         }
  111.        
  112.         private function onIOErrorHandler(event:Event):void{
  113.             trace("io error");
  114.         }
  115.        
  116.         private function onTweenHandler(i):void{
  117.             var tag3D:Tag3D = tags[i];
  118.             tag3D.rotationX = 0;
  119.             tag3D.rotationY = 0;
  120.             var XorY = (Math.floor(Math.random()*2));
  121.             if(XorY) Tweener.addTween(tag3D, {time:tag3D.rotateSpeed, rotationX:360, onComplete:onTweenHandler, onCompleteParams:[i]});
  122.             else Tweener.addTween(tag3D, {time:tag3D.rotateSpeed, rotationY:360, onComplete:onTweenHandler, onCompleteParams:[i]});
  123.         }
  124.        
  125.         private function loop( event:Event ):void
  126.         {
  127.             for each(var tag3D:Tag3D in tags){
  128.                 tag3D.degree += 3;
  129.                 tag3D.z = radius*Math.sin(tag3D.degree * Math.PI / 180);
  130.                 tag3D.x = radius*Math.cos(tag3D.degree * Math.PI / 180);
  131.             }
  132.             renderer.renderScene(scene, camera, viewport);
  133.         }
  134.     }
  135. }
]]> http://parpue.net/web/667/feed 0 Flash,Degrafaで簡単に波を表現 (2) http://parpue.net/web/645 http://parpue.net/web/645#comments Tue, 14 Apr 2009 18:03:58 +0000 okm http://parpue.net/?p=645 Degrafaのベジェ曲線描画に、さらに塗りを指定して、
もうちょっと見栄えのいい波にしてみました。

今回も、重ねた波の分だけ増えただけで、
コードはMXMLを除いて、１３行といっても、
MXMLでLineToとかしちゃってるわけなので、ちょっとだけ複雑…。

塗り（ fill ）、線（strokes）をまず定義して、
今度は３次ベジェ曲線オブジェクトのCubicBezierではなく、
波を描くためのパス Path を用意します。

Pathに、CubicBezierTo,LineToでラインの情報を指示して、
塗りの指定をして、波を描画します。

↓波一つ分のパス

>>text
XML:
  1. <Path id="bezier4" x="{bigWaveWidth/2}" y="{height/2-10}" fill="{bigWaveFill}">
  2.     <segments>
  3.          <MoveTo x="0" y="0" />
  4.          <CubicBezierTo x="{bigWaveWidth}" y="0" cx="{bigWaveWidth/2}" cy="{-waveHeight}" cx1="{bigWaveWidth/2}" cy1="{waveHeight}" />
  5.          <LineTo x="{bigWaveWidth}" y="{height}"/>
  6.          <LineTo x="{0}" y="{height}"/>
  7.          <LineTo x="{0}" y="{0}"/>
  8.      </segments>
  9. </Path>

これを重ねて、前回の記事と同じようにEnterFrameイベントで動かします。
MXMLでお絵かきしてるようでおもしろいですね。

SVGインポートして描画したりもできるんで、
イラレとかで作ってやったほうがはやいかもしれないですね(^-^;;

今度は、Degrafaでコンポーネントスキンとかにも挑戦してみようかすら。

以下コードです。

>>text
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns="http://www.degrafa.com/2007" width="400" height="220" backgroundColor="#FFFFFF" enterFrame="onEnterHandler(event)">
  3.   <mx:Script>
  4.     <![CDATA[
  5.       [Bindable]private var waveHeight:Number = 30;
  6.       [Bindable]private var waveWidth:Number = 410;
  7.       [Bindable]private var bigWaveWidth:Number = 600;
  8.       private function onEnterHandler(event:Event):void{
  9.         if(this.bezier1.x <-this.waveWidth) this.bezier1.x = this.bezier2.x + waveWidth;
  10.         if(this.bezier2.x <-this.waveWidth) this.bezier2.x = this.bezier1.x + waveWidth;
  11.         this.bezier1.x -= 10;
  12.         this.bezier2.x -= 10;
  13.         if(this.bezier3.x <-this.bigWaveWidth) this.bezier3.x = this.bezier4.x + bigWaveWidth;
  14.         if(this.bezier4.x <-this.bigWaveWidth) this.bezier4.x = this.bezier3.x + bigWaveWidth;
  15.         this.bezier3.x -= 5;
  16.         this.bezier4.x -= 5;
  17.       }
  18.     ]]>
  19.   </mx:Script>
  20.  
  21.   <Surface>
  22.     <!-- 塗りの指定 -->
  23.     <fills>
  24.       <LinearGradientFill id="MainFill" angle="90">
  25.         <GradientStop ratio="0" alpha="0.7" color="#FFFFFF"/>
  26.         <GradientStop ratio="1" alpha="0.7" color="#FFDDDD"/>
  27.       </LinearGradientFill>
  28.      
  29.       <LinearGradientFill id="smallWaveFill1" angle="0">
  30.         <GradientStop ratio="0" alpha="0.5" color="#FF6666"/>
  31.         <GradientStop ratio="1" alpha="0.5" color="#FFCC00"/>
  32.       </LinearGradientFill>
  33.       <LinearGradientFill id="smallWaveFill2" angle="0">
  34.         <GradientStop ratio="0" alpha="0.5" color="#FFCC00"/>
  35.         <GradientStop ratio="1" alpha="0.5" color="#FF6666"/>
  36.       </LinearGradientFill>
  37.      
  38.       <SolidFill id="bigWaveFill" color="#CCCC00" alpha="0.5"/>     
  39.     </fills>
  40.  
  41.     <!-- 線の指定 -->
  42.     <strokes>
  43.       <SolidStroke color="#666688" alpha="0.3" weight="1" id="BasicStroke"/>
  44.     </strokes>
  45.  
  46.     <!--表示するオブジェクト-->   
  47.     <GeometryGroup>
  48.       <RegularRectangle id="rect" width="{width-2}" height="{height-2}" x="0" y="0" fill="{MainFill}" stroke="{BasicStroke}">
  49.         <GeometryComposition id="beziers">
  50.           <Path id="bezier3" x="{-bigWaveWidth/2}" y="{height/2-10}" fill="{bigWaveFill}">
  51.             <segments>
  52.                <MoveTo x="0" y="0" />
  53.                <CubicBezierTo x="{bigWaveWidth}" y="0" cx="{bigWaveWidth/2}" cy="{-waveHeight}" cx1="{bigWaveWidth/2}" cy1="{waveHeight}" />
  54.                <LineTo x="{bigWaveWidth}" y="{height}"/>
  55.                <LineTo x="{0}" y="{height}"/>
  56.                <LineTo x="{0}" y="{0}"/>
  57.             </segments>
  58.           </Path>
  59.           <Path id="bezier4" x="{bigWaveWidth/2}" y="{height/2-10}" fill="{bigWaveFill}">
  60.             <segments>
  61.               <MoveTo x="0" y="0" />
  62.               <CubicBezierTo x="{bigWaveWidth}" y="0" cx="{bigWaveWidth/2}" cy="{-waveHeight}" cx1="{bigWaveWidth/2}" cy1="{waveHeight}" />
  63.               <LineTo x="{bigWaveWidth}" y="{height}"/>
  64.               <LineTo x="{0}" y="{height}"/>
  65.               <LineTo x="{0}" y="{0}"/>
  66.             </segments>
  67.           </Path>
  68.  
  69.           <Path id="bezier1" x="{-waveWidth/2}" y="{height/2}" fill="{smallWaveFill1}">
  70.             <segments>
  71.                <MoveTo x="0" y="0" />
  72.                <CubicBezierTo x="{waveWidth}" y="0" cx="{waveWidth/2}" cy="{-waveHeight}" cx1="{waveWidth/2}" cy1="{waveHeight}" />
  73.                <LineTo x="{waveWidth}" y="{height}"/>
  74.                <LineTo x="{0}" y="{height}"/>
  75.                <LineTo x="{0}" y="{0}"/>
  76.             </segments>
  77.           </Path>
  78.           <Path id="bezier2" x="{waveWidth/2}" y="{height/2}" fill="{smallWaveFill2}">
  79.             <segments>
  80.               <MoveTo x="0" y="0" />
  81.               <CubicBezierTo x="{waveWidth}" y="0" cx="{waveWidth/2}" cy="{-waveHeight}" cx1="{waveWidth/2}" cy1="{waveHeight}" />
  82.               <LineTo x="{waveWidth}" y="{height}"/>
  83.               <LineTo x="{0}" y="{height}"/>
  84.               <LineTo x="{0}" y="{0}"/>
  85.             </segments>
  86.           </Path>
  87.          
  88.         </GeometryComposition>     
  89.       </RegularRectangle>
  90.     </GeometryGroup>
  91.  </Surface>
  92. </mx:Application>
]]> http://parpue.net/web/645/feed 1 Flash,Degrafaで簡単に波を表現 (1) http://parpue.net/web/630 http://parpue.net/web/630#comments Tue, 14 Apr 2009 18:02:53 +0000 okm http://parpue.net/?p=630 flash_wave

FlashグラフィックコンポーネントのDegrafaで引き続き遊んでみた。
mxmlを除くスクリプト部分はわずか7行で、簡単な波が！

↓続き

前にかいたのと同じようなことを
Degrafaを使用してやってみました。

Degrafaには３次ベジェ曲線オブジェクトである、CubicBezierがあるので、
それをMXMLで配置して、色と塗りを指定していきます。
CubicBezierでベジェ曲線をひくには、
始点( x0, y0)、終点(x1, y1)、作用点を二つ(cx,cy),(cx1,cy1)を指定します。

EnterFrameイベントで、作成したベジェ曲線オブジェクトを移動していくと、ナミナミできました。

次の記事で、Degrafaで塗りのある波もやってみます。
　　→　Flash,Degrafaで簡単に波を表現 (2)
関連→　FlashグラフィックコンポーネントDegrafaを試す

コードは、すごいシンプルです。

>>text
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns="http://www.degrafa.com/2007" width="400" height="220" backgroundColor="#FFFFFF" enterFrame="onEnterHandler(event)">
  3.   <mx:Script>
  4.     <![CDATA[
  5.       [Bindable]private var waveHeight:Number = 50;
  6.       [Bindable]private var waveWidth:Number = 410; //> width
  7.       private function onEnterHandler(event:Event):void{
  8.         if(this.bezier1.x <-this.waveWidth) this.bezier1.x = this.bezier2.x + waveWidth;
  9.         if(this.bezier2.x <-this.waveWidth) this.bezier2.x = this.bezier1.x + waveWidth;
  10.         this.bezier1.x -= 10;
  11.         this.bezier2.x -= 10;
  12.       }
  13.     ]]>
  14.   </mx:Script>
  15.  
  16.   <Surface>
  17.     <!-- 塗りの指定 -->
  18.     <fills>
  19.       <LinearGradientFill id="MainFill" angle="90">
  20.         <GradientStop ratio="0" alpha="1" color="#FFFFFF"/>
  21.         <GradientStop ratio="1" alpha="1" color="#DDDDFF"/>
  22.       </LinearGradientFill>
  23.     </fills>
  24.  
  25.     <!-- 線の指定 -->
  26.     <strokes>
  27.       <SolidStroke color="#666688" alpha="1" weight="1" id="BasicStroke"/>
  28.     </strokes>
  29.  
  30.     <!--表示するオブジェクト-->   
  31.     <GeometryGroup>
  32.       <RegularRectangle id="rect" width="{width-2}" height="{height-2}" x="0" y="0" fill="{MainFill}" stroke="{BasicStroke}">   
  33.         <GeometryComposition id="beziers">
  34.           <CubicBezier id="bezier1" x="{-waveWidth/2}" y="{height/2}" x0="0" x1="{waveWidth}" y0="0" y1="0" cx="{waveWidth/2}" cy="{-waveHeight}" cx1="{waveWidth/2}" cy1="{waveHeight}" stroke="{BasicStroke}" />
  35.           <CubicBezier id="bezier2" x="{waveWidth/2}" y="{height/2}" x0="0" x1="{waveWidth}" y0="0" y1="0" cx="{waveWidth/2}" cy="{-waveHeight}" cx1="{waveWidth/2}" cy1="{waveHeight}" stroke="{BasicStroke}"/>
  36.         </GeometryComposition>     
  37.       </RegularRectangle>
  38.     </GeometryGroup>
  39.  </Surface>
  40. </mx:Application>
]]> http://parpue.net/web/630/feed 0 PaperVision3Dで３Dダンボー http://parpue.net/web/601 http://parpue.net/web/601#comments Sat, 11 Apr 2009 04:16:43 +0000 okm http://parpue.net/?p=601 danboo

これも誰かやってそうだけど、簡単そうな題材だったから・・・

例によってFlashPlayer１０以上で確認しています。

■ ダンボーDemo

■ Demo2 ぬるぬる動かしてみた

danbobobo
■Demo3 カメラもマウスに追従、重いかも

PaperVision3D、手軽でおもしろいなー







danbo_measure
きっちりと計測しました！

]]> http://parpue.net/web/601/feed 0 PaperVision3Dで引き続き遊んでみる http://parpue.net/web/552 http://parpue.net/web/552#comments Tue, 07 Apr 2009 17:59:09 +0000 okm http://parpue.net/?p=552 謎のエコ生物。
pic4
*追記　FlashPlayer9だとなんかおかしい。

続き、重いかも
↓

習作でした。
おもしろかったけど・・いったい何をやっていたんだ・・・。寝よう。

　地球のテクスチャデータ
　→　http://www.oera.net/How2/TextureMaps2.htm

]]> http://parpue.net/web/552/feed 1 PaperVision3D Cubeに展開図を貼り付ける http://parpue.net/web/502 http://parpue.net/web/502#comments Tue, 07 Apr 2009 02:07:18 +0000 okm http://parpue.net/?p=502 適当に作り始めた展開図、、、意外と苦戦してしまった。

cube

tenkai

papervision3d思いだしがてら展開図作って貼り付けてみました。

せっかく３D効果なので、影効果もつけてみようかと思ったけどうまくいきませんでした。
どうやらCubeの各面に、別々のMaterialをつけると駄目なようです。

と思ったら、同じように悩んでる人を発見
　→APEIROPHOBIA:ShadedMaterialメモ

面に別々のマテリアルを割り当て↓

>>text
ACTIONSCRIPT:
  1. var mList:MaterialsList = new MaterialsList();     
  2.            
  3.     var texture_top:BitmapData = new BitmapData(300,300);
  4.     texture_top.draw(new top_img);
  5.     //var mat_top:ShadedMaterial = new ShadedMaterial( new BitmapMaterial(texture_top, true) , sdr);   
  6.     var mat_top:BitmapMaterial = new BitmapMaterial(texture_top, true);     
  7.     mat_top.oneSide = false;   
  8.            
  9.     var texture_bottom:BitmapData = new BitmapData(300,300);
  10.     texture_bottom.draw(new bottom_img);
  11.     //var mat_bottom:ShadedMaterial = new ShadedMaterial( new BitmapMaterial(texture_bottom, true) , sdr);
  12.     var mat_bottom:BitmapMaterial = new BitmapMaterial(texture_bottom, true);                       
  13.     mat_bottom.oneSide = false;
  14.    
  15.     var texture_left:BitmapData = new BitmapData(300,300);
  16.     texture_left.draw(new left_img);
  17.     //var mat_left:ShadedMaterial = new ShadedMaterial( new BitmapMaterial(texture_left, true) , sdr);         
  18.     var mat_left:BitmapMaterial = new BitmapMaterial(texture_left, true)
  19.     mat_left.oneSide = false;
  20.    
  21.     var texture_right:BitmapData = new BitmapData(300,300);
  22.     texture_right.draw(new right_img);
  23.     //var mat_right:ShadedMaterial = new ShadedMaterial( new BitmapMaterial(texture_right, true) , sdr);   
  24.     var mat_right:BitmapMaterial = new BitmapMaterial(texture_right, true);
  25.     mat_right.oneSide = false;
  26.    
  27.     var texture_back:BitmapData = new BitmapData(300,300);
  28.     texture_back.draw(new back_img);
  29.     //var mat_back:ShadedMaterial = new ShadedMaterial( new BitmapMaterial(texture_back, true) , sdr);
  30.     var mat_back:BitmapMaterial = new BitmapMaterial(texture_back, true);                       
  31.     mat_back.oneSide = false;
  32.    
  33.     var texture_front:BitmapData = new BitmapData(300,300);
  34.     texture_front.draw(new front_img);
  35.     //var mat_front:ShadedMaterial = new ShadedMaterial( new BitmapMaterial(texture_front, true) , sdr);   
  36.     var mat_front:BitmapMaterial = new BitmapMaterial(texture_front, true);     
  37.     mat_front.oneSide = false;

別々にShadedMaterialを指定すると動きが微妙になります。
うーん・・仕様なのか・・？

]]> http://parpue.net/web/502/feed 2 Flex AdvancedDataGrid 矢印キーでセル移動して編集 http://parpue.net/web/492 http://parpue.net/web/492#comments Thu, 02 Apr 2009 16:30:42 +0000 okm http://parpue.net/?p=492
セル選択後と矢印キーで移動


NumericStepeprで編集して移動
(デフォルトでは矢印キーで数字変えちゃうのでそっちは殺してます)

DataGrid内のセルを矢印キーで選択して編集、というのをやりたくて、
調べて下記リンクのサンプルを見つけたんだけど、Flex 3ではこのままでは使えませんでした。

　→　スプレッドシートのように単一セルを選択、編集できるデータグリッド

もうちょっと調べてみたところ、
DataGridColumn, AdvancedDataGridColumnのitemRenderer, itemEditorプロパティに、
自作のコンポーネントを割り当てればできそう。
→ http://livedocs.adobe.com/flex/3_jp/html/help.html?content=cellrenderer_4.html
→ http://www.necst.co.jp/product/ibiz/column/flex/chap17.html

というわけで、itemEditorにTextInputを継承した、TextInputRendererを割り当てて、
カーソルキーイベントを拾うようにして、移動可能とさせます。

GridTest.mxml

>>text
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="502" height="220">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             import mx.collections.ArrayCollection;
  6.                  
  7.             [Bindable]
  8.             private var dp_flat:ArrayCollection = new ArrayCollection([
  9.               {col_a:"test_1_1", col_b:"test_2_1", col_c:"test_3_1"},
  10.               {col_a:"test_1_2", col_b:"test_2_2", col_c:"test_3_2"},
  11.               {col_a:"test_1_3", col_b:"test_2_3", col_c:"test_3_3"},
  12.               {col_a:"test_1_4", col_b:"test_2_4", col_c:"test_3_4"},
  13.               {col_a:"test_1_5", col_b:"test_2_5", col_c:"test_3_5"}
  14.             ]);
  15.         ]]>
  16.     </mx:Script>
  17.     <mx :P anel x="10" y="10" width="480" height="204" layout="absolute" title="AdvancedDataGrid">
  18.         <mx:AdvancedDataGrid x="5" y="5" id="test_adg" designViewDataType="flat" width="449" height="152" dataProvider="{dp_flat}" editable="true">
  19.             <mx:columns>
  20.                 <mx:AdvancedDataGridColumn headerText="列 1" dataField="col_a" itemEditor="renderer.TextRenderer"/>
  21.                 <mx:AdvancedDataGridColumn headerText="列 2" dataField="col_b" itemEditor="renderer.TextRenderer"/>
  22.                 <mx:AdvancedDataGridColumn headerText="列 3" dataField="col_c" itemEditor="renderer.TextRenderer"/>
  23.             </mx:columns>
  24.         </mx:AdvancedDataGrid>
  25.     </mx :P anel>
  26. </mx:Application>

TextRenderer.mxml

>>text
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml" keyDown="onKeydownHandler(event)">
  3. <mx:Script>
  4.     <![CDATA[
  5.         import mx.controls.AdvancedDataGrid;
  6.         import mx.controls.dataGridClasses.DataGridListData;
  7.                
  8.         private function onKeydownHandler(event:KeyboardEvent):void{
  9.             // -> http://livedocs.adobe.com/flex/3_jp/html/help.html?content=cellrenderer_4.html
  10.             var list_data:DataGridListData = DataGridListData(listData);
  11.             var list_owner:AdvancedDataGrid = AdvancedDataGrid(list_data.owner);
  12.             var row_index:Number =  list_data.rowIndex;
  13.             var column_index:Number = list_data.columnIndex;
  14.             var changed:Boolean = false; 
  15.             if(event.keyCode == Keyboard.LEFT){
  16.                 if(column_index> 0 ) {
  17.                     changed = true;
  18.                      column_index = column_index - 1;
  19.                  }
  20.         }else if(event.keyCode == Keyboard.DOWN){
  21.                 if(row_index <list_owner.dataProvider.length - 1 ) {
  22.                     changed = true;
  23.                     row_index = row_index + 1;
  24.                 }
  25.         }else if(event.keyCode == Keyboard.RIGHT){
  26.                 if(column_index <list_owner.columnCount - 1 ) {
  27.                     changed = true;
  28.                     column_index = column_index + 1;
  29.                 }
  30.             }else if(event.keyCode == Keyboard.UP){
  31.                 if(row_index> 0 ) {
  32.                     changed = true;
  33.                     row_index = row_index - 1;
  34.                 }
  35.             }
  36.             if(changed)list_owner.editedItemPosition = {rowIndex:row_index, columnIndex:column_index};
  37.         }   
  38.     ]]>
  39. </mx:Script>
  40. </mx:TextInput>
]]> http://parpue.net/web/492/feed 0 FlashグラフィックコンポーネントDegrafaを試す http://parpue.net/web/432 http://parpue.net/web/432#comments Wed, 25 Mar 2009 14:54:56 +0000 admin http://parpue.net/?p=432 MoonGiftで紹介されていたDegrafaを試してみた。

■参考リンク
→Flash向けのグラフィックスフレームワーク「Degrafa」
→http://www.degrafa.org/


公式のサンプルたちがおもしろい
これでFlex標準コンポーネントのスキンも作成できるようです。
Flexコンポーネント使いつつも我流Flex画面とかもできます。

ついでに見つけた反射効果のライブラリも使いました
→Live “reflection” component

■作ってみたデモ

反射とかやったせいでちょっと重い・・・。オブジェクトの描画は全部ＭＸＭＬだけで行ってます。

公式のサンプルをいくつか落として、ドキュメントも適当に読んで、
ちょっと理解した程度ですが、
MXMLで、線や、円などの描画オブジェクトを配置していき、
塗りや、線の太さなどもMXMLで定義できるようなものだと思います。

>>text
XML:
  1. <mx:Canvas id="main_canvas" x="5" y="5" width="400" height="258" verticalScrollPolicy="off" horizontalScrollPolicy="off">
  2.        
  3.     <degrafa:Surface>
  4.         <degrafa:fills>

UIComponentを継承しているSurfaceを用意して、
その上に塗りの定義のfills,線(ストローク)の定義であるstrokes,
描画オブジェクトGeometryGroupを定義していくことで、描画していく。

>>text
XML:
  1. <degrafa:fills>
  2.             <degrafa:LinearGradientFill id="MainFill" angle="90">
  3.                 <degrafa:GradientStop ratio="0" alpha="1" color="#FFFFFF"/>
  4.                 <degrafa:GradientStop ratio="1" alpha="1" color="#DDDDDD"/>
  5.         </degrafa:LinearGradientFill>

グラデーション塗りの定義をしてから、

>>text
XML:
  1. <degrafa:GeometryGroup>
  2.             <degrafa:RoundedRectangle id="aa" width="300" height="248" x="40" y="10" cornerRadius="15" fill="{MainFill}" stroke="{BasicStroke}">

描画オブジェクトに塗りの設定を適用していく。

おもしろいけど、、、結構めんどくさい。

でもこれで、MXMLコンポーネントを手軽に作るにはいいかもしれない、です。

以下全部

>>text
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:degrafa="http://www.degrafa.com/2007"
  3.     xmlns:refrector="com.rictus.reflector.*" width="410" height="400" color="#000000" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#010101, #010101]" verticalScrollPolicy="off" horizontalScrollPolicy="off" xmlns:geometry="com.degrafa.geometry.*" creationComplete="startHandler(event);">
  4.        
  5.     <mx:Canvas id="main_canvas" x="5" y="5" width="400" height="258" verticalScrollPolicy="off" horizontalScrollPolicy="off">
  6.        
  7.     <degrafa:Surface>
  8.         <degrafa:fills>
  9.             <degrafa:LinearGradientFill id="MainFill" angle="90">
  10.                 <degrafa:GradientStop ratio="0" alpha="1" color="#FFFFFF"/>
  11.                 <degrafa:GradientStop ratio="1" alpha="1" color="#DDDDDD"/>
  12.             </degrafa:LinearGradientFill>
  13.            
  14.             <degrafa:LinearGradientFill id="TextFill" angle="90">
  15.                 <degrafa:GradientStop ratio="0" alpha="1" color="#AAAAAA"/>
  16.                 <degrafa:GradientStop ratio="1" alpha="1" color="#444444"/>
  17.             </degrafa:LinearGradientFill>
  18.            
  19.             <degrafa:SolidFill id="CircleFill1" color="#000044"/>
  20.             <degrafa:SolidFill id="CircleFill2" color="#FFFFFF"/>
  21.             <degrafa:SolidFill id="CircleFill3" color="#333333"/>
  22.         </degrafa:fills>
  23.         <degrafa:strokes>
  24.             <degrafa:SolidStroke color="#000000" alpha="1" weight="1" id="BasicStroke"/>
  25.  
  26.             <degrafa:SolidStroke color="#222222" alpha="1" weight="3" id="CircleStroke1"/>
  27.  
  28.             <degrafa:LinearGradientStroke weight="4" id="insetEdge" pixelHinting="true">
  29.                 <degrafa:GradientStop ratio="0" alpha=".3" color="#366079"/>
  30.                 <degrafa:GradientStop ratio=".5" alpha="0" color="#366079"/>
  31.                 <degrafa:GradientStop ratio="1" alpha=".3" color="#366079"/>
  32.             </degrafa:LinearGradientStroke>
  33.  
  34.  
  35.      </degrafa:strokes>
  36.         <degrafa:GeometryGroup>
  37.             <degrafa:RoundedRectangle id="aa" width="300" height="248" x="40" y="10" cornerRadius="15" fill="{MainFill}" stroke="{BasicStroke}">
  38.                 <degrafa:RasterText fill="{TextFill}" x="55" y="210 " fontSize="34" text="Hello!!Degrafa!" bold="true" autoSize="left"/>
  39.                
  40.                 <degrafa:GeometryComposition x="100" y="150" id="circle">
  41.                     <degrafa:Circle radius="30" fill="{CircleFill1}" stroke="{CircleStroke1}" x="10" y="10">
  42.               <degrafa:Circle  radius="25" fill="{CircleFill2}" stroke="{CircleStroke1}" x="5" y="5">
  43.                <degrafa:Circle  radius="15" fill="{CircleFill3}" stroke="{CircleStroke1}" x="10" y="10">
  44.               </degrafa:Circle>
  45.               </degrafa:Circle>
  46.                  <degrafa:filters>
  47.              <mx:GlowFilter alpha="0.5" color="0x777777" blurX="10" blurY="10" strength="3" inner="false" />
  48.                  </degrafa:filters>
  49.  
  50.                  </degrafa:Circle>
  51.             </degrafa:GeometryComposition>     
  52.        
  53.             </degrafa:RoundedRectangle>
  54.         </degrafa:GeometryGroup>
  55.     </degrafa:Surface>
  56.     </mx:Canvas>
  57.    
  58.   <refrector:Reflector target="{main_canvas}" alpha=".3" falloff="{(this.circle.y+100)}" id="reflector"/>
  59.  
  60.   <mx:Script>
  61.     <![CDATA[
  62.       private var add_y:Number = 3;
  63.       private var add_x:Number = 3;
  64.      
  65.       function startHandler(event:Event):void{
  66.         this.addEventListener(Event.ENTER_FRAME, this.onEnterHandler);
  67.       }
  68.      
  69.       function onEnterHandler(event:Event):void{
  70.           if(circle.x <-3) this.add_x = -add_x;
  71.             else if(circle.x> 225) this.add_x = -add_x;
  72.             if(circle.y <0) this.add_y = -add_y;
  73.             else if(circle.y> 177) this.add_y = -add_y;
  74.             circle.x += add_x;
  75.             circle.y += add_y;
  76.       }
  77.      
  78.     ]]>
  79.   </mx:Script>
  80. </mx:Application>
]]> http://parpue.net/web/432/feed 0 円をただ囲まれた壁の中で動かす http://parpue.net/web/424 http://parpue.net/web/424#comments Thu, 19 Feb 2009 03:09:04 +0000 admin http://parpue.net/?p=424 １／２４のライブ以降、仕事がほんと忙しく・・・
何もできていません。

次回ライブは３／２０です。
ライブ興味のある方はこちらもどうぞ。
(http://chocolataste-planner.jp)

さて、最近、これからFlashを覚える仕事仲間ができまして、
ちょくちょく小物作り、習作で勉強してもらってます。

壁の中を円が動くのってどうやってつくります？といわれて、
作ったのがこれ。せっかくだからblogに乗せました。

↓　とりあえず楽するコードです。

>>text
ACTIONSCRIPT:
  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.events.Event;
  4.  
  5.     public class RefrectionCircle extends Sprite
  6.     {
  7.         private var areaRect_up:Sprite;
  8.         private var areaRect_left:Sprite;
  9.         private var areaRect_right:Sprite;
  10.         private var areaRect_bottom:Sprite;
  11.        
  12.         private var add_x = 10;
  13.         private var add_y = 15;
  14.        
  15.         public function RefrectionCircle()
  16.         {
  17.             stage.scaleMode = "noScale";
  18.             stage.align = "TL";
  19.            
  20.             var areaRect_bg:Sprite = new Sprite;
  21.             areaRect_bg.graphics.beginFill(0xFFFFFF);
  22.             areaRect_bg.graphics.drawRect(0,0,400,400);
  23.             this.addChild(areaRect_bg);
  24.            
  25.             areaRect_up = new Sprite;
  26.             areaRect_up.graphics.lineStyle(2, 0x000000);
  27.             areaRect_up.graphics.lineTo(400,0);
  28.             this.addChild(areaRect_up);
  29.             areaRect_left = new Sprite;
  30.             areaRect_left.graphics.lineStyle(2,0x000000);
  31.             areaRect_left.graphics.lineTo(0,400);
  32.             this.addChild(areaRect_left);
  33.             areaRect_right = new Sprite;
  34.             areaRect_right.graphics.lineStyle(2,0x000000);
  35.             areaRect_right.graphics.moveTo(400,0);
  36.             areaRect_right.graphics.lineTo(400,400);
  37.             this.addChild(areaRect_right);
  38.             areaRect_bottom = new Sprite;
  39.             areaRect_bottom.graphics.lineStyle(2,0x000000);
  40.             areaRect_bottom.graphics.moveTo(0,400);
  41.             areaRect_bottom.graphics.lineTo(400,400);
  42.             this.addChild(areaRect_bottom);
  43.            
  44.             var circle:Sprite = new Sprite;
  45.             circle.graphics.beginFill(0xFFCCCC);
  46.             circle.graphics.lineStyle(2, 0xFF6666);
  47.             circle.graphics.drawCircle(90,90,50);
  48.             this.addChild(circle);
  49.             circle.addEventListener(Event.ENTER_FRAME, this.onEnterHandler);
  50.         }
  51.        
  52.         private function onEnterHandler(event:Event):void{
  53.             if(event.target.hitTestObject(areaRect_up)) this.add_y = -add_y;
  54.             else if(event.target.hitTestObject(areaRect_left)) this.add_x = -add_x;
  55.             else if(event.target.hitTestObject(areaRect_right)) this.add_x = -add_x;
  56.             else if(event.target.hitTestObject(areaRect_bottom)) this.add_y = -add_y;
  57.             event.target.x += add_x;
  58.             event.target.y += add_y;
  59.         }
  60.     }
  61. }

今後はHitTestとか使おうと思ったけどめんどいからやめました…。

]]> http://parpue.net/web/424/feed 0 Flashで色を次々に、スムーズに変える http://parpue.net/web/380 http://parpue.net/web/380#comments Mon, 17 Nov 2008 03:59:53 +0000 okm http://parpue.net/?p=380

このようなFlash、よく見るので調べて作ってみた。

参考）
ムービークリップの色を変化させる
http://www.project-nya.jp/modules/weblog/details.php?blog_id=468

このソースを頂戴し、さらにTweenerを使って色から色へ自動的に段階的に変えています。

↓ ソースコード

>>text
ACTIONSCRIPT:
  1. package {
  2.     import caurina.transitions.Tweener;
  3.    
  4.     import flash.display.Sprite;
  5.     import flash.geom.ColorTransform;
  6.     import flash.utils.*;
  7.  
  8.     public class ColorTest extends Sprite
  9.     {
  10.         private var circle:Sprite;
  11.         private var colorListIndex:Number = 0;
  12.         // 色のリスト
  13.         private var colorList:Array = [0xFF9999, 0x99FF99, 0x9999FF, 0xFFFF99, 0x99FFFF ];
  14.        
  15.         private var gradeMax:Number = 100;
  16.         private var baseColor:Number = 0xFF0000;
  17.         private var targetColor:Number = 0x0000FF;
  18.        
  19.         public var grade:Number = 0;
  20.  
  21.         public function ColorTest()
  22.         {
  23.             stage.scaleMode = "noScale";
  24.             stage.align = "TL";
  25.            
  26.             circle = new Sprite;
  27.             circle.graphics.beginFill(colorList[colorListIndex]);
  28.             circle.graphics.drawCircle(100,100,95);
  29.             circle.graphics.endFill();
  30.            
  31.             this.addChild(circle);
  32.             changeColor();
  33.         }
  34.        
  35.         private function changeColor():void{
  36.             grade = 0;
  37.            
  38.             // 今の色
  39.             baseColor = this.colorList[colorListIndex];
  40.            
  41.             colorListIndex++;
  42.             if(colorListIndex>= colorList.length) colorListIndex = 0;
  43.            
  44.             // 次の色
  45.             targetColor = this.colorList[colorListIndex];
  46.             Tweener.addTween(this, {grade:100, time:2, onUpdate:this.updateColor, onComplete:this.changeColor});
  47.         }
  48.        
  49.         private function updateColor():void{
  50.             var baseObj:Object = this.colorToRGB(baseColor);
  51.             var targetObj:Object = this.colorToRGB(targetColor);
  52.             var r:Number = baseObj.r + Math.round((targetObj.r - baseObj.r)/gradeMax*grade);
  53.             var g:Number = baseObj.g + Math.round((targetObj.g - baseObj.g)/gradeMax*grade);
  54.             var b:Number = baseObj.b + Math.round((targetObj.b - baseObj.b)/gradeMax*grade);
  55.            
  56.             circle.transform.colorTransform = new ColorTransform(0, 0, 0, 100, r, g, b, 0);
  57.         }
  58.        
  59.         public function colorToRGB(clr:Number):Object {
  60.             var r:Number = (clr & 0xFF0000)>> 16;
  61.             var g:Number = (clr & 0x00FF00)>> 8;
  62.             var b:Number = clr & 0x0000FF;
  63.             var obj:Object = {r: r, g: g, b: b};
  64.             return obj;
  65.         }
  66.     }
  67. }
]]> http://parpue.net/web/380/feed 0