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.

Flash Mac Menu
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”

  1. MMA Ninja on February 6th, 2008 7:59 pm

    looks very nice.

    Can the elements be dynamically added?

  2. actionscripter on February 7th, 2008 6:51 am

    Of course they can.
    This feature is actually in example, just push “Remove Trash” button or “Add Trash”.

  3. nerdabilly on February 18th, 2008 5:00 am

    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.

  4. actionscripter on February 18th, 2008 7:17 am

    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.

  5. nerdabilly on February 19th, 2008 4:53 pm

    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!

  6. Daniel on March 1st, 2008 7:20 pm

    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

  7. actionscripter on March 2nd, 2008 10:11 am

    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.

  8. greg on March 9th, 2008 10:52 pm

    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

  9. actionscripter on March 10th, 2008 6:59 am

    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.

  10. johncmurphy on March 15th, 2008 1:37 pm

    I love design patterns, but don’t you think this is overkill?

  11. actionscripter on March 16th, 2008 7:10 pm

    I think, it’s a matter of opinion.

  12. johncmurphy on March 20th, 2008 5:17 pm

    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).

  13. Full Renju game with source code : Emanuele Feronato - italian geek and PROgrammer on March 25th, 2008 6:50 pm

    [...] forget to visit ActionScript Notes where you will find, among other interesting things, a Flash Mac Style Flash Menu with full source code. Great [...]

  14. Newton on April 8th, 2008 2:22 pm

    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…

  15. actionscripter on April 8th, 2008 3:04 pm

    Newton,

    You can’t do this. It can contain only alphanumeric characters.

  16. Wendy on April 22nd, 2008 8:54 pm

    This won’t work in Flash 8 Pro or lower versions will it?

  17. Wendy on April 22nd, 2008 9:01 pm

    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

  18. Wendy on April 22nd, 2008 9:11 pm

    Oh, but am still curious if it will work in Flash 8 BTW?
    Thanks again,
    -W

  19. actionscripter on April 23rd, 2008 9:18 am

    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.

  20. Evan on April 23rd, 2008 2:48 pm

    I went to http://www.johncmurphy.com/ActionScript.html
    to look for the simple AS3 non MVC version but to no avail.

    Nothing there.

  21. Evan on April 23rd, 2008 4:33 pm

    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?

  22. actionscripter on April 23rd, 2008 5:13 pm

    Evan,

    if you’re creating a new app, you can actually add MacMenu class right on stage. For example -

    package{
  import ...
  public class YourApp extends Sprite{
    private var menu:MacMenu;
    public function YourApp(){
      menu = new MacMenu(yourTemplateObject);
      menu.addEventListener(MacMenu.CLICK, menuClick)
    }
    private function menuClick(event:Event):void{
      trace(menu.clickedItem);
    }
  }
}

    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.

  23. Evan on April 24th, 2008 6:23 pm

    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)

  24. Evan on April 24th, 2008 6:38 pm

    got it: I use this code and it worked

    var note2:Notification = new Notification( ApplicationFacade.ADD_TRASH, this );
    facade.notifyObservers(note2);

  25. Evan on April 29th, 2008 7:34 pm

    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).

  26. actionscripter on April 30th, 2008 8:02 am

    Hi Evan,

    try to download a simple version of this menu. Hope it would be clear to you now.

  27. Evan on April 30th, 2008 2:16 pm

    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.

  28. Alf on May 2nd, 2008 11:23 pm

    very nice..but…how remove “control panel” with add/remove trash etc. ???

    is there option to add GET_URL command to slider menu icons ??

  29. John Murphy on May 4th, 2008 2:59 pm

    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!

  30. actionscripter on May 4th, 2008 5:22 pm

    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.

  31. Alf on May 4th, 2008 7:23 pm

    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

  32. John Murphy on May 5th, 2008 5:21 am

    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

  33. Alf on May 5th, 2008 1:48 pm

    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…

  34. actionscripter on May 5th, 2008 2:34 pm

    Alf,

    that’s for you to download. Good luck!

  35. Alf on May 5th, 2008 5:40 pm

    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 :D :D

  36. Alf on May 5th, 2008 6:39 pm

    Last one…i promise :)

    where i can add something like : target=_blank or target=_self ??

  37. actionscripter on May 5th, 2008 6:52 pm

    Alf,

    navigateToURL(request, “_blank”);

    By the way, F1 button is very useful ;)

  38. Alf on May 5th, 2008 6:53 pm

    navigateToURL((request), “_self”); i’ve done it…

    ooops you wrote an answer…thank you :D …Master

  39. Jose Luis on May 6th, 2008 6:51 am

    Very Cool and thanks for the source code

  40. lukas on May 15th, 2008 12:57 pm

    Caould any one explain what those magin number does?
    return (icon_min - 16) * (240 - 60) / (96 - 16) + 60;

  41. Carrie on May 15th, 2008 9:01 pm

    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!

  42. kefio on May 23rd, 2008 11:29 am

    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

  43. actionscripter on May 23rd, 2008 11:39 am

    Hi kefio,

    Go to File -> Publish Settings.
    Under the Formats tab choose where to save your swf file.

  44. Fellowscripter on May 24th, 2008 4:23 pm

    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!

  45. Damien on May 28th, 2008 2:16 am

    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

  46. Marcelo on May 30th, 2008 12:06 am

    any chance to have a working component for Flex 3?

    Thanks!!!

  47. actionscripter on May 30th, 2008 6:10 am

    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.

  48. actionscripter on May 30th, 2008 6:11 am

    Marcelo,

    Sorry, no plans for Flex 3 component yet.

  49. Marcelo on June 12th, 2008 6:45 pm

    I’m having problems loading the swf of menu in Flex. I try using others SWF and works fine. Any clue?

  50. iTamt.cn » Blog Archive » MacMenu + PureMVC on June 13th, 2008 1:22 am

    [...] ?? [...]

  51. actionscripter on June 13th, 2008 5:59 am

    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.

  52. MechanisM on July 8th, 2008 1:46 am

    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..

  53. hiroshi on July 23rd, 2008 5:38 am

    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…

  54. shahi on August 6th, 2008 4:15 am

    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

  55. actionscripter on August 6th, 2008 5:54 am

    shahi,

    Check ‘ApplicationMediator’ class. There is a function ‘alignContent’, where you can modify x and y parameters.

  56. shahi on August 6th, 2008 8:54 am

    Thankx alot actionscripter!!

    Nice work!

    Shahi

  57. D-pace on August 8th, 2008 5:22 am

    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

  58. actionscripter on August 11th, 2008 7:16 am

    D-pace,

    I would be more helpful, if you would e-mail me your source.

  59. D-pace on August 14th, 2008 5:41 am

    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

  60. Amardeep on August 20th, 2008 10:38 pm

    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)

  61. Amardeep on August 20th, 2008 10:58 pm

    BTW im using the normal code which i downloaded from this site. In AS3…

  62. Amardeep on August 20th, 2008 11:30 pm

    I mean im using the code from that John Murphy website..

    http://www.johncmurphy.com/Dock.zip

Leave a Reply