adrianTNT.com - Flash button tutorial

tools
Button swf will load here

Open macromedia flash, select “window>library” or click “F11”, the library window will appear, at the bottom of the window click the “+” sign to add a new symbol, now select “button” and click “OK” .From the Rectangle tool and from the tool options at the bottom of the tools list select Round rectangle radius. From the tools properties select the stroke color = none

stroke

Draw a rectangle on the stage of about 140x36 pixels, now select the rectangle and open the color mixer by selecting “window>color mixer” in the fill mode select “linear”.

color mixer

Now select the Fill transform tool fill transform tool, click on the rectangle, rotate and transform the color so that the black color is in top and white at the bottom.

color transform

Select the arrow tool, right click on the rectangle, select “convert to symbol>button”, now right click the rectangle again and select “edit in place” to edit the clip for the button.

Copy the rectangle and then create a new layer, paste the rectangle in this new layer by selecting “paste in place” so that it is pasted in the same place but in the new layer. Click the rectangle and set it's color blue #0099FF. Right click on the rectangle in the “layer2” and select “panels>transform”, in the transform tool set the values width 96% and height 90%, click enter. Copy the blue rectangle from the layer two and create a new layer, select “paste in place” in the layer3. Lock layers 1 and 2 so that you do not select their contents by mistake. Set the color of the rectangle in the layer 3 white, transform it to 96% width and 90% height so that it is the smallest rectangle. Select the bottom half of the white rectangle and click “delete” key.

select half

Now you should only see the top half of the white rectangle, select it and go to “window>color mixer”, set the color mode “linear” and white for both colors in the color mixer (left and right),now set the value alpha=0% for the right white color in the color mixer so that the white object be colored from white to transparent.

white to transparent

Select the fill transform tool again fill transform tooland rotate the white gradient so that the top area is white and the bottom is transparent

gradient rotated

Now copy the gradient graphic, paste it in the same place and rotate it using the Free transform tool transform tooland place it under the first gradient so that it will look like this: two gradients

I changed the background to yellow #ffcc00 so that you can see the white to black gradient in the layer1. Click “F11” to see the library if you cannot see it, right click the button symbol and select “edit in place”, now select the next frame of the button and insert a key frame:

insert button key frames

do the same for the next frame (“Down” state of the button). Leave the “Hit” state of the button as it is.

Now click the second key frame of the button (Over state) then go down in the flash stage, select the button, then go down a little more in the “Properties window” and select “Brightness” from the color drop down menu and set it's value to 30% so that the button looks brighter when mouse rolls over it.

brightness

Now select the next key frame of the button (Down state) select the button again from the stage and now set it's color to “Brightness -30%” so that the button will look darker when it is clicked. You can now create a new layer in the button and add some text, and the button will look like this:

Button swf will load here

If you want your flash button to open an URL, select the button, click "F9" so ActionScript window will appear and type this:

on (release) {
getURL("http://www.adrianTNT.com"", "_parent");
}


The actions above will open the page adrianTNT.com is the parent window (same window). See the ActionSctipt dictionary in macromedia Flash for more options that you can add to a button.

Download the source (fla file) for this tutorial.