Kinetic Scrolling for the 5800
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 ;)
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” :-)
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!
