FLASH FOR TV BROWSERS

Flash can be used to create interactive web-based content for television subscribers. Although terms in this industry vary widely, accessing web content through television is often called interactive television.

There's a large opportunity to create Flash programming to be deployed for television because Flash provides distinct advantages in this market. Compared to HTML, it's easy to create rich, high production value content for set top boxes using Flash. Games, shopping, tutorials, product demonstrations, digital greeting cards, chats, advertising, applications, and interfaces can be created quickly and with a minimal amount of layout problems. Flash provides a "what you see is what you get" application and design tool for TV browsers.

Designing for TV browsers presents a variety of challenges because the television does not display like a computer monitor and the set top box is definitely not a computer. Interactive television is such a new market that it's uncertain exactly what kind of programming consumers will respond to. As of yet there's still no "killer app" for the interactive television market. At this stage, what's definitely known is that the television is not a computer and people don't use it like one.

Web Access through the Television

Services such as MSN TV (www.msntv.com) allow viewers to access the web and proprietary online content through a special set top box that acts as a web browser. MSN TV provides a web access set top box that works with cable set top boxes, but needs to connect to the web through a standard 56K modem. In other services, the viewer's local cable company or a digital satellite provider supplies the web access set top box, the connection to the Internet (which can be broadband, narrowband, or both) and also controls access to proprietary content. Proprietary content runs the gamut from "walled gardens" containing entertainment, information, and useful applications to EPGs (electronic program guides), VOD (video on demand), and broadcast synchronization programs.

Web access through television tends to do well in parts of the world where home computer ownership is fairly low. A set top box is much cheaper than a computer, but still provides broadband or narrowband access to the parts of the Internet that people want to use email, chat, information sites, search engines, music, and games.

As a service, web access through television has yet to be adopted in the United States by consumers or even deployed in a major way by cable companies. By contrast, the television has become a standard way to access the web in some countries, especially in Europe. In the United Kingdom, where 10 20% of people use interactive television, there's a viable market for web access television content.

What's a Set Top Box?

Anytime television viewers access the web or an enhanced TV program, they'll be using a set top box that contains a web browser. Sometimes called a receiver, set top boxes are made by large consumer electronics and technology companies such as Motorola (www.motorola.com), Scientific Atlanta (www.scientificatlanta.com), PACE (www.pacemicro.com), and Philips (www.philips.com). Some set top boxes act as both the cable box and the web access box, while others only offer web access and must be used in tandem with a standard cable set top box.

The set top box severely limits the options of developers because it's not at all like a computer. Most set top boxes only contain enough computing power to get the most basic jobs done. They have slow processors and no hard drives. Set top boxes are designed to be as inexpensive as possible while still doing a decent job of displaying web and television content. Although they do this job admirably, designing for these devices is somewhat similar to designing for computers 8 to 10 years ago.

TV Browsers

Each set top box comes equipped with a TV browser. Because the browser is "built into" the set top box, plug-ins usually can't be upgraded. Some newer set top boxes allow the browser to be updated by putting the browser into Flash ROM, but the majority of boxes in consumer's homes currently do not.

This means that whatever plug-ins ship in the browser on the set top box will be what the viewer will always have. Because technology is evolutionary, many people with web access set top boxes will be stuck with old plug-ins. Early adopters of Web TV (currently MSN TV) still have set top boxes that can only display Flash 3. Those boxes still exist in homes around the United States. If those users never upgrade the set top box, then they'll never move beyond Flash 3. Developers need to be aware of the audience capabilities for viewing Flash content.

There are a variety of companies developing and deploying browser solutions for the web access, interactive, and enhanced television markets. Microsoft (www.microsoft.com), Liberate (www.liberate.com), Canal+ Technologies (www.canalplus-technologies.com), and OpenTV (www.opentv.com) are some of the best known of these companies.

The browsers these companies create allow content to be seen in web mode (web pages) or in TV mode (enhanced TV programming). It would be useful if all browsers adhered to the same standards and specifications (currently pushed by the Advanced Television Enhancement Forum at www.atvef.com), but sadly they do not. Instead, each company has developed specific browser technology that requires different development tools and practices to achieve similar results. The market is still too fractured with competing technologies to make creating standard web-based programming for television a straightforward exercise.

Luckily the browsers support various versions of Flash. This is why Flash is such a great solution for this difficult market if the TV browser supports Flash, then it's possible to create one interactive television solution for playback on multiple set top boxes. Given that set top boxes might carry earlier versions of the player than is theoretically capable with the browser, it seems that Flash 4 is the most pragmatic choice for creating interactive television content at this time. The companies currently developing TV browsers support the following versions of Flash:

• Microsoft supports Flash 4

• OpenTV supports Flash 5

• Liberate supports Flash 5

• Canal+ does not support Flash

Challenges of Content Development for Television

Besides the basic Flash player version issue, there are a number of standard challenges in creating interactive content for television that developers must be aware of before they begin production. The following section sets out the main points that need to be understood and kept in mind throughout development.

Viewing Habits

With television, people are normally viewing the display from 8 12 feet rather than the 16 24 inches that is standard with a computer. There are also usually multiple people watching a television versus a single person at a computer. This means that graphics and text must be large to be readable and must stay on screen longer than when created for a computer monitor. Interface design should be simple and understandable from a distance. Multiple use for interactivity is more difficult, but it's useful to try to create interactive activities or content that allow more than one person to use in turn.

Simplicity

The television audience for web-based content may not have much exposure to computers or the Internet. Interfaces need to be kept extremely simple both for understanding and ease of navigation. The information architecture of a site or project needs to be extremely well-thought-out so that there are as few navigation categories as possible. Lots of choices will be hard to navigate on television and possibly confuse the audience.

Navigation

Most navigation of content on the television will occur with the tab button on an infrared keyboard or with the arrow keys on a remote. When navigating through interfaces on the television, it's standard for a yellow selector box or rectangle to surround the selected button or form element. This should be taken into account when designing interfaces so that important information is not obscured by the selector box.

Original set top boxes did not have a mouse with the keyboard. Although newer keyboards have a kind of mouse integrated into the keyboard, it's not nearly as responsive as a standard computer mouse so most users seem to still favor the tab key and arrow keys for quick movement around the screen.

To understand what this is like, set the mouse aside and attempt to navigate the web with only the tab key or the arrow keys. It can be extremely difficult at sites with complex navigation structures and becomes next to impossible if a site contains frames.

The biggest problem this presents to developers is that the tab and arrow control with buttons and form elements in Flash movies can be awkward. Flash reads elements for tabbing based on the horizontal and vertical positioning, the centerpoint, of the element. It's fairly easy to accidentally create symbols with centerpoints that cause Flash tabbing to move in an illogical manner through the interface, especially when form elements are added.

The other difficulty of navigation within most, if not all, TV browsers is that rollovers don't work. Buttons don't trigger the rollover action when tabbed onto with the keyboard or remote control, but instead trigger a press action. This creates real challenges for certain kinds of interface navigation that normally rely on rollovers such as drop-down menus.

Layout

Some TV browsers can't work with frames because the remote control won't move between them. It's best not to use frames in any layouts developed for TV.

HTML pages often have text layout problems on the TV browsers currently shipping with set top boxes. This is because many of the browsers, by default, increase the size of the fonts used in HTML pages for television readability.

Increasing the size of the font causes problems with text that wraps in columns or other well-defined areas of the page. Text that wraps in columns might end up with only one or two words per line. This quickly becomes unreadable. If there are fixed line breaks in the text, then the text can become hard to read because lines don't stay together properly when they break. Increasing the size of the font also often causes elements of the page such as graphics or Flash content to be pushed down or to the side in the layout.

This can definitely be a problem if Flash content is mixed with HTML content. It's important to carefully check the page layout on the television screen for text enlargement problems so that the Flash content doesn't get displayed in the wrong place.

Scrolling

Web users are used to scrolling down pages to access more content. Scrolling is still possible to do on televisions, but it's harder to do than with a computer mouse. The remote and the keyboard don't have the control over the interface that a mouse does on the computer. On some set top boxes and TV browser combinations, it's not even possible to scroll horizontally so content must fit the width of the television display.

The best solution to this problem is to make the content fit the screen size. Text and information can scroll automatically from right to left in the way it does now on news shows on television. In contrast, navigation can be provided to "flip" through pages of information more like a magazine.

Processors and Playback

Set top boxes are not computers with fast processors and good graphic cards. They are small, consumer devices primarily made to watch television. Their processors are slow and don't support intensive graphic redraw on the screen because that increases the cost of the box.

To optimize playback on these devices, stay away from the usual suspects in bad Flash playback, namely full-screen animation, animated transparencies, lots of symbols animating at the same time, animated gradients or transparencies, highly detailed animated drawings, and intensive ActionScript applications. With this in mind, keep the Flash movie as simple as possible while providing a rich experience.

Because creating content that plays back reasonably for TV browsers on set top boxes can be so difficult, it's important to develop for playback throughout the creative process. The most efficient way to do this is to plan the content and then begin creating it in a somewhat simplified format. At various stages of the production, test the playback on a TV browser and set top box in order to see if it works. If it does work, then it's possible to add more complexity to the design or animation. Keep testing the piece as complexity is added and then, at the point that it doesn't work well, it's possible to scale back slightly on the complexity to achieve proper playback.

The other way to develop content is to develop it as completely as possible. This will probably result in movies that are much too complex for reasonable playback on most set top boxes so it's then imperative to scale back the content until it plays properly. This is a reasonable way to work if the content must display well on computers (fast processors, good graphics cards) and on television (slow processors), but it's also very frustrating to have to cut back on the richness of content.

It's very difficult to create rich content that will play back well on both platforms so it's also possible to develop two separate projects in parallel, one for display on televisions and one for other devices such as computers. Although quite a lot of extra work in its own right, this may still be the most efficient way to develop content for these extremely disparate devices.

File Sizes

File sizes should be kept as small as possible because although many set top boxes are being delivered along with high-speed cable access, this is not always the case. It's important to know what the audience for content can handle because television viewers are not used to waiting for anything. If they've never been on the web and encountered download times for content, then it's likely that they won't wait for anything to load. Plan the file size of content according to what the audience can handle.

On the other hand, if the audience has broadband access, then take advantage of it and make content richer with higher-quality sound and images. These are the two main aspects of Flash production that add significantly to file size so don't compress the images too much and use stereo sound recorded at a high quality and export with little compression. This should result in higher production values in Flash content.

Hard Drives

Be extremely cautious about creating content that relies on the user having a hard drive. Although a few of the newer set top boxes have hard drives, most of them do not. This means that most content that requires client-side saving will not work properly. Cookies can no longer save user information and be retrieved by the Flash movie. It means that users will never have files cached on their hard drive and instead will have to get the files each time they visit a site. This represents a difficult situation because it makes preloading difficult and will normally extend loading times because every file in a site is loaded anew.

Connectivity

Set top boxes usually don't have great two way connectivity. The downstream rate (the speed of data coming into the device) is usually much higher than the upstream rate (the speed of data leaving the device). In many cases the downstream comes through a broadband connection, while the upstream goes through a regular modem connection over a phone line. Don't assume good upstream viewer connectivity when designing content. This seriously affects real-time content like chats, messaging, and games.

Multiple Windows

Most TV browsers don't allow multiple browser windows to be open at the same time. Avoid pop-up windows within a site because they will not show up properly. If there is a link to a pop-up window and the user selects it, then many TV browsers will show that window as a new full screen page on the television.

JavaScript and Other Programming Languages

JavaScript can be used with Flash movies to integrate more tightly into HTML pages and "talk" better with server-side applications. Unfortunately, JavaScript implementation is not standard across the different TV browsers so test against the target system early and often to ensure success. TV browsers are also mixed when it comes to adoption of Java or other controls such as ActiveX. Research the target platform before committing to developing content with these kinds of programming requirements.

Streaming Media

Flash can be used to combine with streaming media formats such as Windows Media Player. On systems where this is available, be aware that both Flash and video require significant processor resources. When the video plays, it's important that very little, if anything, is going on in the Flash movie.

Usually the video/audio will get the processor first so during playback the Flash movie will suffer dramatically. It's highly likely that frames will be dropped in the Flash movie when the audio/video is playing. If there's a lot of frame-based ActionScript, then the movie may not run properly because the ActionScript can be skipped.

Test, Test, Test

To review how web-based content will look in a set top box browser, it's possible to download the Web TV browser from Microsoft's web site. This is an incredibly useful tool for simulating playback of content on televisions and is available for both PCs and Macs. Currently the link is http://developer.msntv.com/Tools/WebTVVwr.asp. To work through the following examples, it's best to download and install this program.

Animation for TV Browsers

Let's look at a simple animation file to understand some of the issues surrounding Flash content for TV browsers and set top boxes. "The Prague Years" animation that was created for playback on Pocket PCs should provide a reasonable file to convert to television because the animation is fairly limited.

The first issue, and one that arises frequently with web-based content and television display, is that the cartoon is not at the correct dimensions. "The Prague Years" movie is sized at the vertical dimensions of 230x250, an incredibly awkward size for the horizontal dimensions of television (see Figure 11.7).

Figure 11.7. The cartoon doesn't look right on television at the size it was created.

The simple, but incomplete, way to deal with this is to surround the animation with a black "frame," set the background color to black (see Figure 11.8) and then resize the movie to 100% in the HTML (see Figure 11.9). This basically creates a letterbox style around the movie (in the case of "The Prague Years" this is vertical rather than horizontal, as you see in Figure 11.10). Unfortunately television viewers expect a full-screen experience so this quick and easy way to get simple content on the television is not that useful in the real world. Feature films are resized to fit television screens partly because viewers don't like letterboxing on their televisions.

Figure 11.8. Change the background of the movie to black in case any of the movie bleeds outside the frame.

Figure 11.9. Resize the Flash movie in the HTML document.

Figure 11.10. "The Prague Years" letterbox is vertical.

It's important to add vspace="0" hspace="0" in the BODY tag of the HTML page in order to make the Flash movie appear flush at the top and left sides of the television.

The difficult, but much better, way to get movies in the right dimensions is to resize the entire animation inside of Flash. Although time consuming, resizing does provide the best viewer experience.

1. The first step is to change the movie size to 640x480 in the Property Inspector (see Figure 11.11).

   Figure 11.11. The movie stage area must be resized to 640x480.

   

2. Create a rectangular box that's exactly the same size as the new movie dimensions. An easy way to do this is to create the rectangle, select it, and use the align tool to resize it to the same size as the movie stage (see Figure 11.12). Make it a symbol and call it movie resize tool.

   Figure 11.12. Create a movie dimension rectangle to help resize and place the graphics in the movie.

   

3. Now select this symbol and scale it down proportionally to the size of original cartoon. Place the symbol over the original cartoon so that it shows how the cartoon will "fit" into the larger movie dimensions (see Figure 11.13). When the cartoon is resized to fit the larger movie dimensions this will provide an easy visual cue to how the cartoon needs to be moved around the stage.

   Figure 11.13. Proportionally resize the movie symbol to the size of the original cartoon.

   

4. Next, change the view of the graphical elements from solid to outlines. There are two ways to do this. The first is to select the small square box above the layers in the timeline (see Figure 11.14). This will Show All layers as Outlines. The second is to select View, Outlines. This turns the graphic objects into aliased outlines (see Figure 11.15). This can be useful when working with huge number of graphic symbols because it uses less computing power to render them. However, it can also make working with them difficult because the lines aren't graphically clean.

   Figure 11.14. Select the small square box above the layer names to turn all the graphics on the layers into outlines.

   

   Figure 11.15. Turn graphics into aliased outlines to work more quickly and with less strain on the computer.

   

5. Unlock all the layers. Select the Edit multiple frames version of the onion skin and move the onion skin select heads to select all the frames in a scene (see Figure 11.16).

   Figure 11.16. Use the Onion Skin tool to edit all the frames in a scene at the same time.

   

6. Be sure the stage is the active area by clicking on it with the arrow tool. Select all the objects on the stage with Edit, Select All (see Figure 11.17). In Flash 5, if the stage is not selected as the active area then Select All will select all the frames in the timeline instead of the graphics. This is an easy mistake to make.

   Figure 11.17. Use the onion skin and then the Select All command to select all the graphics.

   

7. Resize the graphics to the new movie dimensions using the Movie Resize tool symbol as a visual cue. When the Movie Resize tool symbol is the right size and matches the outline of the stage, then the resize has been successful (see Figure 11.18).

   Figure 11.18. After the Movie Resize tool symbol is the same size as the movie stage area, the cartoon has been properly resized.

   

8. Turn off the onion skinning.

9. Change the view of the graphics back to normal by selecting View, Antialias Text or clicking the small square at the top of the layers (depending on how the graphics were turned into outlines).

10. Play back the scene to see if any objects were missed in resizing.

It's then possible to go through the movie scene by scene and quickly resize the entire animation and motion graphics sequence in this way. What quickly becomes apparent in transforming "The Prague Years" cartoon is that there is an enormous amount of detail missing from the sides of the cartoon. A lot of work will need to be done to fill in the background of the cartoon out to edges of the new movie dimensions.