杭州
Flash全站案例设计

我们来学习flash全站案例设计,本案例flash教程以“火”元素为主,使用暗红色为主调,先从网站框架布局入手,进行框架设定,在使用photoshop设计出UI风格的Flash全站,然后在Flash中设计首页和内页的动画效果。

flash教程(Flash全站案例设计)的动画预览效果图如下所示:

该flash教程案例思路:

在photoshop中策划全站的布局和设计模板。

将设计样板导入Flash中,然后制作首页和内页的动画。

在Swift3D中制作三维标志动画,然后将其导出成SWF文件,再制作出加载条  “Flash+Photoshop全站设计”操作流程:

flash教程步骤一、在photoshop中布局全局

1、本例以“火”为基本元素来进行设计,全站以暗红色为主色调,首先从网站框絮布局人手,进行框架没定,如图所示。

框架布局

2、进一步规划主页的布局。如图所示。

主页布局
3、使用Photoshop制作一张背景图,如图所示.然后绘制出第1个框架,如图所示,制作完成后的框架效果如图所示。

绘制背景

绘制框架

框架效果
4、设计主页的各元素,第l栏设计如图所示。

设计第一栏元素


5、主页第2块和第3块主要用来展示作品,如图所示。

作品展示

6、继续设计左边的“最新作品”与“新闻栏”,如图所示,完成后的整体效果如图所示。

设计左边栏目

整体效果

7、在左边添加火焰图形,如图所示,然后设计出banner图形,如图所示

添加火焰图形

设计banner图形

flash教程步骤二、制作首页和内页动画

1、设计完首页后,将背景切割出来作为网页背景,如图所示。

切换背景

2、将各图形切割成png图片,然后导入到Flash中,再制作出标志的出场动画,如图所示

制作标志动画

3、过渡到主页,每一个版块迅速出现,再配合音效来体现整站的气势,其动画如图所示。

主页打开动画

4、主页过渡完成后,新建一个As图层用来暂停主页动画,当单击菜单时更换栏目。如图所示。

更换栏目

5、制作公司介绍的栏目动画,如图所示

公司介绍

6、每个栏目采用不同的banner动画,让整站具有更加丰富的想象力,如图所示。

制作banner动画

7、制作作品展示栏,将banner动画调入到作品展示栏中,如图所示。

作品展示

flash教程步骤三、打造LoGo动画

1、首页与内页设计完成后制作一个引导性动画,当用户进入网站后可看到该画面,如图所示。

引导性动画

2、制作标志动画中的火焰动画,如图所示。

火焰动画

3、进入主贞后出现标志燃烧的动画,首先要制作标志的三维效果,启动Swift 3D,然后导人矢量标志,单击“挤出放样编辑器”选项卡,再单击“添加描点工具”按钮,最后将轮廓线编辑成如图所示的样式;

编辑轮廓线

4、对标志添加纹理效果,如图所示,然后将标志进行微调,如图所示。

添加纹理

微调标志

5、编辑完造型后,然后选择要添加的动画样式,如图所示,再将动画样式拖曳到标志对象上,如图所示

选择动画样式

添加动画

6、预览动画效果,如图16所示,再单击“预览和导出编辑器”选项卡,然后选择“边缘选项”,只生成轮廓动画.如图所示。

预览动画

生成轮廓线

7、单击“生成所有帧”按钮,生成轮廓线动画,如图所示,再单击“导出所有帧”按钮,将动画导出成swf文件,如图所示

轮廓动画

导出动画

8、将swf文件导人到Flash中制作出一拍五的动画,如图所示,然后制作出加载条,如图所示。

制作一拍五动画

制作加载条

9、发布程序,最终效果如图所示。

最终效果

本站编辑:花几树
信息来源:中国动漫产业网
欢迎关注微信公众号
0条评论
 
 
服务热线
官方微信
意见反馈
我要投稿