PhotoAlbums and high CPU usage...

[ogryn]

Steve,

Since the photo album upgrade, scrolling the page takes up all my CPU usage again (much like the forums used to). Is there anyway of making a "lite" version again for the albums?

Thanks
Dave :wave:

 

[wdwmagic]

Are you using that funny browser still? I'll have a look at it on FIrefox and see if I can see any issues. No problems on IE6 though.

 

[Erika]

Are you using that funny browser still? I'll have a look at it on FIrefox and see if I can see any issues. No problems on IE6 though.

Buuuuuuuuuuuuuuuuuuuuurn.

(Don't feel bad, Dave, I'm using it too :lol: )

 

[ogryn]

Thanks

What did we decide on last time...? Was it the flash plugin? If we can't pinpoint it, I'll go and file a bug over at bugzilla.mozilla.org

EDIT: Scrolling over the rest of the page without the banner on-screen works super speedy, but as soon as the flash banner comes on screen, it slows to a crawl. Try flicking up and down quickly on the mouse-wheel....

 

[wdwmagic]

Yeah it seems to be the flash plugin. Under Firefox, the flash plugin consumes a lot of CPU resources, much more than the same animation does under IE.

 

[ogryn]

I *think* I've worked it out. I took a testcase, and played around with it:

Current:

<embed src="photos_flashv9.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" quality="High" wmode="transparent" height="120" width="100%">
   <param name="movie" value="http://www.wdwmagic.com/photos_flashv9.swf" />
   <param name="quality" value="High" />
   <param name="wmode" value="transparent" />

Fix:

<embed src="photos_flashv9.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" quality="High"  height="120" width="100%">
   <param name="movie" value="http://www.wdwmagic.com/photos_flashv9.swf" />
   <param name="quality" value="High" />
</embed>

I'm not too sure on what the wmode=transparent does, but without it Firefox behaves as it should (at least in my testcase)

Hope that helps :wave:

 

[ogryn]

Found an article about wmode which seems to back up the theory...

http://www.communitymx.com/content/article.cfm?cid=E5141
Window Mode (wmode) - What's It For?

There are three window modes. Windowless mode allows you to take advantage of the transparent movie, absolute positioning, and layering capabilities available in the browser. They are controlled with the wmode parameter in the object tag. The default mode is available by either choosing not to specify any wmode, or by using wmode="window". We'll look at Macromedia's explanation of the three modes and then we'll explore them a bit further individually.

* Window: Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance.
* Opaque: By using the Opaque value you can use JavaScript to move or resize movies that don't need a transparent background. Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through.
* Transparent: Transparent mode allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. Animation performance might be slower when you use this value.

While doing some testing for this article I ran into some confusing documentation as well as unexpected testing results. I turned to Mike Chambers to confirm and hopefully explain my findings. Below is much of what we discussed. I hope it clarifies some things for you as well.

Window Mode

By default, the Flash Player gets its own hWnd in Windows. This means that the Flash movie actually exists in a display instance within Windows that lives above the core browser display window. So though it appears to be in the browser window, technically, it isn't. It is most efficient for Flash to draw this way and this is the fastest, most efficient rendering mode. However, it is drawing independently of the browser's HTML rendering surface. This is why this default mode (which is equivalent to wmode="window") doesn't allow proper compositing with DHTML layers. This is why your JavaScripted drop-down menus will drop behind your Flash movie.

Most Macintosh browsers will still allow DHTML layers to go over a Flash movie in this mode, however, the movement of the movie will interfere with the content of the DHTML layer and do strange things like erase big chunks of the DHTML layer.

Opaque Mode

In windowless modes, Flash Player doesn't have a hWnd. This means that the browser tells the Flash Player when and where to draw onto the browser's own rendering surface. The Flash movie is no longer being rendered on a higher level if you will. It's right there in the page with the rest of the page elements. The Flash buffer is simply drawn into whatever rectangle the browser says, with any Flash stage space not occupied by objects receiving the movie's background color.

This mode is the one that confused me due to this wording: "Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through." Truth is, since by using wmode="opaque", you've placed the Flash Player directly onto the page, it can now accept placement and positioning like any other element. Unless your viewer is not using a compliant browser (list to follow), the z-index will be respected and rendered. So yes, you can move elements behind Flash movies to prevent them from showing through, but you can just as easily move the elements in front of the Flash movies to prevent the Flash from showing through.

Another confusing area was the way Macromedia recommends that you use transparent mode to work with DHTML layers. Due to this, many assumed that transparent mode was the only way to deal with JavaScripted drop down menus. Due to the reasons above, this is not the case. Transparent mode, which we'll discuss in the next section can have some performance issues. If you are simply using a DHTML layer that goes over the Flash movie, it's not necessary to use transparent mode. You can simply use opaque mode.


Transparent Mode

In transparent mode, the Flash Player zeros the alpha of the movie background color and draws only the parts of the Flash stage that contain actual objects. It does not draw portions that contain only background. You would need to use wmode="transparent" to do a floating Flash Movie that is irregular or non-rectangular shaped, or to show elements placed beneath the Flash movie. However, as mentioned above, it's likely you will get a performance hit in this mode. So only use it where actual transparency is necessary. Opaque mode is definitely more processor-friendly.

In transparent mode, you may find that lowering your frames per second (FPS) will give you better performance.

 

[Figment1986]

wait.. you found the overall issue which messed up Firefox... (I run light mode with tons of tabs.. if i run regular.. only one window... so i dont crash...)

(and firefox is safer overall than IE6 currently..)

 

[wdwmagic]

I have had a look at the site in Firefox, and whilst the Flash looks pretty miserable in Firefox, I cant reproduce the problems scrolling that you have. I'll have a look into the window mode you referenced above.