Labs

 A space devoted to experimenting with design and technology.
Apr 20, 2010

Strictly Democratic Tools Build Boredom and Disinterest

Adobe Flash is a plugin. A lot of websites don't require it, but there are many that do. The ones that use it have a worthwhile payoff: exceptional user experience. It's not outdated. It has a wide range of capabilities. And it can do more than you think. This article is not in defense of Flash or promoting any particular technology. I'm writing this to clear up the blatant misconceptions that make up the "reasoning" behind some of these arguments against it. If Flash were to "fade away," as some say it will, it has nothing to do with HTML5, Apple, or the iPad.

Let's back up a little. Here's a tiny portion of web layers that we're going to talk about:

Layers
What is structure?

HTML is a loose syntax; XML is a strict syntax; both are derived from SGML (Standard Generalized Markup Language) which is an angle tag based system shared by both. In a rough sense, this means the two are mildly interchangeable. The most basic of websites are structured from an SGML descendant, complimented by style and script to give the user a pleasant visual and interactive experience. However, the structure of content is NOT a direct reflection of the visual experience. The content structure of a website is a completely separate phase from the design and interaction. The structural markup can be done before a design even exists. It is an architectural decision based on what information is most important, as clearly demonstrated by sites like the CSS Zen Garden (http://www.csszengarden.com/).

Writing markup is about intelligently structuring the appropriate tags with the corresponding and equally appropriate data with no regard to visual styling or extra scripted interaction (beyond necessary). It's not code; it's markup. Markup is the bone structure for your website. Everything that makes it pretty is a separate layer.

Script&Style
What is Style&Script?

Style and script together create a visual presentation layer that generates a display for markup. A visual presentation layer, VPL, can be: CSS and Javascript, Flash, Silverlight, or similar technologies. These languages/platforms are meant to display your content, not change the content itself. The only difference is one set is native, the others are plugin.
Quick Note: HTML5 is an upgrade to markup that includes new tags like audio, video, and canvas. Canvas is a tag in HTML5 that generates a fixed size drawing surface controlled by Javascript. Javascript is a scripting language that creates interaction with the user based on the markup. Canvas is worthless without Javascript. Saying things like, "Replace Flash with HTML5 or Javascript," makes no sense.

Gunbow

Importance of third-parties

Native browser rendering for HTML, CSS, and Javascript is being improved everyday. HTML5 is being adapted, CSS3 looks promising, JS 1.8.1 is stable, and WebGL looks amazing. There are still things that native support cannot yet handle. This is where plugins come in. There are three big issues I see that plugins can tackle very well:

  1. Independent solutions contrary to democratic guidelines.
  2. Ability to throw wild ideas into the mix and see what catches. Guidelines can follow.
  3. Patch a widespread or immediate problem.

It is natural evolution for browsers to resolve a problem that a plugin once patched. Something is built, someone recognizes a problem, said person and/or community patches the problem, and, in time, the problem is healed from the source and the patch is no longer necessary. This evolution is a good thing, but that doesn't make it the most important thing. Developers and consumers can't simply wait for evolution to happen because there is no end; so just start working with the tools at hand and adapt as appropriate. Just because a browser natively supports something does not make it the best option.
Example 1: Flash 10 supports 3D, but Papervision still runs better in many cases. The native option is exciting, but not always best.

Example 2: The W3C was/is debating over what video codecs should be natively supported. Flash resolved this issue years ago by saying, "Here is FLV. Play your videos." It was a third-party solution that patched an over-democratized argument. In time, this "patch" won't be necessary, but right now, and for quite some time, it is salvation to everyone on the internet.

What's the purpose of Flash?

That's a loaded question, but I think it can be defined as an alternate platform for developers with a similar syntax to Java, an easy-to-use outlet for designer expression, a platform to promote synergy between the two, and a widely adapted graphics rich platform for advanced animation, videos, games, and content delivery. Simply put, it's a visual presentation layer similar to Javascript+CSS.
Examples: These three examples demonstrate the versatility and speed of the Flash platform. Video, transparent imagery, sound, music, and content all combine to create an experience that is difficult to recreate with other technologies.

Wrangler Blue Bell Spring/Summer (http://eu.wrangler.com/bluebell/)
Halo 3 Believe (http://halo.xbox.com/halo3/believe/shell.html)
Hungry Suitcase (http://archive.bigspaceship.com/hungrysuitcase/)

Bottom line

Choose what you want, what the client requires, or what will help you finish in the alotted time. A lot of Flash capabilities can be replicated with Javascript, but it's undeniably more work to achieve them. There are situations where Javascript is more suitable, there are situations where Flash is better, and there are also situations where Silverlight shines. *pun* To say that you're strictly an "X Developer," is just limiting your own abilities and forgoing your complete potential as a developer.

Learning new technologies keeps this job from being monotonous and boring. If I knew everything there was to know about Actionscript 3.0 and it ended there for the rest of my life...how boring would my job be? "Oh.. Another website. Sweet."

Flash is just another technology but that doesn't mean it should be ignored. It has a great purpose that clearly cannot be denied. To say that one VPL is more important than another is naive, they're just different. To say that one is completely better than another is naive, they have their own strengths. Let's all just get along, use what you like, and stop making fun of each other.

Case Study: Transformers: War for Cybertron

I recently worked on a project for Transformers. The goal was to create a rich multi-language experience for what would regularly be a static informational website. The initial idea was to make it a Wordpress blog with a JS+CSS VPL. We decided to deviate a little and take the Flash VPL route.

The Flash route allowed our designers to go nuts, design freely, and implement video/audio easily where appropriate. Using JS+CSS would mean having the designers breathe down my neck trying to get animations perfect. That would prohibit me from actually building the core elements to the website. It also gave us immunity from most cross-browser issues and transparency+image color traps (http://www.bigspaceship.com/blog/labs/color-unity-adobe-vs-html/) by using Flash.

The code is neatly organized Actionscript 3.0 shared on Git. It's very extendable, reusable, and easy for any of our developers to jump in and work with.

We're still using a multi-language Wordpress structure for it and all the content is being laid out by the Wordpress engine. Flash is then used to display that content. The Flash pulls the website's HTML and uses it as an XML content structure for loading data. This allows the website to be displayed as a regular blog on mobile, iPhone, iPad, and in situations where Javascript is off. The desktop users are greeted with a slick interactive experience that really immerses you in the world of Transformers, but still keeps to the point of a standard information website.

Flash allowed us to do things that would have taken twice the time in Javascript+CSS, but also let us use the same structural markup as we would have otherwise. The only difference here was the VPL. What are the consequences? None really. If you don't have Flash, you can still see the site. If you do have it, you can really enjoy the experience we intended.

The iPad situation: My personal opinion, and not necessarily that of Big Spaceship's, is that their decisions are fine. It's their choice to make. The pity is that iPad users won't be able to view the rich experiences many developers will build for regular computers, whether it be a Flash-based platform or a CPU intensive JS platform. Flash is not going to disappear just because some people purchased an iPad and own an iPhone. The difference is that those users will get a stripped down HTML version of experiential websites. Yes, it may function and be informational, but it won't be exciting or interactive. If you're looking for stocks and news... Good, you're in the clear (PC guy from the commercials). But if you want to play independent games, experience a creative interaction, or just be mindblown by some unreal designer's vision spilled out on timeline... you're out of luck. Use a regular computer for that. It's ridiculous to sacrifice the years spent learning a great versatile platform that easily translates ideas into creation because of one or two products from a single company won't allow it.

Rants:
  • Every single HTML tag can be styled to look identical. Browsers offer certain defaults to represent the ideology behind what a tag should mean, but does not dictate a strict visual requirement. i.e: An anchor tag can be forced to look like an H1 tag and vice versa. The important difference is what the tags represent.
  • Most articles titles I see are, "Flash vs. HTML." This is completely inaccurate. HTML is structure. Flash is visual. Apples and oranges shouldn't be fighting, it's not kosher.

Matt Kenefick    

Share this Post


                           

Comments


Matt Kenefick     Apr 26, 2010
@Josiah

This is where you have to read between the lines a little bit. If you explore his source, you'll notice everything he used was custom, and sounds awfully like a small port of Papervision3D. The classes Class, Color, Vector3, Matrix4, Geometry, Object3D, ColorMaterial, Scene, Renderer, were all defined in his JS rather than being native.

3D is nothing more than a math trick. The screen you're looking at is 2D so you can never really have a true 3D experience, but you can mathematically simulate it. But then again, you could do that with pen and paper, or with Javascript and CSS even back during the Netscape Navigator days.

You'll also notice that his framerate is about 10fps on a good machine for a very simple example.

Dan Mall     Apr 26, 2010
@Marc: Sorry, but I MUST disagree.

> As I user, I HATE Flash.


Based on what you've said, that's not entirely true. As a user, it seems you hate sites that slow you down for any number of reasons (loading screens, processor hogging, inability to surface relevant information, unconventional UI), and I definitely don't blame you. But those are design and development issues, NOT Flash issues. There are plenty of sites built in HTML/CSS/JS that have the same problems: loading screens, processor-intensive, non-standard UI. Again though, those are design and development issues; to relegate them to a particular technology is a bit close-minded.

> Finally, I just don't see the point of Flash when it is not needed… 99% of the time you can create a fine site without it. Use it for that 1% when there's no other way, but avoid it and go with web standards.


I think it comes down to appropriateness. I certainly wouldn't advocate creating eBay or Craigslist in Flash, but on the same token, it would be a bit silly to do a site like the Corona beach or some of the other sites that Matt mentioned without it.

Dan     Apr 26, 2010
@Marc

The Flash plugin is only responsible for 10% of the problems you mention in your post. Blame the designers and developers, not Flash. I'd put money on the majority of the crashes you've experienced being the result of poor coding and unoptimised code too.

Josiah     Apr 25, 2010
You can now do 3D via HTML5 & Javascript:

http://mrdoob.com/lab/javascript/three/particles/waves.html

http://mrdoob.com/lab/javascript/three/particles/random.html

http://mrdoob.com/lab/javascript/three/particles/floor.html

Marc     Apr 23, 2010
From a *developer's* view, I can't disagree with anything you've said. However, let me speak from a *user's* view. As I user, I HATE Flash. I have it disabled on all my machines. If I go toma site that only offers me a Flash view, I leave the site and go somewhere else. It's just not worth it to me to put up with Flash headaches just for some mild entertainment. Granted, I'm primarily talking about personal surfing, not work-related research. For example, I hear about a new movie and I got to the advertised website and it's all Flash. All I want is to find out who the vaguely familiar actor was I saw in the trailer, but the site gives me a 2-minute "loading" screen and won't let me do anything without Flash. So I end up going to IMDB instead. When I was buying a new car a few years ago, several of the car manufacturers wouldn't let me see their sites without Flash -- I couldn't even find out basic info like a car's MPG! So I removed those models and brands from my shopping list. I figure if they don't want my business, they don't won't get it.

Why don't I like Flash? Granted, I'm on a Mac, so it could be the platform, but Flash is horribly bug slow, hogs memory unbelievably (my browser goes from 200MB to over a gig once I load anything in Flash), and Flash causes my browser to crash and even my whole computer. It is horrible. I also do a lot of surfing on my phone, which does not support Flash (no mobile device truly does, regardless of the rhetoric you hear).

But it's more than that. I also don't like Flash because it creates non-standard interfaces. I've gone to Flash sites where scrollbars worked in reverse or didn't function, where even simple buttons were so poorly done you couldn't tell if they were pushbuttons or toggles that were or on or off. Worse, Flash sites give you no way to copy text or graphics from the site, or grab the URL of a particular page. There was one site years ago that kept crashing me: every time I had to start over from page 1 and navigate (painfully slowly) back to where I was, many levels deep into the site. It was a horrible experience and one of the things ghat colored me against Flash.

Finally, I just don't see the point of Flash when it is not needed. It's a propiretary plugin that may or may not be installed by the user. 99% of the time you can create a fine site without it. Use it for that 1% when there's no other way, but avoid it and go with web standards. With the web going more mobile, Flash is dying and should die. Let it go and let's move on.



Ken Kelleher     Apr 22, 2010
RIGHT ON BROTHER! I agree 100%. I think Steve Jobs and Apple should put their agenda aside of trying to take out Adobe. Adobe and the mac are like Peanut Butter & Jelly, so should the iPad & Flash be...


Matt Kenefick     Apr 22, 2010
@Michael Dain : It all depends. If my FLVs are smaller and perform better than an Ogg, then I might prefer Flash. As I said before, just because something is built in doesn't necessarily make it faster. I would likely use it as a straight video player, similar to YouTube or Hulu. I never said I am against HTML5 and I never said I am behind Flash. The point was that I'm open for whatever is best, but people are jumping the gun on things that aren't even complete yet.

Any misuse of Flash is lack of knowledge. It's often people that are currently learning and experimenting. Years later, they become the experts. It's up to a client or agency to determine what skill level a developer is at to prevent mistakes in production quality websites. You can't stop, or WANT to stop, wacky experimenting in ANY language or platform.

Flash, and no VPL, should be "enforcing" a structural backbone. One of the few KEY points I was expressing is that the structure is completely separate. Good IA and Structure are, or at least should be, separate items.

Michael Dain     Apr 22, 2010
I think your points are well made Matt, however, if we are talking about the 'watch a video' user experience, do you really advocate that flash makes any sense over <video>? It does from the production end where you can settle on a codec, but for the end user, iPad or not, I can't see how they would care what technology you used.
Also much of 'rich interaction' in Flash is merely transitions, you should agree that there is much misuse of Flash because of convenience or lack of knowledge of HTML alternatives. It's certainly important to use what is most comfortable for your team to deliver the best results, but Flash does have disadvantages. It does not enforce some of the structural backbone of HTML, and the rigor of a good Information Architecture , and that 'loading' screen... well I'll leave it at that.

eco_bach     Apr 22, 2010
'creatives are going to have to make nice with developers, and no longer relegate them to the world of "production". Well, sorry, but disagree. The value of a developer has ALWAYS been directly proportional to how much he-she is able to contribute creatively to any project. HTML5 wizadry knowledge is just another asset in a developer's arsenal and shouldn't change anything in the designer-developer relationship.

Tom Nora     Apr 21, 2010
You put the argument(s) in the right context. I'm a long time Flash developer and Apple fan, (and Big Spaceship fan), but I feel Apple is starting to spin out of control - wrong way to build barriers to entry. Also, Flash is FUN to program, instant gratification.

Matt Kenefick     Apr 21, 2010
@Josiah : I'm not sure how that differs from Actionscript, though. New animation libraries and frameworks are constantly being created for every language. Flash and its community aren't waiting around for Javascript to catch up. That's the thing... Javascript is slowly trying to replicate Flash's current capabilities whereas Flash is just progressing forward into new areas and improving the old.

Besides, some platforms, like Flash, offer features other than code that Javascript cannot. Example: Both Flash and Javascript can load images from the server directly, but Flash can also store many images/videos/sounds in separated SWF files that can be later loaded and used. Javascript doesn't have an equivalent.

Josiah     Apr 21, 2010
"A lot of Flash capabilities can be replicated with Javascript, but it's undeniably more work to achieve them. "

Only to an extent, and rapidly becoming less so due to the open (and better) development environment that Javascript & HTML5 provides. Nearly every week, new animation libraries and frameworks are released for JS/H5, chippin' away at what few "you can only do that in Flash" arguments are left.

Heck, http://raphaeljs.com/

I think what's scary for agencies is that it means the creatives are going to have to make nice with developers, and no longer relegate them to the world of "production". 'Course, that's part of the huge shift to digital anyway.

Barry Hannah     Apr 21, 2010
Amen. Sharing this immediately.

I've been truly alarmed at the amount of vitriolic Flash hate occuring, mostly from the Mac user fraternity. Alarmed.
I think we have a lot to thank Flash for - YouTube for one couldn't have reached such ubiquity if not for a widely adopted video delivery platform. Flash rose to the top because it was the best option, better than Windows Media, better than Quicktime, better than RealPlayer, both from a creation and delivery point of view. Better by quite some margin.

I guess to an extent, haters gotta hate.

Thanks for applying some intelligence and providing some balance.

Dale Bradshaw     Apr 21, 2010
...
Using JS+CSS would mean having the designers breathe down my neck trying to get animations perfect.
...

That's the key point right there. There simply isn't a collaborative tool for JS+CSS that allows the same sort of fluid back and forth for seamless experience design between designers, developers and animators. Will there ever be? My guess would be yes. Might even be developed by Adobe. Until then, the friction of conflicting forces is likely to add both frustration and excitement to our lives.

lordB8r     Apr 21, 2010
I enjoyed your calm and poignant perspective. Thanks for the clean comments.

Oh, and btw, Apples and Oranges fighting are only not kosher during Yom Kippur (when playing with one's food is frowned upon, unless you are under the age of 13 - and immaturity is expected).

Matt Kenefick     Apr 21, 2010
Thanks for the kind words everyone! I'd love to hear some of your own personal rants or opinions if you've got 'em!

mpc     Apr 21, 2010
wow, thats the best article that I have read on the whole Flash and HTML5 argument!

Jim Connolly     Apr 21, 2010
Awesome article. Thanks for providing an intelligent argument on the need for these plugins.

Eric Fickes     Apr 21, 2010
Great post Matt! So much of the bloggernets is full of reactionary comments and "I'm picking this side". It's nice reading a post that breaks it down like this without trying to sell any one particular technology or technique.

Personally I'm looking forward to using HTML5 in conjunction with the Flash Platform, and maybe even Silverlight someday.

Rodrigo     Apr 21, 2010
Awesome article, mate!

Michael Crigler     Apr 21, 2010
I agree great stuff and really well stated. Keep up the good work.

Andrei Potorac     Apr 21, 2010
Excellent article and to the point. I'll go and share it! :-)

Owen Corso     Apr 20, 2010
Well written Matt, I love the visuals!

Chris Tate     Apr 20, 2010
Probably one of the best arguments to date. Well done.

Victor Norgren     Apr 20, 2010
Very good and insightful article.


Speak






Submit »