Edge Animate, create "Next" and "Back" buttons that play from current position

hi there, i am brand new to adobe edge, i just got it friday however i did make a slideshow with foward and back buttons, i do not know if it is the optimal way to do so however i was able to get it to work. what you need to do is create the div for your buttun than select it and go to the top left {} open actions. select on click and enter in similar code.

//for the back button:

var pos = sym.getPosition() // this is a numeric variable that gets the current time in the animation its in miliseconds so at one second this will have a value of 1000 at two seconds 2000 and so on

if (pos <= '1'){

          sym.play('5'); // this if statement is checking to see what slide the animation is on, if it is in the first slide, it will play the begining of the last slide

}

else if (pos <= '2'){

          sym.play('1'); // if it is in the second slide, it will play the begining of the first slide

}

else if (pos <= '3'){

          sym.play('2');  // if it is in the third slide, it will play the begining of the second slide

}

else if (pos <= '4'){

          sym.play('3');  // if it is in the fourth slide, it will play the begining of the third slide

}

else {

          sym.play('1');

}

// for the forward button its the same concept only reversed

i hope this is what you meant and i don't know if this is the most optimal way to do this, i am brand new to adobe edge but this is what i got.

Jonathon Davis

You can also check out my blog with examples here:

Jonathon, I saw your post and I have a question about something I am trying to do.

I have a continuously moving looping slide show that has back and next buttons. When you press the next button it should move forward one every time you click it and the same for the back button.

This is the code I am using but the the problem is that it goes to else {sym.play("one");} when the button is clicked. No matter where in the timeline the next button is clicked, it goes back to number one.  I don't know much about coding and I have tried everything to fix this but I am stuck.

It would be a great help if you knew what to do to fix this. Thank you.

var pos = sym.getPosition()

if (pos <= "one"){

          sym.play("twenty");

}

else if (pos <= "two"){

          sym.play("three");

}

else if (pos <= "three"){

          sym.play("four");

}

else if (pos <= "three"){

          sym.play("four");

}

else if (pos <= "four"){

          sym.play("five");

}

else if (pos <= "five"){

          sym.play("six");

}

else if (pos <= "six"){

          sym.play("seven");

}

else if (pos <= "seven"){

          sym.play("eight");

}

else if (pos <= "eight"){

          sym.play("nine");

}

else if (pos <= "nine"){

          sym.play("ten");

}

else if (pos <= "ten"){

          sym.play("eleven");

}

else if (pos <= "eleven"){

          sym.play("twelve");

}

else if (pos <= "twelve"){

          sym.play("thirteen");

}

else if (pos <= "thirteen"){

          sym.play("fourteen");

}

else if (pos <= "fourteen"){

          sym.play("fifteen");

}

else if (pos <= "fifteen"){

          sym.play("sixteen");

}

else if (pos <= "sixteen"){

          sym.play("seventeen");

}

else if (pos <= "seventeen"){

          sym.play("eighteen");

}

else if (pos <= "eighteen"){

          sym.play("nineteen");

}

else if (pos <= "nineteen"){

          sym.play("twenty");

}

else {

          sym.play("one");

}

Hello Waltwooden,

I have the same issue, did you find a solution?

Greetings

Casu2013 wrote:

 

Hello Waltwooden,

 

I have the same issue, did you find a solution?

 

Greetings

If you change the numbers in milliseconds (for the timeline) it works.

example:

if (pos <= '1000'){

          sym.play(1001);

IF your position steps are equal, in my case 250 millisecs each in 9 places, then you might have success with this 8 line snippet:

//for the back button:

var pos = sym.getPosition() // this is a numeric variable that gets the current time in the animation its in miliseconds so at one second this will have a value of 1000 at two seconds 2000 and so on

if (pos >= 0){

          sym.play(pos + 250); // this if statement is checking to see what slide the animation is on, if it is in the first slide, it will play the begining of the last slide

     sym.stop();

}

else {

          sym.stop(2000);

}

// for the forward button its the same concept only reversed

Hi, so I was having issues initiating a forward and back function on my slideshow. Each slide is animated to bring the elements in and for some reason though I can't get this code to work. Even if I label where each slide is to begin and use those to help or the milliseconds of each. Nothing is working for me!

Hi!

Also brand new to Edge, here.

How would I manipulate this code so that instead of referencing slide numbers, I can reference a label or a time?

So....

if (pos <= 'somewhere between 0 and 1000'){

          sym.play('0');

}

else if (pos <= 'somewhere between 1001 and 2000'){

          sym.play('1000');

I tried just making multiple sets of buttons that are supposed to skip forward and back to labels like so:

sym.play("myLabel");

But it doesn't work. Nothing happens.

Thanks!

Hi there!

This is the code I have in mine. I have this code in the actions for Stage. I hope this is what you are asking for. The slide I made had a back and forth button that would skip to the next or previous slide when clicked. Here is what I have. Replace the Label1, Label2, etc. with the label of your slides. Then 'Back' and 'Forward' replace with the actual labels of your back and forward buttons.

var mylabels = ['Label1','Label2','Label3', 'Label4', 'Label5'];
var i=0;
sym.$('Forward').click(function(){
i++;
sym.play(mylabels[i]);  // plays the labels in a symbol
});

sym.$('Back').click(function(){
i--;
sym.play(mylabels[i]);
});

I hope this helps!

I am looking for the same thing.  I have more of a design background and still am learning the scripting side of Edge.  Do you a an example file with this that I can take a look at?  I should be able to figure it out from there.

Thanks

I would hide the back button at start and add show on next event. I would hide next at the end of the array

var mylabels = ['Label1','Label2','Label3', 'Label4', 'Label5'];
var i=0;
sym.$('Forward').click(function(){

sym.$('Back').show();

i++;

if(i>=mylabels.length){

sym.$('Forward').hide()

}else{

sym.$('Forward').show();

}
sym.play(mylabels[i]);  // plays the labels in a symbol
});

sym.$('Back').click(function(){
i--;
sym.play(mylabels[i]);

if (i==0){

sym.$('Back').hide();

}
});

Thanks for your quick reply.  Do possibly have this in a project file that I can open and see how you did it?  Everything I try doesn't work.  I am more of a designer and the coding part of Edge Animate is still a major challenge for me.

What version of Animate do you have?

2014.1

Here in version 4.0.1

Next Back Buttons.zip - Box

For this version without jquery use this code in compositionReady. Do not use the upgraded file since it add jquery.

change these lines:

sym.$('Forward').click(function(){

to

sym.$("Forward").bind("click",function() {

and this;

sym.$('Back').click(function(){

to

sym.$("Back").bind("click",function() {

Here is the file for 2014.1

Next Back Buttons version 2014.1.zip - Box

Thanks so much! I was able to get it to work with the script changes in post 17.  That was what was causing the issue.  It's neat to know that I was putting in the code in the correct places. 

You have no idea how much this helps.  I REALLY appreciate it!

My pleasure! Good luck on your project.

Hello, . I am working on a project but i am stuck now. The basic flow of my project is: intro slides then a video plays then next and back buttons fade in that will control the next set of slides. Another button to replay the whole thing from start. My problem is i am able to replay the slides but not the video.I am using  the new edge animate cc 2014.1 All the slides play from the beginning but the video does not follow that lead. I also managed to replay the video but thats not the desired thing i want. I want the whole composition to play again when i click a button. Can anyone help ?