A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 22

Thread: help making animated buttons stay clicked?

  1. #1
    Junior Member
    Join Date
    Nov 2009
    Posts
    17

    Question help making animated buttons stay clicked?

    Okay, I know this isn't the first topic on this subject… I've been Googling all day and I know there are various ways to go about this, but I am really struggling with implementing them.

    Currently, I have a website with a very simple code that gives all the buttons in the menu an animated rollover and rollout state. When the buttons are clicked, I have a movie clip with all the content which goes to a specific frame label depending on which button is clicked. Very simple, no problems there.

    But what I can't figure out how to do, is to add a variable so that when each button is clicked, it stays in the over state until another button is clicked (at which point I'd like it to go to the out state, while the new button would go to the over state.)

    I found several examples of codes that do this, but I can't figure out how to modify them so that when a button is clicked, it also goes to a specific frame label in the content movie clip, so that the content for each section can be displayed.

    This is the original code I was using:

    Code:
    home.onRollOver = over;
    home.onRollOut = out;
    home.onRelease = function() {
    	content.gotoAndPlay("home");
    }
    
    about.onRollOver = over;
    about.onRollOut = out;
    about.onRelease = function() {
    	content.gotoAndPlay("about");
    }
    
    services.onRollOver = over;
    services.onRollOut = out;
    services.onRelease = function() {
    	content.gotoAndPlay("services");
    }
    
    gallery.onRollOver = over;
    gallery.onRollOut = out;
    gallery.onRelease = function() {
    	content.gotoAndPlay("gallery");
    }
    
    testimonials.onRollOver = over;
    testimonials.onRollOut = out;
    testimonials.onRelease = function() {
    	content.gotoAndPlay("testimonials");
    }
    
    contact.onRollOver = over;
    contact.onRollOut = out;
    contact.onRelease = function() {
    	content.gotoAndPlay("contact");
    }
    
    
    function over() {
    this.gotoAndPlay(2);
    }
    function out() {
    this.gotoAndPlay(7);
    }
    and then here is a code I found through Googling that does work to make buttons stay pressed, but I don't know how to edit it so that whenever a button is clicked it still goes to a specific frame label in the timeline of a movie clip, the way I have it in the original code:

    Code:
    // script by http://onestoptutorial.com
    
    this.button1.textBTN_txt.text = "ABOUT US";
    this.button2.textBTN_txt.text = "SERVICE";
    this.button3.textBTN_txt.text = "PORTFOLIO";
    this.button4.textBTN_txt.text = "CONTACT";
    
    var buttonNum:Number = 4;
    
    for (i=1; i<=buttonNum; i++) {
    	this["button"+i].onRollOver = function() {
    		if (this.clicked != "yes") {
    			this.gotoAndPlay("over");
    		}
    	};
    	this["button"+i].onRollOut = function() {
    		if (this.clicked != "yes") {
    			this.gotoAndPlay("out");
    		}
    	};
    	this["button"+i].onRelease = function() {
    		this.gotoAndStop("out");
    		this._parent[_root.clickedButton].gotoAndPlay("out");
    		this._parent[_root.clickedButton].clicked = false;
    		this._parent[_root.clickedButton].enabled = true;
    		_root.clickedButton = this._name;
    		this.clicked = "yes";
    		this.enabled = false;
    		_root.on_txt.text=this._name +" in "+this.textBTN_txt.text;
    	};
    }
    Could somebody please help me? I'm really very remedial when it comes to coding, I'm much more of a designer/animator but I really would like to get this to work.

    Any help would be very much appreciated!!

  2. #2
    Member
    Join Date
    Nov 2009
    Posts
    43
    //These lines gives the buttons' names.
    this.button1.textBTN_txt.text = "ABOUT US";
    this.button2.textBTN_txt.text = "SERVICE";
    this.button3.textBTN_txt.text = "PORTFOLIO";
    this.button4.textBTN_txt.text = "CONTACT";

    //This gives the menus' quantity
    var buttonNum:Number = 4;

    //With this for cycle, the program will enable the scirpt for button[1,2,3,4].
    for (i=1; i<=buttonNum; i++) {
    this["button"+i].onRollOver = function() {
    //This will check, that menu doesn't enabled yet. '!=' means, not equal.
    if (this.clicked != "yes") {
    this.gotoAndPlay("over");
    }
    };
    //Same script, for the rollOut function on the four buttons.
    this["button"+i].onRollOut = function() {
    if (this.clicked != "yes") {
    this.gotoAndPlay("out");
    }
    };
    //Same for release function.
    this["button"+i].onRelease = function() {
    this.gotoAndStop("out");
    //the other buttons will be 'enabled' for click, and doesn't 'click'-ed and this will be the clicked one, without function('enabled = false').
    this._parent[_root.clickedButton].gotoAndPlay("out");
    this._parent[_root.clickedButton].clicked = false;
    this._parent[_root.clickedButton].enabled = true;
    _root.clickedButton = this._name;
    this.clicked = "yes";
    this.enabled = false;
    //Your mc got named, by the pressed menu's name. (textBTN_txt.text)
    _root.on_txt.text=this._name +" in "+this.textBTN_txt.text;
    };
    }

    If you want to use this script, just rewrite your menus button1, button2..etc. And give the right number for
    var buttonNum:Number = 4;

  3. #3
    Junior Member
    Join Date
    Nov 2009
    Posts
    17
    Thank you so much for replying, I really appreciate it. And I also appreciate you breaking down the different parts of that code, that is helpful.

    But the thing that I'm not understanding, is how to modify that code so that when clicked, while staying down, the buttons also go to a specific frame label in a specific movie clip. I tried combining the 2 different codes I had, but when I do that, it makes the button stop staying down after being clicked.

    Do you know what I need to do to make both work? (Again, any help is very much appreciated!)

    Code:
    this.button1.textBTN_txt.text = "ABOUT US";
    this.button2.textBTN_txt.text = "SERVICE";
    this.button3.textBTN_txt.text = "PORTFOLIO";
    this.button4.textBTN_txt.text = "CONTACT";
    
    var buttonNum:Number = 4;
    
    for (i=1; i<=buttonNum; i++) {
    	this["button"+i].onRollOver = function() {
    		if (this.clicked != "yes") {
    			this.gotoAndPlay("over");
    		}
    	};
    	this["button"+i].onRollOut = function() {
    		if (this.clicked != "yes") {
    			this.gotoAndPlay("out");
    		}
    	};
    	this["button"+i].onRelease = function() {
    		this.gotoAndStop("out");
    		this._parent[_root.clickedButton].gotoAndPlay("out");
    		this._parent[_root.clickedButton].clicked = false;
    		this._parent[_root.clickedButton].enabled = true;
    		_root.clickedButton = this._name;
    		this.clicked = "yes";
    		this.enabled = false;
    		_root.on_txt.text=this._name +" in "+this.textBTN_txt.text;
    	};
    }
    
    
    
    button1.onRelease = function() {
    	content.gotoAndPlay("A");
    }
    
    
    button2.onRelease = function() {
    	content.gotoAndPlay("B");
    }
    
    
    button3.onRelease = function() {
    	content.gotoAndPlay("C");
    }
    
    
    button4.onRelease = function() {
    	content.gotoAndPlay("D");
    }

  4. #4
    Junior Member
    Join Date
    Nov 2009
    Posts
    17
    Here's a test Fla if that makes it easier to troubleshoot. The buttons stay clicked if I delete this stuff:

    Code:
    button1.onRelease = function() {
    	content.gotoAndPlay("A");
    }
    
    button2.onRelease = function() {
    	content.gotoAndPlay("B");
    }
    
    button3.onRelease = function() {
    	content.gotoAndPlay("C");
    }
    
    button4.onRelease = function() {
    	content.gotoAndPlay("D");
    }
    But then... I don't know how else to make the buttons go to different sections in the content mc.
    Attached Files Attached Files

  5. #5
    Junior Member
    Join Date
    Nov 2009
    Posts
    17
    Okay, I got it working! But I'm sure there must be a way to do it without repeating so much of the same code. I just can't get it to work any other way though. This is what I have so far, and it does work (which is the most important thing), but if there's a better way I can do it, I would really appreciate it if somebody could point me in the right direction!

    Code:
    this.button1.textBTN_txt.text = "ABOUT US";
    this.button2.textBTN_txt.text = "SERVICE";
    this.button3.textBTN_txt.text = "PORTFOLIO";
    this.button4.textBTN_txt.text = "CONTACT";
    
    var buttonNum:Number = 4;
    
    for (i=1; i<=buttonNum; i++) {
    	this["button"+i].onRollOver = function() {
    		if (this.clicked != "yes") {
    			this.gotoAndPlay("over");
    		}
    	};
    	this["button"+i].onRollOut = function() {
    		if (this.clicked != "yes") {
    			this.gotoAndPlay("out");
    		}
    	};
    	this.button1.onRelease = function() {
    		this.gotoAndStop("out");
    		this._parent[_root.clickedButton].gotoAndPlay("out");
    		this._parent[_root.clickedButton].clicked = false;
    		this._parent[_root.clickedButton].enabled = true;
    		_root.clickedButton = this._name;
    		this.clicked = "yes";
    		this.enabled = false;
    		content.gotoAndPlay("A");
    	};
    
    this.button2.onRelease = function() {
    		this.gotoAndStop("out");
    		this._parent[_root.clickedButton].gotoAndPlay("out");
    		this._parent[_root.clickedButton].clicked = false;
    		this._parent[_root.clickedButton].enabled = true;
    		_root.clickedButton = this._name;
    		this.clicked = "yes";
    		this.enabled = false;
    		content.gotoAndPlay("B");
    	};
    
    this.button3.onRelease = function() {
    		this.gotoAndStop("out");
    		this._parent[_root.clickedButton].gotoAndPlay("out");
    		this._parent[_root.clickedButton].clicked = false;
    		this._parent[_root.clickedButton].enabled = true;
    		_root.clickedButton = this._name;
    		this.clicked = "yes";
    		this.enabled = false;
    		content.gotoAndPlay("C");
    	};
    
    this.button4.onRelease = function() {
    		this.gotoAndStop("out");
    		this._parent[_root.clickedButton].gotoAndPlay("out");
    		this._parent[_root.clickedButton].clicked = false;
    		this._parent[_root.clickedButton].enabled = true;
    		_root.clickedButton = this._name;
    		this.clicked = "yes";
    		this.enabled = false;
    		content.gotoAndPlay("D");
    	};
    
    
    }

  6. #6
    Junior Member
    Join Date
    Nov 2009
    Posts
    17
    Like I was thinking it should be something similar the this:

    Code:
    // script by http://onestoptutorial.com
    
    this.button1.textBTN_txt.text = "ABOUT US";
    this.button2.textBTN_txt.text = "SERVICE";
    this.button3.textBTN_txt.text = "PORTFOLIO";
    this.button4.textBTN_txt.text = "CONTACT";
    
    var buttonNum:Number = 4;
    
    for (i=1; i<=buttonNum; i++) {
    	this["button"+i].onRollOver = function() {
    		if (this.clicked != "yes") {
    			this.gotoAndPlay("over");
    		}
    	};
    	this["button"+i].onRollOut = function() {
    		if (this.clicked != "yes") {
    			this.gotoAndPlay("out");
    		}
    	};
    	this["button"+i].onRelease = function() {
    		this.gotoAndStop("out");
    		this._parent[_root.clickedButton].gotoAndPlay("out");
    		this._parent[_root.clickedButton].clicked = false;
    		this._parent[_root.clickedButton].enabled = true;
    		_root.clickedButton = this._name;
    		this.clicked = "yes";
    		this.enabled = false;
    		if (_root.clickedButton=button1) {content.gotoAndPlay("A");}
    		if (_root.clickedButton=button2) {content.gotoAndPlay("B");}
    		if (_root.clickedButton=button2) {content.gotoAndPlay("C");}
    		if (_root.clickedButton=button2) {content.gotoAndPlay("D");}
    	};
    }
    but this doesn't actually work, so I'm wondering what the correct syntax would be.

    Once again any help is very much appreciated!

  7. #7
    Member
    Join Date
    Nov 2009
    Posts
    43
    maybe if you can save your *fla into a Flash 8 format I can solve it to you.

  8. #8
    Junior Member
    Join Date
    Nov 2009
    Posts
    17
    Sure, here it is! (And as of now it does work, but I'm sure I'm making it overly complicated by repeating so much of the code 4 times.)

    So if you know a better way I would be very happy to learn it!

    Thank you again for helping...
    Attached Files Attached Files

  9. #9
    Member
    Join Date
    Nov 2009
    Posts
    43
    *fla

    (I changed in content the menu names) + made a shorter script.
    I hope it helps.
    Last edited by Creephun; 11-26-2009 at 06:41 AM.

  10. #10
    Junior Member
    Join Date
    Nov 2009
    Posts
    17
    Quote Originally Posted by Creephun View Post
    *fla

    (I changed in content the menu names) + made a shorter script.
    I hope it helps.
    That is awesome! Thank you!

    Okay, so there's just one more thing I'm wondering about... (Sorry!)

    I was just wondering if there's a simple way to modify that code again, this time so that when people first open the file, the first button has already been selected (so they're already on what will be the home page, and the button will already be down?).

    I think I know a way to fake it, but it would be great to know how it's properly done...

    Sorry if I'm asking too much... Again I really really appreciate you being so helpful!

  11. #11
    Member
    Join Date
    Nov 2009
    Posts
    43
    *fla

    I made it, and it's makes a bit longer your script but I think there aren't any other ways for this, with that 'for' cycle, that you want to use for menus.

  12. #12
    Junior Member
    Join Date
    Nov 2009
    Posts
    17
    Thank you so much, that's perfect! I really appreciate all the help.

  13. #13
    Member
    Join Date
    Nov 2009
    Posts
    43
    Your welcome I like to help.

  14. #14
    Junior Member
    Join Date
    Nov 2009
    Posts
    17
    Okay, sorry, I have one more question. This is the last one, I promise!

    I was just wondering...

    How would I modify that code if I wanted to show the rollover animation on entering the frame? (so instead of already being clicked, it would show the rollover animation first and then stay down, as if somebody had rolled over it and then clicked it).

    I tried just changing it to
    Code:
    if (!firstclick) {button1.gotoAndPlay("over");
    but that didn't work so I'm not sure what I would need to change...

    Again I really really appreciate you taking the time to help me with this. I'm great when it comes to design and animation but with coding I don't really know much at all.

    If you can't help with that I understand though, you've already helped immensely.

  15. #15
    Member
    Join Date
    Nov 2009
    Posts
    43
    // script by http://onestoptutorial.com
    this.button1.textBTN_txt.text = "A";
    this.button2.textBTN_txt.text = "B";
    this.button3.textBTN_txt.text = "C";
    this.button4.textBTN_txt.text = "D";
    var buttonNum:Number = 4;
    firstclick = false;
    for (i=1; i<=buttonNum; i++) {
    this["button"+i].onRollOver = function() {
    if (this.clicked != "yes") {
    this.gotoAndPlay("over");
    }
    };
    this["button"+i].onRollOut = function() {
    if (this.clicked != "yes") {
    this.gotoAndPlay("out");
    }
    };
    this["button"+i].onRelease = function() {
    this.gotoAndStop("out");
    this._parent[_root.clickedButton].gotoAndPlay("out");
    this._parent[_root.clickedButton].clicked = false;
    this._parent[_root.clickedButton].enabled = true;
    _root.clickedButton = this._name;
    this.clicked = "yes";
    this.enabled = false;
    content.gotoAndPlay(this._name);
    firstclick = true;
    };
    button1.onEnterFrame = function() {
    if (!firstclick) {
    button1.gotoAndPlay(12);
    button1._parent[_root.clickedButton].gotoAndPlay(12);
    button1._parent[_root.clickedButton].clicked = false;
    button1._parent[_root.clickedButton].enabled = true;
    _root.clickedButton = button1._name;
    button1.clicked = "yes";
    button1.enabled = false;
    content.gotoAndPlay(this._name);
    firstclick = true;
    }
    };
    }
    Just 1 plus line
    Last edited by Creephun; 11-27-2009 at 07:02 AM.

  16. #16
    Member
    Join Date
    Nov 2009
    Posts
    43
    And if you want to delay the opening here is a script for that:

    // script by http://onestoptutorial.com
    this.button1.textBTN_txt.text = "A";
    this.button2.textBTN_txt.text = "B";
    this.button3.textBTN_txt.text = "C";
    this.button4.textBTN_txt.text = "D";
    var buttonNum:Number = 4;
    firstclick = false;
    for (i=1; i<=buttonNum; i++) {
    this["button"+i].onRollOver = function() {
    if (this.clicked != "yes") {
    this.gotoAndPlay("over");
    }
    };
    this["button"+i].onRollOut = function() {
    if (this.clicked != "yes") {
    this.gotoAndPlay("out");
    }
    };
    this["button"+i].onRelease = function() {
    this.gotoAndStop("out");
    this._parent[_root.clickedButton].gotoAndPlay("out");
    this._parent[_root.clickedButton].clicked = false;
    this._parent[_root.clickedButton].enabled = true;
    _root.clickedButton = this._name;
    this.clicked = "yes";
    this.enabled = false;
    content.gotoAndPlay(this._name);
    firstclick = true;
    };
    }
    //This part, won't let the buttons being used when the site is opening.
    onEnterFrame = function () {
    for (i=1; i<=buttonNum; i++) {
    if (!firstclick) {
    this["button"+i].enabled = false;
    } else {
    this["button"+i].enabled = true;
    }
    }
    };
    function openup() {
    button1.onEnterFrame = function() {
    if (!firstclick) {
    button1.gotoAndPlay(12);
    button1._parent[_root.clickedButton].gotoAndPlay(12);
    button1._parent[_root.clickedButton].clicked = false;
    button1._parent[_root.clickedButton].enabled = true;
    _root.clickedButton = button1._name;
    button1.clicked = "yes";
    button1.enabled = false;
    content.gotoAndPlay(this._name);
    firstclick = true;
    }
    };
    }
    //This will delay the opening, you can change the interval as you want.
    setInterval(openup, 1000);

  17. #17
    Junior Member
    Join Date
    Nov 2009
    Posts
    17
    Awesome, thank you so much! This is great. Thank you.

  18. #18
    Junior Member
    Join Date
    Nov 2009
    Posts
    17
    Okay, one slight issue I just noticed...

    On the version with the delay, the buttons are still clickable once they've already been clicked; if you click them again, it plays the rollout animation. Is there a way to prevent this?

    The previous version works perfectly, but I would like to use the delay also, so if I could fix that one little bug it would be perfect...

    Can you help with that? (Thank you again.)

  19. #19
    Member
    Join Date
    Nov 2009
    Posts
    43
    PHP Code:
    onEnterFrame = function () {
        for (
    i=1i<=buttonNumi++) {
            if (!
    firstclick) {
                
    this["button"+i].enabled false;
            } else {
                
    this.button2.enabled true;
                
    this.button3.enabled true;
                
    this.button4.enabled true;
                
    delete this.onEnterFrame;
            }
        }
    }; 
    Just change this part, and sorry, I didn't see it
    Last edited by Creephun; 11-27-2009 at 09:19 PM.

  20. #20
    Junior Member
    Join Date
    Nov 2009
    Posts
    17
    Thank you!

    That almost totally fixes it but I noticed for the button1/A, it still has the same issue until another button has been clicked... is there a fix for that?

    Thanks so much, again...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center