Video's and animations How-to

From Freeplane - free mind mapping and knowledge management software
Revision as of 19:44, 29 March 2012 by Jokro (talk | contribs) (Create file index.html)

Introduction

There are many programs which can capture what you are doing on the screen and turn it into a video which can be viewed on Youtube. The problem with Freeplane maps in following this procedure is:

  • the resolution of the video is too low to be able to read the content of Freeplane's nodes;
  • the amount of memory stored is disproportionally large.

The following describes a procedure which keeps the resolution necessary for crisp, readable mind maps and takes a minimum amount of storage.

Wink

The program used is Wink, which is at free program. Wink captures the screen and the position of the cursor independently form each other. To see the cursor moving on the screen, only the begin and end points of the cursor are stored. If besides the cursor, the screen is not changing, only one screen is captured during the whole movement. Next when running the video Wink displays te screen and (re)generates the cursor movement. Each screen shot can be extended with call outs, images and recorded sounds giving an impression of a running animation or video - in the full resolution in which the screen is captured. The result can be rendered into flash. A special version could be converted to whatever format you need (e.g. mp4 or avi), although it is not clear you would want this if you are using a computer.

Principle

In the following a standard procedure is developed which:

  • makes sure the Freeplane map is readable enough;
  • helps to minimize the work involved;
  • makes possible to reorganize and adapt a recording at a later time;
  • gives the best result if conversion to a video format or YouTube is necessary.

For this setting and procedure a supporting html file is provided which will make sure the flah file is displayed the best possible way.

Procedure

  • Define a directory with the name of the video you are ging to make, e.g. myVideo.

Open Wink

  • Select New project.
  • Select fixed screen size of 1280 x 720 (HD), e.g. window region 31,10 x 1310,729. Markers are shown which indicate this area.
  • Open Freeplane. Make Freeplane window fit exactly within the capure area shown by Wink.
  • Select input driven capture rate at mouse click, key press
  • Minimize Wink
  • Use Alt + Pause to start/stop input driven capture; or use Pause for a single screen shot.
  • When finished, render video for Macromedia flash (or if you want to convert it later to mpeg4 of avi, Macromedia uncompressed).
  • Save the generated files in directory myVideo. The files generated are: myVideo.htm, myVideo.sfw and myVideo.js.
  • Rename myVideo.htm into w1280x720.html
  • Use the procedure below to create file index.html and copy it into directory myVideo.
  • If you want to view the video on your computer, start index.html; or
  • If you want to use the video on your webserver, upload the directory myVideo to your webserver. The video stars if you address .../myVideo; this will automatically call index.html which will do its thing and call w1280c720.html.

Create file index.html

Copy the following text to a file called index.html:

<HTML> <HEAD> <!-- In the head section of the page --> <script> <!-- function wopen(url, name, w, h) { // Fudge factors for window decoration space. // In my tests these work well on all platforms & browsers. w += 32; h += 96; var win = window.open(url, name, 'width=' + w + ', height=' + h + ', ' + 'location=no, menubar=no, ' + 'status=no, toolbar=no, scrollbars=yes, resizable=yes'); win.resizeTo(w, h); win.focus(); } // --> </script> </HEAD> <BODY> <a href="w1300x760.html" target="popup" onClick="wopen('w1280x720.html', 'popup', 1300, 760); return false;"> Click here to open the page in a new window. </a> </BODY> </HTML>