Auto-scaling sprites for a MIAW

June 18, 1998
by Pat McClellan

On a recent CD-ROM project, the client requested the following functionality: when the user clicks on a product, a technical drawing of that product opens up in an new window. This new window should be movable and resizable, AND when resized, the drawing should scale itself without distortion. My partner and I immediately thought of using a movie in a window (MIAW) to accomplish the movable resizable window part, and Media Lab's Effector Set Scale behavior to accomplish the non-distorted scaling.

For those of you who haven't used MIAWs, they're really very useful and not difficult. What you do is create a separate dir file which will be opened in a window. Then you simply call for that window to be opened by defining several variables, such as the rect and whether the title will show in the window. This is an example of a handler which would go on the icon or button in your "main" movie.


on mouseUp
  global newWindow
  set newWindow to window "miaw"
  set the rect of newWindow to rect(40,40,360,280)
  set the fileName of newWindow to "miaw.dir"
  set the titleVisible of newWindow to TRUE
  open NewWindow
end

Everything else here goes into your movie which will be opened in the window. NOTE: It only works when it is opened as a MIAW.

When the movie is started, I establish global values for the original width and height of the movie window. These values are established for the window named "miaw". Change this as necessary to match the name of the window as set in the main movie.


on startMovie
  global gstartRect, gStartHeight, ¬
    gStartWidth
  set gStartRect = the rect of window "miaw"
  set gStartHeight = the bottom of gStartRect ¬
    - the top of gStartRect
  set gStartWidth = the right of gStartRect - ¬
    the left of gStartRect
end

When this movie is opened as a MIAW, if the user resizes the window, the on resizeWindow handler gets called. Again, note that it specifically references the window's name, so alter it to match your MIAW's name.


on resizeWindow
  global gStartRect, gStartHeight, ¬
    gStartWidth
  set NewRect = the rect of window "miaw"
  set NewHeight = the bottom of NewRect - ¬
    the top of NewRect * 1.00
  set NewWidth = the right of NewRect - the ¬
    left of NewRect * 1.00
  set scaleFactor = min(newHeight/gStartHeight, ¬
    newWidth/gStartwidth)
  sendAllSprites (#Resize, scaleFactor)
  updateStage
end

I added the " * 1.00 " in order to get the handler to see fractional values. Otherwise, the sprites only scale as factors of 1, 2, 3, etc. and therefore cannot shrink.

"Aspect Ratio" is a term which means the ratio an image's width to height. For a typical director stage, that aspect ratio is 4:3, but since you can specify the rect of you MIAW, the aspect ratio might be anything. When the user resizes the window, the window's aspect ratio is bound to change, but you generally don't want you images to stretch and distort. You want them to maintain their original aspect ratio.

The way that we'll apply this concept here is as follows: the sprites in the MIAW will be as large as possible without being stretched or cropped. That means the scale factor is the smaller of either the resized height divided by the original height, OR the resized width divided by the original width. This is coded in the resizeWindow hander as:


set scaleFactor = min(newHeight/gStartHeight, ¬
  newWidth/gStartwidth)

Once scaleFactor is set, I simply use a sendAllSprites to call the following "resize" behavior which is attached to all sprites to be resized.


property startWidth, startHeight
-- the initial dimensions of the sprite
on beginSprite me
  set startWidth = the width of sprite the ¬
    spriteNum of me
  set startHeight = the height of sprite the ¬
    spriteNum of me
end
on resize me, scaleFactor
  set the width of sprite the spriteNum of me = ¬
    startWidth * scaleFactor
  set the height of sprite the spriteNum of me = ¬
    startHeight * scaleFactor
  set the locV of sprite the spriteNum of me = (the ¬
    height of sprite the spriteNum of me)/2
  set the locH of sprite the spriteNum of me = (the ¬
    width of sprite the spriteNum of me)/2
end

This behavior handler simply sets the width & height = the original size of the sprite * the scaleFactor. The last two lines set the position of the sprite in the top left corner. NOTE: the registration point must be set to the center of the bitmap for the positioning to work correctly.

The only thing that Effector Set is used for is to give the best resolution to a scaled AlphaMania member. The antialiasing capabilities of AlphaMania are pretty impressive and I highly recommend this Xtra.

From the Effector Set Behavior Library, drag behaviors # 1 and # 7 into your cast. #1 is a movie script, not a behavior, which simply allows the identification of AlphaMania members. You don't even need to drag it onto anything. Just leave it in your cast. Now, drag the Scale behavior onto your alphaMania sprite & set it to ON. That's it.

These same concepts for scaling and maintaining aspect ratio can be applied to Shockwave. Martin Winkler cooked up some awesome JavaScript which lets the Shockwave movie figure out how big the movie should appear based on the size of the browser window. If you pair that with the scaler behavior, you'll have a fully scalable Shockwave movie.

Sample movies demonstrating this technique are available for download in Mac or PC format.

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.