Elemente Multimedia în Programarea...
Transcript of Elemente Multimedia în Programarea...
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Elemente Multimedia în Elemente Multimedia în Programarea WebProgramarea Web
Ciprian DobreCiprian [email protected]
Curs Programare Web, anul 4 C5 – Curs 9 1
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
ObiectiveObiectiveOb ect eOb ect e
• În cadrul cursului prezentăm noţiuni p ţintroductive legate de programarea elementelor multimedia în paginile Webelementelor multimedia în paginile Web.
• Cuprins:– Multimedia
Curs Programare Web, anul 4 C5 – Curs 9 2
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
MultimediaMultimediau t ed au t ed a
• Multimedia – mai multe media (text, grafică, audio, animații, video, date) integrate împreună
• Conținutul Web multimedia este popular şi folositor pentru interacținea cu utilizatorul
text audio Imagini statice
animații conținutvideo
interactivitate
Curs Programare Web, anul 4 C5 – Curs 9 3
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Conținut multimediaConținut multimediaConținut multimediaConținut multimedia• Elementele Multimedia pot fi adăugate în două
feluri:– External media: fişierul sunet sau video este accesat
ca un hyperlink• Avantaj: Utilizatorii accesează clip-ul multimedia doar dacă
dorescdoresc
– Inline media: clipurile sunt plasate în interiorul paginii Web ca obiecte embeddedWeb ca obiecte embedded
• Avantaj: Material suplimentar în cadrul paginii• Dezavantaj: Utilizatorul este forţat să aştepte încărcarea
clipului
Curs Programare Web, anul 4 C5 – Curs 9 4
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Conțin t m ltimedia intern și e ternConțin t m ltimedia intern și e ternConținut multimedia intern și externConținut multimedia intern și extern
Curs Programare Web, anul 4 C5 – Curs 9 5
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Fişiere SunetFişiere Sunetş e e Su etş e e Su et• Unda sonoră este compusă din două componente:
– Amplitudinea: înălţimea undei sonoreAmplitudinea: înălţimea undei sonore• Cu cât amplitudinea este mai mare cu atât volumul
sunetului e mai mare.F ţ it i ă d ă– Frecvenţa: viteza cu care se mişcă unda sonoră
• Frecvenţele mai mari au înălţimea (pitch) mai mare.• O undă sonoră este o funcţie continuă• O undă sonoră este o funcţie continuă
– Pentru convertirea ei la o formă ce poate fi stocată într-un fişier de sunet calculatorul trebuie să înregistreze gmăsurători ale sunetului la momente discrete de timp
• Fiecare măsurătoare reprezintă un eșantion (sample)– Rata de măsurare se specifică în eșantioane perRata de măsurare se specifică în eșantioane per
secundă• Cele mai comune sunt 11 KHz, 22 KHzşi 44 KHz
O frecvenţă de 1 Hz corespunde la operioadă de repetare a unui fenomen
Curs Programare Web, anul 4 C5 – Curs 9 6
şi 44 KHz– Calitate vs. dimensiunea fişierului
de o secundă, 2 Hz la o jumătate desecundă, etc.
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Fişiere SunetFişiere Sunet• Acuratețea transformării unui sunet într-un format
de date digital depinde și de rezoluţia de g p ș ţsampling– Indică precizia măsurătorii sunetului în fiecare eșantion
• Două valori ale rezoluţiei: 8-bit şi 16-bit numărul de biți folosiți pentru reprezentarea amplitudinii
– Rezoluţia 16-bit creează un fişier mai mare, având șiRezoluţia 16 bit creează un fişier mai mare, având și calitatea mai mare.
• În final trebuie ales și numărului de canaleș– În mod normal stereo sau monaural, dar pot fi
adăugate canale suplimentare
Curs Programare Web, anul 4 C5 – Curs 9 7
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Date tip Sunet în formate digitaleDate tip Sunet în formate digitale
Rata de eșantionare și rezoluția Calitatea sunetului
8 KHz, 8-bit, mono Telefon, ,22KHz, 16-bit, stereo Radio
44 KHz, 16-bit, stereo CD, ,
Curs Programare Web, anul 4 C5 – Curs 9 8
* http://wiki.audacityteam.org/index.php?title=Sample_Rates
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Formate de Fişiere SunetFormate de Fişiere SunetFormate de Fişiere SunetFormate de Fişiere Sunet• Există câteva formate de fişiere ce se folosesc pe Web şi
f i ă di i l d lit t i icare furnizează diverse nivele de calitate şi compresie a sunetului:
AIFF/AIFC pentr folosirea pe Apple– AIFF/AIFC: pentru folosirea pe Apple– WAV: dezvoltat pentru Windows; cel mai comun format
pe Webpe Web– AU: (mu-law) format; mai vechi, UNIX
MIDI: limitat la sintetizatoare şi fişiere de muzică– MIDI: limitat la sintetizatoare şi fişiere de muzică– MPEG: folosit în principal pentru video; MP3, mai mic
RealAudio: pentru redare real time; bandwidth variabil;– RealAudio: pentru redare real-time; bandwidth variabil; tehnologie de streaming media
Curs Programare Web, anul 4 C5 – Curs 9 9
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Legătura cu un Fişier SunetLegătura cu un Fişier SunetLegătura cu un Fişier SunetLegătura cu un Fişier Sunet• Folosirea unui hyperlink
– Browserul caută aplicaţia ajutătoare pentru a reda respectivul fișier sunetA li i i l ( l l )– Aplicația este instalată extern (pe calculator)
<a href=440Hz-5sec.mp3>440Hz-5sec (MP3 format)</a>
Curs Programare Web, anul 4 C5 – Curs 9 10
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Încapsularea unui fişier sunetÎncapsularea unui fişier sunetcapsu a ea u u ş e su etcapsu a ea u u ş e su et
• Un fişier încapsulat (embedded) poate fi orice clip di fi i lt bi t t fimedia, fişier, program sau alt obiect ce poate fi
rulat sau vizualizat din pagina Web.B l t b i ă îl t i t b i ă ibă– Browser-ul trebuie să îl suporte şi trebuie să aibă acces la software-ul folosit pentru redare (plug-in sau add-on).)
– Browser-ul încarcă plug-in-ul plus alte controale necesare pentru manipularea obiectului.
– Plug-in-urile necesită ca utilizatorul să descarce şi instaleze software suplimentar înainte de a putea vizualiza pagina Webvizualiza pagina Web
– Utilizatorii ar putea prefera să nu vadă respectiva pagină
Curs Programare Web, anul 4 C5 – Curs 9 11
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
FolosireaFolosirea taguluitagului <EMBED><EMBED>Folosirea Folosirea taguluitagului EMBEDEMBED• Pentru încapsularea unui clip de sunet se
f l t t l b dfoloseşte tag-ul <embed><embed src=URL width=value height=value gautostart=“startvalue”>– height şi width definesc dimensiunea obiectului şi
l l bi l icontroalele obiectului– autostart este folosit pentru a determina dacă sau nu
b l î li l î l t t t d tăbrowser-ul începe clip-ul încapsulat automat odată cu încărcarea paginii
• True: porneşte automat• True: porneşte automat• False: permite utilizatorului începerea manuală• Comportamentul implicit variază de la browser la browser
Curs Programare Web, anul 4 C5 – Curs 9 12
Comportamentul implicit variază de la browser la browser
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Exemplu de folosireExemplu de folosire tagtag <EMBED><EMBED>Exemplu de folosire Exemplu de folosire tagtag EMBEDEMBED<p>Listen to the sounds of an embedded <i>wav</i>fil /file</p><blockquote><embed src=“0 0 wav” width=145 height=40 <embed src= 0_0.wav width=145 height=40 autostart=“false”/></blockquote>q
Curs Programare Web, anul 4 C5 – Curs 9 13
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
TagTag--ulul <BGSOUND><BGSOUND>TagTag ul ul BGSOUNDBGSOUND
• Introdus în IE 3 0 și e valabil pentru IE Introdus în IE 3.0 și e valabil pentru IE • Folosit pentru redarea sunetelor pe fundal
BGSOUND URL l l<BGSOUND src=URL loop=value>– loop defineşte de câte ori clipul este rulat (1, 2, 3, …)
INFINITEsau INFINITE• Atenţie: utilizatorul nu are controale
Exemplu:p<bgsound src=“AF2000.wav” loop=1>
Curs Programare Web, anul 4 C5 – Curs 9 14
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
De fapt…De fapt…De fapt…De fapt…• Pentru a lua în considerare variantele particulare de
bbrowsere:
<script language="JavaScript"><script language= JavaScript >var MSIE=navigator.userAgent.indexOf("MSIE");var NETS=navigator.userAgent.indexOf("Netscape");
OPER i t A t i d Of("O ")var OPER=navigator.userAgent.indexOf("Opera");if((MSIE>-1) || (OPER>-1)) {
document.write("<BGSOUND SRC=sound.mp3>");} else {
document.write("<EMBED SRC=sound.mp3 AUTOSTART=TRUE"))
document.write(" HIDDEN=true VOLUME=200 LOOP=0>");
}}</script>
Curs Programare Web, anul 4 C5 – Curs 9 15
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
FişiereFişiere VideoVideoFişiere Fişiere VideoVideo• Afişarea datelor video a devenit deosebit de
l ă W bpopulară pe Web– Grad mai mare de interactivitate – Acces mai rapid la informaţie
• Fişierele video pot fi foarte mari şi poate fi dificil deFişierele video pot fi foarte mari şi poate fi dificil de lucrat cu ele– 30 secunde pot conduce la fişiere de 10 MB30 secunde pot conduce la fişiere de 10 MB
• Fişierele video pot fi create pornind de la o placă de captură video sau un software de animaţiede captură video sau un software de animaţie– Proces time-consuming
Curs Programare Web, anul 4 C5 – Curs 9 16
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
ExempluExempluExempluExemplu
Curs Programare Web, anul 4 C5 – Curs 9 17
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Date videoDate video• Un fişier video este compus din mai multe cadre (imagini
individuale)Cadrele rulate în secvenţă dau iluzia de mişcare– Cadrele rulate în secvenţă dau iluzia de mişcare
• Rata de rulare reprezintă numărul de cadre prezentate în fiecare unitate de timp (fps)p p ( p )– Ratele mari furnizează o redare mai clară dar
fişierele rezultate pot fi mai mari• Dimensiunea poate fi controlată prin soluția de compresie a• Dimensiunea poate fi controlată prin soluția de compresie a
cadrelor adoptată– Compresia şi decompresia cadrelor video se bazează pe folosirea unui
program specializat capabil să comprime/decomprime fișierul video șiprogram specializat capabil să comprime/decomprime fișierul video și care se numeşte codec
• Exemple: MP3, WMA, RealVideo, RealAudio, DivX sau XviD.– Dimensiunea fişierelor video se poate micșora prin reducereaDimensiunea fişierelor video se poate micșora prin reducerea
dimensiunii cadrelor video • 160 x 120 pixeli este considerat standard pentru paginile Web.
– Color vs. grayscale şi sunetul pot influenţa dimensiunea fişierului
Curs Programare Web, anul 4 C5 – Curs 9 18
g y ş p ţ şrezultat.
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Formate de FişiereFormate de Fişiere VideoVideoFormate de Fişiere Formate de Fişiere VideoVideoFormat DescriereASF Advanced Streaming Format – dezvoltat de MS ca înlocuitor
al formatului AVI; se bazează pe tehnologia de streamingAVI Audi Video Interactive format video standard pentruAVI Audi Video Interactive – format video standard pentru
Windows; rezoluția suportată este de 320 x 240 pixeli, iar viteza maximă este de 30 fps
MPEG Moving Pictures Group – standard pentru compresia avansată; MPEG-1 352 x 240 pixeli cu 30 fps, MPEG-2 1280 x 720 pixeli cu 60 fpsx 720 pixeli cu 60 fps
QuickTime Format proprietar Apple
RealVideo Folosește tehnologie streaming pentru a furnizare video live;RealVideo Folosește tehnologie streaming pentru a furnizare video live; calitate slabă.
Curs Programare Web, anul 4 C5 – Curs 9 19
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Includerea datelor video în pagini Includerea datelor video în pagini p gp gWebWeb
• Legătură externă cu un fişier video<a href=“MRIM.avi”>Summit Flyby (187k – AVI format)</a><br><a href=“MRIM mov”>Summit Flyby (215k QuickTime <a href= MRIM.mov >Summit Flyby (215k – QuickTime format)</a><br>
• Încapsularea unui fişier videoÎncapsularea unui fişier video<embed src=“MRIM..avi” width=200 height=200 autostart=“false”>
• <NOEMBED> este folosit pentru compatibilitate cu browsere mai vechi ce nu suportă obiecte embedded
mb d ><embed …><noembed>html tags/ b d
Curs Programare Web, anul 4 C5 – Curs 9 20
</noembed>
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Rezultat:Rezultat:Rezultat:Rezultat:
Curs Programare Web, anul 4 C5 – Curs 9 21
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Java AppletsJava AppletsJa a pp etsJa a pp ets• Java oferă suport pentru rularea de programe prin
intermediul browserelor Webintermediul browserelor Web– Applet, Java WebStart
• Spre deosebire de JavaScript un applet Java nu• Spre deosebire de JavaScript, un applet Java nu este inserat în interiorul fişierului HTML– Reprezintă un fişier extern descărcat şi executat de cătreReprezintă un fişier extern descărcat şi executat de către
browser, în interiorul acestuia.• Applet-ul apare de obicei ca un obiect încapsulat în pp p p
pagina Web într-o fereastră numită applet window– Se pot specifica dimensiunea şi poziţia acestei ferestre– Unele applet-uri pot apărea în afara browser-ului ca o
fereastră separată redimensionabilă – însă mai corect de folosit în astfel de cazuri ar fi tehnologia JavaWS
Curs Programare Web, anul 4 C5 – Curs 9 22
folosit în astfel de cazuri ar fi tehnologia JavaWS
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
TagTag--urile urile <APPLET><APPLET> şişi <PARAM><PARAM>agag u eu e şş
• Tag-ul <applet> se foloseşte pentru inserarea i l t î i W bunui applet în pagina Web
– Tag-ul identifică fişierul .class folosit şi permite specificarea parametrilor necesari pentru execuţiaspecificarea parametrilor necesari pentru execuţia fişierului .class
<applet code=file.class width=value height=value>g
<param name=text value=value><param name=text value=value>
/ l</applet>
Curs Programare Web, anul 4 C5 – Curs 9 23
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Exemplu deExemplu de APPLETAPPLETExemplu de Exemplu de APPLETAPPLET
<applet code=“CreditRoll.class” width=400 height=60>
<param name=BGCOLOR value=“FFFFFF”/><param name=BGCOLOR value= FFFFFF />
<param name=TEXTCOLOR value=“663366”/>
<param name=FADEZONE value=20/>
<param name=VSPACE value=3/><param name=VSPACE value=3/>
<param name=SPEED value=100/>
</applet>
Curs Programare Web, anul 4 C5 – Curs 9 24
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Exemplu:Exemplu:Exemplu:Exemplu:
Curs Programare Web, anul 4 C5 – Curs 9 25
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
FlashFlashFlashFlash• Flash este una dintre cele mai importante
l tf t d lt d ți tplatforme pentru dezvoltarea de conținut multimedia online (jocuri)D l Fl h MX 2004 A ti S i t l tf• De la Flash MX 2004 ActionScript platforma a căpătat cu adevărat puterea oricărui limbaj de programare (non web) profesionalprogramare (non-web) profesional
• Audienţă mare98% di t tili t ii b l l Fl h i t l t– 98% dintre utilizatorii web au player-ul Flash instalat
• Dezvoltare rapidăD l t• Deployment uşor– Flash creează automat pagini web
Curs Programare Web, anul 4 C5 – Curs 9 26
• ...
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Mediul FlashMediul FlashMediul FlashMediul Flash
Curs Programare Web, anul 4 C5 – Curs 9 27
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Ce este Flash?Ce este Flash?Ce este Flash?Ce este Flash?Drawing Palettes
Timeline
Stage
Vector Graphics
ActionScriptȘi alte terminologii...
Curs Programare Web, anul 4 C5 – Curs 9 28
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Scena (stage)Scena (stage)Scena (stage)Scena (stage)• Conține obiecte, imagini,
t d tcomponente desenate, butoane, etc.
• Locul unde desenele pot fi create, modificate, șterse, etc.
• Obiectele desenate pot pdepăși limitele scenei, dar în cadrul filmului nu va fi redat nimic din ce este în afara scenei.
Curs Programare Web, anul 4 C5 – Curs 9 29
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
ScenaScenaScenaScena• Utilizatorul poate modifica dimensiunea scenei,
culoarea de fundal, numărul de cadre pe secunde (calitatea filmului creat în final) și altele prin accesarea meniului:– Modify ➔ Document...
Curs Programare Web, anul 4 C5 – Curs 9 30
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
ScenaScenaScenaScena
• Se poate folosi instrumentul “mână” pentru navigarea înpentru navigarea în cadrul scenei.
• Se pot folosiSe pot folosi instrumentele “lupă” pentru mărirea sau micșărarea elementelormicșărarea elementelor de detalii.
• O anumită zonă poate fiO anumită zonă poate fi adusă în prim-plan prin trasarea unui dreptunghi în jurul acesteiaîn jurul acesteia.
Curs Programare Web, anul 4 C5 – Curs 9 31
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Grafică vectorialăGrafică vectorialăGrafică vectorialăGrafică vectorială
Toate formele în Flash sunt formate din puncte, linii și curbe.Toate formele în Flash sunt formate din puncte, linii și curbe. Chiar și acest exemplu:
Curs Programare Web, anul 4 C5 – Curs 9 32
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Grafică vectorialăGrafică vectorialăGrafică vectorialăGrafică vectorială• Deoarece formele sunt formate din puncte, Flash
– Diferențiază marginile obiectelor
– Diferențiază fiecare punct de altele– Diferențiază fiecare punct de altele
• Toate formele au o culoare de desenare a i ii i lt f l ită t i t i imarginii și o alta folosită pentru interior și un
format de linie– Acestea pot fi modificate din fereastra de proprietăți
Curs Programare Web, anul 4 C5 – Curs 9 33
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Linii libere și formeLinii libere și formeLinii libere și formeLinii libere și forme
Puteți modifica
Creion
scena/formele curent disponibile din scenăscenă.
Opțiune ce permite pț pobținerea unor forme mai fine sau mai drepte.
Curs Programare Web, anul 4 C5 – Curs 9 34
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Linii, ovale și dreptunghiuriLinii, ovale și dreptunghiuriLinii, ovale și dreptunghiuriLinii, ovale și dreptunghiuriLinie
Ovale și dreptunghiuriOvale și dreptunghiuri
Pentru dreptunghi raza
Opțiuni
Pentru dreptunghi, raza colțului
Curs Programare Web, anul 4 C5 – Curs 9 35
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Linia timpuluiLinia timpuluiLinia timpuluiLinia timpului
• O vedere asupra tuturor cadrelor (frames) și p ( ) șnivelelor (layers) din film.
• Pentru că în final conținut poate fi generat șiPentru că în final conținut poate fi generat și programat, conținutul de aici nu reprezintă neapărat și cel final al filmului.neapărat și cel final al filmului.
Curs Programare Web, anul 4 C5 – Curs 9 36
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
CadreCadreCadreCadre
Cadrul 1 este
Acesta este un cadrucurent selectat Acest film are 12
cadre pe secundă
Curs Programare Web, anul 4 C5 – Curs 9 37
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
CadreCadreCadreCadre
• Se poate folosi meniul insert pentru a insera sau șterge cadreșterge cadre.
• Să presupunem că inserăm 11 noi cadre.
Curs Programare Web, anul 4 C5 – Curs 9 38
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
CadreCadreCadreCadre
Punctul negru C d l i 2 12 l i
Dreptunghiul alb gol î ă ă lu ctu eg u
înseamnă că cadrul 1 este un cadru cheie (keyframe)
Cadrele gri 2-12 au același conținut ca și cadrul 1, cel cheie.
înseamnă că acela este sfârșitul cadrelor.
(keyframe)
Un cadru cheie definește conținutul tuturor cadrelor ce
Curs Programare Web, anul 4 C5 – Curs 9 39
ș țîl urmează, până la următorul cadru cheie.
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
CadreCadreCadreCadreÎn cadrul 1, cel cheie, avem un oval negru în cadrul scenei.Toate cadrele griToate cadrele gri următoare vor avea același oval negru. ș g
Ultimul cadru având ovalul negru este al 12-ovalul negru este al 12lea, ce se remarcă prin dreptunghiul alb. Acest film va afișa ovalul negru timp de 12 cadre (1 secundă) și apoi se va
Curs Programare Web, anul 4 C5 – Curs 9 40
(1 secundă) și apoi se va întoarce la cadrul 1.
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
CadreCadreCadreCadre• Dacă se dorește
modificarea aceeamodificarea aceea ce afișează cel de-al 13-lea cadru, putem pinsera un nou “cadru cheie”Inserarea copiază• Inserarea copiazăconținutul cadrului cheie anterior.
• Prin modificarea scenei putem afecta
ți t l tconținutul curent afișat începând cu noul cadru cheie.noul cadru cheie.
Curs Programare Web, anul 4 C5 – Curs 9 42
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
CadreCadreCadreCadreAcum, primele 12 cadre Al 13-lea cadru are un au un oval negru. oval roșu.
Curs Programare Web, anul 4 C5 – Curs 9 43
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Nivele (layers)Nivele (layers)Nivele (layers)Nivele (layers)
• Precum Photoshop Illustrator etcPrecum Photoshop, Illustrator, etc. și Flash suportă nivele (layers) de conținutconținut.
• Nivelele sunt parte din timeline.• Nivelele pot fi încuiate, ascunse și
organizate în foldere.g• Nivelele determină ordinea în care
se afișează conținutul fiecăruise afișează conținutul fiecărui cadru.
Curs Programare Web, anul 4 C5 – Curs 9 44
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
NiveleNiveleNiveleNiveleNivelul 1 a fost redenumit în Noseși a fost adăugat un al doilea nivelun al doilea nivel, numit Face
Apoi a fost desenat un dreptunghi maroun dreptunghi maro în nivelul Face.
Curs Programare Web, anul 4 C5 – Curs 9 45
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
NiveleNiveleNiveleNivele
Apoi s-a adăugatApoi s-a adăugat nu nivel Eyes, în care au fost desenați ochii și gura.
Ochii și gura.
Curs Programare Web, anul 4 C5 – Curs 9 46
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
RezultatRezultatRezultatRezultat
Curs Programare Web, anul 4 C5 – Curs 9 47
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
SimboluriSimboluriSimboluriSimboluri
• Simbolurile pot fi văzute ca echivalentul claselorechivalentul claselor. – O singură clasă Button ➔ mai
multe instanțe Buttonmulte instanțe Button
• Simboluri = Timeline + SScenă + Nivele separate– Echivalentul unor filme în
interiorul unor filme.
Curs Programare Web, anul 4 C5 – Curs 9 48
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Instanțe de simboluriInstanțe de simboluriInstanțe de simboluriInstanțe de simboluri
• Pornind de la simboluri se pot obține instanțe ale acestora (așa cum se instanțiază o clasă)acestora (așa cum se instanțiază o clasă)
• Toate instanțele unui simbol păstrează aceleași i tăți i ții d t d l t fi dproprietăți, animații, cod, etc., dar ele pot fi de
exemplu în diferite momente ale liniei timpului la t d tun moment dat.
Curs Programare Web, anul 4 C5 – Curs 9 49
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Tipuri de Tipuri de ppsimbolurisimboluri
• GraphicGraphic– Operează sincronizat cu linia principală a
timpului din cadrul filmului Folosite pentrutimpului din cadrul filmului. Folosite pentru imagini sau animații reutilizabile.
M i Cli• Movie Clip– Film în interiorul filmului. Are propria linie a
timpului, nu neapărat sincronizată cu cea principală a filmului.
– Adecvat pentru obiecte interactive și sunete.Curs Programare Web, anul 4 C5 – Curs 9 50
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Tipuri de Tipuri de ppsimbolurisimboluri
• ButtonsButtons– Simbol special (de tip Movie Clip) ce poate ă d î l l ă ă i l l irăspunde în plus la apăsări ale mouse-ului,
deplasări ale cursorului și alte acțiuni.– Se pot defini imagini pentru diversele stări ale
unui buton; acțiunile particulare ale butonului ; ț ppot fi asignate unor instanțe de acest tip.
Curs Programare Web, anul 4 C5 – Curs 9 51
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Crearea unui simbolCrearea unui simbolCrearea unui simbolCrearea unui simbolUn simbol gol poate fi creat din Insert→Insert SymbolSymbol...
În acest caz a fostÎn acest caz a fost selectat ochiul (prin încuierea nivelelor nasului și feței și selectarea unui dreptunghi în juruldreptunghi în jurul ochiului) și alegem din meniu Convert to
Curs Programare Web, anul 4 C5 – Curs 9 52
Symbol.
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
BibliotecaBibliotecaBibliotecaBibliotecaAcum ochiul apare în Library ca un simbol nou.Bibli iBiblioteca conține toate simbolurile curente ale documentului Flashdocumentului Flash.
Curs Programare Web, anul 4 C5 – Curs 9 53
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
O Instanță a unui SimbolO Instanță a unui SimbolO Instanță a unui SimbolO Instanță a unui Simbol
Acum ochiul stâng este o instanță a simbolului AnimatedEye
După ștergerea ochiului drept, putem trage o nouă AnimatedEye. instanță a simbolului AnimatedEye din bibliotecă pentru ochiul dreptpentru ochiul drept.
În acest moment avem două instanțe ale simbolului pentru ochiul animat, fiecare având propria poziție dar partajândpropria poziție, dar partajând aceiași linie a timpului, nivele, etc.
Curs Programare Web, anul 4 C5 – Curs 9 54
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Numirea instanțelorNumirea instanțelorNumirea instanțelorNumirea instanțelorEste important să numiți o instanță dacă doriți să o referiți ulterior în cod.
Vom numi instanta ochiului stâng leftEye prin g y pselectarea ochiului și modificarea proprietății name din meniulname din meniul corespunzător.
V f l i lVom face același lucru pentru ochiul drept.
Curs Programare Web, anul 4 C5 – Curs 9 55
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Editarea unui simbolEditarea unui simbolEditarea unui simbolEditarea unui simbolPentru editarea unui simbol se execută dublu-click pe simbolul dinexecută dublu-click pe simbolul din bibliotecă (numele sau imaginea).
R ți ă li i ti l iRemarcați că linia timpului, nivelele și scena sunt specifice simbolului
Vederea este acum din
specifice simbolului AnimatedEye.
interiorul scenei principale. Vă puteți întoarce la scena
i i lă fă â d li k i i
Curs Programare Web, anul 4 C5 – Curs 9 56
principală făcând click aici.
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Editarea unui simbolEditarea unui simbolEditarea unui simbolEditarea unui simbol
Să facem ochii să clipească Îl facem cadru cheie șiSă facem ochii să clipească la fiecare 1/12 secunde.
Facem dublu-click pe al 12-
Îl facem cadru cheie și modificăm ochiul astfel încât să pară că clipește.Facem dublu click pe al 12
lea cadru și inserăm un nou cadru intermediar.
Curs Programare Web, anul 4 C5 – Curs 9 57
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
ActionScriptActionScriptActionScriptActionScript• Să facem ochiul să urmărească cursorul mouse-
ului folosind ActionScript, limbajul de scripting din Flash.
• ActionScript este orientat spre evenimente și are două tipuri principale de evenimente:două tipuri principale de evenimente:– Evenimente pentru Butoane (apăsat, eliberat,...)
– Evenimente pentru obiecte MovieClip (încărcare, enterFrame, mouseMove...)
• Fiecare eveniment are propria sintaxă.
Curs Programare Web, anul 4 C5 – Curs 9 58
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
A ti S i tA ti S i tActionScriptActionScript
• Codul ActionScript poate fi asociat cu cadre, i t ț M i Cli i B tinstanțe Movie Clips și Butoane.
• Codul este executat chiar înainte ca un cadru să fie afișat.
• Cadrele ce urmează unui cadru cheie partajează• Cadrele ce urmează unui cadru cheie partajează codul acelui cadru cheie.
Curs Programare Web, anul 4 C5 – Curs 9 59
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Fereastra ActionFereastra ActionFereastra ActionFereastra ActionExistă două moduri de editare.
În modul expert putețiÎn modul expert puteți tasta cod direct, folosind instrumente precum I t lliIntellisense pentru a vedea metodele disponibiledisponibile. În modul normal puteți prelua acțiuni predefinite (drag&drop) din meniul “Actions”.
Curs Programare Web, anul 4 C5 – Curs 9 60
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Fereastra ActionFereastra ActionFereastra ActionFereastra Action
Codul prezentat în fereastra Actions depinde de p pselecția curentă din mediul Flash.
Cadrele individuale pot avea pasociat cod ActionScript. Acest lucru este reprezentat prin lit ‘ ’litera ‘a’
Pentru gestiunea codului, e indicat să creați un nivel special pentru
Îcod. În acest fel căutarea codului se limitează la codul corespunzător acestui nivel
Curs Programare Web, anul 4 C5 – Curs 9 61
corespunzător acestui nivel.
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Fereastra ActionFereastra ActionFereastra ActionFereastra Action
Codul prezentat în fereastra Actions depinde de
Obiectele Movie clip pot avea
p pselecția curentă din mediul Flash.
Obiectele Movie clip pot avea cod asociat, dar pot fi doar handlere corespunzătoare pevenimentelor specifice acestor obiecte.
Remarcați că codul corespunzător unui moviecorespunzător unui movie clip apare atunci când el este selectat.
Curs Programare Web, anul 4 C5 – Curs 9 62
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Urmărirea cursorului mouseUrmărirea cursorului mouse--uluiuluiUrmărirea cursorului mouseUrmărirea cursorului mouse uluiului
Pentru a face ca ochii să urmărească cursorul mouse-ului, vom introduce cod pentru gestiunea evenimentelor de mo se pentr fiecare dintre ceimouse pentru fiecare dintre cei doi ochi.
F t A ti t hi lFereastra Actions pentru ochiul stânga nu are încă nici un cod specificatspecificat.
Curs Programare Web, anul 4 C5 – Curs 9 63
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Urmărirea cursorului mouseUrmărirea cursorului mouse--uluiuluiUrmărirea cursorului mouseUrmărirea cursorului mouse uluiului
Handler-ul va fi automat apelat atunci când apare un eveniment d ide mișcare cursor mouse.
Curs Programare Web, anul 4 C5 – Curs 9 64
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Urmărirea cursorului mouseUrmărirea cursorului mouse--uluiuluiUrmărirea cursorului mouseUrmărirea cursorului mouse uluiului
x și y se_x și _y se referă la pozițiile x și y
Aceste două linii definesc două
ale ochiului stânga.
definesc două variabile xDeltași yDelta.
_root._xmouse se referă la poziția pe x curentă a
l i dcursorului de mouse.
Curs Programare Web, anul 4 C5 – Curs 9 65
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Urmărirea cursorului mouseUrmărirea cursorului mouse--uluiuluiUrmărirea cursorului mouseUrmărirea cursorului mouse uluiului
Această atan2()i t d ăvariabilă
definește unghiul
primește două direcții x și y și întoarce unghiul
Conversia de la radiani la unghiul. întoarce unghiul
în radiani. a ad a agrade.
Curs Programare Web, anul 4 C5 – Curs 9 66
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Urmărirea cursorului mouseUrmărirea cursorului mouse--uluiuluiUrmărirea cursorului mouseUrmărirea cursorului mouse uluiului
S t t ți iSetarea rotațieiochiului stânga la valoarea calculată în
Ajustare a defectelor de dvaloarea calculată în
grade. desenare.
Curs Programare Web, anul 4 C5 – Curs 9 67
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
RezultatRezultatRezultatRezultat
Curs Programare Web, anul 4 C5 – Curs 9 68
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
ButoaneButoaneButoaneButoane• Butoane sunt tipuri
speciale de Simboluri, ce au ,cadre corespunzătoarecorespunzătoare diverselor stări. Să facem nasul lui• Să facem nasul lui Rudolph un buton
i tiprin convertirea acestuia la un simbol.
Curs Programare Web, anul 4 C5 – Curs 9 69
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
ButoaneButoaneButoaneButoaneUn Buton are patru
d fi d fi i dcadre, fiecare definind aparența în stări diferite.
Up - folosit atunci când butonul mouse-ului nu este apăsateste apăsat. Over – cursorul mouse-ului este deasupra. p
Down – cursorul mouse-ului este apăsat. p
Hit – definește zona ce poate fi apăsată din
Curs Programare Web, anul 4 C5 – Curs 9 70
poate fi apăsată din cadrul butonului.
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
UpUpUpUp
Cadrul pentru up va fiCadrul pentru up va fi nemodificat.
Curs Programare Web, anul 4 C5 – Curs 9 71
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
OverOverOverOver
Pentru a face cadrulPentru a face cadrul over vom insera un cadru cheie.
Modificăm culoarea de fundal - maro.
Dacă nu introducem cadrul cheie, modificarea afectează și cadrul upși cadrul up.
Curs Programare Web, anul 4 C5 – Curs 9 72
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
DownDownDownDown
Pentru cadrul down sePentru cadrul down se inserează un cadru cheie.
Modificăm din nou culoarea de fundal.
Curs Programare Web, anul 4 C5 – Curs 9 73
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Evenimente ButonEvenimente ButonEvenimente ButonEvenimente ButonPentru inserarea unui
i t teveniment pentru buton se selectează instanța NoseButtoninstanța NoseButton din scenă și se deschide fereastra Action.
Se folosește o metodă on(event) pentru a răspunde la apăsarela apăsare, eliberare, rollOver, etc.
Curs Programare Web, anul 4 C5 – Curs 9 74
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Evenimente ButonEvenimente ButonEvenimente ButonEvenimente ButonCând e apăsat,
hiiochii vor merge la cadrul 12 (clipitul) și se vor(clipitul) și se vor opri din animat.
Când cursorul este eliberat, ochii vor merge l d l 1 ila cadrul 1 și vor reîncepe animația.
Curs Programare Web, anul 4 C5 – Curs 9 75
animația.
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Diferențe în Action Script 3Diferențe în Action Script 3Diferențe în Action Script 3Diferențe în Action Script 3stage.addEventListener(MouseEvent.MOUSE_MOVE, myButtonFunction);
function myButtonFunction(event: MouseEvent) {function myButtonFunction(event: MouseEvent) {var xDelta:int = stage.mouseX - leftEye.x;var yDelta:int = stage.mouseY - leftEye.y;var degrees:int = (Math.atan2(yDelta, xDelta) * 180) / Math.PI;leftEye.rotation = degrees - 35;D l h ExDelta = stage.mouseX - rightEye.x;
yDelta = stage.mouseY - rightEye.y;degrees = (Math.atan2(yDelta, xDelta) * 180) / Math.PI;rightEye.rotation = degrees - 50;event.updateAfterEvent();p ();
}
nose.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownHandler);nose.addEventListener(MouseEvent.MOUSE_UP, onMouseUpHandler);
function onMouseDownHandler(e:MouseEvent):void {leftEye.gotoAndStop(12);rightEye.gotoAndStop(12);trace("press");
}}
function onMouseUpHandler(e:MouseEvent):void {leftEye.gotoAndPlay(1);rightEye.gotoAndPlay(1);
Curs Programare Web, anul 4 C5 – Curs 9 76
g y g y( )trace("up");
}
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
ReferinţeReferinţee e ţee e ţe
• http://www.actionscript.org/resources/categp p g gories/Tutorials/
• http://www actionscript org/• http://www.actionscript.org/• http://actionscriptexamples.com/• http://www.adobe.com/support/flash/action
scripts/actionscript tutorial/_scripts/actionscript_tutorial/
Curs Programare Web, anul 4 C5 – Curs 9 77