Adobe Device Central CS4 – Update 5

n97

Today we released the 5th update of Device profiles for Adobe Device Central CS4 bring the total number of supported devices to 738!

This update contains the Nokia N97, Nokia 5530 XpressMusic, Nokia N86 and Samsung I8910HD profiles based on Alessandro’s request.  We’ve also added our first cut of the HTC Hero profile for testing your Flash content in the browser.

Our team in Hamburg have been really busy creating the missing (mainly Nokia) device skins, so profiles are generally on track to looking and feeling like the real devices.  If you have any requests for features, fixes and profiles then join in the chatter @devicecentral.

I hope that we can encourage all of our OEM partners to provide access to skin graphics, particularly for hot devices like the Hero.

To get your updated profiles simply press the refresh button, or restart Device Central CS4.

Adobe Mobile Packager reaches 100,000 users!

picture-21

Some great news on the mobile packager, we finally passed the 100,000 users mark yesterday as shown here on the magic “Dashboard”.  This is really good news and shows that we’ve managed to reach to more developers than ever with the tool.

Interestingly enough I’m also seeing recently spikes for the Flash Lite downloads too, which would indicate that applications are finally reaching users :-)

Note:  The orange line shows the attempted downloads, a few of which may be failures totalling 170,623 (which includes the 100,000 successful downloads).  My take on it is that these are Mac users cancelling after they discover that the Mobile Packager is Windows XP only :-(

Screen shot 2009-09-03 at 00.09.33

Sony Ericsson UI AS2 Components Beta 2

As you saw in my previous post our friends at Sony Ericsson have been hard at work creating UI Components.  Today they are announcing Beta 2 of the set and published a huge array of different components, in particular these are well suited to use with their Capuchin devices.

The list is really extensive and enables an array of different applications to be created, with drag and drop development.  Here are some of them:

  • Action List Dialogue
  • Check Box
  • Dialogue
    • Warning
    • Error
    • General question
    • Confirmation
    • Information
  • Image
  • Infotip
  • Notification
  • Options Menu
    • Top Level
    • Sub level
  • Progress Indicator
  • Push Button
  • Radio Button
  • Lists
    • Single-row List
    • Single-row List with Icon
    • Two-row List with Icon
    • Check Box List
    • Radio Button List
  • Slider
  • Scrollable Area
  • Scrollable Text
  • Soft Keys
  • Status Bar
  • Text
  • Title
  • Toolbar
  • Wait Indicator

Go get them!

Flash Development with Android SDK 1.5 Part 2

As we already know by now the HTC Hero supports Flash in the browser, and by double tapping on Flash content it will be played in full screen mode.  In fact I believe that’s also the reason why we cannot use the Flash Player directly with Intents.

Those of you familiar with Nokia’s WebRuntime or the iPhone UIWebView will recognize WebView, because it’s the same thing.  Really it’s an implementation of the browser framework made available as a UI component.  Some of these implementations come with hooks into the platform code through JScript, and enable the use of device APIs like Location.

So what can we do with the Android browser?  Let’s look at the pieces provided by Android:

  • WebView – Used to load and display web pages using the built-in device browser and chrome, embedded into your application.
  • WebViewClient – Enables the handling of various browser actions like page loading and error handling.  Overrides the Activity in the built in browser.
  • WebChromeClient – Enables the replacement of the browser chrome for events like progress, alerts and for window controls.  Can override the default Chrome.

Step 1: Launch the built-in browser using WebView

The code to do this couldn’t be simpler, but there are a few extra changes to make with the layout declarative XML and with the AndroidManifest.xml.  Android supports the ability to lay out the application using standard components, much like Flex.

To add a WebView to our layout we must add the WebView node to the main.xml (in project/assets/layout).  You can see the id property of the node looking rather special, and that’s because it’s indicating a binding.. again, just like Flex.  We can use this resource, and any others later in our code using the builtin R class.

Picture 10Now we’ve done that we have to add a new permission to the Android Manifest.xml.  You’ll notice that the XML includes a number of nodes pertaining to my application, most of it is easy to understand.  Note also that my application has it’s own Intent and an Activity called StubApp.

Picture 12With that we only need to add a tiny piece of code to use the webview component, check it out.

Picture 9As before we overload the onCreate method, call the parent for good measure and then get to business.  We call setContentView to build the WebView using our layout XML file above and then get a reference to this view, set JScript to enabled and load a URL.  It really couldn’t be simpler and as before this runs on the device, however there are issues.

Clicking links in WebView above causes the loss of client control over the page.  The result is that Flash works, but we cannot control the user experience.

The next step was to attempt to bring the control over loading new pages within the webview instance.  To do this we need to extend the WebViewClient class and override the shouldOverrideUrlLoading method, this gives us the opportunity to load the page ourselves; before the browser gets to it.

It looks like this and note that return true after view.loadUrl(url) means don’t bubble this event to other web views:

Picture 13The result of this is work is that we can simply replace the currently loaded page without launching a new activity, but it comes with a penalty.  As when I implemented the custom WebViewClient it became clear that the Flash plugin was not being loaded.  Worse still, there’s no way to load it (despite APIs to the contrary) and that’s by design at this time.

So there you have it, the investigation into creating a Flash Application that lives in the browser can only succeed when using the native browser.  The Android Platform allows for the creation of custom browser clients and chrome, but the penalty for this is that you loose access to plugins.

Hopefully this has been an informative post, and maybe inspired you to have a look at Android with Flash Player support.  Maybe you can extend my examples, or by all means provide some secret code that can help us start up the plugins :-)

Flash Development with Android SDK 1.5

Following on from my previous post below I have also been playing around with the Android SDK, and specifically with the Flash Player on the Hero.  It has been sometime since I did any programming, but some of you may know that I come from an engineering background.  So below I’m going to go over the different tools and technologies that I encountered during these two days.

Be warned, there’s code and geek talk below :-)

Step 1:  Get the SDK and tools


The Hero runs Android 1.5 with a custom UI from HTC called “Sense”.  With 1.5 comes a number of additional features like on-screen keyboards and Android Widgets.  All I needed to do was download the SDK for Eclipse, the same development environment we use for Flash Builder, or Carbide for Symbian C++.  The Android toolchain is a real dream and it runs across Mac, Windows and Linux with feature parity.

If you have Eclipse/FlashBuilder or Carbide installed then you’re good to go.  Just install the ADT plugin using software update, unzip the SDK into a relevant folder and point to it like this.

Picture 2

Instructions

Step 2: Create the HelloWorld app

It used to be that you had to actually type something to create your HelloWorld app, with Android there’s no need :-(   Using the File->New Project menu you create an Android Project, and setup the app name, package name and the name of your Activity; then click finish.

Picture 1

You’ll end up with a typical application created in the Package Explorer, and if you look in the source folder you find the generated .java files.  Remember that Android uses the Java language, but it’s own APIs, and so it’s familiar to look at.

Notice that my application extends Activity, part of the Android application package.  An Activity is generally considered an interactive component, like a screen or dialog.  For our purposes we can thinking of it like a MovieClip or UIComponent if your a Flex person.  In this auto-generated code we have simply overridden the onCreate method as this is the first function to be called.  There’s also an onStart method and that should be used if you want to be formal.

Picture 3Picture 4

From here I can simply run the emulator, but just for fun I decided to plugin my HTC Hero, go for bust I say!  The great news is that devices are auto-detected by the ADT plugin in Eclipse as shown above.  From here I can run or debug my application using the normal IDE buttons, and also with the SDK comes a nice tool to capture screenshots from the device while connected to the ADT plugin.

Picture 5

Step 3: Launch Flash Player Standalone

This is where things get more complex, simply because I don’t know exactly how the player was implemented for Android.  Android uses pretty standard methodology for application development, and so I can presume that the implementation followed the rules.  So what are the fundamental rules?

  • Activity – Is a UI component that presents itself to the user for interaction
  • Service – A background process that carries out a task for other components such as pulling emails and calendar synchronization.
  • Broadcast Receiver – A component that listens and does something in response to broadcasts.  Widgets are great examples of broadcast receivers.
  • Content ProviderA useful way of wrapping access to content, images, audio files or even data base access.

Activities, Services and Broadcast Receivers are all started by and registered to receive messages from the platform called Intents.  An Intent is a simple message object with a simple Action string and it’s also possible to send data, or call a specific component to handle the message.

So with a spot of “playing” around with a decompiler I was able to find two potential Intents.

1.  To launch the FilePicker with SWF/FLV files detected automatically.

Picture 6

This works pretty well, though seems restricted to landscape mode.

2.  To launch the player Activity (com.htc.flash.SingleViewActivity) directly passing a SWF file to play.

Picture 7

It’s possible to launch the Activity using this method but the file provided in “putExtra” doesn’t actually load.  So while this would be the best solution it appears like it’s designed not to work in this way.

So in summary, the only valid path for standalone apps (as far as I can tell) is to load the FilePicker.  This method is pretty good for on device testing, maybe you want to see what your mobile web site looks like and need to tailor the flash content to fit the screen.

Next we’ll look at the browser solution…

HTC Hero – Consumer Review

device

As some of you have seen me tweet (@markadoherty) last week I received a new phone the HTC Hero.  The devices comes in a few different colours, but I got the white version simply because it’s got Teflon coating.  The device itself is pretty resistant to scratches and greasy paws on the screen, a life in my pocket isn’t easy :-)

Summary

Build quality for the Hero is outstanding, the device is light but feels really solid to hold.  As many of you have heard me bleat previously buttons are always a big giveaway when it comes to quality.  If a button rocks in it’s bezel, or has a poor action you can tell that it’s not designed to last.  With the Hero there’s no issues with any of the front facing buttons, the volume control on the side could have been toughened up.

The screen quality is great, it’s sharp and bright right to the corners and sports 320×480 pixels with multi-touch support.  I’ve found it to be highly responsive and accurate, and with the accelerometers I can type in portrait and landscape mode very easily.  In the screenshot above you can see the rich SenseUI provided by HTC, everything on the screen is customizable because they are either Widgets or shortcuts.

Android has come on leaps and bounds in its first year, with the addition of on screen keyboards, widgets and a major OS upgrade bringing stability, performance and entertainment features.  The Hero demonstrates that HTC really have their finger on the pulse, but it’s not without glitches as you’ll see below.

Widgets

The clock and weather Widget also displays my current locale and automatically determines the weather, this changes as I move around London and so is really accurate.

stocksnoel

books

If I swipe my finger left or right from the Home Screen I can move to other spaces, in each of these I can add new widgets to personalise the experience.  You can see in the screenshots above that I have added my SMS/MMS messages, a Stocks Widget and some quick links for Web browsing.  The widgets are updating using very simple Android Widget framework, which is fully customizable.  So I can inform the Twitter Widget to update every 4 hours rather than every 5mins (which is the default and had my account suspended).

Web Browsing

As far as mobile browsing goes Android has from v1 been able to deliver a great experience for end users.  It’s based on the open source Webkit browser with some modifications for performance and to tailor it to run well on Android’s UI framework.  Currently it does not support HTML5 but it does have Location support, which is a great boon to tailoring searches for mobile devices.  In fact it borrows the same location technology as Google Maps, so there’s no need for GPS.

browser

Flash on Android

Of course the feature that’s most important to me is the support for Flash on Android, in fact it’s the first Android device to support the Flash Player.  With such a high resolution 3.2″ multi-touch screen you’ll notice that Flash fits particularly well in this form factor.  As with some later Nokia devices it’s now possible to view multimedia content made available by various content sites using Flash today.

stocksnoel

books

Sites like Yahoo Movies, Youtube and various games sites can now provide mobile experiences designed to work with mobile screen sizes. Using the pinch and zoom functionality of the device a user can easily navigate around.  In the image above you can see a video that started to playback automatically to promote a new movie.  I should point out that while annoying at times, this is also how the business model for the site works (there was no audio btw).

stocksnoel

books

If you want to watch a video or play a game in full screen mode you can simply double tap on the content and it will playback in full screen mode.  You can see in the screenshots above the trailer for the new movie Orphan playing back in full screen mode, and in windowed mode also.  Also shown above is the BBC’s iPlayer showing a few videos in the carousel.  Now I should point out that iPlayer doesn’t work in the browser because the desktop video file was 627mb.

I have noticed a few browser crashes, and interestingly my Google start page is the usual culprit.  Wonder if it’s the location feature?

Social Networks

people

One of the great features of the HTC Hero, and I suppose the Android OS is the ability to “do what you want”.  HTC have nailed the principle that phones are social devices, yes they help us communicate but they also enable us to organize our busy lives like never before.  With the Hero, Facebook and Twitter have been built right into the platform with full contacts integration.

During the setup of the device the application will automatically try and match your phone contacts with Facebook and other Social networks.  This can be a little bit of a hassle if you have hundreds of contact, but it’s well worth the time and the suggestions are pretty good.  An example of where it goes wrong is that SIM cards only hold a single name string, not first and last name and there’s no way to know that “Mum” = “Margaret Doherty” on Facebook.

serge

stocksnoel

As you can see each contact can be linked from my address book (”People”) to their Twitter, Facebook and Flickr accounts. I’ve opted to not use Flickr because I don’t use it for Photos, and prefer to get updates from Facebook for that. It’s a personal choice though and I’m sure many people would like updates across the board.

Exchange Support – Fail

fail

As you can see Exchange support wasn’t such a great experience, because as it turns out the Hero doesn’t support installation of SSL Certificates.  At Adobe we use a corporate SSL certificate for mobile devices to ensure that each device has been setup by a known employee.  The benefits of the certificate and installation are numerous and it’s a pretty standard corporate IT policy.  On this front therefore “Exchange support” is a fail and a real pity as everything else works perfectly.  I seriously wonder how they got this so wrong?

Exchange Support via Moxier

Without Exchange support the HTC Hero would never have been my personal phone but for a company called Moxier.  It was well known that MS Exchange support was not a strategic priority for Google, and while that makes sense it’s great to see that Android is open enough for others to build a business around these opportunities.

Moxier, DataViz RoadSync and Roadrunner have been created to fill this gap and today Moxier ($29.99) fits my requirements and includes SSL support.  RoadSync would have been my choice but for the lack of SSL support and the great UI, support and 10 second installation and setup was nothing short of perfect.

mail-synccalendar

Inbox

Included are Calendar, Email, Sync and Contacts support including access to the Global Address List so that I can look up other employees easily.  I’ve also found that the Calendar is pretty well thought out, particularly the agenda view shown above where I can see the next meetings coming up.

What you might notice is that my Agenda is pretty light on meetings, and that’s where problems have started to show.  As it turns out some meetings are not synchronising correctly, most notably those with timezone offsets and that’s pretty common for me given my position.

In all it’s pretty good but an industrial strength solution is required for enterprise customers, missing appointments would make me look bad.  Saying that, it’s better than nothing and I’ve reported the bugs so let’s hope the developer is spending my $30 wisely :-)

Next Post

My next post is going to be all about my investigation into getting Flash standalone applications to work.  I’ve been “fiddling” with the Android SDK and so far I’ve managed to start Flash independently and load the File Picker.

Hopefully I’ll complete the investigation tomorrow!!

FITC Mobile – Toronto (with Sneaks ;-)

This September I’m going to travel to Toronto to present at the FITC conference.  It’s set to be an exciting show with all of the major mobile platforms being supported including Android, Palm, Windows Mobile, Flash Lite, Blackberry, OpenGL ES and of course iPhone development.  There’s even going to be a session on SMS Applications, something that is probably a lot more interesting that you’d think!

Flash Sessions

  • Martin Barclay & Robert Burdick from Nokia: Develop and Distribute for Nokia smartphones
  • Scott Janousek: Practical Design and Development with Flash on Mobile Devices
  • Scott Janousek: Leveraging Accelerometers on Mobile Devices
  • Thomas Joos: Tips and Tricks for Flash Lite Optimization
  • Weyert de Boer: Android for Flash Developers
  • Mark Doherty: Flash Lite Distribution and the Open Screen Fund

So as you can see there are going to be a number of presentations on Flash topics.  In my session I’m going to probably break the rules and just sit and have a chat with everyone.  Distribution is a complex topic and one where many misunderstand where money is made.

On top of that I’ll also be showing off sneak peaks, so if you’re in the Toronto area and not coming to Adobe MAX then I suggest you start booking ;-)

Prices are very low at $209 and $89 for students.

Sony Ericsson release Flash UI Components in AS2

Picture 1

A few days ago the team at Sony Ericsson released their first set of UI components for the Flash Player on mobile devices.  Written in AS2 and fully integrated with Adobe Flash Professional CS4.

Each of the controls are fully customizable use the Component inspector, enabling you to change the look and feel for your applications.  Everything from background colors to text values and icons are supported across the components, it’s ridiculously easy to make them fit with your apps look and feel.

The beta set includes 8 new components ready for you to use:

  • Checkbox
  • List – Single Row with Icon
  • List – Two Rows with Icon
  • Progress Indicator
  • Push Button
  • Radio Button
  • Softkey Bar
  • Wait Indicator

How to Get Started

Once you’ve downloaded the MXP file here, you can install the components by simply double clicking on the file.  The Adobe Extension Manager will install the files and add them to the Components Panel in Flash Professional, you can open it using the Window Menu within the tool.

As you see it’s then possible to start dragging the UI components onto the Stage here on the left, which in my case is set for a Sony Ericsson C905 device at 240×320.  By default the components come with a nice Sony Ericsson look and feel, and if you’re like me then a little help in the UI department always helps (as you’ll see later).

Picture 3

Using the component inspector (shown here in the middle) you can then start to customize the look and feel of the list.  Check out just how much you can configure the components simply by clicking a few options, it’s really very nice indeed.

Ok, so I said about that my design talents need some work but I’ve played around with the various options and come out all blue.  Additionally, since the list component is using live preview, you can see your items directly and the active scrollbar on the stage.

Picture 8

Of course you can configure these options with Actionscript too, which is pretty much required for anything other than static lists.  Yet for colors and sizes there’s a real value in having live preview components, particularly for the designers among you.

Picture 9

In the image above I’ve added a softkey menu to enable me to buy some Star Fruit, which is shown selected at the top.  Using the component inspector I can set each of the items too, and so disable items that may be unavailable.  I can also change their color for highlighted, selected and disabled items directly in the tool.

Picture 4

Now that I’ve completed my list I can add a simple shadow fill and the Wait Indicator component (in circle mode) to animate when the purchase is taking place.  Again it’s configurable so that I can make it fit in with my application, and of course control the spinning of the circle in Actionscript.

Then I’m ready to test in Device Central CS4 to ensure that everything looks great, before a bit of testing on the Sony Ericsson C905 :-)

Picture 5

Remember that it’s possible to begin using these components along with the extensive list of MXP files for Project Capuchin.  Targeting Capuchin devices enables you to deliver standalone applications that have full access to JavaME apis on the JP8 platform, there are seventeen devices already.

Don’t forget the PlayNow Arena available on 38 devices, 17 countries and 200million users!

Developing with Flash Lite Tutorial Series

Picture 5

Dale Rankine is one of the foremost experts in Adobe Flash technology for devices and owner of a successful mobile development company, Moket Pty.  As a certified training partner and long standing community evangelist, I’ve asked him to help produce a video tutorial series on Flash Lite technology.  Our goal is to help new and existing developers to work with our optimized Flash player for mobile phones and devices.

From the series I expect that viewers will learn how to use Adobe Device Central, discover how to construct a mobile interface and to work with multimedia including FLV.  We’ve tried to build out a set of topics that we get most questions on, things like video optimization, performance and the ‘basics’ such as object orientated programming and memory management.  The focus will remain on Flash Lite 3.x, although many of the APIs and features work everywhere.Picture 1

The great news is that Dale has already begun publishing the videos over at our Vimeo channel, and soon we’ll push these up to Adobe TV too.  We might be able to take a couple of requests, so if you get asked the same question over and over again, then let’s hear about it!

Remember also to spread the word, embed the videos in your own blogs and drive the viewers to new content with the following banner…

  • URL: http://vimeo.com/adobeflashlite
  • RSS: http://vimeo.com/adobeflashlite/videos/rss
  • Twitter: flashmobile

Flash Distributable Player Now Available in 45 Countries

Last week Mark Doherty blogged about the fact that the Distributable Player is now available in a total of 45 countries. One of the nice things about the Distributable Player solution is that you don’t have to bundle a version of Flash with your application. You simply package it up using Adobe Mobile Packager 1.1 and it has all of the information about where to grab the runtimes inside of it so that when someone in one of the 45 countries below goes to install your application it will download Flash Lite if they don’t already have it installed. It’s similar to AIR’s model of making sure you’re only packaging and downloading what you need.

As Mark says, this is a great way to start building mobile applications today while you’re waiting for Flash Player 10. You can see the full list of supported devices and countries over on Labs. There’s also a great tutorial for getting started with the mobile packager that I’ve embedded below.

Distributable Player Supported Countries

Distributable Player Supported Countries