Ludicrous Software

Input Text Fields and the Accelerometer on the Nokia 5800

In theory, inline input text fields in Flash Lite are a great idea - by keeping the user within your Flash Lite app, it maintains a consistency of user experience. The downside of inline input text is that when the text field has focus, it essentially “freezes” your Flash Lite app. One of the side effects of this is that the soft keys are returned to their default state, so if the user presses the right soft key, they will exit your app. This happens immediately and without warning, and happens even if you’ve remapped the soft keys to perform some other function. This is not an optimal user experience.

In the process of porting a game to the Nokia 5800, I discovered another unfortunate side effect of this freezing: the manner in which Flash Lite responds to the accelerometer is also returned to its default state. By default, FL on the 5800 will rotate your content if the user rotates their phone from portait to landscape orientation. If you do nothing to account for this, the result is that your content will be scaled down to fit the new stage size. In other words, if your default stage in your SWF is 360 x 640, the new stage size is 640 pixels across by 360 pixels high. Because the default value of Stage.scaleMode is “showAll” and Stage.align is to center the content in the player, your content gets shrunk down and centered.

There are at least a couple of ways to deal with this, but the approach I took was to use the Nokia Platform Services that are available on S60 5th Edition devices to listen for changes in the device orientation, and then modify the orientation of the app to counteract the orientation change. This method involves using the code available at the Forum Nokia wiki, and then changing the callback function in your app to nullify the default behaviour of the player. You also need to override the defaults for Stage.scaleMode and Stage.align.

Once you’ve done this, your application will remain in portrait mode, even if the user changes the orientation of their devices. (There are other ways to do this, and this may not even be the best way, but it works reasonably well.) The problem is that if an input text field has focus, the callback function fails to fire because the Flash Lite player is paused, and so the default behaviour will be restored. This can result is some unpleasant results with your UI. This does not happen when the user first touches the text field, but after they have entered their text and are returned to your application from the system text entry screen.

Eventually, I came up with a workaround, which is simply to keep the most important UI elements always on-screen:

In this image, the green rectangle represents the phone in portrait orientation, and the orange rectangle is landscape. The content in the red square the “necessary” content for the user to see and interact with. By placing it in the top of the screen, this ensures that it’s always visible regardless of device orientation. But this also leaves a bunch of empty space either below or beside it. I eventually filled this empty space with some content/info that the user didn’t particularly need to see on this screen, but was in keeping with the application. If you have access to a 5800, you can see this method in action in this example, which illustrates both the method for keeping the app in portrait orientation and for dealing with the player pausing issue. When you start the SWF on your phone:

  1. Try rotating the phone, and notice that the orientation of the screen doesn’t change.
  2. Tap the input text field, which will take you to the text entry screen. Enter some text and press the checkmark button to return to the app.
  3. When you do that, if you’re still holding the phone in landscape mode, you’ll see the alternate content that’s normally off-stage. If you turn the phone back to portrait mode, you’ll see the alternate content you saw before you entered your text.
  4. Tap somewhere on the screen outside of the text field. This un-pauses the app, and the behaviour will return to how it was in step 1.

This isn’t really optimal - ideally, there would be some way to instruct the Flash Lite player to ignore changes in orientation, but at the moment that doesn’t exist. Of course, the irony of this is that the problem is caused by inline text fields, but the Nokia 5800 doesn’t actually have inline text fields in the Flash Player because of the need to bring up the touchscreen keyboard!