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.
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).
- 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.
- Paste the copied text in the movieclip. Make it a movieclip again so that we can add some movieclip effects over it.
- 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.
- 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.
- 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.
- Press the ENTER key to test if the sound works, if not then repeat the last step again.
- 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.
- Select the last keyframe and add the stop script on this frame.
- 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.
- Choose the OK button.
- 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.
- Press CTRL+ENTER to test the button effect. Move the cursor on the ravishing rings button and press to view the effect.
- Repeat the same step for all the other buttons in the project.
- 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.
- 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.
- Similarly, add the sliding sound to other slides that you created.
- Next, move to the main scene. We will add a continuous sound throughout the project.
- 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.
- 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
Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!
Join us on Facebook to keep updated with all the latest tutorials and web design freebies from EntheosWeb!
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.