* [Workspace Introduction](#workspace-intro)
* [Toolbar](#toolbar)
* [Stage](#stage)
* [Initial Layer](#initial-layer)
* [Backup Image](#backup-image)
* [Keyboard Shortcuts](#keyboard-shortcuts)
[block:api-header]
{
"type": "basic",
"title": "Workspace Introduction"
}
[/block]
The Design Studio HTML5 editor workspace consists several key elements. These are described and documented below.
* Layers Panel (Ctrl+1): Lists the layers in your ad, and allows you to manipulate (add, reorder, duplicate, etc.) these layers.
* Inspector Panel (Ctrl+2): Allows you to view and change the settings of the currently selected layer.
* Library Panel (Ctrl+3): Lists the components available to you. There is a set of built-in standard components providing a wide range of navigation and content functionality.
* Stages Panel (Ctrl+4): Allows you to create and manage stages for expandable ads, like the IAB Rising Star units.
* Stage: The area of your workspace where the ad is displayed. You can move layers around on the Stage. Any changes you make to the ad are immediately reflected on the stage.
[block:api-header]
{
"type": "basic",
"title": "Toolbar"
}
[/block]
You can find the Control Bar at the top of your workspace, directly underneath the Design Studio HTML5 Header. It contains some useful controls for manipulating your ad editing environment and the ad itself. There are four different types of controls here, grouped into clusters in the Control Bar. We discuss each of these from left to right.
[block:image]
{
"images": [
{
"image": [
"https://www.filepicker.io/api/file/ZNqqZ7EsScGw0WN0Ky3R",
"DAP_MOBILE_AD_Copy__Design_Studio_HTML5__Flite_Toolbar_Screenshot.png",
"1298",
"206",
"#299edc",
""
]
}
]
}
[/block]
## Editor Panels
These icons toggle the various Editor Panels on and off. The associated keyboard shortcuts are listed as well.
[block:parameters]
{
"data": {
"0-1": "Ctrl+1",
"1-1": "Ctrl+2",
"0-0": "**Layers**",
"1-0": "**Inspector**",
"2-1": "Ctrl+3",
"3-1": "Ctrl+4",
"5-1": "Ctrl+6",
"2-0": "**Actions**",
"3-0": "**Library**",
"5-0": "**Variables**",
"0-2": "Toggles the visibility of the Layers panel.",
"1-2": "Toggles the visibility of the Inspector panel.",
"2-2": "Toggles the visibility of the Actions panel.",
"3-2": "Toggles the visibility of the Library panel.",
"5-2": "Toggles the visibility of the Variables panel.",
"h-0": "Panel Name",
"h-1": "Shortcut",
"h-2": "Description",
"4-0": "**Stages**",
"4-2": "Toggles the visibility of the Stages panel.",
"4-1": "Ctrl+5"
},
"cols": 3,
"rows": 6
}
[/block]
## Edit/Test/Preview Modes
This set of icons let you change the mode you're working in.
[block:parameters]
{
"data": {
"0-1": "Ctrl+E",
"0-2": "Switch to Edit Mode. This lets you edit the ad. In this mode, you cannot interact with the ad as a user would. Clicking on the ad will select the layer you clicked on, highlight it in the Layers Panel and display its properties in the Inspector Panel. You can also drag and drop layers to reposition them within the ad.",
"0-0": "**Edit**",
"0-3": "",
"h-0": "Mode Name",
"h-1": "Shortcut",
"h-2": "Description",
"1-2": "Switch to Test Mode. This allows you to interact with the ad as a user would and test its functionality. The Editor Panels remain visible, so you can make adjustments as you are testing.",
"2-2": "Switch to Preview Mode. This hides all Editor Panels and allows you to interact with the ad in the same way that a user would.",
"1-0": "**Test**",
"2-0": "**Preview**",
"3-0": "**Preview on Device**",
"3-1": "Ctrl+Shift+P",
"2-1": "Ctrl+P",
"1-1": "Ctrl+Return"
},
"cols": 3,
"rows": 4
}
[/block]
## Extras Menu
The Extras menu dropdown next to the Editor Mode toggles contains tools for aiding the ad editing process and helping you position ad elements more precisely on the stage.
[block:parameters]
{
"data": {
"h-0": "Name",
"h-1": "Shortcut",
"h-2": "Description",
"0-0": "**Rulers**",
"0-1": "Ctrl+Shift+R",
"0-2": "Toggle ruler visibility. Rulers along the top and left edges of the workspace are now on by default in all ads. The rulers are marked with pixels as units.",
"1-2": "Toggle the visibility of guide lines. Click on a ruler and drag to create a new guide line. As you drag the guide, you will see its coordinate indicator change (X for vertical guides, Y for horizontal guides), enabling you to drop the guide exactly where you want it. Guides help you align items on the stage.",
"1-1": "Cmd+; on Mac, Ctrl+; on PC",
"1-0": "**Guides**",
"2-2": "Overlay a grid on top of your ad.",
"2-0": "**Grid**",
"2-1": "Cmd+' on Mac, Ctrl+' on PC",
"3-1": "Ctrl+H",
"3-2": "Show a blue outline around the selected layer. Click the outline and drag to resize the layer; click inside the outline and drag to move the layer.",
"3-0": "**Show Selection Edges**",
"4-0": "**Clear Guides...**",
"4-2": "Delete all guides in the current stage. Since this action cannot be undone, a confirmation dialog will appear",
"5-2": "Restores your workspace to all of its defaults, including open panels.",
"5-0": "**Reset Workspace**",
"4-1": "--",
"5-1": "--"
},
"cols": 3,
"rows": 6
}
[/block]
## Ad Information
The middle of the Control Bar contains the name and thumbnail image associated with your ad. Click this area to open the Ad Info Panel, which lets you change the name of your ad and its thumbnail.
## Commands Menu
This menu contains several useful options for managing your ad.
* **New Ad…** Starts the new ad creation workflow. You will first be prompted to save the current ad, and then presented with the Make New Ad dialog box.
* **Copy Ad…** Copies this ad, appends “Copy” to the ad’s name, and opens the new ad in Design Studio. Any unsaved changes in your original ad are saved, and the copy is made from the newly saved ad. Note that the changes in your original ad will only be saved, and not published.
* **Save as Template…** This saves the current ad as a template which you can use to build new ads. You'll find all of your saved templates in the Make New Ad dialog under "My Templates."
* **Revert to Published Version…** Reverts this ad to the last version you published. That means any changes you have made (both saved and unsaved) since the last time the ad was published will be discarded. This operation also automatically saves the reverted ad. This means that any saved unpublished changes you have made will be lost permanently.
* **Version History:** Opens the Version History dialog box for this ad. This dialog lets you view all saved versions of the ad, as well as restore a previous version.
* **Delete Ad…** Deletes this ad and takes you back to the Flite Console. Before deleting the ad, Design Studio prompts you with an “Are you sure?” dialog box, allowing you to reconsider.
* **Subscribe to Notifications…** Allows you to be notified via email if certain actions take place, like if the ad you're working on is published.
## Save and Publish
These controls affect the ad as a whole. There are two buttons and a menu.
* **Save Button (Ctrl+S):** Click this button to save your ad. This will save all the changes you have made, but will not make those changes live. This means the changes will only be visible within Design Studio. They will not propagate to any place where the ad is actually running. If you are making a number of changes to your ad, you should use the Save Button regularly.
* **Publish Button (Ctrl+Shift+S):** Click this button to launch the Publish Changes Dialog and make all your changes live. Whenever you publish, a new version of your ad is created, and all your changes immediately become visible on any web page where your ad tags are running. This is a distinctive feature of Flite technology called Live Updates: changes you make to an ad within Design Studio can be propagated immediately to wherever you have your ad tag running.
## File Size Meter
The File Size Meter has moved to the bottom right. It allows you to view your ad's file size in the Design Studio, and set file size limits for your ad. The Design Studio will notify you if your ad size goes over the limits.
## Minimum OS Support Meter
This has moved to the bottom right. By default, the minimum device/operating system support for HTML5 Ads is 4.2 (iOS) and 2.2 (Android).
Adding components to your ad may increase the minimum device/OS support. You can review the Minimum OS Support Meter to see what devices your ad supports. Clicking on the Minimum OS Support Meter will bring up a dialog containing detailed information about components and action triggers you have added to the ad and what device/operating systems are supported by those components and triggers.
[block:api-header]
{
"type": "basic",
"title": "Stage"
}
[/block]
## Basics
* **See what the ad looks like** on the Stage; any changes you make to the ad are immediately reflected on the Stage.
* ** Toggle Stage modes** using the , and icons in the Control Bar.
* **Use direct manipulation** to select, move, and resize your ad’s layers directly on the Stage when in Edit Mode.
* **Interact with the ad** just like a user would in Test Mode and Preview Mode.
* **Resize the Stage** using Stage settings to control the dimensions of your ad.
* **Change settings** of the ad as a whole using Stage settings in the Inspector Panel.
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 – using the Components Panel to add new layers, rearranging layers in the Layers Panel, or changing layer settings in the Inspector – are immediately reflected on the Stage.
Depending on the mode your ad is in, the stage functions differently. In Edit Mode, you can edit your ad by selecting, moving and resizing layers directly on the Stage. In Test Mode, you can interact with the ad on the Stage just like a user would, while still editing the ad using the various panels. In Preview Mode, all the panels disappear, allowing you to interact with the ad on the Stage without any distractions.
When you select the Stage item at the bottom of the Layers Panel, the Inspector Panel displays the settings for the Stage. The settings are divided into two disclosures -- **Settings** and **Container**. See below for
## Stage Settings
These settings control various characteristics of the ad as a whole. The Inspector Panel divides stage settings into two tabs – **General** and **Theme**.
### General Tab
This tab contains settings controlling the size and overall look of your ad.
* **Format:** Some common choice for ad dimensions. Several IAB standard mobile ad sizes are listed here (320 x 50, 300 x 250, 320 x 416, etc.). There is also a Custom choice that lets you input your own custom ad dimensions.
* **Size:** The dimensions of this ad.
* **W:** Ad width.
* **H:** Ad height.
* **Border:** The thickness of the border around the ad. By default, the ad does not have a border.
* **Border Color:** The color of the border around the ad.
* **Fill Color:** The background color of the ad. This is the color behind all the ad's layers. By default, the ad does not have a background color.
* **Fill Opacity:** The opacity of the ad background from 0 (fully transparent) to 100 (fully opaque).
### Theme Tab
This tab contains settings controlling elements of the ad’s theme, including the loading spinner and scrollbars.
* **Loading Spinner:** This is a standard Flite loading spinner that displays while the ad is loading.
* **Spinner Color:** The color of the loading spinner.
* **Fill Color:** The color of the backdrop behind the loading spinner.
* Scrollbar Section: Sets scrollbar settings for this ad. The settings you select here will apply to all scrollbars throughout the ad.
* **Slider Color:** The color of the scrollbar’s slider.
* **Track Color:** The color of the scrollbar’s track.
### Container Settings
The Inspector Panel also has a second disclosure titled Container. This disclosure has settings allowing you to execute some basic configuration on the area around the ad (i.e. the ad's container).
* **Target:** Specifies the target container for all the other container settings. The two possible choices are listed below.
* **Body:** Apply styling directly to the page's <body> element.
* **Custom:** Enter a <div> ID, and apply styling to the <div> element with the specified ID.
* **Fill Image:** The background image on the container. This sets the background-image property on the target element. You can also set the background image's repeat settings using the dropdown underneath; this wil set the background-repeat property on the target element. The available repeat settings are below.
* **Repeat:** The image is repeated as necessary to fill up the entire container.
* **Repeat X:** The image is repeated left to right.
* **Repeat Y:** The image is repeated top to bottom.
* **No Repeat:** Only one copy of the image is displayed.
* **Position:** The position of the background image with respect to the container bounds. The first dropdown controls horizontal position, and the second one controls vertical position. This sets the background-position property on the target element.
* **Fill Color:** The background color of the container. This sets the background-color property on the target element.
[block:api-header]
{
"type": "basic",
"title": "Initial Layer"
}
[/block]
The Initial Layer broadens the usability of the Flite platform, providing new options to address file size concerns. It lets you display a low overhead image before the rest of your ad loads, allowing you to better comply with file size restrictions for third-party creatives imposed by various networks and publishers.
More specifically, the image in the Initial Layer loads before the HTML5 Ad Runtime and the items on the Default Stage. The loading of those elements is then optionally deferred until a user interaction occurs, or bypassed entirely.
## Adding an Initial Layer
[block:image]
{
"images": [
{
"image": [
"https://www.filepicker.io/api/file/2X7dKK3US9GZd7Ilj7Qj",
"AddInitialLayer-button.png",
"269",
"31",
"#587cb8",
""
]
}
]
}
[/block]
To add an Initial Layer to your ad, select the Stage in the Layers panel, and click the Add Initial Layer button in the Inspector. The layer will appear at the bottom of the Layers panel.
[block:image]
{
"images": [
{
"image": [
"https://www.filepicker.io/api/file/YhKTzHzuTYO0NQqlfORW",
"InitLayer-LayersPanel.png",
"210",
"182",
"#346084",
""
]
}
]
}
[/block]
[block:callout]
{
"type": "info",
"title": "NOTE",
"body": "The Initial Layer is only supported on the Default Stage; it is not supported on any secondary stages."
}
[/block]
## Initial Layer Settings
[block:image]
{
"images": [
{
"image": [
"https://www.filepicker.io/api/file/3sLSd2MhSh6gT0Gv7RVF",
"InitLayer-Inspector.png",
"301",
"324",
"#315e84",
""
]
}
]
}
[/block]
Click the Initial Layer in the Layers panel to edit its settings in the Inspector.
* **Image:** Upload an image (JPG, GIF, or PNG) file to load in the Initial Layer.
* **Fill Color:** Choose a background color.
* **Clickthrough:** Clickthrough URL for the Initial Layer.
* **Load Default Stage:** Check this to load the default stage based on a trigger; uncheck it to never load the default stage.
Several additional settings are revealed when the *Load Default Stage* box is checked.
* **Trigger:** The trigger that initiates load of the Default Stage. You can load the Default Stage *Immediately, On Mouse Over,* or *On Tap*.
* **Delay *(Immediately trigger only)*:** The delay (in seconds) between the trigger event and the Default Stage load.
[block:callout]
{
"type": "info",
"title": "NOTE",
"body": "The Initial Layer remains in your ad’s background after the Default Stage loads, along with the clickthrough link; it is not removed."
}
[/block]
## Benefits and Suggested Uses
There are two key benefits to using the Initial Layer:
* **File size reduction:** The Initial Layer lets you defer loading heavier elements of your ad, or even bypass them altogether.
* **Faster initial loading time:** The Initial Layer loads significantly faster than the layers on the Default Stage, because fewer requests have to be made to load it.
Here are a few ways you can use the Initial Layer:
* **Polite preload:** Load the initial layer first to meet publisher/network initial load size restrictions, then load the rest of your ad after a delay.
* **User-initiated load:** Load the initial layer, and defer loading the full ad experience until a user interaction.
* **Simple lightweight ad:** Traffic a simple banner ad while getting the benefit of Flite's live updates, metrics, etc.
[block:api-header]
{
"type": "basic",
"title": "Backup Image"
}
[/block]
The Backup Image feature allows you to specify a static image and clickthrough to be displayed in the event an ad cannot be loaded. This may happen if a user views the ad in an unsupported browser or device operating system. Flite HTML5 Ads currently support iOS 4.2+, and Android 2.2+.
[block:image]
{
"images": [
{
"image": [
"https://www.filepicker.io/api/file/8SytEmyCRoSbB8UjkLkk",
"Screen Shot 2016-01-05 at 10.58.59 PM.png",
"508",
"258",
"#233b4c",
""
]
}
]
}
[/block]
These settings can be customized at the placement level under the [Placements section](doc:design-studio-managing-placements) of the [Traffic Module](doc:design-studio-trafficking-ads).
* **Backup Image:** The image you want to use. You can either upload an image from your computer or enter the image URL. Note that it may take a few minutes for the image to update in the cache after you publish changes.
* **Clickthrough:** The URL you want to open when the user clicks the backup image. This will be treated as a clickthrough link for tracking purposes.
[block:image]
{
"images": [
{
"image": [
"https://www.filepicker.io/api/file/TmnSbicGSgmIWZhnosrs",
"Screen Shot 2016-01-05 at 10.59.04 PM.png",
"632",
"608",
"#143145",
""
]
}
]
}
[/block]
[block:api-header]
{
"type": "basic",
"title": "Keyboard Shortcuts"
}
[/block]
Flite's Edit Module uses a number of keyboard shortcuts to provide an experience similar to using a desktop application like Adobe Photoshop. These shortcuts are summarized below.
[block:html]
{
"html": "<div class=\"text-center\"><a class=\"btn btn-primary\" href=\"https://flite.site/s/Flite-Design-Studio-Keyboard-Shortcuts.pdf\" target=\"_blank\"> <div class=\"fa fa-download fa-right\"></div><span class=\"ng-scope\">DOWNLOAD PDF</span></a></div><br /><br /><br />"
}
[/block]
[block:image]
{
"images": [
{
"image": [
"https://www.filepicker.io/api/file/4PsQvrLyQYaYQ91rNKVR",
"Flite Design Studio Keyboard Shortcuts.jpg",
"792",
"612",
"#0b435f",
""
]
}
]
}
[/block]