[Work]-Resizable Video Player ~ 米奇出品!免費提供下載使用!

上上週有寫了一個可動態調整尺寸及設定影片連結的Flv Player
那個算是一個測試練習的版本
所以只有錄了一個demo影片給大家看
後來我那位正在台大念博班的研究所學長~大寶
跟我說他想在Blog上用我寫的那個Flv Player
於是乎~我就乾脆又回頭繼續把這個Flv Player做完整
不多說~往下看看介紹~

其實之前那個版本是用ActionScript2.0寫的
所以寫起來還滿快的
而這一次不知道哪根筋不對
突然想用ActionScript3.0來寫~呵呵
於是~開始了我這漫長的開發時間~噗
大概花了二天左右的時間
還真是累阿!!!
而這一次竟然都用AS3了~
當然就要把它寫成Class囉!!
這樣之後就可以重複的使用這個Class啦
只要把這個class先import進來
然後再new一個物件就可以做完所有的程式控制了
真的是相當的方便阿!!
難怪國外一堆高手都在狂寫AS3 Class~
而這個flvplayer class也算是我的初體驗啦
而且算的剛剛好~Class程式總共500行!!
anyway~講了那麼多廢話之後
我們來進入正題!!!

這個Resizable Flv Player除了上次介紹過的功能之外
這一次也有順便修改了一些地方
例如~影片時間軸除了可以拖拉跳到指定位置播放之外
還可以直接在影片時間軸上點滑鼠左鍵就可以跳到指定位置播放
使用起來比較直覺、方便

還有在右下角加了一個MitchBox的logo(這應該不算功能~呵呵)

之前的resize功能只能在IE上跑
這個版本已經可以同時在FireFoxIE7上跑了
而目前唯一美中不足的地方~大概就是全螢幕播放的功能
因為增加了可動態調整Player尺寸的功能
所以在程式的部份可能還要在做些調整
不過這個功能應該還好~影響不大

最後~
有需要在你的Blog或網站上使用這個Resizable Flash Video Player的網友們
請到這邊下載相關檔案
裡面有相關的使用方法介紹
只需設定幾個參數就可以了
相當簡單容易的啦^^

標籤:, , , , ,

12 responses to “[Work]-Resizable Video Player ~ 米奇出品!免費提供下載使用!”

  1. frank says :

    MitchBox你好:
    上面網頁超連結,當滑鼠移上去時顯示出文字提示的功能是怎麼做的呢?是網頁快照嗎?

    我最近要用flex3實做一個系統,一篇課文中,會有該文章要學的生詞,當滑鼠移到上面會顯示該生詞的解釋,請問可以搭配上面連接呈現的功能嗎?

    主要是想實作像下方這個範例的功能
    http://www.bridel.org/flex/spellcheck/flexspellcheck.html
    當滑鼠移上去顏色不一樣的字時,出現了手指的符號,按下去或滑鼠移上去能顯示生詞的翻譯句子。
    是因為文字轉成了button嗎?
    因為這個是我想呈現的功能!
    不好意思哩!希望不會給你帶來困擾,
    因為最近很努力在學flex跟AS3,但是還是遇到瓶頸
    本身比較熟悉AS2語法,也實作過flash小遊戲!
    希望如果你知道的話,可以給我一些hint或解說喔!

    再次感謝你…Orz!

  2. mitchbox says :

    哈囉~Frank!!
    你的問題我分成以下幾點回覆:

    1. 那個網頁連結提示快照是wordpress內建的功能喔^^
    2. 其實我看不太懂你那個範例的用途^^"
    不過我大概知道你是要讓Flex中的文字連結能有一個tip視窗對吧?
    如果你是要讓Flex中的button或連結有tip視窗
    其實已經有內建這個功能
    但如果你想要有更進階的tip功能
    可以直接使用別人寫的sticky tip
    可以看一下以下這個網址(沒有提供source)
    http://labs.flexcoders.nl/samples/ToolTip/extended/
    類似的範例但有source~請參考以下網址
    http://labs.flexcoders.nl/tag/tooltip/

    希望能對你有幫助囉^^

  3. frank says :

    感謝你提供的訊息!

    不過我在實做過程遇到一些問題

    1.我是把一篇文章放在TextArea元件裡,但是文章有段落之分,flex有辦法像html有標籤幫助定位嗎?因為想分段,我是用tab鍵或是空白鍵去設定,不過complier時,欄位好像都會跑掉,不曉得有比較好的做法嗎?

    2.http://home.lst.ncu.edu.tw/~frank/text.JPG
    另外就是文字提示功能,譬如我想要讓"搖晃"這個生詞當滑鼠移上去時,會顯示生詞的翻譯,該怎麼做呢?如果是button元件,我就知道怎麼做,但是不曉得textArea欄位裡的方式是怎麼實做的呢,我有買flex2的書,但書上也似乎沒提到文字欄位裡的工具提示文字,只有給button的例子!

    不好意思喔!問題這麼多,再次感謝你的幫忙!…Orz

  4. Foster says :

    to frank:
    第一個問題你可以參考TextArea中的htmlText屬性
    第二個問題你可以參考以下網址
    http://ntt.cc/2008/07/20/how-to-highlight-the-text-in-flex-with-full-source-code.html

  5. mitchbox says :

    哈~放颱風假放太爽了
    都沒上來看blog
    感謝Foster大幫忙回答阿!!!^^
    第一個問題只要查一下help就可以解決了
    第二個問題就真的沒看過類似的範例
    感謝Foster大分享啦!!!
    順便多學一招^^

  6. Foster says :

    不用客氣,如果你知道一些不錯的秘技,也可以分享出來

  7. frank says :

    太感謝上面兩位高手了!

    我本來試過好幾種方法:

    1.第一就是另外建一個相同的生詞text元件去覆蓋在原本生詞上頭,不過位置不好調整,而且將來要大量修改時,要調每一個元件的位置,會瘋掉。

    2.使用XML語法去建立超連結
    是參考這個網站
    http://chuiwenchiu.spaces.live.com/blog/cnsCA5D9227DF9E78E8!960.entry
    想說使用超連結方式,但效果也不太方便。

    所以我來去研究看看這個方法,再次感謝了!

  8. mitchbox says :

    喔~~~
    之後有看到類似的效果再發上來share啦
    希望Frank大能夠試成功囉!!!

  9. frank says :

    MitchBox大你好

    我之前的功能有try出來了,就是把課文放在html的屬性,然後在生詞加上要觸發的語法

    <![CDATA[隔壁院子裡有顆大榕樹,
    搖晃

    ]]>

    也就是當點選搖晃這個生詞時會觸發onTxtLink(event)事件,這個事件會我是用AS3語法自行產生一個box,把解釋跟例句放在裡面,最後在再
    加上tooltip的功能。

    因為之前是寫死的功能,把文章寫在程式碼上,但因為之後會使用到好幾十篇的課文,我想說一定要有一些彈性的做法,所以就使用載入外部的文字檔,把課文放在txt檔案裡面,但是如果是純粹載入文字檔是沒有問題。

    可是我想把每篇文章生詞的觸發語法包在檔案裡面,也就是檔案裡面會有html標籤,如:http://home.cl.ncu.edu.tw/~frank/art2.txt
    載入到text欄位之後就遇到問題了 ,會顯示object,不知道是不是因為html那些標籤的關係。

    所以我就翻Actionscript 3.0 cookbook書找到可以載入html檔的方法,於是我就把上述檔案轉成html檔,一樣載入進去,但試了好久,都不行。
    語法:http://home.cl.ncu.edu.tw/~frank/loadtext.mxml
    我有看flex歐萊理的書,遠端資料通訊那章節,似乎沒有說到可以載入html,我不知道這是不是最大的原因。

    弄了好幾天,才想說問板大或其他高手,如果我要用這樣的功能,用哪種方法使比較可行,以及比較有彈性呢?
    目前我想到就是
    1.載入外部文字(內容是含有html標籤的課文)
    2.載入html檔
    3.課文變成XML檔(可是XML似乎無法直接顯示在text欄位上)

    希望大大了解的話可以幫助我,感恩不盡…Orz!

  10. mitchbox says :

    哈囉Frank!!!
    我做了一個範例提供給你參考!!!

    (以下程式我都用[]當tag的括弧顯示~這樣才能在部落格中顯示出來~)
    這個範例主要就是讓你知道如何把一個Html檔案載入到TextArea中顯示
    一開始先把html檔的內容丟到string中
    [ mx:String id="txtStr" source="test.html" /]

    接著在textarea中指定讀取這個string
    [ mx:TextArea id="txtBox" htmlText="{txtStr}" link="txtBoxLink(event);" /]

    另外還有一個CSS檔案來設定Html的樣式
    像連結或文字的顏色等等

    然後你一樣只需在那一份Html檔中的連結設定event就可以了
    例如:[ a href="event:Flex" ] Hello [ /a ]
    這樣就可以了

    這個範例的原始碼請到這邊下載

    希望對你有幫助啦^^

  11. frank says :

    Mitchbox大

    我試過了,很順利的成功了!

    原來要先把html塞到字串裡,才能丟到text欄位壓!

    這麼簡單的步驟,我竟然弄好久(真是汗顏)

    我可以順便請教你是怎麼上手flex的嗎?

    我突然覺得AS3也要很熟才行

    我覺得歐萊禮的書好生硬的說,

    可能是簡單的概念,但書上的寫法沒那麼淺顯意懂,

    太感謝你了!

  12. mitchbox says :

    哈~恭喜Frank大阿!!!
    ^^

    其實我也是最近才剛開始玩Flex而已
    大概才玩一個月不到^^"
    現在是真的玩上癮啦
    而AS3的部份也是最近一陣子才開始去研究
    之前都很偷懶~都用AS2在寫>0<
    所以ㄋ~
    我都是東看看~西看看~
    一直瘋狂的看別人寫的code
    想寫什麼功能就直接到google搜尋文章
    參考看看別人怎麼寫的
    然後在端看自己要寫的程式的狀況去修改調整
    就用這種很偷懶的方式^^"
    邊寫邊研究然後邊學啦

    我是覺得直接利用網路資源是最方便、最快的方式
    但是~如果要把根扎穩還是需要書的啦
    畢竟一本好書可以讓人受益無窮~
    我之後再整理一些不錯的Flex參考網站跟大家分享囉
    ^^

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

%d 位部落客按了讚: