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

Question

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ésar17023019 · Accepted Answer

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.

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

JoãoCésar17023019 · Answer

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded