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


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



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



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



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



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


şi 44 KHz– Calitate vs. dimensiunea fişierului

de o secundă, 2 Hz la o jumătate desecundă, etc.


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



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, ,


* http://wiki.audacityteam.org/index.php?title=Sample_Rates


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



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>



Î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ă



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


Comportamentul implicit variază de la browser la browser


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



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>



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>



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



ExempluExempluExempluExemplu



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


g y ş p ţ şrezultat.


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



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


</noembed>


Rezultat:Rezultat:Rezultat:Rezultat:



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


folosit în astfel de cazuri ar fi tehnologia JavaWS


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>



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>



Exemplu:Exemplu:Exemplu:Exemplu:



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


• ...


Mediul FlashMediul FlashMediul FlashMediul Flash



Ce este Flash?Ce este Flash?Ce este Flash?Ce este Flash?Drawing Palettes

Timeline

Stage

Vector Graphics

ActionScriptȘi alte terminologii...



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.



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



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.



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:



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



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.



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



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.



CadreCadreCadreCadre

Cadrul 1 este

Acesta este un cadrucurent selectat Acest film are 12

cadre pe secundă




• Se poate folosi meniul insert pentru a insera sau șterge cadreșterge cadre.

• Să presupunem că inserăm 11 noi cadre.




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


ș țîl urmează, până la următorul cadru cheie.


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


(1 secundă) și apoi se va întoarce la cadrul 1.


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.



CadreCadreCadreCadreAcum, primele 12 cadre Al 13-lea cadru are un au un oval negru. oval roșu.



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.



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.



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.



RezultatRezultatRezultatRezultat



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.



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.



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


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.



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


Symbol.


BibliotecaBibliotecaBibliotecaBibliotecaAcum ochiul apare în Library ca un simbol nou.Bibli iBiblioteca conține toate simbolurile curente ale documentului Flashdocumentului Flash.



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.



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.



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


principală făcând click aici.


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.



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



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.



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



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


corespunzător acestui nivel.


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.



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.




Handler-ul va fi automat apelat atunci când apare un eveniment d ide mișcare cursor mouse.




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.




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.




S t t ți iSetarea rotațieiochiului stânga la valoarea calculată în

Ajustare a defectelor de dvaloarea calculată în

grade. desenare.



RezultatRezultatRezultatRezultat



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.



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


poate fi apăsată din cadrul butonului.


UpUpUpUp

Cadrul pentru up va fiCadrul pentru up va fi nemodificat.



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.



DownDownDownDown

Pentru cadrul down sePentru cadrul down se inserează un cadru cheie.

Modificăm din nou culoarea de fundal.



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.



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.


animația.


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


g y g y( )trace("up");

}


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/


elemente multimedia în programarea...

Documents