Upcoming E-Seminar Series: App in a Week

With CS5 now available the EMEA Evangelism team have been hard at work prepping for our upcoming tour and the Online Developer Week. The course of events will fall between June 7th – 10th covering everything from design in Photoshop CS5 to development, and even deployment of your applications using the Flash Platform suite of tools.

The tools covered will include Flash Builder, Flash Professional, Flash Catalyst, Flex 4 and the Flash Player 10.1 and AIR 2 runtimes. In my own session we’ll also be covering Device Central and some asset optimization guidelines for targeting mobile phones.

We’ll also look at P2P with Flash Player 10.1 as well as Livecycle, PHP and Java integration on the backend.

Schedule:

June 7th – 12:00 – 13:00 GMT Erase the Designer to Developer gap: Adding interactions to your design with Serge Jespers
June 7th – 15:00 – 16:00 GMT Connecting your design to PHP services with Mihai Corlan
June 8th – 12:00 – 13:00 GMT Connecting a web application to a J2EE backend using Flash Builder 4 with Michael Chaize
June 8th – 15:00 – 16:00 GMT Working with Flash CS5 components in your Flash Builder 4 project with Mike Jones
June 9th – 12:00 – 13:00 GMT Going multi-user with P2P in Flash Player 10.1 with Tom Krcha
June 9th – 15:00 – 16:00 GMT Developing multi-user applications with LiveCycle services with Tom Krcha
June 10th – 12:00 – 13:00 GMT Bringing web Applications to the desktop with AIR 2.0 with Piotr Walczyscyn
Jun 10th – 15:00 – 16:00 GMT Code once and run on multiple mobile devices with Mark Doherty

We’ve been busy for the past week building “EVA” to demonstrate all of the above.  I think you’ll be really impressed with it and of course we’ll be providing the code after for you to use in your own applications.

SIGN UP HERE

Flash Brings the Web to Life

We just posted a few new videos to give you an update on mobile apps and the breadth of Flash content on the Web available on exciting new devices, like the upcoming Dell tablet.

Standalone Apps Outside the Browser

With dozens of tablets and new smartphones coming to market over the coming weeks and months, developers want to know how to deploy and monetize their apps across screens without having to rewrite apps for every platform and device – from smartphones, to tablets, netbooks, televisions, and others.

Today, we announced that more than 100 AIR apps, coming out of a limited pre-release program with developers, are available on Apple’s App Store. Created with Flash Pro CS5 and wrapped as native apps (via the Packager for the iPhone, a capability of AIR 2), AIR apps can be distributed to the iPhone and Apple’s tablet today, as well as Android, BlackBerry and other platforms in the coming months. Check out two videos for more details at:

Packager for iPhone Demos from Mark Doherty on Vimeo.

Browsing of Flash Content on New Mobile Devices

At the same time, Adobe and its partners believe in the free flow of content across screens and in enabling consumers to browse the full Web, including over 70% of games and 75% of video that are delivered with Flash. Check out this new video, which features different mobile devices including a sneak peak of one of Dell’s new tablets (5” tablet, not released yet) plus Dell’s 12” smartbook (Latitude Xt2) running a broad variety of Flash content.

We are excited to work with Dell to bring uncompromised Web browsing to its new devices. As previously announced, we’re also working with HP on their new line of tablets that will deliver the full Web with support for Flash Player 10.1.

Adobe AIR – Packager for iPhone OS demos

We’re getting closer and closer to the launch of Flash Professional CS5, our Flash authoring tool ships with our Packager for iPhone preview. With the new tool it’s possible to create Adobe AIR applications based on Flash, and ship those on the Apple AppStore.

As you may have noticed, we have been shipping our own mobile applications for a while now, including Photoshop.com Mobile on Android, iPhone, Windows Mobile, and Acrobat Connect on the iPhone.  In just these few short months we’ve managed over 6 million downloads already, and I’m looking forward to seeing future Adobe products on different form factors.

Of course some developer agencies have already been pushing out their first Flash-based applications using the pre-release packager.  So I thought it would be interesting to have a look at the progress being made, enjoy the “presentation” :-)

Although I’ve focused on the iPhone here, everything that you have seen can run on other platforms with a few tweaks.  That’s the benefit of using Flash and AIR for your mobile and devices content.

Flash Player 10.1 Tablet (NVIDIA Tegra & ARM)

While I was at the Mobile World Congress earlier this year I recorded a quick video of sample tablet hardware running a beta version of Flash Player 10.1.  It has taken a “little” while to arrive on Adobe TV, but in the video I’ll show some popular websites covering video and gaming.

The hardware is a development board sporting the ARM based NVIDIA Tegra Next Generation chipset, which is a dual-core ARM-Cortex A9 device.  Although I didn’t show it here, at the conference we were also running AIR applications beautifully on the hardware.

Our Open Screen Project partners NVIDIA announced that some 30+ tablet computers are expected to ship in 2010 with this chipset.  One of the advantages of having NVIDIA and ARM as Open Screen Project partners is that we can all contribute collectively to Flash Player acceleration for these devices.  So as OEM begin to adopt TEGRA they can rest assured that the Flash engineering is already taken care of.

My favourite so far would have to be the NotionInk Adam, which is an Android based tablet created in India.  The screen apparently has transmissive, transflective, and reflective display modes that will serve the device well in different lighting conditions.

Preview: Flash Player 10.1 on the Palm Pre

Yesterday I spotted a lady here in the UK showing off her Palm Pre to a friend.  So today I recorded a video to take a look at Palm’s WebOS Browser with Flash Player 10.1.  Please note that the engineering build on this device is not up-to-date, but you can certainly get an impression of how great the experience will be.

For the user experience professionals out there, check out the card metaphor for switching between applications; amazing.


Tethering – You’re only renting…

I thought this was an interesting presentation on the problems with Publishing to closed ecosystems. The net of the presentation is a clear demonstration that closed ecosystems result in a rental model for consumers, and a loss of the customer relationship for content providers.

That iPod in your pocket is full of rentals, and if you’re viewing this on an iPhone then forget it; even the iPhone browser is not universal.

Flash Player 10.1 – Camera support with PhoneGap

Some of you will remember my earlier blog posts in August 2009 on the HTC Hero, the first Android device to ship with Flash.  The goal of the Android experiment was to learn about the Android SDK, the development process and discover how Flash was enabled in the context of the browser.

As we edge closer to the release of Flash Player 10.1 in the first half of this year, it seems appropriate to revisit these posts.  In this post you’ll see that there are hidden benefits to using a common runtime across device platforms, some of which are not that obvious.

The result of my week long investigation is that (using the beta version) I can hook up Flash Player 10.1 to the camera; but that’s just the start.  Let’s look at how it’s done…

WebView

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 made available as a UI component for native applications.  So this means that you can create an application in HTML/JScript and manage the user experience through a native shell.

So why is WebView useful?  Let’s look at the relevant classes:

  • 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.

So using a standard WebView I can use the core browser, or if I choose, extend this and replace the chrome and user experience.  If you were reading carefully, inside WebView you will have noticed a method called addJavascriptInterface, and that’s where it gets interesting because this allows you to create a JavaScript front end to a native class.

In effect you can then write anything you want using native APIs, and add that functionality to WebView in the form of JavaScript interfaces.  Wait!  Doesn’t Flash have the ability to speak to JavaScript?

Flash Player – ExternalInterface

This is a long standing ExternalInterface API in Flash Player that enables communication with JavaScript in the browser.  It’s primary purpose is actually to help Flash live alongside HTML, enabling Flash to signal JavaScript and pass messages back and forth.  So in principle, if Flash can communicate with JavaScript and JavaScript with Native code, then we can start adding functionality.

Sounds really simple right?

PhoneGap

The folks at Nitobi have already made a huge head start creating PhoneGap, an open source set of cross-platform Javascript APIs for HTML applications, just some of which are below.  The PhoneGap framework also enables anyone to create their own extensions based on the same principle, and although it’s quirky, the process is relatively simple.

In the git repository the team are also hard at work on functionality like Text-to-speech, Camera and File access for Android.  Remember that this is an open source project, it’s changing just about every day and they need helpers.  What’s really exciting is that PhoneGap workshops, including in person and online events; so I suggest attending!

iPhone Android Blackberry
Geo Location yes yes yes
Vibration yes yes yes
Accelerometer yes yes pending
Sound yes yes yes
Contact Support yes pending yes

Porting PhoneGap

As you have read previously, we are working to bring Flash Player 10.1, which includes the ExternalInterface, to Android in the next few months.  Now, my Nexus One is an Android 2.1 device, and that creates a slight problem because PhoneGap is only compatible with Android 1.6 APIs.

This means that I had to port code and complete some APIs, in fact I’ve completed the Contacts API, updated the Camera, Location and Accelerometer APIs and did a spot of bug fixing get things working.  In total this took about five days, to get setup and familiar with the code, and then writing some code for a few hours here and there.  Using Open Source kit often results in these sticky issues, hint, that’s why Adobe put so much effort into documentation :-)

With the Android SDK it really couldn’t be simpler to perform tests once I got started, really it couldn’t be easier to do live debugging on Windows, Mac and Linux; a great SDK from Google.  Once you get into the flow of debugging, coding and testing it’s all good.

My advice, as always, is to think about functionality that you’d like to add and go for it.  There are lots of docs out there, and alot of helpful code available for hacking something together.

FlashCam

After playing with PhoneGap and testing out my changes/addition, I decided to put the framework to the test and build an application.  The first API test was for the Android Camera, and I’m calling it FlashCam.

With FlashCam I have created a simple stub application that contains a WebView, much like the previous blog post.  This WebView pulls down an HTML page that’s actually on my blog here, and instantiates the native code and applies the javascript interfaces.  So you heard that right, I’m able to extend functionality to a live webpage and not just a static local page.

HTML Integration

Embedded in the example HTML file from PhoneGap is a JavaScript function called show_pic().  It simply wraps up another function inside the phonegap.js that is also referenced in the HTML file.  If this function succeeds then dump_pic() is called, if not then the function fail() is called.

The code under getPicture() is really quite complex and beyond the scope of this post, but you can see it here.  Essentially it calls a native function called takePicture() written in Java, and this launches a new Activity (like a Window) with the camera’s viewfinder surface.

function show_pic(){
//Note: This could be simplified, but it's abstracted for safety
   navigator.camera.getPicture(dump_pic, fail, { quality: 50 });
}

When the photo is taken we call dump_pic() and it will contain the Base64 encoded JPEG image data from the camera.  Then, all we need to do is return this to Flash in a callback and in this case “mySWF”, which is the name of the SWFObject embedded in the HTML file.

function dump_pic(data){
document.getElementById("mySWF").photoBytes(data);
}

In the running SWF file we have a SimpleButton that can call the show_pic() function, but first we need to add a callback which is analogous to an event listener.  In Javascript we call photoBytes(image_data), and once the ExternalInterface receives this event it will call onReceivedPhoto(image_data):

public function fl_MouseClickHandler(event:MouseEvent):void{
  ExternalInterface.addCallback("photoBytes", onReceivedPhoto);
  ExternalInterface.call("show_pic");
}

Here in the onReceivedPhoto function we decode the Base64 encoded image_data, which is just a very large string containing the image.  I’m using the Base64 classes provided here by Jean-Philippe Auclair, and merely getting the ByteArray.  I can then use Loader to take these bytes and produce BitmapData and do a little scaling in the imageLoaded handler before adding it to the stage within the holder_mc.

public function onReceivedPhoto(image_data):void {
  var bytes:ByteArray =  Base64.decode(image_data);
  imageLoader = new Loader();
  imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,  imageLoaded);
  imageLoader.loadBytes(bytes);
}

private function imageLoaded(e:Event):void {

var image:Bitmap = Bitmap(imageLoader.content);
var tmpdata = new BitmapData(320, 260);

var matrix = new Matrix();
matrix.scale( 320 / image.width, 260 / image.height );

tmpdata.draw( image.bitmapData, matrix, null, null, null, true ); // smoothing
image.bitmapData = tmpdata;
holder_mc.visible=true;
holder_mc.addChild(image);
}

Here is FlashCam in action…

So that’s it, it’s really that simple to hook up native code to Flash Player 10.1.  I suspect that this will also be possible on Palm’s WebOS, Symbian and Windows Mobile in time.  I’m also loosely aware of a better bridge to JavaScript in Flash Player 10.1, so this might be a source of further investigation to improve performance for large data sets.

Now it’s your turn, below are the sources that I’ve used from PhoneGap with my own additions.  You can also find the Flash FLA and AS files below, note that you will need at least Flash Professional CS4 to open the FLA.

Downloads

Notes:

  • You cannot keep the SWF file within the stub package, they must be in the remote sandbox.
  • Flash Player security does not allow for localWithTrusted access to local Javascript.
  • Proportional scaling of images is a pain in the ass in Flash, I’d like to hear about any libraries for that.
  • I found CameraForm useful for producing encoded image data for testing; impossible with HTML5

BlocketPC – DeviceDays at Mobile World Congress 2010

The Mobile World Congress is a massive event with some 50,000 attendees from around the world.  Each year there are around 50 Adobe employees from across the organization in attendance, including all the key members of the platform team at Adobe.

This year we’ve managed to delay a few flights and tweak some schedules to create a fantastic line up for the Spanish Mobile and Devices User Group event “DeviceDays”.  Raul, Marcos and myself will be joined by Richard Galvan, Product Manager for Flash Professional, Enrique Duvos who leads Evangelism in EMEA.

I’m also really excited to tell you that some of our Open Screen Project partners, and advertising aggregation providers GreyStripe will attend as guests.  You’ll get a chance to speak with them directly, and additionally GreyStripe will present on ad-funded applications.. really exciting!

This day long event will be  ~70% in Spanish, so a great improvement from last year :-)

Timing/location:

  • Torre Mapfre – Avinguda Litoral, 08005 Barcelona, Spain
  • 09.30am – 5.00pm 19th February
  • Space for 100 attendees

Note: Passing security takes time, arrive 15-30 mins early.

Schedule:

  • 09.30am Welcome intro from Marcos and Raul
  • 10.00am Overview of Adobe’s announcements at Mobile World Congress
  • 10.30am BREAK
  • 11.30am Open Screen Project new and Fund update, demos of funded applications
  • 12.30am Contextual Applications – best practices, optimizations and inspirational demos
  • 14.00pm LUNCH
  • 15.00pm Testing Flash based applications with Device Central CS5
  • 15.30pm Creating iPhone applications with Flash Professional CS5
  • 16.00pm BREAK
  • 16.15pm Creating ad-supported iPhone Applications with GreyStripe
  • 16.45pm Closing remarks from Marcos and Raul

The event website is here, so start registering.

Adobe @ Mobile World Congress 2010: Free Tickets ;-)

“Any Device” , that’s our tag line for this years Mobile World Congress in Barcelona.  Given the huge investments with our Open Screen Project partners in 2009/2010, you can imagine that this will be our most important event in the mobile calendar.

The Mobile World Congress is a chance for OEMs, Chipset Vendors, Carriers, Content Providers and Developers to meet up and decide the future of our ecosystem.  For the past two years that I’ve attended we have gone from 400million devices with Flash, to over 1.2Billion and this year will see a massive step change in our strategy with the launch of Flash Player 10.1.

Adobe CEO Shantanu Narayan will be onsite to talk with our partners, and to discuss key challenges in the mobile and devices ecosystem and how we’re working to solve these issues with our Open Screen Project partnerships.

We’ll be showing Flash Player 10.1 experiences optimized for various devices platforms like Android, Palm and Windows Mobile.  Our booth will be packed with demos of multi-screen contextual experiences, games running across platforms and we’ll be showing off Device Central CS5 too.

With this being such a big event for us, we thought it would be nice for Flash developers to share this event with us.  So if you want to come along on us, and see the whole event for free then send us an email :-)

mwcstaff@adobe.com

For more information and updates then check out our micro-site for the event.