MotionBlurPlugin

[AS3/AS2] MotionBlurPlugin provides an easy way to apply a directional blur to a DisplayObject based on its velocity and angle of movement in 2D (x/y). This creates a much more realistic effect than a standard BlurFilter for several reasons:

  1. A regular BlurFilter is limited to blurring horizontally and/or vertically whereas the motionBlur gets applied at the angle at which the object is moving.
  2. A BlurFilter tween has static start/end values whereas a motionBlur tween dynamically adjusts the values on-the-fly during the tween based on the velocity of the object. So if you use a Strong.easeInOut for example, the strength of the blur will start out low, then increase as the object moves faster, and reduce again towards the end of the tween.

motionBlur even works on bezier/bezierThrough tweens!

To accomplish the effect, MotionBlurPlugin creates a Bitmap that it places over the original object, changing alpha of the original to [almost] zero during the course of the tween. The original DisplayObject still follows the course of the tween, so MouseEvents are properly dispatched. You shouldn't notice any loss of interactivity. The DisplayObject can also have animated contents - MotionBlurPlugin automatically updates on every frame. Be aware, however, that as with most filter effects, MotionBlurPlugin is somewhat CPU-intensive, so it is not recommended that you tween large quantities of objects simultaneously. You can activate fastMode to significantly speed up rendering if the object's contents and size/color doesn't need to change during the course of the tween.

motionBlur recognizes the following properties:

  • strength : Number - Determines the strength of the blur. The default is 1. For a more powerful blur, increase the number. Or reduce it to make the effect more subtle.
  • fastMode : Boolean - Setting fastMode to true will significantly improve rendering performance but it is only appropriate for situations when the target object's contents, size, color, filters, etc. do not need to change during the course of the tween. It works by essentially taking a BitmapData snapshot of the target object at the beginning of the tween and then reuses that throughout the tween, blurring it appropriately. The default value for fastMode is false.
  • quality : int - The lower the quality, the less CPU-intensive the effect will be. Options are 1, 2, or 3. The default is 2.
  • padding : int - padding controls the amount of space around the edges of the target object that is included in the BitmapData capture (the default is 10 pixels). If the target object has filters applied to it like a GlowFilter or DropShadowFilter that extend beyond the bounds of the object itself, you might need to increase the padding to accommodate the filters.
  • containerClass : Class - MotionBlurPlugin must add a container to the target's parent's display list to hold the blurred image during the tween (it gets removed when it's done). By default, a Sprite is used unless it senses the presense of the Flex framework (checking getDefinitionByName("mx.managers.SystemManager")) in which case it will use a UIComponent in order to comply with Flex requirements (if we addChild() a Sprite, Flex throws an error saying it requires a UIComponent). Typically the appropriate container class is automatically selected for you (Sprite or UIComponent) but there are some extremely rare circumstances under which it may be useful to define the class yourself. That's precisely what containerClass is for. Example: containerClass:Sprite

You can optionally set motionBlur to the Boolean value of true in order to use the defaults. (see below for examples)

Also note that due to a bug in Flash, if you apply motionBlur to an object that was masked in the Flash IDE it won't work properly - you must apply the mask via ActionScript instead (and set both the mask's and the masked object's cacheAsBitmap property to true). And another bug in Flash prevents motionBlur from working on objects that have 3D properties applied, like z, rotationY, rotationX, or rotationZ.

Usage


import com.greensock.*;
import com.greensock.plugins.*;
TweenPlugin.activate([MotionBlurPlugin]); //only do this once in your SWF to activate the plugin
TweenMax.to(mc, 2, {x:400, y:300, motionBlur:{strength:1.5, fastMode:true, padding:15}});
//or to use the default values, you can simply pass in the Boolean "true" instead:
TweenMax.to(mc, 2, {x:400, y:300, motionBlur:true});

Get GSAP

Version: 1.20.4 updated 2018-02-15

Core

    Extras

      Plugins

        By using GreenSock code, you agree to the terms of use.

        For an all-access pass to premium content

        Join Club GreenSock