In this post we will be looking at the creation of a distorted panorama using a displacement map. The two examples below show the difference between a panorama without and with distortion (notice how in the distorted version the grid bends):

Some simple tricks to note up front:

• detecting the mouse outside of the panorama is done through an empty movieclip with a stage-sized hitarea and an onpress=null
• in order to displace the whole stage at once, you can set the displacement map on the root but you need to mask the stage through code (ie setMask)

We will be looking at a visual way to generate the required displacement maps using a 3D program and an imaging program. Ofcourse you can generate the required maps through code as well, but I like the visual way of doing stuff like this. It has its limitations of course. I have summed up the whole process in a slide show below. The different resources that are required can be downloaded below as well. Note that I’m still experimenting with this stuff:). Some of the slides refer back to previous posts.

The slides refer to some resources. The base map and difference calculation resources can be found here. The displacement maps can be retrieved from the downloaded source file, but now you know how to create them yourself as well. Let’s conclude with what happens if you tinker with the rendered image and force overflows etc:

I already blogged about this, but I saw that some items could use some more explanation. Please read “Getting the displacement you need” first for the basic idea.

In short the principle is:

• you have a reference map, say A
• you apply a distortion effect to the reference map created a distorted version of A say A’
• you calculate the displacement map that could transform A into A’ by calculating the difference in pixel value between A and A’

Some important points before we start:

Use a lossless image format (eg bmp). If you use lossy compression anywhere in the pipeline, you are throwing information away. This missing information results in artifacts in the displacement map. So, save all images as BMP for example. Import them into flash and set the properties to lossless.

We will now describe some steps in my previous post in some more detail. (more…)

In my previous post I explained the basics of displacement mapping, and I promised to tell something about getting the filter to do what you want it to do. Well, in order to do so, let’s look at the picture I showed you again, written a little differently:

+

*?

=

where ? is an unknown scale factor

It says that given a source image, if we apply a displacement map multiplied by some scaling factor, we will end up with a result image. If we look at the visual formula written like this:

ImgSource + DispMap*ScaleFactor = ImgResult,

we can see that with some basic math we get:

ImgResult - ImgSource = DispMap*ScaleFactor, in other words:

-

=

*?

This tells us that if we have the source image and the result, that we can in theory calculate the displacement map, but since the displacement map is related to the scalefactor, there is not a single result.

Would this simple idea gives us the one possible displacement map that caused the transformation of ImgSource into ImgResult?

(more…)

I was working on the Bitmap API and the Displacement map filter and although there was some info available on it, it takes some time to get it to do what you want.

Basically a Displacement map is a BitmapFilter, in other words: it moves around pixels.

If you would take a source image and apply a transform to each pixel from the viewpoint of the source image, pixels might end up all over the place and some pixels in the destination image might remain unset. This is usually the way we think about transformations though: we have a source, we apply a transform and get something new.

Displacement mapping is the same, except for the viewpoint of things, we define each pixel in the result through a displacement map which harvests pixels from a source image. With displacement mapping we have 3 maps/images: a source image, a displacement map and a result image.

+

=

(more…)

Yeah I know, it’s a technical blog, but hey I warned you about the odd post now and then. Well there it is :). Alive and kicking. 12 weeks and growing. In the left bottom post it’s even waving at you .

Happy new year all! The first post in this new year is something I see a lot of beginners run into. They create a flash movie which has to load some resources and they simply go like:

   obj.loadSomething("mycontent.swf");

Running the sample locally works fine ofcourse since everything is where you expect it to be.
However, after deployment your swf might be loaded into another swf, or loaded from a html page at another location and your content suddenly breaks. Why? Since “mycontent.swf” was a relative location.

So how do you fix it? Well there are several solutions:

1. use a complete path
2. use a resource file to define a content path
3. use _url to determine where your swf actually is and thus where your content is

Option 1 isn’t very good, if your content is moved to another folder on the webserver, it breaks again. Option 2 does not actually solve the problem, since now you have to find the resource file :). Let’s go with option 3.

(more…)