Adobe CS3 ActionScript 3 button graphic changing

Question

I'm completely new to Flash and as a school project I've been told to create a fully functioning web page using Flash. I've got a ton of textures done in photoshop and have been fairly successful getting them to perform the correct animations. However I wanted to have a mute button in the corner and when active would switch between two textures. The issue I'm having is getting them to actually do anything.

As I said, I'm completely knew and know none of the Syntax or Layouts of the coding. I've read tons of tutorials and I always get compiler errors saying things like "packages cannot be nested" or "Muted cannot be accessed blah blah".

Currently I have two button layers named: "Muted" and "UnMuted". I really need some advise because I'm quickly losing patience. I've currently got no code to give to you guys because everything I've gotten just doesn't work and seems to be incredibly inaccurate.

As a reminder, I use Adobe Flash CS3 with ActionScript 3.

Thank you for any help that can be offered!

Answer 1

I really hate to sound like a "Programatticus Takeoveriticus" (ongoing joke with my team), but "textures" as most Flash programmers know them is probably not the best way to go. Generally, textures refers to an image you use to fill an area.

Based on your information, I'm assuming that your "textures" are images...probably saved in .png or .gif format? What you will want to do is import these into your library.

I use CS5.5, so this may be a little off, but this should be close for CS3.

Go to File-->Import-->Import to Library...

Select the images you want to use and press "import". They will appear in your Library Pane, generally located at the right side of the screen (but it may be elsewhere, depending on your layout. Use the Window menu to find it if you've having trouble.)

Now, go to Insert-->New Symbol...

Give the symbol a name. Best practice for symbol names is to use only alphanumeric characters and underscores (no spaces or other punctuation).

Now, select a Type. I recommend MovieClip for this.

Leave everything else alone and press "OK". Your Stage will switch to editing only that MovieClip.

Look at your Timeline. This is important. Click the first frame on the Timeline, and then drag the image you want for the unmuted image from the library onto the stage. Size it as you want it using the Free Transform tool.

Now, click the image you just placed. Go to the Properties pane and set its location to 0 left, 0 top.

Now, in timeline, click the second frame. Repeat the above steps with the image for muted. Be careful that the size of this second image is EXACTLY the same as the first image.

After you've placed both images on the timeline, in their appropriate frames, click the first frame. Go to the Actions tab (right click the frame and click Actions).

Enter the following statement.

stop();

Repeat this with the second frame.

The stop(); statement simply tells Flash to stay on that frame until told to do otherwise by the code.

Now, at the top, click the blue "back" button to go back to your main stage. The object you just created will be sitting somewhere on your stage. (If it isn't, drag it from the Library onto the stage.) Place this object where you want it, and size it as needed.

Click the object to select it, and go to the Properties pane. At the top, where it says "", type in a working name for that instance of the object. If you've only using it once on this stage, just give it the same name as it has in the Library (whatever you named it earlier.) For this example, I'm just going to call it "btnMute".

Now, on the area where you have all your code, you'll want to enter the following:

//Here we create a boolean (true/false) variable for whether sound is muted.
var muted:Boolean = false;

//Create the event listener for when the mute button is clicked.
btnMute.addEventListener(MouseEvent.CLICK, muteSound);

//Here is the event handler for the above listener.
function muteSound(evt:MouseEvent):void
{
    //If muted is true...
    if(muted)
    {
        //Set muted to false
        muted = false;
        //Change button to "unmuted" state.
        btnMute.gotoAndStop(1);
    }
    //If muted is false...
    else
    {
        //Set muted to true
        muted = true;
        //Change button to "muted" state.
        btnMute.gotoAndStop(2);
    }
}

A lot of that code should look familiar. The main thing I want to point out is the line btnMute.gotoAndStop(...) This allows you to change the frame being shown on a particular MovieClip. Just replace the "..." in the statement with the frame number you want to go to.

Alternatively, you can use the code btnMute.gotoAndPlay(...);. Because you have the stop(); code on each of the frames, the same thing will be accomplished.

The primary difference between gotoAndStop(...); and gotoAndPlay(...); is that the "AndStop" does not execute any of the code on the frame, nor will it play frames after it in absence of the stop(); function, whereas "AndPlay" will.

I hope that is helpful. Again, sorry to recommend a different method, as it is a pet peeve of mine when people do that to me. However, in most instances, you'll find that this way works a LOT better than hiding and showing different items to do the same thing.

Answer 2

I'm not quite sure, what your problem is, but try this.

1. Create a button, put in your stage and named at the properties view as "btnAudio"
2. Create Texture 1, put in your stage and named at the properties view as "img1" do the same with Texture 2 with name "img2"

3. Create a new layer, call "actions" and write this code:

   //Listener added to your button.
   btnAudio.addEventListener(MouseEvent.CLICK, f_muted);
   
   //Init method to hide your textures.
   function f_init():void {
       img1.visible = false;//Texture 1
       img2.visible = false;//Texture 2
   }
   
   // function to switch your textures
   function f_muted(event:MouseEvent):void{
       trace("switch images");
       img1.visible = true;
   }
   
   f_init();//Hide Textures.
   

I hope this can help you.