Exporting CreateJS lib assets for use with require.js

问题

I'm trying to use assets (vector, movieclips, etc.) exported from the Flash IDE for CreateJS but we are using require.js to manage our JS code so the exported lib JS is not directly compatible to be loaded with require.js

Has anyone figured out what changes to do to the exported JS to adapt it for use with require.js? Here is an example of such an exported JS code:

(function(lib, img, cjs)
{

    var p; // shortcut to reference prototypes

    // stage content:
    (lib.Lib = function()
    {
        this.initialize();

        // Layer 1
        this.background = new lib.Background();
        this.background.setTransform(320, 240, 1, 1, 0, 0, 0, 320, 240);

        this.addChild(this.background);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    // symbols:
    (lib.background = function()
    {
        this.initialize(img.background);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 320, 480);


    (lib.flashlogo = function()
    {
        this.initialize(img.flashlogo);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 894, 894);


    (lib.Background = function()
    {
        this.initialize();

        // Layer 1
        this.instance = new lib.background();
        this.instance.setTransform(640, 0, 1, 1, 0, 0, 180);

        this.instance_1 = new lib.background();

        this.addChild(this.instance_1, this.instance);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    (lib.BubbleVector = function()
    {
        this.initialize();

        // Layer 1
        this.shape = new cjs.Shape();
        this.shape.graphics.f().s("rgba(215,254,255,0.741)").ss(8.7, 1, 1).p("EArYgrXQR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+Qx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+g");

        this.shape_1 = new cjs.Shape();
        this.shape_1.graphics.rf([
            "rgba(149,235,252,0)", "rgba(149,235,252,0.102)", "rgba(149,235,252,0.451)", "rgba(145,173,255,0.576)",
            "rgba(67,170,233,0.851)"
        ], [
            0, 0.357, 0.745, 0.922, 1
        ], -0.2, -0.1, 0, -0.2, -0.1, 389.2).s().p("EgrXArYQx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+QR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+gAOgNzQhWBXAAB7QAAB7BWBWQBYBYB7gBQB6ABBXhYQBXhWAAh7QAAh7hXhXQhXhXh6ABQh7gBhYBXgA2k2IQg3A4AABOQAABPA3A3QA5A4BOABQBPgBA3g4QA4g3AAhPQAAhOg4g4Qg3g4hPAAQhOAAg5A4g");

        this.shape_2 = new cjs.Shape();
        this.shape_2.graphics.rf(["#FFEBFC", "rgba(189,238,250,0.137)"], [
            0.42, 1
        ], 0, 0, 0, 0, 0, 31.5).s().p("AjRDQQhWhWAAh6QAAh5BWhXQBYhXB5AAQB6AABXBXQBXBXAAB5QAAB6hXBWQhXBYh6AAQh5AAhYhYg");
        this.shape_2.setTransform(113.9, 109.4);

        this.shape_3 = new cjs.Shape();
        this.shape_3.graphics.rf(["#FFEBFC", "rgba(189,238,250,0.251)"], [
            0.455, 1
        ], 0, 0, 0, 0, 0, 20.2).s().p("AiFCFQg4g3ABhOQgBhNA4g4QA4g4BNAAQBOAAA4A4QA3A4AABNQAABOg3A3Qg4A4hOABQhNgBg4g4g");
        this.shape_3.setTransform(-131, -128.2);

        this.addChild(this.shape_3, this.shape_2, this.shape_1, this.shape);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(-392.6, -392.6, 785.3, 785.3);


    (lib.Bubble = function(mode, startPosition, loop)
    {
        this.initialize(mode, startPosition, loop, {});

        // Layer 1
        this.instance = new lib.BubbleVector();
        this.instance.setTransform(0, 0, 0.4, 0.4);

        this.timeline.addTween(cjs.Tween.get(this.instance).to({scaleY: 0.4, skewX: 3.3}, 11).to({skewX: -3.1}, 24).to({scaleY: 0.4, skewX: 0}, 12).wait(1));

    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(-157, -157, 314.1, 314.1);

})(lib = lib || {}, images = images || {}, createjs = createjs || {});
var lib, images, createjs;

... You see, it's rather chaotic.

回答1:

Ok, here is what I got:

As I understood from your code - you want to expors your lib var.

So here is a basic example with RequireJs:

index.html

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <div id="stage"></div>
        <script data-main="main" src="require.js"></script>
    </body>
</html>

main.js

require.config({
    paths : {
        createJs : '//code.createjs.com/createjs-2013.12.12.min'
    },
    shim : {
        createJs : {exports: 'createjs'}
    }
});

require(['./myModule'], function(myModule) {
    console.log(myModule);
});

and your module:

define(['createJs'], function(cjs) {

//(function(lib, img, cjs)
//{
var lib = lib || {};
    var p;  //shortcut to reference prototypes

    // stage content
    (lib.Lib = function()
    {
        this.initialize();

        // Layer 1
        this.background = new lib.Background();
        this.background.setTransform(320, 240, 1, 1, 0, 0, 0, 320, 240);

        this.addChild(this.background);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    // symbols
    (lib.background = function()
    {
        this.initialize(img.background);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 320, 480);


    (lib.flashlogo = function()
    {
        this.initialize(img.flashlogo);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 894, 894);


    (lib.Background = function()
    {
        this.initialize();

        // Layer 1
        this.instance = new lib.background();
        this.instance.setTransform(640, 0, 1, 1, 0, 0, 180);

        this.instance_1 = new lib.background();

        this.addChild(this.instance_1, this.instance);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    (lib.BubbleVector = function()
    {
        this.initialize();

        // Layer 1
        this.shape = new cjs.Shape();
        this.shape.graphics.f().s(rgba(215,254,255,0.741)).ss(8.7, 1, 1).p("EArYgrXQR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+Qx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+g");

        this.shape_1 = new cjs.Shape();
        this.shape_1.graphics.rf([
            rgba(149,235,252,0), rgba(149,235,252,0.102), rgba(149,235,252,0.451), rgba(145,173,255,0.576),
            rgba(67,170,233,0.851)
        ], [
            0, 0.357, 0.745, 0.922, 1
        ], -0.2, -0.1, 0, -0.2, -0.1, 389.2).s().p("EgrXArYQx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+QR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+gAOgNzQhWBXAAB7QAAB7BWBWQBYBYB7gBQB6ABBXhYQBXhWAAh7QAAh7hXhXQhXhXh6ABQh7gBhYBXgA2k2IQg3A4AABOQAABPA3A3QA5A4BOABQBPgBA3g4QA4g3AAhPQAAhOg4g4Qg3g4hPAAQhOAAg5A4g");

        this.shape_2 = new cjs.Shape();
        this.shape_2.graphics.rf(["#FFEBFC", rgba(189,238,250,0.137)], [
            0.42, 1
        ], 0, 0, 0, 0, 0, 31.5).s().p("AjRDQQhWhWAAh6QAAh5BWhXQBYhXB5AAQB6AABXBXQBXBXAAB5QAAB6hXBWQhXBYh6AAQh5AAhYhYg");
        this.shape_2.setTransform(113.9, 109.4);

        this.shape_3 = new cjs.Shape();
        this.shape_3.graphics.rf(["#FFEBFC", rgba(189,238,250,0.251)], [
            0.455, 1
        ], 0, 0, 0, 0, 0, 20.2).s().p("AiFCFQg4g3ABhOQgBhNA4g4QA4g4BNAAQBOAAA4A4QA3A4AABNQAABOg3A3Qg4A4hOABQhNgBg4g4g");
        this.shape_3.setTransform(-131, -128.2);

        this.addChild(this.shape_3, this.shape_2, this.shape_1, this.shape);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(-392.6, -392.6, 785.3, 785.3);

    // MovieClip is UNDEFINED HERE!!!
    /*(lib.Bubble = function(mode, startPosition, loop)
    {
        this.initialize(mode, startPosition, loop, {});

        // Layer 1
        this.instance = new lib.BubbleVector();
        this.instance.setTransform(0, 0, 0.4, 0.4);

        this.timeline.addTween(cjs.Tween.get(this.instance).to({scaleY : 0.4, skewX : 3.3}, 11).to({skewX : -3.1}, 24).to({scaleY : 0.4, skewX : 0}, 12).wait(1));

    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(-157, -157, 314.1, 314.1);*/

//})(lib = lib || {}, images = images || {}, createjs = createjs || {});
//var lib, images, createjs;
return lib;
});

As you can see, you just need to wrap your module in define callback and return all that you need.

Also, it seems, that createJs from CDN is not only lib, that is required here, because it doesn't containt MovieClip class, so I commented it out temporally. If you can clearafy, which libs you are using, then I can fix an example.

回答2:

movieclip load after createjs initialize ~

main.js

require.config({
    paths : {
        createJs : '//code.createjs.com/createjs-2013.12.12.min'
    },
    shim : {
            createJs : {exports: 'createjs'},
            movieclip: {
                deps: ['createJs'],
                exports: 'movieclip'
            }
    }
});

require(['./myModule'], function(myModule) {
    console.log(myModule);
});

lib.js

define(['createJs', 'movieclip'], function(cjs, movieclip) {

//(function(lib, img, cjs)
//{
var lib = lib || {};
    var p;  //shortcut to reference prototypes

    // stage content
    (lib.Lib = function()
    {
        this.initialize();

        // Layer 1
        this.background = new lib.Background();
        this.background.setTransform(320, 240, 1, 1, 0, 0, 0, 320, 240);

        this.addChild(this.background);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    // symbols
    (lib.background = function()
    {
        this.initialize(img.background);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 320, 480);


    (lib.flashlogo = function()
    {
        this.initialize(img.flashlogo);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 894, 894);


    (lib.Background = function()
    {
        this.initialize();

        // Layer 1
        this.instance = new lib.background();
        this.instance.setTransform(640, 0, 1, 1, 0, 0, 180);

        this.instance_1 = new lib.background();

        this.addChild(this.instance_1, this.instance);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    (lib.BubbleVector = function()
    {
        this.initialize();

        // Layer 1
        this.shape = new cjs.Shape();
        this.shape.graphics.f().s(rgba(215,254,255,0.741)).ss(8.7, 1, 1).p("EArYgrXQR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+Qx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+g");

        this.shape_1 = new cjs.Shape();
        this.shape_1.graphics.rf([
            rgba(149,235,252,0), rgba(149,235,252,0.102), rgba(149,235,252,0.451), rgba(145,173,255,0.576),
            rgba(67,170,233,0.851)
        ], [
            0, 0.357, 0.745, 0.922, 1
        ], -0.2, -0.1, 0, -0.2, -0.1, 389.2).s().p("EgrXArYQx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+QR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+gAOgNzQhWBXAAB7QAAB7BWBWQBYBYB7gBQB6ABBXhYQBXhWAAh7QAAh7hXhXQhXhXh6ABQh7gBhYBXgA2k2IQg3A4AABOQAABPA3A3QA5A4BOABQBPgBA3g4QA4g3AAhPQAAhOg4g4Qg3g4hPAAQhOAAg5A4g");

        this.shape_2 = new cjs.Shape();
        this.shape_2.graphics.rf(["#FFEBFC", rgba(189,238,250,0.137)], [
            0.42, 1
        ], 0, 0, 0, 0, 0, 31.5).s().p("AjRDQQhWhWAAh6QAAh5BWhXQBYhXB5AAQB6AABXBXQBXBXAAB5QAAB6hXBWQhXBYh6AAQh5AAhYhYg");
        this.shape_2.setTransform(113.9, 109.4);

        this.shape_3 = new cjs.Shape();
        this.shape_3.graphics.rf(["#FFEBFC", rgba(189,238,250,0.251)], [
            0.455, 1
        ], 0, 0, 0, 0, 0, 20.2).s().p("AiFCFQg4g3ABhOQgBhNA4g4QA4g4BNAAQBOAAA4A4QA3A4AABNQAABOg3A3Qg4A4hOABQhNgBg4g4g");
        this.shape_3.setTransform(-131, -128.2);

        this.addChild(this.shape_3, this.shape_2, this.shape_1, this.shape);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(-392.6, -392.6, 785.3, 785.3);

    (lib.Bubble = function(mode, startPosition, loop)
    {
        this.initialize(mode, startPosition, loop, {});

        // Layer 1
        this.instance = new lib.BubbleVector();
        this.instance.setTransform(0, 0, 0.4, 0.4);

        this.timeline.addTween(cjs.Tween.get(this.instance).to({scaleY : 0.4, skewX : 3.3}, 11).to({skewX : -3.1}, 24).to({scaleY : 0.4, skewX : 0}, 12).wait(1));

    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(-157, -157, 314.1, 314.1);

//})(lib = lib || {}, images = images || {}, createjs = createjs || {});
//var lib, images, createjs;
return lib;
});

来源：https://stackoverflow.com/questions/21106453/exporting-createjs-lib-assets-for-use-with-require-js