With the advent of HTML5, Flash CS5, and all the brouhaha about them both I thought I would jot down my thoughts on the matter. This post is about Flash CS5 and HTML5, it is not about Flash CS5 vs HTML5.
First though, here is a précis of developments…
Adobe have recently also brought out an HTML5 pack for Illustrator and for Dreamweaver.
Apple have reversed their decision to disallow Flash CS5 apps compiled into iApps onto the iTunes store (although the iPhone and iPad still do not have a flash player).
Apple have just announced that they will not be bundling the Flash Player with their OS – it will have to be manually downloaded (http://www.guardian.co.uk/technology/blog/2010/oct/23/apple-flash-war-steve-jobs-continues)
Browsers have started to recognise HTML5 (with exception of IE8) and CSS3 – not all of it but a fair amount.
So where does that leave us? What can we do with all these technologies and what tools are actually out there, and which are best? Well, first let me clarify what HTML5 actually is – it is HTML5, JavaScript, and CSS (v3).
For example, HTML5 allows you add various attributes and elements within a web page that get the browsers to do the work of validating (for example) without you writing any JavaScript. Of course, most of the really fancy stuff you see at the moment labelled HTML5 uses JavaScript heavily.
Having done some research into what can be done using the latest browsers (except IE8, although IE9 will rectify this a little), here is what I have found out:
Adobe have made Dreamweaver and Illustrator able to use HTML5 – the latter allows you to output to SVG (which it has done for a while) but you can also output to multiple resolutions (artboards), viewable in a browser as one page.
Aptana now has a beta version (v3) of their popular web development tool, AptanaStudio. It recognises HTML5 and allows the creation of websites from a standard boilerplate set of files (cf http://html5boilerplate.com/). It also recognises JQuery as a standard JavaScript library when you are writing code.
With HTML5, CSS3, and JavaScript you can create some fantastic animations, play around with video, and so on (there are lots of examples of the web).
With Dreamweaver, Illustrator, AptanaStudio you can create web pages that will work on a mobile device, a tablet, and a desktop machine – one page, multiple setups. Either as separate pages or as 1 page that adjusts itself.
More and more tools are coming out that help with this. For example I would recommend looking at Balsamiq (http://balsamiq.com/). This is a lovely wireframing tool that lets you create layouts in a sketch drawing type of way. Just drag and drop your page components in any order you wish, and use the resulting diagram to show to your clients or to your web designer.
Use this along with Napkee (http://www.napkee.com/). Napkee will then convert the mockups created with Balsamic into a full web page – HTML, CSS, and JavaScript all written for you. Absolutely brilliant (who needs Dreamweaver!)
There are some lovely JavaScript libraries out now that enable you to do a lot – Raphaël, JQuery, JQuery mobile, etc.
What does all this mean?
Well it does not mean the death of Flash. What we are seeing here are things that Flash was able to do 10 years ago.
But it is certainly interesting.
The basic animations can now be done easily without Flash. You can have vector artwork easily (using svg and the Raphaël library), and it can be animated easily.
But, what you don’t have is…
…there is no one application (i.e. a GUI) that will allow you to visually drag and drop, add code easily (not that I have found yet at any rate) for animating using CSS3, HTML5, and JavaScript, with the JavaScript libraries of my choice
…when creating animations you have to manually create pages, and worry about HTML, CSS, and JavaScript
…animation can now be done with CSS and with JavaScript – which do you use?
What we do have is…
…Flash Cs5 – lots of great Actionscript libraries for doing things (3D, Microphone access, Webcam access, and so on)
…several great JavaScript libraries that take most of the pain out of animating your web page elements
…CSS3, HTML5
…new tools (Balsamiq, Napkee, and so on) that show you just what can be done
What would be great would be an application like Flash, but that when you create a new Project it could be an HTML/JavaScript project, or a SWF/ActionScript project – but the gui will just be like Flash – timeline-based, drag and drop, etc.
Flash suffers (and has done for a while) in trying to be two things – an animating tool and a scripting tool. The last few versions have not given us much new for doing animation (yes I know we have IK and springs- but it does not go far enough I feel), and the Motion editor panel I find just too big and too complicated. The interface I feel is clunky and needs sorting out (windows/panels do not always stay where they are put, or even stay at the same size).
Take a look at ToonBoom’s Animate[Pro] application (http://professionals.toonboom.com/animation-software/animate), look at their options for animating – look at True Space – how I wish we could have that in Flash!
At the moment Flash is about the only application around that gives us a GUI, has a robust interface for creating animations, and makes it easy to code with the animations as well. It is not the only application out there, but it is the standard application at the moment for animation etc. It does make things easier for animators, but it could be so much better!
What will that happen? Who knows, but Flash ain’t dead yet, and things are certainly getting interesting!
———————————————————-
Having just posted this I then noticed Adobe have announced yesterday that they are working on an application called the Edge Preview tool which enables you to create animations in a timeline environment and output them to HTML5. Great minds … 
Check out the preview video below: