注册本站  论坛  繁體中文

电脑技巧
手机 | MP3 | MP4 | 显卡 | 主板 | 显示器 | 光存储 | 笔记本 | 网络设备 | 移动存储 | 数码相机
键鼠 | CPU | 音箱 | GPS | 电视 | 服务器 | 投影机 | 机箱电源 | 品牌电脑 | 办公打印 |
| 网站首页 | Cisco | Windows | Linux | Java | Dotnet | Oracle | 网页设计 | 平面设计 | 安全 | 软件应用 | 电脑维修 | 办公维修 |
您现在的位置: 电脑技巧 >> 网页设计 >> Fireworks >> 设计实例 >> 网页设计正文

Fireworks巧妙制作地球旋转动画

文章来源:中国设计秀网络学院cnwebshow.com 作者:佚名 更新时间:2007-12-30 11:50:44 【 】 【加入收藏
◆ 网页平面多媒体培训、认证考试免费咨询热线:400-700-5807   进入网络咨询平台

 本文中我们用Fireworks制作地球旋转动画,主要练习蒙板与动画原件的应用。

  我们先看看最终效果:

Fireworks 制作地球旋转动画效果预览_中国IT实验室转载
效果预览

  制作具体步骤:

  1、双击系统任务栏右下角的时间。

Fireworks 制作地球旋转动画图1_中国IT实验室转载
图1

  2、就地取材,打开电脑中“日期和时间”属性对话框后,按ALT+PrintScreenSysRq键,将对话框屏幕复制到剪贴板中。

Fireworks 制作地球旋转动画图2_中国IT实验室转载
图2

  3、进入Fireworks,新建文件,粘贴。粘贴后利用裁剪工具将世界地图部分裁剪下来,裁剪时一定要放大比例进行裁剪,精确一些。

Fireworks 制作地球旋转动画图3_中国IT实验室转载
图3

◆ 网页平面多媒体培训、认证考试免费咨询热线:400-700-5807   进入网络咨询平台


  4、将裁剪好的世界地图克隆一份(CTRL+SHIFT+D),移动到画布右侧之外,空白处单击,选择属性栏中的“符合画布”项,扩大画布,再详细调整地图素材的位置,将两张图片左右无缝拼接在一起。

Fireworks 制作地球旋转动画图4_中国IT实验室转载
图4

  5、选取两幅图片素材,修改菜单——平面化所选,将两幅图片合并为同一张图片。

Fireworks 制作地球旋转动画图5_中国IT实验室转载
图5

  6、新建文件,300*200PX,绘制一个合适大小的正圆,笔触选择无,白色填充。

Fireworks 制作地球旋转动画_中国IT实验室转载
图6

◆ 网页平面多媒体培训、认证考试免费咨询热线:400-700-5807   进入网络咨询平台

  7、复制刚绘制的圆形,在层面板中新建一层,选取新建的层,粘贴。

Fireworks 制作地球旋转动画_中国IT实验室转载
图7
 8、为方便说明,这里我们将步骤6中的圆所在层叫做层1,步骤7中的圆所在层叫做层2。设定粘贴到层2中的圆形为1PX黑色柔化线段笔触。

Fireworks 制作地球旋转动画_中国IT实验室转载
图8

  9、设定层2中的圆形为放射状填充:左右两侧颜色均为黑色,将上方的不透明度选项做调整,将其中左侧的不透明度选项稍向右移动,并将其值设置为0。

Fireworks 制作地球旋转动画_中国IT实验室转载
图9

  10、将渐变填充右侧的不透明度选项设置为50左右。

Fireworks 制作地球旋转动画_中国IT实验室转载
图10

  11、调整后层2中的圆形如图所示。

Fireworks 制作地球旋转动画_中国IT实验室转载
图11

  12、将步骤5中的地图素材复制,粘贴到层1中。

Fireworks 制作地球旋转动画_中国IT实验室转载
图12

  13、使用缩放工具将地图素材不改变长宽比例进行缩放,缩放后的高度和圆形一致,并将地图素材右对齐圆形,注意上下的位置和圆形重合,不能有多余的空隙和边缘露出,此时选取地图素材看属性面板,记下地图素材现在的宽度,教程图片中的宽度是586像素,大家制作时按自己的实际宽度记下。

Fireworks 制作地球旋转动画_中国IT实验室转载
图13

◆ 网页平面多媒体培训、认证考试免费咨询热线:400-700-5807   进入网络咨询平台

  14、在层面板中将地图素材拖动到层1中圆形下方。

Fireworks 制作地球旋转动画_中国IT实验室转载
图14
 15、选取地图素材,按F8,打开元件属性面板,将地图素材转换为动画元件。

Fireworks 制作地球旋转动画_中国IT实验室转载
图15

  16、设置动画的帧数,移动方向,还有移动距离。因为地图素材要向右侧移动(地球自西向东旋转嘛),所以教程中填写的数值是0。因为地图素材被我们拼接成了两张,旋转一周也就是移动一整张地图素材的宽度,或者说是缩放后的地图素材的一半宽度,在步骤13中,我们记下了地图素材在缩放后的宽度586PX,将此宽度除以2,得到结果293PX(大家要根据自己记下的宽度为主算其数值),将293数值填入移动距离项目中。

Fireworks 制作地球旋转动画_中国IT实验室转载
图16

  17、按住SHIFT键选取层1中的圆形和地图动画元件,修改菜单——蒙板——组合为蒙板。

Fireworks 制作地球旋转动画_中国IT实验室转载
图17

  18、选取层1中的蒙板对象。

Fireworks 制作地球旋转动画_中国IT实验室转载
图18

  19、在属性栏设定蒙板方式为路径轮廓。其实教程中的蒙板圆形是白色,不选这项也可以,如果大家做的时候蒙板的圆形不是白色,此步骤必不可少。

Fireworks 制作地球旋转动画_中国IT实验室转载
图19

  20、双击层2的名字,选取“共享交叠帧”项目。

Fireworks 制作地球旋转动画_中国IT实验室转载
图20

  21、也可以适当给层2中的圆形加阴影效果来增强立体感,最后别忘了设置首帧和尾帧的时间,让首帧和尾帧时间加一起等于普通其他帧的时间,因为首帧和尾帧的内容是一样的,如果不改时间,动画会出现停顿。这时候可以播放动画了。导出GIF时,因为层2中的圆形有渐变,可能会出现颜色过渡不自然,大家可以在导出选项中设定抖动选项。

◆ 网页平面多媒体培训、认证考试免费咨询热线:400-700-5807   进入网络咨询平台

  PNG 源文件:

Fireworks 制作地球旋转动画_中国IT实验室转载
图21

  • 上一篇网页设计:

  • 下一篇网页设计: 没有了
  • 最 新 热 门
     Flash教程:if条件语句的用法
     Flash教程:测试AS代码的执行速度
     Flash教程:trace()的使用
     实现在AJAX下的前进、后退功能
     创建吸引访问者的网站内容的14种方法
     LBS功能:图片的自适应实现代码
     LBS增加引用地址和永久地址点击复制功能
     学习CSS布局网页的一些实例
     CSS学习者:2008年不要作浮躁的人
     网页设计制作之改进超级链接效果
    最 新 推 荐
     Fireworks巧妙制作地球旋转动画
     Fireworks教程:液体金属表面特效制作
     Fireworks教程:立体质感水晶的制作过程
     Fireworks笔触打造另类十字架
     Fireworks笔触绘制飘逸的白云
     Fireworks制作按钮简明教程
     Fireworks粒子插件帮助AE制作绚丽焰火
     Fireworks制作超酷质感按钮
     巧用Fireworks笔触绘制飘逸的白云
     用Fireworks打造的脸部特写
    相 关 文 章

    Firewoks打造液体金属表面特效
    Fireworks制作立体质感3D水晶字
    Fireworks教程:液体金属表面特效制作
    Fireworks教程:立体质感水晶的制作过程
    HTML表单标记教程(5):文字域标记<TEXTAREA>
    Fireworks笔触打造另类十字架
    关于Dreamweaver MX 2004的PPT格式课件
    浏览器Quirksmode模式与CSSCompat模式
    Fireworks CS3切片工具的使用
    Fireworks笔触绘制飘逸的白云

    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告

     

    Copyright 2006-2008 pcjx.com All Rights Reserved
    电脑技巧 版权所有 粤ICP备06059145号 地图
    本网站所有内容未经许可不得转载或做其他使用