This week's tutorial will hopefully prove accessible to users who are just beginning to incorporate Macromedia's Flash into their Web sites. Over the course of the next few months, we hope to have several Flash tutorials up, some more advanced than others. But we'll get started with sound eventslike playing a piece of audio on a rollover or mouse clickwhich can actually prove a little difficult from a beginner's perspective.
The difficulty isn't in the steps to accomplish the rollover sound events but in the interface of Flash 4, which offers few clues as to how to accomplish these tasks. Most of us are used to seeing all of our options either in tool palettes or in menus. This is true of Flash as well, but the program's menus won't seem intuitive at all until you get used to some basics.
For this tutorial, we're going to bring in a graphic that has several objects for users to click, each of which will play a different sound. In this case, we'll be using Retro AS-1 from BitHeadz to generate the sounds and QuickTime Pro 4.11 to edit them and place them into AIF format. You can use a number of other sounds formats as well. For this tutorial, we'll assume you already have sounds available to you, so we'll take it from there.
1. Open up Flash and import your graphics and sounds. (Select "Import" from the File menu.) You can add numerous items at once when importing, so, to save yourself some hassle, put all your audio and graphics files into one folder.
2. In our tutorial, I've created a "skin" for our sound generator. You can also just use individual objects or groups of objects to accomplish the same thing. In the case of the skin, we're going to have to create new, individual objects to place behind the skin to trigger the sounds when the user moves the mouse over a particular area. In other words, you can't just select a region of the skin and activate it as a "hot spot." You have to use whole objects. The simple way around this is to draw boxes or circles over your skin in the Flash stage, then, when the whole project is done, move the skin to the front. I'll detail this step below. For now, just draw your circles or boxes over the areas of your skin you want the sounds to be played. If you're using individual objects instead of a skin, you don't need to draw boxes or circles behind them. The objects themselves will be used to trigger sounds. (Incidentally, when a Flash graphic loads on a Web page, it often shows the images in the background before drawing the skin over them, so make your background objects the same color as your Web page.)
3. Once you've drawn your circles or boxes, you can begin setting sounds to play whenever someone moves a mouse over the object or clicks on it. To do this, first click on the object. Then go to the Insert menu and select "Convert to Symbol." A dialog box will pop up asking you what kind of symbol you want to convert your graphic to. Select "Button."
NEXT PAGE [ 2 ]