GRUPPE 10 Nanna Ploug Gjerstrup, Pernille Marie Pilgaard Damholm, Jonas Nielsen, Asger Emil Aagaard Nielsen og Matilde Koch. www.matildekoch.dk/gruppe10/story/scene0/scene0.html 1
Storyboard 2
3
4
Sekvensdiagram og wireframe Asger: Scene 0 Trin 1 Event: Siden vises Start lyd: intro musik Start animation: titel går op og ned Event: Klik(.start) stop animation: titel går op og ned Stop lyd: intro musik Start lyd: Fortæller Titlen bliver læst op Event: Lyd (titlen bliver læst op) er færdig Start lyd: Fortæller Der var engang en fåre mor, Lisbeth, der havde sine børn med på arbejde på hospitalet Event: Lyd: fortæller Der var engang en får-mor, Lisbeth, der havde sine børn med på arbejde på hospitalet er færdig Start animation: zoom ind på dør Skift scene 5
Asger: Scene1 Trin 1 Event: Siden vises Start lyd: Speaker Lisbeth til operationsstuen Start animation: børn og mor går ind Trin 2 Event: Lyd: speaker Lisbeth til operationsstuen er færdig Stop animation: børn og mor går ind Start lyd: Mor Nu skal jeg ind og operere en patient. Vent på mig inde på venteværelset og luk specielt ikke vicevært Ulf ind. I kan genkende ham på hans grove stemme og hans beskidte kedeldragt Start animation: mors mund Trin 3 Event: Lyd: mor Nu skal jeg ind og operere en patient. Vent på mig inde på venteværelset og luk specielt ikke vicevært Ulf ind. I kan genkende ham på hans grove stemme og hans beskidte kedeldragt er færdig Stop animation: mors mund Start animation: lammenes munde Start lyd: Lam Det skal vi nok mor Lisbeth Trin4 Event: Lyd: lam Det skal vi nok mor Lisbeth er færdig Stop animation: lammenes munde Trin 5 6
Event: Klik "dør" Start animation: børn går ind Start animation: mor går væk Trin 6 Event: Animation: børn går ind, mor går væk er færdig Stop animation: børn går ind, mor går væk Start lyd(ulv sniger) Start animation: ulv går frem i scenen Trin 7 Event: Lyd(ulv sniger) er færdig Stop animation: ulv går frem i scenen Skift scene Asger: Scene 2 Trin 1 Event: Siden vises Start lyd: Ulv Luk op kære børn, her kommer jeres smækre lækre mor tilbage, patienten døde (indsæt sjov ting) Start animation: lyd streger Trin 2 Event: Lyd: ulv Luk op kære børn, her kommer jeres smækre lækre mor tilbage, patienten døde (indsæt sjov ting). er færdig Stop animation: lyd streger Start lyd: Lam Vi lukker ikke op, du er ikke vores mor. Hun har en mild stemme og din er så grov. Du er vicevært Ulf 7
Start animation: lam hopper Trin 3 Event: Lyd: lam Vi lukker ikke op, du er ikke vores mor. Hun har en mild stemme og din er så grov. Du er vicevært Ulf er færdig Stop animation: lam hopper Skift scene Asger: Scene3 Trin 1 Event: Siden vises Start lyd: Ulv Jeg skal have fundet en måde at gøre min stemme lys på Start animation: ulvens mund Trin 2 Event: Lyd: ulv Jeg skal have fundet en måde at gøre min stemme lys på er færdig Slut animation: ulvens mund Trin 3 Event: Klik (.ballon) Start animation: ulven inhalerer Start timer 3s Trin 4 Event: Timer 3s er færdig Slut animation: ulven inhalerer Start lyd: Ulv Haha. Hvor er jeg snu, det virkede 8
Start animation: ulvens mund Trin 5 Event: Lyd: ulv Haha. Hvor er jeg snu, det virkede er færdig Slut animation: ulvens mund Skift scene Jonas: Scene 4 Trin 1: Event: siden vises Start lyd: Luk op kære børn, nu er jeres mor tilbage Animer: Taleboble og lydstreger Lyd: Kaere er færdig Trin 2: Event: Klik på dør Stop animation: Taleboble og lydstreger Animer: Børn bevæger sig mod døren 9
Jonas: Scene 5 Trin 1: Event: siden vises Start lyd: Nej, vi lukker ikke op. Vores mor har ikke en beskidt kedeldragt på. Animer: Ulv bevæger sig lidt Lyd: Beskidt er færdig 10
Jonas: Scene 6 Trin 1: Event: Siden vises Start lyd: Lån mig en kittel Animer: Ulvens mund Trin 2: Event: Lyd: Kittel er færdig Stop animation: Ulvens mund Start lyd: Kun hvis du giver et kys Animer: Flodhestens mund Trin 3: Event: Lyd: Kys er færdig Stop animation: Flodhest mund Start lyd: Kvalme Animer: Ulvens kinder vokser og bliver grønne Trin 4: Event: Lyd: Kvalme er færdig Stop animation: Ulvens kinder Start lyd: De kysser Animer: De kysser Trin 5: Event: Lyd: Kysse lyde er færdige Stop animation: De kysser Start lyd: Swip -lyd Animer: Ulven skifter Lyd: Swip er færdig Stop animation: Ulven skifter Matilde: Scene 7 Trin 1: Event: Siden vises. Start lyd: Luk op kære børn, nu er jeres mor tilbage. Animer: Lydstreger. Trin 2: Event: Lyd: Kære børn er færdig. 11
Stop animation: Lydstreger. Trin 3: Event: Klik på døren. Animer: Børnene bevæger sig frem til døren. Matilde: Scene 8 Trin 1: Event: Siden vises. Start lyd: Det er mor. Animer: Ulven bevæger sig lidt. Lyd: Mor er færdig. 12
Matilde: Scene 9 Trin 1: Event: Siden vises. Start lyd: Haha. Der snød jeg jer. Nu kommer jeg og spiser jer. Hvor er i lette at finde. Animer. Ulvens mund. Fårene der gemmer sig. Trin 2: Event: Lyd: at finde er færdig. Stop animation: Ulvens mund. Fårene der gemmer sig. Trin 3: Event: Klik på et får. Animer: Påklikkede får dukker op når man klikker på dem. Animer: Ulvens mund. Start lyd: Smaske lyd. Trin 4: Event: Lyd: Smaske lyd er færdig. Stop animation: Ulvens mund. Stop animation: Fårene der dukker op. Trin 5: Event: 6 får er fundet. Start lyd: Nu kan jeg ikke finde flere får. Animer: Ulvens mund. 13
Trin 6: Event: Lyd: flere får er færdig. Stop animation: Ulvens mund. Animer: Døren lyser op. Trin 7: Event: Klik på døren. Stop animation: Døren lyser op. Animer: Ulven der går hen til døren. Nanna: Scene 10 Trin 1: Event: Siden vises Start lyd: Ulv: Hold op hvor blev jeg træt, af at spise alle de lam. Her kan jeg tage en lur. Start anim: Ulv går hen mod seng Slut lyd: Ulv: Hold op hvor blev jeg træt, af at spise alle de lam. Her kan jeg tage en lur. Trin 2: Event: Slut anim: Ulv går hen mod seng Start anim: ulvens mave (bliver stor og lille på skift.) Start lyd: snorke lyde Start anim: zzz (flyver op fra ulvens mund og forvinder) Start timer: 4s Trin 3: Event: slut timer Slut anim: ulvens mave 14
Slut lyd: snorke lyde Slut anim: zzz Nanna: Scene 11 Trin 1: Event: Siden vises Start anim: mor går (ind i venteværelse) Slut anim: mor går (ind i venteværelse) Start anim: animer chorkeret ansigtsudtryk Start lyd: Mor: Åh nej, hvor er alle mine børn henne. Slut lyd: Mor: Åh nej, hvor er alle mine børn henne. Start lyd: mor hulker og er ked af det Slut anim: ansigtsudtryk Trin 2: Event: Klik på det lille lam Slut lyd: mor hulkelyde Start anim: lille lam kommer frem fra gemmested Trin 3: Event: Slut anim: lille lam kommer frem fra gemmested Start lyd: lille lam: Mor jeg sidder lige her. Slut lyd: lille lam: Mor jeg sidder lige her. Start lyd: Mor: Hvad er der dog sket? Slut lyd: Mor: Hvad er der dog sket? Start lyd: Lille lam: Det var den dumme vicevært der snød os. 15
Slut lyd: Lille lam: Det var den dumme vicevært der snød os. Nanna: Scene 12 Trin 1: Event: Siden vises Start anim: mor går ind i operationsstuen Start anim: lille får går ind i operationsstuen Slut anim: mor går ind i operationsstuen Trin 2: Event: Slut anim: lille får går ind i operationsstuen Start anim: ulvens mave bevæger sig Trin 3: Event: Slut anim: ulvens mave bevæger sig Start lyd: Mor: Er mine børn mon i live inde i viceværtens mave? Slut lyd: Mor: Er mine børn mon i live inde i viceværtens mave? Start lyd: Lille lam: Hvordan får vi dem ud? Slut lyd: Lille lam: Hvordan får vi dem ud? Start lyd: Mor: Lad os køre ham ind på operationsstuen. Trin 4: Event: Slut lyd: Mor: Lad os køre ham ind på operationsstuen. Start anim: alle objekter bevæger sig ud af scenen. 16
Pernille: Scene 13 Trin 1: Event: Siden vises. Start lyd: Jeg har en idé. Lad os åbne hans mund på vid gab. Animer: Mors mund. Trin 2: Event: Stop lyd: Jeg har en idé.. Stop animation: Mors mund. Trin 3: Event: Klik på mund. Start lyd: Hoste. Animer: Mund åbnes. Trin 4: Event: Stop lyd: Hoste. Trin 5: Event: Start lyd: Fjeder. Animer: Lammene hopper ud af ulvens mund. Trin 6: Event: 17
Stop lyd: Fjeder. Stop animation: Lammene hopper ud af ulvens mund. Trin 7: Event: Start lyd: Tag helium flasken, vi fylder viceværten op med helium. Animer: Mors mund. Trin 8: Event: Stop lyd: Tag helium flasken. Stop animation: Mund åbnes. Stop animation: Mors mund. Trin 9: Event: Start lyd: Helium lyd. Animer: Håndtaget drejes på heliumflasken og svæver. Stop lyd: Helium lyd. Stop animation: Håndtaget drejes på. Pernille: Scene 14 Trin 1: Event: Siden vises. Start lyd: Lad os hive ham ud og give ham en lærestreg. 18
Animer: Lammets mund. Trin 2: Event: Stop lyd: Lærestreg. Stop animation: Lammets mund. Start lyd: Jubel. Animer: Lam hopper. Animer: Lammene giver slip på ulven. Pernille: Scene 15 Trin 1: Event: Siden vises. Start lyd: Forbandede små lam. Animer: Ulvens mund. Animer: Ulven svæver opad. 19
Interaktive elementer Scene 9: I scene 9 skal ulven spise de 5 lam der er i rummet. Dette sker ved, at man skal finde lammene til ulven ved at klikke på dem, og derefter flyver de op til ulven og ulven spiser dem. Man kan først komme videre når man har fundet alle 5 lam. Html-kode: I html-koden har vi valgt at lave en lam(x)hitbox til alle lammene da deres billede skulle være bag andre objekter, men man skulle stadig kunne klikke på dem. Css-kode: 20
Man kan se at.lam2hitbox har samme position som.lam2 og.lam2ani er en class, der tilføjes, til.lam2, når man har trykket på.lam2hitbox. Js-kode: I javascripten har vi til start lavet en var spist = 0. Alle lammene har hver deres function, der kører når man klikker på deres tilsvarende.lam(x)hitbox. I deres function tilføjer vi class en lam(x)ani og når animationen er færdig tilføjes 1 til vores spist variabel. 21
Først når man har fundet alle 5 lam vil if sætningen sende os videre Scene 10: I scene 10 går ulven ud af venteværelset efter at have spist lammene. Samtidig med at ulven flyttes ind over scene skal der også kører en sprite hvori han snakker og går. Html-kode Vi vælger at lave en <div> udenom ulven. Dette gør vi for at kunne give ulven en spiteanimation samtidig med at vi flytter ham. 22
CSS-kode: I CSSen kan man se både vores spiteanimation (.ulvsnakker) og den animation som flytter ulven (.ulvflytani). 23
Js-kode: I javascripten kan man se at vi tilføjer class en.ulvsnakker, der er en spriteanimationen, til.ulv. Samtidig tilføjer vi også.ulvflytani til.ulvflyt, som er den udenom læggende <div>, og når den animation er færdig fjerner vi.ulvsnakker igen. 24
Brugertest Vi ønsker at teste målgruppens forståelse for vores interaktive fortælling og de elementer vi har gjort brug af. Herunder ønsker vi især at se om de kan finde rundt i historien om de ved hvor og hvornår de skal trykke. Vi var også interesserede i at høre deres mening om hhv. karakterer, lyde, stilart og om de havde andet input der kunne forbedre vores fortælling. Helt overordnet ønskede vi at vide om de finder vores fortælling interessant og altså ikke mister fokus eller bliver ukoncentrerede. Efter testen kan vi konkludere at vi skal tilføje flere klikbare elementer, ændre i lydkvaliteten i enkelte scener og herunder tilføje flere lyde samt lave små ændringer i ansigtsudtrykkene. Vi skal ydermere gøre klart hvor og hvornår der skal klikkes og fjerne navigationslinjen i bunden da den kan skabe forvirring. Vi vil også overveje om slutscenen skal ændres og have tilføjet noget yderligere animation og humor. Vi har derudover også konkluderet at børnene forstår de humoristiske elementer og kan genkende stilarten der er gjort brug af. Vi fandt også ud af at børnene er mere vant til at bruge en ipad end en computer i forhold til videreudvikling af produktet, men at de har kendskab til computerspil. 25