- 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
Adding to the Transition Effect
After you have the basic effect working, try altering the speed of the panels by changing the numbers in the function calls. Also try making some more interesting mask shapes, rather than simple boxes. Remember, you also can move the images left, right, and diagonally by specifying a targetX position. For example, the best way to utilize this is to have nine images laid out in a 3x3 grid. You can then set up nine buttons that move the images up, down, left, or right, all without any additional programming to the main function.
Adding Rotation
One addition you can make to the movePanel function is rotation. When the panel is moved, you can make the rotation equal to the rate variable. This makes the image spin into its resting place!
-
Double-click the first frame of the functions layer to display the movePanel function.
-
Inside this function, add the following piece of code to the last line of the function (before the last curly bracket):
_root[whichClip]._rotation = rate;
This makes the _rotation property of the targeted movie clip (whichClip) equal to the value of the rate variable. Remember rate starts off as a big number and gradually decreases down to 0.
Adding Scale
Another effect you can add is that of scale. When the panel is moved, you can make it seem like the picture is zooming in as it reaches its target destination.
-
Underneath the rotation line you've just added to the function, add another line of code:
_root[whichClip]._xscale = 100 + (rate *2);
This sets the _xscale property of the targeted movie clip to a value of 100 (which is its normal state) plus the value of rate multiplied by two. It's been multiplied by two here so that it has a more dramatic effect.
-
Test the movie. You should find it spins and zooms into place when the panel moves. See Figure 3.38.
Figure 3.38. The spinning and zooming effects you see are just the first of the special effects you can add.
Play with the script to achieve different effects. Remove the rotation line to see what it looks like with just the scale effect, or add the scale effect to the yscale of the movie clip. Play around and experiment.