Flash课程设计

摘要

基于21世纪电脑的普及和网络的飞速发展，使得很多低龄儿童都有机会使用电脑，然而基于鼠标、图标等传统的人际交互方法，通常考虑到儿童这类特殊用户，通过分析儿童的行为特点和认识的过程，我们开发了一个《幼儿益智画室》这个课件。

这款以儿童为中心的人机交互软件自然界面美观、易学、易用，图文音、视频并茂又多样化的提示，贴合儿童的心理及思维方式，通过图像、动画、声音来吸引儿童的注意力，使小孩对图像声音的感官更加的敏锐，动手能力更加的灵活，使孩子智力得到更好的发展。在同龄儿童中脱颖而出。

最后利用webbase进行整合，使得整个课件整体化。

关键词：Flash，ActionScript3，webbase，儿童绘画

Abstract

Based on the 21 st century popularization of the computer and the rapid development of the network, make a lot of young children have the opportunity to use the computer, but based on the mouse, such as the traditional interpersonal interaction icon method, usually consider that children this kind of special users, through the analysis of the children's behavior characteristics and the understanding of the processes of we developed a cult of the child studio the courseware.

This paragraph with children in center of the man-machine interactive software natural interface aesthetics, easy, easy to use, graphic sound, video and diversification of the tip, with joint the child's psychological and way of thinking, through the image, animation, voice to attract the attention of children, make the child of the image of the keen senses voice more, hands ability, and more flexible, make the child intelligence get better development. Children of the same age in the crowd..

Finally, using the webbase for integration, make the whole courseware integration.

Keywords：Flash,ActionScript3,webbase,Children's painting

目录

第1章绪论

1.1 项目背景

在科技高速发展的如今，儿童早早就对电脑的接触。在儿童对电脑产生兴趣且被电脑所吸引时。他们会沉迷进去，从而失去一些小朋友的天真，无限的想象无法得到最大化的发挥。儿童的想象力是无限的，要如何能让小朋友即在他们喜欢的电脑上玩而且能够将他们的想象力得以发展？至此我们能否开发一款课件，让小朋友在自己喜欢玩的电脑上进行着让自己想象力自有发挥的“舞台”。

1.2 设计目标

1)卡通亲切的界面，让小朋友容易亲近。

2)项目功能有语音提示，即使不识字也可容易操作。

3)简单的操作界面，小朋友很容易上手。

4)学习功能，让小朋友提早了解绘画的知识，一些喜欢绘画的小朋友打下良好的基础。

1.3 设计思想

1)课件应符合教学实际需求，要突出重点和实用性。

2)课件还要满足小朋友对色彩的敏感性，要如何才能吸引住小朋友的兴趣。

3)研究表明当多个儿童聚集在一起时他们更喜欢分享，产生更大的兴趣和动力。

1.4 主要任务

根据以上目标以及思路，本课件本着能学习、体验、浏览、直观、交互设计了一下4大功能，并且在学习方面设计了三个小功能。

所实现的功能如下：

1.画板

2.展厅

3.竞赛

4.学校

a)视频学习

b)视频交流

c)图文学习

第2章系统分析

2.1 技术可行性

本课件操作简单容易，设计思路可以参考现成的教学大纲。而flash在大多数计算机上都能顺利运行。AS3语言也是以VB语言为基础的，程序写起来容易，可参考的资料也多。并且，现在Flash CS3软件也渐渐用于应用软件开发，其稳定性和可操作性也比较成熟。

2.1.1 Adobe Flash CS

3.0简介

Flash是一种交互式矢量多媒体技术，他的前身是Futureplash，早期网上流行的矢量动画插件。后来由于Macromedia公司收购了Future Splash以后便将其改名为Flash2，到现在最新的flash4。现在网上已经有成千上万个Flash站点，著名的如Macromedia专门ShockRave站点，全部采用了Shockwave Flash 和Director。可以说Flash已经渐渐成为交互式知量的标准，未来网页的一大主流。

2.1.2 Adobe Flash CS

3.0功能特点

■ 灵巧的绘图工具Flash本身具有极其灵巧的图形绘制功能，更重要的是他能导入专业级绘图工具，如Macromedia FreeHand、Adobe Illustrator等绘制的图形，并产生翻转、拉伸、擦除、歪斜等效果，还可以将图形打碎分成许多单一的元素进行编辑，并改变其颜色亮度。由于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 可创建基于矢量的网站，可以跨平台、跨浏览器地显示声音、图片、动画和交互式等内容。Flash 4 中的MP3 流式音频支持可以帮助设计人创建网络音频应用程序，比如带有旁白和背景音乐的长动画，同时还可以减少文件大小以适合低带宽的网络传输。

■ Flash 新增加的对文本输入框的支持，让开发人可以创建网络表格、应用程序和电子商务片头。现在网站可以从应用了Flash 技术的网页中收集用户数据，并把信息传到网站服务器上。

■ Flash 还可以控制用户输入的信息以何种方式显示，Flash 支持可拖动的界面组件、条件逻辑和基本数学运算，比如可以用在创建网上购物结算应用程序上。

■ Flash 创作工具的改良界面包括新的监视面板和绘图工具及更多的可直视层，它的时间安排表和智能向导可帮助用户创建动画。此外还有一个发布命令可控制Flash 支持的输出格式，包括多版本的HTML、压缩位图和新的Quicktime。

2.1.3 ActionScript3简介

ActionScript3与RIA时代的到来。

具有高度互动性、丰富用户体验及功能强大的客户端，是目前网络开发的迫切需求。Adobe公司的Flash Player凭借其全球97%的桌面电脑占有率和跨平台的优势，成为了事实上的下一代RIA（Rich Internet Application，丰富因特网程序）主力。Adobe公司于2006年年中推出了强大的ActionScript3语言，和支持ActionScript3的新一代的虚拟机A VM2。经测试，A VM2执行ActionScript3代码比以前的ActionScript2代码执行效率要快10倍以上。

2.1.4 ActionScript3的优势

·对面向对象编程（OOP）语言的完全支持。核心语言基于ECMAScript（ECMA262）标准，对OOP 架构深层优化。

·彻底更新的显示对象系统架构。

·采用了先进的E4X，使XML成为ActionScript3语言的内建数据类型（native support）。操作直白、简单。

·全面支持正则表达式。正则表达式也成了ActionScript 3的内建数据类型，ActionScript 3对字符串的处理能力空前增强。

·标准的DOM 3事件实现。Flash API全面支持事件机制。

·异常处理机制。异常包括信息全面、易于调试和处理。Flash API全面支持异常处理机制。

2.2 系统环境配置

（1）硬件配备置：PENTIUM III/DDR3 2GB/320 GB

（2）操作系统：WINDOWS 2000或WINDOWS XP 或WINDOWS7

（3）开发工具：Adobe Flash CS3.0

2.3 经济可行性

由于本课件的开发所用资金很少，但它所创造的经济效益却很高，节省了很多人力和物力。

2.4 操作可行性

本课件操作简单方便，大部分功能的实现都采用按钮方式，一目了然，一点按钮就可实现各项功能，具有声音提示按钮，即使没有计算机基础知识的小朋友也可以操作。

2.5 需求分析

通过市场调查，了解到市场上的一些画图软件功能单一，要么单单学习，要么就只有单单的绘画功能，交互性不强。而有研究表明当多个儿童聚集在一起时他们更喜欢分享，产生更大的兴趣和动力，所以我们需要一个交互性强的课件来满足小朋友这种喜欢分享的心态。

需求分析就是描述系统的需求，通过定义系统中的关键域类来建立模型。分析的根据目的是在开发者和提出需要的人之间建立一种理解和沟通的机制。

幼儿“益智”画室课件的功能包括以下内容：

●画板：用不同的工具绘画出自己想到的图形，可调整粗细、颜色等；还可以导入图片，对图片

进行临摹；做好的图片可以保存下来。

●展厅：展示出画板里保存下来的图片。

●竞赛：小朋友与小朋友之间进行绘画比赛，比比谁才是画画能手。

●学校：

◆视频学习：显示学习性的视频。

◆视频交流：通过摄像头和麦克风来实现面对面的交流。

◆图文学习：图文并茂，显示一些相关的学习型图片与文字。

2.6 程序框架设计

根据需求分析，可以绘制如下功能图，如图2.1所示：

2.7 数据库设计

这里的数据库主要存放竞赛里的用户名，其他的一些文章存储，是通过xml实现的。

2.7.1 数据库

表格 2.1 用户表

第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);

下面是对应上面添加的事件定义的事件：

private function lineBtnClickHandler(e:MouseEvent) {

style=1;

pencil.gotoAndStop(1);

this.removeEventListener(MouseEvent.CLICK,EraserMOUSEUPHandler);

}

private function recBtnClickHandler(e:MouseEvent) {

style=2;

pencil.gotoAndStop(3);

this.removeEventListener(MouseEvent.CLICK,EraserMOUSEUPHandler);

}

private function ellipseBtnClickHandler(e:MouseEvent) {

style=3;

pencil.gotoAndStop(3);

this.removeEventListener(MouseEvent.CLICK,EraserMOUSEUPHandler);

}

private function moveBtnClickHandler(e:MouseEvent) {

style=4;

this.removeEventListener(MouseEvent.CLICK,EraserMOUSEUPHandler);

}

private function ArrowBtnClickHandler(e:MouseEvent) {

style=5;

pencil.gotoAndStop(2);

this.removeEventListener(MouseEvent.CLICK,EraserMOUSEUPHandler);

}

private function EraserBtnClickHandler(e:MouseEvent) {

style=7;

}

在每个事件里添加style的值，再将值传到下面的switch来进行分类，通过不同值分别调用所需要的as类，实现功能。

private function stageMouseDownHandler(e:MouseEvent) {

switch (style) {

case 1 ://调用的是画线的类

arr.push(new DrawLine );

drawer.addChild(arr[arr.length-1]);

arr[arr.length-1].drawLine();

break;

case 2 ://调用的是话圆的类

arr.push(new DrawRect );

drawer.addChild(arr[arr.length-1]);

arr[arr.length-1].drawRec();

break;

case 3 ://调用画框框的类

arr.push(new DrawEllipse );

drawer.addChild(arr[arr.length-1]);

arr[arr.length-1].drawEllipse();

break;

case 4 :

break;

case 5 ://调用画箭头的类

arr.push(new DrawArrow );

drawer.addChild(arr[arr.length-1]);

arr[arr.length-1].hh();

break;

case 7 :

this.addEventListener(MouseEvent.CLICK,EraserMOUSEUPHandler);

break;

default :

break;

}

setChildIndex(pencil,this.numChildren-1);

}

橡皮擦事件:

private function EraserMOUSEUPHandler(e:MouseEvent) {

if (stage.focus!=null) {//获取焦点

drawer.removeChild(stage.focus);//移除焦点

var i:int;

for (i=0; i<=arr.length-1; i++) {//使用数据库,循环到数组前一个

if (stage.focus==arr[i]) {

arr.splice(i,1);

}

}

}

}

图表 3.4 导入图片弹出的框框

代码如下:

private function errorHandler(e:IOErrorEvent):void {

if (out_pic) {

out_pic.dispose();

}

this.mouseChildren=true;

this.filters=[];

removeChild(senddata_);

}

function drag_pic(e:MouseEvent) {

e.target.startDrag();

drawer.addEventListener(MouseEvent.MOUSE_UP,drag_pic_end);

}

function drag_pic_end(e:MouseEvent) {

drawer.removeEventListener(MouseEvent.MOUSE_UP,drag_pic_end);

stopDrag();

}

function onButtonClick(e:MouseEvent):void {

fileRef.browse([new FileFilter("*.jpg;*.gif;*.png","*.jpg;*.gif;*.png")]);//能导入图片的格式

fileRef.addEventListener(Event.SELECT,onFileSelected);

}

function onFileSelected(e:Event):void {

fileRef.addEventListener(https://www.360docs.net/doc/af18487942.html,PLETE,onFileLoaded);

fileRef.load();

}

function onFileLoaded(e:Event):void {

loader.loadBytes(e.target.data);

loader.contentLoaderInfo.addEventListener(https://www.360docs.net/doc/af18487942.html,PLETE,pic_loaded);

}

function pic_loaded(e:Event) {

if (bitmap) {

bitmap.dispose();

}

while (pic.numChildren>0) {

pic.removeChildAt(0);

}

image=null;

var loadedImage:Bitmap=Bitmap(loader.content);

bitmap=new BitmapData(loadedImage.width,loadedImage.height);

bitmap.draw(loadedImage);//将导入的图片显示在draw元件中.

image=new Bitmap(bitmap,"auto",true);

pic.addChildAt(image,0);

loadedImage=null;

}

保存图片代码如下:

function onSaveClick(e:MouseEvent) {

var blur:BlurFilter=new BlurFilter ;

blur.blurX=5;

blur.blurY=5;

blur.quality=BitmapFilterQuality.HIGH;

this.filters=[blur];

addChild(senddata_);

senddata_.x=Number(10)+Number(1024)/2-80;

senddata_.y=Number(10)+Number(768)/2-30;//以上都为进度条代码

out_pic=new BitmapData(800,600,false);

out_pic.draw(drawer);//将drawer里的数据截下

this.mouseChildren=false;

var encoder:JPGEncoder=new JPGEncoder(80);

var bytes:ByteArray=encoder.encode(out_pic);

var request:URLRequest=new URLRequest("http://localhost/DrawBood/save.asp");//通过save.asp保存下来,保存到指定文件夹.

//data值就为图片编码数据ByteArray;

request.data=bytes;

request.method=URLRequestMethod.POST;

//这个是关键,内容类型必须是下面文件流形式;

request.contentType="application/octet-stream";

var loader:URLLoader=new URLLoader ;

loader.addEventListener(https://www.360docs.net/doc/af18487942.html,PLETE,completeHandler);

loader.addEventListener(IOErrorEvent.IO_ERROR,errorHandler);

loader.load(request);

}

Asp保存代码:

<%

dim strSaveFileName

dim strNow

strnow =replace(replace(replace(now(), ":", ""), "-", ""), " ", "")&cint(rnd()*8999+1000)

if request.servervariables("REQUEST_METHOD")="POST" then '当前为post

FormSize=Request.TotalBytes

FormData=Request.BinaryRead(FormSize) '接收数据到FormData

strSaveFileName =strNow &".jpg"

set dr=CreateObject("Adodb.Stream")

dr.Mode=3

dr.Type=1

dr.Open

dr.Write(FormData)

dr.SaveToFile Server.MapPath("../Upload/"&strSaveFileName),2//把保存下来的图片保存到Upload文件夹

dr.Close

set dr=nothing

end if

session("pic")="img/"&strSaveFileName

response.Write "javascript:div_show()"

//下面是把一些有关数据保存到XML文件夹下的gallery.xml文件里

Dim oXML, oXMLRoot, oXMLItem,path

path="../XML/gallery.xml"

set oXML = CreateObject("MSXML2.DOMDocument")

oXML.load Server.MapPath(path)

Set oXMLRoot = oXML.documentElement

Set oXMLItems = oXMLRoot.selectNodes("//item")

'if(Trim(Request("AddNew")) = "添加章节") then

'Set oXMLGallery = oXML.createElement("gallery")

Set oXMLItem = oXML.createElement("item")

oXMLItem.setAttribute "id",oXMLItems.length

set titleNode=oXML.createElement("title")

titleNode.text="aaa"

oXMLItem.appendChild titleNode

set authorNode=oXML.createElement("author")

authorNode.text="aaa"

oXMLItem.appendChild authorNode

set addtimeNode=oXML.createElement("addtime")

addtimeNode.text=now()

oXMLItem.appendChild addtimeNode

set filenameNode=oXML.createElement("filename")

filenameNode.text="Upload/"&strSaveFileName

oXMLItem.appendChild filenameNode

oXMLRoot.appendChild oXMLItem

oXML.Save(Server.MapPath(path))

'end if

%>

3.2 学校

图表 3.5 学校主界面

图表 3.6 视频学习按钮

function VideomenuClick(e:MouseEvent):void {

if (moduleVideo==null) {

moduleVideo=loadModule("video/video.swf");//导入video.swf

moduleVideo.addEventListener(https://www.360docs.net/doc/af18487942.html,PLETE,moduleVideoComplete);

} else if (!moduleVideo.loaded) {

moduleVideo.load();

}

}

function moduleVideoComplete(e:LoadModuleEvent):void {

addChildAt(bg_black,1);

bg_black.alpha=0;

Loader_mc.addChild(moduleVideo.loader);

moduleVideo.loader.x=50;

moduleVideo.loader.y=(768-moduleVideo.loader.height)/2;

effect.tweener(bg_black,{alpha:0.9});

moduleVideo.content.getChildByName("btn_close").addEventListener(MouseEvent.CLICK,unloadModulevide o);}

function unloadModulevideo(e:MouseEvent):void {

moduleVideo.unload();

effect.tweener(bg_black,{alpha:0});

removeChild(bg_black);

}

图表 3.7 交流

function TalkingmenuClick(e:MouseEvent) {

if (moduleTalking==null) {

moduleTalking=loadModule("chat/chat.swf");//导入chat.swf

moduleTalking.addEventListener(https://www.360docs.net/doc/af18487942.html,PLETE,moduleTalkingComplete);

}else if(!moduleTalking.loaded){

moduleTalking.load();

}

}

function moduleTalkingComplete(e:LoadModuleEvent):void {

Loader_mc.addChild(moduleTalking.loader);

moduleTalking.loader.x=0;

moduleTalking.loader.y=0;

effect.tweener(back,{alpha:0.4});

moduleTalking.content.getChildByName("Close_Btn").addEventListener(MouseEvent.CLICK,unloadMod uletalking);}

function unloadModuletalking(e:MouseEvent):void {

moduleTalking.unload();

effect.tweener(back,{alpha:1});

}//缓动效果

图表 3.8 图文学习

function StudymenuClick(e:MouseEvent):void {

if (moduleStudy==null) {

moduleStudy=loadModule("study/study.swf");//导入study.swf 文件

moduleStudy.addEventListener(https://www.360docs.net/doc/af18487942.html,PLETE,moduleStudyComplete);

} else if (!moduleStudy.loaded) {

moduleStudy.load();

}

}

function moduleStudyComplete(e:LoadModuleEvent):void {

Loader_mc.addChild(moduleStudy.loader);

moduleStudy.loader.x=0;

moduleStudy.loader.y=0;

effect.tweener(back,{alpha:0.4});

moduleStudy.content.getChildByName("btn_close").addEventListener(MouseEvent.CLICK,unloadModule study);

}

function unloadModulestudy(e:MouseEvent):void {

moduleStudy.unload();

effect.tweener(back,{alpha:1});

}

function btnHomeClick(e:MouseEvent):void {

navigateToURL(new URLRequest("http://localhost/draw/index.htm"),"_self");

}

致谢

Flash 我们也学了一年了,事件转眼就过。在这一年里我对flash ActionScript3 也有了一定的认识以及基础。无论是做flash游戏，还是做flash应用软件，亦或是做flash课件，我都一点点的在积累着关于这方面的知识。一步步走来，我遇到过费解问题时苦苦的思索，也有着攻关成功时的喜悦。可以说，我切身地体验到了软件工作者的辛苦，同时也体会到了软件工程的重要性以及透彻地了解了做一个实际项目的大概流程。随着课程的即将结束。

在这个课件上面，我要感谢李立正老师的技术指导。同时感谢黄煜栋老师一学期的as3教学以及传授，让我接触这门有意思的课程。我相信这会使我在以后的道路上，会多条路走走。

参考文献

[1]孙颖.殿堂之路北京：电子工业出版社 ISBN：9787121048838，2007

[2] https://www.360docs.net/doc/af18487942.html,/webBase/catalog.asp?cate=2 webbase 帮助主页