Mac Style Flash Menu
Posted on February 6, 2008
Filed Under ActionScript, Flash, PureMVC
I always wanted to re-create Mac OS X menu in flash, so considering that it’s a bad practice to invent a bicycle, I started to look for some examples, to see what others might have done. As expected, I found a bunch of shitty ones, but there always is a light in the end of a tunnel. Finally I found a really nice one at http://jrgraphix.net/. Link to post and example is here. It’s an ActionScript2 class that looks really nice, so I took it as a base for my AS3 version. Click on the image below to see the example.

As you see, I refactored the class so it’s properties could be dynamicly changed. The example is build on PureMVC framework, so handling events like updating properties of menu or listening for it’s events is pretty simple.
There is actually a little bug, that I was too lazy to fix. It’s when mouse is over the menu, and then exits swf area, menu doesn’t return to it’s initial state. No big deal.
So feel free to download and examine the source. Maybe someone can create a cool application out of this. For any questions, bugs, or whatever else just contact me.
Comments
62 Responses to “Mac Style Flash Menu”
Leave a Reply
looks very nice.
Can the elements be dynamically added?
Of course they can.
This feature is actually in example, just push “Remove Trash” button or “Add Trash”.
Hey, this is a nice menu. Any tips for how to get it running in Flex? I’d love to use it but I can’t seem to get it running under Flex 3. Thanks.
Hi nerdabilly,
Each icon has it’s own symbol in library, in other words each icon is a class. As you might have noticed, I’m pushing a new instance of every class in items array. So in theory, to use it in flex, you would have to create a separate class(or mxml component) for each icon that would embed or load it’s image. So play around with it, might work.
Thanks actionscripter.
I figured that part of it out, the code all works great, it just needs to be tweaked a bit to get it to play nice with Flex. I’m about 25% of the way there so I’ll let you know what I did and how if I get it working!
This looks like a great app, but when i load it in flash andpublish it i get 3 errors -
1017: The definition of base class Facade was not found.
1045: Interface IFacade was not found.
1020: Method marked override must override another method.
do i have to do something to make the app work?
thanks
Hi Daniel,
This example is build on PureMVC framework. It is included in archive. So to get example working you have to include it in your class path. Go to Edit -> Preferances -> ActionScript -> ActionScript 3.0 Settings -> Add new path -> Browse to PureMVC folder.
Should be just fine.
Hi,
Really Nice source, thanks to share that one.
I follow the instruction you gave before to edit in good folder but when I open it, It seem there are a stop missing somewhere because the animaton flashing.
I would like to know if it’s possible to have a title in RollOver or if it’s already an include option somewhere in a code?
Thanks in advance for you answer.
greg
Hi Greg,
Be sure to include PureMVC framework, if something is flashing.
To have a title in RollOver is possible, but not included in this code. You can either try to add a TextField to each icon symbol and on rollover add text to it, on rollout remove it, or dynamicly create a text field somewhere else and position it to each icon.
Play around with it, this code is a good start point to create anything you want.
I love design patterns, but don’t you think this is overkill?
I think, it’s a matter of opinion.
Agreed, you can structure it anyway that makes sense.
In the example you’ve given, the actual Mac dock effect is in the MacMenu.as file. Since the dock effect is really just the application of a physics formula to an array of objects, I prefer to structure it as a single class that can either be incorporated directly into an application or as part of a Builder design pattern.
I’ve posted an AS3 version of the same jrgraphix.net code on my website:(www.johncmurphy.com/ActionScript.html).
[...] forget to visit ActionScript Notes where you will find, among other interesting things, a Flash Mac Style Flash Menu with full source code. Great [...]
Hi, someone can explain to me how do I set a mc instance with numbers?
The flash don´t let me do it.
I´m so noob…
Newton,
You can’t do this. It can contain only alphanumeric characters.
This won’t work in Flash 8 Pro or lower versions will it?
I am thinking of upgrading to latest version of flash - is this menu dynamic??? That is to say if I have a folder of images that will change periodically do I have to hard code each icon or does it dynamically determine how many photos are in a folder and use them all? Thanks bunches, -W
Oh, but am still curious if it will work in Flash 8 BTW?
Thanks again,
-W
Hi Wendy,
It won’t work in Flash 8, only CS3.
About your second question - all the elements in menu are specified in array, so it doesn’t really scan for images or something. You can dynamicly add or remove elements via array, however menu items should be predefined classes.
I went to http://www.johncmurphy.com/ActionScript.html
to look for the simple AS3 non MVC version but to no avail.
Nothing there.
More specifically, I am trying to implement this os style nav bar to call up different slide movie clips. However the mvc code is throwing me off. I see an onClick listener function in the MacMenu class in the application.view.components package but am not sure how to tie that event to stuff on the stage.
Should I be using the non mvc code instead?
Evan,
if you’re creating a new app, you can actually add MacMenu class right on stage. For example -
That’s non mvc usage of this class. If it’s not what you need, just e-mail me, or maybe send me you code, and I’ll try to help you.
thanks actionscripter,
I seemed to have gotten some things working with the mvc pattern.
However, how would I activate the “handleTrashAdding” listener function from the main class?
I wish to have my own button in the Main applicatio nclass that adds an icon when clicked. (non-Panel)
got it: I use this code and it worked
var note2:Notification = new Notification( ApplicationFacade.ADD_TRASH, this );
facade.notifyObservers(note2);
I went backwards and am now having difficulty. Tried using the non-mvc usage that actionscripter proposed but it seems the MacMenu constructor requires a TemplateProxy argument which I am having difficulty with - can’t get the TemplateProxy.getData() in my main document class.
Tried instantiating ApplicationMediator in my document class but to no avail.
Was there not a non-mvc port of this somewhere?
(this is a total newb comment but I am growing a strong distaste for mvc).
Hi Evan,
try to download a simple version of this menu. Hope it would be clear to you now.
Hi Actionscripter,
Got the simple version of the menu!! Much, much easier and life is all good now.
I wish one day to be skilled enough to understand MVC, but, alas I am not there yet.
very nice..but…how remove “control panel” with add/remove trash etc. ???
is there option to add GET_URL command to slider menu icons ??
Evan,
Sorry.
http://www.johncmurphy.com/ActionScript.html was down for several days, but I have put it back up.
It looks like the AS3 version that actionscripter posted above is much better than mine anyway, so in order to contribute to this project I will try to create and post a tutorial on how to use this code in a project.
Look for it soon!
Alf,
Everything you ask can be done. For example, a few comments above you can find a simple version without a “panel”. And GET_URL, I think you can find out such thing by yourself.
yes i found “simple version” and make over for my needs.Looks great..works fine..but i’m newbie to AS3 and cannot figure out how to assign different url’s to each icon…i have tried almost everything…
i done it for version from http://jrgraphix.net/. but yours look much better so i wanna use yours….can you write sample code how to do it ?? thanx
Alf,
The items[] array is already all set up for you to add your own url’s to the icons. Just change the label, or add a new key:value pair for the url’s. Then you can navigate to the url from within the onClick() function using the value of items[event.target.parent.name-1].label
i was tying almost everything i know but as i said before i’m total newbie in AS3 and still get errors…
TypeError: Error #1010: A term is undefined and has no properties.
at MacMenu/::onClick()
but there are “navigateToURL(link);” in the onClick … and on the top are “private var link:URLRequest = new URLRequest(’label’);”
help please…
Alf,
that’s for you to download. Good luck!
YEAH !!!
thats it…and i wont do by myself…i was looking in wrong places of this code to do this…
thank you very very much
can i obey you ??
:D 
Last one…i promise
where i can add something like : target=_blank or target=_self ??
Alf,
navigateToURL(request, “_blank”);
By the way, F1 button is very useful
navigateToURL((request), “_self”); i’ve done it…
ooops you wrote an answer…thank you
…Master
Very Cool and thanks for the source code
Caould any one explain what those magin number does?
return (icon_min - 16) * (240 - 60) / (96 - 16) + 60;
Would anyone like to share how to use this in a Flex app. I read the comment about making image mxml files but an not sure how to proceed. I’d love to see some code.
Thanks!
Hi,
i’ve tried to download the source but when i try to run it in CS3 it tells me that:
“Error creating flash movie file.
Be sure the destination file is not read-only or opened by another application.Also check tha the file name is not too long”
No application is pointing to this file and it is not read only. I have tried from different pc but no way.
Can you help me?
thanks in advance.
Kefio
Hi kefio,
Go to File -> Publish Settings.
Under the Formats tab choose where to save your swf file.
As a fellow designer and code writer I love this. My skills are not quite at this level. Picking apart the code has really helped me to advance. Thank you. I noticed when looking at your example that the switch value for the combo box “Right” is spelled “Rigth”. It would bother me if it was mine so I thought you would like to know. Again Thank you for the code source. Great learning tool!
Hi,
This may be a silly question but how to I go about using this menu to load images into a movie clip? I am new to AS and don’t know what I am doing really.
Nice work tho it looks really good.
thanx alot,
Damien
any chance to have a working component for Flex 3?
Thanks!!!
Damien,
You can find how to load images into a movie clip in Flash Help (F1).
It shouldn’t be challenging to figure out yourself.
Anyways, I’ll try to setup an example for you, but I can’t promise anything because I’m really busy lately.
Marcelo,
Sorry, no plans for Flex 3 component yet.
I’m having problems loading the swf of menu in Flex. I try using others SWF and works fine. Any clue?
[...] ?? [...]
Marcelo,
In menu everything that’s inside the Main function move to another function, for example init(), but do not invoke it from Main, and compile. From the movie where you load the menu on complete handler add the following lines
var menu:* = event.target.content;
this.addChild(menu);
menu.init();
So, in general when you’re loading any other PMVC app, you have to initialize the facade from the movie in which you load.
That’s also how preloaders are made for PMVC applications.
Hello!! Someone maybe can post a source code of how to use and integrate this menu into flex mxml?
I mean not just as …I need mxml with this menu example..
sorry for my bad english and I’m new in flex also..
hey, I’m wondering what to do with this download you have linked…where am I supposed to put this and how does it works? I really want an application like this, but I’m not computer literate as you guys…please help…
Hello,
Can any one tell me how to position the menu at the middle of the page? Right now it is at the bottom and i want it somewhere in the middle.
Thanks!
Shahi
shahi,
Check ‘ApplicationMediator’ class. There is a function ‘alignContent’, where you can modify x and y parameters.
Thankx alot actionscripter!!
Nice work!
Shahi
Hello Actionscripter,
I am using the old version of this resource(AS 2 version from-http://jrgraphix.net/) and i have changed all the icon movieClip into buttons and put some flip animation(insert movieclip) on the down state but when i click on the button icon the animation on the movieclip is not visible. Is it possible to animate the icon when user click on it something like changing the color of the button………. some simple animation.
Please Help !!
Thank u.
D-pace
D-pace,
I would be more helpful, if you would e-mail me your source.
How i can send u my source code? Can you please send me ur email id?So that i could send my source and details.
Thanks
D-pace
I tried and tried, but i cant seem to get any events happening when i click the icons.
How and where do i have to set any code to do anything with the icons (click prefrence icon - and make whole dock move down out of screen)
BTW im using the normal code which i downloaded from this site. In AS3…
I mean im using the code from that John Murphy website..
http://www.johncmurphy.com/Dock.zip