返回首页
当前位置: 主页 > 视频动画 > Flash教程 >

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

时间:2014-09-30 15:42来源:电脑教程学习网 www.etwiki.cn 编辑:admin

教学目的:通过本节教学了解和掌握视频及其实例名称的创建,开关的制作、按钮的运用,通过脚本和巧妙的设计与创作,进而实现视频电视剧在线欣赏的动画效果。

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

    教学要点:视频、实例名称、按钮、开关、动作面板、as语句。

   作前准备

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

  制作步骤

    1.启动FLASH8 软件

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

 

flash8.0制作flv视频的原理与方法 - 迎春 -  

图1

    3.创建视频元件

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

 flash8.0制作flv视频的原理与方法 - 迎春 -

图2

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

flash8.0制作flv视频的原理与方法 - 迎春 -  

图3

 

    4.创建按钮元件

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

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

flash8.0制作flv视频的原理与方法 - 迎春 -  

图4

    5.创建影片剪辑元件

    选择“插入-新建元件”,创建一个名为“开关”的影片剪辑元件,点击确定,进入元件编辑区。添加两个图层,共三个图层。自下而上命名为图标、按钮、as。

    (1)选择图标图层第1帧,用矩形工具在舞台画一个无边线的暂停图标,颜色、规格自定。全居中。如图5所示:

 flash8.0制作flv视频的原理与方法 - 迎春 -

 

图5

在第2帧插入空白关键帧,再在舞台画一个三角形的开始图标,颜色、规格自定。全居中。上锁。如图6所示:

flash8.0制作flv视频的原理与方法 - 迎春 -  

图6

    (2)选择按钮图层第1帧,从库中拖出“隐钮”按钮元件到舞台,将其覆盖暂停图标,调整好规格,全居中 。如图7所示:

flash8.0制作flv视频的原理与方法 - 迎春 -  

图7

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

on (release) {
 gotoAndStop(2);

}

on (release) {
 _root.ns.pause();
}

在第2帧插入关键帧,舞台实例显示,如图8所示:

flash8.0制作flv视频的原理与方法 - 迎春 -   

图8

点击该帧实例,按f9,打开动作面板,在as编辑区将原语句修改为,如下指令语句:

on (release) {
 gotoAndStop(1);

}

on (release) {
 _root.ns.pause();
}

锁定该图层。

    (3)选择as图层第1帧,按f9,打开动作面板,在as编辑区输入停止命令:stop(); 在第2帧插入帧。上锁。

    (4)本环节完成后的时间轴,如图9所示:

flash8.0制作flv视频的原理与方法 - 迎春 -  

图9

 

 

    6.编辑制作场景

    返回场景1,添加三个图层,共四个图层。自下而上命名为视频、按钮、文本、as。

 

    (1)选择视频图层第一帧,从库中拖出“视频1”元件到舞台,将其规格改为400*300,全居中。如图10所示:

flash8.0制作flv视频的原理与方法 - 迎春 -  

 

 图10

(此图为原图的70%)

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

flash8.0制作flv视频的原理与方法 - 迎春 -  

图11

在第2帧插入关键帧,将该帧舞台实例,放大为715*520 ,全居中。上锁。如图12所示:

flash8.0制作flv视频的原理与方法 - 迎春 -  

图12

(此图为原图的70%)

    (2)选择按钮图层第一帧,从库中拖出“隐钮”按钮元件到舞台,规格适当,将其放置在舞台左下角,再从库中拖出“开关”影片剪辑元件到舞台,规格适当,将其放置在舞台右下角。如图13所示:

flash8.0制作flv视频的原理与方法 - 迎春 -  

图13

(此图为原图的70%)

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

on (release) {
 gotoAndStop(2);

}

在第2帧插入关键帧,点击左下角的按钮,按f9,打开动作面板,在as编辑区将原语句修改为,如下指令语句:

on (release) {
 gotoAndStop(1);

}

锁定该图层。

    (3)选择文本图层第一帧,用文本工具在按钮上输入:全屏,调整好位置;在上方输入作品题目,水平中齐;在下方输入相关提示,水平中齐。如图14所示:

flash8.0制作flv视频的原理与方法 - 迎春 -  

图14

(此图为原图的70%)

在第2帧插入关键帧,改按钮上的文字“全屏”为“正常”,并删除作品题目和提示。上锁。如图15所示:

flash8.0制作flv视频的原理与方法 - 迎春 -  

图15

(此图为原图的70%)

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

stop();
var nc = new NetConnection();
nc.connect(null);
var ns = new NetStream(nc);
var myVideo;
myVideo.attachVideo(ns);
ns.play("
http://221.204.206.20/7/47/71/2071225335.0.flv");
rewind_btn.onRelease = function() {
 ns.seek(0);
};

*红色部分为你准备好的视频地址。在第2帧插入帧,上锁。

 

 

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

 

 

 

 

flash8.0制作flv视频的原理与方法 - 迎春 -  

 

图16

 

  8.存盘

 

    *说明:

    当测试中不显示效果时,不要着急,你上传发表后就会显示其效果了

------分隔线----------------------------
标签(Tag):flash flash实例教程 flash源代码 flash基础教程 flash技巧
------分隔线----------------------------
推荐内容
猜你感兴趣