H5 BANNER MEMO
Outline
- Check list
- 點陣圖按鈕互動
- 點陣圖按鈕互動-簡易版
- 特定的按鈕範圍
Check List
- setting
- html
- html-快速替換
- html-刪除js檔後面參數
- 測試安全性問題
- 開啟隱藏檔
- check zip file
setting
meta
<script src="https://s0.2mdn.net/ads/studio/cached_libs/createjs_2015.11.26_54e1c3722102182bb133912ad4442e19_min.js"></script>create js
<meta name="ad.size" content="width=336,height=280">green sock (非必要)
<script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script>特定的按鈕範圍 (非必要)
<script src="https://tpc.googlesyndication.com/pagead/gadgets/html5/api/exitapi.js"></script>HTML
替換範圍
<title>336x280</title>
<!-- write your code here -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>HTML-快速替換
<meta name="ad.size" content="width=336,height=280">
<title>336x280</title>
<!-- write your code here -->
<script src="https://s0.2mdn.net/ads/studio/cached_libs/createjs_2015.11.26_54e1c3722102182bb133912ad4442e19_min.js"></script>替換結果 (記得檢查 meta data 裡面的尺寸)
預設
<script src="filename.js?1490262948366"></script>html-刪除js檔後面參數
<script src="filename.js"></script>刪掉問號&問號後面的數字
測試安全性問題
從檔案總管開啟檢查是否正常播放
開啟隱藏檔
check zip file
- zip 檔只能有以下檔案 CSS/JS/HTML/GIF/PNG/JPG/JPEG/SVG
- 150kb
- 圖片不能有中文檔名
- js檔的連結不能有問號參(ex:filename.js1490262948366)
- 上傳到 HTML5 Validator 檢查
- 或上傳 adWords 檢查
點陣圖按鈕互動
bitmap_hover.fla
完整檔案：bitmap_hover/final
練習檔案：bitmap_hover/practice
建立空白的感應範圍
建立互動動畫
使用程式碼片段面版
選擇滑鼠移入事件
Text
（要先點到按鈕）
預設的事件範本
修改後的滑入的程式碼
//建立時間軸的參考變數
var root = this;
//將 mouseOver 偵測頻率改成預設(一秒20次)
stage.enableMouseOver();
this.btn.addEventListener("mouseover", fl_MouseOverHandler);
function fl_MouseOverHandler()
{
//播放互動效果，pic_mc是自己命名的物件名稱
root.pic_mc.gotoAndPlay('hover');
}
使用程式碼片段面版, 滑出事件
新增滑出事件
修改後的滑出的程式碼
this.btn.addEventListener("mouseout", fl_MouseOutHandler_2);
function fl_MouseOutHandler_2()
{
root.pic_mc.gotoAndPlay('out');
}
完整的程式碼
//建立時間軸的參考變數
var root = this;
//將 mouseOver 偵測頻率改成預設(一秒20次)
stage.enableMouseOver();
this.btn.addEventListener("mouseover", fl_MouseOverHandler);
function fl_MouseOverHandler()
{
//播放互動效果
root.pic_mc.gotoAndPlay('hover');
}
this.btn.addEventListener("mouseout", fl_MouseOutHandler_2);
function fl_MouseOutHandler_2()
{
root.pic_mc.gotoAndPlay('out');
}
最後一步，從檔案總管開啟，
檢查是不是正常播放。
因為用animate cc開啟的話，他會模擬線上模式，但這個模式和google的線上模式不一致，所以必需確認本機開啟也沒有問題。
點陣圖按鈕互動-簡易版
完整檔案：bitmap_hover_multi/final
練習檔案：bitmap_hover_multi/practice
直接複製程式碼，修改變數名稱
//簡易版
var root = this;
stage.enableMouseOver();
this.btn.on('mouseover',function(){
root.pic_mc.gotoAndPlay('hover');
})
this.btn.on('mouseout',function(){
root.pic_mc.gotoAndPlay('out');
})快速增加第二顆互動按鈕
var root = this;
stage.enableMouseOver();
this.btn.on('mouseover',function(){
root.pic_mc.gotoAndPlay('hover');
})
this.btn.on('mouseout',function(){
root.pic_mc.gotoAndPlay('out');
})
this.btn2.on('mouseover',function(){
root.pic2_mc.gotoAndPlay('hover');
})
this.btn2.on('mouseout',function(){
root.pic2_mc.gotoAndPlay('out');
})特定的按鈕範圍
sample 位置: specific_scope
this.btn.on('click',function(){
ExitApi.exit();
})
H5 BANNER MEMO
By drawtide hu
