Flash - inlämning 1

Nu har vi gjort första riktiga uppgiften i Interaktiva medier, Inlämning 1. Den består av ett gäng olika övningar vi har gjort som har sammanställts till vår egna lilla Flashhemsida. Ganska rolig idé. Jag har lagt upp mitt arbete på mitt studentkonto, så den finns på adressen http://student.ktd.sh.se/~sh08hp7954/Flash/index.swf för den som vill titta.

När man kommer till startsidan så är ser man lite text och en bild av mig som är animerad, samt min namnteckning som också är animerad. Det som är mest intressant i sammanhanget är väl hur jag gjorde den animerade fotografiska bilden. Det var ganska enkelt. Förklaring följer.

Animerat porträtt
Man tar en bild, öppnar den i Photoshop, gör en massa olika lager och fixar till dem på Liquify som ligger under fliken Filter. Det man gör är alltså olika bildsekvenser som man sedan ska använda till att göra animationen i Flash.

Sagt och gjort. Bilden är klar och jag sparar den i psd-formatet i stället för i jpg eller något annat. Jag öppnar sedan Flash och importerar bilden till biblioteket. Jag väljer då att importera alla bildlager från Photoshop som egna små bildrutor, keyframes.

När alla lager ligger bredvid varandra på tidslinjen i Flash så gör jag en motion tween, en slags rörelseövergång som gör att skiftningarna inte blir så brutala, och voilá! Jag har gjort en animerad bild. Inte svårare än så. Hur snygg animeringen blir beror ju så klart på hur många olika lager man gör i Photoshop och hur många mellanlägen man därmed får.

Resten av startsidan
Sidhuvud och sidfot på sidan består av block med olika färger. Den animerade pilen och namnteckningen har jag gjort genom att rita en pil och en namnteckning i Flash. Sedan har jag kopierat bilderna och modifierat dem så att rörelsen ändras och det ser ut som om de rör på sig. Därefter har jag använt mig av motion tween liksom på det animerade porträttet.

Bildspel
På sidan finns ett bildspel med bilder som jag har tagit själv, och det var en av de sakerna som tog mig längst tid att göra eftersom det är så många bilder. Man skapar en psd-fil och lägger in de bilder man vill ha i olika lager. Sedan importerar man filen till Flash och väljer att importera lagren som lager och inte som keyframes, som vi gjorde tidigare. Därefter lägger man alla bilder efter varandra i tidslinjen och försöker skapa fina övergångar med hjälp av motion tween och färgen alpha (som är genomskinlig).

Det är mycket meck, men blev ganska fint. Ska jag göra fler bildspel vill jag dock lära mig att programmera i stället, eftersom man då sparar en väldig massa tid och energi.

Hjärta
Jag har gjort en figur som förvandlas från en boll till ett hjärta. Jag skapade då en form i Flash och gjorde sedan en till keyframe (en händelseram där man förändrar något). Och i denna keyframe gjorde jag om cirkeln till ett hjärta. Sedan kopierade jag cirkeln och lade den efter hjärtat också. Sedan använde jag shape tween, alltså en formövergång mellan de tre keyframesen. Ändrade lite färg, lade in en text och så hade jag ett hjärta som bultade. Ganska häftigt va?

Havet
Här var min ambition större än jag orkade genomföra till fullo. Jag ville göra en båt som seglade graciöst över havet, men det blev inte riktigt som jag hade tänkt mig. I alla fall. Jag lade in en bakgrundsbild av havet på Öland, som jag själv tagit. Sedan gjort jag ett filmklipp med båten.

På båten finns även en gubbe som rör på armarna och i seglet flera noter som också rör på sig. Jag animerade dem som jag animerat de andra sakerna, men eftersom de var så många och små tog det mycket tid. Sedan när båten var klar ritade jag en bana som båten skulle följa. Det var krångligt att få båten att följa denna banan, men till slut gick det någorlunda och båten seglade över havet. Kanske inte graciöst, men väl framåt.

Lägereld
Detta är den animation jag är mest stolt över och som jag arbetade mest med. Det är en scout som spelar gitarr och sjunger. Låten är en lägerbålssång som jag har arrangerat och spelat in. Jag lade in en bakgrundsbild på en eld. Sedan animerade jag scouten. Det tog en faslig tid att rita honom och sedan göra så att han dels flyttar vänsterhanden på gitarrhalsen, dels högerhanden och kompar, samt trampar takten med skon.

Jag gjorde också så att gubben rör på munnen, ögonen och hakan, så att det ser ut som om han sjunger. Nästa steg var att lägga in lite noter som rör sig, en kör som sjunger och ett överkryssat paraply. Jag lekte även en del med pratbubblor som kom in i takt med att kören och scouten sjunger textraderna.

I början av klippet slår ju scouten an strängarna på gitarren och detta valde jag att gestalta genom att göra fyra noter som tonas in och åker ner i takt med tonerna på gitarren. Det tyckte jag var ganska fiffigt.

Filmen var inte speciellt svår att göra. Jag la in låten i biblioteket, gjorde animationerna på samma sätt som alltid och spenderade massor med tid på att synka läppar samt synka textrader med pratbubblorna. Jag lade också in kören så att de kommer in på olika fraser och därmed rör sig i olika takt så att alla inte skulle röra sig motoriskt i exakt samtidigt. Det hade sett onaturligt ut.

Jag är mycket nöjd med resultatet. Det ser inte mycket ut för världen, men det börjar likna någonting riktigt i alla fall och det är väl ändå det som är meningen.

Gubbe
På sidan finns också en animerad streckgubbe. Denna är den grej jag är minst nöjd med, eftersom det helt enkelt bara är en animerad gubbe. Men jag orkade inte göra någonting större av honom eftersom jag tyckte att den animerade scouten på Lägerelden redan visade att jag kan göra bättre saker. Gubben är i alla fall animerad som alla andra saker. En bild som modifieras i en ny keyframe. Very simple och grunden för all animation.

Sammanfattning
Allt som är allt jag nöjd med min inlämning. Jag har lärt mig mycket och hoppas att jag snart lär mig ännu mer så att jag kan använda mina kunskaper till att göra riktiga saker, inte bara småanimationer. Ser med nyfikenhet fram emot fortsättningen.