Adobe Edge Animate 1.0 概述

一、主界面

从主界面我们可以直接进入：

1.工程操作（Project Commands）：打开之前保存的工程（Open File...）或者新建一个工程（Create New...）；

2.从最近使用文件列表中（Recent Files...）可以打开最近保存的工程；

3.软件内置课程资源标签（Getting Statred），软件主要特性（Key Features），相关资源（Resources）

4.另外还有一些国内可能用不到的东西：Facebook和Twitter社交媒体

二、软件官方颜色、图标和文件扩展名

软件官方设计为紫色，文件扩展名如下：

1.工程文件扩展名为（.an）；

2.元件输出文件扩展名为（.ansym）；

3.Animate发布文件包（通过File>Publish Settings发布）扩展名为（.oam）；

三、Edge Animate：工具栏和工作区

Adobe Edge Animate的强大之处在于它提供了精确的编辑工具和可视化的时间线。

工具栏：（1-3）元素操作工具；（4-7）创建元素的工具；（8-10）元素细节调节工具，使用HTML5和CSS。

1.选择（V）	4.长方形（M）	8.背景色
2.拉伸变换（Q）	5.圆角长方形（R）	9.边缘色
3.裁剪（C）	6.椭圆形（O）	10.新元素默认布局
	7.文本（T）

下面这张截图显示的是Edge Animate的主要工作区：

1.工具栏：用于对舞台中的元素进行操作和创建等

2.舞台

3.元素：舞台中包含的元素

4.属性面板：在这里可以调节元素（包括舞台）的属性值

5.库：在库中可以导入图像和.svg文件；web字体库和元件（通过File>Import导入，也可以点击加号按钮添加）

6.时间线：通过时间线上元素属性值随时间的变化来创建动画（设定关键帧）

如何调整工作区的布局：通过点击并拖动工作面板左侧的活动面板图标（或者整个标签），将之拖动到目的区域，添加在其他活动面板的相对位置即可。当拖动面板到其他面板上方时，会显示你将面板放置在其他面板的上方（Above）、下方（Below）、左侧（Left）、右侧（Right）或者与之合并（Tab），当对应位置显示高亮紫色的时候，松开鼠标左键就可以将面板放置在对应位置

如果你已经调整好了属于自己的工作区布局，你可以通过Window-New Workspace菜单保存属于自己的自定义工作区

Edge Animate：设置本地语言

除了英语，Edge现在具备了不同的语言版本，包括德语，西班牙语，法语，意大利语和日语。如何更改语言：选择Help-Change Language菜单即可。

四、Edge Animate：发布到Web、Deployment Package和Adobe DPS iBooks

Adobe Edge Animate提供了三种发布方式（如何发布：File-Publishing菜单）

1.发布到Web：将最终工程渲染完成并导出到指定目录，你可以上传（ftp）到你的Web服务器查看。

附加web发布功能：启用“google chrome frame”，你的发布在IE旧版本上也可以查看。通过CDN简化加载的框架

将内容发布为静态的HTML和HTML标签，而不是通过搜索引擎优化和内置Javascript来提高兼容性

2.发布为Deployment Package：用于其他Adobe产品如Adobe Indesign

3.发布为Apple iBooks Author

五、Edge Animate：舞台

1.启用标尺（Rulers）：（快捷键Ctrl/Command + R或者View-Rulers菜单），可以定义为像素或者百分比（Pixel and Percentage Guides）

2.舞台滚动条（Persistent Stage Scrollbars）和自动将舞台置于中间的按钮（Auto Center Stage ）

3.拖动缩放（Scrub Zoom）：拖动缩放图标旁边的数值，可以控制舞台缩放。双击百分比值可手动输入缩放百分比数值

4.相对标记（Relativity Makers/Pin）：（这个好像v1.0版本没有）主要用于缩放舞台的时候，调整舞台显示在窗口部分的位置。

5.时间（Time Code）：显示播放头位置的时间。

6.代码错误提示（Code Error Hint）：在舞台右下方，快速排除事件处理程序代码错误或通用脚本错误。

六、Edge Animate：属性面板

Adobe Edge Animate的强大之处在于它能获得舞台中元素的标签（即ID）和这个元素样式属性（CSS）的变化，并将这些变化在时间线上以关键帧的形式“标记”。这样必然导致关键帧之间属性值的变化，这个中间阶段会被转化为一个过渡阶段，或者说一段动画（如图片透明度Opacity的变化，淡入淡出、一个元件的移动Location和缩放Scale等等）。

以下截图显示的是一个元素的属性，这些属性都可以调整，每一个元素都有自己的属性值：

1.元素ID（Element ID）：元素的身份标记，可以通过代码直接访问这个元素的属性值，并修改它们。

2.元素标签（Element Tag）：有div、img等等。

3.元素类别（Class）

4.动作事件（Actions）：可添加对元素的动作事件控制代码。

5.显示（Display）：元素在舞台中是否显示。

6.显示设定（overflow）：包括

visible :默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效。
auto : 在必需时对象内容才会被裁切或显示滚动条。
hidden:不显示超过对象尺寸的内容。
scroll : 总是显示滚动条。

7.添加关键帧（Keyframe Maker）：点击即可在时间线上添加一个透明度的关键帧。

8.透明度（Opacity）：拖动调整或者直接输入数值都可以达到调整透明度的目的。

9.响应式布局预置（Responsive layout presets）：可以设置不同的位置和大小变化控制方案

10.调整单位切换（Unit Switch）：可以调整为百分比或像素单位

11.元素变换（Transform）：包括大小（Scale：x、y）、变形（skew：x、y），旋转（可调整轴心点位置和旋转角度）。

12.指示图标（Cursor）：可以设置鼠标移到元素上方时鼠标显示的图标（如元素为按钮即可设置为小手图标）。

13.阴影（Shadow）：打开后方的switch按钮，可启用或关闭阴影功能；在这里的阴影功能仅限于能投射正方形的阴影；可调整阴影参数，如角度、大小和羽化值等。

14.裁剪（Clip）：对元素进行裁剪，主要是用于使元素之间不要产生重叠。

15.可接入性（Accessibility）：包括标题和属性值。

16.Global和Applied：Global是以舞台相对坐标做变换，而Applied则是以父层级为相对坐标做变换