Goal

In this exercise you will learn how to incorporate frame transitions and sprite rollovers into your Adobe Director movies.

Using Puppet Transitions:

The puppetTransition function is a movie method that performs a specified transition between the current frame and the next frame. To see how it works, create two sprite clusters (see Exercise 5 for examples of sprite clusters), and add a transition effect before the _movie.go command is called. Here's an example:

01-puppet-transition

The '_movie' object is a relatively new addition to Lingo. In some cases it is necessary to call certain Lingo functions and keywords from the Lingo '_movie' class object. This isn't difficult, but you need to remember the syntax. The old style of puppetTransition() did not require the '_movie' object, and still works in Director MX 2004, but the old method of calling puppetTransition() by itself is deprecated (i.e., tolerated, but not recommended), and will not necessarily work in future versions of Director. For future compatibility make sure to use the form _movie.puppetTransition(int).

Optional Transition Parameters

There are three optional parameters for puppetTransitions. They are described below.

_movie.puppetTransition(int {, time} {, size} {, area})

int Required if using a built-in Director transition. An integer that specifies the number of the transition to use. Available transition styles are numbered 1-52, and are described in the table below.

time Optional. An integer that specifies that number of quarter seconds used to complete the transition. Valid values range from 0 to 120.

size Optional. An integer that specifies the number of pixels in each chunk of the transition. Valid values range from 1 to 128.

area Optional. A boolean value that specifies whether the transition occurs only in the changing area (TRUE), or over the entire Stage (FALSE).

The following table lists all available transition styles. Note that numbers 01-09 have a leading zero to appear more consistent in the table listing. The first 9 transitions should be called without the leading zero. For example, _movie.puppetTransition(1), not _movie.puppetTransition(01).

Transition Effects

01 Wipe right 02 Wipe left 03 Wipe down 04 Wipe up
05 Center out, horizontal 06 Edges in, horizontal 07 Center out, vertical 08 Edges in, vertical
09 Center out, square 10 Edges in, square 11 Push left 12 Push right
13 Push down 14 Push up 15 Reveal up 16 Reveal up, right
17 Reveal right 18 Reveal down, right 19 Reveal down 20 Reveal down, left
21 Reveal left 22 Reveal up, left 23 Dissolve, pixels fast 24 Dissolve, boxy rectangles
25 Dissolve, boxy squares 26 Dissolve, patterns 27 Random rows 28 Random columns
29 Cover down 30 Cover down, left 31 Cover down, right 32 Cover left
33 Cover right 34 Cover up 35 Cover up, left 36 Cover up, right
37 Venetian blinds 38 Checkerboard 39 Strips on bottom, build left 40 Strips on bottom, build right
41 Strips on left, build down 42 Strips on left, build up 43 Strips on right, build down 44 Strips on right, build up
45 Strips on top, build left 46 Strips on top, build right 47 Zoom open 48 Zoom close
49 Vertical blinds 50 Dissolve, bits fast* 51 Dissolve, pixels* 52 Dissolve, bits*

Transitions marked with an asterisk (*) do not work on monitors set to 32 bits.

The following performs a dissolve effect (50), that lasts (4) 25ths of a second (i.e., 1 second), and occurs over the entire stage.

02-puppet-transtion-param

The best way to understand Lingo-coded transitions is to try a number of them and change the optional parameters, until you get the desired effect. Be mindful that image transitions require a considerable amount of processing to perform, since they are done through Director's pixel processing engine, and are not accelerated by graphics hardware. Therefore, though it is possible to have a transition render over a period of up to 30 seconds, your computer will not be able to process much else while the transition is in progress.

Also, remember that a screen transition should enhance the content of your movie, not distract or detract from it.

Basic Sprite Rollovers

Rollovers are the simplest type of animation. Typically, a rollover effect requires only two images and is designed to indicate buttons, or other interactive features in an interface. The easiest way to create a rollover effect is to begin with two or more images that are identical in width and height, and to tell Lingo to swap one image for another when the mouse rolls over one of the images.

Here is an example of artwork that can be easily turned into a rollover effect:

03-rollover-faces

For a rollover effect, each piece of artwork needs to be its own cast member and needs to be named. You can refer to Cast Members by number, but naming Cast Members is the best practice to adopt. Here is how the artwork might appear in the cast, along with the other necessary elements.

04-smile-cast


The first step in creating a rollover effect is to lay out the Score so sprites are in an appropriate place. You will also need to make sure you have a "hold frame" type of script to keep the playhead on the same frame, so the rollover effect can be seen. Below, is an example of a Score layout with the necessary elements.

05-smile-score-layout

Remember, sprites are instances of Cast Members, and they have unique properties that can be controlled with Lingo, such as position, size, movement, and opacity. Another property of a sprite is the Cast Member that is attached to it. By altering the '.member' property of a sprite you can change the Cast Member attached to the sprite instantly. You can refer to the Cast Member by name or number.

Here is an example of code that changes the Cast Member of the current sprite to a Cast Member named "Smile Face":

06-member-script1

If you notice from the Cast Window screen shot above, the Cast Member named "smile face" is in position 2 in the Cast Window. You could write the above handler to use the number of the Cast Member, rather than the name, like this:

07-member-script2

However, the problem with using numbers to refer to Cast Members is that they have a tendency to move to other positions as the development of the movie progresses, so you might inadvertantly refer to the wrong rollover image. Though this is not necessarily a difficult problem to correct a named Cast Member avoids this problem because the name doesn't depend on its position in the Cast.

The other issue to contend with in getting rollovers to work is to use the 'mouseEnter' and 'mouseLeave' messages to activate the changes in Cast Members for the sprites. The 'mouseEnter' message is sent once, when the mouse pointer intersects the bounding area of a sprite, and the 'mouseLeave' message is sent once when the mouse pointer leaves the bounding area of a sprite.

Below, is a complete script to manage a rollover effect:

08-rollover-script-complete

That's all there is to it. Of course you can get fancier and have more than one cast member for the rollover to make a smoother, animated rollover. Sometimes this is done, but the basic rollover effect shown in this exercise is good enough, in most cases.

Cursors:

As an added interface feature, you might consider changing the cursor when the user rolls over, then rolls away from a sprite. The below handler can be added as a behavior to any sprite to make the cursor change.

09-cursor-behavior

Here's a link to an Adobe Director movie that includes a simple rollover effect, as well as the above cursor change script.

Summary:

After reviewing this exercise and the example movie you should try creating your own rollover artwork and plugging in the Lingo to handle the rollovers. Rollovers are not only fun to create, but can greatly enhance the end-user experience by clarifying which elements on the screen are interactive.

<     Table of Contents     >