SM5312 week 11: Flash Objects in HTML1 Flash Objects in HTML Nick Foxall

SM5312 week 11: Flash Objects in HTML2 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

SM5312 week 11: Flash Objects in HTML3 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.

SM5312 week 11: Flash Objects in HTML4 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.

SM5312 week 11: Flash Objects in HTML5 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.

SM5312 week 11: Flash Objects in HTML6 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…

SM5312 week 11: Flash Objects in HTML7 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: percent of all users browsing the internet these days have the Flash plugin, usually pre-installed on most new computers and OS’s

SM5312 week 11: Flash Objects in HTML8 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…

SM5312 week 11: Flash Objects in HTML9 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.

SM5312 week 11: Flash Objects in HTML10 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.

SM5312 week 11: Flash Objects in HTML11 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: Then upload to your web server.

SM5312 week 11: Flash Objects in HTML12 Flash in HTML: SWFobject Then at the point where you want to insert your Flash object, insert these lines of code: // <![CDATA[ var so = new SWFObject("flashfile.swf", "Alumni Picture Gallery", "615", "430", "8.0.0", "#FFFFFF", true); so.write("header"); // ]]> Here, there are essentially only 2 lines of code to configure, as opposed to over 20 lines in the original Flash insert code.

SM5312 week 11: Flash Objects in HTML13 Flash in HTML: SWFobject // <![CDATA[ var so = new SWFObject("flashfile.swf", "Alumni Picture Gallery", "615", "430", "8.0.0", "#FFFFFF", true); so.write("header"); // ]]> 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

SM5312 week 11: Flash Objects in HTML14 Flash in HTML: SWFobject // <![CDATA[ var so = new SWFObject("flashfile.swf", “Picture Gallery", "615", "430", "8.0.0", "#FFFFFF", true); so.write("header"); // ]]> In this example: The Flash movie file is “flashfile.swf” Its name is “Picture Gallery” Its width and height are 615 by 430 pixels The minimum Flash player version is 8.0 The 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”

SM5312 week 11: Flash Objects in HTML15 Flash in HTML: SWFobject 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:

SM5312 week 11: Flash Objects in HTML16 Flash Video

SM5312 week 11: Flash Objects in HTML17 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

SM5312 week 11: Flash Objects in HTML18 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.

SM5312 week 11: Flash Objects in HTML19 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

SM5312 week 11: Flash Objects in HTML20 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’

SM5312 week 11: Flash Objects in HTML21 Encoding a Video to FLV Format 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 Kbps usually produces good results Keyframes: may need experimentation, depending on how much movement and rapid action is in your video

SM5312 week 11: Flash Objects in HTML22 Encoding a Video to FLV Format 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.

SM5312 week 11: Flash Objects in HTML23 Encoding a Video to FLV Format 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.

SM5312 week 11: Flash Objects in HTML24 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.

SM5312 week 11: Flash Objects in HTML25 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