收藏本站
 
设为主页
     您的位置:首页资源库动画制作Flash教程
== 资 源 搜 索 ==
 
高级搜索
== 学 习 资 源 ==
操 作 系 统
Windows DOS
Linux Unix
Novell OS/2
办 公 软 件
Word Excel
Access Powerpoint
Outlook Wps
媒 体 处 理
网页制作 动画制作
图片处理 视频处理
媒体播放 音频处理
课件制作 其它……
网 络 工 具
网页浏览 下载工具
FTP 工具 邮件工具
网络安全 服 务 器
联络聊天 其它……
工 具 软 件
压缩工具 系统工具
文件工具 磁盘工具
病毒防治 阅读工具
测试工具 程序设计
== 素 材 资 源 ==
GIF动画 Flash动画
按钮图库 图标图库
线条图库 背景图库
创意图库 音频素材
== 教 程 下 载 ==
 
神秘字效果

作者:pcking/ 5D多媒体

 

自从有了 flash,我们的网络世界就变得丰富无比,放眼望去,从游戏,mtv到整个网站效果,无不打上了flash的鲜
明印记!但不要忘了,文字是互联网世界的主要组成部分,想过怎样用flash做出个性十足的文字效果吗?你可能会说
用swish不是能很轻松做出各种绚目的文字动画吗?但是要知道这是个性的时代,雷同不是我们的主张,
张扬你的个性,飞扬你的flash,展开你的想象,对了,这就是对闪客们真正重要的--创意!

这个文字特效的灵感来自于一则电视广告,神秘而紧张,值得大家好好玩味。每次用百页窗效果显现一个字,
又以百页窗效果使这个字隐去,接着是下一个字,如此循环。适用于网站片头,mtv或动画短片中名称显示,
若是要做类似黑客帝国那样的紧张,神秘效果,真是最合适不过了。

约定短语:
mc:movie clip动画片段
scene:场景,每个flash都可以有数个场景,并在各个场景中自由的跳转。
as:actionscript,flash专用的程序语言
motion 动画:即形变动画,是flash最基本的动画形式之一。
symbol:元件,flash 动画的重要组成部分,也可将其看flash 舞台上的演员。所有我们看到的动画效果都是由其来体现的。
为了便于阅读,我们将“点击windows菜单,在弹出的下拉菜单中点击panels,在弹出的panels子菜单中单击align选项"定义为windows----panels---align

实现原理:
先画一个很小宽度(比如5pixels)的黑色矩形,将其做成一个宽度从1变化到5的motion动画,利用as的复制功能将其
平铺满整个舞台,将你的文字写好后放在舞台上,并使其位于黑色mc的下面,然后再利用as控制其播放次序,每次只
播放覆盖在一个文字上的mc,这样依次播放,我们就看到了文字的效果。再新建一个movie,在其中利用遮照(mask)制作数据流的效果
将前面所做的文字动画导入,用“数据流动画”作为背景,就达到我们所需要的效果。 本例涉及到的语法说明:
loadmovie
语法:
loadmovie(url[,location/target,variables]));
参数(arguments):
url:用来载入swf文件的相对或绝对url。为了在flash播放器中使用或flash集成环境测试模式下测试,所有的swf文件都必须存储杂同一个文件
夹中,并且其文件名不能包喊文件夹或指定盘符。
target:一个任选参数。它指定已被再如的动画的层,载入的动画承袭它的位置,旋转方向和目标化的电影剪辑的比例尺寸属性。
location:一个任选参数.指定载入的动画的层。
variables:任选参数。它指定一个发送与要载入的动画相关的变量操作。

duplicatemovieclip(target,newname,depth)
参数
target:要复制的movieclip的路径与名称
newname:复制出的movieclip唯一的名称
depth:景深

setProperty,在movieclip播放时设置其属性。
语法:
setProperty(target,property,expression)
参数
target:要设置属性值的movieclip的路径与名称
property:待设置的属性
expression:待设置的属性值
实例
setProperty("xxx",_x,100)
将xxx的x座标设为100

telltarget
语法:
telltarget(target);{
statement;
}
target:指定时间轴线的目标路径字符串
statement:目标时间轴线代码

制作方法:
1。打开你flash,file--new,新建一个flash 动画.modify---movie,在弹出窗口中定义此动画大小为150*70,背景色为深蓝色。(如图1)

insert---new symbol...新建一个movie clip元件,
命名为kuang,选择rectangle tool,拖动鼠标画一个矩形,windows---panles---info,在弹出的info面板中设置其高为70,宽为5。windows---panles---fill选择填充色为黑色。
windows---panles---align,设定其居中对齐(即位于舞台中央)。

2。新建一个symbol,命名为grid,从library中拖拽kuang元件到舞台上,windows---panles---align,在弹出的align面板中设定对齐,使kuang位于舞台中央。(如图2)


右键单击时间轴第2帧,insert keyframe建立关键帧,同样在第20,30,45帧建立关键帧。单击第20帧,windows---panles---info,在弹出的info面板中设置
元件的高为70,宽为1,(如图3)

用同样的方法可将第30帧中的kuang元件宽度变为5,高不变。现在我们可以来建立motion 动画了,右键单击从第2帧到20帧间的任意一帧,在弹出菜单中
选择creat motion tween,就建好一段动画,同样在第30到45帧间建立动画。双击第一帧,在弹出的frame actions面板中输入stop();双击第45帧,输入gotoAndPlay (1);
好!我们已经完成了grid动画片段的制作,这段动画的播放效果是:当开始播放时,第一帧就停止运动,直到有as指令使其从第2帧开始播放,在第2帧宽为5像素的矩形到20帧变为了宽为1的线条,并
保持这种状态直到第30帧,而在第30帧宽为1像素的线条到第45帧时又变成了宽为5像素的矩形。并返回第1帧,停止。

3。新建一个symbol,命名为text,在工具栏上选择text tool,输入你想要的文字,例如:黑客。windows---panels---character,在弹出的文字属性面板调整文字大小与字体,
并指定文字为黑色。注意:你应当使文字大小比你的flash影片略小一点(如图4),并使用比较粗的字体。

4。布置元件。回到scene1,从library里拖拽元件text到舞台,点击工具栏的arrow tool,调整text的位置,使其2个问字恰好将舞台2等分。(如果你的的text文字大小与flash 动画大小相差太大,
那么你可以在info面板中调整text的大小,使之令人满意)。(如图5)

insert layer新建一层layer 2,确保layer 2 位于layer 1上面,
你可以用鼠标拖动layer以调整它们的前后关系。从library里拖拽grid到layer2,调整它的位置,使其位于flash影片的最左端,
(如图6)window---panels---instance,在instance面板中设置此mc 的name为"line"

5.编写复制mc的as。
双击layer 1的第一帧,在弹出的frame action面板中输入stop ();
双击layer 2的第一帧,输入如下acion script:
i = 0;
setProperty ("/line", _visible, flase);
a = -5;
while (i<300) {
duplicateMovieClip ("_root.line", "line" add i, i);
setProperty ("line" add i, _x, a);
i = number(i)+1;
a = number(a)+5;
}


说明:
duplicatemovieclip当动画正在播放是复制一个movie clip。复制出的moveclip与被复制的movieclip完全一样,并从第一帧开始播放。

这段as的解释如下:
i = 0;
///给变量i赋值为0
setProperty ("/line", _visible, flase);
///设置name为line的mc元件为不可见,(即我们无法在动画播放时看到它)
a = -5;
///给变量a赋值为-5
while (i<31) {
///当i<31时
duplicateMovieClip ("_root.line", "line" add i, i);
///复制name为line 的mc,新复制出来mc的name为line1、line2......
setProperty ("line" add i, _x, a);
///实质新复制出的mc的x坐标为a
i = number(i)+1;
///变量i被赋值为原来的i值加1
a = number(a)+5;
///变量a被赋值为原来的a值加5
}

我们知道,建立的动画大小是 150像素宽,而每一个grid元件宽5像素,而name为line的
grid元件的x坐标为-5,那么line1x坐标自然就是0...因此我们复制了30个grid元件,正好平铺在整个舞台上。


6。编写控制mc播放次序的as,新建symbol,命名为action,在第一帧建关键帧,windows---panels---frames,在frame面板中给第一帧加上帧标签(frame lable):frist,在第9,10,12,13帧建关键帧,
单击第10帧,window---panels---frame中设置framelable为:a1,
单击第13帧,window---panels---frame中设置framelable为:bbb,在第9,10,12帧分别输入如下as:
第9帧:
j = 0;
第10帧:
if (j<10) {
tellTarget ("_root.line" add j) {
gotoAndPlay (2);
}
} else {
gotoAndPlay ("bbb");
}
j = number(j)+1;
第12帧:
gotoAndPlay ("a1");

语法说明:
if条件选择语句,检验条件并决定下一个将要执行的操作。如果条件为真,则执行if{}中的语句,否则不执行。
语法:
if(condition){
statement;
};
参数:
condition:条件表达式,值为真或假。
statement:当执行if语句或检验条件为真的内嵌语句。

对于以上as的解释如下:
第9帧:
j = 0;
///给变量j赋值为0
第10帧:
if (j<10) {
tellTarget ("_root.line" add j) {
gotoAndPlay (2);
}
///当j<10时,name为line+j(即line1、line2、line3...)的mc开始从第2帧开始播放。
} else {
gotoAndPlay ("bbb");
}
///当j>10时跳转到帧标签为bbb的帧继续播放
j = number(j)+1;
///变量j被赋值为原来的j值加1
第12帧:
gotoAndPlay ("a1");
///跳转到帧标签为a1的帧播放。

在第43,44,46,47帧建立关键帧,单击第43帧,window---panels---frame中设置framelable为:a2,设置第47帧的 framelable为ccc。
并输入如下的as:
第43帧:
j = 0;
第44帧:
if (j<10) {
tellTarget ("_root.line" add j) {
gotoAndPlay (2);
}
} else {
gotoAndPlay ("ccc");
}
j = number(j)+1;
第46帧:
gotoAndPlay ("a1");

在第75帧新建关键帧,输入
gotoAndPlay ("first");

流程说明:(如图7)

我们想要做的是,将一个字从左至右用百叶窗效果逐渐显现,又用百叶窗效果逐渐逐渐隐去,因此我们应当控制复制的30个gird
顺次拨放,所以设置一个从第10帧到第12帧的循环,以使得我们可以每隔一帧就播放一个grid元件。但还有个小问题,我们要求的是一次只有一个字出现在屏幕上,
这就要多加一个as控制使遮盖第一个字grid元件完全拨放完后,才开始播放遮盖第二个字grid元件。也就是说先播放前15个grid元件,等它们全部拨放完毕后,再开始
后15个grid的播放。而我们知道每一个gird元件的长度是45帧。从开始拨放第1个grid 到第15个,中间的循环过程用掉15帧,因此应当在循环完成后再等45-15=30帧开始
播放从第16到31个grid元件。所以我们在第43帧开始做地2个循环,并且直到第73帧才完成第二个字上grid元件的播放。

7。回到scene1,从labrary中拖拽action元件到layer1,ctrl+enter,看看效果,是不是很绚?file---export movie,选择文件类型swf,
文件名为:“text",点击保存,发布flash动画。(如图8)

8.file--- new,新建movie,modify---movie,设置宽为400,高为300,背静色为黑色。(如图9)

新建symbol,命名为“数字”,在工具栏上选择
text tool,进入输入文字状态,然后你可以狂敲你的键盘,随意输入一段文字,并使其如图排列。(如图10)

windows---panels---charcater,character面板
上设置颜色为深绿色,文字大小为12pt。

9.新建symbol,命名为“绿色”,在工具栏上选择rectangle tool,stroke color为none,fill color为深绿色,画一矩形,
windows---panels---info调整矩形大小,使之宽为10,高为400。windows---panels---align,align面板设置其对齐属性,使其位于舞台中央。
windows---panels---fill,在 fill面板的下拉框中选择填充方式为:liner gradient(线形渐变)。如图设置渐变色(如图11)。

在工具栏上选择
fill tool,在工具栏下方选择transform fill工具,鼠标单击绿色矩形,此时出现旋转渐变色与拉伸渐变色的图标,(如图12)

将渐变填充方向旋转90度,并恰当改变填充范围,使最终效果如图所示。(如图13)

10.新建symbol,命名为“数据流”,windows---library,从library 中拖拽元件“数字”到layer1,设置位置使其位于舞台中央,在第30帧新建关键帧。insert layer新
建layer2,拖拽 layer2使layer 2位于layer1下层。从library 中拖拽“绿色”元件到layer2,将“绿色”元件的最下端与“数字”元件最上端对齐。在第30帧新建关键帧,
将“绿色”元件的最上端与“数字”元件最下端对齐,鼠标右键单击layer 2上从第1帧到第30帧间任意一帧,creat motion tween, 创建动画。
鼠标右键单击layer1 层,在弹出菜单中选择mask。(如图14)

11.新建symbol,命名为“text”。回到scene 1,从library 中拖拽“数据流”元件到layer1,并复制出4个,分散放置在舞台上。insert layer,新建layer 2,
从library 中拖拽“text”元件到layer2,放置在舞台中央。(如图15)

选中”text"元件,windows---panels---instance,在弹出的instance面板中设置
name属性为:text。(如图16)

12.双击layer 2的第一帧,在弹出的frame actions 面板输入如下as:
loadMovie ("text.swf", _root.text);
///将text.swf文件调入name属性为text的元件内(要注意的是"text.swf"的路径)
setProperty ("_root.text", _xscale, "100");
///设置name属性为text的元件宽度不变(即为100%)
setProperty ("_root.text", _yscale, "100");
///设置name属性为text的元件高度不变(即为100%)

到此为止我们完成了这个神秘效果的制作,你可以发布动画,查看结果了。
最后想给爱好flash的朋友们一点小建议:我们生活在一个缤纷的年代,网络在变,技术在变,一切都在飞速改变,唯一不会改变的是创意,
是的,我总在强调这一点,因为我希望大家不要总是束缚自己的思想,总是重复雷同的设计,展开你想象的翅膀,用欣赏的眼光来观察这个
世界,你会发现,这就是灵感的源泉

[上一页] [下一页]

 

Copyright © 2001-2002 东莞中学信息技术科 All Rights Reserved
IE4.0 or later / 800*600  For The Best View