Using Meteor with Adobe Flash CreateJS Toolkit

Question

I am trying to figure out how to use the Adobe CreateJS toolkit javascript objects inside meteor.

The generated html and js looks like this for a simple rectangle and circle:

create-demo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>create-demo</title>

<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="create-demo.js"></script>

<script>
var canvas, stage, exportRoot;

function init() {
    canvas = document.getElementById("canvas");
    exportRoot = new lib.createdemo();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();

    createjs.Ticker.setFPS(lib.properties.fps);
    //createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>

<body onload="init();" style="background-color:#D4D4D4">
    <canvas id="canvas" width="550" height="400" style="background-color:#FFFFFF"></canvas>
</body>
</html>

create-demo.js

(function (lib, img, cjs) {

var p; // shortcut to reference prototypes

// library properties:
lib.properties = {
    width: 550,
    height: 400,
    fps: 24,
    color: "#FFFFFF",
    manifest: []
};

// stage content:
(lib.createdemo = function() {
    this.initialize();

    // Layer 1
    this.blueCircle = new lib.circle();
    this.blueCircle.setTransform(118,288,1,1,0,0,0,65,65);

    this.purpleSquare = new lib.rectangle();
    this.purpleSquare.setTransform(346,149.5,1,1,0,0,0,116,86.5);

    this.shape = new cjs.Shape();
    this.shape.graphics.f().s("#FFFFFF").ss(1,1,1).p("AkS2pMAkOAAAIAAbBMgkOAAAgArnMgQAAEMi/C/Qi+C/kNAAQkNAAi/i/Qi+i/AAkMQAAkNC+i/QC/i+ENAAQENAAC+C+QC/C/AAENg");
    this.shape.setTransform(257.5,208);

    this.addChild(this.shape,this.purpleSquare,this.blueCircle);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(327,262,411,292);


// symbols:
(lib.rectangle = function() {
    this.initialize();

    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("rgba(240,240,252,0.996)").s().p("AyHNgIAA7AMAkPAAAIAAbAg");
    this.shape.setTransform(116,86.5);

    this.addChild(this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(0,0,232,173);


(lib.circle = function() {
    this.initialize();

    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("rgba(0,153,204,0.996)").s().p("AnKHLQi+i+gBkNQABkMC+i+QC+i+EMgBQENABC+C+QC+C+AAEMQAAENi+C+Qi+C+kNAAQkMAAi+i+g");
    this.shape.setTransform(65,65);

    this.addChild(this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(0,0,130,130);

})(lib = lib||{}, images = images||{}, createjs = createjs||{});
var lib, images, createjs;

I installed this https://atmospherejs.com/package/createjs createjs package for meteor which means I probably do not need to import https://atmospherejs.com/package/createjs.

My question is what is the best way to add this code to my meteor project?

The basic meteor project looks like this.

testapp.html

<head>
  <title>testapp</title>
</head>

<body>
  {{> hello}}
</body>

<template name="hello">
  <h1>Hello World!</h1>
  {{greeting}}
  <input type="button" value="Click" />
</template>

testapp.js

if (Meteor.isClient) {
  Template.hello.greeting = function () {
    return "Welcome to testapp.";
  };

  Template.hello.events({
    'click input': function () {
      // template data, if any, is available in 'this'
      if (typeof console !== 'undefined')
        console.log("You pressed the button");
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

Geoffrey Booth · Answer 1 · 2014-04-28T17:17:28.933

1

Note that you won't get any of Meteor's spiffy features (reactive templates, etc.) inside the canvas managed by CreateJS. That said, do this:

In your project, create subfolders client, lib, server and client/lib/createjs.
Move create-demo.js into client.
Download http://code.createjs.com/easeljs-0.7.0.min.js and save it in client/lib/createjs.

Create client/index.html like so (note no script elements):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>create-demo</title>
</head>
<body style="background-color:#D4D4D4">
  <canvas id="canvas" width="550" height="400" 
  style="background-color:#FFFFFF"></canvas>
</body>
</html>

Create client/main.js like so:

var canvas, stage, exportRoot;

function init() {
  canvas = document.getElementById("canvas");
  exportRoot = new lib.createdemo();

  stage = new createjs.Stage(canvas);
  stage.addChild(exportRoot);
  stage.update();

  createjs.Ticker.setFPS(lib.properties.fps);
  //createjs.Ticker.addEventListener("tick", stage);
}

Meteor.startup(function () {
  init();
});

Season to taste.

edited Apr 28 '14 at 17:17

answered Apr 22 '14 at 21:14

Geoffrey Booth

7,168
5
35
42

This didn't work for me. I had compilation errors. – Bryan Apr 28 '14 at 01:49
If you care to elaborate, perhaps we can help. I had an idea and revised steps 3 and 4, try it this way. – Geoffrey Booth Apr 28 '14 at 03:13
Also try removing the createjs package you installed via Meteorite, it might be conflicting. – Geoffrey Booth Apr 28 '14 at 03:20
Did you find a solution? Please post your solution or issue so that this may help others. I wouldn’t want someone to come across this post someday and think that CreateJS and Meteor aren’t compatible with each other if they in fact are. – Geoffrey Booth Apr 30 '14 at 19:32

Using Meteor with Adobe Flash CreateJS Toolkit

1 Answers1