Case Study: HUGO Academy CD-ROM

December 8, 2004
by Thomas Biedorf

The "HUGO BOSS, HUGO Academy: CD-ROM Fall/Winter 2003" CD-ROM won the coveted Grand Award for Best Application at the New York Festivals 2003 competition. The Frankfurt-based agency Biedermann und Brandstift designed a training CD-ROM for HUGO shop employees whose main content was created in Flash. The application's skeleton was developed by bytes in motion using Director MX.

Director allowed us to meet HUGO BOSS's quality requirements as far as the application was concerned, and Flash MX enabled the designers to create the content according to specifications. The high degree of integration between these two Macromedia products yielded a relatively smooth workflow since Flash professionals who aren't familiar with Director, and Director professionals who aren't familiar with Flash, can cooperate quite easily.

Content
The training CD-ROM was used to train HUGO shop employees worldwide. The content covered company philosophy and marketing as well as the current collections and merchandising products. A shop overview and interactive group games completed the CD-ROM, which was produced as part of a two-year series. The CD-ROM was presented by the shop owner (moderator) using a video projector. The employees formed three groups that had to compete against each other in the interactive games (see Figure 1). A comprehensive printed training guide provided the shop owner with complete information about the application. The total playing time of individual chapters and the total training time were tracked. This data, together with general assessment feedback, could be e-mailed to headquarters.

Figure 1: Example of a team game.

Technical and Design Requirements
HUGO BOSS's design requirements are highly sophisticated. This is reflected in their collections and their shops as well as in the design of their print materials, Web sites, and CD-ROM applications. It was known from the outset that Biedermann und Brandstift, a veteran service provider to HUGO BOSS, would not only develop the concept but also design the content. Flash was the program of choice since the designers were intimately familiar with its design tools and integrated interactivity. Its vector-based approach allowed them to create high-quality visuals that matched those seen on the HUGO Web site. The concept consisted of 14 chapters and 33 subchapters, which, in turn, encompassed 1-10 steps. The application needed to be bilingual (German/English) and have a resolution of 1024x768 pixels. The huge amount of data resulting from the many images and extensive chapters made it difficult to run the entire application in Flash Player. When it came to integrating large videos at the stated resolution at a rate of 25 frames per second, the limits of what is possible in Flash MX were finally reached. It was at this point that Director and bytes in motion came into play.

Director and Video
Video playback in Director is highly efficient. Director streams video data directly from the CD-ROM and does not need to load the entire video into memory as used to be the case with Flash until recently.

The Apple QuickTime media player is pre-installed at HUGO BOSS. The integration between Director and QuickTime is as old as Director itself and posed no great challenge on the playback side. To meet HUGO BOSS's high standards of quality, we decided, after a few trial runs, to go with the Sorenson 2 Pro codec, which is capable of scaling video in high quality without a noticeable stair-step effect. We used Discreet Mediacleaner's 2-pass process to encode the videos at half their final resolution (512x384 pixel) at a variable bit rate using 25 frames and an average of 165 KB per second, and integrated them into Director at 200%. Sorenson 2 scales video using brightness and contrast vectors (see Figure 2). This yields a beautiful, smooth image even at twice the resolution. Thanks to the seamless integration between QuickTime and Director, Director is able to play these videos smoothly and with optimal sound.

Figure 2: No noticeable loss of image quality when using Sorenson 2
(left: original size, right: playback size in Director)

Thanks to the low data rate, we were able to burn the entire application, including about 30 minutes of video, to CD-ROM without using all the space available. The videos took up about 269 MB.

Director and Flash
Integrating the Flash files in Director posed a much greater challenge. On the one hand, we needed to achieve the highest frame rate possible, and on the other we were faced with known problems in conjunction with integrating very large Flash files in Director. However, after a number of tests we were able to achieve our goal (see Figure 3).

Figure 3: Flash member properties in the Property Inspector

The Flash members were added "direct to stage" using the normal frame rate and "auto-size" scaling. Director itself ran at twice the Flash member's frame rate (24 frames per second). This allowed us to achieve the best playback behavior possible. To make the application run as smoothly as possible, we embedded almost all of the Flash members completely into Director and split the application into several Director movies (see Figure 4).

Figure 4: The CD-ROM structureÑseveral Director movies

However, some Flash movies (SWF files larger than 12MB) caused Director to crash. Since these movies required no interactivity during playback, we were able to open them using QuickTime Player and then save the SWF files as QuickTime movies (.mov). Although these QuickTime movies contained only a Flash track, they played extremely efficiently using the Director QuickTime engine - at a rate never achieved in Director with Flash members (24 frames/second at 1024x768 pixels, without jaggies) (see Figure 5).

Figure 5: A Flash movie saved in QuickTime format prevented Director from crashing

Navigation
Since we now had Director movies with a lot of individual Flash members, we needed to program the entire navigation in Director. This included switching the mouse during button rollovers in a Flash member and detecting returns from a Flash page to the previous one. This required jumping to the last frame in the Flash member. To switch the mouse, we relied on the mouseoverbutton command:


if sprite(me.spritenum).mouseoverbutton = true and pStater = 0 then
      cursor 280
      pStater = 1
end if
if sprite(me.spritenum).mouseoverbutton = false and pStater = 1 then
      cursor -1
      pStater = 0
end if

We used the pStater property to ensure that the event occurred only once; otherwise the mouse would have flickered too much.

To detect a return to the previous page, we needed to determine the Flash member's last frame. We had asked the Flash designers to mark the last step (which could well occur in the middle of an animation) using a label called "ende." What follows is a simplified example:

x = sprite(me.spritenum).findLabel("ende")
sprite(me.spritenum).frame = x

Time Tracking
We were able to program time tracking, which was needed for each subchapter, each main chapter, and the entire application, right in Director. We also had to allow for jumps so users could briefly go elsewhere, for example to repeat something in a different location. For this purpose, we introduced a global property list called gSavelist which, among other things, contained the chapters. Each main chapter contained its own list of subchapters and values that tracked the time in milliseconds as well as their totals (see Figure 6).

Figure 6: Extract from gSaveList

Later, during evaluation, we were able to use the values for any number of calculations to track the various time parameters.

Controlling Flash Members from Director
Elsewhere in the application, we needed to transfer the text entered in a Flash member to another Flash member and to reposition various design elements of a Flash member (see Figure 7). The Flash and Director programmers involved in this project worked hand-in-hand to solve these issues since in Director it is best to control movie clips from a Flash member.

Figure 7: Text entry and repositioning of design elements in a Flash member

For simplicity's sake, we named these movie clips button1 through button10 so from a repeat loop in Director we were able to set their positions and enter text (see Listing 1).

In Flash, the #posX and #posY properties set the position of movie clip in the Flash member's rect. While using setVariable we were able to change the text variables button1.btext through button10.btext.

Summary
Director and Flash are a strong team. This combination is unmatched when it comes to highly interactive multimedia applications that include sophisticated visuals. The award we received is proof of this. Another great advantage: it's easy and economical to publish this content on the Web. Working around a few tricky spots, it's possible to create robust, unique user experiences that make a lasting impression.

Links

Biedermann und Brandstift GmbH: www.biedermannundbrandstift.com
bytes in motion GmbH: www.bytesinmotion.de
New York Festivals awards page: Click Here
CD-ROM main menu as a Web-based Flash movie: www.biedermannundbrandstift.com/apps/boss_nav.html
HUGO BOSS: www.hugoboss.com

Thomas Biedorf has been working with Director since 1992 (version 3). In 2000, he cofounded bytes in motion GmbH where he is currently the managing partner. bytes in motion develops highly efficient multimedia applications for online and offline use.