Skip to main content
R
RyanS_Extron17202589
Inspiring
February 7, 2020
Question

Add Imported Image to MovieClip and Run Function After Load

  • February 7, 2020
  • 1 reply
  • 414 views

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.

This topic has been closed for replies.

1 reply

R
RyanS_Extron17202589Author
Inspiring
February 7, 2020

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/td-p/9198712?page=1 

 

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';

 

 

R
RyanS_Extron17202589Author
Inspiring
February 8, 2020

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/10627377?page=1 

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices