3rd Entry

The lecture started with a talk about our blogs, that some of us haven’t got enough words, haven’t ordered it properly or haven’t included links to additional reading. Some of those points relate to me (glad I’m not the only one!) so I’ll be sorting that out in the next few days.

We then focused on interfaces. We started looking at the interfaces of operating systems, looking at how they started with the command prompt to the start of graphical user interfaces and where they are today and windows compared to Linux and Mac OSX. The first computer I used was an Amiga 1200, which had a very good graphical user interface, but I still remember using the PCs command line to launch some applications.

We then moved onto the interface of websites. The first one we saw consisted of a blank page and a column of grey symbols with no description. I think the idea was to encourage users to find out themselves what has behind the symbols instead of finding out it was a subject they were not interested in and clicking off it straight away. Although I think only the most curious of users would have actually read what was behind the symbols but it was a good idea and very original. The second website we looked at was of a famous composer for the music in films, although I can’t remember his name! It was a website done in Flash. It used multimedia very well using graphics animation and animation to project a very dramatic website to the user. It had a feature where you could change the music which changed the whole atmosphere of the site. I never knew music could have such a dramatic effect, something I would definitely keep in mind for Flash applications and websites. The were some design flaws though, the website looked a bit cluttered with all the animation and made it less user friendly compared to a conventional design although all in all it was a good, innovative design. The final one was a religious website. It said something like “Jesus loves you”. It contained a flashing multicoloured background, lots of random animated graphics and strange audio. I couldn’t work out whether it was a joke or they were trying to be serious! It was multimedia overload, not the way to design a website!

After the websites we looked at what makes a good interface considering the use of colour, fonts and navigation. Colour is important to make the site interesting to read and not appear dull but you have to be careful that the colours don’t clash (like red and blue). You also have to keep in mind what colour blind people see and realise they don’t see the same things as people with regular vision. Fonts need to be carefully considered, especially with websites because if you use a font that is not loaded the users system, they will not be able to see it (unless it is contained in an image). You also have to make sure the font is too large or small, is the right colour and is at least readable. The navigation is very important. It needs to be clear, easy to access and uniform throughout the site. All this information learnt can be applied to many things from websites to applications. It is definitely something I will keep in mind for the future.

To finish the lecture we watched a video called “Fat Kid on a Rollercoaster”, the perfect way to end the last lesson of the week!

I found a good website at home explaining what makes a good website (link 1).

The tutorial was based around shape tweening. Shape tweening is very similar to implement to the motion tweening we did in the previous tutorial. Where motion tweening moves an object, shape tweening transforms an object. The only difference to applying a shape tween as opposed to a motion tween is that you select shape tween from the tween drop down box instead of motion tween.

I made a few animations that changed a circle into a square and the text ‘one’ to ‘two’ and back again. I did this by breaking the shape apart twice so that each pixel was animated separately creating a very smooth transaction. I played around with the blend and ease options to see how it would change my animation. I didn’t really see any difference with the different blend option but ease produced a noticeable change in speed during the animation. Ease seemed to make it look much more professional so I’ll definitely be using that feature.

I had a few more goes creating different shapes and seeing the patterns they make as they cross over each other. Sometimes the tween created won’t be what you had hoped for, like going from white straight to black when it is meant to be a smooth transaction. You can sometimes get around this by putting a small cut through the shape which changes the animation. This certainly helped with my animations although you can see the cut even if its just a one pixel line so I will probably only use this method as a last resort.

Finally we added some shape hints which gave us greater control over the animation of the shape. They worked by allowing you to choose what part of the shape or text gets animated and where it moves and gets transformed tool. Probably the most useful feature I learnt in the tutorial and one I will definitely be using again.

At home I had a read of a shape tween tutorial I found on W3C Schools, listed bellow.

1. What makes a good website - http://www.barnard.edu/resnet/webpublishing/goodsite.html

2. WC3 Schools shape tween tutorial http://www.w3schools.com/flash/flash_shapetween.asp