Flash implementation scroll bar + Web Bookmark effect

Bookmark | Web page in the common scroll bar and bookmark the effect of the Web page in Flash How to achieve it? First let's look at the effect chart:

In the image above, the right text can scroll up and down freely with the scroll bar on the right, and scroll to the specified position by clicking the Text menu on the left. Let's go step-by-step through the implementation of this method.
Statement:
1> This article mainly introduces the implementation of as script, drawing part of you can download the source files after their own research;
2> as part if there are not understand the commands, functions, you can refer to as related books or ActionScript dictionary, this article does not explain each piece of code;
3> due to my as the level of limited, there must be a lot of things to improve the place, welcome to this article published by the relevant forum/blog criticism: D

First step: elements in the scene
Because this step is mainly in the scene to add text and pictures, you can download the source file with Flash to open their own research, here is not detailed description of the elements of the painting.
>> CLICK to download fla source file
On the elements of the scene, it is clear that each movieclip (film clips, hereinafter referred to as the MC) of the name, as shown in the following figure (Note: This name, refers to the MC into the scene after the properties< properties > panel name, not in the library For the name in < >, see the section in the Red Line box in the picture:

Description
Corresponds to the layers on the timeline (timeline):
Mask layer: Only one MC, known as mask;
Scrolling layer:

known as scrolling;
TXT layer: MC name is txt. TXT, eight MC, from top to bottom respectively named Title1~title8;
Menu layer: From top to bottom respectively named Title1~title8;
Step Two: Scroll bar
Select the first frame of the as layer, press F9 to open the Actions panel and enter the following code:
Scroll bar initialization begins:
scrolling.onpress = function () {
This.gotoandstop ("Dark");//scroll bar dimmed
Lock = "no";
};
Scrolling.onrelease = function () {
This.gotoandstop ("Light");//scroll bar lightens
Lock = "yes";
};
The height of the Maskheight=177;//mask
End of scroll bar initialization
Txt.ymin = txt._y;//txt initial value in y direction (minimum)
Txt.y1 = Txt.ymin+txt._height-maskheight;//txt in y direction (maximum)

Description
Set a variable lock to record whether the mouse is pressed on the scroll bar (scrolling), when pressed, the lock value is "No" and the other is "yes";
Maskheight for the height of the text mask (mask), began to feel the use of mask._height on the line, but the test found that the Mask._height value of 210, and the properties panel to see the value of the mask is 177, do not know what is wrong- _-!

This code is just the beginning of the scroll bar and some parameters to set up and get.

Select the second frame of the as layer, press F9 to open the Actions panel and enter the following code:
scroll bar implementation
if (lock = = "No" and _xmouse> (Scrolling._x-scrolling._width) and _xmouse< (Scrolling._x+2*scrolling._width)) {
Lock is no, and the mouse position in the x direction is not too biased
Distance = _ymouse-scrolling._y;//moving distance of the mouse in the y direction, that is, the moving distance of the scroll bar in the y direction
if (Txt._y>=txt.ymin and Txt._y<=txt.y1) or (Txt._y>txt.y1 and distance>0) or (Txt._y<txt.ymin and Distan ce<0)) {
/* If the position of txt in the y direction does not exceed the specified range (ymin to y1) or
The 1.txt position in the y direction is less than ymin (over), but the mouse is moving down
The 2.txt position in the y direction is greater than Y1 (over), but the mouse is moving up
Then execute the following procedure * *
Scrolling._y + = distance;
Txt._y-= distance* ((txt._height-maskheight)/(Maskheight-scrolling._height));
}
}

Description

This code is the core part of the scroll bar effect.

To understand this code, we must first know the coordinates in Flash, as shown in the following illustration:

And we usually use the Cartesian coordinates are different, the coordinates in Flash, in the longitudinal direction (y direction) The higher the value is smaller, the higher the value of the larger.

Then, because we are dragging scrolling, to control the "scroll" of txt, so now we take a look at the scrolling and txt in the home view of the mobile range, so as to understand the scrolling movement of the value and the value of TXT moved between the control ratio, As shown in the following illustration:

From the above figure:

The moving range of the scrolling is the height of the mask minus the height of the scrolling, i.e. (maskheight-scrolling._height);
TXT's move range is the txt height minus the mask height, namely (txt._height-maskheight);
* Which, maskheight for us in the first frame has been defined also by the height of the mask
Thus, the control ratio between the scrolling move value and the TXT moved value is:-(maskheight-scrolling._height)/(Txt._height-maskheight), where there is a minus sign "-", is because when scrolling and txt move in the opposite direction. Set scrolling to move the value of distance, then the value of txt move is-distance* ((txt._height-maskheight)/(Maskheight-scrolling._height)) (as in line 3rd of the above code)

Select the third frame of the as layer, press F9 to open the Actions panel and enter the following code:
gotoAndPlay (2);

Description: Through the second and third frames of the repeated loop playback, and constantly determine whether the mouse is pressed, the mouse position, so as to achieve the effect of the scroll bar.

Step three: Bookmark effect

Select the first frame of the as layer, press F9 to open the Actions panel, and enter the following code after the original code:
//txt the title "in txt" position:
Position = new Array ();
For (I=1 i<=8; i++) {
Position[i] = eval ("Txt.title" +i). _y-eval ("Txt.title" +i). _height/2;

N = position[1]+txt.y1;//where Txt.title1 is at the top, txt.title1 location in Home view
Delete I;
Bookmark part:
for (i=1; i<=8; i++) {
TitleName = "title" +i;
Eval (titlename). onpress = function () {
This.y1 = txt._y;
num = number (substring (this._name, 6,-1));
Txt._y = n-position[num]+3;
Scrolling._y-= (txt._y-this.y1) * (maskheight-scrolling._height)/(Txt._height-maskheight);
//Scrolling position Change
This.gotoandstop (1);
};
Eval (titlename). Onrollover = function () {
This.gotoandplay (2);
};
Eval (titlename). Onrollout = function () {
This.gotoandstop (1);
};
}
Delete I;
Delete TitleName; The


Gets the location of the Title1~title8 in TXT, respectively, in TXT. The

is here to illustrate one point:

We usually get the position of the MC in the Y direction by mc._y. Wherever this code is placed, its value is the position of the MC's origin (that is, the x=0,y=0 of the MC) in the Y direction of its upper-level MC (_parent), not the position in the Home view (_root), of course, If the MC is placed directly in the home view, the position in the main scene. For example, there is a structure:

As shown in the figure above, there are mc2,mc2 in the main scene there are MC1,MC1 in the MC, if you set a variable _root.mcy to store the y-direction of the MC, whether in the home scene or in the MC2 or MC1, _ Root.mcy values are the original point of the MC in the MC1 position, if you want to obtain the MC in the MC2 position, as long as the mc1.mc._y-mc1._y on the line.

We set an array here to store the Title1~title8 "in txt" position in txt, subtracting the eval ("Txt.title" +i). _HEIGHT/2 is half the height of the title, Because what we're going to get here is the position at the top of title.

Gets the Y-direction position of TXT in the home scene when Txt.title1 is at the top of the scene.

Implement the bookmark effect.
By Txt.title1~txt.title8 the difference between the position of TXT and their position in the home scene (n) can be converted to Txt.title1~txt.title8 at the top of the scene in the Y-direction position of TXT in the home scene.
Through the scrolling and txt control ratio, in turn, using TXT move to control scrolling position change, some, the control proportion becomes (maskheight-scrolling._height)/(txt._ Height-maskheight)

　　 >> Click to download fla source file