!"#$%&'(' !!! !"#$%& $&(")*+($, !! #$!%#&!' !

"#$%& (")*&+
!"#$"%

ln acesL caplLol vel inva:
?
! !" "$%" &"$'()*+ ')%",-./'*)''
! 0"%1&" .,"-,"- ')%",-./'*)'' 2")%,* 3"&'*+ 1)+')"
! !" "$%" 1 -)'3-/'"
! 4,').'2-+"+" .-,-.%",'$%'.' -+" 5+-$6

Cuv|nte che|e:

ueslgnul lnLerac(lunll, ueslgn lnLeracLlv, anlma(le, llash

!"#$%&'
CaplLolul 10. ueslgn lnLeracLlv sl anlma(le penLru medlul onllne ................................................... 1
1.1 ueslgnul lnLerac(lunll ....................................................................................................... 2
1.2 llash ................................................................................................................................. 4
1.3 AvanLa[e sl dezavanLa[e in llash ...................................................................................... 3
1.3.1 AvanLa[ele foloslrll llash ............................................................................................. 3
1.3.2 uezavanLa[e foloslrll llash ........................................................................................... 6
1.4 lnLeracLlvlLaLea in llash .................................................................................................... 6
1.3 P1ML3 .............................................................................................................................. 7
1.6 Anlma(la ........................................................................................................................... 7
1.7 ue ce esLe lndlcaL foloslrea anlma(lllor penLru apllca(llle onllne? ................................. 8
1.8 rlnclpllle anlma(lel ......................................................................................................... 8
1.9 1esLarea cuno;Llnelor dobndlLe ...................................... Lrror! 8ookmark not def|ned.
1.10 Closar ................................................................................. Lrror! 8ookmark not def|ned.
1.11 8lbllografle ......................................................................... Lrror! 8ookmark not def|ned.


ueslgnul lnLerac(lunll 2

1.1 Des|gnu| |nterac|un||
ueslgnul lnLerac(lunll (lnLeracLlon ueslgn lxu) esLe dlsclpllna care se ocup cu deflnlrea
comporLamenulul produselor sl slsLemelor vls-a-vls de ac(lunea uLlllzaLorulul. Cu alLe cuvlnLe lxu
deflnesLe rspunsul unul arLefacL la c(lunlle uLlllzaLorulul. ln cazul nosLru lxu se va referl la deflnlrea
lnLerac(lunll dlnLre apllca(llle onllne (e.g. paglnl web) sl uLlllzaLor.
rodusele dlglLale lnLeracLlve prlmesc sl raspund cererllor uLlllzaLorllor, sl isl schlmb con(lnuLul
sl comporLamenLul in func(le de cererlle uLlllzaLorllor. Ce esLe un produs lnLeracLlv bun?
enLru a rspune la ceasL inLrebare Lrebule mal inLLl s vedem: Ce esLe un produs bun?
Firmitas, utilitas, venustas
Vitruvius, De Architectura

enLru a spune c un produs esLe bun el Lrebule s indepllneasc urmLoarele:
7*,-8'+'%-%"9 :) 2,1&*$ %,"8*'" $; <'" $1+'&= $; )* -'8" &"<".%">
:%'+'%-%"9 :) 2,1&*$ %,"8*'" $; $",?"-$.; $.12*+*' 2")%,* .-," - <1$% .,"-%= $; <'" *%'+>
@$%"%'.;9 @A2",'%")/- *%'+'B;,'' *)*' 2,1&*$ %,"8*'" $; <'" 2+;.*%; C' -%,;(;%1-,">
rln urmare un produs lnLeracLlv bun:
5-." .""- ." %" -C%"2/' -%*).' .D)& %" -C%"2/'>
EC' F)&"2+')"C%" <*)./'1)-+'%-%"- F) 31&*+ -C%"2%-%>
G$.*+%; .",",'+" *%'+'B-%1,*+*'>
7"%",3'); 21$'8'+'%-%"- F)&"2+')','' .",",'+1,>
H)&"2+')"C%" .",","->
I,'3'%" *) ,;$2*)$ *%'+'B-%1,*+*'>
!,"-B; 1 "A2",'")/; 2+;.*%; &" *%'+'B-,">
enLru ca un produs s fle lnLeracLlv, in cazul nosLru apllca(la onllne, Lrebule s fle foloslL de
uLlllzaLorl. C apllca(le care furnlzeaz sLlrl prln lnLermedlul 8SS nu esLe lnLeracLlv in Llmp ce o aplla(le
onllne care permlLe rezervarea blleLelor de Lren esLe lnLeracLlv.
urmLoarele sunL cLeva elemenLe care poL oferl lnLeracLlvlLaLe unel apllca(ll onllne:
Infod|agrame |nteract|ve. uLlllzarea unul deslgn de Llpul lnfodlagramelor esLe un nou Lrend in
prlvln(a deslgnulul apllca(lllor onllne, cu precdere a slLe-urllor de prezenLare. AcesL Llmp de deslgn esLe
lmprumuLaL dln deslgnul de prlnL. Cel mal des inLlnlLe asLfel de lnfordlagrame lnLeracLlve sunL cele de
Llpul hr(llor lnLeracLlve.

lnfodlagram lnLeracLlv
3 CaplLolul 10. ueslgn lnLeracLlv sl anlma(le penLru medlul onllne

Cutare. un modul care s ofere
faclllLaLe de a cuLa lnforma(la dorlL dln
con(lnuLul slLeulul poaLe fl de mare a[uLor,
mal ales aLuncl cand paglnlle pe care se
a[unge nu colncld cu cele dln rezulLaLele ln
moLoarele de cauLare. AcesL modul Lrebule
s fle blne reallzaL, alLfel exlsL rlscul ca
uLlllzLorul s praseasc rapld slLeul dac
rezulLaLele nu sunL cele dorlLe sau nu
genereaz rezulLaLe.




Comentar||, rev|ew, chat. rln posLarea unul comenLarlu la un con(lnuL, se poaLe incura[a
dlscuLarea unor aspecLe relevanLe sl asLfel esLe oferlL un moLlv supllmenLar penLru ca vlzlLaLorul s se
inLoarc sl s adauge un alL comenLarlu, ca sl raspuns la un alL user. C mare aLen(le va Lrebul sa acordaL
alcl spamulul. un chaL in Llmp real imbunL(esLe mulL comunlcarea de momenL inLre userl, dar
conLrolul llmba[ulul foloslL esLe mal greu de fcuL. LsLe uLll crearea unel arhlve a posLarllor pe chaL,
penLru consulLarea acesLela de caLre vlzlLaLorl.

8evlew produs sl raLlng.
kat|ngur|. ermlLnd vlzlLaLorllor s aprecleze sau s dezabrobe un arLlcol, o lmaglne, un vldeo
sau orlce alL con(lnuL prln slsLemul claslc de sLele sau prln lnLermedlul unul menlu drop-down, poaLe
aduce pe lng aspecLul lnLeracLlv sl o ldee despre ce anume sunL sau nu lnLeresaLl vlzlLaLorll slLeulul.
llash 4

Chest|onare. Cferlnd chesLlonare legaLe de conLlnuLul slLeulul sau de dlverse sublecLe de lnLeres
general se poaL aLrage vlzlLaLorl lnLeresa(l de revlew-url sau clasamenLe de produse. vlzlLaLorll se vor
inLoarce s revad rezulLaLele lar poslblllLaLea de a-sl lnvlLa sl prleLenll s voLeze in cazul unul sublecL
conLroversaL.
Iocur|. lasarea de [ocurl in paglnlle slLeulul poaLe aLrage vlzlLaLorl, penLru c, acesLea poL fl
accesase sl de la blrou sl nu neceslL lnsLalarea lor.

Ioc on||ne asoc|at une|
s|te a| unu| productor de bere

D|verse too|-ur|. lnLegrarea in slLe de
componenLe/lnsLrumenLe, referlLoare la conLlnuLul slLeulul sau de
lnLeres general, a[uL userul s gseasc lnforma(ll pe care ar dorl
s le acceseze zllnlc, precum: dlverse calculaLoare (conversle
valuLar, slsLeme meLrlce, calorll, alcoolemle eLc), meLeo, curs
valuLar, generaLoare lcon, generaLoare cod de bare, eLc.

Apllca(le uLlllLar onllne

1.2 I|ash
Adobe llash, sau mal pe scurL llash, esLe o apllca(le uLlllzaL penLru dezvolLarea oblecLelor-
appleL de Llp llash dlsponlblle in cadrul unor paglnl web. rln lnLermedlul oblecLelor flash, se poaLe
cresLe dlnamlsmul unel paglnl precum sl faclllLa lnLerac(lunea cu uLlllzaLorul. lnl(lal dezvolLaL de
Macromedla, apllca(la llash a fosL preluaL de cLre Adobe odaL cu achlzl(lonarea companlel sus
amlnLlLe. rln urmare llash e o Lehnologle ce permlLe adugarea de anlma(le, suneL, lnLeracLlvlLaLe sl
efecLe vlzuale slLe-urllor web.
llash esLe foloslL penLru c permlLe lmplemenLarea unor prezenLrl mulLlmedla care poL fl aLL
modulare cL sl lnLeracLlve, deoarece o apllca(le llash poaLe fl creaL pornlnd de la module
lndependenLe (anlma(ll, buLoane, eLc) care la rndul lor poL fl creaLe dln elemenLe mal mlcl. AceasL
modularlLaLe face ca modlflcarea unel anlma(ll llash s fle usoar, dar duce sl ca elemenLele unel
anlma(ll llash s poaL fl reuLlllzaLe, ceea ce le face foarLe aLracLlve penLru cel care creaz con(lnuL
mulLlmedla lnLeracLlv. llash pune la dlspozl(le proprlul llmba[ de programare, prln care se anlma(llle sl
poL fl conLrolaLe aLL programaLlc cL sl prln lnLermedlul ac(lunll uLlllzaLorulul. AcLlonScrlpL pune la
dlspozl(le un mecanlsm de LraLarea evenlmenLelor (cllck, LasLare, eLc.).
ln prezenL aceasLa Lehnologle esLe lnLegraLa ln ma[orlLaLea browserelor de pe plaLa lar opLlunlle
dlsponlblle sunL lnLr-aLaL de marl lncaL e foloslLa sl penLru apllcaLll mulLlmedla offllne sau alLe programe
deskLop de naLura mulLlmedla.
rln lnLermedlul llmba[ulul proprlu de programare puLem lmplemenLa LraLarea evenlmenLelor
provocaLe de uLlllzaLor, asLfel llash permlLe reallzarea unor anlma(ll lnLeracLlve care permlL slmularea
unor procese reale.
llash, prln AcLlon ScrlpL, devlne un lnsLrumenL dln ce ln ce mal uLlllzaL penLru dezvolLarea de
sofLware penLru Lelefoane moblle sl alLe asLfel de dlspozlLlve. rlnclpalele moLlve care au dus la aceasLa
slLuaLle exLraordlnara sunL accesul la lnformaLle sLrucLuraLa sl baze de daLe prln lnLermedlul xML sl a
3 CaplLolul 10. ueslgn lnLeracLlv sl anlma(le penLru medlul onllne

servlclllor web, suporLul foarLe bun penLru lnformaLle vldeo, lnLroducerea componenLelor sl un model
de programare care a evoluaL conLlnuu. AcLlonScrlpL, llmba[ul de programare dln spaLele llash, esLe
acum compleL oblecLual apropllndu-se sl mal mulL ca model sl slnLaxa de llmba[ele de nlvel lnalL precum
!ava sl C#.
llash esLe preferaL ln apllcaLll mulLlmedla lnLenslve Locmal penLru ca permlLe o llberLaLe sl
flexlblllLaLe pe care Lehnologll lnLeracLlve precum A[ax nu le poL oferl deocamdaLa. uLem consLrul
anlmaLll de naLura geograflca (harLl, prezenLarl LurlsLlce), porLofolll, galerll de lmaglnl, kloskurl de
lnformare sl alLe mlnl apllcaLll de promovare sl personallzare a produselor.
Flash-ul poate fi folosit att par!ial n puncte cheie ale unui site
HTML, sau poate fi chiar site-ul n sine.

Adobe llash layer esLe un medlu de rulare in browser mulLlplaLforma penLru apllcaLll care
ofera vlzuallzarea apllcaLlllor maLerlalelor sl cllpurllor vldeo pe dlverse ecrane sl browsere. llash layer
esLe prolecLaL penLru a proflLa de poslblllLaLlle naLlve ale dlspozlLlvulul, permlLand experlenLe mal
complexe sl mal lmerslve ale uLlllzaLorllor.
!"#"! $%&'(&)* ,- .*/&%&'(&)* 0' 12&34
loloslrea oblecLelor llash in paglnlle web prezlnL aLL avanLa[e cL sl dezavanLa[e.
$%&'(&)*2* 56263-7-- 12&34
ulmenslunea unul fl;ler SWl versus dlmenslunea unul Cll (glf anlmaL) esLe mal mlc.
LlemenLe graflce vecLorlale: dlmenslunl mlcl sl scalabll: enLru a memora" lmaglnlle un
calculaLor poaLe recurge la dou meLode: prlma esLe re(lnerea plxel cu plxel a lmaglnll, cea de-a doua
esLe memorarea unor puncLe crlLlce" cu a[uLorul crora lmaglnea poaLe fl refcuL.
Astfel pentru a afi"a un cerc, acesta poate fi memorat ntr-o imagine
de tip raster (cum ar fi formatul BitMap sau Jpeg) dac# avem un cerc
cu o raz# destul de mare vor fi memora!i nu numai pixelii de pe
circumferin!a cercului ci "i cei din interiorul acestuia sau care sunt
n jurul s#u. Spre deosebire, n cadrul formatelor vectoriale (SVG -
Scalable Vector Graphics, SWF - ShockWave Flash) sunt re!inute doar
centrul "i raza cercului, calculatorul g#sind imediat metoda de afi"are
a tuturor punctelor ce vor alc#tui cercul.

LsLe evldenL fapLul c dlmenslunea unul flsler in formaL rasLerlzaL ([pg, bmp, glf) esLe mal mare
decL cea a unul flsler in formaL vecLorlal (dln cauza numrulul de lnforma(ll ce vor fl re(lnuLe). ALuncl
cnd mrlm o lmaglne de Llp vecLorlal nu facem decL s redesenm o parLe a sa, calculaLorul puLnd
reda cercul cu aceeasl clarlLaLe - se cunoasLe forma geomeLrlc reprezenLaL sl mrlrea lmaglnll nu
reprezlnL decL Lrasarea (la scar) a fosLel lmaglnl vecLorlale. ALuncl cnd mrlm o lmaglne de Llp rasLer
calculaLorul nu cunoasLe" despre ce esLe vorba sl opera(la va consLa doar in suprademenslonarea
plxelllor (un plxel al cerculul va fl aflsaL in mal mulLe puncLe de pe ecran).
lndependen(a de plaLform (browser/slsLem de operare): lmaglnlle vecLorlale, desl mal uLlle,
neceslL o apllca(le care s genereze lmaglnea (penLru formaLul SvC de exemplu exlsL Adobe SvC
layer lar penLru SWl avem layerul de llash). lndependen(a de plaLform apare dln cauz c acesL
program ce ,sLle" s aflseze lmaglnlle a fosL consLrulL penLru o gam larg de hardware sl slsLeme de
operare: AsLfel dac vom vlzuallza oblecLul llash in Wlndows se va folosl auLomaL layerul de llash
verslunea Wlndows, dac uLlllzm un Lelefon mobll (SmarLhone), se va folosl playerul dlsponlbll penLru
Lelefoane (llash layer LlLe 1.0), sau dac vom folosl MacCS exlsL un player separaL (evldenL LoaLe
playerele vor aflsa aceeasl lmaglne flnal).
Anlma(ll de lung duraL usor de reallzaL: anlma(llle sunL puncLul forLe al llash-ulul, lnLerfa(a
apllca(lel d poslblllLaLea de a slncronlza (in func(le de Llmp) dlversele oblecLe, pozl(ll sau forme ale
acesLora. llash-ul nu numal c reallzeaz aceasL slncronlzare, dar poaLe sl lnLerpola pozl(la (sau forma)
unul oblecL penLru a usura munca uLlllzaLorulul.
llash 6

Se poL aduga lnLerfe(el elemenLe mulLlmedla: in lnLerlorul oblecLelor llash se poL lmporLa sl
manlpula (inalnLe, lnapol, salL la un anumlL momenL) M3-url sau Avl-url.
nu neceslL cunosLln(e de P1ML, xP1ML: in cazul in care v hoLr(l s reallza(l un inLreg slLe in
llash, apllca(la v poaLe furnlza odaL cu oblecLul flash sl codul P1ML necesar - in acesL fel LoL ce mal
Lrebule fcuL esLe doar publlcarea slLulul pe un server WL8.
LdlLoare puLernlce sl lucrul faclle: Macromedla llash esLe un edlLor puLernlc care d
poslblllLaLea de aLasrl de comporLamenLe dlverselor oblecLe fle foloslnd lnLerfa(a de desenare graflc
fle prln aLasarea de scrlpLurl oblecLelor.
usurln(a imblnrll elemenLelor graflce cu scrlpLul: aLasarea codurllor AcLlonScrlpL oblecLelor dln
flash se reallzeaz prln selecLarea oblecLulul sl lnLroducerea codulul asoclaL oblecLulul inLr-o fereasLr
speclal.
1ransferabll ca flux de daLe: penLru ca un fllm llash s ruleze pe maslna cllenLulul nu esLe
necesar s fle incrcaL in inLreglme - playerul va aflsa doar cL va puLea dln fllm asLepLnd (evenLual)
incrcarea in conLlnuare. uln acesL moLlv se poL reallza scrlpLurl speclale care aLasaLe oblecLelor llash
poL furnlza lnforma(ll prlvlLoare la procenLul de flsler care a fosL incrcaL.
Dezavanta[e fo|os|r|| I|ash
rlnLre dezavanLa[ele foloslrll oblecLelor flash in paglnlle web puLem amlnLl:
ueplnde de player: desl acesLa vlne lnsLalaL pe o sulL de browsere (sl in cazul in care nu esLe
prelnsLalaL lnsLalarea esLe desLul de rapld - dlmenslunea layerulul llash esLe desLul de mlc sl
descrcarea acesLula in conLexLul re(elelor acLuale esLe rapld), LoLusl exlsL cazurl in care oblecLele
llash a[ung pe maslnl ce nu au lnsLalaL apllca(la necesar lnLerpreLrll oblecLelor llash, a[ungndu-se in
lmposlblllLaLea foloslrll flslerelor.
Pentru a rula aplica!iile Flash exist# "i posibilitatea export#rii
obiectului Flash sub forma unui executabil.

Mare amaLor de resurse: deoarece Lrebule s ,reconsLrulasc" de flecare daL elemenLele
graflce, layerul llash (precum sl apllca(la de dezvolLare) esLe mare consumaLor de memorle sl procesor
(in cazul graflcll rasLer esLe clar unde Lrebulau aflsa(l plxelll ce formeaz cercul - in cadrul graflcll
vecLorlale Lrebule ca pozl(llle plxelllor s fle recalculaLe).
MoLoarele de cuLare nu poL lndexa LexLul.
Flashul lucreaz# cu mai multe tipuri de texte, majoritatea dintre
acestea (textul static) nu poate fi indexat de motoarele de c#utare
deoarece obiectul Flash este tratat ca element grafic/obiect "i robo!ii
de c#utare nu au cuno"tin!ele necesare disec#rii obiectelor Flash "i
extragerii textului intern.

1ehnologle llcen(laL: fllnd o apllca(le dezvolLaL de o serle de programaLorl (plLl(l penLru a
dezvolLa llashul), lnsLrumenLul de dezvolLare cosL cel pu(ln 600t[neceslL clLare]. 1oLusl speclflca(llle
formaLulul oblecLulul llash sunL dlsponlblle sl dln acesL moLlv au apruL (sl inc apar) desLule
lnsLrumenLe care s uLlllzeze acesL formaL in scopurl mal mulL sau mal pu(ln producLlve sau legale.
ulnLre acesLea amlnLlm: SwlfL3u, Swlsh, lmperaLorlLA, AcLlonScrlpL CbfuscaLor.
!"#"# 8'(*7&9(-%-(&(*& 0' 12&34
LlemenLele graflce poL fl desenaLe sl remodelaLe dlrecL dln flash prln lnLermedlul unor
lnsLrumenLe slmpllsLe, poL fl lmporLaLe dln alLe programe sub dlverse formaLe sau poL fl creaLe dln
AcLlonScrlpL: puLem reallza un oblecL de Llp MovleCllp sl apol desena" in lnLerlorul su prln lnLermedlul
unor comenzl (e.g. move1o, llne1o, curve1o, flll, gradlenLllll).
7 CaplLolul 10. ueslgn lnLeracLlv sl anlma(le penLru medlul onllne

ScrlpLul poaLe fl aLasaL in orlcare cadru al anlma(lel conferlndu-ne slguran(a ca acea secven( se
va execuLa slncronlzaL cu ce se afl desenaL pe ecran (programare Lemporal). ScrlpLul mal poaLe fl
aLasaL unul buLon. ScrlpLul poaLe fl aLasaL unul movleCllp (un fllm in fllmul llash).
CblecLul llash poaLe comunlca cu servere aslncron (moLlv penLru care se folosesc evenlmenLele
in cadrul flashulul) dnd poslblllLaLea dezvolLaLorllor de llash de a recurge la dlversele lnforma(ll ce poL
fl sLocaLe pe server in baze de daLe sau flslere speclal consLrulLe.
CblecLul poaLe comunlca cu serverul lnl(lallznd conexlunl sl comunlcnd in Llmp real. ln acesL
mod poL fl consLrulLe dlverse chaLurl sau apllca(ll care s comunlce in Llmp real chlar dac sunL aflaLe pe
calculaLoare dlferlLe (vezl [ocurlle de Llp sah dln ?ahoo Messenger care sunL reallzaLe in llash).
CblecLele llash poL comunlca inLre ele prln lnLermedlul unor conexlunl locale lnl(lallzaLe cu
comanda ,LocalConnecLlon": dou oblecLe llash aflaLe pe acelasl calculaLor au poslblllLaLea de a
lnLerac(lona chlar dac unul ruleaz inLr-o fereasLr a unul browser lar cel de-al dollea inLr-un browser
dlferlL de prlmul (sau chlar rulaL dlrecL prln lnLermedlul playerulul llash).
CblecLele llash poL comunlca cu scrlpLurlle de Llp !avaScrlpL prln lnLermedlul comenzll
fscommand (!S poaLe comunlca cu llash apelnd func(ll dlrecL dln llash sl referlnd oblecLul llash prln
lnLermedlul aLrlbuLulul ,name" dln codul P1ML exporLaL de llash).
CblecLul llash fllnd consLrulL speclal penLru lnLerneL nu poaLe rula apllca(ll, schlmba lnforma(llle
dln slsLem sau scrle flslere. enLru a puLea LoLusl s crem flslere (de dlmenslunl marl) pe maslna
cllenLulul, puLem folosl llashul ca lnLerfa( penLru apllca(llle scrlse in alLe llmba[e de programare (a fosL
foloslL cu succes penLru reallzarea lnLerfe(el laySLaLlon ll).
1.3 n1MLS
P1ML3 esLe un llmba[ foloslL penLru sLrucLurarea sl prezenLarea con(lnuLulul paglnllor World
Wlde Web. AcesLa reprezlnL a a clncea revlzulre a sLandardulul P1ML creaL in 1990. CblecLlvele acesLel
revlzulrl au fosL acelea de a imbunL(l llmba[ul cu un suporL penLru cele mal recenLe aparl(ll mulLlmedla
in acelasl Llmp men(lnndul usor de clLlL de oamenl sl blne inLeles de compuLere sl devlce-url. P1ML3
esLe acum unlversal accepLaL pe dlspozlLlve moblle, in unele cazurl acesLea suporL doar P1ML3 nu sl
llash.
P1ML3 aduce nol elemenLe slnLacLlce. AcesLea cuprlnd Lagurl precum <vldeo>, <audlo>,
<header> sl <canvas>, precum sl lnLegrarea con(lnuLulul SvC care a inloculesLe uLlllzarea Lag-ulul generlc
<ob[ecL>. AcesLe nouL(l sunL prolecLaLe penLru a faclllLa lncluderea sl manlpularea in web a
con(lnuLurllor mulLlmedla sl graflce fr a fl nevole s se recurg la proprleL(lle de plugln sl Al.
hLLp://www.nevermlndLhebulleLs.com
1.4 An|ma|a
Anlma(la consLlLule o lluzle opLlc a mlscrll, creaL prln derularea unor lmaglnl reprezenLnd
elemenLe sLaLlce ale acesLela. ln produc(la clnemaLograflc, acesL Lermen se refer la Lehnlcl prln care
flecare secven( a unul fllm esLe reallzaL lndlvldual, decl o anallz a mlscarll.
Anlma(la reprezlnL derularea rapld a unel secven(e de lmaglnl penLru a crea lluzla mlscrll.
LfecLul esLe o lluzle opLlc daLoraL fenomenulul de perslsLen( a vlzlunll, fenomen care face ca o
lmaglne inreglsLraL de ochl s perslsLe aproxlmaLlv a douzecl sl clncea parLe dlnLr-o secund pe reLln.
AsLfel ochlul uman esLe lncapabll de a seslza schlmbarea lmaglnllor cl recepLeaz anlma(la ca pe un
ansamblu unlLar.
AcesLe secven(e:
21% <' '3-(')' &"$")-%" C' -21' <1%1(,-<'-%"=
21% <' <1%1(,-<'' .1)$".*%'?" <;.*%" *)*' 18'".% F) 3'C.-," .* -J*%1,*+ *)*' -2-,-% &"
<1%1(,-<'-% $-* 21% <' .-&," 18/')*%" .* -J*%1,*+ *)*' -2-,-% &" <'+3-%=
21% <' (")",-%" .* -J*%1,*+ .132*%",*+*'>
Anlma(la 8

Cnd secven(ele sunL derulaLe una cLe una cu o anumlL vlLez (in clnemaLografle cu o
frecven( de 24 lmaglnl/secund), rezulL o lluzle de mlscare conLlnu, prln exploaLarea memorlel
asoclaLlve sl perslsLen(el reLlnlanel ochlulul uman.

Lxemplu cadre dlnLr-o anlma(le cu 23fps
uezvolLarea anlma(lel compuLerlzaLe, usureaz procesul de creeare a unul <'+3 &" -)'3-/'". ue
cele mal mulLe orl caracLerele sunL generaLe separaL sub forma unul model care apol, inLocmal unel
marloneLe poaLe fl mlscaL in dlferlLe pozl(ll.
lormaLele mulLlmedla ca Cll, MnC, SvC sl llash (SWl) permlL ca anlma(la s poaL fl vlzuallzaL
pe compuLer avnd ca surs aLL flslere slLuaLe pe calculaLorul proprlu cL sl pe servere (e.g. paglnl web
care con(ln anlma(ll llash).
!":"! ;* 9* *3(* -'.-9&(< 56263-7*& &'-=&>--267 ?*'(7@ &?2-9&>--2* 6'2-'*A
lle c vorblm de apllca(ll desLlnaLe medlulul onllne sau de apllca(ll sLand alone, foloslrea
anlma(lllor creaz un senLlmenL de lume real, ele aducnd la vla( apllca(la. Anlma(llle a[uL de
asemenea sl la deflnlrea unul conLexL penLru apllca(le sau la crearea conslLen(el lnLerfe(el cu uLlllzaLorul.
ue cele mal mulLe orl anlma(llle sunL foloslLe penLru a da lndlcll asupra a ceea ce urmeaz s se
inLmple sau penLru a exempllflca modul de uLlllzare al unel apllca(ll. Anlma(llle poL imbunL(l procesul
de inv(are al uLlllzrll unel apllca(ll, in cazul nosLru uLlllzarea anlma(lllor poaLe imbunL(ll usurln(a cu
care uLlllzaLorul folosesLe o apllca(le onllne.
Poate cel mai simplu exemplu de anima!ie g#sit n mediul online este
dedicat# celei mai simple aplica!ii pentru mediul online, "i anume
site-ului HTML. Pentru a u"ura identificarea link-urilor de cele mai
multe ori acestea sunt marcate nu doar prin subliniere dar "i prin
schimbarea culorii n momentul n care cursorul se afl# asupra lor. O
tehnic# asem#n#toare este utilizat# "i n cazul butoanelor care au mai
multe st#ri: o imagine pentru cnd sunt active, "i o imagine pentru
cnd cursorul se af# deasupra lor.

loloslrea anlma(lllor creaz senza(la unel lnLerfe(e cu uLlllzaLorul mal dlnamlc, mal responslv, mal
rapld.
Cu toate acestea trebuie evitat# folosirea anima!iilor ntr-o aplica!ie
doar de dragul anima!iei.

!":"# B7-'9-?--2* &'-=&>-*-
Ma[orlLaLea prlnclplllor anlma(lel au fosL descoperlLe in prlmele decenll ale secolulul xx. Lle sunL
apllcaLe inc sl in zlua de asLzl in aproape LoaLe Lehnlclle de anlma(le. uLem Lrece in revlsL un numr
de 12 prlnclpll care sLau la baza crerll anlma(lllor:
- 1urLlre sl inLlndere (Squash and sLreLch) esLe foloslL penLru a da o senza(le de greuLaLe sl
flexlblllLaLe unul oblecL.
Poate fi aplicat pentru obiecte simple cum ar fi o minge care sare. n
anima!ia realist#, cel mai important aspect al acestui principiu este
ca volumul obiectului s# nu se schimbe cnd este ntins sau turtit.
9 CaplLolul 10. ueslgn lnLeracLlv sl anlma(le penLru medlul onllne

Dac# lungimea unei mingii este ntins# vertical, l#!imea acesteia
trebuie s# se modifice corespunz#tor pe orizontal#.

- AnLlclpare (AnLlclpaLlon). AnLlclparea esLe foloslL penLru a pregLl publlcul penLru ac(lunea ce
urmeaz a se desfsura sl de a o face s par mal reallsL. un dansaLor care sare de pe podea Lrebule s
isl indoale genunchll mal inLl. AceasL Lehnlc poaLe fl foloslL sl penLru a pregLl publlcul sl penLru alLe
ac(lunl care nu sunL efecLuaLe de persona[ul in cauz
Un caracter care se uit# nspre marginea cadrului creaz# senza!ia c# un
alt personaj urmez# a a fi introdus n cadru, sau c# urmez# o schimbare
a cadrului.

- Aran[area scenel (SLaglng) esLe un prlnclplu imprumuLaL dln LeaLru sl clnemaLografle. SLaglng
esLe foloslL penLru a dlrec(lona aLen(la publlculul sl penLru a sugera care esLe cenLrul de lnLeres inLr-o
scen sau penLru a sugera ceea ce urmeaz s se inLmple. Lsen(a acesLul prlnclplu esLe de a concenLra
aLen(la pe ce esLe relevanL sl de a evlLa deLalllle care nu sunL absoluL necesare.
Acest lucru poate fi f#cut prin ajustarea mai multor factori precum
locul unui personaj n scen#, perspectiva, folosirea umbrei etc.

- loLogram cu foLogram sau de la keyframe la keyframe (SLralghL ahead acLlon and pose Lo
pose). AcesLea sunL cele doua abordrl dlferlLe ale anlmrll. rlma inseamn desenarea, sau in anlma(la
dlglLal salvarea unel pozl(ll, foLogram cu foLogram de la lncepuL pn la sfrslL. Cea de-a doua
presupune desenarea cLorva foLograme prlnclpale (keyframe) sl umplerea spa(lllor dlnLre ele cu
foLograme dup aceea. rlma meLod creeaz o mlscare mal fluld dar are dezavanLa[ul c anlmaLorul
plerde deseorl forma orlglnal a oblecLulul deoarece esLe foarLe greu s psLrezl propor(llle exacLe. Cea
de-a doua meLod func(loneaz mal blne penLru scene emo(lonale sl dramaLlce unde compozl(la sl
rela(la cu medlul sunL mal lmporLanLe. C comblna(le ale acesLor dou Lehnlcl esLe de cele mal mulLe orl
foloslL. Anlma(la compuLerlzaL depsesLe problemele de psLrare a propor(lllor cu meLoda foLogram
cu foLogram cu foLogram. 1oLusl cea de-a doua meLod esLe inc foloslL in anlma(la dlglLal daLorlL
avanLa[elor pe care le aduce compozl(lel. sl deoarece compuLerele faclllLeaz procesul prln umplerea
auLomaL a spa(lllor dlnLre foLogramele prlnclpale.
- urmrlrea mlscrll sl acLlune suprapus (lollow Lhrough and overlapplng acLlon). AcesLe dou
procedee sunL legaLe inLre ele sl a[uL redarea unel mlscrl mal reallsLe care d lmpresla ca persona[ele
urmresc leglle flzlcll.
Urm#rirea mi"c#rii nseamn# c# p#r!i ale corpului separate vor continua
s# se mi"te dup# de personajul s-a oprit. Ac!iunea suprapus# este
tendin!a diferitelor p#r!i ale corpului s# se mi"te la viteze diferite.
Aceste p#r!i pot fi obiecte nensufle!ite ca mbr#c#mintea sau antena
unei ma"ini sau p#r!i ale corpului cum ar fi minile sau p#rul. P#r!ile
corpului cu mult !esut cum ar fii bur!i sau sni mari se vor mi"ca
ntotdeauna mai mult. Dect p#r!ile ce con!in oase. Din nou exagerarea
acestei tehnici produce efecte comice n timp ce o anima!ie realist#
trebuie s# calculeze timpii ac!iunii exact pentru a produce un rezultat
conving#tor.

- Slow ln sl slow ouL. Mlscarea corpulul uman sl ma[orlLaLea oblecLelor au nevole de Llmp penLru
a accelera sl penLru a inceLlnl. ue aceea anlma(la araL mal reallsL dac are mal mulLe desene aproape
de incepuLul sl sfrslLul ac(lunll punnd accenL pe foLogramele de la exLerlor sl mal pu(ln pe cele dln
ml[loc. AcesL prlnclplu func(loneaz penLru persona[e care se mlsc inLre doua pozl(ll exLreme cum ar fl
sLaL pe scaun sl sLaL in plcloare.
- Arce (Arcs). Ma[orlLaLea ac(lunllor naLurale urmresc o LralecLorle arculL sl anlma(la ar Lrebul
s adere la acesL prlnclplu. AcesL lucru se poaLe apllca la un braL care se mlsc roLlndu-se de la
incheleLur sau un oblecL aruncaL care se mlsc pe o LralecLorle parabollc. Lxcep(le fac mlscrlle
8lbllografle 10

mecanlce care se desfsoar in general in llnle dreapL. Cu cL vlLeza unul oblecL esLe mal mare cu aLL
arcele sunL mal pu(ln roLun[lLe.
- Ac(lunea secundar (Secondary acLlon). Adugarea ac(lunllor secundare la ac(lunea prlnclpal
d scenel mal mulL vla(a sl suporL ac(lunea prlnclpal. C persoan care merge poaLe in acelasl Llmp s
isl balanseze mlnlle, s vorbeasc, s flulere sau s isl exprlme emo(llle prln expresll faclale. lmporLanL
esLe ca ac(lunlle secundare s subllnleze ac(lunea prlnclpal sl s nu s aLrag aLen(la.
- 1lmpll ac(lunll (1lmlng). 1lmpll ac(lunll se refer la numrul de frame-url foloslLe penLru o
anumlL ac(lune ceea ce se Lraduce in vlLeza ac(lunll. 1lmpul poaLe face ca oblecLele s par c respecL
leglle flzlcll sl poaLe sugera greuLaLea flecrul oblecL.
- Lxagerarea (LxaggeraLlon). Lxagerarea produce un efecL speclal penLru anlma(le deoarece
lmlLarea exacL a reallL(ll poaLe araL sLaLlc sl pllcLlslLor. nlvelul exagerrll deplnde de flecare anlmaLor
in parLe. ueflnl(la claslc a exagerrll descrls de ulsney rmne adevraL sl pn asLzl doar c se
poaLe prezenLa sl in forme exLreme.
- uesenul volumeLrlc (Solld drawlng). AcesL prlnclplu se refer la desenarea formelor in spa(lul
Lrldlmenslonal dndu-le volum sl greuLaLe. Anlma(llle moderne se folosesc de faclllL(lle pe care
compuLerul le ofer de a calcula auLomaL spa(lul.
- ALrac(le (Appeal). ALrac(la unul persona[ anlmaL corespunde cu carlsma unul acLor. un
personal aLracLlv nu esLe neaparaL slmpaLlc (persona[ele anLagonlsLe poL fl aLracLlve) dar Lrebule s dea
senza(la prlvlLorulul c esLe real sl lnLeresanL.

1.S 8|b||ograf|e
Mar[orle val, krlsLen Sosulskl, 1he LssenLlal Culde Lo Cnllne Course ueslgn: A SLandards-8ased Approach,
8ouLledge, 1 edlLlon (4 leb 2011)
Cary Clsen, CeLLlng SLarLed ln MulLl Medla ueslgn, norLh LlghL 8ooks (nov 1997)
Adobe CreaLlve 1eam, Adobe CreaLlve SulLe 3 ueslgn remlum Classroom ln a 8ook (Classroom ln a 8ook
(Adobe)), Adobe, 1 edlLlon (23 !un 2010)