Flash网站制作实战二-个人Flash网站.ppt

《Flash网站制作实战二-个人Flash网站.ppt》由会员分享，可在线阅读，更多相关《Flash网站制作实战二-个人Flash网站.ppt（41页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第18章 Flash网站制作实战二个人Flash网站l上一章通过一个简单Flash网站的实例，讲解了使用Flash制作网站的基本方法和简单流程。在本章中将制作一个结构更加完整、内容效果更加丰富的Flash个人网站。通过该实例的学习，读者可以对使用Flash制作网站有更进一步的认识，并掌握一些实用的方法和技巧。18.1 网站前期规划l在制作一个Flash网站，尤其是内容比较多、结构比较复杂的网站之前，做好该网站的前期规划是十分重要的。需要事先规划好的内容主要包括：网站的主题和风格、网站的结构以及网站各页面的布局。下面分别就这三方面对本范例网站进行一些规划。18.1.1 网站的主题和风格l本范例网

2、站为一个个人宣传网站，如图所示。该网站的目的主要是随时发布、更新一些网站主人的日记和漫画作品，并实现与浏览者的联系。因此，在选择网站主题方面就需要侧重于个人宣传的重点，即发布和展示个人作品上。18.1.1 网站的主题和风格个人Flash网站 18.1.2 网站的结构l本范例网站在内容上分为5个板块，即首页INDEX页面、HOME页面、COMICS页面、CONTACT页面和LINKS页面。其中，INDEX页面为网站的主页面，其他页面将作为该页面的下级子页面。18.1.2 网站的结构网站基本结构图 18.1.3 页面的布局l从网站的结构可以得出，网站由5个页面组成。其中4个子页面从属于首页，在首页

3、的布局中应当包含在首页的某一区域内。接下来，首先需要做好首页的页面布局，然后根据首页的布局情况，分别对各下级子页面的布局进行设计。18.1.3 页面的布局首页布局 18.2 首页的制作l根据网站的结构和首页的页面布局可以看出，首页中最少需要包含4个主要的页面元素：Loading、网站Logo、导航菜单和标志性元素。除此之外，为丰富页面内容，还需要一些辅助性的元素，如网站整体背景、网页内容区域背景、网站背景音乐及其控制开关等。下面，将首先制作好的这些元素，然后将其串连起来，构成一个有机的整体。18.2.1 制作Loadingl一个网站最开始的部分是Loading部分。Loading部分的好坏，将

4、直接影响到浏览者的浏览。如果浏览者不能够对Loading部分产生兴趣，可能会没有耐心等待Loading的结束。因此，为网站设计一个与自身风格统一，同时又充满新颖性和趣味性的Loading动画是十分重要的。下面是首页Loading的具体制作步骤：18.2.1 制作Loading 绘制Loading外观 添加动态文本框 18.2.2 制作导航菜单l首页的导航菜单分为4个导航项，即HOME、COMICS、CONTACT和LINKS，分别指向4个下级子页面。以下是导航菜单元素的制作步骤：18.2.2 制作导航菜单 绘制导航条外观 制作HOME导航项 18.2.2 制作导航菜单 放置隐形按钮 制作其他导

5、航项 18.2.3 制作网站动态背景l对于一个需要突出时尚动感风格特色的网站来说，应当具有一个充满动感、不断变化的背景。仅仅只有一个静止背景的话会令人感觉毫无生气。因此，接下来将为本网站制作一个动态的背景，该背景将不断地从舞台中心向外扩散出颜色不一的圆形。18.2.3 制作网站动态背景BG_cir图形元件 元件内舞台显示 18.2.4 制作其他页面元素l本节将制作首页中的其他页面元素，这些页面元素包括：网站Logo、网页内容背景、标志性元素和背景音乐控制开关等。18.2.4 制作其他页面元素 网站Logo 人物形象 18.2.4 制作其他页面元素 BG元件内的舞台显示 声音播放状态 声音关闭状

6、态 18.2.5 制作首页过渡动画l制作过渡动画前，应当首先考虑好整个动画的过程，安排好各页面元素在影片中出现的时间、位置以及出现的方式。在制作过程中，要不断地对影片进行测试以确定最令人满意的动画效果。18.2.5 制作首页过渡动画放置BG_cir图形元件 放置HOME导航项 18.2.5 制作首页过渡动画 添加效果音 首页的效果 18.3 下级子页面的制作l本范例网站包括4个下级子页面，即HOME页面、COMICS页面、CONTACT页面和LINKS页面。接下来将分别制作这4个下级子页面，并发布为单独的SWF文件home.swf、comics.swf、contact.swf和links.sw

7、f。18.3.1 制作HOME页面lHOME页面将用来展示网站主人的最新动态信息，因此需要从外部调用文件，以方便内容的更新。在制作时，要确保影片的舞台大小与首页相同，并将所有的内容都限制在首页允许显示的范围内。18.3.1 制作HOME页面背景图形 创建对话气泡的出现动画 18.3.1 制作HOME页面添加动态文本框 测试HOME页面效果 18.3.2 制作COMICS页面lCOMICS页面将用来展示网站主人的漫画作品，这些作品以缩略图的形式出现在该页中。当浏览者点击这些缩略图时，将跳转到相应的网页显示。由于作品会经常更新，应当采用SWF文件从外部调用图片的方法，以方便页面内容的更新。18.3

8、.2 制作COMICS页面创建第二个背景 绘制闪光图形 18.3.2 制作COMICS页面添加按钮 测试COMICS页面效果 18.3.3 制作CONTACT页面lCONTACT页面中提供了一个可供浏览者在线发送E-mail的功能，能够直接将浏览者填写的表单信息发送到指定的邮箱中。浏览者提交信息时，程序会首先检查表单中所填写的信息。如果表单中信息的格式不正确，将会弹出一个警告对话框，提示浏览者正确填写。18.3.3 制作CONTACT页面添加第1层背景 添加文字输入区域背景 18.3.3 制作CONTACT页面绘制对话气泡 测试CONTACT页面效果 18.3.4 制作LINKS页面lLINK

9、S页面中将会提供一些网站主人推荐的网址链接。由于这一页面也会经常更新，所以应当将链接地址和网站介绍以外部文件的形式调用，以方便日后的更新维护。该页面的制作方法与前几个页面大同小异，18.3.4 制作LINKS页面 创建按钮出现动画 添加动态文本框 18.3.4 制作LINKS页面 测试LINKS页面效果 18.4 网站的整合与发布l网站的全部页面已经制作完成了，接下来将通过相应的ActionScript动作将这些网页联系起来。然后通过发布各页面为相应的文件格式，将所有页面整合成一个完整的网站。18.4.1 网站的整合l整合网站之前，首先确保首页文件index.swf，4个子页面文件home.swf、comics.swf、contact.swf、links.swf以及所有需要调用的外部文件都位于同一文件夹目录下，18.4.1 网站的整合所有页面文件 载入页面效果 18.4.2 网站的发布l网站整合完成后，需要将首页发布为HTML格式的网页文件以实现网站在浏览器中的显示。18.4.2 网站的发布 “发布设置”对话框 Flash格式参数设置 HTML格式参数设置 18.4.2 网站的发布 在浏览器中测试Flash网站