Fireworks MX制作像素动画

[复制链接]
查看: 322|回复: 0
gggds 发表于 2009-12-27 13:31:07 | 显示全部楼层 |阅读模式
?  众所周知,Fireworks MX是一款非常优秀的GIF格式动画制作软件,但是很多朋友在制作动画的时候除了文字的移动,渐变很少做其他的效果,实在是对Firewrks MX强大功能的极大的浪费。其实只要我们有一些想象力,多在动画形式上下工夫,可以制作出很多与众不同的动画作品。  下面我们就以一个简单的像素动画为例子,看看怎样只使用几种最基本的编辑工具来制作特具特色的像素动画。3 T! F2 l3 w* K+ Z  x

6 [* t, s& P! V( O+ M& K8 {- i% S5 v5 e/ f! E  b
  步骤1:  打开Fireworks MX,使用菜单命令File-New新建一个文件,在弹出的文件属性对话框中设置此文件的大小为宽88像素,高31像素,背景色为透明(如图1)。
! r% E) Q% i, @6 ]
* k: R. Q& R# O7 U5 Q9 e
! \% S7 Q) c. l% z: v% L( a1 z9 F* f图1  步骤2:  在工具栏上选择矩形工具(如图2)7 S$ C: b# f& c, p0 z3 N3 j

1 M: N5 i. u( |1 b2 ^  z1 [5 `+ d' W,并且设置其填充色为深红色,边框色为无(如图3)1 Q. R0 f/ ?5 q! }7 N' a

" m# j  z  {. l" |. J% |,绘制一个矩形。在Properties面板上调整矩形的大小与位置,使其居中对齐(如图4)。% m- v# v( j* I5 U4 q

# f& q9 Y9 C% J" |7 `' V* h7 [& d) q$ y
图4  步骤3:  在Properties面板上的填充选择区域中选择Texture为Grid4,并调整其透明度为50%(如图5)。此时的矩形效果如图所示(如图6)。
5 b0 V( u4 H' X
! _" H+ b6 [% z# A! a. a3 d% a/ u, x, T8 j0 v* X
 
  E7 a$ j# e# Y; R" t9 R- p" E8 L2 e& j4 k
图5  图6  步骤4:  使用圆形工具(如图7)
1 |5 Q$ c! ^. j) j0 b  C
5 ^$ p# j! |+ u0 V以边框色为白色,填充色为无绘制一个小圆,并放置在画面的右下角(如图8)。7 o  H( ^3 M* s4 X' O- N( F( x
) P- k# n1 ~3 w) x8 L- \

7 ?" D: |# l- V+ @图8  使用矩形工具以无边框色、深红为填充色绘制一个小矩形,放置在文件的上端。  步骤5:  在工具栏中选择直线工具,在Properties面板中设置直线的宽度为2,线形为Hard Line。在图形上点一点,并使用同样的方法点出不同的小点,并调整其位置最后形成一个像素小人(如图9)。
& c% l) a; x; {/ Q- I# c/ w: S; f$ w# P
$ g7 M3 S) ^) [4 y$ O
图9  步骤6:  打开Frame and History面板,点击右上角的三角按钮,在弹出的菜单中选择Duplicate Frame复制一个Frame,在弹出的Duplicate Frame对话框中如图进行设置(如图10)。8 W. A1 s8 V' S* L
$ ~+ ~7 H6 W- C) |3 ~' Q  b* I) U
( C( E4 K, h2 M
图10  步骤7:  向右侧移动像素的位置,并改变小人的造型,向左适当移动圆环的位置(如图11)。
' z! O# Y- O9 ~$ j/ }/ |7 G' V" p" r+ {0 s4 t; y

" |1 p0 S( D- K2 d: S( l5 G2 F图11  步骤8:  使用同样的方法复制Frame3、Frame 4、Frame 5、Frame 6,并且改变小人与圆环的位置,最后每一个Frame 上的图形分别如图所示(如图12、13、14、15)。$ b+ X* Q! z8 R" {' P$ G

' ~0 A/ d( w5 N+ b( M: l8 n; g+ v
  z2 e, [. Y6 V1 u2 a- m 
4 R1 F' E. {, ~  f2 p9 \: p8 w8 N! p1 ]7 c# u) R5 p+ h! \: Y
图12  图13
5 L; p! ~5 n  R9 f2 ?8 o5 G) w2 r) J& ]8 k
1 P/ }# H  }; a+ R: o+ s
 
! @- h  u+ e" W) W8 U' F: j" T
- Y4 k. D0 g2 l. A; Y图14  图15  步骤9:  在Frame and History面板上双击Frame 1,将时间间隔调整为25毫秒(如图16),并且用同样的方法调整所有Frame 的时间间隔。
  z# Z' T5 d1 ], @9 h) W4 @! h- I  x0 D
& }" {: y" R9 C  u7 f- }2 j( B
图16  步骤10:  点击“播放“按钮,可以看到整个动画的效果,像素小人飞身跃过滚动的圆环,只要你稍加改变就可以得到更多的不同动画。
3 A( [# z. B/ l7 q: T- U! R! b) }" C- g8 J& T; [, G& A

本版积分规则

精彩图文

Copyright   ©2015-2016  展示网  Powered by©Discuz!  技术支持:凡尚展览     ( 粤ICP备14065977号 )