Research on How to create an Animated Travel Line
You know how in some movies a "travelling" dotted line indicates your travel route (for examples, please see the links below)?
For a personal side-project, I want to create some maps (as a background) and a gif file displaying the travel route (ideally on transparent background, superimposed over the map background) in the style mentioned above.
Before buying CC3+, I wanted to find out if the second part was even possible.
Here are the solutions I found (in chronological order):
Elegant solution:
Using After Effects (as seen for example in https://www.youtube.com/watch?v=8uZgU3f8p9A ).
Alternative solution (similar to the methods below): https://www.youtube.com/watch?v=nwxlcVKUDuU
Not tested.
How it works: Combination of in-built tools.
Advantage: Straightforward and customizable solution.
Disadvantage: Requires Adobe After Effects CC.
Simple solution:
Using a simple Paint Program and a simple Movie Program (as seen for example in https://www.youtube.com/watch?v=ihPELWaDYMI ).
How it works: Two images, one with the background and no travel route and the other one with the travel route (either on a transparent background or the same background as the first image). The second image is slowly superimposed over the first one (either from left to right, from right to left, from top to bottom or from bottom to top).
Not tested.
Advantage: Most people should already have access to the necessary programs.
Disadvantage: The route has to consistently go up, down, left or right, depending on your transition (e.g. no loops).
(Note: If you can create a video file, you can always produce a gif file based on the video afterwards.)
Homebrew solution:
Using a complicated series of programs (Inkscape and Text Editor, optionally Browser, Screen Recorder and gifsicle).
How it works: Creating the travel route in Inkscape (using paths) with the background map in a separate layer, exporting the travel route (without the map background) into an svg file, animating the svg by editing it in a Text Editor using a javascript trick (inspired by https://jakearchibald.com/2013/animated-line-drawing-svg/ , http://css-tricks.com/svg-line-animation-works and http://codepen.io/Evgeny/pen/IEGoq).
Optionally: Opening the file in the Browser, recording the animation with a Screen Recorder and converting it into a gif file using gifsicle ( https://www.lcdf.org/gifsicle/ or https://github.com/kohler/gifsicle ).
Partially tested.
Advantage: Suited to my particular needs.
Disadvantage: Complicated, may only work for black-and white maps (if you look closely).
The built-for-this-problem solution:
Using Route Generator ( http://www.routegenerator.net/ or https://sourceforge.net/projects/routegen/ ).
How it works: Built-in tool.
Tested.
Advantage: Easy and fast.
Disadvantage (nitpicking): No route-only on transparent background file without additional tricks (shouldn't be a problem for most uses).
It's obviously not really useful for a static map but if you want a more dynamic, interactive map, I hope you may find the information above useful.
For a personal side-project, I want to create some maps (as a background) and a gif file displaying the travel route (ideally on transparent background, superimposed over the map background) in the style mentioned above.
Before buying CC3+, I wanted to find out if the second part was even possible.
Here are the solutions I found (in chronological order):
Elegant solution:
Using After Effects (as seen for example in https://www.youtube.com/watch?v=8uZgU3f8p9A ).
Alternative solution (similar to the methods below): https://www.youtube.com/watch?v=nwxlcVKUDuU
Not tested.
How it works: Combination of in-built tools.
Advantage: Straightforward and customizable solution.
Disadvantage: Requires Adobe After Effects CC.
Simple solution:
Using a simple Paint Program and a simple Movie Program (as seen for example in https://www.youtube.com/watch?v=ihPELWaDYMI ).
How it works: Two images, one with the background and no travel route and the other one with the travel route (either on a transparent background or the same background as the first image). The second image is slowly superimposed over the first one (either from left to right, from right to left, from top to bottom or from bottom to top).
Not tested.
Advantage: Most people should already have access to the necessary programs.
Disadvantage: The route has to consistently go up, down, left or right, depending on your transition (e.g. no loops).
(Note: If you can create a video file, you can always produce a gif file based on the video afterwards.)
Homebrew solution:
Using a complicated series of programs (Inkscape and Text Editor, optionally Browser, Screen Recorder and gifsicle).
How it works: Creating the travel route in Inkscape (using paths) with the background map in a separate layer, exporting the travel route (without the map background) into an svg file, animating the svg by editing it in a Text Editor using a javascript trick (inspired by https://jakearchibald.com/2013/animated-line-drawing-svg/ , http://css-tricks.com/svg-line-animation-works and http://codepen.io/Evgeny/pen/IEGoq).
Optionally: Opening the file in the Browser, recording the animation with a Screen Recorder and converting it into a gif file using gifsicle ( https://www.lcdf.org/gifsicle/ or https://github.com/kohler/gifsicle ).
Partially tested.
Advantage: Suited to my particular needs.
Disadvantage: Complicated, may only work for black-and white maps (if you look closely).
The built-for-this-problem solution:
Using Route Generator ( http://www.routegenerator.net/ or https://sourceforge.net/projects/routegen/ ).
How it works: Built-in tool.
Tested.
Advantage: Easy and fast.
Disadvantage (nitpicking): No route-only on transparent background file without additional tricks (shouldn't be a problem for most uses).
It's obviously not really useful for a static map but if you want a more dynamic, interactive map, I hope you may find the information above useful.