Tikier Hosting » rectangle tool

Glowing neon playback control buttons

admin — Thu, 01 Apr 2010 13:51:56 +0000

In this easy lesson made for Flash 8 professional I will show you how to create a set of cool, neon glow playback control buttons easily. No other applications will be used to create these buttons, because Flash has so much power on its own! You will see:

How to use the basic shapes to create the ones you need,
How to use the great blending filters in Flash 8 pro,
How to combine multiple filters and objects stacked upon one another, and some more.

You can see the example of the sleek buttons below.

Preliminary steps — setting the background

1 Open a new Flash document. Choose Modify > Document (shortcut: Ctrl+J). Select black as document background color. Click OK.

2 Select the Rectangle tool (R). Turn off the stroke color by clicking on the little pencil icon and then the small red-striped square at the bottom of the Tools panel: .

3 Make sure that both the Object drawing and Snap to objects options are turned off: .

4 Click the Set Corner Radius icon () and enter 6 in the window that will show up, click OK. This is done in order to have rectangles with round corners.

5 Draw a flat color (any color will do) 410 by 120 pixel rectangle.

6 Select the Paint Bucket tool (K). Go to the Color Mixer panel (opened by default — you can always find it in the top right part of the Flash working space). Do the following (see numbers in the screenshot below):

Click on the paint bucket icon to select the fill color.
In the Type menu, select Linear.
Click once on the small colored square found on the bottom right.
In the color code field, enter the hex code #2E70AA (that’s a zero, not the letter O).
Set the Alpha property for this color to 34%.
Set the same color for the left square, but set its Alpha to 100%.

7 Press and hold Shift, click near the rectangle’s top and drag your mouse down until the rectangle’s bottom. Release your mouse button, and there is your nice gradient!

Top of page

Creating the glowing outer ring

8 Lock the current layer and call it background. Create a new layer and call it buttons.

9 Select the Oval tool (O). Go to the Property inspector and make the following selections: block the fill color, select any flat color for the stroke (outline) color, set the line type to Solid and choose 3 for line thickness.

10 Somewhere over the rectangle, draw a ring (it is a circle, but because of the line thickness and lack of fill, it looks like a ring). Make it 70 by 70 pixels.

11 Select the ring by clicking on it with the Selection tool (V), if it isn’t already selected. Go to the Color Mixel panel and click on the pencil icon to select the Stroke color (). In the Type menu, choose Linear exactly like you did for the fill color previously. Add two more color squares to the gradient by simply clicking anywhere between the two existing ones. You should have four of them in total, with the following color values, positioned like this:

Note: all the four squares should have their alpha set to 100% (complete opaqueness). The ring will now look like this:

I have hidden the background layer to work more easily and so that you can more clearly see the various steps.

12 Select the Gradient Transform tool (F). Click on the ring to select it. Rotate the gradient by 90°. To successfully do this, make sure that Snapping to Objects is turned on (View > Snapping > Snap to Objects). Then, press and hold Shift, click on the white circle handle and start moving your mouse clockwise.

13 While the ring is selected, press F8 (or select Modify > Convert to Symbol) to make a symbol out of it. Name it outer ring. Select Movie clip as type and be sure to select the registration point in the middle (see screenshot below):

Click OK. This choice for the registration point will make it easier to align the elements inside the button later.

14 Click on the Filters tab in the Properties panel (see no. 1 in screenshot below). Click on the plus icon (2) and select the Glow filter. Make the adjustements as follows:

Blur X and Y: 8
Strength: 260%
Quality: High.
Color: #ADE2FC.

Leave the Knockout and Inner glow options unchecked. You will get a nice glow for your outer ring:

Making the main button circle

15 Select the ring again and press F8 again, while leaving the same registration point as previously and Movie clip as type of symbol. Call the new symbol play button and click OK.

16 Double-click on the newly made play button symbol to enter inside it. Call the first layer outer ring and lock it. That’s where the ring that you have just created resides. Make a new layer above it and call it circle.

17 Select the Oval tool (O) again. Go down to the Properties panel. Set #B0E2FD for the outline color and #3A5274 for the fill color. Select Solid as line type and a thickness of 2.

18 Draw a 54 by 54 pixel circle on the stage, anywhere.

19 Select the circle (both the outline and the fill). Open the Align panel by selecting Window > Align. Turn on the To stage button (1). Click the align horizontal center (2) and align vertical center (3) buttons.

The circle will now be perfectly aligned with the play button movie clip’s registration point and also with the ring below it.

20 Choose the Selection tool (V) and click on the fill of the circle once to select it. Press Ctrl+C to copy it.

21 Lock the current layer and call it circle. Make a new layer above it and call it circle overlay.

22 Select Edit > Paste in Place to paste the circle you copied two steps earlier exactly on the same position, but inside this new layer.

23 The copy of the circle fill will be selected by default after pasting. Go to the Color Mixer panel. Click on the paint bucket icon to select the fill color. In the Type menu, select Linear. Make the following gradient:

You should have three color squares, one in the middle and one on each end of the gradient.
Each square’s color should be white.
The alpha factor of squares on each end should be 41%. The middle one’s should be set to 3%.

24 Use the Gradient Transform tool (F) to rotate the gradient by 90°, just like before. The final result should look like this:

Creating the play icon

25 Lock the circle overlay layer, make a new layer above it and call it icon.

26 Select the Rectangle tool (R). Block the stroke color. Set the fill color to #3A5274. Draw a 33 by 33 pixelsquare anywhere on the stage.

27 Turn on the Snap to Objects option and use the Selection tool (V) to create a triangle out of the rectangle. Do it like this (follow the image sequence below):

Bring the cursor close to the square’s upper right corner.
Click and start dragging down, until you reach the middle of square’s height. Release your mouse button.
Repeat the same thing for the lower right corner of the square, this time dragging the corner towards the point you just made in the previous move. Once near, the corner will snap into place. Release the mouse and there is your triangle.

28 Click on the triangle to select it. Go to the Property inspector and type 27 in the W (width) field. There! You have a good-looking play button now. The screenshots below show the difference in size before and after the width of the triangle was modified.

29 Center the triangle inside the button.

30 Select the Ink bottle tool (S). In the Properties panel, choose Solid as type and set the thickness to 4. Click anywhere on the triangle to give it an outline.

31 Choose the Selection tool (V). Double-click on the triangle’s border to select it.

32 Press Ctrl+X to cut the outline.

33 Lock the icon layer. Make a new layer below it and call it icon outline.

34 Select Edit > Paste in Place to place the icon border here, right below the icon itself.

35 Lock the icon outline layer and unlock the icon layer. Select the triangle inside it.

36 Hit F8 to convert it into a symbol. Call it play icon and click OK.

37 The new play icon movie clip will be selected by default. Go to the Properties panel and click on the Filters tab to set the blending options for this symbol. Choose the Glow filter and tweak it like this:

Blur X and Y: 6
Strength: 240%
Quality: Medium
Color: #ACE0FD
Inner glow must be turned on.

And — ta-daa — here’s the final result, with the background:

Now ain’t it cool? This blue neon glow looks soooo good ! Let me show you now how to easily duplicate theis button and create a stop button out of it.

Creating the glowing stop button from the play button

38 Go back to the main scene by clicking on the Scene 1 link.

39 Open the Library by selecting Window > Library.

40 Right-click on the play button in the Library and select Duplicate from the pop-up menu. The Duplicate Symbol window ill appear. Just change the symbol’s name to stop button and click OK.

Repeat the same thing with the play icon symbol: duplicate it and call the new symbol stop icon. You will have fice symbols (all of them movie clips) in the Library now: the outer ring which is present in both the play button and stop button symbols, as well as play icon and stop icon for each respective symbol. Let me show you now how to make the modifications.

41 Double-click on the stop button symbol inside the Library to enter inside it. Unlock its icon layer.

42 Click once on the play icon that is inside it, to select it.

43 Go to the Properties panel and click the Swap button.

44 The Swap Symbol window will show up. All the symbols that you made in your Flash document so far are displayed here — exactly as they appear in the Library. Select the stop icon symbol and click OK.

Although this movie clip symbol looks exactly the same as the play icon, you know that this is the stop icon in fact. Flash informs you of this by displaying the name of the currently selected symbol in the Properties panel:

45 Now, double-click the stop icon movie clip on the stage to enter inside it. Erase the triangle and draw a 28 by 28 pixel borderless square in its place. I have made the square smaller, because if it had the dimensions of the triangle, it would come too close to the circle’s border and that wouldn’t look so good. Oh, yes: the color of the square should be the same as triangle’s: #3A5274.

46 Click on the stop button link to go back to the movie clip’s timeline.

47 Align the icon in relation to the movie clip’s center.

48 Lock the icon layer. Unlock the icon outline layer. Erase the outline triangle that is inside it.

49 Draw a rectangle here, without a fill, and make it the same size as the icon above it: 28 by 28 pixels. the line should have the same thickness as before (4) and the same color (#3A5274). Align it like you did with the icon. It should look like this:

And finally, here are both the play and stop neon glow buttons, side by side:

They look awesome! And there was no need at all to use Photoshop! The pause, fast forward and rewind buttons can be made easily now — you know now the easy principle of duplicating symbols. Just make smaller triangles for the rewind button and make two rectangles for the pause button. Nothing easier than that.

A single button that you just made has a file size of only 439 bytes! The same button made in Photoshop would have a file size ten times bigger than the one made in Flash! Still, it is much easier to create a neon effect in Photoshop than it is in Flash.

Hope you liked this tutorial.

Download the source file for this lesson

Related posts brought to you by Yet Another Related Posts Plugin.

How to make a complete Flash website navigation system with a built-in preloader for external content

admin — Mon, 29 Mar 2010 11:04:04 +0000

In this thoroughly explained, detailed lesson made for Flash 8, I will show you how to create a really cool, complete Flash website navigation and loading system. The menu that you will make has a built-in animated preloader. You will learn:

How to design a menu with a built-in preloader (a numerical one),
How to create a preloader animation behind the menu buttons,
How to create stylish menu buttons,
How to make ActionScript code that will enable the preloading of external Flash (SWF) content
How to make a main preloader for the menu system and much more.

This Flash menu/preloader system works seamlessly in the following browsers on a Windows machine: Firefox 2, Internet Explorer 6 and Opera 9. I have yet to test it on a Mac, but I suppose it will work perfectly there too.

Below is an example of the Flash website system that you are going to create. Try clicking the buttons to see what you’ll learn to make!

Creating the base for the menu

1 Open a new Flash document and hit Ctrl+J on your keyboard (or select Modify > Document) to access the Document Properties panel. Change the width of your document to 480 pixels (see 1 in the screenshot below) and change the Frame rate to 30 fps (see 2 below). Click OK.

The change of speed for your movie (frame rate) is necessary to be able to have a smooth animation for the preloader. As for the width of the document, the change has been made just so that you can more easily follow this tutorial. Of course, once you learn how to create the menu with the preloader as explained here, you will be able to apply it to any document, no matter how big or small.

2 Select the Rectangle tool (R). Go over to the Colors area of the Tools panel and select the Stroke color by clicking on the pencil icon (see 1 below). Then click the No color icon (see 2 below). This will enable you to draw a borderless rectangle.

Click on the color square of the Fill color (see 3 below). Select a dark blue color for the fill. You can type the color code directly in the palette that will show up — I selected #203E7A.

3 In the Options area of the Tools panel, make sure that the Object Drawing and Snap to Objects options are turned off, like in the screenshot below. This will enable you to draw freely.

4 Click and drag your mouse on the stage to draw a 480 by 52 pixel rectangle. As you can see, the width of the rectangle is equal to the width of the stage. It isn’t easy to match these exact dimensions by drawing freely, so I recommend that you select the rectangle with the Selection tool (V) and then go over to the bottom left part of the Property inspector. There, you will find the input fields for the shape’s width and height. Enter the dimensions there manually.

After you have done this, center the rectangle on the stage horizontally and place it on the stage’s top. You can do this manually too, by entering zero as the rectangle’s X and Y coordinates, as is shown in the screenshot above. Your rectangle should look and be positioned like this at the end:

You will now proceed to make a symbol out of this rectangle — a movie clip that will contain all the elements of both the menu and the preloader.

Creating the white stripes menu background

5 Select the rectangle with the Selection tool (V) and choose Modify > Convert to Symbol. In the Convert to Symbol window, enter menu as the Name (see 1 below). select Movie clip as Type (see 2) and choose the upper left little rectangle as the Registration point (see 3). Click OK.

Selecting this particular Registration point is good if any menu positioning will be made via ActionScript later. Although there won’t be such code present in this tutorial, this choice is good for the majority of your Flash projects, so make it a habit.

6 Double-click on the newly created menu movie clip on the stage (do it with the Selection tool) to enter inside it. If you look at the top of your document, above the layers, you can see that Flash always keeps you informed of your current whereabouts. Your inside the menu movie clip symbol now.

7 Call the first layer blue background and lock it. Make a new layer above it and call it stripes.

8 Select the Rectangle tool (R) and change the fill color to any one that is in good contrast with the white document background and the blue rectangle drawn previously. I picked orange. Next, draw a 5 by 48 pixel rectangle anywhere on the stage.

9 Select the Paint Bucket tool (K). Go to the Color Mixer panel — it is usually open by default, if not, simply select Window > Color Mixer to acces it. Select the following options and adjustements (the numbers on the list correspond to those in the screenshot):

Click on the paint bucket icon to select the Fill color.
Choose Linear as Type.
Click and drag the small color rectangle that is on the left side of the gradient strip a little bit towards the center.
Make sure that the Alpha property (transparency) for this color is set to 100%.
The rectangle’s color should be set to white — the hexadecimal code for it is #FFFFFF.
Click on the second rectangle and set its color to white too, but change its alpha property to 0% (completely transparent).

Now you have a nice linear gradient that fades from pure white to complete transparency.

10 Still using the Paint bucket tool, press and hold Shift on your keyboard, click somewhere near the bottom of the rectangle that you made in step 8 and start dragging your mouse upwards. When you reach the rectangle’s upper edge, release your mouse.

Note: I have zoomed in on the rectangle to be able to work more precisely. The screenshot below shows the filling process while the zoom is set to 200%.

You have successfully filled the rectangle with the linear gradient. But it seems that the rectangle has disappeared completely? No sweat, it is still here, but since the gradient fill is essentially white, this can’t be discernible on your document’s white background.

11 Select the Selection tool (V). Click and drag on the stage around the area where your rectangle is supposed to be and you’ll quickly make it visible.

12 Move the small gradient rectangle and place it over the blue rectangle either by dragging it with the Selection tool (V) or by using the arrow keys on your keyboard.

13 Select the Free Transform tool (Q) and turn on the Snap to Objects option in the Tools panel: .

14 The handles for transformation and manipulation should appear on your rectangle if it is still selected. If not, just click on it with the Free Transform tool and they’ll show up. Do the following:

Place your cursor near the upper right handle until you see a circular arrow appear — you can see it in the second image in the sequence below.
Click and start rotating your mouse clockwise. Your rectangle will begin to snap to precise values — it will do so every 15 degrees. Release your mouse at athe second snap, when the rotation has reached 30 degrees, as seen in the image below.

15 Choose the Selection tool (V) and click on the rotated rectangle to select it. You should place it now near the registration point of the menu movie clip (you’re still working inside the menu movie clip, remember), by entering zero as its X coordinate and 11 as its Y coordinate.

16 Now, while it is still selected, copy the rectangle shape by pressing Ctrl+C. Press Ctrl+Shift+V (or select Edit > Paste in Place) to paste the new copy of the rectangle exactly over the original. Don’t click anywhere or you’ll unselect it and the two shapes will merge. Just follow the next step.

17 Press and hold Shift and click the right arrow key on your keyboard once. This will move the shape by 10 pixels exactly. Release the Shift key. Now press the right arrow key five times. This will move the shape further by 5 pixels. Finally, the copy of the rectangle will be placed at the distance of 15 pixels from the original one.

18 Repeat this process until the white stripes cover the whole of the blue rectangle area. Make sure that there are a few stripes outside the blue area, both on the left and right.

You can make this task easier for yourself by selecting both stripes, then copying, pasting and moving them to the right distance. After that, select the four stripes and so on. This will cut down your copy-paste-move work significantly. Here’s how your final result should look like:

On a sideline note, if you need stripes like these as an image, make sure to check out the great background stripes generator. You may even import the image directly into your Flash file. It will be a little bit heavier, but you will cut down the design time.

Animating the white rectangular stripes

19 Use the Selection tool (V) to select all the stripes. Just click and drag to encompass all of them.

20 Select Modify > Convert to Symbol (shortcut key: F8). The symbol should be a Movie clip and the registration point the same as before. Call this movie clip stripes and click OK.

21 Right-click on frame 23 in the blue background layer and select Insert Frame from the context menu.

The context menu is the one that appears when you right-click anywhere in Flash, and has different options depending on where you clicked.

Your timeline should now look like this:

Why was this made? Because the blue background layer should last as long as the animation, which you are going to make now.

22 In the stripes layer, right-click on frame 23 and select Insert Keyframe from the context menu.

In the previous step, you have inserted a frame, because you just prolonged the duration of the background — the time span during which it is visible. Here, you are inserting a keyframe because you are going to animate the stripes. So, whenever a change must occur in the timeline, a keyframe is being inserted.

Here’s how your timeline should look like now:

23 You will now move the stripes movie clip in this keyframe. Select the stripes movie clip by clicking on it once with the Selection tool (V).

Move the stripes movie clip 14 pixels to the right either by pressing the right arrow key fourteen times or by holding Shift, clicking the right arrow key once and then releasing Shift and pressing the right arrow key four times.

You can also do this by entering the right coordinates in the Property inspector. The initial horizontal position (its X coordinate) of the stripes movie clip in my case was -60, so the new one is -46. This may differ for you, depending on the width of your stripes movie clip. The important thing is to move it by 14 pixels to the right.

24 Now right-click anywhere between the two keyframes on the stripes layer and select Create Motion Tween from the context menu.

Your timeline should now look like this:

25 Test your movie by selecting Control > Test Movie or pressing Ctrl+Enter. You should have a seamless animation. Below is the example which shows the animated stripes moving properly and also how they look like when the animation isn’t done correctly.

In the example where the animation is flawed, the stripes “jump” just because they were moved only 12 pixels to the right instead of 14. Yes, even a pixel or two make a huge difference when delicate and precise animations in Flash are being created.

So, if you happen to have the same “jump” in the animation as the example shows, just move your stripes movie clip in the 23 frame by 1 pixel either to the left or to the right and then test your movie again. If the animation plays even worse then before, then you must move the movie clip in the opposite direction. Play around with it until you get it right.

Also, remember that the 14 pixels by which the movie clip was moved in this example isn’t an absolute value. This is just fine for this animation. You will create many more animations in your Flash explorations and work, which will all have different settings and parameters that you will need to tinker with to get them right. That’s the beauty of learning and working — everything becomes easier with more practice and each time you learn something new .

Masking the animation

The stripes’ animation that indicates some content is loading is fine in this example — it does not spill over the visible edges of the menu. But what if the menu were smaller than the stage or if you had some colored background for your movie? Then the stripes would protrude from the menu and that would look bad. There is a really simple solution that will ensure that the stripes stay visible only inside the blue background area — a mask.

26 Lock the stripes layer and unlock the blue background layer.

27 Click on the big blue rectangle with the Selection tool (V) to select it. Then press Ctrl+C to copy it.

28 Lock the blue background layer. Make a new layer above the stripes layer and call it mask.

As you can see, a frame has automatically been added to frame 23 of the new layer, to last as long as the ones below it. This is exactly what you need, because the lifespan of the mask in the timeline must be exactly long as the content below it that is going to be masked — the stripes animation in this case.

29 Select Edit > Paste in Place to paste in place the big blue rectangle here.

If you want, you can change the color of the rectangle in the mask layer, just so that you know this is the mask and not the blue background when editing or modifying your Flash document later. You can do this without any worries, because a mask is invisible.

30 Lock the mask layer. Next, right-click on it and select Mask from the context menu.

As you can see on the screenshot below, the stripes layer has automatically become the masked one. The two green icons indicate the mask and the maskee.

You can test your movie if you want now (Ctrl+Enter). You will not see an apparent change. But, as I said, if you had a dark background for your movie, the stripes would not be seen outside the menu, thanks to the mask.

Making the buttons for the menu

31 Make a new layer and call it buttons.

32 Select the Rectangle tool (R). Draw a 88 by 22 pixel borderless rectangle. As you know by now, you can set these dimensions directly in the Property inspector. Use any color you like for the fill, for now.

I have hidden the mask and stripes layers so that I can work more easily, and I recommend that you do the same until you have finished creating this button.

33 Select the Paint bucket tool (K) and go to the Color Mixer panel. You will make a linear gradient now, following the same procedure described in step 9 of this tutorial. Choose the Linear type for the fill, like you did before.

Select a hue of yellow for the color on the left (I used #FFDA39) and an orange hue for the color on the right side of the linear gradient (my choice was #F49302). Both color should have their Alpha properties set to 100% (complete opaqueness). These colors will make an excellent effect when placed against the blue background of the menu.

34 While holding down Shift vertically fill the rectangle with the Paint bucket tool, so that the yellow comes on top.

35 Select the rectangle and press F8 to make a symbol out of it. Pay attention: this time, select Button as type. Call it home and click OK.

36 Double-click on the newly made button symbol on the stage with the Selection tool (V) to enter inside it. As you can clearly see thanks to Flash, you are inside the home button which is itself nested inside the menu movie clip.

37 Select the yellow-orange rectangle inside the button. Press F8 to make a symbol out of it. This time, select Graphic as type, call it button background and click OK. This symbol will be the base for all the buttons that are going to be a part of the menu.

38 Right-click on the Hit frame of the first layer and select Insert Frame from the context menu.

39 Lock this layer and call it background. Make a new layer and call it label.

40 Select the Text tool (T). In the Property inspector, make the following choices:

Choose Static text.
Pick any font you like. Hint: for this menu, sans-serif fonts look really nice .
Choose a big enough size for the font.
Select white for the color.
In the menu that defines how the text will be rendered, choose Anti-alias for readability. Since the buttons won’t be animated, this is a good choice.
Lastly, the Selectable options must stay turned off.

41 Click somewhere over the rectangle and type “HOME”. Hit Esc to exit from the text field and center it over the rectangle either by using the arrow keys or the Selection tool (V).

42 Lock this layer and make a new one above it and call it rollover.

43 Select the Rectangle tool (R) again. Pick a strong red hue for the fill color (I used #D9090E). The Stroke color should stay blocked. Draw a rectangle that is 4 pixels high and slightly wider than the label on the layer below it. Center it below the label.

44 In the rollover layer, click on the keyframe in the Up state and drag it onto the Over state.

45 Right-click on the Hit state’s frame and select Remove Frames from the context menu. Repeat this for the Down state. Your button’s timeline should look like this in the end:

Test your movie (Ctrl+Enter). Roll your mouse over the button and the red rectangle that underlines the label will appear, and disappear once you place your cursor outside the button.

Top of page

Making the remaining menu buttons

46 Open the Library by selecting Window > Library. Inside, all the symbols that you have made so far are stored.

47 Find the home button that you have just completed. Right-click on it and select Duplicate from the context menu.

48 In the Duplicate Symbol window that will show up, type in services as the new symbol’s name, leave the Button type and click OK.

49 Double-click on the services button symbol’s icon in the Library to acces the symbol’s timeline.

50 Once inside, unlock the layer label and select the Text tool (T), then click on the text field and replace the text “home” with “services”.

Press Esc to exit the text field and center it in relation to the background rectangle if necessary.

51 Lock the layer label and unlock the rollover layer. Go to the Over frame and click on the thin red rectangle to select it. In the Property inspector, change the rectangle’s width (the W field found on the left side of the panel) to about 55-60 pixels so that it is a little bit larger than the button’s label. Center it.

52 Repeat the steps 47 through 51 three more times, so that you have five buttons in total. Call the remaining three buttons “products”, “quality” and “about us”, or whatever you deem appropriate for your website.

53 Once you have completed all the buttons, click on the Scene 1 link on the top of your document window, no matter which button you are currently inside in.

Finalizing the menu buttons

54 Use the Selection tool (V) to double-click on the menu movie clip to enter inside it. The buttons layer should be unlocked from before.

55 Drag all the four buttons from the Library into the buttons layer and arrange them properly.

56 Select the first button, home. (Click on it once, not twice, because you don’t need to enter inside it, just select it.)

57 Go to the Property inspector and find the Instance name option on its left side. Type home_btn inside it and hit Enter to confirm that.

58 Repeat the previous step for all remaining buttons: call them services_btn, products_btn, quality_btn and aboutus_btn.

Creating the movie clip for loading information display

59 Lock the buttons layer, then create a new one above it and call it preloader.

60 Using the Rectangle tool (R) draw a 120 by 17 pixel rectangle and place it above the buttons, centered horizontally inside the menu. Fill it with white color, with Alpha set to about 34%.

61 Select the rectangle and press F8 to convert it to a symbol. Choose Movie clip as type, call it loading info display and click OK.

62 With the newly made symbol selected, go to the Property inspector and give the Instance name loadinfo_mc.

63 Double-click the loadinfo_mc movie clip to enter inside it. Call the first layer background and lock it. Create a new layer inside the movie clip and call it text.

64 Select the Text tool (T). Make the following changes and selections in the Property inspector:

Change the type of the field to Dynamic text.
You can keep the same font as before, so that the menu looks more coherent. If you find a different font that will look even better, go for it !
Increase the font size a little bit. The font size I chose for the buttons was 14, and here it is 16.
Use the white color for the font, but turn its Alpha to 100%.
Select the central alignment.
You can keep readability as the Anti-alias option.
The Selectable option should stay turned off.
Single line, and not multiline should be selected.

65 Click and drag your mouse to create a text field. Press Esc to exit the text field.

66 While the dynamic text field is still selected, go back to the Property inspector and click the Embed buttton.

In the Character Embedding window, select the Numerals option (see 1 below). Then, enter the characters “LOADING“, a blank space (that’s right, press the space bar too) and the percentage sign: % (see 2) . Click OK.

These are all the characters you need for the loading information that is going to be displayed. You must embed them if you want all the users who will visit your Flash website to see the same font. Because it is highly improbable that every, if not any, user has that nice exotic font you like installed on her machine .

Also, the blank space is needed if you want everything to be displayed properly. The information on the rendering of a non-breaking space character is included in every font too. If you don’t embed it, Flash will improvise and that won’t look as good as it can when it is embedded within the text field.

You can type in lowercase letters if you prefer them for your design. Just be sure to update your ActionScript code later accordingly.

67 Now go to the left side of the Property inspector and assign an Instance name to your dynamic text field, to be able to manipulate it via ActionScript later. Call it infodisplay_txt.

68 Click the appropriate link above the layer to return to the main scene.

69 The menu movie clip should be selected. Go to the Property inspector and assign it the Instance name menu_mc.

Excellent! You have just completed the menu and all the elements of the preloader! Continue to see where to place the content for your Flash website.

Making the initial Flash website content and creating a placeholder for the external content

70 Lock the layer with the menu and call it menu (duh!). Make a new layer above it and call it content.

71 Create some graphics here that will represent the home (first) section of your Flash website. I have inserted a cool image. If you haven’t got any idea yet, just insert any image here for the purpose of this lesson.

Pay attention to one thing: place the graphics a few pixels below the menu and align them with the stage’s left edge, so that it looks nice and neat.

72 Select the image/content you have placed here and press F8 to make the conversion to a symbol. Select Movie clip as type and call it site contents. Click OK.

73 Give an Instance name to this movie clip: call it content_mc.

74 Enter inside the movie clip by double-clicking on it.

75 Inside the movie clip, select the image/graphics again and press F8 again to make a new movie clip out of it. Call this one home content and click OK.

76 Give an Instance name to this movie clip too: call it homecontent_mc.

77 Lock this layer and call it home content. Make a new one above it and call it external content.

78 Select Insert > New Symbol. In the window for symbol creation that appears, select Movie clip as type, call it empty movie clip and click OK. You will be presented with a blank workspace. You can create new contents here, but you don’t need it, because this movie clip must stay empty. So just click on the Scene 1 link.

79 Flash will return you to the main scene. Double-click on the menu_mc movie clip to go back inside it. The external content layer should still be unlocked, and here’s where you’ll place the empty movie clip. You can hide the home content layer to better see what you’ll do next.

80 Go to the Library (Window > Library). You will find the empty movie clip symbol there. Click it and drag it out onto the stage. It will land into the external content layer. As you can see, the empty movie clip is represented only by its registration point:

81 Place the empty movie clip so that it is perfectly aligned with the stage’s left edge — meaning that it’s X coordinate should be zero (0). As for the vertical position, place it a few pixels below the menu, like you did with the graphics a little bit earlier.

82 Give it an Instance name: placeholder_mc, for example.

This movie clip is very important: in it, the external contents will be loaded (other website sections in external SWF files).

83 Go back to the main scene by clicking the Scene 1 link above the layers.

Yes! You have just finished creating all the visual elements of this menu system. Now comes the ActionScript code and a few more things that you must make to be sure that everything will work properly.

Inserting the ActionScript code that powers the menu and the preloader

84 Lock the content layer and make a new layer on top of it and name it actions.

85 Select the first keyframe of the actions layer.

86 Select Window > Actions (shortcut: F9) to open the Actions panel and insert the following code inside it:

menu_mc.stop();
var section:String = new String();
var menu:MovieClip = menu_mc;
var startSection:MovieClip = content_mc.homecontent_mc;
var externalSections:MovieClip = content_mc.placeholder_mc;
var percentageDisplay:MovieClip = menu_mc.loadinfo_mc;
percentageDisplay._visible = false;
var loader:MovieClipLoader = new MovieClipLoader();
loader.addListener(this);
function onLoadInit(externalSections:MovieClip) {
menu.stop();
percentageDisplay._visible = false;
}
function onLoadProgress(externalSections:MovieClip, loaded:Number, total:Number) {
if (section != "home") {
externalSections._visible = true;
startSection._visible = false;
percentageDisplay._visible = true;
menu.play();
var percent:Number = Math.floor(loaded/total*100);
percentageDisplay.infodisplay_txt.text = "LOADING: "+percent+"%";
}
}
menu.home_btn.onPress = function() {
menu.stop();
percentageDisplay._visible = false;
section = "home";
startSection._visible = true;
externalSections._visible = false;
};
menu.services_btn.onPress = function() {
section = "services.swf";
loader.loadClip(section, externalSections);
};
menu.products_btn.onPress = function() {
section = "products.swf";
loader.loadClip(section, externalSections);
};
menu.quality_btn.onPress = function() {
section = "quality.swf";
loader.loadClip(section, externalSections);
};
menu.aboutus_btn.onPress = function() {
section = "aboutus.swf";
loader.loadClip(section, externalSections);
};

Before explaining how this code actually works, it will be a good idea to test your movie first.

Testing your movie and seeing the preloader at work

87 Now, find four different SWF files (you probably have a lot of these on your hard drive, since you’re learning Flash ) and place them in the same folder where your FLA (the one you are currently working on) is. Whatever these files’ current names may be, rename them to services.swf, products.swf, quality.swf and aboutus.swf. For testing purposes in this lesson, try finding SWF files that are between 60 and 120 KB in size. Of course, when you’ll be building your Flash website, these files can have any size that will suit your needs.

If you don’t happen to have any SWFs at hand now, you can easily create them for testing purposes. Do it like this: open a new Flash document and save it in the same folder where your menu with preloader FLA file is. Insert an image (JPG, GIF, PNG) into it by choosing File > Import > Import to Stage. Find an image that has a file size of anywhere between 60 and 120 KB, select it and click the Open button in the Import window. Then press Ctrl+Enter (or choose Control > Test Movie). Once you do this, the SWF will automatically be created, and in the same folder as your main file with the menu. Of course, don’t forget to rename the new SWF file.

88 Go back to your menu with preloader. Select Control > Test Movie. The Flash movie will load instantly, which is normal, because you’re testing it locally and not loading it from the Web. Click the menu buttons to see the content change appropriately. Everything should work fine if you followed the steps up to this point exactly as I laid them out. But now, you must see if the preloader works.

89 While still in the Flash movie test window, select View > Download Settings > 56K. This speed simulates a classic 56K modem. It is ok to simulate the download at this speed, since you can’t suppose that all of your website users have access to a broadband Internet connection. Unless you are specifically making a website for broadband speeds, that is.

90 Now select View > Simulate Download. The SWF will be reloaded and restarted, as if it were viewed over the Web with a 56K modem. And that’s why you will see a blank screen for about 10 seconds. Since there is no main preloader for the menu and the home (start) content, this is normal. It takes some time for it to load on this simulated speed. Don’t worry, you will see how to do this too later.

Once the interface loads, click any of the menu buttons. The preloader should kick in, showing the percentage of the size of the external SWF that has been loaded so far, while the stripes beneath it should move.

Everything should work fine. If there seems to be a problem, check out if your SWF files have the same names as they appear in the code (the names are mentioned in step 87). Also, make sure that the instance name of every movie clip and button is the same as the one in the ActionScript code.

The ActionScript code behind the menu preloader system explained

The first line of ActionScript,

menu_mc.stop();

Stops the menu_mc movie clip from playing. Every timeline animation in Flash plays automatically, so you have to stop it via ActionScript if you don’t wish for it to start moving. The animation inside the menu_mc are the white stripes that you made earlier.

Next, the section variable is defined, which will store the name of the section that must appear once the user has clicked on the appropriate button. This is a text value and text values are called Strings in ActionScript, as in most programming languages. You are just defining the variable here, values will be added later.

var section:String = new String();

Four more variables are defined next:

var menu:MovieClip = menu_mc;
var startSection:MovieClip = content_mc.homecontent_mc;
var externalSections:MovieClip = content_mc.placeholder_mc;
var percentageDisplay:MovieClip = menu_mc.loadinfo_mc;

All these variables are of the MovieClip type. You are not creating new movie clip instances here, you are merely making shorthand names for existing movie clips that you have created earlier. This is just to make your life easier — to reduce the amount of typing that has to be done.

Look at this example: let’s say that you need to reference the menu_mc movie clip from within the homecontent_mc movie clip. In that case, you would have to reference it like this:

this._parent._parent.menu_mc

That is a pretty long reference, although valid and completely correct. You would have to write it like that, because the homecontent_mc is itself inside content_mc, its parent movie clip (_parent), which is in turn on the main timeline (_parent), on which the menu_mc resides. And this reference path changes for every movie clip.

So, instead of having to figure out the path each time (and pay attention that it is the correct one), it is much simpler to store the reference to each movie clip that you need inside a variable, like this:

var startSection:MovieClip = content_mc.homecontent_mc;

And that’s just what the four variables mentioned above serve for: easy referencing of movie clips. Any time that you mention the variable menu, for example, inside your code, Flash will instantly know that you are referring to the movie clip menu_mc which is situated on the main timeline. Cool!

The next line of code,

percentageDisplay._visible = false;

Serves to hide the movie clip with the dynamic text field on a white transparent background inside it. This is reasonable: why should the preloader be visible if there is no loading in progress? And there actually is no loading process at the beginning, until the moment a button is pressed by the user.

The percentageDisplay variable is a reference to the loadinfo_mc movie clip which was defined a few lines of code before. By setting its _visible property to false, you are effectively hiding it from the view.

Using a MovieClipLoader object with a listener to preload external Flash content

The preloading system shown in this lesson uses a MovieClipLoader object for external content preloading (in fact, to be exact, this is an ActionScript class, but I won’t delve into that here, for the sake of brevity and simplicity. I will leave that for another tutorial). This object is very useful, because it has built-in methods and properties for preloading that are great, and it can be used to load external SWF files, as well as JPEG, GIF and PNG type of images. It can even load progressive JPEGs and animated GIFs.

So, the first line of this section of code creates a new MovieClipLoader object and stores it in a variable that I chose to call loader.

var loader:MovieClipLoader = new MovieClipLoader();

Next, a listener object is associated with the loader MovieClipLoader. This is done by first writing the instance name of the MovieClipLoader object, which is loader in this case, followed by a dot (.) and the addListener method. Between the parenthesis of this method is the name of the listener object.

A listener object can be a completely new, custom object, created specifically to be a listener, or any existing movie clip. Since the main timeline (the root timeline) in Flash is also considered to be a movie clip, I chose to use it as the listener. The main timeline is referenced here by the ActionScript keyword this. This keyword points to the timeline or movie clip it is placed upon. Since the ActionScript code in this lesson resides on the main timeline, it refers to it directly.

loader.addListener(this);

Let me explain you now in more detail how the MovieClipLoader works together with a listener:

First, you need to have an empty movie clip into which the external content will be loaded. You already did that, when you created the empty movie clip back in step 78 of this tutorial (you called it placeholder_mc, remember).

Then, an instance of the MovieClipLoader object is created (see above).

Next, a listener object is either created from scratch or an existing object (the main timeline in this example) is used as a listener. The listener will listen to what MovieClipLoader does. You can think of it as a small radar that watches the MovieClipLoader object, which broadcasts events to it (it tells the listener that things are happening).

Once things start happening, for example, the MovieClipLoader begins to load external content, and fetches the amount of it that has been loaded so far, etc, the listener will notice this, since it is listening to it. And when it notices these events, it will react by executing the appropriate functions.

Important: for the listener to be able to react properly, these functions must be defined before you tell the MovieClipLoader object to start loading external files. There are two functions that are being used in this lesson’s preloader: onLoadInit and onLoadProgress. Let me clarify them for you, one at a time:

The onLoadInit function is invoked (called) once the external file has been completely downloaded onto the user’s computer from the Web and is ready to be shown, manipulated, etc.

function onLoadInit(externalSections:MovieClip) {
menu.stop();
percentageDisplay._visible = false;
}

The parameter between the onLoadInit function’s parenthesis is a reference to the movie clip into which the external content is being loaded. This is the empty movie clip that is referenced by the externalSections variable in this example.

In this example, I made the following things happen once the external content has been completely loaded: the stripes inside the menu will stop moving:

menu.stop();

…and the movie clip with the dynamic text that shows the percentage information during the loading process is being made invisible:

percentageDisplay._visible = false;

Basically, all the things that are visible during the loading process are hidden once the download is complete.

Both event handler functions used here that are associated with the listener, onLoadInit and onLoadProgress are not written with the name of the listener preceding them, and they should. Why? Simply because they are placed on the main timeline, which is the listener in this case.

Had that not been the case, for example, if the menu_mc movie clip were the listener, you would have to write them like this:

menu_mc.onLoadInit… etc

menu_mc.onLoadProgress… etc

But, since the root timeline is assigned to be the listener, you just write the keyword function and everything’s just fine. You don’t even have to use the keyword this.

Next, the onLoadProgress function is used to monitor the loading process. Every time a piece of external file has been downloaded to the user’s computer, the loader MovieClipLoader object tells this to the listener, which reacts by calling the onLoadProgress function.

function onLoadProgress(externalSections:MovieClip, loaded:Number, total:Number) {
if (section != "home") {
externalSections._visible = true;
startSection._visible = false;
percentageDisplay._visible = true;
menu.play();
var percent:Number = Math.floor(loaded/total*100);
percentageDisplay.infodisplay_txt.text = "LOADING: "+percent+"%";
}
}

The onLoadProgress function accepts three parameters:

The first one, externalSections, just like in the previous function, is a reference to the empty movie clip into which the external content gets loaded.

The second one, loaded, is the number of bytes that have been downloaded to the user’s computer so far. This value gets updated each time a new piece of data gets downloaded — that’s why this function is great for monitoring the progress of a download. This happens automatically, meaning that there is no need for you to tell Flash to look it up or explain to it what is the loaded parameter. It knows immediately that the second parameter refers to the amount of bytes loaded so far. Also, you can call it as you like: I picked loaded because it seems nice. You can also call it loadedbytes, downloadeddata or anything else that seems right to you.

The third one, total, looks at the total size of the external file that is being loaded, the value of which is expressed in bytes, just like it was for the previous parameter.

And now, let me show you how this function makes the preloader actually work. Inside the onLoadProgress function there is an if conditional statement. All the code is included inside it. This means that it will get executed only and only if the condition turns out to be true. Let’s see this condition. It says that:

if (section != "home")

Which, translated into English means if the section does NOT equal “home” the condition will be true. This is made with the use of the inequality operator (!=), which compares the two values to see if they do not match.

In this example, this means that only when the value of the variable section does not equal “home”, the code between the conditional statement’s curly braces will be executed. I have made this on purpose, to be able to start the preloader only when a button which triggers the loading of an external SWF file has been clicked. The section variable has been defined at the beginning of the ActionScript code, while its value is set only when a button has been clicked. Remember that the onLoadProgress function has to be defined now, so that Flash can know what to do when ordered to load an external file via the MovieClipLoader object.

So, the preloader won’t start if the Home button has been clicked, because the content for the “home” section is already incorporated in the main movie — it is not stored in an external SWF file, like the other sections are.

And when a button other than “home” has been clicked, the code inside the if statement gets executed:

externalSections._visible = true;
startSection._visible = false;
percentageDisplay._visible = true;
menu.play();
var percent:Number = Math.floor(loaded/total*100);
percentageDisplay.infodisplay_txt.text = "LOADING: "+percent+"%";

The first line makes visible the movie clip which holds the externally loaded SWF (externalSections._visible = true;). You have to make it visible here, because it was hidden initially. Next, the “home” section is made invisible: startSection._visible = false. These changes have to be made, so that the initial content (”home”) does not visually interfere with the other sections’ content.

The third line makes the preloader movie clip visible (the one with the text field inside it): percentageDisplay._visible = true.

The fourth one gets the stripes moving, to further add to the loading effect: menu.play();.

And now you have two lines with some simple mathematical calculations that enable you to show the amount of the external SWF loaded so far, expressed as a percentage:

var percent:Number = Math.floor(loaded/total*100);
percentageDisplay.infodisplay_txt.text = "LOADING: "+percent+"%";

The value of the percent variable is calculated by Flash like this: the number of bytes loaded so far are divided by the total number of bytes the file has and then multiplied by 100 (loaded/total*100). The result is then rounded with the Math.floor method, which rounds the resulting number in the parenthesis to the lower whole number. For example, if the number is either, let’s say, 43.1, 43.8 or 43.5, it will always be rounded to 43. This is used to display a neat whole number in the text field, without any trailing digits.

And then you order Flash (see second line of code above) to display that number in the infodisplay_txt text field, along with the word “LOADING” and the percentage sign (%). Simple, isn’t it? No rocket science .

And now you’ll see how this process gets started, once the user has clicked a menu button.

The ActionScript behind the buttons’ functionality

All the buttons in this project are set up so that they react to the onPress event. This event happens when a user clicks on a button — immediately when the mouse button is pressed, without having to be released. And so, each button has its onPress event handler function set up that is executed as soon as the click happens: the code inside the function (the one included between its curly braces) is the one being run.

I will first explain to you how the “Home” button works, since this particular button has a different functionality then all the other menu buttons. The main difference being that the “Home” button doesn’t start the loading of external content.

menu.home_btn.onPress = function() {
menu.stop();
percentageDisplay._visible = false;
section = "home";
startSection._visible = true;
externalSections._visible = false;
};

The first line inside the function stops the menu animation (the white stripes): menu.stop(). This is done so that they stop moving if the “Home” button was pressed when some external content was loading. This means the case in which the user has pressed any other button and the external content started to load, and the preloader/stripes animation kicked in. So you have to stop it once the “Home” button was clicked.

After that, the textual preloader has to be made invisible:

percentageDisplay._visible = false;

And the section variable’s value is set to “home”:

section = "home";

The last two lines of code make visible the movie clip which holds the “home” section’s content and invisible the one which serves as the placeholder for the external content:

startSection._visible = true;
externalSections._visible = false;

All the remaining buttons have the exact same functionality, only with a different parameter that is set up inside them. Let’s have a look at the “services” menu button, for example.

menu.services_btn.onPress = function() {
section = "services.swf";
loader.loadClip(section, externalSections);
};

The first line inside the button’s onPress event handler function defines the value of the section variable:

section = "services.swf";

This value (services.swf in this case) has a dual purpose: it is the name of the external SWF that will be loaded, and it also sees that the loading actually starts, because, if you remember, the loading process will start only if the section does not equal “home”:

if (section != "home")

This was defined in the onLoadProgress function before.

And now, the actual loading is triggered by calling the loadClip method of the loader MovieClipLoader object:

loader.loadClip(section, externalSections);

The loadClip method can be used to load external content, namely these kinds of files: SWF, JPG (both non-progressive and progressive, as of Flash Player 8), GIF (ordinary and animated ones) and PNG.

The first parameter inside the loadClip method’s parenthesis is the name of the external file that has to be loaded. Here, it is a variable: section. Its value was defined a moment ago, in the previous line of ActionScript code. When you are using a variable, you write the variable’s name, without the quotation marks. If you are referring to a file name directly, you must use the quotation marks, for example:

loader.loadClip("mycontent.swf", externalSections);

This can also be a path, for example:

loader.loadClip("myflashfiles/mycontent.swf", externalSections);

I have avoided storing the sections in a separate folder and thus didn’t need to use a path to the sections’ files, just for the sake of simplicity. However, there is an important thing that you should be aware of:

Concerning the loading of external data with the loadClip method, the Flash help (the one that shows up when you press F1 in Flash) states that “A relative path must be relative to the SWF file…” I found out that this is NOT the case. The path to the external file must be relative to the HTML file inside which your main SWF file is embedded!

The second parameter is the empty movie clip into which the external content will load, which is externalSections in this example (a reference to the placeholder_mc movie clip).

And as soon as Flash reads this last line of code, the MovieClipLoader object and the listener spring to life, making the preloader work. All the other buttons work exactly the same, the only difference being the value of the section variable.

There remains one thing to be done: create the preloader for the main movie.

Adding a scene for the main preloader

91 Back to your Flash document, select Window > Other Panels > Scene.

92 The panel for managing the scenes in your document will appear. Double-click on the Scene 1 name and change it to main. Hit Enter to confirm that.

93 Click the Add scene button (the plus icon) at the bottom of the Scene panel.

94 Call the new scene preloader. Next, click on it and drag it above the main scene.

This is done so that the scene with the main preloader will appear first. Different scenes in Flash are all part of the same timeline, which plays out sequentially, with the scene that is on top of all the other ones in the Scene panel appearing first.

Creating the main Flash website preloader

95 Create the same big blue rectangle which you have drawn at the beginning of this tutorial. Its dimensions are 480 by 52 pixels. You can copy the one from the main scene if you want and place it here, in the preloader scene.

96 Go to the Library (Window > Library). Find the loading info display movie clip. Click on it and drag out an instance of it onto the scene. You can place it right over the blue rectangle — they won’t interfere with one another, since the rectangle is a simple drawn shape and the other one a movie clip symbol.

97 Select the loading info display movie clip and go to the Property inspector. Assign it the Instance name mainpreloader_mc.

You can leave the instance name of the dynamic text field inside it as it already is, infodisplay_txt.

98 Lock the current layer and call it preloader. Make a new layer above it and call it actions. You can lock this one too, since you can insert ActionScript code inside it, without it having to be unlocked. Select the first keyframe of the actions layer.

99 Open the Actions panel by selecting Window > Actions. Insert the following code here:

var loadedData:Number = this.getBytesLoaded();
var allData:Number = this.getBytesTotal();
var percentageLoaded:Number = Math.floor(loadedData/allData*100);
mainpreloader_mc.infodisplay_txt.text = "LOADING: " + percentageLoaded + "%";
if (percentageLoaded >= 100) {
gotoAndStop("main", 1);
}

This is an old-school preloader compared to the one you made for loading external content. It fetches the loaded number of bytes via the getBytesLoaded() method and stores it in the loadedData variable. The total number of bytes your main Flash movie has is retrieved via the getBytesTotal() method and is stored in the allData variable. The ActionScript keyword this is used to point to the main Flash movie itself, since it resides on the main timeline.

Then, the percentage calculation is done like it was done previously, using some simple maths. The next line after that writes out the information in the dynamic text field, which is inside the mainpreloader_mc movie clip. The conditional if statement tells the movie to jump to the main scene (where the site content lies) and stop there once all of the Flash document has been loaded.

But, for this code to work — to be able to actually use the preloader as the loading goes, you must create a small looping animation on this scene.

100 Right-click on frame 2 of the preloader layer and select Insert Frame from the context menu.

101 Now right-click on frame 2 of the actions layer and select Insert Keyframe from the context menu.

You need a keyframe in the actions layer because you are going to insert additional ActionScript code here. The preloader layer needs only a frame, because no changes will be made inside it, it just needs to span the two frames.

102 With the second keyframe in the actions layer selected, open the Actions panel (shortcut key: F9). Insert the following code inside:

gotoAndPlay(1);

This will send the playhead back to to frame 1 of this scene. This will go on (the looping animation), until your Flash movie has been fully loaded. Then the if conditional statement on frame 1 will turn out as true and will send the playhead to the main scene and stop it there.

And that’s it! You have just finished making a fully working Flash website navigation and loading system! Congratulations!

Conclusion

The menu/loading system that you learned to create with this lesson is just one of many possible solutions for creating an effective Flash navigation system. You can create many variants based on this example, expand on it and build further solutions that are even more modular and extendable.

Related posts brought to you by Yet Another Related Posts Plugin.

Create A Cool Colorful Arcade Layout

admin — Sun, 28 Mar 2010 18:01:58 +0000

In today’s tutorial we will create a clean and colorful arcade layout. This tutorial was create to teach the readers how to create different content boxes. hope you enjoy!

Preview:

Create a new photoshop document

1 Open up Photoshop, create a new document that is 1200px by 1300px, with a background color of #2d2d2d

Creating the background

2 I found a nice picture of some mountains from SXC and placed the image at the top of the canvas. I then used the eraser tool to lightly blend the background and the image together

Creating header and navigation

3 Select the rectangular selection tool (M). Create a rectangle in the top center of the canvas with a width of 942px and height of 3px

4 Select the gradient tool (G) with the linear gradient option selected. Use the rainbow gradient and drag it from the right of the canvas to the left

5 Select the rectangle tool (U). Create a dark Grey (#292929) rectangle with a width of 942px and height of 95px place the rectangle underneath the rainbow rectangle

6 1px below the rainbow rectangle section create a 1px white (#ffffff) that spans 942px lower the layers opacity to 50%

Creating the main content area

7 Select the rectangle tool (U). Create a white (#ffffff) rectangle with a width of 942px and height of 1093px place the rectangle underneath the header / nav leave a 20px – 30px gap

8 Double click the layer to open the layer styles dialogue box. Use the settings below

Adding a rotator area

9 Select the rectangle tool (U). Create a dark Grey (#292929) rectangle with a width of 924px and height of 286px place the rectangle at the top of the white area

Creating a featured game box

10 Select the rounded rectangle tool (U) with the radius set at 4px. Create a blue (#008fff) rectangle with a width of 331px and height of 78px

11 Double click the layer to open the layer styles dialogue box. Use the settings below

Creating a tabbed game menu

12 Select the rounded rectangle tool (U) with the radius set at 4px. Create a Grey (#3b3b3b) rectangle with a width of 270px and height of 115px

13 Again select the rounded rectangle tool (U) with the radius set at 4px. Create a light blue (#a4d0ff) rectangle with a width of 331px and height of 202px

14 Once again select the rounded rectangle tool (U) with the radius set at 4px. Create a light blue (#a4d0ff) rectangle with a width of 115px and height of 202px place the rectangle to the left of the blue box this should overlap part of the Grey area and create a nice looking tab

Creating the main content boxes

15 Select the rounded rectangle tool (U) with the radius set at 4px. Create a orange (#ffa100) rectangle with a width of 279px try to make the height at least 50px. Select the rectangular selection tool (M) create a selection overlapping the bottom of the rounded rectangle, hit delete

16 Select the rounded rectangle tool (U) with the radius set at 4px. Create a dark Grey (#292929) rectangle with a width of 279px its height should be 170px place the layer behind the yellow bar then raise it until you have something like this

17 Repeat steps 15 – 16 until you have something similar to the image below

Adding a nice sidebar

15 Select the rectangle tool (U). Create a light Grey (#d8d8d8) rectangle with a width of 296px and height of 526px

16 Above the light Grey rectangle box I added an advertisement banners

17 Here is what we should have now

Adding some extra background details

18 I added a render to both sides of the layout. These can be found on Planet Renders

Adding details

Adding the navigation bar

19 To create the navigation bar we need to create a white (#ffffff) 1px line that spans the header area

20 Directly above that select the rectangular selection tool (M) create a rectangle that spans the header its height should be 20px

21 Set the foreground color to #292929 and background to #000000. Select the gradient tool (G) with the linear gradient option selected and drag a gradient from the top downwards. this will create a gradient in the selection

22 Duplicate the layer. select the duplicate and flip it vertically (EDIT > TRANSFORM > FLIP VERTICALLY). Change the layers blending options to overlay and reduce its opacity to 40%

23 I added a logo and some game type categories

24 We are now going to create a drop down list. Select the rounded rectangle tool (U) with the radius set to 4px. Create a rectangle with a width of 259px and height of 192px double click the layer to open the layer styles dialogue box and use the settings below

25 Rasterize the layer and cut the top section away so it smoothly joins the navagation bar

26 I added a rollover state which is a simple arrow facing down which indicates a drop down menu. on the drop down menu I added the same arrows facing right with the games that fit into that category

Adding content to the rotator

27 I added a centered a image i found at SXC to the middle of the dark Grey rectangle

Creating the featured game thumbnail box

28 Create a white (#ffffff) rectangle with a width of 77px and height of 65ox. double click the layer to open the layer styles dialogue box. Use the settings below

29 I added a thumbnail to the middle of the rectangle and to the right I added information about the game

Creating the tabbed game thumbnail boxes

28 Create a light blue (#eef6ff) rectangle with a width of 76px and height of 76px. double click the layer to open the layer styles dialogue box. Use the settings below

29 I duplicated the box and added a thumbnail in the middle of each box. On the right I added the games title, a rating system which I found the icons for at Iconfinder.com and the amount of plays the game has had

Creating the lists for the boxes

30 For the lists throughout the layout I used a image based list. The icon can be found on Iconfinder each one has a 10 – 30px space between them

31 I added game titles next to each icon. I then gave each box/tabbed menu a title, the text has been aligned to the left of the box

Completing the sidebar

32 Select the rectangular selection tool (M). create a rectangle with a width of 282px and height of 46px. Set your foreground color to #679ad2 and background to #85b6ed. Select the gradient tool (G) with the linear option selected, drag a gradient from the top of the selection downwards

33 I added a icon to the left of the title bar, next to that I added the actual title. For the content of the sidebar I added a dual list that contains all the games that would be on the site

Completing the sidebar

34 For the top games box I created the same thumbnail I created in steps 28 – 29 as for the content to the right. i then duplicated the thumbnail/game information until the box was filled

Completing the footer

35 For the footer I created a simple copyright line this is placed to the left

Congratulations!

You have now completed the tutorial design hope you enjoyed it!

Related posts brought to you by Yet Another Related Posts Plugin.

Glowing neon playback control buttons

admin — Tue, 16 Mar 2010 15:51:15 +0000

How to use the basic shapes to create the ones you need,
How to use the great blending filters in Flash 8 pro,
How to combine multiple filters and objects stacked upon one another, and some more.

You can see the example of the sleek buttons below.

Preliminary steps — setting the background

1 Open a new Flash document. Choose Modify > Document (shortcut: Ctrl+J). Select black as document background color. Click OK.

2 Select the Rectangle tool (R). Turn off the stroke color by clicking on the little pencil icon and then the small red-striped square at the bottom of the Tools panel: .

3 Make sure that both the Object drawing and Snap to objects options are turned off: .

4 Click the Set Corner Radius icon () and enter 6 in the window that will show up, click OK. This is done in order to have rectangles with round corners.

5 Draw a flat color (any color will do) 410 by 120 pixel rectangle.

Click on the paint bucket icon to select the fill color.
In the Type menu, select Linear.
Click once on the small colored square found on the bottom right.
In the color code field, enter the hex code #2E70AA (that’s a zero, not the letter O).
Set the Alpha property for this color to 34%.
Set the same color for the left square, but set its Alpha to 100%.

7 Press and hold Shift, click near the rectangle’s top and drag your mouse down until the rectangle’s bottom. Release your mouse button, and there is your nice gradient!

Creating the glowing outer ring

8 Lock the current layer and call it background. Create a new layer and call it buttons.

10 Somewhere over the rectangle, draw a ring (it is a circle, but because of the line thickness and lack of fill, it looks like a ring). Make it 70 by 70 pixels.

Note: all the four squares should have their alpha set to 100% (complete opaqueness). The ring will now look like this:

I have hidden the background layer to work more easily and so that you can more clearly see the various steps.

Click OK. This choice for the registration point will make it easier to align the elements inside the button later.

14 Click on the Filters tab in the Properties panel (see no. 1 in screenshot below). Click on the plus icon (2) and select the Glow filter. Make the adjustements as follows:

Blur X and Y: 8
Strength: 260%
Quality: High.
Color: #ADE2FC.

Leave the Knockout and Inner glow options unchecked. You will get a nice glow for your outer ring:

Making the main button circle

15 Select the ring again and press F8 again, while leaving the same registration point as previously and Movie clip as type of symbol. Call the new symbol play button and click OK.

17 Select the Oval tool (O) again. Go down to the Properties panel. Set #B0E2FD for the outline color and #3A5274 for the fill color. Select Solid as line type and a thickness of 2.

18 Draw a 54 by 54 pixel circle on the stage, anywhere.

The circle will now be perfectly aligned with the play button movie clip’s registration point and also with the ring below it.

20 Choose the Selection tool (V) and click on the fill of the circle once to select it. Press Ctrl+C to copy it.

21 Lock the current layer and call it circle. Make a new layer above it and call it circle overlay.

22 Select Edit > Paste in Place to paste the circle you copied two steps earlier exactly on the same position, but inside this new layer.

You should have three color squares, one in the middle and one on each end of the gradient.
Each square’s color should be white.
The alpha factor of squares on each end should be 41%. The middle one’s should be set to 3%.

24 Use the Gradient Transform tool (F) to rotate the gradient by 90°, just like before. The final result should look like this:

Creating the play icon

25 Lock the circle overlay layer, make a new layer above it and call it icon.

26 Select the Rectangle tool (R). Block the stroke color. Set the fill color to #3A5274. Draw a 33 by 33 pixelsquare anywhere on the stage.

27 Turn on the Snap to Objects option and use the Selection tool (V) to create a triangle out of the rectangle. Do it like this (follow the image sequence below):

Bring the cursor close to the square’s upper right corner.
Click and start dragging down, until you reach the middle of square’s height. Release your mouse button.
Repeat the same thing for the lower right corner of the square, this time dragging the corner towards the point you just made in the previous move. Once near, the corner will snap into place. Release the mouse and there is your triangle.

29 Center the triangle inside the button.

30 Select the Ink bottle tool (S). In the Properties panel, choose Solid as type and set the thickness to 4. Click anywhere on the triangle to give it an outline.

31 Choose the Selection tool (V). Double-click on the triangle’s border to select it.

32 Press Ctrl+X to cut the outline.

33 Lock the icon layer. Make a new layer below it and call it icon outline.

34 Select Edit > Paste in Place to place the icon border here, right below the icon itself.

35 Lock the icon outline layer and unlock the icon layer. Select the triangle inside it.

36 Hit F8 to convert it into a symbol. Call it play icon and click OK.

Blur X and Y: 6
Strength: 240%
Quality: Medium
Color: #ACE0FD
Inner glow must be turned on.

And — ta-daa — here’s the final result, with the background:

Now ain’t it cool? This blue neon glow looks soooo good ! Let me show you now how to easily duplicate theis button and create a stop button out of it.

Creating the glowing stop button from the play button

38 Go back to the main scene by clicking on the Scene 1 link.

39 Open the Library by selecting Window > Library.

41 Double-click on the stop button symbol inside the Library to enter inside it. Unlock its icon layer.

42 Click once on the play icon that is inside it, to select it.

43 Go to the Properties panel and click the Swap button.

46 Click on the stop button link to go back to the movie clip’s timeline.

47 Align the icon in relation to the movie clip’s center.

48 Lock the icon layer. Unlock the icon outline layer. Erase the outline triangle that is inside it.

And finally, here are both the play and stop neon glow buttons, side by side:

Related posts brought to you by Yet Another Related Posts Plugin.

Design a mirror website flash navigation menu

admin — Mon, 08 Mar 2010 15:37:21 +0000

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:

Create simple buttons and duplicate them,
Make your link text look crisp and readable,
Make mirror copies of your buttons easily,
Design and code a simple navigational system.

In the Flash example below you can see what you are going to create with this tutorial. Try clicking the buttons!

Drawing the gradient sky background

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.

Top of page

Creating the menu buttons

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.

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.

Duplicating the other menu buttons from the existing one

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.

Placing the site menu on the stage

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.

Finalizing the site menu by swapping the button symbols

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.

After finishing the part of the menu that will server to navigate through your Flash site, you are going to create the menu’s mirrored reflection.

Making the reflection of the menu

26 Select all of the buttons on the stage. Do this with the Selection tool (V). Click somewhere outside the buttons (for example, on the top left of the menu) and drag your mouse to encompass all of them.

27 Copy the buttons (Ctrl+C) and paste them in place (Ctrl+Shift+V).

28 While holding Shift press the down arrow 3 times to move the copies down 30 pixels from the original symbols.

Release the Shift key and press only the down arrow key five times. You have moved your button copies exactly 35 pixels downwards.

If you followed the dimensions I gave you at the outset of this tutorial for creating your buttons, the copies will be now spaced just a few pixels from the originals. This will make for a nice and more realistic mirror reflection effect. Also, you don’t want to move your mirrored buttons too far from the real menu, to save space.

29 Keep the copies you just moved down selected. Select Modify > Transform > Flip Vertical.

You have just made a mirror reflection of the menu. Now ain’t that easy? Sure it is But let’s give it a more realistic look.

30 You must have your reflection buttons still selected. In the Properties panel, click on the Filters tab (1 in the image below).

Then click on the little blue plus icon (2) and select the “Adjust color” blending filter. The controls for adjusting the colors of your buttons will appear.

By dragging their respective sliders to the left, set the Brightness to -18 and Saturation to -36. Or just enter these values manually in the appropriate fields. Leave the other two values (Contrast and Hue) at zero.

31 Click on the Properties tab (right next to the Filters tab you clicked in the previous step). Select Alpha from the Color menu and set it to 41%.

32 Lock the current (menu) layer. Create a new layer between the two existing ones and call it blue background.

You will draw a blue gradient here. This will make your navigational header look more realistic and beautiful. Since you already have a sky-like graphic behind your menu, it makes sense to create a reflection of it too.

33 Select the Rectangle tool (R). Block the outline color and select a fill color that is in good contrast with the existing graphical elements. You are doing this only to draw and position your rectangle more easily. You will change its color to a gradient later.

Draw a rectangle that 48 pixels high. The width isn’t important – only make it the same size as the scene or wider than that.

It is important to place the rectangle so that its upper edge is between the real buttons and their reflections.

Unselect the rectangle by clicking on an empty part of the scene with the Selection tool (V).

34 Go to the Color Mixer panel, click on the paint bucket icon to adjust the fill color (and not the outline – the pencil icon – just in case it is selected by default). Select Linear as fill type. Make the following choices for your gradient:

The first color (little square on the left) should be set to #B6E2FA and the second to #78B0E9. Leave the alphas for both colors at 100%. Leave the left color on the gradient’s left edge and move the right one a little bit inside (just click on the quare and drag it).

This gradient is just a little bit different from the one you made in step 4.

35 Select the Paint bucket tool (K), click on the rectangle’s bottom edge and start dragging upwards to make a vertical fill. In this way, the darker color will be at the top.

You don’t have to make the exact mirror copy of the sky beneath the menu buttons. What you’re making now will look very nice and interesting.

36 Select the rectangle and copy it (Ctrl+C). Lock the current layer (blue background).

37 Make a new layer above all the existing ones and call it overlay.

38 Paste in place (Ctrl+Shift+V) here the rectangle you just copied.

39 Go back to the Color Mixer panel and make the following gradient: you must have four color squares. Add a color square just by clicking anywhere between the two existing ones.

All the squares should have their color set to pure white (#FFFFFF). But their alphas should have the following percentage values (from left to right): 100, 79, 50 and 28.

Drag the squares so that they look like shown on the image below.

Lock this layer.

Now isn’t this a nice menu with its mirror reflection below it? Sure it is

Before making your menu functional via ActionScript, you must first make place for the different sections of your site, which is exactly what you will do in the next few steps. Onward!

Setting up the navigation system for your Flash website

40 Make a new layer on top of the existing layers and name it site content.

41 Right-click on frame 5 of the newly made layer and select Insert Keyframe from the menu.

42 Draw any kind of content here. Paint something with a brush, make a circle, anything at all. This is just temporary dummy content. Don’t lose time on making real content now, you will do it later. Follow through to the end of this lesson, it is easy to make changes later.

43 Repeat the previous step 3 more times: right-click on frames 10, 15 and 20, select Insert Keyframe from the menu and insert some kind of dummy content there.

You can draw over the existing content or erase it and make something new. I am telling you this because when you insert a keyframe into a layer, Flash automatically copies the content from the previous one, if there existed something.

44 When finished, go back to the first keyframe of this (site content) layer by clicking on it (standard left mouse click). Create some content here too. Write “home” or draw a house

Your timeline should now look like the one shown on the image below.

45 Lock this layer and make a new one above it and name it labels.

46 Click on the first (and only, so far) keyframe of the labels layer to select it. Go to the Properties panel – you’ll find the “Frame label” input field on its left side.

Click inside it, type home and hit Enter to confirm.

47 Still in the same layer, right-click on frame 5 and select Insert Keyframe from the menu. Do this again for frames 10, 15 and 20. Your upper two layers should have keyframes in exactly the same places.

48 Click on the frame number 5 to select it. Go again to the Properties panel and give it a name: gallery. Repeat this for the remaining three keyframes (10, 15 and 20): call them music, links and contact, respectively. All these frame labels will be visible on the timeline.

Lock this layer.

49 Right-click on frame 20 of the overlay layer and select “Insert Frame” from the menu (not Insert Keyframe).

This will make this layer’s content appear throughout your flash site. If you don’t this, these contents will only be visible on the first keyframe, at the beginning.

And of course, all the other menu elements must be visible throughout the timeline. So make this for each of the remaining layers: menu, blue background and sky.

Below you can see the final look of the timeline.

Now that the site’s navigation system is in place, you will name your buttons (all of them) so that you can issue them commands programatically later.

Naming the menu buttons

50 Unlock the menu layer. Select the Selection tool (V). Click somewhere on stage to unselect anything and everything that might be selected.

51 Click on the first button on the menu from the left to select it (the Home button). Don’t click it’s reflection.Go to the Properties panel, and enter its Instance name in the appropriate field: call it homeBtn. Hit Enter to confirm.

52 Repeat the procedure from the previous step for each one of the menu buttons: call them galleryBtn, musicBtn, linksBtn and contactBtn, respectively.

The Instance names make possible to control your buttons via ActionScript.

You must always give unique names to your buttons, keyframe labels and movie clips. You can’t have two objects in your Flash movie which have the same name. That’s why you had to call the first keyframe home and its corresponding button homeBtn. Also, remember that ActionScript is a case-sensitive programming language. If you called your button galleryBtn and later typed it as gallerybtn in your ActionScript code, your button will not function because those are two different Instance names. So, keep track of your Instance names and always type them in your code exactly as you have when you named your objects.

53 Now, select the first mirror button – the reflection of the home button (the first from left in the second row). Give it an Instance name – call it homeBtn1.

Why give Instance names to these mirror buttons? Well, precisely because their purpose is to serve only as visual elements – mirrored reflections of real menu buttons. If you left them like this, when a user moved his mouse over them, the hand cursor would have appeared. This would create a really inappropriate confusion. You must always be user-friendly! So, you are naming these mirrored buttons to turn them off later via ActionScript. Once you are going to do that, they won’t function anymore, and will just be graphical elements, which is what you want to accomplish!

54 Give Instance names to all the other mirrored menu buttons: call them galleryBtn1, musicBtn1, linksBtn1 and contactBtn1.

Writing the ActionScript code that powers the menu and the website navigation system

55 Lock this (menu) layer. Create a new layer above all the others and call it actions.

56 Click on the first (and only) keyframe of the new actions layer to select it.

57 Open up the Actions panel (Window > Actions). Write the following line of code inside:

stop();

This simple command stops your movie from going on and looping endlessly.

Now, I want you to do a little test. Test your movie (Control > Test Movie). Move your mouse accross the buttons and their reflections (mirrored buttons). As you can see, the hand cursor will appear over both the menu and its mirror image. And you don’t want that, so now I am going to show you how simply it is to disable these buttons.

58 Write this piece of ActionScript just below the first line you entered in the previous step:

homeBtn1.enabled = false;
galleryBtn1.enabled = false;
musicBtn1.enabled = false;
linksBtn1.enabled = false;
contactBtn1.enabled = false;

Test your movie again (Ctrl+Enter on a PC, Cmd+Enter on a Mac). Move your mouse over the reflection buttons. As you can see, there’s only the standard arrow cursor now – the hand cursor doesn’t appear anymore. You can even try clicking on them – nothing will happen.

Yep, it is that simple! The enabled property of the button symbol can have two values: true or false. By default, it is set to true. So when you set it to false, the button is visible, but doesn’t function any more – it cannot be clicked, even if you tell it to do so via ActionScript. The button stays disabled until its enabled property is set to true again (of course, you’ll leave it at false for the reflected buttons).

59 Append your code with the following lines (again, just put it after the existing code):

homeBtn.onRelease = function():Void {
gotoAndStop("home");
}
galleryBtn.onRelease = function():Void {
gotoAndStop("gallery");
}
musicBtn.onRelease = function():Void {
gotoAndStop("music");
}
linksBtn.onRelease = function():Void {
gotoAndStop("links");
}
contactBtn.onRelease = function():Void {
gotoAndStop("contact");
}

Test your movie (Ctrl+Enter). If you did everything exactly as i wrote up to this point, you should be able to navigate your site. Click on the menu buttons and see for yourself! Easy navigation, isn’t it?

Explaining the ActionScript behind the site menu buttons

First, I want to explain you why you named the frames. Using frame labels (like gallery for example) instead of a frame number (5) has one practical benefit:

If you ever change your site contents by moving the keyframes or inserting new ones, all you have to do is move the frames with labels so that thay stay above their corresponding content keyframes. There is no need to go back to your ActionScript code and rewrite or change the numbers.

Now let’s see how the code for the buttons works. I will explain the code functionality just for one of the menu buttons, because they are basically all the same – only the button Instance name and the frame label change.

homeBtn.onRelease = function():Void {
gotoAndStop("home");
}

The first line,

homeBtn.onRelease = function():Void {

says that a function is assigned the onRelease event for the homeBtn button. The onRelease event happens when a user clicks and releases his mouse over the button.

If you want you can put the onPress event here instead, that happens immediately when a user has just pressed his mouse over the button. But that event is more likely to be used in games, when something has to happen immediately when the mouse has been pressed – like a spaceship shooting, for example. I like to assign the “standard” (onRelease) click for the buttons, menus and various other kinds of website interfaces.

So, once the onRelease event has happened, a function gets executed. You certainly noticed the :Void keyword after the function() keyword. This means that the function in question does not return a value. In many cases, a function in ActionScript has to return a value. Look at this example:

function mySum():Number {
var a:Number = 3;
var b:Number = 4;
var sum:Number = a+b;
return sum;
}

This function calculates a sum of two variables’ values. The last line tells to return the value of sum to whatever object that called the function. So that’s why the :Number keyword after the function’s name. It states that the value returned by this particular function will be a numerical one and not a text value or any other.

So, in the case of your menu button, the type of value that the function returns is Void. This means nothing, zero – the function does not return any value, it just serves to advance the playhead to a particular frame on the timeline.

And just what is it that gets run when the function is executed? Everything between its curly braces – { and }. Here it’s about just one line of code:

gotoAndStop("home");

This line tells Flash to jump to the frame which is labelled home and stay there. That’s all there is! Simple! Just one more thing, however: if you wanted to insert a frame number instead of a frame label here, you must do it without the quotation marks. Like this:

gotoAndStop(1);

Fine. Before wrapping this tutorial up, just read some advice below.

A little bit about site navigation and usability

You have seen how to make a slick menu. However, always keep in mind your site (or your client’s site) users. The user is king. If a site happens to be difficult to navigate and counter-intuitive, the most beautiful and appealing graphics and design won’t help.

In fact, what is often overlooked, is that the design inolves thinking and responding to your users’ needs. Make a button look like a button – this doesn’t mean it has to look ugly or too similar to a real-world button. There many, many examples of beautifully designed navigation interfaces and menus who are also intuitive and easy to use.

You know that the reflection buttons you made in this lesson are real button symbols. The user sees them as a nice graphic element only, which is exactly how it should be.

Usabilty is a science in itself, that applies equally to HTML and Flash websites. HTML is simple, and yet there are many things you have to think about when building such a site. When confronted with all the powerful and rich possibilities that Flash has to offer, this just gets more complicated. When you have a myriad of possibilites for design and developement, don’t get overwhelmed and think that you must try and implement every single great gizmo in your Flash website. Be nice to your users and they’ll like your site

Related posts brought to you by Yet Another Related Posts Plugin.