2010年1月23日 星期六

Flash : Phone 注音小鍵盤

很佩服網友 glglace 總是不停的有新點子產出,這個星期,他又在 Plurk 裡呼叫大伙兒,這次他要一個可以讓他的女兒在觸控螢幕上點、點、點,大字版的注音輸入法的中文輸入程式。
注音輸入法一般是拿使用者輸入的注音符號到對照表中找出相對應的同音字,再讓使用者由候選的一堆字中挑出要用的國字。所以關鍵在這個「注音、國字的對照表」。以前因為玩 unix like 中的 X Window 曾經由 source 編譯過中文輸入法(xcin),記得它裡面就有「對照表」,上網找了一下,找到了一個 phone.cin 。它是一個文字檔,結構很簡單,每個欄位以空格當分隔,第一個欄位是注音(以鍵盤按鍵的英文符號代替),第二欄開始則是同音的國字。一行一個國字,排列有規則就好辦多了。於是我利用 PHP 程式來分析對照表,並重新輸出成 Flash 可以接受的格式,轉換程式程式碼如下:
<?php
$lines = file("phone.cin");
foreach($lines as $line) {
$line = trim($line);
$col = split(" ", $line);
if(sizeof($col) > 1) {
if(!isset($data[$col[0]])) {
$data[$col[0]] = "";
}
$data[$col[0]] .= $col[1]." ";
}
}
$ph1 = Array('1', 'q', 'a', 'z', '2', 'w', 's', 'x',
'e', 'd', 'c', 'r', 'f', 'v', '5', 't', 'g', 'b', 'y', 'h', 'n',
'u', 'j', 'm', '8', 'i', 'k', ',', '9',
'o', 'l', '.', '0', 'p', ';', '/', '-',
'6', '3', '4', '7'
);
$ph2 = Array('ㄅ','ㄆ','ㄇ','ㄈ','ㄉ','ㄊ','ㄋ','ㄌ',
'ㄍ','ㄎ','ㄏ','ㄐ','ㄑ','ㄒ','ㄓ','ㄔ','ㄕ','ㄖ','ㄗ','ㄘ','ㄙ',
'ㄧ','ㄨ','ㄩ','ㄚ','ㄛ','ㄜ','ㄝ','ㄞ',
'ㄟ','ㄠ','ㄡ','ㄢ','ㄣ','ㄤ','ㄥ','ㄦ',
'ˊ','ˇ','ˋ','˙'
);
foreach($ph2 as $i=> $p) {
$ph2[$i] = iconv("big5", "UTF-8", $p);
}
echo "&tab=";
foreach($data as $index=> $line) {
$index = str_replace($ph1, $ph2, $index);
echo $index." ".trim($line)."\n";
}
echo "&\n";
?>
由於對照表中的「注音符號」是以按鍵的符號來代表,這樣對 Flash 的程式來說,較不好處理,這個 PHP 的工作主要就是把英文符號換成注音符號。當 Flash 把轉換過的對照表通通讀到一個變數以後,我們再把它以換行字元當分隔符號分解整個內容,再一行行存成「注音」、「國字」的關連陣列,方便使用者輸入完注音以後,可以很快的找到同音的國字有哪些(以空格來分解各個國字)。
原來下載回來的對照表,「二」(「ㄦ」「ˋ」鍵盤上的「-」「4」)的同音字有以下幾行:
-4 二
-4 貳
-4 佴
-4 刵
-4 咡
-4 樲
-4 聏
-4 毦
-4 眲
-4 衈


轉換完,同一個音的國字集中到一行中,變成:
ㄦˋ 二 貳 佴 刵 咡 樲 聏 毦 眲 衈
這種工作如果是純手工,鐵定又是虐待自己的手,當然要用程式來代勞。
對我來說,整個程式最麻煩的應該是如何去控制 TextField 中的游標,並讓輸入的國字可以出現在游標所在的位置,因為寫了這支程式 K 了不少資料,才知道,原來還有 Selection 這個 Class 可以用,裡面的 Selection.setFocus (讓 TextField 取得焦點) , Selection.getCaretIndex() (取得游標在哪個位置) , Selection.setSelection() (設定選取範圍/將游標移到指定的位置),目標鎖定了,卻無法順暢的控制游標,程序調來調去,始終沒有找到答案。今天突然靈光一閃,曾經有某位 Flash 高人說過,如果發生難解的問題,將元件多包一層 MovieClip ,通常可以迎刃而解。當我把 TextField 包在 MovieClip 裡面時,就可以利用 MovieClip 在滑鼠 mouseUp 時取得游標的位置並暫存起來應用。這部份花了不少時間,不過是值得的,因為現在對 Selection 的運作已經可以大致掌握了。


功能與特色

注音小鍵盤的功能、特色如下:
  • 可以利用注音輸入法輸入中文字在輸入區中
  • 按一下複製鈕即可將輸入的中文字複製到剪貼簿中。
  • 按逗號(,)鈕可以將虛擬鍵盤改為標點符號輸入。
  • 可以控制國字的「插入點」在哪裡。
  • 輸入錯誤時可以利用虛擬鍵盤的退位鍵(←)來刪除注音或國字。

下載與設定

注音小鍵盤目前總共需要兩個檔案,只要對準連結按滑鼠右鍵,另存目標,儲存在同一個目錄中即可使用:
phonetab.txt 要注意的是,由於這個檔案主要是以換行字元來當不同音之間的分隔,千萬別把兩行設定合成一行。裡面最有可能會修改的,應該只有第一行的標點符號,我們可以選取常用的標點符號來置換。第一個字一定要用逗號(,),它代表使用者要輸入標點符號。每個標點符號之間要用一個半型的空格來隔開。

常常覺得自己有股傻勁,只要有解答的事,一定會想各種方法來試著找出答案,過程一定是辛苦的,但是累積的經驗卻是別人不見得擁有的。誰說不能犯錯呢!找路的過程中往往會發現新天地。

2010.02.17 補記
如果需要的是漢語拼音版的,下載

Changelog
  • 2010.02.24 Updated 把注音小鍵盤和拼音小鍵盤都改成可以由使用者設定字體和字型大小。
  • 2010.01.22 Updated 解決游標問題;增強退位鍵的功能,讓它也可以刪除國字;修改 phonetab.txt 加入逗點(,)按鈕的設定,並加入標點符號輸入功能。
  • 2010.01.19 Beta

Todo list
  • 讓使用者可以自訂鍵盤按鍵的位置、顏色。
  • 待選國字超過 43 個字時是否加入換頁功能。

31 則留言:

  1. 親愛的雄老師,

    最近試著把老師的注音小鍵盤放上我的blog--http://blog.huayuworld.org/ShinLin/17988/2010/03/16/57676, 也教了我一些朋友. 現又有人想把拼音小鍵盤也放上, 才發現不會弄了. 請問老師怎樣才能把拼音小鍵盤也放上blog呢?

    謝謝老師, 您真的很棒!!

    回覆刪除
  2. Shin-Shin:
    看了您 blog 這一篇是利用 iframe 直接連我的網站的做法,如果要用同樣的方式連回臺灣的,那就把 http://mail.lsps.tp.edu.tw/~gsyan/works/flash/phone/phone.swf 中的 phone.swf 改為 pinyin.swf ,也就是 http://mail.lsps.tp.edu.tw/~gsyan/works/flash/phone/pinyin.swf
    如果連到我的網站速度太慢,您可以考慮將 phone.swf , phonetab.txt (注音) 或是 pinyin.swf , pinyintab.txt (拼音) 檔案下載以後再放到自己習慣的使用的空間。 FildDen的實作,草莓老師有試過

    回覆刪除
  3. 雄老師,

    在草莓老師的協助下,簡體字版的拼音小鍵盤終於貼在我的教學部落格上了.但是,發現用ie看, 可以看到簡體字,但是用firefox,還是只能看到繁體字.現在只能暫時希望學生的瀏覽器是ie了..... 可以到我的第二間教室看看. http://blog.huayuworld.org/yehlaoshi2/17973/2010/03/18/57725 這是我給學生們先試試看的作業.
    老師, 我們可以解決這個問題嗎?? 這是什麼原因呢?

    回覆刪除
  4. 金惠老師您好:
    不知您簡/正中文的問題是否已解決,我在 Windows XP 用 IE 及 Firefox ,在 Linux(Ubuntu) 的 Firefox 上都可以正常顯示簡體字。如果其它電腦都正常,只有您的電腦不正常,目前想到的可能原因是因為 browser 有 cache 的機置,pinyin.swf 可能沒抓到改過的 pinyintab.txt
    您可以試著進入 Firefox 的 [工具]→[選項]→[進階]→[網路]→[離線資料儲存]→[立即清除]
    然後再重新開網頁試試看

    回覆刪除
  5. 雄老師
    我把注音小鍵盤貼上在我的部落格http://blog.huayuworld.org/ice168c/19425/2010/03/14/57685,家長的反應都很好,只有一位家長說他是用mic 電腦,所以沒有辦法看到小鍵盤,會有這個問題嗎?

    回覆刪除
  6. ICE老師:
    不知您指的是不是 'Mac',
    抱歉, 個人只有在 Windows 和 Ubuntu(Linux) 上看過我的小鍵盤,本身沒有 Mac , 實在不知道它會不會有您家長所提的情形。有機會我再問問可以測試的朋友。

    回覆刪除
  7. 雄老師你好,

    我是聯合中文學校的Vivien. 我在華文的部落格引用了你的對對碰, 注音小鍵盤, 和拼音小鍵盤.

    謝謝你的分享, 讓我跟學生們都獲益良多.

    Vivien

    回覆刪除
  8. Vivien:
    不客氣啦!!有幫助就好。
    有什麼問題或是需求,歡迎不吝指教

    回覆刪除
  9. Vivien:
    順便提一下,對對碰和康X 沒有任何關係

    回覆刪除
  10. 雄老師 對不起, 我已經把康X去掉了.
    這個星期打算引用你的語文高手當e作業,
    先在這裡跟你說聲謝謝.
    我本身也有在寫程式, 不過對flash不太熟, 不知道雄老師是用甚麼發展環境去寫這些遊戲, 有沒有一些範例程式我可以參考學習的?

    謝謝.

    Vivien

    回覆刪除
  11. 周老師:
    我目前網路上分享的程式幾乎都是 Windows 裡的 Flash 寫的,Flash 6, 7, 8 都有。
    Flash 的部份我並沒有受過正式的訓練,大多是摸索來的。如果您對 Flash 不熟,建議您可以先找有關 Flash 動畫的書,先練習一下基本的動畫製作;再找有關 Flash Action Script 的書來研究它的程式語法。

    回覆刪除
  12. 雄老師,
    您好!我是渥太華中文學校的老師,很感謝您的分享,在您的網站裡,我獲得許多,非常感謝您
    !您真的好棒!!

    回覆刪除
  13. 真棒的程式,很適合小朋友或老人家用!
    不同的聲母或韻母重複按,是否可修改成後按的取代前面的符號?

    如ㄅㄆㄇㄧㄈㄨ變成ㄈㄨ
    這樣就不必按←倒刪鍵了!
    也可以增加Esc鍵來快速清除打錯的符號或離開選鍵(目前程式中,按後選字外的其他鍵已可離開選字)

    最後,如果可以的話,說不定可以增加發音的功能!或增加學習測驗的功能!呵~我的胃口是不是太大了?

    回覆刪除
  14. 親愛的雄老師您好
    非常感謝您分享這麼好的工具。我把兩個小鍵盤都放在我的教學網頁上,可是學生在使用時反應了一個問題,想請問您如何解決。我們在用拼音輸入時,英文字母u有時是注音ㄨ有時是ㄩ,目前發現無法輸入「女」字,打nu3出來的是「努」。一般在電腦鍵盤上我們都是用字母v來代替ü,可是在您的鍵盤上輸入nv3之後並沒有國字出現。麻煩您撥冗解答。謝謝!!!

    回覆刪除
  15. to 2010年11月29日匿名的訪客您好:
    謝謝您的寶貴意見,如果我有時間的話,有些地方應該可以再加強,謝謝!

    回覆刪除
  16. to 線上中文教室的老師您好:
    無論是注音或拼音的部份,當初有考慮到可能會增刪字庫的需求,所以,程式採取的是會讀取外部的對照表檔案(phonetab.txt,pinyintab.txt)這兩個檔案您可以用類似 Windows 中的記事本(Notepad)開啟後修改為自己需要的內容。

    ps.我姓「顏」顏色的「顏」啦!

    回覆刪除
  17. 雄老師,真不好意思,居然弄錯了您的大姓,線上中文教室那邊已經修正了,真的對不起喔!
    同時謝謝您的解答,我不是很有把握怎麼做,不過一定會試試看。若有問題再來請教。感謝您!

    回覆刪除
  18. 雄老師:

    謝謝您的分享,我試著試著竟然就把小鍵盤給放進了部落格左側,但我想在小鍵盤的下方放行字來說明來源取自您,但我不知道該怎麼做?謝謝!

    回覆刪除
  19. 雄老師:
    您的注音小鍵盤真的太棒了,很久沒有像現在這樣感動過!我想把它放在我的"繁簡中文轉換"的網頁裡,以方便海外華人的使用。因此、有幾個問題要請教您:
    1.如何把輸入結果的中文直接放在我網頁的文字框內?
    2.如果是可行的?可以隱藏Flash注音小鍵盤文字框嗎?

    以上問題請雄老師指教,謝謝!

    繁簡中文轉換網址:http://38time.artjoey.com/link/trans_ts.htm

    jeff 敬上

    回覆刪除
  20. 顏老師您好,
    我叫寶蓮, 閱讀不少您的資料及使用幾個好用的工具, 非常感謝.
    想請問可否將您的注音及拼音鍵盤直接使用html embed到我的網站上? 目前使用joomla 3.1. 暫且用連結的方式介紹學生馬上使用 (學生很喜歡) 但不太專業. 由於學生不太喜歡到我的moodle網站內上課, 因此最快的方式是請學生直接到我的網站上使用這些工具.
    PS - 感謝您提供繁體筆劃的中文部份改為英文的資訊, 自己也將初級所有筆畫embed 到網站內讓學生直接點選看筆畫及練習.


    回覆刪除
    回覆
    1. 寶蓮老師您好:
      您只要將本文提到的 .swf 和 .txt 下載回去,再放到您的網頁空間中,應該就可以 embed 到您的網站中了。joomla 我沒用過,詳細的方法就無法給您建議囉。很高興知道您的學生很喜歡,謝謝!
      另外,不知您 PS 中提到的「中文部份改為英文」指的是哪一個工具?

      刪除
  21. 顏老師的動作真快, 謝謝您. 我會試試看.
    PS 內所提的是: 教育部常用國字標準字體筆順學習連結快速產生器 內的筆畫練習. 您可看看我的網站http://www.elearningchinois.fr/index.php/ecrire-traditionnel-1. 花了一些時間才弄好的. 開啟後請下拉才看得到所有的字. 但是無法修改字體尺寸, 有點可惜, 因為所佔的篇幅太大了. 剛剛再進去看其它字體時才發現只有部份的字體A-B有英文版其它部份仍為中文版. 但已於html內全部修改zh-TW 為 en-US, 不知為何只有部份有效. Anyway, 再次謝謝您的寶貴時間.

    回覆刪除
    回覆
    1. 寶蓮老師您好:
      您比較一下

      1.「locale=en_US」
      2.「locale= en_US」

      兩者有何差異?前者是正確的,後者是參數設定失敗的。

      刪除
  22. 顏老師您好,沒錯差了一個space, 結果就差很多. 要貼上時也檢查過好幾次, 有時一個空格的差異看久了看起來也差不多, 且要檢查86頁,到頭來看得眼都花了!! .
    真是感激不盡!!

    回覆刪除
  23. 顏老師您好,
    我無法進入您的網頁下載pinyin.swf. 是否有修改內容? 因為Google無法捉取這一頁.
    謝謝您.

    回覆刪除
    回覆
    1. 您好:
      聽說學校主機最近常中斷服務, 如果連線失敗時, 您可以等一段時間再重試。目前我試是 ok 的。

      刪除
  24. 顏老師您好, 現在都可使用了. 再次謝謝您. 新年快樂.

    回覆刪除
  25. 顏老師您好,
    感謝製作分享您的遊戲程式,我把遊戲程式、筆順練習和拼音小鍵盤嵌入我的weebly網站,供學生在校及在家練習使用,網址如下:http://advantagewanglaoshi.weebly.com/
    如有錯誤之處,請不令指教.謝謝您.

    回覆刪除
  26. 您好,
    請問這個程式有辦法改成VB語法嗎?
    謝謝

    回覆刪除
    回覆
    1. 您好:
      如果您問的是我有沒有辦法,答案是我目前沒有辦法,也沒有需要。
      如果您問的是您有沒有辦法,可能要問您自己。
      它的原理很簡單,只是在對照表中搜尋同音的字,然後顯示給使用者挑字而已,對照表已經有現成的,只要轉換成您需要的格式後應用在程式中,剩下的就是簡單的資料處理而已。

      刪除

 
© 2009. Design by Pocket