diff --git a/app/assets/javascripts/swf_assets/show.js b/app/assets/javascripts/swf_assets/show.js index 66aa24ac..ee5446d5 100644 --- a/app/assets/javascripts/swf_assets/show.js +++ b/app/assets/javascripts/swf_assets/show.js @@ -150,13 +150,13 @@ function updateStage() { function updateCanvasDimensions() { // Set the canvas's internal dimensions to be higher, if the device has high - // DPI. Scale the movie clip to match, too. + // DPI. Scale the stage to match, too. const internalWidth = canvas.offsetWidth * window.devicePixelRatio; const internalHeight = canvas.offsetHeight * window.devicePixelRatio; canvas.width = internalWidth; canvas.height = internalHeight; - movieClip.scaleX = internalWidth / library.properties.width; - movieClip.scaleY = internalHeight / library.properties.height; + stage.scaleX = internalWidth / library.properties.width; + stage.scaleY = internalHeight / library.properties.height; } window.addEventListener("resize", () => { @@ -176,23 +176,28 @@ window.addEventListener("resize", () => { //////////////////////////////////////////////////// async function startMovie() { + // Install the MotionGuidePlugin, which is needed for motion path animations. + createjs.MotionGuidePlugin.install(); + // Load the movie's library (from the JS file already run), and use it to // build a movie clip. library = await getLibrary(); movieClip = buildMovieClip(library); - updateCanvasDimensions(); - if (canvas.getContext("2d") == null) { console.warn(`Out of memory, can't use canvas for ${libraryUrl}.`); // TODO: "Too many animations!" return; } - stage = new window.createjs.Stage(canvas); + stage = new library.Stage(canvas); stage.addChild(movieClip); + updateCanvasDimensions(); updateStage(); + // Signal to the library that the composition is ready. + AdobeAn.compositionLoaded(library.properties.id); + loadingStatus = "loaded"; canvas.setAttribute("data-status", "loaded"); diff --git a/app/javascript/wardrobe-2020/components/OutfitMovieLayer.js b/app/javascript/wardrobe-2020/components/OutfitMovieLayer.js index 0afd76c4..47ddf81a 100644 --- a/app/javascript/wardrobe-2020/components/OutfitMovieLayer.js +++ b/app/javascript/wardrobe-2020/components/OutfitMovieLayer.js @@ -390,6 +390,10 @@ export function loadMovieLibrary(librarySrc, { preferArchive = false } = {}) { ); } delete window.AdobeAn.compositions[compositionId]; + + // Install the MotionGuidePlugin, which is needed for motion path animations. + window.createjs.MotionGuidePlugin.install(); + const library = composition.getLibrary(); // One more loading step as part of loading this library is loading the