Archived:Kinetic Scroll Component for Flash Lite

Comments

(no comments yet)

Log in or Join to leave comments.

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

Article Metadata

---

Code Example

Source file: Media:KineticScrollComponent.zip

---

Article

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.

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