应用思考-教育技术论坛

标题: Flash课件制作系列连载教程(AS3) [打印本页]
作者: 想换个名字可以吗    时间: 2013-12-22 20:51
标题: Flash课件制作系列连载教程(AS3)
本帖最后由 郎咸蒙 于 2013-12-23 21:30 编辑

首先感谢
这本书的作者，这是我学习flash编程最早的教程。
然后这本书也很不错。不过作为正式学习as3.0编程的话，参考书还得看论坛里置顶的帖子。
我主要以数学为例讲述课件制作。
       as是一门编程语言，我们知道编程语言都是有共性的，所以在这之前你最好接触过编程语言，如果没有也没关系，既然你打算学习，相信你可以跨过入门的障碍。其实as是学习面向对象编程很好的一个媒介，为什么这么说呢，其实在flash里我们绘制一个物体，其实就是用可视化的方法声明了一个类，还有控件等更是如此。跟java不同的是，as中大部分类都是可视的，把抽象的概念具体了。
        我大学的时候在学校的网络工作室负责flash动画的制作，大学把相当一部分精力都放在flash上了，其实毕业后倒是不怎么用上了。虽然现在对as3.0程序员的需求很火，但是那需要的是及其熟练的，但是要求对as3.0的掌握及其深刻。我这么说的意思是，flash做的课件确实很好，但是时间成本很高；但是如果做好了可以一直使用。学弟学妹们可以合理的安排自己的时间，虽然教育技术里面带着技术二字，但是如果你以后打算做老师的话，教育理论才是我们立身的根本，平时ppt足以应付日常的教学需求了。
       flash课件的优点不必赘言。flash课件可以以很多形式呈现，比如交互性课件，flash开发的air软件，在线软件，小游戏等等，比如美图秀秀的在线版本其实就是as3写的还有人用as3写了在线的图片处理系统。而且flash制作的课件具有科学性，精准性等等。相对于用c或者c++开发的软件来说又简便易学。虽然现在很少用到，但是只是高中信息技术还会教，聊以自慰吧。
       其实as3想学，网络上的资源有很多，电子书也好教程也好，帖子也好。as天地会是国内最好的论坛之一，创始人黑羽是国内最早接触flash编程的一批人之一，他的《as殿堂之路》是一本非常经典的口碑很好的入门书籍，虽然我没有看过。
第一次写教程，我会尽力做到最好，相信诸位论坛里的朋友们也会帮我做到更好的。

      


作者: 想换个名字可以吗    时间: 2013-12-22 20:54
我先从小的课件入手来讲解，我用的版本是flash cs6 高版本必定有它的优点。中文版的就好。其实用熟了英文版中文版都好，反正常用的功能就那些。
作者: 想换个名字可以吗    时间: 2013-12-22 20:56
其实很多功能用flash操作可能会简单很多，我这里先都用脚本实现，然后用flash来设计，大家可以体会二者的不同。关于ide什么的大家自己百度，随意。
作者: 想换个名字可以吗    时间: 2013-12-22 21:06
我以数学函数图像绘制为例子来讲解。大家必须认识到flash中的坐标系和我们平时用的坐标系是区别的所以在做这方面的课件的时候必须要注意换算。一般来说flash数学函数图像课件的制作目的在于演示函数的性质，比如y=kx+b，重点体现，斜率和截距变化时，直线的变化；以及斜截式两点式如何绘制函数图像。
其实虽然表示的方法有很多，我们完全可以采用ax+by+c=0的形式来统一，或者无论给出什么样式，统一归纳到斜截式就好了。
这里涉及到的问题有，1，如何绘制图像；2，绘制完了如何修改图像；3，我可以向在flash软件里一样自由的选取并通过属性面板来修改吗？；4我该采用何种编程思想来实现。下面我就具体来说。
1 函数图像的绘制具体用到的是as3.0中的绘图api，当然数学计算要用到的是math包里的api，由于是演示，我们数据都取整数就好了，没有必要做的太复杂，便于计算不是吗？
如何画直线？就要用到lineto方法了，这个就是画直线的方法。当然还要有坐标轴的绘制，界面的设计等等，我们把精力集中到最关键的问题上
我们平时画图的时候必然要有，拿起笔到起点，然后绘制到终点的问题，所以as也是如此
比如我们要从（3，3）点开始绘制，就是lineto(3,3）当然没有这么简单。
我们拿起笔的时候，线条的粗细颜色是固定了的，但是有时候我们需要不同的粗细和颜色，as也允许我们进行设置。如下：
  1. circle.graphics.lineStyle(1,1);//设置笔触粗细为1，透明度1
  2.                                 circle.graphics.moveTo(1,1);//将画笔移动到（1,1）点
  3.                                 circle.graphics.lineTo(3,3);//画笔画到（3,3）点
复制代码
作者: 想换个名字可以吗    时间: 2013-12-22 21:19
在flash里运用as的时候，会碰到文档类，其实文档类就是纯as项目的主类，入口类，类似于c的main函数。
下面我用as演示下绘制一条（100,100），到（200,200），然后到（300,300）的直线
在java里一切都是对象，在c里也会把常用的功能封装成函数。我在这里从最基本的开始。
  1. package
  2. {
  3.     import flash.display.Sprite;
  4.    
  5.     public class demo extends Sprite
  6.     {

  8.         private var demoLine:Sprite;
  9.         public function demo()
  10.         {
  11.             demoLine=new Sprite();
  12.             
  13.             this.demoLine.graphics.lineStyle(3,0xff0000,.7);
  14.             this.demoLine.graphics.moveTo(100,100);
  15.             this.demoLine.graphics.lineTo(200,200);
  16.             this.demoLine.graphics.lineTo(300,300);
  17.             this.demoLine.graphics.moveTo(300,100);
  18.             this.demoLine.graphics.lineTo(50,50);
  19.             
  20.             this.addChild(this.demoLine);
  21.             
  22.             this.demoLine.x=10;
  23.             this.demoLine.y=10;
  24.         }
  25.     }
  26. }
复制代码

(, 下载次数: 15)
大家先试着能不能看懂。
其实看书自学+视频是最快的。
作者: 想换个名字可以吗    时间: 2013-12-22 21:23
在flash里，显示列表是一个非常重要的概念 。addChild等操作是非常重要的。其实就是相当于一个个的盒子，只不过这个盒子是透明的。或者说是玻璃，flash里的每个物体都是在透明的玻璃上，N多玻璃叠加起来形成最后的视觉效果。在显示列表里有深度的概念。什么是深度呢，也叫z索引，在现实世界里，除了高度宽度还有深度，index，用来区分前后关系。当然这个概念其实一个非常严谨的概念，在章精舍的书里面有非常详细的论述，这里我不多说了，大家可以找pdf版本来阅读，或者到学校图书馆借阅。
作者: 想换个名字可以吗    时间: 2013-12-22 21:30
这里涉及到一个显示列表的概念，在flash里，显示列表是一个必须了解的对象。
flash的显示对象有的可以做容器，比如这里出现的sprite类以及movieclip类，我们制作的元件，其实就是一个movieclip类，我们在元件里面嵌套元件，实际上就是在类里面包含了一个属性，这个属性是另外一个显示对象。
flash的显示对象呈树形结构，这个在帮助里描述的很清楚，大家看帮助就会明白了。
整个舞台，就是一个大的类，大的容器，我们在这个容器里添加东西。
大家看到，这个例子主类是扩展自sprite，相当于舞台，舞台上我们添加了一个对象：或者说是元件：demoLine
然后我在demoLine里绘制直线，要注意的是和as2不同，as3里所有的绘制函数都是跟graphics对象有关的。
通过显示对象的graphics属性来引用绘图函数。

所以关键的代码就是和graphics有关的那些代码。
作者: 想换个名字可以吗    时间: 2013-12-22 21:32
百度贴吧同一层里也可以讨论，倒是比较好的功能呢
作者: 想换个名字可以吗    时间: 2013-12-22 21:35
至于这些代码具体是什么意思，准备一个flash帮助手册，电子版的，到处都是，随便翻就是了。或者直接百度之
作者: 想换个名字可以吗    时间: 2013-12-22 21:54
本帖最后由 郎咸蒙 于 2013-12-22 21:58 编辑

用户干了什么？或者说鼠标干了什么？我们怎么样实现交互？
=======================yd的分割线========================
选择绘制的直线，并在直线周围绘制绿色的框体
这部分代码其实写的很乱。但是这样便于理解。
其实这里涉及到的概念是事件，也就是flash里面的事件机制。我们说flash有点之一在与强大的交互性。
我们什么时候发生交互了，或者说，我们什么时候按键盘了，什么时候单击鼠标了，左键还是右键，是按下鼠标不放还是放开了，鼠标什么时候移动到直线上啊，什么时候离开了啊，这些flash都可以知道，怎么知道的呢？事件。没当上述动作发生的时候，比如你单击鼠标左键，flash会自动生成一个消息：用户单击左键了，那么我们怎么知道这个消息恩，就是通过侦听事件来知道，我们通过跟踪形形色色的事件来了解flash或者说swf正在发生着什么，用户正在做什么从而正确的响应。这个好像在设计模式里面叫做订阅者模式(参见章精舍书籍或者百度之)还是啥来着。
意思是，我们通过添加侦听事件，addEventListener，添加 事件 侦听器，来侦听事件，就相当于我们从网上订阅了一份消息。当消息产生的时候，我们就会接收到这个消息。挥着人家会把这个消息告诉我们。但是如果你不添加侦听器你就收不到这个消息。用单击的时候，消息或者说事件总是有的，但是你不订阅你就不知道用户做了什么，这个就是事件的重要性。
代码大家可以在flash cs软件里写在文档类里面。
建议大家自己敲代码，这样才会更加容易记住。坦白的说我有时候也要翻文档的。文档就像字典，必不可少。微软的vs studio软件，msdn扮演了很重要的角色，msdn是一个丰富的资料库，为用户提供技术支持。帮助手册也是如此，帮助手册应该成为我们形影不离的好朋友，常翻常新。翻一下总会有很大的收获的。
  1. package
  2. {
  3.         import flash.display.Sprite;
  4.         import flash.events.MouseEvent;
  5.         import flash.geom.Rectangle;
  6.         
  7.         public class demo extends Sprite
  8.         {

  10.                 private var demoLine:Sprite;
  11.                 public function demo()
  12.                 {
  13.                         demoLine=new Sprite();
  14.                         
  15.                         this.demoLine.graphics.lineStyle(3,0xff0000,.7);
  16.                         this.demoLine.graphics.moveTo(100,100);
  17.                         this.demoLine.graphics.lineTo(200,200);
  18.                         this.demoLine.graphics.lineTo(300,300);
  19.                         this.demoLine.graphics.moveTo(300,100);
  20.                         this.demoLine.graphics.lineTo(50,50);
  21.                         
  22.                         this.addChild(this.demoLine);
  23.                         
  24.                         this.demoLine.x=10;
  25.                         this.demoLine.y=10;
  26.                         
  27.                         this.demoLine.addEventListener(MouseEvent.CLICK,onclick);
  28.                 }
  29.                
  30.                 protected function onclick(event:MouseEvent):void
  31.                 {
  32.                         // TODO Auto-generated method stub
  33.                         
  34.                         var rec:Rectangle=this.demoLine.getBounds(this);
  35.                         this.graphics.lineStyle(1,0x00ff00);
  36.                         this.graphics.drawRect(rec.x,rec.y,rec.width,rec.height);
  37.                         
  38.                 }
  39.                
  40.         }
  41. }
复制代码



作者: 想换个名字可以吗    时间: 2013-12-23 22:11
Flash Actionscript3.0交互课件制作过程

我们知道在学习过程中，要给出评价和反馈。具体的心理学理论忘记了，大概就是说当用户做出期望的行为的时候我们要给出相应的反馈，对用户进行强化，或者给用户一个积极的反馈，激励用户不断的做出我们预期的行为。这里做一个简单的例子。

我们做一个算数加减法的课件，然后学生每次答对题目的时候给用户一个笑脸，打错了给用户鼓励。我们知道我们是喜欢看到笑容的，不喜欢看到哭脸的。或者我们可以把这个笑脸直接换成现实中人物的照片，尤其是孩子们喜欢熟悉的人物。

同时可以提示大家的是，目前Flash软件可以非常简便的打包android系统需要的apk文件，也就是可以开发Android应用，并在安装了Adobe Air运行时的Android只能手机中使用。很多简单的例子可以直接发布成手机应用的。比如这个加减法的例子。
(, 下载次数: 9) (, 下载次数: 6) (, 下载次数: 13) (, 下载次数: 11)
代码写的不够精炼。在flash中做的。这个demo的关键是要给学生反馈。
  1. import flash.display.MovieClip;
  2. import flash.events.MouseEvent;
  3. stop();
  4. var f:MovieClip=faces_mc;
  5. f.visible=false;

  7. var num1:int=1+int(Math.random()*20);
  8. var num2:int=1+int(Math.random()*20);

  10. add1.text=num1.toString();
  11. add2.text=num2.toString();

  13. trace(add1.text);

  15. check_mc.buttonMode=true;

  17. check_mc.addEventListener(MouseEvent.CLICK,onclick);
  18. function onclick(e:MouseEvent):void{
  19.         f.visible=true;
  20.         trace(num1);
  21.         trace(num2);
  22.         
  23.         trace(int(add1.text)+"+"+int(add2.text)+"::"+int(sum.text));
  24.         if(int(sum.text)==(int(add1.text)+int(add2.text))){               
  25.                 f.gotoAndStop(1);
  26.         }else{
  27.                 f.gotoAndStop(2);
  28.         }
  29. }

复制代码



作者: 宜昌隆小@李    时间: 2014-2-19 08:44

kankan
作者: fsjzhengtu    时间: 2014-4-27 15:02
郎咸蒙 发表于 2013-12-23 22:11
Flash Actionscript3.0交互课件制作过程
我们知道在学习过程中，要给出评价和反馈。具体的心理学理论忘记 ...

很好的贴子啊 我想看这个



欢迎光临 应用思考-教育技术论坛 (http://etthink.com/) Powered by Discuz! X3.4