Wrapping the Booking Facility in Director MX

Wrapping the Booking Facility in Director MX

In the previous chapter, we created a rather interesting reservation system for the Oakbridge Community Center. This application made extensive use of ActionScript and ColdFusion Components to communicate with a database. This process is more commonly known as Flash Remoting.

In Chapter 12, we showed you how you can utilize the power of the Flash Communication Server MX using Director. In this chapter, the focus is on the Flash Remoting process and Director. It is easier than you might think.

Creating the Director MX Wrapper

As you learned in Chapter 12, a Flash sprite on the Director stage gives you instant access to the Flash Communication Server MX. The same situation exists if you need access to a MySQL database through ColdFusion MX. All you need on the stage is a Flash .swf file.

Before you get started, download the Chapter 14 files from the book's site. Also make sure the MySQL database created in the previous chapter is available and that all files are in the Oakbridge site folder.

The wrapper we are going to build is fairly basic, but it will show you two things:

• Director can be used as a control center for applications created in Flash.

• You can use a button created in Director to navigate to and play a Flash movie on the Director stage. The implication is that you have the capability to place multiple Flash .swfs in the Director timeline and navigate to each one at will.

To build the Director MX wrapper, follow these steps:

1. Open Director MX. When the movie opens, select File, Save As, and name the movie occ_controller.dir . Click OK.

2. Click once on the stage. If your Property Inspector isn't open, press Control-Alt-S (PC) or Command-Option-S (Mac) to open it. Click the Movie tab in the Property Inspector. Set the stage size to 640 pixels wide by 480 pixels high. Set the stage color to white.

3. Select Insert, Media Element, Flash Movie to open the Flash Asset Properties dialog box. Click the browse button, and when the Open Shockwave Flash dialog box opens, navigate to the Oakbridge site folder in the ColdFusion MX folder's wwwroot folder (see Figure 14.3). Locate the booking .swf created in the last chapter, select it, and click OK.

   Figure 14.3. The booking.swf file is brought into Director MX from the Oakbridge site managed by ColdFusion MX.

   

4. You will be returned to the Flash Asset dialog box. Click once on the Linked check box. A filled check box indicates linking is turned on. This does not embed the .swf in the Director movie but actually treats it as an external file. When the Flash sprite appears on the stage at runtime, Director will automatically load the file into memory by looking in the location of the sprite as shown in the Link File area of the dialog box.

   Tip

   How can you tell the difference between a linked .swf file and one that isn't? The unlinked .swf file will have a picture in the cast. The linked file will just have text identifying it in the cast, as shown in Figure 14.4.

   Figure 14.4. A linked Flash movie is in Castmember slot 1. The unlinked file is in slot 2.

   

5. Click once over frame 10 of the Marker channel. It is the white area at the top of the score. A triangle will appear, and the words "New Marker" will appear beside it. Select the words and change them to Booking .

   Tip

   Accidentally clicking in the Marker channel and adding markers is a common mistake. To remove a marker, simply drag it off the Marker channel. When you release the mouse, it will be gone.

6. Drag the Flash sprite to frame 10 of channel 1 on the stage. If the flash sprite span is longer than 5 frames , click the handle at the end of the sprite span in channel 1 and drag it back to frame 15.

7. The beauty of using Flash is its use of vectors. If the Flash file on the stage is too large or too small, it can be resized without affecting the performance of the .swf file. Another neat thing is the movie clip being used to create the booking will still be placed in its proper location. This is because when the file runs, the .swf file will call the booking.as script created in the previous chapter. When finished, your stage and score should resemble those shown in Figure 14.5.

   Figure 14.5. The Flash sprite is placed and resized on the Director stage. Note the marker over frame 10.

   

Adding the Navigation

The plan is to have the movie wait on frame 1 until the user clicks a button. That button click will send the playback head to frame 10 and loop the playback head over frame 15. Here's how to do it:

1. Open the Library palette by selecting Window, Library. A panel named Code:Library will open. This is a library of pre-coded behaviors. Click and hold on the Library List buttonthe one with the squares at the top-left of the paneland select Navigation from the pop-down menu. When the Navigation items appear, drag the Hold On Current Frame Library item to frame 15 of the Frame Script channel. The behavior will appear in the Frame Script channel, and a copy will also be placed in cast member slot 2.

2. Drag the Hold On Current Frame behavior from the cast and drop it into frame 1 of the Frame Script channel.

3. Click once in frame 1 of channel 2. Select the Text tool and click once on the stage to add a Text sprite to your movie. Enter the word Booking . This word is going to be used as the button that enables us to navigate to frame 10.

4. Select the word and open the Design: Text Inspector panel (Window, Text Inspector). When the Text Inspector opens, set the font to 24 point Arial, Bold, Flush Left. If the text sprite's span exceeds 15 frames, drag the end handle back to frame 15. Your score should resemble that shown in Figure 14.6.

   Figure 14.6. The booking button is in place, and its text is formatted using the Text Inspector.

   

   Tip

   Pressing Control-T (PC) or Command-T (Mac) are other ways of opening the Design: Text Inspector panel.

5. Click anywhere in the sprite span for the booking button in channel 2. This will select the entire sprite span.

6. Open the Behavior Inspector tab in the Code panel and click the + sign to add a new behavior. Select New Behavior from the pop-down menu, and when the Name Behavior dialog box opens, name the behavior Go Booking . Click OK, and the behavior name appears in the panel.

7. Select the behavior in the Behavior Inspector and click the Script Window button at the top of the panel. It looks like a newspaper. This will open the Script Editor.

8. When the Script Editor opens, enter the following:

    on mouseup go "Booking" end mouseup 

9. Click the Lightning bolt to compile script and check for syntax errors. A syntax error will result in a dialog box showing you the mistake. If there are no errors, nothing will happen. Close the script editor and save the file. Your cast and score should resemble that shown in Figure 14.7.

   Figure 14.7. The Director file is finished and ready to be "shocked."

   

Creating a Shockwave Player for Web Playback

The steps to create a Director Shockwave movie are remarkably similar to the "Publish" steps in Flash MX 2004. To create a Director Shockwave movie:

1. Select the Movie tab in the Property Inspector and change the number of channels from 150the default valueto 5. A Director dialog box will open, asking you if you really want to do this. Click OK. The movie only uses two channels, and having 145 empty extra channels will only eat up bandwidth.

2. Select File, Save and Compact.

   This step optimizes the movie for playback and is the absolute last thing you do before creating as Director Projector of Director Shockwave Movie. The progress bar that briefly appears indicates the optimization process.

3. Select File, Publish. This will create a Director Shockwave file and accompanying HTML file and place them in the same folder as the one where you saved the .dir file.

4. If the .swf and the HTML file are not in the ColdFusion MX directory, move them to that location.

5. Open the HTML file in a browser, and the movie will play.

Note

When creating a Shockwave movie, you may want to exercise a bit more control than simply selecting Publish in the File menu. In this case, select the Publish Settings from the file menu.

The other thing to keep in mind is that it is really easy to get confused when you have a couple of .swf files in a folder. This is why the icons are radically different from each other and the file extensions are different. A Director Shockwave movie uses the .dcr extension, as shown in Figure 14.8.

Figure 14.8. Though they are both known as Shockwave files, the icons for the Flash .swf file and the Director .dcr file do look different.