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

Discussion in 'Web Design and Development' started by deadkennedy, Dec 6, 2010.

  1. macrumors 6502

    May 22, 2010
    I developed a site back in 2002 in just a couple of hours in Flash and the users love it. They love it so much they've kept the site as is for 8 years already.

    Click the main menu on the left it is not in English but you'll get the idea.

    Obviously it's old, outdated, and doesn't run on iOS so I was thinking of rebuilding it completely in HTML5.

    Would something like this be possible and where should I start looking?
  2. macrumors 65816

    Jul 14, 2008
    Charlotte, NC
    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?
  3. lucidmedia, Dec 6, 2010
    Last edited by a moderator: Dec 7, 2010

    macrumors 6502a

    Oct 13, 2008
    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.
  4. deadkennedy, Dec 6, 2010
    Last edited by a moderator: Dec 13, 2010

    thread starter macrumors 6502

    May 22, 2010
    @AFPoster: I guess it depends on what kind of web site you have. Do you have an example? Please post it here so hopefully some HTML5 guru could shed the light.

    Thanks for the answer. I don't mind not having an IDE such as Flash but:

    - JS alone won't work, I've been working with JS and know what you can do. Move boxes around. I can't use frame by frame PNG for that animation as the size will blow from couple of kB (all animation now is below 20k I think) to 20MB.

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

    Maybe with SVG somehow? Export Frame By Frame PNG, which some tool could convert into vector tweens for Canvas, and then programatically add text, which leads to another problem - typographic capabilities of Canvas. I'm just randomly guessing here.
  5. macrumors 6502a

    Oct 13, 2008
    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.
  6. thread starter macrumors 6502

    May 22, 2010
    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.
  7. macrumors 6502a

    Oct 13, 2008
    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
  8. thread starter macrumors 6502

    May 22, 2010
    Java port? I didn't know that.

    And here I was hoping for a quick win and add some neat HTML5 to my resume :p
  9. macrumors regular

    Jan 7, 2003
    Sydney, Australia
    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.
  10. lucidmedia, Dec 7, 2010
    Last edited: Dec 7, 2010

    macrumors 6502a

    Oct 13, 2008
    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...
  11. thread starter macrumors 6502

    May 22, 2010

    Another thing I noticed is to do the same thing in alternative technology than Flash, the CPU usage and the file sizes go drastically up. I'm referring to some JS games out there.

    Ok, I was thinking that asking this question on MR would surely give me a positive lead on technology that replaces Flash, due to nature of this site. What are all those commentators then shouting about every time there's Flash in the news headline?
  12. macrumors 65816

    Jul 14, 2008
    Charlotte, NC
    DeadKennedy - the site I am referring to is 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.
  13. thread starter macrumors 6502

    May 22, 2010
    This seems like a simple "news rotator" which is perfectly possible to do in JS, there are also plenty of free ones you could reuse.
  14. macrumors 6502


    Jun 10, 2008
    They're shouting to hear themselves shout.

    They don't understand the difference between bad technology and good technology used badly.
  15. thread starter macrumors 6502

    May 22, 2010
    Well here's their chance to explain the alternative of what was possible in Flash since around 2000. I'm looking forward to move on if there are alternatives but not to go back to 1996.
  16. macrumors 6502

    Nov 1, 2009
    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.
  17. macrumors 6502a

    Oct 13, 2008

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

    Well, technically... this happened about 10 years ago... :D 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! :eek:

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

    Jun 13, 2004
    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.
  19. macrumors 6502

    Jul 25, 2006
    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).
  20. macrumors newbie

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

    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.
  21. macrumors 6502

    Jul 25, 2006
    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 :p ).
  22. thread starter macrumors 6502

    May 22, 2010
    Wow. 1000 thread views and we're still in 2002. I thought MR members are mostly for the "future". Any takers? Anyone?
  23. lucidmedia, Dec 11, 2010
    Last edited: Dec 11, 2010

    macrumors 6502a

    Oct 13, 2008
    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.
  24. macrumors 6502a

    Oct 13, 2008
    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.

    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...
  25. thread starter macrumors 6502

    May 22, 2010

    Just by looking at the screenshot I doubt there's any support for drawing and animating those drawing with 'shape tweens', later putting them together with scripts.

    This one seems the same as the previous one, no drawing, shape tweens, etc...

    I also know they have another one, Flash -> HTML converter that is a flash -> html workflow, which kinda defeats the purpose, doesn't it?

    Sort of a like I have to buy a Ferrari and then spend time and money to destroy it and convert it to Nissan Micra. I hope analogy is not completely off :)

Share This Page