论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Flash教程
Tag:flash cs,flash 8,鼠绘,as,手绘,工具,文字,loading,入门,初学,mc,影片剪辑,声音,mtv,游戏,引导,遮罩,菜单,补间,广告条,时钟,视频教程

定制组件外观

文章类别:Flash | 发表日期:2008-9-21 20:12:21

  FlashMX2004自带的组件比MX漂亮了很多, 但有时候为了让组件的外观和整个页面的样式相统一, 必须重新改变组件的外观, 比如组件标签的字体和颜色, 组件的背景颜色等等. 这个FlashMX自身是做不到的。
改变组件外观有三种方法: Use the Styles API(使用样式API), Apply a theme(应用一个主题名), 和Modify or replace a component''''s skins(修改或替换组皮肤). 这里着重说明第一种方法, Use the Styles API(application programming interface). 我们可以利用Styles API 提供的属性和方法( setStyle()和getStyle())来改变组件的颜色和文本格式.

其中使用Styles又有四种方法:

1.Set styles on a component instance. (对一个组件实例设置样式)
2.Use the _global style declaration that sets styles for all components in a document.(使用全局样式声明对文档的所有组件设置样式)
3.Create custom style declarations and apply them to specific component instances.(创建自定义样式声明并应用到指定的组件实例)
4.Create default class style declarations.(为组件类别创建样式声明)

下面对每一种方法进行详解.
Set styles on a component instance (对一个组件实例设置样式).
从components面板拖个Button 组件到场景(也可以用其它组件),并命名为”myBtn”:


快捷键”F9”打开Action面板,在时间线上写Action:

myBtn.setStyle("themeColor", "0x00CCFF");
myBtn.setStyle("fontFamily", "Verdana");
myBtn.setStyle("fontSize", "10");
myBtn.setStyle("fontWeight", "bold");
myBtn.setStyle("color", "0x990000");
Ctrl+Enter 预览效果,组件样式是不是改变了?
下面是默认的样式和刚才自定义样式的效果对比图:

Use the _global style declaration that sets styles
for all components in a document.
(使用全局样式声明对文档的所有组件设置样式)
FlashMX2004的_global对象的Style属性可以做到这一点:						
从components面板拖n 个组件到场景,这里我用的是Button,CheckBox
和RadioButton 三个组件,也不要给组件命名,直接在时间线上写Action:
_global.style.setStyle("themeColor", "0x00CCFF");
_global.style.setStyle("fontFamily", "Verdana");
_global.style.setStyle("fontSize", "10");
_global.style.setStyle("fontWeight", "bold");
_global.style.setStyle("color", "0x990000");
Ctrl+Enter 预览效果.下面是这三个组件的前后效果对比图:
这种方法使得场景里的所有组件的外观保持一致. 
Create custom style declarations and apply them to
specific component
instances.(创建自定义样式声明并应用到指定的组件实例)

当我们把组件拖到场景里便可以利用CSSStyleDeclaration 对象创建一个样式声


//创建一个CSSStyleDeclaration对象实例
var styleObj = new mx.styles.CSSStyleDeclaration;
//设置styleName属性
styleObj.styleName = "newStyle";
//将样式放到全局样式列表
_global.styles.newStyle = styleObj;
//设置样式属性
styleObj.fontFamily = "Verdana";
styleObj.fontSize = "10";
styleObj.fontWeight = "bold";
styleObj.color = "0x990000";
styleObj.setStyle("themeColor", "0x00CCFF");
//对组件设置样式
CompA.setStyle("styleName", "newStyle");
CompB.setStyle("styleName", "newStyle");
CompC.setStyle("styleName", "newStyle");

下图为三个组件应用样式后的效果:

Create default class style declarations.(为组件类别创建样式声明)
这种方法为场景内某一类型的组件定义样式,只对此类别有效。先写Action:


//为Button类型的组件定义样式
var btn = _global.styles.Button=new mx.styles.CSSStyleDeclaration();
btn.fontFamily = "Verdana";
btn.fontSize = "12";
btn.fontWeight = "bold";
btn.color = "0x000000";
//为CheckBox类型的组件定义样式
var cb = _global.styles.CheckBox=new mx.styles.CSSStyleDeclaration();
cb.fontFamily = "Tahoma";
cb.fontSize = "12";
cb.fontWeight = "bold";
cb.color = "0x990000";
//为RadioButton类型的组件定义样式
var rb = _global.styles.RadioButton=new mx.styles.CSSStyleDeclaration();
rb.fontFamily = "Arial";
rb.fontSize = "12";
rb.fontWeight = "bold";
rb.color = "0x003399";


然后分别拖3个(个数根据需要而定)Button组件,CheckBox组件,RadioButton组件到场景。
预览效果如下图:


用Styles API 定义组件外观的四种方法介绍完了,呵呵,是不是很象用CSS定义HTML表单
[注:以上例子只对Flash V2 Component有效]
通过学习用CSS格式化Flash文本和用样式声明改变组件外观
视频教程列表
文章教程搜索
 
Flash推荐教程
Flash热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058