张晓景,畅销书作者,Adobe 专家委员会成员 Adobe 网页设计师认证讲师Adobe UI设计工程师 国家信息产业部653工程讲师 参与国家开放大学网页设计和网页界面设计课程体系开发。从事平面设计、网站设计和UI设计多年,参与开发过数十个多媒体商业网站。对UI设计风格有独特见解。有丰富的教学经验,为中国石油、中国铁路等大型企业做专业企业培训,曾在中国传媒大学、北京大学、北京师范大学、北京交通大学等重点院校以及Adobe创意大学和新东方等培训机构教授设计课程。
第1 章 初识Edge Animate CC
1.1 Edge Animate 简介.......................... 002
1.1.1 Edge Animate 的诞生.....................................003
1.1.2 Edge Animate 概述.........................................003
1.1.3 Edge Animate 功能简介.................................003
1.2 Edge Animate CC 2015 的安装 ?
和卸载............................................. 006
1.2.1 Edge Animate CC 的系统要求.......................006
1.2.2 安装Edge Animate CC..................................006
1.2.3 卸载Edge Animate CC..................................007
1.2.4 启动Edge Animate CC..................................008
1.3 Edge Animate CC 的工作界面............ 009
1.3.1 Edge Animate CC 的欢迎界面.......................009
1.3.2 认识Edge Animate CC 的操作界面..............011
1.4 Edge Animate CC 的菜单栏............... 013
1.4.1 “文件”菜单................................................013
1.4.2 “编辑”菜单................................................014
1.4.3 “显示”菜单................................................015
1.4.4 “修改”菜单................................................016
1.4.5 “时间轴”菜单.............................................017
1.4.6 “窗口”菜单................................................019
1.4.7 “帮助”菜单................................................020
1.5 Edge Animate CC 中的面板............... 020
1.5.1 工具栏............................................................020
1.5.2 舞台................................................................022
1.5.3 “时间轴”面板.............................................024
1.5.4 “属性”面板................................................025
1.5.5 “元素”面板................................................025
1.5.6 “库”面板....................................................025
1.5.7 “教程”面板................................................026
1.6 自定义Edge Animate CC 的工作界面.. 027
1.6.1 手动调整默认工作界面.................................027
1.6.2 自定义工作界面.............................................028
1.6.3 删除工作界面................................................029
1.6.4 重置工作界面................................................029
1.7 本章小结......................................... 030
第2 章 Edge Animate CC 的基本操作
2.1 新建Edge Animate 项目文件............. 032
2.1.1 新建空白的Edge Animate 项目文件.............033
2.1.2 设置舞台属性................................................033
2.1.3 捕获图像与低版本舞台.................................037
2.1.4 设置项目文件的预载效果.............................040
2.1.5 从模板新建Edge Animate 项目文件.............041
2.2 Edge Animate CC 文件的基本操作...... 042
2.2.1 打开Edge Animate 文件................................042
2.2.2 关闭Edge Animate 文件................................042
2.2.3 直接保存Edge Animate 文件.........................042
2.2.4 另存为Edge Animate CC 文件......................043
2.2.5 保存为Edge Animate 模板文件.....................043
2.3 应用标尺和导轨................................ 044
2.3.1 显示/ 隐藏舞台标尺.....................................044
2.3.2 创建导轨........................................................044
2.3.3 贴紧至导轨....................................................044
2.3.4 显示/ 隐藏导轨.............................................045
2.4 使用模板制作Edge Animate 动画....... 045
2.4.1 下载Edge Animate 模板................................046
2.4.2 使用文章展示模板.........................................046
2.5 本章小结......................................... 050
第3 章 绘制图形与导入外部素材
3.1 使用Edge Animate CC 中的基本 ????????????
绘图工具......................................... 052
3.1.1 认识Edge Animate CC 中的绘图工具..........053
3.1.2 绘制矩形........................................................053
3.1.3 绘制圆角矩形................................................054
3.1.4 绘制椭圆形....................................................054
3.2 导入外部素材................................... 055
3.2.1 支持的图像素材格式.....................................055
3.2.2 导入位图素材................................................055
3.2.3 导入矢量素材................................................057
3.3 图形对象属性设置............................. 058
3.3.1 显示与隐藏属性.............................................058
3.3.2 位置和尺寸属性.............................................061
3.3.3 背景颜色和边框属性.....................................065
3.3.4 设置纯色........................................................066
3.3.5 设置渐变颜色................................................071
3.3.6 变形属性........................................................072
3.3.7 光标效果属性................................................077
3.3.8 角效果属性....................................................078
3.3.9 阴影效果属性................................................080
3.3.10 滤镜效果属性...............................................083
3.3.11 剪裁属性......................................................085
3.3.12 辅助属性......................................................088
3.4 素材图像的属性设置.......................... 088
3.4.1 图像布局的偏好设置.....................................088
3.4.2 图像属性........................................................093
3.5 多对象的操作................................... 097
3.5.1 对齐操作........................................................097
3.5.2 分布操作........................................................097
3.5.3 排列操作........................................................098
3.6 本章小结......................................... 099
第4 章 添加和格式化文本
4.1 在动画中添加文字............................. 102
4.1.1 在动画中添加文字的几种方法.....................102
4.1.2 在动画中添加文字.........................................103
4.2 设置文字属性................................... 105
4.3 添加字体......................................... 108
4.3.1 添加Edge Web 字体......................................108
4.3.2 添加和使用中文字体.....................................109
4.4 剪裁文本边缘................................... 112
4.5 使用文字特效................................... 114
4.5.1 文字阴影效果................................................115
4.5.2 文字弹跳效果................................................118
4.5.3 文字链接........................................................120
4.6 Edge Animate 中的HTML 标签......... 126
4.7 本章小结......................................... 127
第5 章 使用时间轴制作动画
5.1 关于元素层...................................... 130
5.1.1 元素层的类型................................................130
5.1.2 选择元素层....................................................131
5.2 编辑元素层...................................... 132
5.2.1 为元素层重命名.............................................132
5.2.2 复制元素层....................................................133
5.2.3 调整元素层顺序.............................................133
5.2.4 展开/ 折叠元素层属性.................................134
5.2.5 设置元素层颜色.............................................135
5.3 元素层的状态................................... 135
5.3.1 显示和隐藏元素层.........................................135
5.3.2 锁定和解锁元素层.........................................136
5.4 “时间轴”面板................................ 136
5.4.1 认识“时间轴”面板.....................................137
5.4.2 使用快捷键控制时间轴.................................139
5.5 “时间轴”面板的基本操作................. 140
5.5.1 设置“时间轴”面板网格.............................140
5.5.2 在“时间轴”面板中添加标签.....................141
5.5.3 编辑标签........................................................141
5.5.4 制作开场动画................................................142
5.6 使用“缓和”动画效果....................... 145
5.6.1 “缓和”效果详解.........................................145
5.6.2 制作网站广告条.............................................146
5.6.3 制作纸飞机飞行动画.....................................149
5.6.4 制作模糊入场动画.........................................153
5.7 本章小结......................................... 156
第6 章 使用触发动作脚本
6.1 了解触发动作................................... 158
6.1.1 什么是触发....................................................158
6.1.2 “动作”窗口................................................159
6.1.2 “触发”窗口................................................161
6.2 在动画中使用动作............................. 162
6.2.1 为元素添加动作.............................................162
6.2.2 触发事件详解................................................165
6.2.3 动作详解........................................................166
6.2.4 为文字元素添加动作.....................................173
6.2.5 编辑动作........................................................177
6.2.6 删除动作........................................................177
6.3 舞台动作的使用方法.......................... 178
6.3.1 舞台触发事件详解.........................................178
6.3.2 为舞台添加动作.............................................178
6.4 时间轴动作的使用方法....................... 182
6.4.1 时间轴触发事件详解.....................................182
6.4.2 添加时间轴动作使动画循环播放.................182
6.4.3 添加触发动作到某个时间点.........................185
6.5 非线性思考与设计............................. 189
6.6 适用于iOS 和Android 系统的动作....... 194
6.7 本章小结......................................... 198
第7 章 符号元素在动画中的应用
7.1 符号元素概述................................... 200
7.2 创建符号......................................... 201
7.2.1 转换为符号元素.............................................201
7.2.2 导出符号........................................................202
7.2.3 导入符号........................................................202
7.3 使用符号元素................................... 203
7.3.1 将符号应用到舞台.........................................203
7.3.2 在动画中创建和使用符号元素.....................203
7.3.3 编辑符号........................................................207
7.3.4 复制符号........................................................208
7.3.5 重命名符号....................................................208
7.3.6 删除符号........................................................209
7.4 符号元素时间轴的运用....................... 209
7.5 使用滑过变换动画创建按钮符号........... 213
7.5.1 制作基础网页按钮动画.................................213
7.5.2 制作复杂网页按钮动画.................................216
7.6 创建导航菜单动画............................. 220
7.6.1 制作垂直导航菜单.........................................220
7.6.2 制作下拉导航菜单.........................................225
7.7 使用滑过变换动作创建文字标注........... 233
7.8 本章小结......................................... 235
第8 章 多媒体元素在动画中的应用
8.1 在Edge Animate 动画中使用音频....... 238
8.1.1 Edge Animate 所支持的音频格式..................239
8.1.2 设置音频属性................................................239
8.1.3 对动画中的音频进行控制.............................246
8.2 在Edge Animate 动画中嵌入视频....... 250
8.2.1 Edge Animate 所支持的视频格式..................250
8.2.2 设置视频属性................................................250
8.2.3 自定义视频播放控制组件.............................253
8.3 在Edge Animate 动画中使用子画面表. 259
8.4 本章小结......................................... 264
第9 章 HTML 和CSS 样式在Edge
Animate 中的应用
9.1 认识HTML 文档.............................. 266
9.1.1 关于HTML 文档...........................................267
9.1.2 HTML 文档标签............................................267
9.1.3 关于HTML5..................................................268
9.2 认识CSS 样式.................................. 268
9.2.1 关于CSS 样式................................................268
9.2.2 CSS 样式语法.................................................269
9.2.3 CSS 样式规则.................................................269
9.2.4 为元素应用ID CSS 样式...............................269
9.2.5 为元素应用类CSS 样式................................270
9.2.6 4 种应用CSS 样式的方式.............................270
9.3 Edge Animate 与HTML 的关系......... 271
9.3.1 读懂Edge Animate 创建的HTML 文档........271
9.3.2 制作网站欢迎页面动画.................................272
9.4 在网页中应用动画............................. 277
9.5 在同一个网页中应用两个不同的动画..... 281
9.6 本章小结......................................... 281
第10 章 使用JavaScript 和jQuery
控制动画
10.1 了解JavaScript 和jQuery 的历史发展... 284
10.1.1 什么是JavaScript..........................................285
10.1.2 JavaScript 基础..............................................285
10.1.3 什么是jQuery..............................................285
10.2 Edge Animate 创建的JavaScript..... 285
10.2.1 认识自动创建的JavaScript...........................285
10.2.2 Edge Animate 动画项目相关的JavaScript ?
文件...............................................................287
10.3 JavaScript 和jQuery 基础................ 288
10.3.1 JavaScript 语法中的基本要求.......................288
10.3.2 JavaScript 的数据类型...................................290
10.3.3 定义变量......................................................291
10.3.4 JavaScript 运算符..........................................291
10.3.5 JavaScript 条件和循环语句...........................292
10.3.6 了解文档对象模型.......................................293
10.4 了解jQuery 的选择方式................... 293
10.5 在动画中实现获取鼠标位置及跟随 ?
鼠标功能....................................... 293
10.6 使用jQuery 制作拼图动画效果.......... 298
10.7 本章小结....................................... 303
第11 章 Edge Animate 动画制作 ?
技巧
11.1 更多显示与隐藏技巧........................ 306
11.1.1 切换对象的显示与隐藏...............................307
11.1.2 延迟的显示、隐藏与切换...........................309
11.1.3 淡入淡出......................................................311
11.1.4 上下滑动......................................................313
11.1.5 Edge Animate 中更多的视觉特效................316
11.1.6 实现滑块向左或向右滑动...........................321
11.2 在Edge Animate 中交换素材图像..... 323
11.3 识别并更改元件和符号..................... 326
11.3.1 变量赋值......................................................326
11.3.2 通过为变量赋值改变元素属性...................327
11.3.3 为文字元素赋予HTML 代码......................330
11.4 识别符号内的元素........................... 333
11.5 播放符号元素的时间轴..................... 337
11.6 本章小结....................................... 342
第12 章 Edge Animate 动画的发布
与输出
12.1 关于动画尺寸................................. 344
12.1.1 使动画尺寸自适应浏览器窗口...................344
12.1.2 设置动画最大和最小宽度...........................348
12.2 发布Edge Animate 动画................. 350
12.2.1 “发布设置”对话框...................................350
12.2.2 发布为Web 格式.........................................351
12.2.3 发布为Animate 部署包格式........................353
12.2.4 发布为iBooks/OS X 格式...........................354
12.3 本章小结....................................... 354