Tuesday, November 27, 2007
Actionscript
I've been having some trouble with the actionscript in my flashplayer. Firstly I was trying to find some scrip to make a sound play when a button is pressed. I thought this would be pretty simple but whatever I tried nothing seemed to work. I tried different tutorials and asked for help in my seminars. The simplest solution was to make each sound clip into a movie which, when the button is pressed, it would play. This seems to be working fine and I added a simple "stop();" command to stop the sound from looping. My next problem was making the sounds on the next page play continuously when the button is pressed until another button stopped the sound. This didn't seem to be an easy task either. I thought that if I simply removed the stop command I added in the previous page then it would just play continuously but no, when the stop was removed the button no longer had control of the sound and it just played continuously when the user navigated to the page. When considering many options I decided the best option would be to copy the sound several times into the timeline, this would work better anyway as children tend to leave pages on the computer on and it wouldn't be very good if the sound continued to play for hours and hours. At present the sounds seem to be working fine, for now anyway.
Sunday, November 25, 2007
Semi-Final Page Designs
I have nearly finalised the designs for my flashplayer pages. I don't want to say they are final as I may change my mind.
Welcome Page
This page is friendly and welcoming. I had some trouble making the simple buttons work as I missed small details like making the text single line rather than multiline and selectable rather than none selectable. I also forgot to create a large hit area which is important when making something interactive for young children. It's difficult to remember all these small details when it's been a while since I have used Flash. I am now starting to get the hang of it and am remembering key stages in creating a Flash Player that I ahd forgotten.
Story Page
Sound Mixing Page
I think incorporating the sounds into the Flashplayer will be my biggest challenge as I have not done this in a few years. I think I have to make the sounds clips into movies and then the buttons will just play the movies. The sounds in the story page will just have to play once but the sounds in the mixing page will have to loop to play continuously until the user presses the stop button. I think when doing this I will have to ask for help in both seminars and surgerys that are timetabled in the next couple of weeks.
Welcome Page
This page is friendly and welcoming. I had some trouble making the simple buttons work as I missed small details like making the text single line rather than multiline and selectable rather than none selectable. I also forgot to create a large hit area which is important when making something interactive for young children. It's difficult to remember all these small details when it's been a while since I have used Flash. I am now starting to get the hang of it and am remembering key stages in creating a Flash Player that I ahd forgotten.
Story Page
Sound Mixing Page
I think incorporating the sounds into the Flashplayer will be my biggest challenge as I have not done this in a few years. I think I have to make the sounds clips into movies and then the buttons will just play the movies. The sounds in the story page will just have to play once but the sounds in the mixing page will have to loop to play continuously until the user presses the stop button. I think when doing this I will have to ask for help in both seminars and surgerys that are timetabled in the next couple of weeks.
Friday, November 23, 2007
Flash Player Designs
Page One Design One
This background did seem to match the theme of the flashplayer but the colours would clash with the other pages.
Page One Design Two
This page looks too plain and is not exciting at all to look at.
Page Two Design One
Again this page is just a bit boring although it does look better than page one as this page is busier with images and text.
Page Two Design One
This page looks plain and the colour of the clouds is not different enough from the backgound colour which makes the whole page look washed out. I do like the idea of using clouds and I may incorporate this into my other page designs. It makes the page child friendly and fairy tale ish.
This background did seem to match the theme of the flashplayer but the colours would clash with the other pages.
Page One Design Two
This page looks too plain and is not exciting at all to look at.
Page Two Design One
Again this page is just a bit boring although it does look better than page one as this page is busier with images and text.
Page Two Design One
This page looks plain and the colour of the clouds is not different enough from the backgound colour which makes the whole page look washed out. I do like the idea of using clouds and I may incorporate this into my other page designs. It makes the page child friendly and fairy tale ish.
Thursday, November 22, 2007
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.
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
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
Wednesday, November 21, 2007
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
Welcome page design
Storybook page designs
Saturday, November 17, 2007
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.
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.
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)
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)
Saturday, November 10, 2007
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.
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.
Wednesday, November 07, 2007
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.
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.
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.
Thursday, November 01, 2007
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
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
Subscribe to:
Posts (Atom)