7 Replies Latest reply on Nov 10, 2016 1:04 PM by just.emma

    Svg blurry..how works hiDpi?

    Marsseats Level 1

      Hello,

       

      i’m stunning with a little question..for adobe animate

       

      I am succeeding in making banners for a dutch advertising site, but when i scale i see that the text is getting blurry.

      ( i have test it, with making text in animate or by using illustrator (.ai of .svg) but all getting blurry.

       

      I saw the discussion of making all 2x bigger…but that would be a problem for the advertising site ( to many kb's)

       

      I also saw an answer that animate now has hiDpi support ( in canvas) …

      how does that work? of does anybody  have a suggestion for sharp banners,,

      ( i do see other banners..like T-mobile, which are extremely sharp )

       

      greetings,

      marcel verveer

       

      hereby a zip with an example, hope you see something which i’m doing wrong

      https://www.dropbox.com/s/ffspcwnhp6vsvax/32n-Sale%20728x90%20map.zip?dl=0

        • 1. Re: Svg blurry..how works hiDpi?
          just.emma Level 4

          Animate 2015.2 and up does have built in HiDPI support in the new publish templates.  If you uncheck "Overwrite HTML on Publish", you'll get the latest settings.

           

          You'll probably want to update your publishing template so you have both the newest features from Animate, but also any scripts you need for the clicktag to track.

           

          Check this out for a comprehensive overview: Creating HTML5 Ads with Animate CC: High-DPI Compatible HTML5 Canvas Output and Author-Time Bitmap Snapping | Adobe Anim…

          • 2. Re: Svg blurry..how works hiDpi?
            sovie4711 Level 1

            I would like to prepare a projevt with this new HiDPI integrated support of Animate CC.

             

            The overview you mentioned above explains:

            "It’s important to understand that even when using this functionality you are still required to properly prepare and leverage double-scaled assets within your FLA in order to achieve the desired results. You’ll need to ensure that you have imported double-scaled image assets for any bitmaps that you wish to support high-DPI screens and that you have also double-scaled any vector assets that are contained within MovieClips that are being cached as bitmaps in order to improve performance."

             

            i really don't understand HOW to PREPARE this in Animate CC correctly and i find no instructions or tutorial about this.
            Are the imported doublesized assets only in the library or should they be on the stage?

            Should they have the same name? Are they exported automatically with different names?

            Is the stage doublesized also?

            Its really not easy to use this new feature without an explanation.

             

             

             

            • 3. Re: Svg blurry..how works hiDpi?
              just.emma Level 4

              The stage does not need to be double sized.  For a 300x250 banner, the stage should be 300x250 px.

               

              Import any bitmap images (jpgs and pngs) into the library at double the size, and scale them down to actual size (50% scale) on the stage.

               

              Images are the only thing you will need to resize; the HiDPI code will automatically sharpen the appearance all of the vector art (lines, shapes, text) from Animate.

              1 person found this helpful
              • 4. Re: Svg blurry..how works hiDpi?
                sovie4711 Level 1

                Hi,

                 

                the scaled-down version looks sharper on higher pixel density devices like iPad Retina.

                But on a standard lower pixel density desktop (iMac) it looks blurry and the not-scaled version looks sharper.

                I would like to publish the best version for all displays at once.

                 

                What's wrong? Thanks for Help.

                • 5. Re: Svg blurry..how works hiDpi?
                  just.emma Level 4

                  Make sure the x and y positions of your symbols are always on whole pixels, and not fractions; that can help.  You can try adding stage.snapToPixelEnabled = True; to your actions to do this automatically, though I personally prefer to handle positioning manually.

                   

                  Other than that, though, if you're working with small text and thin lines, it's always going to look clearer on a screen with a higher pixel density.  That's not an issue with Animate; it would be the same with DOM elements like a SVG in your browser.

                  • 6. Re: Svg blurry..how works hiDpi?
                    sovie4711 Level 1

                    Thanks, I already tried this and much more.

                    The not scaled Bitmap is always a little bit sharper on low pixel density devices.
                    This issue concerns only Bitmaps, text and vectors are fine. It is logic because Browser scaled Bitmaps have less quality.
                    So there should be an opportunity to write Media Queries or to serve two versions, dependent on display ppi. ?
                    But Animate does everything automatically

                     

                     

                    Scaled for HiDPI:

                    HiDPI-1-responsive


                    Original Size:

                    HiDPI-0-responsive

                    • 7. Re: Svg blurry..how works hiDpi?
                      just.emma Level 4

                      I see what you're saying.  You can submit a feature request for future releases here: Feature Request/Bug Report Form