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,noStateSix]"/>
		<s:State name="stateThree" stateGroups="[noStateTwo,noStateOne,noStateSix]"/>
		<s:State name="stateFour" stateGroups="[noStateTwo,noStateSix]"/>
		<s:State name="stateFive" stateGroups="[noStateTwo,noStateSix]"/>
		<s:State name="stateSix" stateGroups="[noStateTwo,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>

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

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