Flip

What You’ll Learn#

• Flip a video clip horizontally or vertically.
• Use flipping in template or timeline workflows.
• Reset or toggle a flip using JavaScript.

When to Use#

Flipping is useful when you need to:

• Create:
  • Symmetrical video layouts
  • Animated collages
• Align eyelines when switching between front and rear cameras.
• Keep branded elements facing inward on split-screen layouts.

How to Flip Videos#

The CreativeEditor represents each video clip as a graphic block with:

• Size
• Transforms
• Grouping
• A fill set to a video asset

Use the Engine BlockAPI boolean helpers, common to videos and images.

Flip Horizontally or Vertically#

To flip a video:

1. Call the BlockAPI with engine.block.SetFip<Direction>.
2. Specify the block ID to flip.
3. Set the boolean to true.

engine.block.setFlipHorizontal(videoBlock, true);
engine.block.setFlipVertical(videoBlock,  true);

Query the Flip Status#

To know if a video has already been flipped:

1. Declare a variable for each direction.
2. Call engine.block.getFlip<Directions>.
3. Specify the block ID.

const flippedH = engine.block.getFlipHorizontal(videoBlock);
const flippedV = engine.block.getFlipVertical(videoBlock);

The response is a boolean stating whether this specific block has already been flipped or not.

Flip Clips Together#

To simplify the process of rotating multiple blocks, instead of rotating each block individually, you can select and rotate a cluster of blocks simultaneously.

1. Declare a variable for the group of clips using engine.block.group.
2. Specify each clip to include in the group by its block ID.
3. Apply the flip to the group variable.

For example, to flip three clips together:

const groupId = await engine.block.group([clipId1, clipId2, clipId3]);
engine.block.setFlipVertical(groupId, true);

When you flip the group:

• The flip mirrors everything at once.
• Each clip keeps the same spacing and order inside the group.

Restore or Manage Flip States#

The CE.SDK provides ways to reset or toggle a flip. You can either:

• Reset: when you want to restore a clip to its original orientation.
• Code a toggle: when you need a quick way to switch the current flip state on and off.

Reset a Flip#

To reset a clip to its default orientation:

1. Call setFlip<Directions>.
2. Specify the clip’s block ID.
3. Set the boolean to false.

For example, to reset a horizontal flip, use the following code:

engine.block.setFlipHorizontal(videoBlock, false);

Switch Flip On or Off#

Calling the same flip twice:

• Doesn’t revert to the original orientation.
• Issues two flips in the same direction.
• Leaves the clip mirrored.

To “toggle” the flip in your code:

1. Check if a specific clip is flipped.
2. Store the value in a variable (for example, isFlipped).
3. Set the opposite of that value in a new setFlip<Directions>function.

For example:

const isFlipped = await engine.block.getFlipHorizontal(videoBlock);
engine.block.setFlipHorizontal(videoBlock, !isFlipped);

In the preceding code, two actions are possible depending on the value stored in isFlipped:

• true: !isFlipped sets the horizontal flip to false.
• false: !isFlipped sets the horizontal flip to true.

You can add a toggle button to your custom UI to let users quickly test flipping a video horizontally.

Lock or Constrain Flipping#

CE.SDK provides a way to prevent editors from flipping a video. This can be useful to:

• Avoid accidentally mirroring text.
• Protect UI mock-ups or frames that must stay in a fixed position.
• Keep templates brand-locked.

To deactivate flipping, use setScopeEnabled with:

• The "layer/flip" key
• The boolean set to false

engine.block.setScopeEnabled(videoBlock, "layer/flip", false);

Troubleshooting#

API Reference Summary#