user's avatar
CT4008 2D Animation with Mini-Game
Assignment 1 Week 1 Update Blog

I found images of objects that could be used for my animation. I've then drawn them by hand and these are the results of the drawings. I will be improving, modifying and using these for my actual animation. Some images have multiple drawings as they are attached to each other, but in the animation would be separate assets.
Assignment 1 Week 2 Update Blog

As I finished hand drawing all of my images, I used a program called Adobe Capture to vectorize all my drawings onto my computer ready for me to trace over them and add different parts of the drawings to different layers so they are ready for me to easily animate them.
Week 3 Update Blog

We were tasked to create a business card using Photoshop that was well designed. Once we had designed the business card we had to animate them.
Week 4 Update Blog

We were tasked to judge what kind of point perspective each image was: 1-Point, 2-Point, 3-Point Perspective. We also got taught how to draw in different perspectives.
Assignment 1 Week 4 Update Blog

I put together my images, narration, and dialogue into a storyboard so that it showed visually where each scene would go and what would be happening in the scene so that when it comes to animating the story I am able to do it without having to look at multiple documents. The storyboard is important as "Since animation is a visual medium, it is important that the story ideas, the characters, the business, the continuity, and the relationships be presented in visual form rather than in words." (Thomas, Johnston and Thomas, 1995).
Week 5 Update Blog

I had to animate a lorry and make it move along a scene using motion paths making sure that it seemed realistic, by moving things like the bridge forward so that it looked like the lorry was going over it. I tried to move the garage to make it seem like the lorry was going inside it, however, because of the way the scene was designed it wasn't possible to do so.
Assignment 1 Week 6 Update Blog

I used the vectored images that I created using Adobe Capture and put them onto different layers using Photoshop so that each part of moving animations could be animated easily.
Week 6 Update Blog

We had to animate an SVG by using nested timelines so that it was obvious as to what the object was doing.
Assignment 1 Week 7 Update Blog

I started by importing the pictures I was going to use in the scene into my Library so that I could use them. I made the clouds go across the scene by having two copies and removing one when it got to the other side to make it appear as if it was endlessly going across. I then had an explosion happen by making a yellow circle expand over the screen with a slight glow which then faded to white. The clouds and the green of the hills contrast against the blue of the sky.
I then had islands that expanded from nothing to make it seem like they were being shot out. I made the islands float up and down by adding a 'SineEaseInOut' and by separating out the stopping points so it made them look like they were floating up and down randomly. I added the same to the cloud on the side.
I then added sound effects to the scene to make it more engaging. As "Good sound effects will add life and excitement to a film, whereas drab, ordinary sounds will quickly drain what life there might be in the action." (Thomas, Johnston and Thomas, 1995).
Assignment 1 Week 8 Update Blog

I then started to design my mini-game maze so that when we learnt how to code it, I could add it in.
Assignment 1 Week 9 Update Blog

As we learnt how to create the mini-game this week, I added the code to my mini-game and renamed parts to ensure that it worked with my code. Underneath the design I have thin walls that make the player get pushed back. The player has 5 lives and loses 1 life each time they hit a wall and once they run out they get sent back to the beginning. Once they reach the end green line it shows the next scene. When the character moves, the hands go back and forth to give more realism to the fact the character is moving.
Assignment 1 Week 10 Update Blog

For my third scene use a motion guide to make the sun move across the screen in a curved way instead of it being jagged. I also added narration to tell a story whilst the character wasn't speaking. On this scene I used the rule of thirds to place some of my objects. The outpost is in the middle of the right hand side of the screen, and the sun is on the left hand of the screen.
These are the five expressions I created for my characters to use depending on how they are feeling. I based them on what emotions I would actually be using in my animation. Expressions are important as "In every art form it is the emotional content that makes the difference." (Thomas, Johnston and Thomas, 1995).
For my fourth scene I used 'SineEaseInOut' to make the islands bob up and down as if they were floating. I also added a background wind to create an atmosphere and then faded out the end of the wind so that it didn't stop abruptly or carry on in the next scene. I also made the sun stay in the same place relative to the other scenes. In the other scenes, they are very close to the white wall, and because the sun is near the white wall in the other scenes, I made sure that it was in this one.
For my fifth scene I used another motion guide to move Reese onto the scene. I also used repetition with the islands in the background by making sure they were in the same place in each scene that was in the same area and doing the same thing, which is bobbing up and down to give the floating effect.
I then made Reese's arm into a MovieClip so that I could move it on a certain axis to lift his arm up. This then displayed the Provisional Scout License that became bigger from his hand so that the viewer could see it and then faded away using the alpha slider.
I also used the different expressions created earlier for their faces to convey different emotions in the character as "Through a change of expression, the thought process was shown." (Thomas, Johnston and Thomas, 1995). This shows you how the character is feeling in that moment and is much better than if they had a straight face for the entire thing.
When I added dialogue to my animation I needed to make the character move around a bit, as if they were standing still it could get a bit boring. I solved this by making the character change positions against the barrier and facing the other character. This is a problem quite a few animators get as "When dialogue was added to the stories, animators suddenly were faced with a whole new problem. What does the character do while he is talking?" (Thomas, Johnston and Thomas, 1995).
On my final scene I made Col's house island float away from the other island through the cloud wall and also the bridge falling off.
Bibliography:

Lashley, K. (n.d.). Skywander. [online] short-story.me. Available at: https://www.short-story.me/stories/fantasy-stories/1103-skywander [Accessed 25 Sep. 2019].

Vecteezy (n.d.). Spring Or Summer Cartoon Landscape. [image] Available at: https://www.vecteezy.com/vector-art/272751-spring-or-summer-cartoon-landscape [Accessed 26 Sep. 2019].

Schneider, J. (2018). Floating Island. [image] Available at: https://dribbble.com/shots/4058369-Floating-Island [Accessed 26 Sep. 2019].

microone (2019). Fluffy white cartoon clouds in blue sky vector set Premium Vector. [image] Available at: https://www.freepik.com/premium-vector/fluffy-white-cartoon-clouds-blue-sky-vector-set_4149226.htm [Accessed 26 Sep. 2019].

pixquik (2015). Wall Cloud. [image] Available at: https://www.flickr.com/photos/24688934@N02/20235385982 [Accessed 26 Sep. 2019].

588ku (n.d.). Classical Western Style Steampunk Steampunk Couple. [image] Available at: https://pngtree.com/freepng/classical-western-style-steampunk-steampunk-couple_3914427.html [Accessed 26 Sep. 2019].

3DHaupt (2017). Wooden Watchtower. [image] Available at: https://3dhaupt.com/wooden-watch-tower/3d-models-exterior-landmark-watch-tower-made-of-wood-1-2/ [Accessed 26 Sep. 2019].

Bur_malin (n.d.) Vector evening sky clouds. Sunset. Background design. [image] Available at: https://www.shutterstock.com/image-vector/vector-evening-sky-clouds-sunset-background-1163906167 [Accessed 26 Sep. 2019].

Webstockreview (2018). Whiskey Distilled beverage Beer Scotch whiskey Clip art – alcohol. [image] Available at: https://webstockreview.net/image/alcohol-clipart-bourbon/39253.html [Accessed 26 Sep. 2019].

Ward, A. (2018). Ruins and Castles. [image] Available at: https://www.artstation.com/artwork/vv286 [Accessed 26 Sep. 2019].

R4k (2019). Cartoon Ladder Illustration PNG. [image] Available at: https://imgbin.com/png/AN2RJ2yC/cartoon-ladder-illustration-png [Accessed 26 Sep. 2019].

machineagelamps (n.d.). Steampunk Industrial Antique Wood Beam Bench or Coffee Table. [image] Available at: https://machineagelamps.com/products/steampunk-industrial-antique-wood-beam-bench-or-coffee-table-1292 [Accessed 28 Sep. 2019].

Golden Sikorka (n.d.). Flat man driver license plastic card template, id card vector illustration. [image] Available at: https://www.shutterstock.com/image-vector/flat-man-driver-license-plastic-card-645891550 [Accessed 28 Sep. 2019].

NCSOFT (2019). WildStar Human House Concept Art. [image] Available at: https://www.pinterest.co.uk/pin/417005246743038902/ [Accessed 28 Sep. 2019].

glisic_albina (n.d.). Ship bound in the harbour. Safe connection concept. [image] Available at: https://stock.adobe.com/ee/images/ship-bound-in-the-harbor-safe-connection-concept/167831331 [Accessed 28 Sep. 2019].

clipart-library (n.d.). Cartoon Tree With Branches. [image] Available at: http://clipart-library.com/clipart/8T65XyM7c.htm [Accessed 28 Sep. 2019].

OpenClipart-Vectors (n.d.). Fence Fencing Border Free Picture. [image] Available at: https://www.needpix.com/photo/93500/fence-fencing-border-property-home-wooden-planks-free-vector-graphics [Accessed 28 Sep. 2019].

zilvergolf (n.d.). Vertical wood texture – wooden planks Premium Photo. [image] Available at: https://www.freepik.com/premium-photo/vertical-wood-texture-wooden-planks_2166641.htm [Accessed 28 Sep. 2019].

olegshuldyakov (2018). Handpaint Cartoon Wooden Structure Suspension Bridge. [image] Available at: https://3docean.net/item/handpaint-cartoon-wooden-structure-suspension-bridge/23067088 [Accessed 28 Sep. 2019].

Martinson, T. (n.d.). The Spire. [image] Available at: https://www.pinterest.co.uk/pin/433893745325665244/ [Accessed 28 Sep. 2019].

PabloXart (2019). Watercolor Bird. [image] Available at: https://www.pinterest.co.uk/pin/596515913119825986/ [Accessed 28 Sep. 2019].

Karlsson, T. (2016). Ye Olde Brewery Concept. [image] Available at: https://www.pinterest.ca/pin/562246334723274713/ [Accessed 28 Sep. 2019].


InspectorJ (2016). Bird Whistling, A.wav. Available at: https://freesound.org/people/InspectorJ/sounds/339326/ [Accessed 18 Dec. 2019].

InspectorJ (2017). Wind, Realistic, A.wav. Available at: https://freesound.org/people/InspectorJ/sounds/405561/ [Accessed 18 Dec. 2019].

Tommccann (2014). Explosion_01.wav. Available at: https://freesound.org/people/tommccann/sounds/235968/ [Accessed 18 Dec. 2019].


Thomas, F., Johnston, O. and Thomas, F. (1995). The illusion of life. New York: Hyperion, pp.298, 473, 455, 195.
CT4008 2D Animation with Mini-Game
0
26
0
Published:

CT4008 2D Animation with Mini-Game

0
26
0
Published: