您好!欢迎您光临电唱机的制作原理及方法_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>进阶教程>>>电唱机的制作原理及方法
电唱机的制作原理及方法
发表日期:2013/1/26 15:43:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 3854

电唱机的制作原理及方法

   

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

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

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

 

    

    作前准备:

    1.载录10首mp3规格的、缓冲效果较好的歌曲地址,并将其地址和名称按顺序保存到文本文档中待用。

    2.准备一张作为装饰用的透明图片,经过作图软件(ps、fw)处理后,保持到指定的文件夹待用。

 

      制作步骤

    1.启动FLASH8 软件

    2.确立文档属性

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


图1

    3.导入素材到库

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

    4.创建图形元件

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

    选择图层1第一帧,导入或绘制一个敞开的电唱机,规格适当。全居中。如图2所示:


图2

flash鼠绘 电唱机的绘制原理与过程

   (2)选择“插入-新建元件”,创建一个名为“唱片”的图形元件,点击确定,进入元件编辑区。添加一个图层,共两个图层。下层为图层1、上层为图层2。

    A.选择图层2图层第一帧,用椭圆工具在舞台拖一个规格108*108的正圆,颜色随意,全居中。选中该实例,打开色码表,设置其参数,如图3所示:

图3                   图4

舞台实例变化,如上图4所示。点击“窗口-变形”,打开变形面板设置其参数,如图5所示:

图5

连续点击下边的“复制并应用变形”按钮若干次,直到你满意为止。如图6所示:

图6

点击中间部分删除(n次),直至中间透明为止。

    B.选择图层1图层第一帧,用椭圆工具拖一个比那个圆孔略大的正圆,颜色随意。全居中。选中该实例,打开色码表,设置其参数,如图7所示:



图7                   图8

舞台实例变化,如上图8所示。上锁。  

   (3)选择“插入-新建元件”,创建一个名为“唱针”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第一帧,用矩形工具在舞台绘制一个唱针,规格、颜色自定。其绘制流程及图形参考,如图9所示:


图9

    5.创建按钮元件

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

    选择图层1第一帧(弹起),打开矩形工具,选用多边形工具,在属性面板点击“选项”按钮,打开工具设置界面,设置其参数,如图10所示:


图10

在舞台拖一个规格为17*22.6的,黑红色的无边线三角形,全居中。如图11所示:

图11

在第2帧(指针经过)插入关键帧,将该实例变换为绿色,在第4帧插入帧。

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

    选择图层1第一帧,用椭圆工具,打开色码表,选取最下一行左起第三个色块,在舞台拖一个规格为18*16的椭圆,全居中。如图12所示:

图12

在第2帧(指针经过)插入关键帧,将该实例变换为绿色,在第4帧插入帧。

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

    选择图层1第一帧,用椭圆工具,打开色码表,选取最下一行做起第四个色块,在舞台拖一个规格为18*16的椭圆,全居中。如图13所示:

图13

在第2帧(指针经过)插入关键帧,将该实例变换为红色,在第4帧插入帧。

    6.创建影片剪辑元件

    (1)选择“插入-新建元件”,建立一个名为“滑块”的影片剪辑元件。点击确定,进入元件编辑区。就一个图层。

    选择图层1第一帧,用矩形工具在舞台拖一个规格为8*20的,无边线的矩形,颜色随意。全居中,如图14所示:


图14

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

    a.选择音量线图层第一帧,用矩形工具在舞台拖一个规格为100*3的,无边线的矩形,颜色随意,选中该示例,左对齐-垂直中齐。上锁。如图15所示:

图15(此图放大一倍)

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


图16(此图放大一倍)

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

图17

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

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

锁定该图层。

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

    a.选择进度线图层第一帧,用矩形工具在舞台拖一个规格为240*3的,无边线的矩形,颜色随意,选中该示例,左对齐-垂直中齐。上锁。如图18所示:

图18

    b.选择滑块图层第一帧,从库中拖出滑块影片剪辑元件到舞台,将其放置在进度线的左端,左对齐-垂直中齐。上锁。如图19所示:


图19
 

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

图20

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

on (press)
{
    _root.mysound.stop();
    startDrag ("", true, 0, 0, 240, 0);
}
on (releaseOutside, rollOver)
{
    bb = _root.bofangtiao.huakuai._x * (_root.mysound.duration / 1000) / 240;
    _root.mysound.stop();
    _root.mysound.start(bb);
    stopDrag ();
}

锁定该图层。

    (4)选择“插入-新建元件”,建立一个名为“指示灯”的影片剪辑元件。点击确定,进入元件编辑区。就一个图层。

    用矩形工具拖一个规格为20*13的,红色无边线的矩形。选中该示例,按住shift+ctrl键,平移复制一个该示例,同理再平移复制一个。然后将三个实例水平并列,在分别点击各实例,自左向右改为红、黄、蓝三色。如图21所示:

图21(此图放大一倍)

在第3帧插入关键帧,在将三个实例颜色依次改为黄、蓝、红,在第5帧插入帧。如图22所示:

图22(此图放大一倍)

    (5)选择“插入-新建元件”,建立一个名为“唱片转”的影片剪辑元件。点击确定,进入元件编辑区。就一个图层。

    选择图层1第一帧,从库中拖出唱片图形元件到舞台,在第60帧插入关键帧。创建本区域间的动画补间,并顺时针旋转一周。如图23所示:

图23

在第59帧插入关键帧,右键第60帧,删除帧。上锁。如图24所示:


图24


    7.编辑制作场景

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


图25

    (1)选择背景图层第一帧,导入或绘制一个背景,规格为550*400,全居中。在第2帧插入帧,上锁。如图26所示:


图26

    (2)选择进度图层第2帧,插入空白关键帧,从库中拖出“进度”影片剪辑元件,缩小其规格为100*2,将其移到背景的左下方适当位置,上锁。如图27所示:


图27

点击该实例,在属性面板填写其实例名称为 bofangtiao 。如图28所示:

图28

    (3)选择唱机图层第一帧,从库中拖出“唱机”图形元件到舞台,将其摆放在背景的左下方,将进度实例遮盖。在第2帧插入关键帧。上锁。如图29所示:

图29

    (4)选择唱片图层第一帧,从库中拖出“唱片”图形元件到舞台,修改其规格为127*65,将其摆放在唱机上盖的适当位置。右键该实例,将其转换为影片剪辑元件。如图30所示:

图30

点击该实例,在属性面板填写其实例名称为:cp 。然后,再在唱盘上用椭圆工具拖一个规格为138*60的,无边线的椭圆形,颜色随意。如图31所示:

图31

右键该实例,将其转换为影片剪辑元件,设置其Alpha为0%,如图32所示:

图32

点击该实例,在属性面板填写其实例名称为:mc 。上锁。如图33所示:

图33

在第2帧插入空白关键帧,从库中拖出“唱片转”影片剪辑元件移到唱盘上,改其规格为127*65,摆放到唱盘的适当位置。上锁。如图34示:

图34

    (5)选择音量图层第2帧插入空白关键帧,从库中拖出“音量”影片剪辑元件到舞台,将其摆放在上盖银屏的适当位置。如图35示:

图35

点击该实例,在属性面板填写其实例名称为:yinliang 。上锁。如图36示:


图36

    (6)选择唱针图层第一帧,从库中拖出唱针图形元件到舞台,将其放置在底座的适当位置。如图37示:


图37

在第2帧插入关键帧,将唱针移到唱片之上的适当位置。上锁。如图38所示:


图38

    (7)选择动本图层第2帧插入空白关键帧,用动态文本在唱机的上盖拖三个文本框,将其摆放在上盖的适当位置,再在底座银屏上拖一个动态文本框,调整好规格、位置。如图39示:


图39

点击上盖最上边的文本框,在属性面板填写其变量为:huanchong;点击上盖最中间的文本框,在属性面板填写其变量为:zongchangdu;点击上盖最下边的文本框,在属性面板填写其变量为:yibofang;点击底座银屏上的文本框,在属性面板填写其变量为:music_name。上锁。字体、规格、颜色自定。

    (8)选择示灯图层第一帧,从库中拖出“指示灯”影片剪辑元件到舞台,将其放置在唱机底座的左上侧,用容易变形工具调整好斜度,在第2插入关键帧。再返回第1锁将该帧上的实例打散。上锁。如图40所示:


图40

    (9)选择按钮图层第一帧,从库中拖出绿色的暂停按钮放置在底座下方左侧,调整好规格位置,变换一下颜色。在从库中拖出红色的播放按钮放置在底座的左侧,调整好规格位置,在从库中拖出绿色的暂停按钮放置在播放按钮的右侧,调整好规格位置。如图41所示:


图41

点击左侧的变色按钮,按f9,打开动作面板,在as编辑区输入,如下指令语句:

on (release) {
 gotoAndStop(2);

}

在第2帧插入关键帧,再将该按钮的语句改为:

on (release) {
 gotoAndStop(1);

}

然后,在从库中拖出“进退”按钮,将其放置在底座银屏的右侧,调整好规格位置。点击该实例,复制-转帖一次,并将其水平翻转后,移到该银屏的左侧,与上一个实例水平。如图42所示:

图42

点击红色的播放按钮,按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 > 9)
    {
        temp = 1;
    }
    else
    {
        ++temp;
    }
    aa();
}

点击银屏左侧三角形“上一曲”按钮,按f9,打开动作面板,在as编辑区输入,如下指令语句:

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

    aa();
}

锁定该图层。

    (10)选择题目图层第一帧,在背景的左上方输入作品的题目;在电唱机的右侧导入或绘制一个装饰物。在第2帧插入帧,上锁。如图43所示:

图43

    (11)选择边框图层第一帧,在舞台导入或制作一个边框,规格550*400,全居中。在第2帧插入帧,上锁。如图44所示:


图44

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

stop();
cp.onPress = function() {
cp.startDrag();
}
cp.onRelease = function(){
cp.stopDrag();
hit = cp.hitTest(mc);
if (hit) {
gotoAndStop(2);
}
}

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

*见边框下方的语句

锁定该图层。

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


图45

  9.测试存盘

    *说明:

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

    2,该教程中的进度影片剪辑不予显示,制作中你也可将其摆放到适当位置予以显示。

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

    最终效果显示:


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

 


 

全屏下载

 

祝你成功!

 

进入更多教程

 

 

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

("http://chat.lwinfo.com/music/新疆.mp3", "http://www.gushi160.com/ergezaixianll1/2892002niandediyichangxue.mp3","http://chat.zqxxg.cn/mid/新歌/爱是你我.mp3", "http://vietnamese.cri.cn/mmsource/audio/2010/01/26/aobaoxianghui.mp3", "http://news.cau.edu.cn/cau_newspaper/media/user/2008-01-10/data/music/_bg_.mp3","http://en.chinaxinjiang.cn/07/200912/w020091216408360532662.mp3","http://www.qlfy.com/sxf/Article/UploadFiles/200707/20070710114025522.mp3","http://club.ntu.edu.tw/~zither/ob/temp/2004/sep/815.mp3","http://grouprbt.tom.com/files/background/20060401152547267.mp3","http://mandarintutorlinwen.weebly.com/uploads/2/0/9/4/2094140/ni3_zen3me_shuo.mp3" );

    mysound.loadSound(mymusic_array[temp - 1], true);
    mysound.onSoundComplete = function ()
    {
        ++temp;
        if (temp > 10)
        {
            temp = 1;
        }
        aa();
    };
    onEnterFrame = function ()
    {
        mysound.setVolume(_root.yinliang.huakuai._x);
        huanchong = int(mysound.getBytesLoaded() / mysound.getBytesTotal() * 100) + " %";
        myarray = new Array("01.古莱莱", "02.2002年一场雪 ", "03.爱是你我", "04.敖包相会", "05.康定情歌 ", "06.新疆好", "07.新阿瓦尔古丽 ", "08.但愿人长久", "09.采槟榔 ", "10.你怎么说");

        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);

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



yaorao
(2010/8/16 0:27:00)

http://yaorao.16789.net/domName/yaorao/201081523544247074.swf


yaorao
(2010/8/16 0:27:00)

老师我制作完成了。谢谢呵呵。


yaorao
(2010/8/12 11:50:00)

老师。真棒。谢谢我学 了

 发表评论:共有 3 条评论

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

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

联系电话: 联系人:翠柏

琼icp备09005167