AS3 Mac Style Menu Download Here: http://www.adambergman.com/as3/macMenu.zip
AS3 Mac Style Menu Demo Here: http://www.adambergman.com/as3/macMenu.html
It’s been a while since I’ve posted on Kirupa, glad to be back :). With AS3 available in Flash now I’ve decided to wet the old whistle by converting a great menu example (Mac OS X dock bar) to AS3 so I can use it in Flex with the new flex component kit available on Adobe Labs (here).
The original code (MX 2004/AS2) can be found here. Props to J.R. Graphix (not sure of the real author’s) for doing such a great job on this little script. I’m horrible with the higher level math stuff so this was never something I could have done on my own. He/she did a great job with nailing the look and feel of the OS X dock bar.
Now for some boring background info: My problem was that after finally convincing a client to go with Flex for an RIA I’m developing (I know, can you believe I had to convince them??), they come to me the next day and say they want a menu that looks like the mac bar - but what luck, Adobe Labs releases the beta version of the Flex Component Kit for Flash CS3 and I’m off and running.
So, after a long night and lots of coffee, I have come up with the attached files. I’d like for the community to check them out and tell me what they think. I would say it’s about 75% finished (I’m hoping :P). I haven’t tried this out in Flex as a component yet cause I know it needs a little more work. I thought I’d get some feedback before I went any farther. I have added a few features to the class - documented below, and there are still some things I’d like to add and a few questions I have (also below).
After it’s all finished I plan on contacting JR Graphix so they can update their page with the new source and people can use this for Flash CS3 and Flex freely - by the results on google this seems like something a lot of people want to have.
Before I talk about the code, I would really like to thank Senocular for doing such an AMAZING job documenting changes in AS3. I probably stole a gig of bandwidth on his site last night. I would just like to publicly state how much of an asset he is to the flash community and my undieing love and devotion to him (oops, did I type that :))
New Features
[LIST]
[]Dynamically Load Images - previously you had to import any button into the library and make it a movieclip to load it in the menu bar
[]macIcon class - the main class (macMenu) loads buttons as instances of a class called macIcon that extends sprite. By adding to this class you can throw in all sorts of custom events or effects.
[/LIST]
Problems I Encountered
[LIST]
[]The Tray - I had to disable the tray feature from the AS2 version because I was having depth problems with the new display list in AS3. If anyone who is more familiar with depths would like to take a look that would be great. My problem is that the createTray(); function is called after the createIcons(); function so when the addChild in createTray is called, it adds it on top of the Icons. I did try reversing this (and moving the width calculation in to the invokeMenu() function before it was called but that added some errors to the for loop that parses through each icon when changing sizes. To fix that i started for(i=1) instead of for(i=0) but I got an error. I decided I was finished debugging code and just commented out the tray functions ;).
[]XSprite - I created a small class that further extends Sprite to fix a bug where the original author added a property to the MovieClips called x (vs. _x) to keep the original x position. This further complicated things since in AS3 you use x now instead of _x. I renamed the old “x” property to keepX so that’s all that is in the XSprite class. If someone has a better way of accomplishing this please let me know (adding a custom property to an existing class at runtime w/out extending the class).
[*] menuInvoke - Somewhere along the lines, I decided to replace the constructor function with this function so that I could just call it in flash after I setup the object. Eventually this will be replaced by the constructor so when the class is called, it’s just created. I think this may cause some problems with the code the way it is now so I’ll tackle that soon.
[/LIST]
Flex
Ideally, in Flex, something like the below would amazing. I don’t think I’m quite there yet so I’m looking for some tips suggestions on how to accomplish this. Like I said earlier, I haven’t even loaded the SWC into flex so it may or may not be as hard as I’m thinking. Here is some pseudo Flex MXML:
<mx:macMenu>
<mx:macIcon iconFile="btn.png" click="{someHandler}">
<mx:macIcon iconFile="btn2.png" click="{anotherHandler}">
</mx:macMenu>
Feel free to download this code and use it as you want, it’s definitely a work in progress but I figured the faster I got it to the community the faster it would become complete. If you do use this code or decide to post it elsewhere please give credit to the original authors of the AS2 files.
