 | ||
|
| ||
| ||
|
| ||
December 15, 1997
The following article was originally published in the Site Builder Network Magazine "Site Lights" column. (Now MSDN Online Voices "Design Discussion" column.)
The Site: Discovery Channel Online ( http://WWW.discovery.com/ 
), special feature: Sci-Fi Fantasy: Comics at the Pentagon
The Designers: Microgroove
Requirements: Discovery.com uses browser detection and sends different versions of its home page for different browsers. This special feature story is delivered only to Internet Explorer 4.0 users.
The other day I received an e-mail from a coworker that included a link to a recently released article at the Discovery Web site. Since it was a busy day, and the e-mail was marked low priority, I decided to save it for later. When later finally came along, I was in an e-mail-deleting mood, but somehow I spared this one, and decided to take a look. I found myself experiencing a very interesting style of interactive design, using several technologies I have discussed in previous Site Lights. It's a great real-world example from which you can learn about Dynamic HTML (DHTML) and Cascading Style Sheets (CSS). I'm glad I didn't lose the link by mistake during my e-mail-deleting frenzy!
Microgroove has done it again. They really have a talent for pushing the envelope. Much like their Active Channel work for the Rolling Stone channel , they have created an entertaining, captivating experience for Discovery. The article uses Japanese futuristic animation and clever Dynamic HTML to set the stage for an engaging article about human exoskeletons.
Microgroove's designers are experts at telling an intriguing story that sparks curiosity by using clever DHTML and CSS techniques. The design is clean, simple and clever. Note also how the work provides an intuitive, quick user experience.
So how'd they do it? How did they push the envelope? Let's take a deeper look behind the scenes to learn how you, too, can add some leading-edge effects to your Web projects.
Working with Discovery, Microgroove came up with an idea to use DHTML to deliver information with a presentation style that diverges from a traditional Web page design. Together, they built a piece with a creative tie-in to the renowned Japanese sci-fi animation of AnimEigo . The article promotes curiosity and creates an unexpected multimedia wrapper around an article that would traditionally be put on the Web as a simple news story.
"It's Just a Sci-Fi Fantasy Or Is It?" The article begins with this hook, introducing technologies used in the world of Japanese sci-fi animation with a rich multimedia presentation. At the end of the presentation, the viewer is asked to guess which of a series of techno-feats are still fantasies, and which are reality? After having a chance to answer, viewers are given an article on the real-world applications of what appears to be science-fiction technology.
I asked Microgroove for some technical and design tips on how to build a fluid sequence of events using DHTML.
Microgroove used the <DIV> tag quite extensively in this project. They kept the presentation down to a couple HTML pages -- but to the viewer, it looks as if there are several different pages. The <DIV> tags served as easy ways to separate the presentation into segments or pages. Also, this format of HTML design enabled them to comment out various parts of the presentation for testing and focused design work.
"Although the presentation is in fact one HTML page, the presentation is best described as a series of visual 'pages.' We used <DIV> tags to group these 'visual page' elements in the code. This allows for easy transitions between pages in the presentation, and takes care of z-order and visibility issues."
- Microgroove
When you are experiencing the article, choose Source from the View menu. You can easily seethe <DIV> tags for "page 1," "page 2," and so forth, either in madox.html or macross.html.
"To make the presentation as fluid as possible, two timing devices are used. First, the Active X Sequencer Control. It is crucial when wanting to hit a function multiple times. Second is the OnFilterChange event. By using this event in the critical path of the presentation's timing, we can be sure a particular visual effect is complete before firing the next event."
- Microgroove
The following is the object tag used for the Sequencer Control. This object is initialized and then is scripted in VBScript to sequence all the events. To learn more about the Sequencer Control, see The Microsoft DirectAnimation Multimedia Controls.
<OBJECT ID="seq" CLASSID="clsid:b0a6bae2-aaf0-11d0-a152-00a0c908db96"> </OBJECT>
The article also uses the Windows Media Player Control 
for audio. The original audio came from animation. When Microgroove digitized the audio, they recorded it at twice the normal speed. The editor they used was Sound Forge . The file playback rate is manipulated through script. This trick was also used to create other special effects for sounds used in the piece.
  |
Microgroove uses feedback on navigation elements by implementing OnMouseOver events, by swapping in a new state of a graphic, or by changing the color of the system text. In the graphics below, you see a GIF file representation of the changes that occur when you mouse over the image. The type changes from its original color to white (#FFFFFF) and one image of the character called hiMadox becomes visible. |
<div style="position:absolute; left:0; top:0;
width:189; height:240; z-index:1; cursor:hand"
onmouseover="javascript:txtMadox.style.color = '#FFFFFF';
hiMadox.style.visibility = 'visible';"
onmouseout="javascript:txtMadox.style.color = '#999933';
hiMadox.style.visibility = 'hidden';"
onclick="window.navigate
('/AREA/TECHNOLOGY/VIRTUALTECH/ISSUE1/MADOX.html')">
</DIV>
All of the article's pages use style sheets to define the layout and style of the text content, and to create graphical illusions during the presentation. Style sheets are used for positioning elements, adding filters, embedding fonts, and typographical design.
"Typography has always been a crucial part of the design. In the past, our designers have had to 'ballpark' type layouts because of the nature of html type. In this design however, we are embedding two fonts and using CSS to precisely carry-out the designers' vision for the typography."
- Microgroove
View the source code for the article to see the style sheets used on each page.
The article uses font embedding to enable the fonts OCR A Extended and Eurostile. The pages include embedded and inline styles for individual page formatting and positioning. They cleverly hide the font-embedding source in a linked style sheet.
Each page links out to a .css file for font embedding.
<LINK REL="stylesheet" TYPE="text/css" HREF="vtech.css">
The Embedded Open Type (EOT) files were created using WEFT, Microsoft's Web Embedding Font Tool. Here is what the source in the linked style sheet looks like.
@font-face {
font-family: OCR A Extended;
font-style: normal;
font-weight: normal;
src: url(ocraext0.eot);
}
@font-face {
font-family: Eurostile;
font-style: normal;
font-weight: normal;
src: url(eurosti0.eot);
}
As I explored this article, I was also curious whether the ultimate design differed from what the clients had first envisioned. Or did Microgroove have full control over the design? What was the working relationship between Microgroove and Discovery?
"Discovery Online wanted us to 'take a shot' at the design for this section. One of our designers, Ellen Borchard, worked closely with Discovery's art director, John Bell, to arrive at the current look of the piece. Our goal has always been to not only push the technology envelope, but create very rich design. By having Discovery's art director as our point of contact, we get the kind of meaningful feedback that allows us to carry this through."
- Microgroove
While you are holiday surfing, I invite you to find a machine running Internet Explorer 4.0 and jump into this article in its richest form using Dynamic HTML and style sheets. View the source and learn how to create a clever, episodic article using Dynamic HTML for your Web site in the New Year.
Incidentally, Microgroove and Discovery have two more special features coming soon on Discovery.com.
Nadja Vol Ochs is the design consultant in Microsoft's Developer Relations Group.
Tips for creating effective online entertainment experiences, courtesy of Lisa Lopuk, co-founder and creative director of Electravision, and designer of Suspect:
Work backward from an online experience or story-game structure you have in mind. An online experience could, for example, be a multi-player exploratory environment. Then brainstorm ways to make that experience possible, both technically and from a user-interface perspective. From that skeleton, begin to focus your content ideas, creating stories, characters, and scenarios that work. As a bonus, your underlying structure can usually be extended to support a whole series, creating a franchise of Web entertainment.
Use specialists throughout. If you're not a writer, don't assume you can create a concise, compelling story by yourself. For the development of Suspect, Electravision created an interactive story framework and the basic story premise before turning it over to a professional pulp-fiction writer.
Get feedback from your audience by whatever means you can devise. In Suspect, the only way a user can find out if the case has been solved correctly is to enter some basic feedback and personal information.
Photo Credit: Michael Moore/Microsoft Corporate Photographer
Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top