Thursday, 19 April 2012

Creating the exit game button

I found a way of exiting the games so the user returned to the site. I made a Exit Games button and added a instance name of btnUnload. Then I created a function, called unload SWF, whenever the button is Clicked. I then copied the loader variables from each game button so for instance the bolt jigsaw button as a loader of 5 as per code below:

boltjigsaw_button.addEventListener(
MouseEvent.CLICK, boltjigsawGame);



function boltjigsawGame(e:MouseEvent):void
{
var request5:URLRequest = new URLRequest("usainboltjigsaw.swf");
Jigsaw2Sound1.play();
loader5.load(request5);
loader5.x = 70;
loader5.y = 150;
loader5.scaleX = .7; // 1 is 100%; .5 is 50%, 2 is 200% and so on
loader5.scaleY = .7;
addChild(loader5);
}

and the other games are 4, 6 and 7 I added the loader variables so that the unloadSWF function can access them. Then for every loader there is a swf file that loads the games so for instance in the code above the swf is
("usainboltjigsaw.swf");. Then I added the function .load() and addChild() as you can see in the action script above which loads that particular game. Then finally to exit the games on the Exit Games button I added the following code so the user can exit the games when the button is pressed.

btnUnload.addEventListener(MouseEvent.CLICK,unloadSwf);

function unloadSwf(e:MouseEvent):void {
loader4.unload();
loader5.unload();
loader6.unload();
loader7.unload();
//loader.unloadAndStop();
}

So to exit the usain bolt jigsaw game I added loader5.unload(); to the function above and did the same for the other games but just changed the number to 4, 6 and 7.

Below is how it looks on screen so the game is open then when the user wants to exit the game they just click on the Exit Games button.

Making the games open in the same window as the website

One thing that popped up in the results of my user testing was people would like the games to open in the same window as the website. So I will see if I can find a way to do this. I looked for ways I could do this online and asked in flash forums and I got a reply from someone who told me how I could do it. They said all I need to do was add this code to my games and then they would open in the same window as the site.

This is the code they sent me:

var myLoader:Loader = new Loader(); // create a new instance of the Loader class
var url:URLRequest = new URLRequest("ExternalSWF.swf"); // in this case both SWFs are in the same folder
myLoader.load(url); // load the SWF file
addChild(myLoader); // add that instance to the display list, adding it to the Stage at 0,0

And this is how I added it to my games so for the usain bolt jigsaw this is how I used the action script I was given.

boltjigsaw_button.addEventListener(MouseEvent.CLICK, boltjigsawGame);



function boltjigsawGame(e:MouseEvent):void
{
var request5:URLRequest = new URLRequest("usainboltjigsaw.swf");
Jigsaw2Sound1.play();
loader5.load(request5);
loader5.x = 70;
loader5.y = 150;
loader5.scaleX = .7; // 1 is 100%; .5 is 50%, 2 is 200% and so on
loader5.scaleY = .7;
addChild(loader5);
}

So to load the game in the same window as the website I added the code this code

var request5:URLRequest = new URLRequest("usainboltjigsaw.swf");
loader5.load(request5);

Then I added the addChild code because this opens the movieclip/game on stage. So to make the usain bolt jigsaw open I added the following code:

addChild(loader5);

The loader5.x = 70; and loader5.y = 150; this is where the game will be placed on screen and the loader5.scaleX = .7; and loader5.scaleY = .7; is the scale of the game so this game is .7 = 70%. So if I wanted the game bigger 1 is 100% 2 is 200% and if I wanted it smaller .5 is 50%.

Once this code was added to all the games they opened in the same window as the website. However the only problem I had was I couldn't close the games down. So once again I asked people if they had a solution for this so I could close the games down and return to the site. I got a few answers back but none of them seemed to work apart from one which was to add a Exit Games button on the Games and Colour In pages. So this is what I did and it now works. So to exit the games the user clicks on the exit games button and this closes the games and returns them to the website.