The age of high speed Internet connections — at home, in the office, and on the road — has certainly diminished developer angst over the creation of high quality, multimedia-intensive online learning. While the concerns that we have about quality versus file size are less now than they were in the days when dial-up was dominant, there are still benefits for keeping file sizes down when building in Flash 8.
Embedding video segments, audio segments, and graphic files into the final Flash file (SWF) has been a standard practice for a while, and splitting your movies up into smaller chunks is a best practice. However, as the demands for higher quality video and audio over the Web keep increasing, the break-up strategy has an impact on the final e-Learning project. Higher quality means larger file size, which means longer load times. A CD-quality audio file ripped to please the most demanding audiophile will be much larger than an audio file optimized down to mono and a lower quality.
For several years, my solution to this problem has been to keep the final Flash files (the SWF files) small and to dynamically load only the requested files. There are at least three advantages to doing things this way:
- The developer doesn’t have to
manage and maintain a huge source file (
- A single “control” Flash file (the SWF) that is responsible for loading menus, toolbars, help bars, and for individual module control allows your team to develop the content independently, and to control it all using this single SWF.
- The learner doesn’t want to wait for content to load. Even with the use of “pre-loaders” (which is mandatory even for smaller SWF files), some learners will rate a program as being lower quality if there are several long content loads.
Let’s set the file size issue aside
for just a second. Projects that contain lots of media, graphical, and text
elements can be a real pain to edit and maintain, especially for non-Flash
users (the typical content authors and subject matter experts). Using the
traditional embedded method, it doesn’t matter whether or not you have broken
the files into smaller, loadable SWF movies. (See Sidebar 1)
Breaking them up doesn’t address the edit issues. To make changes, the person
doing the editing must crack open the source file (the
The author has assumed that readers will have some basic knowledge of Flash. For the sake of less-experienced readers, here are two explanations to keep in mind.
A SWF (“filename.SWF”) is a Flash file. This is the one that the learner downloads and “runs” on his or her computer. It is not editable (see the following explanation of FLA). Flash files are often called “movies” but this can be misleading. A SWF may represent animation, plus sound, delivered to the user. A SWF may also contain applets that control the delivery. In this article, the author shows how to create a SWF that delivers text, media, and other SWFs.
A FLA (“filename.FLA”) is an editable source file. It often contains all the text, animation, graphics, and ActionScript that will go into the Flash file. You must have Flash MX 8 installed on your computer to manage and edit these source files. However, by following the instructions in this article, you can separate your content (the text, animation, graphics, and so on) and place it in external text and media files that your authors and Subject Matter Experts can edit without having to republish the FLA as a new SWF.
While this is standard practice (not necessarily best practice), it is not the best way to build your e-Learning. As e-Learning developers and producers, we tweak content and materials constantly — text gets updates, animations change based on updated text, and, in some instances, we use and reuse content multiple times. It is with this in mind that I suggest keeping certain text and media files out of the final SWF file. By uploading the graphic, text, and media files to the same directory as your Flash file, you can keep the overall file sizes smaller, make download times shorter and make editing your Flash files easier — even for non-Flash developers.
The rest of this article will show you the process for loading text (including HTML-formatted text), graphics, other SWF files, and media files into your project at run time. These files will stay separate from the running SWF, but will come into the file using ActionScript and components.
Loading external JPG images into Flash
JPG (or JPEG) images are a common Web site feature, especially if you are using color photographs in your site or e-Learning project. Odds are you have a bunch of them already created. Why recreate them or bring them into the source file when they are perfectly happy sitting outside on the Web server? I’ll start by showing you how to use a component called “Loader” to allow you to leave those images on the server. (See Sidebar 2 below for an important note.)
One thing you have to keep in mind as you apply the procedures in this article — you cannot save your images as “progressive” JPG files. A progressive JPG image is one that loads into the browser window in “stages” so users see a pixilated version of the image that becomes clearer and clearer as it loads into the browser. Making your images progressive was standard practice in the days of slow connections. It allowed your users to see “something” before the image finished downloading to their browser window.
In most image editing software, like Photoshop or Fireworks, you must manually assign the image to be saved as progressive, so I would suspect that most of your images are saved as standard JPGs. If you encounter errors with the technique explained in this article, you may have images saved as progressive. Simply open them up in your image editing software of choice, and re-save them as non-progressive JPGs.
Flash components are custom-made movie clips with the complex ActionScript created for you. Components allow you to quickly add cool elements to your project without all the hair-pulling and debugging involved in programming it yourself. The advanced functionality hides behind a simple user interface. Some examples of the most popular components include text scrollers, radio buttons, and media players (which we’ll also use in this article).
For this section, we are going to use the Loader component. This container can display a Flash movie (a SWF) or a JPG image. It pulls external content into a Flash movie. This means you can play a Flash movie inside a Flash movie, as well as showing diagrams, photos, logos, and other graphic content that is not in the Flash file (as long as it is saved as a JPG).
Step by step instructions
Begin by creating an empty folder on your desktop. We will be storing the source file and the JPG file in this folder.
Open Flash 8 and create a new Flash document. You can keep all of the default settings. Save this file into the folder you just created on your desktop.
If your component panel isn’t open, choose Window > Components from within Flash. The Components panel will open on the right side of the screen. The Loader component is located in the User Interface section of the Component Panel. Click on the Loader component and drag an instance of this component to your stage. A box with the text “mx.controls.Loader” in it will appear. (See Figure 1)
Figure 1 The Loader component looks like this on your stage.
With the Selection Tool (black arrow) select your Loader instance and access the Properties panel. Click on the “parameters” tag and the panel will change, allowing you to alter the properties of the component.
Move a JPG image from your hard drive into the newly created folder on your desktop. Remember the name of this image file — you are going to use it in the component inspector from within Flash.
Back in Flash, edit the “contentPath” field and put the name of your image into that spot. Click on the empty location and it will allow you to type in the name of your image, including the extension (JPG). In Figure 2, my image is called smSpot001.JPG.
Figure 2 Enter your image filename in the contentPath field of the Parameters tab.
Once you have this completed, save and test your movie. (Control > Test Movie). Your image will load into Flash.
The image will load into the component regardless of pixel dimensions. If your component is 100 x 100 and your image is 250 x 250, the image will display at runtime as 100 x 100. You have to change the Width and Height values from the component inspector to match the size of your original image. (The scale tool will work just as well.) However, if you don’t know the original size of your image, change the scaleContent parameter to “false” — the image will load in at its original size.
If your e-Learning project requires you to use the same images in multiple projects, this technique can be very helpful. Also, if subject matter experts or authors are supplying you with images, you can use this strategy when those images will arrive at a later date. Knowing the pixel size of the images to be loaded allows you to create a placeholder image until the real one arrives. Replace the placeholder image with the final image and you don’t need to open Flash. You could also provide graphic designers with a list of file names and pixel dimensions, and then send the developer all the images at one time. Uploading the images to the Web server enables Flash to find them and dynamically place them in these components at run time.
ActionScript gives additional flexibility
You can also use ActionScript to pass the name of your image to Flash. This allows you to turn the image name into a variable, or manipulate the image name in a number of other ways. To accomplish this, we have to give our component instance a unique name. Once it has a unique name, you can manipulate the instance of the component using ActionScript. For this test, let’s give our component the name “imageLoader”. In this test, we are going to load our image through ActionScript. Make sure that you remove the name of your image from the contentPath parameter as well. (See Figure 3)
Figure 3 The component’s new name is “imageLoader” and the name of the image in the contentPath parameter is now blank
Click once on the only Frame in the timeline and access the Action panel. We are going to edit the property of the contentPath parameter using the following code:
imageLoader.contentPath = “smSpot001.JPG”;
The dot notation above tells Flash to load the graphic file into the clip named imageLoader. If you save and test your movie, your image should load as expected.
You could also use this technique with variables so that you can use external text files to name your images.
imageLoader.contentPath = imageVariable;
Then, from within your external text file, you declare the imageVariable value and the custom image displays. While this is getting a little bit ahead of ourselves, it is a great introduction to the next tutorial.
