Glowing sprites

October 5, 1998
by Pat McClellan

Dear Multimedia Handyman,

HELP! I need to have a graphic in the middle of the screen and script it so that when the mouse gets closer, a sound starts to fade in, incrementally, and a new graphic begins to glow over it, incrementally.

Signed,

Help!

Dear Help,

Remember you high school geometry lesson about calculating the hypoteneus of a right triangle? Time for a review. Let's say that you have a triangle where sides X and Y are at a 90 degree angle. To calculate the length of the third side (Z), this is the formula.

X² + Y² = Z²

It's fairly easy to postulate that side Z is always longer than either side X or Y.

Now, let's apply this to your problem. Imagine a right triangle where the ends of the long side (Z) are defined by the loc of your sprite and the mouseLoc. Side X is the horizontal distance between the locH of your sprite and the mouseH, and side Y is the vertical distance beween the locV of your sprite and the mouseV. Now, the formula above can be modified as follows:

 
set x = the mouseH - the locH of sprite whatever
set y = the mouseV - the locV of sprite whatever 
x² + y² = the distance²

That's the concept. Since length should never be negative, when we write the Lingo, we'll use the absolute value property to set the x and y values. Also, I tend to use more descriptive variables for x and y; in this case I'll used hInc and vInc for "horizontal/vertical Increment".

The next step will be to correlate the distance to 1) the volume of a sound channel, and 2) the blend of the sprite (the glowing sprite). The volume of sound has a range from 0 to 255, and since we want the sound to increase as the mouse approaches, we could simply set the volume equal to 255 minus the distance. To give you a little more control, I'll create a "fade" property. We'll multiply the distance by the fade property so that the sound fades over a shorter distance. (The higher the fade value, the faster the fade.)

Finally, you'll need to set the ink effect for your glowing sprite to BLEND. Then in the behavior, we'll set the blend to correlate to the sound volume. Blend has a range from 1 to 100, so to correlate it to the volume's range of 256 steps, we'll set the blend of sprite to the volume/256.

Here's the behavior, which you should apply to the sprite which will be "glowing".


-- distanceFader Behavior 
-- copyright © 1998 ZZP Online, LLC
property pMyLocH
property pMyLocV
property pFade
property pSoundChannel
property pMySprite
on getPropertyDescriptionList me
  set pdlist to [:]
  set the floatPrecision to 1
  addprop pdlist, #pFade, [#comment:"Rate of fade", ¬
    #format:#float, #default:3.0]
  addprop pdlist, #pSoundChannel, [#comment:"Which ¬
    sound channel?", #format:#integer, #default:1]
  return pdlist
end getPropertyDescriptionList
on beginSprite me
  set pMySprite = the spriteNum of me
  set pMyLocH =  the locH of sprite pMySprite
  set pMyLocV = the locV of sprite pMySprite
  set the blend of sprite pMySprite to 0
end
on exitframe me
  set hInc = abs(the mouseH  - pMyLocH)
  set vInc = abs(the mouseV - pMyLocV)
  -- Pythagorem's theorem
  set distance = sqrt((hInc * hInc) + (vInc * vInc))
  set the volume of sound pSoundChannel = 255 - ¬
    (distance * pFade)
  set the blend of sprite pMySprite = the volume of ¬
   sound pSoundChannel/2.56
end

Good luck with your project.

Patrick McClellan is Director Online's co-founder. Pat is Vice President, Managing Director for Jack Morton Worldwide, a global experiential marketing company. He is responsible for the San Francisco office, which helps major technology clients to develop marketing communications programs to reach enterprise and consumer audiences.