学院首页>图形图像>FLASH>FLASH实现滚动条+网页书签效果

FLASH实现滚动条+网页书签效果

作者: 来源: 添加时间:2006-5-23 7:19:36
然后,因为我们是通过拖动scrolling,来控制txt的上下“滚动”的,所以现在我们来了解一下scrolling和txt在主场景中的移动范围,从而了解scrolling移动的值与txt移动的值之间的控制比例,如下图所示:

从上图可知:
scrolling的移动范围为mask的高度减去scrolling的高度,即(maskheight-scrolling._height);
txt的移动范围为txt的高度减去mask的高度,即(txt._height-maskheight);
*其中,maskheight为我们在第一帧已经定义也的mask的高度
从而,scrolling移动的值与txt移动的值之间的控制比例为:-(maskheight-scrolling._height)/(txt._height-maskheight),这里之所以有一个负号"-",是因为当scrolling与txt的移动方向是相反的。设scrolling移动的值为distance,则有txt移动的值为-distance*((txt._height-maskheight)/(maskheight-scrolling._height))(如上面代码的倒数第3行)

选中as层的第三帧,按F9打开Actions面板,输入如下代码:
gotoAndPlay(2);

说 明:通过第二帧和第三帧的反复循环播放,不断判断鼠标是否按下、鼠标的位置,从而实现滚动条的效果。

第三步:书签效果
选中as层的第一帧,按F9打开Actions面板,在原来的代码的后面输入如下代码:
//txt下的各title"在txt中"的位置:
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;//当txt.title1位于最上方时,txt.title1"在主场景中"的位置
delete i;
//书签部分:
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));
//滚动位置的变化
this.gotoAndStop(1);
};
eval(titlename).onRollOver = function() {
this.gotoAndPlay(2);
};
eval(titlename).onRollOut = function() {
this.gotoAndStop(1);
};
}
delete i;
delete titlename;


分别获取txt中的title1~title8“在txt中的”位置。

在这里要说明一点:
我们平时通过mc._y来获取的mc在y方向的位置,不论这段代码放在哪里,其值都是该mc的原点(即mc的x=0,y=0处)在其上一级mc中(_parent)y方向的位置,而不是在主场景(_root)中的位置,当然,如果mc直接放在主场景中则为主场景中的位置。例如有这样一种结构:

如上图所示,主场景中有mc2,mc2中有mc1,mc1中有mc,如果设一变量_root.mcy来存放mc的y方向位置,无论是在主场景中还是在mc2或mc1中,_root.mcy的值都是mc的原点在mc1中的位置,如果要获得mc在mc2中的位置,只要换成mc1.mc._y-mc1._y就行了。

我们这里设一个数组来存放txt中的title1~title8“在txt中的”位置,之所以要减去eval("txt.title"+i)._height/2即该title的高度的一半,是因为我们这里要得到的是title的顶部的位置。

获取当txt.title1在场景的最上方时,txt在主场景中的y方向位置n。

实现书签效果。
通过txt.title1~txt.title8在txt的位置之间的差值和它们与txt.title1在主场景中的位置(n)可以分别换算出txt.title1~txt.title8在场景的最上方时txt在主场景中的y方向位置。
通过scrolling与txt的控制比例,反过来用txt的移动来控制scrolling位置变动,些时,控制比例变为(maskheight-scrolling._height)/(txt._height-maskheight)

第 2 页,共 2 页 [1] [2]
站内搜索