Mötet

Vår film ligger nu uppe på youtube.

Kolla in den på: http://www.youtube.com/watch?v=p-mku_OEK-k

Ny kurs

Jag tror att Ljud och bildkursen är en rolig och lärorikkurs som kommer öppna våra ögon för ett nytt uttrycksätt. Det ska bli roligt att få göra egna filmer, och jag ser fram emot att lära mig mer om hur man redigerar på bästa sätt.
Svårast tror jag att ljussättningstänket kommer bli, hur man bäst får till ett bra naturligt ljus när man filmer.

Let the camera roll!

Inlämning ett i Flash

Frame by frame:
Jag skapar ett nytt Flashdokument och väljer version 2 av programmeringsspråket actionscript.Jag gör en streckgubbe som håller i ett par hantlar, i bildruta två sätter jag in en keyframe genom att trycka f6 eller högerklicka på bildrutan och infoga keyframe. I denna gör jag en förändring i utseendet, jag böjer på armarna så att det ser ut som han lyfter hantlarna, jag infogar en keyframe i nästföljande ruta och böjer munnen så att det ser
som gubben gör en grimas av ansträngning osv. När jag sedan trycker på crl och enter eller går in på Windows/test movie för att se hur filen kommer att se ut publicerad så ser det ut som gubben rör sig.

Motiontween och shapetween kombinerat:
Jag gjorde ett hjärta som springer fram och kramar en. Jag gjorde hjärtats rörelser med hjälp av shape tween och drog sedan ut den på scenen där jag skapade en rörelse över scenen genom att använda motion tween.
Jag skapade ett nytt motion guide lager där jag ritade hur hjärtat skulle röra sig för att sedan på hjärtats lager haka fast hjärtat i ändarna på den ritade linjen på två keyframes, en där rörelsen börjar och slutar. När man sedan sätter en motiontween mellan dessa två keyframes följer hjärtat den ritade linjen. Linjen syns inte i den publicerade filmen.

Shapetween:
Jag ritade en cirkel med gul fyllning som ska föreställa en fullmåne,sedan satte jag en keyframe där jag vill att tweenen ska sluta, det skapar en kopia av den första figuren till och med den andra keyframen.Jag satte en keyframe någonstans däremellan på tidslinjen och ändrade där formen på cirkeln till en månskära. Sedan gjorde jag en shape tween mellan den första och andra keyframen genom att högeklicka på den första och välja create shapetween,sedan gör jag likadant mellan den andra och tredje.

Porträtt bitmapsekvens:
Jag öppnade ett porträtt på mig i photoshop, sparade den som en kopia.Jag gjorde nya lager av bilden. Jag markerar den första lagerkopian och förändrar munnen genom att välja filter/liquify där det finns verktyg för att förändra utseendet och sparar om jag är nöjd. I nästföljande lager gör jag ännu en förändring av utseendet. När jag är färdig sparar jag och importerar porträttet och dess lager i Flash. Innan jag importerat färdigt väljer jag att importera lagren som keyframes.

Ljud och bild synkroniserade:
Jag öppnar ett nytt flashdokument, infogar en ny symbol, och väljer symbolen movieclip. Jag sparar och namnger filen. Jag gjorde en kvinna och ritade hennes kroppsdelar i olika lager efter att ha satt in keyframes i de lagren.På munlagret satte jag en keyframe några rutor fram och ändrade formen på munnen, det gjorde jag även på på ögonlagret.Jag drar in en instans av symbolen på scenen, i propertiesfönstret ändrar jag movieclipet till en graphic. På ett annat lager lägger jag in det ljud jag valt att synca bilderna med.Man syncar bilderna med ljudet genom att lägga in keyframes på kvinnans lager, där det är tyst ställer man in single frame nere i propertiesfönstret, där kvinnan ska prata ställer man in den på loop, vilket gör att det kommer se ut som hon rör på munnen och blinkar när hon pratar, men är stilla när det är tyst.

Bildspelet:
Jag började med att bearbeta bilderna som ska användas i bildspelet i photoshop. Upplösningen på bilderna ändrades i edit/imagesize till 72 dpi och bildernas höjd och bredd anpassades till storleken som eftersträvades.Sedan sparade jag bilderna som en kopia till originalet, En av bilderna gav jag namnet "bildspel". Jag markerade alla bilder jag ville ha med i bildspelet och kopierade dem för att sedan klistra in dem i bildspel fotot, så att de bildar lager till den bilden.Jag sparade "bildspel" och importerade den sedan till scenen i flash. Innan jag gjorde det gjorde jag alla lager till movieclips och valde att importera dem som flash layers.Då kommer de in som lager även i flash.Jag namngav de olika lagren och placerade dem i den ordning jag ville ha.Jag satte en keyframe där jag vill att varje bild ska börja och sluta, för att göra så att bilderna tonar ut och in i varandra,satte jag först keyframes några rutor innan slutet på första bilden och några rutor inne i andra bilden. Sedan sätter man en motiontween mellan dessa keyframes,mellan de sista två keyframes i slutet på första bilden och mellan de två första i den andra bilden.För att sedan i ett andra steg skapa toningen,

Navigation:
Jag skapade en ny flashfilm som jag döpte till index för att inte glömma vilken fil som är startfilen.Jag skapade ett antal nya lager som jag namngav efter funktion; script kallade jag lagret högst ihop där jag samlade all actionscript.Jag satte keyframes på var femte ruta fram till och med nr. 30 för att sedan sätta en etikett på dessa fem ställen; de första fem rutorna fick heta "start" "del2""del3" "del4" osv.Detta gör vi för att struktura upp de olika delarna vi vi vill ha med. För att sätta en etikett på ett område ställer du dig på en keyframe går ner till propertiesfönstret och skriver in ett namn under frame. I dessa fem keyframes ska vi senare genom actionscript ladda in externa swf filer så att indexfilmen inte blir så stor. Jag skapade ett knapplager där jag drog in osynliga knappar. De osynliga knapparna gjorde jag genom att gå in på insert/new symbol för att sedan välja typen button och namnge den till osynlig_btn. Button har sin egen tidslinje där jag satte in en keyfram under Hit och drog ut ett rektangulärt avkänningsområde för knappen sedan var det bara att spara och gå tillbaka till scenen. Väl där drog jag ut instanser av knappen till knapplagret.Varje instans av knappen namngav jag genom att markera instansen och sedan gå till Propertiesfönstret och gen den ett instansnamn t.ex."start_btn" vilket är jätteviktigt för att man sedan ska kunna göra knappen interaktiv med actionscript senare och för att då kunna referera till knappen.För att skriva in text i knapparna skapade vi ett textlager och skrev in lämpliga namn i varje osynlig knapp som man sedan ska klicka på.Jag gjorde ett "markör"lager och satte in keyframes under varje etiketterat ställe på tidslinjen, i keyframen under start ritar jag ett streck under startsidans namn för att visa att besökaren nu befinner sig där och gör sedan ett likadant streck under de andra knapparna.
Grafiken på sidan lägger jag på ett "grafik" lager. Mitt sidhuvud la jag in där. Sidhuvudet i sin tur gjorde jag i ett separat movieclip så att jag kunde lägga till olika filter på den som jag annars inte hade varit möjligt. Innehållet på sidan la jag in på lagret"innehåll". I första keyframen på det lagret placerade jag då startsidan dit jag la in det jag ville ha där som en bild på mig och lite text. Texten skapade jag i ett movieclip för att kunna sätta olika filter på texten om jag så skulle vilja. Sedan drog jag in det movieclipet till startsidan.
För att ladda in allt innehåll på sidan så skapade jag först ett tomt movieclip som jag kallade "target_mc". Sedan satte jag en keyframe under del1 på den femte keyframen på innehållslagret. Dit drog jag in target_mc och satte in frames hela vägen till keyframe trettio.
För att då skapa interaktivitet med actionscript lägger jag in allt script på lagret "script". Jag ställde mig på den första keyframen där startsidan börjar, högerklickar och väljer actions i menyn. I rutan som kommer upp ska du göra så att man kommer till rätt frame när man trycker på rätt knapp. Där skrev jag in följande:
stop();start_btn.onRelease = function(){gotoAndStop("start");
Jag skrev in denna kod för alla knappar. Koden gör så att startsidan blir det första du ser, och när du trycker på start_btn i det här fallet så går du till och stannar på "start", alltså etiketten på ruta 1-5.
För att ladda in swffilmerna måste du lägga in script på det ställe du vill att de ska hamna. För att en film ska hamna under "del1" markerar du först keyframen på "del1" högerklickar och väljer actions. Sedan skriver du in följande kod: target_mc.loadMovie("namnpåfilm.swf");
Detta gör vi på alla ställen vi vill ladda in en film.
För att kolla att allt funkar tryck cntrl enter för att publicera filmen.

Veckans reflektioner

Det har varit jättekul att sitta och jobba med grupprojektet, jag kommer sakna det faktiskt. Det har varit fantastiskt att få ge utlopp för all bortträngd kreativitet som man inte får tillfälle till att göra i vanliga fall.

Det tog däremot längre tid än förväntat att rita figurer och animera sagan. I slutändan så blev sagan inte helt färdig, men jag har gjort ett första utkast som inte är perfekt men som jag ändå är hyfsat nöjd med. Jag har tyckt att det har jättekul att få se resultatet av våra gemensamma ansträngningar förvandlat till en fin helhet.

Interaktiva medier har verkligen varit en av de roligaste kurser jag deltagit i.

Fredagsreflektioner!

En slutsats man kan dra av den här veckan är att animationer tar tid och inte är så lätta att realisera. Man kan ha en fantastisk idé, men att sedan förverkliga den idén är en annan fråga.

I vår grupp har vi börjat att animera figurer till vårt intro. Jag håller på att finslipa en korridor med facklor som brinner och en fladdermus som så småningom ska flaxa omkring. Det blir nog coolt när det är klart.

Det ska bli kul att sätta ihop gruppens animationer i movieclips till en helhet, och skapa interaktivitet med actionscript. Jag ser fram emot nästa vecka. Det här projektet känns väldigt avancerat men samtidigt otroligt roligt. Jag böjer mig inte för en utmaning.

Förväntningar inför projekt

Jag tycker det ska bli jättekul att göra grupprojektet i Flash. I vår grupp har vi bestämt att animera korta sagor för barn som man ska kunna välja genom att klicka på dem i bokform i ett bibliotek.

Jag hoppas att jag ska lära mig en massa om hur man gör en animerad film, hur man bygger upp en navigationsstruktur och ännu mer om Actionscript som jag inte kan mycket om just nu.

Det ska bli superkul att animera sagor!

So here we go!

Synopsis Projektarbete

Grupp

Nathalie C. Andersson

Melanie Haider

Niklas Knutsson

Projektnamnsförslag

Sagovärlden, Bokhyllan, Sagoskatten

Målgrupp

Barn och andra intresserade.

Syfte

Inspirera barn till läsning och upptäckande av de världar som finns i böcker och sagor.

Idé

Vi vill göra en slags sagovärld där besökaren kliver in genom en dörr som knarrar och kommer in i det gamla, bortglömda sagobiblioteket. Där finns en bokhylla med mängder av gamla böcker, alla dunkelt upplysta. Man ser bokryggarna och böckernas titlar och kan dra ut böcker ur hyllan. Då slår boken upp sig och man kan välja om man vill läsa boken, väljer man det så sugs man in i sagan. Annars kan man ställa tillbaka boken i hyllan och välja en annan titel.

Vi tänker att vi ska välja mellan två och fyra sagor och animera dessa, så att det är filmen man sugs in i när man väljer att läsa en bok. Vi måste då både spela in sagorna med ljud och sedan animera dem. Hur mycket tid det tar att göra varje saga kommer bli avgörande för hur många sagor vi hinner med att göra.

Vi tänker göra en del saker gemensamt, till exempel introduktionen och bokhyllan. Spela in berättelserna med olika röster och liknande. Sedan får vi dela upp det så att man gör grunden till några sagor var och att vi sedan hjälps åt att bearbeta materialet i slutet.

Teknisk struktur

Vår tanke är att vi har de här tre undernivåerna som syns på flödesschemat nedan. Tanken är då att vi ska ha alla delar som separata swf-filer som ska länkas in i de andra dokumenten. Vi kommer främst använda oss av ljudfiler, bilder och animationer som vi gör i Flash.

Analysuppgift

Triangelmodellen:

Vad:

Information om hur konsumtionen av plast och papperspåsar påverkar miljön.

Vem:

Målgruppen är främst amerikanska konsumenter. Språket på webbplatsen är enbart engelska. Avsändaren är msnbc som är en amerikansk nyhetskanal.

Varför:

Avsikten är antagligen att påverka användarna till en förändring av sina konsumtionsvanor för miljöns skull. På webbplatsen förordar man återanvändning av påsar, om man måste använda en påse överhuvudtaget och att om man köper engångspåsar så ska man ta reda på hur återvinningsbara de är. På en sida ger man info om olika producenter av återanvändbara påsar i återvinningsbara material.

I inledningen direkt efter introt så får användaren göra ett test om sina påsvanor för att sedan få info i videorna som följer om hur papper- och plastpåsekonsumtionen påverkar miljön.

Hur:

Tekniken som används på sidan är video, ljud, text, och fotografier. Mestadels video.

Anslaget är en video där en shoppingvagn rusar genom ett köpcentrum, videon innehåller även intervjuer med amerikaner i matvarubutiker som får svara på om de använder papper eller plastpåse. Det är effektivt med rörelsen som shoppingvagnen för med sig, det drar in besökaren i webbplatsen. Däremot är det inte roligt att videointrot bara kör igång utan att besökaren har något att säga till om, det vore bättre om besökaren själv kunde göra ett aktivt val att se filmen .

Interaktiviteten består i att klicka för att starta videofilmerna, klicka på de olika flikarna, på en sida kan man välja att spela upp intervjupersonernas svar på frågor. På sida två kan besökaren göra ett test, svara på frågor om sin påskonsumtion och därmed bli medveten och skamsen.

På sista sidan efter all info om hur dåligt påskonsumtionen är för miljön kan man göra ett test och se hur många påsar man kan skära ner om man minskar påskonsumtionen med en viss procent, för att användaren ska känna att han/hon faktiskt kan göra en skillnad.

Navigationen på webbplatsen är väldigt enkel och användarvänlig.
Berättandet på webbplatsen är linjärt, meningen är att besökaren ska klicka på knapparna i en viss ordning, från vänster till höger. Visst kan besökaren klicka sig runt hur den vill men det naturligaste är att följa linjen.

Konstruktörerna av webbplatsen har byggt upp webbplatsen som ett löpande band i ett snabbköp, elementen på löpbandet föreställer påsar, kylskåp med mera vari text, ljud och bild stoppats in. Rumsligheten på webbplatsen har byggts upp väldigt snyggt och väl, metaforen med snabbköpet funkar väldigt bra.

De modaliteter, för att övergå till Mark Elsom -Cooks begrepp, som används på webbplatsen är de visuella och audiella sinnena. I och med att det finns mycket video på sidan, med kanalerna bild, skriven text, talat språk, sedan finns de grafiska bilderna som bakgrunden består av och pilarna som man kan klicka sig vidare på, när man klickar på pilarna och löpbandet går vidare till en ny sida hör man ett ljud som när varor slås in i kassan. Man använder även det taktila sinnet när man klickar sig vidare på det löpande bandet och när man gör testen.

En vecka med flash

Den gångna veckan har varit kul och lärorik. Flash verkar vara ett superhäftigt kraftverktyg för att förverkliga ens mest barnsliga kreativa drömmar och såklart mer mogna allmännnyttiga sådana också som att göra ett bildspel.

Höjdpunkten var nog att få den enkla fågeln som vi ritade i flash att flyga med motion tween då kändes det som att jag flög också. :)

Mark Elsom-Cook diskuterer vad som definierar och skiljer begreppen "medium" och "multimedia" i boken "Principles of interactive multimedia".

Medium beskriver han som:

"A set of co-ordinated channels spanning one or more modality which have come by convention, to be referred to as a unitary whole, and which possess a cross-channel language of interpretation."

På svenska ungefär:

"En samling koordinerade kanaler som spänner över en eller fler modaliteter, som av konvention kommit att betraktas som en enhetlig helhet, och som besitter ett kanalöverskridande tolkningsspråk"

Elsom menar att ett medium blir ett sådant av tradition och att det som idag kallas multimedia i framtiden kan komma att betraktas som ett medium. Ett medium måste visa något samverkansförhållande mellan de olika kanalerna som det består av.
Kommunikationskanaler är till exempel skriven text, stillbild, musik osv. Exempel på medier är televisionen, boken och radion.
Ett medium har även ett kanalöverskridande tolkningsspråk vars betydelse endast kan fås av att man sätter ihop de olika kanalerna.

Multimedia definierar Elsom såhär:

“Multimedia is the combination of a variety of communication channels into a coordinated communicative experience for which an integrated cross-channel language of interpretation does not exist.”

På svenska ungefär: Multimedia är en kombination av en rad kommunikationskanaler som blir till en koordinerad kommunikativ erfarenhet för vilken det inte finns ett kanalöverskridande tolkningsspråk.

Elsom menar alltså att även om man sammanställer olika medier så kommer inte användaren se dem som en helhet därför att denne inte är van vid sammansättningen. Multimedia blir i takt med att användaren vänjer sig vid det så småningom ett medium.

Intressant länk

Jag hittade en superbra länk där man kan hitta färdiga koder i DHTML och javascript som man kan använda gratis för att göra olika interaktiva webbelement. Enjoy!

http://www.dynamicdrive.com/dynamicindex1/index.html

Tentadax!

Tenta, åh vad jag har längtat! Hmm...kanske inte. Här kommer i alla fall tre frågor jag tycker är relevanta inför tentan.
1.Vad är skillnaden mellan block och inline element? och varför är det viktigt att veta det?

2.Vad är ett attribut inom xhtml syntax?
Det är viktigt att kunna och förstå (x)html och css syntax som är grunden för att kunna bygga ordentliga webbsidor.

3.Vad är xhtml och css och hur är de relaterade till varandra?
En viktig fråga för att förstå vad vi egentligen har gjort under laborationerna den här tiden och vad vi har
lärt oss.

Lycka till på tentan allihopa!

Förväntningar på kurs

Jag tror att Internet och publiceringskursen kommer att vara mig till nytta i framtiden. Jag ser fram emot att lära mig de absoluta grunderna för webbpublicering för jag kan de inte något vidare för tillfället.