Flash表单制作实例集锦(二)
第2节 存储及查阅信息所有 热点网络 热点下载 热点网络学院 版权所有=
(本例参考源文件请点击这里下载)
在此表单中,用户可以事先往表单中添加多条信息,然后可以在所添加的信息中查找特定的信息项,该表单的最终效果分别如图2.1和图2.2所示;
图2.1 表单的输入信息界面
图2.2 表单的查询信息界面
1.首先启动flash,新建一个影片,设置影片舞台大小为400px*300px(单位为象素),影片背景色为浅蓝色,颜色代码为#ccccff.
2.首先来制作表单中要用到的三个按钮,分别为后退按钮,提交按钮和查找按钮.此3个按钮的制作方法相同,只是按钮上的文字提示信息不同,这里以后退按钮为例来说明其制作方法.
新建一个按钮元件,命名为back,进入元件的编辑区后,选择工具箱中的矩形工具,然后在圆角矩形半径设置附加选项中设置圆角矩形半径为3,矩形轮廓线颜色为白色,填充色为灰色,颜色代码为#95aebf,在按钮的弹起帧绘制一个大小适中的矩形,并给其添加上文字提示信息:后退,如图2.3所示:
图2.3 绘制圆角矩形按钮
然后分别在按钮的后3帧插入关键帧,回到指针经过帧,改变按钮的填充色为浅灰色,颜色代码为#c2d2da,如图2.4所示:所有 热点网络 热点下载 热点网络学院 版权所有=
图2.4 改变按钮填充色
按照上面相同的办法分别制作提交按钮和查找按钮,分别如图2.5和图2.6所示;
图2.5 提交按钮
图2.6 查找按钮
3.回到主场景中,使用文本工具在舞台的上面居中位置绘制一个长方形的文本框,在属性面板中设置其类型为输入文本,文本框变量名为entered,此文本框用来进行表单信息的添加和查询内容的输入,文本框的其它相关设置如图2.7所示;
图2.7 绘制输入文本并设置属性
4.同样使用文本工具在输入文本框下方绘制一个大的方形文本框,在属性面板中设置文本框类型为动态文本,文本框变量名为names,此文本框用来显示添加到表单中的信息项和显示查找结果,其它相关设置如图2.8所示:
图2.8 绘制动态文本框
这里要注意的是一定要设置文本框为多行显示,不然即使添加了多条信息,也只能显示一条.
5.文本框设置好后,接下来在舞台上布置一些提示信息和控制按钮,在第1帧中如图2.9所示布置场景:
图2.9 第1帧的布局
第1帧的界面是输入表单信息界面,其中用户可以在最上面的输入按钮中输入想添加到表单中的信息,只要按下提交按钮就可以将信息提交到表单中,同时显示在下面的动态文本框中.最下面的查找按钮用来切换输入信息界面和查找界面,查找界面和输入信息界面非常类似,只不过提示信息和按钮不太相同,为了简化操作,我们可以在输入界面的基础上通过修改来制作查找界面.
6.在第2帧插入一个关键帧,现在两帧的界面完全一样,首先在属性面板中修改上面的输入文本框文本变量为nametofind,用来输入要查找的信息内容,同样的修改下面的动态文本框文本变量名为searchresults,用来显示在表单中查找到的内容,这里可以在里面输入文本: 准备查找……,用来在查找过程中提示用户目前的状态,然后如图2.10所示改变提示信息和控制按钮:
图2.10 设置表单的查找界面
7.在主场景中添加一个图层,給图层中的每帧都添加action:stop();.
8.回到第1帧,给输入界面中的提交按钮添加如下action:
on (release) {
namecount = number(namecount)+1;
set("name" add namecount, entered);
temp = eval("name" add namecount);
names = names add namecount add ". " add temp add newline;
entered = "";
}
给查找按钮添加action; on (release) {
nextframe();
}
//跳到第2帧,也就是切换到查询界面
9.回到第2帧,给提交按钮添加如下action:
所有 热点网络 热点下载 热点网络学院 版权所有=
on (release) {
index = 1;
found = false;
while (number(index)<=number(namecount) and not found) {
if (eval ("name" add index) eq nametofind) {
found = true;
searchresults = "您要找的数据在第 " add index add newline add newline add ( index - 1) add ". " add (eval("name" add (index - 1))) add newline add index add ". " add (eval("name" add index)) add newline add ( index + 1) add ". " add (eval("name" add (index + 1)));
} else {
index = number(index)+1;
}
}
if (number(found) == number(false)) {
searchresults = "没有您要找的数据……";
}
nametofind = "";
}
给后退按钮添加如下action;
on (release) {
prevframe();
}
()
- · 主页设计中配色方案的使用(上)
- · 实践用CSS制作框架页效果
- · 网页制作小工具大全(下)
- · 网页制作小工具大全(中)
- · 网页制作超级技巧(一)
- · 深潜网页制作学就用技巧
- · 突破网页文字无法复制局限
- · 从HTML语言到网上家园.一
- · 家园更美丽:网页制作秘籍
- · [历程]从菜鸟到准网页设计师
- · 主页设计中配色方案的使用(下)
- · 回答XML与HTML的区别
- · “快马加鞭”—网站浏览提速七种武器
- · 打开“保护之门”—破解网页限制功能
- · 网页制作高手进阶:浅谈设计中的文字
- · 用FAQGenie迅速制作“常见问答”网页
- · 举一反三 浅谈在网页上显示日期的两种方法
- · 流程图软件Visio作“高难度”网页
- · 如何将 CSS 加诸于网页
- · CSS产生的特殊效果
- · 使用Dreamweaver便捷技巧方法十六则
- · 如何批量消除网页连接上的“虚线框”
- · Dreamweaver技巧十二招
- · 定义本地站点
- · 制作会移动的广告条
- · 友情连接地址代码-线线表格
- · Dreamweaver技巧50问
- · 不要跳转或刷新 实现网页区域选择显示
- · 用Dreamweaver设计限时自动关闭网页
- · 使用Dreamweaver MX表格排序功能
- · Dreamweaver MX技巧之超链接
- · 用Dreamweaver MX制作文字特效
- · 用Dreamweaver制作活动菜单条
- · 十六则Dreamweaver使用快技法
- · Dreamweaver制作网页幻灯片效果
- · DreamweaverMX制作导航下拉菜单
- · 用Dreamweaver MX创造网页鼠标样式
- · 在Dreamweaver MX中应用“占位图形”
