Workspace Overview

* [Introduction](#introduction) * [Toolbars](#toolbars) * [Layers Panel](#layers-panel) * [Inspector Panel](#inspector-panel) * [Stages Panel](#stages-panel) The Design Studio HTML5 workspace is what you see when you are editing your ads. It is where you can access all the tools you need to make compelling and functional ads. The **Design Studio HTML5** gives you many tools to design your ads. The workspace is made up of toolbars, a stage, and multiple panels which you use to edit adjust all the different aspects of your ad. This article will help you understand what each of these panels controls and how to use them to make desired adjustments to your ads. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/ZBurRgeQHImrwfnlH0Iw", "Screen Shot 2016-01-06 at 9.39.58 AM.png", "2880", "1518", "#4f687a", "" ], "caption": "Flite Design Studio HTML5 in action." } ] } [/block] [block:api-header] { "type": "basic", "title": "Introduction" } [/block] The Workspace is made up of different parts. The central element of the workspace is the Stage itself. The Stage is the rectangular area where you place all your components. This is where you build your ad. Any changes you make to the ad like adding, editing, and rearranging layers are immediately reflected on the Stage. The Stage item at the bottom of the Layers panel can be also be selected so that the settings and actions based on the Stage can be edited. The workspace also contains toolbars to help you navigate through the workspace. They control the tools and functionality available on the Workspace, let you perform some administrative tasks like naming and publishing your ads, and give you information about your ad. It also contains the various panels available to you which are the main tools you use in designing and building your ad. These panels are * [Layers Panel](#layers-panel): Lists the layers in your ad, and allows you to manipulate (add, reorder, duplicate, etc.) these layers. * [Inspector Panel](#inspector-panel): Allows you to view and change the settings of the currently selected layer. * [Library Panel](#library-panel): Lists the Components, Starter Kits, and Datastream element available to you. * [Actions Panel](#actions-panel): Allows you to create sequences of actions based on triggers for each layer. * [Stages Panel](#stages-panel): Allows you to create and manage stages for expandable, responsive, and multi-stage ads. * [Variables Panel](#variables-panel): Allows you to create variables that can be changed on a placement-by-placement basis, and assign these variables to layer settings. [block:api-header] { "type": "basic", "title": "Toolbars" } [/block] ## Header [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/I8WVf3kmS6WAJdZBVf8A", "Screen Shot 2016-01-05 at 11.40.51 PM.png", "2880", "94", "#043046", "" ], "caption": "The header contains mostly navigational tools that are used for accessing other parts of the Flite Design Studio." } ] } [/block] [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/rfDJxQ1gRriuSFxXRK8E", "Screen Shot 2016-01-05 at 11.42.48 PM.png", "76", "92", "#143441", "" ], "caption": "This button is used to return to the Flite Console." } ] } [/block] ## Main Toolbar [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/mlBj8rX5Q52LgX4pkDbE", "Screen Shot 2016-01-05 at 11.44.11 PM.png", "2872", "80", "#43566c", "" ] } ] } [/block] ## Footer [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/yzpQYtMbQ4pooVkQnTwh", "Screen Shot 2016-01-05 at 11.45.05 PM.png", "2880", "82", "#262b2f", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Layers Panel" } [/block] ## Basics The Layers Panel displays all the layers and layer groups in your ad. This panel is docked to the left edge of your Design Studio workspace. However, you can change the panel’s width if you want it to take up more or less of your workspace. * **Toggle the Panel** on and off using the Layers icon in the Control Bar, or Ctrl+1. * **Add layers** by clicking a component in the Library > Components panel. * **Reorder layers** by dragging and dropping them in the panel. * **Edit layer settings** by clicking on the desired layer, and editing settings in the Inspector panel. * **Delete and duplicate layers** using the icons at the top of the panel. * **Change layer visibility** using the :fa-eye: icon to the left of the layer name. * **Rename a layer** by double-clicking its name and typing in a new one. * **Edit Stage properties** by clicking the “Stage” entry at the bottom of the panel, and editing settings in the Inspector Panel. ## Layer Panel Controls There are several icons at the top of the **Layers panel**. [block:parameters] { "data": { "0-0": ":fa-folder: (Cmd+G)", "0-1": "Add Group", "0-2": "Adds a new layer group immediately above the currently selected layer.", "1-1": "Filter by Tag", "1-2": "Filters layer panel by keywords set in the Tag section of a layer’s Inspector Settings.", "2-1": "Undo", "3-1": "Redo", "2-0": ":fa-undo: (Cmd+Z)", "3-0": ":fa-repeat: (Shft+Cmd+Z)", "4-1": "Layer Commands Menu", "5-1": "Delete Layer...", "5-0": ":fa-trash-o: (Del)", "5-2": "Deletes the currently selected layer.", "2-2": "Steps back in the undo/redo history.", "3-2": "Steps forward in the undo/redo history.", "1-0": ":fa-filter:", "4-0": ":fa-cog:", "4-2": "*See section below.*" }, "cols": 3, "rows": 6 } [/block] [block:callout] { "type": "info", "title": "NOTE", "body": "The undo history does not persist across sessions. So as soon as you exit the Design Studio, your undo history will be cleared. The maximum number of steps in each stage's undo history is 100." } [/block] ## Layer Commands Menu [block:parameters] { "data": { "0-0": "**Copy Layer**", "0-1": "Command+C", "h-0": "Command", "h-1": "Shortcut", "h-2": "Details", "0-2": "Saves the selected layer and its configuration to your clipboard.", "1-0": "**Cut Layer**", "1-1": "Command+X", "1-2": "Removes the selected layer from your ad and saves it to your clipboard.", "2-0": "**Paste Layer**", "2-1": "Command+V", "2-2": "Pastes layers saved in your clipboard into an ad’s stage. Copied layers can be pasted in separate ads within the same browser session.", "3-0": "**Duplicate Layer**", "3-1": "Command+J", "3-2": "Duplicates the selected layer within the current stage.", "4-0": "**Delete Layers…**", "4-2": "Brings up the selection mode allowing you to select and delete multiple layers within the current stage.", "4-1": "Command+Delete" }, "cols": 3, "rows": 5 } [/block] *Applies to Copy, Cut, Paste, and Duplicate:* * All layer settings are copied * All layer actions and transitions are copied and applied relatively * All layer children are copied * Each child’s settings, actions, transitions, and children are copied [block:callout] { "type": "success", "title": "TIP", "body": "To copy multiple layers, move them into a container layer (e.g. a group or view), and copy this parent layer." } [/block] ## Basic Layer Operations **Adding a layer:** To add a new layer to the Layers Panel, simply click one of the components in the Components Panel. A new layer corresponding to the default version of that component will immediately appear above the currently selected layer. **Selecting a layer:** Click on a layer to select it. Selecting a layer in the Layers Panel will have the following effects: * The Inspector Panel will update to display the selected layer’s settings * If Show Selection Edges is toggled in the ad’s Edit Mode, the layer will have a blue selection box around it. **Toggling layer visibility:** To change a layer’s visibility, click the :fa-eye: icon to the left of the layer’s name. ## Video Tutorial [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fqyb6m9xR_Tk%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dqyb6m9xR_Tk&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fqyb6m9xR_Tk%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=qyb6m9xR_Tk", "title": "Flite Ad Design part 4: Layers", "favicon": "https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico", "image": "https://i.ytimg.com/vi/qyb6m9xR_Tk/hqdefault.jpg" } [/block] [block:api-header] { "type": "basic", "title": "Inspector Panel" } [/block] ## Basics * **Move the Inspector** around your workspace by dragging it by its title bar. * **Toggle Inspector on and off** using the icon in the Control Bar, or Ctrl+2. * **View and change settings** for currently selected layer in the four sections within the Panel. * **Instantly see your changes** on the Stage, as soon as you make them. The Inspector Panel displays the properties of the currently selected layer, group, or stage. Select any of these items in the Layers Panel, and its properties will appear in the Inspector Panel, allowing you to modify them. Drag and drop the Inspector Panel around your Design Studio workspace using its title bar. The Inspector Panel has the following expandable sections: * [**General:**](#section-inspector-general) Properties that are not layer-specific (e.g. position, size, name). These properties are the same for all layers. * [**Settings:**](#section-inspector-settings) Properties that are specific to the component in this particular layer. * [**Actions:**](doc:design-studio-working-with-actions) Actions that are assigned to this layer. * [**Transitions:**](doc:design-studio-adding-transitions) Transitions that are defined on this layer. ## Inspector General The Inspector Panel’s General section is the same for each layer. It allows you to change some high-level layer settings in three tabs – Info, Appearance, and Tags. ### Info Tab This tab contains the layer’s name, icon, position and size parameters. * **Name:** Lets you change this layer’s name. This name is used in the following contexts: * The name of this layer in the Layers Panel. * The label used to indicate this layer in a parent navigation component, such as the *Gallery* or *Tabset*. * **Thumbnail:** Lets you change this layer’s thumbnail. The thumbnail is used by certain navigation components, such as the *Gallery* component, to indicate a navigation button for this component. If this layer is not a child of one of these navigation components, you do not need to specify a thumbnail. * **Position: **Controls the X and Y position of this layer with respect to its parent layer. The anchor point used here is the top left corner of both layers. For example, if X=10 and Y=50, that means the upper left corner of this layer is 10 pixels to the right and 50 pixels below the upper left corner of its parent layer. If the parent layer controls its children’s geometry, the Position settings will be grayed out and you will not be able to change them. * **X:** X offset, in pixels. * **Y:** Y offset, in pixels. * **Size:** Controls the dimensions (width and height) of this layer in pixels. If the parent layer controls its children’s geometry, the Size settings will be grayed out and you will not be able to change them. * **W:** Width, in pixels. * **H:** Height, in pixels. ### Appearance Tab This tab contains the layer’s high-level look-and-feel properties. * **Layer Opacity:** Controls the opacity of this layer, which determines how much you can see through the layer to what’s underneath. 100% means fully opaque; 0% means fully transparent. This affects the opacity of this layer’s children as well. * **Border:** Controls the thickness of the component border in pixels. Enter 0 for no border. * Border Color: Specifies the color of the component’s border. * **Fill Color:** Specifies the background color of this component. * **Fill Opacity:** Controls the opacity of the background color. 100% means fully opaque; 0% means fully transparent. ### Tags Tab Layer tags allow you to apply tags to the layers within your ad, and filter the Layers Panel to display only layers with a particular tag. This can be especially helpful if your ad contains a large number of layers or if you are creating a reusable ad template. To add a tag to a layer in your ad, select the layer in the Layers Panel. This will focus the Inspector Panel on that layer. Go to the Inspector Panel’s General section and select the Tags tab. This section will allow you to apply custom text as the tag for that layer. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/77kGCJ42T6asJvHkOzeF", "layer-tags-1.png", "332", "342", "#25587d", "" ] } ] } [/block] After you’ve tagged a layer, an icon will appear on the right side of the layer. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/FAy0WgtXRVOv8lzPr9wb", "layer-tags-2.png", "212", "30", "#266abb", "" ] } ] } [/block] To filter your your Layers Panel by tag, click the Filter by Tag icon in the Layers Panel. This will bring up a *Show* dropdown with all available tags in your ad. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/LPLNr7QRniGATO0RiJfV", "layer-tags-3.png", "214", "645", "#517fe3", "" ] } ] } [/block] After a particular tag is selected, the layers panel will only display layers with that tag applied. Note that when in this view, re-ordering of layers and adding groups is disabled. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/83lvIW78SDmeWUOUQKlf", "layer-tags-4.png", "216", "449", "#265d85", "" ] } ] } [/block] To display all layers, click the “x” to the right of the dropdown, or select *All Layers* from the dropdown. ## Inspector Settings The Inspector panel’s *General* section is the same for each layer. It allows you to change some high-level layer settings in two tabs – *Info* and *Appearance*. The Inspector panel’s *Settings* section contains settings that are specific to the component represented by each layer. The settings are different for each component. See each component's documentation for information on its settings. For more on standard components available in Design Studio, [click here](design-studio-components). [block:api-header] { "type": "basic", "title": "Stages Panel" } [/block] ## Basics The Stages panel lets the ad designer create, delete, and manage stages, as well as switch contexts between stages. When you switch contexts to a new stage, the Layers panel and Preview change correspondingly. * **Toggle Panel on and off **using the *Stages icon* in the Control Bar, or Ctrl+4. * **Add new stages** by clicking the *Add Stage* button. * **Toggle between stages** by clicking the left arrow (Previous Stage) and right arrow (Next Stage) buttons. * **Switch between stage contexts,** enabling you to view and change each of the creative stages of your ad. ## Stages The Stage panel lists the stages currently defined in this ad. The table columns are as follows: * **Name:** The name of each stage as it appears in the Placement Settings of each placement in the Traffic Module. The primary stage, the one that appears without any user action, is automatically named Default Stage and can't be renamed. * **Dimensions:** The pixel dimensions for each stage are listed here. Like the Stage Name, the Dimensions can be defined in the Inspector Settings. * Click the :fa-plus-circle: icon to add a new stage. * Click the :fa-files-o: icon to duplicate a stage. * Click the :fa-trash-o: icon to delete a stage. ## Editing Stages To edit a stage, click on its row in the table. This will bring up the stage in both the Layers panel and the Inspector panel, where the Stage's contexts and attributes can be edited. ## Video Tutorial [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FFJsZb3Nd2O8%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DFJsZb3Nd2O8&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FFJsZb3Nd2O8%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=FJsZb3Nd2O8", "title": "Flite Ad Design part 8: Stages and Expandable Ads", "favicon": "https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico", "image": "https://i.ytimg.com/vi/FJsZb3Nd2O8/hqdefault.jpg" } [/block]

Flite Help Center

Design Studio

Campaign Studio

Report Studio

Metrics

Flite Console

Ad Ops

Component Studio