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: 7787 7787 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

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.

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
5320
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
5280
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
5125
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
5110
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4855
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Photoshop Outlook JSON Fotografie Java MySQL Ruby on Rails Bridge Python Dreamweaver Action Script AJAX Javascript CSS Word Flash PSD Illustrator XHTML StyleSheet HTML Sony Vegas Powerpoint RoR COREL DRAW SEO SWF XML Swift 3D Vista Gimp Fireworks Verilog PHP Excel Lightroom
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