Highlighted

Add Imported Image to MovieClip and Run Function After Load

Explorer ,
Feb 07, 2020

Copy link to clipboard

Copied

I found this solution for importing an image, then attaching it to a movieclip:

 

var image = new createjs.Bitmap("Assets/svg/04a_MultiPurpose_Solution-exported.svg");
this.MainBlueprint.Blueprint.addChild(image);

 

I then wanted to obtain the width and height after the image was loaded. All I found was this:

 

var img = new Image();
img.onload = function() {
	// gets called when the img is loaded
	alert(img.width+"    "+img.height);
};
img.src='Assets/svg/04a_MultiPurpose_Solution-exported.svg';

 

 Problem now is that when I try this in the code:

 

this.MainBlueprint.Blueprint.addChild(img);

 

it does not work. Does anyone know the solution to this? Thanks.

TOPICS
Code, How to, Import and export

Views

202

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

Add Imported Image to MovieClip and Run Function After Load

Explorer ,
Feb 07, 2020

Copy link to clipboard

Copied

I found this solution for importing an image, then attaching it to a movieclip:

 

var image = new createjs.Bitmap("Assets/svg/04a_MultiPurpose_Solution-exported.svg");
this.MainBlueprint.Blueprint.addChild(image);

 

I then wanted to obtain the width and height after the image was loaded. All I found was this:

 

var img = new Image();
img.onload = function() {
	// gets called when the img is loaded
	alert(img.width+"    "+img.height);
};
img.src='Assets/svg/04a_MultiPurpose_Solution-exported.svg';

 

 Problem now is that when I try this in the code:

 

this.MainBlueprint.Blueprint.addChild(img);

 

it does not work. Does anyone know the solution to this? Thanks.

TOPICS
Code, How to, Import and export

Views

203

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
Feb 07, 2020 0
Explorer ,
Feb 07, 2020

Copy link to clipboard

Copied

I think I found the solution in Klaus's answer: https://community.adobe.com/t5/animate/load-dynamic-external-image-in-animate-cc-canvas-javascript/t... 

 

The thing is that he used PreloadJS, but I only got this to work:

var img = new Image();
img.onload = function() {
	// gets called when the img is loaded
	alert(img.width+"    "+img.height);
	var image = new createjs.Bitmap(img);
	exportRoot.MainBlueprint.Blueprint.addChild(image);
};
img.src='Assets/svg/04a_MultiPurpose_Solution-exported.svg';

 

 

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...
Feb 07, 2020 0
Explorer ,
Feb 07, 2020

Copy link to clipboard

Copied

Now this works:

var queue = new createjs.LoadQueue(true, null, true);
queue.on("complete", handleComplete, this);
queue.loadManifest([
    {id: "myImage", src:"Assets/svg/04a_MultiPurpose_Solution-exported.svg", type:"image"}
]);
function handleComplete() {
	var image = queue.getResult("myImage");
	alert(image.width+"    "+image.height);
	var imageB = new createjs.Bitmap(image);
	imageB.x = -594.2;
	imageB.y = -377.975;
	this.MainBlueprint.Blueprint.addChild(imageB);
}

JC's answer in: https://community.adobe.com/t5/animate/animate-html-canvas-js-and-loading-svg-from-file/td-p/1062737... 

SVG needs type:"image" included. Plus, SVGs are loaded as bitmaps and not vector graphics. I kind of assumed when I saw createjs.Bitmap, but the whole point of importing SVG using code was that when I manually imported the SVG into Animate and published it, the SVG was saved with the rest of the code in a JS file, causing the other JavaScript to run slowly or not at all. I couldn't get the program to save the SVGs in another folder by themselves.

 

On a side note, in Edge and Firefox, the SVG is a lot smaller or nonexistent.

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...
Feb 07, 2020 0