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
93 Responses to “Mac Style Flash Menu”
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
hey.
its nice of you to write this as3 version of this mac-menu, but;
why even bother to get into the pureMVC framework? try to explain the calculations etc for the menu itself. how about that?
Hi! Maybe this have been asked before but I don’t understand, how can I put personal links to the buttoms? Please help I’m new ar AS3
Oh found it! Nevermind! Thanx!
Help me out please! I used this menu in a website and I want to do a Preloader, but I can´t. Every code I put turns out into ERROR. What can I do?
Vero20,
In main application don’t call the init method. In preloader load the main swf file and call the init method on loaded object.
private function completeHandler(event:Event):void
{
var app:* = event.target.content;
this.addChild(app);
app.init();
}
Something like that.
I thank you Actionscripter for your reply but I’m still lost. Let me tell you what I do:
In the flash document I create a scene before the main content. There I put the preloader. In that same scene I create a new layer for the AS. But then when I want to see it I get ERROR.
So, could you please tell me if it’s not a problem, step by step where should I locate that what you are telling me? Please!!!
Thank you!
This is the script I used:
stage.showDefaultContextMenu=false;
stop();
function progreso(event:ProgressEvent):void
{
var peso:Number=event.bytesTotal;
var carga:Number=event.bytesLoaded;
var porcentaje:Number;
porcentaje=Math.floor((carga*100)/peso);
MovieClip(this).cargador.gotoAndStop(porcentaje);
if(carga==peso)
{
play();
}
}
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS,progreso)
Hello,
I’m new to Flash. I’m trying to port this code into Haxe, and encountered this compile error inside MacMenu::createIcons():
flash.display.DisplayObject has no field getChildByName
This is due to the last two calls here:
var cont = getChildByName(String(i));
cont.getChildByName(items[i-1].id).y = -icon_size / 2; cont.getChildByName(items[i-1].id).rotation = -this.rotation;
Since “cont” is a DisplayObject, it doesn’t have getChildByName(). When I comment out these 2 lines, the code compiled ok. So I wonder how can it work, and what these two lines do. Also, getChildByName() takes a String argument, but I think “items[i-1].id” is a DisplayObject, so how’d that work? Confused.
Thanks.
Hi, I’m a very new flex programmer and I’ll be very happy if anyone could send me an example of the file .as that should have any button on the menu that not appears on the source code.
you know, for any of these
new Settings, label: “Settings”},
{ id: new Blog, label: “Blog”},
{ id: new Forum, label: “Forum”},
{ id: new Shop, label: “Shop”},
{ id: new Support, label: “Support”},
{ id: new Search, label: “Search”},
{ id: new Contact, label: “Contacts”},
{ id: new Trash, label: “Trash”}
Thanks very much! Sorry for my English.
TGG,
sorry, I never worked with Haxe. Can’t help you with this one.
Mario,
I’m not sure if I understand you, but I don’t think it’s possible.
Hi,
I have a problem using the menu. When I import the code in Eclipse, I have an error on the following lines :
{ id: new Settings, label: “Settings”}, { id: new Blog, label: “Blog”},
{ id: new Forum, label: “Forum”},
{ id: new Shop, label: “Shop”},
{ id: new Support, label: “Support”},
{ id: new Search, label: “Search”},
{ id: new Contact, label: “Contacts”},
{ id: new Trash, label: “Trash”}
The error is the following :
1180: Call to a possibly undefined method Settings.
1180: Call to a possibly undefined method Blogs.
etc…
When you put a new Settings or new Blog without parenthesis, what is the type of those objects ?
Do you have an idea to solve that ?
Thanks in advance for your answer.
Xavixxxx
I have an ultimate question,
where are the icons ? in the fla ?
Thanks for your answer.
Xavixxxx
Ok, I have found what I searched.
“new Settings” is an instanciation of a picture which is located in the fla file.
So, in flex, we can use Image object instead.
Hello,
In first, escuse for my bad english.
In second, thanks a lot for this program, it looks really good ! I just used it for creating a video player, with url loading in XML.
I have a problem on the execution of the .swf on my server… In localhost , it work very good, but online the dock miss.
- For sure, i have controlled a lot of time my URLs and all things like that…the dock always miss.
You can see my example here :
http://antoineschirer.com/TD-Flash/TD-Flash_playerVideo.swf
My source is here :
http://antoineschirer.com/TD-Flash/PlayerVideo-Dock_as3.rar
Thanks for your help !
If anyone could just tell me where i can search an error, it could be good because i have any error report with flash player debug
I you can tell me a forum where person know this program when i can ask my question…
Thanks!
Antoine
antoineschirer [at] gmail.com
In the calculation of the ‘dim’ variable in the monitorMenu() method of the MacMenu.as file is the following code that seems very useless to me:
(Math.abs(dx) > span ? 0 : 1)
In this case dx is previously defined as:
dx = Math.min( Math.max(dx, - span), span);
If we consider ’span’ to be 96 (for example) and
we try values of initial dx of: -500, 50, 0, 50, 500 the corresponding values of ‘dx’ new are -96. -50, 0, 50, 96
SO, Math.abs(dx) will always be at most 96…so it can NEVER be “>” (greater than span, since span is 96)….so that first piece of code is useless and could simply be replaced by ‘1′…or simply removed from the multiplication.
Sorry, I just had to point this out because I’ve seen this code in 3 different places thus far and each never version still had that unnecessary check. I’ve gone over this multiple times so I hope I don’t look like an idiot if this is in fact not as I described.
Firstly thanks for this great little menu.
I have reduced the menu to 4 items and I cannot seem to get the icons to link to the correct page…they default to the http:page6.html etc…
the code i’m adding is to the Main.as at line 34:
template.items = [
{ id: new Support, label: "Support", url: "http://www.mysite.co.uk/page1.php"},
{ id: new Search, label: "Search", url: "http://www.mysite.co.uk/page2.php"},
{ id: new Contact, label: "Contacts", url: "http://www.mysite.co.uk/page3.php"},
{ id: new Trash, label: "Trash", url:
"http://www.mysite.co.uk/page4.php"}
];
Is this correct
do i need to alter the settings elsewhere?
Thanks for any help
janice,
You would have to differently handle the onClick event in MacMenu.as . Give it a try.
Hi
I have read through all the posts above and have been wondering if the .swc or something related to this has been developed for FLEX 3?
Thanks in advance
Al
I’m trying to learn a little from this class but I’m really stumped when it comes to the use of Math.PI, Math.cos and Math.sin. I thought those were generally used for trig.
Can you explain the purpose for that math in this class and how it works? Thanks.
Hi,
Comparing MVC code and the simplest one from comments, it’s completely easier to work without PureMVC.
I always read something about PureMVC in blogs, but it sounds soooooooooooo complicated.
So my doubt is why use it?
Which are the advantages?
I’d like to know your personal opinion. why did you chose to work with PureMVC?
Hi Carlos,
In this case there really is no need in using PMVC for such a simple app. It was used just for example of usage.
Real advantage is in large and complex applications. It makes development process faster and app’s more structured.
hi again!
i’m trying to access a menu item at rollover…about the rollover function setup, that’s ok…but how do i access a menu item?
private function handleOver(event:Event):void {
trace(”over: ” + menu.clickedItem); //that’s OK
menu.items[0].label.getChildByName(menu.clickedItem).alpha = 0; //that’s not ok
}
i’d like to change in rollover/rollout the size/ color effect of the icon…but how do i setup the call to the object?
eg: menu.items.getChildByName(var) doesn’t work…
thanks
Hi again Carlos,
I’m not really sure if I understand you, but if you want to access items from top level, you have to make items array public in MacMenu class. Or you can add another public variable to same class - something like “hoveredItem” and in onOver function assign value of hovered item just like in onClick function.
Hope it helps somehow.
ok, thanks.
MacMenu.as =======================
i did what you said. works fine
public var theIcon:Object;
[...]
private function onOver(event:MouseEvent):void
{
theIcon = items[event.target.parent.name - 1];
dispatchEvent( new Event(MacMenu.MENU_OVER) );
}
main.as =======================
menu.addEventListener(MacMenu.MENU_OVER, handleOver);
[...]
private function handleOver(event:Event):void {
toolTip.addTip(menu.theIcon.label);
menu.theIcon.id.x = 100;
}
thanks
hi again!
i got a new problem…i’ve mac menu inside a swf that i load into another swf.
the swf with mac menu works ok, but when it’s loaded by the main swf, the events aren’t dispatched and mac menu’s click, over and out events doesn’t work anymore (even working fine as a separated swf)
do you know why it is happening?
Sorry, I don’t know why it’s happening. It would be easier if I’d look into your source code, but right now I can’t help you.
Hi,
I downloaded the AS3 version and it runs great on its own. Really nice job. However, when I try to use the class in my own project, such as “_dock = new DockAS3();” I get the weirdest compiler errors: “1172: Definition flash.display.DisplayObject:rotation could not be found.” - one of those for each DisplayObject property and for DisplayObject in the DockAS3.as file! What the heck is going on?
Many thanks in advance.
Of course, 5 minutes later I figure out that this is related to the Dock symbol in the library and now I’ve got it working in conjunction with that. So my question is, why is this reliant on having that symbol in the library? Isn’t there a way to access those DisplayObject properties without using a library symbol? (I ask humbly, oh might AS gods!)
And after all that it turns out I should have downloaded Mac_Menu_Simple instead of DockAS3. Sorry to be a bother!
that’s ok…i figured out today…i had a transparent mc into my main swf in rigth front of the mac menu….so it was updating the scale, x,y from enterframe action in macmenu.as, but the events were hidden by this big ocult mc.
i resolved it just setting it to visible = false.
easy, after discovered!