Finger movement plan

finger diagram to learn the movement and finger gaping. 

this will lead to the second page where the user can be interactive on playing with the keys on the computer keyboard or with clicking on the mouse to play the sound.

Extended Part to make it clear

After playing and working on the extended / feature page.

I noticed and felt that while trying many things on flash (didnt do any screen or process steps to show) 

some things worked but not to my liking and some parts didnt work with buttons and hidden areas.

One step that I felt that needed to be strong is when at the end, there should be some type of indication where to click since a part of the extended (the strings, bridge, tuner and finger ) are together. 

tried with the basic circle and the star.

The circle and star is used alot though out many pages though sites i had looked at, but when it comes to my page, The star is a much clearer indication to where to go than a small dot where it could be seen as part of the imagery. 

Title text for each page.

at the start, i had every page with the title being like this. being placed at the corner. 

Looking at it, I wanted some type of movement on the pages and thought that I would try to make the text title for each first tab page to move.

Learning that movie clip can not only move shapes, but can move text.

Since there are two type of text that is going to go on the page, i would need to make them two into two different movie clip and than into one movie clip where i move them individually.

Quiz layout workings

Text title and the extra connect box being placed on the page.

having the text and image layout together.

Seeing that the bottom is quite empty and that the image are from one side and the text on the other makes it harder and less easier to drag and drop the image down to the text.

Another layout 

Having the images at the bottom makes it easier to click and go up and drop.

balanced and easier for the eye to look on the page.

working on quiz page

For my quiz page, i thought first that i would just have one page where it will go straight to the quiz without a beginning. But later on thinking that since I had made more than one page for my other tabs/in planning. So I thought that to make it more interesting and gets the user to get ready for the interesting quiz that they are going to go towards to.

Drawn parts for the quiz

Titles for the quiz for the images to be drag next to or inside to

With the objects and parts nearly ready. I am trying to decide how to put these ideas on the page.

Now thinking and looking at my work, I have decided and would have another rectangle next to the title text of the parts maybe lighter so the user will know where to place it and connect well instead of a hidden connect square.

second part of work.

layout on how it looks like before the parts are being extended.

I thought that I would want to have my text to come out when a part is been clicked.

After afew youtube and tutorial, i found and figured out on how to do masking on a movie clip and another layer than some type of movement. It was challenging to get it right for the first few times.

layers of the extended parts and hidden layers.

process of working with hidden text until being clicked and it shows up.

one example on showing the process on moving a part when being extended when it is triggered to the frame 5.

Imagery for part one

 Acoustic Violin Electric Violin

Tabs Icons

Connection to this post. This mini part of post is posted after the drawn Tab icons.

Using the 'gotoAndStop' action for these individual buttons to work.

I thought that I need to have to write these action on each page that the buttons are going to be on (which in this case would be every single one apart from the splash/home page) and needing to think of many different names so that it doesnt repeat where errors will occur. 

After doing it on the first three pages, I continued working on my other pages and forgotten to do the code for the pages but to my surprise that the button was still working from one page to another.

So I tried and deleted the other two which isnt the first page of codes and tried the buttons again and it still worked. Something that simple made everything easier and being much more neater on the working of codes.

--------------------------------------------------------------------------------------------------------

Made the icons where it links to the right section.

Back to the Home Button

Instead of having it white, thinking of my colour scheme. I have changed and added the colour Bronzey brown to it so it keep the page consistent and flow well.

Simple layout on how it is placed on the pages.

Simple Buttons

For my buttons to go to the next page or back ideas are simple spot dot or some type of note.

Simple and easy for the eye to look.

 

I really like the idea behind this since it links to the theme music but looking at this for awhile it doesn't feel right and the way it is placed wont work for an easy navigation. 

Drawn Single parts for extended

With one part of my info graphic where I wanted to show information of each individual parts so I had drawn up the parts up all done now.

Colour and shape took awhile but had done it to the best and look nearly to real.

All parts being individual 

Some main parts links together

Ideas from looking at information which is out there

While thinking on what I had planned out, I might have put quite alot for myself to do but i am going to try and do it and work it out.

some research that i had done while ago where I can get inspiration and think. Two of the images are from the start when thinking on what topic to do and still like to have a look to see what i can do with some part of work that is out there

Understanding the code and to remember for info graphic

learning what is there that i can do for my infographic.

Having a play with a music note to test try and see what can be done.

Working on the first page/Splash page

Understanding now that I have to do my drawings/Illustrations to a right size when doing them so that when I go and drag and drop my images into flash, the quality wouldn't change and still be good to see.

Starting with the first page with the drawn violin and other small features to have / form movement at the start.

Colour Idea

Since I am doing my infographic on violins. I am thinking with my colour scheme to be close with it to link well and easy to see/view.

 

Colour Ideas 

 - Golden Yellow

 -Golden Brown

 -Mixed tone of Brown from light to dark

 

Background colour texture

It might been seen as the background texture is being pixeled, But am really liking the feeling it gives me when looking at it. Not smooth and not to rough

Planning page for my infographic

Working on the drawings on Illustration

Im really having trouble on working on illustrator for my drawing work but had continued with it and spending heaps of time to get my smooth edges for the violin feature using the pen tool.

First complete violin drawn on Illustrator