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

パスワード:


パスワード紛失

新規登録
メインメニュー
メイン
   コーダーズルーム【スクリプト系】
     マウスの動きに合わせて画像を滑らかに動かすには
投稿するにはまず登録を

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
beebee
Åê¹ÆNo.27531
投稿日時: 2006-7-31 5:16
新米
居住地: t o k y o
投稿: 8
使用環境:
.4.7 :
XP:
2000:
マウスの動きに合わせて画像を滑らかに動かすには
はじめまして。
FLASHにて、下記サイトのような動き方をさせるための
スクリプトを教えていただきたく書き込みいたします。

http://www.tidelandthemovie.com/main.html

マウスカーソルを動かすと、
同時に画面中の画像もマウス横方向に合わせてなめらかに動いているのですが、
その画像が幾層にも重なっていて、
それらが互いに微妙にずれたタイミングで移動しています。

こうした、疑似的な奥行きのある3D空間のような効果をしてみたく、
どういったムービー構造やアクション指定を行えばこうした動きを実現できるのか、
サンプルや解説サイトなどご紹介いただけるとうれしいです。

どうぞよろしくお願いいたします。
ひろゆき
Åê¹ÆNo.27554
投稿日時: 2006-7-31 23:37
ちょんまげら
居住地: 東京砂漠
投稿: 4403
使用環境:
10.8.5

Flash Professional CS4/CS6/CC

Safari 6.1
Re: マウスの動きに合わせて画像を滑らかに動かすには
引用:
beebeeさんは書きました:
マウスカーソルを動かすと、
同時に画面中の画像もマウス横方向に合わせてなめらかに動いているのですが、
その画像が幾層にも重なっていて、
それらが互いに微妙にずれたタイミングで移動しています。

まず、複数の画像の動きの前に、
1つの画像をマウスの動きに合わせて動かすことはおできになるのでしょうか?

話はそこからだと思うのですが。

もし、1つの画像ならば、動かすことはできているというのであれば、
そのスクリプトをお書きになることをお勧めいたします。


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

beebee
Åê¹ÆNo.27568
投稿日時: 2006-8-2 1:22
新米
居住地: t o k y o
投稿: 8
使用環境:
.4.7 :
XP:
2000:
Re: マウスの動きに合わせて画像を滑らかに動かすには
ひろゆきさま

ご返信どうもありがとうございます!
説明が足りなくて申し訳ありません。
実はActionScriptを自分できちんと書いたことがなく、
あまりにも漠然と、わー!こんな素敵なサイトどうやって作るのかな。。。
と浮き足立って質問してしまいますた・・・ 反省

多分間違いだらけであると思うのですが
見よう見まねでファイル作ってみまして、下記にUPしてみました。

FLASH TEST SITE
(ステージサイズ:600×400ピクセル)
------------------------------------------

▼やりたいこと:
A,B,Cのムービークリップ基本X座標位置をそれぞれ 0, 300, 600 として、
マウスカーソルを動かしたときにこれらムービークリップのX座標の動く範囲を

A: 0?100
B: 200?400
C: 500?600

の範囲でスムーズに動かしたい。

⇒動きのイメージ見本サイト: TIDELAND OFFICIAL SITE

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

自分でテストで作ってみたファイルの詳細についてですが、
上部分には、位置見本として、X座標をそれぞれ 0, 300, 600
に指定したA,B,Cムービークリップを配置してあります。
このABCを動かそうと自分で挑戦してみたのが下部分のA,B,Cになります。

現在、マウスを動かすとA,B,Cそれぞれが
画面の右端と左端いっぱいに動いてしまうのですが、
これを、意図したX座標の範囲内でしか動かないようにしたいです。
(そうしないと例えばこれらA,B,Cが風景画像であった場合などに
画像端っこまで丸見えになってしまって
画像切れのようになってしまうのを避けたい)
かつ、きちんと最初のロード時には
X座標:0, 300, 600の位置で止まっていてほしいのです。
(現在はリロードかけるたびにばらばら広がってしまう)

下部分のA,B,Cムービークリップに指定した
アクションスクリプトは下記になります。

▼ムービークリップA:
onClipEvent (enterFrame) {
a = 600-(_root._xmouse);
this._x += (a-this._x)/5;
updateAfterEvent();
}


▼ムービクリップB:
onClipEvent (enterFrame) {
a = 700-(_root._xmouse);
this._x += (a-this._x)/10;
updateAfterEvent();
}


▼ムービークリップC:
onClipEvent (enterFrame) {
a = 800-(_root._xmouse);
this._x += (a-this._x)/15;
updateAfterEvent();
}



ステージサイズ横幅が600ピクセルで、
かつマウスに追従ではなく反対に動くから・・・などと
考え、見よう見まねで数字を入れたりしたのですが、
何かアドバイスいただけますと幸いです。

分かりにくい説明で恐縮ですがどうぞよろしくお願いいたします。


- - - - - - - - -
b e e b e e
ひろゆき
Åê¹ÆNo.27587
投稿日時: 2006-8-2 11:03
ちょんまげら
居住地: 東京砂漠
投稿: 4403
使用環境:
10.8.5

Flash Professional CS4/CS6/CC

Safari 6.1
Re: マウスの動きに合わせて画像を滑らかに動かすには
まず、参考サイトの動きとおやりになりたいことの動きは異なるように思いますが、
どちらが実現なさりたいことなのでしょう?

参考サイトは、ステージ幅が600であるならば、x座標300を基準にして、
奥の方が移動距離が短く、手前の方が移動距離が長くなっていように思いますが、
なさりたいことでは、移動距離に関して、
B のみ移動距離を長くしようとされているように思います。

なので、何をなさりたいのか、
第三者にも分かるような説明をされた方が良いように思います。

参考サイト「のような」動きを実現したいのか、
それとも、参考サイトの動きを参考にして、自分で実現したい動きがあるのか、
つかみあぐねています。
後者であれば、参考サイトを引き合いに出すことで、かえって混乱するような気がします。
できるだけ、ご自分で説明をされた方が良いように思います。


A,B,C 3つの動作を一度に考えようとすると、混乱する元なので、
とりあえずは、1つのムービークリップを動かすことを考えるべきでしょう。

また、スクリプトを単にコピー&ペーストしても、
そのスクリプトの意味を理解しなければ、応用することはできないと思います。
例えば、次のスクリプトの意味は理解されていますか?
onClipEvent (enterFrame) {
	a = 600 - _root._xmouse;
	this._x += (a - this._x)/5;
	//updateAfterEvent();	//不要
}


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

beebee
Åê¹ÆNo.27619
投稿日時: 2006-8-2 16:01
新米
居住地: t o k y o
投稿: 8
使用環境:
.4.7 :
XP:
2000:
Re: マウスの動きに合わせて画像を滑らかに動かすには
引用:
参考サイト「のような」動きを実現したいのか、
それとも、参考サイトの動きを参考にして、自分で実現したい動きがあるのか、
つかみあぐねています。

参考サイト「のような」動きを実現したいです。
どうすればそうした動きを実現できるのか、自分なりに挑戦してみたものがこちらです。

何故このようにしたかというと、参考サイトと同じように動かす実験をするために、
ひとまず参考サイトでいうところの、
揺りイスのおばあさんだったり、テーブルだったり、階段だとかの画像に見立てた
A,B,Cというムービークリップを画面に配置してみました。

A(おばあさん)は左端近辺が定位置で、B(テーブルなど)は真中らへん、
C(階段)は右端付近にいつもいるようにしたいということで、
A,B,Cのムービークリップ基本X座標位置をそれぞれ 0, 300, 600としたとして、
それらを定位置近辺で動かしたいと思い、「やりたいこと」に
そのように書かせていただきました。

引用:
▼やりたいこと:
A,B,Cのムービークリップ基本X座標位置をそれぞれ 0, 300, 600 として、
マウスカーソルを動かしたときにこれらムービークリップのX座標の動く範囲を

A: 0?100
B: 200?400
C: 500?600

の範囲でスムーズに動かしたい。

⇒動きのイメージ見本サイト: TIDELAND OFFICIAL SITE

けれど、この考え方自体が間違っているのでしょうか。。。

引用:
また、スクリプトを単にコピー&ペーストしても、
そのスクリプトの意味を理解しなければ、応用することはできないと思います。
例えば、次のスクリプトの意味は理解されていますか?

onClipEvent (enterFrame) {
a = 600 - _root._xmouse;
this._x += (a - this._x)/5;
//updateAfterEvent(); //不要}


▼onClipEvent (enterFrame)とupdateAfterEvent();
フレームが再生される度に下記の処理を繰り返したいと思い
このように入力しました。

▼a = 600 - _root._xmouse;
ステージサイズ600-マウスカーソルの位置数を引くことにより、
マウスカーソルとは反対方向にムービークリップが
移動してくれるかな?と思いこのように入力しました。

▼this._x += (a - this._x)/5;
さらに、マウスのX座標位置とは反対方向に動くようにした
ムービークリップをaという値に置き換えて、
マウスの動きに対して少し遅れて滑らかに動作させたいと思い
このように入力しました。

ロード時に本来ムービークリップがいて欲しい位置の指定方法や
決められたX座標範囲内での動きの制限方法などは分からず、
また、挑戦してみたものの、自分のスクリプト間違いがどこなのか
周りに聞ける人がおらずこちらで質問させていただきました。
見様見真似でお恥ずかしい限りですみませんが
ご指導の程どうぞ宜しくお願いいたします。

- - - - - - - - -
b e e b e e
野中文雄
Åê¹ÆNo.27623
投稿日時: 2006-8-2 16:24
ちょんまげら
居住地: 東京
投稿: 4531
使用環境:
CS5.5 .6.8 Vista Home Premium (SP1)
Re: マウスの動きに合わせて画像を滑らかに動かすには
まず、いっぺんにすべてをやろうとしないことです。

ひろゆきさんもいわれたとおり「とりあえずは、1つのムービークリップを動かすことを考えるべき」です。また、「マウスカーソルとは反対方向にムービークリップが移動」するとか、「マウスの動きに対して少し遅れて滑らかに動作させたい」といった内容は後回しにして、問題となっている「本来ムービークリップがいて欲しい位置の指定方法や決められたX座標範囲内での動きの制限方法」に神経を集中する必要があるでしょう。
引用:
beebeeさんは書きました:
引用:
▼やりたいこと:
A,B,Cのムービークリップ基本X座標位置をそれぞれ 0, 300, 600 として、
マウスカーソルを動かしたときにこれらムービークリップのX座標の動く範囲を

A: 0?100
B: 200?400
C: 500?600

の範囲でスムーズに動かしたい。

⇒動きのイメージ見本サイト: TIDELAND OFFICIAL SITE

...[中略]...
▼onClipEvent (enterFrame)とupdateAfterEvent();
フレームが再生される度に下記の処理を繰り返したいと思い
このように入力しました。

▼a = 600 - _root._xmouse;
ステージサイズ600-マウスカーソルの位置数を引くことにより、
マウスカーソルとは反対方向にムービークリップが
移動してくれるかな?と思いこのように入力しました。

▼this._x += (a - this._x)/5;
さらに、マウスのX座標位置とは反対方向に動くようにした
ムービークリップをaという値に置き換えて、
マウスの動きに対して少し遅れて滑らかに動作させたいと思い
このように入力しました。

ロード時に本来ムービークリップがいて欲しい位置の指定方法や
決められたX座標範囲内での動きの制限方法などは分からず、
また、挑戦してみたものの、自分のスクリプト間違いがどこなのか
周りに聞ける人がおらずこちらで質問させていただきました。


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

ひろゆき
Åê¹ÆNo.27625
投稿日時: 2006-8-2 16:39
ちょんまげら
居住地: 東京砂漠
投稿: 4403
使用環境:
10.8.5

Flash Professional CS4/CS6/CC

Safari 6.1
Re: マウスの動きに合わせて画像を滑らかに動かすには
引用:
beebeeさんは書きました:
参考サイト「のような」動きを実現したいです。

であれば、1つの背景を動かすことをまず実現することでしょう。

ただ、ステージサイズよりも幅広い背景ではなく、
ステージサイズに比べて小さいサイズのものを動かそうとしたことから、
分からなくなっている気がします。

マウスの動きと背景画像 (2)」も参考まで。


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

beebee
Åê¹ÆNo.27626
投稿日時: 2006-8-2 17:22
新米
居住地: t o k y o
投稿: 8
使用環境:
.4.7 :
XP:
2000:
Re: マウスの動きに合わせて画像を滑らかに動かすには
野中さんひろゆきさん

ご返信どうもありがとうございます。
確かに一度にやろうとすると
分かっていない身で混乱するの無理ないですよね。
教えていただいたページ、非常に参考になりそうなので
見ながら勉強してみますね。

どうもありがとうございました。

- - - - - - - - -
b e e b e e
ひろゆき
Åê¹ÆNo.27689
投稿日時: 2006-8-5 4:58
ちょんまげら
居住地: 東京砂漠
投稿: 4403
使用環境:
10.8.5

Flash Professional CS4/CS6/CC

Safari 6.1
Re: マウスの動きに合わせて画像を滑らかに動かすには
とりあえず、サンプルを上げておきますが、
数値などは、ご自分で試行錯誤された方が良いと思います。

サンプル1
サンプル2


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

beebee
Åê¹ÆNo.27866
投稿日時: 2006-8-14 12:36
新米
居住地: t o k y o
投稿: 8
使用環境:
.4.7 :
XP:
2000:
Re: マウスの動きに合わせて画像を滑らかに動かすには
わぁ!ひろゆきさん
ご返信遅れましてすみません、
サンプルまであげていただきまして恐縮です。

ただ今、参考書片手にAS勉強中です。
ASひとつひとつの意味をひもといていって
自分の思うように動くととても感動しますね!
とは言えまだまだ基本的な動きしか書けず知識不足なのですが、
時々こちらで質問させていただきながら頑張ってみます。
どうぞ宜しくお願いいたします。

サンプル本当にどうもありがとうございました!

p.s.
ひろゆきさんのにゃぁプロジェクトすごい勉強になります。
今後も参考にさせてください?(^-^)


----------------
b e e b e e

スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ

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