Animation and Visual Effects Showreel
Advertising illustrations Editorial illustration 3d Reconstructions Large Scale illustration

Home > commissioning tips > Video flash animation for the web


Video flash animation for the web


 How to add 3d animated graphics to your websites and internet videos


 About the author: Christian Darkin is an illustrator and animator and has written five books and countless magazine articles on 3d animation web animation,. Motion graphics  and visual effects.


 


 Use flash animation, but don`t use flash animation


The web is becoming increasingly a video medium and that means website designers increasingly need to be able to bring in the skills of video production and 3d animation.


 


 Visitors are becoming used to web video animation at the same quality as they see on TV and in the movies, and the opportunities for including such motion graphics in web banners, intro screens, and other web design elements are increasing.


 


 Flash animation is great, but it will only let you create the small range of effects it`s been designed to.  Rather than trying to produce a complex effect using Flash itself, it often makes sense to have the animation done as a Flash video – that way you have access to ANY effect – right up to full 3d animation and cinematic quality visual effects and motion graphics.  Nowadays flash video works so well, and starts playing so quickly that for many effects, it`s a no-brainer.


 


 But how do you go about including video flash animation and other video content in your sites, how much does it cost and what can you expect from it.  This article aims to provide a few answers.


 


A few tips for motion graphics on the web 


Talk to an animator:  whatever stage your project is at, a 3d animator will be able to give you a few pointers about what`s possible and how it can be achieved. 


 


 Animated Intro screens:  Think of an intro screen as a TV ad for your website or product.  Don`t make it more than about 15 seconds long, and make sure it gets the message across in a stylish and compelling way.  Just like a TV ad, your intro screen can mix motion graphics, text, 2d and 3d animation and video production.  Repeat visitors won`t want to watch it every time, so ALWAYS include a “skip” button.


 


 Banners:  Most of the time, banners will need to loop, so a seamless video animation is ideal.  Here, there`s no limit to the effects you can include, but if you tell your animation studio the elements you need, they`ll be able to come up with a range of suggestions and even give you preliminary mock-ups so you can fine-tune ideas.


 


Other web video animations:  If you`re including video of any kind on a website, it`s worth giving it a “house style” so that even if the video production is downloaded, played from another website or searched on google, it will be recognisable as your content.  The easiest way to do that is with a graphical “sting” or logo animation at the start and end, or by using captions and borders in your own style.


 


 Sound and text:  audio, music and voiceover can be great in animated web graphics or flash video, but it`s worth bearing in mind that many of your viewers will either not have speakers connected or will have them turned off.  For that reason, it`s worth also including any really important information as on-screen text.


 


Video footage:  You can now buy in stock video clips of virtually anything to use as part of  your web videos and animations (Take a look at www.footage.shutterstock.com where you can buy clips for a few dollars).  If you want to include a pan over the New York skyline by helicopter, or footage of a lion, it won`t add significantly to your costs and your video animation studio will be able to suggest ways to process the video for your own unique look. 


 


 Costs: 


 3D animation and video production cover a huge range of projects (everything from a simple cartoon up to a Hollywood movie) so the costs range widely too.  


 


What`s usually best is if you can give the video animation studio a rough idea of what your budget is and let them tell you what they can do with it.  As an animator, my usual method is to take the customer`s budget and give three options – one undercutting it, one using it to the full for the best possible effect – and one letting them know what they could get if they could find a little more.


 


Of course that`s only possible if the budget is reasonable to start with and to give you an idea, a 3D animated, web banner ad or one containing video clips will usually start at around £300, with more unique visual effects which take longer to create costing more.


 


 


How to increase your web graphics costs


 The most common reason that costs rise is repeated changes having to be made to a design at a late stage.  If there are elements you need to have in the design, or details you see in the early mock-ups that you`re not sure about, make sure you tackle them early on.  Equally, if there are people who need to OK your web animations, make sure they`re happy before you agree the design because having to re-do sections of the project can cost time and money.


 


 


 How to reduce your web graphics costs


 The quickest way to reduce costs in motion graphics is to get them all done at once.  Developing the animation style for your website is probably going to be the most costly part of the job, so you can save a lot of money and time by getting several banner ads or graphics stings done at once.


 


 


Payment


Most video animation studios will ask for 25% of the cost up front, 25% on delivery of the first finished version and the remaining 50% at the end of the project (often – if no changes are needed – the last two invoices are at the same time).  Smaller projects are usually simply paid in full on completion. 


 


 


 What if I really can`t afford 3d animation or video production for my web animations?


 Go to www.footage.shutterstock.com for 3d animated video footage (www.istockphoto.com is a good flash animation and stock video source) that you can use or adapt for your project.  It costs only a few dollars and there`s some very professional work there.  The downside is that anyone can use the material, so your site won`t be unique, and its unlikely to fit quite as perfectly with your own web graphics.



Back to tips