3. semester – et klart overblik

Alle formodes at kunne finde vej gennem denne labyrint.

Overblik over 3. semester.

Efter læsning af Nancy Bayms tekst om sociale medier som kommunikationskanaler mediterede jeg lidt over kommunikationskanaler og aktører på 3. semester.

Modellen viser, at der en studerende skal have mange bolde i luften – og det skal undervisere og koordinatorer også.

Lærerteamets kommunikationskanaler

Kommunikationskanalerne er en kombination af sociale medier og læringsplatformen Fronter. En klasse har en ekstrem anvendelse af Fronter: hvis der er en nyhed har klassen udvalgt en læser, der distribuerer en besked ud til resten af klassen via Facebook gruppen.

Facebook er det foretrukne kommunikationsmedie. Kort tid efter at en besked ligger på Fronter har de fleste læst den. Vi har tilsyneladende en officiel kommunikationskanal, der ikke bruges så meget som den uofficielle.

Kommunikationskanaler i min undervisning

Som underviser i interaktionsfaget har jeg valgt en kombination af kommunikationskanaler:

  • Facebook – beskedder, som hurtigt skal læses samt sociale initiativer (studierejse mv.)
  • Fronter – officielle informationer, eksamen og aflevering af opgaver, som regel med en aflevering af dagens arbejde efter hver lektion.
  • Github – kodeeksempler ligger her. Vi underviser ikke i Git; men der er en pædagogisk pointe i at arbejde med sikkerhedskopi og versionering i en professionel ramme.

 

Refleksion: Corona Dag II

Refleksion over undervisningen 20140403:

I faget interaktion bruges Corona SDK til udvikling af mobile apps. Via Corona SDK kan vi udvikle apps til fx:

  • Android
  • iOs (= iPhone, iPad)
  • Kindle
  • Ouya

Corona SDK består af en device-emulator, der på udviklerens PC viser et skæmbillede af, hvordan appen vil se ud på en mobil enhed. Programmeringen foregår via Coronas API, der skrives i Lua. Koden compiles i skyen, og resultatet sendes tilbage til programmørens PC i form af en fil.

Hvis der er tale om en Android telefon, så returneres en .apk fil.

Dag II var interessant, fordi den ikke gik helt som forventet. Inden undervisningens start annoncerede jeg dagens lektie på Facebook. I løbet af forrige semester udførte jeg research i Corona. En bog så lovende ud:

Lektie annonceres på Facebook

Lektie annonceres på Facebook

Umiddelbart så koden lovende ud. Programmøren præsenterede et puslespil. Det lignede gefundenes Fressen. Men i løbet af weekenden ville jeg lige afprøve øvelsen, for at se, hvordan dagen skulle tilrettelægges tidsmæssigt.

Som regel bruger studerende længere tid på en øvelse end jeg selv ville gøre. Det viste sig desværre, at teksten ikke kunne holde det den lovede. Uanset hvilken mobil device jeg valgte i emulatoren var resultatet det samme: indholdet viste sig ikke på skærmen. Der var sære fejlmeddelelser. Og jeg kom til at bruge ca. 4 timer en søndag med debugging af en anden mands ikkefungerende kode.

O … K … hvad gør man så?

Jeg havde allerede bygget nogle pædagogiske prototyper, der eksperimenterede med Coronas Physics Engine:

  • SceneAndButton - et eksempel på en kode, hvor kasser falder ned, og hopper som gummibolde, når de rammer “jorden” (en grøn firkant), et tilfældigt placeret kvadrat eller en grøn cirkel, som brugeren kan trække rundt med (drag & drop).
  • Storyboard – hvor man ved hjælp af et klik skifter scenen ud.

Men min målgruppe er multimediedesignere. Jeg holder selv meget af koder, der får kasser til at hoppe rundt – eller at skabe sære geometriske mønstre ved hjælp af loops. I løbet af weekenden slog det mig, at det nok var bedre at arbejde med en lille animation, som brugeren kan styre ved hjælp af knapper eller kode.

En app med sprites

En app med sprites

Appen er i princippet meget simpel. To figurer myldrer ned over skærmen. En knap gør opmærksom på at man kan klikke dér. Når man klikker, så løber en sprite hen over skærmen.

Det var min opfattelse, at denne kode nok var lidt for enkel til seks lektioner; men omvendt så kunne jeg supplere med de to foregående kodeeksempler.

Jeg præsenterede spritesheets, der både anvendes i animation på mobile devices. Jeg brugte eventyret om Rapunzel, (Klokkeblomst) som udgangspunkt.

Eventyret kan animeres sådan:

  1. Scene: Helten står ved slottets fod. Brugeren ser de lange fletninger, der udgår fra prinsessen højt oppe i tårnet. Jeg tegnede dette på tavlen (i en bevidst grov skitseform).
  2. Brugeren klikker på fletningerne, der er en knap.
  3. Knappen fyrer en animation af ved hjælp af en eventlistener, der reagerer på en berøring (touch). Når touch = true afspilles …
  4. animaitonen af prinsen som klatrer op ad fletningerne og ind til den søde prinsesse ved hjælp af Coronas API transition.to

Eventyret er et visuelt eksempel på, hvordan knapper fungerer i computerspil. Og dermed har vi forbindelsen til årets semestercase, der handler om serious games eller gamification. (Emnet er i øvrigt et kompromis mellem to undervisere, der er tilknyttet projekterne “serious games” og “gamification”.)

Plan og successudfaldsrum

Som altid indledte jeg timen med en beskrivelse af dagens program – og en introducerende snak om det som vi skulle lave i dag. Successkriteriet (eller rettere: det didaktiske læringsmål) var at den studerende skulle kunne udvikle et spritesheet og skrive en kode, der kunne afvikle spritesheetet inden vi gik hjem den dag.

Et spritesheet kan principielt tegnes på flere måder:

  • Man kan åbne et tegneprogram (fx Gimp, Inkscape, Photoshop eller Illustrator). En fil på fx 2048×2048 inddeles i ensartede fliser ved hjælp af linealer. Herefter tegnes de ønskede figurer animationens positurer.
  • Man kan tegne i hånden og indscanne billederne. En enkelt studerende valgte denne fremgangsmåde. Jeg foreslog, at han kunne vektorisere sine tegninger i Illustrator og arbejde videre i Flash.
  • Animationen kan udvikles i flash – og herfra kan man eksportere et spritesheet. Teknikken beskrives i en kort artikel af Avinash.

Fremstilling af spritesheets

Klokken var nu 10. Klassen mente, at de ville kunne have et spritesheet klar på en times tid. Tegning tager altid længere tid end man regner med. 11:30 havde de fleste studerende produceret spritesheets.

Flere studerende havde ikke brugt Flash siden introduktionen på 1. semester. Det er således  ikke mærkeligt, at viden om Flash var lidt rusten. Derfor skulle der bruges mere energi på at forklare, hvordan man animerer i Flash end jeg havde forventet. I næste iteration vil jeg derfor tilføje afsnit om animation i Flash – og hvordan man arbejder med symbolerne library.

 

Underviserens spritesheet

Underviserens spritesheet – Flash er ikke god til at komprimere filen; men resultatet kan bruges.

Efter frokostpausen kunne vi prøve at animere vores spritesheets. Der skulle kæmpes lidt med Coronakoden, der ikke opførte sig som forventet. Jeg havde en ide om at man kunne nøjes med koden i main.lua – og glemte at konfigurationsfilen var vigtig.

Her skal det siges at klassen var meget tålmodig. De kæmpede for at få koden til at virke. Det lykkedes ikke for alle; men jeg vil gætt på at ca. halvdelen fik liv i deres sprite.

Facebook efter lektionen

Derfor valgte jeg at give en antydning af en løsning på Facebook.

Facebppl - ide til en løsning på dagens problem

Facebppk – ide til en løsning på dagens problem

Eksemplet viser noget om blogs og sociale mediers styrke i undervisningen. Bloggen og dens kodeeksempler kan anvendes af de studerende efter at lektionen er afsluttet.

Lektoranmodningen

Lektoranmodningens indhold i følge bekendtgørelsen

Lektoranmodningens indhold i følge bekendtgørelsen

I følge “Bekendtgørelse om lektorkvalificering, lektorbedømmelse og docentbedømmelse af undervisere ved erhvervsakademier,
professionshøjskoler og Danmarks Medie og
Journalisthøjskole” bilag 1 skal lektoranmodningen bestå af tre hovedafsnit:

  • A) Tilrettelæggelse af erhvervs- eller professionsrettet samt udviklingsbaseret undervisning.
  • B) Innovativt arbejde med institutionens udviklingsopgaver samt forsknings- og udviklingsaktiviteter.
  • C) Inddrage relevant international forskning og/eller internationale udviklingstendenser inden for erhvervet eller professionen i arbejdet.

Der kan dispenseres fra visse krav under B.

Png Sprite Sheet (Image Magick)

Jeg skal til at udvikle spil som apps i Corona. Her får jeg brug for animationer. I Corona animeres via såkaldte spritesheets; men hvordan laver man dem?

Der findes en række programmer, som automatisk kan fremstille spritesheets. I Adobe Flash kan animationer fx eksporteres som sprite sheets.

Jeg har en teori om at man kan gøre det samme via Image Magicks kommando montage. Det viste sig at være rigtigt – og meget enkelt.

  1. Lav nogen tegninger,  der hver er en tegning i en animation. Tegningerne i denne demo er tegnet på en Bamboo i Photoshop. Illustrator eller Inkscape havde været et bedre valg, eftersom det er lettere at flytte vektorer.
  2. Gem dem som fx monster1.png, monster2.png etc. – filerne skal have samme størrelse fx 140 x 140px – eller hvad der nu er passende.

Brug montage ca. sådan:

# montage monster{1,2,3,4}.png -background transparent monsterDance2.png

 

Per Thykjær Jensen (MA: IT, interaktionsdesign & multimedie).