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

パスワード:


パスワード紛失

新規登録
メインメニュー
メイン
   コーダーズルーム【スクリプト系】
     バネ運動について
投稿するにはまず登録を

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
jellybelly
Åê¹ÆNo.22039
投稿日時: 2005-12-9 23:39
新米
居住地: 神奈川
投稿: 5
使用環境:
WinXP,Flash Pro MX2004
バネ運動について
初めて投稿させていただきます。
よろしくお願いいたします。

スクリプトでバネ運動をさせたいと思っています。
あるMCをドラッグした後、リリースすると元の位置にバネ運動をしながら戻るというスクリプトを作りたいのですが、バネ運動の計算式をどのように書いたらよいのか理解できません。
今の状態では、ドラッグ、リリースまではできるのですが、リリースすると一瞬でもとの位置に戻ってしまいます。

http://www.longneck.ro/
上記のサイトの太陽のような効果です。

現在のMCの1フレーム目のスクリプトです。
var ox:Number = this._x;
var oy:Number = this._y;
//プレスした時のアクション
this.onPress = function() {
this.startDrag(true);
this.swapDepths(100);
};
//クリックした時のアクション
this.onRelease = function() {
this.stopDrag();
this.swapDepths(this.getNextHighestDepth());
this._x = ox;
this._y = oy;
};


バネ運動の仕組みを解説していただけないでしょうか?
ご教授よろしくお願いいたします。
ひろゆき
Åê¹ÆNo.22042
投稿日時: 2005-12-10 1:01
ちょんまげら
居住地: 東京砂漠
投稿: 4403
使用環境:
10.8.5

Flash Professional CS4/CS6/CC

Safari 6.1
Re: バネ運動について
引用:
バネ運動の仕組みを解説していただけないでしょうか?

「バネ運動」でフォーラム内を検索してみましょう
あるいは「バネ」でML-過去ログを検索してみましょう

オブジェクトを波打ったようにうごかす」が参考になるでしょうか。


引用:
今の状態では、ドラッグ、リリースまではできるのですが、リリースすると一瞬でもとの位置に戻ってしまいます。

それより、バネ運動以前に、
ボタンを押すとムービークリップが動き続けるというような
スクリプトを学習することの方が先ではないでしょうか?

例えば、
this.onRelease = function() {
	this.stopDrag();
	this.swapDepths(this.getNextHighestDepth());
	this.onEnterFrame = function() {
		this._x += 1;
		this._y += 1;
	}
};
だと、どうなるのか確認してみてください。


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

jellybelly
Åê¹ÆNo.22058
投稿日時: 2005-12-10 17:00
新米
居住地: 神奈川
投稿: 5
使用環境:
WinXP,Flash Pro MX2004
Re: バネ運動について
ひろゆきさん、早速お答え頂いてありがとうございました。

「バネ運動」「バネ」で検索し、「オブジェクトを波打ったように動かす」も読んだのですが、
分からなかったので投稿させていただきました。

参考にしている本に出ていた、マウスの動きに追従するMCのバネ運動のコードを参考にし、
色々数値を変えて試行錯誤したら、以下のコードで、元の位置に戻るバネ運動をなんとか得ることが出来ました。
しかし、まだ、なぜこの数式からバネ運動の結果が得られるのか理解できていないので、
もっと勉強したいと思います。ありがとうございました。


//初期設定
var motion:Boolean = false;
this.nx = this.ox=this._x;
this.ny = this.oy=this._y;
var lvx:Number = 0;
var lvy:Number = 0;
//背景を配置
this.attachMovie("iconBase", "logoBase_mc", this.getNextHighestDepth(), {_width:60, _height:60, _x:-30, _y:-30});
//ブラーを配置
this.attachMovie("blur", "blur01_mc", this.getNextHighestDepth(), {_width:50, _height:50, _alpha:30});
//ロゴを配置
this.attachMovie("logo", "logo01_mc", this.getNextHighestDepth(), {_width:42.1, _height:55, _alpha:50});
//プレスした時の動作
this.onPress = function() {
motion = false;
this.startDrag();
};
//リリースした時の動作
this.onRelease = function() {
motion = true;
this.stopDrag();
this.nx = this.ox;
this.ny = this.oy;
};
//MCの移動
this.onEnterFrame = function() {
if (motion) {
lvx = (lvx+(this.nx-this._x)/3.5)*0.8;
lvy = (lvy+(this.ny-this._y)/3.5)*0.8;
this._x += lvx;
this._y += lvy;
}
};
this.stop();
ひろゆき
Åê¹ÆNo.22062
投稿日時: 2005-12-10 17:32
ちょんまげら
居住地: 東京砂漠
投稿: 4403
使用環境:
10.8.5

Flash Professional CS4/CS6/CC

Safari 6.1
Re: バネ運動について
引用:
「バネ運動」「バネ」で検索し、「オブジェクトを波打ったように動かす」も読んだのですが、
分からなかったので投稿させていただきました。

であれば、「マウスに追随」でML-過去ログを検索してみましょう

ちょっとたくさんあって、探すの大変ですが、
ログを読んでいくと、振動の考え方などが書かれているものがあると思います。


元になっている考え方は、
指定座標に減速しながら近づくMC。
だと思うのですが。

同じのような動きは、他のスクリプトでもできますね。
目的地に近づく (2)
目的地に近づく (3)
#まだ、よく分かっていないので、説明はできませんが。


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

野中文雄
Åê¹ÆNo.22068
投稿日時: 2005-12-11 15:39
ちょんまげら
居住地: 東京
投稿: 4531
使用環境:
CS5.5 .6.8 Vista Home Premium (SP1)
Re: バネ運動について
動作を分析・確認したい場合には、動作に直接関わらない処理は省いて、ポイントを絞込んだ方がよいでしょう。
引用:
jellybellyさんは書きました:
しかし、まだ、なぜこの数式からバネ運動の結果が得られるのか理解できていないので、
もっと勉強したいと思います。ありがとうございました。

//初期設定
var motion:Boolean = false;
// this.nx = this.ox=this._x;
var nx:Number = this._x;
// this.ny = this.oy=this._y;
var ny:Number = this._y;
var lvx:Number = 0;
var lvy:Number = 0;
/* 動作に関係ないので割愛
MovieClipには丸でも描いておく*/
//プレスした時の動作
this.onPress = function() {
	motion = false;
	this.startDrag();
};
//リリースした時の動作
this.onRelease = function() {
	motion = true;
	this.stopDrag();
	// this.nx = this.ox;
	// this.ny = this.oy;
};
//MCの移動
this.onEnterFrame = function() {
	if (motion) {
		lvx = (lvx+(this.nx-this._x)/3.5)*0.8;
		lvy = (lvy+(this.ny-this._y)/3.5)*0.8;
		this._x += lvx;
		this._y += lvy;
	}
};
// this.stop();  // 1フレームにすれば不要

基本的な動作を変えずに、つぎのように書直すことができます。パラメータnA、nBを変えることでアニメーションが変化します。
// バラメータ
var nA:Number = 0.8;
var nB:Number = 0.2;
//初期設定
var nTargetX:Number = this._x;
var nTargetY:Number = this._y;
var nSpeedX:Number = 0;
var nSpeedY:Number = 0;
//プレスした時の動作
this.onPress = function() {
	delete this.onEnterFrame;
	this.startDrag();
};
//リリースした時の動作
this.onRelease = function() {
	this.onEnterFrame = xMove;
	this.stopDrag();
};
//MCの移動
function xMove() {
	var nDistanceX:Number = nTargetX-this._x;
	var nDistanceY:Number = nTargetY-this._y;
	nSpeedX = nSpeedX*nA+nDistanceX*nB;
	nSpeedY = nSpeedY*nA+nDistanceY*nB;
	this._x += nSpeedX;
	this._y += nSpeedY;
}

nA=0とすれば、いわゆる「イーズアウトの公式」です。このとき、1<nB<2たとえばnB=1.8とすると、固いバネ運動になります。nBが1より大きいと目標値を追越すものの、2より小さければ振幅は0に近づく(収束する)からです。

バネの動きを柔らかくするには、収束を遅らせます。そのため、前回のスピード(nSpeedXとnSpeedY)の値をnA(<1)の比重で加味します。前回のスピードは、加速時には現在値より小さいのでブレーキとして働き、減速時には現在値より大きいのでアクセルの役割を果たします。


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

jellybelly
Åê¹ÆNo.22082
投稿日時: 2005-12-11 23:59
新米
居住地: 神奈川
投稿: 5
使用環境:
WinXP,Flash Pro MX2004
Re: バネ運動について
>>ひろゆきさん
またまたありがとうございました。
「目的地へ近づく(2)」、「目的地へ近づく(3)」では
グラフの動きも目で見えたのでとても参考になりました。
色々な書き方で、バネ運動を得る事が出来るんですね。
どうもありがとうございました。

>>野中さん
詳しい説明をしていただいて、ありがとうございました。
より分かりやすいコードで、それぞれの値がどんな役割をしているのか理解できそうです。
やはりイーズアウトの応用なんですね。

お二方、本当にどうもありがとうございました。
がんばって考え方を理解します!
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ

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