Home > Flash | WEB | デザイン > FlashグラフィックコンポーネントDegrafaを試す

FlashグラフィックコンポーネントDegrafaを試す

2009-03-25 (水) 23:54
Flash | WEB | デザイン
actionscript3 | Degrafa | Flash

MoonGiftで紹介されていたDegrafaを試してみた。

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

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

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

■作ってみたデモ

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

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

>>text

XML:

<mx:Canvas id="main_canvas" x="5" y="5" width="400" height="258" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<degrafa:Surface>
<degrafa:fills>

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

>>text

XML:

<degrafa:fills>
<degrafa:LinearGradientFill id="MainFill" angle="90">
<degrafa:GradientStop ratio="0" alpha="1" color="#FFFFFF"/>
<degrafa:GradientStop ratio="1" alpha="1" color="#DDDDDD"/>
</degrafa:LinearGradientFill>

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

>>text

XML:

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

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

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

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

以下全部

>>text

XML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:degrafa="http://www.degrafa.com/2007"
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);">
<mx:Canvas id="main_canvas" x="5" y="5" width="400" height="258" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<degrafa:Surface>
<degrafa:fills>
<degrafa:LinearGradientFill id="MainFill" angle="90">
<degrafa:GradientStop ratio="0" alpha="1" color="#FFFFFF"/>
<degrafa:GradientStop ratio="1" alpha="1" color="#DDDDDD"/>
</degrafa:LinearGradientFill>
<degrafa:LinearGradientFill id="TextFill" angle="90">
<degrafa:GradientStop ratio="0" alpha="1" color="#AAAAAA"/>
<degrafa:GradientStop ratio="1" alpha="1" color="#444444"/>
</degrafa:LinearGradientFill>
<degrafa:SolidFill id="CircleFill1" color="#000044"/>
<degrafa:SolidFill id="CircleFill2" color="#FFFFFF"/>
<degrafa:SolidFill id="CircleFill3" color="#333333"/>
</degrafa:fills>
<degrafa:strokes>
<degrafa:SolidStroke color="#000000" alpha="1" weight="1" id="BasicStroke"/>
<degrafa:SolidStroke color="#222222" alpha="1" weight="3" id="CircleStroke1"/>
<degrafa:LinearGradientStroke weight="4" id="insetEdge" pixelHinting="true">
<degrafa:GradientStop ratio="0" alpha=".3" color="#366079"/>
<degrafa:GradientStop ratio=".5" alpha="0" color="#366079"/>
<degrafa:GradientStop ratio="1" alpha=".3" color="#366079"/>
</degrafa:LinearGradientStroke>
</degrafa:strokes>
<degrafa:GeometryGroup>
<degrafa:RoundedRectangle id="aa" width="300" height="248" x="40" y="10" cornerRadius="15" fill="{MainFill}" stroke="{BasicStroke}">
<degrafa:RasterText fill="{TextFill}" x="55" y="210 " fontSize="34" text="Hello!!Degrafa!" bold="true" autoSize="left"/>
<degrafa:GeometryComposition x="100" y="150" id="circle">
<degrafa:Circle radius="30" fill="{CircleFill1}" stroke="{CircleStroke1}" x="10" y="10">
<degrafa:Circle radius="25" fill="{CircleFill2}" stroke="{CircleStroke1}" x="5" y="5">
<degrafa:Circle radius="15" fill="{CircleFill3}" stroke="{CircleStroke1}" x="10" y="10">
</degrafa:Circle>
</degrafa:Circle>
<degrafa:filters>
<mx:GlowFilter alpha="0.5" color="0x777777" blurX="10" blurY="10" strength="3" inner="false" />
</degrafa:filters>
</degrafa:Circle>
</degrafa:GeometryComposition>
</degrafa:RoundedRectangle>
</degrafa:GeometryGroup>
</degrafa:Surface>
</mx:Canvas>
<refrector:Reflector target="{main_canvas}" alpha=".3" falloff="{(this.circle.y+100)}" id="reflector"/>
<mx:Script>
<![CDATA[
private var add_y:Number = 3;
private var add_x:Number = 3;
function startHandler(event:Event):void{
this.addEventListener(Event.ENTER_FRAME, this.onEnterHandler);
}
function onEnterHandler(event:Event):void{
if(circle.x <-3) this.add_x = -add_x;
else if(circle.x> 225) this.add_x = -add_x;
if(circle.y <0) this.add_y = -add_y;
else if(circle.y> 177) this.add_y = -add_y;
circle.x += add_x;
circle.y += add_y;
}
]]>
</mx:Script>
</mx:Application>

Comments:0

Trackbacks:0

Trackback URL for this entry: http://parpue.net/web/432/trackback
Listed below are links to weblogs that reference: FlashグラフィックコンポーネントDegrafaを試す from parpue.net

Home > Flash | WEB | デザイン > FlashグラフィックコンポーネントDegrafaを試す

最近の記事

カテゴリ