WebVisions Hands on Mobile Android Code Camp!

If you are in Portland, OR on May 25-27, you must come to the Oregon Convention Center for the WebVisions Event. WebVisions is a nationally recognized conference that explores the future of Web design, technology and business strategy.

I have been invited to give a hands on development course that will lead people through the process of building a mobile application that deploys to the Android and BBos platforms.

Title: Hands-on AIR 4 Android Development

Desc: This hands-on Boot Camp is for developers to build an applications targeting the Google Android O/S.  Adobe Sr. Technical Evangelist Duane Nickull will prepare attendees ahead of time to complete this course using their own laptops.  Attendees will learn the basics of AIR 4 Android/BlackBerry O/S such as:    

- basic application architecture
- creating a new application project and how to use the emulator    
- invoking services and binding result formats including some best practices    
- switching between multiple views    
- invoking system actions via intents    
- touch screen gesture control         
- packaging the output as *.APKs to publish to the marketplace

Due to the short time of this session, all attendees will be given source code samples and resources to take away for self paced learning.

Animating QNX components in PlayBook apps

In this post I want to show you how you can use animations/transitions for QNX components to create a better user experience. User experience designers use transitions when they want to highlight or focus user attention to a specific part of the application.

For example, when you add a new component to the screen as a result of user interaction you can do it in two ways:

  • just add the new component to the display
  • create a transition or animation that gradually introduces the new component to the display

I think it is easiest to understand the subtle difference between the two approaches by seeing this screencast:

In my application I used the tweener library for animating the container that holds the list. This ActionScript library is one of the most used libraries out there for this task. You can grab it from here.

Once you get the SWC file, you have to add it to your ActionScript mobile project. The easiest way, especially if you plan to use more libraries, is to add a folder to the ActionScript build path and configure Flash Builder so that every SWC file you drop in this folder will be added to the project.

The steps are:

  • Create a folder in your project. I created a folder called libs for my project.
  • Copy the tweener.swc file into this folder
  • Open the project properties page (right-click the project name and select Properties) and select the ActionScript build path. Then click the Add SWC Folder button and select the folder you created earlier. Click the OK button and you are good to go.

How do you use this library? Actually it is pretty simple. There is a static method on the Tweener class called addTween(). You use this method to specify the display object you want to animate, the properties you want to animate (could be the x, y, size, etc), and the animation duration. You can also specify a number of functions to be called for example when the animation is completed or for each step of the animation.

Here is the code for animating the list in the screen:

// rightDock is the container that holds the list
// it is docked to the right-side of the screen
Tweener.addTween(rightDock, {size : 200, time : 1, onUpdate: onUpdateTween});

private function onUpdateTween():void {
    myMain.layout();
}

And this is the code for removing the list from the screen:

Tweener.addTween(rightDock, {size : 1, time : 1, onUpdate: onUpdateTween,
    onComplete: onCompleteTween});

private function onCompleteTween():void {
    myMain.removeChild(rightDock);
}

Why do I call myMain.layout() for each step of the animation? This method is executed in order to reposition and redraw the components on the screen so they account for the width change of the rightDock container.

You can download the project source code from here.

Adobe AIR 2.6 SDK now available with updated iOS support!

Adobe is pleased to announce the availability of the Adobe® AIR® 2.6 SDK and AIR® 2.6 desktop runtimes for Windows, Mac and Linux. With AIR 2.6, AIR achieves feature parity for Android and iOS platforms. This new release provides significant improvements for iOS app development as well as updates for Android and desktop app development. You may recall the AIR 2.6 for Android runtime was released on February 25, 2011, to the Android Market to support the Content Viewer for Android and announcement of Adobe® Digital Publishing Suite , and new Android tablets running on Android 3.0. Currently over 1,900 AIR applications for Android are available in the Android Market.

“Adobe AIR 2.6 enables me to develop once and publish across multiple platforms. There are slight tweaks required for each platform (Android vs iOS) but we’re talking about a few minutes not weeks. The majority of the optimizations revolve around screen sizes which would be an issue regardless of the development tool. If I were targeting Android and iOS natively vs Adobe AIR I would expect my costs to be at least 80% higher; and much closer to 100 – 150% higher should maintenance and updates be required for each platform.”

-Charlie Schulze, President and co-founder, Woven Interactive, LLC

Video: Watch Charlie Schulze’s demo of “Comb Over Charlie” a multiscreen app (Android and iOS smartphones, tablets and Windows laptop) developed using AIR.

NEW FEATURES

AIR for iOS

  • Updated AIR for iOS support with improved performance. Developers can take advantage of new features in iOS 4 like multitasking, Retina display for higher screen resolutions, and front and back camera support. Developers can now build application that capture audio with the microphone and take advantage of the same graphics hardware method used in AIR for Android using OpenGL ES2 for fast graphics.
  • Packager for iPhone (PFI) is now replaced with and the functionality integrated with AIR Developer Tool (ADT) a comand line tool for compiling application in the AIR SDK. ADT can now be used to package AIR files, native desktop installers, AIR applications for Android and iOS.

“I’m now getting 60 FPS on an iPhone 3GS, it’s smoother than
Packager for iPhone too!

-Kevin Newman, Senior Developer, adcSTUDIO

“My project uses things like vector graphics, blend modes, and filters. In the past, many effects needed to be removed or altered for iOS to achieve decent performance. This gargantuan improvement means that I can now use the same project to target both iOS and Android. It’s likely to save me many hours of time previously spent on optimization.”

-Josh Tynjala, Founder, Bowler Hat Games

Video: Learn more about what’s new in AIR 2.6 for iOS in this short video with Ryan Stewart, Senior Technical Evangelist.

AIR for Android

  • Submit apps to be included in the Amazon Appstore for Android when the store launches.  Companies now have an additional distribution option with one of the largest online shopping destinations on the web.

Learn more in Christian Cantrell’s blog post “AIR 2.6 Applications and the Amazon Appstore for Android”.

  • USB debugging was added as an additional debugging option to WiFi.

“I was blown away with how much AIR has grown in API support for Android and iOS as well as the improvements in speed. This is just amazing.”

-Boz Bundalo, Creative Director / Chief Technology Officer, Republic Project

Learn more about AIR 2.6 features for mobile and desktop please read Scott Castle’s article “What’s new in AIR 2.6″.

LINKS and RESOURCES

Video: Learn more about the business benefits of deploying Adobe AIR apps for a wide range of devices such as smartphones, tablets, TVs and desktop with Ryan Stewart.

Amazon Appstore Developer Portal

Downloads

AIR for TV application documentation updates

Updates are now available to Developing AIR applications for television devices in Building Adobe AIR Applications on Adobe.com.

These updates include:

  • Design considerations. Remember all the entries on this blog that talked about various design considerations for AIR for TV apps? Now those tips plus others are available in the online documentation.
  • How to use Adobe Flash Professional CS5 and Adobe Flash Builder 4.5 to develop your AIR for TV application. This information includes how to build an application that uses an ActionScript extension.
  • How to use ADT to package an AIR for TV application that uses an ActionScript extension.
  • How to use ADL to test an AIR for TV application that uses an ActionScript extension.
  • General information on how to remotely debug an AIR for TV application running on the device. However, detailed steps depend on the device.

Beta ActionScript 3.0 Reference documentation available for Flash Player 10.3 Beta

The prerelease ActionScript 3.0 Reference for Flash Player 10.3 (“Wasabi”) Beta is now available. You can find this documentation here.

The Wasabi project represents the convergence of Flash Player and AIR streams into a single quarterly update.

Highlights include the following new features and classes:

Acoustic echo cancellation (Flash Player)
Exclude unwanted echo artifacts from microphone audio captures.

Media measurement (Flash Player)
Implement media usage analysis on the Flash Player platform rather than as a player plugin. Collect stats independently of the video player being used.

HTMLLoader updates (AIR)
The HTMLLoader class now dispatches locationChanging and locationChange events with a LocationChangeEvent object as the payload.

Important! To see the beta classes, remember to set your Runtimes filter to include Flash Player 10.3 and earlier.

Please use the Comments area at the bottom of each page to give us feedback on this beta documentation.

JavaScript QuadTree Implementation

Last week I was playing around with a little EaselJS experiment which required me to do collision detection against all items on the screen. This worked fine with a small number of items, but of course, the more items I added, the slower everything became.

I knew that I needed to optimize the code, and pare down the number of collision checks. I have done this before with a grid (even held a contest for it) and was going to port that AS3 code to JavaScript. However, Ralph Hauwert suggested I look at implemented a QuadTree, which should be more efficient.

A QuadTree is a data structure in which the coordinate space is broken up into regions / nodes that contain items. If too many items are added into a node, then that node is divided into 4 sub-nodes. This can provide very fast lookup of items based on the coordinates and coordinates and dimensions.

There are a couple of implementations in both JavaScript and ActionScript (Michael Baczynski has a nice AS3 implementation), but I decided that I wanted to learn a bit more and implement one from scratch.

The result if a QuadTree implemented in JavaScript that works with both 2D coordinates (x,y) and well as regions / items with dimensions.

I’ve released all of the code under an MIT License, and you can download it from my GitHub repository.

Here is an example of the tree in action:

 

This example shows how to use the QuadTree to pare down the number of items that need to be tested for collision detection.

I have created a couple of other simple examples:

The basic code is pretty simple. Here is an example showing using the QuadTree to store and retrieve points:

var pointQuad = true;
var bounds = {
	x:0,
	y:0,
	width:canvas.width,
	height:canvas.height
}
 
var quad = new QuadTree(bounds, pointQuad);
 
//insert a random point
quad.insert({x:12, y:25});
 
var items = quad.retrieve({x:11, y:20});

And here is a simple example showing using the QuadTree to store and retrieve items with dimensions / bounds:

var bounds = {
	x:0,
	y:0,
	width:canvas.width,
	height:canvas.height
}
var quad = new QuadTree(bounds);
 
//insert a random point
quad.insert({
	x:12,
	y:25,
	height:10,
	width:25
});
 
var items = quad.retrieve({x:11, y:20, height:10, width:20});

Again, you can download all of the code from my GitHub Repository. It seems fairly solid at this point, but if you find any issues, or have any suggestions either fork the project, and submit the changes to me, or post them in the comments.

There is still a lot of room for optimization and improvement in the implementation, such as pre-allocating the nodes, but Ill leave that for another day.

Btw, big thanks to Ralph Hauwert for pointing me in the right direction for my project.

Post any questions or suggestions in the comments.

Slides and Assets from Adobe Refresh

Adobe Refresh 2011

Thanks to everyone who came out to Adobe Refresh. It was a fantastic time for me and I got to talk to a bunch of you who had some very good insights into what you want to see from us going forward. I also got to see some great demos, so thanks for showing off your stuff. For those who asked, I’ve posted the slides and the samples for my talk. You can grab the slides from SlideShare: Flash Builder and Flex Future – Building Multiscreen Applications. I’ve also posted the two demos I used.

  • GeonamesBrowser – A demo of the Flex “Hero” components/paradigms that uses the GPS on the phone to grab a list of area landmarks from Geonames.
  • CollaborationMobile – A demo showing off LiveCycle Collaboration Services on a mobile device.