当前时间:Saturday 2016年12月03日 欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

当前位置: 首页 >> flash >> 正文

开发网上餐厅系统——项目小组协作创建功能模块

在创建该模块之前我们先来看一下该模块的功能和完成后的效果(当然,在实际工作中不可能先看到完成后的效果,这里只是为了使您更好的学习怎样创建内容),如图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文档。现在你可以启动主引导模块测试一下效果,以做出相应的修改。

作者:夜阑小雨
原文链接:开发网上餐厅系统——项目小组协作创建功能模块
夜阑小雨版权所有,转载本网站文章时请保留此信息。

收藏和分享: 转贴到开心网 转贴到校内网 分享到 Twitter Delicious 分享到 Google Reader 分享到 百度收藏 分享到 QQ收藏

所在分类:flash

评论信息

0 条评论 发表评论

发布评论

您必须登录才能发表评论。

网站客户端下载