Fireworks制作钟摆式公告牌摇摆动画

今天我们用Fireworks制作一个钟摆式的公告牌。

  先参阅一下效果图。

  1、新建一个文件,画布背景颜色选取白色。同时将画布大小设置稍大些。

  2、使用Fwmx2004的矢量工具,绘制圆角矩形,自选一种纹理效果填充,如图。


  3、输入文字。

  4、在圆角矩形右、左上角绘制小圆形,如图所示。


  5、添加辅助形,找到该圆角矩形的中心点位置,如图。


  6、在中心点上方垂直辅助线上绘制渐变效果的小圆形,以及两根斜直线段,复选该圆形及斜直线对角,组合并移至最后,使用钢笔工具,分别在两个白色小圆形上绘制曲线。如图。


  7、群组(Ctrl+A、Ctrl+G)所有对象,一个简单的公告牌效果就简单制作完成了。现在进行动画效果的制作。

 
  8、克隆群组后的公告牌,使用工具栏中的缩放工具,分别对画布中显示的公告牌进行旋转处理,如图。


  9、复选这两个对象,并按垂直居中与水平居中进行排列,如图。

  10、在层面板中先屏蔽掉右边的公告牌。再选择修改菜单、动画、选择动画命令,弹出动画属性设置窗口。进行参数的设置,如图。


  11、确定后,公告牌对象自动转化为元件。双击该元件对象,在元件编辑窗口中,将公告牌圆形移至元件编辑窗口中心位置,如图。


  12、返回至主编辑窗口,现在一个由左向右摆动的动画效果已形成。打开帧面板,选择第一帧。将层面板屏蔽的公告牌显示出来,并进行剪切。

  13、在帧面板中新建空帧,粘贴对象至画布内。对当前公告牌进行由右至左的钟摆动画设置。选择修改菜单、动画、选择动画命令,弹出动画属性设置窗口。进行参数的设置,其中各参数与第九步相同,仅需要给旋转方向上变化为顺时针。如图。


  14、将该公告牌参照第十一步修改元件中心的方法进行位置的移动。

  15、这样,由右至左的钟摆动画效果就完成了,在帧面板中将Gif动画效果设置为启永久,让动画连续播放。再导出为Gif动画文件,最终效果图如下所示。

  制作技巧提示:

  ①在位置调整时,比如中心点的对齐、旋转等,可以借助于FW中的辅助线。

  ②使用动画面板调整好旋转角度生成动画后,建议不要在帧面板中进行删除帧了操作了。如果需要调整角度,可以在画布上对元件对象进行选择右键、动画、设置,在弹出动画设置窗口中再进行调整。

  Fireworks制作的Png源图如下。

时间: 2024-03-20 14:04:03

Fireworks制作钟摆式公告牌摇摆动画的相关文章

用Fireworks制作钟摆式公告牌效果

先参阅一下效果图: 1.新建一个文件,画布背景颜色选取白色.同时将画布大小设置稍大些: 2.使用Fwmx2004的矢量工具,绘制圆角矩形,自选一种纹理效果填充,如图: 3.输入文字"织梦论坛": 4.在圆角矩形右.左上角绘制小圆形,如图所示: 5.添加辅助形,找到该圆角矩形的中心点位置,如图: 6.在中心点上方垂直辅助线上绘制渐变效果的小圆形,以及两根斜直线段,复选该圆形及斜直线对角,组合并移至最后,使用钢笔工具,分别在两个白色小圆形上绘制曲线.如图: 7.群组(Ctrl+A.Ctrl

Fireworks制作图片变换效果逐帧动画

细节性的动画在FW里还是使用逐帧动画调节起来比较细腻,虽然使用动画元件比较快,但是我还是比较喜欢一帧一帧的调,做了几个图片变换过渡的效果: ① 逐帧动画: PNG文件: ② 逐帧+蒙板: PNG文件: ③ 逐帧+不透明度做的图片过渡: PNG文件: ④ 逐帧+灰度蒙板做的图片过渡: PNG文件:

Fireworks制作字体遮罩动画

用Fireworks制作字体遮罩动画是一件非常轻松的事情,下面我们不妨一起动手试试. 完成效果 1.选择一幅图像作为Mask字体的底层动画. 2.把上一步骤的图复制/粘贴2次,然后把3幅图合并,这样会使动画更加连贯. 3.选中这幅图,然后在菜单中选择:Insert--Convert to Symbol,或按F8, 然后选择Animation,将它定义为动画.在动画参数设置里只要填Frames播映的帧数就可以了,我们在Frames那里填10. 4.选中箭头所指的红点,向右拖动. 5.拖动后,调整好

Fireworks 制作地球旋转动画

旋转 Fireworks 制作地球旋转动画.本教程主要练习蒙板与动画原件的应用.闲话少说,看实际效果: 具体步骤: 1.双击任务栏右下角的时间. 2.打开日期和时间属性对话框后,按ALT+PrintScreenSysRq键,将对话框屏幕复制到剪贴板中(呵呵,就地取材). 3.进入Fireworks,新建文件,粘贴.粘贴后利用裁剪工具将世界地图部分裁剪下来,裁剪时一定要放大比例进行裁剪,精确一些. 4.将裁剪好的世界地图克隆一份(CTRL+SHIFT+D),移动到画布右侧之外,空白处单击,选择属性

Fireworks制作地球旋转动画

Fireworks 制作地球旋转动画.本教程主要练习蒙板与动画原件的应用.闲 话少说,看实际效果: 具体步骤: 1.双击任务栏右下角的时间. 2.打开日期和时间属性对话框后,按ALT+PrintScreenSysRq键,将对 话框屏幕复制到剪贴板中(呵呵,就地取材).

Fireworks制作打破玻璃的GIF动画效果

  本教程是向大家介绍如何利用Fireworks制作打破玻璃的GIF动画效果,制作方法并不是很难,效果非常不错,推荐过来,希望大家喜欢! 首先先看一下最终效果: 下面是具体的制作方法: 1.下载并安装滤镜插件Xenofex2到FW的Plug-in目录下(将解压出的文件复制进Plug-in文件夹即可),下载页面在这里(不是广告,我也不知道这是谁的BLOG). 2.运行FW,打开一张图片,我们可以适当缩小这张图片的尺寸,令周围留些空白,背景色设为白色.这样我们更能看清楚破碎扩散的效果.将这层命名为"

Fireworks制作GIF动画广告BANNER

广告 本小节中我们看看怎样使用Fireworks MX 2004设计一张GIF动画Banner,以一个宣传天柱山的Banner为例,主要熟悉Fireworks中帧面板.动画.元件等工具的使用方法.文章末尾提供.png文件供大家下载参考. 完成效果如图:  (1) 新建一个大小为468×60的文件,设置其画布颜色为透明,并导入一幅汽车的位图图像,得到图1所示的图像. 图1 新建文件并导入图像 (2) 选中这幅汽车图像,单击[修改]菜单,选择[元件]|[转换为元件],这时候会跳出元件属性对话框,将这

Fireworks制作GIF动画Banner

本小节中我们看看怎样使用Fireworks MX 2004设计一张GIF动画Banner,以一个宣传天柱山的Banner为例,主要熟悉Fireworks中帧面板.动画.元件等工具的使用方法.文章末尾提供.png文件供大家下载参考. 完成效果如图: (1) 新建一个大小为468×60的文件,设置其画布颜色为透明,并导入一幅汽车的位图图像,得到图1所示的图像. 图1 新建文件并导入图像 (2) 选中这幅汽车图像,单击[修改]菜单,选择[元件]|[转换为元件],这时候会跳出元件属性对话框,将这个图形文

Fireworks制作残影动画

效果简介:提起残影动画总是让我们想到Flash.现在我们通过FW也同样能制作出来漂亮的残影动画了,这主要归功于动态符号的合理运用,巧妙使用同一个动态元素会创造出不错的效果,当你看完了本节教程就会对这一点深信不疑. 操作步骤:在本节中我们只是单纯的说明残影效果的实现,所以这里只应用文字来代替美丽的图片.重要的是你要掌握这种创造方法. 一.建立动态符号 1.建立宽200像素.高80像素的场景,底色白. 2.选择Text Tool(文本工具)在场景中输入一个自定义文字.将它拖动到场景的左上角. 3.选