设置 Macromedia Flash 组件的外观[来自MM官方]

MM官方的页面实在太难打开了,特收藏

设置 Macromedia Flash 组件的外观

一文如下:

自从 Macromedia Flash MX 引入了组件之后,在影片中添加复杂功能模块已经变得非常容易。和以前费劲地创建自定义按钮、滚动条和列表框不同的是,现在我们只需要轻轻一拖就可以快速将它们添加到自己的应用程序中。

但是问题也随之而来。即便组件具有非常清晰的外观和感觉,但是它们的默认设计样式可能会和您的应用程序的主题风格不太配套。而在应用程序的界面设计中保持风格一致往往是非常关键的,因为它可以帮助最终用户和应用程序顺利产生交互。要解决这一问题,可以修改组件的外观样式。

以下我们将具体讲述组件的外观和样式定义。所谓组件的外观定义,指的是通过修改组件的界面源图形改变组件的外观。而样式定义则是指通过组件的 API 属性和方法改变组件的显示结果。本文将重点讨论使用样式改变 Macromedia Flash MX 组件的外观和感觉。

理解组件的样式

本文所讨论的三项技巧都可以影响 Macromedia Flash MX 组件的样式属性。样式的最基本形式无非是小块形状的颜色属性,而组件就是由这些小块形状构成的。通过修改每个小块形状的颜色,我们就可以改变整个组件的外观和感觉,这样实际上就是改变了组件的样式。

有两种修改组件外观的方法不在本文讨论的重点。一种是直接在舞台上替换和修改组件的初始源图形。该方法比改变组件的样式还要稍微复杂一些,我将另文说明。但是,如果您对此非常感兴趣,请参阅 Flash “帮助”菜单 >“使用 Flash”>“使用组件”>“自定义组件外观”。

另外一种修改组件外观的方法是添加新的外观元素。该方法需要创建图形元素,然后将该元素注册到组件。当创建自定义组件时,该技巧非常重要,但同时要求用户对组件的结构有很好的理解。

组件基础

在开始讨论如何改变组件外观之前,请允许我先来介绍一些背景知识,看看组件的外观是如何形成的。在我们开始研究组件 API 之前,了解这一点非常重要,这将有利于了解我们即将开始的操作。

一个组件是由多个部件构成的。它是一个脚本和图形的集合,这些脚本和图形按特定的方式互相挂钩。从现在开始我们将重点研究构成组件外观的影片剪辑。

当我们将某个组件拖动到舞台上时,在 Flash 的“库”面板中将创建 Flash UI Components 文件夹。在该文件夹中又包含了一些文件夹,其中一个文件夹就是 Component Skins。在该文件夹中包含了所有的组件外观影片剪辑,如图 1 所示。


图1 在 Macromedia Flash“库”面板中的 Component Skins 文件夹

修改这些文件夹中的影片剪辑就可以影响组件的外观。

如果我们使用组件 API,则该 API 将调用方法修改这些影片剪辑的颜色对象。这样,我们就不必在每次需要改变组件外观时都去修改每个影片剪辑。应该说这种方法更加轻松。

注意:在使用组件 API 自定义组件之后,我们还可以轻松还原组件的默认外观;而在直接修改了 Flash 库中的影片剪辑之后,如果因为修改失误需要还原组件的默认外观,则只能使用 Flash UI Components 窗口中的默认组件替换已经修改的组件。因此,如果出现这种情况,我们只能说:在直接修改组件时小心一点。

接下来,我们将讨论如何使用 setStyleProperty 来修改组件的外观。

样式修改初步:setStyleProperty

我们即将谈论的样式修改的第一个途径是修改组件的个别样式属性。组件的外观被分解为若干简单元素。例如,按钮组件就有 6 个可以修改的基本外观元素。它们是:text (文本) 、face (正面) 、shadow (阴影) 、darkshadow (暗面阴影) 、highlight (突出显示) 和 highlight3D (三维突出效果) 等。如果我们要修改按钮正面的颜色,则可以使用以下代码:

ComponentName.setStyleProperty("face", 0x006699);

其中,ComponentName 就是组件的实例名,“face” 参数可以告知 setStyleProperty() 要修改的元素属性,0x006699 则是我们需要修改的按钮正面的十六进制颜色值,该颜色是 Macromedia 徽标所使用的深蓝色。如果我们需要修改按钮文本的颜色或突出显示的颜色,则可以使用以下相似语句:

ComponentName.setStyleProperty("textColor", 0xD0D0D0);
ComponentName.setStyleProperty("highlight", 0x0099BB);

您可能会说,这种方法对于修改一个或两个组件的若干属性来说,真是太棒了。但是,如果要修改多个组件的所有属性,则该方法将立即变得烦琐而枯燥。按照这种方法,每个组件需要添加 5~15 行代码。如果以后您需要修改文本的颜色,则又要修改每个组件的代码。为了帮助解决这一问题,我们可以使用全局样式。

使用全局样式:globalStyleFormat

globalStyleFormat 属性是一个全局对象。它所定义的样式将被应用于 Flash 应用程序中的所有组件。当您设计了一个风格一致的主题样式并希望应用于程序中的所有组件时,使用 globalStyleFormat 是一个理想的方法。

使用 globalStyleFormat 的首要步骤是为应用程序定义样式元素。该操作和 setStyleProperty 同,但是这回调用的是组件的方法,修改的 globalStyleFormat 的属性。

例如,我们可以为所有组件的箭头、滚动槽、阴影和突出显示等元素创建外观效果。如图 2 所示:


图2 自定义组件

使用以下动作脚本就可以定义上图中的外观元素:

globalStyleFormat.textColor = 0xD0D0D0;
globalStyleFormat.arrow = 0xD0D0D0;
globalStyleFormat.face = 0x006699;
globalStyleFormat.shadow = 0x003366;
globalStyleFormat.darkshadow = 0x000033;
globalStyleFormat.highlight = 0x0099BB;
globalStyleFormat.highlight3D = 0x00BBEE;
globalStyleFormat.scrollTrack = 0x003366;
globalStyleFormat.background = 0x006699;

在定义外观元素之后,我们还需要将新的样式应用于所有组件。其语法如下:

globalStyleFormat.applyChanges();

该方法将立即更新所有的当前组件。如果在当前应用程序中又出现了一个新组件,则该组件将自动应用 globalStyleFormat。在绝大多数情况下,globalStyleFormat 都是在应用程序的第一帧中定义的。即使在这种情况下,修改属性之后仍然需要使用 applyChanges() 方法应用所作修改。

在某些项目中,您可能需要使每个组件都具有不同的样式。在这种情况下,使用全局样式是不可取的,因为它会应用于所有的组件。而使用 setStyleProperty 方法又需要编写太多烦琐的脚本。幸好 Macromedia Flash MX 的开发工程师们考虑到这种情况,专门创建了 FStyleFormat 来解决这种问题。

左右逢源︰FStyleFormat

FStyleFormat 对象是在 Macromedia Flash MX 中产生的。这种新对象类型允许用户定义一种样式,然后单独应用于需要它的组件。该对象和 globalStyleFormat 一样,只需要定义一次,所不同的是全局样式会自动应用于应用程序中的每个组件,而 FStyleFormat 则可以由用户决定哪个组件应用该样式。

FStyleFormat 既具有 setStyleProperty 方法的灵活性,又像 globalStyleFormat 那样运用简便。FStyleFormat 允许我们为每个组件类型创建一种外观样式,给最终用户提供多种样式以便他们选择。使用 FStyleFormat 还可以突出显示某个特定组件,并且在需要时改变它的样式。

使用 FStyleFormat 的第一个步骤是创建一个新对象。其语法和创建其他新对象的方式是一样的:

myStyle = new FStyleFormat();

在创建样式对象之后,就可以为该样式对象设置属性了:

myStyle.arrow = 0xD0D0D0;
myStyle.shadow = 0x000033;
myStyle.highlight = 0x0099BB;
myStyle.scrollTrack = 0x003366;

现在我们已经有了一个包含属性的样式,接下来需要做的是决定哪个组件应用该样式。要实现这一目标,我们可以使用 addListener() 方法。方法。该方法可以将 FStyleFormat 对象应用于组件。要使用 addListener() 方法,必须提供组件的实例名作为参数。

例如,如果在舞台上有 3 个组件,其实例名分别为 myListBoxmyComboBoxmyButton,则可以使用以下语句为它们注册 FStyleFormat 样式:

myStyle.addListener(myListBox, myComboBox, myButton);

这些组件在注册 FStyleFormat 对象之后,将被应用样式属性。如果要给某个组件删除已经应用的样式,则可以使用 removeListener() 方法。该方法的用法和 addListener() 方法完全一样:

myStyle.removeListener(myListBox);

使用 removeListener() 方法需要注意的一点是:一次只能作用于一个组件。例如,如果需要从 FStyleFormat 对象上删除 4 个注册组件,则需要使用 removeListener() 方法 4 次。

注意:添加注册的组件、删除注册的组件或改变 FStyleFormat 对象的属性都必须使用 applyChanges() 方法确认,以使组件能反映这些变化:

myStyle.applyChanges();

接下来,我们将综合使用以上所讲的多种方法创建自定义样式。

综述:组合应用自定义组件样式的技巧

现在我们已经基本理解了设置组件样式的三种方法。如果我们将它们混合在一起使用,结果会如何呢?原则上我们建议在应用程序中只使用其中的一种方法,但是,如果您真的非组合使用多种方法设置样式不可,那么您还是需要对在 Macromedia Flash 中可能产生的结果有所了解。

让我们就从 setStyleProperties() 方法开始吧。如果您已经具有一个全局样式或 FStyle 对象,那么,当该方法被应用时,它可以覆盖它们的样式定义。但是,如果全局样式或 FStyle 对象被重新应用,则它们又将覆盖 setStyleProperty() 方法的值。

接下来说一说全局样式。如果 FStyle 样式和 setStyleProperty() 设置在全局样式建立之后应用,则它们将覆盖全局属性。如果全局样式在程序中被再次应用,则它可以覆盖 setStyleProperty() 设置,但是不能覆盖 FStyle 对象。如果您要将全局样式再次应用于已经设置了 FStyle 对象的组件,则必须先使用 removeListener() 方法从 FStyle 对象的注册列表中删除该组件。

最后要说的是 FStyle 对象。当 FStyle 对象应用于组件时,它可以覆盖任何其他样式。全局样式无法覆盖 FStyle 对象,但是 setStyleProperty() 方法则可以覆盖 FStyle 对象的单个元素。

修改所有组件的样式

如果您想知道某个组件的哪些样式元素可以访问,则可以查看“库”面板中的Flash UI Components > Component Skins 文件夹和 Asset 文件夹中的 Global Skins 和“F+组件名” (例如,FScrollBar) Skins 文件夹。


图3 Macromedia Flash MX“库”面板中的 Component Skins Assets 文件夹

在“库”面板中,您将发现组成外观元素每个部分的影片剪辑。如果您双击其中某个影片剪辑,就可以在其第 1 帧看到动作脚本。这些脚本可以帮助我们了解每个元素是如何被命名和注册的。引号中的名称告诉我们如何才能访问每个样式元素。


图4 在构成组件的影片剪辑中发现的动作脚本代码

注意:除非您要改变组件的功能或外观,否则不要轻易改动这些代码!

现在您已经掌握了有关组件样式设置的基础知识,那么,改变组件的外观也就变得非常容易了。Macromedia Flash MX 所有的用户界面组件都有样式 API,因此,您可以使用在本教程中提到的技巧轻松修改它们。

關於作者

James Polanco 在 Macromedia 公司工作了三年半以上,目前是技术支持团队的负责人,也是专家服务祖的成员。James 擅长并负责 Macromedia Flash、Macromedia Breeze、Director、Flash Remoting、ColdFusion、Dreamweaver、Macromedia Flash Communication Server 和 Authorware 等产品的技术支持。在效力于 Macromedia 公司之前,James 有三年多时间曾经在计算机化培训和教育网站做开发并且获奖。

你可能感兴趣的:(Flash)