Samsung Smart TV 開發 – 2 範例
安裝完開發工具之後，最好是可以有個範例程式可以下載來讓我們看看是怎麼去開始整個專案的麻，遠本在官網上可以下載這個範例，不過後來好像因為官網改版，所以連結被移除或是改路徑了，可以到這邊下載：Flash_SWF_Sample_1.04
解壓縮之後可以看到目錄結構如下：
檔案說明：
| 檔案/資料夾 | 內容 |
| Javascript | 包含 Javascript 檔案, 在頁面中初始化及設定程式使用(Main.js) |
| thumbnail | 包含在 Samsung TV 中使用到的縮圖, 這些檔案及路徑都設定在 config.xml 中 |
| config.xml | 包含 Application 的資訊以及設定 |
| index.html | 應用程式主頁面, 當開啟Application時就相當於開啟此頁面 |
| sample.fla | 範例檔案的原始碼, 可產出sample.swf |
| sample.swf | Flash 檔案, 嵌在 index.html 上 |
config.xml可以說是最重要的設定檔案，一個不小心設定錯了，就會讓程式運作不正常，下面這個就是Flash專案的設定檔：
<?xml version="1.0" encoding = "UTF-8" ?>
<widget>
<widgetname>Flash Widget Sample1.04</widgetname>
<type>user</type>
<fullwidget>y</fullwidget>
<srcctl>y</srcctl>
<dcont>y</dcont>
<flashplayer>y</flashplayer>
<category>others</category>
<ver>1.04</ver>
<ThumbIcon>./thumbnail/CL_kids_106.png</ThumbIcon>
<BigThumbIcon>./thumbnail/CL_kids_115.png</BigThumbIcon>
<ListIcon>./thumbnail/CL_kids_85.png</ListIcon>
<BigListIcon>./thumbnail/CL_kids_95.png</BigListIcon>
<description>
Contents for Flash Widget Sample
</description>
<width>960</width>
<height>540</height>
<author>
<name></name>
<email></email>
<link></link>
<organization></organization>
</author>
</widget>
其中要注意的tag說明如下：
<!--讓 Application 開啟時就是全螢幕模式--> <fullApplication>y</fullApplication> <!--Application 在 Samsung TV Apps 中的分類--> <category>others</category> <!--tag for automatic transition of source ( From TV, media and so on to Application)--> <srcctl>y</srcctl> <!--註明此 Application 的類型為 Adobe Flash--> <flashplayer>y</flashplayer> <!--縮圖, 另外還有<BigThumbIcon>,<ListIcon>,<BigListIcon>這些tag在Samsung TV中都需要被設定--> <ThumbIcon>./thumbnail/CL_kids_106.png</ThumbIcon>
在 index.html 中，預設的版面如下，其中有一些說明，因為建立的專案為Flash，所以其中只會有一個Flash Object，其他的版面元素皆為空的：
<html>
<head>
<title>Flash Sample Widget</title>
</head>
<body onload="Main.onLoad();" marginwidth="0" marginheight="0"
topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<!-- Flash -->
<object type="application/x-shockwave-flash" id="sample" width="960" height="540">
<param name="movie" value="./sample.swf">
<!--這個參數一定要設置, 設定 Flash 的 render 類型-->
<param name="wmode" value="transparent">
</object>
<!-- Plugins -->
<!-- Smart TV的Plugin, 可使用電視機的功能 -->
<object id="pluginObjectNNavi" border="0" classid="clsid:SAMSUNG-INFOLINK-NNAVI"></object>
<object id="pluginObjectTVMW" border=0 classid="clsid:SAMSUNG-INFOLINK-TVMW"></object>
<!-- Common widget API -->
<!-- Samsung TV 的 Javascript API, 用以獲取遙控器輸入的按鍵及其他功能 -->
<script type='text/javascript' language='javascript' src='$MANAGER_WIDGET/Common/API/Plugin.js'></script>
<script type='text/javascript' language='javascript' src='$MANAGER_WIDGET/Common/API/Widget.js'></script>
<script type='text/javascript' language='javascript' src='$MANAGER_WIDGET/Common/API/TVKeyValue.js'></script>
<!-- Widget code -->
<script language="javascript" type="text/javascript" src="Javascript/Main.js"></script>
</body>
</html>
Main.js，為Javascript主程式：
var widgetAPI = new Common.API.Widget();
var pluginAPI = new Common.API.Plugin();
var Main =
{
}
Main.onLoad = function()
{
widgetAPI.sendReadyEvent();
// onShow時才去做一些初始化的動作
window.onShow = Main.initKeys;
}
Main.initKeys = function()
{
//get Nav plugin
var NNaviPlugin = document.getElementById("pluginObjectNNavi");
pluginAPI.SetBannerState(1);
NNaviPlugin.SetBannerState(2);
pluginAPI.unregistKey(7); //unregister volume up button
pluginAPI.unregistKey(11); //unregister volume down button
pluginAPI.unregistKey(27); //unregister mute button
pluginAPI.unregistKey(262); //unregister MENU key
pluginAPI.unregistKey(147); //unregister INFO.L key
pluginAPI.unregistKey(45); //unregister EXIT key
}
在Flash中，只是單純的去偵聽KeyboardEvent，然後讓圖像去做移動：
import flash.external.ExternalInterface;
var loop = 0;
//set focus to this flash content
ExternalInterface.call("document.getElementById(\"sample\").focus");
Selection.setFocus("playBtn");
var eventListener = new Object();
eventListener.onKeyDown = function() {
switch(Key.getCode())
{
case Key.END:
TXT.text = "Return";
_root.moving_circle.stop();
ExternalInterface.call("document.getElementById(\"sample\").Exit");
break;
case Key.ENTER:
checkPressedButtom();
break;
}
}
Key.addListener(eventListener);
checkPressedButtom = function() {
if(Selection.getFocus() == "_level0.playBtn")
{
TXT.text = "Play";
_root.moving_circle.play();
}else if(Selection.getFocus() == "_level0.stopBtn")
{
TXT.text = "Stop";
_root.moving_circle.stop();
}else if(Selection.getFocus() == "_level0.returnBtn")
{
TXT.text = "Return";
_root.moving_circle.stop();
ExternalInterface.call("document.getElementById(\"sample\").Exit");
}else{
TXT.text = "Press Buttom";
}
}
這個範例的程式碼是由 actionscript 2.0 寫成, 2.0與3.0的轉換可以參考 [http://www.actionscript.com.cn/help/migration.html Adobe官網]
由此範例可看出有兩種操作模式:
1. 使用focus, 將焦點移動至選取的按鈕上, Enter
2. 直接點選遙控器上的數字鍵或其他功能鍵去 trigger 按鈕
這邊要注意的地方就是：
ExternalInterface.call("document.getElementById(\"sample\").focus");
在ActionScript中呼叫了JavaScript的方法，叫頁面把focus放在這個swf上面，這段是一定要加，不然的話會無法真聽到KeyboardEvent，這段程式放在JavaScript中也可以。
範例執行結果：
