本教程是向大家介绍利用Fireworks简单制作轮子滚动动画效果,方法很简单,主要想通过这一实例向大家介绍fw mx如何让我们的web design变得更easy,希望大家通过本篇教程能有收获!

一直以来,fw都是我最喜欢使用的软件之一,最近下载了一个Firework mx试用版,充满兴奋地开始了fw mx中的动画体验,用fw mx做gif动画感觉更顺手,制作速度更快,创意思维可以不受限制,跟其他同类软件比起来,fw mx在web的gif动画上面无论从制作出来的动画体积以及质量上来说,都是最优化的,而且许多操作和面板都跟mx系列结合在一起,让web designer可以以最好的创意、最快的速度和最优化web输出快速建立一个web site。

下面是我做的一个动画,通过这个例子我们来看看fw mx如何让我们的web design变得更easy:

(1)新建一文件,大小为450x116,然后我们用圆形、线条、钢笔等矢量做图工具做一个车轮的样子,如图所示:

车轮的画法就不用我说了吧,不过fw mx里面的矢量绘图方式也增强不少,因为比较容易,就自己去体验一下了吧,还有车轮里面那个红点不要偷懒不画哦,等下有用处的。

(2)选中画好的图形,按f8键,将图形转换为animation,这时我们可以在library面板中看到它,呵呵,有点像做flash的感觉,如图所示:

(3)选中这个animation元素,在属性面板中的frame栏里面填写数值10,属性面板的出现真的是太好太方便了,又可以将设计制作的速度提高一层了,如图:

这个frame的数字根据自己的动画长度来决定,按下回车,这时会出现一个警告窗,如图:

说的是将自动添加到帧上去,按ok,你也可以点击don't show again,以防它下次又来搅乱视线。这时我们会在看到车轮的中心出现了一个小红点,这个小红点可很重要,代表着动画最后运动的一个图形,我们可以按住这个小红点拖动到右边,发现中间出现了很多的“关键帧”,点取其中任何一个帧点,都会将这一帧的图形显示出来。如图:

按播放按钮,发现车轮动起来了,由于缺省的动画间隔时间是7,我们有必要将它调得慢一点,打开frame面板,按shift键将所有的frame选择,然后双击,弹出窗口,将7改为18就可以了。如图:

上面地动画中,我们就可以看到车轮从左边移到右边了,注意是“移”不是“滚”啊,怎样实现它滚的效果呢?下面我们来使用属性面板让我们的动画变得更加富有变化。选择这个动画,在属性面板中进行如下配置,如图:

scaling是对动画大小变化的调整,rotation是旋转角度的度数调整,可以是顺时钟也可以是逆时钟旋转,跟flash中的rotation是一样的道理,opacity...to...是透明参数设置,让你的动画淡入淡出效果更逼真。呵呵,这下基本上差不多了,按播放按钮看看,看到车轮上的红点滚动没有?车轮到后面越来越小,最后淡出,效果很生动吧。

那么我想让车轮沿着波浪线滚动,就象上坡下坡的样子,我该怎么做啊?我倒,够狠啊,这么刁难的问题也提得出,firework可不象flash那样有引导线,可以让动画沿着引导线走,那真的就不能实现了吗?办法还是有的,不过比较麻烦一点,那就是先把这个动画用export wizard输出为一个十帧的动画,然后再在fw mx里面打开,最后在frame面板里面分别对每个画面进行重新安排,当然安排是沿着波浪线的,下图是用洋葱皮观看方式看到的效果,波浪线滚动还是出来了,虽然麻烦点。如图:

当然,kingfun开始的时候还是在fw mx里面试了很久,希望把anmation元素打散为每个frame的图形,可是弄得两眼昏花了还是不行,假如有哪位朋友能够实现,千万记得写稿子出来啊。

教程结束,以上就是利用Fireworks简单制作轮子滚动动画效果,希望对大家有所帮助!谢谢大家观看本教程!

matlab车轮滚动动画,Fireworks动画教程:简单制作轮子滚动动画效果相关推荐

  1. ae怎么做圆一圈圈扩散效果_轻备学院AE特效基础教程 - 如何制作一个带有动画效果村庄烟雾...

    熟练运用AE软件做几个偏技巧性并且可以举一反三的超简单小动画,教大家如何制作一个带有动画效果村庄烟雾,你学会了这些小动画,不仅可以熟练运用AE软件,还能对动画制作有深入的了解. 第一步:在AI中绘制插 ...

  2. videoleap自带素材_videoleap教程:制作电影帷幕开场效果细解

    大家晚上好,我是Mr.吴 劳模吴又熬夜来给大家更新教程了 今天给大家带来的教程是 --如何制作电影开场的效果 这里我先放一个上周末出去约拍 记录的一个vlog成品杭州印打卡--WABF小分队https ...

  3. 【unity游戏开发教程】Unity+Umotion Pro+VRoid+Blender制作人物模型和动画,在unity中简单制作二次元人物动画

    前言 大家好!本期教程教大家在unity中制作二次元人物模型和动画 文章目录 前言 0.环境准备 1.下载VRoid Studio 2.Umotion Pro下载 3.Mixamo网站 4.blend ...

  4. 巧用遮罩效果,让你动画宣传视频更容易制作 | 万彩动画大师

    在宣传动画视频中随心所欲自定义遮罩蒙版,可以遮挡部分图像内容,也可以显示特定区域的图像内容.遮罩效果的设置甚至为图片增添艺术装饰效果,给观众带来惊艳的视觉享受.那么,遮罩蒙版是什么?到底要怎么用?能够 ...

  5. android svg 线条动画教程,简单的SVG线条动画

    [TOC] 看到网页中那种有如写字般的动画,觉得挺好玩的,就找了下制作方法,也比较简单,在此记录一下; 先上几张图看看: 简单的线条动画 ps4 用到的属性 stroke 定义边框颜色值; strok ...

  6. [Unity2D入门教程]简单制作仿植物大战僵尸游戏之②搭建游戏场景+制作动画

    布置场景: 我们首先要创建一个新场景就叫level1, 我们在project面板中找到这张图 我们在新建的Canvas上创建一张background把这张拖进去点击Set Native Size 然后 ...

  7. html卷轴展开动画,【原】ppt动画技巧:如何简单制作卷轴展开动态效果

    卷轴,是我们常见的一种书画装裱形式,以往我们所见的都是静态的卷轴,通常手动展开.今天小编将给大家分享利用PPT制作动态的卷轴展开效果. 效果如下图所示: 一幅长长的卷轴字画向两侧慢慢展开,这个效果在P ...

  8. html 曲线动画,Mugeda HTML5教程:插入曲线变形动画

    mugeda最新添加了一些新的功能中,还有一个曲线变形动画的功能,这一节我们来具体讲述怎么使用.所谓曲线变形动画指景物的形体变化,它是使一幅图像在多帧内逐步变化到另一幅完全不同图像的处理方法.这是一种 ...

  9. 如何用html5 canvas制作子画面动画,如何用HTML5 Canvas制作子画面动画

    用户提问 为了用DOM做2D游戏,你基本上要动态地调整元素风格,以便在页面上移动它.虽然有些时候DOM修改是很好的,但这一次我将重点介绍使用HTML5 Canvas来制作图像,因为对于现代浏览器,它是 ...

最新文章

  1. windows 常用thread方法
  2. 如何支持亿级用户分流实验?AB实验平台在爱奇艺的实践
  3. 阿里云LinkIOTEdge物理边缘计算流程
  4. cocos2d笔记——解析HelloWorldScene
  5. MongoDB数据库的创建与删除
  6. 关于cookie 跨页面处理
  7. 材料成形计算机辅助设计,材料成型及计算机辅助设计(综述)
  8. mysql更新字符串中某个字符串_mysql更新某个字符串字段的部分内容
  9. ajax不能访问本地php文件,php – 使用htaccess拒绝ajax文件访问
  10. mongodb客户端操作常用命令
  11. 学计算机学的想死,“我不是学习机器,真的好想死”
  12. 京东月薪8万招聘HR,岗位要求只有这3个字
  13. 【加法笔记系列】逻辑门、半加器、全加器、波纹进位加法器
  14. php+mysql防注入字符串过滤_php 防sql注入过滤代码
  15. 【转】IE6 浏览器常见兼容问题 大汇总(23个)
  16. Windows server服务器FTP设置以及客户端FlashFXP连接FTP
  17. switch如何更新大气层,和进入hekate界面
  18. 浙大 PAT 甲级 1077 Kuchiguse
  19. 无线射频专题《射频信号,接收灵敏度与接收信号强度指示》
  20. IoT 物联网设备OTA:升级包下载过程详解

热门文章

  1. 如何利用Social Listening从在线社区提炼有价值的信息
  2. 简约不简单 细说专票电子化的“四个新”
  3. My设置密码报错:ERROR 1819 (HY000): Your password does not satisfy the current policy requir
  4. nftables和iptables的区别
  5. 一秒看懂:SaaS软件和传统软件的区别!
  6. JavaScript:使用Canvas绘图
  7. 《认知天性》让学习轻而易举的心理学规律
  8. Verilog设计(二):分频电路设计
  9. h5画布动画_使用HTML5画布制作动画的漫画面板
  10. Linux—文件系统与磁盘管理(后)