Flash Player 10.2 for Android Honeycomb is out

If you have an Android Honeycomb tablet and you go to Android Market you’ll be able to download the final release of Flash Player 10.2. This version enables hardware accelerated playback for 720p video. However you will not enjoy this feature with the current Android 3.0.1; the next Android update will turn on this feature.

Finally, I want to point this out: the teams behind the Flash Player and AIR runtimes are working harder and faster than ever. The number of platforms and devices supported by these runtimes has grown a lot in the last couple of years and still, they are able to keep up the pace and add new features. Big round of applause to you!

April 29, 2011 | Filed Under Android | 1 Comment 

Mobile Development: scaling content depending on the screen resolution

The Flex framework offers a number of methods to adjust the size of the application UI depending on the device screen resolution and density. For example, you can set the applicationDPI attribute or you can use different CSS files.

In this post I will show you how you can scale or adapt the application UI at runtime using the Capabilities API. But first, why would you want to change the size of the application UI? Consider these two pictures.

Nexus One:

Samsung Galaxy Tab:

The first one is a screen capture taken on a Nexus One phone and the second is taken on a Samsung Galaxy Tab. Obviously, the Samsung Galaxy Tab has a higher screen resolution (600 X 1024) compared to the Nexus One (480 x 800). So, if you don’t make any adjustments to your UI, everything will be smaller on the bigger screen (as you can see from these pictures).

Sometimes, this is not a problem. In other situations, you might want to increase the size for some parts of your design due to aesthetic or usability reasons, or maybe both.

Using scaling to adjust the content size

When I worked on the aTabSplitter application, the first thing I did regarding the UI was to make sure that it wouldl fit nicely on a screen with a resolution of 400 x 800. By using Flex containers (VGroup, TileGroup, and HGroup) and playing with a mix of absolute and relative sizes I was able to easily create a “liquid” design. For example the keyboard is designed to take up about 320 pixels x 320 pixels. The TextArea at the top is set to fill in all the available space. Why did I choose this resolution? By looking at various Android devices I felt that this is the smallest resolution. Here is the code:

For the aTabSplitter application I wanted to increase the size of the virtual keyboard when the application runs on devices with a screen resolution higher than 480 x 800. And the simplest solution is to use the Capabilities API. When you run your application on a device, Capabilities.screenResolutionX gives you the horizontal resolution. If you want to check for the screen density, you can use Capabilities.screenDPI.

Back to the code, I set an ID to the HGroup that holds the buttons and then I registered a listener for the creationComplete event on the view. Using this listener I can check for the screen resolution and if needed I can change the size of the HGroup using its scaleX and scaleY properties. When the container scale is changed, all the contained components are scaled too. Thus everything is kept in place, nicely aligned.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 title="HomeView" creationComplete="layoutButtons()">
<fx:Script>
<![CDATA[

private function layoutButtons():void {
  if (Capabilities.screenResolutionX == 600) {
     buttonsHolder.scaleX = buttonsHolder.scaleY = Capabilities.screenResolutionX / 450;
   }
}
]]>
</fx:Script>

[...]

<s:HGroup id="buttonsHolder" gap="5">
[...]
</s:HGroup>

And here is how the keyboard looks when I run the code on a Samsung Galaxy Tab (compare to the previous screenshot taken on the same device):

Of course, you can apply scale in the other direction – decreasing the size of a component.

Conclusions

This is a pretty simple trick yo can use to adjust your content to different screen sizes. In the next post I will show you how you can adapt the content to screen orientation changes – device held in portrait or landscape mode.

You can download the project code from here (you’ll need Flash Builder 4.5 and Flex 4.5 to run and compile the project).

April 28, 2011 | Filed Under AIR, Mobile, Tutorials | 3 Comments 

Flash Camp San Francisco

April 30, 2011

I will attend and speak and Flash Camp San Francisco on April 30th.

April 20, 2011 | Filed Under Events | Leave a Comment 

Flash Camp San Francisco

I’m happy to announce that at the end of this month (April 30th) we will have a Flash Camp in the San Francisco Adobe offices. If you want to be sure that you get a seat register here now (it is a free event).

The event will be focused on mobile development using Flash Builder 4.5 and Flex 4.5. It will be a code-camp style event, with sessions in the morning (10:00 – 12:00) and building code in the afternoon (1:00 – 5:00).

Of course it will be a good opportunity to meet people from the teams (Flash Builder and Flex SDK).

See you there (probably a little bit jetlagged)!

April 19, 2011 | Filed Under Conferences | Leave a Comment 

Mobile Development: screen orientation and custom keyboards

I first started to create mobile applications last year once I got my hands on early builds of AIR 2.5 for Android. Since then I’ve built a number of mobile applications and I’ve talked to people smarter than me about mobile development.

Trust me, if you are like me, a developer with background in web/desktop applications, than this transition is not that easy. The “canvas” you have on mobile devices is much smaller, and the touch input user interface introduces a whole new universe.

So I thought I should share my experience by starting a series of articles. And hopefully I can get feedback from you, because as said, I’m not a user experience ninja. I’m just a developer.

In this first article of the series, I want to cover two topics: screen orientation and custom keyboards.

Screen Orientation

As if we didn’t already have enough complexity on mobile devices (different screen sizes and densities) on smartphones and tablets you have a feature called screen orientation. Basically, a user can hold a device in a portrait or landscape orientation. Adobe AIR provides support for this feature; you can code your application to account for screen orientation changes.

And this is great! Right? If some users prefer to work with your application in portrait mode and others in landscape, you can make them all happy by supporting both use cases.

Let’s stop for a bit and take a look at this feature in action. The screenshots are taken on my Android phone. In the picture below you can see the default soft keyboard pulled out when you want to type an URL in the browser. Obviously, what we have here is a landscape orientation.

The picture below shows the same application as the one before, but this time the device is held in portrait mode.

After I used this application in both orientations, this is what I thought about the pros and cons:

Custom Keyboards

All modern mobile OSes have built-in support for soft keyboards (on screen keyboard). Depending on the OS flavor you might have different keyboards, slightly optimized for a specific task (email/Internet, generic text, and so on).

All the Calculator applications I’ve seen running on these devices have a custom keyboard. The next picture is a screenshot of my Android phone running the default Calculator application.

Why does the Calculator use a custom keyboard rather than the standard soft keyboard? The answer in this case is obvious: because it has only the keys that are used by the application, this custom keyboard is much more optimized than the standard keyboard. The standard Android numeric keyboard has about 30 keys and the Calculator one has 16. Because of this difference, you not only get bigger keys but you don’t get noise (keys that are of no use in the Calculator context).

Below you can see a custom keyboard I created for an application that helps you to split the restaurant bill.

Conclusions

In conclusion, although people are used to changing the device orientation, you might want to reconsider this for your application and design your application for either landscape mode or portrait mode, but not both. Although this might seemed like a bit drastic, I do think that sometimes it could make sense.

For example, an email reader app if used in landscape mode on a tablet gives readers two panels at the same time: a panel displaying the messages and one displaying the content of the current selected email. You don’t even have to force your users to use one orientation though. In the example above, when the user wants to use the device in portrait mode you can hide the messages list panel.

Second, you should always ask yourself if your application can benefit from having a custom keyboard instead of the built-in keyboard.

This was my first post from the series. In the next posts I will go deeper on how to create custom keyboards, how to deal with screen orientation, and how to adapt your layout to resolution just to name a few.

April 18, 2011 | Filed Under Android, iOS, Mobile, PlayBook, Tutorials | 5 Comments 

Flash Builder 4.5 and Flex 4.5 – one step closer to final release

Today we announced that Flash Builder 4.5 and Flex “Hero” 4.5 will be launched at the beginning of May.  And to tell you the truth I couldn’t be more excited – this is my third launch so I do have something to compare to :). In this post I want to highlight some of the most important features / changes / additions. Just to sum them up, they are about mobile, performance, and productivity.

What’s new in Flash Builder 4.5

Let’s start with Flash Builder (for a while I worked on this product as an engineer, so it is close to my heart). Flash Builder 4.5 is coming about a year after Flash Builder 4.0 – I think this is the shortest release cycle we’ve ever had for Flash Builder.

Support for mobile development

It is almost one year since we announced and shipped support for Adobe AIR and Flash Player on mobile devices. So it is only natural that Flash Builder 4.5 adds support for mobile development. You can use Flash Builder 4.5 to create applications for Android, BlackBerry Tablet OS (PlayBook), and iOS. Flash Builder introduces two new project types: ActionScript Mobile Project and Flex Mobile Project. You can use Flash Builder to deploy the apps to the device, debug the code in Flash Builder while the application is running on the device, and when everything is in done you can export and sign the application (ready for submitting to Android Market / App Store / BlackBerry App World) right from the tool.

With the initial launch of the tool (early May) you will be able to create ActionScript Mobile projects for these three mobile platforms and Flex mobile projects only for Android. Soon after the launch we will issue an update that will extend Flex support to PlayBook and iOS (somewhere around June). This is great because Flex makes mobile development much easier – its support for screen metaphor and application session caching is a huge productivity boost.

Improved Productivity

I remember the Flash Builder 4 launch tour and talking to many senior Flash and Flex developers. One theme that came around no matter what was this: “we want a Flash Builder that helps hard-core developers to be more productive!” And I told them back then that this is definitely something that we have our eyes on. I’m glad to tell you that there are about 25 new features in Flash Builder that should make your life easier while coding. Here are some of them:

Another area of improvement is the designer-developer workflow. Now it is possible to reopen Flex projects modified in Flash Builder back in Flash Catalyst. There are some restrictions.

Improved Performance

We updated Flash Builder to use the Eclipse Helios platform (3.6.1). This means that all the improvement made by the Eclipse platform are now available to Flash Builder too. Second, for large projects you can see an improvement up to 65% for refactoring and profiling operations. Design view went through a complete overhaul. It is not only faster to switch between Code and Design view, but you can disable Design view per project. This will reduce memory consumption and improve performance.

Flash Builder for PHP

We continued to build on our initial work with Zend (remember Zend Framework support for AMF/Remoting?) and I’m proud and happy to tell you that there is a new product called Flash Builder for PHP. Here are the main features:

What’s new in Flex 4.5

After seeing the Flash Builder 4.5 features it is obvious that one important feature of the Flex framework 4.5 is its support for mobile development. Now you can use the Flex framework to create applications for desktop, Android, PlayBook, and iOS. A number of mobile friendly UI components were added so the performance and user experience are second to none.

At the same time the Flex SDK team continued to work on the Spark components and add new components. There are Spark DataGrid, Form, Image, Module, Busy Indicator, SkinnablePopUpContainer, Date/Time, Number and Currency formatters, as well as Number and Currency validators.

Flex 4.5 supports now OSMF 1.0 (Open Source Media Framework) and TLF 2.0 (Text Layout Engine). And finally there are compiler improvements :). You should see less memory used for full builds and less time consumed for incremental builds. In Flex 4.5 only the RSLs (Runtime shared libraries) that are actually used by the application code will be linked into the compiled application. This goes a step further when using modules. For example a module will know if its parent already loaded a RSL and thus will not relink the same RSL.

Conclusions

While perfection doesn’t exist in the real world (at least this is what philosophers say :D), I do think this release is pretty close. There are so many features that you might wonder why it’s just a dot release. More importantly, it sets the stage for even greater things.

If you want to read more about coding productivity enhancements in Flash Builder 4.5 check this article. This is a good resource on Flex 4.5 new features.

April 11, 2011 | Filed Under Flex | 9 Comments 

Custom Hardware + Flash Platform = Great Customer Experience

In today’s crowded consumer market many companies are looking for ways to differentiate their services and thus attract more customers while retaining the existing ones. The application I will talk about in this post is a great example of how you can enhance customer’s buying experience in a market that is highly competitive: the Telecom industry.

But first, watch this video:

The application was created by B-Reel (a Swedish company) for the 3 Telecom provider in Sweden. By using a custom hardware with a Flash application running on top of it, 3 Telecom operators can offer an experience that is very close to in-shop service for customers who are looking to buy a new terminal.

Now, if this is not cool… What do you think?

April 5, 2011 | Filed Under Flash Platform, Others | 4 Comments 

Adobe AIR 2.7 Beta 1 is on Labs

We just released the first beta of Adobe AIR 2.7 on Adobe Labs. You can get the bits from here. What’s new with this release?

First, this beta is available just for desktops for now. Second, the main features are:

Some of these features have already made their first appearance in the Flash Player 10.3 beta released a couple of weeks ago. Now, they are integrated into Adobe AIR as well. The final version should come not later than Q2 2011.

Now go and download the bits :)

April 1, 2011 | Filed Under AIR | 2 Comments 

Switch to our mobile site