Web base 吴志华

2,394 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
2,394
On SlideShare
0
From Embeds
0
Number of Embeds
358
Actions
Shares
0
Downloads
37
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web base 吴志华

  1. 1. WebBase Flash 基于 IE 开发框架 望月狼 / 2010-7-24
  2. 2. WebBase 采用模块式开发概念,处理多模块协作 问题保持各模块的依赖关系,追求项目与 IE 的溶合,是 应用于 Flash 或 FlashBuilder 开发 web 项目的开源框架。
  3. 4. <ul><li>简 单 </li></ul><ul><li>自 由 </li></ul><ul><li>高 效 </li></ul><ul><li>稳 定 </li></ul>Flash 基于 IE 的应用 WebBase
  4. 5. 1 . 纯 AS 开发高手,用于 WEB 应用项目 , 实现模块式的开发。 2 . 喜欢靠 AS2 的自由性开发 Flash 全站或善未完成 AS3 技术蜕变的人。 3 . 工作喜欢“偷懒”又追求原创与细节的设计师。 4 . Flash 艺术高手并略懂 AS 编程的技术贵族。
  5. 6. WebBase 能做什么? 01 . 快速地实现模块建立与调用。 02 . 可以轻松地实现伪地址与标题 。 03 . 支持状态值的记录管理。 04 . 很方便地实现更换页面时的过渡动画。 05 . 垃圾回收机制。 06 . Flash 基于 IE 的尺寸控制与自适应能力。 07 . 互访功能。 08 . IE 控制能力。 09 . 基于 IE 的 DeBug 功能。 10 . 辅助工具。
  6. 7. 框 架 原 理
  7. 8. 继承与可扩展基类
  8. 9. ◎ 页面调入与模块加载
  9. 10. openPage 页面调入方法 openPage(path:String, target:String = &quot;blank&quot;, usePlayEnd:Boolean = false, waitTime:uint = 0):void @param path 要打开的页面,使用 XML 菜单中的 ID 值 @param target 加载的目标,值可以是 BLANK,TOP,PARENT @param usePlayEnd 使用尾动画 @param waitTime 旧 SWF 移除后可能还要等待别的动画执行完毕再加载新的 SWF ◎ 页面调入与模块加载 Example: openPage(&quot;about&quot;,BLANK,true); addEventListener (LoadSwfEvent.PROGRESS,childProgress )// 子页加载进度 addEventListener (ParentEvent.ADD_CHILD, addSwfFile);// 子 SWF 被添加载舞台时触发事件 function childProgress(event:LoadSwfEvent): void { var getPct: uint = event.bytesPct; trace (getPct+ &quot; %&quot;) } function addSwfFile(event:ParentEvent): void { addChild (event.loader); }
  10. 11. ◎ 页面调入与模块加载 loadModule 模块加载方法 Example: var module:IloadInfo=loadModule(&quot;childModule.swf&quot;) module. addEventListener (LoadModuleEvent.COMPLETE,loadComplete) function loadComplete(e:LoadModuleEvent): void { var pb:ParentBase = e.module as ParentBase; }
  11. 12. getURL(url:String,window:String=null):void @param url     链接网址 @param window 浏览器窗口,可以指定窗口也可以是已命名的窗口 可用值:“ _self” 、“ _blank“ 、” _parent” 、 &quot;_top&quot; ◎ 页面调入与模块加载 getURL 打开页面 navigateToURL(new URLRequest(&quot;www.xxx.com&quot;))
  12. 13. <data> <menu height= &quot;600&quot; title= &quot;About us&quot; id= &quot;about&quot; file= &quot;about.swf&quot; /> <menu height= &quot;900&quot; title= &quot;My project&quot; id= &quot;project&quot; file= &quot;work.swf&quot; /> <menu height= &quot;700&quot; title= &quot;News&Message&quot; id= &quot;blog&quot; file= &quot;news.swf&quot; /> <menu height= &quot;600&quot; title= &quot;Contact&quot; id= &quot;contact&quot; file= &quot;guestbook.swf&quot; /> </data> XML 菜单配置
  13. 14. package com.webBaseDemo { import com.webBase.ParentBase; import com.webBase.event.ParentEvent; import flash.display.Loader; public class Main extends ParentBase { public function Main() { this.addEventListener( ParentEvent .ADD_CHILD, addSwfFile); } private function addSwfFile(event: ParentEvent ):void { var loader: Loader = event.loader this.addChild(loader); } } } Index code:
  14. 15. ◎ 建立页面过渡动画
  15. 16. ◎ 建立页面过渡动画 this. addEventListener ( ChildEvent .END_PLAY, startPlay)// 开始播放结束动画 private function startPlay(value: ChildEvent ): void { mc. gotoAndPlay (&quot;end&quot;); } [ 演示 ]
  16. 17. ◎ 互访功能 a.swf => public function setValue(str: String ): void { }; b.swf => var acode:ACode = parentPage as ACode; acode.setValue(&quot;abc&quot;)
  17. 18. ◎ DeBug 能力 1.traceWin(value: Object ): void 2.JSAlert(script: Object ): void 3.debugMode: Boolean [read-write] Example: traceWin(1+1) traceWin(this) Example: JSAlert(&quot;abc&quot;)
  18. 19. ◎ 伪地址与状态值 伪地址: http://localhost/webbase/#/ about / tag2 采用多个SWF来实现某一种交互时使用 状态值: http://localhost/webbase/#/about- tag2 [ 演示 ] 采用一个SWF来实现不同模块的交互时使用
  19. 20. Example1: openPage(&quot; about &quot;); ◎ 伪地址与状态值 Example2: addState(value:String); delState(value:String); clearState(); addEventListener (StateEvent.GET_STATE, getParamStates) function getParamStates(event:StateEvent): void { traceWin(event.states[0]); }
  20. 21. ◎ 工具包
  21. 22. ◎ 工具包 control.addFavorite(url:String=&quot;&quot;,title:String=&quot;&quot;) // 加入收藏夹,可兼容不同浏览器 control.fullScreen(intoCallBack:Function,exitCallBack:Function) Example: control.fullScreen(intoFun,exitFun) function intoFun():void{ traceWin(&quot; 进入全屏模式 &quot;) } function exitFun():void{ traceWin(&quot; 退出全屏模式 &quot;) }
  22. 23. control.frameScript(mc:MovieClip,frame:Object,callBack:Function):void // 在帧上添加代码 Example: control.frameScript(mc, &quot;end&quot;, callFun) function callFun():void { //Your code } effect.buttonEffect(target:DisplayObject,changeTarget:DisplayObject,obj:Object):void // 对象过渡效果,当鼠标滑入滑出某一显示对象时产生过渡变化 Example: buttonEffect(butMc,butMc.bg,{startColor: 0xC29C6A, overColor:0xC29C6A}); ◎ 工具包 net.loadBg(filePath:String,width:uint,height:uint,mode:String=&quot;matrix&quot;) 加载背景图片 , 格式为 jpg,png 或 gif 图片 @param filePath 图片路径 @param width 背景宽 @param height 背景高 @param mode 显示模式: matrix: 矩阵平埔 ( 默认 ) , stretch: 拉伸 ,center: 居中
  23. 24. ◎ 工具包 net.loadXML(filePath:String,callback:Function,gbCode:Boolean,useXML:Boolean):URLLoader XML 或者 txt 文件加载 @param filePath 文件路径 @param callback 回调函数 , 如果加载 XML, 函数参数为 XML, 如 function getXML(xml:XML) @param gbCode 是否使用中文编码 , 默认是 @param useXML 是否返回 XML 格式 , 默认是 loadFile(filePath:String, callback:Function = null):Loader // 加载外部文件, jpg,png,gif 图片及 SWF 文件
  24. 25. net.bgSound():BgSound Example: net.bgSound.path = &quot;webbase/config/music.mp3&quot;;// 设置背景音乐 net.bgSound.soundEffect = true;// 是否使用声音缓入缓出效果 net.bgSound.volume = 30;// 音量, 0-100 net.bgSound.play();// 开始播放 net.bgSound.stop();// 声音停止 ◎ 工具包
  25. 26. ◎ 工具包 位图文字转换 style.bitmapFont(sourceTxt:TextField, showText:String, txtFormat:TextFormat, wid:Number, sharp:Boolean) :Sprite @param sourceTxt 文字模板 @param showText 显示文字 @param txtFormat 文本样式 @param wid 强制宽度 @param sharp 是否使用未消除锯齿功能 Example: var txtFormat:TextFormat = new TextFormat(&quot; 隶书 &quot;,15,0x990000); var bf:Sprite = new BitmapFont(textExalpme,&quot; 测试文本 abcdefg&quot;,txtFormat); addChild(bf)
  26. 27. 应 用 演 示

×