Finalize Overall and Testing

After the some tries and fails, finally I finish the interactive design~ 

I correct some parts which is "off position". I also put audios in Flash to bring out the mood. It is a story telling kind of interactive design, so music should included in. Then I test it out.

The main idea of having an oval shape masking is to show broken part of the user's "glasses", instead of reveal the whole scene, I want to keep it mysterious.

Details in Interactive

After some tries, I realized some of my interactive design like time delay button and random click is not functioning well, so I decided "throw" it away but add more button. This is better than the previous one, as this's more effective.Users can directly spot the buttons.

I also consult with lecturer on my Actionsript.

The code I used:

mask (* learn from YouTube~)

Loader

Mouse Event: Click, MouseOver,Drag & Drop

If else statement

Visible=false/true (*mostly)

gotoAndPlay

gotoAndStop

I think these should be all. 

Progress into ActionScript

The upper picture is the information box I make for my interface. My interface is pretty much like Education type, so I have been suggested to add words instead of fully visuals to communicate with the audience.  

After I done the animation of the information box, I apply it to my characters with the usage of Actionscript. I make my characters as the "buttons", so the users can interact with them.

This is the outcome when Mouse Over the characters, the info. box will came out. 

Progress to Flash

I start to animate the basic animation in Flash, I do these in different file so that I won't mix it up. 

Background design (2nd scene)

Background and characters design for the second scene. I used the "social network" as the design element to bring out the message which I want to portrait. As for the characters designs at below is the ugly side the truth of the human, which is what I want to convey about the human (their looks when too depends on social network) in the future.

Background design

This the background I designed for the interface.

These are the characters I designed for the foreground, and these characters also act as the buttons. 

Characters design

For the foreground, I design 4 characters so the users can interact with them.

References

I found some references which related to futuristic buildings for my background design.

Moodboard~

After some research, I have chose my own art direction for this interface.
Art References from
# Valentina Ferioli #
# Veronica De Fazio #

Flow Chart

This is my flow chart for my interface design.

Details the interface

This is the interface of the final design. After some discussion with lecturer, I realized my design lack of interaction design, so I added some of it, like click, mouse over and drag and drop. The blue and the red crosses is the scene I not going to use it. In Scene 1 to 4, it's a 'perfect idealist world' which I mentioned last post. The characters on the screen is clickable, users can interactive with them. After a few clicks, a sudden change happens in Scene 6 then the 'glasses' in Scene 7 takes off from the users's point of view. The last one is a totally change of the reality world. Users still can 'drag and drop, their 'glasses' to compare the Virtual city and reality. Making this, is to deliver the awareness to the users about social network with the way of "unconsciously" or give a "surprise" to the users. Scene 1 & 2 is a little intro, then automatically change to Scene 3.   

Final Idea

After a consultation with lecturers, the first and the second idea was not really convincingly. Therefore, I done some researches and review my lecturers's suggestion. And here's my final idea of mine.The main massage of this idea is to show how bad could be the social network in the future, to give awareness to the users. Basically I create an idealist world in the future, which is pretty imaginative.For this interface design, I created 2 future world. After some discussion with lecturer, I used the first one which is, a future world where everyone wearing their high-tech glasses since they born and they only see the 'perfect idealist world'(but is a virtual world). They have to take down their glasses so they can see the true reality world.

As you can notice, I combined the 1st & 2nd idea of mine. Oculus rift has inspired me to come out with this idea.

Second Progress (Generate Idea)

This is the second idea of mine. The main idea of this is, Dreams is where the inspiration comes from and to our work.Dreams is a very abstract Virtual World which created by ourselves, and we can inspire by our dreams to our future work like designs. Therefore I thought of this interface to help the designers to get inspiration. Basically users have to 'take out' their "phone camera" so that they can see the five main characters which people most dream of like imaginary friends, superhero or myth character, in this interface to lead the users to the information.The 'phone camera' represented the extension of human's eyes in the future, which they can explore more creative things through the device.

First progress

This the very first idea of mine. When I thought about Virtual City, Social Network came into my mind. The idea behind this is, Virtual world always not as same as the reality.I'm thought about how the social network will become in the future, maybe will be more abstract or not easier to defined than now (profile of a person). Therefore, I thought out of this interface, using in more fun but ironic way to give AWARENESS to the users to beware of the potential dangerous in social network.