上辺は位置固定しつつ、四角を描く！

質問

上の辺の位置は変えずに下の辺が下がりながら透明度50の四角をフレーム毎に(EnterFrameで)描画したいです。
どなたか教えていただけないでしょうか。

※以下のASでは四角が移動してしまいます。
onClipEvent(load){
_yscale_max=100;
_yscale = 5;
_root.abc.beginFill (0x000000, 50);
_root.abc.moveTo (100, 100);
_root.abc.lineTo (300, 100);
_root.abc.lineTo (300, 300);
_root.abc.lineTo (100, 300);
_root.abc.endFill ();
}
onClipEvent(EnterFrame){
_yscale += 5;
if(_yscale < _yscale_max){
_root.abc._yscale =_yscale;
}
if(_yscale > _yscale_max){
_yscale =_yscale_max;
}
}

回答No.1

noname#35109 · ベストアンサー

大切なのは基準点です。

Flash 上のムービークリップなどのインスタンスは，
基準点を基準に拡大縮小回転，また座標の決定が行われます。

「インスタンスの基準点」
http://homepage3.nifty.com/ginga-b/MX/inst_refpoint.html

ついでに moveTo ()　や lineTo() で指定する座標も，
ムービークリップの基準点を基準にしています。
書かれているスクリプト，

>　_root.abc.moveTo (100, 100);
>　_root.abc.lineTo (300, 100);
>　_root.abc.lineTo (300, 300);
>　_root.abc.lineTo (100, 300);

ですが，
これを図示すると次のようになります。

----------------------------------------
　＋　←基準点(0, 0)

　　　　　(100, 100)　　　　　　　　(300, 100)
　　　　　　　　■■■■■■■■■
　　　　　　　　■■■■■■■■■
　　　　　　　　■■■■■■■■■
　　　　　　　　■■■■■■■■■
　　　　　　　　■■■■■■■■■
　　　　　　　　■■■■■■■■■
　　　　　　　　■■■■■■■■■
　　　　　(100, 300)　　　　　　　　(300, 300)
----------------------------------------

>　_yscale += 5;
で，基準点(0, 0) を中心として，
y軸の下向き方向に拡大しますから，
全体としては下に移動しながら拡大するということになってしまいます。

そうではなくて，
200×200 の四角形を描くのでしたら，
こうしないとだめでしょう↓

----------------------------------------

　　　　　　　　　　　　基準点(0, 0)
　　　　　(-100, 0)　　　　↓　　　　(100, 0)
　　　　　　　　■■■■＋■■■■
　　　　　　　　■■■■■■■■■
　　　　　　　　■■■■■■■■■
　　　　　　　　■■■■■■■■■
　　　　　　　　■■■■■■■■■
　　　　　　　　■■■■■■■■■
　　　　　　　　■■■■■■■■■
　　　　　(-100, 200)　　　　　　　(100, 200)
----------------------------------------

したがって，

>　_root.abc.moveTo (100, 100);
>　_root.abc.lineTo (300, 100);
>　_root.abc.lineTo (300, 300);
>　_root.abc.lineTo (100, 300);

この↑部分は，

　_root.abc.moveTo (-100, 0);
　_root.abc.lineTo (100, 0);
　_root.abc.lineTo (100, 200);
　_root.abc.lineTo (-100, 200);

こう↑すべきだと思います。
実際に作ってみていませんが，おそらくこれでうまく行くと思います。