Who Needs Flash?

I have a bumpy relationship with Flash technology. I love to hate it, and hate to love it. It’s an essential element of the online experience, allowing some amazing functionality (when it’s used correctly) like video, interactive graphs and charts, and the interactive extension of capabilities that you simply can’t do with HTML, CSS, or JavaScript.

I’ve never been a “Flash guy.” I don’t know much about ActionScript, and I’m not the first person you’d ask to create a Flash application. I’ve done my dirty-work in Flash when necessary, but by and large, I think I’ve always avoided it. I have always preferred to do things sans-plugin; no download or extensions required. You can actually do a lot more with HTML, CSS, and JavaScript than most people can imagine. Even without the amazing new features that are rapidly approaching in HTML5 and CSS3, the HTML and CSS of today allow you to do some pretty impressive stuff using traditional methods of web design.

An Experiment: “Faded”

To prove this point (perhaps to myself), I started working on a game. No Flash, no fancy plugins, just HTML, CSS, and a little bit of jQuery programming. As it turns out, this was a challenging and tedious task, but it wasn’t as difficult as I had expected it to be. I started to build out a few interactive puzzles and tied them together in a fictional story, and I really started to have fun with it.

If you’re interested, you can check out the game here (I still have some testing to do in Internet Explorer, but any other browser should work fine):

http://kyleschaeffer.com/faded/

Let me know if you have any issues…HTML is definitely not meant to be an interactive game engine, so I might have some kinks to work out along the way.  There are only a few puzzles to solve, but you can sign up for updates when you complete the game and I’ll let you know as I add more. If it’s something that people seem to like, it will be one of my many ongoing projects.

6 comments

  1. Claire says:

    Wow…you’ve made me excited to get back into html/css–that interface is gorgeous! Would you say it was worth the extra legwork? I like steering clear of flash whenever possible, as it doesn’t render on iphones and ipads.

    • Kyle says:

      I think it was worth the effort, as I’m pretty terrible with Flash. I am able to sketch up the puzzles in Photoshop and insert everything as transparent PNG images. Really the only work was scripting a few things up in jQuery, which wasn’t as difficult as I had imagined at first.

  2. Jeff says:

    Impressive!

    I ran across your website while researching some issue and just started reading. Everything here is very informative. I’ve been given a task at work that involves me creating web content, which is why I started the research at all. I needed some information on some issues I’m having, but I got completely side tracked by all of the other content on your site.

    I was similarly attracted to the headline “Who Needs Flash?” because the task I’ve been given involves web content delivered the Apple mobile devices. I’m of the opinion that the less flash, and the smaller the graphics / etc. the more impressive the site. So we’re interested in really simple designs, but designs that can deliver maximum experiences. Your “Faded” experiment is really interesting for those reasons.

    But you asked for feedback, so here it is: I pulled up “Faded” on my iPad (1) and there is a spacing issue in that browser. While the page loads in Firefox 3 with whitespace between the sheet of greek (on the left) and the window in wheel images (on the right), these are overlapped in the iPad display. Also, the wheel image is a translucent image, fully visible, just subordinated to the note page image. However the window image is fully opaque, but set behind the notepage image. It is only visible from the top third or so, just above the the horizontal split in the window panes. The lightbulb / string load in right at the top, apparently as intended.

    Viewed in landscape the copyright for KS appear on the right, but vertically positioned in the middle of the page. It appears at bottom right (apparently as intended) in the portrait mode.

    Maybe that helps, maybe not, but great work either way. Very inspirational. Keep it up!

    • Kyle says:

      Jeff, thanks for the feedback! I haven’t had time to test the game on an iPad, but I do know about the semi-opaque behavior of the cypher wheel (on the right) overlapping the paper (on the left). I did this intentionally in case someone has a lower screen resolution. On a PC, when you hover your mouse over the cypher wheel, it fades from semi-opaque to fully opaque, allowing you to see through it (so you can see the red glyphs behind it).

      I guess the unintended behavior with that is that on a touch-screen device (like an iPad), there is no concept of a “hover,” so you’ll be stuck with only the semi-transparent cypher wheel. I’ll think about that and consider re-positioning the content so it works on a multitude of devices.

  3. Periko says:

    As you comment, Flash is really useful when is used correctly. I have to say I am a Flash fan, I do lots of Actionscripting and the possibilities are infinite when you combine it with XML, DDBB, etc
    .
    Definitely, there are many things HTML and CSS can’t do regarding interactive applications (not talking about games). Coming to visual effects, there are applications to where they cannot get even closer.

    However, this game you are doing proves the excessive and pointless use of Flash many web developers have done.

    From my point of view, Flash should be used for RIA or very special effects and presentations that either, cannot be done with anything else or take too long to do with any other tool.

    As Claire said, I am keen to try again on my own and get back to my HTML and CSS design.

    • Kyle says:

      I’ve made the best use of flash when utilizing the awesome OpenFlashChart for dashboards, but now, the new HTML5 <canvas> made that pretty much obsolete in my mind. Flash still has it’s place, at least for now, but the features of HTML5 are in direct competition with Flash and Silverlight technology, and HTML5 is winning, big time.

      I wouldn’t bet on Flash sticking around for much longer, other than serving as a fallback video service in older browsers.