Create 2D Animations for Interactive Media Products

1 – Understand key issues relating to creating animations for interactive media products

1.1 – Explain the use of computer animation in interactive products

Animations are there, mainly, to bring life to an otherwise static feature. They make the user feel as if they’re really interacting with something, as opposed to simply clicking on a button or looking at an image. Whether it’s having a button simply change colour when rolled over, or having a fully-animated GIF that activates under certain conditions, the use of animation is very common now in interactive products. They’re not always there for convenience of use – normally, more for aesthetic purposes, to grab the attention of a user and make them feel a little more invested in the product. They may at time be there to help make an experience more convenient, but it’s hard to think of many examples. Most of the time, they’re there to make a user feel as if they’re really interacting with something, and hold their attention a little longer.

1.2 – Explain the key techniques used in computer animation

There are many different methods to create an animation, which give the end result different styles. However, they all tend to work in the same way – the subject moves a certain amount within a certain amount of time. Whether it’s a frame animation or 3D animation, this method still carries across.

Frame animation is a very common method, because it’s very simple and is easy to grasp. This is the concept of having separate images interchanging, to give the illusion of movement – exactly the same as a flip book. This technique can be carried out with ease on programs such as Photoshop, due to its Timeline feature, and Adobe Flash. It’s a method often used for GIFs and short animations, or very simple animations that don’t need to be perfectly fluid. Frame animations work in the same way as hand-drawn animations, commonly seen in cartoons. When you draw an animation by hand, you draw each frame of it with the character/object moving slightly in each, which are then strung together to give the illusion of movement, with an often very smooth, fluid result if done correctly. Basically, it works in the same way as a frame-animation, only more care is generally put into it, with a higher number of frames, and a higher attention to detail.
There are also 3D animations, where a 3D model is moved little by little between frames – again, the same concept as the previous two methods. However, it’s generally very fluid since the parts between the specific frames are automatically filled in, resulting in (when done well) a very smooth animation.

2 – Understand key contextual information relating to creating 2D animations for interactive media products

2.1 – Identify the requirements of the specification/brief

I have been asked to create an animated banner for our new website launch (on WordPress). The timeframe isn’t specific, due to running into a few walls with the website. This brief was given to me after we chose to use WordPress, so we at least know the rough layout of the website. I have been given the sizing, and have been requested to make it a stylised illustration of the London skyline. Initially, we discussed having numerous banners for different pages showing different countries, but we soon realise this could possibly create confusion for the user, due to a lack of inconsistency. We will likely stick with the blue colours to match Gray Dawes’ image, and I must ensure that the final design is clean and tidy, similarly to our design of Grayson. The overall design will look quite flat and blocky, whilst also mature and fitting for a corporate company.

2.2 – Identify the purpose of the product

The banner will be used to pique the interest of users who visit our new website. It should draw them in and make them interested in what we have to say, but without drawing their eyes too far from the content on the pages. Essentially, we want it to catch their attention, thereby engaging them and giving them the opportunity to read more. When it comes to graphics you pretty much have a split second to engage someone with design, and that’s what we hope to do with this banner. We hope it’ll make them stay on the website that second longer, giving us a higher chance of them reading our content. We also want the website to convey the professional yet quirky image of Gray Dawes, through the use of subtle animation and bold colours.

2.3 – Identify the expectations and requirements of target users for the product

People who view the banner on the website will expect to see something professional, related to both travel and the UK, as well as aesthetically sleek and corporate. They may also, however, expect to see something with a bit of an unusual feature, due to Gray Dawes’ pride in being a very friendly corporate company. We’re pretty much rebranding Gray Dawes’ online appearance across the website, social media and other platforms, so the banner must convey the right image of Gray Dawes to users. This is something quite important that I’m taking on, seeing as this banner will contribute to the rebrand of their online appearance – we want to keep the same corporate image, but just give it a fresh new appearance. People visiting the website will have the requirements of an easy-to-use and stress-free experience, so the banner needs to ensure it doesn’t compromise the overall layout, or make the website hard to navigate. It should be bold and make a statement, yet not distract someone too much that they find the website hard to navigate. Gray Dawes is a well-established company with a professional history, so users of the site will be expecting to see an appearance that fits with Gray Dawes’ reputation.

2.4 – Identify the events or user interactions that will trigger the animations created

The animation will actually just be a GIF that activates the moment you open the website, so that’s all the interaction it needs. We want them to land on the website and instantly feel intrigued to look for more, and we feel that an animated banner will do that. Even if they don’t navigate to other pages, a moving banner is certain to hold their attention for longer than a static banner. It’ll give them a sense of interaction, and tell them we care about our online appearance. We don’t want the user to have to go out of their way to trigger an animation, since we don’t feel that there is much point. Our animation is simply there to hold their attention for a moment longer, so we don’t want to have to ask them to take part in any form of interaction with it. The banner should hopefully consistently move across all the pages without restarting each time, which should make the website feel a little more immersive and cleaner.

2.5 – Identify how animation will be used in the product

Within the banner, we’re planning to have a stylised London skyline, featuring famous buildings and landmarks. Amongst that, we hope to have an animated taxi driving between a couple of buildings, and we also want the London Eye to spin around slowly. The CEO has also requested that we have a plane fly across the banner somewhere, to link it back to travel. These few animated elements, whilst somewhat subtle, should definitely give the banner some life! We don’t want the banner to be incredibly distracting or take away from the content of the pages – we instead want the animation to be easy to spot, whilst still remaining subtle, simply to give the pages some movement and life. The banner itself will sit along the top of the website, beneath the logo and navigation bar. As stated earlier, we hope the animation will draw people in for that second longer, giving us a greater chance of them reading some pages on our website.

3 – Be able to create 2D animations for use as part of an interactive media product

3.1 – Design animations within specified style guidelines and within specified parameters and constrains relating to the target platform

On the website, the banner needs to be a certain dimension (1400px x 450px) so that it fits properly, so this was something I had to consider. I also had to ensure that the file size wasn’t too massive, because that could make it difficult loading it onto WordPress, and slow the website down. I also had to ensure the design was appealing to fellow colleagues, so I often stopped and checked the progress with more senior members, and also asking the CEO if there were any changes she wanted made. (progress screenshots can be found in Unit 42)

3.2 – Create animations that meet the specification/brief

I created all of the elements on Adobe Illustrator, making good use of the pen and shape tools. I drew out the London skyline, which we looked at in a few different colours. We decided on a specific colour scheme, which I then added more to. The CEO requested we add some small details like lamp posts, a post box and a phone box, which were also created in Illustrator. I used reference images from the internet to create accurate illustrations, which helped me with the overall structure of the banner. Then, using Photoshop, I put together the overall animation, using separate frames to make them move. The parts that needed to move were drawn as separate in Illustrator to the main skyline, and were on different layers. For example, for the London Eye, we had 11 different illustrations of it with the wheel at a different angle, which were then added to Photoshop as 11 separate layers, which interchanged with each frame. For items like the taxi, I simply had it on one separate layer, and changed the position of it with each frame – the same technique as stop-motion animation.

Overall, the banner certainly meets the brief. It sits well on the website, works properly, and clearly communicates Gray Dawes’ online persona/appearance. We have made use of this banner (minus the taxi, post box etc) on many other documents, including newsletters, information documents, social media and more. This is because the banner just works so well as a header or footer, and we’re using it to keep our identity consistent. You can see the banner below! (progress screenshots can be found in Unit 42)

Below is a screenshot of it on the website.

4 – Be able to liaise with relevant parties

4.1 – Provide clear instructions as required for other parties to incorporate animations into the product

Luckily, the method of incorporating the animation was very simple. All we needed to do was add it to the Media files for our website, then select ‘customise’. We were then able to select the banner, choose our banner design, and then save the changes. We did initially run into a small issue, where we added the banner to the website but it wasn’t moving. The IT guys then realised that when adding a photo, it asks that you crop it. Doing this seems to turn a GIF into a JPEG, thereby negating all of the animation. We tried again, skipping the cropping, and the banner functioned perfectly. Ever since we initially uploaded the banner, of course, there have been very minor tweaks to the original file (like adding a logo to a building, for example), which of course has resulted in the banner being changed a couple of times. But because of the incredibly simple process needed to upload it to the website, I have always been able to do this myself. We have never changed the design of the banner – just tiny tweaks that perhaps a colleague spotted or wanted made.
We have, however, designed alternate versions for different times of the year! You can see them below:

Halloween 2015:

Christmas 2015:

4.2 – Liaise with relevant parties to ensure own animations are appropriate and meet requirements

Since David was the person who initially came up with the idea, I always checked with him whether the animation suited Gray Dawes and the website. He has a good idea of what Gray Dawes’ appearance should be, but also likes to keep things unusual and specific to us. Therefore he was a great person to get feedback from, and it always helped push the design and animation further. I would also check with the CEO, since she had a few details she wanted added/changed every now and then. Naturally, she would have the final say as to whether it suited the new website, so I would always make sure to check each stage of the design with her. Danielle, who is the leader of our group, was a great person to ask to have a quick look over the animation, since she might spot something that I didn’t. I’d always ask for her input and ideas to move the design forwards!

5 – Be able to store 2D animations for use as part of an interactive media product

5.1 – Save animations in appropriate formats to facilitate incorporation into the product

To have the banner repeat itself and activate upon landing on the website, the most obvious format choice was GIF. This offers a lot of freedom due to being a frame animation, being a small file size, and the option to have it loop when designing it. Whilst it doesn’t provide an animation as smooth as other formats, it works well to give the illusion of movement, and we knew it’d repeat itself with no issues. It was also compatible with WordPress, which was another reason for the format choice. Essentially, it boiled down to GIF being the easiest format for us to use, because it just didn’t present any major issues.

5.2 – Organise animations using appropriate filing and naming conventions to facilitate access by others

In the P:Drive, which is accessible to all employees, myself and Danielle have a folder called ‘Communication and Media Team’. Most people know to head to this folder if there’s something by us that they need to get a hold of.
Within that, there’s a folder called ‘Animations’, which is pretty self-explanitory. Then, there are two folders, ‘Tests’ and ‘Website Banner’, which again are pretty easy to understand. Clicking onto the ‘Website Banner’ folder brings up the banner GIF, which can then be used.
I always name folders and files with very obvious names, so that it’s easy to keep track of them and find them through the search feature if things go wrong. I also like to have everything separated into its own folder – there is only one file within the ‘Website Banner’ folder, but I feel it just keeps everything tidy and organised, rather than simply having the banner GIF in the ‘Animations’ folder.