IT82: Multimedia Macromedia Director Practical 1

Transcription

1 IT82: Multimedia Macromedia Director Practical 1 Over the course of these labs, you will be introduced Macromedia s Director multimedia authoring tool. This is the de facto standard for time-based multimedia development and is widely used. You will learn how to create a basic multimedia presentation and will know enough by the end of the practical to begin work on your assignment. In this practical you will create a basic version of an Interactive Guide to Motorcycle Maintenance. It is adapted from the Stephen McGloughlin s book, Multimedia: Concepts and Practice (Prentice Hall, 2001). Getting Started Firstly, let s have a quick look at the final presentation you are going to build. In Windows, navigate to Groups on Wide\IT82\Director and double-click on M-CycleMaint.exe Once the presentation has loaded, try clicking a few of the buttons on the left-hand side to see what happens. Click Quit when you have finished. Now we can get started on building this presentation from scratch, using Director. Start Macromedia Director from the programs menu: Start Programs Macromedia Director8 Director8 Director has a complicated interface consisting of many different windows. The basic layout you should see includes the Stage, Score and Cast windows, as illustrated below. Do not worry if some of these windows are not present, or other windows are. Required windows can always be made visible from the Window menu when you need them. 1

2 The first thing to do is to set the Stage to the size we need for the multimedia presentation we are going to build. We will use the Property Inspector, which is used to set the values of most things in a presentation, including Cast members and Sprites. Open the Property Inspector by selecting Window: Inspectors: Property (The window that appears should have Untitled Move at the top if it does not, click on the Stage window to make that active). Click on the Movie tab in the Property Inspector and change the size of the movie to be 640 by 480 pixels. Now let s load all the media we need to create our cast. Choose File: Import Navigate to the Groups on Wide\IT82\Director\IGTMM folder, click Add All, then click Import In the dialog box that appears, select Stage (24 bits) for the colour depth, check the Same Settings for Remaining Images, and click OK. The Cast window is now populated with a variety of media components, mostly images. If you do not see a Cast window, select Window: Cast. The List icon, second from the left at the top of the Cast window, lets you toggle between an icon view and an information list view of the cast members. Try toggling this to see the difference. The icon view will be most useful for this practical. Before going any further, let s save our presentation. Select File: Save and save your presentation somewhere useful in your filespace, giving it a sensible name (or IGTMM if you cannot think of anything else). This has saved everything in a DIR file, which is the editable form of a presentation. You can reload this file into Director at any time to continue work on your presentation. Creating the Presentation We are now ready to create the presentation by adding media components to the Stage and Score, creating sprites in the process. The arrangement of the buttons on the Stage is a bit fiddly, so just take your time. The first thing we will do is add a large image that will form the backdrop for the presentation to the Score. Adding a component to the Score automatically centres it on the Stage. The buttons are not centred, so we will place them directly where we want them on the Stage, having first selected a starting frame in the Score. Click and drag the first cast member (which should be BikeInterface5.jpg) to frame 1 of channel 1 on the Score (ie. As you drag the cast member into the Score window, line up the red marker with frame 1 at the left hand side of the window). The backdrop will automatically appear on the Stage when you have done this, and will have a default duration of 28 frames. Actually our movie will be a bit longer than this, so we need to increase the duration of the backdrop, which will be visible for the entire movie. 2

3 In the Score window, click and drag the rectangular symbol at the right-hand end of sprite 1 (BikeInterface5) out to frame 60 The next thing to do is to position the button graphics down the left-hand side of our presentation. We will do this by clicking and dragging the relevant cast members onto the Stage. The hard part is getting them in the right place. You should end up with something that looks like this: Click on Frame 1 on the frame indicator above the sprite channels in the Score window Click and drag each of the Up cast members to their appropriate positions on the Stage (SchedUp, SafetyUp, EngUp, ElectUp, BodyUp, TroublUp in order from top to bottom) Notice that the Up cast members have automatically been added as new sprites in separate channels in the Score, with durations of 28 frames, starting in frame 1. We will eventually alter their durations. Firstly, however, we need to position them as accurately as possible. The background of each button corresponds to a part of the backdrop image, so we want the buttons to be in register with the backdrop. One way to check this is to turn the button sprites on and off and to notice if there is any apparent shift in the background when we do this. The little squares at the left-hand edge of the Score window for each channel enable us to make sprites invisible on the stage. 3

4 Click the square button for channel 2 on the left-hand edge of the Score window. The SchedUp button should disappear. Click and unclick several times, watching the button as you do so. If the backdrop appears to move as the button appears and disappears, click and drag the button on the Stage and move it to where you think it should be (try to avoid the blue dot in the centre of the sprite when you do this this dot has a special function in tweening). Retry making it appear and disappear in the Score. Repeat this whole procedure until the button is in the right place. Do this for all the buttons (but DO NOT spend too long on this, it is not that important for this practical, BUT it would be for a presentation that you are trying to sell!) At the moment our buttons are just graphic images that do not do anything. We need to add behaviours to them so that they react to mouse clicks. You may have noticed that the cast actually contains three images for each button: the Up button (normal state), the Hot button (mouse rollover state) and the Down button (clicked state). We will use the inbuilt Push Button behaviour to animate the buttons by incorporating the remaining Hot and Down images. Select Library Palette from the Window menu Click the icon in the top left-hand corner of the Library Palette and select Controls in the menu that appears Using the little down pointer, scroll through the list of behaviours until Push Button appears Click and drag Push Button onto the topmost button image (SchedUp) on the Stage In the dialog box that appears, choose the appropriate cast member image for the Standard (Up), Rollover (Hot) and MouseDown (Down) states. Leave the other settings at their default values. Repeat this procedure by clicking and dragging Push Button to the other button images on the Stage. Your presentation is not really ready to go just yet, but it is fun to try running it to see what happens. So click the Play button in Director s top Toolbar (it s the right-pointing arrow in about the middle of the toolbar). The playback head will move across the Score window, and eventually all your buttons disappear! That s because their duration is shorter than the total movie length. We need to do something about that (but not quite what you think!). The progress of our movie should largely be under user control. The movie should progress when the user clicks on one of the buttons, and not before. So the first thing to do is to ensure that the movie loops on the first frame until the user clicks a button. Double-click the first frame s Script cell in the Score (the Script channel is the first channel above the frame ruler). In the Behaviour Script window that appears, add the Lingo instruction, go to the frame between the on ExitFrame and end commands. Close this window by clicking the Close button (x) on the top-right of the window. Now try running the movie (you might need to rewind it first by clicking the Rewind button to the left of the Stop and Play buttons). You should see that the playback head is now stuck in frame 1. Roll the mouse over your image buttons in the presentation and you should see the Hot image 4

5 appear this is the Push Button behaviour at work. Click the Stop button (small square) when you have finished. Before continuing building the presentation, we are going to name certain frames in the movie so that we can refer to them by name, rather than by number, in the Lingo scripts we are going to need later on. We add names in the Marker channel, which is the very top channel in the Score it is just a blank white strip at the moment, with left and right arrows on the left-hand side. Click in the Score s Marker channel at frame 1. A small marker will appear with a text box to its right. Enter the name, Start here. Create markers at frames 10, 20, 30, 40, 50 and 60 with the names, Schedule, Safety, Engine, Electrical, Body and Trouble, respectively. These markers indicate frames that will be the destinations when the user clicks on particular buttons. Each destination will result in new motorcycle maintenance information being overlaid on the bike image on the Stage. We also need a fresh set of buttons at each of the marked frames. In the Score, select the top button sprite (sprite 2) by clicking on it. Holding down the Shift key, click on the last button sprite. This will select all the button sprites. Open the Property Inspector (Window: Inspectors: Property) and change the end frame number of these sprites to 1 from its current value of 28. All the button sprites will be adjusted to be one frame long. While the button sprites are still selected (or reselect them, if necessary), right-click on them and choose Copy Sprites. Right-click frame 10, channel 2 and choose Paste Sprites. Repeat this pasting procedure at each of the remaining marked frames. Now we need to add the overlaid diagram images at the appropriate marked frames. Have a look at the cast window. You should find six Diag images, each one corresponding to one of the buttons that we have added. Click and drag SchedMDiag to frame 10 in a new channel in the Score. It will automatically appear centred on the Stage. Move the image on the Stage until it is in register with the underlying bike image (you will need to use the switching on and off technique you used earlier to get the buttons in the right place to achieve good registration). Shorten the sprite s duration in the Score by clicking its ending rectangle and dragging it leftwards until the sprite is only one frame long. Repeat this procedure for the remaining Diag images, entering them at the appropriate frame numbers in the Score, but using the same channel as for SchedMDiag (as they do not overlap in time). We have two things left to do. We need to make the movie loop on each of the named frames, once the movie reaches them. We also need to make our buttons actually do something we will assign them behaviours that cause the movie to jump to the appropriate frame when the user clicks on the button. Copy the looping behaviour by right-clicking on this script in frame 1 of the Script channel and selecting Copy Sprites. Now right-click on each of the remaining 5

6 marked frames in the Script channel and select Paste Sprites to paste a copy of this behaviour. To provide the needed jumping behaviour for the buttons, we will add a simple Lingo script to the button cast members. This will make the behaviour available to all of the sprites in the Score that are copies of these cast members. This is more efficient than adding the script to the sprites individually. To make the behaviour work, we need to add it to all the Hot and Down image cast members. Right-click the SchedDn cast member and select Cast Member Script from the menu. Enter the command go to Schedule (the double quotes are needed around the marker name) between the on mouseup and end commands in the Behaviour Script window. Repeat this procedure for the SchedHot cast member. Now repeat this entire procedure for the Dn and Hot cast members of the remaining buttons, using the appropriate marker names in each case in the Lingo script. That s it! Run your movie and test your buttons. Make sure that the appropriate diagram is displayed for each different button. Now let s create a standalone Projector of your movie. Save your movie (File: Save), then select File: Create Projector. Select the DIR file that is your movie, click Add and then click Create. Enter an appropriate file name (no extension necessary) and click Save. When you leave Director, you will find the executable version of your movie, which you can play without running Director. Give it a go. If you have time, here is a final exercise to test what you have learnt. In the screen shot of the presentation shown above you will notice Home and Quit buttons. Images for these buttons are in your cast already. Try adding these buttons to your presentation in the same way that you created the other buttons (three images for each; appropriate behaviours etc). The Lingo commands to add to the on mouseup scripts are go to frame Start and quit, respectively. Good luck! Bruce Graham, Spring 2002 (with lots of help from McGloughlin s Multimedia: Concepts and Practice, Prentice Hall, 2001) 6