！Flash快速制作GIF动画教程！ [复制链接]

MZJC

帖子: 11287
精华: 0
积分: 5756
金钱: 6309
荣誉: 11
人气: 11
评议: 0

电梯直达

楼主

发表于 2008-5-29 17:14:19 |只看该作者 |倒序浏览

应某坛友的要求，写了这篇小教程，GRID正式版出来了，想不到我竟然在码字…………
写到晚上3点多，而且鉴于以前深夜发帖必沉的经验，而且困，而且还有很多要修改，而且……没有而且了~~所以暂时不发，先去死力普了……

先说明一下，这个不是Flash教程，我只是将用Flash把视频编缉转换成gif动画的过程写出来，当然也会提及一些Flash的知识，但都是很片面地，仅仅是涉及到制作gif时所需要注意的地方，Flash动画博大精深，有兴趣的可以自己去学习……

用Flash把视频转成gif不像那些专门转换GIF的软件那么“傻瓜式”，那些软件很方便，但Flash里的可操作性和可编辑性不是那些软件可以比美的，也就比较复杂一点，所以选不选择用Flash制作、看不看这教程就按你自己的需求来决定了！

我用的Flash版本是CS3 Professional，就是俗称的“FLASH 9.0”，满大街都有下载的…………现在已经有CS4了，就是10.0，还没功夫去下载~~

第一步：导出所有帧画面
好，开始了！开始当然是先运行Flash了……
新建一个新文档，这里的ActionScript有2.0和3.0，这涉及到的是Flash的脚本代码，和gif制作无关……我以前弄旧版本的Flash用的是2.0，所以我一般都是选择2.0，虽然无关，但尽量一致……

点击“文件-导入-导入视频...”

在“文件路径”处点击“浏览”，选择你想转换的视频。

选择“在SWF中嵌入视频并在时间轴上播放”

Flash小常识
SWF
SWF就是Flash输出的动画文件格式，平时在网页上看见的Flash动画都是以swf格式放置在页面上的。因为Flash使用的是矢量图，矢量图的特点就是数据就只有线条节点和颜色这些数据，画面是根据这些数据即时生成的，所以怎么放大都不会失真。而动画方面就保存线条节点的移动路线之类的数据，播放时画面也是根据这些数据即时生成的，所以拥有很丰富的动画内容的swf文件也只需要数十到数百kb就可以保存了。还可以通过ActionScript脚本代码实现很多功能，例如网页上面的链接等等……

而点阵图（jpg、bmp、png等等这些图片文件就是点阵图）每一个像素的色彩都需要保存，百万级千万级的像素的图片就需要保存百万千万的色彩，所以通常一张点阵图文件就足以相当于一个内容丰富的swf文件了……所以相对起来swf体积非常非常小，便于网络传播，而且因为点阵图是通过像素色彩来显示图像，所以放大会看到明显的马赛克，那些就是放大的像素点，一个格子就是一个像素的色彩，放大后看见的就是那些东西，画面会严重失真。但矢量图不同，因为矢量图是以线条节点和颜色编号这两个简单的数据来决定画面上显示的图案，不用逐个像素信息保存，就像上面所说的画面都是即时生成的，不管怎么放大，线条形状始终都是不变的，如何放大都不会失真就是这个原因。

但是矢量图也有缺点，就是因为保存的颜色数量很少，一般一个swf只有数十或数百种颜色，所以画面不能像点阵图那样丰富，显示照片这类的画面就不行了……

而需要做出导入视频这样的动画都是将每帧的视频画面转换成点阵图然后连续播放的，这样保存的swf就包含了超级多的点阵图数据，所以这样的swf就会大很多了~~

这一步什么都不用动！直接下一步~

到了这里就很关键了！

点击“视频”选项卡，这里有些要注意的……
1、品质选“高”。因为现在仅仅是为了导出每帧的图像，稍后的导出gif时画质会再次削减，为了减少画质损失，目前导出的这一步输入品质选“高”。
2、帧频很重要，这将决定你导入的视频的流畅度。注意我所说的不是播放快慢的意思，而是如果你在导入这一步把帧频设得很低，那么导入的帧数将会很少，反之设得高一点，导入的帧数将会多得多，动作细节也会更多。这里一般设置成18左右就可以了。为什么不设得更高后面会解释。

然后是“裁切与调整大小”选项卡，注意这里的“调整大小”会决定输入后的画面的原始大小，就是说即使是尺寸为1920*1200的视频，都可以在这里让一开始输入的画面缩到自己想要的尺寸，这样还有另一个好处，这里调整的尺寸越小，导入的速度也会相应的加快，而且进入编缉的时候系统资源的占用也更少。

左边的“裁切”不用说都知道是干什么的了，一般很少用得上，但有用的时候就用吧，朕批准！

好了，下一步后，点击完成！
开始导入……数十秒就可以完成！

导入后可以在时间轴上看到，我的这段视频被转换成了108帧图像，但现在视频是一个整体，无法单独编缉和删减，这时候就要把这段视频每一帧图像都分离出来……当然不会让你手动一帧一帧的保存……那样搞法我早就“傻瓜式”去了……

Flash小常识！
时间轴
时间轴就是上面那行有刻度的“尺子”，时间轴上可以对所有帧进行添加删除和调整次序，图层次序也是在这里操作的。

时间轴上的帧分几类
关键帧：就是有一个小圆点的格子，这是最重要的，画面内容就在这里面！
普通帧：格子上什么都没有的格子，普通帧的内容和所连接的头一格关键帧的内容是一样的，也就是说仅仅是把关键帧拉长，让播放的时候在更多的时间停留在同一画面上。也就是说，其实这就是和前面的关键帧是同一帧！只不过被拉长了。
帧结尾：有个小长方形的格子，这个就是将关键帧延长的的普通帧的结尾，这个就标志这一帧的内容播放完了，从舞台上消失！

还有可以看出一部分是白色的，那就是没有任何内容的帧，关键帧圆点是空心的，有内容的是灰色的，关键帧圆点是实心的。

还有几种帧例如“补帧”之类的动画帧，对于GIF制作没什么用，所以就不说了。

导出前还要先处理一下。
你会注意到，视频画面周围还有一大圈白色的，没错~~那里是就是Flash动画的显示范围，俗称“舞台”，舞台的默认尺寸是550*400，而导入的视频尺寸比这个尺寸小，如果就这样直接导出，每一帧图像都会有一圈白的……所以就要舞台的尺寸和视频的画面尺寸一致！

双击时间轴下方显示帧频的范围，会出现文档属性的设置，这里能见到尺寸的宽和高。

但是注意，不要亲手输入数值来设置，因为现在图片是在舞台中央，而不是左上角，如果你手动输入尺寸，那么舞台缩小了你的视频位置却还在原位，就会变成这样。

所以现在你要做的就是点选“内容”单选项，Flash系统会自动根据你现在舞台上所有的内容的尺寸进行设置，这样就可以不费吹灰之力地把所有白边解决掉了！
你应该看到下面还有一个帧频，因为现在仅仅是进行图像导出，还没到做动画的步骤，所以这个暂时无视！点击确定！

现在可以看到画面上只剩下视频的了~

这时候点击“文件-导出-导出影片”。在“保存类型”处选择“jpeg序列文件”，别选错了！

这里严重要注意，一定要建一个文件夹专门来放这些图片，因为一执行导出就会一次性创建所有帧的图片，一个图片就是一个文件，就是说会一次性出现上百或数百个图片文件，你如果不好好摆……哼哼哼……自己收拾吧……

文件名稍微注意一下，你输入的文件名在导出时会自动在你输入的名字后加4位数的序列编号，就是说如果你输入“1”，那么第一个文件名就会是“10001.jpg”，第二个“10002.jpg”，如此类推~~

品质输入100！！其他不用管，确定！开始导出！

可以看见导出的图片。

第二步：剔除多余帧
这时候再新建一个文档，然后点击“文件-导入-导入到舞台...”

选择序列图片的第一个文件。

这里按是，Flash会自动导入所有文件名相近而后面数字相差1的所有文件！

导入后可以看见时间轴上每帧图片都独立占有了一个关键帧，这样就可以进行单独的编辑和删减了，不过这里我们要做的也只不过是删减多余的垃圾帧而已……

以下是纯文字描述，因为没什么图好贴的……

考功夫和眼力的时间到了！！这里开始逐帧的检查找出多余的帧删除掉！当然如果用鼠标来一帧一帧的按时很慢的，而且会很累……所以这时候要利用热键了！

把时间轴定在第一帧，然后利用热键“,”和“.”来进行帧的单帧前后移动，按“.”慢慢往前推，凡是发现按下去画面却没变化的就是两帧相同的，这时候用热键“Shift+F5”来直接删除该帧！如果删除后画面又定住那就可能使产生了3个相同的帧，把同样画面的帧删除到剩下一个就可以了！

可能会有人问：那些多余的帧反正也是要删除的，为什么不在导出图片后直接把没用的图片删掉？而还要把多余的导入后再删除？

你可以试一下这样做……但我保证绝对会让你苦不堪言！

你看着一大堆图片，而图片都相差一点点而已，你怎么能确切看得出来哪张是和上一张内容一样？
而且还有一个原因是关于Flash的特性，别忘了，即使是多余的帧，也占用了一个序列编号，你在中间把没用的帧删除了，那么这个序列就断开了，而Flash就不能一次导入所有图片。

例如有编号1到9的帧，你把5删除了，那么这个序列就会变成1-4和6-9两个序列，Flash导入的时候只会把1-4的导入进去，而6-9你需要另外再操作一次来导入，这样也不算严重~也就是操作两次。但如果2、4、5、8都是多余帧，都删除，那这个序列就会支离破碎……你一个一个的导入吧……
这还是9个帧的情况而已，如果是数百个帧序列被你切的稀巴烂的情况……

“清洁”完毕后，面对经过努力选出来的这么干净的帧是不是很有成就感呢？这时候可以把时间轴定在第一帧，直接按Enter来预览播放！因为Flash默认的帧频是12，所以可能会卡，慢动作一样，这时候就又要双击时间轴下方的帧频范围了，再次打开文档属性！

先点上“内容”，原因已经知道了。
然后把下面的帧频填一个高一点的数值，这里就不用老是烦恼“延迟多少”啊之类的问题了！直接明确地指明我要的FPS是多少！一般导入时使用18fps的话，实际播放就用15fps就ok了，为什么不用18？因为导入的时候是把很多多余的帧都导入进来，而你清理过后帧数已经减少了很多，还按照18fps的速度来播放一般都是像快镜头一样的，所以稍减到15！

这里就要解释一下为什么导入时不输入更高的数值。因为IE核心的不争气，IE和IE核心的浏览器在播放高帧频gif图片的时候都会卡！很恶心地卡！所以导入时设置为18，实际播放时设置为15，就可以避免IE核心浏览器播放时发生的恶心事情！100%的速度来播放你的gif！

不必担心15太低会卡！实际出来看看你就知道是什么效果了！

第三步：输出GIF！
好了，已经接近尾声了！接下来到另一个重要的地方了，gif的输出设置！

点击“文件-发布设置”

在出来的对话框里把类型的“Flash”的勾去掉，“HTML”也会随着消失。上面说过，网页上的FLASH动画都是swf，没有swf也就不存在输出到HTML上了~~

然后勾选“GIF图像”，上面就会出现“GIF”选项卡。这时候先选择GIF后面的小文件夹来选择输出路径，因为Flash对于一次也没有保存的文档，发布的内容会直接送往Flash的软件目录，而保存了后，发布时必定保存在你保存的Flash源文件同一目录，这里就算没保存，都可以直接选择输出路径。当然你可以先保存文档，嗯~这是好习惯……

点击“GIF”选项卡，首先把“回放”选为“动画”，不然输出时只会输出当前你所见到的那一帧。下面的“调色板类型”选择“最合适”，下面的255不用管，改了也没什么作用。

这里还有一个好处，到了这一步，你依然还可以调整输出GIF的尺寸！把“匹配影片”的勾去掉，就可以修改尺寸了！不过这里的高宽是不关联的，最好算好比例后再输入，不然画面会变形~~

设置完毕就直接点击下面的“发布”按钮！

好了，完成了，就那么多~~把作品发上论坛看看吧！

最后要提醒一下，你当然还可以用Flash导入其他的视频来做成gif，但要前提是你的电脑里必须要有对应那个视频的编码的解码器！一般你用任意播放器播放那段视频正常的话就是有解码器了！但是Fraps的编码是独特的，所以需要安装Fraps获得解码器才可以做，你在本机录制地当然有装Fraps，但假设你把视频放到别的机子上制作，那台电脑上也要装Fraps，获得Fraps的解码器，Flash才可以导入视频。

[ 本帖最后由 MZJC 于 2008-5-29 17:46 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

已有 1 人评分	金钱		收起理由
huanqiang	+ 40	+ 2	文章不错，继续努力！

总评分: 金钱 + 40 + 2 查看全部评分

分享0 收藏1

CPU：AMD PhenomII X4 965
主板：GIGABYTE GA-770TA-UD3
内存：DDR3 1600 2GBx4
显卡：GTX570 1280MB GDDR5公版
硬盘：80GB+2TBx3+1.5TB
声卡：CREATRVE Sound Blaster Audigy 2 ZS Series
键盘：Logitech G110
鼠标：Logitech G700

！Flash快速制作GIF动画教程！ [复制链接]

元老版主勋章

版主勋章

资深版主勋章

大头像勋章