This section will aid artists to develop skins for Scaleform CLIK components and includes details on skinning a small sample of components as well as best practices, animation and font embedding.

This section contains best practices when creating skins for Scaleform CLIK components.

Pixel-perfect Images When developing vector based skins for CLIK components, it is recommended that all assets be pixel perfect. A pixel perfect asset is one which lines up perfectly on the Flash grid.

To enable and modify the grid:

1. Select View from the top Flash menu.
2. Select Grid, then enable Show Grid by clicking on it.
3. Select View from the top Flash menu again.
4. Select Grid, then click on Edit Grid.
5. Enter 1 px for the vertical and horizontal distribution.
6. Press OK.

Figure 51: Edit Grid window.

You should now see a grid overlay on the Stage. Each grid square represents exactly one pixel. Be sure when creating art assets that they snap to this grid. This will ensure final SWFs which are not blurry. NOTE: Be sure to keep all image sizes to a power of two; otherwise, they may still be blurry. See the Power of two subheading below.

Figure 52: A pixel-perfect vector graphic skin.

Masks

Masks in Flash allow artists to hide parts of a graphic at runtime. Masks are often used for animation effects. However, masks can be very expensive at runtime. Scaleform recommends avoiding masks as much as possible. If masks must be used, keep them in the single digits and test the performance of the movie with and without the mask.

One possible alternative to using a mask in Flash is to create a PNG in Photoshop® with alpha blend to the areas that need to be masked out. However, this only works for an image in which there is no animation of the transparent area.

Animations

It is best to avoid animations that morph one vector shape into another, such as a morph of a square into a circle. These types of animations are very costly, as the shape must be reevaluated every frame.

Avoid scaling animations for vector graphics if possible, as they can have an impact on memory and performance due to extra tessellations – the process of converting vector shapes into triangles. The least expensive animations to use are translations and rotations, as they do not require extra tessellation.

Avoid programmatic tweens and opt for timeline based tweens as timeline tweens are much cheaper in terms of performance. For timeline tweens, try to keep the number of keyframes to the minimum required to achieve a smooth animation at the desired framerate.

Layers and Draw Primitives

Try to use as few layers as possible when creating a skin in Flash. Every layer used adds at least one draw primitive. The more draw primitives used, the more memory is required, and performance takes a hit as well.

Complex Skins

It is best to use bitmaps for complex skins; however, for simpler skins vector graphics will save more memory and be scalable to any resolution without a loss in quality (blurring).

Power of Two

Ensure that all bitmaps remain power of two in size. Examples of power of two-bitmap sizes are:

• 16x16
• 32x32
• 64x64
• 128x128
• 128x256
• 256x256
• 512x256
• 512x512