0 Replies Latest reply on Mar 25, 2010 6:21 AM by wadedwalker

    For those with pixel rendering issues and slowness issues

    wadedwalker Level 3

      For anyone who doesnt know these little details when designing in Catalyst, I thought I would share and hopefully ease some peoples frustrations. Lets kick off with pixel issues.


      You have either vector, raster, or components that are either: not aligning with everything else around it, even though it has the same X/Y value, the rounded corners of a rectangle vector object are distorted, or anything else you have experienced with pixel distortion or pixels just not lining up properly. Here is the issue. When you drag and drop an object from the library, wireframe components, or draw a new shape, it can have a decimal level pixel value. It does not say this in the property inspector though. So you may have a rectangle at a listed X/Y of 10,15 but it could actually be 10.3, 14.9. To fix this you have to type in a new value of at least 1 number higher or lower. Deleting the value and typing the same number in doesnt do anything. Neither does moving it with the arrow keys in hopes of it moving it to a whole pixel value. The arrow keys move by 1 pixel (or 10 if holding down shift). This should take care of most of your problems.


      Now you may still have problems with the corners of rounded rectangles if you converted it to an Optimized Vector Graphics. For you Flash Pro users, from what I can tell, using "Optimize Vector Graphics" is basically the same as (in Flash) converting a vector shape into a MovieClip and in the property inspector, checking the "Cache as Bitmap" box. That option has Flash create a bitmap version of the vector shape so that it will not be re-drawn every frame, which is what the Flash player does with vector objects. So because it is converting your vector into raster, it kinda has issues with rounded corners when you have a stroke on the shape and pretty much only if you have a stroke. If you take the stroke off, and use Optimize Vector Graphics, you shouldn't have that problem anymore. But what if you needed that stroke? Simple, duplicate that shape, change its fill color to what you want the "stroke" color to be, increase its size by 2 pixels on the width and height for every number of thickness that you wanted with the stroke, and then set the X/Y of the "stroke" rectangle to a pixels less for whatever the "thickness" of your stroke is.



      Rectangle - width:20, height:10, desired stroke thickness:2, X:10, Y:10

      Rectangle Stroke - width: 24, height:14, X:8, Y:8


      Rectangle - width:100, height:30, desired stroke thickness:1, X:15, Y:27

      Rectangle Stroke - width:102, height:32, X:14, Y:26


      It wont look perfect but its pretty close if you do this and then draw a rectangle beside it with a real stroke. And if you still want to use Optimize Vector Graphics on it, just group the two rectangles together and then use Optimize on the group and no more distorted corners. This also applies to vector shapes in Flash Pro.


      Lastly to talk about the slowness of Catalyst. You may or may not have read the posts from Adobe employees, but I can tell you that having fewer states helps with the responsiveness of it, but so does using the Optimize Vector Graphics as much as possible. I am working in a large scale project, and just from me converting all my vector background shapes, which was around 13 used across 6 main states, it helped significantly with Catalyst being more responsive for me.


      Hoped this long post helped some people with any similar issues you might be having.