Vektorgrafik&Animation

Transkript

1 Vektorgrafik&Animation E X A M I N A T I O N S R A P P O R T M O D U L 8 Catarina Ytterlid, Högskolan Väst 2007, catarina@ytterlid.se

2 Vektorgrafik Vektorgrafik bygger på matematiska formler som talar om för datorn hur och var de olika objekten ska ritas upp och visas på skärmen. I princip all form av modern 3D-modellering görs med hjälp av vektorbaserad teknik. [3] Fördelar med vektorgrafik Vektorbilder går att skala utan att man förlorar i kvalitet vilken är en stor fördel jämfört med bitmap-bilder som blir pixliga och suddiga. Filerna tar liten plats, kräver inget stort arbetsminne och möjliggör snabbare nedladdningstider. Logotyper, illustrationer och annat s.k. artwork brukar göras i vektorgrafik. (Reinhardt & Dowd 2006, s. 505) Nackdelar med vektorgrafik "Highly complex vector graphics may result in very large file size ". Sådana komplexa bilder kan även ta lång tid för datorn att rita upp på skärmen vilket gör att nedladdningstiden ökar. Vektorgrafik lämpar sig inte för bilder med mycket detaljer och toningar som exempelvis fotografier. (Reinhardt & Dowd 2006, s. 505) Vektoranimation Användningsområden I Macromedia Flash 8 Bible (2006, s ) ger författarna exempel på olika kategorer av vektoranimerade presentationer: Linear presentations: " these movies load and then play and count on catching the user's attention through the story and animation." De menar också att linjära presentationer inte behöver vara begränsade till att visas med hjälp av en webbläsare eller ens online. "Several film-production and advertising companies use Flash to create high-quality animation for use in broadcast TV and feature films." Interactive presentations: "They provide user control over the way information is presented." Exempel: webbsidor där man navigerar sig runt i filmen beroende på vad man vill göra, interaktivt utbildningsmaterial eller spel. Data-driven presentations: " represents any movies that load external data (either dynamic or static) to deliver the presentation to the user". Exempel: väderprognoser som laddas ner från en databas. Data-driven applications (or Rich Internet Applications): " Flash movies that enable the user to accomplich some sort of task or enable a transaction from the Flash movie to use an external remote data source". Exempel: system för e-handel. Vektoranimation används inom många områden och det finns ett flertal program (förutom Macromedia Flash) som kan användas t.ex: Microsoft PowerPoint (företagspresentationer, utbildningsmaterial), SVG (kartgrafik) och olika 3D-program. Begränsningar Användningen av Flash på webben kan begränsas av faktorer som användarnas bandbredd, datorkapacitet, webbläsare, operativsystem och vilja/förmåga att ladda ner och installera rätt version av Flash playern för att kunna ta del av innehållet. Webbläsarens "Back"-knapp fungerar t.ex. inte på samman sätt i Flash som i HTML, man kan inte klicka sig tillbaka till det ställe man sist var i Flash-filmen utan webbläsaren tar en tillbaka till föregående HTML-sida (vilket kan vara på en helt annan sajt). Man kan inte 2(6)

3 heller "logga" vilka olika sidor användarna har besökt. Ett sätt att komma runt detta är att dela upp Flash-sajten på flera HTML-sidor. Möjligheter "The Internet is changing. Although people have primarily used it to read and Web pages, more functionality-oriented applications are now emerging, with the goal of providing new features that do more for users. Developers are creating many of these applications using Macromedia Flash, because traditional Web pages are better suited to what they were invented for reading articles than to the new goal of manipulating data objects." [1] Det faktum att man enbart behöver ett flash plug-in för att kunna ta del av multimedia på webben utgör samtidigt en stor möjlighet till rikare upplevelser för användaren. Andelen användare med tillgång till snabbare bredband och bättre datorer ökar hela tiden och nästa generations webbläsare kommer med all säkerhet att ha ett inbyggt stöd för Flash. En annan möjlighet är att spela upp vektoranimationer som är sparade som en "stand alone player" Flashfilen är ett eget körbart program som innehåller en projektor då behövs det inte ens en webbläsare. Vektoranimation och användbarhetsperspektivet " in the usability field, we've learned that more technical capabilities and a broader set of design options usually translate into more rope for hanging the users. Designers almost always use new features to excess, and it takes some time to discover the most appropriate way of applying new technology to suit human needs." [1] Eftersom det finns så många möjligheter med att använda vektoranimation finns även risken att man inte sätter användbarheten i första rummet. "The fundamental's of design the use of layout, color, type and imagery remain the same ". (Gordon & Gordon, s 138). Ett av de bästa sätten att värna om användbarhet på webben är att vara konsekvent eftersom användare förväntar sig att olika saker ska hända baserat på deras tidigare upplevelser. Att placera de olika elementen "där de brukar finnas på de flesta andra webbsajter", gör att man minskar risken att användaren blir förvirrad och upplever sajten som svårnavigerad. [2] "In essence, we can state much of Web usability as: answer customers' questions, get to the point, and take it easy on the bells and whistles. If only we could get websites to stop annoying users, much would be gained." [1] 3(6)

4 Vad har varit svårt/lätt? Den första modulen som gick ut på att skapa en animation i SVG uppfattade jag som relativt enkel eftersom jag kan HTML och även hållit på en del med strukturering av text i XML. Jag testade bl.a. att spara ett Adobe Illustrator-dokument i svg-formatet och sedan titta på koden i Notepad och försöka "läsa" eller "se" vilka objekt som skulle ritas upp. Till att börja med förstod jag inte riktigt syftet med denna modulen men så här i efterhand tycker jag att det var en bra introduktion i ämnet. Reinhardt & Dowd skriver i Macromedia Flash 8 Bible (2006, s. 17): "Flash 8 is a multifaceted application that can create a wide range of interactive products for the ever-growing variety of Webenabled devices that surfers use to access the Internet". Jag tycker att det tog ganska lång tid att greppa vilka möjligheter som finns och vad man rent faktiskt kan göra med Flash eftersom det är så omfattande. Förutom det material som vi haft tillgång till genom studentportalen på har jag haft mycket nytta av Macromedia Flash 8 Bible en mycket pedagogisk och bra bok som jag läst mycket i och gjort massor av övningar från. Jag har även valt att gå ett steg längre genom att på egen hand lära mig grunderna i hur man använder video i Flash. Att förstå hur man måste tänka för att med ActionScript kunna styra hur och när movieclips ska bete sig på olika sätt och koppla ihop knappar med händelser var nog det svåraste under kursen. Jag har lite svårt för att tänka programmering Efter att ha kommit en bit på väg tycker jag att trots att Flash har en ganska hög inlärningskurva är det smidigt att använda och det finns saker som jag numera hellre gör i Flash än i t.ex. Illustrator. Egentligen är det bara en fråga om hur mycket tid man lägger ner på att lära sig och att ActionScript kräver att man tar en sak i taget och i rätt ordning. Processbeskrivning och designval Grundkoncept användargränssnitt och färger När jag började planera hur sajten skulle se och vad den skulle innehålla kom jag snabbt fram till att jag ville göra ett enkelt och rent gränssnitt med få färger. Mörkt gråsvart bakgrund, olika nyanser av grått, text i vitt och rosa tillsammans med några inslag av orange blev en ganska neutral fond till de färgbilder och filmer som finns under galleri. Flash-filmen är 800x500 pixlar och är centrerad på både höjden och bredden i webbläsaren oavsett om användaren väljer att maximera sitt fönster eller inte. Skärmdump från Galleri och en av bilderna i kategorin "hästbilder". Preloader En preloader talar om hur mycket av index-sidan som har laddat in (syns inte vid snabbare bredbandsanslutning). 4(6)

5 Intro Efter preload-funktionen startar ett intro som är ca 10 sekunder långt och består av att gränssnittet animeras in på "scenen", linjerna ritas upp, "loggan" sätts ihop och prickarna över i:na droppar ner och lägger sig på plats. Slutligen tonas menyobjekten och bakgrundsbilden in tillsammans med blommor med olika transparens. När introt är slut förflyttas man till startsidan. Menyelement och navigering "Om en lista består av fler än nio punkter kan normalt bara ett fåtal användare överblicka den" (Molich 2002, s. 88). Jag har gått efter "±7-regeln" (mellan 5 och 9 (±7)) och valt att ha med sju st menyelement: start, erfarenhet, utbildning, om mig, galleri och kontakt. Menyn finns kvar på varje sida, vilket underlättar navigeringen. Text "A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read". [2]. Eftersom det är jobbigt att läsa stora mängder text på skärmen har jag delat upp innehållet i rubriker, underrubriker, punktlistor, kortare stycken och använt mig av färg för att markera kontraster. "Computers have changed the way that final designs are created, but they have not changed the fundamental principles and uses of typography". (Reinhardt & Dowd 2006, s. 230). Jag har valt det linjära typsnittet Century Gothic för "brödtexten" och Viner Hand ITC till de olika avdelningarnas huvudrubriker. Rubriken på start-sidan är i Adobe Jenson Regular. Bilder På alla sidor finns en stor transparent bakgrundsbild. Bilden är ett svart-vitt foto omgjort med trace bitmap, färgen är ändrad och opaciteten är neddragen till 10%. Samma bild fast i original används på om mig-sidan och även (i en annan modifierad version) som startbild på galleri-sidan. Bilderna på galleri-sidan ligger i ett modifierat movieclip från labbuppgift III. De bilderna (utom de där jag själv är med) har jag fotograferat och redigerat i Adobe Photoshop. Ikoner Några av ikonerna i menyraden har jag gjort av typsnittet Wiesbaden Swing Dingbats, några har jag ritat i Flash och andra är fria clipart-bilder som är bearbetade. Ikonerna hänger med till respektive sida och ligger nere i högra hörnet för att man ska veta var man är. Animationer Nere i vänstra hörnet finns en animation i form av transparenta blommor som "fadar" in och ut, dessa finns kvar på alla sidor. På om mig finns en animation av en flicka som hoppar från ena foten till den andra och på kontakt finns det en katt som sover, vaknar, öppnar ögonen och säger "mjau". Video Jag har under galleri valt att ta med 3 st korta videofilmer som jag gjort om till.flv-format i Flash 8 Encoder. Filmerna laddas ner progressivt och är optimerade för en hastighet på 400 kb/s (jag är medveten om att de hackar om man t.ex. har lägsta bredbandshastigheten, 250 kb/s). I detta fallet skulle varit lämpligt med en preloader för att tillräckligt mycket av respektive film ska laddas ner innan den börjar spela. Ljud När man klickar på menyknapparna hörs ett klickljud. Under "loggan" finns det en gul smiley-knapp som spelar upp en ljudfil från "Vänner". 5(6)

6 Referenslista KURSLITTERATUR Reinhardt, R., Dowd, S. (2006). Macromedia Flash 8 Bible. Wiley Publishing, Inc. REFERENSLITTERATUR Gordon, B., Gordon, M. (2002). The complete guide to Digital Graphic Design. Watson- Guptill Publications. Molich, R. (2002). Webbdesign med focus på användbarhet. Studentlitteratur. ARTIKLAR OCH REFERENSER FRÅN INTERNET Nielsen, J. (2002). Flash and Web-Based Applications [1]. URL: Nielsen, J. (1996). Top Ten Mistakes in Web Design [2]. URL: Wikipedia, den fria encyklopedin. Vektorgrafik [3]. URL: (6)