Rms Uvod

Razvoj multimedijalnih sistema
dr Gordana Pavlovi-Laeti, Matematiki fakultet, Beograd, 2010.
Multimedija
Multimedija je zajedniki naziv za medije koji kombinuju vie tipova pojedinanih medija, da bi se stvorila jedna celina. Multimedija najee znai interaktivni raunarski projekat u kome se koristi tekst, zvuk, animacija, video, film, Primeri: interaktivne enciklopedije, obrazovni kompakt diskovi, DVD-i,
Multimedija
Pet stubova multimedije audio zapis video zapis tekst grafika animacija Multimedija se sve vie koristi u kolstvu jer uenici bolje i bre ue koristei ove metode a nastavni materijal je zanimljiviji i moe biti zabavan.
Alati za kreiranje dinamikih multimedijalnih veb strana

Animirane slike (GIF, Graphics Interchange Format) Java apleti Popularni komercijalni programi koji se esto koriste za stvaranje inetraktivnih i animiranih veb strana: su: Macromedia Flash i Director, Sony Sound Forge, Microsoft PowerPoint, Adobe Photoshop, Adobe Premiere, i drugi.
Alati za kreiranje dinamikih multimedijalnih veb strana

Na primer, FLASH
Uitavaju se bre od animiranih slika Doputaju interaktivnost Ne zahtevaju programerske vetine (vs. java apleti) Primer: martini Primer: mii
Sinhronizovani jezik za integraciju multimedija SMIL (smile)

(Synchronized Multimedia Integration Language)
http://www.w3schools.com/smil/default.asp http://audio-video-images.indelv.com/smilstandards-and-microsoft-internet-explorer-6-7and-8.html
ta je SMIL?
SMIL je jednostavni HTML-like jezik za opisivanje audiovizuelnih veb prezentacija SMIL omoguuje integraciju audio, video, slika, teksta i drugih tipova medija SMIL je napisan u XML SMIL prezentacije mogu se pisati korienjem tekst editora SMIL je W3C preporuka
Jednostavni SMIL primer

<smil> <body> <seq repeatCount="indefinite"> <img src="image1.jpg" dur="3s" /> <img src="image2.jpg" dur="3s" /> </seq> </body> </smil>
ta omoguuje SMIL?
SMIL moe da se koristi za kreiranje Internet ili Intranet prezentacija SMIL moe da se koristi za kreiranje slide-show prezentacija SMIL se opisuje kao Internet odgovor na PowerPoint SMIL prezentacija moe istovremeno da prikae vie datoteka razliitih tipova (text, video, audio...) SMIL prezentacija moe da prikae datoteke sa razliitih veb servera SMIL prezentacija moe da sadri hiperveze na druge SMIL prezentacije SMIL prezentacije mogu da sadre kontrolnu dugmad (stop, start, next, ...) SMIL ima funkcije za definisanje sekvenci i trajanja elemenata SMIL ima funkcije za definisanje pozicije i vidljivosti elemenata
SMIL i W3C
SMIL je W3C preporuka W3C razvija SMIL od 1997. kao jezik za koreografiju multimedijalnih prezentacija u kojima se zvuk, video, tekst i grafika kombinuju u realnom vremenu SMIL datoteka ima ekstenziju *.smil
Kako izvriti SMIL datoteku?

Da bi se izvrila SMIL prezentacija potreban je SMIL player. Na Internetu mogu da se na u razni SMIL players: RealOne Platform - RealNetworks ima punu podrku za SMIL 2.0 GRiNS for SMIL-2.0 - Oratrix obezbe uje SMIL 2.0 player SMIL Player - InterObject podrava osnovni profil SMIL 2.0 U Internet Explorer verziji 5.5 ili vioj, SMIL elementi mogu da se unesu u HTML datoteke a IE moe da prikazuje SMIL prezentacije unutar HTML datoteka.
Dodavanje referenci
Da bi se koristili SMIL elementi u HTML-u, mora da se definie "time prostor imena (namespace) to omoguuje Internet Explorer-u da prepozna te elemente. To se radi na sledei nain:
Dodaje se definicija prostora imena <html> etiketi. Dodaje se <?import> element za unoenje (import) prostora imena "time".
Da bi se dodavali SMIL atributi standardnim HTML elementima, mora da se definie klasa "time to omoguuje Internet Explorer-u da prepozna te atribute. To se radi na sledei nain:
Dodaje se element <style> za definisanje klase "time".
Dodavanje referenci: struktura

<html xmlns:time="urn:schemas-microsoftcom:time"> <head> <?import namespace="time" implementation="#default#time2"> <style>.time {behavior: url(#default#time2)} </style> </head>
Dodavanje SMIL elemenata

Da bi se prikazala SMIL prezentacija u HTML-u, potrebno je SMIL elementima dodati prefiks a HTML elementima atribut klase: <time:seq repeatCount="indefinite"> <img class="time" src="image1.jpg" dur="3s" /> <img class="time" src="image2.jpg" dur="3s" /> </time:seq> U ovom primeru dodali smo HTML <img> elementima atribut klase (class="time), i "time" prefiks SMIL elementu (seq) Prostor imena i klasa ne moraju da se zovu "time". Moe da se koristi bilo koje ime. SMIL je opisan odgovarajuom XML Schema.
Kompletan Internet Explorer primer

<html xmlns:time="urn:schemas-microsoft-com:time"> <head> <?import namespace="time" implementation="#default#time2"> <style>.time {behavior: url(#default#time2)} </style> </head> <body> <time:seq repeatCount="indefinite"> <img class="time" src="image1.jpg" dur="3s" /> <img class="time" src="image2.jpg" dur="3s" /> </time:seq> </body> </html>
Prikaz
Kada poeti?
Poetak (begin="2s") definie kada e element postati vidljiv (poetak prikazivanja): <html> <head> <style>.t {behavior: url(#default#time2)} </style> </head> <body> <img class="t" src="image1.jpg" begin="2s" /> </body> </html> Click here to try it yourself.
SMIL paralelizam - simultani prikaz: primer

<html xmlns:t="urn:schemas-microsoft-com:time"> <head> <?import namespace="t" implementation="#default#time2"> <style>.t {behavior: url(#default#time2)} </style> </head> <body> <par> <t:audio src="liar.wav" repeatCount="indefinite" type="wav" /> <t:seq repeatCount="indefinite"> <h2 class="t" dur="1s"> I will display for one second</h2> <h2 class="t" dur="2s"> I will display for two seconds</h2> </t:seq> </par> </body> </html>
Primer: Simultani prikaz

Prikaz (wav, tekst; startovati 2 puta!)
(WAV (or WAVE), skraeno od Waveform audio format, Microsoft-ov i IBM-ov audio format standard za zavuka na PC).
Click here to try it yourself (img, tekst)
SMIL Prelazi (Transitions)

Prelazi mogu da generiu efekte ble enja i brisanja elemenata. Prelazi pripadaju SMIL-u 2.0 Prelazi nisu deo specifikacije SMIL-a 1.0 Internet Explorer 6 podrava prelaze bazirane na SMIL 2.0 specifikaciji. Prelazi se implementiraju elementom <transitionfilter>.
Primer: from, to
<html xmlns:t="urn:schemas-microsoft-com:time"> <head> <?import namespace="t" implementation="#default#time2"> <style>.t {behavior: url(#default#time2)} </style> </head> <body> <t:transitionfilter targetelement=ibi" type="clockWipe" begin=ibi.begin" dur="2s" mode=in from=0.4 to=0.6/> <img id=ibi" class="t" src=image1.jpg" dur="4s" width="128" height="107" /> </body> </html> Prikaz
SMIL elementi medija

SMIL koristi elemente medija za opisivanje sadraja. Mogu se koristiti sledei elementi medija za ukljuenje objekata medija u SMIL dokument: element opis <animation> definie animaciju <audio> definie audio iseak <brush> definie etku - boju ispunjavanja ili oblika <img> definie sliku <param> definie parametar nekog drugog elementa medija. Na primer, <param name="color" value="red" /> <ref> definie referencu na generiki objekat medija. Koristi se kad tip medija nije dobro definisan <text> definie tekst <video> definie video
Element medija <animation>

Element <animation> definie referencu na objekat animacije zapamen kao vektorska grafika (npr. svg scalable vector graphics) ili neki drugi animirani format. Na primer, Primer Ukljuenje SVG animacije u HTML: <embed> (nije html element) ILI <iframe> html element Obavezno instaliran SVG viewer (npr AdobeSVG Viewer, ASV) Element <animation> ne treba meati sa elementom <animate>. Element <animation> definie objekat animacije po referenci. Element <animate> je jedan od elemenata koji definiu animaciju atributa i svojstava drugih elemenata (teksta, slike, i sl).
<animation src="http://www.w3schools.com/svg/animatemotion_2.svg" type="svg" /> Nije jo u HTML-u (SMIL ELEMENT!!!)
Funkcija animacije
Svaka funkcija animacije definie vrednost atributa u pojedinanom vremenskom trenutku. Vremenski period je trajanje (duration). Animacija se opisuje ili kao lista vrednosti (values), ili pomou from, to i by vrednosti. Atributi funkcije animacije from
Poetna vrednost animacije
to
Zavrna vrednost animacije
by
Relativni korak animacije
values
Lista od jedne ili vie vrednosti razdvojene taka-zapetom;
Funkcija animacije - primeri

Primer "from-to animacije" animira irinu IMG elementa u toku 4 sekunde, poevi od irine 100 do irine 400. <time:img src=image2.jpg> <time:animate attributeName="width" from=100" to=400" dur=4s"/> </time:img> Vizuelni prikaz (time ns) Vizuelni prikaz (html ns) Primer "from-by animacije" animira irinu IMG elementa u toku 4 sekunde, poevi od 100 do irine 400. <time:img src=image2.jpg> <time:animate attributeName="width" from=100" by=300" dur=4s"/> </time:img> Vizuelni prikaz (time ns) (superpozicija: from by - to) Vizuelni prikaz (html ns)
Set element - primeri

Postavljanje atributa veliine, vrste i boje fonta elementa TEXT
<t:text > Promena fonta <t:set attributeName="font-size" to="100" begin="1s" dur="5s" /> <t:set attributeName="font-family" to="Comic Sans MS" begin="1s" dur="4s" /> <t:set attributeName="color" to="red" begin="1s" dur="3s" /> </t:text> Vizuelni prikaz
Element medija <audio>

Element <audio> definie referencu na audio objekat zapamen kao snimljeni audio (npr. wav). Primer: <html xmlns:t="urn:schemas-microsoft-com:time"> <head> <?import namespace="t" implementation="#default#time2"> </head> <body> <t:audio src="liar.wav" repeatCount="indefinite" type="wav" /> </body> </html> audio prikaz
Element medija <video> Primer: Windows media video (wmv)

<html xmlns:t="urn:schemas-microsoft-com:time"> <head> <?import namespace="t" implementation="#default#time2"> </head> <body> <t:video src="http://www.ananova.com/about/vap_windows_check. wmv" repeatCount="indefinite" type="wmv" /> </body> </html>
Click here to try it yourself.
Scalable Vector Graphics (SVG)

XML Graphics for the Web
Scalable Vector Graphics

SVG je jezik za opisivanje dvodimenzione grafike i grafikih aplikacija u XML-u. SVG 1.1 je W3C preporuka
SVG primeri: oblici (shapes)

A rectangle (http://www.w3schools.com/svg/rect1.svg), matf server A rectangle with opacity (http://www.w3schools.com/svg/rect2.svg), matf server A rectangle with opacity 2 (http://www.w3schools.com/svg/rect3.svg) A rectangle with rounded corners (http://www.w3schools.com/svg/rect4.svg) A circle (http://www.w3schools.com/svg/circle1.svg) An ellipse (http://www.w3schools.com/svg/ellipse1.svg) Three ellipses on top of each other (http://www.w3schools.com/svg/ellipse2.svg) Two ellipses (http://www.w3schools.com/svg/ellipse3.svg) A line (http://www.w3schools.com/svg/line1.svg) A polygon with three sides (http://www.w3schools.com/svg/polygon1.svg) A polygon with four sides (http://www.w3schools.com/svg/polygon2.svg) A polyline (http://www.w3schools.com/svg/polyline1.svg) A spiral (http://www.w3schools.com/svg/path2.svg)
SVG primeri: filteri

GaussianBlur filter drugi GaussianBlur filter Blend filter ColorMatrix filter ComponentTransfer filter Offset filter Morphology filter
SVG primeri: gradienti

Grad linear (horizontal gradient) Grad linear (vertical gradient) Grad radial
SVG i HTML
Tri razliita metoda za ukljuenje SVG datoteka u HTML strane <embed> etiketa
Podrana u svim glavnim razgledaima. Adobe SVG Viewer preporuuje korienje EMBED etikete za ukljuenje SVG u HTML strane! Ipak, validni XHTML ne doputa <embed> jer nije naveden ni u jednoj HTML specifikaciji.
<object> etiketa
<object> etiketa je standardna etiketa HTML4. Podravaju je svi noviji razgledai. Napomena: Najnovija verzija Adobe SVG Viewer ne radi sa <object> etiketom (bar u Internet Explorer)!
<iframe> etiketa
<iframe> etiketa radi u veini razgledaa Sintaksa: <iframe src="rect.svg" width="300" height="100"> </iframe>
Primer: tri elipse jedna preko druge

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/> <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/> <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/> </svg> Prikaz (sa opacity = 0.5?)
Putanja: <path> etiketa

Sledee komande mogu da se koriste za podatke putanje:
M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Belzier curve T = smooth quadratic Bezier curveto A = elliptical Arc Z = closepath
Napomena: Sve prethodne komande mogu da se zadaju i malim slovima. Velika slova znae apsolutno pozicioniranje, mala slova relativno. Atribut d: putanja
Putanja: <path> etiketa

Primer <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M250 150 L150 350 L350 350 Z" /> </svg>
Prethodni primer definie putanju koja poinje na poziciji 250 150 linijski do pozicije 150 350 zatim odatle linijski do 350 350 i najzad se zatvara u 250 150.
Prikaz C: kubna Bezier kriva kroz treu taku, pri emu su prva i druga taka poetna i krajnja kontrolna taka Prikaz Bezier kriva
SVG filteri
Na svakom SVG elementu mogue je koristiti viestruke filtere!
Gaussian Blur
Etiketa <filter> koristi se za definisanje SVG filtera. Etiketa <filter> ima obavezni atribut id koji identifikuje filter koji e se primeniti na grafiku. Etiketa <filter> mora da se umetne unutar etikete <defs>. Primer:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="Gaussian_Blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="3" /> </filter> </defs> <ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000; stroke-width:2;filter:url(#Gaussian_Blur)"/> </svg>
Jo neki SVG elementi

animate animira atribut ili svojstvo u vremenu animateColor navodi transformaciju boje u vremenu animateMotion proizvodi kretanje elementa du putanje kretanja animateTransform transformacija atributa elementa
animateMotion, animateTransform
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(100,100)"> <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG! <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze"/> <animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze"/> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze"/> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze"/> </text> </g> </svg> Prikaz Tekst+pravougaonik
Primeri
<rect transform="skewX(30)"...> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="90" dur="5s" additive="replace" fill="freeze"/> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="5s" additive="replace" fill="freeze"/> </rect> Prikaz <rect transform="skewX(30)"...> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="90" dur="5s" additive="sum" fill="freeze"/> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="5s" additive="sum" fill="freeze"/> </rect> Prikaz

Rms Uvod

Uploaded by

Copyright:

Available Formats

You might also like

Rms Uvod

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Rms Uvod

Uploaded by

Copyright:

Available Formats

Razvoj multimedijalnih sistema

dr Gordana Pavlovi-Laeti, Matematiki fakultet, Beograd, 2010.

Alati za kreiranje dinamikih multimedijalnih veb strana

Alati za kreiranje dinamikih multimedijalnih veb strana

Sinhronizovani jezik za integraciju multimedija SMIL (smile)

Jednostavni SMIL primer

Kako izvriti SMIL datoteku?

Dodavanje referenci: struktura

Dodavanje SMIL elemenata

Kompletan Internet Explorer primer

SMIL paralelizam - simultani prikaz: primer

Primer: Simultani prikaz

Click here to try it yourself (img, tekst)

SMIL Prelazi (Transitions)

SMIL elementi medija

Element medija <animation>

Funkcija animacije - primeri

Set element - primeri

Element medija <audio>

Element medija <video> Primer: Windows media video (wmv)

Scalable Vector Graphics (SVG)

Scalable Vector Graphics

SVG primeri: oblici (shapes)

SVG primeri: filteri

SVG primeri: gradienti

Primer: tri elipse jedna preko druge

Putanja: <path> etiketa

Putanja: <path> etiketa

Jo neki SVG elementi

You might also like