5 Replies Latest reply on Apr 6, 2016 9:52 AM by ClayUUID

    How do I get Retina / HiDP resolution animations?

    NimpsyStudio User Group Manager

      I've created an animation in Adobe Animate CC using vector artwork and large PNG images. I place the published .oam file into Muse to export a site and the images are blurry. How do I make it Retina ready?

        • 1. Re: How do I get Retina / HiDP resolution animations?
          _Waylander_ Level 2

          How big was the stage you created the movie in?  Animate has a few templates you can open when you first enter Animate. Different HD sizes. Choose HDTV720 or HDTV1080 for large HiDef formats.

           

           

          And or set your own. I think you can now scale up your animation automatically into a new format size by choosing "Modify -> Document" And selecting Scale content option. This should save you time up scaling all the elements of your animation,

           

          Whatever you do you have to publish at the scale you wish the video to be viewed. Down-scaling your video in an viewer or html page, is no problem, up-scaling will pix-elate and return low quality imagery.

          • 2. Re: How do I get Retina / HiDP resolution animations?
            NimpsyStudio User Group Manager

            Thanks for the response, but maybe I'm wording my question wrong.

            The animation I'm creating (let's say the animation is a banner that is 400 x 200 in dimension) is created using the HTML5 Canvas. The assets I use consist of vector images and .png images which are double sized and scaled down 50%.

             

            I then publish an OAM package that I place in Adobe Muse. It sits on the Muse stage as an asset that is 400 x200. I assume that by using vector shapes and a .png that is double resolution the images would be sharp on my retina phone, but they are not.

             

            I assume I need to add some specific coding to handle 2x images through Adobe Animate so that Muse can export a retina ready file, but I am at a loss as to how.

            • 3. Re: How do I get Retina / HiDP resolution animations?
              marjantrajkovski Level 4

              Canvas must be exported in double size, not picture scaled down 50%, and then Canvas scaled down 50% with CSS.

              Canvas is like image. When you want retina image on page, you use doubled image and then scaled with CSS.

               

              Canvas

               

              <canvas id="canvas" width="600" height="500" style="width:300px;height:250px"></canvas>

               

              Image


              <img width="600" height="500" style="width:300px;height:250px">

              1 person found this helpful
              • 4. Re: How do I get Retina / HiDP resolution animations?
                rosebudd Level 3

                You may also add the folllowing to your HTML doc. to snap to whole pixels

                 

                stage.update();stage.

                snapToPixelEnabled = true;

                 

                 

                • 5. Re: How do I get Retina / HiDP resolution animations?
                  ClayUUID Adobe Community Professional

                  Enabling pixel snapping globally is generally NOT a good idea. It makes some things look worse.