logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Autism Spectrum Disorders: 4:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Add a Sound to a Button in Flash


In this FlashR CS5.5 tutorial, we will create an invisible button and place it over some animated ornaments. This button will allow the reader to click any ornament to play a sound file.

We will make a large invisible button that will span over each ornament. This method uses the default four-stage button Timeline. We will also use the controls in the Properties panel to attach the sound file to the button.

  1. Our first step is to import the sound file into the Library (File - Import - Import to Library).

    Now we are ready to create the button.

    It is common practice to have an actions layer at the top of the Timeline layers and a button layer under that. We will create both layers now but only discuss the button layer.

  2. Create two new layers and name them "actions" and "buttons". These layers should be at the top of the Timeline layers in that order.

    A button in Flash is a special type of symbol. We have already encountered one type of Flash symbol called a movie clip when we animated our Xmas ornaments. Let's create a new type of symbol called a button.

  3. Click Frame 1 of the buttons layer and click Insert - New Symbol to open the Create New Symbol dialog box. Name the button ornButton and set the Type to Button. Click OK.

    This will take you to the edit mode for the button. As you can see, the button Timeline is different from a movie clip Timeline. The button Timeline only has four frames called Up, Over, Down and Hit. We will discuss these frames in more detail in a later tutorial. For now we will only be working with the Hit frame. This frame is a special type of frame because it designates the size of the clickable area of the button. We tell Flash the size of the clickable area by drawing a rectangle on the stage.

  4. Rename Layer 1 to "ornButton" and add a Keyframe to the Hit frame.

  5. With the Rectangle tool, draw a rectange (any color) that is 1024 pixel wide and 245 pixels high. This is the width of the stage and the height of the larger red ornament. Remember that this button will be invisible, so we are not concerned with the color of the rectangle.

  6. You can set the rectangle's measurements to the exact pixels in the Position and Size section of the Properties panel. Set the X and Y positions to 0.0.

  7. Before we leave the edit mode for the button we need to add the sound file. Add a new layer to the top of the Timeline and name it "sound". Add a Keyframe to the Down frame.

  8. With the Down frame still selected, go to the Sound section of the Properties panel, use the drop-down list to choose the sound file. Keep the other default settings.

  9. Go back to Scene 1 and click on Frame 1 of the buttons layer. Find the ornButton in the Library panel. Drag the ornButton icon from the Library and onto the stage over the ornaments. You will notice that the button is a semi-transparent bluegreen color, indicating that it is an invisible object that will not display on the stage when we preview our project.

  10. In the Properties panel, you will see a text box for the Instance Name. Remove the placeholder text <instance name> with "ornButton".

  11. Test the movie and you will not see the button but when you click on the button area, the sound file will play once.


|
Join us in the Digital Art and Design forum. | Join us in the Flash forum.


Add Add+a+Sound+to+a+Button+in+Flash to Twitter Add Add+a+Sound+to+a+Button+in+Flash to Facebook Add Add+a+Sound+to+a+Button+in+Flash to MySpace Add Add+a+Sound+to+a+Button+in+Flash to Del.icio.us Digg Add+a+Sound+to+a+Button+in+Flash Add Add+a+Sound+to+a+Button+in+Flash to Yahoo My Web Add Add+a+Sound+to+a+Button+in+Flash to Google Bookmarks Add Add+a+Sound+to+a+Button+in+Flash to Stumbleupon Add Add+a+Sound+to+a+Button+in+Flash to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Motion 5 Parallax Effect - The Graphics

Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor