MacDevCenter    
 Published on MacDevCenter (http://www.macdevcenter.com/)
 See this if you're having trouble printing code examples


Building Interactive iPod Experiences

by Erica Sadun
11/28/2006

The interactive multimedia presentation is one of the least-trumpeted features of the iPod. Nearly everyone knows about podcasting, which is a way of providing linear audio and video presentations. You download a podcast, listen to or watch it, and you're done. Beginning, middle, end. In contrast, relatively few people know about, or even use, an iPod's nonlinear abilities. These features allow listeners to interact with text and audio and visual materials, making decisions on where they want to go next and what material interests them.

This interaction is often called "museum mode," as if to suggest the listener were wandering through a museum and wanted to pick and choose which paintings or exhibits to learn about. You're certainly not limited to visiting museums, though. Interactive presentations can be used for any kind of learning and exploration, whether you're providing content for hands-on labs, building an interactive "brochure" for high-end real estate, creating a multimedia reference guide, and so forth.

If you can get past the fact that iPods are some of the most frequently stolen consumer devices on Earth, and you might consider developing and providing material on this platform, interactive presentations add a great new spin to an already amazing device. This article will introduce you to the basics of interactive iPod design and show where you can learn more about iPod multimedia development.

iPod Notes

You may have encountered iPod Notes before. (They're located in Extras -> Notes, off your main iPod menu.) Maybe you've used them to keep a few text items on-hand on your iPod. You may have used a utility like Text2iPod X to convert a text file from the Gutenberg project so it can be viewed on the iPod. Or perhaps you've seen this feature and dismissed it as not particularly interesting or useful. As you certainly have guessed by now, it's this very iPod Notes feature that allows you to build interactive presentations.

Notes provide interaction through the use of a very simple, very limited markup language. Markup languages, like HTML or XML, add angle-bracketed tags to text files to indicate style and layout directions for those files and establish connections between files. Apple's iPod note markups offer a very limited, very specific subset of these tags. You won't have the flexibility and precision you'd expect while authoring web pages, but you do get enough directives that you can tell the iPod to create interactive links to audio, video, images, and text.

In fact, the development process feels very much like creating a website. To build your presentation, you gather all of your multimedia assets, load them onto the iPod, and design the text files that tell the iPod how they are joined together. The iPod interprets these text-based "notes" and presents them to the user.

Preparing the iPod for Disk Use

If you want to develop content for iPod Notes, you must enable disk access. This provides direct access to the iPod hard drive so you can develop and save your source material. In iTunes, select your iPod in the DEVICES list and select the Summary tab in the main iTunes window. Locate the "Enable disk use" checkbox in the Options pane and select it (Figure 1).

Figure 1
Figure 1. You must enable disk use to create notes on your iPod.

iTunes may warn you at this point that "Enabling the iPod for disk use requires manually ejecting the iPod before each disconnect, even when automatically updating music." If this dialog appears, click OK.

Click Apply. After a second or two, an iPod icon appears on your desktop. Double-click this icon to open a file browser window. Once you've set the disk use option in iTunes, the iPod will mount on your desktop whenever you dock it.

Creating Simple Content

The first, and easiest, content you can add to your iPod Notes is--surprisingly enough--pictures. In your iPod's browser window in the Finder, check to see if a Notes folder exists. If not, create one. Drag several JPEG images to the Notes folder and remove any other files. Then dismount your iPod so you can interact with it directly.

Tip: JPEG is the only supported image format.

Figure 2
Figure 2. Adding JPEG images to your Notes folder allows you to select each image and view it.

On the iPod side of things, navigate to Extras -> Notes. There you'll discover a list of the JPEG images you added to the Notes folder (Figure 3). Select any file name to display it. After, click MENU to return to the list. When you are done exploring the images, redock your iPod and allow it to mount on your desktop.

Figure 3a Figure 3b
Figure 3. It's easy to create a list of JPEG files that displays in the iPod Notes interface.

Next on the list of easy-to-create content is the simple text file. Fire up TextEdit and create a new file with the contents "Hello World." Save it as helloworld.txt in your Notes folder on the iPod hard drive. Dismount the iPod and return to Extras -> Notes.

The new helloworld.txt file joins the JPEG images already in your Notes folder. Select it to display its contents (Figure 4). Notice how the title bar displays the name of the text file, as it displayed the names of the JPEG files when you displayed them (Figure 3).

Figure 4a Figure 4b
Figure 4. Add any text file to the Notes folder for easy display.

Notes can display up to 4,096 characters each, which is roughly four pages of printed text. As Figure 5 shows, after you add more than one page of text, a scroll bar automatically appears, allowing you to use the scroll wheel to navigate up and down the page. In addition, most simple spacing is preserved. The line breaks seen in Figure 5 were added by pressing the return key twice after paragraphs in TextEdit. This makes it extremely easy to paste text into new text files and display them on the iPod using notes.

Figure 5
Figure 5. The iPod automatically handles scrolling by adding a scroll bar to each text page that exceeds the size of a single window.

Finally, as far as simple things are concerned, you can add folders to iPod Notes. Folders allow you to organize your notes and pictures in a basic hierarchy, which you can navigate as you would any other menu on the Mac or iPod. For example, putting all the pictures from the first example into a subfolder creates a new folder item on the Notes menu, as shown in Figure 6. Notice the ">" sign to the right of My Pictures that indicates this is a folder.

Figure 6a Figure 6b
Figure 6. The Notes interface allows you to group items by folder.

Tip: You are allowed to add up to 1,000 notes per iPod. When you add more, only the first 1,000 are loaded.

Adding Basic Markups

Markups allow you to extend the power and flexibility of your Notes presentations. They add interactive components that provide your users with the ability to navigate your content using their discretion, and presentation components that help you control how the notes act and appear.

For example, the following note produces the screen shown in Figure 7: From this screen, you can visit the <A HREF="helloworld.txt">hello world</A> text file, see the picture of the <A HREF="MyPictures/foxnkit.jpg">fox and her kit</A>, or listen to a recent <A HREF="song=Ven Aqui">song of the week</A>. Notice the three underlined links. The user can select the desired link using the scroll wheel and then activate it by pressing the center button on the iPod. The blue color indicates the currently selected link.

Figure 7
Figure 7. Users can scroll through links using the scroll wheel. Selected links are displayed in blue.

To be very frank, there are only two basic markups you'll use for authoring your multimedia: the title tag and the anchor tag. (When I said "limited," I really meant it.) Here are descriptions and examples for both.

Titles

Titles allow you to change the title line in the Notes display. Simply add <TITLE>Your Title Here</TITLE> to the start of any note, as shown in Figure 8. Contrast this with the default presentation shown in Figure 3:

<TITLE>Hello World</TITLE>

Hello World

Figure 8
Figure 8. The TITLE tag adds custom text to the title bar.

Links

Links allow you to connect one note with another, to view images, and to launch audio and video from Notes. The anchor tag looks and acts like the one you find in HTML. For example, <A HREF="step2.txt">Step Two</A> adds a link to a note called step2.txt. <A HREF="fox.jpg">Fox</A> links to the fox.jpg JPEG image. <A HREF="song="My Way">My Way</A> links to the My Way audio file, and so on.

Tip: Always use uppercase tags for your notes.

Notes, Photos, and Folders

To link to notes, photos, and folders, you must understand how to use the Notes folder hierarchy. In a nutshell, it goes like this:

Always use the full name of each file, e.g., "foo.txt" or "foo.jpg" not "foo". To link to a folder rather than a specific file, omit the file name. For example, <A HREF="/myFolder">Link to Notes/myFolder</A>.

Tip: You can use a URI file scheme as well as the Notes-equals-root scheme. <A HREF="file:///"> is identical to <A HREF="/">. Both link to the Notes folder. I personally always use the Notes-equals-root scheme. It works consistently.

Songs and Videos

To link to songs, use "song=" in your anchor. For videos, use "video=". For example, <A HREF="song=My Way">My Way</A> or <A HREF="video=SpongeBob Episode 1">SpongeBob</A>. Type the exact name of your audio or video file as it appears in iTunes, spaces and all.

Playlists and Song Groups

Using ipod:music creates links to groups or categories of songs. You can use most iTunes metatags such as artist, composer, and genre. Some examples:

<A HREF="ipod:music?genre=pop">Pop Music</A>

<A HREF="ipod:music?playlist=my faves">My Favorite Music</A>

<A HREF="ipod:music?artist=Rascal Flatts">Rascal Flatts</A>

and so on... Just be aware that you can't use ampersands. Skip the genre=Country & Western or artist=Hall & Oates references. If you need to use an ampersand--or, for that matter, a percent symbol--in links, substitute them out with their escape equivalents: %26 for "&", %25 for "%".

Putting It All Together

This base set of features you've just seen (notes + links + pictures + your iTunes library) can be surprisingly flexible. The simple ability to create presentations and lists of items that can be accessed and linked in a user-driven way offers tremendous power for anyone who wants to create an open-ended experience.

Consider a walking tour of a sculpture garden, where at each sculpture visitors can read about the artwork, listen to the artist, and see a video about the sculpture's installation. Or an electronics lab that discusses each project, shows how to put it together, and gives step-by-step audio about each part of the construction. All this is possible by using iPod Notes to unite these multimedia elements.

Start by planning out your experience, drawing out a map of the experience and the media that could support each portion of it. Consider whether you'll need audio or text descriptions, art or photographs, or whether a video would make a greater impact.

Figure 9
Figure 9. Drawing a map helps you plan the interactive experience.

Next, develop and assemble these materials. Import the audio and video into iTunes and place the pictures into your Notes folder. Build your basic notes text files and start connecting them to one another and to your media using links. Build your project slowly and carefully, as you would when developing web pages: check your links, your titles, your spelling, and so forth, and test out your presentations on sample groups before going "live."

Conclusions

Although limited in scope, the base iPod Notes features are surprisingly effective because they leverage the power of the text, image, audio and video they link to. They create a flexible skeleton that allows nonlinear access to iPod media, adding a new level of complexity to the player. While the base set of features are quite narrow, they do what they need to. They provide the basis to organize and present access to the more interesting and more important elements hosted elsewhere on the iPod.

In the next article of this two-part series, you'll see how to kick it up a notch and how to exploit some of the more obscure features of iPod Notes, such as the "Notes only" mode that prevents users from accessing normal iPod functions.

In the meantime, here are some resources you'll find helpful to discover more about iPod Notes and how to develop them.

Erica Sadun has written, co-written, and contributed to almost two dozen books about technology, particularly in the areas of programming, digital video, and digital photography.


Return to the Mac DevCenter.

Copyright © 2009 O'Reilly Media, Inc.