Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Flash Tutorials & Resources > Adding Sounds and Animation to Buttons   

Flash Tutorials

Basics

Animation & Effects

Actionscript

Creating a Website

Miscellaneous

Flash Articles

Free Flash Resources

Other Flash Resources

Adding Sounds and Animation to Buttons

This is a tutorial on how to add sounds to a scene and edit how you can change the behavior of the sound at runtime. In addition to this, you will also learn how to add animation to the buttons.

This is part of a 6 part tutorial series on how to create a Flash website using Flash CS5. The tutorial covers the following :

  1. Creating a web template using Photoshop

  2. Importing a Photoshop file in Flash CS5

  3. Adding sounds and animation to buttons

  4. Adding Animation and Button interactivity

  5. Adding a Preloader

  6. Publishing the Flash content

Start with downloading the flash file from the following link, the library of the flash file has the necessary sound files in it (click here to download the flash file).

  1. Open the flash file that you downloaded from the above given link and double click on the Ravishing rings button at the bottom of the first image. Next, select the text and press CTRL+F8 to create a movie clip. Rename it as ravi_anim.

  2. Paste the copied text in the movieclip. Make it a movieclip again so that we can add some movieclip effects over it.

  3. Next, set keyframes at frame 5 and 8.Select the keyframe at frame5 and open the property inspector and add the blur filter to the movieclip in the stage area.

  4. Also, add glow filter on all the three keyframes with a white glow to the movieclips, refer to the Figure for values for the blur and glow filter values.



  5. Select the keyframe at frame 8 and open the library. Expand the sounds folder and drag the sound symbol named as button to the stage area. Notice that the selected keyframe has a blue line in the centre indicating that the sound has been added to the keyframe.

  6. Press the ENTER key to test if the sound works, if not then repeat the last step again.

  7. Next, select the keyframe at frame8 and choose CTRL+F3 to open the PROPERTIES panel and expand the SOUND area and choose the  pencil icon on the right of the Effects property; the Edit Envelope dialog box is displayed, as shown in the Figure below.

  8. Select the last keyframe and add the stop script on this frame.

    stop();



  9. Expand the Effects drop-down list and select the Left Channel option from it. Choose the play icon at the bottom left of the screen to hear the difference in the sound effect earlier and after changing the effects.

  10. Choose the OK button.

  11. Next, go back to the previous scene ( the ravishing rings button ) select the Over frame in the timeline and choose the F5 button next add a keyframe at the Down frame and replace the text on the stage with the animation movieclip with sound on this keyframe.

  12. Press CTRL+ENTER to test the button effect. Move the cursor on the ravishing rings button and press to view the effect.

  13. Repeat the same step for all the other buttons in the project.

  14. Next, we will add sound to the sliding transition. To do so, move to the main scene and move the playhead to frame5. Double-click on the first image to enter into the sliding clip timeline.

  15. In layer named 3, choose the first keyframe and open the sounds folder in the LIBRARY panel. Drag the sound named slide in the stage area. The blue line in the frames assures that the sound has been added, as shown in Figure.



  16. Similarly, add the sliding sound to other slides that you created.

  17. Next, move to the main scene. We will add a continuous sound throughout the project.

  18. Create a new layer at the top in the TIMELINE and rename it as sound. Select the first keframe at frame1 in the timeline. Open the LIBRARY panel and drag the sound named main in the stage area.

  19. Press CTRL+ENTER to view the sound effects added, the swf file will be displayed separately in a window, as shown in Figure.



    You can also add your own customized button animation to the tabs on the top.

Proceed to Step 4 >> Adding Animation and Button interactivity


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Flash Website Design? Choose from over 6000 templates!

Gorgeous Page Roll Image Transition Effect in Flash

Creating Page Curl Transition

Creating a Rotating 3D Planet in Flash

Creating Realistic 3D Planet

Best Flash Photo Gallery Website Templates

Best Flash Photo Gallery Website Templates

Burning Image Effect in Flash

maskmn_image055

Realistic Rippling Water Animation in Flash

r_water

Awesome 3D Flash Website Templates

Awesome 3D Flash Website Templates

 

Featured Template
Template # 58339
Type: OpenCart
Price: $45

Flash Photo Galleries