Glass Aero Flash Menu with Fade Effect
In this tutorial we will learn how to make vista aero flash menu with awesome fade effect in Flash CS3.
What we do
Step 1
- 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 600×400, or you can use this wallpaper.
- Now drag and drop this wallpaper in Flash.
* Be sure after dragging that your picture must have 600×400 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
- 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 IN 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(”http://www.extremestudio.ro/blog/?cat=3“, _blank); // _blank or _self
}
- Repeat this steps for every button you copy and paste.
Final Results and Download FLA
Download Files
Rate this Post (13 votes, average: 5.00 out of 5)
|
|
You have reached the end of the post. You can try the similar posts below.
|
|
|
|
Comments (48 Comments)
48 Responses to “Glass Aero Flash Menu with Fade Effect”Add your Comment
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.
best project in the flash
Great One!!!
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!
Hello Jim. Tell me where you have problems or send me your file via e-mail to . Use the contact page. Thank you.
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.
Hello Emma, tell me what exactly is unclear or where did you stuck. If you need extra help you can add this Yahoo ID: extreme_design_studio
Thank you!
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.
Great Job, sir.
Pretty nice example and explanation.
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!
Thanx!
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!
Wow, fantastic! Well explained. Thank you for this wonderful tutorial.
Hi EDS,
I tried downloading the zip file at the bottom of the tutorial to comapre and see where i was making mistakes but the file is broken and will not unzip. Can you take a look at it if you get a chance?
Thank you very much for the tutorial!
I am sorry for this problem, I will change the file as soon as possible I return from my holiday.