- 1 Skate Team Riders
- 2 Billabong-USA.com Surf Featured Rider
- 3 Movie Control
- 4 Embedding Videos
- 5 Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
6.4 Embedding Videos
Another technology that has strengths in its own right is video. Billabong has lots of great video footage that is great content for the site. As we showed you earlier in this chapter, you can export video as stills and import the stills into Flash as frames to simulate video. But this takes a fair amount of development time to do and would mean we would have to be involved every time Billabong wanted to add a video to the site. For the Footage sections of the site, it was a much better choice to rely on the widely distributed QuickTime and Windows Media players to augment the Flash experience. This enabled us to build a system for Billabong to upload videos at any time on their own without having to call on us. We will cover the content management aspect of this in the next chapter. For now, let's focus on the embedding video formats.
On the Billabong-USA site, we gave the user the option of viewing the surf/skate/snow videos in either QuickTime or Windows Media formats. Embedding these video formats in an HTML page is very easy. For the Windows Media format, the following HTML is used:
<OBJECT ID="MediaPlayer" classid="CLSID:22d6f312-b0f6-
11d0-94ab-0080c74c7e95" width=200 height=160
Just replace MEDIA FILE URL with the actual URL of the Windows Media file in both the OBJECT and EMBED tags.
For a QuickTime movie, use the following:
<EMBED SRC="QUICKTIME FILE URL" WIDTH="200" HEIGHT="160" TYPE="video/quicktime">
Again, replace QUICKTIME FILE URL with your URL and you're ready to go.
6.4.1 Video List
The Footage section of Billabong-USA utilizes Generator to create a dynamic list of the videos available for each sport. We've included the source file for this, but please note that Generator is a web server application for creating dynamic Flash content. Because we have a unique server environment, these files won't "work" upon export. We're examining them to give you insight into how we utilize Generator. We'll be delving more into Dynamic Flash content management in the next chapter.
That being said, look at the file video_list.fla. There aren't many actions on the main timeline. Other than two stops on the last two frames, there is a simple preloader on frame 3 (see Figure 6.17).
){kind=link}
if (getBytesLoaded ( ) == getBytesTotal ( ) ) {
root.loaded = "TRUE";
}
if (_root.loaded == "TRUE") {
gotoAndStop ("featured");
} else {
gotoAndPlay ("loop");
}
Figure 6.17 The script on frame 3 of the file named video_list.fla.
The getBytesTotal() function returns the value in bytes of the current timeline. The getBytesLoaded() function returns the value of the bytes loaded. We compare these values and, if they're equal, set the loaded variable to true. Then there is an if statement that continues playing if loaded is true or continues looping if it isn't. The reason for the additional if statement is that it gives the flexibility to add additional requirements before continuing.
An alternative method for this would be to use the movie clip object methods getBytesLoaded() and getBytesTotal() to perform the same function. The getBytesLoaded method returns the number of bytes loaded on a movie clip. The getBytesTotal method returns the size of a movie clip. These methods are used for both internally and externally loaded movie clips.
Go to the frame featured. This is the list of the three featured videos in this sport section. Because we've constrained the featured video section to three videos, there's no need for a scrolling list. We went with a static, hard-coded list (see Figure 6.18).
){kind=link}
Figure 6.18 The featured videos list on the featured frame.
The data from this list comes from the environment data. The environment data is the first icon of the three icons at the top right of the Flash application window. You'll see that we're using the data source {team}_video_list.txt, as shown in Figure 6.19.
){kind=link}
Figure 6.19 The Set Environment dialog box in Flash.
The Generator variable {team} is provided through the URL of the .swt. We'll discuss URL variables and offline Generator in the next chapter. All we need at this point is to know that {team}_video_list.txt will evaluate to surf_video_list.txt (or skate or snow). Here's the contents of snow_video_list.txt:
name,value video_src1,"crawford.jpg" video_name1,"Crawford" video_descr1,"Crawford ripping on anything with snow on it" video_id1,"8" video_src2,"kevin.jpg" video_name2,"Kevin" video_descr2,"Kevin Jones knows how to snowboard" video_id2,"10" video_src3,"kevin_2.jpg" video_name3,"Kevin" video_descr3,"Kevin at Mammoth 12/01" video_id3,"16"
Look at the stage. If you look at the Generator variables {}, you'll see where the data flows. Select one of the video buttons (see Figure 6.20). Look at the actions:
){kind=link}
on (release) {
getURL ("video_media.cfm?video_id={video_id1}", "left");
}
Figure 6.20 The actions on one of the video buttons.
You'll see that we use Generator variables here to construct a URL string to pass to Cold Fusion.
In the library, look at the symbols video_thumb1,2,3. We've got an Insert JPG with a source of ../../images/video/{video_src1}.
Now that we've seen the featured section using an environment data source, go to the archive frame, as shown in Figure 6.21. This is the archived list of footage.
){kind=link}
Figure 6.21 The archived list of footage on the archive frame in the main timeline.
The central part of this section is a Generator scrolling list (see Figure 6.22).
){kind=link}
Figure 6.22 The Generator template named Scrolling List displays the Generator scrolling list window.
The Data Source is {team}_video_archive.txt, which, like the previous environment data source, will evaluate to snow_video_archive.txt (or skate, surf). Here's the content of snow_video_archive.txt:
clip,video_name,video_descr,video_id archive_item,"Crawford","Crawford ripping on anything with snow
A Generator scrolling list uses the clip parameter to decide which movie clip in the library to use for this list. Look at the clip archive_item in the library (see Figure 6.23).
){kind=link}
The clip is set up like a rollover with off and on frames. The content of the clip is inserted through Generator variables.