Roddeh

SEO for “All Flash Websites” using Wordpress.

Having worked almost exclusively as a flash developer for the past 5 years I determined that my own site should have a strong flash flavour to it. I considered combining standard HTML with flash elements for navigation, headers etc but I was never really at peace with any of the concepts I came up with. At the same time I didn’t want to suffer not being indexed by search engines because I elected to build my site as an all flash website. So after much research and experimentation I have come to the current implementation that uses the following technologies to achieve an all flash website that will still be indexed by search engines.

• Flash/Actionscript 3 for the body of the site.
• SWFObject to embed the flash content.
• Wordpress to manage the content.
• SWFAddress to manage deep linking.

Hiding the HTML

When a user such as yourself navigates to my site what you see is an all flash website. However if you view the source of the page you will notice there is a lot of HTML that never gets displayed. This is achieved with the following CSS.


html {
height: 100%;
overflow: hidden;
}
#flashContent {
height: 100%;
font-family:arial;
font-size:12px;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #ffffff;
}

So, when a user in a browser visits the site they will see the flash content. But a search engine crawling my site will see the flash and the HTML and index my site accordingly. Who knows how long this will work before search engines ignore HTML that “overflows” but for now, it works

Wordpress as a CMS (Content Management System)

Functionally I wanted my site to behave pretty much like a blog. After a bit of research I settled on Wordpress as a blogging engine as it offered all the features I needed. I then created a WP theme that would allow the flash content to take over the page (using CSS as described above). I also needed to create a way for flash to retrieve the content from wordpress. This was achieved with a fairly simple script that accessed the WP database, retrieved the specified content and returned it as JSON (Javascript Object Notation) though you could just as easily return it as XML.

You can download the Wordpress to JSON script here. Be sure to change the variables on lines 132-135.

Tilefile later became Storyz and produced a Ruby on Rails app that focussed again on media sharing but this time with an element of “timeliness”.

While working as a project manager I kept my sanity by working on a side flash project that used the media from Storyz and allowed users to arrange it spatially, apply effects add stamps etc. I was also responsible for building the server in RoR that supported saving the canvases, sending them to friends and so on.

The Storyz Canvas app was never deployed publicly but here is a video cap of it in action.

Tilefile was a web 2.0 company that focussed on social media sharing.

As the lead flash developer I worked with a group of talented programmers to produce the fully flash front end to the product.

Unfortunately the service is no longer running but here are a couple of video captures.

Version 1 built in AS2

Version 2 built in AS3 using Flex 2

An example using papervision shaders with all source code provided.

I was recently required to investigate the shaders now supported in Papervision 2.0. Usually I would start with the documentation when trying out something new but it seems the folk at PV are so flat out with new features, stringent documentation is on the backburner. I ain’t complaining though, if it was a choice between improvements and thorough documentation gimme improvements all the way.

So, when documentation doesn’t paint the full picture google is the next stop for me. Googling “papervision shaders” produced no shortage of hits, surprise surprise. Unfortunately most hits were sweet demos of what I needed to achieve but no code Those hits that promised to be tutorials all pointed back to a single tutorial posted on brighthub. The content of the tutorial looked promising and the demo swf showed exactly what I needed to achieve. The author of the tutorial was also kind enough to share all the code and related media files required to produce the demo.

I downloaded the sample files and was able to get it all compiling without much trouble at all. Sweet, I was making progress. However, upon looking at the code my progress came to a halt, wow was the code obtuse. Sure, once I understood what was going on I admired the elegant solution that was provided but the purpose of downloading the code was to learn how to use shaders, not how to write a beautifully OO demo.

Now, having never provided any demos of my own I feel rather hypocritical dissing the hard and contributive work of others in the flash community. It is not my intention to discredit the work of others but rather encourage those pioneers who are able to consume the latest in tech advances faster than us noobs to feed it back to us in as palatable format as possible.

That, said I have written my own demo on using shaders in Papervision and tried to keep it as plain and stupid as possible. So, without further adieu here is the code and you can click the image below to launch the demo.

I have decided that instead of providing a lengthy explanation of how it works I would just comment the code and hope that it explains itself.

Being my first demo post I am eager for feedback, please keep it constructive

Welcome, and thanks for taking the time to check out my blog/portfolio/personal website.

About Me
I grew up and continue to live in Sydney where I enjoy the toasty summers and bear the rather average winters.

I would like to say I am a self-taught programmer but really I owe much to the peers I have worked with over the years. That said, I fancy myself a pretty good mentor and have certainly passed on my knowledge to others too.

Nerdy Stuff
I have been working in IT since 2002. Starting as an HTML monkey, I gradually made my way through XSL/XML, Javascript, Php etc before finding myself seduced by the fancy effects of Flash/Actionscript. Since then I have been working primarily in AS, producing sophisticated web apps (RIAs if you like your buzzwords). More recently I have been dabbling in Ruby to both compliment my professional skill-set and to support some of the more ambitious ideas I have that can not be done in Flash alone.

And the rest…
Outside of work I like to keep myself busy with plenty of activities including surfing, yoga, pottery, snowboarding and cooking. Don’t worry, I balance all the healthy stuff with the odd Friday night on the town I also speak pretty reasonable Japanese and know enough Mandarin to order my favourite dishes and cop a smile from the waitress.