Screencasting  is a better and great way to showcase a procedure, to teach,demonstrate a service or to create video tutorials without having to write a content or an article. Screencasting tools are available both as desktop applications (Free and commercial) and web-based services. The good news is that there are a growing number of screencasting tools that are completely free to use; some do not even require a registration to let you get started.

Videos are simply great to deliver a message in a very short time and for most people bandwidth is not a problem any more.The following screencasting  tools are all free to record screen but of course their features are not as much as paid ones.You can easily record your screen and add audio or edit your recorded screen videos with these tools.If you know more free tools then please denote in comments section.

Free tools

1.Aviscreen

AviScreen is an application for capturing screen activity in the form of AVI video or bitmap images.It has a unique feature called "follow the cursor". Using this mode you can produce a video or image of relatively small dimensions while covering all mouse activity over the whole screen area.You may stop or pause the video capture at any moment.  If you use the popup menu to stop/pause the capture, the process will also be captured and may need to be trimmed later. When the computer is slow or very busy, sometimes it is necessary to hit the shortcut key several times before it works.This is a free capture program that records the video into AVI files, but can also do BMP photos. It's Windows only and does not record audio.

2.Camstudio

Free and open source streaming video software for Windows that allows you to capture screen and audio activity on your computer and create AVI video files and export to SWF. CamStudio has an easy-to-use interface and includes a video annotation feature, custom cursors and selected screen region recording.

3.Copernicus

A free program for Macs that focuses heavily on making quick and speedy films by recording the video to your RAM for quicker access. Does not include any support for audio.

4.Goview

Free Windows software from Citrix Online, that allows you to record video of your screen, capture audio, edit and host your videos without bandwidth limitations. Screencasts can be password protected, and downloaded/uploaded to other sites.

5.ISU

ISU enable people to easily Record a sequence of operations in applications.
Edit the recorded presentation, draw on it and add nice notes and stylish HTML pages.Send it to friends via Email, Messenger or any other application or Browser Email. Or even create FAQ (Frequently Asked Questions) in a Center-Folder.

6.Jing

Free simplified screen recording software for Mac and Windows machines that allows users to quickly record videos (including audio) from a window or region on their desktop, including the mouse, scroll movements and clicks on websites or applications. You can record up to five minutes. Jing is a product of TechSmith, the makers of Camtasia Studio and Camtasia for Mac.

7.Krut

Krut is a screencast tool that is written in Java and well suited for making video tutorials (instructional videos) on most platforms. Krut records movie files, including sound, of selected parts of your screen. The files use the quicktime mov format. The program has an intuitive and compact user interface.

8.Freescreencast

Free software that lets you record your screen, capture audio, control the cursor, and export to FLV format. You can then upload to FreeScreencast.com  for free hosting (no file size or resolution limits) and sharing.

9.Screentoaster

ScreenToaster is a free web-based screen recorder designed to capture your screen activity, audio and webcam images in real-time then publish and share your video in blogs and websites.ScreenToaster works in all browsers and doesn't require any download so that you can use it anywhere, anytime.

10.Microsoft expression encoder

This free version of Expression Encoder 3 does not include support for IIS Smooth Streaming and H.264 encoding.

11.Screen castle

Screen Castle is an online recording tool.Of course it is not professional as the others but you can easily record your screen with one click and get the sharing codes immediately.

12.Screencast O matic

It's like an online tool which you don't have to download anything.You just click the Create Button and a box appears which works with Java and you adjust the screen area to start recording as you see in the below screen shot.you can send the recorded file directly to through hosting.

13.Screen jelly

A free web-based utility that lets you record your screen and audio for up to three minutes, then send it out to Twitter or in an email.

14.Screenr

A free web-based tool for Windows or Mac that lets you create screencasts without installing any software. Your screencast is published in high-definition Flash format, and can be shared on Twitter, YouTube or anywhere else on the web. Screenr is made by Articulate, the makers of Articulate Studio.

15.Oripa screen recorder

oRipa Screen Recorder is a handy tool to record your Windows desktop activities in real time and save it as a video file. oRipa Screen Recorder also captures anything you can hear on your PC, such as, music and talking through the PC's microphone.

16.Utipu

UTipU Tipcam has 2 versions.FREE and PRO.It is another easy to use tool for recording both video and audio.You can also make smart zooming which is very useful for presentations.Click the Zoom button to zoom into closer. This type of zoom will follow your mouse. You can also zoom before you start recording.

17.UltraVNC

The screen recorder is build with the old Rendersoft camstudio source.UltraVNC boasts a chat window, a dialog for file transfer and an embedded Java viewer which allows you to open a UltraVNC session in a browser. Supports audio also.

18.Webinaria

You can easily create screen records as .avi file and turn them in to .FLV file.You can also add you voice and edit the recorded file later.It requires Windows and totally FREE.

Let us know if we have missed some awesome app for screencasting and we will update the article.:)

In the first part of this tutorial we've built a distance finder using google maps. To build our app we've used the newest google maps api version, v3. Our distance finder lets the user write two addresses, shows them on a map, shows the route between them and computes the route's length. Today, we will make some improvements to our distance finder and learn some other features of google maps!

What are we going to add?

We're going to add custom markers to our map and a new feature: draggable markers. The user will be able to drag the markers around the map and the route will be computed again. We will also let the user choose what type of route to show on the map (the available options are driving, walking and bicycling). Another thing we'll add is saving the map type selected by the user. This way, the selection will be saved when the user presses the "show" button next time and the user won't have to select the desired map type each time he refreshes the map.

You can check out the new version here and also download the source code.

Prerequisites

I recommend reading the first part of this tutorial if you haven't already. In this one I'll only describe the new features.

Apart from adding the new features, I've made a small change to the programs structure: I've made a separate function for showing the route between the two points (called drawRoutes()). I've done this because we'll have to call this function each time one of the markers is dragged by the user.

Adding custom markers

The first thing we'll add are custom markers. For this, we need a small image, I've used a silly one as an example. The code to set the image as the marker looks like this:

 var rabbit = new google.maps.MarkerImage('distance-finder-custom-marker-image.png'); // create the markers for the two locations var marker1 = new google.maps.Marker({    map: map,    position: location1,    title: "First location",    icon: rabbit,    draggable: true }); var marker2 = new google.maps.Marker({    map: map,    position: location2,    title: "Second location",    icon: rabbit,    draggable: true }); 

We've defined a new MarkerImage object and given it the location of the image for the marker. Also, we've changed the options a bit when creating the markers: we've added the icon parameter.

Making the markers draggable

As you can see from the previous piece of code, we've also set the "draggable" parameter to true, making our markers draggable. The user can now drag the markers anywhere on the map. But nothing happens when the markers are dragged! We'll have to add the code to find the address of the new locations and show the new route. But first, we'll have to add another action listener to the markers, to define the function to be called when the user stops dragging the marker.

Here's what we have to add to our code:

 // add action events for dragging the markers google.maps.event.addListener(marker1, 'dragend', function() {    location1 = marker1.getPosition();    drawRoutes(location1, location2); }); google.maps.event.addListener(marker2, 'dragend', function() {    location2 = marker2.getPosition();    drawRoutes(location1, location2); }); 

We've added one listener for each marker. Both of them save the new location of the marker (we can get that using the getPosition() function from the google maps api – the function returns the marker's coordinates) and call the drawRoutes() function giving it the new locations as parameters.

In the drawRoutes() function we'll have to find the addresses of the new locations and show the new line between the points and compute a new route.

To find the addresses of the points we'll use the reverse geocoding feature provided by google maps. Geocoding means finding the coordinates of a given address, and reverse geocoding means finding the address of the points when you know the coordinates.

Here's  the code for this:

 geocoder = new google.maps.Geocoder(); // creating a new geocode object if (geocoder) {   geocoder.geocode({'latLng': location1}, function(results, status)   {     if (status == google.maps.GeocoderStatus.OK)     {       if (results[0])       {         address1 = results[0].formatted_address;         document.getElementById("address1").value = address1;       }     }     else     {       alert("Geocoder failed due to: " + status);     }   }); }  if (geocoder) {   geocoder.geocode({'latLng': location2}, function(results, status)   {     if (status == google.maps.GeocoderStatus.OK)     {       if (results[0])       {         address2 = results[0].formatted_address;         document.getElementById("address2").value = address2;         continueShowRoute(location1, location2);       }     }     else     {       alert("Geocoder failed due to: " + status);     }   }); } 

The code is very similar to the code we've used to geocode the addresses. We've created a new geocoder object and called the geocode function as before. This time, the parameter we sent to the function is the location of the points. We've saved the result from the google server and the address1 and address2 variables. The address has the following format: "275-291 Bedford Ave, Brooklyn, NY 11211, USA". We've written this address in the text fields from the form, so the user will know the exact address of the plotted points. We've used the document.getElementById() to set the values of the text fields. When both addresses are found, we call the continueShowRoute() function which shows the routes.

We'll first show the line that connects the points. The difference from the first tutorial is that we now have to delete the last drawn line. Like this:

 // hide last line if (line) {    line.setMap(null); } 

Then we'll draw the new one, just like before.

We'll then compute the distance on a straight line between the points and show it on the screen, as I've shown in the first tutorial. The code to compute the quickest route and show the results on the screen also remains unchanged. The only thing we need to do is update the text on the infowindows with the new address values.

 // update text in infowindows var text1 = ' <div>'+</div>    '<h1 id="firstHeading">First location'+    '<div id="bodyContent">'+    'Coordinates: '+location1+'  '+    'Address: '+address1+'  '+    '</div>'+    '</div>'; var text2 = ' <div>'+</div>    '<h1 id="firstHeading">Second location</h1>'+    '<div id="bodyContent">'+    'Coordinates: '+location2+'  '+    'Address: '+address2+'  '+    '</div>'+    '</div>'; infowindow1.setContent(text1); infowindow2.setContent(text2); 

We've created new variables for holding the new texts to be shown in the infoboxes and used the setContent() function to change the texts on them.

Choosing the travel mode

We'll also add the option to change the driving mode for the route shown on the map. The available travel modes are: driving, walking and bicycling (this option is only available for routes in the US).

We'll first have to add a drop down box for the user to select the desired travel mode. We'll add a new row to our previously created table:

 <tr>   <td>Route type:     <select id="<span class="></select>       <option value="driving">driving</option>       <option value="walking">walking</option>       <option value="bicycling">bicycling (only in US)</option>     </select>   </td> </tr> 

Now, let's see what we have to do to show the selected travel mode correctly. We'll have to change the options for the request we send to the directions service from google.

 var travelmode = document.getElementById("travelMode").value; // get the selected travel mode if (travelmode == "driving")    travel = google.maps.DirectionsTravelMode.DRIVING; else if (travelmode == "walking")    travel = google.maps.DirectionsTravelMode.WALKING; else if (travelmode == "bicycling")    travel = google.maps.DirectionsTravelMode.BICYCLING; // find and show route between the points var request = {    origin:location1,    destination:location2,    travelMode: travel }; 

We've first saved the selected option from the drop down box in the travelmode variable. We've checked the value of this variable and set the travel variable that holds the google.map.travelmode. When setting the options for the request, we've used this variable to set the travel mode.

Saving the selected map setting

The map types the user can choose from are: roadmap, hybrid, satellite and terrain.

We're going to use a hidden field in the form for holding the selected map

 <input id="<span class=" />maptype" type="hidden" value="roadmap"/> 

When creating the new map object, we'll first check the value of this field and set the map type accordingly.

 // get the map type value from the hidden field var maptype = document.getElementById("maptype").value; var typeId; if (maptype == "roadmap")    typeId = google.maps.MapTypeId.ROADMAP; else if (maptype == "hybrid")    typeId = google.maps.MapTypeId.HYBRID; else if (maptype == "satellite")    typeId = google.maps.MapTypeId.SATELLITE; else if (maptype == "terrain")    typeId = google.maps.MapTypeId.TERRAIN;  // set map options var mapOptions = {    zoom: 1,    center: latlng,    mapTypeId: typeId }; 

The last thing we need to do is update the hidden field value when the user changes the map type. For this, we need to add a listener that will be triggered when the user changes the map type. The listener will update the value of the hidden field.

 // event listener to update the map type google.maps.event.addListener(map, 'maptypeid_changed', function() {    maptype = map.getMapTypeId();    document.getElementById('maptype').value = maptype; }); 

We've used the getMapTypeId() function to get the new map type and the document.getElementById() function to set the value for the hidden field.

And that's it! We've finished improving our distance finder!