Flex4 IFrame 之调整右边布局(加载一次网站，随后不用再加载一次)

在使用展示效果过程中，我们使用IFrame这个组件加载HTML,这个IFRAME在之前的文章提过，这里不再解释了。

下面是我使用的6个Panel里头加载html界面的代码：

<comp:HPanel id="stateSixPanel" excludeFrom="noStateSix"
title="State Six Panel"
left.stateOne="0" top.stateOne="0"  width.stateOne="0" height.stateOne="0"
left.stateTwo="0" top.stateTwo="0" width.stateTwo="0" height.stateTwo="0"
left.stateThree="0" top.stateThree="0" width.stateThree="0" height.stateThree="0"
left.stateFour="0" top.stateFour="0"  width.stateFour="0" height.stateFour="0"
left.stateFive="0" top.stateFive="0" width.stateFive="0" height.stateFive="0"
left.stateSix="10" top.stateSix="10" width.stateSix="700" height.stateSix="750"
>
<flexiframe1:IFrame id="rightLayout6" x="26" width="600" height="590" label="nfschina"
source="http://gz.iscas.ac.cn:8080/pm/showSystemEmList.do"  visible="true"/>
</comp:HPanel>

<comp:HPanel id="stateFivePanel" excludeFrom="noStateFive"  width="200"
title="State Five Panel"
left.stateOne="0" top.stateOne="0"  width.stateOne="0" height.stateOne="0"
left.stateTwo="0" top.stateTwo="0" width.stateTwo="0" height.stateTwo="0"
left.stateThree="0" top.stateThree="0" width.stateThree="0" height.stateThree="0"
left.stateFour="0" top.stateFour="0"  width.stateFour="0" height.stateFour="0"
left.stateFive="10" top.stateFive="10" width.stateFive="700" height.stateFive="750"
left.stateSix="0" top.stateSix="0" width.stateSix="0" height.stateSix="0"
>
<flexiframe1:IFrame id="rightLayout5" x="26" width="600" height="590" label="nfschina"
source="http://www.gzios.com/ppar/index.php/component/booklibrary/"
visible="true"/>
</comp:HPanel>

<comp:HPanel id="stateFourPanel" excludeFrom="noStateFour"
title="State Four Panel"
left.stateOne="0" top.stateOne="0" width.stateOne="0" height.stateOne="0"
left.stateTwo="0" top.stateTwo="0" width.stateTwo="0" height.stateTwo="0"
left.stateThree="0" top.stateThree="0" width.stateThree="0" height.stateThree="0"
left.stateFour="10" top.stateFour="10"  width.stateFour="700" height.stateFour="750"
left.stateFive="0" top.stateFive="0" width.stateFive="0" height.stateFive="0"
left.stateSix="0" top.stateSix="0" width.stateSix="0" height.stateSix="0"
>
<flexiframe1:IFrame id="rightLayout4" x="26" width="600" height="590" label="nfschina"
source="http://www.gzios.com/ppar/bbs/forum.php" visible="true"/>
</comp:HPanel>

<comp:HPanel id="stateThreePanel" excludeFrom="noStateThree"
title="State Three Panel"
left.stateOne="0" top.stateOne="0"  width.stateOne="0" height.stateOne="0"
left.stateTwo="0" top.stateTwo="0" width.stateTwo="0" height.stateTwo="0"
left.stateThree="10" top.stateThree="10" width.stateThree="700" height.stateThree="750"
left.stateFour="0" top.stateFour="0"  width.stateFour="0" height.stateFour="0"
left.stateFive="0" top.stateFive="0" width.stateFive="0" height.stateFive="0"
left.stateSix="0" top.stateSix="0" width.stateSix="0" height.stateSix="0"
>
<flexiframe1:IFrame id="rightLayout3" x="26" width="600" height="590" label="nfschina"
source="http://www.gzios.com/ppar/index.php/work" visible="true"/>
</comp:HPanel>

<comp:HPanel id="stateTwoPanel" excludeFrom="noStateTwo" width="200"
title="State Two Panel"
left.stateOne="0" top.stateOne="0"  width.stateOne="0" height.stateOne="0"
left.stateTwo="10" top.stateTwo="10" width.stateTwo="700" height.stateTwo="750"
left.stateThree="0" top.stateThree="0" width.stateThree="0" height.stateThree="0"
left.stateFour="0" top.stateFour="0"  width.stateFour="0" height.stateFour="0"
left.stateFive="0" top.stateFive="0" width.stateFive="0" height.stateFive="0"
left.stateSix="10" top.stateSix="10" width.stateSix="700" height.stateSix="750"
>
<flexiframe1:IFrame id="rightLayout2" x="26" width="600" height="590" label="nfschina"
source="http://www.gzios.com/ppar/index.php/ours/extra" visible="true"/>
</comp:HPanel>

<comp:HPanel id="stateOnePanel" excludeFrom="noStateOne"
title="State One Panel"
left.stateOne="10" top.stateOne="10" width.stateOne="700" height.stateOne="750"
left.stateTwo="0" top.stateTwo="0" width.stateTwo="0" height.stateTwo="0"
left.stateThree="0" top.stateThree="0" width.stateThree="0" height.stateThree="0"
left.stateFour="0" top.stateFour="0"  width.stateFour="0" height.stateFour="0"
left.stateFive="0" top.stateFive="0" width.stateFive="0" height.stateFive="0"
left.stateSix="0" top.stateSix="0" width.stateSix="0" height.stateSix="0"
>
<flexiframe1:IFrame id="rightLayout1" x="26" width="600" height="590" label="nfschina"
source="http://192.168.17.101/ppar/" visible="true"/>
</comp:HPanel>

随后定义过渡效果：

<s:states>
<s:State name="stateOne" stateGroups="[noStateTwo, noStateThree,noStateFour,noStateFive,noStateSix]"/>
<s:State name="stateTwo" stateGroups="[noStateOne, noStateThree,noStateFour,noStateFive,noStateSix]"/>
<s:State name="stateThree" stateGroups="[noStateTwo, noStateOne,noStateFour,noStateFive,noStateSix]"/>
<s:State name="stateFour" stateGroups="[noStateTwo, noStateThree,noStateOne,noStateFive,noStateSix]"/>
<s:State name="stateFive" stateGroups="[noStateTwo, noStateThree,noStateFour,noStateOne,noStateSix]"/>
<s:State name="stateSix" stateGroups="[noStateTwo, noStateThree,noStateFour,noStateFive,noStateOne]"/>
</s:states>

当然这个展示是动态的，所以我通过定时器来进行切换。

protected function application1_initializeHandler(event:FlexEvent):void
{
//	init();
//初始化变量

//displayAnimate(animate,"{stateOnePanel}");
//	anim1.play();
toggleState("stateOne");

// TODO Auto-generated method stub
transferTimer=new Timer(6000);
transferTimer.addEventListener(TimerEvent.TIMER,timerChangePageFunc);
transferTimer.start();
}

public function timerChangePageFunc(event:TimerEvent):void{
switch(mark){
case 1:
//displayAnimate(animate,"stateTwoPanel");
//	anim.target="{[stateTwoPanel]}";
anim2.play();
toggleState("stateTwo");
mark++;
break;
case 2:
//	displayAnimate(animate,"stateThreePanel");
//	anim.target="{[stateTwoPanel]}";
anim3.play();
toggleState("stateThree");
mark++;
break;
case 3:
//	displayAnimate(animate,"stateOnePanel");
//		anim.target="{[stateOnePanel]}";
anim4.play();
toggleState("stateFour");
mark++;
break;
case 4:
//	displayAnimate(animate,"stateOnePanel");
//		anim.target="{[stateOnePanel]}";
anim5.play();
toggleState("stateFive");
mark++;
break;
case 5:
//	displayAnimate(animate,"stateOnePanel");
//		anim.target="{[stateOnePanel]}";
anim6.play();
toggleState("stateSix");
mark++;
break;
case 6:
//	displayAnimate(animate,"stateOnePanel");
//		anim.target="{[stateOnePanel]}";
anim1.play();
toggleState("stateOne");
mark=1;
break;
}
}

里面我用到了动画效果，如下所示：

<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->

<s:Animate id="anim1" targets="{[stateOnePanel]}" duration="1000">
<s:SimpleMotionPath property="alpha" valueFrom="0.0" valueTo="1.0" />
<s:SimpleMotionPath property="horizontalCenter" valueFrom="-100" valueTo="0" />
<s:SimpleMotionPath property="rotationY" valueFrom="-45" valueTo="0" />
<s:SimpleMotionPath property="scaleX" valueFrom="1.5" valueTo="1" />
<s:SimpleMotionPath property="scaleY" valueFrom="1.5" valueTo="1" />
</s:Animate>

<s:Animate id="anim2" targets="{[stateTwoPanel]}" duration="1000">
<s:SimpleMotionPath property="alpha" valueFrom="0.0" valueTo="1.0" />
<s:SimpleMotionPath property="horizontalCenter" valueFrom="-100" valueTo="0" />
<s:SimpleMotionPath property="rotationY" valueFrom="-45" valueTo="0" />
<s:SimpleMotionPath property="scaleX" valueFrom="1.5" valueTo="1" />
<s:SimpleMotionPath property="scaleY" valueFrom="1.5" valueTo="1" />
</s:Animate>

<s:Animate id="anim3" targets="{[stateThreePanel]}" duration="1000">
<s:SimpleMotionPath property="alpha" valueFrom="0.0" valueTo="1.0" />
<s:SimpleMotionPath property="horizontalCenter" valueFrom="-100" valueTo="0" />
<s:SimpleMotionPath property="rotationY" valueFrom="-45" valueTo="0" />
<s:SimpleMotionPath property="scaleX" valueFrom="1.5" valueTo="1" />
<s:SimpleMotionPath property="scaleY" valueFrom="1.5" valueTo="1" />
</s:Animate>

<s:Animate id="anim4" targets="{[stateFourPanel]}" duration="1000">
<s:SimpleMotionPath property="alpha" valueFrom="0.0" valueTo="1.0" />
<s:SimpleMotionPath property="horizontalCenter" valueFrom="-100" valueTo="0" />
<s:SimpleMotionPath property="rotationY" valueFrom="-45" valueTo="0" />
<s:SimpleMotionPath property="scaleX" valueFrom="1.5" valueTo="1" />
<s:SimpleMotionPath property="scaleY" valueFrom="1.5" valueTo="1" />
</s:Animate>

<s:Animate id="anim5" targets="{[stateFivePanel]}" duration="1000">
<s:SimpleMotionPath property="alpha" valueFrom="0.0" valueTo="1.0" />
<s:SimpleMotionPath property="horizontalCenter" valueFrom="-100" valueTo="0" />
<s:SimpleMotionPath property="rotationY" valueFrom="-45" valueTo="0" />
<s:SimpleMotionPath property="scaleX" valueFrom="1.5" valueTo="1" />
<s:SimpleMotionPath property="scaleY" valueFrom="1.5" valueTo="1" />
</s:Animate>

<s:Animate id="anim6" targets="{[stateSixPanel]}" duration="1000">
<s:SimpleMotionPath property="alpha" valueFrom="0.0" valueTo="1.0" />
<s:SimpleMotionPath property="horizontalCenter" valueFrom="-100" valueTo="0" />
<s:SimpleMotionPath property="rotationY" valueFrom="-45" valueTo="0" />
<s:SimpleMotionPath property="scaleX" valueFrom="1.5" valueTo="1" />
<s:SimpleMotionPath property="scaleY" valueFrom="1.5" valueTo="1" />
</s:Animate>

</fx:Declarations>

注意：这几个动画效果功能一样，就是加载到不同的组件上面。

接下来我会详细介绍动画效果的动态生成，以及如何调用动画。