注册 | 登录

游侠NETSHOW论坛





游侠NETSHOW论坛 游侠NETSHOW论坛 赛车/竞速游戏综合讨论区 !Flash快速制作GIF动画教程!
查看: 17083|回复: 50

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

帖子
11289
精华
0
积分
5756
金钱
6299
荣誉
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,还没功夫去下载~~
25.JPG



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


1.JPG



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


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


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

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

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

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

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



这一步什么都不用动!直接下一步~
5.JPG


到了这里就很关键了!

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


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

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


好了,下一步后,点击完成!
开始导入……数十秒就可以完成!
8.JPG


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

9.JPG


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

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

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


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

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

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


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


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



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

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

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

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

品质输入100!!其他不用管,确定!开始导出!
15.JPG


可以看见导出的图片。
17.JPG



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

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


这里按是,Flash会自动导入所有文件名相近而后面数字相差1的所有文件!
19.JPG


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


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

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

把时间轴定在第一帧,然后利用热键“,”和“.”来进行帧的单帧前后移动,按“.”慢慢往前推,凡是发现按下去画面却没变化的就是两帧相同的,这时候用热键“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!
21.JPG


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

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

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

点击“文件-发布设置”
22.JPG


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

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


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

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

24.JPG


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



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

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

[ 本帖最后由 MZJC 于 2008-5-29 17:46 编辑 ]
已有 1 人评分金钱 收起 理由
huanqiang + 40 + 2 文章不错,继续努力!

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


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

使用道具 举报

游侠资深版主
『竞技体育区』
★★★★★

元老版主勋章版主勋章资深版主勋章大头像勋章

帖子
4182
精华
5
积分
3303
金钱
56333
荣誉
21
人气
17
评议
0

发表于 2008-5-29 17:23:28 |显示全部楼层

使用道具 举报

帖子
1360
精华
0
积分
680
金钱
1790
荣誉
0
人气
0
评议
0
发表于 2008-5-29 17:24:25 |显示全部楼层
超强普及帖 ,挺你 ...........................
每年都有不同的惊喜

使用道具 举报

帖子
629
精华
0
积分
315
金钱
2593
荣誉
0
人气
0
评议
0
发表于 2008-5-29 17:32:24 |显示全部楼层
不错~!好好学习,立地成佛,

使用道具 举报

南蛮军 侦察兵 咒符
密尼斯特级魔使

帖子
4048
精华
1
积分
2494
金钱
7734
荣誉
27
人气
2
评议
0
发表于 2008-5-29 17:32:50 |显示全部楼层
很详细..........................



带尼玛xlive的游戏都不玩擦

使用道具 举报

帖子
339
精华
0
积分
170
金钱
579
荣誉
0
人气
1
评议
0
发表于 2008-5-29 17:38:53 |显示全部楼层
好贴,正在学习中

使用道具 举报

帖子
78
精华
0
积分
39
金钱
835
荣誉
0
人气
0
评议
0
发表于 2008-5-29 17:46:26 |显示全部楼层
详细的教程!!
感谢楼主提供。
学习了~

使用道具 举报

帖子
44
精华
0
积分
22
金钱
106
荣誉
0
人气
0
评议
0
发表于 2008-5-29 17:47:03 |显示全部楼层
好文 我也学习。
我现在用fraps录 kmplayer批量截取,Ulead GIF导入,导出.傻瓜一点 简单一点。考虑也用不用写篇教程了。

2140
2G
8600GT
320G

使用道具 举报

帖子
609
精华
0
积分
305
金钱
4554
荣誉
0
人气
0
评议
0
发表于 2008-5-29 17:49:13 |显示全部楼层
有空再錄一個...
ls的頭像有趣.!!

使用道具 举报

帖子
11289
精华
0
积分
5756
金钱
6299
荣誉
11
人气
11
评议
0

发表于 2008-5-29 17:53:50 |显示全部楼层
原帖由 laid 于 2008-5-29 17:47 发表
好文 我也学习。
我现在用fraps录 kmplayer批量截取,Ulead GIF导入,导出.傻瓜一点 简单一点。考虑也用不用写篇教程了。


写哟~~教程是多多益善,让不同层次的人选择~~~~~
要是写出来了我也要看看~~~~按需选择~~

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

使用道具 举报

帖子
5770
精华
0
积分
2915
金钱
909
荣誉
3
人气
0
评议
0
发表于 2008-5-29 18:05:44 |显示全部楼层
很好,游侠就是这种帖子少了点,虽然和游戏无关......
战神是欧美ACT?????那是对战神的侮辱!!!
所以世界上有3类ACT,欧美ACT,日式ACT,,战神......

使用道具 举报

帖子
2433
精华
0
积分
1217
金钱
2978
荣誉
0
人气
0
评议
0
发表于 2008-5-29 19:10:39 |显示全部楼层
这...........莫非.....................是我的头像................哈.............支持....但是我还是用另一个软件...
主板:映泰 P965 775Abc   
CPU:Intel Core 2 Duo E4300(盒)
内存:金丝顿 1GBDDR667 X2  
显卡:蓝宝石 X1950XT 256M
电源:航嘉服务器电源 350W


NBA2K9

使用道具 举报

安伯沙德级魔使
TimeShift☆穿越时空Crossbow

帖子
8826
精华
0
积分
4453
金钱
1756
荣誉
4
人气
0
评议
0

发表于 2008-5-29 19:18:57 |显示全部楼层
嗯嗯,顶一个,正在学FLASH,但明显差LZN个等级~~~

远景无限,能力有限。

使用道具 举报

帖子
538
精华
0
积分
269
金钱
3927
荣誉
0
人气
0
评议
0
发表于 2008-5-29 19:35:47 |显示全部楼层
原来是“不要盗用”兄弟

先顶一下,再看文章

使用道具 举报

帖子
11289
精华
0
积分
5756
金钱
6299
荣誉
11
人气
11
评议
0

发表于 2008-5-29 20:43:49 |显示全部楼层
原来是“盗用”兄弟

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

使用道具 举报

秒速5センチメートル
呢喃的歌声
红尘飘逸 游骑兵
速攻·點石成金

帖子
6028
精华
2
积分
3792
金钱
667
荣誉
37
人气
84
评议
0

发表于 2008-5-29 20:50:23 |显示全部楼层
图挂了,看不到.外链吧...修复了PM我下

使用道具 举报

帖子
11289
精华
0
积分
5756
金钱
6299
荣誉
11
人气
11
评议
0

发表于 2008-5-29 21:32:19 |显示全部楼层
不……没挂……经常有些图X掉的~~~GRID出来了,赛车版要疯了~~~挤啊~今天发了几次帖都不行

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

使用道具 举报

帖子
266
精华
2
积分
553
金钱
1220
荣誉
2
人气
0
评议
0
发表于 2008-5-30 01:11:53 |显示全部楼层
多謝指點 感謝你的教程
W7-Ultimate+Ati Mobility Radeon HD 4650+Intel Core Duo2 P8800@2.6Ghz*2+SonyHS75P+Ozaki Wood Speaker

使用道具 举报

【刺客信条】攻略组
惡夜的赤龍
黑暗圣斗士 黑暗天龙

帖子
8602
精华
1
积分
4766
金钱
1230
荣誉
26
人气
0
评议
0

发表于 2008-5-30 01:13:32 |显示全部楼层
呵呵 谢谢
  学习学习 到时候用这个弄签名

使用道具 举报

帖子
8325
精华
1
积分
4363
金钱
42
荣誉
0
人气
0
评议
0

发表于 2008-5-30 02:00:09 |显示全部楼层
撞车党出教程啦[哇哈哈]

http://newphoto.1t1t.com/usr/ba/229065/1212315535_0.jpg 天琴909 PMMX166 2MB PCI显卡 32MB内存 1.2GB硬盘 预装Win95、幸福之家

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

手机版|Archiver|游侠NETSHOW论坛 ( 浙ICP备12018679号-4 )

GMT+8, 2019-10-18 03:23 , Processed in 0.338366 second(s), Total 18, Slave 12 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

分享到