- MDX: Manage > Ads > New > Design New HTML5 Ad
- Sizmek Advertising Suite > Creative > Ads > New HTML5 Ad
Ad Builder for HTML5 provides the Sequence Start, Stop, and Pause actions. You can trigger a sequence of actions and animations to start running from a different object. For example, when the user clicks a button on the ad, a square image containing the logo will slide on to the ad and then rotate.
When configuring the feature, the components involved can be perceived as:
- Source Component: Triggers the sequence of actions on the target component.
- Target Component: Runs the actions and animations sequence.
Configure a Start Sequence
This procedure displays the Start sequence feature, whereby the user clicks the button component (source) that causes the shape component (target) to slide onto the ad and rotate.
- Configure a set of actions on the target component:
Configure a sequence of actions on the square using the shape component. In this example, the square component will slide on to the ad and then rotate.
- Configure the source component and assign the Start sequence action to the run from this component:
- Add a Button component to the ad.
- In the Actions and Animations panel, click Add Action.
- In the Actions List, scroll down to the Sequence events and select Start.
- Select the target component. In this example, it is the square component.
- Select the relevant animation sequence. There may be a number of animation sets associated with the target component.
- Preview the ad to ensure that the sequence of actions and animations runs correctly.
Creating a Custom Sequence of Actions Event
The custom sequence feature is an extension of the Trigger Start, Pause, and Stop functionality enabling you more flexibility when designing your actions and animations. You can create a custom sequence of actions to run from any component, at any time. You to decide when the sequence should run by creating a custom sequence of events and using the Start Trigger event to run the sequence. This sequence is not dependent on a predefined trigger event for example, a click or mouseover.
The Custom Sequence is located in the Events list and is an extension of the Start Sequence feature. Unlike events, it is not triggered by actual on-page events like click or shake but instead is triggered when the Start Action Sequence event is triggered.
Note: A single custom sequence can be assigned to a component.
- Configure the component on which you would like to run the action and animations.
- Access the Actions and Animations panel.
- Click Create New Event and from the Create New Event list, select Custom Sequence.
- Configure a set of actions for the sequence. The following example, causes the shape to slide out when the custom sequence is triggered.
- Set the sequence of actions to run after an event has ended.
- Preview the ad to ensure that the sequence of actions and animations run correctly.