SWFObject 사용하기

1. 시작하기


SWFObject는 SWF파일을 임베딩하고 플래시 플레이어와 관련된 정보를 읽어 낼 수 있는 완벽한 도구 개발에 중점을 둔 자바스크립트API로서 기존 모든 플래시 플레이어 임베딩 방법의 단일화가 목적이고 Adobe 플래시 플레이어 컨텐츠 임베딩에 대한 새로운 표준을 제공하고자 합니다. 라는건 너무 복잡하고..


쉽게말해 html에 SWF를 보여줄 수 있는 참~ 좋은 자바스크립트 API 입니다. ^^;


2. 다운로드


SWFObject는 구글코드 프로젝트그룹이 생성되어 있으며 현재 최종 버전은 v2.2 입니다.


친절하게 SWFObject Generator도 제공하고 있네요^^



3. 사용하기


지금부터 SWFObject를 사용하는 두가지 방법을 가볍게 알아보도록 하겠습니다.


<방법 1>


1) IDE를 켜고,


2) ActionScript 프로젝트를 생성하여 마음대로 플래시 파일을 만들어봅니다.


3) File > Publish (Alt + Shift + F12) 를 실행하면 SWFObject를 사용한 HTML파일이 생성됩니다.


4) 끗~


<방법 2>


1) Flash Builder를 켜고,


2) Flex Project 혹은 ActionScript Project 를 생성한 뒤 마음껏 코딩합니다.


3) Project > Export Release Build 를 선택하여 컴파일 하면 bin-release 폴더에 HTML파일이 생성됩니다.


4) 끗!!


참 쉽죠? ^_^


…….는 훼이크고(…)


eeaf5fe781b2af589b5a19b0f9d01dfe.png



  • [폴더] src : expressInstall.swf 파일의 소스 및 swfobject.js 파일이 포함되어있습니다.

  • expressInstall.swf : 플래시플레이어의 호환성 여부를 체크하여 설치를 유도하게끔 하는 SWF파일입니다. 자세한 설명은 생략하고(…) [추가댓글(이지명):expressInstall.swf는 속성에 정의한 플레이어 버젼에 맞게 업데이트 해주는 역할을 하는 Adobe Express Install을 내장한 놈으로 알고 있네.]

  • index.html : SWFObject를 static 방법으로 사용함으로서, 마크업(MarkUp)에 중점을 둔 방식입니다.

  • index_dynamic.html : 파일명 그대로 SWFObject를 다이나믹하게 사용하는(?) 방식으로서, 자바스크립트에 의존하는 방식입니다.

  • swfobject.js : SWFObject 자바스크립트 API입니다.

  • test.swf : ….파일명만 딱 봐도 느낌이 오시죠?!

아무튼, 다운로드 받은 파일 압축을 풀어보면 위와 같은 유용하게 쓰일 것 같은 파일들이 있는데


이번 포스팅에서는 사용하기도 쉽고 수정하기도 편리한 dynamic 방식으로 알아보도록 하겠습니다.


index_dynamic.html 파일에 간단하게 주석을 달아보았습니다.










1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28


   


…head 시작

…쏼라쏼라

<!– SWFObject 자바스크립트 API를 사용하겠노라 선포합니다. –>

<SCRIPT type=text/javascript src=“swfobject.js”></SCRIPT>

<!– 우리가 사용해야 할 SWFObject 스크립트 –>

<SCRIPT type=text/javascript>

    swfobject.embedSWF(

        “test.swf”,     // SWF파일 경로

        “myContent”,    // SWF를 보여줄 div ID

        “300”,          // SWF Width

        “120”,          // SWF Height

        “9.0.0”,        // Flash Player Version

        “expressInstall.swf”    // 자세한 설명은 생략한다(…)

        );

</SCRIPT>

…head 끝나고 body 시작

<!– 실제로 SWF 파일이 노출될 영역 –>

<DIV id=myContent>

    <!– Flash Player가 설치되지 않았을 때 페이지에 다음 화면을 노출합니다. –>

    <H1>Alternative content</H1>

    <P>

        <A href=http://www.adobe.com/go/getflashplayer><IMG title=“Get Adobe Flash player” alt=“Get Adobe Flash player” src=http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif rel=“xe_gallery”></A>

    </P>

</DIV>

…body 끝!


주석만으로도 간단한 사용법을 알 수 있습니다.



….


…..


…그런데 임베드 속성이나 flashVars 등은 어디간거지!?










1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34


// flashVars를 정리하기 위한 object 변수 선언

var flashVars =

{

    // add params

    xmlPath:http://file.bytearray.kr/쏼라쏼라/xml경로~ 등등’

};

 

// 임베드 프로퍼티를 정리하기 위한 object 변수 선언

var params =

{

    allowscriptaccess: ‘always’,

    menu: ‘false’,

    wmode: ‘window’

};

  

// 브라우저별 문제점 해결등을 위해 id, name 을 입력해줍니다.

var attribute =

{

    id: ‘myContent’,

    name: ‘myContent’

};

  

swfobject.embedSWF

(

    “test.swf”,     // SWF파일 경로

    “myContent”,    // SWF를 보여줄 div ID

    “300”,          // SWF Width

    “120”,          // SWF Height

    “9.0.0”,        // Flash Player Version

    “expressInstall.swf”,   // 자세한 설명은 생략한다(…)

    flashVars,      // flashVars 사용

    params,         // params 사용

    attribute       // attribute 사용

);

%EC%B0%B8%EC%89%BD%EC%A3%A0.jpg


참 쉽죠? ^_^


……어렵나요ㅠ_ㅠ


4. 마치며


이번 포스팅에서는 SWFObject가 뭐하는 녀석인지, 어떻게 사용하는지 간단하게 알아보았습니다.


좀더 디테일하게 사용하는 방법들이 있지만 요정도만 알면 나도 천재 개발자!!


Rock will NAVER die!!

SWFAddress – 플래시에서 Deep Linking 사용하기


1. 시작하기


위키피디아1)의 정의를 보면 Deep Linking은 인터넷 상에서 웹사이트의 메인 페이지나 홈페이지 대신 특정 페이지나 이미지로 연결되는 하이퍼링크를 만드는 것 이라고 되어있습니다.


그리고 이러한 연계를 가능하게 하는 링크를 Deep Link라고 규정하고 있습니다.


즉, 플래시에서 Deep Linking 사용하기란 SWF에 임의의 해시링크(#)를 부여하여 SWF내부에서 새로고침 없이 특정 화면으로 이동하게끔 만드는것이 이번 포스팅의 핵심입니다.


간단한 예제를 통해 사용방법을 알아보도록 하겠습니다. 출발~


2. 다운로드 


SWFAddress는 Asual Site 에서 두가지 종류로 다운로드 가능하니 아래 링크를 참조해주시기 바랍니다. (최신버전 2.4)



3. 사용하기


SWFAddress의 원리는 생각보다 단순합니다.


SWFAddress.getValue() 를 통해 브라우저의 현재 링크값을 받아올 수 있고,


SWFAddress.setValue( $arg: String ) 를 통해 브라우저의 링크값을 변경할 수 있습니다.


또한 SWFAddressEvent.CHANGE 이벤트로 변경된 링크를 확인할 수 있어  다음과 같은 구조를 예상할 수 있습니다.


플래시에서 버튼 클릭시



  1. SWFAddress.setValue( $arg: String ) 로 브라우저의 링크값을 변경해주고

  2. SWFAddressEvent.CHAGNE 이벤트를 발생시켜준 뒤

  3. SWFAddress.getValue() 를 통해 변경된 링크값을 받아서 화면 출력!

 브라우저에서 링크값 변경시



  1. SWFAddressEvent.CHAGNE 이벤트를 발생시켜준 뒤

  2. SWFAddress.getValue() 를 통해 변경된 링크값을 받아서 화면 출력!

아래는 SWFAddress를 활용한 간단한 예제입니다.



lec1-1.png


먼저 간단한 메뉴를 만들고 1~3프레임에 이미지를 배치하였습니다.

Actions 패널을 열고 아래와 같은 코드를 입력합니다.










1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87


/**

 * Test SWFAddress

 *

 * Description

 *

 *

 * Author : siamcatt (siamcatt@gmail.com)

 * Create : Sep 25, 2011

 */ 

   

//————————————–

//  Imports

//————————————– 

  

import SWFAddress;

import SWFAddressEvent;

import flash.events.MouseEvent;

  

  

//————————————————————————–

//  Constructor

//————————————————————————– 

  

init();

  

function init(): void

{

    // 다 알잖아요 *-_-*

      

    stop();

      

    var i: int, len: int;

    i = 0;

    len = 3;

    for( i; i < len; ++i )

    {

        this[‘menu’+i].buttonMode = true;

        this[‘menu’+i].addEventListener( MouseEvent.CLICK, clickHandler );

    }

  

    // SWFAddress 이벤트리스너 생성

      

    // SWFAddressEvent.INIT = SWFAddress가 초기화되고 발생하는 이벤트

    SWFAddress.addEventListener( SWFAddressEvent.INIT, initAddressHandler );

    // SWFAddressEvent.CHANGE = 브라우저의 주소값 변경시 발생하는 이벤트

    SWFAddress.addEventListener( SWFAddressEvent.CHANGE, changeAddressHandler );

}

  

  

//————————————————————————–

//  Event handlers

//————————————————————————– 

   

function clickHandler( $e: MouseEvent ): void

{

    // 메뉴 클릭시 SWFAddress.setValue( $arg ) 를 통해 브라우저의 링크값을 변경시킨다.

    // 변경될 링크값은 메뉴의 인스턴스네임으로 지정

      

    // 기본주소#/menu0 ~ 2

      

    SWFAddress.setValue( $e.target.name );

}

  

function initAddressHandler( $e: SWFAddressEvent ): void

{

    // 브라우저의 초기값을 /menu0 으로 지정한다.

    SWFAddress.setValue( “/menu0” );

}

  

function changeAddressHandler( $e: SWFAddressEvent ): void

{

    var address: String = SWFAddress.getValue();

      

    // SWFAddress.getValue() 혹은 $e.value 로 받아올 수 있다.

    switch( address )

    {

        case “/menu0”:

            gotoAndStop(1);

            break;

        case “/menu1”:

            gotoAndStop(2);

            break;

        case “/menu2”:

            gotoAndStop(3);

            break;

    }

}

SWF 로드 완료시 SWFAddress.INIT 을 통해 주소를 변경시켜줍니다.


그 후 각 메뉴를 누를때마다 브라우저 주소를 변경시켜주고 변경된 주소값을 참조하여 화면을 바꿔주는거지요!



컴파일 후 SWF를 실행시켜보겠습니다.



각 메뉴를 누르면 맛있는 음식들이 보이네요..*-_-*


이번엔 HTML 파일을 만들어볼게요. 폴더구조는 아래와 같이 만들었습니다.


lec1-2.png


index.html 소스는 아래와 같습니다.










1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46



…head

<!– swfobject.js 등록 –>

<SCRIPT type=text/javascript src=“swfobject/swfobject.js”></SCRIPT>

<!– swfaddress.js 등록 –>

<SCRIPT type=text/javascript src=“swfaddress/swfaddress.js”></SCRIPT>

<SCRIPT type=text/javascript>

    // flashVars

    var flashVars =

    {

        // add params

    };

     

    var params =

    {

        allowscriptaccess: ‘always’,

        menu: ‘false’,

        wmode: ‘window’

    };

     

    // 크로스브라우징을 해 id, name 을 동일하게 입력해줍니다.

    var attribute =

    {

        id: ‘myContent’,

        name: ‘myContent’

    };

     

    swfobject.embedSWF

    (

        ‘index.swf’, // swf 경로

        ‘myContent’, // div id

        ‘400’, // width

        ‘260’, // height

        ’10’, // flash version

        ‘swfobject/expressinstall.swf’,

        flashVars,

        params,

        attribute

    );

</SCRIPT>

  


…body

<!– swfobject에서 지정한 id를 참조하여 화면에 출력!! –>

<DIV id=myContent>

</DIV>


결과 : http://file.bytearray.kr/blog/20110925_0/TestSWFAddress/index.html

참쉽죠.jpg



참 쉽죠?


더이상의 자세한 설명은 생략한다(…)


4. 마치며


SWFAddress에 대해 최대한 간단한 소개정도로 끝내려고 했는데 주절주절 잡소리가 많았네요.


가볍고 사용하기 쉬우면서도 강력한 편의성을 제공하는 참~ 좋은 라이브러리입니다.


소개는 해드렸으니 더욱 깊게 공부하시어 포풍같이 가르쳐주시길 바랍니다^_^


(더욱 자세한 사항은 SWFAddress API 를 참조해주세요*-_-*)



Rock will NAVER die!!

※ 참고자료


소스 다운로드


1)Deep Linking from Wikipedia

AS3 메인 스테이지에 들어온 썸네일만 로딩하기..

  // 섬네일을 체크 하고 현재 로드되지 않았다면 로드하는 함수 .
    public function thumbStatusChecker() : void
        {
            var thum:DisplayObject = null;
            var Loaded:Boolean = false;
            var Count:uint = 0;
            while (Count < this._filteredThumbArray.length)
            {
               
                thum = this._filteredThumbArray[Count];
                if (thum.y + this._gallery.y < this.adjustedStageHeight() – this._contentTopMargin && thum.y + thum.height + this._gallery.y >= -this._contentTopMargin)
                {
                    thum.visible = true;
                    Loaded = false;
   
                    for( i:uint = 0 ; i<this._loadedThumbArray.length; i++)
                    {
                        if (thum.name == this._loadedThumbArray[i])
                        {
                            Loaded = true;
                        }
                    }
                    if (!Loaded)
                    {
                        this._loadedThumbArray.push(thum.name);
                        thum.loadThumb();
                    }
                }
                else
                {
                    thum.visible = false;
                }
                Count = Count + 1;
            }
            return;
        }// end function

마스크를 이용한 스크롤바 클래스..

package
{
 import flash.display.DisplayObject;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.geom.Rectangle;


 public class Scroller extends Sprite
 {
  private const PADDING:uint = 20;
 
  private var _scrollItem:DisplayObject;
  private var _masker:Sprite;
  private var _scrollbarContainer:Sprite;
  private var _scrollbar:Sprite;
  private var _path:Sprite;
 
  /**
   *  Constructor.
   *  
   *  @param $displayObject The object to be scrolled.
   *  @param $height   [옵션] 길이.
   *  @param $color   [옵션] 스크롤바 칼라.
   */
  public function Scroller( $displayObject:DisplayObject, $height:uint = 300, $color = 0xffba00 )
  {
   _scrollItem = $displayObject;
   
   if ( _scrollItem.parent )
   {
    x = _scrollItem.x;
    y = _scrollItem.y;
   
    addEventListener( Event.ADDED_TO_STAGE, onAddedToStage );
    _scrollItem.parent.addChild( this );
   }
   else
   {
    addEventListener( Event.ADDED_TO_STAGE, onAddedToStage );
   }
   
   _scrollItem.x = 0;
   _scrollItem.y = 0;
   addChild( _scrollItem );
   
   createMask( $height );
   createScrollbar( $color );
   
   trace( “스크롤바 생성및 초기화성공” );
  }
 
  /**
   *  Places an event listener on the stage, so we make sure the
   *  onStopDrag() method will be called when you release the mouse
   *  button anywhere on the stage.
   */
  private function onAddedToStage( $e:Event = null ):void
  {
   stage.addEventListener( MouseEvent.MOUSE_UP, onStopDrag );
  }
 
  /**
   *  드래가그 시작될때
   */
  private function onStartDrag( $e:MouseEvent ):void
  {
   var rect:Rectangle = new Rectangle( _path.x – ( _scrollbar.width / 2),
            _path.y – ( _scrollbar.height / 2 ),
            0,
            _path.height );
   
   _scrollbar.startDrag( false, rect );
   
   addEventListener( Event.ENTER_FRAME, calculateScrollPosition );
  }
 
  /**
   *  드래그가 멈출때
   */
  private function onStopDrag( $e:MouseEvent ):void
  {
   removeEventListener( Event.ENTER_FRAME, calculateScrollPosition );
   
   _scrollbar.stopDrag();
  }
 
  /**
   *  스크롤의 위치를 다시 계산다.
  
   */
  private function calculateScrollPosition( $e:Event ):void
  {
   var scrollbarMax:uint = _masker.height – _scrollbar.height;
   var currentPos:uint = _scrollbar.y;
   var percent:uint = currentPos / scrollbarMax * 100;
   
   var scrollItemMax:uint = ( _scrollItem.height – _masker.height );
   _scrollItem.y = Math.round( scrollItemMax * percent / 100 ) * -1;
  }
 
  /**
   *  마스크를 건다.
   */
  private function createMask( $height:uint ):void
  {
   _masker = new Sprite();
   _masker.graphics.beginFill( 0xFF0000 );
   _masker.graphics.drawRect( 0, 0, _scrollItem.width, $height );
   _masker.graphics.endFill();
   addChild( _masker );
   
   _scrollItem.mask = _masker;
  }
 
  /**
   *  스크롤바를 만든다.
   */
  private function createScrollbar( $color:uint ):void
  {
   _scrollbar = new Sprite();
   _scrollbar.graphics.beginFill( $color );
   _scrollbar.graphics.drawRoundRect( 0, 0, 7, 40, 10, 10 );
   _scrollbar.graphics.endFill();
   _scrollbar.addEventListener( MouseEvent.MOUSE_DOWN, onStartDrag );
   _scrollbar.addEventListener( MouseEvent.MOUSE_UP, onStopDrag );
   _scrollbar.buttonMode = true;
   
   _path = new Sprite();
   _path.graphics.beginFill( $color, 0.7 );
   _path.graphics.drawRect( 0, 0, 1, _masker.height – _scrollbar.height );
   _path.graphics.endFill();
   _path.x = _scrollbar.width / 2;
   _path.y = _scrollbar.height / 2;
   
   _scrollbarContainer = new Sprite();
   _scrollbarContainer.x = _masker.width + PADDING;
   _scrollbarContainer.addChild( _path );
   _scrollbarContainer.addChild( _scrollbar );
   
   addChild( _scrollbarContainer );
  }
 
 }
}

AS3 FileReference 를 이용한 다중업로드

ActionScript 3.0:









1

2

3

4

5

6

7

8

9


var list:FileReferenceList = new FileReferenceList();

list.addEventListener(Event.SELECT, selectHandler, false, 0, true);

list.browse();

  

function selectHandler(event:Event):void{

    var request:URLRequest = new URLRequest(“upload.php”);

    var files:Array = FileReferenceList(event.target).fileList;

    for (var i:uint = 0, l:uint = files.length; i < l; i++) FileReference(files[i]).upload(request);

};

PHP:









1


copy($_FILES[‘Filedata’][‘tmp_name’], $_FILES[‘Filedata’][‘name’]);