개별적인 FLV Playback Custom UI 구성 요소 스키닝

버튼 구성 요소는 유사한 구조를 갖고 있습니다. 버튼 구성 요소로는 BackButton, ForwardButton, MuteButton, PauseButton, PlayButton, PlayPauseButton 및 StopButton이 있습니다. 이러한 버튼 구성 요소는 대부분 placeholder_mc라는 인스턴스 이름으로 프레임 1에 배치되는 단일 동영상 클립입니다. 이러한 동영상 클립은 해당 버튼의 보통 상태를 나타내는 인스턴스이지만 꼭 그런 것은 아닙니다. 프레임 2에는 각각의 표시 상태(보통, 오버, 다운, 비활성)에 대한 네 가지 스테이지 동영상 클립이 있습니다. 런타임에서 구성 요소가 프레임 2로 실제 이동하는 것은 아니며 동영상 클립을 보다 편리하게 편집하고 [심볼 속성] 대화 상자에서 [첫 프레임으로 내보내기] 체크 상자를 선택하지 않고도 SWF 파일에 동영상 클립이 강제로 로드되도록 프레임 2에 이러한 동영상 클립이 배치됩니다. 그러나 [ActionScript에 내보내기] 옵션은 여전히 선택해야 합니다.

버튼을 스키닝하려면 각각의 동영상 클립을 편집하면 됩니다. 크기뿐만 아니라 모양도 변경할 수 있습니다.

일부 ActionScript는 프레임 1에 나타나며 이 스크립트는 변경할 필요가 없습니다. 이러한 스크립트는 프레임 1에서 재생 헤드를 중단하고 상태에 따라 사용할 동영상 클립을 지정하는 역할을 합니다.

버퍼링 막대 구성 요소는 간단하게 구성 요소가 버퍼링 상태로 진입할 때 표시되는 애니메이션으로 구성되어 있으며 이 구성 요소를 구성하는 데 특별한 ActionScript는 필요하지 않습니다. 기본적으로 이 구성 요소는 "이발소 간판" 효과를 주는 사각형 마스크가 입혀져 왼쪽에서 오른쪽으로 이동하는 줄무늬 막대 형태입니다. 이 구성에 특별한 부분은 없습니다.

스킨 SWF 파일에 있는 버퍼링 막대는 런타임에 크기 조절이 필요하기 때문에 9-슬라이스 크기 조절을 사용하지만 BufferingBar FLV Custom UI 구성 요소는 중첩된 동영상 클립을 갖고 있기 때문에 9-슬라이스 크기 조절을 사용하지 않으며 사용할 수도 없습니다 . BufferingBar를 더 넓게 또는 길게 만들려면 전체 크기를 조절하는 것이 아니라 내용을 변경해야 합니다.

SeekBar 및 VolumeBar 구성 요소는 유사해 보이지만 서로 다른 기능을 갖고 있습니다. 두 구성 요소 모두 핸들이 있으며 동일한 핸들 추적 메커니즘을 사용하고 진행률 및 채움률을 추적하는 중첩 클립을 지원합니다.

FLVPlayback 구성 요소의 ActionScript 코드에서는 SeekBar 또는 VolumeBar 구성 요소의 등록 포인트( 원점 이라고도 함)가 내용의 왼쪽 위 모서리에 있는 것으로 간주하는 경우가 많기 때문에 이 규칙을 따르는 것이 중요합니다. 그렇지 않으면 핸들, 진행률 및 채움률 동영상 클립을 사용하는 데 문제가 발생할 수 있습니다.

스킨 SWF 파일에 있는 검색 막대는 런타임에 크기 조절이 필요하기 때문에 9-슬라이스 크기 조절을 사용하지만 SeekBar FLV Custom UI 구성 요소는 중첩된 동영상 클립을 갖고 있기 때문에 9-슬라이스 크기 조절을 사용하지 않으며 사용할 수도 없습니다 . SeekBar를 더 넓게 또는 길게 만들려면 전체 크기를 조절하는 것이 아니라 내용을 변경해야 합니다.

stop(); 
handleLinkageID = "SeekBarHandle"; 
handleLeftMargin = 2; 
handleRightMargin = 2; 
handleY = 11;

Custom UI 구성 요소를 FLVPlayback 구성 요소와 같은 타임라인과 프레임에 배치하려는데 skin 속성이 설정되어 있지 않은 경우 ActionScript 없이도 FLVPlayback이 자동으로 Custom UI 구성 요소에 연결됩니다.

스테이지에 FLVPlayback 구성 요소가 여러 개 있거나 사용자 정의 컨트롤과 FLVPlayback이 같은 타임라인에 없는 경우 ActionScript 코드를 작성하여 Custom UI 구성 요소를 FLVPlayback 구성 요소의 인스턴스에 연결해야 합니다. 먼저 FLVPlayback 인스턴스에 이름을 지정한 다음 ActionScript를 사용하여 FLV Playback Custom UI 구성 요소 인스턴스를 해당되는 FLVPlayback 속성에 지정해야 합니다. 다음 예제에서 FLVPlayback 인스턴스는 my_FLVPlybk이고 마침표(.) 뒤에 쓰여진 것이 FLVPlayback 속성 이름이며 등호 기호(=) 오른쪽에 있는 것이 FLV Playback Custom UI 컨트롤입니다.

//FLVPlayback instance = my_FLVPlybk 
my_FLVPlybk.playButton = playbtn; // set playButton prop. to playbtn, etc. 
my_FLVPlybk.pauseButton = pausebtn; 
my_FLVPlybk.playPauseButton = playpausebtn; 
my_FLVPlybk.stopButton = stopbtn;  
my_FLVPlybk.muteButton = mutebtn; 
my_FLVPlybk.backButton = backbtn; 
my_FLVPlybk.forwardButton = forbtn; 
my_FLVPlybk.volumeBar = volbar; 
my_FLVPlybk.seekBar = seekbar; 
my_FLVPlybk.bufferingBar = bufbar; 

다음 단계에서는 사용자 정의 StopButton, PlayPauseButton, MuteButton 및 SeekBar 컨트롤을 만듭니다.

1. FLVPlayback 구성 요소를 스테이지로 드래그하고 인스턴스 이름으로 my_FLVPlybk 를 지정합니다.

2. 구성 요소 관리자에서 source 매개 변수를 http://www.helpexamples.com/flash/video/cuepoints.flv 로 설정합니다.

3. Skin 매개 변수를 [없음]으로 설정합니다.

4. StopButton, PlayPauseButton 및 MuteButton을 각각 하나씩 스테이지로 드래그하고 FLVPlayback 인스턴스 위에 수직으로 왼쪽에 쌓습니다. 속성 관리자에서 각 버튼에 my_stopbttn , my_plypausbttn 및 my_mutebttn 과 같은 인스턴스 이름을 지정합니다.

5. [라이브러리] 패널에서 FLVPlayback Skins 폴더를 열고 이 폴더 아래에 있는 SquareButton 폴더를 엽니다.

6. SquareBgDown 동영상 클립을 선택하고 두 번 클릭하여 스테이지에서 엽니다.

7. 마우스 오른쪽 버튼을 클릭(Windows)하거나 Control 키를 누른 상태에서 클릭(Macintosh)하고 메뉴에서 [전체 선택]을 선택한 후 심볼을 삭제합니다.

8. [타원형 도구]를 선택하고 같은 위치에 타원을 그린 다음 채움 색상을 파랑( #0033FF )으로 설정합니다.

9. 속성 관리자에서 폭(W:)은 40 으로 설정하고 높이(H:)는 20 으로 설정합니다. X 좌표(X:)는 0.0 으로 설정하고 Y 좌표(Y:)는 0.0 으로 설정합니다.

10. SquareBgNormal에 대해서도 6~8단계를 반복하되 채움 색상은 노랑( #FFFF00 )으로 변경합니다.

11. SquareBgOver에 대해서도 6~8단계를 반복하되 채움 색상은 녹색( #006600 )으로 변경합니다.

12. 버튼 내부에 있는 다양한 심볼 아이콘(PauseIcon, PlayIcon, MuteOnIcon, MuteOffIcon, StopIcon)에 대한 동영상 클립을 편집합니다. 이러한 동영상 클립은 [라이브러리] 패널에서 FLV Playback Skins/ Label Button/Assets에서 찾을 수 있습니다. 여기서 Label 은 Play, Pause 등과 같은 버튼의 이름입니다. 각 항목에 대해 다음 단계를 수행합니다.

    1. [전체 선택] 옵션을 선택합니다.

    2. 색상을 빨강( #FF0000 )으로 변경합니다.

    3. 300%로 크기 조절합니다.

    4. 내용의 X: 위치를 7.0 으로 변경하여 모든 버튼 상태에서 아이콘의 가로 위치를 수정합니다.

       참고: 위치를 이와 같은 방법으로 변경하면 각각의 버튼 상태를 열고 아이콘 동영상 클립 인스턴스를 이동하는 번거로움을 피할 수 있습니다.

13. 타임라인 위의 파란 색 [뒤로] 화살표를 클릭하여 장면 1, 프레임 1로 돌아갑니다.

14. SeekBar 구성 요소를 스테이지로 드래그하고 FLVPlayback 인스턴스의 오른쪽 아래 모서리에 배치합니다.

15. [라이브러리] 패널에서 SeekBar를 두 번 클릭하여 스테이지에서 엽니다.

16. 400%로 크기 조절합니다.

17. 외곽선을 선택하고 색상을 빨강( #FF0000 )으로 설정합니다.

18. FLVPlayback Skins/Seek Bar 폴더에서 SeekBarProgress를 두 번 클릭하고 색상을 노랑( #FFFF00 )으로 설정합니다.

19. FLVPlayback Skins/Seek Bar 폴더에서 SeekBarHandle을 두 번 클릭하고 색상을 빨강( #FF0000 )으로 설정합니다.

20. 타임라인 위의 파란 색 [뒤로] 화살표를 클릭하여 장면 1, 프레임 1로 돌아갑니다.

21. 스테이지에서 SeekBar 인스턴스를 선택하고 인스턴스 이름으로 my_seekbar 를 지정합니다.

22. 타임라인의 프레임 1에서 [액션] 패널을 열고 다음 예제와 같이 비디오 클래스에 대한 import 명령문을 추가하고 버튼 및 검색 막대 이름을 해당하는 FLVPlayback 속성에 지정합니다.

    import fl.video.*; 
    my_FLVPlybk.stopButton = my_stopbttn; 
    my_FLVPlybk.playPauseButton = my_plypausbttn; 
    my_FLVPlybk.muteButton = my_mutebttn; 
    my_FLVPlybk.seekBar = my_seekbar;

23. Ctrl+Enter를 눌러 동영상을 테스트합니다.