Fireworks中制作线框运动

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

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动画,不然它不会动起来哦。

时间: 2024-08-04 12:08:20

Fireworks中制作线框运动的相关文章

Fireworks中制作归途效果

大家先看看下面的效果图 很久以前在<<照相馆的故事>>中看到过这个效果图,书上对它只是提了提,没有详细的讲解.这些天,我试着在FW 4.0中把它画了出来,,喜悦的成果不敢独享,今天把这种制作方法捐出来,以飨同好.这是个综合实例,通过对本例的学习,相信各位能从中得到不少启发.我们分三部分来制作,背景,运动的线杆和斑马线,车内的景物. 一 背景 1.新建文件,300*240,背景色为白色,用选取工具拉出两条纵横辅助线,使它们的交点位于编辑区的中心,大家要善于运用辅助线,因为它能为我们的

在Fireworks中制作淡入淡出动画效果

淡出|淡入 淡入淡出动画效果 用fireworks做的淡入淡出效果,有人说看PNG格式看不出真正的步骤,所以在此补上这样一篇教程. 对象的淡入淡出效果是firewoks可以创建的普通效果之一,对两个链接对象进行插帧的时候,其中一个对象的不透明度设置为0%,一个对象的不透明度设置为100%,就可以获得淡入淡出效果. 制作步骤: 一.首先新建一个文件,画一个圆,在FILL面板中设置edge:feather:10,设feather的目的是在运动过程中边缘不至于太生硬,影响效果.点中圆,按F8键,选择t

Fireworks中制作呼机

先看看效果图 可能你早就步入了手机时代,但不能否定曾经的传呼通讯给了我们极大的方便,饮水思源,让我们一起来怀念数字信息的先驱---呼机. 1.新建文件,Width=300,Height=220,背景色为白色, 2.用圆角矩形工具,在编辑区拖画出一个圆解矩形,填充色为#006633.打开Object面板,在Roundness 中.输入圆角角度为36.选中该圆角矩形,打开Effect面板,Bevel and Emboss>Inner Bevel,在弹出的设置框中,如图设置. 3.用圆角矩形在编辑区拖

Fireworks中制作一枚漂亮的灯泡

教程开始之前,我们先来看看这个漂亮的灯泡到底是什么样子的(见下图): 还是那句话,如果您实在是看这个灯泡不漂亮,我也不能强迫您看这些接下来的文字 :),要求不那么苛刻的朋友们,请和我来吧! 本节重点:位图操作的一些实用技巧学习. 1.新建文件,大小为100*100,背景色为默认的白色,如下图: 2.选取工具箱的矩形绘制工具,配合Shift键,在编辑区绘制出一个正方形.填充颜色随意,只要和背景色不相同即可,这里采用的颜色为红色:不要描边,大小.位置如下图所示: 3.在正方形处于选中状态下,执行菜单

Fireworks中制作联通标记

看到联通的图标很是好看,在FW中试了试,也能画出,呵呵,步骤虽然是多了些,只要细心,你一定能画好.下面让我们动手把它画出来吧. 1.新建文件,Width=300,Height=300,单位为象素.背景色为白色. 2.用工具箱中的矩形工具,在编辑区拖画出一个长和宽都是100象素的正方形,填充色为浅蓝色. 3.选中该正方形,Edit>Clone,克隆出一个,选中克隆出的正方形,Modify>Transform>Numeric Transform,在弹出的对话框中把长和宽都设为60象素.然后同

如何在Fireworks中制作分解效果

  首先来欣赏下最终效果图: 具体操作步骤: 1.首先准备好两张图,一张用来遮蔽用的(其实就是我们用的刀子),一张是底图 2.分别复制一份,然后按照下面的顺序排列好四个图层 3.上面两层进行裁切操作(同时选择1,2层,然后找到Fireworks菜单的[修改]-[组合路径]-[裁切]),下面的两层进行打孔操作(和裁切在一个地方),由于这个例子的图形拥有多个颜色,你可能需要多次打孔或者裁切操作. 4.把两个被分解的图形再次重新组合到一个地方,然后全选这些路进,找到菜单的[修改]-[组合路径]-[分解

Fireworks MX 制作朦胧照效果

以前看到过在Photoshop制作过朦胧照的效果,感觉很新鲜,就尝试着在Fireworks中制作一下了,没想到制作的方法特为简单. 制作方法: 1.打开原图片: 2.选择原图片,将选择"编辑"菜单."克隆(Ctrl+Shift+D)",原位置克隆一张图片: 3.打开层面板,选择好第一张图片,在属性面板中设置好透明度,值为40%: 4.选择"滤镜"菜单."模糊"."高斯模糊",设置值为4: 制作完成,效果挺漂

fireworks中打造透明效果

fireworks中制作晶莹剔透效果教程 第一步 随意新建一个画布,填充背景色为#000066,钢笔勾出基本形状,羽化边框(半径1),填充放射性渐变,外加滤镜外发光,效果如图: 第二步 克隆刚才绘制的外形,微微调整尺寸,去除羽化和外发光,同时调整渐变,参数如下:

图文教程:详解Fireworks中的动画制作

教程|详解 有过FLASH动画制作基础的朋友一定知道,在FLASH中将绘制的图像转换成的"图像元件"或"动画元件"是可以通过软件的内建指令,产生运动及其它变化的效果.而在Fireworks中也沿用了这种动画制作方式,从而大大减省了GIF动画制作时的繁琐性.而在本篇教材中,我们也只针对软件直接生成的动画效果进行分析,不对手工分桢的动画制作进行讨论. 一.动画的基本运动 在Fireworks中,动画的运动方式可分为四个基本动作: 1.直线运动:图像由A点直线移动至B点: