Et projekt af Morten Vestergaard Stein mvst@itu.dk. Interactive Multimedia F2010 ved Kevin McLean. IT-Universitetet København.

Transkript

1 Et projekt af Morten Vestergaard Stein mvst@itu.dk Interactive Multimedia F2010 ved Kevin McLean IT-Universitetet København Side 1

2 Indholdsfortegnelse Introduktion... 3 Hvad er gocreate?... 3 Hvorfor et tegneprogram?... 4 Ideen bag designet... 4 De forskellige elementer... Object tool... Size control: Size matters... Pen/drawing tool... Block tool... Leaf brush... Forskellige lærreder... Kan man gemme sit værk?... Overvejelser omkring touch-funktionalitet... Store knapper... Objekterne... Layout... Koden i gocreate... Orientering i koden... Known Bugs... Udgangspunktet for kodens dele... Opsamling og Afrunding... To skitser fra processen Side 2

3 Introduktion Som ny til arbejde med Flash, ville jeg gerne stifte bekendtskab med programmet indefra. Både for at få en ide om hvad det kan bruges til, men også for at se hvor meget det kræver at lave noget brugbart med Flash. Dette projekt har taget udgangspunkt i min interesse for touch-teknologi. Der kommer flere og flere digitale gadgets der benytter sig af touch-screens, specielt inden for mobiltelefoner. Alle der har prøvet at manøvrere i en velfungerende brugerflade, kun ved hjælp af fingrene, har prøvet hvor intuitivt og sjovt det kan være, at tilgå digitale medier på den måde. Ideen til projektet her udspringer netop af sådanne oplevelser. Flash er klart et værktøj der kan bruges til at udforske universet inden for touchinteraktion. Hvad er gocreate? gocreate er en applikation, hvor man kan kreere sit eget lille landskab/kunstværk. Det er en form for tegneprogram, hvor der kan tegnes med forskellige farver, indsættes forskellige landskabselementer (bakker, bjerge, træer, søer o.lign) på et lærred. Baggrunden, dvs. lærredet for éns kreation kan skiftes under processen. gocreate er tænk som en webapplikation, der fx kan indgå som en del af et større site med spil eller anden underholdning. (Prøv gocreate ved at åbne gocreate.html i en browser). Screenshot af gocreate Side 3

4 Hvorfor et tegneprogram? En af de ting der fascinerer mig ved Flash, er muligheden for at lave et dynamisk og interaktiv visuelt univers. Der er i høj grad mulighed for at kombinere og sammensætte flere forskellige visuelle udtryksformer, der derved giver noget nyt. En digital kollage der inddrager brugeren og giver mulighed for interaktion. Startskudet til ideen bag gocreate kommer fra et simpelt, men overbevisende applikation til en touch-telefon. Dette lille program består af en grøn tavle, hvor man kan tegne med kridt, og hviske ud med en svamp. Forholdsvist simpelt, men meget overbevisende, da det faktisk ligner kridt på en tavle. Der er to ting i det. Det ene er at man kan kan skabe et univers ud fra elementer vi genkender andre steder fra (som kridttegningen). Det andet er at man kan gøre disse elementer tilgængelige i en digital sammenhæng. Med gocreate har det været hensigten at drage nytte af begge dele. Tegne- og boksværktøj Idéen bag designet Konceptet bag gocreate, skal blandt andet findes i det at kunne lave kollager af allerede genkendelige dele. Det har fra start af været ambitionen, at det visuelle univers delvist skulle opererer inden for blyantstegning. Ideen er at kunne lege med det analoge udtryk i en digital verden. Ved at kombinere det digitale med det analoge, kan der skabes andre og nye udtryksformer. De forskellige elementer Sam sagt består gocreate af flere enkelte elementer eller værktøjer (tools), der giver hvert deres bidrag til oplevelsen. Object tool At kunne placere allerede færdiglavede elementer på lærredet har to vigtige funktioner. Et er, at det er lige til at gå i gang med at kreere. Man skal bare klikke på et grantræ, og så kan man ellers lave en lille skov på kort tid. Det andet er at det er håndtegnede bakker, bjerge, søer, træer osv., der placeres på lærredet. Altså ting der ellers ville kræve et langt mere avanceret program, samt evner til at tegne, for at lave. Med få midler kan der laves Et stort træ lavet med forskellige objekt-tools simple, men alligevel interessante landskaber. Der er nogle rammer, men inden for de rammer kan man så være kreativ. Her kan både børn og barnlige sjæle være med til at dekorere, og den lette tilgang er en del af oplevelsen. Side 4

5 large, som hhv. 50%, 100% og 150% af objektets originalstørrelse i menuen. Størrelsen kan ikke variere så meget, som ved metoden med at holde musen nede, men den er lettere at kontrollere og tilgå for brugeren. Knapper til at bestemme størrelser på objekter Landskab lavet med gocreate Size control: Size matters At der kan skiftes størrelse på objekterne, er en vigtigt del. Det er med til gøre applikationen mere interessant, da der derved kan arbejdes med dybde. Hvordan man skulle kunne skifte størrelse har været en længere overvejelse. Der er mange måder det kan gøres på i Flash. Til at starte med, tænke jeg på at have flere størrelser af hvert objekt i menuen, men det ville hurtigt fylde for meget. Ellers kunne man lave en funktion der op-skalerede objektet ved at holde musen nede (mouse down). Det ville dog blive kompliceret at lave, og samtidig irriterende, hvis man placerede et objekt for tidligt eller for sent, og derved ikke fik den ønskede størrelse. Jeg endte derfor ud med tre knapper der repræsenterer small, medium og Pen/drawing tool Tegneværktøjet har været en primær del helt fra starten. Det er måske ikke synderligt originalt, men muligheden skal ligesom bare være der. I og for sig kunne konceptet fremstå mere rent i sit udtryk, hvis det kun bestod af at placere færdige tegninger. På den anden side vil man savne det, når man lige vil signere sin tegning, tegne røde æbler på sit træ eller noget helt andet. Derudover er netop tegneværktøjet anvendeligt sammen med touch-teknologi, da det føles intuitivt at tegne med fingrene eller en pen direkte på skærmen. Som det er nu, passer tegneværktøjet dog ikke specielt godt sammen med den æstetik, som ligger i de håndtegnede objekter. Her er der mulighed for udvikling. Optimalt ville det være at lave sin egen brush som imiterer en blyantsstreg. Jeg havde faktisk intentionen om at lave en brush der skulle tegne som et kridt på en tavle, men det nåede desværre ikke at blive klar til denne version. Block tool Block tool Hvorfor dog muligheden for at kunne placere bokse i forskellige farver og størrelser? Værktøjet er der delvist for at udfylde et hul. Side 5

6 Nemlig at det er svært at tegne, men meget lettere at placere ting med en almindelig mus. Det er simpelthen for svært at tegne fx en bygning, som ser nogenlunde ud, bare med en mus (klart bedre på et touch pad dog). Her ville det optimale også være at lave præfabrikerede bokse tegnet med blyant, så det ikke skurer mod resten af det æstetiske udtryk. Som det er nu, kan boksene dog bruges til at hviske ud på hvid, grå eller sort lærred, ved at vælge de samme farver til boksene. Leaf brush Som navnet antyder, så er leaf brush i udgangspunktet tænkt som et værktøj til at lave løv til træer. Det viste sig dog hurtigt at den også blev en vældig sjov pensel at tegne/male med. De forskelligfarvede kugler der vælter ud når man tegner, giver en oplevelse af, at man nærmest kaster kulørt maling på et lærred. At man overhovedet kan tegne med sådan et sprælsk værktøj, er fordi kuglerne er timet, så de stort set lander der hvor man fører musen. Den underholde effekt dette havde på folk der prøvede det, gjorde det oplagt at lave flere farver af den. Leaf brush er altså gået fra at være tænkt som løv til træer, til også at blive en form for klatmaling, der har sine helt egne udtryksmuligheder. (Desværre er netop leaf brush det værktøj der kræver mest af computeren). Leaf brush Forskellige lærreder Muligheden for at skifte mellem forskellige baggrunde eller lærreder, er med fordi det ofte er så kedeligt, når man i simple tegneprogrammer kun har en hvid baggrund. Ydermere er der den græsgrønne baggrund tegnet med blyant. Den giver et fint lærred til at opbygge et landskab med de forskellige objekter der er til rådighed. Lærrederne kan skiftes mens man er i gang med sin kreation, så man kan se hvordan det vil se ud med en anden baggrund. En mulig udvikling kunne være flere baggrunde der evt. bliver hentet fra en xml-fil. Kan man gemme sit værk? I den nuværende version kan man desværre ikke gemme sit arbejde direkte gennem applikationen. Man må derfor nøjes med et screenshot. Jeg ville gerne have lavet en gemmefunktion, men blev frarådet det i Skift af baggrund Fra infoboks denne omgang. Det ville hurtigt blive et omfattende arbejde, der ikke havde noget direkte med Flash at gøre. Side 6

7 Overvejelser omkring touch-funktionalitet Som sagt, har en del af inspirationen til projektet været, at lave noget til brug på touch screen. Allerede fra starten af projektet, har det dog været klart, at denne version skulle kunne tilgås fra en almindelig computer med Flash Player og mus. Derudover har jeg ikke haft en touch screen til rådighed til testning under projektet. Derfor er heller ikke alle tools i gocreate designet til touch i det nuværende stadie. Der er nogle værktøjer der egner sig godt til touch og andre der egner sig klart bedre til mus. Selvom versionen der er præsenteret her, tager afsæt i at der benyttes mus, har jeg haft overvejelser omkring, hvordan forskellige dele kunne tilgås for at give en god oplevelse med touch. Objekterne Hvad angår alle objekter der placeres ved at klikke på lærredet, er de optimeret til brug af mus og ikke touch. En af de mest markante forskelle der er mellem mus og touch, er at musen hele tiden er på skærmen, det er ens finger ikke altid på en touch screen. Man bevæger nødigt fingeren for at få en markør fra den ene ende til den anden, man løfter den jo bare. Det er netop dette der gør touch-funktionalitet så intuitivt, men gør samtidige, at designet af funktionaliteten skal være anderledes. For at løse denne problematik og gøre gocreate touch-venlig, så kunne man benytte dragand-drop. Man vil altså trækker et objekt fra menuen og ud på lærredet, og når man slipper, har man placeret det. Problemet er, at man ofte kan komme til at slippe objektet for tidligt. Man kunne løse dette ved at objektet ikke bliver placeret ved drop, men man stadig kan finjustere dets position ved at gribe fat i det igen og igen. Når placeringen så er som ønsket, kan man fastgøre det ved eksempelvis et dobbeltklik, med en finger. Det må der arbejdes videre med i næste version af gocreate. Store knapper En af de ting jeg haft med i mine overvejelser, har været at lave knapperne til de forskellige værktøjer forholdsvis store. Det må ikke være det store irritationsmoment, at skulle ramme den rigtige knap. Jeg finder det ofte problematisk, at meget flotte og stilrene flash-sites (fx diverse portfolier) har en tendens til at lave næsten miniature menuer. Selv med en mus kan man komme til at fedte rundt, specielt hvis der ikke er god luft imellem de enkelte knapper eller link. I gocreate kan der dog godt være en tendens til at fx farveknapperne er noget sammenmaste (pladsen har været sparsom), men de er til at ramme, selv med en finger. Specielt Leaf brush kan tænkes at være underholdende på en touch screen. Side 7

8 Layout Hvad angår opsætningen af selve layoutet, så har fokus været på at lave en menu til venstre, der fyldte så lidt, at der blev god plads til at kreere på. Dermed er pladsen i menuen også blevet forholdsvis trang. Specielt da jeg har prioriteret af objekterne i menuen skulle have samme størrelse, som dem der som standard (medium størrelse) placeres på lærredet. Ved yderligere gennemarbejdning kunne det tænkes smart at gøre nogle objekter i menuen mindre, og så sætte deres størrelse til small til at starte med. Endnu bedre ville være at gøre det muligt at skifte/flippe mellem flere menuer med forskelligt indhold af objekter. Derved ville alt ikke skulle passe ind på den snævre plads. Til gengæld vil det heller ikke blive nær så simpelt af gå til. Som det er nu, er rammerne ret klare efter man har prøvet sig lidt frem med de forskellige værktøjer. Ovenstående skal ses i lyset af, at mit fokus for projektet samlet set har drejet sig omkring at få funktionelle værktøjer til at virke. Side 8

9 Koden i gocreate Orientering i koden Jeg har forsøgt at gøre ActionsScript-koden i gocreate.fla rimelig tilgængelig at læse. Har så vidt muligt holdt EventListeners og funktioner i samlede klynger, opdelt ud fra tema eller elementer. Samtidig er der beskrivelser og kommentarer til det meste. Håber det vil give overblik over koden. Det har i hvert fald hjulpet mig gennem processen. Udgangspunktet for kodens dele Selve programmets tilblivelse har taget udgangspunkt i forskellige øvelser fra undervisningen. Programmet er bygget op omkring muligheden for at tegne, som kærnefunktion. Det er så blevet udvidet med andre funktioner, som at placere forskellige præfabrikerede objekter på lærredet. Disse har i grundformen baseret sig på addchild-drag-drop funktionalitet. Altså at der genereres et nyt element fra biblioteket, der derefter kan placeres på lærredet. Known Bugs Der er desværre én fejl, som jeg ikke umiddelbart har kunne fjerne. Det drejer sig om de highlights der hører til de forskellige tools som indgår i programmet. Det er meningen at de forskellige highlights-movieclip skal tilpasse sig til det tool-movieclip det skal vises som aktivt. Det kedelige er at det faktisk har virket upåklageligt, men pludselig ville det ikke virke på alle værktøjer. Fx virker det efter hensigten på træstubben og de to planter, men ikke på bakken og grantræet. Det har ellers virket, så det må være en fejl der er blevet gemt med pga. en fejl i selve det Flashprogram jeg har gemt i. Det kræver nok at det sættes op helt fra bunden i et nyt dokument, for at blive rettet. Fejl med highlights Starten var en drawing -funktion som blev lavet i samarbejde med underviser (ses herunder, dog her vist uden funktionerne show- Brush(), hidebrush() og removebrush()). Derefter har jeg kunne bygge videre på den kode med flere objekter og brushes, samt variabler der har været nødvendige for at kunne generaliserer funktioner til flere elementer. Kunsten har blandt andet været at bibeholde funktionaliteter, så som at der kun kan tegnes og placeres ting på lærredet, at få det aktive objekt til altid at vise sig øverst og så fremdeles. Ellers vil jeg mene at meget af det Actionscript jeg har skrevet, tager udgangspunkt i mere eller mindre generel funktionalitet i Flash. Koden til draw-funktion: stage.addeventlistener(mouseevent.mouse_down, startdrawing); stage.addeventlistener(mouseevent.mouse_move, move- Mouse); stage.addeventlistener(mouseevent.mouse_up, stopdrawing); function startdrawing(event:mouseevent):void { if (canvas_mc.hittestpoint(mousex,mousey)) { if (brush== pencil ) { canvas = new MovieClip(); canvas.graphics.linestyle(2,0xff0000); Side 9

10 this.addchild(canvas); /*move to the correct starting position for drawing*/ canvas.graphics.moveto( canvas.mousex, canvas.mousey); pencildrawing=true; else { var b = new flower (); this.addchild(b); b.x=mousex; b.y=mousey; function movemouse(event:mouseevent) { if (canvas_mc.hittestpoint(mousex,mousey)) { showbrush(); else { hidebrush(); //trace ( is it working? ); if (pencildrawing) { canvas.graphics.lineto(canvas.mousex,canvas. mousey); En anden markant funktion der er taget udgangspunkt i til den spektakulære leafbrush, er en popper-funktion fra undervisningen Her har udfordringen blandt andet været at indhente variabler fra MovieClip parent, samt lave funktioner til farveskift. Eller håber jeg koden kan tale for sig selv, og give et billede af hvor langt jeg er kommet som begynder i Flash. Kode til Popper: this.addeventlistener (Event.ENTER_FRAME, fall); var gravity =.4; var maxspeedy = 15; scalex=scaley = Math.random()*2; var speedx = (Math.random()*4)-2; var speedy = -(Math.random()*10); function fall (e):void{ y+= speedy; speedy+=gravity; if (speedy>maxspeedy){ speedy = maxspeedy; if (y>speedx) { x+=speedx; if (y>500){ destroy () function destroy (){ MovieClip(parent).removeChild (this); this.removeeventlistener (Event.ENTER_FRAME, fall); Side 10

11 Opsamling og Afrunding Det har været fascinerende at stifte bekendtskab med de mange muligheder der er i Flash, selvom en del har været ude for min rækkevidde i denne omgang. Jeg er særligt begejstret for den måde man let kan arbejde med det grafiske i Flash. Kodningen er derimod mere besværlig at komme i gang med, men klart hver at lære, da den ofte kan give den funktionalitet man ønsker. Derudover har dette projekt været det første spæde skridt for mig i udforskningen af touch-teknologi som interaktionsplatform. Jeg glæder mig meget til at gå videre med dette aspekt, og ser klart et potentiale for, at jeg kan få glæde af Flash i fremtidige projekter med fokus på touch. Første skridt i den retning kan med fordel være, at afprøve og forbedre gocreate. To skitser fra processen Side 11