Flash : Poke 戳戳樂(2013.10.17更新)

寫在前面的前面 ^.^

Flash 版的戳戳樂已經停止更新，建議您使用可以跨平台、載具、較新的 HTML5 版戳戳樂：

• 雄 : HTML5 戳戳樂

寫在前面 (2018年補充)

本工具以 Flash 開發，如果使用較新版的網頁瀏覽器開啟此小工具，出現類似「無法載入設定檔」的錯誤訊息而不能使用，請先參考底下的兩篇說明：

• 雄 : Flash : Flash Player projector

• 雄 : Flash : 開放瀏覽器讀取本機的設定檔

很多人都玩過戳戳樂(洞洞樂、戳洞樂、托洞組)，用手指頭把紙戳破，再挖出洞洞裡的小禮物，即使東西並不怎麼值錢，大家似乎都沈醉在那種小驚喜中。
 四月初網友 deediao 提出類似戳戳樂的佈題工具構想，以 Flash 的原理來說並不難，就是顯示很多格子，每個格子都是按鈕，使用者選定「按鈕」並按下去以後，程式就出現回饋的畫面。之後有空，我便試做了一個Flash 草稿版的戳戳樂，廣徵大家的意見並請大家提供可運用的圖片和音效素材。得到了大家迴響，glglace 甚至還父子聯手，幫忙製作音效。
大家那麼賣力，我當然是得努力的加油囉！於是在這一噗中發表了「戳戳樂」。之後又在這一噗裡提出了更新版。製作完，第一個享用的當然是班上的小朋友，他們可樂了，利用 Wiimote 電子白板的 IR Pen 在螢幕上戳，驚喜連連，直嚷著還要再玩，看來，效果達到了，這一切可得要歸功於教育噗浪客裡眾人的參與。

這個工具可以用在什麼地方呢？有人拿它來抽獎(最原始的功能)，有人拿它當布題的工具，有人用它來分配掃除工作、分組、抽籤......，它似乎是目前我的作品中應用最廣而且下載次數最多的小工具。

下面就來介紹一下戳戳樂特色與設定方法。

特色：

• 可自訂格子(洞)數、戳洞後的音效、圖片和戳到的獎項的內容(題目)。
• 戳完以後可出現：文字、圖片、聲音、影片任一種或是混合使用。
• 在網頁模式下(非 stand alone) 可以自訂設定檔的檔名。

目錄結構 ：

這個工具參考了很多噗有的建議，改了後多次，原來有兩個版本，現在只維護名為 poke2 的新版，底下介紹戳戳樂 poke2.zip 下載、解壓以後，裡面最重要的檔案：

• poke2.swf ：主程式 (另有一個 白色背景的版本 poke2-bg-white.swf )，這個檔案必須以獨立的 Flash Player 來開啟，或是利用瀏覽器 (Flash Player Plugin) 來開啟。
• poke2_set.txt ：設定檔，poke2.swf 啟動以後，預設會開啟這個檔案，並分析裡面的參數設定來配置版面及產生題庫，因此，檔名不能更改。但如果是利用瀏覽器來直接開啟 poke2.swf，或是放在網頁的 HTML 語法中，則可以利用指定 datfilename 的方式來自訂設定檔的檔名。
• data ：程式的預設資料夾，這裡面有一個 .mp3 的檔案(戳洞後的音效)，和幾個 .png 的檔案(填每一格的圖片)。如果不想用這個資料夾名稱，可由設定檔 poke2-set.txt 中的「mediaFolder」參數來指定為自己喜歡的名稱。

打造自己的戳戳樂

poke2.swf 預設會讀取同目錄下的設定檔「 poke2_set.txt」，因此，我們只要將裡面參數修改一番，可以讓它變成想要的樣子。目前 poke2_set.txt 中可以設定的參數如下：

• title : 戳完會出現對話框，設定對話框的標題。
• font : 設定對話框中文字的字型名稱 (預設使用標楷體)。
• fontsize : 設定對話框中文字的字型大小 (預設為 32 )。
• col , row ：用來設定要 col x row 個「洞」，col 為橫向有幾個，row 為縱向有幾個。
• showNumber ： 如果為 1 時，可以在每一格的左上角標上號碼，方便學生指定位置。
• mediaFolder : 圖片和音效檔存放的資料夾，如果不想放入資料夾，就用點「.」。
• soundFilename : 戳洞後會的音效檔案名稱。
• paper : 格子上的圖案，可指定多個，每個檔案名稱間以半形逗號「,」隔開。
• blackborder : 最外圈，黑色方框的粗細。
• question : 設定題庫。該參數名稱等號後接的
  每一行代表一個題目。
  每一行中可以放兩個欄位，欄位與欄位間用「 半形逗號」分隔。
  第一欄是題目，
  第二欄是這個題目預計要出現幾次(請注意後面的說明)。
  題目可以是「文字」、「圖片」(.jpg, .png, .gif, .swf)、「聲音」(.mp3) 或是「影片」(.flv)，
  題目如果文字、圖片、聲音和影片混合使用時，再以「半形井字號」(#) 當分隔符號。
  
  

上面的參數中，最重要的就是用來決定有多少洞可戳的 「col」、「 row」， 和戳完會出現什麼內容的 「question」 三個參數。建議可以一次改一個參數，關掉 poke2.swf 重開後，觀察看看有什麼不同後，再試下一個參數，相信，幾次以後，就可以瞭解每一個參數功用。

「question」設定中，基本上有會以下的幾種可能的組合(特別注意每一題的「逗號」和「井字號」：

• 純文字
  請問這個遊戲的作者是誰？,1
• 純圖片
  gsyan.jpg,1
• 純聲音
  cat.mp3,1
• 純 FLV 格式影片
  train.flv,1
• 文字＋圖片
  照片中的帥哥是誰？#gsyan.jpg,1
• 文字＋聲音
  這是什麼動物的聲音？#cat.mp3,1
• 圖片＋聲音
  cat.jpg#cat.mp3,1
• 文字＋圖片＋聲音
  這是什麼動物？#cat.jpg#cat.mp3,1

上面的範例都是設定要出現一次，所以最後面都是加上「,1」，最大的不同點是半形逗號前的「第一個欄位」，如果是兩種不同類型的題目混合使用時，會使用半形井字號來隔開。

注意：question 中每一題的第二個欄位雖然可以指定該題要出現的次數，不過，想控制題目(獎項)出現次數，必須要所有題目加起來的總次數等於 col 參數乘以 row 參數(也就是「總格子數」) 。如果大於  「總格子數」 ，有些題目(獎項)出現的次數會比設定的少；如果小於「總格子數」 ，則有些題目(獎項)出現的次數會比設定的多。因此，在安排題目出現次數時，記得要拿筆算一下。個人會運用「再抽一次」的「題目」來補題目不足的情形。


FAQ

• 題目中的圖片、 聲音和影片檔案要存放在哪裡？
  假設我們 question 中的題庫設定是：
  
  cat.jpg,1
  
  那 cat.jpg 應該要和 poke2.swf 放在同一個資料夾中。
  
  假設我們 question 中的題庫設定是：
  
  images/cat.jpg,1
  
  那 cat.jpg 應該要放在 images 資料夾中。
• 如何設定「答案」？
  由於當初這個工具就定位為布題用的工具，所以，基本上是老師上課教學用的小工具，不是遊戲，因此，答案必須由老師來宣布啦！

關於 datafilename 的特殊語法

2010.04.29 為了測試是否可以在 LifeType 中上載有「設定檔」的 Flash 程式，我將 poke2.swf 改為可以自訂設定檔的檔名，當我們在執行 poke2.swf 時如果設定了 datafilename 的參數，它會將設定檔的檔名改為 datafilename 所指定的檔名。所以，如果是在瀏覽器中開啟 poke2.swf 可以用類似下列的語法 (此語法在 IE 上會有問題，解法請看後面)：

• http://mail.lsps.tp.edu.tw/~gsyan/works/flash/poke/poke2.swf?datafilename=set.txt
• http://mail.lsps.tp.edu.tw/~gsyan/works/flash/poke/poke2.swf?datafilename=set2.txt

特別注意這兩個網址的最後面 datafilename= 後面分別接了 set.txt 和 set2.txt。它們通通是 poke2.swf 的設定檔，但是內容不相同，這樣子，可以應用在不同的場合。

經過測試，上面的語法在 IE 上會有問題，如果是應用在 IE ，可以改用底下的語法試試：

• http://mail.lsps.tp.edu.tw/~gsyan/works/flash/poke/poke2.swf?datafilename=set.txt&
• http://mail.lsps.tp.edu.tw/~gsyan/works/flash/poke/poke2.swf?datafilename=set2.txt&

哈! 看清楚沒有，只差在最後那個 and ( & ) 符號而已。

另外一種方式是在 HTML embed 的語法中加入 flashvars="datafilename=......"


檔案下載

打包好的壓縮檔內包括了主程式、設定範例、音效( glglace 提供)和圖片(下載自 OpenClipArt 裡 Nicu's Clipart Collection 中的 pacman 系列)

下載點：

• poke2.zip 力行個人網站空間 (2013.10.17更新)

更新記錄

• 2013.10.17 加入顯示直式注音(每個國字的注音間要以一個空白隔開)的功能。
• 2012.07.08 .flv 影片播放完畢以後，「暫停」會自動變為「播放」鈕，並讓影片可以在按完按鈕以後，重新播放。07.09 如果找不到影片檔，會顯示訊息。
• 2012.07.07 加入支援 .flv 格式的影片。
• 2012.07.05 修正右下方工具圖示狀態判斷錯誤的情形；把 .zip 中的小精靈圖檔檔名改簡單一點；將原來的設定範例檔名 poke2-set.txt 改為 poke2_set.txt ，讓它和我的其它作品的命名規則一樣，其實都讀得到啦！
• 2011.09.05 修正圖片會超出顯示範圍的問題。
• 2011.08.04 題庫的格式中加入井字號(#)的分隔符號，現在可以有文字＋圖片、文字＋聲音、文字＋圖片＋聲音的模式。
• 2011.08.04 題庫如果帶有 .jpeg 也會被試著當作圖片的檔案名稱來載入圖片。
• 2011.07.22 在 poke2 的設定裡新增了 showNumber 的參數。
• 2010.12.24 原來的版本, 在 stand alone 的 Flash Player 下, maxCol 不能超過 9, maxRow 不能超過  6，現在超過時會自動計算最佳的大小，不會再超過畫面。
• 2010.11.14 噗友 tina 發現 poke2 不會照設定的 question 數量去布題，看過她的設定檔後，發現原來是在數字的後面多按了空白鍵，讓程式誤判，看似數字卻不當數字處理，因此無論設多少都會被指定為預設值 1 出現一次。現在程式會自動將設定檔中題庫的每一行的第二個欄位的空白去掉以免誤判。
• 2010.09.12 加了另一個名為 poke2 的版本。
• 2010.09.12 之前的版本，儲存、載入的功能並沒有正確的將題目(獎項)儲存起來，如果此部份內容曾經改過，因為載入的題目資料是空的，無法正確的顯示抽得的項目。
• 2010.08.28 獎項內容如果把文字那欄改放圖片檔檔名(.jpg, .gif, .png, .swf) 或是聲音檔檔名 ( .mp3 ) ，可以載入圖片或聲音。
• 2010.07.22 依格子數自動調整格子的大小和位置。
• 2010.07.15 增加 font , fontsize 兩個參數，可以用來自訂字型。修正右下角的工具列會被擋到的問題；在 Browser 中將最右側的結束按鈕變成無法使用。
• 2010.06.20 在右下角的工具列中加入儲存和載入的按鈕。利用 Flash 的 SharedObject ，可以將目前的狀態儲存在本機上(最多可以儲存八筆記錄)，有需要時可以載入舊資料繼續抽。

相關噗文

• http://www.plurk.com/p/4koqs6
• http://www.plurk.com/p/4mm7uy
• http://www.plurk.com/p/4nqc8m
• http://www.plurk.com/p/4q9saj
• http://www.plurk.com/p/4xfiyh
• http://www.plurk.com/p/4xzr0p
• http://www.plurk.com/p/4z4gwz

相關文章

• 雄 : HTML5 : Poke 戳戳樂