How to Notify the HTML Container That the Swf Has Finished, Using Swfobject

How to notify the HTML container that the SWF has finished, using swfobject

To avoid that Flash player blocks your local swf to access to an external URL (internet, ...) or to communicate with javascript or some other actions that fire usually a security sandbox violation error, you have to add it (the swf) to the list of trusted locations like this :

For Flash Player PPAPI (like Opera and Chrome) :

• Right click on your swf opened in the browser, then Global Settings... :

Which will open this page.

• Then click on the Global Security Settings panel link at the right side, which will give you this page :

• Then, as it's mentioned in the image, click on Edit locations... combo box, and Add location, which will give you this box :

You have just to type your swf location, or it's parent directory, or simply the whole partition like what I did in the image. Try to avoid "Browse ..." buttons, sometimes it doesn't work (at least for me). Confirm and close the page and refresh that of your swf.

For Flash Player ActiveX (like IE) and NPAPI (like Firefox) :

• Right click on your swf opened in the browser, then Global Settings..., you can also go to your system control panel and open Flash Player :

• Then go to Advanced tab and click Trusted Location Settings... button :

• Then you have to add the swf location using Add.. button > Add File... or Add folder... button > select your file/dir or partition and press OK, Confirm and close all dialogs.

Then you have just to refresh your page.

When using swfobject, swf file ignores z-index

Make sure your using "transparent" wmode.

var params = {};
params.wmode = "transparent"; 
swfobject.embedSWF("file.swf", "id_name", "100", "100", "10.0.0",false,false,params);

Notify me when the Flash movie is done playing

There is no way to do this without editing the source, which would be a very simple change if you could do it.

The reason, as far as I can guess, as to why no such callback event exists is there would be no real logical place to have the event fired. Imagine a timeline animation that gets to the last frame and says stop(). Is that done? What if I can still click on buttons within the movie that allow me to do other things... or if the final frame just has a delayed function call to do something else, like restart. There is no "END" to a flash movie, unless you make it so there is one yourself.

Swfobject and MooTools: Dynamic movie height

I think the act of posting something on here helps me think through the problem -- after doing so, the answer became more clear. So here is my solution for anyone who stumbles across this later.

To animate the Flash movie's height to its initial, taller state while preserving shorter height for non-Flash users (see images above), I use JavaScript the same way I would to tween the movie's height once sequence is complete. The result resembles a push-down ad on a newspaper website.

In AS3, after preloading is done, I tell Javascript to tween the height of the flash movie container (simplified, obviously -- there is no preloading code):

package {
   import flash.display.MovieClip;
   import flash.display.StageAlign;
   import flash.display.StageScaleMode;
   import flash.external.ExternalInterface;

    public class HomeMovie extends MovieClip {

       private var stageHeight:uint;

       public function HomeMovie(){

           this.stage.scaleMode = StageScaleMode.NO_SCALE;
           this.stage.align = StageAlign.TOP_LEFT;

           stageHeight = 556;
           // Tell javascript the stage needs resizing.
           if (ExternalInterface.available) {
           ExternalInterface.call("resizePage", stageHeight);
           }
        }
    }

}

In JavaScript (via MooTools):

<script type="text/javascript">
<!--
window.addEvent('domready', function() { // hide content on home-page below movie
   $('homeContent').setStyle('display', 'none');
});
function resizePage(h) {
    var tweenObj = new Fx.Tween('flashContent', {
        property:'height',
        duration:500,
        transition:Fx.Transitions.Quad.easeOut
    });
    tweenObj.start(h);
}
//-->
</script>

I will probably take it one step further and check for Flash before hiding the home-page content, so that it will not occur if the user has Javascript but not Flash. Again, this is all for the sake of standards.

ExternalInterface not working in IE after page refresh

In case anyone is wondering WHY this happens, at least for Internet Explorer it seems that the Flash player is loaded as an ActiveX control, which is completely seperate from the DOM and JavaScript modules. When the .swf is cached, it seems that the ActiveX control can load and run it before Javascript is ready to accept events from it.

This means that when Flash tries to use the ExternalInterface to add the callbacks, it will fail because the JavaScript and the DOM have not been loaded.

I fixed the problem by waiting for the first ENTER_FRAME event, and then registering my callbacks there. Like this:

protected function registerExternalCallbacks(event:Event):void {

    removeEventListener(Event.ENTER_FRAME, registerExternalCallbacks);

    if (ExternalInterface.available) {
        ExternalInterface.addCallback("flash_play", play);
        ExternalInterface.addCallback("flash_setVolume", setVolume);

        ExternalInterface.call("player_ready");
    }
}

// and then when the .swf loads, register the function on the event:
addEventListener(Event.ENTER_FRAME, registerExternalCallbacks);

This will make the player wait until the callbacks can be added reliably, and then calls a javascript function called player_ready to signal that it is ready to be used.

How can one detect via Javascript if a print stylesheet is in effect?

It sounds like you're confused that print style-sheets are used when you view a printer-friendly page, but that is not the case. A print style sheet isn't applied until the user actually sends the page to the printer. At this point, any javascript that is going to run has already finished.

What you want to do is put your SWFObject inside a div container, and have the container styled as display:none; for the print media.

---

Related Topics