注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

热血易冷

宝剑锋从磨砺出,梅花香自苦寒来。

 
 
 

日志

 
 

flash AS3 元件滚动条(也可用作文本滚动条)  

2011-03-09 11:11:21|  分类: flash ActionScri |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
对于AS3制作的拖动条,网络上大部分都是对文本的滚动条控制,很难找到对影片剪辑元件的滚动条控制,以下是我自己根据对文本控制的代码所修改的,并带有拖动时的缓动效果。
若您对本代码做出了修改或进行了完善请您E-mail通知我,以便能让我们互相借鉴学习,谢谢!


首先是包类文件以下代码存入myScrollBar.as:


/*
================================================================================

《元件滚动条》

更改了对文本滚动控制改为对元件的控制,并增加缓动效果。
代码借鉴了:火山动态文本滚动条 V5 ,特此注明!
------------------------------------------------------------
Copyright (c) 2011 [无空]

My web:
  闪耀空间
  http://www.flashme.cn/
E-mail:
  flashme@live.cn
                                                  2011-3-4
================================================================================
*/
package {
import flash.events.MouseEvent;
import flash.events.Event;
import flash.display.SimpleButton;
import flash.text.TextField;
import flash.display.Sprite;
//import flash.display.MovieClip;
import flash.utils.getTimer;
import flash.geom.Rectangle;


public class myScrollBar extends Sprite {

//=============本类属性==============
////接口元件
private var scrollCon:Sprite;
private var scrollBar_sprite:Sprite;
private var up_btn:SimpleButton;
private var down_btn:SimpleButton;
private var pole_sprite:Sprite;
private var bg_sprite:Sprite;
////初始数据
private var poleStartHeight:Number;
private var poleStartY:Number;
private var totalPixels:Number;
private var areaY:int;
private var areaBg:uint;
private var easingSpeed:uint=7;
////上下滚动按钮按钮下时间
private var putTime:Number;

/**
* @param scrollCon_fc:被滚动的元件
* @param scrollBarMc_fc:舞台上与本类所代理的滚动条元件
* @param height_fc:滚动条高
* @param width_fc:滚动条宽
*/
public function myScrollBar(scrollCon_fc:Sprite, scrollBarMc_fc:Sprite, area_fc:uint=0, height_fc:uint=0, width_fc:uint=0) {
//——————滚动条_sprite,滚动条按钮和滑块mc,被滚动的文本域初始化
scrollCon=scrollCon_fc;
scrollBar_sprite=scrollBarMc_fc;
up_btn=SimpleButton(scrollBar_sprite.getChildByName("up_btn"));
down_btn=SimpleButton(scrollBar_sprite.getChildByName("down_btn"));
pole_sprite=Sprite(scrollBar_sprite.getChildByName("pole_mc"));
bg_sprite=Sprite(scrollBar_sprite.getChildByName("bg_mc"));

//——————可用性控制
pole_sprite.visible=false;
up_btn.enabled=false;
down_btn.enabled=false;

//——————其他属性初始化
areaY = scrollCon.y;
if(area_fc==0){
//未接收到高度定义时默认让其上下距离相等
area_fc=scrollCon.parent.stage.stageHeight-areaY*2;
}
areaBg = area_fc;
bg_sprite.useHandCursor=false;
//遮罩
var maskSprite:Sprite=new Sprite();
maskSprite.graphics.beginFill(0xff0000);
maskSprite.graphics.drawRect(scrollCon.x,areaY,scrollCon.width,areaBg);
maskSprite.graphics.endFill();
//遮罩无需放入显示列表
//***若需要控制遮罩位置等相关属性可将下面注释取消***
//maskSprite.name="maskSprite";
//scrollCon.parent.addChild(maskSprite);
scrollCon.mask=maskSprite;
if (height_fc==0) {
bg_sprite.height=areaBg;
} else {
bg_sprite.height=height_fc;
}
if (width_fc!=0) {
bg_sprite.width=width_fc+2;
pole_sprite.width=width_fc;
up_btn.width=up_btn.height=down_btn.width=down_btn.height=width_fc;
}
down_btn.y=bg_sprite.y+bg_sprite.height-down_btn.height;
poleStartHeight=Math.floor(down_btn.y-up_btn.y-up_btn.height);
poleStartY=pole_sprite.y=Math.floor(up_btn.y+up_btn.height);

//——————注册侦听器
//用鼠标接触元件的方式来更新高度数据,用这种方式侦听或许不太好,但没找到更好办法。
scrollCon.addEventListener(MouseEvent.MOUSE_OVER, renew);
scrollBar_sprite.addEventListener(MouseEvent.MOUSE_OVER, renew);
//初始运行scrollBar_sprite侦听
scrollBar_sprite.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER));
//鼠标滚轮
scrollCon.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheel);
//上滚动按钮
up_btn.addEventListener(MouseEvent.MOUSE_DOWN, upBtn);
up_btn.stage.addEventListener(MouseEvent.MOUSE_UP, upBtnUp);
//下滚动按钮
down_btn.addEventListener(MouseEvent.MOUSE_DOWN, downBtn);
down_btn.stage.addEventListener(MouseEvent.MOUSE_UP, downBtnUp);
//滑块
pole_sprite.addEventListener(MouseEvent.MOUSE_DOWN, poleSprite);
pole_sprite.stage.addEventListener(MouseEvent.MOUSE_UP, poleUp);
//滑块背景点击
bg_sprite.addEventListener(MouseEvent.MOUSE_DOWN, bgDown);

}
private function renew(event : MouseEvent):void {
//判断滑块儿是否显示,并根据元件高度定义滑块高度
if (scrollCon.height>areaBg) {
pole_sprite.visible=true;
up_btn.enabled=true;
down_btn.enabled=true;
//定义一个高度因子
var heightVar:Number=areaBg/scrollCon.height;
//根据高度因子初始化滑块的高度
pole_sprite.height=Math.floor(poleStartHeight*Math.pow(heightVar,1/3));
//拖动条可响应的范围
totalPixels=Math.floor(down_btn.y-up_btn.y-up_btn.height-pole_sprite.height);
pole_sprite.y=PoleNewY(scrollCon.y);

} else {
pole_sprite.visible=false;
up_btn.enabled=false;
down_btn.enabled=false;
}
}

/**
* 计算公式
*/
//以拖动条的位置计算来MC的位置,返回int值
private function ConNewY(nowPosition:int):int {
return -(scrollCon.height-areaBg)*(nowPosition-poleStartY)/totalPixels +areaY;
}
//以MC的位置来计算拖动条的位置,返回int值
private function PoleNewY(nowPosition:int):int {
return totalPixels*(areaY-nowPosition)/(scrollCon.height-areaBg) +poleStartY;
}


/**
* 滑块滚动
*/
private function poleSprite(event : MouseEvent):void {
//监听舞台,这样可以保证拖动滑竿的时候,鼠标在舞台的任意位置松手,都会停止拖动
scrollBar_sprite.stage.addEventListener(MouseEvent.MOUSE_UP, poleUp);
//限定拖动范围
var dragRect:Rectangle=new Rectangle(pole_sprite.x,poleStartY,0,totalPixels);
pole_sprite.startDrag(false, dragRect);
scrollBar_sprite.addEventListener(Event.ENTER_FRAME, poleDown);
}

private function poleDown(event : Event):void {
//在滚动过程中及时获得滑块所处位置
var nowPosition:int=pole_sprite.y;
//新位置
var newY:int=ConNewY(nowPosition);
//缓动效果,scrollCon.y的位置: scrollCon.y += ((计算出的新位置)-scrollCon.y)/缓动值
scrollCon.y += (newY - scrollCon.y)/easingSpeed;

}

private function poleUp(event : MouseEvent):void {
var nowPosition:int=pole_sprite.y;
//弹起在次计算的原因是当鼠标弹起时移除了poleDown函数里的缓动效果,导致scrollCon没有到达计算位置。
scrollCon.y=ConNewY(nowPosition);

pole_sprite.stopDrag();
scrollBar_sprite.removeEventListener(Event.ENTER_FRAME, poleDown);
scrollBar_sprite.stage.removeEventListener(MouseEvent.MOUSE_UP, poleUp);
//scrollCon.addEventListener(Event.SCROLL, textScroll);
}

/**
* 滑块背景点击
*/
private function bgDown(event : MouseEvent):void {
var nowPosition:int;
if ((scrollBar_sprite.mouseY-up_btn.y-up_btn.height) < (pole_sprite.height / 2)) {
nowPosition=Math.floor(up_btn.y+up_btn.height);
} else if ((down_btn.y - scrollBar_sprite.mouseY) < pole_sprite.height / 2) {
nowPosition=Math.floor(down_btn.y-pole_sprite.height);
} else {
nowPosition=scrollBar_sprite.mouseY-pole_sprite.height/2;
}
pole_sprite.y=nowPosition;
scrollCon.y=ConNewY(nowPosition);

}

/**
* 下滚动按钮
*/
private function downBtn(event : MouseEvent):void {
if (scrollCon.y>(areaY+areaBg-scrollCon.height)) {
scrollCon.y-=10;
var nowPosition:int=scrollCon.y;
pole_sprite.y=PoleNewY(nowPosition);
}
//当鼠标在按钮上按下的时间大于设定时间时,连续滚动
putTime=getTimer();
scrollBar_sprite.addEventListener(Event.ENTER_FRAME, downBtnDown);
}

private function downBtnDown(event : Event):void {
if (getTimer()-putTime>500) {
if (scrollCon.y>(areaY+areaBg-scrollCon.height)) {
scrollCon.y-=1;
var nowPosition:int=scrollCon.y;
pole_sprite.y=PoleNewY(nowPosition);
}
}
}

private function downBtnUp(event : MouseEvent):void {
scrollBar_sprite.removeEventListener(Event.ENTER_FRAME, downBtnDown);
}

/**
* 上滚动按钮
*/
private function upBtn(event : MouseEvent):void {
if (scrollCon.y<areaY) {
scrollCon.y+=10;
var nowPosition:int=scrollCon.y;
pole_sprite.y=PoleNewY(nowPosition);
}
//当鼠标在按钮上按下的时间大于设定时间时,连续滚动
putTime=getTimer();
scrollBar_sprite.addEventListener(Event.ENTER_FRAME, upBtnDown);
}

private function upBtnDown(event : Event):void {
if (getTimer()-putTime>500) {
if (scrollCon.y<areaY) {
scrollCon.y+=1;
var nowPosition:int=scrollCon.y;
pole_sprite.y=PoleNewY(nowPosition);
}
}
}

private function upBtnUp(event : MouseEvent):void {
scrollBar_sprite.removeEventListener(Event.ENTER_FRAME, upBtnDown);
}

/**
* 鼠标滚轮事件
*/
private function mouseWheel(event : MouseEvent):void {

var nowPosition:int;
if (event.delta<0) {
if (scrollCon.y>(areaY+areaBg-scrollCon.height)) {
scrollCon.y+=Math.floor(event.delta*3);
nowPosition=scrollCon.y;
pole_sprite.y=PoleNewY(nowPosition);
}
} else if (event.delta>0) {
if (scrollCon.y<areaY) {
scrollCon.y+=Math.floor(event.delta*3);
nowPosition=scrollCon.y;
pole_sprite.y=PoleNewY(nowPosition);
}
}

}
}
}


下面是调用代码:

//由于遮罩为代码绘制矩形,遮罩位置固定且不会跟随窗口变化大小,只能以左对齐和固定尺寸来解决。
this.stage.align=StageAlign.TOP_LEFT;
this.stage.scaleMode=StageScaleMode.NO_SCALE;

scrollBarCon.scrollBarTest_txt.htmlText = "<font color='#FF0000' size='18'>开始→</font><br/>你好<br/><font color='#FF0000'>_txt完!</font>";
//若影片剪辑里有动态文本,以下是为了其自适应文字的高度:
var TextH:uint=scrollBarCon.scrollBarTest_txt.textHeight;
var TextL:uint=scrollBarCon.scrollBarTest_txt.numLines;
//文本高度在加上一行高度的2倍
TextH += TextH/TextL*2;
scrollBarCon.scrollBarTest_txt.height = TextH;

//以下是所需重要部分:
//执行程序(由于myScrollBar.as在同一目录,省去import):
new myScrollBar(scrollBarCon, scrollBar_mc);
//(控制对象, 滚动条, 显示高度区域, 滚动条高度, 滚动条宽度)
//new myScrollBar(scrollBarCon, scrollBar_mc, 150, 200, 10);

//-------------------------
//对名为maskSprite的遮罩层进行属性控制(需要将myScrollBar.as里遮罩注释行取消注释)
//也可将所控制的元件与遮罩层放在同一容器而达到同时控制位置属性来省去麻烦。
//getChildByName("maskSprite").y=80;
//getChildByName("maskSprite").width=100;


源文件下载:
参考了动态文本滚动条模型V5:
http://cid-4b559c56aa080931.office.live.com/self.aspx/flash/%e6%bb%9a%e5%8a%a8%e6%9d%a1%e6%8e%a7%e5%88%b6/AS3%e6%95%99%e7%a8%8b%20%e5%8a%a8%e6%80%81%e6%96%87%e6%9c%ac%e6%bb%9a%e5%8a%a8%e6%9d%a1.zip


------
  评论这张
 
阅读(1011)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017