Five characters on their own act timelines, rendered by the skill.
A cast that acts on cue
Characters are the fastest way to give an explainer a guide. In Easy Storyboard you place a character on a slide and give it a timeline of acts; it waves when the narrator says hello, looks at the chart being described, points at the number that matters and reacts when the punchline lands.
The built-in cast
- Two people:
person(modern flat) andcutout(construction paper). Choose skin (light, medium, tan, brown, deep), hair (short, long, curly, bun, buzz, cap, bald), hair colour and outfit colour. - Seven mascots: blob, orb, bot, cat, ghost, star and bean, in any colour.
- Accessories: glasses, hat or bowtie.
Directing with a timeline
One attribute holds the whole performance. Times are seconds from the slide's start:
<div class="anim" data-anim="character" data-char="person"
data-skin="tan" data-hair="curly" data-color="#EC4899"
data-acts="0.5:wave; 2:look=#chart; 3:point=#chart;
4.3:happy; 5.2:say=It doubled!"></div>| Act type | Commands |
|---|---|
| Gestures | wave, nod, jump, bounce, shrug, spin |
| Moods | idle, happy, sad, surprised, think, wink |
| Gaze and pointing | look=#selector, point=#selector, rest |
| Speech | say=Text for a speech bubble (talks while it shows), talk, quiet |
Characters also blink, breathe and sway on their own between acts, and lip-sync rides the voice-over when data-talk="1" is set. Because every pose is computed from the timestamp, renders are frame-perfect and you can scrub backwards and forwards freely.
Bring your own character
- Visual rigger. Open
rigger.html, paste your SVG, drag the eye and mouth handles into place, preview the moods and export the result. - JSON definitions. Register a character with
Storyboard.defineCharacter(def)and check it withvalidate_character.py. - Tag your own art. Mark the parts of an existing SVG (eyes, mouth, arms) and the engine animates them.