CODEWITHSUNDEEP
javascripthtmlatlas
Joshua
Joshua

Reputation: 43

How to incorporate Javascript embbeded atlas based animation in HTML5 properly

So I used Adobe Animate to publish a vector based animation. It uses a basic .png atlas to play a 18 fps loop. It is 8 bit. Basically, I want to reference the atlas via a site source location like https://static.wixstatic.com/media/user/RECOVER_Banner%20Flash_atlas_.png. I have limited experience with Javascript so I don't know how to modify this code to reference the atlas from a site location properly.

<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>RECOVER_Banner Flash</title>
<!-- write your code here -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
(function (cjs, an) {
var p; // shortcut to reference prototypes
var lib={};var ss={};var img={};
lib.ssMetadata = [
		{name:"RECOVER_Banner Flash_atlas_", frames: [[802,6020,800,600],[1604,1204,800,600],[802,6622,800,600],[1604,4816,800,600],[802,5418,800,600],[1604,5418,800,600],[0,2408,800,600],[0,7224,800,600],[802,7224,800,600],[1604,0,800,600],[802,4214,800,600],[1604,1806,800,600],[802,1806,800,600],[1604,3010,800,600],[802,1204,800,600],[1604,3612,800,600],[0,602,800,600],[0,0,800,600],[0,3010,800,600],[0,1204,800,600],[0,5418,800,600],[0,1806,800,600],[1604,602,800,600],[0,3612,800,600],[1604,2408,800,600],[1604,4214,800,600],[802,2408,800,600],[0,4214,800,600],[0,6020,800,600],[0,4816,800,600],[802,0,800,600],[802,4816,800,600],[0,6622,800,600],[802,602,800,600],[802,3010,800,600],[802,3612,800,600],[2406,7224,800,600],[3208,1204,800,600],[2406,2408,800,600],[3208,0,800,600],[2406,5418,800,600],[3208,5418,800,600],[3208,602,800,600],[2406,6020,800,600],[1604,6622,800,600],[4010,3010,800,600],[2406,3010,800,600],[2406,3612,800,600],[3208,1806,800,600],[4010,4214,800,600],[3208,4816,800,600],[3208,6020,800,600],[3208,2408,800,600],[3208,3010,800,600],[2406,4214,800,600],[4010,3612,800,600],[1604,7224,800,600],[2406,4816,800,600],[4010,0,800,600],[3208,3612,800,600],[2406,0,800,600],[2406,6622,800,600],[3208,4214,800,600],[2406,602,800,600],[3208,6622,800,600],[3208,7224,800,600],[4010,602,800,600],[2406,1204,800,600],[2406,1806,800,600],[4010,1204,800,600],[4010,1806,800,600],[4010,2408,800,600],[1604,6020,800,600]]}
];

Here is what I think is the atlas source that I tried changing to the https location

lib.properties = {
	id: '32FF965B604FBF408600E883266E961F',
	width: 800,
	height: 600,
	fps: 24,
	color: "#FFFFFF",
	opacity: 1.00,
	manifest: [
		{src:"https://static.wixstatic.com/media/user/RECOVER_Banner%20Flash_atlas_.png", id:"RECOVER_Banner Flash_atlas_"}
	],
	preloads: []

Upvotes: 0

Views: 67

Answers (0)

Related Questions