INTERAKTIVNE INTERAKTIVNOST INTERAKTIVNE VSEBINE NA INTERNETU - IV. DEL INTERAKTIVNE VSEBINE NA INTERNETU - IV. DEL INTERAKTIVNE (Izdelava animacijskih učinkov in povezovanje v celoto, testiranje pred objavo in tipične napake uporabe ter moteči elementi) V tretjem članku smo obravnavali prve tri korake procesa izdelave interakti vnih vsebin, to je določitev dimenzij interakti vne predstavitve, razdelitev delovne površine po vsebini in vnašanje vsebine. V zadnjem članku o interakti vnih vsebinah bomo nadaljevali temo še z izdelavo animacijskih učinkov in povezovanjem v celoto ter testi ranjem pred objavo. Na koncu bomo obravnavali in prikazali še ti pične napake uporabe, ki lahko zelo otežijo ali celo onemogočijo uporabo našega interakti vnega izdelka in pogosto odvrnejo uporabnika od nadaljnje uporabe. avtor Andrej ISKRA Univerza v Ljubljani Izdelava animacijskih učinkov (animacij) in povezovanje v celoto O tehniki animacij je bilo veliko napi- sano v seriji člankov o Flashu, ki so izha- jali v Grafi čarju v prejšnjih leti h, tako da ponovimo glavno razdelitev animacijskih tehnik, ki je: klasična animacija (sličica za sličico); ↗ animacija z interpolacijo (začetno ↗ stanje, vmesna stanja, končno sta- nje, vmes pa interpolirana stanja, ki jih doda Flash sam). Animacija z interpolacijo se naprej po tehniki deli na: animacija gibanja (moti on); ↗ animacija oblike (shape). ↗ Ti dve animaciji sta v načinu uporabe diametralno nasprotni in nam tako olaj- šata delo. Poleg tega lahko uporabimo še tehni- ko animacijskih izrezkov, kjer naredimo animacijo znotraj simbola. Tako lahko »vgnezdimo« animacijo na veliko ravni in dobimo zelo kompleksne rezultate. V praksi je interakti ven izdelek skoraj ve- dno izdelan s kombinacijo vseh teh anima- cijskih tehnik in ne le z uporabo ene same. Pri izdelavi animacij je pomembno, da imamo dober pregled nad projektom, saj se zaradi količine objektov, animacij, na- stavitev hitro lahko »izgubimo« znotraj la- stnega projekta. V ta namen je pomemb- na uporaba plasti (ločeni časovni trakovi), knjižnice (večkratna uporaba isti h simbo- lov) in scen (razdelitev obsežnega projek- ta na več med seboj povezanih sklopov). Uporabo plasti in s tem ločene časovne trakove izvedemo v oknu s časovnim tra- kom. Pri tem je pomembno, da sorodne plasti lahko postavimo v skupno mapo in s tem naredimo delovni projekt bolj pre- gleden. Z uporabo časovnega traku načr- tujemo in izdelujemo animacije z vsemi njihovimi lastnostmi (vrste animacij, hi- trost animacij itn.). Na sliki 2 se jasno vidi, da se plasti , kjer so animirane črke napisa FLASH, v mapi Črke. Za preglednost interakti vnega iz- delka je zelo pomembna tudi knjižnica. Pri realnih izdelkih (osebna predstavitev, spletna igra itn.) je lahko simbolov v knji- žnici več sto. Zato je v tem primeru nujno upoštevati naslednja priporočila: Animacija Klasična animacija Animacija z interpolacijo Animacija gibanja (moti on) Animacija oblike (shape) Slika 1: Delitev animacij. Slika 3: Pregledna uporaba knjižnice. Slika 2: Uporaba plasti v oknu s časovnim trakom. 10 - GRAFIČAR PREMAZNI PAPIR ZA VSAKODNEVNO UPORABO. ODLIČNO OPRAVI SVOJE DELO IN VAM PRI TEM SPLOH NI POTREBNO RAZMIŠLJATI… Alpe papir d.o.o. • Letališka cesta 16 • 1 122 Ljubljana • Tel. +386 1 546 64 50 • Faks +386 1 546 64 98 • info@alpepapir.si • www.alpepapir.si PE Maribor • Špelina ulica 1 • 2000 Maribor • Tel. +386 2 426 1 1 16 • Faks +386 2 426 1 1 17 • info@alpepapir.si • www.alpepapir.si 0094_CoreAdvertSLN_290x210.indd 1 10/1/09 15:07 12 - GRAFIČAR Termalne CTP ● Violet CTP ● UV-P CTP ● UV-N CTP ● PS Tiskarske plošče Plošče blagovne znamke HUAGUANG, po kakovosti sodijo v sam svetovni vrh. Proizvajalec plošč za potrebe ploskega in rotacijskega tiska (termalnih, violetnih in konvencionalnih plošč) blagovne znamke HUAGUANG, je vodilni proizvajalec tiskarskih plošč na Kitajskem. V proizvodnih procesih uporablja najsodobnejšo tehnologijo. Letna produkcija presega 50.000.000 m2 plošč. Osemdeset distributerjev po svetu oskrbuje tiskarsko industrijo s ploščami blagovne znamke HUAGUANG v 57 državah, sedaj se jim pridružujeta tudi Slovenija in Avstrija. GPS Handels GmbH Kranzlhofenstraße 26 9220 Velden, Austria Tel.: +43 4274 4043 22 Mob.: +386 51 34 49 43 Fax.: +43 4274 4043 25 Mail: oce@printsolution.biz Termalni CTP PlateRite Niagara razvijalka Glunz & Jensen Harlequin RIP Termalni CTP ● zmanjšanje proizvodnih stroškov ● večja optimizacija dela ● konkurenčnost ● višja kvaliteta PlateRite Niagara Tudi vi si lahko privoščite CTP B1 format 74.900 € * Termalni CTP PlateRite Niagara razvijalka Glunz & Jensen ** 84.900 € * 74.900 € * 84.900 € * MCA PRO d.o.o. Tržaška cesta 85, 2000 Maribor tel.: 041 661-818 Email: info@mca.si http://www.mca.si * Cene veljajo do 31.03.2009 ali do razprodaje zaloge. ** Workow z impozicijo TrueowSE Rite, inštalacija in osnovno šolanje boben format plošče hitrost zunanji način osvetljevanja termalni 84 diod 11 plošč na uro pri 2400dpi ne glede na format plošče min: 450 x 370 mm max: 1,060 x 820 mm GRAFIČAR - 13 INTERAKTIVNOST drobnosti se ne bi spuščal, namen kode je samo pokazati enostavnost povezovanja posameznih sklopov v sklenjeno celoto. Testi ranje pred objavo T o je zelo pomemben korak, ki vpliva na kakovost našega interakti vnega izdelka, saj se lahko v njem pojavijo kakšne zelo mote- če napake, ki uporabnika hitro in trajno od- vrnejo od nadaljnje uporabe. Mi kot izdelo- valci mogoče te napake niti nismo opazili. Pri testi ranju lahko uporabimo kar te- stne uporabnike, s katerimi smo si po- magali že v prvem koraku izdelovanja in- terakti vnih vsebin, to je pri ugotavljanju potreb in zahtev uporabnikov. Večja ko je baza uporabnikov testi ranja, bolj na- tančne ugotovitve lahko dobimo in seve- da bolj odpravimo morebitne napake. Ti testni uporabniki si med uporabo našega interakti vnega izdelka zapisujejo svoja opazovanja, občutke, stvari, ki jih moti jo, stvari, ki so jim všeč, itn. Zadnji korak pred objavo našega interak- ti vnega izdelka je odprava opaženih napak in motečih elementov. Z zelo malo doda- tnega truda lahko odpravimo zelo velike ozi- roma kriti čne napake. Tako dejansko z zelo malo truda precej izboljšamo svoj izdelek. Seveda pa je tudi potem, ko interakti v- ni izdelek že objavimo, zelo pomembna tudi povratna informacija uporabnikov. To pomeni, da prek kontakta zbiramo po- vratne informacije uporabnikov o našem izdelku in ga tudi s pomočjo teh informa- cij izboljšujemo in nadgrajujemo. Obseg nadgradnje in osveževanja je odvisen od vsebine našega interakti vnega izdel- ka (spletne strani, osebne predstavitve, izobraževalni projekti , interakti vne igre ipd.). Vsekakor pa mora vedno biti pri- soten. Pravimo, da imamo opravka z »ži- vim« interakti vnim izdelkom. Tipične napake uporabe in moteči elementi Že iz naslova se vidi, da imamo dve po- dročji, ki lahko uporabnika odvrnejo od nadaljnje uporabe. Med napake uporabe lahko štejemo: napačne povezave; ↗ »mrtve« povezave; ↗ »slepa ulica« v izdelku. ↗ Moteči elementi pa so: napačne dimenzije izdelka (pre- ↗ majhne ali prevelike); daljše animacije brez možnosti ↗ preskoka (preskoči ali »skip«); prehitro ali prepočasno izvajanje ↗ animacij; večkratno ponavljanje istega izvaja- ↗ nja (npr. med vračanjem na glavni meni); slaba opaznost elementov (pisave, ↗ gumbov itn.); neinformati vnost vsebine; ↗ premajhne dimenzije slik in njiho- ↗ va neinformati vnost (ne razpozna- mo vsebine slike); neinformati vnost gumbov (ne ↗ vemo, kam nas gumb popelje); napačna uporaba zvoka (zvočna ↗ podlaga, zvok v gumbih); nenaravno gibanje (neupoštevanje ↗ fi zikalnih zakonov) itn. Napake uporabe so bolj kriti čne in huj- še oblike kot moteči elementi . Pri zače- tnikih pri izdelovanju interakti vnih vsebin se te napake jasno pokažejo. Videl sem jih predvsem pri svojih študenti h, ki pa so to tudi sami hitro opazili in so bili njihovi nadaljnji izdelki na precej višji kakovostni ravni kot začetni. Posameznih primerov napak uporabe in motečih elementov ne bom prikazoval, si pa lahko vsak upo- rabnik med uporabo interakti vnih vsebin kakšno stvar, ki ga moti , verjetno »razpo- redi« v eno med navedenih področij. Povzetek V zadnjem članku o interakti vnih vsebi- nah na internetu smo si pogledali še drugi del procesa izdelave interakti vnih vsebin, to je izdelava animacijskih učinkov in po- vezava v zaključeno celoto. Pred objavo je zelo pomembno izvesti še samo testi ranje pa tudi po objavi zbirati informacije upo- rabnikov in ustrezno popravljati ter nad- grajevati svoje vsebine. V nasprotnem pri- meru bodo morebitne napake uporabe, moteči elementi in »zastarelost« vsebin kmalu povzročili vedno manjši obisk. Literatura: Yvonne Rogers, Helen Sharp, Jenny Preece: 1. Interacti on Design: beyond human-compu- ter interacti on, John Wiley & Sons, ltd, 2007 Phillip Kerman: Naučite se Macromedia Flash 2. 8 v 24 urah, Založba Pasedena, d. o. o., 2006 smiselno poimenovanje simbolov ↗ (npr. »animirana palica«); vzdrževanje preglednosti knjižnice ↗ z uporabo map in podmap, v kate- rih so sorodni simboli in simboli v isti h sklopih vsebine; redno brisanje neuporabljenih ↗ simbolov (npr. naredimo več razli- čic gumba in se pozneje odločimo, katerega bomo izbrali). Ker so realni interakti vni izdelki običaj- no precej obsežni, jih je pri izdelavi smi- selno razdeliti na več sklopov. To v Flashu naredimo s pomočjo scen. Tako posame- zna scena vsebuje manjši del končne vse- bine in je zato precej preglednejša, kot bi bila ena scena z vso vsebino. Posamezne sklope povezujemo in pre- hajamo med različnimi deli vsebine s pomočjo Acti onscripta, to je skriptnega jezika, ki ga podpira Flash. S precej pre- prosti mi ukazi, ki jih hitro osvojijo tudi začetni uporabniki, lahko enostavno po- vežemo različne vsebine v delujoč izde- lek interakti vne vsebine. Primer uporabe Acti onscripta pri pove- zovanju pozameznih delov vsebine prika- zuje naslednja kratka programska koda: on (release) { gotoAndPlay(“Vzlet rakete”, 1); } Primer te programske kode je v gum- bu, ki nas popelje iz scene »Pok zemlje« nazaj v sceno »Vzlet rakete«, in sicer v prvo celico. Sintakse skriptnega jezika Ac- ti onscript niti ni treba znati , saj ukaze v kodo dodajamo kar z načinom »primi in spusti « (Drag & Drop) in potem samo na- stavljamo lastnosti (scena, celica). V po- Slika 4: Paleta s scenami