Case Study: A kind of Radial Menu

這個Actionscript2.0的程序有它的名字，在Activeden上面是We-Love-Mp3。

我對它的這個徑向菜單的做法蠻有興趣。

我需要選擇一個切入點來進行研究學習。這次我先不從代碼入手，而是從觀察運行時的狀態入手，因為Adobe針對As2.0做了一個很好用的debugger，它的功能相似于眼下針對HTML和Javascript的調試器，比如Firebug或者Chrome自帶的檢視器。

好，在Flash Pro CS3里，打開源文件，在菜單里選擇Debug->Debug Movie。在彈出的這個介面里，需要點綠色的播放按鈕來開啟調試：

於是程序被執行，左手邊有一個以樹狀結構顯示的列表，這個列表里的條目即是所有的目前在display-list中的可視元素。它們都是displayObject的子類，右下方的窗口則顯示列表中被選中的對象的所有屬性，及其當下的值，這個調試器最好的地方在於，這裡你可以修改這些值，而修改后的效果會即時反映在程序里。

好，现在我们来做一个实验，假如你并不知道左手边的列表里的对象实际上对应着右边的运行着的程序中你所见到的画面中的哪一个元素，那么你可以这样做，从列表中选择一个对象，然后修改它的属性来影响它的外观，比如位置大小颜色等属性，然后看看舞台中哪一个元素变化了：

刚刚，我把player1对象的_xscale值从100修改至300，这样它的宽应该变成是本来的三倍。程序中的第一个专辑封面的宽相应变化了，于是我们知道了，原来它就是player1。

通过简单的浏览源码，可以发现：首先，菜单分两级，第一级别是专辑，当单击某个专辑时，它的子菜单，也就是第二级菜单会打开，显示属于该专辑的歌曲列表，而点击该歌曲会导致播放它。在As代码中，所有这些对象都被放在一个叫player的影片剪辑中，它相当于这个菜单的顶层容器。而代表专辑的影片剪辑的名字都是player<数字>，数字从0开始，而player0代表的是永远出现在最下边的那个按钮，它相当于菜单的开关，至于代表歌曲的影片剪辑，在as中的名字都是music<数字>。

现在我们想知道的是：这些专辑的排列规则是怎样的，在菜单打开时，而同时又没有子菜单打开时：

刚刚我们已经见到最上面那张Birdy的专辑就是player1，那么以此来推，紧接着下面那个Maximilian的应该是player2，而现在我们使用刚刚介绍的debugger来观测下这五个影片剪辑的位置相关的属性值：

player0的位置：

它永远都是保持这个位置不变。

下面是在初始化后，也就是菜单还没打开时，player1的位置：

这是菜单打开后它的位置：

好了，我不再举例了，用这种方式我们得知五个player在菜单打开时的位置：

	alpha	rotation	x	y
Player1:	100	10	62	-300
Player2:	100	8	53	-240
Player3:	100	6	46	-180
Player4:	100	4	41	-120
Player5:	100	2	38	-60

如果我们倒过来这张表，按照从player5到player1的顺序，再结合代码中相应的操作，就会比较容易找出递增的公式了：

对于x坐标值而言，起始值

X[0] = 38

X[n] = X[n-1] + (n * 2) + 1

y：

Y[0] = -60

Y[n] = Y[n-1] - 60 或者说 Y[n] = -60 * n

rotation：

R[0] = 2

R[n] = R[n-1] + 2

另外，当菜单闭合时，所有player的位置都变成：X=25, Y=600。

至于music1~music5的位置，它们有些特别，首先它们被放置在列表中时，它们被和player1~player5一并考虑，即是说，一个music的X与Y值仍然基于它前面的元素来计算，而这个元素既可能是music，也可能是player。只是它的增长参数不同：

X[n] = X[n-1] + (n+1)

Y[n] = Y[n-1] - 30

至于rotation，则与player的一样，都是以等差2递增。

所以说，作者以一种线性的方程式来模拟圆周上的点的排列。