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
Brainiac
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.

C
ClayUUID
Brainiac
May 28, 2017

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

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 what's in frames 2 - 9 and 11 - 19 that's getting skipped over?

D
David MarstonAuthor
Inspiring
May 29, 2017

In reading through your posts here I think that I have an understanding of what you are trying to achieve. How does this sound:

1. Moving forward the user will move frame by frame to see new content. This content is in sections. So, if the user continues to move forward, they will see the first section from start to finish and continue to the second section, start to finish and so on.

2. If the user wants to move backward at any point:

If the user is inside the content of any section, they will move frame by frame back to the beginning of that section.

if the user is at the start of a section and moves back, they will move to the beginning of the previous section.

Does that sound like what you want to do?

Can the user jump ahead from the middle of one section to the beginning of a different section?

Can the user jump forward or back to a different section out of sequence?


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.

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
Brainiac
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