Fireworks网页设计综合实例7

2016-02-19 19:12 5 1 收藏

下面图老师小编要跟大家分享Fireworks网页设计综合实例7,简单的过程中其实暗藏玄机,还是要细心学习,喜欢还请记得收藏哦!

【 tulaoshi.com - fireworks教程 】

十一、 创建变形动画 

    给一个网站添加动画对于访问者的时间和金钱都是一个不小的花销,因此在添加您的动画前,一定要先考虑好如下问题:动画能否增进您的信息传达力度,访问者下载和播放动画是否迅速、方便,是否有足够的组成动画的内容和资源。尽管网络动画及其传递方式正在不断的发生改变,但传统的GIF动画依然有着不可忽视的优势,我们在这里介绍一下创建GIF动画的两种途径。 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

1、 在层面板新建一个Logo层,将其置于Web Layer层下方。 
2、 我们需要将背景层修改为一个共享图层,打开层面板,切换到背景层,在弹出菜单中选择Share This Layer,将背景层共享,此层上的内容将在所有帧都可见,此层的后面将出现一个共享图标,如下图:


3、 切换到Logo层,在文档的右上角创建www.karsong.com文字。 
4、 按F8将其转换为图形符号Graphic Symbol。 
5、 打开Effect面板,对此符号的实例添加红色Glow效果,如下图所示:


6、 选中此实例,在右键弹出菜单中执行EditClone,复制出一个新的实例,并且带有相同的Glow特效。 
7、 在Effect面板修改第二个实例的特效,将其改为黄色,并改变Glow的范围和大小,如下图:


8、 选择这两个实例,在右键弹出菜单中执行SymbolsTween Instances创建变形动画,设定插入帧数为6帧,并勾选Distribute to Frames分布到帧,如下图所示:


9、 打开Web Layer图层的显示,在此动画位置创建一个切片。 
10、 打开Optimize优化面板,设定此切片的类型为Animated GIF,并设定颜色数为32色,如下图所示:


11、 此动画完成,您可以打开帧面板设定动画帧之间显示的时间。 

十二、 创建实时动画Live Aniamation 

4新增了一种实时动画创作方式,这种方式可以快速的创建一个动画符号,生成的动画具有即时编辑性能,及您可以在任意时间修改形成动画的各种元素属性。 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

1、 在文档左上角新增一个切片,点击工具面板最下方的 按钮关闭切片显示[点击旁边的 按钮可以打开切片显示]。 
2、 在层面板中切换到Logo层,在刚才的左上角位置处输入文字“Karsong”。 
3、 选择此文字对象,按F8快捷键将其转换为一个动画符号,将其命名为“Animate Logo”,符号类型为“Animation”,如下图所示:


4、 在弹出的设置窗口中设置插入帧数为8,并进行如下设置:

    

十一、 创建变形动画 

    给一个网站添加动画对于访问者的时间和金钱都是一个不小的花销,因此在添加您的动画前,一定要先考虑好如下问题:动画能否增进您的信息传达力度,访问者下载和播放动画是否迅速、方便,是否有足够的组成动画的内容和资源。尽管网络动画及其传递方式正在不断的发生改变,但传统的GIF动画依然有着不可忽视的优势,我们在这里介绍一下创建GIF动画的两种途径。 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

1、 在层面板新建一个Logo层,将其置于Web Layer层下方。 
2、 我们需要将背景层修改为一个共享图层,打开层面板,切换到背景层,在弹出菜单中选择Share This Layer,将背景层共享,此层上的内容将在所有帧都可见,此层的后面将出现一个共享图标,如下图:


3、 切换到Logo层,在文档的右上角创建www.karsong.com文字。 
4、 按F8将其转换为图形符号Graphic Symbol。 
5、 打开Effect面板,对此符号的实例添加红色Glow效果,如下图所示:


6、 选中此实例,在右键弹出菜单中执行EditClone,复制出一个新的实例,并且带有相同的Glow特效。 
7、 在Effect面板修改第二个实例的特效,将其改为黄色,并改变Glow的范围和大小,如下图:


8、 选择这两个实例,在右键弹出菜单中执行SymbolsTween Instances创建变形动画,设定插入帧数为6帧,并勾选Distribute to Frames分布到帧,如下图所示:


9、 打开Web Layer图层的显示,在此动画位置创建一个切片。 
10、 打开Optimize优化面板,设定此切片的类型为Animated GIF,并设定颜色数为32色,如下图所示:


11、 此动画完成,您可以打开帧面板设定动画帧之间显示的时间。 

十二、 创建实时动画Live Aniamation 

4新增了一种实时动画创作方式,这种方式可以快速的创建一个动画符号,生成的动画具有即时编辑性能,及您可以在任意时间修改形成动画的各种元素属性。 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

1、 在文档左上角新增一个切片,点击工具面板最下方的 按钮关闭切片显示[点击旁边的 按钮可以打开切片显示]。 
2、 在层面板中切换到Logo层,在刚才的左上角位置处输入文字“Karsong”。 
3、 选择此文字对象,按F8快捷键将其转换为一个动画符号,将其命名为“Animate Logo”,符号类型为“Animation”,如下图所示:


4、 在弹出的设置窗口中设置插入帧数为8,并进行如下设置:

    


5、 拖动生成的动画符号中心的小红点,将其向右拖动到适当位置,注意不要将其拖出刚才创建的切片范围之外。


6、 打开优化面板Optimize设定此切片的类型为“Animated GIF”,颜色数为32,如下图所示:

 

    

来源:http://www.tulaoshi.com/n/20160219/1620284.html

延伸阅读
标签: Web开发
第一步 下面是我们将要动手制作的设计图。在这篇教程里我们只制作首页,不过你可以以此为基础用相同的布局制作内页。 第二步 首先要做的是确定页面结构。随着你对CSS布局的逐步学习,这个过程会变得越来越简单。通过运用大量绝对定位和大幅背景图片,我们可以非常简单地完成这个设计。 什么是绝对定位? 一个HTML元素(比如di...
网页设计中我们会用到很多种样式的分隔线,下面我们就来看看在Fireworks中设计网页虚线有哪些妙招。 方法一、用Fireworks中自带的虚线样式 Fireworks中自带的虚线样式有:三条破折线、加粗破折线、双破折线、基本破折线、实边破折线、点状线。 在网页设计中,我通常的用的是实边破折线。因为它和网页CSS中border的dotted、...
案例说明 此案例为 使用Fireworks 8 制作网页效果图 位图工具 的姊妹篇,前面的案例地址可以点击这里。前面已经给大家介绍了网页效果图的制作,这里要介绍的内容是如何把效果图生成网页。这也是网站制作中最重要的一部分。主要介绍的Fireworks如何和Dreamweaver进行协同工作。本例主要分为4个部分,希望大家能够通过这个例子得到一...
如何 设计 完美勾引用户点击的按钮好的按钮设计一定会是醒目且能勾引用户眼球的。以下是好的按钮设计必不可少的5个特征: 1、颜色 颜色一定要能与平静的页面相比更加与众不同,因此它要更亮而且有高对比度的颜色。 图1 2、位置 它们应当座落于用户期望更容易找到它们的地方。产品旁边、页头、导航的顶部右侧这些都...

经验教程

690

收藏

74
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部