En hjärtkomponent till julbaket

Av:Gunnar Jutelius
E-Post:gunnarjutelius@hotmail.com


Guidad stadsvandring med Flash MX

Titta på det exempel som handledningen bygger på.
Ta hem vandring.zip med de filer du behöver för att börja öva med stöd av handledningen.
Titta på resultatet av övningen.

Snart kan vi gå runt med mobiltelefon med Internet och få reda på mera om den plats där vi hamnat. Redan nu går det bra att använda ljud på webben om du har bredband. Och finns det något roligare än ljud? En TV utan ljud är trasig!

Stockholms stadsmuseum och Mediecenter Stockholm har i dagarna utlyst en tävling i att göra guidade stadsvandringar på svenska och/eller ett annat språk. Vill du veta mera så gå in på stadsvandring.mediecenter.com.

Det här ska handla om hur du gör en stadsvandring med hjälp av Flash MX som har strömmande ljud vilket betyder att ljudet kan börja spelas upp innan hela ljudfilen har laddats ner från webbservern till webbläsaren. Du får också lära dig använda en inladdningsmätare så att det går att se och höra stadsvandringen över ett vanligt modem eller bredband utan att den stannar upp i väntan på att text, ljud och bild ska laddas ner.

skapa bild och ljud
Börja med att gå ut och fotografera – människorna, gatorna och husen. Prata med dem du möter. Forska lite i traktens historia. Tala sen in en berättelse till bilderna.

Du behöver ha ljudkort och ett ljudredigeringsprogram på datorn och en bra mikrofon med en "strumpa" på så att inga dånande "P"-ljud spelas in till ljudfilen. Spara ljudet som .wav eller .mp3.

Bilderna behöver du se till att få ut i digitalt format på kasett, CD eller nedladdningsbara från webben när du beställer framkallning och kopiering. Eller använd en digital kamera. Eller skanna in vad du ritat och målat så att du får du lite mer poetiska bilder än vad ett knäpp på kamerans avtryckare kan ge. En liten varning! Inskannade bilder och digitalfoton kan bli stora så du måste skala ner dem i ett grafikprogram till den storlek du tänker använda dig av på webben om inte dina besökare ska få vänta olidligt länge på att bilderna laddas ner.

ta hem vandring.zip och packa upp den
För att skapa en egen stadsvandring så börja med att ta hem och packa upp filen vandring.zip som du hittar på DIU:s webbplats. Efter att ha packat upp den så har du fått sex nya filer. För att du på egen hand ska kunna följa min handledning innan du har egna bilder och ljud så har jag lagt med bildfilerna - glasskiosk.jpg och korvkiosk.jpg - och ljudfilen - nyvandring.mp3.

Du hittar också filen vandring.html som är en webbsida som du kan öppna i din webbläsare. På sidan finns vandring.swf inlagd som är en komprimerad Flash-film för webben. För att den ska fungera måste du ha insticksprogrammet Flashplayern 6 som du kan hämta på www.macromedia.com/downloads. Där kan du också hämta en fullversion av Flash MX som du kan använda i 30 dagar.

Det första du får syn på i vandring.swf är en knapp. Klickar du den får du höra mig säga: Slottet - Stortorget samtidigt som bilder på Slottet och Stortorget i Gamla Stan dyker upp. Det är en väldigt kort vandring endast gjord för att det ska bli lätt för mig att förklara hur du ska kunna göra en egen vandring med massor av bild och ljud.

ta in ljud och lägg ut det på tidslinjen
Den sjätte filen du hittar heter vandring.fla. Den ska du använda när du gör din egen stadsvandring. Starta Flash MX och gå till Arkiv > Öppna för att leta reda på vandring.fla. Klickar du på ENTER-tangenten så spelas filmen upp. Du kan också dra i den röda markeringen ovanför tidslinjen för att lyssna till ljudet och se bilderna på Slottet och Stortorget dyka upp. Har du testat klart så gå till Arkiv > Spara som för att spara vandring.fla med ett annat namn. Jag sparade den som nyvandring.fla. För att slippa problem när du skickar in vad du gjort till en webbserver så använd i filnamnet bara små bokstäver och inga mellanslag eller svenska bokstäver.

Gå till Arkiv > Importera och leta reda på nyvandring.mp3 eller ditt eget ljud. Fönster > Bibliotek tar fram .fla-filens eget bibliotek där du hittar den importerade ljudfilen. Fönster > Egenskaper tar fram Egenskapsmenyn som du behöver för att lägga in det nya ljudet. Markera nyckelbildrutan på ruta 3 på Lager 1 och välj från en rullgardinsmeny den importerade ljudfilens namn. Under ljudfilens namn ska det stå Synk: Ström för att det ska gå att lägga in bilder i takt med ljudet.

Klicka sen knappen Redigera på Egenskapsmenyn för att få fram en ny meny där du kan välja att bara en viss bit av ljudet spelas upp eller se till att hela ljudfilen spelas upp genom att dra åt höger i knappen mellan höger- och vänsterljudkanal. Klickar du knappen med en filmremsa så får du reda på hur många rutor det behövs på tidslinjen för att spela upp ljudet. Ljudfilen nyvandring.mp3 behöver cirka 27 rutor. Klicka OK! för att komma tillbaka till scenen.

Högerklicka en ruta längre fram på tidslinjen för att på den meny som kommer fram välja Infoga bildruta. Om inte hela ljudfilen syns så scrolla dig framåt längs tidslinjen och infoga nya bildrutor. För att också den bild som finns på nyckelbildruta 14 på Lager 2 ska synas så högerklicka den ruta på Lager 2 som finns ovanför den sista rutan på Lager 1 med ljudet och välj Infoga bildruta.

 

ta in bilderna och placera dem på nyckelbildrutor längs tidslinjen
Gå till Arkiv > Importera och leta reda på dina egna bilder eller välj glasskiosk.jpg och korvkiosk.jpg. vandring.fla är gjord för att få plats på skärmen på en handdator. Behöver du göra scenen större för att dina bilder ska synas så gå till Ändra > Dokument och skriv in en ny bredd och höjd. Flash har som standard en scen med bredden 550 pixels och höjden 400 pixels som passar alla skärmar på stationära och bärbara datorer och också ger plats för webbläsarens menyer.

De importerade bilderna lägger sig på scenen. Fönster > Verktyg tar fram verktygsmenyn med ritverktyg för vektorbilder. PS. Det är mycket enkelt att skapa vektorbilder i Flash som du sen kan exportera till bitmapbilder genom att gå till Arkiv > Exportera bild. Bitmapbilder som fotografier och inscannade bilder går bra att importera till Flash men det går inte att redigera dem inne i Flash.

Använd den svarta pilmarkören på verktygsmenyn för att markera de importerade bilderna och klicka sen Delete-tangenten. Bilderna är borta från scenen men finns kvar i biblioteket som du tar fram genom att gå till. Fönster > Bibliotek.

Bilderna kan du dra ut från biblioteket till scenen. För att kunna placera en bild i höjd och sidled på scenen så behövs en nyckelbildruta. Vanliga bildrutor visar sen bara fram vad som finns på en tidigar nyckelbildruta. För att skapa nya nyckelbildrutor och ta bort gamla nyckelbildrutor så högerklicka en ruta och välj från den meny som kommer fram Infoga nyckelbildruta, Infoga tom nyckelbildruta eller Rensa nyckelbildruta.

För att du lättare ska kunna flytta runt bild och text också utanför scenen så se till att Visa > Arbetsyta är förbockat.

 

skapa en .swf-fil för att testa
Innan du testar så gå till Arkiv > Publiceringsinställningar. På fliken Format se till att Flash och HTML är förbockat. Välj sen fliken Flash för att ställla in den kvalitet/komprimering du vill ha på .jpg-bilder. För Ljudström bör du ange minst 24 kbps och Bäst. Tänk dock på att högre kvalitet på bild och ljud ger längre nedladdningstid. På fliken HTML finns en del inställningar att experimentera med. Sen OK!

För att all programmering ska fungera så behöver du gå till Kontroll > Testa film för att skapa en .swf-fil. Det är en komprimerad version av .fla-filen lämplig för webben. Du behöver ta reda på hur många bits som behöver laddas ner från webbservern i förväg innan stadsvandringen startar för att inte stadsvandringen ska stanna upp i väntan på att text, bild och ljud ska laddas ner från webbservern till webbläsaren.

Välj därför under Felsök den modemhastighet du anser dina besökare måste ha för att kunna se din stadsvandring. En modemhastighet på 56 kbps är normalt. Gå sen till Visa och bocka för Bandbreddsprofilering och du får fram ett stapeldiagram som visar hur text, bild och ljud kommer att laddas ner. Det som befinner sig ovanför den röda linjen på diagrammet kan ställa till med problem. Gå därför till Visa > Visa Strömning och du får se hur inladdningsmätaren laddar in ett antal bits i förväg. När mätaren kommer upp i 100 procent får du se och höra stadsvandringen.

Stannar den upp så behöver du se till att inladdningsmätaren laddar in flera bits i förväg. På raden under Inläst: 100% så hittar du det totala antalet bits som behöver laddas ner - i det här fallet 102729 B. Gå till Arkiv > Stäng och du kommer tillbaka till .fla-filen.

 

testa igen och publicera
Fönster > Åtgärder tar fram programmeringsmenyn. Det här med programmering kanske skrämmer en och annan men det finns ingen anledning till att vara rädd. Den programkod som du behöver hittar du under Åtgärder > Filmkontroll i den högra delen av programmeringsmenyn. De tre vanligaste kommandona brukar räcka långt: stop(), gotoAndPlay() och gotoAndStop(). Programmeringsfönstret har två lägen. Normalläge med hjälp och Expertläge som är lite lättare att skriva i.

Markera nyckelbildrutan med ett litet a på rua 1 på Lager 1. Nu står där bits = 100 000; Det totala antalet bits som behöver laddas ner är 102729 B. Det går alltså att välja ett lägre värde och låta de resterande bitarna laddas ner under uppspelningens gång. Ju lägre värde man väljer ju kortare blir väntetiden på att få se och höra något. Du kan testa med att skriva in bits=80000 OBS! Du får inte använda mellanslag i talet och semikolonet på slutet av raden behövs inte om satsen står på en egen rad.

Gå sen till Kontrol > Testa film och välja Visa > Visa Strömning för att se om det går att spela upp stadsvandringen utan att den stannar upp. När det fungerar så gå till Arkiv > Publicera och du får en .html-fil och en .swf-fil som du kan skicka in till en webbserver. Tyckte du det verkade svårt. Öva lite och du kan sätta igång och göra egna stadsvandringar eller presentera vilket ämne som helst med text, bild och ljud.

 

flashprogrammering en barnlek
För att se att programmering i Flash inte innebär några konstigheter, så klicka nyckelbildrutan med ett a på ruta 2 på Lager 1. Det enda som står där är stop(). Ett vanligt nybörjarfel är att man inte sätter stop() för Flash som då automatiskt spelar upp - utan all ände - vad som finns på tidslinjen.

Markera sen knappen på scenen på ruta 2. Den har tre rader med kod. on (release) { på första raden ser till att något händer när mustangenten släpps upp(eng. release). Krullparentesen på första raden har en motsvarande krullparentes } på rad 3. Allt som ska hända när knappen släpps upp måste finnas på rader mellan de två krullparenteserna. Nu finns bara rad 2 och det enda som står på raden är play(); för att ett klick på knappen ska få Flash att gå vidare till ruta 3 och spela upp det som finns längs tidslinjen. Knappen är en färdig knapp som jag hämtat från ett bibliotek som finns under Fönster > Vanliga bibliotek.
Om du väljer Normalläge innan du programmerar en knapp så slipper du tänka på vad du ska skriva. Då är det bara att klicka det kommando du vill att knappen ska få t.ex. play och de extra raderna som behövs skrivs in automatiskt.

Mer programmering än så här ska du inte behöva kunna så jag tror inte att du behöver vara rädd för experimentera lite med Flash och upptäcka en ny värld av rörlig bild och ljud som gör dig och dina elever glada - förenar nytta med nöje!

Vi ses och hörs på stan :=) Glade Gunnar



Datorn i Utbildningen nr 1 2003. Artiklar ur Datorn i Utbildningen är copyrightskyddade ©. De får användas för enskilt bruk. I övrigt får de enbart spridas efter överenskommelse med redaktionen. Vill du ha hela numret på papper, sänd en beställning via detta system!

[Åter till början av sidan]
[Åter till nr 1 - 03]

Datorn i Utbildningen, Frejgatan 32, 113 26 Stockholm
Uppdaterad: 030222