Author Archive: dkoestle

MAX: Developing iOS Applications with Flash Builder and Adobe AIR

I’m giving lab sessions at Adobe MAX 2011 on how to develop iOS applications using Flash Builder and Adobe AIR. I’ve uploaded the lab material that all the attendees receive, as well as the PowerPoint slides. I encourage those of you who got wait-listed to download it, as well as readers of my blog who’d like to learn about:

  • Passing data between Flex views
  • Accessing the iPad/iPod/iPhone’s native camera with CameraUI
  • Using StageWebView for fast, native browsing
  • Deploying and packaging IPAs

The lab material contains:

  • The slides I use during the session
  • The lab workbook, provided to every attendee (a step-by-step tutorial)
  • The sample code

You can download it here: L3805_Koestler_Projects and Sample Code.

What can I do with AIR Native Extensions?

Adobe AIR 3.0 introduces an exciting new feature: AIR Native Extensions. This is an architectural enhancement that lets you expand the capabilities of your AIR applications. By using native extensions, you can: access native features of devices; perform multi-threaded operations; and offload hard tasks to highly optimized, native libraries.

Native extensions are used by creating .ANE files, which combine ActionScript 3 code with native code, such as C++, Java, and Objective-C. You then package the native extension into your applications, and access the features as you would any other ActionScript 3 API.

Adobe has created some sample native extensions to get you started:

I’ve worked on two native extension resources that will soon be available via my blog:

  • A notification native extension, for dispatching native notifications on Android and iOS devices.
  • A complete tutorial on creating your own native extension from the ground up.

You can get started today by downloading the Adobe AIR 3.0 Release Candidate from Adobe Labs and referring to the above samples. You’ll have to compile and package your applications using the command line tool adt. Once builds of Flash Builder 4.6 are available, however, you’ll be able to create apps that use native extensions without using command line tools.

Check back soon to learn about getting access to Flash Builder 4.6, to download the notification native extension sample, and to read my tutorial on creating your own.

Additional Resources

Using the Photoshop Touch SDK; Creating a Project


Introduction

I wrote an article that will soon be up on the Adobe Developer Connection: “Controlling Photoshop with Flex and AIR using the Photoshop Touch SDK.” It guides you through using APIs I wrote with the help of my colleague Renaun Erickson.

The article will contain the following:

  • Setup: Creating a Project
  • Code: Connecting to Photoshop
  • Code: Sending Commands to Photoshop (creating a new document)
  • Code: Managing Subscriptions and Color Change Events
  • Code: Sending Custom Messages to Photoshop

I’m quite eager to share this information and teach developers about connecting their Flash, Flex, and AIR apps to Photoshop CS 5. Though my article isn’t posted yet, today I’m going to share the first section, which will show you how to link to the required libraries in a Flex mobile project.

Update 6/16/2011: The full ADC article is now live.


Requirements

Software

  • Photoshop CS 5 12.0.4 or later (update CS 5 from within Photoshop)
  • Flash Builder 4.5 (or an IDE of your choice) with the Flex 4.5 SDK

Libraries


Step 1: Create a new Project in Flash Builder

The first step is to create a new Flex mobile project. Although we’re using Flex, the Flash runtime runs on a variety of platforms and devices, so you could just as easily create an AS3 or AIR project. For this article, though, we’ll focus on creating a mobile Flex app.

  1. Open Flash Builder and go to File -> New. Select Flex Mobile Project.
  2. Enter a project name, and choose a location. Click next.
  3. Make sure Google Android is your target platform, and select “View-Based application.”
  4. Name your initial view “LoginView.” It’s here that you’ll write code to handle the connection to Photoshop.
  5. Click finish to complete the new Flex mobile project.


Step 2: Link to the Photoshop Touch SDK library

The Photoshop Touch SDK includes a file called PhotoshopTouchSDK.swc. This is a pre-compiled library that you can integrate into any Flash or Flex applications, which provides APIs to connect to and control Photoshop. This part of the library is open source, and you are free to modify and learn from the code (in accordance with the accompanying EULA and/or license agreement).

When you downloaded and extracted the Photoshop Touch SDK from the Adobe site (http://www.adobe.com/devnet/photoshop.html), it will have created the PhotoshopTouchSDK.swc file in the following relative location:

(some directory)\samples\air\photoshoptouchsdk\bin\PhotoshopTouchSDK.swc

  1. Locate the PhotoshopTouchSDK.swc file in the extracted files.
  2. Copy PhotoshopTouchSDK.swc and paste it in the “libs” folder inside your project directory. You can do this from within Flash Builder, or using Explorer/Finder/bash/etc.


Step 3: Link to the other required libraries

The file (some directory)\samples\air\photoshoptouchsdk\README.txt will indicate the complete list of libraries that are necessary to use the APIs. At the time of this writing, there are three additional libraries you have to include:

  • as3corelib (https://github.com/mikechambers/as3corelib)
  • as3crypto (https://code.google.com/p/as3crypto/)
  • StructuredLogTestingSDK (for logging) (https://code.google.com/p/structuredlogtesting/)

Obtaining these libraries is relatively straight-forward. Follow the included links (or use Google). At the time of this writing, you can take the following steps on the libraries’ respective sites:

  • Click the grey “Downloads” button for as3corelib and obtain “as3corelib-.93.zip.” Extract this and open “lib,” and you’ll see the as3corelib.swc file.
  • For as3crypto, click the “Downloads” link and obtain “as3crypto.swc.”
  • For StructuredLogTestingSDK, click the “Downloads” link and get “StructuredLogTestingSDK-1.3.swc.”

Take these three SWCs and drop them into the “libs” directory in your project, as you did with the PhotoshopTouchSDK SWC.

Your project should link to these four libraries

Your project should link to these four libraries


Conclusion

At this point your project is configured, and you can begin using the Photoshop Touch SDK for AS3. Refer to the ASDocs that are included in the SDK, and check back soon for a link to the full ADC article.

Update 6/16/2011: The full ADC article is now live. Read that article to learn more about using the Photoshop Touch SDK.

Want to create Photoshop apps with AIR, Flash, and AS3?

Today Adobe announced the upcoming release of Photoshop CS 5.5, including API support for iOS and Android. This support includes the Photoshop Touch SDK for AS3, which I created with the help of Renaun Erickson. The Touch SDK allows you to interface directly with Photoshop from your Flash and AIR apps on the web, desktop, Android, or iOS devices. This should be particularly exciting to application developers who are keen to work on apps targeting creative professionals.

The applications that will be created are surely numerous, and the Adobe engineers will likely see the community create applications we couldn’t have imagined. To get an idea of what Adobe’s done with it so far, check out:

  • Adobe Color Lava: Allows you to mix colors on the iPad, and send them to Photoshop
  • Adobe Eazel: Create paintings with your fingers, and send them directly to Photoshop for compositing, tweaking, etc.
  • Adobe Nav: Control Photoshop tools using the iPad, including zoom and file control

You can learn more about these applications on the Photoshop.com Blog, and here’s a video on YouTube demonstrating it.

All those above apps are written in Java or Objective C; the Photoshop Touch SDK works great in native code, but I didn’t want Flash and AIR developers to be left out.

Thus, with the help of my colleague Renaun Erickson, I wrote the Photoshop Touch SDK for AS3, which allows you to drop a SWC into your Flash or AIR apps and interface directly with Photoshop. The SDK is public starting today, but you won’t be able to connect to Photoshop until you get a build of CS 5.5:

  1. Visit the Adobe Photoshop Developer Center to learn about the Photoshop Touch SDK.
  2. If you’re interested in participating in the community, join the Photoshop 12.1 Developer’s Prerelease Program
  3. Download the entire Photoshop Touch SDK. The AS3 API is listed in the docs as “Photoshop Touch SDK (AIR).” Click that, read the API’s documentation, and start coding!

You can also wait until Photoshop CS 5.5 is released, if you don’t want to join the prerelease program.

In the coming blog posts, I’ll give you tutorials and videos on how to use the PhotoshopConnection, MessageDispatcher, and other parts of the Photoshop Touch SDK for AS3 to control Photoshop CS 5.5.

If you do participate in the prerelease, be sure to use the forums and post suggestions and comments, and I’ll respond. There are many areas I want to improve and features I want to add, but developer feedback is the best way to know what I should prioritize.

Update: Here’s a video showing the three Photoshop apps more clearly

Update: As Tom Ruark points out below, the remote connections update for Photoshop CS 5 is free. Run the updater from within Photoshop to get 12.0.4, and you should have the “Edit/Remote Connections” option.

Update 6/16/2011: The Adobe Developer Connection has now published a full article I did on the Photoshop Touch SDK: check it out here. It will guide you through setting up a project, connecting to Photoshop, sending and receiving data, managing subscriptions, and some additional topics.

QuikStock 0.6 and source code released — Google Finance AIR app

Six months ago I wrote an application called QuikStock, which lets you view your Google Finance porfolios, securities, and some various performance information. It can update in real time, and lets you have your portfolios open in separate windows. I created it to test out AIR 2 and some features of the Flex 4 framework, but I ended up developing it into a lightweight, standalone application, which I’ve made freely available online. Today I’ve released version 0.6 of QuikStock. It’s still in beta, but my other applications keep me from actively working on it.

QuikStock demonstration.

You can check out QuikStock 0.6 here: http://www.quikstock.com.

Today I also made the source code freely available. Feel free to download it, modify it, etc. Just pay attention to the source code license agreement in all of the source files.

Dealing with AS3’s ArgumentError: Error #2096 while pushing an innocuous URLRequestHeader

I’m working on a Flex mobile application that has me parsing SIDs and Auth values from Google’s client login. You may find yourself in this situation if you need to make requests to Google’s various APIs. In my case, I’m using Google Reader, and it requires that I pass in an Authorization header with all of my URLRequests, the value of which needs to be taken from Google’s client login response. This seemed like an easy task, but I kept hitting an annoying error, which turned out to be a red herring:

ArgumentError: Error #2096: The HTTP request header GoogleLogin auth=(long string)
cannot be set via ActionScript.
at flash.net::URLStream/load()
at flash.net::URLLoader/load()

This error strongly indicates that I was doing something that transgresses AIR’s security sandbox, which is simply not the case.

It turns out that I had grabbed the value of auth from Google’s response, but I had failed to notice that Google was putting a newline character on the end of the auth string. When I fixed this by stripping the newline and putting the modified String into the URLRequestHeader, the runtime had no problem with it.

Thus, if you have an error that sounds like what I’ve described, make sure you’re not trying to set the URLRequestHeader with a value that has a newline or similar character somewhere in it. You can strip it out any number of ways, including String‘s replace() function.

Open-source Flex “Hero” app: SurveyApe

If you’re interested in creating a complex Android application using Flex, you may have questions about more advanced topics. I wrote a fully featured mobile application called SurveyApe using Flex “Hero,” and I’ve recently released the code, which you can use to answer these questions. You may find the code useful to learn about the Model View Controller architecture, asynchronous Database Access Object design patterns, how to code Flex to handle orientation changes, and a clean way to prevent memory leaks in asynchronous function calls. You can also modify the application as you see fit (but be sure to look at the open source license first).

Here’s a video showing SurveyApe:

You can get the SurveyApe APK and code from Adobe Labs: http://labs.adobe.com/technologies/flexsdk_hero/samples/the Flex Dev. Center: http://www.adobe.com/devnet/flex/samples/survey-ape-application.html.

If you’re new to Flash Builder and Flex mobile development, you may want to check out my Flex “Hero” and Flash Builder “Burrito” workflow guide. It’ll help you get started with writing, deploying, and debugging applications on Android devices.

I frequently post about mobile development on Twitter: @antiChipotle.

Code, Package, and Debug Flex mobile apps with Flash Builder “Burrito”

Two weeks ago, Adobe released a preview version of Flash Builder. Codenamed Flash Builder “Burrito,” it’s available on Adobe Labs as a 60-day trial. This version contains many features and enhancements that let you easily deploy applications to Android phones and tablets. You can use the included version of the Flex SDK to create Flex apps for phones like the Droid 2, Droid X, HTC Evo, etc., or code in pure ActionScript 3, and have total control over the Flash app that you choose to deploy. Using Flash Builder “Burrito,” you can code, package APKs, install your applications over USB, and perform on-device debugging using WiFi.

To get users started with Flash Builder “Burrito,” I wrote a 25-page document that was handed out at the Adobe MAX Device Lab. I’m making it available here as a PDF. It serves as a tutorial and reference to walk you through the creation, deployment, and debugging of Flex mobile applications, and has resources for more advanced topics. This workflow guide includes:

  • Creating a new Mobile Project
  • Importing an Existing Mobile Project
  • Adding Code
  • Building
  • Running and Debugging on the Desktop and on a Device
  • Your First Flex “Hero” App: “Hello, World!”
  • Packaging for Release
  • Installing the Android SDK
  • Appendix:
  • Conditional Compilation
  • Managing SDKs
  • Additional Resources


This document can get you started creating multiscreen Flex and AS3 applications, and will show you how to use Flash Builder “Burrito” to deploy and debug your apps on Android devices.

Download it here: Flash Builder and Flex Workflows for Multiscreen App Development [PDF]
Adobe Flash Builder “Burrito” is available as a 60-day free trial here.

Learn to use SQLite in real-world Flex mobile apps

Last week, Adobe announced the public betas of Flex “Hero” and Flash Builder “Burrito.” You can use these tools to begin creating your own mobile applications that run Flash, AIR, and Flex content, and I recommend you check them out here and here. If you’re looking for the next step in getting started with a real-world Flex app, however, you may be interested in the following:

I created an open-source application called SurveyApe, which should help you get started in the process of creating robust, real-world Flex mobile applications. It’s available on Adobe Labs:

http://labs.adobe.com/technologies/flexsdk_hero/samples/
Update: New URL: http://www.adobe.com/devnet/flex/samples/survey-ape-application.html 05/16/2011


SurveyApe utilizes SQLite, the database framework that’s available in Adobe AIR. If you’re new to web or application development, SQLite is a relational database that allows you to store and access large amounts of data using fast, structured queries. If your mobile applications collect medium to large amounts of user data, or if they pull data sets from the Internet, chances are you’re going to want to store in in a database. The use-cases where you want to use a relational database over your own binary file format are numerous. You’ll find databases useful for games, data-driven applications, Twitter and Facebook-style applications that pull down status information, etc. You can use the design patterns I’ve created in SurveyApe to help create these sorts of applications in Flex “Hero” and AIR for Android.

Ostensibly, SurveyApe conducts a survey consisting of a predetermined set of questions, allowing multiple users to use your mobile device and answer the questions that are provided in a sample database. The survey-giver can then review statistics and summary information about the responses, including question breakdowns and some simple demographic data. It’s really useful, however, to demonstrate how to create your own asynchronous database access objects, and the code includes some best-practices for preventing memory leaks and ensuring sane access patterns.

When you first import SurveyApe into Flash Builder (or your IDE of choice), you should open the src/database/Database.as file. This code contains all the SQL that the program can execute, as well as access methods that are accessible from every instance of the Database class (you’ll only want one instance per database). You’ll see the asynchronous pattern I recommend using when you view the various methods in this class.

For example:

/**
 * Gets the list of surveys
 *
 * @param args Expects element 0 to be a DatabaseResponder.
 **/
public function getSurveys(args:Array):void
{
	if ( args[0] is DatabaseResponder )
	{
		var sqlWrapper:SQLWrapper = this.sqlStatementFactory.newInstance(args[0], GET_SURVEYS);
		sqlWrapper.statement.execute();
	}
}

 

The sqlStatementFactory is an instance of SQLStatementFactory…a class I created to ensure that I have one function responsible for generating event handlers, and–in so doing–I can be assured that every call to the database results in event handlers that are garbage collected. (If you have event handlers registered on an object and you set the object to null, the event handlers will remain in memory, creating a leak.)

Note that I’m passing parameters via weak typing in an Array. This was fast and easy to set up, but you may want to create your own DatabaseArgs Object, which will allow you to access arguments using key value pairs, which is a more robust, safer way to pass arguments.

SurveyApe is too large to cover everything in one blog post, so stay tuned to learn about some more Flex “Hero” and AIR features I utilize…including how to take images and video using using the native CameraUI.

Download survey ape 0.4
Update: Download Survey Ape 0.4

Adobe Flex on Android

Adobe AIR for Android has been around for a few months now (available in this prerelease program), but using it requires you to either code in pure ActionScript 3, pick up a third-party framework, or use a tool such as Flash Pro to create your own components. One of the most popular SDKs that simplifies this process has been Adobe Flex; on the desktop and the web, this is a powerful, free, open-source framework that provides hundreds of components and tools. With the next version of Flex, it’ll be optimized and available for mobile devices.

I’m developing an application using the next version of Flex, known as “Hero,” and in the process I discovered that I need to access the device’s camera. To test Flex’s interoperability with AIR’s camera APIs, I decided to create a simple Flex app that pulls video and still photos from my Nexus One’s camera, loads them in a new screen (called a View), and displays the photo when the user physically shakes the device. This makes for a decent (if simple) demo of what Flex Hero can do on mobile devices; I recorded this running on my Nexus One and did a quick screencast of the code in Flash Builder:





You can learn more about Flex on mobile here: http://labs.adobe.com/technologies/flex/mobile/

I’ll probably put this project and code up on my blog in the near future, and stay tuned for more videos of my Flex “Hero” apps running on mobile devices.