Child Movie Clip and Timeline

[pfash]

Hi All,

I'm a newbie so I welcome corrections to my assumptions.

 

 I am using Animate CC 2017 to build an HTML5 <canvas> final product. In my main movie script I'm using the GSAP timeline functionality to scale up and down a movie clip (ImageA_MC):

var tl = new TimelineMax({paused:true, reversed:true});
TweenLite.defaultEase = Elastic.easeInOut; //type of tween
tl.to(stage.ImageA_MC, 1.3,{scaleX:3.1,scaleY:3.1, x: '+=250', y: '-=60'});

I like this timeline method because I can include many different tween actions and then just play and reverse everything with:

tl.play(); or tl.reverse();

However, I'm running into a problem when I want to call "tl.play(); or tl.reverse();" from a child movie clip. Ideally, I'd like to create the TimelineMax timeline and identify the tween properties ...all in the main movie script and then control those tweens from the child MC. (For example, you click on the Close button located in ImageA_MC's timeline and it closes the ImageA_MC itself.)

 

How would the "tl.play(); or tl.reverse();" be written in the child movie clip's script so it controls the TimelineMax timeline that was created in the main movie script?

Thanks much!

[Oliver16Years]

I think better if You keep all Your scripts in the main timeline. If You put script fragments into MCs You will get confused fast.

[pfash]

Yes, that's what I'd rather do, Oliver16Years.

 

But if I keep all code in the main timeline I need to communicate between the main timeline and the child movie clip, right?

 

My intent: I need to tween (scale and position) two MCs together: the child MC and its 'close' button. (The user will click on the small dashboard image and it scales up along with its 'close' button located in that same MC. User can then click on that close button to tween everything back to original size and position.)

 

In Shaun Gorneau's helpful example:

See the Pen qrpxMy by sgorneau (@sgorneau) on CodePen

he has both elements in the same DIV and the JS just tweens the whole DIV...like a parenting situation. That's how it's done in a web page...

 

So, I'm assuming,but please correct me, that the way to do the same thing in a GSAP + Animate framework (HTML5 <canvas>) is to put all the elements into a child MC...and tween that MC.

 

That looks good but how do I get the code in the main script, like the event handler that listens for clicks on the Close button in the child MC?

 

IOW: How do you make this line (below) work when you move the close button into the child MC?

var stage = this;
stage.CloseButton.addEventListener("click", ScaleDownDashboard.bind(this)); //Add event listener to the Close button

Thanks much!

[Oliver16Years]

Sorry I don't have Animate, but as I remember all nested elements are accessible via dot syntax. 

 

The elements ( MovieClips ) are in tree hierarchy. You can address them top-down from the stage. EaselJS calling it "Display list" as I know.

 

I am guessing now:
stage.myMovieClip.myCloseButton.addEvenlistener(....

 

Here is the official page of EaselJS which is the graphics engine of Animate's canvas format:
http://www.createjs.com/easeljs

 

Animate pros correct me please!

[pfash]

Thanks, Oliver16Years. That makes sense...but doesn't seem to work for me:

 

I put this in the main timeline script:

var stage = this;
stage.child_MC.closeButton_instance.addEventListener("click", reverseTweenChildMC.bind(this));

Any Animate CC user's help is greatly appreciated.

I'm sure it's some simple syntax that I need. I've been searching but probably am not using the correct terms. I'll read that easleJS page.

Thanks

 

FYI: When I include the above addEventListener line to the main timeline's script, the other tweens in that timeline that normally work, won't anymore. As if including an addEventListener line that refers to an instance (closeButton_instance) that isn't located in the main timeline (it's located in the child_MC) kills interactivity.

[pfash]

Wait!

I had a typo in that last test. Yes your syntax works.

stage.myMovieClip.myCloseButton.addEvenlistener(....

Thanks so much, Oliver16Years! I will now quit banging my head.

[pfash]

NOTE:

stage.myMovieClip.myCloseButton.addEvenlistener(....

In the dot syntax path above "myMovieClip" and "myCloseButton" must both be the Instance name of the movie clip (The name of the version that sits upon the stage)...not the name of the movie clip.