AS3でのグラフィック効果

質問

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

http://wildcardinc.jp/#/4

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

Flash CS5 ActionScript3

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

回答No.3

H240S18B73 · ベストアンサー

#2です

線はaとdをアンカーポイント
bとcをコントロールポイントにした
ベジェ曲線なので
それらのx座標を調整すれば長さは変えれます

幅を1000にしたいなら

a=new Point(0,100)
b=new Point(200,100)
c=new Point(350,100)
d=new Point(550,100)

↓

a=new Point(0,100)
b=new Point(300,100)
c=new Point(700,100)
d=new Point(1000,100)

というかんじです

本来はここは簡単に変えれるようにしとくべきだけど
まあ波打つ線のグラフィクのやり方みせる為だけのサンプルで
使い回す事もないだろうってことで面倒なので数値固定にしてました

レンダリングの限界ということでいうなら
長さ2万ピクセル越えの線とか描いたり
画面の１０倍近い大きさのMCに
フィルタ効果かけたりしない限り大丈夫です

回答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の値を決める時に
マウスの座標をかませてやれば
ちょっとインタラクティブになります

どう動かすかはセンスで

お礼

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

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

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

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

回答No.1

H240S18B73

fl.motion.BezierSegment
flash.display.GraphicsPath

こんなとこでつらつら説明されても
よくわからないと思うので
ヘルプのリファレンスを参照をおすすめ

とりあえずこの２つのクラス調べたら
道筋が見えるんじゃないでしょうか

ちなみにGraphicsPathクラスは
player10以降です、ご注意

お礼

早速のお返事ありがとうございます。
ヘルプのリファレンスを読んでも、よく分かりませんでした。。。
初心者がやるには結構難しそうですかね？

コードのサンプルか、方法を説明しているサイトがあれば助かるのですが。。。