|
?- Y* M( a% }. Q& r( D! r ^ V1 M
$ \! j) ]7 z* A" m/ K- F9 Z
% p) k& e8 ]3 L6 G" @7 I- X Fireworks MX已经推出一段时间了,从此次的升级可以看出,Macromedia的三剑客在WEB程序方面变得越来越强大,Fireworks MX在WEB应用方面的作用也在继续扩展,现在Fireworks MX插件已经是标准的MXP文件,Extention Manage可以直接管理Fireworks MX的插件。: Z5 H' l! v9 d# F
Fireworks MX的插件更多的是依靠JavaScript程序来进行扩充,Fireworks MX中的每个功能基本都可以通过相应的JavascriptAPI来访问到,开发人员可以使用Javascript自己编写复杂的Commands命令来自动完成一些软件所没有提供的功能,或者将一些复杂的步骤封装在一起以方便普通用户的使用,同时也可以扩充软件原本没有的功能。 现在Macromedia支持在Flash MX中开发扩充的插件,结合Flash强大的Action编程功能,开发人员可以做出漂亮的界面,并将其Command命令封装到SWF文件中,最后结合XML文件,封装成为标准的MXP格式文件,这样我们就可以在Fireworks MX中很方便地安装插件了。 其实Fireworks MX已经内置了多个用这种方法封装的命令,举个例子,很多朋友以为新扩充Align命令是原有命令的扩充,其实不然,原有的Align面版仍旧在Modify菜单中,而Window菜单下的Align其实就是新开发的用SWF封装的新的扩充命令。
9 P$ u/ T/ }- L# | 本教程将对一个“透明按钮”的Fireworks MX插件开发实例做详细剖析,并从以下几方面介绍Fireworks MX插件开发的基本方法和流程,大家不妨先下载MacButton.mxp试用体验一下。
' U+ F$ U, h! `2 R" U& y \". f2 [" I2 i2 _" i8 P3 W8 ]
\"
& g8 @$ n- q% J" u. O4 R# ?, x: | \" \" \"
, R% P% o: q9 l; h' ~ \"
5 n) O5 w4 i; h4 w/ Z8 V( f( [& z \" \" \" \" # a5 `3 ?3 c: s& A
\" E6 `- X8 i/ S
\" \" \" 3 b2 t- K1 @0 o0 g. _- {" M) A
\": z4 B- L' ~: |! U1 P+ x4 E
一、? 基础知识
' @3 X+ k& J( t1 { 1、两种可开发的扩充插件3 B( l& f+ i# y: @. P- Z+ j7 M" |9 P
在Fireworks MX中我们根据最终插件所在位置的不同,我们可以将其分为两类。 一类是从Command命令下访问的Command功能插件,这种插件最终安装在/Command/目录下。 另一类是从Windows命令下访问的面板插件,它在Fireworks MX文档中显示为一个标准面板形式,并具有与其他面板同样的属性,例如可以相互组合,折叠、关闭等等,这种插件最终安装在/Command Panels/目录下。 从本质上来说这两类插件没有大的区别,只是存在的位置不同,这里我重点介绍Command插件的开发。# V+ e( q, U1 s! T1 e0 L" P
2、Fireworks MX命令是什么
* U0 L: p# i# |" `1 Q. U" H Fireworks MX的Command命令其实就是一些JavaScript命令的集合,由于几乎所有的Fireworks功能都可以通过Fireworks Javascript API来访问,因此利用程序内部的API函数我们就可以扩展基本的FireworksMX功能。有些人迷惑于Fireworks MX本是一个图形软件引擎,它如何能处理Javascript命令?其实Fireworks MX软件内置了Javascript 1.4解释器。作为流行的Web脚本语言,Javascript拥有众多的使用者,因此将其作为控制Web开发工具描述语言是一个明智的选择。Fireworks MX Javascript API(应用程序编程接口)包括一组特定的带有属性和方法的对象,这些对象的属性和方法可以访问、控制并修改Fireworks MX文档。9 T: G) O& f* B7 }2 J7 K# {
3、须具备的相关知识* ?' Y h7 n5 M* e3 G7 M, C
了解和熟练掌握JavaScript知识是开发FireworksMX插件的基础,除此之外仔细理解Fireworks MX的文档对象模型、API接口,以及Fireworks提供的对象、属性和方法将有助于你少走弯路。
; |% Y* _1 ^& D9 I7 w6 @6 } 4、Flash知识8 f+ J9 _3 P! z
我们已经知道新的插件可以通过SWF文件来制作界面和程序开发,因此有必要了解一些简单的Flash MX使用知识,以便制作基本的界面。此外还需要了解基本的Flash Action知识,因为我们的大多数开发过程是在Flash MX中使用Action开发,了解如何通过Action在两个不同的程序之间传递参数和变量非常重要。6 M9 z4 f$ C$ `. {/ }# ?
二、? 目标和计划$ m2 w$ y9 D0 S/ ~# |4 R6 Q
上面讲了一大堆预备知识,也许一些朋友感到麻烦有些退却了,别急,开发插件虽然比较麻烦,但让我们从小事情开始,不论是一大步,还是一小步,都是改变你自己的的一步,相信你会得到快乐的。在本教程中我将以一个简单的插件为例,介绍开发插件中的基本步骤和需要注意的一些问题。
7 a2 a" a; A4 R! M& H 1、制定你的开发目标$ q, p& a( t1 r: f4 |: {& y" O
首先我们来看一下我们要完成的目标,很多朋友都见过Mac风格的透明按钮,如下图所示:0 p* L8 J& d* \0 n$ a
% ~- d0 s: ]! E+ ^" z3 ^

1 o/ D) x; x% \ % u2 {6 J: g; R: J& A! u
, w" l/ l* |' E# N; ?6 a
这种按钮色彩鲜艳,光感强烈,晶莹剔透,得到许多朋友的喜爱,但每次创建此种按钮都经过繁琐的步骤实在让人生厌,像我这样的懒人也很少去做这种按钮。好在Fireworks MX的强项就是将繁琐的任务简单化,它是一个不知疲倦的程序,让我们花些时间完成这样一个插件,以后就可以偷懒了。
# }+ O& d: G, i" Z0 v; z) H 2、制定开发Command的计划
, F: }+ D( P+ m5 N3 r( X# G9 N 说大一些,开发插件也算是一个系统工程,因此做好前期的准备、筹划和分析至关重要。先让我们来看看需要准备些什么,并制定一下开发的计划和流程。
5 w* | D" I& l: y [ A、分析阶段:首先分析一下创建一个Mac风格的按钮在Fireworks MX中需要哪些操作,我们可以打开Fireworks MX实际创建一个Mac风格的按钮,并分析相应的程序代码,以找出需要的参数。6 K5 J, b @* `5 u
B、其次我们要确定完成此任务需要的几个参数:/ U0 d+ J3 g0 a9 |4 `
1)按钮尺寸:Width(宽),Height(高) 2)按钮位置:Left(左边界),Top(顶边界) 3)圆角数值:Roundness(设定矩形按钮圆角数值) 4)按钮颜色:Color(基本色)$ y' \# W$ U+ s
C、输入框:根据以上的参数,我们需要在Flash MX中创建获取这些参数的输入框。0 W4 d2 U, N( b1 w
- P! R/ ]( j, _: z6 g9 s) v
: \7 s& |1 }& ` ~" a9 S9 h) }

9 P0 l* S, o3 }& {2 ^9 l9 L: x: ~% _& m0 h' p7 Y
9 _4 B3 F2 z, G. d D" l D、其他的相关说明信息:我们需要为此插件添加简单的使用说明和作者信息,因此增加一个Help按钮和界面。如下图所示: M7 h. Z. Y% [. O+ v# Q' W4 C
6 d7 C7 b2 H2 u5 M5 H& t
/ k5 T9 b6 x6 ~9 P, {' `

+ a0 ^0 O* _% D8 c3 ?- e# ^
3 y* Z4 \' V) } R# K7 y% b6 A7 V; B4 A0 p, W; W, t
E、执行和取消操作:上面我们从用户取得的参数最终通过按OK按钮后启动我们的JavaScript程序来创建按钮,也可以按Cancel取消此次操作。9 |, K' y. v! K; b% |9 f0 Q. e
三、? 分析阶段 下面我们就开始根据上面制定的步骤来将我们的任务分解,这里我们先启动Fireworks MX软件,并实际创建一个Mac风格的按钮。
/ L1 f/ R# w2 T* Q" p2 g; H$ v K 首先要说明的是,我们只是创建一个类似Mac风格的按钮,因此也许会有人说,你这个按钮根本不像Mac风格,很多朋友创建此种风格的按钮要经过很多步骤,并且有许多的细节,这样出来的效果才可以逼真。不过我们的重点是在创建插件的过程,而不是插件实现的效果,所以我们要尽量简化在Fireworks MX中的操作步骤。
* Q4 P8 k7 W# @, a+ A! c (一)实例制作分析, J7 O" Q( x& f( K' S5 |
1、? 新近一个文档,使用圆角矩形工具绘制一个圆角矩形。
4 ~1 k9 }2 S* h2 v8 \5 L1 r! Z0 ^6 @7 \! z ^1 {
9 \2 E& [# I" |- j- d- D+ o
! Z8 k/ j5 i6 l
" q9 j$ ?% B' R2 G H; P, B7 p' W
2、? 改变填充的颜色为渐变填充,颜色为浅灰色到白色,方向为从上到下。7 Q' R' B3 @7 N% \
) a9 A6 N7 f+ G' L
% | |- r$ }* b3 V4 t0 A; t( ]/ w% Q# G
8 w Z8 }# W5 b v* q) _9 n 3、? 为矩形添加Inner Shadow阴影,参数设置如图:; m. U7 U2 h0 z7 u8 H q. T. d* ?- v7 E
# _& Q) a# n9 e. o* ]% J
7 q4 b. l& {: e7 C! W* |
& @6 _& s8 E, q% @' h. I5 D& T9 z/ F! @; \2 ]5 ^ s
4、? 绘制第二个小圆角矩形,高度大约为第一个矩形的一半,宽度大约为第一个的90%。2 T; W7 c* f/ h: P+ i# e. c/ ]
5、? 改变第二个矩形的圆角为80,填充类型为黑色到白色的线性渐变,方向为从下到上。( Z# D+ U) Q( A. q! E# y$ z7 g
. ?" }/ }# `7 L$ f ; `9 Y1 W5 o. U4 s/ n9 ]& F0 v
; v1 R/ C3 U- _: [: n: y
8 g9 w) M6 y( Y. b* e5 n5 }& n; X
6、? 在属性面板改变此矩形的混合模式为Screen:
5 D! M5 ?+ g- d% O; U. ]0 l0 w
2 S/ A) r. ^4 z1 ?& |5 X% ^
' ?) c7 Z0 X; g0 y7 f: ^5 z5 S/ Z; y8 B# Z
7 m5 l6 @. T3 q 7、? 这样基本的效果就做好了,你还可以添加文字看看最终的效果。% r: d6 i6 @/ ]) _# B
6 b4 p; k/ h6 Q, W6 |4 w2 a

: w! }! D2 A$ p" U, ^' y
/ \( o4 R- n! q& e6 I( h" { s$ K5 i/ Y( F
(二)Fireworks M程序代码分析
+ j* M5 k; z* [+ Y
! d) f. ]! c9 U+ ~, W( Z# H% I 现在我们打开Fireworks MX的历史面板(History)来看看,在Fireworks MX中历史面板记录了你的所有操作,它具有同类图像处理软件的基本功能,即多步Undo的操作。除此之外History面板的最重要功能还在于可以快速的创建命令,我们可以在History面板中将刚才制作的过程选中,不包括最后的文字输入步骤,如右图。( j0 L5 _ w" l! C( G/ d
然后点击History面板下方的“复制到剪贴版”按钮: j* X; v5 \; u7 k9 F# [. t V
& Q1 b# @) i$ M7 U& \
。
4 j5 P& C5 x2 S! n4 l4 Y0 w' B( W8 S
在文本编辑器中粘贴剪贴版中的内容,我们可以看到以下程序代码:& j, }2 {7 d" p$ x0 N# y
$ i v6 ^, @0 g6 |" t
5 o# k, W0 I6 O' { 4 m4 G) t* A7 y* _$ T
1 Y5 d1 w$ S, H, j 我只显示了代码的前面语句,以便我们可以清楚地看到各个步骤Fireworks MX执行了什么语句。
5 [$ d b6 [4 \5 d) e3 a 首先我们讲解一下fw.getDocumentDOM();,FireworksMX的扩展很大程度上依赖于Document对象模型(DOM),而获得当前文档的DOM就是使用fw.getDocumentDOM()函数,我们可以先不考虑这些深的原理,只要记住,每个执行的动作都需要先用fw.getDocumentDOM()获得文档的DOM,也就是都必须在方法的前面加上fw.getDocumentDOM()。
S, j0 ]. _9 E' l 下面我们将每一步都分解简化,来看看每一步执行的是什么代码。
) ^/ z- p' I4 d" d" g# r! k 1、? 绘制新的矩形,并设置圆角数值:
; K) {. _; T4 E1 bfw.getDocumentDOM().addNewRectanglePrimitive({left:39, top:73, right:237, bottom:122}, 0.29999999999999999);2 M" w% c2 V& \2 V1 F; j" F+ h1 i# k
我们将其中的实际数值用变量来替换,就变为:" |) j9 O s, J7 X5 C
fw.getDocumentDOM().addNewRectanglePrimitive({left:Left, top:Top, right:Right, bottom:Bottom}, Roundess);
8 {' a5 v B7 g5 [. Z3 V# \: ] 2、改变矩形填充类型为渐变填充:
7 O- @/ x" N. n0 h4 i+ T2 Mfw.getDocumentDOM().setFill({ category:\"fc_Linear\", ditherColors:[ \"#000000\", \"#000000\" ], edgeType:\"antialiased\", feather:0, gradient:{ name:\"cn_Custom\", nodes:[ { color:\"#cccccc\", isOpacityNode:false, position:0 }, { color:\"#ffffff\", isOpacityNode:false, position:0.99444442987442017 } ], opacityNodes:[ { color:\"#000000\", isOpacityNode:true, position:0 }, { color:\"#000000\", isOpacityNode:true, position:0.99444442987442017 } ] }, name:\"Linear Smooth\", pattern:null, shape:\"linear\", stampingMode:\"blend opaque\", textureBlend:0, webDitherTransparent:false }); r" t1 ~* j. Q) L
我们将其中的实际数值用变量替换后就变为:) x. h+ N# @# {" j
fw.getDocumentDOM().setFill({ category:'fc_Linear', ditherColors:[ '#000000', '#000000' ], edgeType:'antialiased', feather:0, gradient:{ name:'cn_Custom', nodes:[ { color:'#ffffff', isOpacityNode:false, position:0 }, { color:\"BColor\", isOpacityNode:false, position:1 } ], opacityNodes:[ { color:'#000000', isOpacityNode:true, position:0 }, { color:'#000000', isOpacityNode:true, position:1 } ] }, name:'Linear Smooth', pattern:null, shape:'linear', stampingMode:'blend opaque', textureBlend:0, webDitherTransparent:false });
, g0 H; F% K! w# n' o 3、改变填充方向:
7 c. n; i* a& M& }fw.getDocumentDOM().setFillVector({x:123, y:73}, {x:123, y:123}, {x:173, y:73});" m2 s1 ^# A6 k' `
我们将其中的实际数值用变量替换后就变为:
$ C" h* e+ ^ O2 yfw.getDocumentDOM().setFillVector({x: Left,y: Bottom}, {x: Left, y: Top}, {x:Right, y:Bottom});
, i7 T9 d: P/ Q 4、添加Inner Shadow效果:
6 }. g4 D% T) ~* Rfw.getDocumentDOM().applyEffects({ category:'UNUSED', effects:[ { EffectIsVisible:true, EffectMoaID:\\\"{5600f702-774c-11d3-baad0000861f4d01}\\\", ShadowAngle:315, ShadowBlur:5, ShadowColor:'#000000a6', ShadowDistance:0, ShadowType:0, category:'Shadow and Glow', name:'Inner Shadow' } ], name:'UNUSED' }); |+ }3 C D l2 }, E9 X
5、增加第二个矩形:/ Z5 e# X4 {3 g* \& g! s
fw.getDocumentDOM().addNewRectanglePrimitive({left:43, top:79, right:230, bottom:99}, 0.29999999999999999);) d8 Y7 r9 u* B
将其中的实际数值用变量来替换,变为:0 ~% i! \ w% e% ^2 E, A2 r: ]6 l
fw.getDocumentDOM().addNewRectanglePrimitive({left: SLeft, top:STop, right:SRight, bottom:SBottom},SRound); \");
! v5 ?5 k, N0 l" m 6、改变矩形渐变填充的颜色:因为第二个矩形的填充颜色就是黑色到白色,所以不需要用变量替换。* ]& J5 i+ }" w! D
fw.getDocumentDOM().setFill({ category:'fc_Linear', ditherColors:[ '#000000', '#000000' ], edgeType:'antialiased', feather:0, gradient:{ name:'cn_Custom', nodes:[ { color:'#000000', isOpacityNode:false, position:0 }, { color:'#ffffff', isOpacityNode:false, position:1 } ], opacityNodes:[ { color:'#000000', isOpacityNode:true, position:0 }, { color:'#000000', isOpacityNode:true, position:1 } ] }, name:'Linear Smooth', pattern:null, shape:'linear', stampingMode:'blend opaque', textureBlend:0, webDitherTransparent:false });
( a( X( H- {- v' X 7、? 改变第二个矩形的填充方向:" Y5 g- V1 q* L* B
fw.getDocumentDOM().moveFillVectorHandleBy({x:53, y:2}, \"start\", false, false);
+ r( Y4 z7 W% l+ O* p7 F% j 将其中的实际数值用变量来替换,变为:
% w- D A9 l* Z' K9 gfw.getDocumentDOM().setFillVector({x:SLeft,y:SBottom}, {x:SLeft, y:STop}, {x:SRight, y:SBottom});* e5 p# P) p2 b
8、? 改变第二个矩形的混合模式:/ B$ t& f) k/ b- @9 L
fw.getDocumentDOM().setBlendMode('screen');# x% {/ q( i: b7 B$ [& F2 \# g5 v2 a
四、? 定义运用插件需要的变量参数 从以上的分析我们可以得出我们需要准备的几个变量,也就是需要从用户那里获得的变量。5 j2 O" J" f5 T _
1 P2 X V. ^6 h l$ ?
?
3 l: h* A5 p6 z$ t o
6 H a, E& S$ ]5 ?& x$ ~! U; O 第一个矩形' Z s, q' e0 z8 W! s- w
: ]& ~- M0 t! j 第二个矩形
$ v; y* h( D# R1 i) H2 Y" N0 Y' n0 m z* t% s
矩形宽矩形高矩形左边界位置矩形顶边界位置 矩形右边界位置矩形底边界位置矩形圆角数值按钮基础颜色 l e4 h' f3 A) X" x1 s
WidthHeightLeftTop RightBottomRoundBcolor
" j! Y9 k% J5 K' tSwidthSheightSleftStop SrightSBottom Sround$ A- s6 v( u- c4 J% q' N) i
通过分析,我们可以知道,矩形的右边界就是矩形的左边界与矩形宽的和,也就是:
; f( s( T* N/ X2 A% ~Right=Left+WidthSRight = SLeft+SWidth
+ Z' n4 E1 Q3 B/ q 矩形的底边界就是矩形顶边界和矩形高的和,也就是:& {$ F) y+ E& V5 ]
Botton=Top+Height? SBottom = STop+SHeight7 W' {( ^4 y* ^/ G+ e* N
此外第二个矩形的参数都与第一个矩形相关,并可以通过相应的计算得出,而不需要单独要求用户输入。 我们可以设定第二个矩形的宽度是第一个的90%,也就是:SWidth = Width*0.9 高度是第一个的50%\"60%,也就是:SHeight = Height*0.5 我们设定左边界比第一个矩形偏20%,即:SLeft = Left+(Width/20) 顶边界同样偏20%,即:STop = Top+(Height/20) 第二个矩形的圆角数值我们可以设定为第一个的1.6倍,这个是个人的经验,也可以设定为你觉得合适的数值,即:SRound = Round*1.6
( c9 M5 c0 t- U: J! v" ] 五、? 进入Flash MX进行开发9 W0 q% N3 p( A$ d5 B- D
基本的准备工作做好后,我们就可以启动Flash MX软件进行开发了。由于这部分涉及到一些Flash Action,因此如果你有这方面的基础就更好了,如果不太了解也没关系,我们不会涉及太多的Action。( E& q! l6 j+ e( Z2 Z
(一)界面元素。首先绘制基本的界面,并插入六个需要的文字输入框,如下图:
. g; l. D/ Y) c5 A s) d5 S5 t0 K9 t
: t7 S( | v; w6 c0 ] - @) G% @6 K+ b3 L6 r. @( R
文字输入框其实就是插入一个Input Text,在属性面板进行相应的设置,如下图:
% c0 N0 z/ z( J$ R7 F1 U( |
; A4 R0 L, N8 E' q# _. O d/ {$ `$ K0 S ' }" \* ^3 `2 @- _! u' \) p1 \
Text Style(文字类型):Input Text,允许用户输入自己的数值。 Variable(变量名):给你的变量起一个名称。 Maxinum Characters(最大允许字符数):3位即可。 当前的数字即为此变量的默认值。 5 v& r1 R' ^7 T
' Z% ?9 h; t9 O, J7 Q( i5 u( A (二)为OK按钮添加相应的程序代码
+ k1 W5 s; \9 L, i 1、先制作一个标准的OK按钮,并将其插入主场景。
- U s. O: K. V6 R+ T 2、转到主场景,选取OK按钮,打开Action面板,并转到Expert Mode(专家模式)。由于我们需要在按下OK按钮时,执行我们的程序,因此为此按钮添加以下脚本:
% X5 r1 @+ R; L- k6 Hon (release) { 执行语句 }
$ t( J3 P: \# P$ z) z 3、首先在最开始加入我们的变量定义,代码如下:6 _2 b9 x; h' }
? // 用户输入变量. ? var Width = Number(_root.ButW); ? var Height = Number(_root.ButH); ? var Left = Number(_root.ButL); ? var Top = Number(_root.ButT); ? var Round = Number(_root.ButR/100); ? var BColor = (_root.ButC); ? var Right = Left+Width; ? var Bottom = Top+Height; //第二个矩形的参数 ? var SWidth = Width*0.9; ? var SHeight = Height*0.5; ? var SLeft = Left+(Width/20); ? var STop = Top+(Height/20); ? var SRound = Round*1.6; ? var SRight = SLeft+SWidth; ? var SBottom = STop+SHeight;
2 I# U+ M5 m7 n. ~3 l 4、下面我们需要将Fireworks API调用加入此函数。在Flash MX中,每个API函数都可以被Flash API所调用,它们之间是通过以下方法互相传递的,即使用MMExecute()函数。例如在Fireworks中的以下命令:
4 Y! [7 J6 T8 [) @* e; b8 ofw.getDocumentDOM().addNewRectanglePrimitive({left:Left, top:Top, right:Right, bottom:Bottom}, Roundess);9 B# O6 R4 |+ }: H' i7 _
调入Flash MX中后需要转换为: D; g! R" Q3 [8 x4 M; U, l
MMExecute(\"fw.getDocumentDOM().addNewRectanglePrimitive({left:\"+left+\", top:\"+top+\", right:\"+right+\", bottom:\"+bottom+\"},\"+Round+\");\");
5 [$ B) H$ m1 q, h. Y9 V 需要注意的是,MMExecute取代了以前旧版本的FWJavaScript函数,不过FWJavascript仍旧可以使用,也就是说以下写法同样可以执行:
2 x5 t; t) O4 r3 sFWJavaScript(\"fw.getDocumentDOM().addNewRectanglePrimitive({left:\"+left+\", top:\"+top+\", right:\"+right+\", bottom:\"+bottom+\"},\"+Round+\"); \");
7 r2 i1 v- P5 u0 E# T) j8 [+ w9 r 不过我们推荐使用新的第一种写法。此时加入的脚本如下所示: ? //绘制第一个矩形 ? MMExecute (\"fw.getDocumentDOM().addNewRectanglePrimitive({left:\"+left+\", top:\"+top+\", right:\"+right+\", bottom:\"+bottom+\"},\"+Round+\"); \"); ? //填充第一个矩形渐变色 ? MMExecute (\"fw.getDocumentDOM().setFill({ category:'fc_Linear', ditherColors:[ '#000000', '#000000' ], edgeType:'antialiased', feather:0, gradient:{ name:'cn_Custom', nodes:[ { color:'#ffffff', isOpacityNode:false, position:0 }, { color:'\"+BColor+\"', isOpacityNode:false, position:1 } ], opacityNodes:[ { color:'#000000', isOpacityNode:true, position:0 }, { color:'#000000', isOpacityNode:true, position:1 } ] }, name:'Linear Smooth', pattern:null, shape:'linear', stampingMode:'blend opaque', textureBlend:0, webDitherTransparent:false });\"); ? //设置第一个矩形渐变色方向 ? MMExecute (\"fw.getDocumentDOM().setFillVector({x:\"+Left+\",y:\"+Bottom+\"}, {x:\"+Left+\", y:\"+Top+\"}, {x:\"+Right+\", y:\"+Bottom+\"});\"); ? //添加Inner Shadow效果 ? MMExecute (\"fw.getDocumentDOM().applyEffects({ category:'UNUSED', effects:[ { EffectIsVisible:true, EffectMoaID:\\\"{5600f702-774c-11d3-baad0000861f4d01}\\\", ShadowAngle:315, ShadowBlur:5, ShadowColor:'#000000a6', ShadowDistance:0, ShadowType:0, category:'Shadow and Glow', name:'Inner Shadow' } ], name:'UNUSED' });\"); ? //绘制第二个矩形 ? MMExecute (\"fw.getDocumentDOM().addNewRectanglePrimitive({left:\"+SLeft+\", top:\"+STop+\", right:\"+SRight+\", bottom:\"+SBottom+\"},\"+SRound+\"); \"); ? //填充第二个矩形 ? MMExecute (\"fw.getDocumentDOM().setFill({ category:'fc_Linear', ditherColors:[ '#000000', '#000000' ], edgeType:'antialiased', feather:0, gradient:{ name:'cn_Custom', nodes:[ { color:'#000000', isOpacityNode:false, position:0 }, { color:'#ffffff', isOpacityNode:false, position:1 } ], opacityNodes:[ { color:'#000000', isOpacityNode:true, position:0 }, { color:'#000000', isOpacityNode:true, position:1 } ] }, name:'Linear Smooth', pattern:null, shape:'linear', stampingMode:'blend opaque', textureBlend:0, webDitherTransparent:false });\"); ? //改变第二个矩形的填充方向 ? MMExecute(\"fw.getDocumentDOM().setFillVector({x:\"+SLeft+\",y:\"+SBottom+\"}, {x:\"+SLeft+\", y:\"+STop+\"}, {x:\"+SRight+\", y:\"+SBottom+\"});\"); ? //改变混合模式 ? MMExecute (\"fw.getDocumentDOM().setBlendMode('screen');\");
& v+ U( Y; e m* R; A9 w+ x 5、按钮的执行脚本基本已经输完了,最后我们还需要添加一个结束命令的语句,以便释放相应的变量并返回到用户的当前文档。Flash MX提供了新的MMEndCommand()函数,以取代旧版本的FWEndCommand()函数,当然FWEndCommand()仍旧得到支持。脚本代码如下:
- ^; L0 K( d+ _) }, k) c// End command and release system resources ? MMEndCommand (true, \"\");
% E7 B/ H* q- q1 @9 L (三)为Cancel按钮添加相应的脚本 相对来说Cancel的脚本就很简单了,只需结束当前命令并返回到用户文档即可,代码如下:) f* ]6 N v( b5 c; i7 R7 u
on (release) { // End command and release system resources MMEndCommand (true, \"\");} 最终全部代码如下:
, h; j0 `& ^$ ^5 R fon (release) { // 定义用户输入变量 var Width = Number(_root.ButW); var Height = Number(_root.ButH); var Left = Number(_root.ButL); var Top = Number(_root.ButT); var Round = Number(_root.ButR/100); var BColor = (_root.ButC); var Right = Left+Width; var Bottom = Top+Height; //第二个矩形的参数 var SWidth = Width*0.9; var SHeight = Height*0.5; var SLeft = Left+(Width/20); var STop = Top+(Height/20); var SRound = Round*1.6; var SRight = SLeft+SWidth; var SBottom = STop+SHeight; //绘制矩形 FWJavaScript(\"fw.getDocumentDOM().addNewRectanglePrimitive({left:\"+left+\", top:\"+top+\",right:\"+right+\", bottom:\"+bottom+\"},\"+Round+\"); \"); //填充渐变色 FWJavaScript(\"fw.getDocumentDOM().setFill({ category:'fc_Linear', ditherColors:[ '#000000', '#000000' ], edgeType:'antialiased', feather:0, gradient:{ name:'cn_Custom', nodes:[ { color:'#ffffff', isOpacityNode:false, position:0 }, { color:'\"+BColor+\"', isOpacityNode:false, position:1 } ], opacityNodes:[ { color:'#000000', isOpacityNode:true, position:0 }, { color:'#000000', isOpacityNode:true, position:1 } ] }, name:'Linear Smooth', pattern:null, shape:'linear', stampingMode:'blend opaque', textureBlend:0, webDitherTransparent:false });\");FWJavaScript(\"fw.getDocumentDOM().setFillVector({x:\"+Left+\",y:\"+Bottom+\"}, {x:\"+Left+\", y:\"+Top+\"}, {x:\"+Right+\", y:\"+Bottom+\"});\"); //添加效果 FWJavaScript(\"fw.getDocumentDOM().applyEffects({ category:'UNUSED', effects:[ { EffectIsVisible:true, EffectMoaID:\\\"{5600f702-774c-11d3-baad0000861f4d01}\\\", ShadowAngle:315, ShadowBlur:5, ShadowColor:'#000000a6', ShadowDistance:0, ShadowType:0, category:'Shadow and Glow', name:'Inner Shadow' } ], name:'UNUSED' });\"); //绘制第二个矩形 FWJavaScript(\"fw.getDocumentDOM().addNewRectanglePrimitive({left:\"+SLeft+\", top:\"+STop+\",right:\"+SRight+\", bottom:\"+SBottom+\"},\"+SRound+\"); \"); //填充第二个矩形 FWJavaScript(\"fw.getDocumentDOM().setFill({ category:'fc_Linear', ditherColors:[ '#000000', '#000000' ], edgeType:'antialiased', feather:0, gradient:{ name:'cn_Custom', nodes:[ { color:'#000000', isOpacityNode:false, position:0 }, { color:'#ffffff', isOpacityNode:false, position:1 } ], opacityNodes:[ { color:'#000000', isOpacityNode:true, position:0 }, { color:'#000000', isOpacityNode:true, position:1 } ] }, name:'Linear Smooth', pattern:null, shape:'linear', stampingMode:'blend opaque', textureBlend:0, webDitherTransparent:false });\"); //改变第二个矩形的填充方向FWJavaScript(\"fw.getDocumentDOM().setFillVector({x:\"+SLeft+\",y:\"+SBottom+\"}, {x:\"+SLeft+\", y:\"+STop+\"}, {x:\"+SRight+\", y:\"+SBottom+\"});\"); //改变混合模式 FWJavaScript(\"fw.getDocumentDOM().setBlendMode('screen');\"); // End command and release system resources FWEndCommand(true, \"\");}% e" Y( ~& _. [3 z
六、? 输出到Fireworks MX测试并调试代码。
! M/ ?2 A4 L3 E" d3 G6 f3 v0 X 前面我们做的一切就好像在黑暗中摸索一样,我们其实不知道程序具体的执行起来是什么样的,现在我们可以实际测试一下,看看我们制做的插件是否可以运行。 执行Flash的Expert Movie输出我们制做的插件,将SWF文件保存到你的Fireworks MX程序的/ Configuration/Commands/目录下,相关设置如下所示:
- B! [) ]5 \& P8 k+ r
( P* G) n, l# u* D1 @# F / Y$ l8 w, i& _, v3 A. T) S& Z) _
: n; D8 K$ f3 B1 a( m' L$ |* ?2 [1 ~9 Z! u' g# K- s/ R. @
现在转到Fireworks MX,你会在Commands命令下发现你刚才输出的命令,如果你一直按照我前面介绍的作下来,并且输入正确的话,在Fireworks MX中执行此命令,你会看到正确的结果,一个漂亮的Mac风格按钮。但是,事情往往不像我们想想得这样简单,经常由于这样那样的错误,或者是我们的疏忽,你的脚本中会包含一些错误,但往往你一下子无法确错误发生在哪里,也许编写插件经常令你苦恼的就在这里,幸好Macromedia为我们想到了这点,现在利用一个特殊的函数,我们可以在Fireworks MX中调试我们的脚本代码,以确定程序在哪一步出错误。Fireworks MX中提供了两个调试代码的函数,分别是:fw.enableFlashDebugging() 允许调试代码fw.disableFlashDebugging() 结束代码调试) R% M) Z" u- }( |: H* k
转到Flash MX中,打开我们的代码窗口,在你感觉有问题的代码前后加入这两个语句,例如:+ Y6 f9 s# z; x& ^, \" p/ {
MMExecute (\"fw.enableFlashDebugging();\");MMExecute(\"fw.getDocumentDOM().addNewRectanglePrimitive({left:\"+left+\", top:\"+top+\", right:\"+right+\", bottom:\"+bottom+\"},\"+Round+\"); \");MMExecute (\"fw.disableFlashDebugging();\");
& Z5 ~- b( S( U 重新输出Movie,并转到Fireworks MX中执行,当程序执行到这一句时会将这句的结果显示出来,如下图所示:
9 ` E/ R, m2 }" f
1 }4 O# L0 j& L1 c, x' R
6 r+ [% g( U# D/ x. ] # c1 k& u% D4 e& U \! N
1 c$ ]0 u% K* Y; Q* S: Q 这个窗口显示了程序执行到此步时的结果,点确定后会显示结束调试的窗口,如下图:2 |0 V# p2 L- V; ~7 i+ Z9 m
6 L X8 K2 t$ u; h
/ H* ]3 `. h# R2 b: `+ [4 B
! ?. b5 R3 m8 I) G) R2 W# n2 c5 j9 N
/ g$ E5 g6 S6 Z2 D% s( _2 I1 O 这样我们可以很方便的找出错误在那里,方便我们的开发。
* z6 }2 {* D2 f( x6 ]8 k 七、? 打包你的插件- ]9 }2 C. r. u) h
当一切测试无误,你的插件就做好了。当然,你还需要将它与其他朋友分享。由于新版的Fireworks MX支持标准的MXP插件封装格式,因此这里我再简单介绍一下封装插件的方法。
) g, S& M# Q- J" c 安装完Fireworks MX后,在你的Commands命令下会找到Manage Extensions命令,它可以启动插件管理器。 (一)在Commands命令中出现的插件 封装插件首先需要你准备好两样东西:你的SWF文件,相应的MXI文件。SWF也就是你在Flash MX中开发的插件,MXI文件包含了关于此插件的说明和相关信息,此文件要求为标准的XML格式,主要内容如下:
9 b; F4 z. s2 b6 C; l+ d<Macromedia-extension name=\"MacButton\" version=\"1.0\" type=\"Command\"> ? <!-- List the required/compatible products --> ? <products> <product name=\"Fireworks\" version=\"6\" primary=\"true\" /> ? </products> ? <!-- Describe the author --> ? <author name=\"Mengjue\" /> ? <!-- Describe the extension --> ? <description> ? <![CDATA[This command can easy creative Mac style button.]]> ? </description> ? <!-- Describe where the extension shows in the UI of the product --> ? <ui-Access> ? <![CDATA[To use MacButton V1.0, choose Commands > Bitgenius > MacButton.]]> ? </ui-Access> ? <!-- Describe the files that comprise the extension --> ? <files> <file name=\"MacButton.swf\" destination=\"$Fireworks/configuration/commands/bitgenius/\" /> ? </files> ? <!-- Describe the changes to the configuration --> ? <configuration-changes> ? </configuration-changes></Macromedia-extension> 6 Z; d3 g! T) @2 l* k
注意粗体部分的内容,你可以很容易看懂其中需要你填写的项目:插件名称、开发作者、插件说明、执行路径以及插件的安装目录,将它们修改为你自己希望的内容,并保存为MXI文件。准备好你的SWF和MXI文件,并放在同一个目录下,然后就可以打包了。
6 E0 D1 p. W7 E7 C- H* S% [7 A 转到Fireworks MX,启动Extensions Manage插件管理器。执行File>Package Extension,选择你刚才写好的MXI文件,并为你最终的插件起一个名字,Extension Manage会将你的SWF文件和MXI文件打包为一个单独的MXP文件,非常简单。6 O# Z* r, D( q' F$ P* P9 x. M
用以上方法打包的插件安装后会在Commands命令中出现。 (二)标准面板形式的插件 还有一种插件是标准的面板形式,例如新的Align插件,制作这种插件也很简单,仅仅需要修改MXI文件即可,例如我们将刚才的SWF文件,我们另起一个名字,并新建一个MXI文件,内容修改为以下内容,注意粗体部分的内容:
* h4 y* z! n5 B& u0 H& g<Macromedia-extension name=\"MacButtonChanel\" version=\"1.0\" type=\"Command\"> <!-- List the required/compatible products --> <products> ? <product name=\"Fireworks\" version=\"6\" primary=\"true\" /> </products> <!-- Describe the author --> <author name=\"Mengjue\" /> <!-- Describe the extension --> <description> <![CDATA[This command can easy creative Mac style button.]]> </description> <!-- Describe where the extension shows in the UI of the product --> <ui-Access> <![CDATA[To use MacButton V1.0, choose Window > MacButtonChanel.]]> </ui-Access> <!-- Describe the files that comprise the extension --> <files> ? <file name=\"MacButtonChanel.swf\" destination=\"$Fireworks/configuration/command panels/bitgenius/\" /> </files> <!-- Describe the changes to the configuration --> <configuration-changes> </configuration-changes></Macromedia-extension>/ T! S7 z' z, y5 }6 T5 K3 O
重新打包并安装后,你会在Windows命令下发现新增了一个Bitgenius>MacButtonChanel命令,启动后即为标准的命令面板形势,同样也可以拖动并与其他面板成组。如下图所示:
/ V. P4 s& y- G9 G
4 \1 Y5 J3 u8 ?# @
% g2 S/ S3 j9 i1 z1 B: L - Z* s4 u- c) ?
" Z8 g5 [* o6 V% V x5 u
" e; N% h# I! {3 n4 E/ C 需要注意的是有些插件针对的是选择对象,也就是说你必须先选择一个或多个对象,然后才可以执行此命令,则这种插件最好打包成Command形式,并在插件中添加选择判断,当有选择对象时才执行此命令。而不要打包成面板形式插件。还有就是如果你希望开发的是一个面板形式的插件,一定要注意它的宽度,否则太宽的面板会影响其它面板的布局。% R( O! }1 I$ h) O+ H
此时你就可以把这个MXP文件与其他人分享了,当他们得到此插件文件后,可以在Fireworks MX中启动Extension Manage管理器,然后执行File>Install Extension,选择此MXP文件,插件就自动安装到原先设定的目录中。8 B c( C2 b" g+ X9 f( ?
八、? 结语& ~6 c: _7 q: z! U' m
以上我只是简略介绍了Fireworks MX插件开发的一般步骤,需要说明的是,重要的不仅仅是如何开发,更是开发什么,只有好的想法才能产生好的插件。当然你可以把一些繁琐的操作制作成插件以方便今后的使用。比如针对这个插件,你还可以为它添加以下功能:
1 S$ ~! I/ C+ W9 n* c 1、直接从颜色标中选取色彩的功能。 2、预先添加一个实例文字。 3、在此基础上还可以开发Mac风格的文字插件。具体如何实现,朋友们可以自己思考一下。
; @3 T R$ U$ G- f0 P$ e 由于Fireworks MX包含了大量的对象和方法,如果你希望更多地了解Fireworks MX的插件开发,一定要仔细看看Macromedia的Extending Fireworks MX文件,它是一个PDF版本,你可以在Macromedia网站下载。 本教程参考了Macromedia网站的\"。 本教程所介绍的插件MacButton已被Macromedia官方网站收录,朋友们可直接到Macromedia网站下载,关于MacButton地最新版本请关注我的网站。 |
|