integrate browser scrollbar with flash – part 2

After my last post on integrating the browser scrollbar with flash a friend of mine (Tim Keir) instantly pointed out that there is a small library called swffit which he said achieves a similar result. Don’t you just hate it when that happens!

However while swffit is a great library (and I encourage you to check it out), it achieves a somewhat different result than what I was trying to demonstrate. swffit basically sets the height of the swf to 100% as long as the browser height is greater than x, if the browser height is reduced below x then the flash movie’s height is set to x and a browser scrollbar appears. This is great for full-page flash movies when viewed on a small screen because the user will always be able to scroll down if there screen isn’t big enough.

So obviously my explanation and example require a little reworking to clarify why you might want to implement something like this. So that’s what I’ve done. This time round I’ve abandoned the idea of creating an experience similar to an html page and focused on more of a ‘flashy’ example. Its still very basic, but it should give you a better impression of the possibilities. The second example can be viewed here.

This time there is also a scrollbar along the bottom of the window, as well as a 3d cube which replaces the checker panel. The side scrollbar controls the cube’s rotation around its x axis and the bottom scrollbar moves around the cube on its y axis. also in addition to this clicking and dragging anywhere on the flash content (or pressing the arrow keys) will also update the scrollbar locations and in turn feed back into the flash movie. The thing i love about this concept is that the user will see the scrollbar, drag it down and expect the page to scroll, however in this case the cube rotates… wow, amazing they think to themselves for half a second.

The source files can be downloaded here.

 

add me on g+ and twitter

3 Comments

  1. This is great! Thank you for this. However this only seems to work on webkit browsers.
    Works in Chrome and Safari but does not work in Firefox, IE, or Opera. Is there any tips you can give to me it work cross browser?

    Thanks!!

  2. Oh real… damn, I haven’t actually tested in all browsers, my bad. My guess is that some of the javascript I’ve used isn’t cross browser compatible. If you end up tweaking it to work in non web-kit browsers let me know.

  3. Cool. :)

Submit a Comment

Your email address will not be published. Required fields are marked *