Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
In this lesson you will see how easy it is to create a nice Flash website menu interface and make it work also! Particularly, you will learn how to:
In the Flash example below you can see what you are going to create with this tutorial. Try clicking the buttons!
1. Open a new Flash document. Call the first layer sky.
2. Select the Rectangle tool (R). Use only the fill color - go to the colors portion of the Tools panel, click on the pencil icon (see 1 below) and then the small square with the red line (see 2 below).
3. Draw a borderless rectangle wider than the stage, and about 70 pixels high.
4. If the rectangle is selected, unselect it by clicking anywhere outside it with the Selection tool (V).
Go to the Color mixer panel (Window > Color Mixer). In the upper right part of this panel, select Linear as type of fill.
In the bottom, a color stripe will appear. Click on the small right rectangle and enter the #B6E2FA as color code in the appropriate field. Then click on the right rectangle and enter #78B0E9. The alpha (transparency) properties for both colors should be set to 100%.
5. Select the Paint Bucket tool (K). Click with your mouse on the top of the rectangle and start dragging it diagonally to create a nice diagonal linear gradient fill.
6. Lock the sky layer. Create a new layer and call it menu.
7. Select the Rectangle tool (R). Go to the Properties panel. Set the outline color to a light gray hue, and the fill color to a dark blue one. You can see the colors I used in the image below. Also, set the thickness of the outline to hairline.
8. Draw a 90 by 30 pixel rectangle, over the sky background, near the left edge of the stage.
To have the exact dimensions of the rectangle (because it's difficult to get them when drawing by hand), double click on the rectangle's inside (fill) with the Selection tool (V). After you did this, both the outline and the fill will be selected.
Go to the left side of the Properties panel and you'll see the the W (width) and H (height) fields there. Just enter the dimensions for your rectangle manually and hit Enter to confirm. Make sure that the little padlock icon on the left is unlocked so that you can enter the width and height values independently from one another.
Also, make sure that the position (coordinates on the stage) of the rectangle (the X and Y fields) is set to round numbers. There must be a zero at the end, not any other number.
Why is this necessary? Because when you are drawing precise graphics (like the hairline outline of the rectangle) or using bitmap fonts, crisp pictures, and so on, you must set their coordinates to round numbers. Otherwise you will get blurry and messy results in your SWF movie.
9. Select your rectangle on the stage once again (both the outline and the fill).
Press F8 (or select Modify > Convert to Symbol). In the dialog window that shows up, select Button as type and call it home button. Click OK.
You will see that the rectangle has changed - it is now a button symbol. The small circle in its middle is it's registration point. This point is relevant when making changes and issuing commands to the button via ActionScript. For example, when you want to move the button programatically, this point's coordinates are taken as button's position.
10. Double-click with the Selection tool (V) on your newly made button to enter inside it. You know that you are inside the button if you look above the layers - the indication is there.
11. Call the first layer inside your button symbol rectangle. Lock this layer. Make a new layer and call it text.
12. Select the Text tool (T). In the Properties panel, select static as type of text.
REMEMBER Static text is used for text that will not change, unlike the dynamic or input text field types. The important thing here is to know that you can choose whatever font you like, because this kind of text field will be seen exactly the same by all users who are viewing your flash movie (or site), regardless if they are having that particular font installed on their computer or not. So you are free to choose any font you like, and that font will become embedded in your flash movie.
Choose a font you like. Make its size 12 or so. Select white as color, to make it stand out from the blue rectangle background. In the menu below the font size and color options, select "Anti-alias for readability". This will make your link text look sharp.
13. Click with the Text tool somewhere inside the blue rectangle area and type "Home".
14. Open up the Align panel (Window > Align). With the link text you just typed still selected, turn on the "Align to Stage" button (see 1 marked on the picture below).
Align the text horizontally (2) and vertically (3) inside the button. So, since the "Align to Stage" button is turned on and you are working inside the button, the text field will be centered in relation to the button's central point. If you're interested, I made a separate tutorial on the use of the Align panel.
15. However, there are still manual changes that need to be made. To ensure that your text renders correctly, without any blurry parts, to make it more readable, go once again to the Properties panel and set its position (coordinates) to round numbers.
If the last number in the X an Y fields is equal or above 5 (like 18.9 in the picture above), round the whole number to the upper value. If it is below 5, round it to the lower value. For example, if it is 14.3, round it to 14.0, and if it's 14.5 or 14.8, round it to 15.0.
Once you have done this, if your text isn't centered in relation to the blue rectangle below it, position it with arrow keys on your keybourd. Just press the up or down (or left and right if needed) key - this will move your link text by 1 pixel, and it will stay on round coordinates.
16. One last thing before you move on: be sure that the "Selectable" option is turned off. Check if this is so in the options for your text field below the scene.
Why is this necessary? If you have this option turned on, once a user moves her mouse over the button, the cursor for selecting text will appear, instead of the hand cursor. In addition to the fact that this sucks (a text selecting mouse cursor appearing over a button definitely does), your button may even not function at all!
Turn this option on only intentionally - for example, when you want your users to be able to select a piece of text on your flash site, like your address, etc.
17. Click on the "Scene 1" link above the layers to return to the main scene.
There! The button is finished. Making the other buttons will be easy now.
18. Open the Library (Window > Library). Right-click on the home button symbol and select "Duplicate" from the menu that appears.
19. Call the new symbol gallery button and click OK.
20. Double-click on the newly created gallery button symbol in the Library to enter inside it.
Click on the link label text field to edit it. You can do this by double-clicking with the Selection tool (V), or by clicking once with the Text tool (T). Write "Gallery" (without the quotation marks, of course). Press Esc to exit the text editing mode.
Use the left arrow and right arrow keys if necessary to center the link label inside the button.
21. Go back to the Library and repeat steps 18 through 20. Make three more button symbols. Call them music button, links button and contact button. Change their labels accordingly.
You don't need to return to the main scene to do this. Just duplicate them inside the Library, double-click on each one of them, change the text and center it. When finished with all the buttons, return to the main scene. You will have five different buttons for your menu in the Library.
22. Choose the Selection tool (V). Click once on the home button to select it.
Press Ctrl+C (Cmd+C on a Mac) to copy this button. Press Ctrl+Shift+V (Cmd+Shift+V on a Mac) to paste this button in place, exactly over the original one.
Now don't click anywhere and don't select any other tool. It may seem that you have just one button on the scene right now, but there are two. They are placed exactly one over the another (thanks to the Paste in Place command).
Just press and hold Shift on your keyboard and while holding it, press the right arrow key to move the copy of the button horizontally. Each time you press the right arrow key, you will move the button by exactly 10 pixels. Press the key 10 times to move the button exactly by 100 pixels to the right.
If you had pressed just the arrow key without holding shift, you would have moved your button by 1 pixel at time. This comes in handy when you must design a precise layout.
23. Repeat the previous step by copying and pasting in place the second button and moving it 100 pixels to the right. Do this two more times to have five buttons in all on the scene.
You will see now how easy it is to place every menu button in its right place. I love Flash! It is wonderful and really easy to work with :)
24. Click once with the Selection tool (B) on the second button from the left. Go to the Properties panel and press the "Swap" button.
25. In the window that appears, select gallery button and click OK.
Repeat this procedure 3 more times for each of the remaining buttons. In the end, you will have all the particular buttons required for your flash website menu on the stage.
Everything ok so far? Cool! Continue to the next page.
