Difference between revisions of "Video's and animations How-to"
m (→Create file index.html) |
m (typo) |
||
| Line 7: | Line 7: | ||
=Wink= | =Wink= | ||
| − | The program used is [http://www.debugmode.com/wink/|'''Wink'''], which is | + | The program used is [http://www.debugmode.com/wink/|'''Wink'''], which is a free software. Wink captures the screen and the position of the mouse cursor independently from 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 the screen and (re)generates the cursor movements. Each screenshot 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= | =Principle= | ||
Revision as of 21:11, 12 April 2012
Contents
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 a free software. Wink captures the screen and the position of the mouse cursor independently from 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 the screen and (re)generates the cursor movements. Each screenshot 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 1: source animation or video
- Define a directory with the name of the video you are ging to make, e.g. myVideo.
- Download Wink. Read its instruction.
- Open Wink
- Select File > New.
- 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
The wink videois played in your browser. The file index.html makes sure the viewing window for the wink video is maximal (it opens a new window). For this the directory where you keep your video, e.g. .../myVideo, must contain a file index.html (see the above procedure). The content of this file is shown below. Copy the following text to an editor such as Windows Notepad and save it as index.html:
<HEAD> <script> function wopen(url, name, w, h) { 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>
Example
The following video was created this way.
Procedure 2: convert to mpeg, avi
With procedure 1 the basic animation/video is created. Once this has been tested and is final, it is possible to convert it to a HD quality mepg 4 or avi video:
- render the wink project a second time, with setting "Macromedia uncompressed".
- convert the resulting flash file with a free flash to mpeg 4 convertor.
The resulting mpeg 4 can be played on your TV/video system, or uploaded to YouTube. N.B. The image quality is less and the size of the file is much larger than the file produced in procedure 1.
