Dancing Dancing Dancing

Blog about dancing realted stuff.

Friday, December 03, 2004

Creating seamless background for Flash

I need to create a seamless background for a Flash animation so that the animation can run in an infinitely loop. You can see the end result at:

href="http://acdpcphoto2.netfirms.com/
dance2004photo/5_mongol/.

The animation itself is not that difficult to make. It does require some perpetration, like creating a Mongolian cloth (mentioned in my previous blog), create a mask for the cloth so that a scene of Mongol can scroll over it and yet still let the viewer to see the texture of the cloth. I was a bit disappointed when I found out that the mask of Flash cannot support gradient edge, yet the result was still OK after I changed the alpha level of the scene to about 55%.

The trickiest part is to create the seamless background. Here are my steps:

(1) I started with a photo taken by a friend (Fig 1), and then I cut the photo into two, and swap both sides (Fig 2). The purpose of this is to make sure that when I have two of this photo and I put the left edge next to the right edge, there should be no gap at all.

(2) Now that I have a seamless edge at both sides, I can do my Photoshop trick to blend the middle part of the photo. (Fig 3)

(3) Knowing that the photo is kind of short on width, and the photo will repeat too soon and thus destroy the smooth effect (viewer see the red riding too frequently), I have to double the photo and use Photoshop's Clone feature to remove the horses. (Fig 4)

(4) Now that I have the photo ready, I scale it and export it for use in Flash. I figured out that I SHOULD NOT export the graphic in JPEG because JPEG compression makes the left edge and right edge not matching anymore. I choose GIF instead.

(5) Once I have the GIF file inside Flash, it's just the matter of setting up the animation. Pretty straight forward.

0 Comments:

Post a Comment

<< Home