《Flash网站制作实战二-个人Flash网站.ppt》由会员分享，可在线阅读，更多相关《Flash网站制作实战二-个人Flash网站.ppt（41页珍藏版）》请在三一办公上搜索。
1、第18章 Flash网站制作实战二个人Flash网站,上一章通过一个简单Flash网站的实例，讲解了使用Flash制作网站的基本方法和简单流程。在本章中将制作一个结构更加完整、内容效果更加丰富的Flash个人网站。通过该实例的学习，读者可以对使用Flash制作网站有更进一步的认识，并掌握一些实用的方法和技巧。,18.1 网站前期规划,在制作一个Flash网站，尤其是内容比较多、结构比较复杂的网站之前，做好该网站的前期规划是十分重要的。需要事先规划好的内容主要包括：网站的主题和风格、网站的结构以及网站各页面的布局。下面分别就这三方面对本范例网站进行一些规划。,18.1.1 网站的主题和风格,本范
2、例网站为一个个人宣传网站，如图所示。该网站的目的主要是随时发布、更新一些网站主人的日记和漫画作品，并实现与浏览者的联系。因此，在选择网站主题方面就需要侧重于个人宣传的重点，即发布和展示个人作品上。,18.1.1 网站的主题和风格,个人Flash网站,18.1.2 网站的结构,本范例网站在内容上分为5个板块，即首页INDEX页面、HOME页面、COMICS页面、CONTACT页面和LINKS页面。其中，INDEX页面为网站的主页面，其他页面将作为该页面的下级子页面。,18.1.2 网站的结构,网站基本结构图,18.1.3 页面的布局,从网站的结构可以得出，网站由5个页面组成。其中4个子页面从属于
3、首页，在首页的布局中应当包含在首页的某一区域内。接下来，首先需要做好首页的页面布局，然后根据首页的布局情况，分别对各下级子页面的布局进行设计。,18.1.3 页面的布局,首页布局,18.2 首页的制作,根据网站的结构和首页的页面布局可以看出，首页中最少需要包含4个主要的页面元素：Loading、网站Logo、导航菜单和标志性元素。除此之外，为丰富页面内容，还需要一些辅助性的元素，如网站整体背景、网页内容区域背景、网站背景音乐及其控制开关等。下面，将首先制作好的这些元素，然后将其串连起来，构成一个有机的整体。,18.2.1 制作Loading,一个网站最开始的部分是Loading部分。Loadi
4、ng部分的好坏，将直接影响到浏览者的浏览。如果浏览者不能够对Loading部分产生兴趣，可能会没有耐心等待Loading的结束。因此，为网站设计一个与自身风格统一，同时又充满新颖性和趣味性的Loading动画是十分重要的。下面是首页Loading的具体制作步骤：,18.2.1 制作Loading,绘制Loading外观 添加动态文本框,18.2.2 制作导航菜单,首页的导航菜单分为4个导航项，即HOME、COMICS、CONTACT和LINKS，分别指向4个下级子页面。以下是导航菜单元素的制作步骤：,18.2.2 制作导航菜单,绘制导航条外观 制作HOME导航项,18.2.2 制作导航菜单,放
5、置隐形按钮 制作其他导航项,18.2.3 制作网站动态背景,对于一个需要突出时尚动感风格特色的网站来说，应当具有一个充满动感、不断变化的背景。仅仅只有一个静止背景的话会令人感觉毫无生气。因此，接下来将为本网站制作一个动态的背景，该背景将不断地从舞台中心向外扩散出颜色不一的圆形。,18.2.3 制作网站动态背景,BG_cir图形元件 元件内舞台显示,18.2.4 制作其他页面元素,本节将制作首页中的其他页面元素，这些页面元素包括：网站Logo、网页内容背景、标志性元素和背景音乐控制开关等。,18.2.4 制作其他页面元素,网站Logo 人物形象,18.2.4 制作其他页面元素,BG元件内的舞台显
6、示 声音播放状态 声音关闭状态,18.2.5 制作首页过渡动画,制作过渡动画前，应当首先考虑好整个动画的过程，安排好各页面元素在影片中出现的时间、位置以及出现的方式。在制作过程中，要不断地对影片进行测试以确定最令人满意的动画效果。,18.2.5 制作首页过渡动画,放置BG_cir图形元件 放置HOME导航项,18.2.5 制作首页过渡动画,添加效果音 首页的效果,18.3 下级子页面的制作,本范例网站包括4个下级子页面，即HOME页面、COMICS页面、CONTACT页面和LINKS页面。接下来将分别制作这4个下级子页面，并发布为单独的SWF文件home.swf、comics.swf、cont
7、act.swf和links.swf。,18.3.1 制作HOME页面,HOME页面将用来展示网站主人的最新动态信息，因此需要从外部调用文件，以方便内容的更新。在制作时，要确保影片的舞台大小与首页相同，并将所有的内容都限制在首页允许显示的范围内。,18.3.1 制作HOME页面,背景图形 创建对话气泡的出现动画,18.3.1 制作HOME页面,添加动态文本框 测试HOME页面效果,18.3.2 制作COMICS页面,COMICS页面将用来展示网站主人的漫画作品，这些作品以缩略图的形式出现在该页中。当浏览者点击这些缩略图时，将跳转到相应的网页显示。由于作品会经常更新，应当采用SWF文件从外部调用图
8、片的方法，以方便页面内容的更新。,18.3.2 制作COMICS页面,创建第二个背景 绘制闪光图形,18.3.2 制作COMICS页面,添加按钮 测试COMICS页面效果,18.3.3 制作CONTACT页面,CONTACT页面中提供了一个可供浏览者在线发送E-mail的功能，能够直接将浏览者填写的表单信息发送到指定的邮箱中。浏览者提交信息时，程序会首先检查表单中所填写的信息。如果表单中信息的格式不正确，将会弹出一个警告对话框，提示浏览者正确填写。,18.3.3 制作CONTACT页面,添加第1层背景 添加文字输入区域背景,18.3.3 制作CONTACT页面,绘制对话气泡 测试CONTACT
9、页面效果,18.3.4 制作LINKS页面,LINKS页面中将会提供一些网站主人推荐的网址链接。由于这一页面也会经常更新，所以应当将链接地址和网站介绍以外部文件的形式调用，以方便日后的更新维护。该页面的制作方法与前几个页面大同小异，,18.3.4 制作LINKS页面,创建按钮出现动画 添加动态文本框,18.3.4 制作LINKS页面,测试LINKS页面效果,18.4 网站的整合与发布,网站的全部页面已经制作完成了，接下来将通过相应的ActionScript动作将这些网页联系起来。然后通过发布各页面为相应的文件格式，将所有页面整合成一个完整的网站。,18.4.1 网站的整合,整合网站之前，首先确保首页文件index.swf，4个子页面文件home.swf、comics.swf、contact.swf、links.swf以及所有需要调用的外部文件都位于同一文件夹目录下，,18.4.1 网站的整合,所有页面文件 载入页面效果,18.4.2 网站的发布,网站整合完成后，需要将首页发布为HTML格式的网页文件以实现网站在浏览器中的显示。,18.4.2 网站的发布,“发布设置”对话框 Flash格式参数设置 HTML格式参数设置,18.4.2 网站的发布,在浏览器中测试Flash网站,
