2005-12-1に作ってみた擬似3DのFLASHです。
1個目は3Dぽく円回転するもの。
2個目は極座標？を使って球体を表現してみたもの。
3個目は2個目を改造して、いろいろつけてみたもの。
実際のとこうまく表現できてないところがあったりします。もうちょっと考えてからやってみてそれを完成版としてみょうかと。
擬似3Dテスト版のプログラムは以下のとおりになっています
------------------ 1個目 ------------------
＜後ろの線のムービークリップアクション＞
onClipEvent (load){
//回転している■の中心の深度が500だから500以下のものは線より後ろに、500以上のものは線より前にある感じを表現する。
this.swapDepths(500);
}
＜左上で斜めに回転してる■のムービークリップアクション>
onClipEvent (load) {
//■の数
num = 6;
if (_name == "ball_org") {
for (i=0; i<num; i++) {
//深度が重なるとちゃんとコピーできなくなるので、注意する。
this.duplicateMovieClip("ball"+i+1, 10+i, {degree:i*360/num, i:i+1});
_visible = false;
}
}
//rは回転の半径、centerx,centeryは中心座標
r = 100;
centerx = 150;
centery = 150;
}
onClipEvent (enterFrame) {
//角度をラジアンに変換
radian = Math.PI/180*degree;
//x,y座標の移動。ここではただの極座標での円。
this._x = centerx+r*Math.cos(radian);
this._y = centery-r*Math.cos(radian);
//100% ×( 1〜3)/3 = 後ろでは33%前では100%の拡大率
this._yscale = this._alpha=100*(Math.sin(radian)+2)/3;
this._xscale = 100*(Math.sin(radian)+2)/3;
//とりあえず0.5度づつ回転
degree += 0.5;
//0〜1000の間の深度を行き来する。
this.swapDepths(1000*(Math.sin(radian)+1)/2);
}
on (press) {
//これはお遊び。クリックしたら線のalphaが変わるようにしてある
_parent.stage._alpha = 100-i*9;
}
動きが変わっているのは _x _y _xscale _yscale の違いだからそこだけ載せる。 （半径 r が変わってる場合もあり）
<左上の斜め回転してる、下のほうのムービークリップアクション>
<略>
this._x = centerx+r*Math.cos(radian)+r*Math.sin(radian);
this._y = centery-r*Math.cos(radian);
this._yscale = this._alpha=100*(Math.sin(radian)+2)/3*(0.5+(Math.sin(radian)+1)/4);
this._xscale = 100*(Math.sin(radian)+2)/3*(0.5+(Math.sin(radian)+1)/4);
<略>
<右下の横に回転してるでかいほうのムービークリップアクション>
<略>
this._x = centerx+r*Math.cos(radian);
this._y = centery;
this._yscale = this._alpha=100*(0.5+(Math.sin(radian)+1)/4);
this._xscale = 100*Math.sin(radian)*(0.5+(Math.sin(radian)+1)/4);
<略>
<左下の横に回転してる小さいほうのムービークリップアクション>
<略>
this._x = centerx+r*Math.cos(radian);
this._y = centery+r*Math.sin(radian)/5;
this._yscale = this._alpha=100*(0.5+(Math.sin(radian)+1)/4);
this._xscale = 100*Math.sin(radian)*(0.5+(Math.sin(radian)+1)/4);
<略>
<左下の横に回転してる小さいほうのムービークリップアクション>
<略>
this._x = centerx+r*Math.cos(radian);
this._y = centery+r*Math.sin(radian)/5;
this._yscale = this._alpha=100*(0.5+(Math.sin(radian)+1)/4);
this._xscale = 100*Math.sin(radian)*(0.5+(Math.sin(radian)+1)/4);
<略>
<一番右の縦回転してるやつのムービークリップアクション>
<略>
this._x = centerx+r*Math.cos(radian)/5;
this._y = centery+r*Math.sin(radian);
this._yscale = this._alpha=100*(0.5+(Math.cos(radian)+1)/4);
this._xscale = 100*Math.sin(radian)*(0.5+(Math.cos(radian)+1)/4);
<略>
<右から2番目の縦回転してるやつのムービークリップアクション>
<略>
this._x = centerx;
this._y = centery+r*Math.sin(radian);
this._xscale = this._alpha=100*(0.5+(Math.cos(radian)+1)/4);
this._yscale = 100*Math.sin(radian)*(0.5+(Math.cos(radian)+1)/4);
<略>
<右から3番目の縦回転してるやつのムービークリップアクション>
<略>
this._x = centerx;
this._y = centery+r*Math.sin(radian);
this._xscale = this._alpha=100*(0.5+(Math.cos(radian)+1)/4);
this._yscale = 100*Math.cos(radian)*(0.5+(Math.cos(radian)+1)/4);
<略>
------------------ 2個目 ------------------
<1フレーム目のフレームアクション>
//Mouse.hide();
r = 20;
r2 = 10;
y0 = x0=0;
onEnterFrame = function () {
x0 = ((x0+_xmouse)/2-x0)*1.2+_xmouse;
y0 = ((y0+_ymouse)/2-y0)*1.2+_ymouse;
//x0 = (_xmouse-x0)/2+x0;
//y0 = (_ymouse-y0)/2+y0;
};
stop();
<外の玉ののムービークリップアクション>
onClipEvent (load) {
num = 360;
kopi();
function kopi() {
if (_name == "ball_org") {
for (i=0; i<num; i++) {
this.duplicateMovieClip("ball_"+(i+1), 200*1+i, {ydeg:i*20, xdeg:i*20, i:i, x1:1, x2:1, y1:1, y2:1});
_visible = false;
i += 0;
}
}
}
setInterval(kaiten, 10);
function kaiten() {
r = _parent.r;
//num*({ydeg:i*20}の20)/(ydeg/10の10)=360になるようにする
yrad = ydeg/40*(Math.PI/180);
xrad = xdeg*(Math.PI/180);
if (Math.sin(yrad)>=0) {
_visible = true;
} else {
_visible = false;
}
_y = (-r*Math.cos(yrad))+_root.y0;
_x = Math.abs(r*Math.sin(yrad))*Math.cos(xrad)+_root.x0;
_yscale = _xscale=r*(Math.sin(yrad)+2)/4.5*(Math.sin(xrad)+2)/4.5;
_alpha = 100*(Math.sin(yrad)+2)/3*(Math.sin(xrad)+2)/3;
depth = r*Math.sin(yrad)*Math.sin(xrad);
this.swapDepths(depth);
_root.deg();
x1 = x2;
y1 = y2;
x2 = _root.x0;
y2 = _root.y0;
xdeg += (x2-x1)*15;
ydeg += (y2-y1)*15;
xdeg += 5/1;
ydeg += 30/1;
//画面を更新 updateAfterEvent(); 注意：数が多いと処理が重い
}
}
<中の玉のムービークリップアクション>
onClipEvent (load) {
num = 180;
kopi_num = 0;
kopi();
function kopi() {
if (_name == "ball_org2") {
for (i=0; i<num; i++) {
this.duplicateMovieClip("ball2_"+(i+1), 200*2+i, {ydeg:i*20, xdeg:i*20, i:i, x1:1, x2:1, y1:1, y2:1});
_visible = false;
i += 1;
}
}
}
setInterval(kaiten, 10);
function kaiten() {
r = _parent.r2;
yrad = ydeg/10*(Math.PI/180);
xrad = xdeg*(Math.PI/180);
if (Math.sin(yrad)>=0) {
_visible = true;
} else {
_visible = false;
}
_y = (-r*Math.cos(yrad))+_root.y0;
_x = Math.abs(r*Math.sin(yrad))*Math.cos(xrad)+_root.x0;
_yscale = _xscale=r*(Math.sin(yrad)+2)/4.5*(Math.sin(xrad)+2)/4.5;
_alpha = 100*(Math.sin(yrad)+2)/3*(Math.sin(xrad)+2)/3;
depth = r*Math.sin(yrad)*Math.sin(xrad);
this.swapDepths(depth);
_root.deg();
x1 = x2;
y1 = y2;
x2 = _root.x0;
y2 = _root.y0;
xdeg += (x2-x1)*15;
ydeg += (y2-y1)*15;
xdeg += 15/10;
ydeg += 30/10;
//画面を更新 updateAfterEvent(); 注意：数が多いと処理が重い
}
}
------------------ 3個目 ------------------
<1フレーム目のフレームアクション>
r = 20;
r2 = 10;
y0 = x0=0;
onEnterFrame = function () {
//x0 = ((x0+_xmouse)/2-x0)*1.2+_xmouse;
//y0 = ((y0+_ymouse)/2-y0)*1.2+_ymouse;
x0 = (_xmouse-x0)/2+x0;
y0 = (_ymouse-y0)/2+y0;
};
stop();
<中の玉のムービークリップアクション>
これは2個目のとおんなじ
<そと円のムービークリップアクション>
onClipEvent (load) {
num = 54;
ydeg = 90;
if (_name == "ball_org") {
for (i=0; i<num; i++) {
this.duplicateMovieClip("ball_"+(i+1), 100*2+i, {ydeg:ydeg, xdeg:i*20/3, i:i, x1:1, x2:1, y1:1, y2:1});
_visible = false;
i += 0;
}
}
setInterval(kaiten, 10);
function kaiten() {
r = _parent.r;
yrad = ydeg*(Math.PI/180);
xrad = xdeg*(Math.PI/180);
/*if (Math.sin(yrad)>=0) {
_visible = true;
} else {
_visible = false;
}*/
_y = (-r*Math.cos(yrad))+_root.y0+r/4*Math.sin(xrad);
_x = 3*r*Math.sin(yrad)*Math.cos(xrad)+_root.x0;
_yscale = _xscale=r*(Math.sin(yrad)+2)/4.5*(Math.sin(xrad)+2)/4.5;
_alpha = 100*(Math.sin(yrad)+2)/3*(Math.sin(xrad)+2)/3;
depth = r*Math.sin(yrad)*Math.sin(xrad);
this.swapDepths(depth);
_root.deg();
x1 = x2;
y1 = y2;
x2 = _root.x0;
y2 = _root.y0;
xdeg += (x2-x1)*15;
//ydeg += (y2-y1)*15;
xdeg += 5/1;
//ydeg += 30/10;
//画面を更新 updateAfterEvent(); 注意：数が多いと処理が重い
}
}
<適当に飛んでる●のムービークリップアクション１>
onClipEvent (load) {
ydeg = 20;
xdeg = 20;
x2 = y2=0;
setInterval(kaiten, 10);
function kaiten() {
r = 30;
yrad = ydeg*(Math.PI/180);
xrad = xdeg*(Math.PI/180);
_y = (-r*Math.cos(yrad))+_root.y0;
_x = r*Math.sin(yrad)*Math.cos(xrad)+_root.x0;
_yscale = _xscale=r*(Math.sin(yrad)+2)/4.5*(Math.sin(xrad)+2)/4.5;
_alpha = 100*(Math.sin(yrad)+2)/3*(Math.sin(xrad)+2)/3;
depth = r*Math.sin(yrad)*Math.sin(xrad);
this.swapDepths(depth);
x1 = x2;
y1 = y2;
x2 = _root.x0;
y2 = _root.y0;
xdeg += (x2-x1);
ydeg += (y2-y1);
xdeg += 15/10;
ydeg += 30/100;
//画面を更新 updateAfterEvent(); 注意：数が多いと処理が重い
}
}
<適当に飛んでる●のムービークリップアクション２>
xdeg ydeg r xdeg,ydegの加算量が違うだけ。
とりあえず3Dつくってみたかったので、1個目はサンプルを見ながらいろいろ改造して作ってみました。
メニューとかエフェクトとしてつかったらなかなか面白いんじゃないかと思う。
2個目は1個目の極座標を使った計算から考えて、3次元座標を考えてつくってみた。
一応3次元ぽくみえるようにはなったんだけど、なんとなくうまくできてないところが実はあったりしてるので、もうちょっと考え直してみようと思う。
今回製作したファイル
・test3d_01.swf(「右クリック→対象をファイルに保存(A)...」で保存できます)