Meeting at Croxby Primary School

I got in contact with my Nephews Primary school to see if I could go in and speak to a teacher about what I should include on my site. I wanted to find out from someone who worked with children what they thought I should include on the site. I also wanted to get some feedback on my site so far. The School got back to me and I arranged to go in and see the ICT Teacher Natalie Snow to get some feedback. I drew up some questions to ask Natalie regarding things I should include on the site to keep the attention of the children. I showed Natalie what I'd done on the site so far and the quiz and jigsaw I had created. I got some good feedback from Natalie she liked the site and the colours I had used. Natalie also gave me some suggestions of things I could add on the site like a maths game and word game for the children to play. She also said I shouldn't have too much text on the site because not all the children would read it. She also suggested changing the colours of the ribbons on the medals to a brighter colour. She also suggested adding another page called Making Things were the children could be shown how to make their own medals.

We also discussed in the meeting about me testing the finished site at the school with a group of children. The school agreed to let me go in once the site was finished and get a group of 12 children aged between 4 and 7 to test it. I said to Natalie I would keep her update with the progress of the site by getting in touch with her when I had completed certain tasks.

Design of the site (Continued)

Once I added the logo to the site I began adding content to the venues page. I added four images of the Olympic Stadium, Aquatic Centre, Velodrome and Basketball Arena. My next step is to make these images into buttons and then link them to a new scene where I will have a page that goes with that button. So each venue as its own page containing information on the sports that feature in that chosen venue.

Logo

I decided to change the logo because I wasn't happy with it so I went back to the drawing board. I wanted the logo to stand out but also appeal to Kids. So I used bright colours and a bold font I included the colours of the olympic rings in the logo as well. So Black, Blue, Red, Yellow and Green because these are the colours of the olympic rings. Below is the logo I have created for my site and what it looks like on my site.

Creating Backgrounds

My next step was to draw the backgrounds for each of the venues. I want the user to click on a picture on the venues page that then takes them to a new page telling them about the sports that are featured at that venue. So I began to draw the backgrounds of the other venues in Adobe illustrator as I had done with the stadium background. Below are my backgrounds I've drawn so far for the Aquatics Centre, Basketball Arena and Velodrome. I intend to

have 4 or 6 venues on the venues page.

Design of the site (Continued)

Once I had created the navigation I added content to each of the pages. I added the background to each frame of the site so in the frames panel I added 3 frames so the frames went up to 4 because that's how many pages I had. I did the same with the navigation so it span 4 frames and then created a new layer and called it contents and did the same. I then added text to all of the pages so I could see if the navigation worked on each page. To get the navigation to work I added an actions layer and made that span 4 frames and typed in the following code in actions panel in the first frame.

stop()

function onHomeClick(e:MouseEvent):void{

gotoAndStop("Home")

}

home_button.addEventListener(MouseEvent.CLICK, onHomeClick);

function onVenuesClick(e:MouseEvent):void{

gotoAndStop("Venues")

}

venues_button.addEventListener(MouseEvent.CLICK, onVenuesClick);

function onGamesClick(e:MouseEvent):void{

gotoAndStop("Games")

}

games_button.addEventListener(MouseEvent.CLICK, onGamesClick);

function onColourInClick(e:MouseEvent):void{

gotoAndStop("ColourIn")

}

colourin_button.addEventListener(MouseEvent.CLICK, onColourInClick);

Once this code had been added I tested the site to see if it worked and it did.

Design of the site (Continued)

Once I had drawn the background for the home page I began to create the site in flash. I drew some medals and imported them into the library in flash. I then made the medals into buttons and labelled them Home, Venues, Games and Colour In and gave them the same instance names in the properties panel. I then clicked on each button and in the Up, Over, Down and Hit panel I changed the colour of the medal so it changed from Bronze to Silver and then Gold when the mouse hovered or clicked on it. Below is a screenshot of the Olympic Stadium background with the medals on top of it.

Design of the site

I began to draw up ideas for the Design and Layout of the site. I also started to create an on screen cartoon character to show the children around the site. I came up with a Alligator cartoon character to show the children around the website. For the background of my site I came up with having the London Skyline in the background with the Olympic Stadium in the foreground set on a gradient Blue Sky and Grass background. Below are design layouts for how I want the site to look and the alligator character I have created.

From my rough design layouts I have started to design the background for my site in Adobe illustrator. Above is my illustrator design for the background of the HOME page.

Presentation

On Friday 21st October I presented my idea for my major project to the Web and Games Design Students and our tutors. I did this in the form of a Powerpoint presentation showing my ideas in a slideshow. I talked about why I chose to do a flash website and why I chose to do a website aimed at young children promoting next years Olympics in London. I showed the research I had done and showed them websites that I had looked at during my research. These included the CBeebies, London 2012 and CITV websites below are screenshots of these websites.

I then showed then the name of my site and my logo ideas and the quiz and jigsaw I had made in flash. I then showed slides of rough ideas for the design and layout of my site to give them an idea of how the site would look. I then ended my presentation by asking if their was any questions about my idea.

Feedback

Jay one of our tutor's asked me how I planned on marketing the site to get it out there. I replied by saying I wanted to try and get it into a primary school so the children could use it first hand. Jay said I should aim to get the project finished for Easter so it is out before the rush for the Olympics start. Sally one of our tutors said that I shouldn't try to do too much because of the fact that creating a site in flash is new to me and that she would keep an eye on my development to make sure I could complete the task I'd set myself.

Olympics for Kids

I have purchased the domain www.olympicsforkids.co.uk for the name of my site. I have drawn up a couple of ideas for logos for the site that I have added below.

Creating a Jigsaw in Flash

I have browsed the internet for creating a jigsaw in flash and I came upon this tutorial http://www.ilike2flash.com/2008/05/drag-and-drop-jigsaw.html. So I will have ago at following it and have ago at creating my own jigsaw for my site. The first thing I did was to find an image online of the Olympic Stadium in London which I would use as my jigsaw. Once I found the image I imported it to the stage in flash. Then I went to Modify in the menu bar at the top of the screen and scrolled down to Break Apart (cmd key + B). Once I had done this I selected the Lasso Tool from the Tools Bar Menu and began cutting out shapes from the image to make thejigsaw pieces. Once I had cut the jigsaw pieces out and moved them away from the image I selected each piece and converted them to movie clips by going to Modify and scrolling down to Convert to Symbol (F8). I then gave each piece an appropriate name in the properties panel ie piece1 up to piece6 and an instance name of stadium_mc, stadium_mc2, stadium_mc3, stadium_mc4, stadium_mc5,stadium_mc6. Then following the tutorial I created a new layer and called it actions and clicked on frame one and opening up the actions panel by going to window in the menu bar at the top and scrolling down to Actions (alt + F9). Then in frame one of the actions panel I add the following code:

//Array to hold all the puzzle movie clip instances.

var stadiumArr:Array = new Array (stadium_mc, stadium_mc2, stadium_mc3,

stadium_mc4, stadium_mc5, stadium_mc6, stadium_mc7);

//For loop to control the drag and drop of each burger by adding a

//mouse up and d

own to each movie clip.

for (var i:uint =0; i < stadiumArr.length; i++) {

stadiumArr[i].addEventListener(MouseEvent.MOUSE_DOWN, drag);

stadiumArr[i].addEventListener(MouseEvent.MOUSE_UP, drop);

}

//This function drag the movie clips when the mouse is pressed.

function drag(event:MouseEvent):void {

event.currentTarget.startDrag();

}

//This function drop the movie clips when the mous

e is released.

function drop(event:MouseEvent):void {

event.currentTarget.stopDrag();

}

Once this code was added I tested the jigsaw to see if it worked by going to Control in the top menu bar and scrolling down to Test Movie and clicking on that. When I tested the jigsaw it worked so I was happy with the outcome. Below are screenshots of the jigsaw I created.

After creating this jigsaw I had ago at creating another one which I did and I chose to do a jigsaw of Usain Bolt. I did it the same way I did before apart from changing the instance names to bolt_mc and the jigsaw turned out like the one below.

Tutorial

On Fri 7th October I was given the go ahead from my tutors Sally and Jay for my final major project. During this meeting we discussed what I should include on the site and it was agreed I should break the events down to their chosen venues ie Olympic Stadium = Track and Field. Then just pick one or two events from each venue to add on the site. It was also discussed that I look at creating games for the kids to play on the site ie jigsaws, quizzes, to keep them entertained. It was suggested I look at the Blue Peter, Newsround websites and their rss feeds because that is something I could add on my site.

So I intend to go away and look at the things Sally and Jay suggested and work on them at home.

Designing Websites for Kids

When designing a website for kids use bright, vivid colours that will visually stimulate the kids. Make sure the kids comeback to your site by creating a happy mood. This can be done by using a cartoon character as a vocal point on the page. Use eye catching graphics in the background or a theme ie for my site it could be a running track or the stadium. Use large typography, large buttons and large icons because they will draw children into your site.

Navigation

When creating the navigation for a kids site make sure you use big icons and large text incorporated with the icons. Also use sound effects on the navigation buttons. Use a voice to help them with the navigation.

Print Out Pictures & Colouring Pages

It is a good idea to have print out pages on your site so the children can print out pictures to colour in.

Below is a list of the best conventional practices for designing a website for kids:

• create elements that are large and visually memorable
• use bright, vivid colours that stimulate the senses
• incorporate elements from nature
• create depth in design
• add navigational elements that are large and easy to find
• use video
• include printable elements
• break the grid
• make modifications based on usability testing

Below is a list on the best unconventional practices for designing a website for kids:

• create a happy, playful mood
• use animated characters
• use graphic-heavy navigation bars
• use flash animation
• use motion and sounds that trigger when the page loads
• include a "games" section
• change the cursor to contribute to the theme
• add voices to navigation rollovers
• be accountable to both children and parents

I found this information on the smashing magazine website below:
http://www.smashingmagazine.com/2009/11/27/designing-websites-for-kids-trends-and-best-practices/

Final Major Project Proposal

After the feedback I got back from my tutor's Jay and Sally I have decided to create a Flash website for my Final Major Project.

I would like to design a flash website aimed at primary school children promoting the London 2012 Olympics. The site would educate the children about next years Olympics and briefly describe to them the 39 disciplines included next years Olympics. This will be done by using still cartoon characters to display the events with a minimal amount of text next to them describing that chosen sport. I will also educate the children about each nation competing at the games by including the flags of each nation with a minimal amount of content about each nation on the site. I will include simple icons and navigation so they can find their way around the site. I will use bright colours so it stands out to young children. I will also try and add a voice to the navigation so the children can hear what page they are on. The main objective for this site is to get young children interested in next years Olympics in London. The site needs to stimulate the children so they don't get bored so I think using cartoon characters could help do that. It could feature colour in pages of the cartoon characters for the children to print out and colour in.

I think this will be a challenge for me because it is taking me away from my comfort zone of building a website in html and css. However I don't want to just be known as a one trick pony who can only create html, css websites. So I think it is a good idea to push myself in another direction for this project to prove to myself and others that I can do other things. So this is my proposal for my Final Major Project.

Major Project Pitch

On Fri 30th September I pitched my ideas for my major project to Jay and Sally. I began by pitching the Roadrunner magazine idea to them both. After discussing the pro's and con's of this idea to them they decided I needed to move away from this idea because I am passionate about running and therefore in my comfort zone. So they said forget about that idea and let's hear your idea 2 so I pitched idea 2 to them. After discussing idea 2 with them they gave me some feedback. They like the idea of creating a website for children based on the London 2012 Olympics. However they want me to move away from creating a website in html, css, because I need to push myself further. So it was decided I should create a one off website in Flash or an interactive piece something that would take me away from my comfort zone.

Jay and Sally suggested I looked at the School Curriculum website http://curriculum.qcda.gov.uk/key-stages-1-and-2/subjects/index.aspx so I could find out what I need to include on the site to keep children interested. I also looked at the CBeebies website http://www.bbc.co.uk/cbeebies/ to see what they included on the site. I noticed they use bright colours and big icons and when you click on the navigation they have a voice telling you what page you are on. Also they don't use a lot of text and content because it is aimed at young children and they would lose interest if there was a lot of content. So my site needs to have a minimal amount of text and content on it.

Final Major Project Ideas

Idea 1

For my Final Major Project I would like to continue were I left off in the 2nd year with the Roadrunneronline magazine site. I was disappointed because I didn't produce a magazine to run along side the website which was now intention at the beginning of the project. Therefore I would like to continue the Roadrunneronline site and create a printed magazine. This time round I would aim the magazine at the whole country instead of just making it a regional magazine site. I would have more content because it would be aimed at runners of all ages in the UK. It would also cover more races because I would be able to have more events on it. I would also have a page dedicated to the build up to next years Olympic Games in London as well as having a countdown clock to London 2012. So the site would have a lot more content than before and also the magazine will cover a wider range of running clubs, events etc.

Once again I would push myself in php and flash and have a bit of both on my site like before. So my learning outcomes would be php and flash. My site would be html and css with php and flash included on it.

Idea 2

I would like to design a website aimed at young children aged between 6 and above for the London Olympics in 2012. The site would educate children about the Olympics and each event in London 2012. It would describe each sport to them and tell them who the main competitors are and which country they are from. It will include a page with the flags of each nation competing in the games. On this page the children could click on the flags and this would take them to another page that gave them information on that nation. To run alongside the website there would be cards for the children to collect featuring each event at London 2012. The cards would have stats and figures about each event like Top Trump Cards have on them. So the children could play Top Trumps with their friends or just collect the cards and then swop them with their friends. Or I could do cards so the children could play mix and match with because my nephew who is 4 loves playing that game with his friends.

To make the site appeal to young children I would create my own cartoon characters which would feature on the site and on the collectable cards. Each sport would have its own character representing it. So I would create 26 cartoon characters because there are 26 sports that feature in the Olympics. I would create the site in html, css, falsh and a bit of php and I would create the cards in illustrator.