Tworzenie karnacji dla poszczególnych niestandardowych składników UI FLV Playback

Składniki Button mają podobną strukturę. Do przycisków należą: BackButton, ForwardButton, MuteButton, PauseButton, PlayButton, PlayPauseButton i StopButton. Dla większości z nich w klatce 1 istnieje pojedynczy klip filmowy o nazwie instancji placeholder_mc. Jest to zwykle instancja stanu normal dla przycisku, jednak nie musi tak być. Na klatce 2 istnieją cztery klipy filmowe na stole montażowym dla każdego stanu wyświetlania: normal, over, down i disabled. (W czasie wykonywania składnik nigdy nie przechodzi do klatki 2; te klipy filmowe są dostępne, ponieważ ułatwiają edycję i mogą być ładowane do pliku SWF bez konieczności zaznaczania pola wyboru Eksport w pierwszej klatce w oknie dialogowym Właściwości symbolu. Konieczne jest jednak wybranie opcji Eksportuj do ActionScript).

W celu określenia karnacji dla przycisku należy przeprowadzić edycję każdego z tych klipów filmowych. Możliwa jest zmiana wielkości, a także wyglądu.

Część kodu ActionScript zwykle znajduje się w klatce 1. Zmiana tego skryptu nie powinna być konieczna. Skrypt zatrzymuje głowicę odtwarzania na klatce 1 i określa klipy filmowe, które będą używane dla określonych stanów.

Składnik paska buforowania działa bardzo prosto: zawiera animację, która zostaje wyświetlona, gdy składnik przechodzi do stanu buforowania i nie jest wymagany specjalny kod ActionScript w celu skonfigurowania tego składnika. Domyślnie jest to pasek z segmentami, który jest przesuwany z lewej na prawą stronę. Dla paska zdefiniowana jest prostokątna maska, dzięki której uzyskuje on wygląd obrotowego słupa z paskiem, ale w tej konfiguracji nie ma niczego szczególnego.

Paski buforowania w plikach SWF karnacji korzystają z 9-warstwowej skali, ponieważ muszą być skalowane w środowisku wykonawczym — niestandardowy składnik UI BufferingBar FLV nie korzysta i nie może korzystać z 9-plastrowej skali, ponieważ zawiera on zagnieżdżone klipy filmowe. Jeśli wymagane jest poszerzenie i zwiększenie wysokości składnika BufferingBar, wówczas zamiast skalować go należy zmienić jego zawartość.

Składniki SeekBar i VolumeBar są do siebie podobne, ale mają inne funkcje. Każdy z nich zawiera uchwyty, korzysta z tych samych mechanizmów śledzenia uchwytu i obsługuje klipy zagnieżdżone w celu śledzenia postępu i stopnia ukończenia.

Istnieje wiele miejsc, w których kod ActionScript w składniku FLVPlayback przyjmuje, że punkt odniesienia (zwany również punktem wyjściowym lub punktem zero ) na składniku SeekBar lub VolumeBar, znajduje się w lewym górnym rogu, dlatego ważne jest zachowanie takiej konwencji. W przeciwnym wypadku mogą pojawić się problemy z uchwytami oraz ze śledzeniem postępu i stopnia ukończenia klipów filmowych.

Paski wyszukiwania w plikach SWF karnacji korzystają z 9-warstwowej skali, ponieważ muszą być skalowane w środowisku wykonawczym — niestandardowy składnik UI SeekBar FLV nie korzysta i nie może korzystać z 9-plastrowej skali, ponieważ zawiera on zagnieżdżone klipy filmowe. Jeśli wymagane jest poszerzenie i zwiększenie wysokości składnika SeekBar, wówczas zamiast skalować go należy zmienić jego zawartość.

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

Jeśli niestandardowe składniki UI zostaną umieszczone na tej samej osi czasu i w tej samej klatce, co składnik FLVPlayback, a w składniku nie ustawiono właściwości skin , wówczas składnik FLVPlayback automatycznie połączy się z nimi bez konieczności użycia kodu ActionScript.

Jeśli na stole montażowym istnieje wiele składników FLVPlayback lub jeśli niestandardowy element sterowania i FLVPlayback nie znajdują się na tej samej osi czasu, należy wówczas napisać kod ActionScript w celu połączenia niestandardowych składników UI z instancją składnika FLVPlayback. Najpierw należy przypisać nazwę do instancji FLVPlayback, a następnie użyć kodu ActionScript, aby przypisać instancje niestandardowego składnika UI FLV Playback do odpowiednich właściwości FLVPlayback. W poniższym przykładzie instancją FLVPlayback jest my_FLVPlybk, nazwy właściwości FLVPlayback są poprzedzone kropkami (.), a instancje elementu sterującego niestandardowego UI FLV Playback znajdują się po prawej stronie znaków równości (=):

//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; 

Wykonanie poniższych kroków powoduje utworzenie niestandardowych elementów sterujących StopButton, PlayPauseButton, MuteButton oraz SeekBar:

1. Przeciągnij składnik FLVPlayback na stół montażowy i nadaj instancji nazwę my_FLVPlybk .

2. Ustaw parametr source za pomocą Inspektora składników na http://www.helpexamples.com/flash/video/cuepoints.flv .

3. Ustaw parametr Karnacja na wartość Brak.

4. Przeciągnij na stół montażowy składniki StopButton, PlayPauseButton, oraz MuteButton i umieść je nad instancją FLVPlayback, układając je pionowo w stos po lewej stronie. Nadaj każdemu z przycisków nazwę instancji w Inspektorze właściwości (np. my_stopbttn , my_plypausbttn i my_mutebttn ).

5. W panelu Biblioteka otwórz folder FLVPlayback Skins, a następnie otwórz folder SquareButton.

6. Wybierz klip filmowy SquareBgDown i kliknij go dwukrotnie w celu otwarcia na stole montażowym.

7. Kliknij prawym przyciskiem (Windows) lub kliknij przytrzymując klawisz Control (Macintosh), wybierz z menu opcję Zaznacz wszystko i usuń symbol.

8. Wybierz narzędzie Owal, narysuj owal w tym samym miejscu i ustaw wypełnienie na niebieskie ( #0033FF ).

9. W Inspektorze właściwości ustaw szerokość (Sz:) na 40 i wysokość (W:) na 20 . Ustaw współrzędną x (X:) na 0.0 i współrzędną y (Y:) na 0.0 .

10. Powtórz kroki od 6 do 8 dla SquareBgNormal, zmieniając wypełnienie na żółte ( #FFFF00 ).

11. Powtórz kroki od 6 do 8 dla SquareBgOver, zmieniając wypełnienie na zielone ( #006600 ).

12. Dokonaj edycji klipów filmowych dla różnych ikon symboli w przyciskach (PauseIcon, PlayIcon, MuteOnIcon, MuteOffIcon i StopIcon). Pliki te można znaleźć w panelu Biblioteka w folderach FLV Playback Skins/ Label Button/Assets, gdzie Label jest nazwą przycisku np. Odtwórz, Wstrzymaj itd. Dla każdego składnika wykonaj następujące czynności:

    1. Wybierz opcję Zaznacz wszystko.

    2. Zmień kolor na czerwony ( #FF0000 ).

    3. Przeskaluj składnik do 300%.

    4. Zmień współrzędną X: położenie treści na 7.0 , aby zmienić ułożenie poziome ikony dla każdego stanu przycisku.

       Uwaga: Poprzez zmianę położenia w ten sposób użytkownik uniknie otwierania każdego stanu dla przycisku i przesuwania instancji klipu filmowego ikony.

13. Kliknij niebieską strzałkę Wstecz powyżej osi czasu, aby powrócić do sceny nr 1, klatki nr 1.

14. Przeciągnij na stół montażowy składnik SeekBar i umieść go w prawym dolnym rogu instancji FLVPlayback.

15. W panelu Biblioteka kliknij dwukrotnie składnik SeekBar, aby otworzyć go na stole montażowym.

16. Przeskaluj go do wartości 400%.

17. Zaznacz kontur i ustaw kolor na czerwony ( #FF0000 ).

18. Kliknij dwukrotnie SeekBarProgress w folderze FLVPlayback Skins/Seek Bar i ustaw kolor na żółty ( #FFFF00 ).

19. Kliknij dwukrotnie SeekBarHandle w folderze FLVPlayback Skins/Seek Bar i ustaw kolor na czerwony ( #FF0000 ).

20. Kliknij niebieską strzałkę Wstecz powyżej osi czasu, aby powrócić do sceny nr 1, klatki nr 1.

21. Zaznacz instancję SeekBar na stole montażowym i nadaj instancji nazwę my_seekbar .

22. W panelu Operacje do klatki nr 1 na osi czasu dodaj instrukcję importowania dla klas wideo i przypisz nazwy dla przycisku i paska wyszukiwania do odpowiednich właściwości FLVPlayback tak, jak przedstawiono to w poniższym przykładzie:

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

23. Naciśnij klawisze Control+Enter, aby przetestować film.