Highlighted

Animate HTML Canvas/JS and Loading SVG From File

Participant ,
Sep 23, 2019

Copy link to clipboard

Copied

Hello,

I am migrating from AS3 to HTML5/JS -- I am very new at this.  I have read the w3schools.com JS tutorial, as well as createJS.com .  With AS3, I had 500 SWF files (containing vector graphics) that could be loaded dynamically, and now I am converting them to SVG.  With the HTML5/JS method, I need to dynamically load any of the 500 SVGs.

I've had success loading a .JPG with this:

this.stop();
this.imageHolder.removeAllChildren();
var p = new createjs.Bitmap("images/img3.jpg"); // THIS WORKS
// var p = new createjs.Bitmap("images/global_6000.svg");  //THIS DOESN'T WORK
// var p = new createjs.MovieClip("images/global_6000.svg");  //THIS DOESN'T WORK
// var p = new createjs.Shape("images/global_6000.svg");  //THIS DOESN'T WORK
this.imageHolder.addChild(p);

The SVG doesn't appear.

I have searched the web exhaustively, and I cannot find an Animate HTML Canvas explanation of how to load .SVG files and display them.  If anyone could point me in the right direction, I would appreciate your help.  Thank you!

 

Views

292

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Animate HTML Canvas/JS and Loading SVG From File

Participant ,
Sep 23, 2019

Copy link to clipboard

Copied

Hello,

I am migrating from AS3 to HTML5/JS -- I am very new at this.  I have read the w3schools.com JS tutorial, as well as createJS.com .  With AS3, I had 500 SWF files (containing vector graphics) that could be loaded dynamically, and now I am converting them to SVG.  With the HTML5/JS method, I need to dynamically load any of the 500 SVGs.

I've had success loading a .JPG with this:

this.stop();
this.imageHolder.removeAllChildren();
var p = new createjs.Bitmap("images/img3.jpg"); // THIS WORKS
// var p = new createjs.Bitmap("images/global_6000.svg");  //THIS DOESN'T WORK
// var p = new createjs.MovieClip("images/global_6000.svg");  //THIS DOESN'T WORK
// var p = new createjs.Shape("images/global_6000.svg");  //THIS DOESN'T WORK
this.imageHolder.addChild(p);

The SVG doesn't appear.

I have searched the web exhaustively, and I cannot find an Animate HTML Canvas explanation of how to load .SVG files and display them.  If anyone could point me in the right direction, I would appreciate your help.  Thank you!

 

Views

293

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 23, 2019 0
Adobe Community Professional ,
Sep 24, 2019

Copy link to clipboard

Copied

Hi.

 

Use LoadQueue.

Example (ES6):

const loader = new createjs.LoadQueue(false, null, true);

loader.on("complete", e =>
{
    const bitmap = new createjs.Bitmap(e.currentTarget.getResult("test"));
    this.addChild(bitmap);
});

loader.loadManifest([{id:"test", src:"star.svg", type:"image"}]);

 

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2019 0
Participant ,
Sep 24, 2019

Copy link to clipboard

Copied

Hi JC,

Thank you, but it's not displaying the star.svg (I did ensure that star.svg is in the same folder as the HTML/JS files).

I also tried the following (based on the LoadQueue docs), with a lot of variations, and still, no SVG is displayed.

Will using createjs.Bitmap result in a raster, and not a vector, graphic?  Is that why it's not displaying?

 

var loader = new createjs.LoadQueue(true);
loader.on("fileload", handleFileLoad, this);
loader.loadFile({id:"test", src:"star.svg"});
loader.load();

function handleFileLoad(event) {
	const bitmap = new createjs.Bitmap(event.result);
	this.addChild(bitmap);
}

 

 Thanks.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2019 0
Adobe Community Professional ,
Sep 24, 2019

Copy link to clipboard

Copied

Hi.

 

You need to pass the type argument as "image" to tell PreloadJS to use the image loader and not the SVG loader. It seems to be an issue that as far as I know is still no fixed.

So your loadFile method would be:

loader.loadFile(
{
    id: "test",
    src: "star.svg",
    type:"image"
});

 

And, yeah, SVGs are loaded as bitmaps and not vector graphics.

 

 

Regards,

JC 

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2019 0
Participant ,
Sep 24, 2019

Copy link to clipboard

Copied

JC, holy cow... not only does it need the type: "image", but none of this code works in IE! It only works in Chrome! In Adobe Animate, when I test with CTRL-ENTER, it opens IE -- and, no SVG is displayed. I pasted the URL into Chrome, and the SVG is displayed! Now, if I could figure out how to get Adobe Animate to CTRL-ENTER with Chrome instead...

It is also interesting that, although the SVG is brought into a Bitmap object, it's still rendered as a vector graphic in the browser.  I don't understand that logic, but it seems to be what I need.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2019 0
Adobe Community Professional ,
Sep 24, 2019

Copy link to clipboard

Copied

Yeah... IE is a different story... Please check out this issue: https://github.com/CreateJS/EaselJS/issues/989

 

About testing the output, what Animate does is to open the default browser set in your OS. On Windows, if you open the start menu and type "default apps" and choose the first option in the search results, you can change the default browser.

clipboard_image_0.png

 

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2019 0