Goal

In this exercise you will learn more about sprite properties and how to alter sprite property values to create interesting visual effects and rollovers.

The table below lists some of the more common sprite properties that you may encounter in Director. Some of these properties are easier to figure out than others, but all of these properties, and more, are available for use in your Director movies. If you see a property you don't recognize you should search the online Help System in Director to find out how you might use that property. Some of the easiest properties to work with visibly alter the appearance of a sprite. For example, width, height, and blend. Other properties will be more challenging to understand because they are more abstract, or require a more thorough understanding of Director, Lingo, and other related properties.

backColor bgColor color foreColor
scoreColor constraint loc locH
locV locZ bottom height
left quad right rect
top width blend flipH
flipV ink moveableSprite rotation
scale skew trails visible
member memberNum name type

 

The image below may be useful for this exercise. If you want to use the image on the right, Right-Click it from your browser and copy it, or save it to your computer, then import it into Director. It will be used as a representative sprite image for the examples shown in this exercise.

You may also download a Director movie that includes the balloon image for experimentation.

01-balloon-transp

 

02-balloon-stage-sprite03-balloon-prop-inspector


When you select a sprite on the stage (as shown in the above image on the left side above), its properties appear in the Property Inspector window (shown in the above image on the right side above). From the Property Inspector window we can see most of the properties that can be altered for the selected sprite. Each of these properties is available for any authoring purpose you choose using Lingo, once you know how to refer to the desired property. For example, we can see from the Property Inspector window that the selected sprite is 143 pixels wide and has a height of 219 pixels. Using Lingo, we may either examine these properties or change them. The easiest way to experiment is to use the Message Window. If you enter the following statement into the Message Window with the balloon sprite in channel 1, you will see the width of the sprite displayed.

04-sprite-width-msg-win

If you want to change the width of the sprite you can assign it a different value. For example, we could make the width of the sprite 300 pixels wide. Type the following into the Message Window to change sprite 1 so it is 300 pixels wide. Your movie will need to be running for the change to appear.

sprite(1).width = 300

Using the equals sign '=' allows you to assign a value to whatever valid property you choose. By using combinations of properties and Lingo handlers you can get all kinds of interesting effects.

You should see that the sprite is now much wider, as shown in the image below.

05-wide-balloon
Note: Bitmap images like the one shown above, that have no antialiasing as part of the source image, will not necessarily look very good when rescaled. This is because when scaled up, for example, each pixel is simply drawn larger, so any edges between pixels apparent in the unscaled source image become even more apparent.

The best results for bitmapped assets are achieved by creating the artwork at the display size you intend to use it. However, antialiased artwork that is larger in pixel dimensions than you need can still look good when displayed at a smaller size because of the algorithm Director uses to scale down the artwork for the sprite.

For maximum playback speed (frame rate) and optimization you should avoid using large images, such as those commonly produced by 12 megapixel (and larger) digital cameras that are often 4000 x 3000 pixels (or more) in size. Images that large, when displayed in real-time at a smaller size, require a considerable amount of processing to "throw out" the data that allow it to display at 800 x 600, for example. Even a very fast computer can be noticeably slowed down if it is required to display numerous animated "high resolution" images. Remember that in some cases, with certain bit copy modes, each pixel of an image must first be scanned by an algorithm to determine how it should be displayed, or overlayed with other images. The processing for this can be "expensive", so optimization is a good practice for any kind of media asset, where it is practical.

Below are examples of how specific properties can be altered to create unique rollover effects. Each of the examples are designed to be attached to the sprite directly.

 06-sprite-width-behavior

The above handler adds '10' to the current width of the sprite when it's rolled over, then subtracts that amount when the mouse is rolled way. This slight enlargement works as a rollover effect without requiring two different pieces of artwork.

The handler below uses the same 'mouseEnter' and 'mouseLeave' messages to alter the 'blend' property of a sprite. This can also be a good rollover effect.

07-dim-sprite-behavior

To see these Lingo script examples and others in action, download this movie. Try each behavior with the balloon sprite to see the effects of different messages working in conjunction with different sprite properties. Look at each script to see which specific properties and messages are being used.

Exercise:

Based on the example movies and information provided , create a movie with a sprite that uses some of the properties listed at the top of the exercise. Try combinations of properties to see what happens. Hopefully, when you're finished playing in the "pixel playground" you will have a better understanding of how to use sprite properties in your own movies.

<     Table of Contents     >