Shadow button with two sounds

Date: 6.4.2007, 20:37    Total views: 44238

See this step by step tutorial and learn how to create simple shadow button with two sounds. To create this tutorial you don't have to use action script. You will also learn:

1. How to design a button,
2. How to use Color Mixer Panel,
3. How to apply shadow effect on button,
4. How to import a sound in flash and more.



Step 1

Start flash. Set the movie's width to 250 and movie's height to 150. Select white as background color and click ok.



Step 2


Take the Rectangle Tool (R), and click on Set Corner Radius icon in Tools Panel. After that, a Rectangle Settings Panel will be appear. In the Rectangle Settings Panel for Corner Radius set 4 points. See the picture below.





Step 3

In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #7EBFD1 color and draw a "rectangle" about 120x40px. See the picture below.



Step 4

While the rectangle is still selected, go to the Align Panel (Ctrl+K) and do the following in the align panel:

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.




Now you have aligned a button with the background.

Step 5

After that, while the rectangle is still selected, go to the Color Mixer Panel (Wiindow > Color Mixer - shortcut key: Shift + F9). Then, choose the following options:

1. Click the paint bucket icon to have the fill color selected.
2. In the Type menu, select the Linear option.
3. Click on the inner color of the radial fill (the square on the left side of the gradient bar).
4. Enter its hexadecimal color code in the appropriate field: #7EBFD1.
5. Set #9EC8D4 AS color for the right square,
6. Set the Alpha property for this color to 75%.



Now, you have this:



Step 6

Take the Text Tool (A) and go to the Properties Panel below the stage. Then, choose the following options:

1. Select a Static Text field.
2. Select a Cooper Black font
3. Choose 20 as font size.
4. Select white as color.
5. As the rendering option, select Anti-alias for readability.



Step 7

Type "submit" on the button and repeat step 4. Now you have this:



Step 8

Take the Selection Tool (V), click once on the text and recatngle to select it and press F8 key (Convert to Symbol) to convert this text and rectangle into a Button. See the picture below.



Step 9

While the new made Button is still selected, go to the Properties Panel (Ctrl+F3) below the stage.Then, do the following in the Properties Panel:

1. Select Filters, click the Add filter icon and select the Drop Shadow filter from the menu.
2. Put both Blur X and Y options to 15.
3. Put Strength to 74% .
4. Select Low Quality.
5. Pick black for the color.
6. Angle should be set to 45.
7. Set the Distance to 5.



Now, you have this:



Step 10

Find on internet or somewhere, two sound files that we will use for this tutorial.

Step 11

Go back in flash, choose File > Import > Import to Library. In the file explorer window that appears, find a two sounds and Shift-click to select them. Then click Open. If you now open your Library (shortcut key: Ctrl+L), you will see your sound files that you just imported. See the picture below.



Step 12

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



Step 13

Right-click on the Over frame and select Insert keyframe from the context menu. See the picture below.



After that, while the button is still selected, go to the Color Mixer Panel (shortcut key: Shift + F9) and do the following:

1. Click on the inner color of the radial fill (the square on the left side of the gradient   bar).
2. Set the Alpha property for this color to 45%.

Step 14

Right-click on the Down frame and select Insert keyframe from the context menu. Then, go again to the Color Mixer Panel (shortcut key: Shift + F9) and do the following:

1. Select the right square and set Alpha property to 30%.

Step 15

Create a new layer above the layer 1 and name it sound.



Step 16

Right-click on the Over frame of the layer sound and select Insert keyframe from the context menu.



Step 17

While you're still on frame over, using the "drag and drop" technique, move the first sound from the library to the stage.

Step 18

Right-click on the Over frame of the layer sound and select Insert keyframe from the context menu.




Step 19

While you're still on frame Down, using the "drag and drop" technique again, move the second sound from the library to the stage.



Go back on the main scene (Scene1) and test your movie (Ctrl+Enter).

We're done!

Download source file (.fla)

  Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!
Share
ShareSidebar