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

2016-01-29 12:53 59 1 收藏

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

【 tulaoshi.com - Flash 】

第一步:场景中的元素
因为这一步主要是在场景中加入文字和图片,大家可以下载源文件后用FLASH打开自己研究,这里就不详细介绍各元素的画法了。
点击下载FLA源文件
关于场景中的元素,这里要说清楚的是各个MovieClip(影片剪辑,以下简称mc)的命名,如下图所示(注:这里说的命名,是指把mc放到场景中后在Properties<属性面板中的命名,而不是在Library<库中的命名,见图中红色线条框出的部分):


说 明:
对应于Timeline(时间线)上的各层:
mask层:只有一个mc,名为mask;
scrolling层:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)


名为scrolling;
txt层:mc名为txt。txt内,八个mc,从上至下分别命名为title1~title8;
menu层:从上至下分别命名为title1~title8;
第二步:滚动条
选中as层的第一帧,按F9打开Actions面板,输入如下代码:
//滚动条初始化开始:
scrolling.onPress = function() {
this.gotoAndStop("dark");//滚动条变暗
lock = "no";
};
scrolling.onRelease = function() {
this.gotoAndStop("light");//滚动条变亮
lock = "yes";
};
maskheight=177;//mask的高度
//滚动条初始化结束
txt.ymin = txt._y;//txt在y方向的初始值(最小值)
txt.y1 = txt.ymin+txt._height-maskheight;//txt在y方向最多可以到达的地方(最大值)

说 明:
设一变量lock,记录鼠标是否在滚动条(scrolling)上按下,按下时,lock值为"no",反之则为"yes";
maskheight为文字蒙板(mask)的高度,开始觉得用mask._height就行了,但测试时发现mask._height值为210,而在Properties面板上看到的mask的值却是177,不知道是出了什么错-_-!

这段代码只是对滚动条的初化以及一些参数的设置和获取。

选中as层的第二帧,按F9打开Actions面板,输入如下代码:
//滚动条实现
if (lock == "no" and _xmouse(scrolling._x-scrolling._width) and _xmouse<(scrolling._x+2*scrolling._width)) {
//lock为no,并且鼠标在x方向的位置不至于太偏
distance = _ymouse-scrolling._y;//鼠标在y方向的移动距离,即滚动条在y方向的移动距离
if ((txt._y=txt.ymin and txt._y<=txt.y1) or (txt._ytxt.y1 and distance0) or (txt._y<txt.ymin and distance<0)) {
/*如果txt在y方向的位置没超过指定范围(ymin to y1)或者
1.txt在y方向的位置小于ymin(过上),但鼠标是向下移动
2.txt在y方向的位置大于y1(过下),但鼠标是向上移动
则执行下面的程序*/
scrolling._y += distance;
txt._y -= distance*((txt._height-maskheight)/(maskheight-scrolling._height));
}
}

说 明:
这段代码是滚动条效果的核心部分。

要理解这段代码,我们必须先清楚FLASH内的座标,如下图所示:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)


与我们平时用的迪卡尔坐标不同的是,FLASH内的座标,在纵方向(y方向)越向上值越小,越向上值越大。

 

本新闻共2页,当前在第1页  1  2  

来源:http://www.tulaoshi.com/n/20160129/1487929.html

延伸阅读
标签: Web开发
    在浏览网页的时候我们有时可以看到有的网页滚动条颜色不是系统默认的,而是漂亮的红色或其它颜色,其实这就是在网页代码之间加入代码来实现的,具体是哪些代码呢?      网页滚动条代码及其解释如下:(复制时请将大写尖括号改为小写) 以下是引用片段: <Style type="text/css">  <!--...
标签: Web开发
今天遇到了一个纵向滚动条 ,本来打算用框架做,经过看到别人做的页面中,才知道可以用CSS 控制,以下CSS代码贡献给大伙学习。 overflow-y:scroll 上下滚 overflow-x:scroll 左右滚
标签: Web开发
一外国佬写的。 有几种样式,点击那些example1234.html就能看见了。 可以研究一下下 http://www.n-son.com/scripts/jsScrolling/
标签: Web开发
在浏览网页的时候我们有时可以看到有的网页滚动条颜色不是系统默认的,而是漂亮的红色或其它颜色,其实这就是在网页代码之间加入代码来实现的,具体是哪些代码呢? 网页滚动条代码及其解释如下:(复制时请将大写尖括号改为小写) <Style type="text/css"> <!-- Body { scrollbar-face-color:#C0C0C0; (...
标签: Web开发
记录滚动条位置 dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd...

经验教程

532

收藏

90
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部