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
endLuke 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
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