in General

New Video Tutorial On Using SWFObject 2

Now that the travel has died down for a little while, it’s time to start recording some new tutorials. First up is a tutorial showing you how to embed Flash content into HTML pages using SWFObject 2.0. I also cover how to use Flashvars in ActionScript 3, as it has changed considerably. Adobe will be using SWFObject throughout the CS4 suite so it is now the “official” way off embedding content. Go and check it out at http://www.gotoandlearn.com.

Lee

Write a Comment

Comment

32 Comments

  1. Lee this is great! I’ve been dying to get in to swf object more in depth for some time now. It’s like you read my mind! Spooky!

    Thanks again Lee, I can’t wait to dive in to this one.

  2. Hi Lee,
    Thanks for this tutorial.
    Do you know the way to do the same thing directly in Flash CS4 ?
    I think SWFObject is embeded in html page when i publish in FCS4.
    How can i add the parameter dText?
    Thanks a lot
    JP

  3. When I try to watch the tutorial i get no sound… On any of my computers.(i have my speakers turned all the way up, plugged in and on.)

  4. Hi, I can’t get it working online, but local.

    I’ve seen websites using it already, but I can’t see it on FireFox 3.0 or IE as well.

    Is it the browser? Anyone?

  5. Cheers for this,

    I’d been using SWFObject lately because I liked the alternate content functionality but I hadn’t even been uploading the expressInstall.swf because I didn’t realize what it was. Also this cleared up for me the easiest way to set wmode to transparent. Seams so obvious now, not sure why I didn’t pick up on it reading the docs, but cheers again.

  6. One of the better tutorials imo, nice layout to a subject that raises many questions to some people

    keep it up Lee.

    best regards

  7. Used SWFObject for the first time today, and was having issues with getting it to run in Firefox. After a bit of research, I found that in order to use width and height params of 100%, you need to set your HTML height to 100% as well. For example:

    html {
    height: 100%;
    overflow: hidden;
    }

    body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #000000;
    }

    #myAlternativeContent {
    height: 100%;
    }

    Without this, it would only work in Firefox 3 when given exact pixel dimensions. Just FYI… Let me know if you anyone knows another way.

  8. Hey Lee. Thanks for the great video tutorial. 2 questions for you though. When I try to choose Dynamic for the publishing option it doesn’t load in my php pages. Any clue as to why?

    Second question: If I choose to use the Static option for the publishing it plays on my php pages but on my Web Developer add-on for Fire Fox is displays “swfObject is not defined” And I get an error from IE (not surprised) and I have no idea how to “define” this. Any suggestions or documentation I can be referenced to?

  9. I have used swf.object(1.5) many times in the past easily and problem-free/now using 2.0 and my flash content ONLY shows up in IE, NOT mozilla/firefox~! and i tried the height % info offered by Brendan (above)/can anyone HELP?!
    thank you, Geraldine

  10. Hi Lee, I have the same problem as Geraldine. I can’t get swfobject 2 to work on Firefox and Safari using the dynamic embed method. Seems to work fine in IE. Having used 1.5 successfully, I know I must be overlooking something simple but I’ve tried almost everything. Here is the test page I’m working on:

    http://appliedphysics.csuci.edu/home.htm

  11. Hi there, Webidiot here.

    Being the web idiot that I am, and most sites and tutorials showing how to do the SWFobject implementation like to try and make it as hard as possible.

    Thank the Universe, Mother Teresa and the seven sister that I found this idiot proof video on how it (actualy works)

    Best!

  12. helloI saw your web site explaining SWFObjects.
    I am tryignt o use this object to play a video on demand.
    I am trying to create a video search engine where after i retireve a set of videos based on user searches, once they clikc on a given video to be played,. I wish to play it. The value of the url to play is dynamic it changes depnding on user clicks.
    Can I use the swf object to accomplish the task of playing a flash on a url on demandhere is what I did

    // Function playVideo() opens a new browser window to load the specified videoUrl.
    function playVideo(videoUrl,id) {

    var so = new SWFObject(videoUrl, “mymovie”, “400”, “100%”, “8”, “#336699″);
    so.write(‘flashcontent’);

    }

    this does not work? can u suggest anything to me? please advise me
    Shyma

  13. I am having no end of problems with this. I have managed to get it to work once on a page. I then updated the swf which when played with the standard export html page from Flash CS3 works fine but does not display either the swf file or the alternative content when looking at it on IE7 or Firefox 3.

    What are these unknown issues seems a lot of people are experiencing them?

    Do all the files have to be in the same directory? Can you not split assets?

  14. The #20 reply by Brendyn (“After a bit of research, I found that in order to use width and height params of 100%, you need to set your HTML height to 100% as well.”) is correct but could probably use a little more explanation. His code:

    html {
    height: 100%;
    overflow: hidden;
    }
    body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #000000;
    }
    #myAlternativeContent {
    height: 100%;
    }

    //should be placed in a css file, eg. style.css that is in the same folder as your swf file. Then in the index.html file, in the head portion, right after the title tags, paste this line of code which calls the css file:

    //The name in the above code, “myAlternativeContent” is whatever name you input into the “Flash content id” box of the SWFObject 2 code generator.

  15. Thanks for the tip, works a treat with FF3.5 and swfObject2.2 … phew! I was starting to worry about some of our projects :)

  16. Near 4 years later, do you still recommend the dynamic method to publish flash with swfObject ?

    What is more interesting : being allowed to see flash without javascript (static), or avoir the “click to activate” behavior on old browsers (dynamic) ?
    Or other criteria ?