LiveMotion教程.docx
《LiveMotion教程.docx》由会员分享，可在线阅读，更多相关《LiveMotion教程.docx（18页珍藏版）》请在冰豆网上搜索。
LiveMotion教程
LiveMotion完全教程
网页美术设计软件----LiveMotion。
LiveMotion可用于WIN95、98及NT和2000，好象还有苹果版。
安装完毕，初一看，它与ImageStyler没什么大的区别，如果你将它看成是ImageStyler的升级版也未尝不可。
但这个专门进行网页美术设计的软件，在ImageStyler的基础上，的确作了相当大的改进与完善。
有了它，可大大方便设计人员的设计工作。
所以我打算专门为这个目前最具实用性的网页美术软件写几篇介绍文章，因为它在许多方面同ImageStyler相似，所以，用过ImageStyler的朋友，会很容易上手的。
我会将主要篇幅放在动画设计和各种新增功能方面。
·第一课简介
·第二课曲线编辑
·第三课库文件采集
·第四课透明度的控制
·第五课对象层及鼠标效果
·第六课立体效果及其它效果
·第七课对象层及鼠标效果
·第八课动画时间轴控制
我每次用ImageStyler作网页美术设计的时候，都感慨为什么Adobe没有将矢量路径的描绘功能放进去，害得我总要同时打开Coreldraw，不时地将路径（确切地讲应该是轮廓）一个个输出成EPS文件，然后再输入到ImageStyler中。
如果输入后发现有哪里不对，还得重来。
我想每个用ImageStyler的人，都会有这样的感受。
而现在，ImageStyler的2.0版虽然没能盼来，但Adobe公司早已看好网络设计这一大有发展的方向（要知道，在国外，美术这东西远比在咱们这儿被看重），在ImageStyler1.0的基础上，开发出一个更具魅力的网页美术设计软件----LiveMotion。
LiveMotion可用于WIN95、98及NT和2000，好象还有苹果版。
安装完毕，初一看，它与ImageStyler没什么大的区别，如果你将它看成是ImageStyler的升级版也未尝不可。
但这个专门进行网页美术设计的软件，在ImageStyler的基础上，的确作了相当大的改进与完善。
有了它，可大大方便设计人员的设计工作。
所以我打算专门为这个目前最具实用性的网页美术软件写几篇介绍文章，因为它在许多方面同ImageStyler相似，所以，用过ImageStyler的朋友，会很容易上手的。
我会将主要篇幅放在动画设计和各种新增功能方面，而与ImageStyler相同的部分，不熟悉的朋友可以看看我写的《浅谈ImageStyler》,都放在“网页美术”栏目里。
首先，LiveMotion加入了矢量曲线生成工具，你不必一会儿在LiveMotion，一会儿在Coreldraw或Freehand什么的软件里，然后生成无数EPS文件。
现在，你同样可以在LiveMotion里面，通过点击并拖曳鼠标，生成你想要的各种轮廓，当然，也可以通过调整各节点上的句柄修整曲线。
并且，也能够选择曲线的“填充”及“轮廓”方式。
在LiveMotion里，工具栏新增了一个矢量画笔和一个曲线修整工具，有了这两个看似简单的工具，不必再发愁矢量曲线的设计能力了。
就这么两个小按钮，解决了大问题。
在你使用它们的时候，建议你多用Shift、Ctrl和Alt这三个组合键，你会发现不少小窍门。
其次，也是LiveMotion最值得大加推荐的，是它的动画生成功能。
软件专门增加了一个关于动画设计的菜单，并可以打开一个动画设计的控制板。
在不同的时间段，你可以分别对各个对象设置效果，效果与效果之间的时间，由软件自动生成过渡动画。
也就是说，你只需将注意力集中在关键祯上。
无论是矢量轮廓还是位图对象，LiveMotion都可在各祯之间自动生成过渡。
另外，对于动画的交互功能，LiveMotion也有很简便的设计方法。
关于动画设计部分，我将专门介绍。
再有，就是对网页矢量动画的支持。
Flash早已相当热门了，现在，搞网页设计的，不加一点Flash上去，似乎很“菜”。
虽然我本人对它并不太热衷，到目前为止也尚未使用Flash格式的文件，不过，恐怕到底还是不可能完全躲得过去。
正在设计的[images小组]第三版，首页已经尝试使用swf文件了。
我尝试使用Flash格式文件的最主要原因，是数据量的问题。
矢量格式的数据量小，并且图形的光滑度很好，除非一觉醒来，网路带宽已不是问题，否则，我只好向Flash技术问好了。
LiveMotion可以将作品输出为swf格式，并且，当你设置输出选项时，程序可让你控制画面中位图的压缩技术，如jpeg或Index索引色，调整压缩比。
几乎忘了，这回Adobe对位图的处理能力也作了不少的增强，你可以更大程度地对输入的位图进行进一步编辑，而且象Photoshop一样，LiveMotion里也放入了不少过滤器。
如果对程序原有的过滤器不够满意，LiveMotion也支持插件，可以安装第三方开发的过滤器。
至于对图象的明度、对比度、饱和度及色彩的调整，在ImageStyler中，就已经具备了。
有意思的是，这次Adobe为你设计了一个配色方案选择框，看看左边这个Color控制板，当你打开左下角那个锁，然后再选取颜色（在另一个选色板），它就会给你一套配色方案，实际上是三套，点一下控制板下面那三个带点儿的圆圈儿就会明白。
有了这些技术，您还会不满意吗？
当然，这个世界本来就不完美，满意，自然也是相对而言的。
那么，相对而言，您还会不满意吗？
如果让我来介绍LiveMotion，首先我想谈的，肯定是关于曲线编辑的容。
对于平面美术而言，曲线肯定是最基本也是最有说服力的要素。
西方美术上来就讲素描，并将其看作基本功。
但在中国，从一开始，线描就成为最具说服力的表现手法。
现在，即便是西方美术，线条表达方式也正逐渐占据更重要的地位。
大家可以看看毕加索或马蒂斯等人的后期作品，简单的几根线条，就强烈地表达出画家心的深切感受。
请不要以为我在跑题，充分发挥线条表现力，在网页设计方面是尤其应当受到重视的。
不但可以有效降低数据总量，并且，当网络及计算机的发展使Flash矢量技术得到普及后，我们的确具备了相当大的发挥余地，而LiveMotion现在就支持矢量格式的输出。
我不大会画人物，因为看过照片上的卧佛和马蒂斯的线描，所以勉强用LiveMotion搞了个“现代卧佛”，就是上面那个。
一共七根线条，足下看了，有感觉吗？
如果有，那你也应该会同意我对线条的推崇态度吧。
言归正传。
在LiveMotion里，绘制曲线的工具，只有两个。
我用曲线工具画了一个花瓶，在剪切下来的图中，左侧的黄色圆圈中，一个钢笔头图样的，一个白色箭头并带有曲线节点的。
有钢笔头图样的工具用来绘制曲线，另一个则用来编辑。
问题也从这儿来，用过Photoshop或矢量软件的人都知道，矢量曲线的编辑工具不会仅仅是一个。
而LiveMotion里，的确只有一个。
我们能完全自由地对曲线进行编辑修改吗？
当然能。
玩Photoshop非常熟练的朋友，肯定很熟悉键盘附加键的应用。
这里也是一样的，不过，比Photoshop似乎还要余地大些。
附加建共有三种：
Alt、Ctrl和Ctrl+Alt。
不论是曲线的绘制工具还是编辑工具，当你正在使用时，都可以按下这三种附加键。
仔细观察图标的变化，它们分别代表不同的功能。
下面我将分别针对两个曲线工具，谈谈以上提到的三个附加键的作用。
一.曲线绘制工具，就是有钢笔头的那个：
（在曲线的绘制与编辑过程中，你都可以按下附加键。
）
首先，绘制曲线有两种基本方法，单击鼠标，得到拐点；按下述标并拖曳，得到带调整句柄的曲线节点。
当绘制每根曲线时，第一个点是红色的，表示这是1点。
每个编辑节点，用一个空心圆圈表示，而被选中的节点，即当前节点，用实心圆圈表示。
LiveMotion的默认状态，曲线绘制是在Fill设置下进行的。
所以，当你绘制曲线时，1点，即曲线的起始点，和曲线的末点之间，自动连接并添入当前色。
如果你感到这访碍你对曲线的编辑，可以选中在Properties对话框中的Outline。
以后可随时选回Fill状态。
未封闭的曲线，随时可以继续绘制。
只需先选中要继续绘制的曲线，然后用曲线工具绘制即可，新生成的线段自然会连接到原曲线的末端。
任何时候，你可以在曲线的任何位置，我是指没有节点的位置，点击或点击并拖曳鼠标，以产生更多的可控制节点。
如果你需要将未封闭曲线的首尾对调，可以按下Ctrl+Alt组合键，同时将鼠标定位到曲线的末点，图标会变成钢笔头并附加一个小小的“1”字，这时，点击末点，则这个末点将变成红色圆圈的1号点，即起始点，而原来的起始点变成了末点。
同样的方法，你也可以用Ctrl+Alt键并单击曲线的其它节点，被点击的节点就成为起始点，在它前面的那个节点，即与它相邻并更靠近原起始点的那个节点，将成为末点。
而原来的首尾两点将被连接。
见左图，我点击了那个带句柄的节点。
另外，按下Ctrl+Alt键后，如果将鼠标放在离开原曲线节点的任何地方，可以立即开始绘制另一个起始点，你可以有很多起始点，即红色圆圈。
这些起始点，可在任何时候继续编辑，生成曲线，但你必须清楚，所有这些起始点及其曲线，都是同一个对象。
附加键Ctrl按下后，曲线绘制工具将暂时变成编辑工具。
这时可以对正在绘制的曲线作临时修正。
Alt键按下后，得到拐点编辑功能。
如果单击某节点，这个节点将变成拐点，并不具备句柄。
点击并拖曳鼠标，重新产生句柄，并且，节点两边的句柄连线会是在同一条直线上。
单击并拖曳某一个句柄点，可以使曲线在这个节点上变成拐点曲线，也就是说，这个节点变成了有句柄的拐点。
另外，如果在离开曲线的其他位置点击，将得到各自的曲线起始点，但请注意，这时的起始点，是另一个对象的起始点了，和刚才用Ctrl+Alt键的情况不同。
二.曲线编辑工具，就是钢笔头右边的那个：
（在曲线的绘制与编辑过程中，你都可以按下附加键。
）
按下Ctrl+Alt组合键，功能与上面谈到的完全一样。
按下Ctrl键，你将得到曲线绘制工具。
按下Alt键，得到拐角点编辑工具，与刚才在曲线绘制工具时按下Alt键时一样的。
我已经写了不少关于曲线的生成方式，实际上仅仅是三种组合键，不过，你必须亲自试试，才能真正熟悉。
Adobe公司的确很懂得简洁的重要性，不过，也给初学者带来不少麻烦，好在窗户纸一捅就破，同样，在使用其它工具时，你也别忘了看看是否有什么方便的组合键可用。
LiveMotion的主要功能都集中到各个控制板里。
算上工具条，一共八个。
其中只有动画控制板的调用是完全单独的，另外的六个控制板，大都包含三到四个项。
关于它们的具体应用，也就是LiveMotion的主要容了。
控制板都可以从程序的Window菜单里找到，在这个菜单里，各控制板都已分类，并用细横线隔开。
这篇文主要讲解Styles控制板的容。
它实际上由Styles、Textures、Library、Sounds四项组成。
我不明白Adobe为什么不给控制板起个组名，让我讲得麻烦。
这四个控制板，在程序里实际上只是一个，我将它的各项都分别放置，是为了使你看得清楚些。
因为它包含四项容，所以确实不知该怎么称呼它，反正这是同一个控制板。
以后各篇介绍其它控制板的文章，也是这样，我只好按各项来讲解。
好吧，先讲Library项。
Library里放置的，是一些常用的形状，实际上就是轮廓的意思。
在LiveMotion里，轮廓图是可以不断采集的。
另外三个项，即Textures纹理和Styles效果，和Sounds声音，也可以由你不断采集丰富。
这相当于一个采集库。
轮廓文件，即组成这些小图标的“实际的原文件”，将被程序放置到程序目录里的"library"目录下。
程序刚装好时，就已经有了一些轮廓图形了，你还可以不断往里加。
方法是先选择你已经作好的轮廓，然后点击控制板下面那个折了角的白纸图标“NewObject”，就可以给你想要的轮廓文件起名字了。
选择以后，程序将自动复制这个文件到library目录下，以备后用。
需要说明的是，虽然有许多文件格式供你选择，但是，我建议你多使用Eps、ai、wmf这样的矢量文件格式。
矢量格式支持平滑的放大缩小，如果你用普通的位图文件格式，那么当你将它放大时，质量必然会下降的。
不过，我更希望你用另一种方法存储你的“集”，将你作好的对象直接拖曳到控制板里即可，程序会让你输入名字，你可以随便起名字，但程序会按名字排序，所以，如果用Z打头，对象放入库中后，将放在最后。
并且，用这种方法得到的轮廓文件，将会采用程序的约定格式，即liv格式，同样是矢量的。
现在，再说明一下Library控制板下方那一排小按钮，头三个，分别代表三种类型的库文件。
第一个，画着圆和方的，是指程序约定格式，即刚刚提到的liv矢量格式。
第二个，是标准矢量格式，如ai、Eps等。
第三个，当然是普通点阵图像格式了。
如果你对ImageStyler较熟（我们说过，Livemotion是在ImageStyler的基础上发展而来的），你会发现，在ImageStyler中，这个轮廓集的名称是Shapes而不是Library，现在，把它称作Library是更确切的，因为，这里面放置的，不仅仅是轮廓曲线，实际上，包括Photoshop的Psd格式，你完全可以将一个真实的手机剪下来放在Library里。
再往下说，第四个，两个箭头的按钮，它可以用库里的文件去替换设计中的某个对象，但会保持原来设计文件中的对象的长宽比例。
第五个有点像日本旗，它的作用是，如果你的设计中尤位图对象，则可以用库里的某个轮廓将位图剪切下来。
第六个，向右的下旋箭头，是确定按钮，点一下它，被选择的库文件就会出现在你的设计中。
倒数第二个，刚才提到了，是用于向库中放置新文件的。
至于最后一个，不提也罢。
与ImageStyler不同，现在，双击一个库文件图标，不会调出这个对象的。
你只能点击控制板下面那个向右的下旋箭头的按钮。
如果你再亲自试一下，相信很快就会掌握。
知道了Library项的用法，其它三项肯定不需我细说了，小异。
Textures纹理部分，最好是无封贴图，这样，可以使贴图小一些，而不论填充贴图的对象多大，纹理总是它原来的大小，它会自动重复。
Styles，效果项，用法没什么区别。
它的库文件格式也是程序的约定格式。
添加效果记录的方法也是：
选中作品中的某个具有效果的对象，点击控制板下面的白纸图标，然后在弹出对话框里起个名字，这个效果就被记录了，效果控制板里将多出一个代表此效果的图标，以备后用。
建议你在安装完程序后，分别打开程序自带的例子，将里面的各个对象的效果记录下来，以后你自己制作的效果也应作记录，记录得多了，将会很方便。
LiveMotion的样例文件在Training/templates离。
至于怎么制作效果，后面的文章会讲到。
至于声音库，用起来很简单，它将把声音赋予设计中的对象。
不过，也需注明一下，声音文件总是被赋予“当前状态”，比如说，当你的设计文件中，没有任何对象被选中时，声音将被赋予给整个页面，也就是当这个页面在浏览器中被打开时播放。
再比如，当你正在给某个对象设计其“鼠标按下状态”时的效果，这时如果赋予了声音，则声音会在浏览者点击这一按钮对象时发出，等等。
关于交互状态的设计，后面会讲到。
以上谈到的四个项，在程序里都有子目录。
你可以将它们备份，这样即使重装程序，也不用担心了。
4）透明度的控制
左边是LiveMotion设置透明度的控制板。
与ImageStyler不同的是，它有两个透明度调节杆。
首先，第二个，ObjectLayerOpacity调节杆允许你随意控制当前层对象的透明度，也就是说，如果你给某个对象添加了层，在这里可以分别调整各层的透明度。
现在的数值是100，表示完全不透明。
你只需向左调节那个小三角，就会马上看到调节效果了。
而ObjictOpacity调节杆与ObjectLayerOpacity的区别，仅在于，它是同时控制整个对象的透明度，就是说，当你调节它时，当前对象的所有层都会同时改变透明度。
透明度的调节控制在动画设计中很有发挥余地，既可以对整个对象，也可以分别对各层设置透明度的动态变化。
仅此一点，你的动画就能产生相当不错的效果。
另外，LiveMotion为你提供了几种过渡式的透明设置方法。
注意控制板下边的过渡色条，黑色表示不透明，白色表示全透明。
你可以移动色条下面那两个小方块，以控制透明过渡的变化区域。
并且，也可以分别选中其中一个小方块，再调整上面的透明度调节杆，这样将改变小方块所代表的具体透明度值，实际上也就是透明度变化过渡的“极点”值。
并且，这一左一右两个小方块都可以移动，这等于控制了透明度变化围的两个端点的位置。
不过，要启用过渡式透明设置，你必须选择控制板中间，弹出式选择框中的过渡方式。
如果是NoGradient，则表示过渡式透明设置关闭。
LiveMotion提供了四种过渡方式。
Linear，即线性过渡方式，可以设置方向度角。
Burst，从中间往两边的线性过渡方式。
DoubleBurst，双倍的Burst，实际上就是水平和垂直方向上的Burst线性过渡方式。
Radial，从中心向外的圆周过渡方式。
这四种过渡，看看下面的小例子就会完全明白。
关键是，你如何发挥它？
但还有一点要说明一下，过渡式透明设置只对各层有效，所以，对过渡色条下方那两个小方块所代表的透明度极限值进行调整时，你应该调整ObjectLayerOpacity调节杆，而不是ObjictOpacity调节杆。
（5）对象层及鼠标效果
在LiveMotion里，当我们说到“层”的时候，一般是指具有数个层效果的对象层。
在控制板里，它实际上不叫Layer，而是Object，即对象。
所以，在这里首先需要说明一下。
一个是与Photoshop中的层控制板类似的ObjectLayer,它的使用方法，与Photoshop略不相同，我们会在下面具体讲到。
而另一个，是对当前层容的简单控制，它才真叫Layer，关于它，将在后面的文章介绍。
这篇文章的题目是《对象层及鼠标效果效果》。
主要靠Object和Rollovers两个控制板完成。
当然，要想作出好的效果，必然会用到其它控制板，但为文章题目划分的清晰起见，我们在这里暂不对其它效果处理作过多的介绍。
例如对象的凹凸控制等。
Object的作用，与Photoshop是基本相同的。
不过，在使用方法上，它简单多了。
首先，它不会允许你建立空层，象Photoshop里那样的绝对透明的空层，在这里是没有的。
当你点击那个折角的小白纸图标是，LiveMotion的确会给你一个新层，但这是一个包含了对象轮廓的新层，用黑色填充着的。
这等于说，LiveMotion不允许你在同一个对象上建立截然不同的轮廓造型，你只能在这个对象原形的基础上，对每层作选色、柔化、立体、过渡填充及透明度选择等操作。
其实这也对，因为不同的造型，完全可以建立其它对象，没必要“绑”在一起的。
原先，在ImageStyler里，还有一个限制，层数最多为五层，我个人认为，这个限制看上去显得Adobe有些不够意思，实际上这样做倒是件好事，因为确实有许多人喜欢不停地加所谓的效果。
五个层，每个层都可以设置效果，叠在一起，够复杂的了，毕竟，只是一个对象而已，如果你愿意，可以多作几个，叠放在一起的，可这实在没必要。
现在，LiveMotion取消了这个限制，那就要看你的克制力了，别玩儿得太火了，悠着点儿吧。
下边的例子中，我将这个字体效果的四个层分别显示，请大家仔细比较。
先是只有第一层的3D效果，然后包括了第二层，然后再包括第三层、第四层。
你能看出每多出一层，效果有了什么变化。
第一层显然是立体效果层，在3D控制板完成。
二、三、四层实际上都是平面色层，都作了边缘虚化，仅仅是每层的颜色、深度及虚化程度不同。
其中，第二层和第四层都是灰度虚化，但第二层的虚化度小，并且灰度较深，它的作用是给立体效果一个深色的轮廓，使立体高光部分更明确。
最后的两层则是大面积的虚化，为了增加柔化度。
层控制板就是这样的，记住，不要贪图层的数量，并且，你得不到真正的空层，而必须对各“轮廓层”作进一步的效果设置。
现在再来谈谈Rollovers控制板的应用。
它的作用很简单：
用来作与鼠标相关的动态按钮效果。
从每层的名字就可以看出，它们分别是：
当前默认效果、鼠标经过、鼠标按下及鼠标点击后的效果。
总共就这么四个效果。
默认情况下，仅有第一个效果是有效的，这时，你在Object中作的对象效果，输入到网页里，将是静态的。
当然还有最后一个CustomState，它的用途，需另写文章介绍。
暂时先别去管它吧。
你可以点击小白纸图标，产生新的Rollovers效果条。
每个条都有弹出式选择，供你选择各种鼠标状态。
而当你正处在某个Rollovers效果条时，你可以到Object控制板去改变对象的效果。
用这种方式，LiveMotion会分别记住同一个对象在不同鼠标状态下的效果。
一般来说，应用了Rollovers的对象，都会有地址。
在LiveMotion里，很简单，你只需在选中对象的时候，到Web控制板（Window/Web）里，在标明URL的长方块里输入地址并确定就行了。
（6）立体效果及其它效果
LiveMotion最直接影响对象效果的，主要是3D效果控制板，另外，Color控制板也包括部分很有效的项。
我们现在来对3D效果控制板作详细的讲解。
3D效果控制板，与前几篇对各控制板的介绍一样，它同样是由几个分项组成。
容我慢慢道来。
在3D控制里，首先须选择一种立体方式，从左边的控制板看，现在被选中的是Emboss立体方式。
其它几种，你可以自己尝试一下，小异。
在这里建议你，当你实验各种效果时，请将生成的对象，也就是你刚刚设计的某个元素，比如一个圆，调得大一点，起码有一角硬币那么大，这样，效果比较容易看清楚。
（如果不想出立体效果，可以选择“None”方式。
）假如你真是第一次使用3D效果，选择了某种方式后，可能感觉看不出什么来，这时，请将效果选择框下面的Depth参数调得大一些。
Depth、Softness、Lighting三个参数，分别控制立体效果的立体边厚度、立体柔和度和光照度。
通过它们，已经可以将立体感设计得很好了。
你可能觉得还不够，没关系，下面还有三项扩展功能。
角度控制，决定光源方向。
Edge选项为你提供了几种立体边的增强效果。
Light选项除了Normal外，还有两种光线效果。
以上这些就是控制3D立体感的具体手段。
当然，仅仅让对象具备鼓起或凹下的效果，是不够的。
我们还可以对它作些别的。
比如让它具有纹理质感；过渡色彩填充；调整色彩亮度、对比度及饱和度等等，别急。
紧接着要讲的，是3D控制板上的另几个控制项，先讲Gradient。
一看而知，这是负责过渡色彩填充的。
方法是：
分别点击过渡色条下面那两个小色块，并在Color控制板为其选择不同的颜色。
角度控制填充方向。
这个控制板与透明度控制板的使用方法是相同的，所以不必再细说。
请注意一下，我剪切的这个控制板，填充效果选择框是灰色的，也就是说，不可用。
准确地讲，过渡填充失效。
为什么？
因为我当时正在设计的那个对象，已具备了纹理填充。
至少在同一个对象、同一个层上，如果你用了纹理填充，过渡填充就用不了。
不过，你可以在另一层制作色彩过渡效果，然后
升级会员 