在创建该模块之前我们先来看一下该模块的功能和完成后的效果（当然，在实际工作中不可能先看到完成后的效果，这里只是为了使您更好的学习怎样创建内容），如图26.1所示：
图26.1 模块总体效果
26.3创建“特色菜肴”（food）模块
“特色菜肴”（food）模块是本餐厅的核心模块之一，利用该模块，用户可以查看餐厅的各种菜肴，并可以提前预订。
下面我们就来看一下该模块的界面和功能操作，如图26.15所示：
图26.15 总体效果
使用该模块，你可以选择不同的品种菜肴，察看该菜肴 的详细情况，包括察看该菜肴的制作过程（如果有的化）；如果觉得该菜肴比较好，那么比就可以点击“放入购物车”按钮预定该菜肴；你也可以使用购物车管理要 预定的菜肴，包括取消预定、统计等；最后，要使预定生效（写入数据库），点击“购买”按钮。
了解了“特色菜肴”（food）模块的界面和功能操作，下面我们就来制作该模块。
26.4创建“预定座位”（reserve）模块
“预定座位”（reserve）模块可以让用户在网上察看到经营餐厅的座位布局（包括每一座位能够容纳的客人数），并可以搜索某一特定时间范围内座位的预定情况，从而可以根据实际情况预定自己所钟爱的座位（尤其对那些老顾客来说，这一功能是吸引回头客的有效手段）。
下面我们就来看一下该模块的界面和功能操作，如图26.26所示：
图26.26 总体效果图
用户如果要预定座位可以首先通过检索某一时间范围内 座位的预定情况，如果从检索的结果看到某一座位没有预定，那么就可以点击该座位图标预定，对于那些在该时间段内已经预订的座位来说，座位图标就显示为已经 预订的状态（座位旁已经有人入座），这样用户就能一目了然，从容的根据系统的提示信息预定自己想要的座位了。
如果你不想查询，也可以通过视频和语音方式联系客服来预定座位，如图26.27所示：
图26.27总体效果图
了解了“预定座位”（reserve）模块的界面和功能操作，下面我们就来制作该模块。
启动Flash创作环境，新建一个文档，将该文档舞台幅面大小设置为590X435，将其保存到C:\resin\webapps\YSF\reserve目录下，文件名为reserve.fla。
26.4.1准备必要的资源
在这个Flash影片应用程序模块中，我们要用到几 个重要的图像素材资源，包含这样几个基本图像：座位图像（包括方形座位和圆形座位，以及入座的人员）、信息提示对话框将要用到的图标（包括信息提示图标、 出错状态提示图标等），此外还有搜索按钮（这可以从前面的模块文档中获取）。
1.创建提示对话框的图标
首先我们来创建用于信息提示对话框的图标：
1按Ctrl+ F8键分别新建四个影片剪辑元件：Alert_infoIcon、Alert_errorIcon、Alert_questionIcon和Alert_warningIcon，如图26.28所示：
图26.28 图标元件
注意这些影片剪辑元件的注册点（Registration）位于左上角。
2图标影片剪辑元件的设计完成后，接下来就是为这四 个影片剪辑元件定义”标识符”，根据前面的方法介绍，我们将四个影片剪辑元件的”标识符”与它们的名称设置成同样，分别是： Alert_infoIcon、Alert_errorIcon、Alert_questionIcon和Alert_warningIcon。这样，这 些图标影片剪辑元件就可以被Alert组件调用了。
26.6.3创建Flash影片应用程序处理CSS和HTML文档
该Flash影片应用程序非常简单，你可以先来看一下完成的SWF文档，如图26.35所示：
图26.35 总体效果
可以看到，在该应用程序界面上仅有一个文本框和三个按钮，下面我们就来创建它：
1启动Flash创作环境，新建一个文档，设置舞台幅面大小为590X435，将文档保存到YSF\history目录下，文件名为history.fla；
2新建一个影片剪辑元件main，保持该元件处于编辑状态，在舞台上绘制一个背景图案，与舞台幅面大小相同。
拖一个TextArea组件到舞台上创建实例，用来显示一些重要的信息（可以是图文混排的方式），命名实例名为main_txt。并且创建一个静态文本框作为该模块的标题。
然后将前面我们创建的按钮元件login btn拖放到当前文档的舞台上创建三个实例，将这三个实例和TextArea组件实例按照需求和喜好排列好，并分别为三个按钮实例定义相应的标签及实例 名：first_btn、two_btn、three_btn，最后的舞台效果如图26.36所示：
图26.36 舞台效果
3在上面，设计的工作已经全部完成，下面我们来编写脚本加载样式表文档并处理HTML文档以完成该模块的功能。在库面板中双击影片剪辑元件main使它处于编辑状态，在帧中编写脚本代码如下：
stop();
var story:XML = new XML();
//——————————————————————————–
function init() {
var ss:TextField.StyleSheet = new TextField.StyleSheet();
ss.load(“history/content/history.css”);
main_txt.styleSheet = ss;
main_txt.html = true;
main_txt.wordWrap = true;
main_txt.editable = false;
main_txt.multiline = true;
//—————————————————————————-
story.ignoreWhite = true;
story.load(“history/content/introduction.html”);
story.onLoad = function() {
trace(story);
main_txt.text = story;
};
}
//——————————————————————————–
this.first_btn.onRelease = function() {
story.load(“history/content/introduction.html”);
};
this.two_btn.onRelease = function() {
story.load(“history/content/frame.html”);
};
this.three_btn.onRelease = function() {
story.load(“history/content/future.html”);
};
//——————————————————-
init();
按Ctrl+Enter键生成一个SWF文档。现在你可以启动主引导模块测试一下效果，以做出相应的修改。
转载请注明：夜阑小雨 » 开发网上餐厅系统——项目小组协作创建功能模块
