Your SlideShare is downloading. ×
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Flash UI - 商業應用案例探討
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Flash UI - 商業應用案例探討

2,717

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,717
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 超越 Web 2.0 Flash UI — 商業應用案例探討 教材: Flash 8 神魂顛倒 http://bbs.flash2u.com.tw
  • 2. 作者簡介
    • 張宇崑
      • 專長:軟體工程、資訊安全、網路互動創意、網路社群經營
      • 雜誌專欄作家:資訊族、 X-Magazine 、 CADesigner 、 RUN!PC 、 PC2000 雜誌、第三波、 iMOOK 、 PCMagazine
      • 碁峰、旗標、上奇、博碩圖書作者
      • 第三波、友立、教育部、醫療單位網頁比賽評審
      • 時間: 2006/12/30
    教材: Flash 8 神魂顛倒 http://bbs.flash2u.com.tw
  • 3. 作者簡介
    • 近期相關專案
    • 電子商務 http://www.ezcare.com.tw
    • 網路社群 http://bbs.flash2u.com.tw
    • VS 沙宣偷心小惡魔 http://www.vs.com.tw
    • EPSON 隨身印 http://kamome.flash2u.com.tw/
    • 早安 2006 活動 !! http://goodmorning2006.com/
    • 法國嬌蘭 唇瓣戀光 http://www.wretch.cc/activity/2006/guerlian/index.htm
    • 台哥大 fun 心預付卡 本活動登上韓國設計站 DBCUt http://kusofun.flash2u.com.tw
    • 台哥大 fun 心預付卡 http://twnfun.flash2u.com.tw/
    • 飛柔果漾宣言 http://pert.flash2u.com.tw/
    • BenQ-SIEMENS E61 http://benqsiemense61.flash2u.com.tw/
    • 博偉影視 http://bvi.flash2u.com.tw/
    • 植村秀 http://shuuemura.flash2u.com.tw/
    教材: Flash 8 神魂顛倒 http://bbs.flash2u.com.tw
  • 4. 何謂 Web 2.0
      • 資料是主角
        • 資料將變得越來越重要,其重要性已超過軟體本身,軟體只是個操作介面
      • 組合、創新
        • 網路上有大量的片段資料和服務,經過彙集重組之後,可以呈現另一種面貌,如 RSS 閱讀器。
      • 豐富的使用者體驗
        • 創造互動的新方式,使用者要求容易使用,而且直覺
      • 軟體跨設備
      • 軟體版本更新迅速,甚至永遠的 Beta 版
      • 輕量高效的軟體 / 商業模型
    教材: Flash 8 神魂顛倒
  • 5. 真的是 Web 2.0 嗎?
    • Wiki 認為 Web 2.0 雖然沒有明確的定義,但卻通常包含了以下的特質
      • 資料容易加入與取出
      • 通常使用者擁有自己的資料並且可以自行更改
      • 通常是以網頁方式呈現,基本上只需瀏覽器便可
      • 資料通常是以動態的方式回傳,而非靜態
      • 通常會鼓勵使用者參予,以增加其內容與價值
      • 會加入社交方面的功能
    教材: Flash 8 神魂顛倒
  • 6. 號稱 Web 2.0!!
      • Ebay 的 C2C 交易、 ICQ 的點對點溝通, Yahoo 的 My Yahoo 、 Napster 的 P2P 網路傳輸、 Google 的 Gmail 、 Flickr 、 FireFox 火狐瀏覽器、 MySpace 、 del.icio.us 書籤網站…
      • Blog 、 Wiki 、共用書籤、視訊 YouTube …
      • 各位認為 Web 2.0 該怎麼描述?使用者的行為模式?
      • Web2.0 造成使用者忠誠度降低?頻寬需求激增?
    教材: Flash 8 神魂顛倒
  • 7. 值得看看的 Web 2.0 網站
    • http://del.icio.us/
    • http://www.bluedot.us/
    • http://www.flickr.com/
    • http://www.flock.com/
    • http://www.netvibes.com/
    • http://www.pandora.com/
    • http://www.wordpress.org/
    • http://www.youtube.com/
    • http://city.ask.com/city
    • http://www.amie.st/
    • http://free411.com/
    教材: Flash 8 神魂顛倒
  • 8. Web 2.0 Meme Map from O’Reilly 教材: Flash 8 神魂顛倒
  • 9. Web 2.0 相關技術
    • 相關技術
      • Adobe 的 Flash 、 Flex
      • 非常多的 Ajax Library ,如:
        • Microsoft 的 Altas
        • Yahoo 的 UI Library
    • Web 2.0 產物
      • RSS :新版瀏覽器均已支援
      • Tag( 標籤 ) :公有標籤、私有標籤:許多的 Blog 系統均有提供
    教材: Flash 8 神魂顛倒
  • 10. Web 2.0 Technology 教材: Flash 8 神魂顛倒
  • 11. Web 3.0 !!
    • 在 Web 1.0 時代,我們所能做的,就是各處瞎逛,並美其名為——衝浪。
    • Web 2.0 帶給我們的,是一個可以讀寫、有互動、有社交的網路行為,代表性的事物就是 Blog 、 Wiki 等。
    • 而未來未知的 Web 3.0 ,可能是一個全新的人機對話時代,借助開放的 API , Web 成為一個作業系統?!
    教材: Flash 8 神魂顛倒
  • 12. 未來的 Web 3.0!!
    • 先掌握 Web 2.0 的精神,既使未來的 Web 3.0 要來到,也得先掌握住 Web 2.0 為基礎,才能繼續邁進下一個階段
    教材: Flash 8 神魂顛倒
  • 13. 豐富使用者經驗
    • Web 2.0 中除了形式、行為、整合上的改變,其中一項技術面的東西,就是「豐富的使用者經驗」部分,該部分主要就是 UI 與操作方式
      • 使用者介面 UI
      • 操作經驗:操作方式、流程、互動
      • 適合的工具: Flash 、 Flex 、 Ajax …
      • 呈現方式: RIA 、遊戲、提高使用者吸引力的介面
    教材: Flash 8 神魂顛倒
  • 14. RIA 要什麼?
    • 漂亮的操作介面,至少清爽
    • 良好的互動性
      • 有反應的按鈕
      • 位置、路徑清楚
      • 導引式流程
      • 操作步驟可反覆前後進行
    • 要注意的事項
      • 不要為了凸顯介面的美觀與新穎,反而失去了操作的便利性,此外也得考慮原本使用者慣用的模式
    教材: Flash 8 神魂顛倒
  • 15. RIA 進化圖 教材: Flash 8 神魂顛倒
  • 16. RIA 解決方案 教材: Flash 8 神魂顛倒
  • 17. Rich / Thin & Client / Server 教材: Flash 8 神魂顛倒
  • 18. Flash 是個不錯的選擇
    • 如果在 UI 上屬於比較簡單的介面整合,如簡易的表單填寫、問卷調查、投票等等,則直接使用 Flash 也是個不錯的選擇
    • 更重要的是, Flash 具備以下特性:
      • 視覺化工具可輕易控制教材流程
      • 製作互動性輕而易舉
      • 再使用性高
      • 周邊相關輔助工具多
      • 適合視覺設計者
    教材: Flash 8 神魂顛倒
  • 19. Adobe 的定義 教材: Flash 8 神魂顛倒
  • 20. 互動性
    • 在一般的 UI 當中,互動性是提高使用者參與的必備因素之一
    • 互動性的起源:滑鼠
    • 互動性呈現的方法有很多種:
      • 遊戲互動
      • 填寫資料
      • 問卷、心理測驗、線上考試
      • 投票
    教材: Flash 8 神魂顛倒
  • 21. 常見的選單觀摩 教材: Flash 8 神魂顛倒
  • 22. 也可以應用在系統介面上 教材: Flash 8 神魂顛倒
  • 23. 心理測驗的另類包裝—嬌蘭 教材: Flash 8 神魂顛倒
  • 24. 2006 世足— Banner 也可以很 Rich 教材: Flash 8 神魂顛倒
  • 25. BenQ-SIEMENS E61 實例
    • 實例說明:
    • http://benqsiemense61.flash2u.com.tw/
    教材: Flash 8 神魂顛倒
  • 26. Orb 教材: Flash 8 神魂顛倒 實例說明: http://www.orb.com.tw/
  • 27. BenQ-SIEMENS E61 實例 教材: Flash 8 神魂顛倒
  • 28. BenQ-SIEMENS E61 實例 教材: Flash 8 神魂顛倒
  • 29. 填寫表單範例—以植村秀為例 教材: Flash 8 神魂顛倒
  • 30. 填寫表單範例 - 下拉選單
  • 31. 填寫表單範例 - 確認按鈕
  • 32. 填寫表單範例 - 投票處理
    • System.useCodepage = true;
    • var result_lv2:LoadVars = new LoadVars();
    • result_lv2.onLoad = function(success:Boolean) {
    • if (success) {
    • yvoteTotal = parseInt(result_lv2.yvote1) + parseInt(result_lv2.yvote2) + parseInt(result_lv2.yvote3) + parseInt(result_lv2.yvote4);
    • VoteResult.vote1n.text = Math.round((result_lv2.yvote1/yvoteTotal)*100) + "%";
    • VoteResult.bar1._xscale = (result_lv2.yvote1/yvoteTotal)*100;
    • VoteResult.vote2n.text = Math.round((result_lv2.yvote2/yvoteTotal)*100) + "%"; VoteResult.bar2._xscale = (result_lv2.yvote2/yvoteTotal)*100;
    • VoteResult.vote3n.text = Math.round((result_lv2.yvote3/yvoteTotal)*100) + "%"; VoteResult.bar3._xscale = (result_lv2.yvote3/yvoteTotal)*100;
    • VoteResult.vote4n.text = 100-Math.round((result_lv2.yvote1/yvoteTotal)*100)-Math.round((result_lv2.yvote2/yvoteTotal)*100)-Math.round((result_lv2.yvote3/yvoteTotal)*100) + "%";
    • VoteResult.bar4._xscale = (result_lv2.yvote4/yvoteTotal)*100;
    • VoteResult._y = 200;
    • } else {
    • trace("Error connecting to vote server.");
    • }
    • // 送出資料
    • SubmitURL2 = "http://shuuemura.flash2u.com.tw/db_vote.asp";
    • var send_lv2:LoadVars = new LoadVars();
    • send_lv2.yvote = _root.q2_a;
    • send_lv2.sendAndLoad(SubmitURL2, result_lv2, "POST");
  • 33. 填寫表單範例 - 表單填寫
  • 34. 填寫表單範例 - 表單驗證
    • // 判斷是否填寫 Function
    • function chkAnswer() {
    • _root.yname_a = yname.text;
    • if (yname.text == "") {
    • ymsg.text = " 請填寫姓名 !";
    • Selection.setFocus("yname");
    • return false;
    • }
    • _root.yemail_a = yemail.text;
    • if (yemail.text == "") {
    • ymsg.text = " 請填寫 E-mail!";
    • Selection.setFocus("yemail");
    • return false;
    • }
    • if (checkemail(yemail.text) == false) {
    • ymsg.text = "Email 格式錯誤 !";
    • Selection.setFocus("yemail");
    • return false;
    • }
    • _root.ymobile_a = ymobile.text;
    • if (ymobile.text == "") {
    • ymsg.text = " 請填寫聯絡電話 !";
    • Selection.setFocus("ymobile");
    • return false;
    • }
    • if (ymobile.text.length<=5) {
    • ymsg.text = &quot; 請填寫正確的聯絡電話 !&quot;;
    • Selection.setFocus(&quot;ymobile&quot;);
    • return false;
    • }
    • // 聯絡地址
    • _root.yaddress_a = yaddress.text;
    • if (yaddress.text == &quot;&quot; || yaddress.text.length<=5) {
    • ymsg.text = &quot; 請填寫正確的聯絡地址 !&quot;;
    • Selection.setFocus(&quot;yaddress&quot;);
    • return false;
    • }
    • //ymsg.text = &quot; 送出資料中 .... 請稍候 !&quot;;
    • return true;
    • }
  • 35. 填寫表單範例 - 送出表單
    • Answer = chkAnswer();
    • if (Answer == true) {
    • var result_lv:LoadVars = new LoadVars();
    • result_lv.onLoad = function(success:Boolean) {
    • if (success) {
    • ymsg.text = &quot; 資料送出成功 !&quot;;
    • } else {
    • ymsg.text = &quot; 資料傳送錯誤 !&quot;;
    • }
    • };
    • // 送出資料
    • SubmitURL = “db_add.asp&quot;;
    • ymsg.text = &quot; 請稍待資料送出 .. 謝謝您的參與 !&quot;;
    • var send_lv:LoadVars = new LoadVars();
    • send_lv.yname = _root.yname_a;
    • send_lv.yemail = _root.yemail_a;
    • send_lv.ymobile = _root.ymobile_a;
    • send_lv.yaddress = _root.yaddress_a; send_lv.sendAndLoad(SubmitURL, result_lv, &quot;POST&quot;);
    • stop();
    • } else {
    • stop();
    • }
  • 36. 台哥大 fun 心預付卡實例
    • http://twnfun.flash2u.com.tw/
    教材: Flash 8 神魂顛倒
  • 37. 台哥大 fun 心預付卡實例 教材: Flash 8 神魂顛倒
  • 38. 台哥大 fun 心預付卡實例 教材: Flash 8 神魂顛倒
  • 39. 台哥大 fun 心預付卡實例 教材: Flash 8 神魂顛倒
  • 40. KUSO 驚馬獎實例
    • http://kusofun.flash2u.com.tw/
    教材: Flash 8 神魂顛倒
  • 41. KUSO 驚馬獎實例
    • 滑鼠互動
    教材: Flash 8 神魂顛倒
  • 42. KUSO 驚馬獎實例 教材: Flash 8 神魂顛倒
  • 43. KUSO 驚馬獎實例 教材: Flash 8 神魂顛倒
  • 44. 學習資源
    • 神魂顛倒 Flash 論壇
    • http://bbs.flash2u.com.tw
    • 演鏡互動創意
    • http://www.plusing.com.tw
    • 其他相關 Macromedia 網站
    • http://www.adobe.com
    • http://www.actionscript.org/
    教材: Flash 8 神魂顛倒

×