Thursday, 22 March 2012

Adding sound to the site

I wanted to add sound to the navigation and buttons on the Venues and Games Pages on my website. I asked my friend James Hogarth who is a presenter on BBC Radio Humberside if he would record the voice overs for me and he he was more than happy to help. I wrote down a list of words I wanted James to read out and emailed them to him so he could record them for me. James recorded them for me and emailed me them back as separate Wav files because I read it is easier to use Wav files in flash than MP3 files. Once I received the files I read up how to import them into flash and then added them to the library. I then clicked on the Wav file in the library which opened up the Sound Properties window and I ticked the Export for ActionScript box in the Linkage part of the window. Then in the Class box I changed for instance homeSound.wav to just homeSound and then in the Compression drop down menu I changed it from default to Speech because I was using someone's voice. I then pressed ok and then added the following code to frame 1 of the actions layer on the Home Page.

stop();

var homeSound1:homeSound = new homeSound();

}

function onHomeClick(e:MouseEvent):void
{
gotoAndStop("Home");
homeSound1.play();
}
home_button.addEventListener(MouseEvent.CLICK, onHomeClick);

So the above code shows when the user clicks on the Home navigation the homeSound1 sound will play which is James's voice saying Home. I then did the same process for the Venues, Games and Colour In pages you can see below the full code.

stop();

var homeSound1:homeSound = new homeSound();
var venuesSound1:venuesSound = new venuesSound();
var gamesSound1:gamesSound = new gamesSound();
var colourinSound1:colourinSound = new colourinSound();

}

function onHomeClick(e:MouseEvent):void
{
gotoAndStop("Home");
homeSound1.play();
}
home_button.addEventListener(MouseEvent.CLICK, onHomeClick);

function onVenuesClick(e:MouseEvent):void
{
gotoAndStop("Venues");
venuesSound1.play();
}
venues_button.addEventListener(MouseEvent.CLICK, onVenuesClick);

function onGamesClick(e:MouseEvent):void
{
gotoAndStop("Games");
gamesSound1.play();
}
games_button.addEventListener(MouseEvent.CLICK, onGamesClick);

function onColourInClick(e:MouseEvent):void
{
gotoAndStop("ColourIn");
colourinSound1.play();
}
colourin_button.addEventListener(MouseEvent.CLICK, onColourInClick);

So with this code added to the navigation when the user clicked on the buttons James's voice would tell them what page they were on. I did the same process for the Venues buttons and Games buttons so when the user clicked on one of the images of the venues or games James's voice would tell them which venue that was or which game they had clicked on. The full code for the Venues is below:

stop();

var stadiumSound1:stadiumSound = new stadiumSound();
var aquacentreSound1:aquacentreSound = new aquacentreSound();
var basketballArenaSound1:basketballarenaSound = new basketballarenaSound();
var basketballSound1:basketballSound = new basketballSound();
var velodromeSound1:velodromeSound = new velodromeSound();




olympicstadium_button.addEventListener(MouseEvent.CLICK, onClick);

function onClick(e:MouseEvent):void {
gotoAndStop(1, "Scene 2");
stadiumSound1.play();
}
aquaticscentre_button.addEventListener(MouseEvent.CLICK, onScene3Click);

function onScene3Click(e:MouseEvent):void {
gotoAndStop(1, "Scene 3");
aquacentreSound1.play();
}

basketballarena_button.addEventListener(MouseEvent.CLICK, onScene5Click);

function onScene5Click(e:MouseEvent):void {
gotoAndStop(1, "Scene 5");
basketballArenaSound1.play();
}

velodrome_button.addEventListener(MouseEvent.CLICK, onScene4Click);

function onScene4Click(e:MouseEvent):void {
gotoAndStop(1, "Scene 4");
velodromeSound1.play();
}
function onNextbutton2Click(e:MouseEvent):void
{
gotoAndStop("Games");

}

And this is the code for the Games page:

stop();

var stadiumSound1:stadiumSound = new stadiumSound();
var aquacentreSound1:aquacentreSound = new aquacentreSound();
var basketballArenaSound1:basketballarenaSound = new basketballarenaSound();
var basketballSound1:basketballSound = new basketballSound();
var velodromeSound1:velodromeSound = new velodromeSound();




olympicstadium_button.addEventListener(MouseEvent.CLICK, onClick);

function onClick(e:MouseEvent):void {
gotoAndStop(1, "Scene 2");
stadiumSound1.play();
}
aquaticscentre_button.addEventListener(MouseEvent.CLICK, onScene3Click);

function onScene3Click(e:MouseEvent):void {
gotoAndStop(1, "Scene 3");
aquacentreSound1.play();
}

basketballarena_button.addEventListener(MouseEvent.CLICK, onScene5Click);

function onScene5Click(e:MouseEvent):void {
gotoAndStop(1, "Scene 5");
basketballArenaSound1.play();
}

velodrome_button.addEventListener(MouseEvent.CLICK, onScene4Click);

function onScene4Click(e:MouseEvent):void {
gotoAndStop(1, "Scene 4");
velodromeSound1.play();
}

Games Page

As with the Venues Page I revamped the Games Page. I took screenshots of the games and then put those images in four boxes like I had on the Venues Page. I then turned each of those images into buttons so when the user clicked on each of the images they would taken to that game. This was done by linking the swf file of each of the games to each of the buttons. So for instance the jigsaw1.swf file was linked to the jigsaw1 image and so on.


Games

I created four games to go on the games page two jigsaws and a quiz plus a word search. I found a tutorial which helped me create the word search because I wanted a word search on the site to help the children learn words associated with the Olympics. I found this pdf online for a book called ActionScript 3.0 Game Programming University by Gary Rosenzweig and followed his step by step tutorial on how to create a word search puzzle. I downloaded the source files from http://flashgameu.com and followed his tutorial to create my own word search puzzle for the website. below are screenshots of my word search puzzle.