You are Here:Home>>Old Posts>>Creating a Flash Lite fretboard quiz app

Creating a Flash Lite fretboard quiz app

Carlos Pinho
By | 2008-02-28T15:27:11+00:00 Feb 28, 2008|Old Posts|

By Michael Tuminello
Motiontek

I was inspired to write this article by the disconnect I experienced between reading about authoring Flash Lite content and actually building an application. Many times I’ve found the online blogs and descriptions of creating content for mobile devices usually includes paragraphs of unverified predictions regarding the mobile marketplace alongside confusing tables of available devices, supported file formats and so on. Although there is some conflicting information available online, after doing some fairly thorough investigating I was pleased to discover that when you get down to it, the process is actually pretty easy. In defense of these earlier authors, I believe that the necessary pieces to make Flash Lite development easy for the typical (North American) designer have only just fallen into place. I’ll describe these advances as quickly as possible, and then I’ll provide the steps I used to create a simple app I designed for my own use to pass the time on the subway—to reinforce my memorization of the notes on the guitar fretboard.

My secondary purpose in writing this article is to share what I discovered in the process: Writing a small application for your own use is a fun exercise, and can result in the creation of something that you’ll actually use on a regular basis. Creating an application for your own use allows you to tailor the design and functionality specifically to your needs. Since you are the target audience, you can choose the level of complexity and feature set to implement. Don’t feel limited by industry standards for other mobile applications. Think outside normal conventions of other mobile content you’ve seen, and focus instead on providing utilities and content that you personally find engaging. You can design your application for general usability, or make it very specific to achieve a personal goal that previously only existed in your daydreams. Develop the design and functionality in the way that you (the mobile device user) find most compelling. Go nuts. When you’re sitting on the subway at 2 AM, it may end up being the most interesting thing you have to do.

For the purposes of this article, I’ll write directly from my own mobile development experiences. As with most areas of development, there are many ways something could be accomplished. However, I’ll stick to the instructions required for building this simple fretboard application, rather than providing a full treatment of the various options available. Please note that this is just one strategy for building this type of mobile application, and you are not limited to using this approach as you design your own games and interactive content.

Requirements

In order to make the most of this article, you’ll need the following software and files:

Device Central CS3

A Flash Lite enabled phone

Sample files:

Prerequisite knowledge

Prior experience working in the Flash authoring interface is useful. Some knowledge of using and developing for the Nokia S60 series is also helpful. You should be unafraid of Bluetooth.

Getting started building a Flash Lite application

It can be surprisingly time-consuming to find guidance online regarding the topics described below. Of course, until recently some of these activities weren’t even possible, so things for mobile developers are definitely looking up.

Choosing a Flash Lite phone

I spent a long time looking at the list of Flash enabled mobile devices, and ended up feeling slightly envious of the Japanese. After doing careful research, my suggestion is straightforward (and not expensive): Buy a Nokia S60 phone. I personally own (and recommend) the Nokia N75. It’s a nice phone in its own right, and it was reasonably priced when I signed up for wireless service with the monthly plan. Obviously, depending on your needs, you may want to do your own research using the supported devices page to find your preferred Flash Lite compatible phone. If you already have a phone, use this online resource to make sure that your device supports installation of Flash Lite. (Sadly, at the time of writing, the iPhone doesn’t offer Flash Lite support.)

Installing Flash Lite to a Nokia phone

Most Nokia S60 handsets already have the Flash Lite player installed. However, if your handset has an older version of the player, such as 1.1, then you may want to install a new version such as 2.1 or 3.0. To install the Flash Lite player on your Nokia phone, you must first download the installer (an SIS file), which is available from the Adobe Mobile and Devices Developer Center.

Next, follow the instructions as outlined in this helpful TechNote, Installing the Flash Lite player and content onto a handset.

Due to the wide variety of supported devices that run Flash Lite player, you may also find it helpful to visit the website of the manufacturer for your phone, to get more information about moving and installing files to your specific device.

Copying the Flash Lite installer (and other files) to a mobile phone

If you’re on a Mac, then grey skies have turned to blue, as Nokia now offers a nice application to handle transferring files (previously the only utility offered was compatible with Windows only). Check out the Nokia Multimedia Transfer Beta to learn more.

Windows users can follow the instructions outlined in this article: Installing a Flash Lite SWF on a Nokia S60 device using Windows with Nokia PC Suite. After you transfer the Flash Lite installer SIS file to your mobile device, you’ll need to navigate to it using the device’s interface to run the file and perform the installation process.

Running SWF files on a mobile device

Running SWF files on your mobile device is not as simple as you might think, because the phone is designed to open SWF files with the pre-installed version of Flash Lite (often version 1.1 at this point). Attempting to browse and play a newer SWF file that you’ve copied to your phone results in the helpful error message: “Unable to open file. File corrupted.”

The way to run a SWF file is to start by launching the standalone Flash Lite player that you have installed, and then open the SWF file using the standalone Flash Lite player. Flash Lite will browse the Other directory on your phone or memory card by default, so be sure to copy your SWF files to the Other folder when you transfer them. This way, they are available to you when you run the Flash Lite player. As it isn’t yet possible to make the newly installed Flash Lite player the default application for opening SWF files on your phone.

Choosing which version of Flash Lite to target

Although the latest and greatest version always has its allure—as is the case with all new software—I recommend evaluating the needs of your project and then publishing your application to the earliest version of Flash Lite that provides the functionality you need. For the purposes of this sample project, since it doesn’t incorporate video content, I decided to target Flash Lite 2.1. This is something you should consider in the pre-planning stages as you develop your own mobile applications.

Testing the SWF file during authoring

Ultimately, you’ll need to test the application you’ve developed on the actual phone or mobile device, in order to establish that it works as expected and displays the content exactly as desired. Obviously, you cannot avoid testing the SWF file on the phone, because you’ll want to be absolutely sure it delivers the experience and performance you want on the target device. Additionally, you’ll find that pressing the keys of the device to interact with the application you’ve built is both gratifying and necessary before distributing the final version.

However, in order to save time in your development workflow, you can use the emulators included with Device Central to quickly preview iterations of your project, to verify that you’ve fixed something or to ensure that things are working the way you want them to work. This is very helpful, because it saves the step of having to copy each newly published SWF to the phone or device in order to test it. It can become very tedious to re-copy the files to the device for testing after every minor change is implemented, and Device Central includes device profiles for all major devices, (as well as offering the ability to make your own personalized device profiles) so using the emulators can greatly reduce your overall development time. Adobe has made the testing process very convenient for us, especially when developing complicated applications.

To learn more about this process, see the article: Creating your own custom device profile for Adobe Device Central CS3.

Note: I’ve noticed that device fonts are not always accurately represented in the Device Central emulators, so it is highly recommended to always include a final testing phase of your application on the target device before using or distributing it.

Examining the fretboard quiz app

Now that you know how to install Flash Lite on your device, as well as how to copy and test the SWF files that you’ll be working with, it’s time to discuss how the fretboard note finder application works.

As I mentioned in the introduction, I was motivated to build this application for myself because I wanted to have a little application on my phone to help me memorize where the notes are located on the guitar fretboard while I’m on the go. (This application also applies to learning the notes on a bass guitar, since the first four strings are identically tuned). Also in the introduction, I promised to be as brief as possible, so rather than expounding on all of the current popular strategies and mobile development methodologies, I’ll just briefly mention a key design point, based on my research about mobile design.

Generally speaking, the attention span of people using mobile applications is much less than the attention span of users working with a computer application. There are many factors that cause this. I believe it is primarily due to the fact that people using their phone are often working in smaller time increments, in situations where people are less focused. The mindset of people in their home or place of business is much more focused than people who are standing outside on the street or riding the subway.

With this in mind, I kept the number of screen elements to a minimum, to make the interface less distracting. There are three text fields, and I’ve scaled the most important text field to display largest to draw the user’s attention. The main component of the interface is the fretboard itself, which is familiar to musicians and provides the initial orientation of the application’s purpose. The fretboard is the key to the functionality of this application, and for this reason it takes up most of the available screen real estate. Fortunately, the device contains 12 keys on the keypad, and there are 12 frets to a string before you start repeating notes, so that maps out rather nicely.

Here’s how the application works.

  • The green arrow at the top of the fretboard points to a string, and the topmost field displays a note for the user to find on that string.
  • The user presses a key to indicate the correct fret. The user can press the 0 key to select the first fret, the 1 key to select the second fret, and so on. This convention continues up through the last available key, as the user can press the # sign key to select the twelfth fret on the virtual guitar.
  • A timer and a score field are displayed to provide feedback to the user. These fields dictate the length of each “game session” and indicate how successful the user is at selecting the correct fret (key on the phone) to correspond with each note.
  • When the user presses the key, the application evaluates the entry to see if it matches the displayed note. There are no second tries, because once the user presses a key that turn is essentially over and the application begins the process again with a new string and a new note to locate.

This simple application is comprised of one main screen where the interactivity takes place and a help screen—which doubles as a “pause game” function (see Figure 1).

The application interface includes a string selector, the fretboard, the note field, a game timer, a score field, and the Help (pause) and Quit buttons.

Figure 1. The application interface includes a string selector, the fretboard, the note field, a game timer, a score field, and the Help (pause) and Quit buttons.

Analyzing how the application works

Now that I’ve outlined the way the user interacts with the application to facilitate  memorization of note locations, it’s time to see how this functionality is provided in the code. For the purposes of this article I’ll highlight the important areas, but if you’d like to research the code line-by-line, download the sample file that accompanies this article to review the entire working version of the application.

If you are used to creating Flash applications, you’ll notice that very little of the code in this project is specific to Flash Lite. Here are the lines of code that are unique to Flash Lite application development:

fscommand2("FullScreen", true);
fscommand2("SetQuality","HIGH");
fscommand2("SetSoftKeys", "showHelp", "quit");

There are not a lot of surprises in this code, and everything here is pretty straightforward. The fscommand2 function is used to allow Flash Lite to communicate with the phone. The first line sets the movie to full screen and the second line sets the quality of the movie to high. The third line remaps the two keys at the bottom left and right of the cell phone screen to specific Flash functions that are defined later in the code.

The following data is added to allow the ActionScript code to evaluate the user’s key selection and see if it matches the displayed note in the note field:

var gNoteList = [ "A", "A ♯ B
    ♭", "B", "C", "C ♯ D
    ♭", "D", "D ♯ E ♭",
    "E", "F", "F ♯ G ♭",
    "G", "G ♯ A ♭"];
var gNotePosList = [8, 30, 55, 80, 106, 131, 156, 181, 207, 232,
    257, 283];
var gTuning = [8,1,6,11,3,8]; 
var gNumStrings:Number = 6;

In the example above:

  • The first line is just the HTML-encoded values for the notes: A, A sharp/B flat, and so on. One important thing to note here is that you need to use a font for the text field that displays the notes that contains the symbols for sharp and flat. If you see any display problems in this field, that is likely to be the issue.
  • The second line relates to the y values for the fret positions. The x values are determined by the position of the string movie clips in the SWF file.
  • The tuning array specifies which note in the note array is the first note on each string. I chose to implement the functionality in this way in order to support alternate tunings later on. This is an avenue you could explore as you work with the provided sample files and update the project for your own purposes.
  • The last line in the code example above relates to the number of strings.

Although it’s not tough to understand, the rest of the code is rather lengthy. Rather than go through the code line by line, I’ll just provide a brief outline of how it works. First, I set up a listener to listen to the key presses on the phone and evaluate whether they are right or wrong. This is accomplished in a long switch/case statement that calls the function evalNote() that passes the pressed key number as a parameter.

Then I start the application off with a few functions. The code in the sample file starts a timer, initializes the text fields, and assigns notes to all of the strings (using the values in gNoteList and gTuning). The application begins the game play with the nextNote() function, which just selects a note and a string at random from the lists. If you want to review the corresponding functions in the project, I’ve listed them below:

startTimer();
initFields();
assignStringNotes();
nextNote();

Finally, here’s the function that does most of the work. The code below moves the note indicator to the corresponding position, based on the key the user presses, and then the interface provides feedback to the user to indicate whether their guess was right or wrong. Based on the results of each interaction, the code then increments the score count accordingly and moves on to display the next note for the user to guess.

 function evalNote(pos):Void{
    setNoteIndicator(pos);
    //trace("selected = " +
    gNoteList[fretboard["s"+currString].notelist[pos-1]]);
   //trace("note to find = " + gNoteList[currNote]);

    if(gNoteList[fretboard["s"+currString].notelist[pos-1]] ==
    gNoteList[currNote]) {
      fretboard.finger.gotoAndStop("right");
      numRight++;
   } else {
      fretboard.finger.gotoAndStop("wrong");
      numWrong++;
   }
   updateScoreField();
   nextNote();
}

And that concludes the end of the code. The fretboard quiz application is now finished, and the good news is that you can use the sample files provided at the beginning of this article as the basis for building your own mobile application. You can invent new features and update the existing functionality described here to make all kinds of other mobile games. For example, you could modify this sample project to build a set of flash cards to quiz yourself for your next test. Or you could create your own custom version of a pong game. Imagine yourself waiting somewhere, using your mobile device to pass the time and create a prototype of an application you’d find useful or amusing. The process of mobile development is easier than you think—and the results can be very rewarding.

Where to go from here

If you want to expand on the current application, here are some ideas I’ve considered: Give the user the ability to choose alternate tunings, or put in tunings for a different instrument, like banjo. Improve the visibility of the current string. Give the user feedback on the correct note when they are wrong, rather than just skipping to the next one.

Mobile users are becoming more savvy and are using their portable phones and devices in new ways. Additionally, new phones and devices are now available that take advantage of the enhanced features in Flash Lite 3. As a result, mobile developers are coming out with innovative applications that reflect the newest trends of the market and offer new features and fun diversions for mobile customers. It is an exciting time to begin building applications for mobile devices, because the technologies and networks now make it possible to offer increasingly complex Flash Lite applications and games to a growing mobile audience.

In addition to the resources listed above, here are some other useful articles that discuss working with Nokia S60 series phones and building successful mobile applications:

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the author

Michael Tuminello has worked as a multimedia and software developer/designer for more than 10 years. His experience includes award-winning web and multimedia projects as well as guiding the development of a third-party Flash player (part of the Viewpoint Media Player) and design of an instant messenger client that integrates with school systems. He is currently a product manager and application designer for Unicast. When not working, he plays with his family (“Hi Nicole, Dean, and Joel!”) and his band, Prankstar.

About the Author:

Carlos Pinho
A father, a husband and a geek... Carlos was the founder of projects like The Tech Labs and Flash Enabled Blog. He is the founder of TekTuts He is passionate about technologies. Their main skills are in analytics, transport & logistics, business administration. He also writes about programming resources, trends, strategy and web development.