Animating QNX components in PlayBook apps

In this post I want to show you how you can use animations/transitions for QNX components to create a better user experience. User experience designers use transitions when they want to highlight or focus user attention to a specific part of the application.

For example, when you add a new component to the screen as a result of user interaction you can do it in two ways:

  • just add the new component to the display
  • create a transition or animation that gradually introduces the new component to the display

I think it is easiest to understand the subtle difference between the two approaches by seeing this screencast:

In my application I used the tweener library for animating the container that holds the list. This ActionScript library is one of the most used libraries out there for this task. You can grab it from here.

LATER EDIT: QNX is using Tweener internally. So you don’t have to add this library, is already part of the SDK (qnx-screen.swc). Thanks to Julian Dolce of RIM for pointing this out.

Once you get the SWC file, you have to add it to your ActionScript mobile project. The easiest way, especially if you plan to use more libraries, is to add a folder to the ActionScript build path and configure Flash Builder so that every SWC file you drop in this folder will be added to the project.

The steps are:

  • Create a folder in your project. I created a folder called libs for my project.
  • Copy the tweener.swc file into this folder
  • Open the project properties page (right-click the project name and select Properties) and select the ActionScript build path. Then click the Add SWC Folder button and select the folder you created earlier. Click the OK button and you are good to go.

How do you use this library? Actually it is pretty simple. There is a static method on the Tweener class called addTween(). You use this method to specify the display object you want to animate, the properties you want to animate (could be the x, y, size, etc), and the animation duration. You can also specify a number of functions to be called for example when the animation is completed or for each step of the animation.

Here is the code for animating the list in the screen:

// rightDock is the container that holds the list
// it is docked to the right-side of the screen
Tweener.addTween(rightDock, {size : 200, time : 1, onUpdate: onUpdateTween});

private function onUpdateTween():void {
    myMain.layout();
}

And this is the code for removing the list from the screen:

Tweener.addTween(rightDock, {size : 1, time : 1, onUpdate: onUpdateTween,
    onComplete: onCompleteTween});

private function onCompleteTween():void {
    myMain.removeChild(rightDock);
}

Why do I call myMain.layout() for each step of the animation? This method is executed in order to reposition and redraw the components on the screen so they account for the width change of the rightDock container.

You can download the project source code from here.

4 thoughts on “Animating QNX components in PlayBook apps

  1. +1 Quentin…just add the qnx-screen.swc to your build path libraries and you’re good to go. The TweenLite family works well as well.

  2. Thanks guys,

    I updated the post to point this out. I left the explanation about adding a SWC folder to build path for people who don’t know this.

    Mihai

Leave a Reply

Your email address will not be published. Required fields are marked *