Doublehops

Last week, we at Sputnik Agency pushed live the site we had been building for our parent company Kit Digital. What I like most about this website is that it required us to include dynamic Flash navigation that had little overhead and to have the flash headers and html update seamlessly without reloading the page.

Project platform

We decided to go with WordPress as the project required a good CMS that was easy for the client to use and was quick and easy to develop.

Flash navigation with little overhead

There are two main flash headers that include navigation. This navigation needed to be dynamic in the way that if new pages were created in WordPress, the flash navigation needed to include these also. Having the navigation work dynamically this way can create an undesirable overhead as generally this would require mulitple calls to the database.

I overcame this by creating WordPress plugins that used hooks to create XML files when pages were added, updated or removed. These XML files included hierarchical page information required by the navigation. Therefore when a page is loaded in the front-end, the Flash would just read the XML file rather than force PHP to make database query requests. This resulted in the pages loading faster and reducing server overhead.

One other benefit of using SWFAddress is that although page loading does not occur, you can still click back through the pages of content you have loaded. The browser will not behave this way with standard content replacement using AJAX.

Seamlessly update flash header and update content

The next task was to allow links (whether clicked from the Flash navigation or HTML navigation) to update the Flash navigation and HTML without reloading the page. This seemed like a very difficult task and something I had not seen before but we managed this using SWFAddress.

Using the SWFAddress Javascript library we could update the URL in the address bar which would trigger both the HTML and Flash to change their behaviour. Once the the change was caught I used jQuery to make a request to another custom WordPress plugin that would pull page content from the database and then update the HTML without needing to reload the page. Clicking on the Flash links did the same.

The end result is a very sleek and fast loading website where the content is completely CMS driven.

To see these pages in action, visit these links: VX Platform, Global.