Simple Flash Blog

This tutorial is about how to create cool tabs for a Flash 8 menu directly in Flash. For this I use gradients and Gradient Transform Tool. I will try to describe in detail how these work in flash.

I split this tutorial in 10 steps easy to follow:

1. Open Flash 8, create a new document and save it as tabs.fla. Go to the Properties panel or choose Modify >> Document (Ctrl+J) and set the dimensions of your flash document to 110×75 pixels.

2. Go to the Tools panel and select Rectangle Tool (R). Then go to the Options (in the bottom of the Tools panel) and click on Set Corner Radius. In the window that appears type 10 points and then click OK button. Then go to the Properties panel and choose none for Stroke color and black #000000 for Fill color.

3. Go in the first frame of Layer 1 and draw a rectangle (hold the mouse pressed and drag).  Click the rectangle you just draw to select it, go to the Properties panel and set W:100.0, H:50.0, X:55.0, Y:50.0.

4. Great until this step. Now select the Rectangle Tool again. Click on Set Corner Radius, type 0 points and choose OK. From the Properties panel select none for Stroke color and green #009900 for Fill color. Draw a new rectangle near the rectangle with rounded corners. Select this new green rectangle (click it) and then go to the Properties panel and set the following values W:100.0, H:10.0, X:75.0, Y:70.0. Your stage should look like the image below. Now while the green rectangle is still selected press Delete key on your keyboard.

5. Great! You have now the first flash tab, but it’s black :(. No problem, I’ll show you how to add to it a cool gradient. Click the tab to select it and then go to the Color Mixer panel (if it’s not opened go to Window >> Color Mixer or Shift+F9).

6. In the Color Mixer panel choose Linear as Type and #006600 for the first color and #00CC00 for the second color (see the next picture).

7. Your tab looks now like in the first picture below. This gradient isn’t so cool at all. Be patient, we are not ready yet. Now it’s time to use Gradient Transform Tool from Tools panel. So, click the Gradient Transform Tool  and then click your tab. What you see now is like in the second picture. You can observe the Gradient Transform controls that appear around the tab.

   
8. Drag the Rotate point (see it in the picture above) from top to bottom so that to rotate the linear gradient 90 degrees (see image below).

9. Now I’ll use the Scale control point to scale the gradient like in the picture below. Just drag the Scale control point until the lines are on the top and bottom margins of the tab.

10. And the tab is finished! You can use it as it is in flash and you can also export it in an image format. For doing this choose File >> Export >> Export image and from the window that appears select the type you want from the Save as Type drop-down list.

I hope this tutorial about gradients and Gradient Transform tool in flash was helpful.
 

This entry was posted on Monday, September 17th, 2007 at 12:27 pm and is filed under Flash tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.