交互动画设计

沈春桥

目录

  • 1 第一单元 课程软件基础知识
    • 1.1 animate软件的基本动画制作
    • 1.2 认识软件
    • 1.3 实践操作:图形绘制
    • 1.4 课后拓展内容:帧的认识
    • 1.5 特色资源
  • 2 第二单元 简单的交互动画制作
    • 2.1 水晶按钮的绘制
    • 2.2 水晶按钮-按钮状态动画制作
    • 2.3 时间轴控制命令
    • 2.4 课后拓展内容:鼠标控制Banner条循环出现
  • 3 第三单元:补间动画基础
    • 3.1 卡通人物动画制作-绘制
    • 3.2 人物走路和脸部动作
    • 3.3 综合例子:骑车动画制作
    • 3.4 骑车动画:补间和输出
    • 3.5 课后拓展资源:卡通人物脸部表情
    • 3.6 特色资源:人物走路动画
  • 4 第四单元:摩天轮动画制作
    • 4.1 摩天轮制作
    • 4.2 Adobe Animate CC Html5动画实例-转盘动画制作
    • 4.3 特色资源
  • 5 第五单元:遮罩动画的制作
    • 5.1 水波制作
    • 5.2 扇子动画制作
    • 5.3 特色资源:小的交互广告条实例
    • 5.4 课后内容延展:标志的简单动效
  • 6 第六单元  交互网页例子 首页制作
    • 6.1 片头制作-弹跳小球制作
    • 6.2 首页渐变背景制作
  • 7 第七单元:交互网页例子内页制作
    • 7.1 内页渐变制作
    • 7.2 按钮控制帧
  • 8 第八单元:界面设计内页制作2
    • 8.1 弹跳小球的出场和控制
    • 8.2 旋转和控制
    • 8.3 命令添加-按钮控制影片剪辑
    • 8.4 特色资源
  • 9 第九单元:过场动画卷轴
    • 9.1 第一课时 课前预热:各种不同的卷轴动画
    • 9.2 第二课卷轴动画制作
  • 10 第十单元  APP界面
    • 10.1 课前预热:下拉菜单的形式
    • 10.2 页面导航菜单制作-绘制
    • 10.3 页面导航菜单制作-动画和命令
    • 10.4 页面导航菜单制作-三级菜单动画制作
    • 10.5 课后拓展练习:APP界面动画
  • 11 第十一单元: 交互动效
    • 11.1 课前预热:UI产品中的动效
    • 11.2 UI交互动效的基本规则
    • 11.3 Action Script事件知识点讲解
    • 11.4 AN软件as3.0加载和卸载库里命令
    • 11.5 课后拓展学习UI界面
  • 12 第十二单元 APP案例-中华博览项目
    • 12.1 课前预热
    • 12.2 音乐控制和场景交互动画
    • 12.3 音乐控制动画制作
    • 12.4 课后拓展:APP里下拉菜单的实现方法
  • 13 第十三单元:中华博览项目 组件和按钮
    • 13.1 课前预热:APP首页制作
    • 13.2 HTML5组件和页面合成 中华博览APP
    • 13.3 课后拓展知识
  • 14 第十四单元 游戏交互
    • 14.1 课前预热:交互网站制作流程
    • 14.2 长恨歌游戏交互界面制作1
    • 14.3 长恨歌游戏交互界面制作2
  • 15 十五单元 游戏交互界面二
    • 15.1 大话西游界面世界一
    • 15.2 大话西游界面设计
    • 15.3 课后拓展:水壶浇水控制游戏
  • 16 第十六单元:大作业
    • 16.1 作业要求和参考资料
    • 16.2 创建和发布作品
    • 16.3 大作业视频例子欣赏
    • 16.4 延展:UI交互界面设计构图
    • 16.5 延展2:优秀作品设计欣赏
卡通人物动画制作-绘制

卡通人物动画制作-绘制部分

.

  • 知识目标:

1、认识钢笔和线条基础的图形绘制工具。

2、了解软件的颜色填充、渐变填充工具。

3、理解图形元件的圆心点的概念

4、软件的舞台和时间的概念。

.

  • 能力目标:

1、能够用绘图工具绘制圆形。

2、能够填充渐变颜色,并且用渐变变形工具调整渐变颜色。

3、能够将绘制矢量图转换为图形元件,并且添加补间动画。

.

  • 课程重难点

1、重点:图形的绘制。

2、难点:图形元件的转化和圆心点的调整。

.

  • 课程概况、教学主要内容:

课程概况:

1、工具介绍。

2、矩形工具

3、选择工具( )、直接选择( )工具介绍。

4、渐变工具介绍。

5、制作矩形,用选择工具、直接选择工具选择进行对比。

6、钢笔工具介绍

教学主要内容:

1、我们将软件打开,然后进入到软件的操作界面如图所示:

 

2、打开之后在工具箱内找到钢笔工具和线条工具。用线条的形式绘制线条外形。 


3、选择钢笔工具在舞台上绘制出卡通的头部,并在头部上画出头发。

4、再在头部上画出眼睛和嘴巴。绘制好以后右键转换为图形原件。


5、再在头部下面画出卡通的身体和两只胳膊。绘制完成后右键转换为图形原件。调节圆心点到关节部位。任意变形工具,选中圆心点下移。


圆心点的下移。


6、用线条工具绘制身体图形,身子和围裙部分不用分离,直接转换成一个图形。再在工具箱内找到颜料桶工具,填充颜色。用变形工具调节圆心点到肚子位置。

 


7、选择颜料桶工具将填充色设置为黑色,然后将头发、衣服、腿部填充颜色,这样我们的卡通人物就画好了。分别进行转换为图形原件,并且调节圆心点到关节点。


作业布置:下载下面的图片例子进行绘制。



.


. 

观看视频讲解:



.

二、动作的调整。

1、将绘制好的图形元件放到场景中拼合。


2、用变形工具选中图形元件,调整每个圆心点。

3、选中全部,菜单里-时间轴-分散到图层。

4、打关键帧,调节动画。关键帧最好一起选定,一起打。用任意变形工具调节动作。

5、打上传统动画补间。


6、举手部分操作,可以一起选定要移动的两个部分,任意变形工具后,又会出现一个零时的圆心点,可以调节这个圆心点来制作。



7、作业要求:给人物添加一个故事情节。制作动画。

.


观看视频演示:



.




.

三、作业要求:

完成人物的走路和抬手动画,大家可以自己发挥他的剧情设定,比如走走突然下雨了,突然摔了一跤等;

课后课程特色资源: