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 刘轩飞

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (8)

Similar a Flash ria usability 刘轩飞

Similar a Flash ria usability 刘轩飞 (20)

Más de FLASH开发者交流会

Más de FLASH开发者交流会 (20)

Flash ria usability 刘轩飞