flash中组件ComboBox的改变样式和外观

时间:2009年03月25日作者:愚人码头查看次数:4,762 views评论次数:0

这次是见识了,flash中的组件样式非常难改,我花了整整一天半的时间在改变这个ComboBox 的外观样式,我想其他flash中的其他组件肯定也一样难改,不过经过这次我知道怎么去改了:)
    ComboBox改组件风格,有两块:一是改变样式,通过AS去改其部分属性;二是改变外观,将组件主题导入库,改主题里的资源来改变外观.

    下载源码,ComboBox改变样式和外观

    注:mycbx是ComboBox的实例名
    一、改变样式
    1.新创建一个样式,将此样式指它给组件
      import mx.styles.CSSStyleDeclaration;     //将所有 import 语句放置在 ActionScript 的开头是一种编码规范

      var new_style:Object = new CSSStyleDeclaration();  //命名该新样式声明,然后将其添加到全局样式声明
      _global.styles.myStyle = new_style;

      new_style.setStyle(”themeColor”, “haloBlue”);
      new_style.setStyle(”selectionColor”, “white”);
      new_style.setStyle(”useRollOver”, false);
      new_style.setStyle(”borderStyle”, “none”);

      mycbx.addItem({data:1, label:”One”});
      mycbx.addItem({data:2, label:”Two”});
      mycbx.setStyle(”styleName”, “myStyle”);   //赋值
    2.使用 List 样式来控制 ComboBox 组件的下拉列表部分的行为
      mycbx.setStyle(”alternatingRowColors”, [0xFFFFFF, 0xBFBFBF]);
      mycbx.setStyle(”themeColor”,0×999999);
      mycbx.setStyle(”backgroundColor”,0×000000);   //背景颜色
      mycbx.setStyle(”color”,0×999999);   //字体颜色
      mycbx.setStyle(”borderStyle”,”solid”);  //边框
      mycbx.setStyle(”borderColor”,0×333333);  //边框颜色
      mycbx.setStyle(”highlightColor”,0×333333);  //高亮颜色
      mycbx.setStyle(”selectionColor”,0×999999);  //选中颜色
      mycbx.setStyle(”rollOverColor”,0×999999);  //滚动颜色

样式   说明
1
themeColor
  组件的基本配色方案。可能的值包括

1
"haloGreen"

1
"haloBlue"

1
"haloOrange"

。默认值为

1
"haloGreen"

1
borderStyle
  Button 子组件将两个 RectBorder 实例用作其边框,并对在该类上定义的样式做出响应。请参见RectBorder 类。在”光晕”主题中,ComboBox 组件将一个自定义圆角边框用于 ComboBox 的折叠部分。此部分 ComboBox 的颜色只能通过外观进行修改。请参见对 ComboBox 组件使用外观。
1
disabledColor
  组件禁用时的文本颜色。默认值为 0×848384(深灰)。
1
fontFamily
  文本的字体名称。默认值为

1
"_sans"

1
fontStyle
  字体样式:

1
"normal"

1
"italic"

。默认值为 

1
"normal"

1
textAlign
  文本对齐方式:

1
"left"

1
"right"

1
"center"

。默认值为

1
"left"

1
openDuration
  过渡动画的持续时间(以毫秒为单位)。默认值为 250。

    二、改变外观
    1.打开范例主题库,在flash8安装目录\language\Configuration\ComponentFLA\SampleTheme.fla文件。
    2.将主影片剪辑 SampleTheme(“Flash UI Components 2”>“SampleTheme”)从 SampleTheme 库拖到自己的flash文档库中。
      ComboBox 组件是一些组件和类的组合,因此需要其它此类组件和资源中的资源,其中包括 Border 和 ScrollBar 资源。确保拥有所需主题中的所有资源的最简单方法是将该主题的所有资源都拖到库中。然后再用排除法将没用的去掉。
    3.双击要改变的区域,一直双击,直至到元件的矢量图,改变这个元件就可。
    4.如,我们将向下的箭头,改成圆的。
        1)在文档库中,打开 ComboBox 资源,查看在运行时打开和关闭组合框实例的按钮的外观影片剪辑。具体地说,就是在文档库中打开“Themes”>“MMDefault”>“ComboBox Assets”>“States”文件夹。�
        “States”文件夹包含四个影片剪辑:ComboDownArrowDisabled、ComboDownArrowDown、ComboDownArrowOver 和 ComboDownArrowUp。这四个元件都是由其它元件组成的。并且这四个元件都将称为 SymDownArrow 的同一元件用于向下箭头(三角形)。
        2)双击 ComboDownArrowDown 元件编辑它。
您可能需要进行放大(最大至 800%)以便查看该按钮的细节。
        3)双击向下箭头(黑色三角形)编辑它。

注意   请确保选中元件 SymDownArrow,以便只删除影片剪辑中的该形状,而不是影片剪辑元件本身。

SymDownArrow 元件
        4)删除舞台上的所选向下箭头(黑色三角形形状,而不是整个影片剪辑)。�
        5)继续编辑 SymDownArrow,在向下箭头曾经所在的位置绘制一个圆。
           为了使更改更明显一些,考虑绘制亮色(如蓝色)的圆,大小大约为 4 x 4 像素,x 坐标为

1
0

,y 坐标为

1
-1

,这样它就居中了。
编辑应用外观后的具有一个圆形的组合框
      6)选择“控制”>“测试影片”查看应用外观后的复选框:
应用外观后的组合框
      在文档库中,如果选择 ComboDownArrowOver 和 ComboDownArrowUp,您将会看到它们用蓝色的圆代替了黑色三角形,原因是它们也将 SymDownArrow 用于向下箭头元件。
    flash中的组件,很不人性化,要改变外观样式很难,比如ComboBox中的有个颜色我很想改掉,找遍了资料了,也不知道怎么改:(,ComboBox选中的项的下拉列表里,默认的颜色是绿色的,不知道要怎么改,我花了很多时间都没找到方法。

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《flash中组件ComboBox的改变样式和外观

如果你读了我的文章,觉得有帮助: 说明
分类:JS
0条评论

暂时没有评论!

发表评论

*

*