Flash：从油画到照片

图由心生

版主

Rank: 7 Rank: 7 Rank: 7

1^# 大中小发表于 2007-6-23 16:09 只看该作者

Flash：从油画到照片

我们来假设你在看到这篇教程之前，已经对Flash的基础动画有了一定程度的了解，这样我们就不用花大段篇幅来解释那些最基本的原理了。
, a% C7 b% I% {7 s4 G% ]

) i7 `2 X* s# I8 q+ a) q- Q
  y1 r8 I: g2 [1 ^( R( t
　　就像你已经知道的，Flash是一个基于矢量的程序。在Flash中，处理位图（包括bitmap, jpeg, gif, png格式的图像）最大的麻烦就在于，我们无法像操作矢量图形那样，熟练的操作位图。比如说，输入一幅位图图像，用它来做最简单的形状变化动画，就连这也是不可以的，更别说其它的了。如果你试着把图片拉伸，位图的特性会使图像产生像素化，图像品质会被降低。这些简单的操作对矢量图像而言自然是不在话下，所以，我们怎样才能将位图图像转化为矢量图像呢？这个问题我们可以交给Flash的“转化位图为矢量图”（trace bitmap）功能来解决。

5 E" [2 e" w5 d( d/ x- G- J) v- Q
0 F$ Y; s) p1 `) m! q; P  b  k
9 G- _. y+ ?8 I8 \5 X
  @* G8 s. |- S% r9 z( X
　　在这篇教程中我们详细解释了转化位图为矢量图这个功能，而且用它来创造从从一幅油画到照片的变形效果。% a& e. b$ l1 M8 x. S

0 ^, R) f. s  d$ G1 S5 }% H3 w

　　转化位图1 F' G% v7 D1 @5 K4 M. I- w0 h8 l
$ |9 D" Z4 R% F; e8 `% D. P% Q( `
9 K( \3 ?5 j# H

: s4 p6 h6 L& l- F2 A4 ^( i# I
5 L2 v4 M. ^' k% v7 o
　　要想把一副位图转化为矢量图像，只需将一个图片的实例拖入主场景中，选择它，再选择修改>转换位图为矢量图（Modify > Trace Bitmap）命令。转换位图的功能是检查位图图像的颜色数量，颜色值相近的区域，被定义为近似形状的矢量形状，来替换位图。这里，你需要知道的很重要的一点是，用于代替的矢量形状仅仅是近似，而非完全相同。我们可以用转换位图对话框的一些选项来控制转换的精细程度。（图01）7 [+ ?; s9 H( B  X1 _
1 E: t1 C( {8 D- L$ T

  图01
) }* ~9 ]# d9 ~

　　颜色阈值（Color Threshold）：范围从1到500。如果将两个像素进行比较，它们颜色值的差低于设定的颜色阈值，那么这两个像素的颜色被认为是相同的。所以，如果加大了阈值，那么转换来的矢量图的颜色就会减少。: l% A. `* ^1 y! ^2 d& D

6 [, [# d# C8 ]: u

　　最小区域（Minimum Area）：值介于1和1000之间。用于设定指定像素颜色时需要考虑的周围像素的数量，更确切的说，最小区域是跟踪位图时平均不同的颜色值。

　　曲线拟和（Curve Fit）：下拉列表的选项从像素到非常平滑，决定了绘制轮廓和区域的贴合程度。# v2 E( n# T7 ~
% K  [! F, F- c' H: Q

( v* v- s  P% e- w6 [; e

　　角阈值（Corner Threshold）：下拉列表选项从较多转角到较少转角，它决定了保留锐利边缘还是进行平滑处理。
( b1 G* W% C" Y# r$ p6 w
. v' ?  t, q  r
. k/ R0 g( }& n9 B/ n+ u

3 E$ \3 ^) o' x9 |$ s0 T7 Y& l( b7 @
　　还有一点需要注意：如果你增加了转换的精细度，那么形成的矢量图像的复杂性也会随之增加。一般来说，将位图转换为矢量图像可以减小文件大小，但如果包含复杂形状和太多的颜色，转换后的矢量图像的大小反而会比原来的位图文件还要大。从另一方面来说，对复杂的矢量对象而言，即使是最简单的操作，都会耗费大量的系统资源。% a; O  V9 c3 @/ K6 a+ Q  q' d

$ B1 J, t5 w. K% C2 M+ a7 h

　　对于要转换为矢量图形的位图来说，往往是连续色调的图像转换的效果较为理想，特别是那些logo图像。比如说，我们想改变下图例子中这个logo的形状。首先，导入位图图像，然后用不同的设置将图像“矢量化”。仔细观察，你会发现，例子中的第一个图形不太精确，在一些地方看起来有些平板。第三个图形是用Flash中的选取工具稍微改变了一下形状。在这里，我们可以随心所欲的用绘图工具来改变矢量图形的形状。（图02）$ F: v% ^$ @% X, {; P
" W/ p! E& C) G8 N* K

  图02. c' `* E, y, z

% ?( i" v5 W3 a8 l( Z5 b
　　效果
& Q6 [& e) z. h% Y3 M; {; c
, A6 y& a' C6 X

$ R6 u: L1 Z- w  @9 z7 M
8 |& c3 ^/ D4 A, P
　　当你对导入的图片应用将位图转换为矢量图命令时，一些有趣的变化发生了。一幅典型的照片不像那些单色的logo，它包含很多不同的颜色区域。在跟踪位图之后，照片会被许多颜色块表现出来。随着转换设置的不同，这些块看起来会像是用画笔涂抹在画布上一样。我们的目的，就是创建从油画到照片之间的变形效果。
- k7 ?+ S2 K8 U! K

! h: m- q2 w: j( _* r: X+ C" e' h
# j% ~- z( s0 `! h' y
, n! N8 n  ]( S; c0 f* U
　　过程

+ J3 l' r6 h3 a+ Y

( G- G  w/ j) T8 @1 `% c
% m/ m. W9 Q2 t" D$ J
　　找到一幅你喜欢的照片，如果需要，在导入Flash之前对之调整大小。在将调整大小后的照片导入之前，尽量减少Flash中的文件进程。
3 G3 R0 U2 j. g4 F% x0 B% C
3 _1 ?1 u8 R) T
2 k! v3 K" U' D1 O$ z  C) a
& Z8 u5 @' e2 n( r" c4 S3 u
+ ^" t1 C& ]- p  L) G9 f/ H& S
　　新建一个影片。建立两个层，将顶部的层命名为photo，底部的命名为paint（图03）。我们先从油画效果这部分开始。选择文件>导入到库命令，选择照片所在的文件路径，将其导入到库中。从库中把图片拖到paint层的第一帧上。将文档大小设为320×240像素（导入的位图大小），按下Ctrl K，使用对齐工具，将图片对齐到舞台的中心。现在，确定图片被选择，运行将位图转换为矢量图命令。每张图片的情况不同，所以每次你要根据图片采用不同的设置。有了undo命令，你可以放心的试验不同的数值，直到图像呈现出你满意的效果。对我们这副图像而言，我们采用了默认的设置。当图像转换为矢量格式之后，你可以使用绘图工具修改个别区域。这个油画效果的部分就作为动画的背景。（图04）$ E* V2 `9 w5 `; Q2 q' g1 n
, F  Q1 {/ ~: f8 f
3 [. f% w  m# G: g7 t* X% f

图03
: Y, ~) D- x' \9 j/ m1 b$ j9 ~

1 t4 d2 K; g& ?$ f- v8 G% i

图04
% }" M& y+ r2 H7 F5 H& @8 C
, ?$ ~ ~/ o- `( o- R* g% C1 l; ]
　　现在我们来创建照片效果。新建一个图形元件，命名为photo。从库中将位图拖入到图形元件编辑窗口中，用对齐工具对齐到中心。现在，按Ctrl E，完成对元件的编辑，回到主场景的编辑窗口中。从库中将图形元件photo拖到photo层的第一帧中，同样用对齐工具居中对齐。这个图形元件将作为动画的前景。对位图是无法直接改变透明度的，所以我们需要将位图图片转换为图形元件。（图05）

, O% ]. x7 |# v1 r7 |
图05, J6 Z/ X5 Y7 k8 R, t2 r
0 f: G; X& ^, f* T
7 f$ ]1 d+ n. p2 ^, s' r
　　准备工作完成之后，我们就可以着手制作动画了。油画背景的透明度保持不变。我们打算通过控制叠放在油画上面，photo元件的透明度来控制“变形”效果。选择photo元件，在效果面板中将其不透明度设为0％，或是一个很小的值（图06）。0 X: E1 R+ t; h( |& M/ n
1 K1 k! E% D" t1 Z, H8 I) N) w( C

  图06
2 h; C2 |+ \4 p$ \6 n
) J0 r- O* B! G$ t( I) y( ~' G9 ~
　　现在在时间轴上，间隔若干帧创建一个关键帧，将这一帧的不透明度设为100％，间隔越大，画面的过渡就越细致。在透明度为0％（或很低）和100％的两帧之间创建补间动画。这样，照片会从无到有慢慢显示出来。在paint层中，在上一层插入关键帧的同一帧处，插入一个空白关键帧。这样，动画中就不会出现白色的空白了。动画从一幅油画渐渐过渡到真实的照片。同样道理，将第一帧的不透明度设为100％，而将最后一帧的不透明度设为0％，这样，动画将从照片过渡到油画效果。
% d0 r: ]3 Y/ W, l# d& X0 T2 W

; y) r0 [* W4 B4 H9 H4 p
& b7 U8 A# o! x9 ^# G4 Z# J

　　其它需要考虑的$ f2 R( h* t" E: h8 W- O3 _' i

' a, q* G7 ~  X- _

# I! l" K8 S& {6 r7 ]* g
　　如果你觉得动画的速度过慢或有延迟的现象，就试着降低转换位图时的精细度，如果你觉得不能在画面质量和大小之间找到适当的平衡，就在转换位图之后接取屏幕图像，优化之后存储为位图，用它代替我们矢量化的位图来作为动画的背景。用捕屏图像代替跟踪位图的另一个原因是，这样可以减小影片大小。又可能是因为“矢量化的图像”太复杂了，与普通的位图相比，用掉了更多的空间。在这个例子中，如果用捕屏图像的话，可以使文件尺寸稍微小上一点。还记得我们的例子变化是多么细微吗？如果将动画速度提高，并用播放一次代替循环，那么我们可以使动画更容易观察。要知道，对每个不同的影片来说，不同的设置会带来不同的效果，要通过试验才知道哪种更合适。

: Z7 b; F1 v9 }
8 R) Q9 \# |, R- z0 y/ k; |& n4 j( w+ `
　　最后是关于变形的提示。其实这只是一种效果。从假到真的过程制造了戏剧性的变化而又不会太过火。你可以把它看作是一个制作Flash影片特效的“工具”，但不要把自己局限在这样的效果中，你可以做的还多着呢！7 R3 g2 `* q5 w" e9 ^" ?

  |% [( ?0 P, E* n* |1 Z0 t2 {
( F0 j! J, b' t& K
+ G6 T9 W+ g7 G$ P) Z' s1 n$ _1 n
　　其实，把位图转换为矢量图的功能并不止你看到的这些。接下来，我们将继续探索跟踪位图的其它作用。" h- v9 T) i1 A; P# F; w

　　艺术手法
& Q% y" t+ c; T1 S

　　眼下一种非常流行的效果就是双色调的像剪影一样的图像。看起来虽然简单，但同样可以增加艺术气息。egomedia.com 就是这种效果的一个很好的例子。! r$ O; d7 J3 j% |; n

! q  {0 `- x3 Z
5 P. {2 Z/ C. A! x4 q0 u/ H$ {4 x
. y+ V* b& u" _* n! s
　　在从油画到照片的效果中，我们采用了较低的颜色阈值，以尽可能的保留颜色数量。而在这种剪影效果中，我们的目的却是要消除图像的绝大部分细节，所以我们将颜色阈值设为一个较高的值。下面的这个例子中，颜色阈值被设为400。也许你还需要增加最小区域的值来得到一种更好的平均颜色，例如这个例子中我们将最小区域设为1000像素。你可以以这些参数为起点，根据不同的图片继续轻微调整，直到最终结果满意为止。最后一步是简单的改变图像的颜色，按你的需要改变。比如在这里，我们用一种亮度很高的颜色作为高光部分，而用一种较暗的颜色作为阴影。（图07）

2 t( t; E/ @0 w: H4 L

- O" h% R, o- |$ Z$ S* Z: p
图07

　　数字灵感

' M6 ?& M3 A" }
1 j, H" |; W0 w; r

　　将位图转换为矢量图的一个基础前提是，有些东西是无法预知的。也就是说，转换的结果并不完全像我们想象中的那样。这里，我们拿一张随机的抽象图片作为例子，将它转换为矢量图，来看看图中的哪些部分可以“幸免于难”，这是一种很自然的选择方法。你可以用设置控制希望保持的细节数量。在这个例子中，我们将颜色与阈值设为100，最小区域为10像素，曲线拟合为平滑。结果看起来像是一些杂乱无章的斑块，但我却认为它很有特色！如果你安装了Adobe Illustrator，可以用文件>输入图像命令，把它导入到Illustrator中，用.ai的格式保存起来。+ |6 Q: K' W! s& H4 P' `9 P

: ?- t5 ~# j% }8 C

4 Z3 ~0 w1 m6 W- v# s9 u
9 w; D0 Z5 |9 e7 y# @3 [
　　在Illustrator中，将图像拉伸，找出明显的形状。你也许会奇怪，那有什么用？嗯，回忆一下，在你以前的创作过程中，有没有被有关形状的问题困住过？是否有绞尽脑汁的企图挖出一个完美的形状来？用这个简单的方法，我们就能轻易的得到有用的形状，或是从中得到创作的灵感。你知道，灵感总是可遇不可求的，正如位图转换为矢量图时的随机性一样。你也可以抛开Illustrator，用对你来说更轻松的方法改变形状。让我们再次感谢Steve在他的网站上为我们提供的灵感。（图08）+ `: ]! R! U2 i0 A5 F, g

图08

3 t3 _- s# r( y. x8 s' ~0 S( E, x
　　清除细节/ g' P" l4 }& Y8 t

: r2 f' U6 M, o+ x' _7 @
& R1 s5 G) C1 X1 c$ j

　　有时候，我们要从图片上清除一些不需要的细节。就像上一个例子中，我们可以通过设置一个较高的颜色阈值，轻易的达到目的。有不少很好的理由使你想这么做。也许你需要为什么东西设置背景，但图像上的细节会使浏览者的注意力被吸引到背景而不是真正的重点上。转换位图可以消除背景图像中的细节，让你把更多的注意力集中在图像的主要部分。（图09）5 [ S6 t* ]) \6 T* Q) u Y
* s5 Q! `% m9 e, ~$ g, C

% o) p% p/ P. S7 `' [9 l

图09: \% t3 F6 j; y1 _3 z3 L2 K: I7 L
/ ^9 [/ B$ r. M) X! N4 f: D3 s$ L
" Y4 s3 R5 V% E& ]" e
　　将位图转换为矢量图的用法还在不断地为人发现。可以肯定的一点是，这是一个非常有用的工具，仅仅改变设置值，就可以被用于各种途径。我有意忽略了它在Flash环境中的直接用法，相信你可以把它结合入你的Flash影片中。要知道，跟踪位图技术仅仅是Flash技术种种变化之一，你可以把形成的矢量图输入到Illustrator中，或是在Photoshop中还原到位图形式，那就看你的需要了。

点击图标进入精品网摘收藏欢迎大家加入网络收藏夹

TOP

‹‹ 上一主题 | 下一主题 ››