Computersight -

In this tutorial I will be focusing on colors, gradients and filters.

1. Open up a new flash document.
2. Select the rectangle tool and look at the options in the tools panel and select “Set corner radius”:
3. Set the corner radius to 10 and press OK
4. Draw a black rectangle on the stage with no outline, it will be rounded
5. Edit the rectangle via the properties panel and make the width 100 and the height 30: (The position doesn’t matter)
6. Open up the color mixer panel, if you don’t have it, then press SHIFT+F9:

   

7. Select the rectangle with the selection tool and at the “Type” drop down menu in the color mixer panel, select linear and make sure that the “Fill” in the color mixer is selected not the stroke (To select the “Fill”, simply click on the bucket in the color mixer panel):
8. Change the gradient at the colour mixer to look like this (You can click and drag the tabs to move them):





9. Your rectangle should look something like this:
10. That looks alright doesn’t it? Lets make it better, select the Gradient Transform Tool (Hotkey F):
11. Click on the rectangle with the tool and it should look like this:
12. Move your mouse to the top right corner of the rectangle and the mouse cursor should turn into a rotate symbol
13. Rotate the gradient 90 degrees anti-clockwise, it should look like this now:
14. Now, that arrow pointing to the right, click on it and drag it down until it meets the edge of the actual rectangle:
15. Convert the shape to a button using the F8 key and name it button:
16. Now you have a button, double click to go inside it
17. While inside the button click on the shape and convert it to a movie clip. Name it ButtonInside:
18. Click on your newly made movie clip that is inside your button and double click on it AGAIN
19. Convert the content into another movie clip (Last one I swear) name it ButtonInside2.
20. Now go back to the inside of ButtonInside (You should be here: Scene 1 > Button > ButtonInside), go down to the properties panel and click on Filters:
21. In the filters tab, click on the “+” and then click on Glow:
22. Now, there are many different filters so later on you can experiment with them but for now, let’s use the glow filter
23. Edit the properties of the filter to look like this:
24. Add a keyframe while inside ButtonInside at frame 10 and frame 20:
25. At keyframe 10, select the movie clip that you just applied the “Glow” filter to and go to the filters tab
26. Change the properties of “Glow” to look like this:
27. Apply motion tweens to the 1st and 2nd keyframe and the 2nd and 3rd keyframe:
28. Go back to the stage and test your movie
29. You will see that the button has an animated glow. So far this button is good but it can be better.
30. Double click on the button in the stage so that you are inside the Button symbol:
31. Copy the movie clip in layer 1 of the button, don’t paste it yet
32. Make another layer and place that layer on top of “Layer 1″ and name it “Bevel”
33. Select the “Bevel” layer and push CONTROL+SHIFT+V. This will paste whatever you copied in the location in your current layer.
34. Select the object you just pasted if it isn’t already selected and press CONTROL + B. This will break the movie clip apart, since the movie clip you just broke apart had an instance of the ButtonInside2 movieclip in it the movieclip on stage now will be the ButtonInside2. The “Break apart” function is great for many things. Like for example: You make a movie clip with a square. You want to make another movie clip with it but you spent a while drawing that square. So you break the movie clip apart back into the ungrouped form and make another symbol with it!
35. Anyways back on task, the broken apart movie clip is now the ButtonInside2 movie clip. You will realize it has a “glow” filter applied to it already. Delete that filter by selecting the “Glow” filter and pressing the “-” button next to the + button:
36. Add a “Bevel” filter to it:
37. Make the properties of the bevel look like this:
38. Bevel gives it a nice “3D” look. Now add a keyframe at the “Down” state of the button in the bevel layer and add frames to match it in the other layer:
39. At the “Down” state of the button in the “Bevel” layer, select the instance of the movie clip
40. Go to the filters tab
41. There should already be a “bevel” filter added from before, if not then you’ve done something wrong
42. Edit the properties of the bevel and change it to look like this
43. Return to the stage
44. Test your movie, while testing it, click on the button. You will see it looks like it has been pressed down.
45. Exit out of the testing screen and back to the stage
46. Right now it looks good but for the sake of learning, I will tell you how to apply alpha to it
47. Click on the button while at the stage, at the properties panel, look for “Colour”. When you find it, select “Alpha”:
48. Next to the alpha, set the % to 50:

“

49. You will see that the button has faded a bit. Alpha is for transparency, the 50% that you entered means the object is 50% transparent. 0% means that the entire object is transparent and 100% means it is not transparent at all.
50. Congratulations, you have gained knowledge of colours, gradients and filters. You can experiment around with those I will now leave you with a few notes.

NOTES:

• Linear is not the only type of gradient
• You can have alpha in colours
• You can have alpha in gradients
• The gradient transform tool isn’t the only way to alter gradients
• You can have more than one filter