网院部落

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
楼主: neil

为想学习FLASH、PHOTOSHOP者发放教程!!!

[复制链接]

29

主题

1163

回帖

8万

积分

新手上路

积分
82962
 楼主| 发表于 2004-3-21 12:34:49 | 显示全部楼层
Flash实现物体运动的三种方法  现在用Flash开发的游戏是越来越多了。很多朋友也很想学习用Flash制作游戏的方法。大家知道,不管在什么游戏中,实现物体的运动是游戏的前提,而不同的游戏里物体移动的方式又不尽相同。所以,想学习制作Flash游戏的朋友今天就先随我一起学学在Flash中实现物体运动的几种方法吧。几种方法如下:   方法一:通过单击按钮实现物体的单位运动   这种方法一般在需要按键的游戏中使用。你也可以给某个实体加上这段代码,然后通过单击这个实体达到某种游戏效果。   1、打开Flash,按快捷键"Ctrl + M"打开[ Movie Properties ]面板。根据你的要求设置场景大小和背景颜色。   2、按快捷键"Ctrl + F8"新建一个名为Graphic的Graphic符号(Movie Clip符号也行)。   3、按快捷键"Ctrl + R"导入一张动物图片(我导入图片中动物的脸是面向右的,这样是为了移动效果更真实)。你也可以在move影片的场景里随便画个方块或圆圈。不过这样做效果就不太明显了。   4、按快捷键"Ctrl + F8"新建一个名为move的Movie Clip符号,把Graphic符号拖拽到move影片的第1帧中。双击第1帧,输入函数Stop()。右键单击第1帧,选择Copy Frames命令。然后右键单击第2帧,选择Paste Frames命令。   5、选择move影片第2帧中的图片,执行[Modify]→[Transform]→[Flip Horizontal]命令把图片水平翻转。注意:影片在第1帧和第2帧中的位置应该是一样的(用快捷键"Ctrl + Alt + I"打开Instance面板设置图片的X轴Y轴坐标)。   6、回到主场景,按快捷键"Ctrl + L"打开Library后按住鼠标左键把影片move拖拽到场景中。按快捷键"Ctrl + I"打开Instance面板,给move影片起名为mc。   7、单击[Windows]菜单→[Common Libraries]→[Bottons]打开按钮符号库。选择 "(circle)VCR Button Set"中的"gel Left"和"gel Right"按钮,然后把它们拖拽到场景中适当的位置。   8、右键单击"gel Left"按钮,输入如下代码:   on (release) {     tellTarget ("_root.mc") {   //告知电影以被调用,跳转到第2帧       gotoAndStop (2);   //跳转到第二帧后,影片就换了个方向     }   movex = getProperty("/mc", _x);   //将影片在场景中的X坐标值附给movex   vmovex = movex-10;   //以10个像素为单位变动坐标值,实现物体的移动。   setProperty ("/mc", _x, movex);   //重新定义影片的'_x'坐标属性   }   9、右键单击"gel Right"按钮,输入如下代码:   //单击此按钮,跳转到第1帧。实现图片地翻转   on (release) {   //以下代码含义参考上面     tellTarget ("/mc") {       gotoAndStop (1);     }   movex = getProperty("/mc", _x);   movex = movex+10;   setProperty ("/mc", _x, movex);   }   以上两段代码是用来控制物体左右运动的。至于控制物体垂直方向运动的代码可以结合"方法二"自己编写。最终效果如图1。   另外,你可以通过"onClipEvent (mouseDown){ }"语句实现单击鼠标左键实现物体的单向运动。"{ }"中添加的代码参考"方法一",很简单的,篇幅关系我这里就不多说了。但是"方法一"的设计还有一些不完美。这些我们将在"方法二"中解决。
回复

使用道具 举报

29

主题

1163

回帖

8万

积分

新手上路

积分
82962
 楼主| 发表于 2004-3-21 12:35:09 | 显示全部楼层
方法二:通过敲击方向键实现物体的单位运动   这种方法在游戏中是经常被使用到的,尤其是RPG游戏,学会它是设计RPG和其它很多游戏(如俄罗斯方块)的基础。实例中用的是小键盘的方向键,你有可以把它改成其它键,做出各种你想要的效果。   1-5步同"方法一"。   6、右键单击move影片第1帧中的Graphic图片(是右键单击图片,不是帧),选择Actions命令。输入如下的代码:   onClipEvent (keyDown) {  //当键被按下后执行下面的语句   if (Key.getCode() == Key.LEFT) {    //如果击键为'←'键就告之影片跳到第2帧执行。实现图片地翻转    tellTarget ("/mc") {     gotoAndStop (2);    }   }   if (Key.getCode() == Key.RIGHT) { //如果击键为'→'键就执行下面的语句    width = getProperty("/mc", _width); //把影片宽度附值给变量width    movex = getProperty("/mc", _x);    movex = movex+width/10; //以影片宽度的十分之一作为图片移动的单位值    setProperty ("/mc", _x, movex);    }   if (Key.getCode() == Key.UP) { //以下代码含义参考上面    height = getProperty("/mc", _height);    movex = getProperty("/mc", _y);    movex = movex-height/40;    setProperty ("/mc", _y, movex);   }   if (Key.getCode() == Key.DOWN) {    height = getProperty("/mc", _height);    movex = getProperty("/mc", _y);    movex = movex+height/40;    setProperty ("/mc", _y, movex);    }   }   7、右键单击第2帧中的move影片,选择Actions命令。输入如下代码:   onClipEvent (keyDown) { //以下代码含义参考上面   if (Key.getCode() == Key.LEFT) {    width = getProperty("/mc", _width);    movex = getProperty("/mc", _x);    movex = movex-width/10;    setProperty ("/mc", _x, movex);   }   if (Key.getCode() == Key.RIGHT) {     //如果击键为'→'键就告之影片跳到第1帧执行。实现图片地翻转    tellTarget ("/mc") {     gotoAndStop (1);    }   }   //还有两段控制图片上下运动的代码同上   }   8、回到主场景,按快捷键"Ctrl + L"打开Library后按住鼠标左键把影片move拖拽到场景中。按快捷键"Ctrl + I"打开Instance面板,给影片move起名为mc。   这样,影片就可以做上下左右的运动了。不相信你可以按小键盘上的方向键试试看。最终效果如图2。不过大家又发现一个问题,就是实体一直往一个方向移动的话,然后就会跑的无影无踪。那怎么办呢?别急,让我们再给实体加上下面一段代码,让实体出不了边界:   右键单击move影片第1帧中的Graphic图片,然后在"movex = movex+width/10;"代码下添加如下代码:   if(movex>=300-width){ //假设影片的场景宽度为300;    movex=300-width; //这样设置是因为场景是以左上角的点为(0,0)点的   }   右键单击move影片第2帧中的Graphic图片,然后在"movex = movex-width/10;"添加如下代码:    if(movex<=0){    movex=0;    }   在垂直方向运动的代码你可以自己写了吧,我这里就不说什么了。   影片中,你也可以把图片换成动画。如果你想自己做人物动画(如果你自己不会画的话,就把GIF动画拆下来用。明白嘛!),你可以制作8张图片,两个一组,前后左右方位的共四组,然后在影片中再增加几帧就OK了(大家可以自己探索一下)。这样就不会象导入Gif动画后影片一直动个不停了
回复

使用道具 举报

29

主题

1163

回帖

8万

积分

新手上路

积分
82962
 楼主| 发表于 2004-3-21 12:35:30 | 显示全部楼层
方法二:通过敲击方向键实现物体的单位运动   这种方法在游戏中是经常被使用到的,尤其是RPG游戏,学会它是设计RPG和其它很多游戏(如俄罗斯方块)的基础。实例中用的是小键盘的方向键,你有可以把它改成其它键,做出各种你想要的效果。   1-5步同"方法一"。   6、右键单击move影片第1帧中的Graphic图片(是右键单击图片,不是帧),选择Actions命令。输入如下的代码:   onClipEvent (keyDown) {  //当键被按下后执行下面的语句   if (Key.getCode() == Key.LEFT) {    //如果击键为'←'键就告之影片跳到第2帧执行。实现图片地翻转    tellTarget ("/mc") {     gotoAndStop (2);    }   }   if (Key.getCode() == Key.RIGHT) { //如果击键为'→'键就执行下面的语句    width = getProperty("/mc", _width); //把影片宽度附值给变量width    movex = getProperty("/mc", _x);    movex = movex+width/10; //以影片宽度的十分之一作为图片移动的单位值    setProperty ("/mc", _x, movex);    }   if (Key.getCode() == Key.UP) { //以下代码含义参考上面    height = getProperty("/mc", _height);    movex = getProperty("/mc", _y);    movex = movex-height/40;    setProperty ("/mc", _y, movex);   }   if (Key.getCode() == Key.DOWN) {    height = getProperty("/mc", _height);    movex = getProperty("/mc", _y);    movex = movex+height/40;    setProperty ("/mc", _y, movex);    }   }   7、右键单击第2帧中的move影片,选择Actions命令。输入如下代码:   onClipEvent (keyDown) { //以下代码含义参考上面   if (Key.getCode() == Key.LEFT) {    width = getProperty("/mc", _width);    movex = getProperty("/mc", _x);    movex = movex-width/10;    setProperty ("/mc", _x, movex);   }   if (Key.getCode() == Key.RIGHT) {     //如果击键为'→'键就告之影片跳到第1帧执行。实现图片地翻转    tellTarget ("/mc") {     gotoAndStop (1);    }   }   //还有两段控制图片上下运动的代码同上   }   8、回到主场景,按快捷键"Ctrl + L"打开Library后按住鼠标左键把影片move拖拽到场景中。按快捷键"Ctrl + I"打开Instance面板,给影片move起名为mc。   这样,影片就可以做上下左右的运动了。不相信你可以按小键盘上的方向键试试看。最终效果如图2。不过大家又发现一个问题,就是实体一直往一个方向移动的话,然后就会跑的无影无踪。那怎么办呢?别急,让我们再给实体加上下面一段代码,让实体出不了边界:   右键单击move影片第1帧中的Graphic图片,然后在"movex = movex+width/10;"代码下添加如下代码:   if(movex>=300-width){ //假设影片的场景宽度为300;    movex=300-width; //这样设置是因为场景是以左上角的点为(0,0)点的   }   右键单击move影片第2帧中的Graphic图片,然后在"movex = movex-width/10;"添加如下代码:    if(movex<=0){    movex=0;    }   在垂直方向运动的代码你可以自己写了吧,我这里就不说什么了。   影片中,你也可以把图片换成动画。如果你想自己做人物动画(如果你自己不会画的话,就把GIF动画拆下来用。明白嘛!),你可以制作8张图片,两个一组,前后左右方位的共四组,然后在影片中再增加几帧就OK了(大家可以自己探索一下)。这样就不会象导入Gif动画后影片一直动个不停了
回复

使用道具 举报

29

主题

1163

回帖

8万

积分

新手上路

积分
82962
 楼主| 发表于 2004-3-21 12:35:50 | 显示全部楼层
方法三、通过鼠标拖拽和点击实现物体的任意运动   拖拽方法的实现是很简单的,但它在游戏中的运用却是很广泛的。如拼图,推箱子,打老鼠,棋类等游戏都要用到这种方法。   新增一个名为"mc"的影片。然后右键单击鼠标输入下面的代码即可:   onClipEvent (mouseDown) { //当鼠标按下时执行下面代码    startDrag (mc); //让影片吸附在鼠标并跟随鼠标一起运动   }   onClipEvent (mouseUp) { //当松开鼠标时执行下面代码    stopDrag (); //影片脱离鼠标   }   这段代码的功能是点击一下鼠标,影片就出现在什么地方。   新增一个名为"mc"的影片。然后右键单击鼠标输入下面的代码即可:   onClipEvent (mouseDown) {    x = _root._xmouse; //把鼠标当前在场景中的X坐标值附值给变量x    y = _root._ymouse; //把鼠标当前在场景中的Y坐标值附值给变量y    setProperty ("/mc", _x, x);    setProperty ("/mc", _y, y);   }   好了,说得差不多了。只要大家掌握了以上几种实体的运动方法,再结合一些其它的Flash制作和编程手段,就一定能开发出属于自己的Flash游戏。在这里,我祝大家在Flash的"康庄大道"上一帆风顺。
回复

使用道具 举报

29

主题

1163

回帖

8万

积分

新手上路

积分
82962
 楼主| 发表于 2004-3-21 12:36:10 | 显示全部楼层
Flash水之特效(三):水泡效果  这个效果运用了一些比较简单的as,希望大家能通过这个特效的学习掌握一些as的运用,并能做到在制作过程中举一反三!   1、新建动画文件,按“Ctrl+M”打开影片属性对话框,设定动画的大小为350×320(将会用到前面制作水波特效的图片,所以尺寸跟前面的一样)背景色选择为蓝色,这样在做下面的水泡mc时有利于识别,单击“确定”。   2、接着做单个水泡,单击“insert→new symbol”(ctrl+f8),在弹出对话框中命名为“bubble”,类型选“movie clip”,点取oval tool画圆工具,画一正圆,无边线。下面进行颜色填充。打开fill面板(在哪里打开不用我啰嗦了吧),选取radial Gradient(注意在选取这个选项之前,一定要用选取工具选取刚才画的正圆),接着进行颜色填充的调整,在缺省情况下,颜色面板中是没有透明颜色的,如何做呢?点取mixer面板,选择白色,在alpha项填入0%,点取面板中右上角小三角形,单击add swatch,将颜色添加到颜色库,这下在fill面板中就可以用透明颜色了,具体的调节也并非用文字可以表述得清的,这得需要一些经验和感觉,假如实在调不出水泡的效果,在我的源文件中直接调用得了,不过最好是自己练练手,以后的作品总不能叫我帮你调吧:)。  3、接着我们要做的就是让这个水泡mc“动起来”。注意这里的动可是引号的哦,也就是要用as来控制mc运动的。好,跟我来做吧。按“Ctrl+f8”打开new symbol对话框,命名为“bubble2”,类型选“movie clip”,从library面板中将bubble拖入,在第3帧按下f5。   4、下面是一些关键的地方,注意看了喔!新建一层,在第一帧按f6,添入如下action script: i = random (100) +random (10); setProperty ("", _y, 350); setProperty ("", _x, random (350) +1); setProperty ("", _yscale, i); setProperty ("", _xscale, i); setProperty ("", _alpha, random (50) +50);   注解:   第一句是定义随机数啦,随机变量以百分比计算;   第二句是设置水泡开始的垂直位置,根据本动画的大小定为350;   第三句设置水泡开始的x位置,数字是决定随机的范围的,为了让整个画面都充满水泡的效果,这里选择了一个较大的值350,当然你也可以根据自己的要求决定;   第三、四句都是根据随机量i来变化水泡的大小,让水泡在水中更有层次感;   第五句是根据随机数设置透明值。使水泡更富于变化。如图一所示: (图二)  5、在第二帧同样添加as如下: setProperty ("", _y, getProperty ("",_y )-i/10);   设置水泡y的位置,让mc垂直升起来,数值10表示移动速度的参数。   6、在第三帧添加as如下: if (getProperty ("",_y )<-50) { gotoAndPlay (1); } else { gotoAndPlay (2); }   注解:   第一句获得水泡mc的位置,并进行判断是否返回重新从底部向上移动。下面几句都是判断后的执行命令 7、ok,关键的水泡“bubble2”做好了,现在回到场景,开始添加背景效果,假如你是从第一个水的特效做起来的,现在就可以从“file->open as library”打开第一个水波特效的源文件,从library面板中拖出seapic这个mc到工作区,具体制作不再累叙,不会就查看第一个特效的制作方法,然后再在这一层上面新建一层,拖出前面花很多功夫制作的“bubble2”到第二层,在场景中的位置随便放,因为这里主要是用as来控制位置变化的!   8、现在在“bubble2”的帧上添加as,注意在添加as之前,我们必须要先定义as控制的对象,这个对象的定义在instance面板中完成,我们现在打开instance面板,选择“buuble2”这个mc,在name栏中填入“bubble”,如图四: (图四) 接着就可以添加as了: bubblenum = 78; while (bubblenum>0) { duplicateMovieClip ("/bubble", "bubble" and bubblenum, bubblenum); bubblenum = bubblenum-1; } stop (); 注解: 设定水泡要复制的个数,不要太少也不要太多,根据自己动画的具体要求决定! 说明一点的是,duplicatemovieclip这个函数命令在实际操作中使用的频率是比较多的,希望一定要掌握!具体语法是duplicateMovieClip(target, newname, depth); target 指要复制的目标电影夹路径. newname 指复制的mc的唯一标识. depth 指mc的深度,所谓深度是指一个确定mc或其他对象交迭时如何显现的堆栈次序. 具体的参看有关语法词典,这里只做提示性指导。操作结果如图五: (图五)  9、按ctrl+enter观看效果,并进行细调。最后将动画导出,呵呵,蔚蓝的水中世界现在在你的手里创作出来了!添加几条金鱼,海马之类,然后再插入一些水泡音效,是不是感觉像神秘的海底啊:)
回复

使用道具 举报

29

主题

1163

回帖

8万

积分

新手上路

积分
82962
 楼主| 发表于 2004-3-21 12:36:30 | 显示全部楼层
Flash特效-文字的电影序幕效果 先新建一个文件。把背景设置为黑色,大小为400 px X 300 px。 选择矩形工具,去除边线,点参数修改器中填充色按钮,进入颜色设置面板,选Gradient渐进色标签,选中黑白线性渐进色,按New按钮新建一个颜色,连续两次把黑色的指针井(Pointer well)拖到渐进色定义条中生成两个新的指针,并将颜色设置为下图中所示: 颜色设置好以后,用鼠标拉出一个矩形来,覆盖住整个电影背景,如下图左所示。用颜料桶工具的把颜色方向调节到如下图右所示,怎么调节不用我多说了吧,忘记怎么做的话再看一下前面的章节。以下显示均缩小50%。 做好以后,把这一层隐藏起来,以免影响我们下面的操作。 新建一个层用于文字。用隶书24号字,什么颜色都可以,只要与背景颜色区分开就行。用适当的行宽写上一段话,例如大家在上面的示例中看到的那段文字。这一段文字的长短无所谓,写好以后恢复显示刚才隐藏的那一层,然后把文字拖到下图左所示位置,按F8键把它转换为图形类图符。 因为要求动画的速度很慢,所以我们在第380帧按F6新建关键帧,并用方向键把文字向上移动到如上图右所示位置。(注意,要想减慢动画的速度有两种方法,一种用减少每秒播放的帧数(fps),另一种是增大总播放帧数。但是减少每秒播放的帧数会导致动画在连续播放时产生跳跃现象,如果想要获得平滑的动画效果,最好还是增大总播放帧数。)在第1帧设置运动渐变。 同样,在下面层的第380帧按F5键保持该层第1关键帧的内容。 下面我们在文字所在层上点鼠标右键,在弹出的菜单中选Mask,把这一层变为遮罩层。奇怪吗?用文字做遮罩层?等一下你就明白了。按Ctrl-Enter预览动画,发现真的实现了电影的序幕效果,现在相信了吧。 想一想为什么用上面的方法就可以实现这个效果呢?那是因为所谓遮罩技术,就是在遮罩层的对象轮廓的范围内显示被遮罩层上的内容。这样在遮罩层的对象移动(这里是文字向上移动)时,被遮罩层里的内容(这里是渐进色)就透过遮罩层里文字轮廓显示出来了,表现为由黑变白再变黑,因为背景是黑色的,所以开始文字隐藏,然后逐渐显现,最后再慢慢消失,于是就得到了这种淡入淡出的效果。 现在觉得这个示例一点也不难做了吧。不过如果我们想让其中的某一些文字显示出别的颜色,同时也和其它文字具有同样的效果,这时该怎么做呢?象上面示例中“新闪光时代”这五个字是用淡黄色显示的,大家能看出是如何实现的吗? 答案也很简单,就是为这几个字再用一次遮罩技术,具体操作如下: 再新建一个层,用文字工具写上“新闪光时代”五个字,这五个字最好和刚才的那些文字具有相同的字体和字号。按Ctrl-L打开图库窗口,编辑我们刚才转换成的图符,用五个空格代替“新闪光时代”这五个字。回到主场景中,在第1帧把新建层上的“新闪光时代”这五个字移到刚才用空格填充的位置上,如下左图所示。同样,在第380帧新建关键帧,再把这五个字向上移动到刚才同样的相对位置上。然后在第1帧上设置运动渐变。 再新建一个层放这五个字的渐进色,把这一层拖到这五个字所在层的下面。还选矩形工具设置填充颜色,和刚才一样,进入渐进色设置面板后,选择刚才我们新建的颜色,按New按钮再生成一个新的颜色,把渐进色定义条中间的两个白色指针改成如右图所示的颜色即可: 。用这个颜色我们在“新闪光时代”这五个字的必经之路上拉出一个矩形来,如上右图所示(仍要用颜料桶工具的调整颜色方向)。 现在我们把“新闪光时代”这几个字所在的层设为遮罩层,再在下面被遮罩层的第380帧按下F5键就可以了。观察一下效果,现在这几个文字不仅以另外一种颜色显示出来了,而且也有很好的电影序幕效果。当然大家也可以在实践的过程中把用作被遮罩层的渐进色设置成为其它颜色之间的渐进色,不同方向的渐进色甚至五彩缤纷的彩虹色等等,以实现不同的效果。
回复

使用道具 举报

29

主题

1163

回帖

8万

积分

新手上路

积分
82962
 楼主| 发表于 2004-3-21 12:36:52 | 显示全部楼层
Flash特效-雷达扫描效果 新建一个文件,设置背景色为黑色。 我们先来做雷达的外壳。按Ctrl-F8新建一个图形类图符out radar。用椭圆工具选灰色边框不选填充色按住Shift键拉出一个差不多大小的圆来,选中它按F8转换为图符。把它移动到中心位置,让编辑区的十字定位符和它的中心十字重合。选中这个圆,按Ctrl-C复制,按Ctrl-V粘贴,把粘贴后的圆略微放大一点,然后把它移动到第一个圆的外面。再按Ctrl-V粘贴一个圆,放大约20%,把这三个圆同时选中,按Ctrl-K改变设置,使它们中心对齐。按Ctrl-B把它们打散,选颜料桶工具,新建一个渐进色如右图所示: ,其中左边的颜色指针的RGB值分别为63,84,131。用这个颜色在最外面的圆和里面两个圆之间点一下,然后调整颜色方向使颜色效果如下图所示。最后在12点,3点,6点和9点的位置各画上一条短线。 新建一个层,用绿色边框色再拉出一个正圆,大小比刚才画的第一个圆只小一点,如下图所示: 现在画标尺或刻度。再新建一个层,按Ctrl+Alt-I打开对象监控板,选Transform。先用绿色在12点位置拉出很短的一条直线。选择这条短线,在变形监控板上点Copy复制,再在Rotate项下输入5.0,表示旋转5度,点Apply确定。然后用鼠标把复制好并经过旋转的新短线放到绿色圆周第1条短线右边的位置上,。用同样的方法再做出4条短线,注意每次都用第1条短线进行复制旋转,并且旋转角度递增5度。做好以后我们就有了6根刻度线,角度也旋转了25度。接下来把这6根刻度线全部选中,用变形监控板复制并旋转30度,把新的6根刻度线再放在适当的位置上。依此类推,就可以把所有的刻度线做好了,做好的刻度线如下图所示。如果出现长短不一或间距不等的情况,用橡皮工具或箭头工具调整一下就行了。 下面来做雷达扫描线及表盘。新建一个图符In radar。进入图符编辑画面,在第1层(自上而下,下同)和第2层分别画上扫描线的轴和扫描线,如下面图一和图二所示。 图一 图二 图三 图四 图五 在第3层先画一个不带边线填充色为任意的正圆,大小如上图三所示。把它分成两部分,左上角的部分为四分之一圆大,剩下的部分为四分之三圆大。把较大的这一部分用黑色填充,也就是用背景色填充,这样这块区域不仅很好的隐藏起来,而且也会遮盖住下面几层中位于这一块区域上的内容。剩下这块四分之一圆我们用一种新建的颜色来填充,这个新建的颜色见右图: ,这两个颜色指针都是黑色,但左边的这个颜色指针的Alpha值为0。用它来填充这块四分之一圆,调整颜色方向如右图: ,使得上面的部分为透明的黑色,下面的部分为不透明的黑色,而且方向略微倾斜。 在第4层上画一个四分之一圆,也可以把第3层的四分之一圆复制粘贴过去,见图四左图。新建一种中心渐进色 ,使它左边的颜色指针的RGB值分别为3,171和3,并把Alpha值改为75,然后把右边的黑色颜色指针的Alpha值调为0。 用这个颜色填充,并把颜色调整为图四中右面的图所示的颜色。 在第5层也就是最下层画出图五所示的几条虚线同心圆来,这个比较容易,只要用椭圆工具选择虚线线型(如果对虚线的线型不太满意还可以自己定义)再拉出几个圆把大小和位置关系调整好就行了。 最后做好的指针表盘如下图所示。可以看出虽然这个图符比较大,但大部分都被遮住了。 为了使效果更逼真一些,我们还要做一个目标点以便在雷达扫描的时候被检测到并发出信号。 新建一个电影片断类图符target,在第1帧用绿色的填充色画一个不带边线的小圆 ,选择它并按F8转换为图符dot。然后分别在第3帧,第9帧和第13帧按F6插入关键帧。在第1帧把圆缩小得几乎看不见。在第13帧双击这个绿点,把它的Alpha值改为0。接着分别把第1帧和第9帧的帧属性设为运动渐变。 再新建一个层,在第3帧按F6插入关键帧,画一个不填充的绿色圆套住绿点,如右图所示 :。选中这个绿色圆边线,按F8把它转换为图符circle。在第13帧按F6插入关键帧,把这个圆放大一些,然后把它的Alpha值设为0。把第3帧的内容复制到第1帧,并在第1帧把圆的Alpha值改为0。接着分别把第1帧和第3帧的帧属性改为运动渐变。做好后的时间轴如下图所示: 现在准备工作基本做好了,下面就可以把刚刚完成的这些图符组装在一起了。 新建一个电影片断类图符radar。在第1层上把out radar拖进去放在正中间,在第59帧按F5键。 在第3层上把in radar拖进来也放在正中间,在第60帧按F6插入关键帧,在第1帧修改帧属性为运动渐变,并把Rotate选项改为Clockwise,次数为1次,这样在1到60帧之间指针将会旋转1周。然后我们在第59帧按F6插入关键帧,在第60帧上按Shift-F6,再按Shift-F5把它清除。现在指针已经被设置为在第1和60帧之间旋转大约两周,这在循环播放时指针的旋转可以得到很好的衔接。 在第2层第11帧按F6插入关键帧。根据这一帧雷达扫描线所到达的位置,把target拖进来放好。为了使target能够完整播放一遍本身的动画,我们在第23帧按F7键。在第40帧雷达再次旋转到这一位置,所以在这一帧再按F6插入关键帧,把第11帧的内容复制到这一帧上,在第52帧按F7键。 第4层可有可无,如果你想增强些效果,可以在这一层杂乱地放上一些颜色与背景色接近的小点,这样当雷达扫描时,这些小点可以若有若无地隐约显示出来。 最后做好的时间轴如下图所示: 现在回到主场景,把做好的电影片断类图符radar拖出来放好就行了。 Flash特效-雷达扫描效果 新建一个文件,设置背景色为黑色。 我们先来做雷达的外壳。按Ctrl-F8新建一个图形类图符out radar。用椭圆工具选灰色边框不选填充色按住Shift键拉出一个差不多大小的圆来,选中它按F8转换为图符。把它移动到中心位置,让编辑区的十字定位符和它的中心十字重合。选中这个圆,按Ctrl-C复制,按Ctrl-V粘贴,把粘贴后的圆略微放大一点,然后把它移动到第一个圆的外面。再按Ctrl-V粘贴一个圆,放大约20%,把这三个圆同时选中,按Ctrl-K改变设置,使它们中心对齐。按Ctrl-B把它们打散,选颜料桶工具,新建一个渐进色如右图所示: ,其中左边的颜色指针的RGB值分别为63,84,131。用这个颜色在最外面的圆和里面两个圆之间点一下,然后调整颜色方向使颜色效果如下图所示。最后在12点,3点,6点和9点的位置各画上一条短线。 新建一个层,用绿色边框色再拉出一个正圆,大小比刚才画的第一个圆只小一点,如下图所示: 现在画标尺或刻度。再新建一个层,按Ctrl+Alt-I打开对象监控板,选Transform。先用绿色在12点位置拉出很短的一条直线。选择这条短线,在变形监控板上点Copy复制,再在Rotate项下输入5.0,表示旋转5度,点Apply确定。然后用鼠标把复制好并经过旋转的新短线放到绿色圆周第1条短线右边的位置上,。用同样的方法再做出4条短线,注意每次都用第1条短线进行复制旋转,并且旋转角度递增5度。做好以后我们就有了6根刻度线,角度也旋转了25度。接下来把这6根刻度线全部选中,用变形监控板复制并旋转30度,把新的6根刻度线再放在适当的位置上。依此类推,就可以把所有的刻度线做好了,做好的刻度线如下图所示。如果出现长短不一或间距不等的情况,用橡皮工具或箭头工具调整一下就行了。 下面来做雷达扫描线及表盘。新建一个图符In radar。进入图符编辑画面,在第1层(自上而下,下同)和第2层分别画上扫描线的轴和扫描线,如下面图一和图二所示。 图一 图二 图三 图四 图五 在第3层先画一个不带边线填充色为任意的正圆,大小如上图三所示。把它分成两部分,左上角的部分为四分之一圆大,剩下的部分为四分之三圆大。把较大的这一部分用黑色填充,也就是用背景色填充,这样这块区域不仅很好的隐藏起来,而且也会遮盖住下面几层中位于这一块区域上的内容。剩下这块四分之一圆我们用一种新建的颜色来填充,这个新建的颜色见右图: ,这两个颜色指针都是黑色,但左边的这个颜色指针的Alpha值为0。用它来填充这块四分之一圆,调整颜色方向如右图: ,使得上面的部分为透明的黑色,下面的部分为不透明的黑色,而且方向略微倾斜。 在第4层上画一个四分之一圆,也可以把第3层的四分之一圆复制粘贴过去,见图四左图。新建一种中心渐进色 ,使它左边的颜色指针的RGB值分别为3,171和3,并把Alpha值改为75,然后把右边的黑色颜色指针的Alpha值调为0。 用这个颜色填充,并把颜色调整为图四中右面的图所示的颜色。 在第5层也就是最下层画出图五所示的几条虚线同心圆来,这个比较容易,只要用椭圆工具选择虚线线型(如果对虚线的线型不太满意还可以自己定义)再拉出几个圆把大小和位置关系调整好就行了。 最后做好的指针表盘如下图所示。可以看出虽然这个图符比较大,但大部分都被遮住了。 为了使效果更逼真一些,我们还要做一个目标点以便在雷达扫描的时候被检测到并发出信号。 新建一个电影片断类图符target,在第1帧用绿色的填充色画一个不带边线的小圆 ,选择它并按F8转换为图符dot。然后分别在第3帧,第9帧和第13帧按F6插入关键帧。在第1帧把圆缩小得几乎看不见。在第13帧双击这个绿点,把它的Alpha值改为0。接着分别把第1帧和第9帧的帧属性设为运动渐变。 再新建一个层,在第3帧按F6插入关键帧,画一个不填充的绿色圆套住绿点,如右图所示 :。选中这个绿色圆边线,按F8把它转换为图符circle。在第13帧按F6插入关键帧,把这个圆放大一些,然后把它的Alpha值设为0。把第3帧的内容复制到第1帧,并在第1帧把圆的Alpha值改为0。接着分别把第1帧和第3帧的帧属性改为运动渐变。做好后的时间轴如下图所示: 现在准备工作基本做好了,下面就可以把刚刚完成的这些图符组装在一起了。 新建一个电影片断类图符radar。在第1层上把out radar拖进去放在正中间,在第59帧按F5键。 在第3层上把in radar拖进来也放在正中间,在第60帧按F6插入关键帧,在第1帧修改帧属性为运动渐变,并把Rotate选项改为Clockwise,次数为1次,这样在1到60帧之间指针将会旋转1周。然后我们在第59帧按F6插入关键帧,在第60帧上按Shift-F6,再按Shift-F5把它清除。现在指针已经被设置为在第1和60帧之间旋转大约两周,这在循环播放时指针的旋转可以得到很好的衔接。 在第2层第11帧按F6插入关键帧。根据这一帧雷达扫描线所到达的位置,把target拖进来放好。为了使target能够完整播放一遍本身的动画,我们在第23帧按F7键。在第40帧雷达再次旋转到这一位置,所以在这一帧再按F6插入关键帧,把第11帧的内容复制到这一帧上,在第52帧按F7键。 第4层可有可无,如果你想增强些效果,可以在这一层杂乱地放上一些颜色与背景色接近的小点,这样当雷达扫描时,这些小点可以若有若无地隐约显示出来。 最后做好的时间轴如下图所示: 现在回到主场景,把做好的电影片断类图符radar拖出来放好就行了。
回复

使用道具 举报

29

主题

1163

回帖

8万

积分

新手上路

积分
82962
 楼主| 发表于 2004-3-21 12:37:33 | 显示全部楼层
如何优化Flash电影   Flash作为Macromedia公司出品的网页制作与动画创作的专业软件,操作简便,功能强大,现已成为交互式矢量图形和Web动画事实上的标准。   但是,如果制作的Flash电影文件较大,动辄几百k的话,常常会让网上浏览者在不断等待中失去耐心。对Flash电影进行优化就显得很有必要了,但前提是我们不能有损电影的播放质量。   1.多使用符号(Symbol)。如果电影中的元素有使用一次以上者,则应考虑将其转换为符号。重复使用符号并不会使电影文件明显增大,因为电影文件只需储存一次符号的图形数据。   2.尽量使用渐变动画。只要有可能,应尽量以“移动渐变”(Create Motion Tween)的方式产生动画效果,而少使用“逐帧渐变”(Frame-By-Frame)的方式产生动画。关键帧使用得越多,电影文件就会越大。   3.多采用实线,少用虚线。限制特殊线条类型如短划线、虚线、波浪线等的数量。由于实线的线条构图最简单,因此使用实线将使文件更小。   4.多用矢量图形,少用位图图像。矢量图可以任意缩放而不影响Flash的画质,位图图像一般只作为静态元素或背景图,Flash并不擅长处理位图图像的动作,应避免位图图像元素的动画。   5.多用构图简单的矢量图形。矢量图形越复杂,CPU运算起来就越费力。可使用菜单命令Modify (修改)/Curves(曲线)/Optimize(优化),将矢量图形中不必要的线条删除,从而减小文件。   6.导入的位图图像文件尽可能小一点,并以JPEG方式压缩。 ??7.音效文件最好以MP3方式压缩。MP3是使声音最小化的格式,应尽量使用。   8.限制字体和字体样式的数量。尽量不要使用太多不同的字体,使用的字体越多,电影文件就越大。尽可能使用Flash内定的字体。   9.不要包含所有字体外形。如果包含文本域,则应考虑在Text Field Properties(文本域属性)对话框中选中Include Only Specified Font Outlines(只包括指定字体外形),而不要选择Include All Font Outlines (包括所有字体外形)。   10.尽量不要将字体打散(菜单命令为Modify / Break Apart)。字体打散后就变成图形了,这样会使文件增大。   11.尽量少使用过渡填充颜色。使用过渡填充颜色填充一个区域比使用纯色填充区域要多占50字节左右。   12.尽量缩小动作区域。限制每个关键帧中发生变化的区域,一般应使动作发生在尽可能小的区域内。   13.尽量避免在同一时间内安排多个对象同时产生动作。有动作的对象也不要与其它静态对象安排在同一图层里。应该将有动作的对象安排在各自专属的图层内,以便加速Flash动画的处理过程。   14.用Load Movie命令减轻电影开始下载时的负担。若有必要,可以考虑将电影划分成多个子电影, 然后再通过主电影里的Load Movie、Unload Movie命令随时调用、卸载子电影。 15.使用预先下载画面。如果有必要,可在电影一开始时加入预先下载画面(Preloader),以便后续电影画面能够平滑播放。较大的音效文件尤其需要预先下载。   16.电影的长宽尺寸越小越好。尺寸越小,电影文件就越小。可通过菜单命令Modify(修改)/Movie(电影),调节电影的长宽尺寸。   17.先制作小尺寸电影,然后再进行放大。为减小文件,可以考虑在Flash里将电影的尺寸设置小一些,然后导出迷你SWF电影。接着将菜单File(文件)/Publish Settings…(发布设置…)中HTML选项卡里的电影尺寸设置大一些,这样,在网页里就会呈现出尺寸较大的电影,而画质丝毫无损、依然优美。   在进行上述修改时,不要忘记随时测试电影的播放质量、下载情况和查看电影文件的大小。
回复

使用道具 举报

29

主题

1163

回帖

8万

积分

新手上路

积分
82962
 楼主| 发表于 2004-3-21 12:37:56 | 显示全部楼层
二、节奏控制   好的动画应该是视觉冲击与信息传达相结合,流畅充满美感,这些都需要我们为动画设计一个好的整体节奏。   1、起伏   假如我告诉你我要做一个片头动画,动画的开始(引子)是一段渐起的音乐,动态柔和唯美,随着音乐的渐强达到高峰,也进入动画第2阶段,这是动画主体也是信息传达的主要时期,在连续高速的动画过后音乐嘎然而止,进入结束画面,也就是整个动画的结尾。那么这个动画的整体节奏起伏是什么样子呢?如下图:(如图8)。这种节奏更适合做介绍产品的动画,叙事性强。   节奏起伏还可以有很多种,比如快慢交替,不管是什么节奏,都是为传达设计者的概念而服务。我们在观看优秀的Flash作品的时候一定要注意观察他的整体节奏,以及节奏与传达概念之间的联系。这也是动画的精髓所在。   2、交替   在具体的元素动态效果上,我们经常会采取速度交替的动态效果。例如,文字从画面的左部飞入,速度飞快,(如图9)到达目标位置以后速度减慢,右部飞入更大,透明度更低的相同文字。(如图10)两文字交错而行,速度很慢(图11)。这种速度与位置的交错,满足了动画对速度的需求,也实现了清楚传达信息的目的! 三、速度感   既然是酷眩Flash就一定要有很好的速度感,如果你在以下几个方面注意了就会发现,速度感觉不仅仅是动作快就能够满足的。   1、移动模糊   熟悉photohsop的人都知道motion blur,移动模糊是模拟人眼看到高速运动的物体时的样子(如图13)。由于人眼的视觉停留,高速运动的物体都会延他的运动路径被拉长,就象你看到高速公路上奔驰的车流,是彩色的线组成的一样。我们可以在photoshop或者flash里制造物体的移动模糊效果,当需要物体高速位移可以采用经过motion blur处理后的物体替代。当运动结束时再换之真正的物体,视觉上就会觉得物体运动的速度极高。还有缩放模糊(如图14)、旋转模糊都可以应用在flash中,例如表现镜头的高速缩放、高速旋转等等   2、速率   这里说的速率即FPS(每秒钟播放桢数)(如图15),这个速率合适与否直接影响了动画的播放速度、占用cpu资源,最重要的是影响了流畅度。理论上说,当然是fps越高,占用cpu资源越重,也就是说可能反而会断断续续。一般情况下24-40是一个合理范围,在这个速率内的动画显得非常流畅,同时耗资源也不是很重。   3、加速度   通俗的说加速度就是速度越来越快,当然也有反向的,在flash中就体现在frame标签里的easing的值(如图16),加速度在动画中的作用,是使元素的运动更接近自然界的运动,例如物体呈抛物线运动的时候,速度应该是越来越慢的,而下落的物体应该是越来越快的。一般来说从运动到静止的物体都是逐渐减速的,反之是逐渐加速的。总之掌握好物体运动的加速度,是把握物体运动更自然更人性化的关键因素。
回复

使用道具 举报

29

主题

1163

回帖

8万

积分

新手上路

积分
82962
 楼主| 发表于 2004-3-21 12:38:09 | 显示全部楼层
4、反弹   反弹是自然界最常见的物理现象,动画中也常常会用到它,特别是在设计卡通风格的动画中由为重要。简单地说是使物体动的看起来有弹性,例如文字落下时没有马上静止而是向上弹了一、二下才静止,使得文字看上去充满了生气。弹性配合加速度,就可以体现物体的重力和运动的真实程度了。   5、惯性   又是一个常见的物理现象,和加速度相反,惯性的表现一般用在突然发生动作或者突然静止的时候,例如物体要高速向前运动时,可以先稍稍得向后运动一点,来表现原来静止带来的惯性。高速运动的物体突然停止的时候,可以给它以形变,然后恢复,体现高速运动的惯性。惯性大会显得很卡通,轻微的体现惯性则更自然。 四、视觉冲击力   酷眩Flash,是否有视觉冲击力是很重要的,不是晃的人眼晕就是有冲击力。视觉冲击不应该过多,而且要在合理的地方出现。那么怎样设计有冲击力的动画呢?   1、速度   高速度本身就产生了视觉冲击,但在众多高速运动的物体中,缓慢运动的物体反而更引人瞩目了。因此除了高速、变速,跟周围环境差异大的运动速度,都能给人带来一定的视觉影响。   2、面积   毫无疑问,大面积的运动能带来更大的冲击力,但一定要在不给人造成心理压力的前提下。如果面积很小而且无法扩大,高速闪动是个不错的选择。   3、动作   一般来说,高速缩放是最能带来视觉冲击的。位移其次,其它是各种各样的特殊效果,其实这和环境的关系很大,动作特殊往往就会带来不错的效果。   4、颜色   颜色与面积关系很大,我们经常可以在影视片断当中看到这样的处理,两个片断之间,突然白屏,然后画面渐出。给人很强的视觉冲击,可以说颜色变化的越大视觉冲击就越强。我们可以经常在一些优秀作品当中看到物体往往会变白以后再移动,因为白色最亮,自然会非常抢眼。这只是一个典型的例子,颜色的变化还要依据动画的整体风格,不可生搬硬套。   说了这么多,制造又酷又眩的Flash,首先要从平面效果下手,设计合理美观的表现方式。然后利用各种动态效果和适当的元素去表达所需要传达的概念。动画设计的过程重要从节奏、速度、冲击力等几个方面去考虑!希望这篇文章能够起到抛砖引玉的作用,使大家能够更多的注意到优秀作品的科学合理性,更深层次的去挖掘适合Flash动画的表现方式! ----------------------------------------------
回复

使用道具 举报

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

本版积分规则



QQ|Archiver|小黑屋|网院部落

GMT+8, 2025-7-1 08:05 , Processed in 0.940430 second(s), 18 queries .

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

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