A Flash Developer Resource Site

Results 1 to 10 of 10

Thread: Click button, play animation, and then go to new frame.

  1. #1
    Junior Member
    Join Date
    Dec 2012
    Posts
    7

    Click button, play animation, and then go to new frame.

    Hey

    So I'm in the process of making a Flashsite, however one thing I'd like to do is for an object to play an animation when you click it (it's a movieclip as a button). This button takes you to another page on my flashsite. I use a CLICK EventListener and a script that looks like this:

    Code:
    button1.addEventListener(MouseEvent.MOUSE_UP, bOut); 
    button1.addEventListener(MouseEvent.MOUSE_DOWN, bDown); 
    
    function bDown(event:MouseEvent):void { 
        button1.gotoAndStop(2); 
    } 
    
    function bOut(event:MouseEvent):void { 
        button1.gotoAndPlay(2); 
    } 
    
    button1.buttonMode = true
    
    stop();
    button1 is the object that plays an animation when you click it and then goes to a new frame (that's the function bOut).
    The timeline in the object looks like this http://imgur.com/9lRkg. The ActionScript in frame 1 is stop(); and in the last frame it's MovieClip(root).gotoAndStop(2);
    This means it will go to frame 2 on the main scene when the animation is done playing.

    Now the problem is: the animation plays fine when you click the object EXCEPT it stops at frame 15 (the first keyframe) and goes back to frame 1 in the animation. The stop() in frame 1 shouldn't matter since clicking the button will gotoAndPlay(2);

    Hope you understood my problem
    Any help will be appreciated.

  2. #2
    Senior Member
    Join Date
    Nov 2012
    Posts
    106
    I would break your problem up to two pieces:
    1) checking if your MovieClip(root).gotoAndStop(2) at the end of your child MovieClip; will advance your timeline like you are expecting. I always use MovieClip(parent). when I am trying to communicate to the parent MovieClip. If your code is on the main timeline, you may just need to have gotoAndStop without anything before it.

    2) Figuring out how to get your MovieClip Button to behave like you want it to. I don't think your functions are doing exactly what you want them to.

    bDown function is triggered when the user first presses the down on the mouse (the first part of a click). You are having the buttons timeline gotoAndStop on Frame 2.

    bOut function is triggered when the user releases the mouse click (the second part of a click). You are having the buttons timeline gotoAndPlay from Frame 2 until the end of the animation. At this point it will play to the end of your MovieClip timeline and then loop back to the beginning(this is the default action of all flash timelines). If you dont want it to loop, you will need to add a stop(); action on the last frame.

    I am wondering why you are not just using the MouseEvent.CLICK event listener. The only function you need is the bOut function if you want to play the animation. Just be sure to add a stop(); action on the last frame of the timeline to prevent it from looping. Hope this helps.

  3. #3
    Junior Member
    Join Date
    Dec 2012
    Posts
    7
    The image I posted is the button1 timeline. In the beginning I made the button as actual button, but someone told me that in order to make an animation play before it goes to a new frame, I had to make movieclips and then turn them into buttons, so I did. The thing is, I want them to have mouse over effects and such, so I've been adding code like this to the main timeline
    button1.addEventListener(MouseEvent.MOUSE_OVER, rOver1); and then function rOver1(event:MouseEvent):void {button1.gotoAndStop(2); so when I mouse over it'll go to frame 2 on the buttons timeline (which will show a
    larger version of the button; a mouse over). Everything works fine except the animation seems to not want to finish playing.

    When you say I could just use MouseEvent.CLICK event listener, could you elaborate or provide an example?

  4. #4
    Senior Member
    Join Date
    Nov 2012
    Posts
    106
    I guess I am having trouble grasping how the file is actually set up. If the picture is of your buttons timeline, then I am not seeing a keyframe that causes it to change to a larger size on frame 2.
    Are you animating the button itself? or is the animation inside of the button?
    Below is a sample of the MouseEvent.CLICK
    Code:
    button1.addEventListener(MouseEvent.CLICK, bClicked); 
    function bClicked(event:MouseEvent):void { 
        button1.gotoAndPlay(2); 
    } 
    
    button1.buttonMode = true

  5. #5
    Junior Member
    Join Date
    Dec 2012
    Posts
    7
    Oh right, actually I updated my file since I took that screenshot. In the button's timeline frame 1 and 2 is dedicated to mouse over and mouse off. Then the animation starts on frame 3.

    Also changing

    button1.addEventListener(MouseEvent.MOUSE_UP, bOut);
    function bOut(event:MouseEvent):void {
    button1.gotoAndPlay(2);
    to

    button1.addEventListener(MouseEvent.CLICK, bClicked);
    function bClicked(event:MouseEvent):void {
    button1.gotoAndPlay(2);
    }
    doesn't fix it.

  6. #6
    Senior Member
    Join Date
    Nov 2012
    Posts
    106
    I think your MOUSE_OUT is messing up your animation and bringing you back to the first frame. Why not have your animation in one movie clip and your button in another? If you could upload your source file, I could get it working for you.

    Code:
    button1.addEventListener(MouseEvent.CLICK, bClicked); 
    function bClicked(event:MouseEvent):void { 
    button1.removeEventListener(MouseEvent.CLICK, bClicked); 
    animation1.play();}

  7. #7
    Senior Member
    Join Date
    Nov 2012
    Posts
    106
    You could actually remove the MOUSE_OUT like I showed you above with the MouseEvent.CLICK. That may solve your problem.

  8. #8
    Junior Member
    Join Date
    Dec 2012
    Posts
    7
    Alright thanks, since the Flash file I'm working with is pretty large, I took out the related stuff and put it into a new .fla
    Attached Files Attached Files

  9. #9
    Senior Member
    Join Date
    Nov 2012
    Posts
    106

    Working file.

    Here is the working file. You will see I added an animation on your button.

    Enjoy and Happy Flashing.
    Attached Files Attached Files

  10. #10
    Junior Member
    Join Date
    Dec 2012
    Posts
    7
    It works great, thanks a lot for help.

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