Design & Animate Menu Buttons – Photoshop & Flash Tutorial

Learn how to design and animate fancy menu buttons in Photoshop & Flash CS4.

Final Result

1. Create a new document, make it whatever size you want. I've got 500x100px. 15. Select the 2 layers, right click and Convert to Symbol. Make the type button and registration center. 16. Double click on the new button symbol to go into the button layer. On Over, right click and insert keyframe. Now remove the normal button image and replace it with the first motion button, press the same buttons in the align window to place it right. 17. Right click the new image > go to Convert to Symbol and convert it to a movie clip. 18. Double click on the layer to go into the movie clip. Create 3 layers and name them what I have below. 19. Right click on the 3rd keyframe of Box and press Insert Keyframe, delete the first motion button and place the 2nd motion button on the layer. Do the same step on the 3rd motion button. 20. On the 3rd button frame, insert the keyframe on the 10th frame like below: 21. Go to the text layer and insert a new keyframe where the third button image starts. Place the hover text there. 22. Go to the 10th keyframe and press f5 (or right click and press insert frame). 23. Right click anywhere in the layer and press > Create Motion Tween. 24. Go to the first frame and click on the text image, go into properties >Color Effect > Style > Alpha and make it 0%. 25. Now go to the last frame, select the text and make the Alpha 100%. 26. Now insert a new Keyframe on the last frame in the Action Script layer. Right click the frame and go tin Actions. Type in stop(); this will stop the animation when it reaches the end. 27. Go back to the button screen, go to the hit frame, right click and insert keyframe. Remove the first motion image and place the final hover button & text images. 28. Now press Scene 1 to go back to the original screen. Now right click on the button you just created and go into Actions. Type in the following code to link it. 29. Now complete the previous steps again to create more buttons.

Final Result

Comments
  1. Posted by kirby
  2. Posted by r
  3. Posted by Chess
  4. Posted by aans
  5. Posted by edesignerz
  6. Posted by mohan babu
  7. Posted by Thomas