Isabelle Haugan, Tomm Olsen og Pål Johnsen Blakstad 29. Mai 2009

HØGSKOLEN I OSLO Brukerveiledning Multimedial opplæring Isabelle Haugan, Tomm Olsen og Pål Johnsen Blakstad 29. Mai 2009

Forord Dette er en brukerveiledning som tar for seg bruken av Wink et program for opptak av skjermvideoer, Moyea SWF4Tube converter et program for konvertering fra SWF til FLV og JW FLV Media Player en videoavspiller for nett. Brukerveiledningen er laget for personer som interesserer seg for hvordan man lager skjermvideoer og hvordan man legger dem på nett. Forkunnskapene som kreves er at man har en grunnleggende kunnskap om Windows og funksjoner i Windowsprogrammer, om webprogrammering med HTML og JAVA, og om noe om Flash-filformater. Oppbyggingen av brukerveiledningen er bygd opp av en innledning med litt informasjon om programmene, deres funksjoner og hvordan installere og en veiledning med en gjennomgang av hvordan ta opp, redigere og legge videoene opp på nett med Wink, hvordan konvertere med Moyea SWF4Tube converter og hvordan legge videoene opp på nett med JW FLV Media Player. Til slutt ligger en oversikt over kilder og en ordliste med ordforklaringer. Side 2

Innhold Forord... 2 Innledning... 4 Wink... 4 Funksjoner... 4 Installasjon... 5 Moyea SWF4Tube converter... 5 Funksjoner... 5 Installasjon... 5 JW FLV Media Player... 6 Funksjoner... 6 Installasjon... 6 Veiledning... 6 Utvikle videoer med Wink... 6 Opptak... 6 Redigering av video... 13 Legge video på nett... 17 Endring av avspiller... 18 Gjøre klar videoen til konvertering i Wink... 18 Konvertering fra SWF til FLV med SWF4Tube converter... 20 Legge videoen på nett med JW FLV Media Player... 24 Vedlegg... 25 Nettsider... 25 Ordliste... 26 Side 3

Innledning Wink Wink er et program for å lage veiledninger og presentasjoner, hovedsakelig siktet på å lage veiledninger til hvordan man bruker programvare. Ved å bruke Wink kan man ta skjermbilder, legge til bokser med forklaringer, knapper, titler etc. for å generere veiledninger med forklaringer. Videoene man lager inneholder også musebevegelsene man gjør under innspilling. Wink bruker en standard Windows grensesnitt med drag-and-drop editering. Funksjoner Distributør - DebugMode Pris Freeware. Distribuert som gratis for personlig bruk og bruk i bedrifter. Plattform Tilgjengelig for Windows og Linux Audio Mulig å ta opp lyd og stemme mens man lager veiledninger for å forklare bedre. Inputformater Kan ta skjermbilder i BMB/JPG/PNG/TIFF/GIF-format. Outputformater Macromedia flash, EXE, PDF, postscrift, HTML og alle de overnevnte bildeformatene. Smarte opptaksverktøy Tar opp videoer automatisk når man bruker en PC, basert på input fra mus og tastatur. Ytelse/kvalitet Lager komprimerte Flash-presentasjoner Verktøy: o Navigasjonsknapper o Figurer og tekstbokser o Maler og mønstre o Editering av markøren o Paletter o Bakgrunnsbilde o Muligheter for komprimert og ukomprimert (for eksportering til andre flash-editorer) output Side 4

Installasjon Installasjonsprogramet, komprimert inn i en ZIP-fil, kan lastes ned fra Nettsiden til DebugMode: http://www.debugmode.com/wink/ De eneste valgene man trenger å gjøre under installasjonen er å velge samtykke til lisenskravene og velge hvor på harddisken programmet skal bli installert. Moyea SWF4Tube converter Moyea SWF4Tube converter er et verktøy for å konvertere SWF-filer til flashvideo formatfiler. Konverteren tilbyr også video og audio synkronisering, fjerning av frames og lydforvrengning. Man kan definere start- og stopptiden for SWF-filen før konvertering. Den genererte filen vil ikke ha hoppet over frames eller få dårligere lydkvalitet. Funksjoner Distributør Moyea Pris Spilleren koster rundt $60, men det er mulig å laste ned en trialversjon. Trialversjonen legger imidlertid til et vannmerke til filene man konverterer. Plattform Windows Verktøy: o Kan konvertere fra SWF til FLV o Kan konvertere fra SWF til MP4 o Støtter Actionscript o Støtter innspilt audio o Lar brukere påvirke Flash-innholdet under konvertering Installasjon Installasjonsprogrammet kan lastes ned på nettsiden til Moyea: http://www.moyeamedia.com/swf-to-flv/ Man kan velge å bruke enten betalingsversjonen eller trialversjonen. Bruker man trialversjonen trenger man bare å velge hvor programmet skal lastes ned. Velger man betalingsversjonen må man skrive inn en kode man får man får i e-post når man har betalt for programmet. Side 5

JW FLV Media Player JW FLV Media Player støtter all spilling av alle format som Adobe Flash Player støtter (FLV, MP4, AAC, JPG, PNG og GIF). Den støtter også RTMP, http, live streaming og forskjellige playlist-formater. Skinning funksjonaliteten dens gjør at man kan fullstendig endre utseendet etter eget ønske og plugin arkitekturen dens gjør at man kan utvide funksjonaliteten dens til å dekke deling, anbefalinger og søking. Funksjoner Distributør Longtail video Pris Gratis å laste ned for ikke-kommersielle aktører Plattform plattformuavhengig Verktøy: o Mange muligheter for utseende og funksjoner. En veiledning og liste over muligheter ligger tilgjengelig på nettsiden. Installasjon Installasjonen gjøres ved at man laster ned en ZIP-fil som inneholder diverse filer fra nettsiden til Longtail video: http://www.longtailvideo.com/players/jw-flv-player/ Filene ZIP-filen inneholder kan direkte legges på en nettserver og sammen med kode, også lett tilgjengelig på nettsiden, lagt i en HTML-fil kan videoer legges til og spilles av på domenet til nettserveren. Veiledning Utvikle videoer med Wink Opptak Når man starter opp Wink får man en standard Windows-verktøylinje over oppretting av nytt prosjekt, åpning av gamle prosjekter, lagring av prosjekt og en knapp for preferanser øverst på siden. Til høyre for dette finnes det en verktøylinje for undo, redo, sletting, klipping, kopiering og liming. For å starte et nytt prosjekt trykker man på knappen for nytt prosjekt. Side 6

Figur 1: Oppstartsvinduet til Wink Figur 2: Prosjektalternativer I verktøylinjen Når man har trykket på knappen for nytt prosjekt får man opp et nytt vindu med valg for lydinnspilling, opptaksområde og opptakshastigheten (frames/sec). Ved valg av opptaksområde kan man velge mellom flere ferdiginnstilte alternativer, som hele skjermen eller et valgt vindu, eller man kan selv velge et område på skjermen man vil ta opp på ved å velge custom. Når man har gjort sine valg trykker man på knappen merket med ok. Side 7

Figur 3: Vindu for altarnativer for opptak Når man har trykket ok, kommer det et nytt vindu med tastatursnarveier for opptaksfunksjoner. Det er mulig å minimere vinduet ved å trykke på knappen merket med Minimize to tray. Da vil dette vinduet forsvinne, men vil være mulig å åpne igjen ved å dobbelklikke på Wink-ikonet som vil ligge til høyre i oppgavelinjen i Windows. Side 8

Figur 4: Vindu for opptak med intruksjoner Figur 5: Wink-ikonet på oppgavelinjen til Windows For å ta skjermbilder trykker man på tasten markert som Pause på tastaturer. For å starte og stoppe opptak basert på tid trykker man på tasten markert som Shift, samt tasten markert med Pause. For å starte og stoppe opptak basert på input trykker man på tasten markert med Alt, samt tasten markert med Pause. Når man gjør opptak vil Wink-ikonet til høyre på oppgavelinjen i Windows endre seg fram til man stopper opptaket Figur 6: Wink-ikonet på oppgavelinjen til Windows under opptak Når man er ferdig med å ta opp vil vinduet med opptaksveiledningen vise hvor mange frames opptaket inneholder og knappen markert med Finish vil bli tilgjengelig til å trykke på. For å komme videre trykker man på Finish-knappen. Side 9

Figur 7: Vinduet for opptak med instruksjoner etter opptak Når man har tykket på Finish kommer man tilbake til startvinduet til Wink, men nå er settet med frames fra opptaket lagt til under verktøylinjen. En og en frame vil vises i full format, med resten liggende i lite format (thumbnail) under, nummerert i rekkefølge. For å skifte mellom forskjellige frames trykker man på det lille formatet av ønsket frame. Man kan også bruke verktøyet for skifting av frame i verktøylinjen. Side 10

Figur 8: Oppstartsvinduet til Wink etter opptak Figur 9: Skifting av frames i verktøylinjen Nå kan lønner det seg å lagre prosjektet. Etter at man har lagret kan man gjøre prosjektet om til flashvideo (render) ved å bruke knappen merket med en grønn pil til høyre på verktøylinjen. For å se hvordan videoen kommer til å se ut (view rendered output) trykker man på planetikonet til høyre på verktøylinjen. For å gjøre endringer i innstillingene for flashvideoene trykker man på knappen merket med et ark med en hake til høyre på verktøylinjen. Figur 10: Flashvideoalternativer i verktøylinjen Hvis man velger å endre på innstillingene for flashvideoene får man opp et nytt vindu der man kan velge navnet og plasseringen til flashvideoen, filtypen, endre eller fjerne preloader (opplasningsbilde) eller control bar (videoavspiller), endre frame hastigheten eller markørbevegelsen. Side 11

Figur 11: Vindu for innstillinger for flashvideo Figur 12: Flashvideo spilt av i Internet Explorer Side 12

Figur 13: preloader for flashvideo Redigering av video Wink har et utvalg av mulighet for redigering av frames i videoene. Redigeringsverktøyene ligger som en ramme på høyre side av oppstartsvinduet til Wink. Det er mulig å sette inn figurer, tekstbokser, lyd og bilder. Figur 14: Verktøy for redigering Side 13

For å sette inn figurer trykker man på ikonet med et rektangel og en sirkel på verktøylinjen. Da vil det åpne seg et nytt vindu der man kan velge mellom forskjellige typer figurer. Figuren vil dukke opp i den framen som blir vist i stor format når du velger figur. For endring av størrelsen eller plasseringen til figuren benytter man seg av drag-and-drop editering. For å skifte farge på figuren ligger det alternativer for dette sammen med resten av redigeringsverktøyene når figuren er valgt. Her ligger det også en knapp for å endre figuren etter at den er satt inn i prosjektet. Figur 15: Verktøylinje for redigering med knappen for figurer markert Figur 16: Vindu for innsetting av figurer Side 14

Figur 17: Figur satt inn i en frame For å sette inn tekst trykker man knappen markert med en snakkeboble med bokstavene abc på verktøylinjen. Da vil en tekstboks dukke opp i den framen som blir vist i stort format for øyeblikket. For å skrive inn tekst, trykker man bare på tekstboksen og begynner å skrive. Det finnes også flere tekstediteringsalternativer som ligger som en verktøylinje over tekstboksen når den er valgt. For å endre størrelse eller plassering benytter man seg av drag-and-drop. For å endre utseende på tekstboksen finnes det en knapp for dette, formet som en snakkeboble, sammen med resten av redigeringsverktøyene når tekstboksen er valgt. Her ligger også noen flere knapper for tekstredigeringsverktøy. Figur 18: Verktøylinje for redigering med knappen for tekstboks markert Side 15

Figur 19: Tekstboks satt inn i en frame Figur 20: Vindu for valg av utseende på tekstboks For å legge til lyd trykker man på knappen markert med en liten høyttaler på verktøylinjen. Da vil et nytt vindu med alternativer for lydinnspilling åpne seg. For å ta opp lyd trykker man på ikonet i form Side 16

av en rød sirkel og da vil opptaket starte. For å stoppe med å ta opp trykker man på det svarte rektangelet. Før å høre på opptaket trykker man på triangelen. Det er også mulig å laste inn ferdige innspillinger. Figur 21: Verktøylinje for redigering med knappen for lyd markert Figur 22: Vindu for innspilling av lyd Det er mulig å sette inn bilder, lenker og lenker mellom frames ved å benytte de andre knappene på redigeringsverktøylinjen. Legge video på nett Når man velger knappen render vil Wink automatisk generere en fil for HTM, JAVA og SWF (selve videofila). For å legge videoen ut på nett er det i hovedsak bare å legge disse filene på www-området på en nettserver. Men hvis man har flere videoer kan det lønne seg å gjøre noen endringer i koden i HTM-fila, filen for JAVA og SWF kan man la være som de er. Her er den genererte HTM-koden for Wink-prosjektet test: <!-- saved from url=(0014)about:internet --> <HTML> <BODY> <center><object CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="998" HEIGHT="648" CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=7,0, 0,0"> <PARAM NAME=movie VALUE="test.swf"> <PARAM NAME=play VALUE=true> <PARAM NAME=loop VALUE=false> <PARAM NAME=wmode VALUE=transparent> <PARAM NAME=quality VALUE=low> <EMBED SRC="test.swf" WIDTH=998 HEIGHT=648 quality=low loop=false wmode=transparent TYPE="application/x-shockwave-flash" Side 17

PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod _Version=ShockwaveFlash"> </EMBED> </OBJECT></center> <SCRIPT src='test.js'></script> </BODY> </HTML> Siden alle filene for JAVA genrerert av WINK har samme innhold kan, det ved mange videoer, lønne seg å bare benytte seg av en fil for JAVA. Man kan da velge å beholde en av filene for JAVA og slette resten. Man må da endre filen for JAVA som koden i de andre HTM-filene linker til. Kodelinjen som linker til Java-filen ser slik ut: <SCRIPT src='test.js'></script> Hvis det blir mange videoer lønner det seg også å legge SWF-filene i en egen mappe for å holde bedre orden. For at HTM-fila skal linke til filen må man endre stien til dem på to steder i koden. De to linjene kan for eksempel endres til å se ut slik: <PARAM NAME=movie VALUE="videoer/test.swf"> Og slik: <EMBED SRC="videoer/test.swf" WIDTH=998 HEIGHT=648 quality=low loop=false wmode=transparent TYPE="application/x-shockwave-flash" Hvis man vil endre størrelsen på bilde på videoen kan man endre verdiene for WIDTH og HEIGHT i denne linjen: <EMBED SRC="videoer/test.swf" WIDTH=998 HEIGHT=648 quality=low loop=false wmode=transparent TYPE="application/x-shockwave-flash" Våre erfaringer er at bildet i videoene blir noe fordreid ved endringer av bildestørrelsen siden SWFfilen er komprimert. Endring av avspiller De er flere måter å endre avspilleren til videoene på. En måte er å legge til en ny avspiller ved hjelp av JAVA. En annen er å legge den til direkte i filen med FLASH. Her vil vi ta for oss hvordan man kan legge JW FLV Media Player til videoer laget i Wink. For å gjøre dette må man skifte formatet på videofilene fra SWF til FLV. Dette kan gjøres med konverteringsprogrammet Moyea SWF4Tube converter. Gjøre klar videoen til konvertering i Wink For å gjøre videofilen klar til konvertering må man gjøre noen endringer i innstillingene for videoene i Wink. Knappen for innstillinger finner man i verktøylinja øverst på startvinduet i Wink. Side 18

Figur 23: Verktøy for video med innstillinger markert Når man trykker på denne knappen åpner det seg et vindu for innstillinger opp. Først kan man fjerne haken for preloader (opplasningsbilde) og control bar (avspiller). I nedrekkslisten for output file type (filtype) velger man uncompressed macromedia flash (*.swf). Så trykker man ok og velger render fra verktøylinja for å gjøre prosjektet om til video. Figur 24: Innstillinger for video Figur 25: Instillinger for video med nedtrkkslista for output file type åpen Når dette er gjort vil SWF-filen man laget ligge klar til konvertering til FLV Side 19

Konvertering fra SWF til FLV med SWF4Tube converter For å konvertere SWF-filen til FLV-format kan man bruke konverteringsprogrammet Moyea SWF4Tube converter. For å velge input-fil velger man browse (bla igjennom) Figur 26: Åpningvinduet for Moyea SWF4Tube Converter Da vil man få en oversikt over filer og mapper i Window. Man må så finne fram til den mappen filene man vil konvertere ligger. Man vil da få en oversikt over alle videofilene i denne mappen med en forhåndsvisning på den fila man har markert. Når man har valgt ønsket fil trykker man på ok. Side 20

Figur 27: Vindu ved valg av videofil Da vil man få opp en oversikt over filens egenskaper, samt en forhåndsvisning. Hvis man vil velge filtype, kvalitet og plassering av den konverterte fila velger man knappen for export (eksport) øverst i vinduet. Vil man begynne å konvertere filen til FLV trykker man på knappen for convert (konvertere) øverst i vinduet. Side 21

Figur 28: Moyea SWF4Tube Converter med en videofil valgt Side 22

Figur 29: Innstillinger for export i Moyea SWF4Tube Converter Når man trykker på convert vil man få opp et nytt vindu med forhåndsvisning av videoen, med en linje med knapper under. Denne linjen vil inneholde følgende knapper: Option to opsjoner, performance testing og stopped frame Play and capture Spiller av videoen samtidig med at man tar den opp Stop movie stopper avspillingen Stop capture Stopper opptaket Snapshot Tar et skjermbilde Finish Starter den endelige konverteringen Nederst i venstre hjørne kan man se hvor lang tid videoen varer og hvor mange frames den inneholder. For kun å konvertere innholdet i videofilen man har valgt, velger man play and capture og velger finish når videoen er ferdigspilt. Det er viktig å enten trykke på stop capture eller finish når videoen er ferdig med å spille, hvis man ikke vil legge til ekstra sekunder med det siste bilde i den konverterte fila. Når man har trykket finish vil videoen bli konverter til FLV og når konverteringen er ferdig vil man få opp et vindu som sier fra. Den konverterte filen vil legge seg i den mappen man valgte i innstillingene for export. Side 23

Figur 30: Vindu for konvertering i Moyea SWF4Tube Converter Figur 31:Tilbakemelding ved ferdig konvertering i Moyea SWF4Tube Converter Nå vil filen være klar til å legges på nett med JW FLV Media Player. Legge videoen på nett med JW FLV Media Player For å legge til den nye avspilleren til videoen må man først gå til hjemmesiden til JW FLV Media Player og laste ned selve avspilleren, en JAVA-fil og diverse andre filer. Man må også hente koden man skal legge in i HTML-fila. Denne ligger også lett tilgjengelig på nettsiden og ser slik ut: Side 24

<p id='preview'>the player will show in this paragraph</p> <script type='text/javascript' src='swfobject.js'></script> <script type='text/javascript'> var s1 = new SWFObject('player.swf','player','400','300','9'); s1.addparam('allowfullscreen','true'); s1.addparam('allowscriptaccess','always'); s1.addparam('flashvars','file=video.flv'); s1.write('preview'); </script> For å endre videofilen går man inn og endrer file i denne kodelinjen: s1.addparam('flashvars','file=video.flv'); For å endre størrelsen på bilde til videoen går man inn og endrer verdiene i denne linjen: var s1 = new SWFObject('player.swf','player','400','300','9'); Her ligger også linken til selve avspilleren, som er en SWF-fil. Man bør sjekke om den har samme navn som den man lastet ned fra nettsiden. Denne filen må også ligge på samme side som HTML-fila for at videoen skal kunne spilles av. Det er mulig å gjøre modifikasjoner på spillerens utseende og funksjoner. Disse modifikasjonene kan man selv gjøre ved å endre koden i filene. En veiledning og en oversikt over muligheter ligger tilgjengelig på nettsiden til JW FLV Media Player. Vedlegg Nettsider Url Forfatter År Beskrivelse http://www.debugmode.com/wink/ - - Nettsiden til DebugMode, distributøren av Wink http://www.moyeamedia.com/swf-to-flv/ - - Nettsiden til Moyea, distributøren av Moyea SWF4Tube converter http://www.longtailvideo.com/players/jw-flvplayer/ - - Nettsiden til Longtail Video, distibutøren av JW FLV Media Side 25

Player http://no.wikipedia.org/wiki/hovedside - - Nett-encyklopedi som skrives av frivillige bidragsgivere fra hele verden norsk versjon http://en.wikipedia.org/wiki/main_page - - Nett-encyklopedi som skrives av frivillige bidragsgivere fra hele verden engelsk versjon Ordliste AAC Advanced Audio Coding filformat for digitalt komprimert lyd Alt Tastaturtast som normalt ligger til venstre for mellomromstasten Drag-and-drop Vanlig Windowsfunksjon, der man kan flytte objekter ved å trykke på den og dra dem til ønsket posisjon eller strekke bilder sånn at de blir større Flash Kan referere til avspilleren av Flash eller til programeringsspråket til innholde som Flash-avspilleren spiller av. En Flash-fil er gjenre et lite program (animasjon,spill eller avspiller) som laster samtidig ned og viser en video- eller lydsnutt, ofte på nett. FLV Flash Video filformat brukt til å levere video via Internett Frame Enkeltbilde i en video Freeware Gratis programvare GIF Graphics Interchange Format billedformat som også kan inneholde bevegelse Input Informasjon sendt inn. HTML HyperText Markup Language programeringsspråk for formatering av nettsider med tekst og annen informasjon som kan vises i en nettleser JAVA programeringsspråk for å tilføre dynamiske elementer til en nettside JPG Forkortelse for JPEG Kraftig komprimert billedformat Komprimering Minsking av datastørrelse, gjerne ved å fjerne repeterende informasjon MP4 MPEG4 Format for digital audio og video for streaming på nett Output Informasjon sendt ut Pause også kalt Pause/Break tastaturtast med varierende plassering, men gjerne plassert på den øverste linjen av taster til høyre Playlist Liste med flere audio- eller videoelementer som en avspiller skal spille Plattform Kan være operativsystem (Windows, Linux etc.) eller type maskin (PC, Mac etc.) Side 26

Plugin programvareutvidelse eller tilleggsmodul utviklet for å tilby ekstra funksjonalitet PNG Portable Network Graphics billedformat uten kvalitetstap Preloader Nedlastningsoversikt som viser hvor lang man er i nedlastningsprosessen Render En prosess for å generere et bilde ut ifra en modell ved hjelp av et dataprogram RTMP - Real Time Messaging Protocol protokoll for streaming av audio, video og data mellom en Flash-spiller og en server Screencast Et digitalt opptak fra en dataskjerm Shift To tastaturtaster som ligger helt til høyre og venstre for bokstavene Skinning Skin er gjerne utseende på et program. Skinning blir da å skifte og forandre på utseende på programmer Streaming nedlastning (en-til-en) av data, bilder eller lyd fra en sender til en mottaker SWF Small Web Format Filformat som inneholder multimedia eller grafikk Thumbnail En versjon av et bilde med redusert størrelse Trialversion En prøveversjon av et program, som slettes eller blir ubrukelig etter enn viss tid eller et visst antall bruk. Side 27