Jump to content
GreenSock

EduardoRodriguez

Problem TimelineMax with Adobe Animate

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

 

 

Hello,
I have a problem with Adobe Animate TimelineMax.
The problem is that I need to navigate back and forward into the Animate timeline and play the same TimelineMax animations that afect to the same element in and out.

 

in the first frame of animate keyframe I have one button and this:
 

var root = this;
root.stop();
root.chk1.visible = 0;
root.continuar.visible = 0;

function sigue0() {
    root.play();
}

function entrar(vel) {
    root.boton1.disabled = true;
    tl0 = new TimelineMax({onComplete:sigue0});
    tl0.from(root.boton1,vel,{x:root.boton1.x-150, alpha:0, ease:Back.easeOut},.0);
}

entrar(1);

in the next frame I have this:

var root = this;
root.stop();

if (this.control == 1) {
root.chk1.visible = 1;
root.continuar.visible = 1;    
}

function sigue1() {
    tl1.pause(0).clear();
    root.play();
}

this.boton1.addEventListener("click", fl_MouseClickHandler1.bind(this));

function fl_MouseClickHandler1()
{
    this.control=1;
    root.chk1.visible = 0;
    tl1 = new TimelineMax({onComplete:sigue1});
    tl1.to(root.boton1,1,{scaleY:2, scaleX:2,alpha:0},.0);
}

in the next yhis:

var root = this;
root.stop();

if (this.control == 1) {
root.gotoAndPlay("op1");
}

and in the label "op1" I have this:

var root = this;
root.stop();
	
this.volver.addEventListener("click", fl_MouseClickHandler1.bind(this));

function fl_MouseClickHandler1()
{
	this.control=1;
	this.gotoAndPlay(0);
}

The problem is that the fisrt time I execute this the function "fl_MouseClickHandler1()" wait until every animation is finished and then execute "onComplete" and  function "sigue1" but the second time the function "fl_MouseClickHandler1()" is executed it don't wait the animation of the elements and execute "onComplete".

 

How can I fix that?

 

I create elearning courses in Flash the last 10 years and now I want to do the same with animate but i need to navigate back and forward a lot of times in the Animate timeline.

 

Sorry for my english and best regards,

Eduardo

 

See the Pen EyyVjW by EduardoRSV (@EduardoRSV) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for providing the demo on CodePen.

I'm struggling a bit with the language barrier and the code structure.

 

I'm not familiar enough with Animate to be able to diagnosis this properly.

From my exploration it seems like it there are a lot of potential scoping issues.

You define and create click handlers inside frame() functions and then every time you go back to a frame you recreate the same things.

Also there is code in frame2() for instance that tries to reference things that were defined in click handlers created by frame1().

 

In Flash it was generally frowned upon to have scripts in different frames (for similar reasons). Similarly I would suggest for Animate that you keep all your code in frame1 or have as many things globally scoped as possible (not living in different frames or inside functions created in different frames). 

 

From looking at your code there seems to be 2 issues I can identify.

1- you are calling clear() on your timeline which is going to remove all the tweens and would somehow explain why the onComplete is firing instantly.

2 - it also seems that calling root.play() inside the seque1 callback is running some code that messes things up.

 

if you alter seque1 to

 

function sigue1() {
      alert("sique1")
tl1.pause(0);
//root.play();
}

 

http://codepen.io/GreenSock/pen/qNNZxq?editors=0010

 

You will see that the cup animation will grow repeatedly each time you click it.

 

Unfortunately, that's about as far as I can go with this. 

Link to comment
Share on other sites

Thank you very much for your help!
Indeed the code should always be in the frame 0 and not define functions in different frames.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×