I have stopped maintaining this prototype.

Nokia 5800 XpressMusic doesn’t have kinetic scrolling out of the box, nor does it have apps with kinetic scrolling. So while I was studying rapid prototyping, I created a prototype application for the 5800, with Flash Lite. The idea was to try and create a prototype of kinetic scrolling, some kind of component for future Flash Lite development and devise effective and smooth algorithms for the scrolling.

Update: Nokia 5800 now has kinetic scrolling, as of firmware v40! Go get it!

While I managed to create a prototype, I struggled with a smooth algorithm. Especially since Flash Lite’s performance was quite poor. But nevertheless, I gave it a shot and learned a lot. Of course, it was loads of fun too! I enjoyed it!

Starting with the Pseudo

Before starting anything else, I came up with some pseudo code to back-up the experiment. It was nothing fancy, really simple and straight forward stuff, pretty much something like this:

state = idle
start_time = 0
scroll_threshold = 20px
accel = 0
friction = 0.1

on_tap:
    state = tapped
    start_time = now()
    start_location = location()

on_finger_move:
    if state = holding
        calculate_acceleration()

    else if state = tapped
        distance = abs(location() - start_location)
        if distance > scroll_threshold
            state = holding

on_release:
    if state = tapped
        this.run()

    else if state = holding
        add_event('update', this.kinetic_scroll())

kinetic_scroll()
    // calculate the speed from acceleration and friction

The toughest cookie to crack here is the calculate_acceleration() -function, which I’ve foulishly abstracted away in the pseudo.

Algorithms and acceleration

I already mentioned earlier, that I struggled coming up with an algorithm for calculating the acceleration, all the while creating a smooth User Experience. The fact that someone might want to drag up and down consistently and release his finger after a while got me totally stuck. I had to actively calculate the current acceleration, I couldn’t quite get it working with Flash Lite and I couldn’t come up with a smoothly working version in the very short time I worked with the prototype. Mind you, I was tinkering with this prototype after work and only for a week. After that, my interest for the project vanished and I moved on to other projects… But I might pick this up again ;)

Scr000001

Phone Book.swf running

Download!

At the moment, my prototype only has very basic kinetic scrolling. If you just flick it, it’ll scroll ok. But if you drag it around, up and down, and only then release, it won’t budge. It’s very basic because this way I could demo it for my friends and not have weird things happen :)

Anyhow, I’ll supply the swf -flash files in a moment, which you can then upload to your 5800 or N97 and test-drive it. I’m also gonna publish the .fla files, even though the code is somewhat dirty.

Update: Here are the SWF –files! Just upload them to your phone and execute in the file manager! The program uses your contacts for test data and asks for your permission, just answer “Yes” :-)

Download SWF files
ZIP, 18 kB

Update: and here’s the .fla and .as -files. WARNING! My first Flash Lite and ActionScript code ever. I take no responsibility at all.

Download source .fla
ZIP, 48 KB

More?

If you want to read more about kinetic scrolling on Nokia devices, check out Gravity, the number one twitter client for S60 and Kinetic Scroll Component for Flash Lite, which came out while I was only drafting this post!

Also, any help or comments regarding the algorithm for calculating the acceleration are welcome!