Суть проблемы такова: есть анимированный дизайнером логотип. Необходимо сделать из него прелоадер. Ни так, ни сяк, мне это не удается. Выкладываю оригинал кода
(function(lib, img, cjs, ss, an) {
var p; // shortcut to reference prototypes
lib.webFontTxtInst = {};
var loadedTypekitCount = 0;
var loadedGoogleCount = 0;
var gFontsUpdateCacheList = [];
var tFontsUpdateCacheList = [];
lib.ssMetadata = [];
lib.updateListCache = function(cacheList) {
for (var i = 0; i < cacheList.length; i++) {
if (cacheList[i].cacheCanvas)
cacheList[i].updateCache();
}
};
lib.addElementsToCache = function(textInst, cacheList) {
var cur = textInst;
while (cur != exportRoot) {
if (cacheList.indexOf(cur) != -1)
break;
cur = cur.parent;
}
if (cur != exportRoot) {
var cur2 = textInst;
var index = cacheList.indexOf(cur);
while (cur2 != cur) {
cacheList.splice(index, 0, cur2);
cur2 = cur2.parent;
index++;
}
} else {
cur = textInst;
while (cur != exportRoot) {
cacheList.push(cur);
cur = cur.parent;
}
}
};
lib.gfontAvailable = function(family, totalGoogleCount) {
lib.properties.webfonts[family] = true;
var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];
for (var f = 0; f < txtInst.length; ++f)
lib.addElementsToCache(txtInst[f], gFontsUpdateCacheList);
loadedGoogleCount++;
if (loadedGoogleCount == totalGoogleCount) {
lib.updateListCache(gFontsUpdateCacheList);
}
};
lib.tfontAvailable = function(family, totalTypekitCount) {
lib.properties.webfonts[family] = true;
var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];
for (var f = 0; f < txtInst.length; ++f)
lib.addElementsToCache(txtInst[f], tFontsUpdateCacheList);
loadedTypekitCount++;
if (loadedTypekitCount == totalTypekitCount) {
lib.updateListCache(tFontsUpdateCacheList);
}
};
// symbols:
// helper functions:
function mc_symbol_clone() {
var clone = this._cloneProps(new this.constructor(this.mode, this.startPosition, this.loop));
clone.gotoAndStop(this.currentFrame);
clone.paused = this.paused;
clone.framerate = this.framerate;
return clone;
}
function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
var prototype = cjs.extend(symbol, cjs.MovieClip);
prototype.clone = mc_symbol_clone;
prototype.nominalBounds = nominalBounds;
prototype.frameBounds = frameBounds;
return prototype;
}
(lib.Symbol2 = function(mode, startPosition, loop) {
this.initialize(mode, startPosition, loop, {});
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#373535").s().p("ACsFDIisnRIitHRIiSAAIDzqFICZAAIDzKFg");
this.shape.setTransform(0, 0, 1.151, 1.151);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
}).prototype = getMCSymbolPrototype(lib.Symbol2, new cjs.Rectangle(-36.7, -37.1, 73.6, 74.3), null);
// stage content:
(lib.Rofas_Levitation = function(mode, startPosition, loop) {
this.initialize(mode, startPosition, loop, {});
// Layer 3
this.instance = new lib.Symbol2();
this.instance.parent = this;
this.instance.setTransform(391.2, 75.7);
this.timeline.addTween(cjs.Tween.get(this.instance).wait(84).to({
y: 45.4
}, 55, cjs.Ease.get(-1)).wait(96).to({
y: 75.7
}, 22, cjs.Ease.get(1)).wait(1));
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#373535").s().p("EAhEAJ9IgkgEIgNgBQgdgDgUgEQhVgRhSgpQgHgDAAgIIABiwQBVBFBiAaQAaAHAaAEQBBAKA+gLQBJgNAuguQAmgmAJg1QAJg5gdgvQgfg0g4gjQhHgvhzhJIgYgPQgygegUgPQgmgbgagbQhGhIgOhaIgFgiIAAgxIABgJIAHgiQADgUAEgOQAghoBeg8QAugdA8gQQAjgJAogEIBegEIA+AHQBfAPBLAqQAHAEAAAIIAACgIgBAIIgIgGQhZhBhpgTQhQgOhCARQgiAJgZAPQgqAYgUApQgmBNApBKQAWAkAlAcIAOAJQBQA1B7BMQA7AlAbATQAuAiAfAjQA5A/AQBOQACAIAGApIAAAtIgJA6QgaBwhaBEQhSA/h8ANIhVAEgAv2J/IgHgCQhngFheglQi8hIhuioQhUiCgPiiIgDgdIAAhEIACgJQADhEAUhHQA5jGCdh8QCQhwC9gTIBlgDIAJACQBUAFBMAYQCCApBjBZQBkBbA1B7QAmBYAKBdIAFAwIAABEIgCAJQgEBSgZBPQg/DGioB3QiJBiivAQIgeAEgAyEnBQiZA8hQCNQhcCjAmC+QAaCBBVBfQBqB1CcAdQBhATBigWQB+gaBdhWQCNiFALjNQAFhbgchVQgviRh1hYQh9hfiegBQhjAAhTAigAYEJsIh+lSQgDgJgKAAQjxABjygBQgKAAgDAJIh6FSIiqAAIgHgCIC8nxILfAAIC8HzgAh7JsIAAzXIKaAAIAACVIn+AAIAAG5IHaAAIAACVInaAAIAAH0gA9XJsIgQhLQgiiHg6hmQgrhLgxgxQgPgOgPgMQhLg8hUAEIhzAAIAAIGIidAAIAAzYIGJAAIAGACQAsAEASADIAGABQBeAQBIA1QBQA8AdBjQAbBagSBgQgRBSg2A7Qg+BEhiAbIgRAFIAKAGQA/AgA5BDQA+BJAuBpQA4CAAbCkgEglOgHWIAAGnIDMAAQAxAAAmgLIAMgDQBEgZAkg4QAegwAAhAQAAhxhRg7QgYgSgdgKQgqgQg0AAg");
this.shape.setTransform(275, 100.7);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(258));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(296, 136.8, 508.2, 127.8);
// library properties:
lib.properties = {
width: 550,
height: 200,
fps: 50,
color: "#FFFFFF",
opacity: 1.00,
webfonts: {},
manifest: [],
preloads: []
};
})(lib = lib || {}, images = images || {}, createjs = createjs || {}, ss = ss || {}, AdobeAn = AdobeAn || {});
var lib, images, createjs, ss, AdobeAn;
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
handleComplete();
}
function handleComplete() {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
exportRoot = new lib.Rofas_Levitation();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
//Registers the "tick" event listener.
fnStartAnimation = function() {
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
//Code to support hidpi screens and responsive scaling.
function makeResponsive(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS = 1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width,
h = lib.properties.height;
var iw = window.innerWidth,
ih = window.innerHeight;
var pRatio = window.devicePixelRatio || 1,
xRatio = iw / w,
yRatio = ih / h,
sRatio = 1;
if (isResp) {
if ((respDim == 'width' && lastW == iw) || (respDim == 'height' && lastH == ih)) {
sRatio = lastS;
} else if (!isScale) {
if (iw < w || ih < h)
sRatio = Math.min(xRatio, yRatio);
} else if (scaleType == 1) {
sRatio = Math.min(xRatio, yRatio);
} else if (scaleType == 2) {
sRatio = Math.max(xRatio, yRatio);
}
}
canvas.width = w * pRatio * sRatio;
canvas.height = h * pRatio * sRatio;
canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w * sRatio + 'px';
canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h * sRatio + 'px';
stage.scaleX = pRatio * sRatio;
stage.scaleY = pRatio * sRatio;
lastW = iw;
lastH = ih;
lastS = sRatio;
}
}
makeResponsive(false, 'both', false, 1);
fnStartAnimation();
}
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="margin-left: auto; margin-right: auto; padding-top: 40vh">
<canvas id="canvas" width="550" height="200" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00)"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; position: absolute; left: 0px; top: 0px; display: block">
</div>
</div>
</body>