Video Player in Flash

Pentru ca ecranul sa arate mai elegant, creeaza un nou layer deasupra layerului “video”, denumeste-l “stroke” si utilizeaza rectangle tool pentru a desena un dreptunghi ( negru + 1 px contur ) avand aceleasi dimensiuni ca si componenta MediaDisplay. Aceasta va crea un contur de jur-imprejurul componentei. Acum, am obtinut un aspect mai placut al video playerului.

Codul ActionScript:

Codul Actionscript este o parte importanta a functionalitatii designului tau. Mai intai, incepem cu definirea caii relative catre fisierul video. Creeaza un nou layer denumit “actions”. Da click pe primul frame si apasa F9 pentru a deschide panoul Actions. In interiorul acestuia, tasteaza urmatorul cod pentru a defini calea catre fisierul FLV. Nu uita ca acest video player poate reda numai fisiere FLV.

Denumirea “video/video.flv” reprezinta o cale relativa pentru fisierul video denumit “video.flv”, aflat in directorul „video”. Parametrul “FLV” specifica faptul ca video playerul va fi utilizat pentru a reda fisiere FLV. Cealalta optiune este “MP3″.

Acum este timpul sa adaugam actiuni butoanelor de control. Click pe clipul “mc_controls” care ar trebui sa se afle in mod normal in layerul “controls”. Click de 2 ori pentru a edita acest movie clip. In “mc_controls”, creeaza 3 layere si denumeste-le in ordine: “progress”, “actions”, “othercntrls”. Plaseaza toate butoanele barei de control (”pause_btn”, “play_btn”, “rewind_btn”, “mc_volume” si “fullscreen_btn” ), anterior, in layerul “othercntrls”. Layerul “actions” va detine tot codul actionscript si layerul “progress” va contine bara de navigare a video player-ului.

Acum, click pe layerul “actions” pentru a deschide panoul de actiuni aferent acestuia (F9). Adauga urmatorul cod in panoul Actions.

video = _root.video;
// actiuni pentru play 
play_btn.onRelease = function() {
video.play();
};
// actiuni pentru pause
pause_btn.onRelease = function() {
video.pause();
};
//fullscreen
fullscreen_btn.onRelease = function() {
video.displayFull();
toggleFullScreen();
};
 
//functie de reset, poate fi utilizat si stop(0)
rewind.onRelease = function() {
video.play(0);
};
 
//porneste/opreste sunetul
mc_volume.onRelease = function() {
mc_volume.play();
};
 
//acest cod este pentru functia de fullscreen
Stage.scaleMode="Scale";
Stage.align = "TC";  //T:top, C: center
function toggleFullScreen(){
if(Stage["displayState"]=="normal"){
Stage["displayState"]="fullScreen";
fullscreen_btn.gotoAndStop(2);
}else{
Stage["displayState"]="normal";
fullscreen_btn.gotoAndStop(1);
}
}

Pentru butoanele de volum si fullscreen, in cazul in care nu s-a dat click pe ele, va fi afisat primul frame.Daca se apasa acele butoane, movie clip-urile trebuie sa treaca la cel de-al doilea frame si sa se opreasca acolo. Pentru aceasta, adauga o functie stop() pe fiecare frame. In codul de mai sus, se poate observa ca atunci cand se da click pe un buton, se vor reda acele clipuri oprite, insemnand ca al doilea frame va aparea pe ecran.

Pentru ca sonorul sa fie oprit/pornit cu ajutorul butonul de volum, in panoul de actiuni vom adauga doua parti de cod dupa functia stop, care vor schimba redarea sunetului pentru frame-ul respectiv.

In frame-ul 1, introdu urmatorul cod. Cand este redat acest frame, sonorul va fi pornit.

stop();
_root.video.volume = 100;

Pentru frame-ul 2, scrie urmatorul cod. Acest frame va descreste volumul pana la zero.

stop();
_root.video.volume = 0;

In concluzie, avem un ecran video, un buton de reset, un buton de pauza, un buton play, un buton pentru controlul volumului si un buton de fullscreen. Singurul lucru ramas, il reprezinta functiile barei de navigare.

Bara de navigare necesita urmatorul cod. Asadar, click pe movieclip-ul “mc_scrubber” si creeaza un nou layer pentru actiuni. Copiaza si ataseaza urmatorul cod in panoul de actiuni.

video = _root.video;
mc_knob.onPress = function() {
    mdown = true;
    this.startDrag(false, 0, 0, mc_track._width, 0);
};
mc_knob.onRelease = function() {
    mdown = false;
    this.stopDrag();
};
mc_knob.onReleaseOutside = mc_knob.onRelease();
this.onEnterFrame = function() {
  if (mdown) {
    dist = mc_knob._x;
    pct = dist/mc_track._width;
    newVol = pct*video.totalTime;
    video.playheadTime = newVol;
  } else {
    dist = video.playheadTime;
    pct = dist/video.totalTime;
    newX = pct*mc_track._width;
    mc_knob._x = newX;
  }
};

Asta este. Acum ar trebui sa ai un video player flash simplu pentru site-ul tau web, asemanator cu cel de mai jos:

• Interfata Adobe Flash CS4
• Bila cu efect de respingere si particule
• In ce se transforma removeMovieClip() in AS3
• Link-uri catre fisiere, site-uri si adrese de email.
• Construirea unei agende folosind XML