Adobe Animate HTML5 loading animation - javascript

I've created an presentation with Adobe Animate HTML5 canvas and now I want to add a simple animation that hides once the presentation is loaded. I have the animation and placed it in the HTML just fine, but I can't figure out how to make it go away once everything is loaded. Here is the code:
<html>
<head>
<meta charset="UTF-8">
<title>Intervention</title>
<!-- write your code here -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="Intervention.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
// --- write your JS code here ---
canvas = document.getElementById("canvas");
var loader = new createjs.LoadQueue(false);
loader.installPlugin(createjs.Sound);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}
function handleComplete(evt) {
exportRoot = new lib.Intervention();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
stage.enableMouseOver();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function playSound(id, loop) {
return createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
<canvas id="canvas" width="833" height="510" style="background-color:#FFFFFF"></canvas>
<div id="MyLoader" style="position: absolute; top: 255px; left: 416px;"><img src="./images/myloader.gif"></div>
</body>
</html>
What do I place and where so that "MyLoader" will hide after the canvas has loaded?
Thank so much!

The handleComplete method fires when the JavaScript and its manifest are all loaded, so you can put the code to hide the loader in there.
function handleComplete(evt) {
document.getElementById("MyLoader").style.display = "none";
// other code in this method not shown...
}

Related

Draw multiple Rectangles with svg.draw.js

The issue was already posted here, but I think was never addressed. I need to create a new rect each time I click "Create SVG Rect" button. Hence drawing multiple rectangles.
<!DOCTYPE html>
<html lang="en">
<head><style>#test_slide { width: 500px; height: 500px; cursor: crosshair;border: solid;}</style></head><body>
<div id="test_slide"></div>
<button id="create_svg_rect" >Create SVG Rect</button>
<!--SCRIPT FILES-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" defer="defer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js" type="text/javascript" defer="defer"></script>
<script src="https://svgjs.dev/svg.draw.js/demo/svg.draw.min.js" type="text/javascript" defer="defer"></script>
<script>
document.getElementById("create_svg_rect").onclick = function() {
//SVG.on(document, 'DOMContentLoaded', function() {
var drawing = new SVG('test_slide').size('100%', '100%');
var rect = drawing.rect().attr('stroke-width',1).attr('fill','none');
drawing.on('mousedown', function(e){
rect.draw(e);
}, false);
drawing.on('mouseup', function(e){
rect.draw('stop', e);
console.log(rect.svg());
return;
}, false);
//});
};
</script>
</body></html>
In your code you were creating a whole new drawing and listeners everytime you click on the button. Thats not what you want.
Instead, just create one drawing (<svg>) and attach the listeners to it.
A click on the button only has to create a new rectangle.
To be able to access the rect-var in the listeners we have to define it in the outer scope. On click, we create a new rect and save it. On mousedown we start drawing and on mouseup we finish.
Here is working snippet:
document.addEventListener('DOMContentLoaded',() => {
let rect, drawing = new SVG('test_slide').size('100%', '100%');
drawing.on('mousedown', function(e){
rect && rect.draw(e);
});
drawing.on('mouseup', function(e){
if (rect) {
rect.draw('stop', e);
console.log(rect.svg());
rect = null;
}
});
document.getElementById("create_svg_rect").addEventListener('click', function() {
rect = drawing.rect().attr('stroke-width',1).attr('fill','none');
});
})
#test_slide { width: 500px; height: 160px; cursor: crosshair;border: solid;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js" type="text/javascript"></script>
<script src="https://svgjs.dev/svg.draw.js/demo/svg.draw.min.js" type="text/javascript"></script>
<div id="test_slide"></div>
<button id="create_svg_rect" >Create SVG Rect</button>
Since your code didnt use any jquery I removed it from the snippet.

Cannot render an image when source passed in as a variable

I am writing a code that takes in an image and pastes it into an HTML canvas. The code works when I declare my <img> in the HTML file, but this does not allow the user to input a new file.
Here is the html structure (the program works if the tag line is put back in:
<style type='text/css'>
canvas{
border: 10px solid black;
}
</style>
</head>
<body>
<canvas id='balls'>
</canvas>
<canvas id='hide' style:'border: 10px solid black;'>
<!-- <img id="taco" width="300" height="300" src="prime.png"> -->
</canvas>
<div>
<input id='url' placeholder="image url">
<button id='submit'>Submit</button>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<script src="client.js" async defer></script>
</body>
</html>
Here is the portion of JS code I am working on:
$(document).ready(onReady);
var canvas = document.querySelector('canvas');
canvas.width = 300;
canvas.height= 300;
let bounced = false;
let newPic = `id="taco" width="300" height="300" src="prime.png"`
function onReady(){
$('#submit').on('click', updateImage)
$('#hide').empty()
$('#hide').append(`<img ${newPic}>`)
makeCanvas();
setup();
animate();
}
function updateImage() {
newPic= `id="taco" width="300" height="300" src="${$('#url').val()}" alt="prime.png"`
//console.log(newPic)
$('#hide').empty()
$('#hide').append(`<img ${newPic}>`)
makeCanvas();
setup();
animate();
}
let c, can, ctx, img
function makeCanvas(){
c = canvas.getContext('2d');
can=document.getElementById("hide");
console.log(can)
can.width = 300;
can.height = 300;
ctx=can.getContext("2d");
img=document.getElementById("taco");
ctx.drawImage(img,10,10);
console.log(img)
console.log(ctx.drawImage(img,10,10))
}
My console.log statements for img are identical when the code in the HTML file is placed back in.
When you're setting up your canvas, your image isn't loaded at all. So your
ctx.drawImage(img,10,10);
call just draws... an unloaded image... an empty set of bytes... Nothing.
So you should first load your image. After that, drawing stuff will easily be done. Here's a little code example:
var canv, ctx, img;
function setup() {
//Setting up canvas
//Fetching Context
ctx = canv.getContext("2d");
//Now drawing our image
ctx.drawImage(img,10,10);
}
img = new Image();
img.onload = setup; //We'll setup the canvas after the image is fully loaded
img.src = "your/path/or/variable/pointing/to/your/image.ext";
Hope it helps!

Failing to place an image in canvas

I am trying to place an image inside the canvas element. My code is below. When I execute it I am not getting any errors back, just a page with the outline of the border area of my canvas. Please can someone advise on where I am going wrong?
html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<link rel='stylesheet' href="crop_pic.css">
</head>
<body>
<div>
<canvas id="panel" width="380" height="380"></canvas>
</div>
</body>
<script src=crop_pic.js></script>
</html>
javascript:
window.onload = function(){
var canvas = document.getElementById('panel');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'storage/resized_Glong.jpg';
ctx.drawImage(img,0,0);
}
css:
#panel{
border: 1px solid #000;
}
Use quotes in your script tag
<script src='crop_pic.js'></script>
Wait until the image is loaded and then draw it to canvas. For this add an event listener.
window.onload = function() {
var canvas = document.getElementById('panel');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'storage/resized_Glong.jpg';
img.addEventListener('load', function() {
ctx.drawImage(img, 0, 0);
});
}

Troubles applying CSS to a SVG

this is my first time here. I load a SVG with Javascript into an HTML document. I need to replace the color of this SVG (it's a black image with transparency), which is placed into a canvas; however, when I put the css (style), nothing happens.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>TEST CANVAS</title>
<script>
function draw_img(){
var img = document.getElementById("test");
test.width = 300;
test.height = 300;
var ctx = test.getContext('2d');
var source = new Image();
source.src = './field/image.svg';
source.onload = function(){
ctx.drawImage(source, 0, 0);
}
}
</script>
</head>
<style>
canvas#test {
fill:darkred;
}
</style>
<body onload = "draw_img();">
<h1>TEST</h1>
<canvas id="test"></canvas>
</body>
</html>
What's wrong with it? Sorry for my bad English and thanks in advance
Canvasses are bitmap images. You can't apply CSS styles to them and expect that to change their colour. Once the SVG is rendered into the Canvas, it's contents are fixed, and can't be changed (except by pixel manipulation).
If you want to manipulate the colours of your SVG, you should inline it.
<style>
svg#test {
fill:darkred;
}
</style>
<body>
<h1>TEST</h1>
<svg id="test">
<rect width="50" height="50"/>
</svg>
</body>
Demo here

Smooth Zooming in Canvas via button instead of mousewheel

I am trying to implement something like a smooth zoom in a Canvas application.
I am already able to zoom to a predefined zoom level using this:
$("#zoomToView").click(function () {
paper.view.zoom=5.0;
});
Most of the examples for smooth zomming pertain to mouse-wheel implementations but I would like to use a button instead that zooms to a pre-defined level and back.
I have the impression that the implementantion has something to do with a FOR loop and some kind of adaptive delay that gets bigger as the loop count increases.
Any ideas?
I am using Paper.js as my canvas library but that should not be a factor in finding a solution.
Here's an example using native canvas, but you can substitute paper.js if desired.
The concept is to continuously run an animation loop that only resizes the image if your button is down.
http://jsfiddle.net/SW5jL/3/
Example code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var iw,ih;
var img=new Image();
img.onload=start;
img.src="https://www.w3schools.com/css/img_fjords.jpg";
function start(){
iw=img.width;
ih=img.height;
$("#test").mousedown(function(){ doAnimation=true; });
$("#test").mouseup(function(){ doAnimation=false; });
$("#test").mouseout(function(){ doAnimation=false; });
requestAnimationFrame(animate);
ctx.drawImage(img,cw/2-iw/2,ch/2-ih/2);
}
var scale=1.00;
scaleDirection=0.01;
var minScale=0.50;
var maxScale=1.50;
var doAnimation=false;
function animate(){
requestAnimationFrame(animate);
if(doAnimation){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,
0,0,iw,ih,
(cw-iw*scale)/2,(ch-ih*scale)/2,iw*scale,ih*scale
);
scale+=scaleDirection;
if(scale<minScale || scale>maxScale){
scaleDirection*=-1;
scale+=scaleDirection;
}
}
}
}); // end $(function(){});
</script>
</head>
<body>
<button id="test">Animate</button><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Categories

Resources