Skip to main content

Viewport

Intro​

The Viewport is where Shapes within a Composition are rendered and made visible so they can be visually composed.

Use the tools to select, transform, edit and draw Shapes and to edit supported Filters and Shaders.

When hovering over Shapes in the Viewport with the Select tool, the Shape's name will appear and, depending on the Shape's complexity, its paths or bounding box will highlight to indicate what will be selected on click. The level of detail for this 'pre-selection highlighting' is automated:

  • Full - All paths/contours will highlight for Shapes with low complexity.
  • Medium - Bounding boxes are drawn for individual child-meshes where Shapes are of moderate complexity. Text Shapes get special handling where bounding boxes are drawn for each word as the character count increases.
  • Low - A single bounding box is drawn for complex Shapes.
Show Layer Names

Showing Layer names when hovering with the Select tool is optional and can be set via View > Show Layer Names on Hover.

When Shapes are selected, a bounding box is drawn and a label with the Layer's name appears at the top right. See Group for selecting Groups and their children.

Settings​

Zoom​

Set the viewport scaling. Either use the dropdown to set a value or type in a value.

Shortcuts
  • With nothing selected, hit F to set the Viewport scaling to best fit.
  • With a Shape(s) selected, hit F to set the Viewport scaling to best fit the selection.
  • Use Cmd/Ctrl + +/- to double/half the Viewport zoom incrementally.

Playback​

  • Go to the first frame - Move the playhead to the first frame of the playback range.
  • Go to the previous frame - Nudge the playhead back one frame.
  • Playback - Start playback. Click again to stop playback.
  • Go to the next frame - Nudge the playhead forward one frame.
  • Go to the last frame - Move the playhead to the last frame of the playback range.

Playback Mode - Determine what happens when the playhead reaches the Playback End during playback:

  • Loop Playback - When the playhead reaches the Playback End frame, go to the Playback Start frame and continue playback.
  • Playback Once - When the playhead reaches the Playback End frame, stop playback.

Tag Filtering​

This icon will turn green to indicate that the Quicklist tag is active and affecting what is being displayed in the Viewport.

Audio Playback​

Globally enable/disable audio playback.

Options:

  • Play Audio - Enable/disable audio playback.
  • Audio Device - Select the audio device to play audio back through.
  • Playback Volume - Increase/decrease the volume of the audio in playback. Note that this does not affect the volume of the exported audio.
Audio Device Names

Audio devices that include unicode characters in their name may prevent audio playback to that device. These characters will not render correctly in the list – replace or remove them by renaming the device via the OS.

Snapping​

Snap Shapes to grids, other shapes, the composition etc.

Options:

  • Enable Snapping - Enable/disable snapping.
  • Snapping Threshold - Set the distance from a grid (in screen pixels) within which snapping will happen.
  • Grid - Enable/disable Grid snapping.
  • Ruler Guide - Enable/disable snapping to Guides.
  • Composition - Enable/disable snapping to the centre of the composition.
  • Bounding Box - Enable/disable snapping to bounding boxes.
  • Point - Enable/disable snapping to the points of Shapes.
  • Pixel - Enable/disable snapping to the Pixel Grid. The Pixel Grid can be enabled/disabled via the Grid settings and the View menu.

Grid​

Display grid lines in the Viewport. Note that clicking the icon will only enable/disable the 2D grid.

Options: Pixel Grid

  • Show Pixel Grid - Show/hide the Pixel Grid. The Pixel Grid will only appear at certain Zoom levels depending on the resolution of the current Composition.

2D Grid

  • Show Grid - Show/hide the 2D grid.
  • Grid Color - Set a color/alpha for the 2D grid.
  • Grid Step - Set the size of the gaps between the 2D grid lines (px).

3D Grid

  • Show Grid - Show/hide the 3D grid.
  • Grid Color - Set a color/alpha for the 3D grid.
  • Grid Size - Set the total size of the 3D grid (px).
  • Grid Step - Set the size of the gaps between the 3D grid lines (px).

Update the UI during Playback​

When checked, the user interface will update during playback. This includes elements like the playhead in the Scene Window, the Equalizer on the Sound Behaviour and attributes in the Attribute Editor. Note that this may occasionally have a detrimental affect on performance.

Playback Caching​

Enable/disable playback caching.

warning

Playback Caching is quite basic - any change to the scene (except time changes) will clear the cache. We intend to improve on this in the future with more specific per layer caching, and even background caching.

Draw Composition Boundary​

When checked, a white border will be drawn around the Composition Boundary.

Onion Skinning​

Draw onion skinning layers in the Viewport.

Options:

  • Onion Skinning - Enable/disable onion skinning.
  • Pre Color - Set the color for the shapes before the current frame.
  • Pre Frames - Set how many frames to draw before the current frame.
  • Post Color - Set the color for the shapes after the current frame.
  • Post Frames - Set how many frames to draw after the current frame.
  • Outline Only - Do not fill each shape.

Clipping Mask Overview​

Draw clipping masks in the Viewport.

Options:

  • Show Clipping Masks - When checked, masks connected to selected Shapes will be drawn as an outline in the Viewport.
  • Fill - When checked, a green overlay will appear in the Viewport whenever a shape with a mask connected is selected. The green area represents the zone in which your shape will be visible.

Transparency Style​

Set the transparency style of the viewport.

Options:

  • Use Checkerboard - when checked, a checkerboard will display where there is transparency. Note - all Compositions have a Composition Background. If the Alpha is set to 255 checking this setting will have no effect (there is no transparency).

Viewport Settings​

Options:

  • Viewport Quality - Set which features are rendered by the Viewport. This can be used to increase playback speed where required. Note - this setting does not affect final rendering.
    • High - Full quality using standard anti-aliasing.
    • Balanced (macOS only) - Use multisample anti-aliasing (MSAA). This setting balances performance with quality.
    • Low - Removes Anti-aliasing and any Image Filtering (see Image Shader).
    • Lowest - As per Low but also removes any Filters and Shaders.
  • Draw Debug Information - Draw (non-renderable) diagnostics information in the Viewport. This can be useful to visualise the point Ids in a Duplicator.
  • Show FPS in Playback - Display the frames per second the Viewport is running at during playback at the bottom of the Viewport.
  • Show Drawables - Control the display of drawables (Falloffs, Nulls)
    • Always - Always show drawables.
    • Except during Playback - Show drawables except during playback.
    • Never - Never show drawables.
  • Shape Depth Debug - Can be used to diagnose the depth of certain Shapes within Sub Meshes. Useful for things like SVG artwork.
  • Motion Paths - Draw paths that represent the direction and speed of selected animated Shapes. Up to 10 Shapes can be displayed at once. Note - Motion Paths are not editable in the Viewport.
    • Show Frames - When checked, dots are drawn to represent a Shape's position on each frame.
    • Show Keyframes - When checked, larger dots are drawn to represent the Shape's position keyframes.
    • Show Path - When checked, lines are drawn between the points representing each frame.
    • Show Direction - When checked, chevron arrows are drawn to indicate direction.
    • Path Duration - Set the length of a Motion Path in seconds.
warning

Debug Information currently only supports pointId and does not display in playback.

Contextual menu​

Right clicking a Shape or an empty space in the Viewport will bring up a menu with various options:

  • Select - Select the Shape under the cursor. Where multiple Shapes overlap, choose the required Shape from the menu items.
  • Select Hierarchy - Where a Shape is the child of another Layer, use the menu items to select the Layers above it in the hierarchy.
  • Get Info - Reveal information about the Shape under the cursor. Clicking a menu item will copy its value to the clipboard.
  • Zoom to Fit - Zoom the Viewport so that the Composition fits within it.
  • Zoom - Set a zoom level for the Viewport.
  • Save Snapshot - Save a Snapshot of the Viewport's current state to a slot.
  • Remove Snapshot - Remove a Snapshot from a slot.
  • Clear All Snapshots - Remove the Snapshots from all slots.
  • Copy Layer Id - Copy the Layer's Id to the clipboard for use with scripting
  • Copy as SVG - Copy the selected Shapes to the clipboard as SVG data.
  • Copy as JavaScript - Copy the selected Shapes' information to the clipboard as JavaScript code. See Cavalry Module.
  • Make Editable - Convert a Primitive to an Editable Shape.
  • Add Background to Selected - Create a background for the selected Shapes by creating a Rectangle and a Bounding Box Utility.
  • Layout - Add the selected Shapes to a Layout.
  • Bring to Front - Move the selected Shapes to the top of their parent's hierarchy.
  • Bring Forward - Move the selected Shapes up one layer within their parent's hierarchy.
  • Send Backward - Move the selected Shapes down one layer within their parent's hierarchy.
  • Send to Back - Move the selected Shapes to the bottom of their parent's hierarchy.
  • Add to Duplicator - Add the selected Shapes to a Duplicator.
  • Group Selected - Add the selected Shapes to a Group
  • Lock Selected - Lock the selected Shapes to prevent accidental selection. Note that the locking behaviour will depend on the Preferences.
  • Show in Attribute Editor - Load or reveal the selected Shapes in the Attribute Editor.
  • Show in Scene Window - Load or reveal the selected Shapes in the Scene Window.