Flex – (MacOs like) DockBar component

actionscript 3, Components, Flex

Some week ago for a project I was looking for a flex dockbar component. I found some but, the missing and most requested feature from users (and me too) was the ability to add items to the dockbar simply adding a mxml node so that click and rollover handlers, data bindings etc. could be easily implemented:


I could not find anything similar, so I wrote this component.

I did zillions of experiments like this in the past, but I tried to do it easy to set up, and tried to use the less code possible.
I found suprisingly easy to build it upon the HBox and Image components. Maybe not the most sofisticated implementation but so damn simple…

With some good ideas flex can be really easy to code.

See it moving (just move the mouse to the last 20px on the bottom):

Example #1 – Basic implementation
Example #2 – Basic implementation applied to a ViewStack
Example #3 – Tooltip, handcursor, rollover effects etc.

I need a component to place at the bottom of the screen so I hardcoded some params to place it but can be very easily tweaked.

Every example has view source enabled so just right click on it to view the code.

Here’s the code from example #1:


Do not remove the menuLabel and the activationArea elements. They was coded inside the actionscript of the component but then I moved them out to the mxml to make them easier to customize.

The activation area is the area to rollOver for the component to be opened (here 20px high… maybe 30 or 40 would be more confortable). The height of the dockbar instead is 100px and is the area to rollOut to make the component close.
Other parameters such minSize and maxSize are quite self-explanatory and limits the size of the icons.

The icons are embedded clips from a swf file. The registration point of the icons must be at the bottom-center.

Ths icons sizes are calculated based on horizontal and vertical distance. Many values are still hardcoded but could be easily parametrized.

You can try changing the backgroundColor and backgroundAlpha of the dockBar and the activation area to better understand how does it work.

Just leave a comment if you like it.



  1. alex  •  Jul 17, 2008 @12:49 pm

    where to download?

  2. Pierluigi Pesenti  •  Jul 17, 2008 @1:27 pm

    just right click on one of the three examples and click “view source”. A link to the zip is on the left frame.

  3. alex  •  Jul 17, 2008 @7:32 pm

    i think you realeased it without viewSource option in compiler because there isnt any viewSource in the example.
    otherwise you could add a link in your post to easy download.


  4. Pierluigi Pesenti  •  Jul 17, 2008 @11:30 pm

    Ops :-P

    Viewsource is enabled only in the first example.
    But from there you can see all the three files.


  5. Og2t  •  Jul 28, 2008 @5:14 pm

    Hi Pierluigi!

    That’s excellent, thanks! I really like how you wrote dock mechanics in a few lines! It could be just so simple, hard to believe!

    Cheers, Tomek

  6. Pierluigi Pesenti  •  Jul 30, 2008 @8:32 am

    =) Thanks Tomek

  7. batchass  •  Aug 27, 2008 @6:35 am

    Ciao Pierluigi,
    I like this nice effect!
    could you share the icons.fla file? do you use the flex component.mxp for flash?
    Can I use it on my website?

  8. Pierluigi Pesenti  •  Sep 2, 2008 @8:23 am

    Sorry batchass for replying just now, but didn’t notice the e-mail for this comment.

    1. http://blog.oaxoa.com/wp-content/icons.zip

    2. I rarely used flex components for Flex
    3. You can use it wherever you want. It’s why I published it :)

  9. Yud  •  Feb 25, 2009 @3:56 pm

    Looks great, I see that the dock bar is in the browser.
    Do you know if it is posible to simulate windows taskbar behavier with such dockbar?


  10. Gow  •  Jul 1, 2009 @7:24 pm

    Thank you so mutch for sharing it! Really great!

  11. John M  •  Jul 2, 2009 @5:30 am

    Very cool little demo, i can think of zillions of applications (ha ha) for it! Kudos!!!!

  12. Shashank  •  Aug 8, 2009 @6:48 am

    You Really done a great job and thanks for making it an Free source, Really an appreciable help to many Developers

  13. flashguy  •  Dec 3, 2009 @4:20 pm

    Next time include sources please =)

  14. Pierluigi Pesenti  •  Dec 3, 2009 @5:20 pm

    As clearly stated in the post, simply right click on the first example to see sources of all three and download the class. A little messed up but it works.

  15. Hugo Pineda  •  Mar 12, 2010 @4:29 pm

    Great! Thank you very much it’s simple and fast!

  16. Lion Heart  •  May 11, 2011 @10:06 pm

    Thanks a lot

  17. Metalanillo  •  May 21, 2011 @7:17 pm

    Hi. I’m a java developer and I am working in my first actionscript/flex project. The visual layer is my big weakness and I am very grateful for your dockbar. Congratulations for a great simple, clean and useful component!
    I am trying to remove the activation behavior and leave always the menu on the screen but I can not get this. I would also like to have submenus with icons that appears above the main icons.
    Can you give me some tips to get this?

    Thank you!!

  18. metalanillo  •  May 23, 2011 @4:02 pm

    Ok, the problem with the activation behavior is solved. I will keep trying to solve the submenus problem.

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>