交互动画设计

沈春桥

目录

  • 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:优秀作品设计欣赏
AN软件as3.0加载和卸载库里命令

AN S3.0 教程:载入库中的影片剪辑

.

  • 知识目标:

1、掌握加载库中影片剪辑的命令形式。

2、了解几种不同的加载方式。

.

  • 能力目标:

1、能够给按钮添加命令调配库中的影片剪辑。

2、学会为库里的影片剪辑设定加载属性。

.

  • 课程重难点

1、重点:按钮添加命令调配库中的影片剪辑

2、难点:触发命令的编写方式。

.

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

 课堂演示。在 AN 创作环境中,可以从库中拖拽影片剪辑到舞台上,使它们出现在 SWF 文件中。当使用 ActionScript 来添加影片剪辑时,实际上也是将影片添加一个实例到时间轴上。帧是时间轴的一部分,你可以使用动作面板将 as 代码与帧关联。因此时间轴成了用 as 代码添加的显示对象的父容器,除非另一个显示对象被指定。

.

一、课程知识讲解:

添加一个影片剪辑到当前时间轴:

1、下面的例子从.fla 库中导入一个名为“鹰”的影片剪辑 

1、新建 AN文档(AS3),存盘。

2、打开“鹰”的影片剪辑,复制到库中,(在这里不讲解影片剪辑制作的过程)。

3、右键点击“鹰”影片剪辑,在下拉菜单中点击【属性】打开属性面板,勾选【为 AstionScript导出】在类:文本框中输入:hawk,按【确定】如图:

4、返回场景1,选中图层1的第帧,按 F9 键,打开动作面板输入代码:

var myhaw:hawk = new hawk(); //用 var 声明一个实例名:myhaw 给影片剪辑。

addChild(myhaw); // 用 addChild()命令将实例 myhaw 加入显示列表。

提示:当没有明确指定显示容器时,影片剪辑实例是被添加到时间轴的当前帧。

测试影片,影片已经显示在屏幕上了。参见未命名1.fla 文档

5、我们已经把影片剪辑添加到时间轴上了,下面我们继续添加代码,做一个鹰跟随鼠标移动。打开动作面板,加入下面代码:

var myhaw:hawk = new hawk();

//注册鼠标单击事件侦听器

stage.addEventListener(MouseEvent.CLICK, addhawk);

//定义侦听器函数

function addhawk(e:MouseEvent):void {

addChild(myhaw);

}

//注册鼠标移动事件侦听器

stage.addEventListener(MouseEvent.MOUSE_MOVE, movehaw);

//定义移动事件侦听器函数

function movehaw(e:MouseEvent):void {

//使 myhaw 位于鼠标位置

myhaw.x = stage.mouseX;

myhaw.y = stage.mouseY;

}


上面的示例使用了事件的处理和函数的声明。

二、下面是一个影片剪辑拖放的示例: 

具体创建过程不再重复,参照上面示例

代码:

//声明实例

var myhaw:hawk = new hawk();

//添加到显示列表

addChild(myhaw);

//myhaw 位置(x,y 坐标)

myhaw.x = 100;

myhaw.y = 100;

//注册鼠标按下事件侦听器

myhaw.addEventListener(MouseEvent.MOUSE_DOWN, draghaw);

//注册鼠标释放事件侦听器

myhaw.addEventListener(MouseEvent.MOUSE_UP, drophaw);

//定义鼠标按下事件侦听器函数

function draghaw(dragevent:MouseEvent):void {

//开始拖动

dragevent.currentTarget.startDrag();

}

//定义鼠标释放事件侦听器函数

function drophaw(dropevent:MouseEvent):void {

//停止拖动

dropevent.currentTarget.stopDrag();

}

按下鼠标拖拽物体,当释放鼠标时,物体会停止跟随指针。

三、添加一个影片剪辑到一个容器 

DisplayObjectContainer 对象(和继承 DisplayObjectContainer 类所创建的对象)可以包含零个或多个显示项。

就像移动容器一样,所有容器对象中的显示项相对容器移动。

示例:

1、新建 文档(AS3),打开未命名 1.fla 文件。

2、使用库的下拉菜单来选择“未命名 1.fla”的库。

3、将影片剪辑从库中拖放到舞台上。

4、通过库的下拉菜单选择回到新文件的库。如图:

注意:“鹰”的影片剪辑及相关素材已经列在当前文件的库中了。

5、删除舞台上的影片剪辑。

6、选择时间轴第 1 帧,命名:as,打开动作面板,输入代码:

//声明实例

var myhaw:hawk = new hawk();

//添加到显示列表

addChild(myhaw);

//myhaw 位置(x,y 坐标)

myhaw.x = 100;

myhaw.y = 100;

//注册鼠标按下事件侦听器

myhaw.addEventListener(MouseEvent.MOUSE_DOWN, draghaw);

//注册鼠标释放事件侦听器

myhaw.addEventListener(MouseEvent.MOUSE_UP, drophaw);

//定义鼠标按下事件侦听器函数

function draghaw(dragevent:MouseEvent):void {

//开始拖动

dragevent.currentTarget.startDrag();

}

//定义鼠标释放事件侦听器函数

function drophaw(dropevent:MouseEvent):void {

//停止拖动

dropevent.currentTarget.stopDrag();

}


7、新建图层,并把它拖到 as 层的下方,重命名为 text。选中第 1 帧,使用文字工具在舞

台上输入:点击并移动 mySprite,到(150,200)坐标位置。(mySprite 是影片剪辑的容器)

8、测试影片。参见未命名 4.fla 文件

Flash Player 播放 SWF 文件,默认情况下,影片剪辑显示在舞台的左上角。代码中一个

事件侦听器用于响应鼠标点击,当点击舞台的任何地方时,影片剪辑的注册点都被重新定位

于距离舞台上方 150 个像素,距离舞台左边 200 个像素的位置。


四、加载和卸载库里的影片剪辑

在上面的基础上,加入代码:

anniua.addEventListener(MouseEvent.CLICK,f1);

anniub.addEventListener(MouseEvent.CLICK,f2);

var myhawk:hawk=new hawk();

   function f1(Event:MouseEvent):void {

      addChild(myhawk);

      myhawk.x=100;//指定外部swf加载的位置

      myhawk.y=200;

      myhawk.width =200;//指定外部swf的大小

      myhawk.height =60;    

      }

      function f2(Event:MouseEvent):void {

      removeChild(myhawk);             

      }


如果需要将库中的影片剪辑加载在场景的影片剪辑中,将影片剪辑实例名称改为:kezi。需要在addChild、removeChild前加kezi。

.


作业:

结合前面所学的按钮动效和影片剪辑动效,运用加载命令,制作按钮加载库里影片剪辑的作品。