您好!欢迎您光临组件视频歌曲卡的制作原理与方法_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>进阶教程>>>组件视频歌曲卡的制作原理与方法
组件视频歌曲卡的制作原理与方法
发表日期:2014/3/24 21:23:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 3356

组件视频歌曲卡的制作原理与方法

   

    教学目的:通过本节教学了解和熟悉组件及其组件检查器的设置,并运用此原理制作方便适用的视频歌曲卡。

  教学对象:本教材是针对有一定动画制作基础和对属性面板及工具箱、及其它面板有所了解的朋友们编制的,因此省略了一些步骤,还望谅解。

    教学要点:组件、组件检查器、按钮。

   

   

    作前准备

    1.准备8个flv规格的缓冲效果好的视频地址,放在指定的文本文档待用。

    2.准备8个mp3规格的缓冲效果好的歌曲地址,放在指定的文本文档待用。

    3..准备一张规格约为430*350的,作为背景作品的歌手图片,经过制图软件(ps、fw)处理后,放在指定的文件夹待用。

    制作过程

    1.启动FLASH8 软件。

    2.确立文档属性

    设置动画尺寸为630*450,帧频为12,背景颜色深绿,其它默认,点击确定,进入场景1。如图1所示:



图1

    3.创建图形元件

    导入或制作一个规格为630*450的边框,其形状,如图2所示:

图2

    4.创建按钮元件

    (1)选择“插入-新建元件”,建立一个名为“视频”的按钮元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第1帧(弹起),导入或绘制一个圆形按钮,规格48*48,全居中。如图3所示:

图3

在第2帧(指针经过)插入关键帧,将该帧上的实例变换一个颜色,再用文本工具在其右侧输入“视频”两个字,在第4帧(点击)插入帧。如图4所示:

图4

    (2)选择“插入-新建元件”,建立一个名为“歌曲”的按钮元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第1帧(弹起),导入或绘制一个圆形按钮,规格48*48,全居中。如图5所示:

图5

在第2帧(指针经过)插入关键帧,将该帧上的实例变换一个颜色,再用文本工具在其左侧输入“歌曲”两个字,在第4帧(点击)插入帧。如图4所示:


图6

    (3)选择“插入-新建元件”,建立一个名为“隐钮”的按钮元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第4帧(点击)插入空白关键帧,用矩形工具在舞台拖一个无边线的长条矩形,颜色随意。全居中。如图7所示:

图7
 

    5.创建影片剪辑元件

   (1)选择“插入-新建元件”,建立一个名为“flv”的影片剪辑元件,点击确定,进入元件编辑区。添加五个图层,共六个图层。自下而上命名为边框、视频、目录、按钮、游标、as

    A.选择边框图层第一帧,从库中拖出“边框”图形元件的舞台,全居中。在第8帧插入帧,上锁。如图8所示:

图8

    B.选择视频图层第一帧,点击“窗口-组件”,打开组件面板,双击Media-Player 6 - 7文件夹,打开该文件夹,用鼠标将MediaPlayback组件拖到舞台。如图9、10所示:

图9


图10

选中该实例,点击属性面板上的“参数”,再点击参数面板的“启动组件检查器”(或选择“窗口-组件检查器”),打开“组件检查器”面板,设置其参数选项,如图11、12所示:

图11


图12

将准备好的第1个flv规格的视频有效绝对地址粘贴到URL的地址栏中,关闭该界面。然后将舞台组件放大规格为450*420,将其放置在边框的左框之上。如图13所示:


图13

在第2帧插入关键帧,点击该帧上的组件-参数-启动组件检测器,打开“组件检查器”面板,将第2个flv规格的视频有效绝对地址粘贴到URL的地址栏中;在第3帧插入关键帧,点击该帧上的组件-参数-启动组件检测器,打开“组件检查器”面板,将第3个flv规格的视频有效绝对地址粘贴到URL的地址栏中;同理同种方法完成第4-8帧的操作。(第1-8帧共8个视频)。上锁。

    C.选择目录图层第一帧,用文本工具在边框的右框中输入向对应的8个视频名称。文字规格、字体、颜色自定,调整好位置。上锁。如图14所示:

图14

    D.选择按钮图层第一帧,从库中分别依次拖出8个隐形按钮元件到舞台,分别依次放置在视频名称之上,调整好规格位置。在第8帧插入帧,上锁。如图15所示:

图15

    给按钮添加指令语句

    由上到下按钮的语句分别是:

on (release) {
 gotoAndStop(1);

}

on (release) {
 gotoAndStop(2);

}

on (release) {
 gotoAndStop(3);

}

on (release) {
 gotoAndStop(4);

}

on (release) {
 gotoAndStop(5);

}

on (release) {
 gotoAndStop(6);

}

on (release) {
 gotoAndStop(7);

}

on (release) {
 gotoAndStop(8);

}

在第8帧插入帧,上锁。关闭本图层的眼睛。

    E.选择游标图层第一帧,用椭圆形工具在舞台拖一个规格为10*10的,无边线的红色小圆(也可是三角形等)。并将其移到第一个视频名称的后边。如图16所示:

图16

在第2帧插入关键帧,在将小圆移到第2个视频名称的后边;同理同种方法,完成第3-8帧上的小圆的操作。上锁。

    F.选择as图层第一帧,按f9,打开动作面板,在as编辑区输入在该帧上的,停止指令:stop(); 。在第8帧插入帧,上锁。

    删除边框图层,打开按钮图层的眼睛。

    G.本环节完成后的时间轴,如图17所示:

图17

   (2)选择“插入-新建元件”,建立一个名为“mp3”的影片剪辑元件,点击确定,进入元件编辑区。添加五个图层,共六个图层。自下而上命名为边框、歌曲、歌名、按钮、游标、as

    A.选择边框图层第一帧,从库中拖出“边框”图形元件的舞台,全居中。在第8帧插入帧,上锁。如图18所示:

图18

    B.选择歌曲图层第一帧,点击“窗口-组件”,打开组件面板,双击Media-Player 6 - 7文件夹,打开该文件夹,用鼠标将MediaPlayback组件拖到舞台。如图19、20所示:

图19


图20

选中该实例,点击属性面板上的“参数”,再点击参数面板的“启动组件检查器”(或选择“窗口-组件检查器”),打开“组件检查器”面板,设置其参数选项,如图21、22所示:

图21



图22

将准备好的第1个mp3规格的歌曲有效绝对地址粘贴到URL的地址栏中,关闭该界面。然后将舞台组件缩小规格为140*22,将其放置在边框的右框下方。如图23所示:


图23

在第2帧插入关键帧,点击该帧上的组件-参数-启动组件检测器,打开“组件检查器”面板,将第2个mp3规格的歌曲有效绝对地址粘贴到URL的地址栏中;在第3帧插入关键帧,点击该帧上的组件-参数-启动组件检测器,打开“组件检查器”面板,将第3个mp3规格的歌曲有效绝对地址粘贴到URL的地址栏中;同理同种方法完成第4-8帧的操作。(第1-8帧共8个歌曲)。上锁。

    C.选择歌名图层第一帧,用文本工具在边框的右框中输入向对应的8个歌曲名称。文字规格、字体、颜色自定,调整好位置。上锁。如图24所示:


图24

    D.选择按钮图层第一帧,从库中分别依次拖出8个隐形按钮元件到舞台,分别依次放置在歌曲名称之上,调整好规格位置。在第8帧插入帧,上锁。如图25所示:


图25

    给按钮添加指令语句

    由上到下按钮的语句分别是:

on (release) {
 gotoAndStop(1);

}

on (release) {
 gotoAndStop(2);

}

on (release) {
 gotoAndStop(3);

}

on (release) {
 gotoAndStop(4);

}

on (release) {
 gotoAndStop(5);

}

on (release) {
 gotoAndStop(6);

}

on (release) {
 gotoAndStop(7);

}

on (release) {
 gotoAndStop(8);

}

在第8帧插入帧,上锁。关闭本图层的眼睛。

    E.选择游标图层第一帧,用椭圆形规矩在舞台拖一个规格为10*10的,无边线的红色小圆(也可是三角形等)。并将其移到第一个歌曲名称的后边。如图26所示:

图26

在第2帧插入关键帧,在将小圆移到第2个歌曲名称的后边;同理同种方法,完成第3-8帧上的小圆的操作。上锁。

    F.选择as图层第一帧,按f9,打开动作面板,在as编辑区输入在该帧上的,停止指令:stop(); 。在第8帧插入帧,上锁。

    删除边框图层,打开按钮图层的眼睛。

    G.本环节完成后的时间轴,如图27所示:


图27

    6.编辑制作场景

    返回场景1,添加七个图层,共八个图层。自下而上命名为背景、小瓶、作品、图片、边框、文本、按钮、as。 

    (1)选择边框图层第一帧,从库中拖出边框图形元件的舞台,规格630*450,全居中。在第3帧插入帧,上锁。如图28所示:

图28

    (2)选择背景图层第一帧,导入或绘制两个背景放置在边框的左右框之下。在第3帧插入帧。上锁。如图29所示:


图29

    (3)选择小瓶图层第2帧插入空白关键帧,在边框的右框导入或绘制一个装饰品,调整好规格、位置。在第3帧插入关键帧,将该帧上装饰品水平翻转,变换一下规格形状。上锁。如图30所示:

图30

    (4)选择作品图层第1帧,用文本规矩在边框的左框中输入:作品的题目。如图31所示:

图31

在第2帧插入空白关键帧,从库中拖出“flv”影片剪辑元件到舞台,将其放置在边框左框之下,调整好规格位置。如图32所示:

图32

在第3帧插入空白关键帧,从库中拖出“mp3”影片剪辑元件到舞台,将其放置在边框右框之下,调整好位置。上锁。如图33所示:

图33

    (5)选择图片图层第一帧,在边框右框放入一个装饰物,调整好规格位置,如图34所示:

图34

在第2帧插入空白关键帧,再在第3帧插入空白关键帧,将准备好的歌手图片(或动画影片剪辑)导入舞台,将其放置在边框左框之下,调整好规格位置。上锁。如图35所示:


图35

    (6)选择文本图层第一帧,用文本工具在边框的下方输入相关内容:“迎客松站”,调整好规格位置。如图36所示:

图36

在第2帧插入关键帧,用文本工具将该帧上文本内容改为:“flv视频”;在第3帧插入关键帧,再用文本工具将该帧上文本内容改为:“许强歌选”。上锁。


    (7)选择按钮图层第一帧,从库中分别依次拖出“视频”,“隐钮”,“歌曲”三个按钮元件,将其分别依次放置在“迎客松站”文字的左侧,“迎客松站”文字之上,“迎客松站”文字的右侧。调整好位置规格。如图37所示:


图37

    给按钮添加指令语句:

    点击视频按钮,按f9,打开作面板,在as编辑区输入,如下语句:

on (release) {
 gotoAndStop(2);

}

    点击迎客松站上的按钮,按f9,打开作面板,在as编辑区输入,如下语句:

on (release) {
 gotoAndStop(1);

}

    点击歌曲按钮,按f9,打开作面板,在as编辑区输入,如下语句:

on (release) {
 gotoAndStop(3);

}

在第3帧插入帧,上锁。

    (8)选择as图层第一帧,按f9,打开作面板,在as编辑区输入,该帧上的停止指令语句:stop();在第3帧插入帧,锁定该图层。


    7.该作业完成后的时间轴,如图38所示:



图38

    8.测试存盘

 

    *说明:

     1.组件是flash8软件自带的功能,用途广泛,功能强大。运用组件可加载外部的语音和视频文件。

     2.用组件加载外部文件的优点是大大压缩了swf文件的体积;其缺点是当外部文件地址一旦失效,其swf文件加载的内容也就不显示了

     3.本教程中的flv影片剪辑和mp3影片剪辑均是一个独立的作品,即用按钮交互的组件多视频卡和组件多曲歌卡。

 

最终效果显示:


http://hsb345.16789.net/domName/hsb345/20143241854952591.swf

 

全屏下载

 

祝你成功!

 

进入更多教程

 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:



朗朗晴空
(2010/10/13 16:11:00) [220.180.207.]

我怎么做不出来呢


朗朗晴空
(2010/10/11 21:33:00) [220.180.207.]

非常感谢老师


812379368
(2010/5/26 22:31:00)

谢谢恩师辛苦您了!

 发表评论:共有 3 条评论

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

迎客松B站 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:翠柏

琼icp备09005167