武汉环境仪器有限公司:U5动画零起点(上)

来源:百度文库 编辑:偶看新闻 时间:2024/03/28 22:58:39

第一节

什么是帧

首先动画里常常会提到“帧”!像flash还有什么“关键帧”之类的我也不敢敷衍大家随便乱说一通,后去网上查了一下(哎!不敢劳烦各位亲自动手去查,小弟我自愿当下苦力的帮大家找来)             大概意思就是说一秒钟播放的影片数,每个影片就叫一个“帧”。我通俗地理解为一个gif动画就是由几张图片组合而成的,那么它内部组成的每一张图片就是它的帧!

我的一些感想

其实gif动画说白了就是“不同”的几张图片合在一起!大家可以看到“不同”两字我是用引号的!这个不同就是动画的关键所在!把“不同”引申一下叫“变化”,只要合成的每一张图片都不同就肯定有动态效果的,所以变化是最重要的,这里也把变化的几种类型总结一下,总结之前先看个变化的例子

例子:闪光字

假如有两个相同的字,在其中一个字上加霓虹效果,另一个字不变,然后合成在一起就是一个闪光字的效果,一个有霓虹一个没有,这就存在了不同存在了变化

几种变化类型的总结

①位置变化

解释:具体指对象在画布中的位置变化

(U5中对象的位置是用坐标来描述的)

② 形态变化

解释:形状上与属性上的一些变化

具体是指对象的大小变化颜色变化等。。。。。。

③透明度变化               

解释:如一个对象渐渐消失就是一个透明度的变化,幻影效果就是用透明度变化做的。

④速度变化

解释: 对象运动的快慢变化就是速度变化

因为世界上运动的物体不可能每个都是匀速运动的

最后大家需要了解下ulead gif animator这个软件的界面就算是完成本节内容

后记:

                  这几天有些朋友给我百度留言说某某步不会,然后给他说这个问题的时候,说了些面板的时候,对方却不知道是什么东西,这就造成了很大的不便,大家最起码要知道 对象管理器(有时也叫对象管理面板)以及帧面板跟画布要弄清楚!


第二节

效果图:

先看这两张素材图:

然后我们需要处理一下素材图,把两张素材图合并在一起,并再进行一次复制。最后处理完的效果见下:

现在我们开始做第一个基础效果,让图片从左到右循环着动。我们可以像以前一样,把素材图片导入U5中,然后分别移动每帧中素材图的位置,这是常规的做法,步骤烦琐,比较麻烦。我们使用“两者之间”这一操作几步就能搞定。

制作步骤:[下面会提供整个的动态演示,先看看文字说明,熟悉下步骤]

1.启动U5,文件→新建画布尺寸为 200*108

2.文件→添加图象[目的是为了导入素材图]

3.点相同的帧将第1帧复制一次从而生成第2帧

4.这一步是移动第2帧里的图象。因为我们已经计算好需要移动的距离,所以我们这里不必老老实实地用鼠标去移动图象,我们直接调整2帧里图像的位置。在第2帧的画布中点一下图象,然后鼠标右键选择对象属性,再继续选择位置与尺寸,把左调整为-273。[记得是要先选择上图象以后再鼠标右键否则是选不到对象属性的,另外为什么是-273呢?这个数值是这个素材图象的宽度的一半负号表示往左边移动,合起来的意思是让图片往左边移动273象素]

5.按住ctrl键不放 分别在帧面板区中单击第1帧与第2帧使得两帧都被选择,然后再鼠标右键选择两者之间。然后在画面帧中把插入帧设置为10,对象中的中间对象选择全部显示对象,中间对象属性,选择位置,透明在这个效果中可选可不选。最后点确定。然后看看效果,是不是完美地循环滚动了。

GIF动画演示:

两者之间这一操作在动画零起点的补间动画中有介绍过。U5中用它来做移动动画非常的方便快捷,只要前后两者之间存在“位置”差异,那么使用两者之间,中间过程的帧就自动生成。现在回头看一下为什么要把图片素材处理成四张,并让位置移动到一半。可能你现在还体会不到为什么要处理成这个样子,这需要一个过程,先记下来跟着做几次再慢慢体会,我也是经过N次的操作才总结出来的,不是一来就会的。


第三节 做一个会动的足球

三个基础操作介绍  

一.新建

方法:          启动U5→文件→新建             然后就可以设置新建的画布大小以及背景的颜色

二.添加图象(其实这就是添加一个素材对象的操作)

方法: 启动U5→文件→添加图象

(提示:这里如果是选择打开图象,效果跟添加图象是完全不同的,如果时间多把这个贴子发完了,在补发一个添加图象制作动画的例子,用这个例子来说明他们的不同)

三.相同的帧(这是一个复制帧的操作,并且这个复制具有双方向的关联关系,在复制操作的时候会详细介绍,因为这是U5中最难的操作也是最重要的操作之一)

方法一:对着帧点鼠标右键→选择相同的帧

方法二:直接点快捷图标

下面先来看方法一的示例图

OK!介绍完了上面三个基础操作,下面就开始制作实例咯!首先是先介绍原理,这个例子是一个位置变化类型的动画,用三帧来完成实例。第一帧我们把对象的位置调整到左边,第二帧把对象的位置调整到中间,第三帧的位置是把对象移动到右边。这样只要按一定速度播放这三帧就是一个从左运动到右的动画咯!

 

接着来分析这个动画,如何来制作,首先我们是要做个从左运动到右边的球,表演者是球,这个球不是自己画的是直接从外部导入一个素材,所以就需要用到一个添加素材的操作也就是上面介绍的二.添加图象。添加进去以后,只有一帧,另外两帧就是添加相同的帧,为的重复利用球那个元件。重复利用元件的好处昨天已经介绍过了。接着就只需要在各个帧调整每个对象的位置。最后调整下速度就完成了这个实例。(该足球素材为QQ表情里的)

下面就是具体的操作方法:

①启动U5→文件新建→设置画布为高120宽120,背景白色

②文件→添加图象(然后在你的电脑里找到那个素材)

③进行两次添加帧操作

④将第三帧里的对象移动到右边,再将第二帧里的对象移动到中间。(此步骤发贴时由于自己粗心大意忘了加上,特别感谢衣锦夜行提出这一问题)

提示:第二步添加图象后,系统默认选择了选取工具并且该对象是处于左上角坐标位置为(0,0),下面的示例动画是已经把对象移动到下面后再进行其他操作的。

下图为动画演示

 


第四节 幻灯片效果

使用工具:Ulead gif animator5

◆本节幻灯片效果图预览

◆目的

用一个幻灯片实例说明添加图象的使用,以及区分添加图象与打开图象的不同之处.

◆准备阶段

准备三张素材图,为了效果美观把三张素材图处理为统一大小。这里我处理为长*宽为80*120象素,侵权对象为瞎猫Kelly、助理。(特别鸣谢一下)

◆制作过程

大体思路:整个GIF用三帧来完成,各个帧显示不同的图片以达到幻灯片效果

▲详细步骤

1.文件→新建(如图)

此时会弹出新建对话框,这里设置画布的宽度与高度,这里设置为80*120,这个长宽是依据素材图的大小来确定的。

2.制作第一帧       文件→添加图象(选择第一张素材图并打开)

第一帧制作完成

3.新建第二帧       在帧面板中点“添加帧”(如图)

点后便会在帧面板中自动产生第二帧,在GIF制作中这是个频繁使用的操作作用就是新建帧,对于新手请注意这一点,以后也不再重复介绍了!

   

下为点添加帧后帧面板的图示

4.制作第二帧        文件→添加图象(选择第二张素材图并打开)

第二帧制作完成

图略方法参考第2步

5.新建第三帧      在帧面板中点“添加帧”

图略方法参考第3步

6.制作第三帧      文件→添加图象(选择第三张素材图并打开)

第三帧制作完成

7.文件→另存为GIF文件

这样就保存为了GIF动画了,关于帧速度调节请点此查看

◆自我探讨

上面的方法并不是制作幻灯片的最简方法,用此方法重在体会添加图象的用法,另外,假如想在一帧中加入多个素材对象,想象该怎么办,最后大家除了做一个幻灯片的GIF练习外,动手实验下打开图象以及添加图象的的操作。


第五节 复制操作

在U5里面有两个复制,一个是帧的复制一个是对象的复制。这两个复制还是有一些区别的。在帧复制(相同帧)里是全部都复制,而且复制后的帧跟原来的帧存在了双方向的关联关系。双方向的关联关系就是说,假如你想复制A,然后得到一个A副本,那么无论改变A还是A副本的属性,只要改变其中一个,另一个也会变。而这里的属性是包括它的大小、颜色、倾斜度等等。这里值得提示的是,在单单改变位置的时候是不存在双方向关联关系的。上一节介绍的运动的实例我们全都只是改变他们的位置而已,所以没发现这个规律,大家可以做个实验,同样是先进行相同帧的操作,然后你在任意一帧里改变它的大小,你会发现前后两帧都会发生改变。

            好了!现在开始介绍如何进行复制操作,介绍之前先提示下大家,在U5里面复制的操作也是最常用最重要的操作之一,本次活动都是挑最常用最实用的操作介绍的。所以请大家务必掌握好这个操作。

复制对象的方法:

①选择你需要复制的对象

②选择你需要复制到的地方,也就是说你想复制到哪帧你就选择哪帧

③点快捷图标----相同的选定对象 (这个其实就是复制功能的菜单)

这样就能够实现复制功能。下面就用动画演示来介绍一下这个复制操作

以上是把第一帧里的足球复制到第三帧去。。。

大家自己可以做两个练习。。一个是把对象复制到不同帧去

另一个是把对象就复制到该帧,如果是复制到同一帧那么第二步就省去了。但是你复制过后两个对象是完全重叠的,在画布中只能看到一个。只要你用鼠标把其中一个移动一下就可以看到两个了。。。

在中国gif论坛培训活动中 会员想飞的鱼学后自己思考着利用这个操作做的一个动画


第六节 文本工具的使用

 

原创教程,转载自控制欲望搏客              作者          黑白灰

用对象做动画的时候有两种方式,一种是直接到其他地方找好素材导入到U5中使用;另一种就是可以自己画或是自己在软件里想办法制作出来。

           前几节做那些足球移动啊,就是从外部导入的足球。以后介绍到了选区跟画笔工具就能够自己画一些对象出来制作一些动态效果。大家比较常见的对象就是图象,接下来几节是介绍 文字 这个表演对象,而文字对象就是用文本工具生成的。这节是先简单介绍下文本工具的使用,接着就用几个实际例子来看看文本工具的具体应用。比如跳动字、变色字、翻转字等等。。。

     文本工具的使用方法:

        ①启动U5并新建合适画布  

        ②选择文本工具  

        ③选择文本工具后将鼠标移动到画布中(到画布那一刻时注意鼠标是有变化的),接着在画布中单击鼠标左键       

        ④单击鼠标后便会弹出文本条目框来,然后输入文字点确定后便可以在画布中看到你输入的文字。

        下面是从第②步到第③步的gif动画演示,后面并没有把所有完整的文字输入过程演示出来,主要是制作起来比较烦琐浪费时间。大家动手照着做应该不会有太大问题。另外有一些文字工具常出现的问题,大家可以到常见问题汇总中查看。有什么问题也可以直接跟贴。


第七节 拆分文本操作

这节是介绍跳跃字的制作前需要会的操作,其实跳跃字的制作的动画类型也是属于位置移动,只是因为以前还没介绍文本工具的使用所以就放这里介绍咯!先看看这个跳跃字的效果再来介绍其制作方面的原理。

诸如此类的动态文字,都属于位置移动类的效果,而这类效果只要善于使用手中那小小的鼠标,只用一个移动操作便能够完成这类效果。而完成这个效果之前先介绍一个拆分文本的操作。为什么要拆分文本呢!上次介绍的文本工具使用里大家如果进行过练习就应该注意到,输出的“所有文字”都是一个连在一起的整体,同理当我们在制作跳跃字的时候,使用文本工具输出“跳跃字”这三个字也是连在一起的。而从效果中可以看到这三个字是一个字一个字的在动。当然你可以用文本工具一个字一个字的生成,意思就是分别进行三次文本工具的操作。每次操作都只输出一个字。但这样太麻烦。为了方便我们直接输出“跳跃字”这三个字然后使用拆分文本操作就能将这三个字分成单独的三个字。

拆分文本的方法:

①利用文本工具随意输出几个文字

②选择移动工具并选择该文字对象→鼠标右键→文本→拆分文本

(大家可以看到文本里有三个菜单编辑文本、霓虹及拆分文本,大家可以自己动手试下其他两个操作)

  

最后拆分出来的效果是 每个字的边缘都有虚边的框,而拆分之前是所有字这个整体的外部才有虚框

下面来看看我徒弟ringeasy为这个操作制作的动画演示(因为这个是她制作的第一个动画演示稍微简陋了点不过大家应该都还能看懂的)


第八节     U5变形工具的使用


第九节 U5帧速度调节