轉載自：http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/
本教程演示如何使用AEditor制作一個簡單的H5交互頁demo:
交互頁demo地址：
AEditor訪問地址：
http://aeditor.alloyteam.com
Step1：設置頁面背景顏色
首先我們設置頁面的背景顏色，右擊舞台點擊“設置背景”：
然后在背景顏色中填上色值rgb(38, 61, 102)，或者選擇自己喜歡的顏色：
點擊確定，設置頁面背景顏色成功。
Step2：AEditor標題文字動畫制作
首先，點擊“文字”按鈕，添加文本到AEditor，並改變輸入內容為AEditor：
設置文字的顏色為淺藍，並且設置大小為33px，此時文字樣式初始化完成：
要對文字應用漸變向下的動畫，我們需要把文字添加到時間軸。右擊文字，選擇”添加到時間軸“：
點擊后會發現頂部多了對應該文字的時間軸：
此時我們就可以開始具體到幀的動畫編輯了。
幀動畫的時長默認是6s，我們並不需要這么長的動畫時間。所以我們選中該時間軸，把時長改成1s，發現此時時間軸變短了，只有1s的動畫時長：
選擇第一個關鍵幀，把透明度設置為0，緩動選擇easeout：
再選擇最后一個幀，把右則屬性編輯器的Y值設置為60（此時會生成新的關鍵幀）：
然后點擊播放，則可看到文字漸變向下出現的動畫。
另外描述部分的動畫制作過程大同小異，就不詳述了，描述部分添加到AEditor的效果：
Step2：制作企鵝logo動畫
圖片素材：
點擊“圖片”按鈕，上傳企鵝logo：
圖片添加到AEditor：
由於圖片要應用動畫，一樣右擊添加到時間軸，時長設置為1.2s。
然后選擇第一個關鍵幀，透明度設置為0，緩動設置為easeout：
由於我們想讓動畫延遲0.2s開始，所以把第一個關鍵幀右擊“復制”：
然后右擊0.2s處的幀，選擇“粘貼”，此時就把第一個關鍵幀復制到0.2s處了：
粘貼完成：
此時再選擇最后一個幀，設置選裝rotateZ為720度，透明度為1：
再次點擊播放動畫，則可看到翻轉動畫播放。
Step3：制作企鵝logo點擊翻轉動畫
接下來我們制作點擊企鵝logo，logo播放翻轉動畫。
首先設置企鵝logo的點擊行為，右擊企鵝Logo，選擇“設置點擊行為”：
勾上觸發自定義事件，然后填入要觸發的事件名“rotate”：
點擊確定，此時可以看到企鵝Logo上有點擊事件標識，點擊企鵝會觸發rotate事件：
此時我們需要建立事件監聽播放翻轉動畫，右擊企鵝Logo，選擇添加事件動畫：
填入需要監聽的事件名，所以我們填入“rotate”：
點擊確定，此時會看到生成的對應事件的動畫時間軸，並看到“rotate”的事件標識：
然后選擇第一個關鍵幀，透明度設置為1，最后創建一個關鍵幀旋轉rotateY設置為720，中間創建一個關鍵幀，透明度設置為0：
此時點擊“播放全部”按鈕，並且點擊企鵝Logo，會播放對應翻轉動畫：
Step4：添加新的一頁
此時第一頁交互動畫已制作完畢，點擊頁控制的“+”按鈕，添加新的一頁，並設置背景顏色同上一頁：
另外改變一下翻頁動畫的類型，設置為“漸變移動”：
點擊“播放全部”按鈕，可以通過鼠標上下滑動看到翻頁效果：
Step5：創建多行文本，添加預設動畫
對於單行文本，我們使用“文本”按鈕添加對應文字，但對於多行文本，我們可以添加圖層，然后在圖層上編輯添加文字。
點擊“圖層”按鈕添加圖層：
通過手柄把圖層尺寸拉到一定大小並居中：
雙擊圖層，進入文字編輯狀態，此時可往圖層中填充文字：
同樣我們要為文字添加動畫效果，所以編輯文字完成之后，右擊文字區域，添加到時間軸。
此時我們准備從預設動畫中選擇一個從下向上的動畫，應用到文字區域中，選擇第一個關鍵幀，點擊插入預設動畫：
此時會看到彈出的預設動畫選擇框，從中選擇動畫“從下彈入”：
右則預覽窗口可以預覽預設動畫的效果，點擊確定，此時會自動創建對應預設動畫的所有關鍵幀：
點擊播放按鈕，可以看到文字從下往上彈入的動畫效果。
此時我們選擇1.5s處的幀，再次添加預設動畫“橡皮筋”，點擊確定，再次自動生成對應的所有關鍵幀：
點擊播放按鈕預留動畫，在從下彈入后會再播放橡皮筋效果動畫，如果希望對預設動畫進行微調，可以手動對關鍵幀進行二次編輯。
Step6：建立元件，創建文字的組合動畫
最后是“By AlloyTeam”這行文字的動畫，這個動畫有點特殊，文字邊閃爍邊往右移動。
如果用上面的方式編輯動畫的話，可想而知就很麻煩了，閃爍的位置以及對應移動的位置都要手動設置對應關鍵幀，難以控制的同時也帶來了多個難以維護的關鍵幀。
因此我們使用元件的方式創建該動畫。
我們首先把閃爍的文字作為一個元件創建，再為元件整體創建從左到右移動的動畫。
點擊“新建元件”按鈕，進入元件模式創建元件：
元件名稱設置為“text”，元件尺寸設置為150*40：
進入元件模式之后添加文字並設置為“By Alloyteam”，文字顏色設置為淡黃，同時添加到時間軸。
然后動畫時長設置為1s，選擇中間關鍵幀設置透明度為0，最后一個關鍵幀透明度為1：
點擊播放，此時可以看到文字的一次閃爍動畫。
然而，我們希望文字在動畫期間連續閃爍3次，此時我們可以選擇該時間軸，勾上“重復播放”選項，並且設置“播放次數”為3：
點擊播放按鈕，此時可以看到動畫播放了3次。
點擊“保存元件”把元件保存下來，再點擊”回到場景”：
此時我們需要使用剛才創建的元件，點擊”插入元件“:
然后在元件選擇欄中選擇剛剛創建的元件，右則預覽窗口可以預覽元件動畫效果：
點擊確定，此時元件已經被添加到舞台上了：
此時再為元件整體創建從左到右的動畫，首先把元件添加到時間軸，動畫時長設置為2s，然后對第一個幀的X值設置為-180，緩動設置為ease，最后一個關鍵幀設置X值為85：
點擊播放按鈕，可以看到文字邊閃爍邊從左滑動到右邊的動畫過程。
Step7：設置每頁動畫可重復播放
當前狀態下，播放了一頁動畫之后，再回到該頁，動畫並不會再次播放，如果我們希望可以多次播放頁的動畫，可以開啟頁動畫的重復播放設置：
這樣每次跳到一頁的時候，該頁的動畫都會再次播放。
Step8：導出交互頁
此時整個demo頁面的動畫完成了，可以點擊播放全部預覽整體效果。
效果滿意之后，點擊“導出”按鈕，導出該頁面的項目結構（zip壓縮包）：
生成的壓縮包包含了整個交互頁的項目結構：
解壓到目錄，mobile模式下打開index.html即可看到創建的交互頁效果：
