Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
This chapter is from the book

The Sliding Mask Transition Effect

By combining multiple panels with masks applied to them, you can create some interesting transition effects. This always looks great with photographs, and World Domination Design Group (WDDG) used it brilliantly on its John Mark Sorum web site.

The basic principle is this: The stage contains two identical movie clips that contain your pictures laid out vertically with one above the other. Clicking a button slides the panels to a new Y position, with the second panel moving slightly more slowly than the first. Each movie clip having its own mask applied to it achieves the transition effect. When both movie clips are in the same position, you can't visibly see the mask. But when you slide the clips, you see the masks because panel 2 is taking longer to reach its destination (see Figures 3.21 and 3.22).

Figure 3.21. The two movie clips move toward their target position...

Figure 3.22. ...and then finally come to rest, revealing the new picture.

Setting Up the Main Stage

I'm going to show you how to build a function that can achieve this effect, not just in the Y-axis but also in the X-axis. You'll also expand on the technique to create some other effects.

  1. Create a new movie sized at 500x300.

  2. Rename layer 1 pictures1, and then import a suitable strip of pictures. I've used pictures that are 300 pixels tall. You can download the two-picture strip I've used from dragslidefade.com (see Figure 3.23).

  3. Figure 3.23. Go to dragslidefade.com to download this or other strips of pictures.

  4. Select the picture strip and press F8 to turn it into a movie clip. Name it pictures and press OK.

  5. Create a new layer above this one and name it function.

  6. Double-click the first frame in this layer to show the Frame Actions panel. This is where you will create the main function to move the panels.
  • + Share This
  • 🔖 Save To Your Account