Firworks制作连续滚动图片的方法探讨

合集下载

Fireworks特效制作：FW4灵活技术运用拖放创建图像交换效果.

Fireworks特效制作：FW4灵活技术:运用拖放创建图像交换效果

在Fireworks中你能够通过简单的拖放来创建复杂的图像交换效果。对于指定当鼠标指针从切片或热点上空掠过时切片和热点将要发生些什么事情而言，使用拖放行为是最快和最有效率的手段。直到Fireworks 4出现，才使设计者们越过了必须通过Behaviors面板才能建立图像交换事件这一步。通过简单的将拖放行为手柄从一个作为触发器的切片或热点拖放到一个作为目标的切片就可以快速的创建翻转。

拖放行为手柄是一个有着十字线的圆形标志，位于切片或热点的中心。

当你选择了一个作为触发器的Web对象时，Fireworks会显示出该Web对象的所有行为关系。默认情况下，一个拖放行为关系由一条蓝色的曲线描述。如图1

图1

仅使用一个切片的图像交换翻转通常用于创建按钮或一个当鼠标指针掠过时会发生改变的图像。

要创建这种类型的翻转，你只需将拖放行为手柄拖放到切片的边缘即可。

看上去与Simple Rollover行为很像，但它们之间最大的区别是使用图像交换你可以从任何一帧中获取交换图像，而使用Simple Rollover你只能从第二帧中获取图像。

你将分两个阶段来创建一个图像交换：

第一阶段包括建立切片、翻转图像和用来存放它们的帧；

第二阶段是将图像交换行为捆绑到切片上。

在下面的这个例子中，我们将创建一个有三个帧的图像交换。

创建图像交换的第一阶段：建立切片、翻转图像和用来存放它们的帧：

1. 选择你想要用来触发翻转效果的图像。如图2

图2

2. 选择Insert > Slice将一个切片捆绑到这个图像。如图3

Fireworks中如何做动画

用Fireworks2制作动画一共有三中方法，由简到难的排列起来分别是：合并图象形成动画、使用符号（Symbol ）生成动画效果和手工绘制。

合并图象形成动画，顾名思义就是将一系列图片按序排列生成不同的帧而形成动画（很象Director中的Space to time功能），不过这种排列完全是程序自动执行的，免去了大量的手工操作。具体的方法是这样的（当然使用这种方法的前提是必须有一连串连续的图片）：选择“File > Open Multiple ”命令。进入系列图片所在的目录，然后按次序将一连串的图片加入（“Add”命令）对话框左下部的窗口，并且激活“Open as Animatio”选项，再按下“Done”按钮就OK了。

在动画生成后，按下“Windows > Frame”（Ctrl+ Alt+K）命令，您就看到原来的一系列图片都按次序地从Frame1往下排到底。按下屏幕右下角的播放键就可以浏览动画效果了。这种纯粹的懒办法最合适我这样画不来线条的人了，一次有只用了10 秒钟就搞定了一个小鸟飞飞的图片，效果棒极了！

不过，要是手头没有现成的连续图片，那只能劳驾，自己亲自动手了。而许多图画中有规则的动态效果若是用手工制作，既费时间也未必能够达到理想的效果。所以Fireworks2提供了一个Tween功能，使用户可以指定程序生成动态过度效果（感觉就更Flash里的一样）。

在绘制动画前，我们事先必须明确动画的工作原理。我想简单的说，动画是有不变的物件（object）和会变的物件两部分组成。通常不变的物是只如背景之类始终在动画中显示的物件，而会变的物件是指通过变化形成动画的物件。所以在制作动画之前得先制作不变的物件，为此Fire- works2提供了一个共享层的概念（Share Layer

Fireworks动画制作基本类型

Fireworks在Gif动画制作和处理上有它独到的强⼤功能和灵活简便性，它的内置指令能够⽣成的动画形式⽐较简单，⼤致可以分为两个类别：⼀是基本运动类，⼆是特效运动类，但是只要我们熟练掌握，并添加进⾃⼰的创意，⼀样能做出很酷炫的动画效果。以下是YJBYS⼩编搜索整理的关于Fireworks动画制作基本类型，供参考阅读，希望对⼤家有所帮助!想了解更多相关信息请持续关注我们应届毕业⽣培训⽹!

注意:在本篇中只针对软件直接⽣成的动画效果进⾏分析，不做⼿⼯分帧动画的讨论。

提⽰:在FW中有两种“符号”可以通过软件内建指令产⽣运动及其它变化的效果。⼀是“图形符号(Graphic Symbol)”，⼆

是“动画符号(Animation Symbol)”。

⼀、基本运动类型

直线运动：它包含了垂直、竖直、倾斜这三种运动情况。如图1所⽰。

直线运动

渐变运动：FW只⽀持两种渐变运动，⼀是⼤⼩渐变运动，⼆是可见性渐变运动，可见性即指透明度的变化，其中还包括运动过程中符号的旋转。如果你想把⼀个圆形逐渐变成矩形，那么只有通过⼿动⽅式⼀帧帧的'做了。

位置渐变运动

透明度渐变运动

⼤⼩渐变运动

⼆、特效运动

特效运动只有⼀种即“遮照类”动画。

遮照类动画有两种⽣成的⽅法，其⼀是利⽤共享⽂件夹(Share Across Frames)功能创造遮照的效果，如图5所⽰。

遮照动画

⼆是真正的利⽤遮照功能(Paste as mask or Group as mask)通过被遮照物体的运动⽽⽣成遮照动画。如图6所⽰。

Fireworks制作GIF动画图片教程

当我们在网上冲浪时，看到形形色色的动画效果，一定会有一种冲动，那就是将这个漂亮的动画存储到自己的硬盘上，那么你知道这些动画是如何制作的的吗?下面是店铺整理的一些关于Fireworks制作GIF动画图片的相关资料，供您参考。

Fireworks制作GIF动画图片教程

其实动画的原理很简单，就是让图片有秩序地轮流显示。

利用Firework 3制作动画总共有三种方法，由易到难分别为：合并已有图片生成动画，利用Tween Instances生成动画和手工绘制。

一、合并已有图片生成动画

合并已有图片形成动画，顾名思义就是将一系列图片按顺序排列在不同的帧中从而生成动画，当然，首先我们必须有一串连续的图片，然后，在Fireworks中，选择菜单指令“File/Open Multiple”，这时将弹出“打开”对话框(如图1)，进入所需图片所在的目录，然后按照动画中图片显示的顺序依次选取图片，并单击“Add”按钮将这三张图片加入到对话框下面的窗口;注意：我们还必须勾选对话框最下面的“Open as Animation”(以动画打开)选项，不然的话，我们打开的将是三张分开的静态图片;最后，单击“Done”(完成)按钮。

单击窗口右下角状态栏的播放按钮，怎么样?效果还不错吧!

现在只是一只海鸥在不停地飞，如果为它再添加一副背景，效果一定会更好，好吧，下面我们就为海鸥添加一副大海的背景。

添加背景的方法有两种：自动复制和共享图层。

1. 自动复制

首先，单击“Frames”面板右上角如图2按钮，选择“Add Frames”，在弹出的对话框中选择“Number”为1和“At the end”，单击“ok”按钮。

第6章 Fireworks基本应用

（6）忽略“按下”和“按下时滑过”状态，单击“有效区域”选项卡，按钮编辑器会自动创建一个按钮大小的矩形切片，选择该切片，在属性面板中可以设置切片的链接等属性。（7）单击【完成】按钮，关闭按钮编辑器。可以在预览窗口中观察制作好的按钮。 Fireworks还提供了如图所示的按钮导入库，单击按钮编辑器中的【导入按钮】，然后从“按钮导入”库中选择一个现成的可编辑按钮。如果选择了该选项，就不必为创建其余的按钮状态而费心了。每个按钮状态中都会自动填充适当的图形和文本。
【实例6.6】使用动画元件制作动画
动画元件在 Fireworks 文件中表演的动作看起来就像演员在电影中表演。动画元件可以是您创建或导入的任何对象，并且一个文件中可以有许多元件。每个元件都有它自己的属性并可独立运动。使用动画元件制作动画步骤如下：（1）执行“文件”→“新建”菜单命令，新建一个 300*300的文档。（2）2.执行“编辑”→“插入”→“新建元件”菜单命令。在弹出的“元件属性”对话框中，输入名称： “心”，类型为图形。
【例6.4】制作弹出菜单
（1）打开实例6.2制作的导航条，选择其中的“作品”按钮切片。（2）执行“窗口”→“行为”菜单命令，打开行为面板。在行为面板上单击【添加行为】按钮，选择“设置弹出菜单”命令。打开弹出菜单编辑器。（3）如图所示，设置弹出菜单项的“文本”和“链接”等。
【例6.4】制作弹出菜单

如何使用fireworks作图呢？

Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大Adobe Firework CS4简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等。我们为大家收集整理了关于fireworks作图，以方便大家参考。

（一）Fireworks制作跳动的红心的方法

无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣

（二）Fireworks怎幺绘制水粉画呢

水粉画是使用水调合粉质颜料绘制而成的一种画。其表现特点为处在不透明和半透明之间，色彩可以在画面上产生艳丽、柔润、明亮、浑厚等艺术效果。

（三）Fireworks打造3D文字的方法

使用Fireworks还可以轻易地完成大图切割、动态按钮、动态翻转图等，但是我们怎幺使用他制作3D文字呢？

（四）Fireworks打造炫光效果方法

Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱

利用Fireworks制作动画

可以随时使用【动画】对话框或【属性】检查器来更改动画元件的属性。还可以在元件编辑器中编辑元件的图片。元件编辑器可以在不影响文档其他部分的情况下编辑元件。也可以通过移动元件的运动路径来更改元件的运动。
因为动画元件被自动放到【库】面板中，所以可以重新使用它们来创建其他动画。
25.2.2 编辑元件
25.3.1 打开文件生成动画
在Fireworks 8中可以通过打开一组图像文件来快速创建动画，这种方式最适合网页横幅广告。打开文件生成动画的具体操作步骤如下。
(1)选择【文件】|【打开】命令，弹出【打开】对话框。 (2)在对话框中如果要选择多个连续的文件，按住Shift键或
用鼠标进行框选，此时可以看到选定的文件被添加到【文件名】文本框中。
弹出Fireworks提示框。 (3)单击【确定】按钮，自动在【帧】面板中添加新的帧。
25.2.1 元件和实例 25.2.2 编辑元件
25.2.1 元件和实例
如果文档中有重复使用的元素，可通过复制和粘贴操作在文档中创建对象。
元件和实例还有一些其他用处，如制作动画。Flash 的元件和实例，就是通过创建元件，并不停地改变实例属性，来表示运动的感觉。一个元件就像一个木偶，一举一动都是由操作者完成。
(2)单击【帧】面板右上角的按钮，在弹出的菜单中选择【属性】命令，弹出【帧属性】对话框。
(3)在【帧延时】文本框中输入需要设置的时间。设置完毕后，单击此对话框以外的区域或按Enter键，即可完成对该帧延迟时间的设置。

fireworks动画制作的技巧教程

fireworks 动画制作的技巧教程

不得不承认fireworks 的强大与便捷。这几天的学习让我感觉以前

学的知识都只是皮毛中的皮毛。

参考教程：

bbs.blueidea/viewthre ... 3Ddigest#pid3882861

webpage.114study/datum_show0709071647520862

齿轮图是用fw 本身的动画元件制作的。比较粗造。但能做出来

已经是一种安慰了。至于修饰。相对不会那么困难。难就难在对教程的理解。

旋转球体是通过fw 的扩展3d Primitives 制作的。昨天在经典闲

逛发现有人在挖06 年的坟，结果挖出了宝。赶紧下载了扩展安装上去试验了一下。一开始的旋转球体总是第一帧和最后一帧衔接不理想。慢慢地发现其中规律。原来每一帧的y 轴刻度都比上一帧按9 刻度递增。如第一帧的y 轴刻度为1，第二帧则为10，第三帧为19，以此类推。

看图：

第一帧：

第二帧：

通常最后一帧的刻度都是一开始手动移动到的位置，那么就需要按照9 递增法调整y 轴刻度。由于这个扩展是swf 格式的，可以通过右键来放大面板，便于更细致的调整。

这个效果则是结合了eyecandy4000 滤镜和3d 扩展的应用。

在3d primitives 制作好了旋转立体图之后导出到fireworks 面板，

打开帧面板可以看到之前设置的帧数

重点来了！用3d primitives 扩展导出来的动画的各个路径层都是

已经设定好的。如果我们要修改怎么办呢？总不能一帧一帧地去修改

吧？一个不小心，各个帧的位置就算变了1 个像素都是非常郁闷的事情。在这点上我郁闷了很久，看了别人挖起来的feng4ever（经典论

fireworks教程

Fireworks是一款由Adobe公司开发的图形编辑软件，主

要用于创建和编辑Web图像，特别适用于设计师和开发人员

在制作网站时进行图像处理和优化。本教程将介绍Fireworks 的基本功能和使用方法，帮助读者快速上手并提升其设计能力。

简介

Fireworks是一款在Adobe Creative Suite软件套件中独立

存在的软件，最早被设计用于处理和优化Web图像。它的特

点是集成了矢量图形编辑器和位图编辑器的功能，能够同时处理SVG、PNG、GIF、JPEG等多种图像格式。Fireworks的设

计理念是帮助用户快速创建和编辑Web图像，提供丰富的工

具和特效，支持切片和优化，以及生成HTML和CSS代码。

下载和安装

Fireworks可以通过Adobe官方网站下载安装程序。安装

过程与大多数软件相似，跟随提示完成即可。安装后，启动软件并进入主界面。

界面概览

Fireworks的主界面分为几个主要区域：

1.菜单栏：包含各种工具和功能的菜单。

2.工具栏：包含常用工具的按钮，用于选择和应用工具。

3.画布：用于显示和编辑图像的区域。

4.图层面板：显示和管理图像的各个图层。

5.属性面板：用于调整和修改工具和图层的属性。

基本操作

创建新文档

要创建新的Fireworks文档，请执行以下操作：

1.单击菜单栏中的“文件”>“新建”。

2.在弹出的对话框中，设置文档的尺寸、分辨率和背景颜色等选项。

3.单击“确定”创建新文档。

绘制基本图形

Fireworks提供了多种绘图工具，可以帮助用户创建各种基本图形。以下是创建基本图形的一般步骤：

firework使用技巧总结

Fireworks 含有各种建立标准几何图形的工具，同时也是很好的绘制不规则图形的工具，以下是店铺为大家搜索整理firework使用技巧总结，希望能给大家带来帮助!

◆ JavaScript 按钮

Fireworks 可以让您不用写一行Javascript 代码就可以轻松的创建一个交互式的按钮。您只需要将一个矩形区域转换为一个按钮并使用按钮编辑器(Button Editor)来完成这◆ 魔幻翻转除了创建按钮之外，Fireworks 还可以让您轻松的创建一个奇异的 Javascript 翻它改变在这一页中的其他区域的显示，在Fireworks 中，这种翻转效果被称作不相交翻转( disjoint rollover)。 Fireworks 含有一些可用于路径和位图图像的特殊效果和图像调整命令。

◆ 自动操作

在您工作的时候，Fireworks 将记录每一个步骤并将它们放到历史记录(History)面板中历史记录面板来自动完成一些重复的步骤。蒙板(Masks)覆盖对象是指只显示文档中某一对象的一部分。您将使用这个白色的矩形来

◆ 热点区

在 Fireworks 中，将图像的一部分连接到一个 URL 非常简单。当您想建立一个连接但又不想使用交互状态的按钮时可以建立一个热点区(hotspots)。在Fireworks中创建热点区(Hotspots)就是建立一个图像映射(Map)。 Fireworks可以让您优化一个文档中的不同部分。每一个文档有一个默认的优化设置，但一个 GIF 文件，但这个咖啡杯部分如果优化为JPEG 文件将得到更好的效果。当导出您的文档的时候，Fireworks 把每一个分割区导出为一个单独的文件。同时生成在浏览器中显示这个文档所需的 HTML 和 Javascript 代码。Fireworks 可以很轻松的将图像、HTML 和Javascript 导出到您用Macromedia Dreamweaver 创建和管理的站点

fireworks操作

fireworks矢量编辑

在Fireworks中绘制的矢量对象比位图对象的可修改性强很多。因此在进行无素材制图时，更多时候是制作成矢量图形，以方便随时保存，随时编辑。

简化路径：为了使一条路径不规则的矢量路径变得更加精简，圆滑，我们可以用简化路径的方法来减少它的路径节点。

修改——改变路径——简化

在数量中输入相应数值来设置简化的程度

扩张路径

修改——改变路径——扩展路径可以对任意路径进行加宽

宽度——设置路径的宽度；

角——当路径是曲线时，可以在此选择转角的样式；

尖角限量——用于限制曲线路径的锐角数量；

结束端点——可以选择路径结束点的样式。

设置完成后，路径被加宽

伸缩路径

使用此命令可以改变封闭路径范围

在方向上可以设定路径向内部或外部的伸缩方向

对于非封闭路径，使用伸缩命令可以自动把路径改为封闭路径

2、对象的选择：

用“指针”工具可以对绘图对象进行直接的点选。当要选择多个对象时，可同时按下Ctrl+A键或直接进行框选，均可选中所有对象。对象被同时选中后拖动任意一个对象，其它的对象也会随着一起移动。

当一个对象完全处于另一个对象下面时，就很难用“指针”工具进行直接的点选。这时就可以使用工具条上的“选择后方对象” 工具来选择后面的对象

对象的填充：用钢笔工具画一个随意的封闭路径，然后在该路径的属性对话框中设置路径的描边填充色

颜色样版——在描边颜色预览窗中可以选择一种色彩作为路径的描边色。预选的色彩及该色彩的网页色数值都会在样版的左上角中显示出来。同时也可以直接输入想要的网页色数值，然后按“回车”即可

自定义颜色——点击自定义颜色按钮，从“颜色”窗口中选取或设定一种自定义色彩；

如何解决连续滚动图片的跳动

四、制作方法
1.图片（或组）的宽度与页面宽度相同 2.图片（或组）的宽度大于页面宽度 3.图片（或组）的宽度小于页面宽度 4.走马灯 5.滚动背景 6. 多张图片 7.超长卷（不在本片中讲解。参见“超长卷移动的简便制作方法.ppt”）
1.图片（或组）的宽度与页面宽度相同
路径长度为4个小矩形的宽度（组的宽度及页面宽度），后续图片的宽度与页面宽度相等（4个小矩形的宽度）
2.图片（或组）的宽度大于页面宽度
路径长度为6个小矩形的宽度（组的宽度），后续图片的宽度与页面宽度相等（4个小矩形的宽度）
3.图片（或组）的宽度小于页面宽度
Leabharlann Baidu
路径长度为3个小矩形的宽度（组的宽度），后续图片的宽度与页面宽度相等（4个小矩形的宽度）
4.走马灯（1）
1
2
3
4
路径长度为10个小矩形的宽度
4.走马灯（2）
1
2
3
4
路径长度小于一个周期的宽度就出现跳帧并且出示图片不完整
5.滚动背景
①不组合 ②组合
①没有组合
1
2是1的水平翻转。路径长度是页面宽度的2倍，后续图片3与1完全相同
②组合
路径长度是页面宽度的2倍
6. 多张图片
选用切入、切出动画。但图片不能重复滚动
谢谢观阅
如何解决连续滚动图片的跳动

fireworks如何做动图

如何用Fireworks软件制作动态图片，至于大家要制作相对复杂的gif图片，可以在设置方面多摸索。那么下面店铺跟大家分享了关于fireworks如何做动图的步骤/方法，希望你喜欢。

fireworks做动图的步骤/方法：

首先打开fw—新建一个文件

大约这么大就可以了

接下来是把你喜欢的表情图导入fw 【文件——导入——你喜欢的图片】

她会跳出这个框按确定就可以了

这是工具栏【点文本工具——写上你想写的字】

接下来就是让字体美观一点

可以看到画布的下面有属性栏

然后点滤镜旁边的【+】会出现下图的各种效果选择【发光】

调一下参数

就是这样了

接下来就是让图片动起来了部分

把动态图片移动到合适的位置

在【层】面板的右上角有个图标点一下———点共享此层

然后就完成了

画布的右下角点击播放就可以动起来了

最后保存

记得优化面板必须是gif

然后文件另存为——【动画gif】

FIREWORKS8标准实例教程教程课件第八章动态效果设

图像（称为原始图像）时，显示位于该图下面的图像（称为翻转图像）。这也是最简单的翻转效果。简单翻转图包含2帧，下面以一个简单实例制作演示简单变换图像的使用方法。 8.4.2 交换图像交换图像行为可以将切片图像切换为后面帧或外部图像，简单变换图像实际就是目标为【帧2】的交换图像行为。下面以一个简单实例制作演示交换图像行为的使用方法。 8.4.3 设置导航栏图像设置导航栏图像行为可以用于导航条的制作。导航条实际上是一组相关联的按钮。当某个按钮按下后，其它按钮就必须释放来。因此导航条按钮必须添加设置导航栏图像行为。
当网页中放置了一幅较大的图片时，网页的下载时间就比较长。为了加快网页的下载速度，可以把大图片分成若干个小图片，然后再将这些小图片重新组合成一体，这就是所谓的切片技术，利用Fireworks 8 提供的切片工具，我们可以很轻松地对图像实施切片。当建立了图像切片以后，还可以为不同的切片建立超链接。
1. 导出动画为GIF文件
在优化面板中将【导出文件格式】设置为【GIF动画】。
选择菜单栏【文件Baidu Nhomakorabea/【导出】命令。
在【导出】对话框中设定导出GIF文件的名称和存放路径，并将【保存类型】设置为【仅图像】。
设置完毕，单击【保存】按钮，即可将动画以GIF格式导出。
2. 导出动画为SWF文件
选择菜单栏【文件】/【另存为】命令。

Fireworks基本操作技巧方法

这是一篇关于Fireworks基本操作技巧方法的文章，它主要讲述了具体方法，接下来让我们一起了解一下。

1、方向键移动按住Shift，每次移动是10个像素

2、用【指针】移动按住Shift，保证水平和垂直方向

3、按住【Alt】键不放，拖拽可以复制对象，自动形状不能用这个方法

4、所有形状工具绘图，按住【Shift】，可以绘制1比1的图形

5、任何时候按住【空格键】不放，可以变成小手工具，移动画布

6、使用【矩形】工具画图时，按住键盘上、下键不放，不要松开鼠标左键，可以增加、减小矩形的圆度

7、编辑群组形状部分图形，可以使用【部分选取】工具

8、使用【钢笔】工具，按住【ALT】键不放，可以随时调整路径点的控制手柄

9、使用【刷子】工具绘图时，按住【shift】不放，可以绘制连续的线条

10、按住【ALT】键不放，点击位图图层，可以根据位图的形状获得选区 11、绘制多个选区时，按住【shift】增加选区，按住【Alt】减少选区，按住【shift+alt】进行交集运算

12、在给选区填充颜色时，按住【Alt+Delete】快速填充

13、按住【ctrl+F8】，可以创建一个新的元件

14、按住【Ctrl】键，单击【混色器】面板下方的颜色栏，可以快速切换到不同的颜色模式

15、在【颜色窗口】采集颜色时，按住【Shift】键可以确保获得的颜色是网络安全色

Fireworks中gif动画的制作