So I am wanting to bring a small animation I have done in animate cc and embed it into a angular template on a canvas which can be seen below:
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1014px; height:650px">
<canvas id="canvas" width="1014" height="650" 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; width:1014px; height:650px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
I have in the component.ts reference the javascript that was generated by animate cc but when i try and compile the application i get a few errors
1) Uncaught TypeError: createjs.Rectangle is not a constructor (Even tho i have createjs installed) import * as createjs from 'createjs-module';
console.log("Entered BallAnim script");
var createjs, AdobeAn;
(function (cjs, an) {
var p; // shortcut to reference prototypes
var lib = {};
var ss = {};
var img = {};
lib.ssMetadata = [];
console.log("Entered BallAnim Init");
// 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
console.log("Were we able to return any prototype: " + prototype);
return prototype;
}
(lib.Ball = function (mode, startPosition, loop) {
this.initialize(mode, startPosition, loop, {});
// Layer_1
this.shape = new cjs.Shape();
this.shape.graphics.f("#FF0000").s().p("AvZOnQmXmDgBokQABojGXmDQGZmEJAAAQJBAAGYGEQGZGDAAIjQAAIkmZGDQmYGEpBAAQpAAAmZmEg");
this.shape.setTransform(139.4, 132.3);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
}).prototype = getMCSymbolPrototype(lib.Ball, new createjs.Rectangle(0, 0, 278.7, 264.6), null); //ORG
// stage content:
(lib.Untitled1 = function (mode, startPosition, loop) {
this.initialize(mode, startPosition, loop, {});
// timeline functions:
this.frame_300 = function () {
/*
Stop a Movie Clip/Video
Stops the specified movie clip or video.
*/
_this.stop();
}
// actions tween:
this.timeline.addTween(cjs.Tween.get(this).wait(300).call(this.frame_300).wait(1));
// Layer_1
this.instance = new lib.Ball();
this.instance.parent = this;
this.instance.setTransform(-97.3, 114.2, 0.718, 0.756, 0, 0, 0, 139.3, 132.3);
this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({ x: -89.3, y: 129.2 }, 0).wait(1).to({ x: -81.4, y: 144.2 }, 0).wait(1).to({ x: -73.4, y: 159.2 }, 0).wait(1).to({ x: -65.5, y: 174.2 }, 0).wait(1).to({ x: -57.5, y: 189.2 }, 0).wait(1).to({ x: -49.6, y: 204.2 }, 0).wait(1).to({ x: -41.6, y: 219.2 }, 0).wait(1).to({ x: -33.7, y: 234.3 }, 0).wait(1).to({ x: -25.7, y: 249.3 }, 0).wait(1).to({ x: -17.8, y: 264.3 }, 0).wait(1).to({ x: -9.9, y: 279.3 }, 0).wait(1).to({ x: -1.9, y: 294.3 }, 0).wait(1).to({ x: 6, y: 309.3 }, 0).wait(1).to({ x: 14, y: 324.3 }, 0).wait(1).to({ x: 21.9, y: 339.4 }, 0).wait(1).to({ x: 29.9, y: 354.4 }, 0).wait(1).to({ x: 37.8, y: 369.4 }, 0).wait(1).to({ x: 45.8, y: 384.4 }, 0).wait(1).to({ x: 53.7, y: 399.4 }, 0).wait(1).to({ x: 61.6, y: 414.4 }, 0).wait(1).to({ x: 69.6, y: 429.4 }, 0).wait(1).to({ x: 77.5, y: 444.5 }, 0).wait(1).to({ x: 85.5, y: 459.5 }, 0).wait(1).to({ x: 93.4, y: 474.5 }, 0).wait(1).to({ x: 101.3, y: 489.5 }, 0).wait(1).to({ x: 109.3, y: 504.5 }, 0).wait(1).to({ x: 117.2, y: 519.5 }, 0).wait(1).to({ x: 125.2, y: 534.5 }, 0).wait(1).to({ x: 133.1, y: 549.5 }, 0).wait(1).to({ x: 141.6, y: 538.5 }, 0).wait(1).to({ x: 150, y: 527.5 }, 0).wait(1).to({ x: 158.5, y: 516.5 }, 0).wait(1).to({ x: 166.9, y: 505.5 }, 0).wait(1).to({ x: 175.4, y: 494.5 }, 0).wait(1).to({ x: 183.8, y: 483.5 }, 0).wait(1).to({ x: 192.3, y: 472.5 }, 0).wait(1).to({ x: 200.7, y: 461.5 }, 0).wait(1).to({ x: 209.2, y: 450.5 }, 0).wait(1).to({ x: 217.6, y: 439.4 }, 0).wait(1).to({ x: 226.1, y: 428.4 }, 0).wait(1).to({ x: 234.5, y: 417.4 }, 0).wait(1).to({ x: 243, y: 406.4 }, 0).wait(1).to({ x: 251.4, y: 395.4 }, 0).wait(1).to({ x: 259.9, y: 384.4 }, 0).wait(1).to({ x: 268.3, y: 373.4 }, 0).wait(1).to({ x: 276.8, y: 362.4 }, 0).wait(1).to({ x: 285.2, y: 351.4 }, 0).wait(1).to({ x: 293.7, y: 340.4 }, 0).wait(1).to({ x: 302.1, y: 329.3 }, 0).wait(1).to({ x: 310.6, y: 318.3 }, 0).wait(1).to({ x: 319, y: 307.3 }, 0).wait(1).to({ x: 327.5, y: 296.3 }, 0).wait(1).to({ x: 335.9, y: 285.3 }, 0).wait(1).to({ x: 344.4, y: 274.3 }, 0).wait(1).to({ x: 352.8, y: 263.3 }, 0).wait(1).to({ x: 361.3, y: 252.3 }, 0).wait(1).to({ x: 369.7, y: 241.3 }, 0).wait(1).to({ x: 378.2, y: 230.3 }, 0).wait(1).to({ x: 386.6, y: 219.2 }, 0).wait(1).to({ x: 389.7, y: 230.4 }, 0).wait(1).to({ x: 392.8, y: 241.5 }, 0).wait(1).to({ x: 395.9, y: 252.6 }, 0).wait(1).to({ x: 399, y: 263.7 }, 0).wait(1).to({ x: 402, y: 274.8 }, 0).wait(1).to({ x: 405.1, y: 285.9 }, 0).wait(1).to({ x: 408.2, y: 297.1 }, 0).wait(1).to({ x: 411.3, y: 308.2 }, 0).wait(1).to({ x: 414.3, y: 319.3 }, 0).wait(1).to({ x: 417.4, y: 330.4 }, 0).wait(1).to({ x: 420.5, y: 341.5 }, 0).wait(1).to({ x: 423.6, y: 352.6 }, 0).wait(1).to({ x: 426.6, y: 363.7 }, 0).wait(1).to({ x: 429.7, y: 374.9 }, 0).wait(1).to({ x: 432.8, y: 386 }, 0).wait(1).to({ x: 435.9, y: 397.1 }, 0).wait(1).to({ x: 439, y: 408.2 }, 0).wait(1).to({ x: 442, y: 419.3 }, 0).wait(1).to({ x: 445.1, y: 430.4 }, 0).wait(1).to({ x: 448.2, y: 441.5 }, 0).wait(1).to({ x: 451.3, y: 452.7 }, 0).wait(1).to({ x: 454.3, y: 463.8 }, 0).wait(1).to({ x: 457.4, y: 474.9 }, 0).wait(1).to({ x: 460.5, y: 486 }, 0).wait(1).to({ x: 463.6, y: 497.1 }, 0).wait(1).to({ x: 466.6, y: 508.2 }, 0).wait(1).to({ x: 469.7, y: 519.4 }, 0).wait(1).to({ x: 472.8, y: 530.5 }, 0).wait(1).to({ x: 475.9, y: 541.6 }, 0).wait(1).to({ x: 478.9, y: 552.7 }, 0).wait(1).to({ x: 483.4, y: 545.4 }, 0).wait(1).to({ x: 487.8, y: 538.1 }, 0).wait(1).to({ x: 492.3, y: 530.8 }, 0).wait(1).to({ x: 496.7, y: 523.5 }, 0).wait(1).to({ x: 501.1, y: 516.2 }, 0).wait(1).to({ x: 505.6, y: 508.9 }, 0).wait(1).to({ x: 510, y: 501.6 }, 0).wait(1).to({ x: 514.4, y: 494.2 }, 0).wait(1).to({ x: 518.9, y: 486.9 }, 0).wait(1).to({ x: 523.3, y: 479.6 }, 0).wait(1).to({ x: 527.8, y: 472.3 }, 0).wait(1).to({ x: 532.2, y: 465 }, 0).wait(1).to({ x: 536.6, y: 457.7 }, 0).wait(1).to({ x: 541.1, y: 450.4 }, 0).wait(1).to({ x: 545.5, y: 443.1 }, 0).wait(1).to({ x: 549.9, y: 435.8 }, 0).wait(1).to({ x: 554.4, y: 428.5 }, 0).wait(1).to({ x: 558.8, y: 421.2 }, 0).wait(1).to({ x: 563.2, y: 413.9 }, 0).wait(1).to({ x: 567.7, y: 406.6 }, 0).wait(1).to({ x: 572.1, y: 399.3 }, 0).wait(1).to({ x: 576.6, y: 392 }, 0).wait(1).to({ x: 581, y: 384.6 }, 0).wait(1).to({ x: 585.4, y: 377.3 }, 0).wait(1).to({ x: 589.9, y: 370 }, 0).wait(1).to({ x: 594.3, y: 362.7 }, 0).wait(1).to({ x: 598.7, y: 355.4 }, 0).wait(1).to({ x: 603.2, y: 348.1 }, 0).wait(1).to({ x: 607.6, y: 340.8 }, 0).wait(1).to({ x: 612, y: 333.5 }, 0).wait(1).to({ x: 614.4, y: 340.8 }, 0).wait(1).to({ x: 616.7, y: 348 }, 0).wait(1).to({ x: 619.1, y: 355.3 }, 0).wait(1).to({ x: 621.4, y: 362.5 }, 0).wait(1).to({ x: 623.8, y: 369.8 }, 0).wait(1).to({ x: 626.1, y: 377 }, 0).wait(1).to({ x: 628.5, y: 384.3 }, 0).wait(1).to({ x: 630.8, y: 391.5 }, 0).wait(1).to({ x: 633.2, y: 398.8 }, 0).wait(1).to({ x: 635.5, y: 406 }, 0).wait(1).to({ x: 637.9, y: 413.3 }, 0).wait(1).to({ x: 640.2, y: 420.6 }, 0).wait(1).to({ x: 642.6, y: 427.8 }, 0).wait(1).to({ x: 644.9, y: 435.1 }, 0).wait(1).to({ x: 647.3, y: 442.3 }, 0).wait(1).to({ x: 649.6, y: 449.6 }, 0).wait(1).to({ x: 652, y: 456.8 }, 0).wait(1).to({ x: 654.3, y: 464.1 }, 0).wait(1).to({ x: 656.7, y: 471.3 }, 0).wait(1).to({ x: 659, y: 478.6 }, 0).wait(1).to({ x: 661.4, y: 485.9 }, 0).wait(1).to({ x: 663.7, y: 493.1 }, 0).wait(1).to({ x: 666.1, y: 500.4 }, 0).wait(1).to({ x: 668.4, y: 507.6 }, 0).wait(1).to({ x: 670.8, y: 514.9 }, 0).wait(1).to({ x: 673.1, y: 522.1 }, 0).wait(1).to({ x: 675.5, y: 529.4 }, 0).wait(1).to({ x: 677.8, y: 536.6 }, 0).wait(1).to({ x: 680.2, y: 543.9 }, 0).wait(1).to({ x: 682.5, y: 551.1 }, 0).wait(1).to({ x: 686.3, y: 546.6 }, 0).wait(1).to({ x: 690.1, y: 542 }, 0).wait(1).to({ x: 693.8, y: 537.4 }, 0).wait(1).to({ x: 697.6, y: 532.8 }, 0).wait(1).to({ x: 701.4, y: 528.2 }, 0).wait(1).to({ x: 705.2, y: 523.6 }, 0).wait(1).to({ x: 709, y: 519 }, 0).wait(1).to({ x: 712.7, y: 514.4 }, 0).wait(1).to({ x: 716.5, y: 509.8 }, 0).wait(1).to({ x: 720.3, y: 505.3 }, 0).wait(1).to({ x: 724.1, y: 500.7 }, 0).wait(1).to({ x: 727.9, y: 496.1 }, 0).wait(1).to({ x: 731.6, y: 491.5 }, 0).wait(1).to({ x: 735.4, y: 486.9 }, 0).wait(1).to({ x: 739.2, y: 482.3 }, 0).wait(1).to({ x: 743, y: 477.7 }, 0).wait(1).to({ x: 746.7, y: 473.1 }, 0).wait(1).to({ x: 750.5, y: 468.5 }, 0).wait(1).to({ x: 754.3, y: 463.9 }, 0).wait(1).to({ x: 758.1, y: 459.4 }, 0).wait(1).to({ x: 761.9, y: 454.8 }, 0).wait(1).to({ x: 765.6, y: 450.2 }, 0).wait(1).to({ x: 769.4, y: 445.6 }, 0).wait(1).to({ x: 773.2, y: 441 }, 0).wait(1).to({ x: 777, y: 436.4 }, 0).wait(1).to({ x: 780.8, y: 431.8 }, 0).wait(1).to({ x: 784.5, y: 427.2 }, 0).wait(1).to({ x: 788.3, y: 422.6 }, 0).wait(1).to({ x: 792.1, y: 418 }, 0).wait(1).to({ x: 795.5, y: 422.5 }, 0).wait(1).to({ x: 799, y: 426.9 }, 0).wait(1).to({ x: 802.4, y: 431.4 }, 0).wait(1).to({ x: 805.9, y: 435.8 }, 0).wait(1).to({ x: 809.3, y: 440.2 }, 0).wait(1).to({ x: 812.8, y: 444.7 }, 0).wait(1).to({ x: 816.2, y: 449.1 }, 0).wait(1).to({ x: 819.7, y: 453.5 }, 0).wait(1).to({ x: 823.1, y: 458 }, 0).wait(1).to({ x: 826.5, y: 462.4 }, 0).wait(1).to({ x: 830, y: 466.9 }, 0).wait(1).to({ x: 833.4, y: 471.3 }, 0).wait(1).to({ x: 836.9, y: 475.7 }, 0).wait(1).to({ x: 840.3, y: 480.2 }, 0).wait(1).to({ x: 843.8, y: 484.6 }, 0).wait(1).to({ x: 847.2, y: 489 }, 0).wait(1).to({ x: 850.7, y: 493.5 }, 0).wait(1).to({ x: 854.1, y: 497.9 }, 0).wait(1).to({ x: 857.6, y: 502.3 }, 0).wait(1).to({ x: 861, y: 506.8 }, 0).wait(1).to({ x: 864.4, y: 511.2 }, 0).wait(1).to({ x: 867.9, y: 515.7 }, 0).wait(1).to({ x: 871.3, y: 520.1 }, 0).wait(1).to({ x: 874.8, y: 524.5 }, 0).wait(1).to({ x: 878.2, y: 529 }, 0).wait(1).to({ x: 881.7, y: 533.4 }, 0).wait(1).to({ x: 885.1, y: 537.8 }, 0).wait(1).to({ x: 888.6, y: 542.3 }, 0).wait(1).to({ x: 892, y: 546.7 }, 0).wait(1).to({ x: 895.4, y: 551.1 }, 0).wait(1).to({ x: 897.1, y: 550.3 }, 0).wait(1).to({ x: 898.7, y: 549.4 }, 0).wait(1).to({ x: 900.3, y: 548.5 }, 0).wait(1).to({ x: 901.9, y: 547.6 }, 0).wait(1).to({ x: 903.5, y: 546.7 }, 0).wait(1).to({ x: 905.1, y: 545.8 }, 0).wait(1).to({ x: 906.8, y: 544.9 }, 0).wait(1).to({ x: 908.4, y: 544.1 }, 0).wait(1).to({ x: 910, y: 543.2 }, 0).wait(1).to({ x: 911.6, y: 542.3 }, 0).wait(1).to({ x: 913.2, y: 541.4 }, 0).wait(1).to({ x: 914.8, y: 540.5 }, 0).wait(1).to({ x: 916.5, y: 539.6 }, 0).wait(1).to({ x: 918.1, y: 538.7 }, 0).wait(1).to({ x: 919.7, y: 537.8 }, 0).wait(1).to({ x: 921.3, y: 537 }, 0).wait(1).to({ x: 922.9, y: 536.1 }, 0).wait(1).to({ x: 924.5, y: 535.2 }, 0).wait(1).to({ x: 926.2, y: 534.3 }, 0).wait(1).to({ x: 927.8, y: 533.4 }, 0).wait(1).to({ x: 929.4, y: 532.5 }, 0).wait(1).to({ x: 931, y: 531.6 }, 0).wait(1).to({ x: 932.6, y: 530.8 }, 0).wait(1).to({ x: 934.2, y: 529.9 }, 0).wait(1).to({ x: 935.9, y: 529 }, 0).wait(1).to({ x: 937.5, y: 528.1 }, 0).wait(1).to({ x: 939.1, y: 527.2 }, 0).wait(1).to({ x: 940.7, y: 526.3 }, 0).wait(1).to({ x: 942.3, y: 525.4 }, 0).wait(1).to({ x: 943.9, y: 524.5 }, 0).wait(1).to({ x: 945.6, y: 525.6 }, 0).wait(1).to({ x: 947.3, y: 526.7 }, 0).wait(1).to({ x: 949, y: 527.8 }, 0).wait(1).to({ x: 950.6, y: 528.9 }, 0).wait(1).to({ x: 952.3, y: 530 }, 0).wait(1).to({ x: 954, y: 531.1 }, 0).wait(1).to({ x: 955.6, y: 532.2 }, 0).wait(1).to({ x: 957.3, y: 533.3 }, 0).wait(1).to({ x: 959, y: 534.4 }, 0).wait(1).to({ x: 960.6, y: 535.5 }, 0).wait(1).to({ x: 962.3, y: 536.6 }, 0).wait(1).to({ x: 964, y: 537.7 }, 0).wait(1).to({ x: 965.7, y: 538.8 }, 0).wait(1).to({ x: 967.3, y: 539.9 }, 0).wait(1).to({ x: 969, y: 541 }, 0).wait(1).to({ x: 970.7, y: 542.1 }, 0).wait(1).to({ x: 972.3, y: 543.2 }, 0).wait(1).to({ x: 974, y: 544.3 }, 0).wait(1).to({ x: 975.7, y: 545.4 }, 0).wait(1).to({ x: 977.3, y: 546.4 }, 0).wait(1).to({ x: 979, y: 547.5 }, 0).wait(1).to({ x: 980.7, y: 548.6 }, 0).wait(1).to({ x: 982.4, y: 549.7 }, 0).wait(1).to({ x: 984, y: 550.8 }, 0).wait(1).to({ x: 985.7, y: 551.9 }, 0).wait(1).to({ x: 987.4, y: 553 }, 0).wait(1).to({ x: 989, y: 554.1 }, 0).wait(1).to({ x: 990.7, y: 555.2 }, 0).wait(1).to({ x: 992.4, y: 556.3 }, 0).wait(1).to({ x: 994, y: 557.4 }, 0).wait(1).to({ x: 998.6, y: 557.6 }, 0).wait(1).to({ x: 1003.1, y: 557.8 }, 0).wait(1).to({ x: 1007.6, y: 558 }, 0).wait(1).to({ x: 1012.1, y: 558.2 }, 0).wait(1).to({ x: 1016.6, y: 558.4 }, 0).wait(1).to({ x: 1021.1, y: 558.6 }, 0).wait(1).to({ x: 1025.6, y: 558.8 }, 0).wait(1).to({ x: 1030.1, y: 559 }, 0).wait(1).to({ x: 1034.6, y: 559.2 }, 0).wait(1).to({ x: 1039.1, y: 559.4 }, 0).wait(1).to({ x: 1043.6, y: 559.5 }, 0).wait(1).to({ x: 1048.1, y: 559.7 }, 0).wait(1).to({ x: 1052.6, y: 559.9 }, 0).wait(1).to({ x: 1057.1, y: 560.1 }, 0).wait(1).to({ x: 1061.6, y: 560.3 }, 0).wait(1).to({ x: 1066.1, y: 560.5 }, 0).wait(1).to({ x: 1070.6, y: 560.7 }, 0).wait(1).to({ x: 1075.1, y: 560.9 }, 0).wait(1).to({ x: 1079.6, y: 561.1 }, 0).wait(1).to({ x: 1084.1, y: 561.3 }, 0).wait(1).to({ x: 1088.6, y: 561.5 }, 0).wait(1).to({ x: 1093.1, y: 561.7 }, 0).wait(1).to({ x: 1097.6, y: 561.9 }, 0).wait(1).to({ x: 1102.1, y: 562.1 }, 0).wait(1).to({ x: 1106.6, y: 562.3 }, 0).wait(1).to({ x: 1111.1, y: 562.5 }, 0).wait(1).to({ x: 1115.6, y: 562.7 }, 0).wait(1).to({ x: 1120.1, y: 562.9 }, 0).wait(1).to({ x: 1124.6, y: 563.1 }, 0).wait(1).to({ x: 1129.1, y: 563.3 }, 0).wait(1).to({ x: 1133.6, y: 563.5 }, 0).wait(1).to({ x: 1138.1, y: 563.6 }, 0).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(309.8,339.2,200,200);
// library properties:
lib.properties = {
id: 'E02FBD3CAEA74D4DA3569F226C585888',
width: 1014,
height: 650,
fps: 30,
color: "#FFFFFF",
opacity: 1.00,
manifest: [],
preloads: []
};
// bootstrap callback support:
(lib.Stage = function (canvas) {
createjs.Stage.call(this, canvas);
}).prototype = p = new createjs.Stage();
p.setAutoPlay = function(autoPlay) {
this.tickEnabled = autoPlay;
}
p.play = function() { this.tickEnabled = true; this.getChildAt(0).gotoAndPlay(this.getTimelinePosition()) }
p.stop = function(ms) { if(ms) this.seek(ms); this.tickEnabled = false; }
p.seek = function(ms) { this.tickEnabled = true; this.getChildAt(0).gotoAndStop(lib.properties.fps * ms / 1000); }
p.getDuration = function() { return this.getChildAt(0).totalFrames / lib.properties.fps * 1000; }
p.getTimelinePosition = function() { return this.getChildAt(0).currentFrame / lib.properties.fps * 1000; }
an.bootcompsLoaded = an.bootcompsLoaded || [];
if(!an.bootstrapListeners) {
an.bootstrapListeners=[];
}
an.bootstrapCallback=function(fnCallback) {
an.bootstrapListeners.push(fnCallback);
if(an.bootcompsLoaded.length > 0) {
for(var i=0; i<an.bootcompsLoaded.length; ++i) {
fnCallback(an.bootcompsLoaded[i]);
}
}
};
an.compositions = an.compositions || {};
an.compositions['E02FBD3CAEA74D4DA3569F226C585888'] = {
getStage: function() { return exportRoot.getStage(); },
getLibrary: function() { return lib; },
getSpriteSheet: function() { return ss; },
getImages: function() { return img; }
};
an.compositionLoaded = function(id) {
an.bootcompsLoaded.push(id);
for(var j=0; j<an.bootstrapListeners.length; j++) {
an.bootstrapListeners[j](id);
}
}
an.getComposition = function(id) {
return an.compositions[id];
}
})(createjs = createjs||{}, AdobeAn = AdobeAn||{});2) Uncaught ReferenceError: AdobeAn is not defined
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
console.log("Entered BallAnimSecondScript");
init();
function init() {
console.log("Entered Init in BallAnim...");
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp = AdobeAn.getComposition("E02FBD3CAEA74D4DA3569F226C585888");
var lib = comp.getLibrary();
handleComplete({}, comp);
}
function handleComplete(evt, comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib = comp.getLibrary();
var ss = comp.getSpriteSheet();
exportRoot = new lib.Untitled1();
stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function () {
stage.addChild(exportRoot);
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;
stage.tickOnUpdate = false;
stage.update();
stage.tickOnUpdate = true;
}
}
makeResponsive(false, 'both', false, 1);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}I have already spent two days looking for a possible solution and any advice and or solutions would be greatly appreciated.
If after reading this you think you need more information and or details please let me know and I will do my best to help you help me.
Potentially the easiest way to rig this in angular is to not use the modules. Reason being that the version of the module might be misaligned with the version in which the animate cc files / code was generated. Instead what you can do is just take the exported libraries and add them to your component as a link.
<script src="path/to/createjs"></script>
<script src="path/to/anyOtherRequiredLibrary"></script>
Then in your component, scrap the import * as createjs from 'createjs-module' and instead do:
declare var creates: any;
declare var AdobeAn: any;
This should allow this line to function })(createjs = createjs||{}, AdobeAn = AdobeAn||{}); which is probably why you were getting : createjs.Rectangle as if the createjs var does not exist it was replacing it with an empty object.