iPhone kinetic scrolling in Adobe Flash

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

The iPhone touch screen interface includes a number of user friendly controls that respond well to tactile input. One of these is "kinetic" scrolling, where the movement of the screen follows a natural acceleration/deceleration flow, just like a piece of paper sliding across the desk. This tutorial will show you how to replicate this effect in Adobe Flex.

The code for the iPhone scrolling originally comes from the Flex component that can be found on the Adobe website here. I have modified the code slightly to make it easier to access the scrolling speed properties. The new code is included with the source code download.

The MXML markup below creates the user interface. We first create a Canvas element, and then add an image inside it. By placing a large Image in a small Canvas we can create a section of the interface that can be scrolled. On top of that we add some Sliders that allow us to modify the kinetic scrolling speed.

<mx:Canvas id="imageCanvas" left="10" top="10" right="10" bottom="10">

<mx:Image source="@Embed('../media/image1.jpg')" scaleContent="false"/>

</mx:Canvas>

<mx:Label x="10" y="10" text="Acceleration" color="#FFFFFF"/>

<mx:HSlider x="89" y="10" minimum="1" maximum="50" change="{manager.factorAcceleration = acceleration.value;}" id="acceleration" snapInterval="1"/>

<mx:HSlider x="89" y="36" minimum="1" maximum="50" change="{manager.factorDesacceleration = deceleration.value;}" snapInterval="1" id="deceleration"/>

<mx:Label x="10" y="36" text="Deceleration" color="#FFFFFF"/>

Add the following attribute to the Application element. This sets the appComplete function as our ActionScript code entry point.

applicationComplete="appComplete()"

The kinetic scrolling is implemented by the IPhoneScrollerManager class. By supplying a container to the addContainer function we are creating a new IPhoneScrollerManager object that will take care of all the mouse interaction and scrolling in the background. The addContainer function returns the new IPhoneScrollerManager object (this is a change from the original code), ad we can then use the properties of that object to modify the speed of the scrolling.

For consistency, the values displayed by the sliders in step 1 are updated to reflect the default values of the IPhoneScrollerManager class.

<mx:Script>

<![CDATA[

private var manager:IPhoneScrollerManager;

private function appComplete():void

{

manager = IPhoneScrollerManager.addContainer(imageCanvas);

this.acceleration.value = manager.factorAcceleration;

this.deceleration.value = manager.factorDesacceleration;

}

]]>

</mx:Script>

The iPhone scrolling method is natural to use, and may even be preferable for Flex and Flash applications where screen space is limited (like banners and widgets). The IPhoneScrollerManager class makes implementing this style of scrolling trivial, and using this demo you can easily find a scrolling speed that suits your application.

Return to the Tutorial Index

Spark Project: LCDBitmap

Learn how to use the LCDBitmap class to produce a stylised, low resolution video player.