Create Random Torn Photos with Actionscript 3.0

One of the most powerful sets of classes in ActionScript 3 revolve around BitmapData and pixel manipulation.

In this tutorial we are going to look at dynamically creating a photo with torn edges by compositing several images together.

Requirements

I created this tutorial using Flash Builder 4 Beta but you can easily use Flex Builder 3 or Flash CS 3/4.

Pre-Requesites

You will need to download the PSD file as well as the folder of images included in the source files package. You should also have a basic understanding of the Bitmap, BitmapData, and the Loader class. I will explain in each step what is going on so if you have never used the Bitmap or BitmapData class you should be fine. Here is an example of what we will end up with, refresh this tutorial to see different masks:

Before we get started lets take a moment to discuss exactly what we are going to do:

We will need to load in our photo.

Then we need to load in our supporting images: an alpha mask, image texture, and edges mask.

We will copy over the BitmapData of our photo using the alpha mask to cut out an image with transparent edges.

Add 3 layers of the texture image with a blend mode set to multiply.

Cut out edges from our texture using the edges mask image.

Rinse and repeat.

Now that we have a plan, lets get started!

Step 1: Creating A Preloader

We are going to set up a simple preloader since each image we generate is comprised of several “layers”. Create a new project called TornImageDemo and open up the Doc Class.

As you can see we are creating a simple “loop” through our preload, load and onLoad methods. We have also setup an array that contains each of our images we will preload. After setting up the stage we call the preload method and check the length of our preload array. If there is an item in the array we call load and begin loading it. Once it is loaded we save it to a dictionary then recall preload. Once preloading is done we call init and are ready to go. Lets talk about each of the images we are going to load.

Step 2: Creating the Image Mask Template

Lets open the PSD you downloaded in the Pre-Requesists part of this tutorial.

As you can see I have set this up to show you what our end result will look like in Flash. If you check the layer comps you will see how each layer of the photo will need to be exported.

Lets talk about what each layer does:

Preview represents what the image will look like in flash when we apply the masks and textures. You do not need to export this.

Photo Mask represents the alpha mask we will be using to “cut” out transparent edges from photo. Alphas masks work just like regular masks except you use them when calling copyPixels on BitmapData.

Texture represents the actual photo texture we will be using to add some detail to our photo. The texture is also where we will get our edges from when using the edge mask

Edges Mask represents another alpha mask that we’ll use to cut out the edges around the photo. Edges represent any folded over pieces of paper or small tears around the edge of the image.

We will need to save out these layers and put them in our project. The Mask and Edge Mask should be PNG-24s and the Texture can be a JPEG. The images zip (you should have downloaded in the pre-requesites section) has an images folder that contains all of our outputted images for this template along with 2 others so we can randomize the mask we apply to the image. Here are some screen I took when creating this template showing you my file settings:

This is the photo mask as a PNG-24.

This is the photo texture saved out as a JPEG. Notice how it is not transparent? This is because we will use the above alpha mask to cut out the parts of the image we don’t need.

Our final image is the edges mask. This is similar to our photo mask and should be a PNG-24. Once you unzip the images file, move it into your bin-debug folder or wherever you compile your final SWF. As you can see I have broken up each folder into skinX and in each set is a photo_mask.png, photo_edges_mask.png,a photo.jpg and photo_texture.jpg.

Step 3: Applying the layers

At this point we have hardcoded our class to load in mask skin1. Do a quick build and check your browser connections to make sure the photo, mask, edges mask and texture are correctly loading.

Sometimes you have to play around with the local security settings of the Flash Player to enable local file access to the images. Likewise it is important to have full security access to these images when running this from a server them since we will be manipulating their BitmapData. Making sure you have a cross domain file is key when deploying these types of projects. Now that everything is loading lets add the following method:

Lets talk about what is going on under the hood of compositeImage. As you can see we are pulling each image out from the dictionary, and either copying out or drawing over the BitmapData if our main photo. Lets go over a few of the main actions going on here: First we need to set a temporary bitmap to store our composite image in.

Next we will copy over the photo’s Bitmap Data using the photo_mask.png as an alpha mask. As I mentioned earlier this acts just like a mask and insures that the BitmapData we copy over has transparent edges.

// Copy pixel data from the photo over to the container using the layers[MASK] to cut out the shape
imageComposite.copyPixels( layers[PHOTO], rect, pt, layers[MASK], null, true );

Once we have a foundation of our photo we can apply the texture. Here we multiply the texture 3 times to our image to create a little depth and fill in the wrinkles of the photo.

All done, see how easy this is. Of course I am sure this can be optimized even further but for the purposes of this quick example the effect works perfectly.

Step 4: Randomize

Since we know we have 6 sets of skins (in our images folder) it is really easy to randomize how our photo gets rendered. Simply replace the following line in our TornImageDemo constructor:

skinPath = "/skin1";

with the following:

skinPath = "/skin"+Math.round(Math.random()*5+1)+"/";

Now when you recompile and hit refresh a random number is added to our skin folder.

Conclusion

As you have seen, using Alpha Masks when copying pixel data is an incredibly easy technique to use. To give you an idea of how much file size this technique saves us let take a quick look at how big a PNG-24 from PhotoShop would be.

The above image from PhotoShop came out to 478k

This image was dynamically created from the following images:

photo_edges_mask.png – 16k

photo_mask.png – 12k

photo_texture.jpg – 20k

photo.jpg – 56k

total – 104k

As you can see, even though we have loaded up 4 times as many images as the PhotoShop PNG, we have actually saved 374k. Also we can now apply this effect to any number of images on the fly verses creating a transparent PNG each time by hand. I hope you enjoyed this simple tutorial and I would love to see how you use it in your next project. Feel free to leave a comment with a link to what you have done.

Hello, my name is Jesse Freeman and I am Brooklyn based Flash Developer/Artist. I have been a Flash Developer for over 7 years now and an interactive artist for about 10 years. Some of my clients include VW, Tommy Hilfiger, Heavy.com, MLB, the New York Jets, HBO and many more. I have a Flash Blog called FlashArtofWar.com as well as my portfolio FlashBum.com. Follow FlashBum on twitter @theflashbum.

Ever wondered if you could visualize your website in 3D? Well, here’s one such Firefox extension that allows you to do so. Tilt is a Firefox add-on that lets you visualize any web page DOM and provides the relationship between various parts of a website in 3D.

User Interface Design in C# Windows Form Application From Scratch In this C Sharp tutorial you will learn user interface design in C# application. This step-by-step tutorial will help you deeply understand…

In this second part article you will learn how to build an image gallery that will load images from a web server. I decide to call it “Intelligent” because you don’t need to configure any XML or flash file. Just put the Flash movie and the images on a server and they will be loaded automatically. Nice ah?

There are many popular open source tweening engines in the Flash community today. Numbered among these are Tweener, TweenLite/Tweenmax, Tweensy, and GTween. This is a short look at the capabilities of newcomer to the scene: BetweenAS3. BetweenAS3 is the tweening engine brainchild of Yoshihiro (yossy) Shindo and is available as part of the Spark project (i.e. it is brought to us by one of the same group that brought the world the FLARToolkit for Augmented Reality in Flash and countless other goodies).

In this article you will learn how to build an image gallery that will load images from a web server. I decide to call it “Intelligent” because you don’t need to configure any XML or flash file. Just put the Flash movie and the images on a server and they will be loaded automatically. Nice ah?

Today we start a 9 part tutorial series on creating a Shoot’em’Up game. We will cover all the necessary topics to create it from scratch, which will help you to understand and apply these guidelines to other projects. Ath this first part. we look at getting the Away3D engine up and running by creating a UIComponent that will contain and initialize the necessary Away3D components.

Flash it’s a powerful application and can be really complex, but even beginners can create a cool menu for demonstration or for use in a personal site. The menu that we will create is simple, but the swirl animation is something that you don’t see everywhere, for that I’ve decided to explain one way to make an animation of growing swirls without any Action Script code.You will also learn how to import artwork from illustrator where I’ve pre-made the graphics, the work is very simple and the result will be very cool.

Possibly the hottest thing to hit the Flash community since the advent of several excellent 3D engines is the recent debut of 3D physics engines. Here we’ll examine a way of using one of the more popular 3D engines, JiglibFlash, in conjunction with the prominent 3D engine Papervision3D to create a bowling game.