Final Interface

 For my final interface I took the feedback which I was given into account and made quite a lot of changes. I made most of it 3D, adding a lot of gradients. I also changed the background to grey and added drop shadows to each to the little nodes. Overall I think it turned out really good. The 3D side of things looks awesome and I think the tutors will be very pleased with it.

Feedback

In my interim presentation the tutors really liked my application but they suggested a few things I might want to look at which are as follows:

• Get rid of the black background-They thought that it was quite overpowering and told me that nothing really looks good on a black background, especially the white text, it apparently is hard on the eyes, haha. A gray background was suggested.
• The outer rings could be more 3D-At the moment the rings are very 2D and adding a gradient to them like I have on the buttons was suggested. Or even add a drop shadow , a very subtle one though just to give them a bit of depth.
• What do the graphs mean-There was a bit of speculation as to how far the graphs came out from the center and how far they reached round. What was suggested is it represents how long it was used for or how much power it used.
• Rings around buttons were too intense-One suggestion was to make the rings thinner but I think they look fine so I'm gonna leave them.
• Back button stands out too much-Because the back button is blue at the moment it is drawing attention away from the main interface. What was suggested was to make it grey, less noticeable.
• Graph segments don't respond like a button-When the segments are clicked they do nothing so what was suggested was to make them like the buttons and look as if they are being pressed.

I got some pretty good feedback from the presentation and I am definitely gonna look over my interface and make changes.

Development

 I decided to go with a black background for my interim presentation and managed to get all of the buttons acting like buttons so when you click on them they look as though they are being pressed.

I also added a back button so whenever you press it you return to the main screen which I think turned out really good and is very easy to use.

I changed the text to white just to make it stand out a bit more but I'm a bit unsure if I'll keep it.

Development

With some help from Paul I was able to get my circle so it stopped moving which is good. I have also managed to get some graphs onto the circle for the people who want more data. It is pretty simple at the moment but what I want is for each little segment when pressed to open up written hard data for the user, eg. KW/hr, the price it's costing etc.

Something must be wrong with my code though because the data keeps on flashing like a maniac so I will have to revisit my action script.

The idea for this type of layout for the graph came from one of my earlier posts and is the image on the right. I decided to download this app to see what it is like and it is pretty cool to see what is using up space on your computer. Anyway I really liked this idea and decided to go with it in my own design.

Like the rings they are color coded to give the general energy usage to the user, red = too much energy, orange = moderate energy, and green = low energy.

Development

As I was progressing through my project, going pretty smooth, getting lots of buttons, the BAM! I get lots of errors and my project pretty much dies.
The thing I am finding hard is the code part of the flash because it can get pretty intense.


With the sub circles I managed to get them into buttons which pretty much do the same thing as the home button which I'm pretty happy with at the moment. When you click on the kitchen button I got it so it expanded and moved to the centre but it does not want to stop moving which I will have to play with the stop function in the actions window.

Button development

The button tutorials I found on the flash websites are way too complex for me but luckily I have the gift from the heavens which is Youtube. The 3D button tutorial worked very well and I am definitely keen on using it in my final application. Here is a picture of it:

Button not Pressed

By using the gradients for the colour scheme I was able to really look like light was being cast onto it and thereby rendering it very 3D like in appearance. When clicked I even got it to appear as if it was being pushed down by switching the gradient when it is pressed to the other side. This is shown in the second image:

The result of this is quite spectacular in my opinion because it gives things depth and really takes things to the next level.

Button Pressed

Beginning Flash

As I am new to flash I did a couple of tutorials, just to get the hang of things like how to work buttons and make things move, etc.Here is one of my first tries at a button, I found some really good tutorials on youtube on how to make some very realistic 3D buttons which I might explore.

When the button is pressed it has sub circles which move out from the center and stop a certain distance away.Hopefully I will make the sub circles into buttons which then open up further to reveal info.

The final image is an improved version of the second with a slightly budget version of a 3D button but it's a start.