Embedding a Sound File in a Flash Movie using ActionScript 2.0

Update: this project has since been kiboshed, but the meat and potatoes of the Flash tutorial is still valuable.

I have talked briefly about a project I have been working on in my post “A Bit Blue with Bluehost”. And while my content management issues with Bluehost have not entirely been resolved as of yet (I’ll keep you posted on that front), it may prove useful to work through some of the technical details of this project.

As a general overview, I am working with the Linguistics faculty here at UMW to create a series of exercises with various sounds from a number of the world’s languages. The goal is to create a predetermined number of exercises (that will be augmented over time) that can be easily accessed by students online. The goal is to have images of a series of related linguistic characters (or symbols) that the user can click on and hear the corresponding sound without being redirected to ever, that I am a relative newbie to Flash and that the following tutorial will be most useful for folks that, like me, have a working knowledge of Flash but never understood all the mysteries of ActionScript.

ActionScript 2.0 is a scripting language that is compatible with versions Flash MX 2004 Professional and Flash 8 that gives you increased control over the wide range of effects you can build into a Flash movie (extension SWF). I do not pretend to have extensive knowledge of all the ActionScript 2.0 capabilities as of yet, but I now know how to embed sound files into a flash movie, so the least I can do is share this information with you.

Click on the following link to read the rest of this tutorial.

Embedding a Sound File in a Flash Movie (SWF) using ActionScript 2.0

  • First things first, if you dont have Flash MX 2004 Professional or Flash 8 you will need to either buy a copy ($$$$) or download a 30-day trial version of Flash 8 here.
  • Open Flash and create a new flash document and name it accordingly.
    Flash Start
  • Now, import the image in which you want to embed a sound on to the stage by going to the File ->Import-> Import to stage. Once you do this, the image should appear in your work area, a.k.a “the stage.”
  • Now, we want to adjust the properties of this image and here is how. Go to the Window-> Properties and you should see a new window in your work area that defines the properties of your project. When you click on the image you imported to the stage the properties will then reflect the details of that object. See illustration below.
  • Properties Window

    Now, as you can see from the illustration the properties of this image are detailing the width and height (in this examples, width=413 pixels height=188 pixels). This will be important because if we click on the stage area (the grey area surrounding the image) we will get the overall project properties. Change these properties to the above mentioned width and height of the image by clicking on the “Size” field of this window.

    Properties Size

    Now, click on the image and th properties window should then change to the image details. Change both the X and Y coordinates to 0 – this will center the image on the area of the stage you specified in the previous step.

    XY Coordinates

  • Ok, now that we have “set the stage,” so to speak, let’s import our sound files into the project library. Here’s how: go to File->Import->Import to library and then browse for the sound files you will be inserting into this image. Once you have done this, go to Window->Library. You should then see a Library window that has a list of your imported sound files as well as the image in the stage area.
  • Library Toolbar

    Now, we are ready to start embedding these sound files into the image using ActionScript. Here’s how – go to Windows->Development Panels->Actions and the Action Script editor window will come up. Copy the following code into that editor:

    var italian:Sound = new Sound();
    italian.attachSound("italian1");
    start_btn_1.onRelease = function() {
    italian.start (0, 1);
    };

  • Now for a little a bit of parsing. The italian_01 elements above are just a name I have randomly assigned – this does not have to correspond to any file outside this code but it does need to be consistent in the three places it shows up (line 1, line 2, and line 4). Keep in mind that each instance of ActionScript code that corresponds to a sound file requires a unique name. The "italian1" (after .attachSound) is a name that I will be assigning the mp3 sound file I plan to embed (see following step). The start_btn_1 is the name I have assigned the first start button I will be using to make an area of this image interactive -the following steps will clarify this more.
  • Now, we have the action script, but how do we link it to a sound file – just right click (control click for Mac users) on a sound file from the library you want to embed in the image (in my example this will be italian1.mp3) and select “Linkage …” Now you will see a dialogue box and a series of fields, make sure the “Export for ActionScript” and “Export from First Frame” boxes are checked and rename the file to the appropriate name you used for the attachSound command in the ActionScript editor- in my example this would be “italian1”.
  • Linkage

  • We have linked this sound file to the ActionScript, now we need to include a trigger so that when someone clicks on a pre-defined part of the image this particular sound will play. This is where the buttons come in. Go to Window -> Development Panels -> Components from here you should see UI (user interface) components -select the arrow and look for the button option and drag it onto the image. And change the properties of the button accordingly so that it covers the specified area of the image you want to play that sound and put the name from the ActionScript (start_btn_1) into the field.
  • Start Button

  • One more step, right click (control click for MAC users) on the the button and go to arrange–>send to back. This will make it so that we do not see the button, but it will still have the desired fuctionality. Just go to File –> Export –> Export Movie and click “OK” -and viola!
  • These steps took you through the process of embedding one sound file into an image, to embed several sound files into this image just follow the steps above for each individual sound file. Here is an example of what the ActionScript will look like for two embedded sound files into this image:

  • var italian_01:Sound = new Sound();
    italian_01.attachSound("italian1");
    start_btn_1.onRelease = function() {
    italian_01.start (0, 1);
    };
    var italian_02:Sound = new Sound();
    italian_02.attachSound("italian2");
    start_btn_2.onRelease = function() {
    italian_02.start (0, 1);
    };

This entry was posted in video and tagged , . Bookmark the permalink.

6 Responses to Embedding a Sound File in a Flash Movie using ActionScript 2.0

  1. Mikhail says:

    so where’s an example of the done deal?

  2. jimgroom says:

    Good point Mikhail, you can check out some working example of zulu clicking sounds embedded in an image of linguistic characters here, Thanks to the UCLA Phonetics laboratory for the primary files which I modified. I will try an put an example in this blog post shortly, so I can then blog about embedding SWF files in a WordPress blog 🙂

  3. Fish Wizard says:

    I have developed a problem where flash loads the linked sound files before it loads my preloader. Is there some way i can link the files and export for action script on say frame 2 using the actionscript itself so flash loads my sounds after the preloader?
    Any help would be greatfully recieved.

  4. Reverend says:

    Hey Fish Wizard,

    I have o be honest, I haven’t played with this for a long time, so I am more than rusty. So much so, that your question suggests to me that I have really let my flash skills go, I’m sorry about that.

  5. Marteenez says:

    Hey,

    I’m very new and very amateur to ActionScript. I was just wondering if anyone can help me out with the following?:
    I’m building a small translator in ActionScript 2.0. Using the code below… However for this translator I would like it also to play an audio file associated with irish when the translateBtn is pressed. Does anyone know how to do this? Is this possible with what I already have?

    var translator:Array = [{irish:”Asal”, english:”Donkey”}, {irish:”Bosca”, english:”Box”}];

    function getEnglishByIrish(irish:String):String
    {
    for(var i:Number = 0; i < translator.length; i++)
    {
    if(translator[i].irish.toLowerCase() == irish.toLowerCase())
    {
    return translator[i].english;
    }
    }
    return “*NO RESULT FOUND!*”;
    }

    translateBtn.onRelease = function()
    {
    englishTxt.text = getEnglishByIrish(irishTxt.text);
    }

  6. asuseeepc says:

    this a great tips flash movie is boring without sound clip

Leave a Reply

Your email address will not be published. Required fields are marked *