Actionscript Tweening with Motion Blur

So i have several items on a page, each of which tweens out or in depending on a mouse event. So far i can do Easing on them when they are going out/in but how do i also set up a tween so that it blurs as the come in and out (motion blur) like the ones in the motion presets. I want to accomplish the same motion preset开发者_如何学编程 settings but with Actionscript.

Any help is appreciated, thank you.

---

You can check out the following article, I wrote in my blog few years ago:

Adding Directional Motion Blur to APE (AS Physics Engine)

Back in those days in order to simulate directional motion blur you needed to make a little trick involving rotation.

The article also includes an isolated Flex-sample which demonstrates how to add directional motion blur to a tween. Also it explains how the implementation and the trick I've mentioned works in principle.

Download Directional Motion Blur Sample

---

There is no "motion blur" is AS3. But you could just use the normal blur, although it wont look realistic.

For tweening filters I would recomend using TweenLite. Go to the TweenLite home page (http://www.greensock.com/tweenlite/) and scroll down to the TweenLite/Max Plugin Explorer. Click on the example button for blurFilter to see how it's done.

To do a more realistic motion blur, you would need to duplicate the instance that is moving and have them follow each other in a trail. You would then blur each one a bit more, the further they are from the original instance.

---

This is probably the best article that explains in details the calculations behind making a motion-blur in the direction your object is going.

http://labs.byhook.com/2010/02/11/simulated-motion-blur-in-flash/

It covers Linear, Curve, and Directional motion blur. Linear and Curve in this article don't necessarly "blur" but instead "trails" the sprite along the previous and current path. Directional blur looks the most pleasant, although the sharp turns of your sprite may have a noticeable blurred angle.

Some developers claim to achieve this motion blur by simply modifying a BlurFilter's blurX and blurY values, which is fine with horizonal / vertical movement (respectively). But anything in diagonals, this will look quite a bit off as it will just result a Gaussian blur (at 45degrees, basically it would have equal values in blurX and blurY, no sense of direction).

Another way this might possibly be achieved is with a Shader. This would require some knowledge of PixelBender - you would then create a filter that can take the source image, an angle and an amount parameter (so you can make longer dramatic blurs depending on the distance you move). You would then feed this information to your Shader filter and that should achieve the same result (maybe even faster than strictly doing it only in AS3).

The new Flash Player has some 3D capabilities and hardware acceleration, so it might be worth checking if this filter is already available or created by someone else! :)