1 / 25

Flash Objects in HTML

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

brigid
Download Presentation

Flash Objects in HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Flash Objects in HTML Nick Foxall SM5312 week 11: Flash Objects in HTML

  2. 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 HTML

  3. 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 HTML

  4. 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 HTML

  5. 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 HTML

  6. 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 HTML

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

  8. 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 HTML

  9. 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 HTML

  10. 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 HTML

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

  12. 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"> // <![CDATA[ • var so = new SWFObject("flashfile.swf", "Alumni Picture Gallery", "615", "430", "8.0.0", "#FFFFFF", true); so.write("header"); • // ]]> </script> • 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 HTML

  13. Flash in HTML: SWFobject • <script type="text/javascript"> // <![CDATA[ • var so = new SWFObject("flashfile.swf", "Alumni Picture Gallery", "615", "430", "8.0.0", "#FFFFFF", true); so.write("header"); • // ]]> </script> • 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 HTML

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

  15. 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: • http://blog.deconcept.com/swfobject/ SM5312 week 11: Flash Objects in HTML

  16. Flash Video SM5312 week 11: Flash Objects in HTML

  17. 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 HTML

  18. 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 HTML

  19. 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 HTML

  20. 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 HTML

  21. 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 380 - 440 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 HTML

  22. 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 HTML

  23. 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 HTML

  24. 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 HTML

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

More Related