Interface

I have created my buttons and interface ready to be fitted on to an html page. I have simply made the buttons by copying some artwork out of peoples scenes, so it indicates what scene you are click on. I have made the buttons, buttons (if that makes any sense) and they have a over, and down state. When the user rolls over the button, the background box changes colour, and the image slightly moves or changes to another image. Downstate moves the image slight down, allowing the user to confirm that they have just selected that button.

This is the swf of the interface. I have had to add action script (getURL) and give the buttons various states. Lastly, to create a little interaction between the user, i have added all the name of stories voice overs to the specific button (hit state).  e.g. Mr Croaks Discovery.

Here is the copy of the buttons on my html page.

As you can see i have added a header and footer, with css coding. This makes the page seem much more professional.  All the links via my actionscript (get URL) work and link to my seperate html pages. 

However this is where the problems start:

Using my movie as an example: It loads my story and all the others on seperate page. However, when you click within the SWF movie to the next swf scene, it blanks out, and no further works.

Like this, and it does it on everybodies stories un-fortuantely. So this is what i am going to need a little help with. Apart from that all is CUSHTEA! And i will not be sad to see the end of this project!










To get a little inspiration with my interface/childrens website, i looked at the cbeebies website, as my client said look at there animations for ideas.

These are there buttons. They have a noise what occurs

when the cursor is hovered over the buttons. They also have a little 

where the characters move when the button is being hovered over.

Creating my scene in Flash

In this project i feel that my time management skills had to be worked out, comparing it to previous projects, where i have had to rush things at the end. So once i finished drawing my scenes in my Sketchbook, i went straight into Illustrator and started drawing them up. As soon as i finished that i literally had to copy and paste the artboard into a Flash artboard (845x475 pixels). I started to become a little frustrator on how to get things to animate from the Ai drawings.

After speaking to a friend, it was established, that anything that i wanted to animate in flash, and make it move, was easiest by either re-drawing it in flash, or deleting it out of the background layer, and re-pasting it, into a new layer. After this had all happened, i was well on my way.

My first scene is my splash page, and the only animation i have on this is the actual button. No other animations.

On this scene i decided to animate the blinking of mr croak himself, the trees shaking in the wind, the clouds moving across the sky and the sun rotating.

As you can see this is a screen shot of the animation actually in flash, where as the previous was simply the SWF's. This hot shows you what i have in my library and all the different layers i have in this particular scene. I have seperate layers for the trees, eye lids, sun and clouds. Then i have either converted them to symbols and place a motion tween on them, allowing me to control to and from where the actions/movement take place. Or i have inserted keyframes, and moved the object in that particular frame, and then change the position again, in the next keyframe. The only two layer you cannot see are my buttons and actions layers. These are simple. Literally on the last frame of the scene i have inserted the buttons, so they appear when the scene is finished and the actions layer simply consists of action script in the last layer, and basically stops the voice over and scene from looping.

Here is the actionscript:


stop();
totwo.onPress=function(){
loadMovie("08_02.swf",0);
}
bkin.onPress=function(){
loadMovie("08_00.swf",0);
}

The stop command stop the movie from looping, and the load movie command is place on the different buttons allowing the user to move to the next or previous scene.

Voiceover

In order to have a voice over for my animation, i had to get someone who could read the script out well and have a sense of passion for performing/acting, so that it would sound good to its audience (children). After this we had a performing arts teacher come into class, and start reading out students stories, so i thought this would be a great idea for my story.  He put different voice on for the different characters, i.e. a croaky voice for my croak,  girly voice for percy the puppy and kate the kitten etc.. We had to make sure we had a quiet room for a better recording a no interruptions were possible. We used the colleges microphone that self recorded, and had a usb slot, enabling us to directly input our readings onto the computers, ready to be edited.

After this process, i edited the sound and cut it into designated chunks for each scene that i had dawn. The software i used to edit this was Audacity.

Audacity is a well known and free version to edit sound and music.

The voice would appear like this picture shows to the left. All you have to do is  select the specific piece of voice, (picture to left shows it highlighted in dark blue) and then save the selected audio track as a seperate WAV. file.

Illustrator

I have drawn my scenes up in Illustrator. I will show you the first couple of scenes. However, i have 15 slides, so i cant really show all of them on here.

 This is the first scene, i will animate the clouds and sun running across the scene. I will add trees that will sway side to side, and lastly, add a blink to the frog.

Here i will also add clouds and a sun moving across the screen along with blinks on each character.

I will add clouds and sun again, make the Lion wave and addd blinks to both characters.






Lastly, all my scenes will have voice over and a transparent text boxes with the story/scene written on them.

Treasure Island Toys

The next project is a live project. I will make a flash animated story about Mr Croak and his Discovery. There will be additional characters through out the story, but Mr croak is the main character.


Here is all the character involved in my story:

Mr Croak (main character)







      






Georgina the Balerina




 

Kate the Kitten

The Lion










Percy The Puppy

All the above character have additionally been created by Treasure Island Toys. The character to the left are additional character that i have had to create, which are included in the story. These are, Mrs Trumpy-the elephant, Mr Springy-The Kangaroo, Popular Puffy Sheep, Pretty Elegant Swans and Proud Giraffes.

Assignment Number 5- Adobe Flash & Animation

I have been set a new Assignment in Adobe Flash. It is a live brief, producing Animation/content for an online toy store called Treasure Island Toys. The content is designer for the children and parents/ carers to the site more frequently and for longer visits, to build brand awareness and loyalty. The company sells toys to children of all ages, however this specific projects target audience is children between 5 and 7 years of age.

Some characters for the Animations have already been created. There are nine short children stories have been made up using the created characters.I am then expected to produce illustrations with animated flourishes to accompany one of these stories. I am allowed to create artwork in Illustrator and/or Flash's drawing environment, and create the animations and interactivity in Flash. These stroies have to be specifically created at 845x 475 pixels. They should all have a voice over reading the story with a suitable amount of text to explain the story. The users should be able to move to the next and previous page or start from the beginning from anywhere within your your story.

Once all the stories are complete in Flash, i need to design and build an interface that can display all of the stories. The homepage will carry links to all the other created flash animations. I will build this interface in html and lay it out using css.

Browser Testing

I have tested my site in the main browsers. All results came out successfully, however, i had to make seperate style sheets for I.E.

This is a screen shot of the website, viewed in Internet Explorer. I did have a problem with my footer, coming up further than it was intended to.

 

This is a screen shot of it in Safari, all works well.

This is a screen shot of it in Firefox. All works well. Safari and Firefox, are all based on my very first style sheet that i created. Seperate style sheets were needed for I.E.