Could it be that we're about to see the disappearance of QuickTime, Windows Media Player, and RealOne as viable Web players for streaming video and audio?

Now that I have your attention, this question is not as radical as it appears at first glance. The release of Flash Player 7 offers you one serious tool for the Web playback of streaming rich media without the use of third-party plug-ins that hijack valuable Web real estate and bandwidth.

Why do we need the QuickTime, Windows Media, and RealOne players when it comes to video and audio on the Web? I really don't appreciate Apple's begging me to upgrade to Pro. Windows Media Player inevitably tells me I am missing a codec, and when I ask it to show me which one, the answer is inevitably: "Don't know, but I am sure you are clever enough to figure it out." RealOne, apart from the fact that it too has trouble finding codecs, also litters my desktop with an assortment of RAM files. Not only that, I have absolutely no guarantee that users even have the plug-ins or can see the content.

The other issue is purely selfish. As I said in an article regarding this topic on the Community MX site, "If I control the Web turf, why am I ceding a piece of it to a third party?" Which brings us to that Trojan horse known as the Flash Player.

Jeremy Allaire has been quite adamant over that past year or so, telling anyone who will listen that the Flash Player really is a Trojan horse. He claims the release of the Flash 6 Player was like "distributing hundreds of millions of next-generation communication devices, and then later turning them on." He is not far from the truth on that one, and the release of Flash MX 2004, Flash MX Professional, and Flash Player 7 not only turned them on but also turned those communication devices up to full power.

To see an example of the Trojan horse at work head over to www.brendandawes.com/sketches/voices. As soon as you arrive at the page the video, with U2 soundtrack, starts to play. Brendan Dawes, who is a principal of Magnetic North in Manchester, England, shot the video during a trip to New York and chose Flash MX for a variety of reasons.

The video was assembled and output using Final Cut Express. Once Brendan was satisfied with the final product, he used Sorenson Squeeze (more about that later) to output the final .swf file. "I could have exported it as an FLV," says Brendan, "but for this purpose I had no need to add anything like interactivity to the video, so the exported SWF was ideal. I use Squeeze because it's superior to the built-in encoding in Flash MX. A definite buy if you're going to do video in Flash."

The piece that provided me with the revelation that Jeremy Allaire and Macromedia may be onto something is a short clip I use on my site, which can be found at www.tomontheweb.ca/MMDesign/Story3.htm. With this one I not only embedded the video in the page but created the video controls in Flash MX 2004 using the buttons and behaviors that ship with the application. This revelation didn't hit me until after the fact. When I was writing my latest book, Building Dynamic Web Sites with Macromedia Studio MX 2004, I included a review of the new video features of Flash MX 2004. When I got around to putting the Storytelling lecture up on my site, I had a couple of QuickTime videos to include so I dug out the chapter and created the player. It was when I used a browser to visit the page that it occurred to me that something very profound is going on here. No streaming indicator. No player. No codecs. Just a video with an audio track and an on/off switch.

What makes this so interesting is you can now create your own video interfaces and controls in FreeHand MX or Fireworks MX 2004, assemble and code them in Flash MX 2004 or Flash MX Professional, and quickly embed the resulting .swf file into a Dreamweaver MX 2004 Web page.

The remainder of this article details the creation of the video controls in FreeHandMX and Fireworks MX 2004, the creation of the FLV file for use in Flash, and the assembly of the Flash movie in Flash MX 2004 Professional.

Creating Video Controls in FreeHand MX
We are going to create a rather simple Play button that contains the Up, Over, and Down states needed in Flash MX 2004. Here's how to create a 3D look using the tools in FreeHand MX.

1. Open a new document and select the Ellipse tool. Create a circle that is about 70 pixels in diameter.
2. With the circle selected open the Properties panel and select the Fill tab. Select a linear gradient and fill the gradient with two colors of your choosing.
3. Click on the circle and, with the Option (Mac) or Alt (PC) key depressed, drag a copy of the circle from the selection. Click the Fill tab, click on the gradient in the Fill panel, and when the gradient handles appear, change the gradient direction to the opposite of the original circle, which should be either vertical or horizontal.
4. Change the selected circle's dimensions to 50 pixels wide and 50 pixels high in the Property Inspector. Press the Enter/Return key and the circle will shrink.
5. Select the text tool and click once on the small circle. Enter the word "Play". With the word selected, open the Text Inspector and set the word's font to a sans serif and the text color to white.
6. Move the small circle on top of the large one. Select the circles and the word and select Modify > Align > Center Horizontal and Modify > Align > Center Vertical. This will line up all of the objects on the center point of the large circle.
7. To create the Over and Down states, copy the object and change the fill direction of the gradient for each object. You also might consider either changing the color of the text or applying an Envelope - Modify > Envelope > Create - to the text to give it the illusion of being pushed in or raised.
8. Convert each button object to a symbol by pressing the F8 key. Save the file. When finished, your buttons could resemble those shown in Image I.

 

Creating a Video Player in Fireworks MX 2004
Why Flash developers usually don't see much value in using Fireworks MX 2004 for interface creation is one of those great mysteries in life. The ability to add textures and patterns to shapes, special effects, AutoShapes, and to the ability to output button states from the application make its use a no-brainer.

The parameters for the video player are rather simple. The video is 240 x 180, meaning I need to create an interface large enough to hold the video and the buttons. The controls are rather simple as well. They need to be able to play the video and stop it.

I started with a blank Fireworks MX 2004 canvas whose dimensions were 350 pixels wide by 240 pixels deep. This left enough room to "hold" the video and the two controls.

I next selected the Rounded Rectangle AutoShape, drew out a rectangle that would fill the canvas, and then filled the AutoShape with the "Blue Wave" pattern. I adjusted the handles of the fill and then applied a small Gaussian Blur to it. In order to "contain" the video, I selected the Inner Bevel from the Effects menu and applied a 21-pixel Ring Bevel to the selection. Finally, to provide a "screen" for the video, I selected the Rectangle tool, drew a 240 x 180-pixel rectangle in the player, filled it with white, and applied a drop shadow to the selection (see Image II).

 

The button controls weren't terribly difficult to build. Recognizing that a Flash Button requires Up , Over, and Down states, you can quickly build these buttons by using the Symbol feature of Fireworks MX 2004. Once you create the base artwork for a button, select all of the pieces and then select Modify > Symbol > Convert to Symbol or, if you are familiar with MX Studio 2004, simply press the F8 key, which converts selected objects to symbols in Flash, FreeHand, and Fireworks.

When the Symbol dialog box opens, name the symbol and select Button from the Properties list. This will open the Button Editor. The selected object will appear in the "Up" area. To give the user a visual clue that the button in the Flash interface is live, I clicked the Over tab, clicked the Copy Up Graphic button, selected the button on the Canvas, and darkened it by reducing the brightness to -66. (Effects > Adjust Color > Brightness and Contrast). I then clicked the Down tab, copied the Over button, and selected Invert instead of Brightness and Contrast in the Adjust Color menu. I simply repeated these steps to create the Stop button, see Image III.)

 

The Down state of the button to be used in Flash is created in the Fireworks Button Editor.

The buttons were then added to the interface as shown in Image IV.

 

Moving an interface from Fireworks MX 2004 into either version of Flash MX is not hard. What you have to do is remember that old adage, "Let the software do the work." In this case, you need only the interface and the three button states from each of the buttons created. Turn off the visibility of the two button layers and select File > Export Preview. The interface without the buttons will be visible, and this can then be exported out of Fireworks MX 2004 as a .jpg image.

The buttons are a little bit trickier. Turn off the visibility of the interface and a button layer but ensure the Web layer is still visible. This will leave only one button, with the green Web layer overlay, visible on the Fireworks Canvas. Select File > Export Preview and make sure the button is exported as a .jpg image. Due to its size you can apply up to 60% .jpg compression and not be too concerned about quality. To ensure you are exporting as small a file as possible, select the Crop tool in the Export Preview window and crop out everything but the button. Click Export.

The Export window that opens is the key. Name the button. (I used 'PlayButton'.) Select Images Only from the Save As Type dropdown menu and select Export Slices from the Slice dropdown. This will ensure that each button state is exported. Click Save and the three states will be exported to the selected folder. Before quitting, save the interface with buttons as a .png file just in case you have to make changes. Quit Fireworks MX 2004 (see Image V).

 

Preparing Video for Flash MX 2004/Professional
Though Flash MX 2004 contains a vastly improved video import feature, the best results are obtained from Sorenson Squeeze. The reason is, though Flash contains a "Lite" version of the Spark codec, Squeeze offers full control of the output, ranging from the video and audio compression to be used to the final output, which can be the .flv file to be placed into Flash MX 2004 or the .swf file, which can be dropped into a Dreamweaver MX 2004 page.

In Brendan's case data rate and bandwidth were prime concerns. "I used the 300K streaming option in Squeeze." said Brendan. "I experimented by 'tweaking' the options before settling on that one. I wanted to maintain a certain level of quality but also have it load pretty quick on a good connection. I also wanted a good window size - there's not really much point in anything less than 320 x 240 when you're doing video. 300K streaming option seemed the best bet. Plus, the uptake of broadband files of this size is less of an issue. The piece clocks in around 6MB total, which is amazing considering the raw video file was 628MB."

Though that may seem like a rather large file size, the video I compressed was a 30-second capture output to QuickTime whose raw video capture weighed in at 108MB. The final FLV, output from Squeeze, using the settings shown, came in at 828K (see Image VI).

 

Assembling the Video in Flash MX
With the assets created, it's time to assemble the video player in Flash MX. The plan is to play the video in the interface and to have the buttons controlling the video sit on the stage just under the interface.

Once Flash MX is open, import all of the assets - interface, button states, and .flv file - to the Library (File > Import > Import To Library). In order to reduce clutter in the Library, I created a folder for all of the button pieces and moved them into the new folder. I then added layers for the interface, Play button, Stop button, actions, and labels.

I then created a new button symbol named "Play" and put the appropriate button states, as shown in Image VII, in the proper areas of the Flash button. I also created a Stop button in the same manner.

 

The Play button is created in Flash using the Button symbol exported from Fireworks MX 2004.

If you prefer to create the buttons in FreeHand MX, the steps to creating the Flash button are no different. The only major difference you will encounter is that the Vector Import dialog box will open upon import into the Flash MX 2004 or Flash MX Professional Library.

Once the buttons are created, drag the various interface elements onto the stage and place them in their final positions. Select each of the buttons and, in the Property Inspector, give them an instance name.

When you add the video don't be surprised to see Flash ask if it should extend the time line. Click OK and then add a frame at the end of the time line in the Interface and Button layers. Select the video on the stage and also give it an instance name. When finished, your Flash stage should resemble the one shown in Image VIII.

 

The assets are in place. Note the instance name in the Property Inspector for the selected button.

The next step is to add a label to Frame 1 so that when the video is finished, the playback head will be returned to the start of the video. The other reason is that the Stop button is also going to be used to turn off the video.

With Frame 1 labeled, select that frame in the Actions Layer and add a key frame. Select that key frame and add a "Stop" action- stop (); - to the frame. ( You can press the F9 key to open the ActionScript Editor.) Scroll to the last frame of the Actions layer and add a key frame. Instead of a stop action you can add one that scoots the playback head back to the label in Frame 1 or back to Frame 1. I prefer to use the marker simply because I can move it around in the movie without worrying about the ActionScript.

For you ActionScript purists, the next step is heresy. This version of Flash MX 2004/Professional contains a new feature: the Behavior panel. With the loss of the Basic Mode for the ActionScript Editor, the thinking is to provide those new to ActionScript with a relatively painless method of coding. The video on the time line is "embedded," meaning you have access to the new Video Behaviors.

Select the Play button on the Stage. Open the Behaviors panel. If you don't see the Behaviors panel in your Panel Group, select Window > Development Panels > Behaviors (Shift-F3) to open the Behaviors panel. The first thing you will notice is that the button's name and its instance name appear at the top of the Behavior panel. Click the "+" sign to open a dropdown menu of the behaviors available to you (see Image IX).

 

Select Embedded Video > Play. This will open the Play Video dialog box. Select the instance of the video in the dialog box. You should see "this.video Name", as shown in Image X, in the text input of the dialog box. You also have to tell Flash MX where which time line is in use. You have the usual choices - Relative or Absolute. Select Relative and click OK. The behavior will then appear in the Behavior panel.

 

You have to tell the behavior which video instance is being controlled.

Select the Stop button and add a Stop Behavior from the Embedded Video list. In this case, clicking the Stop button will send the playback head back to Frame 1. If you are feeling adventurous, the rewind behavior is rather interesting. In this case, you tell Flash MX how many frames backward the playback head skips when the button is pressed. For instance, assume you tell Flash to go back five frames when the button is pressed. In this case, the playback head will skip backwards at five-frame intervals until the first frame of the movie is reached. (see Image XI).

 

Test the movie. At this stage you have built a Video Controller that looks nothing like that created by Apple, Microsoft, or RealOne. In order to keep the video's footprint on the Web page as small as possible, the last step is to reduce the stage size to fit only the interface including buttons.

The example I have used here just scratches the surface of the new video features of Flash MX 2004. If you have Flash MX Professional you have access to a full range of video features. For example, the new Flash Player 7 enables progressive download using the netStream controls to pull video from your server and start playing without waiting for the video to download. You can also avoid scripting altogether if you use the new Media Components and Component Inspector to build your own interfaces with full interactivity in Flash MX Professional.

Regardless of your approach, a reliance on third-party players is now a thing of the past. When I asked Brendan about this his response was rather revealing. "Well, one plug-in is better than two!" he said. "Flash is everywhere so it makes natural sense to start to use it for showing video rather than asking people if they have QuickTime or RealOne. I've always had a 'shonky' experience with RealOne on a Mac anyway. Now you can use the same plug-in you use for your site, your app, or whatever. Plus, it can be integrated really well into a project - no pop-up windows!"

As I said at the beginning of this article, if I control the Web turf why should I cede a part of it to Apple, Microsoft, or Real? With the release of Studio MX 2004 and a Trojan horse, I may just have won the turf war.