2008년 9월 2일 화요일

Custom Inter-SCO Navigation

SCORM을 사용한 경험이 있다면 JavaScript가 LMS와 서로 값을 가져오고 설정하는데 중요한 역할을 한다는 사실을 알 수 있다. 과거에는 플래시를 섞어서 사용하는 경우 걱정이 앞섰을 것이다.
그러나 이제부터는 걱정하지 않아도 된다! 플래시 인터페이스에서 Inter-SCO 위치 를 확인해주는 요소를 보여주거나 숨기는 작업이 곧 가능해 질 것이기 때문이다.
이 본문에서 사용한 방법론은 다양한 응용프로그램에 그대로 적용하여 JavaScript의 변수를 알 수 있다. 단순히 플래시의 다음/뒤로 버튼을 바꾸는 작업을 말하는 것이 아니다. 이 예를 든 이유는 실행하기 가장 간단할 뿐더러, 내비게이션 요소의 적용은 SCORM 2004에서 새로 도입된 기능이기 때문이다.
flash_example.html, flash_example.fla, flash_actions.as, course_functions.js 파일을 참조한다.
기억해야 할 점은 여기서 설명하는 방법이 유일한 실행 방법은 아니라는 것이다. 이는 알려진 방법일 뿐이다. 같은 작업을 수행할 수 있는 더 나은 방법이 있을 것이며 이를 찾아내면 ADLNet.org(http://http://www.adlnet.org)를 통해 새로운 방법을 공유하도록 한다.
HTML 설정
예를 들어, SCO를 구성하는 파일인 HTML 페이지에 포함된 플래시 파일이 있다. APIWrapper.js와 course_functions.js를 호출해서 SCO가 LMS와 상호작용 할 수 있게 하려고 한다.
LMS에서 값을 가져오는데 JavaScript를 사용하고 "다음"이나 "뒤로" 버튼을 누를 경우, 이를 SCO에 전달한다. 이는 showPrevious와 showContinue 변수를 진행 함수인 renderPreviousButton()과 renderContinueButton()으로 환원된 값을 설정함으로써 가능하다.
이와 같은 내용은 flash_example.html의 섹션에서 확인할 수 있다.

<script type="text/javascript">
 var showPrevious;
 var showContinue;

 function init( )
 {
    initialize();

    // Ask the LMS if there is was preceding SCO
    // that was launched prior to
    // this SCO resulting in the need to render a previous button.
    showPrevious = renderPreviousButton();
    window.document.FlashObject.SetVariable("showPrevious", showPrevious);

   // Ask the LMS if there is a succeeding SCO to be launched after this
   // SCO resulting in the need to render a continue button.
   showContinue = renderContinueButton();
   window.document.FlashObject.SetVariable("showContinue", showContinue);
 }
</script>

init() 함수는 HTML 페이지가 로드될 때 호출된다. 실행되면 이 함수는 다음과 같은 작업을 수행한다.
1) SCO가 LMS에 통신 세션 초기화를 전송한다. 초기화가 성공하면 "true" 문자열이 리턴된다.
2) SCO는 사용자가 접근할 수 있는 이전 SCO나 Asset이 존재하는지 LMS에 묻는다.
존재하는 경우 "true" 문자열이 리턴된다.
3) "FlashObject"라는 플래시 무비에 변수가 설정되어 "showPrevious"라는 변수를 JavaScript 변수 값인
showPrevious로 설정한다.
4) SCO는 사용자가 접근할 수 있는 다음 SCO나 Asset이 존재하는지 LMS에 묻는다.
존재하는 경우 "true" 문자열이 리턴된다.
5) "FlashObject"라는 플래시 무비에 변수가 설정되어 "showContinue"라는 변수를 JavaScript 변수 값인
showContinue로 설정한다.
주: showPrevious와 showContinue의 JavaScript와 플래시 변수에 같은 이름을 사용할 필요는 없다. 변수 이름에 일관성을 기하기 위해서 같은 이름을 사용했다.
HTML 페이지가 시작되면 바로 init() 함수를 호출한다.
<body onload="javascript:init();" onunload="javascript:completedExit();">
앞에서와 같이 플래시 무비를 "FlashObject"라고 했는데 이를 위해서 OBJECT와 EMBED 태그의 ID 파라미터를 "FlashObject"와 같게 설정했다. 이는 다음과 같이 강조된다.
><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  
     codebase="http://download.macromedia.com/pub/shockwave
     /cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="400"
     id="FlashObject">
        <param name="movie" value="flash_example.swf">
        <param name="quality" value="high">
        <param name="bgcolor" value="#103C00">
        <param name="swliveconnect" value="true">
        <embed src="flash_example.swf" quality="high"
               width="600" height="400"
               id="FlashObject" align=""
               type="application/x-shockwave-flash"
               swliveconnect="true"
               pluginspage="http://www.macromedia.com/go/getflashplayer">
        </embed>
</object>
Flash와 JavaScript 의 "대화"
다음 코드는 flash_actions.as ActionScript 파일에서 나왔다. ActionScript 코드를 소스 플래시 파일(.fla)과 반드시 별도로 보관할 필요는 없다. 코드를 재사용하기 위해 편하게 사용하는 방법일 뿐이다.
// Initialize variables we'll use in our Flash movie(s)
var intervalID
var i

// Set an interval to "catch" variables from the LMS at the launch of the SCO
intervalID = setInterval( DoStuff, 500 );

// Create a function "DoStuff" to handle turning visibility on and/or off
// for our back and next buttons inside the Flash interface
function DoStuff ()
{
     // increment the variable i
     i++;
     if (i>10){
          // after 10 loops through this function, cancel it out.
         clearInterval(intervalID);
     }
     // if "showPrevious" comes in from the LMS as "false", turn the visibility off
     if (showPrevious == "false") {
          back_btn._visible = false;
     } else {
          back_btn._visible = true;
     }
    
     // if "showContinue" comes in from the LMS as “false”, turn the visibility off
     if (showContinue == "false") {
          next_btn._visible = false;
     } else {
          next_btn._visible = true;
     }
}

// assign the action for the back_btn
back_btn.onPress = function (){
     getURL ('javascript:goToPreviousSCO();');
}

// assign the action for the next_btn
next_btn.onPress = function (){
     getURL ('javascript:goToNextSCO();');
}
그렇다면 이제 ActionScript에서 할 일은 무엇인가? setInterval()을 이용해서 SCO 시작 이후에 설정된 변수를 알아 내는 것이다. 플래시 무비가 HTML 페이지에서 시작될 때 순서를 제어하지 않았기 때문에 이 플래시 콘텐츠가 renderPreviousButton(), renderContinueButton(), initialize()가 완료되기 전에 시작될 것인지 후에 시작될 것인지 알 수 없다.
이 방법이 변수를 JavaScript에서 플래시로 가져오는 가장 간단한 방법은 아니다. 지금은 문제가 되는 변수 값의 변화를 알기 위해 반복 실행을 하는 것이다. ActionScript내의 Object.watch()를 실행하는 방법이 더 좋다. 이 경우 가시적 이벤트 구동이 가능하다.
setVariable() [in JavaScript]와 setInterval/clearInterval [in ActionScript]를 결합하는 것도 좋다.
작동하는 코드가 모든 이론에 우선한다.
flash_example.fla를 보면 코드가 거의 없다. 사실 여기 샘플에서 보이는 유일한 코드는 수행 시에 actions.as 파일을 호출하는 #include뿐이다.
버튼 작동을 제대로 하기 위해 아래 그림처럼 다음, 뒤로 버튼에 인스턴스 이름을 부여했다.
정리
지금까지 우리가 무엇을 했는지 본 장에서 설명한 프로세스를 요약해 보겠다.
1) SCO는 시작할 때 초기화된다.
2)SCO는 선행하는 SCO가 있는지 뒤에 다른 SCO가 있는지 알아보기 위해 LMS에 요청한다.
3) 이러한 값은 JavaScript에 리턴되고 JavaScript는 정보 요청을 한다.
4) JavaScript는 HTML 페이지에서 플래시 무비에 이러한 변수의 값을 적는다.
HTML 페이지는 미리 규정된 간격으로 이러한 변수를 반복하여 찾는다.
5) 플래시가 이러한 이름/값 쌍을 잡아내면 이를 이용하여 "뒤로"와 "다음" 버튼이 보이도록 한다.
앞서 언급한 바와 같이 같은 종류의 작업을 수행할 수 있는 방법은 다양하다. 이 예에서는 HTML 페이지가 SCO의 초기화와 종료를 처리했지만 플래시가 이와 같은 작업을 수행하는 JavaScript를 호출할 수도 있다.
요점을 이해하는 것이 중요하다. SCO의 콘텐츠가 우선 플래시에 저장되면 완전히 로드된 후에는 플래시에서 초기화 호출을 하는 것이 더 좋다. 플래시가 호출을 할 경우에는 이 호출에 대한 결과로 리스너(Listener)를 만들 수 있고 플래시 내에 setInterval()이 있어야 할 필요가 없어진다.
이러한 제안이 오히려 작업하는 데 있어서 걸림돌로 작용해서는 안된다. 이를 언급한 이유는 Flash/SCORM 2004에서 문제가 되는 부분은 스스로 해결할 수 있도록 하기 위해서다. 앞에서 언급했다시피 Flash와 SCORM2004로 문제를 해결하는 방법은 매우 다양하다. 작은 설명이나마 시작하는데 도움이 되었으면 하는 바람이다.

 

작성자: 시간:
라벨: ,

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)