Replacing images in a Flash movie

I recently purchased a WordPress template from TemplateMonster for use on a client website. The template was recommended by the client himself to me, and he was pretty happy with the template applied to is site after some customizations to the design of the template.

However, he later came up with a request to replace some images used in a Flash movie on the template. As TemplateMonster’s templates come with the source Flash .fla files, I thought this should be a breeze, which was not to be as I found out later.

If you search for the phrase “replace images in Flash movie” on google, you would come up with helpful links, which basically suggest you to:

1. Figure out the image to be replaced in the Library.
2. Right-click it and select properties.
3. On the properties dialog, click Import.
4. Browse to the new image and select it. You should immediately see the new image in the Properties’ dialog thumbnail.
5. An additional advise is to ensure that the new image’s dimensions are the same as original one’s so that it displays the same on the stage (without any distortion).

The above steps are for Flash CS 4, and should be similar for other versions of Flash. I also knew of the same steps. However, as it turned out, after executing the steps precisely, the area where the image was used on the movie turned-up as a blank area when the .fla file was published (i.e. it just did not show-up on the published flash movie). No matter how many times I executed these steps, the image did not show up on the movie.

So, then I tried to figure out the image’s usage in the movie to see if I need to replace the image for each independent usage. I discovered that the image was used at a single place in the Flash file, inside a Movie Clip. Having found this out, I then tried the following steps which actually worked:

1. Figure out the Movie Clip in the library which uses the image.
2. Right-click the clip and select Edit.
3. While this movie is in Edit mode on the stage (and without making any changes to it), find out the image to be replaced in the Library.
4. Right-click it and select properties.
5. On the properties dialog, click Import.
6. Browse to the new image and select it. You should immediately see the new image in the Properties’ dialog thumbnail.
7. When you click OK on the Properties dialog, the new Image should also get updated (automatically) on stage in the Movie Clip, where the image is being used.
8. An additional advise is to ensure that the new image’s dimensions are the same as original one’s so that it displays the same on the stage (without any distortion).

When published, the image showed up fine in the flash movie. So, the basic idea was to ensure that the Movie Clip that uses the image to be replaced is in Edit mode on the stage, when you import & replace the image from its Properties dialog.

I wonder why keeping the Movie Clip in edit mode on stage should make a difference to the process of replacing the image in the library. None of the google results that turned-up mentioned this, and I spent a couple of hours to figure out this solution.