Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Archived:Slider Component for Flash Lite

From Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

We do not recommend Flash Lite development on current Nokia devices, and all Flash Lite articles on this wiki have been archived. Flash Lite has been removed from all Nokia Asha and recent Series 40 devices and has limited support on Symbian. Specific information for Nokia Belle is available in Flash Lite on Nokia Browser for Symbian. Specific information for OLD Series 40 and Symbian devices is available in the Flash Lite Developers Library.

This article explains the use of the Flash Lite Slider component and API.

Article Metadata
Code ExampleArticle
Created: User:MarioBajr (13 Jun 2009)
Last edited: hamishwillee (13 May 2013)


Introduction to the Slider Component

The Flash Lite Slider component is a flexible and scalable user interface component that allows Flash Lite developers to create mobile user interfaces easily, using Flash Lite.

Figure 1. Slider Component


  • Adobe Flash Professional CS3 or CS4
  • Flash Lite 2.0 Player and above
  • Touch Screen Device


Slider component can be downloaded here:


Installation of the Slider component is easy. Execute the components MXP file and follow the simple instructions in Adobe Extension Manager to complete the installation process. Restart Adobe Flash CS4 after installation.

Note: Component FLA and AS files should appear in the directories [INSTALL PATH]\Flash CS4\en\Configuration\Components\Nokia Developer and [INSTALL PATH]\Flash CS4\en\Configuration\Classes\com\forumnokia. In some setup environments, the files may appear under the wrong language directories (for example, fi instead of en). In such cases, the files should be manually moved to the correct directories as specified above.


  1. Create a Flash Lite Project. Open the Component panel (Ctrl/Apple key + F7) and drag the Slider component onto the stage. Assign a unique instance name for the object using the properties panel (Ctrl/Apple key + F3).
    Figure 2. Nokia Components Tree
  2. Nokia Developer Flash Lite UI components require the Flash Lite movie to be set to align to the top left corner of the device screen and not to scale. Some ActionScript code is needed to achieve this. The following code must be added to the first frame of the project:
    fscommand2("FullScreen", true);
    fscommand2("SetQuality", "high");
    Stage.scaleMode = "noScale";
    Stage.align = "TL";
    _focusrect = false;
  3. In order to catch the slider events, you need to add a listener to the slider’s onChange event:
    var myEvent:String = mySlider.onChangeEvent();
    mySlider.addEventListener(myEvent, myListener);
    function myListener(eventObject:Object):Void {
    if (eventObject.type == myEvent) {
    switch ( {
    case _level0.mySlider :
    // My Slider action here
    default :



The skin of a slider component is composed of 7 different parts, as can be seen below. This structure enables the slider interface to be scalable and easily skinnable.

Figure 3. Skin Levels

Skins have separate MovieClips for Up and Down states of the slider. The structure of these parts is defined below:



Note: Each new custom skin must follow the same folder structure, with linkage identifiers named accordingly.

Inspectable Parameters

Inspectable parameters help customise the Slider component from the Component Inspector panel (Shift + F7). All inspectable parameters can also be controlled via ActionScript with the component APIs.

Figure 4. Component Inspector
Parameter Description Value
Skin Defines the slider skin linkage identifier path. For instance, for the mySkin value, the slider would search for the skin components under the Slider.mySkin.* linkage path. Skin identifier string
Fill Enabled Enable or Disable the Fill over the background bar Boolean
Maximum Maximum value of Slider. Number
Minimum Minimum value of Slider. Number
Snap Interval Increment by which the value is increased or decreased as the user moves the slider thumb. Number
Value Start value. Number

SliderComponent ActionScript API

Setting the skin path

public function setSkin( path:String ): Void;

Sets a new path for the skin. Reconstructs the component.

Activating the component

public function enableComponent() :Void;

Makes the component react to user input.

Disabling the component

public function disableComponent() :Void;

Makes the component stop reacting to user input.

onChange event

public function onChangeEvent():String;

Calls the slider component’s change event.

onStartDrag event

public function onStartDragEvent():String;

Calls the slider component’s startDrag event.

onStopDrag event

public function onStopDragEvent():String;

Calls the slider component’s stopDrag event.

This page was last modified on 13 May 2013, at 23:43.
105 page views in the last 30 days.