05 July 2008

Flash Scale Menu Explained

It seems that my expectations were to high when I thought this post is enough to explain how Flash Scale Menu works. One visitor, Francesco has convinced me indirectly to post complete Flash scale menu tutorial. Please, read first just mentioned posts to find out what we are talking about here.

Open new Flash document. Create few menu items (movie clips). For the sake of simplicity, let's say we have 5 items. Name movie clips instances item1, item2, ..., item5. You can name movie clips whatever you like, it doesn't matter. In the first and only frame of main Timeline enter 18 lines of code. This onEnterFrame is the only function needed for menu to work properly.

Now let's talk math. We use common math formula to find d - distance between mouse pointer and center of menu item. Dx is radius of circle inside which xscale and yscale properties of menu item change. Amount of change is equal to subtraction dx-d, thus when d=0 and mouse pointer is in the center of menu item, scale is biggest. In this case 100+(70-0)=170. When mouse is on the circle itself, change is 100+(70-70)=100, which means scale is 100 - no change! You can experiment with different values for dx. It depends on dimensions of your menu items movie clips.

flash scale menu explained

Remember that registration points of menu item movie clips have to be centered. That's all. Share this explanation/tutorial if you like it. Thanks.



template by blogger templates