Final Implementation

Once the diamond prototype was completed, work moved onto the other shapes. Using a rendering work flow where only the center shape and the left reflection were rendered, then flipping and mirroring the reflection to create the right reflection, all 50 animation frames for the 8 shapes were created in the space of a week. Consolidating the three layers into one animation image also allowed the animation to run more smoothly on lower spec computers. Previously, with both reflections and the center shape being rendered individually (which meant flash had to produce 75 animation frames a second), the animation had been seriously lagging when first triggered by the user.

All hotspot and tag content was created in Photoshop, animation and symbols are consistent across all face shapes. Some shapes were forced to break the center column rule due to excessive length.

Developed during the final implementation was a way to allow all shapes to fade out at any of the three perspectives. Now, when the user clicks on a shape in the dock, it automatically animated a fade in of a blank version of the interface, by doing this the user is able to change shape at any perspective, and even during mid rotation.

In order to add more movement to the interface and leave it looking less static, hotspots now animate in one at a time, typically in a clockwise direction. When a hotspot is rolled over, the inactive hotspot's disappear, leaving the user to focus on the selected information.

A splash screen has been developed which allows for an intro transition as soon as the application is started. Code has also been applied to the application which means if the mouse is left inactive for 25 seconds, the user is returned to the splash screen. A descriptive caption has also been implemented in the splash screen - "face shape e-learning tool", this gives the user an instant inclination as to what to project entails, this should be particularly effective at the degree show.



With the degree show in mind, it was also suggested that a help screen be added, complete with a brief description about what can be learned through the application. The help screen describes how the dock, rotation buttons, and hotspots should be utilized by the user.



Basic sound effects have been added to the project, though initially intending to include a basic music loop, I have decided to restrict sounds to the dock and the hotspot's, this means it can be used in conjunction with a speaker in a lecture.

A poster has been developed to support the project at the degree show -



Final touches before assessment include the development of a dvd cover and the production of a basic slide show. The slide show will be available from the splash screen, and will include photographs and scanned images from various stages of the project development.

The project was recently featured in Web Designer magazine's graduate showcase "Creative Careers". Alongside work from four other design schools (Bournemouth, Leeds, Falmouth, Brighton and London), DDM was praised for its 'raft of great student work'. Details of the issue can be found at http://blog.webdesignermag.co.uk/?p=30 .

Week 12 & 13

With the design report complete, work on the final implementation of the project has re-commenced.

The prototype has now been developed to a stage where the rotation animated button has been fully resolved and implemented. When the user is attempting to rotate the shape, the miniature head now gives a clear representation of the intended rotation.

Implementation of the hot-spots has began on the diamond shape. When the user rolls over a hot-spot, the appropriate annotation and tag-box appears, it subsequently disappears at any point when the pointer leaves the hot-spot.

Presentation of this initial prototype to one of the main lecturers Lesley Ingram has resulted in positive feedback. Lesley was particularly impressed with the level of content detail that is aiming to be implemented. When discussing how the project could be implemented into the curriculum, Lesley suggested having it available at a computer in one of the practical labs, or using it as supporting material in lecturers through the use of a projector. Also it was suggested that development of supporting worksheets or similar paper based material could allow full use of the information made available in the application.

When conversion of paper based content notes into the interface is complete, Lesley has offered to proof read the theory in order to ensure that all information is accurate.

Week 14 will see further development towards a working prototype, the aim still is to complete the diamond face shape before beginning work on any other shapes, this will ensure that all technical hiccups are discovered at an early stage.

Week 11

As expected, week 11 has seen the full implementation of the navigation elements in the project. The dock now fully animates when rolled over, and when clicked, the user is directed to a blank section all set for the implementation of the 3d elements. The diamond shape has been fully implemented, the user can rotate the head in either direction, it also fades in and out when required.

My aim now is to create a fully working diamond section, this means the implementation of the 3d rotation button, and the animation of the hot-spots and appropriate tags. Once complete, work will begin rendering and placing the other shapes.

Week 12 and part of 13 has been set aside for work on the design report part 2.

Week 10

This week development of the logo and navigation bar began. Each letter in the logo now has an animated glow when rolled over. Similar to the logo, the navigation bar will have a drop shadow animation implemented, when the user rolls over a shape, a shadow will appear and will remain if clicked.

Work will continue in flash development into week 11 with the finalization of the navigation bar and the beginning of face shape implementation.

Week 9

In week 9 final tweaks were carried out on the layout of the interface. The logo has been moved slightly upwards so that the bottom of the text lines up with the tag boxes on either side, and 2 of the corners on each tag box have been feathered. It was also suggested that the tag boxes should line up with the mirrors, but experimentation with this lead to the interface becoming to visually shallow. The final layout solution can be seen below -



Completion of the pear shape layers means that two of the heads are now complete to begin prototyping. In week 10, concept and development of the animation elements will be carried out, with basic testing beginning in flash. This is likely to include the animation of the logo, the transitions required for elements to appear in the scene, and the initial composition of the interface on startup.

Week 8

Extended discussion regarding the visual hierarchy of the interface has lead to another rethink regarding the orange curve. It was decided that the curve should become more of a background element so that there is less conflict between it and the master head when rotation occurs. By doing this, it was hoped that the positioning of the tag boxes would also become more natural and clear.



As seen in the above image, the interface is now separated into four distinct layers of depth. The logo has more room to breathe and the tag boxes now sit naturally in a symmetrical layout. Increasing the size of the tag boxes has allowed an increase in the font size. Also seen here is a prototype of the dock system to allow navigation between the different face shapes.

Week 9 shall see the finalization of the remaining elements and layout, then work shall begin completing the other 7 shapes leading up to the final implementation in flash.

Week 7

In week 7 I developed the rotation buttons and the hot-spot animations.

I decided that the rotation button should be a mini version of the master head with arrow heads either side of it. When either of the arrows are rolled over, the mini head rotates to appropriate direction to simulate the master head rotation. The mini head was created using contours through mental ray -



The hot-spots are to be circular orange circles similar to a cross-hair, this is intended to attract the user to interact with them. When the user rolls over the hot-spot it will rotate in a direction relating to where the corresponding tag will appear.

Also this week, time was spent making sure that the alignment of elements in the interface is perfect. In particular, making sure the tags sit in the same position when the interface is divided into 4 corners leaves the interface looking more professional.

Work has now began creating all the content for the final implementation, a sample of the diamond shape at -45 degree's, complete with tags, can be seen below -



In week 8 I will continue making content and perhaps begin testing of the animated elements.