Web animation - where to start?

greyed

Hi there, this forum has helped me in the past, so I hope you dont mind me asking for some more advice

I am looking to create 2D and 3D animations that can be displayed in a browser (for a website of course). A test animation that I will create will be something along the lines of a piece moving across a draughts board.

My experience so far with animation (2D and 3D) involves creating gifs in fireworks and 3D animations using openGL/glut and C++. I have created some basic websites before, using a small amount of javascript and PHP, but im not sure how relevant my knowledge is to this project so i'll assume a beginners stance here :P

I was wondering where to start, specifically with tools. I have googled and it seems to be flash I am looking for? Is this the current standard?

Has HTML5 brought a lot of changes? Is it now the standard? Seeing as it seeks to "reduce dependence on RIAs" should I still use flash?

Does flash involve coding or is it a visual enviorment?

Is glut animation useful in any way? Can I convert the resulting code to flash or some other web-compatible format?

Does the quality of the animation depend on the tools used? And should I use seperate tools for 2D and 3D, or simply build a more simple (2D) animation using the 3D applications?

What is SVG exactly? Is it relevant to me at this point?

Hopefully someone can answer some of these, would be really helpful to find out how much I (dont) know. Thanks

Placebo

if its animation, not too complex, then yes flash is the way to go, no programming language is required but you can use action script with it to do more advanced things [snow falling] or interaction, dynamic effects.

3D wise you can get plugins like paper vision 3d, but to do a proper 3d animation, you need a 3d suite like 3d studio max or maya, these are not pick up and learn type jobs, modeling is fairly hard then a bone structure is applied to do the animation, however something like a chess board moving pieces is quite simple

you can do simple animations with jquery
depends what you want.

greyed

Cheers man, really appreciated. Reading up on jQuery now.

...so as not to cap the thread, always open to more tips if anyone has them

Pixelcraft

My tip, scrap the idea. Animation (in the traditional sense) on the web is completely dead, and is viewed as nothing more than an annoyance in most cases. There are ways to add movement to a site with javascript, css3 and webkit transitions - but you'll need a good understanding of html & css to implement these.

As a matter of interest why do you ask? is it for a once off project, or a career?

stvincent

I agree with Pixelcraft, animations in general are annoying. If you are just looking for something like a looping movie, then just embed a flash or quicktime movie. Or do you want your user interact with the animation, in which case you'd better to go down the javascript road using JQuery, Yahoos YUI or dojo. I've used YUI2 animations, you need to know a little javascript, but quite easy to get up and running

greyed

Pixelcraft wrote: »

My tip, scrap the idea. Animation (in the traditional sense) on the web is completely dead, and is viewed as nothing more than an annoyance in most cases. There are ways to add movement to a site with javascript, css3 and webkit transitions - but you'll need a good understanding of html & css to implement these.

As a matter of interest why do you ask? is it for a once off project, or a career?

Its a one off project a family member asked me to do, I saw it as a learning opportunity. I fully intend to learn all I can regarding all aspects web design though as I have wondered about it as a career path.

I had actually considered this, Im aware alright that web animation, intros especially are "out of fashion", and i'll bring that up with them... but surely there are other uses for flash? Is it not worth my time learning?

stvincent wrote: »

I agree with Pixelcraft, animations in general are annoying. If you are just looking for something like a looping movie, then just embed a flash or quicktime movie. Or do you want your user interact with the animation, in which case you'd better to go down the javascript road using JQuery, Yahoos YUI or dojo. I've used YUI2 animations, you need to know a little javascript, but quite easy to get up and running

This may be for a web-based application if that makes any difference, but I agree that animations can be annoying. Fairly familiar with html/css already and am starting work on JS now. Ill read up on YUI, cheers.

Pixelcraft

greyed wrote: »

but surely there are other uses for flash? Is it not worth my time learning?

Yes flash is used for all sorts of things, my opinion (and it's only an opinion as people are fairly divided on this) is that flash is dying out, if it was my I wouldn't invest any more time learning it.

red_ice

flash isnt dying out period. It is very highly sought after by a number of clients of mine. I will however advise them against it, but most poeple are very bullheaded about what they want, and if you dont give it to them they will get it elsewhere.

One thing i would agree with is that it is an annoyance. Alot of people wont see past a flash portfolio for their photography work, as they want it to come across looking artistic or whatever. As far as search results go, flash is dire.

I dont like to use flash on anything i do, but sometimes theres just no avoiding it. As people have said, it depends what you want to do with flash. From a programming point of view, Flash is very versatile, noone can deny it. But if you know how to program other languages, there is usually 10 other alternatives that are usually FAR superior.

Pixelcraft

Of course some clients will ask for it, that's not proof that it's a sound technology to invest 10+ years of your life into. All the pointers are that flash is becoming less important each year, so I would think very carefully before putting in the time.

red_ice

Pixelcraft wrote: »

Of course some clients will ask for it, that's not proof that it's a sound technology to invest 10+ years of your life into. All the pointers are that flash is becoming less important each year, so I would think very carefully before putting in the time.

Of course, you're 100% right.

I guess you could say that about any technology tho really. Its a fast moving industry. TBH, the op seems to know a bit about programming. doing it in flash would be a doddle.

Definitly dont spend all your time on it, but have a go at it and see what you can get out of it.

greyed

Thanks again for the input here.

red_ice wrote: »

I dont like to use flash on anything i do, but sometimes theres just no avoiding it. As people have said, it depends what you want to do with flash. From a programming point of view, Flash is very versatile, noone can deny it. But if you know how to program other languages, there is usually 10 other alternatives that are usually FAR superior.

This has me curious. Do you(s) mean that the practices that flash facilitates are seen to be dying out, or simply flash as a means is? Im wondering here what other methods you would use to create animation. Jquery etc of course, but flash seems to be very versatile, can these other methods stand up to it?

What are the main concerns with flash? Do people dislike it because its proprietry? Because of the content it produces or the way it produces it? Is it inefficient/unstable/bulky? Is the entire adobe creative suite seen in the same light?

Pixelcraft wrote: »

Of course some clients will ask for it, that's not proof that it's a sound technology to invest 10+ years of your life into. All the pointers are that flash is becoming less important each year, so I would think very carefully before putting in the time.

I have been looking at it for a few days now, and it doesnt seem to be something that would take 10 years of my life to learn ...maybe im being arrogant or havnt delved deep enough yet, but is it really that difficult? I have checked it out and am quite interested by it :pac: theres seems to be a lot of solutions and features.

From what ive learned with glut, animating in flash or other visual enviornments is much faster. Is animation generally built via code or GUIs like flash?

Also if you guys could suggest any sites where I could keep up with current events regarding web design, that would be great.

Sorry for the barrage of questions

lucideer

greyed wrote: »

3D animations using openGL/glut and C++.

Given you're clearly from a programming background (C++) and mentioned openGL in your OP, I'm pretty shocked noone (as far as I could see) has mentioned canvas! Canvas is a drawing API for javascript. It currently only supports 2D animation, but a 3D spec is in the works and has been tried out in some experimental browser builds.

2D canvas: http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
3D canvas: http://www.khronos.org/webgl/

Canvas isn't supported in IE at all, but there are various shims and methods to get it to work - explorerCanvas being the most well known.
3D canvas as I mentioned isn't supported in any stable browser yet.

greyed wrote: »

it seems to be flash I am looking for? Is this the current standard?

Nope. "Avoid" is the general consensus on flash. It's still the only practical solution for many things on the web, as not all newer technologies are well supported, especially if you're already experienced with Flash and are willing to make some compromises (portability, accessibility, efficiency), but generally the purpose of newer specifications like HTML5 are to phase out Flash as much as possible over time.

greyed wrote: »

Has HTML5 brought a lot of changes? Is it now the standard?

It has, as have many related spec./developments - it's technically not "fully" a standard yet as the spec. itself is still slightly in flux, and not all of it is well supported (Internet Explorer).

greyed wrote: »

What is SVG exactly? Is it relevant to me at this point?

SVG is an XML based vector graphics spec. It's very different to canvas (mentioned above) as it's a file format, a markup language (so can contain readable content and is parseable/transformable/etc.) and is vector-based - whereas canvas is a bitmap-based dynamic drawing programming API. So obviously things made with SVG and canvas can look similar on the surface at first glance, but underneath they're fundamentally different with varying applications. Another advantage of SVG, as it's an XML based markup language like XHTML, is that it can embedded as parseable content into webpages.

greyed

Cheers lucideer! Very informative, really appreciate it.

I wonder could someone point me in the right direction once again? Googled it to death but still not entirely sure...

Im trying to work more with 3d animation. Specifically, for example, take something like that draughts board I made (ill link below, sure why not) and have it rotate around and display a logo on the other side once its animation has completed. I need the board to be 3d though, so it does not dissappear when it hits 90, basically so it just looks well.

I tried creating a 3d board in flash, but it looks awful, sort of pseudo-3d, then I moved onto swift3d and got familiar with that and tried to import a model with which to nest the animation in, but it exports in frames/symbols which I cant do much with in terms of arbitrary rotation/editing etc. So I thought I needed an editable 3d model in flash or do all my textures and painting in swift3d/3ds max then just animate on top. Is this possible? My search lead me to papervision3d and other 3d engines in terms of model building for flash.

Is that correct? Is papervision3d or something like it the right idea? It is code based, so can it be manipulated in flash via AS or something? For this kind of animation do I need to look elsewhere other than flash? Or if im way off in everything im saying here, please tell me Kind of exausted looking for answers ha, so any help would be excellent!

Heres the first flash animation I did if anyone is interested (warning, its terrible :P) http://megaswf.com/serve/35828/
I assume it could be done with jQuery or something else having painted everything up first?

p

Papervision 3D is way too much for what you're looking for.

I'd suggest simplifying it as much as possible and just trying to draw it drom a 3D perspective, rather than using 'real 3D'

greyed

It seems to be overkill alright. 3D perspective wont be sufficient for what im looking to do however.

greyed wrote:

do all my textures and painting in swift3d/3ds max then just animate on top

This is possible though, using this tutorial. Swift 3D is very capable