Skip to main content
D
David Marston
Inspiring
May 28, 2017
Answered

Navigation buttons - next / previous

  • May 28, 2017
  • 3 replies
  • 3709 views

Hi,

I'm having one problem after another trying to set up forwards and backwards nav buttons.

I want to set up a series of movie clips on 10 frames. I only need to navigate from one frame to the next and back to the previous one.

This is where I'm at:

I've got the first time frames with a left and right button (backwards and forwards). It's going forward fine but it's just not working going back to previous frame. Here's an example of two sets of links I've got:

FRAME 2 ACTIONS:

stop();

btn_left.addEventListener(MouseEvent.CLICK, fl_ClickToGoToPreviousFrame_2);

function fl_ClickToGoToPreviousFrame_2(event:MouseEvent):void

{

  prevFrame();

}

btn_right.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_2);

function fl_ClickToGoToAndStopAtFrame_2(event:MouseEvent):void

{

  gotoAndStop(3);

}

FRAME 3 ACTIONS:

stop();

btn_left.addEventListener(MouseEvent.CLICK, fl_ClickToGoToPreviousFrame_3);

function fl_ClickToGoToPreviousFrame_3(event:MouseEvent):void

{

  prevFrame();

}

btn_right.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_3);

function fl_ClickToGoToAndStopAtFrame_3(event:MouseEvent):void

{

  gotoAndStop(4);

}

Hope that's clear enough.

I also have a question about navigating from a movie clip timeline to a frame on the root timeline but maybe I'll do that as a follow up question.

I'd appreciate any advice please.

Thanks.

This topic has been closed for replies.
Correct answer robdillon

Thanks for your input and here are my answers:

1. Not necessarily frame by frame, but in increments of 5 frames to see the next content.

Yes, the user will see the first, second, third . . . etc content until by the tenth frame a complete "picture" is assembled. This result will then be printed off or saved - but this bit is a question for later.

2. I just want the user to be able to navigate backwards and forwards in increments of 5 frames. So for example, if you're at frame 20 you can navigate forward to frame 25 or backwards to frame 15. I would like that facility at each keyframe on the main timeline.

I don't need the user to be able jump to random points. Just forward and backwards 5 frames to the following or previous keyframe.

Hope that makes things clearer.

Thanks again.


OK, then you want to keep the original nextFrame() prefFrame() buttons, event listeners and functions. Then, at the keyframes add a second set of buttons for the 5 frame jumps.

For the 5 frame jump part:

stop();

forward5.addEventListener(MouseEvent.CLICK, fl_ClickToGo5FramesForward);

function fl_ClickToGo5FramesForward(event:MouseEvent):void

{

  gotoAndStop(currentFrame + 5);

}

back5.addEventListener(MouseEvent.CLICK, fl_ClickToGoTo5FramesBack);

function fl_ClickToGoTo5FramesBack(event:MouseEvent):void

{

  gotoAndStop(currentFrame - 5);

}

Add a new layer, create new buttons for the 5 frame jump and name the instances forward5 and back5. Position them as you want in frame 1 of your timeline. Add a keyframe at frame 2, 5, 10, 11, 15, 16, etc. Now go back to frame 2 and move the new buttons off the visible area of the stage. I usually move them below the bottom of the stage. Do the same thing for frames 11 and 16. Now the jump 5 frames buttons will only appear at frames 1, 5, 10, 15, etc.  The code will still work because the buttons exist even though they are off the visible area.  The move forward or back by single frames will also still work. I think that will do what you want.

3 replies

C
ClayUUID
Legend
May 30, 2017

For future reference, it's possible to navigate forward and backward using only frame labels. Much more robust than relying on frame numbers.

btn_left.addEventListener(MouseEvent.CLICK, fl_ClickPrevLabel);

btn_right.addEventListener(MouseEvent.CLICK, fl_ClickNextLabel);

function fl_ClickPrevLabel(evt) {

    for (var i = currentLabels.length - 1; i > 0; i--) {

        if (currentLabels.name == currentLabel) {

            gotoAndStop(currentLabels[i - 1].name);

            break;

        }

    }

}

function fl_ClickNextLabel(evt) {

    for (var i = 0; i < currentLabels.length - 1; i++) {

        if (currentLabels.name == currentLabel) {

            gotoAndStop(currentLabels[i + 1].name);

            break;

        }

    }

}

D
David MarstonAuthor
Inspiring
May 30, 2017

This looks very interesting and I'll look in to it. I think I'm too far

down the line with this project now though.

Thanks!

<http://www.clearstreamdesign.co.uk>

<https://www.linkedin.com/in/clearstreamdesign/>

D
David MarstonAuthor
Inspiring
May 28, 2017

I'll try and be clearer.

I have content located on 10 individual  layers.

This content stacks up above the layer below ie the content is overlayed. So each layer of content will be visible throughout all frames.

But this is the important bit:

I need to be able to navigate from frame 1 to frame 10, from 10 back to 1. From 10 to frame 20, and from frame 20 back to frame 10 . . . and so on.

So the user selects next or previous (left or right arrow) and either goes forward 10 frames (right arrow) or back 10 frames (left arrow)

I have tried several different methods but I keep getting the 1021 duplicate function error message.

I hope I've made myself clearer?

Thanks again.

robdillon
robdillon
Participating Frequently
May 28, 2017

You can't have one event, like a mouse click on a button, call two functions. So your next button can't jump to the next frame and also to 10 frames ahead. You could have the button go from frame to frame for 10 frames and then at the next frame, or the 10th frame, jump 10 frames ahead by pointing to a different function. You could have one button for next frame and a different button for a 10 frame jump. How you do this will be based on what you are trying to accomplish.

You should probably draw out a diagram of the progress that you want to have through your project. If you want the user to be able to jump to more than one frame, you'll have to provide more than one way to get to those locations. If you want the user to jump 10 frames back only at frame 10 then you can put a keyframe at frame 10 for the back button and attach a new event listener to the back at that frame that points to a new function. Something like this:

btn_left.addEventListener(MouseEvent.CLICK, fl_ClickToGoBack10);

function fl_ClickToGoBack10(event:MouseEvent):void

{

  gotoAndStop(1);  // or whatever the correct frame number is

}

D
David MarstonAuthor
Inspiring
May 29, 2017

I've started again. Got everything working fine going one direction - from frame1 to frame 10 to frame 20 and so on right_btn

But going the otherway it's not working (the left_btn)  - from frame 100 to frame 90 and so on.

If I remove the code for one button, the other works. So there's a conflict which cancels out the other button (back button in this case)

The left_btn and right_btn are both on the same layer which is has a keyframe for each of the 10 stages I want to link to.

This is the code where the conflict occurs:

btn_right.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_9);

function fl_ClickToGoToAndStopAtFrame_9(event:MouseEvent):void

{

  gotoAndStop(50);

}

btn_left.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_13);

function fl_ClickToGoToAndStopAtFrame_13(event:MouseEvent):void

{

  gotoAndStop(40);

}

stop();

As far as I can see I'm doing everything by the book, selecting the correct code snippets.

Puzzled!!

Thanks

robdillon
robdillon
Participating Frequently
May 28, 2017

You don't really say what the problem is. What is not working correctly? Is this for an Actionscript or Canvas project? In either case if you have btn_right and btn_left in every frame, you only need to attach the event listener once and you only need to define the function once. So the code for frame 2 could be:

stop();

btn_left.addEventListener(MouseEvent.CLICK, fl_ClickToGoToPreviousFrame);

function fl_ClickToGoToPreviousFrame(event:MouseEvent):void

{

  prevFrame();

}

btn_right.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame);

function fl_ClickToGoToAndStopAtFrame(event:MouseEvent):void

{

  nextFrame();

}

If you have that code in its own layer on the timeline and the actual content that you want to show in different layer, with each frame a keyframe and the buttons in their own layer(s) with only a keyframe at frame 2 it should all work as expected.

D
David MarstonAuthor
Inspiring
May 28, 2017

Now that works perfectly thanks!

The problem I was experiencing was the back nav just seemed random - it didn't go to the previous frame although it went forward as expected!??

And yes, it's an Actionscript project.

This leads to the question, what if I need to navigate to a specific frame instead of next or previous  ie instead of going to next or previous, I skip 10 frames. So I want to go forward to frame 10, back to frame 1, or frame 20 back to frame 10.

The reason for this is that I need the content of some layers to carry over the content of the next frame.

Thanks again for your advice. Really appreciated.

C
ClayUUID
Legend
May 28, 2017

https://forums.adobe.com/people/David+Marston  wrote

This leads to the question, what if I need to navigate to a specific frame instead of next or previous  ie instead of going to next or previous, I skip 10 frames. So I want to go forward to frame 10, back to frame 1, or frame 20 back to frame 10.

The reason for this is that I need the content of some layers to carry over the content of the next frame.

I... suspect you may have a flawed mental model of how the Animate timeline works.

That being said, is gotoAndStop(frame) not suitable for your needs?

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices