Av: Gunnar Jutelius
E-Post: gunnar.jutelius@lector.kth.se

Skapa spelmiljö med
bild, rörelse och ljud

Gör ett eget lyckohjul. Komplett med startknapp, slumptal, bild och ljud. Gunnar Jutelius fortsätter att ge tips om hur man kan använda Flash.

Vilket programmeringsspråk ska vara första språk? De flesta programmeringsspråk är ganska lika. Flash använder sig av en variant av Javascript, som har lånat sin vokabulär från Java, som i sin tur har lånat sitt ordförråd och syntax från C och C++.

Fördelen med att använda Flash är att man väldigt enkelt kan skapa ett attraktivt gränssnitt. Andra programmeringsmiljöer brukar resultera i några torftiga knappar och textrutor för in- och utmatning. Så varför inte använda Flash som första språk? Då kan programmeringen bli något glädjefyllt som resulterar i en interaktiv webbsida med ljudande animationer redan under lektion 1.


slumpa fram ett tal
Att spela på lyckohjul har de flesta gjort någon gång – barn som vuxna. Det är slumpen som avgör om du blir vinnare eller förlorare. För att slumpa fram ett tal i Flash mellan 0 och 11 och sedan spara talet i en variabel döpt till vinstNummer så skriver man så här:
vinstNummer = random(12);

Jag började med att skapa en bild av spelståndet med innehavarinna med hjälp av Flashs ritverktyg. Jag döpte lagret med bilden till förgrund genom att gå till Modify>Layer.

Genom att gå till Insert>Layer fick jag ett nytt lager, på vilket jag kunde rita ett lyckohjul med tolv sektorer. För att kunna snurra på hjulet med hjälp av animationstypen Motion Tween gjorde jag hjulet till ett så kallat Movie Clip genom att markera hjulet och gå till Insert>Convert to Symbol och sätta ett namn – lyckohjul – på den nya symbolen.

Genom att högerklicka ruta 2 på lagret och välja Insert Keyframe fick jag den första nyckelrutan för hjulets rörelse. Genom att fortsätta göra nyckelrutor på rutorna 5, 9 och 13 så kunde jag snurra hjulet en tredjedel i taget. Genom att sedan högerklicka rutorna 2, 5 och 9 och välja Motion Tween fick jag Flash att själv räkna ut hjulets läge mellan nyckelrutorna. För att se till att hjulet stannade i ett av sina tolv vinstlägen skapade jag de tolv nyckelrutorna 14 till 25 och såg till att på varje nyckelruta ställa in hjulet i ett visst läge. För att lyckohjulet skulle hamna bakom innehavarinnan tog jag tag i lagret lyckohjul och drog det under lagret förgrund.


startknapp och ljud
Det behövdes en knapp för att sätta hjulet i rörelse. Jag skapade ett nytt lageroch drog ut en färdig knapp från Window> Common Libraries>Buttons. På lagret såg jag också till att skriva in texten ”Klicka på knappen för att spela!” För att slippa texten när hjulet snurrar skapade jag en nyckelruta på ruta 2 och ”deletade” texten. På ruta 14 skapade jag en nyckelruta och skrev in texten ”Klicka knappen för nytt spel.”

Jag startade sedan ett ljudinspelningsprogram och lät som en darrande fjäder. Försök själv. Det behövs lite övning! Jag sparade ljudfilen som lyckohjul.wav och gick till File>Import i Flash för att leta reda på den. Ljudfilen lade sig i biblioteket, som man hittar under Window>Library.

Jag skapade ett nytt lager och såg till att markera lagrets första ruta. Med Window>Panels>Sound kunde jag välja lyckohjul.wav och alternativ Start. Genom att gå till Edit kan man bestämma hur många rutor ljudet ska spelas upp på genom att dra i knappen mellan höger och vänster ljudkanal. Jag drog sedan nyckelrutan med ljudet till ruta 2 på tidsaxeln för att se till att ljudet inte startade förrän lyckohjulet kommit i rörelse.


programmera
Genom att dubbelklicka nyckelruta 1 på lagret lyckohjul får man fram programmeringsfönstret och får möjlighet att välja mellan Basic Actions, Actions, Operators, Functions, Properties och Objects. Genom att välja Basic Actions och dubbelklicka på Stop såg jag till att Flash till att börja med blev kvar på tidsaxelns ruta 1.

För att hålla reda på antalet varv lyckohjulet snurrade innan det stannade skapade jag en variabel ”antalVarvNu” och i den sparade jag talet 0. Har man programmerat lite är det enklast att välja Expert Mode genom att gå till pilen uppe i programmeringsfönstrets högra hörn och sedan skriva in: antalVarvNu = 0;

Annars kan man i Normal Mode gå till Actions och dubbelklicka set variable för att därefter fylla i Variable: antalVarvNu och Value: 0. För att 0:an ska betraktas som ett tal – som det går att räkna med – och inte som text ”0”, så får man se till att bocka för Expression.

Under Actions finns Trace som man använder för att få utskrift när man kör programmet med Control>Test Movie och på så vis kunna upptäcka eventuella fel. För att få utskriften begripligare har jag först skapat texten ”antalVarvNu” som jag med hjälp av add sätter ihop med värdet som finns lagrat i variabeln antalVarvNu.

Hela programmet på nyckelruta 1 på lagret lyckohjul ser ut så här:

stop ();
antalVarvNu = 0;
trace(”antalVarvNu: ” add antalVarvNu);

Knappen på ruta 1 behövde få ett program som satte fart på nyckelhjulet. Genom att högerklicka en knapp och välja Actions får man fram programmeringsfönstret för knappar. Jag gick till Basic Actions och dubbelklickade Play och knappen hade fått sitt program:

on(release){
Play(); }

Nu fattades endast programmet på nyckelruta 13 som skulle se till att lyckohjulet snurrade fem varv innan det gick till den ruta som jag såg till att slumpa fram med Random(12). Enklast är att gå till Expert Mode och skriva in programmet eller så kan man hålla till i Normal Mode och leta reda på vad man behöver för att försäkra sig om att man inte skriver fel. OBS! Javascript skiljer på små och stora bokstäver. Så här ser programmet ut med mina kommentarer:

antalVarvNu = antalVarvNu + 1;
trace (“antalVarvNu: “ add antalVarvNu);
if (antalVarvNu < 5) {
gotoAndPlay (2);
}
//raden ovan ser till att Flash hoppar tillbaka till ruta 2 för att snurra hjulet ett varv till.

else {
vinstNummer = random(12);
gotoAndStop (vinstNummer + 14);
//Eftersom random(12) slumpar fram ett tal mellan 0 och 11 behöver jag lägga till 14 för att Flash ska stanna på någon av rutorna 14 till 25 för att visa upp vinnande färg.

stopAllSounds (); }

Flashfilen sparade jag som lyckohjul.fla och gick sen till File>Publish och fick filerna lyckohjul.html och lyckohjul.swf som det går att skicka till en webbserver för att glädja alla ”speltokiga” människor jorden runt. För att spelandet på lyckohjulet ska bli fullständigt borde man kunna satsa på en viss färg innan man startar hjulet och det borde finnas vinster till den glade vinnaren.

Det går också att istället för att använda sig av tidsaxeln för att få hjulet att snurra och stanna på en viss färg använda sig endast av programmering. Jag återkommer med en mer en fullödig version – lektion två – i höstens första nummer och i väntan på det hoppas jag på en solig sommar med en del regniga dagar lämpliga för programmering.