【实现效果】
点击上下按实现滚动,按住不放连续滚动,拖动滚动滑块上下滚动,滑动鼠标中键也可以实现滚动。
一、点击按钮滚动、拖动滑块滚动
图示:
1.制作向上按钮(xiangshanganniu)、向下按钮(xiangxiaanniu)、滑块(huakuai)、进度条(jingdutiao)、拖动文本(tuodongwenben)等影片剪辑元件(注:在影片剪辑元件编辑级别要将这些图形的x和y值均设为0)如图:
2.再新建一影片剪辑,取名为“组合”,将以上所有影片剪辑元件拖入场景中,放在第一层(同一层),并设置拖动文本和向上按钮的y值为0,摆放好它们的位置。
3.在第二层作一个影片剪辑元件,放在可视区域内(即蓝色区域),同时也让其y值为0,并将该层设为遮罩,实例名称为(zhezhao)。
4.在“组合”元件内部新建一层,写入以下代码:
(一)原代码
function gundong() {
//滚动速度
var gundongshudu = 1;
//可滚动的区域:指用遮罩遮住的区域以外的文本区域:可滚动的区域=文本的高—遮罩的高
kegundongquyu=gundongwenben._height-zhezhao._height;
//起始位置:也就是文本初始时的y轴坐标
var qishiweizhi = gundongwenben._y;
//更新滚动内容的位置
if (kegundongquyu<=0) {
huakuai._visible = false;
xiangshanganniu.enabled = false;
xiangxiaanniu.enabled = false;
}
function gundongweizhi() {
//滚动百分比=(滑块的y轴坐标—向上按钮的高)/(进度条的高—滑块的高)
gundongbaifenbi=(huakuai._y-xiangshanganniu._height)/(jingdutiao._height-huakuai._height);
//滚动位置=起始位置—(可滚动区域*滚动百分比)
gundongwenben._y=Math.round(qishiweizhi-(kegundongquyu*gundongbaifenbi));
}
//拖动滑块
huakuai.onPress = function() {
startDrag(this,false,jingdutiao._x,jingdutiao._y,jingdutiao._x,jingdutiao._y+jingdutiao._height-huakuai._height);
};
//释放鼠标停止拖动
huakuai.onRelease=huakuai.onReleaseOutside=function () {
stopDrag();
};
//滑块移动调用滚动位置:
gundongwezhi()
huakuai.onMouseMove = function() {
gundongweizhi();
};
//向上按钮
xiangshanganniu.onPress = function() {
this.onEnterFrame = function() {
huakuai._y=Math.max(jingdutiao._y,huakuai._y-gundongshudu);
gundongweizhi();
};
};
xiangshanganniu.onRelease=xiangshanganniu.onReleaseOutside=function () {
delete this.onEnterFrame;
};
//向下按钮
xiangxiaanniu.onPress = function() {
this.onEnterFrame = function() {
huakuai._y=Math.min(jingdutiao._y+jingdutiao._height-huakuai._height, huakuai._y+gundongshudu);
gundongweizhi();
};
};
xiangxiaanniu.onRelease=xiangxiaanniu.onReleaseOutside=function () {
delete this.onEnterFrame;
};
gundongweizhi();
}
//调用函数
gundong();
(二)代码修改2
由于“元件组合”影片剪辑中,滚动文本的y值为0,所以可以将代码作如下改动。
function gundong() {
//滚动速度
var gundongshudu = 1;
//可滚动的区域:指用遮罩遮住的区域以外的文本区域:可滚动的区域=文本的高—遮罩的高
kegundongquyu=gundongwenben._height-zhezhao._height;
if (kegundongquyu<=0) {
huakuai._visible = false;
xiangshanganniu.enabled = false;
xiangxiaanniu.enabled = false;
}
//更新滚动内容的位置
function gundongweizhi() {
//滚动百分比=(滑块的y轴坐标—向上按钮的高)/(进度条的高—滑块的高)
gundongbaifenbi=(huakuai._y-xiangshanganniu._height)/(jingdutiao._height-huakuai._height);
//滚动位置=—(可滚动区域*滚动百分比)
gundongwenben._y= Math.round(-(kegundongquyu*gundongbaifenbi));
}
//拖动滑块
huakuai.onPress = function() {
startDrag(this,false,jingdutiao._x,jingdutiao._y,jingdutiao._x, jingdutiao._y+jingdutiao._height-huakuai._height);
};
//释放鼠标停止拖动
huakuai.onRelease=huakuai.onReleaseOutside=function () {
stopDrag();
};
//滑块移动调用滚动位置:gundongwezhi()
huakuai.onMouseMove = function() {
gundongweizhi();
};
//向上按钮
xiangshanganniu.onPress = function() {
this.onEnterFrame = function() {
huakuai._y=Math.max(jingdutiao._y,huakuai._y-gundongshudu);
gundongweizhi();
};
};
xiangshanganniu.onRelease=xiangshanganniu.onReleaseOutside=function () {
delete this.onEnterFrame;
};
//向下按钮
xiangxiaanniu.onPress = function() {
this.onEnterFrame = function() {
huakuai._y=Math.min(jingdutiao._y+jingdutiao._height-huakuai._height, huakuai._y+gundongshudu);
gundongweizhi();
};
};
xiangxiaanniu.onRelease=xiangxiaanniu.onReleaseOutside=function () {
delete this.onEnterFrame;
};
gundongweizhi();
}
//调用函数
gundong();
(三)代码修改3
//更新滚动内容的位置
function gundongweizhi() {
if (kegundongquyu<=0) {
huakuai._visible = false;
xiangshanganniu.enabled = false;
xiangxiaanniu.enabled = false;
}
//可滚动的区域:指用遮罩遮住的区域以外的文本区域:可滚动的区域=文本的高—遮罩的高
kegundongquyu=gundongwenben._height-zhezhao._height;
//滚动百分比=(滑块的y轴坐标—向上按钮的高)/(进度条的高—滑块的高)
gundongbaifenbi=(huakuai._y-xiangshanganniu._height)/(jingdutiao._height-huakuai._height);
//滚动位置=—(可滚动区域*滚动百分比):滚动位置也即是求流动过程中滚动文本的_y轴坐标
gundongwenben._y=Math.round(-(kegundongquyu*gundongbaifenbi));
}
//滚动速度
var gundongshudu = 1;
//拖动滑块
huakuai.onPress = function() {
startDrag(this,false,jingdutiao._x,jingdutiao._y,jingdutiao._x,jingdutiao._y+jingdutiao._height-huakuai._height);
};
//释放鼠标停止拖动
huakuai.onRelease=huakuai.onReleaseOutside=function () {
stopDrag();
};
//滑块移动调用滚动位置:gundongwezhi()
huakuai.onMouseMove = function() {
gundongweizhi();
};
//向上按钮
xiangshanganniu.onPress = function() {
this.onEnterFrame = function() {
huakuai._y=Math.max(jingdutiao._y,huakuai._y-gundongshudu);
gundongweizhi();
};
};
xiangshanganniu.onRelease=xiangshanganniu.onReleaseOutside=function () {
delete this.onEnterFrame;
};
//向下按钮
xiangxiaanniu.onPress = function() {
this.onEnterFrame = function() {
huakuai._y=Math.min(jingdutiao._y+jingdutiao._height-huakuai._height, huakuai._y+gundongshudu);
gundongweizhi();
};
};
xiangxiaanniu.onRelease=xiangxiaanniu.onReleaseOutside=function () {
delete this.onEnterFrame;
};
gundongweizhi();
(四)代码修改4
//更新滚动内容的位置
_root.onEnterFrame = function() {
if (kegundongquyu<=0) {
huakuai._visible = false;
xiangshanganniu.enabled = false;
xiangxiaanniu.enabled = false;
}
//可滚动的区域:指用遮罩遮住的区域以外的文本区域:可滚动的区域=文本的高—遮罩的高
kegundongquyu=gundongwenben._height-zhezhao._height;
//滚动百分比=(滑块的y轴坐标—向上按钮的高)/(进度条的高—滑块的高)
gundongbaifenbi=(huakuai._y-xiangshanganniu._height)/(jingdutiao._height-huakuai._height);
//滚动位置=—(可滚动区域*滚动进分比):滚动位置也即是求流动过程中滚动文本的_y轴坐标
gundongwenben._y=Math.round(-(kegundongquyu*gundongbaifenbi));
};
//滚动速度
var gundongshudu = 1;
//拖动滑块
huakuai.onPress = function() {
startDrag(this,false,jingdutiao._x,jingdutiao._y,jingdutiao._x,jingdutiao._y+jingdutiao._height-huakuai._height);
};
//释放鼠标停止拖动
huakuai.onRelease=huakuai.onReleaseOutside=function () {
stopDrag();
};
//滑块移动调用滚动位置:gundongwezhi()
huakuai.onMouseMove = function() {
_root.onEnterFrame;
};
//向上按钮
xiangshanganniu.onPress = function() {
this.onEnterFrame = function() {
huakuai._y = Math.max(jingdutiao._y, huakuai._y-gundongshudu);
_root.onEnterFrame;
};
};
xiangshanganniu.onRelease=xiangshanganniu.onReleaseOutside=function () {
delete this.onEnterFrame;
};
//向下按钮
xiangxiaanniu.onPress = function() {
this.onEnterFrame = function() {
huakuai._y=Math.min(jingdutiao._y+jingdutiao._height-huakuai._height, huakuai._y+gundongshudu);
_root.onEnterFrame;
};
};
xiangxiaanniu.onRelease=xiangxiaanniu.onReleaseOutside=function () {
delete this.onEnterFrame;
};
二、加缓动效果
function gundong(huandong) {
//滚动速度
var gundongshudu = 1;
//缓动速度
var huandongshudu = 10;
//可滚动的区域:指用遮罩遮住的区域以外的文本区域:可滚动的区域=文本的高—遮罩的高
kegundongquyu=gundongwenben._height-zhezhao._height;
//起始位置:也就是文本初始时的y轴坐标
var qishiweizhi = gundongwenben._y;
if (kegundongquyu<=0) {
huakuai._visible = false;
xiangshanganniu.enabled = false;
xiangxiaanniu.enabled = false;
}
//更新滚动内容的位置
function gundongweizhi() {
//滚动百分比=(滑块的y轴坐标—向上按钮的高)/(进度条的高—滑块的高)
gundongbaifenbi=(huakuai._y-xiangshanganniu._height)/(jingdutiao._height-huakuai._height);
//滚动位置=起始位置—(可滚动区域*滚动百分比)
gundongwenben.newY=Math.round(qishiweizhi-(kegundongquyu*gundongbaifenbi));
}
//拖动滑块
huakuai.onPress = function() {
startDrag(this,false,jingdutiao._x,jingdutiao._y,jingdutiao._x,jingdutiao._y+jingdutiao._height-huakuai._height);
};
//释放鼠标停止拖动
huakuai.onRelease=huakuai.onReleaseOutside=function () {
stopDrag();
};
//滑块移动调用滚动位置:gundongwezhi()
huakuai.onMouseMove = function() {
gundongweizhi();
};
//向上按钮
xiangshanganniu.onPress = function() {
this.onEnterFrame = function() {
huakuai._y=Math.max(jingdutiao._y,huakuai._y-gundongshudu);
gundongweizhi();
};
};
xiangshanganniu.onRelease=xiangshanganniu.onReleaseOutside=function () {
delete this.onEnterFrame;
};
//向下按钮
xiangxiaanniu.onPress = function() {
this.onEnterFrame = function() {
huakuai._y=Math.min(jingdutiao._y+jingdutiao._height-huakuai._height, huakuai._y+gundongshudu);
gundongweizhi();
};
};
xiangxiaanniu.onRelease=xiangxiaanniu.onReleaseOutside=function () {
delete this.onEnterFrame;
};
//缓去路代码:
gundongwenben.onEnterFrame = function() {
if (!huandong || huandong == undefined) {
this._y = this.newY;
} else {
this._y+=(this.newY-this._y)/huandongshudu;
}
};
gundongweizhi();
}
//调用函数
gundong(true);
三、加入鼠标中键滚动
function gundong(huandong, shubiaozhongjian) {
//滚动速度
var gundongshudu = 1;
//缓动速度
var huandongshudu = 10;
//可滚动的区域:指用遮罩遮住的区域以外的文本区域:可滚动的区域=文本的高—遮罩的高
kegundongquyu=gundongwenben._height-zhezhao._height;
//起始位置:也就是文本初始时的y轴坐标
var qishiweizhi = gundongwenben._y;
if (kegundongquyu<=0) {
huakuai._visible = false;
xiangshanganniu.enabled = false;
xiangxiaanniu.enabled = false;
}
//更新滚动内容的位置
function gundongweizhi() {
//滚动百分比=(滑块的y轴坐标—向上按钮的高)/(进度条的高—滑块的高)
gundongbaifenbi=(huakuai._y-xiangshanganniu._height)/(jingdutiao._height-huakuai._height);
//滚动位置=起始位置—(可滚动区域*滚动百分比)
gundongwenben.newY=Math.round(qishiweizhi-(kegundongquyu*gundongbaifenbi));
}
//拖动滑块
huakuai.onPress = function() {
startDrag(this,false, jingdutiao._x, jingdutiao._y, jingdutiao._x, jingdutiao._y+jingdutiao._height-huakuai._height);
};
//释放鼠标停止拖动
huakuai.onRelease=huakuai.onReleaseOutside=function () {
stopDrag();
};
//滑块移动调用滚动位置:gundongwezhi()
huakuai.onMouseMove = function() {
gundongweizhi();
};
//向上按钮
xiangshanganniu.onPress = function() {
this.onEnterFrame = function() {
huakuai._y=Math.max(jingdutiao._y,huakuai._y-gundongshudu);
gundongweizhi();
};
};
xiangshanganniu.onRelease=xiangshanganniu.onReleaseOutside=function () {
delete this.onEnterFrame;
};
//向下按钮
xiangxiaanniu.onPress = function() {
this.onEnterFrame = function() {
huakuai._y=Math.min(jingdutiao._y+jingdutiao._height-huakuai._height, huakuai._y+gundongshudu);
gundongweizhi();
};
};
xiangxiaanniu.onRelease=xiangxiaanniu.onReleaseOutside=function () {
delete this.onEnterFrame;
};
gundongwenben.onEnterFrame = function() {
if (!huandong || huandong == undefined) {
this._y = this.newY;
} else {
this._y+=(this.newY-this._y)/huandongshudu;
}
};
//鼠标中键
if (shubiaozhongjian== true) {
var mouseListener = new Object();
mouseListener.onMouseWheel=function(delta) {
if(huakuai._y<jingdutiao._y+jingdutiao._height-huakuai._height) {
huakuai._y += delta;
gundongweizhi();
} else {
huakuai._y=jingdutiao._y+jingdutiao._height-huakuai._height;
}
if (huakuai._y>jingdutiao._y) {
huakuai._y += delta;
gundongweizhi();
} else {
huakuai._y=jingdutiao._y;
}
};
Mouse.addListener(mouseListener);
}
}
//调用函数
gundong(true, true);