あなたが今、抱えてる悩み カンドウコーポレーションが解決します お悩み一掃!!
STAFF INFORMATION

フラッシュ・ラボ 点と点を線で結ぶ処理 [柳谷 武]

スタッフ紹介 >> 柳谷 武 >> フラッシュ・ラボ >> 点と点を線で結ぶ処理
<< フラッシュ・ラボに戻る
[点と点を線で結ぶ処理]line
たった2行のスクリプトで!!
マウスとオブジェクトの中心を線で結ぶ処理です。
マウス操作
点と点を結ぶ処理

オブジェクトの中心点から伸びるラインが、目標座標とピッタリ結びつく処理です。実は、とっても簡単な処理で、オブジェクトを設定した後、X座標・Y座標1行ずつ、計2行書くがけで完成します。
考え方としては、オブジェクトの中心座標と、目標座標(マウス座標)との距離差の値オブジェクトの幅として使うことで、見た目が一致するというものです・・・。とりあえず、作り方の手順をおってみましょー。

[ スクリプト - ツクリカタ ]

[1] まずはじめに、 "line"というインスタンス名を付けたムービークリップオブジェクトを作る。

[2] 斜め45°のラインをオブジェクト内に作る。

[3] 始点をオブジェクトの中心にして、ラインが右下に伸びるような形に配置する。

[4] ラインの長さを設定する。オブジェクトの中のラインデータを幅を100pixel、高さを100pixelにする。
続いて、ラインの太さを設定する。
太さの設定:[極細線]

[5] ループ処理を作る。
gotoAndPlay( _currentframe - 1 )または、onClipEvent( enterFrame ){}を使う。

[6] ループ処理の中に下の2行を書いたらマウス座標とオブジェクトの中心点とを線で結ぶ処理のできあがりです。

_root.line._xscale =
_root._xmouse - _root.line._x

_root.line._yscale =
_root._ymouse - _root.line._y

[POINT 1]
なぜ100pixelにするのか?

オブジェクトのスケール変更の設定(_xscale)は単位がパーセントなので、100%=100pixelにすることで単位を気にしなくてよくなります!
_width、_heightはpixel単位ですが、使った場合マイナス値を受け付けないので不具合が起こります。

[POINT 2]
なぜ極細線にするのか?

基本的には、オブジェクトのスケールパーセントによって線幅も太くなったり細くなったりしてしまいます。
極細線は、細いかわりにあまり拡大に影響しない設定です。
だから、どの向きでも同じ太さになります。


[ スクリプトの意味 ]
 _root._xmouse - line._x ・・・ 始点と終点座標の差を
 line._xscale ・・・ スケール幅の値にする

[ 例 ]
X座標点と点の差が 60pixel のとき、line._xscaleは 60% になる。

[ ヒント ]
ぱっと見、まだちょっとわからない方にヒント。

ラインのかわりにボックスオブジェクトで作ったモノ >>


<< フラッシュ・ラボに戻る