Skala anpassade användargränssnittskomponenter för FLV-uppspelning individuellt

Button-komponenterna har en liknande struktur. Följande Buttons finns: BackButton, ForwardButton, MuteButton, PauseButton, PlayButton, PlayPauseButton och StopButton. De flesta har ett enda filmklipp i bildruta 1 med instansnamnet placeholder_mc. Det är vanligtvis en instans av knappens normala läge, men behöver inte vara det. I bildruta 2 finns fyra filmklipp på scenen för varje visningsläge: normal, över, ned och inaktiverad. (Vid körning kommer komponenten egentligen aldrig till bildruta 2. De här filmklippen är placerade här för att göra redigeringen enklare och för att tvinga dem att läsas in i SWF-filen utan att du behöver markera kryssrutan Exportera i första bildrutan i dialogrutan Symbolegenskaper. Men du måste fortfarande markera alternativet Exportera för ActionScript.)

Om du vill ange ett skal för knappen redigerar du något de här filmklippen. Du kan ändra deras storlek och deras utseende.

Viss ActionScript visas vanligtvis på bildruta 1. Du ska inte behöva ändra det här skriptet. Det stoppar uppspelningshuvudet på bildruta 1 och anger vilket filmklipp som ska användas för olika lägen.

Komponenten BufferingBar är enkel. Den består av en animering som blir synlig när komponenten hamnar i buffertläge, och kräver inget särskilt ActionScript för att konfigureras. Som standard är den ett randigt fält från vänster till höger med en rektangulär mask på för att ge den en ”polkagris”-effekt, men det är inget särskilt med den här konfigurationen.

Även om BufferingBars i skal-SWF-filer använder skalning med nio segment eftersom de måste skalas under körning, behöver den anpassade gränssnittskomponenten BufferingBar FLV inte och kan inte använda skalning med nio segment, eftersom den har kapslade filmklipp. Om du vill göra BufferingBar bredare och högre kan du ändra innehållet i stället för att skala den.

Komponenterna SeekBar och VolumeBar liknar varandra, även om de har olika funktioner. Båda har handtag, använder samma mekanismer för handtagsspårning och har stöd för klipp som är kapslats i dem för att spåra förloppet och fullbordan.

Det finns många platser där ActionScript-koden i FLVPlayback-komponenten antar att registreringspunkten (även origo och nollpunkt ) för SeekBar- eller VolumeBar-komponenten finns i det övre vänstra hörnet av innehållet, så det är viktigt att behålla den konventionen. Annars kan du få problem med handtag och progress- och fullness-filmklipp.

Även om SeekBars i skal-SWF-filer använder skalning med nio segment eftersom de måste skalas under körning, behöver den anpassade gränssnittskomponenten SeekBar FLV inte och kan inte använda skalning med nio segment, eftersom den har kapslade filmklipp. Om du vill göra SeekBar bredare och högre kan du ändra innehållet i stället för att skala den.

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

Om du placerar dina anpassade användargränssnittskomponenter på samma tidslinje och i samma bildruta som FLVPlayback-komponenten, och du inte har ställt in egenskapen skin , ansluter FLVPlayback dem automatiskt utan att något ActionScript behövs.

Om du har flera FLVPlayback-komponenter på scenen, eller om den anpassade kontrollen och FLVPlayback inte finns på samma tidslinje, måste du skriva ActionScript-kod för att ansluta de anpassade användargränssnittskomponenterna till din instans av FLVPlayback-komponenten. Först måste du ge FLVPlayback-instansen ett namn, och sedan använder du ActionScript för att tilldela instanserna av den anpassade användargränssnittskomponenten för FLV-uppspelning till motsvarande FLVPlayback-egenskaper. I följande exempel är FLVPlayback-instansen my_FLVPlybk, FLVPlayback-egenskapsnamnen kommer efter punkterna (.) och instanserna av de anpassade användargränssnittskontrollerna för FLV-uppspelning är placerade till höger om likhetstecknen (=):

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

Med följande steg skapar du anpassade StopButton-, PlayPauseButton-, MuteButton- och SeekBar-kontroller:

1. Dra FLVPlayback-komponenten till scenen och ge den instansnamnet my_FLVPlybk .

2. Ställ in parametern source via komponentinspektören till http://www.helpexamples.com/flash/video/cuepoints.flv .

3. Ställ in parametern Skal på Inget.

4. Dra en StopButton, en PlayPauseButton och en MuteButton till scenen, och placera dem över FLVPlayback-instansen, så att de staplasa lodrätt på vänster sida. Ge varje knapp ett instansnamn i egenskapsinspektören (till exempel my_stopbttn , my_plypausbttn och my_mutebttn ).

5. I panelen Bibliotek öppnar du mappen med FLVPlayback-skal, och sedan öppnar du mappen SquareButton nedanför den.

6. Markera filmklippet SquareBgDown och dubbelklicka på det för att öppna det på scenen.

7. Högerklicka (Windows) eller Ctrl-klicka (Macintosh), välj Markera alla på menyn och ta bort symbolen.

8. Välj ovalverktyget, rita en oval på samma plats och ställ in blå fyllning ( #0033FF ).

9. I egenskapsinspektören ställer du in bredden (W:) till 40 och höjden (H:) till 20 . Ställ in x-koordinaten (X:) till 0.0 och y-koordinaten (Y:) till 0,0 .

10. Upprepa steg 6 till 8 för SquareBgNormal, men ändra fyllningen till gul ( #FFFF00 ).

11. Upprepa steg 6 till 8 för SquareBgOver, men ändra fyllningen till grön ( #006600 ).

12. Redigera filmklippen för de olika symbolerna i knapparna (PauseIcon, PlayIcon, MuteOnIcon, MuteOffIcon och StopIcon). Filmklippen finns i panelen Bibliotek under FLV Playback Skins/ Etikett Button/Assets, där Etikett är namnet på knappen, till exempel Play, Pause, osv. Följ dessa steg för var och en:

    1. Välj alternativet Markera allt.

    2. Ändra färgen till röd ( #FF0000 ).

    3. Ändra skalan till 300 %.

    4. Ändra innehållets X:- plats till 7.0 för att ändra den vågräta placeringen av ikonen i alla knapplägen.

       Obs! Genom att ändra placeringen på det här sättet undviker du att öppna varje knappläge och flytta ikonens filmklippsinstans.

13. Klicka på den blå Tillbaka-pilen ovanför tidslinjen för att återgå till scen 1, bildruta 1.

14. Dra en SeekBar-komponent till scenen och placera den i det nedre högra hörnet av FLVPlayback-instansen.

15. I panelen Bibliotek dubbelklickar du på SeekBar för att öppna den på scenen.

16. Skala den till 400 %.

17. Markera konturen och ställ in röd färg ( #FF0000 ).

18. Dubbelklicka på SeekBarProgress i mappen FLVPlayback Skins/Seek Bar och ställ in gul färg ( #FFFF00 ).

19. Dubbelklicka på SeekBarHandle i mappen FLVPlayback Skins/Seek Bar och ställ in röd färg ( #FF0000 ).

20. Klicka på den blå Tillbaka-pilen ovanför tidslinjen för att återgå till scen 1, bildruta 1.

21. Markera SeekBar-instansen på scenen och ge den instansnamnet my_seekbar .

22. Lägg till en import -sats för videoklasserna i panelen Åtgärder på i bildruta 1 i tidslinjen. Tilldela sedan Button- och SeekBar-namnen till motsvarande FLVPlayback-egenskaper, som i följande exempel:

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

23. Tryck på Ctrl+Enter för att testa filmen.