CacheAsBitmap problem when animating

[moxol]

I have an object which cacheAsBitmap property is true.

If I use TweenMax to move object to new position then sometimes object doesn't retain it's own size, for example height gets smaller by 1px or width by 1px. I know that problem is cacheAsBitmap, if it's set to false then it's ok, but is there some solution to this without cacheAsBitmap false, for example manually re-cache as bitmap object?

[Carl]

I have run a few tests and can't seem to replicate this behavior. Can you please provide a very simple fla with a single tween on a single object that clearly demonstrates the size of an object being changed while it is tweened?

 

Thanks

[moxol]

I have run a few tests and can't seem to replicate this behavior. Can you please provide a very simple fla with a single tween on a single object that clearly demonstrates the size of an object being changed while it is tweened?

 

Thanks

 

Try to make .mxml file that contatins Group and FXG (copied) inside that Group, and make 5-6 such objects and move them to same y but different x positions and you will se that edges of some will be different.

[GreenSock]

I share Carl's confusion about this - can you please provide a sample set of files that clearly demonstrate the altered height? Are you tracing the value(s)? Or are you saying just visually things look 1px different or that Flash/Flex is reporting them as different?

 

Telling us to create our own files based on your general description isn't nearly as helpful as showing us EXACTLY what you're doing and providing a sample file (the simpler the better).

 

Disclaimer: we try to avoid Flex at all costs (for several reasons, but I'll spare you the explanation unless you request it), so please be patient with our lack of Flex-specific expertise.

[moxol]

I will provide example as soon as possible.

[moxol]

Here is the example of this problem.

 

Just click anywhere on stage to tween fxg's and you will see that edges of fxg are not aligned.

Cause of this problem is cacheAsBitmap=true.

Edge.zip

[GreenSock]

Yeah, that looks like it has to do with rendering issues in the Flash Player related to the fact that your artwork has a stroke applied at the edge(s). Remember, a stroke is half on one side of the line and half on the other, creating half-pixel coordinates, and then when you cacheAsBitmap, you force Flash to calculate whole pixel values for rendering purposes. You can see part of the issue if you do a getBounds() on your object. In this case, you were setting width to 100 and height to 140, but getBounds() returns this: w=99.75, h=139.85.

 

You'd probably be better off creating a BitmapData and doing the capture yourself and then animating the BitmapData (in a Bitmap object). Just an idea. I also had better luck when I set edge.height to 140.5 instead of 140, but that's not a perfect (or pretty) solution.

 

As you indicated, none of this is related to the GreenSock tools at all - it's just Flash/Flex issues.

[moxol]

Yeah, that looks like it has to do with rendering issues in the Flash Player related to the fact that your artwork has a stroke applied at the edge(s). Remember, a stroke is half on one side of the line and half on the other, creating half-pixel coordinates, and then when you cacheAsBitmap, you force Flash to calculate whole pixel values for rendering purposes. You can see part of the issue if you do a getBounds() on your object. In this case, you were setting width to 100 and height to 140, but getBounds() returns this: w=99.75, h=139.85.

 

You'd probably be better off creating a BitmapData and doing the capture yourself and then animating the BitmapData (in a Bitmap object). Just an idea. I also had better luck when I set edge.height to 140.5 instead of 140, but that's not a perfect (or pretty) solution.

 

As you indicated, none of this is related to the GreenSock tools at all - it's just Flash/Flex issues.

 

I thought that adding

{

cacheAsBitmap = false;

cacheAsBitmap = true;

}

in TweenEvent.COMPLETE would redraw and re-cache but sometimes it does, sometimes it doesn't.

Is there some method to manual re-cache as bitmap?

[GreenSock]

I don't think the issue is redrawing the bitmap cache at that point. No matter how many times you ask Flash to redraw the bitmap cache at that particular location, it will keep rendering it the exact same way. I think the only reliable solution is to manage the bitmap yourself with a BitmapData. Or don't use an object that has a stroke.

[moxol]

I don't think the issue is redrawing the bitmap cache at that point. No matter how many times you ask Flash to redraw the bitmap cache at that particular location, it will keep rendering it the exact same way. I think the only reliable solution is to manage the bitmap yourself with a BitmapData. Or don't use an object that has a stroke.

 

I want to re-render FXG and then cache it as bitmap, but I am not sure how to that manually.

I read somewhere on Adobe help that bitmap image are snapped to +-1px, it doesn't have anything to do with stroke. Inner parts of images are also not aligned. You couldn't see that in example since inner image is white, but I saw more complex FXG's are distorted when tweened.

[GreenSock]

To manually create a Bitmap capture of the asset, you use a BitmapData - see Adobe's docs on the draw() method. There are a lot of tutorials online too about how to do it.