Adding functions to CreateJS Movieclips

Question

I have a Flash file that I'm converting to HTML5 with CreateJS. The Flash file is fairly complex (for an MPU banner, at least) with lots of GSAP timelines and other functions. I've converted most of the specific functions (eg, performing a certain animation after a delayed call from TimelineMax), however I'm stuck on one thing:

In the Flash file I've got a group of about 20 instances of a MovieClip ("Pulsar"). On the Pulsar MC there is a frame script with a few simple functions, for example "pulse", which listens for a global boolean "killPulses" being false, and then randomly pulses (by running along the MC's timeline), until such time as "killPulses" is true.

function pulse(time:Number = 1.5):void {
    if (isPulsing == false) {
        isPulsing = true;
        TweenLite.to(this, time, {frameLabel:"pulse_end", onComplete:resetPulse});
    }
}

function resetPulse():void {
    gotoAndStop("pulse_start");
    isPulsing = false;
}


function callRandomPulse(e:Event):void {
    var ran = Math.random();

    if (MovieClip(root).killPulses == true) {
        freqNumber = 0;
    } else {
        freqNumber = defaultFreq;
    }

    if (ran < freqNumber) {
        pulse();
    }
}

TweenLite.ticker.addEventListener("tick", callRandomPulse);

This was fairly easy in Flash, but as script isn't ported in CreateJS, how do I add these functions to the lib.Pulsar object in JS? I would rather do it outside the main .js file, as otherwise it would get overwritten each time I re-export. I can't seem to access the internal properties of lib.Pulsar (a console log just gives me the function script, rather than its properties?). Is that the best way to add the functions or is there a more suitable way?

The intended effect is that the group of Pulsars pulse randomly and out of sync with each other, but only while they're 'activated'.

Thanks!

score 0 · Answer 1 · answered Jan 23 '15 at 16:50

0

Flash has closures on methods, so it gets called in the right scope. JavaScript doesn't. You have defined these functions as anonymous, since they just live in the frame's function (check out the exported AS), so the scope is lost when the functions are called.

You can solve this by storing the functions on this

Instead of:

function pulse() {}
pulse();

Use:

this.pulse = function() {}
this.pulse();

You also have to ensuring that calls made by utilities like TweenLite also include a scope. If there is no support for scoping methods in TweenLite, you will have to do it manually.Binding your functions is an easy way to provide a scope, but it isn't supported in all browsers.

TweenLite.ticker.addEventListener("tick", callRandomPulse.bind(this));

Hope this helps. Feel free to take a stab at this, and let me know if you still get hung up, and I can provide more assistance.

answered Jan 23 '15 at 16:50

Lanny

11,244
1
22
30

Thanks Lanny - I kind of figured out the scoping stuff (see my other question [here](http://stackoverflow.com/questions/28108646/scope-i-think-challenge-in-javascript)). However that was adding the funcs to each instance of the symbol, once they're already on the canvas. What I was wondering was if there was anyway to add these funcs as methods of the symbol _before_ it's added to the canvas (maybe via the prototype?), because I can't seem to access the properties of the symbol to make changes. Sorry, I'm not au fait with JS structure, I'm more of an inquisitive designer I guess! – Ollywood Jan 25 '15 at 18:02
I would recommend using Flash content as a _library_, and then coding externally. You can create your own classes that compose Sprites and MovieClips instead of trying to mixin functionality in frame scripts. – Lanny Jan 26 '15 at 16:09
Hey Lanny - sorry for the slow reply and thanks for helping. Your comment of using the Flash content as a library is exactly what I'm trying to do (eg, the 'lib' object that CreateJS outputs containing all the symbol definitions), what I mean is that I would like to figure out how to extend a given symbol's class with custom methods and properties. – Ollywood Jan 30 '15 at 14:52
...in EaselJS, I should add. – Ollywood Jan 30 '15 at 15:12
@OllySkinner You should be able to extend any definitions in the lib script. Feel free to set up a sample, and I can help you iron it out. – Lanny Jan 30 '15 at 16:28

Adding functions to CreateJS Movieclips

1 Answers1