This panel allows customizations and the ability to arrange each individual asset on the design canvas.

Read through to learn more about:

  • Properties
  • Animation
  • Action
  • Layers
  • Timeline Animations

About the Properties, Animation and Layers Panel

Customize and arrange a widget’s properties and animations using the Properties Panel.  
To access the panel, select the asset to edit and the panel will slide left. Click on the side arrow again to minimize the panel for more canvas real estate.

Properties Section

The properties panel allows certain properties of the asset to be adjusted. See below to learn about specific features of this panel.

  1. Size: Adjust the width and height of your assets (pixels)
  2. Position: Adjust the position of your assets
  3. Anchor: Select a fixed point on the asset to apply an animation or rotation
  4. Opacity: Adjust the transparency of your asset
  5. Rotation: Adjust the rotation of your asset (degrees)
  6. Scale: Adjust the scale of your asset (pixels)
  7. 3D Rotate: Adjust the rotation of your asset (Z axis)
  8. Animation Mask: Masking restricts an animation to that element’s dimensions. An unmasked object will start outside the borders of the ad whereas a masked object will start outside borders of that object. View our helpful masking video here.

Animation

Bring your layers to life with the animation panel. Easily view the lifespan of the ad.
 
Animation Sequence: add/remove/reorder animations to control how the layer behaves during the life of the ad.
 
Lifespan Line: visualize the layer’s lifespan in the ad and where the different Frame Markers are present in the ad. Toggle Frame Markers to increase/decrease the lifespan of the layer.

Animation Panel Overview

  1. Animation Card: shows the type of animation that will play in the sequence. Cards can be dragged to reorder its position in the animation sequence.
  2. Name: click on the name to choose a different animation type - either from a preset or saved animation.
  3. Duration: change the duration of the animation in the card.
  4. Dot Menu: gives additional options.


 
Solid Line: indicates that the layer is visible for that duration.
 
Note: the exception may be that the layer is off the canvas or has opacity zero.
 
Dotted Line: indicates that layer is not active. In the example below, Rubber Band effect plays at 6s mark for 1s and the layer disappears at 7s mark.
 
Frame Toggle: shows where frames boundaries are. Click on the frame toggles to increase/decrease the lifespan of the animation sequence. Clicking will add/remove “pause cards” one at a time.

  • Filled Circle: indicates that the layer is visible at this frame boundary
  • UnFilled Circle: indicates the layer is NOT visible at this frame boundary

Start of Layer’s Life: shows when the layer starts its life. The text at the top indicates on which frame the layer was first dropped. All subsequent frame toggles are available so that users can extend the layer’s life beyond the current frame.
 
Note: To go to an earlier frame, users can simply navigate to earlier frame and paste the layer there.

Action

The action panel allows a unique click-through-URL per layer, as well as set up scripting or interactions with play effect and go to and play effects. Read more about scripting and interactions here.

Layers

The layers panel provides complete visibility to all of the assets on each frame. See below to learn about specific features of the layers panel.


Rename layers: Change the name of any layer via the Layers Panel to remember them easily. Double click the name of the layer and type to change.
 
Rearrange layers: Click to drag and drop layers to rearrange their order. The first item on the layers panel is the top layer that sits on top of everything else, the last item on the panel is the bottom layer which is below everything else

  1. Hide/unhide layers: Toggle the Hide/Unhide icon on a layer to control whether it will be visible on the stage. If an object/layer is visible, the eye icon will appear as black, if it is hidden, the eye icon will be gray.
  2. Show on all frames: Toggle Show on All Frames button to control whether a layer will appear on one frame or all frames on that particular ad size. If Show on All Frames is toggled on for a layer, the icon will appear next to it. If it is toggled off, there will be no icon unless you hover over the layer
  3. Lock an asset: Locking an asset will prevent selection and any modifications. When an object is locked, it cannot be moved nor will any modifications apply to it.
  4. Dot Menu: The dot menu contains additional menu items like Create symbol and Delete. Learn more about symbols here.

  

Timeline 

Timeline is an advanced feature available to users who have the feature enabled in their account settings by an administrator. Timeline animations is similar to a "movie-maker" application and allows users the ability to edit their ad on a timeline rather than by frame.

We have put together the following training material for users new to the feature:

Did this answer your question?