April 20th, 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.

 

  • Ability to throw wild ideas into the mix and see what catches. Guidelines can follow.

 

 

  • 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.