Problems viewing the website in Firefox

Today I have been working on the recipe page and adding images next to the recipes to show the user what the finished product is meant to look like and also to make the page look more interesting. I viewed the page in Internet Explorer and everything displayed as it should but then when I went to view it in Firefox, although the images I had been working on were ok, I noticed that the carrot image down the side of the page and the links had all moved down and there was no border around the links. I then went on Google to try find a way to fix this and after trying different things I finally got it to display the website in Firefox the same as it does in Internet Explorer. To get the carrot back in the right place I had to float it to the left. To get the border to show around the links I had to change the border width from 'thin' to '2px'.

Website so far

Last week I started to work on the website and this is what I had been working on and carried on working on in todays lesson. I already had the design what sam b and phill produced and we agreed on so I knew how the group wanted the website to look. We had also decided that we wanted a box that that the user could type a certain code into so they could view more content if the code was correct so this is what I worked on first because I figured it would be the hardest thing to do on the website. I found this quite difficult to do but with some help I finally got it working so I could then go on to design the site. I then created a style sheet and created all the pages that we wanted on the website. When it came to uploading the site it all displayed ok in Internet Explorer but when we viewed it using firefox only the header and the code bar were being displayed. It took quite a while for us to figure out why this was happening but then we tried using an outer container and an inner container and putting everything inside the inner container and this worked. The next job I did was to get all the links linking to the correct pages on the navigation but when I uploaded the site then, the header had moved from the centre to the left side of the page and there was also a blue box on the right side. I went through all the code and realised for whatever reason I had tried to attach the style sheet twice and also used the body tag twice, once at the top of the page and one half way down the page and as soon as I got rid of the ones half way down and then uploaded it, it worked again fine. Because I had got the site working as we wanted it to and all the pages ready, I went on the internet to find content to go on the website. I started off by looking for carrot recipes and then carrot facts and then I put the most interesting ones on the recipe and the facts page. The next thing I need to do is to get all the content onto the website including the game once phill and sam b have put all their work together and everything for the flash game is finished.

The development of the game so far

I have spent a lot of time on this project and not enough of it has been on updating this blog so this is my attempt to summarise what I have done so far.
I worked on the design and the overall feel of the website and game at the beginning and some of the previous posts show that part of the process, since then I have undertaken the role of actually getting the game to working. I researched lots of online tutorials for webcam games and it became very clear early on that what we are attempting with this game is a lot more adventurous than the majority of webcam games out there, there was not going to be some easy tutorial to follow that would solve our problems.
I developed an idea to try and take aspects from a webcam tutorial where a ball moves across a screen and registers hits when you move over it and combine this idea with various other aspects from the world of flash gaming action script. With lots of trial and error I managed to get the webcam registering movement in the right areas, and then I managed to get the registration of that movement to move our controllable objects. So things were going quite well. I then had to develop a way of making the carrots grow when they came into contact with both the sun and the rain cloud, this was the hardest task and after I had pulled out most of my hair I managed to get this to work. The next task was the timer element and score system which was quite easy to do and I can now say officially today the game is working and it just needs the instructional animation adding, this part is being developed by my colleagues and the website that we are developing as part of our project is also nearly finished.
I would also like to point out that this project was designed for use on the Hull city centre big screen, but due to the Hull City Councils decision to turn off the screen this will no longer be the case. This has been very demoralising and upsetting, it shows in my opinion the lack of interest my home city has in moving forward as a technological social centre for the community and it leaves me with worries about my creative future in this city. I have never wanted to leave my home town but if Hull continues to be repressed in terms of forward thinking is it the type of place where a creative mind can thrive?
This project was set in conjunction with the BBC’s ‘Diggin’ initiative and our contact at the BBC was Jeremy Buxton. I would like to thank him and our tutor James Field for arranging this opportunity, it has given us a little glimpse of work in the big wide world, not only the highs but also now the lows. Although we only had a couple of meetings with Jeremy his positive attitude shone through and this gave me a huge boost of confidence to take into this project. It is a shame that due to the council’s decision other students may not get to work with him as I feel my experience of meeting him has been invaluable. I would like to wish him good look with his future endeavours and I hope to work with him again someday.
Check out my website.
http://www.pjshakesby.com/

Animation Update

Animation is pretty much finished now, I realsied I dont have the updated images of the sun, cloud and carrot. Once I have recieved them and found an appropriate sound I can insert them into the popping page of the instructions, create another animation of the game working and work on an animated carrot! Possibly!
Me Sarah and Phill decided that we would need to go into the sound studio to record a voice over for the instructions as we will not be recieving one now.
Phill showed us a nearly finished version of the game and it looks great. Sarah has the website almost done and just needs some content. I will have a look through my cookery books at home and see what I can come up with.
Internet Update: Still no working internet at home so having a slower progress with mine!

Nooooooooooooooooooooooooooooo!

Went to work on the aniamtion tonight and the file is corrupted!!!!!!!!!!!!!!!!!!!!!!!!!
Flash was playing up a couple of time whilst saving 'Flash CS3 is not responding' I have to redo from scratch, so annoying but do able!

Big Screen switched off for good!

We rtecieved news today that the big screen in town will be ripped down!
James has explained that all is not lost though and our game will be shown in the foyer of college. At least we can guarantee no one will get wet :0)
http://http://www.thisishullandeastriding.co.uk/news/Hull-s-big-screen-switched-good/article-1555150-detail/article.html

Animation Update

I have decided I dont like the rabbit!!!
I will possible replace with a talking/not talking carrot????????????
The next page of the animation will be:
'The aim of the game is to get the sun (a popping sound will be heard then a sun will appear to indicate what the sun icon looks like) and the cloud (same thing will happen as the sun) to work together in creating the perfect carrot (again, popping sound and carrot appearing)
Next . . . .

Website

In todays lesson I carried on working on the coding for the website so the user was able to enter a code given to them at the end of the big screen game so they could access more content on the website. I also started to work on the css for the website and got the layout more or less finished. This week I will carry on working on the website and try get links and pages added.

Sorry Guys, BT's fault!!

I have not added a post for a while due to moving and having no internet connection, all BTs fault I have to admit!
I have done a story board for the instructions animation, as we decided an animation would be a lot quicker and easier for the player to understand.
It will structure like this:
Speak and voice (hopefully) saying 'welcome to the Dig In Game, Let me explain how it works....'
The next view will explain to the user what the game stage is, what is what and why its like that.
Then it will move onto explaining the buttons and how they controll the desired effect, then we will go onto a small example clip of what happens when the combination of sun and cloud work well together.
Now that is ok when I saw Sarah and Phill today I will start building in Flash!!!! :0S
Well I will upload any progress asap on my whopping 0.5 meg supplied to me by BT, Id best be careful, That speed is sooo greedy!!!!! >:0(

nearly working prototype

last week I managed to get 4 coloured to circles to change colour when you create movement over them using a web cam in flash this week I have manged to take things a step further and now I have 4 virtual buttons controlling the movements of two objects using a web cam sounds pretty good have a look!

http://www.newmedia.artdesignhull.ac.uk/pshakesby/level2/bbcbigscreen/Game_v5.html

Sarah and Sam Scott work

Sarah and I worked on the code ID for the game to take the player to the web site, upon opening the site they need to log in with a code that is given at the end of each game to have access to more links, games, and info on veg and healthy eating, PHP and log in form on DW.

my work for the past week

My job was to have a look at prospective code for our project it's all looking pretty complicated and its turning my brain to jelly but at least it looks sort of possible!

Individual jobs to do

Today we had a meeting with Jeremy and he was very pleased with what we had done so far. Following this meeting we sat as a group and discussed different jobs we could be working on individually and we decided that I would be working on the carrot and sun graphics for the game.

Job To Do for Sam

Reasearch and come up with an introduction for the voice over of the Interactive game for the big screen. Several ideas need to be on paper to discuss and talk over with the group for next week. Key points to note:

Keywords in relation to the game
Word count (No Waffling)
Audiance attention (First Word)
Target Audiance
Use Specific Points
etc

Animation Update

Now that the storyboard is complete, I am ready to move onto the animation part.
The rabbit has been drawn in Illustrator, I will animate that in flash by moving its nose, giving the illusion of it 'sniffing' and its eyes will move and it could possibly point at certain parts of the instructions.
I have started the animation with the box opening from small to full screen.
'Hello'
'Welcome to the Dig In Game'
'Let me explain how to play'
Im not sure on tha rabbit now he's in there. It may look better once animated but I'll keep him there for now!

Storyboard Ideas - End of Game

This screen is where the user will find out their final score. There is a code that they will be given in order to gain exclusive access to the website i.e. recipes, tips, growing stories etc......

Storyboard Ideas - Gameplay Screen

This is a picture of what the game could look like half way through. There is a countdown timer to the left of the web cam screen to make the user aware of how much time they have left.

Once the carrots have been watered and had enough sunlight, they will glow and pop off the screen to a database that will count the score up. Each carrot the user successfully grows, will get 5 points and this will be displayed in a small area before the carrot disappears.

In the top screen where the web cam will be, whatever icon the user has selected (cloud, Sun etc) it will highlight so the user is aware of what selection they have chosen.

Storyboard Ideas - Countdown Timer

On this picture I have put the whole text on this picture but the text would happen in order one after the other:
Get Ready
5
4
3
2
1
Go!
The carrots would then dissappear and the game would begin from the very start.

Storyboard Ideas - Instructions Screen

On this page I believe that writing an explaination to this game would be too long, a small Flash animation would work much better just demonstrating what to do and how to gain points.

Storyboard Ideas - Welcome Screen

I did 3 mock ups of the welcome screen as they all have carrot jokes on them, I thought that for 30-60 seconds this screen could display with different jokes (or facts) a bit like the adverts in a cinema, fading to one another.

It would be good if we could get a famous voice enticing people over to play. "Roll up, Roll up".

Illustrator images for Sun, Cloud and Carrot :0)

I have a good idea for the font, which you will see on the storyboard that I will post after this. The link to download it is : http://www.dafont.com/search.php?psize=m&q=teen

Different Big Screen Layout Ideas:

Layout 1:

Layout 2:

Layout 3:

Layout 4:

Ideas for Characters

This is my revised Idea let me know what you think guys?

The sun and clouds are controllable and the areas the effect are indicated by the sun rays shown and the rain fall.

I was thinking instead of having a character plucking carrots the carrots could glow when ready followed by anm indication of the points earned then they could dissapear to be replaced by new baby carrots or seeds to start the process again.





This is just a representation of what it may look like Skined on the big screen. I have chosen a colour scheme that it used within the game its skin and I propose we also use it on the website to tie the theme together.










This is my website idea using the same colour scheme and using the carrot as part of the navigation to further link the site back to the game.












This shows how all the elements tie together visually.

Here my flash mock up of the game aswell.
http://www.newmedia.artdesignhull.ac.uk/pshakesby/level2/bbcbigscreen/big%20screen%20mock%20up.html

Interactive corner

1. Face area is transparent for audiance to see the participant face on the big screen and to see there reaction to playing.

2. Hands to move over transparent arrow area to hit hot spots (3.) to activate rain on to seeds, left to right. Hands over just hotspots will not make it rain only once hand has left hot spot will the command to make the rain fall happen.

3. Hot spots in center of arrow can not been seen on screen.

4. Interactive game with the player been projected on to big screen with face showing and hands waving will show there interaction with game and also there frantic attempt to make the seeds grow.

Game for website: Storyboard

Screen 1:

The first screen that will be displayed in the game box will be the one on the left. It is simple and it tells the user how to start the game. Once the user has click the play button it will take them to the second screen.

Screen 2:

This is what the second screen would look like. There are 10 seeds laying on top of some soil. The user then has to click them all with their mouse to plant them and the game also tells the user this so they know what they need to do. Once the user has done this the game will take the user to the next screen.

Screen 3:

Screen three shows two large rain clouds and the user has to shake them using their mouse to make rain fall to water the seeds. Again the game tells the user what to do so they don't get confused. This screen will be on a timer so the user only has a certain amount of time to shake the clouds. Once the time is up the game will move to the next screen.

Screen 4:

When this screen is first displayed the clouds will be covering up the sun and the user then has to move them out of the way to let the sun shine. Once the user has done this the game will move to screen 5.

Screen 5:

The user does not have to do anything on this screen as it is just showing the user that they have successfully grown their carrots. Once the user has seen this it will then move to the final screen.

Screen 6:

This is the final screen in the game and it is for saying well done to the user and letting them know that they have completed the game.

Colour Scheme for the Big Screen: Idea 1

This is the colour scheme I have chosen to use for the Big Screen: Idea 1.
(http://kuler.adobe.com)

Big Screen Storyboard: Idea 1

Screen 1:

The first screen that is displayed on the big screen is when it is counting down to the start of the game. At the top of the screen it shows the BBC's Dig In logo so that the users know who is doing the dig in campaign. Underneath the logo there is some text telling the users that it is counting down to the beginning of the game. The number of seconds is in a different colour so it stands out from the rest of the text. Whilst it is counting down, there is also some more text at the bottom of the screen and this is for different fruit and veg facts. These will keep changing after a certain amount of time. Once the timer has got to zero, it then moves onto the next screen.

Screen 2:

The second screen that is displayed on the big screen is the main game. It has the main game where the user has to try catch as many seeds as they can and they can control the character on the screen by looking at the camera section on the bottom right and putting there hands over the appropriate arrows. This screen also displays the amount of seeds they have collected and also the high score.

Screen 3:

The third screen is displayed after the main game has finished. This screen displays the bbc logo once again but then the text underneath the logo is congratulating the user and shows how many seeds were collected. Underneath the user's score there is the website address so that users can go play more games or find out more information.

Layout Idea for the Big Screen: Idea 1

This is a quick image of what the game on the big screen could look like. The aim of this game is to get the character to collect as many seeds as they can. The main game would take up 2 thirds of the screen. The third that is left would be split into two sections. The top section would count and display the number of seeds collected by the user playing the game but it would also have the high score displayed so it would encourage the users to try beat it. The bottom section would be what the camera can see e.g. the user playing the game so the user can see themselves on the big screen whilst playing the game. To control the character on the screen the user would have to put their hand over the left arrow to make him move left and the right arrow to make him move right.

To make the game more fun and interesting you could make the clouds move and also have junk food such as burgers and pizzas falling from the clouds and if the user catches one of them then points are deducted from their score.

Layout Ideas for the Website

Idea 1:

For this idea the header will be across the top of the page and could include the bbc dig in logo and then at the right side and the left side images of fruit and veg.

Underneath the header there will be the navigation for the website and the links could be.. home, games, recipes and tips for example.

The long box underneath the links will be for text and this text will be the welcoming message to the website and a bit of information about the dig in campaign.

The square box next to the text box will be for images. This could be made in flash so that the image in the box changes to a different image every 5 seconds or so. This makes the page more interesting.

The long box on the left will contain an image. This could be a screenshot of one of the games. the text box within the image box will contain text which could say.. 'Click Here to Play Games'. Both the image and the 'Click Here' text will be a link to the games page as this makes it easy for the user to navigate around the site.

The long box in the middle and the long box on the right will be similar to the one on the left but the middle one will be for Recipes so the image could be of a mixture of veg for example and the box on the right will be for tips so the image for that could be a plant pot. Again the images and the 'Click Here' text will be linked to the appropriate pages.






Idea 2:

The header and navigation bar in my second idea is in the same place as my first idea.

The large box on the top right of the page will be used for images. Again this could be made in flash so the images change to a different one after a certain amount of time.

The text box underneath it will be used as the welcome message and a bit of information about the bbc dig in campaign.

The text boxes down the right side of the page will be short bits of text to persuade people to visit the different pages. One will be for games, another for recipes and another for tips.

On the layout ideas I have tried to use plenty of whitespace so that the page is clear to the user so they dont get confused.

Update on The Big Screen

Wire frame #2

Fire frame example #1

WWhen the carrots grow upwards after 10 waves the carrot glows and floats /moves, over to the basket. each wave is a hit which adds growth to the garden which is growing veg on the web site

The more you keep the cloud/rain over the veg the more they grow, maybe 10 passes each hand over senors in a waving motion grows a full carrot, "give each player around 30secs to wave like made to grow the veg

In moving your hands over the sensors to keep the clouds over the seeds rain will appear

3 - 2- 1 With the count down going, gardener seth sows the seeds from right to left and off the screen as the game starts

ideas for the website

Here is a rough idea I have for the colours and style of the website:

Line 1

Line 2

Line 3

Line 4

Line 5

The colours were taken from Jamie Oliver's "At Home" cook book and show, I like how he grows his own products and then cooks them (which is what we are promoting) The show is layed out like a scrap book of ideas and recepies and I really like it, the website could be layed out this way and have a background of slightly muddy note paper like below:

This is a compilation of images that could inspire the website and project: