Resize & Reposition Layers

OVERVIEW

Learn how to resize, rotate, scale, and move layers

Dimensions

In Fable, there are two main controls that influence the visible size and position of your layers: Dimensions and Transform.

The Dimensions properties are the actual size of your layers in Fable, represented by pixel-based width and height controls. While most layers in Fable have Dimensions, a few exceptions exist. Controllers, Groups, Particles, and Scene Instances are layer types that do not have Dimensions.

Adjusting Dimensions on the Inspector

With a layer selected, you’ll notice a W and H property midway through the inspector. These two properties represent the layer’s Dimensions.

Adjusting dimensions on the Inspector will always adjust the width and height of the shape from the shape’s center point. Like most other properties, dimensions can be keyframed.

Adjusting Dimensions on the Canvas

When selecting a layer, you'll notice circular handles appear along the edges of the bounding box. These circles are what you can use to adjust dimensions on the canvas.

Adjusting dimensions on the canvas features Edge Resizing – allowing you to adjust the size of your layer one edge at a time. While extending/shortening an edge on your shape, the opposite edge from the one you have selected will remain fixed.

Modifiers:

shift: maintain proportions while resizing
option: resizing the layer dimensions from the layer’s center-point.
shift + option: maintain proportions while resizing from the layer’s center-point

Transform Properties

Unlike Dimensions, Transform properties are available on every layer within Fable. Transform controls are symbolized by square boxes located at the corners of the bounding box of a selected layer.

The transform block on layers controls the position, scale, rotation, and skew properties of your layer. These transforms apply after your layer’s dimensions definition. Therefore, when you scale a layer, Fable multiplies the layer's dimensions for the final render. For example, a 100px x 100px rectangle scaled to 200% on both axes will result in a final render of 200px x 200px.

Transform Controls on the Inspector

Here’s an overview of the various transform controls on the Inspector:

Position - Controls the position of the layer in relation to the center point of the canvas. The X property controls the left-to-right axis, and the Y property controls the top-to-bottom axis
Scale - Controls the size of the layer in relation to its original size. The horizontally oblong ellipse represents the scale-width property and the vertically oblong ellipse represents the scale-height property
1. The chain-link icon will be highlighted yellow if the Scale properties are constrained
Skew - This transformation is a shear mapping that distorts each point within an element by a certain angle. The effect is as if you grabbed each corner of the element and pulled them along a certain angle. The Skew properties control the angle of the shear mapping transformation. The first icon represents the Horizontal Skew property that adjusts the layer as portrayed by the skewed rectangle. The icon to the right is the Vertical Skew property
Rotation - Controls the degrees to rotate the layer based on the layer's anchor point. Can be a negative value.
Constrained Properties - By default, these properties are unconstrained – they can be independently adjusted. Clicking the chain-link icon constrains these properties and allows them to maintain their relative ratio, no matter which scale input is adjusted.

Transform Controls on the Canvas

When selecting a layer, you’ll notice a bounding selection box appear around your layer. In this state, you can drag the layer anywhere on the canvas to adjust the layer’s position, and you can use the square handles at the corners of the bounding box to adjust the layer’s scale or rotation. Transforms all originate from the center-point of the layer.

Position Transform

With a layer selected, drag the layer anywhere on the canvas to adjust the layer’s position.

You can use the Shift modifier to limit re-position along the same vertical or horizontal axis the layer is already on

Scale Transform

With a layer selected, click and drag any of the square handles at the corners of the bounding box to adjust the layer’s scale.

You can use the Shift modifier to maintain the ratio between the vertical and horizontal scale properties

Rotation Transform

With a layer selected, hover around the corners of the layer, slightly beyond the bounding box. You should see your cursor change to a rotation symbol. While you see this symbol, click and drag to rotate your layer around the center-point of the layer.

You can use the Shift modifier to snap the rotation to 45º increments.