交互动画设计

沈春桥

目录

  • 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、了解帧的编号的命名方式。

.

  • 能力目标:

1、掌握元件实例的命名方式。

2、学会添加基础的命令,停止、点击播放、点击停止。

3、未按钮和帧添加不同的额命令。

.

  • 课程重难点

1、重点:实例名称的添加、基础命令的使用。

2、难点:理解帧命令和按钮命令的区别。

.

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

本课程是为绘制完毕的水晶按钮添加命令,让按钮元件控制影片剪辑元件的运动。

ActionScript是用来编写当动画运行到某个状态、或出现某个事件时所要执行的动作的脚本语言。不需整句输入,只需选择ActionScript命令的关键词,添入一些数据和对象名即可,使用方便。

一.常用的命令

ActionScript命令的大小写是敏感的,如: gotoAndPlay()是正确的,而 gotoAndplay()是错误 。

1、时间轴控制类命令

   play(); //让时间轴的指针开始播放

   stop(); //停止时间轴的指针在程序触发时的那个帧上

   gotoAndPlay(); //让指针跳转到某个帧,然后继续播放

   gotoAndStop(); //让指针跳转到某个帧,停止在那个帧上

   nextFrame(); //时间轴的指针往后走一帧

   prevFrame(); //时间轴的指针往前走一帧

2、按钮控制类命令

   格式:on (事件){

                要执行的代码

            }

   事件:release --松开鼠标左键

            releaseOutside --在Hit区外面松开鼠标左键

            press --按下鼠标左键

            rollOver --鼠标进入按钮的Hit区

            rollOut --鼠标离开按钮的Hit区     

3、超级链接命令

   格式:getURL("url","window","variables");

   参数:url  可以是http://www.gdut.edu.cn,也可以是同层目录的某个文件(如:aaa.swf)或上层目录的文件(如:../aaa.swf)。

         Window    _self:在当前的浏览器打开链接

                     _blank:在新窗口打开网页

                     _parent:在上一级窗口打开链接

         variables  参数的传输方式 ,一般不使用。                           

4、Movie Clip控制类命令

格式:onClipEvent(事件){代码}

 

事件:load --当载入MC时执行。

         unload --卸载,当MC卸载的时候执行

         enterFrame--在MC的每个帧都执行一次代码   

         mouseDown--在场景内按下鼠标就执行代码

         mouseMove --只要移动鼠标就执行代码

         mouseUp –当松开鼠标时就执行代码 


ActionScript写在何处,何时会被触发执行。ActionScript可写在三个地方:

1、关键帧上。写在关键帧上时,当时间轴上的播放线走到这个关键帧的时候,AS就被触发执行了。

2、按钮上。写在按钮上时,当操作按钮时AS就被触发执行。

3、Movie Clip上。写在MC上时,当MC出现某个事件时就被触发执行。


.


.

二、观看视频讲解:


.

三、课堂操作图片资源:绘制以下按钮,并且添加按钮命令,制作成具有互动效果的按钮。

四、课堂练习操作例子。


.

五、课堂提问:

1.用到了什么补间,为什么?

2.元件名称和实例名称的区别在哪里?

3.透明按钮的制作方式。鼠标移入和移出的命令分别是什么?

4.用到了什么补间,为什么?

5.元件名称和实例名称的区别在哪里?