Glass Aero Flash Menu with Fade Effect

Posted on April 9, 2009 in Flash Category

In this tutorial you will learn how to make a Vista inspired Glass Aero flash menu with awesome fade effects in Flash CS3, using Action Script 2.

Level: Medium

Final Results

Update: You can check a similar tutorial here on how to create a aero glass text effect in Photoshop.

Step 1 - Document Settings

Open Adobe Flash CS3 and create a New File (CTRL + N) with Action Script 2 and press OK.

Go to Modify Menu - Document (CTRL + J) and set:

  • Dimensions - Width - 600 and Height - 400
  • Framerate - 25
  • Background Color - White and click OK

Find a cool Wallpaper with Leafs and cut it to 600x400, or you can use this wallpaper.


Now drag and drop this wallpaper in Flash.

  • Be sure after dragging that your picture must have 600x400 size. So click on it and change from the Properties Panel the width and height and X - Y Axis to 0,0

Now  Layer 1 to "background" and create another one and rename it "body"


Step 2 - Drawing Rectangles

Block the background Layer by clicking near the color of the Layer.

Select the body Layer and draw a white rectangle with white border using Rectangle Primitive Tool

Your rectangle should  have

  • 400 Width and 30 Height
  • Rectangle Corner Radius - 6
  • Stroke Hinting Checked


Set the Fill Opacity to 50%


Select rectangle and go to Modify Menu - Convert to Symbol or Press F8 and choose Type: Movie Clip and click OK.

On the Properties Panel, Click on Color Drop Down Menu and Select Alpha to 50%

On the Filters Panel, Click the Plus Button and Add a Glow Filter with:

  • Blur X,Y to 10
  • Black Color
  • Strenght: 150%
  • Quality: High

You should have this:


Now select your object and go to Modify Menu - Convert to Sybmor or press F8 and select Type - Button and press OK.

Double click your button and inside it, Insert a New Layer and creat a text using Text Tool - Video Tutorials


Step 3

Very Good ! Now let's add some Fade Effect on Rollover.

A little right above layers are 4 Mouse Actions: UP - OVER - DOWN - HIT

Click on the block below the OVER Action and press F6 or Right Click and Insert Keyframe for all 2 layers

Select the object from the OVER Action and press F8 and convert it in Movie Clip again.

Double Click it and select Frame 20 and press F6 or Right Click - Insert Keyframe.

- Between Frame 1 and 20 right click and Select Create Motion Tween.

- On the Last Frame click your object and set Alpha to 70% and from Filters, 50% Strenght and White Color

- And press F9 for Actions Window and write stop(); on the last frame. You should have this:


Step 4

Now we must multiply our button. Go to Root.


Select your button and press CTRL + C to Copy and after CTRL + SHIFT + V to Paste in the same Place and move with SHIFT + ARROWS to move a little bit down, near your first button.

Very Good now your buttons are the same. Everytime you modify something on any button it will change to all. So what we have to do?

Right Click on the Second Button and select Duplicate Symbol and Click OK.

Double Click and you are free to change your text now for both layers ! (use CTRL + C and CTRL + SHIFT + V to paste in the same place)

- The Action Script Code for your button is:

on(release) {
     getURL("", _blank); // _blank or _self

Repeat this steps for every button you copy and paste.

Final Results

Download Files

Related Articles
  1. Jane says:

    Tried to download the files but they can not be extracted. Says it is invalid. What files exactly were included?

    • Hello Jane,

      I just downloaded the zip file using 7z or WinRAR and everything is working fine. Not sure which software you are using.

    • LadyJane says:

      I use WinZip and it says the compressed folder is empty. It keeps asking me to add files to it. I do not have permission to install any other unzippers. I also have Windows 8.1

  2. Dara says:

    Really nice tutorial….thanks for the same….can you also post a tutorial having the same button effect and the buttons to work as a drop down menu ??? (Having smooth drop down effect)

  3. ali says:

    hi..i’ve problem with buttons…when i move mouse over the buttons,all of my text change to same name(video tutorial)..i’ve run the duplicate symbol and texts changed.but in swf file it’s not write…plz help….

    • You should change both action inside your button (Static/Hover/On Click Statements). Just double click the button and inside you will find those layers.

  4. Draco says:

    the link is working but the zip file cannot open. Please upload your amazing tutorial again. Because i got some problem when i’m following your guide. Maybe i miss some steps. Thanks.

  5. nico says:

    Please upload the fresh file or I report it as broken link.

  6. Alam says:

    For the fresher it is hard to understand but It is working smoothly.

  7. Guest says:

    this is a fantastic tutorial by the way. thanks.

  8. george says:

    hi, i’m having a problem writing the stop action. It says it’s not possible to apply actions to that selection
    I’m using cs4 with the action script 2.0
    thanks a lot and great menu by the way ( :

  9. jaka says:

    Great it is finaly started to work as it should. Can someone help me with another problem. When i copyed the background from Photoshop i removed the background there. In the background picture i have rounded edges and now when i copy my flash to website i have white angles again. How to remove this. Original picture for shure dosn\’t have this angles!!!

    Thanx for help!

  10. jaka says:

    It is my first time to play with flash and also first time to build a web site. I have a problem how to embed the code inside my code! My code is written in html and all the dividing part is made in CSS. I made this tutorial in CS4 Flash and is working great, but i dont know how and where to put the links now!


  11. Victor says:

    Great Job, sir.
    Pretty nice example and explanation.

  12. James says:

    ok ive been trying this for a while and i get stuck on the last bit in step3, the double click button and insert frame in it. Ive been trying to and it wont work. Im using cs4 and things are in a slightly different place than this turtorial. It wont let me put another layer in the button and i dont get the up,over,down,hit menu. please help!

    • Hello James. To see the “UP-OVER-DOWN-HIT” menu you need to enter in a button. Also you need to have Action Script 2.0 set initially. Flash CS4 may differ from CS3 version. Hope my advice will help you.

  13. emma says:

    I had the same problem as Jim with step 3 – found it mildly unclear with “double click it…” wasn’t sure which IT you were referring to. Think my problem was different in the end though, having the ‘stop’ bit of code in the wrong place >.< Should be sorted when i get home tonight.

  14. jim says:

    man i must really be slow, I have gone through this 6 times, insert layer, copy over frame, especially the go to frame 20 on the layer. From the last line of instruction before STEP 3 on down, is soo unclear. I will keep trying!

  15. Lasitha says:

    Great One!!!

  16. morenlog says:

    best project in the flash

  17. Chris says:

    Great tutorial, however after I download the FLA file and try to access the files, I get a message saying the file is invalid and cannot be opened.

    • Hello Chris. You get this error because you use an older version of Flash. You need Flash CS3. Anyway I updated the actual archive with another file compatible with Flash 8.

  18. sharin_sg says:

    great tutorial! thanks

  19. kebs says:


    I have problem with as.
    Where exactly should i put the code:

    on(release) {
    getURL(’€’€œ, _blank); // _blank or _self

    for my button to open website?

    I know this is a silly question, but I an noob with flash, and I would really apreceate help.

  20. neo says:


    Great tute.

    i am newbee in flash so need little hint
    when i insert Motion Tween. betwwen frame 1 and 20 i cant change glow filter

    • You need to click on the frame 1 or 20 ! If you click between 1 and 20 you can’t do anything because you are in the animation event (Motion Tween).

  21. anty says:

    it does’nt make any difference, the first link will always be open in a new window..

  22. anty says:

    i\’ve got a little problem.
    when i create a menu according to this tutorial (also if i copy the frames from your FLA file) the first link always will be opened in a new window, but later, when i choose another one from this new window everything is ok. someone can help me? :)
    many thanx in advance.

    • Press F9 after you click your button. This thing is because of your action script code is set to _blank (every link open a new window every time you click it). Try _self to resolve the problem.

  23. Yoan says:

    Yes, if you follow the steps, you’ll not have any problems… It’s cool tutorial, pretty :)

  24. mike says:

    i’m following the tut until the step 3 in the section when i have to open the actions window and write the stop() in the last frame. When i open the action window it says to write the code in the frame 1 but i select frame 20 from the timeline. and my path is the same as the tut. any help ?

  25. jb says:

    awesome! thanks sooo much

  26. Niklas says:

    Well, is there some easy way to do that, like some kind of reverse technique? Or is it a bit more advanced?
    If possible, could you sum it up short here, or if you do know any link which shows how to do?

    Thank you.

  27. Niklas says:

    Thanks for a very usefull tutorial. I just have one question: Is there some way to get the bars to fade Out, the same way as they fade in on, when you move your cursor away from the bar?

    Thanks in advice.

  28. Daniel says:

    very nice tutorial! :D
    and thanks for using my wallpaper, you did great!

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

eight + 5 =

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.