HTML Code to View Flash

There are two questions that get asked of me the most: How do I publish a Flash animation? How can I make my animation transparent? After having spent more than 10 hours in Flash, I created a small program/animation that allows you to enter the various values for an animation. Best of all, after you enter your values for the movie, the HTML code gets generated automatically. Copy the HTML code into your Web page, and your animation will work.

Use the following animation to aid you in your goal of publishing an animation. The file is only 12k in size:

Online Help: A Guide
The animation's content is fairly self-explanatory. You fill in the values for the fields displayed and press the Display code. To ensure that there is no doubt in your mind as to what each setting accomplishes, the following guide explains what each feature accomplishes:

  • Address to Your SWF File
    Specify the address to your Flash animation. I highly recommend you enter the full path to your animation instead of using a Relative URL. For example, use: instead of .../movie.swf.
  • Movie Width and Movie Height
    Enter the values for your animation's width and your animation's height. The values correspond to the pixel width of a movie. To enter a percent value, add a "%" after the number. For example: 75%.
  • Movie Background Color
    You will need to specify the background color of your movie. The best method of adding a background color is by creating a bottom layer in your Flash movie that contains the background color. The color for the background you specified in the Modify Movie dialog box is in fact a HTML setting. Therefore, unless you enter the hexa-decimal value for the color in the 'Movie background color' field, your animation will feature the standard, white background.
  • Loop Movie
    This setting asks whether you want the movie to repeat continuously or stop playing after one run. If you want the movie to play repetitively, click the button marked "yes"; if you don't want a loop, click the button marked "no".
  • Quality
    Adjusts the quality of your movies. Best is the highest quality setting because it smoothes edges of vectors by using anti-aliasing and by smoothing the edges of images. High is the same as Best except images are not smoothed. Medium and Low are just the lesser variations of High and Best. The lower the setting, the less processing power is needed to view the animation. The higher the setting, but more processing power is needed to view the animation, but the animation will look great. Recommended, default, setting is High.
  • Transparent
    Specifies whether the background of the movie should be transparent. While the transparency feature is great, there are some visible drawbacks:
    • No support for any Netscape browser. Even Netscape version 6.x cannot render this simple HTML setting correctly.
    • Internet Explorer in a Macintosh will be unable to display transparency animation with the transparent background.

You should understand, however, that the animations will display perfectly; the animations just won't be transparent. If you use a background layer by filling in a large rectangle with the color of your background, you will be unable to view the transparency. The transparency applies to the portion of the movie that is "free space" and not filled with objects such as large rectangles, text, etc. The transparency will not eliminate a color from the alpha channel like a GIF either. So specifying a red background and making the movie transparent will not make all the red colored objects transparent.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!



SUPPORTERS:'s fast and reliable hosting provided by Media Temple.