Place bands and arrows with shapes

First look at the screen before any shape is added. Shapes go in an open area where they do not cover the presenter's face.

1. 1Check the open areas in the preview. This example uses the space to the right of Rika and the upper right.
2. 2The timeline shows, from the top, the avatar clip, three speech clips and the background.
3. 3Click Add media below the preview.

↘Red arrows and white labels are guide annotations ＋ Enlarge with callouts

1. 1
   Check Check the open areas in the preview. This example uses the space to the right of Rika and the upper right.
2. 2
   Check The timeline shows, from the top, the avatar clip, three speech clips and the background.
3. 3
   Action Click Add media below the preview.

Check Shapes live in the same Add media dialog as images and videos.

The Add media dialog opens. At first it shows the Presets tab with photos and illustrations.

1. 1Check that Presets is selected when the dialog opens.
2. 2Click Shapes at the upper right.

↘Red arrows and white labels are guide annotations ＋ Enlarge with callouts

1. 1
   Check Check that Presets is selected when the dialog opens.
2. 2
   Action Click Shapes at the upper right.

Check Shapes sits at the right end, apart from the two tabs on the left.

The dialog switches to the list of shapes. You set the colour and outline in the top row and pick a shape from the list below.

1. 1Fill is the colour of the shape. Twelve colours are offered, and blue is selected at first.
2. 2Outline is the line around the shape. It starts as None.
3. 3There are twenty shapes: rectangles, circles, a star, arrows, a speech bubble, a ribbon, bands and more. Scroll down for the rest.

↘Red arrows and white labels are guide annotations ＋ Enlarge with callouts

1. 1
   Check Fill is the colour of the shape. Twelve colours are offered, and blue is selected at first.
2. 2
   Check Outline is the line around the shape. It starts as None.
3. 3
   Check There are twenty shapes: rectangles, circles, a star, arrows, a speech bubble, a ribbon, bands and more. Scroll down for the rest.

Check The samples in the list are drawn in the colour and outline you have chosen. The square at the right end of the colours is for picking a colour outside the twelve (not used in this guide).

The first shape is a band to sit behind the heading. We keep the initial blue.

1. 1Scroll the list down and click Band (for captions). Its frame turns blue when selected.
2. 2Click Add at the lower right.

↘Red arrows and white labels are guide annotations ＋ Enlarge with callouts

1. 1
   Action Scroll the list down and click Band (for captions). Its frame turns blue when selected.
2. 2
   Action Click Add at the lower right.

Check Add stays disabled until a shape is selected.

The band is placed across the full width at the centre of the screen. It covers the presenter, so we fix its size and position in the next step.

1. 1Click the Band (for captions) clip on the new top row. The clip runs from the beginning to the end of the project.
2. 2In the preview, white handles appear at the four corners, above and to the left of the band.
3. 3Open Shape on the right to find Fill, Outline and Size. Right after adding, the size is 1280 × 160.

↘Red arrows and white labels are guide annotations ＋ Enlarge with callouts

1. 1
   Action Click the Band (for captions) clip on the new top row. The clip runs from the beginning to the end of the project.
2. 2
   Check In the preview, white handles appear at the four corners, above and to the left of the band.
3. 3
   Check Open Shape on the right to find Fill, Outline and Size. Right after adding, the size is 1280 × 160.

Check Right after adding, the right panel still showed the previously selected clip. Clicking the shape clip changes Type to Shape clip. If the Shape heading is collapsed, click it to open.

Make the band just large enough for the heading and move it to the upper right.

1. 1Enter 620 for the width and 90 for the height in Size, confirming each with the Tab key. Width and height change independently.
2. 2Enter 290 for X and -280 for Y in Position X / Y. The centre of the screen is 0; X grows to the right and Y grows downwards.
3. 3Check in the preview that the band is smaller and now sits at the upper right.

↘Red arrows and white labels are guide annotations ＋ Enlarge with callouts

1. 1
   Enter Enter 620 for the width and 90 for the height in Size, confirming each with the Tab key. Width and height change independently.
2. 2
   Enter Enter 290 for X and -280 for Y in Position X / Y. The centre of the screen is 0; X grows to the right and Y grows downwards.
3. 3
   Check Check in the preview that the band is smaller and now sits at the upper right.

Check The on-screen note says you can drag the shape in the preview to move it, use the corner handles to resize it and the top handle to rotate it. This guide enters numbers throughout so that the same result is easy to reproduce.

A shape cannot hold text, so the text is placed separately with Text and laid over it. Choosing Text below the preview adds a text row at the top. The screenshot shows that text clip selected again after the example was finished.

1. 1Enter the heading in the Text field and confirm with the Tab key.
2. 2Enter 42 for Font size, which fits within the 90-pixel height of the band.
3. 3Setting the text Position X / Y to the same 290 and -280 as the band centres the text on it.

↘Red arrows and white labels are guide annotations ＋ Enlarge with callouts

1. 1
   Enter Enter the heading in the Text field and confirm with the Tab key.
2. 2
   Enter Enter 42 for Font size, which fits within the 90-pixel height of the band.
3. 3
   Check Setting the text Position X / Y to the same 290 and -280 as the band centres the text on it.

Check Front and back follow the order of the rows: a higher row is in front. The text row is above the band row, so the text appears in front of the band. Entering text and choosing fonts are covered in the text guide. In this example the text clip was also extended to the end of the project.

The second shape is an arrow. Open Add media → Shapes again, and this time set the colour and outline first.

1. 1Click orange in Fill.
2. 2Click Outline and choose Thin. Normal and Thick are also available.
3. 3Click Arrow to select it, then choose Add at the lower right.

↘Red arrows and white labels are guide annotations ＋ Enlarge with callouts

1. 1
   Action Click orange in Fill.
2. 2
   Action Click Outline and choose Thin. Normal and Thick are also available.
3. 3
   Action Click Arrow to select it, then choose Add at the lower right.

Check When you change the colour and outline, the samples in the list change to match at once. We kept the initial near-black outline colour.

The arrow also arrives as a clip running from the beginning to the end. Left like this it would stay on screen throughout, so we keep only the time we need. In this example it should appear when the second sentence starts.

1. 1Put the playhead at the moment the arrow should appear by clicking the time ruler. In this example it is at 4.97 seconds.
2. 2Click the Arrow clip on the top row to select it.
3. 3Click Split. The clip is cut in two at the playhead. The first half stays selected, so press the Delete key to remove it.

↘Red arrows and white labels are guide annotations ＋ Enlarge with callouts

1. 1
   Check Put the playhead at the moment the arrow should appear by clicking the time ruler. In this example it is at 4.97 seconds.
2. 2
   Action Click the Arrow clip on the top row to select it.
3. 3
   Action Click Split. The clip is cut in two at the playhead. The first half stays selected, so press the Delete key to remove it.

Check The playhead was at 4.97 seconds when the arrow was added, yet the clip started at 0 seconds. In this example, shapes were added from the beginning to the end of the project regardless of the playhead.

Select the remaining arrow (from 4.97 seconds to the end) and fix its size and position. The screenshot shows the playhead then moved, by clicking the ruler, to 9.47 seconds, just before the third sentence starts.

1. 1Enter 260 for the width and 150 for the height in Size.
2. 2Enter 290 for X and 40 for Y in Position X / Y: the open area to the right of Rika.
3. 3Click Split again. The arrow becomes two clips: 4.97 to 9.47 seconds, and 9.47 seconds to the end.

↘Red arrows and white labels are guide annotations ＋ Enlarge with callouts

1. 1
   Enter Enter 260 for the width and 150 for the height in Size.
2. 2
   Enter Enter 290 for X and 40 for Y in Position X / Y: the open area to the right of Rika.
3. 3
   Action Click Split again. The arrow becomes two clips: 4.97 to 9.47 seconds, and 9.47 seconds to the end.

Check Splitting after setting the size and position gives two clips with the same size and place. All that remains is changing the direction or colour of each.

The first arrow should point up to match “go straight ahead”. The screenshot shows the playhead moved to 6.47 seconds to check it.

1. 1Click the first arrow clip (4.97 to 9.47 seconds).
2. 2Enter -90 for Rotation. Clockwise is positive, so minus 90 points the arrow up.
3. 3Check in the preview that the arrow now points up.

↘Red arrows and white labels are guide annotations ＋ Enlarge with callouts

1. 1
   Action Click the first arrow clip (4.97 to 9.47 seconds).
2. 2
   Enter Enter -90 for Rotation. Clockwise is positive, so minus 90 points the arrow up.
3. 3
   Check Check in the preview that the arrow now points up.

Check The Size values stay at 260 wide and 150 high after rotating.

The second arrow stays pointing right to match “turn right”. We only change its colour so the two are easy to tell apart. The screenshot shows the playhead at 11.47 seconds.

1. 1Click the second arrow clip (9.47 seconds to the end).
2. 2Click green among the Fill colours on the right.
3. 3Check that the arrow in the preview is now green. It still points right.

↘Red arrows and white labels are guide annotations ＋ Enlarge with callouts

1. 1
   Action Click the second arrow clip (9.47 seconds to the end).
2. 2
   Action Click green among the Fill colours on the right.
3. 3
   Check Check that the arrow in the preview is now green. It still points right.

Check The colour and outline can still be changed from Shape on the right after adding. There is also a No fill checkbox (not used in this guide).

Choosing View → Library in the top menu opens the Library on the left side of the screen. It has a Shapes entry too.

1. 1Click Shapes at the left edge.
2. 2The same twenty shapes are listed vertically.

↘Red arrows and white labels are guide annotations ＋ Enlarge with callouts

1. 1
   Action Click Shapes at the left edge.
2. 2
   Check The same twenty shapes are listed vertically.

Check Placing a shape from here is not demonstrated in this guide. To close it, choose View → Close left area.

We saved the project (Ctrl+S) and reloaded the page. The band, the text and the two arrows are all where we put them.

1. 1From the top: the row with the two arrows, the heading text row and the band row. A higher row is displayed in front.
2. 2Check that the lower right shows Saved (auto-save).

↘Red arrows and white labels are guide annotations ＋ Enlarge with callouts

1. 1
   Check From the top: the row with the two arrows, the heading text row and the band row. A higher row is displayed in front.
2. 2
   Check Check that the lower right shows Saved (auto-save).

Check After reloading, we selected each shape and confirmed that its colour, size, position and rotation were the same as before saving.

Create the avatar video with Generate pending in the toolbar, then play from the beginning to check when the shapes appear. The screenshot shows playback at 7.45 seconds.

1. 1Check that the avatar clip shows Preview generated.
2. 2Click the Play button at the left. During playback it changes to the Pause mark, as shown.
3. 3Check that the upward arrow is on screen during the second sentence.

↘Red arrows and white labels are guide annotations ＋ Enlarge with callouts

1. 1
   Check Check that the avatar clip shows Preview generated.
2. 2
   Action Click the Play button at the left. During playback it changes to the Pause mark, as shown.
3. 3
   Check Check that the upward arrow is on screen during the second sentence.

Check In this playback the band and heading stayed on screen throughout, the upward arrow from 4.97 to 9.47 seconds and the right-pointing arrow from 9.47 seconds to the end. Adding shapes and text alone did not require the avatar video to be generated again.

Finally we exported an MP4 with Export in the toolbar. The screenshot shows the finished-video player that opened after the export, at the end of playback.

1. 1The time reads 0:14 / 0:14, which tells you the video played to the end.
2. 2Check that the band and the heading appear in the same place as in the editor preview. The green right-pointing arrow is on screen below them.
3. 3When you have finished checking, click Close below the video.

↘Red arrows and white labels are guide annotations ＋ Enlarge with callouts

1. 1
   Check The time reads 0:14 / 0:14, which tells you the video played to the end.
2. 2
   Check Check that the band and the heading appear in the same place as in the editor preview. The green right-pointing arrow is on screen below them.
3. 3
   Action When you have finished checking, click Close below the video.

Check For export settings and downloading, see the MP4 export guide.