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

[Cabbit]

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

The Flash to HTML converter is where i see Flash going though the future, it is a good authoring package it and i am sure they will update its delivery method as users and developers needs change. Such as providing a way to export your animation, interface, etc into HTML, CSS and Javascript.

 

[deadkennedy]

The Flash to HTML converter is where i see Flash going though the future, it is a good authoring package it and i am sure they will update its delivery method as users and developers needs change. Such as providing a way to export your animation, interface, etc into HTML, CSS and Javascript.

But that's exactly my point from previous post. Why would they suddenly dumb down everything they've built (with Macromedia as well) for the past 15 years or so? It's again like taking a ready Ferrari and dumbing it down to Nissan Micra just because the government of North Korea doesn't let you own any other car, but is also not providing the alternative.

Built for purpose platform, i.e. Flash Player will always be far more capable than committee driven HTML5 Canvas.

 

[Cabbit]

But that's exactly my point from previous post. Why would they suddenly dumb down everything they've built (with Macromedia as well) for the past 15 years or so? It's again like taking a ready Ferrari and dumbing it down to Nissan Micra just because the government of North Korea doesn't let you own any other car, but is also not providing the alternative.

Built for purpose platform, i.e. Flash Player will always be far more capable than committee driven HTML5 Canvas.

Right now nothing needs to be dumbed down so that argument is flawed. There is still web cam access and DRM'ed video that needs a plugin like Flash player, everything else can be done equally or better with HTML, CSS, and Javascript.

Its like making a Ferrari with a philips screw driver and not a flat head screw diver. The difference is the Ferrari can now drive on more roads and if the road isn't wide enough its up to the stage to widen it not the car manufacturer.

 

[deadkennedy]

Right now nothing needs to be dumbed down so that argument is flawed.

Could you then show me a simple example of one part of that interactive animation that I did in 2002, deployed on JS / HTML5 / Canvas? With or without Flash IDE. If it proves possible, then I go and do the entire site like that.

 

[lucidmedia]

The Flash to HTML converter is where i see Flash going though the future, it is a good authoring package it and i am sure they will update its delivery method as users and developers needs change. Such as providing a way to export your animation, interface, etc into HTML, CSS and Javascript.

I agree. The Flash > JS converter was originally demoed in the CS5 flash beta (there is a demo of it on youtube shot in korea), but strangely disappeared long before CS5 was released. It has not surfaced since, and we are not hearing much about it. I am hoping it will make its appearance in CS5.5.

My feeling, however, is that it will take a while for these types of tools to be delivered. The longer they wait, the more the spec gets finalized, making their final product safer.

Flash is not a tool for cutting edge SWF development... those folks are using eclipse or flash builder. Flash has different markets and use cases and will open up the HTML/JS tools when they are solid enough for the average user.

Right now nothing needs to be dumbed down so that argument is flawed. There is still web cam access and DRM'ed video that needs a plugin like Flash player, everything else can be done equally or better with HTML, CSS, and Javascript.

Camera control is actually on its way via HTML5, so that is good news. It was just announced recently.

The argument the OP is making is more about frame-by-frame "traditional-style" animation, which currently is very hard to implement in HTML/JS without diving into bitmap arrays and such. It is possible to do, but there are currently no tools that allow visual manipulation of this type of work.

 

[lucidmedia]

Could you then show me a simple example of one part of that interactive animation that I did in 2002, deployed on JS / HTML5 / Canvas? With or without Flash IDE. If it proves possible, then I go and do the entire site like that.

Here is a tutorial of an interactive bitmap sprite animation done on canvas-no remapping of pixels necessary...

http://www.johnegraham2.com/web-technology/html-5-canvas-tag-sprite-animation-demo/

if I remember correctly, your animation was single color, so you can probably get better performance than here, and a smoother animation...

 

[deadkennedy]

Flash is not a tool for cutting edge SWF development... those folks are using eclipse or flash builder. Flash has different markets and use cases and will open up the HTML/JS tools when they are solid enough for the average user.

Not that I want to sidetrack the discussion, but Flash Builder is actually only better at writing code and it is good also for Flex development. For producing SWF's that have animation, still Flash IDE is the only and the best tool. It's just not that good at writing and maintaining code.

The thing is I want THAT thing from original post to be able to do in HTML5.

Here is a tutorial of an interactive bitmap sprite animation done on canvas-no remapping of pixels necessary...

http://www.johnegraham2.com/web-technology/html-5-canvas-tag-sprite-animation-demo/

if I remember correctly, your animation was single color, so you can probably get better performance than here, and a smoother animation...

"Next I created an object which loads an additional canvas and handles frame by frame animation for the sprites. The program contains two dynamically generated sprites, one computer controlled and one user controlled. Then a canvas with the foreground is loaded in so that the sprites can move behind. Lastly, a simple loop is created to step off the movement and the animation.

Are you kidding me? The reason I want to redo the site among others is that I want it bigger, maybe ad some 3D animation. For bit blitting OR image swap, I'd need 25 frames per second of 1000x700 bitmap. That's about 80 bitmaps per link. That's around 500 bitmaps for site. Depending on compression, the site might go up to 50MB, and now the anim part is 17kB.

Plus I'd have to control everything with a timer with lots of error checking to have it synced.

And STILL I'd have to use Flash IDE to simply animate it, so why not just click File->Publish and have it done.

It has to be done with vectors, SVG somehow. That was also one of my earliest comments.

 

[lucidmedia]

And STILL I'd have to use Flash IDE to simply animate it, so why not just click File->Publish and have it done.

Because the tool you are looking for does not exist, and probably will not exist for another 6 months, if ever . Pester Adobe and make sure they know that there is a small audience of people looking to do frame-by-frame animation.

In terms of your original problem, it may not be feasible, or easy, but it is possible...

I agree that images are not the way to go... programmatic frame-by-frame animation is probably the only realistic way to do this...

 

[deadkennedy]

Because the tool you are looking for does not exist, and probably will not exist for another 6 months, if ever . Pester Adobe and make sure they know that there is a small audience of people looking to do frame-by-frame animation.

If you ask me, I think they already have something like that almost ready. They just don't want to give up on Flash Player, they know if they make Flash IDE to export to Canvas / SVG, then FP is gone, bye bye. They are waiting to see how things will turn out and then if worse comes to worst they release it.

So, the thing is I'm still on square one. I don't want to go into stupid solutions like bitmaps or overlaying various videos on top of each other.

I'll be sitting here waiting till another Adobe bashing starts on the front page and then direct the smartest and loudest of the lot to this post. Maybe some of them will have some knowledge.

 

[Cabbit]

If you ask me, I think they already have something like that almost ready. They just don't want to give up on Flash Player, they know if they make Flash IDE to export to Canvas / SVG, then FP is gone, bye bye. They are waiting to see how things will turn out and then if worse comes to worst they release it.

So, the thing is I'm still on square one. I don't want to go into stupid solutions like bitmaps or overlaying various videos on top of each other.

I'll be sitting here waiting till another Adobe bashing starts on the front page and then direct the smartest and loudest of the lot to this post. Maybe some of them will have some knowledge.

How about you start experimenting with some CSS and Javascript instead.

 

[lucidmedia]

If you ask me, I think they already have something like that almost ready. They just don't want to give up on Flash Player, they know if they make Flash IDE to export to Canvas / SVG, then FP is gone, bye bye. They are waiting to see how things will turn out and then if worse comes to worst they release it.

So, the thing is I'm still on square one. I don't want to go into stupid solutions like bitmaps or overlaying various videos on top of each other.

I'll be sitting here waiting till another Adobe bashing starts on the front page and then direct the smartest and loudest of the lot to this post. Maybe some of them will have some knowledge.

Adobe makes money from selling Flash authoring tools. They make nothing on the Flash Player platform. There is no benefit to them for waiting, and I do not believe there is some back-room evil plan... i think you are instead seeing what happens in every large company... it takes a while to change directions. But FLash is one of Adobe's flagship pieces of software, and they are not going to completely change it overnight... I think you will see other tools arrive first.

I think your anger at Adobe is misplaced. We are in this predicament because of Steve Jobs. Everyone now is rushing to catch up, including Adobe. If they had the perfect tool for this problem they would have released it already! The simple answer is that canvas is good, but its not as good as FP right now. This will change, but its going to take some time.

 

[deadkennedy]

How about you start experimenting with some CSS and Javascript instead.

I'm pretty sure I can't get that done with CSS and JS.

I think your anger at Adobe is misplaced. We are in this predicament because of Steve Jobs. Everyone now is rushing to catch up, including Adobe.

I'm not angry at anyone when it comes to business. SJ and Adobe have bot done incredible things for us in multimedia business, they somehow defined the arena we work in. I am merely astonished at MR users, I've seen such criticisms of Flash Player on this forum in the news section that I expected I'll get solutions and even code snippets for my problem in no time here.

 

[angelneo]

I'm pretty sure I can't get that done with CSS and JS.

You could get it done in CSS and JS, but it just take too much time and effort for something that could possibly be too big and clunky for the web.

I think you would be better off waiting for Adobe Edge or the Flash html5 converter, both which are demo-ed at Adobe Max 2010. I don't think it's that critical to convert your flash sites to html5 now or in the near future. There's just too much hype going on right now.

 

[designguy79]

I am merely astonished at MR users, I've seen such criticisms of Flash Player on this forum in the news section that I expected I'll get solutions and even code snippets for my problem in no time here.

Don't hold your breath!

It much, much easier to take pot-shots than to work on real solutions. Its "political" now, which is too bad...

 

[SmokeyRobinson]

Don't hold your breath!

It much, much easier to take pot-shots than to work on real solutions. Its "political" now, which is too bad...

Welcome to the idiotic world of Apple cultists.

I find it pretty hilarious how people can preach Flash as crap and HTML5 as the present and future when they cant even do basic Flash stuff in HTML5 (And its surrounding technologies) yet.

Keep sucking the koolaid from Jobs's hose.

 

[Cabbit]

Welcome to the idiotic world of Apple cultists.

I find it pretty hilarious how people can preach Flash as crap and HTML5 as the present and future when they cant even do basic Flash stuff in HTML5 (And its surrounding technologies) yet.

Keep sucking the koolaid from Jobs's hose.

This is nothing to do with Apple don't try to turn it into a them vs us.

Regarding HTML5 as the future, well you got that right it is the future don't expect it to be a slot in replacement for Flash while people are still learning and developing the tools to work with it.

It still stands that the OP can produce his entire website as is with HTML, Javascript and CSS. But it also still stand that the OP will have to go and learn how to do this because like in the early days of Flash there are no step by step tutorials yet.

And it must be stressed there is no current authoring package to make the code for you as Flash has.

 

[deadkennedy]

It still stands that the OP can produce his entire website as is with HTML, Javascript and CSS. But it also still stand that the OP will have to go and learn how to do this because like in the early days of Flash there are no step by step tutorials yet.

Could you do it?

 

[hobbbz]

I feel like I need to say what no one else is saying.

That's not a website you have there. It's an interactive piece of art, but not a website.

Flash is good for interactive art, HTML/CSS is good for websites.

My suggestion is to not try to recreate what you have there and create something that is instead, beautiful, usable, and accessible.

 

[Cabbit]

Could you do it?

If i really wanted to and put in a lot of effort and experimentation yes i could.

 

[jpyc7]

I feel like I need to say what no one else is saying.

That's not a website you have there. It's an interactive piece of art, but not a website.

Flash is good for interactive art, HTML/CSS is good for websites.

My suggestion is to not try to recreate what you have there and create something that is instead, beautiful, usable, and accessible.

I've been following this thread and feel the same way. Usually people go to websites for the content. The design might be nice, but I don't really care to wait for an animation to finish before I get to the content I want to see.

Since I don't understand the language of the website mentioned in the original post, I am not sure if the content and design are cohesive or not. I can see websites that promote art would benefit from artistic animation, but most other websites don't really need it. I think that is why a lot of movie websites use Flash; the target audience wants/expects to see interesting transitions that reflect the movie.

 

[deadkennedy]

I feel like I need to say what no one else is saying.

That's not a website you have there. It's an interactive piece of art, but not a website.

Flash is good for interactive art, HTML/CSS is good for websites.

My suggestion is to not try to recreate what you have there and create something that is instead, beautiful, usable, and accessible.

No one else is saying because they are sticking to the topic and trying to answer the question, which is how do I do it? If your answer to how is don't do it, just because you yourself don't know how, then there are other experts who do know how to do it.

HTML5 / Canvas, so I heard, is also good for interactive art and because of it Flash is history. SVG is for vector graphics, so the solution must lie somewhere here.

 

[deadkennedy]

I've been following this thread and feel the same way. Usually people go to websites for the content. The design might be nice, but I don't really care to wait for an animation to finish before I get to the content I want to see.

Since I don't understand the language of the website mentioned in the original post, I am not sure if the content and design are cohesive or not. I can see websites that promote art would benefit from artistic animation, but most other websites don't really need it. I think that is why a lot of movie websites use Flash; the target audience wants/expects to see interesting transitions that reflect the movie.

I get your point exactly with waiting for animation, and the language, and many other things That's why I need to redo it, it's from 2002 after all. Mind you, it was at that time working very fast and flawlessly on the Eastern European dial-up, and hardware that's less than 20% of today's phones.

Regarding the content, if I may, it is for an annual street art festival, which is also simplistic, free, and attracts creative performers from all over Europe, no matter what they do. From rappers from Amsterdam, to autistic kids from local school, experimental theatre from Jerusalem, painters, you got it.

The site perfectly resembles what it's all about, that's why client and users love it. It also gives you a chance to interact with it, hence emerge yourself into experience and participate before you even went to the festival.

It is however in dire need of an update and I was thinking of using this opportunity to do it in the "future"** technology - HTML5. I'm thinking my next move would be to actually throw money on the table and asking someone to teach me from some crowd sourcing site. But then again, I'm doing it for free, as the entire event is for free and has charitable cause for helping less developed children. It doesn't make sense for me from business point of view to pay, I'd rather learn it myself.



** Is it even smart to work in future technology? The very name implies it is not here yet, it is in the future and we know future is uncertain.

If i really wanted to and put in a lot of effort and experimentation yes i could.

Ah, so sort of a like me doing a heart transplant. If I start studying really hard now for 12 hours per day, if I experiment on some 1000 volunteers, I might eventually come close.

 

[jpyc7]

. . . . . .

It is however in dire need of an update and I was thinking of using this opportunity to do it in the "future"** technology - HTML5. I'm thinking my next move would be to actually throw money on the table and asking someone to teach me from some crowd sourcing site. But then again, I'm doing it for free, as the entire event is for free and has charitable cause for helping less developed children. It doesn't make sense for me from business point of view to pay, I'd rather learn it myself.

** Is it even smart to work in future technology? The very name implies it is not here yet, it is in the future and we know future is uncertain.

I have recently been trying a number of javascript/canvas graphics libraries. For my work, which involves plotting graphs from collected time-series data, it is pretty obvious that this technology can replace the Flash charting software we were previously using. It provides interactivity for zooming, panning, and updating point values based on mouse cursor. So I feel confident that this 'future technology' is here and usable for my application. However, there are definite limitations/problems particularly using IE8 browser. (I did not even try on older IE browser.)

For you, I think you should definitely learn it, but mostly because I think such knowledge could be useful for other website. It might not be as well suited for free-form animation, but you may be able to design new animations that can be easily programmed.

Consider this example from protovis which shows that it is possible to program a spline image.

Mind you, protovis, uses a fairly unique style of programming (a declarative style instead of imperative).

Another library I would suggest you consider is called Raphael. They have a number of demos that are also interactive.

BTW, I learned this on my own, but I spend most of my time developing backend code rather than HTML. I could understand the Javascript fairly well and ended up using a library called dygraphs that is built specifically for graphing time series data.

 

[angelneo]

I feel like I need to say what no one else is saying.

That's not a website you have there. It's an interactive piece of art, but not a website.

Flash is good for interactive art, HTML/CSS is good for websites.

My suggestion is to not try to recreate what you have there and create something that is instead, beautiful, usable, and accessible.

Website has their intended audience, if the OP is setting up the site to let potential clients to see how good he is with animation, then all the more he should position his site to that direction. If flash allows OP to achieve what can be done with minimal effort and time instead of crafting frame by frame animation, or some very complex scripting then why shouldn't he use flash?

 

[Cabbit]

Ah, so sort of a like me doing a heart transplant. If I start studying really hard now for 12 hours per day, if I experiment on some 1000 volunteers, I might eventually come close.

No more along the lines of it took me a few weeks to learn how Zend Framework works and another few weeks to work with jQuery. I had the motivation to do it so i did, and right now i have the motivation to make a sprite game using Javascript so i am making it work.