Create a Scrollable Frame in Adobe DPS in 10 Easy Steps

Scrollable Frame1

Scrollable text frame is a popular interactive feature, we can find almost in every digital magazine, but scrollable image frames are not so common. I’ll show how to create a simple scrollable frame. It’s useful feature, because it helps create interesting things, for example,
I can convert these car images into buttons and crate a gallery with scrollable buttons. 

I’ll use photo of VW Kombi. This is the content which readers can scroll (It can be an image or a text frame or a group. In this case it is a group).

N.Tsech 2014-05-04 at 12.46.55

We’ll create 2 frames: the first is a content frame (text, image, group), the second is a container frame.

Step 1. Create an icon to show the direction.

N.Tsech 2014-05-04 at 13.44.57

Step 2. Select the frame and the icon (Selection Tool, V N.Tsech 2014-04-24 at 09.57.11) and
Group them (N.Tsech 2014-05-01 at 10.25.22 + G).

Step 3. Move the frame to the right bottom corner. We hide the frame and make visible only the icon .

N.Tsech 2014-05-05 at 14.02.06

Step 4. Create a container frame (red) on top of the first one. The size of the container frame = to the size of scrollable area, from the bottom to the top (768 px).

N.Tsech 2014-05-05 at 14.14.18

Tip: I usually create a layer for every interactive feature. We have only 1 interactive element (Scrollable frame) and we have 2 layers (Scrollable frame and background).

N.Tsech 2014-05-05 at 14.14.37

Step 5. Select the content frame with cars and cut it (N.Tsech 2014-05-01 at 10.25.22 +X) or  Edit > Cut.

Step 6. Select the container (red) frame and open Edit > Paste Into or (N.Tsech 2014-05-01 at 10.25.22 + Shift + V). Now we have the frame with the content inside the red frame.

N.Tsech 2014-05-05 at 14.14.51

Step 7. Open Window > Folio Overlays > Scrollable Frame.

folio5 copy

Step 8. Select the frame (Selection Tool, V N.Tsech 2014-04-24 at 09.57.11) and select the scrollable direction: Vertical.N.Tsech 2014-05-05 at 14.14.51

Step 9. Select “Use Document Position” otherwise the group with cars will appear in upper corner.

n-tsech-2014-05-05-at-14-19-33 copy

Select Export format: Raster. Raster is used for image-based scrollable frames and Vector for text-intensive scrollable frames. 

Step 10. Preview.


Follow me