Lesson 7: Properties

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 on the right 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.

When you select a sprite on the stage (as shown in the above image on the left side), its properties appear in the Property Inspector window (shown in the above image on the right side). 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.

trace(sprite(1).width)
-- 143

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

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

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.

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.

-- toggle the width of the sprite when it's rolled over
on mouseEnter me
sprite(me.spriteNum).width = sprite(me.spriteNum).width + 10
end

on mouseLeave me
sprite(me.spriteNum).width = sprite(me.spriteNum).width - 10
end

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.

-- dim the sprite
on mouseEnter me
sprite(me.spriteNum).blend = 50
end

-- bring the sprite to full opacity
on mouseLeave me
sprite(me.spriteNum).blend = 100
end

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

Set as favorite

Bookmark

Email this

Trackback(0)

TrackBack URI for this entry