Interface Layout

It is specified in the brief that the story should be in a 845 x 475 pixel box. This will contain the illustrations, text of the story and buttons to go back and forwards between scenes, and one to go back to the beginning.

When I started my illustrations i forgot that and used the whole box for the artwork:

Then I remembered that I needed to include the interface: (see sketchbook)

I looked at the stories on cbeebies to get an idea of what an interface designed for children should look like.

Then I changed the layout to stop the buttons getting mixed up in the picture.

Treasure Island Toys!

The next project is a live project. I will make a flash animated story about Bertie The Pirate.

Bertie The Pirate



This will be put on bertiethepirate.co.uk which is a site aimed at childeren, but is used to link to treasureislandtoys.co.uk where their parents can buy their toys!

The Characters and story already exist, so all I need to do is place them in different scenes and change their expressions.

Percy The Puppy

As they will be made in flash, I can put in 'animated flourishes' like blinking eyes, moving clouds and twinkling twinkles.

Pecky The Parrot

Browsers

Opening my site in firefox:

I found that it had put horrible borders around the images.
I fixed this by just putting

#content img {
border:none;
}

However there were a lot of problems when i opened it in IE; the nav bar was right off the screen on the right, the text shadows didn't show (in IE7) and the cursor didn't change to pointer on the links.
These were quite easy to fix in the IE7 and IE8 CSS files but then the website looked wrong in Safari!

After much confusion I realised there was a problem with my conditional comments:

Because the ie css links aren't commented out (grey) safari reads all of them and uses all the rules from all the css files.

After I fixed this though, all was well.

Now the non ie browsers only read the safox.css