flash objects in html

SM5312 week 11: Flash Objects in HTML 1

Flash Objects in HTML

Nick Foxall


Flash File Formats

There are three core Flash file formats that you need to be aware of, and can be confusing if you’re new to Flash:

FLA (extension .fla): the “author” file, or editable file

SWF (extension .swf): the exported animation file

FLV (extension .flv): the Flash video file format


Flash File Formats: FLA

The FLA file is the core, editable Flash file; the one where you “author” / create your designs, import graphics, make animations, and insert scripts.

FLAs do not appear (and cannot be inserted) into your web pages. Think of a Photoshop (PSD) file, from which you might export JPGs, GIFs, etc.

When creating a new Flash animation file, be aware of the version you choose: Actionscript 2 or Actionscript 3.

TIP: save your FLA file inside the root folder of your website. That way, when you export the final animation [SWF] file (and any HTML file), its always right there ready to be linked from its containing HTML page.


Flash File Formats: SWF

The SWF file is the exported, final animation file; the one that plays back your animation to the viewer; the one you want to appear within a web page.

In Flash this is called “publishing” your animation (File > Publish).

Under “Publish Settings” you can select to export a containing HTML file too—one that will correctly display your SWF file in a browser.

If you select to include an exported HTML, there are a number of settings you can choose that govern the placement and playback of your animation in the HTML file.


Flash File Formats: FLV

An FLV file is an encoded Flash video file usually compressed with the On2 VP6 or Sorenson Spark codecs.

Think of an FLV file like a QuickTime, or Windows Media file. These are all video file formats.

However, unlike QuickTime and Windows Media videos, FLVs cannot be displayed directly in the browser (you cannot insert code that directly loads the FLV into the browser window.

An FLV file has to be loaded into a containing SWF file. The SWF file acts as a video player, with controls for play, pause, fast forward, etc.


Browser Plugins

Browsers cannot play Flash animations (SWFs) or Flash videos (FLVs) without the right plugin installed.

A plugin is a small application that is triggered to load and play certain types of content when the browser loads an HTML page with “links” to that content.

Plugins are required to play most video formats delivered over the web…


Browser Plugins

Common video playback plugins are:

QuickTime (current version: 7)

DirectX or Windows Media (current versions: 10, 11)

Flash (current version: 9)

The good news for Flash:

90-93 percent of all users browsing the internet these days have the Flash plugin, usually pre-installed on most new computers and OS’s


Inserting Flash into HTML

As mentioned, only SWF files can be embedded into an HTML page.

The easy way is to select HTML alongside “Flash (.swf)” as an export option via the “publish settings” dialogue.

An “HTML” tab appears at the top, containing options for the exported file…


Inserting Flash into HTML

Clicking the HTML tab shows a number of options for configuring how your final animation/movie is displayed within the HTML page.

You can also include an option to detect the right version of the user’s Flash plugin.

This is quite important, as most of the latest features in Flash require at least the version 8.x plugin.


Inserting Flash into HTML: Flash Detect

However, note that when you select “Detect Flash Version”, it exports a javascript file as well as the HTML and SWF files.

This javascript file needs to be uploaded to your site along with your HTML and SWF in order for Flash to work in your page.


Flash in HTML: A Simpler Method

An alternative to the inbuilt Flash export options is to use SWFobject, a more advanced, and more standards-compliant script that’s easier to manage.

SWFobject.js is a javascript file that needs to be linked to from the page containing your Flash object:

<script type="text/javascript" src="swfobject.js"></script>

Then upload to your web server.


Flash in HTML: SWFobject

Then at the point where you want to insert your Flash object, insert these lines of code:

<script type="text/javascript">

var so = new SWFObject("flashfile.swf", "Alumni Picture Gallery", "615", "430", "8.0.0", "#FFFFFF", true);

// ]]>

Here, there are essentially only 2 lines of code to configure, as opposed to over 20 lines in the original Flash insert code.

</script>

so.write("header");

// <![CDATA[




var so = new SWFObject("flashfile.swf", "Alumni Picture Gallery", "615", "430", "8.0.0", "#FFFFFF", true);

// ]]>

Just change the values inside the brackets to match your Flash movie.

And change the value of so.write to match the name of your containing div element in the HTML

</script>

so.write("header");

// <![CDATA[




var so = new SWFObject("flashfile.swf", “Picture Gallery", "615", "430", "8.0.0", "#FFFFFF", true);

// ]]>

</script>

so.write("header");

// <![CDATA[

In this example:

The Flash movie file is “flashfile.swf”Its name is “Picture Gallery”Its width and height are 615 by 430 pixelsThe minimum Flash player version is 8.0The background colour is white, and Autoplay is set to ‘true’

Also the Flash file will load and replace any content inside the div id=“header”



There are additional parameters that can be added and configured in SWFobject, including importing dynamic text from the HTML file when the Flash file loads in the page.

You can download SWFobject and find out more about the features at:

http://blog.deconcept.com/swfobject/


Flash Video


Preparing for Flash Video

As mentioned, video files in Flash are encoded in either the On2 VP6 or Sorenson Spark codecs, and saved in the Flash video (.flv) format.

To create a Flash format video (.flv) from an existing video file, you need to use the Flash Video Encoder, which is part of Flash CS3 Professional.

Begin with a suitable format video file on your hard drive, such as uncompressed DV, QuickTime or AVI. Flash cannot import direct from tape or DVD sources.

Open the Flash CS3 application to set up your video player


Setting up Flash Video Playback

Open Flash CS3 Professional and create a new Flash authoring file.

Set the size of the stage you want for your final Flash file. This can match the size of the final video you want to playback, or it can be larger.

Go to Window > Components to bring up the Flash components panel.

Select the FLVPlayback component and drag it onto the stage.

Position and resize the component to the desired size. It’s a good idea to decide beforehand what size (width and height in pixels) you want your video to display in the browser, and make the player match that size.


Setting up Flash Video Playback

Select the Components Panel, and drag a copy of ‘FLVPlayback’ onto the stage

Set various parameters of the player using the ‘Parameters’ tab in the properties panel, or the ‘Component Inspector’ panel


Encoding a Video to FLV Format

In Flash, go to File > Import > Import Video…

Use the ‘Choose’ button to select your source video, then click ‘Continue’

Select ‘Progressive Download from a Web Server’ and click ‘Continue’



Click the ‘video’ tab and configure:

Codec: leave set at On2 VP6 for best results

Frame rate: use “same as source” or type in the actual rate of the source video (25 fps for PAL)

Quality: around 380 - 440 Kbps usually produces good results

Keyframes: may need experimentation, depending on how much movement and rapid action is in your video



Click the ‘audio’ tab and configure the data rate (compression) for the sound within your video.

For a simple dialogue, a rate of 64 or 48 Kbps is probably acceptable.



Finally, click ‘Crop and Resize’ and resize the video to the dimensions you wish to play the movie in your Flash file (in your web page).

It’s important to set the dimensions you want for the final output movie, as this will have a considerable effect on the final file size of your FLV file.


Connecting the Encoded FLV to the SWF Player

Once the video has finished encoding, ensure the final FLV is moved into your site root folder.

Back in Flash, select the FLVPlayback component on the stage and go to the ‘Parameters’ or ‘Component Inspector’ panels.

Click the little search icon next to ‘Content path’ and locate your FLV file in the dialogue.

Click ‘OK’ and your Flash player is linked to your FLV movie. Publish the Flash player SWF and embed it in your HTML page, as before.


Connecting the Encoded FLV to the SWF Player

Select the ‘FLVPlayback’ component currently on the stage

In the ‘Component Inspector’ panel, click the icon at the end of contentPath

In the dialogue box, use the folder icon to find and select your final FLV file. *Make sure your FLV movie is already moved into your site root folder

flash objects in html

Documents

editable flash file

author file

new flash animation

core flash file formats

encoded flash video

video file formats

containing swf file

swfthe swf file