The text you see here is regular HTML, CSS formatted and it resides in a 'div' element. So you might wonder 'what's up?' Well, here's the deal:

FlavaScript enables you to put a layer on top of your HTML, like a lightbox, or an expanding banner.

Now that's nothing new, but if you have ever dealt with Flash on top of HTML you know it is only 'supported' by IE. Other browsers like FireFox and Opera will end up with dead-links, which is pretty useless in this day and age!

So, what's so special about this kit?

The urge to be browser compliant! That's what's special in this kit (besides its ton of features which enable you to do almost anything imaginable)! If you want to show adds to people, this kit will help you reach more people, simple as that.

So, if you have a full Flash site, this little application is completely worthless, but if you run a highly configured HTML setup, this little gadget can get you a long long way!

Make horizontal and vertical banners

As you can see, by moving over some parts of this site, expanding portions shows up. These expansions can be in any size, from any location in 4 directions, so you can make horizontal and vertical expanding banners anywhere on the page with this kit. With a little imagination and the options at hand you can slide out entire sites from a little button!

Throw up a lightBox

The position of the expanding part can be set to an absolute value or a relative value on the X axis. So let's take the lightbox example on this page, in which the image is 500px in width. To get it centered at all times you would use the relative value of -250px and that's it!

Flavascript == unlimited options

By using the power of Flash and it's stage align properties, you can make headers like the one on this page, which will always fill the entire width of the page. You can make Flash re-position all elements according to the page width or scale your images to fit in the clients' browser. Whatever suits your needs, it can be done AND it can be done for everyone to enjoy!

  • Unlimited instances
  • Each 'static' parts can trigger an assigned 'dynamic' part
  • 'Static' part can be positioned anywhere on your page like a regular SWF
  • 'Dynamic' part can be postioned anywhere on your page
  • 'Dynamic' part can be positioned relative on the X axis
  • Drop a border around the 'dynamic' part
  • Adjust the color, alpha and size of that border
  • Make the border cover the entire screen like a lightbox
  • Positioning the static banner is like positioning anything else you have on your page
  • The Flash containers can hold multiple formats: SWF, JPG, PNG, GIF
  • 4 build in transitions
  • Set the speed and direction of the transition
  • Internal and external links can be fed to both parts externally
  • Automatically expand a 'dynamic' part on load
  • Extremely small file sizes

Languages used:

AS2 | JavaScript | CSS

Tested & functioning on:

IE7 | IE8 | Opera 9 | FF3 | Chrome | TheWorld2 > Windows
FF3 | Opera > Mac

I'm looking for Mac and Linux testers as well with all kinds of exotic browsers, so if you run a setup like that and feel like contributing, please make a screenshot and mail it.

IDE support:

Flash8 | CS3 | CS4

Can I use this on a full Flash website?
You probably could, but there's no real point in doing that if you have any knowledge of ActionScript.

The menu on top, does that use FlavaScript as well?
Yes, it does.

Can I put Flash over the entire screen which stretches beyond the stage size of 100%?
Yes, since that is what you see when you trigger the lightBox example. So you could make a screenshot of the entire page, open the expanding part on load and cover it with that image. Next you break away the image, call a function to close the expansion and you've created yourself a nice little Flash intro on top of a regular HTML page. No sweat.

That expanding box on the left, is that an optical illusion?
Yes, it is. But don't be fooled, since even when we are simply 'swapping' files it doesn't mean they don't communicate with each other!

There are default trigger functions being sent from one SWF to the other enabling proper integration and que's for your animations or whatever it is you want to do.

v0.1 - 5 june 2009
The first online testing has begun. Changed some commands to avoid the 'clicking' sound in IE and performing more browser test before we move to the actual first version for release.

My wish-list still contains a few items that need to be sorted before putting this technique to commercial and personal use on a larger scale. One of that being W3C compliance, so hopefully that can be added to the list of things as well.

As for now I simply state, I'm not liable for crashing any browser and use this page at your own risk! If you get a dislocated jaw from the drop, figure something out to get the expenses covered.



© 2009 - FonZ. All rights reserved.