使用actionscript3.0构建一个异步加载图片的画廊（二）

发布于，归属于actionscript3。 前10个座位已被强势霸占！ 共有567人围观    

引言

上一遍教程使用actionscript3.0构建一个异步加载图片的画廊（一） 主要讲述了其准备工作，接下来的这篇教程将讲解如何让滑动块随鼠标移动，从而构建个滚动条，通过这篇教程，你可以学习到actionscript3以下的知识点：

  • actionscript3事件机制的应用
  • 如果派发自定义事件
  • 如何监测鼠标坐标，并应用于实战

这篇教程的关键在于对actionscript3事件的应用。
示例和下载包请到上一篇教程下载。

使用actionscript3.0构建滚动条

1、打开handle元件的文档类

有二种方法：
一、直接打开lib.Handle
二、点击“库“下的handle元件，右击，再点击”编辑类“。

  1. package lib  {
  2.    
  3.     /**
  4.     *Handle
  5.     *@describe 滑动块滑动
  6.     *@autor Ben Merckx
  7.     *@note 明河共影注释
  8.     *@site http://www.36ria.com/
  9.     *@date 2010-06-02
  10.     **/       
  11.     public class Handle extends MovieClip {
  12.         //构造函数
  13.         public function Handle() : void{
  14.  
  15.         }       
  16.     }
  17.    
  18. }

起始代码如上，为了便于理解，明河这里都加上中文注释，可自行去掉。

2、实现滚动条的原理解析

这个原理不难，为了实现滑动效果，需要监听三个事件：鼠标按下、鼠标移动、鼠标放起，在鼠标按下时（获取x轴坐标）监听鼠标移动事件，获取新的x轴坐标，这时候要做个判断，即滑动块移动范围，不能低于滑动条的起始X轴位置，不能高于滑动条终点位置。
接下来来看详细代码。

3、构造函数解析

  1. //构造函数
  2.         public function Handle() : void{
  3.             //鼠标手型
  4.             buttonMode = true;
  5.             //监听鼠标按下
  6.             addEventListener(MouseEvent.MOUSE_DOWN,moveHandle);
  7.             //监听鼠标放起（留意这里是监听舞台的事件）
  8.             stage.addEventListener(MouseEvent.MOUSE_UP,stopHandle);
  9.         }

buttonMode = true;设置鼠标到滑动块的手型
addEventListener(MouseEvent.MOUSE_DOWN,moveHandle);监听元件鼠标按下事件
stage.addEventListener(MouseEvent.MOUSE_UP,stopHandle);这里有需要留意的地方不是监听元件的鼠标放起事件，而是监听舞台的，主要是因为很有可能鼠标在移动过程中没有在滑动块上，这时候依旧要触发鼠标放起事件，不然滑动块会一直移动下去。

4、鼠标按下事件

  1. /*
  2.         *鼠标按下
  3.         */
  4.         private function moveHandle(_e:MouseEvent):void{
  5.             //给鼠标位置赋值
  6.             mousePos = mouseX;
  7.             stage.addEventListener(MouseEvent.MOUSE_MOVE,followHandle);
  8.         }

请在构造函数上定义

  1. //鼠标的位置（X轴）
  2.         private var mousePos : Number = 0;

stage.addEventListener(MouseEvent.MOUSE_MOVE,followHandle);给舞台监听鼠标移动事件（当鼠标放起时，要删除这个监听事件）

5、来看followHandle

  1. /*
  2.         *鼠标移动
  3.         */       
  4.         private function followHandle(_e:MouseEvent):void{
  5.             //新的位置
  6.             var newPos:Number = stage.mouseX - mousePos;
  7.             //滑动块影片剪辑旧的的x轴位置
  8.             var orgX:Number = x;
  9.             //确定滑动块的移动的位置，这里需要做二个判断，滑动块不能小于滑动条的x轴位置，也不能超过滑动条的宽度
  10.             if(newPos < slider.x){
  11.                 goToX = slider.x;
  12.             }
  13.             else if(newPos > (slider.x + slider.width) - width){
  14.                 goToX = (slider.x + slider.width) - width;
  15.             }else{
  16.                 goToX = newPos;
  17.             }
  18.             //改变滑动块位置
  19.             x = goToX;
  20.             //只有在滑动块有位移的时候才派发事件
  21.             if( goToX != orgX ) dispatchEvent( new Event( "sliding", true ) );
  22.         }

这是整个类的最关键部分，也是实现效果的最关键代码，明河予以详解。

  1. //新的位置
  2.             var newPos:Number = stage.mouseX - mousePos;

获取新的x轴位置，此x轴位置应该是舞台中的鼠标x轴位置—旧的x轴位置。

  1. //确定滑动块的移动的位置，这里需要做二个判断，滑动块不能小于滑动条的x轴位置，也不能超过滑动条的宽度
  2.             if(newPos < slider.x){
  3.                 goToX = slider.x;
  4.             }
  5.             else if(newPos > (slider.x + slider.width) - width){
  6.                 goToX = (slider.x + slider.width) - width;
  7.             }else{
  8.                 goToX = newPos;
  9.             }

这段代码最为关键。
当newPos < slider.x即新的x轴位置小于slider（即滑动条）的x轴位置，那么，goToX = slider.x;即要移动到的x轴位置为滑动条的x轴位置。
当newPos > (slider.x + slider.width) – width，即超过滑动条终点位置，那么移动到的x轴位置为滑动条的终点位置。
这里说明下为什么终点是(slider.x + slider.width) – width。

终点是如上图的黄色区域，所以slider.x + slider.width后必须减去滑动块的宽度

  1. //只有在滑动块有位移的时候才派发事件
  2.             if( goToX != orgX ) dispatchEvent( new Event( "sliding", true ) );

这是非常关键的代码，当滑动块移动时将会派发出新的sliding事件，供外部监听。

6、鼠标放起

  1. /*
  2.         *鼠标放起
  3.         */       
  4.         private function stopHandle(_e:MouseEvent):void{
  5.             //删除鼠标移动事件的监听
  6.             stage.removeEventListener(MouseEvent.MOUSE_MOVE,followHandle);
  7.         }

删除删除鼠标移动事件的监听。

至此Handle.as的代码结束，预览即可看到滑动块滑动效果。
下一篇教程将讲解如何使用actionscript3.0读取和处理xml。

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

10个座位已被强势霸占！

  1. 灵亦rEd

    很好

    明河共影回复于 2010年06月07日 8:47

    谢谢。

  2. ilexcai

    你好，我是初学者，private var slider : MovieClip = MovieClip(parent).slider;我想知道这句是什么意思。。。。slider在哪定义的。。。我在运行到slider.x的时候出错，说是空对象引用。。。是不是滑动条那里要绑定什么类文件。。

    明河共影回复于 2010年10月25日 2:25

    时间太久，我也忘记了。最好贴整段，我好回忆。

  3. ilexcai

    额。其实如果你的源文件给我看下，我应该会懂，可是下载完你的源文件哦，打开fla文件，说是未知格式，然后打开不了。。可能整个过程下来，你有些东西省略了，而我也没跟着创建，然后我在运行影片的时候，总是出现这样的错误
    TypeError: Error #1009: 无法访问空对象引用的属性或方法。
    at lib::Handle()
    at lib::Gallery()
    at flash.display::Sprite/constructChildren()
    at flash.display::Sprite()
    at flash.display::MovieClip()
    在你的Gallery.as中，我咋找不到theHandle的定义。。。。。结果运行时，出现
    1120: 访问的属性 theHandle 未定义。另外在goto函数中，图片计数那里，tt.text指的时候什么？是指一个元件实例，用来显示“第1/10张”这样的信息的吗？哎呀，我是完全0基础的。。弄的我好晕。。。

    明河共影回复于 2010年10月27日 9:24

    ……..如果是0基础的话，看这个的确很吃力。之所以打不开fla文件，你用的flash是第几版本的？我用的是cs5，低于此版本，就有可能出现不兼容，打不开的问题会出现，tt.text你想的没错，就是图片数信息显示。

  4. ilexcai

    谢谢你啊~我用的是CS4难怪打不开了。。。呵呵。

  5. ilexcai

    能留下你的QQ吗。。。。我想直接问你。。。我已经按照你的步骤来做这个画廊了。。可是总是说访问了未声明的属性，在theHandle、slider那里总是出错。。。不好意思，打扰到你了

    明河共影回复于 2010年10月28日 9:39

    你好ilexcai ，你可以加793588730。呵呵没什么打扰不打扰的，能帮到你是我的荣幸。

    明河共影回复于 2010年10月28日 9:40

    你可以下载英文原文的demo代码，英文原文的demo是用flash cs4编码而成。

同类