7 Replies Latest reply on Oct 27, 2006 8:33 AM by R.C.Burrell

    Creating multiple buttons to play sounds

    R.C.Burrell
      I'm working on an art project where I need to create a large grid of buttons that will play sounds on an action, such as rollOver or onRelease. I'm just trying to get some ideas on what the best way to go about this would be. I want to avoid superfluous code and make the whole thing as dynamic as possible. For instance, I would like to avoid having to hard code each button as much as possible to pull in the sound file. The sound files will all be a simple number name, such as 1.mp3, 2.mp3, etc. Does anyone have any ideas on the best way to go about this with the least amount of code? I was thinking perhaps drawing from an XML file or a database would be best, but I am unsure as to how to do this in the code. Any ideas on how to make this as small and dynamic as possible are greatly appreciated!
        • 1. Re: Creating multiple buttons to play sounds
          Level 7
          R.C.,

          > I'm working on an art project where I need to create a
          > large grid of buttons that will play sounds on an action,
          > such as rollOver or onRelease.

          Okay.

          > I'm just trying to get some ideas on what the best way
          > to go about this would be. I want to avoid superfluous
          > code and make the whole thing as dynamic as possible.

          Gotcha. Yes, ActionScript would be the way to go, for sure. You've got
          quite a few choices, then. You could use AS to arrange your buttons in a
          grid in the first place, you could arrange your buttons by hand and use AS
          to assign event handlers. Or both, of course.

          See of these short articles give you enough to go on. If you're stuck,
          by all means, write back and I'll walk you through your code.

          http://www.quip.net/blog/2006/flash/actionscript-20/lesser-known-operators-modulo
          http://www.quip.net/blog/2006/flash/actionscript-20/reference-objects-dynamically

          > The sound files will all be a simple number name, such as
          > 1.mp3, 2.mp3, etc.

          That's a good way to go, as you'll be able to use the same loop iterator
          to reference your sounds as well as your buttons (they'll have instance
          names such as btn0, btn1, btn2, etc.).

          > I was thinking perhaps drawing from an XML file or a
          > database would be best, but I am unsure as to how to do
          > this in the code.

          As long as your MP3s are named sequentially, you don't need XML or a
          database. If you prefer to use "friendlier" names, you could whip up a
          quick Array instance and store the file names in that, then iterate through
          the array. It would potentially take more ActionScript to load and
          manipulate the XML, honestly. (Not a *whole* lot more, but it's more than
          likely overkill.)


          David Stiller
          Adobe Community Expert
          Dev blog, http://www.quip.net/blog/
          "Luck is the residue of good design."


          • 2. Re: Creating multiple buttons to play sounds
            R.C.Burrell Level 1
            Thank you for your help! I've looked over the two links you gave me (which were extremely informative) and I have a better idea as to how to go about this. Using your example code I have created a grid of movieclips.

            My question now is, can I assign instance names to these movieclips at the time they are being produced by the AS? It duplicates the movieclip over and over again, can it also assign a numerical sequence of instance names? For instance, as you mentioned before, btn01, btn02, etc?

            Your help is greatly appreciated.
            • 3. Re: Creating multiple buttons to play sounds
              Level 7
              R.C.,

              > Using your example code I have created a grid of movieclips.

              Cool! Did you use MovieClip.attachMovie()? You may have used
              MovieClip.createEmptyMovieClip(), or even MovieClip.duplicateMovieClip();

              > My question now is, can I assign instance names to these
              > movieclips at the time they are being produced by the AS?

              Sure.

              > It duplicates the movieclip over and over again, can it also
              > assign a numerical sequence of instance names?

              Actually, I'm curious how you might have done this *without* assigning
              instance names. The exact "wording" depends on the method or function you
              used, but for example, if you look at the MovieClip.attachMovie() method,
              one of the parameters is (the second one) is called name, and it's a string.
              You can concatenate an arbitrary instance name with the current value of
              your loop counter to come up with a unique instance name for each movie
              clip. In fact, I used this exact approach in the "Building grids" section
              of the modulo article, linked earlier.


              David Stiller
              Adobe Community Expert
              Dev blog, http://www.quip.net/blog/
              "Luck is the residue of good design."


              • 4. Re: Creating multiple buttons to play sounds
                R.C.Burrell Level 1
                Here's the code on the first frame that's producing the grid. After I posted I noticed the name property was filled in to populate names in a numerical sequence:

                //Script to create movieclips on stage with instance names of button#
                var paddingX:Number = 0;
                var paddingY:Number = 0;
                for (var i:Number = 1; i <= 192; i++) {
                var mc:MovieClip = this.attachMovie ("square", button + i, i);
                mc._x = paddingX;
                mc._y = paddingY;
                paddingX += 80;
                if (i % 16 == 0) {
                paddingX = 0;
                paddingY += 80;
                }
                }

                However, then I want to assign an action to load a sound file for each clip, so I added code for the first button thusly:

                //Create and load sound for button1
                button1.onRollOver = function(){
                var colorChange = new Color("_root.button1");
                colorChange.setRGB(0x66CCFF);
                var sound1:Sound = new Sound();
                sound1.onLoad = function(success:Boolean):Void{
                if (success){
                sound1.start();
                }
                }
                sound1.loadSound("sound_library/1.mp3",true);
                sound1.onSoundComplete = function(){
                sound1.start();
                }
                }

                Assuming that the first section of code is producing movieclips with instance names of button1, button2, etc., I'm wondering why the second section of code doesn't want to function. And yes, I have verified that the "sound_library" folder I'm loading from is in the same directory.

                Thanks!
                • 5. Re: Creating multiple buttons to play sounds
                  R.C.Burrell Level 1
                  UPDATE:

                  I commented out the sound code in the first frame and instead placed it inside the movieclip itself:

                  this.onRelease = function(){
                  var colorChange = new Color("_root.button1");
                  colorChange.setRGB(0x66CCFF);
                  var sound1:Sound = new Sound();
                  sound1.onLoad = function(success:Boolean):Void{
                  if (success){
                  sound1.start();
                  }
                  }
                  sound1.loadSound("sound_library/1.mp3",true);
                  sound1.onSoundComplete = function(){
                  sound1.start();
                  }
                  }

                  This works fine, but does not draw from the instance name that is supposed to have been assigned to this clip. I could use the above method, but I would like to have some way to have each button/grid square load its respective .mp3 file (1.mp3, 2.mp3, etc.). Assuming that the instance name is being assigned, is there a way to have this code placed in the movieclip that is being duplicated and have it somehow use the number being attached to the instance name (1,2,etc.) and and it to the name of the .mp3 file to be loaded?

                  Thanks again, for your help.
                  • 6. Re: Creating multiple buttons to play sounds
                    Level 7
                    R.C.,

                    In this line ...

                    > var mc:MovieClip = this.attachMovie ("square", button + i, i);

                    ... you're feeding in a variable named button and concatenating its value
                    with i. I think your intention is to actually use the string "button" as
                    part of the name, so you'll have to put quotes around that word -- otherwise
                    Flash is looking for a variable (which might be anything, a date, a number,
                    an array, a string) by the name of button. Make sense?

                    Here ...

                    > //Create and load sound for button1
                    > button1.onRollOver = function(){

                    ... anything inside this function is scope to button1, so you don't have to
                    use the _root reference like you're doing here ...

                    > var colorChange = new Color("_root.button1");

                    ... the word "this" (without quotes) will do; again, because you're "in" the
                    button now, and this points to the the object to which you're scoped.

                    If most of this code is going to be the same from button to button, I
                    would stick this into the previous for loop. That way, you could keep
                    re-using the temporary mc variable (the one you used as a reference to set
                    _x and _y properties above).

                    > Assuming that the first section of code is producing movieclips
                    > with instance names of button1, button2, etc., ...

                    Are you assuming, or have you verified? ;) You can look in the
                    Debugger panel to "see" what's actually going on under the hood of your
                    SWFs. See this article for details.

                    http://www.adobe.com/devnet/flash/articles/debugging_actionscript.html


                    David Stiller
                    Adobe Community Expert
                    Dev blog, http://www.quip.net/blog/
                    "Luck is the residue of good design."


                    • 7. Re: Creating multiple buttons to play sounds
                      R.C.Burrell Level 1
                      I understand the scope of the function, but I inadvertently left the _root. reference in from where the previous code had been located in my test file.

                      I understand what you mean now about the button + i needing to be "button" + i so that the name assigned to each clip will be button1, button2, etc. I will make the change in the code.

                      Bad things happen when you assume. I'll check what is actually going on in the debugger.

                      Thank you for your help in this. Incidently, your signature quote is extremely insightful.