建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > FireWorks教程 >

Fireworks制作草生草长之草样年华gif动画

更新时间:2017-04-13整理编辑:建站学习网阅读:0

   gif文件:

  png源文件:

  作品名称:《大学四年纪念-草样年华》

  作品格式:gif动画

  创作原因:为纪念草样的大学生活

  作品介绍:用草周而复始的贱生表达大学四年颓废中有理想的生活状态

  by RockHward2007.7.12

  1、为动画准备元素

  在这一节里,你将会为这个gif动画准备好各个图形元素,

  包括一个背景、一个标题和一个签名。

  1.1

  新建一个250*70px黑色背景画布的文件。

  如下图,绘画一个符合画布大小的矩形,填充如下图所示,注意填充手柄。

  1.2

  将矩形所在的层命名为“grass“层。

  新建一个命名为“text“的层,在该层上键入你喜欢的标题和签名,选择你喜欢的字体,颜色自定。

  然后将标题和签名的混合模式改为“变暗“。

  最后在层面板中双击“text“层,在“共享交叠帧“选项打勾。对“grass“层也钩选“共享交叠帧“。

  2、草生草长动画制作

  在这一节里,你将会完成模拟草的生长的动画制作。

  首先你将会制作一个动画元件,然后分两步,分别模拟草的消退和生长。

 

  2.1

  在“text“层和“grass“层之间新建一个叫“move“的层。

  然后锁定“text“层和“grass“层。

  在“move“层上绘画一个如下图填充的矩形。

  混合模式改为“加热“。调节渐变填充手柄,使之如图所示。

 

 

 

 

  2.2

  选中刚才绘画的矩形,按F8转换为“动画“类型元件,元件命名为“草“。

  然后在“动画“设置对话框中“帧“设为“10“。按“确定“后会有一个提示窗口,也按“确定“通过。

  更改画布上“草“的动画实例的混合模式为“加热“。

  按住shift,拖动“草“动画实例的红色控点,使之到达如图1所示的位置。

  单击红色控点,检查最后一帧是否如图2所示,否则继续按着shift拖动红色控点以达到图2的效果。

 

  2.3

 

  2.4

  调节时间:打开帧面板,同时选中第2到第10帧,然后双击然后双击右方数字位置,弹出“帧延时“,输入“10“。双击帧1,输入“100“。

  同时选中第1到第10帧,然后单击帧面板右上角的菜单,点选“重制帧“。

  调节时间:帧11时间设为“200“,帧12~18设为“10“,帧19设为“100“。

  2.5

  现在要制作草生长的效果。

  选中帧11,选中“草“的动画实例,拖动红色和绿色控点,交换红色控点和绿色控点的位置。

  这样,从帧11到帧19就模拟了草的生长效果了。

  End

  最后选择gif格式导出gif动画。

  技术总结:

  利用fireworks的混合模式制作gif动画,可以产生颜色变化多端的感觉。

本文网址:https://www.dedexuexi.com/wysj/FireWorks/2899.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
Fireworks制作文字水波扩散效果
« 上一篇2017年04月13日
Fireworks CS5新增功能
2017年04月13日下一篇 »
  • Fireworks CS5、CS4、CS3版本功能比较
    0阅读
    Adobe Flash Professional CS5 软件可以完成精彩的交互创作,可用于提供跨个人计算机、移动设备以及几乎任何尺寸和分辨率的屏幕一致呈现的令人痴迷的互动体验。 Adobe Fireworks CS5 软件使用户能为 Web 以及几乎任何设备(比如智能手机、报亭到嵌入式屏幕等)创建...
  • Fireworks教程:轻松制作水晶小图标
    0阅读
  • 利用Fireworks打造石头字效果
    0阅读
    1、素材。烂墙壁照片一张以及胶片照片一张。 2、新建500*350画布,插入背景图片。然后调整亮度和色调如下。 3、拉一个大小为500*350的放射状渐变的矩形。参数设置如下。 4、输入文字影视。字
  • Fireworks教程:制作波尔卡点边框
    0阅读
    效果如下 选择一个图片,用FW打开 在图片上面建立一个层,作一个和图片一样大小的矩形,用白色填充 为这个举行添加效果Edges 具体设置如图 注意Color(颜色填充)这里选择黑色 选中矩形,Ctr
  • Fireworks简单方法设计网页闪字动画效果
    0阅读
    最近网络上很流行一种超炫的闪彩文字及签名,在QQ空间里、论坛签名里、各类回贴和博客都有炫彩闪字的身影,一些具有个性的闪字还相当耀眼,那么这种炫彩字是如可制作出来的呢?其实制作
 
QQ在线咨询