This document provides a detailed implementation guide for the Scaleform® Common Lightweight Interface Kit (CLIK™) ActionScript 3 framework and components. Before diving too deep into the CLIK User Guide, developers are encouraged to go through Getting Started with CLIK. This introductory guide details the steps needed to get Scaleform CLIK up and running and introduces the basic core concepts. However, more advanced users may prefer to dive straight into this document or reference it in tandem while studying the introductory documents.
Scaleform CLIK AS3 is a set of ActionScript™ 3.0 (AS3) 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 TileList RadioButton Label TextInput ScrollingList TextArea DropdownMenu ScrollIndicator NumericStepper ScrollBar
Classes: Core system APIs
InputManager UIComponent FocusManager Tween DragManager DataProvider PopUpManager IDataProvider IUIComponent IList Constraints IListItemRenderer
Documentation and Example Files:
Getting Started with CLIK Getting Started with CLIK Buttons
CLIK AS3 User Guide CLIK Flash Samples CLIK Video Tutorials
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.
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: Scaleform SDK\Resources\AS3\CLIK\components\CLIK_Components_AS3.fla
The important properties of a component can be configured via the Flash IDE’s Component Inspector panel or the Parameters tab. To open this panel in CS4, select the Window drop down menu on the top toolbar and enable the Component Inspector window by clicking on it, or press (Shift+F7) on the keyboard. This will open the Component Inspector Panel. These are called “inspectable properties.” This provides a convenient way for artists and designers unfamiliar with AS programming to configure a component’s behavior and functionality.
Changes to these properties will only be noticeable after publishing the SWF file that contains the component. The Flash IDE will not display any changes on the Stage at design time since the CLIK components are not compiled clips. This is necessary to ensure that the components are easily accessible and skinnable.
Most components produce events for user interaction, state changes and focus management. These events are important to the creation of a functional user interface using CLIK components.
All event callbacks receive a single Event or Event subclass parameter that contains relevant information about the event. The following properties are common to all events.
Lists for all events generated by each component can be found in the “Prebuilt Components” section of this user guide, along with any unique properties for that event.
Within Scaleform, certain native event types will be replaced with Scaleform’s extensions. For example, When Extensions.enabled property is set to true Scaleform always generates MouseEventEx, a class that extends MouseEvent, events instead of standard MouseEvent. MouseEventEx adds properties for multi-controllers and right/middle mouse buttons support. A user can check if the received event is an instance of the MouseEventEx and if so cast the event object to the extension type.
Within Flash, there is a concept of focus. By default, stage focus will be set to the last InteractiveObject that was selected with a mouse or keyboard.
In general, only a focused component receives keyboard events. There are many ways to set the focus on a component. Several methods are described in the Programming Details chapter of this document. Most CLIK components also receive focus when interacted with, especially when the left mouse button or equivalent control is pressed (clicked) over them. The (Tab) and (Shift+Tab) keys (or equivalent navigation controls) move focus throughout the displayed focusable components. This is the same behavior you find in most desktop applications and websites. Note that the focus used by non-CLIK elements is used by CLIK components. This means that a Flash developer is able to mix and match CLIK elements and non-CLIK elements in the scene and have the focus work as intended, especially when using (Tab) and (Shift+Tab) keys to move the focus around the scene.
By default the Button responds to the (Enter) key and the spacebar. Rolling the mouse cursor over and out of the Button also affects the component, as well as dragging the mouse cursor in and out of it.
Developers can easily map gamepad controls to keyboard and mouse controls. For example, the (Enter) key is typically mapped to the (A) or (X) button on a Xbox360 or PS3 console controller respectively. This mapping allows UIs built with CLIK to work in a wide variety of platforms.