Mobile and Devices Developer Center

Developing an S60 application for Nokia 3rd Edition pre-install

This article gives you an overview of the creative and production techniques we used to create a Flash Lite interactive tutorial to be pre-installed on all 3rd Edition Nokia phones globally.

Working in emerging technology requires constant exposure of our work, demonstrating our capabilities and skill base. While Breakdesign already have an existing relationship with Nokia, it was during the 3GSM conference, where Breakdesign had the opportunity to showcase our work to additional individuals at Nokia, that they realized we had the creative and technical capabilities to develop and produce an interactive tutorial. However, the deadline was very tight. A first version had to be ready for a large Symbian trade show, and then a final complete version shortly thereafter. Our regular illustrators were snowed under with work, so this was the perfect opportunity to work with Caroline Vos, one of the talented illustrators who shares our office.

Breakdesign has been fortunate to have had an existing relationship with Nokia through our work in interactive TV and mobile content for Nokia "Special Edition" phones. In terms of our approach to Nokia, we have always kept them informed of interesting things we have been doing.

Our approach to our work and our easygoing nature, have made it convenient for them. We know their products well and are able to get on with it, we have handled the whole production in-house, and have always delivered on time and on budget. We also have good relationships with a large pool of freelancers and can bring in other people when necessary.

Requirements

To understand this tutorial, you will need to install the following software and files:

Flash Professional 8

• Try
• Buy

Flash Lite 2 device

• Explore available Flash Lite 2–enabled devices

Symbian S60 2nd and 3rd Edition SDK

• Download the SDK

Sample files:

• s60_preinstall_samples.zip (ZIP, 48K)

The sample files include the following files:

• Cart loader (cart.swf)
• Menu system (menu.swf)
• One interactive episode (video.swf)

Prerequisite knowledge

General knowledge of ActionScript 1.0 and Flash Lite, and some limited knowledge of Symbian development.

Creating the storyline

In terms of script and storyline, we had a fairly loose brief as long as we showcased the features of the S60 platform. Our approach was to show the everyday uses of S60 technology. In the case of Bluetooth, for example, instead of showing people how to turn on their Bluetooth, we showed them that they could play multiplayer games with it.

Because this was a a global campaign, it had to be understood across language barriers, so we really didn't want any of the characters to speak. Therefore, we relied mainly on gestures and actions to explain the storyline (see Figure 1). We also created storylines that would specifically showcase features in certain groupings according to the demographics of S60 users. This was not just for the youth, but also for 35-year-old business types!

Figure 1. Sample storyline for the application

Taking a modular approach

Because this project is likely to expand in the future, we had to take a modular approach to the storyline, enabling us to segment the episodes easily. We also had to optimize the amount of illustration and animation for size/memory constraints.

We chose a central graphical loader that loaded the different episodes. The train carriage is the starting point for each storyline (see Figure 3 later on). It's a universal image and a place where you naturally fool around with your phone and see all types of people. It also meant that for some of the episodes we didn't need to draw completely new environments, but could create angles from the existing 3D model.

We linked episodes by adding a featured character into the 3D space within the cart—at first we had a skater, but later we replaced him with a girl on her way to meet some friends.

Merging 2D and 3D artwork

The challenge for the illustrator was to create Flash Lite-friendly illustrations, while another team created the 3D backgrounds and environments. We chose a graphic style that merged the 3D-generated background and foreground illustrations seamlessly.

It was also important for the illustrator to understand the limitations of the vector engine and embrace a more simplistic style of drawing. This eliminated the use of gradients, outlining, and high-detail textures, which are difficult to render given the limitations of the screen size and LCD screen used on mobile phones. See Figure 2 for before-and-after optimization examples.

Figure 2. Vector image before optimization (left) and after optimization (right)

It also proved helpful to use an LCD screen and provide templates showing the characters in their actual screen size on the device.

Parallel workflow and benefits

Some parts of the project had to be done in parallel to make the deadline. Illustration is often the bottleneck in projects like this, so we had to adapt our normal process. Initially 3D and 2D artists were given the basic color template based on the S60 official colors: blue, pink, and green. We then created very simple 3D models of the environments, where we prototyped the basic coloring, different environments, angles, and pans. Then we discussed the story with the illustrator to give her the context she needed to start creating the characters on paper.

As soon as the basic 3D environments were done, wireframes were given to the illustrator to create characters in 2D to fit into the 3D space (see Figure 3).

Figure 3. Illustration of a train carriage wireframe

Our 3D team worked on exporting the 3D frames and bringing them into Flash and then optimizing for Flash Lite playback. As soon as the basic outline of a character was completed, it was forwarded on to our animators who started to break these illustrations apart into Flash "skeletons" that we could easily animate. This meant we could do the 3D panning of a scene and the rough animation of the character interacting/moving through it while others worked on the details of the imagery and sound. This gave us a good idea of what additional illustration, animation, and sound work needed to be done while our creatives were still actively involved with the project. This also allowed for a faster turnaround (it normally takes some time to "get into" a project) and avoided last-minute additions.

It was important to work according to the workload of each of the team members and to understand their working process. Some could work on a few projects simultaneously, while others had to work on it full-time. This in essence amounted to the success of this project—the ability and flexibility to align our team correctly to the work at hand.

Breaking it up

The necessity of the modular approach was not apparent when we were doing the first two episodes, which came in at about 450K—50K under the heap size of the Flash Lite player (which is 500K). It also played perfectly on the 3rd Edition phones for which they were designed. We later discovered that the garbage collection on the Flash Lite player, especially on 1st and 2nd Edition Nokia phones, forced us to break up the whole project into 300K chunks in order to avoid nasty red screens and memory warnings (see Figure 4).

Figure 4. Breaking the project up into a modular approach

Using multiple sound formats

Breaking up the project allowed us to load all sound into a separate layer. This proved indispensable in order to maintain sound across various scenes within the movie. It also allowed us to switch between MP3 and ADPCM where required. (ADPCM loops seamlessly, whereas MP3 always give an annoying pause.) This of course can be overcome by creating a track that will naturally have a bit of silence at the end, like the background ambient sounds within the train.

In terms of creating the audio and working with our sound designer, we optimized the sound for 8-bit and 16-bit playback. Some tracks that needed more clarity were encoded as 16-bit. Others, like ambient sounds, were encoded as 8-bit. This meant that our sound producer had to be aware of the sound limitations of the phone, and it was essential that they had various devices to test on as they started producing the audio.

Optimizing playback speed

After the animation, illustration, and sound were done, we worked on optimizing the playback speed of the movie. This cannot really be done until everything is finished because, in some cases, all objects are broken apart and merged into one frame.

The more layers you have within your movie, the more processing power it takes. Breaking apart everything and pasting into one layer also means that hidden points are deleted, further increasing your playback speed and reducing overall size.

We also changed the playback quality to medium far zooming section and then switched back to high quality for still shots and text rendering. Figure 5 shows how we optimized the Timeline.

Figure 5. Timeline before optimization (top) and after optimization (bottom)

Packaging the product

Once we were happy with the finished product, we set about packaging it properly. The product is for pre-installation on all Nokia 3rd Edition phones, but our client also wanted it as a separate installable file. The tradeshow version was just one SWF for 3rd Edition devices; but for the full version, we were looking at about 15 files, which should work on all Nokia Flash Lite–enabled phones, even the old ones!

We packaged the files and made sure that the right phone played the right version. Using the Nokia Symbian 60 SDK, we developed downloadable installers for 1st and 2nd Edition phones as well as for the newer 3rd Edition phones. This ensured that the content would install only on Symbian phones capable of playing the content. The installers also created icons on the phone menu to link to the content, as well as gave users the choice to install the application on their phone or removable storage device.

Where to go from here

• FlashLiteDev user group
• Forum Nokia
• S60 home

About the author