Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
The last part of promo button building will involve the creation of a rounded rectangle with a 3D-like frame and the scrolling text message that will play inside it.
35. Create a new layer and call it scroller.
36. Select the Rectangle tool (R). Select a dark blue color for the outline (stroke) that will look well with the part of the button you already created - I chose #3A3E5F. As for the fill color, choose a shade of blue that is more bright than the outline, but not too bright. To add more depth to your button, you can use a top-to-bottom linear gradient: I chose #013A8F for the top color and #6699FF for the bottom color. By now you now how to set up a color gradient - the only thing that you have to change is the option Linear from the Type menu in the Color Mixer panel, instead of the radial one.
In the Properties inspector, select the Solid option for the outline with a thickness of 8.
37. Click and start dragging - make a rectangle that is about 212 by 60 pixels, but don't release your mouse button yet. You must make rounded corners for this one. So, while still holding the mouse button, press the down arrow key on your keyboard and hold it until the corners of the rectangle are at the maximum round value - almost becoming segments of a circle.
38. Once you have made the rectangle, switch to the Selection tool (V), select the whole rectangle (both the outline and the fill) and move it over the star shape. Its vertical center should be aligned with the star shape's center, while horizontally it should be positioned to the left og the red shape, like this:
39. To achieve a more realistic 3-D look for the button, you must separate the outline from the fill. As a first step towards this, drag the scroller layer under the rotation layer. Just click on it and move your mouse downwards. Once you see a thick grayish line appear, the layer is ready to snap into place.
40. Select the whole rounded rectangle (fill and outline) and press F8 to convert it to a symbol. Select Movie clip as type, call it scroller and click OK.
41. Double-click on the newly made scroller movie clip with the Selection tool (V) to enter inside it.
42. Double-click on the rounded rectangle's outline to select the whole of it. Select Edit > Cut (shortcut key: Ctrl+X). The outline has now just been cut from the fill and is ready to be pasted into a new layer. To preserve the outline in your computer's clipboard (that's where stuff that has been cut or copied goes before being pasted somewhere), do not copy anything, in Flash or any other program. Wait until you finish pasting the outline in a new layer.
43. Lock the current layer (currently the only one inside the scroller movie clip) and call it background.
44. Make a new layer and call it 3D frame.
45. Select Edit > Paste in Place (shortcut key: Ctrl+Shift+V) to paste the outline of the rectangle here, on the exact same position it was occupying before you have cut it.
46. After pasting the rectangle's outline in place, it should still be selected. So press F8 to make a Movie clip symbol out of it. Call it 3D frame.
47. Go to the Properties inspector and click the Filters tab. You will now use a blending filter to give the outline a 3-D look. Select the Bevel filter. Set the options like this:
Leave the Knockout option unchecked.
You have just added a nice 3-D look to the scroller's frame. Flash rules!
48. Lock the 3D frame layer. Make a new layer between the two existing ones and call it scrolling text.
49. Select the Text tool (T). This time you will use the Static text field type too. Leave most of the options as they were when you placed the label on the star shape. The only things that you should change are: turn on the Italic option - this will make the text look more swift and it will accentuate the direction of its movement once it gets moving; select the Anti-alias for animation option since you are going to animate this text.
50. Click a little bit below the upper part of 3-D frame and type your message: special offer or anything you want your button to display. Write this phrase once, then hit the space bar key a few times to make some space and type this phrase again. Repeat this one more time. You need to have it typed three times, because you are going to make the text move in an infinite loop, which must look seamless.
51. Hit Esc to exit the text editing mode. Press F8 to convert this static text field into a Movie clip symbol. Call it animated text and click OK.
52. Move the movie clip with the aid of the left and right arrow keys to position it so that the phrase in the middle is placed near the left part of the 3-D frame. Hold Shift while pressing the arrow keys to move the movie clip by 10 pixels at a time.
53. Right-click on the background layer's frame 30 and select Insert frame from the menu.
Thta's right, the background layer, not the one with the text inside. You need to do this because the background fill and the 3D frame should be visible all the time while the text is scrolling. You can't leave them just like this. So repeat the above for the top layer:
54. Right-click on frame 30 of 3D frame layer and Insert a frame. Your timeline should now look like this:
Remember that you are inserting plain frames here and not keyframes, because the two layers will not be animated - they won't have any changes applied to them. By inserting a simple frame, you are just prolonging the duration of these layers, which is exactly what you need.
55. Right-click on frame 30 of the scrolling text layer and select Insert Keyframe. A keyframe is needed here because you are going to make a motion tween animation with the text.
56. Click on the animated text movie clip here (you should be in frame 30 now) just once to select it. Now move it to the right using the right arrow key in conjunction with the Shift key. You must move it so that the first copy of the phrase arrives near the 3D frame's left edge, but just a little bit closer to the frame then the middle phrase was. You can clearly see this on the following image:
57. Right-click anywhere between the two keyframes (the grayish area) on this layer (scrolling text) and select Create Motion Tween.
58. Test your movie (Ctrl+Enter). Observe your text animation closely. Does it jump at a particular point? If so, go back and move the animated text movie clip a little bit to the left or right in frame 30 (the second keyframe). Test again and make adjustements until you get it right.
Excellent! There are just a few more things that need to be fixed before the button is complete. Try this: go to Modify > Document and change the document's background color from white to black. Test your movie again and you will see that the scrolling text message is fully visible, even outside the button. You must make it visible only inside the 3-D frame area. To be able to do this, you will use a mask.
59. Lock the scrolling text layer and insert a new one above it and call it mask.
60. Unlock the background layer. Select the rounded rectangle fill shape and press Ctrl+C to copy it. Lock the background layer.
61. Click on the first frame of the mask layer to select it. Press Ctrl+Shift+V to paste the fill shape here. It will be pasted on the exact same spot as the fill from which it was copied from.
62. Lock the mask layer. Right-click on it and select Mask from the menu that appears. The scrolling text layer beneath it will automatically become the masked one.
Test your movie again and you should see the animated text appearing between the framed area only. Cool! Masks are so simple to use in Flash and yet so helping. You can turn the background color of your document back to white now.
Still, there is one more thing that needs to be adjusted and it isn't plainly visible. Test your movie and place your cursor near the button. You will see the hand cursor appear! Which means that the area outside the button is clickable!
How is that possible? The answer is simple: Flash considers all of a button's content as a clickable area, unless you tell it otherwise. Let me show you how to do that easily.
63. Click the promo button link above the stage to return to the button symbol's timeline.
64. Click on the scroller movie clip once to select it. Press Ctrl+C to copy it.
65. Lock the scroller layer. Make a new layer, call it clickable and drag it below the other two layers.
66. Paste in place the copied movie clip here (Ctrl+Shift+V).
67. Move the keyframe keyframe from the Up state to the Hit state. Just click on it and drag it over to the Hit state. The sequence below shows clearly how to do this.
68. Now that you are in the Hit frame of the clickable layer, proceed to break apart the movie clip that you copied previously. Select Modify > Break Apart. The movie clip will be decomposed down to its contents. Select just the movie clip containing the text and delete it. Now select both the 3D frame and the fill and break them apart (shortcut key: Ctrl+B). You are left with a simple shape that will serve just as the clickable area.
You still need to make possible for your users to be able to click on the rotating star too. Just repeat the same thing as you did a moment before, but this time with the star-shaped movie clip: unlock the rotation layer, select the movie clip and copy it. Lock the rotation layer. Paste in place the movie clip on the Hit frame of the clickable layer. Then break it apart, delete the text and leave just the star shape. I even changed the colors to immediately know that this is just the button's clickable area.
Flash still needs to know that only this frame will define the clickable area of your button symbol. You will tell it that this is so by making the button's visible parts apparent just on the first three frames.
69. Right-click on the Down state of the scroller layer and select Insert Frame. Repeat this for the rotation layer. Your button's timeline should now look like this:
Test your movie now and move the cursor around the button. You will see that the hand cursor appears only once it is over the button's visible area.
And that's it! The promo button is finally completed! It looks very attractive. You can enter additional text inside it, below the animated text, to convey more information to your site visitors. You can even make it smaller by scaling it on the main scene if you want. It will still look good. To do this, just select the Free Transform tool (Q), hold Shift, grab one of the button's corners and make it smaller. Here is a screenshot of the scaled-down button:
Download the zipped source FLA file for Flash 8 with all the effects.
Download the source file for the promo button for Flash MX 2004.
If you have found this tutorial useful, please consider donating to support lukamaras.com.
Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!
