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.

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.

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.

Adobe Edge Animation CC : Tutorial

In order to make the interactive web, I tried to learn about Adobe Edge Animation. Because it's already week 5 so I need to speed up. I learn basic skill and try to make simple interactive website. Adobe Edge Animation give me a tutorial to animate things, text, and many more.


On this tutorial, I'm using 800px x 400px size resolution. I'm using Lamborghini as my trial. For the first, I put Lamborghini Logo and put the keyframe to arrange the timing. On the timeline, I put action script to make the Logo can be click and go to the next session.

I put sym.play on the action script, so that if we click on the Logo, the Logo will be disappeared (Opacity from 100% to 0%). 

After I click the logo, the the second session is I write "Introduction", so I tried to animated it like a moving text animation. So I set up the keyframe for Location and also Opacity. I put keyframe from left to right from the location followed by the opacity, from 0%-100%-0%.

After put the moving text, now I tried to put the model. I set up the keyframe by using opacity.

In this session, I learn how to animate using motion path. I tried to make the word "Explore" using Easing. So, arrange first location and location. After that, arrange the line by using easing. 

At last I tried to put the sliding picture which means the next session. So I put the action script on the "Explore". The picture will be slliding from right to left.

In here, I got the problem to stop the animation, after the picture come out, then it automatically go back to the previous screen. I still search how to solve that, I tried to put stop at the last keyframe by using action script, but still got error. 

I tried to Preview into my google chrome and this is the result.

What I learn so far are I learn about the Action Script to animate, learn the timing, and using Motion Path..

I tried to speed up because I realized that I was too relax. So I tried to catch all and learn as much as I can. 

Adobe Edge Animation: First Touch

This is the first time I touch this software. So, I was tried to install and look a bit in to Adobe Edge Animation. So this is the first windows when I open in to the Adobe Edge Animation.

This is the first look of Adobe Edge, since I'm still new at this software, I better use quick start, because it can teach me from the basic. So I click Quick Learn.

After I click to Quick Start, then come to the work station. I read on the right side, there is a simple tutorial how to start creating animation. So, at the first, we should make the object.

I tried to animate this circle to move from up to down. I tried to use toggle pin to animate. So it basically  the same like flash, put the keyframe from point A to point B. 

Choose My Area

I was thinking of making the Interactive Web Html 5. I do a research of someone who has been done created the Interactive Website.

This Interactive website is about the Drug Driving. This is the simulation for the person who use drug. If we move our Mouse to the Dot, the automatically it give the effect to the screen about blur vision. Evanshalshaw

This Interactive web is an example of Prallax.js. When we move our mouse to the left, then the screen automatically move to left, followed the Mouse cursor. http://wagerfield.github.io/parallax/

This Interactive web is for fashion. We can easy choose Our mood to fit the Clothes and dress. Just move the Mouse cursor to it, the the music will play and also the hand will move.http://www.colehaan.com/wingtip-or-saddle.html

After I do a research about the example of Interactive Web design, I also try to research about what software they used.

I found 1 software from Adobe called Adobe Edge Animation CC that can created animated and interactive content for web. I look through about the Adobe Edge Animation CC for the simple explanation. I never used this Software before. 

First Tutorial

I did my first tutorial with my Lecture and my lecture give me an advise. According to my lecture, I need to research more about what I;m going to do. For example, at the first time I a bit interest in Interactive book, so I research about the books and also the software that they used. Based on my research, I found Touchoo software that can produce the Interactive book, but my Lecture give me an advise that this software is for the End user of Interactive books, it means that its very easy and simple way to do it, not only from Multimedia People, another people who didn't study about Multimedia Design also can do it.

So according to my lecture, I need to research more wider, not only stick to 1 or 2 software. I also need to refine my idea before its too late. I also do the research about Interactive web, which is my secondary Idea to developed. 

Refine My Area

For this subject, I'm confused what I am going to make, so I try to research all about multimedia, such as Game Design, Interactive application, and interactive books. I tried to research about how it make and what software they used to make that.

Since I confused what content I choose. I decided it to research first.


I do the research about website, especially HTML 5 animation Website.

From the Game design I look in to the Adobe Edge and read a bit about the explanation.

This Adobe Edge is a software that produce HTML 5 Animation.

For the Interactive Books, I found some software that very useful to make the Interactive Books.Based on my research, I found one software that make the Interative Books, called "Touchoo".
Touchoo is a creative Mobile Interactive App an books for Ios & Android. http://touchoo.com/

The other software that can produced the Interactive book is called Kids Book Maker. Kids Book Maker is an Ios Software to design and produced the Interactive Kid Books. This application give the simple tutorial how to use this software. This application is quiet nice that can put song and another sound effect into the Interactive books. http://www.kidsbookmaker.com/home

And I also look at the http://www.bestinteractiveebooks.com/ that contains Interactive books. So from here I can try to find my ideas about my storyline.