2020-09-21 06:52:36 -07:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2020-09-21 07:07:47 -07:00
|
|
|
<script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script>
|
|
|
|
|
<script src="https://code.createjs.com/1.0.0/tweenjs.min.js"></script>
|
|
|
|
|
<script src="https://code.createjs.com/1.0.0/preloadjs.min.js"></script>
|
|
|
|
|
<script src="/api/assetProxy?url=http://images.neopets.com/cp/items/data/000/000/564/564507_fc3216b9b8/all-item_foreground_lower.js"></script>
|
2020-09-21 06:52:36 -07:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div style="display: flex; justify-content: center;">
|
|
|
|
|
<div
|
|
|
|
|
style="
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 600px;
|
|
|
|
|
border: 1px solid #aaa;
|
|
|
|
|
position: relative;
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<div style="padding-bottom: 100%;"></div>
|
|
|
|
|
<canvas
|
|
|
|
|
id="stage-canvas"
|
|
|
|
|
style="
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
"
|
|
|
|
|
></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
async function main() {
|
|
|
|
|
const composition = Object.values(AdobeAn.compositions)[0];
|
|
|
|
|
const library = composition.getLibrary();
|
|
|
|
|
|
|
|
|
|
const manifest = library.properties.manifest.map((item) => ({
|
|
|
|
|
...item,
|
|
|
|
|
type: createjs.Types.IMAGE, // can't infer from assetProxy URL!
|
|
|
|
|
src:
|
|
|
|
|
"/api/assetProxy?url=" +
|
|
|
|
|
encodeURIComponent(
|
|
|
|
|
"http://images.neopets.com/cp/items/data/000/000/564/564507_fc3216b9b8/" +
|
|
|
|
|
item.src
|
|
|
|
|
),
|
|
|
|
|
}));
|
|
|
|
|
|
2020-09-21 06:53:54 -07:00
|
|
|
const queue = new createjs.LoadQueue();
|
2020-09-21 06:52:36 -07:00
|
|
|
const queueCompleted = new Promise((resolve) =>
|
|
|
|
|
queue.on("complete", () => resolve())
|
|
|
|
|
);
|
2020-09-21 06:53:54 -07:00
|
|
|
queue.loadManifest(manifest);
|
2020-09-21 06:52:36 -07:00
|
|
|
await queueCompleted;
|
|
|
|
|
|
|
|
|
|
const spriteSheets = composition.getSpriteSheet();
|
|
|
|
|
for (const { name, frames } of library.ssMetadata) {
|
|
|
|
|
spriteSheets[name] = new createjs.SpriteSheet({
|
|
|
|
|
images: [queue.getResult(name)],
|
|
|
|
|
frames,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const movieClip = new library.allitem_foreground_lower();
|
|
|
|
|
|
|
|
|
|
const canvas = document.getElementById("stage-canvas");
|
|
|
|
|
const stage = new library.Stage(canvas);
|
|
|
|
|
canvas.width = canvas.offsetWidth * window.devicePixelRatio;
|
|
|
|
|
canvas.height = canvas.offsetHeight * window.devicePixelRatio;
|
|
|
|
|
stage.scaleX = (canvas.offsetWidth * window.devicePixelRatio) / 600;
|
|
|
|
|
stage.scaleY = (canvas.offsetHeight * window.devicePixelRatio) / 600;
|
|
|
|
|
|
|
|
|
|
stage.addChild(movieClip);
|
|
|
|
|
|
|
|
|
|
createjs.Ticker.framerate = library.properties.fps;
|
|
|
|
|
createjs.Ticker.addEventListener("tick", stage);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
main();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
