Firefox not auto playing SWFs with wmode set to transparent

  • Carl
  • Beginner
  • Beginner
  • User avatar
  • Posts: 50

Post 3+ Months Ago

Hello,

I'm actually having two problems but only one of them is Flash related. So, here's the Flash-related issue. I seem to be having rather serious trouble getting Firefox to play Flash animations when wmode is set to "opaque" or "transparent." But first things first...

1. I'm using Flash 10.0.2.
2. ActionScript 3.0
3. I'm attempting to publish for both Flash 9 and Flash 10. It doesn't really matter which though since the behavior is the same.

Anyway, I have a drop down menu that needs to display above an introductory Flash animation. So naturally, I need to set wmode to "opaque" or "transparent." Otherwise they end up behind the embedded file. The SWF plays perfectly fine when I set wmode to "window." However, as soon as I set it to "opaque" or "transparent," I have to right-click the embedded SWF and click play to get it to play. It will occasionally play the first time I load the page after clearing my browser's cache. But even that isn't consistent. It works perfectly fine in IE7, IE8, and Opera 10.53.

I have a loader class that displays a "Loading..." message and a progress indicator that gets called first. Once the file has loaded, the rest of the movie plays. I know my Flash movie works as this problem only occurs when I set wmode to "opaque" or "transparent." I'd post a link to a working version of this but apparently I'm not authorized to post links.

Unfortunately, getting rid of Flash isn't an option as it's required on two major sections of the website. I've spent the better part of the day trying to fix this issue and nothing has worked. Maybe I'm missing something rather obvious but I've been at it for quite a while and a fresh pair of eyes would be greatly appreciated.

I'm using SWFObject to embed the SWF:
Code: [ Select ]
<script type="text/javascript" src="/scripts/core/swfobject.js"></script>

<script type="text/javascript">
  var flashvars = {
    bgcolor: "#FFFFFF"
  };
  var params = {
    menu: "true",
    loop: "false",
    wmode: "transparent"
  };
  swfobject.embedSWF("/flash/WelcomeMovie.swf", "intro-movie", "600", "310", "10.0.45", "/flash/expressInstall.swf", flashvars, params);
</script>
  1. <script type="text/javascript" src="/scripts/core/swfobject.js"></script>
  2. <script type="text/javascript">
  3.   var flashvars = {
  4.     bgcolor: "#FFFFFF"
  5.   };
  6.   var params = {
  7.     menu: "true",
  8.     loop: "false",
  9.     wmode: "transparent"
  10.   };
  11.   swfobject.embedSWF("/flash/WelcomeMovie.swf", "intro-movie", "600", "310", "10.0.45", "/flash/expressInstall.swf", flashvars, params);
  12. </script>

Code: [ Select ]
<div id="intro-movie">
  <p>
    Other content goes here
  </p>
</div>
  1. <div id="intro-movie">
  2.   <p>
  3.     Other content goes here
  4.   </p>
  5. </div>


In case it's helpful, here's my loader class and how I'm using it:

Code: [ Select ]
package heliac.core
{
    import flash.events.ProgressEvent;
    import flash.events.Event;
    import flash.display.LoaderInfo;
    import flash.text.TextField;
    import flash.display.MovieClip;

    public class mainLoader
    {
        protected var mainStage:Object;
        protected var loadingText:TextField;
        protected var loadingBar:MovieClip;
        protected var stopFrame:int;
        
        public function mainLoader(currentStage:Object, newLoadingText:TextField,
                                  newLoadingBar:MovieClip, newStopFrame:int)
        {
            this.mainStage = currentStage;
            this.loadingText = newLoadingText;
            this.loadingBar = newLoadingBar;
            this.stopFrame = newStopFrame;
            
            this.mainStage.stop();
            this.mainStage.loaderInfo.addEventListener(ProgressEvent.PROGRESS, progressListener);
            this.mainStage.loaderInfo.addEventListener(Event.COMPLETE, completeListener);
        }
        
        protected function progressListener(e:ProgressEvent):void
        {
            var loaded:Number = e.bytesLoaded / e.bytesTotal;
            var percent:int = loaded * 100;
        
            var loading:String = "";
            
            if (this.mainStage.loaderInfo.parameters.loading != null)
            {
                loading = unescape(this.mainStage.loaderInfo.parameters.loading);
            }
            else
            {
                loading = "Loading";
            }
        
            this.loadingText.text = loading + ": " + percent + "%";
            this.loadingBar.scaleX = loaded;
        }
        
        protected function completeListener(e:Event):void
        {
            this.mainStage.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, progressListener);
            this.mainStage.loaderInfo.removeEventListener(Event.COMPLETE, completeListener);
            this.mainStage.gotoAndStop(this.stopFrame);
        }
    }
}
  1. package heliac.core
  2. {
  3.     import flash.events.ProgressEvent;
  4.     import flash.events.Event;
  5.     import flash.display.LoaderInfo;
  6.     import flash.text.TextField;
  7.     import flash.display.MovieClip;
  8.     public class mainLoader
  9.     {
  10.         protected var mainStage:Object;
  11.         protected var loadingText:TextField;
  12.         protected var loadingBar:MovieClip;
  13.         protected var stopFrame:int;
  14.         
  15.         public function mainLoader(currentStage:Object, newLoadingText:TextField,
  16.                                   newLoadingBar:MovieClip, newStopFrame:int)
  17.         {
  18.             this.mainStage = currentStage;
  19.             this.loadingText = newLoadingText;
  20.             this.loadingBar = newLoadingBar;
  21.             this.stopFrame = newStopFrame;
  22.             
  23.             this.mainStage.stop();
  24.             this.mainStage.loaderInfo.addEventListener(ProgressEvent.PROGRESS, progressListener);
  25.             this.mainStage.loaderInfo.addEventListener(Event.COMPLETE, completeListener);
  26.         }
  27.         
  28.         protected function progressListener(e:ProgressEvent):void
  29.         {
  30.             var loaded:Number = e.bytesLoaded / e.bytesTotal;
  31.             var percent:int = loaded * 100;
  32.         
  33.             var loading:String = "";
  34.             
  35.             if (this.mainStage.loaderInfo.parameters.loading != null)
  36.             {
  37.                 loading = unescape(this.mainStage.loaderInfo.parameters.loading);
  38.             }
  39.             else
  40.             {
  41.                 loading = "Loading";
  42.             }
  43.         
  44.             this.loadingText.text = loading + ": " + percent + "%";
  45.             this.loadingBar.scaleX = loaded;
  46.         }
  47.         
  48.         protected function completeListener(e:Event):void
  49.         {
  50.             this.mainStage.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, progressListener);
  51.             this.mainStage.loaderInfo.removeEventListener(Event.COMPLETE, completeListener);
  52.             this.mainStage.gotoAndStop(this.stopFrame);
  53.         }
  54.     }
  55. }

The following is executed on the first frame of my Flash movie:
Code: [ Select ]
import heliac.core.mainLoader;

var loader:mainLoader = new mainLoader(root, loadingText, loadingBar, 2);
  1. import heliac.core.mainLoader;
  2. var loader:mainLoader = new mainLoader(root, loadingText, loadingBar, 2);

So, um, help! This issue is driving crazy. Thanks in advance!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Carl
  • Beginner
  • Beginner
  • User avatar
  • Posts: 50

Post 3+ Months Ago

It never fails. I post on this forum after hours of not being able to find a solution (either via searching or on my own) and sure enough, I find a possible solution!

Someone else appears to be having this problem and they seemed to narrow it down to the Event.COMPLETE and PROGRESS events not working as expected in Firefox. The first frame loads and then nothing happens beyond that due to the events not firing. This is consistent with what I'm experiencing:

Quote:
I’ve recently experienced problems on few AS3 websites. If you embed your SWF file with different WMode, like opaque or transparent in Firefox your Flash won’t load. Actually the Flash loads first frame and then it seems like it stops. Well, it certainly loads but the problem is that loaderInfo Event.COMPLETE and PROGRESS are not fired in Firefox.

That is LAME! Firefox has this “advanced” feature with Flash, it doesn’t load it until that browser tab has focus. Seems like we’re getting problem from there. Anyway, a workaround is to set the Event.ENTER_FRAME function that will check loader

Code: [ Select ]
    addEventListener(Event.ENTER_FRAME, _listenLoading);// on enter frame to check if it’s loaded
    private function _listenLoading(e:Event):void {
     if (this.loaderInfo.bytesLoaded == this.loaderInfo.bytesTotal) {
      removeEventListener(Event.ENTER_FRAME, _listenLoading);
      _onSiteLoaded();
     }
    }
  1.     addEventListener(Event.ENTER_FRAME, _listenLoading);// on enter frame to check if it’s loaded
  2.     private function _listenLoading(e:Event):void {
  3.      if (this.loaderInfo.bytesLoaded == this.loaderInfo.bytesTotal) {
  4.       removeEventListener(Event.ENTER_FRAME, _listenLoading);
  5.       _onSiteLoaded();
  6.      }
  7.     }


They posted the above workaround but I haven't tried it out yet to see if it solves my problem.
  • Carl
  • Beginner
  • Beginner
  • User avatar
  • Posts: 50

Post 3+ Months Ago

Ok, good news! I found a solution to this. As the above post suggested, the Event.COMPLETE event wasn't consistently firing in Firefox. However, the solution above doesn't work. At least it didn't work for me. Don't write it off as it may solve the problem for any issues you may encounter.

Once I found out that it was a problem with Event.COMPLETE, a quick Google search revealed another solution. This solution uses Event.INIT. A huge thanks goes out to a post on ActionScript <dot> org and a blog post on numiko <dot> com. marguera and Ryan (I think) on the respective sites get all the credit. You guys saved me hours worth of debugging. 8)

Basically, I had to add two lines of code (4 if you count brackets). For some reason, Event.COMPLETE wasn't firing all the time in Firefox. I couldn't reproduce the bug consistently. So adding an additional event listener (it has to be Event.INIT) is necessary to make sure completeListener() gets called and the movie advances beyond the first frame. Why Event.INIT? The Flash documentation states that Event.INIT is called when:

Quote:
* All properties and methods associated with the loaded object and those associated with the LoaderInfo object are accessible.
* The constructors for all child objects have completed.

Supposedly, the INIT event always precedes the COMPLETE event but for some reason that isn't always happening in Firefox.

In the mainLoader class constructor, I had to add a second event listener for completeListener():
Code: [ Select ]
this.mainStage.loaderInfo.addEventListener(Event.INIT, completeListener);

And then in the completeListener() function, I had to add a check to see if the file finished loading:
Code: [ Select ]
if (this.mainStage.loaderInfo.bytesLoaded == this.mainStage.loaderInfo.bytesTotal)
{
  // remove event listeners and finish setting up movie
}
  1. if (this.mainStage.loaderInfo.bytesLoaded == this.mainStage.loaderInfo.bytesTotal)
  2. {
  3.   // remove event listeners and finish setting up movie
  4. }


Here's the complete working class:
Code: [ Select ]
package heliac.core
{
    import flash.events.ProgressEvent;
    import flash.events.Event;
    import flash.display.LoaderInfo;
    import flash.text.TextField;
    import flash.display.MovieClip;

    public class mainLoader
    {
        protected var mainStage:Object;
        protected var loadingText:TextField;
        protected var loadingBar:MovieClip;
        protected var stopFrame:int;
        
        public function mainLoader(currentStage:Object, newLoadingText:TextField,
                                  newLoadingBar:MovieClip, newStopFrame:int)
        {
            this.mainStage = currentStage;
            this.loadingText = newLoadingText;
            this.loadingBar = newLoadingBar;
            this.stopFrame = newStopFrame;
            
            this.mainStage.stop();
            this.mainStage.loaderInfo.addEventListener(ProgressEvent.PROGRESS, progressListener);
            this.mainStage.loaderInfo.addEventListener(Event.INIT, completeListener);
            this.mainStage.loaderInfo.addEventListener(Event.COMPLETE, completeListener);
        }
        
        protected function progressListener(e:ProgressEvent):void
        {
            var loaded:Number = e.bytesLoaded / e.bytesTotal;
            var percent:int = loaded * 100;
        
            var loading:String = "";
            
            if (this.mainStage.loaderInfo.parameters.loading != null)
            {
                loading = unescape(this.mainStage.loaderInfo.parameters.loading);
            }
            else
            {
                loading = "Loading";
            }
        
            this.loadingText.text = loading + ": " + percent + "%";
            this.loadingBar.scaleX = loaded;
        }

        protected function completeListener(e:Event):void
        {
            if (this.mainStage.loaderInfo.bytesLoaded == this.mainStage.loaderInfo.bytesTotal)
            {
                this.mainStage.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, progressListener);
                this.mainStage.loaderInfo.removeEventListener(Event.INIT, completeListener);
                this.mainStage.loaderInfo.removeEventListener(Event.COMPLETE, completeListener);
                this.mainStage.gotoAndStop(this.stopFrame);
            }
        }
    }
}
  1. package heliac.core
  2. {
  3.     import flash.events.ProgressEvent;
  4.     import flash.events.Event;
  5.     import flash.display.LoaderInfo;
  6.     import flash.text.TextField;
  7.     import flash.display.MovieClip;
  8.     public class mainLoader
  9.     {
  10.         protected var mainStage:Object;
  11.         protected var loadingText:TextField;
  12.         protected var loadingBar:MovieClip;
  13.         protected var stopFrame:int;
  14.         
  15.         public function mainLoader(currentStage:Object, newLoadingText:TextField,
  16.                                   newLoadingBar:MovieClip, newStopFrame:int)
  17.         {
  18.             this.mainStage = currentStage;
  19.             this.loadingText = newLoadingText;
  20.             this.loadingBar = newLoadingBar;
  21.             this.stopFrame = newStopFrame;
  22.             
  23.             this.mainStage.stop();
  24.             this.mainStage.loaderInfo.addEventListener(ProgressEvent.PROGRESS, progressListener);
  25.             this.mainStage.loaderInfo.addEventListener(Event.INIT, completeListener);
  26.             this.mainStage.loaderInfo.addEventListener(Event.COMPLETE, completeListener);
  27.         }
  28.         
  29.         protected function progressListener(e:ProgressEvent):void
  30.         {
  31.             var loaded:Number = e.bytesLoaded / e.bytesTotal;
  32.             var percent:int = loaded * 100;
  33.         
  34.             var loading:String = "";
  35.             
  36.             if (this.mainStage.loaderInfo.parameters.loading != null)
  37.             {
  38.                 loading = unescape(this.mainStage.loaderInfo.parameters.loading);
  39.             }
  40.             else
  41.             {
  42.                 loading = "Loading";
  43.             }
  44.         
  45.             this.loadingText.text = loading + ": " + percent + "%";
  46.             this.loadingBar.scaleX = loaded;
  47.         }
  48.         protected function completeListener(e:Event):void
  49.         {
  50.             if (this.mainStage.loaderInfo.bytesLoaded == this.mainStage.loaderInfo.bytesTotal)
  51.             {
  52.                 this.mainStage.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, progressListener);
  53.                 this.mainStage.loaderInfo.removeEventListener(Event.INIT, completeListener);
  54.                 this.mainStage.loaderInfo.removeEventListener(Event.COMPLETE, completeListener);
  55.                 this.mainStage.gotoAndStop(this.stopFrame);
  56.             }
  57.         }
  58.     }
  59. }

Hopefully this will help anyone else that runs into this issue.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

Thanks for posting your solution. I'm sure it didn't help very much when you were trying to get the answer but hey sometimes writing about the problem is the best way to force your brain to think differently. Glad you got it working anyway.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 19 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.