D0310161 音量調節の回転つまみの作り方
Name じん
Date 2003年10月16日 (木) 20時42分
Message 前に何度か質問させてもらっているじんです。

今回は音量調節について質問させてください。
最近たま〜に見かけるんですけど、音量調節を本物のステレオ(コンポ)みたいな感じで丸くなってるものがあるのですが、丸のどこかをつまんで(Drag)ぐるぐる回して音量を調節するんですけど。

使い勝手はあまりよくないとは思いますが、どのようになってるんでしょうか?参考サイトを探したのですが、ストックしておらず今は見つけられませんでした。すいません。

ちなみにぐるぐる回しても音量には限界があるので、ボリューム0〜100までを300度ぐらいの回転で、いったりきたりできればな〜と思っています。
説明が雑でもうしわけないです。よろしくおねがいしま〜す。
Response 01
2003年10月17日 (金) 17時30分> じん 
サイトというか参考になりそうなの見つけましたので、よろしくです。こんな感じで音量調節できればな〜なんて思ってます。
http://ecoecoman.com/flash/01_06_17-circleButton/01_06_17-circleButton.html
Response 02
2003年10月20日 (月) 00時42分> 憲ちゃん 
じんさん、こんばんわ♪
今日(昨日)まで、三重の曽爾高原から青山高原に出かけていて、お返事が遅くなりましたm(_ _)m(^^;
快晴に恵まれて、沢山写真を仕入れてきましたよ(*^.^*)

さて、お尋ねの件ですが・・・


sound_ctr2.fla sound.swf

音量調節の詳しい説明は、過去記事の■音量調節スライドバーについてをご覧いただくとして、
ここのスライドバーの代わりに、回転つまみに置き換えるということでご説明します。

回転つまみの原理は、結構むつかしい算数の理屈(三角関数)でできています。

図の線分OA(水平線)を0度として、線分OAとOBの角度AOBは、
 
 ラジアン角 =atan2{(y2-y1)/(x2-x1)}

という式で求められ、ラジアン角を普通の角度に変換するには、これを(π/180)で割ります。

サンプルの下の部分は・・・
小さい丸を中心点(O点)として右方向(Y=0,X=52)に大きな丸(A点)を配したMCです。
この横一直線の角度を「0度」として、マウスの位置(B点)の角度を求める式をアクションで書くと、

 theX = _parent._xmouse - this._x;
 theY = _parent._ymouse - this._y;
 theRadian = Math.atan2(theY, theX);
 kakudo = theRadian/(Math.PI/180);

こんなようになり、この角度(kakudo)を回転プロパティ「_rotation」に代入すると、

this._rotation = kakudo;

自分自身が、中心点を中心に角度分だけ回転することになります。
そして、このマウスの位置を検出して計算する範囲を大きな丸の中だけに限定すると、
まるで、大きな丸をドラッグして回転させているように見せかけることができるという訳です。

以下、サンプルflaファイルの「回転ボタンMC」レイヤーを参照しながら読んでください。

大きな丸をボタンにして、ボタンアクションとして、

 on (press) {
   sw = 1;
 }
 on (release, releaseOutside) {
   sw = 0;
 }

ボタンが押し込まれている間は、変数swの値を「1」とし、
それがその場で離なされたとき、又はボタンの外へドラッグアウトして離されたとき、
変数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;
   }
 }

とすれば、大きな丸ボタンを押しながら移動(=ドラッグ)するときだけ、角度計算が行われ
自分自身がマウスの位置に回転することになります。

この回転角度の変化に応じて、音量を変化させることができればいいのですが・・・
参考に左下に「kakudo」を数値化して表示していますが、
これを見ていただくと「kakudo」の値は、−180〜180となり、少し工夫が必要です(^^g/~~

実際の音量つまみは、サンプルの右上、flaファイルでは「音量調節つまみ」レイヤーです。
この場合のつまみは、上記の中心点をそのままに、中心の小さい丸や線を描いていません。
スタートのつまみの位置を下90度の位置にし、その位置を0度として
そこから右回りに見かけ300度まで回転できるよう制限。
音量は「0〜100」までの値ですから、角度÷3をボリュームの値として設定したいので、
計算上の角度がマイナスになる部分を補正して、「kakudo」が「0〜300」の値を取れるよう、
工夫しています。
詳しくは、「音量調節つまみ」MCを分析してみてください!

このサンプルは、過去記事の
■2003年08月21日 (木) 17時01分「サウンドイコライザーのPAUSE(一時停止)はどうやるの?」
のサンプルをベースに制作していますので、ちょっとごちゃごちゃしてしまいましたが・・・
他の部分はそちらの記事も参照してください(^^;
Response 03
2003年10月20日 (月) 10時58分> じん 
ありがとうございます〜。
三重県の曽爾高原、青山高原はいいですね〜。僕も一度行ってみたいです。

この音量調節は自分でもいろいろ参考書を見ながらやっていたのですが、どうも三角関数が苦手で・・・
ほんとうに憲ちゃんさんのわかりやすい説明にはいつも勉強させてもらっています。
これからもいろいろ勉強させていただきま〜す。
ありがとうございした。

このページの先頭へ