10 Replies Latest reply on May 10, 2016 12:53 PM by ClayUUID

    Resize the Stage without Scaling Movie Clips/Content

    arlinh39963375

      Hello!

      I have successfully been able to place movie clips on the stage according to coordinates. Now, what I would like to do is simply (or not so simply, lol) resize the stage to fluidly fit a given browser window size. Again, to be clear: I do not want the elements on the stage to "scale" with the stage, I just want them to remain assigned to the relevant coordinates as assigned and demonstrated in the code below:

       

      ----------------------------------

      var r = this;

      var w = stage.canvas.width;

      var h = stage.canvas.height;

       

      r.an0.x = w/2;

      r.an0.y = h/2;

       

      r.an1.x = 40;

      r.an1.y = 40;

       

      r.an2.x = w - 40;

      r.an2.y = 40;

       

      r.an3.x = 40;

      r.an3.y = h-40;

       

      r.an4.x = w-40;

      r.an4.y = h-40;

      --------------------------------

       

      I was able to easily do this with a "noScale" command in Actionscribpt 2.0/3.0 but finding a straightforward way to do it in the HTML5 canvas environment has proven difficult. Here is a working example of what I have so far (from inflagrantedelicto). Now, I just want the stage to fill the browser without scaling the movie clips BUT maintaining their assigned coordinates relative to the browser/window size their being viewed in. I believe this can be done all inside Animate CC with javascript. Manipulating it via CSS in the HTML will just cause the pixels to scale ---- Any help would be greatly appreciated. Thanks!!

       

      ALH

        • 1. Re: Resize the Stage without Scaling Movie Clips/Content
          ClayUUID Adobe Community Professional

          What you want isn't possible in HTML5 Canvas mode. The CreateJS library used for rendering in this mode is written around the concept of a fixed-resolution canvas element.

          • 2. Re: Resize the Stage without Scaling Movie Clips/Content
            ClayUUID Adobe Community Professional

            Addendum: Strike that, reverse it, eating my hat, egg on face, I was completely wrong. I just discovered that CreateJS DOES in fact support resolution-independent and dynamic-resolution rendering, though you have to give it a little help. Here are the settings you have to play with:

             

            These set the raw pixel dimensions of the DOM canvas element:

            canvas.width
            canvas.height
            

             

            These set the CSS zoom factor of the canvas element:

            canvas.style.width
            canvas.style.height
            

             

            These set the scale factor of the CreateJS stage:

            stage.scaleX
            stage.scaleY
            

             

            Say you have a 100x100 canvas displaying some vector art. At runtime if you change the canvas width/height to 200x200, and scaleX/scaleY to 2.0, you'll have just doubled the output resolution of the canvas, and CreateJS will properly re-render everything. Depending on how the stage is being scaled in the browser you may also have to do some stuff with the CSS width/height to keep it displayed at the same size.

             

            What you want is easier though. Just hook into the window resize event and set canvas.width/height to the window innerWidth/innerHeight. Something like this:

             

            window.addEventListener("resize", resizeHandler.bind(this));
            
            function resizeHandler(e) {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            
            2 people found this helpful
            • 3. Re: Resize the Stage without Scaling Movie Clips/Content
              arlinh39963375 Level 1

              AWESOME!!! Thanks for circling back and providing me with this info!! Haven't had the chance to try it out just yet but I plan to later today for sure! So, after the code above, to achieve precise placing of the movie clips, do I just add the previous coding I mentioned? So like:

               

              ----------------------------------------------------------

              window.addEventListener("resize", resizeHandler.bind(this)); 

               

              function resizeHandler(e) { 

                  canvas.width = window.innerWidth; 

                  canvas.height = window.innerHeight; 

              }

               

              var r = this;

              var w = stage.canvas.width;

              var h = stage.canvas.height;

               

              r.an0.x = w/2;

              r.an0.y = h/2;

               

              r.an1.x = 40;

              r.an1.y = 40;

               

              r.an2.x = w - 40;

              r.an2.y = 40;

               

              r.an3.x = 40;

              r.an3.y = h-40;

               

              r.an4.x = w-40;

              r.an4.y = h-40;

              -----------------------------------------------------------------------

              • 4. Re: Resize the Stage without Scaling Movie Clips/Content
                ClayUUID Adobe Community Professional

                That should work. You don't have to do stage.canvas. "canvas" is already declared as a global in the HTML wrapper.

                 

                As the thread starter, could you please change the currently marked (in)correct answer?

                • 5. Re: Resize the Stage without Scaling Movie Clips/Content
                  arlinh39963375 Level 1

                  Morning!

                  That coding didn't seem to work when I placed it in Animate.

                   

                  BUT ..

                   

                  Are you saying that this code:

                  ----------------------------------------------------------

                  window.addEventListener("resize", resizeHandler.bind(this)); 

                   

                  function resizeHandler(e) { 

                      canvas.width = window.innerWidth; 

                      canvas.height = window.innerHeight; 

                  }

                  --------------------------------------------------------------------

                  Should be added to the HTML and not in the Animate CC code?

                   

                  Thanks!

                  • 6. Re: Resize the Stage without Scaling Movie Clips/Content
                    ClayUUID Adobe Community Professional

                    No. I just pasted that exact code into a new blank canvas document and it worked.

                    • 7. Re: Resize the Stage without Scaling Movie Clips/Content
                      arlinh39963375 Level 1

                      Ok. I must be missing something. I pasted the code into a new canvas document, tested it in the browser and it's just displaying the original stage size in the browser window.  This is what I pasted in the new HTML5 canvas doc to begin:

                       

                      window.addEventListener("resize", resizeHandler.bind(this)); 

                       

                      function resizeHandler(e) { 

                          canvas.width = window.innerWidth; 

                          canvas.height = window.innerHeight; 

                      }

                       

                       

                      Am I missing something?

                      Thanks!

                      • 8. Re: Resize the Stage without Scaling Movie Clips/Content
                        ClayUUID Adobe Community Professional

                        Did you change the stage background color to something other than white so you can tell the difference between the stage and the document body?

                        • 9. Re: Resize the Stage without Scaling Movie Clips/Content
                          arlinh39963375 Level 1

                          Sure did. Changed it to black #000.

                           

                          And thanks. I really appreciate all your help. I really do.

                          • 10. Re: Resize the Stage without Scaling Movie Clips/Content
                            ClayUUID Adobe Community Professional

                            Well, between "create new document" and "paste onto timeline" there's not much to mess up.

                             

                            Try sticking some console.log commands into the event handler to see if it's even executing.

                            1 person found this helpful