基于Flash的电子白板的设计与实现|js实现电子白板
摘要:随着计算机应用的普及,许多行业普遍采用多媒体技术进行辅助演示,而电子白板因其直观易用,对软硬件环境要求不高,深得相关行业人员的青睐。文章以Flash8.0和AS2.0为主要工具设计了一款电子白板,以供参考。
关键词:Flash;ActionScript;电子白板
中图分类号:TP311文献标识码:A文章编号:1009-3044(2012) 02-0432-04
Flash based Design and Implementation of Whiteboard
YANG Peng-fei1,WANG Ying2
(1.Zhengzhou Tourism Vocational College, Zhengzhou 450009, China; 2.Zhengzhou Financial Technician Institute, Zhengzhou 450013, China)
Abstract: With the popularity of computer application, many industry generally use of multimedia technique in auxiliary presentation, and electronic white board because of its intuitive and easy to use, the environment of software and hardware requirements is not high, won the favor of related industries. Taking Flash8.0 and AS2.0 as the main tool to design a whiteboard, for reference.
Key words: Flash; ActionScript; whiteboard
1开发环境概述
Flash8.0是一款非常优秀的2D矢量动画设计软件,利用它可将声音、动画及图片融合在一起,制作出高品质的动画,广泛应用于网络、影视、音乐、游戏,教学和手机等诸多领域。此外,8.0版本还内置了脚本语言ActionScript2.0,可以用来制作交互式元素,交互性是flash动画的最大优势,可以通过点击按钮、选择菜单来控制动画的播放。这刚好可以满足电子白板的设计需求。
2功能设计
对于一般性需求,电子白板的核心功能应能满足对各类几何图形如矩形、椭圆、星形、三角型以及鼠标轨迹的支持,对各类几何图形的外边框的磅值、颜色等进行设置的功能也应具备。其他功能包括删除上一步的绘图结果,清除屏幕的功能,全屏切换,关闭程序等。另外,主绘图区也必不可少。总体来看,电子白板功能设计应包含:核心功能,辅助功能两大类,其中核心功能又分为图形选择功能和主绘图区功能;辅助功能包括磅值及颜色选择功能,易用性功能等。如图1所示:
图1电子白板功能示意图
3界面设计
用户界面(UI,User Interface)设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的用户界面设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。软件界面要求简易、清楚、一致。要让用户便于使用、便于了解、并能减少用户发生错误选择的可能,在视觉效果上便于理解和使用,界面元素风格必须一致或接近,减少风格迥异的设计元素出现。
按照功能设计的要求,界面中需要包含图形选择、磅值及颜色调整、删除、清屏、全屏、退出等指令按钮,且结构布局要求清晰, 视觉偏差不可太大。整体界面风格如图2所示:
图2软件界面示意图
4具体实现
4.1图层布局
在设计实现阶段,根据功能划分,将各元素分布在不同图层中,图形绘制类统一安排在graphics_btn图层中,磅值类安排在line_thickness_btn图层中,颜色类安排在color_btn图层中,易用性功能类安排在function_btn图层中,此外还应加入两个图层inter? faceBG和AS,分别用作为背景层和脚本层。如图3所示。
图3图层布局示意图
4.2脚本实现
在AS图层的第一帧写入脚本,因篇幅所限,只列举部分代码。
creatPencil(); //默认图形
_root.line1.onPress = function() {
lineThickness = 1;
};//磅值选择,共4种,其他从略
_root.color_gray.onPress=function(){
selectedColor="0x999999";
}//颜色选择,共9种,其他从略
_root.circle.onPress = function() {
creatCircle();
};//画圆的函数调用
_root.star.onPress = function() {
creatStar();
};//画星形的函数调用,其他从略
i = 0;
function creatCircle() {
onMouseDown = function () {
var x0 = _xmouse;
var y0 = _ymouse;
onMouseMove = function () {
r = Math.sqrt((_xmouse-x0)*(_xmouse-x0)+(_ymouse-y0)*(_ymouse-y0));
creat(x0, y0, r);
};
};
onMouseUp = function () {
onMouseMove = undefined;
i++;
};
function creat(x1, y1, r1) {
_root.createEmptyMovieClip("mc"+i, i);
with (_root["mc"+i]) {
lineStyle(lineThickness, selectedColor, 100);
beginFill(fillcolor, 100);
moveTo(x1+r1, y1);
curveTo(r1+x1, Math.tan(Math.PI/8)*r1+y1, Math.sin(Math.PI/4)*r1+x1, Math.sin(Math.PI/4)*r1+y1);
curveTo(Math.tan(Math.PI/8)*r1+x1, r1+y1, x1, r1+y1);
curveTo(-Math.tan(Math.PI/8)*r1+x1, r1+y1, -Math.sin(Math.PI/4)*r1+x1, Math.sin(Math.PI/4)*r1+y1);
curveTo(-r1+x1, Math.tan(Math.PI/8)*r1+y1, -r1+x1, y1);
curveTo(-r1+x1, -Math.tan(Math.PI/8)*r1+y1, -Math.sin(Math.PI/4)*r1+x1, -Math.sin(Math.PI/4)*r1+y1);
curveTo(-Math.tan(Math.PI/8)*r1+x1, -r1+y1, x1, -r1+y1);
curveTo(Math.tan(Math.PI/8)*r1+x1, -r1+y1, Math.sin(Math.PI/4)*r1+x1, -Math.sin(Math.PI/4)*r1+y1);
curveTo(r1+x1, -Math.tan(Math.PI/8)*r1+y1, r1+x1, y1);
}}
}//画圆
function creatStar() {
onMouseDown = function () {
_root.createEmptyMovieClip("mc"+i, i);
line = this["mc"+i];
drawing = true;
x1 = _xmouse;
y1 = _ymouse;
};onMouseMove = function () {
if (drawing == true) {
line.clear();
line.lineStyle(lineThickness, selectedColor, 100);
xm = _xmouse-x1;
ym = _ymouse-y1;
rm = Math.sqrt(xm*xm+ym*ym);
drawO(line, x1, y1, rm);
}};
onMouseUp = function () {
drawing = false;
i++;
};
function drawO(mc, x, y, r) {
mc.moveTo(x, y-r);
mc.lineTo(x+Math.cos(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.38,y-Math.sin(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.38); mc.lineTo(x+Math.cos(Math.PI/2-Math.PI*2/5)*r, y-Math.sin(Math.PI/2-Math.PI*2/5)*r);
mc.lineTo(x+Math.cos(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.60, y+Math.sin(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.17); mc.lineTo(x+Math.cos(2*Math.PI*2/5-Math.PI/2)*r, y+Math.sin(2*Math.PI*2/5-Math.PI/2)*r);
mc.lineTo(x+Math.cos(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.0004, y+Math.sin(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.5); mc.lineTo(x-Math.cos(2*Math.PI*2/5-Math.PI/2)*r, y+Math.sin(2*Math.PI*2/5-Math.PI/2)*r);
mc.lineTo(x-Math.cos(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.60, y+Math.sin(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.17); mc.lineTo(x-Math.cos(Math.PI/2-Math.PI*2/5)*r, y-Math.sin(Math.PI/2-Math.PI*2/5)*r);
mc.lineTo(x-Math.cos(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.38, y-Math.sin(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.38);
mc.lineTo(x, y-r);
//mc.lineTo(x+Math.cos(Math.PI*0.1)*r, y-Math.sin(Math.PI*0.1)*r);Math.PI/2-Math.PI*2/5=Math.PI*0.1}}//画五星
以下为易用性按钮“删除”和“清屏”的AS代码:_root.delete_btn.onRollOver = function() {
delete0();
};//删除剪辑的函数调用
_root.clear_btn.onRollOver = function() {
clearscreen();
};//清屏的函数调用
function delete0() {
onMouseDown = function () {
if (i>0) {_root["mc"+(i-1)].removeMovieClip();
}};
onMouseUp = function () {
i--;
if (i0; i--) {
removeMovieClip("mc"+(i-1));
}};
onMouseUp = function () {
if (i 5测试总结
因为没有安装Flash Player插件的计算机不便于执行.swf文件,所以利用Flash的导出功能,生成一个可执行文件.exe,可运行于所有的Window平台工作环境。在实际运行中,该程序无需安装,直接运行,能够满足一般性工作需求。
参考文献:
[1]闫菲.软件工程[M].北京:中国水利水电出版社,2005.
[2] Robert Penner.Flash MX编程与创意实现[M].北京:清华大学出版社,2003.
栏目最新:
- 基于情感化的医院装饰设计应用研究2023-07-04
- 基于改进BERT的景点评论情感分析2023-06-30
- 初中音乐教学中的社会情感学习初探2023-06-29
- 夜的故事(组诗)2023-06-28
- 原生纯电,豪华满级,听Stefan,Sielaff讲...2023-06-18
- 故事,可以这样开始2023-06-17
- “美”“白”会谈——黑色素的故事2023-03-30
- 解析小学音乐教学中的情感教育2023-03-20
- 新闻报道故事化的叙事学研究2023-03-17
- 岁月深处的故事2023-03-15
相关文章:
- 利用框架构图使用【怎样利用环境因素巧构图】
- 手机主题app哪个好用_手机主题是什么
- 【中兴q802t怎么样?】 中兴q802t
- 华为流量上限_华为w1怎么设置流量上限?
- 【索尼推出4K摄像机Z100支持远程控制】电脑远程控制软件
- 【手机故障基本检查测试方法】 手机测试方法
- [2018年内蒙古建筑八大员快捷取证报名入口:标准员(火热报名中)]内蒙古八大员成绩查询
- 医院党员承诺书【6月医院卫生党员承诺书】
- 医学英语会话,生活必备:睡眠不好|实用医学英语会话
- 【普陀区光新路初三英语暑假课外补习班大概多少钱/家长推荐哪家机构】 普陀区初三英语一模2017
- 云南师范大学2017年招生简章【2018年云南师范大学招生简章(本科)】