FLEX做网页中的几个问题的解决

 最近用FLEX做了一网站（http://www.bhjpk.cn/enit/bin-debug/website.html?first=../SBB/SBB.html），遇到了2个小问题：1就是将网页移入flash中后，随着窗口大小的变化网页定位问题；2菜单条的停顿问题。

     其一，说说定位问题，因为开发的时间很短，客户要求FLEX首页中直接显示HTML网页，所以就涉及到网页移动的技术，这在Flash中不是新鲜事啦！但移近FLEX中后就出现了一个严重的问题，网页并不随着FLEX的页面移动而移动。FLEX中使用了相对定位，而移近的HTML页面却绝对定位的，这样网页就乱套了，如下图

   

     解决方法是在网页一如的画布中使用代码

     private function moveIFrame(): void
        {

            var localPt:Point = new Point(0, 0);
            var globalPt:Point = this.localToGlobal(localPt);

            ExternalInterface.call("moveIFrame",globalPt.x, globalPt.y, this.width,

            this.height);
            ExternalInterface.call("doResize");
        }

    调用主HTML页（就是FLEX要嵌入的HTML）中的JavaScript方法moveIframe和doResiaze: 

    主HTML代码分别如下：

    var  resizeTimer = null;
    function doResize(){  
        moveIFrame( (document.body.clientWidth-873)/2+220,240,620,550);
        resizeTimer=null;
    }
    

其中这句最关键moveIFrame( (document.body.clientWidth-873)/2+220,240,620,550);

(document.body.clientWidth-873)/2+220 （窗体出现位置的横坐标）就是用来使嵌入的HTML页随着窗口的变化来重新定位。插入这句后网页的显示就正常啦,如下图：

 

其二，说说菜单条吧 如下图：

 

向上图的菜单条要讲鼠标移动到出版教材时会有一个问题，如果我无意从教学内容这边滑动过去的话，下面的菜单内容会立刻变化，于是就无法点到出版教材，这样就要重新选择，使用起来不方便。

    解决方法：当鼠标滑过教学内容，没用停顿时就应该维持原先的菜单不变，如果停住了就变换菜单。

实现代码如下：

   private var Timer:uint; 

 <mx:LinkBar id="menus" color="#FFFFFF" fontWeight="bold" dataProvider="{MenuViewStack}" y="127" width="872" x="1" fontSize="12" height="30" paddingLeft="20" selectionColor="#E96D37" separatorColor="#FFFC00"  rollOverColor="#FFFEDB" buttonMode="false"                             mouseOut="clearTimeout(Timer);"  mouseOver="Timer=setTimeout(displaySunMenu,200,event);"  alpha="1" backgroundAlpha="1" letterSpacing="2">
  </mx:LinkBar>   

 

    先在写脚本的地方定义一个时间变量，再在LinkBar 控件中加入两个事件mouseOut="clearTimeout(Timer);"  mouseOver="Timer=setTimeout(displaySunMenu,200,event);"。

mouseOut事件用来清除定时 ， mouseOver事件来定时。如果在菜单项上停留的时间超过0.2秒就变换下拉菜单，否则不变。

  

  

   这样，我们就可以随便移动鼠标了。

 

   前两天做的，可能不是最好的解决方法，如有更好的方法，希望能授予我。

   谢谢阅读！