1

I used to be a Flash Developer, and I'm trying to understand the differences between ActionScript and the new CreateJS platform. I'm finding it difficult to find answers on Google so I figured I would ask here in hopes an expert can give me a solid explanation to build off of. Any help is very much appreciated.

Basically, I'm having difficulty understanding the complexities of timeline scope and how movie clips on the stage interact with each other in CreateJS. I'm also having trouble understanding how scope works between frames on the timeline.

In AS3 you could basically just drop a symbol on the stage and reference it on the main timeline like this:

if(ball_mc.aVariable == true) ball_mc.gotoAndPlay(2);

It seems, however, that in the new HTML5 Canvas Animate CC this no longer works. I get a lot of 'undefined'. I'm also finding that each frame is locked in scope. If I create a variable on frame 1 of ball_mc and then try to reference it on frame 2 I get an error unless I do something like this:

var aMovieClip = this.aMovieClip;

In ActionScript each nested timeline had it's own scope. If you created a variable on the first frame, that variable persisted across the entire timeline. I find it hard to believe that there is no easy way to extend the scope of a variable or function across a timeline. This is what made Flash a breeze when it came to adding interactivity on a timeline.

I tried to do the same thing with a function and I got an error like this:

createjs-2015.11.26.min.js:12 Uncaught TypeError: Cannot read property 'handleEvent' of undefined

I would like to understand how to have two movieclips on a timeline and have them interact with each other in a similar fashion as was possible in AS3:

MovieClip(parent).ball_mc.colour = 'red';

or..

this.addEventListener(MOUSE_EVENT.CLICK, callParentTimeline);
function callParentTimeline():void{
MovieClip(parent).gotoAndPlay(5);
}

etc. etc. etc.

this.parent isn't working for me.. and referencing a movieclip from the main timeline doesn't allow me to access it's frame variables along it's timeline.

I'm finding this confusing and frustrating because when I Google these issues, I find numerous articles that say such things as "Just say this.variable and it will work" or "just use parent.ball_mc to call the root", and I'm finding none of these suggestions seem to work.

Can any of you explain this to me?

Thank you!

Cmaxster
  • 1,035
  • 2
  • 11
  • 18

1 Answers1

2

@Cmaxster You can always access your MovieClips that are on the stage via the exportRoot. For instance: If you have a ball with an instance name of myBall, it can be referenced like this var myBall = exportRoot.myBall;

If you wanted to post an FLA with more sepecific questions I can have a look :)

sebastian.derossi
  • 275
  • 2
  • 5
  • This code is on the first frame of my Animate CC project. I'm finding that the following code isn't working.. this.animating = true; `this.stopAnimation = function(){` `this.animating = false;` `console.log('>> timed out ',this.animating); // console logs as 'false'` `}` `this.timeout = setTimeout(this.stopAnimation, 1000);` – Cmaxster May 24 '16 at 18:05
  • I want to understand how I can access this.animating (which sits on frame 1) on frame 18, etc. – Cmaxster May 24 '16 at 18:11
  • @Cmaxster I am not sure I understand what you are asking. What are you expecting to happen? `this.animating` will equal false once you call `this.stopAnimation`. If you console.log `this.animating` from frame 18 it will return as true, since you are delaying the call (this.stopAnimation) to change the value. `this.animating` is scoped to `Window` so you should have access to it from anywhere. I suggest you put together an example and I can have a look. – sebastian.derossi May 25 '16 at 06:48
  • Thanks for your help sebastian. I just shared an example of what I"m trying to do in the link above.. let me know if you're able to run it and your thoughts. I think I'm having a hard time understanding how scope works in animate CC's timeline as evident in my file. – Cmaxster May 26 '16 at 19:24
  • @Cmaster I see your issue now. Your issue is your scope when using the `setTimeout` "this" is scoped to Window not `lib.ScopeExample` Give this a shot: [code] var _this = this; // reference to lib.ScopeExample this.stopAnimation = function(){ _this.animating = false; //still seems to console log as 'false' timerOutput.text = 'Animating variable should now equal false!'; } this.theBtn.on('click', function(e){ output.text = this.animating;}, this); //createjs.Tween.get(this).wait(2000).call(this.stopAnimation); //try this this.timeout = setTimeout(this.stopAnimation, 2000);[/code] – sebastian.derossi May 27 '16 at 03:38
  • Ok that worked! Thank you.. so how can I make sure my references are scoped properly to lib.ScopeExample? What's the difference between saying this.aVariable = true; as opposed to var _this = this; _this.aVariable = true; ? I'm trying to make sense of how scope works on the timeline.. window vs lib.. it seems by creating a variable scope is set to lib but by simply setting properties on this (this.aVariable = true) scopes to window? – Cmaxster May 27 '16 at 20:03