2012年9月1日 星期六

Flash : CardFlip 大家一起來 (2014.02.26 更新)

「大家一起來」是我小時候,中視的一個節目,裡面最重要的道具是一個可以翻牌顯示答案、分數、獎金......等資訊的機臺。兩、三年前,一位教自然的同事曾問過我是否能用 Flash 做出類似的翻牌小教具,那時卡在翻牌的動畫加文字效果並不好,加上同事沒有很迫切的需求,就這麼不了了之。2012.04.18 網友 deediao 提出了「大家一起來」小教具的發想,暑假比較有空了,在 08.10 提出了雛型,之後再依  deediao 和 glglace 意見,修改成現在的樣貌。


功能簡介
  • 可自訂在畫面上方要顯示的提示(題幹),及中間翻牌區每一張牌的內容和分數。
  • 可自訂在下方記分板區要顯示的組數及組別名稱。


目錄結構

CardFlip.zip 中只有兩個檔案,其檔名及功能如下:



設定檔參數說明

CardFlip.swf 啟動以後,預設會試著載入同目錄中檔名為 CardFlip_set.txt 的設定檔,並依裡頭的設定來顯示內容,底下是目前可設定的參數 (請注意 CardFlip.swf 的版本是否為最新的):

  • title:標題,會出現在一進入程式的畫面,另外,當題目沒有設定題幹時,最上方就改顯示 title  設定的內容。
  • question_font_size:上方題幹的字型大小,預設為 40。
  • card_default_font_size:牌中文字預設的字型大小,預設為 38。此部份的字型大小也可以利用「question_answer_hint_score」中的第三個欄位來設定某一張牌的字型大小,如果沒有設定,則會採用「card_default_font_size」的設定。
  • team_names:計分板上的組別名稱,不同組間用半形逗號分隔,最多可以有七組。如果不想出現計分板,這個參數就不做任何設定「& team_names=&」。
  • question_answer_hint_score:題幹、答案、提示及分數。
    每一題組使用多行,每一行代表翻牌區中的一張牌,一行接一行,空白行代表該題結束。
    每一行可以有三個欄位,以半形逗號當欄位分隔。
    每一題組第一行的第一個欄位是出現在畫面最上方的「題幹」,第二個欄位則是翻牌區中的最後一張牌 (右下角) 的「答案」。
    每一題組由第二行起代表著一張牌及其分數,第一個欄位是牌的內容,第二個欄位則是分數。第三個欄位則是字型大小。
    例如底下為某一題組的設定:

     猜猜看,腳踏車
     節能省碳,10
     摩門教,5
     練習曲,3
     輪子,2
     鐵馬,1

    上面這個題組會呈現底下的畫面:

使用時,每一張牌如果按一下就會翻一次面。計分板的部份,按某一組的加號,該組的分數會加一,按減號會扣一分。如果題組超過一題,按右下角的「Next」就會進入下一題,如果已到最後一題,該按鈕就會無效


鍵盤控制

2012.09.16 以後的版本加入了以鍵盤控制翻牌、上一題、下一題的功能,如果搭配可設定的對應鍵盤按鍵的遙控器,效果就更棒了。目前鍵盤按鍵對應的功能如下:

  • 數字鍵 1~9 及字母 A, B, C:用來翻由左上角算起的第 1 張~第 12 張牌 ( A=10, B=11, C=12 ),數字 0 也可以用來翻第 12 張的「答案」。
  • 空白鍵:顯示所有牌的內容 (相當於 Show 按鈕)。
  • Enter 鍵:隱藏所有牌的內容 (相當於 Hide 按鈕)。
  • → 右方向鍵:下一題。
  • ← 左方向鍵:上一題。



檔案下載



相關連結



更新紀錄

  • 2014.02.26 加入自訂題幹字型大小及牌中文字字型大小的參數。
  • 2012.09.16 加入以鍵盤控制的功能。
  • 2012.09.11 讓 [Next] 按鈕在題目已至最後一題時可以按,並重回第一題。
  • 2012.09.10 標題和題組中加入顯示直式注音的功能,可以利用語文高手題庫產生器「加注音」來產生需要的語法。
  • 2012.09.01 更改設定檔中題庫的格式,改以一題多行,每行兩個欄位的格式,這樣在手動修改題庫時會較清楚。
  • 2012.08.19 調整版面,將題幹改放到上方。
  • 2012.08.16 加入題幹顯示區。
  • 2012.08.15 加入計分板,下一題的按鈕。
  • 2012.08.10 雛型


26 則留言:

  1. 請問雄老師有辦法在國字旁加上注音嗎?謝謝您..

    回覆刪除
  2. 小丁您好:
    請重新下載 09.10 的更新版,並參考更新記錄中的網址即可加注音。

    回覆刪除
  3. 注音非常好用,謝謝雄老師,另外可否再加上類似"再玩一次"的字樣?因為目前題目答完,如要再玩一次,需要再重新執行一次,還是有其他方法?謝謝您...^_^

    回覆刪除
  4. 小丁您好:
    我把 [Next] 到最後一題後按了無效解開了,2012.09.11 版至最後一題再按 [Next] 會回到第一題。請重新下載

    回覆刪除
  5. 炎炎夏日的午後,有嚴老師的遊戲陪小朋友學中文,課堂上更有趣了.謝謝!

    回覆刪除
  6. 王老師您好:
    希望大家都玩得愉快~~

    ps.小聲說:我姓「顏」

    回覆刪除
  7. 顏老師你好:
    這個遊戲我用來做學生英翻中的搶答與計分,效果很好,唯一美中不足的是字體太大,較長的句子無法完整顯示出來,不知顏老師可否提供可改字體大小的版本?
    Kevin

    回覆刪除
    回覆
    1. Kevin 您好:
      剛剛更新了程式,請您重新下載,然後在設定檔中可以利用「question_font_size」、「card_default_font_size」兩個參數來自訂題幹與牌中文字的預設字型大小。
      如果只是某一張牌的字型大小要改變,我在題庫設定的部份新增了「第三個欄位」來自訂該張牌的字型大小,其它未設定的則使用「card_default_font_size」的設定值。
      例如,原來的:

      「噗友匿稱,10」

      可以變成:

      「噗友匿稱,10,24」

      多的「24」表示「噗友匿稱」使用 24 的字型大小

      您試試。

      刪除
  8. 顏老師,謝謝你:
    我下載試過了,「噗友匿稱,10,24」的部分可以更改字體,至於「question_font_size」、「card_default_font_size」這兩個參數,
    我在.txt設定檔中加了&card_default_font_size=12 及&question_font_size=12
    等兩行參數命令,但好像沒反應,不知是否與法錯誤?

    回覆刪除
    回覆
    1. 數字的最後面記得多加一個 And (&) 符號,
      再不行, 可以將檔案寄給我看看 ( gsyan888 At gmail.com )

      刪除
  9. 在數字後加上&符號,字體大小就可以相應變更了. 下週小朋友就可以玩新版遊戲. 真謝謝顏老師.
    另外, 老師的 flash 遊戲在有的安卓平板上可以 play, 有的不行, 要能順利執行, 是否有軟硬體的規格需求? i-pad 上可執行嗎?

    回覆刪除
    回覆
    1. 賀老師您好:
      當初設計時都是針對 PC , 平板的部份, 如果是將 Flash 放到 web server 才去開啟的, 只要您的平板有支援 Flash , 照說應該沒問題, 如果是放到 Android 內才用其它檔案管理工具開啟的, 則不一定能開了, 主要的問題在檔案路徑的表示方法有異, 這個在我早期寫的程式是會發生的,較後開發的則有修正此一問題。
      至於在 iPad 上, 除非利用某些 Apps 以 "轉一手" 的方式 "間接" 開 Flash, 不然, iPad 本來就不支援 Flash , 現在連 Adobe 也自己放棄平板這一部份, 所以, 較新版本的 Android 基本上也不支援 Flash。這也是為什麼我開始轉換到 HTML5 上。HTML5 就可以跨平臺使用了

      刪除
  10. 謝謝顏老師!
    如果想學 HTML5 遊戲開發,有什麼書可自修? (不須太高階, 只是作為輔助教材讓小朋友玩的), 不然老是竊取老師的成果, 看看有沒有機會像老師一樣, 也能付出與分享.

    回覆刪除
    回覆
    1. 賀老師您好:
      說 "竊取" 太嚴重了, 既是分享, 喜歡、合用就拿去用, 無他想。
      我都是自己在網路上亂看亂玩, 對於有哪些書則無研究。如果您有寫 JavaScript 的經驗, 應該可以很快上手, 如果對 CSS 熟稔, 甚至可以自己完全由零打照。
      個人因為之前玩過 LimeJS 這個以 HTML5 開發的 framework, 所以都用它來開發自己的程式, 現在有滿多類似的東西, 而且大都附有範例程式可供學習參考。可能還是要自己去摸摸看, 才會知道哪一種比較好。個人並不是專家, 以上, 給您參考。

      刪除
    2. 顏老師:
      我只在早期(網路流行前)學過 basic 和 dbase 語法, 老師說的都沒碰過,看來還有很長一段路要走, 謝謝分享!

      刪除
  11. 顏老師
    您好 想請教 若翻牌之後希望出現的是圖片 該怎麼做呢

    回覆刪除
    回覆
    1. 您好:
      這個小工具只能使用文字題, 並不支援圖片。

      刪除
    2. 顏老師:
      謝謝您!您回覆的這麼快,我卻現在才回覆。感佩顏老師的熱心,也有個不情之請啦,就是能開發翻牌之後是圖片的程式。好像太貪心了,其實最重要的是謝謝顏老師您!

      刪除
  12. 奇怪,重新登入此網頁卻看不到我剛發布的訊息.

    回覆刪除
  13. 顏老師,你好:
    不好意思,又要麻煩老師了.昨天突然發現,我的 chrome (版本是:53.0.2785.116m)上的所有flash game 都不能玩了(前幾天還可以玩的,但當時的版本不能確定).遊戲載入時都出現"無法載入設定檔"的訊息.我試過用IE11來玩是正常的.筆電的chrome(版本是:52.0.2743.116m)上也可以玩.請問是不是新版的chrome不再支援flash了?還是需要做某些設定?(我試著把 chrome 移除再重裝但還是"53.0..."的新版本.)有其他人向老師反映這個狀況嗎?對了,我也試過在全球華文網moodle課程裡連到dropbox也是可以正常運作的.
    賀明禮 上

    回覆刪除
    回覆
    1. 您好:
      在猜,應該是 Web Browser 中 Flash Player 的問題,底下是今晚發布的文章,給您參考:
      http://gsyan888.blogspot.com/2016/09/flash-player-projector.html

      刪除
  14. 因為重新瀏覽時一直看不到發布的訊息,故重複發了好幾遍.

    回覆刪除
  15. 謝謝顏老師,又可以玩了.真是忙者不會,會者不忙.老師輕描淡寫就解決了,我可是試了兩個晚上在不停地更新/設定/卸除/再安裝.....

    回覆刪除
  16. 顏老師你好:
    我之前都是把你的遊戲檔放在Dropbox的公開資料夾,然後取得公開連結網址後貼到華文網moodle課程裡的網頁資源裡讓學生直接在網頁上玩.但從昨天起,Dropbox關閉了公開資料夾也不再支援.swf類型的檔案在網頁上顯示,故我今天上華文網發覺所有 flash game 都不能玩了.請問老師是否知道如何解決這個問題或是教導我如何將遊戲轉到部落格去使用?

    回覆刪除
    回覆
    1. 您好:
      gdrive, dropbox 陸續收了這種方便的空間, 這應該是趨勢, 想用只能另外找空間放。其實華文網有此需求, 大家就應該就跟華文網的主管單位反應。個人因為無此需求, 因此也沒有特別對研究。不過, 網路上應該還是有一些 free web hosting services , 只是要去找, 您可以找找看。

      刪除
  17. 我再找找看同時向華文網反映.謝謝老師的建議.

    回覆刪除

 
© 2009. Design by Pocket