Quick Tip: Use SWFObject to Embed Your Flash Content
videos

Quick Tip: Use SWFObject to Embed Your Flash Content

on Sep 26th 2011 with 8 comments
Tutorial Details
  • Difficulty: Beginner
  • Platform: Flash (Flash Player 9+)
  • Language: HTML, JavaScript
  • Software used: Adobe Flash CS5, Any Text Editor
Download Source Files

In this Quick Tip screencast, I’ll show you how to embed your Flash SWFs in an HTML webpage using SWFObject.

Where to Get SWFObject

The latest version of SWFObject is available on its Google Code page. Grab whichever file is marked as “Featured” on this page (at time of writing, that’s version 2.2).

Watch the Screencast

Don’t like ads? Download the screencast, or subscribe to Activetuts+ screencasts via iTunes!

The Starting HTML

For a beginner’s guide to HTML, see this tutorial.

<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body></body>
</html>

The Final HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Our HTML Page</title>
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">swfobject.embedSWF('animation.swf', 'flash', '550', '400', '9.0.0');</script>
	</head>
	<body>
		<div id="flash">
			<p>At this moment you do not support Flash Player 9. We're sorry.</p>
		</div>
	</body>
</html>

Thank You

Thank you for watching, if you have any questions, feel free to comment.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Daniel Apt is a Dutch 19-year-old web designer. He’s passionate about all forms of design, dance and bicycling. He’s studying Design for Graphic Communication at the London College of Communication.  

Plus Premium
 
 
Add Comment

Discussion 8 Comments

  1. Zinsani says:
    September 27, 2011 at 7:11 am

    Awesome!!!

    Reply
  2. marcfolio says:
    September 27, 2011 at 4:46 pm

    Even better is swfObject for jQuery. Supper easy.

    Reply
  3. jarofed says:
    September 30, 2011 at 3:02 pm

    Great tip about embedding flash content. But should you always embed the swf-file directly after embedding script? Or could you for example embed script in header and insert swf-file in the body of your html-document. By the way I notice that biggest games sites wich publishes flash-games also using swfobject.

    Reply
    • Daniel Apt says:
      September 30, 2011 at 4:26 pm
      Author

      You don’t have to embed the SWF file directly after the script. You could embed the script in the header (and also in the tag) and embed the SWF file anywhere you want to.

      At this moment SWFObject is the industry standard, that’s why you see it at Flash game sites, and actually everywhere else where Flash is used.

      Thanks for your comment.

      Reply
  4. Daniel Apt says:
    September 30, 2011 at 4:27 pm
    Author

    Sorry, something went wrong with my previous response, just read this comment.

    You don’t have to embed the SWF file directly after the script. You could embed the script in the header (and also in the <head> tag) and embed the SWF file anywhere you want to.

    At this moment SWFObject is the industry standard, that’s why you see it at Flash game sites, and actually everywhere else where Flash is used.
    Thanks for your comment.

    Reply
  5. Jack says:
    October 24, 2011 at 7:44 am

    idi kuda evariki teledu anukunnav ra puka???

    Reply
  6. שיפוצים says:
    December 12, 2011 at 11:14 am

    Great tips and work, thanks

    Reply
  7. david says:
    April 30, 2012 at 11:38 am

    in hebrew we write in opposite direction

    Reply

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.