Flash鼠绘教程：绘制金属立体相框效果

<STRONG><FONT size=5>Flash鼠绘教程：绘制金属立体相框效果</FONT></STRONG>
: ?/ y4 ~/ g4 d7 I<TABLE height=101 width="98%" align=center border=0>
<TBODY>
' O) T! e  c3 \<TR>
5 K; ^5 o$ H, c' s8 {/ `<TD height=34>
! Z: K9 n0 T! M<P align=center>浏览字号:【<A href="javascript:doZoom(16)"><FONT color=#0000ff>大</FONT></A> <A href="javascript:doZoom(14)"><FONT color=#0000ff>中</FONT></A> <A href="javascript:doZoom(12)"><FONT color=#0000ff>小</FONT></A>】 【<A href="javascript:window.print()"><FONT color=#0000ff>打印</FONT></A>】 【<A href="javascript:window.close()"><FONT color=#0000ff>关闭窗口</FONT></A>】</P>
<TR bgColor=#ffffff>
1 p# K- B- r0 R0 Y$ F<TD style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px">
<DIV id=zoom style="FONT-SIZE: 14px; LINE-HEIGHT: 150%"><!--信息内容-->
<CENTER>
<SCRIPT type=text/javascript><!--
google_ad_client = "pub-3089989272988309";
% _# G1 p) `3 Q2 x/* 336x280, 创建于 08-10-9 */
! ^4 Z3 U1 F$ @& Cgoogle_ad_slot = "7545507005";
$ j7 q: Z" [' G4 A# B; |3 q3 h( ngoogle_ad_width = 336;
% ?' a5 V' L2 Y' T# v/ D7 lgoogle_ad_height = 280;
( y9 m- y- h; U//-->
8 ]" Q' K4 W3 F: Y# G) U+ s+ y+ Q</SCRIPT>

9 @9 u4 Q: K4 q& \6 }<SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript>
</SCRIPT>
- g8 l* ^) @  A+ n5 T$ C  U( m! x
<SCRIPT>window.google_render_ad();</SCRIPT>
* Y8 ~# P# {! n' N2 A9 d( R! D<INS style="BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: medium none; PADDING-LEFT: 0px; VISIBILITY: visible; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: medium none; WIDTH: 336px; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; POSITION: relative; HEIGHT: 280px"><INS style="BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: medium none; DISPLAY: block; PADDING-LEFT: 0px; VISIBILITY: visible; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: medium none; WIDTH: 336px; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; POSITION: relative; HEIGHT: 280px"><IFRAME id=google_ads_frame2 style="LEFT: 0px; POSITION: absolute; TOP: 0px" name=google_ads_frame marginWidth=0 marginHeight=0 src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3089989272988309&amp;dt=1237866821802&amp;lmt=1237866821&amp;prev_slotnames=8992349138&amp;output=html&amp;slotname=7545507005&amp;correlator=1237866820470&amp;url=http%3A%2F%2Fwww.zgxiazai.cn%2Finfo.php%3Fxid%3D9%26id%3Dsheji%2F2009%2F316%2F093161504018JC02E115J43EKF1C2A049E7G2FAF8GJ5I35GH733EHE.html&amp;ref=http%3A%2F%2Fwww.zgxiazai.cn%2Findex.html&amp;frm=0&amp;ga_vid=422317935.1237866821&amp;ga_sid=1237866821&amp;ga_hid=1404567133&amp;flash=10.0.22.87&amp;u_h=768&amp;u_w=1024&amp;u_ah=738&amp;u_aw=1024&amp;u_cd=32&amp;u_tz=480&amp;u_java=true&amp;dtd=40&amp;w=336&amp;h=280&amp;xpc=spbmGqz0xt&amp;p=http%3A//www.zgxiazai.cn" frameBorder=0 width=336 scrolling=no height=280 allowTransparency></IFRAME></INS></INS>
8 F5 H5 P& @+ l<CENTER>&nbsp;</CENTER>
' s% [$ e8 X+ ^<DIV id=context_main>
% u" w5 i1 Y: R! B<DIV>&nbsp;</DIV>
<DIV><FONT size=2>　　先看下效果：</FONT></DIV>
* O' a9 A% I8 ?4 Z# f- D<P style="TEXT-ALIGN: center"><FONT size=2><EMBED style="WIDTH: 487px; HEIGHT: 394px" src=http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_xiaoguo129.swf width=487 height=394 type=application/x-shockwave-flash></FONT></P>
<P><FONT size=2>　　现在开始画吧：</FONT></P>
<P><FONT size=2>　　一、准备工作：</FONT></P>
; Q5 G) m; E# Y, K& O& w<P><FONT size=2>　　1、新建一图形元件，插入6个图层（共有7层），从上而下分别命名为：花、闪光 、外边花纹、框架、照片、框架底、背景</FONT></P>
( J. I1 o" ]/ f7 A! u9 O) F<P><FONT size=2>　　2、点菜单中的"视图"--标尺，分别在舞台上刻度为0的位置拉出经、纬辅助线，两线的交叉点就是相框的中心点。如下图：</FONT></P>
7 G; n0 n8 F3 k- ?( q. M) q- O  q<P style="TEXT-ALIGN: center"><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 style="WIDTH: 521px; HEIGHT: 293px" alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image001.jpg" border=0><BR><STRONG>图1　　</STRONG></FONT></P>
5 W+ p1 w* x: O; f# N& P<P><FONT size=2>　　3、再拉出两条相框的左边和上边的边框线（这是为了好控制框的大小），如下图：</FONT></P>
<DIV style="TEXT-ALIGN: center"><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image002.jpg" border=0><BR><STRONG>图2</STRONG>　</FONT></DIV>
<DIV style="TEXT-ALIGN: center"><FONT size=2>　　</FONT></DIV>
7 L& p# j+ v/ D<DIV style="TEXT-ALIGN: center" align=left><FONT size=2>　　</FONT></DIV>
' ^5 z& e1 s' k% K6 u4 S<DIV><FONT size=2>　　二、画相框的框架：　　</FONT></DIV>
) g" i4 i2 c5 s# b# L* w0 w2 B<DIV><FONT size=2>　　</FONT></DIV>
<DIV><FONT size=2>　　1、选择椭圆工具，笔触颜色黑，无填充色，点一下"框架"层的第一帧，将光标对准舞台上的"中心点"（要对得很准哦），同时按住Alt键，向右下方向拖动鼠标，画出椭圆，注意椭圆的上边和左边靠近那两条辅助线。用同样的方法在其内侧再画两个小一点的椭圆（这是为了填充不同的颜色体现框架的立体感），再在椭圆的上下各画一条斜线，以隔开颜色的填充。如下图：</FONT></DIV>
<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image003.jpg" border=0><BR><STRONG>图3</STRONG></FONT></P><FONT size=2>　　2、给框架填充颜色：我想相框的颜色不宜太鲜艳夺目吧，所以用了较浅的土黄色填充向光的一面，如下图：</FONT>
& X& K2 v' @0 q- r& k: M9 y. A& E2 B<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image004.jpg" border=0><BR><STRONG>图4</STRONG></FONT></P>
* p* g5 }- h( e6 |' C1 H/ F" }<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image005.jpg" border=0><BR><STRONG>图5</STRONG></FONT></P><FONT size=2>　　3、然后把混色器上的色标往下拖一些（加深颜色），填充背光的部分，如下图： 删除所有的线条，这样相框的框架部分就做好了。上锁。如下图：</FONT>
% t) J# l2 d3 @( {<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image006.jpg" border=0><BR><STRONG>图6</STRONG>　　</FONT></P>
( `  Q, [" ~9 t$ p4 T' [! f. ]<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image007.jpg" border=0><BR><STRONG>图7</STRONG>　　</FONT></P>
/ q5 a: P* K- u6 Y<DIV style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image008.jpg" border=0><BR><STRONG>图8</STRONG>　　</FONT></DIV>
3 p  H- O& v- y* [" k<DIV style="TEXT-ALIGN: center" align=left><FONT size=2>　　</FONT></DIV>
<DIV style="TEXT-ALIGN: center" align=left><FONT size=2>　　</FONT></DIV>
! o, }) \4 z8 Q1 T9 H* ^3 @; s+ ~<DIV><FONT size=2>　　三、画相框外面的花纹：　　</FONT></DIV>
<DIV><FONT size=2>　　</FONT></DIV>
; G* E# t1 b2 M' I4 y6 i8 H<DIV><FONT size=2>　　1、点"外边花纹"层的第一帧，将图像放大到200%（大些好画），选择"线条工具"，笔触颜色"红"（先用红色的画，好分辨）笔触大小为5（也可以先用小些的画好后再调整为5）</FONT></DIV>
( I) s! i; U' o( W' T! M<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image009.jpg" border=0>　　<BR><STRONG>图9</STRONG></FONT></P><FONT size=2>　　2、在框架的左上部分画花纹，（可以自由发挥，爱怎么画就怎么画哈）注意花纹的底部必须有一点是压在框架的上面！这样才能全为一体。如下图：</FONT>
4 S$ Q. i; X: `! P7 k6 [8 M<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image010.jpg" border=0><BR><STRONG>图10</STRONG>　　</FONT></P>
- R! {. p/ o6 F  f<DIV><FONT size=2>　　为了照顾初学者，罗嗦一点，关于用线条工具画图的方法：因为所有的线条都是弧线形的，而用"线条工具"（快捷键N）只能画出直线段，所以画的时候先画出直线段，再用选择工具（快捷键V）对准线段，在光标右下方成半月状时，推动该线段，合其成弧形。这也是画Flash画图的最最基本方法。　　</FONT></DIV>
<DIV><FONT size=2>　　</FONT></DIV>
8 _6 r. W, v5 ?9 D" L, H" c- d0 v<DIV><FONT size=2>　　3、按住Alt键，将"花纹"拖出一点点，这样就复制出了一份花纹。点"修改"--变形--水平翻转，将它拖放到相框右上方和原先的那个花纹相对称的位置（可以用键盘上的上下左右键微调）。如下图：</FONT></DIV>
/ x$ o- A* N  s; `. s<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image011.jpg" border=0>　　<BR><STRONG>图11</STRONG></FONT></P><FONT size=2>　　4、用选择工具同时框选舞台上这两个花纹图形，可以看到红色的两个花纹都成分离状态，这时再按住Alt键，将"花纹"拖出一点点，点修改--变形--垂直翻转，将它拖放到相框框架下部的对称位置。这样花纹就画好了。如下图：</FONT>
3 D5 }% u9 L# ]<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 style="WIDTH: 407px; HEIGHT: 421px" height=433 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image012.jpg" width=425 border=0><BR><STRONG>图12</STRONG>　　</FONT></P><FONT size=2>　　再改变颜色，使它和框架的颜色一致。做法是，点一下"外边花纹"层的第一帧，使其成分离的点状，再点一下工具箱中"颜色"中的笔触色，用弹出的吸管点一下框架上较浅色的部分，这样颜色就改好了。如下图：</FONT>
<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image013.jpg" border=0>　　<BR><STRONG>图13</STRONG></FONT></P>
& f' h/ z. X, F( O$ v<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image014.jpg" border=0>　　<BR><STRONG>图14</STRONG></FONT></P>
# t4 s6 ]) x/ `, V/ k" ]<DIV><FONT size=2>　　5、这一步很关键，就是把平面的花纹变成立体的。点一下"外边花纹"层的第一帧，点"修改"--转换为元件--勾选"影片剪辑"--确定！打开"滤镜"--点加号，添加滤镜。 <BR>　　</FONT></DIV>
' s" A0 r- ?" g0 Y5 x2 R  n<DIV><FONT size=2>　　选择"斜角"和"投影"，参数默认就好。</FONT></DIV>
<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 style="WIDTH: 508px; HEIGHT: 118px" height=138 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image015.jpg" width=680 border=0>　　<BR><STRONG>图15</STRONG></FONT></P>
* A6 P1 Z# N; j4 ]<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 style="WIDTH: 511px; HEIGHT: 133px" height=133 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image016.jpg" width=544 border=0>　　<BR><STRONG>图16</STRONG></FONT></P><FONT size=2>　　6、给框架也加点投影吧，点框架层的第一帧--修改--转换为元件--影片剪辑--确定--滤镜--添加滤镜--投影--默认OK！（因为框架已经是尖形有立体感的了，所以就不要再加"斜角"了。效果如下图：</FONT>
<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image017.jpg" border=0>　　<BR><STRONG>图17</STRONG></FONT></P>
<DIV><FONT size=2>　　现在这个金属相框就画好了哈，不难吧？　　</FONT></DIV>
4 C1 }+ c0 j2 O$ R+ ]2 S9 v<DIV><FONT size=2>　　</FONT></DIV>
! t* S1 G; u: b3 f3 I& r<DIV><FONT size=2>　　四、为了使相框更好看些，在适当的地方加些"闪光"，我想大家都会制作"十字星"，从原来保存的文件中调出"十字星"，放在适当的位置。要是还没有就从这里复制去就好了。既然是闪光，就要会闪哈，在"闪光"层第4帧插入关键帧，点"属性"--颜色--亮度--把亮度调到38%延长到第6帧。把所有各层都延长到第6帧。如下图：</FONT></DIV></DIV></CENTER></DIV></TD></TR></TBODY></TABLE>

<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image018.jpg" border=0>　<BR><STRONG>图18</STRONG>　</FONT></P>
! x: D+ X5 `: X<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image019.jpg" border=0>　　<BR><STRONG>图19</STRONG></FONT></P>
/ U% n" s: n% g<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image020.jpg" border=0>　　<BR><STRONG>图20</STRONG></FONT></P>
<DIV><FONT size=2>　　五、那点缀的四朵花最好不要用鲜花图，因为看上去不匹配，还是画个假花吧，画花有很多教程的，这里就不多说了哈。　　</FONT></DIV>
2 m2 ]! _+ _6 P0 H  i<DIV><FONT size=2>　　</FONT></DIV>
/ Z& o1 M7 N) H6 P<DIV><FONT size=2>　　六、现在准备放入照片了：　　</FONT></DIV>
<DIV><FONT size=2>　　</FONT></DIV>
( P& Z  h% k3 w- o4 t9 ~<DIV><FONT size=2>　　1、点"框内底"层第1帧，用上面画椭圆的方法，以"中心点"为圆心，画个比框架的内径稍大些（不要超出外径）的椭圆，填上自己喜欢的颜色。如下图：</FONT></DIV>
<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image021.jpg" border=0><BR><STRONG>图21</STRONG>　　</FONT></P><FONT size=2>　　2、在最底下"背景"层，用矩形工具，无笔触颜色，填充色凭自己喜欢，画个550*400的方框，相对于舞台全居中。如下图：</FONT>
3 D4 b( g4 a2 }<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程：绘制金属立体相框效果 style="WIDTH: 489px; HEIGHT: 377px" height=425 alt=Flash鼠绘教程：绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image022.jpg" width=582 border=0>　<BR><STRONG>图22</STRONG>　</FONT></P>
: s0 y: W6 X1 B4 k3 B* p9 F/ [( n<DIV><FONT size=2>　　3、现在万事俱备，就等着您把照片放入"照片"层了哈！因为相框的大小，如果照片太大张，可以加个遮罩层只现出相框内的照片。<BR>　　</FONT></DIV>
<DIV><FONT size=2>　　4、点"场景1"把这个元件拖入图层的第1帧，测试影片。保存，OK！<BR>　　</FONT></DIV>
<DIV><FONT size=2>　　不知道是不是说的很清楚了，有不明白的地方可以提出来哈。大家发挥想象一定会画出比这个更好的相框的！</FONT></DIV>