论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Fireworks教程
Tag:切片,gif,动画,文字,图标,照片,网页,效果图,表情,按钮,工作,8.0,cs,视频教程

Fireworks中制作线框运动

文章类别:Fireworks | 发表日期:2008-9-20 19:31:50

看到这么酷的动画,你不想自已亲手动手做一个吗??把你的照片也加上这样的边框,让你的朋友对你佩服得四脚朝天!!不会??不要紧,跟我来!

1、打开一张图片,选中该图片,Modify>Transform>Numeric Transform在弹出的设置框中,选中Resize重新设置图片的尺寸,这里我们把图片的长和宽设为150pixels(象素),你也可以随意把长宽设置。Modify>Canvas Color在弹出的设置框中,把Custom前面的框勾选,然后选一种你喜欢的背景色。要把图片的长和宽记住,因为我们要为它加上边框。



2,双击Layern面板中的Background背景层,在弹出的对话框中,把Share Across Frames前面的框勾选上。使背景层共亨。



3、新建一层Layer1,在layer1层中,我们给图片加上黑色边框,用工具箱中的矩形工具,参照Info面板,拖画出一个长为150象素,宽为3象素的矩形。选中该矩形,Edit>Clone克隆出一个,把这两个矩形,分别放在图片的上,下边,再用矩形工具拖画出一个竖放的矩形,长为144象素,宽为3象素。然后克隆出一个,把它们分别放在图片的左右两侧。如图所示



4,用直线工具,画一条长180象素的线段,选中该线段,打开Storke面板,进行如图设置



5、点击面板右上角的黑色小箭头,在弹出的菜单中,选择Edit storke ,随后弹出一个设置框,在Options面板中如图设置



6、再点开shape面板,把square前面的框勾选上,假如不勾选它,默认的虚线由圆点组成。



7、这时我们发现,刚才画出的线段变成了由矩形组成的虚线了,选中该线段,按F8键,在弹出的对话框中,把Graphic前面的框勾选上,这条白色虚线被我们定义成了符号,我们可以随时调用它。

8、现在我们要开始制作四个虚线运动的动画,它们分别是从左向右运动,从上向下运动,从右向左运动,从下向上运动。从而形成一个围绕黑色边框运动的效果。先做一个虚线从左向右的动画符号,Insert>New symbol在弹出的对话框中,我们在Name中,命名为1,把Animation前面的框勾选上,随后弹出一个动画符号编辑区,打开Library面板,我们刚才定义的虚线符号就在里面,按住鼠标左键不放,把这个符号拖到动画符号编辑区,选中编辑区的虚线符号,Edit>clone克隆一个,选中克隆出的虚线,按8下电脑键盘上的右方向键,把克隆出的虚线向右移动8个象素。同时选中这两个虚线段,Modify>Symbol>Tween Instances在弹出的对话框中如图设置。这样一个从左向右运动的动画符号就做好了,好,把编辑区关闭。


9、这一步,我们将做一个从上向下运动的动画符号,Insert>New symbol在弹出的对话框中,我们在Name中,命名为2,把Animation前面的框勾选上,在随后弹出的动画符号编辑区中,把虚线符号从Library面板拖到编辑区,因为要做一个从上向下的动画,所以虚线应是竖立的,选中虚线,Modify>Numeric Transform在弹出的设置框中,选择Rotate,角度设为90度。这样我们得到了一个竖着的虚线段。然后克隆出一个线段,用电脑键盘上的下方向键按8下,同时选取编辑区的两个线段,Modify>Symbol>Tween Instances在弹出的对话框中steps:2,把Distribute to Frames勾选上。



10,再做出一个从右向左运动的动画符号和一个从下向上运动的动画符号,制作方法和上面相同,只是把克隆出的线段分别向左移8个象素。向上移8个象素。这里就不再重复了。把这四个运动方向的动画符号完成!

11,回到编辑区,打开Library面板,把动画符号1(从左向右运动)拖放到编辑区,把它和上面的黑色矩形对齐好。选取动画1,Edit>cut,把它剪切,然后选中上面的黑色矩形,Edit>Paste Inside



12、把动画符号2(从上向下运动)从Library面板拖到编辑区,把它和左边的黑色矩形对齐,然后选中动画2,Edit>cut。再选中左边的黑色矩形,Edit>Paste Inside。

13、把动画符号3(从右向左运动)从Library面板拖到编辑区,把它和下边的黑色矩形对齐,然后选中动画3,Edit>cut。再选中下边的黑色矩形,Edit>Paste Inside。

14、把动画符号4(从下向上运动)从Library面板拖到编辑区,把它和右边的黑色矩形对齐,然后选中动画4,Edit>cut。再选中右边的黑色矩形,Edit>Paste Inside。最后效果如图



  你点播放键,看看效果是不是出来了???好,把它保存起来吧。记得把它保存为Animated Gif动画,不然它不会动起来哦。

上一篇:Fireworks中制作联通标记 人气:2834
下一篇:Fireworks中螺旋运动字的制作 人气:1993
Fireworks视频教程

Fireworks视频教程
Windows视频教程
Windows操作
[文]
WORD教程
Word教程
[文]
Excel教程
Excel教程
[文]
PowerPoint教程
PowerPoint
[文]
Dreamweaver
Dreamweaver
[文]
FIREWORKS
Fireworks
[文]
FLASH教程
Flash教程
[文]
photoshop平面设计
PhotoShop
[文]
CorelDraw
CorelDraw
[文]
C语言教程
C语言教程
[文]
html
Html教程
[文]
DivCss布局
Div+Css布局
[文]
Javascript
Javascript
[文]
ACCESS数据库
ACCESS数据库
[文]
ASP教程
ASP教程
[文]
SQLServer数据库
SQLServer
[文]
ASP.NET教程
ASP.NET教程
[文]
FlashAS
FlashAS
[文]
视频教程列表
计算机基础入门及办公自动化: 网页制作开发视频教程: 平面广告设计视频教程 初级程序设计及ASP动态网站开发 Asp.net动态网站开发视频教程 Flash 动画角本编程视频教程
文章教程搜索
 
Fireworks推荐教程
Fireworks热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058