Sunteți pe pagina 1din 49

5.

2 Director 8 > Privire de ansamblu


Macromedia Director 8 este o aplica]ie care permite utilizatorului s\
realizeze aplica]ii multimedia interactive ;n mod facil prin intermediul unei
interfe]e grafice avansate. Aplica]iile multimedia pot cuprinde at=t anima]ii,
c=t [i elemente de interactivitate cu utilizatorul.
DISTRIBU}IA
(cast)

membrii distribu]ie
(cast members)

SCENA
(Stage)

actori
(spriteuri)

Comportamente
(behaviour - Library Palette)

MACHIAJUL
(Property Inspector)

propriet\ti ca
dimensiunea,
culoarea,
fundalul etc.

SCENARIUL
(Score)

cadre (frames)
timp

Figura 5.1Principiul de func]ionare al programului Director 8


Ideea care st\ la baza cre\rii programului Macromedia Director 8 este
cinematografia. Programul este realizat ca o compara]ie cu realizarea unui
film adev\rat. Exist\ astfel o distribu]ie, o scen\, un scenariu, actorii pot fi
machia]i [i joac\ conform unor comportamente predefinite sau definite de
utilizator (Figura 5.1). Pentru fiecare din acestea, Director pune la dispozi]ia
utilizatorului o fereastr\ (Figura 5.2). Astfel>
- distribu]ia Cast care con]ine to]i membrii de distribu]ie sau cu
alte cuvinte to]i actorii care vor juca ;n film<
- scena Stage locul pe care vor juca membrii distribu]iei< odat\
plasa]i aici, membrii distribu]iei se transform\ ;n actori (sprite-uri)<
pot astfel exista mai mul]i actori proveni]i din acela[i membru de
distribu]ie (ca ;n cinematografie unde un actor poate juca mai multe
roluri)<
- scenariul Score este locul unde se specific\ c=nd vor apare actorii
pe scen\ [i c=t timp vor r\m=ne acolo<
- machiajul Property Inspector care ca [i ;n lumea real\ stabile[te
modul de apari]ie a unui actor, ca de exemplu dimensiunile acestuia,
culoarea, fundalul etc.<

183

comportamentele Library pallete care specific\ modul ;n care


se comport\ un actor atunci c=nd este pe scen\.

Scena
Distribu]ia

Machiajul

Comportamente

Scenariul

Figura 5.2 Ferestrele aplica]iei Director 8


5.3 Exemplu
Acest exemplu prezint\ utilizatorului principalii pa[i necesari pentru
crearea unui film (anima]ie) ;n Director 8. Realiz=nd cu succes acest
exemplu, utilizatorul va ;nva]a aspecte fundamentale ale programului c=t [i o
baz\ necesar\ pentru explorarea func]ionalit\]ii avansate a programului.
Exemplul poate fi g\sit ;n meniul Help, op]iunea Director Help, eticheta
Contents (Director 8 Tutorial).
Cu ajutorul acestui exemplu vor fi prezentate urm\toarele
caracteristici ale programului>
- creare nou film (movie), actori (cast members) [i instan]e ale
acestora (sprites)<
- folosire cerneal\ (ink)<
- creare anima]ie folosind tweening [i anima]ie cadru cu cadru<
- importare informa]ie multimedia<
- ata[are comportamente unor sprite-uri<
- controlul rul\rii filmului pe Internet.

184

Exemplul const\ dintr-un film care ;ncepe cu un peisaj. Norii se


;ndep\rteaz\, cerul se ;nsenineaz\ [i o floare ;nflore[te. O albin\ apare [i
;ncepe s\ se ;nv=rteasc\ [i s\ zumz\ie ;n jurul florii.
5.4 Preg\tirea filmului
Prima etap\ pentru crearea unui film este ca [i ;n orice aplica]ie
Windows comanda film nou [i setarea atributelor scenei (;n acest caz
dimensiunea [i paleta de culori care se folose[te ;n film). Astfel, din meniul
File se alege New cu op]iunea Movie. :n cazul ;n care alt film este ;nc\rcat,
atunci Director afi[eaz\ o fereastr\ de dialog ;n care utilizatorul este ;ntrebat
dac\ vrea s\ salveze filmul curent.

Figura 5.3 Scena (Stage)


Dup\ generarea unui film nou, se poate observa c\ scena are o
dimensiune implicit\ (Figura 5.3). Pentru schimbarea dimensiunii scenei se
poate face clic pe sec]iunea Movie ;n fereastra Property Inspector. Dac\ pe
ecran nu este afi[at\ aceast\ fereastr\ (Property Inspector), din meniul
Window se alege Inspectors [i apoi op]iunea Property. Fereastra Property
Inspector prezint\ dou\ tipuri de vizualizare a propriet\]ilor obiectelor
asupra c\rora se lucreaz\. Astfel, exist\ Graphical view (Figura 5.4,a), care e
modul implicit de vizualizare [i ;n care exist\ iconi]e [i reprezent\ri grafice
ale tuturor propriet\]ilor obiectului [i modul List View Mode (lista de
vizualizare, Figura 5.4,b) ;n care propriet\]ile sunt listate sub form\ de list\

185

(nivel avansat). Cele dou\ moduri de vizualizare au asociate un buton ;n


fereastra Property Inspector
. Dac\ butonul este ap\sat (selectat), atunci
modul de vizualizare este List View. Dac\ butonul este deselectat atunci
modul de vizualizare este Graphical View.

a)
b)
Figura 5.4 Tipurile de vizualizare a propriet\]ilor ;n fereastra Property
Inspector
Pentru specificarea dimensiunilor scenei ;n pixeli se introduce
valoarea 450 ;n primul c=mp al sec]iunii Stage Size (l\]imea scenei)
[i 500 ;n cel de-al doilea c=mp (;n\l]imea
scenei). Dup\ ce valorile au fost introduse, se poate observa c\ fereastra
Stage se redimensioneaz\ la valorile specificate. De asemenea, utilizatorul
poate selecta ni[te dimensiuni predefinite din lista ce apare ;n cazul ap\s\rii
cu mouse-ul pe s\geata ;n jos din dreptul sec]iunii Stage Size.
:n func]ie de modul [i locul unde se va vizualiza fimul nou creat, se
poate alege o anumit\ palet\ de culori pentru acesta. :n cazul exemplului de

186

fa]\, filmul este creat pentru vizualizare pe Internet [i de aceea se dore[te


folosirea unor culori specifice pentru web. Pentru aceasta, ;n sec]iunea Movie
din fereastra Property Inspector se selecteaz\ caseta derulant\ Movie
Palette
se selecteaz\ Web 216.

. Din lista de palete de culori care apare

5.5 Salvarea noului film


Pentru salvarea noului film creat se selecteaz\ din meniul File
op]iunea Save sau Save As (sau se folose[te combina]ia de taste CTRL+S).
:n caseta de dialog care apare, utilizatorul are posibilitatea select\rii loca]iei
pe disc unde se vrea salvat filmul [i atribuirea unui nume a acestuia.
Observa]ie> Pe m\sur\ ce se lucreaz\ ;n Director 8, se recomand\
salvarea frecvent\ a filmului.
5.6 Creare informa]ie media ;n Director
Informa]iile multimedia cu care se poate lucra ;n Director 8 pot fi
imagini, fi[iere audio sau video, texte etc. Exist\ dou\ modalit\]i de creare
media ;n Director>
- creare media ;n Director 8<
- importare media din alte programe.
Informa]ii media simple ca text sau fundaluri sunt ideale pentru a fi
create ;n Director.
5.7 Crearea unei forme vectoriale
Director d\ posibilitatea utilizatorului s\ creeze curbe vectoriale
(descrieri matematice ale formelor umplute cu culori sau culori graduale sau
gradien]i). O form\ vectorial\ folose[te mult mai pu]in\ memorie (intern\ [i
pe disc) dec=t ;n cazul folosirii imaginilor de tip bitmap [i astfel se descarc\
mai rapid de pe Internet.
Pa[ii de mai jos reprezint\ procesul de creare a unei forme vectoriale
unplute cu gradien]i care va servi ca fundal pentru film>
- din meniul Window se selecteaz\ op]iunea Vector Shape, Director
afi[=nd caseta de dialog Vector Shape (Figura 5.5)<

C\su]a Cast
Member Name

Op]iuni specifice pentru


Gradient

187

Butonul
Filled Rectangle
Sec]iunea
Gradient

Figura 5.5 Caseta de dialog Vector Shape


-

se efectueaz\ clic pe instrumentul Filled Rectangle din bara de


instrumente situat\ ;n st=nga ferestrei. :n suprafa]a de desen, cursorul
devine ca o cruce. Folosind metoda tragerii cu mouse-ul se creaz\ un
dreptunghi (tragere cu mouse-ul din col]ul din st=nga sus p=n\ ;n
col]ul din dreapta jos al dreptunghiului). Dimensiunea exact\ a
acestuia nu este important\ ;n acest moment. Imaginea creat\ se poate
redimensiona mai t=rziu<
se dore[te umplerea dretunghiului cu o culoare de tip gradient. O
astfel de culoare este format\ astfel> se pleac\ de la o anumit\ culoare
numit\ culoare de ;nceput [i gradual se ajunge la o culoare de sf=r[it.
Pentru umplerea dreptunghiului creat cu un gradient de culori se
selecteaz\ ;nt=i culoarea de ;nceput. Pentru aceasta se apas\ butonul
din st=nga al sec]iunii gradient [i se ]ine ap\sat (
). Pe ecran
apare o list\ de culori (Figura 5.6). Se selecteaz\ o culoare ;nchis\ de
albastru<
;n acela[i mod, se selecteaz\ [i culoarea de sf=r[it ca fiind o nuan]\
deschis\ de albastru<

188

Figura 5.6 Alegerea culorii


-

se selecteaz\ butonul de umplere cu culoare tip gradient<


se poate observa c\ ;n partea de sus a ferestrei au ap\rut ni[te op]iuni
specifice pentru culorile de tip gradient (Figura 5.7). Astfel, se poate
selecta tipul de gradient liniar sau radial. Radial creaz\ un efect
gradient circular fa]\ de cel liniar. :n cazul de fa]\ se selecteaz\
Radial. :n c=mpul Y Offset se introduce valoarea 70. Aceast\
valoare deplaseaz\ centrul gradientului ;n sus cu 70 de pixeli, astfel
;nc=t s\ se creeze un efect de tip cer luminat de soare. :n cazul
folosirii unei valori pozitive, atunci centrul gradientului se mut\ ;n jos
cu num\rul de pixeli specificat. :n cazul gradientului de tip Liniar
utilizatorul poate specifica [i unghiul sub care acesta se realizeaz\
(c\su]a Angle). De asemenea, este posibil\ specificarea num\rului de
ori ;n care gradientul ;[i schimb\ culoarea ;n interiorul formei (c\su]a
Cycles) [i a ratei cu care gradientul face schimbul ;ntre culori (c\su]a
Spread). Valoarea acestei rate se introduce ;n procente [i pentru o
valoare de 100% gradientul face trecerea de la culoarea de ;nceput
p=n\ la culoarea de sf=r[it pe toat\ lungimea [i l\]imea formei< valori
mai mici ca 100% fac schimbarea mai abrupt\< pentru valori mai mari
ca 100% culoarea de sf=r[it este atins\ ;n mod teoretic doar, undeva ;n
afara formei<
;n c\su]a Cast Member Name din partea de sus a ferestrei Vector
Shape (Figura 5.7) se d\ un nume sugetiv pentru acest membru al
distribu]iei (actor sau cast). Un nume sugestiv ;n acest caz ar fi cer.
Atribuirea de nume membrilor distribu]iei face procesul de
identificare a acestora ;n scenariu mult mai facil. Dac\ nu exist\ un
nume atribuit, atunci Director specific\ ca nume un num\r ;n func]ie
de pozi]ia membrului ;n distribu]ie<

189

salvarea noului membru al distribu]iei este facut\ automat prin


;nchiderea ferestrei Vector Shape.

C\su]a Cast
Member Name

Op]iuni specifice pentru


Gradient

Figura 5.7 Realizarea cerului ca un gradient radial


5.8 Creare membru distribu]ie de tip text
Fereastra de creare a unui membru distribu]ie de tip Text ofer\
utilizatorului controalele [i op]iunile standard de formatare, asem\n\toare cu
aplica]iile de tip procesare de texte. Pentru crearea unui membru distribu]ie
de tip text se parcurg urm\torii pa[i>
- se selecteaz\ op]iunea Text din meniul Window<
- dac\ este necesar se redimensioneaz\ fereastra care apare (Figura 5.8)
pentru a putea fi vizualizate toate op]iunile posibile ;n partea de sus a
acesteia<
- propriet\]ile textului pot fi setate folosind c=mpurile din partea de sus
a ferestrei. :n cazul de fa]\ se folose[te Arial, 24-points, boldat<
- pentru selectarea culorii [i a altor op]iuni care nu sunt prezente ;n
fereastra Text se selecteaz\ op]iunea Font din meniul Modify. :n
fereastra care apare (Figura 5.9) se poate selecta culoarea textului
(Color). Aceasta se face prin ap\sarea butonului asociat culorii
curente. }in=ndu-se ap\sat butonul st=nga al mouse-ului pe ecran va

190

fi afi[at\ fereastra de alegere a culorii. Dup\ selectarea culorii,


butonul asociat culorii curente va fi colorat ;n aceasta<
dup\ setarea tuturor atributelor care se doresc pentru text, se introduce
textul ;n fereastra asociat\. :n cazul de fa]\ se dore[te introducerea
textului loading.... Pentru modificarea propriet\]ilor anumitor
por]iuni din textul introdus se selecteaz\ respectiva por]iune [i se
seteaz\ caracteristicile dorite pentru aceasta<
ca orice membru de distribu]ie [i acestui membru de tip text i se poate
asocia un nume (partea de sus a ferestrei)<
se ;nchide fereastra Text pentru salvarea noului membru distribu]ie
creat.
Casu]a Cast
Member Name

Op]iuni specifice pentru


Text

Textul
propriu-zis

Figura 5.8 Crearea unui membru de distribu]ie de tip text

Figura 5.9 Propriet\]ile membrilor de distribu]ie text

191

5.9 Vizualizarea membrilor distribu]iei ;n fereastra Cast


Se poate observa cu u[urin]\ c\ noii membri distribu]ie crea]i apar ;n
fereastra Internal Cast cu numele asociate (Figura 5.10). Dac\ fereastra
Internal Cast nu este vizibil\ pe ecran, se poate selecta op]iunea Internal
Cast din meniul Window.

Figura 5.10 Modul de vizualizare Cast List a distribu]iei (Cast)


Exist\ dou\ modalit\]i de vizualizare a distribu]iei. Pentru schimbarea
;ntre cele dou\ moduri se folose[te iconi]a Cast View Style din partea
superioar\ st=nga a ferestrei Internal Cast
. Modul implicit de vizualizare
este sub form\ de list\ (Cast List, Figura 5.10). Modul de vizualizare Cast
Thumbnail (Figura 5.11) afi[eaz\ c=te o c\su]\ pentru fiecare membru
distribu]ie care con]ine o imagine mic[orat\ a membrului respectiv, dar
prezint\ mai pu]ine detalii dec=t modul Cast List (nu prezint\ detalii de
genul data [i ora c=nd a fost creat/modificat etc.).

Figura 5.11 Modul de vizualizare Cast Thumbnail a distribu]iei (Cast)


Filmul din exemplul de fa]\ necesit\ doar o singur\ fereastr\ pentru
distribu]ie. Director 8 ofer\ posibilitatea cre\rii [i altor ferestrei de distribu]ie
;n func]ie de necesit\]ile utilizatorului. Pentru aceasta se selecteaz\ din
meniul File, op]iunea New [i apoi Cast. :n fereastra de dialog care apare,
utilizatorul poate atribui un nume noii distribu]ii.

192

Figura 5.12 Fereastra de dialog New Cast


Prin ap\sarea butonului Create se genereaz\ o fereastr\ pentru noua
distribu]ie.

5.10 Importarea de membri distibutie


Membrii distribu]ie care au fost crea]i anterior sunt tipuri de media ce
pot fi create ;n Director. Pentru folosirea informa]iilor media complexe,
acestea pot fi importate din alte aplica]ii. Director poate importa diverse
tipuri de informa]ii media ca bitmap, texte, video digital, fi[iere audio,
sunete, filme create ;n Flash. Pentru importarea de informa]ii multimedia,
trebuie cunoscut\ loca]ia fi[ierelor asociate acestora pe disc. :n cazul de fa]\,
toate fi[ierele multimedia necesare sunt localizate ;n acela[i folder
Tutorial_media.
Se selecteaz\ din meniul File op]iunea Import. Director afi[eaz\
caseta de dialog Import Files (Figura 5.13).
:n sec]iunea Look In, se selecteaz\ folderul corespunz\tor fi[ierelor
multimedia care se doresc a fi importate. Prin clic pe butonul Add All, toate
fi[ierele existente ;n directorul selectat vor fi ad\ugate ;n lista fi[ierelor de
importat. Se apas\ apoi butonul Import pentru ;nceperea procesului. Director
va afi[a o caset\ de dialog ;n care utilizatorul este ;ntrebat tipul de format
pentru fi[ierul curent ce se import\ (Figura 5.14). De asemenea, utilizatorul
are posibilitatea de a specifica acela[i format pentru celelalte fi[iere r\mase
de importat (se selecteaz\ Same Settings for Remaining Files ;n caseta de
dialog Select Format). Se apas\ apoi butonul OK.
Fi[ierele importate apar ;n distribu]ie (fereastra Internal Cast, Figura
5.15) ;n ordine alfabetic\ dup\ numele acestora pe disc. Fiecare membru are
asociat un num\r ;n func]ie de pozi]ia acestuia ;n fereastra Internal Cast.

193

Figura 5.13 Importarea unor membrii distribu]ie

Figura 5.14 Caseta de dialog Select Format

194

Figura 5.15 Distribu]ia dup\ procesul de import

5.11 Redenumirea membrilor distribu]iei


Utilizatorul are posibilitatea de modificare a numelui membrilor
distribu]iei. Pentru aceasta se selecteaz\ respectivul membru, iar ;n c=mpul
Cast Member Name din partea de sus a ferestrei Internal Cast se introduce
noul nume.
:n cazul de fa]\ se dore[te schimbarea numelui membrului din
flowerFrZero ;n flowerFr00 .
5.12 Ad\ugare comentarii/observa]ii pentru un membru distribu]ie
De cele mai multe ori este necesar ad\ugarea unu comentariu pentru
fiecare membru al distribu]iei. Aceste comentarii pot fi introduse ;n fereastra
Property Inspector ;n sec]iunea Member, c=mpul Comments (;n prealabil
se selecteaz\ membrul c\ruia vrea s\ i se asocieze un comentariu).
Comentariile pot fi vizualizate ;n modul List view al ferestrei Internal Cast
(Figura 5.16).

195

Figura 5.16 Ad\ugarea unui comentariu pentru un membru distribu]ie


5.13 Creare actori din membrii ai distribu]iei (creare Sprites din Cast
members)
Actorii (Sprites) sunt obiecte ob]inute din membrii distribu]ie (Cast
members). Aceste obiecte controleaz\ c=nd, unde [i cum apar ;n film
membrii distribu]iei. De exemplu, c=nd se mut\ un membru distribu]ie pe
scen\ se creaz\ un sprite care indic\ unde respectivul membru apare ;n film.
C=nd se mut\ un membru ;n scenariu (Score) se creaz\ un sprite care indic\
c=nd apare respectivul membru ;n film.
Pentru procesul de creare sprite-uri trebuie avut ;n vedere ca ferestrele
Cast, Score, Stage [i Property inspector s\ fie vizibile pe ecran. Dac\ nu,
acestea pot fi f\cute vizibile prin selectare din meniul Window.
:n principiu, sprite-urile se creaz\ prin metoda tragerii cu mouse-ul
din distribu]ie pe scen\ sau ;n scenariu. Cu alte cuvinte, se face drag and
drop din fereastra Internal Cast ;n fereastra Stage sau ;n fereastra Score.
Pentru a putea crea sprite-uri ;n mod eficient se impune mai ;nt=i
prezentarea general\ a scenariului (Score). Fereastra Score (Figura 5.17)

196

organizeaz\ [i controleaz\ con]inutul filmului ;n timp ;n r=nduri care con]in


informa]ie media, numite canale. Scenariul include canale speciale (Effects
Channels) care controleaz\ temporizarea filmului, sunetul [i paleta de culori
a acestuia. Fereastra Score include de asemenea cadre (frames) [i capul de
redare (playback head).

Canale speciale
Buton
ascundere/vizualizare
canale speciale
Cadru

Capul de redare

Canale sprite-uri

Figura 5.17 Fereastra Score


Canalele pentru sprite-uri (partea de jos a ferestrei) sunt numerotate [i
controleaz\ toat\ informa]ia media vizibil\ ;n film. Canalele speciale pot fi
ascunse prin folosirea butonului de vizualizare prezentat ;n Figura 5.17.
Un cadru dintr-un film reprezint\ un punct singular ;n timp, similar ;n
teorie cu un cadru dintr-un film real. Numerele afi[ate orizontal ;n canalele
speciale [i canalele sprite-urilor reprezint\ cadre. Prin setarea num\rului de
cadre care sunt afi[ate pe secund\ se stabile[te viteza de redare a filmului.
Capul de redare se mi[c\ de-a lungul ferestrei Score pentru a indica
cadrul care este afi[at la momentul respectiv pe scen\ (Stage). Pe m\sur\ ce
se ruleaz\ filmul, capul de redare se mi[c\ automat prin scenariu (de la st=nga
la dreapta). Se poate de asemenea efectua clic pe orice cadru din Scenariu
pentru a muta capul de redare pe respectivul cadru.
Pentru m\rirea sau mic[orarea con]inutului ferestrei Score se poate
schimba procentajul de vizualizare (Zoom in sau Zoom out din meniul
View). Comanda Zoom in m\re[te fiecare cadru, permi]=nd astfel
utilizatorului s\ vad\ mai mult\ informa]ie ;n acesta. Comanda Zoom out
permite vizualizarea mai multor cadre ;ntr-un spa]iu ecran mai mic.

197

Figura 5.18 Un sprite ;n Score


Un sprite se ;ntinde pe unul sau mai multe cadre ;n func]ie de timpul
;n care se vrea ca acesta s\ fie vizibil pe scen\ (Figura 5.18). Astfel, un sprite
;ncepe la un cadru specificat [i se poate termina ;n acela[i cadru sau ;ntr-un
cadru ulterior. De exemplu, un sprite ;ncepe la cadrul 5 [i se sf=r[e[te la
cadrul 5. Aceasta ;nseamn\ ca respectivul sprite este vizibil pe scen\ ;ntre
cadrul 5 [i cadrul 5.
Pentru crearea unui sprite trebuie parcurse urm\toarele etape>
o ;n fereastra Score se selecteaz\ cadrul unde se dore[te ca sprite-ul s\
apar\ ;n film<
o se trage un membru distribu]ie din fereastra Internal Cast ;n fereastra
Stage (pe scena) pe pozi]ia unde se dore[te ca respectivul sprite s\
apar\ ;n film. De asemenea se poate trage un membru distribu]ie
direct ;n fereastra Score (Director pozi]ioneaz\ sprite-ul astfel creat ;n
mijlocul scenei).

Figura 5.19 Pozi]ionarea sprite-ului Cer ;n Score

198

Figura 5.20 Stabilirea dimensiunilor unui sprite


:n exemplul de fa]\, se selecteaz\ cadrul 10 din canalul 1 [i se trage
membrul distribu]ie Cer ;n centrul ferestrei Stage. Se poate observa c\
sprite-ul astfel creat ;ncepe de la cadrul 10 din Score (Figura 5.19). Acum
trebuie ca sprite-ul nou creat s\ fie redimensionat la dimensiunea scenei. Cea
mai elegant\ metod\ este folosirea ferestrei Property Inspector. Pentru
aceasta se selecteaz\ sprite-ul nou creat [i ;n fereastra Property Inspector,
sectiunea Sprite se seteaz\ op]iunile pentru st=nga (left), sus (top), dreapta
(right), jos (bottom) la 0, 0, 450 [i respectiv 500 (Figura 5.20). Majoritatea
schimb\rilor care sunt f\cute asupra unui sprite nu afecteaz\ ;n nici un fel
membrul distribu]ie folosit pentru crearea acestuia (;n cazul de fa]\ nu se
redimensioneaz\ [i Cast member Cer din fereastra Internal Cast).
:n mod implicit un sprite se ;ntinde pe 28 de cadre. Aceast\ valoare
poate fi setat\ cu ajutorul casetei de dialog Sprite Preferences (din meniul
File, op]iunea Preferences [i apoi Sprite).

199

5.14 Schimbarea cernelii pentru un sprite


Utilizatorul poate controla modul ;n care culorile unui sprite apar pe
scen\ prin aplicarea de cerneal\ (ink).
:n exemplul de fa]\ se trage membrul distribu]ie Sunny Landscape ;n
cadrul 10 al canalului 2 ;n fereastra Score. Noul sprite apare ;ntr-o cutie alb\
;n centrul scenei. Pentru a pozi]iona sprite-ul Sunny Landscape astfel creat
;n alt\ pozi]ie pe scen\, se utilizeaz\ tot metoda tragerii (;n fereastra Stage se
trage sprite-ul men]ionat ;n partea de jos a scenei).

Cutie alb\

Figura 5.21 Cutia alb\ care ;nconjoar\ sprite-ul Sunny Landscape


Cutia alb\ ce ;nconjoar\ sprite-ul (Figura 5.21) poate fi facut\
transparent\ aplic=nd o cerneal\ de tip Background Transparent, care ia
fiecare pixel de o culoare specificat\ (implicit culoarea alb\) [i o face
transparent\. Pentru aceasta, cu sprite-ul Sunny Landscape selectat, se
selecteaz\ sec]iunea Sprite din fereastra Property Inspector.
Din caseta derulant\ de la op]iunea Ink se selecteaz\ Background
Transparent (Figura 5.22,a). Cutia alb\ ce ;nconjoar\ sprite-ul devine acum
transparent\ (Figura 5.22,b).

200

a)
b)
Figura 5.22 Selectarea cernelii Background Transparent pentru peisaj [i
efectul acesteia pe scen\
:n Tabelul 5.1 sunt prezentate pe scurt tipurile de cerneal\ existente ;n
Director.
Tabelul 5.1 Tipurile de cerneal\ ;n Director
Cerneala
Efectul aplic\rii acesteia asupra unui sprite suprapus pe
un alt sprite
Copy
Afi[eaz\ toate culorile originale dintr-un sprite< toate culorile
inclusiv albul sunt opace< modul implicit de afi[are.
Matte
:nl\tur\ dreptunghiul alb de jur ;mprejurul sprite-ului< toate
culorile din interiorul dreptunghiului sunt opace.
Background Face to]i pixelii din fundalul sprite-ului s\ fie transparen]i [i
transparent permite astfel ca fundalul scenei s\ fie v\zut.
Transparent Face ca toate culorile deschise s\ fie transparente permi]=nd
ca obiectele luminate s\ fie vizibile sub sprite.
Reverse
Inverseaz\ culorile care se suprapun< c=nd este aplicat
sprite-ului de deasupra, acolo unde culorile se suprapun,
culoarea de deasupra se schimb\ cu negativul cromatic al
culorii de dedesubtul ei.
Ghost
Similar cu reverse, inverseaz\ culorile care se suprapun, cu
excep]ia faptului c\ celelalte culori sunt transparente<
sprite-ul nu este vizibil dec=t dac\ se suprapune cu alt sprite.

201

Cerneala

Efectul aplic\rii acesteia asupra unui sprite suprapus pe


un alt sprite
Not Copy
Creaz\ un negativ cormatic al originalului.
Not
Varia]ii ale efectelor men]ionate mai sus< imaginea de
Transparent deasupra este mai ;nt=i inversat\, iar apoi sunt aplicate
Not reverse efectele Transparent, Reverse sau Ghost.
Not Ghost
Mask
Determin\ p\r]ile sprite-ului care sunt transparente sau opace.
Pentru aceasta este nevoie a fi definit\ o masc\ ca un membru
distribu]ie (p\r]ile albe din masc\ sunt transparente, iar cele
negre sunt opace).
Blend
Asigur\ un amestec cu un procentaj specificat al sprite-ului
cu sprite-ul de dedebsubtul lui.
Darkest
Compar\ culorile pixelilor de deasupra cu cele ale pixelilor
de dedesubt [i folose[te pixelul cu culoarea cea mai ;nchis\.
Lightest
Similar cu Darkest, dar se folose[te culoarea cea mai
deschis\.
Add
Creaz\ o nou\ culoare prin adunarea celor dou\ culori (se
realizeaz\ o normalizare dac\ culoarea RGB rezultant\ este
mai mare ca 255).
Add Pin
Similar cu Add, dar nu se realizeaz\ normalizare.
Substract
Scade valoarea RGB a culorii sprite-ului de deasupra din
culoarea sprite-ului de dedesubt (valoarea ob]inut\ nu poate fi
mai mic\ ca 0).
Darken
:n general ;ntunec\ un sprite.
Lighten
Deschide culorile dintr-un sprite.
(Tabelul 5.1 cont.)

5.15 Schimbarea duratei unui sprite


A[a cum s-a men]ionat anterior, durata implicit\ a unui sprite este 28
de cadre. :n exemplul de fa]\, sprite-urile Cer [i Sunny Landscape apar pe
scen\ pe parcursul ;ntregului film, p=n\ la cadrul 180. Pentru aceasta se
selecteaz\ ambele sprite-uri din fereastra Score (]in=ndu-se ap\sat\ tasta
SHIFT). C=nd sunt selectate mai multe sprite-uri se pot modifica
propriet\]ile pentru toate acestea. :n fereastra Property Inspector, sec]iunea
Sprite exist\ dou\ c=mpuri (Figura 5.23)> cadrul de ;nceput al sprite-ului
(Begin Frame) [i cadrul de sf=r[it al sprite-ului (End Frame).

202

Figura 5.23 C=mpurile de ;nceput [i de sf=r[it ale unui sprite ;n fereastra


Property Inspector
Se introduce valoarea 180 ;n c=mpul End Frame pentru a extinde
sprite-urile selectate p=n\ la cadrul 180.
5.16 Blocare sprite-uri (Lock sprites)
Pentru a preveni schimb\ri neavenite asupra unor sprite-uri, acestea
pot fi blocate (lock). Dup\ ce un sprite a fost blocat, acesta nu mai poate fi
mutat sau s\ ;i fie schimbate propriet\]ile, p=n\ ;n momentul c=nd este
deblocat. Pentru aceasta, ;n fereastra Property Inspector exist\ butonul
Lock Sprite
. Pentru deblocarea sprite-ului selectat se utilizeaz\ acela[i
buton Lock Sprite.
:n exemplul de fa]\ se blocheaz\ sprite-ul Sunny Landscape.
5.17 Creare alte sprite-uri
Din moment ce filmul ;ncepe cu o zi ;nnorat\, trebuie creat efectul de
;nnorare. Pentru aceasta, deasupra peisajului ;nsorit (Sunny Landscape) se
adaug\ un sprite Cloudy Landscape (;n canalul 3, cadrul 10 al ferestrei
Score). De asemenea se seteaz\ cerneala acestuia ca find Background
Transparent (din Property Inspector).
5.18 Alinierea sprite-urilor
Sprite-urile Sunny Landscape [i Cloudy Landscape trebuie s\ fie
aliniate perfect una peste alta. Pentru aceasta se selecteaz\ cele dou\
sprite-uri [i se alege op]iunea Align din meniul Modify.
Pe ecran este afi[at\ caseta de dialog Align (Figura 5.24,a), cu dou\
casete derulante cu op]iuni pentru alinierea pe vertical\
[i pe orizontal\
. Se selecteaz\ op]iunile AlignReg. Point (aliniere puncte de pozi]ionare,
Figura 5.24,b). Aceste puncte de pozi]ionare (registration points) sunt
definite implicit ;n centrul imaginii bitmap. Ele pot fi schimbate de c\tre
utilizator ;n fereastra Paint.
Director avertizeaz\ c\ alinierea nu va afecta sprite-ul blocat (Sunny
Landscape, blocat anterior).

203

a)
b)
Figura 5.24 Caseta de dialog Align si op]iunile de aliniere a sprite-urilor
Pentru sprite-ul Cloudy Landscape se introduce cadrul 130 ;n
c=mpul End Frame din fereastra Property Inspector.
5.19 M\rirea sau mic[orarea ferestrei scenei
:nainte de a crea o secven]\ animat\ care mi[c\ norii de pe cer va fi
nevoie de mic[orarea ferestrei scenei pentru a facilita aranjarea norilor.
:n Director se poate folosi comanda Zoom pentru a vizualiza scena
mai mic\ sau mai mare dec=t dimensiunea ei original\. Comanda Zoom
afecteaz\ doar vizualizarea scenei [i nu afecteaz\ dimensiunile scenei
specificate ;n fereastra Property Inspector. Exist\ mai multe modalit\]i de
m\rire/mic[orare a ferestrei Stage, astfel>
- cu scena activ\ se apas\ combina]ia de taste CTRL + - pentru
zoom out (mic[orare) sau CTRL + + pentru zoom in (m\rire)<
- cu scena activ\ se selecteaz\ comenzile Zoom in sau Zoom out din
meniul View<
- selectarea unui procent de vizualizare din partea de jos a ferestrei
(caseta derulant\ Zoom Menu)<
Stage
Procentajul de vizualizare a scenei apare afi[at ;n bara de titlu a
ferestrei Stage.
:n cazul de fa]\ se mic[oreaz\ fereastra Stage. Se observ\ c\ pe
m\sur\ ce [i scena se mic[oreaz\, spa]iul de culoare gri de jur ;mprejurul
acesteia se m\re[te. Acolo pot fi plasate sprite-uri ;nainte de a intra ;n scen\.
Numai obiectele plasate ;n scen\ vor fi vizibile ;n film, celelalte nefiind
afi[ate.

204

Urm\toarea etap\ ;n exerci]iul propus este plasarea norilor. Pentru


aceasta exist\ doi membri distribu]ie Cloud01 [i Cloud 02. Se selecteaz\
cadrul 10 din canalul 4. Se trage membrul Cloud 02 pe scen\, plas=ndu-l spre
dreapta scenei (Figura 5.25). Nu conteaz\ dac\ sprite-ul se extinde ;n afara
scenei. Se extinde durata acestui sprite p=n\ la cadrul 120. De asemenea, se
seteaz\ cerneala de afi[are a sprite-ului ca fiind Background Transparent.

Figura 5.25 Pozi]ionarea primului nor pe scen\

Figura 5.26 Pozi]ionarea final\ a norilor pe scen\

205

Se selecteaz\ apoi cadrul 10 din canalul 5 [i se trage membrul


Cloud01 pe scen\ pozi]ion=ndu-l ;n st=nga sus. Se extinde sf=r[itul acestui
sprite p=n\ la cadrul 95 [i se seteaz\ cerneala ca fiind Background
Transparent.
Se creaz\ un nou sprite ;n canalul 6, cadrul 10 folosind tot membrul
Cloud02. Se seteaz\ cadrul de sf=r[it al acestuia ca fiind 75 [i de asemenea
cerneala ca Background Transparent. Se pozi]ioneaz\ acest ultim sprite pe
scen\ ;n a[a fel ;nc=t s\ acopere c=t mai mult din cer (Figura 5.26).
5.20 Creare anima]ii in Director
5.20.1 Creare anima]ie simpl\ folosind metoda tweening
Pentru a face norii s\ se mi[te de-a lungul cerului se va folosi o
tehnic\ simpl\ de anima]ie numit\ tweening. Pentru aceasta, se definesc
propriet\]ile unor cadre numite cadre cheie, iar Director umple automat
cadrele dintre acestea (Figura 5.27). Un cadru cheie indic\ ;n general o
schimbare ;n propriet\]ile sprite-ului. Propriet\]ile care pot fi tweened sunt
pozi]ia, dimensiunea, rota]ia, amestecul de culori (blend) etc. Fiecare cadru
cheie define[te o valoare pentru aceste propriet\]i (chiar dac\ ;n cele mai
multe cazuri ;n mod explicit numai una dintre ele).
Cadrul de
start

Cadrul de
start

Cadre cheie

Cadre cheie

Cadrul de
sf\r[it

Cadrul de
sf=r[it

Figura 5.27 Cadrele cheie pentru procesul de tweening

Pentru aceasta se execut\ urm\torii pa[i>


se selecteaz\ sprite-ul Cloud02 din canalul 4 al ferestrei Score<

206

pe scen\, sprite-ul Cloud02 este acum selectat. :n mijlocul acestuia se


poate observa un punct ro[u [i unul albastru. Aceste puncte reprezint\
ni[te m=nere pentru procesul de creare a unei c\i de anima]ie pentru
un sprite<
]in=ndu-se ap\sat\ tasta SHIFT se trage de acest m=ner spre st=nga,
p=n\ departe de marginea din st=nga a scenei. Pe m\sur\ ce se trage
de m=ner, acesta se separ\ ;n mai multe puncte (cercuri). Un cerc
verde indic\ loca]ia de ;nceput a unui sprite, un cerc albastru arat\
loca]ia sprite-ului ;n rela]ie cu cadrul curent [i un cerc ro[u reprezint\
pozi]ia de sf=r[it a sprite-ului. }in=ndu-se ap\sat\ tasta SHIFT se
constr=nge mi[carea m=nerului la o linie vertical\ sau orizontal\<
se selecteaz\ sprite-ul Cloud01 din canalul 5 [i se trage de m=ner
p=n\ departe de marginea din dreapta a scenei<
se selecteaz\ sprite-ul Cloud02 din canalul 6 [i se trage de m=ner
p=n\ departe de marginea din st=nga a scenei<
se aduce scena la scara 1>1 de vizualizare (100%)<
se organizeaz\ ferestrele ;n a[a fel ;nc=t s\ se vizualizeze ferestrele
Stage [i Score [i de pe bara de instrumente a programului Director se
apas\ butonul
Rewind (derulare ;napoi) [i apoi butonul
Play
(rulare film).

Se poate observa c\ norii se mi[c\ ;ntre punctul de start [i punctul de


sf=r[it definite prin opera]ia de tweening. De asemenea, ;n fereastra Score,
capul de redare (playback head) se mi[c\ de-a lungul fiec\rui cadru din
scenariu pe m\sura ce ruleaz\ filmul. Capul de redare sau citire indic\ cadrul
curent. Pentru vizualizarea unui anumit cadru se trage capul de citire de-a
lungul scenariului p=n\ se ;nt=lne[te respectivul cadru.
Pentru oprirea rul\rii filmului se apas\ butonul
Stop din bara de
instrumente a programului Director.
Observatie> :n fereastra Score, mici cercuri apar la ;nceputul [i
sf=r[itul celor trei sprite-uri corespunz\toare norilor. Aceste cercuri reprezint\
cadruri cheie [i indic\ unde propriet\]ile unui sprite se schimb\ (Figura 5.28).

207

Capul de redare

Cadru cheie

Figura 5.28 Vizualizarea cadrelor cheie ;n fereastra Score


5.20.2 Stoparea rul\rii continue a unui film
:n momentul rul\rii unui film, capul de redare ajunge la ultimul cadru
din film [i se ;ntoarce din nou la primul cadru. Se realizeaz\ astfel o bucl\
continu\, iar filmul se ruleaz\ teoretic de un num\r infinit de ori. Pentru a
stopa reluarea filmului se dore[te ca respectivul cap de redare s\ se opreasc\
;n momentul c=nd ajunge la ultimul cadru. Astfel, din meniul Control se
deselecteaz\ op]iunea Loop Playback. Acum, c=nd se ruleaz\ filmul, capul
de redare se opre[te pe ultimul cadru al filmului.
5.20.3 Amestecul de sprite-uri (blend sprite)
:n plus fa]\ de procesul de tweening a c\ii unui sprite, se poate folosi
acela[i proces pentru alte propriet\]i ale sprite-urilor, ca de exemplu
dimensiunea, rota]ia [i amestecul de culori dintre sprite-uri. Prin schimbarea
propriet\]ilor cernelii [i ;n principal a cernelii de tip Blend se pot genera
efecte de tip Fade in (apari]ie treptat\) sau Fade out (dispari]ie treptat\). :n
exemplul propus, dup\ ce norii au disp\rut de pe scen\, se dore[te ca peisajul
s\ apar\ ;nsorit. Aceasta se poate realiza prin folosirea propriet\]ilor cernelii
(Blend) pentru a face ca peisajul ;ntunecat s\ dispar\ treptat, ;n timp ce
peisajul ;nsorit s\ apar\ treptat.
Mai ;nt=i trebuie specificat ;n care cadru trebuie sa ;nceap\ efectul de
amestec (Blend).
:n fereastra Score se selecteaz\ cadrul 80 al sprite-ului Cloudy
Landscape (peisajul ;nnorat). Din meniul Modify se selecteaz\ op]iunea
Split Sprite (desparte sprite-ul). :n acest fel, sprite-ul curent este desp\r]it ;n

208

dou\ sprite-uri de cadrul curent (80). Se selecteaz\ apoi cadrul cheie de


sf=r[it al celui de-al doilea sprite Cloudy Landscape creat (dreptunghiul mic
din cadrul 130). :n fereastra Property Inspector, sec]iunea Sprite se
selecteaz\ cerneala ca fiind de tip Blend cu un procentaj de 10 % (Figura
5.29).

Figura 5.29 Selectarea cernelii de tip Blend


Se observ\ c\ respectivul cadru cheie se schimb\ ;ntr-un mic cercule]
pentru a indica o schimbare ;n propriet\]ile sprite-ului. Se deruleaz\ [i se
ruleaz\ filmul pentru a putea observa efectul de amestec (blend).
5.20.4 Creare anima]ie cadru cu cadru
Un sprite este ;n general o instan]\ a unui singur membru al
distribu]iei plasat pe scen\ sau ;n scenariu. Cu toate acestea, un sprite poate
include mai mul]i membri ai distribu]iei. Anima]ia care folose[te mai mul]i
membri ai distribu]iei se nume[te anima]ie cadru cu cadru. Aceast\ tehnic\
ofer\ posibilitatea cre\rii de anima]ii mai complexe dec=t anima]ia simpl\
prin tweening.
5.20.4.1 Schimbarea ordinei membrilor distribu]iei
Pentru crearea de anima]ie cadru cu cadru se poate folosi metoda Cast
to Time care permite mutarea mai multor membri ai distribu]iei ;n scenariu
ca un singur sprite. Pentru aceasta este necesar ca respectivii membri ai
distribu]iei s\ fie ;n aceea[i ordine ;n fereastra Internal Cast ca [i ordinea ;n
care apar ;n anima]ie. :n cazul de fa]\, anima]ia care se creaz\ reprezint\ o
floare care r\sare, cre[te [i apoi ;nflore[te. Se poate observa ;n fereastra Cast
(;n modul de vizualizare Thumbnail View) c\ membrul flowerFr00 este ;n
afara secven]ei. Aceasta este prima imagine din anima]ie [i deci trebuie
mutat\ ;naintea celorlal]i membri (;naintea lui flowerFr01).
Se trage membrul flowerFr00 peste membrul flowerFr01. Se poate
observa c\ flowerFr00 ia pozi]ia membrului flowerFr00. Ceilal]i membri
sunt deplasa]i spre dreapta. Acum, membrii distribu]iei necesari pentru
anima]ie sunt ;n ordinea dorit\ (Figura 5.30).

209

Figura 5.30 Schimbarea ordinii membrilor de distribu]ie


5.20.5 Creare anima]ie de tip Cast to Time (distribu]ie ;n timp)
Se selecteaz\ cadrul 140 din canalul 7 ;n fereastra Score. Se
selecteaz\ to]i membri flowerFr00 p=n\ la flowerFr16 (]in=ndu-se ap\sat\
tasta SHIFT). Din meniul Modify se alege op]iunea Cast to Time. Se poate
obseva c\ florile apar ca un singur sprite ;n fereastra Score (Figura 5.31).

Figura 5.31 Un singur sprite rezultant din crearea unei anima]ii


de tip Cast to time
:n mod implicit, cerneala Background Transparent este folosit\ de
Director pentru a face ca fundalul alb s\ fie transparent. :n cazul de fa]\,
fundalul este negru. Utilizatorul poate face ;n a[a fel ;nc=t culoarea neagr\ s\
fie transparent\. Astfel, se selecteaz\ sprite-ul asociat florii [i ;n fereastra

210

Property Inspector se selecteaz\ culoarea pentru fundal (Background) ca


fiind neagr\ (Figura 5.32).
Culoarea fundalului (background)

Figura 5.32 Selectarea culorii fundalului unui sprite


Se seteaz\ acum cerneala sprite-ului ca fiind Background
transparent. De asemenea, se extinde sprite-ul p=n\ la cadrul 180. Pentru a
vizualiza anima]ia se deruleaz\ [i se ruleaz\ filmul.
5.21 Ata[are comportamente sprite-urilor
Comportamentele adaug\ inteligen]\ [i flexibilitate unui film. :n locul
rul\rii cadrelor exact cum dicteaz\ scenariul (Score), un comportament poate
controla filmul car\spuns la condi]ii sau evenimente specifice.
:n acest exemplu se vor folosi comportamente pentru a face o albin\
s\ se mi[te aleator ;n jurul florii [i de asemenea s\ urmeze mi[carea
cursorului mouse-ului.
C=nd se ata[eaz\ comportamente unui sprite ;ntreg, spre deosebire de
un singur cadru, se poate trage comportamentul peste sprite-ul din fereastra
Score sau din fereastra Stage.
Mai ;nt=i trebuie creat un sprite pentru albin\. Se selecteaz\ cadrul
175 al canalului 8 din Score. Se trage membrul de distribu]ie albin\ pe scen\,
;n apropierea florii. Se scurteaz\ sprite-ul p=n\ la cadrul 180 (acest lucru se
poate realiza [i prin tragerea cu mouse-ul a cadrului de sf=r[it al sprite-ului
pentru scurtarea sau extinderea sprite-ului selectat).

Numele
categoriei

comportamente

Figura 5.33 Fereastra Library Palette

211

Director pune la dispozi]ia utilizatorului o serie de comportamente


predefinite. Acestea se g\sesc ;ntr-o libr\rie Library Palette. Dac\ fereastra
Library palette nu este vizibil\,se poate selecta din meniul Window.
Aceast\ fereastr\ afi[eaz\ comportamentele grupate ;n categorii (Figura
5.33). Numele categoriei active apare ;n partea de sus a ferestrei (c=mpul
Library List, Figura 5.34).
Numele fiec\rui comportament apare l=ng\ o iconi]\ care indic\ tipul
acestuia.
Din categoria Automatic se alege comportamentul Random
Movement and Rotation (mi[care aleatoare [i rota]ie). Pentru a citi o
descriere a ceea ce face respectivul comportament se poate ]ine cursorul
mouse-ului deasupra iconi]ei asociate cu acesta. Se trage comportamentul
Random Movement and Rotation peste sprite-ul albinei din Score. O
caset\ de dialog cu parametrii pentru respectivul comportament este afi[at\.

Figura 5.34 Selectarea unei categorii de comportamente din fereastra


Library Palette
:n acela[i mod se poate ad\uga [i comportamentul Turn Towards
Mouse (;ndreapt\-te c\tre mouse) care face ca sprite-ul c\ruia ;i este asociat
s\ se ;ntoarc\ c\tre cursorul mouse-ului. Acest comportament se g\se[te ;n
categoria Animation, subcategoria Interactive din Library Palette.
Comportamentul se poate trage [i asupra sprite-ului din fereastra Stage. Se
observ\ c\ apare un dreptunghi ;mprejurul sprite-ului c=nd se trage
comportamentul deasupra acestuia. {i de aceasta dat\ este afi[at\ o cutie de
dialog cu parametrii ce controleaz\ comportamentul. Se selecteaz\ op]iunea
Always (mereu) [i se apas\ butonul OK.
P=n\ acum s-au ata[at comportamente care afecteaz\ sprite-urile.
Comportamentele pot fi asociate [i cadrelor pentru ac]iuni care afecteaz\
modul ;n care se comport\ filmul.

212

:n exemplul curent se va ata[a un comportament ultimului cadru al


filmului (180) pentru a fi rulat ;n mod repetat, adic\ pentru a men]ine capul
de citire acolo. Comportamentul se g\se[te ;n categoria Navigation
(navigare) [i se nume[te Hold on Current Frame (men]ine pe cadrul
curent). A[a cum ;i spune [i numele, acest comportament presupune
men]inerea la nesf=r[it a capului de redare ;n cadrul c\ruia ;i este asociat.
Aceste comportamente se trag ;n canalul special (Script channel). :n cazul
de fa]\ este asociat cu ultimul cadru, a[a c\ este tras peste ultimul cadru ;n
canalul script (Figura 5.35). Pentru vizualizarea filmului se deruleaz\ [i se
ruleaz\ filmul. Se observ\ c\, atunci c=nd capul de citire ajunge la ultimul
cadru, filmul continu\ s\ ruleze, dar capul de citire este men]inut pe acesta.
Canalul special script

Comportametul
Hold on Current Frame asociat
cadrului 180

Figura 5.35 Asocierea unui comportament cu un cadru prin intermediul


canalului special Script
5.22 Ad\ugare sunet
A[a cum s-a men]ionat anterior albina va b=z=i. Pentru aceasta trebuie
ad\ugat sunet filmului. Director ofer\ mai multe posibilit\]i de ad\ugare [i
sincronizare a sunetului. :n cele ce urmeaz\, se va prezenta o procedur\
simpl\ pentru controlul sunetului ;n Score. Controlul sunetului ;n scenariu
(Score) este similar cu controlul altor sprite-uri, cu diferen]a c\ sunetul se
adaug\ ;n canalele speciale de sunet din partea de sus a ferestrei Score. Dac\
canalele de sunet nu sunt vizibile, atunci se apas\ pe butonul de expandare .
Se trage membrul distribu]ie buzzing (zumz\it) ;n cadrul 175 al canalului
de sunet 1 [i se scurteaz\ cadrul de sf=r[it al acestuia la 180 (Figura 5.36). :n
fereastra Property Inspector ;n sec]iunea Sound se selecteaz\ Loop
(buclare). Aceasta face ca sunetul s\ fie rulat continuu ;n timp ce albina este
aflat\ pe scen\.

213

Canelele speciale de
sunet

Figura 5.36 Ad\ugarea sunetului ;n canalele speciale de sunet


5.23 Streaming desc\rcarea rapid\ de pe Internet a filmului
Atunci c=nd se inten]ioneaz\ publicarea filmului pe Internet este
adesea necesar ca filmul s\ ;nceap\ s\ ruleze chiar c=nd con]inutul acestuia
nu a fost complet desc\rcat pe calculatorul local, proces care se nume[te
streaming. Streaming face ca filmul s\ ;nceap\ s\ ruleze de ;ndat\ ce
con]inutul necesar pentru primul cadru este desc\rcat pe calculatorul local.
Con]inutul r\mas se descarc\ apoi ;n continuare ;n fundal (proces care nu este
;ns\ sesizat de utilizator). Avantajul metodei streaming este c\ se scurteaz\
timpul perceput de utilizator pentru desc\rcarea filmului de pe Internet.
Timpul este de fapt acela[i, dar utilizatorul nu percepe ca timp de desc\rcare
dec=t timpul necesar desc\rc\rii con]inutului necesar pentru primul cadru.
5.24 Crearea unei introduceri pentru streaming
:n cazul streaming este adesea recomandat s\ se ;nceap\ cu o scen\ de
introducere care se descarc\ rapid [i care este rulat\ ;ncontinuu p=n\ c=nd
urm\toarea scen\ s-a desc\rcat de pe Internet. :n acest exemplu se va ad\uga
un film de tip Flash care anun]\ utilizatorul ca restul fimului se ;ncarc\.
-

se trage membrul distribu]ie Black Shape peste cadrul 1 din canalul 1


;n Score. Sprite-ul astfel creat va cuprinde cele 10 cadre disponibile<
folosind fereastra Property Inspector se redimensioneaz\ sprite-ul
prin setarea Left, Top, Right [i Bottom la 0,0,450 [i respectiv 500<

214

;n fereastra Score se selecteaz\ cadrul 1 din canalul 2 [i se trage


membrul distribu]ie text Loading ;ntr-un loc apropiat de centrul
scenei (Stage)<
- se selecteaz\ sprite-ul text Loading [i i se seteaz\ cerneala ca fiind
Background Transparent<
- se trage membrul de distribu]ie Loadloop ;n cadrul 1 din canalul 3 al
ferestrei Score. Acest membru de distribu]ie este un film Flash [i ;i va
comunica utilizatorului c\ filmul se descarc\ de pe Internet<
- pe scen\ (Stage) se trage sprite-ul Loadloop ;n a[a fel ;nc=t s\ fie
centrat sub text<
- din fereastra Library List se selecteaz\ Internet [i apoi Streaming<
- se trage efectul Loop Until Media in Frame is Available ;n canalul
script al cadrului 1<
- ;n caseta de dialog Parameters se tasteaz\ 10 ;n c=mpul Wait for
Media in Frame field [i se apas\ Ok.
De fapt, ;n acest fel se specific\ programului Director s\ ruleze filmul
Flash p=n\ c=nd tot con]inutul necesar p=n\ la cadrul 10 se descarc\. Odat\
ce sprite-urile din cadrul 10 s-au desc\rcat, efectul se termin\ [i filmul ;ncepe
s\ ruleze, urm=nd ca procesul de desc\rcare s\ continue ;n fundal.
-

5.25 Publicarea filmului pe Internet


Director poate genera ;ntr-o singur\ etap\ o pagin\ web care s\
includ\ filmul realizat. Se selecteaz\ astfel op]iunea Publish din meniul File,
dup\ ce ;n prealabil se salveaz\ filmul. Director creaz\ o versiune
Shockwave a filmului ;n acela[i director ;n care se g\se[te salvat acesta. Se
va deschide apoi o fereastr\ a browserului curent [i filmul Shockwave va fi
rulat. Fimul va putea fi vizualizat ;n browser, dac\ acesta are instalat un
plug-in pentru Shockwave. :n caz contrar, utilizatorul este ghidat spre pagina
de desc\rcare gratuit\ de pe Internet a plug-in-ului.
5.26 Ad\ugare interactivitate cu Lingo
Lingo este limbajul de programare din spatele programului Director
8. Cu ajutorul acestuia se pot crea scripturi (programe) pentru a introduce
interactivitate ;n film. Folosind Lingo, se pot realiza multe opera]ii care de
regul\ pot fi realizate cu ajutorul interfe]ei grafice a programului Director (ca
de exemplu schimbarea culorii sau dimensiunii unui sprite, mutarea unui
sprite pe scen\ etc.).
Utilitatea folosirii limbajului Lingo vine din flexibilitatea pe care o
aduce filmului. :n loc s\ se ruleze o serie de cadre consecutive, a[a cum sunt
ele dictate de scenariu (Score), Lingo poate controla rularea filmului ca

215

r\spuns la diverse condi]ii sau evenimente. De exemplu, un sprite se poate


muta sau nu dac\ utilizatorul a ap\sat sau nu un anumit buton de pe scen\.
Director include o serie de scripturi predefinite care se g\sesc ;n
fereastra Library Palette [i se numesc comportamente. Aceste
comportamente dau posibilitatea utilizatorului s\ adauge interactivitate f\r\ a
scrie linii de cod, ci doar prin tragerea acestora peste sprite-urile
corespunz\toare. Aceste scripturi predefinite pot fi modificate, sau
utilizatorul poate scrie propriile scripturi pe care s\ le asocieze unor
sprite-uri.
5.27 Folosire marcatori
Marcatorii identific\ loca]ii fixe la un anumit cadru din film. Cu alte
cuvinte, un marcator este de fapt un nume asociat unui cadru din film.
Marcatorii se folosesc atunci c=nd se creaz\ structuri de naviga]ie ;n film
(meniuri). Folosind Lingo sau comportamente din Library Palette se poate
muta capul de citire la anumite cadre identificate prin marcatori. Acest lucru
este folositor atunci c=nd se sare la scene noi dintr-un meniu.
Odat\ ce un cadru a fost marcat (i s-a asociat un marcator), numele
marcatorului poate fi folosit ;n comportamentele predefinite sau ;n scripturi
pentru a face referire la cadrul asociat acestuia. Referirea la cadrele din filme
se poate face de asemenea folosind num\rul acestora, dar folosind marcatorii
este o solu]ie mai elegant\. Un dezavantaj al folosirii numerelor cadrelor ;n
locul unor marcatori apare ;n cazul ;n care se insereaz\ sau se [terg cadre din
Score.
5.27.1 Crearea unui marcator
Pentru crearea unui marcator se poate face clic simplu ;n canalul
special asociat marcatorilor din fereastra Score (Figura 5.37). :n locul
respectiv apare un nou marcator cu numele implicit New Marker n unde n
este num\rul marcatorului. Utilizatorul poate asocia un alt nume cu
respectivul marcator (Figura 5.38).
5.27.2 {tergerea unui marcator
Pentru [tergerea unui marcator se folose[te metoda tragerii cu
mouse-ul al acestuia afar\ din canalul special al marcatorilor.

216

Canalul marcatorilor

Figura 5.37 Canalul marcatorilor din fereastra Score

Figura 5.38 Ad\ugarea [i atribuirea de nume a unui marcator

Figura 5.39 Lista marcatorilor

Figura 5.40 Fereastra asociat\ marcatorilor


:n timpul implement\rii aplica]iei multimedia ;n Director, utilizatorul
poate folosi butoanele Next Marker [i Previous Marker din partea st=ng\ a
canalului special asociat marcatorilor pentru a muta capul de citire la
marcatorul urm\tor sau cel dinainte. Exist\ o fereastr\ asociat\ marcatorilor
care se nume[te Markers (Figura 5.40). Aceasta poate fi afi[at\ prin dou\

217

metode. Prima metod\ este folosirea butonului Markers Menu din st=nga
canalului marcatorilor (Figura 5.39). Acest buton afi[eaz\ o list\ a
marcatorilor, iar ;n finalul listei o op]iune Markers pentru afi[area ferestrei
asociate marcatorilor. O alt\ modalitate de a afi[a fereastra Markers este
selectarea op]iunii Markers din meniul Window. :n partea st=ng\ a ferestrei
Markers sunt afi[a]i to]i marcatorii defini]i ;n film, utilizatorul put=nd
selecta unul dintre ace[tia. :n partea dreapt\ a ferestrei, se afi[eaz\ numele
marcatorului selectat, nume care poate fi editat. De asemenea, sus ;n fereastra
marcatorilor este specificat num\rul cadrului asociat cu marcatorul curent.
5.28 Controlul naviga]iei
Se consider\ urm\torul exemplu simplu. Exist\ o sec]iune ;n film
unde exist\ un meniu cu dou\ op]iuni (Optiunea1 [i Optiunea2, Figura
5.41). Execu]ia filmului se opre[te dup\ afi[area meniului [i se a[teapt\ ca
utilizatorul s\ selecteze una din cele dou\ op]iuni. Dac\ se apas\ Optiunea1,
atunci capul de citire va efectua un salt la o sec]iune din film asociat\ cu
Optiunea1 (Figura 5.42). :n mod similar, capul de citire va s\ri la o sec]iune
din film asociat\ cu Optiunea2 atunci c=nd utilizatorul apas\ cu butonul
st=nga al mouse-ului pe sprite-ul asociat op]iunii 2 (Figura 5.43). Dup\ ce s-a
terminat sec]iunea asociat\ unei op]iuni, pe ecran apare un sprite pe care dac\
se apas\ se revine ;n meniu (capul de citire face din nou un salt la sec]iunea
de afi[are a meniului).

Figura 5.41 Scena pentru meniu

218

Figura 5.42 Scena pentru sec]iunea 1

Figura 5.43 Scena pentru sec]iunea 2

Figura 5.44 Fereastra Score pentru exemplul de fa]\

219

Practic, este implementat urm\torul exemplu (Figura 5.44)>


de la cadrul 0 p=n\ la cadrul 15 este afi[at meniul<
la cadrul 15 rularea filmului trebuie oprit\ pentru a da posibilitatea
utilizatorului s\ aleag\ o op]iune [i astfel se folose[te comportamentul
Hold on Current Frame din categoria Navigation a Library
Palette<
- sec]iunea din film asociat\ op]iunii 1 se g\se[te ;ntre cadrul 20 [i 30<
- sec]iunea din film asociat\ op]iunii 2 se g\se[te ;ntre cadrul 35 [i 45.
Pentru ca dup\ afi[area sec]iunii corespunz\toare unei op]iuni din
meniu aplica]ia s\ a[tepte interven]ia utilizatorului (re;ntoarcerea ;n meniu
prin ap\sarea unui sprite) se folose[te la sf=r[itul acestor sec]iuni acela[i
comportament asociat cadrelor de sf=r[it Hold On Current Frame.
Fiec\rui cadru de ;nceput a unei sec]iuni i se definesc ni[te marcatori,
astfel pentru cadrul 0 marcatorul meniu, pentru cadrul 20 marcatorul
opt1 [i pentru cadrul 35 marcatorul opt2.
Ceea ce mai trebuie f\cut acum este s\ se asocieze un comportament
sau un mic script sprite-urilor care reprezint\ op]iunile, astfel ;nc=t capul de
citire s\ sar\ la sec]iunea asociat\. Exista dou\ metode>
1. Folosind un script Lingo
Pentru a asocia un script unui sprite se folose[te meniul context al
sprite-ului respectiv [i se selecteaz\ op]iunea Script. Pe ecran este
afi[at\ o fereastr\ ;n care utilizatorul, folosind limbajul de programare
Lingo poate scrie scriptul (Figura 5.45). Implicit, c=nd se asociaz\ un
script unui sprite se consider\ c\ respectivul script se execut\ ;n
momentul c=nd se apas\ cu butonul st=nga al mouse-ului pe sprite
(scriptul trateaz\ ;n mod implicit evenimentul care se produce la
ap\sarea butonului st=nga al mouse-ului). De aici provin [i liniile de
cod care apar ;n fereastra scriptului>
-

on mouseUp me
end
Pentru a realiza s\ritura la sec]iunea asociat\ op]iunii, se poate
folosi urm\toarea linie de cod>
on mouseUp me
go to frame "opt1"
end

220

Figura 5.45 Fereastra pentru scrierea scriptului ;n Lingo


Linii de cod asem\n\toare se introduc [i ;n scripturile asociate
sprite-urilor Optiune2 [i :napoi la meniu (Figura 5.46 si Figura 5.47).

Figura 5.46 Scriptul Lingo pentru saltul la sec]iunea 2

Figura 5.47 Scriptul Lingo pentru saltul ;napoi la meniu

221

2. Folosind efectul Go To Frame X Button din categoria Navigation a


Library Palette.
Se folose[te metoda tragerii cu mouse-ul pentru a lua efectul din
fereastra Library Palette [i a-l trage peste sprite-ul corespunz\tor. Pe
ecran apare o caset\ de dialog ;n care utilizatorul trebuie s\ introduc\
num\rul cadrului la care se execut\ s\ritura. Aten]ie, nu se poate
introduce un marcator c=nd se folose[te acest efect. Din aceasta cauz\
solu]ia cea mai elegant\ este cea de la punctul 1.
5.29 Realizarea efectului RollOver
Folosind comportamentele predefinite din Library Palette
utilizatorul poate foarte simplu s\ realizeze a[a numitele efecte RollOver.
Aceste efecte presupun schimbarea aspectului unui obiect, atunci c=nd
mouse-ul este trecut deasupra lor. Cu alte cuvinte, c=nd cursorul mouse-ului
se afl\ deasupra unui sprite, atunci acesta ;[i va schimba aspectul, iar c=nd
cursorul mouse-ului p\r\se[te respectivul sprite, acesta revine la aspectul
ini]ial. Un astfel de efect este util pentru a ad\uga interactivitate unei aplica]ii
multimedia. :n continuare se va prezenta un exemplu foarte simplu. Un
dreptunghi ro[u din scen\ va fi schimbat ;ntr-unul verde atunci c=nd cursorul
mouse-ului este deasupra acestuia. C=nd cursorul mouse-ului p\r\se[te
sprite-ul, atunci dreptunghiul va redeveni ro[u. Pentru aceasta este nevoie de
doi membri distribu]ie [i anume un dreptunghi ro[u (cu numele rosu) [i un
dreptunghi verde (cu numele verde), ambele cu acelea[i dimensiuni (Figura
5.48). Efectul de rollover va ;nsemna practic schimbarea sprite-ului rosu cu
sprite-ul verde ;n momentul c=nd cursorul mouse-ului se afl\ deasupra
dreptunghiului ro[u.

Figura 5.48 Cele doi membrii distribu]ie rosu si verde


:n primul r=nd se va pozi]iona ;n canalul 1, cadrul 1, dreptunghiul
ro[u [i se va extinde sprite-ul astfel format p=n\ ;n cadrul 30. Este apoi

222

nevoie de a men]ine capul de citire ;n cadrul 30 pentru a da posibilitatea


utilizatorului s\ mi[te mouse-ul [i s\ aduc\ cursorul peste sprite-ul respectiv.
Se folose[te astfel din Library Palette comportamentul Hold on Current
Frame din categoria Navigation [i se trage peste cadrul 30 din canalul
special Script. Dac\ se ruleaz\ acum filmul, se poate observa capul de citire
care r\m=ne pe cadrul 30, f\r\ ;ns\ ca filmul s\ se termine.
Tot din Library Palette se va folosi acum comportamentul asociat cu
efectul RollOver. Din categoria Animation, subcategoria Interactive se
alege comportamentul Rollover Member Change [i se trage peste sprite-ul
rosu (fie ;n Stage, fie ;n Score). Pe ecran va ap\rea caseta de dialog cu
parametrii respectivului comportament (Figura 5.49). :n cazul de fa]\
utilizatorul este ;ntrebat cu ce s\ fie substituit sprite-ul ;n cazul unui rollover
(dac\ cursorul mouse-ului se afl\ deasupra acestuia). Se alege din caseta
derulant\ disponibil\ sprite-ul verde [i se apas\ butonul OK.

Figura 5.49 Caseta de dialog cu parametrii comportamentului Rollover


Member Change
Singurul lucru care mai r\m=ne de f\cut este testarea filmule]ului.
Dac\ se ruleaz\, se poate observa c\ atunci c=nd cursorul mouse-ului se afl\
deasupra dreptunghiului ro[u, acesta ;[i schimb\ culoarea ;n verde, iar c=nd
cursorul p\r\se[te dreptunghiul, culoarea acestuia redevine ro[ie.
5.30 Realizarea unei aplica]ii executabile de sine-st\t\toare
Director pune la dispozi]ia utilizatorilor un mecanism de realizare a
unei aplica]ii executabile de sine-st\t\toare (aplica]ie numit\ Projector).
Pentru aceasta se selecteaz\ op]iunea Create Projector din meniul File.
Director ;ntreab\ dac\ s\ salveze eventualele schimb\ri ale filmului curent,
deoarece acesta trebuie ;nchis pentru a crea un projector. Pe ecran va fi
afi[at\ caseta de dialog Create Projector (Figura 5.50). Utilizatorul poate
alege acum filmul Director (fi[ierul cu extensia dir) care se vrea a fi convertit
;ntr-o aplica]ie de sine-st\t\toare.

223

Figura 5.50 Caseta de dialog Create Projector

Figura 5.51 Caseta de dialog Save Projector As

224

Odat\ ales un fi[ier dir, se poate ap\sa pe butonul Create pentru


crearea fi[ierului Projector. Pe ecran va fi afi[at\ o nou\ caset\ de dialog
Save projector as ;n care utilizatorul trebuie s\ selecteze sub ce nume va fi
creat\ aplica]ia executabil\ [i loca]ia pe disc unde va fi salvat\ aceasta
(Figura 5.51).
Prin ap\sarea butonului Save, Director trece la crearea aplica]iei
executabile, pe ecran fiind afi[at\ o fereastr\ de dialog cu starea curent\ a
acestui proces (Figura 5.52).
Aplica]ia creat\ este o aplica]ie executabil\ (un fi[ier cu extensia exe),
care poate fi executat\ pe orice PC care ruleaz\ sub un sistem de operare
Windows. Aplica]ia poate fi scris\ pe un CD [i astfel s\ fie folosit\ pe un alt
calculator.

Figura 5.52 Crearea aplica]iei


5.31 Etapele de realizare a unei aplica]ii ;n Director 8
Pentru realizarea unei aplica]ii multimedia ;n Director 8 trebuie
parcurse urm\toarele etape>
- Stabilirea temei [i a audien]ei pentru respectiva aplica]ie
Aceasta este prima etap\ a realiz\rii unei aplica]ii multimedia [i
presupune ;n primul r=nd stabilirea temei pentru aceasta. :n func]ie de
tema aleas\ (prezentarea unui proces, serviciu, a unei companii etc.) se
specific\ [i audien]a ]int\ a acesteia. Acest lucru este foarte important ;n
principal pentru modul de prezentare a informa]iilor c\tre publicul ]int\.
:ntr-un fel se prezint\ informa]iile c\tre ni[te copii, sau c\tre un public
care nu are cuno[tin]e despre domeniul respectiv, fa]\ de modul de
prezentare a informa]iilor c\tre un public avizat.
- Storyboard
Fiind vorba de o aplica]ie multimedia, trebuie realizat un a[a numit
storyboard. Acesta este ;n esen]\ o copie desenat\ pas cu pas pe h=rtie a
aplica]iei multimedia (ecran cu ecran). Astfel se poate decide at=t asupra

225

unui design [i format de prezentare a informa]iilor c\tre publicul ]int\, c=t


[i asupra tipului de informa]ii multimedia necesare ;n acest scop. Pentru
fiecare ecran sunt necesare anumite tipuri de informa]ii multimedia pentru
a transmite c\tre publicul ]int\ mesajul corespunz\tor. :n unele cazuri,
doar textul este suficient, pe c=nd ;n altele sunt necesare imagini,
informa]ii audio sau video etc.
- Adunarea informa]iilor multimedia
Aceast\ etap\ presupune str=ngerea tuturor informa]iilor necesare pentru
realizarea aplica]iei multimedia. Cu alte cuvinte, aceast\ etap\ presupune
str=ngerea tuturor membrilor de distribu]ie necesari. O surs\ important\
de informa]ii multimedia este Internetul. Trebuie avut ;ns\ grij\ la
drepturile de autor. Pentru folosirea informa]iilor multimedia prezentate
de un site Internet, trebuie cerut acordul ;n scris a administratorilor
acestuia. :n cazul realiz\rii unor aplica]ii non-comerciale (de exemplu
proiecte studente[ti), majoritatea site-urilor Web permit folosirea
propriilor materiale ap\rate de drepturile de autor.
- Stabilirea liniei temporale (timeline)
Anterior a fost prezentat modul de realizare a unei aplica]ii multimedia ;n
Director. Cea mai important\ parte a acestei aplica]ii este scenariul, adic\
momentul de apari]ie a fiec\rui actor [i durata c=t acesta este pe scen\.
Cu alte cuvinte, pentru fiecare actor trebuie stabilit cadrul ;n care va
ap\rea pe scen\ [i cadrul ;n care va disp\rea de pe scen\. Aceasta este de
fapt linia temporal\ (timeline) pentru aplica]ia multimedia. Este
recomandat ca, ;nainte de trecerea la implementarea propriu-zis\ a
aplica]iei, s\ se decida linia temporal\ pentru aceasta. Astfel se poate
decide asupra timpului necesar pentru ca ;ntreaga aplica]ie s\ ruleze.
- Implementarea aplica]iei cu Director 8
Aceasta este etapa de realizare a aplica]iei multimedia propriu-zis\.
- Testarea
Odat\ aplica]ia implementat\, aceasta trebuie testat\. Etapa curent\
presupune verificarea at=t a informa]iilor prezentate ;n aplica]ie, c=t [i
buna func]ionare a acesteia. De exemplu, dac\ aplica]ia con]ine un meniu,
atunci trebuie verificat\ corectitudinea func]ion\rii leg\turilor (s\riturilor)
din acesta.
- Evaluarea interfe]ei
Aplica]ia multimedia este prezentat\ publicului prin intermediul unei
interfe]e grafice. Aceast\ interfa]\ trebuie evaluat\ ;n scopul stabilirii

226

performan]ei acesteia. Practic, publicul ]int\ are acces la informa]iile


con]inute ;n aplica]ia multimedia doar prin intermediul acestei interfe]e.
Dac\ interfa]a este facil\ [i u[or de ;n]eles de c\tre publicul ]int\, atunci
aplica]ia multimedia poate avea succes din start. Dac\ ;ns\ interfa]a nu
este proiectat\ a[a cum ar trebui, publicul ]int\ poate avea dificult\]i ;n
folosirea acesteia [i implicit accesul la informa]iile oferite de aceasta
poate avea de suferit.
Exist\ ;n principal patru modalit\]i de evaluare a unei interfe]e>
- ;n mod formal cu ajutorul unor tehnici de analiz\<
- ;n mod automat prin anumite proceduri computerizate<
- ;n mod empiric prin experimente cu subiec]i umani<
- ;n mod heuristic prin observarea interfe]ei [i comentarea
acesteia ;n func]ie de anumite concepte.
Se va prezenta ;n continuare metoda de evaluare heuristic\ a unei
interfe]e. Aceast\ metod\ a fost propus\ de Nielsen [i Molich ;n 1990 [i
este o metod\ inginereasc\ de g\sire a problemelor de folosire a unei
interfe]e ;n scopul corect\rii acestora ca parte a unui proces iterativ de
proiectare. Evaluarea heuristic\ presupune ca un grup mic de evaluatori
s\ examineze interfa]a [i s\ judece compatibilitatea acesteia cu anumite
principii recunoscute de folosire a acesteia. Aceste principii se numesc
principii heuristice.
:n principiu, evaluatori individuali pot realiza o evaluare heuristic\ a unei
interfe]e, ;ns\ experien]a a indicat c\ oricare evaluator individual nu va
g\si o mare parte din problemele de folosire a interfe]ei respective.
Nielsen a aratat c\ folosind evaluatori individuali, numai aproximativ
35% din erorile de proiectare ale unei interfe]e au fost g\site de ace[tia.
Partea bun\ a lucrurilor este aceea c\ majoritatea evaluatorilor g\sesc
erori sau probleme diferite ale interfe]ei [i de aceea se poate ob]ine o
performan]\ ridicat\ a acestei metode de evaluare prin agregarea
rezultatelor evalu\rii mai multor evaluatori. Practic, fiecare evaluator
inspecteaz\ interfa]a ;n mod individual. Dup\ ce toate evalu\rile au fost
terminate, evaluatorilor li se permite s\ comunice unul cu cel\lalt ;n
vederea agreg\rii rezultatelor. :n acest fel se ob]ine o evaluare
independent\ [i neinfluen]at\ a interfe]ei respective.
Pentru realizarea unei evalu\ri corecte, grupul de evaluatori trebuie s\ se
ghideze dup\ anumite principii de folosire a interfe]ei. Nielsen a propus
;n 1990 un set de 9 principii heuristice care pot fi folosite pentru a genera
idei ;n timpul evalu\rii critice a unei interfe]e. Acestea sunt>
1) Design simplu [i natural (Simple and natural design)
Dialogurile nu trebuie s\ con]in\ informa]ii irelevante sau care
sunt folosite prea rar. Orice informa]ie irelevant\ dintr-un

227

dialog este ;n competi]ie cu informa]iile relevante. Toate


informa]iile trebuie s\ apar\ ;ntr-o manier\ natural\ [i logic\.
2) Folosirea limbajului natural al utilizatorului (Speak
the users language)
Dialogurile cu utilizatorii trebuie s\ fie exprimate ;n cuvinte,
fraze [i concepte familiare acestora.
3) Minimizarea ;nc\rc\rii memoriei utilizatorului
(Minimize the users memory load)
Dup\ cum se [tie, capacitatea memoriei umane pe termen
scurt este limitat\. De aceea, utilizatorul nu ar trebui s\ fie
nevoit s\ ;[i aminteasc\ informa]ii dintr-un dialog ;n altul.
Instruc]iunile pentru folosirea sistemului trebuie s\ fie vizibile
[i u[or de g\sit sau reg\sit dac\ este cazul. Instruc]iunile
complicate trebuie s\ fie simplificate.
4) Consecven]\ ;n design (Be consistent)
Utilizatorii unei interfe]e nu trebuie s\ se ;ntrebe dac\ anumite
cuvinte, situa]ii sau ac]iuni ;nseamn\ acela[i lucru. O anumit\
ac]iune a sistemului trebuie s\ fie ;ntotdeauna atins\ printr-o
anumit\ ac]iune a utilizatorului.
5) Fiecare ac]iune a utilizatorului are o reac]iune din
partea interfe]ei (Provide feedback)
:n permanen]\, sistemul trebuie s\ ]in\ utilizatorul la curent cu
ceea ce se ;nt=mpl\. Astfel, prin punerea la dispozi]ie cu
reac]iuni ;n timp util la ac]iunile utilizatorului, sistemul
men]ine un contact permanent cu acesta.
6) Interfa]a trebuie s\ posede ie[iri vizibil marcate
(Provide clearly marked exits)
Un sistem cu un design bun nu trebuie s\ permit\ utilizatorului
s\ se g\seasc\ ;ntr-o stare f\r\ ca acesta s\ aib\ posibilit\]i de
ie[ire vizibil marcate. :n general, utilizatorii folosesc adesea
anumite func]ii ale sistemului sau interfe]ei din gre[eal\ [i de
aceea ace[tia vor avea nevoie de anumite porti]e de ie[ire din
starea nedorit\.

228

7) Interfa]a trebuie s\ pun\ la dispozi]ia utilizatorului


scurt\turi (Provide shortcuts)
Propriet\]ile unei interfe]e care o fac u[or de ;nv\]at, ca de
exemplu dialogurile interactive, sunt adesea obositoare pentru
utilizatorii experimenta]i. Pentru ace[tia, sistemul trebuie s\
pun\ la dispozi]ie anumite scurt\turi care s\ ;i u[ureze acestuia
munca.
8) Interfa]a trebuie s\ pun\ la dispozi]ia utilizatorului
mesaje de eroare corespunz\toare (Provide good error
messages)
Mesajele bune de eroare sunt defensive, precise [i
constructive. Mesajele de eroare defensive dau vina pe
deficien]ele sistemului [i nu critic\ niciodat\ utilizatorul.
Mesajele de eroare precise specific\ utilizatorului informa]ii
exacte despre cauza sau cauzele acestora. Mesajele de eroare
constructive specific\ utilizatorului sugestii pentru corec]ia
acestora.
9) Preven]ia erorilor (Error prevention)
Un design mai bun dec=t cel care specific\ mesaje de eroare
bune este un design care previne ca erorile s\ apar\.
:n 1994, Nielsen a ;mbun\t\]it aceste principii heuristice [i a anun]at
un set de 10 principii>
1) Vizibilitatea st\rii sistemului (Visibility of system
status)
Sistemul trebuie ca ;n permanen]\ s\ ]in\ utilizatorii la curent
cu ceea ce se ;nt=mpl\ (;ntr-un interval de timp rezonabil).
2) Compara]ie ;ntre sistem [i lumea real\ (Match between
system and the real world)
Sistemul trebuie s\ vorbeasc\ limba utilizatorului prin
intermediul cuvintelor, frazelor [i a conceptelor familiare
acestuia [i nu ;n termeni specifici sistemului.
3) Controlul [i libertatea utilizatorului (User control and
freedom)
:n general, utilizatorii folosesc adesea anumite func]ii ale
sistemului sau interfe]ei din gre[eal\ [i de aceea vor avea
nevoie de anumite porti]e de ie[ire din starea nedorit\.

229

Sistemul trebuie s\ pun\ la dispozi]ia utilizatorilor


posibilitatea de undo sau de redo.
4) Consecven]\ [i standarde (Consistency and standards)
Utilizatorii unei interfe]e nu trebuie s\ se ;ntrebe dac\ anumite
cuvinte, situa]ii sau ac]iuni ;nseamn\ acela[i lucru. O anumit\
ac]iune a sistemului trebuie s\ fie ;ntotdeauna atins\ printr-o
anumit\ ac]iune a utilizatorului. Trebuie folosite ;n acest scop
ac]iuni care au fost deja intrate ;n uz (ac]iuni standard).
5) Preven]ia erorilor (Error prevention)
Un design bun trebuie s\ pre;nt=mpine eventualele erori care
pot ap\rea.
6) Recunoa[tere ;n loc de amintire (Recognition rather
than recall)
Obiectele, ac]iunile [i op]iunile trebuie s\ fie vizibile.
Memoria utilizatorului nu trebuie ;nc\rcat\ cu informa]ii care
nu sunt necesare.
7) Flexibilitate [i eficien]\ ;n folosire (Flexibility and
efficiency of use)
Sistemul trebuie s\ pun\ la dispozi]ia utilizatorilor
experimenta]i mecanisme de accelerare a anumitor dialoguri
sau ac]iuni.
8) Design estetic [i minimal (Aesthetic and minimalist
design)
Dialogurile nu trebuie s\ con]in\ informa]ii care nu sunt
relevante sau sunt folosite foarte rar.
9) Ajutarea utilizatorilor s\ recunoasc\, diagnosticheze [i
s\ revin\ din erori (Help users recognize, diagnose, and
recover from errors)
Mesajele de eroare trebuie s\ fie prezentate ;n limbaj natural [i
nu ;n coduri. Acestea trebuie s\ indice ;n mod precis problema
ap\rut\ [i s\ sugereze o posibil\ solu]ie la aceasta.
10) Ajutor [i documenta]ie (Help and documentation)
Cu toate c\ este de preferat ca un sistem s\ poat\ fi folosit f\r\
documenta]ie, ar putea fi necesar\ punerea la dispozi]ia
utilizatorului a unui help [i documenta]ii. Orice astfel de
informa]ie trebuie s\ fie u[or de c\utat [i trebuie s\ comunice

230

utilizatorului pa[ii concre]i pe care trebuie s\ ;i urmeze pentru


atingerea scopului. De asemenea, documenta]iile nu trebuie s\
fie laborioase.
Practic, folosind aceste principii heuristice, un set de evaluatori
examineaz\ interfa]a respectiv\ [i o judec\ ;n raport cu aceste principii
heuristice. De exemplu, se presupune c\ se evalueaz\ o interfa]\ a unui
magazin online de pe Internet. Utilizatorul poate naviga prin catalogul de
produse [i alege pe acelea pe care le dore[te. De regul\, acestea sunt puse
;ntr-un co[ de cump\r\turi (shopping basket). Odat\ ajunse acolo,
utilizatorul poate merge la cas\ (checkout) pentru a ;ncheia tranzac]ia
electronic\, sau poate renun]a la ele. De multe ori, un astfel de co[ de
cump\r\turi con]ine obiectele dorite de utilizator, dar sunt folosite ni[te
coduri interne [i pre]ul acestora. Dac\ cump\r\torul vrea s\ renun]e la
anumite obiecte, atunci ar trebui s\ ;[i aduc\ aminte care coduri corespund
acestor obiecte. Acest lucru contravine principiilor heuristice Minimizarea
;nc\rc\rii memoriei utilizatorului [i Folosirea limbajului natural al
utilizatorului. O alt\ problem\ ar fi aceea ca ;n momentul efectu\rii
tranzac]iei electronice, datorit\ codific\rilor [i verific\rilor ce au loc,
;nc\rcarea urm\toarei pagini Web este greoaie [i majoritatea cump\r\torilor
sunt tenta]i s\ apese butonul Refresh al browserului pentru c\ sunt convin[i
c\ ac]iunea lor nu a avut efect. Acest lucru duce de cele mai multe ori la
realizarea aceleia[i tranzac]ii de dou\ ori, deci apari]ia unei erori. Aceasta ar
putea fi prevenit\ prin anun]area cump\r\torului c\ cererea este procesat\, c\
trebuie s\ a[tepte p=n\ c=nd tranzac]ia este ;ncheiat\ [i s\ nu apese pe butonul
Refresh al browserului. Principiile heuristice ;nc\lcate acum sunt Preven]ia
erorilor [i Fiecare ac]iune a utilizatorului are o reac]iune din partea
interfe]ei.
Acest proces poate continua p=n\ la g\sirea tuturor ;nc\lc\rilor
principiilor heuristice (de regul\ se folosesc cel pu]in 3 evaluatori
independen]i ale c\ror rezultate sunt agregate ;ntr-unul singur). Se poate trece
apoi la corectarea problemelor g\site, o nou\ evaluare heuristic\ [i procesul
continu\ p=n\ c=nd nu mai sunt g\site erori.

231

S-ar putea să vă placă și