Tuesday, 8 July 2014

Glass Aero Flash Menu with Fade Effect

Download Source Files

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.
leaf600x400
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"
step11

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
step21
Set the Fill Opacity to 50%
step2b2
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:
step2c2
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
step2d1

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

Step 4

Now we must multiply our button. Go to Root.
step3b3
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://extremestudio.ro/?cat=3", _blank); // _blank or _self
}
Repeat this steps for every button you copy and paste.

No comments:

Post a Comment