TyZ - Thijs Broerse - Flash Developer

Building the ‘VARA – Biografie‘ website.

When I saw the design of de website I had to choose if we should use Flash or HTML. Mostly when design and animation is leading I choose Flash. If the content is more important and there is a lot of text, I choose HTML. But for this site the top of the website with the timeline and media player has video and animations. But the rest of the site is mostly text. So 100% Flash or 100% HTML didn’t fit our needs. The best solutions would be if we combined Flash and HTML to get ‘the best of both worlds’.

Best of Flash:

• Animation
• Video
• No page reload

Best of HTML:

• Searchable
• Nice text handling
• User-friendly
• Supported on all browsers

So we use Flash for the menu, timeline and media player. The rest will be HTML.

But combining them doesn’t always mean you get the best of both worlds, you also get the worse of both worlds:

Worse of Flash:

• Not searchable (I know there has been some improvements , but still it not as good as HTML)
• Not supported in all browsers (like on the iPhone)

Worse of HTML:

• Page reloads on every click

In most sites with HTML and Flash (like Youtube) HTML is leading. It’s a HTML site with some Flash elements. That means if you navigate in HTML you get a page refresh.  So the Flash on the site will also be reloaded. The Flash needs to reload and initialize all its content again. And if you have an intro animation (like the timeline has) it will be played every time the Flash is reloaded. Since the timeline has a lot of data (all timeline items) it will reload on every click. That will generate a lot of traffic and result in a slow site.

AJAX

We need to get rid of the page refresh. HTML has a solution for that: AJAX. So we use AJAX to change the HTML content when navigating to another page.

URL

But then we have another problem: the URL doesn’t change when navigating. So people do not know how to deep link to the page and the browsers’ back-button doesn’t work. In Flash we have a solution for that: SWFAddress. SWFAddress can also be used in JavaScript. SWFAddress dispatches an event every time the URL in the address bar is changed. Both Flash and JavaScript can listen to those events.

Flash and HTML Communication

Now we also have a great way to communicate between Flash and HTML, just change the URL in the address bar. When a user clicks in the page (Flash or HTML) and we need to navigate to a different page, the URL is changed. Both Flash and JavaScript receive an event. Based on the new URL Flash and JavaScript load the content they need. In this way JavaScript and Flash do not have to know about each other and there is no direct communication between them.

No Flash or JavaScript

But what if the user does not have Flash or JavaScript? Since we use Flash and AJAX to load the new content we need to have a fallback when someone does not have JavaScript (AJAX) or Flash. So we could build a different website pure HTML for those users. But then we have to maintain 2 websites. Better is to just have one HTML website and replace the parts which are Flash. But what about the links? Do you need to create 2 URLs for every page (one HTML, one AJAX)? We have a trick for it. This is how it works:

How it works

• Every page has his own unique (SEO friendly) URL, like ‘programma/28/twee-voor-twaalf’.
• The first time the user visit the site the server generates a complete HTML version of that page.
• When the page is loaded JavaScript replaces some of the HTML for Flash and passes the ‘old’ HTML content (the ‘innerHTML’)  to Flash.
• We use a XHTML tidy JavaScript to make sure the content is valid XML, so we can easily parse it with Flash. You need a JavaScript to fix the HTML since some browsers will break the HTML. Flash uses the XML to build up the content:
  • The Flash for the menu receives the HTML menu and creates a menu based on that. This HTML menu is generated by the server and can be changed in the CMS.
  • The Flash for the timeline receives a part HTML that contains the links to the HTML files that contains all the content for the 3 parts of the timeline (programma’s, gebeurtenissen, personen)
  • The Flash for the media player receives a list with all media items of that page and builds a carrousel based on that.
• JavaScript searches trough the HTML and places a ‘#’ for the URL of every link.
• When navigating to a ‘#’ link, you won’t get a page refresh. The browser just places the URL after the current URL in the address bar after a ‘#’.
• When the user clicks on a link in the Flash, Flash places the URL in the address bar after a ‘#’ using SWFAddress. The same happens when the user clicks on a link in the HTML, since we placed a ‘#’ in front of every URL.
• When the URL in the address bar is changed, SWFAddress dispatches an event. Both JavaScript and Flash receives the event. The timeline Flash searches through his list of all items and selects the new item (based on the URL). The media player Flash loads the new media content for the new URL. JavaScript loads the new HTML content with AJAX and replaces the ‘old’ HTML.
• When the HTML is replaced. JavaScript searches for all script-tags and evals them. In this way we can even have Flash in the HTML content.

The advantages

• When you do not have JavaScript and/or Flash you still can see all the content. (Although you can’t watch the videos, you can still read all the content). (Just switch off JavaScript and check out yourself)
• Both the ‘normal’ version as the non-Flash version has the same URL. So when you switch on JavaScript on a subpage you will see the same content, but now with Flash.
• We have the perfect Search Engine Optimization (SEO).
• On the first day of release Google already indexed the home page. Now the complete site is indexed and searching on the (Flash) content the ‘VARA – Biografie’ site will be high in the search results.
• We just have to maintain one version of the site. We know for sure the Flash version and the HTML version of the site have the same content.

This entry was posted on Tuesday, September 29th, 2009 at 18:03 and is filed under MediaMonks, English, Tricks, Work, Flash, Video, Portfolio. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.