Principle

Principle 是一套原型動態的製作軟體,適合製作扁平類效果,主要用於 APP 原型 DEMO 使用,但本篇主要將 Principle 內動態效果應用於 BANNER、網頁宣傳,利用任務中幾個提案,實際模擬展示。

如製作一個簡易效果與流程動態,可能會比 AE 來的快速便利,畢竟 AE 需要更高的精調成本與裝置效能,以廣告 BANNER 來說,將重點放在本身內容的吸引力。

Principle 介面

Principle 工作視窗

Principle 內其實沒有太複雜的編輯工具,如繪製也只有簡單幾個矩形功能,重點功能於效果整合,有支援 sketch 檔案,繪製完成後可直接導入,任何不規則形狀皆可,Principle 只會保留矩形節點 8 處,只要前後關鍵對應的圖層名稱一致,即會自動完成補間影格。

操作與其他動畫軟體相似,以 Flash 來舉例,關鍵幀與補間影格落在同一條時間軸上,Principle 則是把兩者拆分,於工作室窗內編輯所有關鍵幀,時間軸處理所有轉場效果與動態精調。

其餘就是工具列、圖層區等,容易上手考驗設計者的應用程度,右上方預覽畫面,可隨時觀看效果與匯出操作。

Principle 基礎操作

動態範例

步驟1

圖1:由 sketch 導入繪製好的玩字

形狀於 sketch 向量工具(vector)繪製,導入後可自由進行簡單編輯(如圖1),如拖曳移動、縮放變形等,要注意的地方是“圖層名稱”需一致,Principle 並沒有嚴格規定前後關鍵幀一定要互相對應,但“圖層名稱”會作為動態效果、變形的依憑。

步驟2

圖2:開始繪製前後幀

先複製一個玩字的關鍵幀(新增也行),這裡直接把玩字每個筆畫刪除,重新使用圓形工具取代(如圖2),注意對應的圖層名稱,把圓點擺放於動態起始點位置,作為前關鍵幀。

步驟3

圖3:指定前後幀關聯

點擊元件或群組右側的“閃電圖示”,會彈出操作選項,如點擊、滾動、移至時等等,然後指定另一個關鍵幀作為動態終點(如圖3),如上圖紅色箭頭指向。同理,一個長串的動態過程,可能包含數個起始點(前後關鍵幀),如上圖“03 Tap”箭頭所示,說明這是第三個過場效果,觸發操作為“點擊”,(箭頭)可視為補間影格。

步驟4

圖4:調整/設定時間軸

再來就是設定/調整動態過程,從既有的介面指令來控制,點選“03 Tap”箭頭(如圖4上方),會顯示該補間影格的時間軸(如圖4下方),補間影格由軟體自動完成,工作視窗是看不到的,可點選“ Default ”,展開精調選單,調整動作曲線、位置偏移等。

圖5:匯出選項

最後於右上角預覽,畫面右上方按鈕可進行錄製,完成後即可匯出;匯出選項可選擇 Gif 作網頁使用, fps 則有 15、30、60,動態範例為 60fps,設定為 430px*340px, 匯出後檔案大小約 380kb。

畫面尺寸可於工作視窗內調整,因爲向量圖形繪製,故匯出原尺寸畫面狀況下,呈現效果正常,缺點是每次調整都需要重新匯出。另外,手機下載 Principle APP,接上傳輸線之後直接開啟畫面,可操作點擊預覽效果。

動態廣告 BANNER

宣傳玩競猜 BANNER 動態效果

製作為動態,其實只要到按鈕與標題動作結束就可以了,金幣與人物的加入就顯得複雜(或者不需要動態),關鍵幀為 7幀,因直接使用 PNG 元件,所以匯出後檔案大小約 4 mb,若為扁平風格動態,使用向量元件,應該可大幅壓低檔案大小。

投注區廣告動態效果

輪播切換場次效果,可呈現高賠率與可贏彩幣,全為向量元素製作,若匯出 fps 30,檔案大小約400kb。實際製作後評估與 AE 用途比較,Principle 動態效果適合短期、快速產出宣傳廣告。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *