Archive for the ‘Flex’ Category

Background Audio Playback for mobile Adobe AIR apps!

Tuesday, October 18th, 2011

If you build a mobile Adobe AIR app to play or stream audio, the user expects that the music continues to playback when the app goes in the background. When I developed ON AIR powered by Last.fm (Last.fm application using Adobe AIR and targeting tablet devices), had to solve this problem.

Dependent mobile platform, you have to do different things to enable the audio playback in the background!

BlackBerry PlayBook Tablet OS

The PlayBook normally pauses your app, when the app is going into the background and stops everything including the playback of the audio. This is the default behaviour. QNX (Part of RIM/BlackBerry) provides two ActionScript3 libraries which allows to the OS UI Components (qnx-screens.swc) in your app or use OS features or capabilities like QNXSystemPowerMode (qnx-air.swc). These libraries will be shipped with the latest version 4.5.1 of Flash Builder. To add the BlackBerry ActionScript Libraries to the project, you have to enable a property “Add platform specific libraries to library path” in the Project Properties (Flex Build Packaging -> BlackBerry Tablet OS).

After enabling the libraries, you only have to add the following lines which sets the PowerMode when the app inactive in the background to THROTTLED.

import qnx.system.QNXSystem;
import qnx.system.QNXSystemPowerMode;

qnx.system.QNXSystem.system.inactivePowerMode = QNXSystemPowerMode.THROTTLED;

In the PowerMode THROTTLED, the AIR runtime is stopping the rendering but still executes the code to playback the audio.

Here is the documentation about the PowerMode of QNX.

Google Android

On Android, the audio playback in the background is dependent of the device OS version. As multitasking on Android is available since version 3.0 (Honeycomb), only apps running on devices using Honeycomb or later will playback audio in the background.

To ensure that the app is still running when the user isn’t doing anything, you should add following line to keep the app awake.

NativeApplication.nativeApplication.systemIdleMode=SystemIdleMode.KEEP_AWAKE;

Here is the corresponding ActionScript3 documentation. To enable the AIR app to change system idle, the Android part of the AIR App Descriptor file has to contain the following uses permessions.

<uses-permission android:name="android.permission.DISABLE_KEYGUARD"/>
<uses-permission android:name="android.permission.WAKE_LOCK"/>

Apple iOS

Normally, an AIR app (or native app) on iOS is stopping the audio playback when the app is going in the background. With Adobe AIR 3.0, you can enable the Background Audio Playback for AIR application. Add the parameter UIBackgroundModes with the value audio to the iOS part of the app descriptor of your application.

<iPhone>
 <InfoAdditions>
  <![CDATA[
   <key>UIBackgroundModes</key>
   <array>
    <string>audio</string>
   </array>
  ]]>
 </InfoAdditions>
</iPhone>

Currently, AIR 3.0 has problem with the screen lock of iOS, which is disabling the background audio playback.
To prevent the screen lock on iOS, your app should use the System Idle Mode KEEP_AWAKE.

NativeApplication.nativeApplication.systemIdleMode=SystemIdleMode.KEEP_AWAKE;


Amazing launch of Last.fm ON AIR on the three App Stores!

Friday, September 2nd, 2011

I really overwhelmed of the amazing launch on the different App Stores, especially on Apple’s iTunes App Store: Last.fm ON AIR for the Apple iPad was downloaded 872 times in the first 27 hours after the launch! The  Last.fm ON AIR for the BlackBerry PlayBook was downloaded about 470 times in first 8 days since release on BlackBerry AppWorld. As the Android Market has an problem to display the correct number of installations, I can’t really tell you how many installations of the Last.fm ON AIR for Android Tablets were downloaded. But I guess the number isn’t as high because the app was designed to run on Tablet using Android Honeycomb (3.x) like Samsung Galaxy Tab 10.1 or Motorola XOOM.

This afternoon, I also checked some of the international iTunes App Store in the following category: iPad Apps > Music > Free > Bestseller:

Germany: 13th place
UK: 15th place
US: 33th place
Switzerland: 20th place
Brazi: 19th place
Australia: 29th place

Overall, I think was a great start for this project, because I’m sitting in front of my computer and can’t get the smiling out of my face! The main reason for it, I’m working on my Last.fm projects quiet for a while, because it was also my private project to test new stuff coming to the Flash Platform. So I really happy that I finally launched the project.

Last.fm ON AIR is available for BlackBerry PlayBook, Android Tablets and Apple iPad now!

Thursday, September 1st, 2011

Finally, last night the last App Store approved my application. Last.fm ON AIR is available at all three App Store: BlackBerry AppWorld, Android Market and Apple iTunes AppStore.

Information about all my Last.fm projects include the Last.fm ON AIR can be found on my Labs page.

Last.fm ON AIR allows you to search or listen to your favorite artists, tracks or albums. You manage your music library and scrobble the music you currently listen. Find nearby events and upload your tagged event photos directly to Flickr linked to the Last.fm event page.

A Last.fm subscription (PAID) is necessary to use the radio capabilities of the application.

The application provides following functionality:

  • Listen to stations and Scrobbling (Paid Subscriber Only!)
  • Love and Ban Tracks
  • Add Artists, Albums and Tracks to your Library.
  • Search and Viewing informations about: Artists, Albums, Tracks, Events and Users
  • Attending Events
  • Landscape and Portrait Mode
  • Location based services (Find Events)
  • Uploading tagged Event Photos to Flickr
  • Add support for shouts
  • Device Integration: Use the buttons of the device to control application (Play/Pause/Skip/Change Volume). (Only BlackBerry PlayBook)
  • Open Music store to buy and search for artists, tracks and albums. (Only BlackBerry PlayBook)

Here are the links to the application Last.fm ON AIR at the different App Stores.





I also created a group on Last.fm, where you post and share infos: Submit bugs, make feature requests, etc…
http://www.lastfm.de/group/Last.fm+ON+AIR

Credits

Thanks to the Last.fm team for allowing me to use their logo for my application.

Development and Design

The application is based on Adobe AIR 2.7 using Flex 4.5.1, which is optimzed for iOS application for Adobe AIR. As part of this project, I created my own Flex Library for the Last.fm. This library is implementing the latest Last.fm webservice API using OpenSource Flex MVC Framework Parsley. I will release this library as soon as I have finished the documentation for it.

For Design, I used Adobe Illustrator and Adobe Photoshop. I also used Adobe Flash Catalyst for my transforming my design into assets, because Flash Catalyst is a great tool to convert assets into FXG files for ActionScript Skins(Create Workflow to create FXG assets for ActionScript Skins). The reason why I didn’t used Illustrator for step is that I found no way to export multiple FXG files from Illustrator file.

In the next days, I will write some blog post about what I learned in this project. For example: How to create Progressbar for Mobile AIR applications.

Strobe Media Playback for Adobe Web Experience Management released!

Monday, July 18th, 2011

Today, I released an other small project which allows to use the Strobe Media Playback inside of Adobe’s Web Experience Management Platform (formly known as Adobe/Day CQ5). Strobe is based on the Open Source Media Framework. The playback is deeply integrated so that you can directly specify all parameters inside of CQ5 component and it can use the content repository of CQ5 or any web and streaming server as media source.

The current version of the component is using the Strobe Media Playback version 1.5.1 and Flash Player 10.1. A future version of the component will also provide the possibility to use the hosted version of Strobe, the Adobe Flash Media Playback.

More information about the project can be found here.

ActionScript3 Library for Yahoo! PlaceFinder Webservice released

Saturday, June 25th, 2011

Last night, I released an other small library, which allows you to use the Yahoo! PlaceFinder Webservice with Flex and ActionScript3. The library is based on Parsley, because I have developed the library for my Last.fm projects which use Parsley as application framework.

Yahoo! PlaceFinder Webservice allows to find addresses based on address parts or GPS geolocation information (latitude and longitude).

As Yahoo will discontinue and shut down their Maps Web Service in September, the Yahoo PlaceFinder Webservice can be use as replacement of GeoCoding APIs of the Maps Web Service.

An example, the documentation and the library can be found here.

Flash Mobile Device Simulation and Update for PlayBook Device Simulation released!

Thursday, May 26th, 2011

I released the first version of the Flash Mobile Device Simulation and an update of the PlayBook Device Simulation tonight. After the great response on the PlayBook Device Simulation, I decided to extend the solution and provide something similar for all mobile platforms supporting AIR applications. I recreated the ActionScript Simulation Library  and the AIR Simulator application from scratch. The Flash Mobile Device Simulation provides features which are available for all mobile platforms and core functionality for the comminication between the mobile application and the AIR Simulator application. The PlayBook Device Simulation extends the Flash Mobile Device Simulation with PlayBook specific features.

The first version of the Flash Mobile Device Simulation supports Geolocation and Accelerometer and provides the possibilty to import simulation information as XML data, for example as GPS Exchange Format 1.1 (GPX) waypoints.

Additionally to the new features of the Flash Mobile Device Simulation, the PlayBook Device Simulation was updated to implement the latest BlackBerry PlayBook SDK 1.0.1 and supports qnx.system.QNXSystem. To run the PlayBook Device Simulation, you have download both ActionScript libraries.

Updated the Spark Slider with Track Highlight

Wednesday, April 27th, 2011

The latest version supports the toggling of the Track Highlight visiblity using the property showTrackHighlight and changing the Track Highlight color using the property accentColor. The default color of the Track Highlight using the themeColor. Everything works like the old MX Slider.

Also I fixed the problem with the clicking the Track Highlight.

The source code of the sliders is available on GitHub.

First version of PlayBook Device Simulation released!

Tuesday, February 22nd, 2011

Today, I released little private project “PlayBook Device Simulation” that allows to use PlayBook specific API when develop with the AIR Debug Launcher (ADL). The solution consists of two parts: an ActionScript3 Library (PlayBook Device Simulation) and an AIR application (PlayBook Device Simulator).

I ported some of the classes of the QNX AIR Library, so that the classes have some functions and variables (1:1). Currently supported classes and features: AudioManager, Device, MediaServiceConnection and QNXApplication. My solutions supports features, which can’t be test with the VMware Image of the PlayBook Device Simulator, like Power Management (Battery).  Another reason to test the solution is that won’t get any error messages (VerifyError: Error #1014: Class qnx.pps::PPSChannel could not be found) when using any of the supported classes.

Technically, I’m using the ServerSocket API of Adobe AIR to connect the Mobile AIR Application with the PlayBook Device Simulator. This allows a two communication between the Mobile AIR Application and the simulator.

Additional information about integration and usage can be found on the project site: http://www.patrick-heinzelmann.de/labs/playbookdevicesimulation

Playbook development with device specific libraries using QNX PPS and why is ADL throwing errors

Saturday, February 5th, 2011

The Playbook SDK of Blackberry provides additional libraries to use device capabilities which aren’t available in the standard Flex Hero SDK. These Blackberry specific libraries provide access to the controls of the device and contain the QNX specific UI Controls, MediaPlayer/MediaServiceConnection and Pop Dialogs. Blackberry (or QNX) realized the integration using the messaging system of QNX, called PPS Service (QNX Persistent Publish/Subscribe). You can find additional information about PPS here.

AudioManager (qnx.system.AudioManager)

Provides access to the Audio Controls of the Playbook.

MediaServiceConnection (qnx.media.MediaServiceConnection)

Allows the communication between application and the music controller in the upper controlbar of the Playbook.

Device (qnx.system.Device)

Device specific information and allow the application to monitor the battery state of the device.

QNXApplication (qnx.system.QNXApplication)

Allow the application to monitor if the device runs out memory or if the user makes a  Swipe Down Interaction.

MediaPlayer (qnx.media.MediaPlayer)

Build-in MediaPlayer of the BlackBerry Playbook

Dialogs (qnx.dialog.*)

The dialogs are native QNX OS dialogs and using PPS to communicate with your AIR application.

TextInput (qnx.ui.text.TextInput)

Provides the option to define which Keyboard layout will used by defining the type using the parameter “keyboardType”. The image below shows all the available keyboard types.

ADL throws an error when using Playbook specific stuff

If your application is using any of these class above and you try to run your application use ADL (AIR Debug Launcher), the ADL will throw an error (VerifyError: Error #1014: Class qnx.pps::PPSChannel could not be found.) that compiler can’t find the PPS specific class qnx.pps.PPS or qnx.pps.PPSChannel. This error will thrown because these classes are only available on the device or emulator.

I’m personally prefer to develop using the ADL and  only do my final tests using the device or emulator. So I found two solutions to avoid that ADL is throwing the error described above.

1.Solution: Monkey Patch the class PPSChannel

This solution works for the QNX TextInput. Monkey Patch describes the overlaying the original class by adding a modified class with the same name and package into your project.

  1. Open the Library Path in Project Properties
    (File -> Properties -> Flex Build Path -> Library Path)
  2. Selected the qnx-air.swc and change the Link Type from External to Merge into Code
  3. Create a package  called qnx.pps in your project and add a new class PPSChannel into the created package. Use a simple file (File -> New -> File) , otherwhise Flash Builder 4 will not create the class when using ActionScript class.
  4. The class PPSChannel should look like the code below
    package qnx.pps
    {
    	public class PPSChannel
    	{
    
    		public function PPSChannel(){
        	        }
    	}
    }
  5. Recreate the project!
  6. Run the application using ADL

You can download a Flex Project with this solution here.

PS: Don’t forget to remove the class and switch back the Link Type to External when running the application on the emulator or device!

2.Solution: Conditional Compilation

This solutions works perfect when using any of the device integration like AudioManager, MediaServiceConnection, Device or QNXApplication. Because these things can’t be used without running the application on the device or emulator, it makes sense to them off while developing with ADL.

Conditional Compilation allows to include or exclude code based on constants added to the compiler arguments in Flash Builder or using MXMLC.

The constants of the conditional compilation should look like line below.

-define+=CONFIG::device,true

In the source code of the application, you have to add the constant above the functions and attributes of the class which should be included or excludes by compilation.

CONFIG::device
public var audioManager:AudioManager;

CONFIG::device
public function init():void
{
	CONFIG::device
	{
		try{
			audioManager = AudioManager.audioManager;
			audioManager.addEventListener(AudioManagerEvent.OUTPUT_LEVEL_CHANGED, handleOutputLevelChanged);
			audioManager.addEventListener(AudioManagerEvent.OUTPUT_MUTE_CHANGED, handleOutputMuteChanged);
		}
		catch(error:Error)
		{}
	}
}

Set the parameter to “false” running the application with ADL or to “true” using the emulator or device.

Adobe Flex 4 LiveDoc for Conditional Compilation

The second solution helps also if you develop a multi device/screen application and you need a deep integration into the device without creating an extra project for each platform. The developer has only to change the parameter before exporting/building for a specific device or screen.

Stay tuned! At the moment, I’m working on a Flex library and AIR client which allow to trigger all the Playbook device events.

Links:

Documentation of Playbook ActionScript 3 Libraries

Spark Slider with Track Highlight

Tuesday, January 25th, 2011

I’m working on a Playbook application and wanted to recreate the VolumeSlider provided by the QNX ActionScript Library with Flex.

When I tried to convert my Illustrator into Skin for a HSlider in Adobe Flash Catalyst, noticed that the Spark Slider has no Track Highlight. The old MX Slider contains an optional Track Highlight, which can be switched on/off with the parameter “showTrackHighlight”. It was also possible to change color and skin of the Track Highlight on the MX Slider

I extended the original Spark Slider to add a Track Highlight using the Spark Skinning Architecture. At the moment ,I’m working to support the toggling of the visiblity based on the parameter “showTrackHighlight” and the possiblity to change the color of the highlight.

The source code of the sliders is available on GitHub.

With a little bit of modification on the skins, my slider could look like the screenshot below.

Playbook Volume Slider based on modified Spark HSlider with Highlighted Track

Update: 27.04.2011

The latest version supports the toggling of the Track Highlight visiblity using the property showTrackHighlight and changing the Track Highlight color using the property accentColor. The default color of the Track Highlight using the themeColor. Everything works like the old MX Slider. Also I fixed the problem with the clicking the Track Highlight.