Mark DuBois Weblog

As an alternative to Flash CS5, one might wish to develop applications in HTML, CSS, and JavaScript. Towards that end, I installed PhoneGap on one of my Windows XP virtual environments. PhoneGap is an open source framework which allows one to develop applications in HTML and JavaScript and take advantage of core features. The end result is an actual application package which can run on iPhone or Android devices. Here are some of the steps I followed to get this working in my environment. Your mileage will likely vary. As a starting point, I used the PhoneGap installation instructions (in part). I chose not to take advantage of Ruby and other technologies mentioned on the installation instructions.

• I downloaded and installed the Android SDK and Java Development Kit mentioned in the Flash post below.
• I also downloaded and installed the Eclipse Development environment.
• Once Eclipse was running (I am using Galileo), I downloaded and installed the ADT Plugin for Eclipse. This was done via Help > Install New Software within Eclipse.
• I next had to configure  the environment variables on my XP system to include the path to the tools folder. I encountered the same problem as when working with the Android SDK for Flash CS5 – a necessary file is in the tools folder, but is being searched for in the platform-tools folder.
• Finally, I installed the sample PhoneGap application.
• Once I was able to confirm all was working properly, I first tested the application locally (see below), then exported this as an Android APK file from within Eclipse.

Here is what my Eclipse application development environment looks like in my virtual XP Pro. Note the PhoneGap sample project is open and I am editing the HTML and JavaScript files.

When I run the project locally, this opens the Android emulator and I can verify the sample is working. Of course, I am not able to test the accelerometer facilities since the laptop does not have an accelerometer that I am aware of. This is what the application looks like in the emulator. Note that the Eclipse environment seamlessly installs the application in the emulator. Red arrow indicates Eclipse messages which were generated (including successful installation into emulator).

Now that I have the application working, I next exported it as an Android application (.apk file). I had to create a certificate in the same manner that I did with the Flash application. I copied the .apk file to my laptop which is connected to my Droid 2 device and installed the application using the adb install command (screen capture below).

Once the application was installed on the Droid 2 phone, I could then use the Android SDK ddms.bat file to take appropriate screen captures. You see the application listed among the installed applications on the phone (called this one sample). Unlike Flash, I did not have ready access to create icons to include with the file.

Opening the sample application resulted in the application running (and interacting with the accelerometer) as shown in the screen capture below.

For comparative purposes, it seems relatively comparable to develop initial testing applications using either Flash CS5 (previous posts) or HTML and JavaScript. The Flash environment is easier to create unique icons to accompany the application as it is deployed. Both environments allow you to create the necessary certificate to install the application on the phone. The PhoneGap application informs you that the Android market is expecting certificates to last until 2033. I don’t recall seeing that when working in the flash CS5 environment. As you can tell from these posts, I now have the ability to develop small example applications and deploy them as Android .apk files using either Flash CS5 or HTML and JavaScript. This is in addition to developing websites which can be accessed via mobile phones and which take advantage of local database storage. As I am gradually learning, the mobile development environment contains a lot of possibilities.

Now that I have a development environment for Flash and the Droid 2, I used the initial sample provided by Adobe as a starting point. Here are the steps I followed to get a working Android application deployed on the phone (total time less than 30 minutes – including development of the necessary icons).

• Within the Flash CS5 application – File > New > Template Tab > AIR for Android > Accelerometer example
• Save the file locally (Accelerometer.fla)
• Briefly review the Actionscript to make certain I understand the code snippets provided
• Within the Document properties > AIR Android settings
  • Deployment tab – create certificate, specify device release for type of deployment, install application on connected device after publishing
  • Icons tab – create 3 icon files (must  be .png) 72 x 72, 48 x 48, and 36 x 36 – specify the file location for each size
  • Permissions tab – specify the permissions on the device for this application (none)
• Publish (received warning that no permissions specified)
• Open Droid 2 and navigate to installed applications (and there it is).

Screen captures below indicate both the application as well as it running in both portrait and landscape modes. Actually, the most complex part of this exercise was to set up the development environment. Working with Flash and publishing to the device was incredibly easy and intuitive.

Applications on phone (note MD icon and Accelerometer application)

Accelerometer application running in portrait mode (yes, the ball rolls around on the screen based on the movement of the phone).

Accelerometer application running in landscape mode ( I realize the screen dimensions did not adjust – just using this as provided)

Initial thoughts – the ability to generate such an application and deploy/ test it is amazing. Now, I just have to find some time to actually develop small applications which people may find useful (or that I can use as demonstrations in my classes).

Since I have a Motorola Droid 2 for development of Android applications, I thought I would take the device for a test drive. These are my experiences to get the environment working – your mileage may vary.

• I first needed to download the Flash CS5 extension for Air 2.5 (you can get this from Adobe Labs – just follow the link which will open in a new window/ tab, it is a beta at this point in time). This is a .zxp file. You use the Extension Manager for  CS5 to add the extension. The install was fairly smooth. Once installed, you will have the ability to create a new Flash file from an AIR for Android template (there are 4 different choices – 400 x 800 screen, accelerometer, option menu, and swipe gallery).
• At some point, you should also plug the phone in to your computer. Before doing so, on the phone, choose from the main screen Settings > Applications > Development (then check the USB Debugging choice). Then, when you plug your phone in, it will begin installing various drivers.
• Next, one needs to install the Android SDK. Of course, there are two choices (an installer and a zip file). Both lead me to the same logical conundrum. In order to install the SDK, one needs to have JDK (Java Developer Kit) installed. Foolishly, I first chose the 64 bit Windows version (hey, I am running 64 bit Windows Professional after all). Once I had “successfully” installed the JDK, I then tried to install the Android SDK. It told me the JDK was not installed. After a fair amount of fumbling (including trying to install from the zip version), I finally figured out that it was looking solely for the 32 bit version. So, I installed the 32 bit version of the JDK and was then able to successfully install the Android SDK.
• Oh, forgot to mention that  there was a small error when I plugged the phone in to my computer. The adb driver did not successfully install.
• Off to Motorola land to locate the driver. Finally found the  64 bit versions for Windows. This link will take you to all the necessary drivers (32 bit and 64 bit).
• Now the phone is recognized and I can access it.

Since I am running the Android SDK, one of the nice features is the ability to query the actual device. This is done via the command shell. I navigated to the location I installed the Android SDK on my computer, since it is Windows, I did a shift + right click to open the platform-tools folder with the command shell. I could then query the device (see image below).

I next discovered there is a tool to take screen captures of what you see on the device. This is found in the tools folder in the Android SDK. It is ddms.bat. I launched it and discovered an error – the adb.exe file was not found. Researched a bit on a search engine to discover that the latest version of the SDK has moved the file to the platform-tools folder. So, I added the location to my Path environment variables in Windows and it now works. I can now see the device and can take screen captures. The Dalvik debug Monitor is shown below.

One selects Device > Screen Capture and images like the one below are available on the computer.

Now that I have a working environment I can begin testing and developing small applications for the Android platform. My first attempt will involve some of the samples using Flash Professional CS5. That will be the subject of another post. I am curious what sorts of experiences readers of this post have had with Windows or other platforms.

I was recently inspired by a lynda.com course to obtain a Wacom tablet and experiment using the mixer brush in Photoshop CS5. I am most impressed with the capabilities of the Wacom Intuos4 Tablet as an input device. What I particularly like is the ability to customize the input selections on the tablet itself. You may note that one can create different settings for different applications (and these settings display on the tablet itself). These are my current settings.

As you see in the above screen capture, the majority of keys are set to deal with the color selector and the mixer brush itself. Keep in mind I am still getting used to the tablet itself as well as the controls. However, I am most impressed with its abilities to interface with many of the applications on my computer (ranging from Photoshop to OneNote).

Although I didn’t have much time today, I was able to generate a “painting” using a photograph as a starting point. In this case, it is a moth I encountered on the island of Borneo a number of years ago. Within Photoshop, I created a base layer which contained the original photograph. I then added a layer to remove details using the mixer brush (making certain all layers provided input). Once I had removed most of the detail, I then added another layer and used the history brush to add back in some of the detail. While it is certainly crude, keep in mind this is my first attempt. Just trying to document my progress. Overall, I found the combination of Photoshop and the tablet highly intuitive. As I make further progress, I plan to post additional examples.

Personally, I like the ability to add and remove detail and develop an image that has a certain artistic look to it. I guarantee this is better than I could do by hand if I didn’t have an image to start with. I am curious if other readers of this weblog have experimented with the mixer brush.