This section will aid artists in developing skins for Scaleform CLIK components. It includes details on skinning sample 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 in Flash allow artists to hide parts of a graphic at runtime. Masks are often used for animation effects. In Scaleform 3.x, masks were fairly expensive and therefore we recommended that they be avoided whenever possible. In Scaleform 4.x, the new renderer allows masks to be computed much more efficiently and batched into a single draw call in many cases. Masks should have no noticeable performance impact when running content in Scaleform 4.x.

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.

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.

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.

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).

Scaleform does not require that your content be power-of-two.

However, for platforms that require power-of-two images, be sure to ensure that all of your bitmaps are properly sized from the beginning. Power of two textures can also help reduce video memory on older platforms and devices. Examples of power of two-bitmap sizes are:

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