Smooth Zoom and Pan

Smooth Zoom and Pan. Click to change images.

This demo uses over-sized source images. Basically, the source image is over-sized relative to the output rect. The smooth movement is created by slowly moving a large rect across this over-sized image. This means that we can make 'sub-pixel' movement using Director's automatic dithering of images when they are scaled down when copypixeled to a smaller rect.

The basic behaviour is this:

property myCanvas, myDestRt, mySource, mySrcRect, toggler, myBlend





on beginSprite (me)

 myCanvas = (the stage).image

 myDestRt = rect(0,0,400,400)

 mySource = member("P1010128").image

 mySrcRect = rect(0,0,400,400).offset(600,600)

 mySrcRect = mySrcRect.inflate(300,300)

end





on exitFrame me

  go to the frame

end



on enterframe (me)

 if myBlend < 190 then myBlend = myBlend + 5

  myCanvas.copyPixels(mySource, myDestRt, mySrcRect, [#BlendLevel: myBlend])

  if mySrcRect.width > myDestRt.width then

   mySrcRect = mySrcRect.inflate(-1,-1)

   mySrcRect = mySrcRect.offset(1,0)

  else

   me.ToggleImages()

  end if

end



on mouseDown (me)

  me.ToggleImages()

end



on toggleImages (me)

 toggler = NOT(toggler)

 if toggler thenmySource = member("P1010034").image

 else mySource = member("P1010128").image

 mySrcRect = rect(0,0,400,400).offset(600,600)

 mySrcRect = mySrcRect.inflate(300,300)

 myBlend= 0

end
First published 15/06/2005