hujingjian 发表于 2007-4-26 23:23:01

进入flash mx组件时代之二 内置组件的使用(中)

http://www.sz1001.net/info/../images/pix.gif

  2.5 pushbutton(推动按钮)

  pushbutton相对于其它内置组件来说其设置与功能相对比较简单,但它却与常规按钮划出了一道界线。在flashmx中许多地方讲求的都是事件机制,而pushbutton就是将原来普通按钮的对象触发机制封装成了事件触发机制。

  现在我们从components面板中拖拽一个pushbutton组件到场景中,然后打开它的参数设置面板,如图23所示。

http://img.skycn.com/articleimg/20030717-6.gif
图23 pushbutton组件的参数面板


  labels(标签):pushbutton显示的提示名称。

  changehandler:执行用户自定义的函数。该参数选项的参数为用户定义函数的函数名。

  显然pushbutton的参数设置内容比较少,而下面我们将举一实例来分析简单区别一下

  普通按钮与pushbutton的不同,在此例中我们将自定义一个函数rotatetriangle(),利用此函数我们将控制场景中的一个三角形实体物件triangle,我们可控制该实体旋转角度,当角度大于等于100度时则pushbutton失效,但普通按钮却可继续工作。

http://img.skycn.com/articleimg/20030717-7.gif
图24 pushbutton实体场景内容


  如上图所示,如果我们要控制triangle的旋转角度按通常的方法一般是:新建一个普通按钮,然后可在按钮的代码操作区写上如下代码。

on(press){

triangle._rotation = triangle._rotation+10;

}

  这样我们就可以轻松的对triangle对象进行角度旋转控制。

  然而,现在由于有了pushbutton按钮,我们就可以将控制的操作代码移至到frame上,

  我们现在编写一个简单的自定义函数rotatetriangle(),其代码如下:

function rotatetriangle() {

triangle._rotation = triangle._rotation+10;

if (triangle._rotation>=100) {

pushtriangle.setenabled(false);

}

}

  我们在控制triangle实体对象旋转的同时作了一个简单的条件判断,当triangle的旋

  转角度大于等于100的时候我们规定pushbutton将不再可以控制,即:可用性为否。此时对于pushbutton的操作只需将它的changehandler参数设置为rotatetriangle即可而无需再编写任何代码,但倘若普通按钮要调用此函数则需添加如下内容代码:

on(press){

rotatetriangle()

}

  在此实例中我们函数的代码量十分的少,控制的内容也相当的少,因而似乎没有感觉到

  普通按钮与pushbutton的区别所在。但是我们绝不能光光看到上面对pushbutton的可用性进行控制的内容区别,其实普通按钮与pushbutton的区别还在于代码编写机制的改变,由此我们完全可以将场景中的按钮操作代码放置在frame中,而用pushbutton的changehandler来调用,可以摆脱以往那种单个按钮中进行操作代码分别编写的时代,这样做的好处不光光是提高代码管理能力(在按钮控制内容相当多,按钮控制代码相当多的情况十更显有效)而且对于提高影片执行效率也相当有益处。

  2.6 scrollbar(滚动条)

  应该说scrollbar组件是应用最为广泛的组件,我们只需在场景中放置动态文本框,然

  后将scrollbar组件拖拽到场景中并将它粘缚在相应的动态文本框上,再利用loadvariables或是其它的方法将文本内容导入到该文本框内就可以利用scrollbar直接控制文本的滚动显示了,相对于flash4与flash5的历史,我们再也无需自己编写那么多繁重的代码内容,类似的操作已显得这般的轻松与简单。

  现在我们从components面板中拖拽一个scrollbar组件到场景中,然后打开它的参数设置面板,如图25所示。

http://img.skycn.com/articleimg/20030717-8.gif
图25 scrollbar组件的参数面板


  target textfield(文件对象):粘缚的文本对象在场景中的实体名称。

  horizontal(水平):判断滚动条的状态是水平或是垂直状态。false:滚动条为垂直状态;true:滚动条为水平状态。

  下面我们会将一段文本信息载入到场景中的动态文本内,然后直接利用scrollbar控制

  文本框内的文本进行上下滚动显示。

  首先放置一个动态文本框,将实体名称命名为scrollbardemo,并将文本显示设置为multiline(多行显示),如下图26所示:

http://img.skycn.com/articleimg/20030717-9.gif
图26 场景中的动态文本框及scrollbar组件


  然后从components中拖拽scrollbar组件到文本框上,此时我们需选中snap to ojbect 选项则scrollbar会自动粘缚到文本上,scrollbar的paramters中的target textfield会自动切变为文本框在场景中的实体名称,此处为scrollbardemo。http://img.skycn.com/articleimg/20030717-10.gif

  然后我们在场景中新建一个actionscript层,并在关键帧中输入如下的代码内容:

//-----------------------------------------------------------------------------

//函 数 名:loadtextmx();

//功 能:文本的导入

//所需技术:xml,load,onload,htmltext

//所需参数:url,textbox

//适用版本:flashmx

system.usecodepage = true;

//自定义函数loadtextmx,loadtextmx将文本解析为xml格式并支持文本html的显示

movieclip.prototype.loadtextmx = function(url, textbox) {

loadvarstext = new xml();

loadvarstext.load(url);

loadvarstext.onload = function(success) {

if (success) {

textbox.html = true;

textbox.htmltext = this;

} else {

textbox.html = true;

textbox.htmltext = "< br>< font color=\"#ff0000\">提示:未找到相应文件!< /font >";

}

};

};

//利用自定义函数将scrollbardemo.txt文本内容载入到scrollbardemo文本框内

loadtextmx("scrollbardemo.txt", scrollbardemo);

  本例的测试结果如图27所示,我们可以看到scrollbar已经绑定了文本框,我们可以拖动滚动条来对文本进行翻动控制,而文本框内的“pushbutton”字样则以html标准红色显示。

http://img.skycn.com/articleimg/20030717-11.gif
图27 scrollbar实例成品样式


  2.7 scrollpane(滚动面板)

  flashmx在诸多方面较之flash5都有了重大的突破,而对于图片的载入则是这些突破中非常显著的一点,而在此我们还可以利用scrollpane组件对动态载入的图片进行显示操作,我们不仅可以利用上下左右滚动对scrollpane中图片进行区域显示,还可以用鼠标直接拖动scrollpane中的图片来进行局部内容显示。

  现在我们从components面板中拖拽一个scrollpane组件到场景中,然后打开它的参数设置面板,如图28所示。

http://img.skycn.com/articleimg/20030717-12.gif
图28 scrollpane组件的参数面板


  scroll content(滚动对象):链接一个lirbary库中的mc对象到scrollpane中进行显示,而此处的scroll content内容则是被绑定对象的linkage的名称。

  horizontal scroll:水平滚动条。auto:自动判断是否需要水平滚动条;ture:显示水平滚动条;false:不显示水平滚动条。

  vertical scroll:垂直滚动条。auto:自动判断是否需要垂直滚动条;ture:显示垂直滚动条;false:不显示垂直滚动条。

  drag content:是否可以手动拖动scrollpane中的内容。true:支持手动拖动;false:不允许手动拖动。

  下面我们将介绍两个实例来分析一下scrollpane的实际应用,实例一将利用scroll
content来绑定一个mc并在scrollpane中显示,而实例二将利用简单的action代码动态载入外部的jpg图形并在scrollpane中显示。

  scrollpane实例一:

  首先我们按下ctrl+r导入一个外部图形到实例的library中,并新建一个movieclip将此图形放置于内,如下图29所示:

http://img.skycn.com/articleimg/20030717-13.gif
图29 导入的外部图形及新建的movieclip


  我们右键点击examplemc(movieclip),然后选中linkage,在弹出的对话框内将identifiy的内容填写为examplemc。

  然后我们再次返回scrollpane的参数设置面板,将scroll content的内容设置为examplemc,horizontal scroll 、vertical scroll设置为true,drag content设置为否,则该实例的成品样式如下图30所示,我们将鼠标移动至scrollpane中则无法拖动查看scrollpane中内容。


http://img.skycn.com/articleimg/20030717-14.gif
图30 scrollpane实例1成品样式


  scrollpane实例二:

  我们仍旧新建一个scrollpane组件,将它拖放至主场景内,并灌以实体名为scrollpanedemo,然后我们需确认在该实例的相同目录下有example.jpg此图形,接下来我们再新建一个actionscript层并在此关键帧中输入如下代码:

//用with来操作场景下名称为scrollpanedemo的scrollpane组件

//用loadscrollcontent将example.jpg从外部载入到scrollpane中

//设置水平、垂直滚动条为不可见,但支持鼠标拖放显示scrollpane中的内容

with (scrollpanedemo) {

loadscrollcontent("example.jpg");

setdragcontent(true);

sethscroll(false);

setvscroll(false);

}

  简单几行代码就完成了此实例的全部操作,具体成品如下图31所示,鼠标在图片显示区域内显示为手的形状,我们可以用“手”来播放显示example.jpg图形。

http://img.skycn.com/articleimg/20030717-15.gif
图31 scrollpane实例2成品样式


http://www.sz1001.net/info/../down_info.asp?id=1733












-------- ------------------------------

拥有三人行论坛管理系列软件,一个人就可以管理一个论坛的 更新维护。还能使您的论坛有千人 在线的真实火暴效果 ,让您不在   为论坛因没有人气而留不住会员而烦恼,使您的论坛早日成为一流的论坛。详情请 登陆网站:http ://www.c nsrx.cn 三人行 论坛管理软件,站长必备的 专业好工具。(您使用的是免费版本,购买收费版本后,将不带广告。业务QQ:247216 44985 227)
页: [1]
查看完整版本: 进入flash mx组件时代之二 内置组件的使用(中)