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則是以父層級為相對坐標做變換
七、Edge Animate：元素面板
Adobe Edge Animate元素面板顯示的是節點式的樹形結構，表示元素與父元件Stage的聯系。
放置（或堆疊）在上方的元素具有更高的Z-index值，會顯示在其他元素（堆疊在下方的元素）上方。
以下截圖指示了元素面板的主要功能、圖解和使用案例。
1.每個元素都具有用戶定義的ID和標簽、用一個與元素類型相關聯的圖標表示；
2.堆疊的元素可以使用Adobe Edge Animate中的組、嵌套或符號實例功能。
3.點擊動作事件按鈕（Actions），從事件處理程序列表中選擇相應的功能函數，可以添加全局舞台控制事件（compositionReady,scroll,orientationchange,resize等等）和局部元素控制事件（click，mouseover，touchstart等等）。
4.雙擊一個元件實例圖標，可以進入元件編輯模式。
5.點擊visibility可以切換舞台中的元素可見性，但是不會影響運行時元素的可見性。
6.右擊元素可以從彈出菜單中選擇更多的操作，也可以從Modify菜單中選擇更多操作。
八、Edge Animate：時間線
Adobe Edge Animate的時間線融合了元素的節點式樹狀結構和與元素屬性關聯的關鍵幀，這些信息顯示在時間線左側，而右側則顯示時間信息表。元素屬性值（關鍵幀）被標記在時間線確切的時間點，當屬性值發生改變時，過渡階段會產生動畫。
1.動畫標簽（Label）和觸發器（Trigger）：自定義的時間線動畫標簽和觸發器也可以控制舞台中元素動畫的狀態和處理方法；使用Ctrl/Command + L可以在播放頭所在時間點生成一個動畫標簽，使用Ctrl/Command + T可以在播放頭所在時間點放置一個觸發器。
2.僅顯示具有動畫的元素（Filter Animated Elements）
3.啟用時間線吸附功能（Enable Timeline Snapping）：拖動播放頭，播放頭將會自動吸附到時間點、動畫或關鍵幀等
4.啟用時間線網格（Enable Timeline Grid）：時間信息表上將會顯示時間網格，方便設計者在確切時間點設定關鍵幀等，網格的大小可用戶自定義。
5.自動記錄關鍵幀模式（Auto Keyframe Mode（K））：開啟模式下，設計者對元素所做的屬性值修改都會以關鍵幀的形式記錄在時間線上。
6.自動生成動畫模式（Auto Transition Mode（X））：開啟模式下，在兩個關鍵幀之間會自動生成動畫，默認開啟。
7.播放標記（Toggle Pin（P））：可以設置播放的起始和終止位置。
8.動畫過渡調整（Easing）：調整動畫過渡之間的曲線，使之更加符合設計者要求。
九、Edge Animate：代碼管理器
代碼管理器使用一個單獨完整的窗口界面來展示所有事件控制代碼和時間線觸發器。（快捷鍵Ctrl/Command + E或者通過菜單Window-Code打開）所被編輯的控制代碼或觸發器會被高亮顯示。
1.點擊“+”圖標添加全局、局部、時間線控制代碼或者觸發器；
2.點擊“Full Code”按鈕可以顯示並編輯單個文件的全部代碼，而不僅僅是單個功能函數內部代碼；
3.可以通過下方的代碼錯誤提示窗進行錯誤快速排除檢測。
原文來自：
http://www.heathrowe.com/adobe-edge-animate-reaches-version-1-0/
本文地址：
http://www.cnblogs.com/adobeedge/archive/2012/11/23/Adobe_Edge_Animate_Overview.html
翻譯/注解：北京聯友天下科技發展有限公司 肖偉民