Can an interactive whiteboard be made using HTML5?

Hi again.

Sure it is.

The code from the website won't work inside of Animate without some modifications. It's because there they're targeting objects created directly with code. In ANCC, we need to target objects created with the IDE at authortime.

Here is a small sample of how a drawing/painting app can be created with Animate CC.

Preview:

JavaScript code:

var app = this;
app.config =
{
     color:"#FF0000",
     size: 20,
     shape:"round"
};
app.shape = null;
app.oldX = null,
app.oldY = null,
app.pressed = false;
app.erase = false;
app.start = function()
{
     createjs.Touch.enable(stage);
     stage.enableDOMEvents(true);
     app.reset();
     app.on("mousedown", function(e)
     {
          target = e.target;
          if (target == app.redButton)
          {
               app.config.color = "#FF0000";
               app.erase = false;
               app.colorHighlight.x = target.x
          }
          else if (target == app.greenButton)
          {
               app.config.color = "#00FF00";
               app.erase = false;
               app.colorHighlight.x = target.x
          }
          else if (target == app.blueButton)
          {
               app.config.color = "#0000FF";
               app.erase = false;
               app.colorHighlight.x = target.x
          }
          else if (target == app.eraseButton)
          {
               app.erase = true;
               app.colorHighlight.x = target.x
          }
          else if (target == app.size1Button)
          {
               app.config.size = 1;
               app.sizeHighlight.x = target.x;
          }
          else if (target == app.size3Button)
          {
               app.config.size = 3;
               app.sizeHighlight.x = target.x;
          }
          else if (target == app.size20Button)
          {
               app.config.size = 20;
               app.sizeHighlight.x = target.x;
          }
          else if (target == app.buttButton)
          {
               app.config.shape = "butt";
               app.shapeHighlight.x = target.x;
          }
          else if (target == app.squareButton)
          {
               app.config.shape = "square";
               app.shapeHighlight.x = target.x;
          }
          else if (target == app.roundButton)
          {
               app.config.shape = "round";
               app.shapeHighlight.x = target.x;
          }
          else if (target == app.resetButton)
          {
               app.reset();
          }
     });
     stage.on("stagemousedown", function(e)
     {
          app.oldX = e.stageX / stage.scaleX;
          app.oldY = e.stageY / stage.scaleY;
          app.pressed = true;
     });
     stage.on("stagemouseup", function(e)
     {
          app.pressed = false;
     });
     stage.on("stagemousemove", function(e)
     {
          var responsiveX = e.stageX / stage.scaleX;
          var responsiveY = e.stageY / stage.scaleY;
          if (app.pressed && app.oldX)
               app.shape.graphics.beginStroke(app.config.color).setStrokeStyle(app.config.size, app.config.shape).moveTo(app.oldX, app.oldY).lineTo(responsiveX, responsiveY);
          app.oldX = responsiveX;
          app.oldY = responsiveY;
          app.board.updateCache(app.erase ? "destination-out" : "source-over");
          app.shape.graphics.clear();
     });
};
app.reset = function()
{
     if (app.board.children.length > 0)
          app.board.removeChildAt(0);
     app.board.cache(0, 0, app.nominalBounds.width, app.nominalBounds.height);
     app.shape = new createjs.Shape();
     app.board.addChild(app.shape);
};
app.start();

FLA download:

animate_cc_html5_painting_app.zip - Google Drive

Please don't hesitate to ask if you still have any further questions.

Regards,

JC