impress-2020/public/animate-test.html

83 lines
2.7 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<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>
</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
),
}));
const queue = new createjs.LoadQueue();
const queueCompleted = new Promise((resolve) =>
queue.on("complete", () => resolve())
);
queue.loadManifest(manifest);
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>