Search code examples
javascripteaseljsbowercreatejs

EaselJS with TweenJS with MovieClip


I'm running into the error: Uncaught TypeError: Cannot call method 'installPlugin' of undefined when trying to include movieclip-0.7.0.js. I've got the following in my html:

<script src="bower_components/easeljs/lib/easeljs-0.7.0.min.js"></script>
<script src="bower_components/tweenjs/build/tween.min.js"></script>
<script src="bower_components/easeljs/lib/movieclip-0.7.0.min.js"></script>

tween.min.js is version 0.5.0 (I installed with bower but for some reason the tags in bower [r1, r2, ... r12] don't match the tags on github [release_v0.1, release_v0.2.0, ... release_v0.5.0] but I don't feel that's an issue, just something worth noting)

I've reordered the files to see if that is the issue but no luck there. Any advice here? Also while I'm here can I also ask if there's any examples or tutorials anyone knows about for animating lines being drawn? Which is what I'm thinking I can accomplish via movieclip and tween. Something to the nature of:

createjs.Ticker.setFPS 30
createjs.Ticker.addEventListener 'tick', data.self.handleTick
labels =
  start: 0
mc = new createjs.MovieClip null, 0, false, labels
data.stage.addChild mc
steps = [
  data.objects.firstLine.graphics.ss('#000').mt(10, 10).lt 11, 10
]
mc.timeline.addTween(
  createjs.Tween.get(steps[0]).to {width: 100}, 1000
)
mc.goToAndPlay labels.start

And now after I've looked closer at the tween demo here: http://www.createjs.com/#!/TweenJS/demos/tweenSample it looks like MovieClip may not be needed for such a task and I also think the version of Tween.js I got via bower is not what I should use. :\ I'm new to bower, is this just an issue with bower or the setup of TweenJS for bower? Not sure how all that works. Not necessary for this answer but bonus points if you feel like breaking that down. I've tried grabbing other versions via bower but none of them seem to be the same as the version I get by cloning the repo. For example from bower I see a directory structure like this:

tweenjs/
  /src/
    Tween.js

And in the repo it looks like:

tweenjs/
  /src/
    CSSPlugin.js
    Ease.js
    MotionGuidePlugin.js
    SamplePlugin.js
    Timeline.js
    Tween.js
    version.js

So there's a lot more there from the repo and furthermore, the Tween.js from bower doesn't have the createjs namespace like the one from the repo i.e. this.createjs = this.createjs||{};

Any thoughts are appreciated. And I apologize for such a loaded question.


Solution

  • Closing this as I've found I don't need movieclip to accomplish what I need. Though I will mention the bower components issue I was having should've been more obvious to me when the tags didn't match. This url says it all. :P (Hint: There's more than one "tweenjs" in the bower registry)

    http://sindresorhus.com/bower-components/#!/search/tweenjs