×
Namespaces

Variants
Actions
Revision as of 14:38, 13 May 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Archived:Kinetic Scroll Component for Flash Lite

From Nokia Developer 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)

Contents

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.

Requirements

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

Download

Kinetic Scroll Component and an usage example can be downloaded Media:KineticScrollComponent.zip.

Installation

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.

Preparations

  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("DisableKeypadCompatibilityMode");
    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
    myScroll.setPlaceHolder("placeholder");
     
    // add content to the container
    myScroll.addContent("contentItem");
    myScroll.addContent("contentItem");
    myScroll.addContent("contentItem");
    myScroll.addContent("contentItem");
    myScroll.addContent("contentItem");
    myScroll.addContent("contentItem");
  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++) {
    mcArray[i].gotoAndStop(1);
    }
    mc.gotoAndStop(2);
    }

Structure

Skins

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

_skins

Default
Base_top
Base_body
Base_bottom
Handle_top
Handle_body
Handle_bottom


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 14:38.
250 page views in the last 30 days.