Make an interactive demo
Press ⌘E, choose Interactive demo under Format, give it a title, check the steps and click Export. You get an index.html page with a step for each click, and a guide.md with the same steps as text.
An interactive demo is a web page made from your video. Each click in the recording becomes a step: a screenshot taken just before the click, with a hotspot on the spot to click and a caption from what you said. Viewers click through at their own pace.
Export one
- Press ⌘E and choose Interactive demo under Format.
- Type a Title. It shows on the first card.
- Optionally, add a Button for the last card, such as "Start a free trial", with its Label and a web address.
- Pick an Accent colour for the highlights and buttons.
- Check the Steps list (below), then click Export.
When it's done, click Open demo to see it in your browser.
Choose the steps
Steps lists the clicks that become steps. A double-click or quick clicks on the same spot count as one step. If there are more than 12 clicks, Cinemac keeps the ones that matter most, such as clicks you zoomed in on or talked about, and folds the rest in.
Each step's caption comes from what you said as you clicked. Without speech, it says what to do, such as "Click here" or "Type here".
- To leave a step out, click Leave this step out.
- To put it back, click Bring this step back.
Clicks you cut from the video aren't steps. If the list is empty, the edit has no clicks to make steps from.
What you get
| File | What it is |
|---|---|
| index.html | The demo page. Open it in any browser or put it on your site. |
| guide.md | The same steps as written instructions, for a help centre or a README. |
| images/ | The screenshots, one per step. |
Turn on One file to put the screenshots inside index.html. Then it's a single file you can email or upload on its own.
Transcribe the video first. Then each step carries what you said, and the guide reads like a written tutorial.