黑耀镜の恶魔城

查看: 924|回复: 1

Mike·AJ教你如何做FLASH星光字

 关闭 [复制链接]
发表于 2011-5-5 00:01:48 | 显示全部楼层 |阅读模式
2016-8-12 10:18 编辑 <br /><br />这是我上个月给学生讲的其中一个知识点,现在分享给大家;
首先来个大众化一点的“我爱你”,可以做出来送给你喜欢的人;
下面这个是用恶魔城logo做的,还用到了PS功能;
在开始教学步骤之前,首先要准备2个软件,分别是Flash和Photoshop;
好了,说到这里,肯定会有同学犯愁:我只装了PS,没有用过Flash呀~
咳,其实呢,只用FLASH就可以做到星光字的效果了,用Photoshop只是为了用钢笔工具抠出特殊Logo的字体路径;
于是说到这里就有人不想做了,抓回来问下为什么?“一点欲望也没有哇,我只会PS!!”。更有甚者:“关我*事,出来打酱油的!”想了一下,的确不关他*事,抓错人了!
别急啊,马上到正题了:
第1步
打开FLASH,创建一个ActionScript2.0的文档,在下方的“属性”栏里修改背景颜色为黑色(什么颜色都无所谓,只要跟星光的颜色对比强烈就可以),修改尺寸为550x200像素;然后顺便保存一下文件。
第2步
选择上方菜单“插入”——“新建元件”命令,在弹出的窗口创建一个名字为“Light”的图形元件,单击“确定”之后进入元件的编辑状态。然后选择多角星形工具(在矩形工具的下拉菜单里面最后一个,如图2),然后在右上方的“颜色”面板中,设置填充类型为“放射状”,填充颜色从左到右为白色到黄色(如图1)
                                  图1
                     图2
选中工具后在下方的“属性”栏里找到“选项”按钮并且设置为“星形”(如图3)
                                        图3
然后在黑色舞台中拖出如图4的物体;
                                        图4
第3步
选择“插入”——“新建元件”命令,创建一个名字为“StarLight”的图形文件,
从右下方的“库”的面板中将刚才画好的图形元件“Light”拖入到舞台中,并且使该元件的中心点相对于舞台中心点对齐;
对齐的方法是:打开“对齐”面版(如图5),使物体与舞台中央对齐(先点击图6中的“相对于舞台”按钮,再分别点左面两个红圈的按钮即可);
                                    图5
                           图6
第4步
选择任意变形工具,选中舞台中的元件实例,并且把中间白色的中心点移动到最大的星星的中心点(如图7)
                                          图7
第5步
打开“变形”面板(如图8),在“旋转”文本框中输入90度,输入完毕后先不要按回车,点击“变形”面板右下角的“复制并应用变形”按钮三次(如图9);
                         图8
                   图9
第6步
选择“插入”——“新建元件”命令,创建一个名字为“STAR”的影片剪辑文件,注意是“影片剪辑”,跟之前两个的图形元件不同;
单击确定后进入元件编辑模式,然后从“库”面板中将刚才做好的“StarLight”元件用鼠标左键拖到舞台,并且通过对齐面板中的对齐方式使该元件与舞台中央对齐(跟图6的方法一样)
第7步
分别选中上方时间轴的第10帧和第20帧,分别在这两帧按F6插入关键帧(如图10)。
                                      图10
然后单击第1帧,并且选中舞台的元件实例,在“属性”面板中设置Alpha值为60%(如图11),并在“变形”面板中修改尺寸为原来的50%(如图12,记得点上“约束”);
                                    图11
                      图12
选中第10帧,在“变形”面板中的“旋转”文本框输入10度并按回车确认;
选中第20帧,并且选中舞台的元件实例,在“属性”面板中设置Alpha值为60%,在“变形”面板中修改尺寸为原来的50%;
                                     图13
第8步
如图13所示,分别在第1帧与10帧、第10帧与20帧之间按鼠标右键并选“创建补间动画”,并且选中第1帧后,在下面的“属性”面板中选择“顺时针”旋转1次(如图14),选中第10帧在“属性”面板中选择“逆时针”旋转1次;
                                 图14
第9步
按Ctrl+E回到场景,在左上方位置找到并单击“添加运动引导层”按钮(如图15)添加一个引导图层,并且锁定“图层1”(点右边那把小锁图标即可)。
                            图15
第10步
选中刚添加的引导层的第1帧,用文本工具(跟PS一样有个“T”字样的工具),在舞台中输入你想要的文字部分(下面用Castlevania那个效果为例子继续讲解),并且与舞台中央对齐;
想跳过下面PS步骤的可以直接看第15步;
第11步
由于对自己输入的文字的字体效果不够满意,而且我比较看中其中一张恶魔城海报的标题LOGO,那应该如何把那个海报中的Castlevania标题LOGO拖到FLASH里面编辑成为路径呢,我们可以用上Photoshop的钢笔工具,当然在FLASH里面用钢笔工具抠它的文字路径也可以,这个看大家喜欢;
第12步
打开Photoshop(以下简称PS),并且打开一张带有Castlevania标题LOGO的图片,然后选择钢笔工具,用“路径”模式开始把“Castlevania”的部分抠出来(如图16);
                                     图16
所有字母都抠完之后,按右键选“建立选区”(如图17),并且在弹出的框按确定就能选中刚才你所抠的字母(如图18);
然后按下复制的快捷键Ctrl+C;
                                         图17
                                          图18
第13步
Ctrl+N新建一个透明文档(如图19),并且按Ctrl+V粘贴刚才选中的字母部分(如图20);
然后储存为一个PNG格式的文档;
                                              图19
                                               图20
第14步
回到FLASH,选择“文件”——“导入”——“导入到库”的命令,把刚才储存的PNG图片导进FLASH里面,并且用“任意变形工具”进行缩放调整(如图21)
                                            图21
第15步
选择两次“修改”——“分离”命令,把文字或图片转成矢量图(如图22);
                                     图22
第16步
选择套索工具,并且用左侧工具栏下面的类似PS魔术棒工具选中分离后的图片空白地方,进行删除,没有成功的话多试几次;(如图23、24)
                           图23
                                      图24
第17步
选择“墨水瓶”工具,在刚处理好的文字边缘上填充边框颜色,多出来的部分用“选择工具”选中删除;(如图25、26)
并且可以在右下角打上自己的名字,最终填充完边框的效果如图27所示;
                                       图25
                                            图26
                                              图27
第18步
用“选择工具”把边框里面的填充部分先选中然后删除(如图28)
                                图28
第19步
用“橡皮擦”工具在每个字母或每个线条处擦出一个缺口(如图29、30)
                                         图29
                                       图30
第20步
锁定引导层,解开图层1,并且选中第1帧(如图31);
                图31
从“库”面板中把“STAR”元件拖入舞台并调整大小(如图32),然后把元件放到第1个字母的缺口处(如图33),并且在“属性”面板中的“实例名称”处输入“xing”(如图34);
                                            图32
                                                    图33
                                           图34
选中第20帧,并插入关键帧,然后把“STAR”元件放到第1个字母的缺口另一个端点(如图35、36),在拖动元件之前先把左侧的磁铁按钮点上更方便对齐端点;然后在第1帧和20帧之间插入补间动画(如图37);
                                 图35
                                   图36
                              图37
为了使元件“STAR”能在字母的线条路径上行走,必须用“选择工具”处理好如图38、39的地方,特别是不能出现如图39的3个方向的开叉口;用“选择工具”把鼠标移动到有问题的线条处并且鼠标图标右下角出现一个直角的符号时,就可以按左键拖动线条进行修整;或选中多余的线条后按Delete键删除掉;
                                           图38
                                        图39
第21步
在第21帧插入关键帧,然后把元件“STAR”放到第2个字母“a”的缺口其中一个端点上,然后在40帧插入关键帧,把元件“STAR”放到字母“a”缺口的另一个端点上,并且在第21帧和40帧之间下一个补间动画(如图41、42);
                                       图41
                                          图42
第22步
一直重复上面的方法,每隔20帧左右就让元件“STAR”走完一个字母,当走完Castlevania之后,就轮到走名字部分,由于名字的字体比上面的主题要小,所以元件“STAR”也要适当调小,(如图43);
                                             图43
第23步
所有文字走完之后,插入一个新图层(如图44),并且选中第1帧;
                                         图44
第24步
打开“动作”面板(如图45),在右面空白地方输入如图46的指令,注意括号里的数值不是固定的,它是根据你的最长帧数来决定的,比方说我上面为了走完所有的文字而用了440帧,那下面输入指令时,括号里的数值就必须是i<440;而且命令的大小写必须严格按照来输入(如图46);
                                         图45
                                          图46
第25步
输入完毕后,按Ctrl+Enter测试动画效果(如图47);
完成!
                                     图47
需要提醒的是,当到了第20步之后,拖进来的元件“STAR”尺寸最好小一点,否则最终出来的效果不明显,还有就是,如果像第1个字母“C”的线路比较长的话,最好给多点帧数,60帧来走完它就可以了,在FLASH里面,帧数越长,物体移动的时间越长;
附:在FLASH里面,可以通过“文件”——“发布设置”来输出swf格式的文档;
然后通过第三方软件来把这个swf格式转换成“Gif”文档格式,可以用来做GIF签名哦。
最后送上代码,复制过去即可,除了括号里面的数值可能要改;
i = 0;
this.onEnterFrame = function() {
if (i<480) {
this.xing.duplicateMovieClip("xing"+i, i);
++i;
}
};

发表于 2011-5-5 08:38:09 | 显示全部楼层
2016-8-12 10:18 编辑 <br /><br />小A兄  好久不见

*滑块验证:
您需要登录后才可以回帖 登录 | 注册

本版积分规则

Archiver|手机版|小黑屋|主页

GMT+8, 2024-4-20 16:37

Powered by Discuz! X3.4

Copyright © 2003 CVCV.NET. all rights reserved.

快速回复 返回顶部 返回列表