AdobeEdgeAnimate

AdobeEdgeAnimate是一款Adobe开发的全新的动画开发工具，拥有和其他Adobe创意套件一样的语法规则，致力于寻求适用于HTML5,CSS3,andJavaScript的交互和动作编程体验。AdobeEdgeAnimate主要是通过HTML5、JavaScript、jQuery和CSS3制作跨平台、跨浏览器的网页动画，其生成的基于HTML5的互动媒体能更方便的通过互联网传输，特别是更兼容移动互联网。

软件名称：AdobeEdgeAnimate

软件类型：国外软件

软件语言：简体中文

软件厂商：Adobe

运行环境：WinXP,Win2008,Win7,Win8

1、软件介绍

AdobeEdgeAnimate

HTML5动画神器EdgeAnimate为现代网站创建动画，交互式内容。EdgeAnimate是Adobe最新出品的制作HTML5动画的可视化工具，简单的可以理解为HTML5版本的FlashPro。EdgeAnimate可让网路设计人员制作适用於网页、数位出版、多媒体广告等用途的互动式HTML动画内容，进而轻松地为桌上型电脑和行动装置浏览器制作内容。

AdobeEdgeAnimateCC为网页设计人员提供了所需的工具，让他们不仅可以给网页图形新增动作，在网站中建立内容，AdobeEdgeAnimateCC还能确保其设计可在移动装置、平板电脑和现行的浏览器中保持一致。

2、软件特色

AdobeEdgeAnimate主要是通过HTML5、JavaScript、jQuery和CSS3制作跨平台、跨浏览器的网页动画，其基于HTML5生成的互动媒体能更方便的通过互联网传输，更特别的是兼容移动互联网。

作为一套完整的Web动画开发工具，AdobeEdgeAnimate拥有直观的用户界面，强大的时间轴能够轻松制作关键帧动画，网页设计人员制作网页动画甚至简单游戏将变得极其方便。

3、CC功能

精确的动画

直觉化的使用者界面

绘图和文字工具

移动路径

可重复使用的符号

丰富的互动性

渐层支援

CSS筛选器支援

适用于行动装置的内容

原生HTML

adobeedge安装序列号

1582-0185-6601-7300-3963-3218

4、主界面

主界面

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

1.工程操作（ProjectCommands）：打开之前保存的工程（OpenFile...）或者新建一个工程（CreateNew...）；

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

3.软件内置课程资源标签（GettingStatred），软件主要特性（KeyFeatures），相关资源（Resources）

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

5、文件扩展名

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

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

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

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

6、工具栏和工作区

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

工具栏：（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）

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

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

2.舞台

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

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

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

6.时间线：通过时间线上元素属性值随时间的变化来创建动画（设定关键帧）如何调整工作区的布局：通过点击并拖动工作面板左侧的活动面板图标（或者整个标签），将之拖动到目的区域，添加在其他活动面板的相对位置即可。当拖动面板到其他面板上方时，会显示你将面板放置在其他面板的上方（Above）、下方（Below）、左侧（Left）、右侧（Right）或者与之合并（Tab），当对应位置显示高亮紫色的时候，松开鼠标左键就可以将面板放置在对应位置如果你已经调整好了属于自己的工作区布局，你可以通过Window-NewWorkspace菜单保存属于自己的自定义工作区

EdgeAnimate：设置本地语言

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

7、发布方式

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

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

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

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

2.发布为DeploymentPackage：用于其他Adobe产品如AdobeIndesign

3.发布为AppleiBooksAuthor

8、舞台

AdobeEdgeAnimate

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

2.舞台滚动条（PersistentStageScrollbars）和自动将舞台置于中间的按钮（AutoCenterStage）

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

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

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

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

9、属性面板

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

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

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

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

3.元素类别（Class）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10、元素面板

AdobeEdgeAnimate元素面板显示的是节点式的树形结构，表示元素与父元件Stage的联系。

放置（或堆叠）在上方的元素具有更高的Z-index值，会显示在其他元素（堆叠在下方的元素）上方。

以下截图指示了元素面板的主要功能、图解和使用案例。

1.每个元素都具有用户定义的ID和标签、用一个与元素类型相关联的图标表示；

2.堆叠的元素可以使用AdobeEdgeAnimate中的组、嵌套或符号实例功能。

3.点击动作事件按钮（Actions），从事件处理程序列表中选择相应的功能函数，可以添加全局舞台控制事件（compositionReady,scroll,orientationchange,resize等等）和局部元素控制事件（click，mouseover，touchstart等等）。

4.双击一个元件实例图标，可以进入元件编辑模式。

5.点击visibility可以切换舞台中的元素可见性，但是不会影响运行时元素的可见性。

6.右击元素可以从弹出菜单中选择更多的操作，也可以从Modify菜单中选择更多操作。

11、时间线

AdobeEdgeAnimate的时间线融合了元素的节点式树状结构和与元素属性关联的关键帧，这些信息显示在时间线左侧，而右侧则显示时间信息表。元素属性值（关键帧）被标记在时间线确切的时间点，当属性值发生改变时，过渡阶段会产生动画。

1.动画标签（Label）和触发器（Trigger）：自定义的时间线动画标签和触发器也可以控制舞台中元素动画的状态和处理方法；使用Ctrl/Command+L可以在播放头所在时间点生成一个动画标签，使用Ctrl/Command+T可以在播放头所在时间点放置一个触发器。

2.仅显示具有动画的元素（FilterAnimatedElements）

3.启用时间线吸附功能（EnableTimelineSnapping）：拖动播放头，播放头将会自动吸附到时间点、动画或关键帧等

4.启用时间线网格（EnableTimelineGrid）：时间信息表上将会显示时间网格，方便设计者在确切时间点设定关键帧等，网格的大小可用户自定义。

5.自动记录关键帧模式（AutoKeyframeMode（K））：开启模式下，设计者对元素所做的属性值修改都会以关键帧的形式记录在时间线上。

6.自动生成动画模式（AutoTransitionMode（X））：开启模式下，在两个关键帧之间会自动生成动画，默认开启。

7.播放标记（TogglePin（P））：可以设置播放的起始和终止位置。

8.动画过渡调整（Easing）：调整动画过渡之间的曲线，使之更加符合设计者要求。

12、代码管理器

代码管理器使用一个单独完整的窗口界面来展示所有事件控制代码和时间线触发器。（快捷键Ctrl/Command+E或者通过菜单Window-Code打开）所被编辑的控制代码或触发器会被高亮显示。

1.点击“+”图标添加全局、局部、时间线控制代码或者触发器；

2.点击“FullCode”按钮可以显示并编辑单个文件的全部代码，而不仅仅是单个功能函数内部代码；

3.可以通过下方的代码错误提示窗进行错误快速排除检测。