Aaron Baker

A digital media design blog.

Category: Uncategorized (page 2 of 3)

Flash Animation Progress

This animation task has thrown up some interesting design choices and questions. At the start of the project, upon receiving the brief, it was suggested that we make our animations in an abstract style. This, from some of the examples shown from the early days of animation, might be most commonly interpreted as consisting of simple shapes, colours and lines with no real structure or meaningful progression throughout the animation, other than variation with the beat or melody of the accompanying music track. This sort of style can be seen for example in the short animation “A Colour Box” by Len Lye (accessed at: http://vimeo.com/6276547).

This style is all well and good, and certainly has its merits in experimenting with animation techniques and music synchronisation, however, it did not really interest me enough to pursue it for this task. I instead opted for a more (albeit very loosely) plot-driven piece, with a defined character and progression through the animation. Where I brought in the abstract ideas, then, was with the events of the animation. Rather than seeking to animate this character going through some ordinary task or activity, I chose to portray a scene based more around the emotions or feelings associated with a specific activity (in this case, listening to music).

I went about this by having a clear transition from the character simply walking along, to the activity taking place. This transition was primarily achieved by the initial lack, and then introduction of, the music track. I also added some visual cues such as a pair of headphones being dropped on to the character.

The music that I created for the piece is meant to convey a sense of joy, and a carefree attitude that the character is portrayed to be feeling during the activity of listening to the music. The character is then animated moving around the screen in a way that is greatly exaggerated, and which defies the normal rules of motion and gravity. I have used this motion as a visual representation of the mood being represented, which in this section is meant to suggest an elation at the music which removes everyday worries, and therefore physical restrictions on the animated character.

I also tried to make the piece humorous in nature, as it is quite a light hearted subject matter and I think that the humour works well with the exaggerated animations.

The final animation can be found here. 

Flash Animation Mini-Brief

The next piece of work to be done towards the portfolio of mini-projects is an animation made using Adobe Flash. The task also calls for an original soundtrack for the animation, which should be produced using GarageBand. The animation should be roughly 15 seconds in length, and should fit on a canvas of 22mm by 16mm in size.

This task will help me extend my skill set as I have only briefly used Flash to create animations in the past, and I have no experience at all with the GarageBand software, or any form of music production. While the task calls for only a simple soundtrack to last the required 15 seconds, I think even this will give me an insight into the creative processes involved with audio production, and let me get a feel for the area and see if it is something I would be interested in continuing with after the conclusion of the task.

I will also, I think, benefit from going through the animation process in Flash, as it is an area I haven’t done anything in for a while, and so it will be useful for me to be refreshed on the techniques and practices that go with it.

Thoughts on hand-drawn animation.

After I had produced the bouncing ball animation by hand, I realised several things. The first of these was that with such a small number of frames, it is quite hard to see small changes or deformations in the drawn shape. Because of this, the ‘squashing’ of the ball at the edges of the paper is not really exaggerated enough in the drawings to be entirely obvious in the final animation. This and many other reasons (primarily the ridiculous simplicity of the animation) cause me to acknowledge that what I produced is not very good as a piece, although it did serve well as a learning experience.

Another thing that I learned is that hand animation is really not an area that is meant for me. My drawing abilities are not up to scratch to produce anything in this manner except the most basic of animations using simple geometric shapes without taking an extraordinarily long time trying to draw something more complicated. Due to this, I do not intend to continue much further with this particular form of animation, although I see the usefulness of this task in learning about the history and foundations of animation.

Thanks to this task and my research around it, I have become more interested in animation as a whole, and am keen to try out some different methods and styles of it. I will focus, though, on more computer-generated areas where my drawing skills may not have so much of an impact.

Drawn Animation – Progression

As I begun the hand-drawn 12 frame animation task, I had several ideas of what I could draw. My initial plan was to try to animate a typical human walking cycle, although I quickly realised that this would prove quite difficult due to a combination of needing to redraw the entire image for each frame  and my lack of drawing skill.

I then changed my plan to animate a simple ball bouncing around the imagined space of the page, as I felt I could probably manage to draw at least a semi-passable circle twelve times.

I began by drawing the ball at the 4 cardinal directions on the page, hitting each of the edges and about to bounce off. To try to achieve this, I drew the ball slightly squashed in towards the edge each time. I then drew two transitional stages for each direction of motion, and again drew the ball as if it were being deformed, this time by the force of its motion and air resistance.

Once I had the required 12 images, I took a photo of them and imported them to the computer, as I felt this would be the easiest and best way to show them in a digital form as an animation. I then appropriately framed the images and turned them into an animated .gif file using the ‘gifsicle’ command in a Terminal environment.

The result of this can be seen below.

Hand drawn bouncing ball animation

The final bouncing ball animated gif image.


Hand Animation – Background

I recently worked on a short animation project, whereby the goal was to create a simple 12 frame animation using hand drawings, in the style of a zoetrope animation. In taking this on I decided to look into the history of this form of animation, as this was the first time I had heard of the particular technique.

The zoetrope is an early animation device which gives the illusion of motion in a series of still images. It is made up of simply a hollow cylinder (with vertical slits cut into the sides at regular intervals), on the inside of which is a strip made up of a sequence of static pictures. The device is then spun and a viewer can look through the slits to see the imagery inside. The spacing of the slits causes the images to appear to the human eye one after the other in rapid succession rather than blurring together, which much like a cinema projector creates  the illusion of a moving image.

The device can draw its roots all the way back to 180 AD and Chinese inventor Ting Huan, who created an early form of the zoetrope called ‘chao hua chich kuan’, which translates as ‘the pipe which makes fantasies appear’ (Needham 1962).

The modern zoetrope however was invented in 1833 by British mathematician William George Horner (Thompson and Bordwell 2010). He named it the ‘daedalum’ and it later became popular in the 1860s upon being patented by English and American manufacturers.

It was later improved upon and replaced by such devices as the praxinoscope and eventually modern film and television. However, the zoetrope retains its position as a large part of the origins of modern animation.


Needham, J., 1962. Science and Civilisation in China: Volume 4, Physics and Physical Technology, Part 1, Physics. Cambridge: Cambridge University Press

Thompson, K. and Bordwell, D. 2010. Film history.  New York, NY: McGraw-Hill Higher Education.

A page of videos

I have now completed the video page of the channel project website. I am pleased with the way it turned out, and with the methods I used to create it. I kept the page simple, with a responsive list of video thumbnails and titles which when clicked expand a video player containing the relevant video. This functionality was coded using PHP.

video player image

The expanded video player section.

PHP code for video player page

Some of the code behind the video player section.

The entire page, including the video player itself, is fully responsive and the thumbnails will flow to best fit the current screen width.

Video page at medium width

The video page at a medium width.

Video page at a small width

The video page at a small width.


I feel that the page has been a success overall. If I were to do a similar page in the future, I would like to include a flash fallback video for maximum compatibility, however due to the lack of flash on my own machine and the timing behind receiving the final rendered videos I have been unable to do this on this occasion. I have however encoded both mp4 and webm versions of t#every video to ensure compatibility across HTML5 video capable browsers.

The rest of the website has been completed by myself and the rest of the website team in our group, including a javascript-based image carousel on the homepage, and I have compiled the entire website together and made some tweaks to ensure full responsiveness across the site.

The final product can be seen here.

The various methods of responsive navigation

When it comes to responsive web design, it is important to implement it properly for the whole site, including the navigation bar. When on a large desktop display, this bar can afford to be a simple row of links with visual styling. However, as displays start to decrease in size it is important for it to make appropriate use of the available screen real estate.

There are multiple ways of doing this, of varying degrees of complexity. For my current channel project, I felt it was important to choose the right method of implementation for the navigation, so here I will discuss a few of them and my final decision.

The first and perhaps the easiest method is to simply center the navigation and let the navigation bar links overflow onto new lines as necessary using simple CSS. This is largely the approach I took for my personal website, although there I also moved the logo around the navigation at certain widths using media queries. This method is simple yet effective, and quick to implement. However, it can lead to a certain ‘jumbled’ aesthetic as the links may not be aligned, and it may not look very professional.

Personal portfolio menu at small screen width

The menu of my portfolio – at certain widths this approach can look a little odd.

Another similar approach that somewhat solves this issue, is to use media queries to make all of the navigation links the same width and height below a certain size, and then have them overflow as before. This creates more of a grid, with uniform cell sizes. For example, each link could be set to a half or a third of the viewport width to create two or three columns of links respectively. This creates a more professional look.

Yet another possible implementation of the menu is in a dropdown selection box. This has the advantage of being expandable and scrollable, and so being able to fit in large menus with possible sub-menus on the page without it constantly using the majority of the vertical space on the screen. It also may be familiar to many of the website’s users, as many applications use such selection items.

There are other variations that also expand out when clicked so as to not be constantly using screen space, which I feel is an important aspect. One of these is to have the menu off the side of the screen, and then have it slide in at the touch of a button.  This however has the disadvantage of using the entire vertical length of the screen when expanded.

The final option I will touch on, and the option I have implemented in the channel project website, is to restyle the menu into a simple vertical list under a certain screen width using CSS media queries, and then hide it. Then, using javascript a button is set to display and hide the menu on click. When the screen is resized back over the threshold width, the menu is reverted back to a horizontal row. I feel that this option works well in this context, as it is simple and easy to understand, and it uses a minimal amount of space on the page whilst still being easy to click/tap accurately.

Non expanded mobile friendly menu button

The non-expanded menu at small screen widths.

Expanded mobile friendly menu

The expanded menu, upon click of the menu icon.

Filming, we have lift-off.

Much was done today towards the channel project. Two out of our four planned videos have now been completely filmed and are ready for the editing process (something that will be handled by half of our group, while I as part of the other half work on the website).

We filmed on location at Dorchester Halls for the ‘Perception’ product video and in a park area between Bournemouth town centre and the beach for ‘Velocity’. The filming process went well and ran smoothly and efficiently, due to our prior planning and storyboarding of the scenes. We were unable to film at our intended location for the Velocity video due to unforeseen bad weather, however we were able to easily adapt the scenes to the new location with some minor reworking.

I took the role of both camera operator for some shots and director/assistant for others, as we shared roles throughout. I feel I performed well in both of these positions, and everyone performed well together as a team. At the end of the day, we had some high-quality shots ready to produce half of our video content, and everyone is a little more experienced then we previously were with camera work and the filming process.

First video sneak peak

A little sneak peak at the first video we filmed.

Channel website beginnings

For the channel website, I have been tasked with the creation of the actual video display page. This will need to include a way of browsing the available videos, as well as a way of watching them. I intend to serve the video content using the HTML5 native video capabilities, using the appropriate file formats to ensure maximal cross-browser compatibility. I also plan to incorporate, rather than a static video player page for every video, a way of dynamically switching the video being played in the player. I will most likely create this using PHP.

I have set myself three main goals for this page, and for the website in general. These are:

  • Professional appearance
  • Responsive
  • Easy to use

If I can achieve these goals, I feel I will have created a successful product to fit this project.

New project, new logos.

Today marks the beginning of our next major group project. The task this time is to create a video channel website and a few short videos based around a ‘Design-Fiction’ theme set in the future. Several general areas/themes for the channel were suggested, including the likes of health, travel and politics, and my group gathered to discuss the brief and decided to go down the health route.

We began throwing ideas around the group, and came up with several possible concepts. The one that we stuck with and began to develop was the idea of reporting on a range of pills that give the user temporarily enhanced powers or attributes. We proposed that this new invention would be aimed at the military, police etc. and that we would be covering it from a neutral standpoint – focussing on both the positives and negatives of the product rather than a purely promotional campaign.

After further work, we decided that the traditional idea of a pill was too strict and closed, in the sense that it’s not really open to interpretation or significant design elements. We elected to change the basis of the product we were reporting on to a drink. With this, and working on feedback we had received, we also decided to drop the critique elements and produce a series of advertisements for the product.  The plan is to produce a separate video for several different drinks that boost differing attributes, such as speed or strength.

We had our idea, then, and therefore needed to come up with the branding for the channel. Since the channel was promotional by nature, it made sense that it was the drink manufacturer itself making the videos, so what we began work on was a name and logo based around that.

The name we chose was ‘Vitalise’. We felt this suited the company as it suggests self-betterment by using the products, and it tied in well with the idea of gaining a temporary ‘power-up’.

Our logo ideas mainly focussed on showcasing the drink product in some way, in varying different shapes and styles. I personally produced a sheet of a few different logo ideas, one of which was ultimately chosen to be our final logo.

Initial Vitalise logo ideas.

The range of logos I personally designed for Vitalise.

The final logo chosen was the red circle with the white line drawing of liquid being poured. We chose this logo as it is simple and professional looking, and can easily be scaled to various different sizes to suit different purposes such as video overlays, bottle labels, t-shirt designs etcetera. It also only makes use of two colours, so possible printing costs wouldn’t be as high as if more colours were used.

The foundations are now set for this project. The next stage is planning the video content and the channel website, and then continuing on from there.

I’m looking forward to it.

Older posts Newer posts

© 2019 Aaron Baker

Theme by Anders NorenUp ↑