하단에 애니메이션으로 돌아가는 배너를 클릭하면 각 배너에 연결되어 있는 페이지가 출력이 됩니다. 하단링크는 투비소프트 웹진, 유튜브 동영상, 페이스북, 고객지원센터등 링크가 걸려 있습니다.
화면구성
소스참고 EduHub\mobile\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 함수를 설정하는 속성입니다.
애니메이션 효과가 종료됐을 때 애니메이션 배열을 변경합니다. 현재 화면에 있는 기존 애니메이션 오브젝트를 제거하고 새로운 애니메이션 오브젝트 아이템을 추가하는 기능을 사용하여 배열을 변경합니다.
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(); };