<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

IE4 Multimedia Controls

What weíll cover in this chapter:

        Background on IE4 Active X Multimedia Controls

        IE Multimedia Controls

        The Sequencer Control

        The Sprite Control

        The Structured Graphics Control

        The Path Control

 

Background:

I support standards, really I do, but standards committees like the W3C are inhibited by one small detail: They need to get it right the first time. Because of this they are not free to experiment with technologies and they can't harness platform-specific strengths. As we all know, Microsoft suffers from no such limitations. Their whole business is built on putting out products and then making incremental improvements. They feel free to write platform specific code and tie Windows into everything you create. Both Netscape and Microsoft have been guilty of this approach in the past. If both companies sat around and only implemented W3C standards, then we'd still be working out the syntax for tables. Microsoft has chosen to extend the capabilities of the IE4 browser without following standards. If developers find them useful, then maybe the W3C will get around to creating a standard. I don't care if Microsoft's standards are implemented, but I would like to see this functionality incorporated into all browsers.

 

Technical Limits:

The Active X Multimedia Controls are very efficient. The controls run very well on any Pentium machine.Since they are built into IE4+ they donít need to be downloaded the way other Active X controls do.However this also makes them incompatible with Netscape.With downloadable Active X controls Windowís Netscape users could use a plug-in such as nCompass to view Active X controls.This canít be done with the Multimedia Controls.

 

Underlying Technology:

You may be asking what are Active X Multimedia Controls and what do they look like?As a developer you will interact with them through HTML like parameter tags.For those of you who have passed parameters to a Java applet these look much the same way.If you are using the Path Control Multimedia Control, you will designate the points the object (any DIV tag) will travel between and how long it will take.

Compatibility is the main issue with Active X controls.These controls only work in IE4+ on Windows 95/98 and NT machines.They do not work with Windows 3.1 due to limits in the 16 bit OS.They are also incompatible with the Sun and Macintosh Internet Explorer 4.0 implementations.†† These controls should be used sparingly.If you happen to work in a closed Windows only environment, such as a corporate intranet of developing an IE4+ Active Channel then these controls make a good deal of sense.They are easy to configure, using parameters in the HTML and they are built into the OS to avoid lengthy downloads.

 

At this point you're saying "OK, so this technology is totally incompatible and runs only in Windows, why is he writing about it?" The truth is, these controls provide some very cool multimedia functionality. Before I started in web development, I spent a few years developing CD-ROMs, mostly in Macromedia Authorware and Director. When I moved over to web development, I felt very inhibited by the media. Worrying about download times and writing HTML for static web pages was a big come down from CD-ROM with a blazing fast (by comparison) 150KB/S transfer rate for a 1X CD-ROM. I probably would have gone back to CD-ROMs if it hadn't been for Shockwave. Suddenly I was able to leverage my previous skills to the web. While Shockwave is great, it is still confined to a box on the screen and can't interact with the rest of the screen. The IE4 multimedia controls will be very familiar to Director and Authorware developers. They bring some of the functionality of these programs to the web with smaller downloads and freedom to interact and control all the objects on the screen.

 

Code:
There are many Active X controls built into IE4. However, I'll be concentrating on the four that make multimedia easier. These four are known collectively as the DirectAnimation Multimedia Controls. These include the Sequencer control, Sprite control, Structure Graphics control and the Path control. Again, it's important to remember that these controls are built into IE4 they don't have to be downloaded. Let's take a look at them.

The Sequencer Control

This control is my favorite. For Macromedia Director users, the Sequencer Control will bring back memories of the Score. As I discussed above, this control allows you to make events occur over time, something that is essential to online storytelling. The Sequencer allows you to trigger functions at specific times. By combining many actions under this control the user can create more complex actions. Javascript allows you to create a similar control using the setTimeout method, however it is much more difficult to write. I've also written a javascript which handles all the functionality of the this control in javascript and is cross browser compatible.This Javascript is available in the Timeline chapter.

 

Now let's take a look at the Sequencer Control. For a real world example of the sequencer control, subscribe to the active desktop component at Discovery Channel Online and look at the feature stories.

Let's talk about the code. First, you must call the Active X control. Normally you would specify a URL from which the Active X component should be downloaded. However, since these components are built into IE4 you just need this line:

<OBJECT ID="Seq" CLASSID="CLSID:B0A6BAE2-AAF0-11d0-A152-00A0C908DB96"></OBJECT>

This loads the component into memory. Notice in the code that the Sequencer component is started when the page is fully loaded. This is done with the the following function. (Notice that we are using VBScript for this example, this can also be done with javascript).

Sub Window_onload()
Call Seq("1").Play
End Sub

This function starts the Sequencer when the page is fully loaded. Now we can trigger any function we want at any time we want.

Sub Seq_OnInit()
Call seq("1").at(1.000, "pic1_show", 1, 0.000, 1)
Call seq("1").at(3.000, "pic2_show", 1, 0.000, 1)
Call seq("1").at(6.000, "pic1_hide", 1, 0.000, 1)
Call seq("1").at(8.000, "pic3_show", 1, 0.000, 1)
Call seq("1").at(10.200, "pic2_hide", 1, 0.000, 1)
Call seq("1").at(11.100, "pic3_hide", 1, 0.000, 1)
End Sub

Let's take a look at what one of those lines means. The first line in the sequence is:

Call seq("1").at(1.000, "pic1_show", 1, 0.000, 1)

Here is what those numbers stand for.

Call seqname("Action Set") .at (time, "script", loop, interval, tiebreak)

Let's talk through this line in simple English. This line would read: start the sequence named "seq" 1 second after the page loads and trigger the function "pic1_show" so that it plays once with no looping.

Very easy. Now if you want to trigger other functions at different times, just change the time and the function name. In the example I showed you, we show and hide pictures. This is good for slide shows or for storytelling.

Let's look at some of the other variables in the function. Notice that "loop" is set to 1 in our example. That means the script only plays once. To make it play five times, increase the number to 5. To make it play an infinite number of times make the number -1.

The interval controls how long the script should wait between loops. In our example this is set to 0.000. The fastest the loop can be executed is 0.020, which is every 20 milliseconds. The default is 0.033, this means every 33 miliseconds, which is 30 times a second.

The tiebreaker controls the outcome if two functions are set to trigger at the same time. In our demo this is set to 1. The priority of an action decreases as the number gets larger. The most important action has a value of 0. The least important value that can be given is -1.

The Sequencer control is a powerful control for creating time-based presentations and storytelling. This control allows the creation of web pages that act more like CD-ROM based multimedia than traditional web pages.

The Sprite control

I wasn't that impressed when I first saw the Sprite control. It is basically an upgrade to Animated GIFs. However, after I played with it for a while, I found some advantages. First of all, its scriptable. You can have animation do one thing when you mouseover, another when you click and another when the mouse isn't near it. Also, the graphic file is stored as one big strip of graphics, much like a filmstrip. This makes it easy for a graphic artist to change the file without having to run it through a GIF animation program again. Frames can be reused, and the playrate can be controlled from in the HTML without having to recompile the animated GIF.

Let's take a look at the code.

<OBJECT ID="Robot1" STYLE="position:absolute; left:10; top:10; WIDTH:73; HEIGHT:73; z-index:1; visibility: visible; cursor:hand" CLASSID ="clsid:FD179533-D86E-11d0-89D6-00A0C90833E6">
<PARAM NAME="Repeat" VALUE="-1">
<PARAM NAME="PlayRate" VALUE="9">
<PARAM NAME="NumFrames" VALUE="4">
<PARAM NAME="NumFramesAcross" VALUE="1">
<PARAM NAME="NumFramesDown" VALUE="4">
<PARAM NAME="SourceURL" VALUE="http://www.ruleweb.com/dhtml/activexanimate/graphics/ani_bots.gif">
<PARAM NAME="MouseEventsEnabled" VALUE="True">
<PARAM NAME="AutoStart" VALUE="1">
<PARAM NAME="UseColorKey" VALUE="1">
<PARAM NAME="ColorKey" VALUE="255,255,255">
<PARAM NAME="FrameMap" VALUE="1,1;2,1;1,1;3,1;4,1">
</OBJECT>

Let's go through this line by line. In the first line we load the Active X component and specify its location in a manner similar to placing style sheets.
The "repeat" value is set to -1 for infinite repeat. You may also set any number you would like.
The play rate determines how fast it will play. Experiment with this to get the right speed.
Numframes is the total number of frames that make up the filmstrip. The filmstrip can also be multiple frames down, so that a four frame filmstrip might really be a two-by-two block. I like to keep the graphics in a single strip.


The SourceURL is where the filmstrip graphic is found. MouseEventsEnabled = True allows you to have the graphic change on mouse events.
Autostart makes the animation play when the graphic is loaded. You could also chose to have the animation start on a mouse event.
The UseColorKey and ColorKey are used to make a color in the graphic transparent.
The FrameMap determines the order the frames play in. The frames are determined by two numbers (column number, row number) separated by a ";". Frames can be reused over and over again which saves download time.

While the Sprite Active X component does improve on the Animated GIF standard, it doesn't provide enough improvements to switch to this proprietary technology. I'd stick with animated GIFs unless, you know your web pages will only be viewed in IE4.

The Structured Graphics Control

The Structured Graphics control should really be called the Vector Graphics control. It allows IE4 pages to display vector graphics. For those of you not familiar with vector graphics there are two kinds of graphics: raster graphics are types like GIF, JPG and PICT. They are one size only and can't be scaled without noticeable blurring and artifacts appearing. Vector graphics are produced by programs like Macromedia Freehand and Flash. They can be scaled without losing clarity. Vector graphics are much smaller in download size. That's why Flash downloads are much faster than normal Director based Shockwave.

I'm a little disappointed with this control, mostly that it doesn't live up to its potential. The web is begging for a vector graphics standard. However, certain elements of this control make it very hard to work with. Its is hard to position, slow to draw to the screen once loaded and sometimes doesn't draw at all. This unreliability makes it difficult to work with.

Despite these drawbacks some bright points to this control do exist. These graphics can be controlled and manipulated by scripting. In addition to smooth resizing they can be rotated in all three dimensions. Their download size is very small and is contained in a text file which can be stored in the HTML or in an external file. The file is created by using a conversion program to convert a Windows Metafile (WMF) into a text file. Windows Metafiles can be exported from Freehand. The conversion program from WMF to text file is part of the Microsoft Internet SDK..

The vector image is called and positioned with the Active X control

<OBJECT id=SG1 STYLE="POSITION:ABSOLUTE; HEIGHT: 300; LEFT: -50; TOP: -50; WIDTH: 300; ZINDEX: 0" CLASSID = "CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">

The lines of numbers in the <PARAM> you see are the coordinates generated by the conversion program from the Internet SDK. Don't worry you don't have to enter the coordinates.

The rotation in the X,Y and Z axis are controlled by the script at the top. Initally the graphic is drawn and scaled to 50% its original size and the rotation is started. This is controlled by the lines.

Sub Window_OnLoad()
call SG1.Scale(0.50, 0.50, 0.50)
RotateAll
end sub

The rate at which it rotates is controlled in the lines:

Sub RotateAll
Call SG1.Rotate(0,0,-10)
FILK = Window.SetTimeOut("Call RotateAll", 10, "VBSCript")
End Sub

The -10 in the second line controls the degree of rotation in the clockwise axis. The first two numbers, the horizontal and vertical axies, are set to zero so that no rotation happens along those axes. Try experimenting with these numbers.

Despite it limitations, the Structured Graphics control can create large scale images on the web with very small downloads. It also provides rotation in three dimensions. One favorite trick of mine is to have a vector image rotate or fly into position and then to have it fade into a JPG or GIF image. This combines the flexibility of vector with the photorealistic aspects of raster images.

The Path Control

Much of what youíll see covered here is also covered in the Animation Chapter, but it is included here so that all the IE4 Multimedia Controls are covered in one area.

This final control may seem redundant at first. It allows for objects to be animated along paths. One of the strengths of Dynamic HTML is its ability to move objects around the screen. In fact, path animation is one of the few features that works equally well in both Netscape 4 and Internet Explorer 4.

So why reinvent the wheel? Well the path control makes it very easy to create simple animations or complex animations. The code to create animation in Dynamic HTML can be fairly complicated and doesn't lend itself to beginners. The Path Control is simple and can easily be set up by someone who only knows HTML.


Let's look at the code.
First the Active X component must be loaded.

<OBJECT ID="robotPath" CLASSID = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6">

Next, the Path must be told to run as soon as the whole page is loaded. It is important to wait for the page to load, otherwise the control may animate the graphic before it is loaded. Nothing looks worse than a broken graphics icon animating across the screen. This is handled with the onload event in the body tag and triggers the function:

robotPath.play();

This starts the graphic animating along the path. The graphic that will be animated must be given a name, in this case "robots", so that the control knows which graphic to use.

Now lets look at the control.

<PARAM NAME="AutoStart" VALUE="0">
<PARAM NAME="Bounce" VALUE="0">
<PARAM NAME="Duration" VALUE="2.0">
<PARAM NAME="Repeat" VALUE="1">
<PARAM NAME="Shape" VALUE="PolyLine(2, 0,150, 350,150)">
<PARAM NAME="Target" VALUE="robot">
</OBJECT>

As you can see the script is very easy. Let's look at the parameters. The autostart parameter is self-explanatory. If it is "1" then the script autostarts; if it is "0" then it does not.
Bounce makes the animation go back and forth along its path. Duration determines the time from the start of the path until it reaches the end. Repeat makes the path play a certain number of times. Entering "-1" here will make it infinitely repeat. This can be a great effect when combined with Bounce. The shape of the path can be four different types:

                    Polyline- The polyline is set of straight paths. it can be one straight line or a series of straight lines.

                    Spline- The spline follows a series of coordinates which are smoothed using a spline-based path. This a a good method for producing smooth complex paths. The following is an example. The first number tells the number of points on the path. The rest of the numbers are (x,y) coordinates for points on the path. This path has 12 points.

<PARAM NAME="Shape" VALUE="spline(12,20,50, 30,30, 50,10, 80,40, 110,60, 130,50, 140,30, 130,10, 110,20, 80,40, 50,60, 20,50)">

There are also two other types of paths, Rectangle and Polygon, which are seldom used.

As you can see, the Path Control is great for quick animations in IE4-only pages. All you need is the set of coordinates that the animation will follow and you're ready to go. The spline based path is especially time-saving since it provides smoothing. All in all the Path Control is a powerful addition to the animation capabilities that already exist in Internet Explorer 4.

Summary:

The Active X Multimedia Controls are some powerful stuff.Microsoft has leveraged some of the features of their operating system to provide web developers with some tools which are easy to use and which are unique to web development.However, in using them we loose Netscape users and all IE users on other platforms besides Windows.The best that can be hoped for is that Netscape or the W3C will accept these easy to use tools as a challenge and will create some standards based tools with similar functionality.Until then be sure to brush up on your browser detect techniques from Chapter 1 and be ready to create multiple pages.I donít know about you, but once I see what these tools are capable of I have a hard time falling back on animated GIFs to create multimedia.

Links:

Active X Multimedia Controls:

http://www.microsoft.com/directx/dxm/help/da/DA_E0019.htm

 

Windows Metafile to Structured Graphics Converter

http://www.microsoft.com/directx/dxm/help/da/da_e0025.htm

 

Sequencer Active X Control:

http://www.ruleweb.com/dhtml/Sequence/jeffsequencex.html

 

Sprite Control Example

http://www.ruleweb.com/dhtml/activexanimate/index.html

 

Structured Graphics Example

http://www.ruleweb.com/dhtml/vector/vectorx.html

http://www.ruleweb.com/dhtml/flyin/flyin.html

 

Path Control Example

http://www.ruleweb.com/dhtml/path_control/path_code.html