Navigation buttons - next / previous

[David Marston]

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.

[robdillon]

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.

[David Marston]

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.

[ClayUUID]

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?

[David Marston]

A flawed mental model . . .

I'm obviously new to this and following the help files and various Youtube videos I did try a method similar to what you suggested but ended up with the "1021 duplicate function" error message which, as I can see from a Google search for that issue, is not a problem that is unique to myself - it seems many people experience the same error.

So I've spent most of the day with code such as:

cat3leftbtn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_5);

function fl_ClickToGoToAndStopAtFrame_5(event:MouseEvent):void

{

  gotoAndStop(5);

}

cat3rightbtn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_15);

function fl_ClickToGoToAndStopAtFrame_15(event:MouseEvent):void

{

  gotoAndStop(15);

}

stop();

As you can see, I've spent some times trying to give functions unique names (not duplicate)..

I'm not sure your recommendation would work. I have 10 different frames that I want to navigate to, not one.

Would your gotoAndStop(frame) method avoid the "1021 duplicate function" error?

I'm using the code snippets but it's not as simple as a simple snippet . . . at least not for me anyway!

[robdillon]

If you want to move to a new frame and then continue on for a set number of frames, you can just use gotoAndPlay(currentFrame+1). Then to return back to calling frame you will need to track that calling frame number or use a frame label. That means that you will need to set up one or more variables to hold the value of the calling frame or label.

Alternately, you could put the multi-frame content into its own movieclip and then just play that movieclip in the single frame. I don't know what your content is or how your project is meant to work, so I can't give you a simple solution.

[David Marston]

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]

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

}

[David Marston]

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

[David Marston]

Here's a screen grab of where I'm at. Hope this helps.

I've put markers in too. Cat1, cat2 etc (cat=category). So I'm just trying to navigate forwards and backwards between each category.

[robdillon]

I'm guessing that the buttons are in the "navs" layer. The frame labels can be useful for navigation, so it's good that you have those. Now, in your code on frame 1, I'm guessing that you have the function for nextFrame(), and that will move the user one frame at a time until they reach frame 5. I don't know why you have a keyframe and new code at frame 5.

In any case, as I said above, you can only assign one even listener to an object at a time, and connect one function to that event. If you write a new event listener at a keyframe for an object that already has an event listener, the first listener is abandoned and the new one takes over. You will also need to assign a new function. You can write a conditional statement into your function that could use the value of the currentFrame or the currentFrameLabel to move one way or another, but that's a whole different level of complexity.

So, if you have a forward button that moves the user one frame at a time from frame 1 to frame 10 and then at frame 10 you want the user to jump to frame 20, you'll have to assign a new event listener and function to the forward button at frame 10. Then at frame 20, you'll have to write a new one again to get the frame by frame movement. Moving backward through the timeline should work the same way.

[David Marston]

Hi,

I seem to have found a solution of sorts which is working - I can navigate forwards and backwards to specific frames.
As you can see from the screengrab below I've done it by staggering the actions.

The actions1 layer contains the code navigating up the timeline

The actions2 layer contains the code navigating back down the timeline.

So for example on the Actions1 layer at the cat9 marker I have the following code:

btn_right.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_9);

function fl_ClickToGoToAndStopAtFrame_9(event:MouseEvent):void

{

  gotoAndStop("cat10");

}

stop();

On the Actions2 layer at frame 49 I have the following code:

btn_left.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_29);

function fl_ClickToGoToAndStopAtFrame_29(event:MouseEvent):void

{

  gotoAndStop(44);

stop();

It's not perfect obviously but it's a step in the right direction. It's not perfect because the forwards and backwards arrows don't work simultaneously. You can either go forward or back - you can't change direction between the start or the end. So that's making me re-think how I'm going to handle the project.

For example, I'm thinking of controlling the navigation from a movie clip which you can select from a single select button. This would avoid the conflict of trying to get two buttons working at the same time.

I hope this makes sense to you. I can hardly get my around it at the moment but I'm learning. I know it's the cleanest method by far but it's the best I can do at the moment.

Thanks again for your feedback.

[ClayUUID]

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?

[David Marston]

There are 10 layers of content.

The content of layer1 is visible throughout the whole project

The content of layer 2 is visible from key frame 2. The content of layer 3

is visible from key frame 3 and so on until a compound image is formed by

key frame 10 where you can see the content of all 10 layers.

Spacing the content out between key frames just seems easier to work with

for me.

Does that make it clearer for You?

[ClayUUID]

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

Spacing the  content out between key frames just seems easier to work with

for me.

Does that make it clearer for You?

That is really weird and you shouldn't be working that way. As you're experiencing firsthand, it's causing all sorts of problems. The timeline is for animating things, not implementing some ad hoc content creation GUI. Better to break this habit sooner than later.

That being said, assuming your destination frames are evenly distributed, I don't see why aren't doing something like this in your event handlers...

To navigate back:

if (currentFrame > 10) {

     gotoAndStop(currentFrame - 10);

}

To navigate forward:

if (currentFrame < 50) {

     gotoAndStop(currentFrame + 10);

}

(adjusting bounds and increments as needed)

With this approach you only need two click handler functions for the entire timeline, instead of constantly changing them.

[David Marston]

To be honest I'm not entirely sure what you mean. I understand the timeline is for creating animation. But I also thought it was used to navigate between different content within the project?

But I'm clearly learning and I appreciate your honest feedback.

Would it make more sense if I put the navigation buttons in individual movie clips and referenced the main timeline from each movie clip (there would be ten movie clips in this project).

If so, how do I link to a frame on the main timeline from a movie clip please?

Or would I experience the same sort of conflict between the backwards and forwards buttons within the movie clip?

Thanks.

[ClayUUID]

Wait... when you said "keyframe 10" above, were you talking about the keyframe ON frame 10, or the tenth keyframe?

Regardless, none of the questions you just asked have anything to do with what I just suggested. I'm trying to work with your current structure. If your keyframes fall on evenly distributed boundaries, you can use relative frame numbers instead of absolute frame numbers. It'll be brittle, but t'll work with what you have.

[David Marston]

Hi,

the keyframes I want to navigate to and from are at frame 5, 10, 15 etc in increments of 5 frames up to frame 55.

Does that answer your question?

Also, going back to your earlier point ("The timeline is for animating things, not implementing some ad hoc content creation GUI"). I asked a lot questions before committing to developing this project in Animate. I also did plenty of research and found examples of projects which seem far more complex than what I'm trying to achieve - they seemed to consist of different scenes/movie clips within the time line and some navigation structure between them.

I hope I haven't wasted my time so far trying to develop this project. To be frank, I'm surprised (and frankly disappointed) that the code snippets allow you to navigate next/prev frame quite easily, but to navigate to specific frames forwards and backwards in the timeline is very difficult. I would of thought it was quite a common requirement?

Thank you for your advice and patience. I do appreciate it.

[robdillon]

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?

[David Marston]

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 · Accepted solution]

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.

[David Marston]

Now that works just perfectly!!! Thank you so much.

In fact, it was easier than your solution (I should really try and clarify exactly what I'm trying to achieve in future).

All I needed was the forward5 and back5 buttons and code. That is all I was hoping to achieve.

I don't need the forward or back by single frame action.

have learned a lot in the course of this discussion - not just about Actionscript3 and navigation, but about being clear about what objective I'm trying to achieve.

Thank you very much for your time.

[robdillon]

You're welcome. Good luck with the rest of your project.

[ClayUUID]

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;

        }

    }

}

[David Marston]

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