Experimental Design: 2013

Thursday 5 December 2013

FINISHED ALL WEBSITE

This is my final website, and finally it FINISHED hahahaha... I can click all the button and the animation all works well ::)

In this session, finally I can solve my problem in putting animation and the sound. At the first, I use Buzz as my script to put song, but I realized that the script isn't works well because the script is only works in one time. So, to solve my problem, I tried to use

I changed my script from using Buzz to Edge Common, it automatically connect to the internet. So the song are depends on the internet, because of the script, the song might be play a bit late from the animation.

Sunday 1 December 2013

3 Page

In this session I try to put all the page in Adobe edge, starting from page 1 until page 3.. In this part, I got a little bit problem, where I cannot put the click script. I also want to make page 1 jump into page 3 with one click, but I found a problem which is when I play, all the animation start automatically.

Sunday 24 November 2013

Problem

I got a problem in copying the symbol and make the mouse click. Mouse click can work at the same timeline, but I put my animation in different symbol and at the different timeline. And the bad things is I cannot move my animation in to another symbol. So I still find the way and I cannot move to the second page, I need to fix this very fast.

This is what I want, after the first page gone, then the second page come out. But in this stage, the problem is I cannot move the object in to the Happy Symbol, so I confused, if I copy, then the animation will gone too.

Sunday 17 November 2013

FIRST PAGEEEE

After I do the test for the animation part, Now, I can do the mouseover !!!!!!... This is my video about it.

Friday 15 November 2013

Touch up on the first page

Today, I still doing the touch up on the first page, I'm still doing the animation part, and I also want to find and learn how to make the animation loop since my animation is only work for few second.

Monday 11 November 2013

Start The Project

After we done Our presentation, now I move to the next step, which is start make the project. I start from the first page. This is few screen shot of doing animation for the first page

In this part, I set the keyframe for the text and also for the dj set and the melody. I still find the way to do the mouse over part.

Creating an animation pop up for the Song Tag, something like now playing

This is Buzz. Buzz is one of the javascript to let us to put the music by using action script. We need to download the file, so later it can be used in Adobe Edge

I already put the music by using BUZZ for html 5, since Adobe Edge can't put music into the file, so I use Buzz for the Music..The first step after downloading the file from Buzz is Create an action script and type the code(script).

Create a folder named Sound, and put the music inside that.

Add more script by using NOTEPAD below the <head>Home</head>

After that, Adobe will ask to save change, and do the reload. After that, try to preview in Browser, then the sound will be playing.

This is the video for my First Page, It's not 100% finished, but I try to finish this page on this week

Sunday 10 November 2013

Final Design

These all the design for MY MOOD STATION...There are 3 page : Home, Happy, Sad

First Page

Happy Page

Sad Page

Sunday 27 October 2013

Final HomePage and the second and third page

After I do some changing, Now it;s really FINAL haha...This is my final homepage with a colorful Background.

For the Second and the third page, I adopt the same concept and colour, so I tried to make it a bit different from the first page. On the second page, I put 2 Singer (Justin Beiber, one more still decide) for my prototype page.

Explanation : If We click on the Singer, then the track list (animation) will pop out from the top, and show the track list, For example if we click Justin beiber, then the few songs(happy songs) will be appear at the track list. Second, the animation of bird is flying, the animation of melody and the speaker and also the dj.

For the Singer, still decide the face..

Sunday 20 October 2013

Change again

I was trying to change the colour and put a gradient in to it.. This is the result I got. I already try to make it better.. A bit confused of choosing the color.. I hope this one is the final. I like this color than before because in this session I put more gradient and texture, I also reduce the noise, so its look like simple and not to crowded, I try to use bright colour in Happy part to make it more "Happy" and the sad part I try to make it the background gradient and only use black and white color.

Thursday 17 October 2013

First page

After I do the changes on the colour and the character and also the background, I come to the final one, this is my Final Main Page or Home, but I still find the object that can make the ambience more crowded on the Happy part, and put something dark on the Sad Part

Saturday 12 October 2013

Changing in background part

I was trying to change my background, since the previous one is simple and the colour is different from the research. After I do the other research and try to find the color and also the character, now I tried to redo it. I do the changes about the layout, I put more object and I want to make it more crowded and colourful.

This is my first try , I still thinking about the object and also the colour, so This is my progress of doing it

This is still in progress, I also tried to put the background on the Adobe Edge to see in the web browser, After I see, I found that my design is still to plain, I need to put more object in there.. So I try to find the other research..

Monday 7 October 2013

Character design development

I tried to make different kind of 2D character, I'm using the research for my refereces, Here, there are few of my character design.

These 3 character I made it by myseft, based on the research, I tried to use the colour as a refrences, and also these 3 character will be used in Main page as the model. From all the character, I love music as the main word.

Friday 4 October 2013

Research again about the colour for the character and the background concept

I already do the consultation with my lecture, then I need to find the evidence to explain my illustrator, at first I choose Sour Sally for my idea development, so I need to find the research about the colour and also the design. I still want to use my previous template as my design, but I tried to change the colour based on my research and also the character.

This is for the Character, I took it for my references, it not 100% percent same to my design, I only tried to get the colour idea and a bit of the design.

For the background concept, there are 2 sides, one side is a sunny day and the other side is night. So I try to research for the background and I found few background to apply it in to my design.

Sunday 29 September 2013

Bring the Sketch in to Adobe Illustrator

For my Prototype, I already sketch in the paper, now it's time to do the tracing and colouring in Illustrator.

This is the first step, I make the character and also the dj Disc. In this session, I create the first page which means the Welcome Page.

Based on my sktech, I want to make 2 side of weather, Sunny and Night with cold weather. So I try to make half and half. Half Sunny to represent Happiness, and the other side Night with cold weather to represent the Sadness.

For the second page, I still think about the content and also find the singer. I must make the Singer's animation in to my web. So I still find that character. Beside that I also re-think about my idea, especially on the animation part. I'll update my illustrated as soon as possible.

Thursday 26 September 2013

Adobe Edge Animate : Drag and Drop using Jquery

This time, I tried to do the Drag and drop on the Adobe Edge Animate CC. I learn this from Youtube that give me a tutorial.

http://www.youtube.com/watch?v=u4R8jFI_DeE

After I watch this, I tried by using my simple man as a exercise project.

After I made the object, The "Eyes" I convert it in to a symbol called "part". So Then I have 1 symbol.

After that, I go to the jqueryui.com/download to download the jquery plug-in. After I download, I copied jquery-ui-1.10.3.custom.min from the download folder in to my Adobe Edge exercise file called "Drop". This is the way to make the object draggable later.

After I download, now I click action scirpt on the stage, and choose Creation Complete. I put the code the same like the tutorial, after that I test in to the web browser, and the result is my object cannot move at all, there are a few error that I cannot determined, so I tried to find the way out from this problem.

Monday 23 September 2013

Adobe Edge Animate : Creating a Parallax Edge Animation

I find the tutorial on Youtube that can make the background moving followed by the mouse cursor.
It's very useful to me because I will used it later in to my work.

The first things to do is find the picture, and set the keyframe. Move the picture from left to right. The size is 1920x 500px.

This is the new things that I learn. This actionscript should be put on the stage. There are 2 action script. The first one is mouseover, to make the mouse can control the picture. Set it into position X and Y because the picture will moved from left to right.

After all finish, then we go to the Composition ready, which is the finishing setup. Put the position posX and Y in here, by using coding, it will launch on the browser.

This is the preview on the Browser, the picture slightly move by using mouse cursor.

Software that will be use for My Idea

For the software that I used later, I start thinking few software that I will be use.

Audacity is like a Music work, it can combine 2 or more song in to 1. With many kind of effect that can make the sound become more powerful. Will be used for opening sound for web.

MY IDEA DEVELOPMENT

I want to make the interactive web because nowadays it's very useful and interesting. I want to make that the Interactive web can contain music inside the web. So, I try to think what kind of interactive website that will be. I come out with my idea called : My Mood music Station.

Before we look in to the sketch, This is my research.

Shazam is the music finder. With this, we can find music that we don't know. I got the inspiration from Shazam for my idea, I got the idea to create the music website that followed our mood.

This is Sour sally website. Of course, its very nice. But, my planning is want to make like the animation. In Sour sally, they make it like a game, So I still decided to make animation only or the game also. This is very useful to help my idea.

Based on my research, I tried to combine animation and also the music.

This is my sjetch about MY MOOD music Station

My Mood music station is a music website that can play music depends on your mood. At the first page, there will be the animation for welcome and question to choose your mood today.

After you set up in to happy, then the background will move to the happy session. With Dj set and few artist that sings a Happy songs, inculde quotes when the music play. Animation inside this session is the Dj set keep spining, the artist head, and also the subwoofer.

If you choose "Sad", that means, it will automatically moved in to the Sad session, with just 2 instrument which are Violin and Piano. Then the background setting is on the seaside and raining hard. When the piano were choosen, then the melody come out and the quotes also come with the raining day.

*The problem is the song is limited.

*Still find the way to put music.

Need to be design.

*The singer make it in to the animation

*The setting/background

*Font will be used for quotes

Adobe Edge Animate : Using Animation and Action Script Parallax

When I look in to Youtube for Adobe Edge tutorial, I found something useful and interesting, which mean Scrolling Page with animation. I tried to watch and learn how to do. I'm using Despicable me as my tutorial.

At the first step, I arrange the width as 100& and the height as 2500px. I pick up the picture from google. After I got the picture and also the minion, I tried to animated it.

By using Easing and keyframe, I make the minion appear by flying. So I'm using Easing in Out.

This coding I got from cdn.edgecommons.org. It;s the web to learn about the action script. This is about Parallax. So I pick up the action script 1.0.1.

Then this is the preview on the browser. When we scroll down, then the animation will play, and if we scroll in reverse, the animation will back.