I launched my new portfolio site for Barrett Sonntag Online and wanted to talk a little on the technical aspects of the new all Flash site. After doing my analysis on the World of Warcraft website (worldofwarcraftcom front and back-end analysis) I wanted to see what it would take to combine a little JavaScript, HTML and Flash to create a SEO compliant full page Flash site. I have been shy about using full page Flash since getting my name listed in the major search engines, Flash is notoriously bad at SEO because it’s content is not usually indexable.
I wanted Flash to take the content straight from the page it was loaded it, to make it’s containing page have the XML data it would load. JavaScript provided the method required already, innerHTML. The innerHTML functionality works to take a HTML DOM elements subnodes and copy the structure and body text as a string. It worked great in Firefox and Safari but IE was screwing with the output forcing element names to uppercase and stripping quotes (“) from attribute values. Flash choked on this malformed XML data and I was stuck. I looked for a couple hours for how I could remedy IE’s nasty way of handling innerHTML and decided to sleep on it after posting on a popular online forum WebDeveloper.com. I didn’t get the answer handed so much as the path shown when I woke up the next morning, regular expressions. You can see the thread and my terrible but working solution http://www.webdeveloper.com/forum/showthread.php?t=182391.
With the IE innerHTML issue out of the way I was able to move on to the design of the site. Multiple columns with minimum wide items that auto adjusted just like inline elements in HTML. I don’t envy web browser developers this was no easy task. The next issue I ran into was setting up the Actionscript 3.0 event MouseWheel.MOUSE_SCROLL to fire allowing for the rows to move via the mousewheel or trackpad scrolling. It worked wonderfully in all browsers on my PC and failed completely on the test Macs I had access too. Lucky for me someone had already done the footwork and setup a JavaScript function that told the Flash file when the MOUSE_SCROLL event was being fired since Firefox and Safari on the Mac were not. Gabriel is to thank for this wonderfully easy to setup solution you can find on his site http://blog.pixelbreaker.com/flash/as30-mousewheel-on-mac-os-x/.
I am extremely happy with the outcome of this site as it is that full page Flash I was hoping for while still allowing search engines to see the full content of the site laid out in divs using class and id attributes.