I’m not talking about the superhero here; I’m talking about the video and animation creator and player that millions of people came to love and use on a daily basis.
In its heyday, flash was pretty much a system requirement for accessing the web. Many of the largest websites around would use Flash to relay asset rich data across to their users websites such as YouTube. This was because of its easy to package format and its prebuilt players.
As in the last blog I posted, responsive websites have become increasingly more used leading to a much higher requirement. Sadly, mobile devices do not allow for Flash to be played on them. The most notable device to not play Flash is, of course, the iPhone. In the years since the release of the iPhone, Flash based websites have been falling year on year and within the last year, have already gone down from 21% of all websites to 15% of all websites (see here http://w3techs.com/technologies/details/cp-flash/all/all).
– Steve Jobs
What can you do?
There are also a number of other Flash alternatives which use an API similar to Flash to create elements for the browser. There are detection systems to be able to swap out Flash elements for less server intensive JS animations and much more out there. A simple google for “Flash to HTML5” or “Flash to JS” shows into the dozens of millions in results for resources, tutorials or just general chat. I’ve listed some of the most commonly used tools below.
- CreateJS http://www.adobe.com/devnet/createjs.edu.html
- EaselJS http://www.createjs.com/#!/EaselJS
- TweenJS http://www.createjs.com/#!/TweenJS
- SoundJS http://www.createjs.com/#!/SoundJS
- PreloadJS http://www.createjs.com/#!/PreloadJS
- FlashJS http://www.flashjs.com/
- SWFObject https://code.google.com/p/swfobject/
There are also many great websites which show off how powerful HTML5 and CSS3 can be together. Just browsing through http://codepen.io/ which is an online IDE for front-end web development shows the true power of the new elements being brought to the web.
Look, I even made a HTML/CSS version of the Linear Blue Logo : http://codepen.io/anon/pen/stKxy