Edit the product menu 1

The previous menu wasn't satisfying us because its colours don't suite the background. I had a discussion with a group mate and decide to replace it with buttons on the buttom of the stage.

The buttoms represent the earth and there is a tween class animation on them. When rollover the button it moves to the back and disappearing then come back in 1 second.

I created an intercative animation to add interactivity to the page. When the user acsess the menu page, these autumn leaves will appeare in the middle of the scene.












They will move fast following the movement of the mouse.




When the mouse stops in a point, all the leaves gather in the same point. But that looks annoying for me, I wasn't aiming to achieve this result. I don't want the leaves to follow the mouse, instead I want them to move on the stage according to the mouse movement.





I started playing with the speed values in action script. Here the leaves are slower but they are still following the mouse.







Finally I could do it. Now the leaves will move randomly according to the mouse movement until it get out from the stage.







Only 2 leaves will stay and follow the mouse in different speed.

I add an animated mice as a button for globe stereo where the user can choose a song and keep it as a background sound for the main page by lefting the stereo without stopping the music.


I tried to make the name of the section appears in the top when rollovering the button, but that didn't look good.


Major improvements happened. The GLOBE stereo is a separate section now. There is a different background sound which plays by defult but the user can mute it by the sound icon on the top left.

I didn't want the user to refer back to the choosing season page each time he access the menu, therefore I thought of putting the seasons thumbnails on the main page so the user can change the background whenever he/she wants.



The rollover effect on the mute button.








The mute button when the sound muted.


The rollover effect (glow) appears on the second button.





The earth button animated by tween class when rollover on it. It moves slightly upwards.








Each season contains different interactive symbols related to it.

There are white circles as snow in the winter.





Moving white and blured clouds in the summer.











Pink stars with different types of



blend modes in the spring. The mute button in the rollover state while the music is muted.




The strs move according to the mouse movements and its speed until it get out from the stage.







Only 2 stars stay on the stage and foloow the mouse in different speed.