Combining createJS graphic elements with Jangaroo code

19 views
Skip to first unread message

Mladen Stanojevic

unread,
May 2, 2018, 4:08:43 AM5/2/18
to Jangaroo Users
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

unread,
May 2, 2018, 4:12:13 AM5/2/18
to Jangaroo Users
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

unread,
May 2, 2018, 4:54:27 AM5/2/18
to Jangaroo Users
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

unread,
May 2, 2018, 10:44:52 AM5/2/18
to Jangaroo Users
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-
Reply all
Reply to author
Forward
0 new messages