| First introduced in Director version 4, MIAWs allow separate movies to run at the same time, each within its own window, and let them communicate and control one another. While this may seem trivial at first glance, it can allow you to easily do things that would otherwise be quite difficult or even impossible. As an example, I recently did a project that was nearly finished when the clients decided they wanted to have help available at the press of a button. Also, once the help was opened, it should be able to remain open, but moved out of the way of the main application window. This way, users could work with the main application and still have access to the help information. Only a MIAW gives you this kind of flexibility. A Flash sprite could be used for the help window, but a sprite can't be moved out of the bounds of the Stage. As shown here, a window can be placed anywhere.
Before you implement the graph in the training log application, let's talk a bit about some of the new features available when using movies in a window. Using the Display Template Many new and improved windowing features have been added in Director MX 2004. In fact, it's now best to think of each movie, including the Stage, as running in its own window. This is because window properties are now movie specific, allowing each window to be set differently. Foremost among these new features is the Display Template inspector, shown here in both normal and list view modes.
This new inspector gives you access to specific options for each window and window type. Tip It can be helpful to set the Display Template inspector to list view in order to see the property names for the various settings. Let's look at a couple of examples using the Display Template inspector. 1. | From the Lesson09 folder on the CD, open the miaw_test Director file.
You're presented with a rather silly-looking interface with a smiley face and scrolling text field. Don't worry, it's just for testing. You're going to be using the Display Template in order to change how this movie is published. Before doing that, however, you must make sure the publish settings are configured properly. | 2. | Select File > Publish Settings from the top menu. In the Formats tab, make sure the only options checked on are Projector and Preview after publishing. Because you're going to be experimenting with the Display Template, you want to be able to quickly create a projector and see what the options did. | 3. | Select the Projector tab in the publish settings dialog, and make sure the Player type is set to Standard. Also be sure that the Full Screen option is not checked. Finally, see that Exit lock is not turned on. Press OK to dismiss the dialog, and save the settings. With the publish settings configured correctly, you can experiment to see how the display template affects the projector. Because the display template is saved with the movie, you can go ahead and publish now to see what the default template will produce. | 4. | Save the movie to your project_two folder, then click the Publish button on Director's toolbar.
After the Xtras are packaged into the file, the projector will launch. What you have here is about the best you could do with previous versions of Director, without using third-party Xtras. | 5. | Click the close button or press the Esc key to close the projector. Next, click in the Score anywhere there is not a sprite; channel 5 of frame 5 will do nicely. By clicking anywhere but on a sprite, you place the Property inspector into the movie setting, with one of the tabs being the Display Template. | 6. | Choose the Display Template tab to open the Display Template inspector, and make sureit's not in List View. Enter Testing for the title and make sure the type is set to Document. Centered, Resizable, and Docking must all be unchecked. Within the title bar options, uncheck Minimize and Maximize. Finally, choose member "smiley" for the icon, as shown.
Using the Display Template inspector, you can now easily modify the look of the title bar to your needs. You can also choose any bitmap cast member to be used as the window's icon, and Director will automatically resize the image to the required dimensions of 16x16 pixels. By entering a title, you can change the text displayed in the title bar when the movie is playing. If you leave this field blank, the movie's name will be used instead. There are three types of windows available: Document, Dialog, and Tool. Document is a normal window. Dialog is also a normal window, except that it is a modal window, meaning that when the window is open, it is the only window the user can interact with. Tool windows are meant for creating movies that will be used within Director as aids to the authoring process. | 7. | Save the movie, then press the Publish button in the toolbar. When the projector appears, you'll notice it's essentially the same as before but the title bar now shows the smiley icon, the Testing title, and only a close button.
One of the biggest complaints among Director developers was their inability to remove the border around projectors. No matter what you did, there would always be a single-pixel black border. Today, the solution is finally built right into Director. | 8. | Close the projector. Then, under the Title bar options in the Display Template inspector, uncheck the Visible option. Under the Appearance options, be sure the Border option is set to None. Save the movie and then press the Publish button on the toolbar. Presto! Borderless projectors are now easy. But it gets even better. Not only can you remove the border, you can even make the projector play in a non-rectangular window by using the masking options of the Display Template. | 9. | Close the projector, then, under the Appearance options in the Display Template, change the Mask setting to Member "mask". Also, check the visible option under the Titlebar options. Save the movie and publish the movie. This time, there's really a change and the movie only shows where there is black in the mask image. Here, you see the projector playing on my desktop with the background image showing behind it.
Note that even though the Visible option for the title bar is checked, no title bar is being displayed. When you use a mask, the title bar options are ignored. One thing you might notice when there's not a titlebar present is that the movie can no longer be dragged around the desktop and placed where you like it. In order to allow dragging the movie, when using a mask, you'll also need to set a drag mask. | 10. | Close the projector by pressing the Esc key. In the Display Template tab set the Drag mask to member "mask" and save and publish the movie. With the Drag mask set to the same member being used to mask the window, you can click and drag the projector anywhere except on the button used to scroll the text. I should point out that when you use a mask to alter the window shape, the mask is aligned to the upper-left corner of the window. That is why the mask member has been placed as a sprite, and aligned to upper left. This way, you can easily set up your interface and know how the mask will affect it when applied. Now, if you wanted to limit the area that can be used to drag the window, just use a different mask. For example, a mask such as the following could be used to allow the window to be dragged only by clicking on the smiley face.
The light gray border is only there so you can see the edges of the bitmap. Did you notice the single black pixel in the upper left corner of the image? This is necessary because of how Director treats white space as transparent. If that pixel were white, the black circle would not align correctly with the smiley face as shown here.
Because the non-white pixel is present in the upper-left corner, the mask on the left lines up properly, as shown in the image on the left. But without the pixel, the white disappears, and the remainder of the image is aligned to upper left, and the mask is nowhere near where it's supposed to be. | 11. | Save the movie to your project_two folder before continuing. You've seen how changing the Display Template affects the published projector. But this lesson is about movies in a window, and it's time to see how the display template settings affect MIAWs. |
Implementing Your First MIAW Before getting back to the training log and its graph, let's have a quick look at opening the test movie as a window. 1. | Select File > New > Movie to create a new, empty movie. Next, select File > Save and save the movie as test2 in your project_two folder. The reason you immediately saved the blank movie was so the path for the movie would be the same as that of the miaw_test movie. | 2. | Open the Message window and enter the following Lingo: window().new("miaw_test") You can't see the new window, but it's running in memory, waiting to be opened. Developers will typically set any window properties that need to be altered at this time, before opening the window. | 3. | In the Message window, open the window with the following: window("miaw_test").open() The MIAW opens, but it probably doesn't look the way you expected. What happened to the Display Template settings? Shouldn't the window be masked like it was when it was a projector? When a MIAW is opened during authoring mode, the masking options won't work properly. For the MIAW to appear as you intended, it needs to be opened in a projector. | 4. | In the Message window, close the MIAW by using the forget method. window("miaw_test").forget() As soon as you press Enter the window disappears. Note that you can also use the close() method to close the window, but keep it available in memory. By forgetting the window, you remove it entirely and need to recreate the window if you want to open it again. | 5. | In the Score, double-click the Behavior channel at frame 5 and create a standard loop on frame script: on exitFrame me _movie.go(_movie.frame) end | 6. | From the tool palette, click the standard push button, then create a button on the Stage. Be sure the tool palette is set to Classic mode. Right-click the button and select Script from the context menu. Modify the mouseUp handler to look like the following: on mouseUp me window().new("miaw_test") window("miaw_test").open() end | 7. | Choose Modify > Movie > Xtras to open the Movie Xtras list. Click the Add button and add the Text Asset Xtra. Close the dialog and then save the movie. Press the Publish button to create a projector. Publish settings, like the display template, are saved individually with each movie. However, when you create a new movie, whatever settings you were using are also used by the new movie. Because of this, there's no need to modify the Publish settings to make a test projector. You added the Text Asset Xtra to the list because the MIAW uses a text member and so needs the Xtra available when it's run from a projector. | 8. | When the projector appears, press the button to open the MIAW. That's better! Opening the MIAW from the projector honors the windows Display Template settings. The MIAW is masked, as expected, and can be dragged around by clicking anywhere within the window. It should be noted that you can modify the window properties, such as changing the mask, the drag mask, etc., while the window is open by using Lingo. For more information on MIAWs and their properties see the MIAW section within the Using Director part of Director's Help. You have now been introduced to using MIAWs, so let's get back to the training log and the graph. | 9. | Close the projector before continuing. |
|