|
Un video player personalizat poate fi un plus pentru aspectul general al unui site. Daca detii un site ce prezinta fisiere video, este cu atat mai important sa ai un video player personalizat, care sa lase o impresie placuta vizitatorilor tai.
In acest tutorial, iti voi arata cum sa codezi si sa creezi propriul video player flash personalizat, pas cu pas. Speram ca va fi un material potrivit pentru incepatorii in flash.
Observatii importante inainte de a incepe
- Nu uita sa setezi denumirile movieclip-urilor utilizate ca exemplu, asa cum au fost stabilite, in caz contrar, actiunile nu vor functiona!
- Fii atent la instructiunile scrise cu caractere italice. Acestea iti vor spune asupra carui layer & movieclip actionezi!
- Butonul FullScreen va functiona doar daca ai specificat < param name=”allowFullScreen” value=”true” /> in HTML.
Partea de Design:
Mai intai creeaza un nou document flash (ActionScript 2.0) si seteaza-i dimensiunea si numarul de frame-uri pe secunda (fps) dupa cum doresti. In mod uzual se folosesc 30fps. In legatura cu dimensiunea documentului, ar trebui sa tii minte ca, in cazul in care rulezi filme cu o proportionalitate de 4?, ar trebui sa mentii aceasta rata si pentru inaltimea barei de control pe care o vei utiliza. In acest tutorial am setat dimensiunea la 489 x 400 px.
Ca si culoare de background, ar fi indicat sa folosesti aceeasi nuanta ca si in fundalul site-ul web. Dar, desigur, acest lucru depinde de tine.
Scena 1 (layer:background)
Denumeste acum primul layer “background” si ataseaza tot ce vrei sa fie afisat in background-ul video player-ului. In cazul de fata, am utilizat un background intr-o nuanta palida de negru pentru bara de control.
Scena 1 (layer:controls)
Creeaza un nou layer, denumit “controls”. Apoi schiteaza butoanele barei de control care vor produce efectele de pause, play, rewind, mute si redimensionarea in fullscreen.
Converteste toate butoanele in movie clip-uri, selectandu-le pe rand si apasand F8. Numeste-l pe fiecare dupa cum doresti. Apoi, in fereastra proprietatilor, seteaza numele fiecarui clip. Denumirile butoanelor din exemplul nostru sunt in ordine: “pause_btn”, “play_btn”, “rewind_btn”, “mc_volume” si “fullscreen_btn”.
Scena 1 > volume (layer:Layer1)
Dupa cum banuiesti, butoanele volum si fullscreen trebuie sa arate in mod diferit cand se utilizeaza. Deci, mai intai, click pe butonul volum pentru a-l edita. In movieclip, creeaza 2 frame-uri, unul pentru dezactivarea sunetului si unul pentru activarea lui.
Scena 1 > fullscreen (layer:Layer1 & Layer2)
Repeta acelasi pas si pentru butonul fullscreen. Doua parti ale butonului fullscreen, sageata si dreptunghiul sunt impartite in exemplul meu in 2 layere. Esti complet liber sa faci ce doresti.
Scena 1 (layer:controls)
Pentru bara de navigare, vei schita 2 linii subtiri, una lunga, orizontala si una inalta, verticala. Converteste fiecare linie trasata intr-un movieclip. Seteaza denumirea liniei lungi, care va fi utilizata ca timeline, la “mc_track”. Numele pentru nod, linia scurta, poate fi “mc_knob”. In final, selecteaza ambele clipuri si apasa tasta F8 pentru a le uni intr-un movieclip, pe care l-am denumit “mc_scrubber”.
Acum, selecteaza toate clipurile ( Shift + click pe fiecare ) si apasa din nou tasta F8 pentru a le uni pe toate intr-un singur simbol, “mc_controls”.
Scena 1 (layer:video)
Acum, creeaza un nou layer, denumit “Video”. Deschide panoul Components sau apasa direct Ctrl+F7 si trage componenta MediaDisplay din Media – Player 6 -7 in noul layer creat. Pentru ca filmul sa apara pe tot ecranul playerului, trebuie sa redimensionezi componenta astfel incat ea sa acopere toata zona alba. Dupa redimensionare, click pe componenta MediaDisplay de pe scena pentru a o selecta, acceseaza tab-ul Parameters din partea de jos a ecranului,apoi apasa pe butonul Launch Component Inspector. In fereastra care se deschide debifeaza “Automatically Play”, “Use Preferred Media Size” si “Respect Aspect Ratio”. “Automatically Play” poate ramane bifat daca doresti.
|
4288 afisari |
45 min
|
Mediu
