Sense of hope animation: digital animation practice

During a Friday lesson, we learned the basics of Adobe Animate and got to practice rigging and animating pieces of the drawing.


animation stick-man (SOH)
Converting a character element into a symbol for animation

When you’re character is drawn in separate pieces, double-click on each piece to select it, then right-click each piece and select “Convert to Symbol” in the drop-down menu.

Then, when all pieces are converted to Symbols, select the bone tool in the tools menu on the right-hand side of the screen, then drag from a character part to where you want that character to be animated from, for example, dragging the indicator from the right leg to the bottom-right hand corner of the torso so it automatically animates like a real right leg when you begin adding key-frames. You can do this with each body-part. Then right-click again and select “Create Motion Tween” to enable the program to animate the body part in a key-frame.


animate keyframes image
Selecting a layer’s key-frames

When all body parts have been rigged, you can then create a key-frame in the timeline window at the bottom of the screen, at the length of time you want the animation to occur.

Afterwards, move the character part you want to animate, the amount you want it move it. For example, move the right arm a small amount to create movement in the new key-frame. Repeat this key-frame process each time you move a part of your character.




Sense of hope: animation methods

In order to get a better idea of how Cel animations are created, we were asked to analyse 2 existing 2D animations and how they were made for inspiration and for information on methods of 2D animation. For my examples, I have chosen the 1994 Disney film, the Lion King, and comparing it with their 2002 animated release, Treasure planet.

Screen Shot 2017-03-17 at 16.27.47
The Lion king
  1. Storyboards: The directors ( Roger Allers and Rob Minkoff) began by planning their film out using storyboards describing each scene or significant frame of animation using rough sketches of the scene and the dialogue used in the scene written beneath the picture. They then displayed the storyboards to a meeting of artists and animators acting out each storyboarded scene to convey the sequence.
  2. Voice-acting: Different actors were then brought into the Disney studio to record the dialogue for their respective characters. Each actor had to fit the voice the directors wanted for each character, and after being shown the storyboards for the film, they would record their voices for their character using a microphone and a script in front of them. Often, the artist for a particular character would use the actor’s facial expressions as inspiration for the character’s design. For example, actor Jeremy Iron’s face was the implemented in the design of the face of his character, Scar.
  3. Art and design: In order to get inspiration for their drawings and paintings and to ensure that the background and natural elements were as faithful to the setting as possible, each artist working on the film travelled to the African Savannah and observed the wildlife and scenery, drawing elements like a sunset, different trees and the rocky terrain. They would then take these paintings and drawings and show them to the directors so they could get an idea of what was perfect for what the film needed and what aspects needed to be re-drawn.
  4. Sound and music: Composer Hans Zimmer created the music for the film by combining western instruments, such as trumpets and violins, with instruments found in Africa, such as Marimbas and African drums, in order to make the music fit well with the film and it’s setting.
  5. Animation: For each character, a separate animator observed the way the animal that their respective character was based on moved and emulated it in their drawings and computer animation. For example, for the lion characters a real-life lion was brought into the art studio so the animator for Mufasa, for instance, could gain an understanding of how his character moved and what a lion’s mannerisms are like.
Screen Shot 2017-03-17 at 16.22.54
Treasure Planet
  1. Storyboards similarly to the Lion King, creating this animation began with pitching previously established and drawn storyboards outlining each significant scene and the dialogue that accompanied the scene. Since the film was revolutionising Disney studios by combining 2D and 3D animation, each storyboard also included details of what each shot of the film would look like, describing the cinematography of each scene described in the storyboard panels
  2. Art and design: In order to combine 2D and 3D animation, art director Andy Gaskill invented the 70/30 rule for the film’s design, which means that each aspect of the aesthetics of the film would be 70% traditionally designed and 30% sci-fi influenced design. In order to achieve traditional design elements, artists would draw inspiration from the classic book Treasure Island’s illustrator, N.C.Wyeth, specifically, a painting titled “one more step, Mr. Hands”, used because of the painting’s warm colour palate and classic “storybook” feel to it. When creating the 3D sets and characters for the film, the animators used a piece of technology they called “deep canvas” initially used for a previous film Tarzan, which allowed them to create sets in a 360 digital space. They then animated these against characters drawn in a traditional 2D style to create a depth of field effect.
  3. Sound design: The 70/30 rule was also used for the audio of the film, with sound designers using old wind-up mechanisms to avoid making the sounds of the film too “slick or sci-fi”. For the film’s music, composer James Newton Howard utilised both orchestral, modern music and Celtic music provided by Scottish musician Alasdair Fraser.
  4. Voice-acting:


A sense of hope assignment: definition of hope

Screen Shot 2017-03-10 at 12.00.56.png

Hope is a term that is subjective to different people and one that changes with religion, background and lifestyle.

For example, hope can be expecting life to improve and change for the better e.g. achieving what you want you have been aspiring to be in life like a dream job or lifestyle

Screen Shot 2017-03-10 at 12.08.37
Hopeful feeling

Or, hope can be a feeling of nostalgia or treasured memory that makes you feel more positive e.g. seeing the family home after a long time living in your own house or doing an activity that you haven’t done in a long time.

But generally, hope is expecting something to happen, mostly in a positive way or hoping for something that’s about to happen or a statement to be true.

Hope in films

Screen Shot 2017-03-10 at 12.16.03.png
Star wars: A new hope

The aptly named Star Wars: A new hope, features a farm boy on a quest to rescue a princess, under a request from an old Jedi, from an evil Empire and become the “new hope” for a galaxy under oppression. During which, each character goes through an arch that changes them for the better.

As you may have guessed the prime theme for Star Wars is, of course, having it’s main characters find hope again and achieve a better life for themselves.

For the character of Luke Skywalker, finding hope is about finding his way in life after tragedy hits his family and becoming the Jedi he is destined to be, under the guidance of the character of Obi-Wan Kenobi.

Han Solo’s character was just a cocky smuggler trying to pay off his debts before meeting the two main characters, and reluctantly travelling with them. During the quest the characters go on, he learns to value other people and not just himself.

Screen Shot 2017-03-10 at 12.54.05.png
Kung fu Panda

In Kung-Fu Panda, the main character Po is trying to achieve his dreams of becoming a Kung-Fu master along with his childhood heroes. The story tells about how Po is trying to prove himself to his teacher and new friends after accidently being selected as a chosen one, while an enemy of his Sensei, master Shifu escapes from prison during which time Po has to learn to become a Kung-Fu master before the enemy arrives.

The theme of hope runs through the fact that Po is trying to achieve his dreams and expectations despite all of the problems the situation causes for him, while trying to prove himself to his new friends and the people of the city he lives in. The side-characters must also, reluctantly, put their hope in Po after he is announced as a chosen one and help him defeat the enemy arriving in their city.

Hope is also used in a way that makes the hero more relatable, as throughout the film he is trying to achieve what he has wanted his whole life, which makes the audience connect with him. The different side characters are also relatable in the fact that they feel like they have been cheated out of what they were expecting to gain, which gives us something to connect with.

Sense of hope: animation technique ideas


For our new assignment for the next couple of weeks, we have been asked to create a 90 minute animation based on the feeling of Hope. I have started by brainstorming a few ideas of my own as well as bouncing off ideas with classmates.

Animation plot ideas

  1. My first idea was having a character go through life and achieving his dreams as his/her life improves e.g. they start the animation as poor and leading a homeless lifestyle, but as the animation continues, and he/she begins to achieve their hopes and dreams, the animation and backgrounds begin to brighten and get more colourful as their life improves.
  2. For my second idea, I decided to use an animal allegory and utilise the Dove, the universal symbol of hope, and have it go through the ups and downs of a birds life, for example, discovering a good nesting place for the first time or come close to losing one of her eggs. The animation will take place mainly on a tree and have

Animation style

My initial idea as to how I can present my animation was to have a 2D stop motion with a Lego or clay person walking through his life as his surroundings move and change behind and around him. For this, I can create a stop-motion animation at home, using my camera and tripod, a built Lego set and the character created as a Lego figure.

However, stop-motion animation takes up a lot of time and this assignment’s deadline may not allow me to spend as time on the animation as I would like, so I may have to use another animation method.

So another method I thought of was using Adobe Illustrator or Photoshop to draw my character and background, and then transferring them to Character animator using Adobe Bridge. I can then use Character animator to create the character and background’s animation, while using After-effects to improve and edit any effects I might want to include in the animation. It may be more technical and complicated, but using this method will take less time than a stop-motion.


Vroom! assignment: Evaluation



Thames tiger-sharks logo


What went right?

I felt like the drawings in my sketchbook went well, as I had plenty of ideas about what I wanted each team and logo to look like. I went through a few ideas for each before I had a type of logo that I wanted, but I think I made some good choices as  to what logos fitted best with the game’s genre and setting and the team’s names. I tried making them similar to car company logos such as Volkswagon by making them abstract, but recognisable.

I also think I made a good colour selection for each of my teams, basing them on the animal or place in London that each team was based on. For example, turquoise-blue and dark blue for the Thames Tiger sharks.

Using Photoshop, I created some good logos for my teams, again making them look like they belong to a car company, while using my selection of colours to make each logo look interesting and give each some personality. I used a variety of tools such as, the lasso tool, the pen tool and character tool for text.

What could have gone better?

If I had more time for the assignment, I could’ve made more decisions regarding an appropriate type and font for each team. I managed to find a good font for the Buckingham Lions ( Black Chancery) but I could’ve spent some more time on the fonts for the other teams


What went right?

Using Microsoft Excel, I created an organised timetable for each part of the assignment which was easy to read and to follow, giving each part a set number of days to complete them in.

What could have gone better?

If I had made the timetable earlier in the assignment, it would have allowed me to complete the first tasks in a more organised way and given me an indication of the time it would take to complete those tasks in.

Research and analysis 1: Project cars


What went right?

I feel as though I gave a good and in-depth analysis of Project cars’ HUD, explaining what the game does right in regards to it’s HUD, for, example, it’s default HUD, which was more streamlined and realistic car dashboard elements in first-person driving mode. I also tried to give my thoughts on what the game does wrong with it’s HUD, like it’s telemetry HUD, which was too crowded with unnecessary interface elements, like the gear you’re car is driving in.

Taking inspiration from this HUD was a good idea as I felt it influenced my own HUD design and gave me an indication of what type of interface works best when playing a racing game.

What could have gone better?

What could also have been beneficial to my HUD is having a comparison between Project Cars and another racing game like Forza Motorsport. This would have given influence to my design and would have helped me come up with my own ideas about what elements I could have in my interface.

Research and analysis 2: Dashboard research and Legal, moral and ethical considerations


What went right?

I think I created a good selection of mood-boards in Photoshop about different car dashboards, giving me some ideas as to what type of dashboard my futuristic car could have. I also feel as though I gave a good definition of legal, moral and ethical and gave relevant examples for each consideration using my assignment.

What could have gone better?

I think I could have taken more time to describe a car’s dashboard in a more in-depth manner, which would’ve given me a better indication of what advanced car dashboards look like, which would result in more inspiration for my own car’s dashboard, and making comparisons with two cars instead of using one car as an example would also have given me more ideas.

HUD elements and final piece


What went right?

Using Illustrator and Photoshop, I created a good variety of different interface elements, like the HUD’s map I created with Google Maps, taking a snapshot of the route I wanted and then turning it into a HUD element in Illustrator by adding a route line telling players which part of the race they are on. With Photoshop, I created a race items menu, indicating what in-game power-ups the player has picked up during the race. I then created a professionally made set of thumbnails with the HUD elements using Photoshop.

Creating the final piece in Photoshop I also felt went very well, superimposing each HUD element over a Google maps snapshot of a driver’s view of Tower bridge. I think I placed each element in a professional way and in a way that would give a player a good indication of what could be happening during each race. I also think I made a creative choice in making the map in 3D and utilised the 3D filter tool well.

What could have gone better?

In regards to the MPH indicator on the bottom left-hand corner, I think I could’ve made the design more creative and futuristic, like modelling the design after a trail of fire for example.

I also think I could’ve embedded the map more in the image by cutting out the parts of the map that were unnecessary and showing only the main route line that I had drawn.









Evolution of Mario kart

In order to find out more about HUDs have evolved in gaming, we took a look at how popular Nintendo game, Mario kart has been developed over the years.

This flagship franchise began with Super Mario kart for the Snes

A race in Super Mario kart: Console: Snes

Since the Snes could only handle 16- bits and elements onscreen, the HUD couldn’t be very complex and as such, only 1-2 people could play at once. However, the HUD still allowed for a basic knowledge of how the game was playing out. The number indicating the player’s position in the race (right of the screen) was only a basic translucent white colour, and, strangely, took up a large portion of the screen and so was the clock indicating the amount of time the race is taking on the top-right.

Using basic colour and images, the game informed the player about how many coins they had collected and how many lives the player has with images of a coin and a kart next to the corresponding number. Once you have completed a lap, a Mario character will float onscreen on a cloud, holding a sign saying which lap you have progressed onto, which is a creative way of showing players how they were progressing.

Mario Kart 64 (U).png
Mario kart 64: console: Nintendo 64


In this instalment, the franchise went from 16-64 bit graphics to 3D rendering and polygons, and now Nintendo were able to add more detail and elements onscreen. This was also true for the game’s HUD, showing a map that was more incorporated into the game, and a player position indicator that fitted on the screen better, and showed which characters were in which position offering a better Heads-up on how each race was progressing and making these elements easier to read.

The HUD also took up less space onscreen, and was better incorporated into the game giving it more clarity and giving the player a clearer understanding of the game’s progression.


Mario kart Super Circuit: Console: gameboy advanced

For this game, Nintendo went a bit back in time graphically, sticking with 2D animations, and more basic, bit-based graphics rather than polygons. The HUD did not change much from Mario kart 64, with race maps being in the same place and the lap counter remaining in the top-left corner. The only difference was that whenever you were nearing a corner, a large turn indicator would appear in the middle of the screen.

In terms of graphics, due to the power of the new console, Nintendo was able to have more details in their backgrounds and colours making the game look more artistic and interesting to look at, however they also did the same for the HUD, while giving it more detail and clarity, adding a bigger variety of colour and texture to things such as the lap counter and the item indicator, the map was also made bolder and sharper.

Mario kart: Double Dash: Console: Nintendo Gamecube

For the Gamecube, Nintendo had made graphical leaps since the Gameboy advanced. They were able to give more detail to different aspects of the graphics such as better textures, more depth and shading and a deeper colour pallet.

They were also able to advance the HUD as well, Such as a clearer character position indicator and more interesting map design. The HUD wasn’t crowding the screen so much anymore, so the player could see what was happening, with the timer taking less space onscreen and more strategically placed character avatar screens.

Mario kart DS: Console: Nintendo DS

When the Nintendo DS was released, the game was able to place some of the HUD at the bottom screen as the device was a two-screened handheld. This allowed for only the essentials of the HUD to be on the top-screen where the player would be focusing the most, so only the race position indicator, the items and the lap counter was placed on the primary screen. The timer and the character position avatars were placed on the bottom, secondary screen with the screen itself providing a top-down view of the race which meant that there was no need for the map HUD.

However, although the HUD design was improved by having two screens, the graphics themselves received a downgrade, looking like the old N64’s Mario kart 64, but more polygonal, and animations looked less fluid than other entries in the series.The textures for the road and items was also less appealing than other games looking rougher and less defined than the gamecube’s Mario kart: Double dash.

Mario kart: Wii: Console: Nintendo Wii

Mario kart received a huge graphical upgrade for the Nintendo Wii from the Nintendo DS, and as a result the HUD had an upgrade as well. Nintendo added a direction indicator to the map’s avatars giving a better indication as to what’s happening in the race. They also made the items display larger and clearer, making it easier to discern what item the player has picked up in the race.

The text for the position indicator, time stamp and lap counter received a deeper colour pallet having different shades of secondary yellow and red, making them stand out from the rest of the game and draws the players attention.

The power of Nintendo Wii gave the game a big graphical upgrade as well, receiving more detailed, clearer textures and fluid character and item animations. Different HUD elements like the position indicator in the bottom-left hand corner more dynamic and animated by having it spin and change position number when the player takes over an opponent.

mario 7.jpg
Mario kart 7: console: Nintendo 3DS

Since the Nintendo DS’s graphics still had to catch up with the Nintendo Wii’s graphics, the HUD had to change from Mario kart Wii. The position indicator became 2D instead of 3D and became primary yellow and in-shaded and the map display was less detailed, not having a direction indicator or very clear avatars. The time display and lap counter also became less clear and more pixelated. The character position avatars were also added to the game again, but they were made bigger than usual, taking up more space onscreen.

Textures became downgraded and unclear compared with Mario kart Wii, with aspects such as the game’s road looked as though it was still created on the previous Nintendo DS. However, the 3DS’s new stereoscopic system gave the in-game graphics an illusion of 3D depth and gave the whole game more clarity than before, except on the Wii.

Mario kart 8: console: WiiU

Nintendo’s WiiU gave the game more graphical  and HUD improvements. The power of the new console gave their latest instalment  Mario kart 8 a more varied colour pallet with different shades of primary and secondary green, yellow and  blue, just to name a few. Nintendo’s new stereoscopic engine gave the game depth and as such made the race more immersive and stunning to look at. More detailed and bright textures gave the game more personality and variety and made it more interesting to play.

Nintendo also streamlined the game’s HUD for their latest game, removing the character position avatars on the left and kept only the essential aspects of the HUD like the map on the bottom right corner, and the position indicator which had been moved to the top-right corner below the time display. They became 3D and shaded yellow again, becoming clear and animated again, and the map was given more detailed avatars and a directional indicator again, once again giving clarity to what was happening during the races.



Vroom! assignment: Dashboard research: Legal, moral and ethical implications

For this task of the assignment, I am going to be looking into different car dashboards and getting inspiration for my racing game. I will also be discussing the legal, moral and ethical implications and risks of creating a video-game HUD and how to avoid those risks.

Dashboard 1

Mercedes-Benz dashboard at nighttime ( MichaelHarley:2015)

For easier visibility, Mercedes-Benz incorporates an Infrared lights dashboard so the driver can clearly see the dashboard’s different components at nighttime. This also gives the car a futuristic look during nighttime, which is the time period my racing game is set in, so I can take inspiration from this style for one of my team’s cars.


These lights are placed around the most important components of the dashboard i.e. The speedometer, fuel gauge, etc.

The “Night view” also includes a night-vision viewing screen where a screen in the middle of the dashboard shows live footage of the road in front of you in night-vision, which gives more clarity to the direction you’re driving in. I can also take inspiration from this for my game.

For further research, I created a mood-board on different car dashboards.


car dashboards











Dashboard components

prevalently, the most obvious component in a dashboard is the Speedometer, the fuel gauge and the radio display. When in first person view in my game, I will have a speedometer display in one the screen’s corners as there will be no dashboard to implement this part of the HUD.

Legal, moral and ethical implications


  • Legal: Definition: Right by, or permitted by law e.g. “A legal right” or “Authorized by law”.

In order to ensure that I am being legal in my use of different dashboards, I will have to credit the company who created the car and who I am using as inspiration by using their name and give an indication as to how I am using it. For example, if I am using Mercedes-Benz’s website photos, “credit: Mercedes-Benz, 2004-17,”

  • Moral: definition: Personal standards of right and wrong e.g. “a highly moral person”

I will have to ensure that I am using these cars in a moral way by making sure that I am not taking inspiration from them in a way that is illegal and use them in a way that I feel is right, for example, not using the dashboard for plagiarism purposes and acknowledge the company who made the car properly.

  • Ethical: A sense of right and wrong shared by a community e.g. It is widely considered wrong to steal a car

In this case it is commonly considered wrong to use someone else’s work e.g. car dashboard without giving them the proper credit, therefore it is actually illegal. In order to avoid this I will have to credit the company who’s dashboard I am using so as to avoid copyright issues and not get accused of plagiarism.

  • Copyright and IP: definition: The legally given right to use e.g. Print, publish or use elements of, someone else’s IP (intellectual property) For example, using another artist’s music without these rights is illegal and un-ethical.

Therefore, when using different race teams for inspiration and for mood-boards, I must acknowledge and give a link to the identities of the team brand and sponsorships and give credit to the race team















After effects: 3D sphere animation

In this lesson, we were taught and then asked to create our own planet animation using a video our teacher put up on Moodle, different planet textures and Adobe after-effects.

To begin with, I downloaded the planet textures into a folder and uploaded it into a folder in after-effects I created called assets, then I created another folder called pre-comps.

I created a composition called master by clicking create a new composition in the projects window, and giving it the settings that the video tutorial showed.

(you can re-name the texture if you want)

Master comp settings

Then I dragged a planet texture I wanted into the “create a new composition tab” to make the texture appear in the composition window, then I dragged this composition into the pre-comp folder and re-named it.

texture composition

In the “effects and presets menu” I typed in sphere in the search bar and dragged “CC Sphere” onto the texture, which transformed it into a spherical shape





Screen Shot 2017-01-30 at 10.55.06.png
Spherical texture

(Note: There are other ways of getting an effect you want in after-effects, the effects tab in the top bar of the computer screen being one of them)

I then needed to add a rotation keyframe to make the planet turn. I opened up the effects tab below the project window and