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 over the next few weeks. Thanks for all your past and future contributions.

Archived:Kinetic Scroll Component for Flash Lite

From Wiki
Jump to: navigation, search

This article explains the use of the Kinetic Scroll Component and API for Flash Lite.

Article Metadata
Code ExampleArticle
Created: jasperjager (30 Jun 2009)
Reviewed: SannaH (07 May 2012)
Last edited: hamishwillee (13 May 2013)


Introduction to the Kinetic Scroll Component

The Kinetic Scroll Component lets you add movieclips to a container and makes it possible to scroll through the container using inertia.


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


Kinetic Scroll Component and an usage example can be downloaded


Installation of the Kinetic Scroll 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, [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 Kinetic Scroll Component onto the stage. Assign a unique instance name for the object using the properties panel (Ctrl/Apple key + F3).
    Figure 1. 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. Assign a placeholder and add your movieclip content
    // asign placeholder
    // add content to the container
  4. In order to catch the Kinetic Scroll click events, you need to add a listener to the onItemSelectedEvent:
    // List onItemSelected event
    var event_itemSelected = myScroll.onItemSelectedEvent();
    myScroll.addEventListener(event_itemSelected, eventHandler);
    function eventHandler(evt:Object):Void {
    var mcArray:Array = myScroll.getContent();
    var mc:MovieClip = evt.hitItem;
    for(i = 0; i < mcArray.length; i++) {



The scrollbar of the Kinetic Scroll Component can be skinned. The structure of the skins are shown below:



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

Inspectable Parameters

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

Figure 2. Component Inspector
Parameter Description Value
Drag resistance The amount of drag used to slow down the kinetic scrolling. Choose any value between 0 and 1 Drag resistance number
Item space Defines the space between the added content items Item space number
Max velocity Defines the maximum speed of the kinetic scrolling Max velocity number
Placeholder Defines the placeholder for the Kinetic Scroll Component Placeholder string
Skin path Defines the menu skin linkage identifier path. For instance, for the mySkin value, the menu would search for the skin components under the KineticScroll.mySkin.* linkage path. Skin path string

Menu Component ActionScript API

public function onItemSelectedEvent():String

Calls the menu component's press an item event.

public function setPlaceHolder(refName:String):Void

Sets the placeholder for the Kinetic Scroll Component

public function addContent(refName:String):Void

Adds content to the container

public function getContent():Array

Gets an array with all the linkage id's of the movieclips in the container

public function setSkin(path:String):Void

Sets the skin for the Kinetic Scroll Components scrollbar

public function setDrag(d:Number):Void

Sets the drag for the Kinetic Scroll Component

public function setMaxVelocity(v:Number):Void

Sets the maximum speed of the kinetic scrolling

public function setItemSpace(s:Number):Void

Sets the space between the movieclips in the container

This page was last modified on 13 May 2013, at 11:38.
91 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.