플래시로 자바스크립트를 호출하고 컨롤 하는 방법은 3가지가 있는데
위 방법은 fscommand를 사용하여 자바스크립트를 컨트롤 하는 방식으로
플래시 퍼블리시 옵션을 변경하면 기본적으로 플래시에서 제공되는 javascript 스크립트에
기능을 추가한 코드입니다.
먼저 자바스크립트의 주석입니다.
네이버 게시판에서는 코드의 가독성이 떨어지므로
EditPlus에서 붙여넣어서 보시는것을 권장합니다.
저역시 자바스크립트는 전문이 아니므로 참고만하세요.
자바스크립트의 기본적인 문법은 플래시 ActionScript 1.0과 거의 동일 하므로
내장 객체나 브라우저 객체의 호출 부분을 제외하면 플래시 코드와 다를것이 없습니다.
<script>
var userWidth = screen.availWidth; //사용자의 브라우저가 최대 확대 될 수 있는 가로 너비
if(userWidth > 1024) //만약 userWidth의 값이 1024보다 크다면
{
var leftMargin = (screen.availWidth - 1020)*0.5; //leftMargin에 availWidth값에서 1020을 뺀 값의 50%값을 저장
var topMargin = (screen.availHeight - 619)*0.5; //topMargin에 availHeight값에서 619를 뺀 값의 50%값을 저장 availHeight는 브라우저가 최대한으로 커질 수 있는 세로 픽셀값
}
else //그렇지 않으면
{
var leftMargin = 0; //마진은 0
var topMargin = 0;
}
var isInternetExplorer = navigator.appName.indexOf("Microsoft") != -1; //현재 브라우저가 IE인지를 체크. navigator.appName속성의 String열의 indexOf메소드로 ("Microsoft")문자열이 포함되었는지 체크하여 Microsoft 문자열의 처음 index값을 반환하여 IE인지 아닌지를 체크. Microsoft문자열이 발견되지 않으면 -1값이 리턴되므로 !=연산을 수행하여 true와 false
//값으로 isInternetExplorer에 대입
// Handle all the FSCommand messages in a Flash movie.
function wind_DoFSCommand(command, args)
{ //함수선언
var windObj = isInternetExplorer ? document.all.wind : document.wind; isInternetExplorer이 true면 document.all.wind를.. 아니면 document.wind를 windObj대입 wind는 플래쉬의 ID
//
if(command == "ctrlWin")
{ //command가 "ctrlWin"라면
query = args.split("|"); //query는 args로 전달된 문자열을 |를 기준으로 분리한 배열을 저장
w = Number(query[0]) +10; //w는 query의 0번째 인덱스 문자열을 숫자값으로 변경한 값에 + 10을 더한값
h = Number(query[1]) + 29; //이하 똑같은 패턴 반복하여 h, x, y에 값을 대입
x = Number(query[2]) + leftMargin;
y = Number(query[3]) + topMargin;
window.moveTo(x,y); //window객체의 moveTo메소드를 호출하여 위에서 계산한 x,y값을 대입하여 윈도우 브라우저를 이동
window.resizeTo(w,h); //window.resizeTo메소드 호출하여 위에서 계산된 w, h값을 대입하여 윈도우 브라우저 사이즈를 변경
}
else if (command == "closeWin") //command가ctrlWin이 아니고 "closeWin"이라면 윈도우를 닫는다.
{
window.close();
}
else if (command == "openWin")
{ //command가 ctrlWin, closeWin이 아니고 openWin이라면
query = args.split("|"); //"ctrlWin"에서와 마찬가지로 args스트링열을 |를 기준으로 분리하여 배열로 만들어 query에 대입.
w = Number(query[0]) // 이하 계산은 "ctrlWin"와 동일한 계산
h = Number(query[1])
x = Number(query[2]) + leftMargin
y = Number(query[3]) + topMargin
url = query[4] //오픈윈도우일 경우 오픈하면서 이동할 url값이 args문자열에 전달되었음
//newWin전역변수에 window.open을 실행하여 파라미터 입력대로 새 브라우저 창을 오픈한 리턴값을 저장
newWin = window.open(url, 'newWin'+opener.newWinCount, 'toolbar=no,location=no,directories=no,status=no,menub ar=no,scrollbar=no,resizable=no,copyhistory=yes,width='+w+',height='+h+',left='+x+', top='+y+',screenX='+x+',screenY='+y+'');
opener.newWinCount++;
}
//
}
// Hook for Internet Explorer.
//navigator.appName이 빈값이 아니고 navigator.appName.에 Microsoft가 포함되며 navigator.userAgent에 Windows문자열이 포함되고 navigator.userAgent에 Windows 3.1문자열은 없다면
//플래시에서 자동으로 생성하는 VB스크립트 함수 선언부
if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1)
{
//비주얼 베이직 스크립트를 수행
document.write('<script language=\"VBScript\"\>\n');
document.write('On Error Resume Next\n');
document.write('Sub wind_FSCommand(ByVal command, ByVal args)\n');
document.write(' Call wind_DoFSCommand(command, args)\n');
document.write('End Sub\n');
document.write('</script\>\n');
}
</script>
\n');
}
</script>
다음은 플래시 코드의 주석입니다. ActionScript 입력창에 붙여 넣어서 읽어보세요.
FScommand로 자바스크립트를 컨트롤 하는 구조에 대해 이해가 없다면 달아드린 주석으로도 이해가
안되실겁니다.
getURL("fscommand:ctrlWin", args....문자열전달) 는 자바스크립트에 선언된 함수 wind_DoFSCommand
에 ctrlWin문자열을 wind_DoFSCommand함수의 파라미터 command에 전달하고 나머지 args문자열을
args에 전달하도록 되어 있습니다.
MovieClip.prototype.smooth = function 과 같은 코드도 MovieClip클래스의 특성과 javascript에서 사용하는
클래스 작성 모델을 알지 못하면 이해가 안되실 겁니다. MovieClip을 플래시의 내장 클래스이고
.prototype.은 내장객체에 새로운 메소드를 추가하는 것이며 .smooth는 추가되는 메소드의 메소드명입니다.
MovieClip클래스에 추가된 메소드는 플래시에서 생성하는 모든 무비클립 객체에서 호출 할 수 있게 됩니다.
이러한 코딩 방식이 ActionScript 1.0 의 코딩 규칙이며 Javascript의 클래스 작성 규칙과 동일합니다.
그리고 다음 플래시 코드는 절차지향 방식이 아니라 함수를 선언하고 호출하여 사용하는 구조이므로
위에서 아래로 순서대로 분석하려 하지 마십시오.
function ctrlWin(w, h, x, y, speed) { //ctrlWin함수 선언
delete mover.onEnterFrame; //mover 무비클립에 등록된 enterFrame이벤트를 삭제
mover.age = 0; //mover에 age다이나믹 속성을 추가하고 0으로 초기화
mover.onEnterFrame = function() { //mover클립에 enterFrame이벤트 펑션을 등록
++this.age; //mover의 age속성을 지속적으로 증가시킴
this.smooth("w", w, speed); //MovieClip에 prototype으로 추가시킨 smooth메소드를 호출하여
this.smooth("h", h, speed); //파라미터들을 전달하고 mover클립을 이동시킴
this.smooth("x", x, speed);
this.smooth("y", y, speed);
//getURL함수로 자바스크립트의 wind_DoFSCommand함수에 command파라미터 값으로 ctrlWin를 전달하고 args파라미터에는
//Math.floor(this.w)+"|"+Math.floor(this.h)+"|"+Math.floor(this.x)+"|"+Math.floor(this.y)의 결과 문자열을 전달함
getURL("FSCommand:ctrlWin", Math.floor(this.w)+"|"+Math.floor(this.h)+"|"+Math.floor(this.x)+"|"+Math.floor(this.y));
//다음if문은 smooth메소드에서 실행된 결과의 완료시점을 체크하여 사이즈 조정이 완료되면 결과값을
//mover의 다이나믹 속성에 저장하고 브라우저에 적용 후 onEnterFrame을 삭제하여 윈도우 사이즈 조정
//을 마침. 즉 타겟 사이즈까지 조정이 완료되었을때 수행되는 complete 명령임
if (this.wdone*this.hdone*this.xdone*this.ydone == 1) {
this.w = w;
this.h = h;
this.x = x;
this.y = y;
getURL("FSCommand:ctrlWin", Math.floor(this.w)+"|"+Math.floor(this.h)+"|"+Math.floor(this.x)+"|"+Math.floor(this.y));
delete this.onEnterFrame;
}
// end if
};
}
// End of the function
//img_mc의 위치를 부드럽게 이동시키는 함수
function ctrlPic(x, y, speed) {
img_mc.onEnterFrame = function() {
this.smooth("_x", x, speed);
this.smooth("_y", y, speed);
if (this._xdone*this._ydone == 1) {
this._x = x;
this._y = y;
delete this.onEnterFrame;
}
// end if
};
}
// End of the function
//브라우저를 흔드는 함수
function shakeWin(w, h, x, y, range, speed) {
mover.onEnterFrame = function() {
//흔들리는 범위를 램덤으로 변화시키기 위한 수식
//range에 전달된 랜덤값은 만약 range에 20이 전달되었을 경우
//0~에서 40까지의 소수점을 제외한 정수에서 다시 -range값인 -20을
//더하여 20이라는 흔들림 영역 좌표가 설정됨
//즉 range가 20일경우 -20부터 +20까지 진동하는 영역을 랜덤으로 구하는 계산식임
//_l2변수는 디컴파일 되었을때 볼 수 있는 변수로 컴파일 된 파일의 경우 지역변수는
//_l과 숫자조합으로 변하도록 되어있음
var _l2 = -range+Math.floor(Math.random()*(range*2+1));
//MovieClip에 prototype으로 추가된 smooth함수로 위치값을 전달하여 mover를 이동시킴
this.smooth("w", w, speed);
this.smooth("h", h, speed);
this.smooth("x", x, speed);
this.smooth("y", y, speed);
//랜덤으로 계산된 값을 y속성에 저장하여 윈도우와 무비클립을 흔듬
this.y = this.y+_l2;
//자바스크립트를 호출하여 파라미터를 전달하여 브라우저 윈도우를 컨트롤
getURL("FSCommand:ctrlWin", Math.floor(this.w)+"|"+Math.floor(this.h)+"|"+Math.floor(this.x)+"|"+Math.floor(this.y));
//완됴가 되면, complete되면
if (this.wdone*this.hdone*this.xdone*this.ydone == 1) {
delete this.onEnterFrame; //엔터프래임을 삭제
}
// end if
};
}
// End of the function
_focusrect = false; //포커스가 선택되었을때 사각박스를 표시 할 것인지를 설정,
//무비클립 클래스에 프로토타입으로 smooth메소드를 추가
MovieClip.prototype.smooth = function(id, target, speed) {
//부드러운 컨트롤을 위한 수식
this[id] = this[id]+(target-this[id])*speed;
//절대값으로 target값과 현제 클립의 위치를 뺀값이 1보다 작다면 이동이 완료된것으로 판단하고
//id로 전달된 속성에 +done문자열을 붙여 smooth함수가 호출된 무비클립의 다이나믹 속성으로
//추가하고 1또는 0값을 대입, 위에서 설명한 complete if문 판단에 사용됨
if (Math.abs(target-this[id])<1) {
this[id+"done"] = 1;
} else {
this[id+"done"] = 0;
}
// end if
};
//프로토타입으로 MovieClip클래스에 추가한 set_border함수, 외곽선을 그리는 함수임
MovieClip.prototype.set_border = function(w, h, color, thickness) {
with (this) {
//그래픽 드로우 메서드로 만들어진 그래픽을 클리어하는 메소드
//이하 라인 드로우 메서드는 플래시레퍼런스(F1) MovieClip클래스를 읽어보세요.
clear();
lineStyle(0, 0, 0);
moveTo(0, 0);
beginFill(color, 100);
lineTo(w, 0);
lineTo(w, h);
lineTo(0, h);
lineTo(0, 0);
moveTo(thickness, thickness);
lineTo(w-thickness, thickness);
lineTo(w-thickness, h-thickness);
lineTo(thickness, h-thickness);
lineTo(thickness, thickness);
endFill();
}
// End of with
};
//무버를 생성하고 최상위 뎁스로 설정
var mover = this.createEmptyMovieClip("mover_mc", this.getNextHighestDepth());
//다이나믹 속성 초기화
//다이나믹 속성은 MovieClip클래스가 Dynamic형태의 클래스 이기 때문에 추가 가능한 것입니다.
//플래시 플레이어7이후 버전에는 다이나믹 속성을 사용하기 위해서는 항상 초기화가 필요.
//플래시 플레이어6 이전 버전에는 다이나믹 속성의 초기화가 필요하지 않음
mover.w = 0;
mover.h = 0;
mover.x = 0;
mover.y = 0;
mover.age = 0;
unloadMovieNum(100); //현재 플래시 무비에 loadMovieNum으로 로드된 레벨100번째의 무비를 제거
//컨트롤 윈 함수를 호출하여 좌표를 변경하고 이동가속도는 0.5로 설정하여 윈도우와 무비클립을
//움직임
ctrlWin(160, 200, 112, 180, 0.500000);
다른 자바스크립 컨트롤 방법으로는 ExternalInterface를 사용하는 것으로 플래시와 자바스크립트
양방향 컨트롤이 가능하며 리턴값도 전달 받을 수 있습니다. ExternalInterface는 플래시 8에서 추가된
내장 클래스입니다.
