How to create beautiful Screencasts for your web apps?

Question

I am trying to create a screen cast for my new web app. I have just come across a great example of a screencast and I am wondering what is used to do this: Click on the video to play on this page.

I am impressed with the animation when the mouse is clicked and zooming into images from different angles.

Is this done with Actionscript or is there software that will make my life easier to do this?

Thanks all for any help

Update

Please note I am not jsut looking for screencast software - I am looking for one that can do quality professional animations just like the example above.

It seems they did theirs in Flash Action-script?

Naara

Answer 1

Very little of what is in that video is actual "screencast" The effects and animations are almost certainly done in a professional compositing application -- my guess is Adobe After Effects.

The "clicking" is all contrived -- they use a big arrow to make it clearer and easier to follow, and even add the little blue circles to show when something is actually getting clicked.

This may not be what you want to hear, because

1. After Effects is expensive, and the hardware required to run it well is really expensive.
2. After Effects is hard to learn.
3. Doing truly stunning compositing work takes a lot of time, patience and experience.

Those discouragements aside, it is doable. In addition to being a developer, I am an amateur video producer and have worked with After Effects. It is extremely powerful, and has some programming aspect to it when you get into using expressions to control the behaviour of elements.

Here is a Vimeo channel that showcases some great After Effects work: http://vimeo.com/channels/aework

If you are serious about getting into compositing to create videos like the one to which you linked, and want to learn After Effects, I recommend the training from http://www.lynda.com. They have a great series by Chad Perkins and I learned a ton from them. If you have a fair amount of time to devote, you can definitely get through them all in one month, which costs $25.

Vermiform

Answer 2

A pretty good free tool is Wink. Runs on Windows and Linux, produces .SWF, allowing you to annotate and fine-tune the mouse movements. It also lets you switch between event-driven, timed, and manual capture. So you don't have to worry so much about rehearsing your timing, like you do with some other tools. I've worked with it a little, and it seems very capable. It doesn't have the high-end features like zoom and pan though.

Another commercial tool is Instant Demo, which I've used more extensively. It's a full-featured tool (has the zoom feature, etc..), easy to learn, and fun to use. Also produces .swf. It's mid-priced, about halfway between Wink (free) and Camtasia (expensive).

Piste

Unfortunately Camtasia offer the zoom and pan option - it doesn't look that good. I mean when panning and zooming it seems jittery, it could just be me! Trying out Wink and Instant Demo. – Naara

Wink is pretty good and flexible, i use it a lot. You can create a timed capture or key capture and then you can edit any frame, import/Export images and so. – Garibay

Answer 3

If you are on Mac, the best tool is ScreenFlow. It has the whole workflow of recording, editing and exporting. You can add overlays, zoom to where the mouse is, darken bits of the screen and loads more. It's really worth checking out.

Bonner

Answer 4

Best tool to create Screencast is TechSmith's - Jing.

Bullpup

Answer 5

If you really want a killer demo, with custom effects and a great design, maybe hiring a flash developer for a week or so is a good idea :)

Garibay

Answer 6

Here is a list that might be useful for creating screen-casts. Some are not the easiest to use, but once you master them can help you create professional looking screencasts.

The ones I rely on most are Camstudio, Freez and Wink.

Fateful