HTML5 vs Flash, i.e. could I do this in HTML5?

Deadkennedy - hopefully you don't mind if I piggyback off of your question with one of mine so I don't make double posts. I as well have a Flash based website, well a website with Flash features. Is it easy to convert a Flash site to HTML5?

To the OP, javascript animation libraries like jQuery will allow you to move elements around the page dynamically. But the motion is mostly linear. Rotations are possible, but elements on the screen are not natively anti-aliased, so the elements look a lot rougher.

Your flash animation shows a lot of sprite animation - drawings changing frame by frame as they move. This is far trickier to do in javascript. Do a google search for "javascript sprite animation" to see the current demos. They are not very mature (to my eye) and require a lot more coding.

If you are interested in moving forward and keeping your site similar to as it is now, your best bet is to look into techniques for drawing on the canvas tag for your animated elements.

Keep in mind that there is currently no mature visual IDE to help you code or visualize your work, and there is no simple way to port a Flash file to HTML5/CSS/JS... So you will need to code these animations.

So, yes. it is possible to create the same type of site. But the process is a lot more involved to do the same types of work, and the debugging process to get your work to be similar across platforms and browsers will be far more extensive.

I do not disagree that Flash use seems to be waning. My concern is that it has been pronounced dead before we have a mature replacement for it.

deadkennedy said:

- Canvas with drawing API. Impossible to draw on Canvas all that animation with code only.

Click to expand...

Not impossible at all, in fact I find this type of programming much more familiar than what has been proposed with SVG -- but I moved away from the timeline and started animating with code years ago.

I think you could do quite a bit with sprite animation on a canvas set behind content set in HTML.

If you are looking for a simple and robust API for canvas drawing and bitmap manipulation, take a look at the Processing.js project... it makes drawing and manipulating bitmaps in a canvas easy.

deadkennedy said:

Wow, this seems encouraging. The problem however on the original site is that it is important how you tweak the small things. For example bending the "back" of the menu for a jump. This kind of animation is not data driven such as examples on the site you posted, but purely creatively. Also the lines are "improper", pencil drawings. This is very tricky to accomplish with code only, I need some other input for creative.

Having said that I see they are mentioning something like Processing IDE on the site which lets you create PDE files, but I can't find it.

Click to expand...

The processing IDE is an implementation of the same language in java.. Processing.js is a port of that language to the canvas... It won't really help you with this specific problem.

the type of animation you are looking to do can be done by loading and modifying bitmap data... it does not have to be a frame by frame animation... i suppose you could also do it with animated beziers, but you won't have the same quality of line.

but in spirit i agree... currently we don't have a toolset to entirely replace the type of work done in flash...lots of things are on the horizon, but nothing is ready right now

Sorry I can't dispense good advice. Now and then I've come across interesting demos of Canvas which shows its potential, but all of it is usually derived at somewhat laboriously by hand-coding. An interesting example of sprite animation that comes to mind is Google's Pacman game.
With Apple's ditching of Flash on their devices, and the counterattack by Flash-enabled Android devices, I've been waiting for the other shoe to drop, for Apple to release some Flash-like IDE for making HTML5/JS/SVG animation in order to popularise it more with webdesigners. They've previously showed off some impressive JS frameworks for making animated web-apps.

msandersen said:

Sorry I can't dispense good advice. Now and then I've come across interesting demos of Canvas which shows its potential, but all of it is usually derived at somewhat laboriously by hand-coding. An interesting example of sprite animation that comes to mind is Google's Pacman game.
With Apple's ditching of Flash on their devices, and the counterattack by Flash-enabled Android devices, I've been waiting for the other shoe to drop, for Apple to release some Flash-like IDE for making HTML5/JS/SVG animation in order to popularise it more with webdesigners. They've previously showed off some impressive JS frameworks for making animated web-apps.

Click to expand...

I think apple has clearly shown that they are no longer interested in the "pro applications" business... talk to someone who uses Final Cut Pro or Logic for a living... there will be a flash-like IDE for HTML5/JS, but it won't come from Apple... Adobe is still the most likely source, and there are several other smaller projects like Sencha Animator which may show promise...

DeadKennedy - the site I am referring to is http://www.fraplantools.com it has some Flash on it and if I can make the whole site HTML5 to be more friendly to mobile platforms and for loading purposes that would be great.

deadkennedy said:

...What are all those commentators then shouting about every time there's Flash in the news headline?

Click to expand...

They're shouting to hear themselves shout.

They don't understand the difference between bad technology and good technology used badly.

In my opinion animating with code is like pounding in a nail with a table saw. Animating is an art (or at least it is supposed to be). Animating with code instead of creating it as art is no different then drawing shapes with code or actually having a talented artist create your graphics in Illustrator or Photoshop. Sure it can be done with code but it will usually look cheesy and amateurish compared to a true hands on artistic method.

Animation is all about bringing something to life. While a computer can be a useful tool to create animation it should never be the only tool.

This is the one concern I have with HTML5. I know it is capable but my fear is that most animation on the internet will be created by people with no artistic talent at all instead of professional designers.

Also you have to be careful with Javascript on IOS devices. While it does work you are going to be surprised just how quickly these things can get sluggish with even the most basic javascript animation. You might be better off looking into CSS3 animations. They are limited but they perform much better on IOS devices. Many of the concerns that people have with a Flash plugin on IOS devices should be equally concerned about Javascript animation. It will bog down the processor and eat the battery just as much.

smetvid said:

In my opinion animating with code is like pounding in a nail with a table saw. Animating is an art (or at least it is supposed to be). Animating with code instead of creating it as art is no different then drawing shapes with code or actually having a talented artist create your graphics in Illustrator or Photoshop. Sure it can be done with code but it will usually look cheesy and amateurish compared to a true hands on artistic method.

Animation is all about bringing something to life. While a computer can be a useful tool to create animation it should never be the only tool.

Click to expand...

I completely understand (and perhaps agree with) the heart of your argument, but I respectfully disagree with the details…

Animation is an art not because of any technology, but in the way that motion and form is applied as a expressive, communicative language. Facility with this is what makes a good animator, not any particular working method.

Animators use brushes and a camera rig, a program like after effects or flash, or program motion with code. None of these technologies makes them "more" of an animator than another, or does it make it any more or less "art".

Those who animate with code, and do it well, usually have some traditional training under their belt. I animate with code because my work needs to respond dynamically to live, real-time data. One cannot do this the traditional way, or on a program with a timeline, or with a pre-fabricated kit of parts. It requires algorithm.

Understand, however, that I have no interest in mimicking traditional tools with code (and this is why this rapid shift to HTML5 bothers me so much)… If a project calls for timeline animation or traditional animation then I would prefer to use that instead. Again, technology is implementation. My skill as an animator is defined, as you say, by "bringing things to life".

I also do not believe that every designer must learn to program... in fact, as a designer who works both traditionally and with code, much of my consulting work is with software companies looking to create dynamic media tools for traditional designers that will make them feel more "at home".

smetvid said:

This is the one concern I have with HTML5. I know it is capable but my fear is that most animation on the internet will be created by people with no artistic talent at all instead of professional designers.

Click to expand...

Well, technically... this happened about 10 years ago... I think this challenge of getting things to move in HTML5 will keep all but the uninitiated away until we have visual tools that will replace the code. Then things will get much worse!

smetvid said:

Many of the concerns that people have with a Flash plugin on IOS devices should be equally concerned about Javascript animation. It will bog down the processor and eat the battery just as much.

Click to expand...

This is absolutely true... aside from performance issues, content in the canvas tag is not indexable and is not accessible... unlike flash content!

smetvid said:

In my opinion animating with code is like pounding in a nail with a table saw. Animating is an art (or at least it is supposed to be). Animating with code instead of creating it as art is no different then drawing shapes with code or actually having a talented artist create your graphics in Illustrator or Photoshop. Sure it can be done with code but it will usually look cheesy and amateurish compared to a true hands on artistic method.

Animation is all about bringing something to life. While a computer can be a useful tool to create animation it should never be the only tool.

Click to expand...

For me, complex animation with code is usually very laborious. But there are times when I am animating multiple simple objects with a set of predefined rules (especially in relation to physics, particle effects), coding it makes things easier. I agree with you that if I am doing free form animation, doing it with codes is just wasting my time. (on the side note: I really like that in Flash IDE, I can do both at the same time)

Another concern of mine for HTML5 is that, there's too many hands in the pot. If someone wants to make an improvement or optimization to the syntax or engine. How long will it take to propagate throughout all the browsers? If someone comes in with their own style (like what MS did previously), no one can stop them.

Yeah, Flash has always been based around making very human interactions, even better with 'homemade' looking projects. Never understood why everyone called for the death of Flash just because something else could play video better, since EVERYTHING could AlWAYS play video better than Flash.

I'd love to see someone do this in HTML5, so far I've only seen simple tile based games (some good ones, though).

http://www.kongregate.com/games/DrNeroCF/fancy-pants-adventure-world-2

It's so frustrating, i made this a year ago:

http://www.bumpkinheroes.com

Self taught flash on the back of making all my artwork in illustrator...

I feel like i woke up after a heavy night and realised i'm a betamax.

People tend to just think of Flash as a delivery service, but it's also a tool for creation.

Can't wait to see someone create this with HTML5 (not just stream it over video ).

http://www.newgrounds.com/portal/view/520604

deadkennedy said:

Wow. 1000 thread views and we're still in 2002. I thought MR members are mostly for the "future". Any takers? Anyone?

Click to expand...

I actually don't think that MR rumors are all that tied into the future... just the future that Apple has defined for them.

"We" are not stuck in 2002. I certainly am not. I do feel like I have been forced into an unfortunate situation by Apple.

I have spoken to several people who are on W3C working groups and they were VERY surprised when Steve Jobs made his announcements about flash and defined HTML5 as the only way forward. They agreed that HTML as a spec was not defined enough to be properly implemented at that time.

Please don't read this as me bashing HTML5 or protecting Adobe. HTML5 is the future for many things, but as a technology it is being rushed into implementation and has been pushed onto us by a single company - Apple. In a matter of speaking Steve Jobs was both the best and worst thing to happen to HTML5.

It is going to take quite a while for tools to catch up - the development process is expensive, and until VERY recently people felt that the HTML5 specification was quite not locked down enough to build a visual tool around. This has changed, but it will still be quite a while before the general public has access to these tools. In the meantime, if you want to do frame by frame animation in HTML5 you will have to do it programmatically.

I mentioned this in a post earlier, but thought I would throw it up here again. Sencha Animator is a tool you can play with right now that is a visual animator for JS.

http://www.sencha.com/products/animator/

Also, at Adobe MAX they showed a prototype called "EDGE" that also allows users to create JS animations visually. If you watch the vid and read the comments you will see that it is actually built on top of JQuery and has a source code view. I very much like the layers palette that represents the DOM...

http://tv.adobe.com/watch/adc-presents/preview-of-the-edge-prototype-tool-for-html5-/