Flash Websites: the Pros and Cons
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
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.
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
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:
<root> <bio> Hi there my name's Daniel. </bio> </root>
Then we could access its contents inside Flash with a script like the following:
//create our text field
var bio_text:TextField = new TextField();
bio_text.width=400;
bio_text.height=400;
addChild(bio_text);
//our request
var request:URLRequest=new URLRequest('content.xml');
//load our request
var loader:URLLoader=new URLLoader(request);
//when loader has finished loading, call the function displayContent
loader.addEventListener(Event.COMPLETE, displayContent);
function displayContent(event:Event) {
//store the data of the loader in a variable named xml
var xml:XML=new XML(event.target.data);
var xmlList:XMLList = new XMLList(xml);
//change the text of bio_text to what's inside the <bio> tags
bio_text.text=xml.bio;
}
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
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:
- Search engine bots will read the alternative content. This can help make your Flash site search engine friendly.
- Not only bots will read the alternative content, people who don’t have the (correct) Flash Player Plugin will also see it.
- 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:
function redirect(version, flash_url){
var MM_contentVersion = version;
var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;
if ( plugin ) {
var words = navigator.plugins["Shockwave Flash"].description.split(" ");
for (var i = 0; i < words.length; ++i)
{
if (isNaN(parseInt(words[i])))
continue;
var MM_PluginVersion = words[i];
}
var MM_FlashCanPlay = MM_PluginVersion >= MM_contentVersion;
}
else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0
&& (navigator.appVersion.indexOf("Win") != -1)) {
document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n'); //FS hide this from IE4.5 Mac by splitting the tag
document.write('on error resume next \n');
document.write('MM_FlashCanPlay = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash." & MM_contentVersion)))\n');
document.write('</SCR' + 'IPT\> \n');
}
if ( MM_FlashCanPlay ) {
window.location.replace(flash_url);
} else{
//nothing needs to be done, stay at this page
}
}
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>About</title> <meta http-equiv="Content-Type" content="text/html; utf-8"/> <script type="text/javascript" src="flash detection.js"></script> <script type="text/javascript"> redirect(10, 'http://www.example.com/#/about'); </script> </head> <body> <!-- the about content --> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p> </body> </html>
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
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.


XML Photography Template V2 only $40.00 
am i first…..woops……
There are a few major points missed here:
Pros:
True object orientated client side language.
Flex and established application frameworks.
Image compression.
Legal font use(browser fonts are still unusable for most major clients).
Cons:
Lack of mobile support.
Propreitory plug in required – a big thing for open source evangelists.
Problems for non-broadband users(still an issue in developing countries).
Accessibility.
True, I’d argue that accessibility can be addressed during the development process (i.e., a well designed user experience with diverse users in mind can accommodate impairments of many kinds); though it is worth noting that Flash’s communication with assistive technologies like screen readers is limited by the format it uses (no comm., with screen readers on macs, and only really consistent performance with JAWS (I’ve found WindowEyes to be spotty at best).
Also, aren’t there open source flash players too? (of course no one has them).
Lastly, I’ve found that there are some system based inconsistencies in the ways in which fonts render and are wrapped (even with embedded fonts). In one case I have seen text break differentially depending on the user’s monitor style and resolution. While there are some rudimentary controls for setting display type (e.,g LCD); there was no resolution to that. Perhaps a tiny bug in the player, but one worth noting. (The text can also wrap differently depending on the scale of the flash movie… though I’m not sure if it does so differently across browsers and systems
I am from a “developing country”, and the problem happens (sometimes) when visiting foreign sites. but as a flash designer that factor is just another aspect to take into account.
For me the biggest con is the accessibility point, the screen reader problem, has its fixes but it is not an ideal situation.
Very true Rich,
I’m sorry I forgot those.
It’s nice to hear people talk sense with regards to flash. All i hear on web design forums is the hatred towards flash…..
“The content can’t be managed”, “you can’t SEO a flash site”, “why would you want things whizzing around your screen?” blar blar blar!
Yet when you look on their site they have jquery doing the same bloody thing!
Nice one!
The difference is jQuery doesn’t have the negative elements that people correctly identify about flash, e.g. semantic meaning, accessibility, connection speeds, etc. I’m a RIA developer so I’m certainly not suggesting that Flash shouldn’t be used. However, it’s important to realise that it isn’t right for the vast majority of situations. If you can do what you need in javascript then you shouldn’t use flash.
Yep i agree, but people are to quick to jump on the bandwagon ain’t they? But i suppose it depends what your intentions or ambitions are….to become a user interface expert or usability and accessibility expert?
Talking of UI, how many flash site have won awards this year alone? Just a thought.
thx for this informative article and all the links
Great post and great commets as well.
Another con that was missed is speed. Flash is a hog on Mac and degrades the experience to a point where it is barely usable.
Your point about mobile devices is especially important with the recent announcement of certain mobile devices not supporting Flash.
It’s funny, just yesterday I wrote an article about how photographers no longer need to use Flash for there web sites, because everything they need can be accomplished with just HTML/Javascript.
It’s a great counter-argument to your article.
http://thomasjbradley.ca/blog/challenge-no-flash-photographer-web-site
Flash sucking on Macs is probably just as much Apple’s fault as Macromedia/Adobe. “Every time a Mac crashes it’s because of Flash!” – Either the most BS statement Jobs has ever made, or true, meaning Macs suck.
“Flash is a hog on Mac and degrades the experience to a point where it is barely usable.”
that’s total BS. what is this based on? BTW nice sweater vest.
I am a flash designer/developer yet I love to try and make things move with js libraries when I can and if I think it’s suitable. But as much as I love using jQuery, scriptaculous, fancybox etc current js libraries can only do so much.
I don’t see any reason for using flash for basic animations that can be achieved well with a js library BUT there are some amazing sites out there that use flash like it’s supposed to be used. add in some 3rd party classes like PV3D or Tweener etc and you can make some sweet animations that you’re not getting near with any js library.
You’re quite right Thomas, photographers don’t need to use flash for portfolio sites if they want to present their photos in a nice clean way with lightbox, fancybox, scriptaculous or any other library. But if they want to give a more unique experience using flash they have that option also. Flash should be used as it is intended – for a unique and fresh user experience.
must add SOMA in framework list, I think ;)
http://www.soundstep.com/blog/downloads/somaui/
Well, just wanted to mention that google DOES index text from swf’s
Hate to rain on your parade, but there is one very important point missing about flash and SEO.
You forgot to write that google bots actually CAN and DO crawl and index content inside swf files, not only html files…
Check this out: http://www.flashnseo.com/
Completely useless if you’re using external files for your content (XML for example).
Dear Ryan,
Google is capable of indexing content, which is loaded from external resources (like XML.)
As an example:
http://www.flashnseo.com/external-resources-and-indexing-in-flash/
Daniel,
Please read the comments, and check the google results within the link you posted. Google indexes the XML file, not the swf. If anything, that’s more useless than not indexing it, because now I click the search result and wind up on an xml file instead of a webpage.
Woops, sorry Ryan, my bad :-s
Yeah linking to an xml file is definitely worse, I agree completely with you.
I do however remember reading about Google being able to index external content, and after some looking around on the web, I finally found the article:
http://googlewebmastercentral.blogspot.com/2009/06/flash-indexing-with-external-resource.html
In that article it seems that the external content is associated with the parent .swf file. But if this is true for every (dynamic) page within the Flash site is unknown to me.
This is true Mr. Oczujda,
However this only counts for Google, and not for all search engines. The mentioned SEO techniques can be used to make your Flash site SEO for other search engines than Google.
true true about all.. hopefully the flash xmp metadata will work in the future.. I also figured that even though you split up your website with swfadress, it still differentiate each part like this http://www.url.com/#subpage
and google can’t differentiate that as a different url as: http://www.url.com
So its basicly useless, but nice if you want to use the back and front button + linking to parts of the site.
By the way… Regarding SEO and Flash, I urgently recommend you to check the article bellow
http://www.mattcutts.com/blog/google-gets-better-at-flash-with-adobes-help/
You will find there links to popular articles regarding this topic. I suggest you to read the Adobe article.
“Adobe is providing optimized Adobe® Flash® Player technology to Google and Yahoo! to enhance search engine indexing of the Flash file format (SWF) and uncover information that is currently undiscoverable by search engines.”
Another point to mention about flash is the “WebOrb” and “BlazeDS”, there are a few more but these are the most known. This is allows flash to use objects in some back end languages (RemoteObjects).
For example I can create a customer object in Java, do all my back end work on the server (where is should be) then pass my object right up to flash, including player and air, blazeDS and webOrb both map my java, c# ect. object right to an action script object all strongly types so we don’t have to deal with casting and data integrity.
I know that with GWT (Google Web Toolkit) and some other we can accomplish some of the same things with javascript but javascript is not a strongly typed language.
This is a really sweet addition since actionscript 3.0 where you can really do object oriented programming.
There are a lot of great things coming out with actionscript and is becoming a lot stronger of a language.
Another point to mention about flash is the “WebOrb” and “BlazeDS”, there are a few more but these are the most known. This is allows flash to use objects in some back end languages (RemoteObjects).
For example I can create a customer object in Java, do all my back end work on the server (where is should be) then pass my object right up to flash, including player and air, blazeDS and webOrb both map my java, c# ect. object right to an action script object all strongly typed so we don’t have to deal with casting and data integrity.
I know that with GWT (Google Web Toolkit) and some other we can accomplish some of the same things with javascript but javascript is not a strongly typed language.
This is a really sweet addition since actionscript 3.0 where you can really do object oriented programming.
There are a lot of great things coming out with actionscript and is becoming a lot stronger of a language.
Does your site have audio? Does your site have video? If yes, you need to use a chunk of flash within regular HTML/javascript.
Otherwise, your site becomes useless on mobile devices, may or may not be indexed correctly, google can’t jump to the right “section” of your movie from a search result, CPU intensive, breaks my scroll bar, is is generally overkill.
nice lesson~
good information in the article and comments, thanks everyone
Very nice tutorial
lame
Flash support on mobile devices will be much better in the months/year to come with the release of Flash Player 10.1 and the combined efforts of most major mobile phone companies (except the fruit one) working together with adobe on the Open Screen Project.
With HTML5/CSS3/Javascript/Canvas there is absolutely no need to use flash. Everything that can be made using Flash can also be made using Canvas or simply the video tag.
Even games: benjoffe.com/code/demos/canvascape/
IE
Also robot.anthonycalzadilla.com pretty much shows you can have any animation with nice graphics without flash,
Being told pros and cons of Flash sites when Flash has, for the most part, already been relegated to widget/tool use kinda makes this article late to the party. I’ve read better comparisons in DHTML books now pushing 6-years-old. I guess that’s what you get when a 17-year-old kid calls himself a web designer and writes articles.
Thanks ThermodynamicRust for your critical comment.
I don’t believe it’s my duty to surpass the level of the 6-year-old DHTML books you’ve read.
Also this article is definitely not late to the party. The debate about HTML5 vs Flash is hot, thus it’s important to understand the pros and cons of Flash sites.
Also I recommend you read this article.
twitter link should be http:// not ttp://
excellent article!
Thanks Wayne, just got the link changed.
And I’m happy to hear that you liked the article ;)
The fact that Flash is not open source is a pro for me. It means stuff shows up correctly on all browsers. Can’t say the same with JavaScript.
The worst thing about flash is it’s cost.
Your client’s expects Avatar for the budget of a Powerpoint presentation. Add a few rounds of changes to any Flash presentation and you quickly wish you had learnt jQuery, created a video or advised against Flash in the beginning.
I challenge anyone to show me an html, javascript, jquery based css game that will work in 3d as well as flash. In fact show me any 3d jquery or javascript engine that works as well as papervision.
Html is a dinosaur and needs to die. The web needs interaction and animation. Users should experience the web not read it like a news paper.
Computers and the internet are getting faster by the minute able to handle incredible processing loads. Most design and ad firms use flash for the best look and interactive effects on their sites.
Multimedia development will always be better in flash.
look at sites like http://www.thefwa.com/. How many of those are flash sites?
Flash is the future get use to the idea.
There’s truth to what you say, but don’t forget that a) Flash isn’t open-source, which essentially means that if the world continues to count on using it, we’re really counting on Adobe and it’s proprietary software; and b), JavaScript (based) libraries are only continuing to grow – while we may not be there yet, matching the abilities of Flash with raw HTML and JavaScript will eventually be a reality. Just look at what we can already do with HTML5 – http://www.youtube.com/watch?v=v69S22ZBBqA&feature=player_embedded – the second example is exactly the same as Flash-based content, delivered in a non-proprietary format, and one that is probably far more lightweight in terms of resource usage at that. Even that YouTube video itself doesn’t have to be rendered using Flash but in fact can be rendered in HTML5. It’s obviously not a game, and indeed, the effect is created from an Adobe program itself, but its clear that its the end result that counts here.
Am I saying that HTML5 is today’s way? No. I’ll admit that it’s probably true that we’re years away from implementing HTML5 mainstream into browsers, and for now, yes, Flash is the way to build interactive web experiences, due largely to its presence on the web and its proven abilities, and because it is what we have. But I disagree, however, with the idea of simply continuing to use a platform just because our computer’s processing abilities are increasing – what ever happened to the ideas of innovation, sustainability and developing what’s best for the future? Sure it can do it, but why settle just because its convenient? Really, we’re just going to continue to rely on Flash? If you do that then you’re really boxing yourself into a corner where that one solution is all you have. I won’t say that there’s no potential and Adobe won’t pioneer the world and continue to provide for us if Flash truthfully is the future, but if that’s the case, that totally eliminates the possibility for someone else to take a shot at development. Really, if one company is going to build our future for us, then why not just stop moving forward? At the end of the day, accessibility is key, and that means non-proprietary solutions and the growth of universal standards, and as long as we remain stuck with one platform, its that which becomes the dinosaur that brings us to a halt.
Another I stumbled recently is http://www.theflashwall.com – perfect example of how you can use flash with seo using wordpress.
This is really informative article…there is issue with some browsers and flash player and in some OS flash player crashed.. How much javascript will support for that I am not sure about that
I luv this article and I luv Flash, thx for posting this. There is so much more that Flash can do. As far as compatibility for mobile devices, I think we know the true issue is, if someone can create flash for Playstation Portable I think it can be done across the board, it’s just a matter of companies wanting to play fair.
I have a Nokia phone that works well with Flash along with Flash Lite and I have actually seen some open source code out there for programs to read swf files.
I work a bit in the Augmented Reality Realm using the FLARToolkit as well as attempting to program voice recognition for Flash using AS3.
I like all aspects of design, interactive, video, speaking of video we’re missing future development stuff with video which is using FLV.
There is also interactive video stuff you can do that you cant do with Jquery and Jquery has it’s limitations also.
Also I think that as far as usability, basic users or consumers have a general idea about flash and is aware of whats needed to to view the application, especially persons that plays games on facebook and etc. I think the bar is pretty set on that.
As far as content management; you should check out the capabilities of modxcms and flash; here is a pretty decent example of a good cms that plays nicely with flash http://modxcms.com/learn/solutions/flash-cms.html
The design is up to your taste, but the possibility of use modx to manage your flash site is wonderful
This:
“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.”
ia an outdated view. Google has been fully indexing and navigating flash content since June 2008, and you can expect this type of functionality in the very near future from Bing.
http://googlewebmastercentral.blogspot.com/2008/06/improved-flash-indexing.html
This:
“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.”
is an outdated view. Google has been fully indexing and navigating flash content since June 2008, and you can expect this type of functionality in the very near future from Bing.
http://googlewebmastercentral.blogspot.com/2008/06/improved-flash-indexing.html
Interesting article. I learned a couple of things I didn’t know before. I personally love flash but starting to find it difficult to code (learning AS3 and stuff) and finding that WordPress could be my alternative along with Flash modules.
I hate how flash is changing too much in CS5
Interesting article! I’ve found some new ideas for me.
Thanks, Daniel!
Me too ! haha
nice
when javascript will be able to do image synthesis or audio synthesis , i’ll use it lol …
It’s really nice and helpful for me.
Thanks Daniel Apt ! thanks active tuts+
Helpful
Thanks
Thought provoking, and I will have to think about it some more.. saved. Hope to see a good update soon!