2009年12月9日 星期三

Flash : ImageSelector 圖片隨選器 II (2019.06.17 更新)

2009年12月9日 星期三

寫在前面 (2018年補充)

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


之前發表的 ImageSelector 圖片隨選器有許多的 bug,有一部份是因為使用 Flash MX 2004 開發,有它先天不良之處,居然用它內建的 FlashPlayer7 是無法看到圖片的,查了半天,無法解決問題,雖然可以用新版的 Flash Player 來正常執行,終究覺得有缺憾;另外是當初編寫程序時有些地方稍嫌紊亂。本來預訂用這兩天空檔的時間來小改一下,突然有了新的想法,幾乎是拆解後重新打造。
ImageSelector 圖片隨選器 II 改進了讀取圖片的程序,原本可能因為網路速度的因素,造成無法將設定檔中的圖片讀取完整,以致無法達成使用者想呈現的內容,甚至是半張圖也無法顯示,現在會一張張確定是否已載入完成。
最重要的是,新版的可以在設定檔(set.xml)中使用一個以上的 <images> ,也就是讓使用者可以將相關的圖片分成多組後再分別載入程式裡,抽圖片時可以在畫面上顯示多張圖片。而且可以自訂圖片的大小、位置、加標題字,並可以自訂標題字的字形大小、顏色、擺放位置。要抽換圖片,除了原本的按鈕外,現在也可以直接在要重抽的圖片上按一下。
set.xml 詳細的說明可以參考裡面的註解。
ImageSelector 圖片隨選器 II 要用的檔案如下:
  • ImageSelector2.swf :主程式,請對準 link 按滑鼠右鍵另存。
  • set.xml:設定檔,請對準 link 按滑鼠右鍵另存, 檔案請以類似 Windows Notepad 的文字編輯器開啟以後修改。
  • images (目錄,將所有圖片儲存在這個目錄裡)
程式下載


更新記錄
  • 2019.06.17 .d 解決當 reapeat=yes 時,聲音無法播放的問題。
  • 2017.10.05 .e 設定檔中如果圖片檔名輸入錯誤,未正常載入圖片會造成程式當掉;程式加入檢查各欄位的數值,如果圖片檔名未設定,或是無法載入圖片,程式會中止執行,並出現錯誤訊息提醒。
  • 2017.09.30 依江明勳老師 blogger 文章「嘰哩呱啦ACE 第1147回」中的需求,在 setting 裡加入 score 的參數設定,即可啟用計分的功能。
  • 2011.08.31 glglace 發現設定檔中的 width , height 如果超過程式版面預設大小 (550x400) 時,圖片自動縮小的功能會失常,已修正。
  • 2011.07.06
    修正如果將程式放網路來不及載入設定檔,以致於無法正當運作的問題。
    修正原來未使用正確的 XML 格式的問題,如果有舊的設定檔要給這一版的程式使用,記得先去掉最一行的 </xml>,然後在第一行的後面加上 <ImageSelector> ,在最後一行加上 </ImageSelector> ,不然會出現設定檔格式錯誤的訊息。
    如果是放在網頁中或以超連結呼叫程式,可以使用 ImageSelector2.swf?datafilename=xxx.xml 的方式指定設定檔。
    例如:下面這個會載入 set-4images.xml 的設定(最後面的 &ok 是為了讓 IE 也可以正常顯示)
    ImageSelector2.swf?datafilename=set-4images.xml&ok 
  • 2011.01.12 加入聲音的參數(Erin 的建議),可以自行指定顯示圖片時要播放的 mp3 檔案。
  • 2010.11.10 原來以 Flash 7 輸出, PNG, GIF 格式的圖片會出不來, 重新以 Flash 8 的格式輸出, 謝謝 Debbie 回報這個問題。

30 則留言:

  1. 雄老師,
    我要如何下載您這個工具呢? 只能看到swf,但不能下載. 謝謝!

    Debbie

    回覆刪除
  2. Debbie 您好,
    您只要對準文章中 ImageSelector2.swf 的 link 按滑鼠的右鍵另存即可下載,另外 set.xml 也是用同樣的方法儲存在同一個 folder 中後,將 set.xml 修改成您需要的設定即可。

    回覆刪除
  3. 雄老師, 我照你所說的把swf跟set.xml 放到同一個folder, 再建一個image folder在裡面, 但是 copy 過後的set.xml 并不能打開,訊息如下
    The XML page cannot be displayed
    Cannot view XML input using XSL style sheet. Please correct the error and then click the Refresh button, or try again later.


    --------------------------------------------------------------------------------

    Only one top level element is allowed in an XML document. Error processing resource 'http://mail.lsps.tp.edu.tw/~gsyan/work...


    -^

    你知到我是哪裡出問題了嗎? 謝謝!
    Debbie

    回覆刪除
  4. Debbie :
    出現那樣的訊息,我想,您可能是以 browser 去開啟檔案,那個 set.xml 是一個純文字的檔案,請用類似 Windows 內的 Notepad 這種文字編輯器開啓後再修改內容。

    回覆刪除
  5. 謝謝雄老師,
    終於搞懂能使用了.只是我有還一個問題,那就是我在使用雄老師和薇菲老師所設計的幾個遊戲裡發現,如果原來的圖案在set檔裡如果是jpg的型式,我也得放jpg,如果是png,也一定要png,而不能用jpg來代替.就像這個imageselector 裡用的是jpg,我拿之前在matching game 裡的png 圖就不會顯示,變成我得重新把圖重存成jpg,是不是能在set檔裡面修改可接受的圖檔型式呢?
    不好意思,問了你這麼多次, 不過你所設計的這些教具真的很有意義,讓上課的練習不再枯燥,上課既有趣又能學習,真的謝謝你能分享你的創作給我們使用,感激不盡.

    回覆刪除
  6. Debbie 您好,
    感謝您將有問題的地方找出來了哦!原來我輸出的格式是 Flash7 的,這個版本是無法載入 PNG 格式的,我已經重新輸出成 Flash8 的格式。
    請您重新下載 ImageSelector2.swf 應該就可以解決無法使用 PNG 格式圖片的問題。

    回覆刪除
  7. Grrrreat!
    有問題會再麻煩你喔! 謝謝嘍!

    回覆刪除
  8. 老師:
    謝謝你製作這個工具, 很有意思, 但想請問老師, 圖片的解析度是否會影響整張圖片的呈現, 比如說我自己掃瞄的圖片, 只能顯示出圖片的一半大小, 因為我將我的圖片掃瞄成600dpi.

    irene

    回覆刪除
  9. Irene 您好,
    關於圖片的解析度,如果太高,會因為要處理圖片大小而浪費系統效能,建議先縮小後再使用。一般來說,螢幕顯示而已,600dpi 實在太高了。

    回覆刪除
  10. 雄老師好:
    Erin這陣子才發現雄老師已經為第二代圖片隨選器加入了聲音參數!很謝謝雄老師喔!

    這連結(http://goo.gl/DhrPP)是當初Erin想要藉由加入聲音元素達到幫助學生們自行複習的效果。聲音部分是讓學生學習後,讓學生唸讀並錄音製作而成(只有"起床"不是學生的聲音,因為學生那一個詞發音不標準)。

    謝謝雄老師!^^

    回覆刪除
  11. Erin 好:
    一年前就照您提的,加上了聲音的功能,
    哈~原來 Erin 沒發現,
    希望還實用。

    回覆刪除
  12. 老師:
    請問ImageSelector 圖片隨選器 II 能否如ImageSelector 圖片隨選器 中在圖片上放上字, 我試過用圖片隨選器中的方式, 可是改變的反而在人時地物的位置. 請問要如何設定才能將字放在圖片上

    Irene

    回覆刪除
  13. Irene 您好,
    文字的部份,就是您改過的那個
    它可以用 align="xxxx" 來設定放哪裡,
    如果用 align="center" 就會放在字上面,
    我在註解中好像漏了 center 。
    您試試看

    回覆刪除
  14. 您好 檔案已無法下載 能否再上傳一次連結呢 謝謝

    回覆刪除
    回覆
    1. 您好:
      查了一下,學校的主機目前連不上(偶發性的),我下班前是可以連的。您可以明天再試試。

      刪除
  15. 您好!向您請教一個我的想法,不曉得是否可行?就是設計【成人之美選號器】程式,有一些人其實想被抽中,但是又很想要透過看似亂數選號的方式來達成,這種算是具排除功能(看似公平,其實一點都不公平)的抽籤程式有辦法製作嗎?希望是能設計嵌入圖片或輸入文字,而且對象可以不只一位的那一種程式。

    回覆刪除
  16. 您好,非常感謝您的分享,想請問是下載後用記事本修改完,要如果變成FLASH的SWF檔呢?

    回覆刪除
    回覆
    1. 您好:
      只要將改好的設定檔存放在原來的路徑,開啟同目錄中的 .swf 檔案,即可測試修改的結果。

      刪除
  17. 老師,想詢問WIN 10有沒有相容性或需要下載甚麼? 因為它顯示"無法載入set.xml"

    回覆刪除
    回覆
    1. 您好:
      如果不使用瀏覽器(網頁)來開啟 Flash , 應該可以解決問題, 請參考之前的這篇說明:
      http://gsyan888.blogspot.com/2016/09/flash-player-projector.html

      刪除
  18. 老師您好!想請問,若要自己編輯介面,要用甚麼軟體?謝謝

    回覆刪除
    回覆
    1. 您好:
      不知道您所謂的編輯介面是我提供的檔案中的設定檔(set.xml), 還是 Flash 程序的 .swf 檔案?

      如果是想編輯 set.xml , 個人較喜好使用 Notepad++ , 您可以使用任何編輯純文字檔的編輯器。

      如果您指的是 .swf 檔案, 我並沒有提供它的原始碼, 照說是不能編輯。

      刪除
  19. 因為我想要呈現大約丟200張照片,按鈕後隨機選出20張照片並且SHOW出來,所以才想要看看是否能用甚麼修改.swf

    回覆刪除
  20. 請問一下,有辦法去掉前面閃動的部分,讓點選按鍵時直接隨機出圖嗎??
    想將其作為教學的教材,真的非常感謝您:)

    回覆刪除
  21. 老師您好:
    使用圖片隨選器 II 遇到一問題,repeat 參數設定為 yes時,不能播放聲音,repeat 參數設定為 no時可以正常播放聲音,能否麻煩您有空測試一下。感恩。

    回覆刪除
    回覆
    1. 您好:
      謝謝提醒, repeat=yes 無法播放聲音的問題已經修正了, 請重新下載檔案。

      刪除
  22. 雄老師
    我把圖片隨選器ll改成兩格的讓小朋友練句型
    如先... 再...,.. 可是..,V 還 V...等等
    但這周開始不能RUN 了
    單格圖可用樂透代替
    多格可用sentence取代(不能隨機)
    但兩和三格就很難取代
    不知老師可以把圖片隨選器改成html5嗎?
    這要求很無理
    但我用了好多年圖片切換快製作方便可離線使用......
    很難找到替代品來做mmechanical drill foe esl students
    只好厚著臉皮請求
    先謝謝老師了

    回覆刪除
  23. 您好,
    HTML5 的 sentence 可以顯示文字、圖片, 也可以自訂要多少格, 基本上跟圖片隨選器的功能差不多。
    另外, sentence 的每一格都是隨機抽取內容的哦!

    回覆刪除
  24. 老師
    謝謝提醒
    我把不要的格子刪除
    就有兩格,三格,四格.....的圖片隨選器
    真不知變通 謝謝老師
    可是要一格一格按不能按一次三格一起換
    哈哈好懶惰的老師

    新年新希望
    還是想要大大的圖片在全螢幕上
    可以依選的格子數調整格子大小
    小朋友可以看到大大的圖片
    哈哈想想啦 已經很滿足了
    再次感謝老師

    回覆刪除

 
雄::gsyan © 2009. Design by Pocket