Flash 스킨 FLA 파일을 열면 스킨의 동영상 클립이 기본 타임라인에 배치되어 있습니다. 동일한 프레임에 있는 이러한 클립과 ActionScript 코드는 런타임에 컨트롤을 배치하는 방법을 정의합니다.
레이아웃 레이어는 런타임에 표시되는 스킨의 모양과 많이 유사하지만 이 레이어의 내용은 런타임에 보이지 않습니다. 이 클립은 컨트롤을 배치하는 위치를 계산하기 위한 목적으로만 사용됩니다. 스테이지의 다른 컨트롤은 런타임에 사용됩니다.
레이아웃 레이어 내부에는 video_mc라는 FLVPlayback 구성 요소에 대한 자리 표시자가 있습니다. 다른 모든 컨트롤은 video_mc에 상대적인 위치로 배치됩니다. Flash FLA 파일을 기초로 컨트롤 크기를 변경하는 경우 이러한 자리 표시자 클립을 이동하여 레이아웃을 수정할 수 있습니다.
각각의 자리 표시자 클립은 특정 인스턴스 이름을 갖고 있습니다. 자리 표시자 클립의 이름은 playpause_mc, play_mc, pause_mc, stop_mc, captionToggle_mc, fullScreenToggle_mc, back_mc, bufferingBar_mc, bufferingBarFill_mc, seekBar_mc, seekBarHandle_mc, seekBarProgress_mc, volumeMute_mc, volumeBar_mc 및 volumeBarHandle_mc입니다. 스킨 색상을 선택할 때 색상이 변경되는 부분은 border_mc입니다.
컨트롤에 어떤 클립이 사용되는지는 중요하지 않습니다. 일반적으로 버튼에는 보통 상태 클립이 사용됩니다. 다른 컨트롤에 대해서는 해당 컨트롤의 클립이 사용되지만 이러한 설정은 단순히 편의를 위한 것일 뿐입니다. 중요한 것은 자리 표시자의
x
(가로) 및
y
(세로) 위치와 높이 및 폭 값입니다.
표준 컨트롤 외에도 클립을 추가로 원하는 만큼 여러 개 배치할 수도 있습니다. 이러한 클립에 대한 유일한 요구 사항은 [링크] 대화 상자에서 라이브러리 심볼의 [ActionScript에 내보내기] 체크 상자가 선택되어 있어야 한다는 것입니다. 레이아웃 레이어의 사용자 정의 클립은 위에 나열된 예약 인스턴스 이름이 아닌 다른 인스턴스 이름을 가질 수 있습니다. 인스턴스 이름은 클립의 ActionScript를 설정하여 레이아웃을 결정할 때만 필요합니다.
border_mc 클립은 특별한 클립입니다.
FlvPlayback.skinAutoHide
속성을
true
로 설정하면 마우스가 border_mc 클립 위에 있을 때 스킨이 표시됩니다. 이러한 동작은 비디오 플레이어의 경계 밖에 나타나는 스킨에 중요합니다.
skinAutoHide
속성에 대한 자세한 내용은
스킨 비헤이비어 수정
을 참조하십시오.
Flash FLA 파일에서 border_mc는 크롬과 Forward 및 Back 버튼의 테두리에 사용됩니다.
border_mc 클립은 또한
skinBackgroundAlpha
및
skinBackgroundColor
속성에 의해 알파 및 색상이 변경된 스킨의 일부분이기도 합니다. 사용자 정의 가능한 색상과 알파를 허용하려면 스킨 FLA 파일의 ActionScript에 다음이 포함되어야 합니다.
border_mc.colorMe = true;
ActionScript 및 스킨 레이아웃
다음 ActionScript 코드는 일반적으로 모든 컨트롤에 적용됩니다. 일부 컨트롤은 추가적인 비헤이비어를 정의하는 특정 ActionScript를 갖고 있습니다. 이 부분에 대해서는 해당 컨트롤을 설명하는 단원에서 설명합니다.
초기 ActionScript는 각 구성 요소의 개별 상태에 대한 클래스 이름을 지정하는 큰 섹션입니다. 이러한 모든 클래스 이름은 SkinOverAll.fla 파일에서 찾을 수 있습니다. 예를 들어, 일시 정지 및 재생 버튼에 대한 코드는 다음과 같습니다.
this.pauseButtonDisabledState = "fl.video.skin.PauseButtonDisabled";
this.pauseButtonDownState = "fl.video.skin.PauseButtonDown";
this.pauseButtonNormalState = "fl.video.skin.PauseButtonNormal";
this.pauseButtonOverState = "fl.video.skin.PauseButtonOver";
this.playButtonDisabledState = "fl.video.skin.PlayButtonDisabled";
this.playButtonDownState = "fl.video.skin.PlayButtonDown";
this.playButtonNormalState = "fl.video.skin.PlayButtonNormal";
this.playButtonOverState = "fl.video.skin.PlayButtonOver";
클래스 이름은 실제 외부 클래스 파일을 갖지 않으므로 라이브러리에 있는 모든 동영상 클립에 대한 클래스 이름은 [링크] 대화 상자에 지정되어 있습니다.
ActionScript 2.0 구성 요소의 경우 런타임에 실제로 사용되는 스테이지 동영상 클립이 있습니다. ActionScript 3.0 구성 요소의 경우 이러한 동영상 클립이 계속 FLA 파일에 있지만 이는 보다 편리하게 편집하기 위한 것입니다. 이제 이러한 동영상 클립은 모두 안내 레이어이므로 내보낼 수 없습니다. 라이브러리에 있는 모든 스킨 에셋은 첫 번째 프레임에서 내보내지도록 설정되며 다음과 같은 코드를 사용하여 동적으로 만들어집니다.
new fl.video.skin.PauseButtonDisabled();
다음 섹션은 스킨의 최소 폭과 높이를 정의하는 ActionScript 코드입니다. 이 값은 [스킨 선택] 대화 상자에 표시되며 해당 스킨이 최소 크기 이하로 조절되지 않도록 런타임에 사용됩니다. 최소 크기를 지정하지 않으려면 이 값을 undefined로 두거나 0 또는 0보다 작은 값으로 지정합니다.
// minimum width and height of video recommended to use this skin,
// leave as undefined or <= 0 if there is no minimum
this.minWidth = 270;
this.minHeight = 60;
각 자리 표시자에는 다음과 같은 속성이 적용될 수 있습니다.
|
속성
|
설명
|
|
anchorLeft
|
부울. FLVPlayback 인스턴스의 왼쪽을 기준으로 상대적인 위치에 컨트롤을 배치합니다.
anchorRight
가 명시적으로
true
로 설정된 경우에는
false
로 기본 설정되지만, 그렇지 않은 경우에는
true
로 기본 설정됩니다.
|
|
anchorRight
|
부울. FLVPlayback 인스턴스의 오른쪽을 기준으로 상대적인 위치에 컨트롤을 배치합니다. 기본값은
false
입니다.
|
|
anchorBottom
|
부울. FLVPlayback 인스턴스의 아래쪽을 기준으로 상대적인 위치에 컨트롤을 배치합니다.
anchorTop
이 명시적으로
true
로 설정된 경우에는
false
로 기본 설정되지만 그렇지 않은 경우
true
로 기본 설정됩니다.
|
|
anchorTop
|
부울. FLVPlayback 인스턴스의 위쪽을 기준으로 상대적인 위치에 컨트롤을 배치합니다. 기본값은
false
입니다.
|
anchorLeft
및
anchorRight
속성이 모두
true
인 경우 이 컨트롤은 런타임에 가로로 크기 조절됩니다.
anchorTop
및
anchorBottom
속성이 모두
true
인 경우 이 컨트롤은 런타임에 세로로 크기 조절됩니다.
이 속성의 효과를 확인하려면 이 속성이 Flash 스킨에서 어떻게 사용되는지 살펴보십시오. BufferingBar 및 SeekBar 컨트롤만이 크기 조절되는 컨트롤이며 차례로 포개져서 배치되고
anchorLeft
및
anchorRight
속성이 모두
true
로 설정됩니다. BufferingBar 및 SeekBar 왼쪽에 있는 모든 컨트롤은
anchorLeft
속성이
true
로 설정되고 오른쪽에 있는 컨트롤은
anchorRight
속성이
true
로 설정됩니다. 모든 컨트롤의
anchorBottom
속성은
true
로 설정됩니다.
스킨에서 컨트롤을 아래쪽이 아니라 위쪽에 배치하도록 레이아웃 레이어의 동영상 클립을 편집할 수 있습니다. 이렇게 하려면 컨트롤을
video_mc
를 기준으로 위쪽으로 이동하고 모든 컨트롤에 대해
anchorTop
을
true
로 설정합니다.
