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...

Criteria:
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.

Note:
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.

Execution:
In order to pull this off in HTML/CSS/Flash I would need to do some crafty javascript manipulation of the
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.

Hints:
A few things you may want to know or learn to use this code.

I make use of the getURL actionscript code to call my javascript functions. It works well in this instance, but I have read that overusing this in a short timeframe may cause errors. Also... new versions of Flash won't let you test this call locally. If you hit CTRL+Enter to test your Flash movie and you don't see a browser window pop up when you test your Release or rollOver that calls the script... you have to load this on a server and test it in a browser... it's secuirty features you can read about at: http://weblogs.macromedia.com/mesh/archives/2005/08/new_flash_8_pla.html So make sure you publish in Flash 7 or find another way to make that javascript call

I had some difficulty getting the Flash window to display in transparent mode and hide the navigation menu but display the main page content. I had to do some tweaking with the Flash motion tweens and the timing of the javascript window resizing to get it to look pretty fluid. I'm sure someone with more artistic ability could have done better.

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








AHEADOFMYTIME.COM is a full service web and interactive development firm. We offer electronic marketing that is supported by high quality print materials and campaigns for Chicago business. We are also a Microsoft Certified Partner for Network and PC Computer support and troubleshooting. Macromedia certified solution provider is also a title we carry in Geneva, Fox Valley, Oswego and Naperville. Flash is our middle name. Director of multimedia solutions is my title. Jeremy Faust President and CEO. Strategic marketing solutions for your sales efforts. We have done work for names like chevy abc television who wants to be a millionaire drew carey oscar awards oscar statue bridgestone firestone ford alias Disney internet group abc.com search engine optimization, seo, search engines, web design firm, web design firm illinois, web design firm chicago, graphic design firm illinois, graphic design firm, graphic design firm chicago, website design illinois, design firm illinois, web design illinois, graphic design illinois, graphic design chicago, print design chicago, web design chicago, marketing firm chicago, marketing agency chicago
AHEADOFMYTIME.COM is a full service web and interactive development firm. We offer electronic marketing that is supported by high quality print materials and campaigns for Chicago business. We are also a Microsoft Certified Partner for Network and PC Computer support and troubleshooting. Macromedia certified solution provider is also a title we carry in Geneva, Fox Valley, Oswego and Naperville. Flash is our middle name. Director of multimedia solutions is my title. Jeremy Faust President and CEO. Strategic marketing solutions for your sales efforts. We have done work for names like chevy abc television who wants to be a millionaire drew carey oscar awards oscar statue bridgestone firestone ford alias Disney internet group abc.com search engine optimization, seo, search engines, web design firm, web design firm illinois, web design firm chicago, graphic design firm illinois, graphic design firm, graphic design firm chicago, website design illinois, design firm illinois, web design illinois, graphic design illinois, graphic design chicago, print design chicago, web design chicago, marketing firm chicago, marketing agency chicago

View Jeremy Faust's profile on LinkedIn



Copyright 2007 AHEADOFMYTIME.COM Interactive Solutions
Matteson  | Charleston  | Bishop Hill  | Rosemont  | Des Plaines  | Henry - Illinois IL
.......  Web and Website Design and Development  .......



Listed in the Marketingtool.com Aurora, Illinois Marketingtool.com Directory!