Terminology:

Templet = Template
A gauge, pattern, or mold that is used as a guide to the form of a piece being made. A formula for layout design.

CSS = Cascading Style Sheets
A long-time established standard set by the W3C to improve HTML code. CSS is a seperate standard which can be incorporated into any existing or forthcoming HTML code. CSS helps seperates visual formatting code from content.

w3 = world wide web
(abbreviation)

W3C = World Wide Web Consortium
The central body governing, studying, improving and implementing code standards for the world wide web.
Link: W3C.org

HTML = HyperText Markup Language
A code standard which has been approved and ratified by the W3C for web page formatting and layout design. By using a set of standardized codes, one can create and design a web page to reflect the visual layout desired.

XML = eXtensible Markup Language
A code standard allowing for easy syndication and/or configuration of other dynamic documents.

SE = Search Engine
A webpage search engine such as Google, Yahoo or MSN Search that facilitates searching for information on the w3.

SEO = Search Engine Optimization
A method of optimizing a page or website for search engines to easily and readily crawl, catalog and rank a webpage for specific keywords.

Keywords = search words/phrases
Search words and phrases that a user would use at an SE to find a particular interest, information, service and/or product.

Flash = Animation & Ineractivity Application
Macromedia Flash is a highly sophisticated application for creating animation and user interactive design elements for the web, multimedia and video. Flash can even be used to design whole games.

Flash Component = Flash Extension Program
Flash add-ons which extend and/or ease the design process in Flash. We offer menus and navigation bars that allow users to easily build custom Flash elements.

Flash Library = Flash Element Catalog
Flash libraries include readily available design elements for use in Flash or Dreamweaver.

Open macromedia Flash. Select “Window>Library” or press “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

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”.

Now select the 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.

Select the Arrow Tool, right click on the rectangle, select “Convert to Symbol>Movie Clip”. 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 96% width and 90% height, then click enter. Copy the blue rectangle from the layer two and create a new layer, select “Paste in Place” in 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 press the “Delete” key.

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.

Select the Fill Transform Tool again and rotate the white gradient so that the top area is white and the bottom is transparent.

Now copy the gradient graphic, paste it in the same place and rotate it using the Free Transform Tool . Place it under the first gradient so that it will look like this:

I changed the background to yellow #ffcc00 so that you can see the white to black gradient in the layer1.

Press “F11” to see the library if you cannot see it. Right click the button symbol and select “Edit in Place”, then select the next frame of the button and insert a key frame:

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). 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.

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:

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

on (release) {
getURL("http://www.Templates-Templets.com"", "_top");
}

Thease actions will open the default homepage at Templates-Templets.com in the top window frameset (the same full browser window). See the ActionSctipt dictionary in Macromedia Flash for more actions that you can add to a button.

Download the source (fla file) for this tutorial.