하단에 애니메이션으로 돌아가는 배너를 클릭하면 각 배너에 연결되어 있는 페이지가 출력이 됩니다. 하단링크는 투비소프트 웹진, 유튜브 동영상, 페이스북, 고객지원센터등 링크가 걸려 있습니다.
화면구성
소스참고 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();
};