- Creating Sliding Panels for Navigation and Transition Effects
- Other Uses of the Slide Algorithm
- Multiple Mouse Slide
- Coding the Multiple Movement Algorithm
- Using Functions to Make Efficient Code
- Passing Parameters to Functions
- Duplicating the Movie Clip On-the-Fly
- Adding Scale to the Effect
- The Sliding Mask Transition Effect
- Creating the Function for X and Y Movement
- Adding to the Transition Effect
- Conclusion
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.
-
Create a new movie sized at 500x300.
-
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).
-
Select the picture strip and press F8 to turn it into a movie clip. Name it pictures and press OK.
-
Create a new layer above this one and name it function.
- 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.
Figure 3.23. Go to dragslidefade.com to download this or other strips of pictures.