Follow
  • MDX: Manage > Ads > Design New HTML5 Ad > Actions and Animations > Animations
  • Sizmek Advertising Suite: Creative > Ads > New Ad > Design HTML5 Ad > Actions and Animations

Overview

Ad Builder supports two methods for scaling and rotating objects:

  • Absolute Rotation and Scaling: The object is rotated or scaled in relation to its size and rotation as drawn on stage.
  • Relative Rotation and Scaling: The object is rotated or scaled in relation to its current size and position.

Scaling Objects

Objects are scaled relative to the source reference point as a percentage of their size. Ad Builder provides two methods for scaling objects based on the following reference points:

  • Scale By: Scales objects in relation to the current size. For example, scaling by 50%, shrinks the object to half of its current size. Repeating the action will shrink the object by another 50%. 


  • Scale To: Scales objects in relation to the object’s original size (as drawn on stage). For example, scaling to 50%, shrinks the object to half of its original size. Repeating the action again does not change the object size as the object is already at 50% of its original size.

The scaling methods in Ad Builder are available in the Actions and Animations pane in the Animations category.

Scaling Objects According to X and Y Coordinates

You can create common animations such as opening, closing, and spinning objects by scaling your animated objects according to X and Y coordinates. Ad Builder supports the following scaling methods:

  • Both: The animated object's width and height change proportionally on the X and Y axis. This is the default value.
  • X: The animated object's width changes while the height remains unchanged. This is useful when...
  • Y: The animated object's height changes which the width remains unchanged. This is useful when 

Spinning An Object 

Ad Builder allows you to create an allusion of a spinning shape in Ad Builder, by changing the scaling of only one coordinate, X or Y, while leaving the other coordinate at a fixed size.

The following example illustrates how to spin an object by applying an alternative X-width coordinate  while the Y coordinate remains fixed.

 

Procedure
  1. In Ad Builder Components panel, Click Shape.
  2. In the Shape Properties panel, select the square shape.
  3. From the Actions and Animations panel, select any event to trigger the animation. In our example, select Tap/Click from the Create New Event list.
  4. Click Add Action and from the Animation list, select Scale.
  5. Select the target Image.
  6. In the Scale field, select X and set to 100%.
    Add another action.
  7. Click Add Action and from the Animation list, select Scale.
  8. Select the target Image.
  9. In the Scale field, select X and set to 50%.
  10. Click   to set the sequence to loop Forever. 

  11. Preview the animation.

Rotating Objects

Objects are rotated relative to the source reference point. The initial placement of the object on the stage is set to 0 degrees. Ad Builder provides two methods for scaling objects based of the following reference points:

  • Rotate By: Rotates the object by the amount specified from the current angle. Repeating this action will rotate the object again. 
  • Rotate To: Rotates the object by the angle specified from its initial 0° (relative to the original angle on the stage). Repeating this action will not rotate the object, as the object is already at the specified state. 

The rotation methods in Ad Builder are available in the Actions and Animations pane in the Animations category.

 

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments