导出CreateJS lib资产以与require.js一起使用 [英] Exporting CreateJS lib assets for use with require.js
本文介绍了导出CreateJS lib资产以与require.js一起使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用从Flash IDE导出的资产(矢量，影片剪辑等)用于CreateJS，但是我们正在使用require.js来管理我们的JS代码，因此导出的库JS不直接兼容以加载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
有没有人想出要对导出的JS进行哪些更改以使其适合与require.js一起使用?这是此类导出的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.
推荐答案
好，这是我得到的:
据我从您的代码中了解到-您想对lib变量求和.
As I understood from your code - you want to expors your lib var.
这是RequireJs的基本示例:
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);
});
和您的模块
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;
});
如您所见，您只需要将模块包装在define回调和return所有需要的内容中.
As you can see, you just need to wrap your module in define callback and return all that you need.
似乎，来自 CDN 的createJ不仅lib，这是必需的，因为它不包含MovieClip类，因此我暂时将其注释掉.如果您可以清除使用的库，那么我可以解决一个例子.
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.
这篇关于导出CreateJS lib资产以与require.js一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
