您好!欢迎您光临flv视频电视的制作原理与方法_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>进阶教程>>>flv视频电视的制作原理与方法
flv视频电视的制作原理与方法
发表日期:2014/3/25 15:15:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 1503

 

flv视频电视的制作原理与方法

 

   

    教学目的:通过本节教学了解和掌握视频及其实例名称的创建,动态文本、变量,按钮的运用,通过脚本和巧妙的设计与创作,进而实现视频歌卡的动画效果。

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

    教学要点:创建视频、实例名称、动态文本、变量、按钮、动作面板、as语句。

 

 

  作前准备

    准备12个缓冲效果较好、久远有效的flv视频电视台绝对地址,保存到指定的文件夹待用。

1.北京卫视 http://qqlive.dnion.com:1863/2414742998.flv

2.广东卫视 http://qqlive.dnion.com:1863/2084914015.flv

3.青海卫视 http://qqlive.dnion.com:1863/877636586.flv

4.陕西卫视 http://qqlive.dnion.com:1863/2739752321.flv

5.贵州卫视 http://qqlive.dnion.com:1863/3051487004.flv

6.深圳卫视 http://qqlive.dnion.com:1863/2309309351.flv

7.珠江卫视 http://qqlive.dnion.com:1863/1926463423.flv

8.辽宁卫视 http://qqlive.dnion.com:1863/3006271240.flv

9.山东卫视 http://qqlive.dnion.com:1863/3660187036.flv

10.云南卫视 http://qqlive.dnion.com:1863/708402866.flv

11.浙江影视 http://r1.cztv.com/channels/105/500.flv/live.flv

12.浙江教育 http://r1.cztv.com/channels/104/500.flv/live.flv

 

  制作步骤

    1.启动FLASH8 软件

    2.确立文档属性 设置动画尺寸为550*450,背景颜色深绿,其它默认,点击确定,进入场景1。 如图1所示:


图1

    3.创建图形元件

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

    选择图层1第1帧,用矩形工具在舞台拖一个规格520*300的、颜色随意的,笔触高度为20的、无填充的矩形框,全居中。如图2所示:


图2

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

    选择图层1第1帧,用矩形工具和椭圆根据在舞台拖一个总体规格350*140的、颜色与大框相近的,无边线底座,全居中。如图3所示:


图3

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

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


图4

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

    选择图层1第1帧,用矩形工具在舞台拖一个规格100*14的、颜色随意,笔触高度为4的、无填充的矩形框,全居中。如图5所示:

图5

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

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


图6

(此图已放大)

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

    选择图层1第1帧,用矩形工具和线条根据在舞台拖一个总体规格15*20的、颜色随意的,无边线的小喇叭,全居中。如图7所示:

图7

    (7)选择“插入-新建元件”,创建一个名为“荧屏”的图形元件,点击确定,进入元件编辑区。添加一个图层,共两个图层。自下而上命名为荧屏、文本。

    A.选择荧屏图层第1帧,用矩形工具在舞台拖一个规格523*282的、灰色放射性的,无边线的矩形,全居中。上锁。如图8所示:


图8

    B.选择文本图层第1帧,用文本工具在舞台输入作品的题目,字体、颜色、规格适当,全居中。上锁。如图9所示:


图9

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


图10


    4.创建按钮元件

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

    选择图层1第1帧(弹起),从库中拖出“滑块1”图形元件到舞台,规格不变,全居中。如图4所示:



图11

在第2幀(指针经过)插入关键帧,将舞台实例变换一个不同颜色,在第4幀(点击)插入幀。如图12所示:


图12

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

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

图13

    5.创建影片剪辑元件

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

    选择图层1第1帧,从库中拖出“滑块2”按钮元件到舞台,规格不变,全居中。如图14所示:


图14

(此图已放大)

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

on (press)
{
    startDrag ("", false, izquierda, arriba, derecha, abajo);
    arrastrando = true;
}
on (release, releaseOutside)
{
    stopDrag ();
    arrastrando = false;
}

锁定该图层。

    2.选择“插入-新建元件”,创建一个名为“音量”的影片剪辑元件,点击确定,进入元件编辑区。添加五个图层,共六个图层。自下而上命名为底板、动本、滑块、小框、按钮、as。

    A.选择底板图层第1帧,从库中拖出“喇叭”图形元件到舞台,规格不变,全居中。如图15所示:


 

图15

在第2幀插入空白关键帧,从库中拖出“底板”图形元件到舞台,规格不变,全居中。上锁。如图16所示:


 

图16

    B.选择动本图层第2帧插入空白关键帧,用动态文本在底板上拖一个文本框,并输入:000 ,全居中。如图17所示:


图17

点击该实例,在属性面板填写其变量为:valor 。上锁。其它参数设定可参考,如图18所示:


图18

   C.选择滑块图层第2帧插入空白关键帧,从库中拖出“滑块3”影片剪辑元件到舞台,规格不变,将其放置在底板实例的右端,对齐,调整好位置。如图19所示:


图19

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

onClipEvent (load)
{
    arriba = _y;
    abajo = _y;
    derecha = _x;
    izquierda = _x - 100;
    _root.controlador.valor = 100;
    _root.controlador.desvanecer.desvanecimiento = _root.controlador.valor;
}
onClipEvent (enterFrame)
{
    if (arrastrando == true)
    {
        _root.controlador.valor = Math.round(100 - (derecha - _x) + 8.500000E-002);
        _root.controlador.sonido.setVolume(_root.controlador.valor);
        _root.controlador.desvanecer.desvanecimiento = _root.controlador.valor;
        _root.controlador.desvanecer.reproducir = true;
        setProperty(_root.controlador.desvanecer.cuadrito, _visible, "false");
        _root.controlador.desvanecermute.mute.gotoAndStop(1);
    }
}

锁定该图层

    D.选择小框图层第2帧插入空白关键帧,从库中拖出“小框”图形元件到舞台,规格不变,全居中。如图20所示:


图20

    E.选择按钮图层第1帧,从库中拖出“隐钮”按钮元件到舞台,规格不变,全居中。如图21所示:



图21

点击该实例,按f9,打开底座面板,在as编辑区输入,如下指令语句:

on (release) {
 play();

}

在第2幀插入幀,上锁。

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

stop();

在第2幀插入空白关键帧,按f9,打开动作面板,在as编辑区输入,如下帧语句:

stop();
sonido = new Sound();
setProperty(_root.controlador.recordatorio, _visible, false);

锁定该图层。

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


图22

    3.选择“插入-新建元件”,创建一个名为“菜单”的影片剪辑元件,点击确定,进入元件编辑区。添加五个图层,共六个图层。自下而上命名为背景、目录、矩形、按钮、文本、as。

    A.选择背景图层第1帧,用矩形工具在舞台拖一个规格523*282的、橙色放射性的,无边线的矩形,全居中。上锁。如图23所示:


图23

将其转换为图形元件,点击该实例设置其Alpha为60%。在第30幀插入幀,上锁。完成后的舞台实例,如图24所示:


图24

    B.选择目录图层第1帧,用文本工具在舞台输入已准备好的电视台名称,调整好位置。在第30幀插入,上锁。如图25所示:


图25

    C.选择矩形图层第1帧,用矩形工具在舞台拖一个规格523*282的、红色无边线的矩形,全居中。如图26所示:


图26

在第15幀插入关键帧。点击第1幀舞台实例,将其规格改为523*8,并移到背景的下边缘,水平中齐。如图27所示:


图27

右键该幀-复制幀,再右键第30幀-粘贴幀。在属性面板创建这两个区域间是形状补间,上锁。

    D.选择按钮图层第1帧,从库中拖出“隐钮”按钮元件到舞台,将其放置在矩形下方的适当位置,水平中齐。如图28所示:


图28

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

on (release) {
 play();

}

在第30幀插入幀,上锁。

    E.选择文本图层第1帧,用文本工具在舞台输入菜单两个字,颜色、规格、字体自定,并将其移到按钮之上,水平中齐。如图29所示:


图29

(此图已放大)

在第15幀插入关键帧,将该幀舞台实例改为关闭字样。如图30所示:


图30

在第30幀插入幀,上锁。

    F.选择as图层第一帧,按f9,打开动作面板,在as编辑区输入,如下帧停止语句:stop(); 。右键该幀-复制幀,在右键第15幀-粘贴幀,在第30幀插入幀。上锁。 

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


图31


    6.创建视频元件

    选择“窗口-库”,打开库,在库的空白处“右键-创建视频”,打开“视频属性”面板,设置其参数,如图32所示:

图32

点击“确定”,这时会在库中多了一个“视频1”元件。如图33所示:


图33

    7.编辑制作场景

    返回场景1,添加六个图层,共七个图层。自下而上命名为视频、底座、菜单、音量、按钮、大框、as。

    (1)选择视频图层第一帧,从库中拖出“荧屏”图形元件到舞台,规格523*280,将其放置在舞台上半部适当位置上,水平中齐。如图34所示:


图34

在第2幀插入空白关键帧,从库中拖出“视频1”元件到舞台,规格502*266,将其放置在舞台上半部适当位置上,水平中齐。如图35所示:


图35

点击该实例,在属性面板填写其实例名称为:cuibai 。在第13帧插入帧,上锁。如图36所示:


图36

    (2)选择底座图层第一帧,从库中拖出“底座”图形元件到舞台,规格不变,将其放置在视频实例的下方,水平中齐。在第13幀插入幀。上锁。如图37所示:


图37

    (3)选择菜单图层第一帧,从库中拖出“菜单”影片剪辑元件到舞台,规格不变,将其放置在底座实例上边处,水平中齐。在第13幀插入幀,上锁。如图38所示:


图38

    (4)选择音量图层第一帧,从库中拖出“音量”影片剪辑元件到舞台,规格不变,将其放置在菜单实例的下方处,水平中齐。如图39所示:


图39

点击该实例,在属性面板填写其实例名称为:controlador 。在第13帧插入帧,上锁。如图40所示:


图40


    (5)选择按钮图层第一帧,选择“窗口-公用库-按钮”,调出你喜欢的播放、暂停和进退按钮四枚(或自制同样的四枚按钮)到舞台,自左向右,按照退一、播放、暂停、进一顺序,摆放在音量的两侧,调整好各按钮之间的间隔、位置。如图41所示:


图41

    点击进一按钮,在属性面板设置其色调橙色60%。完成后的实例变化,如图42所示:


图42

    为按钮添加实例名称和语句:

    点击播放按钮,如图43所示:


图43

在属性面板填写其实例名称为:play_btn 。如图44所示:

图44

再点击暂停按钮,如图45所示:


图45

在属性面板填写其实例名称为:pause_btn 。如图46所示:

图46

再点击进一按钮,如图47所示:

图47

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

on (release)
{
    play ();
}

再点击退一按钮,如图48所示:


图48

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

on (release)
{
    prevFrame();

}

    为菜单放置按钮

    分别依次从库中拖出12个“隐钮”按钮元件,将其依次放置在电视台名称之上,调整好规格、位置。如图49所示:

图49

    为按钮添加语句:

点击北京卫视上的按钮,按f9,打开动作面板,在as编辑区输入,如下指令语句:

on (release) {
 gotoAndStop(2);

}

点击广东卫视上的按钮,按f9,打开动作面板,在as编辑区输入,如下指令语句:

on (release) {
 gotoAndStop(3);

}

点击青海卫视上的按钮,按f9,打开动作面板,在as编辑区输入,如下指令语句:

on (release) {
 gotoAndStop(4);

}

同理同种方法,完成余下的按钮指令语句的添加,其语句中的数字依次改为513

注意下边的操作!

双击库中的菜单图标,进入该影片剪辑的编辑区,设置矩形图层为遮罩层。如图50所示:

图50

再用鼠标将背景图层拖到目录的上层。如图51所示:


图51

再用鼠标将背景图层拖到目录的下层层。如图52所示:


图52

完成后的菜单影片剪辑元件的时间轴,如图53所示:


图53

其舞台实例第一幀的显示,如图54所示:

图54

返回场景1,此时第一幀舞台实例显示,如图55所示:


图55

在第13幀插入幀,上锁。


    (6)选择大框图层第一帧,从库中拖出“大框”图形元件到舞台,规格不变,将其放置在荧屏之上,调整好位置,水平中齐。在第13帧插入帧,上锁。如图56所示:


图56

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

stop ();

在第2幀插入空白关键帧,点击该幀,按f9,打开动作面板,在as编辑区输入,如下帧语句:

stop ();
var nc = new NetConnection();
nc.connect(null);
var ns = new NetStream(nc);
var cuibai;
cuibai.attachVideo(ns);
ns.play("http://qqlive.dnion.com:1863/2414742998.flv
");
rewind_btn.onRelease = function ()
{
    ns.seek(0);
};
play_btn.onRelease = function ()
{
    ns.pause();
};
pause_btn.onRelease = function ()
{
    ns.pause();
};
var percent_Loaded = 0;
loader.loadBar._xscale = percent_Loaded;
var videoInterval = setInterval(videoStatus, 100);
var percent_Loaded = 0;
loader.loadBar._xscale = percent_Loaded;
loader.playBar._xscale = 0;
var duration;
ns.onMetaData = function (obj)
{
    duration = obj.duration;
};
var videoInterval = setInterval(videoStatus, 100);
var scrubInterval;
loader.scrub.onPress = function ()
{
    clearInterval(videoInterval);
    scrubInterval = setInterval(scrubit, 10);
    this.startDrag(false, 0, this._y, loader.loadBar._width, this._y);
};
loader.scrub.onRelease = loader.scrub.onReleaseOutside = function ()
{
    clearInterval(scrubInterval);
    videoInterval = setInterval(videoStatus, 100);
    this.stopDrag();
};
vSound.attachAudio(ns);
var video_sound = new Sound(vSound);
vSound.onRelease = function ()
{
    if (this.vol == 100)
    {
        video_sound.setVolume(0);
        this.gotoAndStop(2);
    }
    else
    {
        video_sound.setVolume(100);
        this.gotoAndStop(1);
    }
};

*红色部分为你准备好的第一首电视台地址。

在第3幀插入空白关键帧,点击该幀,按f9,打开动作面板,在as编辑区输入,如下帧语句:

stop ();
var nc = new NetConnection();
nc.connect(null);
var ns = new NetStream(nc);
var cuibai;
cuibai.attachVideo(ns);
ns.play("
http://qqlive.dnion.com:1863/2084914015.flv");

*红色部分为你准备好的第二首电视台地址。

右键第3帧-复制帧,在分别依次右键第4-13帧-粘贴帧。然后依次打开第4-13帧动作面板,将语句中的视频地址换成第4-13个电视台的地址。上锁。

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


图57

  9.测试存盘

 

    *说明:

    1.如果制作中要增减视频,其原理方法相同。 

    2.制作中一定要注意菜单名称,按钮和as图层的幀相统一。

    3.本教程示例只有上传发表后才可以看到效果,所以测试中不见效果不要着急,正常。

 

 

最终效果显示:


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

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

 

全屏下载

 

祝你成功!

 

进入更多教程

 

 

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

没有相关评论

 发表评论:

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

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

联系电话: 联系人:翠柏

琼icp备09005167