创建动画(Animation)(上)
2005-07-02 16:57:14 来源:WEB开发网核心提示:创建动画(Animation)(上)gif动画是web创作中不可缺少的部分,从前web设计师们需要一帧一帧绘制出静止的图象,创建动画(Animation)(上),然后将他们摆放到专门的gif动画软件中再加工,其步骤之烦琐让人望而生畏,下面的图片显示了每一帧时符号的形态,ok,但是fireworks的出现彻底改变了这一切
创建动画(Animation)(上)
gif动画是web创作中不可缺少的部分,从前web设计师们需要一帧一帧绘制出静止的图象,然后将他们摆放到专门的gif动画软件中再加工,其步骤之烦琐让人望而生畏。但是fireworks的出现彻底改变了这一切,不但所有的步骤可以在Fireworks中完成,而且简洁方便,Fireworks4的动画创作工具更是比以前的版本有了新的提高。
现在我们就来创建一幅动画,同时体会Fireworks强大的功能。首先在画板上绘制一个矩形,如图:
将它转化为动画(Animation),使用菜单Insert->Convert to Symbol或者使用快捷键F8,在弹出的窗口中选择Animation,接下来的窗口会要求你设置动画的运动方式,你可以在后面的object面版中随时修改这些参数,所以暂时不管先ok,这样一个Animation就创建好了。Animation是符号的一种,符号类型的对象在左下角都会有一个箭头的标志,在这里先要说明一下3种不同的符号(Symbol)类型:
从上面可以看出来,这部分的概念和Flash非常相似,只是将Movie Clip的名称换成了Animation,其实本质是一样的。不同类型的符号之间可以非常方便的互相转换,打开Library面版,点击面版右上角的箭头在弹出的菜单中选择PRoperties就可以转换符号的类型。
还有一点顺便在这里提一下,选择菜单Modify->Symbol->Break Apart可以将一个已有的符号恢复到原来的类型,恢复后它会以Group的形式出现,Ungroup一下就会完全呈现出它最原始的形态(矢量图形、位图、文字或其他的类型)。
在了解了这些概念后,我们开始真正的创建一幅动画。选中刚才已经转换好的那个Animation,同时打开object面版,在object面版中修改动画运动的方式。
在这里我不得不又一次说,它和Flash是多么的相象!
设定Frames为15,Scaling为150,即动画终止时动画符号的大小为原始大小的1.5倍,Opacity为100到0,即一个渐淡消失的效果,Rotation为90CW,即顺时钟旋转90度。完成后从符号中央可以拖出一条动画线。
当看到这条动画线的时候我又一次的似曾相识了,对了,它就是在Director中的动画线,现在也被借用到Fireworks中来了,是整合的需要吗?这个问题只有问Macromedia了。绿色的点代表动画的开始帧,红色的点代表动画的结束帧,中间每个兰色的点代表每个过度帧的形态。你可以通过拖动始末点来改变动画的运动轨迹。下面的图片显示了每一帧时符号的形态。
ok,play一下来欣赏刚才的成果。
gif动画是web创作中不可缺少的部分,从前web设计师们需要一帧一帧绘制出静止的图象,然后将他们摆放到专门的gif动画软件中再加工,其步骤之烦琐让人望而生畏。但是fireworks的出现彻底改变了这一切,不但所有的步骤可以在Fireworks中完成,而且简洁方便,Fireworks4的动画创作工具更是比以前的版本有了新的提高。
现在我们就来创建一幅动画,同时体会Fireworks强大的功能。首先在画板上绘制一个矩形,如图:
将它转化为动画(Animation),使用菜单Insert->Convert to Symbol或者使用快捷键F8,在弹出的窗口中选择Animation,接下来的窗口会要求你设置动画的运动方式,你可以在后面的object面版中随时修改这些参数,所以暂时不管先ok,这样一个Animation就创建好了。Animation是符号的一种,符号类型的对象在左下角都会有一个箭头的标志,在这里先要说明一下3种不同的符号(Symbol)类型:
- Graphic:图形,中心是一个十字,组成动画的最基本的元素。
- Animation:动画,中间有一个点,一系列的Graphic就是一个Animation
- Button:按钮,带有切割热区的就是按钮。
从上面可以看出来,这部分的概念和Flash非常相似,只是将Movie Clip的名称换成了Animation,其实本质是一样的。不同类型的符号之间可以非常方便的互相转换,打开Library面版,点击面版右上角的箭头在弹出的菜单中选择PRoperties就可以转换符号的类型。
还有一点顺便在这里提一下,选择菜单Modify->Symbol->Break Apart可以将一个已有的符号恢复到原来的类型,恢复后它会以Group的形式出现,Ungroup一下就会完全呈现出它最原始的形态(矢量图形、位图、文字或其他的类型)。
在了解了这些概念后,我们开始真正的创建一幅动画。选中刚才已经转换好的那个Animation,同时打开object面版,在object面版中修改动画运动的方式。
- Frames:设定这段动画用多少帧来完成,理论上帧数越多动画越流畅,但同时文件的尺寸也越大。
- Scaling:缩放,默认值是100,即不进行缩放,如果数字小于100则代表缩小,数字大于100则放大。
- Opacity:透明度,有2个数值,即代表透明度从多少变化到多少。
- Rotation:旋转,单位是角度,CW为顺时钟方向,CCW为逆时钟方向。
在这里我不得不又一次说,它和Flash是多么的相象!
设定Frames为15,Scaling为150,即动画终止时动画符号的大小为原始大小的1.5倍,Opacity为100到0,即一个渐淡消失的效果,Rotation为90CW,即顺时钟旋转90度。完成后从符号中央可以拖出一条动画线。
当看到这条动画线的时候我又一次的似曾相识了,对了,它就是在Director中的动画线,现在也被借用到Fireworks中来了,是整合的需要吗?这个问题只有问Macromedia了。绿色的点代表动画的开始帧,红色的点代表动画的结束帧,中间每个兰色的点代表每个过度帧的形态。你可以通过拖动始末点来改变动画的运动轨迹。下面的图片显示了每一帧时符号的形态。
ok,play一下来欣赏刚才的成果。
[]
- ››创建基于PPTP的站点到站点VPN连接:ISA2006系列之...
- ››创建基于L2TP的站点到站点的VPN连接:ISA2006系列...
- ››创建一个Twisted Reactor TCP服务器
- ››创建Windows Mobile上兼容性好的UI 程序
- ››创建android的Service
- ››创建远古部落环境与原住民角色
- ››创建并扩展Apache Wicket Web应用
- ››创建不在任务条中显示窗口按钮的应用
- ››创建 Android 文件系统(Root file system)
- ››创建 Android 系统步骤简介
- ››创建 Android SD Card 映像的方法
- ››创建自定义配置节
赞助商链接