2 Replies Latest reply on Feb 8, 2010 6:17 PM by jDubz_

    Embedding Flex SWF in HTML

    jDubz_

      I want to embed the Flex generated SWF in an HTML page. I have a photo gallery that loads images dynamically, and therefore the overall height of the content varies. Is it possible to have the content displayed like HTML going down the page? I do NOT want to set a fixed width or height (in pixels or percentage) in the <EMBED> tag because the height of the Flex content loads dynamically, and because I want to use the browser's scroll bars and not a scroll bar inside the SWF.

        • 1. Re: Embedding Flex SWF in HTML
          jDubz_ Level 1

          Thank you both for your responses. I don't see how either method will allow me to bypass setting the dimensions in HTML tag. Setting it in either pixels or percentage means my stage will be a fixed frame inside the HTML page rather than flowing freely down the page.

           

          Thanks for the swfObject tutorial (never heard of it before). It gave me the idea that maybe I can have Flex communicate with Javascript, sending the height of its dynamically loaded content to JS to reload the SWF using swfObject. I'm trying now to figure out how to reload the SWF...

          • 2. Re: Embedding Flex SWF in HTML / getting container height from Flex
            jDubz_ Level 1

            OK.. so I think I made some progress, but the result isn't pretty, and there's still one thing left to fix.

             

            I have the SWF being loaded in a DIV with Javascript:

             

            <div id="flashContent">
            </div>

             

            and inside the Javascript:

            function loadPhotoGallery(newHeight, categoryName){

                ...

                var so = new SWFObject("photoGallery.swf", "photoGallery", "100%", catHeight, "9", "#FFFFFF");
                so.addVariable("var1", categoryName);
                so.write("flashContent");

            }

             

            when the user clicks on a category in the photogallery,

            catHeight is passed by Flex through an ExternallInterface.call()

            categoryName is also passed because when reloading the SWF, I need to pass it back to tell Flex which category the user clicked on

             

            Problems with this:

            - The total height of the photos is only determined after the photos are loaded from an XML file. This means I'm loading the photos, getting the measuredHeight, and then using Javascript to RELOAD the SWF with that height. Loading the pictures twice is silly, but since there's not that many photos per category... well... it can 'work' for now

            - I can't pinpoint the right time to measure the height. I tried the updateComplete event, but it's being launched twice (I guess once when clearing and once after redrawing?), and makes an infinite loop when reloading the SWF. And I tried dispatching a custom event but it uses the OLD height before loading the new pictures..

             

            So.. I'm wondering:

            - is there any way to change the dimensions of the swfObject without completely reloading it?

            - any other ideas?

            - this is probably for another discussion, but if I can pinpoint the right event to check the measuredHeight, or know before loading the XML what the height will be, or delay my custom event until after the pics are loaded.... I might be able to hack this together...