2D1640 Grafik och Interaktionsprogrammering VT Good for working with different kinds of media (images, video clips, sounds, etc.

Transcription

1 An Introduction to Director Gustav Taxén 2D1640 Grafik och Interaktionsprogrammering VT 2006 Director MX Used for web sites and CD-ROM productions Simpler interactive content (2D and 3D) Good for working with different kinds of media (images, video clips, sounds, etc.) A few built-in in content production tools, but none of them are very good Scripting language (Lingo or JavaScript) Extendable 1

2 Some of the competitors Macromedia Flash, Adobe GoLive,, Macromedia DreamWeaver, The Stage This is where the action takes place. All objects on the stage are called sprites. 2

3 The Cast The cast is the content of the movie: images, film clips, sound clips, etc. Scripts that control the action are also cast members. Each sprite on the stage is an instance of a cast member. Each sprite is an individual entity, but if you change the appearance of the original cast member, all sprites corresponding to that member will change. The Score Tempo channel Palette channel Transition channel Sound channels Behavior channel Current frame Sprite channels The score is where the action is specified. Each sprite has its own time interval. In this example, the name of the sprites correspond to cast members, but you can also name sprites individually. It is possible for more than one sprite to reside in a single channel, but they cannot overlap. 3

4 Creating sprites Import images by choosing File Import... or right-click in cast window. To create a sprite, drag the cast member into a sprite channel or onto the stage. The default length of the sprite is 30 frames (change the length by dragging the interval endpoint). Keyframe animation To add a keyframe, click on the frame in the sprite channel and choose Insert Keyframe. Keyframes appear as round dots. Each sprite has a keyframe in the first frame by default. When you drag the sprite interval, the keyframes will move too so that the relationship between keyframes stays the same. To change the interval while keeping keyframes fixed, hold Ctrl while dragging. 4

5 Keyframe animation Now click a keyframe in the sprite channel and drag the sprite to an appropriate location on the stage. Note how Director also displays the motion path of the object. Press the play button ( ) to play the animation. Keyframe animation To change the curvature of the motion path, select the sprite and choose Modify Sprite Tweening... and drag the Curvature handle. You can also experiment with the other parameters. 5

6 Scripts Behavior script functions associated with a specific sprite. Frame script functions associated with a specific frame. Cast script functions associated with a specific cast member. These are executed by all sprites created from that member. Movie script global functions. Parent script used for object oriented programming. Navigation and frame scripts All Director scripts use an event-listener programming model. In frame scripts, the exitframe event is called when the frame is finished and Director is about to move to the next frame. We can freeze at a particular frame by jumping back to itself. Right-click in the script channel and choose Frame Script... to create a new frame script for that frame. Note that the script also appears as a cast member. Re-compile all scripts by clicking the compile ( ) button. 6

7 Behavior scripts To create a behavior script, right-click on the sprite on the stage or in the score and choose Script... The mouseup event is generated when the user has released the left mouse button over the sprite. By default, all sprites that are under the cursor receive the event. Behavior scripts You can see all behaviors that are associated with a sprite by selecting Window Behavior Inspector, and then clicking the sprite. Here, there is one script called Mouseclicker that responds to the mouseup event. The action taken by the script is Go to Frame 6. 7

8 Behavior library Director has a number of pre-programmed behaviors. Click the Library tab in the behavior inspector to access them. Drag one of them to the cast to create a script cast member. You can assign the script to the sprite by dragging it from the cast window onto the sprite on the stage. Behavior Library After assigning a Turn Towards Mouse library behavior, our tomato sprite now has two behaviors: one that causes it to turn towards the cursor when the left button is held, and one that jumps to frame 6 when the left mouse button is released over the sprite. 8

9 Lingo Let s create a stopwatch that we can start, stop and reset! We assume that we have the images we need for drawing the clock face. Lingo We need two global variables: clocktime to keep track of the time of the clock. running indicates whether the clock is running or not. We initialize (and implicitly create) these in the movie script. The startmovie event is invoked when the movie starts. To create a movie script, make sure that no sprites or cast members are chosen, then open the script window by selecting Window Script. 9

10 Lingo The behavior script for the start/stop button simply inverts the value of the running variable. Note that we need to use the keyword global to tell Lingo that running is a global variable rather than a local variable. The behavior script for the reset button simply sets the clocktime variable to zero. Again, we must indicate that clocktime is a global variable using the global keyword. Lingo We can now create a frame script for the first frame. If the clock is running, then we update the clock time. By default, Director runs movies at 30 frames per second. We also need to rotate the clock hand. To do this, we first fetch the sprite that is named StopwatchHand. (You name a sprite by first selecting it and then entering a name in the property inspector.) When we have a reference to the sprite, we update its rotation. Finally, we jump back to the first frame. 10

11 Fetching cast members Use the global function castlib(), which returns a reference to a Cast Library core object. firstmember = castlib(1).member[1] Cast library 1 is the default library, and member 1 is the first cast member. You can also say member = castlib(1).member[ tomato ] to fetch the cast member named tomato. Fetching sprites Use the global function channel(), which returns a reference to a sprite channel. firstsprite = channel(1).sprite returns the sprite that is in the first sprite channel for the current frame. If a different sprite occupies channel 1 in the next frame, that sprite will be returned. Access the corresponding cast member by saying castmember = firstsprite.member 11

12 Changing sprite properties Changing the properties of a sprite is an important way of creating dynamic content in Director. Let s s change the cast member of a tomato sprite to create a blinking-eyes eyes- effect! First, we import the two images and create a sprite for the tomato as usual. Changing sprite properties Next, we create a global variable to keep track of time as before. We also need a variable that states when the next member change is to take place. We also create a variable that states if the tomato s eyes are open or not. 12

13 Changing sprite properties The next step is to create a behavior script for the sprite where we check if it s time to blink. If so, we change the sprite s cast member to the appropriate image and set the next blink time. We also update the time. Custom sprite properties It would be nice if we could store the timing, blink status and blink time in the sprite rather than as global variables. That would allow us to have more than one blinking tomato on the screen at once! It is possible to add custom properties to sprites. 13

14 Custom sprite properties Note how the construction sprite(me.spritenum) is used to fetch the number of the sprite the script is associated with. This means that several sprites can use the script independently! random(n) returns a random integer between 1 and n. Some useful sprite properties member The cast member of the sprite. loc, loch, locv Position, horizontal position, vertical position. width, height Width and height of the sprite. rotation Rotation of sprite in degrees (right- click on sprite, select Edit Cast Member... and move the registration point using the tool to set the pivot point for rotation). 14

15 Some sprite events mouseenter, mouseleave Called when cursor enters or leaves the sprite, respectively. mousedown, mouseup Called when user presses or releases the left mouse button over the sprite, respectively. beginsprite Called when sprite is created prepareframe, exitframe Called before the current frame is drawn and when current frame has been drawn, respectively. Sending messages to a sprite spritenumber =... sendsprite(spritenumber, #myhandler, 5)... on myhandler me, number put The number is &&number end Here, the number 5 is sent as a parameter to the handler. The handler is a custom handler that prints the number to the Director message window. 15

16 Collision detection p = point(10, 20) if inside(p, rect(20, 50, 30, 60) then... end if if p.inside(rect(20, 50, 30, 60) then... end if if sprite(n).intersects(sprite(m)) then... end if if sprite(n).within(sprite(m)) then... end if Rectangles are specified as (left, top, right, bottom). If the sprites are drawn in matte ink, the intersects and within methods use the outline of the sprites rather than the bounding boxes. Keyboard interaction on keyup me if the key = a then... end if if the keycode = 123 then put Cursor left end if end if keypressed( a ) then... Catch the keydown event to detect when keys are pressed (rather than released). Key codes for the cursor keys are 123 (left), 124 (right), 125 (down), 126 (up). Shift, Alt, etc. doesn t generate events, but you can query their status inside an event handler through the shiftdown, the commanddown, the controldown, and the optiondown. 16