1. Code
  2. Effects

Quick Tip: Whipping up Real Time Motion Trails

Read Time:10 minsLanguages:

In this Quick Tip we are going to be using the ColorMatrixFilter and BlurFilter to create a Motion Trail effect.

We found this awesome author thanks to, the place to buy and sell Flash games.

Final Result Preview

Let's take a look at the final result we will be working towards:

Step 1: Create Project and Set It Up

Create a new Project in FlashDevelop (or whichever editor you use), set the dimensions of the swf to 600x400 and the background to black (#000000).

Next, to set up the scene we are going to have two Sprites, one is for the main display to which we will add all the display objects and the other is for the Motion Trail effect that uses the main display as a reference.

And add the Sprites to the Stage.

Now we are going to embed our star image for use, or if you want use your own image.

The final thing we want to do for the setup is create a loop function. This is going to be updated every frame, for things like positioning and updating the Motion Trail. So make another function and an event listener to call it every frame.

Your class should look something like this.

Step 2: Sprites & TextField

To test the Motion Trail we are going to create ten Sprites from the star image and position them in random places. Additionally we are going to create a Point that tells us the speed and direction they will move. The first thing to do is create two Arrays to store this information; one is for the Sprite and the other is for the Point.

Add this to the init function to randomly create and place ten stars.

Now to create the TextField add this.

Step 3: Control Sprite Movement

Now we have to move into our loop function for Sprite movement control. Fairly simple, use a for loop to go through each Sprite we have and if it hits the edge inverse the x or y of the Point so it goes in the other direction. We'll also have to move the sprite in the loop by the values in the Point and, to make it more interesting, slowly rotate it.

To move the TextField across the top to the left we just have to subtract from the x property every frame, and if it goes off screen set it back to the right side of the screen.

Having tested it, you should have seen something like this (with the stars and text moving around the screen of course).

Step 4: Create the MotionTrail Class

Now it is time to make our MotionTrail Class. What this class is going to do is take a DisplayObject which is drawn to its own display (a Sprite) and using a couple filters, faded and blurred.

So make your new Class and let it extend the Sprite Class.

For a little pre-setup for the steps to come we are going to create a few variables, first the _display to store a reference of the Main Display, a BitmapData to draw to, a Rectangle the size of the stage and a Point in the top-left corner for the filters. Last up is an Array for the ColorMatrixFilter.

Since we made this class we have to go back real quick to the _mtDisplay variable and change it from the Sprite Class to the MotionTrail Class, along with inputting the _mainDisplay variable.

Step 5: ColorMatrixFilter Array

To create our Matrix for the ColorMatrixFilter, the basic idea is to fade the colors away so we slowly reduce all the values back to zero. Add this to the constructor.

This will multiply each value of every pixel by 0.92 and as it does this each frame it will get smaller and smaller till it basically reaches its limit at 0. So the closer the values are to 1.0 the longer it takes to reach zero, which means a longer trail (and vice versa: the closer to 0.0 the shorter the trail).

Step 6: ColorMatrixFilter and BlurFilter

Now we create the ColorMatrixFilter and the BlurFilter.

The ColorMatrixFilter is going to use the Array we just made and we are going to create two BlurFilters. I found that using two BlurFilters gives a nice pulse effect and it doesn't blur too slow or too fast, but if you rather have one that's fine too.

Add the variables for the filters first.

Create the Filters in the constructor

Step 7: Updating MotionTrails

Now it is time to create a function to update our Motion Trails. Make a function called update in the MotionTrail Class. To make the trail we have to draw the Main Display to the BitmapData each frame which makes the trail effect.

You should now have a trail if you run it, but of course Motion Trails fade away and we will make it fade away with the filters we made in the last step.

Step 8: Applying Filters

Now we can apply the filters to the BitmapData. We use the same BitmapData for the source, the _rect and _pnt variables for the sourceRect and destPoint respectively, and last is the filter we want to apply.

Since we have a few filters we don't want to apply all of them every frame because doing that would slow things down too much. Instead, we are going to switch the ColorMatrixFilter and BlurFilter to work in different frames and switch the BlurFilters the same way too.

To switch them around we are going to have a variable to keep track of the frame and use the module operator to check.

Now that the update function is finished we add it to our loop function.

Conclusion Testing and Extending

Awesome! We're finished with this Quick Tip and you can go ahead and test it out.

You should have gotten the same result as the sample swf and now you can try extending it. There are lots of different effects you can make, most of it if you understand the ColorMatrixFilter.

For example, you could fade the color of the trail to red by doing this:

Or you could also switch the colors making all the trails blue:

Thanks for reading. I hope you all learned something from this and it will prove useful in the future, possibly a cool new game using this effect.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.