Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

Modern Holiday button with text effect and URL

16.12.2008, 0:17    Total views: 25897

Using this thoroughly explained, detailed flash 8 lesson, you will see how to create very modern holiday button. You can use this button for any holidays web site. Using this lesson, you will also learn how to create simple text effect, how to apply flash 8 filter on holiday button, how to convert any button into a Movie Clip Symbol and much more. To make this lesson, you need to use action script code.

Example:



Step 1

First, save an adequate picture for the upcoming holidays below!





Step 2


Open a new flash document. Choose Modify > Document (Ctrl+J). Set the movie's width to 160 and movie's height to 117. Set your Flash movie's frame rate to 32. Select white color as background color and click ok.



Step 3

Choose now, file > Import > Import to stage (Shortcut key: Ctrl+R) and import a picture of holiday into a flash stage.

Step 4

While the picture is still selected, press F8 key (Convert to Symbol) to convert this picture into a Movie Clip Symbol.

Step 5

While the new made Movie Clip (picture) is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 6

Call the current layer Holiday Button. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 7

Double-click on the movie clip on stage with the Selection tool(V). You should now be inside the Movie Clip.



Step 8

While the picture is still selected, press again F8 key (Convert to Symbol) to convert this picture again into a Movie Clip Symbol.



Step 9

Click now on frame 15 and press F6 key. While you're still on frame 15, Select the Selection Tool (V) and click once on the picture to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage! Then, select Filters tab from the left side. Click after that on the plus icon and select the Adjust Color filter. Make the adjustments as follows:



Step 10

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 11

Create now a new layer above the layer 1 and name it text.



Step 12

Select now Text Layer, take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Select a Static Text field,
2. Select Myriad Pro Cond as font.
3. Choose 14 as font size and bold it,
4. Select white as color,
5. As the rendering option, select Use Anti-alias for readability.



After that, enter "Merry Christmas and a happy New Year" or or some other appropriate text! place this text somewhere within the picture. See the picture below!

Step 13

While the text is still selected, press F8 key (Convert to Symbol) to convert this text into a Movie Clip Symbol.



Step 14

Click now on frame 15 and press F6 key. Then, go back on the first frame, Select again the Selection Tool (V) and click once on the picture to select it. After that, go again to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.



Step 15

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.

Step 16

Create now a new layer above the layer text and name it action.



Step 17

Select now the first frame and go to the Action Script Panel (F9). Then, enter this code inside the actions panel:

stop ();

this.onEnterFrame = function(){
if(rewind == true){
prevFrame();
}
}

this.onRollOver = function(){
rewind = false;
play();
}

this.onRollOut = function(){
rewind = true;
}

this.onRelease = function(){
getURL("http://www.flashvault.net");
}

Step 18

Click now on frame 15 and press F6 key. After that, go again to the Action Script Panel (F9) and enter this code inside the actions panel:

stop();

Now, we're done!

Test your Movie and enjoy!

Download source file (.fla)

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 310287

2. High-tech city animation
Total views: 272904

3. Water effect
Total views: 237059

4. Photo slide show
Total views: 220388

5. Special Picture Effect
Total views: 190723



Related links