Animating slideshows with pan/zoom effects
Note: This tutorial is for advanced users, producing videos with Narakeet scripts. For basic information on how to control subtitles with videos created from presentations, check out Create Ken Burns animations from Powerpoint.
A very common trick to make static images more interesting for watching is to animate them slightly, either by moving a section of an image slowly across the video frame or by zooming in or out. This type of animation was made famous by Ken Burns in his documentaries, making use of historical photographs to great effect. Narakeet makes it easy to apply pan/zoom effects to images and create visually interesting slideshows from static images. This tutorial explains how to create pan/zoom slideshows
- Use large assets
- Specify the size and the position with the image
- Executable example
- More information
Use large assets
To create a smooth pan/zoom effect, you should use image assets significantly larger than the video frame. For example, to create a 720p video, use full HD (1080p) or even quad HD (1440p) images. If the image assets are the same, or just a bit larger than the video frame, the zoom effects will be pixelated or jittery.
For best results, use images that are in the same aspect ratio as the video frame.
Specify the size and the position with the image
To resize images with pan/zoom effect, specify one of the following 5 values for the image size when adding the file to the script:
pan- just moves across an image without zooming
zoom- just zoom in without moving across the image
zoomout- start zoomed in, then animate to cover the frame with the image
panzoom- combine pan and zoom, move in while moving to one of the sides
panzoomout- combine pan and zoomout, move out of the picture while moving to one of the sides
When using one of the options with panning, you’ll also need to specify the edge towards which the animation will move. You can set the
position property of the image to one of the following:
top- move from the center towards the top edge
left- move from the center towards the left edge
right- move from the center towards the right edge
bottom- move from the center towards the bottom edge
For example, the following line will add an image with a pan/zoom effect moving from the center of the image to the right edge:
The following line will add an image with a slight zoomout effect, but staying focused on the center:
You can also specify these properties individually, if using the full image stage direction syntax:
(image: file: pic.jpg position: right size: panzoom )
Check out the image-panzoom example project on GitHub to see the key features explained in this tutorial in action.
For more information, check out the
Image asset format documentation.