Skip navigation
mattdwm 219 posts
Sep 6, 2010
Currently Being Moderated

How do you make a rotating circle's edges smooth?

Jan 20, 2014 8:53 AM

This example has a primitive circle and a motion tween. Is there a way to make the edges look sharp? Right now it looks rough. 

 

circle-test.fla

 
Replies
  • Currently Being Moderated
    Jan 20, 2014 9:09 AM   in reply to mattdwm

    Click the circle symbol, in properties enable the Render as Cache As Bitmap. It's a small improvement but it does actually work in HTML mode as well.

     

    Option:

     

    cacheasbitmap0.png

     

    Very slight improvement (smoothing/blur).

     

    Off:

     

    cacheasbitmapoff.png

     

    You can see the subpixels. Turn it on, you can still see the subpixels, although slightly less:

     

    cacheasbitmap.PNG

     

    Depending on your OS setting, you're dealing with 72DPI or 96DPI. This just isn't enough to make subpixels invisible like modern phones and tablets (300DPI+). You'll always see some level of pixellation unless you blur the heck out of the edges and then they'll seem soft.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 20, 2014 9:53 AM   in reply to mattdwm

    Look at it on a device without the cacheAsBitmap and it may look much better. Try enabling it again and look at it on the same device. The DPI makes all the difference. The pixels are so small the edges won't look pixelated to the human eye.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 20, 2014 10:08 AM   in reply to mattdwm

    To reinforce what sinous is saying, there isn't anything you can do on a  72 or 96 dpi screen to make the image look smoother than the "Render as Cache As Bitmap" version. The version that is rendered without "Render as Cache As Bitmap" has a minimal amount of anti-aliasing to make it look smoother. The "Render as Cache As Bitmap" has a moderate amount of anti-aliasing and more would only make the image edges look fuzzy.

     

    Do you have example of the circle looking smoother in any other program such as photoshop on your screen?

     

    The only thing to make the image look smoother is to render it on a higher resolution screen and use a higher resolution image.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 20, 2014 5:49 PM   in reply to mattdwm

    Makes sense but it's simply impossible. Here's a screenshot from one of the highest DPI phones on the market from your link. Samsung Note 3.

     

    http://www.ertp.com/tmp/note32.png

     

    Posting from mobile now or I'd include it in the post. 386DPI.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 21, 2014 2:15 AM   in reply to mattdwm

    The scan rate of your display vs. your animation rate also creates a certain amount of "flicker" when animating. Higher scan/refresh rates, higher resolution displays should create less.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points