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

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

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

在这章里,我们将学习按钮的详细制作过程、补间动画的制作过程以及通过按钮控制影片剪辑的AS代码。希望大家听到AS后不要头大,我们在制作FLASH课件时所使用到的AS并不多,可以说只是AS的冰山一角,所以很容易,如果你记不住AS代码和格式,只需要把常用得AS保存下来,以后用到的时候稍加修改就成了。

下面开始,首先打开以前制作的界面文件,把界面图层锁定,新建一个图层,我们先用文本工具在界面的左上角输入课件的名称,我这里就用“flash课件制作全过程实例”了,说到这里,想起来之前好像忘了介绍文本工具的属性了,这里简单说以下,看下图:

 

A处是选择文本的属性,有静态、动态和输入之分,前面已经提到过了。

B处是选择文字的字体,这里列出了你电脑里面所存放的所有字体,如果感觉不够用,可以从网上下别的字体安装。

C处是调整文字大小。

D处是文本的对齐方式。

E处点击后可以调整文字的行距、缩进等。

F处是调整文字方向的,有水平和垂直。

G处是文字的显示效果,一般我们用动画消除锯齿。

H处是调整文字字间距的。

这些大家都可以调整一下看看能达到什么效果。

好了,现在在界面的左下方输入版权信息,之后把这两个文本也转移到界面层得第一帧去。这个以后就不用编辑了。

好了,下面开始制作导航按钮了,请大家打起精神,别漏掉任何细节。

【第一步】:先输入导航文字内容,并放在合适的位置,用“对齐”面板的功能将他们对齐。然后为他们添加一个发光滤镜。如图:

 

【第二步】:选择“第一章”文字,按下键盘上得F8键,将它转换成按钮元件,然后双击这个按钮元件,将进入到元件的编辑界面。在FLASH里面,任何元件和组合,都可以通过双击进入修改,看图:

 

上图在场景1后面我框选的“第一”就是我给按钮起的名称,显示这个,就说明现在是在按钮的编辑区域。下面是按钮得时间线,它的时间线比较特殊,只有四帧,分别是:弹起、指针经过、按下和点击,下面我分别进行解释。

弹起:是鼠标指针不经过按钮时显示的状态。

指针经过:是指当鼠标指针移动到按钮上时,按钮显示的状态。

按下:是当你用鼠标点击按钮时它显示的状态。

点击:这个是用来界定按钮的点击区域,就是当鼠标指针移到什么区域可以点击这个按钮。在这一帧上,你无论画任何东西,它都不会在FLASH里面显示出来。

好了,现在我们在“指针经过”那一帧插入关键帧,并将文字得颜色修改成暗红色吧,然后在“按下”这一帧也插入关键帧,再把颜色改成白色,文字向右和向左各移动一个像素。最后在“点击”处插入关键帧,用矩形工具画出一个矩形,大小正好覆盖住文字就可以了。

如图:

 

【第三步】:现在来给按钮添加声音效果,首先要找到一个是按钮声音素材,这些大家可以在网上下载,这里我就提供课件里用到的声音文件:点击此处下载

现在点击菜单项的“文件——导入——导入到库”,然后找到刚才下载的声音素材,双击导入到FLASH里面。

好了,现在我们点击指针经过那一帧,然后打开属性面板,

 

 

如图,在声音选项里,我们选择刚才导入到声音,下面的“效果”一般是在编辑较长的声音文件时使用的,比如背景音乐,它可以让声音文件淡入和淡出,较少用到。同步选项里的“事件”声音的含义是,这个声音文件不受时间轴的约束,只要开始播放,除非关闭FLASH,否则就一直播放完毕为止。按钮上的声音一定要用事件声音,另外,FLASH里面的声音只能添加到帧上,其它地方你想添加也添加不了。点开“同步”选项,会看到还有一种“数据流”格式声音,这种声音正好跟“事件”相反,它受时间轴的约束,如果这个声音需要100帧播放完成,如果舞台上没有足够的帧,它将只播放到时间轴的结束位置就会停止。这个以后需要添加其它声音的时候,需要根据实际情况来选择用哪种,这里理解就可以了。

到这里,第一个按钮我们就做好了,下面的导航按钮制作过程和这个一样,这里就不再重复,大家下去之后一个一个的做出来,相信全部做完后,按钮的制作方法和原理就会烂熟于心了。

【第四步】:只有这些按钮效果,感觉过于单调,我们再来为按钮再添加一些特殊效果,使它更加炫目一些。现在我们回到主场景里去。点击“时间轴”上面的“场景1”,这样就回到主场景里去了。

现在我们把现有的两个图层锁定,然后新建一个图层,命名为:导航效果,将“导航效果”层拖动放到“导航”层下面,这样做的目的是将文字层始终显示在最上方,在FLASH里面,每向上一个图层图层,那么下面和它重叠的图层就会被覆盖。好了,在这一层上我们画出一个矩形出来,具体大小看下图:

 

这个矩形从“第一章”按钮的上线到下面的分割线为止,不需要很精确,大家可以自己看着绘制,绘制的时候最好把场景放大,这样能尽量精确一些,放大场景的快捷键是按住ctrl的同时,按下键盘上的“+”键,缩小是按“-”键。好了,绘制出来后,我们为它添加渐变色,就用紫色吧,渐变滑块左边的颜色值是:#442463,透明度79%,右边的颜色值:#9A8AAA,透明度18%,当然,这里我说的颜色值和透明度都是参考值,你也可以自己调色。

好了,用“填充变形工具”把颜色调整到上面的样子就可以了。做到这里你可能会问,为何边上多余出来好多,这里先卖个关子,做下去你就知道了。

【第五步】:下面我们要学习FLASH的形状渐变动画了,请集中精神,仔细看。选中矩形,F8将它转换成影片剪辑,双击矩形,进入到影片剪辑的编辑界面,我们在第八帧处点击右键插入关键帧。

 

然后再点击图层1的第一帧,打开“属性”面板,如图:

 

补间选项选择“形状”,这时,在图层1的第一帧和八帧之间就已经产生形状渐变动画了。“形状动画”,顾名思义就是从一个形状变换成另外一个形状的动画效果。比如你在图层1第一帧画一个圆,第十帧画一个正方形,然后创建形状动画,那么从时间轴上的第二帧开始,就是一帧帧的动画,动画内容就是一个圆慢慢的变成正方形。“形状动画”只能应用到可编辑的矢量图形上,另外一种补间是“动画”,只有将图形转换成元件后才能使用,这个以后再说。

另外,当选择“动画”或“形状”里的任意一项后,在“补间”选项的下面会有“缓动”设置,这里将缓动调为10。“缓动”只有正值和负值,极限大小分别为100和-100,当缓动值为0时,动画是匀速运动,当缓动值为100,动画效果是由快到慢,当缓动值为-100,动画效果是由慢到快。当做一些模拟物体运动的时候,经常会用到它,比如做皮球的弹跳效果等。我在制作课件的时候,几乎所有的动画效果都要用到“缓动”,这样会使动画效果富有张力。至于“补间”的含义,大家可以理解成填补中间的空白的意思。

好了,现在我们来修改第一帧的形状,点击时间轴上的第一个关键帧,然后选中矩形,打开属性面板,将矩形的高度修改成1,好了,现在回到时间轴上,点击第一帧,按下回车键,预览一下效果看看吧。

 

 【第六步】:因为我们制作的效果是当鼠标指针移动到按钮上的时候,导航背景MC播放出来,而移出后,它在反向播放直至消失。昨天我们只制作出来了指针移过来时的效果,现在我们来制作移出时的效果。

大家应该看到了,导航背景MC在舞台上只显示出来一条横向的线段,这是因为MC在舞台上只显示第一帧的原因,我们现在双击这个MC,进入到它的编辑界面。然后右键点击第一帧,选择“复制帧”,如图:

 

然后在时间轴的第十六帧处,右键点击,选择“粘贴帧”,这样第十六帧处的矩形就和第一帧处的一模一样而且处在同样的位置,好了,在第八帧和第十六帧中间任意点击以下,打开属性面板,补间里选择“形状”,缓动仍然是100。

因为我们想要的效果是当鼠标移到按钮上,它才显示,移出后,它会渐渐消失,所以第一帧必须是空白关键帧。我们在第十六帧处按住鼠标不放并向前拖动,直到把所有的帧全部选中,然后鼠标点击黑色部分,向后移动一帧,这时,在第一帧处会自动插入一个空白关键帧,如图:

 

到这里,影片剪辑就制作完成了,或许有朋友会问,既然鼠标移出按钮后会消失,为什么最后一帧不插入空白关键帧呢?其实上面如果你仔细看的话,就会了解到MC的特性来,它是一只不停的循环播放,在第一帧处,我们让它停止,当鼠标移动到按钮上时,我们让他播放到第八帧停止,当鼠标移出时,我们让它继续播放,直到第一帧处,因为这里添加到有停止播放的代码,所以它会再停止到这里,这就是一个循环。

【第七步】:现在开始添加控制代码,点击第一帧,打开“动作”面板,输入“ stop();”,或是点击左边的“全局函数——时间轴控制——stop”,如图:

 

这个代码的意思就是,当时间轴播放到这一帧的时候,让它停止下来不在播放。如果有点英文基础,代码的含义很容易理解,但是格式千万不能错,否则在导出影片的时候会提示脚本错误。

好了,再点击时间轴上的第八帧,同样为它添加一个stop();的代码。到这里,这个影片剪辑就完全制作好了,我们回到场景里去。

【第八步】:现在,你在场景里已经看不到这个影片剪辑了,但是,在这个MC所在位置的左上角,会显示出一个黑框白底的圆,看下图:

我们可以通过点击它来选中这个MC,同时也可以双击这个圆进入到影片剪辑里。现在我们需要把它再复制出来八份,分别放在每个导航按钮的左上方,但是,我们看不到它的最终效果,不太容易确定放的位置。这确实是个很头疼的问题,最起码它让我最初的时候头疼了一段时间,但是,后来还是想到了解决的办法,我们可以先把这个MC转换成图形元件,然后固定显示某一帧的内容。嘿嘿,这是个很实用的小技巧,千万要熟练运用。否则会增加你的制作难度。

好了,现在我们点击这个圆,然后打开属性面板,看下图:

 

在A处选择“图形”,因为我们的MC是在第八帧完整显示出来的,所以B处改为“8”,好了,回车确定,再看看舞台上的MC,是不是就全部显示出来了。

【第九步】:按住alt和shift键不放,鼠标拖动复制出来八份,有人又要问了,为什么还要按住shift键?当然,你也可以不按,按住它是为了让复制出来的MC左右和被复制到对齐。复制完成后就是下面这个样子。

 

或许有些细心的朋友看出来了,复制出来的MC下面离分割线还有一段距离,这个没关系,我们可以用变形工具把拉伸其中的一个,拉伸到分割线的上方为止,然后打开属性面板,看它的高度是多少,复制下来,然后把其它复制出来的MC的高度都修改成这个值就可以了。

好了,现在影片剪辑复制修改完了,我们就不需要再看到它了,把所有的MC框选,然后打开属性面板,还把它们改成“影片剪辑”。在FLASH里面,很多元件的属性是可以批量修改的,只要全部选中,打开属性面板就可以修改了,这样也省掉了我们相当大的一部分工作量。

【第十步】:现在,我们得给这九个MC分别起个名字,还举导演的例子,如果你要让某位演员上台演出,你总得叫他把,你总不能叫“喂,那个谁,你上台演某某某。”在FLASH里面同样,MC就像演员,想控制它,得首先给它命名。我们选中第一个MC,打开“属性”,

面板,看下图:

 

红线框选的部分就是给MC起名的地方,这里我给它起了个“yi_mc”的实例名称,很多初学FLASH的朋友会把实例名称和库里面的元件名称搞混,这里做下说明,库里面的元件名称是为了方便你查找而随便起的,实例名称才是控制MC的关键,实例名称的起名规则是不能有中文,不能和flash的as代码冲突。

好了,下面分别为剩下的八个MC起实例名称,我这里就是“er_mc”、“san_mc”.....“jiu_mc”了。

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

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

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

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