# AutoBanner 罐頭聯播網

**全新 Sketch Plugin 罐頭聯播網 Auto Banner 發布！！！**

<iframe width="560" height="315" src="https://www.youtube.com/embed/ZPfGYdUyRLA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

一個簡單的 **聯播網 Banner 動畫** ，要做多久？

我們來看看這兩種製作方法

1. 設計軟體匯出，HTML，CSS 一個手速絕對定位（或是 svg 一個無腦），GSAP 一個手速寫，完成
2. 設計軟體匯出，Google Web Designer 一個手速排版，關鍵影格一個手速加，完成

以上這兩種方法，最快至少都要幾分鐘的時間，我想請問各位，有可能縮短到零秒嗎？

零秒是什麼概念？

A：「可以麻煩你幫忙把這十個圖片做成一個簡單會動的...」
B：「我他 X 做好了！」

沒錯，這就是零秒做完，Sketch 的自動存檔都還來不及存，你的 Banner 先直接做完。(設計軟體還來不及存檔，就直接做完聯播網 Banner 動畫)

## Feature

1. 自動做完聯播網 Banner 動畫
2. 直接產出打包擋，可以直接上傳
3. [Double Click validation](https://h5validator.appspot.com/dcm/asset) 或是 [AdWords validation](https://h5validator.appspot.com/adwords/asset) 全過
4. 直接在 Sketch 預覽結果
5. 使用 GSAP 3 做完，直接使用 [Double Click host](https://support.google.com/richmedia/answer/6307288?hl=en) 的 JavaScript，節省你 150 kb 限制

## 使用方法

1. 下載後點兩下 auto-banner-beta.sketchplugin 安裝
1. 在 Sketch 選取所有寬高都一樣的 ArtBoard
2. 點選 Plugins/auto-banner-beta/auto-banner-beta
3. 跑出預覽 banner 和下載按鈕
4. 決定要下載的話，預設會放在 ~/Documents (家目錄的文件)

下載

https://drive.google.com/file/d/17fpGBtKT2wmLFh7_55CfN_ikZWwZyHlZ/view?usp=sharing