Skip to content
May 16, 2011 / Daniel Freeman

Open Screen Projects – some fiddly differences

I haven’t added any new features to the latest (version 0.3.6) update to MadComponents – my focus has been ubiquitous performance on all devices.

http://code.google.com/p/mad-components/source/checkout

http://code.google.com/p/mad-components/downloads/list

(Please download the .apk demo if you have an Android phone, and leave a comment, and let me know how it performs on your device).

With this version, my focus has been to smooth over the differences on different platforms.  One problem is that an AIR app on the iPhone doesn’t necessarily behave the same as the same app on Android.

Screen Density

Scaling the content to compensate for high pixel density on some mobile devices is relatively straightforward.  MadComponents was designed assuming a pre-retina iPhone density of 132 dpi.  So there is an algorithm within MadComponents that automatically scales its content on any device with a resolution (Capabilities.screenDPI) greater than 160 – to ensure a similar experience and similar size buttons, etc, on different screens.

The Android Virtual Keyboard Problem

If you set keyboard focus to a TextField (under program control), on an iPhone, this will cause the virtual keyboard to pop-up.  On an Android phone, nothing will happen.  The textfield will focus – you just won’t be able to type text into it.

In fact, the only way to invoke the virtual keyboard on an Android phone (running an AIR app) is to tap your finger on it.

This poses a problem for creating a mobile interface.  For any component (textfield, button, etc.) within a scrolling container – when you tap on the screen it might mean a tap.  But it might be a scroll gesture.

Previous versions of MadComponents would set mouseEnabled to false, and intercept mouse clicks and gestures to determine whether a click was really a click, or a scroll.  But obviously that didn’t work for Android phones – so version 0.3.6 has a work-around that ensures input TextFields are not input disabled.

Am I running on a mobile? or a desktop?

There are two common techniques to determine the screen size.

window size = ( stage.stageWidth , stage.stageHeight )

screen size = ( Capabilities.screenResolutionX, Capabilities.screenResolutionY )

In the browser, or on the desktop, we can use the first technique to determine window size, whereas on a mobile device, this value is unreliable when the app first starts up.  So we use the second technique (because the screen size is the window size on a mobile device).

The problem is determining whether we’re running on the desktop, or the mobile device.  Capabilities.playerType won’t tell us.  Capabilities.os may give a clue.

Then there’s Device Central in Flash CS5.  How do we determine the screen size of the simulated device?  Neither technique yields this value.  I’ve Googled other people asking the same question, but no answer.  If anyone knows how to do this please leave a comment below.

Advertisements

To discuss MadComponents/MC3D, join the Facebook group!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: