注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

.

.

 
 
 

日志

 
 

如何用FLASH打造出精美的多功能课件  

2009-01-07 12:16:36|  分类: flash课件制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

说到Flash,大家都知道是一款非常优秀的动画制作软件。其实flash不但能做出精美漂亮的动画,它还有非常强的交互性,利用它来制作做多媒体课件,要比Powerpoint漂亮、生动,要比Authorware灵活、小巧。Flash做出的课件,不但能把图片、影像、声音融为一体,还能响应操作,可以制作吸引人的练习题和小游戏等。所以,现在越来越多的老师开始用flash来制作课件了。虽然是flash是一个专业的动画制作软件,但是学习它你并不会觉得很难。
下面就拿一个课件例子来说一说怎么利用flash内置的脚本ActionScript(简称as)来制作精美的多功能课件吧。
首先请看一看课件的外观:如何用FLASH打造出精美的多功能课件 - 白云飘飘 - .


从课件的外观可以看出,本类课件有以下一些常用功能:
1、可以自由设定窗口大小,是仿WINDOWS窗口式控制;
2、自由控制背景音乐的播放和暂停;
3、小组计分功能:单击“计分”按钮,弹出小组比赛计分器,能加、减分。再次单击“计分”按钮或单击计分板上“X”则隐藏计分面板.
4、操作帮助信息:底部有课件的按钮操作指示,可通过单击“帮助”按钮显示或隐藏;
5、进度控制,类似于视频播放器的控制条,能显示当前播放进度和选择进度。
6、粉笔功能,点击画图按钮,则出现“画笔”能自由画线,单击“擦除”丢掉画线。
7、日期动态时间显示,显示当前时间及日期。
由于本文是给有一定flash基础的读者看的,所以一些基本的操作会一笔带过,只重点说说技巧,程序部分的“//”后面表示注释。下面我就分七个栏目来介绍一下如何用as实现以上的课件功能:

一、设计课件界面风格
漂亮清新的课件面板是一个能吸引学生注意力的成功课件的重要条件。所以在做课件内容之前一定要新建一个元件,取名为window,设计出一个漂亮的基本面板来。下图是以主蓝色,70%的透明度制作的主界面:

 如何用FLASH打造出精美的多功能课件 - 白云飘飘 - .

上例课件的主色调是深蓝,辅以白色线条作为点缀。上下各一个标题条和一个状态条,不透明。如果确定好主界面,那么以后要加上的按钮、计分板等都要和主色相协调。
另外,flash默认的窗口大小是550*400,但是我们要让课件全屏显示,并且能自由控制,这样就必须做好三个按钮来实现相应的效果。这里,我制作了三个差不多的按钮,分别在实例名称中取名为 small_btn、big_btn、close_btn。把它们排列在课件右上角,像windows一样。然后在按钮所在层的帧动作中输入:

close_btn.useHandCursor = false;
big_btn.useHandCursor = false;
small_btn.useHandCursor = false;
//这里三句表示将按钮的手型去掉,可以不要
close_btn.onRelease = function() {
      _root.window._alpha = 50;
      _root.ask._visible = true; //由于要防止误操作,所以关闭按钮并不是直接退出,而是调出确定窗口。界面变50%透明。
};
big_btn.onRelease = function() {
      fscommand("fullscreen", true);//fullscreen表示全屏命令
};
small_btn.onRelease = function() {
      fscommand("fullscreen", false);//全屏命令为false,即不全屏
};

//下面几句是让这三个按钮在碰触时把提示信息发送给“帮助”元件,在后面会详说。
close_btn.onRollOver = function() {
      _root.helptxt = "单击此按钮将关闭本演示文件";
};
fullscreen_btn.onRollOver = function() {
      _root.helptxt = "单击此按钮将全屏显示本演示文件";
};
small_btn.onRollOver = function() {
      _root.helptxt = "单击此按钮将以标准600*450显示本演示文件";
};

二、利用动态文本显示日间及日期
在课件上显示日期及时间是一个人性化的功能,能让教师方便地知道这节课上了多久,更能把握好自己上课的节奏。在flash课件上显示日期和时间是很方便的,只要用系统函数new Date()就能得到系统的时间。为了在课件的适当位置显示,所以我们暂时定在界面的左下角,如图所示:

 如何用FLASH打造出精美的多功能课件 - 白云飘飘 - .

插入一个动态文本,字为白色,变量为 mydate :

把这一层取名为:时间(为每一个组件定一层并取好名字是一个好习惯,方便以后的检查)。
在这一层的帧动作中输入以下语句:
function showtime() {   //自定义函数showtime来取得时间参数
      var mytime = new Date();
      var myyear = mytime.getFullYear();
      var mymonth = mytime.getMonth()+1;
      var myday = mytime.getDate();
      var myhour = substring(mytime, 11, 9); //取系统时间字段中的时分秒部分
      mydate = myyear+"-"+mymonth+"-"+myday+"-"+myhour; //设定动态文本显示格式
}
setInterval(showtime, 100);//每一百毫秒更新参数
这样,课件上的时间就会以 2006-03-19 18-51-44的形式显示了。

三、按钮与动态文本关联,设定帮助信息
 课件是给人用的,如果操作不熟的话,可能会引发意外事件(如跳到别的画面)。所以课件还缺少一点人性化的东西,即帮助信息,就像所有的软件也要一个帮助文件。我们就只要向使用者提供一点简单的按钮使用信息就行,

这个可以让动态文本实现。 

帮助元件并不一定总要出示在界面上,所以还要能隐藏才行,所以这样制作:先画出一个导航条一样的版面,在它的上面加上一个关闭按钮和一个动态文本,变量为helpmsg。这样它就能得到按钮被碰触时所提交的信息了
在它的帧动作中加入:
function showmsg() {
      helpmsg = _root.helptxt;   //得到主场景中按钮提交的helptxt信息参数并显示
}
setInterval(showmsg, 100);
close_btn.useHandCursor = false;
close_btn.onRelease=function(){
    _root.window.helpmc.gotoAndPlay(1)
}
然后将它们Ctrl+G组合成一个整体,作成渐隐再现的动画,并在最初、隐藏、再现三个地方的帧动作设为:stop() 。这样就只要控制它向后播放就能让它实现隐藏与再现交替进行的效果了。
再将课件各个功能的按钮加入到主场景,并分别命好名,在按钮所在帧动作中加入:
play_btn.useHandCursor = false;
stop_btn.useHandCursor = false;
back_btn.useHandCursor = false;
music_btn.useHandCursor = false;
score_btn.useHandCursor = false;
help_btn.useHandCursor = false;
quit_btn.useHandCursor = false;
// 以上为去掉手型式样,可以不要,下面的是显示帮助信息
play_btn.onRollOver = function() {
      _root.helptxt = "单击此按钮将播放演示内容";
};
stop_btn.onRollOver = function() {
      _root.helptxt = "单击此按钮将暂停播放,您可单击上一按钮继续播放";
};
back_btn.onRollOver = function() {
      _root.helptxt = "单击此按钮将返回演示目录,您可选择任意演示内容";
};
music_btn.onRollOver = function() {
      _root.helptxt = "单击此铵钮将播放或停止背景音乐";
};
score_btn.onRollOver = function() {
      _root.helptxt = "单击此按钮将弹出计分面板,给各小组评分比较";
};
help_btn.onRollOver = function() {
      _root.helptxt = "单击此按钮将显示或隐藏帮助信息条";
};
quit_btn.onRollOver = function() {
      _root.helptxt = "单击此按钮将退出本次演示,你确定吗?";
};
help_btn.onRelease = function() {
      helpmc.play();//让帮助元件播放(显示/隐藏)
};
play_btn.onRelease = function() {
      _root.play();
      _root.played = true; //得到是否正在播放
};
stop_btn.onRelease = function() {
      _root.played = false;//得到目前暂停中
      _root.stop();
};
back_btn.onRelease = function() {
      _root.gotoAndPlay("menu");//跳到课件目录帧
};
music_btn.onRelease = function() {
      musiccontrol.play();//音乐控制开关
};
score_btn.onRelease = function() {
      score_mc._visible = true;//显示计分板
};
quit_btn.onRelease = function() {
      _root.window._alpha = 50;
      _root.ask._visible = true;//弹出退出确认对话框   _visible 是指元件的可访问性
};
如下图:

如何用FLASH打造出精美的多功能课件 - 白云飘飘 - .
 

下面是这个课件的界面效果,没有具体内容,只有简单的框架效果,不过个人觉得这个框架效果很实用,所以把效果和制作的AS转贴过来给大家看!

  评论这张
 
阅读(418)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017