Design Studio's user interface is divided into various toolbars and panels. Each panel is specialized to assist with a particular aspect of your ad-build (i.e. "Layers", or "Actions"). These panels can be toggled in/out-of-view via the buttons on the left side of the main toolbar, or with a corresponding keyboard shortcut.
The 6 primary panels are:
- Layers Panel (Ctrl+1): Lists the layers in your ad, and allows you to manipulate these layers (add, delete, reorder, duplicate, etc).
- Inspector Panel (Ctrl+2): Allows you to view and change the settings on the currently selected Layer/Component.
- Actions Panel (Ctrl+3): Allows you to add Actions (Triggers and resulting Events) to various Layers/Components in your ad (see article, Working with Actions).
- Stages Panel (Ctrl+4): Allows you to create and manage stages for expandable ads, like the IAB Rising Star units (see articles, Ad Products and Building Responsive Ads).
- Variables Panel (Ctrl+5): Handles the ad's Variables.
- Library Panel (Ctrl+6): Lists the Components available to you. There is a set of built-in standard Components, providing a wide range of navigation and content functionality (see article, Components). There are also custom Components that can only be enabled by a Flite admin.
Staging Area: 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.
You can find the main Toolbar at the top of the workspace, directly underneath the Design Studio HTML5 header. It contains some useful controls for manipulating the Design Studio environment, and the ad itself. There are four different types of controls here, grouped into clusters in the Toolbar.
The 6 icons on the left toggle the various Editor Panels 'on' and 'off'. The associated keyboard shortcuts are listed as well.
Toggles the visibility of the Layers panel.
Toggles the visibility of the Inspector panel.
Toggles the visibility of the Actions panel.
Toggles the visibility of the Stages panel.
Toggles the visibility of the Variables panel.
Toggles the visibility of the Library panel.
Edit (Pencil Icon)
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.
Test (Play Button Icon)
Switch to Test Mode. This allows you to interact with the ad and test functionality while Editor Panels are still visible.
Preview (Human Eye Symbol)
Switch to Preview Mode. This allows you to interact with the ad and hides all Editor Panels.
Preview on Device (Eye Symbol, Inside a Touch Device)
Preview the ad on an external device, via QR code (Note: This button appears on the right side of the Tool bar).
The Extras menu dropdown - next to the Editor Modes - contains tools for aiding the ad editing process, and helping you position ad elements more precisely on the stage.
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.
Cmd+; on Mac, Ctrl+; on PC
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.
Cmd+' on Mac, Ctrl+' on PC
Overlay a grid on top of your ad.
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.
Delete all guides in the current stage. Since this action cannot be undone, a confirmation dialog will appear
Restores your workspace to the 'default' state (including open panels).
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.
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 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.
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 push changes to your Placement(s). 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's technology: Live Updates. Changes you make to an ad within Design Studio can be propagated immediately to wherever you have your ad tag running.
The 'File Size' meter is in the bottom-right corner of the interface - and can be clicked to open a 'File Size' dialog box. It allows you to estimate your ad's file size, and set file size limits for your ad. The Design Studio will notify you if your ad size goes over the limits.
This is located in the bottom-right corner of the interface. By default, the minimum device/operating system support for HTML5 ads is: iOS 4.2, Android 2.2, or Internet Explorer 9. Any current version of Safari, Firefox, Chrome, or Microsoft Edge will support HTML5.
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.
- 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 Edit Mode icons in the Toolbar.
- 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
These settings control various characteristics of the ad as a whole. The Inspector Panel divides stage settings into two tabs – General and Theme.
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).
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.
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 ID, and apply styling to theelement 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.
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 imposed by various networks and publishers.
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.
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.
The Initial Layer is only supported on the Default Stage; it is not supported on any secondary stages.
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 Click/Tap.
- Delay ('Immediate' trigger, only): The delay (in seconds) between the trigger event and the Default Stage load.
The Initial Layer remains in your ad’s background after the Default Stage loads, along with the clickthrough link; it is not removed.
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 load: 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 viewer interacts with the ad.
- Simple, light-weight ad: Traffic a simple banner ad while getting the benefit of Flite's live updates, metrics, etc.
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+.
- 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.
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.