This project consists of a simple webapp that is built using Parcel.js and that contains tutorial hints designed using HTML and CSS and animated using GSAP (such as instructions and keyboard shortcuts). I built it to create video hints for this Blender Video Tutorial (Creating a colorful sliced landscape sculpture in Blender).
html5-animation-video-renderer is used to render the animated hints to .mov
files with alpha. They can than be imported into a video editor and placed above the screen recording.
Example:
Hints are created in the src/index.html file in the following format:
<div class="hint" id="h2">
<div class="top">Double Plane width</div>
<ol class="steps">
<li>In <span class="option"><img class="icon" src="/blender-icons/blender-icons/object_data.svg"/>Object Mode</span>, select the plane</li>
<li>Hit <span class="key">S</span> to scale</li>
<li>Hit <span class="key">X</span> to limit scaling to X axis</li>
<li>Type <span class="key">2</span> to double plane width</li>
<li>Click <span class="mouse lmb">LMB</span> to confirm</li>
</ol>
</div>
You can see in the example, that I use Blender SVG icons in the code to spice up the hints a bit.
-
Update git submodules:
git submodule update --init --recursive
-
Install node.js dependencies
npm install cd html5-animation-video-renderer npm install cd ..
-
Run parcel webapp
npm run start
Hints are now available under the URL http://localhost:1234. You can select specific hints to display using a location hash, for example:
http://localhost:1234#h1 will display the hint with the HTML-ID
h1
(The element<div class="hint" id="h1">...</div>
). -
Run the
render.sh
script to render out videos (Use Git Bash on Windows). Videos will be placed in the./out
directory. By default, the script will render hintsh1
toh5
. Editrender.sh
to change the hints that you want to render.Alternatively, you can render specific hints using the following command:
node html5-animation-video-renderer/render.js --url=http://localhost:1234#h1--alpha --video=out/h1.mov
-
Use the
.mov
files in theout
directory in your Video Editor. I use Blender VSE. Have fun! ๐