- 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
Multiple Mouse Slide
Okay, the title of this is a bit confusing, but it actually refers to moving several panels at different speeds to the mouse X position. As they reach their destination, the panels gradually fade out. Again, this looks great over the top of a bitmap. I've used a shot taken with my Canon Digital Ixus on the train to Manchester, one cold January morning. The picture is available from the book's web site (dragslidefade.com), but you can, of course, use any image you'd like.
Setting Up the Movie
-
Create a new Flash movie sized at 500x375.
-
Rename the first layer image and then import your bitmap into this layer.
-
Use the Align panel to center align the image to the stage (see Figure 3.10).
-
Next you need something to slide. Create a new layer above the image layer and name it panel1.
-
In this layer draw a rectangular box 125x375. Use the Info panel to set the dimensions (see Figure 3.11).
-
Select the rectangle and turn it into a movie clip by pressing F8. Name it panel and press OK.
-
With this movie clip still selected, use the Instance panel to name it panel1 (see Figure 3.12).
-
Create a new layer and name it panel2.
-
Copy the movie clip from the panel1 layer and then paste it into the panel2 layer by choosing Edit/Paste In Place.
-
With this second panel selected, use the Instance panel to rename it panel2.
Figure 3.10. After the image is aligned to the stage, you can prepare for the coding that will get your movie moving.
Figure 3.11. Using the Info panel is a very easy way to alter dimensions to a certain size, rather than trying to do it by sight.
Figure 3.12. This is the first of two panels into which you will be coding movement.
You now have two panels on separate layers above your bitmap image. Now it's time to do the coding to get them to move.