Component Scaling

Scaleform CLIK components scale in two ways:

1. Using a reflowing layout, in which the component’s scale is reset and then its elements resized to match the original size. Components with subelements and no background take this approach.
2. Counterscaling the elements to maintain the aspect ratio, in which the component remains scaled, but its elements are counter-scaled to give the appearance of not scaling. This approach enables components with a graphics background, and a scale9grid to be stretched, and the context to scale inside instead of becoming distorted.

Typically components use the reflow method due to Flash scale9Grid limitations. This forces developers to build “skin” symbols, similar to Flash/Flex components. Reflowing works best if components have sub-elements that may also scale, therefore it is intended for containers and similar entities.

The counter-scaling method was created specifically for CLIK, mainly due to the extended scale9Grid functionality available in Scaleform. This allowed for the creation of single-asset components using frame states instead of the more intensive layered approach used by other component sets. The base CLIK components are minimalistic in nature, usually containing a background, a label and an optional icon or sub-button, and therefore ideal for the counter-scaling method. However, counter-scaling is not intended for container-like setups (panel layout, etc.). In such cases, the reflow method with a background that is constrained along with the rest of the sub-elements is the recommended approach.

Components can be scaled on the Stage in the Flash IDE, or dynamically scaled using the width and height properties, or the setSize() method. The appearance of scaled components may not look accurate in the Flash IDE. This is a limitation of delivering the components as un-compiled MovieClips without LivePreviews. Testing the movie in Scaleform Player is the only way to get an accurate representation of how the scaled component will appear in-game. The CLIK extension bundles a Launcher panel to improve this part of the workflow.

Most components use the second scaling method. MovieClip assets inside of a Scale9Grid in the Scaleform Player will adhere to the scale9grid for the most part, whereas Flash will discard the grid if it contains MovieClips. This means that even though a scale9grid does not work in Flash Player, it may work perfectly in Scaleform.

One item to note is that when a MovieClip has a scale9grid, subelements will also scale under that rule. Adding a Scale9grid to the subelement will cause it to ignore the parent’s grid, and draw normally.

The Constraints utility class (gfx.utils.Constraints) assists in the scaling and positioning of assets inside a component that scales. It enables developers to position assets on the Stage, and for the assets to retain their distance from the edges of the parent component. For example, the ScrollBar component will resize and position the track and down arrow buttons according to where they are dropped on the Stage. Constraints work with both scaling methods used in the components.

The following code adds the ScrollBar assets to a constraints object in the configUI() method, aligning the down arrow button to the bottom, and scaling the track to stretch with its parent. The draw() method contains code to update the constraints, and consequently any elements registered with it. This updating is done inside draw() because it is called after component invalidation, commonly after the component’s dimensions have changed.

private function configUI():Void {
        …
        constraints = new Constraints(this);
        // The upArrow already sticks to top left.
        constraints.addElements(downArrow, Constraints.BOTTOM);
        constraints.addElenent(track, Constraints.TOP|Constraints.BOTTOM);
        …
}

private function draw():Void {
         …
         constraints.update(__width, __height);
         …
}