Combining createJS graphic elements with Jangaroo code

[Mladen Stanojevic]

Hi Frank!

I transpiled the as3 code using Jangaroo and exported graphic elements using Animate CC and createJS. I tried to append the anim_container of createJS to Jangaroo stage in the main function and before the main function exited, I could see these elements on the screen. However, when the main function exited, the anim_container would be removed from the stage and the elements were no longer on the screen. Could you please help me?

Thanks,

Mladen

[Frank]

Hi Mladen,

to allow me to help, could you please provide some code and/or more information on which Jangaroo version and which libraries you use?

Greetings,
-Frank-

[Mladen Stanojevic]

Frank,

I use Jangaroo version 1.0.3 and jangaroo-runtime, jangaroo-browser, jangaroo-new and jooflash librararies. 

Please find below a part of the main function used to present a logo:

"public function main", function main() {

    var this$ = this; $1.MovieClip.call(this);

    main.stageFlash = document.getElementById("stage");

    main.anim_container = document.createElement("div");

    main.anim_container.id = "animation_container";

    main.anim_container.style = "background-color:rgba(0, 0, 0, 0); width:800px; height:525px"

    main.stageFlash.appendChild(main.anim_container);

    main.canvas = document.createElement("canvas");

    main.canvas.id = "canvasJS";

    main.canvas.style = "position: absolute; display: block; background-color:rgba(0, 0, 0, 0);";

    main.dom_overlay_container = document.createElement("div");

    main.dom_overlay_container.id = "dom_overlay_container";

    main.dom_overlay_container.style = "pointer-events:none; overflow:hidden; width:800px; height:525px; position: absolute; left: 0px; top: 0px; display: block;";

    main.anim_container.appendChild(main.canvas);

    main.anim_container.appendChild(main.dom_overlay_container);

    main.canvas.width = window.innerWidth;

    main.canvas.height = window.innerHeight;

    main.anim_container.style.width = main.dom_overlay_container.style.width = window.innerWidth + "px";

    main.anim_container.style.width = main.dom_overlay_container.style.width = window.innerHeight + "px";

    main.exportRoot = new lib.eReader_Canvas();

    main.stageCanvas = new createjs.Stage(main.canvas);

    main.stageCanvas.addChild(main.exportRoot);

    main.centralLogo = new logo_v2();

    main.centralLogo.name = "centralLogo";

    this.addChild(main.centralLogo);

...

also a part of the exported graphic elements:

(function (lib, img, createjs, ss, an) {

(lib.logo_v2 = function(mode,startPosition,loop) {

this.initialize(mode,startPosition,loop,{});

this.shape = new createjs.Shape();

this.shape.graphics.f("#3366CC").s().p("AkQgkQgOgOgNgPQAAgBAAAAQgBAAAAgBQAAAAAAgBQAAAAAAgBQAAAAAAgBQAAAAABgBQAAAAAAAAQAAgBABAAQAAgBABAAQAAAAAAAAQABAAAAAAQABgBAAABQDVAHBQA5QBjg9DHgEQAAgBABABQAAAAABAAQAAAAABAAQAAAAAAABIACADIgBAEQgNAPgPAPQhxBvifABQifgBhxhvg");

this.shape.setTransform(0,31);

this.shape_1 = new createjs.Shape();

this.shape_1.graphics.f("#CC3333").s().p("AAMCaIgCgDQgchFgBhSQABhRAchFIACgDIADAAIADACIACADIAAEpIgCADIgDACIAAAAIgDAAg");

this.shape_1.setTransform(-37,0);

this.shape_2 = new createjs.Shape();

this.shape_2.graphics.f("#FF6600").s().p("AgCBeIgDgBQhGgzi5gLIAAAAIgIgBIgDAAQgBAAAAAAQgBAAAAAAQgBAAAAAAQgBgBAAAAQAAAAgBgBQAAAAAAgBQAAAAAAgBQAAAAgBAAQABgBAAAAQAAgBAAAAQAAgBAAAAQABgBAAAAIAEgEQBxhvCfgBQCfABBxBvIADADQAAAAABABQAAAAAAABQAAAAAAABQAAAAABAAQgBABAAAAQAAABAAAAQAAABAAAAQgBABAAAAQAAAAgBABQAAAAgBAAQAAAAgBAAQAAAAgBAAIgBABIgBAAQizAHhbA5IgCABIAAgBg");

this.shape_2.setTransform(0,-29);

this.shape_3 = new createjs.Shape();

this.shape_3.graphics.f("#009900").s().p("AgSCnIgCgCIgBgDIAAlDIABgDIACgCIAEAAIACACQAiBLABBZQgBBZgiBMIgCACIgDAAIgBAAg");

this.shape_3.setTransform(37,0);

this.timeline.addTween(createjs.Tween.get({}).to({state:[{t:this.shape_3},{t:this.shape_2},{t:this.shape_1},{t:this.shape}]}).wait(1));

}).prototype = getMCSymbolPrototype(lib.logo_v2, new createjs.Rectangle(-39,-39,78,78), null);

(lib.eReader_Canvas = function(mode,startPosition,loop) {

    this.__proto__.initialize(mode, startPosition, loop, {});

}).prototype = p = new createjs.MovieClip();

p.nominalBounds = null;

// library properties:

lib.properties = {

width: 800,

height: 525,

fps: 30,

color: "#000000",

opacity: 0.00,

webfonts: {},

manifest: [],

preloads: []

};

})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{}, AdobeAn = AdobeAn||{});

var lib, images, createjs, ss, AdobeAn;

and a wrapper class used to represent the logo:

joo.classLoader.prepare("package", /*  {

import flash.display.MovieClip;*/

"public class logo_v2 extends flash.display.MovieClip", 7, function ($$private) {

    var $1 = flash.display, $2 = flash.events; return [

"public function logo_v2", function logo_v2() {

    $1.MovieClip.call(this);

    // constructor code

    this.graph = new lib.logo_v2();

    this.graph._rectangle.x = -39;

    this.graph._rectangle.y = -39;

    this.graph._rectangle.width = 78;

    this.graph._rectangle.height = 78;

    this.graph.stop();

    main.exportRoot.addChild(this.graph);

    main.stageCanvas.update();

    //            this.addChild(new $1.Bitmap($1.BitmapData.fromImg(this.graph)));

},

undefined];

}, [], ["flash.display.MovieClip"], "0.8.0", "1.0.2"

);

Greetings,

Mladen

[Frank]

I don't really understand what you are trying to achieve, but it seems to me you are not using jooflash as a black-box, but somehow interfere with its DOM.
It is really a long time ago, but if I remember correctly, jooflash did some kind of double-buffering to simulate Flash rendering. Maybe this leads to parts of the DOM being recreated/hidden? Adding DOM elements to the part controlled by jooflash simply may not work.
You should know that while the Jangaroo compiler is still under active development, jooflash has always rather been a pet project of mine, and I as you might have seen from the lack of recent commits, has been abandoned for quite a while...
Greetings
-Frank-