D0401281 大円の中を小円が滑らず転がるScript・・・
Name ban
Date 2004年01月28日 (水) 09時09分
Message 憲ちゃん,はじめまして。
Flashを学び始めて数ヶ月なのですが,
このサイトでいろいろ勉強させてもらっております。
今,ActionScriptについても勉強しているところなのですが,
次のようなムービーが作れないかと苦闘しています。
「大きい円の中に小さい円が接しています。
この小円が大円を滑らないように転がって動くように
したいと思います。さらにこの小円はドラッグによって
転がるようにできればいいと思っています。」
以上のことをFlashにてどのように表現したらよいか悩んでおります。
何かアドバイスをいただければ幸いです。
よろしくお願いします。
Response 01
2004年01月28日 (水) 23時00分> 憲ちゃん 
banさん、はじめまして♪

>小円が大円を滑らないように転がって動くように・・・
どんな転び方か?というのが文章だけではよく分からないのですが(;^_^Aアセ
仮に以下のような感じとして・・・


kaiten03.fla ←制作ファイル、右クリックして「対象をファイルに保存」!

◎左上は、大円(直径180)と小円(直径60)の2つのMCを配置して、
それぞれのMCに以下のクリップアクションを記載しただけです。
「大円MC」のインスタンス名を「daien」として・・・

 onClipEvent (load) { ←(大円MCが)読み込まれた最初に
   kakudo = -4;    ←変数kakudo に「-4」を代入(回転方向と速度の設定)
 }
 onClipEvent (enterFrame) { ←フレームレートごとに以下を繰り返す
   this._rotation += kakudo; ←自分の回転角度を変数kakudoの値だけ回転
 }

「小円MC」

 onClipEvent (load) { ←(小円MCが)読み込まれた最初に
   hiritu = 180/60; ←変数hiritu に大小の円周の比率を代入※
 }
 onClipEvent (enterFrame) { ←フレームレートごとに以下を繰り返す
   this._rotation += _parent.daien.kakudo*hiritu;
 }     ↑「daien」内の変数kakudo に変数hiritu倍した値だけ、自分を回転
※小円と大円はそれぞれの円周で接しているので、小円が大円を1周するとき、
「大円の円周(180×円周率)÷小円の円周(60×円周率)」回、回転します。
分子と分母の円周率は相殺されるので「180÷60」としています。

◎右上は大円を固定して、その中で小円が回転するものですが、
小円が大円に沿って回転させるためには、小円MCを入れた別のMCを作る必要があります。
それが以下の「小円回転」MCです。



サンプルは「小円回転MC」の中心点から「58px」真下の位置に「小円MC」を配置しています。
そして「小円回転MC」の中心点と「大円MC」の中心点が重なるように配置して、
「小円回転MC」を回転させれば、小円が大円の内側をぐるぐる回ります。
「小円回転MC」のクリップアクションは・・・

 onClipEvent (load) {
   kakudo = 4;
 }
 onClipEvent (enterFrame) {
   this._rotation += kakudo ;
 }

内容は、上の「大円MC」と同じです。
「小円回転MC」の中に配置した「小円MC」のクリップアクションは・・・

 onClipEvent (load) {
   hiritu = 180/60; ←円周比率の考え方は上記と同じ
 }
 onClipEvent (enterFrame) {
   this._rotation = -(_parent._rotation * hiritu);
 }

※ここの「_parent._rotation」というのは、自分のひとつ上の階層のMCの回転角度の意味です。
つまり「小円回転MC」の現在の回転角度。
それに円周比率倍した値で、逆回転(値にマイナス)させればいいというわけです(^^g/~~

◎下の「ドラッグで回転」は少し説明がややこしくなります(;^_^Aアセアセ・・・

右上の「小円回転MC」の中でさらにレイヤーを追加して、
「小円MC」の上に同じ大きさの透明ボタンをおきます。
MC名は「ドラッグ小円MC」として別途作成しています。



「小円MC」に記載するクリップアクションは、上記と同じです。
「透明ボタン」のボタンアクションは・・・

 on (press) { ←ボタンがプレスされたら
   sw = 1;  ←変数swに「1」を代入
 }
 on (release, dragOut) { ←プレスされたボタンが離れるか、ドラッグアウトしたとき
   sw = 0;  ←変数swに「0」を代入
 }

そして、シーン編集画面で、「ドラッグ小円MC」にクリップアクションで・・・

 onClipEvent (mouseMove) {
   if (sw == 1) {
     theX = _parent._xmouse - this._x;
     theY = _parent._ymouse - this._y;
     theRadian = Math.atan2(theY, theX);
     kakudo = theRadian/(Math.PI/180);
     this._rotation = kakudo-90;
   }
 }

マウスが移動し透明ボタンが押されているときだけ、ドラッグできるようにしています(*^.^*)
これの詳しい理屈は過去記事の■音量調節の回転つまみの作り方を参照してください。
(^^;
Response 02
2004年01月28日 (水) 23時37分> ban 
お〜お!まさしくこれです!
これを表現したかったのです。
憲ちゃん,こんなに詳しくご回答くださり,本当にありがとうございました。
実は私,とある高校で数学の教師をしておりますが,
インタラクティブなWeb教材として,Flashに大きな可能性を感じております。
今からもっとFlashを勉強して,そのような教材を作っていけたらと思っております。
今後ともいろいろ質問させていただくと思いますが,ご指導のほどよろしくお願いいたします。多謝
Response 03
2004年01月29日 (木) 10時59分> 憲ちゃん 
数学が苦手な生徒は、それを学ぶ目的が理解できないからだと思います。
無味乾燥な数式が目に見える形で動き出すときの感動を一度味わうと、
次々に興味がわき、教えなくても自分で勉強するようになることでしょうね(笑)
ban先生のおっしゃるように、Flashをそのための教材として活用する効果は絶大と思います!
興味を持った子どもの創造力には計り知れないものがあります。
きっとban先生の最大のライバルは、教え子たちになるのでしょう(笑)

このページの先頭へ