Advertisement
  1. Code
  2. Effects
Code

Replicate an Active Camouflage Effect with Flash

by
Difficulty:IntermediateLength:LongLanguages:

Active camouflage is a sci-fi concept, usually seen in the form of a suit that allows the wearer to become almost invisible. It can be seen in movies such as Predator and Die Another Day, and games like Halo and Crysis.

This tutorial shows you how to achieve such an effect in Flash by animating a displacement filter using a sequence of bitmaps. Not only is the effect cool, but this technique is rarely seen in online tutorials.


Final Result Preview

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


Step 1: Displacement Mapping in Flash

Displacement mapping is a texture map that is used to modulate the displacement strength. Displacement means literally moving the pixels of a surface out of place. In most 3D applications, the pixels are displaced along the surface normal. In Adobe Flash, the displacement happens in 2D space, along the X and Y coordinates of an image.

Displacement filters in Flash are usually animated by dynamically changing their intensity (the scaleX, and scaleY parameters), changing the position of the displacement bitmap (the mapPoint parameter), or by manipulating the color channels. This tutorial will further explain these techniques, but we'll also study a different one, which uses a bitmap sequence to draw a new displacement map on every frame.

Example of displacement along the surface normal.

Example of displacement mapping in flash, along the X and Y axes.


Step 2: Flash Document

Open a new document in Flash and set up the size to 550x368 so it matches our background image. Set the frame rate to 48fps. The displacement filter is actually going to run at 12fps, but in case you want additional animation later on it would look smoother at 48fps.

Click File > Publish Settings > ActionScript 3.0 Settings and turn off "auto-declare stage instances".


Step 3: Import the Background

Import rainforest.jpg to the stage.

Press Ctrl+K to align and match the canvas size. This is going to be our background image.

Now with the image selected, press F8 to convert it to a Symbol. Select "Movie Clip" in the type menu.

If the properties window is closed, press Ctrl + F3 to open it. We are going name the movie clip that was just created. On the instance name field, type "bkgd_mc".


Step 4: Import the Bitmap Sequence

Now press Ctrl+F8 to create a new movie clip altogether. We aren't naming this just yet. First we're going to import the bitmap sequence inside this movie clip. Go to File > Import > Import to Stage. Select the first image of the sequence, which is called " pred0001.jpg " . Flash is going to ask if you want to import all images in this sequence. Click yes.


Step 5: Convert The Bitmap Sequence

You will notice that each bitmap is placed on a keyframe along the movie clip time line. Starting on frame 1, select the image and press F8 to covert it to movie clip. Do this on every frame until the end of the sequence. Do it in order, from first to last and make sure you don't skip any frames, otherwise it will mess up the animation.

Once you are done, each key frame should have one movie clip containing a frame of the character's face. Select frame one again and press enter to see the animation.


Step 6: Distribute to Layers

Select the movie clip on frame 1. Right-click and distribute to layers. Again, do it to all movie clips on all frames. When you're finished you will no longer be able to see the animation, only the image on the top layer.


Step 7: Drag the Movie Clip to the Stage

Press Ctrl + L to open up the library, and drag "Symbol 2" to the stage. In the properties tab name this instance "displ_mc". This movie clip will be used in our displacement filter.


Step 8: Create the Document Class

We are going to write the code for our displacement map filter inside a document class file. Create a new Actionscript file and name it "pred_as3". Now paste this code:

Go back to the flash document and name the class pred_as3.

As you can see we've already imported all the classes that we'll need in this tutorial, now let's continue writing the document class. Add this code to it:

We are stating a few variables that will be used later on. They need to be declared before the class constructor if they are to be used by more than one function in the document class.


Step 9: Create The Displacement Filter

Right below the last line, we begin to write the parameters and the constructor of the displacement map filter.

So we've set parameters for strength, size, position and RBG channel. Let's take a closer look at each one of these parameters..


Step 10: Displacement Strength

As mentioned earlier, displacement in flash is only possible along the X and Y axes. The parameters that set the displacement strength for X and Y are scaleX and scaleY respectively. In this tutorial we're going to use the same strength on both X and Y axes, so we're using the same variable strength1 for both parameters. Below is an example of displacement along the horizontal axis, with scaleY set to zero (left image), and the vertical axis, with scaleX set to zero (right).


Step 11: Size of the Displacement Map

Notice how the size is set to 320x240. We already know the size of the bitmaps in the animation and the constructor must have the same size as them. If the value in the constructor is greater than that of the bitmaps, there's going to be displacement in areas where it should not happen. The #808080 gray around the character's head is a neutral color, on the other hand any area that is empty, or a transparent bitmap would actually displace the background image.

Example of the value set in the constructor being larger than the actual displacement map: The empty areas displace the background.


Step 12: RGB Channel

The displacement filter uses only one of the 3 RGB channels on a bitmap for each axis. When using a colored bitmap as a displacement map, each channel will give very different results as shown in the example below. In this tutorial we're using an image in shades of gray, so the channel is irrelevant. ComponentX and componentY are set to green, but the same effect would be obtained using the red or blue channels.

The different results obtained using the green channel, red channel or the blue channel.


Step 13: MapPoint

The parameter mapPoint sets the position of the displacement map. The position is relative to the object that it's applied to, and not the stage. By setting the position to (0,0), the displacement map appears in the top left corner of our background image, which won't always coincide with the top left corner of the stage, as shown below.

The mapPoint parameter is relative to the object, not the stage.


Step 14: Apply The Filter

Now let's apply the displacement filter to our background image "displ_mc". The displacement filter is pushed into an array of filters, and we do this inside the class constructor. We're also adding our two main movie clips to the stage with the addchild method. In AS3 the class constructor is the first function to be executed in a document class and it's called automatically, so it's better that any functions or methods that need to be run upon loading are called from inside a class constructor.

The last line of code is calling a function that hasn't been written yet. As the name suggests this function will store all animated movie clips in an array. So let's go ahead and write that now.


Step 15: Store The Animation Into an Array

So we created a displacement map filter and applied it to the movie clip, but we haven't added any bitmaps to the filter yet. We are going to do this in two steps: First we are going to store the animation in an array, then later we will add this animation to the filter.

This function uses a for loop to scan all the movie clips inside displ_mc. We want the animation frames that were converted to movie clips earlier in this tutorial. Remember when I said to convert them frame by frame? We did that so the frames could be sorted properly and later on accessed using the getChildAt() method. Since we didn't name any of those instances, Flash sorts them internally by order of creation. If the bitmaps were randomly converted into movie clips, the animation would never play correctly. So the frames can now be pushed into the clipcont array, one by one.

The code so far should look like this:


Step 16: Animate the Displacement Filter

Now that we have the animation ready to use, let's put it in the displacement filter. We are going to access the clipcont array with a "time released" loop using the Event.ENTER_FRAME class. Every 4 frames, a new bitmap in the array is accessed, and then applied to the filter using the draw() method. After the last frame in clipcont is drawn, the loop starts over and the first frame in clipcont is drawn. It's an endless loop.

Copy the above lines to your actionscript file. Now let's make this run by adding an event listener to the class constructor.

Update the class constructor with the addEventListener method. Now the animate function has been added to the stage and is called on every frame. Test the effect pressing Ctrl + Enter. You should see the animated face on the top left corner of your movie.


Step 17: Make it Follow the Mouse

We have an animation loop running in the corner of the movie. Let's make the displacement map follow the mouse, this way you will be able to see how the active camouflage effect looks against different parts of the background. Paste this line inside the animate function:

This way we update the displacement map position on an enter frame basis using the mouseX and mouseY properties. Press Ctrl+Enter to test it. The head should now follow the mouse.


Step 18: Change the Filter Strength

In the last step of this tutorial we are going to play a little bit with the strength of our filter, increasing the value of the scaleX and scaleY parameters over a period of time, then decreasing back to the initial value. What we're trying to achieve with this is to make the effect look more dynamic and... visible. While the whole point of a camouflage in real life should be to make things less visible, what we're trying to do here is to make it look cool. Let's freeze the animation so you can understand what I'm talking about. In the animate function, replace the line

with this line instead:

Instead of drawing the animation, we're telling flash to draw the same frame over and over again. Press Ctrl+Enter to test it.

The effect looks completely static and boring. Let's give it some movement. Paste the code below inside the animate function:

Now test it with Ctrl+Enter.

See how much better it looks? Ok so you can now restore the animation, fix the line that has been altered:

This effect is also helpful in case you want to attach a static body to the facial animation later on. It would look more active next to the bitmap animation.


Conclusion

The file may be a little heavy if you use jpeg quality 100, which is what I recommend. In a lower quality the effect loses a bit of its charm. If you want a smaller movie you can compress the images even more in photoshop, but make sure you're keeping the color scheme right. The color around the character's head should always be #808080 or you'll see a box around it.

So this is it. The first tutorial I've ever written, it was fun doing it and I hope you had fun reading and make good use of it. I'd very much appreciate your feedback. Thanks for reading!

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