This document provides a detailed implementation guide for the Scaleform® Common Lightweight Interface Kit (CLIK™) framework and components. Before diving too deep into the CLIK User Guide, developers are encouraged to go through Getting Started with CLIK and Getting Started with CLIK Buttons. These two introductory guides walk through the steps needed to get Scaleform CLIK up and running, introduce the basic core concepts and provide a detailed tutorial on creating and skinning CLIK components. However, more advanced users may prefer to dive straight into this document or reference it in tandem while studying the introductory documents.
Scaleform CLIK is a set of ActionScript™ 2.0 (AS2) User Interface (UI) elements, libraries and workflow enhancement tools to enable Scaleform users to quickly implement rich and efficient interfaces for console, PC, and mobile applications. The main goals of the framework were to make it lightweight (in terms of memory and CPU usage), easily skinnable and highly customizable. In addition to a base framework of UI core classes and systems, CLIK ships with over 15 prebuilt common interface elements (e.g., buttons, sliders, text inputs) that will help developers rapidly create and iterate user interface screens.
Components: Simple extensible prebuilt UI controls
Button Slider ButtonBar StatusIndicator CheckBox ProgressBar RadioButton UILoader Label ScrollingList TextInput TileList TextArea DropdownMenu ScrollIndicator Dialog ScrollBar NumericStepper
Classes: Core system APIs
InputManager Locale FocusManager Tween DragManager DataProvider PopUpManager IDataProvider EventDispatcher IList Delegate IListItemRenderer Constraints GameDataProvider
Documentation and Example Files:
Getting Started with CLIK Getting Started with CLIK Buttons CLIK User Guide CLIK Flash Samples CLIK Video Tutorials
Before getting started, it is important that developers understand what exactly a Flash component is. Flash ships with a series of default interface creation tools and building blocks called components. However, in this document, “components” refer to the prebuilt components created using the Scaleform CLIK framework, which was developed by Scaleform in collaboration with the world renowned gskinner.com team.
gskinner.com is led by Grant Skinner, who was commissioned by Adobe to create the components for Flash Creative Suite® 4 (CS4), and is known as one of the leading Flash teams in the world. For more information on gskinner.com, visit http://gskinner.com/blog.
To gain a better understanding of what the prebuilt CLIK Components are, open up the default CLIK file palette in Flash studio: C:\Program Files\Autodesk\Scaleform\GFx 4.6\Resources\AS2\CLIK\components\CLIK_Components.fla
The first step to creating a good UI is to plan out the concept on paper or with a visual diagram editor such as Microsoft Visio® . The second step is to begin prototyping the UI in Flash, in order to work out all of the interface options and flow before committing to a specific graphic design. Scaleform CLIK is specifically designed to allow users to rapidly prototype and then iterate to completion.
There are many different ways to structure a front end UI. In Flash, the concept of pages doesn’t exist, such as is the case in Visio or other flowchart programs. Instead, key frames and movie clips take their place. If you have all of your pages in the same Flash file, the file can take up more memory, but may be faster and easier to transition between pages. If each page is in a separate file, overall memory usage may be lower, but load times may be longer. Having each page as a separate file also has the advantage of allowing multiple designers and artists to simultaneously work on the same interface. In addition to the technical and design requirements, make sure to consider the workflow when determining the structure of your UI projects.
Unlike traditional desktop or web applications, it is important to understand that there are many different ways to create rich multimedia game interfaces. Every engine, and even several platforms, may have slightly different approaches that could be better—or worse—to utilize. For instance, consider putting a multipage interface into a single Flash file. This can make it easier to manage, and make transitions easier to create, but it can also increase memory consumption which can have a negative impact on older consoles or mobiles. If everything is done in a single Flash file, you can’t have multiple designers simultaneously working on different parts of the interface. If the project calls for a complex interface, has a large design team, or has other specific technical or design requirements, it may be better to put each page of the UI into a different Flash file. In many cases both solutions will work, but one may offer significant advantages over the other for the project. For instance, screens may need to be loaded and unloaded on demand or dynamically updated and streamed over the network. The bottom line is that asset management for the UI should always be well thought through, from the logical layout of the UI to implementation workflow to performance considerations.
While Scaleform highly recommends developers use Flash and ActionScript for the majority of the UI behavior, there’s no perfect answer, and some teams may prefer to use the application engine’s scripting language (such as Lua or UnrealScript) to do the majority of the heavy lifting. In these cases, Flash should be used primarily as an animation presentation tool with only a minor amount of ActionScript and interactivity within the Flash file itself.
It is important to understand the technical, design, and workflow requirements early on, then continue evaluating the overall approach throughout the process, particularly before getting too far into the project, to ensure a smooth and successful result.