Home > Flash | WEB > Flash,Degrafaで簡単に波を表現 (1)

Flash,Degrafaで簡単に波を表現 (1)

2009-04-15 (水) 3:02
Flash | WEB
actionscript3 | Degrafa | Flash

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:

<?xml version="1.0" encoding="utf-8"?>
<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)">
<mx:Script>
<![CDATA[
[Bindable]private var waveHeight:Number = 50;
[Bindable]private var waveWidth:Number = 410; //> width
private function onEnterHandler(event:Event):void{
if(this.bezier1.x <-this.waveWidth) this.bezier1.x = this.bezier2.x + waveWidth;
if(this.bezier2.x <-this.waveWidth) this.bezier2.x = this.bezier1.x + waveWidth;
this.bezier1.x -= 10;
this.bezier2.x -= 10;
}
]]>
</mx:Script>
<Surface>
<fills>
<LinearGradientFill id="MainFill" angle="90">
<GradientStop ratio="0" alpha="1" color="#FFFFFF"/>
<GradientStop ratio="1" alpha="1" color="#DDDDFF"/>
</LinearGradientFill>
</fills>
<strokes>
<SolidStroke color="#666688" alpha="1" weight="1" id="BasicStroke"/>
</strokes>
<GeometryGroup>
<RegularRectangle id="rect" width="{width-2}" height="{height-2}" x="0" y="0" fill="{MainFill}" stroke="{BasicStroke}">
<GeometryComposition id="beziers">
<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}" />
<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}"/>
</GeometryComposition>
</RegularRectangle>
</GeometryGroup>
</Surface>
</mx:Application>

Newer: Flash,Degrafaで簡単に波を表現 (2)
Older: PaperVision3Dで３Dダンボー

Comments:0

Trackbacks:0

Trackback URL for this entry: http://parpue.net/web/630/trackback
Listed below are links to weblogs that reference: Flash,Degrafaで簡単に波を表現 (1) from parpue.net

Home > Flash | WEB > Flash,Degrafaで簡単に波を表現 (1)

最近の記事

カテゴリ