Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
23. Lock the current layer, create a new one and call it button.
24. Select the Rectangle tool (R). Click and start dragging your mouse until you have drawn a rectangle that is slightly bigger than the stage. You can use any colors you like.
25. Select the rectangle using the Selection tool (V). Make sure that you have selected both the outline and the fill.
26. Press F8 (or select Modify > Convert to Symbol) to create a symbol out of this rectangle. This time, select Button as symbol type, call it button and click OK.
27. Double-click the newly made button symbol on the stage to enter inside it. Flash, just like before, keeps you informed about your current whereabouts: you are working inside the button symbol now.
28. Click on the keyframe in the Up state and drag it over to the Hit state.
Cool! You have just made an invisible button :-) ! Let me explain you how. Since the button's three visible states (Up, Over and Down) are empty (no keyframes there) and there is actually some content in the Hit state (the rectangle shape), this is a perfectly functional button. It is just not visible to the eye, which is fine, because the user doesn't need to see it — you just make possible for her to click it.
REMEMBER The Hit state of a button symbol defines its clickable surface. This clickable area can be bigger or smaller than the visible parts of the button.
29. Click on the Scene 1 link to return to the main timeline.
30. Click on the button to select it, then go over to the Property inspector and give the button the Instance name invisibleButton.
Just like any movie clip, the button needs to have an Instance name associated with it to be able to receive commands via ActionScript.
31. Lock the current layer (button) and create a new layer above all the others and call it actions.
You will now proceed to create the color stripes, convert them to movie clip symbols and then erase them. You will delete them from the scene because once you create a movie clip, it is stored inside the Library. And these color stripe movie clips will be pulled out of the Library dynamically (via ActionScript), so there is absolutely no need for them to be on the scene.
32. Select the Rectangle tool (R). Go to the Color Mixer panel. It is usually open by default (look at the top right part of the Flash interface). If it is not, open it by selecting Window > Color Mixer.
Click on the little pencil icon (see 1 below). Then click on the little colored square next to it and choose the No color option — the white square with the red line found in the top right corner of the palette that will show up.
Click on the little paint bucket icon (2). In the Type menu (3), choose Linear as type of fill.
Click on the small color square below the color gradient strip (4). Then input the hex code for its color in the appropriate field (5). Type in #61BB35, which will give you a nice green hue.
Now click on the little square found at the opposite side of the color gradient strip to select it, and type its color code in the same box you did a moment before: #04572C. This is a darker shade of green. Together with the first one, you will have a nice green gradient fill.
33. Click and drag your mouse over any part of the stage and draw a rectangle of any size.
34. Select the Gradient Transform tool (F). Click on the rectangle to select it. Bring your cursor near the little white circle in rectangle's corner. Click and hold your mouse button and start rotating clockwise. When you have reached a 90-degree turn (see second image in the sequence below), release your mouse.
Next, bring your cursor over the little square with an arrow inside it, click and start moving your mouse downwards, until the gradient stretches so that it spans the rectangle top to bottom. There! Your rectangle is now nicely filled.
35. If you have unselected the rectangle like I did, select it again with the Selection tool (V). Go to the Property inspector and enter the dimensions for the rectangle in the W and H fields: 15 pixels for width and 60 pixels for height.
36. Select Modify > Convert to Symbol. Be sure to select Movie clip as type (as the selection has stayed on the Button type from before), call it stripe green and click OK.
37. Press Delete to erase this movie clip from the stage.
38. Go to the Library (Window > Library) and you'll find the stripe green movie clip there. Right-click on it and select Duplicate from the menu.
The Duplicate Symbol dialog will appear. Leave the type on Movie clip, call the new copy stripe orange and click OK.
39. Double-click on the newly made stripe orange movie clip's icon in the Library to enter inside it.
40. Once again, you can see that you are inside this movie clip if you take a look above the timeline.
41. When you enter inisde a symbol, its contents are automatically selected, unless the layer containing those contents is locked. So the rectangle shape inside the stripe orange movie clip should be selected if you have followed every step up to this point precisely as I have laid it out.
Go to the Color Mixer panel, click on the left little square and change its color code to #FBAD01. Change the other little square's color code to #DD3E02.
Your rectangle shape inside the stripe orange movie clip will have a new gradient fill now. Nice and easy! Flash rules!
Don't go back to the main scene (yet), because there is no need to do so right now.
42. Instead, go back to the Library and right-click on the stripe green or stripe orange movie clip (either one will do) and select Duplicate. Call the new symbol stripe blue and click OK.
43. Double-click on the newly made stripe blue movie clip to access its timeline. The vector rectangle shape will be selected by default. In the color mixer panel, change the values of the two little squares to #40BAF4 (left) and #055095 (right).
44. Repeat the previous two steps: duplicate one of the existing movie clips, call the new one stripe yellow and once inside it, change the values of the gradient that fills the rectangle shape to #FDE201 and #F88E01.
Ok, now you have four different gradient-filled rectangle stripe movie clips, but there is still one thing to do before you start coding. Read the next step to see what.
45. Right-click on the stripe green movie clip inside the Library and select Linkage from the menu. The Linkage Properties dialog will appear.
First, check the Export for ActionScript checkbox. The Export in first frame checkbox will automatically be turned on. Second, type in the identifier for this movie clip in the Identifier input field: call it green. Click OK.
What's all this, you may ask? Well, the option you just checked allows you to prepare this particular movie clip for dynamic manipulation. In other words, thanks to this, Flash will be able to extract this movie clip from the Library while the SWF movie is running. The Identifier gives you the possibility to pull out this movie clip from the Library with a few simple ActionScript commands.
The Export in first frame option sets the following: This movie clip will be loaded before any other content of your movie does, which is good, because this means that you can call this movie clip dynamically without having to worry whether it will be completely loaded or not. Because it will be fully loaded.
46. Repeat the previous step with the three remaining movie clips: stripe blue, stripe orange and stripe yellow. Give them the Identifiers blue, orange and yellow, respectively.
REMEMBER Each Identifier name must be unique. Also, pay attention not to use a name that you already gave to some other object: a movie clip or button instance name, for example. This will ensure that there are no conflicts in your ActionScript code.
You're ready to finalize this banner ad by giving it life with some ActionScript code. But, before that...
47. Return to the main scene by clicking on the Scene 1 link, no matter what movie clip you are inside right now.
Fiiiine! You're ready to begin scripting your movie now. So please proceed to the next page of this lesson.
