Creating the front page DEMO Slideshow: Part 1

6th March | Tutorial

This tutorial is part of a multi-part series that documents some of the tricks we’ve employed to create the DEMO photo slideshow you see on our front page.

One of the most exciting features of version 3.0 Pro is the ability to layer multiple pictures into a single slide. We’ve exploited this a fair bit in our DEMO, as you can see in the below screen (Multi-pictures slides are those with a number at the bottom right corner).

The DEMO consists of a total of just 11 slides. In this series, we will be picking out the more interesting slides and describe how we create them. This tutorial describes the creation of the 1st 2 slides in the DEMO.

The 1st screen starts with a rotating picture frame, which is easily done by applying rotation to the picture frame GIF file. We apply a total of 3 keyframes to this picture frame. The picture frame rotates from the 1st to 2nd keyframes, and then pauses from the 2nd to 3rd keyframe:

Now that the picture frame rotates nicely and pauses after rotation, we want to fade in our main picture (black/white hands) behind the picture frame. To do this, we’ll need to overlay the picture frame above our main picture in a multi-pictures slide:

For the picture frame, we want it to have the same zoom and rotation values as the previous slide. We do this in the SETTINGS tab (make sure the picture frame layer is selected):

Because we want the picture frame to stay stationary, we will need to set the end keyframe to have the same value as the start keyframe. This can be easily accomplished by navigating to the end keyframe (click on “>”), and selecting “Copy from Previous Frame” from the “menu” button:

Now that we have the picture frame layer set correctly, it’s time we set the main picture layer. We change the layer we want to edit in the layer selector:

In this case, we just want a slow simple zoom. We leave the start keyframe as it is, and modify the end keyframe with a slightly bigger Zoom value:

That’s it! We click NEXT to generate our multi-pictures slide, and we will have our picture frame overlayed on top of our zooming main picture. You can view the final effect in the DEMO photo slideshow.

Powered by WordPress