トップへ戻るニュースフォーラムFLASH-ML 過去ログBak@Flaダウンロードよくある質問と答
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
メインメニュー
メイン
   とにかくFLASH【FLASHに関して全般】
     動的な線の描画
投稿するにはまず登録を

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
surou
Åê¹ÆNo.23067
投稿日時: 2006-1-23 17:48
新米
居住地:
投稿: 9
使用環境:
MacOSX10.39
FlashMX2004Pro
動的な線の描画
初めまして、初めて投稿します

4scandalsのサイトのトップにある徐々に消えていく線を作りたいと色々試しているのですがうまくいきません


あの動的な動きはMCを複製し、複製した順に徐々に消しているのか、それとも、lineToで描いた線を消しているのでしょうか・・・?

複製による方法で、あるサイトにあったサンプルを参考に似たような物は出来たのですが、MCの間が空き、一本の線に見えません
どなたかお力を貸してもらえないでしょうか?よろしくお願いします。

ソースを貼っておきます。以下のソースは複製するMCに対してのASです。
onClipEvent (load) {
Max = 30;
speed = 20;
Name = "line";
if (this._Name == Name) {
for (i = 0; i < Max; i++) {
this.duplicateMovieClip(Name+i,100-i);
_parent[Name+i].Num = i;
_parent[Name+i]._alpha = 100*(Max-i)/Max;
_parent[Name+i]._xscale = 100;
_parent[Name+i]._yscale = 100;
}
this._visible = false;
}
}

onClipEvent (enterFrame) {
if (this._Name != Name) {
beforeX = this._x;
beforeY = this._y;
beforeR = this._rotation;
if (Num == 0) {
this._x += (_parent._xmouse-this._x)/speed;
this._y += (_parent._ymouse-this._y)/speed;
this._rotation += ((this._x-this._y)-this._rotation)/speed;
} else {
this._x = _parent[Name+(Num-1)].beforeX;
this._y = _parent[Name+(Num-1)].beforeY;
this._rotation = _parent[Name+(Num-1)].beforeR;
}

}
}




ひろゆき
Åê¹ÆNo.23068
投稿日時: 2006-1-23 20:59
ちょんまげら
居住地: 東京砂漠
投稿: 4403
使用環境:
10.8.5

Flash Professional CS4/CS6/CC

Safari 6.1
Re: 動的な線の描画
4scandalsのサイトのトップにある徐々に消えていく線を
作りたいと色々試しているのですがうまくいきません

「4scandalsのサイトのトップ」とだけ書かれても、
どこのサイトか分かりづらいですね。
URLを示していただけると分かりやすいと思いますが。
http://www.4scandals.com/

明確な根拠はありませんが、lineTo を使っているような気がします。

引用:
複製による方法で、あるサイトにあったサンプルを参考に似たような物は
出来たのですが、MCの間が空き、一本の線に見えません

お作りになっているムービークリップ自体がどのようなものか
分かりませんので、原因はちょっと分かりづらいですね。


とりあえず、マウスを追尾して描画するようなものを作りました。

サンプル1

target というムービークリップがマウスを追尾して、
そこにマウスの座標を記録して、lineTo で描線するというようにして、
描線したムービークリップは、
アルファが 0 になった時点で、removeMovieClip しています。

_root 第1フレームに
this.createEmptyMovieClip("target", 1);
target._x = Stage.width/2;
target._y = Stage.height/2;
target.lineNum = 0;
target.onEnterFrame = function():Void {
	this.xPos = this._x;
	this.yPos = this._y;
	this._x = _xmouse;
	this._y = _ymouse;
	this.lineNum ++;
	drawLine(this);
};
function drawLine(target_mc:MovieClip):Void {
	var lineNum = target_mc.lineNum;
	this.createEmptyMovieClip("line"+lineNum, lineNum+1);
	var line_mc = this["line"+lineNum];
	line_mc.lineStyle(1, 0xFFFFFF);
	line_mc.moveTo(target_mc.xPos, target_mc.yPos);
	line_mc.lineTo(target_mc._x, target_mc._y);
	line_mc.onEnterFrame = function():Void {
		this._alpha -= 2;
		if (this._alpha <= 0) {
			this.removeMovieClip();
		}
	};
}
と記述。

で、この target の動きを変化させてやれば、
マウスの動きから少しズレた動きができると思います。

サンプル2

	(前略)
var deceleration:Number = 0.1;
target.onEnterFrame = function():Void {
	this.xPos = this._x;
	this.yPos = this._y;
	this._x += (_xmouse - this._x)*deceleration;
	this._y += (_ymouse - this._y)*deceleration;
	this.lineNum ++;
	drawLine(this);
};
	(後略)


target の動きについては、
指定座標に減速しながら近づくMC。
バネ運動について
などが参考になるでしょう。


あと「アカウント編集」の使用環境で「, (カンマ)」のあとに
半角スペースを入れてもらえると見やすくなるんですが。


----------------
質問する際は、回答者に具体的な情報を与えてください。

surou
Åê¹ÆNo.23070
投稿日時: 2006-1-23 22:18
新米
居住地:
投稿: 9
使用環境:
MacOSX10.39
FlashMX2004Pro
Re: 動的な線の描画
>ひろゆきさん

 早速答えてもらいありがとうございます。
 サンプルまで作ってもらってホント感謝です・・・
 サンプルのソースを元に後は移動に関して勉強すれば出来そうです。
 それと、このサンプルが他にやりたかった事のヒントになりそうなので、そちらもやってみようと思います。

 本当にありがとうございました。
ひろゆき
Åê¹ÆNo.23071
投稿日時: 2006-1-23 22:26
ちょんまげら
居住地: 東京砂漠
投稿: 4403
使用環境:
10.8.5

Flash Professional CS4/CS6/CC

Safari 6.1
Re: 動的な線の描画
マウスの動きを追い越しているので、
バネ運動について
を利用しているのではないかと思います。

サンプル3


----------------
質問する際は、回答者に具体的な情報を与えてください。

SeeDa!!
Åê¹ÆNo.23074
投稿日時: 2006-1-24 10:11
職人
居住地: Nagoya
投稿: 221
使用環境:
WinXP
Flash CS4
au:W33SA?
Re: 動的な線の描画
自分も同様の動作を考えていましたが、ひろゆきさんの計算のほうがずっと軽そうです
何かの参考に投稿しておきます。
onClipEvent (load) {
	_x = _xmouse;
	_y = _ymouse;
	r    = 0;
	dist = 0;
	gain = 0.98;
}

onClipEvent (enterFrame) {
	dx = dist * Math.cos(r) + _xmouse/60;
	dy = dist * Math.sin(r) + _ymouse/60;
	_x += dx;
	_y += dy;
	r    = Math.atan2(dy,dx);
	dist = Math.sqrt(dx*dx+dy*dy) * gain;
}
kkk01
Åê¹ÆNo.23077
投稿日時: 2006-1-24 12:30
新米
居住地: 東京
投稿: 16
使用環境:
WinXP : Flash CS3
WinXP : Flex Builder 3
Re: 動的な線の描画
WebDesigning 2005年10月号にこのソース解析が出てますよ。
http://book.mycom.co.jp/wd/bn/200510.html

surou
Åê¹ÆNo.23862
投稿日時: 2006-2-19 2:16
新米
居住地:
投稿: 9
使用環境:
MacOSX10.39
FlashMX2004Pro
Re: 動的な線の描画
みなさんすいません;せっかく答えて貰ってた見てなかったので気づきませんでした;

みなさんの回答を参考にさせてもらいます。

ありがとうございました。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ

投稿するにはまず登録を
 
Copyright (C) 2003 FLASH-japan. All rights reserved.
Powered by Xoops