Evaluation

Earlier today I had a few problems with the way my website did not work. Every time I clicked on the button to go and watch an animation the screen would be blank.
I therefore had a look at the code in Flash and HTML to see what I needed to change, and I had found that I need to place the HTML pages within the folders where each of the swfs were. I then had to change some of the coding to make sure that everything link perfectly.

To evaluate the way that I work, I think that I worked well however I feel that I could have done better with my timing.
Here is a screen shot of my finished interface on the Internet. I feel that all of the navigation within my site works very well.
And here is a screen shot of one of my other pages with the animation and the home page link within them:
All in all I feel that my animation and website work well, both individually and together.

Voice Over

To create the voice over, I couldn't just have one long running mp3, I had to split it up so that each of the scene had a seperate voice over.

To do this I had to use two programmes, one was called Audacity (this allowed me to split the original voice over with ease) and the other is The Levelator (this just leveled out the sound of each of the seperate voice overs).

I had found that because I had done my voice over I an area where there was no echoing noise, I did not have to use the Levelator. However I still used Audacity to split them up.

The way I used Audacity was to first import the voice over into a new file, I then listened through it and where I had split the scenes up I then had to split the voice overs in the same places. I then selected the scetions of voice over that I needed, cut it out and then pasted it onto a new document, I repeated this process until I had got the finished split up voice over.

The next thing that I had to do was to then select the one that I wanted to export to the use in Flash and the go to File/Export Selected. This would make it into a mp3 to use in Flash.

I then made a new layer in each of the scene in Flash and imported the correct voice over to the correct scene and import it to the library, and then all I had to do was make sure I had the right layer selected and then drag it from the library to the stage.

The buttons I will be using for my Interface

For the buttons on the interface we had a choice that we had to make, we could either make one button and then share or we could make our own buttons. I decided that I would make my own buttons.

To make my button I decided to have each of the a specific size which was 150 pixels wide by 125 pixels high, this was to show continuity. I also had to make them animated as the viewer rounded over them.

Once i had done them i placed them on my interface and this is what they look like:

I was making sure that I was being in keeping with the theme that was set in the brief.

Problem Solving

Once I had my crit session on my actual animation I had found there were a few things that I had to change in order to make it better and to what the client wants.

The first suggestion was that I had a blue box around Pecky for a few of the scenes, and most of the class said that I did not need the box, the client also mentioned that I could take the box away and leave Pecky maybe sitting on a branch, therefore I got rid of the blue box and I then had Pecky sitting on a branch as requested.

The next suggestion that was mentioned was that for children to enjoy it more, why don't I add some interactivity within my animation, this was so that children could become more involved with the story. Therefore with one scene in particular, which was the scene where each of the different eggs were being revealed I made it so the to keep going with the story the children had to click on each of the eggs to reveal them. To do this I had to first split up the voice over, using Audacity as I have done before, I then had to make each of the eggs buttons. Then on the timeline I had to add keyframes in the right places, the actions that I used were to stop the animation, and then to go and play to the next frame, when the children clicked on the eggs. I also added in text to tell them what they had to do, I also added in arrows so that they knew which eggs to click on.

The last suggestion was to make the trees different colours, this was to add depth to my animation instead of it being as flat as it was, because the client had created other scenes that had some depth to it, therefore to be in keeping with this theme I did the same.

I lastly added a title page to my animation, this was so it wouldn't start playing straight away and the children wouldn't miss anything, I also added a credits page, as requested by the client, this was to show who had done what and who should have the credit for each of them.

The main problem that I had was getting the eggs to become interactive, however once I had solved the issue it then ran to how I wanted it.

Production Log for my Interface

To create my interface I had to first make some designs in my sketchbook, and then come up with a final design at which I will then create in Illustrator and Flash.


My design I wanted to be in keeping with the theme that we was set in the brief. Therefore I came up with an idea that was in keeping, that was having a sandy island to one side and then having the sun in the top left-hand corner, and lastly having the sky and sea as well. This meant that I could link all of the animations together instead of having a background that wasn't in keeping with the theme.

I first wanted to make all of the colours of each of the components correct to what the client wanted, so I therefore used some of the deisgns to get the codes for each of the colours that I needed.


I then started by creating the actual background in Illustrator and then copying everything across to Flash.
I then had to add my made buttons, that would sit in the interface so that people would then be able to click on them to see each of the animations.

The reason why I chose the interface design that I did was because it was simple and I think that it would fit in with the theme of each animation well. Also I feel that the target audience would like it, and it would not distract them from the main component of this site which is the animations.

Production Log for animation

Creating my animations seemed at first to be quite hard, however when i learned more about Flash and familiarised myself with it, the process became easier.

To begin with I had to sketch up what I wanted my animations to look like in my sketchbook, this way I had an idea of what I wanted to do. Also the client had previously given us some artwork that we could use, for examples the main characters, Bertie, Pecky, Kate, Mr Croak, The Lion, Georgina. If there were any other characters within our story then we would have to create them ourselves, making sure that we were in keeping with the theme.

My story is called Bertie and the Egg, the basic idea of this story was that Bertie and Pecky found an egg and had to find it's home.

I chose this story because when I read all of the stories through I found that I had quite a few ideas for this particular story, also I liked what happened within the story.

After creating the characters to make up the cast, I then started work on my background, because the whole story is based in either a forest or woodland area, I was able to use similar or even the same backgrounds, and just modify them accordingly.

Here is the basic background at which I created to get started with:

The way I came up with this was by looking at the clients website, and having a look at a story that was previously made, this way I was able to grasp the concept of the animation from the beginning.

The colours are simple and flat, however in some places, for example on Bertie's hat there are some slight bits of shading.

I then had to look at the text at which will be in the scene, and then made notes in my sketchbook to what animations I would be putting in my scenes.

The way I made my animations was to first make the object (that would be animated) a Movie Clip symbol, from either clicking on Modify/Convert to Symbol or just by pressing F8, whilst the object was selected. This meant that I could animate the object without having to have the timeline bigger then 1 frame.

However in some animations, i had to have the timeline bigger then one frame, this was because in some instances i had to make my object a symbol and then animate it on the original timeline, this was because then I would be able to create the desired affect that I had originally hoped for.
For example within this scene I wanted Pecky to fly around the nest, pointing it out to Bertie, to do this I had to make Pecky a symbol and then by right clicking on him I was given a few options to what I could do, those options were, Create a Motion Tween, Create a Shape Tween or Create a Classic Tween, and in this instance I wanted to Create a Motion Tween, this would allow me to move Pecky to create the Illusion of him flying around the screen.

Previously to this I had also made his wings a symbol this was so I could allow Pecky to flap his wings as he was flying. Otherwise I wouldn't look as affective as it could be.I also used this same technique within another scene, that scene was when I had to make the Mummy Bird flying down from another tree to her nest, when Bertie was placing the egg, at which he had found earlier on in the story, in the nest. I also made her wing flap as she was flying by making them symbols as well.

The navigation of the animation was fairly simple in my mind, I had first come up with many different ideas to what I wanted my button to look like in my sketchbook, then once I had decided on a design I then had to create it in Flash. I first had to draw out what the button would be like and then give it the colours that I felt best suited it, the I had to convert them to symbols, to be more specific I had to make them Button symbols, this is because then I would give my 4 states at which to change my button, those 4 states are Up, Over, Down and Hit. (The Up state is what the button would look like to begin with, the Over state is what the button would look like when the mouse is hovering over it, the Down state is what the button would look like as the button was being clicked on, and lastly the Hit state is the space at which would be active and where the viewer is able to click on the button to make it work.)

For my buttons I wanted them to be simple yet stand out at the same time, I therefore chose green and orange for the colours and then I chose Ariel as my font, I chose Ariel because then it would be the same as my text that would be on the screen, this is to show continuity with my animation. However to make the button change in each state, I would make the colours lighter in the Over and Down state, I would also make the text bold, however in the down state I will give the Illusion of the button moving by moving the button down and across, this would only be a slight movement as I do not want it to be too drastic.

As you can see here I have taken a screen grab of what my buttons look like, this also show to for states that are on the timeline.

Each of my animations have been made to be as simple as possible and once I had put everything together I had found that the whole animation seemed to work well, and I am very pleased with what I had created.

Research on other websites

I have found one particular website that had caught my eye, and I found that this one was very similar to what I was trying to create.

The site is called Cbeebies, the site is www.bbc.co.uk/cbeebies.

Here is a screen grab of what the site looks like, as you can see it is very colourful and bright this is because the target audience is very young and like this sort of website that can keep them interested.

I had taken a screen grab of the story page, where they put all of their animations to show to the audience. Here they have a more extensive range of animations to what we have been told to create, therefore they are able to had different pages to show them. For example they have an A-Z section so the audience are able to look through all of the stories in alphabetical order. They also have a section called Our Picks this part shows what stories the creators would recommend the viewer to watch.

All in all I like the style of the site, however I feel for the brief at which we have been set, having those sorts of colours probably will not fit in with the theme, therefore I will be coosing different, less bright colours for my interface. As a reference though this site is good to look at because it is very popluar with the my target audience, which is 5-7 year olds, therefore I can use this to make my website better and more pleasing to the eye, as well as make the audience more engaged with my site.

Assignment 5 - Interactive Design

In this assignment, the brief is live and I am having to create an interactive flash animation, at which tells a story. The target audience is 5-7 year olds. The client is Treasure Island Toys.


Within this project we are each having to decide which story we are wanting to animate (most of the stories are already written), and after reading all of the stories provided I decided on Berite and The Egg.


The characters that are in this story are:

Bertie

Pecky

Mummy Bird

Baby Bird

Bertie and Pecky were already created by the client, however due to having other characters in my story I then had to create mummy bird and baby bird myself.

The reason why I have put an orange rectangle around baby bird is so that is stands out from the white background, however in the story there is a green background therefore the box will not be there.