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
Last updated 4th July, 2005

Jorge said

Hello!

I'm new with Director MX 2004, and need to make a zoom efect like your example. My problem is with timing. I don't know how to zoom the image slowly like you do. Can you help me with that?

Thanks a lot!
Jorge

Posted 21st July, 2006

Luke Wigley said

Hi,

You can slow down the animation by adjusting the frame-rate. However, the real trick is to keep the animation smooth (which requires a high frame rate) but zoom the image in smaller increments (so it zooms slowly and smoothly).

This example movie uses an over-sized image (2000x1200 px I think) which is copypixeled down into a small rect. When the source rect (which is bigger that the destination rect) is moved by a pixel (to pan the image) and shrunk by a pixel (to zoom) and then copied down into the smaller destination rect, it means the image can 'move' in smaller than one pixel increments. This means you can zoom slowly without it becoming 'jerky'. I'll try and find the source movie and upload it - hopefully that will explain the technique.

-- Luke

Posted 21st July, 2006

Hikka said

That simply looks nice - very smooth.
Hoping for sourcecode :)
Hg

Posted 26th March, 2008

Add Your Comment






[Preview]


Verification image

Note - paragraph formatting and links (h-refs) are handled automatically. Most HTML is removed (though some like <em><strong> are allowed). Email addresses are never displayed.

Pithy and yet enlightening comments most welcome. Spammy or unreasonably obnoxious comments zapped without apology


© 2006 MeccaMedialight. Site Powered by Wrangler 8.