I created an simple animation with Flash and used the CREATEJS PLuggin to convert my SWF to a HTML5 + JS solution. THis works fine in all browsers EXCEPT IE* and older of course.
My solution is to create a Flash FallBack to play the SWF file if the Browser is IE.
Unfortunately I am able to write this and was hopig someone can help me to achieve this.
Please see the HTML file below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from cwtXmasCard2013</title>
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>
<script src="cwtXmasCard2013.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/Image.png", id:"Image"},
{src:"images/Image_1.png", id:"Image_1"},
{src:"images/Image_0.png", id:"Image_0"},
{src:"images/CWT_HolidayCard.jpg", id:"CWT_HolidayCard"}
];
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.cwtXmasCard2013();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="711" height="661" style="background- color:#ffffff"></canvas>
</body>
</html>
Related
This is my easel js function, it draws a red circle and an image, however the circle is showing but the image isn't.
function Start() {
var stage = new createjs.Stage("DogeCanvas");
var dog = new createjs.Bitmap("doge.jpg");
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
dog.x=100;
dog.y=100;
stage.addChild(circle, dog);
stage.update();
}
And this is the html file
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="Doge.js"></script>
</head>
<body bgcolor="#C7C7C7" onload="Start();">
<canvas id="DogeCanvas" width="480" height="320"></canvas>
</body>
</html>
Why? help please, seems like in everyones else code this works but why this isn't working for me?
The image is likely not loaded yet.
You can add a Ticker to the stage to constantly update it (which most applications do, since there is other things changing over time)
Example:
createjs.Ticker.on("tick", stage);
// OR
createjs.Ticker.addEventListener("tick", stage);
// OR
createjs.Ticker.on("tick", tick);
function tick(event) {
// Other stuff
stage.update(event);
}
Listen for the onload of the image, and update the stage again
Example:
var bmp = new createjs.Bitmap("path/to/image.jpg");
bmp.image.onload = function() {
stage.update();
}
Preload the image with something like PreloadJS before you draw it to the stage. This is a better solution for a larger app with more assets.
Example:
var queue = new createjs.LoadQueue();
queue.on("complete", function(event) {
var image = queue.getResult("image");
var bmp = new createjs.Bitmap(image);
// Do stuff with bitmap
});
queue.loadFile({src:"path/to/img.jpg", id:"image"});
I am trying to use an image as the background of my canvas. However, I have a hard time to make the image load -- it always shows as blank:
<html>
<script>
var background = new Image();
background.src = "img/map.png";
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
window.onload = function() {
ctx.drawImage(background, 0, 0);
}
</script>
<body>
<canvas id="myCanvas" width="400" height="400"> </canvas>
</body>
</html>
However, if I put the following two lines into the window.onload function, then the image loads without any issue. what causes this issue? As I will use canvas and ctx in other functions, I really want to define them globally rather than individually define them in each function.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
you can still use them globally. As canvas is not available immediately you are not able to draw picture before on load.
<script>
var background = new Image();
background.src = "img/map.png";
var canvas;
var ctx ;
window.onload = function() {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
ctx.drawImage(background, 0, 0);
} </script>
1) The first option is to declare the canvas and context and assign them values after the document has loaded
<!DOCTYPE html>
<html lang="en">
<head>
<title>Onload</title>
<script>
const background = new Image();
background.src = "img/map.png";
let canvas;
let ctx;
window.onload = function() {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
ctx.drawImage(background, 0, 0);
}
</script>
</head>
<body>
<h1>Method One</h1>
<p>Defined variables globally and assign then after the load event is fired</p>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>
2) The second method would be to put the script block after the canvas element so that it is already loaded in the DOM when your javascript tries to access it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Onload</title>
</head>
<body>
<h1>Method Two</h1>
<p>Put the script after the DOM element you wish to access</p>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
const background = new Image();
background.src = "img/map.png";
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
window.onload = function() {
ctx.drawImage(background, 0, 0);
}
</script>
</body>
</html>
I've used the new const and let keywords just to highlight the difference between these two approaches, although using var instead will work fine too. (see let and const)
If you want to avoid global variables then you might structure your code like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Onload</title>
<script>
const background = new Image();
background.src = "img/map.png";
draw = context => {
context.drawImage(background, 0, 0);
}
window.addEventListener('load', () => {
const canvas = document.querySelector("#myCanvas");
const ctx = canvas.getContext("2d");
draw(ctx);
});
</script>
</head>
<body>
<h1>Refactor</h1>
<p>Add an event listener and pass in context to draw function</p>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>
It doesn't matter that I'm using arrow functions, or querySelector, I just prefer these newer methods. The point is to pass in the canvas context to any function that needs it draw(ctx).
The two lines of code creating the Image() and then setting the background had to be done before the document had finished loading, this is a bit of a fudge. What we really need to do is make sure that the image we are trying to set as the background has loaded before calling drawImage() Using images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Onload</title>
<script>
draw = context => {
const background = new Image();
background.src = "img/map.png";
background.addEventListener('load', () => {
context.drawImage(background, 0, 0);
});
}
window.addEventListener('load', () => {
const canvas = document.querySelector("#myCanvas");
const ctx = canvas.getContext("2d");
draw(ctx);
});
</script>
</head>
<body>
<h1>Final</h1>
<p>Add an event listener to the image</p>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>
My code is very simple, lifted straight from the tutorial. Here is index.html:
<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="js/paper-full.js"></script>
<!-- Load external PaperScript and associate it with myCanvas -->
<script type="text/paperscript" canvas="myCanvas" src="js/myScript.js"></script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
and here is js/myscript.js:
var myPath = new Path();
myPath.strokeColor = 'black';
myPath.add(new Point(200, 200));
myPath.add(new Point(100, 100));
function onMouseDown(event) {
console.log('You pressed the mouse!');
}
function onMouseDrag(event) {
console.log('You dragged the mouse!');
}
function onMouseUp(event) {
console.log('You released the mouse!');
}
I'm using v0.11.4 of paper.js. The path shows up on the screen properly, but the console is empty when I click around. Am I setting something up improperly? Please let me know. Thank you!
You can read the great paper.js tutorials, especially using javascript directly > working with tools :
paper.install(window);
window.onload = function() {
paper.setup('myCanvas');
// Create a simple drawing tool:
var tool = new Tool();
var path;
// Define a mousedown and mousedrag handler
tool.onMouseDown = function(event) {
path = new Path();
path.strokeColor = 'black';
path.add(event.point);
}
tool.onMouseDrag = function(event) {
path.add(event.point);
}
}
I want to communicate between two animated canvas elements.
I’ve made two html5 canvas js animations with Adobe Animate CC. I’ve put both of these elements into one html page. I can successfully call functions from within those animations – the alerts are triggered successfully in the code below.
I want to call functions from one animation to control the other animation. I need help knowing how to correctly call/name/address the animations. So far I get no response with the canvas_ship.gotoAndPlay(12); and canvas_car.gotoAndPlay(7);, and I've spent hours trying different references. I’m not a big coder, but I’m sure this is a simple matter. Any help is appreciated!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Canvas Animations Talking to Each Other</title>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="ship.js"></script>
<script src="car.js"></script>
<script>
function init () {
var canvas, stage, exportRoot;
canvas = document.getElementById("canvas_ship");
exportRoot = new libs_ship.ship();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(libs_ship.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
canvas = document.getElementById("canvas_car");
exportRoot = new libs_car.car();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(libs_car.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function tell_Ship_what_frame_to_go_to(){
alert("tell_Ship_what_frame_to_go_to was triggered");
canvas_ship.gotoAndPlay(12); //This line does not work.
}
function tell_Car_what_frame_to_go_to(){
alert("tell_Car_what_frame_to_go_to was triggered");
canvas_car.gotoAndPlay(7); //This line does not work.
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas_ship" width="300" height="250" style="background-color:#FFFFFF"></canvas>
<canvas id="canvas_car" width="300" height="250" style="background-color:#FFFFFF"></canvas>
</body>
</html>
I've received help and will now share the answer. You are welcome. Just invite me over for dinner sometime.
In Adobe Animate, you'll need to change the library namespace (in the Publish settings in the Advanced tab I think) to lib_jerry or whatever custom name you come up with... so long as it's different than the other animation. Then just follow the setup in this code. You can call the functions from within the Animate animations.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Container</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="tommy.js"></script>
<script src="jerry.js"></script>
<script>
var canvas, stage, tomtom, jerjer;
function init() {
var exportRoot;
//Tommy
canvas = document.getElementById("canvas_tommy");
tomtom = new lib_tommy.tommy();
stage = new createjs.Stage(canvas);
stage.addChild(tomtom);
stage.update();
createjs.Ticker.setFPS(lib_tommy.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
//Jerry
canvas = document.getElementById("canvas_jerry");
jerjer = new lib_jerry.jerry();
stage = new createjs.Stage(canvas);
stage.addChild(jerjer);
stage.update();
createjs.Ticker.setFPS(lib_jerry.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function button_from_tommy_was_clicked(){
tomtom.gotoAndPlay(5);
}
function button_from_jerry_was_clicked(){
jerjer.gotoAndPlay(5);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
<canvas id="canvas_tommy" width="970" height="90" style="background-color:#727272"></canvas>
<canvas id="canvas_jerry" width="970" height="90" style="background-color:#727272"></canvas>
</body>
</html>
I am using EaselJS and my task is to move a .png from right to left.
Since I bumped into an error I can't fix, I copied a work with the same goal and using createjs.Ticker.addListener to keep everything updated. I opened the other index.html with the included javascript and it worked perfectly. I proceeded to use this code as an example, but used my graphics. It is almost the same code, but it still tells me "TypeError: createjs.Ticker.addListener is not a function" I have no idea why the example works fine, but my code screws up like that.
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/easeljs.js"></script>
<script>
var canvas, stage, child;
function draw () {
canvas = document.getElementById("canvas");
stage = new createjs.Stage( canvas );
var bg = new createjs.Bitmap( "bg.png" );
stage.addChild( bg );
var child = new createjs.Bitmap( "target.png" );
child.onTick = function ()
{
this.x --;
}
stage.addChild( child );
child.y = 100;
child.x = 100;
createjs.Ticker.useRAF = true;
createjs.Ticker.setFPS( 1 );
createjs.Ticker.addListener( stage , true );
createjs.Ticker.addListener( window , true );
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="650" height="400" style="background: #ccc;"></canvas>
</body>
</html>
EDIT
The error has been found. It wasn't the code, it was the easelJS-library itself that made the complications. I used a different version of the library and it worked. Thank you anyways :).
The function you are after is addEventListener
like this:
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
stage.update();
}
CreateJS Ticker Documentation