"Dragging" and "Sliding" :Part 2

We are quite familiar with the sliding panel in Flash. Click a button and an image or other object slides into place. There are any number of tutorials out there that show you how to do it. The purpose of this one, based upon a tutorial from Brendan Dawes' "Drag,Slide,Fade" ,is to help you understand the fundamentals behind them.

Flash 1: Click a button to see the sliding effect.

The key to this exercise is understanding the movement. It is constrained to the x axis and all movement is to a new position on the x-axis when a button is clicked. The movement to the new position is contained a variable value set in the button and it determines how many pixels to the right or to the left that the image moves.

Getting started

1. Download and unzip the exercise files for this lesson.
2. Open Flash and set the stage dimensions to 320 pixels wide by 400 pixels high.
3. Set the stage color to #999966.
4. Add four more layers to the movie and name them, from the top to the bottom:
   • Script
   • Button
   • Images
   • Panel
   • Background

Image 1: The layers are created.

5. Select File>Import>Import to Library and import the images in the Exercise folder to the Library.
6. Select the background layer
7. Select the Rectangle tool and create a black rectangle that is 320 pixels wide and 60 pixels high.
8. Select the Panel layer and drag the "strip" image from the library onto the stage.
9. With the strip selected, press the F8 key and convert it to a Movie Clip named panel.
10. With the strip still selected, give it the instance name of "panel".
11. Select the Images layer and drag a copy of "Image1" onto the stage. Resize it to 45% by selecting Modify>Transform> Scale and Rotate. Repeat this for the remaining images.
12. With the Images layer still selected, select the Text tool and enter "New York Poster Art". Set the color to white, the font to Veranda Bold and the size to 20 points.
13. Save the file.

Image 2: The Stage is set.

Variables in Flash

The slide action is going to be controlled by a movie clip that contains nothing but code. What this code will contain is a variable that determines how fast the slide occurs.

Variables, in Flash are data containers used to hold a specific piece of data that can be constantly referenced. Though you can store only one bit of data at a time in a variable, you can use the variable to contain or reference data at different times. For example you may have a variable named "fruit". This variable at one point could contain the value "apple" but another contain the value "orange".

Variables must be declared in Flash and it is now standard practice to use "strong typing" . All this means is that when a variable is declared you also have to declare the type of data it can hold.

The syntax for declaring a variable is :

var variableName:datatype = value

For example a variable containing a class size would be written as var firstYear:Number = 95

There are rules for variable naming:

• The first character must be an underscore (_), a letter or a dollar sign($). The first character cannot be a number.

• The subsequent characters must be underscores, letters, dollar signs or numbers.

• Spaces are not permitted in variable names.

• The name cannot be a key word recognized by Flash."Movie Clip" is an illegal name.

• The name must be unique. If you use the same name the last one will overwrite the first one.

"Wiring" up the slide

1. Select Insert> New Symbol or press the F8 key.
2. Create a new Movie Clip named "script".
3. When the new Movie Clip opens, name the Layer "actions".
4. Add a layer named labels.
5. Select the "actions" layer and add key frames at frames 5 and 6.
6. Select the "labels" layer and add a key frame at frame 5.
7. With the keyframe in frame 5 of the" labels" layer selected, add a label named "move".
8. Add a label named "stop" to frame one of the"labels" layer.
9. Select frame one of the "actions" layer and press the F9 key to open the Actionscript editor.
10. Enter the following script:

stop();

var baseRate:Number = 1.6

Those two lines of code stop the playback head and create a variable named "baseRate" that will determine how fast the panel moves. The higher the number the slower the panel moves.

11. Select the keyframe in frame five of the actions layer, open the Actionscript editor and enter the following code:

var difference:Number = _root.targetx -_root.panel._x;
var rate: Number = difference / baseRate;
_root.panel._x += rate;

To understand this bit of code , you have to "follow the numbers".

The panel will be moving right and left. To get into position we first have to know where the panel is and where it is to go.The difference between those two numbers is the distance the panel has to move.

The first line of code establishes a variable for that distance. It is called "difference". The number is calculated by subtracting its current location on the main timeline(_root.panel._x) from the target position on the main timeline (_root.targetx)

Another variable,"rate", is set to hold the speed with which the panel moves (difference-baseRate).

Those two calculations will be performed continuously until the panel's "x" position equals 0. As that occurs the panel will slow its movement into its final position because the variable, "rate", is getting smaller and smaller.

11. Select the keyframe in frame 6 of the "actions" layer.
12. Open the Actionscript editor and add the following:

gotoAndPlay("move");

13. Return to the main timeline and select the "script" layer.
14. Drag a copy of the "script" movie clip onto the stage.
15. With the "script" Movie Clip selected, give the instance name of "script" in the Property inspector.

Image 3: The movement code.

"Wiring" the buttons

The buttons are the hey to this exercise. They will be telling the "script" Movie Clip to go to the "move" frame and play the code. When the code does "play", it will be doing one calculation and moving to frame 6 of the "script" Movie Clip Frame 6 simply sends the playback head back a frame and the calculation is repeated.

1. On the main timeline, select Insert>New Symbol or press the F8 key.
2. Create a new button symbol named "button_btn".
3. When the button editor opens add a key frame in the Hit area and draw a small square. This will create a "hot spot" on the page.

Image 4: The button is nothing more than a hot spot.

4. Select the button layer and drag a copy of the button symbol on top of the first image in the images layer. The button will look like a small turquoise square. This is the "hot spot".

Image 5: A hot spot is placed over the small images.

5. Select the "hot spot" on the stage and open the Actionscript editor.
6. Enter the following code:

on(release){
var targetx:Number=0
script.gotoAndPlay("move");
}

The value for target x is based on the width of each image in the strip. Each one is 320 pixels wide. Thus "targetx" will equal 0,320,640,960 and 1,280. If you use those numbers, though, you will have the strip disappear to the right. They are positive numbers , meaning the direction of movement is to the right. The edge of the strip is against the left edge of the stage which is position 0 and if image number 5 is visible, the x position of the strip will be to the left at -1,280 pixels. This means the targetx values will have to be 0, -320,-640,-960 and -1,280.

7. With the Hot Spot selected, press the Alt/Option-Shift keys and drag a copy of the hot spot over each image.
8. Select the second hot spot and press the F9 key to open the Actionscript editor.
9. Change the targetx value to -320.
10. Repeat this for the remaining three buttons and change their targetx values to -640,-960 and -1,280.
11. Save and test the movie.

Image 6: The completed stage.