第2篇:用as3.0制作一个滚动条组件

本实例演示了实现一个滚动条基本功能的制作方法,没有添加改变皮肤,修改滚动条视框大小等功能,有兴趣的朋友可根据自己要求自行添加。使用时只需要通过以下一行代码创建滚动条组件:

var myScrollbar:Scrollbar=new Scrollbar(mc);
addChild(myScrollbar);

其中mc为需要添加滚动条功能的元件,如影片剪辑,文本等。

一、制作元件

滚动条由滑块slider,向上向下滚动的按钮,滚动条背景,遮挡内容的遮罩及存储内容的contMc元素组成。当拖动滑块slider或单击上下按钮时,contMc会上下滚动。制作元件并命名如下:

二、为滚动条的库元件添加链接(如下图所示)

三、链接的类代码

全局变量说明:step为滚动步数,top为slider滑块在最顶端的位置,buttom为滑块在最低端的位置。

 1 package  {
 2
 3     import flash.display.MovieClip;
 4     import flash.display.DisplayObject;
 5     import flash.events.Event;
 6     import flash.events.MouseEvent;
 7
 8     public class Scrollbar extends MovieClip {
 9
10         private var step:int=5;
11         private var top:Number;
12         private var buttom:Number;
13
14         public function Scrollbar(mc:DisplayObject) {
15             this.contMc.addChild(mc);
16             mc.x=0;
17             mc.y=0;
18             this.addEventListener(Event.ADDED_TO_STAGE,init);
19         }
20
21         private function init(e:Event):void {
22             top=this.slider.height/2;
23             buttom=this.back.height-this.slider.height/2;
24             this.downBtn.addEventListener(MouseEvent.CLICK,downHandler);
25             this.upBtn.addEventListener(MouseEvent.CLICK,upHandler);
26             this.slider.addEventListener(MouseEvent.MOUSE_DOWN,sliderDrag);
27         }
28
29         private function downHandler(e:MouseEvent):void {
30             if(this.slider.y<buttom){
31                 this.slider.y+=step;
32             }
33             if(this.slider.y>buttom){
34                 this.slider.y=buttom;
35             }
36             moveContMc();
37         }
38
39         private function upHandler(e:MouseEvent):void {
40             if(this.slider.y>top){
41                 this.slider.y-=step;
42             }
43             if(this.slider.y<top){
44                 this.slider.y=top;
45             }
46             moveContMc()
47         }
48
49         private function sliderDrag(e:MouseEvent):void {
50             this.stage.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);
51             this.addEventListener(Event.ENTER_FRAME,enterFrameHandler);
52
53         }
54
55         private function mouseUpHandler(e:MouseEvent):void {
56             this.removeEventListener(Event.ENTER_FRAME,enterFrameHandler);
57         }
58
59         private function enterFrameHandler(e:Event):void {
60             this.slider.y=Math.min(buttom,Math.max(top,this.mouseY));
61             moveContMc();
62         }
63
64         private function moveContMc():void {
65             this.contMc.y=-(this.contMc.height-this.back.height)*(this.slider.y-top)/buttom;
66         }
67
68     }
69 }

四、moveContMc函数解析:

如下图左示意,当slider滑块由最顶端(top位置)向下移动距离b时,contMc会向上移动距离a。如下图右,当滑块移动到最低端(buttom位置)时,contMc会移动到最顶端,距离为m(值为contMc的高度-遮罩层的高度),由a/b=m/n,可算出a值为m*b/n,即:

this.contMc.y=-(this.contMc.height-this.back.height)*(this.slider.y-top)/buttom;

时间: 2024-10-13 22:01:45

第2篇:用as3.0制作一个滚动条组件的相关文章

第二十四篇-用VideoView制作一个简单的视频播放器

这是一个播放本地视频的播放器,videoUrl1是手机里放置视频的路径 效果图: MainActivity.java package com.example.aimee.videotest; import android.Manifest; import android.content.pm.PackageManager; import android.net.Uri; import android.os.Build; import android.support.annotation.NonN

as3.0 封装一个可垂直居中及左右居中的label,并可以设置其字体样式

下面是封装了一个可设置垂直居中及左右居中的Label,同时可以设置label中的字体样式.代码如下: package myComponent  { import flash.display.Shape; import flash.display.Sprite; import flash.text.StyleSheet; import flash.text.TextField; import flash.text.TextLineMetrics; /**  * ...  * @author lia

as3.0 制作图片的大体流程

import flash.display.Bitmap; import flash.display.BitmapData; var bm:Bitmap=new Bitmap()//建一个装图片的容器 var bmd:BitmapData=new BitmapData(dragMc.width,dragMc.height,true,0xFFF999)//设置图片的长宽等等. bmd.draw(dragMc)// 把图片画出来 bm=new Bitmap(bmd,"auto",true)/

【COCOS CREATOR 系列教程之四】基于0.7.1先简单制作一个PAGEVIEW

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/cocos-creator/1999.html 由于当前版本还没有发布1.0,因此还有不少组件没有发布,那么Himi也看到Cocos Creator群里有几个童鞋问起过PageView的问题,那么Himi正好借此练手,基于当前版本制作一个PageView. 本文分为两部分进行讲解: 1. 制作PageView     2. 如何使用 一. 制作

Unity3D教程宝典之Shader篇:第四讲制作一个美丽的地球

原创文章如需转载请注明:转载自风宇冲Unity3D教程学院 Vertex and Fragment Shader例子二,制作一个自动旋转的3D地球. 下载美丽的地球工程 原理是 2张贴图,一张地球图,一张云层分布图(1)通过uv.x即纹理坐标的横轴与时间相乘,产生球在移动的效果 (2)通过地球和云的颜色值叠加形成 层叠 的效果.注意:贴图的'Wrap Mode'属性一定要设置成Repeat                              关于Wrap Mode当Wrap Mode为Cl

制作一个简洁的jquery插件

原文:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401571467&idx=1&sn=08cb00963e6efd3881d3397903e84752&scene=1&srcid=0125cT8n9FJMI1u2faaQgjcS&from=singlemessage&isappinstalled=0#wechat_redirect 英文原文链接:http://www.queness.co

iOS自定义控件教程:制作一个可重用的旋钮

当你的APP需要一些新功能时,自定义UI控件会十分有用,尤其是这些自定义控件可以在其他APP里面很好的重用.Colin Eberhart写过一篇很棒的介绍自定义UI控件的教程.这个教程涉及的是一个继承自UISlider类的自定义控件的生成:该控件的功能是给定一个(滑动)范围供(用户滑动)选择,并返回一个(与滑动位置相对应的)固定值. 本篇基于iOS 7的自定义UI教程在Colin Eberhart那篇的基础上更深入一步:受调音台旋钮的启发,这里介绍如何制作一个功能类似UISlider的圆形旋转控

用Phaser来制作一个html5游戏——flappy bird (一)

Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希望大家看后也能做出自己的html5游戏.大家可以先点击这里来试玩一下我已经做好的这个游戏,感受一下Phaser的游戏效果,游戏的完整代码我已经放到github上了.支持的浏览器:IE9+.Firefox.Chrome.Opera.Safari以及移动端的能支持html5的浏览器,推荐使用谷歌浏览器,

Unity3D游戏开发从零单排(四) - 制作一个iOS游戏

提要 此篇是一个国外教程的翻译,虽然有点老,但是适合新手入门.自己去写代码,debug,布置场景,可以收获到很多.游戏邦上已经有前面两部分的译文,这里翻译的是游戏的最后一个部分. 欢迎回来 在第一篇中,我们学会了怎么在Unity中搭建游戏的场景,并且设置模型的物理属性. 在第二篇中,我们学会了怎么在unity中使用脚本,并且创建了大部分的游戏逻辑,包括投球和得分! 在这最后一节中,我们将会为用户创建一个菜单系统,并且和GameController进行交互,我们开始吧. 在设备上测试 到目前为止,