머드초보의 블로그

음....UTF-8일 때에는 swf파일명 뒤에 ?paramname=value 이런식으로도 한글이 안 깨지는데요.
EUC-KR일 때에는 flashVars로 안넘기면 한글이 깨지네요. flashVars로 넘기면 안깨져요. 신기해요!

EUC-KR인 경우
한글깨짐 경우는 swf파일 뒤에 파라메터를 붙인 경우
[code]<object id="paramTest" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        width="300" height="120">
    <param name="movie" value="ParamTest.swf?nickName=머드초보" />
        <object type="application/x-shockwave-flash"
                data="ParamTest.swf?nickName=머드초보" width="300" height="120">
        </object>
</object>
[/code]
안 깨지게 하려면 flashVars를 이용
[code]<object id="paramTest" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        width="300" height="120">
    <param name="movie" value="ParamTest.swf" />
    <param name="flashVars" value="nickName=머드초보" />
        <object type="application/x-shockwave-flash"
                data="ParamTest.swf" width="300" height="120"
                flashVars="nickName=머드초보">
        </object>
</object>[/code]
그리고, flashVars를 이용해서 해야지 플래시가 캐시가 된다고 하네요.
nickName같은 것이 계속 바뀌는 것이라면 플래시를 서버에서 계속 요청하게 되는 것이라고 하네요.
그래서 flashVars라는 것이 있는 것 같음.

파라메터 넘길 때 utf-8인 경우에는 어떤식으로 해도 깨지지 않음. utf-8 짱-_-

자바스크립트와 Flex와 통신을 해주는 FABridge라는 놈은.....
우선 처음에 접하게 되면 혈압을 약 50%를 상승시켜주는 효과를 가져다 줍니다.

그 이유는 로컬에서는 테스트를 할 수 없습니다-_-;
즉, file:///D:/workspace/flex/~~~ 요런 경로에서는 실행할 수 없습니다.
처음에 그냥 flex builder에서 실행할 때에는 아무런 경고가 뜨지 않습니다. 하지만, export해서 build release를 한다음에 bin-release에 있는 html파일을 실행하면 요런 에러가 뜹니다-_-; 이걸로 혈압이 10%상승했죠.
아놔...그렇구나....-_-; 그래서 꼼수로....톰캣과 blazeds를 이용합니다-_-;
프로젝트를 생성할 때 ProjectName에 FABridgeTest로 하고, Web application으로 하고, Application ServerType을 J2EE로합니다. 톰캣을 사용하는 겁니다. 이렇게 생성한 놈은 실행할 때 http://localhost:8080/프로젝트명/프로젝트명.html로 실행해주기 때문에 테스트를 할 수 있습니다.
Next를 하고, Target runtime에 tomcat을 설정해주고, Flex War파일에는 blazeds.war파일을 선택합니다. Finish를 선택하여 프로젝트를 만듭니다.

기존에 있던 index.templete.html은 FABridge사용에 문제가 좀 있어서 다시 생성만들어야합니다.
http://olegflex.blogspot.com/2008/06/swfobject-2-flex-template.html
여기에 가면 templete을 만들어 놓은 것이 있는데 다운받고 압축을 풀면, html-template폴더가 있는데, 기존의 html-template폴더 날려버리고, 이걸로 대체합니다.

이제 필요한 것은 FABridge.js파일인데, 이 파일은 기존의 것을 사용하면 swfobject 2.1에서는 사용할 수 없습니다. 그래서 수정한 버전이 필요합니다. 기존것으로 하려다 혈압이 약 20%상승한 듯 합니다.
http://www.swffix.org/swfobject/swfobject_flex3/
이곳에 가면 예제와 FABridge.js와 history.js파일이 있는데 이걸 html-templete폴더와 ./history폴더에 각각 복사합니다.
예제를 만들어봅시다.
index.templete.html파일을 열어서 bridgeName을 지정해줍니다.
[code]
var flashvars = {
    bridgeName: "mudchobo"
};
[/code]
지정해주지 않으면 flash가 디폴트가 됩니다.
html-templete폴더에 test.js파일을 만들어서 테스트를 만들어봅시다.
test.js
[code]

var flexApp;

FABridge.addInitializationCallback( "mudchobo", function() {
    flexApp = FABridge.mudchobo.root();
    var callback = function() {
        alert('flex로 호출한 javascript메소드');
    }
    flexApp.getMyButton().addEventListener("click", callback);
});

function callFlexFunction() {
    flexApp.flexFunction('javascript로 호출한 flex메소드');
}
[/code]
FABridge.addInitializationCallback함수는 birdge이름이 mudchobo인 flash가 초기화가 다 되면 호출이 되는 듯합니다. 로드가 다 된 상태면 저 뒤에 함수를 호출하게 되는 듯합니다.
window.onload에다가 때려박으면 FABridge.mudchobo가 undefined가 되더라구요. 이걸로 혈압이 약 10%상승했습니다.
javascript에서 flex버튼 이벤트가 발생했을 때 이벤트를 걸 수 있습니다. getMyButton()네이밍 룰은 flex에서 버튼 id가 myButton이면 getMyButton으로 해당 컴포넌트를 가져올 수 있습니다. id가 mudchobo면 getMudchobo()가 되겠죠. addEventListener에 click시 callback함수를 호출하도록 이벤트를 추가합니다.

그리고, callFlexFunction이라는 메소드를 추가해서 이것은 flex메소드를 호출하는 겁니다.
flexApp객체를 통해 그냥 함수명을 호출하면 호출이 됩니다.

index.templete.html에다가는 head부분에다가
[code]
<script type="text/javascript" src="FABridge.js"></script>
<script type="text/javascript" src="test.js"></script>
[/code]
body부분에다가 button을 추가
[code]
<div>
    <input type="button" id="javascriptButton" value="callFlex" onclick="callFlexFunction();"/>
</div>
[/code]
이제 flex코드로 가봅시다. 우선 FABridge.as파일이 필요합니다. 이 파일은 C:\Program Files\Adobe\Flex Builder 3 Plug-in\sdks\3.0.0\frameworks\javascript\fabridge\src에 있습니다. 아주 꼭꼭 숨겨두셨어요-_-;
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    xmlns:bridge="bridge.*" width="300" height="150">
   
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            public function flexFunction(data:String):void
            {
                Alert.show(data);
            }
        ]]>
    </mx:Script>
   
    <mx:Button id="myButton" label="callJavaScript" />
   
    <bridge:FABridge />
</mx:Application>
[/code]
중요한 점은 xmlns:bridge="bridge.*"랑 <bridge:FABridge /> 입니다.
이제 실행을 해봅시다.
아...여기서 이제 html-templete내용의 js파일을 고쳤는데 파폭에서 열고 소스보기하면 안바뀌어 있을 때가 있습니다. 그때는 Flex메뉴에서 Project -> clean을 해주면 되더라구요. 이걸로 혈압 10%상승!

실행하면 localhost로 뜨기 때문에 잘 될 겁니다. 소스파일입니다.

다음시간엔 실제 ajax를 요청해봐야겠다-_-;

http://code.google.com/p/swfobject/
여기서 2.1버전을 다운로드할 수 있습니다.
기존에 1.5에서 사용하는 방식과 완전이 틀려졌습니다.

더욱 간편해지고 더욱 쉬워졌습니다.
해당 파일을 받고 압축을 풀면 매우 쉽게 예제가 나와있습니다.
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>SWFObject 2 dynamic publishing example page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
        swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf");
        </script>
    </head>
    <body>
        <div id="myContent">
            <h1>Alternative content</h1>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
        </div>
    </body>
</html>
[/code]
핵심부분은 저기 swfobject객체의 embedSWF메소드를 호출하면 됩니다.
저런식으로. 아주 간단해요.

만약 파라메터나 flashvars를 넘기고 싶다면
[code]
var flashvars = {
  bridgeName: "mudchobo"
};
var params = {
  menu: "false"
};
var attributes = {};

swfobject.embedSWF ( "test.swf", "myContent", "300", "120", "9.0.0",
    "expressInstall.swf", flashvars, params, attributes );
[/code]
이런식으로 파라메터값을 넘겨줄 수 있습니다.

어떤분은 기존 flex3가 생성하는 html-templete을 기존방식이 아닌 swfobject방식으로 바꿔서 templete을 재구성했더라구요.
http://olegflex.blogspot.com/2008/06/swfobject-2-flex-template.html
여기서 받을 수 있습니다.

기존에 AC_FL_RunContent란 메소드를 호출하는 index.templete.html파일을 보면 정말 복잡합니다. 하지만 저 템플릿방식으로 변경하면 소스코드도 이해하기 쉽고, 나중에 javascript를 삽입해서 테스트를 해보고 싶을 때 더욱 쉽게 작업할 수 있겠죠.