AS3でのグラフィック効果

質問

Flashのグラフィック効果について質問させていただきます。

http://wildcardinc.jp/#/4

上記URLのような線が波打つようなグラフィックはAS3でどのように書けば達成できますか？
更にこれに何かマウスインタラクションをつけたいのですが、何か簡単なのありますか？

Flash CS5 ActionScript3

しばらくFlash触っていなかったもので、トンチンカンなこと言うかもしれませんが、
ご教授、宜しくお願いいたします。

回答No.2

H240S18B73

import fl.motion.BezierSegment
import flash.display.GraphicsPath

import flash.geom.Point
import flash.display.Sprite;
import flash.events.Event;
import flash.display.IGraphicsData;

var spr:Sprite=addChild(new Sprite()) as Sprite
var gData:Vector.<IGraphicsData>=new Vector.<IGraphicsData>
var a,b,c,d:Point
a=new Point(0,100)
b=new Point(200,100)
c=new Point(350,100)
d=new Point(550,100)
spr.addEventListener(Event.ENTER_FRAME,update)

function update(e){
a.y=Math.sin(getTimer()/1000-Math.PI/2)*50+200
b.y=Math.sin(getTimer()/1000)*50+200
c.y=Math.sin(getTimer()/1000+Math.PI/2)*50+200
d.y=Math.sin(getTimer()/1000)*50+200
gData.unshift(makePathData())
while(gData.length>30)gData.pop()
gData.forEach(fallPath)
spr.graphics.clear()
spr.graphics.lineStyle(1,0x88AAFF)
spr.graphics.drawGraphicsData(gData)
}
function makePathData():GraphicsPath{
var bez:BezierSegment=new BezierSegment(a,b,c,d)
var rtn:GraphicsPath=new GraphicsPath()
rtn.moveTo(a.x,a.y)
for(var i=1/32;i<=1;i+=1/32){
var pnt:Point=bez.getValue(i)
rtn.lineTo(pnt.x,pnt.y)
}
return rtn
}
function fallPath(pData:GraphicsPath,ind:uint,arr){
for(var i=1;i<pData.data.length;i+=2){
pData.data[i]+=ind
}
}

こんなカンジです

update()のa,b,c,dのyの値を決める時に
マウスの座標をかませてやれば
ちょっとインタラクティブになります

どう動かすかはセンスで

お礼

ありがとうございます！
マウスかませて動かそうといろいろいじっています。

この動き、三角関数とか使ってるんですね。
自力じゃとても出来そうにありませんでした。。。

お忙しい中、もうひとつ質問なのですが、
線の幅の長さって上限あるのでしょうか？

画面いっぱいまで線を伸ばしたいのですが、途中で途切れてしまう気が。。。