制作FLASH课件模板的技巧 - 重庆动画公司 动画制作 三维3d设计 首选【重庆汉蜀动画有限公司】
Originality | August 17

制作FLASH课件模板的技巧

一、设计一个界面。

界面设计要简洁,大方,色彩要柔和,不能太暗,太亮。

 界面可以设计成窗口样式的,也可以设计成MTV样式的,根据个人爱好,想怎么设计就怎么设计。个人喜欢在界面的上面和下面各设计一个条形框,上面输入学校和设计者,加上画线、清除、最小化、最大化、关闭按扭。

 下面是调用主要内容的目录按扭,窗口中间空白。右下角是背景音乐的开关。就这么简单,但是做起来却要非常仔细。

1、窗口,用矩形工具画条形框。上下各一个,40高,宽和场景相同。拉入场景后定义实例名window

2、在上面输入学校和设计者名。

3、制作按扭、一共五个。画线、清除 最大化 最小化、关闭。

4、制作目录按扭、一般情况下我制作的是 导入 朗读 生字 说话 写话 拓展 封面 这几个,到制作主要内容时,根据课件的脚本只改上面的字就可以了。

5、制作画线纸MC 其实就是一个空影片剪辑。只有这样,才可以在课件上随意画线。定义实例名为 paper

6、制作一个画线时用的笔MC。画一个铅笔样的东东就行了。定义实例名为pen

7、制作画线MC,定义实例名为 drawline 新建一个画线MC,第一帧 stop,第二帧输入画线语句。

stop()

_root.onLoad=function(){

i=false;

}

_root.onMouseDown=function(){

x=_root.window.paper._xmouse;

y=_root.window.paper._ymouse;

i=true;

_root.window.paper.moveTo(x,y)

}

_root.onMouseUp=function(){

i=false;

}

_root.onMouseMove=function(){

if(i==true){

_root.window.paper.lineStyle(2,oxff0000,100);

 

_root.window.paper.lineTo(_root.window.paper._xmouse,_root.window.paper._ymouse)

}else{

_root.window.paper.lineStyle()

}

updateAfterEvent()

}

8、制作音乐开关

新建音乐MC,拖入一个音乐按扭。

导入声音,把你库里的声音对象的输出标示符命名为 sound1,然后在MC的第一帧加AS: s1=new Sound();

s1.attachSound("sound1");,然后在按钮上加:

on(release) {a=a+1; if(!(a%2==1)){//奇偶判断; s1.stop();

_root.aa=int(s1.position/1000);//记录音乐暂停的位置; }

else{s1.start(_root.aa);//从暂停的地方继续开始播放;

}

}

二、界面排列

 第一层 是框,第二层学校和设计者名,第三层 上面的放的按扭 第四层画线笔

第五层画线纸 第六层画线MC,第七层音乐。最后一层AS层输入pen._visible =

false; 让画线笔一开始不可见。

接下来在各个按扭上输入脚本如下

最小化按扭:on (release) {

fscommand("fullscreen", "false");

}

最大化按扭:

on (release) {

fscommand("fullscreen", "true");

}

关闭按扭:

on (release) {

fscommand("quit", "");

}

画线按扭:

on (release) {

drawline.gotoAndStop(2);

paper._visible = true;

pen._visible = true;

pen.startDrag(true);

Mouse.hide();

}

清除按扭:

on (release) {

_root.window.paper.clear();

pen._visible = false;

Mouse.show();

}

三、把界面拉入场景中

 第一层导入相应课文的图片

第二层输入课题及执教老师名字

第三层放入界面。

第四层放入目录按扭

接下来第五层从第二帧开始插入组件,每一帖都标好标签 “导入  朗读 生字 说话 写话 拓展 封面”然后在目录按扭上一一写下AS 

on (release) {

gotoAndStop("dr");

}

用帧标签便于修改主要内容。

组件参数的设定只要输入相应的主要内容名字“导入  朗读 生字 说话 写话 拓展 封面”加上后缀“swf”就可以了。

一个模板就做好了。

三、关于封面文字动画的制作

 封面的文字都可以做成动画形式的,但是文字动画制作起来比较麻烦,所以我一般采用文字特效软件制作后,导入flash中。我常用的文字特效软件有flax3.0

和SWiSHmax。这两个软件制作文字特效,只需点点鼠标,就可以制作出炫目的文字特效,导入flash后直接生成影片剪辑.

/////////////////////////////

////////////////////////////

******************************

 

为了以后做课件时参考,先转过来收集起来.

注:本文中代码后面的“//”表示接下来是代码解释文字

一、先设计出一个漂亮的界面来

打开flash ,按F8新建一个影片剪辑,取名叫“窗口”。然后在主舞台中画一个窗口界面。(大小自定,我个人比较喜欢大点的界面,一般用800X600,新建的flash文档一般是550X400。怎么画?你自己想要什么样的就画什么样的吧!)

说明:界面设计不能太花了,但要有主色调。

不建议使用晃眼的色调,因为整个课件要协调好。太黑了使人感到郁闷,太亮了眼睛痛,适中最好。

风格看个人的喜好了,比如我喜欢窗口风格的。也有好多人喜欢无窗口的,全由你自己爱好啦。 初步做好后,将它拖放到场景中,刚好与舞台重合。并在“属性”栏中,实例名称中输入:window

二、界面做好后,就要来制作交互用的按钮了

一般我们需要制作3-4种按钮:

1、控制课件的屏幕大小及关闭按钮(名为close_btn、fullscree_btn、small_btn):

2、响应课件内容及相关操作的通用按钮(因为只要在上面加个名字,就能变成“播放”,“停止”,“音乐”等按钮了);

3、临时按钮:主要在课件中进行临时交互用的。

详细制作方法(不要嫌我啰嗦啊):

1、点插入--新建元件, 或按crtl+F8, 取名为“按钮”,类型选“按钮”,确定。按钮都有四个帧“向上”(即平常状态)、“经过”(鼠标移上去的样子)、“向下”(鼠标点下去的样子)、“点击”(这里什么色无所谓,它只限定鼠标起作用的范围)。另外还可以为这个按钮加点声音,按下时响一下。方法是,点“文件”-“导入”一个声音来。声音就存在于库中了,在按钮图上新建一层,在“按下”帧插入一个关键帧,将声音从库中拖入编辑窗口中即可。(其实声音还可有好多种设置,这里不必要作过多设置,就不详说了)

2、按自己的想法,分别做好四个不同的帧,这样你的多彩的按钮就做出来了,建议多用渐变色(包括线性和径向)。

3、将做好的按钮拖放到界面中去,命名并输入文字

在库中双击“界面”元件,进入影片剪辑“界面”的编辑状态,新建一层,取名为“按钮”,从库中把做好的按钮拖入到适当的位置,摆放整齐。分别在“属性”栏中的“实例名称”中输入:(不包括后面的汉字)

fullscreen_btn全屏 close_btn 关闭play_btn 播放 stop_btn 暂停 back_btn 返回 music_btn 音乐practice_btn 练习 score_btn 计分 help_btn 帮助 quit_btn 退出 。再新建一层,取名为“按钮文字”,用文本工具在按钮的上面输入各按钮的名称(如下图):

4、为各个按钮输入脚本控制语句:

新建一层,取名为“脚本”。按F9调出动作面板(如果是FLASH MX,请选“专家模式”),然后在空白处输入以下代码:

fullcreen_btn.onRelease=function(){ //onRlease表示点击并松开运行(function)

fscommand(“fullscree”,true) //fscommand是一个命令语句 fullscreen是全屏

}

close_btn.onRelease=function(){

fscommand(“quit”,true)  //quit表示退出

}

play_btn.onRelease=function(){

_root.play()  //播放 _root.表示主场景,加上这个前缀来控制主时间轴,下同

}

stop_btn.onRelease=function(){

_root.stop()  //停止

}

back_btn.onRelease=function(){

_root.gotoAndStop(“mulu”) //返回到目录帧(你在课件中有目录的帧的属性面板中找到“标签”栏,在其中输入:mulu 这时在时间轴会有一面小红旗和mulu字样)

}

music_btn.onRelease=function(){

musiccontrol.play() //这里要涉及一个音乐控制影片剪辑,在后面介绍

}

practice_btn.onRelease=function(){

_root.gotoAndStop(“practice”) //跳到练习内容(帧标签为practice)

}

score_btn.onRelease=function(){

score_mc._visible=true //设置计分板为可见,计分板制作将在后面介绍

}

help_btn.onRelease=function(){

helpcontrol.play() //设置帮助信息的可见与隐藏控制,后面有相关介绍

}

输入完成后,点一下上部分的小勾,检查脚本有无错误,如果出现错误提示,认真检查,并正确输入。直到提示“此脚本无错误”。

三、制作实现背景音乐控制、计分板、帮助信息面板的影片剪辑

在这里顺便提一下:建议在库中建立几个文件夹,便于管理众多的影片剪辑

单击库面板中左下角的文件夹图标,就会在库中建立文件夹,可以将各种影片剪辑归类存放:如建立“声音”、“按钮”、“面板部件”三个文件夹,再把相应的元件拖入其中。要使用里面的元件时,只要双击文件夹图标即可。

  1、制作背景音乐控制元件

导入一个mp3/wav格式的音乐文件,不要太大,以1-4M为佳。导入后,在库面板中会出现一个喇叭形状的图标,将它拖到“声音”文件夹中。

新建一个影片剪辑,取名为“音乐”。将刚才导入的音乐拖入到编辑窗口中,单击第一帧,在“属性”面板中,将“同步”下拉选单中选“数据流”(如下图,为的是让音乐随帧播放,便于控制),然后在700帧左右插入帧(不是关键帧呀!!),如果音乐大概是1分钟就要720帧,自己算算。直到你的最后一帧中无蓝色波形,说明音乐刚好放到那里就完成了。

再新建一个影片剪辑,取名为“音乐控制”。在第一帧的帧动作中输入:

stop()

music_mc.play() //让音乐放

在第二帧插入一个关键帧,在帧动作中输入:

stop()

music_mc.stop() //让音乐停

在库中双击“界面”元件进入它的编辑状态,新建一层,取名为“音乐”,将刚才做好的影片剪辑“音乐”和“音乐控制”拖到工作区任意位置,并分别命名为:music_mc和musiccontrol。到此,背景音乐的控制元件就做好了。能在界面中单击“音乐”按钮进行控制了。按Ctrl+Enter键测试一下吧!

2、制作计分板元件

这个里面将要用到“动态文本”,这是一个可以按要求随时改变字符的文本,用来动态显示分数。

新建一个影片剪辑,取名为“计分板”。先画好板面,要注意与主界面相配。并在适当的位置用文本输入各组组号。

新建一层,取名为“分数”,点T文本工具,并在属性栏中,设为“动态文本”,在面板组名下框出六个文本区,并分别取“变量”为s1-s6,如图:

再做一个加分按钮和一个减分按钮(不细说步骤了),将它们拖放六次到计分板的适当位置,实例名为:jia1_btn,jian1_btn,jia2_btn,jian2_btn … …如图:

新建一层,打开帧动作面板,输入六段下面类似代码:

a1 = 0;

jia1_btn.onRelease = function() {

a1++;    //每次单击递加1

s1 = a1;

};

Jian1_btn.onRelease = function() {

a1--;    //每次单击递减1

s1 = a1;

… …

(以上是1组的加减分按钮,你就另外加5个的进去吧!只要将1改成2、3、4、5、6即可,注意要认真一点,输完后要检查无误。)

最后还要拖入一个可以将计分板关闭的按钮来,放在右上角,实例名称为:close_btn ,在帧动作面板中还要加入条:

close_btn.onRelease=function(){

_parent._visible=false  //表示上一级(即计分板)不可见

}

这时,计分板己做好。在库面板中,双击“界面”,打开它的编辑状态。

新建一层,取名为“计分”,将做好的“计分板”元件拖入到场景中适当位置,并在“实例名称”输入:score_mc 。你再测试一下你的计分板吧!呵呵!

3、制作帮助信息元件

这个很简单,新建一个影片剪辑,命名为“帮助信息”,画个450*20的矩形,再向里面添加一个动态文本。变量取为 helptxt就行了。

再新建一个只有两帧的类似于音乐控制的影片剪辑:帮助控制 

第一帧动作:stop()

help_mc._visible=true //帮助为可见

第二帧动作:stop()

help_mc._visible=false //帮助为不可见

两个做好了,再在库中双击“界面”进入编辑状态,新建一层,取名为“帮助”,将刚做的“帮助信息”拖到界面的下文横条上。在实例名中输入:help_mc,再将“帮助控制”也拖入,实例名:helpcontrol 。

要实现实时显示帮助信息,还得要加入一些代码,单击“界面”的第一帧,在动作面板中输入:

close_btn.onRollover=function(){  // onRollOver表示在鼠标移到按钮上时触发事件

help_mc.helptxt=”提示:单击关闭本课件” //给动态文本的变量helptxt赋值,下同

}

fullscreen_btn.onRollover=function(){

help_mc.helptxt=”提示:单击全屏显示课件”

}

small_btn.onRollover=function(){

help_mc.helptxt=”提示:单击小屏显示本课件”

}

play_btn.onRollOver=function(){  

help_mc.helptxt="提示:单击播放课件。"

}

stop_btn.onRollOver=function(){

help_mc.helptxt="提示:单击暂停播放课件。"

}

back_btn.onRollOver=function(){

help_mc.helptxt="提示:单击返回课件目录。"

}

music_btn.onRollOver=function(){

help_mc.helptxt="提示:单击播放或停止背景音乐。"

}

score_btn.onRollOver=function(){

help_mc.helptxt="提示:单击进入小组计分系统。"

}

practice_btn.onRollOver=function(){

help_mc.helptxt="提示:单击进入练习题。"

}

quit_btn.onRollOver=function){

help_mc.helptxt=”提示:单击将退出课件”

另外,有时想在课件上显示时间,可以加一个动态文本,变量为:mytime。并在它所在的帧的帧动作中输入:

function showtime(){

var time=new Date() //得到系统时间字符串

mytime=substring(time,11,9) //只截取其中时分秒的部分

}

setInterval(showtime,100)   //100毫秒刷新一次

提高篇:(可以不做)

1、课件中实现粉笔的功能(即鼠标画线并能擦除):

在主场景帧动作中输入下面的代码可以实现鼠标的画线:

_root.onLoad=function(){

i=false;

}

_root.onMouseDown=function(){

x=_root. _xmouse;

y=_root. _ymouse;

i=true;

_root.moveTo(x,y)

}

_root.onMouseUp=function(){

i=false;

}

_root.onMouseMove=function(){

if(i==true){  //判断画线条件

_root.lineStyle(2,oxff0000,100); //确定线型(线宽,RGB色,透明度)

_root. lineTo(_root. _xmouse,_root._ymouse)

}else{

_root.lineStyle()  //如果条件不具备,则利用无线型,不显示线条

}

updateAfterEvent()

}

还要另加一个按钮来清除画好的线,按钮动作:

on(release){

_root.clear()  //清除

}

 

2、让计分等面板成为仿windows窗口,可随意拖动

新建一个影片剪辑,画一个像Windows窗口标题栏样式的条状体,,取名为bar

将它放在计分面板上,实例名设为:bar

然后在它所在帧的帧动作中输入:

bar.onPress=function(){

_parent.startDrag() //当鼠标按下时能拖动

}

bar.onRelease=function(){

_parent.stopDrag()  //当鼠标弹起时停止拖动

}

实际上在所有的面板都可以像这样做,一样可以实现面板可拖动。呵呵,是不是挺酷?

至此,一个FLASH的课件主框架就构建好了,剩下的就是往里面充实东西。这个教程主要是给大家提供一个设计思路,思路清晰,做起事来的效果当然就事半功倍了。

写完收功!

制作课件 制作flash课件


渝ICP备19013396号-2