E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale Adobe Flash

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

GRAFICA 2D  /  Adobe Flash  /  Video (1)

Video Player in Flash

27.02.2009
Video Player in Flash

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.

Total vizualizari: 7480 7480 afisari   |   Comentarii  2   |   Rating   |   (2 voturi)   |   Timp necesar: 45 min 45 min   |   Nivel de cunostiinte necesar: Mediu  Mediu

Sursa:  wowebmaster.com  
Autor:  wowebmaster.com
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
« 1 2
comenteaza printeaza
Scena 1 (layer:stroke)

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:

Scena 1 (layer:actions)

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″.

Scena 1 > mc_controls (layer:othercntrls)

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.

Scena 1 > mc_controls (layer:actions)

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);
}
}

Scena 1 > mc_controls > volume (layer:Layer1) & Scene 1 > mc_controls > fullscreen

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.


Scena 1 > mc_controls > volume (layer:Layer1)

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.

Scena 1 > mc_controls > mc_scrubber (layer:Layer1)

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:


Pagina:
« 1 2
comenteaza printeaza
Alte tutoriale Adobe Flash:
Noteaza acest tutorial
Rating tutorial
 
(2 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (2) spune-ti parerea
cata500 cata500 , Marti, 16 Februarie 2010, ora 20:28
#2

Am o intrebare daka nu merg jocurile de pe net 3d ce prog trebe inst ...
ms

Raporteaza acest comentariu ca injurios!
Dani , Vineri, 29 Mai 2009
#1

Am 1 intrebare de unde deschid actionscript , am instalat adobe flash dar nu il gasesc....

Raporteaza acest comentariu ca injurios!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4550
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4460
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4415
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4285
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4165
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Javascript Word SWF XHTML SEO Photoshop Ruby on Rails COREL DRAW AJAX Gimp JSON CSS Fireworks StyleSheet Dreamweaver Swift 3D Verilog Java Lightroom Illustrator PSD Powerpoint Vista Python Outlook XML Action Script Bridge RoR Flash MySQL Sony Vegas Excel Fotografie HTML PHP
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software