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

flash课件模板制作系列教程之界面绘制

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

从这一章开始,我们就要着手做FLASH课件了,是不是很紧张?别紧张,刚开始肯定会有点难度,当有了一定的基础后就会轻松多了。好了,闲话少叙,下面准备好工具进入开始制作。你只需要一步步跟着我做就行了,在制作的过程中尽量的去消化吸收学到的知识。

我所做的这个课件范例,所有元件完全依靠自己动手来制作,或许很多人嫌这样麻烦,但是这是个很好的筑基过程,只有在这样繁复的操作中,你才能熟悉flash的各项功能,这对你以后制作课件将有莫大的好处。如果你没有耐心跟我做下去,现在就可以退出了。

首先,请打开flash8,没有的去网上下一个,并找个序列号注册一下就可以永久使用了。现在flash都升级到flash cs5了,但是我一直还是用flash8,其实它们基本的操作还都是差不多的,只不过越升级功能越强大而已,但是那些功能对于我们制作课件来说,帮助不是很大,所以我一直没有更换。软件打开后,会自动新建一个文档,如果没有新建,请点击菜单栏的“文件”—“新建”命令,新建一个flash文档。我们就在这里面操作了。相信通过前面一章的介绍,你应该与flash8混个脸熟了。首先,先给大家看一下界面绘制好后得效果图,下面看到的是自动缩放尺寸的图,图片质量看起来很差劲,大家可以对图片点击右键另存为,在打开看就是原始大小了:

 

 

界面的右上角那个圆角矩形是用来放置时钟用的,先空着,最后再做,界面得由下角是关闭按钮,右侧栏是航按钮区,左边为课件内容区,今后大家在做课件之前,心里一定要想好它大致的样子,这样才不会因为后来要反复修改而浪费精力。

【第一步】:{http://www.flashkj.com}修改场景到你需要的大小。在舞台上随意点击,然后打开“属性”面板,你会看到舞台的属性,如图:

  

这里就是场景的属性来,默认的场景大小是550×400像素,一般来说我们做课件不能用这么小,我做的一般都是800×600像素大小,这样在普遍的1024×768分辨率下的显示器显示效果比较好,这里我只是演示,大小就定为656×503像素好了,这个在做课件之前最好修改好,否则课件做好了再修改会非常麻烦。好了,点击“大小”后面的按钮,我们将宽度修改成656,高度修改为503,点击确定,就可以看到场景的大小已经改变了。

大小后面的背景是指场景的背景颜色,一般我不做修改,因为课件的界面会将它完全覆盖。帧频这里默认的是12,我们修改成24。

【第二步】:双击时间轴上的“图层1”,我们给它改个名字,就叫“界面”好了,这一层,将只放我们所绘制出来的界面。

现在点击工具栏里的“矩形工具”,把线条取消掉,如图:

  

     当我们在绘制图形是,如果只需要线条或是只需要填充的话,就把不需要的取消掉,这样绘制出来就直接是你想要的了。当然,你也可以等绘制出来后,双击线条把它删除,效果是一样的。只是个人的习惯而已。

我们在场景上随意画处一个矩形,不用太拘束,随意画,没关系。画好后,单击矩形,选中它,然后打开“属性”面板,如图:

  

这里可以看到矩形的属性,我们将矩形的宽度和高度改为和场景一样大小,分别是656、503,后面的x、y指的是矩形在场景里的坐标,把它俩都改为0,这样,矩形就把整个舞台完全覆盖了,一丝多余都没有,知道我上面为什么让你随便画了吧?就算你的眼在毒,也不可能把矩形和舞台对的这么整齐。

先别急着把属性面板关闭的,点击右边的黑色方框,我没给举行换个我们需要得颜色,这里以后就靠你自己得感觉了,现在跟着我做,把颜色值改为:#9CA1A5,回车就好了。

【第三步】:在时间轴上新建一个图层2,同时把刚才那个图层锁定掉,不要问我为什么这样做,这个问题在前面我已经简单介绍了,如果没注意希望在界面绘制好后自己想明白,这比我说得要有效得多。在这个图层我们再绘制一个长方形,长度656像素,高度32像素,然后打开混色器面板,我们来给它调整渐变色。混色器的颜色设置看下图:

 

 类型里选择“线性”,下面会多出一个渐变条,带左右两个滑块,我们要得效果是一个白色长方形,上下为透明,中间为白色这样一个效果,我们把两个滑块的颜色都修改成白色,(双击滑块就可以修改),之后在渐变条的中间点击一下,增加一个滑块,然后把左右两个滑块的透明度(alpha)改为0,好了,下面我们点击工具栏里的“填充变形工具”,看下图:

 

 

这是个非常实用而且以后要经常用到的功能,请大家一定要看清楚它是怎么用的,如图所标,A处有个圆点,鼠标移上去之后会变成四个箭头组成的圆,这时候我们按住它不放并拖动可以调整渐变的角度,B处是调整渐变的大小,它只能横向或纵向来拖动,C处是渐变的中心点,通过移动中心点可以只显示渐变的某一部分,大家可以分别试着去拖动他们看看会达到什么样的效果。这里先拖动A,向左下方拖动,把渐变调整为垂直,然后拖动B,把渐变的范围缩小到和矩形一样的大小,在拖动任意一个节点的时候,你会看到两条蓝色的线在随着你的拖动而运动,这可以说是渐变的辅助线,他们分别是渐变的起点和终点。

这样我们要得效果就出来了。看下图:

      

现在我们要把它放在相应得位置,选中它打开“对齐”面板,点击右侧的“相对于舞台”下面得那个小图像,它得作用就是把所选得元件和场景对齐。然后分别点击左对齐(右对齐、居中对齐效果也一样,当然,这只是在选中“相对于舞台”时来说的。)、上对齐,然后按键盘上的方向键把它向下移动4个像素。方向键每按一下是移动一个像素。 

    【第四步】:下面我们来做课件内容显示部分,打开昨天你保存的那个文件,把上面得两个图层锁定,再新建一个图层,画出个矩形,宽度507,高度407,颜色值#5F708A,画好后按下ctrl+g把图形组合,这样是为了在它后面再画矩形的时候不至于把他们重叠的部分删除。

说到这里,有必要详细向大家介绍一下“组合”和“打散”这两个概念,当我们在场景里随意画出两个图形然后把他们得一部分重叠起来时,没有被移动得那个图形和我们移动得那个图形重叠得部分将被删除掉。在不需要把它转换成元件之前,我们就要先把它组合一下。组合这个概念你可以理解成为把一个或多个形状或元件组合成一个整体。它和我们以后要讲到得“打散”命令是相反的,“打散”就是把图片、组、元件打回原形。比如我们把几个图形组合了,但是有些时候我们需要再次把它拆开,这时就要用到“打散”命令。同时,导入得图片当你需要删除一部分得时候,也需要“打散”后用选择工具框选不需要得部分来删除。理解了吗?不理解就跟着我做,在制作过程中慢慢体会就行了。

好了,我们现在继续画矩形,再画出一个,或是直接按住“alt”键,鼠标点击刚才画得那个矩形不放,当鼠标旁边出现一个“+”的图标,就可以拖动鼠标复制一份,这是个很有用得功能,可以这样无限复制,能省不少力气。好了,现在把这个矩形宽分别改成507407,颜色值改为:#1A50B8,最后组合。

继续绘制矩形,长款分别为497399,颜色为白色,组合。下面再把填充颜色去掉画一个矩形方框,线条粗细为1,长和宽分别为487391。组合。好了,现在需要的东西绘制完了,把刚才绘制好的三个矩形和那个黑色矩形框全部选中,打开“对齐”面板,如果“相对于舞台”这个按钮处在选中的状态,那么就点击一下,不要选中它,然后点击“水平居中对齐”和“垂直居中对齐”,这样,课件内容显示区到这里就基本做好了,最终的效果应该是这样,看图:

如果你发现上面四个组合矩形的上下顺序不一样,比如白色的矩形在下面,这样可以对着白色矩形点右键—排列—移至顶层,其它的“移至底层”、“下移一层”和“下移一层”这几个命令我就不多做解释了,相信很容易理解。

还差最后一步,把刚才所画的三个矩形和一个矩形边框全选,然后按下键盘上的“F8”键,将他们转换成一个影片剪辑,点击后会弹出下面这个对话框:

    

这里的名称可以随意写,或者不写,不过建议你起个容易记忆的名字,类型上一定要选择“影片剪辑”,因为下面我们要给它添加滤镜效果,注册那一项是选择影片剪辑的中心点对齐方式,可以忽略不计。点击确定。

现在选中这个影片剪辑,打开“属性—滤镜”面板,给它添加一个阴影效果,详细设置如下图:

 

点击“滤镜”下面的“+”号,会显示出FLASH8的所有滤镜,我们选择“投影”,其它的设置照图来做,当然,今后在制作课件时,大家要对这些功能灵活运用。这样设置的目的是为了让课件内容显示区的左边显示发光效果。

【第五步】:制作时钟显示区按钮。

把上面所做的图层全部锁定,然后新建一个图层,然后点击“矩形工具”,然后在工具栏的下面会看到矩形工具的选项,看下图:

 

点击上面圈选的那个按钮,它是用来设置将要画出的矩形的四个角的圆润程度,这里把边角半径设为10点,点击确定。

在场景里画出一个矩形,不要边框,宽和高分别为:11121。选中它,打开混色器面板,具体设置看下图:

 

设置好后将这个矩形复制一份出来,然后将之前的那个组合,选中复制过的那个,打开混色器面板,仍然是线性渐变,把两个滑块的颜色全改为白色,右边为透明,之后用“填充变形工具”把矩形的渐变调整为垂直渐变,并将上下两条线和矩形的上下边对齐。前面讲过了,这里不多做介绍。做好后,选择“任意变形工具”,把矩形缩小,组合。最后效果看下图:

 

 

【第六步】:这一步我们将把界面剩余的部分绘制完成,先来制作导航区的背景,最终那个效果可以参看上面得界面效果图。

选择矩形工具,把矩形得圆角设置成10点,在导航区画出一个矩形,参考大小,宽136,高434,然后打开混色器面板,选择线性渐变,右边得滑块颜色值为#5E5E5E,左边得滑块颜色值为#C1C1C1,并将右边得滑块透明度修改为0%,点击“填充变形工具”,把渐变修改成垂直的,组合。

同样的做法,在这个矩形上面再画出一个稍微小一点得圆角矩形,线性渐变,滑块颜色均为白色,右边透明度48%,左边透明度0%,组合,覆盖到之前得矩形上面。

最后绘制一个灰色得圆角矩形框,仍然是线性渐变,滑块颜色一致,同样,左边透明度100%,右边透明度0%。绘制好后,选中它,CTRL+C复制一个,然后CTRL+SHIFT+V 把刚才复制得边框黏贴到同样得位置,这个功能很实用,它可以把刚才复制出来得对象和被复制得对象完全重叠,这就是黏贴到相同位置得概念。下面,我们选中它,把线条得渐变修改成从白色到透明,然后按键盘上方向键,让它分别向右和向下移动一个像素,这样,是不是就感觉整个矩形框像刻到背景上的?好了,现在把两个矩形框选中,组合一下。然后再把之前得两个矩形和这个组合后得矩形框选中,打开对齐面板,选择“水平居中对齐”,至于上下的位置,就自己看着放吧。

至于导航部分中间得雕刻分割线,做法就更简单了,分割线得多少根据你的课件导航内容得多少来定,相信你能独立完成,赶快试一下吧。

这个我就不再截图上来了,如果之前得内容你全部学会了,那么做这个很简单,做完后你可以和第二章第一节开始部分我贴得界面最终效果图对照一下,如果有哪些地方不太一样,就自己找找毛病在哪儿。

【第七步】:接着,我们再绘制一个矩形,把圆角取消掉,用来做课件最下方的那个渐变效果。

矩形的宽度和舞台的宽度一样,如果你想不起来了,就打开舞台得属性看一下,高度就是从内容显示区得最下面开始,到场景得最下方结束,这个自己可以看着画,即使少一点也没关系。然后打开属性面板,把矩形得X坐标改为0Y坐标要计算以下,我们先看看矩形的高度,我这里是64.7像素,而我们的舞台大小事503像素,这样Y坐标就应该是503减去64.7,然后打开混色器,线性渐变,两个滑块得颜色均为白色,左边的透明度为0%,最终效果如图:

 

【第八步】:绘制课件得关闭按钮。

我们得课件界面基本上是以灰色为主,这样不免有些单调,这里就把按钮改下颜色,点缀一下。首先,把之前得图层全部锁定,然后新建一个图层,在这一层里,我们点击“圆形工具”,然后按住shift键不放,画出一个正圆形,同样,如果你想画出正方形,也可以按住这个键,另外,在画直线得时候,按住它可以画出水平、垂直或是倾斜45度的直线,所以说这个辅助键很常用,今天得学习结束后,大家可以尝试着都去画一下。

画好后,如果有边框,请双击边框选中后,按下键盘上得“delete”键,把它删除,在FLASH里面,想删除任何东西,都可以选中后按下这个键。

然后打开混色器面板,选择“放射状”渐变,详细设置看下图:

然后我们来调整它的渐变位置,详细的介绍前面已经提到,最终效果看下图:

 

好了,下面我们把这个圆形组合,接着绘制高光,先绘制一个椭圆出来,形状大小随意,反正最后还要修改,然后打开混色器面板,选择“放射状渐变”,方法大致和上面得一样,只不过颜色都是白色,然后再修改渐变位置,大道你得满意位置,详细过程就不写了,相信上面得圆能绘制出来的话,这个就没问题。

好了,组合后,缩放、旋转这个椭圆,将它放在紫色圆球得左上方,然后选择“文本工具”,在按钮上添加“关闭”两个文字,最后,全选,F8转换成按钮元件,放着备用。

还差最后一道工序,选中按钮,打开“滤镜”面板,我们给它添加一个发光效果。

到这里,界面绘制就告一段落了,最终效果请对照本章开头的效果图,不知道你做得怎么样?如果还不太满意,那就用你所学的知识继续修改,直到你满意为止。

等等,还有最后一道工序差点忘了,我们为了绘制这个界面,在时间轴上新建了好几个图层,在实际得课件制作中,我们得界面背景只需要占一个图层就好了,尽量得减少时间轴上得图层数,方便我们以后得修改,这时,我们就需要把所有得图形都转移到一个图层上去。现在把所有图层解锁,从倒数第二层开始,点击图层上得关键帧,这样这个图层上得所有元件都会被选中,然后我们ctrl+x把这一帧得内容剪切掉,然后选中最后一层的关键帧,ctrl+shift+v 黏贴到当前位置,反复操作,直到时间轴上除了最后一个图层上得帧是关键帧,其余图层全部是空白关键帧为止,好了,现在用垃圾桶把上面无用得图层全部删除,这样就干净许多了吧?

总结:在这一章里,我们学习了FLASH的基本图形绘制方法以及如何调色等最基础得知识,知识点很零碎,但都是非常常用得工具和命令,大家务必全部掌握,尽量得多做几遍,把每个工具,每个命令得用途全摸清了,就可以开始下面得学习了。

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

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

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

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