Director News
Director Web Sites
Mailing Lists
News Groups
Project Examples
Useful Web Sites

Don't miss these
Get CD ROM Drive letter
Image capture Xtra
Slider Puzzle by J.R.D.R.
An Unofficial Brief History of Director
ToolTip Behavior
Add/Remove Line Feeds
Fade till done
PostScript Xtra
Rotate a Flash Sprite



Article Allowing Users to Skew an Image

Added on 8/30/1999


D7 D8 Mac PC Shockwave

This item has not yet been rated

Author: MediaMacros (website)

I am setting up a simple page layout program for elementary school students where the kids can move items around on the screen, place text, and learn how to set up a simple page layout for newspaper or magazine print. I want to allow them to scale or distort images and text for effects as well. I can get this to work in Director, but not in authoring mode. Is this possible?

Get the source
Actually, with Director 7 this is not so hard to do.  Most people have seen the great 3d effects Director can accomplish with the new quad property, but there are other useful applications for it as well.  Many people get overwhelmed at first by the math involved for using Quads to fake 3d, but the basic concept need not be so daunting.  All a quad is is a list of four points on a rectangular bounding box.   They are as follows...

1 - Top Left
2 - Top Right
3 - Bottom Right
4 - Bottom Left

So by moving around the bounding rectangle in a clockwise motion we are building a list of those points that can be read and set through director.  To see a sprites quad property just type...

put sprite(1).quad

into the message window.  So how will this help us?  Well, in most programs like Freehand, Illustrator, or Page Maker you can click on an image then pull these points around.  For this we will need 2 main elements.  One or more sprites to be objects and then 4 "targets", one for each corner.  For simplicity sake we can set up one behavior that can be dropped on both, and then we simply pick whether this is a point or an editable object.  In the beginSprite handler we use the "mod" function to automatically set the points.  Using mod is the equivalent of dividing a number by another over and over until you get a remainder.   The result is that remainder.  For example, 3 mod 2 would return 1.  3 mod 3 would return 0. If all the target points are placed in the score in sequence, then the behavior applied to each, we can use the spriteNum along with the mod function to get the number of the point that the sprite will represent.

So now what.  Well, we also set a beginSprite handler for the object that defines its quad.  When ever we click on that object we want to have that sprite to become "active" and all 4 handles to jump into place.  Then we can grab a handle and move it and that will send a message to the object to update it's quad.   When we are done we can click on the background (also holding the same script) and we can move all 4 handle sprites back off the stage.  Take a look at the code below and notice how each handler has different conditions depending on whether we have set it as a point, an object, or a background.

--Copyright 1999 Chuck Neal
--If you find this code helpful, send me an e-mail and let me know. :-)
property whichItem, spriteNum, whichPoint, quadList

global activeSprite

on getPropertyDescriptionList me
  p_list = [:]
  p_list.addProp(#whichItem, [#format : #symbol, #comment : "Control point or object?", #default : #point, #range : [#point, #object, #background]])
  return p_list

on editQuad me
  if whichItem = #point then
    sprite(spriteNum).loc = sprite(activeSprite).quad[whichPoint]
  end if

on hidePoints me
  if whichItem = #point then
    sprite(spriteNum).loc = point(-1000, -1000)
  end if

on mouseDown me
  if whichItem = #point then
    repeat while the stillDown
      sprite(spriteNum).loc = the mouseLoc
      sendSprite(activeSprite, #rescaleQuad, whichPoint, sprite(spriteNum).loc)
    end repeat
  end if

on beginSprite me
  if whichItem = #point then
    whichPoint = (spriteNum mod 4) + 1
    sprite(spriteNum).loc = point(-1000,-1000)
    quadList = sprite(spriteNum).quad
  end if

on rescaleQuad me, whatHandle, whatPoint
  quadList.setAt(whatHandle, whatPoint)
  sprite(spriteNum).quad = quadList

on mouseUp me
  if whichItem = #object then
    activeSprite = spriteNum
  else if whichItem = #background then
  end if

on getBehaviorDescription me
  return "For this behavior you will need 4 small " & quote & "handle" & quote & " sprites and at least one image, text, or shape sprite. Drop the behavior on the points, the object and on a background sprite. When you click an object the handles will jump into place and dragging them will skew and scale the image. Click the background the hide the handles off screen."

The current active sprite is tracked via a global variable and the rest is kept in local properties.  Through the use of sendSprite and sendAllSprites, each element can "talk" to the others and copy properties from one to another.

How can you take this to the next step?  Well, what about making it 8 handles so you can skew sides rather than just points. Add more editing tools, or rotate it back into 3d space.  Play with it and see what you come up with.



36 South Court Sq
Suite 300
Newnan, GA 30263

Send e-mail