How to load an image from a URL (a favicon) into a symbol in AA to create a list of links?

[Hans JF]

I've spent two whole days now trying to figure out how load an image from an url into a symbol in Adobe Animate. This might be easy with AS3, I don't know, but I want to stick with HTML5 in order to learn it properly and use it for all future projects. It's impossible to find code sources, they all dvelve into 100 other things making the code unreadable since I don't know JS (yet, I'm learning), or the code snippets are exchanged between programmers assuming additional lines of codes are written that I don't know anything about. No matter what code I copy and try, it doesn't work. The images I want to use are favicons, example: https://www.google.com/s2/u/0/favicons?domain=scmp.com

[JoãoCésar · Accepted solution]

Hi.

Here it is a suggestion:

var img = document.createElement("img");
var bmp, i;

img.src="https://www.google.com/s2/u/0/favicons?domain=scmp.com";

for (i = 0; i < 10; i++)
{
	bmp = new createjs.Bitmap(img);
	bmp.x = 24 * i;
	this.addChild(bmp); // or this.nameOfYourInstance.addChild(bmp);
}

Please let us know if this is what you're looking for.

Regards,

JC

[Hans JF]

This is excellent, I'm beginning to understand how JS and AA works together. I was totally new to all of this a couple of days ago. I'm going to take the time to learn JS, AA and createjs, etc, in the months to come, but can you please also tell me how I position the bitmap and I'll be all set to finish what I'm working on right now. I've added the code to the symbol, the bitmap shows up in the middle of the symbol now and follows it wherever. If you push it, say, 10 pixels left/right or up/downdown, I'll figure out how to put it where I want it from that. I tried to look it up but being a total beginner at this I don't stand a chance to find out even something as simple as that, I don't know what words to use to google with. 

[JoãoCésar]

Great.

How exactly do you want to position the bitmaps? Can you share some screenshots or your FLA?

[Hans JF]

You'll understand right away when you see the screenshot. I just realized I can move the rectangle, however, it will be useful to know how to position and control the size of the bitmap for some things I'm going to do later. I.e. how to set x, y position, width and height.

Thanks for the list of links, that's a treasure trove of information. I saw just now there are videos on your Youtube channel that goes into exactly what I'm going to do soon. I'm eternally grateful. 

[JoãoCésar · Accepted solution]

Nice! You're welcome.

So here is another sample that should be closer to real world requirements.

JS / JavaScript code:

var root = this;
var startX = 8;
var startY = 8;
var offsetY = 8;
var iconHeight = 24;
var imgsrc="https://www.google.com/s2/u/0/favicons?domain=scmp.com";
var librarySymbol = lib.IconContainer; // "IconContainer" is the symbol linkage name in the Library

var data =
[
	{ src: imgSrc, symbol: librarySymbol, text: "Icon 1" },
	{ src: imgSrc, symbol: librarySymbol, text: "Icon 2" },
	{ src: imgSrc, symbol: librarySymbol, text: "Icon 3" },
	{ src: imgSrc, symbol: librarySymbol, text: "Icon 4" },
	{ src: imgSrc, symbol: librarySymbol, text: "Icon 5" },
	{ src: imgSrc, symbol: librarySymbol, text: "Icon 6" },
	{ src: imgSrc, symbol: librarySymbol, text: "Icon 7" },
	{ src: imgSrc, symbol: librarySymbol, text: "Icon 8" }
];

function main()
{
	var i, iconContainer, img;
	
	document.body.style.backgroundColor = "black";
	
	for (i = 0; i < data.length; i++)
	{
		iconContainer = new data[i].symbol();
		iconContainer.x = startX;
		iconContainer.y = startY + i * (iconContainer.nominalBounds.height + offsetY);
		iconContainer.txt.text = data[i].text;
		root.addChild(iconContainer);
		
		img = document.createElement("img");
		img.src=data[i].src;
		img.container = iconContainer;
		img.onload = function(e){ loaded(e.target); };
	}
}

function loaded(img)
{
	var bmp, bounds;
	
	bmp = new createjs.Bitmap(img);
	setBitmapHeight(bmp, iconHeight);
	bounds = bmp.getTransformedBounds();
	bmp.x = startX;
	bmp.y = (img.container.nominalBounds.height - bounds.height) * 0.5;
	img.container.addChild(bmp);
}

function setBitmapHeight(bmp, newHeight)
{
	var originalHeight = bmp.getBounds().height;
	bmp.scaleX = bmp.scaleY = newHeight / originalHeight;
}

main();

FLA download:

https://bit.ly/3HM2A6Q

I hope this helps.

Regards,

JC

[Hans JF]

You have no idea how thankful I am for that code and the links. I have realized what I should be doing in AA and what I should be doing in JS and/or other languages. I have put AA on hold indefinitely, I have packed my bags and gone done the Javascript rabbit hole and I'm not coming back until I code like the wind.

[JoãoCésar]

And here are some references to learn coding in the HTML5 Canvas document:

- The official help has lot of articles, tutorials, and examples: https://helpx.adobe.com/support/animate.html;

- Animate CC also ships with great learning content. Just go to the start screen and select the LEARN option in the top-left corner of the screen;

- Basic AS3 to HTML5 reference: https://helpx.adobe.com/animate/kb/as-to-html5.html;

- LinkedIn Learning has some great video courses (special mention to Joseph Labrecque): https://www.linkedin.com/learning;

- Pluralsight also have some great video courses: https://www.pluralsight.com;

- General tips and tricks in the comment that starts with "Excellent!";

- Official demos developed by the CreateJS team: https://github.com/CreateJS/AdobeAnimateDemo;

- Other samples from the CreateJS official account on GitHub: https://github.com/CreateJS; 

- CreateJS official samples on CodePen: https://codepen.io/createjs; 

- CreateJS blog: http://blog.createjs.com; 

- Lanny McNie, from the CreateJS team, samples on JSFiddle: https://jsfiddle.net/user/lannymcnie/fiddles; 

- This old talk by Grant Skinner, the author of CreateJS: https://www.youtube.com/watch?v=QHudJJLRp-c; 

- Adobe Animate's official YouTube channel;

- Martin Melendez's YouTube channel;

- My repo on GitHub that contains the source codes and files of some games, apps, and other stuff;

- I also have a YouTube channel that you may find useful.

I hope these help.