PDA

View Full Version : HTML5 vs Flash, i.e. could I do this in HTML5?




deadkennedy
Dec 6, 2010, 12:53 PM
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.

http://odprtomesto.com/

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?



AFPoster
Dec 6, 2010, 01:51 PM
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?

lucidmedia
Dec 6, 2010, 02:43 PM
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
Dec 6, 2010, 02:44 PM
@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.

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.


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.

lucidmedia
Dec 6, 2010, 03:31 PM
- Canvas with drawing API. Impossible to draw on Canvas all that animation with code only.

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
Dec 6, 2010, 04:04 PM
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.

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.

lucidmedia
Dec 6, 2010, 08:22 PM
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.

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

deadkennedy
Dec 6, 2010, 09:55 PM
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.


Java port? I didn't know that.


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

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

msandersen
Dec 7, 2010, 01:35 AM
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.

lucidmedia
Dec 7, 2010, 06:47 AM
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.

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
Dec 7, 2010, 08:00 AM
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...


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?

AFPoster
Dec 7, 2010, 08:11 AM
DeadKennedy - the site I am referring to is 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
Dec 7, 2010, 09:37 AM
DeadKennedy - the site I am referring to is 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.

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.

UTclassof89
Dec 7, 2010, 09:52 AM
...What are all those commentators then shouting about every time there's Flash in the news headline?

They're shouting to hear themselves shout.

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

deadkennedy
Dec 7, 2010, 10:43 AM
They don't understand the difference between bad technology and good technology used badly.

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.

smetvid
Dec 7, 2010, 02:35 PM
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.

lucidmedia
Dec 7, 2010, 10:27 PM
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.


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


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.

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:


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.

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

angelneo
Dec 8, 2010, 02:05 AM
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.

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.

bmb012
Dec 8, 2010, 07:32 PM
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

Ray Manorak
Dec 9, 2010, 10:59 AM
It's so frustrating, i made this a year ago:

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.

bmb012
Dec 9, 2010, 08:09 PM
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 ).

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

deadkennedy
Dec 11, 2010, 04:30 PM
Wow. 1000 thread views and we're still in 2002. I thought MR members are mostly for the "future". Any takers? Anyone?

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

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.

lucidmedia
Dec 11, 2010, 06:53 PM
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-/

deadkennedy
Dec 12, 2010, 09:02 AM
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/



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.


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-/



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 :)

Cabbit
Dec 13, 2010, 11:27 AM
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
Dec 13, 2010, 12:09 PM
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
Dec 13, 2010, 12:20 PM
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
Dec 13, 2010, 12:28 PM
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
Dec 13, 2010, 02:09 PM
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
Dec 13, 2010, 02:31 PM
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
Dec 13, 2010, 03:03 PM
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
Dec 13, 2010, 04:03 PM
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 :D. 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
Dec 13, 2010, 05:53 PM
Because the tool you are looking for does not exist, and probably will not exist for another 6 months, if ever :D. 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
Dec 13, 2010, 07:40 PM
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
Dec 13, 2010, 09:23 PM
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
Dec 13, 2010, 09:33 PM
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
Dec 13, 2010, 09:48 PM
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
Dec 14, 2010, 01:22 PM
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! :cool:

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

SmokeyRobinson
Dec 14, 2010, 01:46 PM
Don't hold your breath! :cool:

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
Dec 14, 2010, 02:20 PM
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
Dec 14, 2010, 04:10 PM
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
Dec 14, 2010, 04:16 PM
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
Dec 14, 2010, 04:34 PM
Could you do it?

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

jpyc7
Dec 14, 2010, 05:16 PM
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
Dec 14, 2010, 07:28 PM
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
Dec 14, 2010, 08:15 PM
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
Dec 15, 2010, 12:02 AM
. . . . . .

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 (http://vis.stanford.edu/protovis/ex/splines.html).

Mind you, protovis (http://vis.stanford.edu/protovis/), uses a fairly unique style of programming (a declarative style instead of imperative).

Another library I would suggest you consider is called Raphael (http://raphaeljs.com/). 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 (http://dygraphs.com/) that is built specifically for graphing time series data.

angelneo
Dec 15, 2010, 01:56 AM
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
Dec 15, 2010, 06:17 AM
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.

Benjamins
Dec 15, 2010, 12:17 PM
It uses a lot of vector based animation which Flash is built for, so that's good. Still I wouldn't recommend anyone to do a whole site in Flash.

But honestly, it's not impossible to do all that in HTML5.

deadkennedy
Dec 15, 2010, 12:20 PM
It uses a lot of vector based animation which Flash is built for, so that's good. Still I wouldn't recommend anyone to do a whole site in Flash.

But honestly, it's not impossible to do all that in HTML5.

Finally someone knows. Can you post a link or something?

Benjamins
Dec 15, 2010, 12:23 PM
Finally someone knows. Can you post a link or something?

Google is your friend.

deadkennedy
Dec 15, 2010, 12:36 PM
Google is your friend.

Thanks for enlightening all of us. I really don't understand why this things called "forum" were invented. Maybe to ask questions and discuss, provide solutions?

I think we might be going nowhere here, based on this guy. No vectors in Canvas.

http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

Although Canvas adds features to a page, I don’t think it has been particularly well thought out. In many ways it feels like a step into the past and represents a very old-fashioned way of drawing that is inferior to the modern XML-based SVG standard. It is pixel-based, as opposed to the nice vectors of SVG and to draw with it entails writing lots of unmanageable JavaScript. The lack of accessibility is also a big problem.