We all want our files to download instantly and if not instantly at least quickly. The main reason why Flash has been so successful is because you can create files that are programmable, with stunning quality graphics that download quickly.
Flash is designed to create small sleek download files. The more aware you are of how Flash compresses files and the tools available to help you achieve this, the sleeker and meaner your Flash Movies will be.
In this tutorial I will look at those things which clog up a Flash file. Then I will look at what you can do to help create meaner and leaner files.
For demonstration purposes it is better to look at a specific Flash file, so I will use the movie below. Either download this or use your own Flash file.
The test movie above is designed to be lumpy! That is so we can look at what causes it to be slow and what can be done about it.
It has a small sound attached to the button and a Jpeg. Alas both sound and some types of pictures cause Flash movies to become large. The first thing is to find out where the lumps are and for that we have two tools: The Bandwidth Profiler and the Size Report.
Bandwidth Profiler
The Bandwidth Profiler gives shows a visual graph of where the problems are. You use it in test mode:
- Go to Control > Test Movie
- View > Bandwidth Profiler
Anything above the red horizontal line in the graph will take longer to down load than it will to play. Ultimately you want everything below the red line. What you have to remember is that this is only an estimate as some people have fast Internet connections and others have slow connections.
If you click on: Debug
You will see three default settings: 14.4 - 28.8 - 56k modems
The above movie is tested at 28.8k - that's right a very slow speed. Currently 56k modems are still very common but most of the time a 56k modem is not running at 56k but at a slower speed. It is always better to be pessimistic about download times.
If I go to the debug menu and select 56k the Bandwidth Profiler will change to reflect my optimism:
The difference is not huge. I am going to continue with the less optimistic approach and reset the modem back to 28.8k for the rest of this tutorial.
Frame 1
Each of the gray boxes in the profiler represents a frame of the Flash movie. No matter how small your Flash file is, frame 1 is never below the red line. That is because the plug in has to be loaded into the Browser. You will notice that frame 1 is 2kb in size. The delay is tiny. You can ignore it. To give you an idea. Every 10kb takes about 5 seconds to download on a 28k modem. Therefore I will have a 1 second delay before the movie will play. Remember that a 28k modem is a worse case scenario.
10kb = 5 seconds on a 28.8k modem
10kb = 3 seconds on a 56k modem
Frame 2 - Play Time
Once frame 1 has loaded there is nothing to stop frame 2 playing immediately. It is below the red line. What's more there are many other little red boxes below the red line. In fact by the time that frame 2 has played all the frames up to and including frame 7 have loaded. I know this by clicking on the top gray box in the second vertical line of the graph. When I click on it it goes dark red and displays information about that frame:
Streaming
This ability to download frames that are not yet needed to play is called streaming. Whenever possible Flash will download ahead of time.
Tip: Whenever possible put large objects such as sound or bitmap pictures down stream so that they have time to load.
Sound: Frame 31
Frame 31 is the next point that has a small bump above the red line. This means that there will be a delay in loading this frame.
The section below the Bandwidth Profiler gives me a visual representation of the selected frame. The reason that there is delay is because there is sound attached to the button. Sounds are always big and lumpy - even very little sounds.
You can see from the illustration above that the bump above the red line on frame 31 is small. On the graphs scale we can see that it is 200kb. It is too insignificant to worry about, particularly because there is a stop in this frame.
If somebody did click the button before the sound file was loaded the button would still work but they would not hear the sound. As many people surfing the Net don't even have speakers (particularly at work), and other will have them switched off they will not notice the difference.
Tip: Unless sound is an important part of the sites content (such as on a music site) use sound sparingly - as many people will have to wait to download something they will not even hear.
Event or Streaming
A sound attached to a button is called an event sound. This means that it must be downloaded completely before it will play. Once you have clicked the button the sound will play to the end no matter what else happens in the Flash file. Event sounds tend to be small sound effects such as: A click of a mouse.
A streamed sound is attached to the time line and streams. That means the sound will start to play even if only part of the sound file is loaded. Also if you click a button and move to a new section of the timeline the sound will stop. On computers with slow speed connections streamed sound may be of very poor quality, irrespective of the quality of the file embedded in the Flash Movie
Sound Compression
If you have a sound file that is too large you can use Flash to compress it.
- Close the Test Mode by clicking on the lower cross in the top right corner:
- Go to: File > Publish Settings
- Select the: Flash Tab
This tab will not be visible unless the Flash box is selected:
In the lower section of the Dialog box you will find settings which will further compress sound files:
- Click on the Set Stream button to compress files which play in the timeline.
Or
Click on Set Event buttons to compress the sounds attached to buttons:
In brief the lower the Bit rate the smaller the file size and lower quality the sound.
Note: For further info on compressing sound, click on the Help button which you will find just to the right of the Sound section of this dialog box.
Different Compressions Rates
Although you can have have different compression rates for both Event and Streamed sounds, you cannot set compression rates for individual sounds from within Flash. If you have a number of Steamed sounds (or Event) and wish to set the compression at different settings for each individually you will need to do this before importing the sound file into Flash. You can do this with most sound editing software.
Note: You can probably pick up some freebie sound compression software at a site like: www.tucows.com
The Advantage of Buttons
Even if the delay on this frame 31 would have been considerably more I would not have been concerned. That is because the movie stops and the viewer has to click to continue. This absorbs time and enables more of the movie to download while the viewer is busy clicking the button.
Tip: If you have a large Flash movie try to delay the viewer from reaching their destination by using buttons.
Images: Frame 32
Frame 32 is well above the red line. If I look on the scale it is more than 32kb. This is significant. If I drag the base line of the Bandwidth Profiler down I can see additional information. The frame size is actually 36kb:
The delay in frame 32 is caused by a Jpeg picture file that is located in that frame. It is the picture of the Publish Settings dialog box that animates onto the stage.
There are a number of things which can be done:
Jpeg Compression
If you go back to the Flash Tab Publish Settings dialog box you will find Jpeg compression:
- Close the: Test Mode
- Go to: File > Publish Settings
- Select the: Flash tab
In the lower section of the Dialog box you will find settings which will further compress sound files:
Jpeg compression rate.
The lower the number the smaller the file.
If I set the Jpeg Quality to 0 - frame 32 goes from 36kb down to 8kb. Of course the quality of the image also goes down as well. The reduction of quality is difficult to predict. Occasionally it is negligible. In this case it is terrible. You can see it in Test Mode:
Reducing the Jpeg quality is not the answer in this instance.
It is often better to go back to the original picture file, open it in PhotoShop or some other picture editor and try to reduce the quality there. In this case I should have saved the file as a GIF and not a JPEG. By selecting the correct image type frame 32 has reduced from 36kb down to 8kb with no reduction in quality:
Jpeg or Gif?
As a general rule of thumb pictures that have a lot of texture in them (such as photos) are better saved as Jpegs. Pictures which have large areas of continuous colour (such as graphics) are better saved as gifs. A good quality image editor like PhotoShop, will show what an image looks like as either a Gif or Jpeg and the difference the compression makes to how the picture looks. It will also display the file size for varying compression rates.
Tip: You can compress some images a great deal and it makes little difference to the look of the picture. Others will distort considerably as they are compressed. For this reason it is better to compress images individually before you import them into Flash.
Adding Frames
I can further reduce the delay by adding a number of frames to the initial animation so that frame 32 is shunted along, giving more time for the Jpeg to download:
Caution: Do not over do animation. Usually designers love creating animation but if the viewer has come to the site to find out what time his train leaves the station, he does not want to sit through a feature film animation, no matter how good it may be!
Size of the Jpeg
Another solution would be to make the original picture smaller. By smaller I mean by how many pixels (or inches/cm) it measures. The small in pixels the picture is, the smaller the file size will be. In my animation the the lower part of the image is never visible! To do this you need to go back to PhotoShop (or similar) and then re-import the file into Flash.
Swapping the Image
If you do edit your image outside Flash when you re-import it will over-write the previous symbol. If you do not want this to happen change the name before you import it to Flash: myPicture2.jpg
Once you have your new picture in Flash you do not need to re-do all the animation that you have created with that image. You can swap it.
- Double click on the image on stage.
- Continue to do this until you reach the original image.
You know when you reach the original image because the Property Inspector tells you:
- Right click (Mac - Ctrl click) and select: Swap Bitmap
What is a Bitmap ?
A bitmap is an image that has been created in a Paint/Photo type program or scanned into the computer and is made up of thousands of dots. Jpegs, Gifs and Pngs are all Bitmap images. Bitmap images usually have large file sizes.
Vector Images
Vector images are things which have been drawn in Flash or a Graphics program such as Freehand, Illustrator or CorelDraw. Unlike a bitmap the size (in pixels) of a Vector image does not increase file size! Vector images are almost always small file sizes !!
Even though vector images have small file sizes in comparison to Bitmaps you should be sparing with the use of Gradients and Alpha settings (semi transparency) as they may increase the file size if over used.
Cross Ref: For more detailed info on Images see tutorial: Pictures for the Web
Show Streaming
In Test Mode you can see what the streaming will look like. That means that Flash will emulate how the file will play when it is downloaded.
In addition the Bandwidth Profiler will show you what frame you are currently on and how much has preloaded or if there are places when the Flash movie stops as insufficient info has downloaded to play.
In Test Mode go to: View > Show Streaming
The fat green line shows which frames have downloaded:
You should try this as it gives you a live view of the download process. Set the speed of the modem you want to emulate in Test Mode. Go to: Debug
The Size Report
In the Publish Settings there is an option for Flash to create a size report which gives you all sorts of useful information.
Cross Ref: For information on Publish Settings see tutorial: Publishing a Flash Movie
- If you are still in test mode close it down and go back to Flash's standard editing mode.
- Go to File > Publish Settings
- Tick the Flash Selection Box:
- Go to the: Flash Tab
- Select Generate Size Report:
- Click on: Publish
- Click on: OK
This creates a text file which will be located in the same folder as your Flash file. You need to use a standard File management program, such as 'My Computer' to browse to that folder and double click to open the file.
When you have opened it you will find a long file full of numbers:
• The left column is the frame number.
• The next is the size in bytes of that frame.
• The third column is that total number of bytes for all frames up to that point.
• The final column is only relevant if you have scenes (frame number of the scene).
The top section of the report gives you similar information to that of the Bandwidth Profiler. The lower section gives information which is quite unique:
The lower section of the Size Report is a little confusing but if you bare with it, it has useful information:
Individual symbols, sounds, Bitmaps and fonts are listed. Even if you know that a particular frame is large, sometimes it is not apparent why. If this happens look at this section of the size report, occasionally a particular object maybe much larger than you might imagine. Look out for fonts in particular.
Note: Sizes are listed in bytes: 1000 Bytes = 1 KB
Fonts
Embedded Fonts
In the above file I selected to use a Font called: Verdana. Every letter that I type is embedded into the Flash movie and downloaded with it. Notice that only the specific letters that I have used are contained within the file. Also note that a capital letter is different to a lower case letter. As is a bold letter to a normal letter. Italic is different again and Bold Italic is yet another letter. Symbols (like $!"£$%^&*) are also downloaded individually. An entire font set is about 20KB !!
Once you have used a particular letter you can re-use it again as many times as you like. You do not need to download the same letter twice.
If I type the word: Font
I could then type: Font (no addition download time)
You can reuse letters as many times as you like - colour and size make no difference.
I could then type the word: ton (no additional download)
These letters have already been downloaded.
But if I typed: TON (additional download time)
These letters would have to downloaded separately as they are capitals.Note: The size or colour of a Font makes no difference to download time.
I am being silly - you don't have to worry about individual letters or words, I am just making a point. But do be aware of the total number of Fonts and Font styles that you use.
Tip: Restrict the number of Fonts and Font styles that you use.
Device Fonts
To a Flash developer a Device Font is a freebie. If you use device fonts they don't need to be downloaded with the Flash file. Device fonts are those standard Fonts which are installed on each computer. The problem is that each computer has slightly different device fonts. So from a layout - design point of view you cannot be certain what the font will look like. It is advisable to restrict the use of device fonts to standard paragraph text.
There are two styles of device font that you can use:
sans - usually: Arial or Helvetica
serif - usually: Times or Times New Roman
To use a device font select the text you want to change and in the Property Inspector and select either:
_sans or _serif
_sans and _serif are listed right at the top of the font list.
If I change the fonts in the above file the bottom section of the report changes to:
_sans Bold 20 bytes (not even 1kb - 1000 bytes would be 1kb)
This is a saving of 2KB on what is just a handful of letters !!
Warning - Text Dynamic/Input boxes
If you wish to have an input box that somebody can type into and it is set as a standard font - the entire type face will be downloaded increasing your file size by about 20kb !!
Either set the text box to a device font or restrict the number of fonts that are downloaded with the Input/Dynamic text box. You can do this by selecting the text box and then go to the Property Inspector and click: Character
Tip: Always be aware of the download size of Input and Dynamic text boxes. Check the Size Report to see which fonts are embedded.
Symbols
Make the use of Symbols your new religion. Once a Symbol has downloaded you can use it as many times as you want with no extra cost in download time. Never draw three squares on Stage always draw one square as a Symbol and place three Instances of the Symbol on Stage.
Remember that individual Instances of the same symbol can have different tints (colours), different levels of transparency, different sizes and be stretched, rotated or skewed.
Note: Use the Free Transform tool
to change an Instance's shape or the Property Inspector to change it's colour or transparency (alpha).
Cross Ref: To learn how to create symbols see tutorial: Tweening
Large Flash Projects
Linear or Interactive
A Flash movie can be either linear or Interactive in it's nature. If you create a animation you know that it will play from frame 1 in a linear fashion right through to the last frame. These types of files are easier to deal with and the combination of the Bandwidth Profiler and the Size Report in conjunction with Show Streaming enables you to control the lumps and bumps that are inevitable in Flash projects.
If you have a Flash Movie with a menu that enables the viewer to go to many different location within the Flash movie, the tools available are useful but limited. The problem being that Flash downloads in a linear fashion from frame 1 through to the last frame.
This is particularly problematic if the Flash file is very large. For example if you are creating a gallery site which has many dozens or even hundreds of bitmap images the file size would be massive. If I came to that site and wanted to see only one picture that was on frame 100 - I would have to wait till all the other images on frames 1 to 99 have loaded before I could see the picture I wanted.
The answer is not to build one Flash Movie but many little ones. You can use loadMovie and loadMovieNum to load multiple Flash movies one on top of another. So what happens when I want to go to picture 100 - it simply loads that movie on top of the one that I already have open. There will be a slight delay if there is a large Jpeg embedded in the movie but the wait will be a few seconds. With one large file there could be a wait of minutes.
This is a more complicated way of building a site but ultimately worth the effort as it is a much better experience for the punter. This is not like pop up windows, it is invisible. The viewer will not be aware that multiple movies are running. What's more one movie can control actions or events that are happening in another movie.
To learn how to use loadMovie and loadMovieNum see tutorial: Load Movies into Levels and Movie Clips
Preloader
Nobody wants to wait. But sometimes we all have to. It is always better to have a pre-loader that tells the viewer how long they have to wait. This does not need to be in seconds but can be a percentage of the movie loaded so far. Whilst the preloader is running it is worth giving the viewer something to read or an animation to view. I think that even quite small files are better with preloaders. Even as small as 20KB? The decision depends on what else is on the web page. I do not put pre-loaders on the Flash Movies in these tutorial pages as there is plenty to read so I feel it is not necessary. If the Flash movie is the main event you probably need a preloader. It is possible to create a preloader that does not wait for the entire Flash Movie to load but only part. Remember that as the viewer looks at the first sections of the movie the rest will be loading in the background.
Cross Ref: To learn how to create a preloader see tutorial: Preloader
Additional Compression
The more you compress something the more processing power it takes to open the file back up again. In general things which go Internet should be compressed as much as possible as the computers processor is almost always faster than the speed that a modem takes to download the file.
In the Publish settings Flash offers additional compression to all of the above. If your Flash movie is going online I suggest you use it. I have never noticed any additional reduction of quality by using this additional compression. The total file size can be reduced by up to a massive 20% !!
If you are in Test mode go back to Flash's normal edit mode.
- Go to: File > Publish Settings
- Tick the Flash Selection Box:
- Go to the: Flash Tab
- Select Compress Movie:
- Click on: Publish
- Click on: OK
When you have done this Flash does not tell you how much smaller the Shockwave (swf) file has become. You need to do that manually. Make a note of the file size before changing the settings, make the change, and then re-publish. Have another look at the file size. You can check the file size in any file management program such as My Computer. Make sure that when you return to check the size after you have made the changes that the information being displayed in the file management program has been up-dated. If need be close the program and then re-open it.
This is true for all the compression settings available in Publish Settings: Sound and Jpeg compression.
With a little care you should now be able to create the sleekest, meanest Flash movies online!! Enjoy.
