flash滚动条制作

来源:互联网 发布:cinema 4d mac 编辑:程序博客网 时间:2024/04/29 06:45

前言:自己刚开始学flash的时候,看了好多滚动条教程都云里雾里,特别是var了无数个变量后,还传递来传递去的,最后都不知道在算什么了。而用组件即浪费又不利于修改外观。其实对于新手,需要由简入深来理解,开始先不要追求功能,先实现最基本的拖动就可以了,于是早起写了一篇教程,一条核心代码就实现功能。般门弄斧高手不要笑话。

首先看这张图,那么多线条,其实就黄色框内的是有用的控制部分。

 

遮照不用说了,就是放个东西在你要显示的范围内,把图片放到被遮照的位置。

pane其实也是没用的,让别人知道个拖动范围而已。

接着,为舞台上的实例命名

图命名为:move_pic

拖动条命名为:move_bar

新手不要忽略了这步哦,本人以前总是忘记命名,每次都是代码写完了却找不出错误,最后才发现原来还没命名。命名规则也很重要,有时候随便命个pic啊什么的,实例多了容易出错,而且习惯之后就难改过来了。

到这里工作就完成80%了,是不是很简单呢。

接下来,开始在最上面那个帧里写滚动条的代码,先看我初步写的:

move_bar.onMouseDown = function() {
move_bar.startDrag(0, 214, 0, 214, 112);
};
move_bar.onMouseUp = function() {
move_bar.stopDrag();
};
this.onEnterFrame = function() {
};

这里写成函数的形式,其实可以这样理解:

move_bar.鼠标一旦按下= 功能() {
move_bar.startDrag(0, 214, 0, 214, 112);
};

startDrag内的参数:0代表不锁定在拖动块的正中间,一般我们做拖动的时候都是不锁定的,可以让用户拉着对象的任意部分拖动。后面四个数字是划块的拖动范围。

初学的时候往往会不知道函数怎么用,参数怎么写,这时候最好的方法不是问,是选中这个函数,然后按F1,帮助里什么都有。

 

你看是不是很详细呢,还有相关函数的用法和例子。

同理:

move_bar.一旦鼠标离开 = function() {
move_bar.stopDrag();
};

这里要说明的是,不知道从flash几开始,mc可以实现按钮的所有功能了,onPress等语句同样可以用在mc上,所以,这里你也可以写成onPress,onRelease,效果是一样的。

最后还有10%没完成:


this.onEnterFrame = function() {
};

我们先不用在函数内部写东西,我们先来理解一下什么是onEnterFrame,这个东西是指一旦进入这帧以后会发生什么事情。重要的它是循环执行的,你想他停都不是那么容易的。当我们要让某些函数往复运行的时候,就用到他。

这里我们要不断判断划块的位置(move_bar._y)来确定图片的位置(move_pic._y ),那么代码肯定就是:move_pic._y = (什么什么什么)move_bar._y

那么只要上过初中的朋友都不会对这个问题陌生,我们知道了图片和划块的两个边缘状态(图片到底,划块到底;图片到头,划块到头)图示如下:


于是,解一个二元一次方程就能确定系数了,在这个实例中:

 

 

move_pic._y = -move_bar._y*67/28+0;把他写到那个循环函数里,就是:
this.onEnterFrame = function() {
move_pic._y = -move_bar._y*67/28;
};

 

之后,你就可以在这个基础上添加各种效果,包括缓冲啊,按钮啊,等等的。熟练以后,还可以试着编写那些直接通过运算确定各个坐标的复杂滚动条。不知道大家是否觉得有收获,欢迎讨论。


2

這裡提供了進一步的滾動條教程給大家參考...滾動條其實不難做, 主要方法如下: 演示例子:

1. 建立一個動態文本(myText), 再來建立一個滾動條(scrollBar), 如圖:
2. 在幀上的控制代碼為 :

scrollBar.initial = function() { //定義滾動條的最高和最低位置
this.min = myText._y;
this.max = this._y+(myText._height-this._height);
inc = int(Math.abs(this.max-this.min)/myText.maxscroll);
};
scrollBar.onPress = function() { //當滾動條被點下的時候
this.startDrag(false, this._x, this.min, this._x, this.max); //根據上方定義的變量賦予滾動條的拖拉範圍
this.onEnterFrame = function() { //拖拉時循環決定文本的滾動
myText.scroll = int(scrollBar._y/inc);
};
};
scrollBar.onRelease = function() { //滾動條放開的時候
this.stopDrag(); //停止拖拉
delete this.onEnterFrame; //刪除循環以釋放資源的占用
};
scrollBar.initial();
//開始定義 就這樣而已... 很簡單吧... 如果有興趣的朋友可以進一步的增加功能

Flash制作带缓冲的滚动条

普通的滚动条在内容移动的时候看上去很生硬,怎么让它看上去舒服一点呢?加上缓冲!这样看上去会非常流畅舒服。

  总共只有两个元件和一个动态文本框(为了能使用遮罩把字体都嵌入了):
  1,滑块,实例名move_bar;
  2,一个遮罩元件,用来控制显示内容区域的大小,实例名mask;
  3,动态文本实例名为txt。
  下面是代码,写在桢上就行了。

//首先定义滑块的移动范围  
barUp = 67;  
barDown = 204;  
barPos = 446;  
//然后是缓冲的程度,速度值越大缓冲越明显  
speed = 6;  
//然后这个是计算比例,也就是滑槽和内容的可移动长度之比  
prop = (txt._height-mask._height)/(barDown-barUp);  
//记录下内容的最初位置  
txtOrigin = txt._y;  
//在滑块上按下的时候开始拖动,down用来判断是否处在拖动中  
move_bar.onPress = function() {  
move_bar.startDrag(0, barPos, barUp, barPos, barDown);  
down = 1;  
};  
//鼠标松开的时候停止拖动,down变为0  
move_bar.onMouseUp = function() {  
move_bar.stopDrag();  
down = 0;  
};  
//这个是关键,enterFrame加上if(down),也就是在拖动的时候不停地执行if里面的程序  
this.onEnterFrame = function() {  
if (down) {  
   //将此时滑块的y值减去滑块上限,计算出滑块向下移动的距离,乘以之前算出的比例,就得到了文本内容应该向上移动的距离  
   txtMove = (move_bar._y-barUp)*prop;  
//原来的位置减去距离,得到文本内容现在应该在的位置,也就是目标位置  
   txt.m_y = txtOrigin-txtMove;  
}  
//文本内容y值的每一次变化量=(目标位置-当前位置)除以缓冲速度。注意这一句不能放在if循环里面,否则鼠标一松开缓冲就停止了  
txt._y += (txt.m_y-txt._y)/speed;  
};

  OK, 测试一下,别忘记把桢数设高一点(我用的是48),这样看上去效果流畅。代码考虑了易用性,使用在其他地方的时候,只需要改一下滑块的范围,设好各个元件的实例名就可以了。

原创粉丝点击