交互动画设计

沈春桥

目录

  • 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、认识AN软件。

2、了解软件的基础工具。

3、了解AN软件的工作面板。

4、理解软件的舞台和在时间轴的概念。

.

  • 能力目标:

1、能够独立安装animate软件。

2、能够在软件里调出不同的面板。

3、能够在舞台上绘制出基础的几何图形。

.

  • 课程重难点

1、重点:能够在animate软件里创建两种不同语言形式的文件。

2、难点:HTML5 CANVAS的文件的导出和生成方式。

.

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

设置文档的属性

1、 可以设置文档(舞台)的颜色,舞台的大小,帧频率等。

2、 Flash的帧速可以设定在 0.01-1000 以内的任意一个数值。

其中在Flash舞台属性面板里可以设定的范围是0.01-120


椭圆工具的使用

常用快捷键的使用:

1、 Shift:绘制正圆

2、 Alt:由中心向四周绘制椭圆

3、 Alt+shift:由中心向四周绘制正圆

更改椭圆的颜色:

1、 颜料桶工具:用来更改填充色

2、 墨水瓶工具:用来更改边框色

矩形和多边形工具的使用

常用快捷键的使用:

1、 Shift:绘制正方形

2、 Alt:由中心向四周绘制矩形

3、 Alt+Shift:由中心向四周绘制正方形 

矩形属性面板

1、 矩形属性面板可以设置矩形的各种属性:如圆角大小等

当将圆角值设为正数,表示是外圆角,如果数设为负数,表示是内圆角。同时可以设置四个角的圆角度。

2、 单击矩形边框可以选择一条边,双击可以选择所有边。

多边形属性面板

1、 利用多边形工具可以绘制多边形和星形两种图形。

2、 可以设置多边形的边数和星形的角数。

钢笔工具

1、 钢笔工具可以绘制直线也可以绘制曲线。

2、 为了避免曲线的控制手柄影响后面所绘制的图形,可以用钢笔工具在曲线点上单击减掉一边控制手柄。

3、 构成直线的点叫直线点,构成曲线的点叫曲线点。直线点无控制手柄,曲线点有控制手柄。

4、 钢笔工具所绘制的图形如果需要修改可以用部分选取工具。改变图形的形状其实就是修改节点的位置。

添加、删除节点以及直线和曲线的相互转换

1、 添加锚点工具可以用来在所绘制的图形(直线和曲线)上加点。

2、 删除锚点工具可以用来在删除图形(直线和曲线)上的节点。

3、 转换锚点工具可以实现直线点和曲线点的相互转换。用转换锚点工具在曲线点上点击可以将曲线点转换成直线点,在直线点上单击并拖动可以将直线点转换成曲线点。

线条工具绘制各种长度和角度的直线。

 

铅笔工具绘制不规则的曲线和直线。

 

矩形工具位于矩形工具组合中,可绘制矩形、正方形、圆角矩形等。


椭圆工具作为常用绘图工具,能绘制正圆、椭圆、圆环和圆弧。圆弧的绘制需在属性面板里设置好开始角度和结束角度,而圆环需设置内径。刷子工具能绘制出笔刷般的笔触。

卡通兔子的绘制:主要步骤,钢笔工具使用,填充颜色,线条的拉升调节。第一步用线条工具绘制轮廓,第二步上色,第三步完善细节。

.


二、课后自学回顾:基础图形工具使用详细介绍:



.


课程资源: