dispence leksioneshpdf

1

Dispence leksionesh

Lenda CS323: Animacione Kompjuterike

Alma Bregaj

2

Permbajtja e leksionesve per kursin CS 323 Animacione kompjuterike eshte si me poshte:

Hyrje ne Animacionet kompjuterike

Pjesa 1: OPEN GL

Perseritje(Provimi1)

Pjesa2: FLASH CS3

Perseritje(Provimi2)

Pjesa4: 3D STUDIO MAX

Perseritje(Projekti)

Perseritje perfundimtare(Provim final)

4

PJESA 1

OPENGL

Sqarim: Ne kete pjese do te punohet me gjuhen e progrsmimit C++, Shkarkoni ne rrjet DevCpp dhe

librarite glut dhe opengl, te gjitha jane falas dhe mund te shkarkohen shume thjeshte.

5

Kapitulli 1. Pikselat dhe format

Computer Graphics (ose CG) jane imazhet e gjeneruara ose te modifikuara ne nje kompjuter.Keto

imazhe mund te jene imazhe te te dhenave reale ose imazhe te nje bote te fantazuar.

Per mesuesit, CG eshte nje mjet shume i mire per te paraqitur ne menyre vizuale konceptet per

studentet. Ne biznes, CG perdoret per te paraqitur skica dhe grafike per te analizuar te dhenat. CG

perdoret ne gjithashtu ne video games, efekte speciale per filma, reklama etj.

Deri para 10 vjetesh CG ishte e limituar vetem ne kompjuterat workstations, e disponueshme vetem per

nje elite te vogel. Tani, me avancimin e fuqise se procesimit te PC-ve dhe kartave grafike 3D edhe nje

studente gjimnazi mund te punoje nga PC per te krijuar produkte profesionale cilesore.

Qellimi i ketij kursi eshte qe tju tregoj juve principet baze te grafikeve kompjuterike moderrne.

Imagjinoni se si do te ishte bota nese kompjuterat nuk do te mund te vizatonin figura ne ekran. Nuk do

te ekzistonte e gjithe fusha e Computer Graphics, sistemet CAD, video game, filmat 3D, atehere

kompjuterat do te ishin me keq sesa ishin e vitet 1960 – thjeshte makina qe procesojne te dhena me

monitore qe shfaqin vetem tekste.

Sot kompjuterat bejne te mundur vizatimin e figurave. Eshte e rendesishme te kuptohet se si e ruajne

imazhin kompjuterat e sotem dhe se si vizatojne imazhe grafike. Procesi eshte shume ndryshe nga

menyra se si e bejne njerezit kete proces. E para, eshte problemi i vendosjes se imazhit ne ekran.

Nje ekran kompjuteri permban me mijra pika drite te vogla qe quhen piksela.

Per te shfaqur nje figure kompjuteri duhet te jete i afte per te kontrolluar ngjyren e cdo pikseli.

Se dyti, kompjuteri duhet te dije se si ti organizoje pikselat ne forma dhe imazhe kuptimplote. Nese ju

doni te vizatoni nje vije ose nje rreth ne ekran, si do te mund ta beje kompjuteri kete gje?

Pergjigjet e ketyre pyetjeve formojne bazat e ketij kapitulli. Ju do te mesoni se si numrat qe shkruhen ne

frame buffer kontrollojne ngjyrat e pikselave ne ekran.

Do te shikojme konceptet e sistemit koordinativ dy-dimensional dhe si format 2D dhe objektet mund te

vizatohen dhe transformohen ne kete bote 2D. Gjithashtu do te njihemi me algoritmat me popullor qe

perdoren per te vizatuar forma baze sic jane vijat dhe rrathet ne kompjuter.

Eshte e rendesishme te kuptohet qe te gjitha principet e grafikeve 3D jane shtesa te grafikeve 2D. Nese

kuptohen konceptet ne boten 2D eshte me e thjeshte te kuptosh dhe te mesosh vizatimin ne 3D.

Blloku baze i ndertimit te te gjitha imazheve kompjuterike eshte piksel. Nje piksel eshte nje pike drite ne

ekranin e kompjuterit qe mund te vendoset ne ngjyra te ndryshme.

6

Nje imazh qe shfaqet ne kompjuter, pavarsisht sa kompleks eshte, gjithmone kompozohet nga rreshta

dhe kolona te ketyre pikselave, secila ka ngjyren e pershtatshme dhe intesitetin e duhur. Pra duhet te

vendosen ngjyrat e duhura ne vendet e duhura.

1.Sistemet e shfaqjes(Display) se kompjuterave

Monitori eshte nje nga paisjet me te rendesishme te kompjuterit. Ajo siguron outputin vizual nga

kompjuteri tek perdoruesi. Shumica e kompjuterave aktual personal dhe workstations perdorin

teknologjine Cathode Ray Tube (CRT) per shfaqjen e te dhenave te tyre.

Sic tregohet ne Fig.1.1, nje CRT koonsiston ne:

Nje electron gun qe emeton nje tufe elektronesh(rreze katodike)

Nje sistem devijimi dhe fokusimi qe drejton nje tufe te fokusuar elektronesh drejt

pozicioneve te specifikuara ne nje ekran fosforeshent.

Nje ekran fosforeshent qe emeton nje spot te vogel drite proporcionale me intesitetin e

tufes qe e gjuan ate.

Drita e emetuar nga ekrani eshte ajo qe shikoni ju ne monitor.

Fig.1.1: Nje tub me rreze Katodike

Pika qe mund te ndricohet nga rrezja e elektronit quhet nje piksel. Intesiteti i drites se emetuar ne cdo

piksel mund te ndryshohet duke ndryshuar numrin e elektroneve qe godasin ekranin. Sa me shume

elektrone te godasin ekranin do te rezultoje ne nje ngjyre me te ndezur te tek pikseli i specifikuar.

Nje monitor grayscale(gri) ka thjeshte nje fosfor percdo piksel. Ngjyra e pikselit mund te vendoset ne te

zeze (asnje elektron nuk e godet fosforin), e bardhe (nje numer maksimal elektronesh qe godet fosforin).

Nje numer me i madh i elektroneve qe godasin fosforin rezultojne ne nje piksel te ngjyrosur me te

bardhe.

7

Nje monitor CRT me ngjyra ka tre ngjyra fosforeshente percdo piksel. Cdo piksel ka te kuqen, jeshilen,

dhe ngjyren blu-te vendosura ne nje grup trekendor. Ka tre electron guns, secila prej te cilave gjeneron

nje tufe elektronesh per te ngacmuar nje nga pikat fosforeshente, sic tregohet ne Fig.l.2.

Ne varesi te fabrikimit te monitorit pikselat mund te jene rrathe te vegjel ose katrore te vegjel sic

tregohet ne Fig. 1.3.

Fig.1.2: Ngjyrimi CRT perdor treshen: kuqe jeshile & blu

Fig.1.3: Monitori i kompjuterit: Rreshtat dhe kolonat e pikselave

Per arsye se pikat jane shume afer, syri i njeriut nuk mund ta dalloj piken e kuqe, jeshile, dhe blue

Te gjitha ngjyrat qe perceptohen nga syri i njeriut mund te formohen nga kombinimi ketyre tre ngjyrave

Ne e supozojme ekranin si nje tabele dy dimensionale(nje matrice) pikselash qe paraqesin layout-in

aktual te ekranit sic tregohet ne Fig. 1.3.

8

Numri i rreshtave dhe kolonave te pikselave qe mund te tregohen ne ekran quhet rezolucion i ekranit.

Ne nje ekran me nje rezolucion 1024 x768, do te thote qe jane 768 rreshta, dhe ne cdo rresht ka1024

piksela. Kjo do te thote qe ekrani ka 768 x 1024=786,432 piksela! Ky eshte nje numer shume i madh

pikselash per nje monitore. Ne workstations mund te kete monitore me rezolucion shume me te madh.

Fig.l.4 tregon dy imazhe te shfaqur ne rezolucione te ndryshme.

Ne rezolucionet e ulta, ku pikselat jane te medhenje atehere cilesia e imazhit nuk do te jete e mire.

Ne rezolucionet e larta ku pikselat jane shume te vogla cilesia e shfaqjes se imazhit eshte shume e mire.

Mund te keni degjuar termin dpi, qe do te thote dots per inch. Fjala dot(pike) ne te vertete i

referohet nje pikseli.

Fig.1.4: I njejti imazh me rezolucione te ndryshme

Pame se mund ta parapesim nje ekran kompjuteri si nje matrice pikselash. Por si mund ta identifikojme

ne nje piksel dhe si te vendosim ngjyren e tij? Pastaj si duhet ti organizojme pikselat per te formuar

imazhet? Ne pjesen tjeter do te shikojme se si vendosen ngjyrat e pikselit dhe se si manipulohen ata.

Frame Buffers

Drita ne ekran e gjeneruar nga tufa e elektroneve ne CRT zbehet shume shpejt, 10 deri ne 60

mikrosekonda. Ne menyre qe te mbajme nje figure ne ekran per njefare kohe figura ka nevoje qe te

rivizatohet perpara se te zhduket nga ekrani. Kjo quhet refreshing i ekranit.

Shumica e sistemeve display perdorin teknologjine raster scan per te performuar kete proces.

Ne kete teknologji, tufa e elektroneve drejtohet ne menyre diskrete drejt ekranit, nje rresht ne nje kohe,

nga e majta ne te djathte duke filluar ne qoshen e siperme majtas te ekranit. Kur tufa arrin rreshtin me

te fundit, procesi perseritet, duke i bere ne kete menyre refresh ekranit.

9

Sistemet raster scan perdorin nje memorie buffer qe quhet frame buffer (ose refresh buffer) ne te cilin

ruhen intesitetetet e pikselave. Refreshing i ekranit performohet duke perdorur informacionin e ruajtur

ne frame buffer.

Ju mund ta mendoni frame buffer si nje tabele dydimensionale. Cdo element i tabeles mban intesistetin

e pikselit ne ekran qe i koonrespondon ketij elementi.

Per nje ekran monokromatike, frame buffer ka nje bit percdo pixel. Kontrolluesi i display lexon nga

frame buffer dhe kthen tek electron gun vetem nese biti ne buffer eshte sic tregohet ne Fig. 1.5

Fig.1.5: Ekran monokromatik: frame buffer per vendosjen e pikselave on dhe off

Sistemet mund te kene shume buffera. Buferat foreground (e dukshem, te pare) vizatojne direkte mbi

dritaren e specifikuar. Ndonjehere perdoret nje background buffer. Bufferi nuk shfaqet menjehere ne

ekran. Ne do te flasim per menyrat e buffering me me shume detaje kur te studiojme animacionin.

Po ngjyrat?

Ne CG ne i paraqesim ngjyrat color si nje treshe e komponenteve Red, Green, dhe Blue. Treshja

percakton ngjyren finale dhe intesitetin. Kjo quhet modeli i ngjyrosjes RGB.

Disa njerez perdorin nje minimum nga 0 dhe nje maksimum deri ne 255 per te paraqitur intesitetet e

ketyre tre ngjyrave, dhe disa njerez perdorin nje numer floating-point ndermjet 0 dhe 1. Ne kete liber,

ne do te perdorim 0 per te thene qe ska ngjyre dhe 1.0 per te paraqitur vendosjen e ngjyrave ne

intesitetin e tij maksimal.

Tabela 1.1 liston koomponentet RGB te disa ngjyrave.

10

Tabela 1.1: Komponentet RGB te disa ngjyrave

Ne sistemet e ngjyres, cdo element piksel ne frame buffer paraqitet nga nje treshe RGB. Kjo treshe

kontrollon intesitetin e electron gun per secilen nga ngjyrat red, green, dhe blue, respektivisht te pikselit

aktual ne ekran.

Syri yne percepton ngjyren finale te pikselit si koombinimi i tre ngjyrave.

Cdo ngjyre pikseli mund te vendoset e pavarura nga pikselat e tjere. Numri total i ngjyrave qe mund te

shfaqen ne ekran ne nje kohe eshte i limituar nga numri i biteve qe perdoret per te paraqitur pikselin.

Numri i biteve te perdorur quhet rezolucioni i ngjyrave te monitorit.

Per rezolucione te ulta te ngjyrave psh 8 bite: Sistemet me 8-bite mund te paraqiten deri ne 256 ngjyra

ne cdo kohe te dhene.

Keto lloj sistemesh permbajne nje tabele ngjyrash. Aplikacionet perdorin nje indeks (nga 1 tek 256) ne

kete tabele ngjyrash per te percaktuar ngjyren e pikselit te ekranit. Kjo menyre e vendosjes se ngjyres

quhet color index mode dhe tregohet tek Fig. 1.6.

Sigurisht, nese ne ndryshojme nje ngjyre ne kete tabele, cdo aplikacion qe indekson tek kjo tabele do te

mundesoje qe ngjyra e tij te ndryshoj automatikisht. Jo gjithmone nje efekt i deshirueshem!

11

Shumica e sistemeve moderne kane nje rezolucion ngjyre 24-bit ose me te larte. Nje sistem 24-bit (8

bite per red, 8 per green, dhe 8 per kanalin blue) mund te shfaq 16 milion ngjyra ne nje kohe.

Ndonjehere shtohen 8 bite teper, qe quhet kanali alfa. Ne do duhet te shikojme brenda ketij kanali alfa

dhe perdorimet e tij me vone kur te mesojme per fog(mjegullen) dhe blending.

Me kaq shume ngjyra ne dispozicion ne cdo kohe, nuk ka nevoje per nje tabele ngjyrash. Ngjyrave mund

t‘ju referohemi direkt nga komponentet RGB te tyre. Kjo menyre e referimit te ngjyrave quhet RGB

mode. Ne kete kurs ne do te perdorim RGB mode.

Kemi pare se si ruhen ngjyrat e pikselit dhe si shfaqen ato ne ekran. Por ne duhet te jemi te afte te edhe

identifikojme cdo piksel ne menyre qe ti vendosim ngjyren e saj. Ne pjesen tjeter, ne duhet te shikojme

se si duhet te identifikojme pikat e pikselave individual qe ne duam te vizatojme.

Sistemi koordinativ

Koordinatat jane bashkesi numrash qe pershkruajne pozicionin- pozicionin pergjate nje vije, nje

siperfaqe sfere, etj. Sistemi koordinativ me i zakonshem per vizatimin e diagramave dy-dimensionale

dhe tre-dimensionale eshte sistemi koordinativ Kartezian.

Le te shikojme tani se si ta perdorim kete sistem per te identifikuar pozicionet e pikave ne hapesiren 2D.

Sistemi koordinativ Kartezian bazohet ne bashkesine e dy vijave te drejta te quajtura akse. Akset jane

perpendikulare me njera tjetren dhe takohen se bashku tek origjina. Zakonisht shigjeta ne akse tregon

kahun pozitiv. Aksi horizontal quhet aksi x, dhe aksi vertikal quhet aksi y.

Fig.l.7 tregon nje sistem koordinativ kartezian me akset x dhe y. Ne etiketojme nje pike si (x,y). x dhe y

quhen koordinatat e pikes.

Fig.1.7: Sistemi koordinativ Kartezian

Duke u kthyer perseri ne boten e kompjuterave, kujtoni qe ekrani i kompjuterit paraqitet fizikisht ne

termat e nje rrjete pikselash. Kjo rrjet pikselash mund te percaktohet brenda sistemit te tij kartezian.

12

Tipikisht, percaktohet me nje origjine ne qoshen e siper majtas te ekranit. Kesaj hapesire karteziane ne i

referohemi si sistemi koordinativ fizike. Brenda ketij sistemi, cdo piksel mund te identifikohet ne menyre

unike nga koordinatat (x,y), sic tregohet ne Fig.l.8.

Fig.1.8: Identifikimi i pikselave ne ekran

Tani, konsideroni nje aplikacion window(dritare)qe te shfaqet ne kete ekran. Ne mund te specifikojme

nje hapesire karteziane brenda te cilit qendron aplikacioni. Ne Fig.1.9, koordinatat x te dritares caktojne

nje kufi qe variojne nga -80 deri ne 80 dhe koordinatat y nga -60 deri ne 60. Ky rajon është

quajtur zona clipping, dhe gjithashtu referohet si sistemi koordinativ logjik ose bota per aplikacionin

tone.

Ky eshte sistemi koordinativ i perdorur nga aplikacioni per te vendosur pikat, vizatojne vijat dhe format

etj.

Fig.1.9: Zona e Aplikacionit (clipping)

13

Objektet viztohen brenda zones clipping, dhe nese jane jashte kesaj zone ato fshihen nga skena. Zona

clipping eshte plotesishte ne nje zone fizike ne monitorin e kompjuterit duke perputhur kufijte e

aplikacionit me kufijte fizike te pikselit te dritares.

Nese zona clipping percakton perputhjen e rezolucionit(fizike) te dritares, atehere cdo thirrje per te

vizatuar nje pike (x,y) (me vlera nr. te plote) ne sistemin koordinativ te botes do te kete nje perputhje

nje-per-nje me nje piksel konrespondues ne sistemin koordinativ fizike.

Per shumicen e aplikacioneve, zona clipping nuk perputhet me madhesine fizike te dritares. Ne kete rast,

paketat grafike kane nevoje te performojne nje transformim nga sistemi koordinativ i botes qe eshte

perdorur nga aplikacioni per koordinatat fizike te dritares. Ky transformim eshte percaktuar nga zona

clipping, madhesine fizike te dritares, dhe nje tjeter karakteristike e njohur si viewport.

Viewport percakton zonen e dritares qe eshte perdorur aktualisht nga aplikacioni.

Per tani, ne do te supozojme qe viewport eshte percaktuar si dritarja e plote (por kjo nuk eshte

gjithmone e nevojshme, sic tregohet ne Fig. 1.11).

Fig.1.10: Projektimi i Clipping Area mbi dritare

14

Fig.1.11: Viewport e nje dritare

Format dhe Scan Converting

Procesi kur nje forme e idealizuar, sic eshte nje vije ose nje rreth, transformohet ne vlerat korrekte "on"

per nje grup pikselash ne kompjuter quhet scan conversion ose rasterizing.

Gjate viteve jane zhvilluar shume algoritme per ta bere procesin e scan converting me te thjeshte dhe te

shpejte.

Algoritmi me popullor i vizatimit te vijave eshte algoritmi midpoint-line. Ky algoritem merr koordinatat

x dhe y te pikave fundore te nje vije si input dhe pastaj llogarit ciftet e koordinatave (x,y) te te gjithe

pikselave ndermjet tyre.

Algoritmi fillon fillimisht duke llogaritur pikselat fizike percdo pike fundore. Vizatohet nje rresht ideal

duke lidhur pikselat fundore dhe pastaj ky rresht perdoret si nje reference per te percaktuar cilat piksela

te ndricohen gjate rruges.

Pikselat qe shtrihen ne me pak se 0.5 njesi nga vija ndricohen, duke rezultuar ne iluminimin e pikselave

si ne Fig.1 .l2.

Fig.1.12: Algoritmi Midpoint per vizatimin e vijave

15

Te gjitha paketat e grafikeve (duke perfshire OpenGL) perfshijne algoritme te paracaktuara per te

llogaritur iluminacionet(ndricimin) e pikselave per vizatimin e vijave. Format lineare baze sic jane

trekendeshat dhe poligonat mund te vizatohen nga nje seri vijash.

Nje poligon percaktohet nga n kulme te lidhura me ane te vijave, ku n eshte numri i faqeve ne poligon.

Nje katerkendesh, qe eshte nje rast special i nje poligoni percaktohet nga kater kulme, dhe nje

trekendesh eshte nje poligon me tre kulme sic tregohet ne Fig. 1.13.

Fig.1.13: Kulmet e nevojitura per te caktuar lloje te ndryshme te formave baze

Per te specifikuar kulmet e ketyre formave ne OpenGL, ne perdorim funksionin:

glVertex

Per ti treguar OpenGL se cfare forme doni qe te krijoni me keto kulme, ju duhet te vendosni brenda

thonjzave cdo bashkesi kulmesh ndermjet nje thirrje per glBegin() dhe glEnd(). Argumenti qe kalohet tek

glBegin() percakton se cfare lloji primitive gjeometrike eshte; disa nga me te perdorshmet jane

pershkruar ne Tabelen 1.2.

16

Tabela 1.2: OpenGL, Tipet e primitiveave gjeometrike

Vini re qe primitivat jane te gjitha primitiva me viza te drejta.

Ka algoritma sic eshte algoritmi midpoint qe mund te konvertoje format sic jane rrathet ne figura te tjera

hiperbolike. Mekanikat baze per keto algoritma jane njesoje sic jane per vijat: te kuptoj cilat piksela jane

gjate rruges se formes dhe pastaj te ndricoje pikselat e duhur.

Ne mund te vizatojme gjithashtu nje segment te kthyer duke perafruar formen e tij duke perdorur

segmentet vija. Sa me te vegjel segmentet, aq me i afert perafrimi. Psh, konsiderojme nje rreth. Kujtoni

nga trigonometria qe cdo pike e rrethit me rreze r (dhe i qenderzuar ne origjine) ka nje cift koordinatash

x,y qe mund te paraqiten si nje funksion i kendit theta qe pika formon me akset, sic tregohet ne Fig.

1.14.

Fig.1.14: Pikat e nje rrethi

Nese ne ndryshojme kendin theta nga 0 tek 360 grade (nje rreth i plote), ne mund te marrim koordinatat

(x,y) te pikave pergjate rrethit. Keshtu nese ne vendosim “mjaftueshem" pika dhe vizatojme segmente

vijash ndermjet tyre, ne duhet te marrim nje figure qe ngjan shume me nje rreth.

Nje kod i shkurter per te vizatuar nje rreth me afersishte100 pika tregohet me poshte. Vini re qe ne

duhet te vendosim qendren e rrethit tek ekuacionet tona per te pozicionuar rrethin tone me afersi.

17

Kujtoni qe funksionet matematike cos dhe sin kerkojne kendet ne radian dhe 2PI radian bejne 360

grade- pra konvertimi yne ne kod. Ne mund te ndertojme forma me komplekse duke vendosur keto

primitiva baze se bashku.

Me poshte tregohet nje pjese kodi per te vizatuar nje figure te nje personi sic tregohet ne Fig. 1.15. Kjo

figure perbehet nga vijat, poligonet, pikat dhe nje rreth. Kodi i plote mund te gjendet ne liber.

Fig.1 .15 Stick Figure

Perpiquni ti bashkoni te gjitha primitivat se bashu per te formuar figuren.

(Ushtrim per seminar)

18

Nese ekzekutoni programin e mesiperm, ju mund te vini re qe vijat e pjerreta duken si te dhembezuara.

Ky eshte nje fakt i shkaktuar per shkak te algoritmeve qe ne perdorim per te rasterize format dhe njihet

si aliasing.

Anti-Aliasing

Problemi me shumicen e rutinave scan te konvertimit eshte qe konvertimi eshte i dhembezuar.

Ne rezolucione te aferta, ku pikselat jane shume afer, ky efekt nuk eshte i dukshem, por ne rezolucionet

me monitor te ulet, ai prodhon nje hark, duket i dhembezuar. Aliasing mund te jete nje problem i madh

ne gjenerimin e filmave kompjuterike. Nje zgjidhje per kete problem quhet anti-aliasing.

Ajo perdor principin: nese pikselat jane vendosur ne intesitete te ndryshme, dhe nese intesitetet e

pikselave fqinje mund te manipulohen sic duhet, atehere pikselat do te shkrihen se bashku per te

formuar nje imazh me te qarte. Keshtu duke pare perseri algoritmin midpoint, sic tregohet ne Fig. 1.16,

anti-aliasing do ti kthej pikselat on me intesitete te ndryshme, ne vend qe thjeshte ti ktheje pikselat on

dhe off. Ky proces ka tendence ta beje imazhin te duket me i mjegullt por me i vazhdueshem.

Per vendosjen e anti-aliasing ne OpenGL, ka dy hapa qe duhet te bejme:

1. Per te antialias pikat ose vijat, ju duhet te aktivizoni antialiasing me glEnable(), duke kaluar si

argument GL_POINT_SMOOTH ose GL_LINE_SMOOTH, sipas rastit.

19

2. Ne duhet gjithashtu te aktivizojme blending duke perdorur nje faktor blending. Faktoret

blending qe ju mund te perdorni jane GL_SRC_ALPHA (burimi) dhe GL_ONE_MINUS_SRC_ALPHA

(destinacioni).

Per te anti-alias figuren tone, ne shtojme disa thirrje te tjera ne funksionin init nga Example1-3, sic

tregohet ne kodin e meposhtem:

PERMBLEDHJE

Ne kete kapitull, ne kemi mbuluar shumicen e bazave per te kuptuar punen e kompjuterit dhe

se si kompjuteri ruan dhe shfaq primitivat e thjeshta te grafikeve.

Kemi diskutuar modelin e ngjyres dhe si OpenGL perdor menyren RGB per te vendosur ngjyrat e

pikselave. Ne kemi pare gjithashtu se si te identifikojme koordinatat e pikselit ne dritaren e

kompjuterit duke perdorur OpenGL.

Se fundmi ne kemi mesuar se si format baze jane rasterized, anti-aliased dhe se fundi shfaqen

ne nje rrjet pikselash.

Ne kapitullin tjeter, ne do te eksplorojme se si te ndertojme dhe te levizim format ne boten 2D.

Kapitulli 2. Transformimet

Ne kapitullin e meparshem, pame se si te vizatojme forma baze duke perdorur librarine grafike OpenGL.

Por ne duhet te aftesohemi te bejme shume me teper se thjeshte vizatimi i formave: ne duam qe ti

mund te levizim ato per te dizenjuar dhe kompozuar skenen tone 2D. Ne duam qe te kemi mundesine

qe te ndryshojme madhesine e imazheve dhe ti orientojme ato ne menyre te pavarur nga njera tjetra.

Funksionet e perdorura per te modifikuar objektet sic eshte levizja, rrotullimi, dhe scaling(ndryshimi i

permasave) quhen transformime gjeometrike.

20

Duke perdorur ekuacionet e transferimit na mundeson qe te modifikojme lehtesishte pozicionin e

objektit ne sistemin koordinativ te botes. Si shtese, nese ne transformojme imazhet tona dhe u bejme

play back imazheve shume shpejte, syte tane do te besojne qe jane duke pare nje film.

Kur te studiojme modelet 3D, ne do te shikojme gjithashtu se si te perdorim transferimet per te

percaktuar objektet hierarkike dhe te "transformojme" pozicionin e kameras.

Ne kete kapitull ju do te mesoni konceptet e meposhteme:

Vektoret dhe matricat

Transformimet 2D: levizja, scaling, dhe rrotullimin

Si te perdorim OpenGL per te transformuar objektet

Kompozimi i transformimeve

1.Vektoret dhe Matricat

Le te kujtojme shkurtimisht konceptet baze te vektoreve dhe matricave nga matematika.

Kjo matematike do te formoje bazat per ekuacionet e transformimit qe do te shikojme me vone

ne kete kapitull.

Ne diskutojme ketd duke u bazuar ne hapesiren 2D. Principet jane njesoje edhe per hapesiren

3D thjeshte i shtojme nje aks te trete, te quajtur aksi z.

Vektoret

Nje vektor eshte nje njesi qe ka si karakteristika te tij gjatesine dhe drejtimin. Ne CG, nje vektor

paraqitet nga nje segment vije i drejtuar me nje pike fillimi(bishtin e tij) dhe nje pike mbarimi(koken).

Gjatesia e vijes eshte gjatesia e vektorit.Nje vektor 2D qe ka gjatesine prej x njesi ne aksin x dhe y njesi

gjate aksit y percaktohet si:

21

Nje vektor mund ta mendojme si nje zhvendosje nga nje pike ne nje pike tjeter. Konsiderojme dy pikat

P(1,-1) dhe Q(3,-2), sic tregohet ne Figuren 2.1. Zhvendosja nga P tek Q eshte vektori V i llogaritur duke

zbritur koordintat e pikave ne menyre te pavarur.

Ajo cka do te thote kjo eshte qe te arrish nga P tek Q, ne zhvendosemi djathtas tek aksi x me dy njesi dhe

poshte tek aksi y nga nje njesi. Gjithashtu mund te paraqesim piken P(x,y) nga vektori

Operacionet me vektoret

Vektoret suportojne disa operacione baze: mbledhja, zbritja, dhe shumezimi me nje numer real.

Mbledhja:

Shumezimi me nje skalar

22

Zbritja

V1-V2=V1+(-V2)

Gjatesia(magnituda) e vektorit

Normalizimi i vektorit

V=V/|V|

23

Prodhimi i vektoreve

Ju mund te gjeni disa nga keto funksione vektoresh te koduara ne skedarin utils. h.

Matricat

Nje matrice eshte nje vektor numrash. Numri i rreshtave (m) dhe kolonave (n) ne vektor percakton

kardinalitetin e matrices (m x n). Ne realitet, nje vektor eshte thjeshte nje matrice me kolone (ose nje

matrice nje-dimensionale). Ne pame qe ekranet jane thjeshte matrica pikselash.

Nje frame buffer eshte nje matrice me vlera pikselash percdo piksel ne ekran.

Mbledhja e matricave:

Shumezimi me nje scalar:

Dy matrica mund te shumezohen me njera tjetren vetem nese numri i kolonave te matrices se pare

eshte i barabarte me numrin e rreshtave te matrices se dyte.

24

Shumezimi i vektorit me matricen:

Matrica identitet :

2.Transformimet e objekteve 2D

Funksionet e perdorur per te modifikuar permasat, vendendodhjem, dhe orientimin e objekteve ose te

kameres ne nje bote CG quhen transformime gjeometrike.

Transformimet aplikohen brenda nje hapesire fushe te vecante. Ne do te diskutojme me shume

transformimet e aplikuara ne hapesiren e objektit, te quajtur gjithashtu transformimet e objektit ose

modeli i transformimeve. Matematika per transformimet ne hapesirat e tjera mbetet e njejta

Hapesira e objektit

Zakonisht, objektet jane te percaktuara ne nje sistem koordinativ default te pershtatshem per

modeluesin. Ky sistem koordinativ quhet sistemi koordinativ i objektit ose hapesira e objektit.

Sistemi koordinativ i objektit mund te transformohet, ne menyre qe te transformoje objektin brenda

sistemit koordinativ te botes.

25

Një transformim i objektit përcakton gjendjen e hapësirës objektit. Ne brendesi, kjo gjendje eshte

paraqitur si nje matrice. Te gjitha objektet e vizatuara ne ekran mbasi vendoset kjo gjendje, vizatohen

me aplikimin e transformimeve te reja.

Transformimet bëjnë të mundur lëvizjen e objekteve brenda botës, pa u dashur qe ta modelojme

objektin perseri!

Le te shikojme tani tre llojet kryesore te transformimeve te perdorura ne CG: levizja, rrotullimi, dhe

scaling.

Levizja

Levizja eshte transformimi qe aplikohet kur ne duam qe objekti yne te levize.

Ne nje bote 2D, ne mund ta levizim objektin nga e majta ne te djathte(levizja pergjate aksit x) ose siper

dhe poshte (levizja pergjate aksit y) sic tregohet ne Fig.2.7. Shkurtimet per keto levizje jane Tx dhe Ty.

Konsideroni nje forme rrethore, P, sic tregohet ne Figure. Nese ne duam te levizim P nga nje distance

prej (tx,ty) atehere te gjitha pikat P(x,y) ne kete forme do te levizin te gjitha ne pozicionin e ri

P'(x,y) =P(x+tx, y+ty).

26

Fig.2.7. Levizja pergjate akseve x dhe y

Nese ne percaktojme vektorin per nje pike te dhene P(x,y) si dhe vektorin e levizjes T

atehere dhe pika rezultante e transformimit do te jete pika P’ qe paraqitet si:

Ose ne menyre me precize: P' = T+P

Matematikisht, ne mund te levizim nje objekt duke aplikuar kete ekuacion percdo pike te objektit.

Le te shpjegojme vizualisht kete koncept me shembullin e nje topi qe leviz. Ne kapitullin e pare ne pame

si te vizatojme nje rreth:

#define PI 3.141 5926535898

//funksionet cos dhe sin i kerkojne kendet ne radian

// kujtoni qe 2PI radian=360 grade, nje rreth i plote

GLint circle_points = 100;

void MyCircle2f(GLfloat centerx, GLfloat centery, GLfloat radius)

{

GLint i;

27

GLdouble angle;

glBegin(GL_POLYGON);

for (i =0; i < circle_points; i + + ) {

angle=2*PI*i/circle_points; // angle in radians

glVertex2f(centerx+ radius*cos(angle),

centery + radius*sin(angle));

}

glEnd();

}

Ne Shembullin 2.1, ne perdorim kete funksion per te vizatuar nje top ngjyre kafe te qenderzuar ne

origjine me rrezen e topit 15 njesi ne sistemin koordinativ te botes tone:

GLfloat RadiusOfBall =15.;

// Vizaton topin, me qender ne origjine

void draw_ball() {

glColor3f(0.6,0.3,0.);

MyCircle2f(0.,0.,RadiusOfBall);

}

Ne duam qe ky top te kerceje larte dhe poshte ne dritaren tone. Kjo do te thote qe, ne duam qe ta

levizim ate pergjate aksit y.

Rutina per performimin e levizjes ne OpenGL eshte glTranslatef(Tx, Ty, Tz), ajo pranon tre argumenta

per levizjen gjate akseve x, y, dhe z respektivisht. Aksi z perdoret per boten 3D, per momentin ne do ta

injorojme ate dhe do ta vendosim 0 vleren e Tz.

Perpara se te aplikojme nje levizje te re, ne duhet qe te vendosim gjendjen e transformimit ne hapesiren

e objektit te jete nje matrice identitet(pra., asnje transformim nuk eshte aplikuar).

Komanda glLoadIdentity() pastron gjendjen aktuale te transformimit me matricen identitet. Ne e bejme

kete sepse ne nuk duam qe te perdorim gjendjet e vjetra te transformimeve. Pastaj, ne ne menyre

konstante shtojme (ose zbresim) tek komponenti ty pergjate aksit y, dhe vizatojme topin ne kete

pozicion te ri transformimi.

28

Kodi per te levizur nje objekt ne nje dritare tregohet me poshte.

Nje variabel ydir perdoret per te percaktuar nese topi eshte hedhur lart ose poshte(dhe keshtu nese ne

duhet te inkrementojme ose dekrementojme ty).

//160 eshte vlera maksimale e X ne boten tone

//percakto pozicionin X te topit, qe te jete ne qender te dritares

xpos =80.;

//120 eshte vlera maksimale e Y ne boten tone

//vendosni pozicionin Y per te inkrementuar 1.5 here drejtimin e kercimit

ypos =ypos+ydir *1.5;

// Nese topi prek majen siper, atehere te ndryshoje drejtimin e topit per poshte

if (ypos ==120-RadiusOfBall)

ydir =-1;

// Nese topi prek fundin, ndrysho drejtimin e topit

else if (ypos<RadiusOfBall)

ydir = 1;

//rivendosni gjendjen e transformimit

glLoadldentity();

// apliko levizjen e deshiruar

glTranslatef(xpos,ypos, 0.);

Kamera ( viewing) dhe transformimet e objektit jane kombinuar ne nje matrice te vetme ne OpenGL, te

quajtur matrica model-view (GL_MODELVIEW). Komanda glMatrixMode(GL_MODELVIEW); specifikon

hapesiren kur aplikohen transformimet. Kjo vendoset normalisht ne funksionin reshape kur ne

vendosim gjithashtu zonen clipping te dritares. Kjo ndodh kurdo qe dritarja eshte reshaped, resized, ose

vizatohet per here te pare, ne specifikojme cdo transformim te metejshem qe do aplikohen ne

hapesiren e objektit.

Nese perpiqeni qe ta shikoni kete animim, ne mund te shikojme levizje qe is jerky, dhe ju mund te

shikoni edhe imazhe jo te plota te vizatuara ne ekran. Ne menyre qe ta bejme kete levizje te duket

qarte, ne duhet te perdorim konceptin e quajtur double buffering.

29

Buffering i dyfishte

Buffering i dyfishte siguron dy frame buffers per perdorim ne vizatim. Nje buffer, i quajtur foreground

buffer perdoret per shfaqjen ne ekran. Bufferi tjeter, i quajtur background buffer, perdoret per te

vizatuar. Kur vizatimi mbaron, dy buffer-at shkembehen ai qe perdorej per te pare tani perdoret per

vizatim dhe anasjellas.

Shkembimi eshte pothuajse i menjehershem. Meqenese imazhi eshte tashme i vizatuar kur ne e

shfaqim ate ne ekran, ajo e bene animacionin te duket smooth(i lemuar), dhe ne nuk shikojme imazhe jo

te plota.

I vetmi ndryshim qe duhet te behet per te aktivizuar double buffering eshte te specifikojme display

mode me ane te GLUT_DOUBLE.

glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);

Kjo thirrje behet nga funksioni main i Example2-1. By default, ne double buffer mode, OpenGL i bene te

gjitha komandat e vizatimit ne background buffer. Nje thirrje per komanden

glutSwapBuffers( );

do te shkaktoje qe dy buffer-at te shkembehen. Mbasi ata shkembehen, ne kemi nevoje te informojme

OpenGL per te rivizatuar dritaren (duke perdorur permbajtjen e re te foreground buffer).

Funksioni glutPostRedisplay() detyron nje ri-vizatim te dritares.

Kodi kerkon te shfaq topin qe kercen si me poshte:

void Display(void){

glClear(GL_COLOR_BUFFER_BIT);

glClear(GL_COLOR_BUFFER_BIT);

xpos =80.;

ypos =ypos+ydir *1.5;


ydir =-1;

else if (ypos <RadiusOfBall)

ydir = 1;

glLoadldentity();

30


draw_ball();

//shkembe buferat

glutSwapBuffers();

//detyro rivizatimin duke perdorur permbajtjen e re

glutPostRedisplay();

}

Scaling (Ndryshimi i permasave te objektit) & Rrotulllimi

Nje objekt mund te zmadhohet ose te zvogelohet pergjate akseve x dhe y duke shumezuar te gjitha

pikat e tij me faktoret e shkallezimit Sx dhe Sy. Te gjitha pikat P=(x,y) tani do te behen P' = (x',y') te tilla

qe x' = Sx*x, y' = Sy*y.

Ne formen e matrices: P’=PS ose

Ne Figuren 2.8, tregohet nje forme rrethore qe eshte shkallezuar nga (1/2,2) dhe nga (2,1/2).

31

Vini re nga figura qe shkallezohet ndryshon pozicionin e fundit te formes (baza). Kjo ndodh per arsye se

ekuacioni i shkallezimit qe ne percaktojme ndodh rreth origjines te sistemit koordinativ te botes. Kjo do

te thote, vetem pikat ne origjine mbeten te pandryshuara.

Shume here eshte me e deshirueshme te shkallezojme formen ne lidhje me disa pika te tjera te

paracaktuara. Ne rastin e nje topi qe kercen, ne mund te preferojme te shkallezojme pikat me te

poshtme te topit sepse ne duam qe baza e formes te mbetet e pandryshuar. Ne nje tjeter pjese, ne do te

shohim se si te shkallezojme formen duke pasur parasysh nje pozicion te paracaktuar.

Le te shikojme prape topin qe kercen. Kur topi godet dyshemene ne duam qe ai te ngjeshet pak nga

goditja dhe pastaj te kaloje perseri ne formen e tij origjinale. Kjo eshte ajo cka presim nga nje top real qe

kercen ne dysheme.

Komanda per te shkallezuar nje objekt eshte:

glScalef(Sx, Sy, Sz)

e cila merr tre argumenta per shkallezim, pergjate akseve x, y dhe z. Shkallezimi nuk ka asnje efekt kur

Sx=Sy=Sz=l. Per tani, ne do te vendosim Sz =1.

Ne mund ta modifikojme kodin e funksionit display nga shembulli i meparshem per te perfshire edhe

shkallezimin e topit.

Kur topi godet dyshemene, dhe pak kohe mbas kesaj, ne ndalojme kete deformim dhe e kthejme ne

formen e meparshme.

Kjo dmth, ne shkallezojme formen pergjate aksit y (poshte) dhe ne menyre proporcionale shkallezojme

pergjate aksit x(siper). Kur arrijme nje deformim(ngjeshje) te paracaktuar, kthehemi pas dhe vazhdojme

levizjen.

Kodi me poshte tregon kete transformim.

// Forma godet dyshemene! Ndalon levizjen dhe fillon shtypjen poshte dhe pastaj kthehet

siper

if (ypos == RadiusOfBall && ydir ==-1 ) {

sy = sy*squash ;

if (sy < 0.8)

// eshte arritur shtypja maksimale, tani kthehem ne gjendjen e meparshme dhe levizim lart

squash = 1.1;

else if (sy > 1.) {

//rivendos parametrat e ngjeshjes dhe kerce topin siper

32

sy = 1.;

squash =0.9;

ydir =1;}

sx =1./sy; }

//120 eshte vlera maksimale e Y ne boten tone

//vendos pozicionin y per ta inkrementuar 1.5 here drejtimin e kercimit

else {

ypos = ypos+ ydir *1.5 -(1 .-sy1)*RadiusOfBall;


ydir = -1;

else if (ypos<RadiusOfBall)

ydir = 1;}

glLoadldentity();


glScalef(sx,sy, 1 .);

draw_ball();

Vini re qe dy transformimet qe jane aplikuar jane edhe levizja e objektit edhe shkallezimi i tij.

Kur ju ekzekutoni programin, do te vini re qe topi nuk qendron ne dysheme kur ai deformohet! Ai duket

sikur kercen larte. Kjo ndodh per arsye se shkallezimi po ndodh ne lidhje me origjinen-qe eshte qendra e

topit!

Rrotullimi

Nje forme mund te rrotullohet rreth cdonjerit nga tre akset.

Ne aktualisht do ta rrotullojme formen ne planin xy, qe eshte ajo qe ne deshirojme per boten 2D.

Pikat rrotullohen me nje kend qe fillon nga origjina sic tergohet ne Fig.2.9.

33

Matematikisht, nje rrotullim rreth aksit z me nje kend 0 qe do te rezultoje ne nje pike P (x,y) duke e

transformuar ate ne P' (x',y') si me poshte:

Ne formen matricore:

Ku R eshte matrica e rrotullimit e treguar me siper. Kendet pozitive maten kunder akrepave te sahatit

nga x drejt y. Njesoj si shkallezimi, rrotullimi ndodh ne lidhje me origjinen. Vetem pikat ne origjine

mbeten te pandryshuara mbas ketij transformimi.

Rutina OpenGL per rrotullimin eshte

glRotatef(Rot, vx,vy,vz);

Ajo merr kendin e rrotullimit ne grade(rot) dhe nje vektor me vlere te ndryshme nga zero ne perputhje

me aksin qe doni te kryeni rrotullimin. Per rrotullim ne planin xy, ne do te vendosi vx=vy=0 dhe vz =1

(pra., vektorin njesi pergjate akseve z)

34

Le te shikojme perseri shembullin e topit qe kercen. Sigurisht, rrotullimi i nje topi te rrumbullakte nuk do

te kete asnje efekt tek topi. Le te percaktojme perseri rutinen draw_ball per te vizatuar nje top.

//Vizato topin, te qenderzuar ne origjine dhe te shkallezuar pergjate akseve X

void draw_ball() {

glColor3f(0.6,0.3,0.);

glScalef(l.3,1 .,1.);

MyCircle2f(0.,0.,RadiusOfBalI); }

Per te rrotulluar topin nderkohe qe ai eshte duke kercyer, ne shtojme keto rreshta kodi ne funksionin

display:

rot = rot+2.; //kendi i rrotullimit

//rivendos rrotullimin mbas nje rrethi te plote

if (rot > = 360)

rot = 0;

glLoadldentity();



glRotatef(rot, 0.,0.,1 .);

draw_ball();

Vini re qe ne kemi aplikuar transformimet ne nje renditje te percaktuar- fillimisht rrotullimi, pastaj

shkallezimi, dhe se fundi levizja.

Provoni te ndryshoni renditjen ne shembujt e mesiperm dhe vini re se cfare ndodh.

Le te shikojme me me shume detaje se si kombinohen transformimet se bashku.

Koordinatat homogjene dhe kompozimi i matrices se transformimit

Pame paraqitjet e ndryshme te matricave/vektoreve per levizjen, shkallezimin, dhe rrotullimin.

35

Fatkeqesisht te gjitha keto ndryshojne ne paraqitjet e tyre dhe nuk mund te kombinohen ne nje menyre

te qendrueshme. Per te trajtuar te gjitha transformimet ne nje menyre te qendrueshme aplikohet

koncepti i koordinatave homogjene i cili eshte marre nga gjeometria dhe eshte aplikuar ne CG.

Me koordinatat homogjene, ne shtojme nje koordinate homogjene ne nje pike (2D). Ne vend qe te

paraqiten nga nje cift numrash (x,y), cdo pike tani paraqitet nga nje treshe (x,y,W), ose ne nje vektor

Duke u kthyer nga koordinatat homogjene pas per tek bota jone origjinale jo-homogjene, ne thjeshte

pjestojme me W. Keshtu pika homogjene paraqitet: eshte e barabarte me piken (x/W, y/W).

Dy pikat e koordinatave homogjene(x,y,W) dhe

(x ',y ', W') jane e njejta pike nese njera eshte shumfishi i tjetres. Keshtu, per shembull, (1,2,1) dhe

(2,4,2) jane te njejtat pika te paraqitura nga treshe koordinatash te ndryshme.

Pikat me W=0 jane pikat ne infinit dhe nuk do te shfaqen ne diskutimin tone.

Per arsye se pikat 2D tani jane vektore me tre elemente, matricat e transformimit te perdorura per te

transformuar nje pike ne nje pozicion te ri duhet te kete kardinalitetin 3x3.

Ne kete sistem, matrica e levizjes T percaktohet si

Cdo pike P (x,y,W) qe levizet nga nje matrice T rezulton ne nje pike te transformuar P' te percaktuar nga

produkti matrice-vektor te T dhe P:

Per W=1 kjo eshte e njevlefshme me ate qe kemi mesuar me pare . Percdo vlere tjeter W, konvertoni

koordinatat e formave te tyre jo-homogjene duke pjestuar me W dhe verifikoni rezultatin.

Matrica e transformimit te shkallezimit (S) ne koordinatat homogjene percaktohet si:

W

y

x

W

y

x

36

dhe matrica e rrotullimit(R) si:

Secila nga keto matrica mund te shumezohen ne menyre te njepasnjeshme me pikat e homogjenizuara

te objektit tone duke dhene pikat finale te transformimit.

Per shembull, supozo qe pikat ne formen P jane levizur nga nje matrice levizjeje T1 dhe pastaj nga T2.

Rezultati duhet te jete (T1+T2). Verifikoni qe ekuacioni: P’=T2(T1P) ne te vertet rezulton ne pikat e

transformuara te deshiruara.

Ne fakt, mund te tregohet qe ky ekuacion mund te derivohet dhe te nxirret:

P’=T2T1P=(T2T1)P=T12P

Kjo dmth, produkti i matrices te dy levizjeve prodhon matricen e deshiruar te transformimit. Kjo matrice

produkt i referohet kompozimit te dy transformimeve.

Mund te provohet matematikisht qe aplikimi i transformimeve te njepasnjeshme te nje verteksi eshte

ekuivalent me llogaritjen e prodhimit te matricave te transformimit fillimisht dhe pastaj duke

shumezuar matricen e komplikuar me matricen me verteksin. Kjo dmth, ne mund te shumezojme ne

menyre selektive matricat thelbesore R, S dhe T per te prodhuar transformimet e kompozuara te

matricave te deshiruara.

Qellimi baze i kompozimit te transformimeve eshte te fitoje eficence. Ne vend qe te aplikohen nje seri

transformimesh njeri pas tjetrit, nje transformim i vogel i kompozuar aplikohet mbi pikat e objektit tone.

Ne cdo kohe te dhene, gjendja aktuale e transformimit paraqitet nga matrica e perbere e

transformimeve te aplikuara.

Le te aplikojme principin e kompozimit te formes se topit ne diskutim. Le te shikojme perseri shembullin

e topit, kur duam shtypnim topin ne rast kontakti me dyshemene.

Kujtoni qe topi dukej sikur kercente kur ne e shtypnim ate. Per te shmangur kete kercim, ne do te donim

te shkallezonim topin ne pikat e tij me te poshtme. Me fjale te tjera, ne duam qe pikat me te poshtme te

qendrojne ne te njejtin vend kur ne shtypim topin.

37

Nga studimi i transformimeve tona, ne dime se si ta shkalllezojme topin rreth origjines se botes(qe eshte

aty ku ndodhet qendra e topit). Per te transformuar topin rreth bazes se tij, ne mund ta konvertojme

kete problem ne tre transformime baze:

1. E para, leviz topin ne menyre qe pika fikse e deshiruar per shkallezim(baza ne kete rast) P1

(x1,y1) eshte ne origjine, duke aplikuar matricen e levizjes T1.

2. Pastaj shkallezojme formen si zakonisht duke aplikuar nje transformim shkallezimi S. Shkallezimi

ndodh rreth origjines, qe eshte tani aty ku baza e topit eshte pozicionuar.

3. Se fundmi, ne levizim formen pas ne menyre te tille qe P1 kthehet tek pika e tij origjinale, pra,

ne aplikojme nje transformim levizjeje T2 = -T1.

Kemi shkallezuar formen duke mbajtur piken e poshtme me te fundme P1 (x1,yl) te fiksuar. Efektivisht,

ne kemi shkallezuar formen rreth pikes pivot P1.

Rrotullimi i nje forme rreth nje pike punon me te njejtin princip. Fillimisht levizni formen ne menyre qe

pika e transformimit te jete ne origjine. Aplikoni rrotullimin dhe levizni formen prape per tek pozicioni i

saj fillestar.

Matrica e perbere per te llogaritur kete transformim te plote mund te llogaritet si

38

M = T2*S*T1

Kjo matrice e perbere mund te aplikohet tek forma ne nje hap per te arritur rezultatin e deshiruar. Ne

pergjithesi, renditja e kompozimit te transformimeve eshte e rendesishme. Nese ne ndryshojme

renditjen, shfaqen rezultate te ndryshme.

Komanda glLoadMatrix(M) ju lejon te ngarkoni nje matrice direkte per te paraqitur gjendjen aktuale te

transformimit.

Komanda glMultMatrix(M) shumezon transformimet aktuale me matricen e specifikuar, M. Cdo

komande paraardhese glMultMatrix*() ose komande transformimi shumezon nje matrice te re 4 x 4 M

me matricen transformim aktuale C duke dhene matricen e re te kompozuar C*M.

Ne fund, kulmet v shumezohen nga matrica aktuale per te marre pozicionet e transformuara te kulmve.

Ky proces do te thote qe komanda e fundit e transformimit e thirrur ne programin tuaj eshte e para qe

aplikohet mbi kulmet. Per kete arsye, ju duhet ti specifikoni matricat ne rendin e kundert per te aplikuar

transformimin.

Konsideroni sekuencen e kodit te meposhtem, qe vizaton nje pike te vetme duke perdorur tre

transformimet:

glMatrixMode(GL_MODELVIEW);

glLoadldentity();

glMultMatrixf(T2); // aplikoni transformimin T2

glMultMatrixf(S1); // aplikoni transformimin S

glMultMatrixf(T1 ); // aplikoni transformimin T1

glBegin(GL_POINTS);

glVertex3f(v); // vizatoni vektorin e transformuar v

glEnd();

Kujtoni, ne nuk kemi nevoje te vendosni matrix mode per te specifikuar brenda ciles hapesire po

ndodhin operacionet aritmetike (ne kete rast, hapesira e objektit e paraqitur nga nje matrice

modelview). Me kete kod, matrica modelview permban I, T2, T2 S, dhe se fundi T2.S.T1, ku I paraqet

matricen identitet.

Transformimet finale te verteksit te aplikuara jane te barabarta me: (T2.(S.(TI.v))) – vini re qe

transformimet mbi verteksin v efektivisht ndodhin ne kahun e kundert ne te cilen ato jane specifikuar.

39

Duke u kthyer pas tek shembulli yne, ne duam te shkallezojme topin mbi bazen e tij. Per te bere kete, ne

levizim topin ne menyre qe baza e tij te shtrihet ne origjine. Kjo behet duke levizur topin lart nga rrezja e

tij. Nese ne fillimisht percaktojme matricen e transformimit T1 si matrica identitet

GLfloat T1[16] = {1.,0.,0.,0.,\

0.,1.,0.,0.\

0.,0.,1.0.\

0.,0.,0.,1. }

Pastaj per te marre matricen per te levizur topin siper sipas rrezes se tij, ne thjeshte mund te vendosim

T1[13]=RadiusOfBall;

Duke percaktuar T1 si {1.,0.,0.,0./

0.,1.,0.,0./

0.,0.,RadiusOfBall,0.,/

0.,0.,0.,1.}

Per te levizur topin poshte, ne vendosim T1[13]=RadiusOfBall;

Nese percaktojme matricen e shkallezimit S fillimisht si matrice identitet, pastaj te shtypesh topin me sx

dhe sy, S do te vendoset si S[0]=sx; S[5]=sy;

Sekuenca e transformimit per shkallezimin dhe kercimin e topit do te ishte si me poshte:

//mbahet pozicioni aktual I topit

T[12]= xpos;

T[13] =ypos;

glLoadMatrixf(T);

//shtypet topi rreth bazes se tij

TI [13] =-RadiusOfBall;

// leviz topin ne qender

glMultMatrixf(T1);

S[0]= sx;

S[5]= sy;

40

// Shkallezo topin rreth fundit te tij

glMultMatrixf(S);

T1 [13] =RadiusOfBall;

// leviz topin lart ne menyre qe pika e saj e poshteme eshte ne origjine

glMultMatrixf(T1);

draw_ball();

Nje alternative me e thjeshte:

Tre komandat qe mesuam me pare, glTranslate, glScale, dhe glRotate, jane te gjitha ekuivalente per te

mundesuar nje levizje te pershtatshme, nje rrotullim, ose matrice shkallezuese dhe pastaj duke thirrur

glMultMatrix*() me kete matrice.

Duke perdorur funksionet e mesiperme, e njejta sekuence transformimi per topin qe kercen do te jete si

me poshte:

//vendos gjendjen e transformimit

glLoadldentity();

// te mbaje pozicionin aktual


// te levize topin ne qender

glTranslatef(0.,-RadiusOfBall, 0.);

// te shkallezoje topin ne fundin e tij


// te levize topin siper ne menyre qe fundi i tij te jete ne origjine

glTranslatef(0.,RadiusOfBall, 0.);

// vizato topin

draw_ball();

Matematika e matricave eshte shume e rendesishme qe te kuptohet ne menyre qe te kuptohen rutinat

e grafikeve.

41

Por perdorimi i matricave ne nje kod aktual eshte i veshtire dhe shpesh i lodhshem. Eshte me e thjeshte

te perdoresh komandat glTranslate, glScale, dhe glRotate. Keto komanda ne brendesi krijojne matricen e

pershtatshme dhe performojne llogaritjet e nevojshme.

Per pjesen tjeter te librit, ne do te perdorim funksionet e siperpermendura te OpenGL ne shembujt

tone.

PERMBLEDHJE

Ne kete kapitull ne kemi mbuluar nje nga konceptet baze matematike ne Computer Graphics:

transformimet.

Transformimet jane bazuar ne matematiken e vektorit dhe matrices.

Transformimet baze jane: levizja, shkallezimi, dhe rrotullimi. Keto mund te kompozohen se

bashku per te krijuar levizje komplekse.

Por meqenese matematika e matricave per transformimet eshte e lodhshme, OpenGL siguron

nje numer funksionesh per te manipular lehte dhe te aplikoje transformimet mbi objektet.

Ne pjesen tjeter, ne duhet te zgjerojme konceptet e transformimeve 2D te mesuara ketu ne

rastin me te pergjithshem te rastit 3D.

Kapitulli 3. 3D

Ne kete kapitull, ju do te mesoni keto koncepte:

Paraqitjen ne sistemin 3D

Matematiken ne 3D: vektoret, matricat dhe transformimet

Krijimi i modeleve

Format primitive

Forma te pergjithshme

Pamja e botes ne 3D

Krijimi i modeleve hierarkike duke perdorur transformimet

Sistemi 3D

Objektet nuk kane vetem gjatesi edhe lartesi, sic jane ne hapesiren 2D, por ato kane gjithashtu edhe

thellesi. Ato mund te lokalizohen afer ose larg nesh.

42

Ne menyre qe te paraqesesh nje bote ne 3D, ne kemi nevoje te zgjerojme sistemin tone koordinativ ne

tre dimensione.

Cdo pike ne boten 3D lokalizohet duke perdorur 3 vlera koordinatash. Ne menyre qe te paraqesim pika

me tre koordinata, ne percaktojme nje aks te trete, te quajtur aksi z. Aksi z eshte perpendikular me akset

x- dhe y. Te tre akset takohen ne (0,0,0) sic tregohet ne Fig.5.1.

Aksin pozitiv te z do ta marrim sikur del nga ekrani drejt nesh.

Te gjitha pikat dhe paraqitjet e vektorit qe pame ne kapitullin 2 mund te zgjerohen duke shtuar

komponenten tjeter, z. Pikat ne hapesiren 3D identifikohen nga treshja e vlerave (x,y,z),

Funksioni OpenGl per te percaktuar nje vertex (x,y,z) ne 3D eshte glVertex3f(x,y,z).

Duke perdorur kete funksion, ne mund te modifikojme funksionin tone qe vizatonte rrethin ne Kapitullin

1, ne boten 3D. Ne kodin e meposhtem, ne mund te percaktojme pikat e rrethit ne planin x-z (jo ne

planin x-y).

z

y

x

43

Rrethi qenderzohet ne pikat: (centerx, centery, centerz). Funksioni glBegin perdoret perte caktuar

primitiven qe duhet te vizatohet. Ne kete rast, ne thjeshte vizatojme pikat rreth siperfaqes se rrethit

tone. Si do ti lidhni pikat per te vizatuar nje rreth te lidhur?

Vektoret 3D

Nje vektor ne 3D ka te njejten semantike si ne 2D - ai mund të mendohet si një zhvendosje nga një

pikë në një tjetër. Konsideroni dy pikat P(1,- 1,1) dhe Q(3,-2,2) sic tregohet ne Fig.5.3.

Zhvendosja nga P tek Q eshte vektori v= (2,-1 ,1) i llogaritur duke zbritur kordinatat individuale te

pikave. Kjo do te thote qe per te shkuar nga pika P tek Q, ne zhvendosemi djathtas pergjate aksit x me 2

njesi, poshte ne aksin y me nje njesi dhe jashte me nje njesi pergjate aksit z.

b

Cdo pike P1 me koordinatat (x,y,z) i konrespondon vektorit Vp1, me koken e tij tek (x,y,z) dhe fundin tek

(0,0). Kjo dmth, nje pike 3D eshte ne thelb nje vektor me fundin e tij tek origjina (0,0,0). Vektori njesi

eshte ai qe ka magnituden nje njesi. Per shembull, vektori njesi pergjate aksit z eshte:

44

Ne shembullin me poshte, ne vizatojme vektoret njesi pergjate akseve pozitive x,y, z me ngjyra te kuqe,

jeshile dhe blu.

Pastaj therrasim rutinen e vizatimit te rrethit per te vizatuar dy rrathe, njeri me qender (0,0.5,0) dhe

tjetri tek (0,0,1):

Rutina e vizatimit te rrethit ka me shume kod per te ndryshuar ngjyrat e pikes te bazuara ne

vendndodhjen e tij ne hapesire.

1

0

0

45

Operacionet me vektoret

Shumezimi i nje vektori 3D me nje skalar thjeshte shkallezon magnituden e tij por nuk ndryshon

drejtimin e tij. Procesi i shkallezimit te nje vektori i tille qe magnituda e tij eshte me gjatesi njesi njihet si

normalizim.

Ka nje veprim vektori qe nuk gjendet ne 2D por shume i rendesishem ne matematiken 3D – prodhimi

kryq i vektoreve. Nje prodhim kryq i vektoreve kuptohet me mire ne termat e planeve dhe vektoreve.

Nje plan eshte nje siperfaqe e sheshte. Cdo bashkesi pikash ne nje bote 2D shtrihen ne te njejtin plan

2D. Pikat ne te njejtin plan quhen koplanare.

Ne boten 3D nje plan percaktohet nga nje pike ne plan dhe nje vektor perpendikular me planin.

Ky vektor quhet vektori normal i planit. Per shembull, akset x dhe z percaktojne nje plan (planin xz) me

origjinen si nje pike ne plan dhe aksin y si vektori normal i ketij plani.

Ne menyre te ngjashme, akset xz dhe yz percaktojne planet perkatese. Ne menyre alternative dy

vektoret ne hapesire gjithashtu percaktojne nje plan (percaktuar nga tre pikat ne hapesire Pl, P2 dhe P3

) U = (P3 - P1) dhe V=( P2 – P1).

Prodhimi kryq i dy vektoreve U dhe V percakton nje vektor te trete, qe eshte ortogonal me planin e

percaktuar nga U dhe V. Matematikisht prodhimi kryq i dy vektoreve percaktohet si me poshte:

46

Ky vektor rezultant eshte vektori normal i planit i formuar nga U dhe V sic tregohet ne Fig.5.6

Kodi per llogaritjen e prodhimit kryq te dy vektoreve dhe normalizimin e dy vektoreve(duke krijuar nje

vektor njesi) mund te gjenden ne klasen: utils.h.

Kodi tregohet me poshte. Supozojme qe vlerat e vektori ruhen ne nje vektor prej 3 elementesh.

GLUT ka disa rutina qe vizatojne modele tre dimensionale. Kjo do te thote qe ne nuk kemi perse te

riprodhojme kodin e nevojshem per te vizatuar keto modele ne cdo program. Keto objekte jane ose

wire(me “tela”) ose solid(te ngurta).

Objektet jane:

Kubi

Sfera

Koni

Torus

Cajniku etj.

Sfera

void glutSolidSphere(GLdouble radius, GLint slices, GLint stacks);

void glutWireSphere(GLdouble radius, GLint slices, GLint stacks);

47

radius– rrezja e sferes

slices– numri i nendarjeve rreth aksit Z (e ngjashme me longitude)

stacks– Numri i nendarjeve pergjate aksit Z (e ngjashme me latitude).

Kubi

void glutSolidCube(GLdouble size);

void glutWireCube(GLdouble size);

Size—permasa e brinjes se kubit

Koni

void glutSolidCone( GLdouble base, GLdouble height, GLint slices, GLint stacks);

void glutWireCone(GLdouble base, GLdouble height, GLint slices, GLint stacks);

base—rrezja e bazes se konit.

height—lartesia e konit.

slices—numri i nendarjeve rreth aksit Z.

stacks—numri i nendarjeve pergjate aksit Z.

Torus

glutSolidTorus(double innerRadius, double outerRadius, int nsides, int rings)

glutWireTorus (double innerRadius, double outerRadius, int nsides, int rings)

innerRadius- eshte rrezja e brendeshme e torous

outerRadius- eshte rrezja e jashtem e torus

nsides- eshte numri i aneve percdo pjese radiale

Rings- eshte numri i nendarjeve radiale per torusin

48

Cajniku(Teapot)

glutSolidTeapot(double size)

glutWireTeapot(double size)

Size eshte madhesia relative e cajnikut.

Dodecahedron

void glutWireDodecahedron( void )

glutSolidDodecahedron( void )

Ky funksion vizaton nje polihedron me 12 faqe te qenderzuar ne origjine. Distanca nga origjina

tek kulmet eshte sqrt(3).

Tetrahedron

glutSolidTetrahedron()

glutWireTetrahedron()

http://openglut.sourceforge.net/group__geometry.html


49

Nderton nje tetrahedron respektivisht i qenderzuar ne origjine.

Cilinder

void glutSolidCylinder( GLdouble radius,GLdouble height,GLint slices,GLint stacks)

glutWireCylinder()

radius rrezja e cilindrit.

height lartesia.

slices ndarjet e rreth aksit z.

stacks ndarjet pergjate aksit z.

Octahedron

void glutSolidOctahedron( void )

void glutWireOctahedron( void )

Vizaton nje oktahedron.

Ky funksion vizaton nje polihedron te qenderzuar ne origjine me 8 faqe. Kulmet jane (+/-

1, 0, 0), (0, +/-1, 0), (0, 0, +/-1).

Icosahedron






50

void glutWireIcosahedron( void )

void glutSolidIcosahedron( void )

Ky funksion vizaton nje polihedron te rregullte te qenderzuar ne origjine me 20 faqe. Distanca nga

origjina tek kulmet eshte 1

Shembull1. Ndertimi i kubit me poligone




51

Shembull2. Kubi duke perdorur komandat e gatshme

#include <stdlib.h>

void init(void)

{

glClearColor (0.0, 0.0, 0.0, 0.0);

glShadeModel (GL_FLAT);//

}

void display(void)

{

glClear (GL_COLOR_BUFFER_BIT);

glColor3f (1.0, 1.0, 1.0);

52

glLoadIdentity (); /* pastron matricen*/

/* viewing transformation */

gluLookAt (0.0, 0.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

glScalef (1.0, 2.0, 1.0); /* modeling transformation */

glutWireCube (1.0);

glFlush ();

}

void reshape (int w, int h)

{

glViewport (0, 0, (GLsizei) w, (GLsizei) h);

glMatrixMode (GL_PROJECTION);

glLoadIdentity ();

glFrustum (-1.0, 1.0, -1.0, 1.0, 1.5, 20.0);

glMatrixMode (GL_MODELVIEW);

}

int main(int argc, char** argv)

{

glutInit(&argc, argv);

glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);

glutInitWindowSize (500, 500);

glutInitWindowPosition (100, 100);

glutCreateWindow (argv[0]);

init ();

glutDisplayFunc(display);

glutReshapeFunc(reshape);

53

glutMainLoop();

return 0;}

Transformimet ne 3D

Njesoje si transformimet ne 2D paraqiteshin nga matricat 3 x 3 duke perdorur koordinatat homogjene,

transformimet 3D mund te paraqiten nga matricat 4 x 4. Kordinatat homogjene 3D paraqiten si nje

katershe (x,y,z, W).

Diskutojme perseri tre transformimet kryesore: levizjen, shkallezimin, rrotullimin.

Matrica e levizjes T(Tx, Ty, Tz) percaktohet si

Keshtu cdo pike P= transformohet duke e shumezuar me T

Shkallezimi mund te paraqitet:

Kujtoni nga Kapitulli 2 qe shkallezimi ndodh rreth nje pike. Kjo pike quhet pika pivot. Matrica e

shkallezimit e percaktuar me siper shkallezon rreth origjines.

Matricat e rrotullimit percaktohen ne menyre unike duke u bazuar ne akset e rrotullimit dhe ne piken

pivot.

Aksi i rrotullimit eshte nje vektor i normalizuar qe percakton aksin ne hapesiren 3D pergjate te cilit do te

ndodh rrotullimi. (Nje vektor 3D thjeshte do te jete treshja (x,y,z) qe percakton drejtimin e akseve).

Rrotullimi 2D qe ne pame me pare eshte nje rrotullim 3D rreth aksit z (vektori(0,0,1)), dhe origjines se

botes (0,0,0) dhe percaktohet si:

1

z

y

x

54

Ne menyre te ngjashme matrica e rrotullimit rreth aksit x eshte:

Dhe rreth aksit y eshte:

Njesoje si ne transformimet 2D, transformimet 3D mund te kompozohen se bashku per te marre efektet

e deshiruara. Eshte e rendesishme renditja e transformimeve per te marre efektin e duhur.

Kujtoni nga leksionet e meparshme qe komandat e OpenGL per operacionet me matricat

void glLoadldentity(void)

vendosin qe matrica aktuale te jete matrica identitet 4 x 4.

Argumenti per te gjitha komandat eshte nje vektor me 16 vlera (m1,m2,..,m16) qe specifikon nje matrice

M si me poshte:

glTranslatef(Tx,Ty,Tz);

shumezon matricen aktuale te transformimit me matricen per te levizur nje objekt me njesite

(Tx,Ty,Tz)

glRotatef(theta,x,y,z);

55

shumezon transformimin aktual me nje matrice qe rrotullon nje objekt ne drejtimin kunderorar me

theta grade rreth aksit te percaktuar nga vektori (x,y,z)

glScalef(Sx,Sy,Sz);

shumezon matricen aktuale te transformimit me nje matrice qe shkallezon nje objekt nga faktoret,

(Sx,Sy,Sz).

Te trija keto komanda jane ekuivalente per prodhimin e nje matrice te pershtatshme levizjeje, rrotullimi,

ose shkallezimi, dhe pastaj duke thirrur glMultMatrixf() me kete matrice si argument.

Shikimi ne 3D

Zgjidhja per transformimin e nje bote 3D ne nje plan 2D eshte pak me komplekse dhe

eshte arritur me perdorimin e projektimeve. Projektimet sigurojne transformimet e

nevojshme per te projektuar pikat 3D ne nje plan 2D, sic tregohet ne Fig.5.19.

Per te percaktuar projeksionin, ne kemi nevoje per te percaktuar nje pamje te volumit te

botes (koordinatat e botes), nje projeksion qe percakton the mapping of the view

volume onto a projection plane, and the viewport for final display.

Le te shikojme nese mund ta kuptojme kete proces me nje analogji te botes reale. Qellimi thelbesor ne

nje 3D CG eshte qe ti jap shikuesit impresionin qe ai eshte duke pare nje fotografi te nje skene tre

dimensionale.

Shohim fillimisht se si nje kamere reale regjistron imazhet e botes tone reale 3D duke perdorur

shembullin e nje kamera te thjeshte pinhole. Pastaj do ta zgjerojme kete diskutim per te pare se si CG

simulon kete proces.

56

Pinhole Camera

Fig.5.20 tregon nje pinhole camera. Kamera eshte thjeshte nje kuti me nje film fotografike F dhe me nje

vrime te vogel H qe lejon driten te futet kur hapet.

Konsideroni cfare ndodh kur marrim nje fotografi te objektit X. Ne hapim vrimezen H per nje fraksion te

sekondes. Nje rreze drite godet X tek pika P, kalon nepermjet H dhe godet filmin ne P', duke shkaktuar

ekspozimin e filmit ne kete pike. Te gjiha piket e objektit paraqiten ne film sipas ketij modeli.

Nje tjeter objekt Y, i te njejtit madhesi por we ndodhet me larg Objektit X, paraqitet si Y' dhe eshte me

madhesi me te vogel.

Objektet sic eshte Z, rrezet e kryqezuara te drites te se cilit nuk kalojne permes H nuk fotografohen.

Vini re se imazhi i formuar është i përmbysur! Versioni klasik i computer graphics i kameres vendos

filmin perballe vrimezes. Kjo vendosje siguron nder te tjera, qe imazhi eshte djathtas- siper.

Ne e emertojme pinhole(vrimezen) si syri, viewpoint, ose pozicioni i kameres dhe filmin si

imageplane(planin e imazhit), sic tregohet ne Fig.5.21.

57

Procesi i filmimit te skenes qendron pak a shume i njejti. Rrezet (te quajtura projeksione) gjenerohen

nga viewpoint tek objektet. Objektet per te cilat keto rreze kryqezojne planin e imazhit do te procesohen

dhe shfaqen ne ekran.

Vete plani i imazhit mund te mendohet si i kompozuar nga nje harte dydimensionale qe permban

informacion per ngjyren. Per lehtesi, ne mund ta mendojme planin e imazhit si te kompozuar nga

pikselat.

Shembull: Pinhole Camera

Kamera CG

Hapat qe nevojiten per te gjeneruar nje imazh CG mund te percaktohen ne menyre analoge me hapat qe

duhen per te marre nje fotografi ne boten reale. Ne duhet fillimisht te percaktojme:

Viewing Transformation -- vendos pzicionin e pamjes dhe dhe eshte analoge me

pozicionimin dhe drejtimin e kameres.

Object Modeling Transformation

Transformimet e modelimit perdoren per te pozicionuar dhe orientuar modelin brenda botes. Ky proces

eshte i ngjashem me rregullimin e skenes per tu fotografuar ne kompozimin e deshiruar. Per shembull,

ju mund ta rrotulloni, levizni, ose shkallezoni modelin- ose te performoni disa kombinime te ketyre

veprimeve. Ne pame se si ta bejme kete ne nje bote 2D. Ne 3D, koncepti zgjerohet duke shtuar nje

dimension te trete te percaktuar nga aksi z.

58

Projection Transformation

Specifikimi i nje transformimi te projeksionit eshte i ngjashem me zgjedhjen e lenteve te

kameres ose rregullimi i zoom-it. Ky transformim percakon shkallen e botes, te quajtur

viewing volume. Transformimi i projeksioneve percakton gjithashtu vendndodhjen dhe

orientimin e planit te imazhit dhe se si objektet ne skene projektohen brenda ketij plani. Ky

proces percakton koordinatat e botes per skenen.

Viewport transformation -- percakton formen e zones se gatshme te ekranit brenda se

ciles paraqitet dhe shfaqet skena . Ky proces eshte analog me percaktimin se sa e madhe

do te jete fotografia finale. Ky hap eshte i njejti si ne boten 2D – kur ne se fundi

paraqesim koordinatat e botes ne ekran.

Mbas performimit te ketyre hapave, piktura mund te shfaqet ne ekran.

59

Cdo hap treansformimi mund te paraqitet nga nje matrice M 4 x 4. Koordinatat e cdo verteksi P

shumezohen nga matrica e duhur e transformimit per te arritur pozicionin final P' sic tregohet ne

Fig.5.25.

Cdo hap transformimi ruhet ne is saved in its own matrix stack. Ne pame komanden OpenGl per te

specifikuar the matrix stack qe ju doni te operoni eshte

glMatrixMode (int mode)

ku mode eshte GL_MODELVIEW, GL_PROJECTION, ose GL_TEXTURE.

Mbani mend qe ne nje kohe vetem njera prej tyre mund te modifikohet. By default, ModelView eshte

ajo qe modifikohet.

Bitmap fonts

Nje font bitmap eshte nje font ne 2D, keto fonte nuk kane trashesi dhe nuk mund te rrotullohen ose

shkallezohen, vetem mund te levizin. Pra fonti gjithmone do te jete perballe perdoruesit.

Ne kete pjese ne do te prezantojme funksionet GLUT per te vendosur disa tekste bitmapped ne ekran.

Na nevojitet nje funksion per te shkruajtur nje karakter: glutBitmapCharacter. Sintaksa eshte si me

poshte:

void glutBitmapCharacter(void *font, int character)

60

Parametrat:

font – emri i fontit qe do perdoret

character – cfare te shkruash, nje shkronje, nje simbol, nje numer, etj…

Opsionet e font-it jane:

GLUT_BITMAP_8_BY_13

GLUT_BITMAP_9_BY_15

GLUT_BITMAP_TIMES_ROMAN_10

GLUT_BITMAP_TIMES_ROMAN_24

GLUT_BITMAP_HELVETICA_10



Rreshti i tekstit me poshte ilustron nje thirrje te funksionit glutBitmapCharacter per te nxjerre si output

nje karakter te vetem ne pozicionin aktual raster:

glutBitmapCharacter(GLUT_BITMAP_HELVETICA_18,'3');

Nje gje shume e rendesishme qe duhet te dihet eshte se cfare eshte pozicioni aktual raster. Pozicioni

raster mund te vendoset me familjen e funksioneve glRasterPos nga libraria OpenGL. Sintaksa e dy

funksioneve nga kjo familje paraqitet me poshte.

void glRasterPos2f(float x, float y);

void glRasterPos3f(float x, float y, float z);

Parametrat:

x, y, z – koordinatat lokale per shfaqjen e tekstit

Funksioni glutBitmapCharacter vendos karakterin ne pozicionin e kerkuar. Keshtu per te vizatuar nje

string, thirrjet e njepasnjeshme te glutBitmapCharacter do te mjaftojne per te arritur outputin e

deshiruar.

Funksioni i meposhtem nderton nje string duke filluar ne pozicionin e specifikuar raster:

61

Kodi i plote

Kodi qe perdor bitmap fonts. Ai shfaq nje numer mbi koken e cdo snowman-i. Fonti mund te vendoset

duke perdorur menune popup qe shfaqet kur shtypet butoni i djathte i mouse-it

Fontet Stroke

Fonti stroke eshte nje font i ndertuar me vija, fontet stroke sillen si cdo objekt 3D, pra karakteret mund

te rrotullohen, shkallezohen dhe levizen

Ne kete pjese ne do te prezantojme funksionet GLUT qe sherbejne per te vendosur nje tekst stroke ne

ekran. Ju duhet vetem nje funksion:

glutStrokeCharacter.

Sintaksa eshte si me poshte:

void glutStrokeCharacter(void *font, int character)

Parametrat:

font – emri i fontit qe do te perdoret

character – shkronje, simbol, numer etj…

Opsionet e fontit jane:

GLUT_STROKE_ROMAN

GLUT_STROKE_MONO_ROMAN

62

Rreshti i meposhtem i tekstit ilustron nje thirrje te funksionit glutStrokeCharacter per te nxjerre nje

karakter te vetem ne koordinatat aktuale lokale:

glutStrokeCharacter(GLUT_STROKE_ROMAN,'3');

Sic thame tek fontet bitmap, pozicioni i vendosjes per fontet stroke specifikohet ne te njejten menyre si

percdo primitive grafike tjeter, pra duke perdorur levizjen, rrotullimin dhe shkallezimin.

Funksioni i meposhtem vizaton nje string qe fillon ne pozicionin e specifikuar ne koordinatat e botes

lokale:

Kujdes: GLUT perdor vija per te vizatuar fonte stroke, keshtu ne mund te percaktojme gjeresine e vijes

me funksionin glLineWidth. Ky funksion merr nje numer float duke specifikuar gjeresine si parameter te

vetem.

GLUT siguron nje funksion qe kthen gjeresine e nje karakteri. Funksioni eshte glutStrokeWidth dhe

sintaksa eshte si me poshte:

int glutStrokeWidth(void *font, int character);

Parametrat:

font – nje nga fontet e percaktuara ne GLUT qe permendem me siper.

character – karakteri te cilit ne deshirojme ti dime gjeresine

63

Kapitulli 4. Tastiera & Mouse

GLUT na lejon ndertimin e aplikacioneve qe mundesojne input nga tastiera duke perdorur celsat e saj

“normal”, ose celsat special si F1-F12. Ne kete leksion ne do te shikojme se si te detektojme se cili celes

eshte shtypur, cfare informacioni tjeter mund te marrim nga GLUT, dhe si ta perdorim ate.

Funksioni per celsat “normal”

void glutKeyboardFunc(void (*func) (unsigned char key, int x, int y));

Parametrat:

func – emri i funksionit qe do te procesojne ngjarjet e celsave “normal”. Nese vendosim

NULL si nje argument atehere GLUT injoron celsat “normal”.

Funksioni i perdorur si argument tek glutKeyboardFunc ka nevoje per tre argumenta. E para kerkon

kodin ASCII e celsit qe shtypet, dy argumentat e tjere kerkojne pozicionin e mouse-it.

Nje implementim i mundshem per kete funksion eshte te siguroje nje menyre qe te dale nga aplikacioni

kur perdoruesi te shtyp celsin ESCAPE.

void processNormalKeys(unsigned char key, int x, int y) {

if (key == 27)

exit(0);

}

Funksioni per celsat “special”

Per celsat special GLUT siguron funksionin glutSpecialFunc. Sintaksa per kete funksion eshte si me

poshte:

void glutSpecialFunc(void (*func) (int key, int x, int y));

Parametrat:

func – emri i funksionit qe do te procesoje ngjarjet speciale te tastieres. Nese vendosim

NULL si argument atehere GLUT i injoron celsat special.

Le te shkruajme nje funksion qe ndryshon ngjyren e trekendeshit kur shtypen disa nga celsat special. Ky

funksion do te vizatoje nje trekendesh duke perdorur te kuqen nese shtypet F1, jeshilen nese shtypet F2,

dhe blu nese shtypet F3.

void processSpecialKeys(int key, int x, int y) { switch(key) {

64

case GLUT_KEY_F1 :

red = 1.0; green = 0.0; blue = 0.0;

break;

case GLUT_KEY_F2 :

red = 0.0; green = 1.0; blue = 0.0;

break;

case GLUT_KEY_F3 :

red = 0.0; green = 0.0; blue = 1.0;

break;

} }

Funksionet GLUT_KEY_* ndodhen ne librarine glut.h.

Ne menyre qe kodi i percaktuar me larte ne processSpecialKeys te kompilohet duhet te shtojme

deklarimet e variablave red, green, dhe blue ne fillim te kodit tone. Per me teper, per kodin qe te kemi

efektin e deshiruar ne duhet te ndryshojme funksionin renderScene.

65

Tani eshte momenti qe te therrasim funksionet e GLUT: glutKeyboardFunc dhe glutSpecialFunc.

Thirrja e ketyre funksioneve mund te behet kudo, qe do te thote qe ne mund te ndryshojme funksionin

procesues per ngjarjet e tastieres. Megjithate ky nuk eshte nje tipar i zakonshem, prandaj ne do ta

vendosim ate ne funksionin kryesor.

Pastaj paraqesim funksionin e ri kryesor, duke perfshire edhe funksionet qe bejne procesimin e

tastieres:

66

CTRL, ALT dhe SHIFT

Ndonjehere ne na duhet te dime nese nje nga celsat CTRL, ALT ose SHIFT eshte shtypur. GLUT siguron

nje funksion qe detekton nese nje nga keto celsa eshte i shtypur.

Ky funksion duhet te thirret vetem brenda funksioneve qe procesojne tastieren ose ngjarjet e inputit te

mouse-it. Sintaksa per kete funksion eshte:

int glutGetModifiers(void);

Vlera e kthimit per kete funksion eshte ose nje nga tre konstantet e paracaktuara (ne glut.h), ose ndonje

kombinim i operatorit OR i ketyre konstanteve. Konstantet jane:

GLUT_ACTIVE_SHIFT – Vendos nese ju keni shtypur celsin SHIFT, ose nese Caps Lock

eshte i aktivizuar.

GLUT_ACTIVE_CTRL – Vendos nese ju keni shtypur celsin CTRL.

GLUT_ACTIVE_ALT – Percakton nese ju e keni shtypur celsin ALT.

Keshtu le te zgjerojme funksionin processNormalKeys per te pare se si te punojme me keta celesa.

Supozoni qe ju doni qe variabli red te jete 0.0 kur perdoruesi shtyp r, dhe 1.0 kur ai shtyp ALT + r.

Shikoni shembullin me poshte:

Nje gje e fundit, si mund te detektoni CTRL+ALT+F1? Ne kete rast ne duhet te detektojme dy modifiers

ne te njejten kohe. Ne menyre qe te arrijme kete ne bejme nje operator OR me konstantet e deshiruara.

Kodi i meposhtem vetem ndryshon ngjyren (e bene te kuqe) nese shtypet njekohesishte kombinimi

CTRL+ALT+F1.

67

Mouse

Ne pjesen e meparshme ne pame se si te shtojme nderveprimin ne nje aplikacion OpenGL duke

perdorur funksionalitet e tastieres qe ka GLUT. Tani eshte koha te eksplorojme mouse-in.

Nderfaqja GLUT e mouse-it siguron nje sere opsionesh per nderveprimin e mouse-it, te quajtura

detecting clicks(detektimi i klikimeve) dhe mouse motion(levizja e mouse-it).

Detektimi i klikimeve te Mouse-it

Njesoj si ne versionin e tastieres, GLUT siguron nje menyre qe ju te regjistroni funksionin qe do te jete i

pergjegjshem per procesimin e ngjarjeve te gjeneruara nga klikimi i mouse-it.

Emri ketij funksioni eshte glutMouseFunc, dhe zakonisht thirret ne fazen e inicializimit te aplikacionit.


void glutMouseFunc(void (*func)(int button, int state, int x, int y));

Parametrat:

func – emri i funksionit qe do te mbaje ngjarjet e klikimit te mouse-it

Sic shihet me siper, ky funksion kerkon kater parametra.

E para tregon se cili buton eshte shtypur ose i lire(i pashtypur). Ky argument mund te kete vetem tre

vlera:

68

GLUT_LEFT_BUTTON

GLUT_MIDDLE_BUTTON

GLUT_RIGHT_BUTTON

Argumenti i dyte ka te beje me gjendjen e butoni kur eshte gjeneruar thirrja, pra i shtypur ose i lire.

Vlerat e mundshme jane:

GLUT_DOWN

GLUT_UP

Kur gjenerohet nje thirrje me GLUT_DOWN, aplikacioni mund te supozoje qe nje GLUT_UP do te vije

mbas saj edhe nese mouse-i leviz jashte dritares.

Dy argumentat e tjera jane koordinatat (x,y) te mouse-it relativisht me qoshen siper-majtas ne zonen e

dritares se klientit.

Detektimi i levizjes

GLUT na mundeson detektimin e levizjeve te mouse-it ne nje aplikacion. Ka dy tipe levizje qe

mundesohen nga GLUT : levizje aktive dhe levizje pasive.

Levizje aktive ndodh kur mouse-i eshte zhvendosur dhe shtypet nje buton.

Levizja pasive eshte kur mouse-i leviz por nuk eshte i shtypur asnje buton.

Nese nje aplikacion eshte duke gjurmuar levizjen, do te gjenerohet nje ngjarje percdo frame gjate

periudhes qe mouse-i eshte duke levizur.

GLUT na lejon specifikimin e dy funksioneve te ndryshme: nje per gjurmimin e levizjes pasive, dhe nje

tjeter per te gjurmuar levizjen aktive.

Keta dy funksione jane:

void glutMotionFunc(void (*func) (int x,int y));

void glutPassiveMotionFunc(void (*func) (int x, int y));

Parametrat:

func – funksioni qe do te jete i pergjegjshem per llojin perkates te levizjes

Parametrat per funksionin e procesimit te levizjes jane koordinatat (x,y) te mouse-it.

69

Detektimi kur mouse-i futet ose le dritaren

GLUT eshte gjithashtu i afte te detektoje kur mouse-i futet ose le zonen e dritares. Mund te regjistrohet

nje funksion per te mbarevajtur keto dy ngjarje. Funksioni GLUT qe regjistron kete funksion

eshte glutEntryFunc dhe sintaksa eshte si me poshte:

void glutEntryFunc(void (*func)(int state));

Parametrat:

func – funksioni qe do te mbarvaje keto ngjarje.

Parametri i funksionit e do te mbarevaje keto ngjarje na tregon ne nese mouse-i ka hyre ne te majte te

rajonit te dritares. GLUT percakton dy konstante qe mund te perdoren ne aplikacion:

GLUT_LEFT

GLUT_ENTERED

Ne shembullin e meparshem ne ndryshuam orientimin e kameres me tastiere. Këtu ne vend te kesaj ne

do te perdorim mouse-in.

Kur perdoruesi shtyp butonin e majte te mouse-it ne do te regjistrojme pozicionin X te mouse-it.

Meqenese mouse-i leviz do te kontrolloj pozicionin e ri X, dhe duke u bazuar ne diferencen ne do te

vendosim nje variabel <I>deltaAngle</I>. Ky variabel do te shtohet ne kendin fillestar per te llogaritur

drejtimin e kameres.

Kerkohet gjithashtu nje variabel per te ruajtur pozicionin X kur mouse-i eshte i klikuar.

float deltaAngle = 0.0f;

int xOrigin = -1;

Vini re qe xOrigin inicializohet me nje vlere qe nuk e merr kurre kur mouse-i eshte shtypur(ai duhet te

jete te pakten zero). Kjo do te na mundesoje qe ne te dallojme nese perdoruesi ka shtypur butonin e

majte ose cdo buton tjeter.

Funksioni tjeter eshte i pergjegjshem per procesimin e ndryshimit te gjendjes se butonit:

70

Vini re qe var xOrigin eshte vendosur ne -1 kur butoni i majte lihet i lire.

Funksioni per te procesuar levizjen e mouse-it jepet me poshte:

Ne funksionin kryesor ne duhet te regjistrojme dy funksionet e reja :

71

Subwindows

Krijimi dhe shkaterrimi i subwindows

Me GLUT ne mund te percaktojme subwindows, pra te ndajme dritaren kryesore ne disa rajone, secila

me kontekstin e saj OpenGL. Nje aplikacion i mundshem eshte te siguroje disa pamje te se njejtes skene

njekohesishte.

Ne menyre qe te krijojme nje subwindow ne perdorim funksionin glutCreateSubWindow me sintaksen e

meposhteme:

int glutCreateSubWindow(int parentWindow, int x, int y, int width, int height);

Parametrat:

parentwindow –id e dritares prind

x, y – qoshja e siperme majtas e subwindow, relative me origjinen e dritares se prindit

72

width, height – permasat e subwindow

id e dritares prind eshte vlera e kthimit qe merret kur krijojme dritaren prind. Kodi me poshte tregon

marredhenien:

mainWindow = glutCreateWindow("SnowMen from Lighthouse3D");

... subWindow1 = glutCreateSubWindow(mainWindow, 10,10,100,100);

Nje subwindow mund te sherbeje gjithashtu si nje dritare prind e subwindows-eve te tjera . Pra sipas

GLUT, subwindows mund te nderfuten tek njera-tjetra.

Sic u permend me siper nje subwindow ka kontekstin e saj OpenGL.

Ne fund ne duhet te regjistrojme funksionin display percdo dritare qe ne krijojme duke perdorur

funksionin glutDisplayFunc.

Percdo dritare, ne duhet te regjistrojme gjithashtu funksionet callbacks per ndryshimet e kursorit dhe

manovrimin e ngjarjeve te mouse-it, nese duam qe te perdorim keto tipare. Menute pop-up i caktohen

gjithashtu nje dritareje te vecante.

Supozojme qe ne duam te krijojm nje setup me tre pamje. Nje per kameren kryesore, nje tjeter me

pamje nga lart, te bazuar tek kamera kryesore, dhe te treten nga ana, perseri duke u bazuar nga kamera

kryesore. Figura me poshte ilustron layout-in.

Kodi i meposhtem eshte nje version me i plote i inicializimit te kerkuar. Ne kemi krijuar nje funksion per

te regjistruar callbacks dhe per te performuar disa nga inicializimet OpenGL meqenese ky do te perdoret

ne te gjitha subwindows.

Ne deklarojme gjithashtu tre variabla per te ruajtur id-te e subwindow, te cilat do te na duhen me vone.

74

Kodi i mesiperm krijon tre subwindows. Cdo subwindow perdoret per te paraqitur nje viewpoint te

ndryshem te cdo skene. Subwindow e siperme paraqet levizjen e lire te kameres, ai qe ndodhet poshte

majtas paraqet pamjen nga siper, dhe ajo qe ndodhet poshte djathtas paraqet pamjen nga ana e

djathte.

Kur krijohet nje dritare, qofte ajo dritare kryesore apo nje subwindow, ajo behet dritarja aktuale. Pastaj

te gjitha callbacks e regjistruara jane relative me dritaren aktuale, pervec funksionit idle, qe sic u

permend me larte eshte unik percdo aplikacion.

Vini re qe ne thirrem initScene per te gjitha subwindows per te inicializuar kontekstin e OpenGL per

subwindow. Gjithashtu vini re se ne vetem regjistrojme funksionin reshape nje here per dritaren

kryesore.

Nje subwindow mund te shkaterrohet kur nuk nevojitet me. Ne menyre qe te bejme kete, ne mund te

perdorim funksionin glutDestroyWindow.

void glutDestroyWindow(int windowIdentifier)

Parametrat:

windowIdentifier – vlera qe kthehet kur krijohet nje dritare

Ky funksion shkaterron dritaren, cdo subwindows qe ajo permban, dhe te gjithe kontekstet OpenGL per

dritaret e shkaterruara. Ne pjesen e meposhteme do te shikojme funksionet reshape dhe render.

Subwindows reshape

Funksioni callback per reshape ka nevoje per dy gjera: ai ndryshon permasat e subwindows, dhe

rillogarit matricen e projektimit percdo subwindow. Ne kete rast ne do ta shmangim rillogaritjen e

matrices se projektimit per dritaren kryesore.

Se pari le te paraqesim funksionet qe do te bejne resize, dhe ripozicionimin e subwindows.

void glutPositionWindow(int x, int y);

void glutReshapeWindow(int width, int height);

Parametrat:

x,y – qoshja e siperme majtas e dritares

width, height – dimensionet e dritares ne piksela

Keto dy funksione veprojne ne dritaren aktuale keshtuqe ne fillimishte duhet te vendosim nje dritare te

vecante sikur te jete dritarja aktuale. Ne menyre qe te bejme kete duhet te kemi id-ne identifikuese te

dritares dhe te therrasim glutSetWindow. Sintaksa eshte si me poshte:

75

void glutSetWindow(int windowIdentifier);

Parametrat:

windowIdentifier – vlera qe kthehet kur krijohet dritarja

Nese duam te dime se cila eshte dritarja aktuale ne mund te perdorim funksionin GLUT glutGetWindow.

int glutGetWindow();

Vlera e kthimit e ketij funksioni eshte identifikuesi i dritares aktuale.

Perpara se te bejme thirrje per ripozicionimin dhe resize te dritares ne duhet te vendosim cdo

subwindow si dritare aktuale. Pjesa e meposhteme e kodit siguron funksionin reshape, ne rastin tone

funksioni quhet changeSize. Sic u permend ne pjesen e meparsheme ne kemi percaktuar nje callback per

reshaping e dritares vetem per dritaren kryesore.

Meqenese ne shembullin tone, projeksioni eshte i ngjashem ne te gjitha subwindows ne do te

percaktojme nje funksion per kete, dhe do ta therrasim ate percdo subwindow.

76

Ne pjesen e meposhteme do te shikojme funksionet rendering.

Rendering to Multiple Subwindows

Perpara se te fillojme le te kujtojme percaktimet tona callback, te percaktuara kur jane krijuar dritarja

dhe subwindows :

idle function – renderSceneAll

display func per main window – renderScene

display func per subwindow 1 – renderScenesw1



Ne do te fillojme me funksionet display percdo dritare. Dritarja kryesore mbulohet me subwindows

keshtuqe ne duam vetem ta ngjyrosim ate te kuqe. Meqenese jemi duke punuar me shume dritare gjeja

e pare qe ne duhet te bejme eshte thirrja e glutSetWindow me id-ne e duhur te dritares. Pastaj ne

thjeshte pastrojme buffer-in e ngjyres me ngjyren default, te zezen.

77

Ne duhet te percaktojme funksionin display percdo subwindow. Ne shembullin tone, gjeometria eshte e

njejta per te gjitha dritaret, e vetmja gje qe ndryshon eshte viewpoint-i.

Funksioni ku gjeometria e zakonshme is rendered eshte quajtur renderScene2. Megjithate, perpara se te

therrasim kete funksion ne duhet te vendosim qe dritarja aktuale te jete subwindow respektive, te

ngarkojme matricen identitet te pastroje matricen MODELVIEW, dhe te vendos kameren me gluLookAt.

Sic u permend me pare ne pjesen fillestare qe perfshinte subwindows ne kemi tre subwindows me

prespektiva te ndryshme te se njejtes skene.

Kodi i meposhtem percakton funksionet display percdo dritare. Ky kod eshte nje version me i zgjeruar i

kodit te meparshem.

Vini re qe ka disa diferenca ne permbajtjen e dritareve.

Kodi i plote(Seminar).

Menute

Menute Pop-up

Menute Pop-up jane gjithashtu pjese e GLUT. Shtimi i menuve ne nje aplikacion siguron nje menyre me

te thjeshte per te vepruar, duke shmangur mbajtjen mend te te gjitha celsave qe duhen shtypur.

Gjeja e pare qe duhet te bejme ne eshte nje menu. Funksioni i GLUT glutCreateMenu ka sintaksen e

meposhteme:

int glutCreateMenu(void (*func)(int value));

Parametrat:

func – funksioni qe do te mbaje ngjarjet e menuse per menune e re te krijuar.

Vlera e kthimit per kete funksion eshte identifikuesi i menuse.

Ne mund te kemi aq menu sa duam ne aplikacionin tone. Dhe percdo menu specifikohet nje funksion

callback, gjithashtu ne mund te specifikojme te njejtin funksion per te gjitha menute tona. Pastaj ne

shtojme disa “hyrje” ne menu. Funksioni per te bere kete eshte glutAddMenuEntry.

http://www.lighthouse3d.com/tutorials/glut-tutorial/subwindows/

78

void glutAddMenuEntry(char *name, int value);

Parametrat:

name – stringu qe do te shfaqet ne menu.

value – kjo eshte vlera qe do te kthehet ne funksionin callback kur eshte selektuar hyrja

e menuse.

Ky funksion e vendos hyrjen e re ne fund te menuse. Ne GLUT nuk ka asnje funksion per te shtuar nje

entry(hyrje) ne mes te menuse.

Mos harroni qe GLUT nuk pretendon qe te jete nje API i plote.

OK, tani ne kemi nje menu pop-up, por ka edhe dicka tjeter qe ne duhet te bejme: nje menuje ti

bashkangjisim nje buton mouse, kjo do te thote qe ne duhet te specifikojme se kur duhet te shfaqet

menuja pop-up.

Duke perdorur GLUT ju mund te beni qe menuja te shfaqet kur shtypet nje nga butonat e mouse-it.

Funksioni per te vendosur kete marredheni eshte glutAttachMenu.

void glutAttachMenu(int button);

Parametrat:

button – nje integer qe specifikon se cili buton i bashkangjitet menuse.

button mund te kete nje nga vlerat e meposhteme:

GLUT_LEFT_BUTTON

GLUT_MIDDLE_BUTTON

GLUT_RIGHT_BUTTON

Keshtu ketu eshte nje funksion qe ilustron perdorimin e te gjithe funksioneve te meposhteme.

79

Tani ne do te shkruajme funksionin qe te procesoje ngjarjet e menuse. Sic e keni kuptuar tashme, ne do

te ndryshojme ngjyrat duke perdorur menune tone.

Funksioni yne do te quhet processMenuEvents, ky eshte emri qe vendosem kur krijuam menune ne

funksionin e mesiperm. Per me teper, duke pare sintaksen e glutCreateMenu ne e dime qe do te kete

nje parameter qe paraqet elementin(item) e zgjedhur ne menu.

E vetmja gje qe mungon per tu vendosur eshte thirrja e createGLUTMenus ne funksionin tone kryesor.

80

Perpara se te shtojme kete hyrje tek menute pop-up te glutit, ne po shikojme dy funksione te tjere. I pari

ju lejon qe ju te thyeni(ndani) marredhenien ndermjet nje butoni te mouse-it dhe nje menu-je. Me pare

ne bashkangjitem nje menu tek nje buton mouse duke perdorur funksionin glutAttachMenu.

Ne disa aplikacione kjo mund te jete e perdorshme per te ndare kete marredhenie, pra kur perdoruesi

shtyp mouse-in menuja nuk shfaqet. Ne GLUT kjo behet me funksionin glutDetachMenu. Ky funksion

shkakton qe GLUT te ndaloje sigurimin e nje menuje kur shtypet butoni i mouse-it.


void glutDetachMenu(int button);

Parametrat:

button – butoni per shkeputjen

Parametri button merr te njejtat vlera si tek glutAttachMenu.

Keshtu ne shembullin tone te meparshem, nese ne duam qe te lirojme butonin e mouse-it, ne mund te

shkruajme:

... glutDetachMenu(GLUT_RIGHT_BUTTON); ...

Dhe se fundi, nese duam qe te lirojme burimet e perdorura nga menuja atehere ne mund ti

shkaterrojme. Funksioni GLUT qe bene kete eshte glutDestroyMenu dhe ka sintaksen e meposhteme:

void glutDestroyMenu(int menuIdentifier);

Parametrat:

menuIdentifier – kjo eshte id e menuse qe do te shkaterrohet. Ajo duhet te jete e njejta

vlere si id e kthyer nga funksioni glutCreateMenu.

Keto ishin disa nga njohurite baze te ndertimit te menuve ne GLUT. Tani do te eksplorojme disa nga

tiparet e menuve pop-up.

Sub Menute

Ne pjesen e pare ne pame se si te ndertojme nje menu te thjeshte, dhe te procesojme ngjarjet

e gjenerauara nga zgjedhja e perdoruesit. Tani ne do te shikojme se si te shtojme nje submenu

kaskade.

Nje submenu krijohet me te njejtin funksion si nje menu. Keshtu ne perdorim funksionin

glutCreateMenu, per te krijuar submenu. Pastaj ne duhet te shtojme submenune si nje hyrje

(entry ) tek menuja. Kjo behet ne GLUT duke perdorur glutAddSubMenu.

void glutAddSubMenu(char *entryName, int menuIndex);

81

Parametrat:

entryName – emri i submenuse hyrese(entry) ne menu

menuIndex – indeksi i submenuse, kjo eshte vlera qe marrim si vlere kthimi kur

therrasim glutCreateMenu per submenune.

Ky funksion shton nje hyrje te re ne fund te menuse. Kur zgjedhim, hyrja e re do te hap nje

submenu. Pjesa e meposhteme e kodit do te ilustroje perdorimin e funksionit te mesiperm:

Duke perdorur kodin e mesiperm, kur perdoruesi shtyp butonin e djathte te mouse-it do te

paraqitet nje menu me dy opsione: “Polygon Mode” dhe “Color”. Kur klikojme mbi “Color”, na

shfaqet nje nenmenu me tre elemente: “Red”, “Blue”, “Green”, dhe “Orange”.

Modifikimi i menuve

Ne disa situata ndryshimi i nje hyrjeje ne menu mund te jete i deshirueshem. GLUT na lejon ne te

ndryshojme dhe te fshijme menu entries. Per te ndryshuar nje menu entry perdoret:

void glutChangeToMenuEntry(int entry, char *name, int value);

Parametrat:

entry – indeksi i hyrjes, mund te jete ndermjet 1-shit dhe numrit totale te hyrjes

82

name – emri i nje hyrje te re

value – vlerat qe do te kthehen tek funksioni callback kur zgjidhet hyrja.

Per te ndryshuar nje submenu perdoret:

void glutChangeToSubMenu(int entry, char *name, int menu);

Parametrat:

entry – indeksi i hyrjes, kjo duhet te jete ndermjet 1-shit dhe numri total te hyrjeve

name – emri i nje hyrje te re

menu – Indeksi i menuse qe do te perdoret

Funksioni i meposhtem fshin nje element.

void glutRemoveMenuItem(int entry);

Parametrat:

entry – indeksi i hyrjes, kjo mund te jete ndermjet 1-shit dhe numrit total te hyrjeve

Shembulli i meposhtem tregon nje rast te ndryshimit te nje menuje:

83

Sic e permendem me siper, kur nje menu eshte ne perdorim ajo nuk mund, ose te pakten ajo

nuk duhet, te ndryshohet. Ne menyre qe te parandalojme ngaterrimet ne duhet te sigurohemi

nese nje menu nuk eshte ne perdoirm perpara se te ndryshojme hyrjet e menuse.

GLUT na lejon te regjistrojme nje funksion callback qe do te thirret kurdo qe shfaqet nje menu,

dhe kur ai zhduket. Funksioni per te regjistruar eshte glutMenuStatusFunc.

void glutMenuStatusFunc(void (*func)(int status, int x, int y);

Parametrat:

func – emri i funksionit callback

Ky funksion mund te thiret ne funksionin tone kryesor, keshtu qe ne thjeshte do ta shtojme aty.

Sic shihet nga signaturen e glutMenuStatusFunc funksioni callback duhet te marre tre

parametra. Keto jane:

84

status – nje nga: GLUT_MENU_IN_USE ose GLUT_MENU_NOT_IN_USE

x – Kordinata majtas e menuse relative me zonen e dritares se klientit.

y – Kordinata siper e menuse relative me zonen e dritares se klientit.

Me poshte jepet nje shembull kur nje flag vendoset kur menuja eshte ne perdorim.

Tani ne mund te perdorim ket flag kur procesojme ngjarjet e tastires si ne shembullin tjeter:

Shkembimi i menuve

GLUT na lejon edhe te ndryshojme nje menu te plote ne mes te aplikimit tone. Funksionet qe e

mundesojne kete jane: glutSetMenu dhe glutGetMenu. Sintaksa eshte:

void glutSetMenu(int menu);

Parametrat:

85

menu – indeksi i menuse se krijuar me pare

Ky funksion na lejon ne qe te shkembejme nje menu, per shembull nese ka nje ndryshim ne kontekstin e

aplikimit. Sintaksa per glutGetMenu eshte si me poshte:

int glutGetMenu(void);

Ky funksion kthen indeksin e menuse aktuale.

Me poshte prezantohet nje shembull ku perdorim dy menu qe shkembehen me njera tjetren kur

perdoruesi shtyp F1.

Kodi i plote(Seminar)

Tani le te perpiqemi te perfshijme disa nga konceptet qe prezantuam ne aplikacionin tone. Ne do ti

shtojme menu aplikacionit, submenu, dhe menu swapping.

Butoni i djathte i mouse-it do te hap nje menu. Celsat ‘s’ dhe ‘c’ do te ndikojne ne opsionet e menuse.

86

Texture-a ne OpenGL

Texture mapping ben te mundur ndryshimin e siperfaqes se nje objekti.

Ajo u shton vitalitet modeleve dhe mundeson pamje vizuale te mrekullueshme edhe per modele te

thjeshta. Per shembull, nese ne vendosim(map) nje imazh druri tek nje model karrikeje, karrikja do te

duket sikur eshte e perbere nga druri.

Texture mapping eshte nje element vendimtar ne lojrat e sotme dhe ne programet e orientuara nga

grafiku.

Shembulli me poshte tregon nje imazh te nje muri me tulla ne nje poligon te vetem qe do te na jap

impresionin qe nje poligon eshte modeluar me tulla individuale, sic tregohet ne Fig.6.26.

Baza e 2d Texture Mapping

Kur vendosim nje imazh ne nje objekt, ngjyra e objektit ne cdo piksel modifikohet nga nje ngjyre

konresponduese nga imazhi. Imazhi quhet texture map dhe elementet e tij individual(pikselat) quhen

texels.

Versioni me i thjeshte i texture mapping mund te kryehet sic pershkruhet me poshte.

Pikat e qoshes te siperfaqes (ne koordinatat e botes) perputhen me kordinatat e hapesires texture duke

perdorur nje skeme parapercaktuese mapping.

Emrat e Texture-ave

Fillimisht na duhet nje texture name. Ky ne thelb eshte nje numer qe OpenGL perdor per te indeksuar te

gjitha textur-at e ndryshme. Per te marre nje texture name, ajo qe duhet te bejme eshte te therrasim

funksionin glGenTextures.

GLuint texture;

// alokon nje emer texture

glGenTextures( 1, &texture );

87

Tani qe kemi texture name, ne mund te zgjedhim ndermjet texture-ave te ndryshme qe duam duke

perdorur funksionin glBindTxeture. Ky ne thelb zgjedh se me cfare texture do punojme. Ne kete pike, ju

duhet te vini re qe jane dy forma texture-ave ne OpenGL, 1D dhe 2D. Le te shikojme perdorimin e

textures 2D. Kjo reflektohet sa here qe ju shikoni GL_TEXTURE_2D. Keshtu le te zgjedhim emrin e

texture-es qe sapo krijuam.

// zgjedhim texturen tone aktuale

glBindTexture( GL_TEXTURE_2D, texture );

Parametrat e Texture

Tani ne do fillojme te punojme ne texture-n tone. Se pari, ne duhet te vendosim disa paramatra texture.

Se dyti, ne kemi nevoje te ngarkojme texture data. Perpara se te fillojme, ne duhet te vendosemi ne nje

gjendje mjedisi texture.

GL_MODULATE thjeshte merr ngjyren dhe te dhenen alpha nga texture-a dhe shumezon ate me te

dhenen e ngjyres se glColor dhe sistemin ndricues.

// zgjedh modulate per te miksuar texture-n me ngjyren per hijezim

glTexEnvf(GL_TEXTURE_ENV,GL_TEXTURE_ENV_MODE, GL_MODULATE );

Pastaj, ne kemi kater parametra texture qe duhet te vendosim. Ketu ne mund te vendosim efekte te

mrekullueshme.

Ne do te vazhdojme te perserisim kete sepse ky eshte perdorimi me i zakonshem. Thjeshte lexo

komentet per detajet se cfare ben.

// kur zona e texture-s eshte e vogel

glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER,

GL_LINEAR_MIPMAP_NEAREST );

// kur zona e texture-s eshte e madhe

glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );

// texture-a zgjatet deri tek kendet

glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT );

glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT );

Kjo kujdeset per mjedisin e texture mapping dhe parametrat. Tani te shikojme texture data.

88

Imazhi i Texture-es dhe Mipmaps

Fatmiresisht dikush ka krijuar nje funksion qe e bene automatikisht konvertimin nga textura ne mipmap.

Gjithcka qe ne duhet te bejme eshte ti japim atij informacion ne lidhje me imazhin dhe ai e bene te

gjithe punen per ne.

Per thjeshtesi, do te shikojme nje shembull me nje file texture RAW. Per ta bere te thjeshte le te

supozojme nje texture RGB 256x256.

Le te fillojme me ngarkimin e texture data.

int width, height;

BYTE * data;

FILE * file;

// texture data

width = 256;

height = 256;

//aloko buffer-in

data = malloc( width * height * 3 );

// hap dhe lexo texture data

file = fopen( filename, "rb" );

fread( data, width * height * 3, 1, file );

fclose( file);

Tani qe kemi ngarkuar texture data nga skedari RAW, ne mund te therrasim funksionin GLU

gluBuild2DMipmaps.

// nderton mipmaps-in e texture-es tone

gluBuild2DMipmaps( GL_TEXTURE_2D, 3, width, height, GL_RGB, GL_UNSIGNED_BYTE, data );

Dhe tani kemi texture-en e ngarkuar gati per ta perdorur. Vetem si perfundim, ne na duhet nje funksion

tjeter per tu thirrur :

// free buffer

89

free( data );

Mos u shqetesoni, OpenGL e ka akoma texture-n. Mbasi thirrem gluBuild2DMipmaps, te dhenat e

imazhit u kopjuan ne sistemin OpenGL.

Si ngarkohet nje texture RAW?

Per ta permbledhur, me poshte te jepet nje funksion qe do te ngarkoje nje texture.

90

Ne varesi te nevojave, ju mund te doni te ri-implementoni kete per te lexuar cfardolloj formati skedari

qe deshironi. Ju mund te ngarkoni file PCX, BMP, GIF, JPG etj.

Ju thjeshte ngarkoni te dhenat e imazhit dhe pastaj OpenGL e bene vete punen tjeter.

Mbasi keni mbaruar pune me texture-n, do te ishte mire qe ta lironit ate. Rreshti i kodit qe jepet me

poshte e mundesone kete:

glDeleteTextures( 1, &texture );

Aktivizimi dhe zgjedhja e Texture-ave

Tani qe kemi aftesine te ngarkojme nje texture, ne mund te bejme gjera te bukura. Fillimisht per te

aktivizuar texture mapping, ne duhet te therrasim glEnable ose glDisable. Kjo behet me parametrin

GL_TEXTURE_2D per secilen.

glEnable( GL_TEXTURE_2D );

Ju mund te ngarkoni texture-a te ndryshme dhe te zgjidhni njeren ne nje kohe duke perdorur funksionin

glBindTexture njesoje si ne rastin e mesiperm LoadTextureRAW.

glBindTexture( GL_TEXTURE_2D, texture );

91

Rendering: Shading & Lighting

Hapi tjeter ne perpjekjen tone per realizem virtual eshte te ngjyrosim modelet tona si imazhe reale. Ky

proces quhet rendering.

Ne kete kapitull ju do te mesoni gjithcka ne lidhje me komponentet e rendering:

Hidden surface removal

Modeli i reflektimit CG

Materialet e siperfaqes(duke perfshire texture-n)

Dritat

Algoritmat Shading

Cfare eshte rendering?

Rendering 3D eshte nje proces me shume hapa. Se pari, ne duhet te identifikojme se cilat pjese te

siperfaqes se modelit jane te dukshme nga viewpoint-i aktual. Ky proces perfshin gjithashtu

edhe identifikimin e sipërfaqeve padukshme të penguara nga sipërfaqet para tyre.

Sapo jane identifikuar siperfaqet e dukshme, ne thjeshte mund tju caktojme atyre nje ngjyre dhe ti

vizatojme ata.

Ne shumicen e rasteve ne nuk duam qe siperfaqet te ngjyrosen vetem me nje ngjyre. Siperfaqet do te

duken te hijezuara duke u bazuar ne sasine e drites qe ato marrin, sic eshte rasti ne jeten reale.

Qe te jemi te afte te simulojme kete efekt, ne duhet te percaktojme karakteristikat e materialit te

siperfaqes: jo vetem ngjyren e tij por gjithashtu se si i pergjigjet drites. Ky proces quhet hijezim

(shading).

92

Ne duhet te percaktojme burimin e drites per te ndricuar skenen, qe na mundeson ta shikojme ate-nje

proces qe quhet ndricim.

Mbasi vendoset hijezimi dhe ndricimi i nje skene, pastaj ne fund perdoren algoritmat shading per te

bere imazhet.

Rendering eshte nje proces kompleks dhe mund te doje shume kohe. Per shembull, nje imazh tipik ne

filmin Toy Story u realizua ne afatin kohor 1-72 ore duke punuar ne nje workstation! Algoritma te

ndryshme hijezimi perdorin metoda te ndryshme per te simuluar sjelljen e drites me siperfaqen.

Sigurisht, ne varesi te nevojave qe kemi perdoret edhe algoritmi perkates. Ne kete liber ne do te

perdorim disa algoritma te thjeshte shading.

Le te fillojme me nje diskutim me te thelle ne fshirjen e siperfaqes se hequr(Hidden Surface Removal).

Hidden Surface Removal

Ne kapitullin e meparshem, ne pame paraqitjen wire te modeleve.

Por cfare ndodhe me ato objekte qe mbulohen pjeserishte nga objekte te tjera para tyre sic tregohet ne

Fig 6.2.

Ne nje model wire frame, nuk ka ndonje problem te madh nese shikon nepermjet nje objekti wire.

Por kur ndertojme objektin tone me nje siperfaqe solide, ne duam te shikojme objektin qe eshte pas.

93

Ky shembull tregon nje kon solid dhe nje sfere. Koni leviz mbrapa dhe pergjate aksit z.

Surprise- edhe kur koni eshte pas sferes, ne prape do ta shikojme te vizatuar para(in front)! Ne duam qe

jo vetem siperfaqet e pasme te sferes dhe konit te fshihen nga shikimi, por gjithashtu pjesa e konit qe

eshte e mbuluar nga shikimi per shkak te sferes.

Procesi i fshirjes se ketyre siperfaqeve quhet hidden surface removal.

Z-Buffering

Nje nga teknikat me te thjeshta per te kryer hidden surface removal njihet si z-buffering ose depth

buffering.

Ne kete proces, nje buffer ne memorje i quajtur z-buffer perdoret per te mbajtur gjurmen e siperfaqes

qe eshte me afer syrit percdo piksel te dhene. Objekti me i afert se fundi vizatohet ne ekran.

OpenGL siguron z-buffering me ane te nje depth buffer. Per ta perdorur ate, fillimishte duhet te

aktivizoni depth buffering. Ju mund ta beni kete duke vendosur qe display mode te perdor depth buffer.

Perpara se te vizatojme skenen, ju duhet te pastroni depth buffer-in dhe pastaj te vizatoni objektet ne

skene.

OpengGL performon te gjitha llogaritjet per te ruajtur informacionin e siperfaqes me te afert ne depth

buffer-in e saj dhe per te vizatuar skenen ne perputhje me rrethanat.

Me poshte tregohet nje kod qe vizaton nje sfere dhe nje kon. Koni eshte vendosur qe te levize

periodikisht perpara dhe pastaj pas sferes.

Depth buffering siguron qe pjeset e mbuluara(penguara) nuk vizatohen ne ekran.

94

Kur ju beni nje thirrje te glColor, te gjitha siperfaqet e vizatuara pas thirrjes do te perdorin te njejten

ngjyre. Nese shikoni se si jane rendered koni dhe sfera do te ngeleni shume te zhgenjyer. Ato duken si

2D! Ne duam qe siperfaqet tona te hijezohen per te dhene kuptimin e thellesise.

Surface removal eshte vetem nje faktor ne gjenerimin e imazhit real. Detyra tjeter e jona eshte te

hijezojme siperfaqen e dukshme ne menyre qe ato te shfaqen si ne 3D duke u bazuar ne dritat qe i

ndricojne ato, dhe karakteristikat e materialit te siperfaqes se saj.

Meqe ne duam te simulojme boten reale, simulimi CG i ndricimit dhe hijezimit ndjek nje analogji te

ngushte se si sillen dritat dhe siperfaqet ne boten reale, dhe se si i shikojne njerezit. Le te shikojme se si

punojne dritat ne boten reale dhe pastaj te vizatojme mbi kete analogji ne diskutimet tona CG te bazuar

ne ndricimin dhe materialet

Drita: Modeli i reflektimit

Imagjinoni te futeni ne nje dhome te erret e cila nuk ka ndricim. Nese dhoma e erret eshte krejtesishte e

izoluar nga cdolloj drite, ju nuk do te jeni ne gjendje te shikoni asgje ne dhome edhe nese ka objekte ne

te.

Imagjinoni tani qe te ndezim nje llampe ne dhome. Menjehere, ne do te fillojme te shikojme objektet ne

dhome. Se sa qarte do ti shikojme ne ato varet nga tensioni dhe ngjyra e llampes po ashtu edhe nga

materiali prej cfare jane perbere objektet.

95

I njejti objekt mund te duket i kuq nen nje drite te kuqe ose blu nen nje drite blu. Ne jemi te afte ta

shikojme sepse rrezet e drites reflektojne nga objektet dhe si perfundim arrijne tek syte tane. Sapo drita

arrine syte tane, sinjalet i dergohen trurit, truri yne perpunon informacionin ne menyre qe te detektoje

vendodhjen e objekteve qe po shikojme. Burimet e drites ne menyre direkte ose indirekte percaktojne

the incident light rays.

Karakteristikat e siperfaqes se objektit ne dhome, te quajtura gjithashtu surface material, percaktojne se

si reflektohet drita ardhese. Le te eksplorojme me me shume detaje menyren se si reflektohet drita.

Ligji i reflektimit

Zakonisht drita eshte modeluar si rrezet e drites (qe mund te mendohen si vektore!).

Shume rreze qe udhetojne se bashku i referohemi si nje rreze drite. Rrezet e drites sillen ne nje menyre

te parashikueshme.

Sic tregohet ne Fig.6.5, nje rreze drite, I, i afrohet pasqyres dhe quhet incident ray. Rrezja e drites, R, qe

le pasqyren, njihet si reflected ray. Ne piken e incidences ku rrezja godet pasqyren, ne mund te

percaktojme nje normale, N, tek siperfaqja e pasqyres.

Normalja eshte pingul me siperfaqen ne piken e incidences dhe ndan kendin ndermjet rrezes incident

dhe rrezes se reflektuar ne dy kende te barabarte.

Kendi ndermjet rrezes incident dhe normales njihet si kendi i incidences.

Kendi ndermjet rrezes se reflektuar dhe normales njihet si kendi i reflektimit.

96

Ligji i reflektimit thote se kur nje rreze drite reflekton jashte siperfaqes, kendi i incidences eshte i

barabarte me kendin e reflektimit.

Fig. 6.6 pershkruan dy rreze drite, nje incident me nje siperfaqe te crregullte dhe pastaj ne nje siperfaqe

te lemuar.

Per te dyja rastet, cdo rreze individuale ndjek ligjin e reflektimit.

Per materialet e lemuara, sic jane pasqyrat ose nje siperfaqe e qete uji, te gjitha rrezet reflektojne ne

menyre te tille qe shkaktojne qe siperfaqja te kete nje pamje te ndriteshme. Ky tip i reflektimit njihet si

reflektimi spekular.

Per materiale te crregullta, sic jane rrobat apo nje rruge, crregullsia e materialit do te thote qe cdo rreze

individuale do te bie mbi nje siperfaqe me nje orientim te ndryshem. Normalja ne piken e incidences do

te jete e ndryshme per rreze te ndryshme. Rrjedhimishte, kur rrezet individuale reflektojne sipas ligjit te

reflektimit, ato shperndahen ne drejtime te ndryshme. Ky tip reflektimi quhet reflektimi difuze.

Ne praktike, te dyja tipet e reflektimit mund te vrehen ne te njejten siperfaqe.

CG: Reflectance Model

Ne CG ne perpiqemi te imitojme modelin e reflektimit te dhene me siper per te llogaritur menyren e

ndricimit dhe materialet e siperfaqes. Ekuacionet matematike llogaritin kete sjellje vendosin ngjyren

perfundimtare te cdo pikseli ne imazh.

Modeli i reflektimit me popullor ne CG eshte propozuar nga Phong.

Modeli i reflektimit te Phong

Modeli i reflektimit te Phong eshte modeli qe perdor OpenGL. Ne kete model reflektimi, ne e ndajme

reflektimin ne kater komponente:

Reflektimi i ambientit: Perdoret per te shmangur qe skenat CG te behen komplet te

zeza. Drita e ambientit nuk ka drejtim; ajo shperndahet ne menyre te barabarte nga te

97

gjitha drejtimet dhe reflektohet nga nje konstante, duke dhene nje siperfaqe qe duket e

sheshte.

Reflektimi difuze(i shperhapur): Siperfaqet me reflektim difuze shperndajne driten ne

menyre te barabarte ne te gjitha drejtimet, por intesiteti i reflektimit varion i bazuar ne

kendin e incidences.

Reflektimi Spekular: Reflektimet Spekulare mund te mbikqyren ne cdo siperfaqe te

ndriteshme, duke shkaktuar nje gri te thelle ose nje te bardhe ne siperfaqe.

Emetimi: Perdoret per te simuluar objekte qe ndricojne qe duket sikur shkelqejne nga

drita e tyre, sic eshte nje llampe drite.

Brenda skenes tone CG, ne percaktojme materialin e siperfaqes me koeficentet e reflektimit per secilen

nga kater komponentet tona.

Koeficientet e reflektimit percaktohen si treshe RGB, dhe kane vleren ndermjet 0 dhe 1, ku 1 eshte

reflektimi maksimal.

Shume njerez u referohen ketyre koeficenteve te refelktimit si ngjyra e materialit, meqenese ajo do te

jete ngjyra e drites qe ajo do te reflektoje. Ky material u percaktohet pastaj modeleve ne skene.

Dritat CG percaktohen per te ndricuar skenen. Keto drita jane modeluar perseri me ngjyrat RGB per

komponentet e ambientit, difuzimin, dhe spekular.

Komponentet red, green dhe blue kane nje vlere ndermjet 0 dhe 1. Disa paketa software-ike percaktojne

edhe intesitetin e drites: intesiteti eshte thjeshte nje faktor shkallezimi per ngjyren e drites: ngjyra

aktuale e drites eshte produkti i ngjyres se tij ose dhe intesiteti i tij. Modeli OpenGL nuk perdor

intensitetin per burimet e drites.

98

Kur drita në hyrje godet një objekt, secila nga keto kater komponente llogariten per te percaktuar

kontributin e tyre individual tek drita e reflektuar. Te gjithe keta kater komponente te mbledhur se

bashku marrin nje ngjyre finale te drites qe largohet.

Reflektimi i ambientit

Reflektimi i ambientit eshte ne fakt thjeshte nje perafrim sepse nuk ka asnje dhome te erret perfekte ne

bote. Nje sasi e vogel drite gjithmone deperton brenda saj, duke bere te mundur shikimin. Ky lloj

ndricimi na lejon neve te shikojme gjurme te zbehta te objekteve me hije te sheshta te ngjyrave te

siperfaqes dhe quhet ndricimi i ambientit.

Kur drita me nje komponent ambienti(drite ambienti) godet nje siperfaqe me reflektim ambienti, ajo

shperndahet ne menyre te barabarte ne te gjitha drejtimet me nje konstante, duke shkaktuar qe

siperfaqja te duket e sheshte sic tregohet ne Fig.6.9.

Matematikisht, nese drita incident ka nje ngjyre ambienti te (Ri,Gi, Bi) dhe objekti qe ajo godet ka nje

material me reflektimin e ambientit te (Ra, Ga, Ba) atehere drita e reflektuar për shkak të reflektimit të

ambientit do të ketë një ngjyrë të përcaktuar si:

(Rra, Gra, Bra) = (Ri*Ra, Gi*Ga, Bi*Ba).

99

Le te shikojme tani se si te render nje sfere duke perdorur ndricimin e ambientit. Ne OpenGL, ne mund

te specifikojme ndricimin global.

Ndricimi global nuk eshte i lidhur me asnje burim drite, por eshte perhapur ne menyre uniforme ne

boten 3D. Komanda per te vendosur nje ndricim global eshte:

ku lmodel-ambient eshte nje vektor qe percakton intesitetin e ambientit RGBA. Komponenti A eshte alfa

i ngjyres. Ne nuk do ta perdorim ate ne kete kapitull, keshtuqe vendoseni gjithmone vlere e tij ne 1.

Vlera e ngjyres se ambientit eshte:

Ne shembullin e sferes, ne mund te perdorim nje ndricim global per te ndricuar ate. Funksioni init do te

percakotoje modelin e ndricimit si ambient dhe do te vendos ngjyren e ambientit(dull white), sic

tregohet me poshte.

Ne na duhet qe te aktivizojme ndricimin ne menyre qe ai te ndikoje ne rendering sic tregohet me

poshte:

Ne na duhet gjithashtu te percaktojme nje material per sferen. Per te vendosur karakteristikat e

materialit te nje objekti, ne perdorim komanden OpenGL

void glMaterialfv(GLenum face, GLenum pname, TYPE* param);

Kjo komande percakton karakteristikat e nje materiali qe perdorim per llogaritjen e ndricimit.

face-mund te jete GL_FRONT, GL_BACK, ose GL_FRONT_AND_BACK per te treguar se ne

cilen faqe te objektit duhet te aplikohet materiali.

100

pname-specifikon karakteristiken e vecante te materialit (sic eshte GL_AMBIENT per

reflektimin e ambientit)

param- eshte vlera/vlerat e deshiruara per karakteristikat e specifikuara.

Ne shembullin tone, ne vendosim reflektimin e ambientit te materialit ne menyre qe ai te reflektoje te

gjithe komponentet e kuq te drites incident dhe te absorboje te gjithe jeshilen dhe blune duke

percaktuar materialin si:

Meqenese ai reflekton vetem komponenten e kuqe te drites, materiali do te duket i kuq.

Kodi display eshte si me poshte.

Mbani mend qe ne gjithmone vendosim depth buffering kur ndricojme skenat 3D. Kjo do te beje te

mundur qe ju gjithmone te shikoni siperfaqet qe jane me afer me kameren!

101

Kapitulli5. Lojrat ne OpenGL

Perseritje: Klasat ne C++

Cfare eshte nje loje?

Nese deshirojme te dizenjojme nje loje, ne duhet te percaktojme se cfare do te thote bota e lojes.

Nje loje eshte nje menyre per paraqitjen e fantazise ndermjet mardhenieve shkak-pasoje te sugjeruara

nga sekuenca e fakteve me detaje.

Lojrat synojne te paraqesin fantazine me nje sekuence te nje peme degezuese. Ajo mundeson qe lojtari

te krijoje historine tij duke bere zgjedhje ne cdo pike te degezuar.

Luajtja e lojes kerkon nje lojtar. Dizenjuesi i lojes punon ne menyre qe te prodhoje nje loje dhe qe lojtari

te ndihet i terhequr nga ajo.

Keshtu, dizenjuesi fillimisht perqendrohet ne dizanjnin e lojes.

Perse luajne lojra njerezit? Cfare i motivon ata? Cfare e bene nje loje argetuese? Përgjigjet e këtyre

pyetjeve janë të rëndësishme për nje dizajn të mirë lojës.

Ne aktualisht do te shikojme lojrat qe behen vetem ne kompjuter.

Ka shume motivime qe njerezit te luajne lojra: mesimi, fantazia/eksplorimi, pranimi social, nevoja per

njohuri, etj.

Disa faktore motivojne nje person qe te luaj lojra; faktore te tjere ndihmojne kete person qe te zgjedh

nje loje te vecante.

Nje loje nuk mund te jete argetuese nese faktoret e lojes nuk kenaqin motivimet e lojtarit.

102

Keshtu kur dizenjohet nje loje, eshte e rendesishme te kuptosh motivimet e audiences se synuar. Lojra

te ndryshme motivojne lloje te ndryshme audience. Nje audience intelektuale mund te motivohet te luaj

nje loje per ushtrime mendore.

Grafika e mire, ngjyrat, animacioni, dhe tingujt vleresohen nga ata qe luajne lojra.

Duke pasur keto gjera parasysh, le te punojme me dizenjimin dhe implementimin e nje loje per veten

tone.

Dizenjimi i lojes

Le te punojme nepermjet dizenjimit te nje loje duke ndjekur hapat standarte te perdorura ne dizenjimin

e lojrave profesionale. Keto hapa e detyrojne dizenjuesin te mendoje ceshtjet e rendesishme rreth lojes

perpara se te filloje implementimi i saj.

Ky eshte nje proces shume i rendesishem, meqenese qellimet nuk jane qartesishte te percaktuara, ka

shume mundesi qe loja te deshtoje nese nuk perputhet me objektivat primare te motivimeve te

lojtareve.

Audienca

Hapi i pare ne procesin e dizanjit te lojes eshte te identifikojme audiencen qe synohet. Per qellimet e

ketij ushtrimi, le te zgjedhim femijet si audienca jone. Ne vecanti djemte nga mosha 8 deri ne 12 vjec.

Sapo eshte zgjedhur audienca, kerkimi bazohet per identifikimin e pelqimeve/mospelqimeve te ketij

grupi.

Le te supozojme qe loja jone do te jete nje loje me goditje(shooting). Qellimi i lojes do te jete qe lojtari

te godas disa objekte.

Mjedisi

Se dyti ne duhet te percaktojme mjedisin ku do te luhet loja. Ne tashme e kemi perkufizuar lojen s nje

loje shooting, por cfare karakteresh jane duke luajtur ne loje dhe ne cfare mjedisi vendosen ato?

Le te percaktojme qe mjedisi i lojes tone do te jete nje mjedis hapsinor. Ne kemi nevoje per nje karakter

qe do te kontrollohet nga lojtari. Ky karakter do te lejoje lojtarin te gjuaj. Ne kemi gjithashtu nevoje per

nje karakter qe te bej “atentat”. Me tej ne duam qe keto karaktere te nderveprojne me mjedisin e

zgjedhur

Duke pasur parasysh kete, ne percaktojme nje anije kozmike qe kontrollohet nga perdoruesi, dhe

meteoret qe shfaqen rastesisht si synim. Ne menyre qe loja te kete nje histori te mire, ne kemi nevoje

per nje karakter te trete qe eshte objekti qe perdoruesi po periqet te mbroje. Nje mbrojtje e planetit

Toke do te ishte nje ide e mire, meqenese cdokush eshte i motivuar per ta mbrojtur ate nga goditja e

meteoreve!

Skenari Interaktiv

103

Skenari permban dialoget dhe linjen e historise te implementuar ne loje.

Per kete loje, le te percaktojme nje skenar te thjeshte.

Loja hapet me nje a hapesire te simuluar me yje dhe qiell. Siperfaqa e planetit Toke eshte ne fund te

skenes. Nje anije kozmike eshte duke e mbrojtur token. Lojtari mund te leviz anijen majtas dhe djathtas

dhe te godas lart me ane te topave. Meteoret, e gjeneruar nga loja, shfaqen ne menyre random ne qiell.

Lojtari duhet te godase keta meteore. Nese nje top godet nje meteor, ai shkaterrohet. Nese meteori

godet token, atehere loja mbaron me nje shperthim.

Logjika interaktive e kesaj loje mund te tregohet me poshte:

Storyboard

Storyboards ndihmojne ne procesin e dizanjit duke ilustruar lojen ne levizje. Zakonisht, storyboards jane

skicime te shpejta te momenteve kyc gjate jetegjatesise se lojes.

Storyboard ilustron vetem pikat kryesore ne historine e lojes. Per kete loje, pikat kyce do te ilustrohen

me poshte:

Skena hapese: Anija kozmike rri pezull ne hapesire

Meteoret shfaqen rastesisht ne qiell

Pozicionimi i hapesires kozmike te perdoruesit dhe goditja e meteorit

104

Fundi i lojes kur meteori godet token

Implementimi

Se fundmi shikohen detajet e ceshtjeve te implementimit. Disa nga zgjidhjet jane si me poshte:

A eshte loja 2D apo 3D?

Do te jete nje loje 2D.

Cilat jane karakteret e implementuara?

Qelli dhe yjet mund te implementohen duke nderfutur nje imazh si background. Ne menyre qe te

percaktojme kur ka nje goditje ne duhet te percaktojme koordinatat e Tokes.

Anija kozmike mund te ndertohet duke marre gjithashtu nje imazh file te gatshem.

Meteoret jane forma qe shfaqen ne menyre te rastesishme ne qiell dhe bien poshte drejt Tokes. Topat

jane gjithashtu forma te vogla qe leshohen kur perdoruesi klikon butonin e djathte te maouse-it.

Cilat jane metodat e inputit per perdoruesin?

Ne lojrat per femije zakonisht ka nje leve per komandimin e perdoruesit. Anje leve punon ne

menyre te ngjashme me nje mouse. Ajo lejon perdoruesit qe te levizin karakteret majtas, djathtas, lart,

105

dhe poshte, dhe mundesojne qe perdoruesi te shtyp nje buton per te goditur. Per lojen tone, mouse-i do

te siguroje parametrat e inputit. Perdoruesi terheq mouse-in me butonin e majte poshte ne menyre qe

te levize anijen kozmike. Me te djathten e mouse-it kontrollohen goditjet me topa.

Cilat jane mjetet qe te duhen per te zhvilluar lojen?

C++ dhe OpenGL.

Ne cfare platforme do te ekzekutohet loja?

Windows (por ju mund ta kompiloni dhe ta ekzekutoni ate ne cdo platform)

Implementimi i lojes

Tashme ne jemi gati te fillojme implementimin e lojes. Algoritmi per lojen (i bazuar ne grafikun e logjikes

interaktive qe pame me siper) eshte si me poshte:

Karakteret

Programimi i orientuar nga objekti lehteson shume programimin e lojrave, meqenese te gjitha

funksionalitetet e karaktereve mund te enkapsulohen brenda nje klase.

Ne duhet te perdorim klasat e thjeshta C++ per te krijuar karakteret ne loje.

106

Objekti Meteor

Fillimisht le te konsiderojme objektin meteor. Nje meteor ka nje vendendodhje, qe percaktohet nga

koordinatat (x,y) ne ekran.

Duke u bazuar ne vendendodhjen, objekti meteor ka nevoje qe te rivizatoje veten e tij, ai ka nevoje te

update-oje pozicionin e tij brenda cdo cikli kodi.

Ai duhet te identifikoje eshe nese eshte apo jo jashte ekranit (nese eshte jashte ne e shkaterrojme ate)

ose nese ka goditur planetin toke.

Klasa meteor mund te percaktohet si me poshte:

Vektori i pozicionit ruan koordinatat aktuale (x,y)-te meteor-it. Ne kete shembull te gjithe meteoret bien

poshte pergjate aksit te y.

Funksioni update thjeshte dekrementon variablin e pozicionit ne menyre qe ta bej meteorin te bie

poshte. Ju mund te eksperimentoni me meteoret duke u dhene meteoreve nje drejtim x.

Rutina Draw vizaton nje pike te bardhe(glVertex) ne vendndodhjen aktuale te meteorit, ndersa rutina

DrawCollision vizaton nje pike te madhe te kuqe per te treguar nje kolizion.

Funksionet HitEarth dhe OutOfScreen testojne vendndodhjen aktuale te meteoreve per te percaktuar

nese ajo ka goditur Token ose eshte jashte kufijeve te koordinatave te percaktuara te botes. Ajo kthen

nje vlere TRUE nese testi eshte pozitive.

Ne perdorim variablin ID per te identifikuar ne menyre unike cdo meteor.

107

Funksioni createMeteor perdoret per te krijuar ne menyre random meteoret gjate lojes. Funksioni

gjeneron nje numer random ndermjet 0 dhe 1 dhe krijon vetem nje meteor nese ky numer eshte me i

vogel sesa nje konstante. Kjo eshte per te siguruar qe nuk do te gjenerohen shume meteor .

Meteoret jane krijuar vetem nese nje numer random gjenerohet ndermjet 0 dhe 1 eshte me i vogel sesa

nje vlere konstante (0.99). Duke rritur kete konstante do te shkaktoje gjenerimin e shume meteoreve.

Cdo meteor ka nje ID unike qe eshte nje vlere integer. ID e meteorit derivohet nga minuti dhe sekondi i

kohes aktuale dhe eshte unike vetem per aq kohe sa lojtari nuk e luan lojen per me shume se nje ore.

Kjo ID perdoret si celes per te vendosur dhe lokalizuar meteorin ne nje meteormap:

typedef map<int, Meteor*> MeteorMap;

static MeteorMap Meteors;

Ne perdorim nje STL container-nje harte ne kete rast-per ruajtjen e meteoreve. Hartat STL jane nje

menyre e thjeshte per te ruajtur objektet ne nje vektor te indeksuar me nje celes. Ne kete rast, ID eshte

celesi i perdorur per te ruajtur dhe terhequr objektin meteor konresondues nga MeteorMap.

Objekti Bullet

Klasa qe enkapsulon objektin bullet(top, plumb) percaktohet ne menyre te ngjashme me klasen Meteor.

Klasa Bullet ka nje funksion shtese per te testuar kolizionet(perplasjet) ndermjet topit dhe nje meteori te

dhene.

class Bullet

{

public:

Bullet(int ulD, int x, int y); //Percakto nje bullet te ri ne pozicionin(x,y).

virtual ~ Bullet();

void Draw(); //Vizato Bullet

108

void Update(); //Update pozicionin e Bullet

bool OutOfScreen(); //kthen true nese Bullet eshte jashte ekranit

bool Collide(Meteor *); //kthen true nese Bullet perplaset me Meteor

GLfloat ID;

private:

GLfloat location[2]; //(x,y) location of bullet };

Rutina Draw vizaton nje pike te ngjyrosur me te kuqe(glvertex) ne vendndodhjen aktuale te topit, ndersa

rutina Drawcollision vizaton nje pike te kuqe me te madhe per te treguar nje kolizion. Funksioni update

thjeshte inkrementon variablin e vendndodhjes [l], ne kete menyre levizet topi larte.

Te gjitha topat e krijuar futen ne nje BulletMap dhe lokalizohen nga ID e tyre.

typedef map<int, Bullet*> BulletMap;

static BulletMap Bullets;

Bullets krijohen kur perdoruesi klikon butonin e djathte te mouse-it. Funksioni createBullet thirret kur

klikohet butoni i djathte i mouse-it. Funksioni percaktohet si me poshte:

// Krijo nje dhe shtoje ate ne Bulletmap

void createBullet(int x, int y) {

SYSTEMTIME systime;

GetSystemTime(&systime);

int ID = systime.wMinute*60 + systime.wSecond;

Bullets[ID]= new Bullet(ID,x,y); }

Anija kozmike

Se fundi le te konsiderojme objektin spaceship . Njesoje si meteori dhe bullet, spaceship ka nje variabel

vendndodhjeje per te percaktuar koordinatat e tij (x,y).

class Spaceship

{

public:

109

SpaceShip();

virtual ~ SpaceShip();

void SetPixels (BlTMAPlNFO *ssinfo, Glubyte *sspixels);

// vendos pikselat dhe bitmapinfo per anijen kozmike

void Draw(); //Vizato spaceship

void UpdatelGLfloat x, GLfloat yl; //updato vendodhjen e spaceship

GLfleat GetXLocation(){ return location[0];)

GLfloat GetYLocation() {return location[l];)

void StartMove(); //fillo levizjen e anijes kozmike

void StopMove(); //ndalo levizjen e anijes kozmike, update-imi i anijes kozmike nuk do te beje

asgje

private:

GLfloat location[2];

GLubyte *mypixels; //informacioni i pikselave te anijes kozmike

BITMAPINFO *myimginfo; //informacion bitmap I nje imazhi te anijes kozmike

bool b_updates; //a jemi ne duke update-uar pozicionin e anijes kozmike

}

Funksioni Setpixels perdoret per te inicializuar pixmap-in e anijes kozmike.

Rutina Draw e objektit spaceship vizaton nje pixmap ne vendndohjen aktuale te objektit.

Anija kozmike eshte ne levizje kur perdoruesi klikon butonin e djathte te mouse-it dhe leviz mouse-in.

Ne momentin qe perdoruesi shtyp butonin, anija kozmike ndalon levizjen.

Variabla booleane b_updates mban gjurmen nese anija kozmike eshte ne levizje (dhe nese vendndodhja

e saj ka nevoje te update-ohet).

Funksioni Update thirret vetem kur b_updates ka nje vlere TRUE. Ai merr si parameter vendndodhjen

aktuale te Mouse-it, dhe vizaton anijen kozmike tek kjo venndodhje. Per kete ushtrim, ne levizim anijen

kozmike vetem majtas dhe djathtas, keshtu vetem koordinatat x kerkohen per levizjen.

110

Inputi i perdoruesit

Librarite OpenGL dhe GLUT sigurojne nje numer funksionesh per te krijuar inputin e perdoruesit.

Funksioni GLUT qe perdoret per te krijuar manovrimin me mouse eshte:

glutMouseFunc(void(*func)(int button, int state, int x, int y))

glutMouseFunc sets the mouse callback for the current window to be the function func. Kur nje

perdorues shtyp ose leshon butonat e mouse-it ne dritare, cdo shtypje apo leshim gjeneron nje

thirrje per kete a funksion.

Funksioni callback merr informacionin se cili buton eshte klikuar (GLUT_RIGHT_BUTTON ose

GLUT_LEFT_BUTTON), gjendjen e butonit (GLUT_UP ose GLUT_DOWN), dhe pozicionin x,y te

klikimit te mouse-it brenda dritares (ne sistemin koordinativ te botes). Ne kete shembull,

percaktojme funksionin tone te manovrimit te mouse-it:

void getMouse(int button, int state, int x, int y)

Kur klikohet butoni i djathte i mouse-it, ne duam qe te leshojme nje bullet. The bullet del nga qendra e

anijes kozmike . Nese anija kozmike eshte zhvendoset(terhiqet), ne duam gjithashtu ta ndalojme ate se

levizuri. Nese butoni klikohet poshte, ne duam qe te fillojme te levizim anijen kozmike.

void getMouse(int button, int state, int x, int y){

//Nese butoni i djathte i mouse-it klikohet larte, krijo nje bullet te lokalizuar ne qender te

imazhit te anijes kozmike. Ndalo levizjen e anijes kozmike

if (button ==GLUT_RIGHT_BUTTON && state ==GLUT_UP) {

createBullet(spaceship->GetXLocation()+25,spaceship->GetYLocation()+25);

spaceship->StopMove();

else {

//Fillo levizjen e anijes kozmike

spaceship->StartMove();}

}

Komanda

glutMotionFunc (void (*func)(int x, int y))

111

eshte perdorur per te vendosur funksionin callback te funksionit. The motion callback for a window is

called when the mouse moves within the window while one or more mouse buttons are pressed. We

want the location of the spaceship to be updated when the user drags the mouse around. We define our

motion callback function as follows

void getMouseMotionlint x, int yl{

//updato spaceship kur leviz mouse.

//levizja spaceship aktivizohet vetem kur butoni klikohet poshte

spaceship->Update(x, SCREENMAXI-y );

Timer Callbacks

Ne menyre te ngjashme me eventet callback te mouse-it, GLUT ka aftesine per te regjistruar timer

callbacks. Timer callbacks fillojne ne intervale kohore te caktuara. Ky mekanizem eshte shume

perdorshem ne lojra, kur ju doni qe te thirret logjika e lojes ne intervale te rregullta kohe.

Funksioni GLUT

void glutTimerFunc (unsigned int msecs , void (*func)(int value), value);

regjistron nje timer callback qe te filloje(shkrehet) ne nje numer te specifikuar milisekondash.

Ne kodin init() te programit tone, ne regjistrojme nje timer callback si:

glutTimerFunc(100, timer, 0);

Kjo do te thote qe funksioni timer do te thirret mbas 100 miliseckondave. Funksioni timer krijon

meteore ne menyre random, detyron thirrjen e funksionit Display dhe se fundi bene nje tjeter thirrje

per te ri-regjistruar the timer callback, duke e filluar procesin perseri nga e para.

void timer(int value){

createMeteor();

// Detyron nje redisplay, funksioni Display permban logjiken baze te lojes

glutPostRedisplay();

// Restart timer-in

glutTimerFunc(l0, timer, 0); }

112

I vendosim te gjitha se bashku

Tani kemi percaktuar te gjitha pjeset, le te shikojme ne thelb te kodit kryesor.

Programi percaktohet ne menyren me te thjeshte te mundeshme per lexueshmeri te thjeshte. Nuk eshte

kodi me eficent i mundshem. Ka nje numer trukesh qe mund te rrisin shpejtesine e programit.

Ju mund te shtoni gjithashtu tinguj per te marre efekte me te bukura, sic eshte nje animim per

shperthimin e planetit ne vend te shfaqjes se disa imazheve statike, etj.

PERMBLEDHJE

Ne kete kapitull, ne kemi kombinuar te gjitha njohurite tona ne Computer Graphics per te zhvilluar nje

loje kompjuterike. Ne kemi mesuar bazat e dizenjimit te lojrave dhe proceset e perfshira ne dizenjimin

dhe zhvillimin e nje loje.

113

PJESA 2

FLASH CS3

Cfare eshte Flash CS3?

Flash CS3 eshte nje program software-ik i cili bene pjese ne paketen CS3 e cila permban pervec tij edhe

software si Adobe Photoshop, Dreamwaver, Adobe Ilustrator etj. Keta programe jane sote shume te

perodrur ne fusha te ndryshme si dizanjn, montazhe, ndertim faqesh web etj.

114

Flash CS3 eshte program qe merret me ndertimin e animacioneve kompjuterike te cilat mund te

perdoren per ndertimin e faqeve web, reklamave, albume fotografish, kuice online etj.

Ndryshe nga OpenGL qe mesuam ne pjesen e pare Flash eshte shume here me I thjeshte dhe praktike

sepse ai ka nje nderfaqe gati dhe perdoruesi thjeshte duhet te mesoj mire perdorimin e komandave, pra

shmanget ne njefare menyre programimi I mirefillte. Megjithate, edhe Flash te mundeson qe per detyra

specifike tit e mund te perdoresh ose te inkorporosh nje gjuhe te orientuar nga objekti, sic eshte psh

PHP, si edhe te perdoresh nje gjuhe skriptimi qe ketu ajo quhet Action Script.

Ne leksionet e meposhteme do te tregohen me hapa dhe fotografi te gjith shembujt e marre. Me ane te

ketyre shembujve ju jepen konceptet kryesore se cfare mund te behet ne Flash.

FlashCS3 eshte nje program te cilin ju mund ta gjeni falas vetem per nje periudhe 1 mujore(trial), ai

shitet se bashku me paketen CS3, megjithate ka edhe versione te tjera qe jane vec ose qe jane portable

te cilat mund ti gjeni falas.

Krijimi i nje dokumenti te ri flash

Le te fillojme me krijimin e nje dokumenti te ri Flash CS3. Per te bere kete:

Hap Flash CS3 Professional

Flash ka disa opsione qe perfshin disa template standarte nga mund te zgjedhim.

Templatet varijojne nga madhesite e reklamave deri ne photo slideshow dhe

quizze(kuice).

Ne keto leksione ne nuk do te perdorim nje template te gatshem.

115

Kliko ne Flash File (ActionScript 3.0) nen titullin"Create New“

U krijua nje dokument i ri flash

Ruaj skedarin Flash

File > Save

Vendosi nje emer p.sh animation.fla (vini re qe skedaret flash kane prapashtesen .fla)

dhe e ruan ate ne nje folder ne kompjuter me zgjedhjen tuaj.

Vendosja e karakteristikave te dokumentit Document Properties

Modify > Document

I vendosim titullin, pershkrimin dhe dimensionet (500x300 piksela). Dhe zgjidhni nje

ngjyre blu per ngjyren e background-it (per qellin). Kliko OK.

116

Do te vini re qe dimensionet e skenes dhe ngjyra e background-it kane ndryshuar sipas

specifikimeve tona.

Si fillim le te familjarizohemi me hapesiren e punes ne Flash CS3. Ne te majte mund te gjeni

shume tools-e, ne krye te faqes keni timeline, ne mes keni skenen, karakteristikat e dritares ne

fund dhe disa dritare/palete te tjera ne te djathte.

Vendosja e tekstit

Le te fillojme duke vendosur nje tekst te thjeshte ne nje dokument Flash CS3.

Tool-i qe perdoret per tekstin ndodhet tek tools-et qe siguron Flash CS3. Per te shtuar tekst:

1. Kliko ne tool-in e meposhtem.

117

2. Kliko ne skenen ku do qe te vendosesh tekstin dhe shtyp “Train” ose cfardo tjeter qe deshironi.

Do te vini re se nderkohe qe teksti eshte i selektuar, karakteristikat e tekstit tregohen ne dritaren

“Properties”.

3. Ketu ju mund te ndryshoni ngjyren e tekstit, madhesine, fontin etj.

Simbolet grafike ne Flash CS3

Simbolet ne Flash CS3 jane nje koncept i rendesishem. Ka tre tipe simbolesh - Movie clip, Button

dhe Graphic. Eshte me e thjeshte qe te krijosh simbole per gjithcka qe vendos ne skene ne

menyre qe ti kesh te thjeshta per te menaxhuar dhe manipuluar. Te gjitha simbolet do te

shfaqen tek Library.

Tani le ta konvertojme tekstin qe shtypem ne nje simbol. Per te bere kete:

1. Modify > Convert to Symbol

2. I vendosim nje emer– psh "Train Title" dhe zgjedhim opsionin “Graphic”

Shtresat ne Flash CS3

Layers" ne Flash CS3 jane nje koncept shume i redesishem. Duke perdorur shtresa te ndara per

simbole te ndara qe jane te vendosur ne skene ju lejon juve qe ti manipuloni secilin ne menyre

te vecante.

118

Ju gjithashtu mund te vendosni se cila do te vendoset vizualisht e para (in front) duke e

vendosur ate ne nje shtrese me te siperme. Ju mund ti kycni shtresat dhe ti fshihni shtresat duke

klikuar ne pikat e vogla qe ndodhen poshte syrit.

Keshtu, le te bejme shtresen e tekstit. Per te bere kete:

Kliko “layer 1” dhe editoje ate duke vendosur emrin “Train Title”

Vizatimi i formave (drejtekendeshi) ne Flash CS3

Ju mund te vizatoni forma ne Flash CS3 duke perdorur tool-et grafike qe mundeson Flash.

Shape Tools

Tani do te perdorim tools-et e formave per te vizatuar barin dhe pemen.

Bari

Bejme nje shtrese te re per barin. Per te bere kete:

1. Klikojme ikonen “Insert layer” ne fund te timeline.

2. Nje shtrese e re do te shfaqet,“layer 2”.

3. I veme asaj emrin “Grass”.

119

Vizatimi i drejtekendeshit

Le te perdorim drejtekendeshin per te bere zonen jeshile te barit. Ngjyra me te cilin do te

mbushet do te jete jeshilja dhe ne nuk duam qe te dalim jashte kufijeve te ketij drejtekendeshi.

Ngjyra stroke tregon ngjyren outline(te kufijeve). Nese nuk duam kufije kjo do te jete “none”.

1. Vendosim ngjyren stroke ne none ne paletin e tools-ave (aksesohet duke klikuar trekendeshin e

vogel) ne ikonen e ngjyres stroke.

2. Zgjidhni drejtkendeshin

120

3. Klikoni ne skenen ku qoshja e siperme majtas e drejtekendeshit duhet te jete dhe terhiqeni ate

(pa e leshuar mouse-in) ne qoshen poshte-djathtas te drejtekendeshit.

4. Sapo drejtekendeshi vizatohet ju mund ti ndryshoni ngjyren ne jeshile ne dritaren e

karakteristikave.

5. Se fundmi konvertojme barin ne nje simbol grafik te quajtur “grass”.

6. Nese shikoni ne paleten “library” tani do te vini re qe ka dy simbole – ‘grass’ dhe ‘train title’.

Nese nuk mund ta shikoni paleten library, shko tek Window > Library dhe mund ta shikoni.

Meqenenese krijuat simbole te reja ju do te keni mundesi ti aksesoni ato nga Library.

Vizatimi i formave Ovale ne Flash CS3

121

Trungu i pemes

Tani po ne shtresen “tree”,le te ndertojme trungun e pemes.

1. Duke perdorur drejtekendeshin te ngjyrosur me ngjyre kafe.

2. E zgjedhim ate dhe pastaj e konvertojme ne nje simbol grafik te quajtur “rectangle”.

3. Do te vini re qe trungu i pemes do te duket sikur eshte mbi pjesen siper te pemes.

4. Per ta vendosur ate pas ne na duhet te perdorim opsionin “send to back”.

Modify > Arrange >Send to Back

5. Zgjidhni pjesen e siperme te pemes dhe trungun (fillimisht zgjidhni pjesen e siperme te pemes,

shtypni celsin Shift, zgjidhni trungun e pemes) dhe e konvertoni ate ne nje simbol grafik te

quajtur“tree”.

Kjo eshte pamja se si duket tani skena:

Vizatimi i vijave ne Flash CS3

Vizato vijat ne Flash CS3 duke perdorur Line Tool.

Duke vazhduar me shembullin tone le te ndertojme hekurudhen duke perdorur tool-in e vijave.

Hekurudha

1. Krijo nje shtrese te re te quajtur “railway tracks”.

2. Sigurohuni qe ajo eshte shtresa me e siperme. Nese jo, terhiqeni ate siper.

3. Zgjidhni tool-in e vijes.

122

4. Ne paletin e karakteristikave zgjidh ngjyren e zeze, vendos lartesine e vijes “2” dhe zgjidh

opsionin “Solid”.

5. Vizato nje vije te drejte horizontale pergjate skenes.

6. Selektoje ate dhe konvertoje ne nje simbol grafik te quajtur “line”.

Riperdorimi i simboleve ne Flash CS3

Riperdorimi i simboleve redukton madhesine e skedarit te animimit dhe e bene ate me te

shpejte per tu ngarkuar.

Ne mund te bejme kopje te simboleve te cilat quhen instanca te simbolit. Cdo instance mund ti

jepet gjithashtu nje emer i ndryshem ne karakteristikat e dritares (Properties window).

Duke pasur parasysh shembullin tone, le te riperdorim simbolin "line" per te krijuar vijen e dyte

te hekurudhes.

Zgjedhim ne skene simbolin e vijes

E kopjojme ate(Edit Copy)

Paste it (Edit > Paste)

E pozicionojme kete kopje pak me larte se e para.

Ndryshimi i permasave dhe rrotullimi i objekteve ne Flash CS3

Ju mund te ndryshoni permasat e objekteve dhe ti rrotulloni ato ne Flash CS3 duke perdorur

tool-in e Free Transform.

Duke vazhduar me kete shembull le te bejme tani ndarjet ndermjet hekurudhes. Ne do te

riperdorim perseri simbolin e vijes.

Bejme nje kopje tjeter te simbolit “line”.

Ne do te ndryshojme permasat e saj dhe do ta rrotullojme ate. Per te bere kete le te perdorim

tool-in “Free Transform”.

Zgjedhim kopjen e simbolit “line” ne skene.

Zgjedhim tool-in “Free Transform”.

123

Ju do te shikoni dy nyje 2 ne fund te simbolit te vijes.

Afro mousin prane njeres prej ketyre nyjeve.

Kursori do te ndryshoje ne nje vije horizontale me shigjeta ne te dyja anet, nje rreth jo i

plote anti – orar me nje shigjete ne njeren ane ose me nje shigjete te pjerret ne te dyja

anet.

Ndryshimi i permasave

Per te reduktuar permasen:

Prit derisa kursori te behet si nje shigjete horizontale ne te dy anet.

Kliko celsin shift dhe terhiq kursorin drejt e ne mes te vijes.

Vija do te behet me e vogel.

Rrotullimi

Per te rrotulluar vijen:

Prit derisa kursori te behet si shigjeta anti- orare

Shtypni celsin shift dhe levizni kursorin siper.

Kjo eshte ajo qe do te keni tani

E poziciononi ate ndermjet linjave hekurudhore. Per te bere kete, duhet qe fillimisht te

ndryshoni mjetin e selektimit.

124

E terhiqni vijen dhe i ndryshoni asaj permasat nese kerkohet qe te vendoset

ekzaktesisht ndermjet dy vijave te hekurudhes

Ju mund te ndryshoni gjithashtu madhesine e simbolit duke e selektuar ate dhe duke

manipuluar vlerat e “width” dhe “height” ne palet.

Paste in Place ne Flash CS3

Per te kopjuar ekzaktesisht nje objekt mbi nje tjeter perdoret komanda "Paste in Place".

Automatikisht, Flash ngjit(paste) ne qender te skenes. Ka tre opsione paste ne menune Edit :

Paste in Center

Paste in Place

Paste Special

Le te bejme kopjet e tjera te vijave te hekurudhes

Menyra me e thjeshte per te bere kete eshte:

Zgjedhim instancen e vijes se vogel ne skene

Copy (Edit > Copy)

Paste in Place (Edit > Paste in Place).

Mund te perdoresh edhe shigjetat ne tastiere per ta zhvendosur pak ate.

Perserit procesin.

Kur te keni bere 5, i selektoni te 5-ta (mund te zgjedhesh disa duke shtypur celsin shift), paste in place,

dhe pastaj i zhvendosni.

Zhvendosja e objekteve ne Flash CS3

Ka disa tool-e te vecante qe ju ndihmojne juve te zhvendosni (align) objektet ne Flash CS3. Keto

mund te aksesohen ne menune Modify > Align.

125

Opsioni "Distribute Widths"

Le te sigurohemi qe ka nje hapesire te barabarte ndermjet seciles nga vijat e pjerrta te

hekurudhes. Ne do ta bejem kete duke perdorur opsionin “Distribute Widths”.

Per te bere kete:

Selekto te gjitha vijat e vogla te pjerrta (duke shtypur celsin Shift)

Align > Distribute Widths

Do te vini re qe vijat tani jane me nje hapesire te barabarte nga njera tjetra.

Simboli i hekurudhes

Tani hekurudha jone eshte pothuajse gati.

Selekto te gjitha vijat e hekurudhes.

Konvertoji ato ne nje simbol grafik te quajtur “Railway Track”.

Kjo eshte ajo qe kemi tani:

126

Ndryshimi i ngjyrave te simboleve ne Flash CS3

Ne mund ta ndryshojme ngjyren e nje simboli duke perdorur opsionin "Advanced" Color ne

dritaren e karakteristikave.

Le te fillojme me vizatimin e trenit tani.

Treni

Bejme nje shtrese te re.

Kjo duhet te jete shtresa me e siperme.

Ne mund te riperdorim drejtekendeshin, formen ovale dhe simbolet e vijave per te

krijuar trenin duke u ndryshuar atyre permasat dhe ngjyren.

Terheqim simbolin e drejtekendeshit nga Library ne skene. Kjo do te krijoje nje instance

te re te simbolit.

Ndryshojme permasat e tij duke perdorur “Free Transform”.

Ndryshimi i ngjyres se simboleve te riperdorura

Per te ndryshuar kodin e kesaj instance te simbolit "rectangle":

E selektojme ate

Ne paleten Properties, zgjidh “Advanced” nga opsionet e “Color”.

Pastaj kliko butoni “Settings”.

127

Luaj me vlerat RGB derisa te merrni ngjyren qe doni.

Riperdorni simbolin “rectangle” per te bere oxhakun dhe pjese te tjera te trenit.

Opsionet e transformimit ne Flash CS3

Ka disa opsione transformimi qe na mundeson Flash CS3. Keto perfshijne ndryshimin e

permases, distorting, skewing, rotating dhe flipping an object. Ju mund te rrotulloni ne kahun

orar 90 grade ose kunderorar.

Le te fillojme tani ndertimin e rrotave te trenit

128

Rrota

Perdorni simbolin “oval” per te bere nje rrote.

Ndryshoni madhesine e saj duke e bere rreth duke specifikuar te njejten gjeresi dhe

lartesi ne dritaren e karakteristikave.

Ndryshojme ngjyren.

Perdorim simbolin “line” per te bere vijat e rrotave.

I ndryshojme madhesine dhe ngjyren.

Perdorim mjetin zoom per te zmadhuar dhe per ti pare objektet me mire.

Bejme nje kopje tjeter te vijes dhe e rrotullojme ate duke perdorur opsionin Rotate 90

Degrees ClockWise.

Modify > Transform > Rotate 90 degrees CW

Zgjedhim rroten dhe vijat e saj dhe e konvertojme ate ne nje simbol grafik te quajtur

“wheel”.

Simbolet Movie Clip ne Flash CS3

Nje simbol movie clip ne Flash CS3 eshte si nje mini- movie. Avantazhi eshte qe ai do te luaje

sipas timeline-it te tij dhe nuk varet nga timeline-i i skenes kryesore. Eshte nje menyre shume e

mire per animacionet qe perseriten qe formojne nje pjese te nje flash movie te plote.

Le te bejme tani rrotat ne nje simbol movie clip sikur te jete duke bere nje levizje rrotulluese.

Animimi i rrotes

Per ta bere rroten nje movie clip:

Selektojme simbolin “wheel” ne skene (qe eshte nje instance e simbolit grafike "wheel")

E konvertojme ate ne nje simbol tjetet te quajtur wheel animation.

Zgjedhim tipin e simbolit “Movie clip” (jo “graphic”).

129

Keyframes ne Flash CS3

Keyframes ne Flash CS3 eshte nje koncept i rendesishem per tu kuptuar.

Timeline, Frames dhe Keyframes

Timeline konsistson nga disa shtresa dhe disa frame brenda cdo shtrese. Ne figuren e timeline

qe jepet me poshte eshte selektuar frame-i i 10-te i shtreses "Train" .

Frame-t e pare te te gjitha shtresave jane keyframes dhe tregohen nga nje background gri dhe

nje pike e zeze. Framet e tjera jane te gjitha bosh.

Le te fillojme tani te animojme rroten ne klipin movie "wheel animation" duke krijuar keyframes

te tjere brenda timeline te klipit movie.

Duke u marre me simbolin "Wheel Animation"

Le te fillojme me simbolin “wheel animation”. Per te bere kete:

Klikojme dy here ne rroten ne skene.

Ju do te shikoni elementet e skenes kryesore pak te zbehura dhe vetem rrotat mbeten

te qarta.

Gjithashtu, ju do te shikoni emrin e simbolit movie clip “wheel animation” qe shfaqet

mbas “Scene 1”.

Ju mund te klikoni ne “Scene 1” per te shkuar pas per ne zonen e skenes kryesore.

130

Animimi i rrotes- Pjesa 1

Tani le te bejme qe rrota te rrotullohet.

Klikojme ne frame-in e 5-te ne timeline te movie clip "wheel animation".

Vendosim nje key frame (klikim djathtas+ “Insert Key Frame”)

Tani e rrotullojme ate me 90 grade ne kahun antiorar

Modify > Transform > Rotate 90 degrees CSW

Edhe pse kjo mund të duket si rrota është e njëjtë, Flash njeh qe rrota eshte rrotulluar

dhe ju mund ta shikoni rezultatin e animimit me pas.

Vendosim nje tjeter key frame tek frame-i 10-te,15-te dhe frame i 20-te duke rrotulluar

cdo here.

Ju mund ta shikoni kete animim:

Control > Test Movie

Ju do te vini re qe rrota do te rrotullohet por levizja eshte mjafte e thate

131

Motion Tweens ne Flash CS3

Motion Tweens ne Flash CS3 jane nje tipar i rendesishem. Bazikisht ne specifikojme pozicionet e

simbolit ne keyframes dhe Flash krijon animimin be(tween) dy keyframe-eve. Kjo na jep ne nje

animim te qarte.

Le te shikojme tiparin tween ne kete shembull duke e bere animimin e rrotes te qarte.

Animimi i rrotes- Pjesa 2

Motion Tween

Per te krijuar levizjen tween ndermjet keyframe-eve ne movie clip "wheel animation" :

Klikim djathtas ne frame-in e pare ne timeline (ose secilin nga frame-t ndermjet 2 keyframe-ve).

Nga opsionet qe shfaqen, selekto “Create Motion Tween”.

Do te shfaqet nje shigjete ndermjet frame-eve 1 dhe 5 ne timeline. Kjo do te krijoje nje animim

te qarte ndermjet rrotes ne frame 1 dhe rrotes ne frame 5.

Klikojme ne frame-t e 5-te, 10-te dhe 15-te dhe krijojme levizje tweens.

Animimi i rrotes tuaj eshte gati.

Ju mund te krijoni nje ide se si duket duke testuar filmin.


Kliko ne Scene 1 per tu kthyer pas tek skena kryesore.

132

Klikim dysh ne mjetin zoom per te pare dimensionet aktuale te skenes.

Beni kopje te rrotes sic kerkohet.

Ja se si do te duket skena tani.

Kur te testoni do te vini re qe te gjitha rrotat do te levizin.

Shtresat e kycura ne Flash CS3

Kycja e shtresave ne Flash CS3 eshte e nevojshme kur duam te manipulojme disa elemente ne

skene pa shqetesuar objektet e tyre. Nje tjeter opsion qe te ndihmon eshte opsioni i fshehjes se

shtreses. Kjo do te fshije shtresen ne menyre qe ne mund te punojme me thjeshte kur numri i

elementeve ne skene rritet, por ende do te shfaqen ne outputin final.

Duke vazhduar me kete shembull le te shikojme opsionin Lock Layer per te zgjedhur me

lehtesishte pjeset e ndryshme te trenit

Animimi i trenit

Tani qe ne kemi te gjitha pjeset e trenit gati, ne jemi gati ta animojme ate.

Zgjedhim te gjitha pjeset e trenit (duke perfshire edhe rrotat).

Menyra me e thjeshte per te zgjedhur te gjitha pjeset e trenit eshte te kycim te gjitha

shtresat e tjera fillimisht ne menyre qe elementet ne keto shtresa te mos selektohen.

Per te kycur nje shtrese, klikojme ne piken poshte simbolit te kycit qe ndodhet ngjitur

me emrin e shtreses ne timeline.

133

Nje menyre tjeter e thjeshte per te selektuar te gjitha pjeset eshte thjeshte duke kliluar key

frame ne shtresen train.

E konvertojme ate ne nje simbol grafike te quajtur “train”.

Tani e selektojme perseri ate (tani simboli “train”) dhe e konvertojme ate ne nje simbol movie te

quajtur “train animation”.

Klikim i dyfishte ne te per tu marre me simbolin “train animation”.

Ne frame-in e pare e pozicionojme ne te djathte(jashte zones se skenes).

Vendosim nje keyframe ne frame-in e 60-te (since the frame rate is 12 frames/ sec, and we want

the train animation to take 5 seconds)

E pozicionojme frame-in ne te majte (jashte zones se skenes).

Krijo nje levizje tween ndermjet dy frame-eve.

Tani testoni filmin [Control > Test Movie]

Ju do te vini re qe treni hyn nga e djathta dhe udhetone pergjate skenes dhe del ngae majta.

Dhe pastaj animimi perseritet prape e prape.

Importimi i Imazheve ne Flash CS3

Ju mund te importoni imazhe .gif dhe .jpg ne Flash. Keto jane imazhe bitmap dhe shumicen e

hereve mund te jene file me madhesi te madhe sesa format e vizatuara brenda vet Flash-it. Kjo

ndodh sepse ajo qe ju vizatoni brenda Flash-it eshte nje imazh vektor dhe eshte nje formule

baze e perdorur nga Flash per te shfaqur vizatimin. Imazhet vektor zakonisht jane me te vogla ne

madhesi dhe mund te zmadhohen pa humbur cilesine. Imazhet bitmap megjithate do te behen

pixilated kur zmadhohen. Ju mund te importoni nje imazh bitmap dhe e konvertojme ate ne nje

imazh vektor duke perdorur opsionin 'Trace Bitmap'.

134

Modify > Bitmap > Trace Bitmap

Tani le te vendosim nje logo te thjeshte (e cila eshte nje imazh gif) ne qoshen e siperme djathtas,

ketu eshte ajo cka ne bejme.

Bejme nje shtrese te re te quajtur “Logo”

Importojme imazhin.

File > Import > Import to Stage

Gjejme imazhin ne kompjuterin tuaj, e selektojme ate dhe e importojme.

Ne do ta shikojme tani imazhin logo.gif ne Library si simbolet e tjera.

Ndryshojme madhesine nese kerkohet dhe e pozicionome ate ne qoshen e siperme djathtas.

Tani e selektojme ate dhe e konvertojme ne nje simbol grafik te quajtur “Logo”.

Publikimi iskedarit Flash CS3

Per te publikuar skedarin tuaj flash ne menyre qe me pas ta vendosni edhe ne website-in tuaj.

Skedari burim (ku ju jeni duke punuar) eshte skedari .fla, por skedari qe duhet te vendosni ne

website duhet te jete nje skedare me prapashtesen .swf . Gjithashtu fillimisht duhet te

siguroheni qe ju keni nje faqe HTML me kodin per te shfaqur skedarin .swf ne menyre qe

browserat sic jane Internet Explorer dhe Firefox te jene te afte te shfaqin skedarin Flash. Se

fundi ju duhet ta ngarkoni ate ne serverin e website-it tuaj duke perdorur nje software FTP sic

eshte psh Filezilla.

File > Publish

Ju mund te merrni edhe nje skedare html dhe skedarin .swf ne te njejten folder ku ndodhet

edhe skedari juaj .fla

Galeri fotosh ne Flash CS3

Le te krijojme nje galeri me foto duke perdorur nje template te gatshem Flash CS3 Photo Slideshow.

Krijo nje dokument te ri Flash duke zgjedhur nje template ekzistues Photo slideshow.

File > New > Templates tab > 'Photo Slideshows' Category > 'Modern Photo Slideshow'

Template

135

Nje album i plote funksional me disa foto default.

136

Testojme skedarin per te pare se si punon : Control > Test Movie

Ruajme dokumentin Flash, duke i dhene atij nje emer.

File > Save

Hapim librarine: Window > Library

Hapim folderin 'photos'.

Klikojme dy here mbi foto per te marre dritaren 'Bitmap Properties‘.

137

Klikoni butonin 'Import' dhe importoni foton tuaj. Ajo do te zvendesoj imazhin default. Albumi i

fotografise eshte i dizenjuar per te treguar foto me dimension 640x480 piksela keshtuqe duhet

te sigurohemi qe fotot te jene te ketyre dimensioneve.

Perserit proceduren per fotot e tjera.

Selektojme frame-in e pare ne shtresen e titujve te timeline. Titulli default per foton e pare do te

selektohet. Ju mund ta shikoni ne kete ne fund te zones se skenes.

138

Klikojme dy here ne titullin dhe editojme tekstin ne titullin e fotos tuaj. Perserite kete per te

gjitha titujt.

Shtojme nje foto

Template-i eshte me 4 foto. Nese keni me shume se 4 foto ndiqni keto hapa:

1. Vendosni nje bashkesi te re frame-sh mbas frame-it te fundit ne cdo shtrese

Klikoni ne titullin e frame-it te fundit > Insert > Timeline > Frame

139

2. Vendos keyframes ne frame-t e reja ne shtresat 'Captions' dhe 'picture layer'.

Klikojme ne frame > Insert > Timeline > Keyframe

3. Importojme foto ekstra the ne librari dhe pastaj i vendosim ato brenda folderit 'photos'.

- File > Import > Import to Library

- Open the Library Window > terheq foton e re ne folderin 'photos'

4. Ne timeline, klikojme ne keyframe-in e fundit te 'picture layer'. Pastaj kliko ne foton qe eshte ne

skene. Fotua do te selektohet dhe ajo do te jete nje dublikate i fotos ne frame-in e meparshem.

5. E shkembejme ate me foton e re ne dritaren Properties.

Ne dritaren 'Properties', klikojme butonin 'Swap'> Selektojme foton e re ne dritaren 'Swap

Bitmap' qe hapet> Kliko OK

6. Ndrysho titullin per foton.

7. Testojme albumin me foto dhe perserisim procesin per te gjitha fotot ekstra qe doni te shtoni.

140

Fshirja e fotove

Ne rast se kemi me pak se 4 foto ne albumin tuaj thjeshte fshije bashkesine e frame-ve ekstra.

Kliko ne titullin e frame-ve qe doni te fshini> Edit > Timeline > Remove Frames

Flash CS3 Quiz

Ne kete tutorial, ne do te krijojme nje quiz duke perdorur nje template te gatshem Flash CS3

Quiz.

Template quiz dizenjohet qe automatikisht te gjurmoje rezultatet dhe ti dergoje ato ne nje

sistem menaxhimi qe meson te konfiguruar per quiz-in tuaj.

1. Krijo nje dokument te ri Flash duke zgjedhur nje template ekzistues Quiz.

File > New > Templates tab > 'Quiz' Category > 'Modern Photo Quiz_style2 ' Template

141

2. Nje quiz i plote funksional me template per Drag dhe Drop, Fill in the Blank, Hot Objects, Hot

Spot, Multiple Choice, and True or False, do te hapet.

3. Testoni filmin


4. Ruani dokumentin Flash, duke i dhene ati nje emer.

File > Save

5. Edito quiz-in sipas kerkesave tuaja.

Tipet Single Quiz

Ju mund te vendosni nje quiz te tipit single psh. Te tipit true ose false, however these stand

alone interactions, when used outside of the quiz template, are not designed for use with

SCORM tracking.

1. Nese ju thjeshte doni te vendosni nje nderveprim single learning ju mund ta beni kete ndermjet:

Window > Common Libraries > Learning Interactions

2. Nje librari e disa nderveprimeve te tjera learning interactions do te hapet. Terhiqni nje nga ato

qe doni ne skene.

142

Krijimi i nje baneri te animuar

Select Start > Programs > Adobe Web Premium CS3 > Adobe Flash CS3.

File > New. Selekto "Flash File (ActionScript 3.0)" dhe kliko OK.

Ne kete shembull do te krijojme nje baner me dimensione 468x60. Per te zgjedhur skenen me

keto dimensione, selekto Modify > Document per te shfaqur kutine Document Properties.

Vendos titullin, pershkrimin, dhe dimensionet ne kutizat e tekstit me poshte. Vini re se ngjyra

e background-it eshte e vendosur ne te bardhe por mund ta ndryshojme. Klik OK.

Select File > Save.

143

Flash Timeline

Ikona "eye" mund te perdoret per ti bere shtresat te dukshme ose te padukshme nderkohe qe

jeni duke punuar.

Ikona "lock" perdoret per te bllokuar perkohesisht ose per te kycur shtresat qe ju nuk doni te

ndryshoni aksidentalisht nderkohe qe jeni duke punuar.

Baneri i animuar luhet( “play”)sapo ngarkohet faqja. Nese ju pelqen qe baneri te luhet perseri,

kliko butonin refresh ne dritaren e browserit(ose shtyp F5 per te rifreskuar faqen).

Ky baner permban tre shtresa: Background, Shape, dhe Text. Shtresa Background kontrollon

ndryshimet e ngjyres ne background-in e filmit. Shtresa Shape konfiguron menyren se si

ndryshon forma ovale. Shtresa Text kontrollon animimin e emrit te kompanise.

Tani do te emerojme "Layer 1" ne "Background".

144

Pastaj shto nje shtrese te re duke klikuar ne ikonen Add New Layer. Vendosi emrin "Shape“ kesaj

shtrese.

Ne te njeten menyre shto nje shtrese te re te quajtur "Text". Renditja e shtresave eshte e

rendesishme.

Konfigurimi i shtreses Background

Shtresa Background permban nje drejtekendesh me te njejtet dimensionet si filmi Flash.

Ju duhet ti thoni Flashit se te cila shtrese jeni duke punuar. Kliko ne Frame 1 ne Timeline ne te

njejtin rresht si shtresa Background selektojme kete shtrese dhe frame.

Perdorni panelin Colors per te zgjedhur ngjyren e lapsit(outline) dhe koven (fill) e trekendeshit

qe do krijoni. Zgjidhni ngjyren me kod #99CCFF.

Pastaj kliko ne Rectangle Tool per te vizatuar drejtekendeshin ne skene. Kursori juaj do

ndryshoje ne "+". Fillo ne qoshen e siperme majtas dhe terhiq nje drejtekendeshin pergjate

skenes.

145

Kliko ne Selection Tool dhe klikim dysh ne ne drejtekendeshin qe sapo krijuat. Klikimi dysh do

te selektoje te dyja edhe formen fill edhe outline.

Nese vlerat "W", "H", "X", dhe "Y" jane te ndryshme, shtyp vlerat e meposhteme ne kutite e

tekstit qe jane me poshte:

W: 468.0 X: 0.0

H: 60.0 Y: 0.0

Kjo mundeson qe drejtekendeshi te vendoset ne qoshen e siperme me te larte (vlera Y) dhe

qoshen me te majte te mundeshme (vlera Y) e vendosur ne skene. Ai gjithashtu konfiguron

drejtekendeshin qe te jete 468 piksela i gjere (vlera W) dhe 60 piksela e larte (vlera H).

146

Pastaj, ju do te shtoni nje keyframe ne shtresen Background Layer ne zonen Timeline Frame.

Vendsoni nje ne Frame1 dhe nje ne Frame 50. (vendosja e keyframe-it mund te behet duke

shtypur F6)

Timeline duhet te duket si ai i treguar me poshte:

Duke selektuar kete frame, ju do te ndryshoni ngjyren e drejtekendeshit tuaj. Duke perdorur

Selection Tool, kliko dy here tek drejtekendeshi. Pastaj perdorni Color Chooser per te zgjedhur

ngjyren #00CCCC edhe per ngjyren e lapsit(outline) edhe per koven(fill) . Drejtekendeshi ne

skene duhet te jete i ngjyrosur me nje blu si me poshte.

Shtimi i animimit ne shtresen Background

Pastaj, ju do te perdorni Flash per te ndryshuar automatikisht ngjyren ne nga blu ne turquoise

ne shtresen Background duke perdorur nje Shape Tween.

Kliko ne frame ndermjet Frame 1 dhe Frame 50 ne shtresen Background. Paneli i Properties do

te shfaq nje menu selektimi Tween. Selekto Shape sic tregohet ne figuren me poshte.

Timeline tani do te na tregoje nje shigjete ndermjet Frame 1 dhe Frame 50. Timeline –i juaj

duhet te shfaqet si ne figuren me poshte. Nese ne vend te kesaj shikoni nje vije me pika, beji

undo punes tende ose beji reload versionit te ruajtur te banner.fla per ta provuar perseri.

147

Testojme animimin e Background-it

Select Control > Test Movie.

Konfigurimi i shtreses Shape

Perpara se te fillojme te punojme ne shtresen Shape, kliko ikonen lock ne shtresen Background

per te parandaluar ndryshimin aksidental te saj.

Tani jemi gati te fillojme me shtresen Shape. Ju duhet ti thoni Flash-it se ne cfare shtrese po

punoni. Kliko ne Frame 1 ne Timeline ne te njejtin rresht me shtresen Shape per te selektuar

kete shtrese dhe kete frame. Shikoni figuren me poshte.

Shtresa Shape permban nje forme ovale qe ndryshon madhesine dhe ngjyren. Perdorni panelin

Colors per te zgjedhur ngjyren per lapsin(outline) dhe koven(fill) e formes ovale qe do te krijoni.

Kliko ne zgjedhesin e ngjyrave color dhe selekto #003366.

148

Pastaj, kliko ne Oval Tool per te vizatuar nje forme ovale ne skene. Kursori juaj do te ndryshoje

ne "+". Fillojme ne qoshen e siperme majtas dhe terheqim nje ovale te vogel ne anen e majte te

skenes. Mos u shqetesoni nese nuk eshte perfekt, ju mund te perdorni panelin Properties per te

percaktuar ekzaktesishte dimensionet.

Skena juaj dhe paneli Properties do te jete i ngjashem si me poshte.

Nese vlerat "W", "H", "X", dhe "Y" jane te ndryshme, shtyp vlerat e meposhteme:

W: 15.0 X: 28.0

H: 10.0 Y: 25.0

Kjo bene qe forma ovale te jete me 25 piksela nga siper(vlera Y) dhe 28 piksela nga e majta

(vlera Y). Forma ovale eshte gjithashtu 15 piksela e gjere(vlera W) dhe 10 piksela e larte (vlera

H).

Pastaj, ju do te shtoni nje keyframe ne shtresen Shape ne zonen e Timeline Frame. Kliko ne

Frame 25 ne shtresen Shape dhe shtyp celsin F6. Kjo vendos nje keyframe ne Frame 25.

Me kete frame te selektuar, ju do te ndryshoni ngjyren dhe formen e Oval. Ju do te perdorni

Selection Tool ne panelin e mjeteve.

149

Kliko ne Selection Tool. Kliko ne formen ovale per te shfaqur panelin Properties. Ndrysho lartesine

ne 100.0. gjeresine ne 200.0 dhe vleren Y ne -10.0. Ndryshoji te dyja edhe ngjyren outline edhe

ngjyren fill ne #006666. Perdorni Color Chooser per te zgjedhur ngjyren #00CCCC edhe per ngjyren e

lapsit (outline) edhe te koves (fill). Kliko ne skene per te pare efektin e vlerave te reja. Panelet e

Properties dhe Stage tregohen me poshte:

Shtresa Background ka 50 frame dhe shtresa Shape Layer ka 25 frame. Kliko ne Frame 50 te

shtreses Shape dhe shtyp celsin F5 per te shtuar frame ne timeline. Shikoni figuren e

meposhteme.

Shtimi i animimit ne shtresen Shape

Pastaj, ju do te perdorni automatikisht Flash per te ndryshuar ngjyren dhe formen e ovales ne

shtresen Shape duke perdorur nje Shape Tween. Kliko ne Frame ndermjet Frame 1 dhe Frame 25 ne

shtresen Shape. Paneli Properties do te shfaq nje menu selektimi Tween. Selekto Shape sic tregohet

ne figuren me poshte

150

Timeline tani do te tregoje nje shigjete ndermjet Frame 1 dhe Frame 25.Timeline tani duhet te duket

si ne figuren me poshte.

Testojme animimin e Background dhe Shape

Select Control > Test Movie.

Konfigurimi i shtreses Text

Perpara se te fillojme punen ne shtresen Text, kliko ikonen lock ne shtresen Shape per te

parandaluar ndryshimin aksidental te saj.

Kliko ne Frame 1 ne Timeline ne te njejtin shtrese me shtresen Text per te selektuar kete shtrese

dhe kete frame. Shikoni figuren me poshte.

Shtresa Text permban tekstin “Animacione kompjuterike" dhe e zhvendosim ate nga e djathta.

Selektojme Text Tool nga paneli Tools. Kursori juaj do te ndryshoje keshtu:

151

Perdorni panelin Property per te konfiguruar fontin, madhesine, dhe ngjyren e tekstit tone. Ne

kete shembull, fonti eshte vendosur ne Broadway BT. Madhesia e fontit eshte e vendosur ne 40.

ngjyra eshte vendosur ne #FFFFFF.

Skena dhe paneli Properties do te jete si me poshte. (Nese paneli juaj Properties nuk shfaqet

automatikisht, selekto Window > Properties > Properties.)

Se dyti ju do te konfiguroni vleren "X"" per te vendosur tekstin me shume jashte skenes ne te

djathte. Ndryshojme vleren X ne 450.0. Skena juaj duhet te jete e ngjashme me figuren me

poshte. Vini re qe teksti fillon afer qoshes se djathte te skenes.

152

Se dyti, ju do te shtoni nje keyframe ne shtresen Text Layer. Kliko ne Frame 40 ne shtresen Text

dhe shtyp celsin F6. Kjo vendos nje keyframe ne Frame 40. Nje keyframe i thote Flash-it qe nje

ndryshim ndodh ne kete frame.

Me kete frame te selektuar, ju do te zhvendosni pozicionin e tekstit. Ose terhiq objektin tekst

me ane te mouse-it ne te majte, ose perdor Select Tool per te klikaur ne objektin tekst dhe

modifiko panelin Properties – ndrysho vleren X ne 40.0. Skena juaj duhet te jete e ngjashme me

figuren me poshte.

Shtresat e tjera kane 50 frame dhe shtresa Text ka vetem 40 frame. Terhiq Frames Timeline ne

menyre qe Frame 50 eshte i dukshem. Kliko ne Frame 50 te shtreses Text dhe shtyp celsin F5 per

te shtuar frame ne timeline. Shikoni figuren e meposhtme.

153

Shtimi i animimit ne shtresen Text

Pastaj, ju do te perdorni Flash per te levizur automatikisht tekstin nga ana e djathte e skenes

(Frame 1) ne vendndodhjen e skenes ne Frame 40. Ju do te konfiguroni nje Motion Tween. Kliko

ne nje Frame ndermjet Frame 1 dhe Frame 40 ne shtresen Text. Paneli Properties do te shfaq

nje menu selektimi Tween. Selekto Motion sic tregohet ne figuren me poshte.

Timeline do te tregoje tani nje shigjete ndermjet Frame 1 dhe Frame 40. Timeline tani duhet te

duket si ne figuren me poshte.

Testo animimin : Select Control > Test Movie.

Vini re se tani teksti leviz nga e djathta ne te majte. Hapi i fundit eshte publikimi i filmit tuaj

(krijo nje .swf) dhe testimi i filmit ne nje faqe web.

Select File > Publish Settings

Muzika ne Flash CS3

154

Adobe Flash CS3 ofron disa menyra per te perdorur tingujt,ai mund te beje qe tingujt te luhen

njeri pas tjetrit (ne menyre te vazhdueshme), te pavarura nga Timeline, ose te perdoresh

Timeline per te sinkronizuar animimin me nje tingull.

Ka dy lloje tingujsh ne Flash: tingujt event dhe tingujt stream.

Nje tingull event duhet te shkarkohet i plote perpara se te filloje te luhet, dhe ai

vazhdon te luhet derisa te ndaloje ne menyre eksplicite.

Tingujt stream fillojne te luhen per aq kohe sa mjaftueshem te dhena per disa nga

framet e para jane shkarkuar; tingujt stream jane te sinkronizuara ne Timeline per

luajtjen ne nje website.

Nese jeni duke krijuar nje permbajtje ne Flash per paisjet mobile, Flash te lejon gjithashtu te

perfshishe tinguj device ne file-in tuaj SWF. Tingujt e paisjeve jane te koduara ne formatin audio

te suportuar nga paisja, sic eshte MIDI, MFi, ose SMAF.

Ju gjithashtu mund te lidhni nje tingull me disa dokumente. Ju mund te perdorni gjithashtu

ActionScript 2.0 ne eventin SoundComplete per te thirrur nje event te bazuar ne perfundimin e

nje tingulli.

Ju mund te ngarkoni tinguj dhe te kontrolloni sound playback duke perdorur sjellje te

parashkruara ose komponentet media; gjithashtu mundeson nje kontrollues per stop, pause,

rewind, dhe keshtu me radhe. Ju mund te perdorni gjithashtu ActionScript 2.0 ose 3.0 per te

ngarkuar tinguj dinamikisht.

Importimi i tingujve

Ju mund te vendosni file tingujsh ne Flash duke i importuar ato ne librari per nje dokument

Mund te importoni formatet e meposhtem sound file ne Flash:

WAV (Windows only)

AIFF (Macintosh only)

mp3 (Windows or Macintosh)

Nese keni QuickTime 4 te instaluar ne sistemin tuaj, ju mund te importoni edhe keto

formate file-sh:

AIFF (Windows ose Macintosh)

Sound Designer II (vetem Macintosh)

Sound Only QuickTime Movies (Windows ose Macintosh)

155

Sun AU (Windows ose Macintosh)

System 7 Sounds (vetem Macintosh)

WAV (Windows ose Macintosh)

Flash ruan tingujt ne librari se bashku me bitmaps dhe simbolet.

Nese doni te ndani tingujt ndermjet dokumenteve Flash, ju mund te perfshini tingujt ne

librarite shared.

Tingujt mund te zene sasi te madhe te memories se diskut dhe te RAM-it. Megjithate,

tingujt mp3 jane me te kompresuar dhe me te vegjel se WAV ose AIFF.

Nese doni qe te shtoni efektet ne tingujt ne Flash, eshte me mire te importosh tinguj me

16-bit. Nese keni RAM te limituar puno me tinguj 8-bit ne vend te tingujve16-bit.

Importimi i nje tingulli

Selekto File > Import > Import To Library.

Ne kutine e dialogut Import, lokalizo dhe hap file-in e deshiruar te tingullit.

Shtimi i nje tingulli ne Timeline

Ju mund te shtoni nje tingull tek nje dokument duke perdorur librarine, ose mund te ngarkoni

nje tingull ne nje file SWF gjate kohes se ekzekutimit, duke perdorur metoden loadSound te

objektit Sound .

156

1. Importo tingullin ne librari.

2. Selekto Insert > Timeline > Layer.

3. Me shtresen e re sound te selektuar, terhiq tingullin nga paneli Library per ne skene. Tingulli

eshte shtuar ne shtresen e siperme. Ju mund te vendosni disa tinguj ne nje shtrese ose ne

shtresat qe permbajne objekte te tjera. Megjithate, rekomandohet qe cdo tingull te vendoset ne

nje shtrese te ndare. Cdo shtrese vepron si nje a kanal tingulli i ndare. Tingujt ne te gjitha

shtresat kombinohen kur ju luani file-in SWF.

4. Ne Timeline, selekto frame-in e pare qe permban skedarin tingull.

5. Selekto Window > Properties > Properties, dhe kliko shigjeten ne qoshen e siperme djathtas per

te zgjeruar the Property inspector.

6. Ne inspektorin Property, selekto file-in tingull nga menuja pop-up Sound.

7. Selekto nje opsion efekti nga menuja pop-up Effects :

None, nuk aplikon asnje efekt ne sound file. Selekto kete opsion per te fshire efektet e

aplikuara me pare.

Left Channel/Right Channel, tingulli luhet vetem ne kanalin e majte ose te djathte.

Fade Left To Right/Fade Right To Left, zhvendos tingujt nga nje kanal ne nje tjeter.

Fade In, gradualisht rrit volumin e nje tingulli gjate jetegjatesise se tij.

Fade Out, gradualisht zvogelon tingullin gjate zgjatjes se tij.

Custom, ju lejon te krijoni efektin duke perdorur Edit Envelope.

157

8. Selekto nje opsion sinkronizimi nga menuja pop-up Sync :

Event, sinkronizon tingullin vetem gjate ndodhjes se nje eventi. Nje tingull event, sic

eshte nje tingull qe luhet kur perdorues klikon nje buton, luhet kur keyframe-i tyre i pare

fillimisht shfaqet dhe luhet ne teresine e saj, ne menyre te pavarur nga Timeline, edhe

nese file-i SWF ndalon se luajturi. Tingujt event miksohen kur ju luani file-in tuaj te

publikuar SWF. Nese nje tingull event eshte duke luajtur dhe tingulli kerkohet te

ilustrohet perseri(psh, nga perdoruesi duke klikuar perseri butonin), instanca e pare e

tingullit vazhdon te luhet dhe nje tjeter instance fillone te luhet njekohesishte.

Start, njesoj si Event, pervecse nese tingulli eshte tashme duke luajtur, nuk luan asnje

instance e re e tingullit.

Stop, e bene silenciozo tingullin e specifikuar.

Stream, sinkronizon tingullin per luajtjen ne nje website. Flash forcon animimin per te

mbajtur ritmin me tingujt stream. Ndryshe nga tingujt event, tingujt stream ndalojne

nese file SWF ndalon se luajturi. Gjithashtu, nje tingull stream asnjehere nuk mund te

luaj me shume se gjatesia e frameve qe ai okupon. Tingujt stream jane te miksuara kur

ju publikoni file-in tuaj SWF. Nje shembull i nje tingulli stream eshte zeri i nje karakteri

ne nje animim qe luhet ne disa frame.

158

9. Vendos nje vlere tek Repeat per te specifikuar numrin e hereve qe nje tingull duhet te

perseritet, ose selekto Loop per te perseritur tingulllin ne vazhdimesi. Per loje te vazhdueshme,

vendos nje numer mjaft te madh qe te luaj tingullin per nje kohe shume te gjate. Per shembull,

per nje tingull 15-sekonda per ta bere ate qe te luhet per 15 minuta, vendos 60. Perdorimi i

tingujve Looping stream nuk rekomandohet. Nese nje tingull stream vendoset tek loop, framet

shtohen nee file dhe madhesia e file-it rritet nga numri i hereve qe tingulli eshte looped.

10. Per te testuar tingullun, terhiq playhead mbi framet qe permbajne tingullin ose perdor

komandat ne menune Controller ose menune Control.

Sinkronizimi i nje tingulli me animimin

Per te sinkronizuar nje tingull me animimin, ju mund te startoni ose te ndaloni(stop) tingullin ne

keyframes.

1. Shtoni nje tingull ne nje dokument.

2. Per te sinkronizuar kete tingull me nje event ne skene, selekto nje keyframe fillestar qe

konrespondon me keyframe-in e ngjarjes ne skene. Ju mund te zgjidhni nje nga opsionet e

sinkronizimit.

3. Krijoni nje keyframe ne shtresen e tingullit ne Timeline tek frame-i ku doni qe te mbaroj tingulli.

Nje paraqitje e file-it te tingullit shfaqet Timeline.

4. Zgjidh Window > Properties > Properties

5. Ne Property inspector, selekto te njejtin tingull nga menuja pop-up Sound.

6. Selekto Stop nga menuja pop-up Sync. Kur ju luani file-in SWF file, tingulli ndalon se luajturi kur

ai arrin keyframe-in e fundit.

7. Per ta luajtur perseri tingullin, thjeshte levizni playhead.

Shtimi i nje tingulli tek butoni

Ju mund ti shoqeroni tingujt me gjendje te ndryshme te nje simboli butoni. Per arsye se tingujt

ruhen se bashku me simbolin, ata punojne per te gjitha instancat e simbolit.

1. Selekto butonin ne panelin Library.

2. Selekto Edit nga menuja e panelit.

3. Ne Timeline-in e butonit, shto nje shtrese per tingullin (Insert > Timeline > Layer).

159

4. Ne shtresen sound, krijoni nje keyframe te rregullte ose te bardhe(blank) te konrespondoje me

gjendjen e butonit per te cilen ju doni te shtonje nje tingull (Insert > Timeline > Keyframe ose

Insert > Timeline > Blank Keyframe).Per shembull , per te shtuar nje tingull qe luhet kur ju klikoni

butonin, krijoni nje keyframe ne frame-in e etiketuar Down.

5. Kliko keyframe-in qe krijuat ju.

6. Selekto Window > Properties > Properties.

7. Ne Property inspector, selekto nje file tingulli nga menuja pop-up Sound.

8. Selekto Event nga menuja pop-up Sync. Per ti shoqeruar nje tingull te ndryshem me secilin nga

butonat e keyframes, krijoni nje keyframe blank dhe shtoni nje tingull tjeter percdo keyframe. Ju

mund te perdorni gjithashtu te njejtin file tingulli dhe te aplikoni nje efekt tingulli te ndryshem

percdo keyframe butoni.

Editimi i nje tingulli

Ju mund te percaktoni piken e fillimit te nje tingulli ose te kontrolloni volumin e tingullit

nderkohe qe ai po luhet. Ju gjithashtu mund te ndryshoni piken ne te cilen nje tingull fillon dhe

piken ne te cilen mbaron. Kjo eshte e nevojshme per ti bere file-t e tingullit me te vogla duke

fshire seksionet e paperdorura.

1. Shtoni nje tingull ne nje frame, ose selektoni nje frame qe tashme permban nje tingull.

2. Selekto Window > Properties > Properties.

3. Kliko butonin Edit ne anen e djathte te Property inspector.

4. Beji hapat e meposhtem:

Per te ndryshuar pikat e fillimit dhe te fundit te nje tingulli, terhiq kontrollet Time In

dheTime Out ne Edit Envelope.

Per te shfaqur me shume ose me pak tingull ne dritare , kliko butonat Zoom In ose Out.

Per te ndryshuar njesite e kohes ndermjet sekondave dhe frameve, kliko butonat

Seconds dhe Frames.

5. Per te degjuar tingullin e edituar, kliko butoni Play.

160

Perdorimi i tingujve ne Flash Lite

Adobe Flash Lite suporton dy tipet e tingujeve: tingujt standarde Flash, si ato qe perdoren ne

aplikacionet Flash desktop, dhe tingujt e paisjeve. Flash Lite 1.0 suproton vetem tingujt e

paisjeve; Flash Lite 1.1 dhe 2.x suporton te dyja tingujt standarte dhe tingujt e paisjeve.

Tingujt e paisjeve ruhen ne file-in e publikuar SWF ne formatin e tyre ametare audio (sic eshte

MIDI ose MFi); gjate playback, Flash Lite kalon te dhenat tingull ne paisje, e cila dekodon dhe

luan tingujt. Per shkak se ju mund te importoni shumicen e formateve audio te paisjes ne Flash,

ne vend te kesaj ju mund te importoni nje tingull ne nje format te suportuar (sic eshte mp3 ose

AIFF) qe eshte zvendesuar me nje paisje te jashtme tingulli qe ju specifikoni.

Ju mund te perdorni keto lloj tingujsh vetem si tinguj event—mund te sinkronizoni tingujt e

paisjes me Timeline, sic beni me tingujt standarde.

Flash Lite 1.0 dhe Flash Lite 1.1 nuk i suporton tiparet e meposhteme qe jane ne versionin

desktop te Flash Player:

Objekti ActionScript Sound

Ngarkimi i fileve te jashtme mp3

Opsioni Speech Audio Compression

Kompresimi i tingujve per eksport

Ju mund te zgjidhni opsionet e kompresimit per eventet individuale te tingujve dhe eksportoni

tingujt me keto karakteristika. Ju mund te selektoni gjithashtu opsionet e kompresimit per

161

tingujt individual stream. Megjithate, te gjithe tingujt stream ne nje dokument jane eksportuar

si nje file i vetem stream, duke perdorur karakteristikat me ta larta te te gjitha atyre te aplikuara

ne tingujt individual stream. Keto perfshijne tingujt stream ne objektet video.

Nese zgjidhni nje kompresim global per tingujt event ose tingujt stream ne kutine e dialogut

Publish Settings, keto karakteristika aplikohen ne tingujt evente individuale ose te gjitha tingujt

stream nese ju nuk zgjidhni nje karakteristike kompresimi per tingujt ne kutine e dialogut Sound

Properties.

Ju gjithashtu mund te refuzoni nje karakteristike eksporti te specifikuar ne kutine e dialogut

Sound Properties duke selektuar Override Sound Settings ne kutine e dialogut Publish Settings.

Ky opsion eshte i perdorshem if nese doni te krijoni nje file audio me besueshmeri te larte per

perdorim lokal dhe nje version me pak i besueshem per web.

Shkalla sampling rate dhe shkalla e kompresionit bene nje diference domethenese ne cilesi dhe

ne madhesiin e tingujve te eksportuar ne filet SWF. Sa me shume ta kompresoni nje tingull dhe

sa me e ulet te jete sampling rate, aq me e vogel madhesia dhe aq me e ulet cilesia. Ju duhet te

eksperimentoni per te gjetur balancen optimale ndermjet cilesise te zerit dhe madhesise se file-

it.

Kur jemi duke punuar me filet e importuare mp3, ju mund te eksportoni file-et me formatin mp3

duke perdorur te njejtat karakteristika qe file-et kishin kur u importuan.

Vini re: Ne Windows, ju mund te eksportoni te gjitha tingujt nga nje dokument si nje file WAV

duke perdorur File > Export > Export Movie.

Ndertimi i nje wallpaper-i te animuar per telefonin tuaj mobile duke perdorur FLASH CS3

Nese keni nje telefon celulare qe ka te instaluar Flash Lite Player, ju mund te krijoni wallpaper-at

tuaj unike.

Pjesa A – Kontrollojme nese Flash Lite Player eshte i instaluar ne paisjen tuaj.

Shumica e celulareve tani shiten bashke me Flash Lite Player te instaluar, qe do te thote qe

celulari juaj ka gjithcka qe i duhet per te shfaqur permbajtjen e Flash-it. Nese nuk jeni te sigurte,

ka dy menyra te thjeshta per te kontrolluar.

1. Hap Adobe Device Central CS3. Ky aplikacion eshte pjese e e Adobe Creative Suite dhe

mund te gjendet ne te njejtin seksion te menuse se programeve tuaja nga ku hapni edhe

Flash-in.

2. Adobe ka perfshire Device Central CS3 per ta bere me te lehte per zhvilluesit zhvillimin dhe

ndertimin dhe per ti bere preview permbajtjes per celularet. Aplikacioni ka emulator per te

162

gjitha paisjet mobile qe mund te ekzekutojne Flash Lite Player. Adobe mundeson gjithashtu

update-imin per te gjetur paisjet me te fundit ne menyre qe te perfshihen ne Device Central.

Emulatoret na mundesojne qe te shikojme paraprakisht si duket permbajtja ne nje paisje

specifike. Kur ju selektoni dhe perdorni nje emulator, thjeshte mendoni per te si nje version

virtual i celularit tuaj.

Emulatoret jane fantastike sepse ata ju lejojne qe edhe te ndryshoni disa nga parametrat ne

lidhje me paisjen. Per shembull, ju mund te zvogeloni sasine e fuqise se baterise se mbetur ne

telefon ose te shikoni se si do te dukej telefoni duke perdorur reflektime te ndryshme.

Figura me poshte tregon emulatroin per Nokia 6300 qe tregon nje preview se si duket nje

wallpaper i animuar kur telefoni ka nje reflektim outdoor.

Krijo nje file te ri Flash File ne Adobe Device Central duke selektuar File >New Document In >

Flash.

3. Tani qe keni hapur Adobe Device Central, shikoni ne panelin Available Devices qe ndodhen ne

te majte perpiquni te gjeni celuluarin tuaj. Nese e gjeni celularin tuaj, selektoje ate dhe kliko dy

here radhazi. Nese jo, do te thote qe telefoni juaj nuk eshte kompatibel me Flash Lite Player.

Faqja e Adobe permban nje liste te plote te paisjeve kompatibel:

http://www.adobe.com/mobile/supported_devices/

163

Sapo te keni gjetur nje celulare kompatibel ne list mund te filloni te krijoni animimin tuaj qe

mund ta perdorni per wallpaper ose screensaver.

Jane dy menu ne krye te panelit te Device Central. E para quhet Device Profiles. Kjo pjese

permban informacion per telefonin tuaj dhe formatet e skedareve qe ai mund te pranoje.

Menuja e dyte eshte New Document tab.

Kliko kete menu dhe pastaj kliko dy here ne imazhin e kutizes se bardhe qe ka logon e Flash-it.

Kjo lancon Flash CS3 dhe hap nje file qe eshte permasa korrekte per nje wallpaper ose

screensaver tuaj.

Selekto Control > Test Movie dhe do te shikoni qe Flash shfaq file-in tuaj ne emulatorin e

celularit ne Device Central.

164

Pjesa B – Krijimi i animimit

Krijohet nje animim i thjeshte duke perdorur metoden tradicionale te vendosjes manuale te

keyframe-ve dhe ne ndryshimin e permbajtjes se cdo keyframe.

Ju mund te perdorni gjithashtu motion tweens dhe me shume teknika te tjera te avancuara per

te krijuar animacione per celularin, keto teknika zene nje memorie me te madhe dhe prandaj

ekspertet rekomandojne qe do te ishte me mire qe ju te perdornit thjeshte keyframing kurdo qe

eshte e mundur.

1. Selekto Selection Tool nga menuja e tools dhe pastaj selekto nje ngjyre background per

animimin tuaj ne menune Properties.

2. Klikim dysh ne shtresen e tekstit Layer 1 ne timeline dhe i vendosim emrin Background kesaj

shtrese. Ne kete shtrese vizato cdo element shtese qe doni ne background-in tuaj.

Shto nje shtrese te dyte duke klikuar ne butonin Insert Layer. Vendosi kesaj shtrese emrin: character.

165

4. Ne kete shtrese te re, perdor mjetet e vizatimit per te krijuar karakterin qe doni te animoni.

Meqenese ne do te perdorim vetem teknikat tradicionale keyframing per kete animim, ju mund

te vendosni tekste ose elemente te tjere ne kete shtrese.

5. Tani do te shtonjme nje keyframe ne cdo nga dy shtresat ne frame-in e dyte. Kliko ne frame-in e

dyte ne cdo shtrese dhe shtyp F6 per te krijuar keyframes te reja. Timeline tani do te duket si

kjo.

6. Sigurohuni qe keyframe i dyte ne shtresen character eshte selektuar dhe ne kete frame beni disa

ndryshime ne karakterin tuaj. Ju mund te ndryshoni ngjyren e pjeses se karakterit tuaj ose leviz

pjese te caktuara te karakterit psh. Ndrysho pozicionin e syve ose formen e gojes.

7. Perserit hapat 5 dhe 6 derisa te arrini te ndertoni nje sekuence animimi te shkurter.

Figura me poshte tregon timeline-in per animimin.

8. Per te pare paraprakisht animimin tuaj: Control > Test Movie.

166

Pjesa C – Publiko animimin tuaj ne Flash Lite 1.1

1. Kthehuni ne Flash CS3 dhe ruani file-in tuaj. Pastaj selekto File > Publish Settings.

2. Nga menuja Formats (qe tregohet ne te djathte) sigurohunu qe kutiza Flash (.swf) eshte e

zgjedhur.

3. Sapo file eshte ne celularin tuaj, lokalizoje ate (shiko per Flash logo). Sapo file selektohet, ju do

te shikoni qe keni disa opsione ku perfshihen edhe vendosja e file-it tuaj si wallpaper ose

screensaver.

Selekto opsionin qe doni dhe shtypni OK.

Tani ju keni wallpaper ose screensaver tuaj unike.

3. Selekto tabin Flash dhe shiko se cfare versioni te Flash Player do te ekzekutoje animimi juaj. Mos

beni asnje ndryshim. Ne thjeshte e kemi hapur kete per te treguar se si mund te beni

ndryshimet per te kontrolluar se me cilin Flash Player do ekzekutohet animimi. Vini re se cdogje

167

qe publikoni ne Flash Lite 1.0 ose Flash Lite 1 1.1 do te ekzekutohet ne Flash Lite 2.0 dhe po

ashtu ne Flash Lite 3.0.

4. Kliko ne butonin Publish ne fund te Publish dhe shtyp OK.

Tani skedari juaj .swf file eshte gati per tu vendosur ne celularin tuaj.

Pjesa D – Transfermimi i animimit tuaj ne celular dhe vendosja e tij si Wallpaper ose Screensaver.

1. Kjo eshte pjesa qe duket e nderlikuar nese nuk keni kopjuar asnjehere nje file ne celularin tuaj

me pare. Megjithate, eshte mjafte e thjeshte. Shmica e telefoneve celulare keto dite kane nje

kabell USB me ane te se cilit mund te lidheni me telefonin tuaj. Kjo do tju mundesoj qe te

kopjoni thjeshte file-in tuaj ne nje folder te telefonit njesoje sikur e vendosni nje folder ne nje

CD. Nese nuk keni kabell USB, ju mund te perdorni Bluetooth per te hedhur file-in nga

kompjuteri ne telefon.

168

Vendosja e video-ve ne Flash

Ky leksion prezanton se si te paraqitesh nje thumbnail si buton play per video-n tuaj ne nje faqe

web.

Se pari, konverto disa video ne FLV. (FLV eshte formati me popullor i video-ve online). Pastaj

beni nje buton qe te luaj kur te doni ju. Dhe se fundi e vendosim ate ne nje faqe web.

Ne kete artikull, do te mesoni:

Si te konvertoni disa video ne FLV

Si te bejme nje thumbnail si nje buton play per video

Si te vendosim nje video ne faqen tuaj web

Hapi1: Konvertoni videot tuaja te formateve te ndryshme ne FLV

Hap Sothink Video Encoder per Adobe Flash. Selekto videon qe doni te konvertoni. Hapni Video

Encoder per Adobe Flash, dhe selekto nje file video. Disa formate videosh suportohen. Pastaj

klikoni “Next”.

Specifikoni karakteristikat audio dhe video per output FLV, dhe klikoni “next”.

Selekto “Generate FLV”, “Generate SWF”, “Generate HTML”, dhe “Auto play”. Gjithashtu selekto

169

“Get the FLV path from a URL variable and play progressively” dhe specifiko nje emer. Kliko

“Next”.

Ju gjithashtu mund te krijoni nje thumbnail vet.

Zgjidhni skin dhe stilin per playback.

Kliko "Next" per te filluar konvertimin. Mbas disa minutave, ju do te merrni file-t tuaja FLV, SWF, HTML

dhe JPG (Thumbnail).

170

Hapi 2. Beni thumbnail si nje buton play per video-n tuaj

Hap Adobe Flash CS3 dhe krijoni nje dokument te ri Flash te ActionScript 2.0.

Kliko butonin Size ne fund te programit per te ndryshuar dimensionet e dokumentit.

Kliko “File >Import >Import to Stage…”, dhe selekto thumbnail qe sapo krijuat.

Ndryshoni vlerat e X, Y ne 0; ai do te koncidoje me background te bardhe.

Ne skene, klikim i djathte ne imazh, dhe selekto “Convert to Symbol…” nga menuja qe shfaqet.

171

Thjeshte selekto “Movie clip” dhe kliko OK. Pastaj ajo do te gjendet ne librari.

Shtyp F9 per te hapur kutine Action per simbolin e selektuar. Shto Action Script si kjo:

172

Eksportoje ate dhe emertoje si “loader.swf”.

Hapi3. Si te vendosesh nje video Ne nje faqe web

Hap file-in e konvertuar: kungfu-panda.htm ne Dreamweaver, dhe do te shikoni te gjithe kodin

burim. Thjeshte zvendeso “kungfu-panda.swf” ne “loader.swf”:

Gjeja e fundit eshte ngarkimi ne FLV, SWF, dhe Thumbnail file-et JPG ne folder kur ju vendosni

video-n tuaj ne faqen web (ketu eshte kungfu-panda.htm) ne server-in tuaj.

Flash Slideshow

Slideshow u krijua duke perdorur Flash. Megjithate, ju nuk u duhet te dini si ta zhvilloni ne Flash,

mjafton ta shkarkoni dhe ta konfiguroni kete slideshow per te shfaqur imazhet tuaja!

Kjo per arsye se slideshow perdor nje menyre te thjeshte per te edituar file-t XML ku ndodhen

emrat e imazheve qe ai shfaq. Eshte e lehte te konfigurosh filet XML dhe ta perdoresh kete slide

show per website-in tuaj.

Shikoni shembullin slideshow.htm ne nje browser per te marre nje ide se si punon slideshow.

Folderi i imazheve permban imazhet qe slideshow do te shfaq.

File myimages.xml liston emrin e fileve imazh.

slideshow.htm eshte nje faqe testimi,demonstrimi e slideshow.

slideshow.swf eshte filmi Flash qe vendoset ne faqen web per te luajtur slideshow-n.

Hapni folderin images per te pare emrat e fileve imazhe qe ai permban. Kopjoni imazhet tuaja

ne folderin e imazheve. (nese doni ju mund ti fshini imazhet qe jane per demonstrim).

http://webdevfoundations.net/slideshow/slideshow.htm

173

slide show do te punoje me mire nese te gjitha imazhet tuaja do te jene optimizuar per Web,

dhe te jene te se njejtes madhesi, dhe te kene orientim landscape.

Shikojme file-in XML myimages.xml ne nje editor tekst, Notepad, ose Adobe Dreamweaver. Do

te vini re disa komente ne krye te file-it. Kjo te shpjegon se si te rregullosh oren dhe shfaqjen e

slideshow.

Shikoni kodin XML, te shfaqur me poshte:

<slides fader="5" process="sequential" loop="yes" >

<image path="images/bay.jpg" />

<image path="images/bay2.jpg" />




</slides>

Shfaqni imazshet tuaja

Per te konfiguruar slideshow-n qe te shfaq imazhet tuaja ju do te duhette modifikoni elementet

e imazhit. Cdo imazh qe doni qe te shfaqet ne slide show duhet te kete nje element

konrespondues ne file-in XML. Elementi imazh percakton rrugen per tek file-i imazh.

Edito file-in tuaj XML qe te konrespondoje me imazhet qe ju ruajtet ne folderin imazhet.

Psh, if nese keni nje imazh qe quhet flower.jpg ne folderin e imazheve, modifikoni elementin e

pare te imazheve ne file-in XML si me poshte:

<image path="images/flower.jpg" />

Nese ju keni me pak file imazh, fshini ato elemente qe i keni teper tek file .xml.

Kur mbaroni se edituari, ruani file-in myimages.xml ne te njejtin folder me file-in slideshow.swf.

Testo slideshow.html.

Vendos slideshow ne faqen tuaj web. Nese jeni duke perdorur Dreamweaver, selekto Insert >

Media > Flash dhe gjej file-in slideshow.swf. Nese jeni duke perdorur nje editor teksti, perdorni

kodin e meposhtem:

<object type="application/x-shockwave-flash"

data="slideshow.swf"

width="215" height="165"

title="Relaxing Scenes in Door County, Wisconsin">

<param name="movie" value="slideshow.swf" />

<param name="quality" value="high" />

174

<p>This slideshow contains photographs of Door County, Wisconsin.</p>

</object>

Kur te ngarkoni file-t tuaja ne Web, sigurohuni qe te ngarkoni folderin images, slideshow.swf,

dhe myimages.xml.

Po cfare eshte XML?

XML është gjuhë skriptuese që i takon familjes së SGML. XML ka të njëjtën formë sikur

edhe HTML me disa përjashtime më profesionale.

XML (eXtensible Markup Language) është një gjuhë e ngjashme me HTML, por qëllimi i saj nuk

është formatimi i tekstit. Qëllimi i XML është sistemimi dhe organizimi i një dokumenti në një

mënyrë të tillë që informacioni të jetë i vetë-përshkruar.

Etiketat e HTML janë të gjitha njësoj pavarësisht nga përmbajtja e tyre, ndërsa etiketat e XML

mund t'i zgjedhësh si të duash që të përshkruajnë vetë tekstin që përmbajnë.

<Universiteti>

<Emri>SEEU</Emri>

<fakulteti> <EmriIFakultetit>CST</EmriIFakultetit> <Lenda1>C++</Lenda1>

<Lenda2>XML</Lenda2>

<Lenda3>Database system management</Lenda3>

</fakulteti>

</Universiteti>

Ndertimi i nje Website ne flash CS3

Krijimi i nje dokumenti te ri Flash CS3 ActionScript 3.0

Le te fillojme duke krijuar nje dokument te ri Flash CS3. Per te bere kete:

Hap Flash CS3 Professional

Krijo nje file te ri

Zgjidh Flash File (ActionScript 3.0)

Specifiko dimensionet e Flash File

Modify > Document

http://sq.wikipedia.org/wiki/SGML

http://sq.wikipedia.org/wiki/HTML

175

770 px Width

400 px height

Ruaj Flash File: File > Save

I vendosim atij nje emer psh website.fla dhe e ruajme ne nje folder ne kompjuter.

Vendosni emrin e shtreses ‘Mast’.

Krijoni nje drejtekendesh te kuq dhe konvertojeni ate ne nje simbol grafik te quajtur

‘rectangle’

Butonat ne Flash CS3

Nje tipar i nevojshem ne Flash CS3 eshte simboli i butonit. Nje simbol butoni ju lejon ju te

specifikoni se si do te duket butoni fillimisht (zona e klikushme), dhe gjithashtu kur te kesh

mousin mbi te (skena 'Over') dhe kur eshte i klikuar(gjendja 'Down'). Ai gjithashtu ju lejon te

specifikoni zonen aktuale qe eshte e klikueshme (zona 'Hit').

Le te krijojme butonat per website-in tone.

Bejme nje shtrese te re te quajtur “buttons”.

Terhiq simbolin “rectangle” nga menuja ne skene.

I ndryshojme permasat dhe e rrotullojme ne menyre qe te krijojme nje buton.

E konvertojme ate ne nje simbol buttoni te quajtur ‘Button_Bg’

176

Klikim dysh ne butonin qe eshte ne skene.

Vendos nje keyframe per down, over dhe hit.

Ndrysho ngjyren ne panelin properties per gjendjet over dhe down.

Kthehemi pas tek skena kryesore duke perdorur mjetin e tekstit shkruaj ‘Home’ –

rrotulloja ate qe te vendoset mbi butonin e pare.

Bejme 3 instanca te tjera (copy + paste) te simbolit button_bg (along with the text) dhe

pozicionit sic kerkohet.

Ndrysho tekstin ne ne te katert butonat perkatesishte ne ‘Services’, ‘About Us’ dhe

‘Contact Us’.

Emrat e instancave te butonit

Ne menyre qe te jemi te afte te manipulojme keto butona me vone duke perdorur ActionScript

3.0, ne do te na nevojitet te japim nga nje emer per secilen instance te butonit.

Kliko ne instancen 'Home' te button_bg dhe i japim emrin e instances 'Home' ne panelin

Properties.

Perserit procesin 'Service', 'AboutUs' dhe 'ContactUs'. Vini re se ju nuk mund te

vendosni nje hapesire ne emrin instances.

177

Butoni Logo

Ne duam gjithashtu qe logua te importohet dhe duke e klikuar ta coj vizitorin ne website-in e

specifikuar. Per kete ne kemi nevoje te konvertojme logon ne nje simbol butoni gjithashtu.

Ne nje shtrese te quajtur ‘Logo’, importo logon ose nje imazh cfardo dhe konvertoje ate

ne nje simbol button te quajtur ‘logo’.

Klikim dysh ne te dhe krijojme nje keyframe per zonen “Hit”, mund te krijoni nje

drejtekendesh qe mbulon zonen logo ose riperdorni simbolin e drejtekendeshit.

Kthehuni pas ne skenen kryesore dhe poziciononi logon sic deshironi. Sigurohuni qe te

keni vene emrin e instances “Logo” ne panelin properties.

Etiketat per faqet e Website ne Flash CS3

Etiketat ne Flash CS3 jane nje koncept i rendesishem per tu kuptuar. Ato na mundesojne qe

vizualisht te shikojme seksione te ndryshme te Flash movie. Ato gjithashtu na lejon qe te

drejtojme Flash se ku te shkoje kur perdoruesi klikon ne dicka.

Tani duhet te shtojme permbajtjen per faqet e ndryshme dhe u japim atyre etiketat pershtatese

Permbajtja e faqes

Ne nje shtrese te re “content”, perdorni mjetin e tekstit per te shkruajtur koken e faqes “Home”

dhe nje permbajtje te thjeshte te faqes.

Jepi kokes(header) nje ngjyre te kuqe dhe nje madhesi fonti me te madhe.

Vendos nje keyframe ne frame 10 ne shtresen ‘content’.

Ndryshoni tekstin e kokes ne ‘services’ dhe permbajtjen ne te njejten menyre.

Perserit procesin ne frame 20 dhe 30, Duke ndryshuar koken respektivisht ne ‘About Us’ dhe

‘Contact Us’.

178

Selekto permbajtjen ne frame 1 dhe konvertoje ate ne nje simbol movie clip te quajtur ‘Home’.

Kjo do te na lejoje ne qe shume thjeshte te editojme permbajtjen per kete faqe me vone.

Perserit procesin per permbajtjet e services, about us dhe contact us.

Per te gjitha shtresat, vendos nje frame ne frame-in 39 ne menyre qe te gjitha shtresat te

shperndahen deri tek frame 39.

Etiketat

Kliko ne frame 1 ne shtresen 'content' dhe i japim asaj emrin e etiketes “Home” ne

panelin properties.

Perserit procesin per keyframet e tjere ne shtresen ‘content’ , duke i etiketuar ato

respektivisht 'Services', 'About Us' dhe 'Contact Us'.

Ju do te mund ti shikoni etiketat ne timeline.

ActionScript 3.0 ne Flash CS3

Ne menyre qe te shtojme interaktivitetin ne Flash CS3 ne duhet te mesojme pak ActionScript e

cila eshte nje gjuhe skriptimi Flash.

179

Kur shikuesi klikon ne logo ai duhet te shkoje ne website http://www.vineyardesigns.com/. Kur

shikuesi klikon ne butonat ne krye, frame-t respektive me permbajtjen relevante duhet te

shfaqen.

Kodi Stop per ActionScript 3.0

Nese “luani” filmin flash do te shikoni qe ai animon te gjitha frame-t. Ne duam qe te

qendrojme ne frame 1 derisa te klikohet dicka. Per kete:

Krijoni nje shtrese te re te quajtur, “actions”.

Kliko ne frame-in e pare (keyframe) ne timeline.

Hap panelin Actions . (Window > Actions)

Shtyp kete kod:

stop()

Ju do te shikoni nje ‘a’ te vogel te shfaqur ne frame ne shtresen actions. Kjo tregon qe ka actionscript ne

kete frame dhe ju mund te hapni panelin actions me vone per ta edituar ate.

http://www.vineyardesigns.com/

180

Linket URL ne Flash CS3 (ActionScript 3.0)

Ne ActionScript 3.0 e gjithe ActionScript specifikohet ne panelin actions per frame jo per vet

butonin. Ne duhet te klikojme frame ne timeline dhe te hapim panelin actions. Ne nuk duhet te

klikojme instancen buton dhe ti japim veprimet(actions).

Krijimi i nje linku URL ne Flash CS3 (ActionScript 3.0)

Kliko ne keyframe ne shtresen ‘logo’.

Ne panelin actions shtyp kete kod:

Me poshte eshte shpjegimi i pjeseve te kodit per te krijuar nje link URL ne Flash CS3:

Testo filmin, do te shikoni qe website-i hapet kur klikohet logo.

Ne kodin e mesiperm, ‘Logo’ eshte emri i instances i simbolit te butonit logo.

'buttonClickHandler' eshte nje funksion qe krijojme ne per ti thene flash-it qe te shkoje

tek URL-ja http://www.vineyardesigns.com.

MouseEvent.CLICK i thote Flash-it te ekzekutoje funksionin kur Logo eshte e klikuar.

Kodi ActionScript 3.0 per linket e etiketave

Kur shikuesi klikon ne butonat ne krye, frame-t respektive me permbajtjen relevante duhet te

shfaqen. Flash ka nevoje qe ti thuhet se ne cilen etikete te shkoje kur klikohet nje buton.

Ne shtresen e butonave, kliko ne keyframe ne timeline.

Hap panelin action dhe shtyp kete kod:

181

Me poshte jepet shpjegimi i kodit:

Beni nje kopje te kodit te butonit 'Home' dhe e ndryshoni ate te paraqesni butonin

services dhe etiketen services.

Perserite kete edhe per About Us edhe per Contact

Testo filmin.

Kliko butonat. Faqet/ permbajtjet e pershtateshme per butonat respektiv do te shfaqen.

182

Tani website juaj eshte gati. Publikoje ate dhe dhe ngarko filet .html, .swf dhe .js ne serverin tuaj

Si te besh nje forme kontakti ne PHP Flash

Ne kete leksion do te mesojme se si te bejme nje forme kontakti te thjeshte dhe efektive ne PHP

Flash duke perdorur Action Script 2.0.

Hapi 1

Fillimisht krijoni nje file te ri duke perdorur Action Script 2.0.

Shtyp CTRL + J (Document Properties) ose shko tek Modify – Document dhe vendosi

karakteristikat si ne figuren me poshte.

Tani ne duhet te krijojme vetem strukturen e formes tone te kontaktit. Do te perdorim Text

Tool (T) dhe fillojme shkruajme konstruktin.

Fillimisht E-mail + Text Field, se dyti Subject + Text Field, se treti Message + Text Field.

183

Fusha e tekstit duhet te jete Input Text. Tani ju duhet te keni nje strukture te ngjashme si ne

figuren me poshte:

Ju duhet te vendosni fushen tuaj Text me karakteristikat e meposhteme

Tani na nevojitet nje Scroll Bar per fushen e mesazhit. Nese dikush ka mesazh shume te gjate

cfare mund te bejme? Eshte e thjeshte.

Shkoni tek menuja Window – Components (CTRL + F7). Ne nderfaqen User Interface rollout o te

gjeni UIScrollBar.

184

Terhiqe dhe vendose ate ne Message Field dhe shko tek Parameters Rollout dhe near

_targetInstanceName shkruaj message_field.

Hapi 2

Tani ne duhet te vizatojme nje buton Send duke perdorur Rectangle Tool (R) dhe me Text

Tool shtoni nje tekst “Send”.

Selektoji te dyja dhe shtyp F8 per ti konvertuar ato ne Button dhe klikon OK.

Tani duhet te krijojme mesazhin e gabimit(Error Message) nese dicka shkon gabim.

185

Me Text Tool shkruani “All fields required !” dhe selektoje ate, pastaj shtyp F8 dhe konvertoje

ate ne MovieClip, dhe vendos emrin e instances “error_clip”

Ok pothuajse mbaruam me dizenjimin dhe strukturen. E vetmja gje qe na ka mbetur eshte te

krijojme nje background per fushat e tekstit.

Per te bere kete selekto Rectangle Tool dhe vizato te njejten madhesi me nje ngjyre te erret.

Borderin me #555555

Backgroundin me #222222

Struktura finale duhet te duket si ne figuren e meposhteme:

Hapi 3 – Kodimi

Selekto frame-in e pare dhe shtyp F9 (Action Script Panel) dhe vendos kodin e meposhtem.

186

// ngarkohen Variables dhe Settings

stop();

error_clip._alpha = 0;

System.useCodepage = true;

send_btn.onRelease = function() {

my_vars = new LoadVars();

my_vars.email = email_field.text;

my_vars.subject = subject_field.text;

my_vars.message = message_field.text;

// nese fushat e tekstit nuk jane blank mesazhi do te dergohet

if (my_vars.email != “” and my_vars.subject != “” and my_vars.message != “”) {

my_vars.sendAndLoad(“send_mail.php”, my_vars, “POST”);

gotoAndStop(2);

// Else if text fields are blank a warning message will appear

} else {


}

// Mbas dergohet mesazhi perdoruesi do te ridrejtohet per tek frame 3

my_vars.onLoad = function() {

gotoAndStop(3);

};

};

// Nese klikoni ne nje fushe tjeter “All Fields Required” do te zhduket

email_field.onSetFocus = subject_field.onSetFocus = message_field.onSetFocus = function () {

if (error_clip._alpha != 0) {


}

};

Shkoni tek Timeline dhe krijoni 2 New Frames duke shtypur F6.

187

Selekto Frame 2 dhe DELETE ALL pervec titullit dhe vendosni nje tekst me” Sending Message…”

dhe beni nje animim.

Selekto Frame 3 dhe DELETE ALL pervec titullit dhe vendosni nje tekst me ” Message Sent.

Thank you for contacting us” ose nje mesazh cfardo. Shtyp F9 dhe put stop(); ne panelin Action

Script per te ndaluar formen qe te luhet perseri.

Do te merrni figuren e meposhteme

Kjo ishte e gjithe puna me Flash ! Tani duhet te krijojme file-in PHP.

Hapni Notepad ose cdo software qe keni (si Dreamweaver) dhe shkruani kodin e meposhtem:

<?php

// PHP Flash Contact Form – PHP Script

// ngarkimi I variablave

$email = “E-mail: “ . $_REQUEST["email"] . “\n\n”;

$subject = $_REQUEST["subject"];

$message = “Message: \n—\n” . $_REQUEST["message"] . “\n\n”;

$ip = “IP: “ . $_SERVER['REMOTE_ADDR'] . “\n”;

// karakteri \n do te thote New Line

// Miksimi i te gjithe variablave, duke perfshire IP

$full_message = $email . $message . $ip;

// Fshij backslashes qe shfaqen kur fusim karaktere si ” or ‘

$message = stripslashes($message);

$subject = stripslashes($subject);

$sender = stripslashes($sender);

// Dergimi i postes

// Kujdes: Mos harroni te ndryshoni “[email protected]” per te marre mail-in nga forma e

kontaktit te mail-it (“[email protected]”, $subject, $full_message);

?>

188

Ruani kete file me emrin: send_mail.php

Kujdes: Filet .swf dhe .php duhet te jene ne te njejtin folder!

Kjo eshte e gjitha! Testoje duke vendosur email-in tuaj dhe dergoji nje mesazh vetes!

189

PJESA 3

3DS MAX

190

Autodesk 3ds Max, ose shkurt 3D Studio MAX, eshte nje software per te bere animacione 3D. Ajo eshte

zhvilluar dhe prodhuar nga Autodesk Media and Entertainment.

3D Studio Max ka avantazhet e saj te modelimit, nje arkitekure fleksible plugin dhe mund te perdoret ne

platformen Microsoft Windows.

Zakonisht perdoret nga at qe merren me zhvillimin e lojrave video, studiot komerciale TV dhe studiot e

vizualizimit arkitekturor. Ai perdoret gjithashtu per efektet e filmave.

Pervec mjeteve qe ai ofron per animimin dhe modelimin, versionet e fundit te 3ds Max kane gjithashtu

tiparet si psh hijet(nuancat), simulimi dinamik, sistemet praktike, krijimi i hartave normale dhe

pasqyrimi(rendering), ndricimi global, ofron nje nderfaqe grafike, si dhe gjuhen e tij te skriptimit.

Historia

Produkti i pare 3D u krijua per platformen DOS nga Yost Group dhe u publikua nga Autodesk. Mbas 3D

Studio DOS Release 4, produkti u shkrua per platformen Windows NT dhe u ri-emertua "3D Studio

MAX." Edhe ky version fillimisht u krijua nga Yost Group.

Autodesk e bleu produktin ne realizimin e dyte te tij nen emrin 3D Studio MAX dhe e pervetesoi ate

totalisht mbas dy realizimesh te tjera. Me vone, emri i produktit u ndryshua ne "3ds max" (me shkronja

te vogla).

Ne versionin e 8-te, produkti u krijua perseri me logon e Autodesk, dhe emri u ndryshua perseri, "3ds

Max”. Ne versionin e 2009, emri i produktit eshte "Autodesk 3ds Max".

Linku i shkarkimit:

Faqja zyrtare e Autdesk:

http://usa.autodesk.com/adsk/servlet/download/item?siteID=123112&id=16324410

http://en.wikipedia.org/wiki/Autodesk_Media_and_Entertainment

http://en.wikipedia.org/wiki/Plug-in_(computing)

http://usa.autodesk.com/adsk/servlet/download/item?siteID=123112&id=16324410

191

Tiparet

MAXScript

Scene Explorer

DWG Import

Texture Assignment/Editing

General Keyframing

Constrained Animation

Skinning

Skeletons and Inverse Kinematics (IK)

Integrated Cloth Solver

Integration with Autodesk Vault

http://en.wikipedia.org/wiki/Inverse_Kinematics

192

MAXScript

MAXScript eshte nje gjuhe skriptimi built-in qe mund te perdoret per te automatizuar detyrat qe

perseriten, per te kombinuar funksionalitetet ekzistuese ne menyra te reja, per te zhvilluar

mjete(tools) te reja dhe nderfaqe grafike, dhe shume me teper.

Scene Explorer

Scene Explorer, eshte nje mjet qe te siguron nje pamje hierarkike te te dhenave te skenes dhe

analizes, te lehteson punen ne skena me komplekse. Scene Explorer ka aftesine te rendis, filtroj, dhe te

kerkoje nje skene nga cdo tip objekti ose karakteristike. E shtuar ne 3ds Max 2008, ajo ishte komponenti

i pare per te lehtesuar kodin e menaxhimit .NET ne 3ds Max jashte MAXScript.

DWG Import

3ds Max suporton edhe importin edhe lidhjen me file DWG. Menaxhimi i memories i permiresuar ne

3ds Max 2008 mundeson skena me te medha per te importuar me shume objekte.

Texture Assignment/Editing

3ds Max ofron operacione per krijimin e texture dhe planar mapping.

General Keyframing

Dy metoda keying — set key dhe auto key — ofrojne suport per keyframing te ndryshme. Kontrolle te

shpejta dhe intutive per keyframing — ku perfshihet cut, copy, dhe paste — mundesojne qe perdoruesi

te krijoje animimi me lehtesi. Trajektoret e animimit mund te shikohen ose editohen direkt ne viewport.

Constrained Animation

Objektet mund te animohen pergjate kthesave me kontrolle per alignment, banking, shpejtesi, dhe

looping. Objektet mund te animohen duke u kombinuar me objektet e tjera ne disa menyra— ku

perfshihet orientimi ne koordinata te ndryshme orientimi, dhe duke i lidhur ne pika te ndryshme ne nje

kohe.

Skinning

Ose Skin ose modifikuesi Physique mund te perdoret per te arritur kontroll te sakte te deformimit te

skeletit, ne menyre qe karakteri te deformohet butesishte kur levizin pjeset, edhe ne zonat me

problematike, sic jane supet.

193

Perdorimi ne industri

Shume filma jane bere duke perdorur 3ds Max ose versione te tjera te ketij programi, ne animimin CGI,

sic eshte Avatar dhe 2012, permbajne grafika kompjuterike te gjeneruara nga 3ds Max se bashku eshe

me animimin.

3ds Max eshte perdorur gjithashtu per zhvillimin e grafikes kompjuterike ne 3D per nje numer te madh

video games.

Disenjimi arkitekturor dhe inxhinierike perdor gjithashtu 3ds Max per zhvillimin e konceptit te artit dhe

paravizualizimit.

Perdorimi ne edukim

Programet e e dukimit ne nivelet e dyta dhe te treta te studimit perdorin 3ds Max ne kurset e tyre te

grafikeve kompjuterike 3D dhe animacioneve kompjuterike.

Teknike modelimi

Polygon modeling

Modelimi Poligon eshte me i perdorshem ne dizenjimin e lojes sesa ndonje teknike tjeter modelimi

duke qene se ka nje kontroll specifik mbi poligonat individual duke lejuar optimizimin ekstrem.

Zakonisht, modeluesi fillon me nje primitve 3ds max, dhe duke prdorur mjete te tjera sic

jane bevel dhe extrude, i shton detaje dhe e rafinon modelin.

Primitivat e paracaktuara

Kjo eshte nje metode baze, ne te cilen modelet perdorin kutite, sferat, konet, cilindrat dhe objekte te

tjera te paracaktuar nga lista e Primitivave standarte te paracaktuara ose lista e Primitivave te zgjeruara

te paracaktuar.

Mund te aplikohen gjithashtu operacionet logjike, ku perfshihet subtract, cut dhe connect

Primitivat standarte

Box: Prodhon nje prizem drejtekendesh . Nje variacion alternative i kutise, i quajtur Cube,

proporcionalisht kufizn gjatesine, gjeresine dhe lartesine e kutise

Cylinder:Prodhon nje cilinder.

http://en.wikipedia.org/wiki/Avatar_(2009_film)

http://en.wikipedia.org/wiki/2012_(film)

http://en.wikipedia.org/wiki/Bevel

http://en.wikipedia.org/wiki/Extrude

http://en.wikipedia.org/wiki/Box

http://en.wikipedia.org/wiki/Cylinder_(geometry)

194

Torus:Prodhon nje torus – ose nje unaze– ndonjeher njihet me emrin doughnut.

Teapot: Prodhon nje cajnik. Meqenese teapot eshte nje objekt parametrik, perdoruesi mund te zgjedh

se cilat pjese te cajnikut te shfaq mbas krijimit. Keto pjese perfshijne trupin, dorezen, hundezen dhe

kapakun.

Cone:Prodhon nje kon.

Sphere:Prodhon nje sfere te plote, hemisfere, ose njepjese tjeter te nje sfere.

Tube:Prodhon tuba te rrumbullaket ose prizmatik. Tubi eshte i ngjashem me cilindrin me nje vrime ne

te.

Pyramid:Prodhon nje piramid me nje baze rrethore ose drejtkendore dhe me ane trekendore.

Plane:Prodhon nje tip special te nje poligoni te sheshte qe mund te zmadhohet ne nje madhesi cfardo ne

nje kohe. Perdoruesi mund te specifikoje faktoret per te zmadhuar permasat ose numrin e segmenteve,

ose te dyja.

Geosphere:Prodhon sfera dhe hemispferea duke u bazuar ne tre klasat e polihedronave te rregullte.

Primitivat e zgjeruara

Hedra:Prodhon objekte nga disa familje te polyhedra.

ChamferBox:Prodhon nje kuti me qoshe te rrumbullakosura ose te pjerrta.

OilTank: Krijon nje cilinder with koke konvekse.

http://en.wikipedia.org/wiki/Torus

http://en.wikipedia.org/wiki/Utah_teapot

http://en.wikipedia.org/wiki/Cone_(geometry)

http://en.wikipedia.org/wiki/Sphere

http://en.wikipedia.org/wiki/Pyramid

http://en.wikipedia.org/wiki/Plane_(mathematics)

http://en.wikipedia.org/wiki/Polyhedron

195

Spindle: Krijon nje cilinder me koke konike.

Gengon: Krijon nje poligon te shtypur, poligon me faqe te rregullta.

Prism:Krijon nje prizem me tre ane.

Torus knot: Krijon nje cajnik me kompleks, 3D.

ChamferCyl:Krijon nje cilinder me ane te rrumbullakosura ose te pjerrta.

Capsule:Krijon nje cilinder me te dy anet hemisferike.

L-Ex: Krijon nje objekt te formes L.

C-Ext: Krijon nje objekt te formes C.

Hose: Krijon nje objekt fleksibel, e ngjashme me nje suste.

Rendering

Scanline rendering

Metoda default qe bene te mundur rendering ne 3DS Max eshte scanline rendering. Shume tipare

shtese i jane shtuar kesaj metode me kalimin e viteve, sic eshte ndricimi global apo ray tracing.

mental ray

mental ray eshte nje prodhim quality renderer i zhvilluar nga mental images. Eshte i integruar ne

versionet e fundit te 3ds Max, dhe eshte nje raytracing renderer i fuqishem me bucket rendering, nje

http://en.wikipedia.org/wiki/Spindle_(textiles)

http://en.wikipedia.org/wiki/Prism_(optics)

http://en.wikipedia.org/wiki/Torus_knot

http://en.wikipedia.org/wiki/Scanline_rendering

http://en.wikipedia.org/wiki/Scanline_rendering

http://en.wikipedia.org/wiki/Ray_tracing_(graphics)

http://en.wikipedia.org/wiki/Mental_ray

http://en.wikipedia.org/wiki/Mental_ray

http://en.wikipedia.org/wiki/Mental_Images_(firm)

http://en.wikipedia.org/wiki/Bucket_rendering

196

teknike qe lejon shperndarjen e detyres rendering per nje imazh te vetem ndermjet disa kompjuterave

ne menyre eficente, duke perdorur protokollin e rrjetit TCP.

RenderMan

Nje mjet tjeter qe bene te mundur ndertimin e pipelines(skeletit) te RenderMan.

V-Ray

Nje plugin i trete per 3D Studio MAX. Eshte shume e perdorur, dhe shpesh zvendeson standard dhe

mental ray te cilet jane perfshire te lidhura se bashku ne 3ds Max. V-Ray vazhdon te jete kompatibel me

versionet e vjetra te 3ds Max.

FinalRender

Nje tjeter makine render e krijuar nga Cebas. E afte per simulimin e nje sere fenomenesh fizike te

botes reale.

Fryrender

E krijuar nga RandomControl eshte e afte per krijimin e aplikimeve shume cilesore dhe reale.

Indigo Renderer

Eshte nje photorealistic renderer me plugins per 3ds max.

Maxwell Render

Eshte nje sistem photorealistic rendering i krijuar nga Next Limit Technologies qe te mundeson

perdorimin e materialeve te forta dhe pasqyrim shume te sakte.

BIGrender 3.0

Nje tjeter plugin rendering. I afte per tejkalimin e kufizimeve te memories 3DS me rendering e figurave

shume te medha.

Licensimi

Per shkak te cmimit te larte te versionit komercial te programit, Autodesk ofron gjithashtu nje version

falas per studentet, ku theksohet qe eshte vetem per perdorim edukimi. Versioni i studentit ka tipare

identike me versionin e plote, por eshte vetem per perdorim vetjak dhe nuk mund te instalohet ne nje

rrjet.

http://en.wikipedia.org/wiki/RenderMan_Interface_Specification

http://en.wikipedia.org/wiki/V-Ray

http://en.wikipedia.org/wiki/Fryrender

http://en.wikipedia.org/wiki/Indigo_Renderer

http://en.wikipedia.org/wiki/Maxwell_Render

http://en.wikipedia.org/wiki/Next_Limit_Technologies

http://en.wikipedia.org/w/index.php?title=BIGrender_3.0&action=edit&redlink=1

http://en.wikipedia.org/w/index.php?title=BIGrender_3.0&action=edit&redlink=1

197

LEKSION1

Ne kete leksion do te mesoni se si te:

Hapni nje skene

Se si te shikoni nje skene nga kende dhe prespektiva te ndryshme

Si te modeloni obkjektet dhe te aplikoni materialet real

Te levizni dhe animoni objektet

Ti beni render skenes dhe pastaj ta ruani ate si nje skedar multimedia

Duke perdorur tiparet baze te programit, ju do te mund te krijoni nje skene te thjeshte te nje fushe

beteje te perbere nga nje top, nje gur, nje peme dhe nje mulli ere.

Gjithashtu mund ti shtojme nje kamera dhe ta perdorim ate per te pare skenen nga kende te ndryshme.

Hapat finale tregojne se si te shtoni disa animime baze, dhe si ti ktheni rezultatet ne nje skedar

multimedia.

Navigimi ne skene

Ne toolbarin Quick Access , kliko (Open File).

Shenim Nese nje kutize dialogu ju pyet nese doni te perdorni karakteristikat e skenes Gamma

dhe LUT, prano karakteristikat e skenes Gamma dhe kliko OK. Nese nje kutize dialogu ju pyet

nese do perdorni njesite e skenes, pranoje ate (scene units), kliko OK.

198

Perspective viewport

Perspective viewport duhet te jete aktive, qe tregohet nga nje kornize e verdhe.

Nese nuk ka asnje kornize(kufi) te dukshme, kliko kudo brenda viewportit per ta aktivizuar ate.

Navigimi ne skene

1. Ne varesi se si eshte duke u perdorur aktualisht sistemi juaj, ju mund te keni me shume se disa

mjete(tools) navigimi te shfaqura ne viewport. ViewCube™ qe shfaqet ne qoshen e djathte siper

dhe SteeringWheels™ 3D qe shfaqet poshte-majtas.

2. Fillimishte do te shikojme ViewCube.

Shenim: Nese eshte hera e pare qe perdorni SteeringWheels, duhet te klikoni ne ikonen e saj per ta

aktivizuar.

3. Ne menune Views ➤ Viewport Configuration ➤ ViewCube panel ➤Display Options, aktivizoje

Shfaq ViewCube nese nuk eshte i dukshem.

Ne grupin When Clicking On The ViewCube, kujdesuni qe te jene te aktivizuara opsionet Fit-To-View

On View Change dhe Keep Scene Upright, dhe kliko OK.

199

Ne viewportin Perspective, klikim-djathtas ViewCube dhe zgjidh Set Current View As Home.

5. Kliko faqen Left(e majte) te ViewCube per te pare skenen nga e majta. Sic mund ta shikoni,

ViewCube ju mundeson qe ta shikoni skenen nga pika te ndryshme shikimi me nje klikim te

thjeshte te mouse-it.

6. Klikim-djathtas ne ViewCube dhe zgjidh Configure nga menuja. ViewCube eshte selektuar

automatikisht.

7. Tek grupi When Clicking On The ViewCube, caktivizoje Fit-To-View On. Shikoni ndryshimin dhe

klikoni OK. Eshte e rendesishme te mbash te aktivizuar kete opsion nese doni te mbani te njejtin

faktor zmadhimi kur kaloni ndermjet viewpoint-eve.

200

8. Ne viewportin Perspective, kliko ikonen Home ne qoshen e siperme majtas te ViewCube.

9. Kliko (Zoom). Per te treguar qe ky buton edhte aktiv ai eshte me i theksuar se te tjeret.

10. Me ane te mouse-it, terhiquni tek viewporti Perspective. Pamja juaj zmadhohet keshtuqe ju

mund ta shikoni skenen nga nje distance.

Shenim Ju gjithashtu mund te zmadhoni ose zvogeloni duke rrotulluar rroten e mouse-it.

11. Shikojme tani opsioni (Orbit), which is below and to the right of thqe ndodhet ne te

djathte te butonit Zoom. Butoni theksohet kur eshte aktiv. Nje rreth i verdhe shfaqet ne

viewport.

12. Poziciononi kursorin brenda rrethit te kuq. Kliko dhe mbaj te shtypur butonin e majte te mouse-it

dhe levizni mouse-in. Ky veprim quhet zvarritje (dragging). Pika e shikimit orbiton rreth skenes.

Keshille Shmange zvarritjen jashte rrethit te verdhe te navigimit.

13. Perdorni nje kombinim te Orbites dhe rrotes se mouse-it per te zmadhuar mullirin e eres.

14. Orbitoni pamjen tuaj duke terhequr majtas ose djathtas derisa te mund ti shikoni topin ne

drejtimin e kundert.

15. Klikim-djathtas viewportit per te dale nga Orbit mode.

16. Kliko (Pan) dhe leviz mouse-in ne viewport.

Pamja e viewportit tani ndjek levizjen e mouse-it tuaj.

201

17. Ktheni viewportin ne orientimin e tij origjinal duke klikuar ikonen Home.

18. SteeringWheels ofron nje menyre alternative per te naviguar ne nje skene.

19. Kliko dhe terhiq secilen nga Zoom, Pan dhe Orbit me radhe, dhe eksperimentoni se si mund te

navigoni ne skenen.

20. Kur ta mbaroni, klikoni butonin Rewind dhe terhiqe ate majtas.

21. Mjeti Rewind kalon mbi nje strip of thumbnails, secila prej te cilave paraqet nje pike navigimi te

selektuar me pare.

22. Eksperimentoni me Center, Walk, Look dhe Up/Down ne qendren e ikones SteerWheels. Kur te

keni mbaruar, klikoni shigjeten poshte-djathtas te rrotes dhe nga menuja, zgjidh Go Home. Kjo e

ripozicionon pamjen e viewport-it ne Home viewpoint.

23. Kliko “X” e vogel ne krye djathtas te rrotes per ta bere te padukshme SteeringWheels .

Keshille Mund te shtypni Shift + W per te rishfaqur SteeringWheels.

Tani ju do te krijoni nje viewport kamere. Viewporti Camera eshte i ngjashem me viewportin Perspective

por me funksionalitet te ndryshem. Ju mund ta animoni ate, dhe te shtoni efektet ne te.

202

Krijimi i nje kamere:

1. Klikim-djathtas ne viewportin Top per ta aktivizuar ate. Viewporti eshte me kornize te verdhe.

2. Ne panelin Create, kliko (Cameras), pastaj kliko Target.

3. Ne viewportin Top, kliko pas dhe pak djathtas tipit, pastaj terhiq poshte ne nje pike ne te majte

te mullirit(sic tregohet ne ilustrimin e meposhtem). Mos u shqetesoni per vendosjen ekzakte te

kameres aktualisht: Ju do te mund ta rregulloni ate me pas.

Per te pare se cfare shikon kamera, tani ju duhet te shfaqni nje nga viewportat si nje viewport Camera.

4. Klikim-djathtas ne viewportin Perspective per ta aktivizuar ate, pastaj shtypni C. Klikimi djathtas

ne nje viewport e aktivizon ate dhe mban cdo objekt ne viewportet e tjere ne nje gjendje te

selektuar (ne kete rast, objekti yne kamera). Klikimi-majtas ne nje viewport caktivizon objektet e

selektuara me pare.

5. Ne toolbar-in kryesor, kliko (Select And Move). Nje trekembesh me shigjeta te kuqe, blu,

dhe jeshile shfaqet ne viewportin Top. This is the transform gizmo. Kur ju levizni kursorin tuaj

mbi shigjetat, cdo etikete e aksit dhe stema e shigjetes kthehet e verdhe. Kur ajo eshte e verdhe,

ju mund te klikoni dhe terhiqni per ta levizur objektin ne nje drejtimt e vetem. Nese ju levizni

kursorin mbi qoshet e brendeshme te transform gizmo, plani kthehet i verdhe. Kjo ju lejon juve

qe te levizni ne nje plan te vetem.

203

6. Klikim-djathtas ne viewportin Left, klikoni manipulatorin te aksit Y te kameres, dhe terhiqe ate

pak larte ne menyre qe ju te shikoni me shume horizont ne viewportin e Camera001.

Nese topi nuk eshte i dukshem ne veiwportin Camera001, atehere ne viewportin Top terhiq kameren

derisa pjesa ballore e topit vjen ne pamjen e Camera001 viewport, sic tregohet ne ilustrimin tjeter.

Se dyti ju duhet te krijoni nje shkemb dhe nje peme dhe pastaj ti shtoni ato ne skene.

Krijimi i shkembit dhe pemes

Ne kete leksion, do te krijoni dy objekte primitiva, pastaj modifikojme parametrat e tyre ne menyre qe

ata te marrin pamjen e nje peme dhe nje shkembi.

Vendosim skenen: Vazhdojme nga leksioni i kaluar.

Krijojme nje shkemb:

1. Ne panelin Create, kliko (Geometry), pastaj tek Object Type, kliko Sphere.

Butoni theksohet per te treguar eshte aktive dhe gati per tu perdorur.

204

2. Krijoni nje sfere ne viewportin Top duke mbajtur te shtypur butonin e majte te mouse-it kudo

para ose pas topit (shikoni ilustrimin e meposhtem) dhe terhiqeni ate larg prej nga e ndertuat.

Per aq kohe sa mbani te shtypur butonin e mouse-it, ju mund te rregulloni madhesine e sferes.

Kur ju shtypni butonin e mouse-it, sfera eshte e mbaruar.

Keshille Sfera juaj mund te jete ne nje ngjyre te ndryshme nga ajo qe doni ju.

Krijojme nje sfere.

Sfera eshte ne viewportin e kameres

205

3. Ne panelin Modify ➤ Parameters, ndryshoni Radius ne 25 dhe shtypni Enter.

Sfera ndryshon madhesine ne viewport.

4. Kliko menun drop-down Modifier List dhe zgjidh Noise.

5. Ne grupin Noise, aktivizo Fractal, dhe ne grupun Strength, vendos X, Y,dhe Z ne 30.0.

Shkembi eshte duke marre forme, por mund te jete i paraqitur edhe me mire

Ne toolbarin kryesor, kliko (Select and Uniform Scale).

Ne pamjen Camera001, terhiq aksin gizmo Z poshte derisa eshte te pakten si rreth dy te tretat e

lartesise se tij origjinale.

206

Ndryshojme emrin e sferes:

1. Ne panelin Modify ndodhet fusha e emrit te objektit, klikim dysh ne Sphere001 per ta theksuar

ate.

2. Shkruaj rock dhe shtyp Enter per te vendosur emrin e ri.

Shenim Kur shtypim Enter eshte nje menyre eksplicite per te ndryshuar nje parameter.

Krijimi i pemes:

1. Ne panelin Create, kliko (Geometry), pastaj nga lista drop-down (“Standard Primitives”), zgjidh

AEC Extended.

Objektet AEC Extended jane gjeometri pre-built, ku perfshihen pemet,

guret,kangjellat(parmaket). Ato janë një mënyrë e shpejtë për të shtuar detaje reale për një

skenë.

207

2. Tek Object Type, kliko Foliage.

3. Tek Favorite Plants, zgjidh Generic Oak si nje lloj i pemes

4. Klikim-djathtas ne viewportin Top per ta aktivizuar ate, dhe shtoni pemen ne skene duke klikuar

nje pike pak me poshte dhe ne te djathte te shkembit.

Per ti dhene skenes pak atmosfere, do ta bejme qe pema te duket e thare nga beteja.

5. Duke e mbajtur pemen te slektuar, ne panelin Modify ➤ Parameters vendos Height ne150.

208

6. Ne grupin Show, caktivizo Leaves, dhe ne grupin Level-Of-Detail, aktivizo Low per te reduktuar

numrin e degeve.

7. Nese ende nuk jeni te kenaqur me pamjen e pemes, tek Parameters kliko New. Sa here qe ju

klikoni kete buton, vlera Seed ndryshohet, duke shkaktuar qe pema ti nenshtrohet nje

rikonfigurimi random.

8. Kur te jeni te kenaqur mr pamjen e pemes, riemertoje objektin Foliage001 ne fushen Name duke

perdorur te njejten procedure qe ndoqet per shkembin. Quheni kete objekt pema oak_tree.

9. Nese pema pengon pamjen e mullirit, mund ta zhvendosni ate duke perdorur (Select And

Move) ne toolbarin kryesor .

Ne leksionin tjeter do te aplikoni nje material per shkembin tuaj duke perdorur Material Editor.

Leksion2

Shtimi i Materialeve te Objekteve ne Skene

Ju mund ti beni objektet e skenes me realiste duke shtuar materiale mbi siperfaqen e tyre. Textura e

materialit mund te perfshije informacion nga imazhet bitmap. Ne kete leksion terreni i betejes, pema,

shkembi, guri, dhe mulliri, te gjitha e marrin pamjen e tyre me ane te bitmap texture mapping.

209

Textura e topit:

Textura e shkembit:

Vendosim skenen: Fillojme aty ku e lame ne leksionin e kaluar.

Shtojme materialin e betejes:

1. Ne toolbarin kryesor, zgjidh (Material Editor) nga Material Editor hap Compact Material

Editor. Material Editor hap nje dritare floating(notuese).

Compact Material Editor eshte zakonisht me i pershtatshem kur ju doni thjeshte te percaktoni

materiale qe tashme jane te dizenjuar.

Slate Material Editor, qe ze nje hapesire me te madhe te ekranit, eshte me i pershtatshem per

dizenjimin e materialeve.

Shenim Nese hapni gabimisht Slate Material Editor, atehere nga toolbari Material Editor zgjidh

Modes ➤ Compact Material Editor.

210

Automatikisht, Compact Material Editor tregon gjashte lloje te ndryshme materialesh. Ndoshta juve ju

duhen shume me teper materiale sesa keto te gjashta, keshtuqe ju preferoni te shfaqni edhe te tjera.

2. Kliko siper njeres nga keto materiale per ta zgjedhur ate. Nje kufi i bardhe tregon qe ky slot

eshte aktive. Klikim-djathtas dhe zgjidh nga lista, 5 x 3 Sample Windows. Tani do te kesh 15

materiale te reja(slots) per perdorim ne te ardhmen.

3. Gjej materialin Battlefield (Fushe beteje) dhe kliko mbi te.

Vini re qe emri Battlefield shfaqet ne fushen Material Name poshte sloteve te thjeshta. Ky material

eshte tashme i ndertuar per ju.

211

4. Terhiq materialin Battlefield nga sloti i tij dhe dhe vendose ate ne objektin Field ne viewportin

Camera001. Viewporti tani shfaq nje peisazh te mbuluar nga bari dhe papastertia.

5. Terhiq materialin Stone nga sloti i tij per tek objekti rock ne viewport. Pastaj, ju duhet te aplikoni

materialin per topin. Te gjitha pjeset e topit fillimisht grupohen se bashku ne nje entitet te

vetem, te quajtur nje bashkesi selektimi. Ne kete menyre, kur ju zgjidhni nje material, ai

aplikohet ne te gjithe komponentet me nje veprim te vetem.

6. Nga menuja kryesore Named Selection Sets ne listen drop-down, zgjidh Cannon

7. Ne Material Editor, kliko Cannon dhe pastaj kliko Assign Material To Selection). Kjo metode

eshte nje menyre tjeter per te aplikuar materiale ne objektet e selektuara. Pema oak dhe mulliri

kane tashme materiale te aplikuara mbi to, keshtuqe tani jemi gati te fillojme animimin e

skenes.

8. Ruani skenen tuuaj ne nje folder lokal me emrin my_battlefield_scene.max.

Animimi i skenes

Ne kete leksion, do ti japim jete skenes se betejes duke bere animimin e objekteve te skenes.

Ju do ta beni kete me ane te animimit me keyframe. Mjeti Auto Key ne 3ds Max ju lejon te regjistroni

karakteristikat fizike te nje objekti ne nje kohe te caktuar. Kjo gjendje ne kohe quhet nje keyframe. 3ds

Max pastaj gjen te gjitha gjendjet e ndermjetme nga nje keyframe tek tjetri, per nje levizje te mire te

212

objektit.Procedura e meposhteme konsiston ne dy animime. Ndermjet frameve 0 deri ne 120, ju do te

afroni topin ne pozicionin e zjarrit, mbas shkembit. Ndermjet frameve 120 dhe160, ju do te zmadhoni

tyten e topit per tu pregatitur per goditjen e pare.

3ds Max ka tre menyra te ndryshme per te krijuar keyframe. Njera eshte te aktivizosh butoni Auto Key,

te levizesh ne nje pike te caktuar te kohes, dhe te transformosh (move, rotate, ose scale) objektin. Nje

metode tjeter eshte klikim-djathtas tek time slider dhe pastaj te vendosesh celsat duke perdorur

dialogun Create Key. Ka gjithashtu nje menyre te trete te vendosjes se animimit Set Key, te dizenjuar per

profesionistet.

Ne kete ushtrim, do te perdorim butonin Auto Key.

Vendosni skenen: Vazhdojme me me skenen tone, ose hapni battlefield_scene.max.

Animimi i pozicionit te topit:

1. Klikim-djathtas ne viewportin Top, pastaj zmadho dhe zhvendos skenen ne menyre qe topi dhe

shkembi te duken ne menyre te qarte.

2. Ne toolbarin kryesor, kliko (Select And Move), pastaj vendose mouse-in pezull mbi topin. Mbas

nje momenti, te shfaqet nje tooltip qe thote frame. Kjo tooltip tregon qe mjeti juaj i selektimit

eshte mbi objektin frame. Ne kete skene, frame eshte objekti prind i topit, qe do te thote qe

nese ai leviz, pjesa e mbetur e topit leviz bashke me te. :

3. Kliko objektin frame per ta selektuar ate.

4. Time slider eshte butoni qe vendoset direkt poshte shkalles se kohes poshte viewportave. Terhiq

time slider tek frame 120 (per te krijuar nje animimi 4-sekonda kur luhet per 30 frame ne nje

sekonde).

213

Kliko (Auto Key) per ta aktivizuar ate.

Butoni kthehet i kuq. Tani jemi ne nje menyre automatike animimi.

Keshille Time slider kthehet gjithashtu i kuq, dhe viewporti aktiv eshte i kufizuar me te kuqe per

te kujtuar qe jemi ne Auto Key mode.

6. Ne viewportin Top, selekto objektin frame dhe terhiqe ate ne aksin e tij Y derisa topi te vendoset

mbas shkembit. Autokey vendos pozicionin e topit ne cdo frame nga pozicioni i tij i fillimit tek

frame 0 deri ne ne vendin final te pushimit tek frame 120.

7. Caktivizoje(Auto Key).

Keshille Per te shmangur krijimin e animacioneve te padeshiruara, caktivizoni gjithmone Auto

Key mbas animimit te cdo levizje.

8. Levizni poshte e larte time slider-in nga frame 0 tek frame 120, dhe shikoni topin qe leviz

perpara. Vini re se si animimi eshte aplikuar tashme tek mulliri ne bakground.

Shtojme nje levizje te dyte te animuar:

1. Aktivizo (Auto Key) dhe avanco per tek frame 160.

2. Shtyp H nga tastiera. 3ds Max hap dialogun Select From Scene.

3. Zgjidhni objektin barrel(tyte) nga lista, dhe kliko OK.

214

4. Ne toolbarin kryesor, kliko (Select And Rotate).

5. Ne viewportin Camera, rrotullo tyten(barrel) ne aksin e tij X me–10 grade

Kur modifikoni rrotullimin e tytes, vlerat e askeve update-ohen me ngjyre te verdhe.

6. Terhiq keyframe-in e fillimi tek frame 0 deri tek frame 130.

7. Caktivizo (Auto Key).

8. Kliko (Go To Start), pastaj kliko (Play Animation). Shikoni topin e animuar qe

perpiqet te luftoje mullirin e eres.

9. Kliko (Stop, ne te njejten vendodhje si butoni Play) kur keni mbaruar se pari animimin.

215

10. Ruani skenen tuaj ne folderin tuaj lokal, kete here si my_battlefield_attack.max.

Leksion3

Rendersing i animimit

Rendering i frameve te shumta per nje animim te plote mund te jete nje kohe e konsumuar kot, madje

edhe per nje makine te shpejte , sepse cdo frame procesohet individualisht. Materialet reale, vendosja e

hijeve, dhe faktore te tjere mund ta ngadalsojne procesin. Kjo skene eshte relativisht e thjeshte, prandaj

nuk do te donte shume kohe per ti bere render.

Vendos skenen:

Ne toolbarin Quick Access, kliko (Open File) dhe hapni animimin qe keni ruajtur, my_battlefield

attack.max. Ose hap battlefield_attack.max, qe ndodhet ne folderin \scenes\startup.

Shenim Nese i keni ruajtur te gjitha filet ne nje folder pervec\scenes\startup, kur hapni nje nga filet tuaj

mund te ndesheni me mesazhe per filet e humbura. Nese e ndeshni kete problem, klikoni butonin

Browse ne Missing External Files e cila hap Configure External File Paths. Kliko butonin Add. Perdor

Choose New External Files Path per te naviguar tek folderi ku keni ngarkuar filet origjinale, dhe pastaj

kliko Use Path. Kliko OK, dhe pastaj kliko Continue.

Render animimin tuaj:

1. Ne toolbarin kryesor, kliko (Render Setup). 3ds Max hap dialogun Render Setup.

2. Ne grupin Time Output, zgjidh Active Time Segment. (Nese e lini tek opsioni Single, vetem frame

qe eshte tashme i shfaqur do te behet render.)

3. Ne grupin Output Size, ndrysho nga 640 x 480 vendosi 320 x 240.

216

5. Ne dialogun Render Output File, emertoje animimin tend mybattlefield_attack.avi. Kliko Save

per ta ruajtur ne folderin default (zakonisht tek \renderoutput).

Kujdes Ju duhet patjeter te shtoni prapashtesen .avi ne emrin e file-it, ose ndryshe zgjidhni AVI si ip file.

Nese nuk i thoni programit se ne cfare formati do ta ruani kete animim, atehere rendering nuk do te

punoje.

6. Ne dialogun AVI File Compression Setup, bej hapat e meposhtem:

Nese eshte e nevojshme, ndryshoni kompresorin ne Cinepak Codec. Ka shume codecs te

ndryshem prej nga mund te zgjidhni. Cinepak pergjithesishte jep rezultate te

kenaqeshme dhe i kompresuar mund te lexohet nga audienca e gjere.

Vendos Quality ne high, ndermjet 90 dhe 100.

Kur te keni mbaruar klikoni OK.

Ne dialogun Render Setup Save File eshte tashme e aktivizuar dhe fusha e output-it tregon

vendndodhjen e mybattlefield_attack.avi.

7. Ne fund te dialogut Render Setup dialog ➤ lista View, zgjidhCamera01.

Gjithmone kontrolloni per te qene te sigurt qe jeni duke bere rendering ne viewportin e duhur.

Keshille Ne shumicen e rasteve, ju do ti beni render viewportit te kameres.

8. Kliko Render per te filluar procesin rendering. Shiko disa frame per tu siguruar qe rendering

fillon mire. Vleresimi Time Remaining ju jep juve nje ide se per sa kohe do te zgjase rendering.

217

Shikoni rezultatin :

1. Kur animimi juaj mbaron me rendering, zgjidh menune Rendering ➤ View Image File.

Automatikisht, dialogu View File hapet ne subfolderin \renderoutput.

2. Selekto mybattlefield_scene.avi dhe kliko Open per ta shfaqur mr Media Player.

3. Ne Media Player, shikoni animimin tuaj.

PERMBLEDHJE

Ju mesuat se si te punoni me nderfaqen e perdoruesit te 3ds Max per te krijuar nje skene te thjeshte te

animuar. Tashme ju dini si te navigoni ne viewporta, si te krijoni objekte te thjeshta duke perdorur

primitiva, dhe si te vendosni materiale mbi siperfaqen e tyre.

Gjithashtu keni mesuar si te levizni objektet si dhe si dhe te animoni dhe ti beni render animimit tuaj.

Ne pjesen tjeter do te jene tutoriale modelimi, animimi, ndricimi, rendering ne menyre qe ti kuptoni

akoma edhe me mire konceptet.

218

LEKSION 4

Tutoriale modelimi

dispence leksioneshpdf

Documents