블로그 이미지
mecagoki

Rss feed Tistory
프로그래밍 공부/Adobe Air(application/flash) 2014.07.09 21:31

swf 디버깅(debugging)하는 방법

desktop으로 만들어진 프로그램과 달리 web용으로 개발된 swf는 flash builder에서 디버깅이 되지 않는다.

때문에 개발 시 처음에는 trace나 show를 이용해 값을 보고 그랬다. 근데 생각보다 디버깅 하는 방법이 간단하다..

flash builder에서 F11을 눌러 디버깅을 시도하면 아래와 같은 화면이 나온다!

 

 

 

 

그냥 Yes를 누르면 프로그램이 실행은 되지만 디버깅을 할 수 없다. 그렇다고 No를 하면 실행마저도 안된다.

위의 창에 adobe flash player download를 클릭해보자!!

adobe 사이트로 이동하게 되는데 아래 사진을 보자.

 

 

 

 

이동한 사이트에 자신이 사용하는 브라우저에 맞게 파일을 다운로드 하고 설치하자.

설치가 완료 되었다면 다시 flash builder에서 디버깅을 해보자.

아무런 사용자의 의사를 묻지도 따지지도 않고 디버깅 모드로 진입하는 것을 볼 수 있다.

이제 web용 swf도 디버깅하면서 개발하자.

 

프로그래밍 공부/Adobe Air(application/flash) 2014.07.09 16:52

externalinterface.addcallback을 이용하여 air응용프로그램 실행 시키기?!

우선 as부터 아래 코드 처럼 작성해 보자.

 

flash builder :

private function initi() : void {
    ExternalInterface.addCallback("airExec", airexecute);
 }

private function airexecute() : void {
    var arguments : Array;
    arguments[0] = "1";
    airswf.launchApplication(appid, pubid, arguments);
 }

이 소스에서 "airExec"는 javascript에서 요 녀석의 이름으로 쓰겠다라는 뜻이다.

airexcute는 javascript에서 "airExec" 사용 했을 때 airexecute 함수를 호출 하겠다.

라는 의미의 aictionscript소스다. 상당히 간단하다. javascript에서 사용 할 string값 임의로 하나 지정해주고, 고 녀석을 호출 함과 동시에 실행 될 함수명을 적어주면 뽝! 끝!

airexecute 함수는 air application을 실행 시키는 함수다.

 

자 그럼 javascript는 아래와 같이 작성해보자.

 

   function callExternalInterface() {
          // FlashID(ExternalInterface_addCallback) 에 있는 callPlayBall 에 등록되어 있는 함수를 호출.
            getSWFName("로드한 swf name").airExec();
          }
         
          // flashID 의 이름을 받아서 브라우저의 속성에 따라 flashID 의 값을 브라우저에 맞게 변경해 주는 함수 입니다.
          function getSWFName(SWFName) {
            if (navigator.appName.indexOf("Microsoft") != -1) {
              return window[SWFName];
            } else {
              return document[SWFName];
            }
          }

버튼을 하나 만들어서  callExternalInterface를 호출 할 수 있게 해보자.

 

이렇게 해서 externalinterface.addcallback을 이용하기 위한 기초 작업이 끝났다.

 

이 포스트에 주제인 externalinterface.addcallback을 이용하여 air응용프로그램 실행 시키기가 가능할 것인가..결과는...........

처음에는 당연히 되겠지 생각 했다..그런데 안된다..왜?!

위와 같이 만들어서 특정 파라미터를 전달하여 airexecute함수 내에 값을 찍었을 때 값은 정상으로 나왔다. 내가 뭔가를 놓쳤나 하고 며칠을 바꾸고 해서 해봤다. 그래도 안된다. airswf.launchApplication(appid, pubid, arguments); 다음에 임의의 값을 찍어도 그 값이 나왔다. 대체 뭐지..뭐 때문이지............................................................

http://help.adobe.com/ko_KR/AIR/1.5/devappsflash/WS5b3ccc516d4fbf351e63e3d118666ade46-7e15.html

좀 더 찾아보고 할 것을 그냥 내 생각만 믿고 했다가 시간만 날리고, 스트레스만 받고..위의 경로에 맨 마지막으로 내리면 친절하게 나와있다.

 

"마우스 클릭과 같은 사용자 이벤트에 대한 이벤트 핸들러에서 호출될 때만 launchApplication() 메서드가 작동할 수 있습니다.

필요한 버전의 Flash Player, 즉 버전 9 업데이트 3 이상(Windows 및 Mac OS) 또는 버전 10(Linux)이 브라우저에 설치되어 있지 않은 경우 launchApplication() 메서드에서 오류가 발생합니다.

응용 프로그램 설명자 파일에서 allowBrowserInvocation 요소가 false로 설정된 경우 launchApplication() 메서드를 호출해도 효과가 없습니다.

응용 프로그램을 시작하는 사용자 인터페이스를 표시하기 전에 air.swf 파일에서 getApplicationVersion() 메서드를 호출할 수 있습니다. 자세한 내용은 AIR 응용 프로그램이 설치되어 있는지 웹 페이지에서 확인을 참조하십시오.

브라우저 호출 기능을 통해 응용 프로그램을 호출하면 응용 프로그램의 NativeApplication 객체가 BrowserInvokeEvent 객체를 전달합니다. 자세한 내용은 브라우저 호출을 참조하십시오.

브라우저 호출 기능을 사용하는 경우 브라우저 호출에 설명된 보안 문제를 고려해야 합니다.

응용 프로그램이 실행되면 LocalConnection 클래스를 사용하여 브라우저의 SWF 내용과 통신할 수 있습니다. 자세한 내용은 응용 프로그램 간 통신을 참조하십시오."

 

사용자 이벤트 없으면 안된단다..마지막 최후의 보루로 보안을 위해 저렇게 만들어 놓은 것 같다..웹에서 버튼 하나로 사용자 PC를 컨트롤 할 수도 있을지 모르는 불상사를 막기 위해서 그런가보다..(이벤트 만들어서 해보고도 했는데 안된다..ㅠㅠ)

 

결론은 externalinterface.addcallback을 이용하여 air응용프로그램 실행 시키기..안된다! 끝!

externalinterface.addcallback 사용법을 익힌거에 만족하자. externalinterface.call도 있는데 이건 대충 찾아보면 널렸다..진짜 끝!

프로그래밍 공부/Adobe Air(application/flash) 2014.07.09 16:19

Flash로 만든 swf를 HTML에 Embed시키기

앞서 badge.swf를 만드는 방법에 대해 간단하게 알아보았다면,

이제 그 swf를 써먹는 방법에 대해 알아보자.

만들어진 swf를 HTML에 embed 시켜 웹에서 실행 시 로드하여 사용 할 수 있도록 하는 것이다.

swf를 html Embed하는 방법은 swfobject.js를 이용한 방법, AC_RunActiveContent.js를 이용한 방법등이 있는데

나는 swfobject.js를 이용해 embed하겠다.

기본적으로 flash builder에서 web용 swf를 만들면 html-template 폴더 밑에 index.template.html이 만들어진다. 이녀석을 살살 만져보자.

큰 틀은 만들어져 있는 상태이니 몇 가지만 수정 또는 추가하면 된다.

아래는 html 소스 코드이다.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <!--
    Smart developers always View Source.
   
    This application was built using Adobe Flex, an open source framework
    for building rich Internet applications that get delivered via the
    Flash Player or to desktops via Adobe AIR.
   
    Learn more about Flex at http://flex.org
    // -->
    <head>
        <title></title>
        <meta name="google" value="notranslate" />        
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- Include CSS to eliminate any default margins/padding and set the height of the html element and
             the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as
             the percentage of the height of its parent container, which has to be set explicitly.  Fix for
             Firefox 3.6 focus border issues.  Initially, don't display flashContent div so it won't show
             if JavaScript disabled.
        -->
        <style type="text/css" media="screen">
            html, body  { height:100%; }
            body { margin:0; padding:0; overflow:auto; text-align:center;
                   background-color: #ffffff; }  
            object:focus { outline:none; }
            #flashContent { display:none; }
        </style>
       
        <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
        <!-- BEGIN Browser History required section -->
        <link rel="stylesheet" type="text/css" href="history/history.css" />
        <script type="text/javascript" src="history/history.js"></script>
        <!-- END Browser History required section --> 
           
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
           // For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
            var swfVersionStr = "10.2.0";
            // To use express install, set to playerProductInstall.swf, otherwise the empty string.
            var xiSwfUrlStr = "playerProductInstall.swf";
            var flashvars = {};
            flashvars.execArgs = "1"; //flashvars를 이용하여 swf에 파라미터를 전달 할 수 있다. flashvars.파라미터명="값" 의 형태로 입력한다.
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "always"; //어디서나 허용이 가능하도록 always로 바꾸자!
            params.allowfullscreen = "false";
            params.wmode = "transparent";
            params.menu = "false"
            var attributes = {};
            attributes.id = "swf에 사용될 ID"; //만들어진 swf의 이름을 될 수 있으면 사용하자. 그게 덜 헤깔린다.
            attributes.name = "swf에 사용될 name"; //만들어진 swf의 이름을 될 수 있으면 사용하자. 그게 덜 헤깔린다.
            attributes.align = "middle";
            swfobject.embedSWF(
                "로드할 플래쉬 파일.swf", "flashContent",
                "100%", "100%",
                swfVersionStr, xiSwfUrlStr,
                flashvars, params, attributes);
            // JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
            swfobject.createCSS("#flashContent", "display:block;text-align:left;");
       </script>
    </head>
    <body>
        <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough
             JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
             when JavaScript is disabled.
        -->
        <div id="flashContent">
            <p>
                To view this page ensure that Adobe Flash Player version
                10.2.0 or greater is installed.
            </p>
            <script type="text/javascript">
                var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
                document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
                                + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
            </script>
        </div>
        
        <noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="swf에 사용될 ID">
                <param name="movie" value="로드할 플래쉬 파일.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="allowScriptAccess" value="always" /> //어디서나 허용이 가능하도록 always로 변경하자.
                <param name="allowFullScreen" value="false" />
                <!--<param name="flashVars" value="execArgs1=1" />--> // flashvars 형태를 다음과 같은 타입으로 넘길 수도 있다.

                <embed src="로드할 플래쉬 파일.swf" quality="high" bgcolor="#ffffff"
                width="100" height="22" align="middle"
                play="true" loop="true" quality="high" allowScriptAccess="always"
                type="application/x-shockwave-flash"
                pluginspage="http://www.macromedia.com/go/getflashplayer">
                </embed> //임베드 태그를 사용하여 임베드 시켰다. IE가 아니면 제대로 로드되지 않을 수도 있는 불상사를 막기 위해 이용하자.

                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="로드할 플래쉬 파일.swf" width="100%" height="100%">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="allowScriptAccess" value="always" /> //어디서나 허용이 가능하도록 always로 변경하자.
                    <param name="allowFullScreen" value="false" />

                    <embed src="로드할 플래쉬 파일.swf" quality="high" bgcolor="#ffffff"
                    width="100" height="22" align="middle" 
                    play="true" loop="true" quality="high" allowScriptAccess="always"
                    type="application/x-shockwave-flash"
                    pluginspage="http://www.macromedia.com/go/getflashplayer">
                    </embed> //임베드 태그를 사용하여 임베드 시켰다. IE가 아니면 제대로 로드되지 않을 수도 있는 불상사를 막기 위해 이용하자.

                <!--<![endif]-->
                <!--[if gte IE 6]>-->
                    <p>
                        Either scripts and active content are not permitted to run or Adobe Flash Player version
                        10.2.0 or greater is not installed.
                    </p>
                <!--<![endif]-->
                    <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>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </noscript>     
   </body>
</html>

TOTAL 2,740 TODAY 0