###### tags: `客製素材`
# 現行素材一覽
1. 放置更新後的素材形式與 demo link，方便查詢做過的素材形式與能夠提供的檔案格式。
2. 紀錄各素材形式與其模組化相關事項
3. 如果針對模組化素材，請看[這一篇文章](https://hackmd.io/_AfXw48SRUuR4EA_zv-ngg?both)

## 系統支援的素材格式
### 影音
- 格式: mp4
- 尺寸: 16:9 or 9:16
- 檔案大小限制: 20MB
<font color=Salmon>*請檢查檔案內容，有時候預覽大小沒超過，但實際內容是超過大小的。</font>

### 圖片
- 格式
- jpg & png
- gif
- 尺寸：視素材形式規格而定
- 檔案大小限制: 每張 4MB

### HTML5 檔案
- 由 Adobe Animate 輸出
- 規格
- 檔案格式：HTML5
- 尺寸視需求格式大小，例如：製作 320x480 Banner，畫布大小就設定 320x480
- 輸出的檔案會由下列三項組成
1. index.html
2. index.js
3. image (裡面含製圖用之圖片)
- 檔案大小限制: 整包 zip 4MB 以內

#### HTML5 發佈設定注意事項
1. 蓋板請勿嵌入影片檔，不建議使用 GIF 圖檔製作動畫
2. 僅能使用時間軸製作動畫
3. 不支援濾鏡 (Filter) 及混合模式 (Blending Modes)
4. 僅支援圓形而非橢圓形放射性漸層
5. 不支援斜角、漸層光暈和漸層斜角濾鏡功能
6. 顏色效果 (Color Effect) 只支援 Alpha 值
7. 製作檔內的圖片、元件與圖層皆不可使用中文命名
8. 希望動畫重複播放，請勾選重複播放
9. 所有元件皆轉成圖片製作
10. 背景透明之素材，蓋在深色內容上依舊會有些許白邊呈現

補充： HTML5 Canvas API，並不支援某些功能，請閱 [Adobe Animate 的文件](https://helpx.adobe.com/tw/animate/kb/unsupported-features-html5-canvas1.html)

#### HTML5 製作注意事項
1. 檔案類型請選擇 HTML5 Canvas
2. 請依照不同格式設定畫布大小
3. 影格速率 (FPS)：24
4. 輸出名稱請寫 index
5. 如想要動畫重複播放，請勾選此欄 (有互動按鈕、串接數字等額外需求，請勿勾選此欄位)
6. 做出回應 > 兩者
7. 縮放已填滿可見區域 > 延伸以符合
8. 此欄位請勾選，匯出為影像資源，讓圖片輸出成獨立檔案

### An 檔 與 GIF 的比較
1. 載入速度： GIF > 輸出紋理 > 輸出原圖
2. 動畫畫質： 輸出原圖 > 輸出紋理 > GIF
3. 動態品質： 輸出原圖 略大於 輸出紋理 > GIF

## UI 規範
1. 關閉鍵
2. 關閉鍵 (Banner)
3. 下滑鍵
4. 靜音鍵
5. slider <>
6. 展開鍵
7. Logo

## 常用形式
[廣告素材資訊&文件](https://docs.google.com/spreadsheets/d/1CioY86BQZ3fE0ewIAoFmcqQIoZ-EAb7wdAP9emDoR4E/edit#gid=1882219250)

[HOLMES ADs 廣告系統成效資訊與媒體功能表](https://docs.google.com/spreadsheets/d/1MKjjefZcHloUfgWKdVinDMOsGDFV1-FL3GvRsRDTry0/edit#gid=0)

[客製化素材指標認列紀錄](https://docs.google.com/spreadsheets/d/1nZ2KoR1kqubswbzvwEfYj6J66IoDI0rVuOb-FbfEoLU/edit#gid=0)
- 特殊客製
- 特殊客製 (媒體確認正常執行)
- 素材共用 js 檔之紀錄

### 變形蓋板
#### 素材格式
模組
- cut1
- 300x250
- jpg/png/gif
- cut2
- 320x480, 640x960 or 900x1600
- jpg/png/gif
- cut3
- 320x480,640x960 or 900x1600
- jpg/png/gif

客製化

### 蓋板plus
模組與客製化素材，在媒體上正常呈現 (版位：300x250 文中創意)
#### 素材格式
模組
- cut1
- 300x250
- jpg/png/gif
- cut2
- 320x480, 640x960 or 900x1600
- jpg/png/gif
- cut3
- 320x480,640x960 or 900x1600
- jpg/png/gif

客製化

### 開場特效(置底單圖)
### 開場特效(置底影音)

### 彈出特效
- 彈出特效(置底圖像)
- 彈出特效(置底影音)

#### 素材格式
模組
- cut1 640x960 jpg/png/gif
- cut2 16:9 圖片或影音

無模組
- cut1 640x960/900x1600 jpg/png/gif
- cut2 16:9 圖片或影音

#### 模組化事項
- 舊系統目前
1. 只有單一導連 (僅有主點，無副點)
2. UI 欄位可填入兩個導連
3. 但後端資料僅接一個主導連

→ 導致目前使用模組產生之素材，點擊第二卡(16:9 圖 or 影)後，並沒有導連至給定的副導連
→ 對此形式的素材需求，目前全部都會進到客製化

- 新系統希望
1. 有主點和一個副點
2. UI 欄位可填入兩個導連
3. 後端資料需接上主導、副導連結的資料

### 移動大看板

- 移動大看板(圖片)
- 移動大看板(影音)

可接受素材: 16:9 影音和圖片/9:16 圖片
- cut1影 cut2 9:16蓋板(影+底圖) cut3影 [demo](https://cdn.holmesmind.com/dev/Mike/Pagination/Clickforce.html?cfadc=10230:131815)
- cut1影 cut2 9:16蓋板(僅底圖) cut3影 [demo](https://cdn.holmesmind.com/dev/Mike/Pagination/Clickforce.html?cfadc=10230:130123)
- cut1圖 cut2 9:16蓋板(影+底圖) cut3影 [demo](https://cdn.holmesmind.com/dev/Mike/Pagination/Clickforce.html?cfadc=10230:129044)
- cut1圖 cut2 9:16蓋板(影+底圖) cut3圖 [demo](https://cdn.holmesmind.com/dev/Mike/Pagination/Clickforce.html?cfadc=10230:129777)

### 風火輪特效(置底)
- 單一導連 [demo:134305](https://cdn.holmesmind.com/dev/Mike/Pagination/Clickforce.html?cfadc=10230:134305)
- 單張個別對應導連 [demo:136545](https://cdn.holmesmind.com/dev/Mike/Pagination/Clickforce.html?cfadc=10230:136545)

#### 素材格式
無模組(原始模組已下架)
- 16:9 jpg/png/gif *5

#### 模組化事項
- 新系統希望
1. 能夠照填入卡數自動生成
2. 需做成符合螢幕尺寸之置底素材

### 地圖廣告 (創意): 地圖廣告B

可接受素材: 圖片900x700 (2-4組)/1x1地圖圖像（建議gif動圖）/1x1按鈕(如果地圖圖像上有按鈕，可不用另外提供)
- 一主點、一副點 [demo:136666](https://cdn.holmesmind.com/dev/Mike/Pagination/Clickforce.html?cfadc=10230:136666)
- 使用者關閉定位: 廣告全部認列主點擊、右側地圖認列cpe
- 使用者開啟定位: 廣告左側slider認列主點擊、右側地圖認列副點擊與cpe

## 特殊需求