使用iMovie和Keynote製做App Preview

App Preview是什麼

App Preview就是一段15-30秒的短視頻，用來展現你的應用的特性、用戶界面、交互方式等內容。在App Store你的應用的詳細信息頁面裏，放在原來的截圖以前。體驗上會比截圖更有衝擊力，也可以表現更多的東西。茫茫的App海洋之中，如何脫穎而出，賣相相當重要。就我我的而言，若是Preview作的有吸引力，那麼我就會去下載它。若是Preview和截圖看上去就不太好，天然就少了下載的動力。蘋果的開發者網站中，有一個單獨的頁面來詳細說明具體的要求和製做步驟，我就再也不累述。官方介紹

目前的現狀是什麼

目前的App Store中，國外開發者作Preview的較多，國內從大廠到我的作Preview的很是少。形成這樣的緣由我以爲有兩點。一是不夠重視，以爲作不作並不會形成太大影響；二是以爲視頻製做複雜，本身作不了，請個專門的視頻製做又預算過高。若是作的差，反而拔苗助長，搬起石頭砸了本身的腳。

個人狀況

從可以上傳App Preview那天起，我就嘗試用iMovie製做了一段視頻。但效果並不理想，iMovie自己可以操做的空間就很是有限，選擇了製做Preview以後甚至還閹割了一些功能。好比沒有辦法展現點擊的動做，更不要說拖拽放大什麼的了。我本身也沒有視頻剪輯方面的經驗，對於節奏的把握不算好。後來這事就放下來，但我一直在想怎麼弄。買個Final Cut Pro要1998元，太貴了不值得。後來忽然有一天，我就想若是把Keynote和iMovie結合一下呢，把Keynote的結果導出成視頻，再進行剪輯不就行了。獲得這個靈感之後，我就製做了下面這個Demo(須要FQ)。用的軟件包括QuickTime Player, Keynote, iMovie，所有免費。我寫這篇文章也是爲了給有可能還不知道如何把這幾個軟件結合在一塊兒使用的朋友一個提示。若是你作的遠比個人Demo要好，就沒必要看了，但我但願你能夠告訴我是怎麼作的。

構思

一個15-30秒的視頻，根本沒法完整的表達一個App所包含的所有內容。通常來講，咱們選擇兩三個特性就足夠了。接下來我以愛壁紙的Demo爲例，詳細描述整個製做的過程。我選擇表現三個方面：

一、 內容豐富，我將展現首頁、菜單欄和滑動一下過來的分類頁; 

二、 有趣和好玩，我將展現圖文並茂、拉繩及拼圖遊戲部分;

三、 推薦項目，我會展現如何DIY和購買個性手機殼。

錄製視頻

一、 把手機鏈接上你的Mac，打開QuickTime Player，選擇File->New Movie Recording。

二、點擊錄製按鈕旁邊的下拉箭頭，選擇你的iPhone設備，點擊錄製按鈕，開始錄製，你在手機上操做就能夠了。

三、錄製完成後選擇Save，保存到一個文件夾中待用。

四、依次操做，錄製幾段你設計好的視頻。

這裏我提一點，錄製完成後，你還能夠經過Edit->Trim，對視頻進行一下「掐頭去尾」的粗剪。

 

 

用Keynote模擬點擊動做

一、 新建一個Keynote文檔，選擇黑色主題，選中兩個文本框刪掉。

二、 點擊Media按鈕，選擇一張你準備好的截圖，放入頁面中，或者直接把一張圖片拖入文檔中。拖動一下就能夠看到輔助線，讓圖片居中。

三、點擊Shape按鈕，在屏幕中畫一個圓圈，修改成白色50*50大小。圖片放在左側黑色部分。

 

 

 

四、選中圓圈，點擊Animate,添加一個Movie  Effect，把Duration設置爲0.3秒。

 

 

 

五、再添加一個Scale的Effect，設置Scale爲1000%，Duration爲0.5秒。

六、再添加一個Opacity的Effect，設置Opactity爲0，Duration爲0.3秒。

七、點擊Build Order,設置Action的Start,分別設置爲After Transation,After Build1和With Build2。

 

 

 

八、選擇File->Export to->QuickTime。設置Playback爲Self-Playing,Go to next slide 和 Go to next build設置爲0

這樣一段模擬點擊的視頻就製做完成了。（文末提供了Keynote源文件）

用Keynote模擬Swap動做

與上面模擬點擊動做相似，只是此次咱們是直接插入視頻，而非圖片。而後根據視頻中動畫出現的時間來調整每一個action的時間點，注意調整Delay的秒數，一直到導出後動畫和視頻是同步的。在這裏我就不在累述。我會在文末提供Keynote源文件供你們查看。總之都是移動，縮放，改變透明度這些的結合使用，耐心在這裏是最重要的。

使用 iMovie進行剪輯

接下來咱們要用iMovie進行剪輯工做。涉及到裁剪，加入音效，過場動畫等。下面是iMovie的界面，若是你不多使用這個軟件，建議你找些教程看看。這個軟件對工做的幫助有多大很差說，但對你之後生活會有很大的幫助。特別是當你有了小孩兒之後，你想作些視頻留做記念的時候。

 

 

 

1. 爲媒體資料管理區  2.爲添加音效、文字、轉場動畫區 3.爲視頻預覽區 4.爲時間軸區

一、打開iMovie，在菜單欄中選擇File->New App Preview。

二、而後點擊Import按鈕，將咱們前面準備好的視頻導入進來。這個時候視頻資料就會出如今上圖1的區域。

三、按住鼠標（左鍵，若是你的鼠標分左右的話），拖動能夠選擇部分視頻，鬆開鼠標會出現一個加號，點擊就能夠把你選擇的視頻片斷加入到下方的時間軸區域了。

四、依次操做，把全部你想要的視頻片斷所有加入進來。

五、你可能已經注意到，咱們剛纔用Keynote導出的視頻，是橫的，而咱們作的Preview是豎的，怎麼辦？選中視頻片斷，在右側預覽窗口，點擊裁剪按鈕，拉動到合適位置，點擊對號按鈕就裁剪成功了。

 

 

 

六、選擇左側的Transitaion 在兩個片斷之間加入過場動畫，避免兩個不連續的畫面切換的時候顯的生硬。

 

 

 

七、選擇左側的的Sound Effects，添加音頻素材。注意在音樂結尾的時候，能夠按下圖調節2個小圓點實現聲音的逐漸減弱。

 

 

 

八、點擊預覽區上方的Share按鈕，選擇App Preview，將編輯好的視頻導出。

我上傳了兩個Keynote的源文件和最終的視頻文件到百度網盤，若是須要能夠去下載。

連接: http://pan.baidu.com/s/1mgIE0Q0 密碼: dq3t

後記

雖然這篇博客沒有什麼技術含量，但我斷斷續續用了2天才寫完它。能作和弄懂是兩回事，弄懂了和講清楚又是兩回事。因此，你們仍是多寫寫博客吧，好處多多。我本身先刨個大坑，爭取每週能寫一篇。先從iOS開發周邊寫起，而後寫寫讀書筆記，最後終歸要繞到技術文章上來。