左から順にどうぞ
仕組みはこんな感じ
以前やったペジエ曲線で描画して、描画点を Tween してみました。
全部の点をTweenするのは面倒なので、1点を動かすと他の描画点と制御点が動くようにプログラムしておきます。
赤の点をドラッグすると、他の点がなにかしら動きます。
dynamic class PejieMenu extends MovieClip{
var offset = 75;
var base = 256;
var weight = 36;
var bar = 75;
function onLoad(){
//描画点3つと制御点2つ。描画用クリップを準備
var depth = 100;
this.attachMovie("pointg","p1",depth++,{_y:base});
this.attachMovie("point" ,"drag",depth++,{_x:offset,_y:base-weight});
this.attachMovie("pointg","p2",depth++,{_y:base});
this.attachMovie("pointb","c1",depth,{});
this.attachMovie("pointb","c2",depth++,{});
createEmptyMovieClip("draw", depth++);
}
function onEnterFrame(){
// this.dragの座標に応じて、他の点の座標を変える。テキトー。
var fat = (base - this.drag._y) * 0.5;
this.c1._y = this.drag._y + ( offset - this.drag._x );
this.c2._y = this.drag._y - ( offset - this.drag._x );
this.c1._x = this.drag._x - (bar+fat);
this.c2._x = this.drag._x + (bar+fat);
this.p1._x = offset-bar + fat*0.3;
this.p2._x = offset+bar - fat*0.3;
//描画用クリップに描画。
with (this.draw) {
clear();
beginFill(0x66DD80);
moveTo( this.p1._x, this.p1._y );
curveTo( this.c1._x, this.c1._y, this.drag._x, this.drag._y );
curveTo( this.c2._x, this.c2._y, this.p2._x, this.p2._y );
lineTo( this.p1._x, this.p1._y );
endFill();
}
}
}
で、赤の点をTween Elastic.easeOutあたりを使って動かしてやると、全体にょきにょきっと動くようになります。
イメージどおりに動かすのはなかなか大変ですが、_xscaleなどでTweenするのとはまた違った効果が出せるのではないでしょうか。
ペジエで描画したムービークリップで、写真をマスクすると、冒頭のサンプルができあがりです。