第三章 如何创建时间轴动画
- 格式:doc
- 大小:146.00 KB
- 文档页数:5
职称计算机Dreamwaver教程:时间轴及其创建方法导语:时间轴实根据时间的流逝移动图层位置的方式显示动画效果的一种动画编辑界面,在时间轴中包含了制作动画时所必须的各种功能。
一、时间轴及创建时间轴动画1、时间轴的各项功能(1)时间轴*出菜单:表示当前的时间轴名称。
(2)时间轴指针:在界面上显示当前位置的帧。
(3)不管时间轴在哪个位置,一直移动到第一帧。
(4)表示时间指针的当前位置。
(5)表示每秒显示的帧数。
默认值时15帧。
增加帧数值,则动画播放的速度将加快。
(6)自动不放:选中该项,则网页文档中应用动画后自动运行。
(7)LOOP(循环):选中该项,则继续反复时间轴上的动画。
(8)行为通道:在指定帧中选选择要运行的行为。
(9)关键帧:可以变化的帧。
(10)图层条:意味着*入了“层”等对象。
(11)图层通道:它是用于编辑图层的空间。
2、在DW8中显示时间轴选择菜单栏的窗口/时间轴或按快捷键Alt+F9,则显示时间轴。
二、创建时间轴动画时间线只能移动分层对象,如果想移动文本或图像之类的对象,可以将其放在层中。
1、打开09文件,把光标放到页面左上方的位置,在*入面板选择布局>绘制层,创建六个层。
分别输入文字“小”、“木”、“web”、“欢”、“迎”、“你”,将图层排列在适当的位置。
2、打开时间轴。
选择层1后,拖动到时间轴的第一行上。
3、用同样的方法,把包含有其它文字的层也根据文字的顺序拖动到时间轴的第2-6行上。
4、为了减慢文字移动的速度,把时间轴中的15帧全部扩展为25帧。
5、在时间轴中选择Layer1的第一帧,在属*面板的顶端坐标值(T)中输入(-50),这样,可以把文字放置到上侧。
6、用同样的方法选择其余层的第一帧后,把顶端坐标值(T)统一设定为(-50)。
7、为了每个一段时间下落一个文字,从第二个动画条开始向后移动5帧。
勾选“自动播放选项”。
8、按F12浏览效果。
介绍时间轴动画的制作跳动的小球动画下面我详细地向大家介绍时间轴动画的制作,先来看看如何制作跳动的小球动画。
我们学习改变图形的位置。
如果我们的动画单次播放时间不需要很长,我们可以做一下文档时间设置,可以把时间值设小一点。
先来做前期准备:在两个层上画两个图形,然后打开时间轴动画。
我们先来做红球的动画,也就是图层2。
先把红球放到外面(最右边),打开位置前面的小钟,生成一个起始帧黄色小棱角。
然后拖动拉杆一段距离(也就是时间)然后把红球移动进来并放好位置,此时他会自动生成一个关键帧。
然后又移动拉杆,再动红球我们把红球放到外面以结束红球的运动。
我们再来做兰球的工作。
先把兰球放外面,把拉杆移动一段距离再开启小钟,这样就有一个红球运动一段时间兰球再丢进来的效果。
用编辑红球的方法来编辑兰球的运动。
播放一下看效果。
如果是矢量蒙板图形,要选择矢量蒙板位置.还要改变一下移动工具.如果想要图形运动过程中停留一段时间,我们可以点右键拷贝当前关键帧然后移动拉杆再粘贴关键帧.雷达扫描动画下面我们再来学习一下用透明度和样式来制作雷达扫描动画效果先做好前期准备,画好雷达面板,另外再建一层点上几个小白点.把雷达层加个渐变叠加.设好渐变条打开时间轴动画,我们把文档时间设为四秒,这样好记一点.打开雷达图层前面的样式小钟,调整渐变角度为90把拉杆移到第一秒,并改变渐变角度第二秒照猫画虎,第四秒直接拷贝第一帧然后粘贴.如果只设三个关键帧,他将逆时针旋转再来做小点层的工作,它没有移动,主要是渐隐渐现的一个过程,我们只要调整各关键帧上图层的透明度就行了.移动拉杆,注意雷达面板上的那条放射线,在合适的时间上建立关键帧(打开小点图层上的不透明度小钟).调整不透明度为0.当放射线经过小点时改不透明度为100再次移动拉杆,在合适的时间上调整不透明度为0.原教程的动画效果。
PS利⽤时间轴制作动画教程我们⾸先要了解的是PS有5种类型的图层按顺序依次为像素图层、调整图层、⽂字图层、形状图层以及智能对象。
⽽对应的时间轴⾥⾯,各种类型的图层都有对应时间轴的动作属性,如图所⽰:可以得知所有的动作属性有:位置、不透明度、样式、图层蒙版位置、图层蒙版启⽤、变换、⽂字变形、⽮量蒙版位置、⽮量蒙版启⽤。
名称描述位置:像素图层中元素移动的位置,也可以理解成位移,它不包含旋转和缩放,并且对形状图层⽆效。
不透明度:图层的透明度,⽽调整填充则⽆效。
样式:图层样式,产⽣动画的是各种样式参数变化(即颜⾊、⾓度、⼤⼩、不透明度等参数)。
图层蒙版位置:暂不描述。
变换:动作最多的⼀个属性,其中包含移动、缩放、旋转、斜切、翻转,因此很多情况下需要把图层类型转换为智能对象才能做。
⽮量蒙版位置:形状图层中元素移动的位置。
制作⼀个动画的基本步骤1,创建⼀个500px×500px的画布,调出时间轴⾯板(窗⼝—时间轴)。
点击创建时间轴按钮,等⼀下因为当前只有⼀个图层,所以最好先新建⼀个图层再点击这个按钮,当然如果是要做背景透明的可以直接点击(事实上要做透明背景的只需隐藏背景图就⾏了),否则在制作动画的时候会有很繁琐的事等着你。
额外话:本⼈建议,当你要做⼀个设计的时候,新建带背景图层的⽂件(切图及少部分特殊的情况下可以新建透明背景的~),保留原⽣态纯正的背景图层,当你不需要的时候可以隐藏。
否则,就算你新建⼀个背景图层,加上任何锁定,并且把它改为同样的ID,它始终不是纯正的背景图层,聪明的你看字体就知道啦。
2,做⼀个颜⾊变化的动画⾸先思考,要做⼀个图层的颜⾊变化的动作,是属于时间轴上的哪个动作属性,我们可以很轻易的知道是样式,⽽如果改变图层图像本⾝的颜⾊,则⽆法产⽣动画。
先⽤形状⼯具画⼀个圆,然后到时间轴⾯板点击样式旁边的⼀个⼩钟启⽤关键帧(出现棱形)动画→给图层加上图层样式→颜⾊叠加打上勾并任意给个颜⾊,然后回到时间轴拖动时间线到想要的位置→双击图层调出图层样式→在颜⾊叠加设置另⼀种颜⾊。
PhotoshopCS3教程:时间轴动画实例PhotoshopCS3教程:时间轴制作动画现在我们正式开始利用时间轴来制作动画,这与我们之前的帧式动画有很大不同,但相比之下时间轴方式来的更直观和简便,也是我们以后最主要的制作方式。
接着上一课的内容,开始设定“悄然来去”的动画。
在时间轴调板中展开这个文字层的动画项目,如下图所示。
确保当前时间为0:00:00:00,同时注意红色箭头处的时间标杆应位于最左端,这就表示是处在起始时刻。
接着用移动工具将“悄然来去”移动到画面的右端。
然后在点击橙色箭头处的秒表按钮,这表示启动了“位置”这一动画项目,并且将目前该文字层的位置(画面最右端)记录在起始时刻。
时间轴区域中出现的黄色菱形就是该处包含记录的标志,这也称为关键帧,是时间轴的关键帧,与我们以前学习的过渡帧动画不同。
将时间标杆拉到最右边,使用移动工具将文字移动到画面最左端,这时会看到时间轴上的标杆处自动产生了一个关键帧。
如下图所示,并且注意在红色箭头处有一个菱形的“删除/添加”按钮,此时如果按下该按钮,将会删除时间标杆处已建立的关键帧。
如果标杆处没有关键帧,点击则可建立一个新帧。
需要注意的是,在这里我们的时间标杆往右最多只能拉动到04:04时刻处,而不是05:00。
这是因为05:00是动画最终结束的时刻,是“最后一帧结束时”的时刻,但我们现在需要设定的是“最后一帧开始时”的状态,而最后一帧本身将停留一段时间。
所以标杆并不会位于05:00时刻。
要记住帧是最小的单位。
通过以上的设定我们完成了“悄然来去”文字的位置移动设定。
接着来设定其透明度变化。
我们先弄个简单的,就是从开始时淡入,进行到一半时完全显现,然后淡出直到结束。
这样就需要3个关键帧进行设定,在开始时刻设定为0%,一半时设定为100%,结束时再设为0%即可完成。
大致如下图所示。
注意在时间轴方式下不能通过隐藏图层实现透明度变化。
当我们在第一步中将关键帧1设为0%后,如果向后拉动时间标杆,会发现在所有时间内透明度都是0%。
实训七利用时间轴制作动画设计目标:创建时间轴动画,使飞行器图像在页面上自由飞行,效果如下图所示。
相关知识点:创建时间轴动画在时间轴面板中添加关键帧控制动画速度改变图像和图层属性实训内容:一、准备工作(一)复制文件把“实训七利用时间轴制作动画\实训”中的“materials”文件夹复制到D:盘根目录。
(二)新建站点站点名称:利用时间轴制作动画站点根文件夹:D:\ materials二、创建时间轴动画(一)一个简单的直线运动的时间轴动画实例1.建立一个做直线运动的时间轴动画操作步骤如下:(1)打开ex9_1.html文档。
(2)在页面中添加一个新图层,在层中插入图像img9_1.gif,然后将图层移动到文档的右上方(动画的起始位置)。
(3)在菜单栏中选择“窗口”→“时间轴”命令打开时间轴面板。
(4)选择要创建动画的图层,用鼠标拖动图层到时间轴的第一帧处。
(5)当第一次在时间轴中添加对象时,会弹出提示框,告诉你可以改变该层的大小,位置,层顺序,以及可见性。
单击“确定”按钮,这时在时间轴通道中将出现一个紫色动画条,动画条中显示了图层的名称,如下图所示。
动画条(6)拖动动画条尾部的关键帧位置到100帧处(注意播放头也跟着移动到该处),将动画图层移动到文档的左上方(动画结束的位置),这时从动画起始位置到结束位置有一条线显示,这就是图层的的运动轨迹,如下图所示。
(7)单击播放按钮,可直接在网页中预览时间轴动画。
(8)选中“自动播放”复选框。
保证浏览器中的动画能自动播放。
(9)选中“循环”复选框。
保证动画在浏览器中能循环播放。
(10)预览网页。
2.将做直线运动的时间轴动画,改为做曲线运动操作步骤如下:(1)打开ex9_1.html,将文件另存为ex9_2.html。
(2)在时间轴面板中,选中动画条的第35帧,单击鼠标右键从弹出的快捷菜单中选择“增加关键帧”。
(3)在第35帧处,向下移动图层使运动轨迹呈现曲线状。
如何在Premiere中制作时间轴动画和连续剪辑在当今数字时代,视频制作已经成为了一种非常流行的媒体形式。
无论是在社交媒体上分享生活片段,还是在商业领域中制作专业的宣传视频,视频制作都已经成为了一项必备的技能。
而Adobe Premiere作为一款专业的视频编辑软件,为用户提供了丰富的功能和工具,使得视频制作变得更加轻松和有趣。
本文将介绍如何在Premiere中制作时间轴动画和连续剪辑,帮助读者更好地利用这款软件。
首先,让我们来了解一下时间轴动画的概念。
时间轴动画是指通过在时间轴上对素材进行调整和编辑,使得素材在播放时产生动态效果的一种技术。
在Premiere 中,我们可以利用关键帧(keyframe)来实现时间轴动画。
关键帧是指在时间轴上设置的特定时间点的标记,通过在不同的关键帧上对素材属性进行调整,可以实现素材的运动、旋转、缩放等效果。
要制作时间轴动画,首先需要导入素材到Premiere中。
可以通过点击“文件”菜单中的“导入”选项,选择要使用的素材文件并导入到项目中。
然后,将素材拖拽到时间轴上的视频轨道中。
接下来,选择要制作动画的素材,在“效果控制”面板中找到“位置”属性。
点击位置属性旁边的小钟图标,即可在时间轴上创建关键帧。
然后,将时间轴光标移动到另一个时间点,再次调整位置属性,并创建关键帧。
通过在不同的关键帧上调整位置属性,就可以实现素材的运动效果。
除了位置属性,Premiere还提供了丰富的属性和效果,可以用于制作更加复杂的时间轴动画。
例如,通过调整旋转属性可以实现素材的旋转效果,通过调整缩放属性可以实现素材的放大或缩小效果。
此外,还可以利用遮罩工具来实现素材的遮罩效果,通过调整透明度属性可以实现素材的淡入淡出效果等等。
通过灵活运用这些属性和效果,可以制作出令人惊艳的时间轴动画。
除了时间轴动画,连续剪辑也是视频制作中常用的技术之一。
连续剪辑是指将多个素材按照一定的顺序进行剪辑和组合,形成一个完整的视频作品。
第三章如何创建时间轴动画Macromedia Flash Basic 8 和Macromedia Flash Professional 8 提供了功能强大的动画创建工具。
在Flash 中,大多数简单的动画都是通过使用被称为补间的过程完成的。
补间是"在中间"的简称,它是指填充两个关键帧之间的帧,以便第一个关键帧中显示的图形更改为第二个关键帧中显示的图形。
在Flash 中可以创建两种类型的补间:补间动画和补间形状。
补间动画和补间形状的主要区别在于,补间动画针对组合对象或元件操作,而补间形状与不是元件且未组合的对象一起使用。
在本章中,您将学会如何创建补间动画,创建补间形状,在动画中复制和粘帖关键帧和改变动画速度。
1.0创建补间动画您可通过以下方法来创建补间动画:在起始关键帧中为实例、组合对象或文本定义属性,然后在后续关键帧中更改对象的属性。
Flash 在关键帧之间的帧中创建从一个关键帧到下一个关键帧的动画。
1.0创建补间动画,提取球元件
在时间轴("窗口">"时间轴")中,双击Layer 1 的标题并键入TireAnim。
按Enter 键(Windows) 或Return 键(Macintosh) 以重命名该图层。
在TireAnim 图层仍处于选中状态时,将Tire 影片剪辑从"库"窗口("窗口">"库")拖动到舞台上,并将它放在球的阴影上方。
在"选择"工具仍处于选中状态时,在TireAnim 图层中,选择第40 帧。
然后按F6 键插入一个关键帧。
选择第20 帧并按F6 键以添加另一个关键帧。
在播放头仍处于第20帧上时,按住Shift 键沿着直线移动球,并将球向上拖动。
在TireAnim 图层中,选择第 4 帧和第18 帧之间的任何帧。
在属性检查器中,从"补间"弹出菜单中选择"动作"。
这两个关键帧之间的时间轴中会出现一个箭头。
选择第20 帧和第29 帧之间的任何帧。
同样,使用"属性"检查器中的"补间"弹出菜单选择"动作"。
选择"文件">"保存"以保存所做的更改。
1.1创建补间形状
对于补间形状,请为一个关键帧中的形状指定属性,然后在后续关键帧中修改形状或者绘制另一个形状。
正如对于补间动画一样,Flash 在关键帧之间的帧中创建动画。
现在,您将为球的阴影设置补间,以便在球弹跳时,阴影会移动并淡出。
单击ShadowAnim 图层,将其选中。
选择第40 帧并按F6 键以插入一个关键帧,然后选择第20 帧并按F6 键以插入一个关键帧。
在播放头位于第20 帧上时,选择"选择"工具。
将球稍微向上和向右拖动。
在第20 帧仍处于选中状态时,选择"工具"面板中的"滴管"工具,然后单击阴影对象。
如果尚未打开"混色器",请选择"窗口">"混色器"将其打开,然后将Alpha 值从25% 更改为10%。
单击"混色器"右上侧的弹出菜单控件,然后选择"关闭面板"。
在ShadowAnim 图层上,选择第4 帧和第18帧之间的任何帧。
在属性检查器中,从"补间"弹出菜单中选择"形状"。
在ShadowAnim 图层上,选择第16 帧和第29 帧之间的任何帧。
同样,使用属性检查器中的"补间"弹出菜单来选择"形状"。
1.2在动画中复制和粘贴关键帧
为了使球在弹跳时看上去逼真,应当让它在每次弹跳时都稍微压下去一些。
您可以通过以下方法创建这种特效:在动画的第 1 帧中改变球的形状,然后在第30 帧中复制第1 帧。
使用"选择"工具,选择TireAnim 图层的第1 帧。
然后按F6 键以添加一个关键帧。
此时会添加一个新关键帧,播放头将移到第 2 帧。
再次选择TireAnim 图层的第 1 帧。
在"工具"面板中,选择"任意变形"工具。
球将被选中,并在它的周围出现变形控制块。
选择变形中心点(靠近影片剪辑中心的小圆圈),并将它拖到球的底部。
中心点将与下面中间的变形手柄贴紧。
在舞台上,向下拖动上面中间的变形手柄,使球的形状稍微压下去一些。
如有必要,可拖动球,使其在阴影上对齐。
要查看位置,请将播放头拖到第 1 帧和第2 帧上。
保存文件。
注意:
始终在尝试补间操作之前保存文档,包括复制、剪切和粘贴帧。
如果您执行了错误操作,则可以还原到保存过的文档。
右键单击(Windows) 或按住Ctrl 键单击(Macintosh)"TireAnim"图层的第1 帧,然后从上下文菜单中选择"复制帧"。
选择TireAnim 图层的第29 帧,然后按F6 键插入一个关键帧。
在TireAnim 图层的第40 帧中,右键单击(Windows) 或按住Ctrl 键单击(Macintosh),然后从上下文菜单中选择"粘贴帧"。
选择"控制">"测试影片"来查看动画。
关闭SWF 文件窗口以返回到创作环境。
1.3更改速度(每秒帧数)
帧频用每秒帧数(fps) 来度量,它是动画的播放速度。
在默认情况下,Flash 动画以12 fps 的速率播放,该速率最适于播放Web 动画。
但是,有时可能需要更改fps 速率。
现在,您将把帧频更改为每秒46 帧,这会使球看上去弹跳得更快。
1.在舞台上远离任何对象的区域单击鼠标。
2.在属性检查器的"帧频"文本框中键入46。
该帧频会应用于整个Flash 文档,而不仅仅是该文档中的动画
1.4创建逐帧动画
要创建逐帧动画,需要将每个帧都定义为关键帧,然后给每个帧创建不同的图像。
每个新关键帧最初包含的内容和它前面的关键帧是一样的,因此可以递增地修改动画中的帧。
要创建逐帧
单击图层名称使之成为活动层,然后在动画开始播放的图层中选择一个帧。
1. 如果该帧不是关键帧,请选择"插入">"时间轴">"关键帧"使之成为一个关键帧。
2. 在序列的第一个帧上创建插图。
可以使用绘画工具、从剪贴板中粘贴图形,或导入一个文件。
3. 单击同一行中右侧的下一帧,然后选择"插入">"时间轴">"关键帧",或者右击(Windows) 或按住Control 键单击(Macintosh) 它,然后从上下文菜单中选择"插入关键帧",这将添加一个新的关键帧,其内容和第一个关键帧一样。
4. 在舞台中改变该帧的内容,开发动画接下来的增量。
5. 要完成逐帧动画序列,重复第4 步和第5 步,直到创建了所需的动作。
6. 要测试动画序列,请选择"控制">"播放"或单击"控制器"上的"播放"按钮
7. 将制作好的动画进行发布并保存。