parpue.net » Degrafa http://parpue.net Flash, Flex, デザイン等自分の好きなことを好きなようにやってます Wed, 12 Aug 2009 17:46:04 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 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 DegrafaでFlexコンポーネントのSkin作成解説ビデオがわかりやすい http://parpue.net/web/473 http://parpue.net/web/473#comments Fri, 27 Mar 2009 01:35:11 +0000 okm http://parpue.net/?p=473 skin_button

http://www.asfusion.com/examples/item/skinning-with-degrafa-1

昨日に引き続き、Degrafa。今度はコンポーネントSkin作ってみようと、
なんか参考になるもんないかなーと、探してみたら、これがわかりやすい。
サンプルプロジェクトファイルもダウンロードできます。

]]> http://parpue.net/web/473/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