배너

하단에 애니메이션으로 돌아가는 배너를 클릭하면 각 배너에 연결되어 있는 페이지가 출력이 됩니다. 
하단링크는 투비소프트 웹진, 유튜브 동영상,  페이스북, 고객지원센터등 링크가 걸려 있습니다.

화면구성

소스참고
EduHub\mobile\Mobile_main_content.xfdl

Mobile_main_content.xfdl

1 Button
버튼을 클릭하면 각 링크되어 있는 페이지로 이동합니다.

주요 기능 구현 설명

버튼을 클릭하면 해당 사이트의 주소를 링크 걸어 브라우저를 실행합니다.

this.divBottom_onclick_Comm = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
//	this.objAni.play();
	switch(obj.name)
	{       
		case "btnMovie":
			system.execBrowser("https://www.youtube.com/channel/UCWGq1rxVBf-sgqS2MpSo_Yw/playlists");
			break;   
		case "btnSupport":
			system.execBrowser("http://support.tobesoft.co.kr/Support/index.html");
			break; 
			 
		case "btnPlaynexa":
			system.execBrowser("https://www.playnexacro.com"); 
			break;
			
		case "btnTobeTong":
			system.execBrowser("http://tobetong.com/");
			break;
		case "btnFacebook":
			system.execBrowser("https://www.facebook.com/TOBESOFTKOREA");
			break;	
			  
	}

Animation

애니메이션 효과가 실행되는 시간과 시작 지연되는 시간등을 설정하여 애니메이션 효과를 표현합니다.

this.fn_setBanner = function()
{
	this.objAni = new nexacro.Animation("Animation00", this);  
	this.addChild("Animation00", this.objAni);
	this.objAni.set_duration(2000);
	this.objAni.set_delay(1000);
	this.objAni.set_easing("linear");
	this.objAni.setEventHandler("oncomplete", this.Animation00_oncomplete, this);
	
	this.fn_bannerPlay();
}
애니메이션설정은 실행되는 시간의 속성인 duration에 2초를 설정하고
효과의 시작이 지연되는 속성인 delay에 1초 설정합니다.
그러면 애니메이션은 2초간 실행되고 시작시 1초간 지연됩니다.
easing은 애니메이션 효과에 적용될 Interpolation 함수를 설정하는 속성입니다.

Easing Functions List

애니메이션 효과가 종료됐을 때 애니메이션 배열을 변경합니다.
현재 화면에 있는 기존 애니메이션 오브젝트를 제거하고 새로운 애니메이션 오브젝트 아이템을 추가하는 기능을 사용하여 배열을 변경합니다.
this.Animation00_oncomplete = function(obj, e:nexacro.AnimationEventInfo)
{
	//맨 앞녀석 맨끝으로 좌표 변경
	this.arrObj[0].set_left(this.arrObj[4].getOffsetRight() + 15);
 	this.objAni.removeTarget( "AniItem0");
 	this.objAni.removeTarget( "AniItem1");
 	this.objAni.removeTarget( "AniItem2");
 	this.objAni.removeTarget( "AniItem3");
 	this.objAni.removeTarget( "AniItem4");

	//arr 첫번째를 삭제 후 마지막에 set
	var btnObj = this.arrObj[0];
	this.arrObj.splice(0, 1);
	this.arrObj.push(btnObj);

	this.fn_bannerPlay();	
}

"oncomplete" 이벤트는 애니메이션 효과가 종료됐을 때 발생하는 이벤트입니다.

애니메이션 효과가 적용될 대상 컴퍼넌트를 애니메이션 오브젝트 아이템으로 추가한 후 애니메이션을 시작합니다.

this.arrObj = [this.divBottom.form.btnMovie, 
               this.divBottom.form.btnPlaynexa, 
               this.divBottom.form.btnSupport, 
               this.divBottom.form.btnFacebook, 
               this.divBottom.form.btnTobeTong];
this.fn_bannerPlay = function()
{
	var nGap = 15;
	for(var i=0; i<this.arrObj.length; i++)
	{		
		// left:[15, (15-190-15)]
        this.objAni.addTarget( "AniItem"+i, this.arrObj[i],
            "left:["+this.arrObj[i].left+",
            "+(this.arrObj[i].left - this.arrObj[0].width - nGap)+"]" );	
        
	} 
	this.objAni.play();
};