Feedback

Feedback given:

To Aj: I really like your final piece especially the images and backgrounds used, I think the needing needs more work as well as you'r spelling/grammar and the timing is a bit off at times. Also the buttons at then end aren't very nice looking and one link doesn't work. Also I suggest maybe using a different font which would look less boring although I really like you'r speech bubbles.

To Adam: I really like your animation, the way the dragon changes size as it flies in/out is really good and give the impression of depth and distance. The animation could be more complicated though and maybe instead of using just one image of the dragon maybe three or four would be better and give a smoother and more visually entertaining animation. You could also develop the plot more and make the animation longer al well as adding some interactivity.

Feedback received can be found in the comments on my blog.

My work so far

So far I have experimented animating the maid and her dialogue in flash, I really like the idea of a next button as it means I don't have to time how long the words are on screen. Unfourtunatly I have to change all the actions because I need to add a load of frames at the beginning which was stupid of me to start halfway through the animation. I've also decided to have a blink each time new text comes up as when the button's there I have a stop command and it looks weird if the blinks are too far spaced.

Manipulating traditional assets

Today we made a pattern from scanned rubbing's taken from around the college, my first rubbing was from the ladies sign on the toilet door and my second was from the texture of a wall, I made them into patterns by using a  load of different photoshop tools such as levels, perspective, colour balance, flip horizontal, flip vertical, add noise and radial blur. I don't think I'll be using any of these effects though as the only part of my project I've drawn by hand is my storyboard.

Today we made the image of a seagull flying in flash to explore the possibilities of animating a movieclip. First we made one of the assets into a movie clip and went into it to add the rest of the assets (left wing down/up, right wing down/up and the body) on a layer each and had the wings up for 4 frames and down for another 4. We then went out of the movie clip and positioned the seagull at the left of the screen, we then moved it to the right side on a new keyframe on frame forty. We then tweened them and repeated the process but flipped the seagull around. I don't think I will use this technique though because I've already animated the blinking normally.

Evaluation of my final animation

Over this past month I have been working on an interactive animation in flash in iPhone format. When I first found out about the project I decided I wanted to make my animation like a Japanese dating sim where the same image of a person is used over and over but with different facial; expressions and a text box at the bottom. My plot was very loosely based around the characters Alice in wonderland, as you can still see in the maid with her pointy teeth and cat like eye's, the butler and the two floppy 'ear's' of his hair and the close to white hair colour, Lord Notfeld and his hat and the fact the character you play as is called Alice.

In this project I decided to do all the images used on my drawing tablet because it mixes the good points of digital and traditional. By having all my final images made digitally it made editing and accuracy (e.g. file size) very easy all well as quicker. It also made my work easier to store and share (e.g around the web) and the computer did a lot of the work for me like calculating my tween's and various filters. It also was able to work with the advantages of my drawing tablet to get the great control and drawing style that's usually found in traditional work. The only downfall of digital work is how easily it can be corrupted or for the coding to mess up, ruining the whole thing as well as the fact that there are set limits in digital work.

We did a lot of experimentations in flash throughout this project to teach me the skills needed to make my animation, for example one of the first things we learnt was hoe to make a tween in flash which can produce either a pan or zoom effect or in my case, I used this experience to make a masking layer above my text to reveal the text bit by bit. The tutorials also helped me develop my idea's for example the button tutorial game the idea for the next button and the tutorials also helped me realise what was possible and was wasn't.

Before producing my final piece I made a storyboard for the rough idea which really helped with my character design and gave me a guideline for the script as well as a feel for the characters personality, although I changed my butler design from the storyboard to my final I kept most of the other idea's the same.

My final piece took am lot of time and was very repetitive to make as I had a next button after every piece of text and the amount of layers was confusing, but the final product was really good. My idea's developed into a decent plot and the next button really helped as if it wasn't there I'd have to have a time limit of how long the text was on screen which no matter what would be either too short for some people and too long for others. I also think my simple animations were used effectively although if I could do this again and I had more time to work on it I'd try more ambitious animations because the images were a bit static and I would have zoomed in at parts but I had too many things on different layers. I also like that I was able to get a second ending in although I wish I could have don'e more. Also my animation was a bit short and if I had the time I would have loved to make it longer with more suspects and more development for the characters although I love the idea that whatever you choose you die.

All in all I'm really proud of my first flash animation even if it is a bit simple and I would love to carry along the animation route. 

Making my assets

For my assets for flash I made the images first in photoshop in double the size of the iPhone screen. I used the pen tool for the lineart in the first two assets but then I switched to a program called Paint Tool Sai because the pen tool on that program is far superior to photoshop's pen tool. I coloured all the images used in my flash in photoshop and for the images bigger than the iPhone screen size I re-sized them before I put them into flash so it doesn't take up memory. To make animated eye blinks/ mouth movements I drew each different version on a different layer and after cropping the image tight around all the mouth's/eye's I saved each version as a PNG file so transparency is preserved when I import the images into flash. 

Storyboard

This is my storyboard for my flash animation with my basic plan for my story. Originally there was another character but it would take up too much time when I could be focusing on the rest of my work. I also came up with the idea that no matter what option you chose at the end you die. This is also good because then I have one less image to make.

Buttons, Pan and Zoom in Flash

Today we played around with flash and worked out how to pan and zoom images. First we re-sized the images we used in photoshop and then imported them into flash. We then added rulers and put guidelines on the sides of the iphone screen size. We then converted the images into a movie clip and moved the images into position and created a new keyframe on frame 50. We then made the image larger and focused on the clock tower, after that we clicked on any frame between 1 and 50 and right clicked and selected 'create classic tween'. This made the computer generate a zoom effect from the starting point to the end pint. Then with the second image we did the same thing except we just moved the image to the other side of the iphone screen instead of zooming in. If you then follow the same steps to make a zoom effect you get a pan effect.

Next we looked at making a button. First we made a square shape and converted it to a button the same way we convert bitmaps into movie clips. We then went into the button and edited the four states; up, over, down, and hit. Up is the normal state of the button, over is when your mouse hover's over the button, down is when you click and hit is the area that counts as the button, even if its transparent.

In my flash animation I intend to use buttons since they seem easy to work and a good way to make my work interactive. I don't think I'll be using pans or zooms though.

Experimenting with Marantz

Today we experimented with a recorder called a Marantz, it lets you record either mono or stereo sound into many different sound formats. First we had to plug it into the mains then we attached an external microphone called a gun mike. The gun mike is a microphone encased in foam which only record the sound in the direction you point it in. The other mike is a normal mike where it picks up sound from all directions. We also learnt how to format it and how to change the levels so its not too loud or too quiet.

Story and Character Design

After brainstorming a bit I decided on my plot and started work on character's and my storyboard. I decided my animation will be like a dating sim with one simple image for each character but with small variations like open eyes/mouth looking away, smiling, laughing ect. My character will also be loosely based around the characters of Alice in wonderland.

This is my first character design, the lord of the house, he's based around the mad hatter and he will be the culprit.

Experimenting in flash

Flash is made by the same company as Photoshop and has the same tools to an extent.

After playing around with the tools a bit in the iPhone size document the first thing we did was to import a bitmap into flash. First we went into Photoshop and got the rulers up. We then set guidelines on the image we want in flash with the size of the iPhone screen in pixels. We then cropped it and copy pasted it into flash.

Next we made a new layer and made a cirle. We then turned it into a movie clip using F8, then we went to frame ten, make a new keyframe (f6) and moved the circle to a different place. We then made a classic tween by right clicking between frame 1 and 10 and selecting 'create classic tween'. This makes the circle move from where it started to where you put it in frame ten. To make it move slower you can right click on a frame with both layers selected and select 'add frames'(f10), and vice versa, to slow down you delete frames.

We then went into the circle and double clicked so we could edit it. We then added a simple blink animation the same way we made it move but not making it tween.

Interactive comics research

Interactive comics are similar to normal comics except as the name says, they are interactive. This means you can chose where the story goes next to a certain extent. This makes the comics far more appealing and interesting to a wider audience.

The first interactive comic I looked at was Hotel. I really like this comic because its unique and the animations used are very effective. It doesn't have much of a plot but still manages to grab your attention, it is also more interactive than the other comics which makes it very entertaining. Hotel is actually a bit disturbing and this can drive people away as well as the randomness of the events. The images are very simple but effective and the use of colour is limited which makes a big contrast. While the background of the comic is made up of solid blocks of colour and looks very digital, the characters look more like stylised traditional drawings, they were either drawn on paper and scanned into the computer to edit or drawn onto the computer with a graphics tablet.

The next interactive comic we looked at was dead on arrival, a murder mystery story. This is far less interactive then Hotel and is set out more like an interactive comic. Its made up of black an white photographs with certain bits left in colour for effect. It uses a lot of zoom and pan effects on some pages for effect which can only be achieved digitally which gives a nice merging of traditional photography with digital effects. The murderer also changes each time and the story can be changed slightly by the reader.

The third interactive I looked as was Meow Meow, unfortunately it only had one page but it had 5 Easter eggs (hidden things) in it. I think these are a really good idea and are fun to find, this is something I may use in my interactive comic.The art style is vector based and is made of mostly block colours, which is different to the Hotel where you can see the characters are drawn traditionally, a graphics tablet may still have been used though.

This comic is called Alice and it only has one page as well. What's interesting about this comic is the contrast between the traditional way its drawn and the digital speech marks that show words when you roll over them. In comparison to Meow Meow it looks far more detailed and the digital aspect is far smaller.