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 directl
Solution 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><divid="stage"></div><scriptdata-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 1this.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 1this.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 1this.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.
Solution 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 1this.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 1this.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 1this.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 1this.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;
});
Post a Comment for "Exporting Createjs Lib Assets For Use With Require.js"