Fireworks MX制作像素动画

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

0 V  O& E1 ?3 U
( m1 R  r; B( m  步骤1:  打开Fireworks MX,使用菜单命令File-New新建一个文件,在弹出的文件属性对话框中设置此文件的大小为宽88像素,高31像素,背景色为透明(如图1)。5 A3 [# c3 p$ F" _( K

) K6 }1 D; ^& |1 r: |, ]$ ]3 Y$ D9 z1 I0 _5 W  y# g8 _1 C0 ^
图1  步骤2:  在工具栏上选择矩形工具(如图2)
! I& @1 n8 s1 b, s7 U! q
  l' Q4 j( q4 t3 E,并且设置其填充色为深红色,边框色为无(如图3)
0 c$ l7 {: H. V% g7 S- m4 j. f5 h
2 s! ?" K' {+ Q' u5 ^9 d: d9 z* }( h,绘制一个矩形。在Properties面板上调整矩形的大小与位置,使其居中对齐(如图4)。
9 ^$ Q* Y$ Q7 J' ~% P. X6 R7 U9 G4 P+ Z! d% {5 t3 H

5 o- m, s4 A3 ~8 t: b5 M图4  步骤3:  在Properties面板上的填充选择区域中选择Texture为Grid4,并调整其透明度为50%(如图5)。此时的矩形效果如图所示(如图6)。9 P% j9 }5 k/ a7 I
) a/ H8 w5 M6 L# [$ n, ~

' ~% D* n" m& ~; E# z4 a( W. E 
1 v' @4 Y# F& V& d) Z6 g7 J& p% p1 T0 f7 I: B- C
图5  图6  步骤4:  使用圆形工具(如图7)# P2 m$ Z; t, ]" t! Z

4 W0 G" @. X9 ]8 T- b以边框色为白色,填充色为无绘制一个小圆,并放置在画面的右下角(如图8)。* k1 L, Y  g/ C; B: |1 @5 u" Q% Y
" H1 y# \2 x& v. W% r, X
" Z" a, E+ k/ h" ^2 B& f  t
图8  使用矩形工具以无边框色、深红为填充色绘制一个小矩形,放置在文件的上端。  步骤5:  在工具栏中选择直线工具,在Properties面板中设置直线的宽度为2,线形为Hard Line。在图形上点一点,并使用同样的方法点出不同的小点,并调整其位置最后形成一个像素小人(如图9)。, j' C3 O: P) Y/ `" K" o' y
. M0 e5 s. C  L4 d! o8 P

' A: f/ [/ ^2 P3 S9 I9 w4 ~: G, e图9  步骤6:  打开Frame and History面板,点击右上角的三角按钮,在弹出的菜单中选择Duplicate Frame复制一个Frame,在弹出的Duplicate Frame对话框中如图进行设置(如图10)。' [, _  [/ \) b7 Z% [9 B9 ?

/ A3 u' A" P/ v; N: H( x) ^0 \7 N4 x. O  x6 Z+ g  U! a- @
图10  步骤7:  向右侧移动像素的位置,并改变小人的造型,向左适当移动圆环的位置(如图11)。: f7 m* ?6 _: b

9 {, M. N& \3 Y! F6 Y, t* h; y3 }- v' m/ a% R0 b* u* _; g
图11  步骤8:  使用同样的方法复制Frame3、Frame 4、Frame 5、Frame 6,并且改变小人与圆环的位置,最后每一个Frame 上的图形分别如图所示(如图12、13、14、15)。! g; _' g' t# N5 D, v
6 Z; r8 X' i% w3 h

, z3 E0 t2 h" W! @- ` 
1 ]9 T9 R. ?" E7 D* w" C. t; {
. L7 H0 b! N- G- Y2 r图12  图13
: D5 W5 m, K* R, h
- D  v& L$ y7 N1 z
2 Y" q% @5 b: F: w0 E. o% ~ ! D. K( C: k0 \

9 n: M; j6 ]$ U: R" r' A# e# R图14  图15  步骤9:  在Frame and History面板上双击Frame 1,将时间间隔调整为25毫秒(如图16),并且用同样的方法调整所有Frame 的时间间隔。+ d: K7 `! _) F+ S1 t- }3 j9 r  `
% _+ `1 E3 Q/ {+ ]% ^
" {$ |0 W& h/ R0 s' I$ t5 s
图16  步骤10:  点击“播放“按钮,可以看到整个动画的效果,像素小人飞身跃过滚动的圆环,只要你稍加改变就可以得到更多的不同动画。1 c/ ?# `/ w% u) o: N; ^

, g- S7 w9 Q  X/ {" Z3 b

本版积分规则

精彩图文

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