【实现效果】
拖动右边绿色滑块,可以实现文的上下滚动。
【制作过程】
1.制作以下影片剪辑元件,并取好实例名称即mc、hk、jdt,mc即是我们要滚动的文本,所有元件注册点左上角。并把它们放于舞台之中,让它们的y值都为0,即对齐于舞台顶部,如图。
2. 新建图层2为遮罩层,在场景中画一个影片剪辑为遮罩,注意其宽度和高度,取实例名称为zezao,如下图:
3.新建图层3,在第一帧输入代码:
我们选来编写hk的代码:
hk.onPress=function(){startDrag("hk",false,jdt._x,jdt._y,jdt._x,jdt._y+jdt._height-hk._height);
};
hk.onRelease = function() {
stopDrag();
};
hk.onReleaseOutside = function() {
stopDrag();
};
然后在帧频事件中来实现滚动:
_root.onEnterFrame = function() {
wenbenchushiweizhi=0
kegundongquyu= mc._height-zezao._height;
gundongbaifenbi=hk._y/(jdt._height-hk._height);
mc._y=wenbenchushiweizhi-(kegundongquyu*gundongbaifenbi);
if (kegundongquyu<=0) {
hk._visible = false;
}
};
在上面的实现滚动代码中,它直接地运用了一个公式:文本滚动位置=文本初始位置-(可滚动区域*滚动百分比)。
文本滚动位置:也就是mc的在滚动中的y值。
文本初始位置:也就是文本mc没有被移动的最初y值,本例中最初y值为0。
可滚动动区域:也就是文本mc的初始高度-遮罩zezao的高度。
滚动百分比:也就是滑块hk的y坐标/(进度条的高-滑块的高)
因为mc文本的最初y值为0,所以公式应简写为:文本滚动位置= -(可滚动区域*滚动百分比)。
这样的话,那么帧频事件中的代码就可以这样简化:
_root.onEnterFrame = function() {
kegundongquyu= mc._height-zezao._height;
gundongbaifenbi=hk._y/(jdt._height-hk._height);
mc._y=-(kegundongquyu*gundongbaifenbi);
if (kegundongquyu<=0) {
hk._visible = false;
}
};
当然代码也可以这样写:
_root.onEnterFrame = function() {
hk.onPress = function() {
startDrag("hk",false,jdt._x,jdt._y,jdt._x,jdt._y+jdt._height-hk._height);
};
hk.onRelease = function() {
stopDrag();
};
hk.onReleaseOutside = function() {
stopDrag();
};
kegundongquyu= mc._height-zezao._height;
gundongbaifenbi=hk._y/(jdt._height-hk._height);
mc._y = -kegundongquyu*gundongbaifenbi;
if (kegundongquyu<=0) {
hk._visible = false;
}
};
在以上的两种代码编写中,你也可以加入下面一句,使得思路更为清晰。
hk.onMouseMove=function(){
_root.onEnterFrame
}
当然这句代码也可以不要,也能实现滚动的。