· 用户注册 · 设为首页 · 加入收藏 · 联系站长 · · ·
 | 网站首页 | 文章中心 | 图片中心 | 影音在线 | 下载中心 | 许愿祝福 | 我要投稿 | 
您现在的位置: 生物小吧 >> 文章中心 >> 网站建设 >> 正文 今天是:
第16课 元件、实例、公用库
作者:佚名    文章来源:不详    点击数:836    更新时间:2010/6/3
         【字体:

第16课 元件、实例、公用库
 
  元件和实例在flash中的应用是非常广泛的,它们的重要性也是不言而喻的。在前面的课程中,我们已经和它们进行了很多次的亲密接触。在本讲中,我们将综合所学过的知识进行更深入的讨论,介绍元件一些应用技巧,并延伸出公用库建立和使用的方法,希望能通过本课抛砖引玉,群策群力,建立起闪客启航自己的公用元件和效果库,方便大家制作更多更好的flash作品。

学习目的

 u       元素、元件、实例的概念
    
u      实例面板的应用技巧
   
u       公用库的建立和使用
            u       库元件的复制和修改

课前热身

实例——春夏秋冬


  
《春夏秋冬》是作者专为本课设计的实例,在这个实例中,我们在欣赏春的妩媚、夏的浓绿、秋的热烈、冬的纯净的同时,还可以看到当前的日期及打字效果。如果是一个初入门的朋友,看到这么多的效果都是用动作脚本语句完成的,会不咬指畏难?呵呵,别担心,不难的,您什么指令都不懂,也能很轻松地做出这个实例。我们先来欣赏俺辛苦了几天做出来的这个实例。

 

16-1 春夏秋冬

   在开始制作这个实例前,我们先学习有关创建公用库的方法。在Flash的安装文件目录下,有一个叫“Libraries”的文件夹,它的位置如下:
    7.01版本:X:\flash mx 2004\zh_cn\First Run\Libraries
    7.02版本:X:\flash mx 2004\zh_cn\Configuration\Libraries
    Libraries是Flash的公用库(X是安装盘符)。双击并打开它,可看到里面有三个名为“按钮.fla”、“类.fla”、“学习交互.fla”的源文件,如图16-2所示。

图16-2 公用库

    请把本课素材中的名为“闪客启航公用元件及效果库.fla”的源文件粘贴到这个文件夹中,创建我们自己的公用库,您也可以打开这个源文件,再执行【文件】|【另存为】命令,把它存到Libraries这个文件夹中

   制作步骤


 
步骤
1 创建新文档

   执行【文件】
|【新建】命令,在弹出的对话框中选择【常规】|Flash文档】选项后,单击【确定】按钮,新建一个影片文档,在【属性】面板上设置文件大小为550×400像素,【背景色】为蓝色(#0000FF),如图16-3所示。

16-3 文档属性 

  步骤2  创建“春夏秋冬”图形元件

    设置场景中的图层名字为“春夏秋冬”,在场景中写入两行静态文本,“闪客启航”、“使用闪客启航公用效果库制作”。“闪客启航”字体为隶书,字号为60,白色,粗体,“使用闪客启航公用效果库制作”字号为30,余参数同前者。图16-4为“闪客启航”文字属性面板。


16-4“闪客启航”文字属性面板

    同时选中这两行文字,执行【修改】|【转换为元件】命令 ,将其转换为名为“春夏秋冬”的图形元件。

步骤3 创建“春天”影片剪辑

   新建一层,名为“春天”。执行【文件】
|【导入】|【导入到库】命令,打开【导入到库】面板,找到本教程提供的素材文件,按住Ctrl键,选择“春天的图片”、“夏天的图片”、“秋天的图片”、“冬天的图片”四张图片,批量导入到库中。从库中把名为“春天的图片”拖到主场景中,设置X、Y轴位置为0,0。在图片上单击右键,在弹出窗口中选择【转换为元件】选项,转换为名为“春天”的影片剪辑。图16-5是创建好的影片剪辑。

16-5 创建春天影片剪辑

双击场景中的春天影片剪辑,进入元件编辑界面,将图层命名为“春天图片”并将此层加锁,然后新建一层,命名为“蝴蝶飞舞”,在第一帧执行【窗口】|【其它面板】|【公用库】|【闪客启航公用元件及效果库】命令,打开我们刚才创建的自己的公用库,如图16-6所示。

图16-6 打开闪客启航公用元件和效果库

在这个库中,我已预先设置了“动作脚本文件夹”、“简单效果文件夹”、“元素文件夹”,在这三个文件夹中,又分别预置了几个不同效果的文件夹或图形元素,如图16-7所示。

图16-7 闪客启航公用元件和效果库面板

单击蝴蝶飞舞效果文件夹,将其拖到“春天”影片剪辑的“蝴蝶飞舞”图层的第一帧(此时场景中出现了四个蝴蝶元件),选取这一帧,将其内容全部删除,执行【窗口】|【库】命令打开库面板,您会发现,启航公用库中那个名叫“蝴蝶飞舞效果文件夹”的文件夹已全部复制到“春夏秋冬”这个实例的库中了,双击打开这个文件夹,看到如图16-8所示的五个元件。

图16-8 蝴蝶飞舞文件夹

选择名为“拖入场景,蝴蝶鼠标跟随效果”的mc,拖到“蝴蝶飞舞”图层的第一帧,这样做的好处是为了确保和这个效果有关的所有元件能全部复制到新文件中来,同时又省却了整理库文件夹的时间,保持了库文件的整洁。
    新建第三层,名为文字层。在场景的下方正中写入静态文本“等闲识得东风面,万紫千红总是春”并把其转换为名为“春天的文字”的mc。如图16-9所示。

图16-9 春天的文字属性面板

双击刚建好的文字mc进行编辑,在这个mc中共有四层,新建一层,拖到文字的下面,在这一层中画一个无边矩形做文字的衬色(衬色的作用是使文字更清楚),大小如图16-10所示,再新建一层做遮罩层,要求遮住这二层,在被遮罩的两层的第10帧加关键帧,第40帧加普通帧,清空第1帧中的内容。

图16-10  春天的文字的时间帧面板和第10帧时场景中的情况

在遮罩层的第10帧中画一个无边园形,大小为20*20,放在文字的中间,单击右键转换为图形元件,在转换时注意设置注册点在元件的中间,如图16-11所示。

图16-11 转换为元件时设置注册点在元件的中心

在遮罩层的第40帧加关键帧,用变形工具使“文字遮罩元件”变形,遮住全部文字和下面的衬色,如图16-12所示。

图16-12  第40帧遮罩层的元件遮住文字和衬色

在遮罩层的第10帧创建补间动作动画。新建图层,在第40帧加关键帧,添加动作脚本语句:stop();

试着播放一下,看看是不是春光明媚,有一群美丽的蝴蝶跟随鼠标的移动在翩翩起舞?OK!我们继续。在这个实例中,春、夏、秋、冬的制作方法都是一样的,所不同的只是拖入的图片、效果不同。为了后面的制作更省劲,我们再来学习一个新的知识点--库中元件的复制和修改。
    在库面板中的“春天的文字”MC上单击右键,在弹出菜单中选择【重制】,如图16-13所示。

图16-13 重制库元件

     在弹出的窗口中修改要复制出的元件的名字为“夏天的文字”,行为选择影片剪辑,单击确定,如图16-14所示。

图16-14  复制元件面板

继续上面的操作,复制出“秋天的文字”、“冬天的文字”两个影片剪辑。用这种方法复制出来的元件是独立的,修改任意一个元件时,其余的元件不受任何影响。

步骤4  创建“夏天”影片剪辑

回到主场景新建一层,命名为“夏天”,从库中把名为“夏天的图片”的位图拖到主场景中,在属性面板上设置X、Y轴位置为0、0,单击图片将其转换为名为“夏天”的影片剪辑。
    双击“夏天”影片剪辑,进入其编辑界面,新建一层,选择【窗口】|【其它面板】|【公用库】|【闪客启航公用元件及效果库】|【动作脚本文件夹】|【下雨效果文件夹】,把其完整地拖入场景中再删除,在本实例的库面板中打开“下雨效果文件夹”,把里面的“拖入场景,下雨效果”拖入到场景的上方,X轴-15、Y轴-165,如图16-15所示。

图 16-15 雨滴在场景中的位置

新建文字层,把库中“夏天的文字”的影片剪辑拖到场景的下方,由于此影片剪辑的第一帧为空白帧,因此在场景中只是一个小白点,那么,如何为它定位呢?换言之,也就是说怎么样能正好把它设置在场景的下方的中间呢?我们利用属性面板来玩一个“瞒天过海”的小花招,呵呵。
    点击这个小白点,在属性面板上修改影片剪辑为图形,在右边的第1帧中填写数字40,回车,如图16-16所示。

图16-16 在属性面板上将影片剪辑改成图形

    哈,现在是不是所有的文字都显示出来了?在这里,我们巧妙地利用了影片剪辑和图形的属性面板的不同特点来达到我们的目地,现在再设置文字在场景中的位置变的轻而易举了。双击夏天的文字的影片剪辑进入编辑界面,我们看到里面的四层上的元件和补间动画、遮罩都已经做好了,我们只要在文字层的第10帧,修改文字为“水光潋滟晴方好,山色空蒙雨亦奇”就行了。
    修改好了以后,千万别忘了再回到“夏天”影片剪辑的界面中,在属性面板中把“夏天的文字”再从图形改成影片剪辑。

步骤5 分别创建“秋天”和“冬天”影片剪辑

这两个影片剪辑的创建方法和秋天的影片剪辑的方法基本是一样的,不同之处在于以下几点:
    拖入启航公用效果库文件:秋天拖入的是落叶效果文件夹(拖入后须把树叶改成红色),冬天拖入的是下雪效果文件夹。
    诗句:秋天是“山明水净夜来霜,数树深红出浅黄”,冬天是“谁将平地万堆雪,剪刻作此连天花”。
    衬色:秋天是红色衬底(#990),冬天是蓝色衬底(#0000FF)。
    这部分操作将视讲课时间是否充裕再决定是否请大家当堂制作,如果讲课时间紧张,这部份将略去,做为课后练习留给大家。

步骤6  创建“鸣谢”图形元件   

     回到主场景,创建新图层,命名为“鸣谢”,在场景的上方写入静态文本“鸣谢”二个字,字体隶书,字号60,白色,单击右键,将其转为图形元件,双击这个图形元件进入编辑界面,新建一层,选择【窗口】|【其它面板】|【公用库】|【闪客启航公用元件及效果库】|【动作脚本文件夹】|【有声音打字效果文件夹】,把其完整地拖入场景中再删除,在库中双击打开刚拖入的【有声音打字效果文件夹】,把里面的【拖入场景,打字效果】拖入新建图层中,这个效果中主要是一个动态文本,您可以在属性面板中设置动态文本字体的颜色、大小、字体类型等,双击动态文本,打开动态文本影片剪辑编辑界面,选择图层1的第一帧,执行【窗口】|【开发面板】|【动作】命令,打开动作面板,把第一行语句中的“欢迎您把自己的作品做成mc加入闪客启航公用元件及效果库”文字改成“本实例中的效果代码取自大成、学习来了、沪上老康、星月、文清等老师的源文件。欢迎更多的朋友把自己的作品做成效果,充实闪客启航公用效果库。”,如图16-17 所示。

图16-17  修改打字效果语句

    步骤7  设置春夏秋冬出现的顺序

    做到现在,主要的元件都做出来了,我们回到主场景,来安排一下它们的出场顺序,节日单是这样排的:春夏秋冬-->春-->夏-->秋-->冬-->鸣谢,图16-18所示的是全部完成后的时间轴面板。

图16-18  全部完成后的时间轴面板

    这些元件在主场景中都是依照淡入-->显示-->淡出的模式完成出场和退场的,所以,我们只要在主场景中设置他们出入场景的位置、Alpha值的变化并创建补间动作动画的位置就行了。您也完全可以不按我设置的位置进行变化,只要您感觉效果好就行,(其实俺本来就是瞎设置的,^_^)。

     单击时间轴面板左侧的,关闭所有图层的眼睛,设置到哪一层时再打开这一层的眼睛。

元件名称
加关键帧的位置
设置Alpha值为零的位置
创建补间动画的位置
春夏秋冬
10、47、57
1、57
1、47
春天
55、65、127、137
55、137
55、127
夏天
134、144、269、279
134、279
134、269
秋天
276、286、399、409
276、409
276、399
冬天
406、416、531、541
406、541
406、531
鸣谢
537、547
537
537

    设置好了以后,切记把春天、夏天、秋天、冬天、鸣谢五个元件在主场景中的第一帧清空为空白关键帧,要不然,您就看不到下面的春夏秋冬的开场白了。

    步骤八  创建动作脚本语句控制

    这一层很简单,我们新建一层,在最后一帧加关键帧,写入动作脚本语句:stop();就行了。

    步骤九  创建按钮层

    截止目前为止,在我们提供的“闪客启航公用元件及效果库”中,我们只使用了几个含有动作脚本语句的效果,还有一些效果我们没有用过,这些效果的使用更为简单,我们来试着做一个返回按钮。
    在主场景中新建按钮层,在最后一帧加关键帧,打开【闪客启航公用元件及效果库】|【元素文件夹】|【3D图形】,把名为Arrow2的元件拖到这一帧,如图16-19所示。

图16-19  按钮

    选中这个按钮,执行【修改】|【变形】|【水平翻转】命令,再执行三遍【修改】|【分离】命令,将其打散,用颜料筒工具改变颜色,用变形工具修改大小,单击右键转换为按钮元件,在动作脚本面板中写入语句:

on (release) {
gotoAndPlay(1);
}

    修改好后的按钮的位置、大小、颜色及动作脚本面板如图16-20所示。

 

图16-20 返回按钮

    步骤十  创建日期

    这一步留做课后作业,请大家根据我们上面所学到的知识自行完成。

    步骤十一  测试存盘

       课堂讲解

    一、元素 元件 实例的概念

    元素:构成Flash动画的所有最基本的因素,包括形状、元件、实例、声音、位图、视频、组合等等。
    元件:必须在Flash中才能创建或转换生成,有四种形式,即图形、按钮、影片剪辑、位图,元件只需创建一次,然后即可在整个文档或其他文档中重复使用。。
    实例:放置在场景中或嵌套在另一个元件内的元件副本,如图形、按钮、影片剪辑、位图等均为实例。

    二、 元件特点研究

    请大家打开素材下载中提供的“元件特点研究.fla”源文件,我们边做边讨论,在实践中加深印象和理解。
    位图:功能较少,只能进行位图之间的交换。
    图形:可在图形、按钮、影片剪辑之间进行交换,其时间轴的运行依靠主场景中的时间轴的支持并与属性面板上的运行方式有关(运行方式为单帧、循环、播放一次)。
    影片剪辑:其时间轴的运行不依靠主场景中时间轴的支持,但必须在主场景的时间轴上有入口。

    三、元件之间的角色转换

   利用上面所讲到的知识,我们可以在舞台上对实例进行角色转换。比如在编辑影片剪辑时,可以先把它转换为图形,循环运行;在不需要影片剪辑运动时,可转换为单帧图形等等;在元件交换时,转换后的元件继续被转换元件的某些参数。

    四、元件的管理

    元件的管理在库面板中进行。您可创建多个文件夹,把同类的元件放在一起,分门别类地进行管理,图16-21是库面板示意。

图16-21 库面板

    库功能中有一个很重要的公用库功能。在上面的实例中,我们基本没写什么语句却做出了一个运用了很多脚本语句的实例,这就是利用公用库的范例,希望通过本课能吸引大家的目光来关注公用库的功能,你做一个效果,我做一个效果,聚沙成塔,创建闪客启航自己的公用元件和效果库。

    当您把作品加入闪客启航公用元件和效果库中时,请注意以下几点:
    1、如果是图形元件等加入公用库,没有任何限制,只要求美观、实用。
    2、最好分类分的细一些,比如声音类,可分成人声、动物声、自然界的声音等,详细的分类有助于寻找运用,也利于加入公用库。
    3、加有动作脚本的效果类,请一个效果做成一个文件夹,里面包括应用这个效果时所需要的所有元素,如从库里链接的声音、图形等。动作脚本语句最好用相对路径,在应用时不再存在路径问题,如果有困难,请在效果文件夹中加一个说明文字,讲明在哪、怎么改路径,以方便对语句不太熟悉的朋友。
    4、无论有无动作语句,效果类的请把最终需要拖入场景中的元件统一命名为“拖入场景,……”。

课后练习

    1、做完本课的实例。
    2、试着收集和建立几个公用库元件和效果,并发表在此贴后面。

文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    生物小吧