Flash课件网 - 您身边的课件制作专家
Flash课件网官方,专业代做课件、定制原创Flash动画或参赛课件、修改Flash、制作演讲或汇报幻灯片PPT课件。联系QQ:4318100或搜索微信号:flashkj

flash课件模板制作系列教程之按钮导航(下)

本站提供Flash课件代做和PPT幻灯片定制业务,联系QQ/微信:4318100

这一节,我们来制作这样一个效果,当课件打开后,所有的导航按钮通过一个动画效果展现出来,或许很多人要说,不就一个课件吗,搞这么麻烦做什么?你这样想就错了,同样是课件,同样是用FLASH来做,但是为什么有的人做出来的效果让人看了没什么感觉,而有些人做的让人能够印象深刻,况且,从实用角度来讲,使用的课件的大部分是老师,或是培训某些专业人员的讲师,如果你的课件不能够让人产生丝毫学习的兴趣,那么你的课堂就是失败的。曾经看过很多人制作的课件,其中不乏获奖的,但是效果实在不敢恭维,他们甚至不考虑使用的图片素材的大小,只知道一味的放大,放大就放大吧,还不等比例的缩放,造成图片内容拉伸的完全变形了,变形就变形吧,还在图片上印上大红大绿的超大字体,无丝毫美感可言。

人都是喜欢美好的事物,喜欢欣赏美丽的东西,我不要求大家为了制作课件去学习美术知识,只希望大家能在软件应用娴熟的基础上,尽量的花些心思去考虑,怎么样做才能让人看了赏心悦目,什么样的色调能够让人看着舒服,课件内容适合用什么样的界面背景和背景音乐等问题。比如:古文课件可以做的古色古香或金戈铁马,散文可以做的舒缓柔情让人沉浸其中,当然,这样或许会消耗我们很多的时间来做谋划和搜集素材,但是,效果却是简单的课件所无法比拟的。

其实我们平时在上网的时候,看到不错的素材就考虑一下,以后我在制作课件的时候是不是可能用到?可以的话就拷贝下来备用,久而久之,你的眼光跟着提高的同时,也搜集了不少实用的素材。这对你以后课件的制作会有很大的帮助。

跑题了,最后再说一句:“细节决定成败”。好了,下面开始制作.

【第十一步】:我们把“导航层”解锁,其它两个图层锁定,然后把九个导航按钮全部选中,按F8将他们转换成一个影片剪辑。就命名为“导航效果”吧。在FLASH里面,元件是可以无限嵌套的,就是影片剪辑里可以包含任意元件,任意元件里还能再包含任意元件.....

好了,现在这九个按钮就是一个完整的影片剪辑,我们双击任意一个,就进入到这个影片剪辑的编辑界面了。

进去后,全选九个按钮,在任意一个上面点击右键,选择“分散到图层”,这样,每个按钮在时间轴上就占据了一个单独的图层,方便我们做动画效果。看下图:

 

分散后,时间轴上显示如图:

 

图层1是个空白图层,没什么用了,就删除掉吧。下面的九个图层,从下到上依次“第一章、第二章......总结练习”按钮,图层的名称就是按钮元件的名称,因为除了“第一章”这个按钮我命名为“第一”,其余的我都没起名字,所以这里显示的就是元件1等。

【第十二步】:全选时间轴上的第八帧,方法是在第一个图层得第八帧处按住鼠标不放,向下拖动。点击右键,插入关键帧,我们要来做动画效果了。看图:

 

然后在第一帧和第八帧之间随意选一帧,向下拖动,把所有图层得这一帧全部选中,然后点击右键,“创建补间动画”,如图:

 

好了,现在打开“属性”面板,是不是看到下面这样,“补间”选项就自动选择“动画”了。

 

记住,只有帧上得内容是一个单独的影片剪辑、按钮和图形三种元件得任意一种时,才可以在两个关键帧之间右键选择“创建补间动画”,如果是形状动画千万不能这样做,切记。在这里,我们顺便把“缓动”选项修改成100。

【第十三步】:我们依次点击所有图层的第一帧,然后用键盘上的方向键向上把按钮移动到下图位置,(按住键盘上的shift键不放然后按键盘上得方向键,每次可以移动十个像素),现在,动画效果就出来了,但是还不是我们向要得,我们需要做按钮从透明到完全显示出来,并且按钮效果是当第一个按钮运动三帧后,第二个按钮开始,依次类推,直至所有按钮全部显示。

 

现在框选所有图层的第一帧按钮,打开“属性面板”,将按钮得透明度(alpha)值调整为0。

 

我们现在来修改每个图层的动画显示时间,选中“元件1”层上的所有帧,向后拖动三帧,“元件2”层的所有帧向后拖动6帧,依次类推,拖动完毕后,在“元件8”下面的所有图层插入帧,帧得长度和“元件8”层的一样。如图:

 

到这里,我们的导航效果就制作完成了,前面提到,影片剪辑是一只循环播放的,在课件里我可不想让它一遍一遍得在那放个没完,所以,我们要加一个“stop”的命令。让它播放依次就停止。点击“元件8”图层得最后一个关键帧,打开“动作”面板,输入:“stop();”。彻底完工,赶快测试一下看看效果吧。测试影片得快捷键:ctrl+enter。

我们来给导航按钮添加相应的指令,让他们乖乖的听从我们的指挥,这一节涉及到FLASH的路径问题,并将做重点讲解,希望大家一定要认真的思考,因为以后我们在制作课件的过程中,如果想省些力气并想游刃有余的来控制各个元件的话,就一定要深刻领会路径的含义。

【第十四步】:在舞台上新建一个图层,命名为“内容层”,这一层,将放置所有的课件内容,通过我几年来的课件制作经验,认为这种方法是最省时省力的,我的思路是,课件的每一个模块转换成影片剪辑,这个模块所用到的素材和元件全部嵌套在这个影片剪辑里。每个模块在这一个图层上占用一个帧,这样,就可以通过控制相应得导航按钮跳转到相应得帧去就可以了。

在“内容层”的第二帧以后的任意地方,插入九个空白关键帧,每个空白关键帧最好间隔几帧,因为下面我们要给帧来添加“帧标签”,以方便以后我们的修改工作。

【第十五步】:如下图所示,点击第四帧处得那个空白关键帧,打开“属性”面板,我们来给它添加帧标签,这样,即使后面我们要把它移动到另外一个位置,也不再需要改动我们的导航按钮代码。因为在FLASH里面,可以通过GOTO命令直接跳转到相应的帧标签所在的帧。好了,我们分别为剩下的八个空白关键帧添加上帧标签。我这里的标签就是“yizhang、erzhang、sanzhang.....”了。

 

【第十六步】:好了,现在我们来给导航按钮添加相应的代码。我们点击“导航”层的第一个关键帧,这样就选中了我们之前做好的包含所有导航按钮的那个影片剪辑,但是,我们看不到导航按钮,看下图:

 

这时,我们可以通过点击上图框选中得那个圆来进入到影片剪辑内部进行编辑。好了,双击进去后,我们点击时间轴上的最后一个关键帧,这样,所有的按钮都显示出来了,我们依次选中它们添加按钮代码,先点击“第一章”这个按钮,然后打开动作面板,添加以下代码:

on (release) {

_root.gotoAndStop("yizhang");

}//当鼠标指针松开时,舞台上的时间轴前进到帧标签为“yizhang”的帧处并停止播放

on (rollOver) {

_root.yi_mc.gotoAndPlay(2);

}//当鼠标指针移动到按钮上时,舞台上的“yi_mc”这个影片剪辑跳转到第二帧播放

on (rollOut) {

_root.yi_mc.gotoAndPlay(10);

}//当鼠标指针移出按钮时,舞台上的“yi_mc”这个影片剪辑跳转到第十帧播放

这里说明以下“//”是FLASH的注释代码,在添加导出影片的时候,“//”后面得文字将会被忽略,它得作用主要是为代码添加相应的文字说明。

 

上面代码“_root.yi_mc.gotoAndPlay(2);”和“_root.yi_mc.gotoAndPlay(10);”里的“yi_mc”是我们之前制作好的导航按钮的背景效果MC,之前我们就已经给他们命好名了。后面得2和10两个数字是“yi_mc”的时间轴要跳转到的帧。看下图:

 

我们之前在第一帧和第九帧分别添加了“stop”命令,这两句代码就是为了让这个MC执行相应的命令。当然,如果你做得帧和我不一样,那就要改动后面得数字了。

上面代码中的“_root”,指的就是舞台。也就是导航效果MC的上一级,也叫父级,它是FLASH的两种路径之一,称为绝对路径。

Flash的路径有两种:绝对路径和相对路径,绝对路径的代码很简单,就是“_root”,无论你嵌套多少个影片剪辑,都可以通过绝对路径来控制舞台上的任意一个MC或时间线。

“相对路径”就稍微复杂些,它得代码是“_parent”,它能控制父级MC里得任意mc和时间线,同时也可以控制爷级、祖爷级、老祖宗级等等(这几个是我自己起的名字,嘿嘿),比如,有个按钮在舞台上的yi这个MC里的er这个mc里,那么,它要控制舞台上得时间轴,代码就需要这样写:_parent._parent.play();,第一个_parent指的是按钮所在MC的父级yi这个MC,第二个_parent指的是yi这个MC的父级,也就是舞台。可以理解吗?

不理解的话,我打个比方来说。相对路径,这样来理解,有一天,我从家里出发去上班,在卖烧饼的地方停了一下,买了俩烧饼,又在卖哇哈哈牛奶的地方停了一下,买了瓶爽歪歪,吃着走着到了公司,走到办公室门口,一摸兜,发现钥匙不见了。这时,我们会怎么去找呢?

对了,赶紧原路返回,在卖爽歪歪的地方找找,没有,再去卖烧饼的地方找找,也没有,再回家,发现昨天晚上回家时裤子被小强咬了一个碗口大的窟窿,而钥匙就在裤子上挂着。

在整个例子里,我们可以把我早上得遭遇当成一个完整的FLASH影片,而钥匙、家、烧饼铺、爽歪歪铺、公司,当成一个个得影片剪辑,因为我们不确定钥匙是忘家里了还是掉路上了,所以要返回一个一个的寻找。(相对路径)而如果确定在家里的话,就可以往家里打电话,让小强直接给我送来。(绝对路径)

这样理解吗?如果还不理解,那只有使出我最后得杀手锏了。

舍弃相对路径不用,只用绝对路径......

比如在1里面的2里面的3里面的4里面的5这个按钮,想控制3里面的6这个影片剪辑,用绝对路径代码要怎么写?自己思考一下吧。

最后,我想大家应该注意到了,“.”出现的很频繁,它做什么用得?这个,如果硬要用中文翻译的话,你就理解成“的”吧。

FLASH的路径就讲到这里,下面,我们接着为按钮添加代码,“第二章”的代码如下:

on (release) {

_root.gotoAndStop("erzhang");

}

on (rollOver) {

_root.er_mc.gotoAndPlay(2);

}

on (rollOut) {

_root.er_mc.gotoAndPlay(10);

}

因为只改动了一个帧标签和MC的实例名称,其它的都不需要再改动,所以可以直接复制“第一章”的代码过去,然后修改一下帧标签和实例名称就可以了。

依次类推,把所有得按钮代码都加进去。好了,到这里就完成了,我们可以在内容层的几个关键帧上随意添加一些内容测试一下看看效果。

 

这一环节,我们来学习FLASH的一种特效——遮罩,它的功能是可以让FLASH只显示我们指定的部分,其余部分完全看不到。这是个很强悍的效果,如果运用得当得话,能做出很多炫目的特效。好了,开始。

【第十七步】:打开我们之前制作的源文件,但愿你都顺利的保存了,否则只有重头来做。在“导航效果”层上面新建一个图层,命名为:“遮罩”。

解除“界面”图层的锁定,选中那个黑色的边框线,复制,然后点击“遮罩”层的第一个关键帧,ctrl+shift+v 黏贴到当前位置。还把“界面”层锁定,选中遮罩层的边框线,因为它是个黑色和白色线框的组合,我们现在只需要一个就行了,所以要打散一下,ctrl+b打散后,删除掉一个,留下得一个再执行一次打散命令,这样它就可以直接在舞台上编辑了。

看下图,打散成这样后,我们就可以再矩形框里进行填充了。

 

【第十七步】:点击工具栏里的“填充工具”,颜色随意,在矩形框里面点击一下,然后我们再双击矩形的边线,删除掉,我们只要填充就可以了。好了,现在你应该看到一个矩形,把导航按钮全部覆盖住了。如下图:

 

到这里,我们的遮罩就制作好了,下面是关键的步骤了。我们在“遮罩”层上点击右键,然后选择“遮罩层”,如下图所示:

 

点击后你会发现,“遮罩”层和下面得“导航效果”层前面得图标变了,这两个图标得含义表明了他们之间得关系,上面的是遮罩,下面的是被遮罩。打个比方来说,小强站在一间屋子前面,门打开后,他只能看到门后面的东西,其它地方的看不到,在这里,遮罩就像这扇门,被遮罩的图层就像屋子里得所有东西。这样应该很容易理解了吧?

好了,现在测试一下影片,再把鼠标移到导航按钮上去,看看效果是不是好多了。

 

遮罩的原理只要理解了,其实可以变幻出很多特殊效果出来,同时,遮罩层也可以做成动画,例如做成一个百叶窗打开的效果,做成无数碎点组合而成的效果等等,但是有一点要记住,遮罩层一定要是矢量图形,否则遮罩不起效果。复杂些的遮罩效果制作在制作课件内容的时候会讲到,今天,只要求大家理解遮罩的原理,并能做出简单的遮罩效果就行了。

今天得内容不多,主要是因为遮罩这项功能实在太重要了,大家一定要熟悉熟悉再熟悉,多做出来几个不一样的,直到熟练运用为止。

最后,我们顺便也把关闭按钮的代码添加上吧,解除“界面”层的锁定,选中关闭按钮,打开“动作”面板,输入以下代码进去:

on (release) {

fscommand ("quit");

//当鼠标指针松开,关闭课件

}

这里按钮经过、按下的效果我就不再制作了,前面已经对按钮的编辑做了详细的讲解。大家如果想让按钮更炫目一些,可以自行修改编辑,另外有一点说明,除了文字类得需要添加“点击”区域,其它的比如圆形,方形之类的就不需要了,除非你有一些特殊要求,因为文字除了笔画之外有很多空白的地方,做成按钮后如果不添加“点击”区域的话,那么这个按钮只有当鼠标移动到笔画上时才可以点,这样很不方便,而完全实心的就没这个问题了。

flash课件制作全过程实例》由flash课件http://www.flashkj.com原创,旨在为各位教师朋友提供一个完整系统的flash课件制作教程,请尊重版权,转载请注明出处。

{13148845853120}
{13148840319970}
{13148831118530}

 

 

 

标签:flash课件模板制作教程按钮导航
分类:Flash课件| 发布:cmx| 查看: | 发表时间:2011-3-28
原创文章如转载,请注明:转载自Flash课件网 http://www.flashkj.com/
本文链接:http://www.flashkj.com/flashkj/104.html

已经有 ( 0 ) 位网友发表了评论,你也评一评吧!

Design By Flashkj.Com | Login | Power By Chen Feiyang.