Using the Flash/Fireworks Combination for Nontraditional Web Video

Coding a Video to Play

Now that the video is in place, you need to write the ActionScript that makes it work.

In the files you have downloaded, there are three FLV files produced by one of my Humber College students, Kyle Crockard. The first file to play will be tom_greeting.flv. When Kyle finishes with the invite, click the Yes button, which will play the Crockard.flv video. Or, click the No button, which will play tom_goodbye.flv.

This makes controlling the video using the buttons easy. All a button does, in very basic terms, is load up a video into the stream_ns NetStream object, which removes the one that is currently playing.

Here's how to do that, using code that progressively downloads the video:

1. Click once in the keyframe in the Actions layer and press F9 to open the ActionScript editor.

2. When the editor opens, enter the following code:

   var connection_nc:NetConnection = new NetConnection();
   connection_nc.connect(null); 
   
   var stream_ns:NetStream = new
   NetStream(connection_nc); 
   
   my_vid.attachVideo(stream_ns);
   stream_ns.play("tom_greeting.flv");
   
   No_btn.onRelease = function() {
   	stream_ns.play("tom_goodbye.flv");
   }
   Yes_btn.onRelease = function() {
   	stream_ns.play("Crockard.flv");
   }
   

If you are new to working with video in Flash, you are probably wondering, "What does this all mean?" Let's walk through the code.

The first line creates a variable named connection_nc and assigns the NetConnection class to the variable. It then creates a new NetConnection, which essentially connects your server to the browser. The next line, Connection_nc.connect(null), turns the connection on.

With the connection established, you have to tell it that you wish to progressively download a Flash video through the pipe. To do this, you create another variable to name the download (stream_ns), assign a NetStream class to it, and then, essentially, flip the switch.

The next two lines are key. You have the connection and the NetStream pipeline established. Now you need to tell it what to download. In the case of this project, you are going to progressively download the video named tom_greeting.flv through the NetStream. If you only have one video, this is all of the code you need.

In this case, you have two videos set to play when the buttons are clicked. If the user decides not to view the video, he clicks the No button. In this case, you essentially toss tom_goodbye.flv into the stream_ns NetStream and replace whichever video is playing with that one. You can do this because there can only be one video playing at any one time.

Figure 12. The project is completed and the code added. All you need to do now is to publish the SWF file.

Finishing Up

That is all there is to it. To play the video:

1. Publish the SWF and the HTML file (if necessary) to the folder containing the FLV files. Ensure that Flash Player 7 is the version being used and that you select ActionScript 2.0 as the ActionScript version in the Publish Settings dialog box.
2. Save the FLA file and quit Flash.
3. Upload the files (including the FLV files) to your server and browse to the HTML file to test it.

Code for Users of Streaming Video

If you need true streaming video that plays back immediately and are using Flash Communication Server or Flash Video Streaming Service, here is code that does that same as that above with modifications to access the streaming capabilities. The main differences are that you connect using RTMP and you omit the .flv file endings on the names of your videos. (Flash Communication Server takes care of that for you.)

var connection_nc:NetConnection = new NetConnection();
connection_nc.connect(rtmp://fcs_server/app_name/instance); 

var stream_ns:NetStream = new
NetStream(connection_nc); 

my_vid.attachVideo(stream_ns);
stream_ns.play("tom_greeting");

No_btn.onRelease = function() {
	stream_ns.play("tom_goodbye");
}
Yes_btn.onRelease = function() {
	stream_ns.play("Crockard");
}

Where to Go from Here

The ability to quickly add a video experience to your efforts without the use of third-party solutions is a major step forward in the evolution of rich media on the web. As you have seen from this example, you can use the tools in the MX 2004 Studio to create the interface and write the code that streams the video into your web page. As well, now that you understand how to switch video streams, you can offer multiple videos to your users without worrying about inordinate download times. In some respects, I may have just dampened some of the coolness factor of the Vodafone site because you now see how easy it is to accomplish what they did.

Finally, the next step in using video in your website is to make it even more engaging and immediate through the use of the Flash Communication Server MX 2004. Many companies are discovering that this technology allows them to create sites composed solely of video clips without the wait or file size normally associated with web video.

Page 7 of 7

Previous Page