Flash RIA Usability

Flash RIA 的可用性刘轩飞 2010/09/18

RIA ,[object Object],[object Object],http:// www.adobe.com/resources/business/rich_internet_apps

什么是可用性 (Usability) ,[object Object],[object Object],[object Object],可用性是用户界面易用程度的衡量指标

Flash RIA 的一些可用性挑战 ,[object Object],[object Object],[object Object],[object Object],[object Object]

Flash 的浏览器兼容性 ,[object Object],[object Object]

Flash 的浏览器兼容性 <object classid = "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width = "100%" height = "100%" > <param name = "movie" value = "ball.swf" /> <param name = "quality" value = "high" /> <param name = "wmode" value = "opaque" /> </object> 不合适的 HTML 标签和属性会导致 Flash 无法访问查看演示

Flash 的浏览器兼容性部分浏览器对插件的访问做了限制 6/7 ,[object Object],[object Object],[object Object],查看演示

Flash 的浏览器兼容性兼容各种浏览器的 HTML （一） <object classid = "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width = "100%" height = "100%" > <param name = "movie" value = "ball.swf" /> <param name = "quality" value = "high" /> <param name = "wmode" value = "opaque" /> <embed src="ball.swf" quality="high" wmode="opaque" width="100%" height="100%" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_cn" /> </object> 查看演示

Flash 的浏览器兼容性 W3C 推荐使用 Object 标签兼容各种浏览器的 HTML （二） <object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width = "100%" height = "100%" id = "main" > <param name = "movie" value = "ball.swf" /> <param name = "quality" value = "high" /> <param name = "wmode" value = "opaque" />  <object type = "application/x-shockwave-flash" data = "ball.swf" width = "100%" height = "100%" > <param name = "quality" value = "high" /> <param name = "wmode" value = "opaque" /> </object>  </object> 查看演示

Flash 的浏览器兼容性 http://code.google.com/p/swfobject/ <script type = "text/javascript" src = "swfobject.js" ></script> <script type = "text/javascript" > swfobject. embedSWF ("ball.swf", "myContent", "100%", "100%", "9.0.0", "expressInstall.swf"); </script> 查看演示

别忽视地址栏 ,[object Object],A: 看看我家双宝 :D Http:// www.somedomain.com /album 杯具轩飞的相册 – 我的宝宝 Http://www.somedomain.com/album 相册首页 Http://www.somedomain.com/album B: 真可爱… @_@

别忽视地址栏 ,[object Object],http://[Domainname] / # / {Username} / {ModuleName} / {ObjectId} ,[object Object],[object Object],[object Object]

别忽视地址栏 ,[object Object],http:// www.asual.com/swfaddress / ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],查看演示

Flash Player 的全屏模式全屏模式下的交互限制 ,[object Object],[object Object],[object Object]

Flash Player 的全屏模式一些小问题…… ,[object Object],[object Object],[object Object],[object Object]

Flash Player 的全屏模式为全屏模式改变用户界面 ,[object Object],[object Object],[object Object],查看演示

适应不同的屏幕分辨率 ,[object Object],<style type = "text/css" media = "screen" > html, body { height:100% ; } body { margin:0 ; padding:0 ; text-align:center; overflow:hidden;} </style> <script type = "text/javascript" src = "swfobject.js" ></script> <script type = "text/javascript" > swfobject.embedSWF("ball.swf", "flashContent", "100%" , "100%" , "9.0.0", "expressInstall.swf"); </script>

适应不同的屏幕分辨率 ,[object Object],stage . addEventListener ( Event . RESIZE , resizeHandler); function resizeHandler(evt: Event ) { updateDisplay (); } function updateDisplay () { // 设置界面元素的位置、大小和外观 }

适应不同的屏幕分辨率 ,[object Object],Mac OS 的窗口控制 CS5 的安装程序窗口保持合适的大小，不能最大化 “ 最合适大小”的按钮，不是“最大化”

适应不同的屏幕分辨率 ,[object Object],<script type= "text/javascript" > swfobject.embedSWF( "ball.swf" , "flashContent" , "100%" , "600" , "9.0.0" ); swffit.fit( "flashContent" ); </script> ,[object Object],[object Object],[object Object],[object Object],查看演示

创建全球化的 FLASH RIA ,[object Object],<mx:HBox width = "390" > <mx:VBox> <mx: Label text = "{resourceManager.getString('main','comment.name')}" /> <mx: Label text = "{resourceManager.getString('main','comment.comment')}" /> </mx:VBox> <mx:VBox width = "100%" > <mx: TextInput id= "tiName" width = "100%" /> <mx: TextArea id= "taComment" width = "100%" height = "80" /> <mx: Button id= "btnSubmit" label = "{resourceManager.getString('main','comment.submit')}" /> </mx:VBox> </mx:HBox> 查看演示

更多 ,[object Object],[object Object],[object Object],[object Object],

案例 ,[object Object],[object Object],[object Object]

谢谢！ ,[object Object],[object Object]

Flash RIA Usability

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Viewers also liked

Viewers also liked (20)

Similar to Flash RIA Usability

Similar to Flash RIA Usability (20)

Flash RIA Usability