Using the timeline
The editing timeline enables you to build a time-based interface.
First step: The timeline
Here is a list of keyboard shortcuts that can help you in the timeline :
- Keyframe click > selection
- Click + shift keyframes > multi-selection
- Alt + A > selects key points (layers made) after the playhead
- Alt + B > selects key points (made of layers) before the playhead
- Alt + Shift + A > unselects key points (layers made) after the playhead
- Alt + Shift + B > unselects key points (layers made) before the playhead
- Alt + arrow > move the playhead to a frame
- Alt + shift + arrow > moves the playhead 10 frames
- Alt + arrow key point selected > selected key point moves a frame
- Alt + shift + arrow key point selected > selected key moves the point of 10 frames
- Alt + backspace> deletes the selected key point
- Alt space> read puts the timeline
Racontr’s editing timeline has been improved and activated by default.
Start by importing content on your page.
- Here we created a rectangle.
- Then expand your timeline by clicking on the arrow icon on the bottom right of your screen.
- The timeline is now expanded and you can see the rectange showing on the bottom left.
This is where you will set actions on your element.
The timeline in detail
- Layers: This is where your layers appear. They have the same name and are ordered in the same way that in your layer stack.
- Click on this icon to display all the editable settings of your element.
- Settings: Position (vertical and horizontal), Opacity (from 0 to 100%), Scale (width and height), Rotation (from -360 to 360°)
- This cursor indicates where you are on the timeline. Here for instance, you are 8 seconds into the timeline.
- Keyframes details: To animate your elements, you must create keyframes. You can move them along the timeline by clicking and dragging and you can delete them with the “delete” key.
- Choose the visibility of your layers
- Add a keyframe for one of the settings of the element: you might want to only change one setting, such as opacity for instance. first click on the show layer details icon, then click on the “add keyframe” icon next to the setting you want to edit. This will create a new keyframe at this timecode for this setting.
- Hide, visible, lock and delete your layer.
- Timeline actions
- Hide, visible, and all layers.
- Timeline options
- Play timeline (preview)
- Zoom in or out the timeline.
- Click on “timeline option”
- A windows appears with different options:
Timeline Loop endlessy
- Click the blue square in the action laye
- A windows appears with different options
Pause: puts the whole timeline on pause
Redirection: go to another of your projet at this timecode.
Go to: jump back or forward to a precise timecode of the timeline
Add a dispatch click on a element.
Use a video as the master media
You can use the timeline of a video to create your experience. To do so, you will “link” your video to the timeline to it will play automatically when moving the timeline cursor. This enables you to create timely interactions at precise moments of your video (even if the user’s connection breaks down, the interactions and animation are linked to the video playing so you’ll be sure to preserve perfect timing).
Click on the icon next to the video layer on the timeline
When the timeline will be blue, it signifies that the video is now the master media on the timeline.
Tips: Only uploaded videos can be used as master media. This can’t be done with videos from YouTube, Vimeo, Dailymotion.
Animation technique #1: Linear
Here is a method to easily animate your elements 5 settings: position, rotation, opacity, scale, visible.
This setting enables you to move your elements. Here is how.
- Make sure the timeline cursor is set on timecode 0.
- Select the element to animate.
- Move the cursor, choose the right timecode for your animation. Set it on timecode 00:02.00 and the animation will take 2 seconds to play.
- Once your cursor positioned on the right timecode, move your element on your page (remember, you can keep the Shift key pressed while using the arrow keys to displace it). A keyframe is created automatically.
Congratulations! You’ve just completed your first timeline animation.
The animation method is the same as for position, except you have to change the rotation setting from the “Element properties” panel on the left menu.
- Select your element
- Set your cursor to the right timecode
- Change the rotation setting in the properties panel. A keyframe is created automatically.
It is done exactly in the same way that for rotation.
The scale setting impacts the height and width of your element. You can for instance create an animation to enlarge a rectangle or create a zooming effect on a picture.
- Select your element
- Set your cursor to the right timecode
- On your page, use the blue squares on each corner of your element to change its size. In this example, we enlarged the rectangle. For picture you might want to preserve their proportions, you can do so by keeping the Shift key pressed while resizing.
Animation technique #2 : The reversed animation
This animation technique simplifies greatly the integrating work. To animate a number of elements, you begin by placing them as they should be at the end of the animation. You’ll then go back in the timeline to position the elements as they are at the very beginning (see the video below).
Step 1 : Create your final layout
- Import your elements on your page and create your layout
- Open the timeline
- By default, your layout was set at timecode “0” on your timeline. You can see keyframes created automatically (1)
- Move your cursor to the right timecode. Here we placed it at 00:01:40 (2) so the animation will take 1 second 40 to complete.
- Create new keyframe at that timecode to save your final layout. Click on the “Add keyframes” icon to do so (3)
Step 2 : Create your initial layout
- Set your cursor on timecode 0 (1)
- Let’s animate the image, select it (2) and the properties panel opens
- Change for instance the opacity setting to 0% (3) so it will be animated to go from 0 to 100% opacity in the animation timeframe.
- Your image “disappeared”. Let’s animate the two text blocks now. Make sure you are still on timecode 0 (1)
- Select the first text block (2) we will make it move from top to bottom (position setting).
- Keep the Shift key pressed and use the up arrow (3) to move your text block until it’s out of your page (it will remain visible in the editor, but won’t in preview mode)
- Do the same with the second text block towards the bottom (4)
Move the cursor along the timeline to make sure your animation plays properly. Congratulations, you’ve just completed your interface!