넥사크로플랫폼으로 롤링배너 만드는 방법

Intro.

웹 배너란 웹 상의 온라인 광고의 일종으로 웹 페이지에 광고를 추가하는 것으로 광고주의 웹 사이트에 링크하여 웹사이트로의 트래픽을 이끌어내는 것이 주된 목적입니다. 최근의 배너는 시각적으로 더 화려하고 다양한 기법들을 사용하고 있습니다.
그 중 롤링배너라는 기법도 흔하지 않게 사용되고 있는데요 이번 시간은 넥사크로플랫폼을 통하여 “롤링배너” 형태를 쉽게 만드는 방법에 대해 알아보고자 합니다.

 

What will help?

아쉽게도 넥사크로플랫폼은 롤링배너에 대한 컴포넌트가 별도로 제공되지 않습니다. 하지만 폼의 stepcount를 나누어 사용하게 되면 하나의 화면안에서 여러 개의 화면을 분할하여 사용할 수 있습니다. 실행시에는 화면의 페이지 count에 해당하는 stepindex가 하단에 표시됩니다.

step 사용 화면 예시

개발툴에서 스텝을 설정하는 방법은 아래와 같습니다.

Form의 stepcount 설정 방법

 

How to use step?

Step을 활용하여 롤링배너를 쉽게 만들기 위해서는 폼의 ontimer 이벤트를 활용하면 됩니다. 폼의 ontimer 이벤트란 setTimer() 메소드로 생성한 타이머의 시간 간격마다 발생하는 이벤트입니다.
이벤트를 활용하여 타이머의 시간마다 step이 이동 될 수 있도록 설정해 주면 롤링배너와 같은 효과를 줄 수 있습니다.

step 과 ontimer 이벤트를 활용한 롤링배너 활용 예시

 

화면 예시 설명

#1. 화면이 실행될 때 stepcount 정보와 ontimer 이벤트를 호출합니다.

• 폼의 stepcount는 getLayoutInfo 메소드를 통하여 가져옵니다.

• setTimer 메소드로 폼의 ontimer 이벤트를 호출합니다.

this.STEP_COUNT = this.getLayoutInfo("default","stepcount");
 
 //폼 로드 시 ontimer 이벤트 호출
 this.setTimer( this.TIMER_ID, this.TIME );

 

#2. 폼의 ontimer 이벤트 발생 시 다음 step으로 이동합니다.

• 현재 step의 index는 getStepIndex 메소드로 반환받습니다.

• setStepIndex 메소드는 step index를 변경합니다.

 var nStepIndex = this.getStepIndex();
 nStepIndex ++;
 
 if(nStepIndex >= this.STEP_COUNT)
 {
  nStepIndex = 0;
 }
 this.setStepIndex(nStepIndex);

 

플레이넥사크로 바로가기

https://www.playnexacro.com/

play nexacro