Flash课程设计Word文档下载推荐.docx
《Flash课程设计Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《Flash课程设计Word文档下载推荐.docx(21页珍藏版)》请在冰豆网上搜索。
2)项目功能有语音提示,即使不识字也可容易操作。
3)简单的操作界面,小朋友很容易上手。
4)学习功能,让小朋友提早了解绘画的知识,一些喜欢绘画的小朋友打下良好的基础。
1.3设计思想
1)课件应符合教学实际需求,要突出重点和实用性。
2)课件还要满足小朋友对色彩的敏感性,要如何才能吸引住小朋友的兴趣。
3)研究表明当多个儿童聚集在一起时他们更喜欢分享,产生更大的兴趣和动力。
1.4主要任务
根据以上目标以及思路,本课件本着能学习、体验、浏览、直观、交互设计了一下4大功能,并且在学习方面设计了三个小功能。
所实现的功能如下:
1.画板
2.展厅
3.竞赛
4.学校
a)视频学习
b)视频交流
c)图文学习
第2章
系统分析
2.1技术可行性
本课件操作简单容易,设计思路可以参考现成的教学大纲。
而flash在大多数计算机上都能顺利运行。
AS3语言也是以VB语言为基础的,程序写起来容易,可参考的资料也多。
并且,现在FlashCS3软件也渐渐用于应用软件开发,其稳定性和可操作性也比较成熟。
2.1.1AdobeFlashCS3.0简介
Flash是一种交互式矢量多媒体技术,他的前身是Futureplash,早期网上流行的矢量动画插件。
后来由于Macromedia公司收购了FutureSplash以后便将其改名为Flash2,到现在最新的flash4。
现在网上已经有成千上万个Flash站点,著名的如Macromedia专门ShockRave站点,全部采用了ShockwaveFlash和Director。
可以说Flash已经渐渐成为交互式知量的标准,未来网页的一大主流。
2.1.2AdobeFlashCS3.0功能特点
■灵巧的绘图工具Flash本身具有极其灵巧的图形绘制功能,更重要的是他能导入专业级绘图工具,如MacromediaFreeHand、AdobeIllustrator等绘制的图形,并产生翻转、拉伸、擦除、歪斜等效果,还可以将图形打碎分成许多单一的元素进行编辑,并改变其颜色亮度。
由于Flash提供具有保真技术的绘图工具,使图形边缘在经过一系列加工后仍会保持平滑。
■向量透明效果应用Flash可以创建透明的图形,并可以任意改变层次间透明的不同效果,如透明度、倾斜度及透明的颜色等属性。
■具有动画效果的按钮和菜单Flash采用精灵动画的方式,在Flash中可以随意创建按钮、多级弹出式菜单、复选框、以及复杂的交互式字谜游戏。
■物体的变形和形状的渐变在Flash中产生物体的变形和形状的渐变非常容易,其发生完全由Flash自动生成,无须人为地在两个对象间插入关键帧。
■增强对图像的支持Flash不但可以对导入的图像(jpg、gif)产生翻转、拉伸、擦除、歪斜、改变颜色亮度等效果,还能利用新的套索工具或魔术棒在图像中选择颜色相同的区域并创建遮罩(Mask);
将图像打碎分成许多单一的元素进行编辑,设置图像的属性,如产生平滑效果和质量损失压缩等。
■声音插入Flash支持同步WAV(Windows)和AIFF(Macintosh)格式的声音文件和声音的连接,你可以用同一个主声道中的一部分来产生丰富的声音效果,而无须改变文件量的大小。
■自定义字体Flash可以处理自定义的字体及其颜色、大小、字间距、行间距、缩进等多种格式。
在Flash创建的网页中,可以加入眼花缭乱的标题和动态的文本,而数据量非常小,比位图的下载速度还快。
当然为了防止客户端字体短缺,你也可以将特殊字体转换为位图图形。
■模拟传输Flash提供了一幅设置动画播放方式的图表,你可以在此设置你的目标Modem速度,如28.8kb/s,然后进行模拟传输,检验其播放是否流畅,在参照图表中找出发生间断的位置,并进行优化。
最终确保动画在客户端播放流畅。
■独立性Flash可以将制作的影片生成独立的可执行文件(EXE文件),在不具备Flash播放器的平台上,仍可运行该影片。
因此,除制作网页外还可以将其应用于商业演示及电子贺卡等。
■界面亲切Flash增加了Inspector窗口、手柄、加速锁等新功能,比以往更加易于操作。
■Flash可创建基于矢量的网站,可以跨平台、跨浏览器地显示声音、图片、动画和交互式等内容。
Flash4中的MP3流式音频支持可以帮助设计人创建网络音频应用程序,比如带有旁白和背景音乐的长动画,同时还可以减少文件大小以适合低带宽的网络传输。
■Flash新增加的对文本输入框的支持,让开发人可以创建网络表格、应用程序和电子商务片头。
现在网站可以从应用了Flash技术的网页中收集用户数据,并把信息传到网站服务器上。
■Flash还可以控制用户输入的信息以何种方式显示,Flash支持可拖动的界面组件、条件逻辑和基本数学运算,比如可以用在创建网上购物结算应用程序上。
■Flash创作工具的改良界面包括新的监视面板和绘图工具及更多的可直视层,它的时间安排表和智能向导可帮助用户创建动画。
此外还有一个发布命令可控制Flash支持的输出格式,包括多版本的HTML、压缩位图和新的Quicktime。
2.1.3ActionScript3简介
ActionScript3与RIA时代的到来。
具有高度互动性、丰富用户体验及功能强大的客户端,是目前网络开发的迫切需求。
Adobe公司的FlashPlayer凭借其全球97%的桌面电脑占有率和跨平台的优势,成为了事实上的下一代RIA(RichInternetApplication,丰富因特网程序)主力。
Adobe公司于2006年年中推出了强大的ActionScript3语言,和支持ActionScript3的新一代的虚拟机AVM2。
经测试,AVM2执行ActionScript3代码比以前的ActionScript2代码执行效率要快10倍以上。
2.1.4ActionScript3的优势
·
对面向对象编程(OOP)语言的完全支持。
核心语言基于ECMAScript(ECMA262)标准,对OOP架构深层优化。
彻底更新的显示对象系统架构。
采用了先进的E4X,使XML成为ActionScript3语言的内建数据类型(nativesupport)。
操作直白、简单。
全面支持正则表达式。
正则表达式也成了ActionScript3的内建数据类型,ActionScript3对字符串的处理能力空前增强。
标准的DOM3事件实现。
FlashAPI全面支持事件机制。
异常处理机制。
异常包括信息全面、易于调试和处理。
FlashAPI全面支持异常处理机制。
2.2系统环境配置
(1)硬件配备置:
PENTIUMIII/DDR32GB/320GB
(2)操作系统:
WINDOWS2000或WINDOWSXP或WINDOWS7
(3)开发工具:
AdobeFlashCS3.0
2.3经济可行性
由于本课件的开发所用资金很少,但它所创造的经济效益却很高,节省了很多人力和物力。
2.4操作可行性
本课件操作简单方便,大部分功能的实现都采用按钮方式,一目了然,一点按钮就可实现各项功能,具有声音提示按钮,即使没有计算机基础知识的小朋友也可以操作。
2.5需求分析
通过市场调查,了解到市场上的一些画图软件功能单一,要么单单学习,要么就只有单单的绘画功能,交互性不强。
而有研究表明当多个儿童聚集在一起时他们更喜欢分享,产生更大的兴趣和动力,所以我们需要一个交互性强的课件来满足小朋友这种喜欢分享的心态。
需求分析就是描述系统的需求,通过定义系统中的关键域类来建立模型。
分析的根据目的是在开发者和提出需要的人之间建立一种理解和沟通的机制。
幼儿“益智”画室课件的功能包括以下内容:
●画板:
用不同的工具绘画出自己想到的图形,可调整粗细、颜色等;
还可以导入图片,对图片进行临摹;
做好的图片可以保存下来。
●展厅:
展示出画板里保存下来的图片。
●竞赛:
小朋友与小朋友之间进行绘画比赛,比比谁才是画画能手。
●学校:
◆视频学习:
显示学习性的视频。
◆视频交流:
通过摄像头和麦克风来实现面对面的交流。
◆图文学习:
图文并茂,显示一些相关的学习型图片与文字。
2.6程序框架设计
根据需求分析,可以绘制如下功能图,如图2.1所示:
2.1总体模块图
2.7数据库设计
这里的数据库主要存放竞赛里的用户名,其他的一些文章存储,是通过xml实现的。
2.7.1数据库
表格2.1用户表
列名
数据类型
可否为空
备注
Id
自动编号
No
主键
UserName
文本
null
Password
question
Yes
answer
realname
age
数字
sex
youbian
grade
tel
adddate
日期/时间
lastlogin
logins
szsheng
szshi
userlastip
第3章
课件功能实现
图表3.1主界面
从上到下,功能分别为学校、竞赛、画板、展厅。
3.1画板
图表3.2画板主界面
图表3.3画板工具栏
board.addEventListener(MouseEvent.MOUSE_OVER,boardMouseOverHandler);
//为整个工具栏添加鼠标移入事件
board.addEventListener(MouseEvent.MOUSE_OUT,boardMouseOutHandler);
//添加鼠标移出事件
board.lineBtn.addEventListener(MouseEvent.CLICK,lineBtnClickHandler);
board.recBtn.addEventListener(MouseEvent.CLICK,recBtnClickHandler);
board.ellipseBtn.addEventListener(MouseEvent.CLICK,ellipseBtnClickHandler);
//为画笔添加鼠标点击事件
board.moveBtn.addEventListener(MouseEvent.CLICK,moveBtnClickHandler);
//为移动添加鼠标点击事件board.ClearBtn.addEventListener(MouseEvent.CLICK,ClearBtnClickHandler);
//为橡皮添加鼠标点击事件board.ArrowBtn.addEventListener(MouseEvent.CLICK,ArrowBtnClickHandler);
//为画箭头添加鼠标点击事件
board.EraserBtn.addEventListener(MouseEvent.CLICK,EraserBtnClickHandler);
//为橡皮擦添加鼠标点击事件
board.Picbtn.addEventListener(MouseEvent.CLICK,onButtonClick);
为打开图片添加鼠标点击事件
board.save_btn.addEventListener(MouseEvent.CLICK,onSaveClick);
为保存添加鼠标点击事件
board.btnHome.addEventListener(MouseEvent.CLICK,btnHomeClick);
this.addEventListener(MouseEvent.MOUSE_DOWN,stageMouseDownHandler);
this.addEventListener(MouseEvent.MOUSE_MOVE,stageMouseMoveHandler);
this.addEventListener(KeyboardEvent.KEY_DOWN,keyDownHandler);
board.slider.value=3;
//设置粗细初始值
DrawLine.setLineWidth(board.slider.value);
DrawRect.setLineWidth(board.slider.value);
DrawEllipse.setLineWidth(board.slider.value);
DrawArrow.setLineWidth(board.slider.value);
board.slider.addEventListener(SliderEvent.THUMB_DRAG,changeHandler);
board.slider.addEventListener(MouseEvent.MOUSE_DOWN,sliderMouseDownHandler);
board.colorPicker.addEventListener(ColorPickerEvent.CHANGE,colorPickerChangeHandler);
下面是对应上面添加的事件定义的事件:
privatefunctionlineBtnClickHandler(e:
MouseEvent){
style=1;
pencil.gotoAndStop
(1);
this.removeEventListener(MouseEvent.CLICK,EraserMOUSEUPHandler);
}
privatefunctionrecBtnClickHandler(e:
style=2;
pencil.gotoAndStop(3);
privatefunctionellipseBtnClickHandler(e:
style=3;
privatefunctionmoveBtnClickHandler(e:
style=4;
privatefunctionArrowBtnClickHandler(e:
style=5;
pencil.gotoAndStop
(2);
privatefunctionEraserBtnClickHandler(e:
style=7;
在每个事件里添加style的值,再将值传到下面的switch来进行分类,通过不同值分别调用所需要的as类,实现功能。
privatefunctionstageMouseDownHandler(e:
switch(style){
case1:
//调用的是画线的类
arr.push(newDrawLine);
drawer.addChild(arr[arr.length-1]);
arr[arr.length-1].drawLine();
break;
case2:
//调用的是话圆的类
arr.push(newDrawRect);
arr[arr.length-1].drawRec();
case3:
//调用画框框的类
arr.push(newDrawEllipse);
arr[arr.length-1].drawEllipse();
case4:
case5:
//调用画箭头的类
arr.push(newDrawArrow);
arr[arr.length-1].hh();
case7:
this.addEventListener(MouseEvent.CLICK,EraserMOUSEUPHandler);
default:
}
setChildIndex(pencil,this.numChildren-1);
橡皮擦事件:
privatefunctionEraserMOUSEUPHandler(e:
if(stage.focus!
=null){//获取焦点
drawer.removeChild(stage.focus);
//移除焦点
vari:
int;
for(i=0;
i<
=arr.length-1;
i++){//使用数据库,循环到数组前一个
if(stage.focus==arr[i]){
arr.splice(i,1);
}
}
图表3.4导入图片弹出的框框
代码如下:
privatefunctionerrorHandler(e:
IOErrorEvent):
void{
if(out_pic){
out_pic.dispose();
this.mouseChildren=true;
this.filters=[];
removeChild(senddata_);
functiondrag_pic(e:
e.target.startDrag();
drawer.addEventListener(MouseEvent.MOUSE_UP,drag_pic_end);
functiondrag_pic_end(e:
drawer