Tài liệu Building Continuous-Feedback Buttons pptx

< Day Day Up >

Building Continuous-Feedback Buttons
It's sometimes useful to have actions executed continually while a button is being clicked.
A button set up to enable continuous execution is known as a continuous-feedback
button—and a scroll button (the focus of this exercise) is a perfect example.
If you wanted to scroll through a list of information in a window, you would quickly
become frustrated if you had to click a button every time you wanted to make the
information scroll up or down. Far less frustrating is a button that needs to be clicked just
once to scroll continuously until the button is released. In Flash, you can create this type
of functionality by using the onEnterFrame clip event with a button, as we'll soon
demonstrate.
In this exercise, you'll add scrolling buttons to the list you built in the previous exercises.
1. Open scrollingList2.fla.
In this exercise, you'll add ActionScript to Frame 1 of the Actions layer in the
main timeline, to the scroll buttons themselves, and to the clips that contain the
scroll buttons. You'll build the function that performs the actual scrolling; then
you'll add the commands to the required areas so that the function is called.
Remember that there's a movie clip instance called list_mc inside the display_mc
clip. All the attached infoBar movie clip instances that we create will exist inside
the list_mc instance. We'll set up our scrolling function to move the list_mc movie
clip instance up and down to achieve the effect of scrolling through the list of
items.
NOTE
When we use the term scrolling in this exercise, we're talking about increasing or
decreasing the _y property value of the list_mc movie clip instance to move it up
or down onscreen.
2. With the Actions panel open, select Frame 1 of the Actions layer and then add the
following line of script just below the line that creates the list array:

3.
4. var startingY:Number = display_mc.list_mc._y;
5.

With scrolling, you must establish maximum and minimum vertical locations (y)
to which the list can scroll: these represent the boundaries for scrolling (or
continued vertical movement). In any application where scrolling is allowed,
you're prevented from scrolling beyond the top or bottom borders of the document.
The preceding line of script is used to establish the edge of one of these vertical
boundaries: the movie clip instance list_mc, which will contain the list of attached
instances, should not continue scrolling if its y position exceeds the starting y
position. In a moment, we'll use the value of the startingY variable to control
scrolling.

3. To set part of the other scrolling boundary, add the following line to Frame 1, just
below the line of script you added in Step 2:
4.
5. var bottom:Number = 120;
6.

As mentioned in Step 2, the highest possible y value that the list_mc movie clip
instance can scroll to is its starting position. The bottom variable defined in this
step will be used as an offset to the upward extreme of scrolling so that the bottom
of the list doesn't go all the way to the top of the window. The reasons for using
this variable will become more obvious in coming steps.
4. Define the following variable just after the line of script added in Step 3:
5.
6. var direction:String;
7.

The function that handles scrolling, which you'll start setting up in the next step,
will scroll the list either up or down based on the value of the direction variable.
This variable will be set from one of two separate button events that will be
created later in this exercise.
5. Start defining the function that will be used to scroll the movie clip instance. To do
this, add the following ActionScript to Frame 1, just below the buildList() function
definition:
6.
7. function scroll () {
8.
9. var speed:Number = 10;
10.
11. }
12.

Soon, we'll set up our project to call this function via an onEnterFrame clip event
on the main timeline if one of two scrolling buttons is being clicked. One of the
scroll buttons will be used to scroll up; the other will be used to scroll down.
The variable speed is just that—the scrolling speed. When the scroll button is held
down, the list_mc instance will scroll up or down by the value of speed in every
frame.
NOTE
There's nothing magic about the number 10; you can adjust it to anything that
looks good.
6. Add the following if/else if statement inside the function definition, just below var
speed:Number = 10;:
7.
8. if (direction == "up") {
9.

10. }else if (direction == "down") {
11.
12. }
13.

The direction variable is used to store a string value of "up" or "down". The
conditional statement in this step determines how the scroll() function works,
based on that value. Over the next few steps, you'll be adding actions to this
conditional statement so that if the intended scrolling direction is up, a certain list
of actions will be performed; if the scrolling direction is down, another set of
actions will be performed.
7. Nest the following if/else statement in the "up" leg of the if/else if statement you
just entered in Step 6:
8.
9. if (display_mc.list_mc._y - speed + display_mc.list_mc._height > (startingY +
bottom)) {
10.
11. display_mc.list_mc._y -= speed;
12.
13. } else {
14.
15. display_mc.list_mc._y = (startingY + bottom) - display_mc.list_mc._height;
16.
17. }
18.

Because this statement is nested within the "up" leg of the previous statement, it's
evaluated if the value of direction is up.
The first part of the expression in the statement is used to determine what the
bottom position of the list_mc instance would be if it were to move 10 pixels

upward. The expression does this by looking at the list_mc instance's current y
position and then subtracting the value of speed and adding the height of the
instance. That bottom position of the instance is then compared against one of the
scrolling boundaries, as established by adding the value of bottom to the value of
startingY. If moving the list_mc instance up doesn't cause the bottom of the
instance to exceed the boundary, the first action in the statement is executed and
the list is moved up. If moving the instance up would make it exceed the
boundary, however, the else part of the statement would be executed, simply
snapping its vertical position to the maximum allowable.

If you're confused, don't worry: Let's look at an example to see how this technique