Google, Flash, and devices

Yesterday, during the Mobile World Congress keynote, Eric Schmidt (Google’s CEO) announced Google’s support for the Flash Platform. They see this as a competitive advantage over certain smartphones on the market.

At about 60,000 Android handsets sold each day, you can see how this newcomer is starting to become a force in the mobile ecosystem. And having support for the Flash Platform means business opportunities for many web developers out there.

Mobiles definitely are hot these days. I think the new kid on the block would be the new generation of tablet PCs. And as usual, the coolness is not in the piece of silicon and iron itself, it’s all about how the whole will work: software and hardware together providing immersive experiences. Take for example what the Adobe XD department together with WIRED magazine created using Adobe AIR. This is a glimpse into how future print media could look and be consumed on connected devices. You can watch the video here.

 

February 17, 2010 | Filed Under AIR, Mobile | 9 Comments 

Adobe AIR for desktop and mobile applications

We just announced at MWC (Mobile World Congress) that the first mobile OS that will run AIR is Android (others will come). In fact, if you are in Barcelona the next few days, drop by the Adobe booth to see demos of AIR applications working on Motorola Droid. If you can’t drop by in person, you can watch videos with Kevin Hoyt demoing AIR on Droid.

What does it mean? Let’s put it this way: if you are a Flash developer, then pretty soon you’ll be able to develop applications (web or standalone) targeting Flash Player 10.1 and AIR 2 on a huge number of devices (laptops, net books, desktops, mobile phones) and across different OSs (Win, OS X, Linux, Android, Symbian, and Palm OS).

Of course the number and diversity of the targets are impressive, but what I think is even more important  for any developer/business than this, is that you can use the same workflows/tools and produce a consistent result.

I’m lucky enough to have a Nexus One for about a week by now. Testing different sites that use Flash Player, it feels kind of magic :D (as a Platform evangelist I have an early version of Flash Player 10.1 installed on the phone). Can’t wait to have the time to write some apps for Android, I have a couple of ideas. This means I will have firsthand experience in using our tools to produce apps for the mobile world.

What about you? Anyone feels like it is time to step up into a new market/world (from web/desktop apps to mobile)?

February 15, 2010 | Filed Under AIR, Mobile | 6 Comments 

AIR 2 Beta 2 is out

We are a step closer to the final release of AIR 2 with the release of Beta 2. You can download the new bits from here.

Some of the new features are:

If you use the Update Framework, please keep in mind that there are two UI versions: one uses Flex 4 (frameworks/libs/air/applicationupdater_ui.swc) and the other Flex 3 (frameworks/libs/air/flex3/applicationupdater_ui3.swc).

You can not run the Beta 1 applications with this version. You need to update the application descriptor file to “2.0beta2″. All the sample applications we provided with the first Beta were updated so you can download them and run them with Beta 2.

February 2, 2010 | Filed Under AIR | Leave a Comment 

5 Flash applications

The latest issue of the Edge newsletter has a bunch of interesting articles (Data-centric development in Adobe Flash Builder 4, Object relational mapping for the Adobe AIR developer, An easy way to bring 3D content into your Adobe Flash projects). But the one that caught my attention was The edge of Flash by Rob Ford. Rob presents seven Flash projects ranging from personal sites to corporate sites. All these sites are great examples of what a talented designer/developer can achieve today using the Adobe Flash Platform. Out of these seven projects, the closest to my heart was one called Machinarium. It is an adventure game and it is so beautifully crafted that my wife couldn’t resist and made me buy the game as a small Christmas gift. For me it was an excuse to remember the Monkey Island 1 days. The scenes are designed with attention to detail, and it feels almost like a Japanese anime (Tekkon Kinkreet ;) ). If adventure games are your thing and you want to kill some time then I recommend this little gem. The game is created by a Czech company.

f_01

InfoDome is a browser based online database solution. You can create a database visually from scratch or you can import an existing one. You can build reports and share live data with remote users. You can integrate the reports and forms with your website. Almost forgot to tell you, the front-end is created with Flex.

f_02

Express is an Agile project management tool built with Flex, BlazeDS, and Spring. It includes features such as backlog management, iteration management, and a virtual wall. It is built by some smart Aussies.

f_03

Air Analytics is a complete analytics solution for Adobe AIR applications. It works online/offline and it is very easy to integrate with your application. You can use the application to track custom numbers and types, OSes, error, app installs,  usage and more. At this is time it is still in beta but it looks promising (on November 5th they reached 1 million items tracked). I think I’m gonna try it myself on my next AIR project.

f_04

OpenZoom offers an SDK for the Flash Platform that enables you to create Zoomable User Interfaces by using high resolution bitmaps. You can use this framework for demos, introductions, presentations and more.

 

 

f_05

January 14, 2010 | Filed Under AIR, Flash Player | 2 Comments 

AIR 2 and Flash Player 10.1 samples added to Tour de Flex

If you open the Tour de Flex application today you’ll get an update and among other things, you’ll see samples for AIR 2 and Flash Player 10.1 features.

air2_tdf

Did you try AIR 2? If so, what do you think?

December 16, 2009 | Filed Under AIR, Flash Player | Leave a Comment 

Magnifying Glass AIR 2 application or how to communicate with a Java program from AIR

My favorite feature in Adobe AIR 2 is, by far, Native Processes: the ability to launch and control and communicate with a native process. It could be any executable on the machine where the AIR application is installed. I think this feature opens up a whole new range of AIR applications. When you add this feature to the ability to create socket servers, you have a powerful platform to build RIA applications for desktops.

Once I heard that this feature would make it in AIR 2 I was very excited. Why? Well, back in 2008 when we launched AIR 1.0, my fellow evangelist Serge Jespers created one of the coolest AIR applications for the AIR Tour. It was the smallest video player in the world. Basically it let you watch videos in the application icon from the Dock.

The application is extremely cool, but it has a small issue: it is too damn small to be able to see what’s going on. Being an engineer, I spent some time trying to find an engineering solution. Of course, I could have asked Serge to rewrite the application to make it bigger, but this wouldn’t have been an engineering solution. It would have been something that an accountant or manager would come up with. My solution is to build a second AIR application that can be used to magnify the video played inside the icon. This application would act like a digital magnifying glass.

With AIR 2 I’m finally able to implement the magnifying glass app pretty easily. Below you can see a screenshot of my application in action. It has two windows. The first window is the view port of the magnifying glass. You can see how many frames per second it processes, you can control the amount of zooming, and you can drag it around your screen. The second window displays the magnified image.

mg_1

The internals

How did I do it? The application has two main parts. One part is the AIR application itself. It renders the UI, controls the view port and the zoom factor, and scales the image.  The second part is a Java program that captures a screenshot of a portion of the screen. The Java program is controlled by the AIR application.

Using the NativeProcess and NativeProcessStartupInfo classes from AIR 2, you can launch an executable. In order to communicate with the executable you can use standard input and standard output. I wrote the Java program to output the bytes of the screenshot to standard output. It listens to standard input for commands, such as take a shot, set the viewport, or terminate the program. I compiled the Java program as an executable JAR file and placed in the AIR application root folder.

In order to capture the output of the Java program all you have to do is to register a listener on the NativeProcess instance for the standard output events. When you want to send commands you write bytes to the standardInput property of the same object. Here is a snippet of code, for the complete code have a look at the ScreenShotService class from the AIR application.

   1: private var nativeProcess:NativeProcess;
   2: private var npInfo:NativeProcessStartupInfo;
   3: //setting the arguments for starting the Java program
   4: var arg:Vector.<String> = new Vector.<String>;
   5: arg.push("-jar");
   6: arg.push(File.applicationDirectory.resolvePath("screenshot.jar").nativePath);
   7: arg.push("130");
   8: arg.push("100");
   9:
  10: npInfo = new NativeProcessStartupInfo();
  11: //setting the path to the native process
  12: npInfo.executable = new File("/Library/Java/Home/bin/java");
  13: npInfo.arguments = arg;
  14:
  15: nativeProcess = new NativeProcess();
  16: nativeProcess.addEventListener(ProgressEvent.STANDARD_OUTPUT_DATA, onStandardOutputData);
  17: //start the process
  18: nativeProcess.start(npInfo);
  19:
  20: /**
  21:  * Read the data from the standard ouput.
  22:  * Before reading a png, first you have to read the length of the image
  23:  */
  24: private function onStandardOutputData(e:ProgressEvent):void {
  25:     //reading the available bytes from the standard output buffer of the process
  26:     nativeProcess.standardOutput.readBytes(_processBuffer, _processBuffer.length, nativeProcess.standardOutput.bytesAvailable);
  27:     ...
  28: }
  29:
  30: //sending take command to the Java process
  31: nativeProcess.standardInput.writeMultiByte("take\n", "utf-8");

This is the relevant Java code (you can find the complete code inside the source folder of the application, ScreenShot.java):

   1: /**
   2:  * @param width of the screen capture
   3:  * @param height of the screen capture
   4:  * @param args
   5:  */
   6: public static void main(String[] args) {
   7:      if (args.length == 2) {
   8:          width = Integer.parseInt(args[0]);
   9:          height = Integer.parseInt(args[1]);
  10:      }
  11:
  12:     ScreenShot s = new ScreenShot();
  13:     BufferedReader in = new BufferedReader(new InputStreamReader(System.in));
  14:     String text = "";
  15:     String[] tokens;
  16:
  17:     while (true) {
  18:         try {
  19:             text = in.readLine();
  20:             if (text.equals("take")) {
  21:                 s.capturePortion(x, y, width, height);
  22:             } else if (text.equals("terminate")) {
  23:                 return;
  24:             } else if (text.length() > 0) {
  25:                 tokens = text.split("\\|");
  26:                 if (tokens.length < 4)
  27:                     continue;
  28:                 x = Integer.parseInt(tokens[0]);
  29:                 y = Integer.parseInt(tokens[1]);
  30:                 width = Integer.parseInt(tokens[2]);
  31:                 height = Integer.parseInt(tokens[3]);
  32:             }
  33:         } catch (IOException e) {
  34:             System.err.println("Exception while reading the input. " + e);
  35:         }
  36:     }
  37: }
  38:
  39: /**
  40:  * Capture a portion of the screen
  41:  */
  42: public void capturePortion(int x, int y, int w, int h) {
  43:     try {
  44:         if (robot == null)
  45:             robot = new Robot();
  46:         BufferedImage img = robot.createScreenCapture(new Rectangle(x, y, w, h));
  47:         ByteArrayOutputStream output = new ByteArrayOutputStream();
  48:         ImageIO.write(img, imageType, output);
  49:
  50:         DataOutputStream dataOutputStream = new DataOutputStream(System.out);
  51:         //output the buffer size
  52:         dataOutputStream.writeInt(output.size());
  53:         //output the buffer
  54:         dataOutputStream.write(output.toByteArray());
  55:         dataOutputStream.flush();
  56:
  57:         output.close();
  58:     } catch (AWTException e) {
  59:         System.err.println("Exception while capturing screen. " + e);
  60:     } catch (IOException e) {
  61:         System.err.println("Exception while writting the image bytes. " + e);
  62:     }
  63: }

I am by no means a designer. Still, I think I managed to get a decent look of the main application window using Adobe Illustrator and Flash Catalyst. I created the design in Illustrator, and then using Flash Catalyst I transformed the graphics into a Flex application. And finally using Flash Builder 4 I added the logic.

Source code and native installers

You can download the Flex project from here, Mac installer from here, and Windows executable from here. This program requires Java 5 or newer and the Adobe AIR 2 runtime.

Things to know when working with Native Processes in AIR

In order to enable this feature you need to add the extendedDesktop profile to the application descriptor file. Add this tag as a child of the application tag:

   1: <supportedProfiles>extendedDesktop</supportedProfiles>

When using this feature you can’t package your application as an AIR file for distribution. You have to use the native installer. The easiest way to do this is to export for release from Flash Builder (you get the AIR file you normally use to distribute your application). And then you use adt at the command line to create the native installer. If you want a Mac installer you do it on a Mac, if you want a Windows installer you have to do it on a Windows. The command looks like this:

   1: adt -package -target native myApp.exe myApp.air

More on how to create native installers for AIR applications here (make sure you use the adt from AIR 2 and not one from an older version).

If you see an error like in the picture below when you install an application using the generated native installer, you should create a file named .airappinstall.log in your home folder. This log file can tell you what was wrong. In my case the error was “failed while validating native package: Error: Missing digested package file: .DS_Store starting cleanup of temporary files” (I fixed the problem by deleting the .DS_Store file from the source folder).

mg_2

Finally, you can check at runtime if the application has extended desktop capabilities by using this:

   1: if (NativeProcess.isSupported)
   2:     //extended desktop profile is available
   3: else
   4:     //extended desktop profile is not available

What’s next?

If you haven’t already, download the Adobe AIR 2 runtime and SDK and play with the new features. You can find a nice article about the new features from AIR 2 on Christian Cantrell’s blog.

I already have another idea: what about an AIR application that does screen sharing? Keep an eye out I might be able to pull it off!

PS. Many thanks to my friends Chicu and Raul from the Romanian AIR team for their help.

Later Update: My friend Benjamin Dobler created a nice screen recording application with AIR 2 (it captures the sound as well). Although for now the source code is not available, I still think it is worth having a look.

November 30, 2009 | Filed Under AIR, Flex, Tutorials, Video | 6 Comments 

Memory profiler for AIR apps created with HTML/CSS/JS

If you create AIR applications using HTML/CSS/JavaScript then you should have a look at the memory profiler feature from Aptana Studio for AIR 2. Here is a screenshot of the memory profiler:

air_profiler

You can see a screencast over here and you can download Aptana Studio from here and try this feature for yourself.

November 18, 2009 | Filed Under AIR | 2 Comments 

Flash Player 10.1 and AIR 2 first public betas

We just released the first public betas for the two client runtimes: Flash Player 10.1 and Adobe AIR 2. You can grab them from here and here.

The cool thing about this release is that there are versions available for all three operating systems Win, Mac OS, and Linux (openSUSE, Fedora, and Ubuntu) right from the beginning.

fp1 air2

For now Flash Player 10.1 is available only for x86-based computers/netbooks. Later on we will have other releases with support for mobile.

Here you can see public demos and interviews for Flash Player 10.1. You can learn more about features like hardware video decoding, graphics acceleration, instance management, multi-touch support, or microphone access.

You can install sample applications for AIR 2 from here. Here is a list with the new AIR 2 features:

You can read more about this here and here.

If you have feedback, please don’t be shy!

November 17, 2009 | Filed Under AIR, Flash Player | 12 Comments 

PHP and Flex Webinars

Last week I visited Zend headquarters, and I had an interesting talk over there. One effect of this meeting is this: we will start to do webinars together with Zend.

If you want to find more about Zend Studio and other products related to PHP from Zend, or learn more about the integration between the Flash Platform and PHP (Flash Catalyst, Flash Builder, Flex framework) you shouldn’t miss this opportunity. I know that webinars don’t offer the same experience as in-person events. On the other hand, you can attend them from the comfort of your own home, there is no traveling involved and no need to convince your boss to let you attend the event.

a2a1

We haven’t set the first event date yet, but it should be in the first week of December, and probably it will be in the evening (Central European Time).

Keep an eye on my blog for the exact date and time.

November 9, 2009 | Filed Under AIR, Conferences, Flash Builder, Flash Catalyst, Flex, PHP | 1 Comment 

AIR 2 Beta notification sign-up

If you want to be among the first to test the public beta of AIR 2.0, all you have to do is to sign up over here.

In case you don’t know what new features are planned, here is a short list:

November 3, 2009 | Filed Under AIR | 1 Comment 

Next Page →