Flash Player Vector Graphics (cont.)

Here is a picture of the character that will introduce the flash player.



Here is a picture of the fairy tale castle that will feature in the story page.

Flash Player Vector Graphics

I have created some vector graphics in Adobe Illustrator to incorporate into my flash player. The finished images are simple and easily recognizable, this is important as they will be very small on the 'read the story' page.

These are some pictures that will represent the sounds to be played in the story.

Sound picture for magical fairies



Sound picture for prince



Sound picture for princess



Sound picture for princess sleeping



Sound picture for witch



Sound picture for yawn



Sound picture for monster

Sketchbook Update 2

I've started doing some basic page designs for my flashplayer. I know I'm not the best at drawing but hopefully my ideas will come across.

Welcome page design



Storybook page designs

Navigation for Flash Player

I have decided to have three separate screens so each one is not too crowded. The welcome page will explain the flash player and what you can do. The story page will have the story laid out and the viewer can read it and click on pictures which will play a corresponding sound. This will be an interactive story. The 'mix the sounds' page will list all the sounds and each one will have it's own play, pause, stop and volume controls. When played the sounds will be looped to play continuously to make mixing the sounds easier for the user.

Sketchbook Update 1

I've been keeping a sketchbook throughout this project for research, ideas, inspiration and design ideas. Here are a few pages.

















As you can see I have been looking into what interactive stories are online now, most of the ones I found were from the cbbc and cbeebies websites. Some of the examples are more interactive than others and some seem to be interactive and let you have control over the story but then whatever the user chooses to do does not affect the story at all which was quite disappointing.

I have also looked at children's television, film and story characters. I think it is important to have a character that the user can identify with and for children it is not important whether they are human, animal, or even alien, as long as they are friendly. i have decided that my flash player should incorporate a character to introduce each page and give instuctions on what the user will have to do. As you will have seen I have started on some rough sketches of ideas for my own character.

Story

This is the story I plan to use in my Flash Player. The words in brackets represent sounds but in the final product these sounds will be represented by small pictures.

Once upon a time a princess (FLOATY SOUND) was born. The king and queen were so happy they threw a party and invited 3 magical fairies (MAGIC SOUND). At the party an evil witch (CACKLE) arrived, she was jealous she had not been invited to the party and cast an evil spell (CACKLE) on the baby. This spell said that when the princess (FLOATY SOUND) was 16 years old she would prick her finger on a needle and sleep (ZZZZZZZZ) for 100 years. The only way to break the spell would be a kiss from her true love. To try and get away from the evil spell the three magical fairies (MAGIC SOUND) took the princess and moved to a little house in the middle of the forest. The evil witch (CACKLE) still found the princess and on her 16th birthday she pricked her finger and fell asleep (ZZZZZZZZ). Many years passed by and the princess stayed asleep (ZZZZZZZZ). A handsome prince (DUMDADUMDUM) heard about what the evil witch (CACKLE) had done to the princess (FLOATY SOUND) and decided he would try to save her. He battled with horrible monsters (RRRAAAAHHHH) on his journey. Finally he found the princess (FLOATY SOUND) and saw she was still asleep, (ZZZZZZZ). He gently kissed her and she woke up and smiled. (YAWN). The handsome prince (DUMDADUMDUM) and the beautiful princess (FLOATY SOUND) were in love and lived happily ever after.

Idea

My first idea was to create a flash player in the style of a retro tv or radio. I liked this idea in theory but was struggling with ideas for sound that would relate to the design of the player. I then came up with a completely different idea altogether. I have decided to aim my flash player at young children, mainly girls aged 3 to 9 years old. My flash player will be based on the idea of Disney sound books i used to read when i was younger.





The viewer will read the story and click buttons to incorporate sounds. There will also be a separate page to play the sounds together in any combination to create an interesting mixture of sound. I have decided on the story 'Sleeping Beauty' as this is an easy story to shorten and minimize down. I have decided on 10 sounds that i will need to record for the story. I'm really excited about creating this flash player incorporating a story as I think it will be fun to design for a young age group which I have not done before. The actionscript should not be too complicated but will be a challenge for me as I do not know much about programming actionscript.

I have divided the project into different stages to help me keep focused throughout the workload. I have also labeled them small (s), medium (m), and large (l) to give me an estimated amount of time I should be spending on each section.
- Character design (s)
- Plan flash player navigation (s)
- Layout design (m)
- Page design (l)
- Record sounds (m)
- Alter sounds (l)
- Complete flash page designs (m/l)
- Import sounds (s)
- Flash actionscript (l)
- Testing (m)

Some Basic Research

I started to look at some basic flash players but i found this to be more easy said than done. I did manage to find a few examples at -
http://components.developers4web.com/mp3-flash-player









Flash Players seem to all consist of a few simple buttons:
- Play
- Stop
- Pause

Some also include
- Fast Forward
- Skip Forward
- Rewind
- Skip Backwards
- Volume Controller

3D designs are often the most effective and some seem to look like photos of physical mp3 players. I want to create a Flash Player that bends the rules of the bog standard slightly and I want mine to have a purpose that is more than just playin samples of random sound.

RefWorks Task

Using RefWorks create a bibliography of likely books for discussion next week. You will be expected to provide a brief synopsis of the books in next week’s tutorial. Post the relevant books on your journal.

Saffer, D. (2007). Designing for Interaction - Creating smart applications and clever devices. United States of America: AIGA Design Press.

Synopsis;
This book is a great starting point for interaction design. It starts by explaining what interction design is and why it is used. Everything is explained clearly and takes the reader through the theory of an interaction design project step by step. The book also contains laws of interaction design, such as Hick's Law which explains that the time it takes for users to make decisions is determined by the number of possible choices they have, for example a user will make choices quicker from one main menu containing 10 options rather than two menus containing five items each. The book even explains the elements of visual design such as typography, layout, and colour. The book is clear and concise and well worth a look.

Wands, B. (2002). Digital creativity: Techniques for digital media and the internet. New York, United States of America: John Wiley & Sons, Inc.

Synopsis;
This book starts with the history of digital media, it then moves on to take the reader through the basics of digital media such as operating systems, software applications, and the web-safe colour palette. My favorite part of this book is the chapter entitled 'Creativity". This chapter gives the reader hints and tips on how to be creative, it gives you exercises and activities to increase your creativity. This book also includes sections on design and typography, but also gets more specific towards the end by including separate sections for web design, video production, 3d animation, and audio. This distinction between different types of digital media makes it helpful for any project regardless of the specialization.

Elements of Interaction Design: Task 2

The classic Palm Vx PDA designed by IDEO



What does it look like?
It has a sleek contemporary design. Minimal physical buttons as it is mainly touch screen. Small and compact for ease of portability.

How easy is it to use?
As I have not used this product myself i decided to find a user review online.
"Reliable workhorse but lacks space
Pros: long battery life, reliable, lots of freeware
Cons: no backlight, insufficient space, low alarm sound, needs a serial port"
Posted by evwool - October 27, 2007
http://reviews.cnet.com/pdas/palm-vx/4505-3127_7-1432994.html

How relevant is the content of the site and how clearly is the content organised?
I found it difficult to find any IDEO products on their website, in my opinion it is confusing and badly organised.

Sony mp3 Walkman NWZ-A815
www.sony.co.uk



What does it look like?
Available in black, white, violet, silver and pink, this choice makes the product feel more personalised. It is small and light and therefore easy to fit in a pocket. Mobile phone-like menu and interface for easy usabilty. 2 inch screen size which makes it large enough to view videos.

How easy is it to use?
Again, as I have not used this product myself I used an online review.
"Best thing ever"
"What I like: no software & effortless using"
"What I don't like: headphone leakage"
"Brilliant sound best ive heard on a mp3 player & i have owned a few? Video is a sharp as the new nano but the Sony somehow feels a little bigger? same 2" screen but you can turn video around. Build is a nice metal,feels like quality not plastic.the only critisysm is no video converting software?"
Posted by: stuboy - November 5, 2007
http://reviews.cnet.co.uk/digitalmusic/0,39030001,49293170-39282247o,00.htm

How relevant is the content of the site and how clearly is the content organised?
The Sony website was easy to find and simple to navigate through. I found the products easily and all the information, both the summary and technical information of the product, was clearly communicated.

Apple MacBook Pro 15"
www.apple.co.uk



What does it look like?
The MacBook Pro is well designed, slim and lightweight. With a widescreen it is larger than most laptops but yet still compact. The silver colour gives it a professional look and feel.

How easy is it to use?
The product is simple to use because of its simple design. The widescreen makes it brilliant for watching DVDs, although the sound leaves something to be desired as it is very quiet. The large screen makes it easy to use more than one application at a time and work on simultaneous projects. the mouse control could do with a right click button, this is a flaw with all Mac computers that can be very irritating. Overall a brilliant piece of machinery, beautiful as well as technically practical.

How relevant is the content of the site and how clearly is the content organised?
The site gave me all the information I needed to know about this product. It also has a contact option and this can be useful as many people may want to ask more detailed questions when spending this much money on a product. It is rare to find a site showing so many products yet being clearly organised and easy to navigate around.

The Brief

Create an interactive Flash-based sample player with original recorded sound.
Keywords: Human Computer Interaction (HCI), interface design, sound

Assessment Requirements

- Upload the finished sample player on the Multimedia Student Server
- Online project journal entries
- Project evaluation (500 words, PDF format)

Handing in/upload date
10/12/07 - 10am

John Maeda

Born 1966 in Seattle, Washington

He is a Japanese-American graphic designer, computer scientist, university professor, and author.

In 1999 he was named one of the most important people in the 21st century.

Maeda first made his mark by redefining the use of electronic media as a tool for expression for people of all ages and skills.

He is the recipient of the highest career honors for design in the United States.

John Maeda is an artist and a computer scientist, and he views the computer not as a substitute for brush and paint but as an artistic medium in its own right.

Random Facts About John Maeda:

He likes to wear Bermuda shorts and T-shirts

The quality he desires in women is trust

He works best on airplanes or in coffee shops

He would like to live in Europe

His favourite flower is the Iris

He is afraid that technology will make us stop imagining and we’ll get stuck

His favourite author is Paul Rand

His favourite colour is blue

His best occupation is being a father

www.maedastudio.com
Number Racer Game
Oikake Zakura
Do Re Mi-Chi

My trip to the Tate Modern

On Wednesday I took myself down to London and went to the Tate Modern. I really enjoyed it and thought some of the works were amazing. I've always been a big fan of Salvador Dali, Max Ernst and Roy Lichtenstein so it was good to see some of their work up close.


Salvador Dali _ Metamorphosis of Narcissus 1937

I also loved seeing some brilliant work of people I've never heard of (some of which I recognized the work but never knew who had created it). It expanded my knowledge of the artists that use the style I really like which can never be a bad thing.


Raoul Hausmann _ the Art Critic 1919-20


Fernand Leger _ Two Women Holding Flowers 1954


Sir Eduardo Paolozzi _ I was a Rich Man's Plaything 1947


Francis Picabia _ the Handsome Pork-Butcher 1924-35
(I really liked this mixed media image but I did think the combs stuck onto the image kind of ruined it.)

I enjoyed some of the more interactive arts such as Helio Oiticica, Tropicalia where a room was covered with sand and gravel paths. There was a cage with two amazing parrots (real life) and a random two random cubilcles, one which you could see in straight away and was just empty, and the other where people were only allowed in one at a time and you had to go through a dark little walk way with rainbow curtains covering 3 points in the corridor, then once you had navigated your way through this you got to a fuzzy TV screen where the reception would come and go so you would hear snippets of the news amongst white noise. It was a bit strange and I'm not really sure what it was all about but it was certainly fun to experience with all the mystery.

Another room was painted with lines in different shapes and when you entered and looked around it made you feel dizy and even a bit sick (Sol LeWitt, Six Geometris Figures). Elsewhere there was also a giant bubble machine (David Medalla, Cloud Crayons No.3 - An Ensemble of Bubble Machines), and a room full of different coloured flourecent light tubes (Dan Flavin, Untitled (for Donna) Sa)

One thing not to miss if you go is the State of Flux exhibition. There is a film on three screens made by Steve McQueen called Drumroll (1998). There are three cameras in a barrel filming as it is rolled along the streets of New york. One camera at each end and one on the side in the middle of the barrel. It made me feel a bit sick when watching it but it's good to catch little things passing by, I thought it was a brilliant idea.

Identities Final Evaluation Report

IDENTITIES MMPR10106
Stage Four – Final Evaluation Report
Module Leader – Julius Ayodeji

Discuss changes made as a result of review and analysis from surgery/ progress review sessions, plus any other testing, analysis and evaluation you have undertaken during this project.

Introduction

This document is a final evaluation report for the Identities module. The project was divided into four stages, a design board presentation, production of the Ident package, Ident package presentation, and a final evaluation report. This report will evaluate the project, covering areas such as research, working methods and finished product. It was chosen to create an Ident package for the Multimedia course at Nottingham Trent University. When beginning this project it was important to research the Multimedia course at Nottingham Trent and find out what sort of ident package would be most suitable. After looking at the course information available it was decided to create a web banner to advertise the course, a brochure to send out to colleges and give out at open days, and finally a website to create an easy way to access information about the course.

Evaluation of Time Plan

When this project began a time plan was devised to break up the project into manageable tasks (see appendix, Time Plan). The time plan was detailed and tasks were assigned to each day. As learned from previous projects it was important to make a schedule in order to keep on track with the project, unfortunately this time plan was unrealistic and not well planned, which made it difficult to stick to. The plan did not allow for days off during the project until the contingency time towards the end, and it is impossible for anyone to work all day everyday for three months. As the project began it was soon clear that the time plan did not allow enough time to learn software programs such as Macromedia Dreamweaver (see appendix, online journal entry April 30th). So due to bad planning and an unavoidable month off it was not possible to stick to the schedule. In the future any time plan made would have to be a lot more realistic and therefore possible to stick to. A good idea would be to constantly update the schedule if not keeping on track, and also to allow more time to learn software. It is important to allow enough time for compulsory parts of a project such as research and collating information. Another idea would be to use a different way of accessing the schedule for example using reminders on a computer for key dates or using a wall calendar to pick out deadlines.

Evaluation of Visual Designs and Technical Quality

The first stage of the Identities module was a design board presentation. In this presentation it was important to clearly communicate the intended design for the package and the methods that would be used to produce it. Research was carried out about website design, (Pal, K. 8 tips for designing a great website. [Online]), and branding design (Spool, J.M. 2002. Determining How Design Affects Branding. [Online]). A presentation was produced which included visual designs of the logo (see fig. 1), web banner (see fig. 2), and website (see fig. 3). I was given feed back (see appendix, Identities Module feedback), which helped me develop the designs further, (see appendix, online journal entry February 16th). The designs were plain and not completed to a very high standard; the designs were altered due to peer feedback as the project progressed. If more feedback had been sought the project would have progressed at a greater pace. In this project it was important for a student to actively seek out feedback, which is something that was unfortunately not done often and is something that would have to be done more when carrying out future work.

Fig. 1


Fig.2


Fig. 3


To produce the Ident package, it was important to learn software, this was done by using both online tutorials and a book which I found very useful by Negrino, T. and Smith, D. (2006. Visual Quickstart Guide. Macromedia Dreamweaver 8). Whilst creating the Ident package it was crucial to insert images in the right format, either as a gif or jpeg file as this would have a direct impact on the quality of picture, and downloading time for the website, I found this was quite simple to do in Adobe Photoshop.

When creating the website, rollover images were used as buttons to link the pages together and these images were first created using Adobe Photoshop and then imported into Macromedia Dreamweaver which is the main software used to create the website. Creating the buttons this way makes them easy to use in a text only web browser. The buttons on the website are clear and this, in turn, makes the website simple to navigate through. This accessibility issue was also why the website was created in Macromedia Dreamweaver rather than Macromedia Flash. Much of the information collected for the website from the Multimedia course guide, and the Nottingham Trent University VLP (Virtual Learning Portal), this was both useful and informative, but still easily readable on the website as it was divided into different sections and broken down to make it easier to understand. When accessing the website no specific players are needed such as Flash or Quicktime, which makes it easy for anyone to view.

Whilst designing and creating the package it was discovered that continuity is an important part of any Ident package. The original web banner had no similarities in look or feel to the website or brochure. This was altered by using the stripes theme used from the website design, and using similar colouring (see Fig. 4 and appendix, Final Web Banner Screenshots). By doing this, the whole package came together so if someone were to see any aspect of it they would know what the course was, as it is easily recognized as the same identity package.

Fig. 4


It was also important to take this continuity through to the brochure design, as is usual in an Identity package the same logo was used throughout but this alone might not have tied the brochure together with the web banner and website. To solve this problem another aspect of the website was used, this time it was the corner design of bold stripes of colour in curved shapes, (see Fig. 5). Continuity was achieved in the package by adjusting these aspects of design and it now looked like a corporate brand identity. The brochure contained a lot of text on the inside and it was difficult to still make it readable and not to make the pages overcrowded, this was possible by breaking up the text with subtitles, using bold, italic and regular text, and summarising the information as much as it would allow. It was surprising how carrying out these alterations the brochure did not look too packed with text but yet it still contained the necessary points that a prospective student would need to know, (see Fig. 8).

Fig. 5


Evaluation in Context

The inspiration for the Ident package was found whilst researching websites for a similar target audience such as the E4 (see Fig. 6), and The Strokes (see Fig.7) websites. These websites were both bold in colour but yet retro and this look and feel was wanted for the Ident package.

When creating the website for the package it was important to look at other university websites for the same or similar courses in order to find out what information they were making available. It was clear that other universities’ information was a lot more detailed and sometimes easier to understand and also included module information. The website created for the Ident package took this into consideration and included all the information a prospective student would want to know and also some information about the city of Nottingham for those students considering moving from a different city. After receiving feedback from peers it was decided to make the website less young looking as it was not appealing to the target audience of 18 to 25 year olds. This was done by changing the buttons and using square text and image boxes, even though these changes were small it had a big effect on the look and feel of the website. It was also decided to make the colours less earthy as this conveyed the wrong semantics for a course that involves a lot of computer work.

Fig. 6 (please go to www.thestrokes.com)

Fig.7 (please go to www.e4.com)

In comparison to other websites, brochures and web banners, this Ident package was individual as it used inspiration from other designs but with original ideas being the main basis. From the final feedback received in the Identities package presentation, it was clear that the brochure design was well thought out and easy to read even without the use of images, (see Fig. 5 and Fig. 8). The final design of the website conveys a neutral feeling in the design. It contains striking images that attract the eye, and the text is easily readable. The site is simple to navigate through and the pages are not overcrowded, (see Fig.9 and appendix, Final Website Screenshots).

Fig. 8


Fig. 9


Final Evaluation

In this project the brief was to create an Ident package for Multimedia BA (Hons) at Nottingham Trent University. A brochure, web banner and website were created. Along the way it was learnt that a time plan is imperative in order for a project to be successful, in future a schedule would be the main starting point as well as a key element as the project progresses. The time plan in this project was less than perfect and that would be something that would have to be a main consideration in future works. Contingency time is especially important and in this time plan nearly two weeks was given and this would be a good point to keep in future schedules.

It is important to seek out feedback in order to know if designs work well in other people’s eyes. If this is not done the project can go in the wrong direction and becomes irreparable if left to get too far along without objective opinions. Although some feedback was sought in this project it was not enough and much of it was from peers who it is hard to get completely unbiased views from. It would be a main objective in the future to actively seek out feedback, whether it is from tutors or strangers on the street.

Research is vital in a project of this nature and although it was carried out in this assignment it could have been done in more depth. Detailed research makes it easier to start work on a project because the more informed someone is at the start the less time it wastes looking for information at a later date. This would have been possible if an early start had been made on the task, and this is a key point to remember for the future.

Overall the work carried out in this project was successful, there are some main points to take into consideration in the future, such as time planning, the usefulness of feedback, and importance of research. As always there are a number of other mistakes to learn from, such as being realistic when it comes to learning software, and trying not to get to complacent after deadlines. After the final feedback given in the Identities package presentation (see appendix, Identities Module Feedback) it was clear that there were some aspects of the package that could have been improved such as adding more pages to the website, these may have included current student work and graduate employment. Many aspects of this module were carried out well, such as the breaking up of the project into smaller tasks to make the project seem more manageable. It was central to this assignment to be realistic with what could be achieved but to also push the limits on your own skills and ability and in this project this was accomplished.

Nearly finished first year... I can't believe it!

I'm really pleased that the Identities project is over. I enjoyed doing it and was pleased with what I came up with. I can't believe the first year is nearly over, it's flown by so quickly. Now I've got to concentrate on the end of year presentation. I want to do Interactives next yr because I think it'll be a good opportunity to experiment with what is possible in Multimedia. I'm a bit surprised that I haven't managed to find anyone else who wants to do it but I suppose it doesn't really matter. I'm a bit worried about the end of year presentation because I don't think I've really got enough work to show what I can do and prove that I'll be able to do Interactives next year. I think I might try and do some experimental work over the next week to take in for my presentation. Well we'll see how it goes.

identities Progress

I was a bit disappointed by this feedback, but overall I suppose it wasn't too bad. They picked up on things that were obvious but that totally escaped my thoughts. I didn't include any contact information on my website which was a silly mistake but one I made nevertheless. I did include links to NTU website which I suppose is a way to find out contact information, but not a simple way I admit. I also realise that I shoud have thought about adding some more pages (as suggested in the feedback) as these might have given prosective students extra information to help them make an informed decision about the course and the city. The comment about the strapline on my web banner was a bit harsh I think hate is a rather strong word, but I suppose there has to be something not to like.

Identities Progress

Feedback from Ident Package Presentation

Able to articulate elements of package well
Flyer- nice design. Best version I have seen that doesn’t use images. Really well-balanced and fits in a lot of text without it feeling text heavy.

Log design- clear process and reasons discussed
Banner-good simple. Hated the cheesy strapline though. This process something to evaluate?
Site-original photos mostly which is good. Simple but all working. Possible relevant sections are current student work, graduate employment.

Should be easier to contact MM staff

Identities Progress

I tested my website today, couple of little problems with the way the text is layed out when the website is opened in Internet Exporer, but apart from that all was well. So plan for tomorrow is just to correct these little glitches, test again then (fingers crossed) it'll be ready for the deadline on Thursday.

Identities Progress

Finished my website!!! If all goes to plan I will go into uni on Tuesday and test it is working on the computers in Waverley then burn all my work onto disc ready to hand in on Thursday. I have already tested the website on some friends computers and it works fine but better to be safe than sorry. I'm really happy with the end product and think it fits the brief perfectly as an Identity package for Multimedia at Nottingham Trent University. Fingers crossed the tutors who mark my work will feel the same.

Identities Progress

Went out and took some lush pictures for my website a couple of days ago (last minute I know), and I'm so pleased with how much better my website looks when they're included. It now looks like a finished website (nearly), woohoo! I'm so suprised at how much I've been able to pull off with so little time (due to an unavoidable month off), I never knew I was capable of such good work when it's completly rushed and I'm under pressure. Well, I suppose you learn something new everyday.