您好!欢迎您光临歌曲连播与点放卡的制作原理及方法_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>进阶教程>>>歌曲连播与点放卡的制作原理及方法
歌曲连播与点放卡的制作原理及方法
发表日期:2013/5/9 8:44:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 5405

歌曲连播与点放卡的制作原理及方法

   

    教学目的:通过本节教学了解和掌握加载外部歌曲,设置动态文本,添加按钮及指令的基本原理与操作方法,进而制作出具有连播点放功能的、漂亮实用的歌曲点播卡。

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

    教学要点:按钮、动态文本、实例名称、动态文本变量

 

    

    作前准备:

    载录18首mp3规格的、缓冲效果较好的广东音乐地址,并将其地址和名称按顺序保存到文本文档中待用。如下:

"http://course.szu.edu.cn/yinyue/xinshang/audio/ctqy/hhyy_04.mp3",

"http://www.hbwt.com.cn/images/Uploadfiles/jtyyjks/qnjxc/3nj6c/1qmdsy/旱天雷[广东音乐].mp3",

"http://bbs.009y.com/UploadFile/2006-8/20068278154181837.mp3",

"http://course.szu.edu.cn/yinyue/xinshang/audio/ctqy/ydbj_11.mp3",

"http://bbs.009y.com/UploadFile/2006-8/20068250531053824.mp3",

 "http://radio.hzu.edu.cn/vdj0000/200761280760953.mp3",

"http://www.pep.com.cn/xiaoyu/jiaoshi/tbjxzy/kejian/xy4x/200804/P020080423509560168058.mp3",

"http://wenke.hep.edu.cn/ncourse/yyjs/htm/mp3/3/29.mp3",

 "http://www.lxroom.cn/music/rhnsq.mp3",

"http://gdyinyue.tosaint.com/mp3jxdqushting/bucanrongzuopin/01xiaoniaotiantang.mp3",

 "http://www.sy-dj.cn/song/list/mzyy/0078.mp3",

"http://www.edu-gzstats.gov.cn/HomePage1/index1.mp3",

 "http://radio.hzu.edu.cn/vdj0000/2007662007423.mp3",

 "http://course.gsu.edu.cn/2007/10/admin/upload_datas/datas/190.mp3",

"http://bbs.009y.com/UploadFile/2007-3/20073922392410672.mp3",

 "http://bbs.009y.com/UploadFile/2006-8/20068282143943492.mp3",

"http://www.life2fun.com/LifeTasting/gdyy/GDmusic03/11.mp3",

"http://gdyinyue.tosaint.com/mp3jxdqushting/234_yujiale.mp3"

  制作步骤

    1.启动FLASH8 软件

    2.确立文档属性

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


图1

    3.导入素材到库

    首先,将准备好的相关素材导入到库中,待用。

    4.创建图形元件

    选择“插入-新建元件”,建立一个名为“声线”的图形元件。点击确定,进入元件编辑区。就一个图层。选择图层1第一帧,用矩形工具在舞台拖一个规格为100*15的,无边线的矩形,颜色随意。用选择工具将其左上角向下拖成直角三角形。全居中。如图2所示:

图2

    5.创建影片剪辑元件

    (1)选择“插入-新建元件”,建立一个名为“滑块”的影片剪辑元件。点击确定,进入元件编辑区。就一个图层。选择图层1第一帧,用矩形工具在舞台拖一个规格为8*20的,无边线的矩形,颜色随意。全居中,如图3所示:

图3

    (2)选择“插入-新建元件”,建立一个名为“音量”的影片剪辑元件。点击确定,进入元件编辑区。添加一个图层,共两个图层,上层为音量块,下层为音量线。

    a.选择音量线图层第一帧,从库中拖出声线图形元件到舞台,左对齐-垂直中齐。

    b.选择音量块图层第一帧,从库中拖出滑块影片剪辑元件到舞台,将其放置在声线的右端,垂直中齐。如图4所示:

图4

点击滑块,在属性面板输入其实例名称为:huakuai ,如图5所示:

图5

点击该滑块,按f9,打开动作面板,在as编辑区输入,如下指令语句:

on (press)
{
    startDrag ("", true, 0, 0, 100, 0);
}
on (releaseOutside, rollOut)
{
    stopDrag ();
}

    6.创建按钮元件

    选择“插入-新建元件”,建立一个名为“隐钮”的按钮元件。点击确定,进入元件编辑区。在第4帧(点击)插入空白关键帧,用矩形工具在舞台拖一个规格为130*30的,无边线的矩形,颜色随意。全居中。如图6所示:

图6

    7.编辑制作场景

    返回场景1,添加九个图层,共十个图层。自下而上图层命名,如图7所示:

图7

    (1)选择边框图层第一帧,用矩形工具在舞台拖一个笔触高度为2,黄色的,规格为450*270的,无填充颜色的矩形框,所放位置,如图8所示:


图8

在第3帧插入帧,上锁。

    (2)选择菜单图层第2帧,插入空白关键帧,用矩形工具在边框处拖一个规格为450*270的,无边线的矩形,颜色随意。在第3帧插入空白关键帧。上锁。如图9所示:

图9

    (3)选择文本图层第一帧,在舞台上方输入作品题目,下方输入作者名称,其下方输入“打开菜单”。各款所在位置,如图10所示:

图10 

在第2、3帧插入关键帧,在第2帧菜单处输入乐曲的名称,并将“打开菜单”改为“关闭菜单”。上锁。如图11所示: 

图11

    (4)添加按钮 a.选择隐钮图层第一帧,从库中拖出隐钮按钮元件,放置在打开菜单的位置。在第2帧插入关键帧,再从库中分别依次拖出隐钮按钮元件若干,分别依次放置在乐曲名称和关闭菜单之上,在第3帧插入关键帧。如图12所示:

图12

框选第3帧上的乐曲名称隐钮,删除。

    b.为隐形按钮添加指令语句

    (a)选择隐钮图层第1帧,点击打开菜单上的按钮,按f9,打开动作面板,为该按钮输入,如下指令语句:

on (release) {
 gotoAndStop(2);

}

    (b)选择隐钮图层第2帧,点击01乐曲名的按钮,按f9,打开动作面板,在as编辑区输入,如下指令语句:

on (press)
{
    mysound.stop();
    temp = 1;
    aa();
}

按此方法完成02-18乐曲名按钮的语句添加,并将上边语句中的1分别依次改为218;再点击关闭菜单上的按钮,按f9。打开动作面板,在as编辑区输入如下指令语句:

on (release) {
 gotoAndStop(3);

}

    (c)选择隐钮图层第3帧,点击打开菜单上的按钮,按f9,打开动作面板,为该按钮输入如下指令语句:

on (release) {
 gotoAndStop(2);

}

    (5)选择动本图层第一帧,用文本工具在边框的下方拖一个动态文本框。如图13所示:

图13

字体、规格、颜色的设置参考,如图14所示:

图14

点击该文本框,在属性面板输入其变量为:music_name ,如图15所示:

图15

    (6)a.选择按钮图层第一帧,点击“窗口-公用库-按钮”,打开按钮面板,选中你喜欢的按钮分别依次拖出前曲、播放、暂停、后曲四枚按钮,分别依次放置在动态文本的下方,调整好位置。如图16所示:

图16

    b.为按钮添加指令语句 点击前曲按钮,按f9,打开动作面板,在as编辑区输入,如下指令语句:

on (release)
{
    mysound.stop();
    if (temp == 1)
    {
        temp = 18;
    }
    else
    {
        --temp;
    } 

    aa();
}

点击播放按钮,按f9,打开动作面板,在as编辑区输入,如下指令语句:

on (press)
{
    if (tt)
    {
        mysound.stop();
        mysound.start(tt);
    }
    else
    {
        mysound.stop();
        mysound.start(0);
    }
}

点击暂停按钮,按f9,打开动作面板,在as编辑区输入,如下指令语句:

on (press)
{
    mysound.stop();
    tt = mysound.position / 1000;

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

on (release)
{
    mysound.stop();
    if (temp > 17)
    {
        temp = 1;
    }
    else
    {
        ++temp;
    } 
    aa();
}

在第3帧插入帧。上锁。

    (7)选择音量图层第一帧,从库中拖出音量影片剪辑到舞台,放置在后曲按钮的右侧适当位置。如图17所示:

图17

选中该实例,在属性面板输入其实例名称为:yinliang 。如图18所示:

图18

在第3帧插入帧。上锁。

    (8)选择影片图层第一帧,放入你做好的相关影片剪辑在边框处,在第3帧插入帧。上锁。如图19所示:

图19

    (9)选择遮罩图层第一帧,在边框处拖一个和边框同等大小的,无边线的矩形(不可大于边框),并和边框重合。在第3帧插入帧。设置该图层为遮罩层。如图20所示:

图20

*设置该遮罩的目的是为了使你的动画影片不显示在边框之外。

    (10)选择as图层第一帧,按f9,打开动作面板,在as编辑区输入,如下帧语句:

function aa()
{
    mysound = new Sound();
    mymusic_array = new Array

("http://course.szu.edu.cn/yinyue/xinshang/audio/ctqy/hhyy_04.mp3",

"http://www.hbwt.com.cn/images/Uploadfiles/jtyyjks/qnjxc/3nj6c/1qmdsy/旱天雷[广东音乐].mp3",

"http://bbs.009y.com/UploadFile/2006-8/20068278154181837.mp3",

"http://course.szu.edu.cn/yinyue/xinshang/audio/ctqy/ydbj_11.mp3",

"http://bbs.009y.com/UploadFile/2006-8/20068250531053824.mp3",

"http://radio.hzu.edu.cn/vdj0000/200761280760953.mp3",

"http://www.pep.com.cn/xiaoyu/jiaoshi/tbjxzy/kejian/xy4x/200804/P020080423509560168058.mp3",

"http://wenke.hep.edu.cn/ncourse/yyjs/htm/mp3/3/29.mp3",

"http://www.lxroom.cn/music/rhnsq.mp3",

"http://gdyinyue.tosaint.com/mp3jxdqushting/bucanrongzuopin/01xiaoniaotiantang.mp3",

"http://www.sy-dj.cn/song/list/mzyy/0078.mp3",

"http://www.edu-gzstats.gov.cn/HomePage1/index1.mp3",

"http://radio.hzu.edu.cn/vdj0000/2007662007423.mp3",

"http://course.gsu.edu.cn/2007/10/admin/upload_datas/datas/190.mp3",

"http://bbs.009y.com/UploadFile/2007-3/20073922392410672.mp3",

"http://bbs.009y.com/UploadFile/2006-8/20068282143943492.mp3",

"http://www.life2fun.com/LifeTasting/gdyy/GDmusic03/11.mp3",

"http://gdyinyue.tosaint.com/mp3jxdqushting/234_yujiale.mp3");

    mysound.loadSound(mymusic_array[temp - 1], true);
    mysound.onSoundComplete = function ()
    {
        ++temp;
        if (temp > 18)
        {
            temp = 1;
        } 
        aa();
    };
    onEnterFrame = function ()
    {
        mysound.setVolume(_root.yinliang.huakuai._x);
        huanchong = int(mysound.getBytesLoaded() / mysound.getBytesTotal() * 100) + " %";
        myarray = new Array
("01.步步高曲", "02.旱天雷曲", "03.山乡春早", "04.合奏丝竹", "05.上云梯曲", "06.渔歌唱晚", "07.寒鸭戏水", "08.雨打芭蕉", "09.生日快乐", "10.小鸟天堂", "11.青梅竹马", "12.平湖秋月", "13.流水行云", "14.赛龙夺锦", "15.饿马摇铃", "16.秋水芙蓉", "17.金蛇狂舞", "18.孔雀开屏");

        music_name = myarray[temp - 1];
        zongchangdu = int(mysound.duration / 1000);
        yibofang = int(mysound.position / 1000);
    };
} function genxin()
{
    call(genxinbiao.cc());
}
stop ();
temp = 1;
aa();
i = 0;
_root.jingyincha._visible = false;
_root.jingyin.onRelease = function ()
{
    ++i;
    if (i % 2 != 0)
    {
        _root.yinliang.huakuai._x = 0;
        _root.jingyincha._visible = true;
    }
    else
    {
        _root.yinliang.huakuai._x = 90;
        _root.jingyincha._visible = false;
    }
};
stop ();
intervalId = setInterval(this, "genxin", 1000);
function nyrzs()
{
    call(nyrzsbiao.cc());
}
intervalId = setInterval(this, "nyrzs", 1000);

将语句中红色部分换上你喜欢的歌曲地址和相对应的歌曲名称,并将其不留空隙,并成一行。

在第2帧插入空白关键帧,点击该帧,按f9,打开动作面板,在as编辑区输入停止指令:

stop();

在第3帧插入空白关键帧,点击该帧,按f9,打开动作面板,在as编辑区输入停止指令:

stop();

锁定该图层。

    8.本作业完成后时间轴显示如图21所示:

图21

  9.测试存盘

    *说明:

    1.在置换乐曲地址和名称时一定要使用英文双引号及逗号。

    2,如果要将菜单做成拉放式的或其它形式,则需要在影片剪辑中完成,然后放到场景1菜单图层。

    3,最终效果显示中过段时间因为歌曲地址失效可能听不到声音,你在制作中换成有效音乐地址就好了(这是加载外部歌曲的弊端,不过文件体积却可大大缩小的哦)。

    最终效果显示:


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

 


 

全屏下载

 

祝你成功!

 

进入更多教程

 

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



山水画
(2010/12/27 11:50:00) [119.100.77.]

老师,好久没玩了,今天花了很长时间做了一个学做播放歌卡作业,但怎么也做不好,由于本人不懂语句,脚本是复制你的,在测试的时候系统提醒:**错误** 场景=场景 1, 图层=as, 帧=1:第 31 行: 需要 ')' 或 ','
         mysound.loadSound(mymusic_array[temp - 1], true);

**错误** 场景=场景 1, 图层=as, 帧=1:第 45 行: 运算符 '=' 的后面必须有操作数
             myarray = new Array("1.路边野花不要采", "2.东山飘雨西山晴 ", "3.阿里山的姑娘", "4.明月几时有", "5.酒醉的探戈", "6.何日君再来 ", "7.小城故事多", "8.香港之夜", "9.北国之春", "10.几多愁", "11.山茶花", "12.甜蜜密",);

**错误** 场景=场景 1, 图层=as, 帧=1:第 47 行: 需要 ')' 或 ','
             music_name = myarray[temp - 1],;

ActionScript 错误总数:3   报错:3
这个三个地方该怎么修改呢,请老师指导。


清清小河
(2010/11/12 8:45:00) [58.55.16.]

能三控吗.除您讲两种,能同时控制多少歌,就链接多少视频地址或的影片剪辑.


jacksonhui
(2010/8/12 16:48:00)

谢老師,學習了!


hsb345
(2010/4/10 18:19:00)

回复和风细雨朋友:因为作品的歌曲是外部加载的,故存盘后,再观看时,电脑会有个提示,你按提示操作就可以了。


和风细雨
(2010/4/10 11:01:00) [218.64.147.]

老师,你好
我按照你的教程一步一步的制作,(脚本是复制你的)在制作过程中的测试影片时,歌曲和菜单的转换都很正常,就是保存在文件夹后,打开flash观看,却没有声音了,这是为什么呢?请老师在百忙之中给我答复好吗?我的QQ286896929

 发表评论:共有 20 条评论

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

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

联系电话: 联系人:翠柏

琼icp备09005167