Flash Pageroll / CSS / HTML Integration
So I started working on this PageRoll / PageCurl module...
The guidelines for what I wanted to do were quirky to say the least...
But it turned into a very nice little learning process...
Have a Flash based page curl looking piece that is similar to the ones being used by Intel and a few other companies for online ad banners. The thing I wanted to do differently was to have an HTML/CSS menu under the flash page curl. Intel and others are doing pure Flash banners in their execution... easy to do since you can control everything in Flash... but more involved if you are blending HTML/Flash/CSS.
Before you tell me that this would look way cooler if the menu itself was in Flash... I wanted the Menu to be HTML/CSS so that search engines could find it and I can also update it much more quickly (dynamically from a MySQL database actually using PHP) than if I had to open an FLA file to add/delete/modify a navigation piece. I know I can dynamically build my menu in Flash using XML and all that. But I was building this for a legacy website reskin where Flash navigation is not an option. But we still wanted to add a little bling factor to it.
tags that hold the Flash, Menu and Content. I focused on a few things to make this appear to be hiding CSS behind the Flash. Changing the height, width and zIndex of the Flash and Menu divs as needed.
I have left in my code some more advanced tweaking of the div styles... I went a direction that didn't make sense for this project... but the code is still very handy and I may use it in the future. I started working on tweaking the opacity of the menu div. This actually takes 3 different modifications since opacity is handled using 3 different tags in IE, FireFox and Safari. I got the Firefox one working which I think was the harder of the 3.
I also messed around with moving the menu div to negative locations off screen. I think this would make a really slick menu solution even without the Flash piece. Again, I left this code in place and just didn't call the functions.
A few things you may want to know or learn to use this code.
I also used the FlashObject v1.3c... thanks Geoff. This is the standard workaround for the Internet Explorer "Click or Press space bar" message in order to interact with the flash movie. Damn handy script!
You can see an example HERE
... and download the ZIP file HERE