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();
})
Made with Slides.com