Conclusion

From the beginning, I thought it was gonna be hard for me due to I do not know the term for the effect or codes that I want to search on. The only thing I know was the masking effect but this was hard too. It was easy to get tutorial on how to mask in flash but there was no masking effect tutorial on the effect that I wanted and it only allows 2D masking and not 3D.

I also learn that transition can make by using manually although codes will be much more simplified and clean. It was kinda impossible for me to get what effects that I want. But the idea on going manually really makes me understand the layers on flash and how the coding go on frame to another frame, no matter whether isn't within the layer or on the main timeline. It was really an advantage for me to learn about it.

After that, I learn about moving cursor effect and also image movement. I learn how to make the object to follow the cursor whenever the cursor goes which using simplified code on startDrag. Although it looks simple but the process on finding the tutorial and get to know this code was a challenge for me. Easing was the other thing that I've learn which really amaze me on how can the image moves slower then the cursor to feel the movement like an eyes.

Independent learning really helps me a lot on searching on tutorial by myself and not depending on my lectures. Although it may sounds and look simple but the process on doing this do take a lot of time on understanding. The only thing I regret is my UI design which I will improvise it more if I still have time. But overall, I'm happy on my learning and my artifacts. :D

Refine My Past UI

Due to the time constrain, I added background on my info pages so that it wouldn't be just a plain dull background.

I guess it looks way better then the previous single ton color background. :) Really thanks to some of my friend which gave me advice on adding background and changing texture on improvising my design in such a short time. 

New UI Design

Due to some critic and suggestion that I've got from my lectures and friends. They said that my design looks too simple but not interesting and nice to look at. Although it was sad but it gave me motivation to design a set of UI design again. But I have a slight problem which I could not place the design into my coding due to the time I have. If I have, I will definitely place design in it. Here is my design.

I placed a set of black grass to replace the normal black bar that we have to look related to my concept on animals. Then I use different colors to represent different animal to look much more interesting.

My color scheme,

This is the main page.

When ever you roll over the button, it turns grey and a overlay image will appear. This is the horse roll over image.

This is the dog roll over image.

This is the bee roll over image

This is the horse page which I make it a wider page which do not have header on top that allows the user to have a wider view. The buttons then placed on the left side where the users always see first.

To make the user to know which color is for which animal, there are roll over on the buttons.

This is the information page which will have a black and white overlay image behind the info which gives a consistencies.

Dog Interface 

Bee Interface

These are the references that I look through and inspired at. :D

Paris, T. (2012) Tep Chann Nimmith TEK - Portfolio webdesigner. [online] Available at: http://www.teptek.com [Accessed: 23 January 2013].

I just like the theme and color of this website which inspired me somehow on mine.

Jessicahilltout.com (n.d.) Home | Jessica Hilltout. [online] Available at: http://www.jessicahilltout.com [Accessed: 23 January 2013].

This is another website which I love the color which make me feel calm and warm which also inspired on the color that Im using.

Paris, T. (2012) Tep Chann Nimmith TEK - Portfolio webdesigner. [online] Available at: http://www.teptek.com [Accessed: 23 January 2013].

This website inspired me on the bottom bar on using grass and also the color scheme which is cool and nice.

This website inspired me on my round circle buttons and colorful buttons. :D

Harvard Referencing

Image

Rowland, P. (2010) Grass Goes Into Game by Perry. [image online] Available at: http://teaminsidevoice.blogspot.com/2010/06/grass-goes-into-game-by-perry.html [Accessed: 23 January 2013].

Favim.com (2012) black and white, cute, dog, photography, pug. [image online] Available at: http://favim.com/image/279080/ [Accessed: 23 January 2013].

Photos For You – Free Photos (n.d.) Bee 1 – Black & White Film. [image online] Available at: http://photos-for-you.com/bee-1-black-white-film/ [Accessed: 23 January 2013].

The Perversity of Conservatism (2010) Vote for Change Vote Republican. [image online] Available at: http://perversityofconservatism.blogspot.com/2010_04_01_archive.html [Accessed: 23 January 2013].

Update Design and Sharing Fb Prototype

I've updated the image from a dummy image from google to my picture. And this is the final look of my dog page design and dog info page design.

I forgot to update on my previous post on my prototype sharing page on Facebook. I was planning to add learning on doing facebook sharing on my flash. But due to some problem on my UI design, codes problem, I couldn't learn it in such a short period of time. So I designed a dummy prototype Facebook sharing pop up for my artifacts. 

Reference

HyperArts Blog (2013) Facebook FBML: Using the fb:share-button with Static FBML; Custom Image or Default. [image online] Available at: http://www.hyperarts.com/blog/facebook-fbml-fbshare-button-static-fbml-custom-image-default/ [Accessed: 20 January 2013].

Photomerge_Dog

This is the progress on me editing my photos of a dog point of view.

I took this picture in my house using the morning sun using props from my little dog. :)

Refine UI design

Due to my coding and the manual transition or animated things are too many and heavy, I couldn't afford to change the whole UI design which I know its too simple and not attractive enough. I added some details and changes to some of the parts which I was able to change and minimal changes to my coding. I was really regret that my UI design doesn't look perfect but I'll try my best to make it look better. This is some of the final changes that I did.

Added some texture according to the theme or the animal. Then I changed the buttons design into round which looks much more organize and neat. I also added some Roll Over animated effect to look nicer and interesting also. 

These are some of the Roll Over animated effect on the buttons that I did. :)

Firstly, I drew the shape in flash and set the alpha randomly, then did the animation. Then, placed a code behind the animation to ask it to gotoAndStopAt the first frame so it will loop. It took me time to do this too. 

Masking Effect with Gradient

I've tried for several times, thinking on how to make a gradient fade on my masking layer but it was hard and I couldn't find a solution for it. This is some outcome that I've tried.

At first, I've tried pulling gradient from photoshop and illustration but it wouldn't work. But I do not know how to place gradient in flash so I search for tutorial and I found this which teach me. 

This tutorial teaches on how to use gradient in Flash and it helps too. So I tried doing it in flash.

But it failed. As you can see, although I placed it as an gradient, it still changes into a solid circle after masking. It was really frustrating because I thought it will be fine and easy to get the technique but it wasn't. So I ask one of my past lecture who teaches me animation. He told me I couldn't do it using just masking. So he gave me one sample which using codes. And it was what I wanted!!! I was so thankful.

This was his file, 3 simple line of masking using codes. It thought me on how the codes work for masking gradient fade masking on Adobe flash. So I implement it to my project and it works perfectly. 

Referencing

Youtube (2013) Adobe Flash CS5 - Gradient Tutorial. [video online] Available at: http://www.youtube.com/watch?v=pJfbRfps-xM&feature=player_embedded [Accessed: 21 January 2013].

JiaWern, K. (2013) Masking Coding Effect. [Lecture]

Photomerge

Yay! I finally got back my camera from my cousin just in time to get my picture that I took for this project. I took max of 5 shots on the same spot by overlaying. I wanted it took edit into a panorama shot. So I overlap each edge on repeated things on the past one. 

After that, I found a tutorial on how to merge several continues shots of picture in to a panorama shots.

Rowse, D. (2007) How to Create a Panorama with Photoshop and Photomerge. [online] Available at: http://digital-photography-school.com/creating-a-panorama-with-photoshop-and-photomerge [Accessed: 28 Jan 2013].

So I started the steps. By going to file > automate > photo merge. Then browse all the set of photos. After that, adobe photoshop will help to generate and match all the photos together.

TADAAA!!! I use 5 photos to merge into a panorama photo. Im editing this photo for a house point of view. I took this pictures in a park near my house.

Then, I use clone stamp to clone the grass to cover the walk path and take away the lamp too to make it look like its in the woods and looks natural.

I then set saturation, contrast, brightness according to the look and feel that I want which is to contrast the green more to look natural and nice.

AND THIS IS MY FINAL PIECE. :D

Now is time to edit the bee point of view's picture. It was harder because the picture are all close shots so it was really hard to merge and remember which is which so I browse all the picture and let photoshop to merge for me and it did.

After merging everything, I found the only one image that I could used which is the center wan. So I crop it and move to another page.

Because bee vision have slightly changes from a human and a bee. I did some research on it and I edit it by making the red brighter and bee emphasize on the bud color more then we human do. 

Causes of Color (n.d.) What colors do animals see?. [image online] Available at: http://www.webexhibits.org/causesofcolor/17.html [Accessed: 19 January 2013].

Hanlon, M. (2007) A bees-eye view: How insects see flowers very differently to us . [image online] Available at: http://www.dailymail.co.uk/sciencetech/article-473897/A-bees-eye-view-How-insects-flowers-differently-us.html [Accessed: 19 January 2013].

Bee could see minimal of yellow but more to red and white. So I edit it into bright red.

Then I overlay bright white on the side.

Walaaahhh. Although it may not be the exact look a of bee view but I did my best to look as close as I could.

Dog pictures are yet still to take.