Advertisement
  1. Code
  2. Flash
Code

Flash Websites: the Pros and Cons

by
Languages:

Flash is a tool which enables designers and developers to build amazing websites (as you'll have seen). However it isn’t always easy to create or manage a Flash site. We’re going to discuss the pros and cons of doing so.

The Pros: Graphics

Flash Website Graphics

Animation:

Flash is a great animation tool, you can use tweens and/or frame by frame animation to create animations. These days jQuery can create some nifty animations (click on the links for transitions), but I doubt that jQuery would be capable of creating a transition similar to the ones found on Davi-T’s website.

3D:

Since the advent of Flash CS4 it is possible to work in 3D (well, sort of) the 3D in Flash CS4 allows you to move objects around in 3D space, however these objects won’t have depth. Luckily there are several ActionScript libraries which are capable of creating some amazing 3D graphics. Just look at the Papervision3D site. There are of course other libraries than Papervision3D, like Away3D and FIVe3D.

(Web)Camera and Microphone interaction:

With Flash it’s not that difficult to access the webcam and/or microphone. If we’d want to use either of those, Flash would be the easiest (online) solution.

Browser consistency

If you have ever developed an HTML / CSS site, you have probably encountered browser inconsistencies. Luckily Flash sites don’t have any inconsistencies throughout browsers, there are actually only two things necessary to get a Flash site working. The browser must have the (correct) Flash Player Plugin installed and ideally JavaScript should be enabled (actually JavaScript is not necessary to get Flash working, however JavaScript is often used in combination with Flash, like SWFObject and SWFAddress).

So is this is a big problem? Not really. Adobe states on their site that content for Flash Player reaches 99% of internet-enabled desktops. And W3Schools states that in January 2008 only 5% had JavaScript disabled. Over the years this amount has been decreasing consistently. It’s safe to say that a vast majority of users will be able to use your Flash site, and we’ll discuss later how to make your site usable for people without the Flash Player Plugin and/or JavaScript.

Luckily there’s a solution to this, namely SWFObject. SWFObject is a JavaScript script which is able to display an alternative content to people who don’t have the (correct) Flash Player plugin, we’ll discuss SWFObject more thoroughly during the SEO part of this article.

The cons: Browser Inconsistency

Ok, sorry guys, I haven’t mentioned one small browser inconsistency. Because of a patent ruling, plug-ins which are loaded by the use of <embed>, <applet> and/or <object> tags are only interactive after the user clicks on them. Now this actually only seems to happen in Internet Explorer, meaning that in IE your Flash site won’t be able to respond to the user before it has been activated.

Flash Website Browser Inconsistency

Again SWFObject can help us remove this click-to-activate behavior. By simply embedding a Flash movie with SWFObject, the click to activate behavior disappears. On Kirupa there’s a great tutorial explaining how to use SWFObject to solve the embedding problem.

Content Management

Flash Website content management

With any site that you run or own, you'll want the freedom to manage the content within it. The most important thing is that you go dynamic; load your content externally so you're free to change it as often as is necessary. Use static text fields only if you’re sure you’ll never change the text inside those fields.

It's very common to store your content in an XML file, then within your Flash site you’ll load this XML file and display its contents.

Here an example, we have our XML file named content.xml:

Then we could access its contents inside Flash with a script like the following:

Now that our content is stored externally (not inside our Flash site), it’s easier to manage it.

Luckily there are of course Content Management Systems (CMS) specially built for Flash, which make content management a lot easier. On Designm.ag there’s a good article to read, 15 of the Most Promising Flash CMS Solutions.

SEO

Flash Website SEO

Before we even start discussing anything about SEO, it’s important to know how search engines work. Little programs "crawl" over the web in search of content which can be indexed to a search engine. These programs are called bots, spiders, ants and probably something else too.

These bots will index the HTML content of a page, though (here comes the problem) Flash is simply embedded in the HTML of a page, so the search engine bot has no idea what’s inside it. If we want search engines to index our site, we need to point them to HTML content which it can index.

So now we really can start talking about SEO, what is SEO actually? Well Wikipedia succeeds in explaining it spot on:

Search engine optimization (SEO) is the process of improving the volume or quality of traffic to a web site from search engines via "natural" or un-paid ("organic" or "algorithmic") search results.

Basically we have one problem which we’re trying to solve:

“How can I make the content inside my Flash site accessible to search engines?”

Luckily there are several solutions. Let’s go through them one by one:

SWFObject

SWFObject is a JavaScript script which makes it possible to display an alternative content to the user, if he or she has no (or an outdated) Flash Player Plugin. And if the user doesn't have JavaScript, it degrades gracefully. SWFObject has three advantages:

  1. Search engine bots will read the alternative content. This can help make your Flash site search engine friendly.
  2. Not only bots will read the alternative content, people who don’t have the (correct) Flash Player Plugin will also see it.
  3. As already mentioned in the Graphics section, SWFObject removes the click to activate box in Internet Explorer.

However SWFObject has one small problem, it will display an alternative content for the whole Flash movie, of course it is a bit too much to display all the content of our flash site on one page as alternative content. Ideally we would want to display the alternative for the specific page the bot or user is visiting.

Now I haven’t found a well documented solution, however I’ve decided to use a combination of Flash detection and SWFAddress. Let me first explain what SWFAddress is.

SWFAddress

George Kendros explains in his tutorial Build a Simple Website Template Using SWFAddress spot on what SWFAddress does:

SWFAddress is a Javascript/ActionScript library which gives you the power to change the browser’s URL, add entries to its history list and fire off ActionScript events when the URL changes. It also allows search engines to find specific content in your site.

With SWFAddress we can utilize so-called deep linking. A deep link is a link which points to a specific page instead of the home page. This means we can use SWFAddress to link to a specific page inside our Flash site.

So what are we going to do?

First we’re going to build an HTML site, this HTML site will be for bots and users who can’t view our Flash site. We’ll also use a Flash detection script, which will redirect the user to the Flash site, if the user has the correct Flash Player Plugin. The redirecting will use deep linking, thus we can redirect the user to the same page, but within the Flash site.

How do we detect if the user has the correct Flash Player Plugin installed? Well there’s an article on Kirupa named Flash Detection Scripts. There you'll find a Flash detection script, which I’ve edited a bit:

In our HTML page we can now call with JavaScript the function redirect, which will only need two parameters, namely the Flash Player version, and the URL to the page it must redirect to if the user has the correct Flash Player Plugin. Let’s say we have the following HTML Page:

We'll focus on the 8th line. What will happen is the following; if the user has Flash Player 10, then it’ll redirect the user to http://www.example.com/#/about and afterwards SWFAddress will use deep linking to display the correct page, inside the Flash site.

Development

Flash Website Development

Creating a Flash website is tough, for multiple reasons. First you’ll need to spend a lot of time coding everything, we need to write code for almost everything. We need to code dynamic graphics, we need to code the layout, keeping things positioned where we want them. We need to code and/or animate transitions between the pages. We must load content and also display it. Creating a Flash site takes a lot of time and it’s complicated, do not take it lightly.

Luckily for us there are several frameworks which can make developing a Flash site easier. These frameworks might differ in what they offer, but each framework can help lighten your workload in a specific area.

Here are some frameworks, which might help you during development:

Should I have a Flash site?

I truly love Flash sites, when made properly they just look so incredibly beautiful, however there is one very important thing to remember:

Sites are about the content they communicate to the user, Flash just provides one way to display that content.

What precisely do I mean with this? Well a blog wants people to read the posts, so its design must work in a way which allows the user to easily read a post. Flash is not needed for this.

However if you’re going to create a photography portfolio site, then you want to show the the content (images) in an easy and simple way to the user. Clicking on links and waiting for the images to load is not a great user experience. Flash is a possibility to provide the content in a more intuitive way. Lesse Pedersen’s site uses a great navigation to serve the content (images) to the user.

There is also a great post on the site Wake Up Later named 6 Places that Flash Does Not Belong which I believe you all should read.

Thank you

I've once again had a great time writing for Activetuts+, I hope you’ve learnt something and why not join the discussion? Leave a comment, and you can of course find me on Twitter, @DanielApt.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.