Publishing your movie - the difference between a .fla and a .swf file

You've made your flash site, banner, or just an element of your site made in flash. Now what? How to integrate it into your pages? Follow this tutorial and you shall learn how.

FLA - the source

While working on a document, when you save it, you save it as a FLA file. This is the source file, containing all the materials you are going to show in your flash movie. But this file doesn't get into your HTML pages. This is just the source.

When you press CTRL+ENTER (Command+ENTER on a Mac) or choose Control > Test Movie you instantly create a SWF file, in the same folder where you saved your FLA file. This is the document that will be shown on the web.

Notice the difference in file size: FLA is always bigger than the SWF. SWF is the compressed movie, made for web.

SWF - the movie for the web

The file extension SWF means small web format, which reflects its nature - you can create a nice and complex animation with lots of effects in it, and it will be a small file, especially if you compare it with other media formats out there on the web. Also, it is highly interactive, unlike any other media on the web.

Remember that if you, say, import an image into your FLA file, it will automatically be stored in the library. But! If you don't use that image on the stage, flash won't include it in the final SWF published for the web.

Publishing your movie

By pressing Ctrl+Enter you create a SWF file. But, there is a method that gives you greater control over how your movie will be published.

Open any flash document, a blank one if you wish and go to File > Publish Settings (or press CTRL+SHIFT+F12 on a PC or ALT+SHIFT+F12 on a Mac). The Publish Settings dialog will show up.

The first tab you see is Formats. Here you decide in what formats your flash movie will be published when you choose File > Publish (SHIFT+F12).

The publishing formats

The cases Flash and HTML are checked by default. When you publish your movie, you will get an HTML file with the code necessary to embed the SWF inside it. Another way to put the SWF into your pages is to simply drag it into your HTML document in Dreamweaver. Nothing easier than that (Dreamweaver also rules :).

Besides making images or movies in various formats, there is also the possibility to make a Windows or Macintosh Projector file. Now, what does that give me, you may ask? A Projector file is a file that has the Flash Player embedded in it. The Flash Player is the plugin that a user needs to have installed on hers or his machine if she or he wishes to view flash content on the web.

That means if it is embedded in the file, the user doesn't need to have the Flash Player installed at all. Why then so many sites say "Flash player needed to view this site" or "This site needs the latest (insert version here) flash player installed on your machine to display properly".

Why bother to go to Macromedia's site if it can be embedded in the file. The Simple answer is that embedding the Flash player in the movie will make the file size a megabyte (1 MB) or so bigger. OK? Now you know the secret :) Just kidding! But, you ask, what good is a projector file then at all? Answer: it is great for interactive multimedia CD-ROMs.

In this way, with the projector file option, you can make a great Mac and PC CD-ROM for presentational or any other purpose. Furthermore, if you own a program that creates files for auto-starting the CD-ROM, and burn it onto the cd with your flash movie, once a user inserts it into hers or his computer, it will start automatically. And, if you made your flash movie go fullscreen, you get a great CD-ROM. The possibilities are endless.

Choosing a Flash Player version

Back to the Publish Settings dialog box, click the Flash tab at the top. You will see lots of options here. I will explain the most important ones.

One of the most important options here is Version. Here, you tell Flash for what version of the Flash Player the movie will be published. This means, if you save your FLA source document as a, let's say, Flash 8 file it won't matter much to the Flash Player. The version is important.

To cover a bigger audience, you would, for example, choose Flash Player 6 as version. But, that means you won't be able to have the advanced effects that were introduced with Flash 8 and also, your ActionScript version must be set to 1.0.

You will set the player version even to 5 when making banner ads. I created a lot of flash banner ads, and the portals they were displayed on required that I make them for Flash player 5. Now, the version 5 is really far away in flash timeline, but you can't argue with that, I advise you not to, because you'll lose your job regarding that banner and the client that contracted you. Just make it or they'll quickly find somebody else, believe me.

But, that isn't a problem - creating banner ads for Flash player 5. Most banners contain simple animations and simple code written just for the button functionality - to send the user to a certain page. I even pulled off some more complex interactivity in banner ads, it isn't difficult to do so.

Setting up the JPEG quality

This is the option with a sliding bar where you choose how much will Flash compress the JPEG images that you imported in your movie.

Be careful now - if you exported your JPEG in Photoshop or Fireworks, with a setting of 50% and you set the JPEG quality in Flash Publisg Settings to 50% too or even lower, your image will get compressed twice! So you'll get quite an ugly result in the end.

The best option is to make a good compression to quality ratio in Fireworks or Photoshop and leave the default 80% setting in Flash.

Sound quality

The options for streaming and event sounds are found below the JPEG quality options. The same thing that I told you for JPEGs goes for sound: either compress and optimize your sounds in a sound editing program and don't tell Flash to compress it too much, or import them raw into Flash, and have Flash optimize them.

If your site (or the site you are making for a client) doesn't need the highest quality of sound, but just a nice sound in the background, leave the mono option. Choosing to make a mono sound out of a stereo one will cut down the file size almost in half!

The HTML options

The last tab, HTML, shows some interesting options.

Display Menu is one of them. If you uncheck this option, the menu that appears when a user right-clicks on your movie will show limited options. If you leave this option checked, users can control the playback of your movie, zoom in to see the details, etc.

Don't leave this option checked! Remember, it is you who defines the degree of control a user should have over your flash creation. You define what is interactive and what isn't.

There is also the option to define the dimensions of your movie as percentage values, or pixels.

Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!