Can Adobe Animate CC export be imported in Vue 2?

Question

I've been trying to turn the export into a Vue 2 component but for some reason it does not work. Here is the component I've got so far:

<template>
    <div>
        <div onload="init();" style="margin:0px;">
            <div id="animation_container" style="background-color:rgba(255, 255, 255, 0.00); width:1920px; height:900px">
                <canvas id="canvas" width="1920" height="900" style="position: absolute; display: none; background-color:rgba(255, 255, 255, 0.00);"></canvas>
                <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1920px; height:900px; position: absolute; left: 0px; top: 0px; display: none;">
                </div>
            </div>
            <div id='_preload_div_' style='position:absolute; top:0; left:0; display: inline-block; height:900px; width: 1920px; text-align: center;'>  <span style='display: inline-block; height: 100%; vertical-align: middle;'></span>  <img src=/homepage/images/_preloader.gif?1687959491554 style='vertical-align: middle; max-height: 100%'/></div>
        </div>
    </div>
</template>

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="/homepage/home.min.js"></script>
<script>
// Global Scripts
var that = this;
this.targetTimeline = this;
this.targetTimeline.loop = false;
this.targetTimeline.force = 60;
this.targetTimeline.friction = 0.9;
this.targetTimeline.minFrame = 5; // set the start range value here
this.targetTimeline.maxFrame = 540; // set the end range value here
this.clamp = function(value, min, max)
{
    if (value < min)
        return min;
    else if (value > max)
        return max;
    else
        return value;
};
this.onMouseWheel = function (e)
{
    e.preventDefault();
    var delta;
    if (e == window.event)
        delta = -10 / window.event.wheelDeltaY;
    else
        delta = e.detail / 30;
    that.targetTimeline.speed = delta * that.force;
};
this.tickHandler = function(e)
{
    that.targetTimeline.speed *= that.targetTimeline.friction;
    that.targetTimeline.gotoAndStop( that.clamp(that.targetTimeline.currentFrame + that.targetTimeline.speed,      that.targetTimeline.minFrame, that.targetTimeline.maxFrame));
};
this.start = function()
{
    document.getElementById('canvas').addEventListener('mousewheel', that.onMouseWheel.bind(that));
    document.getElementById('canvas').addEventListener('DOMMouseScroll', that.onMouseWheel.bind(that));
    createjs.Ticker.on("tick", that.tickHandler);
};
if (!this.hasStarted)
{
    this.gotoAndStop(this.targetTimeline.minFrame);
    this.start();
    this.hasStarted = true;
}</script>
<script>
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");
    var comp=AdobeAn.getComposition("332E3C226BB27F449ECBFA07283E2104");
    var lib=comp.getLibrary();
    createjs.MotionGuidePlugin.install();
    var loader = new createjs.LoadQueue(false);
    loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
    loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
    var lib=comp.getLibrary();
    loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt, comp) {
    var images=comp.getImages();    
    if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }    
}
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();
    var queue = evt.target;
    var ssMetadata = lib.ssMetadata;
    for(i=0; i<ssMetadata.length; i++) {
        ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
    }
    var preloaderDiv = document.getElementById("_preload_div_");
    preloaderDiv.style.display = 'none';
    dom_overlay_container.style.display = canvas.style.display = 'block';
    exportRoot = new lib.home();
    stage = new lib.Stage(canvas);
    stage.enableMouseOver();    
    //Registers the "tick" event listener.
    fnStartAnimation = function() {
        stage.addChild(exportRoot);
        createjs.Ticker.framerate = lib.properties.fps;
        createjs.Ticker.addEventListener("tick", stage);
        stage.addEventListener("tick", stage._handleTick);
    }       
    //Code to support hidpi screens and responsive scaling.
    AdobeAn.makeResponsive(true,'width',true,1,[canvas,preloaderDiv,anim_container,dom_overlay_container]); 
    AdobeAn.compositionLoaded(lib.properties.id);
    fnStartAnimation();
}
</script>

<style>
@font-face {
font-family: 'Helen Bg';
src: url("/homepage/fonts/Helen Bg Regular.woff");
}
@font-face {
font-family: 'Helen Bg';
src: url("/homepage/fonts/Helen Bg Bold.woff");
font-weight: bold;
}
@font-face {
font-family: 'Helen Bg Condensed';
src: url("/homepage/fonts/Helen Bg Cond.woff");
}
@font-face {
font-family: 'Helen Bg Condensed';
src: url("/homepage/fonts/Helen Bg BoldCond.woff");
font-weight: bold;
}
@font-face {
font-family: 'Swis721 Cn BT';
src: url("/homepage/fonts/swissc.ttf");
}
@font-face {
font-family: 'Swis721 Cn BT';
src: url("/homepage/fonts/swisscb.ttf");
font-weight: bold;
}
@font-face {
font-family: 'Swis721 BT';
src: url("/homepage/fonts/swissb.ttf");
font-weight: bold;
}
@font-face {
font-family: 'Swis721 BT';
src: url("/homepage/fonts/swiss.ttf");
}

#animation_container, #_preload_div_ {
    position:absolute;
    margin:auto;
    left:0;right:0;
}
</style>

It just loads the preloader image and from then on it hangs.

I could not find any information on this in Google...

Can Adobe Animate CC export be imported in Vue 2?

0 Answers0