The Flash 'Slide' Algorithm
- 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
Creating Sliding Panels for Navigation and Transition Effects
The sliding panel navigation system has become quite prevalent in Flash-powered sites. Click a button and a panel slides into place to take you to a new area of the site. The goal of this chapter is not to show you techniques that have been done to death, but knowing how this effect works will give you some important principles about programmatic movement. In this chapter you're going to look at the basic principle of creating motion and then look at how you can expand on it to create some more interesting effects, and not just for navigation.
Basic Slide Algorithm
The sliding action works by manipulating the X value (or if you prefer, the Y value) of the targeted movie clip. When a button is pressed or rolled over, a variable is set which specifies the new X position of the panel movie clip. A script is then run, looping around and moving the panel a bit at a time to its new X position. And that's all there is to creating a basic slide action! But how does it seem to ease in and out during the slide, slowing down as it reaches its final X position? Well, that's really simple also, but I'll show you that later in the chapter.
-
First, you need to have something to slide. I created a 3-panel bitmap in Photoshop that consisted of three 400x250 pixel images laid out in a row 1200 pixels wide (see Figure 3.1). You can make your own or use this same one, which is available from the book's web site (dragslidefade.com).
Figure 3.1. Save the image as a high-quality Pict or Bitmap. You can compress it later in Flash.
-
Create a new Flash movie sized at 400x250 pixels.
-
In the first layer, import your panel image by pressing Ctrl+R (Cmd+R on Mac).
-
Select the image and then turn it into a movie clip by pressing F8. Name it panel and press OK.
-
With this clip selected, position it so that the middle picture in your panel strip is in the center and the upper edge is against the top of the main movie (see Figure 3.2).
-
Using the Instance panel, name it panel.
-
Above this layer, create a new layer and name it script. This is where you will put your script movie clip that will control the movement of the panel.
Figure 3.2. Use the Align panel to easily position the movie clip correctly.
Setting Up the Script Loop
The script loop is the main engine that will control the movement of the panel. It is a standard movie clip script loop with the main code being on one frame and a gotoAndPlay action on a subsequent frame to make it loop.
-
Make sure nothing is selected by pressing Ctrl+Alt+A (Cmd+Opt+A on Mac) and then press Ctrl+F8 (Cmd+F8 on Mac) to create a new movie clip. Name it script and press OK (see Figure 3.3).
Figure 3.3. When you create this new movie clip, you automatically go into the symbol editing mode for it.
-
Insert a keyframe (F6) at frame 5 and then one also at frame 6. You now have keyframes in your script movie clip at frames 1, 5, and 6.
-
Name the first layer script. Insert a new layer above the first layer and name it labels.
-
In this labels layer, add a keyframe at frame 5.
-
Click frame 1 in the labels layer and use the Frame panel to give it the label of stop. For frame 5, give it a label called move (see Figure 3.4).
-
In the first layer (the script layer), double-click the first frame to display the Frame Actions panel for that frame.
-
This first frame does two jobs. First, put a stop() command in, so the movie clip doesn't automatically start when it first appears on the stage. Next, set a variable called baseRate. This dictates the speed of the panel slide, as you will see in a moment. So for this frame, add the following code to the Frame Actions window:
stop(); baseRate = 1.6;
Figure 3.4. Adding labels makes it easier to keep track of the script setup.
These labels enable you to execute the code in the script without having to remember which frame you put your code on!
Coding the Slide Algorithm
The code on frame 5 is the main piece of code that loops around, moving the panel to its target destination, either left or right, when a button is pressed. First, look at how you move the panel left if the target X position is less than the panel's current X position.
-
Double-click the keyframe at frame 5 in the script layer to display the Frame Actions panel.
-
Check to see if the panel's X position is greater than the value contained in the targetx variable, which is set when a button is clicked:
-
Double-click frame 6 in the script layer.
-
In this Frame Actions panel, add the following code that will keep the script looping:
gotoAndPlay("move");
if (_root.panel._x > _root.targetx) {
If this is the case, then you need to move the panel to the left. To work out how much you move the panel with each pass of the loop, use a very simple algorithm.
First find out the difference in the two X positions and put that into a variable called difference. Say, for example, your current panel's X position is 500, and the target X position is 200. 500 minus 200 is 300. You can't simply move the panel 300 pixels to the left, as there would be no perceived movementit would just jump to its new X position. So, what you need to do is divide the difference by a number. The number you use is the value of baseRate, which in this case is 1.6.
Thus, difference divided by baseRate equals rate in the current example:
300/1.6=187.5
This gives you the amount that you move your panel to the left. Now you're probably thinking, "Hang on, I can't simply just keep moving it 187.5 pixels to the left. It should slow down as it reaches its destination." Well the thing is, the difference is recalculated every time the script loops around. So in the given example, the next time it loops around the current X position of the panel, it will be 500 minus 187.5, which is 312.5. See how the new calculation works out as follows:
312.5200=112.5 (panel_xtargetx=difference)
112.5/1.6=70.3125 (difference/baseRate=rate)
You can see that the amount you will move the panel is just over 70 pixels. Obviously the nearer the panel gets to its target X position, the slower the panel moves each time the loop circles around. Eventually it stops moving because the difference is zero! The effect of this is that the panel seems to ease into its final resting place. Of course you can alter the baseRate and try different numbers. The higher numbers move the panel more slowly, lower, and more quickly. Season to taste!
Following is the complete code for moving the panel left and right. Enter this into the current open Script window, which is frame 5 of the script layer (see Figure 3.5).
difference = _root.targetx - _root.panel._x; rate = difference / baseRate _root.panel._x += rate;
Figure 3.5. After putting this code into the open Script window, you are ready for the final looping command.
That's it for the script! Now you need to add the buttons that will actually execute the code.
Adding the Buttons
The buttons actually execute the code you've just written by simply telling the script movie clip to gotoAndPlay the frame with the label move. You also set a few variables when a button is clicked so that the panel knows where to move.
-
Back on the main stage, drag the script movie clip into the script layer.
-
With the clip still selected, use the Instance panel to name it script (see Figure 3.6). This is to help reference the script from your buttons when they're clicked.
-
Create a new layer called buttons above the script layer.
-
Draw out a rectangle on the stage, select it, and then turn it into a button (F8). Name it something creative, such as button, and click OK (see Figure 3.7).
-
To add this functionality to the button, select it and press Ctrl+Alt+A (Cmd+Opt+A on Mac) to display the Object Actions panel.
-
Add an on(release) event handler to the Script window as follows:
-
Add the following code between the curly brackets to finish the button script:
-
Back on the main stage, copy the button and paste it twice so that you have three buttons on the stage (see Figure 3.8).
-
Select button 2, open the Object Actions panel for that button (Ctrl+Alt+A [Cmd+Opt+A on Mac]), and alter the targetx variable so that it now reads as follows:
-
Do the same for the third button, but alter the targetx variable to 200. You now have three buttons that set the panel to different X positions.
-
Test your movie to see if it works. You should find that clicking the buttons sends the panels sliding left and right in a very fluid fashion (see Figure 3.9).
-
Try altering the baseRate variable to a lower or higher number to get different speeds.
Figure 3.6. Always try to use descriptive instance names for movie clips.
Figure 3.7. You can add a great deal of functionality to the buttons you have created here.
When this button is clicked, you want it to do two things. First, it needs to set the value of the variable targetx. This is the new X position you want the panel to move to as follows:
targetx = 600;
Second, you want to actually call the script itself to move the panel as follows:
script.gotoAndPlay("move");
on (release) { }
This means that when the button is released (that is, clicked) the code between the curly brackets is executed.
targetx = 600; script.gotoAndPlay("move");
Figure 3.8. The three buttons you have created will set the panels to different X positions.
targetx = 200;
Figure 3.9. The key test of successful button making is how smoothly the motions of the panels execute.