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

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

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

Degrafaのベジェ曲線描画に、さらに塗りを指定して、
もうちょっと見栄えのいい波にしてみました。

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

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

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

↓波一つ分のパス

>>text

XML:

<Path id="bezier4" x="{bigWaveWidth/2}" y="{height/2-10}" fill="{bigWaveFill}">
<segments>
<MoveTo x="0" y="0" />
<CubicBezierTo x="{bigWaveWidth}" y="0" cx="{bigWaveWidth/2}" cy="{-waveHeight}" cx1="{bigWaveWidth/2}" cy1="{waveHeight}" />
<LineTo x="{bigWaveWidth}" y="{height}"/>
<LineTo x="{0}" y="{height}"/>
<LineTo x="{0}" y="{0}"/>
</segments>
</Path>

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

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

今度は、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 = 30;
[Bindable]private var waveWidth:Number = 410;
[Bindable]private var bigWaveWidth:Number = 600;
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;
if(this.bezier3.x <-this.bigWaveWidth) this.bezier3.x = this.bezier4.x + bigWaveWidth;
if(this.bezier4.x <-this.bigWaveWidth) this.bezier4.x = this.bezier3.x + bigWaveWidth;
this.bezier3.x -= 5;
this.bezier4.x -= 5;
}
]]>
</mx:Script>
<Surface>
<fills>
<LinearGradientFill id="MainFill" angle="90">
<GradientStop ratio="0" alpha="0.7" color="#FFFFFF"/>
<GradientStop ratio="1" alpha="0.7" color="#FFDDDD"/>
</LinearGradientFill>
<LinearGradientFill id="smallWaveFill1" angle="0">
<GradientStop ratio="0" alpha="0.5" color="#FF6666"/>
<GradientStop ratio="1" alpha="0.5" color="#FFCC00"/>
</LinearGradientFill>
<LinearGradientFill id="smallWaveFill2" angle="0">
<GradientStop ratio="0" alpha="0.5" color="#FFCC00"/>
<GradientStop ratio="1" alpha="0.5" color="#FF6666"/>
</LinearGradientFill>
<SolidFill id="bigWaveFill" color="#CCCC00" alpha="0.5"/>
</fills>
<strokes>
<SolidStroke color="#666688" alpha="0.3" 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">
<Path id="bezier3" x="{-bigWaveWidth/2}" y="{height/2-10}" fill="{bigWaveFill}">
<segments>
<MoveTo x="0" y="0" />
<CubicBezierTo x="{bigWaveWidth}" y="0" cx="{bigWaveWidth/2}" cy="{-waveHeight}" cx1="{bigWaveWidth/2}" cy1="{waveHeight}" />
<LineTo x="{bigWaveWidth}" y="{height}"/>
<LineTo x="{0}" y="{height}"/>
<LineTo x="{0}" y="{0}"/>
</segments>
</Path>
<Path id="bezier4" x="{bigWaveWidth/2}" y="{height/2-10}" fill="{bigWaveFill}">
<segments>
<MoveTo x="0" y="0" />
<CubicBezierTo x="{bigWaveWidth}" y="0" cx="{bigWaveWidth/2}" cy="{-waveHeight}" cx1="{bigWaveWidth/2}" cy1="{waveHeight}" />
<LineTo x="{bigWaveWidth}" y="{height}"/>
<LineTo x="{0}" y="{height}"/>
<LineTo x="{0}" y="{0}"/>
</segments>
</Path>
<Path id="bezier1" x="{-waveWidth/2}" y="{height/2}" fill="{smallWaveFill1}">
<segments>
<MoveTo x="0" y="0" />
<CubicBezierTo x="{waveWidth}" y="0" cx="{waveWidth/2}" cy="{-waveHeight}" cx1="{waveWidth/2}" cy1="{waveHeight}" />
<LineTo x="{waveWidth}" y="{height}"/>
<LineTo x="{0}" y="{height}"/>
<LineTo x="{0}" y="{0}"/>
</segments>
</Path>
<Path id="bezier2" x="{waveWidth/2}" y="{height/2}" fill="{smallWaveFill2}">
<segments>
<MoveTo x="0" y="0" />
<CubicBezierTo x="{waveWidth}" y="0" cx="{waveWidth/2}" cy="{-waveHeight}" cx1="{waveWidth/2}" cy1="{waveHeight}" />
<LineTo x="{waveWidth}" y="{height}"/>
<LineTo x="{0}" y="{height}"/>
<LineTo x="{0}" y="{0}"/>
</segments>
</Path>
</GeometryComposition>
</RegularRectangle>
</GeometryGroup>
</Surface>
</mx:Application>

Newer: ボイスレコーダー買ってみた。
Older: Flash,Degrafaで簡単に波を表現 (1)

Comments:0

Trackbacks:1

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