您的位置:首页网页设计Flash → 进入Flash MX组件时代之二 内置组件的使用(中)

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

时间:2004/11/7 2:19:00来源:本站整理作者:蓝点我要评论(0)

  2.5 PushButton(推动按钮)



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



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

图23 PushButton组件的参数面板




  Labels(标签):PushButton显示的提示名称。



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



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



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

图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所示。

图25 ScrollBar组件的参数面板




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



  Horizontal(水平):判断滚动条的状态是水平或是垂直状态。False:滚动条为垂直状态;True:滚动条为水平状态。



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



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



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

图26 场景中的动态文本框及ScrollBar组件




  然后从Components中拖拽ScrollBar组件到文本框上,此时我们需选中Snap to Ojbect 选项则ScrollBar会自动粘缚到文本上,ScrollBar的Paramters中的Target TextField会自动切变为文本框在场景中的实体名称,此处为ScrollBarDemo。



  然后我们在场景中新建一个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标准红色显示。

图27 ScrollBar实例成品样式




  2.7 ScrollPane(滚动面板)



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



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

图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所示:

图29 导入的外部图形及新建的MovieClip




  我们右键点击exampleMC(MovieClip),然后选中Linkage,在弹出的对话框内将Identifiy的内容填写为exampleMC。



  然后我们再次返回ScrollPane的参数设置面板,将Scroll Content的内容设置为exampleMC,Horizontal Scroll 、Vertical Scroll设置为True,Drag Content设置为否,则该实例的成品样式如下图30所示,我们将鼠标移动至ScrollPane中则无法拖动查看ScrollPane中内容。

图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图形。

图31 ScrollPane实例2成品样式

相关阅读 Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 Flash CS4基础入门 如何在Flash中打开一个定制的浏览器新窗口?学习ActionScript 3.0的6个好处几个小技巧精简Flash文件体积在Flash动画中添加“加为收藏”和“设为首页

人气排行 Flash游戏制作--小熊拼图用Flash实现几种镜头效果Flash制作动画知识:遮罩Flash如何做鼠标指针样式Flash制作环形文字Flash制作声情并茂的电子相册实例讲解flashMTV制作全过程(3)鼠标效果系列教程:游动的鱼