Working with Actions

* [Actions Panel](#actions-panel) * [Action Triggers](#action-triggers) * [Action Events](#action-events) [block:api-header] { "type": "basic", "title": "Actions Panel" } [/block] The Actions Panel is now available in Design Studio HTML5. This article will cover how and where the Actions functionality can be set up. This new panel can be toggled from the toolbar. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/Fq612hVdSVWqHZjS5WQO", "Screen+Shot+2014-07-24+at+10.04.28+AM.png", "416", "135", "#22435e", "" ] } ] } [/block] **Triggers** - Triggers are inputs that can be used to trigger the occurrence of an event. **Events** - These are the standard events that are available for all layers. Underneath each event type is a list of additional settings that need to be filled in for each event type. **Triggers column** - This column appears on the left side of the Actions inspector and will display all Triggers for the Selected Layer or for All Layers. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/bEuer96aSJaI1LzhOopB", "Screen+Shot+2014-07-24+at+9.52.02+AM.png", "174", "127", "#5a90c1", "" ] } ] } [/block] **Events column** - This column appears on the right side of the Actions inspector and will display Events for the Selected Layer or for All Layers. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/Rk6pjPNpQduTnyAV6QMh", "Screen+Shot+2014-07-24+at+9.52.18+AM.png", "238", "125", "#416fa4", "" ] } ] } [/block] **Action Rows** - Action rows are horizontal groups in the Actions inspector. An action row will display a pairing of Trigger(s) and Event(s) associated with a particular Layer. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/wqLcKI3TqCtwphJzcHGw", "Screen+Shot+2014-07-24+at+9.52.37+AM.png", "536", "185", "#d85349", "" ] } ] } [/block] **Event sequencing** - You can chain events together by using the New Event Left / New Event Right. This allows Events to happen in sequence from left to right based on Trigger or group of Triggers. The leftmost Event will fire, once completed, the next Event to the right will fire. * **New Event Right** - Adds an Event to the right of the selected Event in the same sequence. This event will take place next in the Event sequence. * **New Event Left** - Adds an Event to the left of the selected Event in the same sequence. This Event will take place prior to the selected Event. * **New Event Below** - Adds an Event below the selected Event and creates a new Event sequence (chain of Events). * **New Event Above** - Adds an Event above the selected Event and creates a new Event sequence (chain of Events). * **Duplicate Event Right** - Creates a duplicate of an Event including all its settings and adds it to the right of the selected Event in the Event sequence. * **Duplicate Event Left** - Creates a duplicate of an Event including all its settings and adds it to the left of the selected Event in the Event sequence. **Multiple Triggers** - You can add multiple Triggers in an Action row to trigger the same Event sequence. For example you can trigger a sequence of Events based on a click on 2 or more buttons. * **New Trigger Above** - Adds a new Trigger above the selected Trigger within the same Action row. * **New Trigger Below** - Adds a new Trigger below the selected Trigger within the same Action row. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/dKLGszFMRNWJdlH5FY64", "Screen+Shot+2014-07-24+at+9.52.47+AM.png", "533", "138", "#214569", "" ] } ] } [/block] **Context Menu** - A right-click on a Trigger or Event will bring up the Context Menu. This convenient menu will allow you to: * add a New Event Right * add a New Event Left * add a New Event Below * add a New Event Above * Duplicate Event Right * Duplicate Event Left [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/bk82w6aCTR2betW4iw0A", "Screen+Shot+2014-07-24+at+9.52.58+AM.png", "235", "216", "#65afe2", "" ] } ] } [/block] **Target Self** - When configuring an event, you will be able to set a target layer for that event which will bring up a layer selection menu. Clicking on a specific layer will set that as the target for your event. Selecting “Target Self” will target the same layer that the trigger has been set on. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/eP6vDuxNTzulCYPAsMvu", "Screen+Shot+2014-07-24+at+9.53.07+AM.png", "228", "76", "#1c3c54", "" ] } ] } [/block] **Layer Filter Dropdown** - This dropdown allows you to see Triggers and Event set on a specific Layer or for all Layers contained within your ad. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/ulWV8x6YTBKgTxmt5RRV", "Screen+Shot+2014-07-24+at+9.53.19+AM.png", "292", "121", "#3f7ebb", "" ] } ] } [/block] **Add/Delete Action row** - To add or remove an Action row in your panel, click the “+” or “-” symbols located at the top right of the Actions panel. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/bQbxPzx7TAePlfEgCxDm", "Screen+Shot+2014-07-24+at+9.53.29+AM.png", "502", "133", "#36506b", "" ] } ] } [/block] **Adding Actions to the Stage** - It is now possible to set an Action on the Stage, rather than a specific layer. This allows you to trigger Events when the stage is shown or receives a message, and removes the need for unecessary layers to send and receive messages when the ad loads. Actions on the Stage level are limited to two triggers: * On Show: Triggers an Event when the Stage loads. * Message: Triggers an Event when the Stage receives a message from another layer. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/MkF1DeQjQbOfANb1H6Ck", "O2vQcuRtnM-3000x3000.png", "574", "214", "#1c3e5c", "" ] } ] } [/block] ## Video Tutorial Here is a video tutorial that walks through how to use the Actions & Animations panel. Click here to open the example ad used in this training within your own Flite account: [http://bit.ly/1qATArl](http://bit.ly/1qATArl) [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FsfupDz9AqN4%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DsfupDz9AqN4&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FsfupDz9AqN4%2Fhqdefault.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://www.youtube.com/watch?v=sfupDz9AqN4", "title": "Flite Ad Design part 6: Actions and Animations (HTML5)", "favicon": "https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico", "image": "https://i.ytimg.com/vi/sfupDz9AqN4/hqdefault.jpg" } [/block] [block:api-header] { "type": "basic", "title": "Action Triggers" } [/block] Actions allow you to manipulate layers to affect the ad throughout the user's experience. All actions begin with a trigger which defines what event will cause the defined actions to happen. *Triggers* are applied to specific layers and Here are the available triggers in Design Studio HTML5: * **Tap/Click** - When the user clicks or taps the layer * **On Show** - When the layer is shown * **On Hide** - When the layer is hidden * **Mouse Over** - When the user's mouse cursor passes over the layer * **Threshold** - Defines how long the user's mouse must remain on the layer before the trigger fires * **Mouse Out** - When the user's mouse cursor passes off the layer * **Tap** - When the user taps the layer on a mobile device *(mobile only)* * **Swipe** - When the user swipes the layer on a mobile device *(mobile only)* * **Direction** - Defines which direction of swipe will fire the trigger * **Pinch** - When the user pinches their fingers together within the layer *(mobile only)* * **Zoom** - When the user spreads their fingers apart within the layer *(mobile only)* * **Shake Device** - When the user shakes the device *(mobile only)* * **Message** - When a message is broadcast by the ad or from global messaging * **On Close Expansion** - When an expanded stage is closed * **Orientation Change** - When a device's orientation is changed *(mobile only)* * **Orientation** - Which orientation will fire the trigger In addition to these trigger, many Components have their own custom triggers which are specific to their behavior. These are covered in the documentation for the particular components. There are also two stage specific triggers which need to be assigned to the Stage itself in the Layers panel: * **In View** - Fired when the stage comes into view * **Out of View** - Fired when the stage goes out of view after being in view * **Threshold** - Define in percentage or pixels how much of the ad must be in view or out of view and for how long in order to fire this trigger [block:api-header] { "type": "basic", "title": "Action Events" } [/block] Actions allow you to manipulate layers to affect the ad throughout the user's experience. Flite contains many different general actions which can be used, as well as actions which are specific to particular components. The general actions are explained below: * **Show Layer** - Show a targeted layer * **Hide Layer** - Hide a targeted layer * **Animate Layer** - This feature allows you to animate a targeted layer to a specific x/y location within a Stage while setting various properties during the animation. * **Animate To** - Specific x/y coordinates to which the layer will move * **Animate To & From** - Defines both the starting and ending point of the layer during the animation. This is the specific x/y coordinates the layer will start animating from and where it ends the animation * **Set Current Position and Opacity** - This button allows you to move a layer to a particular part of the stage and define its current position and opacity as the Animate To or Animate From value * **Opacity** - The desired opacity on the targeted layer after the animation * **Scale** - The desired size relative to the layers original size after the animation * **Blur** - Adds a blur effect to layers as they animate (in pixels). Note this will not work in Firefox or IE10 due to browser limitations. * **Rotation** - The angle of rotation (in degrees) to which the layer should animate * **Duration** - The time it will take the animation to happen * **Easing** - Sets easing for the animation [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/nh3c8tRtq90osliuK4ww", "animations.png", "643", "347", "#5694bf", "" ] } ] } [/block] * **Layer Defined** - Target a layer to access the actions which are specific to that component * For example, the YouTube component has actions specific only to that component which allow you to play, pause, mute, unmet, and rewind the video. * **Open URL** - Direct the user to a new page * **URL** - The page to which the user should be redirected * **Open links in** - How the page should be opened * **Open App URL** - Open an application to a specific page with an app URI * **Share URL** - Share a specified link with specified text to an available social service * **Open Expansion** - Open a new stage expansion * **Target** - The stage to be opened * **Type** - The style of the expansion * **Expand** - A traditional expansion which opens a new layer on top of the current ad * **Hide Close Button** - Hide the default close button * **Expansion Origin** - Define the frame to which the anchor point will attach. If viewport, you can set it to have a Fixed Position on the screen * **Anchor Offset** - The x/y offset in pixels of the position of the expansion * **Anchor Point** - Defines to which corners the expansion will attach * **Lightbox** - An expansion which fills the viewport with an interstitial execution * **Fill Color** - The color of the background mask for the Lightbox * **Fill Opacity** - The opacity of the background mask * **Hide Close Button** - Hide the default close button * **Close on background tap/click** - Allow the expansion to be closed by tapping on the background mask * **Slide** - An expansion which pushes page content horizontally leftward, revealing the expanded stage * **Hide Close Button** - Hide the default close button * **Use Entire Viewport** - The expansion will push the page completely off the viewport * **Align Stages** - Defines how the expansion and the default stage will align * **Duration** - How long the slide animation will take * **Pushdown** - An expansion in which the content of a page is pushed down to reveal the second stage of an ad. See the [Pushdown FAQ](http://help.fliteinc.com/ad-studio/pushdown-faq.html). * **Resize to selected stage** - Instantly resize the container to the target stage rather than managing through actions * **Hide Default Stage** - Remove the default stage from the ad execution * **Close All Expansions** - Used on the default stage to close any open expansions * **Go To Stage** - Change the current stage to a different stage. Note that this should not be used for expansions * **Close This Stage** - Used on stages which are expansions in order to close the expansion * **Fit Container to Stage** - Resize the container of the ad unit in order to give room for a pushdown expansion * **Add a Delay** - Create a delay between actions * **Add a Loop** - Loop a string of action for the designated number of loops * **Broadcast Message** - Send a message to be used with Flite's messaging system * **Execute JavaScript** - Run the JavaScript function that you have placed in the Code field * **Fire Pixel** - Ping a third party tracking pixel * **Send Email** - Open the user's email client with a repopulated email * **Call Phone Number** - Dial a specified phone number * **Create Calendar Event** - Create an event for a mobile device's calendar [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/sGsL0ulhSr23Hb7npRNC", "Screen+Shot+2015-07-28+at+1.40.59+PM.png", "604", "506", "#04374b", "" ], "caption": "Open Expansion Action Event" } ] } [/block]

Flite Help Center

Design Studio

Campaign Studio

Report Studio

Metrics

Flite Console

Ad Ops

Component Studio