Many of you are already familiar with Flash’s runtime support for SWF and JPG files. If this is new to you, runtime support simply means that you can load a SWF or JPG movie dynamically after the main Flash movie has been compiled. Flash 8 now allows you to load GIF and PNG files as well.
Loading SWF and JPG Files
Before you begin loading GIF and PNG files, let’s review how to load SWF and JPG files. For the following example, I created a dynamically animated Flash movie and a JPG background graphic.
The Flash movie is a static image of cog, which was converted into a movie clip. The movie clip is labeled “mc” and the following ActionScript was added to dynamically animate the image:
var numVal:Number;
numVal = 1;
function myTimer():Void {
mc._rotation = ++numVal;
trace(numVal);
}
var intervalID:Number = setInterval(myTimer, 50);
Now, the trick for our demo to work is load both of these files into a third Flash movie at run time.
Here’s the script you can write to perform this dexterous act:
var container:MovieClip = createEmptyMovieClip(“container”, 20);
var mcLoader:MovieClipLoader = new MovieClipLoader();
mcLoader.addListener(this);
mcLoader.loadClip(“logo.swf”, container);
function onLoadInit(mc:MovieClip) {
trace(“onLoadInit: “+mc);
}
var containerTwo:MovieClip = createEmptyMovieClip(“containerTwo”, 10);
var mcLoaderTwo:MovieClipLoader = new MovieClipLoader();
mcLoaderTwo.addListener(this);
mcLoaderTwo.loadClip(“jpgBackground.jpg”, containerTwo);
function onLoadInit(mc:MovieClip) {
trace(“onLoadInit: “+mc);
}
For this to work, you’ll need to ensure that the main movie and the loaded SWF and JPG files are all in the same folder.
As you can see from the script, you need to create an empty movie object and a loader object, and then load the objects. The whole process is executed when the onLoadInit function is called, which is at runtime.
The advantage of splitting your objects up like this is that you can more easily change parts. For instance, you may want to change the background to a different color. This is easy to do at run time.
Loading GIF Images
The GIF file format, which was created by CompuServe in the ’80s, is arguably the most popular format for images used in Web sites. JPG is certainly a very close second.
GIF supports a color palette of a maximum of 256 colors, which means that a GIF image can’t replicate a photograph. It does, however, create a very small file. GIF images have another benefit to them. You can elect colors in the image’s color palette to be invisible, which adds transparency to your images. This is something JPG images simply can not do.
GIF images are also often used in those annoying, blinking, animated ads that you see all over the Web. The animation effect is created by the GIF rendering software playing back a series of GIF images, very similar to a flipbook animation sequence. Flash does not support animated GIFs. I was given a mumbo jumbo reason from Macromedia (something about playback engines that aren’t compatible). Whatever the reason, I hate animated GIF images and I’m glad Flash doesn’t support them.
It’s easy to create GIF images for use in your Flash movies. I use Fireworks, but you can create GIF images using any number of graphic programs, such as Paint Shop Pro, Painter, Photoshop, Expression Graphic Designer, and so on.
Add the following ActionScript to your main movie:
var containerThree:MovieClip = createEmptyMovieClip(“containerThree”, 30);
var mcLoaderThree:MovieClipLoader = new MovieClipLoader();
mcLoaderThree.addListener(this);
mcLoaderThree.loadClip(“gif.gif”, containerThree);
function onLoadInit(mc:MovieClip) {
trace(“onLoadInit: “+mc);
}
As you can see, the image is a GIF image, the transparency has been maintained, and you are loading it dynamically in the main movie.
Loading PNG Images
A PNG file is, in many ways, the best of JPG and GIF merged together with a few extra features thrown in for luck. You can, for example, create transparent layers in a PNG image. The following image is being created in Fireworks and has transparency applied to it:
Now, add the following ActionScript to load the file into your main Flash movie:
var containerFour:MovieClip = createEmptyMovieClip(“containerFour”, 40);
var mcLoaderFour:MovieClipLoader = new MovieClipLoader();
mcLoaderFour.addListener(this);
mcLoaderFour.loadClip(“png.png”, containerFour);
function onLoadInit(mc:MovieClip) {
trace(“onLoadInit: “+mc);
}
Here, you have a plain Flash movie that has SWF, JPG, GIF, and PNG files loaded dynamically at runtime into it. Now that Flash 8 offers runtime support for all of these file formats, you can effectively reuse many of the image files already on your Web site with your Flash applications.
Matthew David has been developing Flash-based applications for more than six years. Examples of his work can be found at his web site http://www.matthewdavid.ws.
Matthew’s most recent contributions include content for Flash 5 Magic and Inside Dreamweaver 4. You can also see him popping up in many online magazines such as Sitepoint.com, Windowatch.com, and UDzone.com.
