- 浏览: 119372 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
zhouhaiyang88:
huang-tao 写道你好,在吗?请问,我启动Tomcat时 ...
ActiveMq-JMS简单实例使用tomcat -
xurichusheng:
huang-tao 写道你好,在吗?请问,我启动Tomcat时 ...
ActiveMq-JMS简单实例使用tomcat -
wgcooo:
javax.naming.NameNotFoundExcept ...
ActiveMq-JMS简单实例使用tomcat -
huang-tao:
你好,在吗?请问,我启动Tomcat时报如下错,是什么原因?= ...
ActiveMq-JMS简单实例使用tomcat -
Eric.Yan:
好文章,明天试一试
ActiveMq-JMS简单实例使用tomcat
先看最终的演示:
滑块条的应用实在太广泛了:mp3播放器中声量的大小控制,视频播放时的画面亮度调节,阅读新闻时字体大小的实时调整,对象的大小互动控制...
分析:
1.任何一个滑块条控件的UI部分,基本上可以分为:背景滑块条 + 滑块按钮 二个部分
所以我分成了三部分: JimmySilderBar(背景条),JimmySilderButton(拖动钮),JimmySilder(真正的滑动控件,将前二个组合在一起),为了重用,这三个部分都做成MovieClip元件放在库里,这样以后要换风格或颜色时,只要在库里编辑元件,所有的地方自然全变了.
另外在JimmySilder这个元件中,为了能在代码中引用到另外二个元件的实例,JimmySilderButton实例被命名为_mcBtn,而JimmySilderBar实例被命名为_mcBar
2.拖动问题
MovieClip有startDrag/endDrag方法,而且startDarg方法还能方便的设置拖动的边界(即拖动时,滑块钮不能拖到背景条以外的地方),so...这个问题也解决了
3.属性/事件支持
既然是滑块控件,肯定要能得到当前的位置/值,另外拖动(以导致值变化)时,应该能触发使用者自己定义的处理方法(否则就变成一个单纯只能拖来拖去的东东,不能跟其它对象的属性关联交互,那就没啥意义了)
实现:
1.为了支持事件,首先也定义一个Event子类:
package
Jimmy.Event {
import
flash.events.Event;
public
class
ValueChangeEvent
extends
Event {
public
static
const
VALUE_CHANGE:
String
=
"VALUE_CHANGE"
;
private
var
_OldValue:
Number
,_NewValue:
Number
;
public
function
ValueChangeEvent(eventType:
String
,oldValue:
Number
,newValue:
Number
){
this
._OldValue = oldValue;
this
._NewValue = newValue;
super
(eventType);
}
public
function
get
OldValue():
Number
{
return
_OldValue;
}
public
function
get
NewValue():
Number
{
return
_NewValue;
}
}
}
2.控件代码的实现:
//滑块控件 beta 0.001 -- by 菩提树下的杨过 http://yjmyzz.cnblogs.com/
package
{
import
flash.display.Sprite;
import
flash.display.MovieClip;
import
flash.events.MouseEvent;
import
flash.ui.Mouse;
import
flash.events.Event;
import
flash.ui.MouseCursor;
import
flash.geom.Rectangle;
import
Jimmy.Event.ValueChangeEvent;
public
class
JimmySilder
extends
MovieClip {
private
var
_btnWidth:
uint
;
//滑块宽度
private
var
_btnHeight:
uint
;
//滑块高度
private
var
_barWidth:
uint
;
//滑块背景条宽度
private
var
_barHeight:
uint
;
//滑块背景条高度
private
var
_isDragging:
Boolean
=
false
;
//是否正在拖动
private
var
_value:
Number
=
0.0
;
//滑块的值(百分比)
public
function
JimmySilder(btnWidth:
uint
=
10
,btnHeight:
uint
=
30
,barWidth:
uint
=
200
,barHeight:
uint
=
10
,v:
Number
=
0.5
):
void
{
//trace("JimmySilder's constructor is called.");
this
._btnWidth=btnWidth;
this
._btnHeight=btnHeight;
this
._barWidth=barWidth;
this
._barHeight=barHeight;
init();
this
.Value=v;
this
.addEventListener(Event.ADDED_TO_STAGE,AddedToStage);
}
private
function
AddedToStage(e:Event):
void
{
this
.stage.addEventListener(MouseEvent.MOUSE_MOVE,stageMouseMoveHandler);
this
.stage.addEventListener(MouseEvent.MOUSE_UP,stageMouseUpHandler);
}
//属性Value的setter方法
public
function
set
Value(v:
Number
):
void
{
if
(v<=
0
) {
v=
0.0
;
}
if
(v>=
1
) {
v=
1.0
;
}
this
.value=v;
this
._mcBtn.x = _mcBar.width/(-
2
) + _mcBar.width * _value;
//根据value百分比值来定位mcBtn的横坐标
}
//属性Value的getter方法
public
function
get
Value():
Number
{
return
_value;
}
//初始化
private
function
init():
void
{
this
._mcBtn.width=_btnWidth;
this
._mcBtn.height=_btnHeight;
this
._mcBar.width=_barWidth;
this
._mcBar.height=_barHeight;
this
._mcBtn.addEventListener(MouseEvent.MOUSE_OVER, mcBtnMouseOverHandler);
this
._mcBtn.addEventListener(MouseEvent.MOUSE_OUT, mcBtnMouseOutHandler);
this
._mcBtn.addEventListener(MouseEvent.MOUSE_DOWN,mcBtnMouseDownHandler);
this
._mcBar.addEventListener(MouseEvent.MOUSE_DOWN,mcBarMouseDownHandler);
//trace("init 初始化完成");
}
//切换光标为手形
private
function
mcBtnMouseOverHandler(e:MouseEvent) {
Mouse.cursor=MouseCursor.HAND;
}
//切换光标为系统光标
private
function
mcBtnMouseOutHandler(e:MouseEvent) {
Mouse.cursor=MouseCursor.AUTO;
}
//开始拖动
private
function
mcBtnMouseDownHandler(e:MouseEvent) {
//trace("开始拖动");
_mcBtn.startDrag(
true
,
new
Rectangle(_mcBar.width/(-
2
),
0
,_mcBar.width,
0
));
//注意:这里锁定中心在指定区域拖动
_isDragging=
true
;
}
//停止拖动
private
function
stageMouseUpHandler(e:MouseEvent) {
//trace("停止拖动");
_mcBtn.stopDrag();
_isDragging=
false
;
}
//在自身区域上移动时,动态计算_value值
private
function
stageMouseMoveHandler(e:MouseEvent) {
if
(_isDragging) {
RaiseEvent();
//trace(_value);
}
}
//在背景条上点击时,滑块直接跳到该位置
private
function
mcBarMouseDownHandler(e:MouseEvent) {
_mcBtn.x=mouseX;
RaiseEvent();
}
//触发事件
private
function
RaiseEvent():
void
{
var
_oldValue:
Number
=_value;
_value = (_mcBtn.x + _mcBar.width/
2
)/_mcBar.width;
var
_valueChangeEvent:ValueChangeEvent=
new
ValueChangeEvent(ValueChangeEvent.VALUE_CHANGE,_oldValue,_value);
dispatchEvent(_valueChangeEvent);
//触发事件
}
}
}
3.测试代码:
import
Jimmy.Event.ValueChangeEvent;
var
silder:JimmySilder =
new
JimmySilder();
silder.width =
200
;
silder.height =
20
;
silder.x = stage.stageWidth/
2
;
silder.y =
200
;
//trace(silder.Value);
addChild(silder);
silder.addEventListener(ValueChangeEvent.VALUE_CHANGE, ValueChangeHandler);
testObj.scaleX = testObj.scaleY = silder.Value;
testObj2.rotation = silder.Value *
360
;
function
ValueChangeHandler(e:ValueChangeEvent){
//trace("当前滑块的值是:" + e.NewValue);
testObj.scaleX = testObj.scaleY = e.NewValue;
testObj2.rotation = silder.Value *
360
;
}
源文件下载: http://cid-2959920b8267aaca.skydrive.live.com/self.aspx/Flash/JimmySilder.rar
后记:可能有人会问,为啥不直接用系统内置的组件,要费这么大劲自己重造轮子? 如果您自己试下就会知道了,用了系统组件后,swf文件大约会在19k或22k,而按本文的办法,同样的swf,最终只有7K(精简了1/3左右),所以还是那句话,能自己手写的就自己手写,除非自己写不了,再用系统的组件。
发表评论
-
Flash/Flex学习笔记(50):矩阵变换
2011-04-24 13:52 1137先回顾一下Silvelright中的矩阵变换[转]WPF中的M ... -
Flash/Flex学习笔记(49):背面剔除与 3D 灯光
2011-04-24 13:50 957今天继续:上一回Flash/Flex学习笔记(50):3D线条 ... -
Flash/Flex学习笔记(48):迷你滚动条ScrollBar
2011-04-24 13:46 1034先看最终效果: 整个swf最终不到4k, ... -
Flash/Flex学习笔记(47):利用FMS快速创建一个文本聊天室
2011-04-24 13:45 960先来看客户端fla的构成: 第一帧:登录界面 第一帧的 ... -
Flash/Flex学习笔记(46):使用TweenLite
2011-04-24 13:43 1647TweenLite是第三方出品的专用于各种缓动动画的类库,其性 ... -
Flash/Flex学习笔记(45):3维旋转与透视变换(PerspectiveProjection)
2011-04-24 13:41 1182Flash/Flex学习笔记:3D基础 里已经介绍了3D透 ... -
Flash/Flex学习笔记(44):3D线条与填充
2011-04-24 13:39 10723D线条:把上一篇中的3D坐标旋转示例稍做修改,用线把各个 ... -
Flash/Flex学习笔记(43):3D基础
2011-04-24 13:34 1112之前我们所做的动画都 ... -
Flash/Flex学习笔记(42):反向运动学(下)
2011-04-24 13:30 897先要复习一下三角函数与余弦定理: 对于直角三角形,三边长 ... -
Flash/Flex学习笔记(41):反向运动学(上)
2011-04-24 13:29 912先回顾上篇所说的"正向运动学":以人行 ... -
Flash/Flex学习笔记(40):正向运动学
2011-04-24 13:27 855所谓"正向运动学"通俗点讲就是把几个连接部 ... -
Flash/Flex学习笔记(39):万有引力与粒子系统
2011-04-24 13:26 703万有引用公式: 其中G为万有引力常数 var numP ... -
Flash/Flex学习笔记(38):动量守恒与能量守恒
2011-04-24 13:24 914动能公式: 动量公式: 动量守恒: 能量守恒: ... -
Flash/Flex学习笔记(37):坐标旋转
2011-04-24 13:23 994坐标旋转是个啥概念呢? 如上图,(蓝色)小球 绕某一 ... -
Flash/Flex学习笔记(36):碰撞检测
2011-04-24 13:22 583碰撞检测基本上可能分为二类:对象与对象的碰撞检测、对象与点 ... -
Flash/Flex学习笔记(35):弹性运动续--弹簧
2011-04-24 13:21 733上一篇里演示的弹性运动加上摩擦力因素后,物体最终基本上都会比较 ... -
Flash/Flex学习笔记(34):弹性运动
2011-04-24 13:20 744动画中的弹性运动 从视觉效果上接近 物理经典力学中的单摆运 ... -
Flash/Flex学习笔记(33):缓动动画
2011-04-24 13:18 973缓动 与 匀变速 看上去很类似,但其实有区别: 匀变速的 ... -
Flash/Flex学习笔记(32):不用系统组件(纯AS3)的视频播放器--只有8.82K
2011-04-24 13:17 1244以前为了赶项目,利用系统组件制作过一款视频播放器(见Fla ... -
Flash/Flex学习笔记(30):如何正确监听Stage对象的事件
2011-04-24 13:13 1265如果想在一个自定义类中注册对stage对象的监听事件,然后在另 ...
相关推荐
附件是关于 Flash/Flex 几个重要框架 Cairngorm、Mate、PureMVC以及Swiz 的典型例子,由 Tony Hillerson 提供 Homepage: http://insideria.com
flex/Flash开发系列书籍:基于FLASH的WEB3D应用研究
Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记
flash/flex画曲线,绘图板,用代码实现的个画曲线功能,类绘图板,可下载看看,不错的学习案例。
语言:C ++许可证:BSD-3代码质量:A + https://lgtm.com/projects/g/Genivia/RE-flex/context:cpp文档:https://www.genivia.com/doc/reflex/html /index.html存储库:https://github.com/Genivia/RE-flex更改日志...
flash/flex 的aqua皮肤.类似苹果系统
FDT-flash/flex devtoolkit for eclipse. for最新版的 FDT 3.5 beta2
来自《潮汕IT男》网站的文章《解决flash/flex/as3 访问中文域名时的流错误》代码示例,地址:http://chenlinsheng.com/?p=990
NULL 博文链接:https://summerbell.iteye.com/blog/359226
flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记
总共有4个例子: 1.http://127.0.0.1:8080/flexDemo/HelloWorld/HelloWorld.html 2.http://127.0.0.1:8080/flexDemo/HelloWorld/ReadList.html 3.http://127.0.0.1:8080/flexDemo/HelloWorld/ReadExample.html 4....
第一阶段(2周左右每天至少4个小时):入门 目标是:做简单的demo.熟悉环境,工具等。 宗旨是:重敲书本的例子,熟悉语法,规范,流程 参考网文:http://jackweijie.javaeye.com/blog/191452 参考书:Flex 入门...
最近开始学习Flex,其中用到了AS,AS2到AS3发生了很大的变化,完全的面向对象,知道这个特点以后我也一直没有特意的好好去学学AS3,但是随着最近学习的深入,还是有必要学习一下
一.flex2的全屏代码 在仅仅使用Flex Builder2(我下载的是FLXB_2.0_Win_WWE.exe)的时候,写全屏代码竟然找不到flash.display.StageDisplayState,于是下载了Flex 2.0.1升级包(官方地址:...(参考:...
这是作者自己亲自编写的教程,里面包含的有图解教程,各式jar,及配置文件,全部包含在内,如果你是一个决定学习flex初学者,我敢保证它肯定适合你!带上你走上flex开发旅途!
本人用FLEX写的直播播放器,基于RTMP协议。代码要放入tomcat等容器里运行,打开play.html即可看到例子效果,含有源代码,希望能帮助到需要的人。
NULL 博文链接:https://as3.iteye.com/blog/909512
NULL 博文链接:https://as3.iteye.com/blog/1134453
Flex学习笔记1
xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="app_creationCompleteHandler(event)"> <fx:Script> <![CDATA[ import mx.events.FlexEvent; ...