The Stage is where you position and edit your items to change where they appear in the ad.
The central box displays the visible area of your ad. The box is the current color of the ad's background and is bordered by a keyline. The size of the visible area and color of both the background and the keyline can be edited from the page properties.
Outside of the visible stage is the grid, which helps position content both on and off the stage. The spacing of the grid can be edited from the page properties.
Around the top and left edge of the grid is a ruler, to aid in positioning items. Ruler lines can be drawn by simply clicking & dragging from either ruler. To remove, click and drag the line back up to the ruler:
When you preview or export your ad, the ad will be sized at and display only the content that appears within the visible stage. Ruler lines and anything outside of the stage are not visible.
Dragging & dropping
To place assets or components on to the stage, drag and drop them from their panel on the right. Once on the stage, the asset or component becomes an editable item that can be manipulated using the stage view or properties panel.
Manipulating items on the stage
With an item on the stage, you can edit it using certain controls. To be able to edit it, you must make sure that you are on a keyframe in the timeline. More details on keyframes are available in the Timeline section of the guide.
Move - With an item selected, you can move an item by clicking & dragging or using the arrow keys. Shift & arrow key moves the item by 10 pixels.
Resize - With an item selected and the playhead on a keyframe for that item, the resize handles appear. Click and drag on any resize handle to edit the size of the item. Shift & click & drag on a corner handle to resize with a fixed aspect ratio for the item.
Rotate - You can edit the rotation of an item by using the rotation handle. Click & drag the clear circle to rotate the item. The filled circle is the handle for the rotation point - the point at which the item rotates around. Click and drag to move.
Undo/redo - When you edit an item on stage, you can undo any action by using the keyboard shortcut Ctrl+Z or by using the item in the main menu. Redo by using Ctrl+Y or the item in the main menu. More information is available in the Menu section.
Projects can be set up to use responsive design for mobile advertising. To set up any page to use responsive design, tick the 'fullscreen' box on the page properties.
Any item that is used on this page will now have two options available: 'anchor to point' and 'auto-scale'
Anchor to Point
When the page is appearing fullscreen, any item can be 'anchored' to a position located around the edge of the screen. Once the position is chosen, the distance away from it is also chosen. The location corresponds between the item and the page. I.e. if bottom right position is chosen, the measurement will be between the bottom right of the item and the bottom right of the page. If Anchoring is not selected on an item, it will position itself relative to the centre of the page.
On by default, this will resize any item in correspondence with the change in dimensions of the page. The item will respond to changes in page size and resize accordingly.
Often a different design may be needed on change of orientation of the device. In these instances - the Actions manager can be used to set up navigation of the project to alternative pages for portrait or landscape orientations. More information about the Action Manager can be found here.
By dragging the cursor from the rulers on the top and left side of the Ad Builder workspace, guide lines can be positioned horizontally and vertically to assist in creating page layouts.