Building a Mobile Application from Scratch with Adobe AIR

We just released our 3rd Mobile Development course with Adobe AIR. While part one focused on getting you started building out iOS, Android, Desktop, and other applications; part two focused on one of the core functionalities of a mobile application its

We just released our 3rd Mobile Development course with Adobe AIR. While part one focused on getting you started building out iOS, Android, Desktop, and other applications; part two focused on one of the core functionalities of a mobile application its resolution and how it will look like as users flip around there screens; Part 3 changes gears and shows you every single step involved with creating your own Android Application.

Part three of our mobile development training focuses on Building a full application from scratch. Within the hour you will have built a complete application ready to be pushed into an Android Store. The application we are going to build is admittedly simple – why because you want to start with something simple (we promise to have more and more complex applications as we go foreword in the weeks and months to come). – Check it out.

What will we be building?

The “Mother of All” ruler and flashlight. Or our marketing copy for the app in the Google Play Store (by the way its currently only for alpha developers if you join our course you can ask for an invite to see and use the app for FREE):

 “Ever get stuck without a flashlight ? We did many times. Finding that one app that has the most light can get frustrating. There are many flash light apps out there. We thought “what can we do to make ours stand out”. How about a multi-use Flashlight and Ruler enabling you to check how big something is even in the pitch of night!

Don’t get stuck again at night without a ruler with a built-in flashlight. The easiest night time Ruler to rule them all.”


So what will we actually do in Course 3:

First, I’m so happy to have you here in part 3, What are we going to do? We are going to build a totally new – start from scratch – Mobile application (publishable to iOS or Android). Our application will automatically look great in horizontal or vertical view. More important, it will look really great and work great on any device no matter what size screen. We will go through all the steps involved with building an application. You might of noticed this course heavily depends on parts 1 and part 2 so please watch them before watching this title.

Taking a deeper dive:

  1. Setting up our initial application configurations:
    Our first step into building a fully working application is to start a totally new Android Application (just as we did in part 1). We will then start configuring our application name and Adobe Air Settings. We will give our application a unique ID and even define the version number of the application. We will configure our application to be a full screen rotating application. We are still testing out our application. We are going to configure our application as a debugger version and not a release version. We are doing this to enable use of debugger events from our application, when we test it out on our mobile device later on. Continue to review all of the Adobe Air Tabs before we start the next video.
  2. Centering the Content on the stage:
    We are going to do everything via code. On your end you can build many things directly on the timeline. That will keep things very dynamic. Try to avoid having content on the stage, limited to our logo. What we really want to do first is set our applications registration point to the top left corner. We do that using the StageAlign.TOP_LEFT property and set our application not to scale as well.Once we have an application that doesn’t automatically scale we are ready to start adding logic into our application. With that done correctly,we will start off by listening to the Orientation event. Then reset our logo each time to remain in the center of the screen.
  3. Drawing Inches for our ruler:
    It’s time that we start drawing our actual ruler. The first step is to figure out what an inch is. We discussed this in Course 2 when we discovered the capabilities class. We discovered that we can load up the amount of pixels that are in an inch using the Capabilities.screenDPI property. Now that we know how many pixels are an inch its time for us to draw lines in the intersection point of inches. By the end of this video you will leverage Flashes Drawing API (you can learn more about that here) to draw out the inches of our ruler.
  4. Making our application Redraw each time screen changes:
    Our ruler looks great but the only problem is that as soon as the user rotates their device our application doesn’t look all like that any more. In this video we will fix that problem by enabling our application to redraw itself each time the orientation changes. It’s time for us to test out our application in a mobile Android device to discover we have a bug. In the next video we will address the bug.
  5. Initializing our application with Null:
    When we first start our application on a mobile device it looks like hell right now. We have to fix that. We will use a trick in programming enabling us to call the refresh using the null attribute . Let’s see how to do that before moving to the next video. Were we continue to debug and improve our application … Oops … we got a real bug – let’s fix it before moving forewords.
  6. Huston we have a problem: Bug patrol
    Testing is the heart of developing. Bugs are ok – don’t fear them – we can make mistakes all the time. In this video we figure out what the bug is and then isolate it so we can fix it. By the end of this video we figure out what the problem was and fix it.
  7. Environment friendly developers Reuse code
    When you think about it we just created a function to draw an inch. Now we want to build ¼ inches and smaller elements inside of an inch. When you think about it, isn’t it almost the same thing with small variants? It definitely is. In this video we take our code and rewrite it to enable it to be reused. This way of programming is called agile development. So let’s get agile.
  8. It’s time to add Digits to our application:
    It’s really great to have lines but how will users know how many inches they have if there are no numbers? Exactly! In this video we take a look at how text works in ActionScript and get it to align correctly in the Air runtime.
  9. Applications can have Memory Leaks – Don’t let it happen
    When you are building an application its not that uncommon to create small memory leaks when working on the client end or mobile. Most of the time these issues are not very major but the bigger the application is; or the weaker the mobile device is; the more battery you will drain from the user and worse. It’s time we test out our application and figure out where do we need to improve on it to avoid memory leaks.
  10. Adding an Icon to our application
    We start off with an icon. I created one saved out as a PNG [.png] we will add it into our Adobe AIR configurations. By the end of this video we will have the application icons configured.
  11. Wake up ! It’s not time to sleep
    Our application is in test mode and if it falls asleep on us what a horrific ordeal. Well not really, it’s not so bad. We will add a small patch to our application and get it ready to become the Flashlight it always wanted to be at night 😉 and with that we completed building our first complete android application. Congrats!
– go from a “zero to geek” | – ©

Leave a Reply

Be the First to Comment!

Notify of