Module Evaluation

Problem Solving & Methods of Working:

During this project I came across a number of problems which some I was able to solve but some are still yet to be solved.

The first main problem I had was the actionscript used for the drag and drop function so the user could move the stickers around. The actionscript that was going to be used originally was going to be placed on the layer of each sticker and just changing the instance name. See Blog Post. The problem with this actionscript is that because the stickers are within the sticker book movieclip, the stickers move up and down when the sticker book is opened and closed so I needed to find a way of making the sticker come out of the sticker book movie clip when it is released. I did this by making the sticker, that is dragged from the movieclip, move to -1000000 on the y axis and attaching the same sticker movieclip when the mouse is released so the user can't tell its a different movieclip but this way the stickers don't move when the sticker book does. See Blog Post.

When the sticker book is closed there is a tab with a movieclip on it with text that says 'Sticker Book' inside it. When the user clicks on this, the sticker book opens and then the user can still see the sticker book text but above this they can now see another movieclip with text that says 'Close' inside it so when the user clicks on this is closes the sticker book. I wanted to make it so when the user clicked on the sticker book text it changed to close and when they clicked on close it would change back to sticker book. I tried finding out ways I could do this and I did try a number of different pieces of actionscript but I couldn't get any to work therefore this still has to be solved.

Another problem I had was making the print button work on the postcard page and this is a problem that still has to be solved. I created a movieclip with the text 'Print' inside it and placed it on the postcard page and because I have never created a print button in flash before, I looked for tutorials on the internet and looked in flash books. I found a number of different pieces of actionscript that used the print function but I couldn't get a lot of them to work. I found some actionscript that worked when I placed it on the print button and when I previewed the movie in flash and pressed the print button, it printed the postcard exactly as I wanted it to. The problem is, when I uploaded the game to the internet and previewed the game in the browser, the print button worked as it did print something but it wasn't the postcard like it was when previewing it in flash and instead it just printed out a blue page. I looked on the internet again to try find a way to fix this but failed therefore this is something that needs a bit more time to be able to solve. See Blog Post.

I wanted to make the game so the user could go to the next level after collecting all the stickers, which I managed to achieve, but I also wanted the game to allow the user to go back to a previous level and view what they had collected. I had a real problem with this because everytime I tried to make it work, when it came to testing it, instead of taking the user to the previous level and showing they had answered all the questions and showing all the stickers they had collected in the places that the user put them, it just took the user back to the previous level but with no stickers available so the user had to answer all the questions again. Because I was running out of time at this point, I decided to leave it and maybe go back to it if I had time at the end.

How the Product Works:

This game has been created using flash and works by different pieces of actionscript being placed on objects on different layers within different timelines to tell the movie what to do when the user does a certain thing. To play the game the user basically has to enter the game and click on the questions and answer them correctly in order to unlock a sticker which can then be dragged from the sticker book and onto the island. When all the questions have been answered correctly on all the levels, the user wins a postcard at the end which can then be printed pressing the print button. The print button works because of the actionscript that has been placed onto the print button movieclip.

Testing & Feedback:

I did some user testing but because I was so late in finishing my flash game, I found it difficult to find children aged between 6 and 8 years old to test it. Therefore I asked a few people that were a bit older to see what feedback I got from them. The questions I asked for my user testing were originally aimed at the target audience, children, so the answers I got back from older people might be slightly different because the game will be easier for them to play. The questions I asked were:

1. Did you find it easy to start the game?
2. Did you know how to open and close the sticker book?
3. Did you find the questions easy or hard?
4. Did you know how to move the stickers around on the page?
5. Did you know how to get to the next level?
6. Did you like the background music?
7. At the end of the game did you find it easy to get to your postcard?
8. Did you like the game?
9. Did you think the game was fun?
10. Did you understand how to play the game?
11. Was the writing easy to read?
12. Did you get stuck at any time?
13. What was your favourite bit of the game? Why?
14. How could the game be improved?

From the people I asked they all said they really enjoyed playing the game and they knew how to do certain things on the game such as opening and closing the sticker book, moving to the next level etc. The all commented on the music saying that it was good and appropriate for each level and one person said that the sound effects added atmosphere to the game. The things people liked the most about the game included the sound effects on each level and the fact they received stickers as a reward of getting questions correct. One person also commented on the design saying that the design and the images appeal to the right age group. When asked what could be improved on the game, I received some helpful feedback. Some of the people asked were a bit confused when entering the first level as it took them a while to figure out how to get to the first question. Their suggestion was maybe putting an arrow above question 1 that says 'Click here' or something along those lines. They also said a variety of questions would have been more fun and interesting and also more imagery is needed on the underwater level to indicate that they are underwater.

Although I am disappointed I couldn't get any feedback from the target audience, I am pleased with the feedback I got and I think this feedback would help me to improve my game by making it more understandable and more fun and interesting for the user.

Evaluation & Appraisal:

I am pleased with how my self initiated went and I feel like I have learnt a lot from doing this. Although I learnt a lot from this project, I have found it challenging and I haven't been able to do everything I originally proposed at the start of the project. I was originally going to have a number of different questions for each question number and when the user clicked on the button it would randomly pick and display a question so they could play it more than once without getting the same questions so it makes it more fun. As I started to run out of time, I decided to just have one question for each question number. I also wanted to make it so the postcard at the end would display the islands that the user actually created (showing the stickers in exactly the same place as the user placed them on the screen) and having the option to print the page and also send the postcard to some one they know by entering the person's email address. This is the first time I have used actionscript other than gotoAndPlay() etc, so I did find it quite difficult but I enjoyed learning it and trying different pieces of actionscript until a certain thing worked as I wanted it to.

There are a lot of improvements that I could make to this project. I would like to improve the questions on each level so that there are a number of different questions for each one and they are randomly picked when the user clicks on a question so the user would get a different question everytime they played the game so they wouldn't get bored. Another thing I planned to do but didn't have time to do was making it so the user could go back to the last level. I have only made it so the user can go to the next level and I did try making it so the user could go back to the last level but it displayed the level with none of the questions answered and the user had to unlock all the stickers again. If I had more time I would have research this and tried to find a solution. I think to make the game better and more interesting and fun for the user, some of the objects could have been animated e.g. the clouds moving across the sky, or the sea moving (little waves), and even the eyes moving on the characters I created. Another thing that would have been good to put on the game are control buttons for the music such as play, stop pause. This would have given the user a choice whether they wanted to listen to the music or not where as at the moment they don't have a choice as the music is always on unless they turn the sound off on their computer. From the user testing I have found out other ways to improve the game also. One of these has already been mentioned above and this was to include a variety of questions so the user doesn't get bored. Another way to improve it was to make it more clear where the user has to click to get to the first question. The last thing the users that were testing the game suggested was to use more imagery on the underwater level because they felt that there wasn't enough when entering the game to indicate that they were underwater.

Overall I am pleased with how this project has gone and although there is a lot of room for improvement, a lot has been learnt during this project and I do feel a lot more confident using flash than I did at the start of the project.

Game

Click here to view game

Adding Music to a Level

On each of the levels I have added background music which is appropriate for each level. To add music to the level I created a new layer on the main timeline and named it 'sound'. Then I went to File>Import>Import to Library and select the music that I wanted to add. Once it was in my library, I made sure I was on the sound layer and then dragged the sound from the library and dropped it onto the stage. When the user enters a level the music starts automatically and is stopped when the user exits a certain level.

Linking the Levels Together

So the user could get from the introduction screen to the first level I created a movieclip with the text 'Play' inside it. On this movieclip I then put the following actionscript:

on (release) {
this._y = -10000000
loadMovieNum("beachlevel21.swf", 1);
}

This code means that when the user clicks on the play button, it will move to -10000000 on the y axis so the button can't be clicked during the game and then it loads beach level 21.

Then to get from the first level to the second level I put the following actionscript onto the jungle button:

on (press) {
this._parent.removeMovieClip();
loadMovieNum("junglelevel8.swf", 1);
}
on (release) {
stopAllSounds();
}

this actionscript means the when the button clicks on the jungle level it will remove the current movieclip (the beach level) and load the jungle level and also when the user release their mouse, it stops all the background music.

This is how all the levels and the introduction and postcard pages were linked together.

Postcard Page

When the user has collected all the stickers by answering all the questions correctly, a button appears that takes the user to the postcard they have won when they click on it. The postcard has an image off each level and shows they have answered all the questions correctly.

On the postcard I also had a print above. It was meant to be so the user could click print to print the postcard they had won so they actually got something out of playing the game. The actionscript I used on the print movieclip was:

on (release) {
print(postcard.swf, "bframe")
}

When testing the movie in flash it printed the postcard with no problem but when it is online, it doesn't print the postcard and instead just prints a blue page.

Introduction Page

I created an introduction page which included instructions on how to use the game so the user would know what they needed to do once they had started the game and then underneath these instructions is a big play button the user clicks on when they are ready to start the game.

Making the Jungle Level and the Underwater Level

When it came to making level two and level three, rather than start from scratch and waste time, I saved the beach level (level one) twice naming one jungle and one underwater. Then I just changed the imagery so the images were relevant for each level and changed parts of the actionscript to go with the new objects. I then changed all the questions so they were different to the first level.

Underwater Level - Objects

Jungle Island - Objects

Changing how the user can arrange the stickers

Originally the user couldn't place stickers on top of other stickers and some went on top of others and some went underneath eachother. I have decided to make it so the user can place stickers on top of eachother so on each sticker I put the following actionscript:

this.swapDepths(_root.getNextHighestDepth() )

This means that it swaps places with the object they want to put the sticker on top of making sure that it is the sticker that is always on the top.

The actionscript on each sticker now is:

Closing the sticker book

I have made it so the sticker book is displayed when the user answers a question correctly so now I want to make it so the sticker book closes once the user has taken the sticker from the sticker book and placed it onto the island. To do this I went to the actionscript layer on the main timeline and underneath the code to open the sticker book I put the following actionscript:

_root.closeStickerBook = function() {
var yStickerTween:Tween = new Tween(_root.stickerBook, "_y", Regular.easeOut, -72, - 330, 1, true);
};

I then went inside the sticker book movieclip and clicked on a sticker and put the following actionscript underneath the on(release) section:

_root.closeStickerBook()

This was placed on all the stickers.

Beach level so far

Click here to view beach level so far.

Drag and Dropping the Stickers

Next I made it so the user would be able to drag the sticker from the sticker book and drop it onto the island. I did orginally put the following actionscript onto the sticker itself:

on (press) {
startDrag(this);
}
on (release) {
this.stopDrag();
}

The problem with this code is, because the stickers are within the stickerbook movie clip, when the user drops the sticker onto the island it is fine but when the stickerbook is not displayed on the stage, the sticker also moves with the stickerbook movieclip so I need to make it so when the user releases the sticker, it removes the sticker movieclip that is within the stickerbook movie clip and replace it with the same sticker which will be outside of the stickerbook movieclip so when the stickerbook is not displayed, it won't affect the stickers that the user has already placed on the island.


This actionscript is saying that when the user releases the sticker, it is going to attach the movieclip 'starfish' and then where abouts to place the starfish movieclip on the x and y axis and also how big or small to make the movie clip. I have chosen to make the movieclip that is being attached to be slightly bigger than the sticker that is in the stickerbook so it is more fun for the user.

Displaying the sticker book when a question is answered correctly

Next thing I did was make it so the sticker book automatically appeared on the stage when the user had answered a question correctly.

This actionscript is telling the movieclip to bring the question buttons back onto the stage and also if the answer the user chose is correct then open the sticker book. Then it tells the movie clip to remove the current movieclip which is the question.

Once the user has clicked ok then sticker page is displayed but the next bit of code is needed to make it appear and it is played within the actionscript layer on the main timeline:
stop();
import mx.transitions.Tween;
import mx.transitions.easing.*;
_root.openStickerBook = function() {
var yStickerTween:Tween = new Tween(_root.stickerBook, "_y", Regular.easeOut, -330, -72, 1, true);

};

For each question that is answered correctly a different sticker is unlocked. The question movie clip will need to know which frame to go to in the stickerbook movieclip so I put the following actionscript on frame one within the question movieclip:

The actionscript above shows that if the user answer answers the question correctly, will will go to frame to within the stickerbook movie clip which will then display the unlocked sticker which is the starfish.

Creating the sticker book

For this I created a new layer on the main timeline and called is 'stickers' and then created a box the same width as the stage, 750px, and a height of 253px. I then converted this into a movie clip and within this movie clip I created seven layers. There was a layer for the background, the starfish sticker, the beach ball sticker, the umbrella sticker, the deck chair sticker and the sun sticker and the seventh layer was to put actionscript on. On this timeline there are six frames. The first frame shows all the stickers but faded so it shows the user that they have to unlock them before they are able to move them from the sticker page onto the island. On the actionscript layer I have put 'stop()' so that the movieclip will stay on frame one until it is told otherwise. Frame two is the same as the first frame except the starfish sticker is not any longer faded as the user has answered the first question correctly so they have unlocked the first sticker. This is the same on every frame unlocking the next sticker each time so for example frame three will unlock the beach ball sticker and frame four will unlock the umbrella sticker until frame six when all the stickers have been unlocked.

Above: Shows frame one with all the stickers faded.

Above: Shows frame four with three unlocked stickers

Above: Shows frame six with all the stickers unlocked

Displaying that the user has correctly answered a question

Once the user had answered the question, it would tell them if they were either right or wrong. If they were wrong the game would just take them back to the island screen and they could click on a question again, but if they had answered the question correctly there needed to be a way of displaying that a certain question had been answered correctly and this could be done using a tick to cover the question box.

This is the actionscript that is on the question 1 movieclip on frame one and it takes the user to the question screen. To show that they have answered the question correctly, I inserted a keyframe on frame 2 and added a a red tick over the question 1 box. Also, so the user couldn't click on question one again, I deleted the actionscript that was there on frame 1.

So when the user has correctly answered a question, they will be able to tell as it will look like this:

Setting the Correct Answer

The next thing I did was set a correct answer for the question so when the user selects their answer and then clicks next, it tells them whether they have got the question wrong or right.

Next I put the following actionscript onto the tick box movieclips that were next to the incorrect answers.

The tick box movie clip next to the correct answer had the same as the above plus a bit extra at the end.
The next bit of actionscript is on the 'ok' movieclip.

The next bit of actionscript tells the movieclip what text to display if the user is correct and if the user is incorrect.

Making the Answers clickable

The next thing I needed to do was to make the possible answers to the question clickable and making it so the user can see that a certain answer has been selected. I created a circle and converted that to a movie clip and named it tick box and put this movie clip at the side of each answer. Inside each movie clip I put the the following actionscript on frame one so the movie would stop on that frame.

I put this actionscript on the second frame also on layer 2. On layer one in the first frame, the tick box is white and on layer one in the second frame the tick box turns to red (below).

Frame 1 - white tick box (above)
Frame 2 - red tick box (below)

Beach Questions

I have now made the question numbers into movie clips and when the user clicks on the first question, it takes them to the screen below (this is just an example question and will be changed later on) :

The actionscript I put on the first question number is shown below:


The on(press){ section is telling it to do the following if the user clicks onto the movie clip.

_root.attachMovie("question", "question", _root.getNextHighestDepth() ) section is telling it to attach the movie clip on press and then the user will see the screen that is displayed above.

_root.question._x = 50 _root.question._y = 20 this section is telling it where to place the questions movieclip on the screen.

_root.questionButtons._y= 600 } this section is telling it to move the questionButtons movieclip off the stage when the user clicks on the 1st question. This is so the user can't accidentally click on another question when they are already viewing a question.

Drag and Drop

The next thing I wanted to do was to make it so the user could pick up the objects and move them around, The first thing I did was give all the objects an instance name and put each object on its own layer. The I put the following actionscript on to each layer changing the instance name to match each object.

beachball.onPress = function(){
startDrag(this)
}

beachball.onRelease = function(){
this.stopDrag();
}

The part I changed was the 'beachball.' part so for example, to be able to let the user drag and drop the starfish, the actionscript was be added to the starfish layer and would look like this:

starfish.onPress = function(){
startDrag(this)
}

starfish.onRelease = function(){
this.stopDrag();
}

Beach Level - After

This is what the beach level will look like when the user has collected all the stickers by answering all the questions correctly.